:root {
  color-scheme: dark;
  --bg: #0d1117;
  --panel: #161b22;
  --line: #21262d;
  --text: #e6edf3;
  --dim: #8b949e;
  --accent: #3e63dd;
  --ok: #30a46c;
  --warn: #e5484d;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { overscroll-behavior: none; } /* no pull-to-refresh / rubber-banding */
body {
  margin: 0;
  font: 15px/1.45 system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -100px, #14203c 0%, var(--bg) 60%);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  /* app-like touch: no text selection, no press-hold callout menu, no
     double-tap zoom. Inputs re-enable selection below. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
/* the game screen + controls must swallow all gestures (no scroll/zoom/select) */
#gamewrap, #screen, #touch { touch-action: none; }
/* typing needs selection + the caret back */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
}
#brand { font-weight: 700; letter-spacing: 0.02em; color: var(--dim); }
h3 { margin: 0 0 6px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }

.chip {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font-size: 12px;
}
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.warn { color: var(--warn); border-color: var(--warn); }

/* ============ join screen ============ */
#login {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8vh 16px 40px;
  text-align: center;
}
/* author display:flex beats the [hidden] UA rule — restore it, or the login
   stays behind the game (it was only ever *covered* by the fixed overlay) */
#login[hidden] { display: none; }
.hero {
  margin: 0;
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff, #9db4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline { margin: 6px 0 28px; color: var(--dim); font-size: clamp(15px, 2.4vw, 19px); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  width: min(440px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.card label { color: var(--dim); font-size: 13px; }
.card input:not([type='file']) {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 14px;
  font-size: 17px;
}
.hint { color: var(--dim); font-size: 13px; margin: 0; }
.hint.warn { color: var(--warn); }

/* ---- returning trainers on the join screen ---- */
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
  color: var(--dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

#user-list { display: flex; flex-wrap: wrap; gap: 8px; }
.user-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'dot name' 'dot loc';
  column-gap: 8px;
  align-items: center;
  text-align: left;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  background: var(--bg);
}
.user-chip .dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; }
.user-chip .uname { grid-area: name; font-weight: 700; }
.user-chip .uloc { grid-area: loc; color: var(--dim); font-size: 12px; }
.user-chip:disabled { opacity: 0.55; cursor: default; }
.user-chip:not(:disabled):hover { border-color: var(--accent); }
.dot.on { background: var(--ok); }
.dot.off { background: #555c66; }
.alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
details { color: var(--dim); font-size: 13px; }
details summary { cursor: pointer; }

button, .file-btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  touch-action: manipulation;
}
button:hover, .file-btn:hover { filter: brightness(1.15); }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  padding: 16px;
}
button.primary:disabled { opacity: 0.45; cursor: default; }
button.ghost { background: transparent; }

/* ============ game screen ============ */
/* The game column centers on the viewport; the sidebar is a fixed drawer on
   the right edge and never pushes the game off-center. */
#stage { padding: 0 16px 40px; }
#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: 1100px;
  margin: 0 auto;
}

#sidebar {
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 16px;
  width: min(320px, 86vw);
  z-index: 40;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
#sidebar.open { transform: translateX(0); }
#sidebar-body {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(22, 27, 34, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 14px 0 0 14px;
}
#sidebar-tab {
  position: absolute;
  left: -44px;
  top: 14px;
  width: 44px;
  height: 56px;
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--line);
  border-right: none;
  background: rgba(22, 27, 34, 0.92);
  font-size: 15px;
  line-height: 1.1;
}
#title {
  margin: 4px 0 0;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

#gamewrap {
  position: relative; /* anchors toasts, proximity chip, starter modal, pads */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#screen {
  width: min(96vw, 78vh * 1.5, 900px);
  aspect-ratio: 3 / 2;
  height: auto;
  image-rendering: pixelated;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

#controls-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }

#speed-ctl { position: relative; }
#speed-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  z-index: 45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#speed-menu button { min-width: 64px; border: none; }
#speed-menu button.on { background: var(--accent); color: #fff; }
/* author display beats the hidden attribute's UA rule — restore it */
#speed-menu[hidden] { display: none; }

#demo-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* top-center toast stack over the game — works in fullscreen too, because
   #offers lives inside #gamewrap */
#offers {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(560px, 92%);
  pointer-events: none;
}
.offer {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ghost proximity chip: bottom-center, between the pad clusters */
#proximity {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#proximity[hidden] { display: none; }
#proximity #proximity-name { font-weight: 700; }
#proximity button { padding: 4px 12px; font-size: 13px; border-radius: 999px; }
#prox-give-form { display: flex; gap: 6px; align-items: center; }
#prox-give-form[hidden] { display: none; }
#prox-give-form input {
  width: 76px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 4px 8px;
  font-size: 13px;
}

/* starter picker: modal over the game for brand-new saves */
#starter-modal {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 10px;
}
#starter-modal[hidden] { display: none; }
.starter-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 26px;
  text-align: center;
  max-width: 94%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.starter-card h2 { margin: 0 0 6px; }
.starter-card p { margin: 0 0 16px; color: var(--dim); font-size: 14px; }
.starter-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.starter-row button { font-size: 16px; font-weight: 700; padding: 14px 18px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  max-height: 320px;
  overflow: auto;
}

#players, #log { list-style: none; margin: 0; padding: 0; }
#players li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'dot name actions' 'dot dur actions';
  column-gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
#players li:last-child { border-bottom: none; }
#players li.offline { opacity: 0.55; }
#players .dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; }
#players .pname { grid-area: name; font-weight: 600; }
#players .dur { grid-area: dur; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
#players .actions { grid-area: actions; display: flex; gap: 6px; }
#players li button { padding: 3px 10px; font-size: 12px; }
#log li { padding: 3px 0; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 12px; }
#log li[data-t='error'] { color: var(--warn); }
#log li[data-t^='battle'] { color: var(--text); }

/* console panel */
#console-out {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 180px;
  overflow: auto;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#console-out li { white-space: pre-wrap; padding: 2px 0; border-bottom: 1px solid var(--line); color: var(--text); }
#console-out li[data-ok='false'] { color: var(--warn); }
#console-out li[data-ok='true'] { color: var(--ok); }
#console-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font: 13px ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* debug panel: live game heartbeat + the ROM's log feed */
#debug-stat {
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ok);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
#debug-stat.warn { color: var(--warn); font-weight: 700; }
#debug-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 160px;
  overflow: auto;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#debug-log li { padding: 2px 0; border-bottom: 1px solid var(--line); color: var(--dim); }
#debug-log li[data-warn] { color: var(--warn); font-weight: 700; }

/* ============ boot progress overlay ============ */
#loading {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(1200px 600px at 50% -100px, #14203c 0%, var(--bg) 60%);
}
#loading[hidden] { display: none; }
#loading .spinner {
  width: 46px;
  height: 46px;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mba-spin 0.9s linear infinite;
}
@keyframes mba-spin { to { transform: rotate(360deg); } }
#loading-msg { margin: 0; font-size: 16px; color: var(--text); max-width: 90%; }
#loading-msg.err { color: var(--warn); }

#btn-logout { color: var(--dim); }

/* ============ touch controls ============ */
/* --ps scales every pad dimension (the "Size" slider writes it). */
#touch {
  --ps: 1;
  display: none; /* enabled on touch devices / fullscreen via JS class */
  position: relative;
  width: 100%;
  max-width: 900px;
  min-height: calc(240px * var(--ps));
}
body.touch #touch { display: block; }

/* Overlay mode means overlay: the pads sit on top of the game display itself,
   in or out of fullscreen. Only the pads take input, not the layer. */
body.touch #gamewrap:not(.controls-below) #touch {
  position: absolute;
  inset: 0;
  max-width: none;
  min-height: 0;
  pointer-events: none;
  z-index: 20;
}
body.touch #gamewrap:not(.controls-below) .pad,
body.touch #gamewrap:not(.controls-below) #stick-base {
  pointer-events: auto;
}

.pad {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  /* thick high-contrast bevel: bright rim, deep body, sculpted highlight +
     shadow so the controls read clearly over the game */
  border: 4px solid rgba(255, 255, 255, 0.92);
  background: rgba(6, 9, 14, 0.94);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.75),
    inset 0 3px 4px rgba(255, 255, 255, 0.35),
    inset 0 -5px 7px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.pad:active, .pad.held {
  background: var(--accent);
  border-color: #fff;
  /* pressed-in bevel */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    inset 0 4px 8px rgba(0, 0, 0, 0.55),
    inset 0 -2px 3px rgba(255, 255, 255, 0.25);
}

/* left: L above the movement control; right: R above the action diamond */
#left-cluster, #right-cluster {
  position: absolute;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ps));
}
#left-cluster { left: 10px; align-items: flex-start; }
#right-cluster { right: 10px; align-items: flex-end; }
.pad.shoulder {
  position: static;
  width: calc(58px * var(--ps));
  height: calc(38px * var(--ps));
  border-radius: 10px;
  font-size: calc(14px * var(--ps));
}

/* Movement box matches the diamond box (196×196·ps) so the joystick/D-pad and
   the button diamond sit at the same height, mirrored left/right — and the
   L/R shoulders above them line up too. */
#dpad { position: relative; width: calc(196px * var(--ps)); height: calc(196px * var(--ps)); }
#dpad .pad { width: calc(56px * var(--ps)); height: calc(56px * var(--ps)); font-size: calc(18px * var(--ps)); }
#dpad .up    { left: calc(70px * var(--ps)); top: calc(14px * var(--ps)); }
#dpad .down  { left: calc(70px * var(--ps)); bottom: calc(14px * var(--ps)); }
#dpad .left  { left: calc(14px * var(--ps)); top: calc(70px * var(--ps)); }
#dpad .right { right: calc(14px * var(--ps)); top: calc(70px * var(--ps)); }

/* joystick mode replaces the d-pad in place (same outer box, stick centered) */
#joystick {
  position: relative;
  width: calc(196px * var(--ps));
  height: calc(196px * var(--ps));
  display: flex;
  align-items: center;
  justify-content: center;
}
#joystick[hidden] { display: none; }
#stick-base {
  position: relative;
  width: calc(150px * var(--ps));
  height: calc(150px * var(--ps));
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.92);
  background: rgba(6, 9, 14, 0.9);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.75),
    inset 0 4px 8px rgba(0, 0, 0, 0.6);
  touch-action: none;
}
#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(62px * var(--ps));
  height: calc(62px * var(--ps));
  margin: calc(-31px * var(--ps)) 0 0 calc(-31px * var(--ps));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.7),
    inset 0 2px 3px rgba(255, 255, 255, 0.4);
}
#stick-base.live #stick-knob { background: var(--accent); }

/* A/B/Start/Select in a 4-point diamond: START top, SELECT left, A right, B bottom */
#diamond { position: relative; width: calc(196px * var(--ps)); height: calc(196px * var(--ps)); }
#diamond .a, #diamond .b { width: calc(64px * var(--ps)); height: calc(64px * var(--ps)); font-size: calc(20px * var(--ps)); }
#diamond .small { width: calc(52px * var(--ps)); height: calc(52px * var(--ps)); font-size: calc(8.5px * var(--ps)); letter-spacing: 0.02em; }
#diamond .start  { top: 0; left: 50%; margin-left: calc(-26px * var(--ps)); }
#diamond .select { left: 0; top: 50%; margin-top: calc(-26px * var(--ps)); }
#diamond .a { right: 0; top: 50%; margin-top: calc(-32px * var(--ps)); }
#diamond .b { bottom: 0; left: 50%; margin-left: calc(-32px * var(--ps)); }

#pad-prefs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#pad-prefs .pref { display: flex; align-items: center; gap: 6px; }
#pad-prefs .label { color: var(--dim); font-size: 13px; }
#pad-prefs input[type='range'] { width: 110px; accent-color: var(--accent); }

/* ---- "below" mode: pads live in a strip under the game, never over it ---- */
#gamewrap.controls-below #touch {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 6px 4px;
}
#gamewrap.controls-below #left-cluster,
#gamewrap.controls-below #right-cluster { position: static; }

/* ---- OPTIONS button + panel (shown in immersive modes: fullscreen or the
   mobile landscape overlay; hidden in the windowed/below layout) ---- */
#btn-options, #options-panel { display: none; }
#gamewrap:fullscreen #btn-options, #gamewrap.fake-fullscreen #btn-options,
#gamewrap.mobile-overlay #btn-options {
  display: block;
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 60;
  background: rgba(22, 27, 34, 0.85);
}
#gamewrap:fullscreen #options-panel.open, #gamewrap.fake-fullscreen #options-panel.open,
#gamewrap.mobile-overlay #options-panel.open {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  top: 60px;
  right: 16px;
  z-index: 60;
  max-height: 80%;
  overflow: auto;
  background: rgba(22, 27, 34, 0.97);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  backdrop-filter: blur(8px);
}
#options-panel #btn-logout { width: 100%; }
#options-panel #pad-prefs { flex-direction: column; align-items: stretch; }
#options-panel #pad-prefs > * { width: 100%; }
/* the panel sits near the top of the screen, so the speed selector must open
   downward there (upward would fall off the top edge) */
#options-panel #speed-menu {
  bottom: auto;
  top: calc(100% + 8px);
}

/* ============ fullscreen (native or CSS fallback) ============ */
#gamewrap:fullscreen, #gamewrap.fake-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  justify-content: center;
  max-width: none;
}
#gamewrap:fullscreen #screen, #gamewrap.fake-fullscreen #screen {
  width: min(100vw, 150vh);
  border: none;
  border-radius: 0;
}
#gamewrap:fullscreen #touch, #gamewrap.fake-fullscreen #touch {
  display: block;
  position: absolute;
  inset: 0;
  max-width: none;
  pointer-events: none; /* only the pads take input, not the layer */
}
#gamewrap:fullscreen .pad, #gamewrap.fake-fullscreen .pad,
#gamewrap:fullscreen #stick-base, #gamewrap.fake-fullscreen #stick-base {
  pointer-events: auto;
  opacity: 0.85;
}
#gamewrap:fullscreen #left-cluster, #gamewrap.fake-fullscreen #left-cluster { left: 20px; bottom: 20px; }
#gamewrap:fullscreen #right-cluster, #gamewrap.fake-fullscreen #right-cluster { right: 20px; bottom: 20px; }

/* fullscreen + "below" mode: the game shrinks to leave a real control strip —
   pads never cover the picture, even in fullscreen */
#gamewrap:fullscreen.controls-below, #gamewrap.fake-fullscreen.controls-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
#gamewrap:fullscreen.controls-below #screen, #gamewrap.fake-fullscreen.controls-below #screen {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100vw;
}
#gamewrap:fullscreen.controls-below #touch, #gamewrap.fake-fullscreen.controls-below #touch {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 1000px;
  pointer-events: auto;
  padding: 4px 10px 10px;
  /* the overlay-fullscreen rule sets display:block, which would stack the
     clusters vertically — restore the below-mode row */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#gamewrap:fullscreen.controls-below .pad, #gamewrap.fake-fullscreen.controls-below .pad { opacity: 1; }

#btn-reset-storage {
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  padding: 6px 10px;
  color: var(--dim);
}

/* ============ mobile layouts ============ */
/* Overlay mode on a phone = immersive: the game fills the whole screen and the
   pads float on top. In portrait we rotate the frame 90° so the landscape game
   is large (tilt the phone into landscape to play). Below mode stays windowed. */
body.touch #gamewrap.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  max-width: none;
  margin: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.touch #gamewrap.mobile-overlay #screen {
  width: min(100vw, 150vh);
  border: none;
  border-radius: 0;
}
body.touch #gamewrap.mobile-overlay #touch {
  position: absolute;
  inset: 0;
  max-width: none;
  min-height: 0;
  pointer-events: none;
  z-index: 20;
}
body.touch #gamewrap.mobile-overlay .pad,
body.touch #gamewrap.mobile-overlay #stick-base { pointer-events: auto; }
body.touch #gamewrap.mobile-overlay #left-cluster { left: 20px; bottom: 20px; }
body.touch #gamewrap.mobile-overlay #right-cluster { right: 20px; bottom: 20px; }

@media (orientation: portrait) {
  /* rotate the immersive frame into landscape and fill the viewport */
  body.touch #gamewrap.mobile-overlay {
    inset: auto;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vw;
    transform-origin: top left;
    transform: translateX(100vw) rotate(90deg);
  }
  body.touch #gamewrap.mobile-overlay #screen {
    width: min(100vh, 150vw);
  }

  /* Below mode, windowed: hide the big page title, top-align, let the game use
     the full width with the pads packed directly beneath — no weird letterbox,
     no stretch (the 3:2 aspect-ratio is preserved). */
  body.touch #stage { padding: 6px 0 20px; }
  body.touch #title { display: none; }
  body.touch #main { gap: 8px; }
  body.touch #gamewrap.controls-below { gap: 6px; }
  body.touch #gamewrap.controls-below #screen { width: 100vw; border-radius: 0; }

  /* Two 196px pad clusters don't fit a phone's width — scale the whole strip
     down so nothing is cut off (the rotated overlay has room; this windowed
     strip does not). The Size slider still scales on top of this. */
  body.touch #gamewrap.controls-below #touch {
    transform: scale(0.8);
    transform-origin: top center;
    min-height: calc(200px * var(--ps));
  }
}
/* roomier portrait tablets can show the pads full size */
@media (orientation: portrait) and (min-width: 560px) {
  body.touch #gamewrap.controls-below #touch { transform: none; }
}