/* Shared visual language with Android GamePolish/WelcomeScreen.
   Board measurements, viewport sizing and in-game navigation are unchanged. */
.kk-glyph { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
[data-glyph] { display:inline-flex; align-items:center; justify-content:center; }
.tile { box-shadow:inset 0 -3px 0 rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.35); }
.tile.selected { box-shadow:0 0 0 2px rgba(31,122,85,.12),inset 0 -3px 0 rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.35); }
.key { box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.3); }
.key:active:not(:disabled),.lobby .mode-button:active,.home-help:active { transform:translateY(1.5px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.12); }
button:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.unlock-mark { width:68px; height:68px; margin:0 auto 12px; color:var(--green); }
.unlock-mark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.unlock-shackle { transform-origin:20px 29px; transform:translateY(-4px) rotate(-25deg); }
.level-complete:not(.hidden) .unlock-shackle { animation:unlock-shackle 550ms ease both; }
.level-summary { font-weight:700; color:var(--ink); }
.level-complete-card { overflow:auto; }
.kk-overlay .kk-panel { max-height:calc(var(--app-h, 100dvh) - 32px - var(--safe-t) - var(--safe-b)); overscroll-behavior:contain; touch-action:pan-y; }
.kk-overlay .kk-theme { width:100%; text-align:left; background:#fffef9; color:var(--ink); font:inherit; min-height:64px; }
.kk-overlay .kk-theme[aria-expanded="true"] { border-color:var(--green); border-radius:14px 14px 0 0; margin-bottom:0; }
.kk-overlay .kk-theme-name { min-width:0; overflow-wrap:anywhere; }
.kk-overlay .kk-theme-meta { flex-shrink:0; }
.kk-overlay .kk-theme-name .kk-theme-meta { display:block; color:#8c6722; }
.kk-preview { border:1px solid var(--green); border-top:0; border-radius:0 0 14px 14px; padding:12px; background:#fffef9; }
.kk-preview-scene { position:relative; overflow:hidden; border-radius:12px; background:linear-gradient(145deg,#f5f3eb,#fffef9); padding:14px 12px; }
.kk-preview-label { display:block; position:relative; z-index:1; color:var(--muted); font-size:11px; margin-bottom:14px; }
.kk-preview-board { display:flex; justify-content:center; gap:5px; position:relative; z-index:1; margin:0 auto 16px; max-width:260px; }
.kk-preview-board b { display:grid; place-items:center; flex:1; aspect-ratio:1; max-width:42px; border-radius:7px; color:var(--ink); background:#fffef9; border:1px solid var(--line); box-shadow:inset 0 -3px 0 rgba(0,0,0,.1); }
.kk-preview-board b.correct { background:var(--green); color:#fff; }
.kk-preview-board b.present { background:var(--amber); color:#382a09; }
.kk-preview-board b.absent { background:var(--gray); }
.kk-preview-keys { display:grid; gap:4px; position:relative; z-index:1; }
.kk-preview-keys > div { display:flex; gap:3px; justify-content:center; }
.kk-preview-keys .key { display:grid; place-items:center; height:30px; min-width:0; text-align:center; padding:0; border-radius:4px; font-size:10px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); }
.kk-preview-keys .confirm-circle { width:18px; height:18px; font-size:12px; }
.kk-preview-scene > .kk-bg { z-index:0; }
.kk-preview .kk-preview-action { min-height:44px; margin-top:10px; }
.kk-preview .kk-preview-action:disabled { background:#e4ece5; color:#365c42; cursor:default; }
.level-complete .confetti { display:none; }
.coin-flight { position:fixed; z-index:10001; width:20px; height:20px; border-radius:50%; background:var(--amber); border:2px solid #c28622; pointer-events:none; animation:coin-flight 600ms ease-in both; }
@keyframes unlock-shackle { 0%,25%{transform:translateY(0) rotate(0)} 100%{transform:translateY(-4px) rotate(-25deg)} }
@keyframes coin-flight { from{transform:translate(0,0) scale(1);opacity:1} to{transform:translate(var(--fly-x),var(--fly-y)) scale(.4);opacity:0} }
@media(max-width:720px) {
  .lobby { overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain; }
  .level-complete { overflow-y:auto; touch-action:pan-y; }
}
@media(prefers-reduced-motion:reduce) {
  .unlock-shackle,.coin-flight { animation:none!important; }
  .coin-flight { display:none; }
  .key,.mode-button,.tile { transition:none!important; }
}