:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #edf0e9;
  background: #101714;
  font-synthesis: none;
  --lime: #caff55;
  --muted: #96a19a;
  --line: #303a33;
  --display: Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; transition: background .18s, border-color .18s; }
button:disabled { cursor: wait; opacity: .55; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
[hidden], .view[hidden], dialog:not([open]) { display: none !important; }
.sr-only, .menu-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-shell { height: 100vh; height: 100dvh; display: grid; grid-template-rows: 64px minmax(0, 1fr); padding: 0 20px 16px; }
.header { display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 9px; font: 900 28px var(--display); letter-spacing: -1px; }
.brand-dot { color: var(--lime); }
.brand-ball { width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: #17220e; display: grid; place-items: center; font: 29px Arial; transform: rotate(-12deg); }
.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.text-button, .icon-button { border: 0; background: transparent; }
.text-button { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c2cac4; }
.text-button:hover, .practice-button:hover { color: var(--lime); }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#score-button { display: none; }
main { min-height: 0; }
.game-layout { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 340px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.arena-panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #111b17 radial-gradient(ellipse at 50% 40%, #1b2b2050, transparent 65%); isolation: isolate; }
.arena-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.arena-top { position: absolute; z-index: 2; top: 22px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.arena-label { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 1px; font-weight: 700; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); display: inline-block; flex-shrink: 0; }
.arena-number { color: #758278; }
.arena-mode { color: #879389; font-size: 9px; letter-spacing: 1px; }
.arena-bottom { position: absolute; bottom: 22px; left: 24px; right: 24px; display: flex; align-items: center; gap: 14px; color: #9daa9f; font-size: 12px; pointer-events: none; }
.preview-tag { padding: 6px 8px; border: 1px solid #455642; border-radius: 4px; font-size: 9px; color: #c5d6c5; }
.arena-coordinate { margin-left: auto; font: 22px var(--display); }
.side-panel { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px; background: #18201b; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.view { width: 100%; margin-block: auto; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #b5c3b5; }
h1, h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; }
h2 { font-size: 42px; line-height: 1.03; margin: 16px 0; }
h1 span, h2 span { color: var(--lime); }
.intro { font-size: 13px; line-height: 1.6; color: #aab6ac; margin: 0 0 18px; }
.field-label { display: block; color: #b9c7b4; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.input-wrap { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px; margin: 7px 0 12px; border: 1px solid #3b483c; border-radius: 7px; background: #111a14; }
.input-wrap > span:first-child { color: #859180; font-size: 22px; }
input { min-width: 0; width: 100%; flex: 1; background: transparent; border: 0; color: #eef3e8; font-size: 16px; }
.input-wrap:focus-within { border-color: var(--lime); }
.input-counter { font-size: 10px; color: #869581; }
.primary-button, .secondary-button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; font-weight: 700; }
.primary-button { padding: 12px 16px; justify-content: space-between; border: 1px solid var(--lime); background: var(--lime); color: #152012; font: 21px var(--display); letter-spacing: .5px; box-shadow: 0 3px 0 #789731; }
.primary-button:hover { background: #daff8a; }
.primary-button > span:last-child { font: 26px/1 Arial; }
.primary-button #play-label { font: 28px/1 var(--display); }
.play-button { min-height: 58px; }
.secondary-button { margin-top: 10px; border: 1px solid #45513f; background: transparent; font-size: 13px; }
.secondary-button:hover { background: #253021; border-color: #899970; }
.secondary-button svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mode-options .secondary-button { margin: 0; }
.practice-button { display: block; border: 0; background: transparent; color: #acbba4; padding: 8px 4px; margin: 10px auto 0; font-size: 12px; min-height: 36px; }
.menu-links { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; }
.menu-links .practice-button { margin: 0; min-height: 44px; }
.menu-links small { display: block; margin-top: 2px; color: #8d9c85; font-size: 9px; }
.control-note { text-align: center; font-size: 11px; color: #82927d; margin: 12px 0 0; }
.save-status { color: #97aa8d; font-size: 11px; line-height: 1.5; text-align: center; margin-top: 6px; }
.save-status.pending { padding: 8px; background: #493b24; color: #ffe5a4; border-radius: 8px; }
#google-nudge { color: #dfff9e; margin-top: 4px; }
.journey-card { padding: 14px; margin: 16px 0; border: 1px solid #52644366; border-radius: 10px; background: #1a251bb3; }
.journey-card h3 { font-size: 17px; margin: 10px 0 5px; color: #edf7de; }
.journey-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #cae691; font-size: 11px; font-weight: 700; }
.xp-track { height: 5px; overflow: hidden; border-radius: 8px; background: #35422e; margin: 8px 0 10px; }
.xp-track span { display: block; height: 100%; background: var(--lime); transition: width .6s ease; }
.menu-progress { padding: 12px 0; margin: 9px 0 12px; border: 0; border-radius: 0; background: none; }
.menu-progress .journey-meta { font-size: 9px; }
.menu-progress .journey-meta > span:last-child { white-space: nowrap; }
.menu-progress .xp-track { margin: 8px 0; height: 3px; }
.current-chapter { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 11px; color: #bdc9b6; }
.current-chapter strong { font-weight: 400; }
.current-chapter > span { white-space: nowrap; color: #92a187; font-size: 10px; }
.objective { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 10px 0; font-size: 12px; line-height: 1.4; color: #b7c3ad; }
.objective.done { color: #d4ff88; }
.objective progress { grid-column: 1/-1; width: 100%; height: 4px; accent-color: var(--lime); border: 0; }
.objective small { white-space: nowrap; }
.next-reward { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #d5e8b5; }
.match-hud { position: absolute; z-index: 2; top: 59px; left: 24px; right: 24px; display: flex; justify-content: space-between; pointer-events: none; }
.hud-chip { height: 36px; display: flex; align-items: center; gap: 7px; background: #15200fd9; border: 1px solid #435637; border-radius: 6px; padding: 0 12px; color: #b8c6ae; font-size: 12px; }
.hud-chip strong { color: #e7f0dd; font-size: 16px; }
.hud-icon { color: var(--lime); }
.timer { min-width: 72px; justify-content: center; font-variant-numeric: tabular-nums; }
.phase-banner { position: absolute; top: 110px; left: 0; right: 0; pointer-events: none; text-align: center; }
.phase-banner > span { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--lime); }
.phase-banner small { display: block; font-size: 10px; color: #92a489; margin-top: 5px; }
.phase-banner.danger > span, .wave-notice { color: #ffba86 !important; }
.center-overlay { position: absolute; inset: 0; background: #10181088; backdrop-filter: blur(6px); z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.center-overlay > span { font-size: 12px; letter-spacing: 3px; color: #d4e3c8; }
.center-overlay strong { font: 130px/1 var(--display); color: var(--lime); text-shadow: 0 0 50px #caff5530; }
.center-overlay small { font-size: 12px; color: #a3b398; }
.spectator-banner { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; background: #16200fe8; border: 1px solid #57733d; padding: 12px; border-radius: 7px; font-size: 12px; text-align: center; }
.member-list { margin: 18px 0; max-height: min(18dvh, 160px); overflow: auto; }
#start-button { position: sticky; bottom: 0; z-index: 1; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #34402e; font-size: 13px; }
.member-row small { margin-left: auto; font-size: 9px; color: #a0b58b; }
.member-row > span:first-child, .leader-dot { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color); }
.small-note, .local-note { color: #9aaa91; font-size: 11px; line-height: 1.6; }
.local-note { padding: 10px; background: #263322; border-radius: 6px; }
#lobby-view h2 { font-size: 32px; }
#playing-view .intro { margin: 10px 0; }
.stat-pair { display: flex; border: 1px solid #3a4732; border-radius: 7px; padding: 12px; margin: 18px 0; }
.stat-pair > div { width: 50%; padding: 0 6px; }
.stat-pair > div + div { border-left: 1px solid #405137; padding-left: 18px; }
.stat-pair span { display: block; font-size: 9px; color: #96a588; letter-spacing: .5px; }
.stat-pair strong { display: block; margin-top: 6px; font: 30px var(--display); color: var(--lime); }
.leaderboard-title { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .7px; color: #99a58e; margin-bottom: 6px; }
.leaderboard-title span:last-child { color: #91a083; }
.leaderboard { list-style: none; padding: 0; margin: 0; }
.leaderboard li { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid #2d3a26; }
.leaderboard li.you { color: var(--lime); }
.leaderboard li.dead { opacity: .4; text-decoration: line-through; }
.leaderboard .rank { font-size: 10px; color: #8a9c7f; width: 14px; }
.leaderboard .player-mass { font-size: 11px; color: #8d9e80; margin-left: auto; }
.emote-bar { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 17px; }
.emote-bar > span { font-size: 9px; color: #9aaa8e; }
.emote-bar button { background: #25301e; border: 1px solid #39452e; border-radius: 7px; width: 36px; height: 36px; font-size: 20px; }
.emote-bar button:hover { border-color: var(--lime); }
.result-place { color: var(--lime); font: 55px/1 var(--display); margin-top: 14px; }
#result-view h2 { font-size: 34px; margin: 10px 0; }
#result-view h2 br { display: none; }
#result-description { margin-bottom: 12px; }
.result-stats { display: flex; gap: 10px; margin: 14px 0; }
.result-stats > div { flex: 1; border-right: 1px solid #3e4b34; }
.result-stats > div:last-child { border: 0; }
.result-stats strong { display: block; font: 26px var(--display); color: var(--lime); }
.result-stats span { font-size: 9px; color: #93a284; }
#result-progress .xp-earned { font-size: 27px; font-weight: 800; color: var(--lime); }
.result-actions { position: sticky; bottom: -24px; padding: 12px 0 16px; background: #18201b; box-shadow: 0 -12px 18px #18201bef; }
#unlock-note:empty { display: none; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 20; width: max-content; max-width: calc(100vw - 28px); padding: 12px 18px; border: 1px solid #648248; background: #23351df5; border-radius: 8px; font-size: 13px; color: #e6f5d5; box-shadow: 0 8px 35px #0008; text-align: center; }
dialog { position: fixed; border: 1px solid #50653f; border-radius: 16px; width: min(520px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow: auto; overscroll-behavior: contain; background: #18221b; color: #d3ddca; padding: 30px; box-shadow: 0 24px 100px #0009; }
dialog::backdrop { background: #070d0ac7; backdrop-filter: blur(5px); }
dialog p, dialog li { font-size: 13px; line-height: 1.65; color: #aabb9f; }
.dialog-close { position: absolute; top: 12px; right: 12px; font-size: 25px; }
.help-list { padding-left: 19px; margin: 20px 0; }
.help-list li { padding-left: 4px; margin: 12px 0; }
.help-list b { display: block; color: var(--lime); }
.profile-dialog { width: min(640px, calc(100vw - 28px)); }
.profile-dialog h3 { font-size: 15px; margin: 22px 0 10px; color: #dfeecb; }
#profile-level { font-size: 14px; color: var(--lime); }
.skin-label { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 8px; }
.skin-label > span:last-child { font-size: 11px; color: #a4b19d; }
.skin-options { display: flex; gap: 12px; margin-bottom: 18px; }
.skin { height: 40px; width: 40px; border-radius: 50%; border: 1px solid transparent; position: relative; padding: 5px; background: transparent; }
.skin.selected { border-color: var(--lime); background: #caff550b; }
.skin::before { content: ''; position: absolute; inset: 5px; background: var(--color); border-radius: 50%; }
.skin::after { content: '••'; position: absolute; color: #152019; font-size: 17px; font-weight: bold; left: 0; right: 0; top: 8px; letter-spacing: 1px; }
.skin.locked::after { content: '⌑'; color: #172019; font-size: 19px; }
.skin.locked::before { opacity: .32; }
.skin:hover { border-color: #687663; }
.cosmetic-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.cosmetic-choice, .chapter-choice { border: 1px solid #46523c; background: #222d20; color: #c8d7b9; border-radius: 9px; padding: 10px 12px; cursor: pointer; font-size: 12px; }
.cosmetic-choice.selected, .chapter-choice.selected { border-color: var(--lime); color: #dfff9e; background: #344025; }
.cosmetic-choice:disabled, .chapter-choice:disabled { opacity: .48; cursor: default; }
.chapter-choice { display: block; width: 100%; text-align: left; margin: 10px 0; padding: 14px; }
.chapter-choice strong { display: block; font-size: 16px; margin-bottom: 6px; }
.chapter-choice small { display: block; line-height: 1.6; }
.reward-line { margin: 12px 0; color: #dfff9e; font-size: 13px; }
.reward-line button { margin: 5px 0 0 8px; }
select { width: 100%; color: #dfebd3; background: #192119; border: 1px solid #48513e; border-radius: 7px; padding: 11px; margin: 8px 0 16px; }
.friends-dialog { width: min(380px, calc(100vw - 28px)); }
.friends-dialog h2 { font-size: 34px; margin-bottom: 24px; }
@media (min-width: 1500px) {
  .app-shell { padding: 0 32px 24px; grid-template-rows: 72px minmax(0, 1fr); }
  .game-layout { grid-template-columns: minmax(0, 1fr) 370px; }
  .side-panel { padding: 32px; }
  .result-actions { bottom: -32px; }
}
@media (max-width: 1000px) {
  .app-shell { padding: 0 12px 12px; }
  .game-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .side-panel { padding: 20px; }
  .arena-mode { display: none; }
  .arena-bottom > span:nth-child(2) { display: none; }
  .result-actions { bottom: -20px; }
}
@media (max-width: 760px) {
  .app-shell { padding: 0 0 env(safe-area-inset-bottom); grid-template-rows: 56px minmax(0, 1fr); }
  .header { padding: 0 14px; gap: 10px; }
  .brand { font-size: 25px; gap: 7px; }
  .brand-ball { width: 27px; height: 27px; font-size: 26px; }
  .header-actions { gap: 8px; }
  .text-button { font-size: 11px; padding: 6px 2px; min-height: 36px; }
  .icon-button { width: 32px; height: 32px; }
  .game-layout { position: relative; display: block; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .arena-panel { position: absolute; inset: 0; }
  .arena-top { top: 16px; left: 16px; right: 16px; }
  .arena-label { font-size: 9px; }
  .arena-bottom { bottom: 16px; left: 16px; right: 16px; }
  .side-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(340px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 20px; border: 1px solid #45563c; border-radius: 14px; background: #18201bf5; box-shadow: 0 12px 60px #0007; }
  body[data-view="playing"] .side-panel { display: none; }
  body[data-view="playing"] #score-button { display: flex; }
  body[data-view="playing"].score-open .side-panel { display: flex; }
  .match-hud { top: 48px; left: 16px; right: 16px; }
  .phase-banner { top: 96px; }
  .result-actions { background: #18201b; }
  dialog { padding: 28px 22px; }
  dialog h2 { font-size: 36px; }
}
@media (max-width: 350px) {
  .header { padding: 0 10px; }
  .brand { font-size: 23px; }
  .side-panel { width: calc(100% - 24px); padding: 17px; }
  .header-actions { gap: 5px; }
  .menu-links { gap: 4px; }
  .menu-links .practice-button { font-size: 11px; }
  .result-actions { bottom: -17px; }
}
@media (max-height: 520px) {
  .app-shell { grid-template-rows: 44px minmax(0, 1fr); padding-bottom: 6px; }
  .side-panel { padding: 14px 18px; }
  #play-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #play-form > .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #play-form .input-wrap { margin: 0; height: 44px; }
  #play-form .input-counter, #play-form .input-wrap > span:first-child { display: none; }
  .play-button { min-height: 44px; padding: 8px 12px; }
  .primary-button #play-label { font-size: 23px; }
  .menu-progress { grid-column: 1/-1; padding: 5px 0; margin: 0; }
  .mode-options { grid-column: 1/-1; }
  .mode-options .secondary-button { min-height: 40px; }
  .menu-links { margin-top: 2px; }
  .menu-links .practice-button { min-height: 36px; }
  .control-note { display: none; }
  .save-status { margin-top: 0; }
  .arena-top { top: 12px; }
  .match-hud { top: 37px; }
  .hud-chip { height: 30px; }
  .phase-banner { top: 74px; }
  .phase-banner small { display: none; }
  .result-actions { bottom: -14px; }
}
@media (prefers-reduced-motion: reduce) { button, .xp-track span { transition: none; } }

/* The camera owns the whole stage; combat information lives outside it. */
.arena-stage { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.mobile-match-info { display: none; }
#playing-view .match-hud { position: static; margin: 12px 0; }
#playing-view .phase-banner { position: static; margin: 12px 0; text-align: left; }
#playing-view .phase-banner > span { font-size: 11px; letter-spacing: .7px; }
#playing-view .phase-banner small { font-size: 11px; }
#playing-view .stat-pair { padding: 8px; margin: 12px 0; }
#playing-view .stat-pair strong { font-size: 26px; }
#playing-view .leaderboard li { padding: 6px 0; }
#playing-view .intro { margin: 10px 0; font-size: 11px; }
#match-kind { line-height: 1.5; letter-spacing: .6px; color: var(--lime); }
.goal-instruction { margin: 8px 0; font-size: 11px; color: #c5d6b8; }
.goal-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.goal-chip { min-width: 0; color: #b8c8af; }
.goal-chip span { display: block; font-size: 9px; line-height: 1.2; }
.goal-chip strong { display: block; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.goal-chip progress { display: block; width: 100%; height: 3px; border: 0; accent-color: var(--lime); margin-top: 5px; }
.goal-chip.done { color: var(--lime); }
#menu-view > form > .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#menu-view .input-wrap { height: 42px; margin: 0 0 8px; }
#menu-view .play-button { min-height: 52px; }
#menu-view #play-label { font-size: 23px; }
#menu-view .menu-progress { margin: 12px 0; padding: 0; }
#menu-view .menu-progress h3 { font-size: 16px; margin: 5px 0; }
#menu-view .journey-meta { font-size: 9px; }
#menu-view .journey-meta strong { color: var(--lime); font-size: 11px; }
#menu-view .goal-chip span { font-size: 9px; }
#menu-view .goal-strip { margin: 7px 0; }
#menu-view .secondary-button { min-height: 42px; }
#menu-view .menu-links { margin-top: 6px; }
#menu-view .menu-links .practice-button { min-height: 40px; }
#menu-view .control-note { margin-top: 8px; }
#menu-view .save-status { margin-top: 2px; }
#result-view .result-place { font: 700 14px/1.4 Arial, sans-serif; margin: 12px 0; color: #cbd7c4; }
#result-view h2 { font-size: 38px; line-height: 1.05; }
#result-view.advanced h2 { color: var(--lime); }
#result-view.advanced #result-description { color: #e0f4ca; font-size: 15px; }
#result-view.celebrate h2 { animation: phase-earned 1.2s ease-out; }
@keyframes phase-earned { 0% { transform: scale(.96); text-shadow: 0 0 30px #caff55a0; } 100% { transform: scale(1); text-shadow: none; } }
@media (max-width: 760px) {
  .arena-panel { display: flex; flex-direction: column; }
  .arena-stage { position: relative; inset: auto; flex: 1; }
  .mobile-match-info { display: block; flex: none; padding: 10px 12px 8px; background: #152019; border-bottom: 1px solid var(--line); }
  .mobile-match-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
  #mobile-kind { font-size: 10px; line-height: 1.4; color: var(--lime); }
  #mobile-count { flex: none; font-size: 10px; color: #dce8d4; }
  #mobile-phase { display: block; font-size: 9px; color: #d6e8c9; margin-top: 6px; }
  #mobile-goals .goal-instruction { font-size: 10px; margin: 6px 0; }
  #mobile-goals .goal-strip { margin: 6px 0 0; gap: 12px; }
  #mobile-goals .goal-chip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px; }
  #mobile-goals .goal-chip strong { font-size: 11px; margin: 0; }
  #mobile-goals .goal-chip progress { grid-column: 1/-1; margin-top: 1px; }
  body[data-view="playing"] .arena-top { display: none; }
}
@media (max-height: 520px) {
  #menu-view .play-button { min-height: 44px; }
  #menu-view .menu-progress { margin: 0; }
  #menu-view .goal-strip { margin: 5px 0; }
  #menu-view .control-note { display: none; }
  #menu-view .menu-links .practice-button { min-height: 34px; }
  #playing-view .phase-banner { margin: 8px 0; }
  #mobile-goals .goal-instruction { display: none; }
}
@media (prefers-reduced-motion: reduce) { #result-view.celebrate h2 { animation: none; } }

.ruleset-selector { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:12px; padding:4px; background:#101916; border:1px solid #3d5043; border-radius:9px; }
.ruleset-selector button { border:0; border-radius:6px; background:transparent; padding:10px 6px; color:#a5b7ab; font-size:13px; font-weight:700; }
.ruleset-selector button[aria-pressed="true"] { color:#14211b; background:var(--lime); }
.dom-menu-card { margin:14px 0; display:grid; gap:7px; }
.dom-menu-card strong { color:#e8eedf; font-size:17px; }
.dom-menu-card > span { font-size:12px; color:#b7c6bd; }
.dom-menu-card small { color:#a4b887; font-size:10px; }
#dom-records { font-size:11px; line-height:1.7; color:#caff55; }
body[data-ruleset="domination"] .arena-panel { display:flex; flex-direction:column; }
body[data-ruleset="domination"] .arena-stage { position:relative; inset:auto; flex:1; }
body[data-ruleset="domination"] .arena-top { display:none; }
.dom-hud { flex:none; padding:12px 18px 10px; border-bottom:1px solid #3b4c42; background:#15231b; }
.dom-hud > div:first-child { display:flex; justify-content:space-between; gap:10px; }
#dom-phase { color:var(--lime); font-size:12px; letter-spacing:.6px; }
#dom-clock { color:#eef5e9; font-size:14px; font-variant-numeric:tabular-nums; }
.dom-numbers { display:flex; gap:20px; margin:7px 0; font-size:11px; color:#b6c6ba; }
.dom-numbers b { color:#eef5e9; font-size:13px; }
#dom-merge { font-size:10px; color:#adbcad; }
.dom-overlay { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); width:min(330px,85%); padding:24px; border:1px solid #698b55; border-radius:16px; background:#14221cef; text-align:center; box-shadow:0 10px 50px #03090c80; }
.dom-overlay > span { display:block; color:#d0e6c3; font-size:12px; letter-spacing:1.5px; }
.dom-overlay > strong { display:block; color:var(--lime); font:80px/1.1 var(--display); margin:10px 0; }
.dom-overlay p { font-size:12px; color:#c3d2bb; line-height:1.6; }
.dom-overlay .primary-button { font-size:18px; justify-content:center; }
.dom-last-result { position:absolute; z-index:3; top:12px; left:12px; max-width:calc(100% - 135px); background:#16241eeb; border:1px solid #4b644b; border-radius:8px; padding:10px 12px; font-size:11px; line-height:1.5; color:#d7e9ca; pointer-events:none; }
.dom-panel-result { color:#cee5bb; font-size:12px; line-height:1.7; margin:12px 0; }
#domination-view h2 { font-size:32px; }
#domination-view .leaderboard li { padding:6px 0; }
#domination-view .primary-button { margin-top:14px; font-size:18px; }
.dom-leave-arena { position:absolute; z-index:4; bottom:12px; left:50%; transform:translateX(-50%); background:#13221ceb; color:#c5d4c7; border:1px solid #485c4d; border-radius:18px; padding:8px 18px; font-size:11px; min-height:34px; }
.dom-touch { display:none; position:absolute; inset:0; z-index:2; pointer-events:none; }
#dom-joystick { position:absolute; bottom:22px; left:18px; width:88px; height:88px; background:#15281bba; border:2px solid #8cb96b80; border-radius:50%; pointer-events:auto; touch-action:none; }
#dom-stick { position:absolute; width:36px; height:36px; top:24px; left:24px; border-radius:50%; background:#caff55a0; box-shadow:0 0 16px #caff5520; }
.dom-touch-actions { position:absolute; right:14px; bottom:22px; display:flex; gap:9px; align-items:flex-end; pointer-events:auto; }
.dom-touch-actions button { display:grid; place-items:center; width:64px; height:64px; padding:9px 4px; border:2px solid #9ecb66; border-radius:50%; background:#203822ed; font-size:10px; font-weight:700; touch-action:none; }
.dom-touch-actions button small { font-size:20px; line-height:1; }
#dom-dash { --charge:100%; background:conic-gradient(#caff55 var(--charge),#415838 0); color:#15231a; }
@media (pointer:coarse), (max-width:760px) { .dom-touch { display:block; } }
@media (max-width:760px) {
  body[data-view="domination"] .side-panel { display:none; }
  body[data-view="domination"] #score-button { display:flex; }
  body[data-view="domination"].score-open .side-panel { display:flex; }
  .dom-hud { padding:9px 12px 8px; }
  #dom-phase { font-size:10px; }
  #dom-clock { font-size:12px; }
  .dom-numbers { gap:14px; margin:5px 0; font-size:10px; }
  .dom-numbers b { font-size:11px; }
  #dom-merge { font-size:9px; }
  .dom-last-result { font-size:10px; padding:7px 8px; max-width:calc(100% - 100px); }
  .dom-overlay { padding:20px; }
  .dom-leave-arena { bottom:10px; }
  .ruleset-selector { margin-bottom:9px; }
}
@media (max-width:350px) {
  #dom-joystick { width:72px; height:72px; left:12px; }
  #dom-stick { top:16px; left:16px; }
  .dom-touch-actions button { width:54px; height:54px; font-size:9px; }
  .dom-touch-actions { right:10px; gap:7px; }
  .ruleset-selector button { padding:8px 4px; font-size:12px; }
}
@media (max-height:520px) {
  .ruleset-selector { margin-bottom:7px; }
  .ruleset-selector button { padding:6px; }
  .dom-menu-card { grid-column:1/-1; margin:0; gap:3px; }
  .dom-menu-card strong { font-size:14px; }
  .dom-hud { padding:6px 14px; }
  .dom-hud > div:first-child { float:right; gap:15px; }
  .dom-numbers { margin:0 0 5px; }
  .dom-overlay { padding:12px 20px; max-width:300px; }
  .dom-overlay > strong { font-size:48px; margin:4px 0; }
  .dom-last-result { top:8px; }
}

.absorption-rules{margin:18px 0}.absorption-rules summary{cursor:pointer;color:var(--lime);font-weight:700}.absorption-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}.absorption-table caption{text-align:left;margin-bottom:8px;font-weight:700}.absorption-table th,.absorption-table td{padding:8px 4px;border-bottom:1px solid #52674d66;text-align:right}.absorption-table th:first-child,.absorption-table td:first-child{text-align:left}.absorption-rules .small-note{font-size:12px}