/* ===== YAVOL KOIN RUSH — styles ===== */
:root{
  --bg:#0a0a1a; --bg2:#12122b;
  --panel:rgba(255,255,255,.05); --panel-brd:rgba(255,255,255,.10);
  --ink:#eef0ff; --muted:#9aa0c6;
  --gold:#ffd23f; --gold2:#ff9f1c;
  --purple:#7b5cff; --pink:#ff4fa3; --cyan:#22e0d6;
  --red:#ff5470; --green:#3ddc84;
  --radius:18px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  font-family:'Fredoka',system-ui,Segoe UI,sans-serif;
  color:var(--ink); background:var(--bg);
  overflow-x:hidden; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.brand-name,.hero-title{font-family:'Baloo 2',sans-serif}

.bg-fx{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(60vw 60vw at 15% 0%, rgba(123,92,255,.28), transparent 60%),
    radial-gradient(50vw 50vw at 90% 10%, rgba(255,79,163,.22), transparent 55%),
    radial-gradient(60vw 60vw at 50% 100%, rgba(34,224,214,.16), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

/* ---- topbar ---- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:12px clamp(14px,4vw,34px);
  background:rgba(10,10,26,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-brd);
}
.brand{display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none}
.brand-logo{font-size:26px; filter:drop-shadow(0 0 10px var(--gold))}
.brand-name{font-size:18px; letter-spacing:.5px}
.brand-name b{color:var(--gold)}
.topnav{display:flex; gap:4px; margin-left:8px}
.navlink{
  background:none; border:0; color:var(--muted); font-family:inherit;
  font-size:15px; font-weight:600; padding:8px 12px; border-radius:10px; cursor:pointer; transition:.15s;
}
.navlink:hover{color:var(--ink); background:var(--panel)}
.navlink.active{color:var(--ink); background:linear-gradient(135deg,var(--purple),var(--pink))}
.userbox{margin-left:auto; display:flex; align-items:center; gap:10px}
.user-chip{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--panel-brd); padding:6px 10px 6px 6px; border-radius:999px}
.user-chip .ava{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--pink));font-weight:700;font-size:14px}
.user-chip .uname{font-weight:600;font-size:14px}

/* ---- buttons ---- */
.btn{font-family:inherit; font-weight:700; border:0; border-radius:12px; padding:11px 18px; cursor:pointer; transition:.15s; font-size:15px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#241a00; box-shadow:0 8px 22px rgba(255,159,28,.35)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--panel); color:var(--ink); border:1px solid var(--panel-brd)}
.btn-ghost:hover{background:rgba(255,255,255,.10)}
.btn-lg{padding:14px 26px; font-size:17px}
.btn-block{width:100%}

/* ---- views ---- */
#main{max-width:1080px; margin:0 auto; padding:clamp(16px,4vw,34px)}
.view{display:none; animation:fade .3s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section-title{font-size:clamp(24px,5vw,34px); margin:6px 0 4px; text-align:center}
.section-sub{color:var(--muted); text-align:center; margin:0 0 22px}

/* ---- hero ---- */
.hero{text-align:center; padding:clamp(20px,5vw,44px) 0}
.hero-badge{display:inline-block; background:rgba(255,84,112,.15); color:#ffb3c3; border:1px solid rgba(255,84,112,.4); padding:7px 14px; border-radius:999px; font-weight:600; font-size:14px; margin-bottom:18px}
.hero-title{font-size:clamp(36px,9vw,68px); line-height:1.02; margin:0 0 12px; font-weight:800}
.glow-gold{color:var(--gold); text-shadow:0 0 24px rgba(255,210,63,.6)}
.glow-red{color:var(--red); text-shadow:0 0 24px rgba(255,84,112,.6)}
.hero-sub{color:var(--muted); font-size:clamp(16px,3.5vw,20px); margin:0 auto 26px; max-width:560px}
.prize-ring{display:grid; place-items:center; margin:8px 0 26px}
.prize-total{
  display:grid; place-items:center; gap:4px; padding:26px 46px; border-radius:26px;
  background:radial-gradient(circle at 50% 30%, rgba(255,210,63,.20), rgba(255,159,28,.06));
  border:2px solid rgba(255,210,63,.35); box-shadow:0 0 60px rgba(255,159,28,.25) inset, var(--shadow);
}
.pt-label{font-size:14px; letter-spacing:2px; color:var(--gold); font-weight:600}
.pt-amount{font-family:'Baloo 2'; font-size:clamp(40px,10vw,64px); font-weight:800; color:#fff; text-shadow:0 0 30px rgba(255,210,63,.5)}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:30px}
.hero-stats{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.stat{background:var(--panel); border:1px solid var(--panel-brd); border-radius:14px; padding:12px 22px; min-width:110px}
.stat b{display:block; font-size:26px; font-family:'Baloo 2'; color:var(--gold)}
.stat span{color:var(--muted); font-size:13px}

/* ---- prize cards ---- */
.prize-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:30px 0}
.pcard{background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius); padding:20px; text-align:center; position:relative; overflow:hidden}
.pcard.gold{border-color:rgba(255,210,63,.5); background:linear-gradient(160deg,rgba(255,210,63,.12),var(--panel))}
.pcard.silver{border-color:rgba(200,210,230,.4)}
.pcard.bronze{border-color:rgba(205,127,50,.4)}
.pcard .medal{font-size:40px}
.pcard .prank{font-weight:700; margin:6px 0 2px; font-size:17px}
.pcard .pamount{font-family:'Baloo 2'; font-size:26px; font-weight:800; color:var(--gold)}
.pcard.part .pamount{color:var(--cyan)}
.pcard .pnote{color:var(--muted); font-size:12px; margin-top:4px}

/* ---- how ---- */
.how{margin-top:36px}
.how-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px}
.how-step{background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius); padding:22px; position:relative}
.how-num{position:absolute; top:-12px; left:20px; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--pink)); display:grid; place-items:center; font-weight:800; font-family:'Baloo 2'}
.how-step b{display:block; font-size:18px; margin:8px 0 6px}
.how-step p{color:var(--muted); margin:0; font-size:14px; line-height:1.5}

/* ---- play ---- */
.play-wrap{display:flex; gap:18px; align-items:flex-start}
.game-frame{position:relative; flex:1; aspect-ratio:3/4; max-height:76vh; margin:0 auto;
  border-radius:22px; overflow:hidden; border:1px solid var(--panel-brd);
  background:linear-gradient(180deg,#0e0e28,#161638); box-shadow:var(--shadow)}
#game{display:block; width:100%; height:100%; touch-action:none}
.game-hud{position:absolute; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; gap:8px; padding:12px}
.hud-item{background:rgba(0,0,0,.4); backdrop-filter:blur(6px); border:1px solid var(--panel-brd); border-radius:12px; padding:6px 14px; text-align:center; min-width:70px}
.hud-item span{display:block; font-size:11px; color:var(--muted); letter-spacing:1px}
.hud-item b{font-family:'Baloo 2'; font-size:20px}
#hudCombo{color:var(--pink)}
#hudBest{color:var(--gold)}

.overlay{position:absolute; inset:0; z-index:10; display:grid; place-items:center; padding:20px;
  background:rgba(8,8,22,.78); backdrop-filter:blur(6px)}
.ov-card{text-align:center; max-width:340px; display:flex; flex-direction:column; gap:12px; align-items:center}
.ov-emoji{font-size:64px; filter:drop-shadow(0 6px 20px rgba(255,159,28,.4))}
.ov-card h2{margin:0; font-size:26px}
.ov-card p{color:var(--muted); margin:0; line-height:1.5}
.ov-controls{font-size:15px}
.ov-score{font-size:20px}
.ov-score b{font-family:'Baloo 2'; font-size:40px; color:var(--gold)}
.ov-line{color:var(--muted); min-height:22px}
.ov-line b{color:var(--ink)}
.ov-actions,.ov-card .btn{width:100%}
.ov-actions{display:flex; flex-direction:column; gap:10px; width:100%}

.play-side{width:210px; flex-shrink:0; display:flex; flex-direction:column; gap:12px}
.mini-card{background:var(--panel); border:1px solid var(--panel-brd); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column}
.mini-label{font-size:11px; letter-spacing:1px; color:var(--muted)}
.mini-val{font-family:'Baloo 2'; font-size:30px; color:var(--gold)}
.legend{background:var(--panel); border:1px solid var(--panel-brd); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:9px; font-size:14px}
.legend div{display:flex; align-items:center; gap:8px}
.legend .lg-ico{font-size:18px}
.legend em{margin-left:auto; color:var(--muted); font-style:normal; font-size:13px}

/* ---- leaderboard ---- */
.podium{display:flex; justify-content:center; align-items:flex-end; gap:12px; margin-bottom:24px; flex-wrap:wrap}
.pod{background:var(--panel); border:1px solid var(--panel-brd); border-radius:16px; padding:16px 18px; text-align:center; width:150px}
.pod .pmedal{font-size:38px}
.pod .pname{font-weight:700; margin:6px 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pod .ptg{color:var(--cyan); font-size:13px}
.pod .pscore{font-family:'Baloo 2'; font-size:24px; color:var(--gold); margin-top:6px}
.pod .pprize{color:var(--muted); font-size:13px; margin-top:2px}
.pod.p1{order:2; transform:translateY(-14px); border-color:rgba(255,210,63,.5); background:linear-gradient(160deg,rgba(255,210,63,.14),var(--panel))}
.pod.p2{order:1}
.pod.p3{order:3}

.board{display:flex; flex-direction:column; gap:8px}
.row{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--panel-brd); border-radius:12px; padding:10px 14px}
.row.me{border-color:var(--gold); background:linear-gradient(90deg,rgba(255,210,63,.10),var(--panel))}
.row .rnum{font-family:'Baloo 2'; font-size:18px; width:34px; text-align:center; color:var(--muted)}
.row .rname{font-weight:700}
.row .rtg{color:var(--cyan); font-size:13px}
.row .rmeta{margin-left:auto; text-align:right}
.row .rscore{font-family:'Baloo 2'; font-size:20px; color:var(--gold)}
.row .rprize{color:var(--green); font-size:13px; font-weight:600}
.empty{text-align:center; color:var(--muted); padding:40px}

/* ---- rules ---- */
.rules-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.rule-card{background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius); padding:22px}
.rule-card h3{margin:0 0 12px}
.rule-card ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.rule-card li b{color:var(--ink)}
.rule-card p{color:var(--muted); line-height:1.6; margin:0}
.rule-card b{color:var(--ink)}

/* ---- admin ---- */
.admin-login{display:flex; gap:10px; max-width:400px; margin:0 auto}
.admin-login .input{flex:1}

/* ---- footer ---- */
.footer{max-width:1080px; margin:30px auto 0; padding:20px clamp(14px,4vw,34px); display:flex; justify-content:space-between; align-items:center; color:var(--muted); border-top:1px solid var(--panel-brd); font-size:13px}
.footlink{background:none;border:0;color:var(--muted);cursor:pointer;font-family:inherit;font-size:13px}
.footlink:hover{color:var(--ink)}

/* ---- modal ---- */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,4,14,.7); backdrop-filter:blur(6px)}
.modal-card{position:relative; width:100%; max-width:420px; background:var(--bg2); border:1px solid var(--panel-brd); border-radius:22px; padding:26px; box-shadow:var(--shadow); animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.modal-x{position:absolute; top:14px; right:16px; background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer}
.tabs{display:flex; gap:6px; background:var(--panel); border-radius:12px; padding:5px; margin-bottom:20px}
.tab{flex:1; background:none; border:0; color:var(--muted); font-family:inherit; font-weight:700; padding:10px; border-radius:9px; cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--purple),var(--pink)); color:#fff}
.authform{display:flex; flex-direction:column; gap:6px}
.authform label{font-size:13px; color:var(--muted); margin-top:6px}
.input{width:100%; background:rgba(0,0,0,.25); border:1px solid var(--panel-brd); border-radius:11px; padding:12px 14px; color:var(--ink); font-family:inherit; font-size:15px; outline:none; transition:.15s}
.input:focus{border-color:var(--purple); box-shadow:0 0 0 3px rgba(123,92,255,.2)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.hint{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--panel); font-size:11px; cursor:help}
.form-note{background:rgba(34,224,214,.08); border:1px solid rgba(34,224,214,.25); border-radius:10px; padding:9px 12px; font-size:13px; color:#bff3ef; margin-top:10px}
.form-err{color:var(--red); font-size:14px; min-height:20px; margin:6px 0}
.authform .btn{margin-top:10px}

/* ---- toast ---- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; background:var(--bg2); border:1px solid var(--panel-brd); border-radius:12px; padding:12px 20px; box-shadow:var(--shadow); font-weight:600; animation:pop .2s ease; max-width:90vw}
.toast.err{border-color:var(--red); color:#ffb3c3}
.toast.ok{border-color:var(--green); color:#b6f5d0}

/* ---- team: no-team & lobby ---- */
.ov-wide{max-width:440px; width:100%}
.ptag{font-size:11px; background:var(--panel); border:1px solid var(--panel-brd); border-radius:6px; padding:1px 6px; color:var(--muted); vertical-align:middle}
.pcard .pnote{color:var(--muted); font-size:12px; margin-top:2px}

.team-forms{display:flex; flex-direction:column; gap:12px; width:100%; text-align:left}
.tform{display:flex; flex-direction:column; gap:8px}
.tform label{font-size:13px; color:var(--muted)}
.tform-or{text-align:center; color:var(--muted); font-size:13px; position:relative}
.tform-or::before,.tform-or::after{content:''; position:absolute; top:50%; width:38%; height:1px; background:var(--panel-brd)}
.tform-or::before{left:0} .tform-or::after{right:0}

.lobby-head{display:flex; justify-content:space-between; align-items:flex-start; width:100%; gap:12px}
.lobby-team{font-family:'Baloo 2'; font-size:24px; font-weight:800}
.lobby-code{color:var(--muted); font-size:14px; margin-top:2px}
.lobby-code b{color:var(--cyan); letter-spacing:2px; font-family:'Baloo 2'; font-size:18px}
.mini-btn{background:var(--panel); border:1px solid var(--panel-brd); color:var(--ink); border-radius:7px; padding:2px 8px; font-size:12px; cursor:pointer; font-family:inherit}
.lobby-best{text-align:right} .lobby-best span{display:block; font-size:11px; color:var(--muted)} .lobby-best b{font-family:'Baloo 2'; font-size:24px; color:var(--gold)}

.members{display:flex; flex-direction:column; gap:10px; width:100%; margin:6px 0}
.member{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--panel-brd); border-radius:14px; padding:12px 14px; text-align:left}
.member.rdy{border-color:var(--green); background:linear-gradient(90deg,rgba(61,220,132,.12),var(--panel))}
.member .m-dot{width:12px; height:12px; border-radius:50%; background:#555; flex-shrink:0}
.member.on .m-dot{background:var(--green); box-shadow:0 0 10px var(--green)}
.member.off .m-dot{background:#777}
.member .m-info{flex:1; min-width:0}
.member .m-info b{display:block; font-size:15px}
.member .m-info span{color:var(--muted); font-size:12px}
.member .m-status{font-size:13px; font-weight:600; white-space:nowrap}
.member.empty{opacity:.6; border-style:dashed}
.lobby-hint{color:var(--muted); font-size:14px; margin:4px 0; min-height:20px; text-align:center}
.lobby-actions{display:flex; gap:10px; width:100%; margin-top:4px}
.lobby-actions .btn{flex:1}

/* ---- countdown ---- */
.ov-count{flex-direction:column; gap:10px; background:rgba(8,8,22,.9)!important}
.count-num{font-family:'Baloo 2'; font-size:120px; font-weight:800; color:var(--gold); text-shadow:0 0 50px rgba(255,210,63,.6)}
.count-num.pulse{animation:countpulse .9s ease}
@keyframes countpulse{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.count-sub{color:var(--muted); font-size:16px}

/* ---- round end split ---- */
.score-split{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:6px 0}
.ss-col{display:flex; flex-direction:column; align-items:center; min-width:70px}
.ss-col span{font-size:12px; color:var(--muted)}
.ss-col b{font-family:'Baloo 2'; font-size:28px}
.ss-col.ss-team b{color:var(--gold); font-size:38px}
.ss-plus,.ss-eq{font-family:'Baloo 2'; font-size:24px; color:var(--muted)}

/* ---- admin teams ---- */
.admin-team{background:var(--panel); border:1px solid var(--panel-brd); border-radius:14px; padding:14px 16px; margin-bottom:10px}
.at-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.at-rank{font-family:'Baloo 2'; color:var(--gold); font-size:18px}
.at-code{color:var(--cyan); letter-spacing:1px; font-size:13px; background:rgba(0,0,0,.25); padding:1px 7px; border-radius:6px}
.at-warn{color:var(--red); font-size:12px; margin-left:6px}
.at-score{font-family:'Baloo 2'; font-size:20px; color:var(--gold)}
.at-member{color:var(--muted); font-size:13px; padding:4px 0; border-top:1px solid var(--panel-brd)}
.at-member b{color:var(--ink)}
.rule-note{color:var(--muted); font-size:13px; margin-top:10px; font-style:italic}

/* ---- responsive ---- */
@media (max-width:820px){
  .topnav{display:none}
  .play-side{display:none}
  .game-frame{max-height:none; width:100%}
}
@media (max-width:520px){
  .brand-name{font-size:15px}
  .hero-stats{gap:8px}
  .stat{padding:10px 14px; min-width:90px}
  .footer{flex-direction:column; gap:8px}
}