/* Phone layout (body.touch): held sideways, the arena fills the height in the middle and each thumb gets a side. */
body.touch { --tw: min(calc(100vw - 280px), calc(100dvh * 4 / 3)); --side: calc((100vw - var(--tw)) / 2); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html:has(body.touch) { overflow: hidden; height: 100%; }
body.touch #wrap { --pw: 0px; --w: var(--tw); padding: 0; gap: 0; }
body.touch #stage, body.touch .tz, body.touch .tbtn { touch-action: none; }
body.touch :is(#power, #help) { display: none; }

/* a compact scoreboard laid over the top of the arena */
body.touch #top { position: fixed; top: max(4px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: calc(var(--tw) - 8px); margin: 0; gap: 6px; z-index: 3; pointer-events: none; }
body.touch #clock { min-width: 46px; }
body.touch #hTime { font-size: 15px; text-shadow: 0 0 4px #000; }
body.touch :is(#hPhase, #hLead) { display: none; }
body.touch #board { height: 26px; }
body.touch #board .row { font-size: 10px; padding: 1px 4px; gap: 3px; background: rgba(8,6,14,.8); }
body.touch #board .row em { display: none; }
body.touch #board .prog { height: 3px; } /* progress toward the win, without words */
body.touch #feed { top: 30px; font-size: 10px; }

/* thumb zones and buttons, shown only during a match */
.tz { position: fixed; top: 0; bottom: 0; width: var(--side); z-index: 4; display: none; }
/* steering takes the whole left half of the screen, over the arena's left side too, so the thumb can land anywhere */
#tzL { left: 0; width: max(var(--side), 50vw); padding-left: env(safe-area-inset-left); }
#tzL .tlabel { width: calc(var(--side) - 12px); right: auto; }
#tzR { right: 0; padding-right: env(safe-area-inset-right); }
body.touch:is([data-mode="play"], [data-mode="countdown"]) .tz { display: block; }
.tbtn { display: grid; place-items: center; background: rgba(12,9,20,.92); border: 2px solid #3a2b52; color: #cfc4ea; font: 400 11px Bungee, Impact, sans-serif; cursor: pointer; }
.tbtn.down { border-color: #f6f1ff; color: #f6f1ff; }
.tlabel { position: absolute; left: 6px; right: 6px; bottom: max(10px, env(safe-area-inset-bottom)); text-align: center; font-size: 10px; color: #6f6290; }

/* the floating pad appears under the thumb */
.tpad { position: absolute; left: calc(var(--side) / 2 + env(safe-area-inset-left) / 2); top: 60%; width: 144px; height: 144px; margin: -72px 0 0 -72px; border-radius: 50%; border: 3px solid rgba(79,209,255,.4);
  background: radial-gradient(circle, rgba(79,209,255,.08), transparent 70%); opacity: .55; transition: opacity .15s; pointer-events: none; }
.tpad.on { opacity: 1; }
/* a joystick: a ring and a knob that follows the thumb inside it */
.tpad i { position: absolute; left: 37px; top: 37px; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(160,232,255,.55), rgba(79,209,255,.28) 60%); border: 2px solid #4fd1ff; box-shadow: 0 0 10px rgba(79,209,255,.4); }
.tpad.on i { box-shadow: 0 0 16px rgba(79,209,255,.75); }
body.swipe .tpad { display: none; } /* swipe steering has no joystick */
/* arrows: the same ring with four arrows and no knob; the arrow you steer toward lights up */
.tpad b { display: none; position: absolute; width: 0; height: 0; border: 13px solid transparent; }
body.arrows .tpad b { display: block; }
body.arrows .tpad i { display: none; }
.tpad .u { left: 56px; top: 2px; border-bottom-color: #4fd1ff88; } .tpad .d { left: 56px; bottom: 2px; border-top-color: #4fd1ff88; }
.tpad .l { top: 56px; left: 2px; border-right-color: #4fd1ff88; } .tpad .r { top: 56px; right: 2px; border-left-color: #4fd1ff88; }
.tpad[data-dir="up"] .u { border-bottom-color: #a8ecff; filter: drop-shadow(0 0 6px #4fd1ff); }
.tpad[data-dir="down"] .d { border-top-color: #a8ecff; filter: drop-shadow(0 0 6px #4fd1ff); }
.tpad[data-dir="left"] .l { border-right-color: #a8ecff; filter: drop-shadow(0 0 6px #4fd1ff); }
.tpad[data-dir="right"] .r { border-left-color: #a8ecff; filter: drop-shadow(0 0 6px #4fd1ff); }
/* the side of the ring you steer toward lights up, so the direction shows even under the thumb */
.tpad[data-dir="up"] { border-top-color: #4fd1ff; } .tpad[data-dir="down"] { border-bottom-color: #4fd1ff; }
.tpad[data-dir="left"] { border-left-color: #4fd1ff; } .tpad[data-dir="right"] { border-right-color: #4fd1ff; }
.tpad:not([data-dir=""]).on { border-width: 4px; }

/* abilities in an arc under the right thumb, Dash biggest and closest */
.tenergy { position: absolute; right: 14px; top: max(12px, env(safe-area-inset-top)); font-size: 11px; color: #b6abd3; }
.tenergy b { font: 400 16px Bungee, Impact, sans-serif; color: #f6f1ff; margin-left: 4px; }
.trewind { position: absolute; right: 14px; top: 46px; width: 76px; height: 40px; border-radius: 20px; }
.tab { position: absolute; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,9,20,.92); border: 2px solid #3a2b52; font: 400 9px Bungee, Impact, sans-serif; color: #8f80b3; text-transform: uppercase; touch-action: none; }
.tab svg { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; }
.tab circle { fill: none; stroke: var(--c); stroke-width: 5; stroke-dasharray: 289; stroke-dashoffset: 289; opacity: .55; transition: stroke-dashoffset .15s; }
.tab.ready { border-color: var(--c); color: #f6f1ff; box-shadow: 0 0 14px var(--c); }
.tab.ready circle { opacity: 1; }
.tab.active, .tab.down { background: color-mix(in srgb, var(--c) 35%, #0c0914); }
.t-dash { width: 74px; height: 74px; right: 12px; bottom: max(64px, calc(env(safe-area-inset-bottom) + 54px)); font-size: 11px; }
.t-shield { right: 96px; bottom: max(22px, env(safe-area-inset-bottom)); }
.t-freeze { right: 92px; bottom: 112px; }

/* the tutorial text beside the arena, in the left strip between the pause button and the joystick, never over
   the play area (on a computer it moves to the arena's top or bottom instead, away from your ship) */
body.touch #hint, body.touch #hint.top { position: fixed; left: calc(env(safe-area-inset-left) + 8px); top: max(58px, calc(env(safe-area-inset-top) + 52px)); bottom: auto;
  transform: none; width: calc(var(--side) - 16px); max-width: none; padding: 7px 9px; font-size: 12px; line-height: 1.35; text-align: left; z-index: 5; }
body.touch #hint.pulse { animation: hintSide .5s cubic-bezier(.2,1.5,.4,1); } /* the arena's pop-in slides it sideways: this one does not */
@keyframes hintSide { 0% { transform: translateY(10px) scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* pause */
#tpause { position: fixed; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); width: 38px; height: 38px; border-radius: 50%; z-index: 5; display: none; font-size: 13px; }
body.touch:is([data-mode="play"], [data-mode="countdown"]) #tpause { display: grid; }
#tpmenu { position: fixed; left: 50%; top: 66%; transform: translateX(-50%); display: none; gap: 12px; z-index: 6; }
#tpmenu .tbtn { padding: 12px 18px; font-size: 14px; }
body.touch[data-mode="paused"] #tpmenu { display: flex; }

/* held upright: ask to turn the phone */
#rotate { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; text-align: center; background: #0d0a16; color: #f6f1ff; padding: 24px; }
#rotate b { display: block; margin: 14px 0 6px; font: 400 18px Bungee, Impact, sans-serif; }
#rotate span { font-size: 13px; color: #b6abd3; }
#rotate .rot { width: 54px; height: 90px; margin: 0 auto; border: 3px solid #f6f1ff; border-radius: 10px; animation: rotph 2.4s ease-in-out infinite; }
@keyframes rotph { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.touch #rotate { display: grid; } }

/* scrolling screens still scroll */
body.touch :is(#howto, .ov:not(.scene)) { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { #rotate .rot { animation: none; } }

/* no keyboard on a phone: hide key hints */
body.touch :is(kbd, .keys) { display: none; }
body.touch #grab .gcard .key { display: none; }