/* 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:100vh;height:100dvh;max-width:none;margin:0;justify-content:center;
 background:#120B2E;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.gk-stage:fullscreen{background:#120B2E}
.gk-stage:-webkit-full-screen{background:#120B2E;width:100%;height:100%}
.gk-stage.gk-fs .gk-bar{flex-direction:row}
@media (orientation:landscape){.gk-stage.gk-fs{flex-direction:row;gap:14px}.gk-stage.gk-fs .gk-bar{flex-direction:column}}
.gk-stage.gk-fs .gk-canvas{box-shadow:0 0 0 4px var(--accent,#FFD93D)}
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{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:8px}
.gk-dpad[hidden]{display:none}
.gk-dpad .gk-padbtn{min-width:0;min-height:0;width:58px;height:58px;padding:0;transform:none}
.gk-dpad .gk-padbtn.on{transform:translate(2px,2px)}
.gk-up{grid-column:2;grid-row:1}.gk-left{grid-column:1;grid-row:2}.gk-down{grid-column:2;grid-row:2}.gk-right{grid-column:3;grid-row:2}
@media (prefers-reduced-motion:reduce){.gk-btn{transition:none}}