/* POCKET BOUNCE web shell styles. Layout: header / stage / touch pads / bar / key hints. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;background:#101418;color:#eee;font-family:system-ui,sans-serif}
body{display:flex;flex-direction:column;height:100%;height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button{font:inherit;color:#fff;background:#2a3140;border:2px solid #4a5264;border-radius:0;padding:0;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
button:focus{outline:none}
button:focus-visible{outline:3px solid #ffd53d}
[hidden]{display:none!important}

header{text-align:center;padding:6px 0 2px}
h1{margin:0;font-size:clamp(16px,4vmin,26px);letter-spacing:.14em;color:#e8202a;text-shadow:2px 2px 0 #000}

#stage{flex:1;min-height:0;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;--ch:120px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;background:#000}
/* Desktop only: frame the canvas like a small phone screen. The bezel is padding on the wrapper, which
   resize() subtracts from the stage size, so the integer scaling is unaffected; the flat 2 px frame is an
   inset outline so it adds no size. Touch layouts get no bezel. */
#screen{padding:0;line-height:0}
body:not(.touch) #screen{padding:12px;background:#1c2129;outline:2px solid #4a5264;outline-offset:-2px}

/* Play sits in the bar under the canvas (never over the picture): a flat 48 px square in the in-canvas
   red, matching the core's own blinking glyph. Hidden while Playing but keeps its slot so the bar is stable. */
#play{background:#e02020;border-color:#901010;font-size:22px;line-height:1;padding-left:4px;width:64px;height:56px}
body.touch #play{width:96px;height:72px;font-size:32px}   /* the one obvious action on phones: big */
body.touch #bar{flex-wrap:wrap}
#play:active{background:#901010}
#play[hidden]{display:block!important;visibility:hidden}
.msg{padding:24px;text-align:center;font-size:18px;line-height:1.5}

/* Touch pads: shown by JS (body.touch) on coarse-pointer / touch devices. */
#controls{display:none}
body.touch #controls{display:flex;justify-content:space-between;align-items:center;padding:8px calc(env(safe-area-inset-right) + 20px) 8px calc(env(safe-area-inset-left) + 20px)}
.pad{display:flex;gap:14px}
.pad button{width:clamp(72px,20vw,104px);height:clamp(72px,20vw,104px);font-size:40px;line-height:1;background:#2a3140}
.pad button[data-k=jump]{background:#3a4258}
.pad button.on,.pad button:active{background:#5a6a8a}

#bar{display:flex;justify-content:center;align-items:center;gap:16px;padding:8px 0}
#bar button{width:48px;height:48px;font-size:20px;line-height:1}
#bar button:active{background:#4a5670}
#mute svg{display:block;margin:auto}
#mute .cross{display:none}
#mute.muted .waves{display:none}
#mute.muted .cross{display:block}
#keys{margin:0 0 8px;text-align:center;font-size:13px;color:#9aa3b2}

/* Landscape phone/tablet: pads flank the canvas so nothing covers gameplay. */
@media (orientation: landscape) and (pointer: coarse){
  /* Header hidden (the canvas title screen carries the logo); pause/mute sit under the left pad so the stage gets the full height. */
  body.touch{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;grid-template-areas:"l s j" "b s j";column-gap:8px}
  body.touch header{display:none}
  body.touch #stage{grid-area:s}
  body.touch #controls{display:contents}
  body.touch .pad{align-self:center;padding:8px 0}
  body.touch .pad button{width:clamp(64px,16vw,88px);height:clamp(64px,16vw,88px)}
  body.touch .pad:first-child{grid-area:l;padding-left:calc(env(safe-area-inset-left) + 20px)}
  body.touch .pad:last-child{grid-area:j;padding-right:calc(env(safe-area-inset-right) + 20px)}
  body.touch #bar{grid-area:b;justify-content:flex-start;padding:4px 0 8px calc(env(safe-area-inset-left) + 20px)}
  body.touch #keys{display:none}
}