/* Cartoon inks and cel fills shared by the menus and combat readouts. */
#app {
  --story-ink: #080d1b;
  --story-display: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --story-outline: 0 0 0 2px var(--story-ink), 0 4px 0 var(--story-ink);
  --story-paper: #fff3d4;
  --story-lime: #e5ff71;
  --story-peach: #ffae72;
  --story-moon: #9ce4ff;
  --story-gold: #ffcd6a;
  --story-stipple: radial-gradient(circle at 2px 3px, #fff5d61f 0 1px, transparent 1.5px);
  --story-scratches: repeating-linear-gradient(145deg, #0b14251c 0 3px, transparent 3px 11px);
  --story-card: linear-gradient(155deg, #3c5878 0 28%, #303c64 28% 81%, #26304f 81%);
  --story-selected: linear-gradient(155deg, #506b3f 0 29%, #34553f 29% 81%, #273f36 81%);
  --story-round: 22px 27px 20px 25px;
  --story-button: linear-gradient(#496d97 0 19%, #36577f 19% 78%, #2d496c 78%);
  --story-scene: url('./title-ambush-landscape.webp');
}
#app :is(#arena, #starter, #supply, #shop, #combine, #confirm, #options, #profile, #results, #account-panel, #supply-characters) {
  --story-accent: var(--story-peach);
  --story-ambient: #38496b;
  --story-mid: #2b3658;
  --story-shade: #202745;
}
#app :is(#starter, #options) { --story-accent: var(--story-moon); }
#app :is(#supply, #shop, #supply-characters) { --story-accent: var(--story-gold); }
#app :is(#arena, #profile) {
  --story-ambient: #3c6665;
  --story-mid: #263f4d;
  --story-shade: #1c2f3e;
}
#app :is(#supply, #supply-characters) {
  --story-ambient: #785642;
  --story-mid: #513a40;
  --story-shade: #342b42;
  --story-card: linear-gradient(155deg, #6b4b48 0 28%, #4c3848 28% 81%, #3a2e42 81%);
}
#app :is(#shop, #combine, #confirm) {
  --story-ambient: #635378;
  --story-mid: #403653;
  --story-shade: #29263d;
  --story-card: linear-gradient(155deg, #665679 0 28%, #483b5a 28% 81%, #3b304d 81%);
}
#app #profile { --story-accent: var(--story-lime); }
#app #combine { --story-accent: #d5b0ef; }
#app #confirm { --story-accent: var(--review-accent); }
#app #results { --story-accent: var(--result-color); }

#app :is(#shop, #combine, #results).overlay {
  background:
    radial-gradient(ellipse at 48% -17%, #31577693, transparent 74%),
    radial-gradient(ellipse at 76% 95%, #9a55244a, transparent 66%),
    #080e1ad9;
}
@media (orientation: portrait) {
  #app { --story-scene: url('./title-ambush-portrait.webp'); }
}
#app :is(#arena, #starter, #supply, #profile).overlay {
  background:
    linear-gradient(160deg, #0a1a2fa3, #08101bde 77%),
    var(--story-scene) center / cover no-repeat,
    var(--story-ink);
}
#app :is(#options, #confirm, #account-panel, #supply-characters).overlay {
  background: radial-gradient(ellipse at 50% 25%, #243d589e, #090f1ae8 78%);
}

#app .overlay > :is(.trail-panel, .shop-panel, .fusion-panel, .confirm-panel, .settings-panel, .career-panel, .results-panel, .account-panel) {
  border-radius: var(--story-round);
  box-shadow: 0 6px 0 var(--story-ink), 0 17px 32px #050a13a8;
}
#app .overlay > :is(.trail-panel, .shop-panel, .fusion-panel, .confirm-panel, .settings-panel, .career-panel, .results-panel, .account-panel)::before {
  clip-path: none;
  border-radius: var(--story-round);
  background: var(--story-ink);
}
#app .overlay > :is(.trail-panel, .shop-panel, .fusion-panel, .confirm-panel, .settings-panel, .career-panel, .results-panel, .account-panel)::after {
  inset: 4px;
  clip-path: none;
  border-radius: 18px 23px 16px 21px;
  background:
    var(--story-stipple) right 14px top 10px / 9px 9px,
    linear-gradient(153deg, var(--story-ambient) 0 24%, var(--story-mid) 24% 78%, var(--story-shade) 78%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--story-accent) 68%, #44698c);
}
#app #supply-characters .supply-character-panel {
  border-color: var(--story-gold);
  border-radius: var(--story-round);
  background: var(--story-stipple) 0 0 / 11px 13px, var(--story-card);
  box-shadow: var(--story-outline);
}

#app .overlay .panel h2 {
  color: var(--story-paper);
  font-family: var(--story-display);
  font-weight: 900;
  -webkit-text-stroke: 3px var(--story-ink);
  paint-order: stroke fill;
  text-shadow: 0 4px var(--story-ink);
}
.story-heading { display: flex; align-items: center; gap: clamp(5px, 1.2vw, 15px); min-width: 0; }
.story-heading .story-sticker { flex: none; width: clamp(27px, 4.2vw, 55px); height: auto; }
#arena .story-heading .story-sticker { width: clamp(38px, 5.2vw, 66px); }
@media (max-width: 370px) {
  #shop .story-sticker, #supply .story-sticker, #profile .story-sticker { display: none; }
}
#app .overlay :is(.micro, .eyebrow, .section-label, .card-kicker, .arena-choice) {
  font-family: var(--story-display);
  letter-spacing: .055em;
}
#app .overlay :is(.eyebrow, .results-report-label) {
  color: var(--story-accent);
  font-weight: 900;
  text-shadow: 0 1px var(--story-ink);
}

#app .overlay :is(.btn.primary, .btn.secondary) {
  border-radius: 13px 16px 13px 14px;
  font-family: var(--story-display);
  font-weight: 850;
  box-shadow: inset 0 1px #fff7dc45, var(--story-outline);
}
#app .overlay .btn.primary {
  background:
    radial-gradient(ellipse at 7% 41%, #99b73577 0 2%, transparent 2.5%),
    radial-gradient(ellipse at 94% 67%, #8da6317d 0 2.8%, transparent 3.4%),
    linear-gradient(#f2ffab 0 19%, #e1f870 19% 80%, #b4d04a 80%);
  color: #1c230a;
  border-color: var(--story-ink);
}
#app .overlay .btn.primary:not(:disabled):hover {
  background: linear-gradient(#f8ffbd 0 20%, #e9ff8e 20% 80%, #c8df58 80%);
  border-color: var(--story-lime);
}
#app .overlay .btn.secondary {
  background: var(--story-button);
  color: var(--story-paper);
  border-color: var(--story-ink);
}
#app .overlay .btn.secondary:not(:disabled):hover {
  background: linear-gradient(#4a6e99 0 19%, #3c618e 19% 79%, #315480 79%);
  border-color: var(--story-paper);
}
#app #confirm[data-tone="danger"] #confirm-action {
  border-color: #ffad99;
  background: linear-gradient(#ffc3ae 0 21%, #ff9a85 21% 78%, #e8756e 78%);
  color: #311815;
}
#app #confirm[data-tone="sale"] #confirm-action {
  border-color: var(--story-gold);
  background: linear-gradient(#ffedbe 0 21%, #ffcc79 21% 78%, #e2a851 78%);
  color: #30200d;
}

#app :is(#starter, #supply, #supply-characters) :is(.character-card, .starter-card, .catalog-card, .supply-character-card) {
  border-radius: 13px 17px 12px 15px;
  box-shadow: var(--story-outline);
}
#app :is(#starter, #supply, #supply-characters) :is(.character-card, .starter-card, .catalog-card, .supply-character-card):not(:disabled) {
  background: var(--story-stipple) 0 0 / 11px 13px, var(--story-card);
}
#app :is(#starter, #supply, #supply-characters) :is(.character-card, .starter-card, .catalog-card, .supply-character-card)[aria-pressed="true"] {
  border-color: #cce573;
  background: var(--story-stipple) 0 0 / 11px 13px, var(--story-selected);
  box-shadow: inset 0 -3px #dfff69, var(--story-outline);
}
#app :is(#supply, #supply-characters) :is(.supply-preview, .supply-filters) {
  border-radius: 13px 16px 12px 15px;
  background: var(--story-scratches), linear-gradient(135deg, #76573c 0 21%, #36577a 21%);
  box-shadow: var(--story-outline);
}
#app :is(#supply, #profile, #starter) :is(.choice-trigger, .choice-options) {
  border-radius: 10px;
}
#app :is(#supply, #profile, #starter) .choice-trigger {
  background: var(--story-button);
  border-color: var(--story-ink);
  box-shadow: var(--story-outline);
}
#app :is(#supply, #profile, #starter) .choice-trigger[aria-expanded="true"] { border-color: var(--story-lime); }

#app :is(#shop, #combine) {
  --bench-brass: var(--story-gold);
  --bench-rule: #566784;
}
#app #shop .offer:not(.sold) {
  border-radius: 13px 16px 0 0;
  box-shadow: 0 0 0 2px var(--story-ink);
  background:
    linear-gradient(136deg, var(--tier-bed, #46563a) 0 24px, transparent 24px),
    var(--story-stipple) 0 0 / 11px 13px, var(--story-card);
}
#app #shop .offer:not(.sold):is(:hover, :focus-visible, [data-pad-focus]) {
  background:
    linear-gradient(136deg, var(--tier-bed, #46563a) 0 24px, transparent 24px),
    var(--story-stipple) 0 0 / 11px 13px, linear-gradient(150deg, #3e6693 0 25%, #365a85 25%);
}
#app :is(#shop, #combine) :is(.offer-emblem, .fusion-recipe, .fusion-choice, .equipped) {
  border-radius: 7px 12px 7px 10px;
}
#app #shop :is(.shop-header, .shop-footer)::before,
#app #combine :is(.fusion-header, .fusion-footer)::before,
#app #confirm :is(.review-header, .review-footer)::before {
  background: var(--story-scratches), linear-gradient(123deg, #675475 0 28%, #483e5b 28%);
}
#app #results .results-actions::before {
  background: var(--story-scratches), linear-gradient(123deg, #4b646a 0 28%, #324952 28%);
}
#app :is(#starter, #supply-characters, #profile) :is(.setup-footer, .supply-character-footer, .career-footer) {
  background: var(--story-scratches), linear-gradient(122deg, #49678d 0 26%, #355781 26%);
}
#app :is(#options, #account-panel, #profile, #results) :is(.settings-group, .account-card, .account-local-card, .career-rank-bay, .career-character-bay, .results-combat) {
  border-radius: 9px 14px 8px 12px;
}
#app #profile :is(.career-rank-bay, .career-character-bay),
#app #options .settings-group {
  background: var(--story-stipple) 0 0 / 11px 13px, var(--story-card);
}
#app #shop :is(.classic-rewards, .reward-card)::before,
#app #shop :is(.classic-rewards, .reward-card)::after {
  clip-path: none;
  border-radius: 10px 15px 9px 12px;
}
#app #shop .reward-card {
  --pick-fill: var(--story-stipple) 0 0 / 11px 13px, var(--story-card);
  --pick-edge: var(--story-ink);
  box-shadow: var(--story-outline);
}
#app #shop .reward-card:not(:disabled):is(:hover, :focus-visible, [data-pad-focus]) {
  --pick-fill: var(--story-stipple) 0 0 / 11px 13px, var(--story-selected);
}

#app #hud {
  --hud-lime: #e2ff77;
  --hud-health: #ffab9c;
  --hud-clock: #b6eeff;
  --hud-money: #ffdb87;
  --hud-metal: #a4c6ef;
  --hud-fill: linear-gradient(145deg, #465270 0 29%, #313d5e 29% 78%, #242e4f 78%);
}
#app #hud :is(.readout, .boss-hud, .loadout, .slot, #pause)::before,
#app #hud :is(.readout, .boss-hud, .loadout, .slot, #pause)::after {
  clip-path: none;
  border-radius: 11px 14px 10px 13px;
}
#app #hud :is(.readout, .boss-hud, .loadout, .slot, #pause)::before {
  background: var(--story-ink);
}
#app #hud :is(.readout, .boss-hud, .loadout, .slot, #pause)::after {
  inset: 3px;
  border-radius: 8px 11px 7px 10px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--plate-accent) 74%, #263a54);
}
#app #hud .loadout { --plate-fill: linear-gradient(#2d4a6e 0 36%, #243d5c 36%); }
#app #hud .slot { --plate-fill: linear-gradient(148deg, #44688f 0 38%, #2f4e74 38%); }
#app #hud .vital-meter--hp .meter span { background: linear-gradient(#d95767 0 35%, #a8364b 35%); }
#app #hud .vital-meter:not(.vital-meter--hp) .meter span { background: linear-gradient(#6b9b54 0 35%, #426c3f 35%); }
#app #hud :is(.hud-label, .wave-readout strong, .cash strong), #app #wave-call .wave-call-copy > strong {
  font-family: var(--story-display);
  text-shadow: 0 2px var(--story-ink), 1px 1px var(--story-ink);
}
#app #wave-call::before, #app #wave-call::after {
  clip-path: none;
  border-radius: 12px 17px 10px 14px;
}
#app #wave-call::before { background: var(--story-ink); }
#app #wave-call::after {
  inset: 3px;
  background: var(--story-stipple) 0 0 / 11px 13px, var(--story-card);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wave-accent) 78%, #496382);
}

#app .overlay :is(button, [tabindex]):is(:focus-visible, [data-pad-focus]) {
  outline-color: #ebff9d;
}

/* A field guide with framed destination prints and a separate checkpoint strip. */
#app #arena .arena-heading .shop-intro { max-width: 50ch; margin-top: 7px; line-height: 1.35; }
#app #arena .play-saves {
  padding: 8px;
  border: 1px solid #b297634f;
  border-inline-start: 3px solid var(--story-gold);
  border-radius: 9px 13px 9px 11px;
  background: linear-gradient(105deg, #70542b4a, #152940 72%);
}
#app #arena .play-saves #resume-armory {
  border-color: #afc75d;
  background: linear-gradient(#efff92, #c4df54);
  color: #19230d;
}
#app #arena .play-saves #resume-armory:not(:disabled):hover { background: #eaff8a; }
#app #arena .play-saves #quick-run {
  border-color: #c49762;
  background: linear-gradient(145deg, #614b36, #273a4d);
}
#app #arena .play-saves #quick-run:not(:disabled):hover { border-color: #ffe1a7; }
#app #arena #quick-run small { color: #e8dbc1; }
#app #arena .arena-card {
  padding: 2px;
  border-radius: 12px 15px 10px 13px;
  box-shadow: var(--story-outline);
}
#app #arena .arena-card::before {
  clip-path: none;
  border-radius: inherit;
  background: var(--arena-accent);
}
#app #arena .arena-card:is(:hover, :focus-visible, [data-pad-focus])::before {
  background: var(--story-lime);
}
#app #arena .arena-scene {
  clip-path: none;
  border-radius: 12px 15px 0 0;
  box-shadow: inset 0 0 0 1px #fff3d844;
  background: #122337;
}
#app #arena .arena-scene::after {
  background: linear-gradient(0deg, #101a29a8, transparent 38%), linear-gradient(180deg, #fff1d718, transparent 32%);
}
#app #arena .arena-card-body {
  border-radius: 0 0 9px 12px;
  background: var(--story-stipple) 0 0 / 11px 13px,
    linear-gradient(150deg, color-mix(in srgb, var(--arena-accent) 32%, #2b456a) 0 19%, #2d4d73 19% 79%, #223b5b 79%);
}
#app #arena .arena-card strong {
  color: var(--story-paper);
  font-family: var(--story-display);
  font-weight: 900;
  text-shadow: 0 2px var(--story-ink);
}
#app #arena .arena-card-body .card-kicker {
  justify-self: start;
  padding: 3px 6px;
  border-radius: 3px 7px 3px 6px;
  background: var(--arena-accent);
  color: var(--story-ink);
  box-shadow: 0 0 0 1px var(--story-ink), 0 2px var(--story-ink);
  line-height: 1.1;
}
#app #arena .arena-records > span {
  padding: 3px 5px;
  border-left-color: var(--arena-accent);
  border-radius: 2px 5px 5px 2px;
}
#app #arena .arena-choice { border-color: color-mix(in srgb, var(--arena-accent) 44%, transparent); }
#app #arena .arena-card[data-last-selected] .arena-choice { color: var(--story-lime); }

/* Setup guides the player from mode to gear to the launch shelf. */
#app #starter[data-arena="woods"] { --story-scene: url('./arena-postcard-woods.webp?v=0.12.17'); }
#app #starter[data-arena="gym"] { --story-scene: url('./arena-postcard-gym.webp?v=0.12.17'); }
#app #starter[data-arena="greenhouse"] { --story-scene: url('./arena-postcard-greenhouse.webp?v=0.12.17'); }
#app #starter[data-arena="yard"] { --story-scene: url('./arena-postcard-yard.webp?v=0.12.17'); }
#app #starter[data-arena="arcade"] { --story-scene: url('./arena-postcard-arcade.webp?v=0.12.25'); }
#app #starter .setup-header::after {
  height: 2px;
  background: linear-gradient(90deg, var(--story-moon), #66809b 35%, transparent 86%);
}
#app #starter .setup-emblem {
  clip-path: none;
  border-radius: 36% 45% 33% 38%;
  background: linear-gradient(151deg, #e0bbf5 0 26%, #8c72bd 26% 78%, #685d9c 78%);
  box-shadow: inset 0 0 0 2px var(--story-ink), 0 3px var(--story-ink);
}
#app #starter .setup-emblem .story-sticker { width: 89%; height: 89%; }
#app #starter .setup-section {
  margin-bottom: 10px;
  color: var(--story-paper);
}
#app #starter .setup-section > span {
  padding: 4px 6px;
  border-radius: 4px 7px 4px 6px;
  clip-path: none;
  background: var(--story-moon);
  color: #17283d;
}
#app #starter .setup-section::after { background: linear-gradient(90deg, #7394a8, transparent 90%); }
#app #starter .mode-grid .btn {
  background: var(--story-stipple) 0 0 / 11px 13px, var(--story-card);
  border-color: var(--story-ink);
  border-radius: 9px 13px 9px 11px;
}
#app #starter .mode-grid .btn[aria-pressed="true"] {
  background: var(--story-stipple) 0 0 / 11px 13px, var(--story-selected);
  border-color: var(--story-lime);
  box-shadow: inset 3px 0 var(--story-lime), 0 2px var(--story-ink);
}
#app #starter .mode-grid .btn[aria-pressed="true"] svg { stroke: var(--story-lime); }
#app #starter .mode-grid .btn[aria-pressed="true"]::after { background: var(--story-lime); }
#app #starter :is(.campaign-picker, .mode-note) {
  border-color: #688098;
  border-radius: 9px 13px 9px 11px;
  background: linear-gradient(147deg, #1a324a, #12283b);
}
#app #starter .setup-footer::before {
  border-color: #7f9aab;
  background: var(--story-scratches), linear-gradient(122deg, #2d4760, #192c43 72%);
}
#app #starter #begin-run { justify-content: space-between; min-width: 132px; }

#app :is(#supply, #shop, #profile) :is(.shop-bank, .career-token-bank) {
  border-color: #d2aa68;
  border-radius: 9px 13px 8px 11px;
  background: linear-gradient(146deg, #88583a 0 30%, #66452e 30%);
  box-shadow: var(--story-outline);
}
#app :is(#supply, #shop, #profile) :is(.shop-bank, .career-token-bank) :is(strong, svg) { color: #ffe29c; }
#app #supply .supply-preview { border-color: #b2915d; }
#app #supply #preview-art {
  border-radius: 11px 14px 10px 13px;
  background:
    radial-gradient(ellipse at center, #f9c77a52, transparent 72%),
    linear-gradient(148deg, #263a52, #142337);
}
#app #supply .catalog-card .supply-art {
  border-radius: 7px 10px 7px 8px;
  background: radial-gradient(ellipse, #527181, #1b3044 76%);
}
#app #supply .catalog-card[aria-pressed="true"] .supply-art {
  background: radial-gradient(ellipse, #697b46, #263d36 76%);
}

#app #shop .armory-section-head {
  background: linear-gradient(90deg, var(--story-gold) 0 24px, #5c7890 24px 70%, transparent) bottom / 100% 2px no-repeat;
}
#app #shop .armory-section-head h3 {
  color: var(--story-paper);
  text-shadow: 0 2px var(--story-ink);
}
#app #shop .armory-section-head .micro { color: #d4c29b; }
#app #shop .offer-price {
  padding-top: 4px;
  border-top: 1px solid #91a6b643;
}
#app #shop .offer-price b { color: #e8ff91; }
#app #shop .offer[data-unavailable] .offer-price b { color: #ffd3a2; }
#app #shop #next { box-shadow: inset 0 1px #f2ffbb9c, 0 3px #0c1824; }

#app #profile .career-tabs { gap: 6px; }
#app #profile .career-tabs button {
  border-radius: 7px 10px 0 0;
  background: #1b3149;
}
#app #profile .career-tabs button[aria-selected="true"] {
  border-color: #bfd278;
  background: linear-gradient(#f2ffa7 0 25%, #d8ef72 25%);
  color: #1b290e;
}
#app #profile .career-stat-grid {
  gap: 3px;
  background: #0c192a;
  border-color: #516e87;
  border-radius: 10px 14px 9px 12px;
}
#app #profile .career-stat-grid > div {
  background: linear-gradient(150deg, #3f638c 0 28%, #2e4f74 28%);
}
#app #profile .career-stat-grid dt { color: #e1edf4; }
#app #profile .career-stat-grid dd { color: var(--story-paper); font-family: var(--story-display); }
#app #shop .offer :is(.offer-desc, .offer-class),
#app #starter :is(.starter-card, .mode-grid .btn) small { color: #e1edf4; }
#app #shop .offer[data-unavailable] .offer-desc { color: #f3ddc7; }
#app #profile .career-portrait-stage {
  border-radius: 10px 16px 10px 13px;
  background: radial-gradient(ellipse at 50% 63%, #ddbd6d4d, transparent 72%), #172e45;
}

#app #options .settings-group legend {
  border-radius: 5px 8px 5px 7px;
  background: var(--story-lime);
  color: var(--story-ink);
  box-shadow: 0 0 0 2px var(--story-ink);
  font-family: var(--story-display);
  font-weight: 900;
}
#app #options .settings-audio legend { background: var(--story-moon); }
#app #options .settings-volume output { border-radius: 7px; background: #1a3048; }
#app #options .settings-switch input:checked + .settings-switch-track {
  border-color: var(--story-lime);
  background: #536634;
}
#app #options #quit {
  background: linear-gradient(#553b44, #342b38);
  border-color: #ae776c;
  color: #ffd4bc;
}
#app #options #quit:not(:disabled):hover { border-color: #ffd4bc; background: #63434a; }

#app #results .results-seal {
  clip-path: none;
  border-radius: 37% 44% 32% 42%;
  box-shadow: 0 3px var(--story-ink);
}
#app #results .run-token-line {
  clip-path: none;
  border-radius: 8px 13px 8px 11px;
  background: linear-gradient(145deg, #906134 0 24%, #69472f 24%);
  box-shadow: var(--story-outline);
}
#app #results #run-tokens { color: #fff0b1; }
#app #results .results-stats {
  background: #0b1727;
  border-color: #5b718b;
  border-radius: 9px 13px 9px 11px;
  overflow: hidden;
}
#app #results .results-stats > div { background: linear-gradient(150deg, #3d618b 0 26%, #2d4d72 26%); }

@media (max-width: 660px) {
  #app #shop .shop-actions { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); }
  #app #starter #begin-run { min-width: 0; }
  #app #shop :is(#next, #reroll) { padding-inline: 8px; }
}
@media (max-width: 580px) {
  #app #arena .arena-scene {
    border: 1px solid color-mix(in srgb, var(--arena-accent) 65%, #25384c);
    border-radius: 7px 10px 8px 7px;
  }
  #app #arena .arena-card-body { border-radius: 10px 0 0 11px; }
  #app #arena .play-saves #quick-run { flex: 1 1 100%; }
  #app #arena .play-saves .btn:not(#quick-run) { flex: 1 1 auto; }
}