/*
  Backyard Brawl — the yard shell.
  A sunny backyard: blue sky, a plank fence, cut grass, and a carved wooden sign.
  Every panel is either parchment (paper you can write on) or wood (a board you can hang).
*/

:root {
  color-scheme: light;
  font-family: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  background: #4fa8e8;
  color: #2a1d10;

  --sky: #4fa8e8;
  --sky-low: #c9ecff;
  --grass: #61ab52;
  --grass-deep: #4f9143;
  --dirt: #cda671;

  --wood: #8a5a2b;
  --wood-dark: #4a2e15;
  --wood-hi: #b07c42;
  --oak: #c99a54;
  --oak-deep: #b4823e;
  --walnut: #6b4226;
  --walnut-deep: #4a2c18;
  --ply: #e4c88e;
  --rope: #6b4a2a;

  --parchment: #ede0c4;
  --parchment-bright: #f3e9cf;
  --parchment-aged: #dccba0;
  --ink: #2a1d10;
  --ink-soft: #3a2e1c;
  --ink-muted: #8a7550;

  --gold: #f5c542;
  --gold-deep: #d9a32a;
  --gold-hot: #ffc21a;
  --teal: #2f8b83;
  --teal-hi: #3aa197;
  --teal-deep: #236c66;
  --stamp: #c8321f;
  --p1: #2f6fd2;
  --p1-glow: #4da6ff;
  --cpu: #d23b2f;
  --cpu-glow: #ff7a6b;
  --placed: #5fc93a;

  --font-display: "Lilita One", "Arial Rounded MT Bold", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-marker: "Chalkboard SE", "Comic Sans MS", "Marker Felt", "Segoe Print", cursive;

  --r-hewn-sm: 10px 12px 9px 11px;
  --r-hewn-md: 16px 20px 15px 19px;
  --r-hewn-lg: 22px 26px 20px 24px;

  --shadow-soft: 0 2px 4px rgba(0, 0, 0, .25);
  --shadow-drop: 0 6px 14px rgba(0, 0, 0, .40);
  --shadow-panel: 0 8px 16px rgba(0, 0, 0, .45);
  --shadow-lift: 0 10px 22px rgba(0, 0, 0, .50);
  --inset-well: inset 0 2px 5px rgba(42, 29, 16, .35);
  --inset-pressed: inset 0 3px 6px rgba(42, 29, 16, .50);
  --carve: 0 -1px 0 rgba(0, 0, 0, .45), 0 2px 3px rgba(0, 0, 0, .40), 0 1px 0 rgba(255, 255, 255, .14);

  --grain-wood: repeating-linear-gradient(92deg, rgba(74, 46, 21, .14) 0 2px, transparent 2px 9px, rgba(176, 124, 66, .10) 9px 11px, transparent 11px 21px);
  --grain-paper: repeating-linear-gradient(0deg, rgba(58, 46, 28, .035) 0 1px, transparent 1px 3px);
  --ease-pop: cubic-bezier(.22, 1.1, .3, 1);
  --ease-out: cubic-bezier(.2, .8, .3, 1);
}

* { box-sizing: border-box; }

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-low) 42%, var(--grass) 58%, var(--grass-deep) 72%, var(--dirt) 100%);
}

button,
select { font: inherit; }

button { cursor: pointer; }

button:focus-visible,
select:focus-visible,
canvas:focus-visible {
  outline: 3px solid var(--gold-hot);
  outline-offset: 3px;
}

::selection { color: var(--ink); background: var(--gold); }

.game-app {
  display: grid;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
}

.game-frame {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  contain: size layout paint;
  background: #0b1a2a;
}

canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}

/* ---------- The yard: sky, fence, grass ---------- */

.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: stretch;
  overflow: auto;
  padding: clamp(14px, 2.5vw, 30px);
  scrollbar-width: none;
  -ms-overflow-style: none;
  background:
    radial-gradient(circle at 84% 4%, rgba(255, 236, 170, .55), rgba(255, 236, 170, 0) 18rem),
    linear-gradient(180deg, #3d97e2 0%, #6fbbf0 24%, #a9dcfa 40%, #d6f0ff 52%, #d6f0ff 100%);
  transition: opacity .24s ease, visibility .24s ease;
}

.game-overlay::-webkit-scrollbar { display: none; }

.game-overlay::before,
.game-overlay::after {
  position: fixed;
  right: 0;
  left: 0;
  pointer-events: none;
  content: "";
}

/* Plank fence with rounded caps. */
.game-overlay::before {
  top: 34%;
  bottom: 17%;
  background:
    radial-gradient(circle at 24px 24px, #c58f52 22px, transparent 23px) 0 0 / 48px 48px repeat-x,
    repeating-linear-gradient(90deg, rgba(58, 34, 14, .62) 0 2px, transparent 2px 48px) 0 24px / auto calc(100% - 24px) repeat-x,
    repeating-linear-gradient(90deg, rgba(255, 228, 176, .10) 0 1px, transparent 1px 8px, rgba(74, 46, 21, .13) 8px 10px, transparent 10px 19px) 0 24px / auto calc(100% - 24px) repeat-x,
    linear-gradient(180deg, #c58f52 0%, #b8823f 38%, #9c6a34 100%) 0 24px / auto calc(100% - 24px) repeat-x;
  filter: drop-shadow(0 -6px 10px rgba(30, 18, 5, .18));
}

/* Cut grass with a tufted edge and a dirt strip. */
.game-overlay::after {
  bottom: 0;
  height: calc(17% + 12px);
  background:
    radial-gradient(ellipse at 14px 12px, #79c862 12px, transparent 13px) 0 0 / 28px 24px repeat-x,
    repeating-linear-gradient(90deg, rgba(20, 60, 10, .07) 0 3px, transparent 3px 9px) 0 12px / auto calc(100% - 12px) repeat-x,
    linear-gradient(180deg, #79c862 0%, #61ab52 30%, #4f9143 76%, #b48d5a 100%) 0 12px / auto calc(100% - 12px) repeat-x;
}

/* The pointer is dead weight over a live match and hovers on top of the fighters. */
body.match-live .game-frame,
body.match-live #game { cursor: none; }

.game-overlay.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Attract mode: a CPU-vs-CPU match runs behind the selector so the canvas is
 * never dead while nobody has played yet. The overlay itself stays opaque and
 * captures all input; this only dims and disarms the canvas underneath it. */
#game.attract {
  opacity: 0.55;
  pointer-events: none;
}

.match-menu {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1420px, 100%);
  min-height: min(100%, 900px);
  margin: auto;
}

/* ---------- Hanging sign: BACKYARD BRAWL ---------- */

/* Direction B (Main.dc.html): the header is two zones only -- the sign and
   the scoreboard toggle -- there is no center plank any more. */
.menu-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0 clamp(4px, 1vw, 14px) clamp(12px, 1.7vw, 22px);
}

/* The wordmark and its handwritten tag read as one hung group. */
.menu-brand {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 16px);
  min-width: 0;
}

/* Mode and runtime state are pinned tags on the fence, not a strip inside the board. */
.menu-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

.menu-meta .opponent-mode-hint { align-self: flex-end; }

.menu-sign {
  position: relative;
  display: inline-block;
  padding: 9px 18px 10px 14px;
  border: 5px solid var(--oak);
  border-radius: var(--r-hewn-md);
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 21px),
    var(--grain-wood),
    linear-gradient(180deg, #7d4f2d, #6b4226 58%, #5a3620);
  box-shadow: inset 0 0 0 2px var(--wood-dark), inset 0 1px 0 rgba(255, 230, 180, .16), var(--shadow-lift);
}

.menu-sign::before,
.menu-sign::after {
  position: absolute;
  top: -44px;
  width: 4px;
  height: 44px;
  background: linear-gradient(90deg, #5a3d20, #8a6339 50%, #5a3d20);
  border-radius: 2px;
  content: "";
}

.menu-sign::before { left: 14%; transform: rotate(3deg); }
.menu-sign::after { right: 14%; transform: rotate(-3deg); }

h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .9;
  text-transform: uppercase;
}

h1 span {
  position: relative;
  padding: .10em .30em .12em;
  border: 2px solid var(--wood-dark);
  border-radius: 6px 8px 5px 7px;
  color: var(--parchment-bright);
  background: linear-gradient(180deg, #3aa197, #2f8b83 55%, #276f69);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 rgba(28, 16, 4, .55);
  text-shadow: var(--carve);
}

h1 span::before,
h1 span::after {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9d9d9, #6e6e6e 70%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  transform: translateY(-50%);
  content: "";
}

h1 span::before { left: 4px; }
h1 span::after { right: 4px; }

h1 strong {
  color: var(--gold);
  font-weight: inherit;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45), 0 3px 0 #4a2e15, 0 5px 6px rgba(0, 0, 0, .40);
}

.menu-subtitle {
  position: relative;
  margin: 0 0 clamp(4px, .7vw, 9px);
  padding: 7px 14px 6px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: var(--shadow-soft);
  font-family: var(--font-marker);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 700;
  line-height: 1;
  transform: rotate(-1.4deg);
}

/* ---------- Direction B (Main.dc.html): one big figure, one calm strip ----------
   No giant parchment card wraps the whole screen any more. The sign and the
   scoreboard toggle are the header; below that a three-column row stands your
   designer big on the grass at left, the opponent smaller at right, and one
   plain column between them (name, read, SIGNATURE plaque, a small parchment
   roster strip, the yard line, and START). See docs/DESIGN.md "Game screen". */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%234a2e15' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

/* The real <select id="fighter-one|fighter-two|stage"> elements stay in the
   DOM, fully functional -- this is what web/scripts/browser_journey.mjs and
   visual_gauntlet.mjs read and change -- just visually hidden the standard
   accessible way, not display: none, which would break focus and change
   events on some engines. */
select.sr-only,
.menu-field.sr-only select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.roster-heading { display: block; }

.match-menu { display: block; width: min(1360px, 100%); margin: auto; }

/* ---------- Opponent mode: the header's VS CPU / ONLINE scoreboard toggle ---------- */

.opponent-mode {
  display: grid;
  /* Two chips only: local two-player is not offered (the user's call: online and
     one-vs-CPU are the product). The "local" mode code path stays for the harnesses. */
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 3px;
  border: 2px dashed rgba(200, 50, 31, .65);
  border-radius: 6px;
  background: rgba(200, 50, 31, .06);
  transform: rotate(-1.2deg);
}

.opponent-mode-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color .14s var(--ease-out), background .14s var(--ease-out), color .14s var(--ease-out), transform .14s var(--ease-pop);
}

.opponent-mode-chip strong { font-family: var(--font-display); font-size: 11px; font-weight: 400; letter-spacing: .06em; }
.opponent-mode-chip:hover { background: rgba(245, 197, 66, .14); transform: translateY(-1px); }
.opponent-mode-chip:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.opponent-mode-chip[aria-checked="true"] { border-color: var(--stamp); background: rgba(200, 50, 31, .12); color: var(--stamp); }
.opponent-mode-chip[data-mode="local"][aria-checked="true"] { border-color: var(--p1); background: rgba(47, 111, 210, .10); color: var(--p1); }
.opponent-mode-chip[data-mode="online"][aria-checked="true"] { border-color: var(--gold-deep); background: rgba(245, 197, 66, .16); color: var(--ink); }

/* The scoreboard toggle: a wood plaque in the header, top-right. */
.menu-meta > .opponent-mode {
  gap: 3px;
  padding: 4px;
  border: 3px solid var(--wood-dark);
  border-radius: 12px;
  background: var(--wood-dark);
  box-shadow: var(--shadow-drop);
  transform: none;
}

.menu-meta > .opponent-mode .opponent-mode-chip {
  padding: 8px 16px;
  border-radius: 9px;
  color: var(--ink-muted);
  background: var(--parchment-bright);
  font-family: var(--font-display);
}

.menu-meta > .opponent-mode .opponent-mode-chip[aria-checked="true"] {
  border-color: transparent;
  color: var(--parchment-bright);
  background: linear-gradient(180deg, #3aa197, #2f8b83 55%, #276f69);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.opponent-mode-hint {
  display: block;
  margin-top: 3px;
  color: var(--ink-muted);
  font-family: var(--font-marker);
  font-size: 9px;
  text-align: center;
}

/* web/yard-presence.js's "N designers in the yard" line, shown under the
   scoreboard toggle once count() >= 2. */
.yard-presence-tag {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-family: var(--font-marker);
  font-size: 11px;
  text-align: right;
}
.yard-presence-tag[hidden] { display: none !important; }

/* Ladder (5.3): a small toggle under VS CPU, not a third mode chip -- reads
   "LADDER" off, "LADDER · RUNG N/5" while on and driving web/ladder.js. */
.ladder-tag {
  margin: 0;
  padding: 6px 10px;
  min-height: 32px;
  border: 1px solid var(--wood-dark);
  border-radius: 6px;
  background: var(--parchment-bright);
  color: var(--ink);
  cursor: pointer;
  font: 800 11px/1.2 var(--font-body);
  letter-spacing: .04em;
}
.ladder-tag[hidden] { display: none !important; }
.ladder-tag[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--gold-deep);
  background: rgba(245, 197, 66, .16);
  color: var(--ink);
}

/* CPU level (docs/NEXT_LEVEL_PLAN.md "Wire" item 1): a small stepper next to
   the ladder tag, matching its dashed-plaque register. */
.cpu-level-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.cpu-level-stepper[hidden], .cpu-level-rung-note[hidden] { display: none !important; }
.cpu-level-stepper button {
  flex: 0 0 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--wood-dark);
  border-radius: 6px;
  background: var(--parchment-bright);
  color: var(--ink);
  font: 900 18px/1 var(--font-body);
  cursor: pointer;
}
.cpu-level-stepper button:disabled { opacity: .4; cursor: default; }
#cpu-level-tag { color: var(--ink); font: 900 11px/1.3 var(--font-body); text-align: center; }
.cpu-level-rung-note { color: var(--ink-soft); font: 800 11px/1.4 var(--font-body); }

/* PLAY ONLINE: kept for the harnesses, not shown on this screen. */
.play-online-link {
  position: relative;
  padding: 7px 14px 6px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--parchment-bright);
  background: var(--grain-paper), linear-gradient(180deg, #3aa79c, var(--teal));
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- The board row: your designer, the calm center column, the opponent ---------- */

.board-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(520px, 760px) minmax(160px, 240px);
  justify-content: center;
  align-items: stretch;
  gap: clamp(12px, 1.6vw, 24px);
  width: 100%;
  padding: clamp(6px, 1.4vw, 18px) 0 clamp(18px, 3vh, 40px);
}

/* ---------- The two figures: standing on the grass, no card around them ---------- */

.board-figure {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.figure-tag {
  margin-bottom: -16px;
  z-index: 3;
  padding: 6px 16px;
  border: 3px solid var(--wood-dark);
  border-radius: 10px;
  color: #fff;
  background: var(--p1);
  box-shadow: 0 4px 0 var(--wood-dark);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 400;
  letter-spacing: .1em;
  white-space: nowrap;
  transform: rotate(-3deg);
}

.figure-tag-cpu {
  background: var(--cpu);
  font-size: clamp(11px, 1.05vw, 15px);
  transform: rotate(3deg);
}
/* Never a CPU tag online -- the opponent is whoever connects. */
body.online-mode .figure-tag-cpu { display: none; }

.figure-portrait {
  display: block;
  height: min(400px, 52vh);
  width: auto;
}

.figure-portrait img {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 16px 14px rgba(20, 40, 10, .45));
}

.figure-portrait-cpu {
  height: min(400px, 52vh);
}
.figure-portrait-cpu img { transform: scaleX(-1); filter: drop-shadow(0 12px 10px rgba(20, 40, 10, .4)); }

.figure-portrait-button {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
body.online-mode .figure-portrait-button { cursor: default; }

.figure-shadow {
  width: min(240px, 44%);
  height: 26px;
  margin-top: -14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 70%);
}
.figure-shadow-cpu { width: min(180px, 36%); height: 22px; margin-top: -12px; }

/* The "Tommy Geoco · pick opponent" chip (CPU mode) / connection status (online). */
.opponent-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 10px;
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(243, 233, 207, .92);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
#fighter-two-name { font-weight: 900; }
.opponent-caption-sep { color: var(--ink-muted); }
.opponent-caption-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--oak-deep);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.opponent-caption-link:hover,
.opponent-caption-link:focus-visible { color: var(--stamp); outline: none; }
.opponent-caption-note { color: var(--ink-soft); }

.board-figure-cpu .online-panel { margin-top: 10px; width: min(260px, 100%); }

/* ---------- The center column ---------- */

.board-center {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  min-width: 0;
  padding-top: clamp(4px, 1vh, 14px);
}

.board-kicker-block { display: flex; flex-direction: column; gap: 4px; }
.board-kicker {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.board-name {
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .95;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .5);
  text-transform: uppercase;
  white-space: nowrap;
}
.board-read { color: var(--ink-soft); font-size: clamp(13px, 1.2vw, 17px); font-weight: 800; }

/* One SIGNATURE plaque: yours. The opponent's read/signature/stat bars were
   the v3 "designer sheet" and are gone from this screen entirely. */
.signature-plaque {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  background: var(--parchment-bright);
  box-shadow: 0 2px 0 var(--wood-dark);
}
.signature-icon { display: grid; flex: none; width: 22px; height: 22px; place-items: center; color: var(--ink); }
.signature-icon svg { width: 100%; height: 100%; }
.signature-copy { display: grid; min-width: 0; gap: 1px; }
.signature-copy small { color: var(--ink-muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.signature-copy b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ---------- The roster strip: a small parchment box, seven tiles ---------- */

.roster-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  border: 3px solid var(--wood-dark);
  border-radius: var(--r-hewn-lg);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.roster-box-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.roster-box-kicker { color: var(--ink-muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; }

/* A small YOU / OPPONENT picking toggle: which side the next tile click sets.
   CPU mode only -- online, the second seat is whoever connects. */
.picking-toggle {
  display: flex;
  padding: 3px;
  border: 2px solid var(--wood-dark);
  border-radius: 9px;
  background: var(--wood-dark);
}
.picking-toggle-chip {
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  color: var(--ink-muted);
  background: var(--parchment-bright);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
}
.picking-toggle-chip[data-picking="p1"] { border-radius: 6px 3px 3px 6px; }
.picking-toggle-chip[data-picking="cpu"] { border-radius: 3px 6px 6px 3px; }
.picking-toggle-chip[aria-checked="true"] { color: #fff; background: var(--p1); }
.picking-toggle-chip[data-picking="cpu"][aria-checked="true"] { background: var(--cpu); }
.picking-toggle-chip:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 1px; }
.picking-toggle[hidden] { display: none; }

.roster-grid {
  --roster-cols: 7;
  --roster-gap: 10px;
  --roster-row-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: var(--roster-row-gap) var(--roster-gap);
  width: 100%;
}

.roster-tile {
  flex: 0 0 calc((100% - (var(--roster-cols) - 1) * var(--roster-gap)) / var(--roster-cols));
}

.roster-tile {
  position: relative;
  display: block;
  min-width: 0;
  height: clamp(106px, 16vh, 140px);
  overflow: visible;
  padding: 0;
  border: 3px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(180deg, #f6edd6, #e8d8b4);
  text-align: center;
  box-shadow: var(--shadow-drop), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: border-color .14s var(--ease-out), box-shadow .14s var(--ease-out), transform .18s var(--ease-pop);
}

.roster-tile:nth-child(1) { --yard-a: #6cb9ea; --yard-b: #5fae52; }
.roster-tile:nth-child(2) { --yard-a: #f0b167; --yard-b: #78a850; }
.roster-tile:nth-child(3) { --yard-a: #74b7ec; --yard-b: #66b05a; }
.roster-tile:nth-child(4) { --yard-a: #f5c46f; --yard-b: #7fb453; }
.roster-tile:nth-child(5) { --yard-a: #b9a1e2; --yard-b: #6aa95c; }
.roster-tile:nth-child(6) { --yard-a: #8ccbf0; --yard-b: #5fae52; }
.roster-tile:nth-child(7) { --yard-a: #f2a6c7; --yard-b: #7bb95c; }
.roster-tile:nth-child(8) { --yard-a: #9fd2ef; --yard-b: #6db24f; }
.roster-tile:nth-child(9) { --yard-a: #f7ce7c; --yard-b: #68ad55; }
.roster-tile:nth-child(10) { --yard-a: #7ec4ee; --yard-b: #72b358; }

.roster-tile:hover,
.roster-tile:focus-visible {
  border-color: var(--gold-deep);
  outline: none;
  transform: translateY(-4px) rotate(-.6deg);
  box-shadow: 0 0 0 3px rgba(242, 194, 90, .95), 0 0 14px 2px rgba(242, 194, 90, .55), var(--shadow-lift);
}

.roster-tile.active-p1 {
  border-color: var(--p1);
  box-shadow: 0 0 0 3px var(--p1-glow), 0 0 18px 3px rgba(77, 166, 255, .65), var(--shadow-lift);
  transform: translateY(-4px) rotate(-.6deg);
}

.roster-tile.active-cpu {
  border-color: var(--cpu);
  box-shadow: 0 0 0 3px var(--cpu-glow), 0 0 16px 3px rgba(255, 122, 107, .55), var(--shadow-drop);
}

.roster-tile.active-p1.active-cpu {
  border-color: var(--p1);
  box-shadow: 0 0 0 3px var(--p1-glow), 0 0 0 6px var(--cpu-glow), var(--shadow-lift);
}

.roster-tile.active-p1::before,
.roster-tile.active-cpu::after {
  position: absolute;
  top: -13px;
  display: grid;
  min-width: 36px;
  height: 20px;
  padding: 0 6px;
  place-items: center;
  border: 2px solid var(--wood-dark);
  border-radius: 7px 8px 6px 7px;
  color: #fff8e6;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  z-index: 3;
  content: "";
}

.roster-tile.active-p1::before { left: 6px; background: var(--p1); content: "P1"; transform: rotate(-4deg); }
.roster-tile.active-cpu::after { right: 6px; background: var(--cpu); content: "CPU"; transform: rotate(4deg); }
/* The second seat is a person in two-player, so the tab names them, not the CPU. */
body.two-player .roster-tile.active-cpu::after { content: "P2"; }

/* A chosen fighter's name plate becomes their marker color: readable in one glance,
   and still paired with the P1/CPU tab so color is never the only signal. */
.roster-tile.active-p1 .roster-tile-copy {
  color: #fff8e6;
  background: linear-gradient(180deg, var(--p1), #26599f 62%, #1e4680);
  box-shadow: 0 -3px 8px rgba(12, 30, 70, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.roster-tile.active-cpu .roster-tile-copy {
  color: #fff8e6;
  background: linear-gradient(180deg, var(--cpu), #ab2b21 62%, #8c1d10);
  box-shadow: 0 -3px 8px rgba(70, 16, 10, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Both players on one fighter: P1 owns the plate, the CPU ring stays on the frame. */
.roster-tile.active-p1.active-cpu .roster-tile-copy {
  background: linear-gradient(90deg, var(--p1) 0 50%, var(--cpu) 50% 100%);
}

.roster-tile.active-p1 .roster-tile-name,
.roster-tile.active-cpu .roster-tile-name { text-shadow: 0 1px 2px rgba(20, 12, 4, .45); }

/* The "photo" window: a slice of yard behind each portrait. Full bleed, so the
   figure itself is the tile and each designer is told apart at a glance. */
.roster-tile-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px 10px 7px 9px;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 250, 200, .75), transparent 32%),
    linear-gradient(180deg, var(--yard-a, #6cb9ea) 0%, #d8f0ff 58%, var(--yard-b, #5fae52) 60%, #4f9143 100%);
}

.roster-tile-art::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 22%;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(20, 60, 10, .10) 0 2px, transparent 2px 7px);
  content: "";
}

.roster-tile-art::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -10px 16px rgba(30, 60, 20, .18);
  content: "";
}

.roster-tile-art img {
  position: absolute;
  top: 1.5%;
  left: 50%;
  z-index: 1;
  width: auto;
  max-width: none;
  height: 124%;
  max-height: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 5px rgba(20, 40, 10, .38));
}

.roster-tile-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  z-index: 3;
  border-top: 2px solid rgba(74, 46, 21, .55);
  border-radius: 0 0 7px 9px;
  background: var(--grain-paper), linear-gradient(180deg, #f6edd6, #e4d3ac);
  box-shadow: 0 -3px 8px rgba(20, 40, 10, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}

.roster-tile-name {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-pips { display: none; }
.roster-pip { display: inline-grid; min-width: 15px; height: 16px; padding: 0 4px; place-items: center; border-radius: 3px; color: var(--ink); font-size: 7px; font-weight: 950; letter-spacing: .04em; }

/* ---------- The yard line + strip ---------- */

.yard-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.yard-line-kicker { color: var(--ink-muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.yard-line strong { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; }
.yard-line-change {
  padding: 0;
  border: 0;
  background: none;
  color: var(--oak-deep);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yard-line-change:hover,
.yard-line-change:focus-visible { color: var(--stamp); outline: none; }

.yard-strip {
  display: flex;
  gap: 10px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.yard-strip[hidden] { display: none; }

.yard-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  height: 62px;
  overflow: hidden;
  border: 3px solid var(--wood-dark);
  border-radius: 8px 10px 7px 9px;
  padding: 0;
  cursor: pointer;
  background: #0b1a2a;
  box-shadow: var(--shadow-drop);
}
.yard-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yard-thumb.picked { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(245, 197, 66, .6), var(--shadow-drop); }
.yard-thumb:hover,
.yard-thumb:focus-visible { transform: translateY(-2px); outline: none; }
.yard-thumb-name {
  position: absolute;
  left: 5px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(20, 26, 15, .72);
  color: #fff4dc;
  font-family: var(--font-marker);
  font-size: 9px;
  letter-spacing: .04em;
}

/* ---------- START BRAWL + hint chips ---------- */

.board-footer { display: flex; }

.ready-button {
  position: relative;
  width: 100%;
  min-height: 58px;
  padding: 0 40px;
  border: 3px solid var(--wood-dark);
  border-radius: var(--r-hewn-md);
  color: var(--parchment-bright);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, #3aa197, #2f8b83 55%, #276f69);
  box-shadow: 0 5px 0 #1c4f4a, var(--shadow-drop), inset 0 1px 0 rgba(255, 255, 255, .28);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  letter-spacing: .12em;
  text-shadow: var(--carve);
  transition: transform .14s var(--ease-pop), box-shadow .14s var(--ease-out), filter .14s var(--ease-out);
}

.ready-button::before,
.ready-button::after {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e2e2e2, #7a7a7a 60%, #4a4a4a);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .25);
  transform: translateY(-50%);
  content: "";
}

.ready-button::before { left: 12px; }
.ready-button::after { right: 12px; }

.ready-button:hover,
.ready-button:focus-visible {
  outline: none;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #1c4f4a, 0 0 0 3px var(--gold), 0 0 14px 2px rgba(242, 194, 90, .75), var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.ready-button:active { box-shadow: 0 1px 0 #1c4f4a, var(--inset-pressed); transform: translateY(4px); }
.ready-button:disabled { cursor: wait; opacity: .6; filter: grayscale(.4); transform: none; }

/* CONTROLS / PRACTICE as key-hint chips under START. */
.menu-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin: 6px 0 0; color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.menu-help-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.menu-help-hint:hover,
.menu-help-hint:focus-visible { color: var(--gold-deep); outline: none; }

.menu-help kbd,
.pause-help kbd {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border: 1.5px solid var(--wood-dark);
  border-bottom-width: 3px;
  border-radius: 5px;
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, #eadcbe);
  font: 800 9px/1 var(--font-body);
  letter-spacing: .03em;
}

/* ---------- <=1000px: single column ---------- */

@media (max-width: 1000px) {
  .game-overlay { overflow: auto; align-items: start; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .match-menu { width: 100%; }
  .menu-heading { padding: 22px 4px 10px; }
  h1 { font-size: clamp(26px, 8vw, 40px); }

  .board-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 4px 6px 24px;
  }
  .board-figure-p1 { order: 1; }
  .board-center { display: contents; }
  .board-kicker-block { order: 2; }
  .signature-plaque { order: 3; align-self: flex-start; }
  .roster-box { order: 4; }
  .board-figure-cpu { order: 5; }
  .match-setup-grid { order: 6; }
  .match-rules { order: 8; }
  .yard-strip { order: 7; }
  .menu-field { order: 8; }
  .board-footer { order: 9; position: sticky; bottom: 6px; z-index: 6; }
  .menu-help { order: 10; justify-content: center; }

  .board-figure-p1 .figure-portrait { height: min(260px, 34vh); }
  .board-figure-p1 .figure-tag { font-size: 14px; }

  /* The opponent collapses to just its caption chip on a phone -- no second
     full-size figure competing with yours for the top of the screen. */
  .board-figure-cpu {
    flex-direction: row;
    justify-content: flex-start;
  }
  .board-figure-cpu .figure-tag,
  .board-figure-cpu .figure-portrait-button,
  .board-figure-cpu .figure-shadow { display: none; }
  .opponent-caption { margin-top: 0; justify-content: flex-start; }

  .board-name { font-size: clamp(28px, 9vw, 42px); white-space: normal; }
  .roster-grid { --roster-cols: 4; }
  .roster-tile { height: clamp(64px, 20vw, 96px); }
}

@media (min-width: 1001px) {
  .game-overlay { overflow: auto; padding: clamp(10px, 1.45vw, 18px); }
}

.roster-tile:focus-visible {
  outline: 3px solid var(--gold-hot);
  outline-offset: 3px;
}

.ready-button:focus-visible,
.menu-field select:focus-visible {
  outline: 3px solid var(--gold-hot);
  outline-offset: 2px;
}

#match-result button[data-action]:focus-visible { outline-offset: 2px !important; }

/* ---------- Match result: a wooden scoreboard ---------- */
[hidden] { display: none !important; }

#match-result {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  isolation: isolate;
  display: grid !important;
  place-items: end center !important;
  overflow: hidden;
  padding: clamp(18px, 4.5vw, 64px) !important;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 10, .06) 0%,
    rgba(10, 20, 10, .22) 58%,
    rgba(8, 16, 8, .58) 100%
  ) !important;
  backdrop-filter: none !important;
}

#match-result[hidden] { display: none !important; }

#match-result:not([hidden]) { animation: result-curtain .28s ease-out both; }

#match-result::before,
#match-result::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

/* A strip of lawn under the sign. */
#match-result::before {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 12%;
  opacity: .82;
  background:
    radial-gradient(ellipse at 14px 12px, #79c862 12px, transparent 13px) 0 0 / 28px 24px repeat-x,
    linear-gradient(180deg, #79c862 12px, #61ab52 40%, #4f9143 100%);
  box-shadow: 0 -12px 30px rgba(3, 13, 3, .30);
}

#match-result::after {
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 50% 18%, rgba(255, 236, 170, .16), transparent 32rem);
}

.match-result-card {
  position: relative;
  display: grid;
  grid-template-areas:
    "stamp stamp"
    "title actions"
    "summary actions";
  grid-template-columns: minmax(0, 1fr) minmax(210px, 30%);
  align-items: end;
  gap: 8px clamp(24px, 4vw, 58px);
  width: min(940px, 100%) !important;
  min-width: 0;
  padding: clamp(26px, 3.6vw, 46px) !important;
  overflow: visible;
  border: 6px solid var(--oak) !important;
  border-radius: var(--r-hewn-lg) !important;
  color: var(--parchment-bright) !important;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 26px),
    var(--grain-wood),
    linear-gradient(180deg, #7d4f2d, #6b4226 58%, #5a3620) !important;
  box-shadow: inset 0 0 0 2px var(--wood-dark), var(--shadow-lift) !important;
  text-align: left !important;
  transform: rotate(-.35deg);
  transform-origin: bottom center;
}

#match-result:not([hidden]) .match-result-card { animation: result-sign-rise .46s cubic-bezier(.2, .8, .2, 1) both; }

.match-result-card::before,
.match-result-card::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

/* Sign posts. */
.match-result-card::before {
  top: 60%;
  bottom: -12vh;
  left: 12%;
  z-index: -1;
  width: 22px;
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
  background: var(--grain-wood), linear-gradient(90deg, #8a5a2b, #b07c42 48%, #8a5a2b);
}

.match-result-card::after {
  top: 60%;
  bottom: -12vh;
  right: 12%;
  z-index: -1;
  width: 22px;
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
  background: var(--grain-wood), linear-gradient(90deg, #8a5a2b, #b07c42 48%, #8a5a2b);
}

.match-result-card > * { position: relative; z-index: 1; min-width: 0; }

/* The MATCH OVER stamp. */
.match-result-card > p:first-child {
  grid-area: stamp;
  justify-self: start;
  margin: 0 0 12px !important;
  padding: 6px 11px 5px;
  border: 3px solid #ff5a44;
  border-radius: 6px;
  color: #ff5a44 !important;
  background: rgba(243, 233, 207, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 68, .35);
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .20em !important;
  line-height: 1;
  transform: rotate(-3deg);
}

#match-result-title {
  grid-area: title;
  max-width: 13ch;
  margin: 0 !important;
  overflow-wrap: anywhere;
  color: var(--gold) !important;
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 74px) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  line-height: .92 !important;
  text-wrap: balance;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45), 0 4px 0 #4a2e15, 0 7px 10px rgba(0, 0, 0, .45);
}

#match-result-summary {
  grid-area: summary;
  max-width: 58ch;
  margin: 14px 0 0 !important;
  overflow-wrap: anywhere;
  color: var(--ply) !important;
  font-family: var(--font-marker);
  font-size: clamp(13px, 1.45vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  font-variant-numeric: tabular-nums;
}

/* Ladder (5.3): the record line, the rung outcome, and the BEAT ALL SEVEN
   stamps row -- all full-width, stacked under the title/summary column so
   they never collide with the actions column. Hidden outside ladder mode. */
.match-result-ladder-record,
.match-result-ladder-outcome,
.match-result-ladder-stamps {
  grid-column: 1 / -1;
}
.match-result-ladder-record[hidden],
.match-result-ladder-outcome[hidden],
.match-result-ladder-stamps[hidden] { display: none !important; }
.match-result-ladder-record {
  margin: 10px 0 0 !important;
  color: var(--gold) !important;
  font-family: var(--font-marker);
  font-size: clamp(12px, 1.3vw, 15px) !important;
  font-weight: 400 !important;
}
.match-result-ladder-outcome {
  margin: 4px 0 0 !important;
  color: var(--ply) !important;
  font-family: var(--font-marker);
  font-size: clamp(12px, 1.3vw, 15px) !important;
  font-weight: 400 !important;
}
.match-result-ladder-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ladder-beaten-stamp {
  padding: 4px 8px 3px;
  border: 1.5px solid var(--wood-dark);
  border-radius: 5px;
  background: rgba(243, 233, 207, .12);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .55;
}
.ladder-beaten-stamp--done {
  border-color: var(--gold-hot);
  background: rgba(245, 197, 66, .22);
  color: var(--gold);
  opacity: 1;
}

.match-result-card > div:last-child {
  grid-area: actions;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-self: center;
  justify-content: stretch !important;
  gap: 12px !important;
  width: 100%;
}

#match-result button[data-action] {
  width: 100%;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 11px 16px !important;
  border: 3px solid var(--wood-dark) !important;
  border-radius: var(--r-hewn-md) !important;
  font-family: var(--font-display);
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  line-height: 1.2;
  transition: transform .16s var(--ease-pop), box-shadow .16s ease, filter .16s ease;
}

#rematch,
#ladder-continue {
  color: var(--parchment-bright) !important;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px), linear-gradient(180deg, #3aa197, #2f8b83 55%, #276f69) !important;
  box-shadow: 0 5px 0 #1c4f4a, var(--shadow-drop), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  text-shadow: var(--carve);
}

#match-result-back,
#back-to-lobby,
#save-replay,
#load-replay,
#share-card,
#share-replay {
  color: var(--ink) !important;
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged)) !important;
  box-shadow: 0 5px 0 rgba(42, 29, 16, .6), var(--shadow-drop), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

#match-result button[data-action]:hover,
#match-result button[data-action]:focus-visible {
  outline: none;
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #1c4f4a, 0 0 0 3px var(--gold), 0 0 14px 2px rgba(242, 194, 90, .75), var(--shadow-lift) !important;
}

#match-result-back:hover,
#back-to-lobby:hover,
#match-result-back:focus-visible,
#back-to-lobby:focus-visible,
#save-replay:hover,
#save-replay:focus-visible,
#load-replay:hover,
#load-replay:focus-visible,
#share-replay:hover,
#share-replay:focus-visible { box-shadow: 0 7px 0 rgba(42, 29, 16, .6), 0 0 0 3px var(--gold), 0 0 14px 2px rgba(242, 194, 90, .75), var(--shadow-lift) !important; }

#match-result button[data-action]:active { box-shadow: 0 1px 0 #1c4f4a, var(--inset-pressed) !important; transform: translateY(4px); }

@keyframes result-curtain {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes result-sign-rise {
  from { opacity: 0; transform: translateY(46px) rotate(-.35deg); }
  to { opacity: 1; transform: translateY(0) rotate(-.35deg); }
}

/* Result cinematics (match-cinematics.js's resultCinematics()): a confetti canvas
   layered over the sign, a winner-tinted zoom-in on the card, and a staggered
   entrance for the card's own rows -- see main.js's showMatchResult(). */
.match-result-confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes result-card-winner-zoom {
  from { transform: rotate(-.35deg) scale(.94); box-shadow: inset 0 0 0 2px var(--wood-dark), var(--shadow-lift), 0 0 0 0 var(--match-result-winner-color, transparent); }
  to { transform: rotate(-.35deg) scale(1); box-shadow: inset 0 0 0 2px var(--wood-dark), var(--shadow-lift), 0 0 34px 2px var(--match-result-winner-color, transparent); }
}

#match-result:not([hidden]) .match-result-card--zoom-in {
  animation: result-sign-rise .46s cubic-bezier(.2, .8, .2, 1) both, result-card-winner-zoom .6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes result-row-stagger-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.match-result-row--stagger-in { animation: result-row-stagger-in .32s ease-out both; }

@media (max-width: 680px) and (orientation: portrait) {
  #match-result { place-items: center !important; padding: 16px 12px !important; }
  #match-result::before { height: 10%; }
  .match-result-card {
    grid-template-areas: "stamp" "title" "summary" "actions";
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
    padding: 22px 18px 20px !important;
    text-align: center !important;
    transform: none;
  }
  .match-result-card::before,
  .match-result-card::after { display: none; }
  .match-result-card > p:first-child { justify-self: center; }
  #match-result-title { max-width: 14ch; font-size: clamp(34px, 11vw, 54px) !important; }
  #match-result-summary { max-width: 34ch; margin-top: 8px !important; font-size: 13px !important; }
  .match-result-card > div:last-child { margin-top: 12px; gap: 9px !important; }
}

@media (max-height: 520px) and (orientation: landscape) {
  #match-result { place-items: center !important; padding: 12px 18px !important; }
  #match-result::before { height: 10%; }
  .match-result-card {
    grid-template-areas:
      "stamp actions"
      "title actions"
      "summary actions";
    grid-template-columns: minmax(0, 1fr) minmax(190px, 29%);
    gap: 4px 24px;
    width: min(860px, 100%) !important;
    padding: 18px 24px !important;
  }
  .match-result-card::before,
  .match-result-card::after { display: none; }
  .match-result-card > p:first-child { margin-bottom: 7px !important; padding: 4px 8px 3px; font-size: 10px !important; }
  #match-result-title { max-width: 16ch; font-size: clamp(31px, 7vw, 50px) !important; }
  #match-result-summary { margin-top: 8px !important; font-size: 12px !important; line-height: 1.3 !important; }
  .match-result-card > div:last-child { gap: 8px !important; }
  #match-result button[data-action] { min-height: 42px !important; padding: 8px 12px !important; font-size: 12px !important; }
}

.effect-settings-grid { display: grid; gap: 10px; padding: 12px 0 4px; }
.effect-settings-grid label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.effect-settings-grid input { width: 18px; height: 18px; margin: 0; accent-color: #80652c; }
.effect-settings-grid input:focus-visible { outline: 3px solid #e1ba61; outline-offset: 3px; }

/* ---------- Reduced motion ---------- */

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}

:root[data-motion="reduced"] #match-result,
:root[data-motion="reduced"] #match-result .match-result-card,
:root[data-motion="reduced"] #match-result button[data-action] {
  animation: none !important;
  scroll-behavior: auto !important;
}

:root[data-motion="reduced"] .match-result-card,
:root[data-motion="reduced"] .pause-card,
:root[data-motion="reduced"] .pause-kicker { transform: none; }

:root[data-motion="reduced"] #match-result button[data-action]:hover,
:root[data-motion="reduced"] #match-result button[data-action]:focus-visible,
:root[data-motion="reduced"] #match-result button[data-action]:active,
:root[data-motion="reduced"] #pause-menu button:hover,
:root[data-motion="reduced"] #pause-menu button:focus-visible,
:root[data-motion="reduced"] #pause-menu button:active,
:root[data-motion="reduced"] .menu-button:hover,
:root[data-motion="reduced"] .menu-button:focus-visible { transform: none; }

/* System fallback before the module resolves the explicit root preference. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) *,
  :root:not([data-motion]) *::before,
  :root:not([data-motion]) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }

  :root:not([data-motion]) #match-result,
  :root:not([data-motion]) #match-result .match-result-card,
  :root:not([data-motion]) #match-result button[data-action] {
    animation: none !important;
    scroll-behavior: auto !important;
  }

  :root:not([data-motion]) .match-result-card,
  :root:not([data-motion]) .pause-card,
  :root:not([data-motion]) .pause-kicker { transform: none; }
}

/* ---- Online play ------------------------------------------------------- */

.online-panel {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  border: 2px solid var(--wood-dark, #4a2e15);
  border-radius: 10px;
  background: rgba(255, 248, 230, .72);
}
.online-step { display: grid; gap: 6px; }
/* Paired actions share a row so the opponent card stays short enough for the
   whole menu to fit a laptop viewport with the code on screen. */
.online-step[data-online-step="joining"],
.online-step[data-online-step="connected"] { grid-template-columns: 1fr 1fr; }
.online-step[data-online-step="hosting"] { grid-template-columns: 1fr auto; align-items: center; }
.online-step[data-online-step="hosting"] > .online-label,
.online-step[data-online-step="hosting"] > .online-code,
.online-step[data-online-step="joining"] > .online-label,
.online-step[data-online-step="joining"] > .online-input,
.online-step[data-online-step="joining"] > .back-tag-inline { grid-column: 1 / -1; }
.online-step[hidden] { display: none !important; }
.online-label {
  font: 700 9px/1.2 var(--body-font, system-ui);
  letter-spacing: .12em;
  color: var(--walnut, #6b4226);
}
/* The code is the one thing a player has to read out loud or copy by eye, so it
   is the largest element in the panel and set in a face where 8 and B differ. */
.online-code {
  /* The code must never wrap: split across two lines it reads as two codes, and
     this is the one string a player has to copy by eye or say out loud. It sizes
     to the column instead, down to a floor that is still comfortably legible. */
  font: 400 clamp(15px, 2.1vw, 24px)/1.1 var(--display-font, system-ui);
  letter-spacing: .08em;
  color: var(--ink, #2a1d10);
  text-align: center;
  padding: 4px 0;
  white-space: nowrap;
  user-select: all;
}
.online-input {
  width: 100%;
  padding: 8px;
  border: 2px solid var(--wood-dark, #4a2e15);
  border-radius: 8px;
  background: var(--paper, #f3e9cf);
  font: 400 20px/1 var(--display-font, system-ui);
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.online-input:invalid { border-color: var(--stamp, #c8321f); }
.online-primary,
.online-secondary,
.online-back {
  padding: 8px 10px;
  white-space: nowrap;
  border: 2px solid var(--wood-dark, #4a2e15);
  border-radius: 8px;
  font: 700 11px/1 var(--body-font, system-ui);
  letter-spacing: .08em;
  cursor: pointer;
}
.online-primary { background: var(--teal, #2f8b83); color: var(--paper, #f3e9cf); }
.online-primary[aria-pressed="true"] { background: var(--gold, #f5c542); color: var(--ink, #2a1d10); }
.online-primary:disabled { opacity: .55; cursor: not-allowed; }
.online-secondary { background: var(--oak, #c99a54); color: var(--ink, #2a1d10); }
.online-back { background: transparent; border-color: transparent; text-decoration: underline; }
.online-status {
  margin: 0;
  min-height: 1.2em;
  font: 600 10px/1.35 var(--body-font, system-ui);
  color: var(--walnut, #6b4226);
}
.online-status[data-tone="error"] { color: var(--stamp, #c8321f); }
.online-status[data-tone="good"] { color: var(--teal, #2f8b83); }

/* Friend entry uses the main action area after fighter and match setup. */
.board-center > .online-panel { width: 100%; margin: 0; padding: 16px; gap: 10px; background: var(--parchment-bright); }
.board-center > .online-panel .online-step[data-online-step="idle"] { grid-template-columns: 1fr 1fr; gap: 12px; }
.board-center > .online-panel .online-primary,
.board-center > .online-panel .online-secondary { min-height: 48px; font: 400 18px/1.2 var(--font-display); letter-spacing: .02em; }
.board-center > .online-panel .online-secondary { background: var(--parchment); }
.board-center > .online-panel .online-label { font: 900 12px/1.3 var(--font-body); color: var(--ink); }
.board-center > .online-panel .online-status { font: 700 13px/1.4 var(--font-body); }
.board-center > .online-panel .online-status:empty { display: none; }
.board-center > .online-panel .online-code-error { grid-column: 1 / -1; margin: 0; font: 700 13px/1.4 var(--font-body); }
.board-center > .online-panel #online-join { grid-column: 1 / -1; }
.board-center > .online-panel button:focus-visible,
.board-center > .online-panel input:focus-visible { outline: 3px solid var(--p1); outline-offset: 3px; }
body.online-mode .board-footer,
body.online-mode .start-key-hint,
body.online-mode .board-figure-cpu { display: none; }
@media (max-width: 600px) {
  .board-center > .online-panel { padding: 12px; }
  .board-center > .online-panel .online-step[data-online-step="idle"] { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 1000px) { .board-center > .online-panel { order: 9; } }

/* In-match connection readout: small, out of the way, and only present online. */
#online-hud {
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(20, 13, 6, .62);
  color: #fdf6e4;
  font: 600 10px/1 var(--body-font, system-ui);
  letter-spacing: .06em;
  pointer-events: none;
}
#online-hud[hidden] { display: none !important; }
.online-hud-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.online-hud-summary #online-hud-text { min-width: 5.2em; }
.online-hud-summary + #online-hud-details {
  pointer-events: auto;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(253, 246, 228, .48);
  border-radius: 999px;
  color: #fdf6e4;
  background: rgba(253, 246, 228, .08);
  font: inherit;
  letter-spacing: .04em;
  cursor: pointer;
}
.online-hud-summary + #online-hud-details:hover,
.online-hud-summary + #online-hud-details:focus-visible {
  outline: 2px solid var(--gold, #f5c542);
  outline-offset: 2px;
}
#online-hud-metrics {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: min(260px, calc(100vw - 20px));
  padding: 9px 11px;
  border: 1px solid rgba(253, 246, 228, .3);
  border-radius: 9px;
  color: #fdf6e4;
  background: rgba(20, 13, 6, .9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  pointer-events: auto;
  letter-spacing: .01em;
}
#online-hud-metrics[hidden] { display: none !important; }
#online-hud-metrics dl { display: grid; gap: 5px; margin: 0; }
#online-hud-metrics dl > div { display: flex; justify-content: space-between; gap: 18px; }
#online-hud-metrics dt { color: rgba(253, 246, 228, .7); font-weight: 500; }
#online-hud-metrics dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.online-hud-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #58c37a;
}
.online-hud-dot[data-state="warn"] { background: var(--gold, #f5c542); }
.online-hud-dot[data-state="bad"] { background: var(--stamp, #c8321f); }

/* Connection quality (stats().quality.verdict): rtt + rollback depth, one glance. */
.online-hud-quality {
  width: 5px; height: 5px; border-radius: 50%;
  background: #58c37a;
}
.online-hud-quality[data-verdict="fair"] { background: var(--gold, #f5c542); }
.online-hud-quality[data-verdict="poor"] { background: var(--stamp, #c8321f); }

/* Interruption: the opponent stopped sending, or left. This is the state online
   games usually leave blank, and a blank screen reads as the game being broken. */
#online-interrupt {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: rgba(16, 10, 4, .72);
}
#online-interrupt[hidden] { display: none !important; }
.online-interrupt-card {
  display: grid;
  gap: 10px;
  max-width: min(360px, 84vw);
  padding: 18px;
  border: 2px solid var(--wood-dark, #4a2e15);
  border-radius: 14px;
  background: var(--paper, #f3e9cf);
  text-align: center;
}
.online-interrupt-title { margin: 0; font: 400 20px/1.1 var(--display-font, system-ui); color: var(--ink, #2a1d10); }
.online-interrupt-body { margin: 0; font: 600 11px/1.4 var(--body-font, system-ui); color: var(--walnut, #6b4226); }

/* ---------- Gamepad status ---------- */

.gamepad-status { margin-left: 8px; }

/* ---------- Touch controls (W5: play it with what you have) ---------- */

.touch-controls {
  position: absolute;
  inset: 0;
  z-index: 6;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.touch-controls[hidden] { display: none !important; }

.touch-stick-zone {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 224, 196, .22), rgba(237, 224, 196, .08) 70%, transparent 74%);
  border: 2px solid rgba(237, 224, 196, .35);
  pointer-events: auto;
}
.touch-stick-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: rgba(237, 224, 196, .5);
  border: 2px solid var(--wood-dark);
  transform: translate(-50%, -50%);
  transition: transform .04s linear;
  pointer-events: none;
}

.touch-button {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--wood-dark);
  background: var(--grain-paper), linear-gradient(180deg, rgba(243, 233, 207, .82), rgba(220, 203, 160, .82));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .06em;
  box-shadow: var(--shadow-drop);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.touch-button.touch-button-active {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: 0 0 0 3px rgba(245, 197, 66, .4), var(--inset-pressed);
}

/* ---------- Replay playback bar ---------- */

.replay-notice {
  width: min(460px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 28px;
  border: 3px solid var(--wood-dark);
  border-radius: 20px;
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(var(--parchment-bright), var(--parchment-aged));
  box-shadow: var(--shadow-drop);
}
.replay-notice::backdrop { background: rgb(24 20 14 / 58%); }
.replay-notice h2 { margin: 0 0 12px; font: 32px/1.1 var(--font-display); }
.replay-notice p { margin: 0 0 24px; font: 16px/1.5 var(--font-body); }
.replay-notice button { width: 100%; min-height: 48px; border: 2px solid var(--wood-dark); border-radius: 10px; color: var(--ink); background: var(--parchment-bright); font: 16px var(--font-display); }
.replay-notice button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.replay-bar {
  position: absolute;
  left: 50%;
  top: 104px;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-md, 10px);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: var(--shadow-drop);
  max-width: calc(100% - 24px);
}
.replay-bar[hidden] { display: none !important; }
.replay-bar-button {
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm, 6px);
  padding: 8px 12px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--parchment);
  white-space: nowrap;
}
.replay-bar-button:hover,
.replay-bar-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold); }
.replay-bar-frame {
  font-family: var(--font-body, system-ui);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-soft);
  white-space: nowrap;
}
.replay-bar-label { font-family: var(--font-display); font-size: 18px; }
.replay-bar-scrub { width: min(220px, 30vw); min-height: 32px; accent-color: var(--gold); }

@media (max-width: 680px) {
  .replay-bar { top: 144px; width: calc(100% - 32px); box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "label toggle exit" "frame scrub scrub"; gap: 8px; padding: 10px; }
  .replay-bar-label { grid-area: label; }
  #replay-toggle { grid-area: toggle; }
  #replay-exit { grid-area: exit; }
  .replay-bar-frame { grid-area: frame; }
  .replay-bar-scrub { grid-area: scrub; width: 100%; min-width: 0; }
}

/* ---------- Menu links row (Play online + Controls) ---------- */

.menu-links {
  display: flex;
  align-items: end;
  align-self: end;
  flex-wrap: wrap;
  gap: clamp(6px, .8vw, 10px);
}
.menu-links .play-online-link { align-self: auto; margin: 0 0 clamp(4px, .7vw, 9px); }

/* ---------- Inline join-code validation ---------- */

.online-code-error {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--stamp, #c8321f);
  font-family: var(--font-marker);
  font-size: 10px;
  font-weight: 700;
}
.online-code-error[hidden] { display: none !important; }

/* ---------- Player two's own control legend (2P mode) ---------- */

#player-two-help[hidden] { display: none !important; }
#player-two-help { margin-top: 4px; }

/* ==========================================================================
   Shared dialog overlay: welcome, controls, and the online lobby all reuse
   the pause menu's wooden-board look (docs/ONBOARDING.md; this build's
   "Lobby (Kahoot-grade)" and "Onboarding (smash.fun-grade)" briefs) so no new
   visual language is introduced for any of the three.
   ========================================================================== */

.game-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 22, 12, .62);
}
.game-dialog-overlay[hidden] { display: none !important; }

/* ==========================================================================
   The BACK / LEAVE / SKIP tag: one consistent exit affordance pinned to the
   same corner of every overlay (make-it-easier-to-leave item 1) -- built from
   the same materials as THE YARD's own tag and the signature reveal's yard
   chip (.display face, wood border, --r-hewn-sm radius, a 3px hard wood-dark
   shadow), just with a left arrow ahead of the word.
   ========================================================================== */
.back-tag {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 6px 10px;
  border: 3px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: 0 3px 0 var(--wood-dark);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .14s var(--ease-pop), box-shadow .14s var(--ease-out);
}
.back-tag[hidden] { display: none !important; }
.back-tag-arrow { width: 12px; height: 12px; flex: none; }
.back-tag:hover,
.back-tag:focus-visible {
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 3px 0 var(--wood-dark), 0 0 0 3px var(--gold);
}
.back-tag:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--wood-dark); }

/* Pinned to the top-left corner of the dialog card it lives in -- welcome,
   controls, and the online lobby all share .pause-card. */
.pause-card { position: relative; }
.pause-card > .back-tag { top: -14px; left: -16px; }

/* The join step's tag lives inline in the select screen's compact online
   panel rather than a full dialog, so it sits in the panel's own flow
   (still first, still "top-left") instead of pinned absolute. */
.back-tag-inline { position: static; justify-self: start; margin-bottom: 2px; }

/* The signature reveal, the coached lesson's SKIP LESSON, and PRACTICE's own
   BACK all sit directly over the play area rather than inside a card. */
.signature-reveal > .back-tag,
.back-tag-frame {
  top: 14px;
  left: 14px;
  z-index: 20;
}

/* ---------- Welcome card ---------- */

.welcome-card { width: min(660px, 100%); }
.welcome-card h2 { margin: 20px 0 0; max-width: 14ch; font: 400 clamp(30px, 4vw, 44px)/1 var(--font-display); letter-spacing: .01em; color: var(--parchment-bright); }
.welcome-card .welcome-summary { margin: 12px 0 24px !important; text-align: left; font: 800 14px/1.45 var(--font-body); }

.welcome-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 0;
}
@media (max-width: 600px) { .welcome-choices { grid-template-columns: 1fr; gap: 12px; } .welcome-card h2 { max-width: 15ch; } }

.welcome-choice {
  display: grid;
  gap: 4px;
  padding: 20px 18px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: 0 3px 0 rgba(42, 29, 16, .55), var(--shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: transform .14s var(--ease-pop), box-shadow .14s var(--ease-out);
}
.welcome-choice strong {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 400;
  letter-spacing: .06em;
}
.welcome-choice span {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.welcome-choice:hover,
.welcome-choice:focus-visible {
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 3px 0 rgba(42, 29, 16, .55), 0 0 0 3px var(--gold), 0 0 14px 2px rgba(242, 194, 90, .75);
}
.welcome-choice:active { transform: translateY(1px); box-shadow: var(--inset-pressed); }
.welcome-choice-primary {
  width: 100%;
  margin-bottom: 16px;
  color: var(--parchment-bright);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px), linear-gradient(180deg, #3aa197, #2f8b83 55%, #276f69);
  box-shadow: 0 4px 0 #1c4f4a, var(--shadow-soft);
}
.welcome-choice-primary strong { text-shadow: var(--carve); }
.welcome-choice-primary strong { display: flex; justify-content: space-between; align-items: center; }
.welcome-choice-primary span { color: rgba(243, 233, 207, .88); }
.online-mode #learn-open { display: none; }

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

.controls-card { width: min(680px, 100%); }
.controls-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 4px 0 18px;
}
.controls-column {
  padding: 12px 14px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  background: rgba(0, 0, 0, .16);
}
.controls-column h3 {
  margin: 0 0 8px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.controls-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 6px;
  color: var(--ply, #d9c9a3);
  font-family: var(--font-marker);
  font-size: 12px;
  font-weight: 700;
}
.controls-row:last-child { margin-bottom: 0; }
.controls-row kbd {
  padding: 2px 6px;
  border: 1.5px solid var(--wood-dark);
  border-radius: 5px;
  color: var(--ink);
  background: var(--parchment-bright);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}
.controls-close { width: 100%; }

/* ---------- Online lobby: the Kahoot-grade room ---------- */

.lobby-card { width: min(640px, 100%); }

.lobby-code-block { margin: 6px 0 18px; text-align: center; }
.lobby-code-block[hidden] { display: none !important; }
.lobby-code-big {
  display: inline-block;
  padding: 10px 22px;
  border: 3px solid var(--wood-dark);
  border-radius: var(--r-hewn-md);
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: var(--shadow-lift);
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 54px);
  font-weight: 400;
  letter-spacing: .28em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .35);
}
.lobby-code-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.lobby-copied {
  color: var(--placed, #5fc93a);
  font-family: var(--font-marker);
  font-size: 12px;
  font-weight: 800;
}
.lobby-copied[hidden] { display: none !important; }
.lobby-share-link {
  margin: 8px 0 0;
  color: var(--ply, #d9c9a3);
  font-family: var(--font-marker);
  font-size: 11px;
  word-break: break-all;
}

.lobby-slots {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.lobby-slot {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  background: rgba(0, 0, 0, .16);
}
.lobby-slot-portrait {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #bfe3ff, #7ec8ec 60%, #5fae52);
}
.lobby-slot-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center top; transform: scale(1.65); transform-origin: center top; }
.lobby-slot-portrait img[hidden] { display: none; }
.lobby-slot-name {
  color: var(--parchment-bright);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .03em;
  text-align: center;
  text-shadow: var(--carve);
}
.lobby-slot-waiting .lobby-slot-name {
  color: var(--ply, #d9c9a3);
  font-family: var(--font-marker);
  font-size: 12px;
  font-weight: 700;
  text-shadow: none;
  animation: lobby-waiting-pulse 1.6s ease-in-out infinite;
}
.lobby-slot-waiting .lobby-slot-portrait { opacity: .5; border-color: var(--ply, #d9c9a3); border-style: dashed; animation: lobby-waiting-pulse 1.6s ease-in-out infinite; }
@keyframes lobby-waiting-pulse { 50% { opacity: .45; } }
.lobby-slot-badge {
  padding: 2px 8px;
  border-radius: 999px;
  color: #0c2e08;
  background: var(--placed, #5fc93a);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .05em;
}
.lobby-slot-badge[hidden] { display: none !important; }
/* invite-share.js's pingLabelFor() reading, shown before either side readies up. */
.lobby-slot-ping {
  margin-top: 2px;
  color: var(--ink-muted);
  font-family: var(--font-marker);
  font-size: 10px;
  font-weight: 700;
}
.lobby-slot-ping[hidden] { display: none !important; }
.lobby-vs {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .1em;
}

.lobby-status {
  margin: 0 0 10px;
  color: var(--ply, #d9c9a3);
  font-family: var(--font-marker);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  min-height: 1em;
}
.lobby-status[data-tone="error"] { color: var(--stamp, #c8321f); }
.lobby-status[data-tone="good"] { color: #8be27a; }

/* Package C: the guest's read-only "Rules: 100% · handicap 5/5" line. */
.lobby-rules {
  margin: 0 0 6px;
  color: var(--ply, #d9c9a3);
  font-family: var(--font-marker);
  font-size: 11px;
  text-align: center;
  opacity: .8;
}
.lobby-rules[hidden] { display: none !important; }

.lobby-countdown { display: grid; place-items: center; margin: 4px 0 14px; }
.lobby-countdown[hidden] { display: none !important; }
.lobby-countdown span {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 4px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(0, 0, 0, .3);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  animation: lobby-countdown-pop .5s var(--ease-pop, ease-out);
}
@keyframes lobby-countdown-pop { 0% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.lobby-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Item 4: LEAVE/CLOSE LOBBY is a real secondary button next to READY, not a
   link -- HOST AGAIN replaces that same row once the peer has left. */
.lobby-actions #lobby-host-again { grid-column: 1 / -1; }
.lobby-actions button[hidden] { display: none !important; }

:root[data-motion="reduced"] .lobby-slot-waiting .lobby-slot-name,
:root[data-motion="reduced"] .lobby-slot-waiting .lobby-slot-portrait,
:root[data-motion="reduced"] .lobby-countdown span { animation: none !important; }

@media (max-width: 520px) {
  .lobby-slots { grid-template-columns: 1fr; }
  .lobby-vs { justify-self: center; }
  .lobby-actions { grid-template-columns: 1fr; }
  .welcome-card,
  .controls-card,
  .lobby-card { padding: 18px 16px; }
}

/* ==========================================================================
   Signature-reveal VS screen (SignatureReveal.dc.html): a full-bleed yard
   photo, P1 and the opponent on blue/red wedges, a VS burst, name tags, and
   a gold-ringed plaque naming the signature move. Shown once per designer
   (web/signature-reveal.js), never for a harness run.
   ========================================================================== */

.signature-reveal {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  background: #0b1a2a;
}
.signature-reveal[hidden] { display: none !important; }

.signature-reveal-wedge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
}
.signature-reveal-wedge-p1 {
  left: -8%;
  background: linear-gradient(90deg, rgba(47, 111, 210, .55), rgba(47, 111, 210, 0));
  transform: skewX(-8deg);
}
.signature-reveal-wedge-cpu {
  right: -8%;
  background: linear-gradient(270deg, rgba(210, 59, 47, .5), rgba(210, 59, 47, 0));
  transform: skewX(-8deg);
}

.signature-reveal-portrait {
  position: absolute;
  bottom: 12%;
  height: 62%;
  width: auto;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .5));
}
.signature-reveal-portrait-p1 { left: 8%; }
.signature-reveal-portrait-cpu { right: 8%; transform: scaleX(-1); filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .5)) brightness(.85); }

.signature-reveal-vs {
  position: absolute;
  top: 26%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: clamp(84px, 11vw, 150px);
  height: clamp(84px, 11vw, 150px);
  place-items: center;
  border: 5px solid var(--wood-dark);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffd75e, var(--gold) 60%, var(--gold-deep));
  box-shadow: 0 8px 0 var(--wood-dark), var(--shadow-lift);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 58px);
  letter-spacing: .04em;
  transform: translate(-50%, -50%) rotate(-6deg);
}

.signature-reveal-tag {
  position: absolute;
  top: 9%;
  z-index: 2;
  padding: 6px 16px;
  border: 3px solid var(--wood-dark);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.6vw, 20px);
  letter-spacing: .1em;
  box-shadow: 0 4px 0 var(--wood-dark);
}
.signature-reveal-tag-p1 { left: 9%; background: var(--p1); transform: rotate(-2deg); }
.signature-reveal-tag-cpu { right: 9%; background: var(--cpu); transform: rotate(2deg); }

.signature-reveal-plaque {
  position: absolute;
  bottom: 22%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(10px, 1.4vw, 18px) clamp(18px, 2.6vw, 30px);
  border: 4px solid var(--wood-dark);
  border-radius: var(--r-hewn-md);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: 0 0 0 6px rgba(245, 197, 66, .5), var(--shadow-lift);
  transform: translateX(-50%) rotate(-1deg);
  max-width: min(88vw, 620px);
}

.signature-reveal-icon {
  display: grid;
  flex: none;
  width: clamp(36px, 4vw, 64px);
  height: clamp(36px, 4vw, 64px);
  place-items: center;
  border: 3px solid var(--wood-dark);
  border-radius: 50%;
  background: var(--parchment-bright);
  box-shadow: 0 3px 0 var(--wood-dark);
  color: var(--ink);
}
.signature-reveal-icon svg { width: 60%; height: 60%; }

.signature-reveal-copy { display: grid; gap: 2px; min-width: 0; }
.signature-reveal-kicker { color: var(--ink-muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.signature-reveal-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 3.3vw, 40px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.signature-reveal-copy span { color: var(--walnut); font-size: 13px; font-weight: 800; }
.signature-reveal-copy kbd {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border: 1.5px solid var(--wood-dark);
  border-bottom-width: 3px;
  border-radius: 5px;
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, #eadcbe);
  font: 800 11px/1 var(--font-body);
}

.signature-reveal-footer {
  position: absolute;
  bottom: 6%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
}
.signature-reveal-yard {
  padding: 5px 14px;
  border: 3px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: 0 3px 0 var(--wood-dark);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .1em;
}
.signature-reveal-countdown {
  color: var(--parchment-bright);
  font-weight: 800;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

@media (max-width: 760px) {
  .signature-reveal-portrait { height: 44%; bottom: 24%; }
  .signature-reveal-vs { top: 20%; }
  .signature-reveal-plaque { flex-direction: column; text-align: center; bottom: 14%; }
  .signature-reveal-copy strong { white-space: normal; }
}

/* ---------- Direction B polish (operator pass after the browser look) ---------- */
/* Tile names were truncating to "Tom…" at 1024–1440: let them take two lines. */
.roster-tile-copy { height: 36px; }
.roster-tile .roster-tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.05;
  text-overflow: clip;
}
.match-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.match-setup-grid > * { min-width: 0; padding: 12px; border: 2px solid var(--wood-dark); border-radius: 10px; background: var(--parchment); }
.match-setup-grid .yard-line { display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; gap: 6px 12px; }
.match-setup-grid .yard-line-kicker { grid-column: 1; font-size: 10px; }
.match-setup-grid .yard-line strong { grid-column: 1; font-size: 17px; line-height: 1.15; }
.match-setup-grid .yard-line-change { grid-column: 2; grid-row: 1 / span 2; padding: 8px; min-height: 32px; border: 1px solid var(--wood-dark); border-radius: 6px; color: var(--ink); background: var(--parchment-bright); text-decoration: none; font: 800 11px var(--font-body); }
.opponent-setup { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.opponent-setup-options { display: flex; align-items: center; gap: 8px; }
.opponent-setup:has(#ladder-tag[hidden]):has(#cpu-level-stepper[hidden]) { display: none; }
.match-setup-grid:has(.opponent-setup #ladder-tag[hidden]):has(.opponent-setup #cpu-level-stepper[hidden]) { grid-template-columns: 1fr; }
.match-setup-grid button:focus-visible, .match-rules summary:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
@media (max-width: 600px) { .match-setup-grid { grid-template-columns: 1fr; } }
/* The player name is the display face, like the sign. */
.board-name, #fighter-one-name { font-family: var(--font-display); font-weight: 400; }

/* ---------- Dialog card styles restored after the Direction B rebuild dropped them (lobby, welcome, controls cards share .pause-card) ---------- */
.player-help kbd,
.menu-help kbd,
.pause-help kbd {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border: 1.5px solid var(--wood-dark);
  border-bottom-width: 3px;
  border-radius: 5px;
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, #eadcbe);
  font: 800 9px/1 var(--font-body);
  letter-spacing: .03em;
}
/* The one plain (non online-*, non welcome-choice) button that lives inside a
   reused .pause-card outside #pause-menu itself: the controls card's own
   close action. Styled to match .pause-primary's look without widening that
   selector's scope, which would out-specificity .online-primary/-secondary/
   -back and .welcome-choice's own full button styling in the other dialogs. */
/* ---------- Pause: a wooden board ----------
   #pause-menu, .pause-kicker, #pause-menu-title/-summary, .pause-actions,
   #pause-menu button, .pause-primary, and .pause-help were never carried
   over to the Direction B rebuild (only the .pause-card family the welcome/
   controls/lobby dialogs share was restored, see the comment above
   .controls-close) -- item 3 ("LEAVE MATCH as a real teal/oak button") needs
   the whole pause menu actually styled, not just the one new control, so
   this restores it (ported from the last committed version, same tokens)
   and adds LEAVE MATCH as a second full-width .pause-primary leading RESUME. */
.menu-button {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 8;
  padding: 8px 13px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: var(--shadow-drop);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
}
.menu-button:hover,
.menu-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold), 0 0 14px 2px rgba(242, 194, 90, .75), var(--shadow-drop); transform: translateY(-1px) rotate(-1deg); }

#pause-menu {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 22, 12, .62);
}
#pause-menu[hidden] { display: none !important; }

.pause-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 10px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--ink);
  background: linear-gradient(180deg, #f8d977, var(--gold));
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .16em;
  transform: rotate(-1.5deg);
}
#pause-menu-title {
  margin: 0;
  color: var(--parchment-bright);
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 62px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .94;
  text-shadow: var(--carve);
}
#pause-menu-summary {
  margin: 12px 0 22px;
  color: var(--ply, #d9c9a3);
  font-family: var(--font-marker);
  font-size: 14px;
  line-height: 1.4;
}

.pause-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#pause-menu button {
  min-height: 46px;
  padding: 10px 14px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--ink);
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: 0 3px 0 rgba(42, 29, 16, .55), var(--shadow-soft);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .10em;
  cursor: pointer;
}
#pause-menu button:hover,
#pause-menu button:focus-visible { outline: none; box-shadow: 0 3px 0 rgba(42, 29, 16, .55), 0 0 0 3px var(--gold), 0 0 14px 2px rgba(242, 194, 90, .75); transform: translateY(-1px); }
#pause-menu button:active { box-shadow: var(--inset-pressed); transform: translateY(2px); }
#pause-menu button[aria-pressed="true"] { border-color: var(--placed); background: linear-gradient(180deg, #e9f7df, #cfeac0); }
/* LEAVE MATCH leads, then RESUME (item 3) -- both full-width .pause-primary
   planks; CHANGE LINEUP stays full-width too since it also leaves the match. */
#pause-leave-match,
#pause-resume,
.pause-primary {
  color: var(--parchment-bright);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px), linear-gradient(180deg, #3aa197, #2f8b83 55%, #276f69);
  box-shadow: 0 4px 0 #1c4f4a, var(--shadow-soft);
  text-shadow: var(--carve);
}
.pause-help {
  margin: 17px 0 0;
  color: var(--ply, #d9c9a3);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
/* Item 3: online, the confirm line sits right under LEAVE MATCH -- a passive
   disclosure, not a modal. */
.pause-leave-note {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  color: var(--ply, #d9c9a3);
  font-family: var(--font-marker);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.pause-leave-note[hidden] { display: none !important; }

@media (max-width: 520px) {
  .pause-actions { grid-template-columns: 1fr; }
  #pause-leave-match,
  #pause-resume,
}

@media (max-height: 520px) and (orientation: landscape) {
  /* Ten controls must fit a 390 px landscape phone (browser_journey pins every
     control inside the viewport): four columns, LEAVE and RESUME sharing the
     first row, no kicker, no summary, no key legend. */
  #pause-menu { padding: 8px 14px; }
  #pause-menu .pause-card { width: min(800px, 100%); padding: 12px 16px 14px; }
  #pause-menu .pause-kicker,
  #pause-menu-summary,
  #pause-menu .pause-help { display: none; }
  #pause-menu-title { margin: 0 0 8px; font-size: clamp(22px, 5vw, 30px); }
  .pause-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #pause-leave-match,
  #pause-resume { grid-column: span 2; }
  #pause-menu button { min-height: 40px; padding: 6px 8px; font-size: 10px; white-space: normal; line-height: 1.1; }
  .pause-leave-note { grid-column: 1 / -1; margin: -2px 0 0; font-size: 10px; }
}

.controls-close {
  min-height: 46px;
  padding: 10px 14px;
  border: 2px solid var(--wood-dark);
  border-radius: var(--r-hewn-sm);
  color: var(--parchment-bright);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px), linear-gradient(180deg, #3aa197, #2f8b83 55%, #276f69);
  box-shadow: 0 4px 0 #1c4f4a, var(--shadow-soft);
  text-shadow: var(--carve);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .10em;
  cursor: pointer;
}

/* .pause-card family restored from the pre-rebuild stylesheet */
.pause-card {
  width: min(560px, 100%);
  padding: clamp(22px, 4vw, 38px);
  border: 6px solid var(--oak);
  border-radius: var(--r-hewn-lg);
  color: var(--parchment-bright);
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 24px),
    var(--grain-wood),
    linear-gradient(180deg, #7d4f2d, #6b4226 58%, #5a3620);
  box-shadow: inset 0 0 0 2px var(--wood-dark), var(--shadow-lift);
  transform: rotate(-.2deg);
}

/* ==========================================================================
   Dialog close (X): the second exit on every overlay card, pinned to the
   top-right corner the way the BACK tag is pinned top-left -- same materials
   (wood border, parchment face, 3px hard wood-dark shadow), round so it
   reads as "dismiss" rather than "go back". Backdrop clicks dismiss too
   (main.js: any click that lands on the overlay itself, outside the card).
   ========================================================================== */
.dialog-close {
  position: absolute;
  top: -14px;
  right: -16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 3px solid var(--wood-dark);
  border-radius: 50%;
  background: var(--grain-paper), linear-gradient(180deg, var(--parchment-bright), var(--parchment-aged));
  box-shadow: 0 3px 0 var(--wood-dark);
  color: var(--ink);
  cursor: pointer;
  transition: transform .14s var(--ease-pop), box-shadow .14s var(--ease-out);
}
.dialog-close svg { width: 16px; height: 16px; }
.dialog-close:hover,
.dialog-close:focus-visible {
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 3px 0 var(--wood-dark), 0 0 0 3px var(--gold);
}
.dialog-close:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--wood-dark); }
.dialog-close[hidden] { display: none !important; }

/* Match settings share a fixed label/control layout at every viewport. */
.pause-option { display:grid; grid-template-columns:minmax(0,1fr) 7rem; gap:4px 16px; align-items:center; margin:12px 0; text-align:left; }
.pause-option > span { grid-column:1; font-weight:700; }
.pause-option > small { grid-column:1; opacity:.75; }
.pause-option > select { grid-column:2; grid-row:1 / 3; width:100%; min-height:40px; border:1px solid #98764f; border-radius:6px; background:#fff4dc; color:#342516; padding:8px; font:inherit; }
.controls-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:600px) { .controls-columns { grid-template-columns:1fr; } }

.practice-panel { position: absolute; right: 16px; top: 84px; z-index: 12; width: 208px; padding: 12px; border: 2px solid var(--wood-dark); border-radius: 12px; background: var(--grain-paper), var(--parchment-bright); color: var(--ink); font: 700 13px/1.4 var(--font-body); max-height: calc(100% - 220px); overflow: auto; box-shadow: var(--shadow-drop); }
.practice-panel[hidden] { display: none; }
.practice-panel.editing { width: 320px; }
.practice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practice-heading h2 { margin: 0; font: 400 20px/1 var(--font-display); }
.practice-panel .practice-heading button { min-width: 64px; padding: 8px 12px; background: var(--teal); color: var(--parchment-bright); border-color: var(--wood-dark); font-weight: 800; }
.practice-tools[hidden] { display: none; }
.practice-state { margin: 8px 0; padding-top: 0; border: 0; color: var(--ink-muted); font-size: 11px; }
.practice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.practice-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.practice-fields label { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; margin: 0; gap: 5px; }
.practice-panel .practice-fields select, .practice-panel .practice-fields input { width: 100%; min-width: 0; min-height: 40px; padding: 7px 10px; border: 1px solid var(--wood-dark); border-radius: 6px; background-color: var(--parchment-bright); color: var(--ink); }
.practice-panel .practice-actions { margin-top: 14px; }
.practice-panel .practice-transport { margin: 0 0 8px; }
.practice-panel .practice-actions button { min-height: 40px; padding: 6px; }
.practice-panel button { border: 1px solid #ac9166; border-radius: 5px; background: #fff9ed; color: inherit; font: inherit; }
.practice-panel label:has(input[type="checkbox"]) { justify-content: flex-start; min-height: 36px; }
.practice-panel input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); }
.practice-intro { margin: 8px 0 12px; font: 700 12px/1.4 var(--font-body); }
.practice-readout { font: 800 12px/1.4 var(--font-body); }
.practice-record-note { margin: 8px 0 0; color: var(--stamp); font-size: 12px; }
@media (max-width: 600px) {
  #practice-back { top: 16px; left: 16px; }
  .practice-panel { top: 144px; width: 180px; max-height: calc(100% - 292px); }
  .practice-panel.editing { width: calc(100% - 32px); }
}
#practice-back { top:84px; left:16px; }
@media (max-width: 600px) { #practice-back { top: 16px; } }

.control-settings { text-align:left; margin-top:20px; font:14px/1.5 system-ui; }
.control-settings label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0; text-transform:capitalize; }
.binding-grid,.pad-binding-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.control-settings button,.control-settings select { min-height:36px; padding:6px 10px; border:1px solid #9a805c; border-radius:6px; background:#fff4df; color:#35281d; font:inherit; }
.control-settings button:focus-visible,.practice-panel :focus-visible { outline:3px solid #265a9d; outline-offset:3px; }
.control-settings h3 { font-size:18px; }
@media(max-width:600px) { .binding-grid,.pad-binding-grid { grid-template-columns:1fr; } }

.match-rules { margin: 0; width: 100%; border: 2px solid var(--wood-dark); border-radius: 10px; background: var(--parchment); color: var(--ink); font: 800 13px/1.4 var(--font-body); }
.match-rules summary { cursor: pointer; padding: 12px 14px; }
.match-rules[open] { padding-bottom: 12px; }
.match-rules .pause-option { margin: 0 14px; padding: 12px 0; border-top: 1px solid #cbb894; gap: 5px 14px; }
.match-rules .pause-option > small { opacity: 1; color: var(--ink-soft); font-size: 11px; }
.board-footer .ready-button { width: 100%; }
.controls-card { max-height:calc(100dvh - 32px); overflow-y:auto; }

.controls-card { padding-top:48px; }
.controls-card .dialog-close { top:10px; right:10px; }
.controls-card .dialog-back,.controls-card #controls-back { top:10px; left:10px; }
.controls-card { padding: 28px; }
.controls-card .pause-kicker { margin: 0 0 18px; }
.controls-card h2 { margin: 0 40px 20px 0; color: var(--parchment-bright); font: 400 34px/1.05 var(--font-display); }
.controls-card .control-settings { margin: 0 0 18px; color: var(--parchment-bright); font: 600 14px/1.5 var(--font-body); }
.control-settings-group { border-top: 1px solid rgba(243,233,207,.3); }
.control-settings-group:last-of-type { border-bottom: 1px solid rgba(243,233,207,.3); }
.control-settings-group > summary { padding: 13px 0; cursor: pointer; font: 800 14px/1.3 var(--font-body); }
.control-settings-body { padding: 0 0 16px; }
.control-settings-body > p { margin: 0 0 12px; }
.controls-card .control-settings label { text-transform: none; }
.controls-card .pad-binding-grid label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.controls-card .pad-binding-grid select { width: 100%; }
.controls-card .control-settings button, .controls-card .control-settings select { min-height: 40px; }
.controls-card .control-settings button:disabled { opacity: .45; cursor: default; }
.controls-card .control-settings label:has(input[type="checkbox"]) { justify-content: flex-start; min-height: 40px; }
.controls-card .control-settings input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }
.controls-card [data-deadzone-value] { display: block; color: var(--gold); font-size: 12px; }
.controls-card .control-settings [role="status"]:empty { display: none; }
.controls-card .controller-calibration h3 { display: none; }
.controls-card .controller-calibration p { font: 600 14px/1.5 var(--font-body); }
.controls-card .controller-calibration button { margin: 4px 4px 4px 0; }
.controls-card .controls-close { min-height: 46px; margin: 0; }
.controls-card summary:focus-visible, .controls-card button:focus-visible, .controls-card select:focus-visible, .controls-card input:focus-visible { outline: 3px solid var(--gold-hot); outline-offset: 3px; }
@media (max-width: 600px) {
  .controls-card { padding: 22px 16px; }
  .controls-card .controls-columns { grid-template-columns: 1fr 1fr; gap: 8px; }
  .controls-card .controls-column { padding: 10px 8px; }
  .controls-card .controls-row { flex-wrap: wrap; gap: 3px 5px; font-size: 11px; }
  .controls-card .controls-row kbd { padding: 2px 4px; font-size: 10px; }
}

.controller-focus { outline: 3px solid #ffe17a !important; outline-offset: 3px; }

.room-keypad { box-sizing: border-box; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 3px solid #392b20; border-radius: 16px; padding: 20px; color: #29241b; background: #fff7e4; font-family: var(--font-body); }
.room-keypad::backdrop { background: rgba(12, 22, 12, .75); }
.room-keypad h2 { margin: 0 0 12px; }
.room-keypad output { display: block; font: 700 28px monospace; letter-spacing: .15em; min-height: 36px; text-align: center; }
.room-keypad p { font-size: 14px; line-height: 1.4; }
.room-keypad-keys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.room-keypad-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.room-keypad button { min-height: 44px; border: 2px solid #65533b; border-radius: 6px; background: #fffdf5; color: #29241b; font: 700 15px sans-serif; cursor: pointer; }
.room-keypad button:disabled { opacity: .45; cursor: default; }
.room-keypad button.controller-focus, .room-keypad button:focus-visible { outline: 3px solid #21766c !important; outline-offset: 2px; }

/* Align the two selection figures above their shared caption baseline. */
@media (min-width: 1001px) {
  .board-figure-p1 { padding-bottom: 34px; }
  .figure-portrait img { max-width: 100%; object-fit: contain; }
  .figure-tag-cpu { font-size: clamp(13px, 1.3vw, 18px); }
}

/* Keep the compact roster near the top, beside a small fighter introduction. */
@media (max-width: 600px) {
  .menu-heading { gap: 14px; padding-top: 14px; }
  .menu-meta { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .menu-meta > .opponent-mode .opponent-mode-chip { padding: 8px 10px; }
  .menu-heading h1 { font-size: clamp(24px, 7vw, 36px); }
  .board-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
  .board-row > *, .board-center > * { grid-column: 1 / -1; }
  .board-figure-p1 { grid-column: 1; grid-row: 1 / span 2; }
  .board-figure-p1 .figure-portrait { height: 150px; }
  .board-figure-p1 .figure-tag { padding: 4px 10px; font-size: 11px; }
  .board-kicker-block { grid-column: 2; grid-row: 1; align-self: end; }
  .board-name { font-size: 28px; }
  .board-read { font-size: 12px; line-height: 1.35; }
  .signature-plaque { grid-column: 2; grid-row: 2; align-self: start; padding: 7px 9px; gap: 6px; }
  .signature-copy small { font-size: 8px; letter-spacing: .04em; }
  .signature-copy b { font-size: 13px; }
  .roster-box { grid-row: 3; padding: 10px; }
  .roster-box-kicker { font-size: 10px; letter-spacing: .04em; }
  .roster-grid { --roster-gap: 8px; }
  .roster-tile { height: 96px; }
  .board-footer { position: static; }
}

@media (max-width: 760px) {
  .signature-reveal-portrait { width: 46%; height: 38%; bottom: 30%; object-fit: contain; object-position: center bottom; }
  .signature-reveal-portrait-p1 { left: 2%; }
  .signature-reveal-portrait-cpu { right: 2%; }
}


/* Stage choice uses its own board so setup does not move below the viewport. */
.stage-picker-card { width: min(960px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; border: 4px solid var(--wood-dark); border-radius: 18px; background: var(--parchment-bright); box-shadow: var(--shadow-lift); }
.stage-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.stage-picker-heading h2 { margin: 0; color: var(--ink); font: 400 clamp(22px, 3vw, 32px)/1 var(--font-display); }
#stage-picker-close { padding: 10px 18px; border: 2px solid var(--wood-dark); border-radius: 7px; background: var(--parchment-bright); color: var(--ink); font: 800 14px var(--font-body); cursor: pointer; }
.stage-picker-card .yard-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; padding: 4px; }
.stage-picker-card .yard-thumb { width: 100%; height: auto; aspect-ratio: 1.45; display: flex; flex-direction: column; background: var(--wood-dark); }
.stage-picker-card .yard-thumb img { min-height: 0; flex: 1; height: 0; }
.stage-picker-card .yard-thumb-name { position: static; min-height: 40px; display: grid; place-items: center; padding: 6px; border-radius: 0; font: 400 16px/1.15 var(--font-display); }
.stage-picker-card .yard-thumb.picked::after { content: 'SELECTED'; position: absolute; top: 8px; right: 8px; padding: 4px 7px; border-radius: 4px; background: var(--gold); color: var(--ink); font: 900 10px var(--font-body); }
.stage-picker-card button:focus-visible { outline: 3px solid var(--p1); outline-offset: 3px; }
@media (max-width: 600px) { .stage-picker-card { padding: 14px; } .stage-picker-card .yard-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .stage-picker-card .yard-thumb { aspect-ratio: 1.1; } .stage-picker-card .yard-thumb-name { font-size: 14px; } }


/* Keep the match action distinct from preferences and the exit. */
.pause-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pause-preferences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; grid-column: 1 / -1; padding: 12px 0; border-top: 1px solid rgba(243,233,207,.2); border-bottom: 1px solid rgba(243,233,207,.2); }
.audio-settings { grid-column: 1 / -1; color: var(--ply, #f3e9cf); text-align: left; font-size: 14px; }
.audio-settings .audio-level-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.audio-settings summary { cursor: pointer; padding: 10px 0; }
.audio-settings summary, .audio-settings .audio-mono { grid-column: 1 / -1; }
.audio-settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.audio-settings input[type="range"] { width: 100%; min-height: 28px; margin: 0 0 8px; accent-color: var(--gold); }
.audio-settings .audio-mono { justify-content: flex-start; padding: 8px 0; }
.audio-settings summary:focus-visible, .audio-settings input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#pause-menu #pause-resume { grid-column: 1 / -1; color: var(--parchment-bright); background: linear-gradient(180deg, #3aa197, #276f69); border-color: #193f3a; min-height: 54px; font-size: 17px; }
#pause-menu #pause-leave-match { grid-column: 1 / -1; margin-top: 4px; background: transparent; color: var(--parchment-bright); border-color: rgba(243,233,207,.5); box-shadow: none; }
@media (max-width: 600px) { #pause-menu .pause-preferences button { padding: 10px 5px; letter-spacing: .03em; font-size: 11px; } }

/* Replay tools stay available below the next-match actions. */
.result-replay-actions { display: grid; gap: 8px; padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(243,233,207,.3); }
#match-result .result-replay-actions button[data-action] { min-height: 40px !important; font-size: 12px !important; padding: 8px 12px !important; }

/* The connected friend is shown in the lobby; do not show a stale CPU here. */
body.online-mode .board-figure-cpu .figure-portrait-button,
body.online-mode .board-figure-cpu .figure-shadow { display: none; }
body.online-mode .board-figure-cpu { align-self: center; }

.lobby-fighter-choice { display: grid; gap: 6px; margin-top: 12px; color: var(--parchment-bright); font-size: 11px; letter-spacing: .08em; }
.lobby-fighter-choice[hidden] { display: none; }
.lobby-fighter-choice select { width: 100%; min-height: 42px; padding: 8px 12px; border: 2px solid var(--wood-dark); border-radius: 8px; background: var(--parchment-bright); color: var(--ink); font: 700 15px var(--font-body); }
@media (max-width: 520px) { .lobby-slots { grid-template-columns: 1fr auto 1fr; gap: 8px; } .lobby-slot { padding: 10px 6px; } .lobby-slot-portrait { width: 56px; height: 56px; } }

.lobby-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lobby-fighter-choice select:disabled { opacity: .8; }
@media (max-width: 520px) { .lobby-setup { grid-template-columns: 1fr; gap: 0; } }

.lobby-custom-rules { margin-top: 14px; color: var(--parchment-bright); font-size: 13px; }
.lobby-custom-rules summary { cursor: pointer; padding: 8px 0; }
.lobby-rule-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lobby-rule-fields .lobby-fighter-choice { margin-top: 0; }
@media (max-width: 520px) { .lobby-rule-fields { grid-template-columns: 1fr; } }
.lobby-card { max-height: calc(100dvh - 48px); overflow-y: auto; transform: none; padding-top: 54px; }
.lobby-card > .back-tag { top: 10px; left: 12px; }
.lobby-card > .dialog-close { top: 10px; right: 12px; }
.lobby-card { padding: 28px; }
.lobby-card .pause-kicker { margin: 0 0 18px; }
.lobby-card h2 { margin: 0 40px 18px 0; font: 400 32px/1.05 var(--font-display); color: var(--parchment-bright); }
.lobby-card .lobby-code-block { margin: 0 0 18px; }
.lobby-card .lobby-code-big { font-size: 42px; letter-spacing: .2em; padding: 8px 20px; }
.lobby-card .lobby-code-actions button { min-height: 40px; padding: 8px 18px; font: 800 12px/1.2 var(--font-body); }
.lobby-card .lobby-share-link { font: 600 12px/1.4 var(--font-body); }
.lobby-card .lobby-slot-waiting .lobby-slot-name { animation: none; color: var(--parchment-bright); font: 700 13px/1.3 var(--font-body); }
.lobby-card .lobby-slot-waiting .lobby-slot-portrait { animation: none; opacity: .7; }
.lobby-card .lobby-rules { font: 600 12px/1.4 var(--font-body); opacity: 1; }
.lobby-card .lobby-status { font: 700 13px/1.4 var(--font-body); }
.lobby-card .lobby-status[data-tone="error"] { color: #ffc2a7; }
.lobby-card .lobby-actions button { min-height: 44px; font: 400 17px/1.2 var(--font-display); }
.lobby-card #lobby-leave { background: transparent; color: var(--parchment-bright); border-color: var(--ply); }
.lobby-card .lobby-actions:has(#lobby-ready[hidden]) #lobby-leave { grid-column: 1 / -1; }
.lobby-card #lobby-host-again { order: -1; }
.lobby-card button:focus-visible, .lobby-card select:focus-visible, .lobby-card summary:focus-visible { outline: 3px solid var(--gold-hot); outline-offset: 3px; }
@media (max-width: 520px) {
  .lobby-card { padding: 22px 16px; }
  .lobby-card h2 { font-size: 28px; }
  .lobby-card .lobby-code-big { font-size: 34px; padding: 8px 14px; }
}

.stage-picker-card .yard-thumb > img { filter: brightness(.82); }
.yard-layout { position: absolute; inset: 12% 5% 24%; width: 90%; height: 64%; pointer-events: none; filter: drop-shadow(0 3px 2px #14201d); }
.yard-layout rect { fill: #fff1bd; stroke: #26342c; stroke-width: 2; vector-effect: non-scaling-stroke; paint-order: stroke fill; }

@media (min-width: 1001px) {
  .board-center { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .board-center > * { grid-column: 1 / -1; }
  .board-kicker-block { grid-column: 1; }
  .signature-plaque { grid-column: 2; align-self: center; }
  .board-name { font-size: clamp(28px, 3vw, 42px); }
  .board-read { font-size: 13px; line-height: 1.35; max-width: 32ch; }
}

/* Ladder progress belongs beside the result, before its next action. */
#match-result[data-ladder-state="active"] .match-result-card,
#match-result[data-ladder-state="complete"] .match-result-card {
  grid-template-areas: "stamp actions" "title actions" "summary actions" "record actions" "outcome actions" "stamps actions";
}
.match-result-ladder-record { grid-area: record; }
.match-result-ladder-outcome { grid-area: outcome; }
.match-result-ladder-stamps { grid-area: stamps; }
.ladder-stamps-title { flex-basis: 100%; font-size: 14px; color: var(--parchment-bright); }
@media (max-width: 680px) and (orientation: portrait) {
  #match-result[data-ladder-state="active"] .match-result-card,
  #match-result[data-ladder-state="complete"] .match-result-card {
    grid-template-areas: "stamp" "title" "summary" "record" "outcome" "stamps" "actions";
  }
}

@media (max-width: 680px) and (orientation: portrait) {
  #onboarding-skip { min-height: 44px; padding: 8px 10px; font-size: 11px; }
  #onboarding-skip .back-tag-arrow, #onboarding-skip .onboarding-skip-hint { display: none; }
}

/* Shared loading and recovery card. */
#boot-loading { z-index: 20; }
.yard-state-card {
  position: relative; z-index: 1; width: min(540px, 100%); margin: auto;
  padding: clamp(24px, 5vw, 44px); text-align: center; color: var(--ink, #2a1d10);
  background: repeating-linear-gradient(0deg, transparent 0 5px, #9d73300a 5px 6px), #f3e9cf;
  border: 3px solid #4a2e15; border-radius: 18px;
  box-shadow: 0 5px 0 #9b6c37, 0 14px 28px #2a1d1033;
}
.yard-state-card h1 { margin: 0 0 16px; font: 400 clamp(28px, 4vw, 42px)/1.06 var(--font-display); }
.yard-state-card p { margin: 0; font: 800 15px/1.5 var(--font-body); }
.yard-state-card .yard-state-brand { margin-bottom: 22px; color: #72542f; font-size: 12px; letter-spacing: .08em; }
.yard-state-card button { margin-top: 26px; min-height: 46px; padding: 10px 24px; border: 3px solid #4a2e15; border-radius: 12px; background: #2f8b83; color: #fff4db; font: 400 17px/1.2 var(--font-display); cursor: pointer; }
.yard-state-card button:hover { background: #23766e; }
.yard-state-card button:focus-visible { outline: 4px solid #ffd052; outline-offset: 4px; }
.yard-loading-mark { display: block; width: 22px; height: 22px; margin: 24px auto 0; border: 4px solid #cdbd98; border-top-color: #2f8b83; border-radius: 50%; animation: yard-loading 1s linear infinite; }
@keyframes yard-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .yard-loading-mark { animation: none; } }

/* Short landscape screens keep the roster ahead of setup. */
@media (min-width: 601px) and (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) {
  .menu-heading { padding: 4px 6px 10px; gap: 12px; align-items: center; }
  .menu-heading h1 { font-size: 26px; gap: 8px; }
  .menu-sign { padding: 7px 10px; border-width: 3px; }
  .menu-meta { flex-direction: row; align-items: center; }
  .board-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 0 6px 16px; }
  .board-center { display: contents; }
  .board-figure-p1 { display: none; }
  .board-kicker-block { grid-column: 1; grid-row: 1; }
  .board-kicker { font-size: 9px; }
  .board-name { font-size: 25px; }
  .board-read { font-size: 11px; line-height: 1.3; max-width: 44ch; }
  .signature-plaque { grid-column: 2; grid-row: 1; padding: 8px 10px; align-self: center; max-width: 240px; }
  .signature-copy small { font-size: 8px; }
  .signature-copy b { font-size: 14px; }
  .roster-box { grid-column: 1 / -1; grid-row: 2; padding: 9px 10px 10px; gap: 8px; }
  .roster-grid { --roster-cols: 7; --roster-gap: 8px; }
  .roster-tile { height: 104px; }
  .board-figure-cpu { grid-column: 1 / -1; grid-row: 3; }
  .match-setup-grid { grid-column: 1 / -1; grid-row: 4; }
  .match-rules, .online-panel, .board-footer, .menu-help { grid-column: 1 / -1; }
  .board-footer { position: static; }
  .ready-button { min-height: 46px; padding: 12px 20px; font-size: 22px; }
}

@media (max-width: 1000px) {
  body.online-mode .board-row { display: flex; flex-direction: column; align-items: stretch; }
  body.online-mode .board-figure-p1 { display: none; }
  body.online-mode .board-center > .online-panel { order: 0; }
}
@media (max-width: 1000px) {
  body.online-mode .board-kicker-block { align-self: stretch; }
}
@media (max-width: 1000px) {
  body.online-mode .signature-plaque { align-self: flex-start; }
}

#online-join:disabled { cursor: progress; opacity: .7; }
#online-code-input[readonly] { color: var(--ink-soft); background: var(--parchment-aged); }

.room-keypad output { padding: 10px 0; border: 2px solid #c7b895; border-radius: 8px; background: #f2e7cb; font-size: 24px; letter-spacing: 0; }
.room-keypad-help { color: #65533b; }
.room-keypad button[data-edit="done"] { color: #fff7e4; background: #21766c; border-color: #174c45; }
@media (min-width: 601px) and (max-height: 520px) and (orientation: landscape) {
  .room-keypad { width: min(760px, calc(100vw - 24px)); padding: 16px; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.5fr); gap: 12px 20px; }
  .room-keypad:not([open]) { display: none; }
  .room-keypad-intro { grid-row: 1 / 3; }
  .room-keypad h2 { font-size: 22px; }
  .room-keypad-keys { gap: 6px; }
  .room-keypad-actions { margin-top: 0; gap: 6px; }
}

@media (max-width: 360px) {
  .room-keypad { padding: 14px; }
  .room-keypad-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .room-keypad-actions button { font-size: 13px; padding: 2px; }
}

#rematch-status { margin: 0; color: var(--parchment-bright); font: 700 14px/1.4 var(--font-body); }
@media (min-width: 601px) and (max-height: 520px) and (orientation: landscape) {
  #match-result:not([data-ladder-state="active"]):not([data-ladder-state="complete"]) .match-result-card { grid-template-columns: minmax(0, 1fr) minmax(270px, 40%); }
  #match-result:not([data-ladder-state="active"]):not([data-ladder-state="complete"]) .result-replay-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 10px; }
  #match-result:not([data-ladder-state="active"]):not([data-ladder-state="complete"]) .result-replay-actions button[data-action] { padding: 6px !important; font-size: 10px !important; min-height: 44px !important; }
}


/* Desktop selection: one paper board with clear roster, setup, and action rows. */
@media (min-width: 1001px) {
  .game-overlay { padding: 24px; }
  .match-menu { min-height: 0; margin: 0 auto; align-content: start; }
  .menu-heading { align-items: center; padding: 0 8px 28px; }
  .menu-heading h1 { font-size: clamp(28px, 3.2vw, 42px); }
  .board-row { grid-template-columns: minmax(120px, 190px) minmax(0, 800px) minmax(120px, 190px); gap: 20px; align-items: center; padding: 0 0 28px; }
  .board-center { padding: 26px; gap: 20px 16px; border-radius: 22px; background: #f4ebd6; box-shadow: 0 2px 0 #624629, 0 12px 28px #33241430, inset 0 0 0 1px #fff7e6; }
  .board-kicker { color: #756347; font-size: 10px; }
  .board-name { font-size: clamp(26px, 2.7vw, 38px); text-shadow: none; }
  .board-read { font-size: 12px; font-weight: 700; }
  .signature-plaque { padding: 6px 0 6px 16px; border: 0; border-left: 1px solid #cdbd9d; border-radius: 0; background: none; box-shadow: none; max-width: 190px; }
  .signature-copy small { font-size: 9px; letter-spacing: .04em; }
  .signature-copy b { font-size: 14px; }
  .roster-box { padding: 18px 0 0; gap: 16px; border: 0; border-top: 1px solid #d3c4a5; border-radius: 0; background: none; box-shadow: none; }
  .roster-box-kicker { color: #65563e; font-size: 10px; }
  .picking-toggle { border: 0; padding: 3px; background: #ded2b9; }
  .picking-toggle-chip { min-height: 30px; background: transparent; letter-spacing: .05em; }
  .roster-grid { --roster-gap: 8px; }
  .roster-tile { height: clamp(116px, 15vh, 140px); border-width: 2px; border-radius: 9px; box-shadow: 0 2px 3px #35281925; }
  .roster-tile .roster-tile-name { font-size: 12px; }
  .match-setup-grid { gap: 0; border-top: 1px solid #d3c4a5; border-bottom: 1px solid #d3c4a5; padding: 16px 0; }
  .match-setup-grid > * { border: 0; border-radius: 0; background: none; padding: 0 16px; }
  .match-setup-grid > :first-child { padding-left: 0; }
  .match-setup-grid > :last-child { padding-right: 0; }
  .match-setup-grid .opponent-setup { border-left: 1px solid #d3c4a5; }
  .match-setup-grid .yard-line strong { font-size: 17px; }
  .match-setup-grid .yard-line-change, .cpu-level-stepper button, .ladder-tag { border-color: #bdac8c; background: #fff8e8; min-height: 36px; }
  .match-setup-grid .yard-line-change { padding: 8px 10px; }
  .opponent-setup-options { justify-content: center; }
  .match-rules { border: 0; border-radius: 0; background: none; margin-top: -10px; }
  .match-rules summary { padding: 8px 0; color: #65563e; font-size: 12px; }
  .ready-button { min-height: 52px; border: 1px solid #205e56; border-radius: 10px; background: linear-gradient(#338d82, #26796f); box-shadow: 0 3px 0 #20594f; font-size: 20px; letter-spacing: .08em; }
  .ready-button::before, .ready-button::after { display: none; }
  .menu-help { margin: 0; gap: 8px 16px; justify-content: flex-start; font-size: 12px; color: #65563e; }
  .menu-help .start-key-hint { margin-right: auto; }
  .menu-help-hint { min-height: 32px; }
  .menu-help-hint:focus-visible { outline: 2px solid #26796f; outline-offset: 3px; border-radius: 3px; }
  .menu-help kbd { box-shadow: none; border: 1px solid #bdac8c; background: #fff8e8; }
  .figure-portrait, .figure-portrait-cpu { height: min(360px, 43vh); }
  .board-figure { align-self: start; padding-top: 120px; }
  .figure-tag { font-size: 13px; padding: 7px 12px; border-width: 2px; }
  .opponent-caption { font-size: 11px; }
}
@media (min-width: 1001px) and (max-height: 760px) {
  .game-overlay { padding: 18px 24px; }
  .menu-heading { padding-bottom: 18px; }
  .board-center { padding: 20px; gap: 14px 12px; }
  .roster-box { padding-top: 14px; gap: 12px; }
  .match-setup-grid { padding: 12px 0; }
}


/* Connected selection and learning flow. */
.roster-box-head { align-items: stretch; }
.picking-toggle { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: none; padding: 0; border: 0; }
.picking-toggle-chip, .picking-toggle-chip[data-picking] { display: grid; gap: 5px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid #bfad8a; background: #fff8e8; color: #52432e; }
.picking-toggle-chip span { font: 700 11px/1.2 var(--font-body); letter-spacing: .02em; }
.picking-toggle-chip strong { font: 400 18px/1.1 var(--font-display); letter-spacing: .01em; }
.picking-toggle-chip[aria-checked="true"] { background: #e3edf6; color: #214f7e; border-color: #3677b9; box-shadow: inset 0 0 0 1px #3677b9; }
.picking-toggle-chip[data-picking="cpu"][aria-checked="true"] { background: #f7e6df; color: #932f23; border-color: #c25340; box-shadow: inset 0 0 0 1px #c25340; }
.setup-heading { margin: 0; font: 900 10px/1.3 var(--font-body); letter-spacing: .1em; color: #65563e; }
#ladder-help { color: #65563e; font: 600 11px/1.35 var(--font-body); max-width: 24ch; }
.opponent-setup-options { gap: 10px; }
.board-footer { align-items: center; gap: 20px; }
.launch-summary { flex: 1; min-width: 0; margin: 0; color: #65563e; font: 700 12px/1.5 var(--font-body); }
.board-footer .ready-button { flex: 0 0 46%; width: 46%; padding: 0 12px; }
.help-label { font: 900 9px/1.3 var(--font-body); letter-spacing: .08em; margin-right: auto; }
.learning-selection-note { margin: 0; padding: 12px 14px; border-radius: 8px; background: #e3edf6; color: #214f7e; font: 700 13px/1.5 var(--font-body); }
.learning-selection-note button { border: 0; padding: 0; margin-left: 6px; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.learning-next-card { width: min(600px, 100%); }
.learning-next-card h2 { font: 400 34px/1.1 var(--font-display); margin: 20px 0 12px; }
.learning-next-card > p:not(.pause-kicker) { font: 700 14px/1.5 var(--font-body); margin: 0 0 22px; }
.learning-next-actions { display: grid; gap: 12px; }
.learning-next-actions .welcome-choice { padding: 16px 18px; margin: 0; }
.learning-next-actions [hidden] { display: none; }
.learning-back { margin-top: 20px; padding: 10px 0; border: 0; background: none; color: var(--parchment-bright); font: 800 13px/1.3 var(--font-body); text-decoration: underline; cursor: pointer; }
.learning-next-card :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.learning-next-error { color: #fff0be; }
.result-replay-actions { display: block; }
.result-replay-actions > summary { cursor: pointer; padding: 8px 0; color: var(--parchment-bright); font: 700 13px/1.4 var(--font-body); }
.result-replay-buttons { display: grid; gap: 8px; margin-top: 8px; }
.result-replay-actions > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.lobby-progress { display: flex; gap: 20px; padding: 0 0 16px; margin: 0 0 20px; list-style: none; border-bottom: 1px solid #bd985b; font: 700 12px/1.3 var(--font-body); color: #d4bd94; }
.lobby-progress li[aria-current] { color: #fff3d3; text-decoration: underline; text-underline-offset: 6px; }
.lobby-progress li[data-state="done"] { color: #dcebb4; }
@media (min-width: 1001px) {
  .board-center { gap: 16px; }
  .roster-box { gap: 14px; }
  .roster-box-head { gap: 10px; }
  .match-setup-grid { margin-top: -8px; border-top: 0; padding-top: 0; }
  .picking-toggle { gap: 12px; background: none; }
  .opponent-setup-options { justify-content: flex-start; }
  .menu-help { padding-top: 12px; border-top: 1px solid #d3c4a5; }
}

@media (min-width: 1001px) and (max-height: 760px) {
  .lobby-countdown { margin: 4px 0 6px; }
  .lobby-countdown span { width: 48px; height: 48px; font-size: 28px; }
  .menu-heading { padding-bottom: 12px; }
  .menu-heading h1 { font-size: 30px; }
  .board-center { padding: 18px; gap: 10px 12px; }
  .board-kicker-block { gap: 3px; }
  .board-name { font-size: 26px; }
  .board-read { font-size: 11px; }
  .roster-box { padding-top: 10px; gap: 10px; }
  .roster-box-head { gap: 8px; }
  .picking-toggle-chip, .picking-toggle-chip[data-picking] { padding: 8px 12px; gap: 3px; }
  .roster-tile { height: 112px; }
  .match-setup-grid { margin-top: 0; padding-bottom: 10px; }
  .match-rules { margin-top: -4px; }
  .board-footer .ready-button { min-height: 48px; }
  .menu-help { padding-top: 6px; }
  .board-figure { padding-top: 100px; }
}

.learning-entry .picking-toggle,
.learning-entry .setup-heading,
.learning-entry .match-setup-grid,
.learning-entry .match-rules { display: none; }
.learning-entry .board-figure-cpu { visibility: hidden; }

.learning-entry #fighter-two, .learning-entry .menu-field:has(#stage) { display: none; }

.learning-entry #learn-open { display: none; }

/* Size selection figures by visible bounds, independent of source canvas width. */
.figure-portrait { position: relative; width: 100%; }
.figure-portrait img {
  position: absolute;
  top: 6.81818%;
  left: 50%;
  height: 86.36364%;
  width: auto;
  max-width: none;
  object-fit: fill;
  transform: translateX(calc(-1 * var(--portrait-anchor, 50%)));
  transform-origin: var(--portrait-anchor, 50%) center;
}
.figure-portrait-cpu img { transform: translateX(calc(-1 * var(--portrait-anchor, 50%))) scaleX(-1); }
.figure-portrait-button { width: 100%; }

/* Ground the desktop lineup in the same yard plane as the backdrop. */
@media (min-width: 1001px) {
  .game-overlay { --yard-lawn-height: clamp(170px, 24vh, 250px); }
  .game-overlay::before { bottom: var(--yard-lawn-height); }
  .game-overlay::after { height: calc(var(--yard-lawn-height) + 12px); }
  .board-figure { align-self: end; padding-top: 0; }
  .board-figure .figure-tag { margin-bottom: -60px; }
  .figure-portrait img {
    /* Normalized portrait feet are at 94% of the image height. */
    top: 18.81818%;
    filter: none;
  }
  .figure-shadow, .figure-shadow-cpu {
    width: 52%;
    height: 14px;
    margin-top: -7px;
    background: radial-gradient(ellipse, #24351566 0%, #24351530 40%, transparent 72%);
  }
  .board-figure-p1 { padding-bottom: 33px; }
}

/* Match selection: roster first, visible arena, then session settings. */
.figure-copy { display: none; }
.stage-preview-button { cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.stage-preview-picture { position: relative; display: block; overflow: hidden; border-radius: 7px; }
.stage-preview-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-preview-picture .yard-layout { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-preview-copy { display: flex; flex-direction: column; gap: 5px; }
#selected-stage-detail { font-size: 11px; line-height: 1.35; font-weight: 700; color: #65563e; }
.stage-preview-action { color: #236d65; font-size: 11px; font-weight: 900; }
.match-type-choice { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: #e7dcc6; }
.match-type-choice[hidden], #ladder-help[hidden] { display: none; }
.match-type-choice button { flex: 1; min-height: 38px; padding: 7px 10px; border: 1px solid transparent; border-radius: 5px; color: #66553c; background: transparent; font: 800 12px/1.3 var(--font-body); cursor: pointer; }
.match-type-choice button[aria-pressed="true"] { border-color: #c8b58f; color: #302519; background: #fff8e8; box-shadow: 0 1px 3px #49382118; }
.match-type-choice button:disabled { opacity: .6; cursor: wait; }
.stage-preview-button:focus-visible, .match-type-choice button:focus-visible { outline: 3px solid #246eaf; outline-offset: 3px; }
.stage-preview-button:hover .stage-preview-action { text-decoration: underline; text-underline-offset: 3px; }
.learning-entry .match-type-choice { display: none; }
@media (min-width: 1001px) {
  .board-row { min-height: calc(100dvh - 178px); align-items: start; }
  .board-center { align-self: start; gap: 18px; padding: 26px; margin-top: 40px; }
  .board-center > .board-kicker-block { display: none; }
  .board-figure-p1 > .figure-tag { display: none; }
  .figure-copy { display: flex; flex-direction: column; gap: 7px; position: absolute; bottom: calc(100% - 50px); width: 100%; text-align: center; }
  .figure-copy-kicker { color: #154f88; font: 900 10px/1.3 var(--font-body); letter-spacing: .1em; }
  .figure-copy strong { font: 400 27px/1.05 var(--font-display); color: #302519; text-shadow: 0 1px #fff8; }
  .figure-copy p { margin: 0; font: 800 11px/1.45 var(--font-body); color: #352715; }
  .roster-box { padding: 0; gap: 16px; border: 0; }
  .roster-box-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .roster-box-kicker { font-size: 11px; }
  .picking-toggle { display: flex; width: auto; gap: 4px; }
  .picking-toggle-chip, .picking-toggle-chip[data-picking] { display: block; padding: 10px 13px; min-height: 40px; border-radius: 6px; font-size: 12px; letter-spacing: 0; }
  .picking-toggle-chip strong { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .roster-grid { --roster-gap: 8px; }
  .roster-box .signature-plaque { max-width: none; border: 0; padding: 0; gap: 8px; align-self: start; }
  .signature-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
  .signature-copy b { font-size: 13px; }
  .signature-icon { width: 17px; height: 17px; }
  .setup-heading { display: none; }
  .match-setup-grid { margin: 0; padding: 18px 0; border-top: 1px solid #d3c4a5; }
  .match-setup-grid .stage-preview-button { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 0 16px 0 0; border: 0; background: none; border-radius: 6px; }
  .stage-preview-picture { width: 112px; height: 94px; }
  .match-setup-grid .yard-line strong { font-size: 16px; line-height: 1.15; }
  .match-setup-grid .opponent-setup { padding-left: 18px; gap: 12px; }
  .match-type-choice .ladder-tag { margin: 0; }
  .opponent-setup-options { justify-content: start; }
  .opponent-setup-options:has(#ladder-help[hidden]):has(#cpu-level-rung-note[hidden]) { display: none; }
  #ladder-help { font-size: 11px; }
  .launch-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .board-footer .ready-button { flex: 1; width: 100%; }
  .board-footer { margin-top: -6px; }
  .game-overlay::before { filter: none; opacity: .86; }
  .game-overlay::after { background-image: radial-gradient(ellipse at 14px 12px, #79c862 12px, transparent 13px), linear-gradient(180deg, #79c862 0%, #69b75a 30%, #569648 76%, #b48d5a 100%); background-position: 0 0, 0 12px; background-size: 28px 24px, auto calc(100% - 12px); background-repeat: repeat-x; }
}
@media (min-width: 1001px) and (max-height: 760px) {
  .board-row { min-height: calc(100dvh - 133px); }
  .board-center { margin-top: 4px; padding: 20px; gap: 12px; }
  .match-setup-grid { padding: 12px 0; }
  .figure-copy strong { font-size: 24px; }
  .figure-copy p { font-size: 10px; }
}
@media (max-width: 1000px) {
  .stage-preview-button { display: flex; gap: 12px; align-items: center; }
  .stage-preview-picture { flex: 0 0 100px; height: 80px; }
  .roster-box .signature-plaque { margin-top: 8px; }
}

/* Yard review: stable rules row and a fighter-first online setup. */
.match-rules { display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; border-radius:0; background:none; padding:0; margin:0; }
.match-rules > span { display:grid; gap:3px; }
.match-rules strong { font-size:12px; }
.match-rules small { font-size:11px; color:#65563e; font-weight:600; }
.match-rules button { min-height:36px; padding:6px 12px; border:1px solid #c5ae87; border-radius:6px; background:#fff8e8; color:#463821; font:800 12px var(--font-body); cursor:pointer; }
#rules-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; box-sizing:border-box; padding:24px; border:2px solid #644729; border-radius:18px; background:var(--parchment); color:var(--ink); box-shadow:0 18px 70px #1e1b1a66; }
#rules-dialog::backdrop { background:#142d35aa; }
.rules-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.rules-heading h2 { margin:0; font:400 28px var(--font-display); }
#rules-dialog button { min-height:40px; padding:8px 14px; border:1px solid #b79d75; border-radius:6px; background:#fff8e8; color:var(--ink); font:800 12px var(--font-body); cursor:pointer; }
#rules-close { background:#287f79 !important; color:#fff8e8 !important; }
.rules-intro { font:600 12px/1.5 var(--font-body); color:#65563e; margin:12px 0 20px; }
#rules-dialog .pause-option { padding:16px 0; border-top:1px solid #d7c4a0; }
#rules-dialog .pause-option small { color:#65563e; opacity:1; }
#rules-standard { margin-top:16px; }
#rules-dialog :focus-visible, #rules-open:focus-visible { outline:3px solid #287f79; outline-offset:3px; }
body.online-mode .match-setup-grid, body.online-mode .match-rules, body.online-mode .setup-heading { display:none; }
body.online-mode .board-center > .online-panel { order:9; border:0; border-top:1px solid #d7c4a0; border-radius:0; padding:20px 0 0; background:none; gap:8px; }
.online-intro { margin:0; font:400 22px/1.2 var(--font-display); }
.online-description { margin:0 0 10px; font:600 12px/1.5 var(--font-body); color:#65563e; }
body.online-mode .menu-help { order:10; }
.yard-layout { filter:drop-shadow(0 2px 2px #171b2455); }
#rules-dialog .pause-option { grid-template-columns:minmax(0,1fr) 155px; font:700 13px/1.4 var(--font-body); }
#rules-dialog .pause-option small { font-size:12px; }
@media (max-width:480px) { #rules-dialog { padding:18px; } #rules-dialog .pause-option { grid-template-columns:minmax(0,1fr) 130px; gap:4px 10px; } }

/* Keep fighter identity readable over the fence at short desktop heights. */
@media (min-width:1001px) {
  .figure-copy { box-sizing:border-box; padding:14px 12px; gap:7px; border:1px solid #cbb88e; border-radius:12px; background:#fff3d8; box-shadow:0 3px 0 #6e4a2526; }
  .figure-copy-kicker { color:#174e78; font-size:11px; }
  .figure-copy strong { font-size:27px; line-height:1.1; color:#2c2116; text-shadow:none; }
  .figure-copy p { color:#493923; font-size:13px; font-weight:700; line-height:1.5; }
}

/* One frame radius for the portrait and name plate; seat tags stay outside. */
.roster-tile { border-radius:9px; }
.roster-tile-art { border-radius:6px; }
.roster-tile-copy { border-radius:0 0 6px 6px; }
.roster-tile .roster-tile-copy { box-shadow:inset 0 1px 0 #ffffff40; }
@media (min-width:1001px) {
  .roster-tile-art { border-radius:7px; }
  .roster-tile-copy { border-radius:0 0 7px 7px; }
}

/* Medium-width setup keeps the roster and action together on one paper panel. */
@media (min-width: 601px) and (max-width: 1000px) and (min-height: 521px) {
  .game-overlay { padding: 20px; }
  .match-menu { min-height: 0; margin: 0 auto; }
  .menu-heading { padding: 0 0 24px; align-items: center; gap: 12px; }
  .menu-heading h1 { font-size: 30px; gap: 8px; }
  .menu-sign { padding: 8px 12px; border-width: 3px; }
  .menu-subtitle { display: none; }
  .menu-meta { flex-direction: row; align-items: center; }
  .board-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: start; gap: 20px; padding: 20px; border: 1px solid #dfd0af; border-radius: 18px; background: #f4ebd6; box-shadow: 0 3px 0 #6e4a2533, 0 12px 28px #33241426; }
  .board-center { display: flex; padding: 0; gap: 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .board-center > * { order: 0; }
  .board-center > .board-kicker-block, .board-figure-p1 > .figure-tag, .board-figure-cpu { display: none; }
  .board-figure-p1 { order: 0; align-self: start; padding-top: 26px; }
  .figure-copy { display: flex; position: static; flex-direction: column; gap: 8px; text-align: center; padding: 0 4px; }
  .figure-copy-kicker { color: #174e78; font: 900 10px/1.3 var(--font-body); letter-spacing: .08em; }
  .figure-copy strong { color: #2c2116; font: 400 25px/1.08 var(--font-display); }
  .figure-copy p { margin: 0; color: #493923; font: 700 12px/1.5 var(--font-body); }
  .board-figure-p1 .figure-portrait { height: 230px; margin-top: 12px; }
  .board-figure-p1 .figure-portrait img { top: 18.81818%; filter: none; }
  .figure-shadow { width: 62%; height: 12px; margin-top: -6px; background: radial-gradient(ellipse, #24351566, #24351530 40%, transparent 72%); }
  .roster-box { padding: 0; gap: 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .roster-box-head { gap: 10px; }
  .roster-box-kicker { font-size: 10px; color: #65563e; }
  .picking-toggle { gap: 8px; }
  .picking-toggle-chip, .picking-toggle-chip[data-picking] { padding: 8px 10px; min-height: 50px; gap: 3px; }
  .picking-toggle-chip span { font-size: 11px; }
  .picking-toggle-chip strong { font-size: 16px; }
  .roster-grid { --roster-gap: 8px; }
  .roster-tile { height: 102px; border-width: 2px; border-radius: 8px; box-shadow: 0 2px 3px #35281925; }
  .roster-tile .roster-tile-name { font-size: 11px; }
  .roster-tile.active-p1::before, .roster-tile.active-cpu::after { min-width: 30px; padding: 3px 5px; font-size: 10px; }
  .roster-box .signature-plaque { margin: 0; padding: 0; gap: 8px; border: 0; background: none; box-shadow: none; }
  .signature-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .signature-copy small { font-size: 9px; }
  .signature-copy b { font-size: 13px; }
  .signature-icon { width: 18px; height: 18px; }
  .setup-heading { display: none; }
  .match-setup-grid { gap: 14px; padding: 16px 0; border-top: 1px solid #d3c4a5; border-bottom: 1px solid #d3c4a5; }
  .match-setup-grid > * { padding: 0; border: 0; background: none; }
  .match-setup-grid .stage-preview-button { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; text-align: left; }
  .stage-preview-picture { flex: 0 0 78px; height: 86px; }
  .stage-preview-copy { min-width: 0; gap: 4px; }
  .match-setup-grid .yard-line strong { font-size: 15px; }
  #selected-stage-detail { font-size: 10px; }
  .match-type-choice button { min-height: 36px; padding: 6px 8px; font-size: 11px; }
  .match-type-choice .ladder-tag { margin: 0; }
  .opponent-setup-options:has(#ladder-help[hidden]):has(#cpu-level-rung-note[hidden]) { display: none; }
  .cpu-level-stepper { min-width: 0; }
  .cpu-level-stepper button { min-width: 32px; min-height: 36px; }
  #cpu-level-tag { font-size: 10px; }
  .board-footer { position: static; margin: 0; }
  .launch-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .board-footer .ready-button { flex: 1; width: 100%; min-height: 50px; border: 1px solid #205e56; border-radius: 9px; background: linear-gradient(#338d82, #26796f); box-shadow: 0 3px 0 #20594f; font-size: 20px; }
  .ready-button::before, .ready-button::after { display: none; }
  .menu-help { margin: 0; justify-content: flex-start; gap: 4px 12px; font-size: 11px; }
  .help-label { width: 100%; }
  .menu-help-hint { min-height: 32px; }
  .game-overlay::before { top: auto; height: 200px; bottom: 70px; filter: none; opacity: .75; }
  .game-overlay::after { height: 82px; }
  body.online-mode .board-row { display: block; max-width: 720px; margin: 0 auto; }
  body.online-mode .board-center > .online-panel { order: 0; }
}
@media (min-width: 601px) and (max-width: 740px) and (min-height: 521px) {
  .game-overlay { padding: 16px; }
  .menu-heading h1 { font-size: 26px; }
  .board-row { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; }
  .board-row { padding: 16px; }
  .board-center { padding: 0; gap: 14px; }
  .figure-copy { padding: 0; }
  .figure-copy strong { font-size: 21px; }
  .figure-copy p { font-size: 11px; }
  .board-figure-p1 .figure-portrait { height: 180px; }
  .roster-tile { height: 90px; }
  .match-setup-grid { grid-template-columns: 1fr; }
  .match-setup-grid .opponent-setup { flex-direction: column; align-items: stretch; }
  .stage-preview-picture { flex-basis: 92px; height: 65px; }
}

/* Keep the lineup together instead of stretching it to a tall monitor. */
@media (min-width: 1001px) and (min-height: 901px) {
  .match-menu { margin: auto; }
  .board-row { min-height: 720px; }
  .menu-sign::before, .menu-sign::after { top: -100vh; height: 100vh; transform: none; }
  .game-overlay { --yard-lawn-height: calc((100dvh - 900px) / 2 + 210px); }
  .game-overlay::before { top: auto; height: 360px; }
}

/* Victory: give the fighter the stage, then settle the result beside them. */
#match-result { padding: clamp(18px, 4vw, 56px) !important; background: linear-gradient(90deg, transparent, rgba(42,29,16,.12)) !important; }
#match-result::before, #match-result::after,
.match-result-card::before, .match-result-card::after { display: none; }
#match-result .match-result-card {
  grid-template-areas: "stamp" "title" "summary" "record" "outcome" "stamps" "actions";
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center;
  align-items: start;
  gap: 8px;
  width: min(510px, 48%) !important;
  padding: clamp(22px, 3vw, 40px) !important;
  border-width: 4px !important;
  border-radius: 5px 12px 6px 9px !important;
  background: var(--grain-paper), linear-gradient(145deg, #fff2d1, #e6cfa1) !important;
  color: var(--ink) !important;
  transform: none;
  box-shadow: 0 8px 0 var(--wood-dark), 0 20px 45px #2a1d1033, inset 0 0 0 2px #fff4d8 !important;
  max-height: 100%;
  overflow-y: auto;
}
#match-result:not([hidden]) .match-result-card { animation: victory-board-in .5s .35s cubic-bezier(.16,1,.3,1) both; }
#match-result .match-result-row--stagger-in { animation: none; }
#match-result .match-result-card > p:first-child {
  color: var(--wood-dark) !important; background: var(--gold); border: 0;
  box-shadow: none; border-radius: 2px; margin: 0 0 12px !important;
  font-size: 14px !important; letter-spacing: .18em !important; transform: rotate(-2deg);
}
#match-result #match-result-title {
  color: var(--ink) !important; font-size: clamp(38px, 5.4vw, 76px) !important;
  max-width: 14ch; line-height: .97 !important; letter-spacing: -.025em !important;
  text-shadow: 0 2px 0 #fff5da; text-wrap: balance;
}
#match-result #match-result-summary { color: var(--ink-soft) !important; font: 800 15px/1.5 var(--font-body) !important; margin: 10px 0 8px !important; }
#match-result .match-result-card > div:last-child { margin-top: 18px; gap: 10px !important; }
#match-result .result-replay-actions { border-top: 1px solid #4a2e1533; padding-top: 8px; }
#match-result .result-replay-actions > summary { color: var(--wood-dark); }
#match-result .match-result-ladder-record, #match-result .match-result-ladder-outcome { color: var(--wood-dark) !important; }
#match-result .ladder-beaten-stamp { color: var(--wood-dark); }
#match-result .match-result-confetti { z-index: -1; }
@keyframes victory-board-in { from { opacity: 0; transform: translateX(36px) rotate(2deg); } to { opacity: 1; transform: none; } }
@media (min-width: 660px) and (orientation: landscape) {
  #match-result { place-items: center end !important; }
  #match-result[data-outcome="draw"] { place-items: center !important; }
}
@media (orientation: portrait), (max-width: 659px) {
  #match-result { place-items: end center !important; padding: 18px !important; }
  #match-result .match-result-card { width: 100% !important; padding: 20px 24px !important; max-height: 66%; text-align: left !important; justify-items: start; }
  #match-result .match-result-card > p:first-child { justify-self: start; margin-bottom: 4px !important; }
  #match-result #match-result-title { font-size: clamp(34px, 9vw, 54px) !important; }
  #match-result .match-result-card > div:last-child { margin-top: 8px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #match-result { padding: 14px 24px !important; }
  #match-result .match-result-card { width: 52% !important; padding: 16px 20px !important; gap: 3px; }
  #match-result #match-result-title { font-size: 38px !important; }
  #match-result .match-result-card > p:first-child { font-size: 11px !important; margin-bottom: 6px !important; }
  #match-result #match-result-summary { font-size: 12px !important; margin: 5px 0 !important; }
  #match-result .match-result-card > div:last-child { margin-top: 8px; }
}
:root[data-motion="reduced"] #match-result:not([hidden]) .match-result-card { animation: none; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion]) #match-result:not([hidden]) .match-result-card { animation: none; } }
#match-result #rematch-status { color: var(--wood-dark); }

/* Keep the two optional settings groups compact until opened. */
#pause-menu .audio-settings { grid-column: auto; }
#pause-menu .audio-settings[open] { grid-column: 1 / -1; }
#pause-menu .pause-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
@media (max-height: 520px) and (orientation: landscape) {
  #pause-menu .pause-card { transform: none; }
  #pause-menu .pause-preferences { padding: 6px 0; }
  #pause-menu .audio-settings summary { padding: 6px 0; }
  #pause-menu .effect-settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pause-menu .effect-settings-grid label { justify-content: flex-start; font-size: 12px; }
}

/* Show the fighter's base and what the unmodified special actually does. */
.roster-box #fighter-one-signature { width: 100%; max-width: none; align-items: start; gap: 10px; padding: 10px 0 0; border: 0; border-top: 1px solid #d3c4a5; }
#fighter-one-signature .signature-icon { margin-top: 23px; }
#fighter-one-signature .signature-copy { display: grid; flex: 1; gap: 5px; }
.signature-base { color: #65563e; font: 700 11px/1.35 var(--font-body); }
.signature-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; }
#fighter-one-signature .signature-title small { color: #355b58; font-size: 10px; letter-spacing: .04em; }
#fighter-one-signature .signature-description { margin: 0; color: #493923; font: 600 12px/1.4 var(--font-body); }
.special-guide-open { align-self: center; flex: none; padding: 9px 10px; border: 1px solid #b5a383; border-radius: 6px; background: #eee3ca; color: #33291c; font: 800 11px/1.2 var(--font-body); cursor: pointer; }
.special-guide-open:hover { background: #e5d5b5; }
.special-guide-open:focus-visible { outline: 3px solid #2d7c76; outline-offset: 3px; }
.fighter-special-guide { margin: 0 0 20px; padding: 13px 0; border-top: 1px solid #f3e9cf44; border-bottom: 1px solid #f3e9cf44; color: var(--parchment-bright); text-align: left; }
.fighter-special-guide summary { cursor: pointer; font: 800 15px/1.4 var(--font-body); }
.fighter-special-guide summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.special-guide-base { margin: 12px 0 4px; color: var(--gold); font: 800 13px/1.4 var(--font-body); }
.special-guide-note, .special-guide-pad { margin: 6px 0 12px; font: 600 12px/1.5 var(--font-body); }
.special-guide-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid #f3e9cf25; }
.special-guide-row > kbd { justify-self: start; white-space: nowrap; padding: 4px 6px; }
.special-guide-row strong { font: 800 14px/1.35 var(--font-body); }
.special-guide-row p { margin: 4px 0 0; font: 600 12px/1.45 var(--font-body); }
.signature-reveal-base { display: block; margin-top: 8px; font-size: .85em; }
@media (max-width: 600px) {
  .roster-box #fighter-one-signature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  #fighter-one-signature .signature-icon { display: none; }
  .special-guide-open { padding: 10px 8px; }
  .special-guide-row { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
}

/* The picker keeps room art large, then gives the live collision geometry a
   stable footer cue. The SVG is decorative; the button name carries the same
   geometry-derived count for assistive technology. */
.stage-picker-card .yard-thumb > .yard-thumb-art {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.stage-picker-card .yard-thumb-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.82);
}
.stage-picker-card .yard-thumb-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, 34%);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 7px 9px;
  background: linear-gradient(180deg, #302514, #1d1910);
}
.stage-picker-card .yard-thumb-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  align-content: center;
  text-align: left;
}
.stage-picker-card .yard-thumb-name {
  display: block;
  position: static;
  min-height: 0;
  overflow-wrap: anywhere;
  padding: 0;
  border-radius: 0;
  color: #fff4dc;
  font: 400 clamp(13px, 1.4vw, 17px)/1.08 var(--font-display);
  text-align: left;
}
.stage-picker-card .yard-thumb-layout-label {
  color: #f5c542;
  font: 900 10px/1.1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stage-picker-card .yard-thumb-footer .yard-layout {
  position: static;
  display: block;
  width: 100%;
  height: 34px;
  min-width: 0;
  border: 1px solid #f3e3b1;
  border-radius: 4px;
  background: #132d2a;
  filter: none;
}
.stage-picker-card .yard-layout-ground,
.stage-preview-picture .yard-layout-ground {
  stroke: #f5d669;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.stage-picker-card .yard-layout-platform,
.stage-preview-picture .yard-layout-platform {
  fill: #fff1bd;
  stroke: #14231d;
  stroke-width: 1.5;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}
.stage-preview-picture > .yard-layout {
  inset: auto 5px 5px;
  width: calc(100% - 10px);
  height: 28px;
  border: 1px solid #f3e3b1;
  border-radius: 4px;
  background: #132d2ae8;
  filter: none;
}
#selected-stage-detail {
  color: #355b58;
  font-weight: 900;
}
@media (max-width: 600px) {
  .stage-picker-card .yard-thumb-footer {
    grid-template-columns: minmax(0, 1fr) minmax(60px, 38%);
    gap: 5px;
    min-height: 54px;
    padding: 6px;
  }
  .stage-picker-card .yard-thumb-name { font-size: clamp(12px, 3.4vw, 15px); }
  .stage-picker-card .yard-thumb-layout-label { font-size: 9px; }
  .stage-picker-card .yard-thumb-footer .yard-layout { height: 30px; }
}

/* Enemy fly portrait: keep both wings inside the opponent column. */
.figure-portrait-cpu img.fly-portrait { height: 62%; top: 39%; }

/* Fly is an opponent card, available only when choosing the CPU. */
.roster-tile-fly[hidden] { display: none !important; }
.roster-tile-fly .roster-tile-art img { object-fit: contain; object-position: center; left: 0; top: 0; width: 100%; height: 66%; transform: none; }
.roster-tile-fly:disabled { opacity: .5; cursor: not-allowed; }
.opponent-setup-options:has(#fly-connection-note:not([hidden])) { display: flex !important; }

#fighter-one-signature[hidden] { display: none !important; }

/* Keep the roster and download feedback stable across selection and readiness. */
.roster-tile-fly:disabled { opacity: .58; filter: saturate(.45); }
.roster-tile-fly:disabled:hover { transform: none; }
#fly-connection-note { display: grid; gap: 6px; width: 100%; min-width: 0; font: 800 12px/1.4 var(--font-body); color: var(--wood-dark); }
#fly-connection-note[hidden] { display: none; }
.fly-load-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fly-load-value { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.fly-load-track { display: block; height: 5px; overflow: hidden; border-radius: 8px; background: #4a2e151c; }
.fly-load-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: #2f8b83; transform-origin: left; transition: transform .32s ease-out, background-color .2s ease; }
#fly-connection-note[data-phase="ready"] .fly-load-fill { background: #52753e; }
.fly-load-indeterminate .fly-load-fill { width: 30%; animation: fly-download-wait 1.3s ease-in-out infinite alternate; }
@keyframes fly-download-wait { from { transform: translateX(0); } to { transform: translateX(233%); } }
:root[data-motion="reduced"] .fly-load-fill { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .fly-load-fill { transition: none; animation: none; } }

:root[data-motion="reduced"] .fly-load-indeterminate .fly-load-fill { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .fly-load-indeterminate .fly-load-fill { transform: none !important; } }

/* Desktop selection: eight roster cards and the full setup within one view. */
@media (min-width: 1001px) {
  .roster-grid { --roster-cols: 8; --roster-gap: 7px; }
  .board-row { grid-template-columns: minmax(110px, 180px) minmax(600px, 800px) minmax(110px, 180px); gap: 16px; min-height: 0; padding: 8px 0 18px; align-items: center; }
  .board-center { margin-top: 0; padding: 22px; gap: 14px; }
  .roster-box { gap: 14px; }
  .roster-tile { height: 122px; }
  .roster-tile-name { font-size: 11px; line-height: 1.1; }
  .roster-box .signature-plaque { margin-top: 2px; padding-top: 12px; border-top: 1px solid #d3c4a5; }
  .match-setup-grid { padding: 14px 0; }
  .stage-preview-picture { width: 96px; height: 76px; }
  .match-setup-grid .stage-preview-button { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .board-footer { margin-top: 0; }
  .board-footer .ready-button { min-height: 50px; }
  .menu-help { gap: 6px 12px; margin-top: 0; }
  .board-figure { align-self: end; }
  .figure-portrait { height: clamp(230px, 36vh, 340px); }
  .figure-copy { position: static; margin-bottom: 12px; }
  .figure-copy strong { font-size: 24px; }
  .board-figure .figure-tag { margin-bottom: -12px; font-size: 12px; padding: 6px 10px; }
}
@media (min-width: 1001px) and (max-height: 900px) {
  .game-overlay { padding: 18px 20px; }
  .match-menu { min-height: 0; margin: 0 auto; align-content: start; }
  .menu-heading { align-items: center; padding: 0 8px 22px; }
  .menu-heading h1 { font-size: 32px; }
  .menu-sign { padding: 10px 14px; }
}
@media (min-width: 1001px) and (max-height: 720px) {
  .menu-heading { padding-bottom: 12px; }
  .board-center { padding: 18px; gap: 10px; }
  .roster-tile { height: 106px; }
  .match-setup-grid { padding: 10px 0; }
  .board-row { padding-bottom: 0; }
}

/* Keep both thumbs below the fight, including the score panels. */
.touch-match { --touch-dock-height: 158px; }
.touch-match canvas { height: calc(100% - var(--touch-dock-height) - env(safe-area-inset-bottom, 0px)); }
.touch-match .touch-controls {
  top: auto;
  bottom: env(safe-area-inset-bottom, 0px);
  height: var(--touch-dock-height);
  border-top: 2px solid #64543a;
  background: linear-gradient(#263b3c, #172c2e);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.touch-match .touch-button { font-size: 12px; letter-spacing: 0; touch-action: none; }
.touch-match .touch-stick-thumb { transition: none; }
.touch-match .menu-button { min-height: 44px; top: max(8px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
@media (orientation: portrait) {
  .touch-match { --touch-dock-height: 180px; }
}

/* A brief rotation cue before the first portrait match. */
#mobile-ready { width: min(360px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; border: 3px solid #a48143; border-radius: 20px; color: #f8eccf; background: #203e3e; box-shadow: 0 12px 48px #0007; }
#mobile-ready::backdrop { background: #102321dc; }
.mobile-ready-card { display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.mobile-turn-art { width: 240px; max-width: 100%; color: #f1c65c; }
#mobile-ready h2 { margin: 0; font: 400 29px/1.05 var(--font-display); }
#mobile-ready p { margin: 0; font: 700 14px/1.6 var(--font-body); }
#mobile-ready button { min-height: 44px; width: 100%; padding: 10px 14px; border: 0; border-radius: 8px; font: 800 13px/1.4 var(--font-body); }
#mobile-ready-upright { color: #203e3e; background: #f8eccf; }
#mobile-ready-back { color: #f8eccf; background: transparent; text-decoration: underline; }
#mobile-ready button:focus-visible { outline: 3px solid #f1c65c; outline-offset: 3px; }