/* OVERWORK INC. - tall.css : squarer landscape screens (iPads, 4:3). js/main.js fit() gives them a taller stage, up to 1280x960
 * (html.tall, --stage-h), instead of black bars above and below. The 3D world sees more above and below (w3d viewFov);
 * the fixed 1280x720 pieces sit in the middle band with the game's pastel stripes round them, as on portrait phones. */

/* ---------- WarioWare stage: the 1280x720 microgame in the middle band ---------- */
html.tall .ww-game { background: repeating-linear-gradient(135deg, #ffe1ee 0 28px, #fff0f6 28px 56px); }
html.tall .ww-hostbox { top: calc((var(--stage-h) - 720px) / 2 - 30px); box-shadow: 0 0 0 5px #3a2433, 0 12px 0 5px rgba(58,36,51,.3); background: #fff7f0; }
html.tall .ww-gstrip { top: calc((var(--stage-h) - 720px) / 2 - 16px); }
html.tall .ww-cmd { padding-top: calc((var(--stage-h) - 720px) / 2 - 12px); }

/* ---------- wide landscape phones (html.wide, up to 1480x720): the 1280x720 microgame centred, stripes either side ---------- */
html.wide .ww-game { background: repeating-linear-gradient(135deg, #ffe1ee 0 28px, #fff0f6 28px 56px); }
html.wide .ww-hostbox { left: calc((var(--stage-w) - 1280px) / 2); box-shadow: 0 0 0 5px #3a2433, 0 12px 0 5px rgba(58,36,51,.3); background: #fff7f0; }

/* ---------- full screen on phones: the stage runs under the Dynamic Island and the home bar; the controls near the edges
   step in by the safe area (--sl --sr --st --sb in stage px, js/main.js fit(); 0 everywhere else) ---------- */
#hud { padding-left: calc(18px + var(--sl, 0px)); padding-right: calc(18px + var(--sr, 0px)); }
#stage:has(#pz-btn.on) #hud { padding-right: calc(84px + var(--sr, 0px)); }     /* the pause button keeps its corner */
#pz-btn { right: calc(18px + var(--sr, 0px)); }
.tt-title { left: calc(56px + var(--sl, 0px)); }
.tt-intro { right: calc(34px + var(--sr, 0px)); }
.intro-skip, .cm-skip { right: calc(24px + var(--sr, 0px)); bottom: calc(28px + var(--sb, 0px)); }
.crd-ui { right: calc(18px + var(--sr, 0px)); }
html[dir=rtl] .crd-ui { left: calc(18px + var(--sl, 0px)); }
.ww-timer { left: var(--sl, 0px); right: var(--sr, 0px); bottom: var(--sb, 0px); }
.wk-actions { left: calc(18px + var(--sl, 0px)); }
.hm-note { left: calc(26px + var(--sl, 0px)); }
#screen-home .hm-tray { padding-left: calc(18px + var(--sl, 0px)); padding-right: calc(18px + var(--sr, 0px)); padding-bottom: calc(14px + var(--sb, 0px)); height: calc(206px + var(--sb, 0px)); }
.cs-back { inset-inline-start: calc(34px + var(--sl, 0px)); }
html[dir=rtl] .cs-back { inset-inline-start: calc(34px + var(--sr, 0px)); }
#screen-end .go-bottom { bottom: calc(44px + var(--sb, 0px)); }
.ww-status { left: calc(182px + var(--sl, 0px)); }          /* the score + stress ladder: clear of the iPhone's island */
.ww-scream, .ww-vent { left: calc(22px + var(--sl, 0px)) !important; bottom: calc(22px + var(--sb, 0px)); }
html:not(.portrait) #screen-end .go-card { left: calc(64px + var(--sl, 0px)); }          /* the losing card: clear of the island */
#screen-home .hm-tray { padding-left: calc(30px + var(--sl, 0px)); }          /* the first card's medal hangs over its left edge */