* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #ffd23f;
  --gold2: #ffb400;
  --ink: #0a0e1a;
  --panel: rgba(10, 16, 32, 0.92);
  --red: #ff5a4e;
  --blue: #3fa9ff;
  --green: #5aff7a;

  /* dynamic viewport height: iOS Safari's 100vh is taller than the visible
     area (URL bar / home indicator), so we prefer dvh when supported */
  --dvh: 100vh;
  --game-w: min(100vw, calc(var(--dvh) * 16 / 9));
  --game-h: min(var(--dvh), calc(100vw * 9 / 16));

  /* touch control sizes scale with the smaller viewport dimension so they
     stay thumb-sized on every phone (5.4" -> 6.7" and beyond) */
  --joy: clamp(112px, 38vmin, 170px);
  --joy-base: clamp(84px, 26vmin, 118px);
  --joy-knob: clamp(40px, 13vmin, 58px);
  --act: clamp(58px, 17vmin, 78px);
  --spc: clamp(54px, 16.5vmin, 76px);
  --spc-h: clamp(32px, 10.5vmin, 46px);
}
@supports (height: 100dvh) { :root { --dvh: 100dvh; } }

html, body {
  width: 100%;
  height: var(--dvh);
  overflow: hidden;
  background: radial-gradient(1200px 800px at 50% 30%, #1b2540 0%, #0a0e1a 60%, #05070e 100%);
  font-family: 'Russo One', 'Arial Black', sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
/* Center the 16:9 stage in the viewport; #app IS the stage box so every
   absolutely-positioned overlay inside it lines up with the canvas no matter
   how the viewport is shaped (landscape, portrait, ultrawide, tall window). */
body { display: grid; place-items: center; }

#app { position: relative; width: var(--game-w); height: var(--game-h); }

#game {
  width: var(--game-w);
  height: var(--game-h);
  background: #000;
  border-radius: 6px;
  box-shadow: 0 0 80px rgba(0,0,0,0.7), 0 0 30px rgba(63,169,255,0.12);
  image-rendering: auto;
  touch-action: none; /* the canvas is the floating-joystick surface: never scroll/zoom from it */
}

.hidden { display: none !important; }

/* ---------------- HUD ---------------- */
#hud {
  position: absolute;
  top: 0; left: 0;
  width: var(--game-w);
  height: var(--game-h);
  pointer-events: none;
  z-index: 5;
}
.hud-p1, .hud-p2 { position: absolute; bottom: 12px; width: min(300px, 28%); }
.hud-p1 { left: 16px; }
.hud-p2 { right: 16px; text-align: right; }
.hud-name {
  font-size: 13px; letter-spacing: 1px; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,0.8);
  margin-bottom: 3px;
}
.hud-p2 .hud-name { direction: rtl; }
.hud-extra { margin-bottom: 6px; }
.hud-mini { margin-bottom: 4px; }
.hud-mini .hud-name { font-size: 10px; letter-spacing: 1px; margin-bottom: 1px; }
.hud-mini .bar { height: 7px; }
.hud-mini .bar.mp { height: 4px; margin-top: 2px; }
.bar {
  height: 13px; border-radius: 7px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  overflow: hidden;
}
.bar.mp { height: 7px; margin-top: 4px; border-color: rgba(63,169,255,0.5); }
.bar .fill { height: 100%; width: 100%; transition: width 80ms linear; }
.bar.hp .fill { background: linear-gradient(180deg, #ff8d6a, #e23b2e); }
.hud-p2 .bar.hp .fill { background: linear-gradient(180deg, #8affb0, #2ec46e); }
.bar.mp .fill { background: linear-gradient(180deg, #7ad0ff, #2380e6); }
.hud-mid { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; }
#hudStage {
  font-size: 16px; letter-spacing: 4px; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,180,0,0.4);
}
#hudScore { font-size: 11px; letter-spacing: 2px; color: #cdd6ff; text-shadow: 0 1px 0 #000; }

/* ---------------- Screens / Menus ---------------- */
.screen {
  position: absolute;
  width: var(--game-w);
  height: var(--game-h);
  top: 0; left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 20;
  overflow-y: auto; /* short landscape screens: scroll instead of clipping */
  background: linear-gradient(180deg, rgba(5,8,18,0.35), rgba(5,8,18,0.85));
  backdrop-filter: blur(2px);
}
/* Center a single child when it fits, but keep the top reachable when it is
   taller than the screen (auto margins collapse to 0 on overflow, so the
   content start scrolls into view instead of being cut off by flex centering) */
.screen > * { margin: auto; }
.menu-inner { text-align: center; padding: 30px; }


.logo { margin-bottom: 34px; }
.logo h1 { margin: 0; font-weight: inherit; font-size: inherit; }
.logo h1 .logo-l1,
.logo h1 .logo-l2 { display: block; }
.logo-l1 {
  font-family: 'Black Ops One', 'Russo One', sans-serif;
  font-size: 58px; letter-spacing: 3px; color: #fff;
  text-shadow: 0 4px 0 var(--red), 0 8px 0 rgba(0,0,0,0.6), 0 0 30px rgba(255,90,78,0.5);
}
.logo-l2 {
  font-size: 42px; letter-spacing: 14px; color: var(--gold);
  text-shadow: 0 3px 0 var(--gold2), 0 6px 0 rgba(0,0,0,0.6);
  margin-top: -6px;
}
.logo-tag { margin-top: 10px; letter-spacing: 6px; font-size: 12px; color: #9fb2e6; }

.mbtn {
  display: block; width: 320px; margin: 9px auto;
  padding: 13px 20px; cursor: pointer;
  font-family: inherit; font-size: 18px; letter-spacing: 2px;
  color: #fff; background: linear-gradient(180deg, #2b3a63, #18233f);
  border: 2px solid #3f6fd4; border-radius: 8px;
  box-shadow: 0 4px 0 #0d1428, inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 80ms, background 120ms, box-shadow 120ms;
}
.mbtn:hover { background: linear-gradient(180deg, #3b4f82, #223054); border-color: var(--gold); }
.mbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d1428; }
.mbtn span { display: block; font-size: 11px; letter-spacing: 1px; color: #9fb2e6; margin-top: 2px; }
.mbtn.small { width: 190px; display: inline-block; margin: 10px; font-size: 15px; padding: 10px; }

/* the main menu now lists eight modes: two columns keep them inside a short
   16:9 stage without scrolling (the compact media queries still restyle the
   button type/padding, but the width stays 100% of the grid cell) */
#menuScreen .menu-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-width: 680px;
  margin: 0 auto;
}
#menuScreen .menu-buttons .mbtn { width: 100%; margin: 0; }
.menu-links { margin-top: 14px; font-size: 13px; letter-spacing: 1px; }
.menu-links a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px dashed rgba(255,210,63,0.6);
}
.menu-links a:hover { color: #fff; border-bottom-color: #fff; }
.menu-sep { color: #6d7aa8; }

.settings-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 18px; flex-wrap: wrap;
}
.set-label { font-size: 12px; letter-spacing: 2px; color: #7d8db8; }
.sbtn {
  min-width: 74px; padding: 8px 14px; cursor: pointer;
  font-family: inherit; font-size: 14px; letter-spacing: 1px;
  color: #ffd23f; background: linear-gradient(180deg, #2b3a63, #18233f);
  border: 1px solid #3f6fd4; border-radius: 6px;
  box-shadow: 0 3px 0 #0d1428;
  transition: transform 80ms, background 120ms;
}
.sbtn:hover { background: linear-gradient(180deg, #3b4f82, #223054); }
.sbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d1428; }

/* keyboard navigation focus ring (arrow-key driven menus) */
.mbtn:focus-visible, .sbtn:focus-visible, .sel-card:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
#menuScreen .mbtn:focus-visible { transform: translateY(-2px); }

.menu-foot { margin-top: 22px; font-size: 12px; color: #7d8db8; letter-spacing: 1px; }

.online-join {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 10px auto 12px; max-width: 320px;
}
#onlineCode {
  width: 132px; height: 44px; text-align: center;
  font-family: inherit; font-size: 22px; letter-spacing: 8px;
  text-transform: uppercase; color: #ffd23f;
  background: #0d1428; border: 2px solid #3f6fd4; border-radius: 8px;
  outline: none;
}
#onlineCode:focus { border-color: var(--gold); }
.online-code {
  font-size: 48px; letter-spacing: 14px; color: var(--gold);
  text-shadow: 0 3px 0 var(--gold2), 0 6px 0 rgba(0,0,0,0.6);
  margin: 10px 0 8px;
  max-width: 100%; overflow: hidden; white-space: nowrap;
}

/* ---- direct (serverless) link panel ---- */
#onlineDirectBox { max-width: 520px; margin: 0 auto; }
.dcode {
  display: block; width: 100%; max-width: 480px; height: 62px;
  margin: 8px auto; padding: 8px 10px; resize: none;
  font-family: 'Liberation Mono', monospace; font-size: 10px; line-height: 1.35;
  word-break: break-all; color: #cfe0ff;
  background: #0d1428; border: 2px solid #3f6fd4; border-radius: 8px;
  -webkit-user-select: text; user-select: text;
}
.dcode:focus { border-color: var(--gold); outline: none; }
.dc-actions { display: flex; justify-content: center; gap: 8px; }


/* ---------------- Character select ---------------- */
.sel-inner { text-align: center; padding: 20px; }
.sel-title { font-size: 22px; letter-spacing: 5px; color: var(--gold); text-shadow: 0 2px 0 #000; margin-bottom: 16px; }
.sel-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; max-width: 760px; margin: 0 auto 14px; }
.sel-card {
  width: 82px; height: 92px; cursor: pointer; border-radius: 8px;
  background: linear-gradient(180deg, #202b4a, #121a30);
  border: 2px solid #2c3a63; position: relative; overflow: hidden;
  transition: transform 90ms, border-color 120ms, box-shadow 120ms;
}
.sel-card:hover { transform: translateY(-3px); border-color: #6d8ff0; }
.sel-card.active { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,210,63,0.6); transform: translateY(-3px); }
.sel-card .mini { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); }
.sel-card .nm { position: absolute; bottom: 3px; width: 100%; text-align: center; font-size: 10px; letter-spacing: 1px; color: #cdd6ff; }
.sel-card.pick-n .nm { color: var(--gold); }
/* bosses & unlockables get a violet frame so they read as a different tier */
.sel-card.boss { border-color: #a05cff; background: linear-gradient(180deg, #2a1e4a, #160f30); }
.sel-card.boss:hover { border-color: #d0a0ff; }
.sel-card.boss .nm { color: #d9c2ff; }
.sel-card.boss.pick-n .nm { color: var(--gold); }
.sel-info { max-width: 560px; margin: 0 auto 10px; padding: 12px 18px; background: var(--panel); border: 1px solid #2c3a63; border-radius: 10px; }
.sel-name { font-size: 20px; letter-spacing: 3px; color: #fff; }
.sel-desc { font-size: 12px; color: #9fb2e6; margin: 5px 0 10px; }
.sel-stats { display: flex; gap: 14px; justify-content: center; }
.stat { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #cdd6ff; }
.statbar { width: 60px; height: 8px; background: #0d1428; border-radius: 4px; overflow: hidden; }
.statbar i { display: block; height: 100%; background: linear-gradient(180deg, var(--gold), var(--gold2)); }
.sel-hint { font-size: 12px; color: #7d8db8; letter-spacing: 1px; }

/* ---------------- Banner ---------------- */
#banner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%; z-index: 15;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.banner-text {
  font-family: 'Black Ops One', sans-serif;
  font-size: 64px; letter-spacing: 8px; color: #fff;
  text-shadow: 0 5px 0 var(--red), 0 10px 0 rgba(0,0,0,0.7), 0 0 40px rgba(255,90,78,0.6);
  animation: bannerPop 1.4s ease-out;
}
@keyframes bannerPop {
  0% { transform: scale(2.6); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* ---------------- Pause / Game over ---------------- */
.pause-title { font-size: 40px; color: var(--gold); text-shadow: 0 3px 0 var(--gold2), 0 6px 0 rgba(0,0,0,0.6); }
.go-title { color: var(--red); text-shadow: 0 4px 0 #8f1d12, 0 8px 0 rgba(0,0,0,0.6); }
.go-sub { font-size: 14px; color: #cdd6ff; margin: 6px 0 16px; letter-spacing: 2px; }

/* ---------------- Help ---------------- */
#helpScreen { overflow-y: auto; }
.help-inner { text-align: center; padding: 16px 30px; max-width: 900px; margin: auto; }
.help-body { display: flex; gap: 18px; margin: 18px 0; text-align: left; }
.help-col { flex: 1; background: var(--panel); border: 1px solid #2c3a63; border-radius: 10px; padding: 14px; }
.help-col h3 { font-size: 13px; letter-spacing: 2px; color: var(--gold); margin: 4px 0 8px; }
.help-col h3:first-child { margin-top: 0; }
.help-col ul { list-style: none; }
.help-col li { font-size: 12px; color: #cdd6ff; margin-bottom: 7px; line-height: 1.45; }
.help-col li ul { margin-top: 6px; padding-left: 10px; }
.help-col li ul li { font-size: 11px; color: #b9c4ec; margin-bottom: 5px; }
.help-col b { color: #fff; }

/* keyboard vs touch hints */
body.t-active .kbd-only { display: none !important; }
body:not(.t-active) .touch-only { display: none !important; }

/* ---------------- Touch ---------------- */
#touch {
  position: absolute;
  top: 0; left: 0;
  width: var(--game-w);
  height: var(--game-h);
  z-index: 10; display: none; pointer-events: none;
}
body.t-active #touch { display: block; }
#touch.hide { display: none !important; }

/* virtual joystick (bottom-left). Purely decorative: touches land on the
   canvas below, which floats the stick to wherever the finger touches on the
   left side of the play area. */
.tjoystick {
  position: absolute;
  left: calc(4px + env(safe-area-inset-left));
  bottom: calc(4px + env(safe-area-inset-bottom));
  width: var(--joy); height: var(--joy);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; touch-action: none;
  transition: left 140ms ease-out, top 140ms ease-out, bottom 140ms ease-out;
}
.tjoystick.float { transition: none; }
.joy-base {
  width: var(--joy-base); height: var(--joy-base); border-radius: 50%;
  background: radial-gradient(circle, rgba(30,44,80,0.35) 0%, rgba(10,16,32,0.55) 70%);
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.5), 0 0 20px rgba(63,169,255,0.15);
  position: relative;
}
.joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: var(--joy-knob); height: var(--joy-knob);
  margin: calc(var(--joy-knob) * -0.5) 0 0 calc(var(--joy-knob) * -0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7aa5ff, #2b4d9e 70%);
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  will-change: transform;
}

.tbtn {
  border-radius: 12px; border: 2px solid rgba(255,255,255,0.4);
  background: rgba(20,30,55,0.55); color: #fff; font-size: 15px;
  font-family: inherit; display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  -webkit-user-select: none; user-select: none;
}

/* action buttons (bottom-right) */
.tbtns {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; gap: clamp(6px, 2vmin, 10px); pointer-events: auto;
}
.tbtn.act { width: var(--act); height: var(--act); border-radius: 50%; font-size: 15px; font-weight: bold; letter-spacing: 1px; }
.tbtn.act[data-t="attack"] { border-color: rgba(255,120,90,0.85); background: rgba(90,24,14,0.55); }
.tbtn.act[data-t="jump"] { border-color: rgba(120,255,170,0.7); background: rgba(14,80,40,0.5); }
.tbtn.act[data-t="defend"] { border-color: rgba(120,190,255,0.7); background: rgba(14,40,90,0.55); }
.tbtn.pressed { background: rgba(255,210,63,0.5); border-color: var(--gold); transform: scale(0.94); }

/* one-touch specials: 2x2 grid above the action buttons */
.tspecials {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(var(--act) + 24px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(2, var(--spc)); gap: clamp(4px, 1.4vmin, 6px);
  pointer-events: auto; justify-items: stretch;
}
.tbtn.special {
  width: var(--spc); height: var(--spc-h); font-size: clamp(9px, 2.6vmin, 11px);
  letter-spacing: 0.5px; line-height: 1.1;
  border-radius: 9px; background: rgba(42,22,88,0.6);
  border-color: rgba(190,150,255,0.65);
}
/* colour-coded by move type */
.tbtn.special.k-proj { border-color: rgba(120,200,255,0.8); background: rgba(16,48,96,0.62); }
.tbtn.special.k-dash { border-color: rgba(255,200,120,0.8); background: rgba(96,64,14,0.62); }
.tbtn.special.k-melee { border-color: rgba(255,120,110,0.8); background: rgba(100,24,18,0.62); }
.tbtn.special.k-shockwave { border-color: rgba(170,150,255,0.8); background: rgba(52,30,110,0.62); }
.tbtn.special.k-heal { border-color: rgba(120,255,170,0.8); background: rgba(14,84,44,0.62); }
.tbtn.special.off { opacity: 0.4; border-color: rgba(255,255,255,0.25); }

/* utility: pause / team switch */
.tutil {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  display: flex; gap: 8px; pointer-events: auto;
}
.tbtn.util { width: auto; min-width: clamp(50px, 15vmin, 64px); height: clamp(30px, 9vmin, 38px); font-size: 11px; padding: 0 12px; border-radius: 9px; }

/* ---------------- Portrait rotate prompt ----------------
   Shown on portrait phones only. A fixed, full-viewport card telling the
   player to turn the device sideways. Sits above everything (z 60) and
   swallows touches so the landscape UI underneath stays hidden until rotate. */
#rotateHint {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: radial-gradient(120% 130% at 50% 30%, #1b2540 0%, #0a0e1a 68%, #05070e 100%);
  align-items: center;
  justify-content: center;
}
.rh-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 4vmin, 24px);
  padding: 24px;
}
.rh-art {
  width: clamp(96px, 34vmin, 150px);
  height: clamp(96px, 34vmin, 150px);
  filter: drop-shadow(0 0 22px rgba(63,169,255,0.25));
}
.rh-dev { transform-origin: 60px 60px; animation: rhDev 1.7s ease-in-out infinite; }
@keyframes rhDev {
  0%   { transform: rotate(-12deg); }
  55%  { transform: rotate(90deg); }
  80%  { transform: rotate(90deg); }
  100% { transform: rotate(-12deg); }
}
.rh-title {
  font-family: 'Black Ops One', 'Russo One', sans-serif;
  font-size: clamp(22px, 8vmin, 40px);
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 3px 0 var(--red), 0 6px 0 rgba(0,0,0,0.5);
}
.rh-sub {
  max-width: 340px;
  font-size: clamp(12px, 4vmin, 15px);
  letter-spacing: 1px;
  line-height: 1.6;
  color: #9fb2e6;
}
@media (orientation: portrait) and (max-width: 520px) {
  body.t-active #rotateHint { display: flex; }
}

/* on touch devices move the health bars to the top so the controls stay clear */
body.t-active .hud-p1, body.t-active .hud-p2 { top: calc(6px + env(safe-area-inset-top)); bottom: auto; width: 34vw; }
body.t-active .hud-name { font-size: 11px; }
body.t-active .bar { height: 10px; }
body.t-active .bar.mp { height: 5px; }
body.t-active .hud-mid { top: calc(6px + env(safe-area-inset-top)); }
body.t-active .hud-mid #hudStage { font-size: 12px; letter-spacing: 3px; }
body.t-active #hudStage { font-size: 12px; }
/* SWAP/PAUSE sit under the SCORE line (hud-mid is ~27px). */
body.t-active .hud-p1 { width: min(28vw, 200px); }
body.t-active .hud-p2 { right: 16px; width: min(24vw, 168px); }
body.t-active .tutil {
  top: calc(36px + env(safe-area-inset-top));
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  gap: 6px;
}
body.t-active .tbtn.util { min-width: 52px; height: 26px; font-size: 10px; padding: 0 8px; }

@media (max-width: 760px) {
  .logo-l1 { font-size: 40px; }
  .logo-l2 { font-size: 28px; letter-spacing: 8px; }
  .mbtn { width: 260px; }
  .sel-grid { grid-template-columns: repeat(4, 1fr); }
  .menu-foot { font-size: 11px; line-height: 1.6; }
  .help-inner { padding: 12px 14px; }
  .help-body { flex-direction: column; gap: 10px; margin: 10px 0; }
  .help-col { padding: 12px 14px; }
  .help-col h3 { font-size: 15px; }
  .help-col li { font-size: 14px; line-height: 1.55; }
  .help-col li ul li { font-size: 13px; }
  .sel-title { font-size: 18px; }
  .sel-card { width: 70px; height: 82px; }
}

/* ---- Landscape phones (short viewport height): compress menus/select/help
   so they fit without scrolling wherever possible. Combined with the scroll
   fallback on .screen, nothing important is ever pushed off-screen. ---- */
@media (orientation: landscape) and (max-height: 520px) {
  .menu-inner { padding: 10px; }
  .logo { margin-bottom: 6px; }
  .logo-l1 {
    font-size: 28px; letter-spacing: 2px;
    text-shadow: 0 2px 0 var(--red), 0 4px 0 rgba(0,0,0,0.6);
  }
  .logo-l2 { font-size: 18px; letter-spacing: 6px; margin-top: -3px; }
  .logo-tag { margin-top: 2px; letter-spacing: 3px; font-size: 9px; }
  .mbtn { width: 240px; margin: 3px auto; padding: 6px 12px; font-size: 14px; letter-spacing: 1px; }
  .mbtn span { font-size: 9px; margin-top: 1px; }
  .settings-row { margin-top: 6px; gap: 5px; }
  .set-label { font-size: 9px; letter-spacing: 1px; }
  .sbtn { min-width: 56px; padding: 4px 7px; font-size: 11px; box-shadow: 0 2px 0 #0d1428; }
  .menu-foot { display: none; }
  .mbtn.small { width: 132px; margin: 4px 6px; font-size: 12px; padding: 6px; }
  .online-join { margin: 6px auto 8px; }
  #onlineCode { width: 110px; height: 34px; font-size: 16px; letter-spacing: 6px; }
  .online-code { font-size: 28px; letter-spacing: 10px; margin: 4px 0; }
  .dcode { height: 44px; font-size: 9px; margin: 5px auto; padding: 6px 8px; }
  #onlineDirectBox .go-sub { margin: 4px 0 6px; }

  .pause-title { font-size: 26px; }
  .go-sub { margin: 4px 0 8px; font-size: 12px; }

  .sel-inner { padding: 8px; }
  .sel-title { font-size: 14px; margin-bottom: 6px; letter-spacing: 3px; }
  .sel-grid { gap: 5px; margin-bottom: 6px; grid-template-columns: repeat(6, 1fr); }
  .sel-card { width: 58px; height: 66px; }
  .sel-card canvas { width: 44px; height: 50px; }
  .sel-card .nm { font-size: 8px; bottom: 1px; }
  .sel-card:hover { transform: none; }
  .sel-info { padding: 4px 10px; margin-bottom: 4px; }
  .sel-name { font-size: 13px; }
  .sel-desc { font-size: 10px; margin: 2px 0 4px; }
  .sel-stats { gap: 6px; }
  .stat { font-size: 8px; }
  .statbar { width: 38px; height: 6px; }
  .sel-hint { font-size: 10px; letter-spacing: 0.5px; margin-top: 2px; }
  #selectScreen .sel-inner > .mbtn.small {
    position: sticky; bottom: 0; z-index: 2;
    background: linear-gradient(180deg, #2b3a63, #18233f);
  }

  .help-inner { padding: 6px 12px; }
  .help-body { gap: 8px; margin: 6px 0; }
  .help-col { padding: 6px 10px; }
  .help-col h3 { font-size: 11px; margin: 2px 0 4px; letter-spacing: 1px; }
  .help-col li { font-size: 11px; margin-bottom: 2px; line-height: 1.3; }
  .help-col li ul { margin-top: 2px; padding-left: 8px; }
  .help-col li ul li { font-size: 10px; margin-bottom: 1px; }
}

/* ---- Short desktop stages (16:9 windows ~540-620px tall): shrink the main
   menu moderately so it fits without scrolling. Between the phone tier below
   (<=520px) and full desktop, the default menu is ~695px tall and overflows
   stages of 540-576px (e.g. a 960x540 preview). Lighter than the phone tier:
   buttons/logos stay desktop-proportional, just compacted. ---- */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 521px) and (max-height: 620px) {
  .menu-inner { padding: 12px 30px; }
  .logo { margin-bottom: 8px; }
  .logo-l1 { font-size: 40px; letter-spacing: 2px; text-shadow: 0 3px 0 var(--red), 0 6px 0 rgba(0,0,0,0.6), 0 0 20px rgba(255,90,78,0.5); }
  .logo-l2 { font-size: 28px; letter-spacing: 10px; margin-top: -4px; }
  .logo-tag { margin-top: 2px; font-size: 10px; }
  .mbtn { width: 300px; margin: 5px auto; padding: 8px 16px; font-size: 15px; }
  .mbtn span { font-size: 10px; margin-top: 1px; }
  .settings-row { margin-top: 8px; }
  .set-label { font-size: 11px; }
  .sbtn { min-width: 64px; padding: 6px 12px; font-size: 13px; }
  .menu-foot { margin-top: 10px; font-size: 11px; }

  /* select screen: 23 cards already wrap to three rows here, so tighten the
     cards and info panel to keep the whole picker inside a 540px stage */
  #selectScreen .sel-inner { padding: 8px 20px; }
  #selectScreen .sel-title { font-size: 16px; margin-bottom: 7px; letter-spacing: 3px; }
  #selectScreen .sel-grid { gap: 6px; margin-bottom: 7px; }
  #selectScreen .sel-card { width: 72px; height: 80px; }
  #selectScreen .sel-card canvas { width: 56px; height: 64px; }
  #selectScreen .sel-card .nm { font-size: 9px; }
  #selectScreen .sel-info { padding: 7px 14px; margin-bottom: 5px; }
  #selectScreen .sel-name { font-size: 16px; }
  #selectScreen .sel-desc { font-size: 11px; margin: 3px 0 6px; }
  #selectScreen .sel-hint { font-size: 11px; }
  .menu-links { margin-top: 8px; font-size: 11px; }
}

/* ---- HOW TO PLAY fits short 16:9 stages (landscape phones 844x390 /
   926x428 / 667x375 and short desktop previews) without scrolling ----
   Below 760px wide the general CSS stacks the three help columns, which on a
   375-428px-tall landscape stage balloons to ~680px. Here we force the columns
   to stay side-by-side and tighten the type so the whole sheet fits. */
@media (orientation: landscape) and (max-height: 560px) {
  #helpScreen .help-body { flex-direction: row; align-items: stretch; }
  #helpScreen .help-inner { padding: 5px 14px; }
  #helpScreen .pause-title { font-size: 20px; letter-spacing: 3px; margin: 0 0 4px; }
  #helpScreen .help-body { gap: 8px; margin: 4px 0 6px; }
  #helpScreen .help-col { padding: 6px 9px; }
  #helpScreen .help-col h3 { font-size: 10px; margin: 2px 0 4px; letter-spacing: 1px; }
  #helpScreen .help-col li { font-size: 10px; margin-bottom: 2px; line-height: 1.25; }
  #helpScreen .help-col li ul { margin-top: 3px; padding-left: 8px; }
  #helpScreen .help-col li ul li { font-size: 9.5px; margin-bottom: 1px; }
}
@media (orientation: landscape) and (max-width: 760px) and (max-height: 560px) {
  #helpScreen .help-col { padding: 5px 8px; }
  #helpScreen .help-col h3 { font-size: 9px; margin: 1px 0 3px; }
  #helpScreen .help-col li { font-size: 9px; line-height: 1.2; }
  #helpScreen .help-col li ul { margin-top: 2px; }
  #helpScreen .help-col li ul li { font-size: 8.5px; }
  #helpScreen .help-inner .mbtn.small { width: 120px; padding: 5px 10px; font-size: 11px; }
}