:root{
  --bg:#0e0c0b; --panel:#171312; --accent:#CC0000; --accent-2:#FFD700;
  --text:#E8E8E8; --muted:#a9a9a9; --shadow: 0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Montserrat,Inter,Arial,sans-serif;color:var(--text);}
.bg{min-height:100dvh;background:
 radial-gradient(70% 70% at 70% 20%, rgba(204,0,0,.18), transparent 60%),
 radial-gradient(60% 60% at 30% 80%, rgba(255,215,0,.12), transparent 60%),
 linear-gradient(180deg, #0b0908, #000); display:flex; flex-direction:column;}
.brand-bar{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem .75rem;border-bottom:1px solid rgba(255,255,255,.06);}
.logo{height:clamp(72px, 12vw, 140px);opacity:.98;filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));}
.x{opacity:.9;font-size:clamp(28px,5vw,48px);}
.hero{display:grid; place-items:center; text-align:center; padding:1rem}
.hero .logos{display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap}
.scanlines{position:fixed; inset:0; pointer-events:none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,.02), rgba(255,255,255,.02) 2px, rgba(0,0,0,0) 3px ); mix-blend-mode:overlay}
.fqrs{position:relative; min-height: 0}
.fqr{position:absolute; width:clamp(40px,8vw,80px); height:clamp(40px,8vw,80px); opacity:.14; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); animation: drift 12s linear infinite}
.fqr img{width:100%; height:100%;}
.fqr:nth-child(1){left:-10px; top:-10px; animation-duration: 14s}
.fqr:nth-child(2){right:-14px; top:20%; animation-duration: 11s}
.fqr:nth-child(3){left:10%; bottom:-14px; animation-duration: 13s}
.fqr:nth-child(4){right:12%; bottom:-10px; animation-duration: 12s}
@keyframes drift{0%{transform: translateY(0) rotate(0deg)} 50%{transform: translateY(-12px) rotate(8deg)} 100%{transform: translateY(0) rotate(0deg)}}

.card{width:min(820px, 94vw); margin:2rem auto; padding:1.25rem 1.25rem 1.5rem; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); border:1px solid rgba(255,255,255,.06); border-radius:16px; box-shadow:var(--shadow); position:relative;}
h1,h2,h3{margin:.25rem 0 .5rem}
p{margin:.5rem 0 1rem; line-height:1.4}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:center}
.button{appearance:none;border:0;border-radius:999px;padding:.85rem 1.25rem;background:var(--accent);color:white;font-weight:800;text-decoration:none;box-shadow: 0 10px 26px rgba(204,0,0,.35);cursor:pointer}
.button.alt{background:#b4882f; box-shadow: 0 10px 26px rgba(255,215,0,.28);}
.button.pulse{animation: pulseBtn 1.6s ease-in-out infinite}
@keyframes pulseBtn{0%,100%{transform:scale(1)} 50%{transform:scale(1.04)}}
.link{color:var(--text);opacity:.85}
.coins{display:flex;gap:1.25rem;margin-top:1rem;justify-content:center}
.coins div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:.5rem .75rem; text-align:center; min-width:120px}
.coins span{display:block;font-size:1.6rem;font-weight:900}
.coins small{opacity:.7}
.split{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
dialog{border:1px solid rgba(255,255,255,.1); background:#101010; color:var(--text); border-radius:16px; padding:1.25rem; width:min(520px, 92vw); box-shadow:var(--shadow)}
.foot{opacity:.6;text-align:center;margin: 1rem 0 2rem}
code{background:#222;padding:2px 6px;border-radius:6px}

.reset{margin-left:auto; opacity:.8; font-size:.9rem; cursor:pointer; border:1px solid rgba(255,255,255,.15);
  padding:.25rem .6rem; border-radius:8px; background:rgba(255,255,255,.06)}
.reset:hover{opacity:1; border-color:rgba(255,255,255,.35)}

.hud{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem}
.hud .bar{flex:1; height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden}
.hud .bar span{display:block; height:100%; background: linear-gradient(90deg, var(--accent), #b4882f); width:0%}
.hud .score{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:.25rem .6rem; border-radius:10px}

.coin-burst{position:fixed; left:50%; top:40%; transform:translate(-50%,-50%); font-size:24px; pointer-events:none;
  animation: burst .9s ease-out forwards; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4));}
@keyframes burst{
  0%{transform:translate(-50%,-50%) scale(.5); opacity:0;}
  60%{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.2); opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.9); opacity:0;}
}