/* Pocket Subs - deep water, sonar green, and hardware-panel chrome. */

:root {
  --abyss: #030d17;
  --deep: #071a2b;
  --panel: #0b2437;
  --panel-2: #103049;
  --edge: #1b4763;
  --edge-soft: #14384f;

  --ink: #e8f4ff;
  --ink-dim: #8ab0c9;
  --ink-faint: #5c819a;

  --sonar: #3ce6a6;
  --sonar-dim: #1d8f68;
  --amber: #ffb545;
  --crimson: #ff5c6c;
  --azure: #4aa8ff;

  --p1: #4aa8ff;
  --p2: #ff8a4a;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* `display: grid` on .modes would otherwise beat the browser default for
   [hidden], leaving the play buttons visible to signed-out visitors. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(1200px 700px at 50% -10%, #0d3550 0%, transparent 62%),
    radial-gradient(800px 500px at 85% 100%, #06212f 0%, transparent 60%),
    var(--abyss);
  /* Kills the double-tap-to-zoom delay. Fine-grained aiming on the board is a
     drag gesture, and a 300ms wait before every tap registers made the whole
     thing feel broken on a phone. */
  touch-action: manipulation;
}

.icon-btn { font-size: 15px; line-height: 1; padding: 7px 9px; }

button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--sonar); }

/* ---- Shell ------------------------------------------------------------ */

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px 48px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 19px;
  text-decoration: none;
  color: var(--ink);
}

.brand svg { width: 30px; height: 30px; flex: none; }
.brand span i { color: var(--sonar); font-style: normal; }

.topbar-spacer { flex: 1; }

.nav-link {
  background: none;
  border: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-weight: 500;
  font-size: 14px;
}
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

.account { display: flex; align-items: center; gap: 10px; }
.account img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge); }
.account .who { font-size: 14px; font-weight: 600; }

/* ---- Cards and panels ------------------------------------------------- */

.panel {
  background: linear-gradient(180deg, var(--panel) 0%, var(--deep) 100%);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero {
  text-align: center;
  padding: 44px 24px 36px;
  margin-bottom: 26px;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 6vw, 54px);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.hero h1 i { color: var(--sonar); font-style: normal; }

.hero p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.6;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
}
.hero-stats b { color: var(--sonar); font-weight: 600; }

.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.mode {
  position: relative;
  text-align: left;
  padding: 20px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--deep) 100%);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.mode:hover:not(:disabled) {
  border-color: var(--sonar-dim);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.mode:disabled { opacity: 0.42; cursor: not-allowed; }
.mode h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.mode p { margin: 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.mode .glyph { font-size: 22px; margin-bottom: 12px; display: block; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--edge-soft);
}
.panel-head h2 { margin: 0; font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-dim); }
.panel-body { padding: 16px 18px; }

table.board { width: 100%; border-collapse: collapse; font-size: 14px; }
table.board th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 0 8px 9px;
}
table.board td { padding: 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
table.board td.num { font-family: var(--mono); text-align: right; }
table.board .rank { color: var(--ink-faint); font-family: var(--mono); width: 26px; }
table.board .who { display: flex; align-items: center; gap: 8px; }
table.board .who img { width: 22px; height: 22px; border-radius: 50%; }

.empty { color: var(--ink-faint); font-size: 14px; padding: 12px 0; text-align: center; }

/* ---- Buttons ---------------------------------------------------------- */

.btn {
  border: 1px solid var(--edge);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover:not(:disabled) { background: #16405e; border-color: var(--sonar-dim); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, #3ce6a6 0%, #16b47c 100%);
  border-color: #0f8f62;
  color: #032018;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #55f0b6 0%, #1cc98b 100%); }

.btn-danger { background: #3a1620; border-color: #6b2434; color: #ffb3bb; }
.btn-danger:hover:not(:disabled) { background: #4d1d2a; border-color: var(--crimson); }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Game screen ------------------------------------------------------ */

.screen { display: none; }
.screen.on { display: block; }

.arena {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--edge-soft);
  background: #041320;
  box-shadow: var(--shadow);
  /* Cap the board by its WIDTH rather than its height. The canvas keeps
     width:100%/height:auto, so its bounding box stays exactly the drawing
     surface - letterboxing it with object-fit would silently break the
     pointer-to-world mapping that aiming depends on. */
  max-width: min(100%, calc((100vh - 330px) * 16 / 9));
  margin: 0 auto;
}
@media (max-width: 860px) {
  .arena { max-width: 100%; }
}

#board { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }

.scorebar {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 13, 23, 0.85) 0%, transparent 100%);
}

.side {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.side.right { flex-direction: row-reverse; text-align: right; }

.side .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--p1);
  background: var(--panel-2);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; flex: none;
  overflow: hidden;
}
.side.right .avatar { border-color: var(--p2); }
.side .avatar img { width: 100%; height: 100%; object-fit: cover; }

.side .meta { min-width: 0; flex: 1; }
.side .name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side.active .name { color: var(--sonar); }

.hp {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 4px;
}
.hp i { display: block; height: 100%; background: var(--p1); transition: width 0.4s ease; }
.side.right .hp i { background: var(--p2); float: right; }
.hp.low i { background: var(--crimson); }

.side .score {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex: none;
  min-width: 46px;
  text-align: center;
}

.roundbar {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(4, 18, 30, 0.86);
  border: 1px solid var(--edge-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  white-space: nowrap;
  pointer-events: none;
}
.roundbar b { color: var(--ink); font-weight: 600; }
.roundbar .cur { color: var(--sonar); }

.banner {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  padding: 16px 30px;
  border-radius: var(--radius);
  background: rgba(4, 18, 30, 0.93);
  border: 1px solid var(--edge);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  box-shadow: var(--shadow);
}
.banner.on { opacity: 1; }
.banner h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.banner p { margin: 0; color: var(--ink-dim); font-size: 13.5px; }

.turnflag {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(4, 18, 30, 0.9);
  border: 1px solid var(--edge-soft);
  pointer-events: none;
  white-space: nowrap;
}

/* ---- Controls --------------------------------------------------------- */

.controls {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 860px) { .controls { grid-template-columns: 1fr; } }

.weapons {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.weapon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 7px;
  max-height: 218px;
  overflow-y: auto;
  padding-right: 3px;
}

.wpn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge-soft);
  background: rgba(255, 255, 255, 0.026);
  text-align: left;
  transition: border-color 0.14s, background 0.14s;
  min-width: 0;
}
.wpn:hover:not(:disabled) { border-color: var(--sonar-dim); background: rgba(60, 230, 166, 0.07); }
.wpn.sel { border-color: var(--sonar); background: rgba(60, 230, 166, 0.13); }
.wpn:disabled { opacity: 0.3; cursor: not-allowed; }

.wpn .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.wpn .nm {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpn .ct { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); flex: none; }

.wpn-desc {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.5;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--edge-soft);
}
.wpn-desc b { color: var(--ink); }

.firing { padding: 12px; display: flex; flex-direction: column; gap: 11px; }

.dial-row { display: flex; gap: 12px; align-items: center; }

.dial {
  width: 92px; height: 92px; flex: none;
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #10344c 0%, #061a29 70%);
  border: 1px solid var(--edge);
  touch-action: none;
  cursor: grab;
}
.dial canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }

.readouts { flex: 1; display: flex; flex-direction: column; gap: 9px; }

.readout { display: flex; align-items: baseline; gap: 8px; }
.readout label {
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint); width: 52px; flex: none; font-weight: 600;
}
.readout output { font-family: var(--mono); font-size: 17px; font-weight: 600; min-width: 58px; }
.readout .bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.readout .bar i { display: block; height: 100%; background: var(--sonar); }
.readout .bar.thrust i { background: var(--azure); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; margin-top: -6px;
  border-radius: 50%; background: var(--sonar);
  border: 2px solid #04202f; cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--sonar); border: 2px solid #04202f; cursor: pointer;
}

.dial-row .readouts { min-width: 0; }

.thrusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 104px; flex: none; }
.thrusters button {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge-soft);
  background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  touch-action: none;
  user-select: none;
}
.thrusters button:hover:not(:disabled) { background: rgba(74, 168, 255, 0.16); border-color: var(--azure); }
.thrusters button:disabled { opacity: 0.25; cursor: not-allowed; }
.thrusters .blank { border: 0; background: none; pointer-events: none; }

.fire {
  width: 100%;
  padding: 13px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hint { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
kbd {
  font-family: var(--mono); font-size: 11px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--edge-soft);
}

/* ---- Dialogs ---------------------------------------------------------- */

dialog {
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel) 0%, var(--deep) 100%);
  color: var(--ink);
  padding: 0;
  max-width: 620px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(2, 8, 14, 0.76); backdrop-filter: blur(3px); }
dialog .panel-body { max-height: 66vh; overflow-y: auto; }
dialog h3 { margin: 0 0 6px; font-size: 17px; }

.wpn-doc { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.wpn-doc:first-child { border-top: 0; }
.wpn-doc h4 { margin: 0 0 3px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.wpn-doc p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
.wpn-doc .tag {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.07); color: var(--ink-faint); font-weight: 500;
}

.field { display: flex; gap: 8px; align-items: center; }
.field input[type="text"] {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--ink);
  font: inherit;
}
.field input:focus { outline: none; border-color: var(--sonar-dim); }

.code-display {
  font-family: var(--mono);
  font-size: 40px;
  letter-spacing: 0.24em;
  text-align: center;
  color: var(--sonar);
  padding: 14px 0 6px;
  text-indent: 0.24em;
}

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--edge);
  font-size: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
  max-width: min(420px, calc(100vw - 32px));
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--crimson); }

.muted { color: var(--ink-dim); }
.tiny { font-size: 12px; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hidden { display: none !important; }

.signin-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.gsi-holder { min-height: 44px; }

.dot-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sonar); margin-right: 6px;
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

.spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--sonar);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  display: inline-block;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 700px) {
  .shell { padding: 0 12px 32px; }

  /* The nav wrapped mid-word and pushed "Sign out" off the screen. Giving it
     its own row keeps every control reachable instead of clipped. */
  .topbar { flex-wrap: wrap; gap: 2px; padding: 12px 0 12px; }
  .brand { font-size: 17px; flex: 1 0 100%; margin-bottom: 4px; }
  .brand svg { width: 25px; height: 25px; }
  .topbar-spacer { display: none; }
  .nav-link { padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
  /* Two links come off the bar so everything else fits one row instead of
     three. Both stay reachable: the arsenal from inside How to play, and your
     record from the panel on the home screen. */
  .nav-link[data-open="arsenal-dialog"], #nav-stats { display: none; }
  .account { gap: 2px; min-width: 0; }
  /* Kept visible: the callsign is the control that opens the rename dialog,
     so hiding it would leave no way to change it on a phone. */
  .account .who {
    font-size: 12.5px; padding: 6px 6px;
    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .account img { width: 26px; height: 26px; }

  /* The round strip moves below the scores instead of competing with them for
     the middle of a 375px board, which is what was squeezing the names out. */
  .scorebar { padding: 7px 8px 0; }
  .scorebar > div[style] { display: none; }
  .side .score { font-size: 16px; min-width: 30px; }
  .side .avatar { width: 26px; height: 26px; font-size: 12px; }
  .side .name { font-size: 11px; }
  .roundbar {
    top: auto; bottom: 8px; left: 8px; transform: none;
    font-size: 10px; padding: 4px 9px; gap: 8px;
  }
  .turnflag { left: auto; right: 8px; bottom: 8px; transform: none; font-size: 11.5px; padding: 5px 11px; }

  /*
   * The board stays put.
   *
   * On a phone the board and the controls cannot share a screen, and the whole
   * game is "adjust something, look at the board". Pinning the board to the top
   * of the viewport means the controls scroll underneath it and the player
   * never loses sight of what they are aiming at. Full-bleed, because forty
   * pixels of gutter is a lot of board on a 375px screen.
   */
  .arena {
    position: sticky;
    top: 0;
    z-index: 20;
    max-width: none;
    margin: 0 -12px;
    border-radius: 0 0 var(--radius) var(--radius);
    border-left: 0;
    border-right: 0;
  }

  .controls { gap: 8px; margin-top: 8px; }
  .weapons, .firing { padding: 10px; gap: 8px; }
  .weapon-list { grid-template-columns: 1fr 1fr; max-height: 168px; gap: 6px; }
  .wpn { padding: 10px 9px; min-height: 44px; }
  .wpn .nm { font-size: 12px; }
  .wpn-desc { min-height: 0; font-size: 12px; }
  .dial { width: 84px; height: 84px; }
  .readout output { font-size: 16px; min-width: 48px; }
  .hint { display: none; }

  /* Thumb-sized. Anything under 44px gets mis-tapped, and these are held down. */
  .thrusters { width: 132px; gap: 6px; }
  .thrusters button { font-size: 17px; }
  input[type="range"] { height: 34px; }
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; }
  input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }

  /*
   * Fire gets its own bar along the bottom.
   *
   * Aiming happens by dragging the board, so a Fire button parked at the end of
   * a scrolling panel would mean scrolling down to shoot and back up to see
   * what happened. The first attempt at fixing that was a floating corner
   * button, but a floating button sits on top of whatever happens to be
   * scrolled under it - which turned out to be the power slider. A full-width
   * opaque bar with matching page padding can never cover anything, because the
   * page reserves the space it occupies.
   */
  .fire {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 15px 16px calc(15px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    z-index: 40;
    box-shadow: 0 -8px 24px rgba(2, 8, 14, 0.7);
  }
  #screen-game { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

  .code-display { font-size: 30px; }
  .hero { padding: 30px 16px 26px; }
  .hero-stats { flex-wrap: wrap; gap: 10px 18px; }
  .modes { gap: 10px; }
  .mode { padding: 16px; }
  dialog .panel-body { max-height: 72vh; }
}

/*
 * Landscape phone: the board is 16:9, so turning the device sideways is the
 * best way to play it. Height is the scarce resource there, not width, so the
 * controls move alongside the board and the whole game fits one screen with no
 * scrolling and no floating button.
 */
@media (orientation: landscape) and (max-height: 560px) {
  .topbar { padding: 6px 0; }
  .brand { flex: 0 0 auto; margin-bottom: 0; }

  #screen-game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 8px;
    align-items: start;
    padding-bottom: 0;
  }
  .arena {
    /* `relative`, not `static`: the scoreboard, the round strip and the turn
       flag are absolutely positioned against the arena, and taking away its
       containing block sends all three to the top of the page on top of the
       nav. */
    position: relative;
    margin: 0;
    border-radius: var(--radius);
    border-left: 1px solid var(--edge-soft);
    border-right: 1px solid var(--edge-soft);
    max-width: calc((100vh - 84px) * 16 / 9);
  }

  /* The compact chrome lives in the portrait query, which a 844px-wide phone in
     landscape does not match - so the parts that are about height, not width,
     are repeated here. */
  .topbar { flex-wrap: nowrap; gap: 2px; }
  .brand { font-size: 16px; }
  .brand svg { width: 22px; height: 22px; }
  .nav-link { padding: 5px 8px; font-size: 12.5px; white-space: nowrap; }
  .account .who { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scorebar { padding: 7px 8px 0; }
  .scorebar > div[style] { width: 150px; }
  .side .avatar { width: 26px; height: 26px; font-size: 12px; }
  .side .score { font-size: 15px; min-width: 28px; }
  .roundbar { font-size: 10px; padding: 3px 9px; gap: 8px; }
  .turnflag { font-size: 11.5px; padding: 4px 11px; bottom: 8px; }
  .hint { display: none; }
  .weapons, .firing { padding: 9px; gap: 7px; }
  .dial { width: 68px; height: 68px; }
  .thrusters { width: 108px; }
  /*
   * The controls column is a fixed-height flex stack, not a scrolling block.
   *
   * The firing panel - and Fire with it - is pinned at the bottom and the
   * weapon list absorbs whatever height is left over. Scrolling the whole
   * column instead would push Fire off the bottom of a 390px-tall screen, which
   * is the one control that always has to be there.
   */
  .shell { padding-bottom: 8px; }
  .controls {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    margin-top: 0;
    gap: 6px;
    height: calc(100vh - 48px);
    overflow: hidden;
  }
  .weapons { flex: 1 1 auto; min-height: 64px; overflow: hidden; }
  .weapon-list { max-height: none; flex: 1 1 auto; min-height: 0; }
  .firing { flex: 0 0 auto; }
  .wpn-desc { display: none; }
  .fire { position: static; width: 100%; padding: 11px; box-shadow: none; border-radius: var(--radius-sm); }
  .toast { bottom: 12px; }
}