:root{
  --bg:#0b0b12;
  --panel:#121221;
  --ink:#eaeaea;
  --muted:#b5b5c3;
  --pink-1:#ff2aa1;
  --pink-2:#ff5ac9;
  --pink-3:#ffd1ef;
  --accent:#7cf5ff;
  --glass:rgba(255,255,255,.06);
  --ring:rgba(255,90,201,.45);
}

html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 900px at 70% -10%, #1b1530 0%, transparent 60%) var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  letter-spacing:.2px;
  overflow:hidden;
}

canvas#stars{position:fixed; inset:0; z-index:0}

.scanlines{
  pointer-events:none;
  position:fixed; inset:0; z-index:2;
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,0) 2px) 0 0/100% 3px,
    radial-gradient(transparent 60%, rgba(0,0,0,.35)) 50% 150%/140% 60% no-repeat;
  mix-blend-mode:overlay;
  opacity:.25;
  animation:sl-flicker 6s infinite steps(60,end);
}
@keyframes sl-flicker{
  0%,100%{opacity:.22}
  50%{opacity:.28}
}

.wrap{
  position:relative; z-index:3;
  display:grid; place-items:center;
  min-height:100dvh; padding:6vmin 3vmin;
}
.card{
  width:min(1100px,92vw);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 90px 8px rgba(255,90,201,.10);
  overflow:hidden;
  position:relative;
}

.card::before{
  content:"";
  position:absolute; inset:0;
  border-top-left-radius:22px; border-top-right-radius:22px;
  background:linear-gradient(90deg, transparent, var(--pink-2) 30%, var(--pink-1) 50%, var(--pink-2) 70%, transparent);
  height:4px;
  box-shadow:0 0 40px 10px var(--ring);
}

.grid{
  display:grid; grid-template-columns: 1.2fr .9fr; gap: clamp(28px, 6vw, 56px);
  padding: clamp(28px, 5vw, 64px);
}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
}

.brand{
  font-size: clamp(42px, 8vw, 84px);
  line-height:1;
  margin:0 0 10px 0;
  letter-spacing:.5px;
  background:
    linear-gradient(180deg, var(--pink-3), var(--pink-2) 45%, var(--pink-1) 70%, #c01873 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 24px rgba(255, 90, 201, .25),
    0 6px 28px rgba(0,0,0,.6);
  filter:drop-shadow(0 0 18px rgba(255, 90, 201, .3));
}

.strap{
  margin:0 0 18px 0;
  color:var(--muted);
  font-size: clamp(16px, 2.2vw, 20px);
}
.strap a{
  color: inherit;
  text-decoration: none;
}
.strap a:hover{
  text-decoration: underline; 
}

.chip{
  display:inline-grid; place-items:center;
  padding:8px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  color:#15141c;
  margin-right:8px;
  user-select:none;
}
.chip span{
  background:linear-gradient(180deg, #fff, #ffe8f6 50%, #ffd1ef);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.panel{
  padding:18px 18px;
  background: radial-gradient(220px 120px at 0% 0%, rgba(255,90,201,.15), transparent 60%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
}

.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px}
.btn{
  position:relative;
  appearance:none;
  border:0; cursor:pointer;
  padding:14px 20px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.4px;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  outline: none;
}
.btn-primary{
  color:#0b0710;
  background:
    radial-gradient(120% 220% at 20% -20%, #ffffff, #ffe1f3 35%, #ffc9ea 60%, #ff9edd 85%),
    linear-gradient(90deg, var(--pink-2), var(--pink-1));
  box-shadow:
    0 12px 30px rgba(255, 90, 201, .35),
    0 0 0 1px rgba(255,255,255,.25) inset;
}
.btn-primary:hover{transform: translateY(-1px) scale(1.01)}
.btn-ghost{
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.btn-ghost:hover{filter:brightness(1.05)}

.teaser{
  background:
    radial-gradient(800px 260px at 50% -10%, rgba(255,90,201,.15), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:18px;
  position:relative;
  overflow:hidden;
  min-height:220px;
}
.teaser h3{
  margin:0 0 10px 0;
  font-size:18px; color:var(--pink-3); letter-spacing:.4px;
  text-shadow:0 0 18px rgba(255,90,201,.3);
}
.teaser p{margin:0; color:var(--muted)}
.teaser .crt{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.15
}

.footer{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.09);
  padding:14px 18px; color:var(--muted); font-size:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22));
}
.ticker{
  width:100%; overflow:hidden; white-space:nowrap; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker span{display:inline-block; padding-left:100%; animation:scroll 18s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}

@media (prefers-reduced-motion: reduce){
  .scanlines, .ticker span{animation:none}
  .btn, .btn-primary, .btn-ghost{transition:none}
}
#pinkcar-game { image-rendering: optimizeSpeed; }

.teaser { position: relative; }
.game-frame {
  position: absolute;
  inset: 0;                
  border-radius: inherit;  
  overflow: hidden;        
  z-index: 1;
}
.teaser .crt { z-index: 2; }  
#pinkcar-game { display:block; width:100%; height:100%; image-rendering: optimizeSpeed; }
.teaser { position: relative; }
.game-frame {
  position: absolute; inset: 0;
  border-radius: inherit; overflow: hidden; z-index: 1;
}
.teaser .crt { z-index: 2; }
#pinkcar-game { display:block; width:100%; height:100%; image-rendering: optimizeSpeed; }

.pc-controls { position:absolute; inset:auto 0 12px 0; display:flex; gap:12px; justify-content:center; z-index:3; }
.pc-btn { user-select:none; touch-action:none; width:62px; height:62px; border-radius:999px;
  background: radial-gradient(80% 80% at 30% 20%, #fff, #ffd6ef 45%, #ffb7e6 70%, #ff8dd8);
  box-shadow: 0 10px 18px rgba(255,90,201,.35), 0 0 0 1px rgba(255,255,255,.35) inset;
  display:grid; place-items:center; font: 700 12px/1 Inter, system-ui; color:#2b1430;
}
@media (min-width: 900px){ .pc-controls{ display:none; } }
.rules {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted);
}
.rules li::before {
  content: "▶ ";
  color: var(--pink-1);
}

.scores h3 {
  margin: 0 0 8px 0;
  color: var(--pink-3);
  font-size: 18px;
  text-shadow: 0 0 12px rgba(255,90,201,.5);
}
.scores ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.teaser {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    radial-gradient(800px 260px at 50% -10%, rgba(255,90,201,.15), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.sponso-badge {
  position:absolute; top:10px; right:10px;
  font: 700 10px/1 ui-sans-serif, system-ui;
  padding:6px 8px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  color:#1b1322;
  animation: sponso-blink 1.4s steps(2,end) infinite;
  user-select:none;
}
@keyframes sponso-blink{ 50%{ opacity:.4 } }

.sponso-logo {
  margin:0 0 6px 0;
  font-weight:900;
  font-size:22px;
  letter-spacing:.3px;
  background:linear-gradient(180deg, var(--pink-3), var(--pink-2) 50%, var(--pink-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(255,90,201,.45);
}

.sponso-tag { margin:0 0 10px 0; color:var(--ink) }
.sponso-bullets { margin:0 0 14px 18px; }
.sponso-bullets li { margin:4px 0 }
.sponso-cta { display:inline-block; margin-bottom:10px }
.sponso-legal {
  font-size:12px; color:var(--muted);
  border-top:1px dotted rgba(255,255,255,.18);
  padding-top:8px;
}



.sponso-badge{
  position:absolute; top:10px; right:10px;
  font: 700 10px/1 ui-sans-serif, system-ui;
  padding:6px 8px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  color:#1b1322;
  animation: sponso-blink 1.4s steps(2,end) infinite;
  user-select:none;
}
@keyframes sponso-blink{ 50%{ opacity:.4 } }

.sponso-logo{
  margin:0 0 6px 0;
  font-weight:900;
  font-size:22px;
  letter-spacing:.3px;
  background:linear-gradient(180deg, var(--pink-3), var(--pink-2) 50%, var(--pink-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(255,90,201,.45);
}

.sponso-tag{ margin:0 0 10px 0; color:var(--ink) }
.sponso-bullets{ margin:0 0 14px 18px; }
.sponso-bullets li{ margin:4px 0 }

.sponso-cta{ display:inline-block; margin-bottom:10px }

.sponso-legal{
  font-size:12px; color:var(--muted);
  border-top:1px dotted rgba(255,255,255,.18);
  padding-top:8px;
}
.sponso-bullets li { margin:6px 0 } /* more breathing room */

.sponso-promo {
  margin: 12px 0;
  font-weight:700;
  color: var(--pink-2);
  text-shadow:0 0 10px rgba(255,90,201,.5);
  font-size: 14px;
}
.sponso-promo .promo-num {
  font-family: monospace;
  font-size: 16px;
  letter-spacing:1px;
}

.teaser { display: grid; align-content: start; }

.sponso-adwrap{
  display:grid; gap:10px; min-height: 220px;
  transition: opacity .45s ease, transform .45s ease;
}
.sponso-adwrap.ad-leave{ opacity:0; transform: translateY(6px); }
.sponso-adwrap.ad-enter{ opacity:1; transform: translateY(0); }

.sponso-bullets{
  margin: 0 0 6px 0;
  padding: 0;
  list-style: none;
  columns: 1; 
}
@media (min-width: 1060px){
  .sponso-bullets{ columns: 2; column-gap: 22px; }
  .sponso-bullets li{ break-inside: avoid; }
}
.sponso-bullets li{
  position: relative;
  padding: 6px 0 6px 22px;
  font-weight: 600;
  letter-spacing: .2px;
}
.sponso-bullets li::before{
  content: "•";
  position: absolute; left: 0; top: 4px;
  font-size: 18px; line-height: 1;
  background: linear-gradient(180deg, var(--pink-3), var(--pink-2) 50%, var(--pink-1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 10px rgba(255,90,201,.5);
}

.sponso-tag{
  margin: 0 0 4px 0; 
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .3px;
}
.sponso-promo{
  margin: 8px 0 6px 0;
  font-weight: 900;
  letter-spacing: .6px;
  color: var(--pink-2);
  text-shadow:0 0 10px rgba(255,90,201,.5);
  text-transform: uppercase;
  border-top: 1px dotted rgba(255,255,255,.18);
  padding-top: 10px;
}
.sponso-legal{
  font-size: 12px; color: var(--muted);
  border-top: 1px dotted rgba(255,255,255,.18);
  padding-top: 8px;
}

#theory {
  font-size: clamp(16px, 2.4vw, 18px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}


.rules-heading {
  margin: 0 0 12px 0;
  font-size: clamp(18px, 2.6vw, 20px);
  font-weight: 800;
  letter-spacing: .4px;
  background: linear-gradient(180deg, var(--pink-3), var(--pink-2) 60%, var(--pink-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(255,90,201,.5);
}

.rules {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rules li {
  margin: 6px 0;
  padding-left: 28px;
  position: relative;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 500;
  color: var(--muted);
}
.rules li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  color: var(--pink-1);
  text-shadow: 0 0 6px rgba(255,90,201,.4);
}
.rules.numbered {
  counter-reset: rule;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rules.numbered li {
  counter-increment: rule;
  margin: 8px 0;
  padding-left: 28px;
  position: relative;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 500;
  color: var(--muted);
}
.rules.numbered li::before {
  content: counter(rule) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
  color: var(--pink-1);
  text-shadow: 0 0 6px rgba(255,90,201,.5);

  animation: seqPulse 10s infinite;
  opacity: .4; 
}

@keyframes seqPulse {
  0%, 100% { opacity: .4; text-shadow: 0 0 6px rgba(255,90,201,.4); }
  10%, 20% { opacity: 1; text-shadow: 0 0 12px rgba(255,90,201,.9); }
  21%, 100% { opacity: .4; text-shadow: 0 0 6px rgba(255,90,201,.4); }
}

.rules.numbered li:nth-child(1)::before { animation-delay: 0s; }
.rules.numbered li:nth-child(2)::before { animation-delay: 2s; }
.rules.numbered li:nth-child(3)::before { animation-delay: 4s; }
.rules.numbered li:nth-child(4)::before { animation-delay: 6s; }
.rules.numbered li:nth-child(5)::before { animation-delay: 8s; }
.theory-heading {
  display: block;
  margin-bottom: 6px;

  font-size: clamp(18px, 2.6vw, 20px);
  font-weight: 800;
  letter-spacing: .4px;

  background: linear-gradient(180deg, var(--pink-3), var(--pink-2) 60%, var(--pink-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 0 10px rgba(255,90,201,.5);
}

@media (min-height: 800px){
  .wrap{ align-items: center; padding-top: 0; }  
  .card{ transform: translateY(-2vh); }        
}

@media (min-height: 1000px){
  .card{ transform: translateY(-3vh); }
}