/* ============================================================================
   KINGDOMS CLASH — ui-menus.css  (override sheet, loaded last)
   Akofena-language non-fight screens:
     painted keyart bleeding behind a dark vignette · frosted-glass panels ·
     huge condensed Bebas display type · thin gold lines · kbd keycap hints.
   Everything in the inline <style> is the foundation; this file refines it.
   ============================================================================ */

:root {
  --kc-gold: #f0b64c;
  --kc-gold-hi: #ffe9ad;
  --kc-gold-mid: #ffd166;
  --kc-gold-line: rgba(216, 168, 78, 0.55);
  --kc-gold-line-soft: rgba(216, 168, 78, 0.32);
  --kc-glass: rgba(24, 13, 7, 0.68);
  --kc-glass-deep: rgba(12, 6, 3, 0.82);
  --kc-cream: #ecdcbc;
  --kc-cream-dim: #d9c9a8;
  --kc-ink: #241002;
  --kc-teal: #0e7490;
}

/* ============================================================================
   1 · OVERLAY SCREENS — vignette scrim, glass-column fallback, .menu-panel
   ----------------------------------------------------------------------------
   Screens whose children are NOT yet wrapped in .menu-panel still render as a
   single contiguous frosted panel: every direct child shares one width, one
   flat glass tone and the side borders; .crest carries the top edge and the
   :last-child carries the bottom edge. When .menu-panel wraps the content the
   fallback stops matching and .menu-panel's own chrome takes over.
   ============================================================================ */

.overlay-screen {
  /* keep base vertical tint UNDER the art; the vignette lives on ::before so
     it can sit between the painted layer and the content */
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(10px, 3vh, 24px) clamp(12px, 3vw, 24px);
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 168, 78, 0.4) transparent;
}

/* vignette above .screen-art (z:-1), below the content — position:fixed so it
   stays pinned to the viewport even when a short panel scrolls */
.overlay-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%,
      rgba(10, 5, 10, 0.22) 0%,
      rgba(9, 4, 9, 0.52) 58%,
      rgba(5, 2, 6, 0.90) 100%);
}
.overlay-screen > * { position: relative; z-index: 1; }
.overlay-screen > .screen-art { position: absolute; z-index: -1; }

/* painted keyart — slow ken-burns drift, slightly darkened so gold reads */
.screen-art {
  inset: -4%;
  filter: saturate(1.05) brightness(0.92);
  animation: kcArtDrift 26s ease-in-out infinite alternate;
}
@keyframes kcArtDrift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.06) translateY(-1.2%); }
}

/* ---- glass-column fallback (until .menu-panel wrapper lands) ---- */
.overlay-screen > :not(.screen-art):not(.menu-panel) {
  width: min(94vw, var(--panel-w, 600px));
  margin: 0 auto;
  background: var(--kc-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
  border-left: 1px solid var(--kc-gold-line);
  border-right: 1px solid var(--kc-gold-line);
  padding-left: clamp(18px, 4vw, 36px);
  padding-right: clamp(18px, 4vw, 36px);
}
/* top edge of the merged panel — every screen's first content child is .crest */
.overlay-screen > .crest {
  margin-top: auto;                       /* auto-margin centering + scroll-safe */
  padding-top: clamp(15px, 3.2vh, 28px);
  border-top: 1px solid var(--kc-gold-line);
  border-radius: 16px 16px 0 0;
}
.overlay-screen > :last-child:not(.screen-art):not(.menu-panel) {
  margin-bottom: auto;
  padding-bottom: clamp(15px, 3.2vh, 28px);
  border-bottom: 1px solid var(--kc-gold-line);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
/* inner rhythm (margins are zeroed by the fallback — space with padding) */
.overlay-screen > .main-title { padding-bottom: 6px; }
.overlay-screen > .sub-lore { padding-bottom: 16px; }
.overlay-screen > .load-note { padding-bottom: 12px; }
.overlay-screen > .select-hint { padding-bottom: 14px; }
.overlay-screen > .mode-row,
.overlay-screen > .vs-cards,
.overlay-screen > #difficulty-row,
.overlay-screen > #net-row { padding-bottom: 14px; }
.overlay-screen > div:not(.screen-art):not(.menu-panel) { padding-top: 6px; }

/* per-screen panel widths */
#mode-screen   { --panel-w: 680px; }
#select-screen { --panel-w: 740px; }

/* ---- the real glass panel (once the wrapper div lands) ---- */
.menu-panel {
  width: min(94vw, var(--panel-w, 600px));
  margin: auto;                           /* centers in the flex column, scroll-safe */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, rgba(32, 18, 9, 0.66), rgba(13, 6, 3, 0.80));
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
  border: 1px solid var(--kc-gold-line);
  border-radius: 16px;
  padding: clamp(15px, 3.2vh, 28px) clamp(18px, 4vw, 36px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.60), inset 0 1px 0 rgba(255, 225, 160, 0.14);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 168, 78, 0.4) transparent;
}
.menu-panel::-webkit-scrollbar,
.overlay-screen::-webkit-scrollbar,
.movelist-grid::-webkit-scrollbar,
#qa-panel::-webkit-scrollbar { width: 8px; }
.menu-panel::-webkit-scrollbar-thumb,
.overlay-screen::-webkit-scrollbar-thumb,
.movelist-grid::-webkit-scrollbar-thumb,
#qa-panel::-webkit-scrollbar-thumb {
  background: rgba(216, 168, 78, 0.35);
  border-radius: 4px;
}

/* ============================================================================
   2 · TYPOGRAPHY — crest, display title, lore copy
   ============================================================================ */

.crest {
  position: relative;
  letter-spacing: 7px;
  color: var(--kc-gold);
  font-weight: 500;
}
/* flanking diamonds — the Akofena header ornament */
.crest::before,
.crest::after {
  content: '◆';
  font-size: 0.62em;
  color: var(--kc-gold);
  opacity: 0.9;
  margin: 0 12px;
  vertical-align: 0.12em;
}
#rotate-overlay .crest::before,
#rotate-overlay .crest::after { content: none; }

.main-title {
  letter-spacing: 6px;
  text-align: center;
}

.sub-lore { color: var(--kc-cream); }

/* ============================================================================
   3 · BUTTONS — amber CTA (the "I AGREE" idiom) + glass secondary
   ============================================================================ */

.cta-btn {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 3.1vw, 24px);
  letter-spacing: 4px;
  line-height: 1;
  padding: 13px 34px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd166 0%, #f6b93b 46%, #d98a12 100%);
  color: var(--kc-ink);
  border: 1px solid rgba(255, 240, 200, 0.85);
  box-shadow:
    0 0 22px rgba(255, 150, 30, 0.50),
    0 5px 0 #7a3a00,
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-shadow: none;
}
.cta-btn:hover:not(:disabled) { filter: brightness(1.07); }
.cta-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 14px rgba(255, 150, 30, 0.5), 0 2px 0 #7a3a00,
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cta-btn:focus-visible { outline: 2px solid var(--kc-gold-hi); outline-offset: 2px; }

.cta-btn.menu-btn {
  font-size: clamp(14px, 2.6vw, 19px);
  letter-spacing: 3px;
  background: linear-gradient(180deg, rgba(56, 33, 19, 0.72), rgba(24, 12, 7, 0.86));
  color: #f0d9a8;
  border-color: var(--kc-gold-line);
  box-shadow: 0 0 14px rgba(216, 168, 78, 0.26), 0 5px 0 rgba(58, 28, 6, 0.9),
    inset 0 1px 0 rgba(255, 225, 160, 0.12);
}
.cta-btn.menu-btn:active {
  box-shadow: 0 0 8px rgba(216, 168, 78, 0.22), 0 2px 0 rgba(58, 28, 6, 0.9);
}

/* the two MOVE LIST buttons carry an inline purple gradient — pull them back
   into the glass/gold system (beats the inline style) */
#title-moves-btn.cta-btn,
#end-moves-btn.cta-btn {
  background: linear-gradient(180deg, rgba(56, 33, 19, 0.72), rgba(24, 12, 7, 0.86)) !important;
  color: #f0d9a8 !important;
  border-color: var(--kc-gold-line) !important;
  box-shadow: 0 0 14px rgba(216, 168, 78, 0.26), 0 5px 0 rgba(58, 28, 6, 0.9),
    inset 0 1px 0 rgba(255, 225, 160, 0.12);
  font-size: clamp(14px, 2.6vw, 19px);
  letter-spacing: 3px;
}
#title-moves-btn.cta-btn:active,
#end-moves-btn.cta-btn:active {
  box-shadow: 0 0 8px rgba(216, 168, 78, 0.22), 0 2px 0 rgba(58, 28, 6, 0.9) !important;
}

/* ============================================================================
   4 · MODE SELECT — frosted cards, chips, net row
   ============================================================================ */

.mode-card {
  background: linear-gradient(165deg, rgba(52, 30, 16, 0.60), rgba(18, 9, 5, 0.78));
  border: 1px solid var(--kc-gold-line-soft);
  border-radius: 14px;
  padding: 16px 22px;
  min-width: 160px;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease,
    background 0.14s ease;
}
.mode-card:hover:not(.selected) {
  border-color: rgba(216, 168, 78, 0.7);
  transform: translateY(-2px);
}
.mode-card.selected {
  border-color: var(--kc-gold-hi);
  background: linear-gradient(165deg, rgba(92, 52, 20, 0.55), rgba(30, 15, 7, 0.82));
  box-shadow: 0 0 26px rgba(255, 178, 44, 0.5), 0 12px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 225, 160, 0.2);
}
.mode-card h3 { letter-spacing: 3.5px; }
.mode-card p { color: var(--kc-cream-dim); }

.beta-tag {
  font-family: 'Oswald', sans-serif;
  background: rgba(246, 185, 59, 0.16);
  color: var(--kc-gold-mid);
  border: 1px solid rgba(246, 185, 59, 0.5);
  border-radius: 4px;
}

.diff-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--kc-gold);
}
.diff-chip {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  padding: 10px 20px;
  min-height: 44px;
  color: var(--kc-cream);
  background: rgba(28, 15, 8, 0.62);
  border: 1px solid var(--kc-gold-line-soft);
  border-radius: 22px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.diff-chip:hover:not(.selected) { border-color: rgba(216, 168, 78, 0.7); }
.diff-chip.selected {
  border-color: var(--kc-gold-mid);
  color: var(--kc-ink);
  background: linear-gradient(180deg, #ffd166, #d98a12);
  box-shadow: 0 0 14px rgba(255, 178, 44, 0.45);
}

/* net play */
#net-room-input {
  background: rgba(12, 6, 3, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--kc-gold-line);
  border-radius: 10px;
  color: var(--kc-gold-mid);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);
  transition: border-color 0.12s, box-shadow 0.12s;
}
#net-room-input::placeholder { color: rgba(240, 182, 76, 0.35); }
#net-room-input:focus {
  outline: none;
  border-color: var(--kc-gold-hi);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 178, 44, 0.4);
}
.net-status { color: var(--kc-cream-dim); letter-spacing: 0.4px; }

#net-indicator {
  border-radius: 999px;
  padding: 9px 22px;
  background: rgba(16, 8, 4, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--kc-gold-line);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--kc-gold-mid);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 150, 30, 0.25);
}

/* ============================================================================
   5 · FIGHTER SELECT — cards, portraits, pick badges, hint
   ============================================================================ */

.vs-cards { gap: clamp(12px, 3vw, 28px); }

.card {
  background: linear-gradient(165deg, rgba(52, 30, 16, 0.60), rgba(18, 9, 5, 0.78));
  border: 1px solid var(--kc-gold-line-soft);
  border-radius: 14px;
}
.card:hover:not(.selected):not(.locked) {
  border-color: rgba(216, 168, 78, 0.7);
  transform: translateY(-2px);
}
.card.selected {
  border-color: var(--kc-gold-hi);
  background: linear-gradient(165deg, rgba(92, 52, 20, 0.55), rgba(30, 15, 7, 0.82));
}
.card h3 { letter-spacing: 2.5px; }
.card p { color: var(--kc-cream-dim); }

.portrait {
  border: 1px solid rgba(255, 217, 142, 0.45);
  border-radius: 8px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5);
}

.vs-badge {
  font-size: clamp(26px, 5vw, 40px);
  color: var(--kc-gold-mid);
  text-shadow: 0 3px 0 #2b0d00, 0 0 24px rgba(255, 140, 0, 0.55);
}

/* P1 = gold chip, P2 = teal chip */
.pick-badge {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  padding: 3px 9px 2px;
  border-radius: 5px;
  color: var(--kc-ink);
  background: linear-gradient(180deg, #ffd166, #d98a12);
  border: 1px solid rgba(255, 240, 200, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.card.picked-p2 .pick-badge {
  color: #e6fffa;
  background: linear-gradient(180deg, #14b8a6, var(--kc-teal));
  border-color: rgba(153, 246, 228, 0.55);
}

.select-hint {
  color: var(--kc-cream-dim);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ============================================================================
   6 · TITLE / STATUS DETAILS — load note
   ============================================================================ */

.load-note {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 4px;
  color: #ffb84d;
  text-transform: uppercase;
}
.load-note.done { color: #8be0b0; }

/* ============================================================================
   7 · VS SPLASH — scrim + names sliding in from the sides
   (container keeps the inline vsSplash timing; JS only toggles .hidden)
   ============================================================================ */

#vs-splash {
  background:
    radial-gradient(ellipse 90% 100% at 50% 50%,
      rgba(46, 18, 70, 0.55) 0%, rgba(8, 4, 13, 0.93) 70%),
    linear-gradient(90deg, rgba(6, 3, 10, 0.95), rgba(40, 16, 62, 0.55) 50%, rgba(6, 3, 10, 0.95));
}
.vs-name {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 10vw, 92px);
  letter-spacing: 5px;
  line-height: 0.95;
  color: transparent;
  background: linear-gradient(180deg, #fff7d6 0%, #ffbb33 52%, #c83e00 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 #2b0d00) drop-shadow(0 0 26px rgba(255, 120, 0, 0.55));
}
#vs-name-p1 { animation: kcVsSlideL 0.5s cubic-bezier(0.16, 1.1, 0.3, 1) 0.08s backwards; }
#vs-name-p2 { animation: kcVsSlideR 0.5s cubic-bezier(0.16, 1.1, 0.3, 1) 0.08s backwards; }
.vs-mark {
  font-family: 'Bebas Neue', sans-serif;
  font-style: italic;
  font-size: clamp(24px, 5.5vw, 52px);
  color: #fff3b0;
  text-shadow: 0 3px 0 #7a1c00, 0 0 26px rgba(255, 120, 0, 0.8);
  animation: kcVsPop 0.34s cubic-bezier(0.2, 1.6, 0.4, 1) 0.34s backwards;
}
@keyframes kcVsSlideL {
  from { transform: translateX(-72vw); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes kcVsSlideR {
  from { transform: translateX(72vw);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes kcVsPop {
  from { transform: scale(0);   opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ============================================================================
   8 · END SCREEN — winner pulse + italic quote
   ============================================================================ */

#end-winner {
  animation: kcWinnerPulse 2.4s ease-in-out infinite;
}
@keyframes kcWinnerPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 5px 0 #3d0e00) drop-shadow(0 0 22px rgba(255, 120, 0, 0.5));
  }
  50% {
    transform: scale(1.02);
    filter: drop-shadow(0 5px 0 #3d0e00) drop-shadow(0 0 46px rgba(255, 150, 20, 0.9));
  }
}
#end-quote {
  font-style: italic;
  font-weight: 300;
  color: #e9d9ba;
  letter-spacing: 0.6px;
}

/* ============================================================================
   9 · ROTATE GATE — pure Akofena: near-black, thin gold phone, condensed caps
   ============================================================================ */

#rotate-overlay {
  background:
    radial-gradient(ellipse 120% 70% at 50% 30%, rgba(40, 22, 8, 0.35), rgba(0, 0, 0, 0) 60%),
    #060409;
  gap: 0;
  padding: 24px;
}
/* line-drawn gold phone (hides the ↻ text glyph, draws the outline) */
#rotate-overlay .rotate-phone {
  order: 0;
  font-size: 0;                 /* glyph hidden — the box is the icon */
  width: 58px;
  height: 98px;
  border: 3px solid var(--kc-gold-mid);
  border-radius: 13px;
  position: relative;
  margin-bottom: 30px;
  box-shadow: 0 0 22px rgba(255, 190, 60, 0.22), inset 0 0 10px rgba(255, 190, 60, 0.08);
  animation: kcPhoneTilt 2.6s ease-in-out infinite;
}
#rotate-overlay .rotate-phone::before {
  /* little rotate arrow riding the phone's top corner */
  content: '\21BB';
  position: absolute;
  top: -21px;
  right: -26px;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  color: var(--kc-gold-mid);
  text-shadow: 0 0 10px rgba(255, 190, 60, 0.5);
}
#rotate-overlay .rotate-phone::after {
  /* home indicator */
  content: '';
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--kc-gold-mid);
}
@keyframes kcPhoneTilt {
  0%, 55%, 100% { transform: rotate(0deg); }
  70%, 85%      { transform: rotate(-72deg); }
}
/* the big condensed yellow message — “Turn your phone sideways to play” */
#rotate-overlay .sub-lore {
  order: 1;
  max-width: 88vw;
  margin: 0;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: clamp(24px, 7.2vw, 30px);
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 1.12;
  color: #ffc93c;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
/* muted subline — “KINGDOMS CLASH plays in landscape” */
#rotate-overlay .crest {
  order: 2;
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 3px;
  color: #b9b2a7;
  font-weight: 300;
  text-shadow: none;
}
#rotate-overlay .crest::after {
  content: ' plays in landscape';
  text-transform: none;
  letter-spacing: 1px;
  color: #8d877d;
}

/* ============================================================================
   10 · MOVE LIST MODAL — frosted scroll, thin gold frame, kbd inputs
   ============================================================================ */

#movelist-modal {
  background: rgba(6, 3, 9, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.movelist-dialog {
  max-height: 80dvh;
  background: linear-gradient(165deg, rgba(34, 19, 9, 0.78), rgba(12, 6, 3, 0.88));
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--kc-gold-line);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 225, 160, 0.14);
}
.movelist-header {
  border-bottom: 1px solid var(--kc-gold-line-soft);
  padding-bottom: 9px;
}
.movelist-title {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 3.4vw, 27px);
  letter-spacing: 3px;
  color: var(--kc-gold-mid);
}
.movelist-close {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 0 14px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--kc-gold-line);
  background: rgba(28, 15, 8, 0.7);
  color: #f0d9a8;
}
.movelist-close:hover { border-color: var(--kc-gold-hi); color: var(--kc-gold-hi); }

.movelist-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 168, 78, 0.4) transparent;
}
.movelist-card {
  background: rgba(255, 240, 210, 0.045);
  border: 1px solid var(--kc-gold-line-soft);
  border-radius: 10px;
}
.movelist-card h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--kc-gold-mid);
}
.movelist-archetype {
  color: #d3b8f4;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 10px;
}
.move-item { border-top-color: rgba(255, 230, 180, 0.09); }
.move-cost { color: #fbbf24; }
/* kbd chip for the input string */
.move-input {
  display: inline-block;
  margin-top: 3px;
  font-family: 'Oswald', ui-sans-serif, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #f6d492;
  background: rgba(28, 14, 8, 0.7);
  border: 1px solid rgba(255, 217, 142, 0.45);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 8px;
}
.move-desc { color: #d8c8e8; }

/* ============================================================================
   11 · KEYCAP HINT (desktop footer, mirrors Akofena's bottom-right key legend)
   ============================================================================ */

.kb-hint {
  left: auto;
  right: 14px;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(236, 220, 188, 0.6);
}
.kb-hint kbd {
  font-weight: 600;
  color: #f6d492;
  border: 1px solid rgba(255, 217, 142, 0.55);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  background: rgba(24, 12, 6, 0.72);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   12 · QA PANEL — functional, lightly re-skinned to the glass/gold theme
   ============================================================================ */

#qa-panel {
  background: rgba(18, 10, 6, 0.90);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--kc-gold-line);
  border-radius: 10px;
  color: #ecdcbc;
  font-family: 'Oswald', ui-sans-serif, sans-serif;
}
.qa-head {
  color: var(--kc-gold-mid);
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 2.5px;
}
.qa-row label { color: var(--kc-cream-dim); letter-spacing: 0.4px; }
.qa-btn, .qa-select, .qa-range {
  background: rgba(30, 17, 9, 0.8);
  color: #ecdcbc;
  border: 1px solid var(--kc-gold-line-soft);
  border-radius: 5px;
  font-family: 'Oswald', sans-serif;
}
.qa-btn { font-weight: 600; letter-spacing: 0.3px; }
.qa-btn:hover { border-color: var(--kc-gold-line); }
.qa-btn.active {
  border-color: var(--kc-gold-mid);
  background: linear-gradient(180deg, #ffd166, #d98a12);
  color: var(--kc-ink);
}
.qa-readout {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(216, 168, 78, 0.25);
  color: #d9c9a8;
}
#qa-panel select, #qa-panel option { color-scheme: dark; }

/* ============================================================================
   12B · BATTLEFIELD SELECT — painted stage chips
   ============================================================================ */

.stage-row { margin: 4px auto 10px; max-width: 720px; }
.stage-row.hidden { display: none; }
.stage-row-title {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: rgba(240, 214, 150, 0.7);
  text-align: center;
  margin-bottom: 6px;
}
.stage-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.stage-chip {
  position: relative;
  width: 92px;
  padding: 0 0 18px;
  border: 1px solid rgba(216, 168, 78, 0.28);
  border-radius: 8px;
  background: rgba(12, 8, 18, 0.55);
  overflow: hidden;
  cursor: pointer;
  color: #e8d9b0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.stage-chip img,
.stage-chip-random {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.stage-chip-random {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 26px;
  line-height: 52px;
  text-align: center;
  color: #f6c453;
  background:
    radial-gradient(circle at 50% 40%, rgba(246, 196, 83, 0.18), transparent 70%),
    rgba(20, 12, 24, 0.8);
}
.stage-chip-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-align: center;
  padding: 2px 2px 3px;
  background: rgba(8, 4, 12, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-chip:hover { border-color: rgba(246, 196, 83, 0.7); transform: translateY(-1px); }
.stage-chip.selected {
  border-color: #f6c453;
  box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.5), 0 4px 18px rgba(246, 180, 71, 0.22);
}
.stage-chip.selected .stage-chip-name { color: #ffd98e; }

/* ============================================================================
   13 · SHORT-LANDSCAPE SAFETY + REDUCED MOTION
   ============================================================================ */

@media (max-height: 460px) {
  .overlay-screen { padding-top: 8px; padding-bottom: 8px; }
  .overlay-screen > .crest { padding-top: 12px; }
  .overlay-screen > :last-child:not(.screen-art):not(.menu-panel) { padding-bottom: 12px; }
  .main-title { font-size: clamp(30px, 13vh, 64px); }
  .menu-panel { padding-top: 12px; padding-bottom: 12px; max-height: calc(100dvh - 16px); }
  .sub-lore { margin-bottom: 10px; }
  .vs-cards { margin-bottom: 8px; }
  .card { padding: 8px 14px; }
  .portrait { width: clamp(64px, 24vh, 104px); height: clamp(64px, 24vh, 104px); }
  .select-hint { margin-bottom: 8px; }
  .mode-card { padding: 10px 16px; }
  .mode-row { margin-bottom: 8px; }
  .stage-row { margin-top: 0; margin-bottom: 4px; }
  .stage-row-title { font-size: 10px; margin-bottom: 3px; }
  .stage-chip { width: 64px; padding-bottom: 13px; }
  .stage-chip-name { font-size: 7px; }
  .stage-chip-random { font-size: 20px; line-height: 36px; }
  #difficulty-row, #net-row { margin-bottom: 8px; }
  .cta-btn { padding: 10px 26px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-art { animation: none; }
  #vs-name-p1, #vs-name-p2, .vs-mark { animation: none; }
  #end-winner { animation: none; }
  #rotate-overlay .rotate-phone { animation: none; }
}