/* /play — white, black, nothing else */
.player [hidden],.bar[hidden],.pad[hidden]{display:none!important}
html,body{touch-action:manipulation}
.player{position:relative;background:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.bar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.slot{display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:3/2;width:100%;border:1px solid #000;cursor:pointer;text-align:center;
  user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.slot .slit{display:block;width:9rem;height:.6rem;border:1px solid #000;margin-bottom:1.75rem}
.slot-t{font-size:1rem}
.slot-d{font-size:.75rem;margin-top:.25rem}
.slot-d u{text-underline-offset:.2em}
.slot:focus-visible,.slot:hover .slit{outline:0}
.slot:hover .slit,.slot:focus-visible .slit{background:#000}
.slot.over{background:#000;color:#fff}
.slot.over .slit{border-color:#fff;background:#fff}
.slot.busy{cursor:progress}

.screen{display:flex;justify-content:center;align-items:center;line-height:0}
.screen canvas{display:block;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}

.bar{margin-top:1rem;font-size:.8rem}
.bar p{margin:0}
.now{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.35rem!important}
#title{letter-spacing:.08em}
.acts button{font:inherit;color:#000;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
.acts button+button::before{content:"·";display:inline-block;margin:0 .55rem;cursor:default}
.acts button:hover{text-decoration:underline;text-underline-offset:.2em}
.acts button+button:hover::before{text-decoration:none}
.keys{margin-top:1.5rem!important;font-size:.7rem}
.msg{font-size:.8rem;min-height:1.3em;margin:1rem 0 0}
.fine{font-size:.7rem;margin:0;padding-top:1.25rem}
.fine a{border-bottom-width:1px}

/* touch pad: outlines only, sized to the phone */
.pad{max-width:26rem;margin:1rem auto 0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.pad *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pad b{display:flex;align-items:center;justify-content:center;font-weight:normal;font-size:.75rem;
  border:1px solid #000;background:#fff;color:#000}
.pad b{transition:background-color .08s ease-out}
.pad b.on{background:#ececec;color:#000}
.shoulders{display:flex;justify-content:space-between}
.shoulders b{width:min(22vw,5.5rem);height:2.25rem}
.pad-mid{display:flex;justify-content:space-between;align-items:center;margin:.6rem 0}
.dpad{width:min(38vw,9rem);height:min(38vw,9rem)}
.dpad svg{display:block;width:100%;height:100%}
.dpad .arm{fill:#fff;transition:fill .08s ease-out}
.dpad .arm.on{fill:#ececec}
/* A/B: A only slightly higher than B (~17°), like a real GBA */
.ab{--r:min(17vw,4rem);--g:.9rem;display:flex;gap:var(--g);align-items:flex-start;padding-bottom:calc((var(--r) + var(--g)) * .3)}
.ab .round{width:var(--r);height:var(--r);border-radius:50%}
.ab [data-k=b]{margin-top:calc((var(--r) + var(--g)) * .3)}
.sys{display:flex;justify-content:center;gap:1.25rem}
.sys b{width:4.5rem;height:1.75rem;border-radius:1rem;font-size:.7rem}

body.touch .keys{display:none}
body.playing.touch .msg{min-height:0}

/* fullscreen: just the game on white */
.player:fullscreen{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:1rem}
.player:fullscreen .pad{width:100%;max-width:30rem;margin:1rem auto 0}

@media (max-width:34rem){
  .acts{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
  .acts button+button::before{content:none}
}

/* the page never scrolls: body is pinned to the viewport (stops iOS rubber-banding too) */
html.locked{overflow:hidden;overscroll-behavior:none;height:100%}
html.locked body{position:fixed;inset:0;margin:0 auto;height:100%;height:100dvh;
  padding-bottom:1rem;display:flex;flex-direction:column;overscroll-behavior:none}
html.locked main{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:none}
html.locked body.playing main{overflow:visible}
html.locked .fine{margin-top:auto}
body.playing .msg{min-height:0;margin:0}
body.playing .msg:not(:empty){margin-top:.5rem}

/* phone + game: header tucks away, screen runs edge to edge at the top */
body.playing.touch{max-width:none;padding:env(safe-area-inset-top) 0 calc(.75rem + env(safe-area-inset-bottom))}
body.playing.touch header.site,body.playing.touch main>h1{display:none}
body.playing.touch .pad,body.playing.touch .bar,body.playing.touch .msg,body.playing.touch .fine{padding-left:1.25rem;padding-right:1.25rem}
body.playing.touch .pad{max-width:none;margin:.9rem 0 0;align-self:stretch}
body.playing.touch .pad>*{max-width:26rem;margin-left:auto;margin-right:auto}
body.playing.touch .bar{margin-top:.9rem}
body.playing.touch .fine{padding-top:.75rem}

/* phone safety net: the controls can never be pushed off-screen; the screen shrinks first */
body.playing.touch main{overflow:hidden}
body.playing.touch .player{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
body.playing.touch .screen{flex:0 1 auto;min-height:0;overflow:hidden}
body.playing.touch .pad,body.playing.touch .bar,body.playing.touch .fine{flex:none}
body.playing.touch .pad{position:relative;z-index:1;background:#fff}

/* phone held sideways: screen upright in the middle, controls at the thumbs */
body.playing.touch.wide{padding:env(safe-area-inset-top) 0 calc(.5rem + env(safe-area-inset-bottom))}
body.playing.touch.wide .player{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;
  align-items:center;column-gap:.75rem;padding:.5rem max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left))}
body.playing.touch.wide .screen{grid-column:2;grid-row:1/4;overflow:visible}
body.playing.touch.wide .pad,body.playing.touch.wide .pad-mid,body.playing.touch.wide .shoulders{display:contents}
body.playing.touch.wide [data-k=l]{grid-column:1;grid-row:1;justify-self:start}
body.playing.touch.wide [data-k=r]{grid-column:3;grid-row:1;justify-self:end}
body.playing.touch.wide .dpad{grid-column:1;grid-row:2;justify-self:center;width:min(38vh,9rem);height:min(38vh,9rem)}
body.playing.touch.wide .ab{grid-column:3;grid-row:2;justify-self:center;--r:min(17vh,4rem)}
body.playing.touch.wide .sys{grid-column:1;grid-row:3;justify-self:center;margin:0;gap:.75rem;padding-bottom:.25rem}
body.playing.touch.wide .sys b{width:3.5rem;height:1.4rem;font-size:.65rem}
body.playing.touch.wide .bar{margin-top:.35rem}
body.playing.touch.wide .now,body.playing.touch.wide .fine{display:none}