*{box-sizing:border-box}html,body{
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
  padding:18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.82)),
    radial-gradient(circle at 12% 10%, rgba(255,115,0,.12), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(255,170,0,.10), transparent 20%),
    radial-gradient(circle at 50% 92%, rgba(59,130,246,.08), transparent 24%),
    url("site-background.png") center center / cover no-repeat fixed;
}
body{
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
  padding:18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.82)),
    radial-gradient(circle at 12% 10%, rgba(255,115,0,.12), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(255,170,0,.10), transparent 20%),
    radial-gradient(circle at 50% 92%, rgba(59,130,246,.08), transparent 24%),
    url("site-background.png") center center / cover no-repeat fixed;
}
.page{width:100%;max-width:1180px;margin:0 auto;background:linear-gradient(180deg, rgba(7,10,20,.84), rgba(0,0,0,.80));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden}
.page:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:28px;background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 16%),
radial-gradient(circle at top center, rgba(255,180,0,.07), transparent 36%),
none;opacity:.95}
.hero-logo{width:92px;height:auto;display:block;margin:0 auto 10px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
h1{margin:0 0 8px;text-align:center;font-size:42px;text-shadow:0 8px 30px rgba(0,0,0,.5),0 0 24px rgba(255,153,0,.12);letter-spacing:.4px}
.sub{text-align:center;color:rgba(255,255,255,.9);margin-bottom:16px;font-size:14px}
.social-hero,.topnav,.controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;position:relative;z-index:1}
.btn,button,select{border:none;border-radius:16px;padding:12px 18px;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;color:white;min-width:140px}
.btn.youtube{background:linear-gradient(135deg,#ff3b30,#ff6b57)} .btn.tiktok{background:linear-gradient(135deg,#111827,#1f2937);border:1px solid rgba(255,255,255,.08)}
.btn.blue{background:#3b82f6}.btn.green{background:#22c55e}.btn.white{background:#f8fafc;color:#111827}.btn.orange{background:#f59e0b}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,.08);border-radius:999px;font-weight:700}
.grid-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start;position:relative;z-index:1}
.full-span{grid-column:1/-1}
.game-card,.card{background:linear-gradient(180deg, rgba(10,18,40,.78), rgba(6,10,22,.92));border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.thumb{width:100%;aspect-ratio:16/10;border-radius:18px;overflow:hidden;position:relative;background:linear-gradient(180deg,#93c5fd 0%, #fde68a 100%);margin-bottom:12px;border:1px solid rgba(255,255,255,.08)}
.thumb-label{position:absolute;left:16px;top:16px;font-weight:900;font-size:18px;text-shadow:0 3px 10px rgba(0,0,0,.45)}
.thumb-face{position:absolute;width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 10px 18px rgba(0,0,0,.28);border:3px solid rgba(255,255,255,.35)}
.small{font-size:12px;color:rgba(255,255,255,.82);line-height:1.55}
.comment-list{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow:auto}
.comment{background:rgba(255,255,255,.06);border-radius:14px;padding:10px 12px}
.comment strong{display:block;margin-bottom:4px}
textarea,input{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:white;padding:12px 14px;font-size:15px;outline:none}
textarea{min-height:100px;resize:vertical}
.leader-item{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);font-weight:700}
.roadmap-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
@media (max-width:900px){.roadmap-grid{grid-template-columns:1fr}}
.vote-box{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.vote-row{display:flex;justify-content:space-between;gap:8px;align-items:center;background:rgba(255,255,255,.06);padding:10px 12px;border-radius:14px;font-weight:700}
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar-jump,.bar-quiz,.bar-horror{width:0%;height:100%}.bar-jump{background:#3b82f6}.bar-quiz{background:#22c55e}.bar-horror{background:#f59e0b}
.grid{display:grid;grid-template-columns:minmax(320px,520px) minmax(280px,1fr);gap:18px;position:relative;z-index:1}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:14px}
.canvas-wrap{position:relative;width:min(100%,760px);max-width:100%;margin:0 auto}
canvas{display:block;width:100%;height:auto;border-radius:24px;border:3px solid rgba(255,255,255,.18);box-shadow:0 16px 40px rgba(0,0,0,.28);background:#dbeafe;cursor:pointer}
.hud{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.hud-box{min-width:90px;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:8px 12px;text-align:center}
.hud-label{font-size:12px;color:#cbd5e1;margin-bottom:2px}.hud-value{font-size:22px;font-weight:900;line-height:1.1}
.flash{display:none!important;opacity:0!important;pointer-events:none!important}
.flash.show{display:none!important;opacity:0!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.74);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-card{width:100%;max-width:460px;background:#0f172a;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center}
.hidden{display:none!important}
.row{display:grid;grid-template-columns:100px 1fr 180px 120px;gap:10px;align-items:center;background:rgba(255,255,255,.07);border-radius:16px;padding:12px 14px;font-weight:700}
.row.head{background:rgba(15,23,42,.8)}
@media (max-width:760px){.row{grid-template-columns:80px 1fr 110px 70px;font-size:14px}}
.speech{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:10px 14px;border-radius:18px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.14);font-weight:800;max-width:88%;text-align:center;opacity:0;transition:opacity .2s ease;pointer-events:none}
.speech.show{opacity:1}

.brand-wordmark{display:block;margin:0 auto 6px;max-width:360px;width:min(85%,360px);filter:drop-shadow(0 10px 24px rgba(0,0,0,.38))}
.brand-top{display:flex;justify-content:center;align-items:center;gap:14px;flex-direction:column;margin-bottom:6px}
.hero-logo{width:86px}
.status-hidden{display:none!important}
.modal-card select{width:100%;margin-top:10px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)}
.modal-card label{display:block;text-align:left;margin:10px 0 6px;color:rgba(255,255,255,.86);font-weight:700}
.modal-card option{color:#111}

.brand-wordmark{display:none!important}
.controls.after-game{margin-top:22px}
.game-canvas-card .canvas-wrap{width:min(100%,980px)!important;max-width:100%}
.game-canvas-card canvas{width:100%;height:auto}
.spacer-16{height:16px}

/* layout fix */
.single-column{display:flex;flex-direction:column;gap:18px}
.game-canvas-card .canvas-wrap{width:min(100%,1100px)!important;max-width:100%;margin:0 auto}
.game-canvas-card canvas{width:100%!important;height:auto!important;display:block}
.controls.after-game{margin-top:26px}
.spacer-16{height:16px}

.flappy-wrap{width:min(100%,560px)!important;max-width:100%;margin:0 auto}
.single-column{display:flex;flex-direction:column;gap:18px}
.stack{display:contents}
.controls.after-game{margin-top:26px}

.compact-flappy{width:min(100%,460px)!important;max-width:100%;margin:0 auto}

.compact-dodge{width:min(100%,620px)!important;max-width:100%;margin:0 auto}

.overlay-soft{background:rgba(0,0,0,.22)!important}