/* Kolpip — play screen, same chunky lobby style as the menu. */
body.playing{overflow:hidden}
.game{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--sky),var(--sky2) 70%,var(--ground) 70.2%)}
.game[hidden]{display:none!important}
.ghud{position:relative;z-index:3;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 8px}
.hbtn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;padding:0;flex:none}
.hbtn svg{width:22px;height:22px;position:relative;z-index:1}
.hmid{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.hmid b{display:inline-block;padding:3px 16px;background:var(--ink);border-radius:7px;transform:skewX(-10deg);
  font:22px/1.15 var(--display);letter-spacing:.03em;color:var(--gold);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.hmid span{margin-top:7px;font:900 13px var(--body);color:var(--ink);background:rgba(255,255,255,.85);
  border:2px solid var(--ink);border-radius:999px;padding:1px 10px;font-variant-numeric:tabular-nums}
.gboard{position:relative;flex:1;min-height:0}
.gboard canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.chip{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:4;
  height:48px;padding:0 18px;border-radius:16px;font:18px var(--display);letter-spacing:.02em}
.chip > *{position:relative;z-index:1}
.hint{position:absolute;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:330px;z-index:4;
  text-align:center;padding:10px 14px;border-radius:16px;background:#fff;color:var(--ink);border:3px solid var(--ink);
  box-shadow:0 5px 0 var(--ink);font:900 14px var(--body);opacity:0;transform:translateY(8px);transition:.3s;pointer-events:none}
.hint.on{opacity:1;transform:none}
.rival{position:absolute;left:14px;top:8px;z-index:4;padding:4px 12px 4px 8px;border-radius:999px;background:var(--ink);
  color:#fff;font:15px var(--display);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.rival[hidden]{display:none!important}
.sol{position:absolute;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:4;padding:8px 12px;
  border-radius:12px;background:var(--ink);color:var(--gold);font:900 12px var(--body);overflow-x:auto;white-space:nowrap}
.sol[hidden]{display:none!important}

/* end of stage */
.over{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(27,19,64,.55)}
.over[hidden]{display:none!important}
.over .card{position:relative;width:100%;max-width:360px;background:var(--panel);border:3px solid var(--ink);border-radius:26px;
  padding:34px 18px 18px;text-align:center;box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 8px 0 var(--ink);animation:pop .28s cubic-bezier(.2,1.5,.5,1)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.ovBanner{position:absolute;left:50%;top:-22px;transform:translateX(-50%) skewX(-10deg);white-space:nowrap;
  padding:7px 20px;border-radius:9px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);
  font:24px var(--display);letter-spacing:.03em;box-shadow:0 5px 0 var(--ink)}
.ovBanner.lose{background:var(--coral);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.over h2{font:38px/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);margin:4px 0 8px}
.over p{margin:0 0 14px;font-size:15px;color:var(--muted);line-height:1.45}
.over .tag{margin:-4px 0 14px;font-size:12px;padding:4px 12px;color:var(--gold)}