:root {
  --ink: #241f1b;
  --ink-soft: #4b423a;
  --paper: #f7f0e1;
  --paper-deep: #efe3cc;
  --paper-line: rgba(90, 68, 42, 0.13);
  --pink: #e8568d;
  --pink-deep: #b43165;
  --teal: #2a9d8f;
  --teal-deep: #176e64;
  --gold: #e0aa4b;
  --gold-deep: #986310;
  --blue: #3f7fbf;
  --blue-deep: #245486;
  --red: #c9483e;
  --hand: "Chalkboard SE", "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
  --hand-tight: "Chalkboard SE", "Comic Sans MS", "Segoe Print", cursive;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.08), transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(224, 170, 75, 0.08), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 14px),
    #1d1916;
  font-family: var(--hand);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
.stage,
.touch-deck {
  user-select: none;
  -webkit-user-select: none;
}

#shell {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(6px, var(--safe-top))
    max(6px, var(--safe-right))
    max(6px, var(--safe-bottom))
    max(6px, var(--safe-left));
}

.stage {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 0 0 2px rgba(10, 8, 6, 0.72),
    0 0 0 5px rgba(247, 240, 225, 0.14),
    0 30px 70px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
  isolation: isolate;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

.hidden {
  display: none !important;
}

/* ---------- HUD utility buttons ---------- */

.hud-buttons {
  position: absolute;
  top: 9.6cqw;
  right: 1.6cqw;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6cqw;
  max-width: 70%;
}

.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.55cqw 1.1cqw;
  background: rgba(247, 240, 225, 0.9);
  color: var(--ink);
  font-family: var(--hand);
  font-size: clamp(10px, 1.02cqw, 14px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(36, 31, 27, 0.35);
  transition: transform 90ms ease, background 120ms ease;
  touch-action: manipulation;
}

.chip:hover {
  background: #fffaf0;
  transform: translateY(-1px);
}

.chip:active {
  transform: translateY(1px);
  box-shadow: none;
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Overlays and paper panels ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(10px, var(--safe-top))
    max(10px, var(--safe-right))
    max(10px, var(--safe-bottom))
    max(10px, var(--safe-left));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  background:
    radial-gradient(ellipse at center, rgba(36, 31, 27, 0.16), rgba(36, 31, 27, 0.46)),
    rgba(36, 31, 27, 0.12);
  backdrop-filter: blur(2.5px);
}

.panel {
  position: relative;
  width: min(96vw, 1000px);
  margin: auto;
  padding: clamp(14px, 2.35cqw, 34px);
  border: 2.5px solid var(--ink);
  border-radius: 18px 9px 20px 11px / 10px 20px 9px 17px;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 17px, var(--paper-line) 17px 18px),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.7), transparent 45%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(175, 140, 90, 0.08));
  box-shadow:
    0.7cqw 0.9cqw 0 rgba(36, 31, 27, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.panel.small {
  width: min(92vw, 560px);
  padding: clamp(16px, 2.8cqw, 38px);
}

.panel h1,
.panel h2,
.panel h3,
.panel p {
  margin-top: 0;
}

.panel h1 {
  margin-bottom: 0.6cqw;
  font-family: var(--hand-tight);
  font-size: clamp(30px, 5.6cqw, 74px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-shadow: 2px 3px 0 rgba(224, 170, 75, 0.4);
}

.panel h2 {
  margin-bottom: 1.2cqw;
  font-size: clamp(24px, 3.5cqw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.panel h3 {
  margin: 1.3em 0 0.35em;
  font-size: clamp(12px, 1.2cqw, 17px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.eyebrow {
  margin-bottom: 0.4cqw;
  font-size: clamp(9px, 1.02cqw, 14px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.subtitle {
  margin-bottom: 0;
  font-size: clamp(11px, 1.25cqw, 17px);
  line-height: 1.35;
  color: var(--ink-soft);
}

.hint {
  margin: 0;
  font-size: clamp(10px, 1.02cqw, 14px);
  color: var(--ink-soft);
}

/* ---------- Character select ---------- */

.select-panel {
  width: min(96vw, 1100px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.35cqw, 19px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
}

.select-header {
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2cqw, 18px);
}

.card {
  position: relative;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25cqw;
  min-width: 0;
  padding: clamp(8px, 1.1cqw, 16px);
  border: 2px solid var(--ink);
  border-radius: 13px 7px 15px 9px / 8px 14px 7px 12px;
  background: rgba(255, 250, 238, 0.78);
  color: var(--ink);
  font-family: var(--hand);
  text-align: left;
  cursor: pointer;
  box-shadow: 0.35cqw 0.45cqw 0 rgba(36, 31, 27, 0.14);
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
  overflow: hidden;
  touch-action: manipulation;
}

.card:hover {
  transform: translate(-2px, -2px) rotate(-0.25deg);
  box-shadow: 0.55cqw 0.7cqw 0 rgba(36, 31, 27, 0.17);
  background: #fffbf1;
}

.card[aria-pressed="true"] {
  background: #fffaf0;
  border-width: 3px;
  box-shadow:
    0.5cqw 0.65cqw 0 rgba(36, 31, 27, 0.18),
    inset 0 0 0 2px rgba(255, 255, 255, 0.8);
  transform: translate(-2px, -3px) rotate(-0.4deg);
}

.card[data-char="maya"][aria-pressed="true"] {
  border-color: var(--pink-deep);
}

.card[data-char="arlo"][aria-pressed="true"] {
  border-color: var(--teal-deep);
}

.card[data-char="evan"][aria-pressed="true"] {
  border-color: var(--gold-deep);
}

.card[data-char="cisco"][aria-pressed="true"] {
  border-color: var(--blue-deep);
}

.portrait-wrap {
  width: 100%;
  height: clamp(70px, 12cqw, 168px);
  margin-bottom: 0.2cqw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 9px 5px 11px 7px;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.85), transparent 60%),
    repeating-linear-gradient(45deg, rgba(36, 31, 27, 0.045) 0 1px, transparent 1px 9px),
    rgba(224, 170, 75, 0.1);
  border: 1.5px solid rgba(36, 31, 27, 0.25);
  overflow: hidden;
}

.card[data-char="maya"] .portrait-wrap {
  background-color: rgba(232, 86, 141, 0.09);
}

.card[data-char="arlo"] .portrait-wrap {
  background-color: rgba(42, 157, 143, 0.1);
}

.card[data-char="evan"] .portrait-wrap {
  background-color: rgba(224, 170, 75, 0.13);
}

.card[data-char="cisco"] .portrait-wrap {
  background-color: rgba(63, 127, 191, 0.11);
}

.portrait {
  display: block;
  width: 100%;
  height: 100%;
}

.card-name {
  font-family: var(--hand-tight);
  font-size: clamp(17px, 2.05cqw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.card-tag {
  font-size: clamp(9px, 0.92cqw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.card-desc {
  font-size: clamp(9px, 0.96cqw, 13px);
  line-height: 1.3;
  color: var(--ink-soft);
}

.card-check {
  position: absolute;
  top: 0.8cqw;
  right: 0.8cqw;
  padding: 0.35cqw 0.7cqw;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: clamp(8px, 0.8cqw, 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-5px) rotate(4deg);
  transition: opacity 130ms ease, transform 130ms ease;
}

.card[aria-pressed="true"] .card-check {
  opacity: 1;
  transform: translateY(0) rotate(4deg);
}

.select-options {
  display: flex;
  align-items: flex-end;
  gap: 1.6cqw;
  flex-wrap: wrap;
}

.difficulty,
.opponent {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.difficulty legend,
.opponent legend {
  margin-bottom: 0.45cqw;
  padding: 0;
  font-size: clamp(9px, 1cqw, 13px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.seg-group {
  display: inline-flex;
  padding: 2px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.seg {
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 34px;
  padding: 0.52cqw 1.25cqw;
  background: transparent;
  color: var(--ink);
  font-family: var(--hand);
  font-size: clamp(10px, 1.05cqw, 14px);
  cursor: pointer;
  touch-action: manipulation;
}

.seg[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.opponent {
  flex: 1 1 360px;
}

.opponent-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35cqw;
}

.opp-btn {
  appearance: none;
  min-height: 36px;
  padding: 0.48cqw 0.85cqw;
  border: 1.5px solid rgba(36, 31, 27, 0.7);
  border-radius: 999px;
  background: rgba(255, 250, 238, 0.7);
  color: var(--ink);
  font-family: var(--hand);
  font-size: clamp(10px, 1cqw, 13px);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.opp-btn:hover:not(:disabled) {
  background: #fffbf1;
}

.opp-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.opp-btn.random[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--ink);
  color: var(--ink);
}

.opp-btn:disabled {
  opacity: 0.34;
  cursor: not-allowed;
  text-decoration: line-through;
}

.start-wrap {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin-left: auto;
}

.primary {
  appearance: none;
  border: 2px solid var(--ink);
  border-radius: 10px 5px 12px 7px / 7px 11px 5px 10px;
  padding: 0.9cqw 1.7cqw;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(12px, 1.25cqw, 17px);
  cursor: pointer;
  box-shadow: 0.25cqw 0.35cqw 0 rgba(36, 31, 27, 0.25);
  transition: transform 100ms ease, box-shadow 100ms ease, filter 120ms ease;
  touch-action: manipulation;
}

.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translate(-1px, -2px);
  box-shadow: 0.35cqw 0.5cqw 0 rgba(36, 31, 27, 0.25);
}

.primary:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 rgba(36, 31, 27, 0.25);
}

.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.primary.big {
  padding: 1.05cqw 2.3cqw;
  font-size: clamp(13px, 1.5cqw, 20px);
}

.device-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.6cqw;
  flex-wrap: wrap;
}

.device-row .chip {
  min-height: 40px;
}

.touch-toggle,
.fullscreen-toggle {
  cursor: pointer;
}

.touch-toggle {
  display: none;
}

body.touch-capable .touch-toggle {
  display: inline-flex;
}

body.no-fullscreen .fullscreen-toggle {
  display: none;
}

.controls-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45cqw 1.3cqw;
  padding-top: 0.6cqw;
  border-top: 1.5px dashed rgba(36, 31, 27, 0.25);
  font-size: clamp(8px, 0.92cqw, 12px);
  color: var(--ink-soft);
}

.controls-strip b {
  color: var(--ink);
}

.touch-only {
  display: none;
}

body.touch-capable .touch-only {
  display: inline;
}

/* ---------- Menus ---------- */

.menu-buttons {
  display: grid;
  gap: 0.65cqw;
  margin: 1.2cqw 0 0;
}

.menu-buttons button {
  appearance: none;
  border: 1.5px solid var(--ink);
  border-radius: 8px 4px 9px 5px / 5px 8px 4px 7px;
  min-height: 40px;
  padding: 0.72cqw 1.2cqw;
  background: rgba(255, 250, 238, 0.68);
  color: var(--ink);
  font-family: var(--hand);
  font-size: clamp(11px, 1.12cqw, 15px);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(36, 31, 27, 0.16);
  touch-action: manipulation;
}

.menu-buttons button:hover {
  background: #fffbf1;
}

.menu-buttons .primary {
  background: var(--gold);
  font-weight: 700;
  border-width: 2px;
  box-shadow: 0.2cqw 0.3cqw 0 rgba(36, 31, 27, 0.22);
}

.menu-buttons .menu-setting {
  background: rgba(255, 250, 238, 0.5);
  font-size: clamp(10px, 1.02cqw, 14px);
}

.volume {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin-top: 1.2cqw;
  font-size: clamp(10px, 1.05cqw, 14px);
  color: var(--ink-soft);
}

.volume input {
  flex: 1;
  min-height: 32px;
  accent-color: var(--ink);
  touch-action: auto;
}

/* ---------- Help ---------- */

.help-panel {
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
}

.help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.2cqw;
  align-items: start;
}

.help-keys {
  display: grid;
  gap: 1.4cqw;
}

.key-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(10px, 1.02cqw, 14px);
}

.key-table caption {
  padding-bottom: 0.5cqw;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.key-table th,
.key-table td {
  padding: 0.32cqw 0.5cqw;
  border-bottom: 1px dashed rgba(36, 31, 27, 0.18);
  text-align: left;
}

.key-table th {
  width: 34%;
  font-family: var(--hand-tight);
  white-space: nowrap;
}

.key-table tr:last-child th,
.key-table tr:last-child td {
  border-bottom: 0;
}

.move-list {
  font-size: clamp(10px, 1.03cqw, 14px);
  line-height: 1.35;
  color: var(--ink-soft);
}

.move-list p {
  margin-bottom: 0.65em;
}

.move-list h3:first-child {
  margin-top: 0;
}

.help-panel > .primary {
  margin-top: 1.4cqw;
}

/* ---------- Result ---------- */

.result-score {
  margin: 0.2cqw 0 0.7cqw;
  font-family: var(--hand-tight);
  font-size: clamp(30px, 4.6cqw, 62px);
  line-height: 1;
  letter-spacing: 0.06em;
}

.result-panel h2 {
  margin-bottom: 0.3cqw;
}

/* ---------- Loading / error ---------- */

.loading {
  background: rgba(36, 31, 27, 0.24);
  backdrop-filter: none;
}

.loading-panel {
  text-align: center;
}

.loading-panel h1 {
  font-size: clamp(26px, 4.6cqw, 60px);
}

.loading-text {
  margin: 0.8cqw 0 1cqw;
  font-size: clamp(11px, 1.1cqw, 15px);
  color: var(--ink-soft);
}

.spinner {
  display: flex;
  justify-content: center;
  gap: 0.55cqw;
  height: 1.8cqw;
  align-items: center;
}

.spinner span {
  width: 0.65cqw;
  height: 0.65cqw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: ink-bounce 900ms ease-in-out infinite;
}

.spinner span:nth-child(2) {
  animation-delay: 120ms;
}

.spinner span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes ink-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-0.6cqw);
    opacity: 1;
  }
}

.error-text {
  padding: 0.9cqw 1.1cqw;
  border: 1.5px dashed var(--red);
  border-radius: 7px;
  background: rgba(201, 72, 62, 0.07);
  font-size: clamp(10px, 1.04cqw, 14px);
  line-height: 1.45;
  word-break: break-word;
}

.error-text code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.92em;
}

/* ---------- Touch controller deck ---------- */

.touch-deck {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding:
    8px
    max(10px, var(--safe-right))
    max(8px, var(--safe-bottom))
    max(10px, var(--safe-left));
  background:
    linear-gradient(to top, rgba(247, 240, 225, 0.98), rgba(247, 240, 225, 0.88) 72%, rgba(247, 240, 225, 0));
  border-top: 1px dashed rgba(36, 31, 27, 0.16);
  pointer-events: none;
  touch-action: none;
}

body.touch-on.in-match .touch-deck {
  display: flex;
}

/* The touch deck carries its own pause control, so keep the small arena clear. */
body.touch-on.in-match .hud-buttons {
  display: none;
}

.deck-pause {
  position: fixed;
  top: max(8px, var(--safe-top));
  right: max(8px, var(--safe-right));
  z-index: 45;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid rgba(247, 240, 225, 0.88);
  border-radius: 999px;
  background: rgba(36, 31, 27, 0.78);
  color: var(--paper);
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  touch-action: manipulation;
}

.deck-pause:active {
  transform: translateY(2px);
  box-shadow: none;
}

.deck-head {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  pointer-events: none;
}

.deck-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(36, 31, 27, 0.58);
}

.rotate-hint {
  font-size: 11px;
  color: rgba(36, 31, 27, 0.65);
}

.deck-controls {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.deck-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.deck-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(36, 31, 27, 0.5);
}

.dpad,
.action-diamond {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(36, 31, 27, 0.08);
  border: 1px solid rgba(36, 31, 27, 0.16);
  pointer-events: none;
}

.dpad {
  width: clamp(160px, 42vw, 200px);
  aspect-ratio: 1;
}

.action-diamond {
  width: clamp(168px, 44vw, 210px);
  aspect-ratio: 1;
}

.pad-btn,
.action-btn {
  pointer-events: auto;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 48px;
  min-height: 48px;
  border: 2px solid rgba(36, 31, 27, 0.78);
  border-radius: 50%;
  background: rgba(255, 250, 238, 0.94);
  color: var(--ink);
  font-family: var(--hand);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(36, 31, 27, 0.24);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.pad-btn span {
  font-size: clamp(14px, 3.8vw, 20px);
  line-height: 0.9;
}

.pad-btn small {
  margin-top: 2px;
  font-size: clamp(7px, 1.8vw, 9px);
  font-weight: 700;
  color: rgba(36, 31, 27, 0.6);
}

.pad-up {
  grid-area: 1 / 2;
}

.pad-left {
  grid-area: 2 / 1;
}

.pad-right {
  grid-area: 2 / 3;
}

.pad-down {
  grid-area: 3 / 2;
}

.pad-hub {
  grid-area: 2 / 2;
  align-self: center;
  justify-self: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(36, 31, 27, 0.2);
  box-shadow: inset 0 1px 2px rgba(36, 31, 27, 0.25);
}

.action-btn {
  font-size: clamp(8px, 2.2vw, 11px);
  letter-spacing: 0.01em;
  padding: 0;
}

.action-special {
  grid-area: 1 / 2;
  background: #f1d493;
}

.action-punch {
  grid-area: 2 / 1;
  background: #f4cbdc;
}

.action-kick {
  grid-area: 2 / 3;
  background: #c7e8e0;
}

.action-block {
  grid-area: 3 / 2;
  background: #d3e2f5;
}

.action-dash {
  grid-area: 2 / 2;
  justify-self: center;
  align-self: center;
  width: 90%;
  height: 90%;
  min-width: 48px;
  min-height: 48px;
  background: #fff8e8;
  border-width: 1.5px;
  font-size: clamp(7px, 1.9vw, 10px);
}

.pad-btn.active,
.action-btn.active {
  transform: translateY(2px) scale(0.97);
  box-shadow: none;
  background: var(--gold);
}

.action-block.active {
  background: var(--blue);
  color: #fff8e8;
}

/* Landscape phones: keep the arena large and dock translucent controls
   over the lower corners instead of reserving a whole controller row. */
@media (orientation: landscape) {
  .touch-deck {
    position: fixed;
    padding:
      0
      max(12px, var(--safe-right))
      max(8px, var(--safe-bottom))
      max(12px, var(--safe-left));
    background: linear-gradient(to top, rgba(29, 25, 22, 0.22), transparent 82%);
    border-top: 0;
  }

  .deck-head,
  .deck-label {
    display: none;
  }

  .deck-pause {
    top: auto;
    right: auto;
    bottom: max(8px, var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
  }

  .deck-pause:active {
    transform: translate(-50%, 2px);
  }

  .deck-controls {
    max-width: none;
  }

  .dpad {
    width: clamp(156px, 42vh, 196px);
  }

  .action-diamond {
    width: clamp(162px, 44vh, 204px);
  }

  .pad-btn,
  .action-btn {
    border-color: rgba(247, 240, 225, 0.88);
    box-shadow:
      0 2px 0 rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(0, 0, 0, 0.18);
  }

  .pad-btn small {
    color: rgba(36, 31, 27, 0.68);
  }
}

/* ---------- Focus / motion ---------- */

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: 2px;
}

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

/* ---------- Responsive menu and touch sizing ---------- */

@media (max-width: 760px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .select-panel {
    gap: 9px;
  }

  .select-options {
    align-items: stretch;
    gap: 10px;
  }

  .opponent {
    flex-basis: 100%;
  }

  .start-wrap {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .help-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .device-row {
    justify-content: center;
  }
}

@media (pointer: coarse) {
  .chip,
  .seg,
  .opp-btn,
  .primary,
  .menu-buttons button {
    min-height: 48px;
  }

  .card {
    min-height: 48px;
  }

  .cards {
    gap: 8px;
  }

  .controls-strip span:not(.touch-only) {
    display: none;
  }

  .hud-buttons {
    gap: 6px;
  }

  .hud-buttons .chip {
    min-height: 48px;
    padding: 8px 12px;
  }

  .volume input {
    min-height: 48px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .overlay {
    padding:
      max(4px, var(--safe-top))
      max(4px, var(--safe-right))
      max(4px, var(--safe-bottom))
      max(4px, var(--safe-left));
  }

  .select-panel {
    padding: 8px 14px;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px);
    gap: 6px;
  }

  .select-header .eyebrow,
  .select-header .subtitle {
    display: none;
  }

  .panel h1 {
    margin-bottom: 0;
    font-size: clamp(26px, 8vh, 44px);
  }

  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .card {
    padding: 6px;
  }

  .portrait-wrap {
    height: clamp(60px, 19vh, 94px);
    margin-bottom: 0;
  }

  .card-name {
    font-size: clamp(16px, 4.6vh, 24px);
  }

  .card-tag {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .card-desc {
    display: none;
  }

  .select-options {
    align-items: center;
    gap: 8px;
  }

  .difficulty legend,
  .opponent legend {
    margin-bottom: 2px;
    font-size: 9px;
  }

  .seg,
  .opp-btn {
    min-height: 48px;
    padding: 4px 9px;
    font-size: 10px;
  }

  .opponent {
    flex: 1 1 280px;
  }

  .opponent-options {
    gap: 3px;
  }

  .start-wrap {
    gap: 8px;
  }

  .start-wrap .hint {
    font-size: 10px;
  }

  .select-panel .primary.big {
    min-height: 48px;
    padding: 8px 14px;
    font-size: 13px;
  }

  .device-row {
    display: none;
  }

  .controls-strip {
    display: none;
  }

  .help-panel {
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px);
  }

  .help-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .help-keys {
    gap: 8px;
  }

  .key-table,
  .move-list {
    font-size: 9px;
  }

  .panel h2 {
    font-size: clamp(20px, 6vh, 32px);
  }
}

@media (max-width: 360px) {
  .touch-deck {
    padding-left: max(6px, var(--safe-left));
    padding-right: max(6px, var(--safe-right));
  }

  .deck-controls {
    gap: 4px;
  }

  .dpad,
  .action-diamond {
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 2px;
    width: 148px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .pad-btn,
  .action-btn,
  .action-dash {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
  }

  .action-btn {
    font-size: 8px;
  }

  .action-dash {
    font-size: 7px;
  }
}

@media (max-width: 480px) {
  .card-desc {
    display: none;
  }

  .portrait-wrap {
    height: clamp(62px, 22vw, 100px);
  }

  .card-name {
    font-size: clamp(16px, 5.2vw, 24px);
  }

  .card-tag {
    font-size: 9px;
    line-height: 1.2;
  }

  .select-header .subtitle {
    display: none;
  }

  .panel h1 {
    font-size: clamp(27px, 9vw, 42px);
  }

  .device-row .chip {
    flex: 1 1 auto;
  }
}