:root {
  color-scheme: dark;
  --ink: #edf4f7;
  --muted: #92a7af;
  --dim: #647980;
  --line: rgba(154, 197, 196, 0.16);
  --line-strong: rgba(154, 197, 196, 0.28);
  --panel: rgba(7, 16, 27, 0.9);
  --panel-strong: #0a1928;
  --surface-0: #06111c;
  --surface-1: #0c1d2e;
  --surface-2: #102437;
  --radius-control: 8px;
  --radius-panel: 12px;
  --control-height: 40px;
  --focus-ring: 0 0 0 3px rgba(99, 224, 203, 0.24);
  --teal: #63e0cb;
  --gold: #f4c66a;
  --red: #ff796a;
  --blue: #76a8ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  font-family: "Microsoft YaHei", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #06111c; }
body { color: var(--ink); }
/* Toy dimensions are CSS pixels; rotate only while the reported container is portrait. */
html.is-toy-container, html.is-toy-container body { width: var(--toy-width); height: var(--toy-height); }
html.is-toy-container:not(.is-auto-landscape) #app,
html.is-toy-container:not(.is-auto-landscape) .start-menu-overlay,
html.is-toy-container:not(.is-auto-landscape) .theater-notice-layer,
html.is-toy-container:not(.is-auto-landscape) #loading.loading-screen {
  inset: 0 auto auto 0; width: var(--toy-width); height: var(--toy-height); min-height: 0;
}
html.is-toy-container:not(.is-auto-landscape) .presentation-card,
html.is-toy-container:not(.is-auto-landscape) .result-card { max-height: calc(var(--toy-height) - 24px); }
button, select { font: inherit; touch-action: manipulation; }
button { color: inherit; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: var(--focus-ring); }

#app {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 138px;
  background:
    radial-gradient(circle at 18% 12%, rgba(39, 96, 105, 0.22), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(75, 42, 57, 0.2), transparent 31%),
    #06111c;
}

#topbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 26px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(7, 20, 29, .96), rgba(10, 24, 34, .9) 56%, rgba(27, 17, 28, .94)),
    radial-gradient(circle at 14% 50%, rgba(99, 224, 203, .08), transparent 26%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  z-index: 5;
}

.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(99, 224, 203, 0.6); border-radius: 12px;
  color: #06111c; background: var(--teal); font-weight: 950; font-size: 21px;
  box-shadow: 0 0 24px rgba(99, 224, 203, 0.22);
}
.brand-title { font-size: 16px; font-weight: 900; letter-spacing: 0.06em; }
.brand-subtitle, .eyebrow, .stat-kicker {
  color: var(--dim); font-size: 9px; letter-spacing: 0.17em; font-weight: 800;
}
.brand-subtitle { margin-top: 3px; color: #62818a; }

.top-stat { min-width: 86px; display: flex; flex-direction: column; gap: 3px; }
.top-stat strong { font-size: 14px; letter-spacing: 0.05em; }
.budget-stat strong { color: var(--gold); font-size: 19px; }
.budget-stat small { font-size: 11px; color: #b99651; }
.level-picker { display: flex; flex-direction: column; gap: 3px; margin-left: auto; }
.level-picker select {
  min-width: 160px; min-height: var(--control-height); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 6px 28px 6px 10px;
  color: var(--ink); background: #0c1d2e; outline: none; font-size: 12px; font-weight: 800;
}
.level-picker select:focus { border-color: var(--teal); }
.top-actions { display: flex; gap: 8px; }
.button {
  min-height: var(--control-height); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 9px 15px; cursor: pointer;
  background: #102437; transition: transform .16s ease, border-color .16s ease, background .16s ease;
  font-size: 12px; font-weight: 900; letter-spacing: .04em;
}
.button:hover { transform: translateY(-1px); border-color: rgba(99, 224, 203, .55); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-primary { border-color: #5edac5; color: #06151b; background: var(--teal); box-shadow: 0 8px 22px rgba(99, 224, 203, .13); }
.button-ghost { color: #b9ccd1; background: rgba(16, 36, 55, .7); }
.hidden { display: none !important; }
/* Game gestures own pointer dragging; editable fields keep native selection. */
#app, .start-menu-overlay, .prototype-settings, .theater-notice-layer {
  user-select:none; -webkit-user-select:none;
}
#app :is(input,textarea,[contenteditable="true"]),
.start-menu-overlay :is(input,textarea,[contenteditable="true"]),
.prototype-settings :is(input,textarea,[contenteditable="true"]) {
  user-select:text; -webkit-user-select:text;
}
#app.phase-battle, #app.phase-result { grid-template-rows: 64px minmax(0, 1fr) 0; }
#app.phase-battle #unitDock, #app.phase-result #unitDock { display: none; pointer-events: none; }

#playArea {
  min-width: 0; min-height: 0; position: relative;
  background: #102832;
}
#battlefieldShell {
  position: absolute; inset: 0 280px 0 0; overflow: hidden;
  background: #102832;
  box-shadow: inset 0 0 70px rgba(2, 8, 12, .28);
}
#battlefieldShell::after {
  content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(230, 236, 218, .2); border-radius: 10px;
  box-shadow: inset 0 0 70px rgba(4, 16, 21, .2), 0 0 0 1px rgba(6, 13, 18, .16);
}
#gameCanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#gameCanvas.is-dragging { cursor: grabbing; }
#worldLabels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.world-label {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 2px 5px; border: 1px solid rgba(202, 234, 231, .16); border-radius: 4px;
  color: rgba(234, 249, 242, .86); background: rgba(5, 15, 24, .42); font-size: 9px; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .82); transition: opacity .12s linear; backdrop-filter: blur(2px);
}
.world-label.enemy { border-color: rgba(255, 121, 106, .2); }
.world-label.retreat { border-color: rgba(244, 198, 106, .5); color: rgba(255, 231, 162, .9); }
.effect-label {
  position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border: 1px solid var(--effect-color, var(--gold)); border-radius: 999px;
  color: var(--effect-color, var(--gold)); background: rgba(4, 13, 22, .48); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 16px rgba(99, 224, 203, .16);
  font-size: 10px; line-height: 1; font-weight: 950; letter-spacing: .08em; text-shadow: 0 1px 3px #000;
  white-space: nowrap; transition: opacity .1s linear; animation: effect-label-pop .22s ease-out both;
}
.effect-label::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.effect-label.effect-summon, .effect-label.effect-charge { font-size: 11px; letter-spacing: .1em; }
.effect-label.effect-telegraph { border-style: dashed; }
.floating-text {
  position: absolute; transform: translate(-50%, -50%); padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--float-color, #fff1e6) 58%, transparent);
  border-radius: 4px; color: var(--float-color, #fff1e6); background: rgba(4, 13, 22, .42);
  box-shadow: 0 2px 9px rgba(0, 0, 0, .2); font-family: ui-monospace, "Microsoft YaHei", sans-serif; font-size: 13px;
  line-height: 1; font-weight: 950; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); white-space: nowrap; pointer-events: none;
}
.floating-text.heal { background: rgba(13, 38, 26, .4); }
.floating-text.critical { padding-inline: 6px; border-width: 2px; font-size: 15px; letter-spacing: .03em; }
@keyframes effect-label-pop { from { opacity: 0; transform: translate(-50%, -42%) scale(.88); } to { transform: translate(-50%, -50%) scale(1); } }
.floating-guide, .camera-hint {
  position: absolute; left: 22px; bottom: 16px; padding: 8px 11px; border: 1px solid rgba(155, 211, 203, .16);
  border-radius: var(--radius-control); color: #9db6ba; background: rgba(5, 16, 27, .74); font-size: 10px; letter-spacing: .02em;
  pointer-events: none; backdrop-filter: blur(8px);
}
.camera-hint { left: auto; right: 18px; color: #67828b; }
.guide-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 99px; background: var(--teal); box-shadow: 0 0 9px var(--teal); }
.guide-dot-battle { background: var(--gold); box-shadow: 0 0 9px var(--gold); }
.webgl-fallback { position: absolute; inset: 30% 15%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; color: #ffb1a5; background: rgba(9, 20, 31, .94); border: 1px solid rgba(255, 121, 106, .3); border-radius: 12px; text-align: center; }
.webgl-fallback span { color: var(--muted); font-size: 12px; }

#sidePanel {
  position: absolute; inset: 0 0 0 auto; width: 280px; padding: 22px 18px 15px;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(155deg, rgba(11, 34, 42, .94), rgba(10, 20, 31, .96) 58%, rgba(37, 22, 33, .93)),
    radial-gradient(circle at 12% 8%, rgba(99, 224, 203, .1), transparent 30%);
  box-shadow: -14px 0 34px rgba(0, 0, 0, .18); overflow: auto; z-index: 3;
}
.panel-toggle {
  display: none; min-height: 36px; align-items: center; justify-content: center;
  border: 1px solid rgba(99, 224, 203, .3); border-radius: 7px; padding: 5px 9px;
  color: var(--teal); background: rgba(10, 32, 43, .82); cursor: pointer; font-size: 10px; font-weight: 900;
}
.panel-heading { display: flex; justify-content: space-between; gap: 12px; }
.panel-heading h1 { margin: 7px 0 3px; font-size: 25px; letter-spacing: .03em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.level-number { color: rgba(99, 224, 203, .2); font-family: ui-monospace, monospace; font-size: 42px; font-weight: 900; line-height: .85; }
.tip-card { display: flex; gap: 9px; margin: 24px 0 20px; padding: 12px 13px; border: 1px solid rgba(244, 198, 106, .16); border-left: 3px solid var(--gold); border-radius: var(--radius-control); background: rgba(244, 198, 106, .07); }
.tip-icon { color: var(--gold); font-size: 15px; }
.tip-card p { margin: 0; color: #c4d2d4; font-size: 11px; line-height: 1.65; }
.battle-readout { padding: 14px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.readout-title, .section-title { display: flex; justify-content: space-between; align-items: center; color: #96abb0; font-size: 10px; letter-spacing: .12em; font-weight: 900; text-transform: uppercase; }
#battleClock { color: var(--teal); font-family: ui-monospace, monospace; letter-spacing: .05em; }
#enemyReadout { color: var(--gold); font-family: ui-monospace, monospace; letter-spacing: .02em; }
.faction-row { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 6px; margin: 16px 0 12px; }
.faction { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #b4c7ca; }
.faction i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.faction strong { margin-left: auto; font-family: ui-monospace, monospace; font-size: 17px; }
.faction-player i { background: var(--teal); box-shadow: 0 0 8px rgba(99, 224, 203, .8); }
.faction-player strong { color: var(--teal); }
.faction-enemy i { background: var(--red); box-shadow: 0 0 8px rgba(255, 121, 106, .8); }
.faction-enemy strong { color: var(--red); }
.versus { color: #5d747d; text-align: center; font-size: 9px; font-weight: 900; }
.progress-track { height: 4px; overflow: hidden; border-radius: 8px; background: rgba(255, 121, 106, .26); }
.progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #b3edc8); transition: width .3s ease; }
.panel-section { padding-top: 18px; }
.live-dot { color: var(--red); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .08em; }
.live-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.event-log { min-height: 94px; max-height: 120px; margin-top: 9px; overflow: hidden; }
.event { padding: 5px 0; color: #839ca2; border-bottom: 1px solid rgba(154, 197, 196, .06); font-size: 10px; line-height: 1.35; }
.event:first-child { color: #d7ebea; }
.event.skill { color: var(--gold); }
.event.reward { color: #9cf6a6; }
.event.danger { color: #ff9a8e; }
.event.combat { color: #bdd1d4; }
.speed-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.speed-button { min-height: var(--control-height); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 7px; cursor: pointer; color: #8ba4aa; background: var(--surface-1); font-weight: 900; font-size: 11px; }
.speed-button.active { color: #06151b; border-color: var(--gold); background: var(--gold); }
.control-note { margin-top: 9px; color: #607780; font-size: 10px; line-height: 1.5; }

#unitDock {
  position: relative; z-index: 4; min-width: 0; min-height: 0; overflow: hidden; padding: 10px 24px 0;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(8, 27, 36, .97), rgba(5, 15, 25, .98)),
    radial-gradient(circle at 22% 0%, rgba(99, 224, 203, .08), transparent 35%);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
}
.dock-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.dock-header strong { display: block; margin-top: 4px; color: #cfe1e0; font-size: 12px; }
.dock-meta { color: #799198; font-size: 10px; }
.dock-meta #deployedCount { color: var(--teal); font-family: ui-monospace, monospace; font-weight: 900; }
.divider { display: inline-block; width: 1px; height: 11px; margin: 0 8px -2px; background: var(--line); }
.unit-list { display: flex; min-width: 0; gap: 8px; height: 94px; overflow-x: auto; padding: 1px 0 4px; scrollbar-color: #234252 transparent; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; }
.unit-list { overscroll-behavior-x: contain; touch-action: pan-x; }
.unit-list.is-dock-dragging { cursor: grabbing; }
.unit-card { position: relative; flex: 0 0 116px; height: 90px; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 8px 5px; border: 1px solid rgba(151, 192, 193, .16); border-radius: var(--radius-control); cursor: grab; user-select: none; -webkit-user-drag: none; touch-action: pan-x; background: linear-gradient(145deg, rgba(25, 55, 62, .9), rgba(9, 23, 37, .92)), radial-gradient(circle at 84% 10%, rgba(244, 198, 106, .11), transparent 30%); transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.unit-card:hover { transform: translateY(-3px); border-color: rgba(99, 224, 203, .55); }
.unit-card.selected { border-color: var(--teal); background: linear-gradient(145deg, rgba(21, 68, 72, .95), rgba(9, 31, 42, .95)); box-shadow: 0 0 0 1px rgba(99, 224, 203, .18), 0 8px 22px rgba(0, 0, 0, .23); }
.unit-card.disabled { opacity: .38; filter: saturate(.4); cursor: not-allowed; }
.unit-card.drop-target { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(244, 198, 106, .24), 0 8px 22px rgba(0, 0, 0, .23); transform: translateY(-3px); }
#app.is-dragging-unit #gameCanvas { cursor: copy; }
#app.is-dragging-unit .unit-card.selected { opacity: .72; }
#app.is-dragging-deployment .unit-list.is-drop-target { padding: 0 5px 5px; outline: 2px dashed rgba(244, 198, 106, .78); outline-offset: -2px; background: rgba(244, 198, 106, .08); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.unit-glyph { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; color: #07121a; font-weight: 950; font-size: 12px; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.unit-price { color: var(--gold); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 900; }
.unit-name { margin-top: 3px; font-size: 12px; line-height: 1.1; font-weight: 900; }
.unit-role { margin-top: 1px; color: #88a2a8; font-size: 8px; line-height: 1.1; }
.unit-skill-line { min-width: 0; overflow: hidden; margin-top: 1px; color: rgba(244, 198, 106, .76); font-family: "Microsoft YaHei", sans-serif; font-size: 8px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.unit-stats { display: flex; justify-content: space-between; margin-top: 3px; color: #9cb6ba; font-family: ui-monospace, monospace; font-size: 8px; line-height: 1.1; }
.unit-stats b { color: #d7e8e7; }
.selected-mark { position: absolute; top: 6px; right: 7px; color: var(--teal); font-size: 10px; }

.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; overflow-y: auto; overscroll-behavior: contain; background: rgba(1, 7, 13, .72); backdrop-filter: blur(12px); }
.result-card { width: min(480px, 100%); padding: 34px 36px 30px; border: 1px solid rgba(157, 211, 203, .3); border-radius: var(--radius-panel); background: linear-gradient(145deg, rgba(16, 48, 57, .96), rgba(9, 21, 34, .98) 74%), radial-gradient(circle at 92% 8%, rgba(244, 198, 106, .14), transparent 26%); box-shadow: var(--shadow); }
.result-stamp { display: inline-flex; align-items: center; height: 23px; margin-bottom: 15px; padding: 0 9px; border: 1px solid currentColor; border-radius: 4px; color: var(--teal); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.result-card.lose .result-stamp { color: var(--red); }
.result-card h2 { margin: 8px 0 6px; font-size: 36px; }
.result-card > p { margin: 0 0 22px; color: #a9bdc1; font-size: 12px; line-height: 1.6; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats div { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; }
.result-stats div:nth-child(odd) { border-right: 1px solid var(--line); }
.result-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.result-stats div:nth-child(even) { padding-left: 17px; }
.result-stats span, .rating-row span, .result-stats small { color: #779198; font-size: 10px; }
.result-stats strong { color: #d8e8e6; font-family: ui-monospace, monospace; font-size: 17px; }
.result-stats .result-remaining strong { color: var(--gold); }
.rating-row { display: flex; align-items: baseline; gap: 10px; padding: 17px 0 21px; }
.rating-row strong { color: var(--gold); font-family: ui-monospace, monospace; font-size: 40px; line-height: .8; }
.rating-row small { margin-left: auto; color: #8da7aa; font-size: 10px; }
.result-actions { display: flex; justify-content: flex-end; gap: 8px; }
.presentation-card {
  width: min(430px, 100%); max-height: calc(100dvh - 24px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 24px 26px 22px;
  border: 1px solid rgba(157, 211, 203, .3); border-radius: var(--radius-panel);
  background: linear-gradient(145deg, rgba(16, 48, 57, .98), rgba(9, 21, 34, .99) 74%);
  box-shadow: var(--shadow);
}
.presentation-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.presentation-header h2 { margin: 7px 0 0; font-size: 25px; }
.presentation-note { margin: 16px 0 13px; color: #a9bdc1; font-size: 11px; line-height: 1.55; }
.presentation-options { display: flex; flex-direction: column; gap: 7px; }
.presentation-option {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border: 1px solid rgba(154, 197, 196, .15); border-radius: 8px;
  color: #d7e8e7; background: rgba(16, 36, 55, .62); font-size: 12px; font-weight: 800;
}
.presentation-option input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--teal); }
.presentation-color-option input[type="color"] {
  width: 48px; height: 40px; min-width: 48px; padding: 3px; border: 1px solid rgba(154, 197, 196, .32); border-radius: 6px;
  background: rgba(8, 22, 34, .72); cursor: pointer;
}
.presentation-opacity-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
.presentation-opacity-option input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 40px; accent-color: var(--teal); cursor: pointer; }
.presentation-opacity-option output { min-width: 38px; color: var(--teal); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 900; text-align: right; }
.presentation-select-option select {
  min-height: 44px; min-width: 150px; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 8px; color: var(--ink); background: var(--surface-1); font-size: 11px;
}
.touch-tool-toggle { display: none; }
#app.phase-prep .touch-tool-toggle {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
  margin: 0 0 7px; padding: 8px 6px; border-width: 2px; font-size: 16px; letter-spacing: .04em;
  touch-action: manipulation; transform-style: preserve-3d;
}
#app.phase-prep .touch-tool-toggle[data-active-mode="place"] {
  border-color: #5c739a; color: #fff8e7; background: #536b91; box-shadow: 0 4px 0 rgba(46, 58, 77, .28);
}
#app.phase-prep .touch-tool-toggle[data-active-mode="clear"] {
  border-color: #b87820; color: #fff8e7; background: #b87820; box-shadow: 0 4px 0 rgba(94, 62, 22, .26);
}
.touch-tool-toggle.is-flipping { animation: touch-tool-flip .42s ease-in-out; }
@keyframes touch-tool-flip {
  0% { transform: perspective(260px) rotateX(0); }
  44% { transform: perspective(260px) rotateX(88deg); }
  56% { transform: perspective(260px) rotateX(-88deg); }
  100% { transform: perspective(260px) rotateX(0); }
}
.toast { position: fixed; left: 50%; bottom: 192px; z-index: 12; transform: translate(-50%, 16px); padding: 9px 15px; border: 1px solid rgba(99, 224, 203, .3); border-radius: var(--radius-control); color: #dff8f0; background: rgba(8, 29, 40, .94); box-shadow: 0 12px 35px rgba(0, 0, 0, .28); font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.loading-screen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 14px; color: #9fb9bc; background: #06111c; font-size: 12px; }
.loader-ring { width: 28px; height: 28px; border: 2px solid rgba(99, 224, 203, .18); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1020px) {
  #topbar { gap: 15px; padding: 0 15px; }
  .brand-lockup { min-width: 228px; }
  #battlefieldShell { right: 300px; }
  #sidePanel { width: 300px; padding-inline: 17px; }
  .level-picker select { min-width: 128px; }
  .button { padding-inline: 10px; }
}

@media (max-width: 780px) {
  html, body { overflow: auto; }
  #app { min-height: 100dvh; height: auto; grid-template-rows: auto minmax(460px, 1fr) auto; }
  #app.phase-battle, #app.phase-result { grid-template-rows: auto minmax(0, 1fr) 0; }
  #topbar { flex-wrap: wrap; height: auto; min-height: 66px; padding: max(10px, var(--safe-area-top, env(safe-area-inset-top))) max(15px, var(--safe-area-right, env(safe-area-inset-right))) 10px max(15px, var(--safe-area-left, env(safe-area-inset-left))); }
  .brand-lockup { flex: 1 1 auto; min-width: 190px; }
  .phase-stat, .budget-stat { display: none; }
  .level-picker { margin-left: 0; }
  .level-picker select { min-width: 110px; }
  .top-actions { margin-left: auto; }
  #playArea { min-height: 460px; }
  #battlefieldShell { inset: 0 0 0 0; }
  #sidePanel { inset: auto 0 0; width: 100%; height: 168px; padding: 12px 15px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; overflow: hidden; background: rgba(6, 17, 29, .93); }
  .panel-heading { display: block; }
  .panel-heading h1 { font-size: 18px; margin-top: 4px; }
  .level-number { display: none; }
  .tip-card { margin: 20px 0 0; max-width: 260px; }
  .battle-readout { border: 0; padding: 0; }
  .panel-section { padding: 0; }
  .controls-section { display: none; }
  .event-log { max-height: 106px; }
  #unitDock { padding: 12px max(15px, var(--safe-area-right, env(safe-area-inset-right))) max(15px, var(--safe-area-bottom, env(safe-area-inset-bottom))) max(15px, var(--safe-area-left, env(safe-area-inset-left))); }
  .dock-header { align-items: flex-start; }
  .dock-header strong { max-width: 78vw; font-size: 13px; line-height: 1.35; }
  .unit-list { height: 116px; gap: 10px; padding-bottom: 8px; }
  .unit-card { flex-basis: 122px; min-height: 108px; padding: 10px; }
  .unit-name { font-size: 14px; }
  .unit-role { font-size: 10px; }
  .unit-skill-line { font-size: 9px; }
  .unit-stats { font-size: 10px; }
  .button, .level-picker select, .speed-button { min-height: 44px; }
  .dock-meta { display: none; }
  .toast { bottom: 186px; }
}

@media (max-width: 520px) {
  #app { grid-template-rows: auto minmax(420px, 1fr) auto; }
  #app.phase-battle, #app.phase-result { grid-template-rows: auto minmax(0, 1fr) 0; }
  #playArea { min-height: 420px; }
  #sidePanel {
    height: 154px;
    padding: 10px max(12px, var(--safe-area-right, env(safe-area-inset-right))) max(10px, var(--safe-area-bottom, env(safe-area-inset-bottom))) max(12px, var(--safe-area-left, env(safe-area-inset-left)));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
  }
  .panel-section { display: none; }
  .panel-heading { grid-column: 1; grid-row: 1; min-width: 0; }
  .panel-heading h1 { font-size: 17px; }
  .tip-card { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; max-width: none; margin: 0; padding: 8px; }
  .tip-card p { font-size: 10px; line-height: 1.4; }
  .battle-readout { grid-column: 1; grid-row: 2; align-self: end; min-width: 0; overflow: hidden; }
  .faction-row { gap: 4px; margin: 6px 0 5px; }
  .faction { gap: 4px; font-size: 10px; }
  .faction strong { font-size: 15px; }
  .floating-guide { left: 12px; bottom: 151px; max-width: calc(100% - 24px); font-size: 11px; }
  .camera-hint { display: none; }
  #topbar { gap: 8px; }
  .brand-title { font-size: 13px; }
  .brand-subtitle { font-size: 7px; }
  .brand-mark { width: 32px; height: 32px; font-size: 17px; }
  .level-picker select { min-width: 92px; font-size: 10px; }
  .top-actions .button { padding: 8px 8px; font-size: 10px; }
  .unit-list { height: 112px; }
  .unit-card { flex-basis: 116px; min-height: 104px; }
}

/* 手机横屏：保留战场主视图，把说明栏压缩到右侧，卡栏固定在底部。 */
@media (max-width: 900px) and (orientation: landscape) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  #app { min-height: 100dvh; height: 100dvh; grid-template-rows: 60px minmax(0, 1fr) 124px; }
  #app.phase-battle, #app.phase-result { grid-template-rows: 60px minmax(0, 1fr) 0; }
  #topbar {
    flex-wrap: nowrap; min-height: 60px; height: 60px; gap: 10px;
    padding: max(8px, var(--safe-area-top, env(safe-area-inset-top))) max(12px, var(--safe-area-right, env(safe-area-inset-right))) 8px max(12px, var(--safe-area-left, env(safe-area-inset-left)));
  }
  .brand-lockup { min-width: 170px; gap: 8px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 17px; }
  .brand-title { font-size: 13px; }
  .brand-subtitle { font-size: 7px; }
  .phase-stat, .budget-stat { display: none; }
  .level-picker { margin-left: auto; }
  .level-picker select { min-width: 112px; min-height: 44px; padding-block: 5px; font-size: 11px; }
  .top-actions { gap: 6px; }
  .top-actions .button { min-height: 44px; padding: 7px 10px; font-size: 11px; }

  #playArea { min-height: 0; }
  #battlefieldShell { inset: 0; }
  #sidePanel {
    inset: 0 0 0 auto; width: 236px; padding: 11px 12px 8px; overflow: hidden;
  }
  .panel-heading { display: block; }
  .panel-heading h1 { margin: 4px 0 2px; font-size: 18px; }
  .panel-heading p { font-size: 10px; }
  .level-number { display: none; }
  .tip-card { gap: 6px; margin: 9px 0 10px; padding: 7px 8px; }
  .tip-icon { font-size: 12px; }
  .tip-card p { font-size: 10px; line-height: 1.35; }
  .battle-readout { padding: 7px 0 9px; }
  .faction-row { gap: 3px; margin: 8px 0 7px; }
  .faction { gap: 4px; font-size: 10px; }
  .faction strong { font-size: 15px; }
  .panel-section { padding-top: 9px; }
  .event-log { min-height: 0; max-height: 54px; margin-top: 5px; }
  .event { padding: 3px 0; font-size: 9px; }
  #sidePanel .panel-section { display: none; }

  #unitDock { height: 124px; padding: 6px max(12px, var(--safe-area-right, env(safe-area-inset-right))) 0 max(12px, var(--safe-area-left, env(safe-area-inset-left))); }
  .dock-header { margin-bottom: 5px; }
  .dock-header strong { max-width: 70vw; margin-top: 2px; font-size: 11px; line-height: 1.2; }
  .dock-meta { display: block; font-size: 9px; }
  .unit-list { height: 74px; gap: 7px; padding: 0; }
  .unit-card { flex-basis: 104px; height: 74px; min-height: 0; padding: 7px; border-radius: 7px; }
  .unit-glyph { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; }
  .unit-price { font-size: 10px; }
  .unit-name { margin-top: 4px; font-size: 12px; }
  .unit-role { margin-top: 1px; font-size: 8px; }
  .unit-skill-line { font-size: 7px; }
  .unit-stats { margin-top: 4px; font-size: 8px; }
  .selected-mark { top: 4px; right: 5px; font-size: 9px; }
  .floating-guide { left: 10px; bottom: 10px; padding: 6px 8px; font-size: 9px; }
  .camera-hint { right: 10px; bottom: 10px; padding: 6px 8px; font-size: 9px; }
  .toast { bottom: 130px; font-size: 10px; }
}

/* 更窄的横屏：压缩次要文案，给战场和 44px 触控控件留出最低空间。 */
@media (max-width: 720px) and (orientation: landscape) {
  #app { grid-template-rows: 60px minmax(0, 1fr) 116px; }
  #app.phase-battle, #app.phase-result { grid-template-rows: 60px minmax(0, 1fr) 0; }
  .brand-lockup { min-width: 132px; gap: 6px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }
  .brand-title { font-size: 12px; }
  .brand-subtitle { display: none; }
  .level-picker select { min-width: 96px; font-size: 10px; }
  .top-actions { gap: 4px; }
  .top-actions .button { padding-inline: 7px; font-size: 10px; }
  #battlefieldShell { inset: 0; }
  #sidePanel {
    display: block;
    width: 204px;
    height: auto;
    padding: 11px 8px 8px;
  }
  .panel-heading h1 { font-size: 16px; line-height: 1.05; }
  .panel-heading p { font-size: 9px; }
  .tip-card { margin: 7px 0 7px; padding: 6px; }
  .tip-card p { font-size: 9px; line-height: 1.2; }
  .battle-readout { padding: 5px 0 6px; }
  .faction-row { margin: 5px 0 4px; }
  #unitDock { height: 116px; }
  .unit-list { height: 67px; gap: 6px; }
  .unit-card { flex-basis: 96px; height: 67px; padding: 6px; }
  .unit-glyph { width: 24px; height: 24px; flex-basis: 24px; }
  .unit-name { font-size: 11px; }
  .unit-role { font-size: 7px; }
  .unit-skill-line { font-size: 6px; }
  .unit-stats { font-size: 7px; }
}

/* 移动端横屏：战场占满可用宽度，说明栏改为可收缩悬浮层，开战后只留下地图。 */
@media (max-width: 900px) and (orientation: landscape) {
  #battlefieldShell { inset: 0; }
  #sidePanel {
    inset: 8px 8px auto auto; width: min(224px, 44vw); height: auto; max-height: 148px;
    padding: 9px 10px 8px; border: 1px solid var(--line); border-radius: 10px;
    background: rgba(6, 17, 29, .86); box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    overflow: hidden; backdrop-filter: blur(8px);
  }
  #panelToggle {
    position: absolute; top: 7px; right: 7px; z-index: 1; display: inline-flex;
    min-width: 42px; min-height: 38px;
  }
  .panel-heading { display: block; min-width: 0; padding-right: 48px; }
  .panel-heading h1 { margin: 3px 0 2px; font-size: 17px; line-height: 1.08; }
  .panel-heading p { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .level-number { display: none; }
  .tip-card { gap: 6px; margin: 7px 0 8px; padding: 6px 7px; }
  .tip-card p { font-size: 9px; line-height: 1.28; }
  .battle-readout { padding: 6px 0 7px; border: 0; }
  .faction-row { gap: 3px; margin: 6px 0 5px; }
  .faction { gap: 4px; font-size: 9px; }
  .faction strong { font-size: 14px; }
  #sidePanel .panel-section { display: none; }
  #app.is-panel-collapsed #sidePanel {
    width: auto; max-width: 48vw; max-height: 48px; padding: 7px 9px;
  }
  #app.is-panel-collapsed #sidePanel .tip-card,
  #app.is-panel-collapsed #sidePanel .battle-readout,
  #app.is-panel-collapsed #sidePanel .panel-section { display: none; }
  #app.is-panel-collapsed #sidePanel .panel-heading { padding: 0 46px 0 0; }
  #app.is-panel-collapsed #sidePanel .panel-heading h1 {
    margin: 0; color: #d9ece8; font-size: 12px; line-height: 1; white-space: nowrap;
  }
  #app.is-panel-collapsed #sidePanel .panel-heading p,
  #app.is-panel-collapsed #sidePanel .panel-heading .eyebrow { display: none; }
  #unitDock { position: relative; }
  .floating-guide { bottom: 10px; }
  .toast { bottom: 16px; }
}

@media (max-width: 720px) and (orientation: landscape) {
  #app { grid-template-rows: 56px minmax(0, 1fr) 112px; }
  #app.phase-battle, #app.phase-result { grid-template-rows: 56px minmax(0, 1fr) 0; }
  #topbar { min-height: 56px; height: 56px; padding-block: 6px; }
  #sidePanel { inset: 6px 6px auto auto; width: min(210px, 48vw); max-height: 132px; padding: 8px 8px 7px; }
  #panelToggle { top: 5px; right: 5px; min-width: 40px; min-height: 36px; }
  .panel-heading { padding-right: 44px; }
  .panel-heading h1 { font-size: 15px; }
  .panel-heading p { font-size: 8px; }
  .tip-card { margin: 6px 0 7px; padding: 5px 6px; }
  .tip-card p { font-size: 8px; }
  .battle-readout { padding: 5px 0 6px; }
  .faction-row { margin: 5px 0 4px; }
  #unitDock { height: 112px; }
  .unit-list { height: 64px; }
  .unit-card { height: 64px; }
  #app.is-panel-collapsed #sidePanel { max-width: 54vw; max-height: 44px; }
  #app.is-panel-collapsed #sidePanel .panel-heading h1 { font-size: 11px; }
}

/* 竖屏手机按实际长短边铺成横向游戏坐标。 */
html.is-auto-landscape,
html.is-auto-landscape body { width: 100%; height: 100%; overflow: hidden; }
html.is-auto-landscape { --auto-landscape-end-inset: clamp(72px, 14vw, 92px); }
html.is-auto-landscape #app.is-auto-landscape {
  position: fixed; inset: 0 auto auto 0;
  width: var(--viewport-long-edge, 100vh); height: var(--viewport-short-edge, 100vw);
  min-width: 0; min-height: 0; max-width: none; max-height: none; overflow: hidden;
  grid-template-rows: 56px minmax(0, 1fr);
  transform-origin: 0 0;
  transform: translateX(var(--viewport-short-edge, 100vw)) rotate(90deg);
}
html.is-auto-landscape #app.is-auto-landscape.phase-battle,
html.is-auto-landscape #app.is-auto-landscape.phase-result { grid-template-rows: 56px minmax(0, 1fr); }

#app.is-auto-landscape #topbar {
  flex-wrap: nowrap; min-height: 56px; height: 56px; gap: 8px; justify-content: space-between;
  padding: max(6px, var(--safe-area-right, env(safe-area-inset-right))) max(var(--auto-landscape-end-inset), var(--safe-area-bottom, env(safe-area-inset-bottom))) max(6px, var(--safe-area-left, env(safe-area-inset-left))) max(12px, var(--safe-area-top, env(safe-area-inset-top)));
}
#app.is-auto-landscape .brand-subtitle, #app.is-auto-landscape .phase-stat, #app.is-auto-landscape .budget-stat { display: none; }
#app.is-auto-landscape .top-actions { gap: 4px; margin-left: 0; }
#app.is-auto-landscape .top-actions .button { min-height: 44px; padding-inline: 7px; font-size: 10px; }
#app.is-auto-landscape #playArea { min-height: 0; }
#app.is-auto-landscape #battlefieldShell { inset: 0; }
#app.is-auto-landscape #sidePanel {
  inset: 6px 6px auto auto; width: min(210px, 48vh); height: auto; max-height: 132px;
  padding: 8px 8px 7px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(6, 17, 29, .86); box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  overflow: hidden; backdrop-filter: blur(8px);
}
#app.is-auto-landscape #panelToggle {
  position: absolute; top: 5px; right: 5px; z-index: 1; display: inline-flex;
  min-width: 40px; min-height: 36px;
}
#app.is-auto-landscape .panel-heading { display: block; min-width: 0; padding-right: 44px; }
#app.is-auto-landscape .panel-heading h1 { margin: 3px 0 2px; font-size: 15px; line-height: 1.08; }
#app.is-auto-landscape .panel-heading p { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.is-auto-landscape .level-number { display: none; }
#app.is-auto-landscape .tip-card { gap: 6px; margin: 6px 0 7px; padding: 5px 6px; }
#app.is-auto-landscape .tip-card p { font-size: 8px; line-height: 1.25; }
#app.is-auto-landscape .battle-readout { padding: 5px 0 6px; border: 0; }
#app.is-auto-landscape .faction-row { gap: 3px; margin: 5px 0 4px; }
#app.is-auto-landscape .faction { gap: 4px; font-size: 9px; }
#app.is-auto-landscape .faction strong { font-size: 14px; }
#app.is-auto-landscape #sidePanel .panel-section { display: none; }
#app.is-auto-landscape.is-panel-collapsed #sidePanel {
  width: auto; max-width: 54vh; max-height: 44px; padding: 7px 9px;
}
#app.is-auto-landscape.is-panel-collapsed #sidePanel .tip-card,
#app.is-auto-landscape.is-panel-collapsed #sidePanel .battle-readout,
#app.is-auto-landscape.is-panel-collapsed #sidePanel .panel-section { display: none; }
#app.is-auto-landscape.is-panel-collapsed #sidePanel .panel-heading { padding: 0 46px 0 0; }
#app.is-auto-landscape.is-panel-collapsed #sidePanel .panel-heading h1 {
  margin: 0; color: #d9ece8; font-size: 11px; line-height: 1; white-space: nowrap;
}
#app.is-auto-landscape.is-panel-collapsed #sidePanel .panel-heading p,
#app.is-auto-landscape.is-panel-collapsed #sidePanel .panel-heading .eyebrow { display: none; }
#app.is-auto-landscape #unitDock {
  height: 112px; padding: max(6px, var(--safe-area-right, env(safe-area-inset-right))) max(var(--auto-landscape-end-inset), var(--safe-area-bottom, env(safe-area-inset-bottom))) max(0px, var(--safe-area-left, env(safe-area-inset-left))) max(12px, var(--safe-area-top, env(safe-area-inset-top)));
}
#app.is-auto-landscape .dock-header { margin-bottom: 5px; }
#app.is-auto-landscape .dock-header strong { max-width: 70vw; margin-top: 2px; font-size: 11px; line-height: 1.2; }
#app.is-auto-landscape .dock-meta { display: block; font-size: 9px; }
#app.is-auto-landscape .unit-list { height: 64px; gap: 6px; padding: 0 var(--auto-landscape-end-inset) 0 0; scroll-padding-inline-end: var(--auto-landscape-end-inset); }
#app.is-auto-landscape .unit-card { flex-basis: 96px; height: 64px; min-height: 0; padding: 6px; }
#app.is-auto-landscape .unit-glyph { width: 24px; height: 24px; flex-basis: 24px; }
#app.is-auto-landscape .unit-name { font-size: 11px; }
#app.is-auto-landscape .unit-role { font-size: 7px; }
#app.is-auto-landscape .unit-skill-line { font-size: 6px; }
#app.is-auto-landscape .unit-stats { font-size: 7px; }
#app.is-auto-landscape .floating-guide { left: 10px; bottom: 10px; padding: 6px 8px; font-size: 9px; }
#app.is-auto-landscape .camera-hint { right: 10px; bottom: 10px; padding: 6px 8px; font-size: 9px; }
#app.is-auto-landscape .toast { bottom: 16px; font-size: 10px; }

/* 三栏战术布局：左侧上下滚动部署栏，中间完整战场，右侧任务与战况。 */
#app {
  --unit-rail-width: 230px;
  --info-rail-width: 300px;
  --info-rail-collapsed-width: 56px;
  grid-template-columns: var(--unit-rail-width) minmax(0, 1fr) var(--info-rail-width);
  grid-template-rows: 64px minmax(0, 1fr);
}
#topbar { grid-column: 1 / -1; grid-row: 1; }
#playArea { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; }
#battlefieldShell { inset: 0; }
#unitDock {
  grid-column: 1; grid-row: 2; height: auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; padding: 14px 10px 12px;
  border-top: 0; border-right: 1px solid var(--line);
  box-shadow: 10px 0 30px rgba(0, 0, 0, .2);
}
#unitDock .dock-header {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch;
  gap: 7px; margin-bottom: 8px;
}
#unitDock .dock-header strong { font-size: 11px; line-height: 1.35; }
#unitDock .dock-meta { font-size: 9px; line-height: 1.35; }
#unitDock .divider { display: none; }
#unitList {
  flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; min-height: 0;
  height: auto; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 3px 2px 8px;
  touch-action: pan-y; scrollbar-color: #234252 transparent;
}
#unitList .unit-card { flex: 0 0 auto; width: 100%; height: 92px; min-height: 0; }
#sidePanel {
  grid-column: 3; grid-row: 2; position: relative; inset: auto; width: auto; height: auto;
  min-width: 0; min-height: 0; max-height: none; border-left: 1px solid var(--line); overflow: auto;
}
#sidePanel #panelToggle {
  position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex;
  min-width: 42px; min-height: 40px;
}
#sidePanel .panel-heading { padding-right: 52px; }

#app.phase-battle, #app.phase-result {
  grid-template-columns: minmax(0, 1fr) var(--info-rail-width);
  grid-template-rows: 64px minmax(0, 1fr);
}
#app.phase-battle #playArea, #app.phase-result #playArea { grid-column: 1; grid-row: 2; }
#app.phase-battle #sidePanel, #app.phase-result #sidePanel { grid-column: 2; grid-row: 2; }
#app.is-panel-collapsed:not(.phase-battle):not(.phase-result) {
  grid-template-columns: var(--unit-rail-width) minmax(0, 1fr) var(--info-rail-collapsed-width);
}
#app.is-panel-collapsed.phase-battle, #app.is-panel-collapsed.phase-result {
  grid-template-columns: minmax(0, 1fr) var(--info-rail-collapsed-width);
}
#app.is-panel-collapsed #sidePanel { padding: 10px 8px; overflow: hidden; }
#app.is-panel-collapsed #sidePanel .tip-card,
#app.is-panel-collapsed #sidePanel .battle-readout,
#app.is-panel-collapsed #sidePanel .panel-section { display: none; }
#app.is-panel-collapsed #sidePanel .panel-heading { padding: 0 42px 0 0; }
#app.is-panel-collapsed #sidePanel .panel-heading p,
#app.is-panel-collapsed #sidePanel .panel-heading .eyebrow,
#app.is-panel-collapsed #sidePanel .level-number { display: none; }
#app.is-panel-collapsed #sidePanel .panel-heading h1 {
  margin: 0; color: #d9ece8; font-size: 12px; line-height: 1.1; white-space: nowrap;
}

/* 实际横屏手机：缩窄两侧栏，左侧卡片改为王者荣耀式上下滚动列表。 */
@media (max-width: 900px) and (orientation: landscape) {
  #app {
    --unit-rail-width: 112px; --info-rail-width: 204px; --info-rail-collapsed-width: 56px;
    grid-template-columns: var(--unit-rail-width) minmax(0, 1fr) var(--info-rail-width);
    grid-template-rows: 56px minmax(0, 1fr);
  }
  #topbar { grid-column: 1 / -1; grid-row: 1; }
  #playArea { grid-column: 2; grid-row: 2; }
  #unitDock { grid-column: 1; grid-row: 2; padding: 7px 6px 8px; }
  #unitDock .dock-header { gap: 3px; margin-bottom: 5px; }
  #unitDock .dock-header strong { font-size: 8px; line-height: 1.2; text-align: center; }
  #unitDock .dock-meta { font-size: 8px; text-align: center; }
  #unitList { gap: 6px; padding: 2px 1px 7px; }
  #unitList .unit-card { height: 82px; padding: 6px; }
  #unitList .unit-glyph { width: 24px; height: 24px; flex-basis: 24px; }
  #unitList .unit-name { font-size: 11px; }
  #unitList .unit-role { font-size: 7px; }
  #unitList .unit-skill-line { font-size: 6px; }
  #unitList .unit-stats { font-size: 7px; }
  #sidePanel { grid-column: 3; grid-row: 2; padding: 10px 8px; }
  #sidePanel #panelToggle { top: 6px; right: 5px; min-width: 40px; min-height: 36px; }
  #sidePanel .panel-heading { padding-right: 44px; }
  #sidePanel .panel-heading h1 { margin: 3px 0 2px; font-size: 15px; line-height: 1.08; }
  #sidePanel .panel-heading p { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sidePanel .level-number { display: none; }
  #sidePanel .tip-card { gap: 6px; margin: 6px 0 7px; padding: 5px 6px; }
  #sidePanel .tip-card p { font-size: 8px; line-height: 1.25; }
  #sidePanel .battle-readout { padding: 5px 0 6px; border: 0; }
  #sidePanel .faction-row { gap: 3px; margin: 5px 0 4px; }
  #sidePanel .faction { gap: 4px; font-size: 9px; }
  #sidePanel .faction strong { font-size: 14px; }
  #sidePanel .panel-section { display: block; padding-top: 9px; }
  #sidePanel .event-log { max-height: 86px; min-height: 48px; }
  #sidePanel .controls-section { display: block; }
  #sidePanel .speed-buttons { gap: 4px; }
  #sidePanel .speed-button { min-height: 36px; padding: 5px 2px; font-size: 10px; }
  #sidePanel .control-note { font-size: 8px; }
  #app.phase-battle, #app.phase-result { grid-template-columns: minmax(0, 1fr) var(--info-rail-width); grid-template-rows: 56px minmax(0, 1fr); }
  #app.is-panel-collapsed.phase-battle, #app.is-panel-collapsed.phase-result { grid-template-columns: minmax(0, 1fr) var(--info-rail-collapsed-width); }
}

/* 竖屏设备的页面级自动横屏也使用同一套左右部署栏/右侧 UI 逻辑。 */
#app.is-auto-landscape {
  --unit-rail-width: 112px; --info-rail-width: 204px; --info-rail-collapsed-width: 56px;
  grid-template-columns: var(--unit-rail-width) minmax(0, 1fr) var(--info-rail-width);
  grid-template-rows: 56px minmax(0, 1fr);
}
#app.is-auto-landscape.phase-battle, #app.is-auto-landscape.phase-result {
  grid-template-columns: minmax(0, 1fr) var(--info-rail-width);
  grid-template-rows: 56px minmax(0, 1fr);
}
#app.is-auto-landscape.is-panel-collapsed.phase-battle,
#app.is-auto-landscape.is-panel-collapsed.phase-result {
  grid-template-columns: minmax(0, 1fr) var(--info-rail-collapsed-width);
}
#app.is-auto-landscape #unitDock { grid-column: 1; grid-row: 2; height: auto; padding: 7px 6px 8px; }
#app.is-auto-landscape #unitDock .dock-header { gap: 3px; margin-bottom: 5px; }
#app.is-auto-landscape #unitDock .dock-header strong { font-size: 8px; line-height: 1.2; text-align: center; }
#app.is-auto-landscape #unitDock .dock-meta { font-size: 8px; text-align: center; }
#app.is-auto-landscape #unitList {
  gap: 6px; height: auto; padding: 2px 1px 7px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y;
}
#app.is-auto-landscape #unitList .unit-card { height: 82px; padding: 6px; }
#app.is-auto-landscape #unitList .unit-glyph { width: 24px; height: 24px; flex-basis: 24px; }
#app.is-auto-landscape #unitList .unit-name { font-size: 11px; }
#app.is-auto-landscape #unitList .unit-role { font-size: 7px; }
#app.is-auto-landscape #unitList .unit-skill-line { font-size: 6px; }
#app.is-auto-landscape #unitList .unit-stats { font-size: 7px; }
#app.is-auto-landscape #sidePanel {
  grid-column: 3; grid-row: 2; position: relative; inset: auto; width: auto; height: auto;
  max-height: none; padding: 10px 8px; overflow: auto;
}
#app.is-auto-landscape.phase-battle #sidePanel, #app.is-auto-landscape.phase-result #sidePanel { grid-column: 2; grid-row: 2; }
#app.is-auto-landscape #sidePanel #panelToggle { top: 6px; right: 5px; min-width: 40px; min-height: 36px; }
#app.is-auto-landscape #sidePanel .panel-heading { padding-right: 44px; }
#app.is-auto-landscape #sidePanel .panel-heading h1 { margin: 3px 0 2px; font-size: 15px; line-height: 1.08; }
#app.is-auto-landscape #sidePanel .panel-heading p { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.is-auto-landscape #sidePanel .level-number { display: none; }
#app.is-auto-landscape #sidePanel .tip-card { gap: 6px; margin: 6px 0 7px; padding: 5px 6px; }
#app.is-auto-landscape #sidePanel .tip-card p { font-size: 8px; line-height: 1.25; }
#app.is-auto-landscape #sidePanel .battle-readout { padding: 5px 0 6px; border: 0; }
#app.is-auto-landscape #sidePanel .faction-row { gap: 3px; margin: 5px 0 4px; }
#app.is-auto-landscape #sidePanel .faction { gap: 4px; font-size: 9px; }
#app.is-auto-landscape #sidePanel .faction strong { font-size: 14px; }
#app.is-auto-landscape #sidePanel .panel-section { display: block; padding-top: 9px; }
#app.is-auto-landscape #sidePanel .event-log { max-height: 86px; min-height: 48px; }
#app.is-auto-landscape #sidePanel .controls-section { display: block; }
#app.is-auto-landscape #sidePanel .speed-buttons { gap: 4px; }
#app.is-auto-landscape #sidePanel .speed-button { min-height: 36px; padding: 5px 2px; font-size: 10px; }
#app.is-auto-landscape #sidePanel .control-note { font-size: 8px; }

/* 纯战场 HUD：任务说明不占用视口，速度控制紧贴标题栏。 */
.top-speed-controls {
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
}
.top-speed-readout {
  min-width: 28px; color: var(--gold); text-align: center;
  font: 900 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.top-speed-controls .speed-button {
  min-width: 40px; min-height: 40px; padding: 6px 8px;
}

/* 右侧任务栏保留 DOM 数据绑定，但不再参与任何可视布局。 */
#sidePanel { display: none !important; }
#app {
  --unit-rail-width: 230px;
  grid-template-columns: var(--unit-rail-width) minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
}
#topbar { grid-column: 1 / -1; grid-row: 1; }
#playArea { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; }
#unitDock {
  grid-column: 1; grid-row: 2; min-width: 0; min-height: 0;
  height: auto; border-top: 0; border-right: 1px solid var(--line);
}
#battlefieldShell { inset: 0; }
#app.phase-battle, #app.phase-result {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
}
#app.phase-battle #playArea, #app.phase-result #playArea { grid-column: 1; grid-row: 2; }
#app.is-panel-collapsed:not(.phase-battle):not(.phase-result) {
  grid-template-columns: var(--unit-rail-width) minmax(0, 1fr);
}
#app.is-panel-collapsed.phase-battle, #app.is-panel-collapsed.phase-result {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  #topbar .budget-stat {
    display: flex !important; flex: 0 0 auto; min-width: auto;
    flex-direction: row; align-items: baseline; gap: 3px; white-space: nowrap;
  }
  #topbar .budget-stat .stat-kicker { font-size: 8px; letter-spacing: 0; }
  #topbar .budget-stat strong { font-size: 14px; }
  #topbar .budget-stat small { font-size: 8px; }
  #topbar .top-speed-controls { gap: 2px; }
  #topbar .top-speed-readout { display: none; }
  #topbar .top-speed-controls .speed-button {
    min-width: 38px; min-height: 44px; padding: 6px; font-size: 10px;
  }
}

/* 隐藏式开发修改器：只在连续按钮手势后出现，不增加战斗 HUD 信息。 */
.modifier-overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: clamp(10px, 3vw, 28px); overflow: auto;
  background: rgba(1, 7, 13, .84); backdrop-filter: blur(14px);
}
.modifier-panel {
  width: min(1040px, 100%); max-height: min(820px, calc(100% - 4px)); min-height: 0;
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border: 1px solid rgba(99, 224, 203, .34); border-radius: 14px;
  background: linear-gradient(145deg, rgba(12, 35, 45, .98), rgba(7, 17, 29, .99) 68%), radial-gradient(circle at 92% 4%, rgba(244, 198, 106, .12), transparent 28%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
}
.modifier-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modifier-header h2 { margin: 6px 0 4px; font-size: 24px; letter-spacing: .03em; }
.modifier-header p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.modifier-close { flex: 0 0 auto; min-height: 44px; }
.modifier-status {
  padding: 8px 10px; border: 1px solid rgba(99, 224, 203, .18); border-radius: 7px;
  color: #b9d8d4; background: rgba(99, 224, 203, .06); font-size: 11px; line-height: 1.4;
}
.modifier-status.is-saved { color: #a8efbb; border-color: rgba(156, 246, 166, .32); background: rgba(156, 246, 166, .07); }
.modifier-status.is-warning { color: #ffd895; border-color: rgba(244, 198, 106, .34); background: rgba(244, 198, 106, .08); }
.modifier-tabs { display: flex; gap: 6px; flex: 0 0 auto; overflow-x: auto; }
.modifier-tab {
  min-height: 42px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 7px;
  color: #91a9ae; background: rgba(16, 36, 55, .72); cursor: pointer; font-size: 11px; font-weight: 900;
}
.modifier-tab.active { color: #06151b; border-color: var(--teal); background: var(--teal); }
.modifier-workspace {
  min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; overflow: hidden;
}
.modifier-browser {
  min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 11px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(3, 13, 23, .62); overflow: auto;
}
.modifier-select-row { display: flex; flex-direction: column; gap: 5px; color: #9bb1b4; font-size: 10px; font-weight: 900; }
.modifier-select-row select, .modifier-field input, .modifier-field select, .modifier-field textarea {
  width: 100%; min-height: 40px; border: 1px solid rgba(154, 197, 196, .18); border-radius: 6px;
  color: var(--ink); background: #0b2030; padding: 7px 9px; outline: none; font-size: 11px;
}
.modifier-select-row select:focus, .modifier-field input:focus, .modifier-field select:focus, .modifier-field textarea:focus { border-color: var(--teal); box-shadow: var(--focus-ring); }
.modifier-browser-note { margin-top: auto; padding: 10px; border-left: 2px solid var(--gold); background: rgba(244, 198, 106, .06); }
.modifier-browser-note strong { color: var(--gold); font-size: 11px; }
.modifier-browser-note p { margin: 5px 0 0; color: #8ea7ab; font-size: 10px; line-height: 1.55; }
.modifier-form {
  min-width: 0; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start; gap: 9px; padding: 2px 3px 8px 0; scrollbar-color: #234252 transparent;
}
.modifier-form-title { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; color: #d4e8e5; font-size: 15px; }
.modifier-form-title small { color: #6e898f; font-size: 9px; font-family: ui-monospace, monospace; font-weight: 700; }
.modifier-field { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #a7bdbf; font-size: 10px; font-weight: 900; }
.modifier-field.full { grid-column: 1 / -1; }
.modifier-field input[type="number"] { font-family: ui-monospace, monospace; }
.modifier-field textarea { min-height: 68px; resize: vertical; line-height: 1.45; }
.modifier-field small { color: #6f898e; font-size: 9px; font-weight: 600; line-height: 1.35; }
.modifier-enemy-section { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line); }
.modifier-enemy-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #c9dfdc; font-size: 11px; font-weight: 900; }
.modifier-small-button { min-height: 34px; padding: 6px 9px; border: 1px solid rgba(244, 198, 106, .3); border-radius: 6px; color: var(--gold); background: rgba(244, 198, 106, .07); cursor: pointer; font-size: 10px; font-weight: 900; }
.modifier-enemy-list { display: flex; flex-direction: column; gap: 7px; }
.modifier-enemy-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) repeat(5, minmax(62px, .75fr)) 34px; gap: 6px; align-items: end; padding: 7px; border: 1px solid rgba(154, 197, 196, .1); border-radius: 7px; background: rgba(16, 36, 55, .42); }
.modifier-enemy-row .modifier-field { gap: 3px; font-size: 9px; }
.modifier-enemy-row input, .modifier-enemy-row select { min-height: 36px; padding: 6px; font-size: 10px; }
.modifier-remove-button { min-width: 34px; min-height: 36px; border: 1px solid rgba(255, 121, 106, .28); border-radius: 6px; color: #ff9a8e; background: rgba(255, 121, 106, .08); cursor: pointer; font-size: 15px; }
.modifier-empty { grid-column: 1 / -1; padding: 18px; color: #81999e; border: 1px dashed var(--line); border-radius: 7px; text-align: center; font-size: 11px; }
.modifier-actions { display: flex; align-items: center; gap: 8px; padding-top: 2px; border-top: 1px solid var(--line); }
.modifier-actions-spacer { flex: 1 1 auto; }
.modifier-actions .button { min-height: 44px; }

@media (max-width: 720px) {
  .presentation-card { width: min(100%, 430px); max-height: calc(var(--viewport-short-edge, 100dvh) - 14px); padding: 18px 15px 16px; }
  .presentation-header h2 { font-size: 20px; }
  .presentation-option { min-height: 44px; font-size: 11px; }
  .presentation-opacity-option { min-height: 64px; }
  .presentation-select-option { align-items: stretch; flex-direction: column; }
  .presentation-select-option select { width: 100%; }

  .modifier-overlay { padding: 7px; place-items: stretch; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  .modifier-panel { max-height: 100%; padding: 12px; gap: 9px; border-radius: 10px; }
  .modifier-header h2 { font-size: 19px; }
  .modifier-header p { font-size: 10px; }
  .modifier-workspace { grid-template-columns: 1fr; overflow: auto; }
  .modifier-browser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; overflow: visible; }
  .modifier-browser-note { grid-column: 1 / -1; margin-top: 0; }
  .modifier-form { overflow: visible; padding-right: 0; }
  .modifier-enemy-row { grid-template-columns: minmax(105px, 1fr) repeat(5, minmax(54px, .75fr)) 34px; }
  .modifier-actions { flex-wrap: wrap; }
  .modifier-actions-spacer { display: none; }
  .modifier-actions .button { flex: 1 1 46%; min-width: 0; padding-inline: 8px; font-size: 10px; }
}

/* 实际横屏手机：左侧保留可上下滑动的部署栏，右侧全部还给战场。 */
@media (max-width: 900px) and (orientation: landscape) {
  #app {
    --unit-rail-width: 112px;
    grid-template-columns: var(--unit-rail-width) minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
  }
  #topbar { grid-column: 1 / -1; grid-row: 1; }
  #playArea { grid-column: 2; grid-row: 2; }
  #unitDock { grid-column: 1; grid-row: 2; height: auto; }
  #unitList {
    flex: 1 1 auto; width: 100%; height: auto; min-height: 0;
    overflow-x: hidden; overflow-y: auto; touch-action: pan-y;
  }
  #app.phase-battle, #app.phase-result {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
  }
  #app.phase-battle #playArea, #app.phase-result #playArea { grid-column: 1; grid-row: 2; }
}

/* 竖屏手机由脚本旋转成逻辑横屏，仍使用同一套纯战场布局。 */
#app.is-auto-landscape {
  --unit-rail-width: 112px;
  grid-template-columns: var(--unit-rail-width) minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
}
#app.is-auto-landscape #unitDock { grid-column: 1; grid-row: 2; height: auto; }
#app.is-auto-landscape #playArea { grid-column: 2; grid-row: 2; }
#app.is-auto-landscape .budget-stat { display: flex !important; }
#app.is-auto-landscape.phase-battle, #app.is-auto-landscape.phase-result {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
}
#app.is-auto-landscape.phase-battle #playArea,
#app.is-auto-landscape.phase-result #playArea { grid-column: 1; grid-row: 2; }

/* 手机结算页：自动横屏的物理宽度只有短边，卡片高度必须回到短边内。 */
@media (max-width: 900px) {
  #resultOverlay {
    padding: 10px;
    overflow: auto;
    place-items: center;
    align-content: center;
  }
  .result-card {
    width: min(520px, calc(100% - 20px));
    padding: 16px 20px 14px;
  }
  .result-stamp { height: 20px; margin-bottom: 6px; padding-inline: 7px; font-size: 9px; }
  .result-card h2 { margin: 4px 0 2px; font-size: 28px; line-height: 1.05; }
  .result-card > p { margin-bottom: 10px; font-size: 11px; line-height: 1.28; }
  .result-stats div { gap: 2px; padding: 7px 0; }
  .result-stats div:nth-child(even) { padding-left: 11px; }
  .result-stats span, .rating-row span, .result-stats small { font-size: 9px; }
  .result-stats strong { font-size: 15px; }
  .rating-row { gap: 8px; padding: 9px 0 10px; }
  .rating-row strong { font-size: 32px; }
  .rating-row small { font-size: 9px; }
  .result-actions { justify-content: stretch; gap: 8px; }
  .result-actions .button { flex: 1; min-width: 0; min-height: 44px; padding-inline: 8px; font-size: 12px; }
}

/* 方格纸涂鸦皮肤：UI 与用户提供的地图统一为纸张、蓝灰墨线和蜡笔强调色。 */
:root {
  color-scheme: light;
  --ink: #2e3c50;
  --muted: #687381;
  --dim: #858078;
  --line: rgba(68, 93, 119, .26);
  --line-strong: rgba(68, 93, 119, .42);
  --panel: rgba(244, 235, 218, .96);
  --panel-strong: #f8edda;
  --surface-0: #d9ccb6;
  --surface-1: #eee1cc;
  --surface-2: #fbf2df;
  --radius-control: 5px;
  --radius-panel: 7px;
  --focus-ring: 0 0 0 3px rgba(91, 116, 153, .28);
  --teal: #5c739a;
  --gold: #d49b2f;
  --red: #c96b5d;
  --blue: #627ba8;
  --paper-grid: repeating-linear-gradient(0deg, rgba(83, 111, 137, .095) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(83, 111, 137, .095) 0 1px, transparent 1px 32px);
  --paper-shadow: 3px 4px 0 rgba(73, 70, 62, .2);
  --shadow: 0 18px 42px rgba(73, 66, 55, .24);
}

html, body {
  background-color: #d8cbb6;
  color: var(--ink);
  background-image: var(--paper-grid);
}

#app {
  color: var(--ink);
  background-color: #e0d3bd;
  background-image: var(--paper-grid), linear-gradient(135deg, rgba(255, 251, 238, .72), rgba(205, 191, 168, .4));
}

#topbar, #unitDock, #sidePanel {
  color: var(--ink);
  border-color: var(--line-strong);
  background-color: var(--panel);
  background-image: var(--paper-grid), linear-gradient(135deg, rgba(255, 250, 235, .9), rgba(228, 214, 190, .82));
  box-shadow: var(--paper-shadow);
}

#topbar {
  border-bottom-width: 2px;
  box-shadow: 0 3px 0 rgba(73, 70, 62, .14), 0 8px 20px rgba(73, 66, 55, .13);
}

.brand-mark {
  border: 2px solid #536b91;
  border-radius: 8px 6px 9px 5px;
  color: #fff9e9;
  background: #6b80a4;
  box-shadow: 3px 3px 0 rgba(73, 70, 62, .24);
}
.brand-title, .top-stat strong { color: var(--ink); }
.brand-subtitle, .eyebrow, .stat-kicker { color: #7c7c76 !important; }
.budget-stat strong { color: #b87820; }
.budget-stat small { color: #9a742e; }
.top-speed-readout { color: #667a9b !important; }

.level-picker select, .presentation-select-option select,
.modifier-select-row select, .modifier-field input, .modifier-field select, .modifier-field textarea {
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 4px 6px 5px 4px;
  background-color: rgba(250, 241, 222, .96);
  background-image: var(--paper-grid);
  box-shadow: 2px 2px 0 rgba(73, 70, 62, .12);
}
.level-picker select:focus, .modifier-select-row select:focus, .modifier-field input:focus, .modifier-field select:focus, .modifier-field textarea:focus { border-color: var(--teal); }

.button, .speed-button, .panel-toggle, .modifier-tab, .modifier-small-button, .modifier-remove-button {
  color: var(--ink);
  border: 2px solid var(--line-strong);
  border-radius: 5px 7px 4px 6px;
  background-color: rgba(248, 237, 216, .95);
  background-image: var(--paper-grid);
  box-shadow: 2px 3px 0 rgba(73, 70, 62, .18);
}
.button:hover, .speed-button:hover, .panel-toggle:hover, .modifier-tab:hover, .modifier-small-button:hover { border-color: var(--red); background-color: #fff4df; }
.button-primary, .speed-button.active, .modifier-tab.active {
  color: #fff9e9;
  border-color: #a6732c;
  background-color: #dca83b;
  background-image: var(--paper-grid);
  box-shadow: 3px 3px 0 rgba(120, 82, 35, .25);
}
.button-ghost { color: #425673; background-color: rgba(239, 227, 205, .9); }
.speed-button { color: #536b8e; }

#playArea, #battlefieldShell { background-color: #e5d8c1; }
#battlefieldShell { box-shadow: inset 0 0 70px rgba(75, 65, 50, .16); }
#battlefieldShell::after {
  border: 2px solid rgba(71, 91, 115, .28);
  border-radius: 5px 8px 6px 7px;
  box-shadow: inset 0 0 30px rgba(75, 65, 50, .1), 3px 3px 0 rgba(73, 70, 62, .12);
}

.world-label, .effect-label, .floating-text, .floating-guide, .camera-hint {
  color: var(--ink);
  border-color: rgba(67, 88, 113, .46);
  border-width: 2px;
  border-radius: 3px 5px 4px 3px;
  background: rgba(250, 240, 220, .88);
  box-shadow: 2px 2px 0 rgba(73, 70, 62, .18);
  text-shadow: none;
  backdrop-filter: none;
}
.world-label.enemy { border-color: rgba(180, 76, 68, .62); }
.world-label.retreat { border-color: rgba(184, 126, 33, .72); color: #8e611d; }
.effect-label { color: var(--effect-color, #5c739a); background: rgba(250, 240, 220, .92); box-shadow: 2px 2px 0 rgba(73, 70, 62, .15); }
.effect-label::before { box-shadow: none; }
.floating-text { background: rgba(250, 240, 220, .9); box-shadow: 2px 2px 0 rgba(73, 70, 62, .14); }
.floating-text.heal { background: rgba(226, 240, 211, .92); }
.floating-guide, .camera-hint { color: #5e6f82; }
.guide-dot { background: var(--teal); box-shadow: none; }
.guide-dot-battle { background: var(--gold); box-shadow: none; }

#sidePanel .panel-heading h1, #sidePanel .panel-heading p, #sidePanel .faction,
#sidePanel .event, #sidePanel .control-note, #sidePanel .section-title,
#sidePanel .readout-title, #sidePanel .versus { color: var(--ink) !important; }
#sidePanel .panel-heading p, #sidePanel .control-note, #sidePanel .readout-title, #sidePanel .section-title, #sidePanel .versus { color: #738091 !important; }
#sidePanel .level-number { color: rgba(91, 116, 153, .28); }
#sidePanel .tip-card { border: 2px solid rgba(205, 151, 42, .42); border-left: 4px solid var(--gold); border-radius: 4px 7px 5px 4px; background: rgba(244, 198, 106, .18); box-shadow: 2px 3px 0 rgba(73, 70, 62, .12); }
#sidePanel .tip-card p { color: #5d6670; }
#sidePanel .battle-readout { border-color: var(--line); }
#sidePanel .progress-track { background: rgba(201, 107, 93, .22); border: 1px solid rgba(67, 88, 113, .22); }
#sidePanel .progress-track span { background: linear-gradient(90deg, #5d789f, #8aa2bf); }
#sidePanel .faction-player i { background: #5d789f; box-shadow: none; }
#sidePanel .faction-enemy i { background: var(--red); box-shadow: none; }
#sidePanel .faction-player strong { color: #526b91; }
#sidePanel .faction-enemy strong { color: #b65750; }
#sidePanel .event { border-bottom-color: rgba(68, 93, 119, .14); }
#sidePanel .event:first-child { color: #3e5169 !important; }
#sidePanel .event.skill { color: #a16e1d !important; }
#sidePanel .event.reward { color: #4d7c55 !important; }
#sidePanel .event.danger { color: #ad5149 !important; }
#sidePanel .speed-button.active { color: #fff9e9 !important; }

#unitDock .dock-header strong, #unitDock .dock-meta, #unitDock .unit-name,
#unitDock .unit-role, #unitDock .unit-stats, #unitDock .unit-stats b { color: var(--ink); }
#unitDock .dock-meta, #unitDock .unit-role, #unitDock .unit-stats { color: #738091; }
#unitDock .dock-meta #deployedCount { color: #526b91; }
.unit-card {
  color: var(--ink);
  border: 2px solid rgba(68, 93, 119, .34);
  border-radius: 4px 7px 5px 6px;
  background-color: rgba(249, 239, 219, .94);
  background-image: var(--paper-grid), linear-gradient(145deg, rgba(255, 252, 239, .72), rgba(226, 211, 186, .58));
  box-shadow: 2px 3px 0 rgba(73, 70, 62, .18);
}
.unit-card:hover { border-color: #bd6656; box-shadow: 3px 4px 0 rgba(73, 70, 62, .22); }
.unit-card.selected { border-color: #55709a; background-color: rgba(224, 233, 237, .96); box-shadow: 3px 4px 0 rgba(73, 70, 62, .2); }
.unit-card.drop-target { border-color: #bd8326; box-shadow: 0 0 0 2px rgba(212, 155, 47, .24), 3px 4px 0 rgba(73, 70, 62, .2); }
.unit-glyph { border-color: rgba(68, 93, 119, .5); border-radius: 4px 6px 5px 4px; box-shadow: 2px 2px 0 rgba(73, 70, 62, .12); }
.unit-glyph { background-position: center; background-color: rgba(223, 211, 189, .72); image-rendering: auto; }
.unit-card.selected .unit-glyph { border-color: #526b91; box-shadow: 2px 2px 0 rgba(73, 70, 62, .16), 0 0 0 2px rgba(82, 107, 145, .12); }
.unit-price, .unit-skill-line { color: #a36e1d; }
.selected-mark { color: #526b91; }

.overlay, .modifier-overlay { background: rgba(67, 59, 48, .42); backdrop-filter: blur(4px); }
.result-card, .presentation-card, .modifier-panel {
  color: var(--ink);
  border: 2px solid rgba(68, 93, 119, .44);
  border-radius: 6px 9px 7px 5px;
  background-color: rgba(247, 237, 218, .98);
  background-image: var(--paper-grid), linear-gradient(145deg, rgba(255, 251, 237, .88), rgba(228, 214, 190, .78));
  box-shadow: 5px 6px 0 rgba(73, 70, 62, .22);
}
.result-card h2, .presentation-header h2, .modifier-header h2, .modifier-form-title { color: var(--ink); }
.result-card > p, .presentation-note, .modifier-header p { color: #65707d; }
.result-stats, .result-stats div:nth-child(odd), .result-stats div:nth-child(-n+2), .modifier-actions { border-color: var(--line); }
.result-stats span, .rating-row span, .result-stats small, .modifier-field, .modifier-field small, .modifier-select-row, .modifier-form-title small { color: #74808e; }
.result-stats strong { color: #40536d; }
.rating-row strong { color: #b47720; }
.result-stamp { color: #526b91; }
.result-card.lose .result-stamp { color: #b65750; }
.presentation-option { color: var(--ink); border: 2px solid var(--line); border-radius: 4px 6px 5px 4px; background: rgba(249, 239, 219, .86); background-image: var(--paper-grid); box-shadow: 2px 2px 0 rgba(73, 70, 62, .12); }
.presentation-option input[type="checkbox"] { accent-color: #5c739a; }
.modifier-browser { border-color: var(--line); background: rgba(238, 225, 204, .74); background-image: var(--paper-grid); }
.modifier-status { color: #526779; border-color: var(--line); background: rgba(92, 115, 154, .1); }
.modifier-status.is-saved { color: #4d7c55; border-color: rgba(77, 124, 85, .35); background: rgba(77, 124, 85, .1); }
.modifier-status.is-warning { color: #95661c; border-color: rgba(212, 155, 47, .45); background: rgba(212, 155, 47, .12); }
.modifier-tab { color: #536b8e; }
.modifier-browser-note { border-left-color: var(--gold); background: rgba(212, 155, 47, .12); }
.modifier-browser-note strong { color: #9a6b1c; }
.modifier-browser-note p, .modifier-enemy-heading { color: #65707d; }
.modifier-enemy-row { border-color: var(--line); background: rgba(249, 239, 219, .7); background-image: var(--paper-grid); }
.modifier-remove-button { color: #b65750; border-color: rgba(201, 107, 93, .42); background: rgba(201, 107, 93, .1); }
.modifier-empty { color: #74808e; border-color: var(--line); }

.toast { color: #40536d; border: 2px solid rgba(68, 93, 119, .42); border-radius: 4px 7px 5px 4px; background: rgba(249, 239, 219, .96); background-image: var(--paper-grid); box-shadow: 3px 4px 0 rgba(73, 70, 62, .2); }
.loading-screen { color: #526779; background-color: #e0d3bd; background-image: var(--paper-grid), linear-gradient(135deg, rgba(255, 251, 238, .78), rgba(205, 191, 168, .38)); }
.loader-ring { border-color: rgba(92, 115, 154, .24); border-top-color: #5c739a; }
.webgl-fallback { color: #a64f48; background: rgba(249, 239, 219, .96); border-color: rgba(201, 107, 93, .5); box-shadow: 3px 4px 0 rgba(73, 70, 62, .2); }
.webgl-fallback span { color: #65707d; }

/* 首屏涂鸦舞台：角色贴图轻微演戏，按钮本身始终固定在原点击区域。 */
.start-menu-overlay {
  position: fixed; inset: 0; z-index: 9; display: grid; place-items: center;
  padding: max(12px, var(--safe-area-top, env(safe-area-inset-top))) max(14px, var(--safe-area-right, env(safe-area-inset-right))) max(12px, var(--safe-area-bottom, env(safe-area-inset-bottom))) max(14px, var(--safe-area-left, env(safe-area-inset-left)));
  overflow: auto; overscroll-behavior: contain; background: rgba(71, 63, 51, .58);
  background-image: radial-gradient(ellipse at 50% 4%, rgba(255, 250, 229, .72), transparent 65%);
  backdrop-filter: blur(3px);
}
.start-menu-card {
  width: min(100%, 1060px); max-height: calc(100dvh - 24px); overflow: auto;
  padding: clamp(16px, 3vw, 30px); border: 3px solid #536b91; border-radius: 8px 12px 7px 10px;
  color: #3f4e65; background-color: rgba(248, 239, 219, .98);
  background-image: var(--paper-grid), linear-gradient(150deg, rgba(255, 251, 236, .98), rgba(228, 215, 192, .96));
  box-shadow: 7px 8px 0 rgba(56, 54, 48, .25), inset 0 0 0 2px rgba(255, 255, 255, .58);
}
.start-menu-heading { position: relative; padding: 0 0 14px; text-align: center; }
.start-menu-eyebrow { color: #768094; font: 900 9px/1.2 ui-monospace, monospace; letter-spacing: .2em; }
.start-menu-heading h1 {
  width: fit-content; max-width: 100%; margin: 7px auto 2px; color: #465c7d; font-size: clamp(27px, 5vw, 45px);
  font-weight: 1000; letter-spacing: .08em; line-height: 1.13; text-shadow: 2px 2px 0 #d8c9a9;
  animation: menu-title-wobble 4.8s ease-in-out infinite;
}
.start-menu-heading p { margin: 7px 0 0; color: #707473; font-size: clamp(11px, 1.7vw, 14px); }
.start-menu-layout { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(12px, 2.4vw, 24px); align-items: stretch; }
.menu-battle-scene {
  position: relative; min-width: 0; min-height: 290px; overflow: hidden; isolation: isolate;
  border: 3px solid rgba(83, 107, 145, .74); border-radius: 10px 6px 12px 7px;
  background-color: #d6dfd4;
  background-image: linear-gradient(180deg, rgba(249, 245, 223, .48) 0 59%, rgba(188, 195, 163, .38) 59% 61%, rgba(194, 174, 135, .48) 61%), var(--paper-grid);
  box-shadow: 4px 5px 0 rgba(73, 70, 62, .16), inset 0 -28px rgba(115, 104, 76, .08);
}
.menu-battle-scene::before, .menu-battle-scene::after {
  position: absolute; z-index: -1; content: ""; pointer-events: none; border: 3px solid rgba(181, 113, 74, .6);
  border-radius: 48% 52% 45% 55%; transform: rotate(-7deg);
}
.menu-battle-scene::before { width: 118px; height: 54px; left: 11%; bottom: 15%; border-right-color: transparent; }
.menu-battle-scene::after { width: 90px; height: 38px; right: 12%; top: 15%; border-left-color: transparent; border-color: rgba(83, 107, 145, .42); }
.menu-fighter {
  position: absolute; z-index: 1; bottom: 11%; display: grid; justify-items: center; gap: 3px;
  min-width: 72px; color: #394c68; font-size: 11px; font-weight: 950; text-shadow: 1px 1px #f8efd9;
  pointer-events: none;
}
.menu-fighter-player { left: 18%; }
.menu-fighter-enemy { right: 18%; }
.menu-fighter-sprite {
  display: block; width: clamp(64px, 10vw, 98px); height: clamp(64px, 10vw, 98px);
  background-repeat: no-repeat; background-color: rgba(255, 248, 225, .16); image-rendering: auto;
  transform-origin: 50% 90%;
}
.menu-fighter-player .menu-fighter-sprite { animation: menu-battle-player 2.35s ease-in-out infinite; }
.menu-fighter-enemy .menu-fighter-sprite { animation: menu-battle-enemy 2.35s ease-in-out -1.08s infinite; }
.menu-fighter-name { padding: 2px 6px; border: 1.5px solid rgba(83, 107, 145, .65); border-radius: 4px 6px 3px 5px; background: rgba(255, 248, 225, .85); }
.menu-doodle { position: absolute; z-index: 2; color: #b0604e; font-weight: 1000; pointer-events: none; user-select: none; }
.menu-doodle-star { top: 18%; left: 40%; color: #c99335; font-size: 31px; transform: rotate(-9deg); animation: menu-star-twinkle 2.35s steps(2, end) -1.05s infinite; }
.menu-doodle-boom { top: 40%; left: 53%; padding: 3px 8px; border: 2px solid #b0604e; border-radius: 44% 55% 48% 51%; background: rgba(255, 246, 218, .78); transform: rotate(8deg); animation: menu-doodle-pop 2.35s steps(2, end) -.88s infinite; }
.menu-doodle-speed { right: 8%; bottom: 31%; color: #627b9c; font-size: 14px; transform: rotate(-11deg); animation: menu-speed-swoosh 2.35s ease-out -.52s infinite; }
.menu-doodle-cloud { top: 10%; left: 14%; color: #617ca0; font-size: 27px; animation: menu-question-wiggle 2s ease-in-out infinite; }
.start-menu-level-section { min-width: 0; display: flex; flex-direction: column; }
.start-menu-section-heading { color: #495f80; font-size: 18px; font-weight: 1000; letter-spacing: .06em; }
.start-menu-level-note { margin: 4px 0 10px; color: #717574; font-size: 11px; }
.start-menu-level-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; min-height: 0; max-height: 286px;
  overflow: auto; padding: 3px 5px 7px 2px; overscroll-behavior: contain;
}
.menu-level-card {
  position: relative; min-width: 0; min-height: 53px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto; align-items: center; column-gap: 7px; padding: 6px 7px;
  border: 2px solid rgba(83, 107, 145, .48); border-radius: 4px 7px 5px 6px; color: #4a5d79;
  background: rgba(255, 249, 231, .82); box-shadow: 2px 2px 0 rgba(73, 70, 62, .13);
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.menu-level-card:hover:not(:disabled) { border-color: #b26e50; background-color: #fff7df; }
.menu-level-card:focus-visible { outline: 3px solid #b87820; outline-offset: 2px; }
.menu-level-number { grid-row: 1 / 3; color: #7585a0; font: 950 17px/1 ui-monospace, monospace; }
.menu-level-name { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.menu-level-state { color: #71835b; font-size: 9px; line-height: 1.2; }
.menu-level-card.completed { border-color: rgba(105, 134, 86, .6); }
.menu-level-card.selected { border-color: #b87820; background-color: rgba(255, 235, 183, .9); box-shadow: 3px 3px 0 rgba(150, 102, 39, .18); }
.menu-level-card.locked { color: #85837e; background-color: rgba(222, 215, 202, .7); background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(98, 96, 88, .04) 9px 12px); }
.menu-level-card:disabled { cursor: not-allowed; }
.menu-level-card:disabled .menu-level-number, .menu-level-card:disabled .menu-level-state { color: #87847f; }
.start-menu-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 17px; }
.start-menu-actions .button { min-width: 132px; min-height: 46px; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
.start-menu-actions .menu-continue-button { min-width: 206px; }
.start-menu-actions .button:hover, .start-menu-actions .button:active,
.top-actions .menu-home-button:hover, .top-actions .menu-home-button:active { transform: none; }
.menu-home-button { white-space: nowrap; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }

/* 点击区域由固定的 level card/button 盒子决定，趣味动效仅作用在标题或非交互贴图上。 */
@keyframes menu-title-wobble { 0%, 100% { transform: rotate(-.25deg); } 50% { transform: rotate(.25deg); } }
@keyframes menu-battle-player {
  0%, 18%, 100% { transform: translate(0, 0) rotate(-2deg); }
  30% { transform: translate(7px, -2px) rotate(5deg); }
  38% { transform: translate(9px, 0) rotate(9deg); }
  47% { transform: translate(-3px, -2px) rotate(-7deg); }
  58% { transform: translate(0, 0) rotate(-2deg); }
}
@keyframes menu-battle-enemy {
  0%, 20%, 100% { transform: translate(0, -1px) rotate(2deg); }
  33% { transform: translate(-5px, -2px) rotate(-5deg); }
  41% { transform: translate(-8px, 0) rotate(-8deg); }
  50% { transform: translate(3px, -2px) rotate(7deg); }
  61% { transform: translate(0, -1px) rotate(2deg); }
}
@keyframes menu-doodle-pop { 0%, 28%, 100% { transform: rotate(8deg) scale(.97); } 38%, 47% { transform: rotate(11deg) scale(1.04); } 54% { transform: rotate(7deg) scale(.98); } }
@keyframes menu-star-twinkle { 0%, 30%, 100% { transform: rotate(-9deg) scale(.92); opacity: .76; } 39%, 49% { transform: rotate(4deg) scale(1.08); opacity: 1; } 57% { transform: rotate(-12deg) scale(.96); opacity: .84; } }
@keyframes menu-speed-swoosh { 0%, 100% { transform: translateX(0) rotate(-11deg); opacity: .62; } 26% { transform: translateX(-3px) rotate(-13deg); opacity: .95; } 40% { transform: translateX(3px) rotate(-9deg); opacity: .8; } 56% { transform: translateX(0) rotate(-11deg); opacity: .62; } }
@keyframes menu-question-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.menu-motion-reduced .start-menu-heading h1,
.menu-motion-reduced .menu-fighter-sprite,
.menu-motion-reduced .menu-doodle { animation: none !important; }
.menu-motion-reduced .start-menu-heading h1,
.menu-motion-reduced .menu-doodle-star,
.menu-motion-reduced .menu-doodle-speed { transform: none; }
.presentation-option input[type="checkbox"] { min-width: 20px; min-height: 20px; }

@media (max-width: 720px) {
  .start-menu-overlay { padding: max(8px, var(--safe-area-top, env(safe-area-inset-top))) max(8px, var(--safe-area-right, env(safe-area-inset-right))) max(8px, var(--safe-area-bottom, env(safe-area-inset-bottom))) max(8px, var(--safe-area-left, env(safe-area-inset-left))); }
  .start-menu-card { width: min(100%, 560px); padding: 15px 13px; }
  .start-menu-heading { padding-bottom: 10px; }
  .start-menu-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .menu-battle-scene { min-height: clamp(132px, 26vh, 220px); }
  .menu-fighter { bottom: 5%; }
  .menu-fighter-sprite { width: clamp(54px, 16vw, 78px); height: clamp(54px, 16vw, 78px); }
  .menu-doodle-star { top: 8%; }
  .menu-doodle-cloud { top: 6%; }
  .start-menu-level-list { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: min(220px, 30vh); gap: 5px; }
  .menu-level-card { min-height: 48px; padding: 5px; column-gap: 5px; }
  .menu-level-name { font-size: 9px; }
  .start-menu-actions { padding-top: 12px; }
  .start-menu-actions .button { min-width: 108px; }
  .start-menu-actions .menu-continue-button { min-width: 0; flex: 1; }
  .top-actions .menu-home-button { min-width: 52px; }
}
@media (max-width: 360px) {
  .start-menu-level-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .start-menu-heading h1 { letter-spacing: .03em; }
  .menu-level-card { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Full-screen start menu: the battle roster is the background and all controls stay fixed. */
.start-menu-overlay {
  position: fixed; inset: 0; z-index: 9; display: grid; place-items: stretch;
  width: 100vw; height: 100vh; height: 100dvh; padding: 0; overflow: hidden;
  overscroll-behavior: contain; background: #e5dcc9; backdrop-filter: none;
}
.start-menu-card {
  position: relative; isolation: isolate; width: 100%; min-width: 0; height: 100%; max-height: none; overflow: hidden;
  padding: 0; border: 0; border-radius: 0; color: #3f4e65; background: #e5dcc9; box-shadow: none;
}
.start-menu-heading {
  position: absolute; z-index: 3; top: max(18px, calc(var(--safe-area-top, env(safe-area-inset-top)) + 14px)); left: clamp(16px, 3.4vw, 54px);
  width: min(460px, 42vw); padding: clamp(14px, 2vw, 22px); border-left: 5px solid #536b91;
  border-radius: 3px 8px 5px 4px; text-align: left; color: #3f4e65;
  background: rgba(248, 239, 219, .91); box-shadow: 4px 5px 0 rgba(56, 54, 48, .16);
}
.start-menu-eyebrow { color: #768094; font: 900 9px/1.2 ui-monospace, monospace; letter-spacing: .2em; }
.start-menu-heading h1 {
  width: fit-content; max-width: 100%; margin: 7px 0 2px; color: #465c7d; font-size: clamp(32px, 4.4vw, 58px);
  font-weight: 1000; letter-spacing: .06em; line-height: 1.13; text-shadow: 2px 2px 0 #d8c9a9;
  animation: menu-title-wobble 4.8s ease-in-out infinite;
}
.start-menu-heading p { margin: 7px 0 0; color: #626d68; font-size: clamp(12px, 1.4vw, 15px); }
.start-menu-layout { position: absolute; z-index: 1; inset: 0; display: block; }
.menu-battle-scene {
  position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate;
  border: 0; border-radius: 0; background-color: #d6dfd4;
  background-image: linear-gradient(180deg, rgba(249, 245, 223, .14) 0 58%, rgba(188, 195, 163, .32) 58% 60%, rgba(194, 174, 135, .4) 60%), var(--menu-map-texture, none);
  background-repeat: no-repeat, repeat; background-size: auto, 640px 640px; background-position: center, top left;
}
.menu-battle-scene::before, .menu-battle-scene::after {
  position: absolute; z-index: -1; content: ""; pointer-events: none; border: 3px solid rgba(181, 113, 74, .42);
  border-radius: 48% 52% 45% 55%; transform: rotate(-7deg);
}
.menu-battle-scene::before { width: 34vw; height: 11vh; left: 44%; bottom: 13%; border-right-color: transparent; }
.menu-battle-scene::after { width: 27vw; height: 9vh; right: 3%; top: 18%; border-left-color: transparent; border-color: rgba(83, 107, 145, .32); }
.menu-stage-label {
  position: absolute; z-index: 1; top: clamp(22px, 5vh, 54px); padding: 5px 10px;
  border: 2px solid currentColor; border-radius: 4px 7px 5px 6px; background: rgba(248, 239, 219, .74);
  font-size: clamp(10px, 1.2vw, 14px); font-weight: 950; letter-spacing: .06em; pointer-events: none;
}
.menu-stage-label-player { left: 42%; color: #536b91; transform: rotate(-2deg); }
.menu-stage-label-enemy { right: 7%; color: #a95c51; transform: rotate(2deg); }
.menu-fighter {
  position: absolute; right: auto; display: grid; justify-items: center; gap: 1px; width: max-content; min-width: 48px;
  color: #394c68; font-size: clamp(9px, .82vw, 12px); font-weight: 950; text-shadow: 1px 1px #f8efd9;
  pointer-events: none; user-select: none; transform: translateX(-50%);
}
.menu-fighter-player { animation: menu-fighter-player 3.8s ease-in-out var(--menu-delay, 0s) infinite; }
.menu-fighter-enemy { animation: menu-fighter-enemy 3.8s ease-in-out var(--menu-delay, -1.4s) infinite; }
.menu-fighter-sprite {
  display: block; width: clamp(58px, 7.4vw, 108px); height: clamp(58px, 7.4vw, 108px);
  background-repeat: no-repeat; background-color: transparent; image-rendering: auto; transform: scale(var(--menu-size, 1));
  transform-origin: 50% 92%;
}
.menu-fighter-player .menu-fighter-sprite { filter: drop-shadow(-3px 3px 0 rgba(83, 107, 145, .32)); }
.menu-fighter-enemy .menu-fighter-sprite { filter: drop-shadow(3px 3px 0 rgba(169, 92, 81, .32)); }
.menu-fighter-name {
  padding: 2px 5px; border: 1px solid rgba(83, 107, 145, .52); border-radius: 4px 6px 3px 5px;
  background: rgba(255, 248, 225, .8); white-space: nowrap;
}
.menu-fighter-enemy .menu-fighter-name { border-color: rgba(169, 92, 81, .48); }
.start-menu-level-section {
  position: absolute; z-index: 3; top: clamp(184px, 24vh, 260px); bottom: clamp(88px, 12vh, 112px);
  left: clamp(16px, 3.4vw, 54px); width: min(460px, 42vw); min-width: 0; display: flex; flex-direction: column;
  padding: clamp(12px, 1.7vw, 19px); border: 2px solid rgba(83, 107, 145, .68); border-radius: 7px 10px 6px 8px;
  background: rgba(248, 239, 219, .9); box-shadow: 5px 6px 0 rgba(56, 54, 48, .17); backdrop-filter: blur(3px);
}
.start-menu-section-heading { color: #495f80; font-size: 18px; font-weight: 1000; letter-spacing: .06em; }
.start-menu-level-note { margin: 4px 0 10px; color: #626d68; font-size: 12px; }
.start-menu-level-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; flex: 1; min-height: 0;
  gap: 7px; max-height: none; overflow: auto; padding: 3px 5px 7px 2px; overscroll-behavior: contain;
}
.menu-level-card {
  position: relative; min-width: 0; min-height: 53px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto; align-items: center; column-gap: 7px; padding: 6px 7px;
  border: 2px solid rgba(83, 107, 145, .48); border-radius: 4px 7px 5px 6px; color: #4a5d79;
  background: rgba(255, 249, 231, .82); box-shadow: 2px 2px 0 rgba(73, 70, 62, .13);
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.menu-level-card:hover:not(:disabled) { border-color: #b26e50; background-color: #fff7df; }
.menu-level-card:focus-visible { outline: 3px solid #b87820; outline-offset: 2px; }
.menu-level-number { grid-row: 1 / 3; color: #7585a0; font: 950 17px/1 ui-monospace, monospace; }
.menu-level-name { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.menu-level-state { color: #71835b; font-size: 9px; line-height: 1.2; }
.menu-level-card.completed { border-color: rgba(105, 134, 86, .6); }
.menu-level-card.selected { border-color: #b87820; background-color: rgba(255, 235, 183, .9); box-shadow: 3px 3px 0 rgba(150, 102, 39, .18); }
.menu-level-card.locked { color: #85837e; background-color: rgba(222, 215, 202, .7); background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(98, 96, 88, .04) 9px 12px); }
.menu-level-card:disabled { cursor: not-allowed; }
.menu-level-card:disabled .menu-level-number, .menu-level-card:disabled .menu-level-state { color: #87847f; }
.start-menu-actions {
  position: absolute; z-index: 3; left: clamp(16px, 3.4vw, 54px); bottom: max(12px, calc(var(--safe-area-bottom, env(safe-area-inset-bottom)) + 8px));
  width: min(460px, 42vw); display: flex; justify-content: flex-end; gap: 10px;
}
.start-menu-actions .button { min-width: 132px; min-height: 46px; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
.start-menu-actions .menu-continue-button { min-width: 206px; }
.start-menu-actions .button:hover, .start-menu-actions .button:active,
.top-actions .menu-home-button:hover, .top-actions .menu-home-button:active { transform: none; }
.menu-home-button { white-space: nowrap; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
@keyframes menu-title-wobble { 0%, 100% { transform: rotate(-.25deg); } 50% { transform: rotate(.25deg); } }
@keyframes menu-fighter-player {
  0%, 12%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  27% { transform: translate(calc(-50% + var(--menu-lunge, 16px)), -10px) rotate(5deg); }
  35% { transform: translate(calc(-50% + var(--menu-lunge, 16px)), 0) rotate(9deg); }
  47% { transform: translate(calc(-50% - 5px), -5px) rotate(-6deg); }
  58% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
}
@keyframes menu-fighter-enemy {
  0%, 16%, 100% { transform: translateX(-50%) translateY(0) rotate(2deg); }
  30% { transform: translate(calc(-50% + var(--menu-lunge, -16px)), -8px) rotate(-5deg); }
  38% { transform: translate(calc(-50% + var(--menu-lunge, -16px)), 0) rotate(-9deg); }
  50% { transform: translate(calc(-50% + 5px), -4px) rotate(6deg); }
  61% { transform: translateX(-50%) translateY(0) rotate(2deg); }
}
.menu-motion-reduced .start-menu-heading h1, .menu-motion-reduced .menu-fighter { animation: none !important; }
.menu-motion-reduced .menu-fighter { transform: translateX(-50%); }
@media (max-width: 720px) {
  .start-menu-heading { top: max(10px, calc(var(--safe-area-top, env(safe-area-inset-top)) + 8px)); left: 10px; width: min(440px, calc(100vw - 20px)); padding: 11px 14px; }
  .start-menu-heading h1 { margin-top: 4px; font-size: clamp(27px, 7vw, 40px); letter-spacing: .03em; }
  .start-menu-heading p { margin-top: 4px; font-size: 12px; }
  .menu-stage-label { top: 3%; }
  .menu-stage-label-player { left: 6%; }
  .menu-stage-label-enemy { right: 6%; }
  .menu-fighter-sprite { width: clamp(50px, 13vw, 78px); height: clamp(50px, 13vw, 78px); }
  .menu-fighter-name { font-size: 9px; }
  .start-menu-level-section {
    top: 37%; bottom: calc(72px + var(--safe-area-bottom, env(safe-area-inset-bottom))); left: 10px; width: calc(100vw - 20px);
    padding: 10px; background: rgba(248, 239, 219, .87);
  }
  .start-menu-section-heading { font-size: 16px; }
  .start-menu-level-note { margin: 3px 0 7px; font-size: 11px; }
  .start-menu-level-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; max-height: none; padding: 2px 3px 5px 1px; }
  .menu-level-card { min-height: 46px; padding: 5px; column-gap: 5px; }
  .menu-level-number { font-size: 15px; }
  .menu-level-name { font-size: 9px; }
  .menu-level-state { font-size: 8px; }
  .start-menu-actions { right: 10px; bottom: max(8px, calc(var(--safe-area-bottom, env(safe-area-inset-bottom)) + 6px)); left: 10px; width: auto; gap: 8px; }
  .start-menu-actions .button { min-width: 108px; min-height: 48px; }
  .start-menu-actions .menu-continue-button { min-width: 0; flex: 1; }
  .top-actions .menu-home-button { min-width: 52px; }
}
@media (max-width: 720px) and (orientation: landscape) {
  .start-menu-heading { top: max(6px, calc(var(--safe-area-top, env(safe-area-inset-top)) + 4px)); width: min(330px, 38vw); padding: 8px 11px; }
  .start-menu-heading h1 { font-size: clamp(23px, 4vw, 34px); }
  .start-menu-heading p { font-size: 10px; }
  .start-menu-level-section { top: 24%; right: auto; bottom: 58px; left: 10px; width: min(47vw, 430px); padding: 7px; }
  .start-menu-section-heading { font-size: 14px; }
  .start-menu-level-note { margin: 1px 0 4px; font-size: 9px; }
  .start-menu-level-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-height: none; }
  .menu-level-card { min-height: 34px; padding: 3px; }
  .menu-level-number { font-size: 12px; }
  .menu-level-name { font-size: 8px; }
  .menu-level-state { font-size: 7px; }
  .start-menu-actions { right: auto; bottom: 6px; left: 10px; width: min(47vw, 430px); gap: 6px; }
  .start-menu-actions .button { min-height: 42px; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .start-menu-level-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A real autoplay battle stays mounted behind the simple, centered title-screen UI. */
#app.menu-background-active {
  position: fixed; z-index: 0; inset: 0; display: block; width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden; transform: none; background: #e5dcc9;
}
#app.menu-background-active #topbar,
#app.menu-background-active > #sidePanel,
#app.menu-background-active > #unitDock { display: none !important; }
#app.menu-background-active #playArea {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  min-width: 0; min-height: 0; background: #e5dcc9;
}
#app.menu-background-active #battlefieldShell {
  position: absolute; inset: 0; width: 100%; height: 100%; box-shadow: none;
}
#app.menu-background-active #battlefieldShell::after,
#app.menu-background-active #worldLabels,
#app.menu-background-active .floating-guide,
#app.menu-background-active .camera-hint { display: none; }

.start-menu-overlay {
  z-index: 9; display: grid; place-items: center; padding: max(12px, var(--safe-area-top, env(safe-area-inset-top))) 12px max(12px, var(--safe-area-bottom, env(safe-area-inset-bottom)));
  background: transparent; backdrop-filter: none;
}
.start-menu-card {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden;
  background: transparent; box-shadow: none;
}
.start-menu-layout { position: absolute; z-index: 0; inset: 0; display: block; }
.menu-battle-scene { z-index: 0; background: transparent; }
.menu-stage-label { top: max(16px, calc(var(--safe-area-top, env(safe-area-inset-top)) + 14px)); z-index: 1; }
.menu-stage-label-player { left: clamp(14px, 3vw, 42px); }
.menu-stage-label-enemy { right: clamp(14px, 3vw, 42px); }
.menu-round-label {
  position: absolute; z-index: 1; top: max(52px, calc(var(--safe-area-top, env(safe-area-inset-top)) + 52px)); left: 50%;
  padding: 4px 10px; border: 1px dashed rgba(83, 107, 145, .52); border-radius: 5px 7px 4px 6px;
  color: #536b91; background: rgba(248, 239, 219, .74); font-size: 12px; font-weight: 900;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
}
.start-menu-heading {
  position: static; width: auto; padding: 0; border: 0; border-radius: 0; text-align: center;
  background: transparent; box-shadow: none;
}
.start-menu-heading h1 { margin: 8px 0 4px; font-size: clamp(30px, 4vw, 48px); }
.start-menu-heading p { margin: 8px 0 0; font-size: 15px; }
.start-menu-home,
.start-menu-level-section {
  position: relative; inset: auto; transform: none; z-index: 2; width: min(430px, calc(100vw - 32px)); min-width: 0; max-height: min(90dvh, 780px);
  padding: clamp(20px, 3.2vw, 34px); border: 2px solid rgba(83, 107, 145, .72); border-radius: 7px 11px 6px 9px;
  color: #3f4e65; background: rgba(248, 239, 219, .88); box-shadow: 5px 6px 0 rgba(56, 54, 48, .2);
  backdrop-filter: blur(4px);
}
.start-menu-home { text-align: center; }
.start-menu-home-actions { display: grid; gap: 11px; margin-top: 26px; }
.menu-main-action { width: 100%; min-height: 54px; font-size: 17px; }
.menu-exit-button { color: #626d68; }
.start-menu-hint { min-height: 20px; margin: 12px 0 -8px; color: #7a6654; font-size: 12px; }
.start-menu-level-section {
  display: flex; flex-direction: column; width: min(700px, calc(100vw - 28px));
  padding: clamp(14px, 2.4vw, 24px); overflow: hidden;
}
.start-menu-section-heading { font-size: 20px; }
.start-menu-level-note { margin-bottom: 12px; font-size: 13px; }
.start-menu-level-list {
  flex: 1 1 auto; min-height: 0; max-height: min(59dvh, 510px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.menu-level-card { min-height: 52px; padding: 6px 8px; }
.menu-level-name { font-size: 12px; }
.menu-level-state { font-size: 10px; }
.start-menu-actions {
  position: static; width: auto; display: flex; justify-content: space-between; gap: 10px; padding-top: 15px;
}
.start-menu-actions .button { min-height: 48px; }
.start-menu-actions .menu-continue-button { min-width: 190px; }
.presentation-over-menu { z-index: 11; background: rgba(248, 239, 219, .16); backdrop-filter: blur(2px); }

/* 竖屏手机自动转横屏时，主页、关卡与主页设置都随战场一起旋转。 */
html.is-auto-landscape .start-menu-overlay,
html.is-auto-landscape #presentationOverlay.presentation-over-menu {
  position: fixed; inset: auto; top: 0; left: 0; right: auto; bottom: auto;
  width: var(--viewport-long-edge, 100dvh); height: var(--viewport-short-edge, 100dvw);
  padding: max(12px, var(--safe-area-right, env(safe-area-inset-right))) max(var(--auto-landscape-end-inset), var(--safe-area-bottom, env(safe-area-inset-bottom))) max(12px, var(--safe-area-left, env(safe-area-inset-left))) max(12px, var(--safe-area-top, env(safe-area-inset-top))); overflow: hidden; transform-origin: 0 0;
  transform: translateX(var(--viewport-short-edge, 100dvw)) rotate(90deg);
}
html.is-auto-landscape .start-menu-home {
  width: min(430px, calc(var(--viewport-long-edge, 100dvh) - 32px));
  max-height: calc(var(--viewport-short-edge, 100dvw) - 24px);
}
html.is-auto-landscape .start-menu-level-section {
  width: min(700px, calc(var(--viewport-long-edge, 100dvh) - 28px));
  max-height: calc(var(--viewport-short-edge, 100dvw) - 24px);
}
html.is-auto-landscape .start-menu-level-list {
  max-height: calc(var(--viewport-short-edge, 100dvw) - 170px);
}
html.is-auto-landscape #presentationOverlay.presentation-over-menu:not(.prototype-settings) .presentation-card {
  width: min(430px, calc(var(--viewport-long-edge, 100dvh) - 24px));
  max-height: calc(var(--viewport-short-edge, 100dvw) - 24px);
}

.presentation-volume-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px;
  min-height: 68px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 4px 6px 5px 4px;
  color: var(--ink); background: rgba(249, 239, 219, .9); background-image: var(--paper-grid); box-shadow: 2px 2px 0 rgba(73, 70, 62, .12);
  font-size: 14px; font-weight: 900;
}
.presentation-volume-option input[type="range"] {
  grid-column: 1; grid-row: 2; width: 100%; min-height: 28px; margin: 0; accent-color: #b87820; touch-action: pan-x;
}
.presentation-volume-value { grid-column: 2; grid-row: 1 / 3; min-width: 42px; color: #536b91; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .menu-stage-label { font-size: 11px; }
  .menu-round-label { top: max(46px, calc(var(--safe-area-top, env(safe-area-inset-top)) + 46px)); font-size: 10px; }
  .start-menu-home { width: min(410px, calc(100vw - 28px)); padding: 22px 18px; }
  .start-menu-home-actions { gap: 9px; margin-top: 20px; }
  .menu-main-action { min-height: 50px; font-size: 16px; }
  .start-menu-level-section { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 12px; }
  .start-menu-level-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 58dvh; gap: 6px; padding: 3px; }
  .menu-level-card { min-height: 48px; }
  .menu-level-number { font-size: 16px; }
  .menu-level-name { font-size: 12px; }
  .menu-level-state { font-size: 10px; }
  .start-menu-actions .button { min-width: 112px; }
  .start-menu-actions .menu-continue-button { min-width: 0; flex: 1; }
  .presentation-over-menu { padding: max(8px, var(--safe-area-top, env(safe-area-inset-top))) max(8px, var(--safe-area-right, env(safe-area-inset-right))) max(8px, var(--safe-area-bottom, env(safe-area-inset-bottom))) max(8px, var(--safe-area-left, env(safe-area-inset-left))); }
  .presentation-card { max-height: calc(100dvh - 24px); padding: 18px 15px 16px; }
  .presentation-note { font-size: 13px; }
  .presentation-option { min-height: 48px; font-size: 14px; }
  .presentation-select-option select { min-height: 44px; font-size: 13px; }
  #app.is-auto-landscape .presentation-card { max-height: calc(var(--viewport-short-edge, 100dvh) - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .touch-tool-toggle.is-flipping { animation: none; }
}

/* Portrait webviews keep a landscape game surface. Reserve the browser-toolbar edge and
   override portrait-only page rules that would otherwise stack the landscape level grid. */
html.is-auto-landscape .start-menu-level-section {
  top: auto; right: auto; bottom: auto; left: auto;
  width: min(700px, calc(var(--viewport-long-edge, 100dvh) - var(--auto-landscape-end-inset) - 24px));
  max-height: calc(var(--viewport-short-edge, 100dvw) - 24px); padding: 14px 16px;
}
html.is-auto-landscape .start-menu-level-list {
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  max-height: calc(var(--viewport-short-edge, 100dvw) - 170px); padding: 3px 5px 7px 2px;
}
html.is-auto-landscape .menu-level-card { min-height: 48px; padding: 5px 6px; }
html.is-auto-landscape .menu-level-number { font-size: 15px; }
html.is-auto-landscape .menu-level-name { font-size: 10px; }
html.is-auto-landscape .menu-level-state { font-size: 8px; }
html.is-auto-landscape .start-menu-actions { gap: 8px; padding-top: 10px; }
html.is-auto-landscape .start-menu-actions .button { min-height: 44px; }
html.is-auto-landscape .menu-back-button { min-width: 112px; }
html.is-auto-landscape .menu-continue-button { min-width: 0; flex: 1; }
html.is-auto-landscape #presentationOverlay:not(.presentation-over-menu) {
  padding: max(12px, var(--safe-area-right, env(safe-area-inset-right))) max(var(--auto-landscape-end-inset), var(--safe-area-bottom, env(safe-area-inset-bottom))) max(12px, var(--safe-area-left, env(safe-area-inset-left))) max(12px, var(--safe-area-top, env(safe-area-inset-top)));
}
html.is-auto-landscape .presentation-select-option { align-items: center; flex-direction: row; }
html.is-auto-landscape .presentation-select-option select { width: auto; }

/* 紧凑部署卡片：左侧完整角色，右上名字、右下价格。 */
#app #unitList .unit-card[data-unit-id] {
  display: block; flex: 0 0 auto; height: auto; min-height: 72px; padding: 0;
  text-align: left; touch-action: pan-y; perspective: 900px;
}
#app #unitList .unit-card.disabled.selected { opacity: 1; filter: none; }
#app #unitList .unit-card.selected {
  background-color: #edf0e5;
  background-image: var(--paper-grid), linear-gradient(145deg, #fffbed, #dfe8e6);
}
#app #unitList .unit-card:focus-visible { outline: 3px solid #526b91; outline-offset: 2px; }
.unit-card-turn {
  position: relative; width: 100%; height: auto; transform-style: preserve-3d;
  transition: transform .34s cubic-bezier(.2, .7, .25, 1);
}
.unit-card.selected .unit-card-turn { transform: rotateY(180deg); }
.unit-card-face {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 7px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.unit-card-front {
  position:relative; height:auto; min-height:inherit; display:grid;
  grid-template-columns:calc(var(--ui-cardPortraitHeight,64)*1px) minmax(0,1fr);
  grid-template-rows:1fr auto; gap:4px 6px; padding:4px; overflow:hidden; border-radius:inherit;
  isolation:isolate; background-color:#fffbed; background-image:var(--paper-grid);
}
.unit-card-back { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; overflow:auto; transform: rotateY(180deg); }
.unit-card-front .unit-portrait {
  position:relative; inset:auto; grid-column:1; grid-row:1 / 3; align-self:center;
  width:100%; height:calc(var(--ui-cardPortraitHeight,64)*1px); flex:none;
  overflow:hidden; opacity:var(--ui-cardPortraitOpacity,1); pointer-events:none;
  container-type:size;
}
#app #unitList .unit-card .unit-glyph {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width:calc(var(--ui-cardPortraitHeight,64)*1px); max-width:100%; width:min(100cqw,100cqh); height:auto; aspect-ratio:1; flex:none;
  border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
  color: var(--ink); font-size: 38px; background-repeat: no-repeat;
  transform: translate(-50%,-50%) scale(var(--ui-cardPortraitScale,1));
}
#app #unitList .unit-portrait-vehicle .unit-glyph { top: 50%; transform: translate(-50%,-50%) scale(var(--ui-cardPortraitScale,1)); }
#app #unitList .unit-card .unit-name {
  position: relative; inset:auto; z-index:1; grid-column:2; grid-row:1; align-self:start; min-width:0;
  margin: 0; color: var(--ui-cardNameColorA,#40536d); font-size: 18px; font-weight: 900; line-height: 1.15;
  mix-blend-mode:normal; text-shadow:none; overflow-wrap:anywhere;
  -webkit-text-stroke:calc(var(--ui-cardTextOutlineWidth,2)*1px) var(--ui-cardNameColorB,#fff9e9); paint-order:stroke fill;
}
#app #unitList .unit-card .unit-price {
  position: relative; inset:auto; z-index:1; grid-column:2; grid-row:2; align-self:end;
  display:block; min-width:0; max-width:100%; margin:0; text-align:left;
  color:var(--ui-cardPriceColor,#a36e1d); font-size:16px; font-weight:900; line-height:1.15;
  mix-blend-mode:normal; text-shadow:none;
  white-space:normal; overflow-wrap:anywhere;
  -webkit-text-stroke:calc(var(--ui-cardTextOutlineWidth,2)*1px) var(--ui-cardNameColorC,#fff9e9); paint-order:stroke fill;
}
#app #unitList .unit-card .unit-role {
  margin: 0; color: #4f6073; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere;
}
#app #unitList .unit-card .unit-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  margin: 0; padding: 0; border: 0;
  color: var(--ink); font-size: 14px; line-height: 1.2;
}
.unit-stat { display: flex; flex-direction: column; gap: 3px; }
.unit-stat small { color: #536276; font-family: "Microsoft YaHei", sans-serif; font-size: 11px; }
#app #unitList .unit-stats b { color: var(--ink); }
#app.menu-motion-reduced .unit-card-turn { transition: none; }
@media (prefers-reduced-motion: reduce) { .unit-card-turn { transition: none; } }
@media (max-width: 900px) and (orientation: landscape), (max-width: 600px) and (orientation: portrait) {
  #app #unitList .unit-card[data-unit-id] { height:auto; min-height:60px; }
  .unit-card-face { padding: 5px; }
  .unit-card-front { grid-template-columns:calc(var(--ui-mobileCardPortraitHeight,50)*1px) minmax(0,1fr); column-gap:4px; }
  .unit-card-front .unit-portrait { height:calc(var(--ui-mobileCardPortraitHeight,50)*1px); }
  #app #unitList .unit-card .unit-name { inset:auto; font-size:14px; }
  #app #unitList .unit-card .unit-price { inset:auto; font-size:14px; }
  #app #unitList .unit-card .unit-role { font-size: 10px; }
  #app #unitList .unit-card .unit-stats { font-size: 11px; gap: 2px; }
  #app #unitList .unit-card .unit-glyph { width:calc(var(--ui-mobileCardPortraitHeight,50)*1px); width:min(100cqw,100cqh); transform:translate(-50%,-50%) scale(var(--ui-cardPortraitScale,1)); }
  #app #unitList .unit-portrait-vehicle .unit-glyph { top:50%; transform:translate(-50%,-50%) scale(var(--ui-cardPortraitScale,1)); }
  .unit-stat small { font-size: 9px; }
}

/* Editable paper-theater presentation. Keep transform ownership on existing wrappers. */
.ui-jelly-copy { display:inline-block; }
.ui-jelly-part { pointer-events:none; transform-origin:50% 50%; }
:root { --ui-noticeFontSize:22; --ui-noticeOutline:2; --ui-noticeBottom:112; --ui-noticeWidth:620; --ui-noticeGap:12; --ui-noticeColor:#40536d; --ui-noticeOutlineColor:#fff9e9; --ui-noticeDangerColor:#a5493f; --ui-noticeRewardColor:#46764b; --ui-bodyFontSize:14; --ui-buttonFontSize:14; --ui-titleFontSize:38; --ui-cardHeight:72; --ui-mobileCardHeight:60; --ui-cardNameSize:18; --ui-cardPriceSize:16; --ui-mobileCardNameSize:14; --ui-mobileCardPriceSize:14; --ui-worldLabelSize:12; --ui-controlRadius:7; --ui-inkColor:#40536d; --ui-accentColor:#526b91; --ui-cardFlipDuration-ms:340ms; --ui-uiEnterDuration-ms:320ms; }
body { font-size:calc(var(--ui-bodyFontSize)*1px); color:var(--ui-inkColor); }
.button, .menu-main-action, .panel-toggle, .speed-button { font-size:calc(var(--ui-buttonFontSize)*1px); border-radius:calc(var(--ui-controlRadius)*1px); }
.start-menu-heading h1 { font-size:clamp(24px, 5vw, calc(var(--ui-titleFontSize)*1px)); color:var(--ui-inkColor); }
.button-primary, .speed-button.active { background-color:var(--ui-accentColor); }
#app #unitList .unit-card[data-unit-id] { height:auto; min-height:calc(var(--ui-cardHeight)*1px); }
.unit-card-turn,.unit-card-front { min-height:calc(var(--ui-cardHeight,72)*1px); }
.unit-card-turn { transition-duration:var(--ui-cardFlipDuration-ms); }
#app #unitList .unit-card .unit-name { font-size:calc(var(--ui-cardNameSize)*1px); }
#app #unitList .unit-card .unit-price { font-size:calc(var(--ui-cardPriceSize,16)*1px); }
#app #unitList .unit-card .unit-role { font-size:calc(var(--ui-cardDetailFontSize,12)*1px); }
#app #unitList .unit-card .unit-stats { font-size:calc(var(--ui-cardStatFontSize,14)*1px); }
#app { transition:grid-template-columns var(--ui-uiEnterDuration-ms) ease-out; }
#app #playArea { grid-column:2 !important; }
#app #unitDock { transition:opacity var(--ui-uiExitDuration-ms),translate var(--ui-uiEnterDuration-ms); }
#app:is(.phase-battle,.phase-result),
#app.is-panel-collapsed:is(.phase-battle,.phase-result),
#app.is-auto-landscape:is(.phase-battle,.phase-result),
#app.is-auto-landscape.is-panel-collapsed:is(.phase-battle,.phase-result) { grid-template-columns:0px minmax(0,1fr); }
#app:is(.phase-battle,.phase-result) #unitDock { display:flex; opacity:0; translate:calc(var(--ui-uiTravel)*-1px) 0; overflow:hidden; pointer-events:none; }
#app.menu-motion-reduced,#app.menu-motion-reduced #unitDock { transition-duration:calc(var(--ui-reduceDuration)*1ms); }
@media (prefers-reduced-motion:reduce) { #app,#app #unitDock { transition-duration:calc(var(--ui-reduceDuration)*1ms); } }
.world-label { font-size:calc(var(--ui-worldLabelSize)*1px); }
.progress-track span { transition-duration:var(--ui-uiEnterDuration-ms); }
.floating-guide, .camera-hint { display:none !important; }
.theater-notice-layer { position:fixed; inset:0; z-index:1000; pointer-events:none; }
html.is-auto-landscape body > .theater-notice-layer {
  inset:0 auto auto 0; width:var(--viewport-long-edge,100dvh); height:var(--viewport-short-edge,100dvw);
  transform-origin:0 0; transform:translateX(var(--viewport-short-edge,100dvw)) rotate(90deg);
}
.theater-notices { position:absolute; z-index:1000; left:50%; bottom:max(var(--safe-area-bottom, env(safe-area-inset-bottom)), calc(var(--ui-noticeBottom)*1px)); transform:translateX(-50%); width:min(calc(var(--ui-noticeWidth)*1px),calc(100% - var(--ui-noticeMargin,18)*2px)); display:flex; flex-direction:column; align-items:center; gap:calc(var(--ui-noticeGap)*1px); pointer-events:none; background:none; border:0; padding:0; box-shadow:none; }
.theater-notice { max-width:100%; text-align:center; font-weight:900; font-size:calc(var(--ui-noticeFontSize)*1px); line-height:var(--ui-noticeLineHeight,1.3); color:var(--ui-noticeColor); white-space:pre-wrap; overflow-wrap:anywhere; -webkit-text-stroke:calc(var(--ui-noticeOutline)*1px) var(--ui-noticeOutlineColor); paint-order:stroke fill; text-shadow:0 2px 2px var(--ui-noticeOutlineColor); transform-origin:center bottom; }
.theater-notice.danger { color:var(--ui-noticeDangerColor); }
.theater-notice.reward, .theater-notice.result { color:var(--ui-noticeRewardColor); }
.theater-notice-count { font-size:.75em; }
.theater-notice { padding:calc(var(--ui-glyphOffset,2)*1px) 6px; }
.theater-letter { display:inline-block; line-height:1; transform-origin:center 75%; }
html.is-phone-viewport .theater-notices {
  bottom:max(var(--safe-area-bottom, env(safe-area-inset-bottom)),calc(var(--ui-mobileNoticeBottom,18)*1px));
  width:min(calc(var(--ui-noticeWidth)*1px),calc(100% - var(--ui-mobileNoticeMargin,12)*2px));
  gap:calc(var(--ui-mobileNoticeGap,3)*1px);
}
html.is-phone-viewport .theater-notice { padding:calc(var(--ui-mobileNoticePadding,1)*1px) 4px; }

/* Deployment and level browsing are the two faces of one persistent rail. */
.start-menu-overlay.level-browser { pointer-events:none; }
.start-menu-overlay.level-browser .start-menu-card { visibility:hidden; pointer-events:none; }
#app #unitDock { perspective:1200px; }
.dock-turn {
  position:relative; flex:1 1 auto; width:100%; min-height:0;
  transform-style:preserve-3d; transform:rotateY(0deg);
  transition:transform var(--ui-dockFlipDuration-ms,420ms) cubic-bezier(.22,.85,.24,1.06);
}
#app.level-browser-active .dock-turn { transform:rotateY(180deg); }
.dock-face {
  position:absolute; inset:0; display:flex; flex-direction:column; min-width:0; min-height:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background-color:var(--panel); background-image:var(--paper-grid);
}
.dock-deploy-face { transform:rotateY(0deg); }
.dock-level-face { transform:rotateY(180deg); }
#app .dock-level-face .start-menu-level-section {
  position:relative; inset:auto; translate:none; z-index:auto; display:flex; flex:1 1 auto;
  width:100%; min-width:0; min-height:0; height:100%; max-height:none; overflow:hidden;
  padding:0; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; background:transparent;
}
#app .dock-level-face .start-menu-section-heading {font-size:18px; flex:0 0 auto;}
#app .dock-level-face .start-menu-level-note {font-size:11px; flex:0 0 auto;}
#app .dock-level-face .start-menu-level-list {
  flex:1 1 0; grid-template-columns:minmax(0,1fr); max-height:none; gap:7px; overflow:auto;
}
#app .dock-level-face .menu-level-card {min-height:54px; padding:6px;}
#app .dock-level-face .menu-level-number {font-size:18px;}
#app .dock-level-face .menu-level-name {font-size:12px;}
#app.menu-motion-reduced .dock-turn { transition-duration:calc(var(--ui-reduceDuration,90)*1ms); }
@media(prefers-reduced-motion:reduce){.dock-turn{transition-duration:calc(var(--ui-reduceDuration,90)*1ms);}}
#topbar { transition:opacity var(--ui-uiEnterDuration-ms,320ms) ease; }
#resultOverlay { background:transparent; backdrop-filter:none; padding:0; }
#resultOverlay .result-card { display:none; }
.result-screen-prompt { display:grid; place-items:center; width:100%; height:100%; background:transparent; border:0; border-radius:0; box-shadow:none; cursor:pointer; touch-action:manipulation; }
.result-screen-text {
  display:block; max-width:calc(100% - 56px); color:var(--ui-resultTextColor,#b6ab98);
  font-size:calc(var(--ui-resultFontSize,52)*1px); font-weight:900; line-height:1.35;
  text-align:center; padding:14px; white-space:pre-wrap; overflow-wrap:anywhere;
  -webkit-text-stroke:calc(var(--ui-resultOutlineWidth,1.5)*1px) var(--ui-resultOutlineColor,#fff9e9);
  paint-order:stroke fill; text-shadow:0 2px 4px var(--ui-resultOutlineColor,#fff9e9); transform-origin:center;
}
.result-screen-copy { display:flex; flex-wrap:wrap; justify-content:center; column-gap:.12em; row-gap:.06em; transform-origin:center; }
.result-copy-part { display:inline-block; white-space:nowrap; }
.result-screen-copy .theater-letter { font-family:inherit; margin-inline:.015em; padding-block:.06em; }
#resultOverlay:is([data-ui-state="entering"],[data-ui-state="visible"]) .result-screen-text {
  animation:result-text-arrive calc(var(--ui-resultEnterDuration,720)*1ms) both;
}
#resultOverlay:is([data-ui-state="entering"],[data-ui-state="visible"]) .result-screen-copy {
  animation:result-text-wiggle calc(var(--ui-resultPulseDuration,1700)*1ms) ease-in-out calc(var(--ui-resultEnterDuration,720)*1ms) infinite;
}
@keyframes result-text-arrive {
  0% { opacity:0; transform:translateY(calc(var(--ui-resultTravel,12)*3px)) scale(.28); }
  54% { opacity:1; transform:translateY(calc(var(--ui-resultTravel,12)*-1px)) scale(calc(1 + min(var(--ui-resultOvershoot,.18),.05))); }
  78% { transform:translateY(calc(var(--ui-resultTravel,12)*.35px)) scale(.94); }
  100% { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
@keyframes result-text-wiggle {
  0%,100% { transform:translateY(0) rotate(calc(var(--ui-resultTilt,4)*-.5deg)) scale(1); }
  50% { transform:translateY(calc(var(--ui-resultTravel,12)*-1px)) rotate(calc(var(--ui-resultTilt,4)*.5deg)) scale(calc(1 + var(--ui-resultPulseScale,.055))); }
}
#app.menu-motion-reduced .result-screen-text,#app.menu-motion-reduced .result-screen-copy { animation:none!important; transform:none!important; }
@media (prefers-reduced-motion:reduce) { .result-screen-text,.result-screen-copy { animation:none!important; transform:none!important; } }
@media (max-width:900px) and (orientation:landscape),(max-width:600px) and (orientation:portrait) {
  .result-screen-text { font-size:calc(var(--ui-mobileResultFontSize,40)*1px); }
}
.result-screen-prompt:disabled { cursor:default; opacity:1; }
#sidePanel { transition:max-height var(--ui-uiEnterDuration-ms),max-width var(--ui-uiEnterDuration-ms); }
#sidePanel .tip-card,#sidePanel .battle-readout,#sidePanel .panel-section { transition:opacity var(--ui-uiEnterDuration-ms),max-height var(--ui-uiEnterDuration-ms); }
[data-ui-state="exiting"] { pointer-events:none !important; }
#app.is-stage-transition #gameCanvas, #app.is-stage-transition #unitList { pointer-events:none; }
#app.is-stage-transition { transition:none !important; }
.world-label, .effect-label, .floating-text { background:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; backdrop-filter:none !important; paint-order:stroke fill; -webkit-text-stroke:1px var(--ui-noticeOutlineColor); }
@media (max-width:900px) and (orientation:landscape),(max-width:600px) and (orientation:portrait) {
  #app #unitList .unit-card[data-unit-id] { height:auto; min-height:calc(var(--ui-mobileCardHeight)*1px); }
  .unit-card-turn,.unit-card-front { min-height:calc(var(--ui-mobileCardHeight,60)*1px); }
  #app #unitList .unit-card .unit-name { font-size:calc(var(--ui-mobileCardNameSize,14)*1px); }
  #app #unitList .unit-card .unit-price { font-size:calc(var(--ui-mobileCardPriceSize,14)*1px); }
  #app #unitList .unit-card .unit-role { font-size:calc(var(--ui-mobileDetailFontSize,10)*1px); }
  #app #unitList .unit-card .unit-stats { font-size:calc(var(--ui-mobileStatFontSize,11)*1px); }
  .theater-notices { bottom:max(var(--safe-area-bottom, env(safe-area-inset-bottom)),calc(var(--ui-mobileNoticeBottom,18)*1px)); width:min(calc(var(--ui-noticeWidth)*1px),calc(100% - var(--ui-mobileNoticeMargin,12)*2px)); }
}
@media (max-width: 780px) and (orientation: portrait) {
  #app:not(.is-auto-landscape) { height: 100dvh; min-height: 0; }
}

/* The deployment rail stays mounted in the same place in prep, battle, and results. */
.menu-home-button { min-width:calc(4em + 20px); }
.top-actions :is(.menu-home-button,#startButton) {
  font-weight:900; border-color:var(--ui-accentColor,#526b91);
  animation:primary-action-beacon calc(var(--ui-actionEmphasisDuration,2200)*1ms) ease-in-out infinite;
}
@keyframes primary-action-beacon {
  0%,100% { box-shadow:3px 3px 0 rgba(73,70,62,.25),0 0 0 1px rgba(220,168,59,.12); }
  50% { box-shadow:3px 3px 0 rgba(73,70,62,.25),0 0 0 3px rgba(220,168,59,.42),0 0 12px rgba(220,168,59,.24); }
}
#app.menu-motion-reduced .top-actions :is(.menu-home-button,#startButton) { animation:none; }
@media (prefers-reduced-motion:reduce) { .top-actions :is(.menu-home-button,#startButton) { animation:none; } }
#app:not(.menu-background-active) {
  --unit-rail-width: calc(var(--ui-browserWidth,230)*1px);
  grid-template-columns: var(--unit-rail-width, 230px) minmax(0, 1fr) !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
}
#app.is-panel-collapsed:not(.menu-background-active) {
  grid-template-columns: var(--unit-rail-width, 230px) minmax(0, 1fr) !important;
}
#app:not(.menu-background-active) > #topbar { grid-column: 1 / -1 !important; grid-row: 1 !important; }
#app:not(.menu-background-active) > #unitDock {
  grid-column: 1 !important; grid-row: 2 !important; display: flex !important;
  opacity: 1 !important; translate: none !important; pointer-events: auto !important;
}
#app:not(.menu-background-active) > #playArea { grid-column: 2 !important; grid-row: 2 !important; }
@media (max-width: 900px) and (orientation: landscape) {
  #app:not(.menu-background-active) {
    --unit-rail-width: 112px;
    grid-template-columns: var(--unit-rail-width) minmax(0, 1fr) !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
  }
  #app:not(.menu-background-active) > #unitDock { padding: 7px 6px 8px; }
  #app:not(.menu-background-active) > #playArea { grid-column: 2 !important; }
}
#app.is-auto-landscape:not(.menu-background-active) {
  --unit-rail-width: 112px;
  grid-template-columns: var(--unit-rail-width) minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
}
#app.is-auto-landscape:not(.menu-background-active) > #unitDock { padding: 7px 6px 8px; }
@media (max-width: 780px) and (orientation: portrait) {
  #app:not(.is-auto-landscape):not(.menu-background-active) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(280px, 1fr) auto !important;
  }
  #app:not(.is-auto-landscape):not(.menu-background-active) > #topbar { grid-column: 1 !important; grid-row: 1 !important; }
  #app:not(.is-auto-landscape):not(.menu-background-active) > #playArea { grid-column: 1 !important; grid-row: 2 !important; }
  #app:not(.is-auto-landscape):not(.menu-background-active) > #unitDock {
    grid-column: 1 !important; grid-row: 3 !important; min-height:154px; padding: 6px 10px 8px; border-top: 1px solid var(--line); border-right: 0;
  }
  #app:not(.is-auto-landscape):not(.menu-background-active) #unitDock .dock-header {
    flex-direction: row; align-items: center; gap: 8px; margin-bottom: 4px;
  }
  #app:not(.is-auto-landscape):not(.menu-background-active) #unitDock .dock-meta { display: none; }
  #app:not(.is-auto-landscape):not(.menu-background-active) #unitList {
    flex: 0 0 auto; flex-direction: row; width: 100%; min-height: 0; height: auto;
    overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
  }
  #app:not(.is-auto-landscape):not(.menu-background-active) #unitList .unit-card { flex: 0 0 112px; width: 112px; height:auto; }
  #app:not(.is-auto-landscape) .dock-deploy-face {position:relative; inset:auto;}
  #app:not(.is-auto-landscape) .dock-level-face .start-menu-level-section {
    gap:5px;
  }
  #app:not(.is-auto-landscape) .dock-level-face .start-menu-section-heading {font-size:14px;}
  #app:not(.is-auto-landscape) .dock-level-face .start-menu-level-note {display:none;}
  #app:not(.is-auto-landscape) .dock-level-face .start-menu-level-list {
    grid-template-columns:none; grid-template-rows:1fr;
    grid-auto-flow:column; grid-auto-columns:110px; overflow-x:auto; overflow-y:hidden;
  }
}

/* 设置只滚动内容：逻辑横屏和真实横屏共用尺寸，关闭按钮始终留在顶部。 */
#presentationOverlay {
  grid-template-rows: minmax(0, 1fr); overflow: hidden;
  background: rgba(67, 59, 48, var(--ui-settingsBackdropOpacity, .42)); backdrop-filter: blur(4px);
  padding: max(10px, var(--safe-area-top, env(safe-area-inset-top))) max(10px, var(--safe-area-right, env(safe-area-inset-right))) max(10px, var(--safe-area-bottom, env(safe-area-inset-bottom))) max(10px, var(--safe-area-left, env(safe-area-inset-left)));
}
#presentationOverlay:not(.prototype-settings) .presentation-card,
html #presentationOverlay.presentation-over-menu:not(.prototype-settings) .presentation-card {
  display: flex; flex-direction: column; gap: 10px; container-type: inline-size;
  width: min(calc(var(--ui-settingsPanelWidth, 640) * 1px), 100%);
  height: min(780px, 100%); max-height: 100%; min-height: 0; padding: 14px;
  overflow: hidden; touch-action: auto;
}
#presentationOverlay .presentation-header { flex: 0 0 auto; align-items: center; gap: 12px; }
#presentationOverlay .presentation-header h2 { margin-top: 3px; font-size: 22px; }
#presentationCloseButton { flex: 0 0 auto; min-width: 64px; min-height: 48px; }
.presentation-body { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 6px; flex: 1 1 auto; min-height: 0; }
.presentation-scroll {
  min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 4px 8px 0;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: auto;
  scrollbar-width: none;
}
.presentation-scroll::-webkit-scrollbar { display: none; }
.presentation-scroll:focus-visible, .presentation-scrollbar:focus-visible { outline: 2px solid #536b91; outline-offset: -2px; }
#presentationOverlay .presentation-note { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
#presentationOverlay .presentation-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--ui-settingsGap, 8) * 1px); }
#presentationOverlay .presentation-option, #presentationOverlay .presentation-volume-option {
  min-width: 0; min-height: calc(var(--ui-settingsRowHeight, 48) * 1px); margin: 0; padding: 8px 10px;
  font-size: calc(var(--ui-settingsFontSize, 14) * 1px); line-height: 1.4;
}
#presentationOverlay .presentation-option > span { min-width: 0; overflow-wrap: anywhere; }
#presentationOverlay .presentation-option input[type="checkbox"] { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; }
#presentationOverlay .presentation-color-option input[type="color"] { flex: 0 0 48px; height: 44px; }
#presentationOverlay input[type="range"] { min-width: 0; min-height: 44px; margin: 0; touch-action: pan-x; }
#presentationOverlay .presentation-select-option { flex-direction: column; align-items: stretch; }
#presentationOverlay .presentation-select-option select { width: 100%; min-width: 0; min-height: 44px; }
#presentationOverlay .presentation-description { align-items: flex-start; flex-direction: column; gap: 4px; }
#presentationOverlay .presentation-description strong { font-size: 12px; font-weight: 500; line-height: 1.5; }
.presentation-scrollbar {
  position: relative; min-height: 0; border: 1px solid rgba(83, 107, 145, .25); border-radius: 9px;
  background: rgba(83, 107, 145, .1); touch-action: none; cursor: pointer;
}
.presentation-scroll-thumb {
  position: absolute; top: 0; left: 2px; right: 2px; min-height: 0; border-radius: 7px;
  background: #536b91; box-shadow: inset 0 0 0 2px rgba(255, 249, 233, .35); pointer-events: auto;
}
.presentation-scrollbar[aria-disabled="true"] { opacity: .25; pointer-events: none; }
html.is-phone-viewport .presentation-body { grid-template-columns: minmax(0, 1fr) 44px; gap: 0; }
html.is-phone-viewport .presentation-scrollbar {
  border: 0; background: linear-gradient(to right, transparent 15px, rgba(83, 107, 145, .15) 15px, rgba(83, 107, 145, .15) 29px, transparent 29px);
}
html.is-phone-viewport .presentation-scroll-thumb { left: 15px; right: 15px; }
#presentationOverlay .presentation-scroll-hint { flex: 0 0 auto; margin: 0; color: #65707d; font-size: 11px; line-height: 1.4; }
@container (min-width: 520px) {
  #presentationOverlay .presentation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #presentationOverlay .presentation-description { grid-column: 1 / -1; }
}
html.is-auto-landscape #presentationOverlay {
  padding: max(10px, var(--safe-area-right, env(safe-area-inset-right))) max(var(--auto-landscape-end-inset), var(--safe-area-bottom, env(safe-area-inset-bottom))) max(10px, var(--safe-area-left, env(safe-area-inset-left))) max(10px, var(--safe-area-top, env(safe-area-inset-top)));
}
html.is-auto-landscape #presentationOverlay .presentation-scroll,
html.is-auto-landscape #presentationOverlay input[type="range"] { touch-action: none; }

/* Permanent HUD cells: changing copy, digits or visibility never moves a target. */
#app #topbar {
  display:grid; grid-template-columns:196px 100px 110px minmax(0,1fr) auto;
  gap:12px; height:64px; min-height:64px; flex-wrap:nowrap; align-items:center;
}
#topbar .top-speed-controls { grid-column:1; width:196px; gap:4px; }
#topbar .top-speed-readout { width:28px; min-width:0; flex:0 0 28px; }
#topbar .top-speed-controls .speed-button { width:38px; min-width:0; flex:0 0 38px; padding-inline:2px; }
#topbar .phase-stat { grid-column:2; min-width:0; width:100px; }
#topbar .budget-stat { grid-column:3; width:110px; min-width:0; flex:none; }
#topbar .top-stat :is(strong,small,.stat-kicker) { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#topbar #budgetLabel { display:inline-block; width:6ch; font-variant-numeric:tabular-nums; vertical-align:bottom; overflow:hidden; text-overflow:ellipsis; }
#topbar .top-speed-readout { font-variant-numeric:tabular-nums; overflow:hidden; white-space:nowrap; }
#topbar .top-actions {
  grid-column:5; display:grid; grid-template-areas:"menu settings action reset";
  grid-template-columns:repeat(2,calc(var(--ui-toolbarButtonWidth,64)*1px)) repeat(2,calc(var(--ui-toolbarWideButtonWidth,112)*1px));
  grid-template-rows:44px; gap:8px; min-width:0; max-width:100%; margin-left:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; touch-action:pan-x;
}
#topbar .top-actions::-webkit-scrollbar { display:none; }
#topbar .menu-home-button { grid-area:menu; }
#topbar #presentationButton { grid-area:settings; }
#topbar :is(#startButton,#pauseButton) { grid-area:action; }
#topbar #resetButton { grid-area:reset; }
#topbar .top-actions .button {
  width:100%; min-width:0; height:44px; min-height:44px; margin:0; padding:4px 6px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  white-space:nowrap; contain:inline-size; font-size:calc(var(--ui-buttonFontSize,14)*1px);
}
#topbar .top-actions .button:focus-visible { outline-offset:-3px; }
#topbar .top-actions .button > span { max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.button:hover,.button:active,.speed-button:hover,.speed-button:active,.menu-level-card:hover,.menu-level-card:active,.unit-card:hover,.unit-card:active { transform:none; }
#topbar .top-actions .button { z-index:1; }
#topbar .top-actions .button[data-ui-state="exiting"] { z-index:0; }

/* Copy can be edited without enlarging cards or pushing the following rows. */
#unitDock .dock-header { height:64px; min-height:0; flex:0 0 64px; overflow:hidden; }
#unitDock .dock-header > div { min-width:0; max-width:100%; }
#unitDock .dock-header strong { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
#unitDock .dock-meta { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#deployedCount { display:inline-block; width:3ch; font-variant-numeric:tabular-nums; }
#app #unitList .unit-card[data-unit-id] {
  height:max(calc(var(--ui-cardHeight,72)*1px),calc(var(--ui-cardPortraitHeight,64)*1px + 8px));
  min-height:0; flex-shrink:0;
}
#app #unitList :is(.unit-card-turn,.unit-card-front) { height:100%; min-height:0; }
#app #unitList .unit-card-front { grid-template-rows:minmax(0,1fr) auto; }
#app #unitList .unit-card-front .unit-portrait { max-height:100%; }
#app #unitList .unit-card .unit-name {
  max-height:100%; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
#app #unitList .unit-card .unit-price { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
#app .dock-level-face .start-menu-level-list { grid-auto-rows:54px; align-content:start; }
#app .dock-level-face .menu-level-card { height:54px; min-height:0; overflow:hidden; }
#app .dock-level-face :is(.menu-level-name,.menu-level-state) { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

@media (max-width:1100px) {
  #app #topbar { grid-template-columns:142px 64px minmax(0,1fr); gap:6px; padding-inline:12px; }
  #topbar .phase-stat { display:none; }
  #topbar .top-speed-controls { width:142px; gap:2px; }
  #topbar .top-speed-readout { display:none; }
  #topbar .top-speed-controls .speed-button { width:34px; flex-basis:34px; min-height:44px; padding-inline:1px; }
  #topbar .budget-stat { grid-column:2; display:flex!important; width:64px; min-width:0; flex-direction:column; gap:0; align-items:flex-start; }
  #topbar .budget-stat strong { font-size:12px; letter-spacing:0; }
  #topbar .budget-stat small { font-size:8px; }
  #topbar .budget-stat .stat-kicker { font-size:8px; letter-spacing:0; }
  #topbar .top-actions { grid-column:3; justify-self:end; gap:4px; grid-template-columns:repeat(2,calc(var(--ui-toolbarCompactButtonWidth,44)*1px)) repeat(2,calc(var(--ui-toolbarCompactWideButtonWidth,76)*1px)); }
}
/* Rotated phones use their logical landscape width, not the portrait media width. */
#app.is-auto-landscape #topbar {
  grid-template-columns:142px 64px minmax(0,1fr); gap:6px; height:56px; min-height:56px;
  padding:max(5px,var(--safe-area-right, env(safe-area-inset-right))) max(var(--auto-landscape-end-inset),var(--safe-area-bottom, env(safe-area-inset-bottom))) max(5px,var(--safe-area-left, env(safe-area-inset-left))) max(12px,var(--safe-area-top, env(safe-area-inset-top)));
}
#app.is-auto-landscape #topbar .phase-stat { display:none; }
#app.is-auto-landscape #topbar .top-actions { grid-column:3; justify-self:end; gap:4px; grid-template-columns:repeat(2,calc(var(--ui-toolbarCompactButtonWidth,44)*1px)) repeat(2,calc(var(--ui-toolbarCompactWideButtonWidth,76)*1px)); }
@media (max-width:900px) and (orientation:landscape),(max-width:600px) and (orientation:portrait) {
  #app #topbar { height:56px; min-height:56px; padding-block:5px; }
  #app #unitList .unit-card[data-unit-id] { height:max(calc(var(--ui-mobileCardHeight,60)*1px),calc(var(--ui-mobileCardPortraitHeight,50)*1px + 8px)); }
  #unitDock .dock-header { height:44px; flex-basis:44px; }
}
@media (max-width:780px) and (orientation:portrait) {
  #app:not(.is-auto-landscape) #topbar { height:108px; min-height:108px; grid-template-columns:142px minmax(0,1fr); grid-template-rows:44px 44px; padding:6px 12px; }
  #app:not(.is-auto-landscape) #topbar .top-actions { grid-column:1 / -1; grid-row:2; justify-self:end; width:100%; }
}

/* Phone overlays already have opaque backing plates; avoid sampling the animated battlefield for blur. */
@media (pointer:coarse) {
  .overlay, .prep-guide, .battle-guide, .world-label, .touch-tool-button,
  .start-menu-overlay, .presentation-overlay, #presentationOverlay, #sidePanel { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Title screen and a separate map. The deployment rail never changes owners. */
.start-menu-overlay { padding:0; container-type:size; }
html.is-auto-landscape .start-menu-overlay { padding:0; }
.start-menu-overlay .start-menu-card { position:relative; border:0; border-radius:0; }
.start-menu-overlay:not(.level-browser) .start-menu-card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(40,58,49,.66),rgba(40,58,49,.13) 52%,transparent 80%),linear-gradient(0deg,rgba(31,44,35,.28),transparent 35%);
}
.start-menu-overlay .start-menu-home {
  position:absolute; left:max(6%,var(--safe-area-left,env(safe-area-inset-left))); top:50%; bottom:auto; right:auto;
  width:clamp(260px,35cqw,440px); max-height:calc(100% - 32px); padding:0; transform:translateY(-50%);
  border:0; box-shadow:none; border-radius:0; background:none; backdrop-filter:none;
}
.start-menu-overlay .start-menu-heading h1 {
  margin:0 0 32px; color:#fff1b8; font-family:Georgia,"Microsoft YaHei",serif; font-size:clamp(38px,6cqw,78px);
  line-height:1.12; white-space:pre-line; font-weight:950; letter-spacing:.05em;
  text-shadow:3px 3px 0 #395147,-2px -2px 0 #395147,0 7px 0 #273e33,3px 10px 12px #152820;
}
.start-menu-overlay .start-menu-home-actions { gap:16px; margin:0 auto; width:84%; }
.start-menu-overlay .menu-main-action {
  border:3px solid #4f6042; border-radius:12px 8px 14px 8px; min-height:64px; font-size:24px; font-weight:950;
  color:#263d2d; background:linear-gradient(#f3d9a1,#d0b375); box-shadow:0 6px 0 #314333,0 9px 14px #1a302a55;
}
.start-menu-overlay .menu-main-action.button-primary { background:linear-gradient(#c9db8c,#98bc66); }
.start-menu-overlay .menu-main-action:hover { filter:brightness(1.08); }
.start-menu-overlay .menu-main-action:active { box-shadow:0 2px 0 #314333; }
.start-menu-overlay .start-menu-hint:empty { display:none; }
.start-menu-overlay .menu-battle-scene::before,.start-menu-overlay .menu-battle-scene::after { display:none; }
.menu-mascots { position:absolute; inset:0; pointer-events:none; z-index:1; }
.menu-mascot { position:absolute; bottom:9%; width:clamp(150px,23cqw,330px); height:clamp(150px,23cqw,330px); }
.menu-mascot::after { content:""; position:absolute; width:54%; height:7%; left:23%; bottom:5%; border-radius:50%; background:#294e3540; z-index:-1; }
.menu-mascot .menu-fighter-sprite { display:block; width:100%; height:100%; border:0; border-radius:0; background-color:transparent; box-shadow:none; }
.menu-mascot-huaqiang { left:48%; transform:rotate(-7deg); }
.menu-mascot-melonboss { left:63%; bottom:13%; transform:rotate(4deg); }
.menu-mascot-caixukun { left:78%; transform:rotate(8deg); }
.start-menu-overlay.level-browser { pointer-events:auto; background:#d5d5a7; }
.start-menu-overlay.level-browser .start-menu-card { visibility:visible; pointer-events:auto; }
.campaign-map { position:absolute; inset:0; z-index:3; overflow:hidden; color:#2b4236; background:#c6d4c0; }
.campaign-map-toolbar { position:absolute; z-index:5; top:max(12px,var(--safe-area-top,env(safe-area-inset-top))); left:max(12px,var(--safe-area-left,env(safe-area-inset-left))); right:max(12px,var(--safe-area-right,env(safe-area-inset-right))); display:flex; align-items:center; gap:20px; pointer-events:none; }
.campaign-map-toolbar>* { pointer-events:auto; }
.campaign-map-toolbar .campaign-budget-hint { margin:0 0 0 auto; align-self:flex-start; max-width:min(330px,calc(100% - 135px)); padding:6px 9px; border-radius:6px; color:#637158; background:#f8edd4a6; opacity:.75; font:600 14px/1.6 "Microsoft YaHei",sans-serif; text-align:right; pointer-events:none; }
.campaign-map-navigation { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.campaign-map-navigation .campaign-button { min-width:104px; }
.campaign-button { min-width:48px; min-height:48px; padding:8px 16px; border:2px solid #536650; border-radius:8px 12px 8px 10px; color:#304235; background:#f8ebcc; box-shadow:0 3px 0 #53665066; font:900 16px/1.25 "Microsoft YaHei",sans-serif; cursor:pointer; touch-action:manipulation; }
.campaign-button:hover { filter:brightness(1.06); }
.campaign-button:active { box-shadow:0 1px 0 #53665066; }
.campaign-button:focus-visible { outline:3px solid #273f59; outline-offset:4px; }
.campaign-button:disabled { cursor:default; opacity:.55; }
.campaign-back::before { content:"‹ "; }
.campaign-regions { display:flex; gap:8px; overflow:auto; padding:0 3px 5px; }
.campaign-region { white-space:nowrap; border-color:var(--region-accent); }
.campaign-region[aria-current="true"] { background:#354f3d; color:#fff3cb; border-color:#354f3d; }
.campaign-viewport { position:absolute; inset:74px 0 0; overflow:hidden; touch-action:none; cursor:grab; background:radial-gradient(ellipse at 40% 25%,#e2dfb9aa,transparent 70%),repeating-linear-gradient(-30deg,#a2b7b31a 0 2px,transparent 2px 36px); }
.campaign-viewport.is-dragging { cursor:grabbing; }
.campaign-world { position:absolute; top:0; left:0; transform-origin:0 0; }
.campaign-route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:hidden; }
.campaign-route-raster { position:absolute; pointer-events:none; z-index:1; }
/* Camera geometry must commit synchronously, including under the global
   reduced-motion rule that otherwise creates tiny transitions for all CSS. */
.campaign-world,.campaign-ground,.campaign-route-raster,.campaign-route,.campaign-geography,.campaign-climate-ground { transition-property:none!important; }
.campaign-route-segment { pointer-events:none; }
.campaign-route path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.campaign-route-edge { stroke:#777d53; stroke-width:42; }
.campaign-route-paper { stroke:#f2ddb1; stroke-width:35; }
.campaign-route-dashes { stroke:#9e875c; stroke-width:3; stroke-dasharray:3 18; }
.campaign-island { position:absolute; top:40px; width:570px; height:625px; border:3px solid #64745677; border-bottom:10px solid #63795066; border-radius:42% 49% 35% 47% / 32% 38% 42% 45%; background:radial-gradient(ellipse at 40% 20%,#ffffe84d,transparent 50%),var(--island-color); box-shadow:12px 15px 0 #65858228; transform:rotate(-3deg); }
.campaign-island-sign { position:absolute; top:5px; left:65px; padding:12px 24px; font:900 24px/1.3 "Microsoft YaHei",sans-serif; color:var(--region-accent); background:#f1e3bd; border:3px solid var(--region-accent); border-radius:7px 12px 7px 10px; box-shadow:3px 5px 0 #51664b44; transform:rotate(5deg); }
.campaign-tree { position:absolute; width:40px; height:50px; border-radius:45% 60% 35% 40%; background:linear-gradient(140deg,#829863,#587548); border:2px solid #50693d; transform:rotate(var(--tree-turn)); box-shadow:4px 5px 0 #536f4440; }
.campaign-tree::after { content:""; position:absolute; height:17px; width:7px; background:#796c4e; bottom:-12px; left:16px; border-radius:2px; }
.campaign-stone { width:28px; height:20px; border-radius:10px 14px 5px 8px; background:#c9c7ad; border-color:#949981; }
.campaign-stone::after { display:none; }
.campaign-world .campaign-node {
  position:absolute; z-index:200000; display:grid; place-items:center; width:66px; height:66px; min-height:66px; padding:0;
  grid-template-columns:1fr; grid-template-rows:1fr; text-align:center;
  transform:translate(-50%,-50%); border:4px solid #53664a; border-radius:50%; font:950 25px/1 "Microsoft YaHei",sans-serif;
  color:#38503a; background:radial-gradient(circle at 35% 30%,#fff3d0,#e3c985); box-shadow:0 6px 0 #6b714f,0 9px 0 #6b714f44;
}
.campaign-world .campaign-node:hover,.campaign-world .campaign-node:active { transform:translate(-50%,-50%); }
.campaign-world .campaign-node.selected { border-color:#374f68; box-shadow:0 6px 0 #415a69,0 0 0 7px #fff7dccc; background:#fff1ba; }
.campaign-world .campaign-node-boss { border-radius:17px; background:#e6b881; }
.campaign-world .campaign-node.completed { background:#e9d8ad; }
.campaign-node-badge { position:absolute; right:-7px; top:-13px; color:#fef2cf; background:#4a684d; min-width:24px; height:24px; border-radius:50%; font-size:18px; line-height:24px; }
.campaign-node-badge:empty { display:none; }
.campaign-landmark { position:absolute; z-index:2; padding:0; border:0; width:112px; height:112px; min-height:112px; background:transparent; box-shadow:none; transform:rotate(-5deg); }
.campaign-landmark::after { content:"♪"; position:absolute; top:0; right:0; color:#314631; opacity:0; font-size:32px; }
.campaign-landmark.is-awake { transform:rotate(9deg) translateY(-8px); }
.campaign-landmark.is-awake::after { opacity:1; }
.campaign-landmark { transition:transform .18s ease; }
.menu-motion-reduced .campaign-landmark { transition:none; }
@media (prefers-reduced-motion:reduce) { .campaign-landmark { transition:none; } }
.campaign-portrait { display:block; width:100%; height:100%; border:0; border-radius:0; background-image:var(--campaign-atlas); background-repeat:no-repeat; background-color:transparent; box-shadow:none; }
.campaign-landmark .campaign-portrait { width:112px; height:112px; }
.campaign-camera-controls { position:absolute; z-index:4; bottom:max(16px,var(--safe-area-bottom,env(safe-area-inset-bottom))); left:max(16px,var(--safe-area-left,env(safe-area-inset-left))); display:flex; gap:8px; }
.campaign-camera-controls .campaign-button { font-size:24px; padding:8px 14px; }
.campaign-camera-controls .campaign-center { font-size:16px; }
.campaign-map-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
html.is-auto-landscape .campaign-map-toolbar { top:max(8px,var(--safe-area-right,env(safe-area-inset-right))); left:max(12px,var(--safe-area-top,env(safe-area-inset-top))); right:max(12px,var(--safe-area-bottom,env(safe-area-inset-bottom))); }
@container (max-height:500px) {
  .start-menu-overlay .start-menu-home { width:clamp(240px,35cqw,360px); }
  .start-menu-overlay .start-menu-heading h1 { font-size:clamp(34px,12cqh,55px); margin-bottom:20px; }
  .start-menu-overlay .start-menu-home-actions { gap:12px; }
  .start-menu-overlay .menu-main-action { min-height:52px; font-size:20px; }
  .campaign-map-toolbar { gap:12px; top:8px; }
  .campaign-regions { gap:6px; }
  .campaign-region { padding:8px 12px; }
  .campaign-viewport { top:64px; }
}
@container (max-width:620px) {
  .campaign-map-toolbar { gap:8px; }
  .campaign-region { font-size:16px; padding:8px; }
}

/* Whiteboard prototype: title -> scroll map -> deployment/battle; settings has two pages. */
.start-menu-overlay .start-menu-home { inset:0; width:100%; height:100%; max-height:none; transform:none; }
.start-menu-overlay .start-menu-heading { position:absolute; top:max(24px,var(--safe-area-top,env(safe-area-inset-top))); left:max(28px,var(--safe-area-left,env(safe-area-inset-left))); width:auto; text-align:left; pointer-events:none; z-index:2; }
.start-menu-overlay .start-menu-heading h1 { white-space:normal; font-size:clamp(32px,4.8cqw,64px); margin:0; animation:none; }
.title-menu { position:absolute; left:clamp(28px,5cqw,64px); top:54%; transform:translateY(-50%); width:clamp(180px,23cqw,280px); display:grid; gap:clamp(6px,1.5cqh,12px); z-index:3; }
.title-menu-button { display:block; width:100%; min-height:clamp(44px,7.5cqh,56px); margin:0; padding:5px 16px; border:3px solid #52634e; border-radius:8px 14px 9px 12px; background:#f4e7c1; color:#344c3a; font:900 clamp(21px,2.4cqw,28px)/1.2 "Microsoft YaHei",sans-serif; box-shadow:0 5px 0 #354c3b80,inset 0 0 0 2px #fff7dd; cursor:pointer; touch-action:manipulation; }
.title-menu-button:hover { background:#fff2ce; }
.title-menu-button:focus-visible { outline:3px solid #fff3c6; outline-offset:3px; }
.title-menu-primary { color:#fff8d7; background:#526b91; border-color:#344d69; box-shadow:0 5px 0 #243c58aa,inset 0 0 0 2px #8ca1bf; }
.title-menu-primary:hover { background:#617ba2; }
@container (max-height:500px) {
  .title-menu { top:50%; gap:6px; }
  .start-menu-overlay .start-menu-home .start-menu-heading,
  html.is-auto-landscape .start-menu-overlay .start-menu-home .start-menu-heading { top:30px; left:42%; right:24px; }
  .start-menu-overlay .start-menu-heading h1 { font-size:clamp(30px,5cqw,48px); }
}
.title-screen-watermark { position:absolute; left:max(14px,var(--safe-area-left,env(safe-area-inset-left))); bottom:max(12px,var(--safe-area-bottom,env(safe-area-inset-bottom))); z-index:4; pointer-events:none; user-select:none; white-space:nowrap; color:#fff3c6; font:700 13px/1.4 "Microsoft YaHei",sans-serif; text-shadow:1px 1px 2px #243442; }
.title-screen-watermark:empty { display:none; }
.title-content { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:clamp(12px,2cqh,24px); background:#20312699; color:#344b3b; font-family:"Microsoft YaHei",sans-serif; }
.title-content.hidden { display:none; }
.title-content-card { display:flex; flex-direction:column; gap:12px; width:min(860px,100%); height:min(600px,100%); min-width:0; min-height:0; max-height:100%; padding:16px; border:3px solid #697653; border-radius:18px 12px 16px 13px; background:#efe2c3 var(--menu-map-texture,none) center/1024px; box-shadow:0 12px 40px #14241b88,3px 4px 0 #b9a67b; }
.title-content[data-page="extras"] .title-content-card { position:relative; width:min(1120px,100%); height:min(580px,100%); padding:clamp(14px,4cqh,32px); border:4px solid #243348; border-radius:28px; background:#fffaf0; box-shadow:6px 8px 0 #24334888; }
.title-content[data-page="extras"] .title-content-header { position:absolute; top:-8px; right:-8px; z-index:2; display:block; width:48px; height:48px; }
.title-content[data-page="extras"] .title-content-header h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.title-content[data-page="extras"] #titleContentBack { width:48px; min-width:48px; height:48px; padding:0; border:3px solid #243348; border-radius:50%; background:#ffdc55; color:#243348; font-size:34px; line-height:1; box-shadow:none; }
.title-content[data-page="extras"] .title-content-body { overflow:visible; }
.title-content[data-page="gamehub"] .title-content-card { width:min(520px,100%); height:auto; }
.title-content[data-page="gamehub"] .title-content-header { grid-template-columns:1fr; }
.title-content[data-page="gamehub"] #titleContentBack { display:none; }
.gamehub-status { padding:12px 0; font-size:16px; }
.gamehub-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.title-content-header { display:grid; grid-template-columns:90px 1fr 90px; align-items:center; min-height:44px; gap:10px; flex-shrink:0; }
.title-content-header h2 { margin:0; text-align:center; font-size:30px; line-height:1.2; }
.title-content-header .campaign-button { min-height:44px; }
.title-content .campaign-button { -webkit-tap-highlight-color:transparent; }
.title-content-body { display:flex; flex-direction:column; flex:1; min-height:0; gap:8px; overflow:auto; }
.title-content-note { margin:0; color:#5c6750; font-size:14px; line-height:1.4; text-align:center; }
.extras-layout { display:grid; grid-template-columns:minmax(164px,.9fr) minmax(0,1.8fr); gap:24px; min-height:0; flex:1; }
.extras-sidebar { display:flex; flex-direction:column; gap:14px; min-width:0; min-height:0; padding:10px 24px 0 0; border-right:2px solid #d7e1e4; }
.extras-section-title { margin:0 0 6px; color:#667d8b; font-size:14px; line-height:1; }
.extras-author-card { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:8px; padding:12px; border:3px solid #cad8de; border-radius:20px; background:#fff; }
.extras-author-avatar { display:block; width:56px; height:56px; overflow:hidden; border:2px solid #243348; border-radius:50%; background:#fff4d6; }
.extras-author-avatar img { display:block; width:100%; height:150%; object-fit:cover; object-position:50% 0; }
.extras-author-name { min-width:0; color:#243348; font-size:20px; white-space:nowrap; }
.extras-author-card .extras-author-home { min-width:0; min-height:44px; padding:4px 8px; border-color:#243348; border-radius:22px; background:#ffdc55; color:#243348; font-size:14px; white-space:nowrap; box-shadow:none; }
.extras-video-section { min-height:0; }
.extras-video-card { display:flex; flex-direction:column; gap:8px; width:100%; min-width:0; padding:12px; border:3px solid #cad8de; border-radius:20px; background:#fff; color:#243348; text-align:left; box-shadow:none; }
.extras-video-title { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:16px; line-height:1.3; }
.extras-video-cover { position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border:2px solid #243348; border-radius:12px; }
.extras-video-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.extras-video-play { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:46px; height:46px; padding-left:3px; border:3px solid #243348; border-radius:50%; transform:translate(-50%,-50%); color:#243348; background:#ffdc55; font-size:22px; }
.extras-characters { display:flex; flex-direction:column; min-width:0; min-height:0; gap:10px; }
.extra-content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:16px; flex:1; min-height:0; }
.extra-character { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:0; padding:10px; border:4px solid #cad8de; border-radius:22px; background:#fff; color:#243348; box-shadow:none; }
.extra-character:focus-visible,.extra-character:hover { border-color:#f3c94a; }
.extras-layout .extra-character-art { width:clamp(46px,12cqh,96px); height:clamp(46px,12cqh,96px); flex-shrink:0; }
.extras-layout .extra-character-art img { display:block; width:100%; height:100%; object-fit:contain; }
.extras-layout .extra-character-name { margin:0; font-size:clamp(18px,3cqh,24px); line-height:1.1; }
.extras-layout .extra-character-action { margin:0; color:#667d8b; font-size:14px; font-weight:700; line-height:1.2; text-align:center; }
.extra-character-state { position:absolute; right:10px; top:8px; color:#597343; font-size:18px; line-height:1; }
.extra-character.is-locked .extra-character-art { filter:grayscale(1); opacity:.65; }
.extras-hint { flex-shrink:0; color:#667d8b; font-size:14px; line-height:1.2; }
@container (min-height:501px) {
  .extras-sidebar { display:grid; grid-template-rows:minmax(0,.9fr) minmax(0,1.2fr); gap:16px; padding:0 24px 28px 0; }
  .extras-author-section,.extras-video-section { display:flex; flex-direction:column; min-height:0; }
  .extras-author-card { flex:1; min-height:0; grid-template-columns:96px minmax(0,1fr); align-content:center; gap:10px 14px; padding:16px; }
  .extras-author-avatar { width:96px; height:96px; grid-row:1 / 3; }
  .extras-author-name { font-size:24px; }
  .extras-author-home { grid-column:2; width:100%; }
  .extras-video-card { flex:1; min-height:0; }
  .extras-video-title { flex-shrink:0; }
  .extras-video-cover { flex:1; min-height:0; aspect-ratio:auto; background:#fffaf0; }
  .extras-video-cover img { object-fit:contain; }
  .extras-hint { line-height:18px; }
}
@container (max-width:900px) {
  .extras-author-card { grid-template-columns:36px minmax(0,1fr); padding:4px 8px; row-gap:2px; }
  .extras-author-avatar { width:36px; height:36px; grid-row:1 / 3; }
  .extras-author-name { font-size:16px; }
  .extras-author-home { grid-column:2; }
}
@container (max-height:400px) {
  .extras-layout { gap:14px; }
  .extras-sidebar { padding:4px 12px 0 0; gap:8px; }
  .extras-author-card { grid-template-columns:36px minmax(0,1fr); padding:4px 8px; row-gap:2px; }
  .extras-author-avatar { width:36px; height:36px; grid-row:1 / 3; }
  .extras-author-name { font-size:16px; }
  .extras-author-home { grid-column:2; }
  .extras-video-card { padding:4px; gap:4px; }
  .extras-video-title { font-size:14px; line-height:1.2; }
  .extras-video-play { width:38px; height:38px; font-size:18px; }
  .extra-content-grid { gap:10px; }
  .extras-layout .extra-character { padding:4px; gap:4px; border-width:3px; border-radius:18px; }
  .extras-hint { font-size:13px; }
}
.leaderboard-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(780px,100%); margin:0 auto; flex-shrink:0; border-bottom:2px solid #8a79584d; padding-bottom:8px; }
.leaderboard-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.leaderboard-stat span { font-size:14px; }
.leaderboard-stat strong { font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums; }
.leaderboard-stat.is-total strong { color:#91611f; }
.leaderboard-tools { display:flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; }
.leaderboard-total { display:grid; place-items:center; min-height:44px; padding:6px 16px; border:2px solid #3e5537; border-radius:8px 12px 8px 10px; color:#fff4ce; background:#526b48; font-size:16px; font-weight:800; }
.leaderboard-tools>.campaign-button { min-height:44px; padding:6px 14px; font-size:15px; }
.leaderboard-mine { margin:0; text-align:center; font-size:15px; line-height:1.4; flex-shrink:0; }
.leaderboard-table { display:flex; flex-direction:column; min-height:60px; flex:1; width:min(900px,100%); margin:0 auto; overflow:hidden; border:2px solid #8b806055; border-radius:9px; background:#fff6df88; }
.leaderboard-row { display:grid; grid-template-columns:76px minmax(0,1fr) minmax(100px,24%); align-items:center; gap:10px; padding:6px 14px; min-height:46px; }
.leaderboard-table-head { min-height:32px; font-size:14px; font-weight:800; background:#b4b68a55; flex-shrink:0; }
.leaderboard-row>:last-child { text-align:right; }
.leaderboard-list { margin:0; padding:0; list-style:none; overflow:auto; min-height:0; overscroll-behavior:contain; touch-action:auto; }
.leaderboard-list .leaderboard-row:nth-child(even) { background:#d9c8a233; }
.rank-place { padding-left:5px; color:#87652c; font-size:21px; }
.rank-player { display:flex; gap:10px; align-items:center; min-width:0; }
.rank-avatar { position:relative; display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; overflow:hidden; background:#d9c89f; font-size:16px; }
.rank-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rank-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.rank-score { font-size:18px; font-variant-numeric:tabular-nums; }
.leaderboard-status { min-height:20px; flex-shrink:0; }
.rank-formula { flex-shrink:0; }
.unit-lock-badge { position:absolute; top:3px; left:3px; font-size:17px; line-height:1; z-index:3; }
.unit-card:not(.is-content-locked) .unit-lock-badge { display:none; }
.unit-card.is-content-locked .unit-glyph { filter:grayscale(1); }
@container (max-height:500px) {
  .title-content-card { gap:6px; padding:10px; }
  .title-content-header h2 { font-size:25px; }
  .title-content-body { gap:5px; }
  .extra-character { gap:6px; padding:10px 8px; }
  .extra-character h3 { font-size:22px; }
  .extra-character-action { font-size:16px; }
  .leaderboard-summary { padding-bottom:4px; }
  .leaderboard-stat strong { font-size:23px; }
  .leaderboard-stat { flex-direction:row; justify-content:center; gap:6px; }
  .rank-formula { display:none; }
}
@container (max-height:350px) {
  .title-content-card { gap:4px; padding:8px; }
  .extra-character-art { width:56px; height:56px; }
  .extra-character { gap:4px; padding:6px; }
  .leaderboard-summary { padding-bottom:2px; }
  .leaderboard-table-head { min-height:28px; padding-block:3px; }
}
@container (max-width:620px) {
  .leaderboard-tools { gap:4px; }
  .leaderboard-tools>.campaign-button { padding:5px 8px; font-size:14px; }
  .leaderboard-row { grid-template-columns:50px minmax(0,1fr) 90px; gap:6px; padding-inline:8px; }
}
html.is-auto-landscape .start-menu-overlay .start-menu-home { width:100%; height:100%; max-height:none; }
html.is-auto-landscape .start-menu-overlay .start-menu-heading { top:max(20px,var(--safe-area-right,env(safe-area-inset-right))); left:max(24px,var(--safe-area-top,env(safe-area-inset-top))); }
#app.prototype-ui:not(.menu-background-active) { --prototype-rail-width:210px; display:grid; grid-template-columns:var(--prototype-rail-width) minmax(0,1fr)!important; grid-template-rows:60px minmax(0,1fr)!important; }
#app.prototype-ui:not(.menu-background-active)>#unitDock { display:flex!important; pointer-events:auto; grid-column:1!important; grid-row:1 / 3!important; min-height:0; padding:8px; width:auto; height:auto; border-right:2px solid #74806b; border-top:0; perspective:1200px; }
#app.prototype-ui:not(.menu-background-active)>#topbar { grid-column:2!important; grid-row:1!important; display:block; height:60px; min-height:60px; padding:6px 12px; }
#app.prototype-ui:not(.menu-background-active)>#playArea { grid-column:2!important; grid-row:2!important; }
#app.prototype-ui #sidePanel,#app.prototype-ui .phase-stat,#app.prototype-ui .dock-header,#app.prototype-ui .floating-guide,#app.prototype-ui .camera-hint { display:none!important; }
#app.prototype-ui #topbar .top-actions { display:grid; width:100%; height:48px; max-width:none; grid-template-areas:"menu . reset action settings"; grid-template-columns:64px minmax(0,1fr) 96px 112px 64px; grid-template-rows:48px; gap:8px; justify-content:stretch; }
#app.prototype-ui #topbar .top-actions .button { height:48px; min-height:48px; font-size:16px; }
.dock-phase-turn { position:relative; width:100%; min-height:0; flex:1; transform-style:preserve-3d; transition:transform .34s ease; }
.prototype-ui.rail-battle .dock-phase-turn { transform:rotateY(180deg); }
.dock-phase-face { position:absolute; inset:0; display:flex; flex-direction:column; min-height:0; min-width:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background-color:var(--panel); background-image:var(--paper-grid); }
.dock-phase-battle { transform:rotateY(180deg); gap:14px; padding-top:12px; }
.prototype-ui .dock-phase-battle .top-speed-controls { display:flex; flex-direction:column; gap:12px; width:100%; }
.prototype-ui .dock-phase-battle .top-speed-readout { display:none; }
.prototype-ui .dock-phase-battle .speed-button { width:100%; min-width:0; height:48px; min-height:48px; font-size:16px; flex:none; }
.prototype-ui .dock-phase-deploy>.budget-stat { display:flex!important; flex:none; justify-content:center; align-items:center; gap:8px; padding:7px 0 12px; width:100%; height:46px; font-size:20px; }
.prototype-ui .budget-stat::before { content:"◉"; color:#aa7723; font-size:22px; }
.prototype-ui .budget-stat .stat-kicker,.prototype-ui .budget-stat small { display:none; }
.prototype-ui .budget-stat #budgetLabel { font-size:20px; width:auto; }
#app.prototype-ui #unitList { flex:1; min-height:0; height:100%; width:100%; display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto; gap:8px; touch-action:pan-y; }
#app.prototype-ui #unitList .unit-card { width:100%; min-width:0; }
.prototype-button { min-height:48px; border:2px solid #607157; border-radius:8px 10px 6px 9px; padding:8px 14px; color:#344937; background:#f5e7c6; font:900 18px/1.2 "Microsoft YaHei",sans-serif; box-shadow:0 3px 0 #50614755; cursor:pointer; touch-action:manipulation; }
.prototype-button:hover { filter:brightness(1.05); }
.prototype-button:focus-visible { outline:3px solid #365b77; outline-offset:2px; }
.prototype-button[aria-pressed="true"] { background:#cadb9f; }
.prototype-button:disabled { opacity:.55; cursor:default; }
#presentationOverlay.prototype-settings { backdrop-filter:none; background:#3a4d37aa; container-type:size; }
#presentationOverlay.prototype-settings .presentation-card { position:relative; display:flex; flex-direction:column; align-items:stretch; width:min(var(--prototype-settings-width,380px),calc(100% - 24px)); height:auto; max-height:calc(100% - 24px); padding:12px 16px 16px; border:3px solid #607157; border-radius:10px 16px 8px 12px; background:#f4e8c9; gap:8px; overflow:auto; container-type:inline-size; }
#presentationOverlay.prototype-settings[data-page="display"] { --prototype-settings-width:700px; }
.prototype-settings #presentationTitle { margin:0; padding:0 0 12px; border-bottom:2px solid #879378; text-align:center; font-size:26px; line-height:1.2; color:#354d3b; flex:none; }
.prototype-settings-main { display:flex; flex-direction:column; align-items:center; gap:8px; }
.prototype-settings-main .prototype-button { width:min(300px,100%); }
.prototype-settings-footer { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(300px,100%); margin-inline:auto; }
.prototype-settings .prototype-danger { color:#813c30; border-color:#a46c51; background:#f0d7b8; }
.prototype-reset-page { display:flex; flex-direction:column; gap:16px; }
.prototype-reset-note { margin:4px 0; color:#654b3e; font-size:16px; line-height:1.6; }
.prototype-volume-control { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; user-select:none; -webkit-user-select:none; touch-action:none; overflow:hidden; background:linear-gradient(to right,#c5d7a1 var(--volume-fill,0%),#eee2c2 var(--volume-fill,0%)); }
.prototype-volume-control > span,.prototype-volume-control > output { position:relative; pointer-events:none; }
.prototype-volume-control:focus-within { outline:3px solid #365b77; outline-offset:2px; }
.prototype-volume-control input.prototype-volume-range { position:absolute; inset:0; width:100%; height:100%; min-height:44px; margin:0; padding:0; opacity:0; pointer-events:none; touch-action:none; }
.prototype-volume-value { font-size:16px; min-width:4ch; text-align:right; color:#53684c; }
.prototype-display-page { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.prototype-display-column { display:flex; flex-direction:column; min-width:0; gap:10px; }
.prototype-settings .prototype-display-control { min-height:48px; padding:8px 12px; font-size:16px; border:2px solid #65775b; border-radius:6px 10px 6px 8px; background:#eee2c2; gap:8px; box-shadow:0 3px 0 #50614733; }
.prototype-display-toggle { position:relative; cursor:pointer; padding-right:32px!important; }
.prototype-display-toggle input { position:absolute; inset:0; width:100%!important; height:100%!important; opacity:0; margin:0; cursor:pointer; }
.prototype-display-toggle.is-on { background:#c8d99f!important; }
.prototype-display-toggle.is-on::after { content:"✓"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-weight:950; pointer-events:none; }
.prototype-display-toggle:focus-within { outline:3px solid #365b77; outline-offset:2px; }
.prototype-settings .presentation-opacity-option { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.prototype-settings .presentation-opacity-option input { min-height:32px; }
.prototype-ui .dock-phase-deploy>.budget-stat { flex-direction:row; }
#presentationOverlay.prototype-settings .prototype-display-control > span { font-size:16px; }
.prototype-color-pair { display:flex; gap:8px; }
.prototype-color-pair .prototype-display-control { flex:1; min-width:0; display:flex; flex-direction:column; padding:5px!important; font-size:16px; }
.prototype-color-pair input[type="color"] { width:28px; min-width:28px; height:24px; padding:0; }
.prototype-display-column>.prototype-button[id^="volume-"] { display:flex; align-items:center; justify-content:space-between; font-size:16px; }
html.is-auto-landscape #presentationOverlay.prototype-settings .presentation-card { width:min(var(--prototype-settings-width,380px),calc(100% - 24px)); max-height:calc(100% - 24px); }
@media (pointer:coarse),(max-width:900px) { #app.prototype-ui:not(.menu-background-active) { --prototype-rail-width:112px; } }
@media (prefers-reduced-motion:reduce) { .dock-phase-turn { transition:none; } }
.prototype-ui.menu-motion-reduced .dock-phase-turn { transition:none; }
.campaign-map { background:#e4d8bb var(--menu-map-texture,none) center/var(--campaign-tile-size,1024px); }
.campaign-viewport { top:0; background:linear-gradient(#f9ebc955,#e8dab533); }
.campaign-route-edge { stroke:#827357; stroke-width:28; }
.campaign-route-paper { stroke:#f7e7bc; stroke-width:22; }
.campaign-route-dashes { stroke:#b4986f; stroke-width:2; stroke-dasharray:3 16; }
.campaign-route-line { stroke:#8a8469; stroke-width:2.5; opacity:.75; }
.campaign-route-segment:not(.is-cleared) .campaign-route-edge,
.campaign-route-segment:not(.is-cleared) .campaign-route-paper,
.campaign-route-segment:not(.is-cleared) .campaign-route-dashes,
.campaign-route-segment.is-cleared .campaign-route-line { display:none; }
.campaign-guards { position:absolute; z-index:200002; width:0; height:0; pointer-events:none; }
/* The viewport clips guards. Hiding a transformed ancestor can leave its
   filtered sprites unpainted when a mobile camera brings it back on screen. */
.campaign-guard { position:absolute; width:0; height:0; }
.campaign-guard-body { position:absolute; bottom:0; left:-52px; width:104px; height:104px; transform-origin:50% 100%; }
.campaign-guard-body .campaign-portrait { width:100%; height:100%; filter:drop-shadow(1px 2px 0 #4e5f4040); }
.campaign-guard-shadow { position:absolute; left:-27px; bottom:-3px; width:54px; height:12px; border-radius:50%; background:#43573a; opacity:.22; }
.campaign-world .campaign-node.has-guards .campaign-node-title { transform:rotate(-45deg) translateY(36px); padding:5px 7px; border-radius:7px; background:#f5e4bfe8; }
.campaign-world .campaign-node { width:112px; height:112px; min-height:112px; border-radius:8px; border-width:3px; transform:translate(-50%,-50%) rotate(45deg); background:#f5dfb1; box-shadow:4px 4px 0 #9d8e6655; }
.campaign-world .campaign-node:hover,.campaign-world .campaign-node:active { transform:translate(-50%,-50%) rotate(45deg); }
.campaign-world .campaign-node-boss { background:#edc992; border-radius:8px; }
.campaign-world .campaign-node.selected { background:#fff1bd; box-shadow:0 0 0 5px #fdf2c9,0 0 0 8px #586d83; }
.campaign-node-title { position:relative; z-index:1; text-shadow:0 1px 0 #fff8df; }
.campaign-node-title { transform:rotate(-45deg); width:108px; padding:4px; font-size:20px; line-height:1.3; word-break:normal; }
.campaign-node-badge { transform:rotate(-45deg); right:-13px; top:-13px; z-index:2; }
.campaign-node-stars { position:absolute; z-index:4; display:flex; align-items:center; justify-content:center; gap:0; width:112px; height:44px; padding:0; border:0; background:none; box-shadow:none; transform:translate(-50%,-50%); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease; }
.campaign-node-stars.is-visible { opacity:1; visibility:visible; }
.campaign-node-star { display:block; flex:0 0 34px; width:34px; height:36px; transform:translateY(5px) rotate(-14deg); filter:drop-shadow(0 2px 0 #66513555); }
.campaign-node-star:nth-child(2) { flex-basis:42px; width:42px; height:44px; transform:translateY(-2px) rotate(5deg); }
.campaign-node-star:nth-child(3) { transform:translateY(6px) rotate(14deg); }
.campaign-node-star svg { display:block; width:100%; height:100%; overflow:visible; }
.campaign-star-body { fill:#c3b28d; stroke:#847457; stroke-width:2.8; stroke-linejoin:round; }
.campaign-star-shade { fill:#9b8a68; opacity:.4; }
.campaign-star-shine { fill:#eee3bf; opacity:.45; }
.campaign-node-star.is-earned .campaign-star-body { fill:#ffd047; stroke:#805222; }
.campaign-node-star.is-earned .campaign-star-shade { fill:#e89624; opacity:.8; }
.campaign-node-star.is-earned .campaign-star-shine { fill:#fff5a0; opacity:.95; }
@media (prefers-reduced-motion:reduce) { .campaign-node-stars { transition:none; } }
.campaign-vegetation { position:absolute; z-index:0; width:58px; height:58px; pointer-events:none; transform-origin:50% 97%; }
.campaign-vegetation.campaign-shrub { width:76px; height:76px; }
.campaign-vegetation.campaign-tree { width:96px; height:96px; border:0; border-radius:0; background:none; box-shadow:none; }
.campaign-vegetation::before { display:none; content:none; }
.campaign-vegetation::after { content:""; display:block; position:absolute; left:27.5%; bottom:1.5%; z-index:0; width:45%; height:5px; border-radius:50%; background:#46513b; opacity:.17; filter:blur(1px); }
.campaign-plant-sprite { position:relative; z-index:1; display:block; width:100%; height:100%; background-image:var(--campaign-vegetation-atlas,none); background-size:200% 200%; background-repeat:no-repeat; transform-origin:50% 97%; }
.campaign-vegetation[data-biome="settlement"] .campaign-plant-sprite { filter:sepia(.12) saturate(.88); }
.campaign-vegetation[data-biome="valley"] .campaign-plant-sprite { filter:saturate(.78) hue-rotate(8deg); }
.campaign-shrub .campaign-plant-sprite { background-position:0 0; }
.campaign-grass .campaign-plant-sprite { background-position:100% 0; }
.campaign-flowers .campaign-plant-sprite { background-position:0 100%; }
.campaign-tree .campaign-plant-sprite { background-position:100% 100%; }
.campaign-climate { position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.campaign-climate-ground { position:absolute; z-index:0; pointer-events:none; }

/* A whole scroll with room for terrain and small, local victory encounters. */
.campaign-viewport { inset:0; background:none; }
.campaign-ground { position:absolute; inset:0; width:100%; height:100%; transform-origin:0 0; pointer-events:none; }
.campaign-map-minimal,.campaign-map-minimal .campaign-encounter-ground { background:#e8ddbd; }
.campaign-geography { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.campaign-terrain-art { position:absolute; z-index:0; pointer-events:none; object-fit:contain; }
.campaign-landmark { z-index:200000; }
.campaign-node-stars { z-index:200001; }
.campaign-world,.campaign-themed-map .campaign-world { background:none; }
.campaign-biome-ground { position:absolute; top:0; z-index:0; pointer-events:none; background-image:var(--menu-map-texture,none); background-size:var(--campaign-tile-size,1024px); background-blend-mode:multiply; mask-image:linear-gradient(to right,transparent,#000 70px,#000 calc(100% - 70px),transparent); }
.campaign-themed-map .campaign-encounter-ground { background:none; }
.campaign-settlement-life { position:absolute; z-index:0; display:block; pointer-events:none; }
.campaign-settlement-life .campaign-portrait { width:100%; height:100%; }
.campaign-geography path { stroke-linejoin:round; stroke-linecap:round; }
.campaign-river-bank { fill:none; stroke:#829b69; }
.campaign-river { fill:none; stroke:#83b9bf; }
.campaign-river-glint { fill:none; stroke:#c1e0d9; }
.campaign-lake-bank { fill:#829b69; stroke:#697d55; stroke-width:3; }
.campaign-lake { fill:#83b9bf; stroke:#61969a; stroke-width:3; }
.campaign-lake-ripple { fill:none; stroke:#c6e2d9; stroke-width:4; }
.campaign-mountain { fill:#a6a791; stroke:#6c755e; stroke-width:4; filter:drop-shadow(5px 7px 0 #65715435); }
.campaign-mountain-snow { fill:#efebd5; stroke:#808771; stroke-width:2; }
.campaign-mountain-fold { fill:none; stroke:#838d73; stroke-width:4; }
.campaign-encounter { position:absolute; z-index:auto; width:0; height:0; pointer-events:none; }
/* Let the viewport clip actor roots; toggling ancestor visibility during flight
   can leave nested transformed bodies unpainted when the camera returns. */
.campaign-encounter-floor { position:absolute; z-index:auto; width:0; height:0; pointer-events:none; }
.campaign-encounter-ground.is-offscreen,.campaign-encounter-floor.is-offscreen { visibility:hidden; }
.campaign-encounter-ground { position:absolute; z-index:0; width:490px; height:270px; border-radius:50%; background:#e8ddbd var(--menu-map-texture,none) center/var(--campaign-tile-size,1024px); mask-image:radial-gradient(ellipse,#000 48%,transparent 74%); pointer-events:none; }
.campaign-corpse-anchor,.campaign-corpse-ground-anchor { position:absolute; width:0; height:0; }
.campaign-corpse-window { position:absolute; overflow:visible; clip-path:inset(0); pointer-events:none; z-index:3; }
.campaign-corpse { position:absolute; width:128px; height:128px; min-height:128px; padding:8px; border:0; border-radius:0; box-shadow:none; background:none; transform-origin:50% 50%; cursor:pointer; pointer-events:auto; touch-action:none; -webkit-tap-highlight-color:transparent; }
.campaign-corpse .campaign-portrait { width:112px; height:112px; filter:grayscale(1) drop-shadow(1px 1px 0 #4b4b4b); }
.campaign-corpse:focus-visible { outline:3px dashed #364f70; outline-offset:-8px; }
.campaign-corpse-shadow { position:absolute; left:-41px; top:-3px; width:82px; height:15px; background:#364331; border-radius:50%; pointer-events:none; z-index:0; }
.campaign-corpse-soil { position:absolute; left:-46px; top:0; width:92px; height:16px; border-radius:50%; background:radial-gradient(ellipse,#6b6347 20%,#b2a17a 45%,#d0ba8a 64%,transparent 70%); pointer-events:none; z-index:1; }
.campaign-corpse-soil::after { content:""; position:absolute; inset:5px 11px 8px; border-bottom:3px dotted #75634b; border-radius:50%; }
.campaign-corpse-hit { position:absolute; left:-32px; top:-90px; width:64px; height:64px; background:#e6c46c; border:2px solid #9a7241; clip-path:polygon(50% 0,60% 32%,90% 12%,74% 42%,100% 52%,72% 64%,89% 91%,59% 77%,43% 100%,37% 72%,8% 86%,26% 59%,0 41%,31% 38%); opacity:0; pointer-events:none; z-index:5; }
.campaign-victor { position:absolute; z-index:4; width:108px; height:108px; margin-left:-54px; margin-top:-108px; transform-origin:50% 100%; pointer-events:none; }
.campaign-victor .campaign-portrait { width:108px; height:108px; filter:drop-shadow(1px 1px 0 #486682); }
@container (max-height:500px) {
  #presentationOverlay.prototype-settings .presentation-card,
  html.is-auto-landscape #presentationOverlay.prototype-settings .presentation-card { padding:4px 12px; gap:4px; max-height:100%; }
  .prototype-settings-main { gap:2px; }
  .prototype-settings #presentationTitle { font-size:22px; padding-bottom:2px; }
  .prototype-display-column { gap:2px; }
  .prototype-settings .prototype-display-control { padding:4px 9px; font-size:16px; min-height:48px; }
  .prototype-color-pair .prototype-display-control { padding:2px!important; gap:0; }
  .prototype-color-pair input[type="color"] { height:20px; }
}

/* Keep the central battle controls and the clipboard controls in fixed groups. */
#app.prototype-ui:not(.menu-background-active) { grid-template-rows:minmax(0,1fr)!important; }
#app.prototype-ui:not(.menu-background-active)>#unitDock { grid-row:1!important; }
#app.prototype-ui:not(.menu-background-active)>#playArea { grid-row:1!important; }
#app.prototype-ui #playArea>#topbar { position:absolute; inset:12px 12px auto; display:block; height:70px; min-height:0; width:auto; padding:0; margin:0; background:none; border:0; box-shadow:none; backdrop-filter:none; z-index:9; pointer-events:none; }
#app.prototype-ui #topbar .button { pointer-events:auto; }
#app.prototype-ui #resultOverlay { z-index:8; }
#app.prototype-ui #topbar .top-actions { height:58px; grid-template-areas:"menu center share"; grid-template-columns:minmax(132px,1fr) auto minmax(132px,1fr); grid-template-rows:58px; gap:8px; overflow:visible; }
#app.prototype-ui #topbar .top-actions .menu-home-button { width:64px; min-width:64px; justify-self:start; align-self:center; animation:none; }
#app.prototype-ui .toolbar-center { grid-area:center; display:grid; grid-template-areas:"reset action settings"; grid-template-columns:clamp(64px,7vw,96px) clamp(92px,11vw,152px) clamp(44px,5vw,64px); align-items:center; gap:6px; }
#app.prototype-ui #topbar .toolbar-center .button { height:46px; min-height:46px; padding:3px; font-size:clamp(13px,1.4vw,16px); }
#app.prototype-ui #topbar .toolbar-center #startButton { height:58px; min-height:58px; font-size:clamp(18px,1.9vw,24px); font-weight:950; color:#fff6cf; background:#526f39; border:3px solid #304b28; box-shadow:0 4px 0 #304b28; animation:none; }
#app.prototype-ui .toolbar-share { grid-area:share; display:flex; gap:4px; align-items:center; justify-self:end; }
#app.prototype-ui .toolbar-navigation { grid-area:menu; display:flex; flex-direction:column; gap:6px; align-items:flex-start; justify-self:start; align-self:start; }
#app.prototype-ui #topbar .toolbar-navigation .button { width:104px; min-width:104px; height:46px; min-height:46px; padding:4px 8px; font-size:16px; animation:none; }
#app.prototype-ui #topbar .toolbar-share .button { width:88px; min-width:88px; height:46px; min-height:46px; padding:3px; font-size:14px; }
#app.prototype-ui .dock-phase-battle { overflow:auto; }
#app.prototype-ui .dock-phase-battle>.top-speed-controls,#app.prototype-ui .dock-phase-battle>button { flex-shrink:0; }
#app.prototype-ui.is-phone-viewport #topbar .top-actions { grid-template-columns:minmax(64px,1fr) auto minmax(64px,1fr); }
#app.prototype-ui.is-phone-viewport .toolbar-share { flex-direction:column; align-self:start; }
#app.prototype-ui.is-phone-viewport #topbar .toolbar-share .button { width:64px; min-width:64px; font-size:12px; }

/* Phone sizes use the game's logical landscape viewport, including embeds. */
#app.prototype-ui #battlefieldShell { inset:0; box-shadow:none; }
#app.prototype-ui #battlefieldShell::after { display:none; }
#app.prototype-ui.is-phone-viewport:not(.menu-background-active) { --prototype-rail-width:96px; }
#app.prototype-ui.is-phone-viewport:not(.menu-background-active)>#unitDock { padding:6px; }
#app.prototype-ui.is-phone-viewport #playArea>#topbar { inset:8px 8px auto; height:96px; }
#app.prototype-ui.is-phone-viewport #topbar .top-actions { height:48px; grid-template-rows:48px; gap:4px; grid-template-columns:minmax(64px,1fr) auto minmax(64px,1fr); }
#app.prototype-ui.is-phone-viewport #topbar .menu-home-button { width:52px; min-width:52px; height:44px; min-height:44px; font-size:14px; }
#app.prototype-ui.is-phone-viewport #topbar .toolbar-navigation .button { width:88px; min-width:88px; height:44px; min-height:44px; font-size:16px; }
#app.prototype-ui.is-phone-viewport .toolbar-center { grid-template-columns:64px 96px 48px; gap:4px; }
#app.prototype-ui.is-phone-viewport #topbar .toolbar-center .button { height:44px; min-height:44px; font-size:12px; padding:2px; }
#app.prototype-ui.is-phone-viewport #topbar #startButton { height:48px; min-height:48px; font-size:18px; }
#app.prototype-ui.is-phone-viewport #topbar .toolbar-share .button { width:64px; min-width:64px; height:44px; min-height:44px; font-size:12px; padding:2px; }
#app.prototype-ui.is-phone-viewport .dock-phase-battle { padding-top:6px; gap:6px; }
#app.prototype-ui.is-phone-viewport .dock-phase-battle .top-speed-controls { gap:6px; }
#app.prototype-ui.is-phone-viewport .dock-phase-battle .speed-button,
#app.prototype-ui.is-phone-viewport #pauseButton { height:44px; min-height:44px; font-size:14px; }
#app.prototype-ui.is-phone-viewport .dock-phase-deploy>.budget-stat { height:34px; padding:2px 0 6px; }
#app.prototype-ui.is-phone-viewport .budget-stat #budgetLabel { font-size:17px; }
#app.prototype-ui.is-phone-viewport .budget-stat::before { font-size:18px; }
#app.prototype-ui.is-phone-viewport .touch-tool-toggle { min-height:44px; height:44px; font-size:14px; }
#app.prototype-ui.is-phone-viewport #unitList { gap:6px; }
#app.prototype-ui.is-phone-viewport #unitList .unit-card-front { grid-template-columns:calc(var(--ui-mobileCardPortraitHeight,32)*1px) minmax(0,1fr); padding:2px; gap:0 2px; }
#app.prototype-ui.is-phone-viewport #unitList .unit-card-front .unit-portrait { grid-row:1; height:calc(var(--ui-mobileCardPortraitHeight,32)*1px); }
#app.prototype-ui.is-phone-viewport #unitList .unit-card[data-unit-id] { height:max(calc(var(--ui-mobileCardHeight,52)*1px),calc(var(--ui-mobileCardPortraitHeight,32)*1px + 20px)); }
#app.prototype-ui.is-phone-viewport #unitList .unit-card .unit-name,
#app.prototype-ui.is-phone-viewport #unitList .unit-card .unit-price { font-size:calc(var(--ui-mobileCardNameSize,12)*1px); }
#app.prototype-ui.is-phone-viewport #unitList .unit-card .unit-price { grid-column:1 / -1; text-align:right; font-size:calc(var(--ui-mobileCardPriceSize,12)*1px); }
html.is-phone-viewport .theater-notice { font-size:min(calc(var(--ui-noticeFontSize)*1px),18px); }
#app.is-phone-viewport .result-screen-text { font-size:min(calc(var(--ui-mobileResultFontSize,38)*1px),calc(var(--viewport-short-edge)*.115)); max-width:calc(100% - 32px); padding:8px; }
html.is-phone-viewport .campaign-button { min-width:44px; min-height:44px; padding:6px 10px; font-size:14px; }
html.is-phone-viewport .campaign-camera-controls { gap:6px; }
html.is-phone-viewport .campaign-camera-controls .campaign-button { padding:4px 10px; font-size:20px; }
html.is-phone-viewport .campaign-camera-controls .campaign-center { font-size:14px; }
.lineup-overlay { position:absolute; inset:0; z-index:180; display:grid; place-items:center; padding:12px; background:#23312288; }
.lineup-overlay.hidden { display:none; }
.lineup-card { width:min(580px,calc(100% - 24px)); max-height:calc(100% - 12px); overflow:auto; padding:18px; border:3px solid #65775b; border-radius:12px; background:#fff3d8; box-shadow:0 5px 0 #27392355; }
.lineup-card h2 { margin:0 0 10px; font-size:23px; }
.lineup-card textarea { display:block; width:100%; min-height:74px; resize:vertical; font:14px/1.4 monospace; border:2px solid #72835a; border-radius:6px; padding:8px; }
.lineup-message { margin:8px 0; font-size:15px; }
.lineup-dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
.lineup-dialog-actions .prototype-button { min-width:94px; min-height:44px; }

/* Battlefield above a fixed horizontal deployment/control dock. */
#app.prototype-ui:not(.menu-background-active) {
  --battle-dock-height:118px;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) var(--battle-dock-height)!important;
}
#app.prototype-ui:not(.menu-background-active)>#playArea { grid-column:1!important; grid-row:1!important; }
#app.prototype-ui:not(.menu-background-active)>#unitDock {
  grid-column:1!important; grid-row:2!important; width:100%; height:auto; padding:6px 10px;
  border-right:0; border-top:2px solid #74806b; opacity:1!important; translate:none!important;
}
#app.prototype-ui .dock-phase-deploy { flex-direction:row; gap:10px; }
.deployment-tools { width:110px; flex:0 0 110px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
#app.prototype-ui .deployment-tools .budget-stat { position:relative; display:flex!important; flex-direction:row; width:100%; height:48px; min-height:0; padding:0 0 22px; align-items:center; justify-content:center; gap:6px; }
.budget-stars { position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; height:22px; pointer-events:none; }
#app.prototype-ui .deployment-tools .budget-stat strong,#app.prototype-ui .deployment-tools .budget-stat::before { line-height:1; }
.budget-stars .campaign-node-star { flex:0 0 20px; width:20px; height:20px; transform:rotate(-12deg); filter:drop-shadow(0 1px 0 #66513540); }
.budget-stars .campaign-node-star:nth-child(2) { flex-basis:23px; width:23px; height:23px; transform:translateY(-1px) rotate(5deg); }
.budget-stars .campaign-node-star:nth-child(3) { transform:rotate(12deg); }
.budget-stars .campaign-node-star:not(.is-earned) .campaign-star-body { fill:none; stroke:#887f68; }
.budget-stars .campaign-node-star:not(.is-earned) .campaign-star-shade,.budget-stars .campaign-node-star:not(.is-earned) .campaign-star-shine { opacity:0; }
#app.prototype-ui .deployment-tools .touch-tool-toggle { width:100%; height:44px; min-height:44px; margin:0; padding:4px; }
#app.prototype-ui #unitList { flex:1; flex-direction:row; height:100%; width:0; min-width:0; overflow-x:auto; overflow-y:hidden; touch-action:none; gap:8px; padding:2px 2px 6px; }
#app.prototype-ui #unitList .unit-card[data-unit-id] { flex:0 0 116px; width:116px; min-width:116px; height:100%; touch-action:none; }
#app.prototype-ui #unitList .unit-card-front { grid-template-columns:52px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; padding:4px; gap:2px 4px; }
#app.prototype-ui #unitList .unit-card-front .unit-portrait { grid-column:1; grid-row:1; height:52px; max-height:100%; }
#app.prototype-ui #unitList .unit-card-front .unit-name { grid-column:2; grid-row:1; align-self:center; margin:0; font-size:16px; }
#app.prototype-ui #unitList .unit-card-front .unit-price { grid-column:1 / -1; grid-row:2; justify-self:end; max-width:100%; }
#app.prototype-ui .dock-phase-turn { transform-style:preserve-3d; }
#app.prototype-ui.rail-battle .dock-phase-turn { transform:rotateX(180deg); }
#app.prototype-ui .dock-phase-battle { transform:rotateX(180deg); flex-direction:row; align-items:center; justify-content:center; gap:12px; padding:0; overflow:auto; }
#app.prototype-ui .dock-phase-battle>.top-speed-controls { flex-direction:row; width:auto; gap:8px; }
#app.prototype-ui .dock-phase-battle .speed-button,#app.prototype-ui .dock-phase-battle>#pauseButton { flex:none; width:88px; min-width:64px; min-height:44px; height:44px; }
#app.prototype-ui.is-phone-viewport:not(.menu-background-active) { --battle-dock-height:96px; }
#app.prototype-ui.is-phone-viewport:not(.menu-background-active)>#unitDock { padding:4px 6px; }
#app.prototype-ui.is-phone-viewport .dock-phase-deploy { gap:6px; }
#app.prototype-ui.is-phone-viewport .deployment-tools { width:86px; flex-basis:86px; gap:0; }
#app.prototype-ui.is-phone-viewport .deployment-tools .budget-stat { height:40px; padding:0 0 18px; }
#app.prototype-ui.is-phone-viewport .budget-stars { height:16px; }
#app.prototype-ui.is-phone-viewport .budget-stars .campaign-node-star { flex-basis:15px; width:15px; height:15px; }
#app.prototype-ui.is-phone-viewport .budget-stars .campaign-node-star:nth-child(2) { flex-basis:17px; width:17px; height:17px; }
#app.prototype-ui.is-phone-viewport #unitList .unit-card[data-unit-id] { flex-basis:96px; width:96px; min-width:96px; height:100%; }
#app.prototype-ui.is-phone-viewport .dock-phase-battle .speed-button,#app.prototype-ui.is-phone-viewport .dock-phase-battle>#pauseButton { width:76px; }
#app.prototype-ui:not(.menu-background-active) .theater-notices { bottom:max(calc(var(--battle-dock-height) + 12px),calc(var(--ui-noticeBottom)*1px)); }
#app.prototype-ui.is-phone-viewport:not(.menu-background-active) .theater-notices { bottom:max(calc(var(--battle-dock-height) + 12px),calc(var(--ui-mobileNoticeBottom,18)*1px)); }

/* A bounded compositing surface preserves map depth without a giant GPU layer. */
.campaign-world-window { position:absolute;top:0;left:0;overflow:hidden;contain:paint;will-change:transform;transform-origin:0 0;transition-property:none!important; }
.campaign-ground,.campaign-climate { will-change:transform; }
.campaign-climate { right:auto;bottom:auto;transition-property:none!important; }

.campaign-guards:not(.is-offscreen) .campaign-guard-body,
.campaign-guards:not(.is-offscreen) .campaign-guard-shadow { will-change:transform; }

.campaign-world .campaign-cache-out { display:none!important; }

/* Campaign selection overlay for the restored package. World sizing and hit geometry are unchanged. */
.campaign-selection-upgrade {
  --selection-paper: #fff4da;
  --selection-ink: #2c382e;
  --selection-rule: #71806b;
  --selection-bottom: max(12px, var(--safe-area-bottom, env(safe-area-inset-bottom)));
}
html.is-auto-landscape .campaign-selection-upgrade {
  --selection-bottom: max(12px, var(--safe-area-left, env(safe-area-inset-left)));
}
.campaign-selection-upgrade .campaign-map-toolbar { gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.campaign-selection-upgrade .campaign-map-navigation { flex-direction: column; gap: 6px; }
.campaign-selection-upgrade .campaign-map-navigation .campaign-button { min-width: 0; min-height: 44px; padding-inline: 11px; white-space: nowrap; }
.campaign-selection-upgrade .campaign-map-toolbar .campaign-budget-hint {
  max-width: min(300px, 100%); margin-left: auto; opacity: 1; color: #4e5741;
  background: var(--selection-paper); font-size: 13px; border: 1px solid #a49a79;
}
.campaign-selection-upgrade .campaign-camera-controls { bottom: var(--selection-bottom); gap: 5px; }
.campaign-selection-upgrade .campaign-camera-controls .campaign-button { min-width: 44px; min-height: 44px; }
.campaign-selection-upgrade .campaign-world .campaign-node {
  --trail-fill: #e5c18b;
  --trail-ink: #6c5036;
  --trail-text: #3f3125;
  width: 152px; height: 128px; min-height: 128px; padding: 0;
  transform: translate(-50%, -50%);
  border: 0; border-radius: 12px; background: none; box-shadow: none;
  color: var(--trail-text); transition: none;
}
.campaign-selection-upgrade .campaign-world .campaign-node:hover,
.campaign-selection-upgrade .campaign-world .campaign-node:active,
.campaign-selection-upgrade .campaign-world .campaign-node.selected {
  transform: translate(-50%, -50%);
  background: none; box-shadow: none;
}
.campaign-selection-upgrade .campaign-world .campaign-node-boss {
  --trail-fill: #dfa875; --trail-ink: #824e39; --trail-text: #452b20;
}
.campaign-selection-upgrade .campaign-world .campaign-node.completed {
  --trail-fill: #d6d8a8; --trail-ink: #586146; --trail-text: #343e29;
}
.campaign-selection-upgrade .campaign-world .campaign-node.locked:not(.selected) {
  --trail-fill: #d7c9aa; --trail-ink: #796f59; --trail-text: #514837;
  opacity: .82;
}
.campaign-selection-upgrade .campaign-world .campaign-node.selected {
  --trail-fill: #f4dfaa; --trail-ink: #4f6343; --trail-text: #344330;
}
.campaign-selection-upgrade .campaign-world .campaign-node:focus-visible { outline: none; }
.campaign-trail-sign {
  position: absolute; left: 50%; top: 50%; width: 160px; height: 140px;
  transform: translate(-50%, -50%); pointer-events: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.trail-footprint { fill: #796246; opacity: .25; }
.trail-stake { fill: #ad8458; stroke: var(--trail-ink); stroke-width: 2.2px; }
.trail-board-shadow { fill: #71593b; opacity: .28; }
.trail-board-halo { fill: none; stroke: #fff4d6; stroke-width: 8px; opacity: 0; }
.trail-board { fill: var(--trail-fill); stroke: var(--trail-ink); stroke-width: 2.8px; }
.trail-grain { fill: none; stroke: var(--trail-ink); stroke-width: 1.45px; opacity: .25; }
.trail-pins { fill: var(--trail-ink); opacity: .66; }
.campaign-node.selected .trail-board-halo,
.campaign-node:focus-visible .trail-board-halo { opacity: 1; }
.campaign-node:focus-visible .trail-board-halo { stroke: #35563e; stroke-width: 9px; }
.campaign-selection-upgrade .campaign-world .campaign-node .campaign-node-title,
.campaign-selection-upgrade .campaign-world .campaign-node.has-guards .campaign-node-title {
  position: absolute; left: 50%; top: calc(50% + 32px); z-index: 1;
  width: 106px; max-height: 40px; padding: 0; overflow: hidden;
  transform: translate(-50%, -50%); background: none; text-shadow: none;
  font-size: 19px; line-height: 1.05; overflow-wrap: anywhere; pointer-events: none;
}
.campaign-selection-upgrade .campaign-world .campaign-node .campaign-node-badge {
  top: calc(50% + 2px); right: 8px; transform: none;
  box-shadow: 0 0 0 2px #f6eac8; pointer-events: none;
}
@media (max-width: 520px), (max-height: 420px) {
  .campaign-selection-upgrade .campaign-map-toolbar .campaign-budget-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-selection-upgrade .campaign-button { transition: none; }
}

/* Deployment dock selection start */
#app #unitList .unit-card .unit-card-turn {
  transform: none;
  transition: none;
  /* The shared button press animation also targets the card's inner wrapper. */
  scale: none !important;
  rotate: none !important;
}
#app #unitList .unit-card-back { display: none; }
#app #unitList .unit-card.selected { border-color: #4166a0; }
#app #unitList .unit-card.selected .unit-card-front {
  background-color: #e2edfc;
  box-shadow: inset 0 0 0 2px #4166a0;
}

#app.prototype-ui.rail-battle .dock-phase-turn,
#app.prototype-ui .dock-phase-battle { transform: none; }
#app.prototype-ui .dock-phase-turn { transition: none; }
#app.prototype-ui:not(.rail-battle) .dock-phase-battle,
#app.prototype-ui.rail-battle .dock-phase-deploy { display: none; }
#unitDock .touch-tool-toggle.is-flipping { animation: none; }
/* Deployment dock selection end */
/* Responsive UI scale start */
/* Scale individual controls so canvas coordinates and map gestures stay unchanged. */
@media (min-width: 1000px) and (min-height: 540px) {
  #app.prototype-ui:not(.is-phone-viewport):not(.menu-background-active) { --battle-dock-height: calc(var(--viewport-height, 100dvh) / 7); }
  #app.prototype-ui:not(.is-phone-viewport):not(.menu-background-active)>#unitDock { padding: calc(var(--battle-dock-height) * .048214) calc(var(--battle-dock-height) * .080357); }
  #app.prototype-ui:not(.is-phone-viewport) #unitList { gap: calc(var(--battle-dock-height) * .057143); padding: 2px 2px calc(var(--battle-dock-height) * .042857); }
  #app.prototype-ui:not(.is-phone-viewport) .deployment-tools { width: calc(var(--battle-dock-height) * .914286); flex-basis: calc(var(--battle-dock-height) * .914286); gap: 3px; }
  #app.prototype-ui:not(.is-phone-viewport) .deployment-tools .budget-stat { height: calc(var(--battle-dock-height) * .4); padding-bottom: calc(var(--battle-dock-height) * .157143); }
  #app.prototype-ui:not(.is-phone-viewport) .deployment-tools .touch-tool-toggle { height: calc(var(--battle-dock-height) * .357143); min-height: 28px; font-size: clamp(12px, calc(var(--battle-dock-height) * .128571), 20px); }
  #app.prototype-ui:not(.is-phone-viewport) #unitList .unit-card[data-unit-id] { flex-basis: var(--battle-dock-height); width: var(--battle-dock-height); min-width: var(--battle-dock-height); }
  #app.prototype-ui:not(.is-phone-viewport) #unitList .unit-card-front { grid-template-columns: calc(var(--battle-dock-height) * .457143) minmax(0, 1fr); padding: 3px; gap: 2px 3px; }
  #app.prototype-ui:not(.is-phone-viewport) #unitList .unit-card-front .unit-portrait { height: calc(var(--battle-dock-height) * .457143); }
  #app.prototype-ui:not(.is-phone-viewport) #unitList .unit-card-front .unit-name { font-size: clamp(12px, calc(var(--battle-dock-height) * .135714), 24px); }
  #app.prototype-ui:not(.is-phone-viewport) #unitList .unit-card-front .unit-price { font-size: clamp(12px, calc(var(--battle-dock-height) * .121429), 22px); }
  #app.prototype-ui:not(.is-phone-viewport) .deployment-tools .budget-stat strong,
  #app.prototype-ui:not(.is-phone-viewport) .deployment-tools .budget-stat::before { font-size: clamp(14px, calc(var(--battle-dock-height) * .171429), 28px); }
  #app.prototype-ui:not(.is-phone-viewport) .budget-stars { height: calc(var(--battle-dock-height) * .157143); }
  #app.prototype-ui:not(.is-phone-viewport) .budget-stars .campaign-node-star { flex-basis: calc(var(--battle-dock-height) * .142857); width: calc(var(--battle-dock-height) * .142857); height: calc(var(--battle-dock-height) * .142857); }
  #app.prototype-ui:not(.is-phone-viewport) .budget-stars .campaign-node-star:nth-child(2) { flex-basis: calc(var(--battle-dock-height) * .164286); width: calc(var(--battle-dock-height) * .164286); height: calc(var(--battle-dock-height) * .164286); }
  #app.prototype-ui:not(.is-phone-viewport) .toolbar-center { grid-template-columns: 112px 174px 76px; gap: 8px; }
  #app.prototype-ui:not(.is-phone-viewport) #topbar .toolbar-center .button { height: 52px; min-height: 52px; font-size: 18px; }
  #app.prototype-ui:not(.is-phone-viewport) #topbar .toolbar-center #startButton { height: 64px; min-height: 64px; font-size: 26px; }
  #app.prototype-ui:not(.is-phone-viewport) #topbar .toolbar-navigation .button { width: 120px; min-width: 120px; height: 52px; min-height: 52px; font-size: 18px; }
  #app.prototype-ui:not(.is-phone-viewport) .dock-phase-battle .speed-button,
  #app.prototype-ui:not(.is-phone-viewport) .dock-phase-battle>#pauseButton { width: 104px; height: 52px; min-height: 52px; font-size: 18px; }
  html:not(.is-phone-viewport) .campaign-selection-upgrade .campaign-map-navigation .campaign-button,
  html:not(.is-phone-viewport) .campaign-selection-upgrade .campaign-camera-controls .campaign-button { min-height: 52px; min-width: 52px; font-size: 18px; }
  html:not(.is-phone-viewport) .title-menu { width: clamp(220px, 25cqw, 320px); }
  html:not(.is-phone-viewport) .title-menu-button { min-height: 52px; font-size: clamp(24px, 2.6cqw, 32px); }
}
html.is-phone-viewport .campaign-selection-upgrade .campaign-map-navigation .campaign-button { padding: 4px 8px; font-size: 13px; }
html.is-phone-viewport .campaign-selection-upgrade .campaign-camera-controls .campaign-button { padding: 4px 8px; font-size: 17px; }
html.is-phone-viewport .campaign-selection-upgrade .campaign-camera-controls .campaign-center { font-size: 13px; }
#app.prototype-ui.is-phone-viewport:not(.menu-background-active) { --battle-dock-height: 84px; }
#app.prototype-ui.is-phone-viewport .dock-phase-deploy { gap: 4px; }
#app.prototype-ui.is-phone-viewport .deployment-tools { width: 76px; flex-basis: 76px; }
#app.prototype-ui.is-phone-viewport .deployment-tools .budget-stat { height: 32px; padding-bottom: 14px; gap: 3px; }
#app.prototype-ui.is-phone-viewport .budget-stat #budgetLabel { font-size: 14px; }
#app.prototype-ui.is-phone-viewport .budget-stat::before { font-size: 14px; }
#app.prototype-ui.is-phone-viewport .budget-stars { height: 14px; }
#app.prototype-ui.is-phone-viewport .budget-stars .campaign-node-star { flex-basis: 13px; width: 13px; height: 13px; }
#app.prototype-ui.is-phone-viewport .budget-stars .campaign-node-star:nth-child(2) { flex-basis: 15px; width: 15px; height: 15px; }
#app.prototype-ui.is-phone-viewport #unitList { gap: 4px; }
#app.prototype-ui.is-phone-viewport #unitList .unit-card[data-unit-id] { flex-basis: 82px; width: 82px; min-width: 82px; }
#app.prototype-ui.is-phone-viewport #unitList .unit-card-front { grid-template-columns: 28px minmax(0, 1fr); }
#app.prototype-ui.is-phone-viewport #unitList .unit-card-front .unit-portrait { height: 28px; }
#app.prototype-ui.is-phone-viewport #unitList .unit-card .unit-name,
#app.prototype-ui.is-phone-viewport #unitList .unit-card .unit-price { font-size: 12px; }
#app.prototype-ui.is-phone-viewport #topbar .toolbar-navigation .button { width: 76px; min-width: 76px; font-size: 13px; }
#app.prototype-ui.is-phone-viewport .toolbar-center { grid-template-columns: 60px 88px 44px; }
#app.prototype-ui.is-phone-viewport #topbar #startButton { font-size: 16px; }
#app.is-phone-viewport .result-screen-text { font-size: min(calc(var(--ui-mobileResultFontSize,38)*1px), calc(var(--viewport-short-edge)*.09)); }
/* Modal exits share the settings return control. */
.title-content-footer { display:flex; flex:0 0 auto; justify-content:center; width:100%; }
.title-content-footer[hidden] { display:none; }
.title-content-footer #titleContentBack { width:min(150px,100%); min-width:0; min-height:48px; }
.title-content[data-page="extras"] .title-content-footer #titleContentBack { width:min(150px,100%); min-width:0; height:auto; min-height:48px; padding:8px 14px; border:2px solid #607157; border-radius:8px 10px 6px 9px; color:#344937; background:#f5e7c6; font:900 18px/1.2 "Microsoft YaHei",sans-serif; box-shadow:0 3px 0 #50614755; }
.title-content[data-page="extras"] .title-content-body { overflow:auto; }
/* Shared paper-and-ink language for all title dialogs. */
.title-content { background:#3a4d37aa; color:#354d3b; }
.title-content .title-content-card,
.title-content[data-page="extras"] .title-content-card {
  border:3px solid #607157; border-radius:10px 16px 8px 12px;
  background:#f4e8c9; box-shadow:0 12px 40px #14241b66; padding:12px 16px 16px; gap:8px;
}
.title-content .title-content-header,
.title-content[data-page="extras"] .title-content-header {
  position:static; display:flex; align-items:center; justify-content:center;
  width:auto; height:auto; min-height:44px; padding:0 0 8px; border-bottom:2px solid #879378;
}
.title-content .title-content-header h2,
.title-content[data-page="extras"] .title-content-header h2 {
  position:static; width:auto; height:auto; overflow:visible; clip-path:none;
  margin:0; color:#354d3b; text-align:center; font-size:26px; line-height:1.2;
}
.title-content .gamehub-actions { width:min(300px,100%); margin-inline:auto; gap:8px; }
.title-content .gamehub-actions .campaign-button {
  min-width:0; min-height:48px; padding:8px 14px; border:2px solid #607157;
  border-radius:8px 10px 6px 9px; background:#f5e7c6; color:#344937;
  font:900 18px/1.2 "Microsoft YaHei",sans-serif; box-shadow:0 3px 0 #50614755;
}
.title-content .gamehub-actions #confirmGameHub { background:#cadb9f; }
.title-content .gamehub-actions .campaign-button:focus-visible { outline:3px solid #365b77; outline-offset:2px; }
/* Let the author and video cards size to their own content. */
.title-content .extras-sidebar {
  display:flex;
  gap:clamp(8px,2cqh,14px);
  padding-bottom:0;
  border-color:#a5ad8d;
}
.title-content .extras-section-title,.title-content .extras-layout .extra-character-action { color:#5c6c52; }
.title-content .extras-author-card,.title-content .extras-video-card,.title-content .extra-character {
  border-color:#9aa88a; border-radius:8px 12px 7px 10px; background:#f9efda; color:#344937;
}
.title-content .extras-author-name,.title-content .extras-video-card,.title-content .extra-character-name { color:#344937; }
.title-content .extras-author-card .extras-author-home { border-color:#607157; border-radius:8px 10px 6px 9px; background:#f5e7c6; color:#344937; box-shadow:0 3px 0 #50614755; }
/* The cover is the top of the card, with the title in a compact caption below. */
.title-content .extras-video-card.campaign-button {
  flex:none;
  align-items:stretch;
  gap:0;
  padding:0;
  overflow:hidden;
}
.title-content .extras-video-cover {
  order:-1;
  flex:none;
  aspect-ratio:16/9;
  border:0;
  border-bottom:1px solid #9aa88a;
  border-radius:0;
}
.title-content .extras-video-cover img { object-fit:cover; }
.title-content .extras-video-title {
  display:block;
  padding:clamp(6px,1.4cqh,10px) clamp(8px,2cqh,12px);
  overflow-wrap:anywhere;
}
.title-content .extras-video-play { border-color:#607157; background:#cadb9f; color:#344937; }
html.is-phone-viewport .title-content .title-content-header h2 { font-size:20px; }
html.is-phone-viewport .title-content .title-content-header { min-height:32px; padding-bottom:4px; }
.extras-video-cover img[hidden] { display:none; }

.sandbox-mode-dialog { position:absolute; inset:0; z-index:1000; display:grid; place-items:center; background:rgba(24,30,27,.62); }
.sandbox-mode-dialog.hidden { display:none; }
.sandbox-mode-card { width:min(88%,420px); display:grid; gap:12px; padding:clamp(20px,4vw,36px); border:4px solid #344657; border-radius:24px; background:#faf4e2; box-shadow:0 8px 0 #263743; }
.sandbox-mode-card button { min-height:52px; border:3px solid #3e5548; border-radius:12px; background:#bad396; color:#223e32; font-size:clamp(18px,2.2vw,26px); font-weight:800; cursor:pointer; }
.sandbox-mode-card button:focus-visible { outline:4px solid #efbc49; outline-offset:2px; }
.sandbox-mode-card .sandbox-mode-back { background:#f0e3c4; font-size:18px; }
#app.sandbox-mode .budget-stars { display:none; }
#app.sandbox-mode .deployment-tools .budget-stat { padding:0; height:auto; min-height:46px; }
#app.sandbox-mode .budget-stat::before { display:none; }
#app.sandbox-mode .budget-stat #budgetLabel { white-space:pre-line; line-height:1.1; font-size:clamp(13px,1.2vw,19px); }

/* Responsive UI scale end */