:root { color-scheme: dark; --ink: #10171c; --paper: #f2e5cd; --muted: #a4b0ac; --gold: #d6ab69; --coral: #f27355; --cyan: #72cddd; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #090f13; color: var(--paper); font-family: 'Helvetica Neue', Arial, sans-serif; }
body { height: 100dvh; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
#wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
#stagebox { position: relative; line-height: 0; container-type: inline-size; flex-shrink: 0; box-shadow: 0 20px 90px #0009; border: 1px solid #57615755; }
#game { display: block; background: var(--ink); image-rendering: auto; }
#titlecard { position: absolute; inset: 0; line-height: 1.2; overflow: auto; }
#titlecard.hidden { display: none; }
.masthead { position: absolute; top: 0; left: 0; right: 0; height: 8.5cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 5cqw; font-size: 1.02cqw; font-weight: 700; letter-spacing: .18em; }
.brand-mark { color: var(--paper); }.brand-mark > span { color: var(--gold); margin: 0 .8em; }.edition { color: #ded6be; font-size: .85cqw; }
.main-layout { height: 100%; }
.cover-copy { position: absolute; top: 11cqw; left: 5cqw; width: 41cqw; }
.eyebrow { display: flex; align-items: center; gap: .8em; font-size: .95cqw; font-weight: 800; letter-spacing: .17em; color: var(--gold); }
.eyebrow > span { width: 1.8em; height: 2px; background: var(--coral); }
h1 { position: relative; margin: 1.4cqw 0 1.8cqw; font-family: Impact, 'Arial Narrow', sans-serif; font-size: 8cqw; line-height: .87; font-weight: 900; letter-spacing: -.025em; transform: skew(-5deg); transform-origin: left; }
h1 > span { display: block; }h1 i { position: absolute; color: var(--coral); font-style: normal; bottom: 0; }
.intro { font-size: 1.4cqw; color: #bfc6bb; line-height: 1.55; margin: 0 0 2.3cqw; }
.main-actions { display: grid; gap: 1cqw; width: 31cqw; }
#titlecard button, #pausemenu button { border: 1px solid #f2e5cd45; background: #17232a; color: var(--paper); padding: 1.35cqw 1.6cqw; font-size: 1.35cqw; font-weight: 800; letter-spacing: .1em; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; transition: background .15s, color .15s, border-color .15s; }
#titlecard button.primary, #pausemenu button.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 3px 3px 0 var(--coral); }
#titlecard button:hover, #pausemenu button:hover { background: #344348; border-color: var(--gold); }
#titlecard button.primary:hover, #pausemenu button.primary:hover { background: #fff5e3; }
#titlecard button:focus-visible, #pausemenu button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
#titlecard button small { display: block; font-weight: 500; font-size: 1cqw; letter-spacing: 0; margin-top: .5cqw; color: #4d5755; }
button b { font-size: 1.8cqw; font-weight: 500; }
.local-note { font-size: .8cqw; font-weight: 600; letter-spacing: .13em; color: #99a9a2; margin-top: 1.7cqw; }.local-note span { color: var(--gold); margin-right: .6em; }
.cast-caption { position: absolute; bottom: 6.2cqw; right: 4cqw; text-align: right; text-shadow: 0 2px 4px #10171c; }.cast-caption span { display: block; font-size: .75cqw; letter-spacing: .25em; color: var(--gold); margin-bottom: .5cqw; }.cast-caption b { font-size: 1.3cqw; line-height: 1.3; letter-spacing: .035em; }
.menu-footer { position: absolute; bottom: 0; left: 5cqw; right: 5cqw; min-height: 4.5cqw; border-top: 1px solid #f2e5cd2c; display: flex; align-items: center; justify-content: space-between; font-size: .8cqw; letter-spacing: .1em; color: #a4b0ac; }.menu-footer i { display: inline-block; height: .8em; margin: 0 1.3em; border-left: 1px solid #758580; }.menu-footer a { text-decoration: none; color: var(--paper); padding: .7cqw 0; }.menu-footer a:hover { color: var(--gold); }.menu-footer a span { margin-left: 1em; }
#titlecard:not([data-menu='main']) { background: #0c151bec; backdrop-filter: blur(7px); }
.panel { position: relative; margin: 9.5cqw auto 6cqw; width: 76cqw; padding: 2.5cqw 3cqw; background: #17232beb; border: 1px solid #b7b69542; }
.panel h2, .pause-panel h2 { font-family: Impact, 'Arial Narrow', sans-serif; font-weight: 900; font-size: 4.2cqw; line-height: 1; margin: 1cqw 0; letter-spacing: .025em; }.panel h2 span, .pause-panel h2 span { color: var(--coral); }
.panel p { font-size: 1.25cqw; line-height: 1.5; color: #b5c0bb; margin: .8cqw 0; }
.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; margin: 2cqw 0 1.5cqw; }.device { border: 1px solid #f2735544; border-top: 3px solid var(--coral); padding: 1.7cqw; font-size: 1.15cqw; line-height: 1.6; color: #adbcb6; background: #10191fa6; }.device:nth-child(2) { border-color: #72cddd44; border-top-color: var(--cyan); }.device strong { display: block; color: var(--coral); font-size: 1.2cqw; letter-spacing: .13em; margin-bottom: .7cqw; }.device:nth-child(2) strong { color: var(--cyan); }
.panel-actions { display: flex; gap: 1.4cqw; margin-top: 2cqw; }.panel-actions .primary { flex: 1; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 2cqw; margin: 2cqw 0; }.control-grid section { border-top: 1px solid #b7b69542; padding-top: 1cqw; }.control-grid h3 { font-size: 1.1cqw; letter-spacing: .1em; color: var(--coral); margin: 0 0 1cqw; }.control-grid section:nth-child(2) h3 { color: var(--cyan); }.control-grid section:nth-child(3) h3 { color: var(--gold); }.control-grid b { color: var(--paper); }.panel .control-rule { font-size: 1.15cqw; }.panel .back-menu { margin-top: 1.5cqw; }
#pausemenu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #081015d9; backdrop-filter: blur(6px); line-height: 1.2; padding: 2cqw; }
.pause-panel { display: grid; gap: 1cqw; width: 32cqw; padding: 2.5cqw; border: 1px solid #d6ab6955; background: #121e25f2; }.pause-panel h2 { font-size: 4.9cqw; margin: .3cqw 0 1.2cqw; }.pause-panel .eyebrow { font-size: .82cqw; }.pause-hint { font-size: .8cqw; line-height: 1.7; color: var(--muted); text-align: center; margin: 1cqw 0 0; }
#legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 32px; font-size: 10px; color: #91a09e; line-height: 1.8; }#legend h2 { margin: 0 0 1px; font-size: 9px; letter-spacing: .15em; color: var(--gold); }#legend .p1 { color: var(--coral); }#legend .p2 { color: var(--cyan); }#legend kbd { font-family: inherit; color: #d0d8d0; }
@media (max-height: 540px) { #wrap { padding: 4px; gap: 0; } #legend { display: none; } }
@media (max-width: 600px) and (orientation: portrait) { #wrap { padding: 4px; } #legend { gap: 8px 20px; font-size: 9px; padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
.move-viewer { display: flex; flex-direction: column; width: 91cqw; height: 50cqw; max-height: 100%; padding: 1.8cqw 2.2cqw; background: #121e25fa; border: 1px solid #d6ab6966; }
.move-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; flex-shrink: 0; }.move-viewer-header h2 { font-family: Impact, 'Arial Narrow', sans-serif; font-size: 3.4cqw; letter-spacing: .035em; margin: .4cqw 0 1cqw; }.move-viewer-header .eyebrow { font-size: .8cqw; }#pausemenu #moves-back { padding: .9cqw 1.2cqw; font-size: 1cqw; }
.move-player-tabs { display: flex; gap: 1cqw; margin-bottom: 1cqw; flex-shrink: 0; }#pausemenu .move-player-tab { flex: 1; padding: 1cqw 1.4cqw; font-size: 1.2cqw; border-color: #526362; }#pausemenu .move-player-tab[aria-selected='true'] { border-color: var(--coral); background: #f273551c; color: var(--coral); }#pausemenu .move-player-tab:nth-child(2)[aria-selected='true'] { border-color: var(--cyan); color: var(--cyan); background: #72cddd1c; }
.move-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; padding: .2cqw 1cqw .8cqw .2cqw; scrollbar-color: #8d977f #17242b; scrollbar-width: thin; }.move-scroll:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }.move-fighter-heading { display: flex; align-items: baseline; gap: 1.5cqw; flex-wrap: wrap; }.move-fighter-heading h3 { font-size: 2.4cqw; margin: .5cqw 0; font-weight: 900; }.move-fighter-heading p { font-size: .9cqw; letter-spacing: .09em; color: var(--gold); margin: 0; }.move-notation { font-size: 1.05cqw; line-height: 1.5; color: #adbbb7; margin: .3cqw 0 1.5cqw; }
.move-reference-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 2cqw; }.move-section h4, .move-section h3 { font-size: 1.1cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 1cqw; padding-top: 1cqw; border-top: 1px solid #d6ab6938; }.move-list { display: grid; gap: .8cqw; }.move-row { padding: 1cqw 1.2cqw; background: #f2e5cd06; border-left: 2px solid #d6ab6977; }.move-name { font-size: 1.2cqw; font-weight: 700; }.move-command { margin: .45cqw 0; display: flex; align-items: center; gap: .7cqw; flex-wrap: wrap; font-size: 1.1cqw; color: var(--paper); }.motion-glyphs { font-size: 1.75cqw; letter-spacing: .03em; }.move-command code { font-size: .9cqw; color: #a5b2aa; }.move-buttons { font-size: 1.1cqw; color: var(--cyan); font-weight: 700; }.move-detail { font-size: .95cqw; line-height: 1.5; color: #a8b7b1; }
.normal-table { border-collapse: collapse; width: 100%; text-align: left; font-size: .98cqw; line-height: 1.5; }.normal-table th { font-size: .86cqw; color: #a7b6b0; font-weight: 600; }.normal-table td, .normal-table th { padding: .65cqw .45cqw; border-bottom: 1px solid #e8e0c614; }.normal-table tbody th, .normal-table td:first-child { color: var(--cyan); font-weight: 700; }.move-utility { font-size: 1cqw; line-height: 1.6; color: #c4ccc1; margin: 1cqw 0; }.move-utility p { margin: .4cqw 0; }
.move-controls { margin-top: 1.5cqw; }.move-control-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7cqw; }.move-control { padding: .8cqw; background: #d6ab690c; border: 1px solid #d6ab6925; display: flex; flex-direction: column; gap: .35cqw; font-size: 1.1cqw; }.move-control b { color: var(--cyan); }.move-control small { font-size: .9cqw; color: #a9b5af; }.move-direction-controls { color: #adbab4; font-size: 1cqw; line-height: 1.5; margin: 1cqw 0; }.move-viewer-footer { font-size: .85cqw; line-height: 1.5; color: #a6b5ae; border-top: 1px solid #d6ab6933; padding-top: .8cqw; margin-top: .5cqw; flex-shrink: 0; }
#stagebox { width: min(960px, calc(100vw - 24px)); }
.move-list { list-style: none; margin: 0 0 1.4cqw; padding: 0; }
h1 i { position: static; }
.panel-actions .back-menu { margin-top: 0; }
.cover-copy { top: 8.5cqw; }
h1 { font-size: 6.4cqw; margin: 1cqw 0; }
.intro { margin-bottom: 1.5cqw; font-size: 1.3cqw; }
.main-actions { gap: .65cqw; width: 33cqw; }
#titlecard .main-actions button { padding: .95cqw 1.4cqw; font-size: 1.2cqw; }
.local-note { margin-top: 1cqw; }
#titlecard .menu-footer button { border: 0; background: transparent; padding: .8cqw; font-size: .85cqw; color: var(--muted); }
#titlecard .menu-footer button:hover { color: var(--paper); }
#game:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#arcade-hud { position: absolute; left: 40%; right: 40%; bottom: 1.5%; pointer-events: none; display: grid; text-align: center; gap: .15cqw; font-size: 1.05cqw; line-height: 1.3; letter-spacing: .06em; background: #10171ce8; border: 1px solid #d6ab6940; padding: .4cqw .6cqw; color: var(--gold); }
#arcade-hud strong { color: var(--paper); font-variant-numeric: tabular-nums; }
.arcade-panel { margin-top: 8cqw; padding: 2cqw 3cqw; }
.arcade-total { display: block; font: 900 3.6cqw Impact, 'Arial Narrow', sans-serif; letter-spacing: .04em; color: var(--gold); margin: 1.5cqw 0; }
.arcade-ladder { padding: 0; margin: 1.5cqw 0; list-style: none; display: grid; gap: .6cqw; grid-template-columns: 1fr 1fr; }
.arcade-ladder li { border-left: 2px solid #526362; padding: .6cqw 1cqw; font-size: 1.2cqw; color: var(--muted); }
.arcade-ladder .defeated { color: #81978d; }.arcade-ladder .next-rival { color: var(--paper); border-color: var(--coral); }
.initials-label { display: block; color: var(--gold); font-size: 1cqw; font-weight: 800; letter-spacing: .1em; margin: 1cqw 0; }
.initials-input { display: block; border: 1px solid var(--gold); background: #0c151b; color: var(--paper); font: 900 4.5cqw monospace; letter-spacing: .35em; width: 5em; padding: .15em .2em .15em .55em; text-align: center; text-transform: uppercase; border-radius: 0; }
.initials-input:focus { outline: 2px solid var(--coral); outline-offset: 3px; }
.arcade-panel .initials-help, .arcade-panel .initials-error { font-size: 1cqw; }
.arcade-panel .initials-error { color: var(--coral); min-height: 1em; }
#menu-arcade-result { width: 70cqw; }
#menu-arcade-result .arcade-total { margin: 1cqw 0; }
#menu-arcade-result .panel-actions { margin-top: 1cqw; }
#menu-arcade-result h2 { font-size: 3.8cqw; }
.leaderboard-table { width: 100%; border-collapse: collapse; margin: 1.4cqw 0; font-size: 1.2cqw; font-variant-numeric: tabular-nums; }
.leaderboard-table th { font-size: .85cqw; color: var(--muted); letter-spacing: .12em; text-align: left; }
.leaderboard-table td, .leaderboard-table th { padding: .6cqw .7cqw; border-bottom: 1px solid #f2e5cd19; }
.leaderboard-table td:nth-child(2) { font-family: monospace; letter-spacing: .16em; font-weight: 800; color: var(--gold); }
.leaderboard-table .new-record { background: #d6ab691a; color: var(--paper); }
.browser-notice { position: fixed; inset: auto 0 0; background: var(--ink); padding: 16px; text-align: center; }
@media (max-width: 700px) and (orientation: portrait) {
  #titlecard { position: fixed; z-index: 5; background: #10171cf8; }
  #titlecard .masthead { position: relative; height: 58px; padding: 0 24px; font-size: 10px; }.edition { font-size: 9px; }
  .cover-copy { position: relative; top: auto; left: auto; width: auto; margin: 28px 24px 90px; }
  .cover-copy .eyebrow { font-size: 10px; }h1 { font-size: 72px; margin: 20px 0; }
  .intro { font-size: 15px; margin-bottom: 24px; }.main-actions { width: 100%; gap: 10px; }
  #titlecard .main-actions button, #titlecard .panel button { font-size: 13px; padding: 14px 16px; }
  #titlecard button small { font-size: 11px; margin-top: 6px; }button b { font-size: 18px; }
  .local-note { font-size: 10px; margin-top: 20px; }.cast-caption { display: none; }
  #titlecard .menu-footer { position: fixed; bottom: 0; left: 16px; right: 16px; min-height: 52px; background: var(--ink); font-size: 8px; }
  #titlecard .menu-footer button { padding: 12px 4px; font-size: 9px; }
  #titlecard .panel { margin: 8px 16px 80px; width: auto; padding: 20px; }
  .panel .eyebrow { font-size: 9px; }.panel h2, #menu-arcade-result h2 { font-size: 32px; margin: 12px 0; }
  .panel p, .panel .control-rule, .arcade-panel .initials-help, .arcade-panel .initials-error { font-size: 12px; }
  .arcade-total { font-size: 32px; margin: 18px 0; }.initials-label { font-size: 10px; margin: 14px 0; }.initials-input { font-size: 40px; }
  .leaderboard-table { font-size: 11px; }.leaderboard-table th { font-size: 8px; }.leaderboard-table td, .leaderboard-table th { padding: 9px 3px; }
  .panel-actions { gap: 10px; margin-top: 16px; }.arcade-ladder { grid-template-columns: 1fr; gap: 8px; }.arcade-ladder li { font-size: 13px; padding: 8px; }
  .control-grid { grid-template-columns: 1fr; gap: 12px; }.control-grid h3 { font-size: 12px; }.device, .device strong { font-size: 12px; padding: 10px; }
}
/* Reference pages stay readable on small screens, independently of game scale. */
@media (max-width: 700px), (max-height: 460px) {
  #pausemenu.showing-moves { position: fixed; inset: 0; z-index: 10; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .move-viewer { width: 100%; height: 100%; padding: 12px 16px; }
  .move-viewer-header h2 { font-size: 28px; margin: 0 0 8px; }.move-viewer-header .eyebrow { font-size: 9px; margin: 0 0 3px; }
  #pausemenu #moves-back { padding: 10px; font-size: 10px; }#pausemenu .move-player-tab { padding: 10px 12px; font-size: 12px; }
  .move-player-tabs { gap: 8px; margin-bottom: 8px; }.move-fighter-heading { gap: 12px; }.move-fighter-heading h3 { font-size: 22px; }.move-fighter-heading p { font-size: 10px; }
  .move-notation, .move-detail, .move-direction-controls { font-size: 12px; }.move-notation { margin: 4px 0 14px; }
  .move-section h4 { font-size: 12px; padding-top: 10px; margin-bottom: 10px; }.move-reference-grid { gap: 20px; }.move-list { gap: 8px; margin-bottom: 14px; }.move-row { padding: 10px; }.move-name { font-size: 13px; }.move-command { font-size: 12px; gap: 8px; margin: 5px 0; }.motion-glyphs { font-size: 20px; }.move-command code { font-size: 10px; }.move-buttons { font-size: 12px; }
  .normal-table { font-size: 11px; }.normal-table th { font-size: 10px; }.normal-table td, .normal-table th { padding: 7px 5px; }.move-utility { margin: 12px 0; }.move-controls { margin-top: 16px; }.move-control { padding: 8px; font-size: 12px; gap: 5px; }.move-control small { font-size: 10px; }.move-control-grid { gap: 8px; }.move-viewer-footer { font-size: 10px; padding-top: 6px; margin: 6px 0 0; }
}
@media (max-width: 540px) {
  .move-reference-grid { grid-template-columns: 1fr; gap: 0; }.move-control-grid { grid-template-columns: repeat(3, 1fr); }
}