/* Kolpip — "lobby" cartoon style, taken from the Shapile home-menu model.
   Every action is a chunky button (thick ink border, hard shadow, gloss, squashes on press). No bare text links. */
:root{
  --ink:#1B1340; --inkDeep:#0F0A26;
  --panel:#2D2370; --panel2:#3B2F8F;
  --muted:#C9C3F2;
  --gold:#FFD23F; --goldDeep:#E0A200;
  --purple:#9B5DFF; --purpleDeep:#6A32D1;
  --green:#3DDC84; --greenDeep:#1E9E57;
  --blue:#3DA9FC; --blueDeep:#1C74C2;
  --coral:#FF5E7E; --coralDeep:#C92F55;
  --whiteDeep:#C9CCE6;
  --sky:#5E8FA8; --sky2:#E9D3BE; --ground:#3E5866;
  --display:'Lilita One',Impact,'Arial Black',sans-serif;
  --body:'Nunito',system-ui,-apple-system,sans-serif;
  --accent:var(--gold);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:var(--body);font-weight:800;color:#fff;
  background:#2F4652;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;
}
input,textarea,select{-webkit-user-select:text;user-select:text}
/* the sky lives on a fixed layer: background-attachment:fixed is unreliable on iOS */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 70%,var(--ground) 70.2%,#2F4652 100%)}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* ---------- the chunky look shared by every button ---------- */
.chunk,.btn{--c:var(--gold);--d:var(--goldDeep);position:relative;border:3px solid var(--ink);border-radius:18px;
  background:var(--c);color:#fff;cursor:pointer;font:inherit;text-decoration:none;
  box-shadow:inset 0 -6px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.5),0 5px 0 var(--ink);
  transition:transform .08s,box-shadow .08s}
.chunk:active,.btn:active{transform:translateY(4px);box-shadow:inset 0 -3px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.5),0 1px 0 var(--ink)}
.chunk::after,.btn::after{content:"";position:absolute;left:10px;right:10px;top:4px;height:32%;border-radius:12px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,0))}
.purple{--c:var(--purple);--d:var(--purpleDeep)} .green{--c:var(--green);--d:var(--greenDeep)}
.blue{--c:var(--blue);--d:var(--blueDeep)} .coral{--c:var(--coral);--d:var(--coralDeep)}
.white{--c:#fff;--d:var(--whiteDeep);color:var(--ink)} .gold{--c:var(--gold);--d:var(--goldDeep);color:var(--ink)}
.inkb{--c:var(--panel2);--d:var(--panel)}

/* text buttons: display font with an ink outline, like the model's PLAY */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:56px;padding:10px 18px;
  font:22px/1 var(--display);letter-spacing:.02em;--c:var(--purple);--d:var(--purpleDeep)}
.btn:not(.white):not(.gold){-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.btn svg{width:24px;height:24px;flex:none;position:relative;z-index:1}
.btn:not(.white):not(.gold) svg{filter:drop-shadow(0 2px 0 var(--ink))}
.btn > *{position:relative;z-index:1}
.btn.primary{--c:var(--green);--d:var(--greenDeep)}
.btn.big{min-height:76px;font-size:34px;border-radius:22px}
.btn.sm{min-height:44px;font-size:17px;border-radius:14px;padding:6px 14px}
.btn.ghost{--c:#fff;--d:var(--whiteDeep);color:var(--ink)}
.btn.danger{--c:var(--coral);--d:var(--coralDeep)}
.btn[disabled]{filter:grayscale(.7) brightness(.85);pointer-events:none}
.btn+.btn{margin-top:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two .btn+.btn{margin-top:0}

/* ---------- secondary page frame ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
  background:linear-gradient(180deg,var(--sky) 55%,rgba(94,143,168,0))}
.topbar .back{--c:#fff;--d:var(--whiteDeep);width:46px;height:46px;flex:none;border-radius:14px;color:var(--ink);
  display:grid;place-items:center;padding:0}
.topbar .back svg{width:22px;height:22px;position:relative;z-index:1}
.topbar h1{flex:1;text-align:center;font:30px/1 var(--display);letter-spacing:.02em;color:#fff;
  -webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);transform:rotate(-2deg)}
.topbar .spacer{width:46px;flex:none}
main.page{max-width:460px;margin:0 auto;padding:6px 16px calc(env(safe-area-inset-bottom,0px) + 34px)}

/* panels */
.sheet{position:relative;background:var(--panel);border:3px solid var(--ink);border-radius:22px;padding:16px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 6px 0 var(--ink)}
.sheet{margin-top:34px}
.sheet:not(:has(> h2)){margin-top:18px}
main.page > .sheet:first-child,main.page > .msg + .sheet{margin-top:30px}
.sheet+.btn,.list+.btn,.sheet+.two,.list+.two{margin-top:20px}
.sheet h2{display:inline-block;margin:-30px 0 12px -4px;padding:5px 14px;background:var(--ink);border-radius:8px;
  transform:skewX(-10deg);font:17px/1.1 var(--display);letter-spacing:.03em;color:var(--gold);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.sheet h2 > span{display:inline-block;transform:skewX(10deg)}
.row{display:flex;align-items:center;gap:12px}
.row+.row{margin-top:10px}
.spacer{flex:1}
.mute{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.lead{color:var(--muted);font-size:14.5px;line-height:1.5;font-weight:800}
.big-name{font:26px/1.05 var(--display);letter-spacing:.02em}

/* stats chips */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--ink);border-radius:16px;padding:10px 4px 9px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.stat b{display:block;font:28px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.06em;color:var(--muted);font-weight:900;text-transform:uppercase}

/* lists (ranking, games, players) */
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;align-items:center;gap:12px;background:var(--panel2);border:3px solid var(--ink);border-radius:16px;
  padding:9px 12px;box-shadow:0 4px 0 var(--ink)}
a.item:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.item .pos{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--ink);
  font:17px var(--display);color:#fff}
.pos.p1{background:var(--gold);color:var(--ink);border:3px solid var(--ink)}
.pos.p2{background:#E3E6F5;color:var(--ink);border:3px solid var(--ink)}
.pos.p3{background:#F0A35E;color:var(--ink);border:3px solid var(--ink)}
.item .nm{font:19px/1.1 var(--display);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.item .sc{font:18px var(--display);color:var(--gold);white-space:nowrap}
.item.me{background:var(--green);color:var(--ink)}
.item.me .sc{color:var(--ink)}
.item .sub{font-size:12.5px;color:var(--muted);font-weight:800}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--muted);
  font:900 10px var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}

/* forms */
label.f{display:block;margin-bottom:6px;font:15px var(--display);letter-spacing:.03em;color:var(--muted)}
input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%;padding:12px 14px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);
  font:900 16px var(--body);outline:none;box-shadow:inset 0 3px 0 rgba(27,19,64,.12)}
input:focus,textarea:focus,select:focus{box-shadow:inset 0 3px 0 rgba(27,19,64,.12),0 0 0 3px var(--gold)}
.field{margin-bottom:14px}
.cap{display:flex;align-items:center;gap:10px}
.cap img{height:46px;border-radius:12px;border:3px solid var(--ink);background:#fff}
.cap .chunk{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;padding:0;flex:none}
.cap .chunk svg{width:22px;height:22px;position:relative;z-index:1}
.check{display:flex;align-items:center;gap:10px;font-weight:900;margin-bottom:14px}
.check input{width:24px;height:24px;accent-color:var(--green)}

/* messages */
.msg{margin-bottom:16px;padding:11px 14px;border:3px solid var(--ink);border-radius:16px;font-weight:900;font-size:14.5px;
  box-shadow:0 4px 0 var(--ink)}
.msg.bad{background:var(--coral)}
.msg.good{background:var(--green);color:var(--ink)}

/* prose (how to play, privacy) */
.prose{font-size:15px;line-height:1.55;font-weight:800;color:#EDEAFF}
.prose h3{margin:18px 0 6px;font:19px var(--display);letter-spacing:.02em;color:var(--gold)}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 10px}
.prose ul{margin:0 0 10px;padding-left:20px}
.prose b{color:#fff}
code{font:900 14px ui-monospace,Menlo,monospace;background:var(--ink);color:var(--gold);padding:3px 8px;border-radius:8px}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th,table.t td{padding:8px 5px;border-bottom:2px solid var(--ink);text-align:left}
table.t th{font:13px var(--display);letter-spacing:.04em;color:var(--gold)}

/* small round icon buttons used inside panels */
.ibtn{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;padding:0;flex:none}
.ibtn svg{width:20px;height:20px;position:relative;z-index:1}

/* ---------- stage map ---------- */
.world{margin-top:30px}
.world:first-of-type{margin-top:18px}
.wbanner{display:flex;align-items:center;gap:10px;margin:0 auto -14px;width:max-content;max-width:100%;position:relative;z-index:2;
  padding:7px 18px;background:var(--ink);border-radius:8px;transform:skewX(-10deg);box-shadow:0 5px 0 rgba(0,0,0,.25)}
.wbanner > *{transform:skewX(10deg);white-space:nowrap}
.wbanner small{font-weight:900;font-size:11px;letter-spacing:1px;color:#A9ADDA}
.wbanner b{font:19px var(--display);letter-spacing:.02em;color:var(--w,var(--gold))}
.wbanner .cnt{font:16px var(--display);color:#fff;background:var(--panel2);border-radius:6px;padding:1px 8px}
.wbox{background:var(--panel);border:3px solid var(--ink);border-radius:22px;padding:26px 12px 14px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 6px 0 var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tile{position:relative;aspect-ratio:1;border:3px solid var(--ink);border-radius:16px;display:grid;place-items:center;
  font:22px var(--display);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  --c:var(--panel2);--d:var(--panel);background:var(--c);
  box-shadow:inset 0 -5px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.35),0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
a.tile:active{transform:translateY(3px);box-shadow:inset 0 -3px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.35),0 1px 0 var(--ink)}
.tile.done{--c:var(--green);--d:var(--greenDeep)}
.tile.done .ok{position:absolute;right:-7px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--gold);
  border:3px solid var(--ink);display:grid;place-items:center;-webkit-text-stroke:0}
.tile.done .ok svg{width:11px;height:11px;color:var(--ink)}
.tile.next{--c:var(--gold);--d:var(--goldDeep);animation:breathe 1.6s ease-in-out infinite;z-index:1}
.tile.next .ring{position:absolute;inset:-6px;border-radius:20px;border:3px solid var(--gold);opacity:0;animation:ring 2s ease-out infinite}
.tile.lock{--c:var(--panel2);--d:var(--panel);opacity:.75;color:var(--muted)}
.tile.lock svg{width:20px;height:20px;color:#8F86C9}
.mapnav{display:flex;align-items:center;gap:12px;margin:2px 0 4px}
.mapnav .chunk{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;padding:0;flex:none}
.mapnav .chunk svg{width:26px;height:26px;position:relative;z-index:1}
.mapnav .chunk.off{opacity:.35;pointer-events:none}
.mapnav .range{flex:1;text-align:center;font:22px var(--display);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}

@keyframes breathe{50%{transform:scale(1.04)}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes bob{50%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes hop{0%,70%,100%{transform:none}78%{transform:translateY(-8px)}86%{transform:translateY(1px)}}
@keyframes shine{0%,55%{left:-50%}100%{left:130%}}
@keyframes wiggle{0%,82%,100%{transform:none}85%{transform:rotate(-9deg) scale(1.06)}88%{transform:rotate(8deg) scale(1.06)}91%{transform:rotate(-6deg)}94%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* colour variants must win over the .btn default */
.btn.purple{--c:var(--purple);--d:var(--purpleDeep)} .btn.green,.btn.primary{--c:var(--green);--d:var(--greenDeep)}
.btn.blue{--c:var(--blue);--d:var(--blueDeep)} .btn.coral,.btn.danger{--c:var(--coral);--d:var(--coralDeep)}
.btn.white,.btn.ghost{--c:#fff;--d:var(--whiteDeep);color:var(--ink)} .btn.gold{--c:var(--gold);--d:var(--goldDeep);color:var(--ink)}