/* Colors, typography and motion. Geometry is owned by layout.css. */
:root { color-scheme: dark; --ink: #f4f1e9; --muted: #aab9b5; --gold: #efd392; --line: #344a47; --panel: #121f23; --focus: #ffe2a0; font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; color: var(--ink); background: #0b1317; }
* { box-sizing: border-box; }
body { background: radial-gradient(ellipse at 50% -20%, #203b38 0%, #101d20 38%, #0b1317 74%); }
button, select { font: inherit; color: inherit; }
button, select { border: 1px solid var(--line); border-radius: 7px; background: #17282c; }
button { cursor: pointer; }
button:hover:not(:disabled), select:hover:not(:disabled) { border-color: #9ba69a; background: #243b3c; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:disabled, select:disabled { opacity: .48; cursor: default; }
.eyebrow { color: var(--gold); font-size: .75rem; letter-spacing: .18em; font-weight: 800; }
.divider { color: #78928b; }
h1 { font-size: clamp(1.75rem, 4vw, 2.55rem); letter-spacing: -.06em; }
.settings { font-size: .84rem; }
.pace { border: 1px solid var(--line); border-radius: 8px; background: #111b20; }
.pace button { border: 0; background: transparent; color: var(--muted); }
.pace button[aria-pressed="true"] { color: #192023; background: var(--gold); font-weight: 800; }
.auto { white-space: nowrap; }
.auto-dot { border-radius: 50%; background: #7c9089; }
.auto[aria-pressed="true"] { border-color: #8ed2af; color: #b1f2ce; }
.auto[aria-pressed="true"] .auto-dot { background: #97f2b3; box-shadow: 0 0 9px #97f2b37d; }
#auto-state { color: var(--muted); }
.wave-status { color: #a4eef2; font-size: .82rem; font-weight: 700; }
.moon-status { color: #fff0bb; border-bottom: 1px solid var(--line); font-size: .82rem; line-height: 1.5; }
.armor-help { color: #fff0bb; border-bottom: 1px solid var(--line); font-size: .82rem; line-height: 1.5; }
.poison-help { color: #fff0bb; border-bottom: 1px solid var(--line); font-size: .82rem; line-height: 1.5; }
.wave-guide { color: #fff0bb; border-bottom: 1px solid var(--line); font-size: .82rem; line-height: 1.5; }
.heat-guide { color: #fff0bb; border-bottom: 1px solid var(--line); font-size: .82rem; line-height: 1.5; }
.wave-guide { color: #a4eef2; }
.stage:has(#battlefield[data-region="sky"]) .stage-marker { white-space: nowrap; text-overflow: ellipsis; }
.arena { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.command-panel { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.initiative h2 { font-size: .91rem; }
.party-panel h2 { font-size: .91rem; }
.command-heading h2 { font-size: .91rem; }
.initiative h2 span { color: var(--gold); }
#turns { list-style: none; }
.turn { border: 1px solid #354b4b; border-top: 2px solid var(--unit-color, #889b98); border-radius: 5px; background: #1b2b2d; }
.turn[aria-current="step"] { border-color: var(--gold); background: #40392b; }
.turn small { color: var(--muted); font-size: .75rem; line-height: 1.25; }
.turn b { text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.turn .heat-stacks { color: #ffd18b; }
.choices .heat-stacks { color: #ffd18b; }
.turn:has(.moon-boundary) { border-left: 3px solid #fff0bb; }
.turn .moon-boundary { color: #fff0bb; }
.stage { isolation: isolate; background: #1a3333; border-block: 1px solid var(--line); }
.stage-marker { color: #e6efde; background: #132220dc; border: 1px solid #71908178; border-radius: 5px; font-size: .75rem; letter-spacing: .05em; pointer-events: none; }
.stage-marker > span:first-child { color: var(--gold); }
#battlefield { touch-action: manipulation; }
#battlefield[data-targeting="true"] { cursor: crosshair; }
.battle-line { font-size: .79rem; }
.battle-line-mark { color: var(--gold); font-size: .75rem; }
#battle-status { color: var(--gold); }
#battle-log { color: var(--muted); }
.party-panel h2 span { color: var(--muted); font-size: .75rem; font-weight: 500; }
.party { list-style: none; }
.member { border: 1px solid var(--line); border-radius: 8px; background: #142327; }
.member[data-current="true"] { border-color: var(--gold); background: #263029; }
.member[data-downed="true"] { opacity: .64; }
.member-head { font-size: .83rem; }
.member-head small { font-size: .75rem; color: var(--muted); }
.member-dot { border: 1px solid #ffffff48; border-radius: 50%; background: var(--unit-color); }
.meter { font-size: .75rem; font-variant-numeric: tabular-nums; }
.meter span:first-child { color: var(--muted); font-size: .75rem; }
.meter span:last-child { text-align: right; }
.meter progress { appearance: none; border: 0; border-radius: 5px; background: #354345; }
.meter progress::-webkit-progress-bar { background: #354345; }
.meter progress::-webkit-progress-value { background: var(--fill); border-radius: 5px; }
.meter progress::-moz-progress-bar { background: var(--fill); border-radius: 5px; }
#command-hint { color: var(--muted); font-size: .75rem; }
.flee-help { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.commands button { text-align: left; font-weight: 750; font-size: .82rem; }
.commands button[data-selected="true"] { border-color: var(--gold); background: #39382a; }
.choices button[aria-pressed="true"] { border-color: var(--gold); background: #39382a; }
kbd { border: 1px solid #749089; border-radius: 4px; font: .75rem system-ui, sans-serif; color: var(--gold); }
.choices button { text-align: left; font-size: .78rem; }
.choices small { color: var(--muted); line-height: 1.35; }
.choices .combat-preview { color: #c4e3ca; }
.member-head .poison-state { color: #c7efa4; }
.choices .poison-state { color: #c7efa4; }
footer { text-align: center; color: #96aaa1; font-size: .75rem; }
.ultimate-cutin { box-sizing: border-box; isolation: isolate; background: #080914df; color: #fffdf8; animation: cutin-veil var(--cutin-duration) linear both; }
body:has(> .ultimate-cutin) #combat * { animation-play-state: paused !important; }
body:has(> .ultimate-cutin) #combat *::before { animation-play-state: paused !important; }
body:has(> .ultimate-cutin) #combat *::after { animation-play-state: paused !important; }
.cutin-stripe { background: linear-gradient(95deg, transparent, var(--cutin-color) 32% 68%, transparent); clip-path: polygon(0 58%, 100% 19%, 100% 53%, 0 94%); animation: cutin-stripe var(--cutin-duration) cubic-bezier(.18,.72,.28,1) both; }
.cutin-words { text-align: center; text-shadow: 0 2px 5px #05040c, 0 0 15px #05040c; }
.cutin-member { color: #fff6db; font-size: clamp(.82rem, 1.6vw, 1.3rem); font-weight: 800; }
.cutin-title { font-size: clamp(2rem, 6vw, 4.6rem); font-weight: 900; line-height: 1.08; word-break: keep-all; }
.cutin-title { animation: cutin-title var(--cutin-duration) linear both; }
.cutin-member { animation: cutin-title var(--cutin-duration) linear both; }
.cutin-line { font-size: clamp(.88rem, 1.9vw, 1.35rem); font-weight: 700; animation: cutin-quote var(--cutin-duration) linear both; }
.cutin-picture img { object-fit: contain; }
.cutin-character { animation: cutin-character var(--cutin-duration) cubic-bezier(.2,.75,.25,1) both; }
.cutin-effect { animation: cutin-effect var(--cutin-duration) ease-out both; }
@keyframes cutin-veil { 0%, 100% { opacity: 0; } }
@keyframes cutin-veil { 8%, 92% { opacity: 1; } }
@keyframes cutin-stripe { 0% { transform: translateX(102%); opacity: 0; } }
@keyframes cutin-stripe { 13% { transform: translateX(0); opacity: .72; } }
@keyframes cutin-stripe { 28%, 100% { transform: translateX(0); opacity: .32; } }
@keyframes cutin-character { 0%, 10% { transform: translateX(65%); opacity: 0; } }
@keyframes cutin-character { 30%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes cutin-title { 0%, 29% { opacity: 0; } }
@keyframes cutin-title { 39%, 100% { opacity: 1; } }
@keyframes cutin-quote { 0%, 39% { opacity: 0; } }
@keyframes cutin-quote { 48%, 100% { opacity: 1; } }
@keyframes cutin-effect { 0%, 51% { opacity: 0; transform: scale(.9); } }
@keyframes cutin-effect { 68%, 100% { opacity: .9; transform: scale(1); } }
.ultimate-cutin[data-mode='reduced'] { animation: none; }
.ultimate-cutin[data-mode='reduced'] * { animation: none; }
.ultimate-cutin[data-mode='reduced'] .cutin-stripe { opacity: .35; }
.ultimate-cutin[data-mode='reduced'] .cutin-effect { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .ultimate-cutin { animation: none; } }
@media (prefers-reduced-motion: reduce) { .ultimate-cutin * { animation: none; } }
@media (prefers-reduced-motion: reduce) { .cutin-stripe { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cutin-effect { opacity: .35; } }