/* Kolpip — "night" theme. Same layout and same rounded 3D buttons as the lobby model,
   but dark steel colours and a clean font: nothing childish. Loaded last on every page. */
:root{
  --ink:#05070F; --inkDeep:#020308;
  --panel:#121A33; --panel2:#1A2445;
  --muted:#98A3CC;
  --gold:#F5C542; --goldDeep:#B98D17;
  --purple:#7C5CFF; --purpleDeep:#4F37C7;
  --green:#22C55E; --greenDeep:#15803D;
  --blue:#3B82F6; --blueDeep:#1D4FBF;
  --coral:#EF4466; --coralDeep:#A3233F;
  --whiteDeep:#AEB6D3;
  --sky:#0B1124; --sky2:#070A16; --ground:#05070F;
  --display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body{font-weight:600;background:#05070F}
body::before{background:radial-gradient(120% 55% at 50% -5%,#1B2A55 0%,#0B1124 45%,#05070F 100%)}

/* buttons: keep the shape and the press, lose the cartoon outline */
.chunk,.btn{border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 -4px 0 var(--d),inset 0 1px 0 rgba(255,255,255,.28),0 4px 0 rgba(0,0,0,.55),0 10px 18px -8px rgba(0,0,0,.7)}
.chunk:active,.btn:active{box-shadow:inset 0 -2px 0 var(--d),inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 rgba(0,0,0,.55)}
.chunk::after,.btn::after{background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0))}
.white{--c:#E9EEFF;--d:#AEB6D3;color:#0B1124}
.btn.white,.btn.ghost{--c:#1A2445;--d:#0E1530;color:#E9EEFF}
.btn{font:700 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.btn:not(.white):not(.gold){-webkit-text-stroke:0}
.btn svg,.btn:not(.white):not(.gold) svg{filter:none}
.btn.big{font-size:22px;letter-spacing:.14em}
.btn.sm{font-size:13px}

/* secondary pages */
.topbar{background:linear-gradient(180deg,rgba(7,10,22,.96) 60%,rgba(7,10,22,0))}
.topbar .back{--c:#1A2445;--d:#0E1530;color:#E9EEFF}
.topbar h1{font:800 17px/1 var(--display);letter-spacing:.2em;-webkit-text-stroke:0;text-shadow:none;transform:none}
.sheet,.wbox{border:1px solid rgba(150,170,230,.16);box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}
.sheet h2,.wbanner{background:#05070F;border:1px solid rgba(150,170,230,.18);box-shadow:none}
.sheet h2{font:700 12px/1.2 var(--display);letter-spacing:.16em;color:var(--gold)}
.stat{background:rgba(0,0,0,.35);border:1px solid rgba(150,170,230,.12);box-shadow:none}
.stat b{font:800 22px/1 var(--display);color:#fff}
.item{border:1px solid rgba(150,170,230,.14);box-shadow:none;background:rgba(255,255,255,.04)}
.item .nm{font:700 15px/1.2 var(--display);letter-spacing:0}
.item .sc{font:700 14px var(--display)}
.item .pos{font:700 14px var(--display)}
.pos.p1,.pos.p2,.pos.p3{border:0}
.item.me{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.5);color:#fff}
.item.me .sc{color:var(--green)}
label.f{font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase}
input[type=text],input[type=password],input[type=number],textarea,select{
  background:rgba(0,0,0,.35);color:#E9EEFF;border:1px solid rgba(150,170,230,.22);box-shadow:none;font:600 15px var(--body)}
.msg{border:1px solid;box-shadow:none}
.msg.bad{background:rgba(239,68,102,.15);border-color:rgba(239,68,102,.5);color:#FFC9D2}
.msg.good{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.5);color:#C6F6D5}
.prose h3{font:700 13px var(--display);letter-spacing:.14em;text-transform:uppercase}
.big-name{font:800 22px/1.1 var(--display)}

/* stage map */
.tile{font:700 17px var(--display);-webkit-text-stroke:0;border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 -4px 0 var(--d),inset 0 1px 0 rgba(255,255,255,.22),0 3px 0 rgba(0,0,0,.5)}
.tile.done{color:#04140A}
.tile.done .ok{border:2px solid #05070F}
.tile.next{color:#1A1300}
.tile.lock{--c:#141C38;--d:#0C1228;opacity:1}
.tile.lock svg{color:#3B4672}
.wbanner b{font:700 15px var(--display);letter-spacing:.08em}
.wbanner .cnt{font:700 13px var(--display)}
.mapnav .range{font:700 16px var(--display);letter-spacing:.1em;-webkit-text-stroke:0}

/* ---------- menu ---------- */
.player .av{border:0;background:var(--purple)}
.pTxt b{font:700 15px/1.1 var(--display)}
.pTxt small{color:#5D6790;font-weight:600}
.starsChip{border:1px solid rgba(150,170,230,.18)}
.starsChip svg{filter:none}
.starsChip b{font:700 17px var(--display)}
.mascots svg{filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.logo{font:800 clamp(40px,13vw,58px)/1 var(--display);letter-spacing:.08em;transform:none;-webkit-text-stroke:0;text-shadow:none;
  background:linear-gradient(96deg,#ef4444,#f97316 22%,#facc15 40%,#22c55e 60%,#3b82f6 80%,#a855f7);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo span,.logo span:nth-child(odd){color:transparent;animation:none}
.worldBanner{background:#05070F;border:1px solid rgba(150,170,230,.18);box-shadow:none}
.worldBanner b{font:700 15px var(--display);letter-spacing:.08em}
.worldBanner .cnt{font:700 13px var(--display)}
.play .t{font:800 34px/1 var(--display);letter-spacing:.18em;-webkit-text-stroke:0;text-shadow:none;color:#04140A}
.play .s{font:700 12px var(--display);letter-spacing:.2em;color:#04140A;opacity:.7}
.mRow .chunk{font:700 15px var(--display);letter-spacing:.1em;-webkit-text-stroke:0}
.mRow .chunk.white{--c:#1A2445;--d:#0E1530;color:#E9EEFF}
.mRow .chunk:not(.white) svg{filter:none}
.signin{--c:#1A2445;--d:#0E1530;color:#E9EEFF;font:600 13px var(--body)}
.signin svg{color:var(--gold)}
.ico:not(.white) svg{filter:none}
.ico.white{--c:#1A2445;--d:#0E1530}
.ico.white svg{color:#E9EEFF}
.ico i{font:700 10px var(--display);letter-spacing:.1em;-webkit-text-stroke:0;color:var(--muted)}
.badge{border:2px solid #05070F;font:700 12px/1 var(--display)}
.sideBtn{--c:#1A2445;--d:#0E1530;color:#E9EEFF}

/* ---------- play screen ---------- */
.game{background:#05070F}
.hbtn.white{--c:#1A2445;--d:#0E1530;color:#E9EEFF}
.hmid b{background:#05070F;border:1px solid rgba(150,170,230,.18);font:700 15px/1.3 var(--display);letter-spacing:.16em;color:#fff;box-shadow:none}
.hmid span{background:transparent;border:0;color:var(--muted);font:600 12px var(--display)}
.chip.white{--c:#1A2445;--d:#0E1530;color:#E9EEFF;font:700 13px var(--display);letter-spacing:.1em}
.hint{background:#121A33;color:#C6CDE8;border:1px solid rgba(150,170,230,.2);box-shadow:none;font:600 13px var(--body)}
.rival{font:600 12px var(--display);border:1px solid rgba(150,170,230,.18)}
.over{background:rgba(3,5,12,.7)}
.over .card{border:1px solid rgba(150,170,230,.18);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.ovBanner{border:0;box-shadow:none;font:800 14px var(--display);letter-spacing:.18em;color:#1A1300}
.ovBanner.lose{-webkit-text-stroke:0;color:#fff}
.over h2{font:800 30px/1 var(--display);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.04em}
.player{--c:#1A2445;--d:#0E1530;color:#E9EEFF}
.pTxt small{color:var(--muted)}
/* plain, dark background everywhere */
body,.game{background:#070A16}
body::before{background:#070A16}
/* admin shortcut under the player chip (admin only) */
.mLeft{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;max-width:66%}
.mLeft .player{max-width:100%}
.adminChip{display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:12px;
  font:700 11px var(--display);letter-spacing:.14em;color:#fff}
.adminChip svg{width:16px;height:16px;position:relative;z-index:1}
.adminChip span{position:relative;z-index:1}

/* ---------- stars ---------- */
.stars{display:inline-flex;gap:1px;vertical-align:middle}
.stars svg.st{width:11px;height:11px;fill:#2A3560}
.stars svg.st.on{fill:var(--gold);filter:drop-shadow(0 0 3px rgba(245,197,66,.45))}
.tot{display:inline-flex;align-items:center;gap:3px;font:700 13px var(--display);color:var(--gold);white-space:nowrap}
.tot svg.st{width:14px;height:14px;fill:var(--gold)}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tile .stars{margin-top:1px}
.tile.done .stars svg.st{fill:rgba(0,0,0,.25);filter:none}
.tile.done .stars svg.st.on{fill:#FFF3C4}
.stars.big{gap:6px;align-items:flex-end}
.stars.big svg.st{width:46px;height:46px;fill:#26305A;transition:fill .2s,transform .3s}
.stars.big svg.st:nth-child(2){width:54px;height:54px;transform:translateY(-10px)}
.stars.big svg.st.on{fill:var(--gold);filter:drop-shadow(0 0 10px rgba(245,197,66,.55))}
.stars.big svg.st.pop{animation:starpop .45s cubic-bezier(.2,1.6,.5,1) both}
@keyframes starpop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1)}}
.stars.big svg.st:nth-child(2).pop{animation-name:starpop2}
@keyframes starpop2{from{transform:translateY(-10px) scale(0) rotate(-40deg)}to{transform:translateY(-10px) scale(1)}}
.ovTime{font:800 30px/1 var(--display);color:#fff;margin:4px 0 6px;font-variant-numeric:tabular-nums}
.goals{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font:600 11.5px var(--display);color:var(--muted);margin:0 0 14px}
.goals b{color:#fff}
.goals .hit b{color:var(--gold)}
.newbest{display:inline-block;margin:0 0 12px;padding:3px 10px;border-radius:999px;background:rgba(245,197,66,.15);
  color:var(--gold);font:700 11px var(--display);letter-spacing:.14em}
.pTxt small .tot{font-size:12px}
.pTxt small .tot svg.st{width:12px;height:12px}