/* Goanga Games kit: stage, sticker buttons, fullscreen (native + iOS pseudo), touch pads. */
.gk-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;box-sizing:border-box}
.gk-lock{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
.gk-canvas{box-sizing:border-box;display:block;max-width:none;touch-action:none}
.gk-bar{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.gk-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
 font:700 15px/1 Fredoka,"Baloo 2",ui-rounded,system-ui,sans-serif;color:#120B2E;background:var(--accent,#FFD93D);
 border:3px solid #120B2E;border-radius:12px;padding:8px 13px;box-shadow:3px 3px 0 #120B2E;transform:rotate(-1.5deg);cursor:pointer;
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.gk-btn:nth-child(even){transform:rotate(1.5deg)}
@media (hover:hover){.gk-btn:hover{transform:rotate(0) scale(1.06)}}
.gk-btn:active,.gk-btn.on{transform:translate(2px,2px);box-shadow:1px 1px 0 #120B2E}
.gk-btn:focus-visible{outline:3px solid #FFF8E7;outline-offset:3px}
.gk-btn:hover,.gk-btn:focus,.gk-btn:active{border-color:#120B2E;color:#120B2E;background:var(--accent,#FFD93D)}
.gk-btn[hidden],.gk-pad[hidden]{display:none}
.gk-fs-only{display:none}
.gk-fs .gk-fs-only{display:inline-flex}
/* fullscreen: native (:fullscreen) and CSS pseudo-fullscreen (iPhone Safari) share .gk-fs */
.gk-stage.gk-fs{position:fixed;inset:0;z-index:10000;width:100%;height:100%;height:100vh;height:100dvh;max-width:none!important;max-height:none!important;margin:0;justify-content:center;box-sizing:border-box;
 background:#120B2E;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* Android Chrome sizes the :fullscreen element to content unless width/height are explicit */
.gk-stage:fullscreen,.gk-stage:-webkit-full-screen{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;box-sizing:border-box;background:#120B2E;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.gk-stage.gk-fs .gk-bar{flex-direction:row}
/* Keep column layout in FS so the canvas can letterbox to the full viewport; overlay chrome */
.gk-stage.gk-fs,.gk-stage:fullscreen,.gk-stage:-webkit-full-screen{flex-direction:column!important}
.gk-stage.gk-fs .gk-canvas{box-shadow:0 0 0 4px var(--accent,#FFD93D);max-width:none!important;height:auto;position:relative;z-index:1}
/* Overlay bar (top) + touch pads / answer row (bottom) — do not consume flex space */
.gk-stage.gk-fs .gk-bar{
  position:absolute;top:max(8px,env(safe-area-inset-top));left:0;right:0;z-index:3;
  flex-direction:row;justify-content:center;pointer-events:none;padding:0 8px;box-sizing:border-box}
.gk-stage.gk-fs .gk-bar > *{pointer-events:auto}
.gk-stage.gk-fs .gk-pad,#btns.gk-fs-btns{
  position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:0;right:0;z-index:3;
  padding:0 8px;box-sizing:border-box}
.gk-stage.gk-fs .gk-pad:not(.bk-pad){justify-content:center}
.gk-stage.gk-fs #btns{position:absolute;bottom:max(64px,env(safe-area-inset-bottom));left:0;right:0;z-index:3;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 8px;box-sizing:border-box;max-width:100%}
/* Hiscore teaser must not steal FS space */
.gk-stage.gk-fs .gk-hs-teaser,.gk-stage:fullscreen .gk-hs-teaser,.gk-stage:-webkit-full-screen .gk-hs-teaser{display:none!important}
html.gk-noscroll,html.gk-noscroll body{overflow:hidden!important;overscroll-behavior:none}
/* phones in landscape: put the bar beside the canvas so the canvas gets the height */
@media (orientation:landscape) and (max-height:520px){.gk-stage:not(.gk-fs){flex-direction:row}.gk-stage:not(.gk-fs) .gk-bar{flex-direction:column}}
/* touch pads (d-pad / action buttons) */
.gk-pad{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gk-padbtn{min-width:60px;min-height:60px;font-size:22px;border-radius:16px}
.gk-dpad{--gk-dpad-cell:58px;display:grid;grid-template-columns:repeat(3,var(--gk-dpad-cell));grid-template-rows:repeat(3,var(--gk-dpad-cell));gap:6px;justify-content:center;align-content:center}
.gk-dpad[hidden]{display:none}
.gk-dpad .gk-padbtn{min-width:0;min-height:0;width:var(--gk-dpad-cell);height:var(--gk-dpad-cell);padding:0;transform:none;font-size:calc(var(--gk-dpad-cell)*.42)}
.gk-dpad .gk-padbtn.on{transform:translate(2px,2px)}
/* Cross / plus layout: empty center */
.gk-up{grid-column:2;grid-row:1}.gk-left{grid-column:1;grid-row:2}.gk-down{grid-column:2;grid-row:3}.gk-right{grid-column:3;grid-row:2}
@media (prefers-reduced-motion:reduce){.gk-btn{transition:none}}

/* High-score overlay (retro card, works in fullscreen) */
html.gk-hs-open{overflow:hidden}
.gk-hs{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));box-sizing:border-box;background:rgba(18,11,46,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.gk-hs[hidden]{display:none!important}
.gk-hs-card{width:min(360px,100%);max-height:min(92dvh,640px);overflow:auto;background:#1C1A16;color:#F3EFE6;border:3px solid #120B2E;border-radius:16px;box-shadow:6px 6px 0 #120B2E,0 0 0 4px #FFD93D;padding:18px 16px 14px;box-sizing:border-box;font-family:Fredoka,"Baloo 2",ui-rounded,system-ui,sans-serif}
.gk-hs-card h2{margin:0 0 10px;font:700 18px/1.2 "Press Start 2P",Fredoka,monospace;color:#FFD93D;text-align:center;letter-spacing:1px}
.gk-hs-score{margin:0 0 12px;text-align:center;font:700 28px/1 "Press Start 2P",monospace;color:#7CF5C8}
.gk-hs-label{display:block;font-size:13px;color:#A8A196;margin:0 0 6px;text-align:center}
.gk-hs-input{display:block;width:100%;box-sizing:border-box;font:700 22px/1.2 "Press Start 2P",monospace;letter-spacing:.12em;text-align:center;text-transform:uppercase;padding:12px 10px;border:3px solid #120B2E;border-radius:12px;background:#120B2E;color:#FFD93D;outline:none;caret-color:#FFD93D}
.gk-hs-input:focus{box-shadow:0 0 0 3px #FFD93D}
.gk-hs-err{margin:8px 0 0;color:#FF6B6B;font-size:13px;text-align:center;font-weight:700}
.gk-hs-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.gk-hs-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.gk-hs-table th,.gk-hs-table td{padding:6px 8px;border-bottom:1px solid #2E2A24;text-align:left}
.gk-hs-table th{color:#FFD93D;font-size:11px;letter-spacing:1px}
.gk-hs-table td:first-child,.gk-hs-table th:first-child{width:2.2em;color:#A8A196}
.gk-hs-table td:last-child,.gk-hs-table th:last-child{text-align:right}
.gk-hs-table tr.gk-hs-hi td{background:#24402a;color:#7CF5C8;font-weight:700}
.gk-hs-empty{text-align:center!important;color:#A8A196;font-style:italic}
.gk-hsbtn{--accent:#7CF5C8;font-size:15px;gap:5px;letter-spacing:.3px;font-weight:700;color:#120B2E}
.gk-hsbtn span{font-size:1.05em;line-height:1}
@media (max-width:420px){.gk-hs-card h2{font-size:14px}.gk-hs-input{font-size:18px}.gk-hs-score{font-size:22px}}

/* Per-game top-15 teaser under the control bar */
.gk-hs-teaser{width:min(420px,96vw);margin:8px auto 0;padding:10px 12px;box-sizing:border-box;background:#1C1A16;border:3px solid #120B2E;border-radius:14px;box-shadow:4px 4px 0 #120B2E;cursor:pointer;color:#F3EFE6;font-family:Fredoka,"Baloo 2",ui-rounded,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.gk-hs-teaser-hd{font:700 10px/1.3 "Press Start 2P",monospace;color:#FFD93D;letter-spacing:1px;text-align:center;margin:0 0 8px}
.gk-hs-teaser-body{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto}
.gk-hs-teaser-row{display:grid;grid-template-columns:2em 1fr auto;gap:8px;align-items:center;font-size:13px;padding:2px 0;border-bottom:1px solid #2E2A24}
.gk-hs-teaser-row .n{color:#A8A196;font-variant-numeric:tabular-nums}
.gk-hs-teaser-row .nm{font-weight:700;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gk-hs-teaser-row .sc{font-weight:700;color:#7CF5C8;font-variant-numeric:tabular-nums}
.gk-hs-teaser-empty{display:block;text-align:center;color:#A8A196;font-size:13px;font-style:italic;padding:6px 0}
.gk-hs-game{margin:0 0 8px;text-align:center;font:700 11px/1.2 "Press Start 2P",monospace;color:#7CF5C8;letter-spacing:1px}
/* Keep TOP / kit bar above the cookie banner so it stays tappable */
.gk-bar{position:relative;z-index:10050}
.gk-hsbtn{position:relative;z-index:10051}
@media (max-width:420px){.gk-hs-teaser-hd{font-size:8px}.gk-hs-teaser{padding:8px 10px}}