*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at top,#2a1650,#0b0716 70%);color:#eee;font:16px/1.4 system-ui,Segoe UI,Roboto,sans-serif}
header{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 14px;background:#0008;border-bottom:1px solid #fff2}
header .logo{font-weight:800;font-size:20px;color:#ffd23f;cursor:pointer;margin-right:auto}header .bal{font-weight:700;color:#7dffb0;font-size:18px}
main{flex:1;padding:14px;width:100%;max-width:1100px;margin:0 auto}
.note{text-align:center;padding:8px;font-size:13px;color:#ffd9a0;background:#0006;border-top:1px solid #fff2}
button,.btn{background:linear-gradient(180deg,#7b4dff,#4b23c8);color:#fff;border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}
button.alt{background:#ffffff1f}button.warn{background:#a8323a}button:disabled{opacity:.5;cursor:default}
input{background:#0007;border:1px solid #fff3;color:#fff;border-radius:8px;padding:9px 11px;font:inherit;width:100%}
.card{max-width:420px;margin:24px auto;background:#120a26cc;border:1px solid #fff2;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.card h2{margin:0 0 4px}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs button{flex:1}.tabs button.on{outline:2px solid #ffd23f}
.err{color:#ff8a8a;min-height:1.2em}.ok{color:#7dffb0}a{color:#9cc8ff;cursor:pointer}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tile{aspect-ratio:1/1;border-radius:18px;overflow:hidden;position:relative;cursor:pointer;background-size:cover;background-position:center;border:2px solid #fff3;box-shadow:0 6px 24px #0008;transition:transform .15s}
.tile:hover{transform:scale(1.03)}.tile span{position:absolute;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(transparent,#000c);font-weight:800;font-size:19px;text-shadow:0 2px 4px #000}
.stage{width:min(100%,calc(100vh - 150px));aspect-ratio:1/1;margin:0 auto;border-radius:14px;overflow:hidden;border:2px solid #fff3;background:#000}
.stage iframe{width:100%;height:100%;border:0;display:block}
table{border-collapse:collapse;width:100%;font-size:14px}td,th{border-bottom:1px solid #fff2;padding:6px;text-align:left}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row input{width:auto;flex:1;min-width:80px}
.qr{background:#fff;padding:8px;border-radius:10px;align-self:center}video{width:100%;border-radius:10px;background:#000}
.pin{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pin button{font-size:22px;padding:14px}
.box{background:#0005;border:1px solid #fff2;border-radius:12px;padding:12px;margin:10px 0}
header .bal.demo{color:#ffd23f}
.demo-box{background:linear-gradient(135deg,#3a1d6e,#1a0d36);border-color:#ffd23f66}
#cta-register,#cta-register2{background:linear-gradient(180deg,#ffb52b,#e0701a);color:#1a0d00}
body.playing header,body.playing footer{display:none}body.playing main{padding:0;max-width:none}
.playfs{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;background:#000;z-index:50;display:flex;flex-direction:column}
.playbar{flex:0 0 auto;display:flex;gap:6px;align-items:center;height:calc(36px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left));background:#0b0716;border-bottom:1px solid #ffd23f33;overflow:hidden;white-space:nowrap}
.playbar .ib{width:30px;height:28px;padding:0;font-size:16px;line-height:28px;background:#ffffff1a;border:1px solid #fff3;border-radius:7px;flex:0 0 auto}
.playbar .pbal,.playbar .pbadge{font-size:13px;font-weight:700;color:#7dffb0;overflow:hidden;text-overflow:ellipsis}.playbar .pbadge{color:#ffd23f}
.playbar .sp{flex:1}.playbar .cta-mini{flex:0 0 auto;padding:4px 10px;font-size:12px;border-radius:999px;background:linear-gradient(180deg,#ffb52b,#e0701a);color:#1a0d00}
.gamewrap{flex:1 1 auto;position:relative;overflow:hidden;min-height:0}.gamewrap iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}.grid2 label{display:flex;flex-direction:column;font-size:13px;gap:3px}
label.chk{display:inline-flex;gap:4px;align-items:center;font-size:14px}label.chk input{width:auto}
.codes{background:#0007;padding:8px;border-radius:8px;white-space:pre-wrap;max-height:200px;overflow:auto}.codes:empty{display:none}
.note2{font-size:13px;color:#ffd9a0}.col{display:flex;flex-direction:column;gap:8px}
@media (max-width:600px){header{gap:6px;padding:6px 8px}#cta-register{font-size:13px;padding:7px 9px}table{font-size:12px}#promo-table,#mypromo{display:block;overflow-x:auto}}
/* ---- animated lobby background (CSS only) ---- */
body.lobby{isolation:isolate;background:#0b0716}
body.lobby::before,body.lobby::after{content:"";position:fixed;inset:0;pointer-events:none}
body.lobby::before{z-index:-2;inset:-4%;background:url(/img/lobby-land.webp) center/cover no-repeat;animation:lbZoom 38s ease-in-out infinite alternate,lbPulse 7s ease-in-out infinite;will-change:transform}
body.lobby::after{z-index:-1;
 background:
  radial-gradient(2px 2px at 12% 18%,#ffe08acc 50%,transparent 51%),radial-gradient(3px 3px at 72% 32%,#ffd23fb0 50%,transparent 51%),
  radial-gradient(2px 2px at 38% 78%,#fff2c0c0 50%,transparent 51%),radial-gradient(2.5px 2.5px at 88% 66%,#ffcf5ab0 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 55% 12%,#fff6d8d0 50%,transparent 51%),radial-gradient(2px 2px at 24% 52%,#ffd77ab0 50%,transparent 51%),
  linear-gradient(180deg,#0b071690 0%,#0b071640 30%,#0b071670 65%,#0b0716d0 100%),
  radial-gradient(ellipse at 50% 40%,transparent 40%,#05030caa 100%);
 background-size:420px 420px,520px 520px,380px 380px,600px 600px,460px 460px,540px 540px,100% 100%,100% 100%;
 animation:lbSpark 60s linear infinite}
@keyframes lbZoom{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.08) translate3d(-1.5%,-1%,0)}}
@keyframes lbPulse{0%,100%{filter:brightness(.92) saturate(1.05)}50%{filter:brightness(1.06) saturate(1.15)}}
@keyframes lbSpark{0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}100%{background-position:60px -420px,-80px -520px,40px -380px,-60px -600px,30px -460px,-40px -540px,0 0,0 0}}
@media (orientation:portrait){body.lobby::before{background-image:url(/img/lobby-port.webp)}}
body.lobby header{background:#0b0716a0;backdrop-filter:blur(6px)}body.lobby .note{background:#0b0716b0}
body.lobby main h2{text-shadow:0 2px 8px #000}
body.lobby .tile{box-shadow:0 8px 28px #000c,0 0 0 1px #ffd23f40}
@media (prefers-reduced-motion:reduce){body.lobby::before,body.lobby::after{animation:none}}
@media (max-width:600px){.tiles{grid-template-columns:repeat(2,1fr);gap:10px}.tile span{font-size:15px;padding:8px}}