:root {
  --bg: #11151b;
  --panel: #1a2028;
  --panel-strong: #232a34;
  --text: #f3f5f7;
  --muted: #aeb6c2;
  --line: rgba(209, 231, 255, 0.16);
  --line-strong: rgba(232, 246, 255, 0.28);
  --inset-light: rgba(255, 255, 255, 0.055);
  --inset-dark: rgba(0, 0, 0, 0.32);
  --radius-panel: 4px;
  --radius-button: 5px;
  --radius-small: 3px;
  --panel-shadow: 0 12px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 var(--inset-light);
  --panel-fill: linear-gradient(180deg, rgba(35, 42, 52, 0.94), rgba(21, 26, 34, 0.94));
  --teal: #39d2bd;
  --action-teal-top: #258f83;
  --action-teal-mid: #17766c;
  --action-teal-bottom: #0d5851;
  --action-teal-edge: #57cbbb;
  --action-teal-shadow: #062f2c;
  --gold: #f4c95d;
  --rose: #ed6a7a;
  --game-ui-scale: 1;
  --game-gap: 12px;
  --game-outer-gap: 12px;
  --game-board-size: 640px;
  --hud-height: 96px;
  --primary-font-size: 16px;
  --secondary-font-size: 12px;
  --hud-micro-font-size: 9px;
  --hud-label-font-size: 11px;
  --hud-secondary-font-size: 17px;
  --hud-primary-font-size: 28px;
  --hud-critical-font-size: 38px;
  --preview-piece-size: 56px;
  --cell-a: #303742;
  --cell-b: #262c35;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(57, 210, 189, 0.07), transparent 32%),
    linear-gradient(315deg, rgba(244, 201, 93, 0.055), transparent 34%),
    var(--bg);
  color: var(--text);
}

button {
  font: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.screen-panel {
  width: min(440px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel-fill);
  box-shadow: var(--panel-shadow);
  padding: 26px;
}

.screen-panel h1 {
  margin: 0 0 20px;
  font-size: 2.15rem;
  line-height: 1.04;
}

.loading-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.loading-bar span {
  display: block;
  width: calc(var(--loading-progress, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #7ff5e5, var(--teal));
  transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-home {
  display: grid;
  gap: 12px;
}

.main-menu-page {
  display: grid;
  gap: 12px;
}

.main-menu-page[hidden] {
  display: none !important;
}

.main-menu-back {
  width: 100%;
}

.multiplayer-room-screen {
  padding: 18px;
}

.multiplayer-room-shell {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 36px);
  margin: auto;
  overflow: visible;
  padding: 20px;
}

.multiplayer-room-header {
  margin-bottom: 18px;
  border-bottom: 1px solid #344149;
  padding-bottom: 14px;
}

.multiplayer-room-header h1,
.multiplayer-host-setup h2 {
  margin: 0;
}

.multiplayer-room-header p:last-child {
  margin: 7px 0 0;
  color: #aebbc1;
}

.multiplayer-entry,
.multiplayer-room-listing,
.multiplayer-host-setup,
.multiplayer-join-form,
.multiplayer-lobby {
  display: grid;
  gap: 12px;
}

.multiplayer-entry[hidden],
.multiplayer-room-listing[hidden],
.multiplayer-host-setup[hidden],
.multiplayer-join-form[hidden],
.multiplayer-lobby[hidden],
.multiplayer-lobby-countdown[hidden] {
  display: none !important;
}

.multiplayer-type-options,
.multiplayer-player-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.multiplayer-room-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.multiplayer-join-form label {
  color: #dce8ec;
  font-family: var(--font-display);
  font-weight: 900;
}

.multiplayer-join-form input {
  width: 100%;
  border: 1px solid #52626b;
  border-radius: 4px;
  padding: 12px;
  background: #080d10;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.multiplayer-code-block {
  display: grid;
  justify-items: center;
  gap: 3px;
  border: 1px solid #3f4d55;
  border-radius: 4px;
  padding: 12px;
  background: #0a1013;
}

.multiplayer-code-block span,
.multiplayer-code-block small,
.multiplayer-lobby-summary {
  color: #aebbc1;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.multiplayer-code-block strong {
  color: #8ffced;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  letter-spacing: 0.16em;
  line-height: 1;
  text-shadow: 0 0 12px rgba(73, 239, 216, 0.28);
}

.multiplayer-lobby-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-block: 1px solid #344149;
  padding: 9px 2px;
}

.multiplayer-player-slot {
  display: grid;
  gap: 5px;
  border: 1px solid #43515a;
  border-left: 3px solid #657580;
  border-radius: 4px;
  padding: 12px;
  background: #0c1216;
}

.multiplayer-player-slot.is-connected {
  border-left-color: #39d2bd;
}

.multiplayer-player-slot.is-ready {
  border-color: #64e8d5;
  border-left-color: #64e8d5;
  box-shadow: inset 0 0 12px rgba(57, 210, 189, 0.08);
}

.multiplayer-player-slot span,
.multiplayer-player-slot small {
  color: #9fadb4;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.multiplayer-player-slot strong {
  color: #f4f8f9;
  font-family: var(--font-display);
}

.multiplayer-player-slot.is-ready small {
  color: #8ffced;
}

.multiplayer-lobby-countdown {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background: rgba(5, 8, 10, 0.9);
  animation: multiplayer-countdown-in 140ms ease-out;
}

.multiplayer-lobby-countdown span {
  color: #c6d4d9;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.multiplayer-lobby-countdown strong {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.9;
  text-shadow:
    0 0 4px #ffffff,
    0 0 16px rgba(73, 239, 216, 0.58);
}

@keyframes multiplayer-countdown-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.app-shell.is-multiplayer-config #duel-config-ai-category {
  display: none;
}

.app-shell.is-multiplayer-duel .ai-board-label {
  text-align: right;
}

@media (max-width: 620px) {
  .multiplayer-type-options,
  .multiplayer-player-list {
    grid-template-columns: 1fr;
  }

  .multiplayer-room-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.large-mode {
  min-height: 62px;
}

@keyframes loading-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(140%);
  }
}

.app-shell {
  width: min(1400px, calc(100vw - 20px));
  height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 2vmin, 22px);
  align-items: stretch;
  padding: clamp(10px, 2vmin, 18px) 0;
  overflow: hidden;
}

.menu-panel,
.play-panel {
  border: 1px solid var(--line);
  background: var(--panel-fill);
  box-shadow: var(--panel-shadow);
  border-radius: var(--radius-panel);
}

.menu-panel {
  display: contents;
}

.duel-pause-rail {
  position: fixed;
  left: clamp(8px, 1.2vmin, 14px);
  bottom: clamp(8px, 1.2vmin, 14px);
  z-index: 36;
  display: grid;
  width: min(4.9rem, calc(100vw - 12px));
  justify-items: start;
  pointer-events: auto;
}

.app-shell.is-sandbox .duel-pause-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.4rem, 0.8vw, 0.7rem);
  width: clamp(9.2rem, 12vw, 11.5rem);
  max-width: calc(100vw - 16px);
}

.app-shell.is-sandbox .duel-pause-button {
  justify-self: auto;
  width: 100%;
}

.brand-block,
.mode-list,
.menu-panel .audio-settings,
#new-game-button {
  display: none;
}

.app-shell.is-duel-config .duel-pause-rail {
  display: none;
}

.app-shell.is-tutorial .duel-pause-rail {
  display: none;
}

.duel-pause-button {
  justify-self: start;
  width: 4.25rem;
  min-height: 28px;
  padding: 4px 7px;
  font-size: 0.62rem;
}

.duel-config-screen {
  min-height: 0;
}

.duel-config-screen[hidden] {
  display: none !important;
}

.duel-config-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, calc(100vw - 32px));
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(18, 23, 31, 0.96), rgba(8, 12, 18, 0.98));
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}

.duel-config-header {
  padding: clamp(16px, 2.6vmin, 24px) clamp(16px, 2.8vmin, 26px) 10px;
  border-bottom: 1px solid rgba(210, 233, 255, 0.1);
}

.duel-config-header h1 {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vmin, 2.35rem);
  line-height: 1;
}

.duel-config-hint {
  margin: 0.48rem 0 0;
  color: rgba(208, 230, 244, 0.62);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.25;
}

.duel-config-content {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: rgba(57, 210, 189, 0.46) rgba(255, 255, 255, 0.06);
}

.duel-config-ai-top {
  margin: clamp(14px, 2.4vmin, 22px) clamp(14px, 2.4vmin, 22px) 0;
}

.duel-preset-panel {
  min-height: 0;
  padding: clamp(14px, 2.4vmin, 22px);
  display: grid;
  gap: 12px;
  align-content: start;
}

.duel-preset-heading {
  display: grid;
  gap: 4px;
}

.duel-preset-heading h2,
.duel-preset-heading p {
  margin: 0;
}

.duel-preset-heading h2 {
  color: #8ff4e4;
  font-family: var(--font-display);
  font-size: 0.94rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.duel-preset-heading p {
  color: rgba(208, 230, 244, 0.66);
  font-size: 0.76rem;
  font-weight: 750;
}

.duel-preset-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.duel-preset-option {
  min-width: 0;
  min-height: 70px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  align-content: center;
  text-align: left;
  border: 1px solid #3a464e;
  border-left: 3px solid #60717b;
  border-radius: var(--radius-button);
  background: linear-gradient(180deg, #1b2228, #101519);
  color: #ffffff;
  box-shadow: 0 2px 0 #07090b, inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition: border-color 110ms ease, filter 110ms ease, transform 90ms ease;
}

.duel-preset-option strong {
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1;
}

.duel-preset-option span {
  color: rgba(208, 230, 244, 0.66);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.25;
}

.duel-preset-option:hover {
  border-color: #64808a;
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.duel-preset-option:active {
  transform: translateY(0);
}

.duel-preset-option[aria-pressed="true"] {
  border-color: var(--teal);
  border-left-color: #8ff4e4;
  background: linear-gradient(180deg, #17302d, #0d1d1b);
  box-shadow: 0 2px 0 #07090b, inset 0 0 0 1px rgba(57, 210, 189, 0.14);
}

.duel-preset-option[aria-pressed="true"] span {
  color: rgba(211, 250, 242, 0.8);
}

.duel-config-editor-toggle {
  width: 100%;
  justify-self: stretch;
  text-align: center;
}

.duel-config-body {
  min-height: 0;
  overflow: visible;
  padding: 0 clamp(14px, 2.4vmin, 22px) clamp(14px, 2.4vmin, 22px);
  display: grid;
  gap: 12px;
}

.duel-config-category {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(210, 233, 255, 0.12);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(28, 34, 44, 0.72), rgba(12, 16, 23, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.duel-config-category h2 {
  margin: 0 0 2px;
  color: rgba(243, 245, 247, 0.92);
  font-size: 0.92rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.duel-config-category label {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(16rem, 1.35fr);
  gap: 12px;
  align-items: center;
}

.duel-config-category label > span {
  color: rgba(208, 230, 244, 0.75);
  font-size: 0.82rem;
  font-weight: 800;
}

.duel-config-category input,
.duel-config-category select {
  min-height: 36px;
  min-width: 0;
  border: 1px solid rgba(210, 233, 255, 0.18);
  border-radius: var(--radius-button);
  background: rgba(3, 6, 10, 0.72);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 7px 9px;
}

.duel-config-category input:disabled,
.duel-config-category select:disabled {
  color: rgba(208, 230, 244, 0.42);
  opacity: 0.8;
}

.duel-config-setting:has(input:disabled) > span,
.duel-config-setting:has(select:disabled) > span {
  color: rgba(208, 230, 244, 0.38);
}

.duel-config-range-input {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(4.8rem, 6.2rem);
  gap: 8px;
  align-items: center;
}

.duel-config-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.duel-config-inline-help {
  color: rgba(151, 211, 232, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.duel-config-inline-help[hidden] {
  display: none !important;
}

.duel-level-buttons {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.duel-level-button {
  min-height: 34px;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(232, 246, 255, 0.18);
  border-radius: var(--radius-button);
  color: rgba(255, 255, 255, 0.84);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  background: rgba(18, 24, 32, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    border-color 110ms ease,
    box-shadow 110ms ease,
    filter 110ms ease,
    transform 90ms ease;
}

.duel-level-button:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.duel-level-button:active {
  transform: translateY(0);
}

.duel-level-button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.62);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 12px var(--level-glow, rgba(255, 255, 255, 0.2)),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.duel-level-button.is-l1 { --level-glow: rgba(57, 210, 117, 0.38); background: linear-gradient(180deg, #218d4d, #126333); }
.duel-level-button.is-l2 { --level-glow: rgba(107, 219, 85, 0.38); background: linear-gradient(180deg, #4ca43c, #2e742d); }
.duel-level-button.is-l3 { --level-glow: rgba(180, 224, 72, 0.38); background: linear-gradient(180deg, #8aaa31, #657720); }
.duel-level-button.is-l4 { --level-glow: rgba(238, 212, 77, 0.4); background: linear-gradient(180deg, #b6982e, #80691f); }
.duel-level-button.is-l5 { --level-glow: rgba(244, 173, 69, 0.42); background: linear-gradient(180deg, #bd812b, #89561c); }
.duel-level-button.is-l6 { --level-glow: rgba(240, 126, 61, 0.42); background: linear-gradient(180deg, #bc5c27, #873a1a); }
.duel-level-button.is-l7 { --level-glow: rgba(237, 82, 108, 0.42); background: linear-gradient(180deg, #b6384e, #822735); }
.duel-level-button.is-l8 { --level-glow: rgba(220, 64, 144, 0.44); background: linear-gradient(180deg, #a72f72, #74204e); }
.duel-level-button.is-l9 { --level-glow: rgba(197, 78, 224, 0.44); background: linear-gradient(180deg, #823ca6, #592878); }
.duel-level-button.is-l10 { --level-glow: rgba(244, 94, 255, 0.48); background: linear-gradient(180deg, #9a3fc2, #64228a); }
.duel-level-button.is-l11 { --level-glow: rgba(255, 126, 245, 0.52); background: linear-gradient(180deg, #b94ad4, #7a2499); }

.duel-config-range-input input[type="range"] {
  min-height: 26px;
  padding: 0;
  accent-color: var(--teal);
}

.duel-config-range-input input[type="number"] {
  text-align: right;
}

.config-help-tooltip {
  position: fixed;
  z-index: 95;
  max-width: min(22rem, calc(100vw - 24px));
  padding: 8px 10px;
  border: 1px solid rgba(101, 244, 224, 0.28);
  border-radius: var(--radius-panel);
  background: rgba(5, 9, 15, 0.98);
  color: rgba(226, 240, 248, 0.86);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.25;
  pointer-events: none;
  transform: none;
  animation: config-tooltip-in 120ms ease both;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.config-help-tooltip[hidden] {
  display: none !important;
}

@keyframes config-tooltip-in {
  from {
    opacity: 0;
    transform: translateX(-3px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.duel-config-advanced-toggle {
  min-height: 34px;
  justify-self: start;
  border: 1px solid rgba(210, 233, 255, 0.18);
  border-radius: var(--radius-button);
  background: rgba(3, 6, 10, 0.72);
  color: rgba(226, 240, 248, 0.86);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 7px 11px;
}

.duel-config-advanced-toggle[aria-expanded="true"] {
  border-color: rgba(57, 210, 189, 0.4);
  color: #f7fbff;
  box-shadow: inset 0 0 0 1px rgba(57, 210, 189, 0.12);
}

.duel-config-advanced {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.duel-config-note {
  margin: 0;
  color: rgba(208, 230, 244, 0.6);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

.duel-config-warning {
  margin: -2px 0 2px;
  color: rgba(237, 106, 122, 0.82);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
}

.duel-config-category .duel-config-checkbox input {
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  justify-self: start;
  accent-color: var(--teal);
}

.duel-config-start {
  position: sticky;
  bottom: 0;
  padding: 12px clamp(14px, 2.4vmin, 22px);
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(210, 233, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.78), rgba(8, 12, 18, 0.98));
}

.duel-config-start .primary-action {
  width: 100%;
}

.app-shell.is-duel-config {
  display: grid;
  grid-template-columns: 1fr;
  place-items: stretch center;
  padding: clamp(12px, 2vmin, 18px) 0;
}

.app-shell.is-duel-config .menu-panel,
.app-shell.is-duel-config .play-panel {
  display: none;
}

.app-shell.is-duel-config .duel-config-screen {
  display: grid;
  align-self: stretch;
}

.brand-block h1,
.board-header h2 {
  margin: 0;
  letter-spacing: 0;
}

.brand-block h1 {
  font-size: 2rem;
  line-height: 1.05;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mode-list {
  display: grid;
  gap: 10px;
}

.mode-button,
.primary-action {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  color: var(--text);
  background: linear-gradient(180deg, rgba(42, 50, 62, 0.92), rgba(25, 31, 40, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: translateY(0) scale(1);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease,
    transform 110ms ease;
}

.mode-button {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
}

.mode-button span {
  font-weight: 850;
  letter-spacing: 0.01em;
}

.mode-button small {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  white-space: normal;
}

.mode-button.is-active {
  border-color: rgba(57, 210, 189, 0.72);
  background: linear-gradient(180deg, rgba(57, 210, 189, 0.18), rgba(18, 55, 55, 0.36));
  box-shadow:
    inset 3px 0 0 rgba(57, 210, 189, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mode-button:not(:disabled):hover {
  border-color: rgba(210, 233, 255, 0.28);
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow:
    0 0 10px rgba(57, 210, 189, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mode-button:not(:disabled):active,
.primary-action:not(:disabled):active {
  filter: brightness(0.95);
  transform: translateY(1px) scale(0.985);
}

.mode-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.audio-settings {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(210, 233, 255, 0.13);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(16, 22, 31, 0.76), rgba(7, 11, 17, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

.audio-settings.is-compact {
  padding: 9px;
}

.audio-settings.is-pause {
  margin: 0.8rem 0 1rem;
}

.app-shell.is-ai-duel .menu-panel .audio-settings {
  display: none;
}

.audio-settings.is-config {
  grid-column: 1 / -1;
}

.audio-setting {
  display: grid;
  grid-template-columns: 2rem minmax(3rem, auto) minmax(4.5rem, 1fr) 2.6rem;
  gap: 8px;
  align-items: center;
  color: rgba(226, 240, 248, 0.78);
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.duel-config-category .audio-setting {
  display: grid;
  grid-template-columns: 2rem minmax(3rem, auto) minmax(8rem, 1fr) 2.6rem;
  gap: 8px;
  align-items: center;
}

.duel-config-category .audio-setting > span {
  color: rgba(226, 240, 248, 0.78);
  font-size: 0.75rem;
  font-weight: 850;
}

.audio-icon-button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(210, 233, 255, 0.18);
  border-radius: var(--radius-button);
  background:
    linear-gradient(180deg, rgba(42, 50, 62, 0.76), rgba(14, 18, 25, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 8px rgba(57, 210, 189, 0.05);
  transition:
    border-color 130ms ease,
    filter 130ms ease,
    transform 90ms ease,
    box-shadow 130ms ease;
}

.audio-icon-button:hover {
  border-color: rgba(101, 244, 224, 0.38);
  filter: brightness(1.14);
  transform: translateY(-1px);
  box-shadow:
    0 0 10px rgba(57, 210, 189, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.audio-icon-button:active {
  transform: translateY(1px) scale(0.96);
  filter: brightness(0.94);
}

.audio-icon-button[aria-pressed="false"] {
  opacity: 0.72;
}

.audio-icon-button img {
  width: 1.25rem;
  height: 1.25rem;
  image-rendering: auto;
  pointer-events: none;
  filter:
    drop-shadow(0 0 4px rgba(101, 244, 224, 0.18))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}

.audio-setting input[type="range"] {
  min-width: 0;
  height: 1rem;
  padding: 0;
  appearance: none;
  background: transparent;
}

.audio-setting input[type="range"]::-webkit-slider-runnable-track {
  height: 0.36rem;
  border: 1px solid rgba(210, 233, 255, 0.15);
  border-radius: var(--radius-small);
  background:
    linear-gradient(90deg, rgba(101, 244, 224, 0.86) var(--audio-volume, 100%), rgba(255, 255, 255, 0.08) 0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.36);
}

.audio-setting input[type="range"]::-webkit-slider-thumb {
  width: 0.72rem;
  height: 0.72rem;
  margin-top: -0.25rem;
  appearance: none;
  border: 1px solid rgba(244, 253, 255, 0.75);
  border-radius: var(--radius-small);
  background:
    linear-gradient(180deg, rgba(248, 253, 255, 0.96), rgba(109, 223, 232, 0.94));
  box-shadow:
    0 0 8px rgba(57, 210, 189, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.46);
}

.audio-setting input[type="range"]::-moz-range-track {
  height: 0.36rem;
  border: 1px solid rgba(210, 233, 255, 0.15);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.08);
}

.audio-setting input[type="range"]::-moz-range-progress {
  height: 0.36rem;
  border-radius: var(--radius-small);
  background: rgba(101, 244, 224, 0.86);
}

.audio-setting input[type="range"]::-moz-range-thumb {
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid rgba(244, 253, 255, 0.75);
  border-radius: var(--radius-small);
  background:
    linear-gradient(180deg, rgba(248, 253, 255, 0.96), rgba(109, 223, 232, 0.94));
  box-shadow:
    0 0 8px rgba(57, 210, 189, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.46);
}

.audio-setting strong {
  color: rgba(244, 253, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.tutorial-panel {
  display: grid;
  grid-area: right;
  align-self: center;
  justify-self: stretch;
  gap: 10px;
  min-height: 0;
  padding: clamp(12px, 1.8vmin, 16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(18, 23, 31, 0.91), rgba(13, 17, 24, 0.91));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.practice-challenge-panel {
  display: grid;
  grid-area: right;
  align-self: center;
  justify-self: stretch;
  gap: 10px;
  min-height: 0;
  padding: clamp(12px, 1.8vmin, 16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(18, 23, 31, 0.91), rgba(13, 17, 24, 0.91));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.app-shell.is-training-challenge .practice-challenge-panel {
  display: grid;
  grid-area: right;
  z-index: 2;
}

.training-challenge-timer {
  grid-area: hp;
  position: relative;
  z-index: 2;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  grid-template-rows: auto minmax(8rem, 1fr) auto;
  gap: 6px;
  width: 100%;
  max-width: 2.75rem;
  min-height: 13rem;
  padding: 0;
}

.training-challenge-timer::before {
  content: "";
  position: absolute;
  inset: 1.45rem 0.34rem 2.25rem;
  z-index: -1;
  border: 1px solid rgba(136, 218, 239, 0.12);
  pointer-events: none;
}

.training-challenge-timer[hidden] {
  display: none !important;
}

.training-challenge-timer > span {
  color: rgba(208, 230, 244, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.training-challenge-timer > div {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(210, 233, 255, 0.2);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(0, 0, 0, 0.24)),
    rgba(5, 8, 13, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.36),
    inset 0 12px 18px rgba(255, 255, 255, 0.04);
}

.training-challenge-timer i {
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  background: var(--training-countdown-color, #19f019);
  transform: scaleY(var(--training-countdown, 1));
  transform-origin: bottom;
  transition:
    transform 80ms linear,
    background-color 160ms ease;
}

.training-challenge-timer.is-low > div {
  border-color: rgba(255, 93, 112, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.36),
    0 0 10px rgba(255, 62, 88, 0.34);
  animation: training-meter-low-pulse 720ms ease-in-out infinite alternate;
}

@keyframes training-meter-low-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.35); }
}

.training-challenge-timer strong {
  display: grid;
  justify-items: center;
  gap: 1px;
  color: rgba(181, 235, 255, 0.96);
  font-size: 0.72rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-align: center;
}

.training-challenge-timer strong span:last-child {
  color: rgba(177, 204, 218, 0.76);
  font-size: 0.62rem;
}

.practice-challenge-panel[hidden] {
  display: none !important;
}

.practice-challenge-panel h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.1;
}

.practice-challenge-panel p {
  margin: 0;
  color: rgba(224, 231, 240, 0.9);
  font-size: 0.84rem;
  line-height: 1.38;
  white-space: pre-line;
}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-columns: minmax(7.5rem, 0.34fr) minmax(0, auto) 2.75rem minmax(7.5rem, 0.34fr);
  grid-template-areas: "left board hp right";
}

.tutorial-dialogue {
  display: grid;
  grid-area: dialogue;
  justify-self: center;
  width: min(100%, 46rem);
  gap: 7px;
  padding: clamp(10px, 1.5vmin, 14px) clamp(12px, 1.8vmin, 18px);
  border: 1px solid rgba(210, 233, 255, 0.11);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(13, 17, 24, 0.82), rgba(8, 11, 16, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.tutorial-dialogue h2 {
  margin: 0;
  font-size: clamp(1.08rem, 2.2vmin, 1.48rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.tutorial-dialogue p {
  margin: 0;
  color: rgba(243, 245, 247, 0.86);
  font-size: clamp(0.84rem, 1.6vmin, 0.98rem);
  line-height: 1.35;
  white-space: pre-line;
}

.tutorial-panel .tutorial-objective {
  display: none;
  color: rgba(243, 245, 247, 0.88);
  font-weight: 850;
}

.tutorial-controls {
  display: grid;
  gap: 6px;
}

.tutorial-controls button,
.tutorial-popup-actions button,
.tutorial-popup > .challenge-menu-back {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: linear-gradient(180deg, rgba(30, 37, 48, 0.78), rgba(11, 15, 22, 0.78));
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
  white-space: pre-line;
  transition: border-color 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.tutorial-controls button:hover,
.tutorial-popup-actions button:hover,
.tutorial-popup > .challenge-menu-back:hover {
  border-color: rgba(57, 210, 189, 0.46);
  filter: brightness(1.08);
}

.tutorial-controls button:disabled,
.tutorial-popup-actions button:disabled,
.tutorial-popup > .challenge-menu-back:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tutorial-popup-actions button.is-primary {
  border-color: var(--action-teal-edge);
  background: linear-gradient(180deg, var(--action-teal-top), var(--action-teal-bottom));
  color: #f7fffd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.tutorial-popup-actions button.is-danger {
  border-color: rgba(237, 106, 122, 0.62);
}

.special-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid rgba(210, 233, 255, 0.12);
  border-radius: var(--radius-small);
  background: rgba(3, 6, 10, 0.42);
  color: rgba(226, 240, 248, 0.76);
  font-size: 0.78rem;
  font-weight: 850;
}

.special-progress-row.is-complete {
  border-color: rgba(101, 244, 224, 0.34);
  color: rgba(157, 255, 226, 0.94);
  box-shadow: inset 0 0 0 1px rgba(57, 210, 189, 0.08);
}

.pause-overlay,
.duel-end-overlay,
.practice-challenge-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vmin, 42px);
  background: rgba(2, 4, 8, 0.68);
  animation: pause-overlay-in 180ms ease both;
}

.duel-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vmin, 42px);
  pointer-events: none;
  background: rgba(2, 4, 8, 0.36);
  animation: duel-countdown-overlay-in 240ms ease both;
}

.duel-countdown-overlay[hidden] {
  display: none !important;
}

.duel-countdown-popup {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  min-width: min(23rem, 100%);
  padding: clamp(18px, 3.6vmin, 32px);
  border: 1px solid rgba(101, 244, 224, 0.38);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.94), rgba(6, 9, 14, 0.94));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 20px 48px rgba(0, 0, 0, 0.44),
    0 0 24px rgba(57, 210, 189, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: duel-countdown-popup-in 260ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.duel-countdown-popup h2 {
  margin: 0;
  color: rgba(243, 245, 247, 0.82);
  font-size: 1.1rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.duel-countdown-popup strong {
  color: #ffffff;
  font-size: clamp(4rem, 13vmin, 8rem);
  line-height: 0.9;
  text-shadow:
    0 0 18px rgba(57, 210, 189, 0.54),
    0 6px 24px rgba(0, 0, 0, 0.72);
  animation: duel-countdown-value 620ms cubic-bezier(0.16, 1.25, 0.24, 1) both;
}

.duel-countdown-popup.is-go {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: duel-go-title 820ms ease forwards;
}

.duel-countdown-popup.is-go strong {
  color: #f4fbff;
  -webkit-text-stroke: 2px rgba(244, 201, 93, 0.8);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.62),
    0 0 22px rgba(244, 201, 93, 0.62),
    0 0 38px rgba(57, 210, 189, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.68);
}

.duel-countdown-popup.is-finish {
  min-width: min(30rem, 100%);
  border-color: rgba(244, 201, 93, 0.62);
  background: linear-gradient(180deg, rgba(18, 23, 31, 0.8), rgba(5, 7, 11, 0.86));
  animation: duel-finish-title 1080ms cubic-bezier(0.14, 0.9, 0.2, 1) both;
}

.duel-countdown-popup h2:empty {
  display: none;
}

.duel-countdown-popup.is-finish strong {
  color: #ffffff;
  font-size: clamp(3.6rem, 12vmin, 7.2rem);
  letter-spacing: 0.06em;
  text-shadow:
    0 0 16px rgba(244, 201, 93, 0.72),
    0 0 34px rgba(237, 82, 108, 0.28),
    0 7px 26px rgba(0, 0, 0, 0.7);
  animation: none;
}

@keyframes duel-countdown-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes duel-countdown-popup-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes duel-countdown-value {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.68);
    filter: brightness(1);
  }

  42% {
    opacity: 1;
    transform: translateY(0) scale(1.12);
    filter: brightness(1.55);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes duel-go-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes duel-go-title {
  0% {
    opacity: 0;
    transform: scale(0.76);
    filter: brightness(1);
  }

  18% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.65);
  }

  100% {
    opacity: 0;
    transform: scale(1.34);
    filter: brightness(0.96);
  }
}

@keyframes duel-finish-title {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.72);
    filter: brightness(1);
  }

  18% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
    filter: brightness(1.75);
  }

  68% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1.12);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px) scale(1.04);
    filter: brightness(0.9);
  }
}

.pause-overlay[hidden],
.duel-end-overlay[hidden],
.practice-challenge-overlay[hidden] {
  display: none !important;
}

.pause-popup,
.duel-end-popup {
  width: min(22rem, 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(22, 28, 38, 0.98), rgba(8, 12, 18, 0.98));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 22px 44px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  padding: clamp(16px, 2.6vmin, 24px);
  animation: pause-popup-in 220ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.pause-popup h2,
.duel-end-popup h2 {
  margin: 0 0 16px;
  color: #f7fbff;
  font-size: 1.85rem;
  line-height: 0.96;
  letter-spacing: 0.08em;
  text-shadow: 0 0 9px rgba(57, 210, 189, 0.24);
}

.duel-end-popup {
  width: min(42rem, calc(100vw - 32px));
  border-color: rgba(101, 244, 224, 0.38);
}

.duel-end-popup.is-defeat {
  border-color: rgba(237, 82, 108, 0.52);
}

.duel-end-popup p:not(.eyebrow) {
  margin: -6px 0 16px;
  color: rgba(208, 230, 244, 0.72);
  font-size: 0.88rem;
  font-weight: 750;
}

.duel-results-stats,
.practice-challenge-results {
  max-height: min(48vh, 31rem);
  margin: 0 0 16px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(10rem, 1.35fr) repeat(2, minmax(5.8rem, 0.75fr));
  gap: 1px;
  border: 1px solid rgba(210, 233, 255, 0.14);
  background: rgba(210, 233, 255, 0.08);
}

.duel-results-stats span,
.duel-results-stats strong,
.practice-challenge-results span,
.practice-challenge-results strong {
  min-width: 0;
  padding: 7px 9px;
  background: rgba(6, 10, 16, 0.82);
  color: rgba(218, 235, 246, 0.76);
  font-size: 0.76rem;
  line-height: 1.05;
}

.duel-results-stats strong,
.practice-challenge-results strong {
  color: #f7fbff;
  text-align: right;
  font-weight: 900;
}

.duel-results-stats > :nth-child(-n + 3) {
  color: rgba(244, 201, 93, 0.92);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}

.practice-challenge-overlay .pause-popup {
  width: min(34rem, 100%);
}

.practice-challenge-results {
  grid-template-columns: minmax(12rem, 1.35fr) minmax(8rem, 0.85fr);
}

.practice-challenge-results .practice-primary-result {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 12px 10px;
  border: 1px solid rgba(244, 201, 93, 0.28);
  background:
    linear-gradient(180deg, rgba(244, 201, 93, 0.12), rgba(57, 210, 189, 0.08)),
    rgba(6, 10, 16, 0.86);
}

.practice-challenge-results .practice-primary-result span {
  padding: 0;
  background: transparent;
  color: rgba(244, 201, 93, 0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.practice-challenge-results .practice-primary-result strong {
  padding: 0;
  background: transparent;
  color: #ffffff;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 0.95;
  text-align: center;
  text-shadow:
    0 0 10px rgba(244, 201, 93, 0.42),
    0 0 18px rgba(57, 210, 189, 0.22);
}

.pause-actions {
  display: grid;
  gap: 8px;
}

.pause-actions button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: linear-gradient(180deg, rgba(30, 37, 48, 0.9), rgba(11, 15, 22, 0.92));
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  transform: translateY(0) scale(1);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease,
    transform 110ms ease;
}

.pause-actions button:hover {
  border-color: rgba(57, 210, 189, 0.5);
  filter: brightness(1.09);
  transform: translateY(-1px);
  box-shadow:
    0 0 10px rgba(57, 210, 189, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pause-actions button:active {
  filter: brightness(0.95);
  transform: translateY(1px) scale(0.985);
}

@keyframes pause-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pause-popup-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tutorial-board-overlay {
  grid-area: board;
  align-self: stretch;
  justify-self: stretch;
  z-index: 20;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 3vmin, 24px);
  background: rgba(2, 4, 8, 0.64);
  animation: tutorial-overlay-in 180ms ease both;
}

.tutorial-board-overlay[hidden] {
  display: none !important;
}

.app-shell.is-tutorial.is-tutorial-menu-scene .tutorial-board-overlay {
  grid-area: 1 / 1 / -1 / -1;
  align-self: stretch;
  justify-self: stretch;
  place-items: stretch;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.app-shell.is-tutorial.is-tutorial-menu-scene .board-stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "board";
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell.is-tutorial.is-tutorial-menu-scene .play-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell.is-tutorial.is-tutorial-menu-scene .board-container,
.app-shell.is-tutorial.is-tutorial-menu-scene .tutorial-panel,
.app-shell.is-tutorial.is-tutorial-menu-scene .tutorial-dialogue,
.app-shell.is-tutorial.is-tutorial-menu-scene .b2b-board-meter,
.app-shell.is-tutorial.is-tutorial-menu-scene .combo-counter,
.app-shell.is-tutorial.is-tutorial-menu-scene .chain-counter,
.app-shell.is-tutorial.is-tutorial-menu-scene .attack-queue {
  display: none;
}

/* Menu visibility takes precedence over shared in-game counter styling. */
html[data-layout-family] #game-screen.app-shell.is-tutorial.is-tutorial-menu-scene :is(.combo-counter, .chain-counter) {
  display: none !important;
}

.tutorial-popup {
  width: min(24rem, 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(22, 28, 38, 0.98), rgba(9, 13, 20, 0.98));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.44),
    0 18px 40px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  padding: clamp(14px, 2.4vmin, 20px);
  animation: tutorial-popup-in 210ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.tutorial-popup.is-tutorial-menu-popup {
  box-sizing: border-box;
  width: min(34rem, 100%);
  max-height: 100%;
  justify-self: center;
  align-self: center;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.tutorial-popup.is-challenge-menu-popup,
.tutorial-popup.is-tutorial-menu-popup:has(.challenge-menu-grid) {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
  max-width: 68rem;
  max-height: 100%;
  min-height: 0;
  justify-self: center;
  align-self: stretch;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.tutorial-popup h2 {
  margin: 0 0 9px;
  font-size: 1.28rem;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.tutorial-popup p {
  margin: 0;
  color: rgba(243, 245, 247, 0.86);
  font-size: 0.9rem;
  line-height: 1.42;
  white-space: pre-line;
}

.tutorial-popup-note {
  margin-top: 10px;
  color: rgba(174, 182, 194, 0.88);
  font-size: 0.78rem;
  line-height: 1.35;
}

.tutorial-popup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.tutorial-popup-actions.is-challenge-menu {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
}

.tutorial-popup-actions.is-challenge-menu > button {
  justify-self: end;
  width: min(11rem, 100%);
}

.challenge-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
}

.challenge-category-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 8px 0 0;
  border: 0;
  border-radius: var(--radius-panel);
  background: transparent;
}

.challenge-category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(189, 215, 236, 0.12);
}

.challenge-category-heading h3 {
  margin: 0;
  color: rgba(238, 246, 252, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.challenge-category-heading span {
  color: rgba(117, 199, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.challenge-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4.25rem, 5.25rem);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.028);
}

.challenge-entry strong,
.challenge-entry p,
.challenge-entry span {
  display: block;
  min-width: 0;
}

.challenge-entry strong {
  color: rgba(248, 252, 255, 0.92);
  font-size: 0.78rem;
  line-height: 1.15;
}

.challenge-entry p {
  margin: 3px 0 4px;
  color: rgba(219, 229, 238, 0.72);
  font-size: 0.7rem;
  line-height: 1.25;
}

.challenge-entry span {
  color: rgba(174, 182, 194, 0.78);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.challenge-entry.is-complete span {
  color: rgba(104, 235, 174, 0.88);
}

.challenge-entry button {
  min-width: 0;
  width: 100%;
  white-space: nowrap;
}

@keyframes tutorial-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tutorial-popup-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tutorial-progress {
  display: grid;
  gap: 5px;
}

.tutorial-progress > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tutorial-progress > div {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.tutorial-progress i {
  display: block;
  width: calc(var(--tutorial-progress, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #75c7ff, var(--teal));
  box-shadow: 0 0 9px rgba(57, 210, 189, 0.48);
  transition: width 220ms ease;
}

.special-progress {
  display: grid;
  gap: 8px;
}

.special-progress-row {
  display: grid;
  gap: 5px;
}

.special-progress-row span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.special-progress-row div {
  height: 9px;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.special-progress-row i {
  display: block;
  width: calc(var(--special-progress, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #75c7ff, var(--teal));
  box-shadow: 0 0 9px rgba(117, 199, 255, 0.46);
  transition: width 220ms ease;
}

.attack-queue {
  grid-area: queue;
  align-self: stretch;
  justify-self: stretch;
  z-index: 5;
  position: relative;
  display: block;
  width: 4.55rem;
  min-width: 4.55rem;
  max-width: 4.55rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  overflow: hidden;
}

.attack-queue-packet {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: min(4.55rem, 100%);
  height: 1.94rem;
  min-height: 0;
  padding: 0 0.86rem 0 0.5rem;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: none;
  color: #f3f8ff;
  font-size: 0.9rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
  box-shadow: none;
  will-change: transform, opacity, filter;
  transform-origin: center;
  transition: color 80ms ease, filter 80ms ease;
}

.attack-queue-packet::before,
.attack-queue-packet::after {
  display: none;
}

.queue-packet-sprite,
.queue-packet-timer-fill,
.queue-packet-overlay {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  object-fit: fill;
  will-change: opacity, filter;
}

.queue-packet-sprite {
  z-index: 0;
}

.queue-packet-timer-fill {
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  clip-path: inset(0 var(--packet-fill-clip, 100%) 0 0);
  text-decoration: none;
  transition:
    opacity 90ms ease,
    clip-path 90ms linear;
}

.queue-packet-timer-fill::before {
  display: none;
}

.attack-queue-packet.is-entering .queue-packet-sprite.is-current {
  animation: queue-entry-flash 460ms ease-out;
}

.attack-queue-packet.is-danger .queue-packet-sprite.is-current {
  animation: queue-danger-sprite-pulse 760ms ease-in-out infinite;
}

.attack-queue-packet.is-timeout-warning .queue-packet-sprite.is-current {
  animation: queue-timeout-sprite-flash 200ms steps(1, end) infinite;
}

.attack-queue-packet.is-timeout-warning span {
  animation: queue-timeout-text-flash 200ms steps(1, end) infinite;
}

.queue-packet-sprite.is-previous {
  z-index: 2;
  opacity: 0;
}

.queue-packet-overlay {
  opacity: 0;
}

.queue-packet-overlay.is-danger-overlay {
  z-index: 3;
}

.queue-packet-overlay.is-cancel-overlay {
  z-index: 4;
  mix-blend-mode: screen;
}

.attack-queue-packet span {
  position: relative;
  z-index: 5;
}

.attack-queue-packet.is-armed {
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.82),
    0 0 5px rgba(0, 0, 0, 0.38);
}

.attack-queue-packet.is-armed::before {
  background-image: url("assets/queue_active.png");
}

.attack-queue-packet.is-actionable {
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(70, 0, 12, 0.82),
    0 0 6px rgba(255, 225, 230, 0.22);
}

.attack-queue-packet.is-actionable::before {
  background-image: url("assets/queue_ready.png");
}

.attack-queue-packet.is-danger {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.26));
}

.attack-queue-packet.is-danger::after,
.attack-queue-packet.is-heavy-actionable::after {
  opacity: 1;
}

.attack-queue-packet.is-heavy-actionable {
  color: #fff8ff;
  text-shadow: 0 1px 0 rgba(36, 0, 70, 0.76);
}

.attack-queue-packet.is-overflow {
  color: rgba(232, 242, 248, 0.78);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.82),
    0 0 7px rgba(190, 210, 230, 0.2);
}

.attack-queue-packet.is-state-changing {
  filter: brightness(1.12);
}

.attack-queue-packet.is-shifting {
  filter: brightness(1.04);
}

.attack-queue-packet.is-state-changing.is-shifting {
  filter: brightness(1.12);
}

.attack-queue-packet.is-launching {
  filter: brightness(1.5);
}

.attack-queue-packet.is-cancelled {
  color: #06151c;
  text-shadow: none;
}

.attack-queue-packet span.is-cancel-flicker {
  color: #07151a;
  text-shadow:
    0 0 5px rgba(127, 246, 255, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.35);
}

.attack-queue-packet.is-counter::before {
  background-image: url("assets/queue_counter.png");
}

.attack-queue-packet.is-cancelled.is-flashing {
  filter: brightness(1.55);
}

.attack-queue-packet.is-partial {
  color: #06233a;
  text-shadow: 0 1px 0 rgba(172, 245, 255, 0.44);
}

.attack-queue-packet.is-partial.is-flashing {
  filter: brightness(1.28);
}

.attack-queue-line {
  position: absolute;
  top: var(--line-top, 50%);
  left: 0;
  width: 2.2rem;
  height: var(--line-length, 1%);
  min-height: 2px;
  border-left: 2px solid currentColor;
  background: transparent;
  color: rgba(190, 203, 218, 0.78);
  filter: drop-shadow(0 0 4px rgba(190, 203, 218, 0.22));
  transform: translateY(-1px);
}

.attack-queue-line::before {
  content: "";
  position: absolute;
  left: -2px;
  top: var(--hp-line-y, 0);
  width: 1.05rem;
  height: 2px;
  background: currentColor;
}

.attack-queue-line b {
  display: none;
}

.attack-queue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--packet-line-y, 100%);
  width: 2.2rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  transform: translateY(-1px);
}

.attack-queue-line .arrow {
  position: absolute;
  left: 2rem;
  top: var(--packet-line-y, 100%);
  width: 0.34rem;
  height: 0.34rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.attack-queue-line.is-armed {
  color: #ffd95d;
  box-shadow: 0 0 7px rgba(244, 201, 93, 0.4);
}

.attack-queue-line.is-actionable {
  color: #ff5f75;
  box-shadow: 0 0 8px rgba(237, 82, 108, 0.46);
}

.attack-queue-line.is-heavy-actionable {
  color: #d49cff;
  box-shadow: 0 0 8px rgba(199, 132, 255, 0.48);
}

.attack-queue-line.is-state-changing {
  animation: queue-line-activate 340ms ease;
}

.attack-queue-line.is-partial {
  animation: queue-line-rumble 420ms ease;
}

.attack-queue-line.is-cancelled {
  animation: queue-line-pop 440ms ease forwards;
}

.attack-queue.has-ready .attack-queue-packet.is-actionable:not(.is-danger):not(.is-state-changing):not(.is-shifting),
.duel-queue.has-ready .attack-queue-packet.is-actionable:not(.is-danger):not(.is-state-changing):not(.is-shifting) {
  filter: brightness(1.08);
}

.app-shell.is-low-hp .board-stage {
  animation: board-low-hp-pulse 1.5s ease-in-out infinite;
}

@keyframes hp-warning-pulse {
  0%,
  100% {
    border-color: rgba(237, 82, 108, 0.46);
    filter: brightness(1);
  }

  50% {
    border-color: rgba(255, 143, 143, 0.72);
    filter: brightness(calc(1.08 + var(--low-hp-intensity, 0) * 0.18));
  }
}

@keyframes board-low-hp-pulse {
  0%,
  100% {
    border-color: rgba(210, 233, 255, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  }

  50% {
    border-color: rgba(237, 82, 108, 0.28);
    box-shadow:
      0 0 12px rgba(237, 82, 108, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  }
}

@keyframes queue-danger-pulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.18);
  }
}

@keyframes queue-entry-flash {
  0% {
    filter: brightness(1.75) saturate(1.25);
    opacity: 0.72;
  }

  34% {
    filter:
      brightness(2.35)
      saturate(1.55)
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.72));
    opacity: 1;
  }

  100% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }
}

@keyframes queue-danger-sprite-pulse {
  0%,
  100% {
    filter:
      brightness(1.06)
      saturate(1.05)
      drop-shadow(0 0 3px rgba(201, 139, 255, 0.36));
  }

  50% {
    filter:
      brightness(1.38)
      saturate(1.35)
      drop-shadow(0 0 10px rgba(219, 170, 255, 0.72));
  }
}

@keyframes queue-ready-tension {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(2px);
  }
}

@keyframes queue-timeout-sprite-flash {
  0%,
  49.99% {
    filter: brightness(1);
  }

  50%,
  100% {
    filter: brightness(1.22) saturate(1.08);
  }
}

@keyframes queue-timeout-text-flash {
  0%,
  49.99% {
    color: #ffffff;
    filter: brightness(1);
  }

  50%,
  100% {
    color: #fff3ad;
    filter: brightness(1.65);
    text-shadow:
      0 0 7px rgba(255, 245, 190, 0.92),
      0 1px 0 rgba(55, 0, 8, 0.9);
  }
}
@keyframes queue-packet-shift {
  0% {
    opacity: 0.82;
    transform: translateY(var(--shift-y, 9%));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes queue-packet-activate {
  0% {
    filter: brightness(1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.045),
      -3px 0 0 currentColor;
  }

  45% {
    filter: brightness(1.75);
    transform: translateX(3px);
  }

  100% {
    filter: brightness(1);
    transform: translateX(0);
  }
}

@keyframes queue-packet-launch {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: brightness(1.2);
  }

  72% {
    opacity: 1;
    transform: translateX(-2.6rem) scaleX(0.72);
    filter: brightness(1.8);
  }

  100% {
    opacity: 0;
    transform: translateX(-3.2rem) scale(0.35);
    filter: brightness(2);
  }
}

@keyframes queue-packet-launch-ai {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: brightness(1.2);
  }

  72% {
    opacity: 1;
    transform: translateX(2.6rem) scaleX(0.72);
    filter: brightness(1.8);
  }

  100% {
    opacity: 0;
    transform: translateX(3.2rem) scale(0.35);
    filter: brightness(2);
  }
}

@keyframes queue-packet-rumble {
  0%,
  100% {
    transform: translateX(0);
    filter: brightness(1);
  }

  15% {
    transform: translateX(-3px);
    filter: brightness(1.8);
  }

  30% {
    transform: translateX(3px);
    opacity: 0.7;
  }

  45% {
    transform: translateX(-2px);
    opacity: 1;
  }

  60% {
    transform: translateX(2px);
    filter: brightness(1.45);
  }
}

@keyframes queue-packet-pop {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.4);
  }

  42% {
    opacity: 1;
    transform: scale(1.14);
    filter: brightness(2.3);
  }

  100% {
    opacity: 0;
    transform: scale(0.2);
    filter: brightness(2.8);
  }
}

@keyframes queue-line-activate {
  0% {
    opacity: 0.55;
    transform: translateY(-1px) scaleY(var(--line-direction, 1)) scaleX(0.45);
  }

  45% {
    opacity: 1;
    filter: brightness(1.8);
    transform: translateY(-1px) scaleY(var(--line-direction, 1)) scaleX(1.12);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
    transform: translateY(-1px) scaleY(var(--line-direction, 1)) scaleX(1);
  }
}

@keyframes queue-line-rumble {
  0%,
  100% {
    opacity: 1;
    transform: translateY(-1px) scaleY(var(--line-direction, 1));
  }

  25% {
    opacity: 0.45;
    transform: translateY(-1px) scaleY(var(--line-direction, 1)) translateX(-3px);
  }

  50% {
    opacity: 1;
    filter: brightness(1.8);
    transform: translateY(-1px) scaleY(var(--line-direction, 1)) translateX(3px);
  }
}

@keyframes queue-line-pop {
  0% {
    opacity: 1;
    filter: brightness(1.5);
    transform: translateY(-1px) scaleY(var(--line-direction, 1)) scaleX(1);
  }

  100% {
    opacity: 0;
    filter: brightness(2.6);
    transform: translateY(-1px) scaleY(var(--line-direction, 1)) scaleX(0.08);
  }
}

@keyframes shield-gain-pulse {
  0%,
  100% {
    filter: brightness(1);
  }

  45% {
    filter: brightness(1.9);
    box-shadow:
      inset 0 0 12px rgba(255, 255, 255, 0.18),
      0 0 12px rgba(102, 232, 255, 0.46);
  }
}

@keyframes shield-damage-crack {
  0%,
  100% {
    filter: brightness(1);
    transform: translateX(0);
  }

  22% {
    filter: brightness(1.8) hue-rotate(-45deg);
    transform: translateX(-2px);
  }

  44% {
    transform: translateX(2px);
  }

  66% {
    transform: translateX(-1px);
  }
}

@keyframes shield-tier-up {
  0%,
  100% {
    filter: brightness(1);
    transform: scaleY(1);
  }

  45% {
    filter: brightness(2.25);
    transform: scaleY(1.025);
    box-shadow:
      inset 0 0 16px rgba(255, 255, 255, 0.22),
      0 0 14px rgba(102, 232, 255, 0.56);
  }
}

@keyframes shield-tier-down {
  0%,
  100% {
    filter: brightness(1);
    transform: scaleY(1);
  }

  35% {
    filter: brightness(1.7) saturate(1.5);
    transform: scaleY(0.94);
    box-shadow:
      inset 0 0 12px rgba(255, 117, 133, 0.25),
      0 0 10px rgba(255, 117, 133, 0.28);
  }
}

.tutorial-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.tutorial-actions button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: linear-gradient(180deg, rgba(30, 37, 48, 0.72), rgba(11, 15, 22, 0.72));
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.tutorial-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tutorial-actions button:not(:disabled):hover {
  border-color: rgba(57, 210, 189, 0.46);
  filter: brightness(1.08);
}

.tutorial-actions button:not(:disabled):active {
  filter: brightness(0.95);
  transform: translateY(1px) scale(0.985);
}

.tutorial-actions button.is-pulsing {
  border-color: rgba(101, 244, 224, 0.82);
  color: #f7fffd;
  box-shadow:
    0 0 0 1px rgba(57, 210, 189, 0.16),
    0 0 11px rgba(57, 210, 189, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  animation: tutorial-action-pulse 1150ms ease-in-out infinite;
}

@keyframes tutorial-action-pulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.24);
  }
}

.primary-action {
  border-color: var(--action-teal-edge);
  background: linear-gradient(180deg, var(--action-teal-top), var(--action-teal-bottom));
  color: #f7fffd;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.primary-action:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 0 12px rgba(57, 210, 189, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.board-stat-strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}

.board-stat-strip div {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: rgba(9, 12, 18, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  min-width: 0;
  padding: 8px 9px;
}

.board-stat-strip span {
  display: block;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-stat-strip strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1;
}

.play-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.4vmin, 12px);
  min-height: 0;
  padding: clamp(10px, 1.8vmin, 18px);
}

.board-header {
  display: block;
  min-width: 0;
}

.board-header h2 {
  font-size: 1.55rem;
}

.status-text {
  display: none;
}

.app-shell.is-tutorial .board-header,
.app-shell.is-tutorial .b2b-board-meter {
  display: none;
}

.app-shell.is-tutorial.show-b2b .b2b-board-meter {
  display: grid;
}

.app-shell.is-tutorial.is-tutorial-end .player-board-container,
.app-shell.is-tutorial.is-tutorial-end .tutorial-dialogue,
.app-shell.is-tutorial.is-tutorial-end .tutorial-panel,
.app-shell.is-tutorial.is-tutorial-end .b2b-board-meter {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text .player-board-container,
.app-shell.is-tutorial.is-tutorial-text .b2b-board-meter,
.app-shell.is-tutorial.is-tutorial-text .combo-counter,
.app-shell.is-tutorial.is-tutorial-text .chain-counter,
.app-shell.is-tutorial.is-tutorial-text .attack-queue {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text .board-stage {
  grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 12vw, 10.5rem);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "dialogue right";
}

.app-shell.is-tutorial.is-tutorial-text .tutorial-dialogue {
  width: min(100%, 42rem);
  align-self: center;
}

.app-shell.is-tutorial.is-tutorial-text .tutorial-dialogue h2 {
  font-size: clamp(1.45rem, 3vmin, 2.15rem);
}

.app-shell.is-tutorial.is-tutorial-text .tutorial-dialogue p {
  font-size: clamp(0.95rem, 1.8vmin, 1.08rem);
}

.app-shell.is-tutorial.show-attack-stat .board-header {
  display: block;
}

.app-shell.is-tutorial.show-attack-stat .board-stat-strip,
.app-shell.is-tutorial.show-combat-stats .board-stat-strip {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.is-tutorial.show-combat-stats .board-header {
  display: block;
}

.app-shell.is-tutorial.show-combat-stats .board-stat-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-shell.is-tutorial.show-attack-stat .board-stat-strip > div,
.app-shell.is-tutorial.show-combat-stats .board-stat-strip > div {
  display: none;
}

.app-shell.is-tutorial.show-attack-stat .board-stat-strip > div:nth-child(2) {
  display: block;
}

.app-shell.is-tutorial.show-combat-stats .board-stat-strip > div:nth-child(2),
.app-shell.is-tutorial.show-combat-stats .board-stat-strip > div:nth-child(3) {
  display: block;
}

.app-shell.is-tutorial .play-panel {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell.is-tutorial.show-attack-stat .play-panel,
.app-shell.is-tutorial.show-combat-stats .play-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.app-shell.is-tutorial .board-stage {
  width: 100%;
  grid-template-columns: clamp(8.5rem, 12vw, 10.5rem) minmax(0, 1fr) clamp(8.5rem, 12vw, 10.5rem);
  grid-template-rows: minmax(18rem, 1fr) auto;
  grid-template-areas:
    "left board right"
    "dialogue dialogue right";
  align-items: center;
  row-gap: clamp(0.55rem, 1.2vmin, 0.8rem);
}

.app-shell.is-tutorial.is-tutorial-challenge .board-stage {
  grid-template-columns: minmax(7.5rem, 0.34fr) minmax(0, auto) minmax(7.5rem, 0.34fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "left board right";
  row-gap: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge .tutorial-dialogue,
.app-shell.is-tutorial.is-tutorial-challenge .attack-queue {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel {
  grid-area: right;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
  grid-template-columns: minmax(10.25rem, 12rem) minmax(0, auto) minmax(8rem, 0.34fr);
  grid-template-areas: "left board right";
  column-gap: clamp(0.7rem, 1.6vmin, 1.1rem);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel {
  grid-area: left;
  display: grid;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: 12rem;
  padding: 0.6rem 0.48rem 0.72rem;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0.82), rgba(7, 10, 15, 0.74));
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-b2b {
  display: grid;
  width: min(100%, 7.5rem);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  grid-template-columns: minmax(2.1rem, 2.45rem) minmax(1.5rem, 1.75rem) minmax(4.25rem, 4.45rem);
  grid-template-areas: "hp shield queue";
  gap: 0.5rem;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage > .combo-counter,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage > .chain-counter {
  display: none !important;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield:not(.challenge-hide-queue) .duel-hud-row {
  grid-template-columns: minmax(2.1rem, 2.45rem) minmax(4.25rem, 4.45rem);
  grid-template-areas: "hp queue";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-queue:not(.challenge-hide-shield) .duel-hud-row {
  grid-template-columns: minmax(2.1rem, 2.45rem) minmax(1.5rem, 1.75rem);
  grid-template-areas: "hp shield";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield.challenge-hide-queue:not(.challenge-hide-hp) .duel-hud-row {
  grid-template-columns: minmax(2.1rem, 2.45rem);
  grid-template-areas: "hp";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-hp.challenge-hide-shield.challenge-hide-queue .duel-hud-row {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-meter,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-queue {
  min-height: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-queue {
  display: block;
}

.app-shell.is-tutorial.is-tutorial-challenge canvas {
  width: min(32rem, calc((100vh - 8.7rem) * 0.8), 100%);
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-challenge .board-container {
  width: auto;
  min-height: 0;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel .tutorial-objective {
  display: block;
  margin: 0;
  color: rgba(243, 245, 247, 0.88);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.28;
  white-space: pre-line;
}

.board-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.34fr) minmax(0, auto) 2.75rem minmax(7.5rem, 0.34fr);
  grid-template-areas: "left board hp right";
  column-gap: clamp(0.6rem, 1.6vmin, 1rem);
  place-items: center;
  min-height: 0;
  justify-self: center;
  align-self: stretch;
  padding: clamp(8px, 1.5vmin, 14px);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(21, 25, 33, 0.96), rgba(8, 11, 16, 0.98));
  border: 1px solid rgba(210, 233, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.duel-arena {
  display: contents;
}

.combo-counter,
.chain-counter {
  --combo-power: 1;
  position: relative;
  z-index: 2;
  grid-area: left;
  justify-self: stretch;
  width: min(100%, 8.5rem);
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(28, 31, 38, 0.94), rgba(11, 14, 20, 0.94));
  box-shadow:
    0 0 calc(0.42rem + var(--combo-power) * 0.18rem) rgba(244, 201, 93, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 0.5rem 0.75rem;
  pointer-events: none;
  text-align: center;
}

.combo-counter {
  --counter-y: -58%;
  grid-row: 1;
  align-self: center;
  transform: translateY(var(--counter-y));
}

.chain-counter {
  --chain-power: 1;
  --counter-y: 58%;
  grid-row: 1;
  align-self: center;
  transform: translateY(var(--counter-y));
  border-color: rgba(237, 106, 122, 0.9);
  box-shadow:
    0 0 calc(0.48rem + var(--chain-power) * 0.2rem) rgba(237, 106, 122, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.combo-counter span,
.chain-counter span {
  display: block;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.chain-counter span {
  color: var(--rose);
}

.combo-counter strong,
.chain-counter strong {
  display: block;
  font-size: calc(1.45rem + var(--combo-power) * 0.09rem);
  line-height: 1;
}

.chain-counter strong {
  font-size: calc(1.45rem + var(--chain-power) * 0.1rem);
}

.b2b-board-meter {
  position: relative;
  z-index: 3;
  grid-area: left;
  align-self: start;
  transform: none;
  justify-self: stretch;
  width: min(100%, 9rem);
  color: var(--text);
  pointer-events: none;
  text-align: left;
}

.b2b-board-meter strong {
  display: block;
  color: #ffffff;
  font-size: 2.1rem;
  line-height: 0.9;
  text-shadow:
    0 0 8px rgba(57, 210, 189, 0.46),
    0 3px 10px rgba(0, 0, 0, 0.7);
}

.b2b-board-meter.is-low strong {
  color: #aeb4bd;
  text-shadow:
    0 0 7px rgba(174, 180, 189, 0.28),
    0 3px 10px rgba(0, 0, 0, 0.72);
}

.b2b-board-meter.is-lowest strong {
  color: #69707a;
  text-shadow:
    0 0 6px rgba(105, 112, 122, 0.22),
    0 3px 10px rgba(0, 0, 0, 0.8);
}

.b2b-board-meter.is-rise strong {
  animation: mult-rise 460ms cubic-bezier(0.16, 1.25, 0.24, 1);
}

.b2b-board-meter.is-down strong {
  animation: mult-slide-down 360ms ease;
}

.b2b-board-meter.is-penalty strong {
  animation: mult-penalty 420ms ease;
}

.b2b-board-meter.is-blue {
  --mult-pulse: rgba(119, 216, 255, 0.95);
}

.b2b-board-meter.is-orange {
  --mult-pulse: rgba(255, 174, 79, 0.95);
}

.b2b-board-meter.is-purple {
  --mult-pulse: rgba(190, 129, 255, 0.95);
}

.b2b-board-meter.is-rainbow strong {
  animation: mult-rise 520ms cubic-bezier(0.16, 1.25, 0.24, 1), mult-rainbow 680ms linear;
}

.b2b-board-meter > span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pp-segments,
.matchless-segments {
  display: grid;
  gap: 4px;
  height: 11px;
}

.pp-segments {
  margin-top: 8px;
}

.pp-segments span,
.matchless-segments span {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.pp-segments span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #8ffce8, #39d2bd);
  box-shadow:
    0 0 7px rgba(57, 210, 189, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  transform: scaleX(0);
  transform-origin: left center;
}

.pp-segments span.is-filled::after {
  transform: scaleX(1);
}

.pp-segments.is-shield-progress { display: grid !important; }
.pp-segments.is-shield-progress span::after {
  transform: scaleX(var(--shield-progress, 0));
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: none !important;
}
.pp-segments.is-shield-tier-reset span::after { transition: none; }
.pp-segments.is-shield-unavailable { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pp-segments.is-shield-progress span::after { transition: none; }
  .pp-segments.is-shield-progress span,
  .pp-segments.is-shield-progress.is-tier-complete { animation: none !important; }
}

.pp-segments span.is-depleted::after {
  animation: pp-deplete-right-to-left 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pp-segments span.is-depleted {
  animation: pp-segment-deplete-glow 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pp-segments span.is-new::after {
  animation: pp-fill-left-to-right 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pp-segments span.is-new {
  animation: pp-segment-fill-glow 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pp-segments.is-tier-complete {
  animation: pp-tier-complete-flash 250ms ease-out;
}

.matchless-wrap {
  margin-top: 8px;
  opacity: 0.22;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.matchless-wrap.is-visible {
  opacity: 0.9;
  transform: translateY(0);
}

.matchless-wrap.is-flashing {
  animation: matchless-flash 280ms ease;
}

.matchless-wrap small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 117, 133, 0.82);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.matchless-segments span.is-filled {
  background: linear-gradient(180deg, #ff9ba7, #a91f38);
  box-shadow:
    0 0 7px rgba(237, 106, 122, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@keyframes matchless-flash {
  0%,
  100% {
    filter: brightness(1);
  }

  45% {
    filter: brightness(2.4);
  }
}

@keyframes pp-fill-left-to-right {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
    box-shadow:
      0 0 0 rgba(111, 247, 228, 0),
      inset 0 0 0 rgba(255, 255, 255, 0);
    filter: brightness(1.25);
  }

  55% {
    box-shadow:
      0 0 10px rgba(111, 247, 228, 0.9),
      inset 0 0 7px rgba(255, 255, 255, 0.95);
    filter: brightness(1.9);
  }

  100% {
    transform: scaleX(1);
    transform-origin: left center;
    box-shadow:
      0 0 7px rgba(57, 210, 189, 0.46),
      inset 0 0 0 1px rgba(255, 255, 255, 0.36);
    filter: brightness(1);
  }
}

@keyframes pp-deplete-right-to-left {
  0% {
    transform: scaleX(1);
    transform-origin: left center;
    box-shadow:
      0 0 9px rgba(111, 247, 228, 0.82),
      inset 0 0 6px rgba(255, 255, 255, 0.76);
    filter: brightness(1.35);
  }

  100% {
    transform: scaleX(0);
    transform-origin: left center;
    box-shadow:
      0 0 0 rgba(111, 247, 228, 0),
      inset 0 0 0 rgba(255, 255, 255, 0);
    filter: brightness(0.86);
  }
}

@keyframes pp-segment-fill-glow {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  }

  55% {
    box-shadow:
      0 0 11px rgba(84, 235, 215, 0.88),
      inset 0 0 5px rgba(235, 255, 252, 0.8);
  }
}

@keyframes pp-segment-deplete-glow {
  0% {
    box-shadow:
      0 0 10px rgba(84, 235, 215, 0.78),
      inset 0 0 5px rgba(235, 255, 252, 0.72);
  }

  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  }
}

@keyframes pp-tier-complete-flash {
  0%, 100% {
    filter: brightness(1);
  }

  45% {
    filter: brightness(2.25);
    box-shadow: 0 0 14px rgba(111, 247, 228, 0.92);
  }
}

@keyframes mult-rise {
  0% {
    color: #ffffff;
    transform: scale(0.82);
    text-shadow: 0 0 4px var(--mult-pulse, rgba(119, 216, 255, 0.9));
  }

  45% {
    color: #ffffff;
    transform: scale(1.18);
    text-shadow:
      0 0 10px var(--mult-pulse, rgba(119, 216, 255, 0.78)),
      0 0 18px var(--mult-pulse, rgba(119, 216, 255, 0.38));
  }

  100% {
    transform: scale(1);
  }
}

@keyframes mult-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-22px);
    filter: brightness(1.6);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1);
  }
}

@keyframes mult-rainbow {
  0% {
    color: #8ffce8;
  }

  25% {
    color: #f4c95d;
  }

  50% {
    color: #ed6a7a;
  }

  75% {
    color: #c796ff;
  }

  100% {
    color: #ffffff;
  }
}

@keyframes mult-penalty {
  0%,
  100% {
    transform: translateX(0);
    color: inherit;
  }

  18% {
    transform: translateX(-6px);
    color: #ff7585;
    text-shadow: 0 0 10px rgba(255, 117, 133, 0.7);
  }

  36% {
    transform: translateX(6px);
  }

  54% {
    transform: translateX(-4px);
  }

  72% {
    transform: translateX(4px);
  }
}

.combo-counter.is-bumping,
.chain-counter.is-bumping {
  animation: combo-bump 360ms cubic-bezier(0.2, 1.2, 0.2, 1);
}

.combo-counter.is-fading-out,
.chain-counter.is-fading-out {
  animation: counter-fade-out 180ms ease-out both;
  pointer-events: none;
}

@keyframes counter-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes combo-bump {
  0% {
    transform: translateY(var(--counter-y)) scale(0.84) rotate(var(--counter-entry-rotation, -3deg));
    filter: brightness(1);
  }

  45% {
    transform: translateY(var(--counter-y)) scale(var(--counter-peak-scale, calc(1.08 + var(--combo-power) * 0.045))) rotate(var(--counter-peak-rotation, 2deg));
    filter: brightness(1.55);
  }

  100% {
    transform: translateY(var(--counter-y)) scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

canvas {
  grid-area: board;
  align-self: center;
  justify-self: center;
  width: min(32rem, calc((100vh - 8.7rem) * 0.8), 100%);
  aspect-ratio: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: var(--radius-panel);
  image-rendering: auto;
  touch-action: none;
}

.persistent-menu-world .main-menu-page:not(.is-options-detail) {
  touch-action: none;
}

.options-menu-page.is-options-detail,
.app-shell.is-tutorial-text .tutorial-dialogue {
  touch-action: pan-y;
}

html.is-navigation-swiping,
html.is-navigation-swiping * {
  user-select: none;
}

.board-container {
  grid-area: board;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

.board-container canvas {
  grid-area: auto;
}

.board-container {
  position: relative;
  overflow: visible;
}

.board-value-layer {
  position: absolute;
  z-index: 14;
  overflow: visible;
  pointer-events: none;
  contain: layout style;
}

.replay-viewer-content, #game-screen { position: relative; }

.board-value-layer[hidden] {
  display: none;
}

.board-value-popup {
  position: absolute;
  display: block;
  width: max-content;
  max-width: none;
  color: #ff7585;
  --popup-color: #ff7585;
  --popup-flash: 0%;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
  -webkit-text-stroke: 0.035em rgba(8, 10, 14, 0.88);
  paint-order: stroke fill;
  text-shadow:
    0 0 12px rgba(255, 117, 133, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.84);
  transform-origin: center;
  will-change: transform, opacity;
}

.board-value-popup.is-heal {
  color: #6ef7a1;
  --popup-color: #6ef7a1;
  text-shadow:
    0 0 12px rgba(110, 247, 161, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.84);
}

.board-value-popup.is-shield {
  color: #75c7ff;
  --popup-color: #75c7ff;
  text-shadow:
    0 0 12px rgba(117, 199, 255, 0.66),
    0 3px 8px rgba(0, 0, 0, 0.84);
}

.board-value-popup.is-score {
  color: #ffd85a;
  --popup-color: #ffd85a;
  text-shadow:
    0 0 12px rgba(255, 216, 90, 0.64),
    0 3px 8px rgba(0, 0, 0, 0.84);
}

.board-value-popup.is-emphasis {
  -webkit-text-stroke: 0.04em rgba(8, 10, 14, 0.9);
  text-shadow:
    0 0 8px currentColor,
    0 4px 10px rgba(0, 0, 0, 0.88);
}

.popup-fill {
  position: relative;
  z-index: 2;
  display: block;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--popup-color) calc(100% - var(--popup-flash)), white var(--popup-flash));
}
.popup-glyph { display: inline-block; transform-origin: center; white-space: pre; }
.popup-glyph.is-digit { width: 1ch; text-align: center; }
.popup-outline {
  position: absolute;
  z-index: 1;
  inset: 0;
  color: inherit;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.popup-shimmer {
  position: absolute;
  z-index: 3;
  inset: 0;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.95) 49%, transparent 58%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  pointer-events: none;
}

.board-container.is-demo-inactive .board-value-layer {
  opacity: 0.35;
}

.ai-board {
  grid-area: ai-board;
}

.duel-board-label {
  display: none;
  grid-area: board;
  align-self: start;
  justify-self: start;
  z-index: 4;
  margin: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(208, 230, 244, 0.24);
  border-radius: var(--radius-small);
  background: rgba(7, 10, 15, 0.72);
  color: rgba(243, 245, 247, 0.82);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.ai-board-label {
  grid-area: ai-board;
}

.app-shell.is-ai-duel {
  width: min(100vw - 20px, 1900px);
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.4vmin, 16px);
}

.app-shell.is-ai-duel .play-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(8px, 1.3vmin, 14px) 0;
}

.app-shell.is-ai-duel .menu-panel {
  display: contents;
}

.app-shell.is-ai-duel .brand-block,
.app-shell.is-ai-duel .mode-list,
.app-shell.is-ai-duel #new-game-button {
  display: none;
}

.app-shell.is-ai-duel .duel-pause-rail {
  position: fixed;
  left: clamp(8px, 1.2vmin, 14px);
  bottom: clamp(8px, 1.2vmin, 14px);
  z-index: 36;
  display: grid;
  width: min(4.9rem, calc(100vw - 12px));
  justify-items: start;
  pointer-events: auto;
}

.app-shell.is-multiplayer-duel .duel-pause-rail {
  display: grid;
}

.app-shell.is-ai-duel .brand-block h1 {
  font-size: 1.45rem;
}

.app-shell.is-ai-duel .mode-list {
  gap: 8px;
}

.app-shell.is-ai-duel .mode-button,
.app-shell.is-ai-duel .primary-action {
  min-height: 42px;
  padding: 8px 10px;
}

.app-shell.is-ai-duel .duel-pause-button {
  justify-self: start;
  width: 4.25rem;
  min-height: 28px;
  padding: 4px 7px;
  font-size: 0.62rem;
}

.app-shell.is-ai-duel .duel-board-label {
  display: block;
}

.app-shell.is-ai-duel .play-panel {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell.is-ai-duel .board-header,
.app-shell.is-ai-duel #b2b-board-meter,
.app-shell.is-ai-duel #combo-counter,
.app-shell.is-ai-duel #chain-counter {
  display: none;
}

.app-shell.is-ai-duel .board-stage {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  min-height: min(90vh, calc(100vh - 1.5rem));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.app-shell.is-ai-duel .duel-arena {
  --duel-hud-width: clamp(11.2rem, 12vw, 13rem);
  --duel-board-width: min(72vh, calc(50vw - 16rem), 44rem);
  --duel-gap: clamp(0.75rem, 1.45vw, 1.8rem);
  display: grid;
  grid-template-columns:
    var(--duel-hud-width)
    minmax(0, var(--duel-board-width))
    minmax(0, var(--duel-board-width))
    var(--duel-hud-width);
  grid-template-rows: 1.7rem minmax(0, auto);
  grid-template-areas:
    "player-hud player-tempo ai-tempo ai-hud"
    "player-hud player-board ai-board ai-hud";
  column-gap: var(--duel-gap);
  row-gap: 0.3rem;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: min(90vh, calc(100vh - 1.5rem));
  margin: 0 auto;
  overflow: visible;
}

.app-shell.is-ai-duel canvas {
  /*
    Increase the canvas width for AI duel boards and remove the
    problematic viewport窶層idth term. Previously the width fell back to a
    calculation like `(100vw - 58rem) / 2`, which produced extremely small
    boards on standard screen sizes. Using a simple minimum across a
    fixed maximum, the available vertical space and the container width
    keeps the board large without overflowing.
  */
  width: var(--duel-board-width) !important;
  max-width: 100%;
  height: auto;
}

.app-shell.is-ai-duel .player-board {
  grid-area: player-board;
}

.app-shell.is-ai-duel .ai-board {
  grid-area: ai-board;
  opacity: 0.54;
}

.app-shell.is-ai-duel .player-board-label {
  grid-area: player-board;
}

.app-shell.is-ai-duel .attack-queue,
.app-shell.is-ai-duel .tutorial-panel {
  display: none;
}

.duel-tempo-panel {
  display: contents;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.duel-tempo-panel > div {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.duel-tempo-base {
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  z-index: 2;
  white-space: nowrap;
}

.duel-tempo-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.duel-tempo-central-drain {
  margin-left: 0.15rem;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(174, 202, 214, 0.28);
}

.app-shell.is-ai-duel .duel-side-drain-label,
.app-shell.is-ai-duel .duel-side-drain-value {
  display: none;
}

.app-shell.is-ai-duel.is-turn-based .duel-tempo-central-drain {
  display: none;
}

.multiplayer-net-status {
  border-left: 1px solid rgba(174, 202, 214, 0.28);
  padding-left: 0.6rem;
  color: #8fe3d5;
  font-size: 0.62rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.multiplayer-net-status.is-fair {
  color: #f4c95d;
}

.multiplayer-net-status.is-poor {
  color: #ff7f8f;
  text-shadow: 0 0 7px rgba(237, 82, 108, 0.32);
}

.duel-tempo-player-drain {
  grid-area: player-tempo;
  align-self: start;
  justify-self: start;
  margin-left: 4.6rem;
  white-space: nowrap;
}

.duel-tempo-ai-drain {
  grid-area: ai-tempo;
  align-self: start;
  justify-self: end;
  margin-right: 2rem;
  white-space: nowrap;
}

.duel-tempo-panel .duel-counter-stack {
  grid-area: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
}

.duel-tempo-panel .duel-counter-stack .combo-counter,
.duel-tempo-panel .duel-counter-stack .chain-counter {
  --counter-y: 0;
  transform: none;
  width: 4.35rem;
  min-height: 2.25rem;
  padding: 0.32rem 0.34rem;
}

.duel-tempo-panel .duel-counter-stack .combo-counter span,
.duel-tempo-panel .duel-counter-stack .chain-counter span {
  font-size: 0.52rem;
}

.duel-tempo-panel .duel-counter-stack .combo-counter strong,
.duel-tempo-panel .duel-counter-stack .chain-counter strong {
  font-size: calc(0.98rem + var(--combo-power) * 0.04rem);
}

.duel-tempo-panel span {
  color: rgba(208, 230, 244, 0.68);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.duel-tempo-panel strong {
  color: #f2fbff;
  font-size: 0.84rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#duel-base-mult.is-boosted,
.duel-drain-value.is-phase-3 {
  color: #ff9da8;
  text-shadow: 0 0 8px rgba(255, 104, 119, 0.3);
}

.duel-drain-value.is-overtime {
  color: #ff7777;
  text-shadow: 0 0 10px rgba(255, 68, 68, 0.7);
}

.duel-drain-value.is-phase-1 {
  color: #f7fbff;
}

.duel-drain-value.is-phase-2 {
  color: #f5dfa2;
  text-shadow: 0 0 7px rgba(245, 210, 112, 0.2);
}

.duel-clock-label,
.duel-clock-value {
  display: none;
}

.app-shell.is-ai-duel.is-turn-based .duel-clock-label,
.app-shell.is-ai-duel.is-turn-based .duel-clock-value {
  display: inline;
}

.app-shell.is-ai-duel.is-turn-based .duel-clock-value {
  display: inline-block;
  box-sizing: border-box;
  min-inline-size: 4.65em;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 5px;
  text-align: center;
}

.duel-tempo-panel .is-clock-active .duel-clock-value {
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  padding: 3px 7px;
  background: #f5f7f8;
  color: #111518;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.28);
}

.duel-tempo-panel .is-clock-low:not(.is-clock-active) .duel-clock-value {
  color: #ff9da8;
  text-shadow: 0 0 8px rgba(255, 104, 119, 0.38);
}

.duel-tempo-panel .is-clock-overtime:not(.is-clock-active) .duel-clock-value {
  color: #d7193f;
  text-shadow: 0 0 10px rgba(215, 25, 63, 0.55);
}

.duel-tempo-panel .is-clock-active.is-clock-low .duel-clock-value {
  border-color: #ffb8c0;
  background: #ffb8c0;
  color: #2b0c11;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(255, 126, 143, 0.5);
}

.duel-tempo-panel .is-clock-active.is-clock-overtime .duel-clock-value {
  border-color: #a4001e;
  background: #a4001e;
  color: #ffffff;
  animation: duel-clock-overtime-flash 620ms ease-in-out infinite alternate;
}

.app-shell.is-ai-duel.is-turn-based .board-container canvas {
  transition: filter 140ms ease, opacity 140ms ease;
}

.app-shell.is-ai-duel.is-turn-based.is-ai-turn .player-board-container canvas,
.app-shell.is-ai-duel.is-turn-based.is-player-turn .ai-board-container canvas {
  filter: brightness(0.72) saturate(0.9);
  opacity: 0.88;
}

.app-shell.is-ai-duel.is-turn-based.is-player-turn .player-board-container canvas,
.app-shell.is-ai-duel.is-turn-based.is-ai-turn .ai-board-container canvas {
  filter: none;
  opacity: 1;
}

/* ------------------------------------------------------------------------
 * AI Duel board layout fixes
 *
 * The AI duel mode wraps each match窶・ board and its label in a dedicated
 * container (.board-container) so the label can be positioned relative to
 * the board using absolute positioning. Without these rules the containers
 * are auto窶叢laced by CSS grid (default behaviour), causing the labels and
 * canvases to fall out of alignment.  The following rules assign each
 * container to the appropriate grid area and establish a relative
 * positioning context for the labels.  The labels themselves are then
 * absolutely positioned over the top-left of the board, with a slight
 * vertical offset to clear the health bar.  These rules apply only in
 * AI duel mode so singleplayer and other modes are unaffected.
 */
.app-shell.is-ai-duel .board-container {
  position: relative;
  width: 100%;
  height: auto;
  align-self: start;
  justify-self: stretch;
}

.app-shell.is-ai-duel .player-board-container {
  grid-area: player-board;
}

.app-shell.is-ai-duel .ai-board-container {
  grid-area: ai-board;
}

.app-shell.is-ai-duel .board-container .duel-board-label {
  position: absolute;
  top: -1.38rem;
  left: 0;
  width: auto;
  text-align: left;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
}

.app-shell.is-ai-duel .ai-board-container .duel-board-label {
  right: 0;
  left: auto;
  text-align: right;
}

/* Ensure board canvases fill their container while respecting the size
   limits defined elsewhere. Without this the canvas might shrink when the
   container is larger than the intrinsic canvas size. */
.app-shell.is-ai-duel .board-container canvas {
  width: 100%;
  height: auto;
  display: block;
}

.duel-combat-panel {
  z-index: 4;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.95rem;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: var(--duel-hud-width, 13rem);
  min-height: 0;
  padding: 0.7rem 0.55rem 2.95rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0.78), rgba(7, 10, 15, 0.7));
  box-shadow: none;
  pointer-events: none;
}

.player-duel-panel {
  grid-area: player-hud;
}

.ai-duel-panel {
  grid-area: ai-hud;
}

.duel-b2b {
  grid-area: auto;
  align-self: start;
  justify-self: stretch;
  width: min(100%, 8rem);
  transform: none;
}

.duel-b2b strong {
  font-size: 1.86rem;
}

.duel-hp > span {
  color: rgba(208, 230, 244, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.duel-pp-segments,
.duel-misfire-segments {
  width: 100%;
}

.app-shell.is-ai-duel:not(.is-classic-mult) .duel-pp-segments {
  display: none;
}

.app-shell.is-ai-duel.is-classic-mult .duel-b2b {
  width: min(100%, 9rem);
}

.app-shell.is-ai-duel.is-classic-mult .duel-b2b strong {
  font-size: 2.1rem;
}

.duel-hud-row {
  display: grid;
  grid-template-columns: minmax(1.5rem, 1.75rem) minmax(2.1rem, 2.45rem) minmax(4.45rem, 4.45rem);
  grid-template-areas: "shield hp queue";
  gap: 0.68rem;
  align-content: stretch;
  align-self: stretch;
  min-height: 0;
  height: 100%;
}

.ai-duel-panel .duel-hud-row {
  grid-template-columns: minmax(4.45rem, 4.45rem) minmax(2.1rem, 2.45rem) minmax(1.5rem, 1.75rem);
  grid-template-areas: "queue hp shield";
}

.duel-counter-stack {
  grid-area: counter;
  display: grid;
  grid-template-rows: repeat(2, auto);
  align-content: start;
  gap: 0.45rem;
  min-width: 0;
}

.duel-counter-stack .combo-counter,
.duel-counter-stack .chain-counter {
  --counter-y: 0;
  grid-area: auto;
  grid-row: auto;
  align-self: start;
  transform: none;
  width: 5.4rem;
  padding: 0.42rem 0.4rem;
}

.duel-counter-stack .combo-counter span,
.duel-counter-stack .chain-counter span {
  font-size: 0.58rem;
}

.duel-counter-stack .combo-counter strong,
.duel-counter-stack .chain-counter strong {
  font-size: calc(1.18rem + var(--combo-power) * 0.06rem);
}

.duel-counter-stack .chain-counter strong {
  font-size: calc(1.18rem + var(--chain-power) * 0.07rem);
}

.duel-shield-meter {
  grid-area: shield;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(12rem, 1fr);
  gap: 0.26rem;
  min-width: 0;
  min-height: 0;
  padding-bottom: 1.35rem;
  align-self: stretch;
  height: 100%;
  color: #9eefff;
}

.duel-shield-meter > span {
  color: rgba(222, 249, 255, 0.84);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.duel-shield-meter::after {
  content: attr(data-dr) " DR";
  position: absolute;
  right: 50%;
  bottom: 0.78rem;
  transform: translateX(50%);
  color: rgba(158, 239, 255, 0.82);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-align: center;
  text-shadow: 0 0 7px rgba(80, 220, 255, 0.36);
  white-space: nowrap;
}

.duel-shield-meter::before {
  content: attr(data-shield);
  position: absolute;
  right: 50%;
  top: 0.95rem;
  z-index: 3;
  transform: translateX(50%);
  color: rgba(240, 254, 255, 0.96);
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 7px rgba(73, 227, 255, 0.42);
  pointer-events: none;
}

.duel-shield-track {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(139, 219, 239, 0.34);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 28%),
    rgba(6, 16, 22, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(168, 244, 255, 0.08),
    inset 0 0 12px rgba(68, 211, 244, 0.16),
    0 0 8px rgba(68, 211, 244, 0.16);
  overflow: hidden;
}

.duel-shield-track::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: calc(var(--shield-fill, 0) * 100%);
  background: linear-gradient(180deg, rgba(173, 239, 246, 0.96), rgba(45, 190, 215, 0.9) 42%, rgba(15, 119, 157, 0.9));
  opacity: 0.68;
  transition: height 80ms linear, opacity 120ms ease;
}

.duel-shield-marker {
  position: absolute;
  right: 0;
  left: 0;
  bottom: var(--marker-y);
  z-index: 4;
  height: 1px;
  background: rgba(244, 253, 255, 0.48);
  box-shadow: 0 0 5px rgba(102, 232, 255, 0.28);
  pointer-events: none;
}

.duel-shield-marker::after {
  content: attr(data-mult);
  position: absolute;
  top: -0.43rem;
  right: 0;
  left: 0;
  color: rgba(244, 254, 255, 0.9);
  font-size: 0.42rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 5px rgba(62, 225, 255, 0.42);
}

.duel-shield-meter.is-gaining .duel-shield-track {
  animation: shield-gain-pulse 300ms ease;
}

.duel-shield-meter.is-damaged .duel-shield-track {
  animation: shield-damage-crack 340ms ease;
}

.duel-shield-meter.is-tier-up .duel-shield-track {
  animation: shield-tier-up 440ms ease;
}

.duel-shield-meter.is-tier-down .duel-shield-track {
  animation: shield-tier-down 440ms ease;
}

.duel-queue {
  grid-area: queue;
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

.duel-queue .attack-queue-packet {
  width: min(4.45rem, 100%);
  font-size: 0.9rem;
  left: 0;
}

.ai-duel-panel .duel-queue .attack-queue-packet {
  right: 0;
  left: auto;
  padding: 0 0.48rem 0 0.85rem;
  clip-path: none;
  box-shadow: none;
}

.player-duel-panel .duel-queue .attack-queue-packet::before,
.player-duel-panel .duel-queue .attack-queue-packet::after {
  transform: scaleX(-1);
}

.player-duel-panel .duel-queue .queue-packet-sprite,
.player-duel-panel .duel-queue .queue-packet-timer-fill,
.player-duel-panel .duel-queue .queue-packet-overlay {
  transform: scaleX(-1);
}

.ai-duel-panel .duel-queue .attack-queue-packet.is-actionable {
  box-shadow: none;
}

.ai-duel-panel .attack-queue-line {
  right: auto;
  left: auto;
  right: 0;
  border-left: 0;
  border-right: 2px solid currentColor;
}

.ai-duel-panel .attack-queue-line::before {
  left: auto;
  right: -2px;
}

.ai-duel-panel .attack-queue-line::after {
  left: auto;
  right: 0;
}

.ai-duel-panel .attack-queue-line .arrow {
  left: auto;
  right: 2rem;
  transform: translateY(-50%) rotate(-135deg);
}

.ai-duel-panel .attack-queue-packet.is-launching {
  animation: none;
}

.death-presentation-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}
.death-presentation-component {
  position: absolute;
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;
}
.death-presentation-gems { position: absolute; inset: 0; width: 100%; height: 100%; }
.death-presentation-source { visibility: hidden !important; }
.death-board-empty::before, .death-board-empty::after { opacity: 0 !important; animation: none !important; }

.duel-hp {
  grid-area: hp;
  display: grid;
  grid-template-rows: auto minmax(12rem, 1fr) auto auto;
  gap: 0.32rem;
  min-height: 0;
  align-self: stretch;
  height: 100%;
}

.duel-hp > div:not(.duel-bar-delta) {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 2.05rem;
  justify-self: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 10px rgba(89, 199, 94, 0.32),
    inset 0 0 0 1px rgba(208, 230, 244, 0.16),
    inset 0 -10px 16px rgba(0, 0, 0, 0.24);
}

.duel-hp.is-hit > div {
  animation: hp-hit-rumble 420ms ease;
}

.duel-damage-projection {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.duel-damage-band,
.duel-cancel-projection,
.duel-damage-erase {
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
  transform-origin: top center;
}

.duel-damage-band {
  z-index: 1;
  opacity: 1;
  transition:
    top 680ms cubic-bezier(0.16, 1, 0.3, 1),
    height 680ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 110ms linear,
    box-shadow 110ms linear,
    opacity 110ms linear;
  will-change: top, height, opacity, filter;
}

.duel-damage-band.is-idle {
  background: #C2F1C8;
  box-shadow: 0 0 7px rgba(194, 241, 200, 0.52);
  animation: duel-damage-idle-pulse 1100ms ease-in-out infinite;
}

.duel-damage-band.is-active {
  background: #FFC626;
  box-shadow: 0 0 9px rgba(255, 198, 38, 0.72);
  animation: duel-damage-active-pulse 850ms ease-in-out infinite;
}

.duel-damage-band.is-ready {
  background: #F4314B;
  box-shadow: 0 0 10px rgba(244, 49, 75, 0.78);
  animation: duel-damage-ready-pulse 680ms ease-in-out infinite;
}

.duel-damage-band.is-launching {
  z-index: 2;
  animation: duel-damage-launch 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.duel-cancel-projection {
  z-index: 4;
  background: #58DAFF;
  box-shadow: 0 0 12px rgba(73, 218, 255, 0.78);
  animation: duel-cancel-projection-out 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.duel-damage-erase {
  z-index: 5;
  background: #FF5269;
  box-shadow: 0 0 13px rgba(255, 54, 83, 0.82);
  transform-origin: bottom center;
  animation: duel-damage-erase-out 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.duel-damage-erase.is-shield {
  background: #84EDFF;
  box-shadow: 0 0 13px rgba(75, 220, 255, 0.82);
}

@keyframes duel-damage-idle-pulse {
  0%, 100% { opacity: 1; filter: brightness(0.98); }
  50% { opacity: 1; filter: brightness(1.12); }
}

@keyframes duel-damage-active-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.18); }
}

@keyframes duel-damage-ready-pulse {
  0%, 100% { opacity: 1; filter: brightness(1.02); }
  50% { opacity: 1; filter: brightness(1.28); }
}

@keyframes duel-damage-launch {
  0% { opacity: 1; filter: brightness(1.15); }
  28% { opacity: 1; filter: brightness(2.3) saturate(1.35); }
  100% { opacity: 1; filter: brightness(1.72) saturate(1.18); }
}

@keyframes duel-cancel-projection-out {
  0%, 18% { opacity: 1; filter: brightness(1.65); }
  100% { opacity: 0; filter: brightness(1.04); }
}

@keyframes duel-damage-erase-out {
  0%, 18% { opacity: 1; filter: brightness(2); transform: scaleY(1); }
  100% { opacity: 0; filter: brightness(1.18); transform: scaleY(0); }
}

.duel-shield-meter.is-hit .duel-shield-track {
  animation: shield-hit-rumble 420ms ease;
}

.duel-shield-meter.is-damaged.is-hit .duel-shield-track {
  animation:
    shield-damage-crack 340ms ease,
    shield-hit-rumble 420ms ease;
}

@keyframes shield-hit-rumble {
  0%, 100% { transform: translateX(0); }
  16% { transform: translateX(-2px); }
  32% { transform: translateX(2px); }
  50% { transform: translateX(-1px); }
  68% { transform: translateX(1px); }
}
.duel-hp i {
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  z-index: 0;
  background-color: var(--duel-hp-color, #59C75E);
  box-shadow: none;
  transform: scaleY(var(--duel-hp, 1));
  transform-origin: bottom;
  transition: background-color 140ms linear, transform 140ms linear;
}

.duel-hp strong {
  display: grid;
  gap: 0.08rem;
  color: rgba(232, 242, 248, 0.78);
  font-size: 0.66rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.duel-hp strong span:last-child {
  color: rgba(232, 242, 248, 0.56);
  font-size: 0.58rem;
}

.duel-bar-delta {
  min-height: 0.72rem;
  color: rgba(232, 242, 248, 0.56);
  font-size: 0.62rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  opacity: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.84);
  transform: translateY(0.18rem);
  transition: none;
  pointer-events: none;
}

.duel-shield-meter > .duel-bar-delta {
  position: absolute;
  right: 50%;
  bottom: 0;
  transform: translate(50%, 0.18rem);
  width: max-content;
  min-width: 100%;
}

.duel-bar-delta.is-visible {
  animation: duel-bar-delta-flash 1080ms ease-out forwards;
}

.duel-bar-delta.is-heal {
  color: rgba(130, 255, 197, 0.92);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.86),
    0 0 8px rgba(91, 255, 187, 0.32);
}

.duel-bar-delta.is-damage {
  color: rgba(255, 123, 139, 0.94);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.88),
    0 0 8px rgba(255, 91, 111, 0.34);
}

@keyframes duel-bar-delta-flash {
  0% {
    opacity: 0;
    transform: translateY(0.18rem) scale(0.96);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.18rem) scale(0.98);
  }
}

.duel-shield-meter > .duel-bar-delta.is-visible {
  animation-name: duel-shield-bar-delta-flash;
}

@keyframes duel-shield-bar-delta-flash {
  0% {
    opacity: 0;
    transform: translate(50%, 0.18rem) scale(0.96);
  }
  12% {
    opacity: 1;
    transform: translate(50%, 0) scale(1.04);
  }
  70% {
    opacity: 1;
    transform: translate(50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(50%, -0.18rem) scale(0.98);
  }
}

.duel-combat-panel.is-low {
  animation: hp-warning-pulse var(--low-hp-pulse-duration, 1.35s) ease-in-out infinite;
}

.duel-combat-panel.is-low .duel-hp > div:not(.duel-bar-delta) {
  box-shadow:
    0 0 0 1px rgba(255, 84, 108, calc(0.62 + var(--low-hp-intensity, 0) * 0.28)),
    0 0 calc(12px + var(--low-hp-intensity, 0) * 16px) rgba(255, 58, 92, calc(0.3 + var(--low-hp-intensity, 0) * 0.32)),
    0 0 calc(28px + var(--low-hp-intensity, 0) * 20px) rgba(255, 36, 76, calc(0.12 + var(--low-hp-intensity, 0) * 0.2)),
    inset 0 0 0 1px rgba(208, 230, 244, 0.16);
}

.app-shell.is-player-low-hp .player-board,
.app-shell.is-ai-low-hp .ai-board {
  animation: duel-board-low-hp-pulse var(--low-hp-pulse-duration, 1.35s) ease-in-out infinite;
}

.app-shell .board-container.is-low-hp,
.app-shell .board-container.has-lethal-border {
  isolation: isolate;
}

.app-shell .board-container.is-low-hp::before,
.app-shell .board-container.has-lethal-border::before {
  content: "";
  position: absolute;
  z-index: 11;
  inset: -0.18rem;
  border: 2px solid rgba(255, 42, 60, calc(0.72 + var(--low-hp-intensity, 0) * 0.28));
  border-radius: 0.22rem;
  box-shadow:
    0 0 calc(8px + var(--low-hp-intensity, 0) * 14px)
      rgba(255, 30, 52, calc(0.42 + var(--low-hp-intensity, 0) * 0.38)),
    0 0 calc(20px + var(--low-hp-intensity, 0) * 24px)
      rgba(255, 18, 42, calc(0.16 + var(--low-hp-intensity, 0) * 0.3));
  pointer-events: none;
  animation: duel-low-hp-border-pulse var(--low-hp-pulse-duration, 1.35s) ease-in-out infinite;
}

.app-shell .board-container.has-lethal-border:not(.is-low-hp)::before {
  animation: none;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.app-shell .board-container.has-lethal-border.is-lethal-alert:not(.is-low-hp)::before {
  opacity: 1;
}

@keyframes duel-low-hp-border-pulse {
  0%, 100% {
    filter: brightness(calc(1.04 + var(--low-hp-intensity, 0) * 0.28));
    opacity: calc(0.78 + var(--low-hp-intensity, 0) * 0.18);
  }
  50% {
    filter: brightness(calc(1.4 + var(--low-hp-intensity, 0) * 0.62));
    opacity: 1;
  }
}

@keyframes duel-board-low-hp-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 73, 103, calc(0.24 + var(--low-hp-intensity, 0) * 0.24)),
      0 0 calc(8px + var(--low-hp-intensity, 0) * 10px) rgba(255, 42, 82, calc(0.12 + var(--low-hp-intensity, 0) * 0.14));
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(255, 112, 132, calc(0.58 + var(--low-hp-intensity, 0) * 0.32)),
      0 0 calc(18px + var(--low-hp-intensity, 0) * 22px) rgba(255, 56, 96, calc(0.3 + var(--low-hp-intensity, 0) * 0.3)),
      0 0 calc(36px + var(--low-hp-intensity, 0) * 26px) rgba(255, 38, 82, calc(0.14 + var(--low-hp-intensity, 0) * 0.18));
  }
}

@keyframes hp-hit-rumble {
  0%,
  100% {
    transform: translateX(0);
    filter: brightness(1);
  }

  14% {
    transform: translateX(-3px);
    filter: brightness(1.65);
  }

  28% {
    transform: translateX(3px);
  }

  42% {
    transform: translateX(-2px);
    filter: brightness(1.35);
  }

  56% {
    transform: translateX(2px);
  }

  72% {
    transform: translateX(-1px);
  }
}

.app-shell.is-tutorial canvas {
  width: min(
    var(--demo-width-cap, 32rem),
    100%
  );
  max-height: calc(100vh - 13rem);
}

.app-shell.is-tutorial .board-container {
  width: 100%;
  min-height: clamp(18rem, 58vh, 34rem);
  max-height: calc(100vh - 13rem);
}

@media (max-width: 860px) {
  .challenge-menu-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-popup.is-challenge-menu-popup {
    width: 100%;
    max-width: 42rem;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
  }

  .app-shell.is-tutorial .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "board"
      "dialogue"
      "right"
      "left";
  }

  .app-shell.is-tutorial.is-tutorial-challenge .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "right"
      "board"
      "left";
  }

  .app-shell.is-ai-duel .board-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.is-ai-duel .duel-arena {
    --duel-hud-width: clamp(9.8rem, 12vw, 11rem);
    --duel-board-width: min(62vh, calc(50vw - 12.5rem));
    --duel-gap: clamp(0.55rem, 1vw, 0.9rem);
  }

  canvas {
    width: min(32rem, calc((100vh - 18.75rem) * 0.8), calc(100vw - 18rem));
  }

  .app-shell.is-tutorial canvas {
    width: min(
      var(--demo-width-cap, 30rem),
      100%
    );
    max-height: calc(100vh - 17rem);
  }
}

@media (max-width: 520px) {
  .challenge-menu-grid {
    grid-template-columns: 1fr;
  }

  .challenge-entry {
    grid-template-columns: 1fr;
  }

  .challenge-entry button {
    width: 100%;
  }

  .app-shell {
    width: min(100vw - 20px, 1180px);
    padding: 10px 0;
    gap: 12px;
  }

  .menu-panel,
  .play-panel {
    padding: 14px;
  }

  .board-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "right"
      "board"
      "hp"
      "left";
    row-gap: 0.75rem;
  }

  .b2b-board-meter,
  .combo-counter,
  .chain-counter,
  .attack-queue,
  .tutorial-dialogue,
  .tutorial-panel {
    grid-column: 1;
    width: min(100%, 13rem);
    justify-self: center;
    transform: none;
  }

  .b2b-board-meter {
    grid-area: left;
    transform: none;
  }

  .combo-counter {
    --counter-y: 0;
    grid-area: left;
  }

  .chain-counter {
    --counter-y: 4.4rem;
    grid-area: left;
    transform: translateY(var(--counter-y));
  }

  .tutorial-panel {
    grid-area: right;
  }

  .tutorial-dialogue {
    grid-area: dialogue;
    width: min(100%, 28rem);
  }

  .attack-queue {
    grid-area: queue;
    position: relative;
    display: block;
    min-width: 0;
    max-width: 13rem;
    min-height: 8rem;
    align-self: center;
  }

  .app-shell.is-tutorial .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "board"
      "dialogue"
      "right"
      "left";
  }

  .app-shell.is-tutorial.is-tutorial-challenge .board-stage {
    grid-template-areas:
      "right"
      "board"
      "left";
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "board"
      "right";
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel {
    width: min(100%, 14rem);
    max-width: 14rem;
    min-height: 11rem;
    justify-self: center;
  }

  .app-shell.is-ai-duel .board-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.is-ai-duel .duel-arena {
    --duel-hud-width: min(100%, 14rem);
    --duel-board-width: min(28rem, calc(100vw - 2.75rem));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "player-tempo"
      "player-hud"
      "player-board"
      "ai-board"
      "ai-hud";
    row-gap: 0.75rem;
  }

  .duel-tempo-base {
    grid-area: player-tempo;
    align-self: start;
    justify-self: center;
  }

  .duel-tempo-player-drain,
  .duel-tempo-ai-drain {
    grid-area: player-tempo;
    margin: 1.3rem 0 0;
    justify-self: center;
  }

  .duel-tempo-ai-drain {
    margin-top: 2.55rem;
  }

  .duel-combat-panel {
    width: min(100%, 14rem);
    min-height: 11rem;
    justify-self: center;
  }

  .mode-button {
    align-items: start;
    flex-direction: column;
  }

  .mode-button small {
    white-space: normal;
  }

  .duel-config-shell {
    width: min(100vw - 20px, 760px);
  }

  .duel-preset-options {
    grid-template-columns: 1fr;
  }

  .duel-preset-option {
    min-height: 62px;
  }

  .duel-config-category label {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  canvas {
    width: min(32rem, calc((100vh - 28rem) * 0.8), calc(100vw - 2.75rem));
  }

  .app-shell.is-tutorial canvas {
    width: min(
      var(--demo-width-cap, 32rem),
      calc(100vw - 2.75rem)
    );
    max-height: calc(100vh - 24rem);
  }
}

/* Phase 1 UI foundation: browser-arcade shell. Gameplay and board rules stay untouched. */
:root {
  --bg: #0b0e10;
  --panel: #151a1f;
  --panel-strong: #20272e;
  --text: #f4f7f8;
  --muted: #a9b3b9;
  --line: rgba(155, 181, 194, 0.28);
  --line-strong: rgba(190, 221, 232, 0.58);
  --inset-light: rgba(255, 255, 255, 0.09);
  --inset-dark: rgba(0, 0, 0, 0.52);
  --radius-panel: 3px;
  --radius-button: 3px;
  --radius-small: 2px;
  --panel-shadow:
    0 4px 0 #050607,
    0 0 0 1px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 var(--inset-light);
  --panel-fill:
    linear-gradient(180deg, #242b32 0, #181e23 12%, #11161a 100%);
  --teal: #28dfc0;
  --gold: #ffd052;
  --rose: #ff5f76;
  --ui-cyan: #62d8ff;
  --ui-edge: #52616b;
  --ui-edge-bright: #91a9b5;
  --ui-face: #20272e;
  --ui-face-dark: #11161a;
  --ui-pressed: #0c1114;
  --font-ui: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --font-display: "Trebuchet MS", "Arial Black", Arial, sans-serif;
  color-scheme: dark;
  font-family: var(--font-ui);
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(111, 140, 151, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 140, 151, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, #111519, #090b0d);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  font-family: var(--font-ui);
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

.screen-panel *,
.duel-config-screen *,
.pause-popup *,
.duel-end-popup *,
.tutorial-popup *,
.tutorial-panel *,
.practice-challenge-panel * {
  letter-spacing: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ui-cyan);
  outline-offset: 2px;
}

.screen-panel {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ui-edge);
  background: var(--panel-fill);
  box-shadow: var(--panel-shadow);
}

.screen-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 4px;
  background: linear-gradient(90deg, var(--teal) 0 34%, var(--ui-cyan) 34% 52%, #354149 52%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.screen-panel h1 {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 900;
  text-shadow:
    0 2px 0 #050708,
    0 0 10px rgba(98, 216, 255, 0.18);
}

.main-menu-page:not([hidden]) {
  animation: ui-page-enter 150ms ease-out both;
}

@keyframes ui-page-enter {
  from {
    opacity: 0;
    transform: translateX(8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mode-button,
.primary-action,
.pause-actions button,
.tutorial-actions button,
.tutorial-controls button,
.tutorial-popup-actions button,
.challenge-entry button,
.duel-config-advanced-toggle {
  border: 1px solid var(--ui-edge);
  border-bottom-color: #050708;
  border-radius: var(--radius-button);
  background:
    linear-gradient(180deg, #303942 0, #222a31 12%, #171c21 100%);
  box-shadow:
    0 3px 0 #050708,
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 1px 0 0 rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-weight: 900;
  transform: translate(0, 0);
  transition:
    border-color 90ms linear,
    background-color 90ms linear,
    color 90ms linear,
    filter 90ms linear,
    transform 80ms ease,
    box-shadow 80ms linear;
}

.mode-button {
  position: relative;
  border-left: 4px solid #657580;
  padding-inline: 13px;
}

.mode-button span {
  color: #f7fafb;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.05;
}

.mode-button small {
  color: #aebbc1;
  font-size: 0.76rem;
  line-height: 1.25;
}

.mode-button.is-active {
  border-color: #79f4df;
  border-left-color: var(--teal);
  background:
    linear-gradient(180deg, #25433f 0, #19342f 14%, #12221f 100%);
  box-shadow:
    0 3px 0 #07100e,
    inset 0 1px 0 rgba(190, 255, 243, 0.2),
    inset 3px 0 0 rgba(40, 223, 192, 0.42);
}

.mode-button:not(:disabled):hover,
.pause-actions button:not(:disabled):hover,
.tutorial-actions button:not(:disabled):hover,
.tutorial-controls button:not(:disabled):hover,
.tutorial-popup-actions button:not(:disabled):hover,
.challenge-entry button:not(:disabled):hover,
.duel-config-advanced-toggle:not(:disabled):hover {
  border-color: #91a9b5;
  filter: brightness(1.14);
  transform: translateX(3px);
  box-shadow:
    0 3px 0 #050708,
    -3px 0 0 rgba(40, 223, 192, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.mode-button:not(:disabled):active,
.primary-action:not(:disabled):active,
.pause-actions button:not(:disabled):active,
.tutorial-actions button:not(:disabled):active,
.tutorial-controls button:not(:disabled):active,
.tutorial-popup-actions button:not(:disabled):active,
.challenge-entry button:not(:disabled):active,
.duel-config-advanced-toggle:not(:disabled):active {
  filter: brightness(0.9);
  transform: translate(3px, 2px);
  box-shadow:
    0 1px 0 #050708,
    inset 0 2px 5px rgba(0, 0, 0, 0.46);
}

.mode-button:disabled,
button:disabled {
  filter: saturate(0.35);
  opacity: 0.54;
}

.primary-action,
.tutorial-popup-actions button.is-primary {
  border-color: var(--action-teal-edge);
  border-bottom-color: #073f3a;
  background:
    linear-gradient(
      180deg,
      var(--action-teal-top) 0,
      var(--action-teal-mid) 18%,
      var(--action-teal-bottom) 100%
    );
  box-shadow:
    0 3px 0 var(--action-teal-shadow),
    inset 0 1px 0 rgba(226, 255, 249, 0.2);
  color: #f7fffd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.primary-action:not(:disabled):hover,
.tutorial-popup-actions button.is-primary:not(:disabled):hover {
  border-color: #86e5d6;
  filter: brightness(1.09);
  transform: translateY(-1px);
  box-shadow:
    0 4px 0 var(--action-teal-shadow),
    0 0 10px rgba(40, 223, 192, 0.14),
    inset 0 1px 0 rgba(226, 255, 249, 0.26);
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 7px;
  padding: 3px 7px;
  border-left: 3px solid var(--teal);
  background: #0b1113;
  color: #8ff4e4;
  font-family: var(--font-display);
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
}

.audio-settings {
  border: 1px solid #3f4b53;
  border-radius: var(--radius-panel);
  background: #0e1317;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 0 #060809;
}

.audio-setting {
  color: #c0cbd0;
}

.audio-icon-button {
  border-color: #52616b;
  border-radius: var(--radius-button);
  background: linear-gradient(180deg, #2b343b, #141a1e);
  box-shadow:
    0 2px 0 #050708,
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.audio-icon-button:hover {
  border-color: var(--teal);
  filter: brightness(1.16);
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 #050708,
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.audio-setting input[type="range"]::-webkit-slider-runnable-track,
.duel-config-range-input input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 1px;
}

.audio-setting input[type="range"]::-webkit-slider-thumb,
.duel-config-range-input input[type="range"]::-webkit-slider-thumb {
  border-radius: 2px;
}

.duel-config-shell {
  border: 2px solid var(--ui-edge);
  background: var(--panel-fill);
  box-shadow: var(--panel-shadow);
}

.duel-config-header {
  border-bottom: 2px solid #38444c;
  background:
    linear-gradient(180deg, #202830, #11171b);
  box-shadow: inset 0 -1px 0 #07090b;
}

.duel-config-header h1 {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 900;
  text-shadow: 0 2px 0 #050708;
}

.duel-config-category {
  border: 1px solid #3a464e;
  border-left: 3px solid #60717b;
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, #1d242a, #11161a);
  box-shadow:
    0 2px 0 #07090b,
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.duel-config-category h2 {
  color: #8ff4e4;
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.duel-config-category input:not([type="range"]):not([type="checkbox"]),
.duel-config-category select {
  border: 1px solid #4c5a63;
  border-bottom-color: #15191c;
  border-radius: var(--radius-button);
  background: #090d10;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.045);
}

.duel-config-category input:not([type="range"]):not([type="checkbox"]):focus,
.duel-config-category select:focus {
  border-color: var(--teal);
  background: #0d1416;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(40, 223, 192, 0.18);
}

.duel-config-advanced-toggle[aria-expanded="true"] {
  border-color: var(--teal);
  background: #152b27;
  color: #ffffff;
}

.duel-config-start {
  border-top: 2px solid #38444c;
  background: #0c1114;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.duel-level-button {
  border-radius: 2px;
  box-shadow:
    0 2px 0 #050708,
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.duel-level-button:hover {
  transform: translateY(-1px);
}

.config-help-tooltip {
  border: 1px solid var(--teal);
  border-radius: var(--radius-panel);
  background: #080d0f;
  box-shadow:
    3px 3px 0 #020304,
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tutorial-popup,
.pause-popup,
.duel-end-popup {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ui-edge);
  border-radius: var(--radius-panel);
  background: var(--panel-fill);
  box-shadow: var(--panel-shadow);
}

.tutorial-popup::before,
.pause-popup::before,
.duel-end-popup::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal) 0 42%, var(--ui-cyan) 42% 58%, #354149 58%);
  pointer-events: none;
}

.pause-popup h2,
.duel-end-popup h2,
.tutorial-popup h2,
.tutorial-dialogue h2,
.tutorial-panel h2,
.practice-challenge-panel h2 {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 900;
  text-shadow: 0 2px 0 #050708;
}

.tutorial-panel,
.practice-challenge-panel,
.tutorial-dialogue {
  border: 1px solid #3e4a52;
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, #1c2329, #101519);
  box-shadow:
    0 2px 0 #07090b,
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.challenge-category-heading {
  border-bottom: 2px solid #334048;
}

.challenge-category-heading h3 {
  color: #dff7f4;
  font-family: var(--font-display);
}

.challenge-entry {
  border: 1px solid #354148;
  border-left: 3px solid #53636d;
  border-radius: var(--radius-small);
  background:
    linear-gradient(180deg, #171d22, #0f1417);
  box-shadow:
    0 1px 0 #050708,
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.challenge-entry:hover {
  border-left-color: var(--teal);
  background:
    linear-gradient(180deg, #1c252a, #11191c);
}

.challenge-entry.is-complete {
  border-left-color: #5ae0a0;
}

.duel-results-stats,
.practice-challenge-results {
  border: 1px solid #46545d;
  background: #354148;
}

.duel-results-stats span,
.duel-results-stats strong,
.practice-challenge-results span,
.practice-challenge-results strong {
  background: #0d1215;
}

.practice-challenge-results .practice-primary-result {
  border: 1px solid #a98b37;
  background:
    linear-gradient(180deg, #292514, #131712);
  box-shadow: inset 0 1px 0 rgba(255, 232, 142, 0.08);
}

.tutorial-progress > div,
.special-progress-row div,
.loading-bar {
  border: 1px solid #3f4b53;
  border-radius: 1px;
  background: #080c0f;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.68);
}

.tutorial-progress i,
.special-progress-row i,
.loading-bar span {
  background:
    linear-gradient(180deg, #85f8e7, #25cdb2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.pause-overlay,
.duel-end-overlay,
.practice-challenge-overlay {
  background: rgba(1, 3, 4, 0.78);
}

/* Singleplayer shell: full-height board, right score rail, bottom challenge objective. */
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 12vw, 10.5rem);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage stats";
  gap: clamp(10px, 1.6vmin, 16px);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  grid-area: stats;
  display: grid;
  align-self: center;
  min-width: 0;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-area: stage;
  grid-template-columns: minmax(7.5rem, 0.28fr) minmax(0, auto);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "left board";
  width: 100%;
  height: 100%;
  padding-block: 4px;
}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-columns: minmax(7.5rem, 0.28fr) minmax(0, auto);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board"
    ". meter";
  row-gap: 0.65rem;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-container {
  height: 100%;
}

.app-shell:not(.is-ai-duel) .ai-board-container {
  display: none;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config):not(.is-training-challenge) canvas {
  width: min(32rem, calc((100vh - 3.5rem) * 0.8), 100%);
}

.app-shell.is-training-challenge canvas {
  width: min(32rem, calc((100vh - 6.25rem) * 0.8), 100%);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div {
  padding: 9px 10px;
  border-left: 3px solid #53636d;
  background: linear-gradient(180deg, #171d22, #0d1215);
  box-shadow:
    0 2px 0 #050708,
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: center;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:nth-child(2),
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:nth-child(3) {
  display: none;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:first-child {
  border-left-color: var(--gold);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:first-child strong {
  color: #ffe477;
  font-size: 1.8rem;
  text-shadow:
    0 2px 0 #050708,
    0 0 8px rgba(255, 208, 82, 0.22);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip span {
  letter-spacing: 0;
}

.app-shell.is-training-challenge .board-stat-strip {
  display: none;
}

.training-score-rail {
  display: grid;
  gap: 8px;
  width: 100%;
  pointer-events: none;
}

.training-score-rail[hidden] {
  display: none !important;
}

.training-score-rail > div {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 12px 9px;
  border: 1px solid #46545d;
  border-left: 3px solid #63747e;
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, #192025, #0d1215);
  box-shadow:
    0 2px 0 #050708,
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  text-align: center;
}

.training-score-rail span {
  color: #aebbc1;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.training-score-rail strong {
  color: #edf4f6;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.training-score-primary {
  border-left-color: var(--gold) !important;
}

.training-score-primary strong {
  color: #ffe477;
  font-size: clamp(1.75rem, 3.4vmin, 2.35rem);
  text-shadow:
    0 2px 0 #050708,
    0 0 8px rgba(255, 208, 82, 0.22);
}

.training-score-secondary strong {
  font-size: 1.1rem;
}

.mode-button .training-challenge-best {
  margin-top: 3px;
  color: #70e9dc;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.training-score-primary .training-score-best {
  color: #70e9dc;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 7px rgba(67, 229, 209, 0.28);
}

.training-score-primary .training-score-best[hidden] {
  display: none;
}

.training-score-primary.is-record-merge .training-score-best {
  animation: training-record-merge 460ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.training-score-primary.is-record-merge > strong {
  animation: training-record-receive 460ms ease-out;
}

.training-score-primary.is-personal-best {
  border-left-color: #6ff7e6 !important;
}

.training-score-primary.is-personal-best > span,
.training-score-primary.is-personal-best > strong {
  color: #8ffced;
  text-shadow:
    0 2px 0 #050708,
    0 0 10px rgba(73, 239, 216, 0.34);
}

@keyframes training-record-merge {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  65% {
    opacity: 0.9;
    transform: translateY(-12px) scale(1.12);
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) scale(0.72);
  }
}

@keyframes training-record-receive {
  0%,
  55% {
    color: #ffe477;
    transform: scale(1);
  }

  75% {
    color: #ffffff;
    transform: scale(1.1);
  }

  100% {
    color: #8ffced;
    transform: scale(1);
  }
}

.practice-challenge-results .practice-record-result {
  grid-column: 1 / -1;
  padding: 9px 12px;
  border: 1px solid rgba(73, 239, 216, 0.38);
  background: #102622;
  color: #8ffced;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.training-challenge-meter-stack {
  grid-area: meter;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.22rem, 0.55vh, 0.38rem);
  align-self: end;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.training-challenge-meter-stack[hidden] {
  display: none !important;
}

.training-challenge-timer {
  grid-area: auto;
  position: relative;
  z-index: 6;
  display: block;
  align-self: end;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: 2.35rem;
  padding: 0;
}

.training-challenge-timer::before {
  display: none;
}

.training-challenge-timer > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #4a5860;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%),
    #080c0f;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.68),
    0 2px 0 #040607;
}

.training-challenge-timer.is-move-limit > div::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(
    to right,
    transparent calc(100% - 1px),
    rgba(4, 8, 10, 0.76) calc(100% - 1px)
  );
  background-size: var(--training-meter-segment-width, 3.333333%) 100%;
  pointer-events: none;
}

.training-challenge-timer i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--training-countdown-color, #19f019);
  transform: scaleX(var(--training-countdown, 1));
  transform-origin: left;
  transition:
    transform 80ms linear,
    background-color 160ms linear;
}

.training-challenge-timer > span {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  z-index: 4;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.66rem;
  line-height: 1;
  transform: translateY(-50%);
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.92),
    1px 1px 0 rgba(0, 0, 0, 0.92);
}

.training-challenge-timer strong {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 5;
  display: block;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  text-shadow:
    -2px -2px 0 rgba(0, 0, 0, 0.92),
    2px -2px 0 rgba(0, 0, 0, 0.92),
    -2px 2px 0 rgba(0, 0, 0, 0.92),
    2px 2px 0 rgba(0, 0, 0, 0.92),
    0 0 5px rgba(0, 0, 0, 0.9);
}

.training-challenge-timer.is-low > div {
  border-color: rgba(255, 93, 112, 0.76);
}

.target-practice-matchless-meter {
  position: relative;
  z-index: 6;
  width: 100%;
  height: clamp(1.05rem, 2.2vh, 1.28rem);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 219, 239, 0.46);
  border-radius: 2px;
  background: rgba(5, 13, 18, 0.96);
  box-shadow:
    0 0 8px rgba(34, 179, 213, 0.24),
    inset 0 0 0 1px rgba(181, 234, 244, 0.06);
}

.target-practice-matchless-meter[hidden] {
  display: none !important;
}

.target-practice-matchless-segments {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: rgba(116, 184, 202, 0.18);
}

.target-practice-matchless-segments i {
  display: block;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 48%),
    rgba(12, 29, 38, 0.96);
  box-shadow: inset -1px 0 rgba(161, 220, 232, 0.16);
  transition: background-color 140ms ease, filter 140ms ease, opacity 140ms ease;
}

.target-practice-matchless-segments i.is-filled {
  background:
    linear-gradient(180deg, rgba(205, 248, 252, 0.96), rgba(51, 193, 218, 0.94) 45%, rgba(12, 112, 153, 0.96));
  filter: drop-shadow(0 0 3px rgba(80, 224, 242, 0.72));
}

.target-practice-matchless-meter > span,
.target-practice-matchless-meter > strong {
  position: absolute;
  z-index: 2;
  top: 50%;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.98);
  transform: translateY(-50%);
  pointer-events: none;
}

.target-practice-matchless-meter > span {
  left: 0.55rem;
  font-size: clamp(0.52rem, 1.15vmin, 0.68rem);
  text-transform: uppercase;
}

.target-practice-matchless-meter > strong {
  left: 50%;
  font-size: clamp(0.72rem, 1.5vmin, 0.92rem);
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -50%);
}

.target-practice-matchless-meter.is-empty {
  border-color: rgba(255, 84, 104, 0.62);
  box-shadow: 0 0 8px rgba(255, 62, 85, 0.22), inset 0 0 0 1px rgba(255, 190, 198, 0.06);
}

.target-practice-matchless-meter.is-over-cap > strong {
  color: #dffcff;
  text-shadow: 0 0 5px rgba(73, 228, 242, 0.9), 0 1px 2px #000;
}

@media (max-width: 760px) {
  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "stage"
      "stats";
  }

  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
    align-self: end;
  }

  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .training-score-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-score-rail > div:only-child,
  .training-score-rail > div:first-child:nth-last-child(2):has(+ [hidden]) {
    grid-column: 1 / -1;
  }

  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) canvas {
    width: min(30rem, calc((100vh - 12rem) * 0.8), 100%);
  }
}

/* Keep this placement contract after all general Training layout rules. */
.app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board right"
    ". combat .";
  row-gap: var(--game-gap);
}

@media (max-width: 760px) {
  .app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
    grid-template-areas:
      "left board"
      ". combat";
  }
}

.main-menu-screen .screen-panel.menu-home {
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.main-menu-screen .screen-panel.menu-home::before {
  display: none;
}

.screen-panel h1.menu-logo-heading {
  margin: 0 0 12px;
  line-height: 0;
  text-shadow: none;
}

.menu-logo {
  display: block;
  width: 100%;
  height: auto;
}

.loading-logo {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto 18px;
}

/* Scene titles already carry the hierarchy; duplicate eyebrow labels stay hidden. */
.eyebrow {
  display: none !important;
}

/* Menu motion is deliberately isolated from layout and gameplay surfaces. */
:root {
  --menu-motion-duration: 430ms;
  --menu-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --menu-bg-x: 0px;
  --menu-bg-y: 0px;
  --menu-map-x: 0px;
  --menu-map-y: 0px;
  --menu-map-from-x: 0px;
  --menu-map-from-y: 0px;
  --menu-map-to-x: 0px;
  --menu-map-to-y: 0px;
  --menu-grid-map-x: 0px;
  --menu-grid-map-y: 0px;
  --menu-grid-map-from-x: 0px;
  --menu-grid-map-from-y: 0px;
  --menu-grid-map-to-x: 0px;
  --menu-grid-map-to-y: 0px;
  --menu-logo-x: 0px;
  --menu-logo-y: 0px;
  --menu-panel-x: 0px;
  --menu-panel-y: 0px;
  --menu-rotate-x: 0deg;
  --menu-rotate-y: 0deg;
}

body {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(180deg, #111519, #090b0d);
}

body::before {
  content: "";
  position: fixed;
  inset: -48px;
  z-index: 0;
  background-image:
    linear-gradient(rgba(111, 140, 151, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 140, 151, 0.055) 1px, transparent 1px);
  background-position: center;
  background-size: 32px 32px;
  pointer-events: none;
  will-change: transform;
  transform:
    translate3d(
      calc(var(--menu-bg-x) + var(--menu-map-x)),
      calc(var(--menu-bg-y) + var(--menu-map-y)),
      0
    )
    scale(1.025);
}

body.has-menu-motion::before {
  animation: menu-grid-idle 26s linear infinite alternate;
}

body::after {
  content: "LOADING";
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 50;
  border: 1px solid rgba(98, 216, 255, 0.45);
  padding: 5px 9px;
  background: rgba(7, 11, 14, 0.92);
  color: #bceeff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 6px, 0);
  transition: opacity 120ms linear, transform 180ms var(--menu-motion-ease);
}

body.is-menu-start-loading::after {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

body > .screen,
body > .app-shell {
  position: relative;
  z-index: 1;
}

.menu-motion-surface,
.main-menu-screen .main-menu-page,
.main-menu-screen .audio-settings,
.main-menu-screen .menu-logo-heading {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.main-menu-screen {
  perspective: 1000px;
}

.main-menu-screen .main-menu-page:not([hidden]) {
  animation: none;
  transform:
    perspective(1000px)
    translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
    rotateX(var(--menu-rotate-x))
    rotateY(var(--menu-rotate-y));
  transform-origin: center;
}

.main-menu-screen .audio-settings {
  transform: translate3d(var(--menu-panel-x), var(--menu-panel-y), 0);
}

.main-menu-screen .menu-logo-heading {
  animation: menu-logo-idle 5.8s ease-in-out infinite;
}

.multiplayer-room-shell.menu-motion-surface,
.duel-config-shell.menu-motion-surface {
  transform:
    perspective(1000px)
    translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
    rotateX(var(--menu-rotate-x))
    rotateY(var(--menu-rotate-y));
  transform-origin: center;
}

.menu-motion-surface.is-menu-transitioning {
  pointer-events: none;
}

body:not([data-menu-pan]) .menu-motion-surface.is-menu-transitioning:not(.is-menu-starting)
  button:not(.is-menu-transition-selected) {
  transition:
    opacity 160ms linear,
    filter 160ms linear,
    transform 180ms var(--menu-motion-ease);
  opacity: 0.18;
  filter: blur(2px) brightness(0.74);
}

.menu-motion-surface.is-menu-transitioning.is-menu-travel-forward:not(.is-menu-starting) {
  animation: menu-surface-forward var(--menu-motion-duration) var(--menu-motion-ease) both;
}

.menu-motion-surface.is-menu-transitioning.is-menu-travel-back:not(.is-menu-starting) {
  animation: menu-surface-back var(--menu-motion-duration) var(--menu-motion-ease) both;
}

.menu-motion-surface.is-menu-arriving {
  animation-duration: 280ms;
  animation-timing-function: var(--menu-motion-ease);
  animation-fill-mode: both;
}

.menu-motion-surface.is-menu-arriving-forward {
  animation-name: menu-surface-arrive-forward;
}

.menu-motion-surface.is-menu-arriving-back {
  animation-name: menu-surface-arrive-back;
}

.is-menu-view-exiting {
  pointer-events: none;
}

body:not([data-menu-pan]) .is-menu-view-exiting > button:not(.is-menu-transition-selected) {
  transition:
    opacity 160ms linear,
    filter 160ms linear,
    transform 180ms var(--menu-motion-ease);
  opacity: 0;
  filter: blur(2px) brightness(0.72);
}

body:not([data-menu-pan]) .is-menu-view-exiting-forward > button:not(.is-menu-transition-selected) {
  transform: translate3d(-9px, 0, -12px) scale(0.985);
}

body:not([data-menu-pan]) .is-menu-view-exiting-back > button:not(.is-menu-transition-selected) {
  transform: translate3d(9px, 0, -12px) scale(0.985);
}

.is-menu-view-entering {
  animation-duration: 250ms !important;
  animation-timing-function: var(--menu-motion-ease) !important;
  animation-fill-mode: both !important;
}

.is-menu-view-entering-forward {
  animation-name: menu-view-enter-forward !important;
}

.is-menu-view-entering-back {
  animation-name: menu-view-enter-back !important;
}

.is-menu-transition-selected {
  position: relative;
  z-index: 2;
  animation: menu-selected-emphasis 190ms var(--menu-motion-ease) both;
}

.menu-motion-surface.is-menu-starting {
  animation: menu-start-surface 480ms var(--menu-motion-ease) both;
  pointer-events: none;
}

.menu-motion-surface.is-menu-starting button:not(.is-menu-start-selected),
.menu-motion-surface.is-menu-starting input,
.menu-motion-surface.is-menu-starting select {
  transition:
    opacity 210ms linear,
    filter 210ms linear,
    transform 240ms var(--menu-motion-ease);
  opacity: 0;
  filter: blur(2px);
}

.menu-motion-surface.is-menu-starting button:nth-of-type(odd):not(.is-menu-start-selected) {
  transform: translate3d(-14px, -5px, 0);
}

.menu-motion-surface.is-menu-starting button:nth-of-type(even):not(.is-menu-start-selected) {
  transform: translate3d(14px, 5px, 0);
}

.menu-motion-surface .is-menu-start-selected {
  animation: menu-start-selected 230ms var(--menu-motion-ease) both;
}

.menu-motion-surface .mode-button.is-parallax-button {
  transform: translate3d(var(--menu-button-x, 0px), var(--menu-button-y, 0px), 0);
}

.menu-motion-surface .mode-button.is-parallax-button:hover {
  transform:
    translate3d(
      calc(var(--menu-button-x, 0px) + 3px),
      var(--menu-button-y, 0px),
      0
    );
}

.menu-motion-surface .primary-action.is-parallax-button {
  transform: translate3d(var(--menu-button-x, 0px), var(--menu-button-y, 0px), 0);
}

.menu-motion-surface .primary-action.is-parallax-button:hover {
  transform:
    translate3d(
      var(--menu-button-x, 0px),
      calc(var(--menu-button-y, 0px) - 1px),
      0
    );
}

.menu-motion-surface button.is-parallax-button:focus-visible {
  translate: 0 0 4px;
}

.menu-motion-surface .mode-button.is-active {
  animation: menu-selected-idle 4.6s ease-in-out infinite;
}

.menu-motion-paused::before,
.menu-motion-paused .menu-logo-heading,
.menu-motion-paused .mode-button.is-active {
  animation-play-state: paused !important;
}

body.is-menu-travel-forward::before {
  animation: menu-grid-travel-forward var(--menu-motion-duration) var(--menu-motion-ease) both;
}

body.is-menu-travel-back::before {
  animation: menu-grid-travel-back var(--menu-motion-duration) var(--menu-motion-ease) both;
}

body.is-menu-start-travel::before {
  animation: menu-grid-start 480ms var(--menu-motion-ease) both;
}

@keyframes menu-grid-idle {
  from {
    transform:
      translate3d(calc(var(--menu-bg-x) - 4px), calc(var(--menu-bg-y) - 3px), 0)
      scale(1.025);
  }

  to {
    transform:
      translate3d(calc(var(--menu-bg-x) + 4px), calc(var(--menu-bg-y) + 3px), 0)
      scale(1.025);
  }
}

@keyframes menu-logo-idle {
  0%,
  100% {
    transform: translate3d(var(--menu-logo-x), var(--menu-logo-y), 0);
  }

  50% {
    transform: translate3d(var(--menu-logo-x), calc(var(--menu-logo-y) - 3px), 0);
  }
}

@keyframes menu-selected-idle {
  0%,
  100% {
    scale: 1;
  }

  50% {
    scale: 1.006;
  }
}

@keyframes menu-selected-emphasis {
  0% {
    filter: brightness(1);
    scale: 1;
  }

  55% {
    filter: brightness(1.24);
    scale: 1.018;
  }

  100% {
    filter: brightness(1.08);
    scale: 1.008;
  }
}

@keyframes menu-view-enter-forward {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(14px, 0, -24px) scale(0.97);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
      rotateX(var(--menu-rotate-x))
      rotateY(var(--menu-rotate-y));
  }
}

@keyframes menu-view-enter-back {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(-14px, 0, 20px) scale(1.02);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
      rotateX(var(--menu-rotate-x))
      rotateY(var(--menu-rotate-y));
  }
}

@keyframes menu-surface-forward {
  0%,
  100% {
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
      rotateX(var(--menu-rotate-x))
      rotateY(var(--menu-rotate-y));
  }

  44% {
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 24px)
      scale(1.018);
  }
}

@keyframes menu-surface-back {
  0%,
  100% {
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
      rotateX(var(--menu-rotate-x))
      rotateY(var(--menu-rotate-y));
  }

  44% {
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), -20px)
      scale(0.985);
  }
}

@keyframes menu-surface-arrive-forward {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: perspective(1000px) translate3d(0, 0, -35px) scale(0.965);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes menu-surface-arrive-back {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: perspective(1000px) translate3d(0, 0, 28px) scale(1.025);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes menu-start-surface {
  0% {
    opacity: 1;
    filter: blur(0);
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
      scale(1);
  }

  48% {
    opacity: 0.88;
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 36px)
      scale(1.025);
  }

  100% {
    opacity: 0;
    filter: blur(4px);
    transform:
      perspective(1000px)
      translate3d(var(--menu-panel-x), var(--menu-panel-y), 62px)
      scale(1.055);
  }
}

@keyframes menu-start-selected {
  0% {
    filter: brightness(1);
    scale: 1;
  }

  42% {
    filter: brightness(1.34);
    scale: 0.965;
  }

  100% {
    filter: brightness(1.12);
    scale: 1.025;
  }
}

@keyframes menu-grid-travel-forward {
  from {
    transform: translate3d(var(--menu-bg-x), var(--menu-bg-y), 0) scale(1.025);
  }

  55% {
    transform: translate3d(calc(var(--menu-bg-x) - 12px), var(--menu-bg-y), 0) scale(1.045);
  }

  to {
    transform: translate3d(var(--menu-bg-x), var(--menu-bg-y), 0) scale(1.025);
  }
}

@keyframes menu-grid-travel-back {
  from {
    transform: translate3d(var(--menu-bg-x), var(--menu-bg-y), 0) scale(1.025);
  }

  55% {
    transform: translate3d(calc(var(--menu-bg-x) + 12px), var(--menu-bg-y), 0) scale(1.012);
  }

  to {
    transform: translate3d(var(--menu-bg-x), var(--menu-bg-y), 0) scale(1.025);
  }
}

@keyframes menu-grid-start {
  from {
    opacity: 1;
    transform: translate3d(var(--menu-bg-x), var(--menu-bg-y), 0) scale(1.025);
  }

  to {
    opacity: 0.54;
    transform: translate3d(var(--menu-bg-x), calc(var(--menu-bg-y) + 8px), 0) scale(1.11);
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .main-menu-screen .main-menu-page:not([hidden]),
  .main-menu-screen .audio-settings,
  .multiplayer-room-shell.menu-motion-surface,
  .duel-config-shell.menu-motion-surface {
    transform: none;
  }

  .menu-motion-surface .is-parallax-button,
  .menu-motion-surface .is-parallax-button:hover {
    --menu-button-x: 0px;
    --menu-button-y: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .main-menu-screen .menu-logo-heading,
  .menu-motion-surface .mode-button.is-active,
  .menu-motion-surface.is-menu-transitioning,
  .menu-motion-surface.is-menu-arriving,
  .menu-motion-surface.is-menu-starting,
  .is-menu-transition-selected {
    animation: none !important;
  }

  .main-menu-screen .main-menu-page:not([hidden]),
  .main-menu-screen .audio-settings,
  .multiplayer-room-shell.menu-motion-surface,
  .duel-config-shell.menu-motion-surface {
    transform: none !important;
  }

  .is-menu-view-exiting > button:not(.is-menu-transition-selected) {
    filter: none;
    transform: none;
    transition: opacity 70ms linear;
  }

  .menu-motion-surface.is-menu-transitioning:not(.is-menu-starting)
    button:not(.is-menu-transition-selected) {
    filter: none;
    transform: none;
    transition: opacity 70ms linear;
  }

  .is-menu-view-entering {
    animation: menu-reduced-enter 90ms linear both !important;
  }

  .menu-motion-surface.is-menu-starting button:not(.is-menu-start-selected),
  .menu-motion-surface.is-menu-starting input,
  .menu-motion-surface.is-menu-starting select {
    filter: none;
    transform: none;
    transition: opacity 80ms linear;
  }
}

/* Multiplayer combat HUD v2: compact status strips and mirrored lower bars. */
.duel-status-panel {
  display: contents;
}

.app-shell.is-ai-duel .duel-arena {
  --duel-status-width: clamp(5.1rem, 5.8vw, 6.5rem);
  --duel-board-width: min(
    calc((100vh - 8.8rem) * 0.8),
    calc((100vw - var(--duel-status-width) * 2 - 5rem) / 2),
    46rem
  );
  --duel-gap: clamp(0.45rem, 0.9vw, 1rem);
  grid-template-columns:
    var(--duel-status-width)
    minmax(0, var(--duel-board-width))
    minmax(0, var(--duel-board-width))
    var(--duel-status-width);
  grid-template-rows: 1.7rem minmax(0, auto) clamp(5.4rem, 10vh, 6.4rem);
  grid-template-areas:
    "player-hud player-tempo ai-tempo ai-hud"
    "player-hud player-board ai-board ai-hud"
    ". player-lower ai-lower .";
  min-height: min(96vh, calc(100vh - 0.75rem));
  row-gap: clamp(0.25rem, 0.55vh, 0.45rem);
}

.app-shell.is-ai-duel .duel-combat-panel {
  display: contents;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.app-shell.is-ai-duel .player-duel-panel .duel-status-panel {
  grid-area: player-hud;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-panel {
  grid-area: ai-hud;
}

.app-shell.is-ai-duel .duel-status-panel {
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-self: start;
  width: 100%;
  min-width: 0;
  gap: 0.55rem;
  padding: 0.4rem 0.25rem;
  pointer-events: none;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-panel {
  align-items: end;
  text-align: right;
}

.app-shell.is-ai-duel .duel-status-panel .duel-b2b {
  width: 100%;
  max-width: 6.25rem;
  justify-self: stretch;
}

.app-shell.is-ai-duel .duel-status-panel .duel-b2b strong {
  font-size: clamp(1.38rem, 1.8vw, 1.92rem);
}

.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 5.5rem;
  gap: 0.35rem;
}

.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .combo-counter,
.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .chain-counter {
  width: 100%;
  min-height: 2.1rem;
  padding: 0.3rem 0.35rem;
}

.app-shell.is-ai-duel .player-duel-panel .duel-hud-row {
  grid-area: player-lower;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-hud-row {
  grid-area: ai-lower;
}

.app-shell.is-ai-duel .duel-hud-row,
.app-shell.is-ai-duel .ai-duel-panel .duel-hud-row {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(1.8rem, 2.35rem) minmax(0.82rem, 1.15rem) minmax(1.8rem, 2rem);
  grid-template-areas:
    "hp"
    "shield"
    "queue";
  gap: clamp(0.18rem, 0.4vh, 0.3rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: start;
  overflow: visible;
}

.app-shell.is-ai-duel .duel-queue {
  grid-area: queue;
  display: block;
  width: 100%;
  height: 2rem;
  min-height: 1.8rem;
  overflow: visible;
}

.app-shell.is-ai-duel .duel-queue .attack-queue-packet {
  width: clamp(3.2rem, 14%, 4.45rem);
  height: 1.94rem;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
}

.app-shell.is-ai-duel .is-horizontal-queue .attack-queue-packet,
.app-shell.is-ai-duel .ai-duel-panel .is-horizontal-queue .attack-queue-packet {
  right: auto;
  left: 0;
}

.app-shell.is-ai-duel .duel-hp {
  grid-area: hp;
  position: relative;
  display: block;
  width: 100%;
  height: clamp(1.8rem, 3.7vh, 2.35rem);
  min-height: 0;
}

.app-shell.is-ai-duel .duel-hp > span,
.app-shell.is-ai-duel .duel-shield-meter > span {
  position: absolute;
  top: 50%;
  z-index: 8;
  color: rgba(237, 248, 252, 0.72);
  font-size: 0.5rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.app-shell.is-ai-duel .player-duel-panel .duel-hp > span,
.app-shell.is-ai-duel .player-duel-panel .duel-shield-meter > span {
  left: 0.38rem;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-hp > span,
.app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter > span {
  right: 0.38rem;
}

.app-shell.is-ai-duel .duel-hp > div:not(.duel-bar-delta) {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(209, 238, 218, 0.36);
  border-radius: 3px;
  background: rgba(5, 12, 9, 0.94);
  box-shadow:
    0 0 10px rgba(89, 199, 94, 0.28),
    inset 0 0 0 1px rgba(225, 248, 232, 0.08);
}

.app-shell.is-ai-duel .duel-hp i {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--duel-hp, 1));
  transition: background-color 140ms linear, transform 140ms linear;
}

.app-shell.is-ai-duel .player-duel-panel .duel-hp i {
  transform-origin: left center;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-hp i {
  transform-origin: right center;
}

.app-shell.is-ai-duel .duel-hp strong {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  color: rgba(246, 255, 249, 0.78);
  font-size: clamp(1rem, 1.7vw, 1.38rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 4px rgba(0, 0, 0, 0.9),
    1px 0 1px rgba(0, 0, 0, 0.88),
    -1px 0 1px rgba(0, 0, 0, 0.88);
  pointer-events: none;
}

.app-shell.is-ai-duel .duel-shield-meter {
  grid-area: shield;
  position: relative;
  display: block;
  width: 100%;
  height: clamp(0.82rem, 1.8vh, 1.15rem);
  min-height: 0;
  padding: 0;
  color: #9eefff;
}

.app-shell.is-ai-duel .duel-shield-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
}

.app-shell.is-ai-duel .duel-shield-track::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(150, 231, 241, 0.88), rgba(29, 150, 184, 0.82));
  opacity: 0.72;
  transform: scaleX(var(--shield-fill, 0));
  transition: transform 100ms linear, opacity 120ms ease;
}

.app-shell.is-ai-duel .player-duel-panel .duel-shield-track::before {
  transform-origin: left center;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-shield-track::before {
  transform-origin: right center;
}

.app-shell.is-ai-duel .duel-shield-meter::before {
  content: attr(data-shield);
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  color: rgba(243, 254, 255, 0.88);
  font-size: clamp(0.68rem, 1.05vw, 0.84rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 4px rgba(0, 0, 0, 0.88);
  transform: none;
  pointer-events: none;
}

.app-shell.is-ai-duel .duel-shield-meter::after {
  content: attr(data-dr) " DR";
  position: absolute;
  top: 50%;
  bottom: auto;
  z-index: 10;
  color: rgba(174, 240, 250, 0.84);
  font-size: clamp(0.52rem, 0.75vw, 0.64rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.app-shell.is-ai-duel .player-duel-panel .duel-shield-meter::after {
  right: 0.38rem;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter::after {
  right: auto;
  left: 0.38rem;
}

.app-shell.is-ai-duel .duel-shield-marker {
  top: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: rgba(244, 253, 255, 0.5);
}

.app-shell.is-ai-duel .player-duel-panel .duel-shield-marker {
  right: auto;
  left: var(--marker-x);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-shield-marker {
  right: var(--marker-x);
  left: auto;
}

.app-shell.is-ai-duel .duel-shield-marker::after {
  content: none;
}

.app-shell.is-ai-duel .duel-shield-marker.is-current::after {
  content: none;
}

.app-shell.is-ai-duel .duel-shield-current-threshold {
  position: absolute;
  bottom: calc(100% + 0.08rem);
  z-index: 12;
  color: rgba(206, 248, 255, 0.82);
  font-size: clamp(0.48rem, 0.65vw, 0.58rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96);
  pointer-events: none;
}

.app-shell.is-ai-duel .player-duel-panel .duel-shield-current-threshold {
  left: var(--current-threshold-x, 0%);
  transform: translateX(-50%);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-shield-current-threshold {
  right: var(--current-threshold-x, 0%);
  transform: translateX(50%);
}

.app-shell.is-ai-duel .duel-damage-band,
.app-shell.is-ai-duel .duel-cancel-projection,
.app-shell.is-ai-duel .duel-damage-erase {
  top: 0;
  right: auto;
  bottom: 0;
  height: 100%;
  transform-origin: center;
}

.app-shell.is-ai-duel .duel-damage-band {
  transition:
    left 680ms cubic-bezier(0.16, 1, 0.3, 1),
    width 680ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 110ms linear,
    box-shadow 110ms linear,
    opacity 110ms linear;
  will-change: left, width, opacity, filter;
}

.app-shell.is-ai-duel .player-duel-panel .duel-damage-erase,
.app-shell.is-ai-duel .player-duel-panel .duel-cancel-projection {
  transform-origin: right center;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-damage-erase,
.app-shell.is-ai-duel .ai-duel-panel .duel-cancel-projection {
  transform-origin: left center;
}

@keyframes duel-horizontal-projection-out {
  0%, 18% { opacity: 1; filter: brightness(1.7); transform: scaleX(1); }
  100% { opacity: 0; filter: brightness(1.05); transform: scaleX(0); }
}

.app-shell.is-ai-duel .duel-cancel-projection,
.app-shell.is-ai-duel .duel-damage-erase {
  animation-name: duel-horizontal-projection-out;
}

.app-shell.is-ai-duel .duel-bar-delta {
  --delta-x: -108%;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 14;
  width: max-content;
  min-width: 3.2rem;
  min-height: 0;
  color: rgba(241, 250, 255, 0.96);
  font-size: clamp(0.86rem, 1.35vw, 1.08rem);
  font-weight: 950;
  text-align: center;
  opacity: 0;
  transform: translateX(var(--delta-x)) translateY(-50%);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-bar-delta {
  --delta-x: 108%;
  right: 0;
  left: auto;
}

@keyframes duel-bar-delta-horizontal {
  0% { opacity: 0; transform: translateX(var(--delta-x)) translateY(-50%) scale(0.82); }
  12% { opacity: 1; transform: translateX(var(--delta-x)) translateY(-50%) scale(1.14); }
  68% { opacity: 1; transform: translateX(var(--delta-x)) translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(var(--delta-x)) translateY(-72%) scale(0.96); }
}

.app-shell.is-ai-duel .duel-bar-delta.is-visible,
.app-shell.is-ai-duel .duel-shield-meter > .duel-bar-delta.is-visible {
  animation: duel-bar-delta-horizontal 1280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.app-shell.is-ai-duel .duel-hp.is-hit > div,
.app-shell.is-ai-duel .duel-shield-meter.is-hit .duel-shield-track {
  animation: hp-hit-rumble 420ms ease;
}

@media (max-width: 860px) {
  .app-shell.is-ai-duel {
    align-items: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell.is-ai-duel .play-panel,
  .app-shell.is-ai-duel .board-stage {
    align-self: start;
    min-height: 0;
    overflow: visible;
  }

  .app-shell.is-ai-duel .duel-arena {
    --duel-board-width: min(31rem, calc(100vw - 2rem));
    grid-template-columns: minmax(0, var(--duel-board-width));
    grid-template-rows:
      auto auto auto clamp(5.4rem, 10vh, 6.4rem)
      auto auto auto clamp(5.4rem, 10vh, 6.4rem);
    grid-template-areas:
      "player-tempo"
      "player-hud"
      "player-board"
      "player-lower"
      "ai-tempo"
      "ai-hud"
      "ai-board"
      "ai-lower";
    justify-content: center;
    justify-self: stretch;
    align-self: start;
    min-height: 0;
    margin: 0 auto;
    row-gap: 0.45rem;
  }

  .app-shell.is-ai-duel .duel-status-panel {
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: var(--duel-board-width);
    padding: 0.2rem 0;
  }

  .app-shell.is-ai-duel .ai-duel-panel .duel-status-panel {
    align-items: start;
  }

  .app-shell.is-ai-duel .duel-status-panel .duel-b2b {
    width: min(7rem, 42%);
  }

  .app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
    flex-direction: row;
    width: auto;
    max-width: 55%;
  }

  .app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .combo-counter,
  .app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .chain-counter {
    width: 4.4rem;
  }

  .app-shell.is-ai-duel .duel-tempo-ai-drain {
    grid-area: ai-tempo;
    margin: 0;
    justify-self: center;
  }

  .app-shell.is-ai-duel .duel-tempo-player-drain {
    margin-top: 1.3rem;
  }
}

/* Native Tutorial landing page follows the same spatial language as Battle and Training. */
#tutorial-menu-page {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  grid-template-areas:
    ". title ."
    "basics advanced live"
    "turn configs tests"
    ". . back";
  align-content: center;
  align-items: stretch;
  column-gap: clamp(18px, 2.6vw, 42px);
  row-gap: clamp(14px, 2vh, 22px);
}

#tutorial-menu-page .menu-page-title { grid-area: title; }
#tutorial-basics-button { grid-area: basics; }
#tutorial-advanced-button { grid-area: advanced; }
#tutorial-live-button { grid-area: live; }
#tutorial-turn-button { grid-area: turn; }
#tutorial-configs-button { grid-area: configs; }
#tutorial-tests-button { grid-area: tests; }

#tutorial-menu-page .mode-button {
  min-height: clamp(96px, 13vh, 132px);
}

#tutorial-menu-page .main-menu-back {
  grid-area: back;
  width: min(220px, 100%);
  justify-self: end;
}

/* Keep map position and ambient drift on separate compositor properties. */
body::before {
  translate: var(--menu-map-x) var(--menu-map-y);
  transform:
    translate3d(var(--menu-bg-x), var(--menu-bg-y), 0)
    scale(1.055)
    rotateX(4deg);
  transition: translate 460ms var(--menu-motion-ease);
}

.menu-depth-grid {
  translate: var(--menu-grid-map-x) var(--menu-grid-map-y);
  transform:
    perspective(1000px)
    translate3d(var(--menu-grid-far-x), calc(var(--menu-grid-far-y) + 5%), 0)
    rotateX(18deg)
    scale(1.16);
  transition: translate 460ms var(--menu-motion-ease);
}

@keyframes menu-grid-idle {
  from {
    transform:
      translate3d(calc(var(--menu-bg-x) - 4px), calc(var(--menu-bg-y) - 3px), 0)
      scale(1.055)
      rotateX(4deg);
  }
  to {
    transform:
      translate3d(calc(var(--menu-bg-x) + 4px), calc(var(--menu-bg-y) + 3px), 0)
      scale(1.055)
      rotateX(4deg);
  }
}

@keyframes menu-far-grid-idle {
  from {
    transform:
      perspective(1000px)
      translate3d(calc(var(--menu-grid-far-x) - 3px), calc(var(--menu-grid-far-y) + 5% - 2px), 0)
      rotateX(18deg)
      scale(1.16);
  }
  to {
    transform:
      perspective(1000px)
      translate3d(calc(var(--menu-grid-far-x) + 3px), calc(var(--menu-grid-far-y) + 5% + 2px), 0)
      rotateX(18deg)
      scale(1.16);
  }
}

body[data-menu-pan].is-menu-travel-forward::before,
body[data-menu-pan].is-menu-travel-back::before {
  animation: menu-grid-idle 24s linear infinite alternate !important;
  animation-play-state: running !important;
}

body[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
body[data-menu-pan].is-menu-travel-back .menu-depth-grid {
  animation: menu-far-grid-idle 34s linear infinite alternate !important;
  animation-play-state: running !important;
}

/* Zoom transitions avoid blur, which caused avoidable compositor stalls. */
.is-menu-window-leaving,
.is-menu-window-arriving {
  will-change: transform, opacity;
  filter: none !important;
}

@keyframes menu-window-enter-depth {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 40px) scale(1.09);
  }
}

@keyframes menu-window-arrive-depth {
  from {
    opacity: 0;
    transform: translate3d(0, 0, -44px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes menu-window-exit-depth {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, -44px) scale(0.92);
  }
}

@keyframes menu-window-return-depth {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 40px) scale(1.09);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 760px), (pointer: coarse) {
  #tutorial-menu-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "basics"
      "advanced"
      "live"
      "turn"
      "configs"
      "tests"
      "back";
    gap: 12px;
  }

  #tutorial-menu-page .main-menu-back {
    width: 100%;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .menu-depth-grid {
    transition: none !important;
  }

  body[data-menu-pan].is-menu-travel-forward::before,
  body[data-menu-pan].is-menu-travel-back::before,
  body[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
  body[data-menu-pan].is-menu-travel-back .menu-depth-grid {
    animation: none !important;
  }
}

@keyframes menu-reduced-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Spatial menu composition and layered match-board atmosphere. */
:root {
  --menu-motion-duration: 560ms;
  --menu-grid-far-x: 0px;
  --menu-grid-far-y: 0px;
  --menu-item-x: 0px;
  --menu-item-y: 0px;
  --menu-item-rx: 0deg;
  --menu-item-ry: 0deg;
}

body {
  background:
    radial-gradient(circle at 50% 35%, rgba(20, 70, 95, 0.18), transparent 45%),
    linear-gradient(180deg, #090d11 0%, #050709 100%);
}

body::before {
  inset: -72px;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(107, 184, 210, 0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 184, 210, 0.42) 1px, transparent 1px);
  background-position: center;
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0, 0, 0, 0.78) 62%, transparent 100%);
  transform: translate3d(var(--menu-bg-x), var(--menu-bg-y), 0) scale(1.055) rotateX(4deg);
}

.menu-depth-grid {
  position: fixed;
  inset: -20%;
  z-index: 0;
  overflow: hidden;
  opacity: 0.07;
  background-image:
    linear-gradient(rgba(90, 175, 205, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 175, 205, 0.5) 1px, transparent 1px);
  background-position: center;
  background-size: 192px 192px;
  pointer-events: none;
  transform:
    perspective(1000px)
    translate3d(var(--menu-grid-far-x), calc(var(--menu-grid-far-y) + 5%), 0)
    rotateX(18deg)
    scale(1.16);
  transform-origin: 50% 62%;
  will-change: transform, opacity;
}

.menu-depth-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 37%, rgba(58, 177, 212, 0.2), transparent 42%);
  animation: menu-radial-breathe 18s ease-in-out infinite alternate;
}

body.has-menu-motion::before {
  animation: menu-grid-idle 24s linear infinite alternate;
}

body.has-menu-motion .menu-depth-grid {
  animation: menu-far-grid-idle 34s linear infinite alternate;
}

.menu-motion-paused::before,
.menu-motion-paused .menu-depth-grid,
.menu-motion-paused .menu-depth-grid::after {
  animation-play-state: paused !important;
}

@keyframes menu-grid-idle {
  from {
    transform: translate3d(calc(var(--menu-bg-x) - 4px), calc(var(--menu-bg-y) - 3px), 0) scale(1.055) rotateX(4deg);
  }

  to {
    transform: translate3d(calc(var(--menu-bg-x) + 4px), calc(var(--menu-bg-y) + 3px), 0) scale(1.055) rotateX(4deg);
  }
}

@keyframes menu-far-grid-idle {
  from {
    transform:
      perspective(1000px)
      translate3d(calc(var(--menu-grid-far-x) - 3px), calc(var(--menu-grid-far-y) + 5% - 2px), 0)
      rotateX(18deg)
      scale(1.16);
  }

  to {
    transform:
      perspective(1000px)
      translate3d(calc(var(--menu-grid-far-x) + 3px), calc(var(--menu-grid-far-y) + 5% + 2px), 0)
      rotateX(18deg)
      scale(1.16);
  }
}

@keyframes menu-radial-breathe {
  from { opacity: 0.62; }
  to { opacity: 1; }
}

.main-menu-screen {
  overflow: hidden;
  padding: clamp(18px, 3vh, 32px);
}

.main-menu-screen .screen-panel.menu-home {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vh, 24px);
  width: min(1100px, 96vw);
  min-height: min(780px, calc(100vh - 40px));
  align-content: center;
  perspective: 1100px;
}

.screen-panel h1.menu-logo-heading {
  width: min(360px, 42vw);
  margin: 0 auto;
  transform: translate3d(var(--menu-logo-x), var(--menu-logo-y), 0);
}

.main-menu-screen .main-menu-page:not([hidden]) {
  width: 100%;
  transform: none;
}

.main-menu-screen .menu-home > .main-menu-page {
  grid-area: 2 / 1;
  align-self: center;
}

/* Persistent menu world: all primary menu scenes stay mounted while one camera moves between them. */
.main-menu-screen .menu-home > .persistent-menu-world {
  grid-area: 2 / 1;
  position: relative;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  transform: translate3d(var(--menu-world-camera-x, 0px), var(--menu-world-camera-y, 0px), 0);
  transition: transform var(--menu-motion-duration) var(--menu-motion-ease);
  will-change: transform;
  backface-visibility: hidden;
}

.main-menu-screen.is-menu-preparing {
  opacity: 0 !important;
  pointer-events: none !important;
}

.main-menu-screen .persistent-menu-world.is-world-instant {
  transition: none !important;
}

.main-menu-screen .persistent-menu-world > .persistent-menu-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  align-self: center;
  transform:
    translate3d(var(--menu-world-scene-x, 0px), var(--menu-world-scene-y, 0px), 0)
    perspective(1000px)
    translate3d(var(--menu-panel-x), var(--menu-panel-y), 0)
    rotateX(var(--menu-rotate-x))
    rotateY(var(--menu-rotate-y));
  transform-origin: center;
  pointer-events: none;
  visibility: hidden;
  content-visibility: hidden;
  backface-visibility: hidden;
  contain: layout paint style;
  overflow-clip-margin: var(--menu-parallax-clearance, 40px);
}

.main-menu-screen .persistent-menu-world > .persistent-menu-scene.is-world-rendered {
  visibility: visible;
  content-visibility: visible;
}

.main-menu-screen .persistent-menu-world > .persistent-menu-scene.is-world-active {
  pointer-events: auto;
}

.main-menu-screen .persistent-menu-world > .persistent-menu-scene.is-world-coincident-inactive {
  opacity: 0;
  visibility: hidden;
}

.main-menu-screen .persistent-menu-world.is-world-travelling > .persistent-menu-scene {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .main-menu-screen .menu-home > .persistent-menu-world {
    transition-duration: 110ms;
  }
}

.menu-online-status {
  grid-area: 3 / 1;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 8px;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid rgba(116, 161, 177, 0.22);
  border-radius: 999px;
  background: rgba(5, 14, 19, 0.68);
  color: rgba(208, 226, 232, 0.82);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  transform: translate3d(var(--menu-item-x), var(--menu-item-y), 0);
  transition: color 160ms linear, border-color 160ms linear, transform 220ms var(--menu-motion-ease);
}

.menu-online-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #71828a;
  box-shadow: 0 0 7px rgba(113, 130, 138, 0.42);
}

.menu-online-status.is-online {
  border-color: rgba(82, 208, 154, 0.3);
  color: #d8f5e8;
}

.menu-online-status.is-online .menu-online-dot {
  background: #52d09a;
  box-shadow: 0 0 9px rgba(82, 208, 154, 0.66);
}

.menu-online-status.is-empty .menu-online-dot {
  background: #e4bf65;
  box-shadow: 0 0 8px rgba(228, 191, 101, 0.5);
}

.menu-online-status.is-loading .menu-online-dot {
  animation: menu-online-pulse 1.1s ease-in-out infinite alternate;
}

.menu-online-status.is-unavailable {
  color: rgba(177, 191, 197, 0.72);
}

@keyframes menu-online-pulse {
  to { opacity: 0.35; }
}

.menu-page-title {
  margin: 0;
  color: #f4fbff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 14px rgba(69, 194, 229, 0.22);
}

.menu-title-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 80px;
  margin-inline: auto;
  object-fit: contain;
}

html[data-layout-family="mobile-portrait"] .menu-title-image { height: 56px; }
html[data-layout-family="mobile-landscape"] .menu-title-image { height: 40px; }

#main-menu-root,
#battle-menu-page,
#training-menu-page {
  grid-template-columns: minmax(210px, 1fr) minmax(290px, 390px) minmax(210px, 1fr);
  column-gap: clamp(18px, 4vw, 52px);
  row-gap: clamp(16px, 2.8vh, 28px);
  align-items: center;
}

#main-menu-root {
  grid-template-areas:
    ". battle ."
    "tutorial . training";
  align-content: center;
}

#battle-menu-button { grid-area: battle; }
#tutorial-menu-button { grid-area: tutorial; }
#training-menu-button { grid-area: training; }

#battle-menu-page,
#training-menu-page {
  grid-template-areas:
    ". title ."
    ". primary ."
    "left . right"
    ". back .";
  align-content: center;
}

#battle-menu-page .menu-page-title,
#training-menu-page .menu-page-title { grid-area: title; }
#battle-multiplayer-button,
#free-practice-button { grid-area: primary; }
#battle-ai-duel-button,
#training-tutorial-button { grid-area: left; }
#training-challenges-button { grid-area: right; }
#battle-menu-page .main-menu-back,
#training-menu-page .main-menu-back { grid-area: back; }

.main-menu-screen .mode-button {
  --menu-button-x: 0px;
  --menu-button-y: 0px;
  min-height: 112px;
  border: 1px solid rgba(113, 193, 220, 0.3);
  border-bottom-color: rgba(28, 71, 87, 0.7);
  border-left-width: 1px;
  border-radius: 6px;
  padding: 18px 20px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(29, 53, 68, 0.86), rgba(8, 19, 27, 0.92));
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(183, 236, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38);
  text-align: center;
  transform:
    perspective(1000px)
    translate3d(
      calc(var(--menu-item-x) + var(--menu-button-x)),
      calc(var(--menu-item-y) + var(--menu-button-y)),
      0
    )
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry))
    scale(1);
  transform-origin: center;
  transition:
    opacity 180ms linear,
    border-color 180ms linear,
    background 180ms linear,
    filter 180ms linear,
    box-shadow 180ms linear,
    transform 220ms var(--menu-motion-ease);
}

.main-menu-screen .mode-button span {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: 0;
}

.main-menu-screen .mode-button small {
  max-width: 32ch;
  color: rgba(197, 218, 228, 0.78);
  font-size: 0.78rem;
  line-height: 1.42;
  letter-spacing: 0;
}

.main-menu-screen .mode-button.menu-panel-primary {
  min-height: 132px;
  border-color: rgba(103, 213, 240, 0.42);
  background:
    linear-gradient(180deg, rgba(30, 65, 82, 0.92), rgba(8, 22, 31, 0.95));
}

.main-menu-screen .mode-button:hover,
.main-menu-screen .mode-button:focus-visible {
  z-index: 3;
  border-color: rgba(111, 231, 255, 0.78);
  filter: brightness(1.12);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 14px rgba(51, 194, 228, 0.14),
    inset 0 1px 0 rgba(205, 246, 255, 0.2);
  transform:
    perspective(1000px)
    translate3d(
      calc(var(--menu-item-x) + var(--menu-button-x)),
      calc(var(--menu-item-y) + var(--menu-button-y) - 2px),
      18px
    )
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry))
    scale(1.025);
}

.main-menu-screen .mode-button.menu-panel-primary:hover,
.main-menu-screen .mode-button.menu-panel-primary:focus-visible {
  transform:
    perspective(1000px)
    translate3d(
      calc(var(--menu-item-x) + var(--menu-button-x)),
      calc(var(--menu-item-y) + var(--menu-button-y) - 2px),
      24px
    )
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry))
    scale(1.03);
}

.main-menu-page:has(.mode-button:hover) .mode-button:not(:hover),
.main-menu-page:has(.mode-button:focus-visible) .mode-button:not(:focus-visible) {
  filter: brightness(0.78) saturate(0.82);
  opacity: 0.82;
}

.main-menu-screen .main-menu-back {
  min-height: 42px;
  width: min(220px, 100%);
  justify-self: center;
  border-color: rgba(102, 151, 169, 0.3);
  background: rgba(8, 18, 24, 0.82);
  color: rgba(219, 236, 243, 0.84);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(190, 234, 249, 0.08);
  transform: translate3d(var(--menu-item-x), var(--menu-item-y), 0);
}

.main-menu-screen .main-menu-back:hover,
.main-menu-screen .main-menu-back:focus-visible {
  border-color: rgba(100, 210, 237, 0.62);
  filter: brightness(1.1);
  transform: translate3d(var(--menu-item-x), calc(var(--menu-item-y) - 2px), 8px);
}

.main-menu-screen .menu-page-title {
  transform:
    perspective(1000px)
    translate3d(var(--menu-item-x), var(--menu-item-y), 0)
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry));
  transition: transform 220ms var(--menu-motion-ease);
}

.main-menu-screen .menu-options-panel {
  position: relative;
  width: min(370px, 92vw);
  margin: 0 auto;
  padding: 10px 12px 12px;
  border: 1px solid rgba(93, 151, 171, 0.24);
  border-radius: 5px;
  background: rgba(5, 13, 18, 0.76);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(179, 230, 247, 0.055);
  opacity: 0.84;
  transform: translate3d(var(--menu-item-x), var(--menu-item-y), 0);
  transition: opacity 180ms linear, border-color 180ms linear, transform 220ms var(--menu-motion-ease);
}

.main-menu-screen .menu-options-panel:focus-within,
.main-menu-screen .menu-options-panel:hover {
  border-color: rgba(96, 198, 226, 0.46);
  opacity: 1;
  transform: translate3d(var(--menu-item-x), calc(var(--menu-item-y) - 1px), 6px);
}

.menu-options-title {
  margin: 0 0 8px;
  color: rgba(207, 232, 241, 0.72);
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.menu-options-panel .audio-setting {
  grid-template-columns: 2rem minmax(3rem, auto) minmax(5rem, 1fr) 2.6rem;
}

.menu-home:has(> .main-menu-page:not(#main-menu-root):not([hidden])) > .menu-options-panel {
  display: none;
}

/* Selected-centre Training challenge layout. */
#training-challenge-menu-page {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: 22px;
  align-items: center;
}

.training-challenge-carousel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.training-challenge-track {
  position: relative;
  min-height: 220px;
  overflow: visible;
  perspective: 1000px;
}

.training-challenge-track .mode-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(350px, 42vw);
  min-height: 150px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, -80px) scale(0.72);
  transition:
    opacity 220ms linear,
    filter 220ms linear,
    border-color 220ms linear,
    transform 360ms var(--menu-motion-ease);
}

.training-challenge-track .mode-button.is-selected {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform:
    translate3d(
      calc(-50% + var(--menu-item-x) + var(--menu-button-x)),
      calc(-50% + var(--menu-item-y) + var(--menu-button-y)),
      22px
    )
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry))
    scale(1);
}

.training-challenge-track .mode-button.is-previous,
.training-challenge-track .mode-button.is-next {
  z-index: 1;
  opacity: 0.48;
  pointer-events: auto;
  filter: brightness(0.68) saturate(0.72);
}

.training-challenge-track .mode-button.is-previous {
  transform: translate3d(calc(-50% - 330px), -50%, -55px) rotateY(6deg) scale(0.78);
}

.training-challenge-track .mode-button.is-next {
  transform: translate3d(calc(-50% + 330px), -50%, -55px) rotateY(-6deg) scale(0.78);
}

.training-challenge-track .mode-button.is-selected:hover,
.training-challenge-track .mode-button.is-selected:focus-visible {
  transform:
    translate3d(
      calc(-50% + var(--menu-item-x) + var(--menu-button-x)),
      calc(-50% + var(--menu-item-y) + var(--menu-button-y) - 2px),
      34px
    )
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry))
    scale(1.025);
}

.training-challenge-track .mode-button.is-selected span {
  font-size: 1.24rem;
}

.training-challenge-track .mode-button.is-selected small {
  font-size: 0.8rem;
}

.challenge-carousel-nav {
  z-index: 4;
  width: 44px;
  height: 58px;
  border: 1px solid rgba(102, 189, 216, 0.3);
  border-radius: 4px;
  background: rgba(8, 20, 27, 0.84);
  color: #bdefff;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(190, 237, 252, 0.08);
  transition: border-color 160ms linear, filter 160ms linear, transform 160ms var(--menu-motion-ease);
}

.challenge-carousel-nav:hover,
.challenge-carousel-nav:focus-visible {
  border-color: rgba(107, 226, 255, 0.72);
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.training-challenge-menu > .main-menu-back {
  justify-self: center;
}

body:not([data-menu-pan]) .menu-motion-surface.is-menu-transitioning:not(.is-menu-starting) button:not(.is-menu-transition-selected) {
  opacity: 0.34;
  filter: brightness(0.68);
  transform: translate3d(0, 0, -24px) scale(0.97);
}

body:not([data-menu-pan]) .is-menu-view-exiting > button:not(.is-menu-transition-selected) {
  opacity: 0.2;
  filter: brightness(0.65);
}

.is-menu-transition-selected {
  animation: menu-selected-emphasis 220ms var(--menu-motion-ease) both;
}

@keyframes menu-view-enter-from-right {
  from { opacity: 0; transform: translate3d(38px, 0, -20px); }
  to { opacity: 1; transform: none; }
}

@keyframes menu-view-enter-from-left {
  from { opacity: 0; transform: translate3d(-38px, 0, -20px); }
  to { opacity: 1; transform: none; }
}

@keyframes menu-view-enter-from-bottom {
  from { opacity: 0; transform: translate3d(0, 30px, -20px); }
  to { opacity: 1; transform: none; }
}

@keyframes menu-view-enter-from-top {
  from { opacity: 0; transform: translate3d(0, -30px, -20px); }
  to { opacity: 1; transform: none; }
}

/* More forceful but still CSS-only transition into gameplay. */
.menu-motion-surface.is-menu-starting {
  animation: menu-start-surface 720ms var(--menu-motion-ease) both;
}

.menu-motion-surface.is-menu-starting .menu-logo-heading {
  animation: menu-logo-launch 300ms var(--menu-motion-ease) both;
}

.menu-motion-surface.is-menu-starting [data-menu-sweep="left"]:not(.is-menu-start-selected) {
  transform: translate3d(-34px, -4px, 0) scale(0.96);
}

.menu-motion-surface.is-menu-starting [data-menu-sweep="right"]:not(.is-menu-start-selected) {
  transform: translate3d(34px, -4px, 0) scale(0.96);
}

.menu-motion-surface.is-menu-starting [data-menu-sweep="center"]:not(.is-menu-start-selected) {
  transform: translate3d(0, 24px, 0) scale(0.96);
}

body.is-menu-start-travel::before {
  animation: menu-grid-start 720ms var(--menu-motion-ease) both;
}

body.is-menu-start-travel .menu-depth-grid {
  animation: menu-far-grid-start 720ms var(--menu-motion-ease) both;
}

body.is-menu-start-travel #game-screen:not([hidden]) .board-stage {
  animation: menu-game-board-arrive 470ms var(--menu-motion-ease) both;
}

body.is-menu-start-travel #game-screen:not([hidden]) .board-header,
body.is-menu-start-travel #game-screen:not([hidden]) .menu-panel {
  animation: menu-game-hud-arrive 360ms 100ms var(--menu-motion-ease) both;
}

@keyframes menu-logo-launch {
  to { opacity: 0; transform: translate3d(var(--menu-logo-x), calc(var(--menu-logo-y) - 22px), 20px); }
}

@keyframes menu-far-grid-start {
  from { opacity: 0.07; transform: perspective(1000px) translate3d(var(--menu-grid-far-x), var(--menu-grid-far-y), 0) rotateX(18deg) scale(1.16); }
  to { opacity: 0.11; transform: perspective(1000px) translate3d(var(--menu-grid-far-x), calc(var(--menu-grid-far-y) + 24px), 70px) rotateX(8deg) scale(1.38); }
}

@keyframes menu-game-board-arrive {
  from { opacity: 0; transform: translate3d(0, 0, -70px) scale(0.82); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes menu-game-hud-arrive {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Tutorial selection pages inherit the same restrained panel language. */
.tutorial-popup.is-tutorial-menu-popup {
  border-color: rgba(96, 188, 217, 0.34);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(18, 39, 52, 0.96), rgba(5, 14, 20, 0.98));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(179, 232, 249, 0.1);
}

.tutorial-popup.is-tutorial-menu-popup .tutorial-popup-actions button {
  --menu-item-x: 0px;
  --menu-item-y: 0px;
  --menu-item-rx: 0deg;
  --menu-item-ry: 0deg;
  --menu-button-x: 0px;
  --menu-button-y: 0px;
  border-color: rgba(96, 176, 202, 0.3);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(31, 57, 70, 0.94), rgba(9, 22, 29, 0.96));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(187, 233, 247, 0.08);
  transform:
    translate3d(
      calc(var(--menu-item-x) + var(--menu-button-x)),
      calc(var(--menu-item-y) + var(--menu-button-y)),
      0
    )
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry));
  transition:
    opacity 160ms linear,
    border-color 160ms linear,
    filter 160ms linear,
    transform 190ms var(--menu-motion-ease);
}

.tutorial-popup.is-tutorial-menu-popup .tutorial-popup-actions button:hover,
.tutorial-popup.is-tutorial-menu-popup .tutorial-popup-actions button:focus-visible {
  border-color: rgba(107, 226, 255, 0.68);
  filter: brightness(1.12);
  transform:
    translate3d(
      calc(var(--menu-item-x) + var(--menu-button-x)),
      calc(var(--menu-item-y) + var(--menu-button-y) - 1px),
      8px
    )
    rotateX(var(--menu-item-rx))
    rotateY(var(--menu-item-ry));
}

@media (max-height: 760px) and (min-width: 761px) {
  .main-menu-screen .screen-panel.menu-home {
    min-height: calc(100vh - 24px);
    gap: 10px;
  }

  .screen-panel h1.menu-logo-heading { width: min(280px, 34vw); }
  .main-menu-screen .mode-button { min-height: 92px; padding: 13px 16px; }
  .main-menu-screen .mode-button.menu-panel-primary { min-height: 104px; }
  #main-menu-root,
  #battle-menu-page,
  #training-menu-page { row-gap: 12px; }
  .main-menu-screen .menu-options-panel { padding-block: 7px; }
}

@media (max-width: 760px), (pointer: coarse) {
  .main-menu-screen {
    overflow-y: auto;
    place-items: start center;
  }

  .main-menu-screen .screen-panel.menu-home {
    width: min(440px, 100%);
    min-height: auto;
    padding-block: 12px 24px;
  }

  .screen-panel h1.menu-logo-heading { width: min(300px, 76vw); }

  #main-menu-root,
  #battle-menu-page,
  #training-menu-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 12px;
  }

  #main-menu-root > *,
  #battle-menu-page > *,
  #training-menu-page > * {
    grid-area: auto;
  }

  .main-menu-screen .mode-button,
  .main-menu-screen .mode-button.menu-panel-primary {
    min-height: 94px;
    transform: none;
  }

  .main-menu-screen .mode-button:hover,
  .main-menu-screen .mode-button:focus-visible,
  .main-menu-screen .mode-button.menu-panel-primary:hover,
  .main-menu-screen .mode-button.menu-panel-primary:focus-visible {
    transform: translateY(-1px) scale(1.008);
  }

  .main-menu-screen .main-menu-back,
  .main-menu-screen .menu-options-panel {
    transform: none;
  }

  #training-challenge-menu-page {
    grid-template-rows: auto auto auto;
  }

  .training-challenge-carousel {
    display: block;
  }

  .training-challenge-track {
    display: grid;
    min-height: 0;
    gap: 12px;
  }

  .training-challenge-track .mode-button,
  .training-challenge-track .mode-button.is-selected,
  .training-challenge-track .mode-button.is-previous,
  .training-challenge-track .mode-button.is-next {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 96px;
    opacity: 1;
    pointer-events: auto;
    filter: none;
    transform: none;
  }

  .challenge-carousel-nav { display: none; }
  .menu-depth-grid { transform: perspective(1000px) rotateX(12deg) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-online-status.is-loading .menu-online-dot {
    animation: none;
  }

  .menu-depth-grid,
  .menu-depth-grid::after,
  body.has-menu-motion::before,
  body.has-menu-motion .menu-depth-grid,
  body.is-menu-start-travel::before,
  body.is-menu-start-travel .menu-depth-grid,
  body.is-menu-start-travel #game-screen:not([hidden]) .board-stage,
  body.is-menu-start-travel #game-screen:not([hidden]) .board-header,
  body.is-menu-start-travel #game-screen:not([hidden]) .menu-panel {
    animation: none !important;
  }

  .main-menu-screen .mode-button,
  .main-menu-screen .main-menu-back,
  .main-menu-screen .menu-options-panel {
    --menu-item-x: 0px;
    --menu-item-y: 0px;
    --menu-item-rx: 0deg;
    --menu-item-ry: 0deg;
    --menu-button-x: 0px;
    --menu-button-y: 0px;
  }

  .main-menu-screen .mode-button:hover,
  .main-menu-screen .mode-button:focus-visible {
    transform: translateY(-1px) scale(1.008);
  }

  .is-menu-view-entering {
    animation: menu-reduced-enter 110ms linear both !important;
  }
}

/* Directional menu panning and dedicated Options scene. */
#main-menu-root {
  grid-template-areas:
    ". battle ."
    "tutorial . training"
    ". options ."
    ". fullscreen .";
}

.tutorial-menu-entry {
  position: relative;
  grid-area: tutorial;
  width: 100%;
}

.tutorial-menu-entry #tutorial-menu-button {
  width: 100%;
}

.tutorial-recommended {
  position: absolute;
  bottom: calc(100% + 0.38rem);
  left: 50%;
  z-index: 8;
  color: #fff0a8;
  font-size: clamp(0.68rem, 0.8vw, 0.82rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 202, 72, 0.4), 0 2px 3px rgba(0, 0, 0, 0.9);
  transform: translate(
    calc(-50% + var(--menu-item-x, 0px)),
    var(--menu-item-y, 0px)
  );
  animation: tutorial-recommended-breathe 1800ms ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes tutorial-recommended-breathe {
  from { opacity: 0.78; }
  to { opacity: 1; }
}

.tutorial-menu-entry:has(.tutorial-recommended:not([hidden])) #tutorial-menu-button {
  animation: tutorial-button-recommended-pulse 1500ms ease-in-out infinite alternate;
}

@keyframes tutorial-button-recommended-pulse {
  from {
    filter: brightness(1);
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.24),
      0 0 0 rgba(255, 211, 92, 0);
  }
  to {
    filter: brightness(1.075);
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.24),
      0 0 18px rgba(255, 211, 92, 0.22);
  }
}

.tutorial-menu-entry:has(.tutorial-recommended:not([hidden])) #tutorial-menu-button:hover,
.tutorial-menu-entry:has(.tutorial-recommended:not([hidden])) #tutorial-menu-button:focus-visible {
  animation-play-state: paused;
}

.fullscreen-menu-prompt {
  grid-area: fullscreen;
  justify-self: center;
  padding: 0.2rem 0.55rem;
  border: 0;
  background: transparent;
  color: rgba(211, 233, 241, 0.7);
  font: inherit;
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  font-weight: 750;
  letter-spacing: 0;
  cursor: pointer;
  transform: translate3d(
    var(--menu-item-x, 0px),
    var(--menu-item-y, 0px),
    0
  );
  transition: color 140ms linear, text-shadow 140ms linear;
}

.fullscreen-menu-prompt:hover,
.fullscreen-menu-prompt:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(101, 244, 224, 0.34);
  outline: none;
  transform: translate3d(
    var(--menu-item-x, 0px),
    calc(var(--menu-item-y, 0px) - 1px),
    0
  );
}

#options-menu-button {
  grid-area: options;
  width: min(220px, 100%);
  min-height: 42px;
  justify-self: center;
  border-color: rgba(102, 151, 169, 0.3);
  background: rgba(8, 18, 24, 0.82);
  color: rgba(219, 236, 243, 0.84);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(190, 234, 249, 0.08);
  transform: translate3d(var(--menu-item-x), var(--menu-item-y), 0);
}

#options-menu-button:hover,
#options-menu-button:focus-visible {
  border-color: rgba(100, 210, 237, 0.62);
  filter: brightness(1.1);
  transform: translate3d(var(--menu-item-x), calc(var(--menu-item-y) - 2px), 8px);
}

/* Keep major menu feedback composed with pointer parallax, regardless of tile tier. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .main-menu-screen .main-menu-page .mode-button:not(:disabled):is(:hover, :focus-visible),
  .main-menu-screen .main-menu-page .main-menu-back:not(:disabled):is(:hover, :focus-visible),
  #options-menu-button:not(:disabled):is(:hover, :focus-visible) {
    z-index: 3;
    border-color: rgba(111, 231, 255, 0.78);
    filter: brightness(1.12);
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.34),
      0 0 14px rgba(51, 194, 228, 0.14),
      inset 0 1px 0 rgba(205, 246, 255, 0.2);
    transform:
      perspective(1000px)
      translate3d(
        calc(var(--menu-item-x, 0px) + var(--menu-button-x, 0px)),
        calc(var(--menu-item-y, 0px) + var(--menu-button-y, 0px) - 2px),
        24px
      )
      rotateX(var(--menu-item-rx, 0deg))
      rotateY(var(--menu-item-ry, 0deg))
      scale(1.03);
  }

  .main-menu-screen .main-menu-back,
  #options-menu-button {
    transition: transform 220ms var(--menu-motion-ease), filter 180ms linear,
      border-color 180ms linear, box-shadow 180ms linear;
  }
}

#training-menu-page {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "title title"
    "practice challenges"
    "back .";
  column-gap: clamp(26px, 7vw, 100px);
}

#training-menu-page .menu-page-title { grid-area: title; }
#free-practice-button {
  grid-area: practice;
  width: 100%;
}
#training-challenges-button {
  grid-area: challenges;
  width: 100%;
}
#training-menu-page .main-menu-back { grid-area: back; }
#training-menu-page .main-menu-back,
#training-challenge-menu-page > .main-menu-back {
  justify-self: start;
}

.options-menu-page {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "back back"
    "title title"
    "settings profile";
  column-gap: clamp(20px, 3vw, 36px);
  row-gap: 22px;
  align-content: center;
  align-items: stretch;
  justify-items: center;
}

.options-menu-page > .main-menu-back {
  grid-area: back;
  justify-self: center;
}

.options-menu-page > .menu-page-title { grid-area: title; }
.options-menu-page > .menu-options-panel { grid-area: settings; }
.options-menu-page > .local-profile-panel { grid-area: profile; }

.options-menu-page .menu-options-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 18px;
  opacity: 1;
}

.options-menu-page .local-profile-panel {
  width: 100%;
  max-width: 560px;
  align-self: stretch;
  transform: translate3d(var(--menu-item-x), var(--menu-item-y), 0);
  transition:
    border-color 180ms linear,
    transform 220ms var(--menu-motion-ease);
}

.options-menu-page .local-profile-panel:hover,
.options-menu-page .local-profile-panel:focus-within {
  border-color: rgba(101, 244, 224, 0.5);
  transform: translate3d(var(--menu-item-x), calc(var(--menu-item-y) - 1px), 6px);
}

.options-menu-page .audio-setting {
  grid-template-columns: 2.25rem minmax(5.5rem, auto) minmax(10rem, 1fr) 3rem;
  min-height: 44px;
}

.parallax-setting-icon,
.skin-setting-icon,
.fullscreen-setting-icon,
.ui-layout-debug-icon,
.patch-notes-setting-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(108, 186, 211, 0.32);
  color: #9feaf7;
  font-size: 1.15rem;
}

.ui-layout-debug-setting {
  grid-template-columns: 2.25rem minmax(0, 1fr) auto !important;
}

.ui-layout-debug-setting input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  justify-self: end;
  accent-color: var(--teal);
  cursor: pointer;
}

.layout-debug-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.layout-debug-overlay[hidden] {
  display: none !important;
}

.layout-debug-box {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 1px solid var(--layout-debug-color);
  outline: 1px solid rgba(0, 0, 0, 0.72);
  background: rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--layout-debug-color) 16%, transparent);
  will-change: transform, width, height;
}

.layout-debug-box > span {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  padding: 1px 3px;
  overflow: hidden;
  color: #071016;
  background: var(--layout-debug-color);
  font: 800 9px/1.2 system-ui, sans-serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 80ms linear;
}

.layout-debug-box.is-hovered > span {
  opacity: 1;
}

.fullscreen-setting .primary-action,
.patch-notes-setting .primary-action {
  grid-column: 3 / 5;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.38rem 0.75rem;
  border-radius: var(--radius-button);
}

.skin-setting select,
.gameplay-effect-choice select {
  grid-column: 3 / 5;
  width: 100%;
  min-height: 2.25rem;
  padding: 0 2.2rem 0 0.75rem;
  border: 1px solid rgba(108, 186, 211, 0.36);
  border-radius: var(--radius-button);
  color: rgba(244, 253, 255, 0.94);
  background: #111a24;
  font: inherit;
  text-transform: none;
  cursor: pointer;
}

.skin-setting select:hover,
.skin-setting select:focus-visible {
  border-color: rgba(101, 244, 224, 0.68);
  outline: none;
  filter: brightness(1.12);
}

@media (max-width: 760px), (pointer: coarse) {
  .options-menu-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "back"
      "title"
      "settings"
      "profile";
  }

  .options-menu-page .local-profile-panel {
    transform: none;
  }
}

.training-challenge-menu {
  grid-template-rows: auto auto auto;
}

.training-challenge-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  width: 100%;
  align-items: stretch;
}

.training-challenge-list .mode-button {
  width: 100%;
  min-height: 168px;
}

.menu-motion-surface.is-menu-transitioning:not(.is-menu-starting) {
  animation: none;
}

body[data-menu-pan="left"] {
  --menu-pan-exit-x: 105vw;
  --menu-pan-exit-y: 0px;
  --menu-pan-enter-x: -105vw;
  --menu-pan-enter-y: 0px;
}

body[data-menu-pan="right"] {
  --menu-pan-exit-x: -105vw;
  --menu-pan-exit-y: 0px;
  --menu-pan-enter-x: 105vw;
  --menu-pan-enter-y: 0px;
}

body[data-menu-pan="up"] {
  --menu-pan-exit-x: 0px;
  --menu-pan-exit-y: 105vh;
  --menu-pan-enter-x: 0px;
  --menu-pan-enter-y: -105vh;
}

body[data-menu-pan="down"] {
  --menu-pan-exit-x: 0px;
  --menu-pan-exit-y: -105vh;
  --menu-pan-enter-x: 0px;
  --menu-pan-enter-y: 105vh;
}

body[data-menu-pan] .main-menu-screen .menu-home.is-menu-transitioning > .main-menu-page {
  width: 100%;
}

body[data-menu-pan] .is-menu-view-exiting {
  animation: menu-view-pan-exit 460ms var(--menu-motion-ease) both !important;
  animation-play-state: paused !important;
}

body[data-menu-pan] .is-menu-view-entering {
  animation: menu-view-pan-enter 460ms var(--menu-motion-ease) both !important;
  animation-play-state: paused !important;
}

body[data-menu-pan].is-menu-travel-forward::before,
body[data-menu-pan].is-menu-travel-back::before {
  animation: menu-grid-directional-pan 460ms var(--menu-motion-ease) both;
  animation-play-state: paused;
}

body[data-menu-pan].is-menu-pan-running .is-menu-view-exiting,
body[data-menu-pan].is-menu-pan-running .is-menu-view-entering,
body[data-menu-pan].is-menu-pan-running::before {
  animation-play-state: running !important;
}

@keyframes menu-view-pan-exit {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--menu-pan-exit-x), var(--menu-pan-exit-y), 0);
  }
}

@keyframes menu-view-pan-enter {
  from {
    transform: translate3d(var(--menu-pan-enter-x), var(--menu-pan-enter-y), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menu-grid-directional-pan {
  from {
    transform:
      translate3d(
        calc(var(--menu-bg-x) + var(--menu-map-from-x)),
        calc(var(--menu-bg-y) + var(--menu-map-from-y)),
        0
      )
      scale(1.025);
  }
  to {
    transform:
      translate3d(
        calc(var(--menu-bg-x) + var(--menu-map-to-x)),
        calc(var(--menu-bg-y) + var(--menu-map-to-y)),
        0
      )
      scale(1.025);
  }
}

@keyframes menu-reduced-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

.is-menu-window-leaving,
.is-menu-window-arriving {
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.is-menu-window-leaving-forward {
  animation: menu-window-enter-depth 210ms var(--menu-motion-ease) both;
}

.is-menu-window-arriving-forward {
  animation: menu-window-arrive-depth 290ms var(--menu-motion-ease) both;
}

.is-menu-window-leaving-back {
  animation: menu-window-exit-depth 180ms var(--menu-motion-ease) both;
}

.is-menu-window-arriving-back {
  animation: menu-window-return-depth 240ms var(--menu-motion-ease) both;
}

@keyframes menu-window-enter-depth {
  from {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  to {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.16);
  }
}

@keyframes menu-window-arrive-depth {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes menu-window-exit-depth {
  from {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  to {
    opacity: 0;
    filter: blur(5px);
    transform: scale(0.82);
  }
}

@keyframes menu-window-return-depth {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.16);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (max-width: 760px), (pointer: coarse) {
  #main-menu-root,
  #training-menu-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  #main-menu-root > *,
  #training-menu-page > * {
    grid-area: auto;
  }

  .tutorial-menu-entry {
    width: 100%;
  }

  .training-challenge-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .training-challenge-list .mode-button {
    min-height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-recommended,
  .tutorial-menu-entry:has(.tutorial-recommended:not([hidden])) #tutorial-menu-button {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-menu-pan] .is-menu-view-exiting {
    animation: menu-reduced-exit 70ms linear both !important;
  }

  body[data-menu-pan] .is-menu-view-entering {
    animation: menu-reduced-enter 110ms linear both !important;
  }

  body[data-menu-pan].is-menu-travel-forward::before,
  body[data-menu-pan].is-menu-travel-back::before {
    animation: none !important;
  }

  .is-menu-window-leaving,
  .is-menu-window-arriving {
    animation-duration: 110ms !important;
    animation-name: menu-reduced-enter !important;
  }
}

/* Responsive scene density pass: menus and tutorial selection. */
.main-menu-screen .screen-panel.menu-home {
  width: min(1240px, calc(100vw - 36px));
  min-height: min(820px, calc(100vh - 36px));
  gap: 22px;
}

.screen-panel h1.menu-logo-heading {
  width: min(420px, 46vw);
}

.menu-page-title {
  font-size: 34px;
}

#main-menu-root,
#battle-menu-page,
#training-menu-page {
  grid-template-columns: minmax(240px, 1fr) minmax(340px, 430px) minmax(240px, 1fr);
  column-gap: 54px;
  row-gap: 24px;
}

.main-menu-screen .mode-button {
  min-height: 124px;
  padding: 20px 24px;
  gap: 10px;
}

.main-menu-screen .mode-button.menu-panel-primary {
  min-height: 146px;
}

.main-menu-screen .mode-button span {
  font-size: 22px;
  line-height: 1.05;
}

.main-menu-screen .mode-button small {
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.42;
}

.main-menu-screen .main-menu-back,
#options-menu-button {
  min-height: 48px;
  font-size: 15px;
}


.training-challenge-menu {
  gap: 26px;
}

.training-challenge-list {
  gap: 24px;
}

.training-challenge-list .mode-button {
  min-height: 190px;
}

.tutorial-popup.is-tutorial-menu-popup {
  width: min(52rem, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 28px;
}

.tutorial-popup.is-challenge-menu-popup,
.tutorial-popup.is-tutorial-menu-popup:has(.challenge-menu-grid) {
  width: min(82rem, calc(100vw - 48px));
  max-width: none;
  padding: 28px;
}

.tutorial-popup.is-tutorial-menu-popup h2 {
  font-size: 28px;
}

.tutorial-popup.is-tutorial-menu-popup p {
  font-size: 16px;
  line-height: 1.5;
}

.tutorial-popup.is-tutorial-menu-popup .tutorial-popup-actions {
  gap: 12px;
  margin-top: 22px;
}

.tutorial-popup.is-tutorial-menu-popup .tutorial-popup-actions button {
  min-height: 52px;
  padding: 12px 16px;
  font-size: 15px;
}

.tutorial-popup-actions.is-challenge-menu {
  padding-right: 8px;
}

.challenge-menu-grid {
  gap: 22px;
}

.challenge-category-panel {
  gap: 12px;
}

.challenge-category-heading h3 {
  font-size: 18px;
}

/* Pausing conceals the complete playfield. Results use more of the viewport. */
.pause-overlay {
  background: #03070b;
}

.pause-popup {
  width: min(44rem, calc(100vw - 40px));
  padding: 30px;
}

.pause-popup h2,
.duel-end-popup h2 {
  font-size: 34px;
}

.pause-popup .audio-settings {
  margin-bottom: 22px;
}

.pause-actions {
  gap: 11px;
}

.pause-actions button {
  min-height: 48px;
  padding: 10px 14px;
  font-size: 14px;
}

.duel-end-popup {
  width: min(60rem, calc(100vw - 40px));
  padding: 30px;
}

.duel-results-stats,
.practice-challenge-results {
  max-height: min(58vh, 38rem);
}

.duel-results-stats span,
.duel-results-stats strong,
.practice-challenge-results span,
.practice-challenge-results strong {
  padding: 9px 11px;
  font-size: 14px;
}

.practice-challenge-overlay .pause-popup {
  width: min(48rem, calc(100vw - 40px));
}

/* Configuration is a full scene. Categories remain the only framed settings groups. */
.app-shell.is-duel-config {
  padding: 0;
  place-items: stretch center;
}

.app-shell.is-duel-config .duel-config-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.duel-config-shell,
.duel-config-shell.menu-motion-surface {
  width: min(1440px, 100%);
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.duel-config-header {
  padding: 22px 34px 16px;
  border-bottom: 1px solid rgba(141, 204, 224, 0.22);
  background: rgba(5, 12, 17, 0.9);
  box-shadow: none;
}

.duel-config-header h1 {
  font-size: 38px;
}

.duel-config-hint {
  font-size: 14px;
}

.duel-config-content {
  padding-bottom: 22px;
}

.duel-config-ai-top {
  margin: 22px 28px 0;
}

.duel-preset-panel {
  padding: 22px 28px;
}

.duel-preset-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.duel-preset-option {
  min-height: 82px;
  padding: 12px 14px;
}

.duel-preset-option strong {
  font-size: 16px;
}

.duel-preset-option span {
  font-size: 12px;
}

.duel-config-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 28px 22px;
}

.duel-config-category {
  align-content: start;
  gap: 12px;
  padding: 18px;
}

.duel-config-category h2 {
  font-size: 15px;
}

.duel-config-category label {
  grid-template-columns: minmax(12rem, 0.8fr) minmax(17rem, 1.35fr);
  gap: 16px;
}

.duel-config-category label > span {
  font-size: 14px;
}

.duel-config-category input,
.duel-config-category select {
  min-height: 40px;
  font-size: 14px;
}

.duel-level-buttons {
  grid-template-columns: repeat(11, minmax(44px, 1fr));
  gap: 8px;
  isolation: isolate;
}

.duel-level-button {
  position: relative;
  z-index: 0;
  min-width: 44px;
  min-height: 48px;
  padding: 0 4px;
  cursor: pointer;
  touch-action: manipulation;
  font-size: 15px;
}

.duel-level-button:hover,
.duel-level-button:focus-visible,
.duel-level-button[aria-pressed=true] {
  z-index: 2;
}

.duel-config-inline-help,
.duel-config-note,
.duel-config-warning {
  font-size: 12px;
}

.duel-config-start {
  grid-template-columns: minmax(11rem, 0.8fr) minmax(9rem, 0.7fr) minmax(18rem, 1.5fr);
  gap: 12px;
  padding: 14px 28px 18px;
}

.duel-config-start .primary-action {
  min-height: 48px;
}

@media (min-width: 1600px) and (min-height: 860px) {
  .main-menu-screen .screen-panel.menu-home {
    width: min(1340px, calc(100vw - 56px));
    min-height: min(900px, calc(100vh - 56px));
  }

  .menu-page-title { font-size: 38px; }
  .main-menu-screen .mode-button span { font-size: 24px; }
  .main-menu-screen .mode-button small { font-size: 16px; }
  .training-challenge-list .mode-button { min-height: 210px; }
}

@media (max-width: 1100px) {
  .main-menu-screen .screen-panel.menu-home {
    width: min(940px, calc(100vw - 28px));
  }

  #main-menu-root,
  #battle-menu-page {
    grid-template-columns: minmax(190px, 1fr) minmax(280px, 350px) minmax(190px, 1fr);
    column-gap: 28px;
  }

  .main-menu-screen .mode-button span { font-size: 20px; }
  .main-menu-screen .mode-button small { font-size: 14px; }

  .duel-preset-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .duel-config-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .duel-config-category label {
    grid-template-columns: minmax(11rem, 0.75fr) minmax(16rem, 1.25fr);
  }

  .duel-level-buttons {
    grid-template-columns: repeat(6, minmax(48px, 1fr));
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  .main-menu-screen .screen-panel.menu-home {
    min-height: calc(100vh - 24px);
    gap: 10px;
  }

  .menu-page-title { font-size: 28px; }
  .main-menu-screen .mode-button { min-height: 92px; padding: 13px 16px; }
  .main-menu-screen .mode-button.menu-panel-primary { min-height: 104px; }
  .main-menu-screen .mode-button span { font-size: 18px; }
  .main-menu-screen .mode-button small { font-size: 13px; }
  .training-challenge-list .mode-button { min-height: 116px; }

  .duel-config-header { padding-block: 14px 10px; }
  .duel-config-header h1 { font-size: 30px; }
  .duel-config-ai-top { margin-top: 14px; }
  .duel-preset-panel { padding-block: 14px; }
  .duel-preset-option { min-height: 66px; }
  .duel-level-button { min-height: 42px; }
}

@media (max-width: 760px), (pointer: coarse) {
  .main-menu-screen .screen-panel.menu-home {
    width: min(500px, 100%);
  }

  .menu-page-title { font-size: 28px; }
  .main-menu-screen .mode-button span { font-size: 20px; }
  .main-menu-screen .mode-button small { font-size: 14px; }

  .training-challenge-list {
    gap: 12px;
  }

  .training-challenge-list .mode-button {
    min-height: 112px;
  }

  .tutorial-popup.is-tutorial-menu-popup,
  .tutorial-popup.is-challenge-menu-popup,
  .tutorial-popup.is-tutorial-menu-popup:has(.challenge-menu-grid) {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 18px;
  }

  .tutorial-popup.is-tutorial-menu-popup h2 { font-size: 24px; }
  .tutorial-popup.is-tutorial-menu-popup p { font-size: 14px; }
  .challenge-menu-grid { grid-template-columns: minmax(0, 1fr); }

  .pause-popup,
  .duel-end-popup,
  .practice-challenge-overlay .pause-popup {
    width: calc(100vw - 20px);
    padding: 20px;
  }

  .pause-popup h2,
  .duel-end-popup h2 { font-size: 28px; }

  .duel-config-header { padding: 16px 18px 12px; }
  .duel-config-header h1 { font-size: 28px; }
  .duel-config-ai-top { margin: 14px 12px 0; }
  .duel-preset-panel { padding: 14px 12px; }
  .duel-preset-options { grid-template-columns: minmax(0, 1fr); }
  .duel-config-body { padding: 0 12px 14px; }

  .duel-config-category label {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .duel-level-buttons {
    grid-template-columns: repeat(4, minmax(52px, 1fr));
    gap: 8px;
  }

  .duel-level-button {
    min-width: 52px;
    min-height: 46px;
  }

  .duel-config-range-input {
    grid-template-columns: minmax(0, 1fr) minmax(4.8rem, 5.8rem);
  }

  .duel-config-start {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
}

/* Tutorial reference pages: unframed copy, native board demo, bottom navigation. */
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "dialogue"
    "board"
    "right";
  gap: 14px;
  padding: 4px 4px calc(82px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .play-panel {
  padding-inline: clamp(4px, 1vw, 10px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue,
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-panel {
  width: min(100%, 82rem);
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  align-self: start;
  text-align: center;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue .eyebrow {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue h2 {
  margin: 0;
  font-size: 32px;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  width: 100%;
  max-width: 76rem;
  margin: 10px auto 0;
  color: rgba(238, 246, 250, 0.84);
  font-size: 16px;
  line-height: 1.55;
  white-space: pre-line;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-config-reference-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  width: min(100%, 76rem);
  min-height: 0;
  max-height: min(72dvh, 52rem);
  align-self: center;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-config-reference-page:not(.is-tutorial-menu-scene) .tutorial-dialogue h2 {
  flex: 0 0 auto;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-config-reference-page:not(.is-tutorial-menu-scene) #tutorial-body {
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: min(62dvh, 44rem);
  margin: 0.75rem 0 0;
  padding: 0 1rem 1rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  text-align: left;
  white-space: normal;
}

.tutorial-config-introduction,
.tutorial-config-section,
.tutorial-config-heading,
.tutorial-config-copy {
  display: block;
}

.tutorial-config-introduction {
  padding-bottom: 1rem;
  color: rgba(238, 246, 250, 0.88);
  font-size: 1.05em;
}

.tutorial-config-section {
  padding: 1rem 0 1.1rem;
  border-top: 1px solid rgba(112, 210, 224, 0.24);
}

.tutorial-config-heading {
  margin-bottom: 0.45rem;
  color: #f5fbff;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.25;
}

.tutorial-config-copy {
  color: rgba(238, 246, 250, 0.78);
  line-height: 1.55;
  white-space: pre-line;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-demo-page .player-board-container {
  display: grid;
  grid-area: board;
  width: min(100%, 26rem);
  min-height: min(30vh, 16rem);
  height: auto;
  align-self: center;
  justify-self: center;
  place-items: center;
  padding: 12px;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-demo-page .player-board-label {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-demo-page #game-board {
  width: min(var(--demo-width-cap, 14.4rem), 100%);
  max-height: min(30vh, 12rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-preview-page .player-board-container,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-grey-page .player-board-container {
  min-height: 0;
  height: auto;
  max-height: min(42vh, 19rem);
  padding: 8px;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-preview-page #game-board {
  width: min(10.5rem, 100%);
  height: auto;
  max-height: min(38vh, 14rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-grey-page #game-board {
  width: min(9.75rem, 100%);
  height: auto;
  max-width: 100%;
  max-height: min(40vh, 16.25rem);
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-demo-page) .player-board-container {
  display: none;
}

.tutorial-hp-phases {
  display: none;
}

.tutorial-clock-demo {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-clock-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: minmax(22rem, 1fr) minmax(20rem, 30rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "dialogue board"
    "right right";
  align-items: center;
  column-gap: clamp(2rem, 6vw, 6rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-clock-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  max-width: 46rem;
  margin: 0;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-clock-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 46rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-clock-page:not(.is-tutorial-menu-scene) .tutorial-clock-demo {
  grid-area: board;
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.6rem);
  width: min(100%, 29rem);
  justify-self: center;
  align-self: center;
  color: #f4fbff;
}

.tutorial-clock-demo-status {
  display: grid;
  justify-items: center;
  min-height: 4.8rem;
  text-align: center;
}

.tutorial-clock-demo-status strong {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  letter-spacing: 0;
}

.tutorial-clock-demo-status span {
  margin-top: 0.3rem;
  color: rgba(226, 239, 246, 0.72);
  font-size: clamp(0.78rem, 1.2vw, 0.92rem);
}

.tutorial-clock-demo-status b {
  margin-top: 0.55rem;
  color: #69e8e0;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.tutorial-clock-demo.is-fast-forward .tutorial-clock-demo-status b {
  animation: tutorial-clock-fast-forward 520ms ease-in-out infinite alternate;
}

.tutorial-clock-demo-readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 2vw, 1.1rem);
}

.tutorial-clock-demo-side {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 1px solid rgba(115, 173, 199, 0.26);
  background: rgba(4, 13, 18, 0.58);
  text-align: center;
}

.tutorial-clock-demo-side > span {
  color: rgba(220, 235, 242, 0.62);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tutorial-clock-demo-side > strong {
  box-sizing: border-box;
  min-width: 0;
  padding: 0.48rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 3px;
  color: rgba(241, 249, 252, 0.78);
  font-size: clamp(1.55rem, 3.8vw, 2.35rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}

.tutorial-clock-demo-side.is-active > strong {
  border-color: rgba(255, 255, 255, 0.78);
  background: #f5f8fa;
  color: #071014;
  text-shadow: none;
}

.tutorial-clock-demo-side.is-active.is-paused > strong {
  border-color: rgba(105, 232, 224, 0.8);
  background: rgba(219, 248, 248, 0.92);
}

.tutorial-clock-demo-side.is-low > strong {
  color: #ffabae;
}

.tutorial-clock-demo-side.is-active.is-low > strong {
  border-color: #ff8f94;
  background: #f3a0a4;
  color: #240608;
  box-shadow: 0 0 18px rgba(255, 80, 90, 0.34);
  animation: tutorial-clock-low 600ms ease-in-out infinite alternate;
}

.tutorial-clock-demo-side.is-overtime > strong {
  color: #ff515d;
}

.tutorial-clock-demo-side.is-active.is-overtime > strong {
  border-color: #ff515d;
  background: #a80f20;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 38, 58, 0.48);
  text-shadow: 0 2px 3px rgba(36, 0, 4, 0.85);
  animation: tutorial-clock-overtime 520ms ease-in-out infinite alternate;
}

.tutorial-overtime-hp {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: minmax(22rem, 1fr) minmax(22rem, 32rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "dialogue board"
    "right right";
  align-items: center;
  column-gap: clamp(2rem, 6vw, 6rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  max-width: 46rem;
  margin: 0;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 46rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .tutorial-clock-demo {
  grid-area: board;
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.6rem);
  width: min(100%, 31rem);
  justify-self: center;
  align-self: center;
  color: #f4fbff;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .tutorial-overtime-hp {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.25rem;
  margin-top: 0.35rem;
}

.tutorial-overtime-hp > span {
  color: rgba(235, 247, 240, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
}

.tutorial-overtime-hp > div {
  height: 0.62rem;
  overflow: hidden;
  border: 1px solid rgba(188, 235, 194, 0.42);
  background: rgba(4, 13, 10, 0.78);
  box-shadow: 0 0 8px rgba(89, 199, 94, 0.12);
}

.tutorial-overtime-hp > div > i {
  display: block;
  width: 100%;
  height: 100%;
  background: #59c75e;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 80ms linear;
}

.tutorial-clock-demo-side[data-tutorial-clock-side="opponent"] .tutorial-overtime-hp > div > i {
  transform-origin: right center;
}

.tutorial-overtime-hp > strong {
  min-width: 2.7rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.88);
}

.tutorial-overtime-hp > em {
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 0;
  min-height: 0.8rem;
  color: #ff686f;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  opacity: 0;
  transform: translateY(3px);
}

.tutorial-overtime-hp > em.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 120ms ease, transform 180ms ease;
}

.tutorial-clock-demo-rule {
  min-height: 1.3rem;
  margin: 0;
  color: rgba(218, 235, 242, 0.78);
  font-size: clamp(0.78rem, 1.3vw, 0.92rem);
  font-weight: 800;
  text-align: center;
}

@keyframes tutorial-clock-fast-forward {
  from { opacity: 0.55; transform: translateX(-2px); }
  to { opacity: 1; transform: translateX(2px); }
}

@keyframes tutorial-clock-low {
  from { filter: brightness(0.94); }
  to { filter: brightness(1.12); }
}

@keyframes tutorial-clock-overtime {
  from { filter: brightness(0.9); }
  to { filter: brightness(1.18); }
}

@media (max-width: 760px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-clock-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue"
      "board"
      "right";
    row-gap: 0.75rem;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-clock-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-clock-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    margin-inline: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue"
      "board"
      "right";
    row-gap: 0.75rem;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-overtime-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-clock-demo.is-fast-forward .tutorial-clock-demo-status b,
  .tutorial-clock-demo-side.is-active.is-low > strong,
  .tutorial-clock-demo-side.is-active.is-overtime > strong {
    animation: none;
  }
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: minmax(23rem, 1fr) minmax(16rem, 22rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "dialogue board"
    "right right";
  align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  max-width: 42rem;
  margin: 0;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 42rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .tutorial-hp-phases {
  display: grid;
  grid-area: board;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  width: min(100%, 20rem);
  height: min(60vh, 31rem);
  justify-self: center;
}

/* Full-board duel attack demonstration using native combat value popups. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-attack-tile: min(3.6rem, 7.2vh, 4.2vw);
  grid-template-columns:
    calc(var(--tutorial-attack-tile) * 8 + 20px)
    minmax(20rem, 38rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "board dialogue"
    "right right";
  justify-content: center;
  align-items: center;
  column-gap: clamp(18px, 3vw, 48px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  width: 100%;
  max-width: 38rem;
  justify-self: start;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 38rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .player-board-container {
  width: auto;
  min-height: 0;
  height: 100%;
  padding: 8px;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) #game-board {
  width: calc(var(--tutorial-attack-tile) * 8);
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/* Rising Attack reuses the classic MULT and AI Duel Base Attack HUD. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns:
    minmax(12rem, 13.5rem)
    calc(var(--tutorial-attack-tile) * 8 + 20px)
    minmax(20rem, 38rem);
  grid-template-areas:
    "left board dialogue"
    "right right right";
  column-gap: clamp(0.85rem, 1.35vw, 1.65rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) #b2b-board-meter {
  display: grid;
  grid-area: left;
  align-self: start;
  justify-self: end;
  width: min(100%, 6.2rem);
}

.duel-tempo-panel.is-tutorial-rising-attack-demo {
  display: flex;
  grid-area: left;
  align-self: end;
  justify-self: stretch;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.duel-tempo-panel.is-tutorial-rising-attack-demo .duel-tempo-player-drain,
.duel-tempo-panel.is-tutorial-rising-attack-demo .duel-tempo-ai-drain {
  display: none;
}

.duel-tempo-panel.is-tutorial-rising-attack-demo .duel-tempo-base {
  grid-area: auto;
  align-self: auto;
  justify-self: auto;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  margin: 0;
}

.duel-tempo-panel.is-tutorial-rising-attack-demo .duel-tempo-central-drain {
  display: none;
}

.duel-tempo-panel.is-tutorial-rising-attack-demo .tutorial-rising-attack-stat {
  --duel-stat-slot-height: clamp(2.65rem, 4.8vh, 3.15rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: var(--duel-stat-slot-height);
  color: #f4f8fb;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.duel-tempo-panel.is-tutorial-rising-attack-demo .tutorial-rising-attack-stat > span {
  display: block;
  margin-bottom: 0.08rem;
  color: rgba(218, 231, 239, 0.68);
  font-size: clamp(0.48rem, 0.52vw, 0.58rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.duel-tempo-panel.is-tutorial-rising-attack-demo .tutorial-rising-attack-stat > div {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.duel-tempo-panel.is-tutorial-rising-attack-demo .tutorial-rising-attack-stat strong {
  color: #ffffff;
  font-size: clamp(1.28rem, 1.72vw, 1.82rem);
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Multiplayer mechanic demos share the native HP and attack-queue HUD. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-combat-tile: min(3.35rem, 6.5vh, 3.7vw);
  grid-template-columns:
    minmax(7.4rem, 8rem)
    calc(var(--tutorial-combat-tile) * 8 + 18px)
    minmax(20rem, 38rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board dialogue"
    "right right right";
  justify-content: center;
  align-items: center;
  column-gap: clamp(12px, 2vw, 30px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  width: 100%;
  max-width: 38rem;
  justify-self: start;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 38rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-board-container {
  width: auto;
  min-height: 0;
  height: 100%;
  padding: 8px;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) #game-board {
  width: calc(var(--tutorial-combat-tile) * 8);
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  display: grid;
  grid-area: left;
  grid-template-rows: minmax(0, 1fr);
  align-self: center;
  width: 100%;
  max-width: 8rem;
  height: calc(var(--tutorial-combat-tile) * 10);
  min-height: 0;
  padding: 0.45rem 0.35rem;
  background: linear-gradient(180deg, rgba(11, 16, 24, 0.82), rgba(7, 10, 15, 0.72));
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-b2b,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-shield-meter {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hud-row {
  grid-template-columns: minmax(2.1rem, 2.45rem) minmax(4.45rem, 4.45rem);
  grid-template-areas: "hp queue";
  gap: 0.5rem;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-hp-only {
  justify-self: end;
  width: 3.4rem;
  max-width: 3.4rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-hp-only .duel-hud-row {
  grid-template-columns: minmax(2.1rem, 2.45rem);
  grid-template-areas: "hp";
  justify-content: center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-hp-only .duel-queue {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-packet-page:not(.is-tutorial-menu-scene) .player-duel-panel .duel-queue {
  display: block;
  overflow: visible;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns:
    minmax(5rem, 10.5rem)
    calc(var(--tutorial-combat-tile) * 8 + 18px)
    minmax(20rem, 38rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-earning-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns:
    minmax(4.4rem, 5.4rem)
    calc(var(--tutorial-combat-tile) * 8 + 18px)
    minmax(22rem, 38rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.45rem;
  width: 100%;
  max-width: 10.5rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-earning-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  max-width: 5.4rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-b2b {
  display: grid;
  width: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-b2b .duel-pp-segments,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-b2b .duel-matchless-wrap {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-shield-meter {
  display: grid;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hud-row {
  grid-template-columns: minmax(1.75rem, 2rem) minmax(2.1rem, 2.45rem) minmax(4.45rem, 4.45rem);
  grid-template-areas: "shield hp queue";
  gap: 0.35rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-shield-only .duel-hud-row {
  grid-template-columns: minmax(2.1rem, 2.45rem);
  grid-template-areas: "shield";
  justify-content: center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-shield-only .duel-hp,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-shield-only .duel-queue {
  display: none;
}

.tutorial-shield-table {
  width: min(100%, 31rem);
  margin-top: 0.65rem;
  border: 1px solid rgba(112, 209, 229, 0.34);
  background: rgba(5, 12, 18, 0.7);
}

.tutorial-shield-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: rgba(229, 247, 252, 0.92);
  font-size: clamp(0.58rem, 1.35vh, 0.72rem);
  line-height: 1.08;
  text-align: center;
}

.tutorial-shield-table th,
.tutorial-shield-table td {
  padding: 0.17rem 0.2rem;
  border-right: 1px solid rgba(112, 209, 229, 0.16);
  border-bottom: 1px solid rgba(112, 209, 229, 0.12);
}

.tutorial-shield-table th {
  color: #9eefff;
  font-size: 0.88em;
  text-transform: uppercase;
}

.tutorial-shield-table th:last-child,
.tutorial-shield-table td:last-child {
  border-right: 0;
}

.tutorial-shield-table tbody tr:last-child td {
  border-bottom: 0;
}

.duel-tempo-panel.is-tutorial-attack-timeout-demo {
  display: contents;
}

.duel-tempo-panel.is-tutorial-attack-timeout-demo .duel-tempo-base,
.duel-tempo-panel.is-tutorial-attack-timeout-demo .duel-tempo-ai-drain,
.duel-tempo-panel.is-tutorial-attack-timeout-demo .duel-counter-stack,
.duel-tempo-panel.is-tutorial-attack-timeout-demo .duel-clock-label,
.duel-tempo-panel.is-tutorial-attack-timeout-demo .duel-clock-value {
  display: none;
}

.duel-tempo-panel.is-tutorial-attack-timeout-demo .duel-tempo-player-drain {
  grid-area: board;
  align-self: start;
  justify-self: end;
  z-index: 18;
  display: flex;
  margin: 0;
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(121, 151, 169, 0.36);
  background: rgba(7, 11, 16, 0.9);
  transform: translateY(-1.45rem);
}

@media (max-height: 650px) and (min-width: 701px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .tutorial-dialogue h2 {
    font-size: clamp(1.15rem, 4vh, 1.5rem);
    line-height: 1.05;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    margin-top: 7px;
    font-size: clamp(0.75rem, 2.5vh, 0.86rem);
    line-height: 1.34;
  }
}

.tutorial-hp-phase {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(11rem, 1fr) auto auto;
  gap: 6px;
  min-width: 0;
  height: 100%;
  padding: 12px 10px;
  border: 1px solid rgba(166, 188, 205, 0.32);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(22, 29, 39, 0.94), rgba(8, 12, 18, 0.98));
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tutorial-hp-phase.is-continuous {
  grid-template-rows: auto auto auto minmax(14rem, 1fr) auto auto;
  padding: 16px 18px;
}

.tutorial-hp-status {
  display: grid;
  gap: 5px;
}

.tutorial-hp-status p {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
}

.tutorial-hp-status [data-tutorial-match-time] {
  color: #f5fbff;
  font-size: 1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.tutorial-hp-speed {
  color: #62d7d0;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tutorial-hp-phase h3,
.tutorial-hp-phase p,
.tutorial-hp-phase span,
.tutorial-hp-phase b,
.tutorial-hp-phase strong,
.tutorial-hp-phase small {
  margin: 0;
}

.tutorial-hp-phase h3 {
  color: #f5fbff;
  font-size: 1.05rem;
}

.tutorial-hp-phase p,
.tutorial-hp-phase small {
  color: rgba(216, 227, 235, 0.66);
  font-size: 0.72rem;
}

.tutorial-hp-phase > strong:not(.tutorial-hp-value) {
  display: none;
}

.tutorial-hp-phase > b {
  min-height: 2.2em;
  color: #f5fbff;
  font-size: 0.92rem;
}

.tutorial-hp-drain-label {
  color: #93b9ca;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tutorial-hp-bar {
  position: relative;
  width: clamp(30px, 3.6vw, 46px);
  height: 100%;
  min-height: 11rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(195, 216, 228, 0.42);
  border-radius: 2px;
  background: #080d12;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.04),
    0 0 10px rgba(0, 0, 0, 0.42);
}

.tutorial-hp-phase.is-continuous .tutorial-hp-bar {
  width: clamp(42px, 4vw, 56px);
}

.tutorial-hp-bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #6aef91, #27b958);
  transform-origin: bottom;
  transform: scaleY(0.94);
  will-change: transform;
}

.tutorial-hp-phase.is-mid-hp .tutorial-hp-bar i {
  background: linear-gradient(180deg, #ffe267, #e69b24);
}

.tutorial-hp-phase.is-low-hp .tutorial-hp-bar i {
  background: linear-gradient(180deg, #ff8a73, #d72e45);
}

.tutorial-hp-value {
  display: grid;
  gap: 0;
  color: #f5fbff;
  font-size: 0.86rem;
  line-height: 1.05;
}

.tutorial-hp-value > span:last-child {
  color: rgba(216, 227, 235, 0.66);
  font-size: 0.68rem;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-panel {
  position: fixed;
  z-index: 40;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100vw - 36px), 82rem);
  margin: 0;
  transform: translateX(-50%);
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-actions {
  --tutorial-nav-button-width: min(18rem, calc((100vw - 60px) / 3));
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-actions button {
  flex: 0 0 var(--tutorial-nav-button-width);
  width: var(--tutorial-nav-button-width);
  max-width: 18rem;
  min-width: 0;
  min-height: 58px;
  padding: 10px 18px;
  font-size: 15px;
}

.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) #tutorial-prev-button { order: 1; }
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) #tutorial-start-button { order: 2; }
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) #tutorial-controls-button { order: 3; }
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) #tutorial-next-button { order: 4; }
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) #tutorial-replay-button { order: 5; }
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) #tutorial-skip-button { order: 6; }

@media (max-width: 700px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    width: 100%;
    max-width: 100%;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
    justify-self: end;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue"
      "board"
      "right";
    row-gap: 8px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    max-width: 100%;
    margin-inline: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .tutorial-hp-phases {
    width: min(100%, 16rem);
    height: min(37vh, 19rem);
  }

  .tutorial-hp-phase {
    grid-template-rows: auto auto auto auto minmax(6rem, 1fr) auto auto;
    gap: 3px;
    padding: 7px 4px;
  }

  .tutorial-hp-phase.is-continuous {
    grid-template-rows: auto auto auto minmax(7rem, 1fr) auto auto;
    padding: 8px 10px;
  }

  .tutorial-hp-phase h3 {
    font-size: 0.82rem;
  }

  .tutorial-hp-phase p,
  .tutorial-hp-phase small {
    font-size: 0.58rem;
  }

  .tutorial-hp-phase > b {
    min-height: 2.4em;
    font-size: 0.69rem;
  }

  .tutorial-hp-value {
    font-size: 0.68rem;
  }

  .tutorial-hp-value > span:last-child,
  .tutorial-hp-drain-label {
    font-size: 0.54rem;
  }

  .tutorial-hp-bar {
    width: 28px;
    min-height: 6rem;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-controls-page .tutorial-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-controls-page .tutorial-actions button {
    padding-inline: 8px;
    font-size: 13px;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue h2 {
    font-size: 26px;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    font-size: 14px;
  }
}

/* Paired Dual Match / Cascade tutorial demonstration. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-combo-tile: min(5rem, 8vh, 8vw);
  --tutorial-combo-gap: clamp(14px, 2vw, 30px);
  position: relative;
  grid-template-columns:
    minmax(0, 1fr)
    calc(var(--tutorial-combo-tile) * 3 + 16px)
    calc(var(--tutorial-combo-tile) * 3 + 16px)
    minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "dialogue dialogue dialogue dialogue"
    ". board ai-board ."
    "right right right right";
  justify-content: center;
  column-gap: var(--tutorial-combo-gap);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .player-board-container,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .ai-board-container {
  display: grid;
  width: auto;
  min-height: 0;
  height: 100%;
  padding: 8px;
  place-items: center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .player-board-container {
  grid-area: board;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .ai-board-container {
  grid-area: ai-board;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .player-board-label,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .ai-board-label {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) #game-board,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) #ai-game-board {
  width: calc(var(--tutorial-combo-tile) * 3);
  max-width: 100%;
  height: auto;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) #tutorial-combo-counter {
  --counter-y: -50%;
  --tutorial-combo-counter-width: clamp(4.5rem, 7vw, 7rem);
  --tutorial-counter-board-gap: clamp(1.15rem, 2vw, 1.75rem);
  position: absolute;
  z-index: 6;
  top: 52%;
  left: max(
    0.25rem,
    calc(
      50% - var(--tutorial-combo-gap) / 2
      - var(--tutorial-combo-tile) * 3 - 8px
      - var(--tutorial-combo-counter-width) - var(--tutorial-counter-board-gap)
    )
  );
  width: var(--tutorial-combo-counter-width);
  transform: translateY(var(--counter-y));
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) #tutorial-combo-counter:not([hidden]) {
  display: block;
}

#tutorial-combo-counter[hidden] {
  display: none !important;
}

/* Paired special creation / activation demonstrations. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-special-tile: min(5rem, 8vh, 8vw);
  grid-template-columns:
    calc(var(--tutorial-special-tile) * 4 + 16px)
    calc(var(--tutorial-special-tile) * 4 + 16px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "dialogue dialogue"
    "board ai-board"
    "right right";
  justify-content: center;
  column-gap: clamp(18px, 2.5vw, 38px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .player-board-container,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .ai-board-container {
  display: grid;
  width: auto;
  min-height: 0;
  height: 100%;
  padding: 8px;
  place-items: center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .player-board-container {
  grid-area: board;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .ai-board-container {
  grid-area: ai-board;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .player-board-label,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .ai-board-label {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) #game-board,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) #ai-game-board {
  max-width: 100%;
  height: auto;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-bomb-page:not(.is-tutorial-menu-scene) #game-board,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-bomb-page:not(.is-tutorial-menu-scene) #ai-game-board,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-cross-page:not(.is-tutorial-menu-scene) #game-board,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-cross-page:not(.is-tutorial-menu-scene) #ai-game-board {
  width: calc(var(--tutorial-special-tile) * 4);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-tesseract-page:not(.is-tutorial-menu-scene) #game-board {
  width: calc(var(--tutorial-special-tile) * 5);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-tesseract-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns:
    calc(var(--tutorial-special-tile) * 5 + 16px)
    calc(var(--tutorial-special-tile) * 4 + 16px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-tesseract-page:not(.is-tutorial-menu-scene) #ai-game-board {
  width: calc(var(--tutorial-special-tile) * 4);
}

/* Native Chain HUD beside the single-board Chain Detonation demonstration. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-chain-tile: min(5rem, 8vh, 8vw);
  --tutorial-chain-gap: clamp(14px, 2vw, 30px);
  position: relative;
  grid-template-columns:
    minmax(0, 1fr)
    calc(var(--tutorial-chain-tile) * 4 + 16px)
    minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "dialogue dialogue dialogue"
    ". board ."
    "right right right";
  justify-content: center;
  column-gap: var(--tutorial-chain-gap);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) #game-board {
  width: calc(var(--tutorial-chain-tile) * 4);
  max-width: 100%;
  height: auto;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) #chain-counter {
  --counter-y: -50%;
  --tutorial-chain-counter-width: clamp(4.5rem, 7vw, 7rem);
  --tutorial-counter-board-gap: clamp(1.15rem, 2vw, 1.75rem);
  position: absolute;
  z-index: 6;
  top: 52%;
  left: max(
    0.25rem,
    calc(
      50% - var(--tutorial-chain-tile) * 2 - 8px
      - var(--tutorial-chain-counter-width) - var(--tutorial-counter-board-gap)
    )
  );
  width: var(--tutorial-chain-counter-width);
  transform: translateY(var(--counter-y));
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) #chain-counter:not([hidden]) {
  display: block;
}

/* Full seeded board for the one-use Double Tesseract demonstration. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-dt-tile: min(3.75rem, 6.4vh, 5vw);
  grid-template-columns:
    calc(var(--tutorial-dt-tile) * 8 + 16px)
    minmax(20rem, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "board dialogue"
    "right right";
  justify-content: center;
  align-items: center;
  column-gap: clamp(18px, 3vw, 46px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  width: 100%;
  max-width: 36rem;
  margin: 0;
  padding-inline: clamp(8px, 1.5vw, 22px);
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 36rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .player-board-container {
  width: auto;
  min-height: 0;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) #game-board {
  width: calc(var(--tutorial-dt-tile) * 8);
  max-width: 100%;
  height: auto;
  max-height: none;
}

/* Full-board classic MULT demonstration with the native PP meter. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-mult-tile: min(3.75rem, 6.4vh, 5vw);
  grid-template-columns:
    clamp(7rem, 9vw, 9rem)
    calc(var(--tutorial-mult-tile) * 8 + 16px)
    minmax(19rem, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board dialogue"
    "right right right";
  justify-content: center;
  align-items: center;
  column-gap: clamp(14px, 2vw, 30px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding-inline: clamp(8px, 1.5vw, 22px);
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 34rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .player-board-container {
  width: auto;
  min-height: 0;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) #game-board {
  width: calc(var(--tutorial-mult-tile) * 8);
  max-width: 100%;
  height: auto;
  max-height: calc(100% - 24px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) #b2b-board-meter {
  display: grid;
  grid-area: left;
  align-self: center;
  justify-self: end;
  width: min(100%, 9rem);
}

/* Misfire recovery uses the native MULT meter beside a compact live board. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-misfire-tile: min(3.75rem, 6.4vh, 5vw);
  grid-template-columns:
    clamp(7rem, 9vw, 9rem)
    calc(var(--tutorial-misfire-tile) * 8 + 16px)
    minmax(20rem, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board dialogue"
    "right right right";
  justify-content: center;
  align-items: center;
  column-gap: clamp(14px, 2vw, 30px);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
  width: 100%;
  max-width: 36rem;
  margin: 0;
  padding-inline: clamp(8px, 1.5vw, 22px);
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
  max-width: 36rem;
  margin-inline: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .player-board-container {
  width: auto;
  min-height: 0;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) #game-board {
  width: calc(var(--tutorial-misfire-tile) * 8);
  max-width: 100%;
  height: auto;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) #b2b-board-meter {
  display: grid;
  grid-area: left;
  align-self: center;
  justify-self: end;
  width: min(100%, 9rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .board-container canvas,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .board-container canvas {
  transition: filter 180ms ease, opacity 180ms ease;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .board-container.is-demo-inactive canvas,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .board-container.is-demo-inactive canvas {
  filter: grayscale(1) saturate(0.08) brightness(0.52);
  opacity: 0.68;
}

/* Keep menu commands readable over every button treatment. */
.main-menu-screen button,
.multiplayer-screen button,
.multiplayer-room-screen button,
.duel-config-screen button,
.tutorial-popup button,
.tutorial-panel button,
.pause-overlay button,
.duel-end-overlay button,
.practice-challenge-overlay button {
  color: #f7fbfd !important;
}

/*
 * Major menu commands share one supported angular frame. The outer and inner
 * polygons are separate layers, so diagonal corners retain a complete edge.
 */
.main-menu-screen .main-menu-page > .mode-button,
.main-menu-screen .tutorial-menu-entry > .mode-button,
.main-menu-screen .main-menu-page > .primary-action,
.main-menu-screen .training-challenge-menu-actions > .main-menu-back,
.main-menu-screen .training-challenge-list > .mode-button,
.main-menu-screen .options-category-menu > .mode-button,
.menu-command {
  --angular-cut: 10px;
  --angular-edge: rgba(113, 193, 220, 0.48);
  --angular-edge-focus: rgba(115, 231, 255, 0.92);
  --angular-fill-top: rgba(29, 53, 68, 0.96);
  --angular-fill-bottom: rgba(8, 19, 27, 0.98);
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.main-menu-screen .main-menu-page > .mode-button::before,
.main-menu-screen .main-menu-page > .mode-button::after,
.main-menu-screen .tutorial-menu-entry > .mode-button::before,
.main-menu-screen .tutorial-menu-entry > .mode-button::after,
.main-menu-screen .main-menu-page > .primary-action::before,
.main-menu-screen .main-menu-page > .primary-action::after,
.main-menu-screen .training-challenge-menu-actions > .main-menu-back::before,
.main-menu-screen .training-challenge-menu-actions > .main-menu-back::after,
.main-menu-screen .training-challenge-list > .mode-button::before,
.main-menu-screen .training-challenge-list > .mode-button::after,
.main-menu-screen .options-category-menu > .mode-button::before,
.main-menu-screen .options-category-menu > .mode-button::after,
.menu-command::before,
.menu-command::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition:
    background 160ms linear,
    filter 160ms linear;
}

.main-menu-screen .main-menu-page > .mode-button::before,
.main-menu-screen .tutorial-menu-entry > .mode-button::before,
.main-menu-screen .main-menu-page > .primary-action::before,
.main-menu-screen .training-challenge-list > .mode-button::before,
.main-menu-screen .training-challenge-menu-actions > .main-menu-back::before,
.main-menu-screen .options-category-menu > .mode-button::before,
.menu-command::before {
  z-index: -2;
  inset: 0;
  background: var(--angular-edge);
  clip-path: polygon(
    var(--angular-cut) 0,
    100% 0,
    100% calc(100% - var(--angular-cut)),
    calc(100% - var(--angular-cut)) 100%,
    0 100%,
    0 var(--angular-cut)
  );
  filter: drop-shadow(0 3px 0 rgba(3, 7, 10, 0.9));
}

.main-menu-screen .main-menu-page > .mode-button::after,
.main-menu-screen .tutorial-menu-entry > .mode-button::after,
.main-menu-screen .main-menu-page > .primary-action::after,
.main-menu-screen .training-challenge-list > .mode-button::after,
.main-menu-screen .training-challenge-menu-actions > .main-menu-back::after,
.main-menu-screen .options-category-menu > .mode-button::after,
.menu-command::after {
  z-index: -1;
  inset: 1px;
  background:
    linear-gradient(
      180deg,
      var(--angular-fill-top) 0,
      var(--angular-fill-bottom) 100%
    );
  clip-path: polygon(
    calc(var(--angular-cut) - 1px) 0,
    100% 0,
    100% calc(100% - var(--angular-cut) + 1px),
    calc(100% - var(--angular-cut) + 1px) 100%,
    0 100%,
    0 calc(var(--angular-cut) - 1px)
  );
}

.main-menu-screen .main-menu-page > .menu-panel-primary,
.main-menu-screen .training-challenge-detail-actions > .menu-panel-primary {
  --angular-edge: rgba(103, 213, 240, 0.62);
  --angular-fill-top: rgba(30, 65, 82, 0.98);
  --angular-fill-bottom: rgba(8, 22, 31, 0.99);
}

.main-menu-screen #options-menu-button {
  --angular-edge: rgba(106, 235, 214, 0.74);
  --angular-fill-top: rgba(40, 126, 115, 0.98);
  --angular-fill-bottom: rgba(13, 72, 65, 0.99);
}

.main-menu-screen .main-menu-page .main-menu-back {
  --angular-edge: #a04d58;
  --angular-edge-focus: #ef8792;
  --angular-fill-top: #5a2930;
  --angular-fill-bottom: #241116;
  color: #fff7f8 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
}

.main-menu-screen .main-menu-page > .mode-button:hover,
.main-menu-screen .main-menu-page > .mode-button:focus-visible,
.main-menu-screen .tutorial-menu-entry > .mode-button:hover,
.main-menu-screen .tutorial-menu-entry > .mode-button:focus-visible,
.main-menu-screen .main-menu-page > .primary-action:hover,
.main-menu-screen .main-menu-page > .primary-action:focus-visible,
.main-menu-screen .training-challenge-menu-actions > .main-menu-back:hover,
.main-menu-screen .training-challenge-menu-actions > .main-menu-back:focus-visible,
.main-menu-screen .training-challenge-list > .mode-button:hover,
.main-menu-screen .training-challenge-list > .mode-button:focus-visible,
.main-menu-screen .options-category-menu > .mode-button:hover,
.main-menu-screen .options-category-menu > .mode-button:focus-visible,
.menu-command:hover,
.menu-command:focus-visible {
  --angular-edge: var(--angular-edge-focus);
}

.main-menu-screen .main-menu-page .main-menu-back:hover,
.main-menu-screen .main-menu-page .main-menu-back:focus-visible {
  --angular-fill-top: #74343e;
  --angular-fill-bottom: #2d141a;
}

/*
 * Compact menus keep their existing rounded button family. Back is a colour
 * variant of that bevel rather than borrowing the major-menu silhouette.
 */
[data-multiplayer-back],
#multiplayer-main-menu-button,
#duel-config-main-menu-button,
#pause-main-menu-button,
#duel-end-main-menu-button,
#practice-challenge-main-menu-button,
#tutorial-controls-button,
.is-back-action {
  border: 1px solid #8f4650 !important;
  border-bottom-color: #16090c !important;
  border-radius: var(--radius-button) !important;
  background: linear-gradient(180deg, #5a2930 0, #3a1b21 18%, #241116 100%) !important;
  box-shadow:
    0 3px 0 #12080a,
    inset 0 1px 0 rgba(255, 217, 222, 0.12) !important;
  color: #fff7f8 !important;
  clip-path: none !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

[data-multiplayer-back]:hover,
[data-multiplayer-back]:focus-visible,
#multiplayer-main-menu-button:hover,
#multiplayer-main-menu-button:focus-visible,
#duel-config-main-menu-button:hover,
#duel-config-main-menu-button:focus-visible,
#pause-main-menu-button:hover,
#pause-main-menu-button:focus-visible,
#duel-end-main-menu-button:hover,
#duel-end-main-menu-button:focus-visible,
#practice-challenge-main-menu-button:hover,
#practice-challenge-main-menu-button:focus-visible,
#tutorial-controls-button:hover,
#tutorial-controls-button:focus-visible,
.is-back-action:hover,
.is-back-action:focus-visible {
  border-color: #e27b86 !important;
  background: linear-gradient(180deg, #74343e 0, #4b222a 18%, #2d141a 100%) !important;
}

@media (max-width: 700px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-combat-tile: min(2.45rem, 3.3vh, 7.5vw);
    grid-template-columns: minmax(6.6rem, 7.4rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue dialogue"
      "left board"
      "right right";
    column-gap: 6px;
    row-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-combat-tile: min(2.6rem, 4vh, 5.3vw);
    grid-template-columns: minmax(5rem, 10.5rem) minmax(0, 1fr);
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-earning-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-combat-tile: min(2.8rem, 4vh, 5.5vw);
    grid-template-columns: minmax(4.4rem, 5.4rem) minmax(0, 1fr);
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    max-width: 100%;
    margin-inline: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-attack-tile: min(2.65rem, 3.5vh, 10vw);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue"
      "board"
      "right";
    row-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-attack-tile: min(2.35rem, 3.25vh, 7.6vw);
    grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue dialogue"
      "left board"
      "right right";
    column-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) #b2b-board-meter {
    width: min(100%, 5.8rem);
  }

  .duel-tempo-panel.is-tutorial-rising-attack-demo .duel-tempo-base {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    max-width: 100%;
    margin-inline: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-combo-tile: min(2.65rem, 5.2vh, 10vw);
    grid-template-columns:
      minmax(0, 1fr)
      calc(var(--tutorial-combo-tile) * 3 + 16px)
      calc(var(--tutorial-combo-tile) * 3 + 16px)
      minmax(0, 1fr);
    column-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) #game-board,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) #ai-game-board {
    width: calc(var(--tutorial-combo-tile) * 3);
    height: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) #tutorial-combo-counter {
    padding-inline: 0.35rem;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-special-tile: min(2.4rem, 4.8vh, 8vw);
    column-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-chain-tile: min(2.65rem, 5.2vh, 10vw);
    grid-template-columns:
      minmax(0, 1fr)
      calc(var(--tutorial-chain-tile) * 4 + 16px)
      minmax(0, 1fr);
    column-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-dt-tile: min(2.65rem, 4.8vh, 8vw);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue"
      "board"
      "right";
    row-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    padding-inline: 0;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    max-width: 100%;
    margin-inline: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-mult-tile: min(2.65rem, 4.8vh, 8vw);
    grid-template-columns: minmax(4.5rem, 5.5rem) calc(var(--tutorial-mult-tile) * 8 + 12px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue dialogue"
      "left board"
      "right right";
    column-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    padding-inline: 0;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    max-width: 100%;
    margin-inline: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-misfire-tile: min(2.65rem, 4.8vh, 8vw);
    grid-template-columns: minmax(4.5rem, 5.5rem) calc(var(--tutorial-misfire-tile) * 8 + 12px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dialogue dialogue"
      "left board"
      "right right";
    column-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 100%;
    padding-inline: 0;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Local menu polish: stable map travel, centred Training, and a scene-style tutorial root. */
body::before {
  transform:
    translate3d(
      calc(var(--menu-bg-x) + var(--menu-map-x)),
      calc(var(--menu-bg-y) + var(--menu-map-y)),
      0
    )
    scale(1.055)
    rotateX(4deg);
}

.menu-depth-grid {
  transform:
    perspective(1000px)
    translate3d(
      calc(var(--menu-grid-far-x) + var(--menu-grid-map-x)),
      calc(var(--menu-grid-far-y) + var(--menu-grid-map-y) + 5%),
      0
    )
    rotateX(18deg)
    scale(1.16);
}

@keyframes menu-grid-idle {
  from {
    transform:
      translate3d(
        calc(var(--menu-bg-x) + var(--menu-map-x) - 4px),
        calc(var(--menu-bg-y) + var(--menu-map-y) - 3px),
        0
      )
      scale(1.055)
      rotateX(4deg);
  }
  to {
    transform:
      translate3d(
        calc(var(--menu-bg-x) + var(--menu-map-x) + 4px),
        calc(var(--menu-bg-y) + var(--menu-map-y) + 3px),
        0
      )
      scale(1.055)
      rotateX(4deg);
  }
}

@keyframes menu-far-grid-idle {
  from {
    transform:
      perspective(1000px)
      translate3d(
        calc(var(--menu-grid-far-x) + var(--menu-grid-map-x) - 3px),
        calc(var(--menu-grid-far-y) + var(--menu-grid-map-y) + 5% - 2px),
        0
      )
      rotateX(18deg)
      scale(1.16);
  }
  to {
    transform:
      perspective(1000px)
      translate3d(
        calc(var(--menu-grid-far-x) + var(--menu-grid-map-x) + 3px),
        calc(var(--menu-grid-far-y) + var(--menu-grid-map-y) + 5% + 2px),
        0
      )
      rotateX(18deg)
      scale(1.16);
  }
}

@keyframes menu-grid-directional-pan {
  from {
    transform:
      translate3d(
        calc(var(--menu-bg-x) + var(--menu-map-from-x)),
        calc(var(--menu-bg-y) + var(--menu-map-from-y)),
        0
      )
      scale(1.055)
      rotateX(4deg);
  }
  to {
    transform:
      translate3d(
        calc(var(--menu-bg-x) + var(--menu-map-to-x)),
        calc(var(--menu-bg-y) + var(--menu-map-to-y)),
        0
      )
      scale(1.055)
      rotateX(4deg);
  }
}

body[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
body[data-menu-pan].is-menu-travel-back .menu-depth-grid {
  animation: menu-far-grid-directional-pan 460ms var(--menu-motion-ease) both;
  animation-play-state: paused;
}

body[data-menu-pan].is-menu-pan-running .menu-depth-grid {
  animation-play-state: running;
}

@keyframes menu-far-grid-directional-pan {
  from {
    transform:
      perspective(1000px)
      translate3d(
        calc(var(--menu-grid-far-x) + var(--menu-grid-map-from-x)),
        calc(var(--menu-grid-far-y) + var(--menu-grid-map-from-y) + 5%),
        0
      )
      rotateX(18deg)
      scale(1.16);
  }
  to {
    transform:
      perspective(1000px)
      translate3d(
        calc(var(--menu-grid-far-x) + var(--menu-grid-map-to-x)),
        calc(var(--menu-grid-far-y) + var(--menu-grid-map-to-y) + 5%),
        0
      )
      rotateX(18deg)
      scale(1.16);
  }
}

#training-menu-page {
  width: min(900px, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  grid-template-areas:
    "title title"
    "practice challenges"
    "back back";
  justify-content: center;
  align-content: center;
  column-gap: clamp(24px, 4vw, 48px);
  row-gap: 24px;
}

#training-menu-page .menu-page-title {
  grid-area: title;
  justify-self: center;
}

#free-practice-button { grid-area: practice; }
#training-challenges-button { grid-area: challenges; }

#training-menu-page #free-practice-button,
#training-menu-page #training-challenges-button {
  min-height: 140px;
}

#training-menu-page .main-menu-back {
  grid-area: back;
  width: min(220px, 100%);
  justify-self: center;
}

.app-shell.is-tutorial-root-menu .tutorial-board-overlay {
  padding: clamp(20px, 4vw, 56px);
  background:
    radial-gradient(circle at 50% 42%, rgba(29, 94, 119, 0.12), transparent 50%),
    rgba(3, 8, 12, 0.9);
}

.app-shell.is-tutorial-root-menu .tutorial-popup.is-tutorial-menu-popup {
  display: grid;
  width: min(1040px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  text-align: center;
}

.app-shell.is-tutorial-root-menu .tutorial-popup h2 {
  margin: 0;
  color: #f4fbff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  text-shadow: 0 0 16px rgba(69, 194, 229, 0.22);
}

.app-shell.is-tutorial-root-menu .tutorial-popup > p,
.app-shell.is-tutorial-root-menu .tutorial-popup-note {
  max-width: 48rem;
  margin-inline: auto;
  color: rgba(220, 237, 244, 0.82);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

.app-shell.is-tutorial-root-menu .tutorial-popup-actions {
  display: grid;
  width: min(920px, 100%);
  margin: clamp(24px, 4vh, 42px) auto 0;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 380px) minmax(240px, 1fr);
  grid-template-areas:
    ". primary ."
    "multiplayer . back"
    ". tests .";
  gap: clamp(16px, 2.4vw, 28px);
}

.app-shell.is-tutorial-root-menu .tutorial-popup-actions button {
  min-height: 128px;
  padding: 22px 28px;
  border: 1px solid rgba(113, 193, 220, 0.34);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(29, 53, 68, 0.92), rgba(8, 19, 27, 0.96));
  color: #f4fbff;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(183, 236, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38);
}

.app-shell.is-tutorial-root-menu .tutorial-popup-actions button:nth-child(1) {
  grid-area: primary;
}

.app-shell.is-tutorial-root-menu .tutorial-popup-actions button:nth-child(2) {
  grid-area: multiplayer;
}

.app-shell.is-tutorial-root-menu .tutorial-popup-actions button:nth-child(3) {
  grid-area: tests;
}

.app-shell.is-tutorial-root-menu .tutorial-popup-actions button:last-child {
  width: min(260px, 100%);
  min-height: 52px;
  grid-area: back;
  justify-self: center;
  border-color: rgba(186, 87, 91, 0.34);
  background: linear-gradient(180deg, rgba(77, 33, 39, 0.92), rgba(29, 12, 17, 0.96));
  font-size: 1rem;
}

@media (max-width: 760px), (pointer: coarse) {
  #training-menu-page {
    width: min(440px, 100%);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "practice"
      "challenges"
      "back";
    gap: 12px;
  }

  .app-shell.is-tutorial-root-menu .tutorial-popup-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "primary"
      "multiplayer"
      "tests"
      "back";
    gap: 12px;
  }

  .app-shell.is-tutorial-root-menu .tutorial-popup-actions button,
  .app-shell.is-tutorial-root-menu .tutorial-popup-actions button:last-child {
    width: 100%;
    min-height: 84px;
    grid-column: auto;
  }
}

.is-menu-inline-leaving,
.is-menu-inline-arriving {
  pointer-events: none;
  will-change: transform;
}

.is-menu-inline-leaving {
  animation: menu-inline-leave 220ms var(--menu-motion-ease) both;
}

.is-menu-inline-arriving {
  animation: menu-inline-arrive 260ms var(--menu-motion-ease) both;
}

@keyframes menu-inline-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--menu-pan-exit-x), var(--menu-pan-exit-y), 0);
  }
}

@keyframes menu-inline-arrive {
  from {
    transform: translate3d(var(--menu-pan-enter-x), var(--menu-pan-enter-y), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
  body[data-menu-pan].is-menu-travel-back .menu-depth-grid {
    animation: none !important;
  }

  .is-menu-inline-leaving,
  .is-menu-inline-arriving {
    animation: menu-reduced-enter 110ms linear both !important;
  }
}

/* Final menu motion layer. Keep this last so legacy layout passes cannot reclaim it. */
#tutorial-menu-page {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  grid-template-areas:
    ". title ."
    "basics advanced live"
    "turn configs tests"
    ". . back";
  align-content: center;
  align-items: stretch;
  column-gap: clamp(18px, 2.6vw, 42px);
  row-gap: clamp(14px, 2vh, 22px);
}

#tutorial-menu-page .menu-page-title { grid-area: title; }
#tutorial-basics-button { grid-area: basics; }
#tutorial-advanced-button { grid-area: advanced; }
#tutorial-live-button { grid-area: live; }
#tutorial-turn-button { grid-area: turn; }
#tutorial-configs-button { grid-area: configs; }
#tutorial-tests-button { grid-area: tests; }

#tutorial-menu-page .mode-button {
  min-height: clamp(96px, 13vh, 132px);
}

#tutorial-menu-page .main-menu-back {
  grid-area: back;
  width: min(220px, 100%);
  justify-self: end;
}

body::before {
  translate: var(--menu-map-x) var(--menu-map-y);
  transform:
    translate3d(var(--menu-bg-x), var(--menu-bg-y), 0)
    scale(1.055)
    rotateX(4deg);
  transition: translate 460ms var(--menu-motion-ease);
}

.menu-depth-grid {
  translate: var(--menu-grid-map-x) var(--menu-grid-map-y);
  transform:
    perspective(1000px)
    translate3d(var(--menu-grid-far-x), calc(var(--menu-grid-far-y) + 5%), 0)
    rotateX(18deg)
    scale(1.16);
  transition: translate 460ms var(--menu-motion-ease);
}

@keyframes menu-grid-idle {
  from {
    transform:
      translate3d(calc(var(--menu-bg-x) - 4px), calc(var(--menu-bg-y) - 3px), 0)
      scale(1.055)
      rotateX(4deg);
  }
  to {
    transform:
      translate3d(calc(var(--menu-bg-x) + 4px), calc(var(--menu-bg-y) + 3px), 0)
      scale(1.055)
      rotateX(4deg);
  }
}

@keyframes menu-far-grid-idle {
  from {
    transform:
      perspective(1000px)
      translate3d(calc(var(--menu-grid-far-x) - 3px), calc(var(--menu-grid-far-y) + 5% - 2px), 0)
      rotateX(18deg)
      scale(1.16);
  }
  to {
    transform:
      perspective(1000px)
      translate3d(calc(var(--menu-grid-far-x) + 3px), calc(var(--menu-grid-far-y) + 5% + 2px), 0)
      rotateX(18deg)
      scale(1.16);
  }
}

body[data-menu-pan].is-menu-travel-forward::before,
body[data-menu-pan].is-menu-travel-back::before {
  animation: menu-grid-idle 24s linear infinite alternate !important;
  animation-play-state: running !important;
}

body[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
body[data-menu-pan].is-menu-travel-back .menu-depth-grid {
  animation: menu-far-grid-idle 34s linear infinite alternate !important;
  animation-play-state: running !important;
}

.is-menu-window-leaving,
.is-menu-window-arriving {
  will-change: transform, opacity;
  filter: none !important;
}

@keyframes menu-window-enter-depth {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 40px) scale(1.09);
  }
}

@keyframes menu-window-arrive-depth {
  from {
    opacity: 0;
    transform: translate3d(0, 0, -44px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes menu-window-exit-depth {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, -44px) scale(0.92);
  }
}

@keyframes menu-window-return-depth {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 40px) scale(1.09);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 760px), (pointer: coarse) {
  #tutorial-menu-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "basics"
      "advanced"
      "live"
      "turn"
      "configs"
      "tests"
      "back";
    gap: 12px;
  }

  #tutorial-menu-page .main-menu-back {
    width: 100%;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .menu-depth-grid {
    transition: none !important;
  }

  body[data-menu-pan].is-menu-travel-forward::before,
  body[data-menu-pan].is-menu-travel-back::before,
  body[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
  body[data-menu-pan].is-menu-travel-back .menu-depth-grid {
    animation: none !important;
  }
}

/* Phase 4 room controls */
.multiplayer-room-actions > .back-action,
.duel-config-start > .back-action {
  order: -1;
  border-color: rgba(151, 174, 181, 0.25);
  background: linear-gradient(180deg, rgba(40, 50, 56, 0.78), rgba(20, 27, 31, 0.88));
  color: rgba(235, 244, 247, 0.84) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.multiplayer-share-actions,
.multiplayer-settings-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.multiplayer-share-actions .primary-action {
  min-height: 38px;
  padding: 7px 14px;
}

.multiplayer-share-actions .is-copied {
  border-color: rgba(113, 255, 223, 0.8);
  color: #b9ffec !important;
  filter: brightness(1.15);
}

.multiplayer-settings-panel {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(174, 197, 207, 0.16);
  border-bottom: 1px solid rgba(174, 197, 207, 0.16);
  padding: 10px 0;
}

.multiplayer-settings-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(174, 197, 207, 0.16);
  border-radius: 4px;
  background: rgba(174, 197, 207, 0.12);
}

.multiplayer-settings-details[hidden] {
  display: none !important;
}

.multiplayer-settings-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  background: #0b1115;
  font-size: 0.76rem;
}

.multiplayer-settings-details span {
  color: #9eafb7;
}

.multiplayer-settings-details strong {
  overflow-wrap: anywhere;
  color: #eef8fb;
  text-align: right;
}

@media (max-width: 620px) {
  .multiplayer-room-actions,
  .multiplayer-share-actions,
  .multiplayer-settings-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .multiplayer-settings-details {
    grid-template-columns: 1fr;
  }
}

.pause-actions > .back-action {
  order: -1;
  border-color: rgba(151, 174, 181, 0.25);
  background: linear-gradient(180deg, rgba(40, 50, 56, 0.86), rgba(20, 27, 31, 0.94));
  color: rgba(235, 244, 247, 0.86) !important;
}

/* Local profiles and completed-match lobby state */
.local-profile-panel {
  display: grid;
  gap: 12px;
  width: min(560px, 92vw);
  border: 1px solid rgba(108, 186, 211, 0.28);
  border-radius: 4px;
  padding: 16px 18px;
  background: rgba(8, 14, 18, 0.9);
}

.local-profile-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.local-profile-heading h3 {
  margin: 0;
  color: #f2fafc;
  font-family: var(--font-display);
  font-size: 1rem;
}

.local-profile-heading small,
.local-profile-panel > p {
  margin: 0;
  color: #8fa1aa;
  font-size: 0.68rem;
}

.local-profile-name {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #d7e6eb;
  font-family: var(--font-display);
  font-size: 0.8rem;
}

.local-profile-name input {
  min-width: 0;
  border: 1px solid #536873;
  border-radius: 3px;
  padding: 9px 10px;
  background: #080d10;
  color: #ffffff;
  font: 800 0.9rem var(--font-display);
}

.local-profile-name input:focus {
  border-color: #65e7d4;
  outline: 2px solid rgba(101, 231, 212, 0.16);
}

.local-profile-records {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(174, 197, 207, 0.15);
  background: rgba(174, 197, 207, 0.12);
}

.local-profile-records > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  background: #0b1115;
  text-align: center;
}

.local-profile-records span {
  color: #8799a2;
  font-size: 0.61rem;
  font-weight: 900;
  text-transform: uppercase;
}

.local-profile-records strong {
  overflow-wrap: anywhere;
  color: #a9fff0;
  font-family: var(--font-display);
  font-size: 0.75rem;
}

.multiplayer-player-profile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 4px;
  border-top: 1px solid rgba(174, 197, 207, 0.13);
  background: rgba(174, 197, 207, 0.1);
}

.multiplayer-player-profile:empty {
  display: none;
}

.multiplayer-player-profile > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  background: #091014;
  text-align: center;
}

.multiplayer-player-profile > span > small {
  color: #788b94;
  font-size: 0.53rem;
}

.multiplayer-player-profile > span > strong {
  overflow-wrap: anywhere;
  color: #d9f8f3;
  font-size: 0.63rem;
}

.multiplayer-player-slot.is-viewing-results {
  border-color: #c66cff;
  border-left-color: #c66cff;
  box-shadow: inset 0 0 12px rgba(198, 108, 255, 0.09);
}

.multiplayer-player-slot.is-viewing-results > .multiplayer-player-status {
  color: #e2adff;
}

@media (max-width: 620px) {
  .local-profile-records {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .local-profile-name {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .multiplayer-player-profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Alpha build patch notes and public rooms */
.build-version,
.menu-build-version {
  color: #7fe6d8;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.build-version {
  margin: 12px 0 0;
  text-align: right;
}

.menu-build-version {
  display: block;
  margin-top: 4px;
  text-align: center;
}

.patch-notes-screen {
  background:
    linear-gradient(135deg, rgba(57, 210, 189, 0.08), transparent 34%),
    #0e1418;
}

.patch-notes-panel {
  width: min(760px, 100%);
  border: 1px solid #46545d;
  border-top: 3px solid #39d2bd;
  border-radius: 4px;
  padding: clamp(24px, 5vw, 44px);
  background: #10161a;
  box-shadow: 0 6px 0 #050708, inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
}

.patch-notes-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 0 24px;
  padding-right: 10px;
  scrollbar-color: #39d2bd #090d10;
}

.patch-notes-panel .eyebrow {
  margin: 0 0 6px;
  color: #7fe6d8;
}

.patch-notes-panel h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 8vw, 4.4rem);
  line-height: 0.95;
}

.patch-notes-lead {
  margin: 12px 0 20px;
  color: #d8e6ea;
  font-size: 1.05rem;
}

.patch-notes-panel ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.2rem;
  color: #aebbc1;
  line-height: 1.45;
}

.patch-notes-panel .primary-action {
  width: 100%;
}

.patch-release-current {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(111, 145, 156, 0.28);
}

.patch-release-current h2,
.patch-history-title {
  margin: 0 0 10px;
  color: #e9f7f8;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0;
}

.patch-history-title {
  margin-top: 22px;
}

.patch-history-list {
  display: grid;
  gap: 8px;
}

.patch-release {
  border: 1px solid rgba(104, 137, 148, 0.32);
  border-radius: 4px;
  background: #0b1115;
  overflow: hidden;
  overflow: clip;
}

.patch-release summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 14px;
  color: #aebbc1;
  cursor: pointer;
  list-style: none;
  transition: background 140ms linear, color 140ms linear;
}

.patch-release summary::-webkit-details-marker {
  display: none;
}

.patch-release summary::after {
  content: "+";
  color: #6ee2d2;
  font-size: 1.3rem;
  line-height: 1;
}

.patch-release[open] summary::after {
  content: "-";
}

.patch-release summary:hover,
.patch-release summary:focus-visible {
  background: rgba(57, 210, 189, 0.08);
  color: #dbe9ec;
  outline: none;
}

.patch-release summary strong {
  color: #f1fbfc;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.patch-release summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.patch-notes-panel .patch-release ul {
  gap: 7px;
  margin: 0;
  padding: 2px 34px 14px;
  font-size: 0.92rem;
}

@media (max-width: 600px) {
  .patch-release summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }

  .patch-release summary strong,
  .patch-release summary span {
    grid-column: 1;
  }

  .patch-release summary::after {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

.multiplayer-listing-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #344149;
  padding-bottom: 12px;
}

.multiplayer-listing-header h2,
.multiplayer-listing-header p {
  margin: 0;
}

.multiplayer-listing-header p {
  margin-top: 4px;
  color: #9eafb7;
  font-size: 0.82rem;
}

.multiplayer-listing-header .primary-action {
  min-width: 112px;
}

.multiplayer-public-room-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 470px);
  overflow-y: auto;
  padding-right: 3px;
}

.multiplayer-public-room {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.35fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #3e4b53;
  border-left: 3px solid #39d2bd;
  border-radius: 3px;
  padding: 11px 12px;
  background: #0a1013;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.multiplayer-public-room-identity,
.multiplayer-public-room-details {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.multiplayer-public-room-identity strong,
.multiplayer-public-room-details strong {
  overflow: hidden;
  color: #f4f8f9;
  font-family: var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiplayer-public-room-identity span {
  color: #8ffced;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.multiplayer-public-room-details span {
  overflow: hidden;
  color: #9eafb7;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiplayer-public-room-join {
  min-width: 92px;
}

.multiplayer-room-list-empty {
  display: grid;
  place-content: center;
  min-height: 170px;
  border: 1px dashed #3e4b53;
  color: #9eafb7;
  text-align: center;
}

.multiplayer-room-list-empty strong {
  color: #dfeaed;
  font-family: var(--font-display);
}

.multiplayer-room-list-empty span {
  margin-top: 4px;
  font-size: 0.82rem;
}

#multiplayer-visibility-label {
  color: #8ffced;
}

@media (max-width: 660px) {
  .multiplayer-listing-header {
    align-items: stretch;
    flex-direction: column;
  }

  .multiplayer-public-room {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .multiplayer-public-room-details {
    grid-column: 1;
  }

  .multiplayer-public-room-join {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .multiplayer-lobby-summary {
    align-items: center;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .patch-notes-panel {
    animation: none !important;
  }
}
/* v1.0.4 multiplayer participants and spectators */
.multiplayer-lobby-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(16px, 2.4vw, 28px);
  min-height: min(620px, calc(100vh - 180px));
}

.multiplayer-lobby-controls,
.multiplayer-participants-panel {
  min-width: 0;
}

.multiplayer-lobby-controls {
  display: grid;
  align-content: start;
  gap: 14px;
}

.multiplayer-participants-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  border-left: 1px solid #344149;
  padding-left: clamp(16px, 2.2vw, 26px);
}

.multiplayer-participants-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #344149;
  padding-bottom: 10px;
}

.multiplayer-participants-heading h2 {
  margin: 0;
}

.multiplayer-participants-heading span {
  color: #9fadb4;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.multiplayer-lobby .multiplayer-player-list {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  max-height: min(520px, calc(100vh - 255px));
  overflow-y: auto;
  padding: 2px;
}

.multiplayer-lobby .multiplayer-player-slot {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.multiplayer-player-slot.is-spectator {
  border-left-color: #8270b6;
}

.multiplayer-player-slot.is-host {
  border-top-color: #f0c85b;
}

.multiplayer-player-slot.is-local {
  background: #111b20;
}

.multiplayer-player-slot.is-selected,
.multiplayer-player-slot:hover,
.multiplayer-player-slot:focus-visible {
  border-color: #65f4e0;
  outline: none;
  filter: brightness(1.08);
}

.multiplayer-selected-profile {
  position: absolute;
  inset: 48px 0 0 16px;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid #53636c;
  border-top: 3px solid #65f4e0;
  padding: 18px;
  background: rgba(8, 13, 16, 0.98);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}

.multiplayer-selected-profile[hidden] {
  display: none;
}

.multiplayer-selected-profile > span {
  color: #9fadb4;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.multiplayer-selected-profile h3 {
  margin: 0;
  font-size: 1.55rem;
}

.multiplayer-profile-close {
  justify-self: end;
  border: 1px solid #53636c;
  padding: 6px 11px;
  background: #182229;
  color: #f4f8f9;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.multiplayer-profile-close:hover,
.multiplayer-profile-close:focus-visible {
  border-color: #65f4e0;
  outline: none;
}

.multiplayer-role-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 820px) {
  .multiplayer-lobby-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .multiplayer-participants-panel {
    border-top: 1px solid #344149;
    border-left: 0;
    padding-top: 16px;
    padding-left: 0;
  }

  .multiplayer-lobby .multiplayer-player-list {
    max-height: 320px;
  }

  .multiplayer-selected-profile {
    inset: 56px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attack-queue-packet.is-timeout-warning .queue-packet-sprite.is-current,
  .attack-queue-packet.is-timeout-warning span {
    animation: none;
    filter: brightness(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .duel-damage-band {
    animation: none !important;
    transition-duration: 40ms !important;
  }

  .duel-cancel-projection,
  .duel-damage-erase,
  .duel-shield-meter.is-hit .duel-shield-track {
    animation-duration: 120ms !important;
  }
}

/* v1.0.10 menu and tutorial transition overrides */
.is-menu-simple-leaving {
  animation: menu-simple-out 110ms ease-in both;
  pointer-events: none;
}

.is-menu-simple-arriving {
  animation: menu-simple-in 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes menu-simple-out {
  to {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes menu-simple-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#battle-menu-page,
#ai-duel-mode-page {
  grid-template-columns: repeat(2, minmax(260px, 420px));
  grid-template-areas:
    "title title"
    "left right"
    "back back";
  justify-content: center;
  align-content: center;
  gap: clamp(18px, 3vw, 38px);
}

#battle-menu-page .menu-page-title,
#ai-duel-mode-page .menu-page-title {
  grid-area: title;
}

#battle-ai-duel-button,
#ai-duel-standard-button {
  grid-area: left;
}

#battle-multiplayer-button,
#ai-duel-turn-based-button {
  grid-area: right;
}

#battle-menu-page .main-menu-back,
#ai-duel-mode-page .main-menu-back {
  grid-area: back;
  width: min(220px, 100%);
  justify-self: center;
}

@media (max-width: 760px), (pointer: coarse) {
  #battle-menu-page,
  #ai-duel-mode-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  #battle-menu-page > *,
  #ai-duel-mode-page > * {
    grid-area: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-menu-simple-leaving,
  .is-menu-simple-arriving {
    animation-duration: 70ms !important;
    transform: none !important;
  }
}

/* Combat HUD refinement: board-edge tempo rails and quieter lower readouts. */
.app-shell.is-ai-duel .duel-arena {
  --duel-board-width: min(
    calc((100vh - 7.2rem) * 0.8),
    calc((100vw - var(--duel-status-width) * 2 - 5rem) / 2),
    46rem
  );
  grid-template-rows: minmax(0, auto) clamp(4.65rem, 8.5vh, 5.55rem);
  grid-template-areas:
    "player-hud player-board ai-board ai-hud"
    ". player-lower ai-lower .";
}

.app-shell.is-ai-duel .duel-tempo-base {
  grid-column: 1;
  grid-row: 1;
  z-index: 8;
  align-self: end;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.38rem;
  width: var(--duel-status-width);
  margin: 0 0 0.25rem;
  white-space: normal;
  pointer-events: none;
}

.app-shell.is-ai-duel .duel-tempo-base .duel-tempo-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}

.app-shell.is-ai-duel .duel-tempo-base .duel-tempo-central-drain {
  margin: 0;
  padding: 0;
  border: 0;
}

.app-shell.is-ai-duel .duel-tempo-base .multiplayer-net-status {
  max-width: 100%;
  padding: 0;
  border: 0;
  white-space: normal;
}

.app-shell.is-ai-duel .duel-tempo-player-drain,
.app-shell.is-ai-duel .duel-tempo-ai-drain {
  z-index: 8;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.16rem;
  margin: 0;
  pointer-events: none;
}

.app-shell.is-ai-duel .duel-tempo-player-drain {
  grid-column: 1;
  justify-self: start;
}

.app-shell.is-ai-duel .duel-tempo-ai-drain {
  grid-column: 4;
  justify-self: end;
  align-items: flex-end;
}

.app-shell.is-ai-duel .duel-tempo-panel .duel-clock-value {
  font-size: clamp(0.86rem, 1.2vw, 1.05rem);
}

.app-shell.is-ai-duel .duel-hud-row,
.app-shell.is-ai-duel .ai-duel-panel .duel-hud-row {
  grid-template-rows:
    minmax(1.72rem, 2.16rem)
    minmax(0.78rem, 1.02rem)
    minmax(1.42rem, 1.62rem);
}

.app-shell.is-ai-duel .duel-queue {
  height: 1.62rem;
  min-height: 1.42rem;
}

.app-shell.is-ai-duel .duel-queue .attack-queue-packet {
  width: clamp(2.7rem, 11.5%, 3.65rem);
  height: 1.55rem;
  padding-inline: 0.42rem;
  font-size: clamp(0.58rem, 0.82vw, 0.72rem);
}

.app-shell.is-ai-duel .duel-hp strong {
  color: rgba(255, 255, 255, 0.48);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 4px rgba(0, 0, 0, 0.98),
    1px 0 1px rgba(0, 0, 0, 0.96),
    -1px 0 1px rgba(0, 0, 0, 0.96);
}

.app-shell.is-ai-duel .duel-shield-meter::before {
  color: rgba(255, 255, 255, 0.46);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 4px rgba(0, 0, 0, 0.98);
}

.app-shell.is-ai-duel .duel-bar-delta {
  --delta-x: calc(-100% - 0.45rem);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  text-align: right;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 0.88);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-bar-delta {
  --delta-x: calc(100% + 0.45rem);
  text-align: left;
}

.app-shell.is-ai-duel .duel-bar-delta.is-heal {
  color: #72efa9;
}

.app-shell.is-ai-duel .duel-bar-delta.is-damage {
  color: #ff7183;
}

/* Tutorial combat examples now use the same horizontal defensive HUD language. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns:
    calc(var(--tutorial-combat-tile) * 8 + 18px)
    minmax(20rem, 38rem);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "board dialogue"
    "hud dialogue"
    "right right";
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  grid-area: hud;
  display: grid;
  grid-template-rows: auto auto;
  align-self: start;
  justify-self: stretch;
  width: calc(var(--tutorial-combat-tile) * 8 + 18px);
  max-width: 100%;
  height: auto;
  padding: 0.2rem 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-status-panel {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-status-panel {
  display: block;
  width: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-counter-stack {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hud-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 2rem 1rem 1.55rem;
  grid-template-areas:
    "hp"
    "shield"
    "queue";
  gap: 0.22rem;
  width: 100%;
  height: auto;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-hp-only,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-shield-only {
  justify-self: stretch;
  width: calc(var(--tutorial-combat-tile) * 8 + 18px);
  max-width: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-hp-only .duel-hud-row {
  grid-template-rows: 2rem;
  grid-template-areas: "hp";
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-no-shield:not(.is-tutorial-hp-only) .duel-hud-row {
  grid-template-rows: 2rem 1.55rem;
  grid-template-areas:
    "hp"
    "queue";
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-shield-only .duel-hud-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1rem;
  grid-template-areas: "shield";
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hud-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 2rem 1rem 1.55rem;
  grid-template-areas:
    "hp"
    "shield"
    "queue";
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-shield-only .duel-hud-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1rem;
  grid-template-areas: "shield";
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-queue {
  grid-area: queue;
  position: relative;
  display: block;
  width: 100%;
  height: 1.55rem;
  min-height: 1.55rem;
  overflow: visible;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-queue .attack-queue-packet {
  right: auto;
  left: 0;
  width: clamp(2.7rem, 11.5%, 3.65rem);
  height: 1.55rem;
  padding-inline: 0.42rem;
  font-size: clamp(0.58rem, 0.82vw, 0.72rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp {
  grid-area: hp;
  position: relative;
  display: block;
  width: 100%;
  height: 2rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp > span,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-meter > span {
  position: absolute;
  top: 50%;
  left: 0.35rem;
  z-index: 8;
  font-size: 0.48rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp > div:not(.duel-bar-delta) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp i {
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #59c75e;
  transform: scaleX(var(--duel-hp, 1));
  transform-origin: left center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp strong {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.48);
  font-size: 1.08rem;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 4px rgba(0, 0, 0, 0.98);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-meter {
  grid-area: shield;
  position: relative;
  display: block;
  width: 100%;
  height: 1rem;
  padding: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-shield-meter {
  display: block;
  grid-template-rows: none;
  gap: 0;
  align-self: auto;
  width: 100%;
  height: 1rem;
  min-height: 0;
  padding: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-track::before {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--shield-fill, 0));
  transform-origin: left center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-meter::before {
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.72rem;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 4px rgba(0, 0, 0, 0.98);
  transform: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-meter::after {
  top: 50%;
  right: 0.35rem;
  bottom: auto;
  transform: translateY(-50%);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-marker {
  top: 0;
  bottom: 0;
  right: auto;
  left: var(--marker-x);
  width: 1px;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-marker::after {
  content: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-current-threshold {
  position: absolute;
  bottom: calc(100% + 0.08rem);
  left: var(--current-threshold-x, 0%);
  z-index: 12;
  color: rgba(206, 248, 255, 0.82);
  font-size: 0.5rem;
  font-weight: 900;
  transform: translateX(-50%);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-bar-delta {
  --delta-x: -108%;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 14;
  width: max-content;
  min-width: 3.2rem;
  min-height: 0;
  font-size: clamp(0.86rem, 1.35vw, 1.08rem);
  font-weight: 950;
  text-align: center;
  opacity: 0;
  transform: translateX(var(--delta-x)) translateY(-50%);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-bar-delta.is-visible,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-meter > .duel-bar-delta.is-visible {
  animation: duel-bar-delta-horizontal 1280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-bar-delta.is-damage.is-visible,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-meter > .duel-bar-delta.is-damage.is-visible {
  animation: duel-bar-delta-damage-impact 1280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-damage-band,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-cancel-projection,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-damage-erase {
  top: 0;
  right: auto;
  bottom: 0;
  height: 100%;
  transform-origin: right center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-damage-erase {
  animation-name: duel-horizontal-projection-out;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  position: static;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-status-panel {
  top: 0.5rem;
  right: auto;
  bottom: auto;
  left: 0.5rem;
}

/* Duel side telemetry: compact arcade readouts alongside the dominant boards. */
.app-shell.is-ai-duel .duel-arena {
  --duel-status-width: clamp(12rem, 11.5vw, 13.5rem);
  --duel-gap: clamp(0.85rem, 1.35vw, 1.65rem);
  --duel-board-width: min(
    calc((100vh - 7.2rem) * 0.8),
    calc((100vw - var(--duel-status-width) * 2 - 5rem) / 2),
    46rem
  );
}

.app-shell.is-ai-duel .duel-tempo-base .duel-tempo-readout,
.app-shell.is-ai-duel .duel-tempo-player-drain,
.app-shell.is-ai-duel .duel-tempo-ai-drain {
  display: none;
}

.app-shell.is-ai-duel .duel-status-panel {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  gap: clamp(0.42rem, 0.8vh, 0.7rem);
  padding: 0.15rem 0;
}

.app-shell.is-ai-duel .duel-status-heading {
  order: 0;
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(5.7rem, 6.2rem);
  align-items: start;
  gap: 0.35rem;
  width: 100%;
}

.app-shell.is-ai-duel .duel-status-heading .duel-board-label {
  position: static;
  display: block;
  grid-area: auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.3rem 0.28rem;
  border: 1px solid rgba(126, 225, 255, 0.42);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(30, 58, 68, 0.88), rgba(12, 25, 32, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 8px rgba(70, 207, 212, 0.12);
  color: rgba(248, 253, 255, 0.96);
  font-size: clamp(0.62rem, 0.72vw, 0.78rem);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell.is-ai-duel .duel-status-heading .duel-b2b,
.app-shell.is-ai-duel .duel-status-panel .duel-b2b {
  width: 100%;
  max-width: 6.2rem;
}

.app-shell.is-ai-duel .duel-status-heading .duel-b2b strong {
  font-size: clamp(1.78rem, 2.18vw, 2.32rem);
  line-height: 0.94;
  text-shadow: 0 0 10px rgba(115, 232, 244, 0.26), 0 2px 4px rgba(0, 0, 0, 0.92);
}

.app-shell.is-ai-duel .player-duel-panel .duel-status-heading .duel-board-label {
  grid-column: 1;
}

.app-shell.is-ai-duel .player-duel-panel .duel-status-heading .duel-b2b {
  grid-column: 2;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading {
  grid-template-columns: minmax(5.7rem, 6.2rem) minmax(5.5rem, 1fr);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading .duel-b2b {
  grid-column: 1;
  grid-row: 1;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading .duel-board-label {
  grid-column: 2;
  grid-row: 1;
}

.app-shell.is-ai-duel .duel-live-stats {
  --duel-stat-slot-height: clamp(2.65rem, 4.8vh, 3.15rem);
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  gap: clamp(0.34rem, 0.62vh, 0.52rem);
  color: #f4f8fb;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-live-stats {
  align-items: flex-start;
}

.app-shell.is-ai-duel .duel-live-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: var(--duel-stat-slot-height);
  min-width: 0;
  text-align: right;
  line-height: 1;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-live-stat {
  text-align: left;
}

.app-shell.is-ai-duel .duel-live-stat > span {
  display: block;
  margin-bottom: 0.08rem;
  color: rgba(218, 231, 239, 0.68);
  font-size: clamp(0.48rem, 0.52vw, 0.58rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-shell.is-ai-duel .duel-live-stat > div {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.26rem;
  min-width: 0;
  white-space: nowrap;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-live-stat > div {
  justify-content: flex-start;
}

.app-shell.is-ai-duel .duel-live-stat strong {
  color: #ffffff;
  font-size: clamp(1.28rem, 1.72vw, 1.82rem);
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.app-shell.is-ai-duel .duel-live-stat small {
  color: rgba(230, 240, 246, 0.72);
  font-size: clamp(0.48rem, 0.58vw, 0.65rem);
  font-weight: 850;
  letter-spacing: 0;
}

.app-shell.is-ai-duel .duel-live-stat.is-time {
  margin-top: 0;
}

.app-shell.is-ai-duel .duel-live-stat-spacer {
  flex: 0 0 var(--duel-stat-slot-height);
  width: 100%;
  height: var(--duel-stat-slot-height);
}

.app-shell.is-ai-duel .duel-live-stat.is-time strong {
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
}

.app-shell.is-ai-duel .duel-live-stat.is-time strong.is-clock {
  font-size: clamp(1.28rem, 1.72vw, 1.82rem);
  line-height: 1;
}

.app-shell.is-ai-duel .duel-live-stat strong.is-phase-2 {
  color: #f5dfa2;
}

.app-shell.is-ai-duel .duel-live-stat strong.is-phase-3,
.app-shell.is-ai-duel .duel-live-stat strong.is-overtime,
.app-shell.is-ai-duel .duel-live-stat strong.is-boosted,
.app-shell.is-ai-duel .duel-live-stat strong.is-clock-low {
  color: #ff9da8;
  text-shadow: 0 0 8px rgba(255, 104, 119, 0.3), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.app-shell.is-ai-duel .duel-live-stat strong.is-clock {
  display: inline-block;
  box-sizing: border-box;
  min-inline-size: 4.65em;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 5px;
}

.app-shell.is-ai-duel .duel-live-stat strong.is-clock-active {
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: #f5f7f8;
  color: #111518;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.28);
}

.app-shell.is-ai-duel .duel-live-stat strong.is-clock-low:not(.is-clock-active) {
  color: #ff9da8;
  text-shadow: 0 0 8px rgba(255, 104, 119, 0.38), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.app-shell.is-ai-duel .duel-live-stat strong.is-clock-overtime:not(.is-clock-active) {
  color: #d7193f;
  text-shadow: 0 0 10px rgba(215, 25, 63, 0.55), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.app-shell.is-ai-duel .duel-live-stat strong.is-clock-active.is-clock-low {
  border-color: #ffb8c0;
  background: #ffb8c0;
  color: #2b0c11;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(255, 126, 143, 0.5);
}

.app-shell.is-ai-duel .duel-live-stat strong.is-clock-active.is-clock-overtime {
  border-color: #a4001e;
  background: #a4001e;
  color: #ffffff;
  animation: duel-clock-overtime-flash 620ms ease-in-out infinite alternate;
}

@keyframes duel-clock-overtime-flash {
  from {
    filter: brightness(0.9);
    box-shadow: 0 0 8px rgba(190, 0, 38, 0.45);
  }
  to {
    filter: brightness(1.28);
    box-shadow: 0 0 20px rgba(255, 30, 70, 0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .duel-tempo-panel .is-clock-active.is-clock-overtime .duel-clock-value,
  .app-shell.is-ai-duel .duel-live-stat strong.is-clock-active.is-clock-overtime {
    animation: none;
    box-shadow: 0 0 12px rgba(255, 30, 70, 0.7);
  }
}


.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
  order: 1;
  margin-top: 0.15rem;
}

.app-shell.is-tutorial .duel-live-stats,
.app-shell.is-tutorial .duel-status-heading .duel-board-label {
  display: none;
}

@media (max-width: 860px) {
  .app-shell.is-ai-duel .duel-status-panel,
  .app-shell.is-ai-duel .ai-duel-panel .duel-status-panel {
    flex-direction: column;
    align-items: stretch;
    width: var(--duel-board-width);
    height: auto;
  }

  .app-shell.is-ai-duel .duel-status-heading {
    grid-template-columns: minmax(0, 1fr) minmax(4.2rem, 5rem);
  }

  .app-shell.is-ai-duel .duel-live-stats,
  .app-shell.is-ai-duel .ai-duel-panel .duel-live-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 0.35rem;
    margin-top: 0;
  }

  .app-shell.is-ai-duel .duel-live-stat-spacer {
    display: none;
  }

  .app-shell.is-ai-duel .duel-live-stat {
    height: auto;
    min-height: 0;
  }

  .app-shell.is-ai-duel .duel-live-stat,
  .app-shell.is-ai-duel .ai-duel-panel .duel-live-stat {
    text-align: center;
  }

  .app-shell.is-ai-duel .duel-live-stat > div,
  .app-shell.is-ai-duel .ai-duel-panel .duel-live-stat > div {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.12rem;
  }

  .app-shell.is-ai-duel .duel-live-stat.is-time {
    margin-top: 0;
  }

  .app-shell.is-ai-duel .duel-live-stat strong {
    font-size: clamp(0.9rem, 4vw, 1.25rem);
  }

  .app-shell.is-ai-duel .duel-live-stat.is-time strong {
    font-size: clamp(0.72rem, 3.2vw, 1rem);
  }
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .duel-tempo-base {
  grid-area: hud;
  align-self: start;
  justify-self: start;
}

@media (max-width: 860px) {
  .app-shell.is-ai-duel .duel-arena {
    --duel-board-width: min(31rem, calc(100vw - 2rem));
    grid-template-rows:
      auto auto minmax(0, auto) clamp(4.65rem, 8.5vh, 5.55rem)
      auto minmax(0, auto) clamp(4.65rem, 8.5vh, 5.55rem);
    grid-template-areas:
      "player-tempo"
      "player-hud"
      "player-board"
      "player-lower"
      "ai-hud"
      "ai-board"
      "ai-lower";
  }

  .app-shell.is-ai-duel .duel-tempo-base {
    grid-area: player-tempo;
    flex-direction: row;
    align-items: baseline;
    justify-self: start;
    width: auto;
    margin: 0;
  }

  .app-shell.is-ai-duel .duel-tempo-base .duel-tempo-readout {
    flex-direction: row;
    align-items: baseline;
  }

  .app-shell.is-ai-duel .duel-tempo-player-drain {
    grid-area: player-hud;
    align-self: end;
    justify-self: end;
  }

  .app-shell.is-ai-duel .duel-tempo-ai-drain {
    grid-area: ai-hud;
    align-self: end;
    justify-self: end;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "dialogue"
      "board"
      "hud"
      "right";
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-hp-only,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-shield-only {
    justify-self: center;
    width: min(100%, calc(var(--tutorial-combat-tile) * 8 + 18px));
  }
}

/* Combat HUD text separation and tutorial MULT placement cleanup. */
.app-shell.is-ai-duel .duel-hp strong {
  color: #ffffff;
  font-size: clamp(1.16rem, 1.9vw, 1.56rem);
  opacity: 0.52;
}

.app-shell.is-ai-duel .duel-shield-meter::before {
  color: #ffffff;
  opacity: 0.32;
}

.app-shell.is-ai-duel .duel-shield-current-threshold {
  display: block;
  top: calc(100% + 0.12rem);
  bottom: auto;
  line-height: 1;
}

.app-shell.is-ai-duel .duel-bar-delta,
.app-shell.is-ai-duel .duel-shield-meter > .duel-bar-delta {
  position: absolute !important;
  display: block;
  top: 50%;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 1em !important;
  max-height: 1em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(0.72rem, 0.92vw, 0.86rem);
  line-height: 1;
  white-space: nowrap;
}

.app-shell.is-ai-duel .player-duel-panel .duel-bar-delta,
.app-shell.is-ai-duel .player-duel-panel .duel-shield-meter > .duel-bar-delta {
  right: auto !important;
  left: 0 !important;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-bar-delta,
.app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter > .duel-bar-delta {
  right: 0 !important;
  left: auto !important;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp strong {
  color: #ffffff;
  opacity: 0.34;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-meter::before {
  color: #ffffff;
  opacity: 0.32;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-current-threshold {
  display: block;
  top: calc(100% + 0.12rem);
  bottom: auto;
  line-height: 1;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  position: relative;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-status-panel {
  position: absolute;
  right: calc(100% + 0.7rem);
  bottom: 0;
  z-index: 10;
  width: 5.4rem;
  margin: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-b2b {
  width: 100%;
  max-width: 5.4rem;
}

@media (max-width: 860px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-status-panel {
    position: static;
    width: 100%;
    margin-bottom: 0.3rem;
  }
}

/* Tutorial combat sizing and defensive HUD timing follow-up. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo.is-tutorial-hp-only .duel-hud-row {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  margin-top: 0;
}

.app-shell.is-ai-duel .duel-shield-marker,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-marker {
  z-index: 4;
  width: 1px;
  background: rgba(244, 253, 255, 0.5);
  box-shadow: none;
}

.app-shell.is-ai-duel .duel-shield-marker.is-current,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-marker.is-current {
  width: 1px;
  background: rgba(244, 253, 255, 0.5);
  box-shadow: none;
}

.app-shell.is-ai-duel .duel-shield-marker::after,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-marker::after {
  content: none;
}

.app-shell.is-ai-duel .duel-shield-threshold-labels,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-threshold-labels {
  position: absolute;
  top: calc(100% + 0.14rem);
  right: 0;
  left: 0;
  z-index: 12;
  height: 0.55rem;
  overflow: visible;
  pointer-events: none;
}

.app-shell.is-ai-duel .duel-shield-threshold-labels > span,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-threshold-labels > span {
  position: absolute;
  left: var(--threshold-x);
  color: rgba(206, 248, 255, 0.76);
  font-size: clamp(0.42rem, 0.58vw, 0.52rem);
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96);
  transform: translateX(-50%);
}

.app-shell.is-ai-duel .player-duel-panel .duel-shield-threshold-labels > span:first-child,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-threshold-labels > span:first-child {
  transform: translateX(-20%);
}

.app-shell.is-ai-duel .player-duel-panel .duel-shield-threshold-labels > span:last-child,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-threshold-labels > span:last-child {
  transform: translateX(-100%);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-shield-threshold-labels > span {
  right: var(--threshold-x);
  left: auto;
  transform: translateX(50%);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-shield-threshold-labels > span:first-child {
  transform: translateX(20%);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-shield-threshold-labels > span:last-child {
  transform: translateX(100%);
}

.app-shell.is-ai-duel .duel-shield-current-threshold,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-current-threshold {
  display: none;
}

/* Responsive duel HUD alignment: keep combat readouts bound to board geometry. */
@media (min-width: 861px) {
  .app-shell.is-ai-duel .duel-arena {
    grid-template-rows: auto auto;
    row-gap: 0;
    align-content: start;
  }

  .app-shell.is-ai-duel .duel-status-panel {
    box-sizing: border-box;
    contain: size;
    height: auto;
    max-height: none;
    align-self: stretch;
    overflow: visible;
  }

  .app-shell.is-ai-duel .duel-hud-row,
  .app-shell.is-ai-duel .ai-duel-panel .duel-hud-row {
    height: auto;
    margin-top: 0;
    padding-top: clamp(0.08rem, 0.18vh, 0.16rem);
  }
}

@media (min-width: 861px) and (max-width: 1200px) {
  .app-shell.is-ai-duel .duel-status-panel {
    gap: 0.2rem;
  }

  .app-shell.is-ai-duel .duel-live-stats {
    --duel-stat-slot-height: clamp(1.25rem, 3.2vh, 1.55rem);
    gap: 0.16rem;
  }

  .app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
    gap: 0.18rem;
  }

  .app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .combo-counter,
  .app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .chain-counter {
    min-height: 1.55rem;
    padding: 0.15rem 0.28rem;
  }
}

.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
  margin-top: 0;
}

.app-shell.is-ai-duel .player-duel-panel .duel-status-panel .duel-counter-stack {
  align-self: flex-end;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-panel .duel-counter-stack {
  align-self: flex-start;
}

.app-shell.is-ai-duel .duel-live-stats {
  min-height: 0;
}

.app-shell.is-ai-duel .duel-live-stats .duel-live-stat:last-child {
  margin-top: auto;
}

.app-shell.is-ai-duel .duel-hp strong {
  color: #ffffff;
  opacity: 0.74;
}

.app-shell.is-ai-duel .duel-shield-threshold-labels,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-shield-threshold-labels {
  display: none !important;
}

.duel-lower-board-label {
  display: none;
}

/* Ample-height duel layouts move names below SHIELD and return width to boards. */
@media (min-width: 861px) and (min-height: 680px) {
  .app-shell.is-ai-duel .duel-arena {
    --duel-status-width: clamp(7.5rem, 8.2vw, 9rem);
    --duel-board-width: min(
      calc((100vh - 8.65rem) * 0.8),
      calc((100vw - var(--duel-status-width) * 2 - 5rem) / 2),
      46rem
    );
  }

  .app-shell.is-ai-duel .duel-status-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.is-ai-duel .duel-status-heading .duel-board-label {
    display: none;
  }

  .app-shell.is-ai-duel .player-duel-panel .duel-status-heading .duel-b2b,
  .app-shell.is-ai-duel .ai-duel-panel .duel-status-heading .duel-b2b {
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
  }

  .app-shell.is-ai-duel .duel-hud-row,
  .app-shell.is-ai-duel .ai-duel-panel .duel-hud-row {
    grid-template-rows:
      minmax(1.72rem, 2.16rem)
      minmax(0.78rem, 1.02rem)
      minmax(1.15rem, 1.35rem)
      minmax(1.42rem, 1.62rem);
    grid-template-areas:
      "hp"
      "shield"
      "queue"
      "name";
  }

  .app-shell.is-ai-duel .duel-lower-board-label {
    grid-area: name;
    display: block;
    align-self: center;
    justify-self: center;
    width: min(72%, 18rem);
    min-width: 0;
    padding: 0.14rem 0.6rem;
    border: 1px solid rgba(126, 225, 255, 0.34);
    border-radius: 3px;
    background: rgba(12, 25, 32, 0.78);
    color: rgba(248, 253, 255, 0.92);
    font-size: clamp(0.58rem, 0.72vw, 0.76rem);
    font-weight: 850;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@keyframes duel-bar-delta-damage-impact {
  0% {
    opacity: 0.94;
    transform: translateX(var(--delta-x)) translateY(-50%) scale(0.9);
  }
  8% {
    opacity: 1;
    transform: translateX(var(--delta-x)) translateY(-50%) scale(1.14);
  }
  68% {
    opacity: 1;
    transform: translateX(var(--delta-x)) translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--delta-x)) translateY(-72%) scale(0.96);
  }
}

.app-shell.is-ai-duel .duel-bar-delta.is-damage.is-visible,
.app-shell.is-ai-duel .duel-shield-meter > .duel-bar-delta.is-damage.is-visible {
  animation: duel-bar-delta-damage-impact 1280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
  row-gap: clamp(1rem, 2vh, 1.35rem);
}

/* Recategorised Tests: three knowledge groups collapse progressively. */
.challenge-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1180px) and (min-width: 761px) {
  .challenge-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .challenge-menu-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.challenge-entry-actions {
  display: grid;
  align-content: center;
  gap: 6px;
}

.challenge-entry-actions > button {
  width: 100%;
  min-height: 34px;
}

/* Multiplayer Tests keep the Tutorial shell and borrow only the live Duel HUD geometry. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
  --test-status-width: clamp(5.5rem, 7vw, 7rem);
  --test-panel-width: clamp(10.5rem, 16vw, 14rem);
  --test-board-width: min(
    calc((100vh - 10.5rem) * 0.8),
    calc(100vw - var(--test-status-width) - var(--test-panel-width) - 6.5rem),
    38rem
  );
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--test-panel-width);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "test-play test-panel";
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.7rem, 1.4vw, 1.15rem);
  width: 100%;
  min-height: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
  grid-area: test-play;
  display: grid;
  grid-template-columns: var(--test-status-width) minmax(0, var(--test-board-width));
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "player-hud player-board"
    "player-hud player-lower";
  align-items: stretch;
  justify-content: end;
  gap: clamp(0.4rem, 0.9vw, 0.8rem) clamp(0.6rem, 1.15vw, 0.95rem);
  min-width: 0;
  min-height: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel {
  display: contents;
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
  grid-area: player-hud;
  display: flex;
  align-self: stretch;
  width: 100%;
  max-width: none;
  padding: 0.4rem 0.2rem;
  background: transparent;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  grid-area: player-lower;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(1.8rem, 2.35rem) minmax(0.82rem, 1.15rem) minmax(1.8rem, 2rem);
  grid-template-areas:
    "hp"
    "shield"
    "queue";
  gap: clamp(0.18rem, 0.4vh, 0.3rem);
  width: 100%;
  height: auto;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield:not(.challenge-hide-queue) .duel-hud-row {
  grid-template-rows: minmax(1.8rem, 2.35rem) minmax(1.8rem, 2rem);
  grid-template-areas:
    "hp"
    "queue";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-queue:not(.challenge-hide-shield) .duel-hud-row {
  grid-template-rows: minmax(1.8rem, 2.35rem) minmax(0.82rem, 1.15rem);
  grid-template-areas:
    "hp"
    "shield";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield.challenge-hide-queue:not(.challenge-hide-hp) .duel-hud-row {
  grid-template-rows: minmax(1.8rem, 2.35rem);
  grid-template-areas: "hp";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-hp.challenge-hide-shield.challenge-hide-queue .duel-hud-row {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container {
  grid-area: player-board;
  align-self: center;
  justify-self: end;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge canvas {
  width: var(--test-board-width);
  max-width: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .ai-board-container,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .ai-duel-panel,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-tempo-panel {
  display: none !important;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
  position: relative;
  grid-area: test-panel;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  padding: clamp(0.7rem, 1.2vw, 1rem);
  border: 1px solid rgba(210, 233, 255, 0.14);
  background: linear-gradient(180deg, rgba(16, 22, 30, 0.92), rgba(7, 11, 17, 0.9));
}
.app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel .tutorial-actions {
  position: relative;
  margin-top: auto;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge:not(.is-turn-based) .duel-live-stats {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge.is-turn-based .duel-live-stats {
  display: flex;
}

.tutorial-popup.is-challenge-menu-popup {
  position: relative;
}

.tutorial-popup.is-challenge-menu-popup > .challenge-menu-back {
  position: absolute;
  top: clamp(2.75rem, 5.6vh, 3.5rem);
  right: clamp(1rem, 2.5vw, 2rem);
  z-index: 20;
  width: clamp(9rem, 13vw, 12rem);
  min-height: clamp(2.8rem, 5.5vh, 3.5rem);
}

@media (max-width: 760px) {
  .tutorial-popup.is-challenge-menu-popup {
    padding-top: 4.75rem;
  }

  .tutorial-popup.is-challenge-menu-popup > .challenge-menu-back {
    top: 0.85rem;
    right: 0.85rem;
    width: min(9rem, calc(50% - 1rem));
    min-height: 2.6rem;
  }
}

@media (max-width: 850px) {
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
    --test-board-width: min(30rem, calc(100vw - 2rem));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "test-play"
      "test-panel";
    min-height: 0;
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "player-hud"
      "player-board"
      "player-lower";
    justify-content: center;
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
    min-height: 5rem;
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container {
    justify-self: center;
  }
}

/* Tutorial multiplayer Tests: shared test shell with a centred combat unit. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
  --test-status-width: clamp(7rem, 8vw, 8.75rem);
  --test-panel-width: clamp(10.5rem, 16vw, 14rem);
  --test-board-width: min(
    calc((100vh - 13rem) * 0.8),
    calc(100vw - var(--test-status-width) - var(--test-panel-width) - 7.5rem),
    36rem
  );
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--test-panel-width);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "test-play test-panel";
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(0.75rem, 1.4vw, 1.2rem);
  width: 100%;
  min-height: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
  grid-area: test-play;
  display: grid;
  grid-template-columns: var(--test-status-width) minmax(0, var(--test-board-width));
  grid-template-rows: auto auto;
  grid-template-areas:
    "player-hud player-board"
    "player-hud player-lower";
  place-self: center;
  align-items: start;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  gap: clamp(0.25rem, 0.5vh, 0.4rem) clamp(0.65rem, 1.1vw, 1rem);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel {
  display: contents;
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
  grid-area: player-hud;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.15rem 0;
  background: transparent;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stats {
  display: flex;
  margin-top: auto;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat[hidden],
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat-spacer[hidden],
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .combo-counter[hidden],
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .chain-counter[hidden] {
  display: none !important;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container {
  grid-area: player-board;
  align-self: start;
  justify-self: stretch;
  width: var(--test-board-width);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  grid-area: player-lower;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(1.8rem, 2.35rem) minmax(0.82rem, 1.15rem) minmax(1.8rem, 2rem);
  grid-template-areas:
    "hp"
    "shield"
    "queue";
  align-self: start;
  width: var(--test-board-width);
  height: auto;
  min-height: 0;
  gap: clamp(0.18rem, 0.4vh, 0.3rem);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-meter,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-queue {
  width: 100%;
  min-width: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield:not(.challenge-hide-queue) .duel-hud-row {
  grid-template-rows: minmax(1.8rem, 2.35rem) minmax(1.8rem, 2rem);
  grid-template-areas: "hp" "queue";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-queue:not(.challenge-hide-shield) .duel-hud-row {
  grid-template-rows: minmax(1.8rem, 2.35rem) minmax(0.82rem, 1.15rem);
  grid-template-areas: "hp" "shield";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield.challenge-hide-queue:not(.challenge-hide-hp) .duel-hud-row {
  grid-template-rows: minmax(1.8rem, 2.35rem);
  grid-template-areas: "hp";
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-hp.challenge-hide-shield.challenge-hide-queue .duel-hud-row {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-lower-board-label,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-pause-rail,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .ai-board-container,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .ai-duel-panel,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-tempo-panel {
  display: none !important;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
  grid-area: test-panel;
  align-self: stretch;
}

@media (max-width: 850px) {
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
    --test-board-width: min(28rem, calc(100vw - 2rem));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "test-play" "test-panel";
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
    grid-template-columns: minmax(0, var(--test-board-width));
    grid-template-rows: auto auto auto;
    grid-template-areas: "player-hud" "player-board" "player-lower";
    width: var(--test-board-width);
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
    min-height: 0;
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0;
  }
}
/* Tutorial HP width consistency: board and defensive HUD share one track. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-rows: minmax(0, 1fr) max-content auto;
  align-items: stretch;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-board-container {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  align-self: stretch;
  place-items: end center;
  container-type: size;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) #game-board {
  width: min(100cqw, 80cqh) !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 5;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  min-height: 0;
  margin: 0;
  padding-right: 0;
  padding-left: 0;
  align-self: start;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hud-row,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hp,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hp > div:not(.duel-bar-delta) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
  grid-template-columns: var(--test-status-width) var(--test-board-width);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp > div:not(.duel-bar-delta) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

@media (max-width: 850px) {
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
    grid-template-columns: var(--test-board-width);
  }
}

/* Shared Singleplayer/Test playfield allocation.
 * The canvas measures its actual grid cell, while the existing score elements
 * become a compact live-stat rail in the same visual hierarchy as Duel HUDs.
 */
:root {
  --single-status-width: clamp(7rem, 9.5vw, 9.25rem);
  --single-play-gap: clamp(0.45rem, 1vw, 0.8rem);
  --single-test-panel-width: clamp(9rem, 14vw, 13rem);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  --single-play-board-size: min(
    var(--single-board-max),
    calc(80dvh - 4rem),
    calc(100vw - var(--single-status-width) - var(--single-play-gap) - 3rem)
  );
}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  --single-play-board-size: min(
    var(--single-board-max),
    calc(80dvh - 5.6rem),
    calc(100vw - var(--single-status-width) - var(--single-play-gap) - 3rem)
  );
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .play-panel {
  --single-test-board-size: min(
    var(--single-board-max),
    calc(80dvh - 3.6rem),
    calc(
      100vw - var(--single-status-width) - var(--single-test-panel-width)
      - (var(--single-play-gap) * 2) - 3rem
    )
  );
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip,
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip,
.training-score-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  gap: clamp(0.42rem, 0.8vh, 0.65rem);
  color: #f4f8fb;
  font-variant-numeric: tabular-nums;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div,
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip > div,
.training-score-rail > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
  gap: 0.08rem;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: right;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:nth-child(2),
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:nth-child(3),
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip > div:nth-child(2),
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip > div:nth-child(3) {
  display: none;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip span,
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip span,
.training-score-rail span {
  color: rgba(218, 231, 239, 0.68);
  font-size: clamp(0.5rem, 0.55vw, 0.62rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip strong,
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip strong,
.training-score-rail strong,
.training-score-primary strong,
.training-score-secondary strong {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.25rem, 1.72vw, 1.82rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:first-child strong,
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip > div:first-child strong,
.training-score-primary strong {
  color: #ffe477;
  font-size: clamp(1.65rem, 2.25vw, 2.2rem);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 208, 82, 0.22);
}

.training-score-primary .training-score-best {
  align-self: flex-end;
}

.training-score-primary {
  order: 0;
  padding-bottom: clamp(0.16rem, 0.35vh, 0.28rem) !important;
}

.training-score-primary strong {
  font-size: clamp(1.82rem, 2.45vw, 2.38rem);
}

.training-score-secondary {
  order: 1;
}

.training-score-secondary strong {
  font-size: clamp(1.12rem, 1.45vw, 1.48rem);
}

@media (max-width: 760px) {
  :root {
    --single-status-width: clamp(5.8rem, 21vw, 7rem);
  }

  .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .play-panel {
    --single-test-board-size: min(
      calc(80dvh - 8rem),
      calc(100vw - var(--single-status-width) - var(--single-play-gap) - 2rem)
    );
  }

}
/* Multiplayer Test horizontal resource components do not depend on Duel mode classes. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp {
  grid-area: hp;
  position: relative;
  display: block;
  width: 100%;
  height: clamp(1.8rem, 3.7vh, 2.35rem);
  min-height: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp > span,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-meter > span {
  position: absolute;
  top: 50%;
  left: 0.38rem;
  z-index: 8;
  color: rgba(237, 248, 252, 0.72);
  font-size: 0.5rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp > div:not(.duel-bar-delta) {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(209, 238, 218, 0.36);
  border-radius: 3px;
  background: rgba(5, 12, 9, 0.94);
  box-shadow: 0 0 10px rgba(89, 199, 94, 0.28), inset 0 0 0 1px rgba(225, 248, 232, 0.08);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--duel-hp, 1));
  transform-origin: left center;
  transition: background-color 140ms linear, transform 140ms linear;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp strong {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: clamp(1rem, 1.7vw, 1.38rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  opacity: 0.74;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.98), 0 0 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-meter {
  grid-area: shield;
  position: relative;
  display: block;
  width: 100%;
  height: clamp(0.82rem, 1.8vh, 1.15rem);
  min-height: 0;
  padding: 0;
  color: #9eefff;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-track::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(150, 231, 241, 0.88), rgba(29, 150, 184, 0.82));
  opacity: 0.72;
  transform: scaleX(var(--shield-fill, 0));
  transform-origin: left center;
  transition: transform 100ms linear, opacity 120ms ease;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-meter::before {
  content: attr(data-shield);
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  color: rgba(243, 254, 255, 0.88);
  font-size: clamp(0.68rem, 1.05vw, 0.84rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.98), 0 0 4px rgba(0, 0, 0, 0.88);
  transform: none;
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-meter::after {
  content: attr(data-dr) " DR";
  position: absolute;
  top: 50%;
  right: 0.38rem;
  bottom: auto;
  z-index: 10;
  color: rgba(174, 240, 250, 0.84);
  font-size: clamp(0.52rem, 0.75vw, 0.64rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-marker {
  top: 0;
  right: auto;
  bottom: 0;
  left: var(--marker-x);
  width: 1px;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-marker::after,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-current-threshold,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-shield-threshold-labels {
  display: none !important;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-queue {
  grid-area: queue;
  display: block;
  width: 100%;
  height: 2rem;
  min-height: 1.8rem;
  overflow: visible;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .is-horizontal-queue .attack-queue-packet {
  right: auto;
  left: 0;
  width: clamp(3.2rem, 14%, 4.45rem);
  height: 1.94rem;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
}
/* Reduced multiplayer Test HUDs retain the same full board-width track. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield:not(.challenge-hide-queue) .duel-hud-row,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-queue:not(.challenge-hide-shield) .duel-hud-row,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel.challenge-hide-shield.challenge-hide-queue:not(.challenge-hide-hp) .duel-hud-row {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
/* Multiplayer Test results cover the complete play unit, not an undefined board area. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-board-overlay {
  grid-area: test-play;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  z-index: 30;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-board-overlay .tutorial-popup {
  align-self: center;
  justify-self: center;
  width: min(26rem, calc(100% - 2rem));
}
/* Turn-Based Free Move HUD */
.app-shell.is-ai-duel .turn-free-move {
  order: 1;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.16rem;
  align-self: flex-end;
  width: min(100%, 7.4rem);
  min-height: 4.2rem;
  padding: 0.48rem 0.52rem 0.42rem;
  border: 1px solid rgba(238, 145, 48, 0.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(72, 39, 14, 0.92), rgba(29, 16, 7, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 227, 183, 0.1), 0 0 9px rgba(232, 123, 32, 0.16);
  color: rgba(242, 253, 255, 0.96);
  font: inherit;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.app-shell.is-ai-duel .turn-free-move[hidden] {
  display: none;
}

.app-shell.is-ai-duel .turn-free-move.is-unavailable {
  opacity: 0.45;
  filter: saturate(0.55);
  cursor: default;
}

.app-shell.is-ai-duel .turn-free-move.is-available:hover,
.app-shell.is-ai-duel .turn-free-move.is-available:focus-visible {
  border-color: rgba(255, 189, 91, 0.92);
  filter: brightness(1.12);
  outline: none;
}

.app-shell.is-ai-duel .turn-free-move.is-armed {
  border-color: #ffd27c;
  background: linear-gradient(180deg, rgba(185, 91, 20, 0.98), rgba(91, 39, 8, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 245, 218, 0.2), 0 0 18px rgba(255, 139, 35, 0.58);
  animation: turn-free-move-armed 720ms ease-in-out infinite alternate;
}

.turn-free-move-title {
  font-size: clamp(0.72rem, 0.82vw, 0.9rem);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
}

.turn-free-move-help {
  color: rgba(210, 231, 236, 0.68);
  font-size: clamp(0.46rem, 0.52vw, 0.58rem);
  font-weight: 700;
  line-height: 1.1;
}

.turn-free-move-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
}

.turn-free-move-progress > strong {
  min-width: 2rem;
  color: rgba(244, 253, 255, 0.94);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.turn-free-move-pips {
  display: flex;
  gap: 0.22rem;
}

.turn-free-move-pips i {
  position: relative;
  overflow: hidden;
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid rgba(245, 173, 92, 0.66);
  border-radius: 50%;
  background: rgba(5, 15, 20, 0.82);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.72);
}

.turn-free-move-pips i.is-filled,
.turn-free-move.is-cycle-complete .turn-free-move-pips i {
  border-color: rgba(255, 224, 174, 0.98);
  background: #ff972f;
  box-shadow: 0 0 8px rgba(255, 133, 34, 0.78);
}

.turn-free-move-pips i.is-filling::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff0c4;
  box-shadow: 0 0 9px #ff9b35;
  transform-origin: bottom;
  animation: turn-free-move-pip-fill 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-shell.is-ai-duel .turn-free-move.is-opponent {
  pointer-events: none;
  cursor: default;
}

.turn-free-move.is-progressing .turn-free-move-progress,
.turn-free-move.is-earned,
.turn-free-move.is-spent {
  animation: turn-free-move-pulse 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-shell.is-ai-duel .duel-status-panel .turn-free-move + .duel-live-stats {
  order: 3;
}

.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
  order: 2;
}

@keyframes turn-free-move-armed {
  from { filter: brightness(1.08); transform: scale(1); }
  to { filter: brightness(1.34); transform: scale(1.012); }
}

@keyframes turn-free-move-pip-fill {
  0% { opacity: 0; transform: scaleY(0); }
  42% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes turn-free-move-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.045); filter: brightness(1.32); }
  100% { transform: scale(1); }
}


@media (max-width: 860px) {
  .app-shell.is-ai-duel .turn-free-move {
    width: min(100%, 6.3rem);
    min-height: 3.35rem;
    padding: 0.3rem 0.36rem;
  }

  .turn-free-move-help {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.is-ai-duel .turn-free-move {
    animation: none !important;
  }
}
/* Free Move: a circulating orange neon dash marks the board retaining the turn. */
.app-shell.is-ai-duel .board-container.is-free-move-active {
  isolation: isolate;
  box-shadow:
    0 0 12px rgba(255, 138, 32, 0.72),
    0 0 24px rgba(255, 112, 20, 0.42);
}

.app-shell.is-ai-duel .board-container.is-free-move-active::after {
  content: "";
  position: absolute;
  z-index: 12;
  inset: -0.26rem;
  border-radius: 0.34rem;
  padding: 0.16rem;
  --free-move-border-angle: 0deg;
  background: repeating-conic-gradient(
    from var(--free-move-border-angle),
    #ffd18a 0deg 9deg,
    #ff8a20 9deg 12deg,
    transparent 12deg 20deg
  );
  filter:
    drop-shadow(0 0 3px #ffd08a)
    drop-shadow(0 0 7px #ff8a20)
    drop-shadow(0 0 14px rgba(255, 112, 20, 0.78));
  pointer-events: none;
  animation: free-move-border-orbit 6s linear infinite;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@property --free-move-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes free-move-border-orbit {
  to { --free-move-border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.is-ai-duel .board-container.is-free-move-active::after {
    animation: none;
  }
}
/* 30 Moves automatic Free Move progress */
.app-shell.is-training-move-limit .training-free-move,
.app-shell.is-training-target-practice .training-free-move,
.app-shell.is-training-specialist .training-free-move,
#replay-free-move {
  position: relative;
  z-index: 4;
  grid-area: left;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.16rem;
  align-self: start;
  justify-self: stretch;
  width: min(100%, 9rem);
  min-height: 3.8rem;
  margin-top: 7.1rem;
  padding: 0.48rem 0.52rem 0.42rem;
  border: 1px solid rgba(238, 145, 48, 0.56);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(72, 39, 14, 0.94), rgba(29, 16, 7, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 227, 183, 0.1), 0 0 10px rgba(232, 123, 32, 0.18);
  color: rgba(242, 253, 255, 0.96);
  text-align: center;
  pointer-events: none;
}

.training-free-move[hidden],
.app-shell:not(.is-training-move-limit):not(.is-training-target-practice):not(.is-training-specialist) .training-free-move {
  display: none !important;
}

.app-shell.is-training-move-limit .training-free-move.is-earned,
.app-shell.is-training-target-practice .training-free-move.is-earned,
.app-shell.is-training-specialist .training-free-move.is-earned {
  border-color: #ffd27c;
  background: linear-gradient(180deg, rgba(185, 91, 20, 0.98), rgba(91, 39, 8, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 245, 218, 0.2), 0 0 18px rgba(255, 139, 35, 0.58);
}

@media (max-width: 760px) {
  .app-shell.is-training-move-limit .training-free-move,
  .app-shell.is-training-target-practice .training-free-move,
  .app-shell.is-training-specialist .training-free-move {
    grid-area: left;
    justify-self: center;
    width: min(100%, 9rem);
  }
}
/* Local username onboarding */
.local-profile-name input.is-username-prompt {
  border-color: #65e7d4;
  box-shadow: 0 0 0 3px rgba(101, 231, 212, 0.12), 0 0 20px rgba(101, 231, 212, 0.2);
  animation: username-input-prompt 900ms ease-in-out 2;
}

.username-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vmin, 42px);
  background: rgba(2, 5, 8, 0.78);
  animation: pause-overlay-in 180ms ease both;
}

.username-prompt-overlay[hidden] {
  display: none !important;
}

.username-prompt-popup {
  display: grid;
  gap: 12px;
  width: min(30rem, calc(100vw - 32px));
  border: 1px solid rgba(101, 231, 212, 0.48);
  border-radius: 5px;
  padding: clamp(20px, 4vmin, 30px);
  background: linear-gradient(180deg, rgba(20, 31, 38, 0.99), rgba(7, 12, 16, 0.99));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: pause-popup-in 220ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.username-prompt-popup h2,
.username-prompt-popup p {
  margin: 0;
}

.username-prompt-popup h2 {
  color: #f7fbff;
  font: 900 clamp(1.5rem, 4vw, 2rem)/1 var(--font-display);
}

.username-prompt-popup > p:not(.eyebrow),
.username-prompt-popup > label {
  color: rgba(215, 231, 237, 0.78);
  font-weight: 750;
}

.username-prompt-popup > label {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 0.78rem;
}

.username-prompt-popup input {
  width: 100%;
  border: 1px solid #5b7680;
  border-radius: 4px;
  padding: 12px 13px;
  background: #070d11;
  color: #ffffff;
  font: 850 1rem var(--font-display);
}

.username-prompt-popup input:focus {
  border-color: #65e7d4;
  outline: 3px solid rgba(101, 231, 212, 0.14);
}

.username-prompt-error {
  color: #ff8d9e !important;
  font-size: 0.78rem;
}

.username-prompt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.username-prompt-actions button {
  min-height: 48px;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f7fbfd;
  font: 850 1rem var(--font-display);
}

#username-prompt-cancel-button {
  --angular-edge: rgba(113, 193, 220, 0.48);
  --angular-fill-top: rgba(29, 53, 68, 0.96);
  --angular-fill-bottom: rgba(8, 19, 27, 0.98);
}

#username-prompt-save-button {
  --angular-edge: #6eead3;
  --angular-fill-top: #287f71;
  --angular-fill-bottom: #0d433d;
}

.username-prompt-actions button:hover,
.username-prompt-actions button:focus-visible {
  filter: brightness(1.13);
  transform: translateY(-2px);
}

.username-prompt-actions button:focus-visible {
  outline: 2px solid #b0f6e9;
  outline-offset: 3px;
}

@keyframes username-input-prompt {
  50% { filter: brightness(1.18); }
}

@media (max-width: 520px) {
  .username-prompt-actions { grid-template-columns: 1fr; }
}
/* Global challenge leaderboards */
.training-challenge-menu-actions {
  display: flex;
  justify-self: start;
  gap: 10px;
}

.training-challenge-menu-actions .primary-action {
  min-width: min(12rem, 42vw);
}

.leaderboard-submit-status {
  margin: -4px 0 12px;
  color: rgba(211, 230, 238, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.leaderboard-submit-status.is-success { color: #74f2c4; }
.leaderboard-submit-status.is-error { color: #ff8d9e; }

.practice-challenge-actions #practice-challenge-submit-button {
  border-color: var(--action-teal-edge);
  background: linear-gradient(
    180deg,
    var(--action-teal-top),
    var(--action-teal-bottom)
  );
  color: #f7fffd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.leaderboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 118;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vmin, 44px);
  background: rgba(2, 5, 8, 0.82);
  animation: pause-overlay-in 180ms ease both;
}

.leaderboard-overlay[hidden] { display: none !important; }

.leaderboard-popup {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "heading" "category" "status" "table" "own";
  gap: 14px;
  width: min(54rem, calc(100vw - 32px));
  max-height: min(46rem, calc(100vh - 32px));
  border: 1px solid #537982;
  border-radius: 4px;
  padding: clamp(18px, 3vmin, 28px);
  background: #0b1418;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: pause-popup-in 220ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.leaderboard-header {
  grid-area: heading;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.leaderboard-header h2,
.leaderboard-header p { margin: 0; }

.leaderboard-header h2 {
  color: #f7fbff;
  font: 900 clamp(1.6rem, 4vw, 2.35rem)/1 var(--font-display);
}

.leaderboard-header button { min-width: 8rem; }

.leaderboard-tabs {
  grid-area: category;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Survival borrows the live duel resource stack without introducing an
 * opponent board. The board and both side rails retain Training geometry. */
.app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board right"
    ". combat .";
  row-gap: var(--game-gap);
}

.app-shell.is-training-survival .player-duel-panel {
  grid-area: combat;
  display: block;
  width: var(--training-centred-board-size);
  max-width: none;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.app-shell.is-training-survival .player-duel-panel .duel-status-panel,
.app-shell.is-training-survival .player-duel-panel .duel-lower-board-label {
  display: none;
}

.app-shell.is-training-survival .player-duel-panel .duel-hud-row {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(1.8rem, 2.25rem) minmax(0.82rem, 1.08rem) minmax(1.8rem, 2rem);
  grid-template-areas:
    "hp"
    "shield"
    "queue";
  gap: clamp(0.18rem, 0.4vh, 0.3rem);
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.app-shell.is-training-survival .player-duel-panel .duel-hp {
  grid-area: hp;
  position: relative;
  display: block;
  width: 100%;
  height: clamp(1.8rem, 3.7vh, 2.25rem);
}

.app-shell.is-training-survival .player-duel-panel .duel-hp > div:not(.duel-bar-delta) {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(209, 238, 218, 0.36);
  border-radius: 3px;
  background: rgba(5, 12, 9, 0.94);
  box-shadow: 0 0 10px rgba(89, 199, 94, 0.28), inset 0 0 0 1px rgba(225, 248, 232, 0.08);
}

.app-shell.is-training-survival .player-duel-panel .duel-hp i {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--duel-hp, 1));
  transform-origin: left center;
  transition: background-color 140ms linear, transform 140ms linear;
}

.app-shell.is-training-survival .player-duel-panel .duel-hp > span,
.app-shell.is-training-survival .player-duel-panel .duel-shield-meter > span {
  position: absolute;
  top: 50%;
  left: 0.38rem;
  z-index: 8;
  color: rgba(237, 248, 252, 0.72);
  font-size: 0.5rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.app-shell.is-training-survival .player-duel-panel .duel-hp strong {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  color: rgba(246, 255, 249, 0.8);
  font-size: clamp(1rem, 1.7vw, 1.38rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.9);
}

.app-shell.is-training-survival .player-duel-panel .duel-shield-meter {
  grid-area: shield;
  position: relative;
  display: block;
  width: 100%;
  height: clamp(0.82rem, 1.8vh, 1.08rem);
  min-height: 0;
  padding: 0;
}

.app-shell.is-training-survival .player-duel-panel .duel-shield-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
}

.app-shell.is-training-survival .player-duel-panel .duel-shield-track::before {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  transform: scaleX(var(--shield-fill, 0));
  transform-origin: left center;
  transition: transform 100ms linear, opacity 120ms ease;
}

.app-shell.is-training-survival .player-duel-panel .duel-shield-meter::before {
  content: attr(data-shield);
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  color: rgba(243, 254, 255, 0.88);
  font-size: clamp(0.68rem, 1.05vw, 0.84rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.88);
  transform: none;
}

.app-shell.is-training-survival .player-duel-panel .duel-shield-meter::after {
  content: attr(data-dr) " DR";
  position: absolute;
  top: 50%;
  right: 0.38rem;
  bottom: auto;
  z-index: 10;
  color: rgba(174, 240, 250, 0.84);
  font-size: clamp(0.52rem, 0.75vw, 0.64rem);
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

.app-shell.is-training-survival .player-duel-panel .duel-shield-marker {
  top: 0;
  right: auto;
  bottom: 0;
  left: var(--marker-x);
  width: 1px;
  height: 100%;
}

.app-shell.is-training-survival .player-duel-panel .duel-shield-marker::after,
.app-shell.is-training-survival .player-duel-panel .duel-shield-current-threshold,
.app-shell.is-training-survival .player-duel-panel .duel-shield-threshold-labels {
  display: none;
}

.app-shell.is-training-survival .player-duel-panel .duel-queue {
  grid-area: queue;
  display: block;
  width: 100%;
  height: 2rem;
  min-height: 1.8rem;
  overflow: visible;
}

.app-shell.is-training-survival .player-duel-panel .duel-queue .attack-queue-packet {
  width: clamp(3.2rem, 14%, 4.45rem);
  height: 1.94rem;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
}

.app-shell.is-training-survival .player-duel-panel .is-horizontal-queue .attack-queue-packet {
  right: auto;
  left: 0;
}

.app-shell.is-training-survival .player-duel-panel .duel-damage-band,
.app-shell.is-training-survival .player-duel-panel .duel-cancel-projection,
.app-shell.is-training-survival .player-duel-panel .duel-damage-erase {
  top: 0;
  right: auto;
  bottom: 0;
  height: 100%;
}

.app-shell.is-training-survival .player-duel-panel .duel-bar-delta {
  --delta-x: -108%;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 14;
  width: max-content;
  min-width: 3.2rem;
  color: rgba(241, 250, 255, 0.96);
  font-size: clamp(0.86rem, 1.35vw, 1.08rem);
  font-weight: 950;
  opacity: 0;
  transform: translateX(var(--delta-x)) translateY(-50%);
}

.app-shell.is-training-survival .player-duel-panel .duel-bar-delta.is-visible,
.app-shell.is-training-survival .player-duel-panel .duel-shield-meter > .duel-bar-delta.is-visible {
  animation: duel-bar-delta-horizontal 1280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 760px) {
  .app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
    grid-template-columns: var(--single-status-width) var(--training-centred-board-size);
    grid-template-areas:
      "left board"
      ". combat";
  }
}

.leaderboard-tabs button {
  min-height: 44px;
  border: 1px solid rgba(103, 164, 184, 0.34);
  border-radius: 3px;
  background: rgba(9, 20, 26, 0.94);
  color: rgba(219, 236, 243, 0.78);
  font: 850 0.78rem var(--font-display);
}

.leaderboard-tabs button.is-selected {
  border-color: rgba(101, 231, 212, 0.72);
  background: rgba(38, 142, 137, 0.34);
  color: #ffffff;
  box-shadow: inset 0 -3px 0 #65e7d4;
}

.leaderboard-tabs .menu-command.is-selected {
  --angular-edge: rgba(101, 231, 212, 0.72);
  --angular-fill-top: rgba(40, 126, 115, 0.98);
  --angular-fill-bottom: rgba(13, 72, 65, 0.99);
}

#leaderboard-close-button {
  --angular-edge: #a04d58;
  --angular-edge-focus: #ef8792;
  --angular-fill-top: #5a2930;
  --angular-fill-bottom: #241116;
  min-height: 44px;
  padding: 8px 16px;
  color: #fff7f8;
  font: 700 16px var(--font-ui);
}

.leaderboard-status {
  margin: 0;
  color: rgba(203, 222, 230, 0.72);
  text-align: center;
}

.leaderboard-table {
  min-height: 8rem;
  overflow-y: auto;
  border: 1px solid rgba(163, 202, 216, 0.16);
  background: rgba(2, 7, 10, 0.72);
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(8rem, auto);
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid rgba(163, 202, 216, 0.11);
}

.leaderboard-row:last-child { border-bottom: 0; }

.leaderboard-row > * {
  min-width: 0;
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row strong { color: #83dff0; }
.leaderboard-row span { color: #eaf5f8; font-weight: 800; }
.leaderboard-row b { color: #ffffff; text-align: right; }

.leaderboard-date {
  grid-column: 2 / -1;
  padding-top: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #a3bac3;
  overflow-wrap: anywhere;
}

.leaderboard-row.is-own {
  background: rgba(101, 231, 212, 0.11);
  box-shadow: inset 3px 0 0 #65e7d4;
}

.leaderboard-own-entry {
  grid-area: own;
  display: grid;
  gap: 5px;
}

.leaderboard-own-entry > small {
  color: rgba(101, 231, 212, 0.82);
  font-weight: 850;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .training-challenge-menu-actions {
    width: 100%;
  }
  .training-challenge-menu-actions .primary-action {
    min-width: 0;
    flex: 1;
  }
  .leaderboard-tabs { grid-template-columns: 1fr; }
  .leaderboard-row { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(6rem, auto); }
  .leaderboard-row > * { padding-inline: 8px; }
}

/* Responsive board allocation
 *
 * Gameplay canvases retain their logical aspect ratio. These final rules only
 * divide the available viewport after reserving the live controls for each mode.
 */
:root {
  --single-board-max: 52rem;
  --tutorial-test-board-max: 38rem;
  --single-status-width: clamp(6.25rem, 9vw, 8.25rem);
  --single-score-width: clamp(8rem, 11vw, 10rem);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  grid-template-columns: minmax(0, 1fr) var(--single-score-width);
  gap: clamp(0.5rem, 1.2vmin, 0.9rem);
  min-width: 0;
  padding: clamp(0.45rem, 1.2vmin, 0.8rem);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage,
.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-columns: var(--single-status-width) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  padding: clamp(0.25rem, 0.8vmin, 0.55rem);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-container {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config):not(.is-training-challenge) canvas,
.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) canvas {
  width: min(var(--single-board-max), calc(80dvh - 3.75rem), 100%);
  max-width: 100%;
  max-height: 100%;
}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) canvas {
  width: min(var(--single-board-max), calc(80dvh - 4.64rem), 100%);
}

/* Tutorial lessons reserve only their measured copy and fixed navigation rows;
 * the demonstration row receives every remaining pixel.
 */
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .board-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(0.2rem, 0.7vmin, 0.5rem) clamp(0.25rem, 0.8vw, 0.65rem)
    calc(78px + env(safe-area-inset-bottom));
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-demo-page .player-board-container {
  width: min(100%, 42rem);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: clamp(0.25rem, 0.9vmin, 0.55rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-demo-page #game-board {
  width: min(var(--demo-width-cap, 24rem), 100%);
  max-width: 100%;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-preview-page .player-board-container,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-grey-page .player-board-container {
  width: min(100%, 24rem);
  height: 100%;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-preview-page #game-board {
  --tutorial-preview-tile: min(4.25rem, 7.6dvh, 14vw);
  width: min(calc(var(--tutorial-preview-tile) * 3), 100%);
  height: auto;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-grey-page #game-board {
  --tutorial-grey-tile: min(3.8rem, 6.8dvh, 13vw);
  width: min(calc(var(--tutorial-grey-tile) * 3), 100%);
  height: auto;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-premove-page .player-board-container {
  width: min(100%, 30rem);
  height: 100%;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-premove-page #game-board {
  --tutorial-premove-tile: min(4.6rem, 8dvh, 15vw);
  width: min(calc(var(--tutorial-premove-tile) * 5), 100%);
  height: auto;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-hybrid-page .player-board-container {
  width: min(100%, 26rem);
  height: 100%;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-hybrid-page #game-board {
  --tutorial-hybrid-tile: min(5rem, 9dvh, 19vw);
  width: min(calc(var(--tutorial-hybrid-tile) * 4), 100%);
  height: auto;
  max-height: 100%;
}

/* Intro to Duels runs a real, compact local match with only combat essentials. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: minmax(30rem, 1fr) minmax(17rem, 31rem) clamp(8.5rem, 12vw, 10.5rem);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "duel-demo dialogue right";
  column-gap: clamp(0.7rem, 1.5vw, 1.3rem);
  align-items: center;
  width: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-arena {
  --tutorial-duel-board: min(43dvh, 21vw, 22rem);
  grid-area: duel-demo;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--tutorial-duel-board)));
  grid-template-rows: minmax(0, auto) auto;
  grid-template-areas:
    "player-board ai-board"
    "player-hud ai-hud";
  justify-content: center;
  align-items: start;
  gap: clamp(0.45rem, 1vw, 0.85rem);
  min-width: 0;
  width: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-board-container,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-board-container {
  display: grid;
  width: var(--tutorial-duel-board);
  max-width: 100%;
  height: calc(var(--tutorial-duel-board) * 1.25) !important;
  min-height: 0 !important;
  max-height: none;
  min-width: 0;
  aspect-ratio: 4 / 5;
  padding: 0;
  align-self: end;
  place-items: center;
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-board-container {
  grid-area: player-board;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-board-container {
  grid-area: ai-board;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) #game-board,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) #ai-game-board {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel {
  display: grid;
  align-self: start;
  width: var(--tutorial-duel-board);
  max-width: 100%;
  min-width: 0;
  height: auto;
  padding: 0.22rem 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel {
  grid-area: player-hud;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel {
  grid-area: ai-hud;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-status-panel,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-lower-board-label {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-hud-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: clamp(1.65rem, 3.2dvh, 1.9rem) clamp(0.72rem, 1.5dvh, 0.9rem) clamp(1.2rem, 2.5dvh, 1.48rem);
  grid-template-areas:
    "hp"
    "shield"
    "queue";
  gap: 0.16rem;
  width: 100%;
  height: auto;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-hp,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-meter,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-queue {
  width: 100%;
  min-width: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-hp {
  grid-area: hp;
  position: relative;
  display: block;
  height: clamp(1.65rem, 3.2dvh, 1.9rem);
  min-height: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-hp > span,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-meter > span {
  position: absolute;
  top: 50%;
  z-index: 8;
  color: rgba(237, 248, 252, 0.72);
  font-size: 0.46rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel .duel-hp > span,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel .duel-shield-meter > span {
  left: 0.32rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel .duel-hp > span,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel .duel-shield-meter > span {
  right: 0.32rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-hp > div:not(.duel-bar-delta) {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(209, 238, 218, 0.36);
  border-radius: 3px;
  background: rgba(5, 12, 9, 0.94);
  box-shadow: 0 0 8px rgba(89, 199, 94, 0.24), inset 0 0 0 1px rgba(225, 248, 232, 0.08);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-hp i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--duel-hp, 1));
  transition: background-color 140ms linear, transform 140ms linear;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel .duel-hp i {
  transform-origin: left center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel .duel-hp i {
  transform-origin: right center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-hp strong {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  color: rgba(246, 255, 249, 0.72);
  font-size: clamp(0.82rem, 1.25vw, 1.02rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.98), 0 0 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-meter {
  grid-area: shield;
  position: relative;
  display: block;
  height: clamp(0.72rem, 1.5dvh, 0.9rem);
  min-height: 0;
  padding: 0;
  color: #9eefff;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-track::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(150, 231, 241, 0.88), rgba(29, 150, 184, 0.82));
  opacity: 0.72;
  transform: scaleX(var(--shield-fill, 0));
  transition: transform 100ms linear, opacity 120ms ease;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel .duel-shield-track::before {
  transform-origin: left center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel .duel-shield-track::before {
  transform-origin: right center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-meter::before {
  content: attr(data-shield);
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  color: rgba(243, 254, 255, 0.82);
  font-size: clamp(0.6rem, 0.85vw, 0.72rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.98), 0 0 4px rgba(0, 0, 0, 0.88);
  transform: none;
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-meter::after {
  content: attr(data-dr) " DR";
  position: absolute;
  top: 50%;
  bottom: auto;
  z-index: 10;
  color: rgba(174, 240, 250, 0.84);
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel .duel-shield-meter::after {
  right: 0.32rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel .duel-shield-meter::after {
  right: auto;
  left: 0.32rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-marker {
  top: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .player-duel-panel .duel-shield-marker {
  right: auto;
  left: var(--marker-x);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel .duel-shield-marker {
  right: var(--marker-x);
  left: auto;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-marker::after,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-current-threshold,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-shield-threshold-labels,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-bar-delta {
  display: none !important;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-damage-band,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-cancel-projection,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-damage-erase {
  top: 0;
  right: auto;
  bottom: 0;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-queue {
  position: relative;
  display: block;
  height: clamp(1.2rem, 2.5dvh, 1.48rem);
  min-height: 0;
  overflow: visible;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-queue .attack-queue-packet {
  width: clamp(2.2rem, 19%, 3rem);
  height: 100%;
  padding-inline: 0.3rem;
  font-size: clamp(0.52rem, 0.75vw, 0.66rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .is-horizontal-queue .attack-queue-packet,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .ai-duel-panel .is-horizontal-queue .attack-queue-packet {
  right: auto;
  left: 0;
}

/* Turn-Based Intro keeps the compact duel HUD and adds only the essential clocks. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-arena {
  --tutorial-duel-board: min(39dvh, 20vw, 20rem);
  grid-template-rows: auto minmax(0, auto) auto;
  grid-template-areas:
    "player-clock ai-clock"
    "player-board ai-board"
    "player-hud ai-hud";
  row-gap: clamp(0.28rem, 0.65dvh, 0.48rem);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-tempo-panel {
  display: contents;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-tempo-base {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-tempo-player-drain,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-tempo-ai-drain {
  align-self: end;
  justify-self: center;
  margin: 0;
  min-height: 1.75rem;
  padding: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-tempo-player-drain {
  grid-area: player-clock;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-tempo-ai-drain {
  grid-area: ai-clock;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-side-drain-label,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-side-drain-value {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-clock-label,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-clock-value {
  display: inline;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page:not(.is-tutorial-menu-scene) .duel-clock-value {
  display: inline-block;
  box-sizing: border-box;
  min-inline-size: 4.65em;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 3px 7px;
  text-align: center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page.is-ai-turn:not(.is-tutorial-menu-scene) .player-board-container canvas,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page.is-player-turn:not(.is-tutorial-menu-scene) .ai-board-container canvas {
  filter: brightness(0.72) saturate(0.9);
  opacity: 0.88;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page.is-player-turn:not(.is-tutorial-menu-scene) .player-board-container canvas,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-intro-page.is-ai-turn:not(.is-tutorial-menu-scene) .ai-board-container canvas {
  filter: none;
  opacity: 1;
}

/* The Free Move lesson keeps the compact duel HUD and exposes only its reserve. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .duel-status-panel {
  display: grid;
  position: static;
  justify-items: center;
  width: 100%;
  margin-bottom: 0.28rem;
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .duel-status-heading,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .duel-live-stats,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .duel-counter-stack {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .turn-free-move {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.16rem;
  width: clamp(6.2rem, 8vw, 7.4rem);
  min-height: 4.2rem;
  padding: 0.48rem 0.52rem 0.42rem;
  border: 1px solid rgba(238, 145, 48, 0.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(72, 39, 14, 0.92), rgba(29, 16, 7, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 227, 183, 0.1), 0 0 9px rgba(232, 123, 32, 0.16);
  color: rgba(242, 253, 255, 0.96);
  text-align: center;
  pointer-events: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .turn-free-move[hidden] {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .turn-free-move.is-unavailable {
  opacity: 0.45;
  filter: saturate(0.55);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .turn-free-move.is-armed {
  border-color: #ffd27c;
  background: linear-gradient(180deg, rgba(185, 91, 20, 0.98), rgba(91, 39, 8, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 245, 218, 0.2), 0 0 18px rgba(255, 139, 35, 0.58);
  animation: turn-free-move-armed 720ms ease-in-out infinite alternate;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .board-container.is-free-move-active {
  isolation: isolate;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-turn-free-move-page:not(.is-tutorial-menu-scene) .board-container.is-free-move-active::after {
  content: "";
  position: absolute;
  z-index: 12;
  inset: -0.26rem;
  border-radius: 0.34rem;
  padding: 0.16rem;
  --free-move-border-angle: 0deg;
  background: repeating-conic-gradient(
    from var(--free-move-border-angle),
    #ffb14a 0deg 10deg,
    transparent 10deg 18deg
  );
  filter: drop-shadow(0 0 3px #ffd08a) drop-shadow(0 0 7px #ff8a20);
  pointer-events: none;
  animation: free-move-border-orbit 2.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Final SHIELD tutorial placement: MULT occupies the open top-left status lane. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  position: static !important;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-status-panel {
  top: 0.5rem !important;
  right: auto !important;
  bottom: auto !important;
  left: 0.5rem !important;
}

@media (max-width: 1120px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 14vw, 10.5rem);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "duel-demo right"
      "dialogue right";
    row-gap: 0.55rem;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-arena {
    --tutorial-duel-board: min(31dvh, 35vw, 19rem);
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    width: min(100%, calc(var(--tutorial-duel-board) * 2 + clamp(0.45rem, 1vw, 0.85rem)));
  }
}

@media (max-width: 720px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "duel-demo"
      "dialogue"
      "right";
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-duel-intro-page:not(.is-tutorial-menu-scene) .duel-arena {
    --tutorial-duel-board: min(27dvh, 45vw, 16rem);
  }
}

/* Paired demonstrations retain a shared tile size across both boards. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combo-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-combo-gap: clamp(8px, 2vw, 30px);
  --tutorial-combo-tile: min(
    6.25rem,
    9.4dvh,
    calc((100vw - 3rem - var(--tutorial-combo-gap)) / 6)
  );
  grid-template-columns:
    minmax(0, 1fr)
    calc(var(--tutorial-combo-tile) * 3 + 16px)
    calc(var(--tutorial-combo-tile) * 3 + 16px)
    minmax(0, 1fr);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-special-tile: min(5.9rem, 9.8dvh, 8.4vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-attack-tile: min(4.65rem, 7.4dvh, 4.7vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-dt-tile: min(4.65rem, 7.35dvh, 5.25vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-mult-tile: min(4.65rem, 7.35dvh, 5.1vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-misfire-tile: min(4.65rem, 7.35dvh, 5.1vw);
}

/* Tutorial tests use the same expandable centre track as Singleplayer. */
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stage {
  grid-template-columns:
    var(--single-status-width)
    minmax(0, 1fr)
    clamp(9rem, 14vw, 13rem);
  width: 100%;
  min-width: 0;
  padding: clamp(0.3rem, 0.9vmin, 0.65rem);
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-container {
  width: 100%;
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) canvas {
  width: min(var(--tutorial-test-board-max), calc(80dvh - 2.24rem), 100%);
  max-width: 100%;
  max-height: 100%;
}

/* Medium layouts move prose above full-board lessons before it can squeeze the
 * board. MULT stays beside the board where that readout is part of the lesson.
 */
@media (max-width: 1050px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene):not(.is-tutorial-rising-attack-page) .board-stage,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'dialogue' 'board' 'right';
    row-gap: clamp(0.35rem, 1vmin, 0.65rem);
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .board-stage,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .board-stage,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: clamp(5.5rem, 13vw, 7.5rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'dialogue dialogue' 'left board' 'right right';
    row-gap: clamp(0.35rem, 1vmin, 0.65rem);
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .tutorial-dialogue,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .tutorial-dialogue,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .tutorial-dialogue,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    max-width: 62rem;
    justify-self: center;
    padding-inline: 0;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    max-width: 62rem;
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --single-status-width: clamp(5.5rem, 20vw, 7rem);
  }

  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'stage' 'stats';
  }

  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage,
  .app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
    grid-template-columns: var(--single-status-width) minmax(0, 1fr);
  }

  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config):not(.is-training-challenge) canvas,
  .app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) canvas {
    width: min(100%, calc(80dvh - 8.4rem));
  }

  .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'right' 'board' 'left';
  }

  .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) canvas {
    width: min(100%, calc(80dvh - 9.6rem));
  }
}

@media (max-width: 860px) {
  .app-shell.is-tutorial,
  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) {
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue h2 {
    font-size: clamp(1.35rem, 4vh, 1.8rem);
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    margin-top: 0.35rem;
    font-size: clamp(0.78rem, 2.2vh, 0.9rem);
    line-height: 1.35;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .board-stage {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-actions button {
    min-height: 48px;
  }
}

/* Final interactive playfield contract. Keep these rules after legacy
 * responsive blocks so the visible canvas and its pointer hitbox stay equal. */
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel,
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .play-panel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage";
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-columns: var(--single-status-width) var(--single-play-board-size);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "left board";
  justify-content: center;
  column-gap: var(--single-play-gap);
}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-columns: var(--single-status-width) var(--single-play-board-size);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "left board" ". meter";
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  grid-area: stage;
  z-index: 12;
  display: grid;
  align-self: end;
  justify-self: center;
  box-sizing: border-box;
  width: calc(var(--single-status-width) + var(--single-play-gap) + var(--single-play-board-size));
  margin: 0 0 clamp(0.65rem, 1.25vmin, 0.95rem);
  padding-right: calc(var(--single-play-gap) + var(--single-play-board-size));
  pointer-events: none;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .player-board-container {
  width: var(--single-play-board-size);
  height: 100%;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .player-board-container canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stage {
  grid-template-columns:
    var(--single-status-width)
    var(--single-test-board-size)
    var(--single-test-panel-width);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "left board right";
  justify-content: center;
  column-gap: var(--single-play-gap);
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .player-board-container {
  width: var(--single-test-board-size);
  height: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .player-board-container canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-header {
  display: none;
}

@media (max-width: 760px) {
  .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage,
  .app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
    grid-template-columns: var(--single-status-width) var(--single-play-board-size);
  }

  .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stage {
    grid-template-columns: var(--single-status-width) var(--single-test-board-size);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "left board" "right right";
  }

}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip {
  display: none;
}

/* v1.1.7 Options and local music customisation */
.options-menu-page {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "title"
    "back"
    "content";
  width: min(94vw, 76rem);
  height: min(86dvh, 52rem);
  min-height: 0;
  max-height: 86dvh;
  gap: clamp(0.8rem, 1.8vh, 1.35rem);
  align-content: stretch;
  overflow: hidden;
}

.options-menu-page > .menu-page-title {
  grid-area: title;
}

.options-menu-page > .main-menu-back {
  grid-area: back;
  justify-self: center;
  width: min(15rem, 100%);
  margin-top: -0.25rem;
}

.options-category-menu {
  grid-area: content;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.35rem);
  width: calc(100% - 1.5rem);
  padding: 0.75rem;
  box-sizing: border-box;
  overflow: visible;
  align-self: center;
}

.options-menu-page:not(.is-options-detail) {
  height: 100%;
  max-height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-self: stretch;
  overflow: visible;
}

.options-menu-page:not(.is-options-detail) > .menu-page-title {
  align-self: end;
  margin-bottom: 0;
}

.options-menu-page:not(.is-options-detail) > .main-menu-back {
  align-self: start;
}

.options-menu-page:not(.is-options-detail) > .options-category-menu {
  align-self: center;
}

.options-category-menu .mode-button {
  min-height: clamp(5.75rem, 13vh, 8rem);
  padding-block: clamp(0.75rem, 1.8vh, 1.1rem);
  width: 100%;
}

.options-category-menu .mode-button strong,
.options-category-menu .mode-button span {
  display: block;
}

.options-category-menu .mode-button strong {
  font-size: clamp(1.15rem, 1.65vw, 1.55rem);
}

.options-category-menu .mode-button span {
  margin-top: 0.3rem;
  color: rgba(231, 242, 248, 0.72);
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
}

.options-menu-page > .options-subpage,
.options-menu-page > .local-profile-panel.options-subpage {
  grid-area: content;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  padding: clamp(0.85rem, 1.8vw, 1.35rem);
  padding-bottom: max(clamp(2rem, 4vh, 3rem), env(safe-area-inset-bottom));
  overflow: auto;
  scrollbar-gutter: stable;
  transform: none;
}

.options-subpage-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.options-subpage-heading h3 {
  display: none;
}

.options-subpage-heading small {
  position: absolute;
  right: 0;
}

.options-subpage-back {
  min-width: 6.5rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.8rem;
  background: linear-gradient(180deg, rgba(91, 45, 54, 0.95), rgba(47, 23, 29, 0.98));
  border-color: rgba(231, 112, 128, 0.55);
}

.options-game-panel .options-subpage-back {
  --menu-item-x: 0px;
  --menu-item-y: 0px;
  --menu-button-x: 0px;
  --menu-button-y: 0px;
  transform:
    perspective(1000px)
    translate3d(
      calc(var(--menu-item-x) + var(--menu-button-x)),
      calc(var(--menu-item-y) + var(--menu-button-y)),
      0
    );
  transition:
    border-color 160ms linear,
    filter 160ms linear,
    transform 190ms var(--menu-motion-ease);
}

.options-game-panel .options-subpage-back:hover,
.options-game-panel .options-subpage-back:focus-visible {
  transform:
    perspective(1000px)
    translate3d(
      calc(var(--menu-item-x) + var(--menu-button-x)),
      calc(var(--menu-item-y) + var(--menu-button-y) - 1px),
      8px
    );
}

.options-subpage .audio-settings {
  display: grid;
  gap: 0.7rem;
}

.options-game-panel {
  align-self: start;
  height: auto;
  max-width: 48rem !important;
  justify-self: center;
  overflow: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.game-options-hub {
  width: min(100%, 48rem);
  margin-inline: auto;
  padding: clamp(0.5rem, 2vh, 1.25rem);
}

.game-options-categories {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.game-options-group {
  min-width: 0;
  border-bottom: 1px solid rgba(91, 226, 210, .22);
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
}
.game-options-expansion {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 240ms ease, opacity 180ms ease;
}
.game-options-group.is-expanded .game-options-expansion { grid-template-rows: 1fr; opacity: 1; }
.game-options-clip { min-height: 0; overflow: hidden; }
.game-options-group :is(.game-options-category, .game-options-panel, .game-options-controls) {
  --menu-item-x: 0px;
  --menu-item-y: 0px;
}
.game-options-group .game-options-panel { width: 100%; padding: 12px 16px; }
.game-options-chevron { position: absolute; right: 16px; top: 22px; transition: transform 180ms ease; }
.game-options-group.is-expanded .game-options-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .game-options-expansion, .game-options-chevron { transition: none; }
}

.game-options-category {
  position: relative;
  width: 100%;
  min-height: 4.5rem;
  padding-right: 44px;
  text-align: left;
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
  transition:
    border-color 110ms ease,
    filter 110ms ease,
    transform 190ms var(--menu-motion-ease);
}

.game-options-category:hover,
.game-options-category:focus-visible {
  transform: translate3d(
    var(--menu-item-x, 0px),
    calc(var(--menu-item-y, 0px) - 1px),
    8px
  );
}

.game-options-category:active {
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
}

.game-options-category strong,
.game-options-category span {
  display: block;
  letter-spacing: 0;
}

.game-options-category span {
  line-height: 1.35;
}

.game-options-panel {
  width: 100%;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
  transition: transform 220ms var(--menu-motion-ease);
}

.game-options-panel .game-options-controls {
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
  transition: transform 220ms var(--menu-motion-ease);
}

.game-options-panel.game-options-controls {
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
}
.game-options-panel legend { display: none; }
.options-game-panel[data-game-options-view="accordion"] { align-content: start; }

.game-options-panel[hidden],
.game-options-hub[hidden] {
  display: none !important;
}

.options-game-panel[data-game-options-view="hub"] {
  align-content: center;
}

.options-game-panel[data-game-options-view]:not([data-game-options-view="hub"]) {
  align-content: start;
}

@media (max-width: 760px), (pointer: coarse) {
  .options-game-panel {
    width: 100% !important;
    max-height: 100%;
    padding-inline: 0.4rem;
  }

  .game-options-hub {
    padding: 0.35rem;
  }

  .game-options-categories {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-options-category {
    min-height: 5.25rem;
  }

  .game-options-panel {
    width: 100%;
    padding: 0.75rem 0.6rem;
    overflow-x: hidden;
  }
}

.menu-home:has(#options-menu-page.is-options-detail:not([hidden])) > #options-menu-page {
  grid-area: 1 / 1;
  align-self: stretch;
  height: 100%;
  max-height: none;
}

.menu-home:has(#options-menu-page:not([hidden])) > .menu-online-status {
  display: none;
}

.menu-home:has(#options-menu-page.is-options-detail:not([hidden])) > .menu-logo-heading {
  display: none;
}

#options-menu-page.is-options-profile,
#options-menu-page.is-options-customisation {
  --menu-item-x: 0px !important;
  --menu-item-y: 0px !important;
}

.options-subpage .audio-setting {
  grid-template-columns: 2.25rem minmax(5.5rem, auto) minmax(10rem, 1fr) 3rem;
  min-height: 44px;
}

.customisation-panel {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.75rem;
}

.options-menu-page > .local-profile-panel.options-subpage {
  width: min(60rem, 72%);
  min-height: 50%;
  justify-self: center;
  align-self: center;
  align-content: center;
  gap: clamp(1rem, 2.2vh, 1.65rem);
  padding: clamp(1.35rem, 2.5vw, 2.2rem);
}

.options-menu-page > .local-profile-panel.options-subpage .local-profile-name {
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: clamp(0.8rem, 1.5vw, 1.35rem);
  font-size: clamp(0.9rem, 1.15vw, 1.08rem);
}

.options-menu-page > .local-profile-panel.options-subpage .local-profile-name input {
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.options-menu-page > .local-profile-panel.options-subpage .local-profile-records {
  gap: clamp(0.7rem, 1.4vw, 1.15rem);
}

.options-menu-page > .local-profile-panel.options-subpage .local-profile-records > div {
  min-height: 4.25rem;
  padding: clamp(0.65rem, 1.2vw, 1rem);
}

.options-menu-page > .local-profile-panel.options-subpage .local-profile-records span,
.options-menu-page > .local-profile-panel.options-subpage > p,
.options-menu-page > .local-profile-panel.options-subpage .options-subpage-heading small {
  font-size: clamp(0.76rem, 0.95vw, 0.9rem);
}

.options-menu-page > .local-profile-panel.options-subpage .local-profile-records strong {
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
}

.customisation-panel > .skin-setting {
  width: 100%;
}

.menu-effect-settings {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  width: min(100%, 36rem);
  justify-self: center;
}
.options-subpage .menu-effect-settings .audio-setting {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  letter-spacing: 0;
}
.menu-effect-settings legend {
  margin-bottom: 0.5rem;
  color: #d0e6f4;
  font-size: 1rem;
  font-weight: 800;
}
.options-subpage .menu-effect-setting {
  grid-template-columns: minmax(9rem, 1fr) minmax(6rem, 1fr) 3rem 2rem;
  gap: 0.75rem;
}
.options-subpage .menu-effect-colour {
  grid-template-columns: minmax(9rem, 1fr) 44px minmax(6rem, 1fr) 2rem;
}
.gameplay-effect-choice select { grid-column: 2 / -1; min-width: 0; }
.gameplay-effect-toggle input { grid-column: 2 / -1; justify-self: end; }
.gameplay-effect-settings .is-disabled { opacity: 0.55; }
.gameplay-effect-note { grid-column: 1 / -1; color: #a9becb; font-size: 0.75rem; line-height: 1.4; text-transform: none; }
.options-game-panel .menu-effect-settings .audio-setting { width: 100%; max-width: none; }
.options-game-panel .gameplay-effect-choice select { min-height: 36px; }
.options-game-panel .gameplay-effect-toggle input { width: 20px; height: 20px; accent-color: #5be2d2; }
.customisation-panel.options-subpage .skin-setting {
  grid-template-columns: minmax(0, 1fr) minmax(6rem, 1fr) 2rem;
  gap: 0.75rem;
  letter-spacing: 0;
}
.customisation-panel .skin-setting select { grid-column: 2; }
.customisation-panel .skin-setting .setting-reset { grid-column: 3; }
.setting-reset {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #526772;
  border-radius: 4px;
  background: #0c151b;
  color: #d0e6f4;
  font-size: 1.25rem;
  cursor: pointer;
}
.setting-reset:hover, .setting-reset:focus-visible {
  border-color: #5be2d2;
  color: #ffffff;
}
.parallax-setting .mobile-parallax-note {
  grid-column: 1 / -1;
}
.menu-effect-colour input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 2px;
  cursor: pointer;
  border: 1px solid #526772;
  border-radius: 4px;
  background: #0c151b;
}
.menu-effect-colour input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #526772;
  border-radius: 4px;
  background: #0c151b;
  color: #e8f3f5;
  font: inherit;
}
.menu-effect-colour input[aria-invalid="true"] { border-color: #db6b76; }
@media (max-width: 760px), (pointer: coarse) {
  .options-subpage .menu-effect-setting {
    grid-template-columns: minmax(0, 1fr) 3rem 2rem;
    gap: 0.4rem 0.75rem;
  }
  .menu-effect-setting > label { grid-column: 1 / -1; }
  .options-subpage .menu-effect-colour { grid-template-columns: 44px minmax(0, 1fr) 2rem; }
  .options-game-panel .gameplay-effect-choice { grid-template-columns: minmax(0, 1fr); }
  .options-game-panel .gameplay-effect-choice select { grid-column: 1; min-height: 44px; }
  .options-game-panel .gameplay-effect-toggle { grid-template-columns: minmax(0, 1fr) 44px; }
  .options-game-panel .gameplay-effect-toggle input { grid-column: 2; }
}

.music-customisation {
  display: grid;
  gap: 0.85rem;
  min-height: 0;
}

html[data-layout-family] .options-menu-page > .options-subpage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  overflow: hidden !important;
}
.options-subpage > .options-subpage-heading { margin-bottom: 0.75rem; z-index: 20; }
.options-subpage-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 8px 12px 20px;
}
.options-subpage .audio-setting {
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(121, 166, 186, .3);
  border-radius: 4px;
  background: rgba(14, 24, 30, .85);
}
.options-subpage :is(.gameplay-effect-note, .mobile-parallax-note)[hidden] { display: none !important; }
.sprite-skin-preview {
  grid-area: auto;
  width: min(100%, 28rem);
  height: auto;
  aspect-ratio: 7;
  justify-self: center;
  border: 1px solid rgba(121, 166, 186, .3);
  border-radius: 4px;
  background: rgba(14, 24, 30, .85);
}
.music-search { display: grid; gap: 6px; color: #c0cbd0; font-size: .85rem; }
.music-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #526772;
  border-radius: 4px;
  background: #0c151b;
  color: #e8f3f5;
  font: inherit;
}
.music-track-row[hidden] { display: none !important; }
.options-subpage-content .game-options-hub { overflow: visible; }

.music-editor-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
}

.music-editor-controls label {
  display: grid;
  gap: 0.3rem;
  color: rgba(218, 231, 239, 0.75);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.music-editor-controls select,
.music-track-weight input {
  min-height: 2.25rem;
  border: 1px solid rgba(108, 186, 211, 0.36);
  border-radius: var(--radius-button);
  color: #f4fdff;
  background: #111a24;
  font: inherit;
}

.music-editor-section {
  display: grid;
  gap: 0.45rem;
}

.music-editor-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.music-editor-title h4 {
  margin: 0;
  font-size: 1rem;
}

.music-editor-title .primary-action {
  min-height: 2rem;
  padding: 0.28rem 0.65rem;
}

.music-track-list {
  display: grid;
  gap: 0.35rem;
}

.music-track-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.1rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(121, 166, 186, 0.22);
  background: rgba(7, 12, 18, 0.62);
}

#mult-tier-dialog {
  width: min(740px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 16px;
  border: 1px solid #537982;
  background: #0b1418;
  color: #eaf8fa;
  overflow: hidden;
  animation: tutorial-test-popup-in 160ms ease-out both;
}
#mult-tier-dialog::backdrop { background: rgba(0, 8, 10, .65); }
#mult-tier-dialog.is-closing { animation: tutorial-test-popup-out 120ms ease-in both; }
.mult-tier-content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; max-height: calc(100dvh - 58px); }
.mult-tier-content h2 { margin: 0; font-size: 22px; }
.mult-tier-scroll { min-height: 0; overflow: auto; }
.mult-tier-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.mult-tier-table th:nth-child(1) { width: 10%; }
.mult-tier-table th:nth-child(2) { width: 17%; }
.mult-tier-table th:nth-child(3) { width: 24%; }
.mult-tier-table th:nth-child(4) { width: 25%; }
.mult-tier-table th:nth-child(5) { width: 24%; }
.mult-tier-total-short { display: none; }
.mult-tier-table th { position: sticky; top: 0; background: #0b1418; z-index: 1; }
.mult-tier-table :is(th, td) { padding: 6px 4px; text-align: center; border-bottom: 1px solid #30444c; }
.mult-tier-table input { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px; background: #15262d; border: 1px solid #537982; color: #eaf8fa; font-size: 14px; }
.mult-tier-table input:disabled { opacity: .5; }
.mult-tier-actions { display: flex; gap: 8px; }
.mult-tier-actions button { flex: 1; min-height: 44px; padding: 8px; font-size: 14px; }
@media (max-width: 480px) {
  .mult-tier-total-full { display: none; }
  .mult-tier-total-short { display: inline; }
  .mult-tier-table { font-size: 12px; }
  .mult-tier-table :is(th, td) { padding: 6px 2px; }
  .mult-tier-table input { padding: 6px 2px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { #mult-tier-dialog, #mult-tier-dialog.is-closing { animation-duration: 60ms; } }

.music-track-identity {
  min-width: 0;
}

.music-track-row[data-music-collection="g3ms"] {
  border-color: rgba(49, 212, 191, 0.5);
  border-left: 3px solid #31d4bf;
  background: rgba(13, 62, 59, 0.58);
}

.music-track-row[data-music-collection="tetrio"] {
  border-color: rgba(189, 126, 240, 0.5);
  border-left: 3px solid #bd7ef0;
  background: rgba(63, 27, 83, 0.58);
}

.music-track-row[data-music-collection="custom"] {
  border-color: rgba(239, 208, 79, 0.5);
  border-left: 3px solid #efd04f;
  background: rgba(66, 56, 16, 0.58);
}

.music-track-identity strong,
.music-track-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-track-identity .music-track-meta {
  display: block;
  margin-top: 0.18rem;
  color: rgba(167, 195, 208, 0.72);
  font-size: 0.65rem;
  font-weight: 750;
}

.music-track-identity strong {
  color: #f5fbff;
  font-size: 0.88rem;
}

.music-track-identity span {
  margin-top: 0.12rem;
  color: rgba(202, 220, 230, 0.62);
  font-size: 0.7rem;
}

.music-track-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

.music-track-action {
  min-width: 0;
  min-height: 1.9rem;
  padding: 0.25rem 0.48rem;
  font-size: 0.68rem;
}

.music-track-weight {
  display: grid;
  grid-template-columns: auto 3.6rem;
  align-items: center;
  gap: 0.35rem;
  color: rgba(218, 231, 239, 0.68);
  font-size: 0.68rem;
}

.music-track-weight input {
  width: 3.6rem;
  min-height: 1.9rem;
  padding-inline: 0.35rem;
}

.music-track-assigned {
  color: #74e7d2;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.music-track-empty,
.music-editor-status {
  margin: 0;
  color: rgba(220, 233, 240, 0.68);
  font-size: 0.75rem;
  line-height: 1.45;
}

.music-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.music-library-actions .danger-action {
  border-color: rgba(224, 102, 118, 0.58);
  background: linear-gradient(180deg, rgba(90, 40, 49, 0.94), rgba(45, 20, 26, 0.98));
}

.music-library-actions .primary-action {
  min-height: 2.3rem;
  padding: 0.42rem 0.8rem;
}

.music-upload-button {
  display: grid;
  place-items: center;
  cursor: pointer;
}

.music-editor-status {
  min-height: 1.1rem;
  margin-bottom: 1.5rem;
  color: #83ead6;
}

.music-editor-status.is-error {
  color: #ff9ba8;
}

.music-disclaimer-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 6, 9, 0.82);
  backdrop-filter: blur(7px);
}

.music-disclaimer-overlay[hidden] {
  display: none;
}

.music-disclaimer-dialog {
  width: min(92vw, 38rem);
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
  border: 1px solid rgba(111, 208, 220, 0.42);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(18, 31, 41, 0.99), rgba(7, 13, 19, 0.995));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
}

.music-disclaimer-dialog h3 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

.music-disclaimer-dialog p {
  margin: 0.65rem 0;
  color: rgba(229, 240, 245, 0.8);
  line-height: 1.5;
}

.music-disclaimer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.15rem;
}

.music-track-dialog { box-sizing: border-box; max-height: calc(100dvh - 32px); overflow: auto; }
.music-track-dialog::backdrop { background: rgba(2, 6, 9, .82); }
.music-track-dialog[open] { animation: config-tooltip-in 150ms ease both; }
.music-track-dialog form { display: grid; gap: 8px; }
.music-track-dialog form > label { color: #d0e6f4; font-weight: 750; }
.music-track-dialog input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #526772; border-radius: 4px; background: #0c151b; color: #e8f3f5; font: inherit; }
.music-track-dialog .music-disclaimer-actions button { min-height: 44px; }
#music-track-error { color: #ff9ba8; }
@media (prefers-reduced-motion: reduce) { .music-track-dialog[open] { animation: none; } }

.training-challenge-menu-actions .menu-action-button {
  min-width: min(12rem, 42vw);
  min-height: 3.4rem;
  padding: 0.65rem 1rem;
  border-radius: 6px;
}

/* Training challenge selection and zoomed detail view. */
#training-challenge-menu-page .training-challenge-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
  justify-self: center;
}

#training-challenge-menu-page .training-challenge-list .mode-button {
  min-height: clamp(116px, 17vh, 168px);
}

.training-challenge-detail-page {
  width: min(760px, 88vw);
  margin: auto;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 3vh, 28px);
  text-align: center;
}

.training-challenge-detail-page > .eyebrow {
  margin: 0;
  color: rgba(119, 221, 242, 0.72);
}

.training-challenge-detail-page .menu-page-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
}

.training-challenge-detail-description {
  max-width: 58ch;
  margin: 0;
  color: rgba(224, 237, 244, 0.88);
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.55;
}

.training-challenge-detail-record {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: min(320px, 72vw);
  padding: 14px 22px;
  border-block: 1px solid rgba(98, 197, 217, 0.28);
}

.training-challenge-detail-record span {
  color: rgba(188, 211, 221, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.training-challenge-detail-record strong {
  color: #f5fbff;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.training-challenge-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 14px;
  width: min(680px, 90vw);
}

.training-challenge-detail-actions > button {
  min-height: 62px;
  color: #f7fffd;
}

.training-challenge-detail-page > .eyebrow,
.training-challenge-detail-description,
.training-challenge-detail-record,
.training-challenge-detail-actions {
  transform: translate3d(var(--menu-item-x), var(--menu-item-y), 0);
  transition: transform 220ms var(--menu-motion-ease);
}

@media (max-width: 700px) {
  #training-challenge-menu-page .training-challenge-list,
  .training-challenge-detail-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #training-challenge-menu-page .training-challenge-list {
    overflow-y: auto;
  }

  .training-challenge-detail-actions > button {
    min-height: 52px;
  }
}

@media (max-width: 600px) {
  .training-challenge-menu-actions .menu-action-button {
    min-width: 0;
    flex: 1;
  }

  .local-profile-name,
  .local-profile-records {
    grid-template-columns: minmax(0, 1fr);
  }

  .options-subpage-heading small {
    position: static;
  }
}

@media (max-width: 820px), (pointer: coarse) {
  .options-menu-page {
    width: min(96vw, 46rem);
  }

  .options-category-menu,
  .music-editor-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .options-category-menu .mode-button {
    min-height: 4.5rem;
  }

  .music-track-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .music-track-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .options-subpage .audio-setting {
    grid-template-columns: 2.25rem minmax(4rem, auto) minmax(5rem, 1fr) 2.8rem;
  }

  .options-menu-page > .local-profile-panel.options-subpage {
    width: calc(100% - 0.5rem);
    min-height: 0;
  }
}

/* Universal responsive layout contract. */
html, body { width: 100%; height: 100%; min-width: 0; min-height: 0; }
body { height: 100dvh; }
body > .screen, body > .app-shell { min-width: 0; min-height: 0; }
html[data-layout-preparing] #game-screen .play-panel { visibility: hidden; }
.screen {
  width: 100%;
  min-height: 100dvh;
  padding:
    max(var(--game-outer-gap), env(safe-area-inset-top))
    max(var(--game-outer-gap), env(safe-area-inset-right))
    max(var(--game-outer-gap), env(safe-area-inset-bottom))
    max(var(--game-outer-gap), env(safe-area-inset-left));
}
.app-shell {
  width: min(var(--layout-usable-width, calc(100vw - 20px)), 120rem);
  height: var(--layout-usable-height, 100dvh);
  gap: var(--game-gap);
  padding: 0;
}
.main-menu-screen .screen-panel,
.patch-notes-panel,
.multiplayer-room-shell {
  max-width: var(--layout-menu-max, 76rem);
  max-height: var(--layout-usable-height, calc(100dvh - 2rem));
}
.main-menu-page, .options-menu-page, .multiplayer-room-shell,
.duel-config-shell, .play-panel, .board-stage, .duel-arena,
.tutorial-dialogue, .tutorial-panel { min-width: 0; min-height: 0; }
.main-menu-page, .options-menu-page, .duel-config-shell,
.multiplayer-room-shell, .play-panel { container-type: inline-size; }

.mode-button > span, .primary-action, .duel-config-start button,
.multiplayer-room-actions button { font-size: max(var(--primary-font-size), 0.75rem); }
.mode-button > small, .duel-config-hint, .tutorial-dialogue p,
.tutorial-objective { font-size: max(var(--secondary-font-size), 0.625rem); }

.main-menu-screen .main-menu-page .mode-button > span {
  font-size: var(--mode-title-font-size, 1.65rem);
  font-weight: 900;
  line-height: 1.08;
}

.main-menu-screen .main-menu-page .mode-button > small {
  font-size: var(--mode-description-font-size, 0.9rem);
  line-height: 1.38;
}

.main-menu-screen .options-category-menu .mode-button > strong {
  font-size: var(--mode-title-font-size, 1.65rem);
  line-height: 1.08;
}

.main-menu-screen .options-category-menu .mode-button > span {
  font-size: var(--mode-description-font-size, 0.9rem);
  font-weight: 600;
  line-height: 1.38;
}

.app-shell.is-ai-duel .duel-arena {
  --duel-status-width: var(--layout-duel-status-width);
  --duel-board-width: var(--layout-duel-board-width);
  --duel-gap: var(--game-gap);
  grid-template-columns:
    var(--duel-status-width) minmax(0, var(--duel-board-width))
    minmax(0, var(--duel-board-width)) var(--duel-status-width);
  grid-template-rows: minmax(0, auto) var(--layout-duel-lower-height);
  grid-template-areas:
    "player-hud player-board ai-board ai-hud"
    ". player-lower ai-lower .";
  width: min(100%, var(--layout-usable-width));
  min-height: 0;
  height: min(100%, var(--layout-usable-height));
  column-gap: var(--duel-gap);
  row-gap: max(4px, calc(var(--game-gap) * 0.35));
}
.app-shell.is-ai-duel .board-stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "board";
  min-height: 0;
  height: 100%;
}
.app-shell.is-ai-duel .duel-arena { grid-area: board; }
.app-shell.is-ai-duel .board-container,
.app-shell.is-ai-duel canvas {
  width: var(--layout-duel-board-width) !important;
  max-width: 100%;
  max-height: 100%;
}
.app-shell.is-ai-duel .board-container { display: block; }
.app-shell.is-ai-duel .board-container canvas { grid-area: auto; }
.app-shell.is-ai-duel .duel-status-panel { overflow: hidden; }

/* Final Duel telemetry allocation. Both sides consume the same measured rail. */
.app-shell.is-ai-duel .duel-status-panel {
  width: var(--layout-duel-status-width);
  max-width: var(--layout-duel-status-width);
  padding-inline: clamp(0.55rem, 0.85vw, 0.9rem);
  overflow: visible;
}

.app-shell.is-ai-duel .duel-status-heading,
.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading {
  grid-template-columns: minmax(0, 1fr) minmax(5.6rem, 46%);
  gap: clamp(0.3rem, 0.55vw, 0.55rem);
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading {
  grid-template-columns: minmax(5.6rem, 46%) minmax(0, 1fr);
}

.app-shell.is-ai-duel .duel-status-heading .duel-board-label {
  min-width: 0;
  padding: clamp(0.35rem, 0.7vh, 0.58rem) clamp(0.35rem, 0.55vw, 0.65rem);
  font-size: var(--hud-label-font-size);
}

.app-shell.is-ai-duel .duel-status-heading .duel-b2b,
.app-shell.is-ai-duel .duel-status-panel .duel-b2b {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.app-shell.is-ai-duel .duel-status-heading .duel-b2b strong {
  font-size: var(--hud-critical-font-size);
}

.app-shell.is-ai-duel .duel-matchless-wrap,
.app-shell.is-ai-duel .duel-misfire-segments {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.app-shell.is-ai-duel .duel-live-stats {
  --duel-stat-slot-height: clamp(2.8rem, 5.15vh, 3.45rem);
  gap: clamp(0.38rem, 0.7vh, 0.6rem);
}

.app-shell.is-ai-duel .duel-live-stat > span {
  font-size: var(--hud-label-font-size);
}

.app-shell.is-ai-duel .duel-live-stat strong,
.app-shell.is-ai-duel .duel-live-stat.is-time strong.is-clock {
  font-size: var(--hud-primary-font-size);
}

.app-shell.is-ai-duel .duel-live-stat small {
  font-size: var(--hud-micro-font-size);
}

@media (min-width: 861px) and (min-height: 680px) {
  .app-shell.is-ai-duel .duel-lower-board-label {
    width: 100%;
    max-width: none;
    padding: 0.24rem 0.8rem;
    font-size: var(--hud-label-font-size);
  }
}

:root {
  --single-status-width: var(--layout-single-status-width, 8rem);
  --single-play-gap: var(--game-gap);
  --single-test-panel-width: var(--layout-test-panel-width, 12rem);
}
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel,
.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  --single-play-board-size: var(--layout-single-board-size);
  gap: var(--game-gap);
}
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .play-panel {
  --single-test-board-size: var(--layout-test-board-size);
}
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage,
.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  column-gap: var(--game-gap);
}
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .player-board-container,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) #game-board {
  width: var(--layout-single-board-size) !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  max-height: 100%;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail {
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: calc(var(--game-gap) * 0.65);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail > div {
  align-items: center;
  text-align: center;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip span,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail span {
  font-size: var(--hud-label-font-size);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip strong,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail strong {
  font-size: var(--hud-primary-font-size);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div:first-child strong,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-primary strong {
  font-size: var(--hud-critical-font-size);
}
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .player-board-container,
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) #game-board {
  width: var(--layout-test-board-size) !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  max-height: 100%;
}

/* Multiplayer-style Tests use the same solver-owned board/HUD contract. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
  --test-status-width: var(--layout-single-status-width);
  --test-panel-width: var(--layout-test-panel-width);
  --test-board-width: var(--layout-test-board-size);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
  grid-template-columns: var(--test-status-width) minmax(0, var(--test-board-width));
  width: max-content;
  max-width: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge #game-board {
  width: var(--test-board-width) !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  max-height: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  width: var(--test-board-width);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
  width: var(--test-status-width);
  max-width: var(--test-status-width);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-b2b {
  width: 100%;
  max-width: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-b2b strong {
  font-size: clamp(1.7rem, 2.2vw, 2.35rem);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-matchless-wrap,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-misfire-segments {
  width: 100%;
}

.app-shell.is-tutorial.is-tutorial-challenge .turn-free-move {
  display: none !important;
}

/* Loading and multiplayer entry are viewport-centred at every size. */
.loading-screen,
.multiplayer-room-screen {
  height: 100dvh;
  min-height: 100dvh;
  place-items: center;
  align-content: center;
}

.loading-screen > .screen-panel,
.multiplayer-room-screen > .multiplayer-room-shell {
  align-self: center;
  justify-self: center;
  margin-block: auto;
}
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .board-stage {
  row-gap: var(--game-gap);
  column-gap: var(--game-gap);
}
.app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) canvas {
  max-width: 100%;
  max-height: 100%;
}

.duel-config-shell { width: min(var(--layout-menu-max), 100%); height: 100%; }
.pause-popup, .duel-end-popup, .leaderboard-popup, .username-prompt-popup,
.music-disclaimer-dialog {
  max-width: min(94vw, var(--layout-menu-max));
  max-height: min(92dvh, var(--layout-usable-height));
  overflow: auto;
  overscroll-behavior: contain;
}

html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-live-stats,
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-status-heading .duel-board-label,
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-lower-board-label {
  display: none;
}
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-status-heading {
  display: block;
}
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-status-heading .duel-b2b {
  width: 100%;
  max-width: 100%;
}
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-status-heading .duel-b2b strong {
  font-size: clamp(1rem, 5vw, 1.35rem);
}
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-status-panel {
  width: var(--layout-duel-status-width);
  max-width: var(--layout-duel-status-width);
  min-width: 0;
  gap: 0.25rem;
  padding-inline: 0;
}
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-counter-stack {
  max-width: 100%;
}
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-b2b,
html[data-layout-family^="mobile-"] .app-shell.is-ai-duel .duel-b2b > * {
  min-width: 0;
  max-width: 100%;
}

@container (max-width: 520px) {
  .duel-config-content, .duel-config-body, .duel-level-buttons,
  .options-category-menu, .multiplayer-type-options, .multiplayer-player-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-layout-preparing] *, html[data-layout-preparing] *::before,
  html[data-layout-preparing] *::after { transition-duration: 0.01ms !important; }
}

.single-status-stack {
  display: contents;
}

.tutorial-demo-combos {
  display: contents;
}

/* A board-relative slot shared by lesson demos, independent of counter bumps. */
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-combos {
  display: flex;
  align-self: flex-start;
  align-items: center;
  width: min(100%, 112px);
  height: 40px;
  margin-top: 8px;
  z-index: 6;
  overflow: visible;
}

html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .player-board-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-combos > :is(.combo-counter, .chain-counter) {
  --counter-y: 0;
  position: relative;
  inset: auto;
  width: 100%;
  transform: none;
  overflow: visible;
}

html[data-layout-family] #game-screen.is-tutorial.is-tutorial-combo-page .tutorial-demo-combos > #combo-counter {
  display: none !important;
}

html[data-layout-family] #game-screen.is-tutorial.is-tutorial-paired-demo :is(#combo-counter, #chain-counter) { display: none !important; }
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-paired-demo :is(.player-board-container, .ai-board-container) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page.is-tutorial-paired-demo:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-combos {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px 40px; gap: 8px; height: 88px; flex: 0 0 88px; align-self: center;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-paired-demo .tutorial-demo-combos > .combo-counter { grid-area: 1 / 1; }
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-paired-demo .tutorial-demo-combos > .chain-counter { grid-area: 2 / 1; }
.tutorial-opponent-counters[hidden] { display: none !important; }

/* Demo telemetry belongs to the board's HUD, never its intrinsic sizing. */
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) :is(.player-board-container, .ai-board-container) {
  height: auto; min-height: 0; align-self: center;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text:is(.is-tutorial-paired-demo, .is-tutorial-duel-intro-page):not(.is-tutorial-combo-page):not(.is-tutorial-menu-scene) :is(.combo-counter, .chain-counter) {
  display: none !important;
}
.tutorial-demo-surface { position: relative; width: 100%; max-width: 100%; }
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-surface > .tutorial-demo-combos {
  position: absolute; top: 0; right: calc(100% + 12px); display: flex; flex-direction: column;
  width: 140px; height: 88px; margin: 0; gap: 8px; align-items: stretch; overflow: visible;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-surface[data-side="ai"] > .tutorial-demo-combos {
  right: auto; left: calc(100% + 12px);
}
html[data-layout-family] #game-screen.is-tutorial .tutorial-demo-surface .tutorial-demo-combos > :is(.combo-counter, .chain-counter) {
  width: 100%; flex: 0 0 40px; margin: 0;
}
html[data-layout-family] #game-screen.is-tutorial .tutorial-demo-surface .tutorial-demo-combos #b2b-board-meter {
  width: 100%; margin: 0; align-self: stretch; flex: 0 0 auto;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-surface > .tutorial-demo-combos.has-demo-mult { height: auto; }
.tutorial-demo-side-stat { position: absolute; left: calc(100% + 12px); top: 0; width: 140px; }
.tutorial-demo-side-stat .duel-live-stat { display: flex; flex-direction: column; align-items: flex-start; height: auto; }
.tutorial-demo-side-stat .duel-live-stat > span { font-size: 9px; text-transform: uppercase; }
.tutorial-demo-side-stat .duel-live-stat strong { font-size: 28px; line-height: 1.1; }
@media (min-width: 1051px) {
  #game-screen.is-tutorial.is-tutorial-paired-demo .board-stage {
    --tutorial-special-tile: min(6rem, 10vh, calc((100vw - 368px) / 10));
    --tutorial-combo-tile: min(5rem, 8vh, calc((100vw - 368px) / 6));
  }
  html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text:is(.is-tutorial-demo-hud, .is-tutorial-double-tesseract-page, .is-tutorial-attacking-page, .is-tutorial-combat-demo-page):not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: 140px calc(var(--tutorial-mult-tile, var(--tutorial-attack-tile, var(--tutorial-combat-tile, var(--tutorial-dt-tile)))) * 8 + 16px) minmax(0, 1fr);
    grid-template-rows: auto; grid-template-areas: ". board dialogue"; gap: 18px;
  }
  html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-rows: auto auto auto;
    grid-template-areas: ". board dialogue" ". hud dialogue" ". right right";
  }
  html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: 140px calc(var(--tutorial-attack-tile) * 8 + 16px) 140px minmax(0, 1fr);
    grid-template-areas: ". board . dialogue";
  }
}
@media (max-width: 1050px) {
  .tutorial-demo-surface { padding-top: 40px; }
  #game-screen.is-tutorial-demo-hud .tutorial-demo-surface { padding-top: 116px; }
  html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-surface > .tutorial-demo-combos,
  html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-ai-duel):not(.is-tutorial-menu-scene) .tutorial-demo-surface[data-side="ai"] > .tutorial-demo-combos {
    top: 0; left: 0; right: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 28px; width: min(180px, 100%); height: 28px;
  }
  html[data-layout-family] #game-screen.is-tutorial .tutorial-demo-surface .tutorial-demo-combos > :is(.combo-counter, .chain-counter) {
    grid-area: auto; height: 28px !important; max-height: 28px !important; flex: 0 0 28px;
  }
  html[data-layout-family] #game-screen.is-tutorial .tutorial-demo-surface .tutorial-demo-combos > :is(.combo-counter, .chain-counter) strong { font-size: 14px !important; line-height: 15px; }
  html[data-layout-family] #game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page .tutorial-demo-surface > .tutorial-demo-combos.has-demo-mult {
    width: 100%; height: 104px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 36px 28px 28px;
  }
  html[data-layout-family] #game-screen.is-tutorial .tutorial-demo-surface .has-demo-mult #b2b-board-meter { grid-area: 1 / 1 / 4 / 2; max-width: 140px; }
  html[data-layout-family] #game-screen.is-tutorial .tutorial-demo-surface .has-demo-mult > .combo-counter { grid-area: 2 / 2; }
  html[data-layout-family] #game-screen.is-tutorial .tutorial-demo-surface .has-demo-mult > .chain-counter { grid-area: 3 / 2; }
  .tutorial-demo-side-stat { left: auto; right: 0; top: 0; width: calc(50% - 4px); }
  .tutorial-demo-side-stat .duel-live-stat { align-items: flex-end; }
  .tutorial-demo-side-stat .duel-live-stat strong { font-size: 22px; }
}

/* Responsive side-rail contract. Any direct child added now or later must
 * remain inside the width assigned by the layout solver. Intrinsic text and
 * controls may wrap or shrink, but may never claim space from the board. */
[data-layout-rail="single-status"] {
  min-width: 0;
  contain: layout;
}

[data-layout-rail="single-status"] > [data-layout-rail-item] {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

[data-layout-rail="single-status"] > [data-layout-rail-item] > * {
  min-width: 0;
  max-width: 100%;
}

/* Final status ownership: MULT, Misfire and transient counters share one rail
 * without occupying the board or the centred score telemetry. */
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack {
  grid-area: left;
  display: flex;
  flex-direction: column;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  gap: clamp(0.42rem, 0.9vh, 0.7rem);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter {
  --counter-y: 0px;
  grid-area: auto;
  grid-row: auto;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  transform: none;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter {
  order: 0;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter {
  order: 1;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter {
  order: 2;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .training-free-move {
  order: 3;
}

.survival-drain-stat {
  display: none;
}

.app-shell.is-training-survival .single-status-stack {
  align-self: stretch;
  min-height: var(--training-centred-board-size);
}

.app-shell.is-training-survival .survival-drain-stat:not([hidden]) {
  order: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: auto;
  min-width: 0;
  text-align: right;
}

.app-shell.is-training-survival .survival-drain-stat > span {
  color: rgba(203, 215, 222, 0.72);
  font-size: clamp(0.64rem, 1.1vw, 0.82rem);
  font-weight: 850;
  text-transform: uppercase;
}

.app-shell.is-training-survival .survival-drain-stat > div {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.34rem;
}

.sandbox-control-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.35rem, 0.7vw, 0.6rem);
  width: 100%;
  min-width: 0;
}

.sandbox-control-tools[hidden] {
  display: none;
}

.sandbox-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.35rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(87, 200, 205, 0.34);
  background: rgba(8, 22, 29, 0.86);
  color: #e9fbff;
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  font-weight: 850;
  cursor: pointer;
  overflow: hidden;
}

.sandbox-mode-toggle > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sandbox-mode-toggle input {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 1.2rem;
  margin: 0;
  border: 1px solid rgba(163, 208, 213, 0.4);
  border-radius: 999px;
  background: rgba(4, 10, 13, 0.88);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.sandbox-mode-toggle input::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.16rem;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: #9aa9ad;
  transition: transform 140ms ease, background 140ms ease;
}

.sandbox-mode-toggle input:checked {
  border-color: rgba(85, 240, 221, 0.72);
  background: #176a68;
}

.sandbox-mode-toggle input:checked::before {
  transform: translateX(1.15rem);
  background: #eaffff;
}

.sandbox-mode-toggle input:focus-visible {
  outline: 2px solid #8af8ec;
  outline-offset: 2px;
}

.sandbox-mode-toggle:has(input:disabled) {
  opacity: 0.36;
  cursor: default;
}

.sandbox-mode-toggle input:disabled {
  cursor: default;
}

.app-shell.is-sandbox-experiment .board-stat-strip {
  visibility: hidden;
  opacity: 0;
}

.sandbox-multiplayer-stats {
  order: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(0.38rem, 0.8vh, 0.62rem);
  width: min(100%, 9rem);
  margin-top: auto;
  color: #f4f8fb;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sandbox-multiplayer-stats[hidden] {
  display: none;
}

.sandbox-live-stat {
  width: 100%;
  min-width: 0;
  line-height: 1;
}

.sandbox-live-stat > span {
  display: block;
  margin-bottom: 0.1rem;
  color: rgba(218, 231, 239, 0.68);
  font-size: var(--hud-label-font-size, 0.62rem);
  font-weight: 900;
  text-transform: uppercase;
}

.sandbox-live-stat > div {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.28rem;
  white-space: nowrap;
}

.sandbox-live-stat strong {
  color: #fff;
  font-size: var(--hud-primary-font-size, 1.65rem);
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.sandbox-live-stat small {
  color: rgba(230, 240, 246, 0.72);
  font-size: var(--hud-micro-font-size, 0.58rem);
  font-weight: 850;
}

.app-shell.is-training-survival .survival-drain-stat strong {
  font-size: clamp(1.8rem, 4.4vw, 3.1rem);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: 0;
}

.app-shell.is-training-survival .survival-drain-stat small {
  color: rgba(222, 232, 237, 0.74);
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  font-weight: 800;
  white-space: nowrap;
}

/* Player and opponent Misfire meters consume the same maximum rail width. */
.app-shell.is-ai-duel .duel-status-heading,
.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading,
.app-shell.is-ai-duel .duel-status-heading .duel-b2b,
.app-shell.is-ai-duel .duel-matchless-wrap,
.app-shell.is-ai-duel .duel-misfire-segments {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
}

@media (min-width: 861px) and (min-height: 680px) {
  .app-shell.is-ai-duel .duel-status-heading,
  .app-shell.is-ai-duel .ai-duel-panel .duel-status-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.is-ai-duel .player-duel-panel .duel-status-heading .duel-b2b,
  .app-shell.is-ai-duel .ai-duel-panel .duel-status-heading .duel-b2b {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (min-width: 861px) and (max-height: 679px) {
  .app-shell.is-ai-duel .duel-status-heading {
    grid-template-columns: minmax(4.6rem, 36%) minmax(0, 1fr);
  }

  .app-shell.is-ai-duel .ai-duel-panel .duel-status-heading {
    grid-template-columns: minmax(0, 1fr) minmax(4.6rem, 36%);
  }
}

/* Boards own an explicit aspect-ratio row. The resource HUD begins only after
 * that row, preventing the HP bar from covering the final gem row. */
.app-shell.is-ai-duel .player-board-container,
.app-shell.is-ai-duel .ai-board-container {
  box-sizing: border-box;
  width: var(--layout-duel-board-width) !important;
  height: calc(var(--layout-duel-board-width) * 1.25);
  min-height: 0;
  overflow: visible;
}

.app-shell.is-ai-duel .player-board-container canvas,
.app-shell.is-ai-duel .ai-board-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.app-shell.is-ai-duel .duel-hud-row,
.app-shell.is-ai-duel .ai-duel-panel .duel-hud-row {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: start;
  padding-top: clamp(0.22rem, 0.5vh, 0.38rem);
  contain: layout;
  justify-self: center;
  inline-size: min(100%, 46rem);
}

/* Multiplayer-style Tests use the same board/HUD stack from their first
 * interactive frame through completion. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
  grid-template-columns: var(--test-status-width) var(--test-board-width);
  grid-template-rows: calc(var(--test-board-width) * 1.25) auto;
  grid-template-areas:
    "player-hud player-board"
    "player-hud player-lower";
  align-items: start;
  align-content: center;
  place-self: center;
  width: calc(var(--test-status-width) + var(--game-gap) + var(--test-board-width));
  height: max-content;
  gap: 0 var(--game-gap);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container {
  align-self: start;
  width: var(--test-board-width) !important;
  height: calc(var(--test-board-width) * 1.25);
  min-height: 0;
  overflow: hidden;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  align-self: start;
  box-sizing: border-box;
  width: var(--test-board-width);
  margin: 0;
  padding-top: clamp(0.22rem, 0.5vh, 0.38rem);
}

/* Narrow landscape Tests retain side-by-side progress instead of starving the
 * board/HUD row. Portrait layouts continue to stack through the earlier rule. */
@media (max-width: 850px) and (orientation: landscape) {
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
    grid-template-columns: minmax(0, 1fr) var(--test-panel-width);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "test-play test-panel";
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena {
    grid-template-columns: var(--test-status-width) minmax(0, var(--test-board-width));
    grid-template-rows: calc(var(--test-board-width) * 1.25) minmax(0, 1fr);
    grid-template-areas:
      "player-hud player-board"
      "player-hud player-lower";
    place-self: center;
    width: max-content;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
    min-height: 0;
    overflow: auto;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 68px;
    grid-template-areas: "heading" "stats" "counters";
    gap: 4px;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-status-heading {
    grid-area: heading;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 1fr);
    gap: 2px;
    min-height: 0;
    margin: 0;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-live-stat-spacer { display: none; }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-live-stat {
    display: grid; grid-template-rows: 10px minmax(0, 1fr); gap: 0; min-height: 0;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-live-stat > span { font-size: 9px; line-height: 1; }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-live-stat > div {
    display: flex; align-items: center; min-height: 0; gap: 2px; line-height: 1;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-live-stat strong {
    font-size: 18px; line-height: 1; padding: 0; min-height: 0;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-live-stat small { font-size: 8px; }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-counter-stack {
    grid-area: counters;
    display: grid; grid-template-rows: repeat(2, 32px); gap: 4px;
    height: 68px; min-height: 0; margin: 0;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-counter-stack :is(.combo-counter, .chain-counter) {
    height: 32px; min-height: 0; padding: 2px;
  }
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-counter-stack strong { font-size: 18px; }
}

/* Singleplayer and Training use explicit sibling regions. The solver reserves
 * equal status rails, so telemetry no longer needs viewport-sized padding to
 * simulate a position beside the board. */
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  --single-play-board-size: var(--layout-single-board-size);
  --training-centred-board-size: var(--layout-single-board-size);
  grid-template-columns:
    calc(var(--single-status-width) + var(--game-gap) + var(--single-play-board-size))
    var(--single-status-width);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage stats";
  justify-content: center;
  gap: var(--game-gap);
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-area: stage;
  grid-template-columns: var(--single-status-width) var(--single-play-board-size);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "left board";
  width: auto;
  padding: 0;
  column-gap: var(--game-gap);
}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board"
    ". meter";
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  grid-area: stats;
  z-index: auto;
  display: grid;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .player-board-container,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) #game-board {
  width: var(--single-play-board-size) !important;
}

.app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail {
  width: 100%;
}

/* Survival owns a real combat HUD beneath the board. Keep this override after
 * the generic Training layout so later challenge sizing cannot displace it. */
.app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left board right"
    ". combat .";
}

@media (max-width: 880px), (max-height: 700px) {
  .app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
    grid-template-areas:
      "left board right"
      ". combat .";
  }
}

.app-shell.is-training-survival #pp-meter {
  display: none;
}

/* Authoritative component contract: the layout manager selects the largest
 * valid font and the lower combat HUD divides only its allocated row. */
[data-layout-fit] {
  max-width: 100%;
  font-size: var(--layout-fit-font-size) !important;
  white-space: nowrap;
}

.app-shell.is-ai-duel .duel-hud-row,
.app-shell.is-ai-duel .ai-duel-panel .duel-hud-row,
.app-shell.is-training-survival .player-duel-panel .duel-hud-row {
  grid-template-rows:
    clamp(2.2rem, 4.3vh, 2.75rem)
    clamp(1.2rem, 2.2vh, 1.5rem)
    minmax(1.8rem, 2rem);
  gap: clamp(0.3rem, 0.7vh, 0.46rem);
  padding-top: calc(var(--game-gap) * 0.2);
  height: max-content;
  align-content: start;
}

.app-shell.is-ai-duel .duel-hp,
.app-shell.is-training-survival .duel-hp {
  height: 100%;
}

.app-shell.is-ai-duel .duel-shield-meter,
.app-shell.is-training-survival .duel-shield-meter {
  height: 100%;
}

/* Queue contents never participate in resource-bar sizing. An empty queue is
 * visually blank, but its measured lane remains reserved for stable HUDs. */
.app-shell.is-ai-duel .duel-hud-row > .duel-hp,
.app-shell.is-ai-duel .duel-hud-row > .duel-shield-meter,
.app-shell.is-ai-duel .duel-hud-row > .duel-queue,
.app-shell.is-training-survival .duel-hud-row > .duel-hp,
.app-shell.is-training-survival .duel-hud-row > .duel-shield-meter,
.app-shell.is-training-survival .duel-hud-row > .duel-queue {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-shell.is-ai-duel .duel-queue[hidden] {
  display: block !important;
  visibility: hidden;
}

/* Survival keeps an empty packet lane between waves so its playfield does not
 * jump when the next generated packet arrives. */
.app-shell.is-training-survival .duel-queue[hidden] {
  display: block !important;
  visibility: hidden;
}

/* MULT and transient counters get breathing room inside the wider measured
 * rail, including their scale/glow animation extents. */
.app-shell.is-ai-duel .duel-status-heading,
.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading,
.app-shell.is-ai-duel .duel-counter-stack {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}

.app-shell.is-ai-duel .duel-counter-stack {
  padding-block: 0.35rem;
}

/* The widened telemetry rail protects animations from clipping. Instruments
 * share one board-facing edge within that rail: player right, opponent left. */
.app-shell.is-ai-duel .duel-status-heading .duel-b2b,
.app-shell.is-ai-duel .duel-status-panel .duel-b2b {
  width: min(84%, 9rem);
  max-width: 9rem;
}

.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
  width: min(72%, 8rem);
  max-width: 8rem;
  gap: clamp(0.18rem, 0.35vh, 0.28rem);
}

.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .combo-counter,
.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .chain-counter {
  min-height: clamp(1.65rem, 3.4vh, 1.95rem);
  padding: 0.2rem 0.3rem;
}

.app-shell.is-ai-duel .player-duel-panel .duel-status-panel {
  align-items: flex-end;
  text-align: right;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-panel {
  align-items: flex-start;
  text-align: left;
}

.app-shell.is-ai-duel .player-duel-panel .duel-status-heading .duel-b2b,
.app-shell.is-ai-duel .player-duel-panel .duel-status-panel .duel-counter-stack,
.app-shell.is-ai-duel .player-duel-panel .turn-free-move,
.app-shell.is-ai-duel .player-duel-panel .duel-live-stats {
  align-self: flex-end;
  justify-self: end;
  margin-right: 0;
  margin-left: auto;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading .duel-b2b,
.app-shell.is-ai-duel .ai-duel-panel .duel-status-panel .duel-counter-stack,
.app-shell.is-ai-duel .ai-duel-panel .turn-free-move,
.app-shell.is-ai-duel .ai-duel-panel .duel-live-stats {
  align-self: flex-start;
  justify-self: start;
  margin-right: auto;
  margin-left: 0;
}

.app-shell.is-ai-duel .player-duel-panel .duel-status-heading .duel-b2b {
  text-align: right;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-status-heading .duel-b2b {
  text-align: left;
}

.app-shell.is-ai-duel .duel-live-stats {
  width: min(84%, 9rem);
  max-width: 9rem;
}

.app-shell.is-ai-duel .duel-hp strong {
  font-size: clamp(1.9rem, 4.35vh, 2.5rem) !important;
  line-height: 1;
}

/* The live value is the sole child span. An older max-value presentation rule
 * made that span tiny even when its parent had the correct fitted HUD size. */
.app-shell.is-ai-duel .duel-hp strong > span:last-child,
.app-shell.is-training-survival .duel-hp strong > span:last-child,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-hp strong > span:last-child {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
}

/* Multiplayer-style Tests use the same lower-combat proportions as live
 * play, scaled only enough to preserve their adjacent objective panel. */
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  grid-template-rows:
    clamp(2.1rem, 4vh, 2.55rem)
    clamp(1.1rem, 2vh, 1.35rem)
    minmax(1.7rem, 1.95rem);
}

.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hp strong {
  font-size: clamp(1.55rem, 3.4vh, 2.15rem) !important;
  line-height: 1;
}

/* Score telemetry lives to the right of the board in these modes. Keep its
 * text and hierarchy facing back towards the playfield. */
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail > div,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-primary .training-score-best {
  align-items: flex-start;
  align-self: flex-start;
  text-align: left;
}

/* Major destinations share the same target footprint as Sandbox. Back and
 * Options remain compact so the command hierarchy stays clear. */
#main-menu-root .tutorial-menu-entry,
#main-menu-root #training-menu-button,
#battle-menu-page > .mode-button,
#ai-duel-mode-page > .mode-button {
  width: 100%;
  min-height: 140px;
}

#main-menu-root .tutorial-menu-entry > #tutorial-menu-button {
  height: 100%;
  min-height: 140px;
}

.main-menu-screen .main-menu-page:not(.options-menu-page) > .mode-button > span,
.main-menu-screen .tutorial-menu-entry > .mode-button > span,
.main-menu-screen .training-challenge-list > .mode-button > span {
  font-size: clamp(1.625rem, 2.3vw, 2.25rem);
  line-height: 1.05;
}

/* Challenge selection uses an eight-column, two-row matrix. Each challenge
 * occupies two tracks; the three entries on the second row are centred. */
#training-challenge-menu-page {
  width: min(1120px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  margin-inline: auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: stretch;
  align-content: center;
  justify-self: center;
  gap: clamp(12px, 2vh, 22px);
  box-sizing: border-box;
}

#training-challenge-menu-page .training-challenge-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.35vw, 18px);
  width: 100%;
  max-width: none;
  min-height: 0;
  align-self: center;
  justify-self: center;
  place-content: center;
  box-sizing: border-box;
  padding: 4px 14px;
  overflow: visible;
}

#training-challenge-menu-page .training-challenge-list > .mode-button {
  grid-column: span 2;
  width: 100%;
  min-width: 0;
  min-height: clamp(92px, 15vh, 142px);
  height: 100%;
  padding: clamp(12px, 1.5vw, 20px);
}

.main-menu-screen #training-challenge-menu-page .training-challenge-list > .mode-button > span {
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  line-height: 1.08;
}

.main-menu-screen #training-challenge-menu-page .training-challenge-list > .mode-button > small {
  max-width: 28ch;
  font-size: clamp(0.7rem, 0.9vw, 0.88rem);
  line-height: 1.3;
}

#training-challenge-menu-page .training-challenge-menu-actions {
  justify-self: center;
}

@media (max-width: 900px) {
  #training-challenge-menu-page {
    width: min(720px, calc(100% - 24px));
    max-width: calc(100% - 24px);
  }

  #training-challenge-menu-page .training-challenge-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    overflow-y: auto;
    padding: 2px;
  }

  #training-challenge-menu-page .training-challenge-list > .mode-button,
  #training-challenge-menu-page .training-challenge-list > .mode-button:nth-child(n) {
    grid-column: span 2;
    min-height: 96px;
  }
}

@media (max-width: 540px) {
  #training-challenge-menu-page {
    width: min(440px, calc(100% - 12px));
    max-width: calc(100% - 12px);
  }

  #training-challenge-menu-page .training-challenge-list {
    grid-template-columns: minmax(0, 1fr);
  }

  #training-challenge-menu-page .training-challenge-list > .mode-button,
  #training-challenge-menu-page .training-challenge-list > .mode-button:nth-child(n) {
    grid-column: 1;
    min-height: 88px;
  }
}

@media (min-width: 901px) {
  #main-menu-root {
    width: min(900px, 100%);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(280px, 420px));
    grid-template-areas:
      "battle battle"
      "tutorial training"
      "options options"
      "fullscreen fullscreen";
    justify-content: center;
    column-gap: clamp(24px, 4vw, 48px);
  }

  #main-menu-root #battle-menu-button {
    width: min(420px, 100%);
    min-height: 140px;
    justify-self: center;
  }
}

@media (max-width: 900px) {
  #main-menu-root .tutorial-menu-entry,
  #main-menu-root #training-menu-button {
    justify-self: stretch;
    width: 100%;
  }
}

/* Combat examples and multiplayer Tests share the live lower-HUD rhythm. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-hud-row,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  gap: clamp(0.3rem, 0.7vh, 0.46rem);
}

/* Singleplayer uses the same player-side clearance and board-facing edge.
 * Match the existing board track without changing the board's own alignment. */
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack {
  box-sizing: border-box;
  align-self: center;
  align-items: flex-end;
  height: calc(var(--single-play-board-size) * 1.25);
  max-height: 100%;
  padding-inline: clamp(0.55rem, 0.85vw, 0.9rem);
  text-align: right;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter {
  align-self: flex-end;
  width: min(84%, 9rem);
  max-width: 9rem;
  text-align: right;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter,
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter {
  align-self: flex-end;
  width: min(72%, 8rem);
  max-width: 8rem;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .training-free-move {
  align-self: flex-end;
  width: min(84%, 9rem);
  max-width: 9rem;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter strong {
  line-height: 0.94;
}

@media (max-width: 720px) {
  .app-shell.is-sandbox .duel-pause-rail {
    align-items: stretch;
    width: min(11rem, calc(100vw - 16px));
  }

  .sandbox-mode-toggle {
    min-height: 1.9rem;
    width: 100%;
    padding-block: 0.25rem;
  }
}

/* Practice and Training share the duel playfield background. Their gameplay
 * regions are structural layout containers, not visible nested panels. */
.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Combat warning rings sit above the board canvas and outside its bounds. */
.app-shell.is-ai-duel .board-container.is-low-hp::before,
.app-shell.is-ai-duel .board-container.has-lethal-border::before {
  z-index: 40;
  inset: -0.28rem;
  border-width: 3px;
  box-shadow:
    0 0 calc(12px + var(--low-hp-intensity, 0) * 18px)
      rgba(255, 28, 48, calc(0.58 + var(--low-hp-intensity, 0) * 0.34)),
    0 0 calc(30px + var(--low-hp-intensity, 0) * 28px)
      rgba(255, 14, 36, calc(0.24 + var(--low-hp-intensity, 0) * 0.34)),
    inset 0 0 14px rgba(255, 34, 52, 0.3);
}

.app-shell.is-ai-duel .board-container.is-free-move-active::after {
  z-index: 41;
  inset: -0.34rem;
  padding: 0.2rem;
  opacity: 1;
  background: repeating-conic-gradient(
    from var(--free-move-border-angle),
    #fff0bd 0deg 6deg,
    #ffad3d 6deg 11deg,
    transparent 11deg 19deg
  );
  filter:
    drop-shadow(0 0 4px #ffe0a3)
    drop-shadow(0 0 9px #ff982b)
    drop-shadow(0 0 18px rgba(255, 116, 18, 0.9));
  animation: free-move-border-orbit 6s linear infinite;
}

.app-shell.is-ai-duel .duel-hp,
.app-shell.is-training-survival .player-duel-panel .duel-hp {
  height: 100%;
  min-height: 2.25rem;
}

.app-shell.is-ai-duel .duel-shield-meter,
.app-shell.is-training-survival .player-duel-panel .duel-shield-meter {
  height: 100%;
  min-height: 1.25rem;
}

.app-shell.is-ai-duel .duel-queue,
.app-shell.is-training-survival .player-duel-panel .duel-queue {
  height: 100%;
  min-height: 1.5rem;
}

.app-shell.is-ai-duel .duel-hp strong,
.app-shell.is-training-survival .duel-hp strong {
  font-size: var(--hud-critical-font-size);
}

/* Challenge countdowns use the same pale-green resource language and centred
 * value treatment as the modern Duel HP bar. */
.training-challenge-timer > div {
  border: 1px solid rgba(209, 238, 218, 0.36);
  border-radius: 3px;
  background: rgba(5, 12, 9, 0.94);
  box-shadow: 0 0 10px rgba(89, 199, 94, 0.28), inset 0 0 0 1px rgba(225, 248, 232, 0.08);
}

.training-challenge-timer i {
  background: #59c75e !important;
}

.training-challenge-timer.is-move-limit i {
  background: var(--training-countdown-color, #59c75e) !important;
}

.training-challenge-timer strong {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.15rem, 2.2vmin, 1.5rem);
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.98), 1px 0 1px rgba(0, 0, 0, 0.9), -1px 0 1px rgba(0, 0, 0, 0.9);
}

.app-shell.is-ai-duel .duel-shield-meter::before,
.app-shell.is-training-survival .duel-shield-meter::before {
  font-size: var(--hud-secondary-font-size);
}

.app-shell.is-ai-duel .duel-shield-meter::after,
.app-shell.is-training-survival .duel-shield-meter::after {
  font-size: var(--hud-micro-font-size);
}

.app-shell.is-ai-duel .duel-queue .attack-queue-packet,
.app-shell.is-training-survival .duel-queue .attack-queue-packet {
  height: min(1.55rem, 100%);
  font-size: var(--hud-micro-font-size);
}

/* Results keep their controls and headings visible; only the stat table owns
 * overflow when the viewport is short. */
.duel-end-popup,
.practice-challenge-overlay .pause-popup {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, var(--layout-usable-height));
  overflow: hidden;
}

.duel-end-popup > *,
.practice-challenge-overlay .pause-popup > * {
  flex: 0 0 auto;
}

.duel-end-popup .duel-results-stats,
.practice-challenge-overlay .practice-challenge-results {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.duel-end-popup #duel-end-replay-status:not([hidden]) {
  margin: 10px 0;
  font-size: 0.85rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* Config cards own every control. Flexible control columns prevent native
 * select/number intrinsic widths from escaping a two-column category. */
.duel-config-category {
  container-type: inline-size;
  min-width: 0;
}

.duel-config-category label {
  box-sizing: border-box;
  grid-template-columns: minmax(8.5rem, 0.8fr) minmax(0, 1.35fr);
  width: 100%;
  min-width: 0;
}

.duel-config-category label > *,
.duel-config-category input,
.duel-config-category select,
.duel-config-range-input,
.duel-config-field {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.duel-config-range-input {
  grid-template-columns: minmax(0, 1fr) minmax(4.8rem, 6.2rem);
}

@container (max-width: 28rem) {
  .duel-config-category label {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
  }
}

.app-shell.is-training-survival .survival-drain-stat > span {
  font-size: var(--hud-label-font-size);
}

.app-shell.is-training-survival .survival-drain-stat strong {
  font-size: var(--hud-critical-font-size);
}

.app-shell.is-training-survival .survival-drain-stat small {
  font-size: var(--hud-micro-font-size);
}

/* Keep persistent-world camera travel on one compositor property. */
body.has-persistent-menu-world::before {
  translate: var(--menu-map-x) var(--menu-map-y);
  transform:
    translate3d(var(--menu-bg-x), var(--menu-bg-y), 0)
    scale(1.055)
    rotateX(4deg);
  animation-name: persistent-menu-grid-idle;
  transition: translate var(--menu-motion-duration) var(--menu-motion-ease);
}

body.has-persistent-menu-world .menu-depth-grid {
  translate: var(--menu-grid-map-x) var(--menu-grid-map-y);
  transform:
    perspective(1000px)
    translate3d(var(--menu-grid-far-x), calc(var(--menu-grid-far-y) + 5%), 0)
    rotateX(18deg)
    scale(1.16);
  animation: none;
  transition: translate var(--menu-motion-duration) var(--menu-motion-ease);
}

@keyframes persistent-menu-grid-idle {
  from { background-position: calc(50% - 4px) calc(50% - 3px); }
  to { background-position: calc(50% + 4px) calc(50% + 3px); }
}

@media (prefers-reduced-motion: reduce) {
  body.has-persistent-menu-world::before,
  body.has-persistent-menu-world .menu-depth-grid {
    animation: none;
    transition-duration: 110ms;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  body.has-persistent-menu-world::before,
  body.has-persistent-menu-world .menu-depth-grid {
    animation: none;
  }

  .is-menu-window-leaving,
  .is-menu-window-arriving,
  .is-menu-inline-leaving,
  .is-menu-inline-arriving,
  .is-menu-simple-leaving,
  .is-menu-simple-arriving {
    filter: none !important;
  }
}

/* Options detail pages live inside the same stable world as other menu scenes. */
.persistent-menu-world > #options-menu-page.is-options-detail {
  align-self: stretch;
  height: 100%;
  max-height: none;
}

.menu-home > .menu-online-status,
.menu-home > .menu-logo-heading {
  visibility: visible;
}

.menu-home:not(:has(.persistent-menu-world > #options-menu-page.is-world-active))
  > .menu-online-status {
  display: inline-flex;
}

.menu-home:not(:has(.persistent-menu-world > #options-menu-page.is-world-active.is-options-detail))
  > .menu-logo-heading {
  display: block;
}

.menu-home:has(.persistent-menu-world > #options-menu-page.is-world-active) > .menu-online-status,
.menu-home:has(.persistent-menu-world > #options-menu-page.is-world-active.is-options-detail)
  > .menu-logo-heading {
  display: none;
}
/* v1.2.0 Mobile Browser Phase A: solver-owned portrait composition.
 * Major dimensions come from layout-core; Grid/Flex only place semantic slots. */
html[data-layout-family="mobile-portrait"] {
  --mobile-touch-target: 44px;
  --mobile-content-width: min(100%, var(--layout-usable-width));
}

html[data-layout-family="mobile-portrait"] body {
  overflow-x: hidden;
}

html[data-layout-family="mobile-portrait"] body > .screen:not(#game-screen) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

html[data-layout-family="mobile-portrait"] .main-menu-screen .screen-panel,
html[data-layout-family="mobile-portrait"] .multiplayer-room-shell,
html[data-layout-family="mobile-portrait"] .patch-notes-panel {
  width: var(--mobile-content-width);
  max-height: none;
  min-height: min(100%, var(--layout-usable-height));
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .patch-notes-screen {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .patch-notes-panel {
  height: var(--layout-usable-height, calc(100dvh - 1.2rem));
  max-height: var(--layout-usable-height, calc(100dvh - 1.2rem));
  min-height: 0;
  padding: clamp(1rem, 4vw, 1.35rem);
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .patch-notes-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0.8rem;
  padding-right: 0.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) {
  --tutorial-phone-nav-height: 3.25rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) .board-stage {
  padding-bottom: calc(var(--tutorial-phone-nav-height) + env(safe-area-inset-bottom) + 0.7rem);
  touch-action: pan-y;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) .tutorial-panel {
  position: static;
  inset: auto;
  padding-bottom: 0;
  transform: none;
  background: transparent;
  backdrop-filter: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) .tutorial-actions {
  position: fixed;
  right: max(0.55rem, env(safe-area-inset-right));
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  left: max(0.55rem, env(safe-area-inset-left));
  z-index: 84;
  display: grid;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
  height: var(--tutorial-phone-nav-height);
  padding: 0.3rem;
  border: 1px solid rgba(101, 231, 212, 0.28);
  border-radius: 4px;
  background: rgba(4, 10, 14, 0.96);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) .tutorial-actions button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.42rem;
  font-size: clamp(0.68rem, 3.2vw, 0.82rem);
  line-height: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) #tutorial-prev-button {
  grid-column: 1;
  grid-row: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) #tutorial-controls-button {
  grid-column: 2;
  grid-row: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) #tutorial-next-button {
  grid-column: 3;
  grid-row: 1;
}

.app-shell.is-tutorial-page-transitioning .board-stage > :not(.tutorial-panel),
.app-shell.is-tutorial-page-transitioning .tutorial-panel > :not(.tutorial-actions) {
  pointer-events: none;
}

.app-shell.is-tutorial-page-leaving-next .board-stage > :not(.tutorial-panel),
.app-shell.is-tutorial-page-leaving-next .tutorial-panel > :not(.tutorial-actions) {
  animation: tutorial-page-leave-next 110ms ease-in both;
}

.app-shell.is-tutorial-page-leaving-prev .board-stage > :not(.tutorial-panel),
.app-shell.is-tutorial-page-leaving-prev .tutorial-panel > :not(.tutorial-actions) {
  animation: tutorial-page-leave-prev 110ms ease-in both;
}

.app-shell.is-tutorial-page-arriving-next .board-stage > :not(.tutorial-panel),
.app-shell.is-tutorial-page-arriving-next .tutorial-panel > :not(.tutorial-actions) {
  animation: tutorial-page-arrive-next 160ms ease-out both;
}

.app-shell.is-tutorial-page-arriving-prev .board-stage > :not(.tutorial-panel),
.app-shell.is-tutorial-page-arriving-prev .tutorial-panel > :not(.tutorial-actions) {
  animation: tutorial-page-arrive-prev 160ms ease-out both;
}

@keyframes tutorial-page-leave-next {
  to { opacity: 0; transform: translateX(-2.4rem); }
}

@keyframes tutorial-page-leave-prev {
  to { opacity: 0; transform: translateX(2.4rem); }
}

@keyframes tutorial-page-arrive-next {
  from { opacity: 0; transform: translateX(2.4rem); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tutorial-page-arrive-prev {
  from { opacity: 0; transform: translateX(-2.4rem); }
  to { opacity: 1; transform: translateX(0); }
}

html[data-layout-family="mobile-portrait"] .persistent-menu-world > .persistent-menu-scene {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding:
    max(0.6rem, env(safe-area-inset-top))
    max(0.55rem, env(safe-area-inset-right))
    max(4.5rem, env(safe-area-inset-bottom))
    max(0.55rem, env(safe-area-inset-left));
  scrollbar-gutter: stable;
}

html[data-layout-family="mobile-portrait"] .main-menu-page,
html[data-layout-family="mobile-portrait"] .options-menu-page {
  box-sizing: border-box;
  width: min(100%, 34rem);
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-content: start;
}

html[data-layout-family="mobile-portrait"] #main-menu-root,
html[data-layout-family="mobile-portrait"] #battle-menu-page,
html[data-layout-family="mobile-portrait"] #ai-duel-mode-page,
html[data-layout-family="mobile-portrait"] #tutorial-menu-page,
html[data-layout-family="mobile-portrait"] #training-menu-page {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  grid-auto-rows: minmax(var(--mobile-touch-target), auto);
  gap: 0.72rem;
}

html[data-layout-family="mobile-portrait"] #main-menu-root > *,
html[data-layout-family="mobile-portrait"] #battle-menu-page > *,
html[data-layout-family="mobile-portrait"] #ai-duel-mode-page > *,
html[data-layout-family="mobile-portrait"] #tutorial-menu-page > *,
html[data-layout-family="mobile-portrait"] #training-menu-page > * {
  grid-area: auto !important;
  min-width: 0;
}

html[data-layout-family="mobile-portrait"] .main-menu-page .mode-button,
html[data-layout-family="mobile-portrait"] .main-menu-page .tutorial-menu-entry,
html[data-layout-family="mobile-portrait"] .main-menu-page .tutorial-menu-entry > .mode-button {
  width: 100% !important;
  min-width: 0;
  min-height: 5.25rem !important;
  height: auto;
}

html[data-layout-family="mobile-portrait"] .main-menu-page .mode-button {
  padding: 0.9rem 1rem;
}

html[data-layout-family="mobile-portrait"] .main-menu-page .mode-button > span,
html[data-layout-family="mobile-portrait"] .main-menu-page .mode-button > strong {
  overflow-wrap: anywhere;
}

html[data-layout-family="mobile-portrait"] .training-challenge-list,
html[data-layout-family="mobile-portrait"] .tutorial-menu-grid,
html[data-layout-family="mobile-portrait"] .options-category-menu,
html[data-layout-family="mobile-portrait"] .duel-preset-options {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page {
  width: min(100%, 34rem);
  max-width: 100%;
  height: auto;
  min-height: max-content;
  align-self: start;
  padding-inline: 0.35rem;
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .training-challenge-list {
  display: grid;
  grid-auto-rows: minmax(5.4rem, auto);
  width: 100%;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .mode-button {
  grid-column: auto !important;
  grid-row: auto !important;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-page {
  --menu-item-x: 0px !important;
  --menu-item-y: 0px !important;
  width: min(calc(100% - 1rem), 34rem);
  margin: auto;
  padding: 0.5rem 0;
  gap: clamp(0.9rem, 3vh, 1.4rem);
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-page > *,
html[data-layout-family="mobile-portrait"] .training-challenge-detail-description,
html[data-layout-family="mobile-portrait"] .training-challenge-detail-record,
html[data-layout-family="mobile-portrait"] .training-challenge-detail-actions {
  width: 100%;
  max-width: 100%;
  transform: none !important;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-description {
  padding-inline: 0.5rem;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-record {
  min-width: 0;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-actions {
  grid-template-columns: minmax(0, 1fr);
}

/* Options and other form-heavy pages own one document-level scroll surface. */
html[data-layout-family="mobile-portrait"] #options-menu-page {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}
html[data-layout-family="mobile-portrait"] .options-game-panel {
  max-height: none;
  overflow: visible !important;
}
html[data-layout-family="mobile-portrait"] .options-game-panel .menu-effect-settings .menu-effect-setting {
  grid-template-columns: minmax(0, 1fr) 3rem 2.75rem;
}
html[data-layout-family="mobile-portrait"] .options-game-panel .menu-effect-settings .menu-effect-colour {
  grid-template-columns: 44px minmax(0, 1fr) 2.75rem;
}
html[data-layout-family="mobile-portrait"] .options-game-panel .menu-effect-settings .gameplay-effect-choice {
  grid-template-columns: minmax(0, 1fr);
}
html[data-layout-family="mobile-portrait"] .options-game-panel .menu-effect-settings .gameplay-effect-toggle {
  grid-template-columns: minmax(0, 1fr) 44px;
}

html[data-layout-family="mobile-portrait"] .options-subpage,
html[data-layout-family="mobile-portrait"] .local-profile-panel.options-subpage,
html[data-layout-family="mobile-portrait"] .music-library-panel {
  width: 100% !important;
  max-width: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
}

html[data-layout-family="mobile-portrait"] .audio-setting,
html[data-layout-family="mobile-portrait"] .options-setting-row,
html[data-layout-family="mobile-portrait"] .music-track-row,
html[data-layout-family="mobile-portrait"] .music-scenario-row {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

html[data-layout-family="mobile-portrait"] button,
html[data-layout-family="mobile-portrait"] select,
html[data-layout-family="mobile-portrait"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--mobile-touch-target);
}

/* Configuration uses the page as its scroll owner; actions remain reachable. */
html[data-layout-family="mobile-portrait"] #game-screen.is-duel-config {
  display: block;
  height: var(--layout-usable-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

html[data-layout-family="mobile-portrait"] .duel-config-screen {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
}

html[data-layout-family="mobile-portrait"] .duel-config-shell {
  display: grid;
  grid-template-rows: auto auto auto;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .duel-config-content {
  overflow: visible;
  padding-bottom: 1rem;
}

html[data-layout-family="mobile-portrait"] .duel-config-body {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-layout-family="mobile-portrait"] .duel-config-category,
html[data-layout-family="mobile-portrait"] .duel-preset-panel {
  min-width: 0;
}

html[data-layout-family="mobile-portrait"] .duel-level-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html[data-layout-family="mobile-portrait"] .duel-config-setting,
html[data-layout-family="mobile-portrait"] .duel-config-category > label {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem;
}

html[data-layout-family="mobile-portrait"] .duel-config-range-input {
  grid-template-columns: minmax(0, 1fr) minmax(4.8rem, 5.6rem);
}

html[data-layout-family="mobile-portrait"] .duel-config-start {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  padding:
    0.55rem
    max(0.45rem, env(safe-area-inset-right))
    max(0.55rem, env(safe-area-inset-bottom))
    max(0.45rem, env(safe-area-inset-left));
  background: rgba(5, 11, 17, 0.96);
  border-top: 1px solid rgba(84, 214, 207, 0.34);
  backdrop-filter: blur(10px);
}

html[data-layout-family="mobile-portrait"] .duel-config-start button {
  min-width: 0;
  padding-inline: 0.35rem;
  white-space: normal;
}

/* Active single-board gameplay stays viewport-locked. */
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-duel-config):not(.is-tutorial) {
  height: var(--layout-usable-height);
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .play-panel {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage";
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  --portrait-stack-height: calc(
    var(--layout-single-top-height)
    + (var(--layout-single-board-size) / 0.8)
    + var(--layout-single-bottom-height)
    + (var(--game-gap) * 2)
  );
  --portrait-stack-offset: max(0px, calc((100% - var(--portrait-stack-height)) / 2));
  grid-area: stage;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    var(--layout-single-top-height)
    calc(var(--layout-single-board-size) / 0.8)
    minmax(0, var(--layout-single-bottom-height));
  grid-template-areas:
    "left"
    "board"
    "meter";
  width: 100%;
  height: 100%;
  min-height: 0;
  justify-items: center;
  align-content: center;
  row-gap: var(--game-gap);
  column-gap: 0;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .player-board-container {
  grid-area: board;
  place-self: center;
  width: var(--layout-single-board-size) !important;
  max-width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  position: absolute;
  z-index: 4;
  top: var(--portrait-stack-offset);
  right: max(0px, calc((100% - var(--layout-single-board-size)) / 2));
  display: grid;
  width: calc(var(--layout-single-board-size) / 2);
  height: auto;
  min-height: 0;
  align-content: start;
  align-self: auto;
  justify-self: auto;
  margin: 0;
  padding: 0 0 0 0.35rem;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack {
  position: absolute;
  z-index: 4;
  top: var(--portrait-stack-offset);
  left: max(0px, calc((100% - var(--layout-single-board-size)) / 2));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-items: start;
  width: calc(var(--layout-single-board-size) / 2);
  height: auto;
  min-height: 0;
  gap: 0.28rem;
  padding-right: 0.35rem;
  contain: layout paint;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-survival .single-status-stack {
  min-height: 0;
  height: auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter {
  width: min(5.7rem, 54%);
  max-width: 54%;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  width: min(100%, 7.5rem);
  min-width: 0;
  max-width: 7.5rem;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter {
  position: static;
  width: 100%;
  height: 1.85rem;
  min-height: 0;
  max-height: 1.85rem;
  padding: 0.12rem 0.25rem;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter {
  grid-column: 1;
  grid-row: 2;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter {
  grid-column: 2;
  grid-row: 2;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .board-header {
  display: grid;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-multiplayer-stats:not([hidden]) {
  position: static;
  top: auto;
  left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  height: auto;
  margin: 0;
  gap: 0.25rem;
  text-align: right;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat,
html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat > div {
  width: 100%;
  justify-content: flex-end;
  text-align: right;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat strong {
  font-size: clamp(1rem, 4.6vw, 1.35rem);
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip,
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr));
  width: 100%;
  max-height: 100%;
  gap: 0.25rem;
  align-items: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip > div,
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail > div {
  min-height: 0;
  padding: 0.26rem 0.3rem;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip span,
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail span {
  font-size: max(0.58rem, var(--hud-micro-font-size));
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip strong,
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-score-rail strong {
  font-size: clamp(1rem, 5vw, 1.45rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-challenge:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-challenge-meter-stack {
  grid-area: meter;
  align-self: start;
  width: min(var(--layout-single-board-size), 100%);
  max-height: var(--layout-single-bottom-height);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-survival:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-rows:
    var(--layout-single-top-height)
    calc(var(--layout-single-board-size) / 0.8)
    minmax(0, var(--layout-single-bottom-height));
  grid-template-areas:
    "left"
    "board"
    "combat";
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-survival .player-duel-panel {
  display: contents;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-survival .player-duel-panel .duel-status-panel {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-survival .player-duel-panel .duel-hud-row {
  grid-area: combat;
  width: min(var(--layout-single-board-size), 100%);
  max-width: var(--layout-single-board-size);
  align-self: start;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-training-survival .survival-drain-stat:not([hidden]) {
  position: static;
  inset: auto;
  width: 100%;
  margin: 0;
  transform: none;
}

html[data-layout-family="mobile-portrait"] .duel-pause-rail {
  left: max(0.35rem, env(safe-area-inset-left));
  right: max(0.35rem, env(safe-area-inset-right));
  bottom: max(0.3rem, env(safe-area-inset-bottom));
  width: auto;
  max-width: none;
}

html[data-layout-family="mobile-portrait"] .duel-pause-button {
  width: 3.1rem;
  min-height: 2.25rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox .duel-pause-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4rem;
  width: auto;
  gap: 0.35rem;
  align-items: stretch;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox .sandbox-control-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox .sandbox-mode-toggle {
  min-height: 2.25rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.66rem;
}

/* Tutorial reference pages scroll; board Tests use the shared stacked shell. */
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial:not(.is-tutorial-challenge) {
  display: block;
  height: var(--layout-usable-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial:not(.is-tutorial-challenge) .play-panel {
  display: block;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial:not(.is-tutorial-challenge) .board-stage,
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text .board-stage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 100%;
  gap: 0.75rem;
  padding: 0.45rem;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial:not(.is-tutorial-challenge) .player-board-container {
  flex: 0 0 auto;
  align-self: center;
  max-width: calc(100vw - 1.5rem);
  max-height: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial:not(.is-tutorial-challenge) .tutorial-dialogue {
  order: -2;
  width: min(100%, 40rem);
  align-self: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial:not(.is-tutorial-challenge) .tutorial-panel {
  order: 5;
  position: sticky;
  left: auto;
  right: auto;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
  transform: none;
  background: rgba(4, 10, 16, 0.94);
  backdrop-filter: blur(8px);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial:not(.is-tutorial-challenge) .tutorial-actions {
  --tutorial-nav-button-width: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.3rem;
  width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial:not(.is-tutorial-challenge) .tutorial-actions button {
  width: 100%;
  max-width: none;
  min-height: var(--mobile-touch-target);
  padding: 0.45rem 0.3rem;
  font-size: 0.8rem;
}

html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge {
  height: var(--layout-usable-height);
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge .play-panel {
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge .board-stage {
  --portrait-test-stack-height: calc(
    var(--layout-test-top-height)
    + (var(--layout-test-board-size) / 0.8)
    + var(--layout-test-bottom-height)
    + (var(--game-gap) * 2)
  );
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    var(--layout-test-top-height)
    calc(var(--layout-test-board-size) / 0.8)
    minmax(0, var(--layout-test-bottom-height));
  grid-template-areas:
    "left"
    "board"
    "right";
  width: 100%;
  height: 100%;
  padding: 0;
  gap: var(--game-gap);
  place-items: center;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge .player-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge #game-board {
  grid-area: board;
  width: var(--layout-test-board-size) !important;
  max-width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel {
  grid-area: right;
  width: min(var(--layout-test-board-size), 100%);
  max-height: var(--layout-test-bottom-height);
  overflow: auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
  grid-template-rows:
    var(--layout-test-top-height)
    calc(var(--layout-test-board-size) / 0.8)
    minmax(0, var(--layout-test-bottom-height));
  grid-template-areas:
    "left"
    "board"
    "combat";
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .duel-arena,
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel {
  display: contents;
  width: auto;
  max-width: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
  grid-area: left;
  display: block;
  width: min(100%, var(--layout-test-board-size));
  max-width: var(--layout-test-board-size);
  height: 100%;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-heading {
  display: block;
  width: 100%;
  height: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-board-label,
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-counter-stack {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-b2b {
  width: min(8rem, 42%);
  height: auto;
  margin: 0;
  padding-top: 0.2rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-b2b strong {
  font-size: clamp(1.5rem, 8vw, 2rem);
  line-height: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row {
  grid-area: combat;
  width: min(100%, var(--layout-test-board-size));
  max-width: var(--layout-test-board-size);
  align-self: start;
  max-height: 5.7rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
  position: static;
  grid-area: combat;
  align-self: end;
  width: min(100%, var(--layout-test-board-size));
  max-height: 5rem;
  padding: 0.25rem;
  overflow: hidden;
  z-index: 6;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-objective {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-actions {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.25rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-actions button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2rem;
  padding: 0.2rem;
}

/* Lobby and overlays favour readable, touch-safe vertical flow. */
html[data-layout-family="mobile-portrait"] .multiplayer-room-screen {
  display: block;
  width: 100vw;
  max-width: 100vw;
  overflow-y: auto;
  align-content: start;
}

html[data-layout-family="mobile-portrait"] .multiplayer-room-shell {
  display: block;
  width: var(--layout-usable-width) !important;
  max-width: calc(100vw - (var(--game-outer-gap) * 2));
  height: auto;
  min-height: 100%;
  margin: 0 auto;
}

html[data-layout-family="mobile-portrait"] .multiplayer-room-main,
html[data-layout-family="mobile-portrait"] .multiplayer-room-grid,
html[data-layout-family="mobile-portrait"] .multiplayer-room-actions,
html[data-layout-family="mobile-portrait"] .multiplayer-player-list {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-layout-family="mobile-portrait"] .multiplayer-room-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  background: rgba(5, 11, 17, 0.94);
}

html[data-layout-family="mobile-portrait"] .pause-overlay,
html[data-layout-family="mobile-portrait"] .duel-end-overlay,
html[data-layout-family="mobile-portrait"] .practice-challenge-overlay {
  padding:
    max(0.5rem, env(safe-area-inset-top))
    max(0.5rem, env(safe-area-inset-right))
    max(0.5rem, env(safe-area-inset-bottom))
    max(0.5rem, env(safe-area-inset-left));
}

html[data-layout-family="mobile-portrait"] .pause-popup,
html[data-layout-family="mobile-portrait"] .duel-end-popup,
html[data-layout-family="mobile-portrait"] .practice-challenge-overlay .pause-popup {
  width: min(100%, 32rem);
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

html[data-layout-family="mobile-portrait"] .pause-actions {
  grid-template-columns: minmax(0, 1fr);
}

@media (prefers-reduced-motion: reduce) {
  html[data-layout-family="mobile-portrait"] .multiplayer-room-actions,
  html[data-layout-family="mobile-portrait"] .tutorial-panel,
  html[data-layout-family="mobile-portrait"] .duel-config-start {
    backdrop-filter: none;
  }
}

/* Phone menu geometry is solver-owned. Major menu scenes remain bounded to
 * the viewport; only long reference/configuration content scrolls internally. */
html[data-layout-family="mobile-portrait"] {
  --mobile-touch-target: var(--layout-menu-touch-target, 44px);
}

html[data-layout-family="mobile-portrait"] body > .main-menu-screen {
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .main-menu-screen .screen-panel.menu-home {
  box-sizing: border-box;
  width: min(100%, var(--layout-menu-max));
  height: calc(100dvh - (2 * clamp(18px, 3vh, 32px)));
  max-height: var(--layout-usable-height);
  min-height: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .main-menu-screen[data-menu-page^="multiplayer"] .screen-panel.menu-home {
  overflow: clip;
}

html[data-layout-family="mobile-portrait"] .persistent-menu-world > .persistent-menu-scene {
  overflow-x: hidden;
  overflow-y: hidden;
  padding:
    max(0.45rem, env(safe-area-inset-top))
    max(0.55rem, env(safe-area-inset-right))
    max(0.45rem, env(safe-area-inset-bottom))
    max(0.55rem, env(safe-area-inset-left));
  scrollbar-gutter: auto;
}

html[data-layout-family="mobile-portrait"] .main-menu-page .mode-button,
html[data-layout-family="mobile-portrait"] .main-menu-page .tutorial-menu-entry,
html[data-layout-family="mobile-portrait"] .main-menu-page .tutorial-menu-entry > .mode-button {
  min-height: var(--layout-menu-button-height, 4.75rem) !important;
}

html[data-layout-family="mobile-portrait"] .tutorial-menu-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page {
  width: min(100%, 34rem);
  max-width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 0.45rem;
  padding-inline: 0.35rem;
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .training-challenge-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 0;
  gap: 0.42rem;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .mode-button,
html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .mode-button:nth-child(n) {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: var(--layout-menu-dense-button-height, 4rem) !important;
  height: 100%;
  padding: 0.4rem 0.48rem;
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .mode-button > span {
  font-size: clamp(1rem, 5vw, 1.3rem);
}

html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .mode-button > small {
  font-size: clamp(0.58rem, 2.4vw, 0.7rem);
  line-height: 1.18;
}

html[data-layout-family="mobile-portrait"] #options-menu-page.is-options-detail {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

@media (max-height: 600px) and (max-width: 600px) {
  html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .training-challenge-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .mode-button > small {
    display: none;
  }
}

/* Compact phone submenus: labels carry the hierarchy and descriptions remain
 * available on the following detail/configuration screen. */
html[data-layout-family="mobile-portrait"] .persistent-menu-scene .mode-button > small,
html[data-layout-family="mobile-portrait"] .persistent-menu-scene .options-category-menu .mode-button > span,
html[data-layout-family="mobile-portrait"] .multiplayer-room-shell .mode-button > small {
  display: none;
}

html[data-layout-family="mobile-portrait"] .persistent-menu-scene .mode-button {
  padding: 0.55rem 0.72rem;
}

html[data-layout-family="mobile-portrait"] #tutorial-menu-page {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto repeat(3, minmax(var(--layout-menu-button-height), 1fr)) auto;
  grid-template-areas:
    "title title"
    "basics advanced"
    "live turn"
    "configs tests"
    "back back" !important;
  align-content: center;
  gap: 0.55rem;
}

html[data-layout-family="mobile-portrait"] #tutorial-menu-page > * {
  grid-area: revert;
}

html[data-layout-family="mobile-portrait"] #tutorial-menu-page .menu-page-title { grid-area: title !important; }
html[data-layout-family="mobile-portrait"] #tutorial-basics-button { grid-area: basics !important; }
html[data-layout-family="mobile-portrait"] #tutorial-advanced-button { grid-area: advanced !important; }
html[data-layout-family="mobile-portrait"] #tutorial-live-button { grid-area: live !important; }
html[data-layout-family="mobile-portrait"] #tutorial-turn-button { grid-area: turn !important; }
html[data-layout-family="mobile-portrait"] #tutorial-configs-button { grid-area: configs !important; }
html[data-layout-family="mobile-portrait"] #tutorial-tests-button { grid-area: tests !important; }

html[data-layout-family="mobile-portrait"] #tutorial-menu-page .main-menu-back {
  grid-area: back !important;
  width: min(100%, 14rem);
  min-height: var(--mobile-touch-target);
  justify-self: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial-root-menu .tutorial-popup-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial-root-menu .tutorial-popup-actions > button:last-child {
  grid-column: 1 / -1;
  width: min(100%, 14rem);
  justify-self: center;
}

/* Phone catalogues keep all primary choices visible without turning the page
 * itself into a scroll surface. Detail copy remains available after selection. */
html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .mode-button > small {
  display: none;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup {
  position: fixed;
  inset: 0.375rem;
  width: auto;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 3.8rem 0.65rem 0.65rem;
  transform: none;
  animation: none;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > .eyebrow,
html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > p:not(.tutorial-popup-note) {
  display: none;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > h2 {
  margin: 0;
  font-size: clamp(1.45rem, 7vw, 1.85rem);
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > .tutorial-popup-note {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  line-height: 1.2;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .tutorial-popup-actions.is-challenge-menu {
  margin-top: 0.35rem;
  padding-right: 0.25rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-items: start;
  gap: 0.8rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-category-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-self: start;
  gap: 0.42rem;
  height: max-content;
  padding-top: 0;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-category-heading {
  grid-column: 1 / -1;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(2.3rem, auto) auto;
  align-content: space-between;
  gap: 0.35rem;
  min-height: 7.1rem;
  padding: 0.5rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry p {
  display: none;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry strong {
  font-size: clamp(0.72rem, 3.4vw, 0.86rem);
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry span {
  margin-top: 0.25rem;
  font-size: 0.58rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry-actions > button {
  min-height: max(45px, var(--mobile-touch-target));
  padding: 0.35rem 0.2rem;
  font-size: 0.72rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > .challenge-menu-back {
  min-height: max(45px, var(--mobile-touch-target));
}

html[data-layout-family="mobile-portrait"] #options-category-menu .mode-button > span {
  display: none;
}

.mobile-parallax-note {
  display: none;
}

.parallax-setting.is-mobile-disabled {
  color: rgba(195, 207, 214, 0.52);
}

.parallax-setting.is-mobile-disabled > :not(.mobile-parallax-note) {
  opacity: 0.46;
}

.parallax-setting.is-mobile-disabled .mobile-parallax-note {
  display: block;
  color: rgba(214, 224, 230, 0.76);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
}

html[data-layout-family="mobile-portrait"] #options-menu-page.is-options-profile {
  scroll-padding-top: 0.5rem;
}

html[data-layout-family="mobile-portrait"] .options-menu-page > .local-profile-panel.options-subpage {
  align-self: start;
  align-content: start;
  min-height: max-content;
  margin-block: 0;
  padding: 0.5rem 0.25rem max(1rem, env(safe-area-inset-bottom));
}

html[data-layout-family="mobile-portrait"] .options-menu-page > .local-profile-panel.options-subpage .options-subpage-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: var(--mobile-touch-target);
  padding-block: 0.2rem;
  background: rgba(4, 11, 16, 0.96);
}

html[data-layout-family="mobile-portrait"] .options-menu-page > .local-profile-panel.options-subpage .local-profile-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-page.is-world-active {
  z-index: 3;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-page.is-world-active > * {
  opacity: 1;
  visibility: visible;
}

html[data-layout-family="mobile-portrait"] .duel-config-content {
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

html[data-layout-family="mobile-portrait"] .duel-config-start {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.25fr);
  min-height: calc(4rem + env(safe-area-inset-bottom));
}

html[data-layout-family="mobile-portrait"] .duel-config-start button {
  min-height: 48px;
  font-size: clamp(0.67rem, 3vw, 0.8rem);
  line-height: 1.1;
}

/* Menu-global status belongs only to the two scenes where online presence is
 * actionable. The page marker is set by the persistent menu controller. */
.main-menu-screen .menu-home > .menu-online-status {
  display: inline-flex !important;
  position: absolute;
  bottom: 0;
  left: 50%;
  grid-area: auto;
  transform: translate3d(calc(-50% + var(--menu-item-x, 0px)), var(--menu-item-y, 0px), 0);
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-width: 100%;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s, color 160ms linear,
    border-color 160ms linear, transform 220ms var(--menu-motion-ease);
}

.main-menu-screen:not([data-menu-page="root"]):not([data-menu-page="battle"])
  .menu-home > .menu-online-status {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 220ms, 0s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
  .main-menu-screen .menu-home > .menu-online-status {
    transition: none;
  }
}

/* Test results are viewport overlays. Keeping them out of the tutorial board
 * grid prevents completion from changing the board/HUD composition below. */
.app-shell.is-tutorial.is-tutorial-challenge .tutorial-board-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 120;
  grid-area: unset;
  align-self: auto;
  justify-self: auto;
  width: 100vw;
  height: 100dvh;
  padding: clamp(12px, 3vmin, 24px);
  place-items: center;
  background: rgba(2, 4, 8, 0.72);
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-page {
  grid-template-rows: auto auto auto auto auto;
  align-content: center;
  gap: clamp(0.45rem, 1.8vh, 0.85rem);
  max-height: 100%;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-page .menu-page-title {
  font-size: clamp(1.65rem, 8vw, 2.25rem);
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-description {
  min-height: 0;
  max-height: min(30dvh, 12rem);
  overflow-y: auto;
  font-size: clamp(0.88rem, 3.8vw, 1rem);
  line-height: 1.4;
  overscroll-behavior: contain;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-record {
  padding: 0.5rem 0.75rem;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

html[data-layout-family="mobile-portrait"] .training-challenge-detail-actions > button {
  min-width: 0;
  min-height: 48px;
  padding: 0.4rem 0.2rem;
  font-size: clamp(0.68rem, 3vw, 0.82rem);
  line-height: 1.1;
  white-space: normal;
}

/* The fixed configuration footer is outside normal flow. Reserve its space on
 * the scroll document itself so the final control can move fully above it. */
html[data-layout-family="mobile-portrait"] .duel-config-shell {
  box-sizing: border-box;
  padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

html[data-layout-family="mobile-portrait"] .duel-config-content {
  padding-bottom: 1rem;
}

html[data-layout-family="mobile-portrait"] .duel-config-content::after {
  content: "";
  display: block;
  height: 5rem;
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] #game-screen.is-duel-config {
  scroll-padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial-menu-scene:not(.is-tutorial-root-menu) .tutorial-popup.is-tutorial-menu-popup:not(.is-challenge-menu-popup) {
  position: fixed;
  inset: 0.5rem;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0.8rem;
  overflow: hidden;
  transform: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial-menu-scene:not(.is-tutorial-root-menu) .tutorial-popup:not(.is-challenge-menu-popup) .tutorial-popup-actions {
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  padding-right: 0.2rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial-menu-scene:not(.is-tutorial-root-menu) .tutorial-popup:not(.is-challenge-menu-popup) .tutorial-popup-actions button {
  min-height: max(45px, var(--mobile-touch-target));
  padding: 0.55rem 0.4rem;
  font-size: clamp(0.72rem, 3.5vw, 0.9rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial-menu-scene:not(.is-tutorial-root-menu) .tutorial-popup.is-tutorial-page-menu > p {
  display: none;
}

/* Audio controls use one resilient row: icon, flexible slider, value. The
 * button already carries the accessible label, so the duplicate text can be
 * omitted when horizontal space is valuable. */
.audio-volume-setting {
  grid-template-columns: 2rem minmax(5rem, 1fr) 2.8rem;
  justify-content: center;
  justify-self: center;
  width: min(100%, 32rem);
  margin-inline: auto;
}

.audio-volume-setting > .audio-icon-button + span {
  display: none;
}

.audio-volume-setting > input[type="range"] {
  width: 100%;
  max-width: none;
}

html[data-layout-family="mobile-portrait"] .audio-volume-setting {
  grid-template-columns: 2rem minmax(0, 1fr) 2.8rem;
  width: min(100%, 32rem);
  max-width: 32rem;
  gap: clamp(0.35rem, 2vw, 0.55rem);
}

.options-subpage .audio-setting {
  width: min(100%, clamp(18rem, 42vw, 26rem));
  max-width: 26rem;
  margin-inline: auto;
  justify-self: center;
  box-sizing: border-box;
}

.options-subpage .audio-volume-setting {
  grid-template-columns: 2rem minmax(5rem, 1fr) 2.8rem;
}

/* The phone top HUD spans the board. MULT remains on the left while Combo
 * and Chain occupy the otherwise unused lower-right portion of the rail. */
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  width: var(--layout-single-board-size);
  padding-right: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  width: min(100%, 7.5rem);
  max-width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  align-self: end;
  width: calc(100% - 0.18rem);
  height: 1.6rem;
  max-height: 1.6rem;
  padding: 0.1rem 0.18rem;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter {
  grid-column: 4;
  grid-row: 2;
  justify-self: start;
}

/* Automatic challenge rewards share the left column with MULT, rather than
 * inheriting the desktop named grid area and top offset. */
html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack:has(.training-free-move:not([hidden])) {
  grid-template-rows: auto 44px;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack:has(.training-free-move:not([hidden])) .b2b-board-meter {
  grid-row: 1;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 2px 4px;
}

html[data-layout-family="mobile-portrait"] .single-status-stack:has(.training-free-move:not([hidden])) .b2b-board-meter > strong {
  font-size: 26px;
  line-height: 28px;
}

html[data-layout-family="mobile-portrait"] .single-status-stack:has(.training-free-move:not([hidden])) .b2b-board-meter > span {
  font-size: 9px;
  line-height: 12px;
}

html[data-layout-family="mobile-portrait"] .single-status-stack:has(.training-free-move:not([hidden])) :is(.pp-segments, .matchless-wrap) {
  grid-column: 1 / -1;
  margin-top: 0;
}

html[data-layout-family="mobile-portrait"] .single-status-stack:has(.training-free-move:not([hidden])) :is(.pp-segments, .matchless-segments) {
  height: 6px;
  min-height: 6px;
}

html[data-layout-family="mobile-portrait"] .single-status-stack:has(.training-free-move:not([hidden])) .matchless-wrap small {
  font-size: 8px;
  line-height: 10px;
  margin-bottom: 1px;
}

html[data-layout-family="mobile-portrait"] .app-shell:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .training-free-move {
  grid-area: 2 / 1 / 3 / 3;
  box-sizing: border-box;
  align-self: center;
  justify-self: start;
  width: min(100%, 9rem);
  height: 42px;
  min-height: 0;
  margin: 0;
  padding: 3px 5px;
  grid-template-rows: auto auto;
}

html[data-layout-family="mobile-portrait"] .single-status-stack .training-free-move .turn-free-move-help {
  display: none;
}

html[data-layout-family="mobile-portrait"] .single-status-stack .training-free-move .turn-free-move-title {
  font-size: 12px;
  line-height: 15px;
}

html[data-layout-family="mobile-portrait"] .single-status-stack .training-free-move .turn-free-move-progress {
  justify-content: center;
}

html[data-layout-family="mobile-portrait"] .single-status-stack #combo-counter span,
html[data-layout-family="mobile-portrait"] .single-status-stack #chain-counter span {
  display: inline;
  font-size: clamp(0.46rem, 2.2vw, 0.58rem);
  line-height: 1;
}

html[data-layout-family="mobile-portrait"] .single-status-stack #combo-counter strong,
html[data-layout-family="mobile-portrait"] .single-status-stack #chain-counter strong {
  display: inline;
  font-size: clamp(0.78rem, 3.8vw, 1rem);
  line-height: 0.95;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-multiplayer-stats:not([hidden]) {
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  gap: 0.25rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat {
  min-width: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat span,
html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat small {
  font-size: clamp(0.42rem, 1.8vw, 0.52rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat strong {
  font-size: clamp(0.78rem, 3.5vw, 1rem);
}

/* Active Tests use a compact status strip instead of a scrollable card. The
 * objective is already shown before Start, so live space is reserved for
 * measurable progress and the two immediate actions. */
@media (max-width: 760px), (max-height: 620px) {
  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel,
  .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(2.2rem, auto);
    grid-template-areas:
      "progress"
      "details"
      "actions";
    align-content: end;
    gap: 0.25rem;
    min-height: 0;
    padding: 0.3rem;
    overflow: hidden;
  }

  html[data-layout-family] .app-shell.is-tutorial.is-tutorial-challenge .tutorial-objective {
    display: none !important;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-progress {
    grid-area: progress;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(3rem, 1fr);
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-progress > span {
    overflow: hidden;
    font-size: clamp(0.55rem, 2.5vw, 0.68rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-progress > div {
    height: 0.42rem;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .special-progress {
    grid-area: details;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
    gap: 0.2rem;
    min-width: 0;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .special-progress-row {
    display: block;
    min-width: 0;
    padding: 0.18rem 0.24rem;
    overflow: hidden;
    font-size: clamp(0.52rem, 2.4vw, 0.65rem);
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel .tutorial-actions {
    grid-area: actions;
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
    margin: 0;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-actions button {
    min-width: 0;
    min-height: 2.2rem;
    padding: 0.24rem 0.2rem;
    overflow: hidden;
    font-size: clamp(0.62rem, 2.8vw, 0.75rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* v1.2.2 Mobile Duel / Phase B: portrait is a one-board composition.
 * layout-core owns all major reserves; CSS only assigns Duel regions. */
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel {
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding:
    max(var(--game-outer-gap), env(safe-area-inset-top))
    max(var(--game-outer-gap), env(safe-area-inset-right))
    max(var(--game-outer-gap), env(safe-area-inset-bottom))
    max(var(--game-outer-gap), env(safe-area-inset-left));
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .play-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .board-stage {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  padding: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .board-stage {
  display: grid;
  place-items: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-arena {
  --portrait-duel-gap: var(--layout-duel-portrait-gap);
  --portrait-board-width: var(--layout-duel-board-width);
  --portrait-mini-size: var(--layout-duel-opponent-mini-size);
  display: grid;
  width: var(--portrait-board-width);
  max-width: 100%;
  min-height: 0;
  margin: 0;
  grid-template-columns: var(--portrait-mini-size) minmax(0, 1fr);
  grid-template-rows:
    calc(var(--layout-duel-opponent-height) * 0.42)
    calc(var(--layout-duel-opponent-height) * 0.36)
    calc(var(--layout-duel-opponent-height) * 0.22)
    var(--layout-duel-packet-height)
    calc(var(--portrait-board-width) / 0.8)
    calc(var(--layout-duel-player-hud-height) * 0.33)
    calc(var(--layout-duel-player-hud-height) * 0.27)
    calc(var(--layout-duel-player-hud-height) * 0.14)
    calc(var(--layout-duel-player-hud-height) * 0.26);
  grid-template-areas:
    "compact-board compact-status"
    "compact-board compact-hp"
    "compact-board compact-shield"
    "incoming incoming"
    "full-board full-board"
    "full-status full-status"
    "full-hp full-hp"
    "full-shield full-shield"
    "controls controls";
  gap: var(--portrait-duel-gap);
  place-content: center;
  align-items: stretch;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-combat-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-hud-row {
  display: contents;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-board-container {
  grid-area: full-board;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container {
  grid-area: compact-board;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container {
  grid-area: compact-board;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container {
  grid-area: full-board;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .board-container {
  box-sizing: border-box;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container {
  width: var(--portrait-board-width);
  height: auto;
  overflow: visible;
  border: 0;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container {
  width: var(--portrait-mini-size);
  height: var(--portrait-mini-size);
  overflow: hidden;
  border: 1px solid rgba(135, 225, 231, 0.5);
  border-radius: 3px;
  background: rgba(5, 12, 17, 0.94);
  box-shadow:
    0 0 10px rgba(75, 212, 205, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .board-container canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  transition: opacity 90ms ease, filter 120ms ease, transform 90ms ease;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container canvas,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container canvas {
  height: calc((var(--portrait-mini-size) - 2px) / 0.8) !important;
  transform: translateY(-20%);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container canvas,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-board-container canvas {
  height: auto !important;
  transform: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container {
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container:focus-visible {
  outline: 2px solid #8ff1e5;
  outline-offset: 2px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container canvas,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container canvas {
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel {
  grid-area: full-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-status-panel {
  grid-area: compact-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-status-panel {
  grid-area: compact-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  grid-area: full-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-status-panel {
  position: relative;
  z-index: 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  gap: clamp(0.2rem, 1.2vw, 0.38rem);
  padding: 0.08rem 4.75rem 0.08rem 0.18rem;
  overflow: visible;
  background: rgba(4, 10, 15, 0.72);
  text-align: left;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-status-heading {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  width: auto;
  min-width: 4.6rem;
  max-width: 6.8rem;
  height: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-board-label {
  position: static;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: rgba(231, 244, 248, 0.88);
  font-size: clamp(0.44rem, 2vw, 0.56rem);
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-b2b {
  width: 100%;
  max-width: 6.8rem;
  min-width: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-b2b strong {
  display: inline-block;
  font-size: clamp(1rem, 5.2vw, 1.28rem);
  line-height: 0.88;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-b2b > span {
  display: inline-block;
  margin-left: 0.18rem;
  font-size: clamp(0.42rem, 1.8vw, 0.52rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-pp-segments,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-misfire-segments {
  width: min(100%, 5rem);
  height: 0.3rem;
  margin-top: 0.08rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-matchless-wrap {
  margin-top: 0.08rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-matchless-wrap small {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .turn-free-move {
  flex: 0 1 6rem;
  width: min(6rem, 35%);
  min-width: 4.6rem;
  min-height: 0;
  height: calc(100% - 0.12rem);
  padding: 0.12rem 0.24rem;
  border-radius: 3px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .turn-free-move-help {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .turn-free-move-title {
  font-size: clamp(0.46rem, 2vw, 0.58rem);
  line-height: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .turn-free-move-progress {
  gap: 0.2rem;
  margin-top: 0.08rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .turn-free-move-pips {
  gap: 0.12rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .turn-free-move-pips i {
  width: 0.38rem;
  height: 0.38rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .turn-free-move-progress strong {
  font-size: 0.5rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-live-stats {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack {
  position: absolute;
  right: 0.12rem;
  bottom: calc(100% + var(--portrait-duel-gap));
  z-index: 18;
  display: flex;
  flex-direction: row;
  width: auto;
  max-width: 7.2rem;
  gap: 0.2rem;
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter {
  width: 3.35rem;
  min-height: 1.7rem;
  padding: 0.18rem 0.22rem;
  background: rgba(6, 10, 15, 0.88);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter span {
  font-size: 0.42rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter strong {
  font-size: 0.82rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-counter-stack {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-panel {
  display: contents;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-base {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-player-drain,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-ai-drain {
  position: relative;
  z-index: 15;
  display: none;
  align-self: stretch;
  justify-self: end;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 4.65rem;
  height: 100%;
  margin: 0;
  padding: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based .duel-tempo-player-drain,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based .duel-tempo-ai-drain {
  display: flex;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-player-drain {
  grid-area: full-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-ai-drain {
  grid-area: compact-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-player-drain {
  grid-area: compact-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-ai-drain {
  grid-area: full-status;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-clock-label {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-clock-value {
  min-inline-size: 4.5rem;
  padding: 2px 3px;
  font-size: clamp(0.72rem, 3.8vw, 0.92rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-shield-meter {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-hp {
  grid-area: full-hp;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-shield-meter {
  grid-area: full-shield;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp {
  grid-area: compact-hp;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter {
  grid-area: compact-shield;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-hp {
  grid-area: compact-hp;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-shield-meter {
  grid-area: compact-shield;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-hp {
  grid-area: full-hp;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-shield-meter {
  grid-area: full-shield;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-hp {
  display: block;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-hp > div:not(.duel-bar-delta),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-shield-track {
  height: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-hp strong {
  font-size: clamp(0.9rem, 4.6vw, 1.25rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-shield-meter::before {
  font-size: clamp(0.62rem, 3vw, 0.78rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-hp > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-shield-meter > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-shield-meter::after {
  font-size: clamp(0.42rem, 1.8vw, 0.54rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-queue {
  grid-area: incoming;
  display: block;
  width: 100%;
  height: var(--layout-duel-packet-height);
  min-height: 0;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-queue,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-queue {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-queue .attack-queue-packet {
  width: clamp(2.8rem, 16%, 3.75rem);
  height: calc(var(--layout-duel-packet-height) - 0.18rem);
  font-size: clamp(0.62rem, 3vw, 0.78rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-lower-board-label {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-pause-rail {
  position: fixed;
  right: max(var(--game-outer-gap), env(safe-area-inset-right));
  bottom: max(var(--game-outer-gap), env(safe-area-inset-bottom));
  left: auto;
  z-index: 40;
  display: grid;
  width: var(--layout-duel-board-width);
  height: calc(var(--layout-duel-player-hud-height) * 0.26);
  place-items: center;
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-pause-button {
  width: min(6.4rem, 34vw);
  min-height: 0;
  height: 100%;
  padding: 0.18rem 0.5rem;
  font-size: clamp(0.58rem, 2.8vw, 0.72rem);
  pointer-events: auto;
  justify-self: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-status-heading .duel-board-label {
  display: block !important;
  font-size: clamp(0.4rem, 1.8vw, 0.5rem);
  letter-spacing: 0;
  text-transform: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-board-label,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-board-label {
  position: absolute;
  top: calc(var(--portrait-mini-size) - 0.95rem);
  bottom: auto;
  left: calc(-1 * (var(--portrait-mini-size) + var(--portrait-duel-gap)));
  z-index: 20;
  width: var(--portrait-mini-size);
  padding: 0.12rem 0.18rem;
  background: rgba(3, 9, 13, 0.82);
  line-height: 0.75rem;
  text-align: center;
}

/* Portrait Duel refinement: HUD ownership never follows board focus. The
 * opponent uses a complete active-board minimap with a tiny combat stack. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-arena {
  grid-template-columns: minmax(0, 1fr) clamp(6.5rem, 32vw, 7rem);
  grid-template-rows:
    var(--portrait-mini-size)
    calc((var(--layout-duel-opponent-height) - var(--portrait-mini-size)) * 0.27)
    calc((var(--layout-duel-opponent-height) - var(--portrait-mini-size)) * 0.2)
    calc((var(--layout-duel-opponent-height) - var(--portrait-mini-size)) * 0.53)
    var(--layout-duel-packet-height)
    calc(var(--portrait-board-width) / 0.8)
    calc(var(--layout-duel-player-hud-height) * 0.33)
    calc(var(--layout-duel-player-hud-height) * 0.27)
    calc(var(--layout-duel-player-hud-height) * 0.14)
    calc(var(--layout-duel-player-hud-height) * 0.26);
  grid-template-areas:
    "compact-board compact-status"
    "compact-hp compact-status"
    "compact-shield compact-status"
    "compact-queue compact-status"
    "incoming incoming"
    "full-board full-board"
    "full-status full-status"
    "full-hp full-hp"
    "full-shield full-shield"
    "controls controls";
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel { grid-area: full-status; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-status-panel { grid-area: compact-status; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-hp { grid-area: full-hp; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-shield-meter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-shield-meter { grid-area: full-shield; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp { grid-area: compact-hp; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-shield-meter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter { grid-area: compact-shield; }

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-queue,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-queue {
  grid-area: incoming;
  display: block;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-queue,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-queue {
  grid-area: compact-queue;
  display: block !important;
  width: var(--portrait-mini-size);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-queue .attack-queue-packet {
  width: clamp(1.1rem, 32%, 1.45rem);
  height: calc(100% - 1px);
  min-height: 0;
  padding: 0 0.08rem;
  font-size: clamp(0.34rem, 1.6vw, 0.44rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter {
  position: relative;
  width: var(--portrait-mini-size);
  overflow: visible;
  border-width: 1px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-current-threshold,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter::after { display: none !important; }

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp strong {
  color: #fff;
  line-height: 1;
  opacity: 0.96;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter::before {
  font-size: clamp(0.38rem, 1.8vw, 0.48rem) !important;
  opacity: 0.9;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-bar-delta,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter > .duel-bar-delta {
  right: auto !important;
  left: calc(100% + 0.2rem) !important;
  z-index: 25;
  font-size: clamp(0.48rem, 2.2vw, 0.62rem) !important;
  transform: translateY(-50%);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .board-value-layer[data-board="ai-game-board"] { display: none !important; }

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container {
  height: var(--portrait-board-width);
  align-self: start;
  overflow: hidden;
  border: 1px solid rgba(135, 225, 231, 0.5);
  border-radius: 3px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container canvas {
  height: calc((var(--portrait-board-width) - 2px) / 0.8) !important;
  transform: translateY(-20%);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-board-label,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-board-label {
  position: static;
  width: 100%;
  padding: 0;
  background: transparent;
  line-height: 1;
  text-align: left;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-player-drain,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-player-drain { grid-area: full-status; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-ai-drain,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-ai-drain { grid-area: compact-status; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack { display: flex !important; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-counter-stack { display: none !important; }

/* Target portrait composition: shared dashboard, player board, then the
 * player's HP / SHIELD / packet / pause stack. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-arena {
  grid-template-rows:
    var(--portrait-mini-size)
    calc((var(--layout-duel-opponent-height) - var(--portrait-mini-size)) * 0.2)
    calc((var(--layout-duel-opponent-height) - var(--portrait-mini-size)) * 0.16)
    calc((var(--layout-duel-opponent-height) - var(--portrait-mini-size)) * 0.28)
    calc((var(--layout-duel-opponent-height) - var(--portrait-mini-size)) * 0.36)
    calc(var(--portrait-board-width) / 0.8)
    calc(var(--layout-duel-player-hud-height) * 0.3)
    calc(var(--layout-duel-player-hud-height) * 0.16)
    calc(var(--layout-duel-player-hud-height) * 0.28)
    calc(var(--layout-duel-player-hud-height) * 0.26);
  grid-template-areas:
    "player-status compact-board"
    "player-status compact-hp"
    "player-status compact-shield"
    "player-status compact-queue"
    "player-status compact-clock"
    "full-board full-board"
    "full-hp full-hp"
    "full-shield full-shield"
    "incoming incoming"
    "controls controls";
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-status-panel {
  grid-area: player-status;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.12rem 0;
  background: transparent;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-heading {
  flex: 0 0 auto;
  width: min(7rem, 100%);
  height: auto;
  min-height: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .turn-free-move {
  position: absolute;
  top: 0.12rem;
  right: 0.1rem;
  width: min(5.2rem, 42%);
  height: 2.15rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-counter-stack {
  top: 2.7rem;
  right: auto;
  left: 0;
  bottom: auto;
  max-width: 6.5rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-b2b {
  justify-self: start;
  width: min(7rem, 100%);
  margin: 0 !important;
  text-align: left;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  grid-area: compact-board;
  z-index: 14;
  align-self: start;
  width: var(--portrait-mini-size);
  justify-self: end;
  height: auto;
  padding: 0.08rem 0.12rem;
  background: linear-gradient(to bottom, rgba(2, 7, 11, 0.86), transparent);
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-status-heading {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-b2b,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .turn-free-move {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-board-label,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-board-label {
  color: #fff;
  font-size: clamp(0.38rem, 1.7vw, 0.48rem);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-player-drain,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-player-drain {
  grid-area: player-status;
  align-self: end;
  justify-self: start;
  width: auto;
  height: auto;
  padding-bottom: 0.08rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-ai-drain,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-ai-drain {
  grid-area: compact-clock;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-ai-drain .duel-clock-value {
  min-inline-size: 0;
  width: 100%;
  padding: 0;
  font-size: clamp(0.46rem, 2.1vw, 0.58rem) !important;
  text-align: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-hp { grid-area: full-hp; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-shield-meter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-shield-meter { grid-area: full-shield; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-queue,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-queue {
  grid-area: incoming;
  height: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-queue .attack-queue-packet {
  height: calc(100% - 0.12rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-pause-rail {
  height: 44px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container {
  justify-self: end;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container {
  width: var(--portrait-mini-size) !important;
  height: var(--portrait-mini-size) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-queue {
  width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter > span {
  display: block !important;
  font-size: clamp(0.32rem, 1.45vw, 0.4rem) !important;
  line-height: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-hp strong {
  font-size: clamp(0.42rem, 1.9vw, 0.52rem) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-shield-meter::before {
  font-size: clamp(0.4rem, 1.8vw, 0.5rem) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-queue {
  border: 1px solid rgba(91, 213, 220, 0.22);
  background: rgba(4, 13, 18, 0.48);
}

/* Phone dashboard fit and opponent inspection. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-arena {
  grid-template-areas:
    "player-status compact-board"
    "player-status compact-hp"
    "player-status compact-shield"
    "player-status compact-clock"
    "player-status compact-clock"
    "full-board full-board"
    "full-hp full-hp"
    "full-shield full-shield"
    "incoming incoming"
    "controls controls";
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .turn-free-move {
  top: 0.35rem;
  right: auto;
  left: min(7.25rem, 48%);
  width: min(5.2rem, calc(52% - 0.2rem));
  height: 2rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-status-panel {
  min-width: 0;
  max-width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-duel-panel .duel-queue {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .ai-board-container canvas {
  filter: none !important;
  opacity: 1 !important;
}

@keyframes mobile-opponent-low-hp {
  from {
    border-color: rgba(255, 76, 98, 0.72);
    box-shadow: 0 0 5px rgba(255, 38, 72, 0.5), inset 0 0 4px rgba(255, 50, 78, 0.22);
  }
  to {
    border-color: rgba(255, 142, 152, 0.98);
    box-shadow: 0 0 13px rgba(255, 30, 66, 0.92), 0 0 22px rgba(255, 20, 56, 0.42), inset 0 0 7px rgba(255, 62, 88, 0.38);
  }
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-ai-low-hp:not(.is-opponent-focus) .ai-board-container {
  animation: mobile-opponent-low-hp var(--low-hp-pulse-duration, 1.35s) ease-in-out infinite alternate;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container {
  grid-column: 1 / -1;
  grid-row: 6;
  justify-self: stretch;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  align-self: stretch;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container canvas {
  width: 100% !important;
  height: 100% !important;
  transform: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-queue {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-shield-meter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-queue,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-player-drain {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  grid-area: player-status;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  padding: 0.12rem 0;
  background: transparent;
  text-align: left;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-heading {
  display: grid;
  width: min(7rem, 100%);
  height: auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-board-label {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-b2b {
  display: block !important;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: min(7rem, 100%);
  margin: 0 !important;
  text-align: left;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .turn-free-move:not([hidden]) {
  position: absolute;
  top: 0.35rem;
  right: auto;
  left: min(7.25rem, 48%);
  display: grid !important;
  width: min(5.2rem, calc(52% - 0.2rem));
  height: 2rem;
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .turn-free-move[hidden] {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  position: absolute;
  top: 2.7rem;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 18;
  display: flex !important;
  flex-direction: row;
  width: auto;
  max-width: 6.5rem;
  gap: 0.2rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-ai-drain {
  grid-area: player-status;
  align-self: end;
  justify-self: start;
  width: auto;
  height: auto;
  padding-bottom: 0.08rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-ai-drain .duel-clock-value {
  width: auto;
  min-inline-size: 4.5rem;
  padding: 2px 3px;
  font-size: clamp(0.72rem, 3.8vw, 0.92rem) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-hp {
  grid-area: full-hp;
  display: block;
  width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-shield-meter {
  grid-area: full-shield;
  display: block;
  width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-hp strong {
  font-size: clamp(0.9rem, 4.6vw, 1.25rem) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-hp > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-shield-meter > span {
  font-size: clamp(0.42rem, 1.8vw, 0.54rem) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-shield-meter::before {
  font-size: clamp(0.62rem, 3vw, 0.78rem) !important;
}

/* Follow-up phone HUD refinements. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-board-container canvas,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-board-container canvas {
  transform: translateY(calc(-20% + 1px));
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-queue {
  grid-area: incoming;
  display: block !important;
  width: 100%;
  height: 100%;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-hp > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-shield-meter > span {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  top: 0.3rem;
  right: calc(var(--portrait-mini-size) + 0.45rem);
  left: auto;
  width: auto;
  max-width: 5.35rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .chain-counter {
  width: 2.55rem;
  min-height: 1.5rem;
  padding: 0.12rem 0.16rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter strong {
  font-size: 0.72rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter span {
  font-size: 0.36rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-lower-board-label,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-lower-board-label {
  grid-area: controls;
  position: relative;
  z-index: 42;
  display: block;
  align-self: center;
  justify-self: start;
  width: min(7rem, 34%);
  min-width: 0;
  padding: 0.12rem 0.24rem;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: rgba(239, 248, 251, 0.82);
  font-size: clamp(0.46rem, 2vw, 0.56rem);
  font-weight: 850;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-lower-board-label,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-lower-board-label {
  display: none;
}

html[data-layout-family="mobile-portrait"] .duel-results-stats,
html[data-layout-family="mobile-portrait"] .practice-challenge-results {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.75fr));
  overflow-x: hidden;
}

html[data-layout-family="mobile-portrait"] .practice-challenge-results {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
}

html[data-layout-family="mobile-portrait"] .duel-end-popup,
html[data-layout-family="mobile-portrait"] .practice-challenge-results-popup {
  overflow-x: hidden;
}

html[data-layout-family="mobile-portrait"] .duel-results-stats span,
html[data-layout-family="mobile-portrait"] .duel-results-stats strong,
html[data-layout-family="mobile-portrait"] .practice-challenge-results span,
html[data-layout-family="mobile-portrait"] .practice-challenge-results strong {
  min-width: 0;
  padding: 5px 4px;
  overflow-wrap: anywhere;
  font-size: clamp(0.58rem, 2.5vw, 0.7rem);
}

@media (min-width: 861px) {
  .attack-queue-packet span {
    font-size: clamp(0.9rem, 1.05vw, 1.08rem);
  }
}

/* Mobile Duel dashboard ownership and end-state polish. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .turn-free-move:not([hidden]),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .turn-free-move:not([hidden]) {
  top: 2.15rem;
  right: auto;
  left: 0;
  width: min(5.35rem, 38%);
  height: 1.72rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  top: 0.22rem;
  right: 0.18rem;
  left: auto;
  max-width: 5.35rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stats {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  height: 1.15rem;
  min-height: 0;
  gap: 0.08rem;
  overflow: hidden;
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat-spacer,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat-spacer {
  display: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat {
  display: grid;
  min-width: 0;
  height: 100%;
  padding: 0;
  place-content: center;
  text-align: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat > span {
  overflow: hidden;
  font-size: clamp(0.25rem, 1.1vw, 0.32rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat > div,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat > div {
  display: block;
  min-width: 0;
  line-height: 0.72;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat strong {
  display: block;
  overflow: hidden;
  font-size: clamp(0.38rem, 1.7vw, 0.48rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat small,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat small,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-live-stats {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-queue {
  box-sizing: border-box;
  min-height: var(--layout-duel-packet-height);
  padding: 0.08rem 0;
  border: 1px solid rgba(91, 213, 220, 0.22);
  background: rgba(4, 13, 18, 0.48);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-queue .attack-queue-packet {
  width: clamp(2.8rem, 16%, 3.75rem);
  height: calc(100% - 0.12rem);
  min-height: 0;
  padding: 0 0.16rem;
  font-size: clamp(0.62rem, 3vw, 0.78rem);
}

/* Match the mobile single-player challenge dashboard while preserving the
 * dedicated right-hand opponent minimap column. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) 1.55rem;
  align-items: stretch;
  align-content: stretch;
  width: 100%;
  height: 100%;
  gap: 0.16rem;
  padding: 0.08rem 0.12rem 0;
  overflow: visible;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-heading {
  position: static;
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: center;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-b2b,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-b2b {
  width: min(100%, 7.5rem);
  max-width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .turn-free-move:not([hidden]),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .turn-free-move:not([hidden]) {
  position: static;
  grid-column: 1 / 3;
  grid-row: 2;
  align-self: stretch;
  justify-self: start;
  width: min(100%, 5.7rem);
  height: 100%;
  min-width: 0;
  padding: 0.08rem 0.18rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stats {
  position: static;
  grid-column: 3 / 5;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 0.08rem 0.16rem;
  padding: 0;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  justify-items: end;
  min-width: 0;
  height: 100%;
  padding: 0;
  text-align: right;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat > span {
  width: 100%;
  font-size: clamp(0.3rem, 1.25vw, 0.38rem);
  text-align: right;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat > div,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat > div {
  width: 100%;
  text-align: right;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat strong {
  font-size: var(--layout-fit-font-size, clamp(0.75rem, 3vw, 0.88rem)) !important;
  text-align: right;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  position: static;
  grid-column: 3 / 5;
  grid-row: 2;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: 100%;
  gap: 0.16rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .chain-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 0.12rem;
  padding: 0.08rem 0.12rem;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter span {
  display: inline;
  font-size: clamp(0.34rem, 1.45vw, 0.42rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter strong {
  display: inline;
  font-size: clamp(0.62rem, 2.7vw, 0.78rem);
}

/* Keep the phone dashboard intentionally sparse. The Duel clock is a sibling
 * grid item, so the status panel reserves its bottom row instead of allowing
 * the clock to layer over MULT, Free Move, or live statistics. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: minmax(0, 1fr) 1.45rem;
  padding: 0.08rem 0.12rem 1.55rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-heading {
  grid-column: 1;
  grid-row: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .turn-free-move:not([hidden]),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .turn-free-move:not([hidden]) {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, 5.7rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stats {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 0.14rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stat:nth-child(n + 4),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(n + 4) {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  grid-column: 2;
  grid-row: 2;
  gap: 0.12rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-player-drain,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-ai-drain {
  z-index: 20;
  align-self: end;
  justify-self: start;
  width: auto;
  height: 1.42rem;
  margin: 0 0 0 0.12rem;
  padding: 0;
  pointer-events: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-tempo-player-drain .duel-clock-value,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .duel-tempo-ai-drain .duel-clock-value {
  width: auto;
  min-inline-size: 4.7rem;
  max-height: 1.42rem;
  padding: 1px 3px;
  font-size: var(--layout-fit-font-size, clamp(0.82rem, 3.4vw, 0.92rem)) !important;
  line-height: 1.12;
}

/* The compact opponent summary keeps its clock beside, rather than beneath,
 * the minimap's HP and SHIELD bars. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-arena {
  grid-template-columns:
    minmax(0, 1fr)
    clamp(3.2rem, 15vw, 3.6rem)
    var(--portrait-mini-size);
  grid-template-areas:
    "player-status compact-clock compact-board"
    "player-status compact-clock compact-hp"
    "player-status compact-clock compact-shield"
    "player-status compact-clock compact-queue"
    "player-status compact-clock compact-queue"
    "full-board full-board full-board"
    "full-hp full-hp full-hp"
    "full-shield full-shield full-shield"
    "incoming incoming incoming"
    "controls controls controls";
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .duel-tempo-ai-drain {
  grid-area: compact-clock;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0.08rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .duel-tempo-ai-drain .duel-clock-value {
  width: 100%;
  min-inline-size: 0;
  max-width: 100%;
  padding: 1px;
  font-size: var(--layout-fit-font-size, clamp(0.48rem, 2.1vw, 0.6rem)) !important;
  text-align: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-queue {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .player-duel-panel .duel-queue {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-queue {
  grid-area: incoming;
  display: block !important;
  width: 100%;
  height: 100%;
  min-height: var(--layout-duel-packet-height);
}

/* Keep the compact board unobstructed and align the player's primary HUD to
 * the same left edge as the full board. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  padding-left: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-b2b,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .turn-free-move:not([hidden]),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-b2b,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .turn-free-move:not([hidden]) {
  justify-self: start;
  margin-left: 0 !important;
  text-align: left;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-heading .duel-board-label {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-status-panel {
  grid-area: compact-clock;
  z-index: 22;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-board-label {
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  background: transparent;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-board-container {
  align-self: stretch;
  height: var(--portrait-mini-height) !important;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-board-container canvas {
  height: calc((var(--portrait-mini-size) - 2px) / 0.8) !important;
  transform: none;
}

/* Standard Duel has no side clocks or Free Move controls. Reclaim that space
 * for the complete player stat set and keep the opponent summary on the RHS. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .duel-arena {
  grid-template-columns: minmax(0, 1fr) var(--portrait-mini-size);
  grid-template-areas:
    "player-status compact-board"
    "player-status compact-hp"
    "player-status compact-shield"
    "player-status compact-name"
    "player-status compact-name"
    "full-board full-board"
    "full-hp full-hp"
    "full-shield full-shield"
    "incoming incoming"
    "controls controls";
  justify-self: center;
  margin-inline: auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based):not(.is-opponent-focus) .ai-duel-panel .duel-status-panel {
  grid-area: compact-name;
  align-self: center;
  width: 100%;
  height: auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-status-panel {
  grid-template-columns: minmax(5.8rem, 0.68fr) minmax(0, 1.32fr);
  grid-template-rows: minmax(0, 1fr) 1.45rem;
  padding: 0.08rem 0.12rem 0 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-status-heading {
  display: block;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-status-heading .duel-b2b,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-status-heading .duel-b2b {
  grid-column: 1 !important;
  width: 100%;
  max-width: 7.5rem;
  margin: 0 !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.14rem 0.12rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat:nth-child(1),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat:nth-child(2),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(2) {
  grid-column: 3 / 5;
  grid-row: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat:nth-child(4),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(4) {
  grid-column: 5 / 7;
  grid-row: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat:nth-child(5),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(5) {
  grid-column: 2 / 4;
  grid-row: 2;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat:nth-child(6),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(6) {
  grid-column: 4 / 6;
  grid-row: 2;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat:nth-child(n + 4),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(n + 4) {
  display: grid !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-counter-stack {
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat > span {
  font-size: clamp(0.4rem, 1.65vw, 0.5rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-live-stat strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat strong {
  font-size: var(--layout-fit-font-size, clamp(0.8rem, 3.5vw, 1rem)) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .duel-live-stat.is-time strong {
  width: 100%;
  min-inline-size: 0;
  padding: 0;
  text-align: right;
}

/* Turn-Based uses the same corrected left-edge ownership and readable stat
 * typography, while retaining Free Move and the dedicated active clock row. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based .player-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based.is-opponent-focus .ai-duel-panel .duel-status-heading {
  display: block;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based .player-duel-panel .duel-status-heading .duel-b2b,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based.is-opponent-focus .ai-duel-panel .duel-status-heading .duel-b2b {
  grid-column: 1 !important;
  width: 100%;
  max-width: 7.5rem;
  margin: 0 !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based.is-opponent-focus .ai-duel-panel .duel-live-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 0.18rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based .player-duel-panel .duel-live-stat > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based.is-opponent-focus .ai-duel-panel .duel-live-stat > span {
  font-size: clamp(0.4rem, 1.65vw, 0.5rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based .player-duel-panel .duel-live-stat strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based.is-opponent-focus .ai-duel-panel .duel-live-stat strong {
  font-size: var(--layout-fit-font-size, clamp(0.8rem, 3.5vw, 1rem)) !important;
}

/* Resource bars reserve a narrow outside lane for HP and SHIELD deltas.
 * Packet queues continue to own the full board width. */
.app-shell.is-ai-duel .duel-hud-row > .duel-hp,
.app-shell.is-ai-duel .duel-hud-row > .duel-shield-meter,
.app-shell.is-training-survival .player-duel-panel .duel-hud-row > .duel-hp,
.app-shell.is-training-survival .player-duel-panel .duel-hud-row > .duel-shield-meter,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row > .duel-hp,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row > .duel-shield-meter {
  --duel-delta-lane: clamp(1.6rem, 7%, 2.6rem);
  width: calc(100% - var(--duel-delta-lane));
  max-width: calc(100% - var(--duel-delta-lane));
}

.app-shell.is-ai-duel .player-duel-panel .duel-hud-row > .duel-hp,
.app-shell.is-ai-duel .player-duel-panel .duel-hud-row > .duel-shield-meter,
.app-shell.is-training-survival .player-duel-panel .duel-hud-row > .duel-hp,
.app-shell.is-training-survival .player-duel-panel .duel-hud-row > .duel-shield-meter,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row > .duel-hp,
.app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row > .duel-shield-meter {
  justify-self: end;
}

.app-shell.is-ai-duel .ai-duel-panel .duel-hud-row > .duel-hp,
.app-shell.is-ai-duel .ai-duel-panel .duel-hud-row > .duel-shield-meter {
  justify-self: start;
}

/* Counter boxes use the complete height of their assigned rail. */
.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack {
  padding-block: 0.06rem;
}

.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .combo-counter,
.app-shell.is-ai-duel .duel-status-panel .duel-counter-stack .chain-counter {
  padding-block: 0.06rem;
}

/* Phone Duel uses one shared dashboard geometry for Standard and Turn-Based:
 * player telemetry on the left, opponent summary stacked on the right. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-arena {
  --portrait-mini-offset: clamp(0.22rem, 0.9vh, 0.38rem);
  --portrait-mini-height: calc(var(--portrait-mini-size) / 0.8);
  --portrait-mini-remainder:
    calc(var(--layout-duel-opponent-height) - var(--portrait-mini-height) - var(--portrait-mini-offset));
  grid-template-columns: minmax(0, 1fr) var(--portrait-mini-size);
  grid-template-rows:
    calc(var(--portrait-mini-height) + var(--portrait-mini-offset))
    calc(var(--portrait-mini-remainder) * 0.38)
    calc(var(--portrait-mini-remainder) * 0.22)
    calc(var(--portrait-mini-remainder) * 0.18)
    calc(var(--portrait-mini-remainder) * 0.22)
    calc(var(--portrait-board-width) / 0.8)
    calc((var(--layout-duel-player-hud-height) - 44px) * 0.4054)
    calc((var(--layout-duel-player-hud-height) - 44px) * 0.2162)
    calc((var(--layout-duel-player-hud-height) - 44px) * 0.3784)
    44px;
  grid-template-areas:
    "player-status compact-board"
    "player-status compact-clock"
    "player-status compact-hp"
    "player-status compact-shield"
    "player-status compact-name"
    "full-board full-board"
    "full-hp full-hp"
    "full-shield full-shield"
    "incoming incoming"
    "controls controls";
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  grid-template-columns: minmax(0, 5.7rem) minmax(0, 1fr);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-board-container {
  align-self: end;
  margin-bottom: 1px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-status-panel {
  grid-area: compact-name;
  align-self: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .duel-tempo-ai-drain {
  grid-area: compact-clock;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: calc(100% - 1px);
  margin: 0;
  padding: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .duel-tempo-ai-drain .duel-clock-value {
  width: 100%;
  min-inline-size: 0;
  max-width: 100%;
  max-height: none;
  padding: 1px 2px;
  font-size: var(--layout-fit-font-size, clamp(0.65rem, 2.8vw, 0.78rem)) !important;
  line-height: 1;
  text-align: center;
}

/* The two dashboard rails meet without an unused gutter. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  column-gap: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stats {
  justify-self: stretch;
  width: 100%;
  max-width: none;
  margin-left: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  align-self: stretch;
  padding-block: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .chain-counter {
  min-height: 0;
  height: 100%;
  padding-block: 0.02rem;
}

/* Deltas belong to full combat bars, not the always-visible minimap summary. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-bar-delta {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-hud-row > .duel-hp,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .ai-duel-panel .duel-hud-row > .duel-shield-meter {
  width: 100%;
  max-width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .duel-arena {
  grid-template-areas:
    "player-status compact-board"
    "player-status compact-hp"
    "player-status compact-shield"
    "player-status compact-name"
    "player-status compact-name"
    "full-board full-board"
    "full-hp full-hp"
    "full-shield full-shield"
    "incoming incoming"
    "controls controls";
}

/* Final mobile Duel ownership: later preset-specific declarations must not
 * re-expand the board or counter allocations. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-arena {
  justify-self: center;
  margin-inline: auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-board-container {
  justify-self: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based) .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-counter-stack {
  grid-template-columns: repeat(2, minmax(2.35rem, 1fr));
  align-items: center;
  justify-self: end;
  width: min(100%, 5.35rem);
  max-width: 5.35rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack .chain-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .combo-counter,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack .chain-counter {
  align-self: center;
  height: calc(100% - 0.18rem);
  min-height: 1.05rem;
  padding-block: 0.06rem;
}
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  grid-template-rows: minmax(0, 1fr) 44px;
}
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .player-duel-panel .turn-free-move:not([hidden]),
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .turn-free-move:not([hidden]) {
  height: 44px !important; min-height: 44px !important; max-height: none;
}
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-live-stat > span { font-size: 9px !important; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack :is(.combo-counter, .chain-counter):not([hidden]) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 40px !important; max-height: 40px; gap: 1px;
}
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack :is(.combo-counter, .chain-counter) > span { font-size: 9px; }
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack :is(.combo-counter, .chain-counter) > strong { font-size: 14px; }
/* Short landscape menus share a bounded shell; long copy scrolls internally. */
html[data-layout-family="mobile-landscape"] .main-menu-screen { padding: 8px; }
html[data-layout-family="mobile-landscape"] .main-menu-screen .screen-panel.menu-home {
  width: 100%; min-width: 0; min-height: 0;
  height: var(--layout-usable-height); max-height: 100%; gap: 6px;
}
html[data-layout-family="mobile-landscape"] .menu-logo-heading { max-width: 160px; }
html[data-layout-family="mobile-landscape"] .menu-version { font-size: 12px; }
html[data-layout-family="mobile-landscape"] .main-menu-page {
  min-width: 0; min-height: 0; max-width: 100%; gap: 6px; align-content: center;
}
html[data-layout-family="mobile-landscape"] :is(#main-menu-root, #battle-menu-page, #ai-duel-mode-page, #training-menu-page, #tutorial-menu-page) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas: none !important;
}
html[data-layout-family="mobile-landscape"] :is(#main-menu-root, #battle-menu-page, #ai-duel-mode-page, #training-menu-page, #tutorial-menu-page) > * {
  grid-area: auto !important; min-width: 0;
}
html[data-layout-family="mobile-landscape"] .main-menu-page :is(.mode-button, .tutorial-menu-entry) {
  width: 100% !important; min-width: 0 !important; min-height: 44px !important;
  height: auto !important; padding: 8px;
}
html[data-layout-family="mobile-landscape"] .main-menu-page .mode-button > small { display: none; }
html[data-layout-family="mobile-landscape"] .main-menu-page .mode-button > :is(span, strong) {
  white-space: normal; overflow-wrap: anywhere; font-size: 20px !important; line-height: 1.1;
}
html[data-layout-family="mobile-landscape"] #main-menu-root .mode-button > span { font-size: 26px !important; }
html[data-layout-family="mobile-landscape"] #options-menu-page:not(.is-options-detail) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 44px minmax(0, 1fr);
  grid-template-areas: "title" "back" "content";
  align-content: stretch;
}
html[data-layout-family="mobile-landscape"] #options-menu-page > .main-menu-back { margin: 0; min-height: 44px; }
html[data-layout-family="mobile-landscape"] #options-category-menu {
  grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; min-height: 0; gap: 6px;
}
html[data-layout-family="mobile-landscape"] #options-category-menu .mode-button > span { display: none; }
html[data-layout-family="mobile-landscape"] #training-challenge-menu-page {
  grid-template-rows: auto minmax(0, 1fr) auto; padding: 0;
}
html[data-layout-family="mobile-landscape"] .training-challenge-list {
  width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(44px, 1fr)); gap: 6px; min-height: 0;
}
html[data-layout-family="mobile-landscape"] .training-challenge-list .mode-button:nth-child(n) { grid-area: auto !important; }
html[data-layout-family="mobile-landscape"] .training-challenge-detail-page {
  width: 100%; min-height: 0; padding: 0; gap: 5px; overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
html[data-layout-family="mobile-landscape"] .training-challenge-detail-page > * {
  width: 100%; max-width: 100%; min-width: 0;
}
html[data-layout-family="mobile-landscape"] .training-challenge-detail-description { overflow: auto; min-height: 0; font-size: 14px; line-height: 1.25; }
html[data-layout-family="mobile-landscape"] .training-challenge-detail-record { padding: 4px; }
html[data-layout-family="mobile-landscape"] .training-challenge-detail-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
html[data-layout-family="mobile-landscape"] .training-challenge-detail-actions button {
  width: 100%; min-width: 0; min-height: 44px; padding: 6px; font-size: 14px;
}
html[data-layout-family="mobile-landscape"] .main-menu-page .menu-page-title { font-size: 22px; margin: 0; }
html[data-layout-family="mobile-landscape"] .pause-popup { max-height: calc(100dvh - 16px); padding: 12px; gap: 8px; }
html[data-layout-family="mobile-landscape"] .pause-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html[data-layout-family="mobile-landscape"] .pause-actions button { min-width: 0; min-height: 44px; padding: 6px; font-size: 14px; }

.leaderboard-category-select { display: none; grid-area: category; }
/* Back commands follow the leading button column without changing button sizes. */
#training-challenge-menu-page {
  grid-template-rows: auto auto auto;
  align-content: center;
}
#training-menu-page > .main-menu-back {
  grid-column: 1;
  justify-self: start;
  margin-inline: 0;
}
#training-challenge-menu-page .training-challenge-menu-actions {
  justify-self: stretch;
  justify-content: flex-start;
  width: 100%;
  padding-inline: 14px;
}
html[data-layout-family="mobile-portrait"] #training-challenge-menu-page .training-challenge-menu-actions,
html[data-layout-family="mobile-landscape"] #training-challenge-menu-page .training-challenge-menu-actions {
  padding-inline: 0;
}
html[data-layout-family="mobile-landscape"] #training-menu-page {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas: "title title" "practice challenges" "back ." !important;
}
html[data-layout-family="mobile-landscape"] #training-menu-page > .menu-page-title { grid-area: title !important; }
html[data-layout-family="mobile-landscape"] #training-menu-page > #free-practice-button { grid-area: practice !important; }
html[data-layout-family="mobile-landscape"] #training-menu-page > #training-challenges-button { grid-area: challenges !important; }
html[data-layout-family="mobile-landscape"] #training-menu-page > .main-menu-back { grid-area: back !important; }
.leaderboard-status { grid-area: status; }
.leaderboard-table { grid-area: table; }
@media (max-width: 600px), (max-height: 450px) {
  .leaderboard-overlay { padding: 8px; }
  .leaderboard-popup {
    box-sizing: border-box; width: 100%; min-width: 0;
    height: min(640px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px);
    padding: 12px; gap: 8px;
  }
  .leaderboard-header { gap: 8px; min-width: 0; }
  .leaderboard-header h2 { font-size: 22px; }
  .leaderboard-header button { min-width: 52px; min-height: 44px; padding: 6px; }
  .leaderboard-tabs { display: none; }
  .leaderboard-category-select { display: block; width: 100%; min-width: 0; height: 44px; }
  .leaderboard-table { min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .leaderboard-row { grid-template-columns: 44px minmax(0, 1fr); }
  .leaderboard-row > b { grid-column: 2; }
  .leaderboard-row > span { white-space: normal; overflow-wrap: anywhere; }
}

#replay-viewer {
  box-sizing: border-box;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border: 0; background: #080e10; color: #edf6f7; overflow: hidden;
}
#replay-viewer::backdrop { background: #080e10; }
#replay-library { box-sizing: border-box; width: min(760px, calc(100% - 24px)); height: min(680px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 16px; border: 1px solid #45717a; background: var(--panel-fill); color: var(--text); overflow: hidden; }
#replay-library::backdrop { background: rgba(0, 8, 10, .94); }
.replay-library-content { height: 100%; display: grid; grid-template-rows: 32px minmax(0, 1fr) 48px 100px; gap: 8px; }
#replay-library-title { margin: 0; text-align: center; font-size: 24px; }
#replay-library-list { min-height: 0; overflow: auto; }
.replay-library-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px; padding: 12px 4px; border-bottom: 1px solid #354d52; font-size: 16px; }
.replay-library-row input { grid-row: span 2; align-self: center; width: 18px; height: 18px; accent-color: #20c9aa; }
.replay-library-row span { font-size: 13px; color: var(--muted); }
.replay-library-row strong, .replay-library-row span { overflow-wrap: anywhere; }
.replay-library-row:has(input:checked) { background: #193337; }
#replay-library-status { margin: 0; font-size: 14px; line-height: 16px; overflow-wrap: anywhere; }
.replay-library-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.replay-library-actions button { min-width: 0; min-height: 44px; padding: 6px; color: #f7fbfd; font: 700 16px var(--font-ui); }
.replay-library-actions button:disabled { opacity: .4; }
#replay-library-back { grid-column: 3; --angular-edge: #a04d58; --angular-fill-top: #5a2930; --angular-fill-bottom: #241116; }
#options-category-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.practice-challenge-actions:has(#practice-challenge-save-replay:not([hidden])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.practice-challenge-actions:has(#practice-challenge-save-replay:not([hidden])) button { min-width: 0; padding: 8px; font-size: 16px; }
html[data-layout-family="mobile-landscape"] #options-category-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.replay-viewer-content {
  height: 100%; width: 100%; max-width: 900px; margin: auto;
  display: grid; grid-template-rows: 24px minmax(0, 1fr) 44px 48px; gap: 8px;
}
#replay-viewer-title { margin: 0; font-size: 14px; line-height: 24px; text-align: center; color: #9cb9bd; }
#replay-viewer-title small { margin-left: 12px; font-size: 12px; color: var(--muted); }
.replay-viewer-stage { min-height: 0; display: grid; grid-template-columns: 144px minmax(0, 1fr) 144px; gap: 12px; }
#replay-viewer[data-replay-format="2"] .replay-viewer-content { max-width: min(100%, 1600px); }
.replay-duel-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 20px);
}
.replay-duel-stage[hidden], .replay-duel-stage [hidden] { display: none !important; }
.replay-duel-participant {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(112px, 24%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 80px;
  grid-template-areas: "rail board" ". hud";
  gap: 7px 10px;
}
.replay-duel-participant.is-minimized {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 24%);
  grid-template-areas: "board rail" "hud .";
}
.replay-duel-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 3px;
  background: linear-gradient(180deg, rgba(11, 16, 24, .8), rgba(7, 10, 15, .7));
}
.replay-duel-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(58px, 48%); gap: 5px; align-items: start; }
.replay-duel-heading > strong {
  min-width: 0;
  padding: 5px 3px;
  overflow: hidden;
  border: 1px solid rgba(126, 225, 255, .42);
  background: linear-gradient(180deg, rgba(30, 58, 68, .88), rgba(12, 25, 32, .9));
  color: #f8fdff;
  font-size: clamp(10px, .75vw, 13px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.replay-duel-participant.is-minimized .replay-duel-heading { grid-template-columns: minmax(58px, 48%) minmax(0, 1fr); }
.replay-duel-participant.is-minimized .replay-duel-heading > strong { grid-column: 2; grid-row: 1; }
.replay-duel-mult.b2b-board-meter { grid-area: auto; width: 100%; min-width: 0; text-align: left; }
.replay-duel-participant.is-minimized .replay-duel-mult { grid-column: 1; grid-row: 1; }
.replay-duel-mult > strong { font-size: clamp(24px, 2vw, 36px); line-height: .95; }
.replay-duel-mult > span { font-size: 10px; margin-top: 2px; }
.replay-duel-mult .pp-segments, .replay-duel-mult .matchless-segments { height: 8px; min-height: 8px; gap: 3px; }
.replay-duel-mult .pp-segments { margin-top: 5px; }
.replay-duel-mult .matchless-wrap { margin-top: 6px; }
.replay-duel-mult .matchless-wrap small { font-size: 9px; }
#replay-viewer[data-duel-mult-system="classic"] .replay-duel-mult .pp-segments { display: grid; }
#replay-viewer:not([data-duel-mult-system="classic"]) .replay-duel-mult .pp-segments { display: none; }
.replay-duel-free { display: none !important; }
.replay-duel-free {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
  min-height: 36px;
  padding: 5px;
  border: 1px solid #776447;
  background: linear-gradient(180deg, #221c1b, #100e10);
  color: #e4d7bc;
  font-size: 11px;
}
.replay-duel-free > strong { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-duel-free > span { display: flex; gap: 3px; align-items: center; }
.replay-duel-free i { width: 7px; height: 7px; border: 1px solid #c7a65d; border-radius: 50%; }
.replay-duel-free i.is-filled { background: #ffd268; box-shadow: 0 0 5px #f7c36d; }
.replay-duel-free > small { font-size: 10px; }
.replay-duel-stats { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-top: auto; font-variant-numeric: tabular-nums; }
.replay-duel-stats > div { display: grid; align-content: center; min-height: 36px; line-height: 1.05; text-align: right; }
.replay-duel-participant.is-minimized .replay-duel-stats > div { text-align: left; }
.replay-duel-stats span { color: #9caeb9; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.replay-duel-stats strong { color: #f4f9fb; font-size: clamp(18px, 1.7vw, 27px); line-height: 1.08; overflow: hidden; text-overflow: ellipsis; }
.replay-duel-stats small { color: #aebac0; font-size: 10px; }
.replay-duel-counters { display: flex; gap: 5px; min-height: 0; }
.replay-duel-participant.is-minimized .replay-duel-counters { justify-content: flex-start; }
.replay-duel-counters .combo-counter, .replay-duel-counters .chain-counter {
  --counter-y: 0%;
  grid-area: auto;
  grid-row: auto;
  position: static;
  transform: none;
  width: min(50%, 80px);
  padding: 4px;
}
.replay-duel-counters span { font-size: 9px; }
.replay-duel-counters strong { font-size: 17px; }
.replay-duel-board {
  grid-area: board;
  position: relative;
  container-type: size;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.replay-duel-board canvas {
  grid-area: auto;
  display: block;
  width: min(100cqw, 80cqh);
  height: min(125cqw, 100cqh);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}
.replay-duel-board.is-low-hp canvas { outline: 2px solid #ed354b; outline-offset: -2px; box-shadow: 0 0 12px #ed354b; }
.replay-duel-hud { grid-area: hud; min-width: 0; min-height: 0; display: grid; grid-template-rows: 32px 18px 22px; gap: 4px; }
.replay-duel-hp, .replay-duel-shield {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid #6c9698;
  background: #112023;
  color: #f4ffff;
}
.replay-duel-hp > i, .replay-duel-shield > i { position: absolute; inset: 0 auto 0 0; width: var(--duel-fill, 0%); background: #51c55e; }
.replay-duel-shield > i { background: #307e8b; }
.replay-duel-hp > span, .replay-duel-shield > span, .replay-duel-hp > strong, .replay-duel-shield > strong, .replay-duel-shield > small { position: relative; z-index: 1; }
.replay-duel-hp > span, .replay-duel-shield > span { color: #d0e6f4; font-size: 9px; font-weight: 900; }
.replay-duel-hp > strong { position: absolute; left: 50%; transform: translateX(-50%); font-size: 26px; line-height: 1; text-shadow: 0 1px 3px #000; }
.replay-duel-shield > strong { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; line-height: 1; text-shadow: 0 1px 3px #000; }
.replay-duel-shield > small { margin-left: auto; color: #a9d8df; font-size: 9px; white-space: nowrap; }
.replay-duel-queue { display: flex; align-items: center; min-width: 0; height: 22px; overflow: hidden; gap: 2px; border-top: 1px solid rgba(100, 169, 182, .22); }
.replay-duel-packet { position: relative; display: inline-flex; flex: 0 0 47px; height: 21px; align-items: center; justify-content: center; }
.replay-duel-packet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.replay-duel-packet b { position: relative; color: #fff; font-size: 11px; text-shadow: 0 1px 2px #000; }
.replay-duel-result { position: absolute; z-index: 2; inset: 50% auto auto 50%; max-width: calc(100% - 24px); margin: 0; padding: 10px 16px; transform: translate(-50%, -50%); border: 1px solid #75bec4; background: rgba(7, 16, 19, .94); color: #f3fbfc; font-size: 18px; font-weight: 800; text-align: center; text-shadow: 0 1px 3px #000; }
@media (max-width: 600px) and (min-height: 451px) {
  #replay-viewer[data-replay-format="2"] .replay-viewer-content { grid-template-rows: 20px minmax(0, 1fr) 40px 44px; gap: 6px; }
  #replay-viewer[data-replay-format="2"] #replay-viewer-title { line-height: 20px; }
  #replay-viewer[data-replay-format="2"] .replay-viewer-navigation button { min-height: 40px; height: 40px; }
  .replay-duel-stage {
    --mini-width: clamp(58px, 21vw, 90px);
    grid-template-columns: minmax(0, 1fr) var(--mini-width);
    grid-template-rows: calc(var(--mini-width) * 1.25 + 24px) minmax(0, 1fr) 68px;
    gap: 5px 7px;
  }
  .replay-duel-participant.is-focused { display: contents; }
  .replay-duel-participant.is-focused > .replay-duel-rail { grid-column: 1; grid-row: 1; position: relative; display: grid; grid-template-columns: minmax(74px, 36%) minmax(0, 1fr); grid-template-rows: 43px 43px minmax(0, 1fr); gap: 2px 5px; background: transparent; padding: 0; }
  .replay-duel-participant.is-focused .replay-duel-heading { grid-column: 1; grid-row: 1; display: block; }
  .replay-duel-participant.is-focused .replay-duel-heading > strong { display: block; padding: 1px 2px; font-size: 10px; }
  .replay-duel-participant.is-focused .replay-duel-mult { margin-top: 3px; }
  .replay-duel-participant.is-focused .replay-duel-mult > strong { display: inline; font-size: 24px; }
  .replay-duel-participant.is-focused .replay-duel-mult > span { display: inline; margin-left: 3px; font-size: 8px; }
  .replay-duel-participant.is-focused .replay-duel-mult .pp-segments { margin-top: 2px; }
  .replay-duel-participant.is-focused .replay-duel-mult .matchless-wrap { display: none; }
  .replay-duel-participant.is-focused .replay-duel-free { display: none !important; }
.replay-duel-free { grid-column: 1; grid-row: 2; min-height: 0; padding: 2px; font-size: 10px; }
  .replay-duel-participant.is-focused .replay-duel-stats { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px 4px; margin: 0; }
  .replay-duel-participant.is-focused .replay-duel-stats > div { min-height: 0; text-align: left; }
  .replay-duel-participant.is-focused .replay-duel-stats span { font-size: 9px; }
  .replay-duel-participant.is-focused .replay-duel-stats strong { font-size: 16px; }
  .replay-duel-participant.is-focused .replay-duel-stats small { display: none; }
  .replay-duel-participant.is-focused .replay-duel-stats > div:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .replay-duel-participant.is-focused .replay-duel-stats > div:nth-child(4) { grid-column: 1; grid-row: 3; }
  .replay-duel-participant.is-focused .replay-duel-stats > div:nth-child(5) { grid-column: 2; grid-row: 3; }
  .replay-duel-participant.is-focused .replay-duel-stats > div:nth-child(n + 4) strong { font-size: 13px; }
  .replay-duel-participant.is-focused .replay-duel-counters { grid-column: 1 / -1; grid-row: 3; align-items: end; }
  .replay-duel-participant.is-focused .replay-duel-counters .combo-counter, .replay-duel-participant.is-focused .replay-duel-counters .chain-counter { width: 60px; padding: 1px 3px; }
  .replay-duel-participant.is-focused .replay-duel-counters span { font-size: 7px; }
  .replay-duel-participant.is-focused .replay-duel-counters strong { font-size: 12px; }
  .replay-duel-participant.is-focused > .replay-duel-board { grid-column: 1 / -1; grid-row: 2; }
  .replay-duel-participant.is-focused > .replay-duel-hud { grid-column: 1 / -1; grid-row: 3; }
  .replay-duel-participant.is-focused > .replay-duel-hud { grid-template-rows: 28px 15px 19px; gap: 3px; }
  .replay-duel-participant.is-focused .replay-duel-hp > strong { font-size: 23px; }
  .replay-duel-participant.is-focused .replay-duel-queue { height: 19px; }
  .replay-duel-participant.is-minimized { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 12px minmax(0, 1fr) 22px; grid-template-areas: "rail" "board" "hud"; gap: 1px; overflow: hidden; }
  .replay-duel-participant.is-minimized > .replay-duel-rail { padding: 0; background: transparent; }
  .replay-duel-participant.is-minimized .replay-duel-heading { display: block; }
  .replay-duel-participant.is-minimized .replay-duel-heading > strong { display: block; padding: 0 1px; font-size: 8px; }
  .replay-duel-participant.is-minimized .replay-duel-mult, .replay-duel-participant.is-minimized .replay-duel-free, .replay-duel-participant.is-minimized .replay-duel-stats, .replay-duel-participant.is-minimized .replay-duel-counters { display: none; }
  .replay-duel-participant.is-minimized > .replay-duel-board { cursor: pointer; }
  .replay-duel-participant.is-minimized > .replay-duel-hud { grid-template-rows: repeat(2, 10px); gap: 1px; }
  .replay-duel-participant.is-minimized .replay-duel-hp, .replay-duel-participant.is-minimized .replay-duel-shield { padding: 0; }
  .replay-duel-participant.is-minimized .replay-duel-hp > span, .replay-duel-participant.is-minimized .replay-duel-shield > span, .replay-duel-participant.is-minimized .replay-duel-shield > small { display: none; }
  .replay-duel-participant.is-minimized .replay-duel-hp > strong, .replay-duel-participant.is-minimized .replay-duel-shield > strong { font-size: 8px; }
  .replay-duel-participant.is-minimized .replay-duel-queue { display: none; }
  .replay-duel-packet { flex-basis: 38px; height: 18px; }
  .replay-duel-packet b { font-size: 9px; }
}
@media (max-height: 450px) {
  .replay-duel-participant { grid-template-columns: minmax(92px, 23%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 66px; }
  .replay-duel-participant.is-minimized { grid-template-columns: minmax(0, 1fr) minmax(92px, 23%); }
  .replay-duel-hud { grid-template-rows: 26px 15px 17px; gap: 3px; }
  .replay-duel-stats > div { min-height: 25px; }
}
.replay-viewer-hud { display: contents; }
.replay-hud-left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.replay-hud-right { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.replay-viewer-stage > .replay-viewer-board { grid-column: 2; grid-row: 1; }
#replay-mult-meter { width: 100%; max-width: 144px; text-align: left; }
#replay-mult-meter > strong { font-size: 32px; line-height: 32px; }
#replay-mult-meter > span { font-size: 11px; }
#replay-mult-meter .pp-segments, #replay-mult-meter .matchless-segments { width: 100%; height: 8px; min-height: 8px; }
#replay-misfire-wrap { margin-top: 6px; }
#replay-misfire-wrap small { font-size: 10px; }
.replay-score-stat > span, .replay-count-stats span { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.replay-score-stat strong { display: block; color: var(--gold); font-size: 26px; line-height: 30px; overflow-wrap: anywhere; }
#replay-viewer[data-replay-mode="mult-rush"] .replay-score-stat strong { font-size: 20px; line-height: 30px; }
.replay-count-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.replay-count-stats strong { display: block; font-size: 24px; line-height: 28px; overflow-wrap: anywhere; }
.replay-feedback { display: grid; grid-template-columns: 1fr; gap: 8px; }
.replay-feedback > div { height: 46px; min-width: 0; }
.replay-feedback .combo-counter, .replay-feedback .chain-counter { box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 4px; transform: none; --counter-y: 0%; }
.replay-feedback strong { font-size: 22px; }
.replay-feedback span { font-size: 10px; }
.replay-viewer-board { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; min-height: 0; min-width: 0; overflow: hidden; }
.replay-canvas-stage { position: relative; container-type: size; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; }
#replay-budget { min-width: 0; height: 34px; color: #dcebed; }
#replay-combat { min-width: 0; height: 88px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 30px 18px 32px; gap: 4px; }
#replay-combat[hidden], #replay-survival-stats[hidden] { display: none; }
.replay-viewer-board:has(#replay-combat:not([hidden])) { container-type: size; }
#replay-combat { width: min(100cqw, calc((100cqh - 94px) * .8)); justify-self: center; }
.replay-combat-meter { position: relative; box-sizing: border-box; min-width: 0; border: 1px solid #6c9698; background: #112023; color: #f4ffff; overflow: hidden; }
.replay-combat-meter > i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: #51c55e; }
.replay-combat-meter > strong { position: relative; display: block; text-align: center; font-size: 26px; line-height: 28px; text-shadow: 0 1px 2px #000; }
.replay-combat-meter > span, .replay-combat-meter > small { position: absolute; top: 50%; transform: translateY(-50%); font-size: 9px; line-height: 12px; }
.replay-combat-meter > span { left: 5px; }
.replay-combat-meter > small { right: 5px; }
#replay-shield > i { background: #307e8b; }
#replay-shield > strong { font-size: 14px; line-height: 16px; }
.replay-shield-thresholds { position: absolute; inset: 0; }
.replay-shield-thresholds > i { position: absolute; top: 0; bottom: 0; border-left: 1px solid #a4ccce; }
#replay-attack-queue { grid-area: 3 / 1; position: relative; inset: auto; width: 100%; min-width: 0; max-width: none; height: 32px; min-height: 32px; margin: 0; padding: 0; transform: none; }
#replay-attack-queue:not([hidden]) { display: grid; align-content: start; }
#replay-attack-queue { --replay-packet-width: 54px; --replay-packet-height: 24px; --replay-packet-font: 13px; --replay-packet-inset: 8px; }
.replay-queue-packet { position: relative; width: var(--replay-packet-width); height: var(--replay-packet-height); }
.replay-queue-packet img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.replay-queue-packet img[hidden] { display: none; }
.replay-packet-cancel { opacity: 0; }
.replay-queue-packet strong { position: absolute; inset: 0 0 0 var(--replay-packet-inset); display: grid; place-items: center; color: #fff; font-size: var(--replay-packet-font); line-height: var(--replay-packet-height); text-shadow: 0 1px 2px #000; }
@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) {
  #replay-attack-queue { --replay-packet-width: 45px; --replay-packet-height: 20px; --replay-packet-font: 11px; --replay-packet-inset: 7px; }
}
#replay-viewer[data-replay-mode="survival"] #replay-pp-meter { display: none; }
#replay-survival-stats strong { font-size: 17px; line-height: 20px; }
#replay-viewer.is-replay-low-hp #replay-viewer-canvas { outline: 2px solid #ed354b; outline-offset: -2px; box-shadow: 0 0 12px #ed354b; }
.replay-budget-heading { display: flex; align-items: center; gap: 5px; height: 20px; font-size: 11px; }
#replay-free-move { box-sizing: border-box; grid-area: auto; margin: 0; min-height: 0; width: 100%; max-width: 144px; padding: 5px; }
#replay-free-move[hidden] { display: none; }
#replay-budget-reward { font-size: 13px; }
#replay-free-move .turn-free-move-progress { justify-content: center; gap: 7px; }
#replay-free-progress { font-size: 11px; line-height: 14px; }
#replay-budget-segments { display: grid; grid-template-columns: repeat(var(--segments), minmax(0, 1fr)); gap: 2px; height: 12px; padding: 2px; box-sizing: border-box; border: 1px solid #537d86; background: #12252a; }
#replay-budget-segments i { background: #203b43; min-width: 0; }
#replay-budget-segments i.is-filled { background: var(--budget-color, #62d2d0); }
#replay-viewer-canvas { display: block; width: min(100cqw, 80cqh); height: min(125cqw, 100cqh); max-width: 100%; max-height: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
#replay-viewer-status { margin: 0; font-size: 14px; line-height: 22px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-viewer-controls { display: grid; grid-template-columns: 1fr 1fr 72px 1fr; gap: 6px; }
#replay-viewer-speed { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 4px; color-scheme: dark; color: #eafafa; background: #183238; border: 1px solid #57969c; border-radius: 3px; font: 700 14px var(--font-ui); cursor: pointer; }
#replay-viewer-speed:hover { background: #23454b; border-color: #8bd5d4; }
#replay-viewer-speed:focus-visible { outline: 2px solid #4ee2c0; outline-offset: 2px; }
#replay-viewer-speed option { color: #eafafa; background: #14282d; }
#replay-viewer-speed option:checked { color: #ffffff; background: #285d63; }
.replay-viewer-navigation { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
.replay-viewer-navigation button { min-width: 0; padding: 4px; color: var(--text); }
.replay-viewer-navigation button:disabled { opacity: .4; }
.replay-viewer-position { position: relative; min-width: 0; display: grid; grid-template-rows: 20px 24px; }
#replay-viewer-best-marker { position: absolute; left: calc(8px + (100% - 16px) * var(--best-position)); bottom: 9px; width: 6px; height: 6px; background: #ffd568; border: 1px solid #fff0ba; transform: translateX(-50%) rotate(45deg); pointer-events: none; }
.replay-target-marker { position: absolute; left: calc(8px + (100% - 16px) * var(--target-position)); bottom: 7px; width: 8px; height: 7px; background: #ffd568; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); pointer-events: none; }
#replay-viewer-seek { box-sizing: border-box; width: 100%; min-width: 0; height: 24px; margin: 0; padding: 0; accent-color: #20c9aa; }
.replay-viewer-controls button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 6px; font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: #f7fbfd; }
#replay-viewer-toggle { --angular-fill-top:var(--action-teal-top); --angular-fill-bottom:var(--action-teal-bottom); --angular-edge:var(--action-teal-edge); }
#replay-viewer-back { --angular-edge:#a04d58; --angular-edge-focus:#ef8792; --angular-fill-top:#5a2930; --angular-fill-bottom:#241116; }
.replay-viewer-controls button:disabled { opacity: .5; }
.replay-viewer-controls button:focus-visible { outline: 2px solid #4ee2c0; outline-offset: 2px; }
@media (max-width: 600px) and (min-height: 451px) {
  .replay-viewer-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 146px minmax(0, 1fr); gap: 8px; }
  #replay-viewer:is([data-replay-mode="move-limit"], [data-replay-mode="specialist"]) .replay-viewer-stage { grid-template-rows: 146px minmax(0, 1fr); }
  #replay-viewer[data-replay-mode="survival"] .replay-viewer-stage { grid-template-rows: 174px minmax(0, 1fr); }
  .replay-viewer-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-row: 1; }
  .replay-hud-left, .replay-hud-right { grid-column: auto; grid-row: auto; gap: 6px; }
  .replay-viewer-stage > .replay-viewer-board { grid-column: 1; grid-row: 2; }
  .replay-feedback { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .replay-feedback > div { height: 38px; }
  .replay-feedback strong { font-size: 18px; }
  .replay-feedback span { font-size: 9px; }
}
@media (max-height: 450px) {
  .replay-viewer-stage { grid-template-columns: 126px minmax(0, 1fr) 126px; gap: 8px; }
  .replay-hud-left, .replay-hud-right { gap: 8px; }
  .replay-feedback { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .replay-feedback > div { height: 38px; }
  .replay-feedback strong { font-size: 18px; }
}

/* Duel replay selection and event feedback */
.replay-duel-board { cursor: pointer; }
.replay-duel-participant.is-focused .replay-duel-board canvas { outline: 1px solid rgba(102, 218, 227, .75); outline-offset: -1px; }
.replay-duel-board.is-low-hp canvas { outline: 2px solid #ed354b; outline-offset: -2px; box-shadow: 0 0 12px #ed354b; }
.replay-duel-queue { position: relative; }
@media (min-width: 601px) {
  .replay-duel-participant[data-slot="playerA"] { grid-template-columns: minmax(112px, 24%) minmax(0, 1fr); grid-template-areas: "rail board" ". hud"; }
  .replay-duel-participant[data-slot="playerB"] { grid-template-columns: minmax(0, 1fr) minmax(112px, 24%); grid-template-areas: "board rail" "hud ."; }
  .replay-duel-participant[data-slot="playerA"] .replay-duel-heading { grid-template-columns: minmax(0, 1fr) minmax(58px, 48%); }
  .replay-duel-participant[data-slot="playerA"] .replay-duel-heading > strong { grid-column: auto; grid-row: auto; }
  .replay-duel-participant[data-slot="playerA"] .replay-duel-mult { grid-column: auto; grid-row: auto; }
  .replay-duel-participant[data-slot="playerA"] .replay-duel-stats > div { text-align: right; }
  .replay-duel-participant[data-slot="playerB"] .replay-duel-heading { grid-template-columns: minmax(58px, 48%) minmax(0, 1fr); }
  .replay-duel-participant[data-slot="playerB"] .replay-duel-heading > strong { grid-column: 2; grid-row: 1; }
  .replay-duel-participant[data-slot="playerB"] .replay-duel-mult { grid-column: 1; grid-row: 1; }
  .replay-duel-participant[data-slot="playerB"] .replay-duel-stats > div { text-align: left; }
}
/* Shared live combat presentation in replay HUDs. */
#replay-viewer .replay-live-queue { display: block; position: relative; --replay-packet-width: 47px; --replay-packet-height: 21px; --replay-packet-font: 11px; }
#replay-viewer .replay-live-queue[hidden] { display: none; }
#replay-viewer #replay-attack-queue { --replay-packet-width: 54px; --replay-packet-height: 24px; --replay-packet-font: 13px; }
#replay-viewer .replay-live-queue .attack-queue-packet { width: var(--replay-packet-width); height: var(--replay-packet-height); font-size: var(--replay-packet-font); padding: 0 4px 0 8px; }
#replay-viewer .replay-live-queue[data-side="ai"] .attack-queue-packet { padding: 0 8px 0 4px; }
#replay-viewer .replay-live-queue[data-side="player"] img { transform: scaleX(-1); }
#replay-viewer .replay-live-queue .queue-packet-timer-fill { display: block; }
#replay-viewer .replay-hp-feedback, #replay-viewer .replay-shield-feedback { width: calc(100% - 42px); margin-left: 42px; overflow: visible; }
#replay-viewer .replay-hp-feedback > i { width: 100%; transform-origin: left center; background: #59c75e; transition: transform 140ms linear; }
#replay-viewer .replay-hp-feedback > strong, #replay-viewer .replay-hp-feedback > span,
#replay-viewer .replay-shield-feedback > strong, #replay-viewer .replay-shield-feedback > span,
#replay-viewer .replay-shield-feedback > small { z-index: 10; }
#replay-viewer .replay-shield-feedback > i, #replay-viewer .replay-shield-thresholds,
#replay-viewer .duel-shield-threshold-labels { display: none; }
#replay-viewer .duel-shield-track { position: absolute; inset: 0; border: 0; border-radius: 0; }
#replay-viewer .duel-shield-track::before { top: 0; bottom: 0; left: 0; right: auto; height: 100%; width: calc(var(--shield-fill, 0) * 100%); transition: width 80ms linear, opacity 120ms ease; }
#replay-viewer .duel-shield-marker { top: 0; bottom: 0; right: auto; left: var(--marker-x); width: 1px; height: 100%; }
#replay-viewer .duel-shield-marker::after { content: none; }
#replay-viewer .duel-damage-band, #replay-viewer .duel-cancel-projection, #replay-viewer .duel-damage-erase { top: 0; right: auto; bottom: 0; height: 100%; transform-origin: right center; }
#replay-viewer .duel-damage-band { transition: left 680ms cubic-bezier(.16,1,.3,1), width 680ms cubic-bezier(.16,1,.3,1), background-color 110ms linear, box-shadow 110ms linear, opacity 110ms linear; will-change: left, width, opacity, filter; }
#replay-viewer .duel-cancel-projection, #replay-viewer .duel-damage-erase { animation-name: duel-horizontal-projection-out; }
#replay-viewer .duel-bar-delta { --delta-x: 0%; position: absolute; left: -42px; right: auto; top: 50%; bottom: auto; width: 38px; min-width: 0; min-height: 0; z-index: 14; font-size: 11px; line-height: 1; transform: translateY(-50%); }
#replay-viewer .duel-bar-delta.is-visible { animation: duel-bar-delta-horizontal 1280ms cubic-bezier(.16,1,.3,1) forwards; }
#replay-viewer .duel-bar-delta.is-damage.is-visible { animation-name: duel-bar-delta-damage-impact; }
#replay-viewer .replay-hp-feedback.is-hit { animation: hp-hit-rumble 420ms ease; }
#replay-viewer .replay-shield-feedback.is-hit .duel-shield-track { animation: shield-hit-rumble 420ms ease; }
#replay-viewer .replay-shield-feedback.is-gaining .duel-shield-track { animation: shield-gain-pulse 300ms ease; }
#replay-viewer .replay-shield-feedback.is-damaged .duel-shield-track { animation: shield-damage-crack 340ms ease; }
#replay-viewer .replay-shield-feedback.is-tier-up .duel-shield-track { animation: shield-tier-up 440ms ease; }
#replay-viewer .replay-shield-feedback.is-tier-down .duel-shield-track { animation: shield-tier-down 440ms ease; }
#replay-viewer [data-slot="playerB"] .replay-hp-feedback > i { transform-origin: right center; }
#replay-viewer [data-slot="playerB"] .duel-shield-track::before { right: 0; left: auto; }
#replay-viewer [data-slot="playerB"] .duel-shield-marker { right: var(--marker-x); left: auto; }
#replay-viewer [data-slot="playerB"] .duel-damage-erase, #replay-viewer [data-slot="playerB"] .duel-cancel-projection { transform-origin: left center; }
@media (min-width: 601px) {
  #replay-viewer [data-slot="playerB"] .replay-hp-feedback, #replay-viewer [data-slot="playerB"] .replay-shield-feedback { margin-left: 0; margin-right: 42px; }
  #replay-viewer [data-slot="playerB"] .duel-bar-delta { left: auto; right: -42px; }
}
@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) {
  #replay-viewer #replay-attack-queue { --replay-packet-width: 45px; --replay-packet-height: 20px; --replay-packet-font: 11px; }
  #replay-viewer .replay-duel-queue { --replay-packet-width: 38px; --replay-packet-height: 18px; --replay-packet-font: 9px; }
}
@media (max-width: 600px) and (min-height: 451px) {
  #replay-viewer .is-minimized .replay-hp-feedback, #replay-viewer .is-minimized .replay-shield-feedback { margin: 0; width: 100%; }
  #replay-viewer .is-minimized .duel-bar-delta { display: none; }
}
#replay-combat { container-type: inline-size; }
@container (max-width: 180px) {
  #replay-combat .replay-combat-meter > span, #replay-combat .replay-combat-meter > small { display: none; }
  #replay-combat #replay-hp > strong { font-size: 18px; }
  #replay-combat #replay-shield > strong { font-size: 11px; }
}
#replay-viewer .replay-live-queue .attack-queue-packet > span { font-size: var(--replay-packet-font); }

#replay-viewer .replay-duel-free { display: none !important; }
#replay-viewer[data-duel-variant="turn-based"] .replay-duel-free:not([hidden]) { display: grid !important; }
@media (max-width: 600px) and (min-height: 451px) {
  #replay-viewer[data-duel-variant="turn-based"] .is-minimized .replay-duel-free { display: none !important; }
}

#replay-match { box-sizing: border-box; width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 16px; border: 1px solid #45717a; background: var(--panel-fill); color: var(--text); overflow: hidden; }
#replay-match::backdrop { background: rgba(0, 8, 10, .65); animation: replay-match-dim-in 160ms ease-out both; }
#replay-match.is-closing::backdrop { animation: replay-match-dim-out 100ms ease-in both; }
@keyframes replay-match-dim-in { from { background: rgba(0, 8, 10, 0); } to { background: rgba(0, 8, 10, .65); } }
@keyframes replay-match-dim-out { from { background: rgba(0, 8, 10, .65); } to { background: rgba(0, 8, 10, 0); } }
@media (prefers-reduced-motion: reduce) { #replay-match::backdrop, #replay-match.is-closing::backdrop { animation-duration: 60ms; } }
.replay-match-content { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 10px; max-height: calc(100dvh - 58px); }
#replay-match-title { margin: 0; font-size: 22px; text-align: center; overflow-wrap: anywhere; }
#replay-match-players, #replay-match-status { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
#replay-match-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 36%); gap: 0; min-height: 0; overflow: auto; margin: 0; padding-right: 6px; font-size: 14px; }
#replay-match-settings dt, #replay-match-settings dd { margin: 0; padding: 7px 4px; border-bottom: 1px solid #354d52; overflow-wrap: anywhere; }
#replay-match-settings dd { text-align: right; font-weight: 700; }
.replay-match-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.replay-match-actions button { min-width: 0; min-height: 44px; padding: 8px; color: #f7fbfd; font: 700 16px var(--font-ui); }
.replay-match-actions button:disabled { opacity: .4; }
#replay-match-back, #replay-match-delete { --angular-edge: #a04d58; --angular-fill-top: #5a2930; --angular-fill-bottom: #241116; }
.replay-duel-stats strong.is-replay-active-turn { color: #080e10; background: #edf6f7; padding: 2px 4px; }

.replay-row-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.replay-row-actions[hidden] { display: none; }
.replay-row-actions button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
#replay-info { width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 16px; border: 1px solid #537982; background: #0b1418; color: #eaf8fa; overflow: hidden; }
#replay-info::backdrop { background: rgba(0, 8, 10, .65); animation: replay-match-dim-in 160ms ease-out both; }
#replay-info.is-closing::backdrop { animation: replay-match-dim-out 100ms ease-in both; }
.replay-info-content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px; max-height: calc(100dvh - 58px); }
#replay-info-title { margin: 0; font-size: 22px; text-align: center; overflow-wrap: anywhere; }
#replay-info-status { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
#replay-info-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: auto; min-height: 0; font-size: 14px; }
#replay-info-stats.is-duel { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
#replay-info-stats > * { padding: 6px 4px; border-bottom: 1px solid #30444c; overflow-wrap: anywhere; min-width: 0; }
#replay-info-stats strong { text-align: right; }
#replay-info-back { min-height: 44px; padding: 8px; font-size: 16px; --angular-edge: #a04d58; --angular-fill-top: #5a2930; --angular-fill-bottom: #241116; }
@media (max-width: 600px) { #replay-info-stats { font-size: 12px; } #replay-info-title { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { #replay-info::backdrop, #replay-info.is-closing::backdrop { animation-duration: 60ms; } }

/* Multiplayer decisions are scenes in the persistent menu world. */
.main-menu-screen .multiplayer-menu-page {
  grid-template-columns: repeat(2, minmax(0, 390px));
  align-content: center;
  justify-content: center;
  gap: clamp(12px, 2.5vh, 20px);
  padding: clamp(16px, 3vw, 32px);
}

.main-menu-screen .multiplayer-menu-page .multiplayer-menu-status {
  margin: 0;
  color: #b7cbd3;
  font-size: 0.9rem;
  text-align: center;
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
}

.main-menu-screen .multiplayer-menu-page .multiplayer-menu-status.is-error {
  color: #ff9aa3;
}

.main-menu-screen .multiplayer-entry {
  grid-template-areas:
    "title title"
    "status status"
    "join host"
    "browse host"
    "back back";
}

.main-menu-screen .multiplayer-entry > .menu-page-title { grid-area: title; }
.main-menu-screen .multiplayer-entry > .multiplayer-menu-status { grid-area: status; }
.main-menu-screen #multiplayer-host-button { grid-area: host; }
.main-menu-screen #multiplayer-join-button { grid-area: join; }
.main-menu-screen #multiplayer-room-list-button { grid-area: browse; }
.main-menu-screen .multiplayer-entry > .main-menu-back {
  grid-area: back;
  justify-self: start;
  width: min(220px, 100%);
  min-height: 48px;
}

.main-menu-screen .multiplayer-entry > .mode-button {
  min-height: clamp(80px, 13vh, 112px);
}

.main-menu-screen .multiplayer-host-setup {
  grid-template-columns: repeat(3, minmax(0, 260px));
  grid-template-areas:
    "title title title"
    "status status status"
    "visibility mode rules"
    "actions actions actions";
}

.main-menu-screen .multiplayer-host-setup > .menu-page-title { grid-area: title; }
.main-menu-screen .multiplayer-host-setup > .multiplayer-menu-status { grid-area: status; }
.main-menu-screen .multiplayer-host-setup > .multiplayer-host-group:nth-of-type(1) { grid-area: visibility; }
.main-menu-screen .multiplayer-host-setup > .multiplayer-host-group:nth-of-type(2) { grid-area: mode; }
.main-menu-screen .multiplayer-host-setup > .multiplayer-host-group:nth-of-type(3) { grid-area: rules; }
.main-menu-screen .multiplayer-host-group {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  gap: 8px;
}
.main-menu-screen .multiplayer-host-group h3 {
  margin: 0;
  color: #b7cbd3;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.main-menu-screen .multiplayer-host-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.main-menu-screen .multiplayer-host-options .mode-button {
  align-items: center;
  min-width: 0;
  min-height: 64px;
  text-align: center;
}
.main-menu-screen .multiplayer-host-options .mode-button.is-active {
  --angular-edge: #7af3df;
  --angular-fill-top: #24564f;
  --angular-fill-bottom: #102c2a;
  animation: none;
  filter: none;
  opacity: 1;
}

.main-menu-screen .multiplayer-host-setup > .multiplayer-room-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  margin-top: 8px;
}

.main-menu-screen .multiplayer-host-setup .multiplayer-room-actions > button {
  min-width: 0;
  min-height: 48px;
}

.main-menu-screen #multiplayer-create-standard-button {
  --angular-edge: #6eead3;
  --angular-fill-top: #287f71;
  --angular-fill-bottom: #0d433d;
}

.main-menu-screen .multiplayer-join-form {
  grid-template-columns: minmax(0, 520px);
  justify-items: stretch;
}
.main-menu-screen .multiplayer-join-form > .menu-page-title,
.main-menu-screen .multiplayer-join-form > .multiplayer-menu-status { grid-column: 1; }
.main-menu-screen .multiplayer-join-form > label { margin-top: 14px; }
.main-menu-screen .multiplayer-join-form > .multiplayer-room-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.main-menu-screen .multiplayer-join-form .multiplayer-room-actions > button { min-height: 48px; }
.main-menu-screen .multiplayer-join-form [type="submit"] {
  --angular-edge: #6eead3;
  --angular-fill-top: #287f71;
  --angular-fill-bottom: #0d433d;
}

.main-menu-screen #multiplayer-main-menu-button.menu-command,
.main-menu-screen .multiplayer-menu-page [data-multiplayer-back].menu-command {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Room data retains compact rows and a bounded scroll area outside the world. */
.multiplayer-room-screen { overflow: hidden; }
.multiplayer-room-screen > .multiplayer-room-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  width: min(1120px, 100%);
  height: calc(100dvh - 36px);
  max-height: calc(100dvh - 36px);
  padding: clamp(12px, 2vw, 24px);
}
.multiplayer-room-screen .multiplayer-room-header { margin: 0; }
.multiplayer-room-screen .multiplayer-room-header h1 { font-size: 38px; }
.multiplayer-room-screen #multiplayer-room-status.is-error { color: #ff9aa3; }
.multiplayer-room-screen .multiplayer-room-listing {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}
.multiplayer-room-screen .multiplayer-public-room-list { max-height: none; min-height: 0; }
.multiplayer-room-screen .multiplayer-room-listing .multiplayer-room-actions {
  justify-content: space-between;
  border-top: 1px solid #344149;
  padding-top: 12px;
}
.multiplayer-room-screen #multiplayer-listing-host-button,
.multiplayer-room-screen #multiplayer-ready-button,
.multiplayer-room-screen #multiplayer-start-button {
  min-width: 150px;
  border-color: #68dec9;
  background: linear-gradient(180deg, #278174, #105348);
}
.multiplayer-room-screen[data-view="lobby"] > .multiplayer-room-shell { overflow-y: auto; }
.multiplayer-room-screen .multiplayer-lobby-layout { min-height: 0; }
.multiplayer-room-screen .multiplayer-role-actions {
  border-top: 1px solid #344149;
  padding-top: 12px;
}

@media (max-width: 680px), (max-height: 540px) {
  .main-menu-screen .multiplayer-menu-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .main-menu-screen .multiplayer-entry { grid-template-areas: "title" "status" "join" "host" "browse" "back"; }
  .main-menu-screen .multiplayer-entry > .mode-button { min-height: 68px; }
  .main-menu-screen .multiplayer-entry > .main-menu-back { width: 100%; }
  .main-menu-screen .multiplayer-host-setup {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "status" "visibility" "mode" "rules" "actions";
  }
  .main-menu-screen .multiplayer-host-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-menu-screen .multiplayer-host-options .mode-button { min-height: 54px; }
  .main-menu-screen .multiplayer-host-setup > .multiplayer-room-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }
  .multiplayer-room-screen[data-view="listing"],
  .multiplayer-room-screen[data-view="lobby"] { overflow-y: auto; }
  .multiplayer-room-screen > .multiplayer-room-shell {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible;
  }
  .multiplayer-room-screen .multiplayer-public-room-list { max-height: min(55dvh, 520px); }
}

html[data-layout-family="mobile-portrait"] .main-menu-screen .multiplayer-menu-page {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center;
  gap: 8px;
  padding: 8px;
}
html[data-layout-family="mobile-portrait"] .main-menu-screen .multiplayer-host-setup {
  grid-template-columns: minmax(0, 1fr) !important;
}
html[data-layout-family="mobile-portrait"] .main-menu-screen .multiplayer-host-options .mode-button {
  min-height: 52px;
}
html[data-layout-family="mobile-portrait"] .main-menu-screen .multiplayer-menu-page .multiplayer-room-actions {
  position: static;
  padding: 0;
  background: transparent;
}
html[data-layout-family="mobile-portrait"] .multiplayer-room-screen > .multiplayer-room-shell {
  width: var(--layout-usable-width) !important;
  max-width: 100%;
}

#menu-online-status[hidden],
#multiplayer-online-status[hidden] {
  display: none !important;
}

.main-menu-screen:is([data-menu-page="multiplayer"], [data-menu-page="multiplayer-host"], [data-menu-page="multiplayer-join"])
  .menu-home > .menu-online-status:not([hidden]) {
  display: inline-flex !important;
  opacity: 1;
  visibility: visible;
  white-space: normal;
}

.multiplayer-room-header > .menu-online-status:not([hidden]) {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  transform: none;
  flex-wrap: wrap;
}

/* Short Tutorial lessons are reading pages, not fixed-height matches. */
@media (max-height: 540px) and (min-width: 601px) {
  #game-screen.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) {
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .play-panel {
    height: auto;
    min-height: calc(100dvh - 1rem);
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .board-stage {
    min-height: max-content;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    overflow: visible;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .player-board-container {
    width: min(100%, 30rem);
    height: auto;
    max-height: none;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) #game-board {
    width: min(100%, 28rem);
    height: auto;
    max-height: none;
  }
}

@media (max-height: 540px) and (min-width: 601px) {
  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .board-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    height: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue {
    order: -2;
    width: min(100%, 44rem);
    align-self: center;
    margin-inline: auto;
    text-align: center;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-dialogue p {
    margin-inline: auto;
  }

  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .player-board-container,
  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-hp-phases,
  .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-clock-demo {
    flex: 0 0 auto;
    align-self: center;
  }
}

@media (max-width: 760px), (max-height: 620px) {
  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-actions button {
    min-height: 44px;
  }
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
  max-height: min(7rem, var(--layout-test-bottom-height));
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-actions button {
  min-height: 44px;
}

.tutorial-objective-mobile {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel[data-test-id="mult-150"] .tutorial-progress,
.app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel[data-test-id="mp-shield-100"] .tutorial-progress {
  display: none;
}

@media (min-width: 761px) and (min-height: 621px) {
  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel[data-test-id="mp-survive-30"] .tutorial-progress,
  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel[data-test-id="mp-deal-500"] .tutorial-progress,
  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel[data-test-id="mp-turn-survive"] .tutorial-progress {
    display: none;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel[data-test-id="mp-turn-survive"] .special-progress {
    display: none;
  }
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry {
  grid-template-rows: minmax(2rem, auto) auto;
  min-height: 6.2rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup .challenge-entry-actions {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px), (max-height: 620px) {
  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel {
    overflow: visible;
  }

  html[data-layout-family] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
    overflow: visible;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel .tutorial-actions,
  html[data-layout-family] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel .tutorial-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-objective-mobile {
    display: block;
    position: relative;
    min-width: 0;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-objective-mobile summary {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    background: linear-gradient(180deg, rgba(30, 37, 48, 0.72), rgba(11, 15, 22, 0.72));
    color: var(--text);
    font-size: clamp(0.62rem, 2.8vw, 0.75rem);
    font-weight: 850;
    cursor: pointer;
    list-style: none;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-objective-mobile summary::-webkit-details-marker {
    display: none;
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-objective-mobile[open] summary {
    border-color: rgba(57, 210, 189, 0.6);
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-objective-mobile p {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: calc(100% + 0.35rem);
    box-sizing: border-box;
    width: min(17rem, calc(100vw - 1.5rem));
    max-height: 35vh;
    margin: 0;
    padding: 0.7rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    background: #111a20;
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  }
}

@media (min-width: 761px) and (max-height: 620px) {
  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-panel .tutorial-actions,
  html[data-layout-family] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel .tutorial-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.is-tutorial.is-tutorial-challenge .tutorial-objective-mobile {
    grid-column: 1 / -1;
  }
}

/* Lesson demos may be taller than the viewport; their navigation remains fixed. */
#game-screen.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-tutorial-menu-scene) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-tutorial-menu-scene) .play-panel,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-demo-page:not(.is-tutorial-menu-scene) .board-stage {
  overflow: visible;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-special-tile: min(6rem, 10vh, 8vw);
  grid-template-rows: auto auto auto;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-chain-tile: min(6rem, 10vh, 8vw);
  grid-template-columns: minmax(5rem, 1fr) calc(var(--tutorial-chain-tile) * 4 + 16px) minmax(5rem, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "dialogue dialogue dialogue"
    "left board ."
    "right right right";
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) #chain-counter {
  --counter-y: 0;
  position: static;
  grid-area: left;
  align-self: center;
  justify-self: end;
  width: min(100%, 7rem);
  transform: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-dt-tile: min(4.5rem, 6vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-attack-tile: min(4.5rem, 6vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .board-stage,
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-mult-tile: min(4.5rem, 6vw);
  --tutorial-misfire-tile: min(4.5rem, 6vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: calc(var(--tutorial-mult-tile) * 8 + 16px) minmax(19rem, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "left dialogue"
    "board dialogue"
    "right right";
  align-items: start;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: calc(var(--tutorial-misfire-tile) * 8 + 16px) minmax(20rem, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "left dialogue"
    "board dialogue"
    "right right";
  align-items: start;
}

.app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-mult-page, .is-tutorial-misfire-page):not(.is-tutorial-menu-scene) #b2b-board-meter {
  align-self: end;
  justify-self: start;
  width: min(9rem, 100%);
  margin: 0 0 0.5rem 8px;
}

.app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-mult-page, .is-tutorial-misfire-page, .is-tutorial-rising-attack-page):not(.is-tutorial-menu-scene) .player-board-container {
  height: auto;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-attack-tile: min(4.5rem, 6vw);
  grid-template-columns: calc(var(--tutorial-attack-tile) * 8 + 20px) minmax(20rem, 38rem);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "left dialogue"
    "board dialogue"
    "right right";
  align-items: start;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) #b2b-board-meter {
  align-self: end;
  justify-self: start;
  width: min(6.2rem, calc(100% - 11rem));
  margin: 0 0 0.5rem 8px;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .duel-tempo-panel.is-tutorial-rising-attack-demo {
  grid-area: left;
  align-self: end;
  justify-self: end;
  width: min(100%, 10rem);
  height: auto;
  margin: 0 8px 0.5rem 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .duel-tempo-panel.is-tutorial-rising-attack-demo .tutorial-rising-attack-stat {
  height: 2.7rem;
}

.app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-double-tesseract-page, .is-tutorial-attacking-page, .is-tutorial-mult-page, .is-tutorial-misfire-page):not(.is-tutorial-menu-scene) #game-board {
  max-height: none;
  aspect-ratio: 4 / 5;
}

/* Combat lessons reuse the live Duel board and HP renderer, without a size container. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
  --tutorial-combat-tile: min(4rem, 6.5vh, 5vw);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-board-container {
  container-type: normal;
  height: auto;
  max-height: none;
  overflow: visible;
  place-items: center;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) #game-board {
  width: min(100%, calc(var(--tutorial-combat-tile) * 8)) !important;
  height: auto !important;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp > div:not(.duel-bar-delta) {
  border: 1px solid rgba(209, 238, 218, 0.36);
  border-radius: 3px;
  background: rgba(5, 12, 9, 0.94);
  box-shadow: 0 0 10px rgba(89, 199, 94, 0.28), inset 0 0 0 1px rgba(225, 248, 232, 0.08);
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp strong {
  color: rgba(246, 255, 249, 0.78);
  font-size: clamp(1rem, 1.7vw, 1.38rem);
  font-weight: 950;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp strong > span:last-child {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
}

@media (min-width: 1051px) and (min-height: 650px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-dt-tile: min(4.5rem, 6vw, calc((100dvh - 10rem) / 10));
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-attack-tile: min(4.5rem, 6vw, calc((100dvh - 10rem) / 10));
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-mult-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-mult-tile: min(4.5rem, 6vw, calc((100dvh - 15rem) / 10));
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-misfire-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-mult-tile: min(4.5rem, 6vw, calc((100dvh - 15rem) / 10));
    --tutorial-misfire-tile: min(4.5rem, 6vw, calc((100dvh - 15rem) / 10));
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-attack-tile: min(4.5rem, 6vw, calc((100dvh - 15rem) / 10));
  }
}

@media (max-width: 1050px) {
  .app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-mult-page, .is-tutorial-misfire-page, .is-tutorial-rising-attack-page):not(.is-tutorial-menu-scene) .board-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "dialogue"
      "left"
      "board"
      "right";
  }
}

@media (max-width: 760px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-double-tesseract-page:not(.is-tutorial-menu-scene) .board-stage,
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-attacking-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-dt-tile: min(11vw, 2.6rem);
    --tutorial-attack-tile: min(11vw, 2.6rem);
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-special-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-special-tile: min(17vw, 4.25rem);
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-chain-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-chain-tile: min(14.5vw, 3.5rem);
    display: grid;
    grid-template-columns: clamp(5rem, 25vw, 6rem) calc(var(--tutorial-chain-tile) * 4 + 16px) minmax(0, 1fr);
    column-gap: 6px;
  }

  .app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-special-page, .is-tutorial-chain-page):not(.is-tutorial-menu-scene) :is(.player-board-container, .ai-board-container) {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-combat-tile: calc((100vw - 2rem) / 8);
  }
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-challenge):not(.is-tutorial-menu-scene) .tutorial-actions {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:not(.is-tutorial-menu-scene) .tutorial-panel {
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-mult-page, .is-tutorial-misfire-page, .is-tutorial-rising-attack-page):not(.is-tutorial-menu-scene) .board-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "dialogue"
    "left"
    "board"
    "right";
  align-items: start;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-mult-page, .is-tutorial-misfire-page, .is-tutorial-rising-attack-page):not(.is-tutorial-menu-scene) #b2b-board-meter {
  grid-area: left;
  justify-self: start;
  margin-left: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text.is-tutorial-rising-attack-page:not(.is-tutorial-menu-scene) .duel-tempo-panel.is-tutorial-rising-attack-demo {
  grid-area: left;
  justify-self: end;
  margin-right: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-mult-page, .is-tutorial-misfire-page, .is-tutorial-rising-attack-page):not(.is-tutorial-menu-scene) .player-board-container {
  grid-area: board;
  justify-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text:is(.is-tutorial-mult-page, .is-tutorial-misfire-page, .is-tutorial-rising-attack-page):not(.is-tutorial-menu-scene) #game-board {
  width: 100%;
  height: auto;
  max-height: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-board-container {
  order: 0;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo {
  order: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text.is-tutorial-combat-demo-page:not(.is-tutorial-menu-scene) .duel-hp strong {
  font-size: clamp(1rem, 4.6vw, 1.25rem);
}

/* Shield lessons show MULT above the board while SHP remains below it. */
.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .board-stage {
  grid-template-columns: calc(var(--tutorial-combat-tile) * 8 + 18px) minmax(20rem, 38rem);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "left dialogue"
    "board dialogue"
    "hud dialogue"
    "right right";
  align-items: start;
  row-gap: 0.5rem;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) #b2b-board-meter {
  display: grid;
  grid-area: left;
  align-self: end;
  justify-self: start;
  width: min(9rem, 100%);
  margin: 0 0 0.5rem 8px;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) #b2b-board-meter :is(#pp-meter, #matchless-wrap) {
  display: none;
}

.app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .player-duel-panel.is-tutorial-combat-demo .duel-status-panel {
  display: none !important;
}

@media (min-width: 1051px) and (min-height: 650px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .board-stage {
    --tutorial-combat-tile: min(4rem, 5vw, calc((100dvh - 20rem) / 10));
  }
}

@media (max-width: 760px) {
  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .board-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "dialogue"
      "left"
      "board"
      "hud"
      "right";
    row-gap: 0.5rem;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) #b2b-board-meter {
    margin-left: 0;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .board-stage {
    gap: 1.25rem;
  }

  .app-shell.is-tutorial.is-tutorial-text.is-tutorial-hp-page:not(.is-tutorial-menu-scene) .tutorial-hp-phases {
    flex: 0 0 auto;
    height: max(18rem, min(37dvh, 19rem));
  }
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-text.is-tutorial-shield-page:not(.is-tutorial-menu-scene) .board-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-template-areas:
    "dialogue"
    "left"
    "board"
    "hud"
    "right";
}

/* The focused phone Duel rail gives each stat a real grid cell at narrow widths. */
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-status-panel,
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-panel {
  display: grid;
  grid-template-columns: minmax(0, 42%) repeat(2, minmax(0, 29%));
  grid-template-rows: 38% 34% 28%;
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
  padding: 1px 2px 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-status-heading,
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-status-heading {
  grid-area: 1 / 1;
  align-self: center;
  min-width: 0;
  max-width: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-b2b strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-b2b strong {
  font-size: clamp(0.94rem, 4.6vw, 1.2rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-live-stats,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stats {
  display: contents !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-live-stat,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-live-stat:nth-child(1),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(1) {
  grid-area: 1 / 2;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-live-stat:nth-child(2),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(2) {
  grid-area: 1 / 3;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based):not(.is-opponent-focus) .player-duel-panel .duel-live-stat:nth-child(4),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(4) {
  grid-area: 2 / 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based):not(.is-opponent-focus) .player-duel-panel .duel-live-stat:nth-child(5),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(5) {
  grid-area: 2 / 2;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-turn-based):not(.is-opponent-focus) .player-duel-panel .duel-live-stat:nth-child(6),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel:not(.is-turn-based).is-opponent-focus .ai-duel-panel .duel-live-stat:nth-child(6) {
  grid-area: 2 / 3;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-live-stat > span,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat > span {
  font-size: 0.45rem !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-live-stat strong,
html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-live-stat strong {
  font-size: var(--layout-fit-font-size, clamp(0.72rem, 3.4vw, 0.94rem)) !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel:not(.is-opponent-focus) .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  grid-column: 2 / 4;
  grid-row: 3;
  align-self: center;
  width: min(100%, 5.5rem);
  max-width: 5.5rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based:not(.is-opponent-focus) .player-duel-panel .duel-counter-stack,
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-turn-based.is-opponent-focus .ai-duel-panel .duel-counter-stack {
  grid-row: 2;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel .duel-counter-stack :is(.combo-counter, .chain-counter):not([hidden]) {
  height: 1.9rem !important;
  max-height: 1.9rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-ai-duel.is-turn-based:not(.is-opponent-focus) .player-duel-panel .turn-free-move:not([hidden]),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-turn-based.is-opponent-focus .ai-duel-panel .turn-free-move:not([hidden]) {
  grid-column: 1;
  grid-row: 2;
  width: calc(100% - 2px);
  height: calc(100% - 4px) !important;
  min-height: 0 !important;
}

/* Focus swaps combat ownership, not the full-size/minimap HUD treatments. */
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-counter-stack :is(.combo-counter, .chain-counter):not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  height: 1.9rem !important;
  max-height: 1.9rem;
  padding-block: 0.06rem;
  gap: 1px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-board-container {
  align-self: end;
  height: var(--portrait-mini-height) !important;
  margin-bottom: 1px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-board-container canvas {
  transform: none;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-duel-panel :is(.duel-hp, .duel-shield-meter) {
  display: block !important;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-duel-panel .duel-hp { grid-area: compact-hp; }
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-duel-panel .duel-shield-meter { grid-area: compact-shield; }
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-duel-panel :is(.duel-hp > span, .duel-shield-meter > span, .duel-shield-current-threshold, .duel-bar-delta),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-duel-panel .duel-shield-meter::after { display: none !important; }
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-duel-panel .duel-hp strong {
  font-size: var(--layout-fit-font-size, 8px) !important;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .player-duel-panel .duel-shield-meter::before { font-size: 7px !important; }
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-turn-based.is-opponent-focus .duel-tempo-player-drain {
  display: block !important;
  grid-area: compact-clock;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: calc(100% - 1px);
  margin: 0;
  padding: 0;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-turn-based.is-opponent-focus .duel-tempo-player-drain .duel-clock-value {
  width: 100%;
  min-inline-size: 0;
  max-width: 100%;
  max-height: none;
  padding: 1px 2px;
  font-size: var(--layout-fit-font-size, 12px) !important;
  line-height: 1;
  text-align: center;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel :is(.duel-hp, .duel-shield-meter) {
  justify-self: end;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel :is(.duel-hp > span, .duel-shield-meter > span),
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-shield-meter::after { display: block !important; }
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-hp strong {
  font-size: clamp(1.9rem, 4.35vh, 2.5rem) !important;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel.is-opponent-focus .ai-duel-panel .duel-shield-meter::before {
  font-size: clamp(0.62rem, 3vw, 0.78rem) !important;
}

/* Test details sit over the catalogue instead of replacing it. */
.tutorial-test-detail-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: rgba(2, 5, 9, 0.72);
  animation: tutorial-overlay-in 180ms ease both;
}

.tutorial-test-detail-overlay[hidden] { display: none !important; }

.tutorial-test-detail {
  width: min(28rem, 100%);
  max-height: 100%;
  overflow: auto;
  animation: tutorial-test-popup-in 210ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.tutorial-test-detail-overlay.is-closing {
  pointer-events: none;
  animation: tutorial-test-detail-out 180ms ease both;
}

.tutorial-test-detail-overlay.is-closing .tutorial-test-detail {
  animation: tutorial-test-popup-out 180ms ease both;
}

@keyframes tutorial-test-detail-out { to { opacity: 0; } }
@keyframes tutorial-test-popup-in {
  from { transform: translateY(8px) scale(0.97); }
  to { transform: translateY(0) scale(1); }
}
@keyframes tutorial-test-popup-out { to { transform: translateY(8px) scale(0.97); } }

.tutorial-test-detail-overlay.is-starting {
  pointer-events: none;
  animation: tutorial-test-detail-out 200ms ease both;
}

.tutorial-test-detail-overlay.is-starting .tutorial-test-detail {
  animation: tutorial-test-popup-out 200ms ease both;
}

.tutorial-board-overlay.is-test-returning .tutorial-popup {
  pointer-events: none;
  animation: tutorial-test-popup-out 180ms ease both;
}

.tutorial-board-overlay.is-test-menu-leaving {
  pointer-events: none;
  animation: tutorial-test-detail-out 200ms ease both;
}

.tutorial-board-overlay.is-test-menu-leaving .tutorial-popup {
  animation: tutorial-test-popup-out 200ms ease both;
}

.tutorial-popup.is-test-entering {
  animation: tutorial-test-popup-in 220ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.app-shell.is-tutorial.is-tutorial-challenge :is(.play-panel, .board-stage) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell.is-tutorial.is-tutorial-challenge.is-test-entering-game .board-stage {
  animation: tutorial-test-game-in 320ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

@keyframes tutorial-test-game-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

.app-shell.is-tutorial.is-tutorial-challenge .matchless-wrap {
  opacity: 1;
  transform: none;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-matchless-wrap small {
  display: block;
  font-size: 0.45rem;
  line-height: 1;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack :is(#combo-counter, #chain-counter) {
  position: static;
  transform: none;
  --counter-y: 0%;
}

/* Single-board Tests use the same MULT/status rail and live score readouts as
 * singleplayer; objectives and controls stay in the Test panel. */
.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack {
  grid-area: left;
  display: flex;
  flex-direction: column;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  gap: clamp(0.42rem, 0.9vh, 0.7rem);
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack :is(.b2b-board-meter, #combo-counter, #chain-counter) {
  grid-area: auto;
  align-self: stretch;
  width: 100%;
  margin: 0;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack .board-header {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip > div {
  align-items: flex-start;
  text-align: left;
}

.app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip > div:not(:nth-child(4)) { display: none; }
.app-shell.is-tutorial.is-tutorial-challenge[data-test-stats="score"] .board-stat-strip > div:first-child { display: flex; }

/* Keep the catalogue title and Back on one compact line on phones. */
html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "title back" "note note" "list list";
  align-content: start;
  column-gap: 0.55rem;
  padding: 0.7rem 0.65rem 0.65rem;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > h2 {
  grid-area: title;
  align-self: center;
  min-width: 0;
  margin: 0;
}

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > .tutorial-popup-note { grid-area: note; }
html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > .tutorial-popup-actions { grid-area: list; }

html[data-layout-family="mobile-portrait"] .tutorial-popup.is-challenge-menu-popup > .challenge-menu-back {
  position: static;
  grid-area: back;
  align-self: center;
  width: 5.5rem;
  min-height: 44px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, var(--layout-test-board-size));
  height: var(--layout-test-top-height);
  gap: 0.35rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack .b2b-board-meter {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack .board-header {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip {
  flex-direction: row;
  justify-content: flex-end;
  gap: 0.4rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip > div {
  align-items: center;
  flex: 1 1 0;
  text-align: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .board-stat-strip strong {
  font-size: clamp(0.9rem, 4.5vw, 1.25rem);
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack :is(#combo-counter, #chain-counter):not([hidden]) {
  display: block !important;
  grid-row: 2;
  height: 1.6rem;
  min-height: 0;
  padding: 0.1rem 0.2rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack #combo-counter:not([hidden]) { grid-column: 1; }
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge) .single-status-stack #chain-counter:not([hidden]) { grid-column: 2; }

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-counter-stack {
  position: static;
  display: flex !important;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  width: auto;
  max-width: 100%;
  margin: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
  grid-template-rows: minmax(0, 1fr) auto;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge .board-stage {
  align-content: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .board-stage {
  grid-template-rows:
    var(--layout-test-top-height)
    calc(var(--layout-test-board-size) / 0.8)
    max-content
    max-content;
  grid-template-areas: "left" "board" "combat" "controls";
  row-gap: 3px;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-board-container,
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-hud-row,
html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
  justify-self: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .tutorial-panel {
  grid-area: controls;
  align-self: start;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge):not(.show-b2b) .single-status-stack .board-header {
  grid-column: 1 / -1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge):not(.show-b2b) .board-stat-strip {
  justify-content: flex-start;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge:not(.is-multiplayer-challenge):not(.show-b2b) .board-stat-strip > div {
  flex: 0 0 auto;
  align-items: flex-start;
  text-align: left;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 39%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  column-gap: 0.35rem;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-status-heading {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-b2b {
  width: 100%;
  max-width: 100%;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stats:not([hidden]) {
  grid-column: 2;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr);
  align-self: stretch;
  align-items: center;
  min-width: 0;
  gap: 0.1rem 0.25rem;
  margin: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat:not([hidden]) {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  text-align: center;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat[hidden] {
  display: none !important;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat > span {
  display: block;
  font-size: 0.44rem;
  line-height: 1;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat > div {
  display: block;
  min-width: 0;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat strong {
  display: block;
  font-size: clamp(0.72rem, 3.5vw, 0.95rem);
  line-height: 1.1;
  white-space: nowrap;
}

html[data-layout-family="mobile-portrait"] .app-shell.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .player-duel-panel .duel-live-stat small {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-test-detail-overlay,
  .tutorial-test-detail,
  .tutorial-test-detail-overlay.is-closing,
  .tutorial-test-detail-overlay.is-closing .tutorial-test-detail,
  .app-shell.is-tutorial.is-tutorial-challenge.is-test-entering-game .board-stage { animation-duration: 0.01ms; }
}

#menu-ambience-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  opacity: 0.76;
  mix-blend-mode: screen;
  pointer-events: none;
}

#menu-ambience-canvas[hidden] { display: none; }

body:not(.has-menu-ambience):not(.is-menu-start-travel) .menu-depth-grid {
  opacity: 0;
  animation: none !important;
}

body:not(.has-menu-ambience) .menu-depth-grid::after {
  opacity: 0;
  animation: none !important;
}

body:not(.has-menu-ambience)::before {
  animation: none !important;
}

body:not(.has-menu-ambience):not(.is-menu-start-travel)[data-menu-pan].is-menu-travel-forward::before,
body:not(.has-menu-ambience):not(.is-menu-start-travel)[data-menu-pan].is-menu-travel-back::before,
body:not(.has-menu-ambience):not(.is-menu-start-travel)[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
body:not(.has-menu-ambience):not(.is-menu-start-travel)[data-menu-pan].is-menu-travel-back .menu-depth-grid {
  animation: none !important;
}

/* The canvas owns the near grid so illumination shares its exact moving lines. */
body.has-menu-ambience::before {
  opacity: 0;
  animation: none !important;
}

body.has-menu-ambience .menu-depth-grid {
  opacity: 0.07;
  background-image:
    linear-gradient(rgba(90, 175, 205, calc(0.5 * var(--menu-grid-visibility, 1))) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 175, 205, calc(0.5 * var(--menu-grid-visibility, 1))) 1px, transparent 1px);
  animation: menu-far-grid-idle 46s ease-in-out infinite alternate;
  animation-duration: var(--menu-grid-duration, 46s) !important;
}

body.has-menu-ambience.is-menu-grid-still .menu-depth-grid {
  animation-play-state: paused !important;
}

body.has-menu-ambience[data-menu-pan].is-menu-travel-forward .menu-depth-grid,
body.has-menu-ambience[data-menu-pan].is-menu-travel-back .menu-depth-grid {
  animation-duration: var(--menu-grid-travel-duration, 34s) !important;
}

body.has-menu-ambience .menu-depth-grid::after {
  background: radial-gradient(circle at 50% 37%, rgba(var(--menu-far-glow-colour, 58, 177, 212), var(--menu-far-glow-alpha, 0.2)), transparent 42%);
  animation: menu-radial-breathe 24s ease-in-out infinite alternate;
  animation-duration: var(--menu-far-glow-duration, 24s) !important;
}

body.has-menu-ambience.is-menu-effects-off .menu-depth-grid::after {
  animation: none !important;
}

body.is-menu-ambience-loading .menu-depth-grid {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 760px), (pointer: coarse) {
  body.has-menu-ambience .menu-depth-grid {
    animation-duration: var(--menu-mobile-grid-duration, 58s) !important;
  }

  #menu-ambience-canvas { opacity: 0.66; }
}

@media (prefers-reduced-motion: reduce) {
  body.has-menu-ambience::before,
  body.has-menu-ambience .menu-depth-grid,
  body.has-menu-ambience .menu-depth-grid::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Non-duel modes share one readout rail. Each mode fills the same slots with
 * its relevant labels and values; the status rail remains beside the board. */
.single-hud-stats {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: clamp(0.42rem, 0.8vh, 0.65rem);
  min-width: 0;
}

html[data-layout-family] .app-shell.is-sandbox-multiplayer-display:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stat-strip {
  display: none;
}

.single-hud-metric-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.42rem, 0.8vh, 0.65rem);
  min-width: 0;
  width: 100%;
  color: #f4f8fb;
  font-variant-numeric: tabular-nums;
}

.single-hud-metric {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.08rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: right;
  line-height: 1;
}

.single-hud-metric > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: rgba(218, 231, 239, 0.68);
  font-size: clamp(0.5rem, 0.55vw, 0.62rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.single-hud-metric > strong,
.single-hud-metric > div > strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 1.72vw, 1.82rem);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.single-hud-metric > div {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.28rem;
  min-width: 0;
  max-width: 100%;
}

.single-hud-metric > div > small,
.single-hud-metric .training-score-best {
  color: rgba(218, 231, 239, 0.68);
  font-size: clamp(0.5rem, 0.55vw, 0.62rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.single-hud-metric[data-hud-slot="score"] > strong,
.single-hud-metric[data-hud-slot="challenge-primary"] > strong {
  color: #ffe477;
  font-size: clamp(1.65rem, 2.25vw, 2.2rem);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 208, 82, 0.22);
}

.app-shell.is-training-survival .single-hud-metric#survival-drain-stat:not([hidden]) {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  text-align: right;
}

.app-shell.is-training-survival .single-hud-metric#survival-drain-stat > div > strong {
  font-size: clamp(1rem, 1.25vw, 1.35rem);
}

@media (max-width: 760px), (pointer: coarse) {
  html[data-layout-family="mobile-portrait"] .single-hud-stats {
    align-content: center;
    justify-content: center;
    gap: 0.28rem;
  }

  html[data-layout-family="mobile-portrait"] .single-hud-metric-list {
    gap: 0.28rem;
  }

  html[data-layout-family="mobile-portrait"] .single-hud-metric {
    align-items: center;
    text-align: center;
  }

  html[data-layout-family="mobile-portrait"] .single-hud-metric > span,
  html[data-layout-family="mobile-portrait"] .single-hud-metric > div > small,
  html[data-layout-family="mobile-portrait"] .single-hud-metric .training-score-best {
    font-size: clamp(0.46rem, 1.8vw, 0.58rem);
  }

  html[data-layout-family="mobile-portrait"] .single-hud-metric > strong,
  html[data-layout-family="mobile-portrait"] .single-hud-metric > div > strong {
    font-size: clamp(0.88rem, 3.5vw, 1.1rem);
  }

  html[data-layout-family="mobile-portrait"] .single-hud-metric[data-hud-slot="score"] > strong,
  html[data-layout-family="mobile-portrait"] .single-hud-metric[data-hud-slot="challenge-primary"] > strong {
    font-size: clamp(1.1rem, 4.6vw, 1.45rem);
  }

  html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .board-header {
    display: grid;
  }

  html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-multiplayer-stats:not([hidden]) {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    gap: 0.28rem;
    text-align: center;
  }

  html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat,
  html[data-layout-family="mobile-portrait"] .app-shell.is-sandbox-multiplayer-display .sandbox-live-stat > div {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Intrinsic single-board rails: each visible row owns its full height. */
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack {
  position: static;
  grid-area: left;
  align-self: end;
  justify-self: start;
  margin-left: max(0px, calc((100% - var(--layout-single-board-size)) / 2));
  width: calc(var(--layout-single-board-size) / 2 - 4px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto 40px;
  align-content: start;
  height: auto;
  gap: 4px;
  contain: layout;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter {
  grid-area: 1 / 1 / 2 / 3;
  width: 100%;
  max-width: 100%;
  align-self: start;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .training-free-move {
  grid-area: 2 / 1 / 3 / 3;
  width: 100%;
  height: 42px;
  max-width: 150px;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #combo-counter { grid-area: 3 / 1 / 4 / 2; }
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack #chain-counter { grid-area: 3 / 2 / 4 / 3; }
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  top: var(--layout-single-top-offset);
  height: auto;
  max-height: none;
  align-content: start;
  overflow: visible;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-hud-metric-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
}
html[data-layout-family="mobile-portrait"] #game-screen .single-hud-metric > span,
html[data-layout-family="mobile-portrait"] #game-screen .single-hud-metric small {
  font-size: 9px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-layout-family="mobile-portrait"] #game-screen .single-hud-metric > div {
  flex-wrap: wrap;
  justify-content: center;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-sandbox .board-stage {
  --portrait-stack-offset: max(0px, calc((100% - var(--layout-single-board-size) / 0.8) / 2 - var(--layout-single-top-height) - var(--game-gap)));
  grid-template-rows: minmax(var(--layout-single-top-height), 1fr) calc(var(--layout-single-board-size) / 0.8) minmax(var(--layout-single-bottom-height), 1fr);
}
html[data-layout-family="mobile-portrait"] .tutorial-menu-entry .tutorial-recommended {
  top: 5px;
  bottom: auto;
  font-size: 9px;
  line-height: 11px;
}
html[data-layout-family="mobile-portrait"] .tutorial-menu-entry:has(.tutorial-recommended:not([hidden])) #tutorial-menu-button {
  padding-top: 15px;
}

/* Tests share a board-sized combat rail and intrinsic status/controls sections.
 * Desktop puts status and objectives beside the board; portrait stacks them. */
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .play-panel {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 100%;
  height: var(--layout-usable-height);
  min-height: 0;
  padding: 0;
  overflow: visible;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .board-stage {
  display: grid;
  grid-template-columns: var(--layout-test-status-width) var(--layout-test-board-size) var(--layout-test-panel-width);
  grid-template-rows: calc(var(--layout-test-board-size) / 0.8) auto;
  grid-template-areas: "left board right" ". combat .";
  place-content: center;
  align-items: start;
  justify-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: var(--game-gap);
  overflow: visible;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .duel-arena,
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel:not([hidden]) {
  display: contents;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-board-container {
  grid-area: board;
  place-self: start center;
  width: var(--layout-test-board-size) !important;
  height: calc(var(--layout-test-board-size) / 0.8) !important;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge #game-board {
  width: 100% !important;
  height: 100% !important;
  max-height: none;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .tutorial-panel {
  position: relative;
  inset: auto;
  grid-area: right;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 6px;
  overflow: visible;
  box-sizing: border-box;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .single-status-stack,
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-status-panel {
  position: static;
  inset: auto;
  grid-area: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: none;
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  align-self: start;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  gap: 8px;
  padding: 0;
  overflow: visible;
  contain: layout;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge.is-multiplayer-challenge .single-status-stack {
  display: none;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-status-heading {
  display: contents;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-board-label {
  display: none;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-b2b {
  grid-area: auto;
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stats:not([hidden]) {
  grid-area: auto;
  position: static;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  width: 100%;
  height: auto;
  margin: 0;
  gap: 6px;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stat:not([hidden]) {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  text-align: left;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stat.is-time {
  grid-column: 1 / -1 !important;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .duel-live-stat > span {
  font-size: 10px;
  line-height: 1.2;
  white-space: normal;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .duel-live-stat > div {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 2px;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .duel-live-stat strong {
  font-size: 18px;
  line-height: 22px;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .duel-live-stat small {
  font-size: 9px;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-counter-stack {
  grid-area: auto;
  position: static;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 40px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  gap: 4px;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge :is(.duel-counter-box, #combo-counter, #chain-counter) {
  grid-area: auto;
  position: static;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 2px;
  margin: 0;
  transform: none;
  --counter-y: 0%;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge :is(.duel-counter-box, #combo-counter, #chain-counter):not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge :is(.duel-counter-box, #combo-counter, #chain-counter) span { font-size: 9px; }
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge :is(.duel-counter-box, #combo-counter, #chain-counter) strong { font-size: 16px; }
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-hud-row {
  grid-area: combat;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: none;
  grid-auto-rows: max-content;
  align-content: start;
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  gap: 4px;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-hud-row > :is(.duel-hp, .duel-shield-meter, .duel-queue) {
  grid-area: auto;
  width: 100%;
  margin: 0;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-hp { height: 32px; }
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-shield-meter { height: 18px; }
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-queue { height: 27px; min-height: 27px; }

html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .board-stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content calc(var(--layout-test-board-size) / 0.8) max-content max-content;
  grid-template-areas: "left" "board" "combat" "right";
  justify-items: center;
  row-gap: 6px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge :is(.single-status-stack, .tutorial-panel),
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel :is(.duel-status-panel, .duel-hud-row) {
  width: var(--layout-test-board-size);
  max-width: 100%;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .single-status-stack,
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-status-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto 40px;
  gap: 4px 8px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-b2b { grid-area: 1 / 1 / 2 / 2; }
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .turn-free-move {
  position: static;
  grid-area: 2 / 1 / 3 / 2;
  width: 100%;
  margin: 0;
  min-height: 44px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .turn-free-move-help { display: none; }
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stats:not([hidden]) { grid-area: 1 / 2 / 3 / 3; }
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-counter-stack { grid-area: 3 / 1 / 4 / 3; }
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .single-status-stack #combo-counter { grid-area: 3 / 1 / 4 / 2; }
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .single-status-stack #chain-counter { grid-area: 3 / 2 / 4 / 3; }
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .single-status-stack .board-header {
  position: static;
  grid-area: 1 / 2 / 3 / 3;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Use Duel packet dimensions in other live single-board combat modes too. */
html[data-layout-family] #game-screen:not(.is-ai-duel) :is(.duel-queue, .attack-queue) .attack-queue-packet {
  width: clamp(2.7rem, 11.5%, 3.65rem);
  height: 1.55rem;
  padding-inline: 0.42rem;
  font-size: var(--attack-packet-font, 11px);
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel) :is(.duel-queue, .attack-queue) .attack-queue-packet {
  width: clamp(2.8rem, 16%, 3.75rem);
  height: calc(var(--layout-duel-packet-height) - 0.12rem);
}
html[data-layout-family] #game-screen:not(.is-ai-duel) :is(.duel-queue, .attack-queue) .attack-queue-packet > span { font-size: inherit; }

html[data-layout-family="mobile-landscape"] #game-screen.is-tutorial.is-tutorial-challenge .tutorial-panel .tutorial-actions {
  grid-template-columns: minmax(0, 1fr);
}

/* Compact phone MULT without changing the shared meter's visibility rules. */
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack .b2b-board-meter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 2px 4px;
  text-align: left;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .b2b-board-meter > strong {
  font-size: 24px !important;
  line-height: 26px;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .b2b-board-meter > span {
  font-size: 9px;
  line-height: 12px;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .b2b-board-meter :is(.pp-segments, .matchless-wrap) {
  grid-column: 1 / -1;
  margin-top: 0;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .b2b-board-meter :is(.pp-segments, .matchless-segments) {
  height: 5px;
  min-height: 5px;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .matchless-wrap small {
  font-size: 8px;
  line-height: 10px;
  margin-bottom: 1px;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack {
  justify-content: flex-start;
  text-align: left;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack > :is(.b2b-board-meter, .training-free-move, #combo-counter, #chain-counter) {
  align-self: start;
  text-align: left;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack > .b2b-board-meter {
  margin-bottom: 0;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack > :is(#combo-counter, #chain-counter) {
  width: 100%;
  max-width: none;
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge .single-status-stack,
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-status-panel {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge :is(.single-status-stack > .b2b-board-meter, .player-duel-panel .duel-b2b) {
  order: -3;
  margin-bottom: 0;
  align-self: start;
  text-align: left;
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge :is(.single-status-stack > #combo-counter, .single-status-stack > #chain-counter, .player-duel-panel .duel-counter-stack) {
  order: -2;
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge :is(.single-status-stack > .board-header, .player-duel-panel .duel-live-stats) {
  margin-top: auto !important;
}
html[data-layout-family] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack :is(#combo-counter, #chain-counter) {
  height: 40px;
  min-height: 40px;
  padding: 2px 4px;
}
html[data-layout-family] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack :is(#combo-counter, #chain-counter):not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
}
html[data-layout-family] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack :is(#combo-counter, #chain-counter) span { font-size: 9px; }
html[data-layout-family] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack :is(#combo-counter, #chain-counter) strong { font-size: 16px; }

/* One counter typography/clearance contract; each mode retains its placement. */
html[data-layout-family] #game-screen:is(:not(.is-ai-duel), .is-tutorial-challenge) :is(.combo-counter, .chain-counter) {
  box-sizing: border-box;
  height: 40px !important;
  min-height: 0;
  max-height: 40px !important;
  padding: 2px 4px !important;
}
html[data-layout-family] #game-screen:is(:not(.is-ai-duel), .is-tutorial-challenge) :is(.combo-counter, .chain-counter):not([hidden]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
}
html[data-layout-family] #game-screen:is(:not(.is-ai-duel), .is-tutorial-challenge) :is(.combo-counter, .chain-counter) span {
  display: block;
  font-size: 9px;
  line-height: 10px;
}
html[data-layout-family] #game-screen:is(:not(.is-ai-duel), .is-tutorial-challenge) :is(.combo-counter, .chain-counter) strong {
  display: block;
  font-size: 22px !important;
  line-height: 22px;
}

html[data-layout-family] #game-screen:is(:not(.is-ai-duel), .is-tutorial-challenge) .player-duel-panel .duel-hud-row > :is(.duel-hp, .duel-shield-meter) {
  --duel-delta-lane: clamp(20px, 5%, 30px);
  width: calc(100% - var(--duel-delta-lane));
  max-width: calc(100% - var(--duel-delta-lane));
  justify-self: end;
}

html[data-layout-family="mobile-portrait"] #game-screen.is-sandbox:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  top: auto;
  bottom: calc((100% + var(--layout-single-board-size) / 0.8) / 2 + var(--game-gap));
}

html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel) .single-hud-metric-list,
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stats:not([hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/* Tests use the same player-side telemetry alignment as Duel. */
html[data-layout-family] #game-screen:not(.is-ai-duel) :is(.single-hud-metric, .single-hud-metric > div),
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stat:not([hidden]) {
  align-items: flex-end;
  text-align: right;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stat > div {
  justify-content: flex-end;
  text-align: right;
}
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stat :is(span, strong, small) {
  text-align: right;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel) .single-hud-metric > div {
  justify-content: flex-end;
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-counter-stack {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, 40px);
}

/* Match Duel's resource fill rather than the legacy neon HP ratio palette. */
html[data-layout-family] #game-screen:is(:not(.is-ai-duel), .is-tutorial-challenge) .duel-hp i {
  background-color: #59c75e;
}
html[data-layout-family] #game-screen .training-challenge-timer i,
html[data-layout-family] #game-screen.is-tutorial.is-tutorial-challenge .tutorial-progress i {
  background: #59c75e !important;
}

/* Desktop right-side telemetry faces the board; left-side Tests keep their alignment. */
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header .single-hud-metric {
  align-items: flex-start;
  text-align: left;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header .single-hud-metric > div {
  align-items: baseline;
  justify-content: flex-start;
  text-align: left;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header .single-hud-metric :is(span, strong, small) {
  text-align: left;
}

/* Tests, Sandbox and Challenges share the same meter and counter allocation. */
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack {
  padding: 10px 8px;
  overflow: visible;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack > :is(.b2b-board-meter, .training-free-move) {
  width: 100%;
  max-width: none;
  margin-top: 0;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  align-self: start;
  margin-top: var(--single-board-top, 0px);
}

html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack > .training-free-move {
  order: 1;
  text-align: center;
  align-items: center;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack > #combo-counter { order: 2; }
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .single-status-stack > #chain-counter { order: 3; }
html[data-layout-family^="desktop-"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.b2b-board-meter, .combo-counter, .chain-counter) {
  overflow: visible;
  flex-shrink: 0;
}
html[data-layout-family^="desktop-"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.play-panel, .board-stage, .single-status-stack, .duel-status-panel, .duel-counter-stack) {
  overflow: visible;
}
html[data-layout-family^="desktop-"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) .b2b-board-meter strong {
  padding-block: 5px;
  overflow: visible;
}
html[data-layout-family^="desktop-"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.pp-segments, .matchless-segments) > span {
  min-width: 0;
  width: auto;
}
html[data-layout-family^="desktop-"] #single-secondary-stats {
  order: 4;
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
}
html[data-layout-family^="desktop-"] #single-secondary-stats :is(.single-hud-metric-list, .sandbox-multiplayer-stats) {
  grid-template-columns: minmax(0, 1fr);
  flex-direction: column;
}
html[data-layout-family^="desktop-"] #single-secondary-stats .single-hud-metric {
  align-items: flex-end;
  text-align: right;
}
html[data-layout-family^="desktop-"] #game-screen:not(.is-training-challenge) #single-secondary-stats #training-score-secondary { display: none; }
html[data-layout-family^="desktop-"] #game-screen:is(.is-sandbox-experiment, .is-sandbox-multiplayer-display, .is-training-challenge) .board-header > [data-hud-slot="score"] { display: none; }
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge .board-stage {
  grid-template-rows: 24px calc(var(--layout-test-board-size) / 0.8) auto;
  grid-template-areas: ". title ." "left board right" ". combat .";
}
#tutorial-test-board-title { display: none; }
html[data-layout-family^="desktop-"] #game-screen.is-tutorial-challenge #tutorial-test-board-title {
  display: block;
  grid-area: title;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  min-width: 0;
  max-width: 100%;
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial-challenge #tutorial-objective[data-description] { font-size: 0; }
html[data-layout-family^="desktop-"] #game-screen.is-tutorial-challenge #tutorial-objective[data-description]::before {
  content: attr(data-description);
  font-size: 14px;
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial-challenge #tutorial-progress-fill { background: #86d8ed !important; }
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge :is(.duel-queue, .attack-queue) .attack-queue-packet {
  width: clamp(2.7rem, 11.5%, 3.65rem);
  min-width: 0;
  height: 1.55rem;
  min-height: 1.55rem;
  padding-inline: .42rem;
  font-size: var(--attack-packet-font, 11px);
}
html[data-layout-family^="desktop-"] #game-screen.is-tutorial.is-tutorial-challenge .attack-queue-packet > span { font-size: inherit; }
html[data-layout-family^="desktop-"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .training-free-move .turn-free-move-title {
  width: 100%;
  text-align: center;
}
html[data-layout-family^="desktop-"] #single-secondary-stats strong { color: var(--text); }

html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) {
  --single-hud-counter-height: 32px;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) {
  --single-hud-board-size: var(--layout-single-board-size);
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial-challenge {
  --single-hud-board-size: var(--layout-test-board-size);
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.single-status-stack, .player-duel-panel .duel-status-panel) {
  grid-template-columns: minmax(0, 38fr) repeat(2, minmax(0, 31fr));
  grid-template-rows: minmax(var(--single-hud-stats-height, 0px), auto) minmax(var(--single-hud-counter-height), auto);
  width: var(--single-hud-board-size);
  max-width: 100%;
  gap: 4px;
  margin-left: 0;
  justify-self: center;
  padding: 0;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge :is(.single-status-stack, .player-duel-panel .duel-status-panel) {
  width: var(--layout-test-board-size);
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.b2b-board-meter, .player-duel-panel .duel-b2b) {
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  flex-wrap: wrap;
  align-self: start;
  align-items: end;
  gap: 2px 4px;
  width: 100%;
  max-width: none;
  text-align: left;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.b2b-board-meter, .player-duel-panel .duel-b2b) > strong {
  font-size: 24px !important;
  line-height: 26px;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.b2b-board-meter, .player-duel-panel .duel-b2b) > span {
  font-size: 9px;
  line-height: 12px;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.pp-segments, .matchless-wrap) {
  grid-column: 1 / -1;
  flex-basis: 100%;
  margin-top: 0;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.pp-segments, .matchless-segments) {
  height: 5px;
  min-height: 5px;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-header {
  width: calc(var(--layout-single-board-size) * 0.62 - 4px);
  padding: 0;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial-challenge :is(.single-status-stack .board-header, .player-duel-panel .duel-live-stats:not([hidden])) {
  grid-area: 1 / 2 / 2 / 4;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-counter-stack {
  display: contents !important;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.single-status-stack, .duel-counter-stack) :is(#combo-counter, .combo-counter) {
  grid-area: 2 / 2 / 3 / 3;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.single-status-stack, .duel-counter-stack) :is(#chain-counter, .chain-counter) {
  grid-area: 2 / 3 / 3 / 4;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.single-status-stack, .duel-counter-stack) :is(#combo-counter, #chain-counter, .combo-counter, .chain-counter) {
  width: 100%;
  height: var(--single-hud-counter-height) !important;
  min-height: 0;
  max-height: var(--single-hud-counter-height) !important;
  margin: 0;
  align-self: start;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.single-status-stack, .duel-counter-stack) :is(#combo-counter, #chain-counter, .combo-counter, .chain-counter) strong {
  font-size: 18px !important;
  line-height: 18px;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.training-free-move, .player-duel-panel .turn-free-move) {
  grid-area: 2 / 1 / 3 / 2;
  height: auto;
  min-height: 38px;
  max-width: 100%;
  margin: 0;
  padding: 3px;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) .turn-free-move-title {
  font-size: 10px;
  line-height: 12px;
}
html[data-layout-family="mobile-portrait"] :is(#game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config), #game-screen.is-tutorial-challenge) :is(.single-hud-metric > span, .single-hud-metric small, .duel-live-stat > span) {
  white-space: normal;
  overflow-wrap: normal;
  font-size: 9px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .duel-live-stat strong {
  font-size: 16px;
  line-height: 18px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stats:not([hidden]) {
  grid-area: 1 / 2 / 2 / 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-self: start;
  align-content: start;
  gap: 4px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stat:not([hidden]) {
  grid-area: auto;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial.is-tutorial-challenge .player-duel-panel .duel-live-stat.is-time {
  grid-column: 1 / -1 !important;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial-challenge .tutorial-progress {
  flex-wrap: wrap;
  height: auto;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-tutorial-challenge #tutorial-progress-label {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-sandbox .sandbox-mode-toggle {
  gap: 4px;
  padding-inline: 5px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-sandbox .sandbox-mode-toggle > span {
  overflow-wrap: normal;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-training-survival #survival-drain-stat:not([hidden]) {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}
html[data-layout-family="mobile-portrait"] #game-screen:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-rows: minmax(max-content, var(--layout-single-top-height)) calc(var(--layout-single-board-size) / 0.8) minmax(0, var(--layout-single-bottom-height));
}
html[data-layout-family="mobile-portrait"] #game-screen.is-sandbox:not(.is-ai-duel):not(.is-tutorial):not(.is-duel-config) .board-stage {
  grid-template-rows: minmax(max-content, 1fr) calc(var(--layout-single-board-size) / 0.8) minmax(var(--layout-single-bottom-height), 1fr);
}

/* The logo belongs to the root scene, not the camera's fixed chrome. */
body > .main-menu-screen { height: 100dvh; min-height: 100dvh; }
html .main-menu-screen { place-items: center; }
html body > .main-menu-screen[data-menu-page] .screen-panel.menu-home {
  height: min(900px, calc(100dvh - 36px));
  min-height: 0;
  max-height: none;
  padding-block: 12px;
}
.main-menu-screen .screen-panel.menu-home {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}
.main-menu-screen .menu-home > .persistent-menu-world {
  grid-area: 1 / 1;
}
.main-menu-screen .persistent-menu-world > .persistent-menu-scene {
  width: min(100%, var(--layout-menu-max, 76rem));
  margin-inline: auto;
}
html .main-menu-screen #main-menu-root {
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 480px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: ". battle ." "tutorial logo training" ". options ." !important;
  column-gap: 32px;
  row-gap: 28px;
  align-content: stretch;
  align-items: center;
}
html .main-menu-screen #main-menu-root > .menu-logo-heading {
  grid-area: logo !important;
  width: 100%;
  max-width: 480px;
  margin: 0;
  justify-self: center;
  text-align: center;
}
html .main-menu-screen #main-menu-root .menu-build-version { line-height: 1.3; }
html .main-menu-screen #main-menu-root > #battle-menu-button {
  grid-area: battle !important;
  width: 100%;
  align-self: end;
}
html .main-menu-screen #main-menu-root > .tutorial-menu-entry { grid-area: tutorial !important; }
html .main-menu-screen #main-menu-root > #training-menu-button { grid-area: training !important; }
html .main-menu-screen #main-menu-root > #options-menu-button {
  grid-area: options !important;
  align-self: start;
  justify-self: center;
  width: min(220px, 100%);
  margin: 0;
}
html .main-menu-screen #main-menu-root > #fullscreen-menu-prompt {
  grid-area: auto !important;
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: min(360px, 100%);
  margin: 0;
  translate: -50% 0;
}
@media (max-width: 900px) and (min-height: 501px) {
  html .main-menu-screen #main-menu-root {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: "battle battle" "logo logo" "tutorial training" !important;
    column-gap: 12px;
    row-gap: 20px;
  }
  html .main-menu-screen #main-menu-root > .menu-logo-heading { width: min(360px, 96%); }
  html .main-menu-screen #main-menu-root > #battle-menu-button { width: min(340px, 100%); justify-self: center; }
  html .main-menu-screen #main-menu-root > .tutorial-menu-entry,
  html .main-menu-screen #main-menu-root > #training-menu-button { align-self: start; }
  html .main-menu-screen #main-menu-root > #options-menu-button {
    grid-area: 3 / 1 / 4 / 3 !important;
    margin-top: 100px;
  }
  html .main-menu-screen #main-menu-root > #fullscreen-menu-prompt {
    grid-area: 3 / 1 / 4 / 3 !important;
    position: static;
    align-self: start;
    justify-self: center;
    margin-top: 154px;
    translate: none;
    min-height: 24px;
  }
  html .main-menu-screen #main-menu-root :is(.mode-button, .tutorial-menu-entry) {
    min-height: 80px !important;
    height: auto;
  }
  html .main-menu-screen #main-menu-root .mode-button { padding: 10px; gap: 4px; }
  html .main-menu-screen #main-menu-root .mode-button > span { font-size: 22px !important; }
  html .main-menu-screen #main-menu-root .mode-button > small { font-size: 12px !important; }
}
@media (max-width: 360px), (max-height: 650px) {
  html .main-menu-screen #main-menu-root { column-gap: 12px; row-gap: 18px; }
  html .main-menu-screen #main-menu-root > .menu-logo-heading { max-width: 320px; }
  html .main-menu-screen #main-menu-root :is(.mode-button, .tutorial-menu-entry) { min-height: 64px !important; }
  html .main-menu-screen #main-menu-root .mode-button > small { display: none; }
}
@media (max-width: 900px) and (min-height: 501px) and (max-height: 650px) {
  html .main-menu-screen #main-menu-root > #options-menu-button { margin-top: 78px; }
  html .main-menu-screen #main-menu-root > #fullscreen-menu-prompt { margin-top: 132px; }
}
@media (min-width: 901px) {
  html body > .main-menu-screen[data-menu-page] .screen-panel.menu-home {
    width: min(1560px, calc(100vw - 48px));
    max-width: none;
  }
  html .main-menu-screen #main-menu-root :is(#battle-menu-button, #tutorial-menu-button, #training-menu-button, .tutorial-menu-entry) {
    min-height: 164px;
  }
  html .main-menu-screen #main-menu-root > #options-menu-button {
    width: min(260px, 100%);
    min-height: 54px;
  }
}
@media (max-width: 900px) and (max-height: 500px) {
  html .main-menu-screen #main-menu-root { grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr) !important; }
  html .main-menu-screen #main-menu-root > .menu-logo-heading { max-width: 260px; }
}

/* Tutorial categories use the same compact sizing as challenge categories. */
.main-menu-screen #tutorial-menu-page .mode-button {
  min-height: var(--layout-menu-dense-button-height) !important;
  height: var(--layout-menu-dense-button-height) !important;
  padding: 10px 12px;
}
.main-menu-screen #tutorial-menu-page .mode-button > span {
  font-size: 20px;
  line-height: 1.08;
}
.main-menu-screen #tutorial-menu-page .mode-button > small {
  font-size: 12px;
  line-height: 1.3;
}
html[data-layout-family="mobile-portrait"] #tutorial-menu-page {
  grid-template-rows: auto repeat(3, var(--layout-menu-dense-button-height)) auto;
}
html[data-layout-family="mobile-landscape"] #tutorial-menu-page .mode-button {
  min-height: 44px !important;
  height: 44px !important;
}

/* Mobile pulses use the existing animation, bounded to their reserved gap. */
html[data-layout-family^="mobile-"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-counter-stack :is(.combo-counter, .chain-counter) {
  --counter-entry-rotation: 0deg;
  --counter-peak-rotation: 0deg;
  --counter-peak-scale: 1.06;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  gap: 1px;
}
html[data-layout-family^="mobile-"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-counter-stack :is(.combo-counter, .chain-counter) > span { font-size: 9px; line-height: 10px; }
html[data-layout-family^="mobile-"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-counter-stack :is(.combo-counter, .chain-counter) > strong { font-size: 14px; line-height: 15px; }
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-counter-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 4px;
}
html[data-layout-family="mobile-portrait"] #game-screen.is-ai-duel:not(.is-tutorial) :is(#player-duel-panel, #ai-duel-panel) .duel-counter-stack :is(.combo-counter, .chain-counter):not([hidden]) {
  height: 28px !important;
  max-height: 28px;
  min-height: 0;
}

/* Landscape side rails span the combat rows; live telemetry includes clocks. */
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-status-panel {
  grid-row: 1 / 3;
  height: auto;
  justify-content: flex-start;
  gap: 6px;
}
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-live-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin-top: 0;
  gap: 4px;
}
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-live-stat {
  height: auto;
  min-height: 0;
}
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-live-stat-spacer { display: none; }
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-live-stat.is-time { grid-column: 1 / -1; }
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-live-stat > span { font-size: 8px; line-height: 10px; }
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-live-stat strong { font-size: 16px; line-height: 19px; }
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-live-stat small { display: none; }
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-counter-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  gap: 8px;
  padding: 2px 4px;
}
html[data-layout-family="mobile-landscape"] #game-screen.is-ai-duel:not(.is-tutorial) .duel-counter-stack :is(.combo-counter, .chain-counter) { height: 32px; }
html[data-layout-family="mobile-landscape"] #game-screen:not(.is-tutorial) .training-free-move {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 44px;
  padding: 3px;
}
html[data-layout-family="mobile-landscape"] #game-screen:not(.is-tutorial) .training-free-move .turn-free-move-title {
  font-size: 10px;
  line-height: 12px;
}
html[data-layout-family="mobile-landscape"] #game-screen:not(.is-tutorial) .training-free-move .turn-free-move-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

html[data-layout-family^="mobile-"] :is(.setting-reset, .audio-icon-button) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
html[data-layout-family^="mobile-"] :is(.music-track-actions button, .music-editor-title button, .music-library-actions .primary-action, .options-subpage-back, .duel-pause-button) { min-width: 44px; min-height: 44px; }
html[data-layout-family^="mobile-"] :is(.customisation-panel select, .menu-effect-colour input, .music-track-weight input, .mult-tier-table input) { min-height: 44px; }
html[data-layout-family^="mobile-"] #game-screen.is-sandbox .sandbox-mode-toggle { min-height: 44px; }
html[data-layout-family^="mobile-"] .audio-volume-setting { grid-template-columns: 44px minmax(0, 1fr) 2.8rem; }
html[data-layout-family^="mobile-"] .customisation-panel.options-subpage .menu-effect-setting { grid-template-columns: minmax(0, 1fr) 3rem 44px; }
html[data-layout-family^="mobile-"] .menu-effect-setting > label { grid-column: 1 / -1; }
html[data-layout-family^="mobile-"] .customisation-panel.options-subpage .menu-effect-colour { grid-template-columns: 44px minmax(0, 1fr) 44px; }
html[data-layout-family^="mobile-"] .customisation-panel.options-subpage .skin-setting { grid-template-columns: minmax(0, 1fr) minmax(100px, 1fr) 44px; }
@media (max-width: 480px) {
  html[data-layout-family^="mobile-"] .mult-tier-table th:first-child { width: 14%; }
  html[data-layout-family^="mobile-"] .mult-tier-table :is(th:nth-child(3), th:nth-child(5)) { width: 22%; }
}

/* Game options share one row allocation; only functional audio icons remain. */
#options-menu-page.is-options-game { grid-template-areas: "title" "content"; grid-template-rows: auto minmax(0, 1fr); }
#game-options-audio .audio-settings { width: 100%; max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; }
.options-game-panel .game-options-panel .audio-setting { width: 100%; max-width: none; margin: 0; }
.options-game-panel .audio-volume-setting { grid-template-columns: 32px minmax(0, 1fr) 3rem 32px; }
.options-game-panel :is(.fullscreen-setting, .patch-notes-setting) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.options-game-panel :is(.fullscreen-setting, .patch-notes-setting) .primary-action { grid-column: 2; min-height: 44px; }
.options-game-panel .ui-layout-debug-setting { grid-template-columns: minmax(0, 1fr) 20px 32px !important; }
.options-game-panel .ui-layout-debug-setting input { width: 20px; height: 20px; accent-color: #5be2d2; }
.options-game-panel .gameplay-effect-choice { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 32px; }
.options-game-panel .gameplay-effect-choice select { grid-column: 2; }
.options-game-panel .gameplay-effect-toggle { grid-template-columns: minmax(0, 1fr) 20px 32px; }
.options-game-panel .gameplay-effect-toggle input { grid-column: 2; }
.options-game-panel .has-setting-reset > .setting-reset { grid-column: -2; }
.options-game-panel :is(.gameplay-effect-toggle, .ui-layout-debug-setting) > label { display: flex; align-items: center; min-height: 28px; }
.setting-reset:disabled { opacity: .45; cursor: default; }
.setting-help { display: none; width: 44px; height: 44px; border: 1px solid #526772; border-radius: 4px; background: #0c151b; color: #d0e6f4; font: inherit; cursor: pointer; }

@media (max-width: 760px), (pointer: coarse) {
  #options-menu-page.is-options-game { gap: 6px; }
  #options-menu-page.is-options-game > .menu-page-title { font-size: 1.35rem; margin-block: 0; }
  html[data-layout-family] .options-menu-page > .options-game-panel { padding: 4px 2px; }
  .options-game-panel > .options-subpage-heading { margin-bottom: 4px; }
  .options-game-panel .options-subpage-content { padding: 4px 6px 12px; }
  .options-game-panel .game-options-hub { padding: 4px; box-sizing: border-box; }
  .options-game-panel .game-options-category { min-height: 60px; padding: 8px 32px 8px 10px; }
  .options-game-panel .game-options-category span { font-size: .7rem; }
  .options-game-panel .game-options-group .game-options-panel { padding: 8px 4px; }
  .options-game-panel .audio-setting { padding: 8px; gap: 6px; }
  .options-game-panel .game-options-panel :is(.gameplay-effect-toggle, .ui-layout-debug-setting) > label { grid-column: 1; min-height: 44px; }
  html[data-layout-family] .options-game-panel .audio-volume-setting { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .options-game-panel .audio-volume-setting input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .options-game-panel .audio-volume-setting strong { grid-column: 2; grid-row: 1; justify-self: end; }
  .options-game-panel .audio-volume-setting .setting-reset { grid-column: 3; grid-row: 1; }
  html[data-layout-family] .options-game-panel .game-options-panel .ui-layout-debug-setting { grid-template-columns: minmax(0, 1fr) 20px 44px !important; }
  html[data-layout-family] .options-game-panel .game-options-panel .gameplay-effect-toggle { grid-template-columns: minmax(0, 1fr) 20px 44px; }
  html[data-layout-family] .options-game-panel .game-options-panel .gameplay-effect-choice { grid-template-columns: minmax(0, 1fr) 44px; }
  .options-game-panel .gameplay-effect-choice > label { grid-column: 1 / -1; }
  .options-game-panel .gameplay-effect-choice select { grid-column: 1; }
  .options-game-panel .gameplay-effect-choice .setting-reset { grid-column: 2; }
  html[data-layout-family] .options-game-panel .game-options-panel .menu-effect-setting:has(input[type="range"]) { grid-template-columns: minmax(0, 1fr) 3rem 44px; }
  .options-game-panel .menu-effect-setting input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  html[data-layout-family] .options-game-panel .game-options-panel .menu-effect-setting:has(input[type="range"]) > label { grid-column: 1; grid-row: 1; }
  .options-game-panel .menu-effect-setting:has(input[type="range"]) > strong { grid-column: 2; grid-row: 1; }
  .options-game-panel .menu-effect-setting:has(input[type="range"]) > .setting-reset { grid-column: 3; grid-row: 1; }
  html[data-layout-family] .options-game-panel .game-options-panel .parallax-setting:has(input[type="range"]) { grid-template-columns: minmax(0, 1fr) 3rem 44px 44px; }
  .options-game-panel .parallax-setting.is-mobile-disabled .setting-help { display: grid; place-items: center; grid-column: 4; grid-row: 1; opacity: 1; }
}