:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  color: #242d28;
  background: #ded9c9;
  font-synthesis: none;
  --paper: #f5f0e4;
  --panel: #fffcf3;
  --ink: #242d28;
  --muted: #5a6155;
  --line: #c3c3ad;
  --orange: #c34325;
  --green: #506735;
  --stage: #203a34;
  --head: #e3d9ef;
  --body: #f1d89f;
  --legs: #d2e3ed;
  --edge: #3b463c;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--platform-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--platform-bottom, 0px));
  --gutter: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; border: 0; }
button:disabled { cursor: default; opacity: .52; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #6948b2;
  outline-offset: 4px;
}
a { color: inherit; }
svg { display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; text-wrap: balance; }
h1 { font-size: 34px; font-weight: 850; letter-spacing: -1.2px; }
h2 { font-size: 25px; font-weight: 800; letter-spacing: -.6px; }
h3 { font-size: 20px; font-weight: 750; letter-spacing: -.3px; }
button svg, button > * { pointer-events: none; }
button .interactive { pointer-events: auto; }
button, input, summary { touch-action: manipulation; }

/* The game fills the available canvas. The stage and controls are peers. */
.shell {
  width: min(100%, 1240px);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  background: var(--paper);
  padding-top: var(--safe-top);
  padding-bottom: calc(100px + var(--safe-bottom));
}
.topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 12px var(--gutter);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  text-align: left;
  font-size: 18px;
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.5px;
}
.brand-mark { width: 46px; height: 46px; flex: 0 0 46px; }
.edition { margin-top: 7px; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: .7px; color: var(--muted); }
.top-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.local-pill { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--muted); }
.local-pill:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #637e42; }
.icon-btn, .back {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1.5px solid var(--edge);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 2px 2px 0 #29372c;
}
.icon-btn:hover, .back:hover { background: #e5ebd4; }
.icon { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.main {
  padding: 22px max(var(--gutter), var(--platform-right, 0px)) 20px max(var(--gutter), var(--platform-left, 0px));
}
.navbar {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 8px 5px calc(8px + var(--safe-bottom));
  background: #fffcf4;
  border-top: 2px solid var(--ink);
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  min-width: 0;
  padding: 5px 2px;
  border-radius: 8px;
  background: transparent;
  color: #54614b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.nav-item .icon { width: 24px; height: 24px; }
.nav-item.active { background: #e7dcae; color: var(--ink); font-weight: 800; }
.nav-item:hover { background: #e9e3d1; }
.eyebrow, .insight-label, .section-title {
  color: #546146;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.heading-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.heading-row h1 { margin-top: 6px; font-size: 34px; line-height: 1.06; }
.intro-copy { margin-top: 10px; font-size: 16px; line-height: 1.5; color: #4a5840; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.page-head > div { min-width: 0; }
.page-head h1 { font-size: 32px; }
.page-head p { margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.panel-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 20px; }
.panel-heading h2 { font-size: 25px; }
.panel-heading p, .panel-heading > span { font-size: 14px; color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-heading h2 { font-size: 25px; }
.section-heading > span { font-size: 14px; color: var(--muted); }

/* Workshop: the creature stands on a workbench; collectible parts have their own material. */
.workshop-layout, .parts-layout, .prebattle-layout, .battle-layout, .result-layout, .shop-layout { display: grid; gap: 22px; align-items: start; }
.workshop-stage, .shop-stage, .result-showcase { position: relative; min-width: 0; padding: 22px 18px; border: 2px solid var(--ink); border-radius: 14px; }
.workshop-stage { color: #fff8e5; background: var(--stage); box-shadow: 4px 4px 0 #152b26; }
.workshop-stage .eyebrow { color: #c5d5bc; }
.workshop-stage .intro-copy { color: #d3ddcc; }
.workshop-stage .heading-row h1 { color: #fff8e5; }
.workshop-controls, .battle-preparation, .result-detail, .shop-catalog, .detail-panel, .battle-aside { min-width: 0; padding: 22px 18px; border: 1.5px solid #8b9682; border-radius: 12px; background: var(--panel); }
.workshop-controls { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.specimen, .cosmetic-scene { position: relative; display: flex; align-items: center; justify-content: center; height: 350px; margin: 14px -8px 4px; isolation: isolate; }
.specimen:before, .cosmetic-scene:before { content: ""; position: absolute; width: min(100%, 330px); aspect-ratio: 1; border-radius: 50%; background: #eadfae; z-index: -2; }
.specimen:before { background: radial-gradient(ellipse at 50% 35%, #f7e9bb, #dfce91); box-shadow: 0 0 0 1px #fff7d133, 0 16px 0 -4px #162b24; }
.specimen:after, .cosmetic-scene:after { content: ""; position: absolute; bottom: 8px; width: 74%; height: 25px; border-radius: 50%; background: #121f2455; z-index: -1; }
.hero-creature { width: 100%; height: 338px; overflow: visible; filter: drop-shadow(2px 7px 0 #101e2340); }
.lab-note, .measure, .sample-stamp { display: none; }
.creature-label, .cosmetic-label { text-align: center; margin: 14px 0 18px; }
.creature-label h2, .creature-label .title, .cosmetic-label h2 { font-size: 25px; line-height: 1.15; letter-spacing: -.6px; }
.creature-label p, .cosmetic-label p { margin-top: 8px; color: #4e5c40; font-size: 14px; line-height: 1.5; }
.workshop-stage .creature-label p { color: #d1dac9; }
.style-entry { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; color: var(--ink); background: transparent; border: 1px solid #929c84; border-radius: 8px; font-size: 15px; font-weight: 700; }
.style-entry:hover { background: #fffaf0; }
.style-entry .icon { width: 22px; height: 22px; }
.slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
[data-slot="head"] { --part-color: var(--head); }
[data-slot="body"] { --part-color: var(--body); }
[data-slot="legs"] { --part-color: var(--legs); }
.slot { position: relative; min-width: 0; padding: 12px 8px; text-align: left; border: 1.5px solid var(--edge); border-radius: 9px; background: var(--part-color, #ece5d2); box-shadow: 2px 3px 0 var(--edge); transition: transform .15s; }
.slot:hover { transform: translateY(-2px); }
.slot-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; color: #434b3c; font-size: 14px; font-weight: 650; }
.slot-top .icon { width: 17px; height: 17px; stroke-width: 2.5; }
.slot-art { width: 100%; height: 86px; margin: 8px auto; overflow: visible; }
.slot-name { display: block; font-size: 15px; line-height: 1.3; font-weight: 750; text-align: center; overflow-wrap: anywhere; }
.mobile-slot-dock { display: none; }
.mobile-slot-dock button { min-width: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 43px auto; gap: 2px; padding: 7px 6px; border: 1.5px solid #112c25; border-radius: 7px; background: var(--part-color, #f1e4bb); color: var(--ink); text-align: left; box-shadow: 0 3px 0 #122920; }
.dock-art { width: 100%; height: 43px; overflow: visible; }
.dock-label { display: flex; justify-content: space-between; align-items: center; gap: 3px; font-size: 14px; line-height: 1.3; font-weight: 500; }
.dock-label .icon { width: 14px; height: 14px; }
.dock-name { min-width: 0; text-align: center; margin-top: 2px; font-size: 14px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0; }
.stat { min-width: 0; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-value { font-variant-numeric: tabular-nums; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; font-size: 25px; line-height: 1.1; font-weight: 850; letter-spacing: -.7px; }
.stat-value .icon { width: 20px; height: 20px; }
.stat:nth-child(1) .icon { color: #b44329; }
.stat:nth-child(2) .icon { color: #8a611c; }
.stat:nth-child(3) .icon { color: #43633d; }
.stat:nth-child(4) .icon { color: #735398; }
.stat-name { margin-top: 7px; font-size: 14px; font-weight: 550; line-height: 1.3; color: var(--muted); }
.stat-delta[data-direction="down"] { color: #a33a22; }
.stat-delta { font-size: 14px; color: #405f2a; font-weight: 750; letter-spacing: 0; }
.build-insights { display: grid; gap: 12px; margin: 20px 0; }
.build-insight { padding: 17px; border: 1px solid #9ba787; border-left: 4px solid var(--stage); border-radius: 0 8px 8px 0; background: #e9ead9; }
.insight-label { display: block; margin-bottom: 7px; }
.build-insight strong { display: block; font-size: 18px; line-height: 1.3; }
.build-insight p { margin-top: 7px; font-size: 15px; line-height: 1.5; color: #46553d; }
.stage-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }
.stage-number { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 50px; border: 1.5px solid var(--ink); border-radius: 6px; background: #edddb0; color: var(--ink); font-size: 23px; font-weight: 800; }
.stage-info { flex: 1; min-width: 0; }
.stage-info strong { display: block; font-size: 18px; line-height: 1.2; }
.stage-info span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.stage-info .eyebrow { margin: 0 0 6px; font-size: 14px; letter-spacing: .4px; }
.stage-reward { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 64px; text-align: center; font-size: 14px; font-weight: 650; line-height: 1.2; color: #486033; }
.stage-reward .icon { width: 24px; height: 24px; }
.workshop-action { margin-top: 4px; }
.action-context { display: none; }
.workshop-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 12px; }
.workshop-extra .ghost { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 180px; }
.plan-summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; margin-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.plan-summary > span { flex: 1; }
.plan-summary .ghost { padding: 8px 0; font-size: 14px; }

/* Clear primary and secondary actions across every game state. */
.primary, .secondary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 20px;
  border-radius: 9px;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}
.primary { min-height: 60px; border: 1.5px solid #7c2e20; color: #fffdf4; background: var(--orange); box-shadow: 0 4px 0 #7c2e20; transition: background .15s; }
.primary:hover { background: #b93412; }
.primary:disabled { opacity: 1; color: #526048; background: #d6ddc8; box-shadow: 0 4px 0 #a0ae89; }
.primary .icon { width: 25px; height: 25px; }
.secondary { min-height: 54px; color: var(--ink); background: #f1ecd9; border: 1.5px solid #7d8b70; font-size: 16px; }
.secondary:hover { background: #dfe8ca; }
.ghost { min-height: 44px; padding: 11px 5px; font-size: 15px; line-height: 1.4; color: #445a35; background: transparent; font-weight: 650; }
.ghost:hover { color: #a63618; text-decoration: underline; text-underline-offset: 4px; }
.button-stack, .battle-actions { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 10px; }
.button-stack > .ghost { display: flex; align-items: center; justify-content: center; gap: 8px; }
.button-stack > .ghost .icon { width: 20px; height: 20px; }
.center-note { margin-top: 14px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--muted); }
.tip { margin-top: 18px; font-size: 15px; line-height: 1.65; color: #4f5c43; }
.callout, .reward-notice { padding: 18px; margin: 20px 0; border: 1px solid #c1cba9; border-radius: 8px; background: #e9efd8; color: #415635; font-size: 16px; line-height: 1.6; }
.reward-notice { background: #fff0cd; border-color: #dbc482; color: #684912; font-weight: 600; }
.error { padding: 16px 18px; margin: 0 0 20px; border: 1px solid #c5846d; border-radius: 14px; color: #792d18; background: #fae6dc; font-size: 16px; line-height: 1.5; }
.toast { position: fixed; z-index: 100; top: calc(16px + var(--safe-top)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 18px 22px; border-radius: 16px; color: #fffaf0; background: #283a25; box-shadow: 0 8px 30px #17230e2b; font-size: 16px; line-height: 1.5; }

/* A compact parts rack keeps the assembly preview within sight. */
.parts-picker { min-width: 0; }
.progress-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 0 18px; font-size: 16px; font-weight: 650; color: #405432; border-bottom: 1px solid var(--line); }
.progress-track { flex: 0 1 150px; height: 10px; border-radius: 3px; overflow: hidden; background: #d4ddc2; }
.progress-track i { display: block; height: 100%; background: #53765d; }
.tabs { display: flex; gap: 6px; margin: 20px 0; padding: 0; border-bottom: 2px solid var(--ink); }
.tab { flex: 1; min-width: 0; min-height: 48px; padding: 10px 8px; border: 1.5px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; background: transparent; font-size: 16px; font-weight: 650; }
.tab.active { border-color: var(--ink); background: #eee4c4; color: var(--ink); font-weight: 800; }
.tab[data-slot="head"].active { background: var(--head); }
.tab[data-slot="body"].active { background: var(--body); }
.tab[data-slot="legs"].active { background: var(--legs); }
.parts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.part-card { position: relative; min-width: 0; padding: 18px 12px 16px; border: 1.5px solid var(--edge); border-radius: 9px; text-align: left; background: var(--part-color, #e8e1ce); box-shadow: 2px 3px 0 #3b463c; }
.part-card:hover { outline: 2px solid #6b8254; outline-offset: 2px; }
.part-card.selected { border-color: #8b2d19; outline: 3px solid var(--orange); outline-offset: 1px; box-shadow: 2px 3px 0 #8b2d19; background-image: linear-gradient(145deg, #fff9e854, transparent 65%); }
.part-card.locked { background: #e3e1d5; }
.part-card.locked .part-preview { opacity: .7; filter: saturate(.4); }
.part-card .part-preview { width: 100%; height: 150px; margin: 16px auto 12px; overflow: visible; }
.part-card h3 { font-size: 20px; margin-bottom: 7px; }
.part-card small { display: block; font-size: 14px; line-height: 1.5; color: #4d5e3e; }
.part-badge { position: absolute; top: 10px; right: 10px; padding: 5px 8px; border: 1px solid #9a9e85; border-radius: 4px; background: #fffdf0; color: #415a30; font-size: 14px; line-height: 1.2; font-weight: 700; }
.part-badge .icon { width: 18px; height: 18px; }
.detail-panel { border-color: var(--edge); box-shadow: 3px 3px 0 #c4c0af; }
.detail-panel h2 { margin-bottom: 10px; font-size: 29px; }
.detail-panel > p { font-size: 16px; line-height: 1.65; color: #4b5940; }
.build-preview { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px; margin: 22px 0; padding: 15px; border: 1px solid #9c9d83; border-radius: 9px; background: radial-gradient(ellipse at 50% 42%, #fff8de 0 47%, transparent 48%), linear-gradient(180deg, transparent 86%, #242d281a 86%), var(--part-color, #e9dfc2); }
.build-preview svg { width: 100%; height: 315px; overflow: visible; }
.build-preview p { margin-top: 10px; color: var(--ink); font-size: 19px; line-height: 1.25; font-weight: 800; }
.bonus-line { margin-top: 14px; color: #415e29; font-size: 15px; font-weight: 700; }
.sticky-actions { margin: 22px 0; }

/* Preparation is one decision surface: rival on the left, your plan on the right. */
.match-stage { min-width: 0; }
.versus-preview { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 2px; padding: 20px 12px; border: 2px solid var(--edge); border-radius: 12px; background: radial-gradient(ellipse at 50% 65%, #fbefcc 0 43%, transparent 44%), #cdd2b5; text-align: center; }
.versus-preview > div { min-width: 0; }
.versus-preview svg { width: 120%; max-width: none; height: 232px; margin: 12px -10%; overflow: visible; }
.versus-preview span { font-size: 14px; font-weight: 750; line-height: 1.3; color: #435937; }
.versus-preview b { display: block; min-height: 42px; font-size: 17px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.versus-preview > i { position: relative; z-index: 2; color: #495d38; font-size: 20px; font-weight: 900; font-style: normal; transform: rotate(-8deg); }
.enemy-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 2px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: #526047; }
.enemy-plan b { font-weight: 750; color: #334b27; }
.enemy-plan span:last-child { flex-shrink: 0; }
.enemy-brief { padding: 20px 2px 10px; }
.enemy-brief h2 { margin: 8px 0; font-size: 24px; }
.enemy-brief p { font-size: 16px; line-height: 1.6; color: #4b5b3f; }
.enemy-details { margin: 8px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.enemy-details summary { justify-content: space-between; gap: 16px; font-size: 15px; }
.enemy-details summary .icon { width: 20px; height: 20px; }
.enemy-details[open] summary .icon { transform: rotate(45deg); }
.abilities { list-style: none; padding: 0; margin: 16px 0; }
.abilities li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: #4d5d42; }
.abilities li strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 17px; }
.ability-icon { width: 60px; height: 65px; flex: 0 0 60px; overflow: visible; }
.opponent-hint { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 13px 0 17px; border-bottom: 2px solid #879175; }
.opponent-hint > svg { width: 58px; height: 66px; flex: 0 0 58px; overflow: visible; }
.opponent-hint > .icon { width: 38px; height: 38px; flex-basis: 38px; }
.opponent-hint > div { min-width: 0; }
.opponent-hint strong { display: block; margin: 4px 0; font-size: 18px; line-height: 1.25; }
.opponent-hint p { font-size: 14px; line-height: 1.45; color: #556048; }
.tactics-section { margin: 0; }
.tactic-grid { display: grid; gap: 10px; }
.tactic-card { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(98px, auto); grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 82px; padding: 14px; border: 1.5px solid #7c8875; border-left: 5px solid #8b9278; border-radius: 8px; background: #f4f0e5; text-align: left; }
.tactic-card[data-id="rush"] { border-left-color: #bf492d; background: #fae9dd; }
.tactic-card[data-id="guard"] { border-left-color: #597f91; background: #e4edf0; }
.tactic-card.selected { outline: 2px solid var(--orange); outline-offset: 1px; border-color: #a7371e; box-shadow: 2px 3px 0 #783922; }
.tactic-card.selected:after { content: "✓"; position: absolute; right: 8px; top: 3px; color: #a13016; font-size: 15px; font-weight: 800; }
.tactic-card[data-id="rush"] > .icon { color: #b44425; }
.tactic-card[data-id="guard"] > .icon { color: #41677c; }
.tactic-card > .icon { grid-row: 1 / 3; width: 29px; height: 29px; color: #446039; }
.tactic-card b { grid-row: 1 / 3; font-size: 17px; line-height: 1.25; }
.tactic-card small { grid-column: 3; font-size: 14px; line-height: 1.4; font-weight: 650; color: #3c5c25; }
.tactic-card > span { grid-column: 3; font-size: 14px; line-height: 1.4; color: #974623; }
.tactic-explanation { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #526045; }
.shield-note { display: flex; align-items: center; justify-content: center; gap: 8px; color: #486034; font-size: 15px; font-weight: 600; }
.shield-note .icon { width: 20px; height: 20px; }

/* The arena is a separate, darker place with a warm fighting platform. */
.battle-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.battle-header h1 { font-size: 26px; }
.round-badge { flex-shrink: 0; padding: 8px 10px; border: 1.5px solid var(--edge); border-radius: 5px; background: #eddda6; font-size: 14px; font-weight: 800; white-space: nowrap; }
.arena { position: relative; min-width: 0; padding: 20px 12px 18px; border: 2px solid #172a28; border-radius: 12px; color: #fff7df; background: linear-gradient(155deg, #294442, #182e2e); overflow: hidden; isolation: isolate; box-shadow: 4px 4px 0 #122424; }
.arena:before { content: ""; position: absolute; left: -8%; right: -8%; top: 135px; height: 250px; border: 1px solid #fffbdf70; border-radius: 50%; background: radial-gradient(ellipse at center, #f5e9be, #c7ca99); box-shadow: 0 12px 0 #101f2166; z-index: -1; }
.combatants { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.combatant { min-width: 0; text-align: center; }
.fighter-name { min-height: 40px; color: #fff6db; font-size: 15px; font-weight: 800; line-height: 1.3; }
.hp-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px 6px; margin: 9px 0 6px; font-size: 14px; font-weight: 750; color: #fff8e8; font-variant-numeric: tabular-nums; }
.hp-track { height: 12px; border: 1px solid #e8ebc76b; border-radius: 3px; overflow: hidden; background: #0f2623; }
.hp-track i { display: block; height: 100%; background: #c4df86; transition: width .25s; }
.combatant.enemy .hp-track i { background: #ed9770; }
.fighter { position: relative; display: flex; align-items: center; justify-content: center; height: 252px; isolation: isolate; }
.fighter:before { content: ""; position: absolute; z-index: -1; bottom: 10px; width: 76%; height: 12px; border-radius: 50%; background: #243b3261; }
.fighter svg { width: calc(100% + 30px); max-width: none; height: 242px; flex-shrink: 0; overflow: visible; filter: drop-shadow(2px 5px 0 #16262150); }
.fighter.attacking { animation: attack .3s ease; }
.enemy .fighter.attacking { animation: attack-left .3s ease; }
.fighter.hit { animation: hit .3s ease; }
.fighter.dodging { animation: dodge .35s ease; }
.fighter.dead { opacity: .5; transform: rotate(-8deg); }
.combatant.source-active .fighter-name { color: #ffe89b; }
.fighter[data-source-slot="head"] .creature-head,
.fighter[data-source-slot="body"] .creature-body,
.fighter[data-source-slot="legs"] .creature-legs { filter: drop-shadow(0 0 5px #fff7af) drop-shadow(0 0 2px #ffe182); }
.fighter.healing svg { filter: drop-shadow(0 0 7px #b9ebae); }
.fighter.burning svg { filter: drop-shadow(0 0 7px #f6804f); }
.fighter.shielding svg { filter: drop-shadow(0 0 7px #97d5de); }
.vs { position: absolute; top: 44%; left: 50%; z-index: 1; transform: translate(-50%, -50%) rotate(-9deg); font-size: 22px; font-weight: 900; color: #4a5d44; }
.statuses { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-height: 29px; }
.status { padding: 5px 7px; border: 1px solid #a3bbad; border-radius: 4px; background: #dbe8df; color: #253e36; font-size: 14px; line-height: 1.2; font-weight: 700; }
.status.burn { border-color: #d3966d; background: #f8d7b2; color: #8c411a; }
.charge-meter { min-height: 68px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #7e978466; text-align: left; }
.charge-meter > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; }
.charge-meter b { color: #e9f1d5; font-size: 14px; line-height: 1.3; font-weight: 750; }
.charge-meter small { display: block; margin-top: 7px; color: #d0dcca; font-size: 14px; line-height: 1.45; }
.charge-meter.passive { text-align: center; }
.charge-pips { display: flex; gap: 4px; }
.charge-pips i { display: block; width: 13px; height: 8px; border-radius: 2px; background: #6b8876; }
.charge-pips i.filled { background: #d0eaa0; }
.charge-meter.ready b { color: #ffd386; }
.charge-meter.ready .charge-pips i.filled { background: #f6ba59; }
.combat-caption { position: relative; margin-top: 18px; padding: 13px 10px; min-height: 60px; border-radius: 6px; background: #fff3cd; color: #33452c; font-size: 15px; font-weight: 600; line-height: 1.5; text-align: center; }
.combat-moment { --moment-accent: #d6b968; position: relative; display: flex; align-items: center; gap: 13px; min-height: 105px; margin-top: 18px; padding: 14px; border: 1.5px solid var(--moment-accent); border-left: 5px solid var(--moment-accent); border-radius: 7px; background: #fff3d8; color: var(--ink); box-shadow: 0 3px 0 #0f2422; }
.combat-moment[data-kind="attack"], .combat-moment[data-kind="combo"], .combat-moment[data-kind="burn"] { --moment-accent: #ef9868; background: #ffead4; }
.combat-moment[data-kind="shield"], .combat-moment[data-kind="slow"], .combat-moment[data-kind="dodge"] { --moment-accent: #8ec3d0; background: #e5eff0; }
.combat-moment[data-kind="heal"], .combat-moment[data-kind="immune"] { --moment-accent: #a9ce95; background: #e8f0d8; }
.combat-moment-art { flex: 0 0 54px; display: flex; align-items: center; justify-content: center; width: 54px; }
.combat-moment-art svg { width: 54px; height: 72px; overflow: visible; }
.combat-moment-art > .icon { width: 36px; height: 36px; }
.combat-moment-art svg + svg { margin-left: -22px; transform: translateY(12px); }
.combat-moment-copy { min-width: 0; }
.combat-moment-copy small { display: block; color: #5c6550; font-size: 14px; line-height: 1.3; font-weight: 650; }
.combat-moment-copy strong { display: block; margin: 4px 0; font-size: 20px; line-height: 1.15; letter-spacing: -.4px; }
.combat-moment-copy p { margin: 0; color: #45513f; font-size: 14px; line-height: 1.4; }
.replay-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.speed { min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--edge); border-radius: 6px; background: #eee4c4; font-size: 15px; font-weight: 750; }
.battle-log { margin-top: 14px; max-height: 340px; overflow: auto; font-size: 15px; line-height: 1.65; color: #4c5c40; }
.battle-log p { padding: 13px 0; border-bottom: 1px solid var(--line); }
.floating-effects { position: absolute; left: 50%; top: 35%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; z-index: 4; }
.damage-pop { font-weight: 900; font-size: 40px; color: #fff5dc; text-shadow: -2px -2px 0 #843e2a, 2px -2px 0 #843e2a, -2px 2px 0 #843e2a, 2px 2px 0 #843e2a, 0 3px 6px #48211244; white-space: nowrap; animation: damage-float .65s ease-out both; }
.damage-pop.heal { color: #eeffd9; text-shadow: -1px -1px 0 #4d6639, 1px -1px 0 #4d6639, -1px 1px 0 #4d6639, 1px 1px 0 #4d6639; }
.damage-pop.shield, .damage-pop.dodge, .damage-pop.burn { font-size: 22px; }
.damage-pop.shield { color: #f0f5df; text-shadow: -1px -1px 0 #536854, 1px -1px 0 #536854, -1px 1px 0 #536854, 1px 1px 0 #536854; }
.damage-pop.dodge { color: #faf5ef; text-shadow: -1px -1px 0 #665d4f, 1px -1px 0 #665d4f, -1px 1px 0 #665d4f, 1px 1px 0 #665d4f; }
.damage-pop.burn { color: #ffde97; }

/* A result has a clear winner and one visible reason to try the next experiment. */
.result-showcase { background: #e7e2ca; box-shadow: 4px 4px 0 #acae90; }
.result-layout[data-outcome="win"] .result-showcase { background: radial-gradient(ellipse at 40% 45%, #fcf0c3 0 36%, transparent 37%), #cbd8b4; }
.result-layout[data-outcome="loss"] .result-showcase { background: #e3d3c8; }
.result-hero { text-align: center; padding: 8px 0 0; }
.result-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 10px auto 14px; border-radius: 50%; border: 2px solid var(--ink); background: #f8e8ae; color: #314d2f; box-shadow: 2px 3px 0 #3c503d; }
.result-mark .icon { width: 30px; height: 30px; stroke-width: 2.3; }
.result-hero h1 { font-size: 40px; }
.result-hero p { margin: 10px auto 0; max-width: 470px; color: #4a5a3d; font-size: 16px; line-height: 1.5; }
.result-duo { display: flex; align-items: end; justify-content: center; gap: 0; height: 280px; margin: 12px -8px; }
.result-duo > div { position: relative; flex: 1 1 50%; min-width: 0; height: 270px; display: flex; align-items: end; justify-content: center; }
.result-duo svg { width: 120%; max-width: none; height: 270px; flex-shrink: 0; overflow: visible; }
.result-duo .is-winner { z-index: 2; flex-basis: 58%; }
.result-duo .is-loser { flex-basis: 42%; opacity: .57; filter: saturate(.6); }
.result-duo .is-loser svg { height: 215px; transform: rotate(-6deg); }
.result-duo .result-rival.is-loser svg { transform: rotate(6deg); }
.result-highlight { position: relative; padding: 15px 16px; margin-top: 14px; border: 1px solid #8c997c; border-left: 4px solid var(--stage); border-radius: 0 7px 7px 0; background: #fff9e9; }
.result-highlight strong { display: block; font-size: 20px; line-height: 1.2; }
.result-highlight p { margin-top: 7px; color: #4b5a40; font-size: 15px; line-height: 1.5; }
.next-opponent { padding: 18px 0; border-top: 1px solid var(--line); }
.next-opponent strong { display: block; margin-top: 6px; font-size: 23px; }
.result-facts { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 0; border-top: 1px solid #adbd95; color: #445a35; font-size: 15px; }
.result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 0; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats div { color: var(--muted); text-align: center; font-size: 14px; }
.result-stats strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 28px; }
.battle-analysis h2 { margin: 10px 0 12px; font-size: 28px; }
.battle-analysis > p { color: #4c5d40; font-size: 16px; line-height: 1.65; }
.damage-table { margin: 24px 0; }
.damage-table > div { display: grid; grid-template-columns: 22px minmax(0, 1fr) 38px 38px; align-items: center; gap: 9px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.damage-table .icon { width: 20px; height: 20px; color: #5d704c; }
.damage-table b { text-align: center; font-size: 18px; }
.damage-table .damage-table-head { grid-template-columns: minmax(0, 1fr) 38px 38px; padding: 0 0 12px; color: #506144; font-size: 14px; font-weight: 650; }
.damage-table-head span:not(:first-child) { text-align: center; }
.next-experiment { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 14px; border: 1px solid #b6c69d; border-radius: 17px; background: #e8efd8; text-align: left; }
.suggestion-art { width: 76px; height: 100px; flex: 0 0 76px; overflow: visible; }
.next-experiment > span { flex: 1; min-width: 0; }
.next-experiment small { color: #52683f; font-size: 14px; font-weight: 700; }
.next-experiment strong { display: block; margin: 7px 0; font-size: 18px; line-height: 1.25; }
.next-experiment span > span { display: block; color: #4b6040; font-size: 14px; line-height: 1.5; }
.next-experiment > .icon { width: 20px; }
/* Reward picking is a rack of three objects plus a full-size try-on. */
.reward-layout { display: grid; gap: 24px; align-items: start; }
.reward-stage, .reward-picker { min-width: 0; }
.reward-stage { padding: 20px; border: 1.5px solid var(--edge); border-radius: 12px; background: var(--panel); box-shadow: 3px 3px 0 #aaa993; }
.reward-stage .build-preview { margin: 0 0 20px; }
.reward-description h2 { margin: 9px 0 12px; font-size: 30px; }
.reward-description > p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: #4b5940; }
.reward-grid { display: grid; gap: 16px; margin: 0; }
.reward-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; width: 100%; padding: 16px; border: 1.5px solid var(--edge); border-radius: 9px; background: var(--part-color, #e8e1ce); box-shadow: 2px 3px 0 #3b463c; text-align: left; }
.reward-card.selected { border-color: #8b2d19; outline: 3px solid var(--orange); outline-offset: 1px; box-shadow: 2px 3px 0 #8b2d19; }
.reward-card.selected:after { content: "✓"; position: absolute; top: 6px; right: 8px; color: #873319; font-size: 18px; font-weight: 900; }
.reward-art { width: 100%; height: 138px; overflow: visible; }
.reward-card h3 { margin-bottom: 8px; font-size: 23px; }
.reward-card p { font-size: 15px; line-height: 1.6; color: #4e5c43; }
.reward-card small { display: block; font-size: 14px; line-height: 1.4; font-weight: 700; color: #4d5942; }
.part-ability { margin: 18px 0; }
.ability-tag { display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid #8e997e; border-radius: 4px; background: var(--part-color, #ece6cf); font-size: 14px; line-height: 1.3; font-weight: 750; }
.part-ability p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #475440; }
.part-combo { margin: 18px 0; padding: 16px; border: 1.5px solid #6c794f; border-radius: 7px; background: #e5eccb; }
.part-combo > span { display: flex; align-items: center; gap: 6px; color: #465c31; font-size: 14px; font-weight: 750; }
.part-combo .icon { width: 18px; height: 18px; }
.part-combo strong { display: block; margin: 7px 0; font-size: 19px; line-height: 1.3; }
.part-combo p { font-size: 15px; line-height: 1.5; color: #495c3a; }
.swap-note { margin: 16px 0; text-align: center; font-size: 15px; color: #56614c; }
.build-preview[data-focus="head"] .creature-head, .build-preview[data-focus="body"] .creature-body, .build-preview[data-focus="legs"] .creature-legs { filter: drop-shadow(0 0 3px #fff6cf) drop-shadow(0 0 6px #cf8138); }

.shop-stage { background: #e5d8c3; box-shadow: 4px 4px 0 #b2a58e; }
.shop-stage .cosmetic-scene:before { background: #fff0c9; box-shadow: 0 0 0 1px #a58f6d; }

/* Cosmetic collection: owned and previewed looks are visible at game scale. */
.shop-picker-above { display: none; grid-column: 1 / -1; }
.shop-preview-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; color: #485e39; font-size: 14px; line-height: 1.4; font-weight: 650; }
.shop-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.skin-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 106px; padding: 10px 4px; border: 1.5px solid var(--edge); border-radius: 7px; background: #f1e9d9; box-shadow: 1px 2px 0 #a8a28f; text-align: center; }
.skin-choice[aria-pressed="true"] { border-color: var(--orange); background: #fff0d6; }
.skin-swatch { display: block; width: 30px; height: 30px; border: 2px solid #3d4a35; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff8e455; }
.skin-choice b, .skin-choice strong { display: block; min-height: 20px; font-size: 14px; line-height: 20px; font-weight: 750; white-space: nowrap; }
.skin-choice small { display: block; margin-top: auto; color: #4a603a; font-size: 14px; line-height: 20px; font-weight: 650; white-space: nowrap; }

.shop-stage .cosmetic-scene { margin-top: 18px; }
.preview-label { position: absolute; top: 2px; left: 0; padding: 7px 11px; border: 1px solid #b3bf97; border-radius: 9px; background: #fffcf0; color: #3d562e; font-size: 14px; font-weight: 750; }
.cosmetic-scene[data-skin="berry"]:before, .specimen[data-skin="berry"]:before { background: #f1d6c7; }
.cosmetic-scene[data-skin="midnight"]:before, .specimen[data-skin="midnight"]:before { background: #d5d5dd; }
.cosmetic-scene[data-skin="mint"]:before, .specimen[data-skin="mint"]:before { background: #dfefd2; }
.purchase-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; color: #3b512e; font-size: 17px; font-weight: 700; }
.purchase-heading .star-price { margin-top: 0; }
.goal-progress { padding: 16px; margin-bottom: 16px; border-radius: 14px; background: #f4f6e7; }
.goal-progress strong { font-size: 19px; color: #315c32; }
.goal-progress p { margin: 8px 0 0; font-size: 15px; }
.bundle-card { display: flex; align-items: center; gap: 16px; padding: 20px 17px; margin-top: 22px; border: 1px solid #ccb776; border-radius: 18px; background: #f5edce; }
.bundle-card > div { flex: 1; min-width: 0; }
.bundle-card h3 { margin: 7px 0; font-size: 23px; }
.bundle-card p { color: #615636; font-size: 15px; line-height: 1.5; }
.bundle-card .star-price { flex-shrink: 0; margin: 0; padding: 9px; }
.shop-faq { margin-bottom: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.shop-faq summary { justify-content: space-between; gap: 12px; font-size: 16px; }
.shop-faq p { font-size: 15px; }
.shop-faq[open] summary .icon { transform: rotate(45deg); }
.shop-catalog { padding: 20px 16px; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-card { position: relative; min-width: 0; padding: 12px; border: 1.5px solid #6c7760; border-radius: 9px; background: #efe5d4; box-shadow: 2px 3px 0 #b6ab96; text-align: left; }
.shop-card.selected, .shop-card[aria-pressed="true"] { border-color: var(--orange); background: #fff0d6; }
.shop-card.owned { background: #e2e8cf; }
.shop-card.owned.selected { background: #fff0d6; }
.shop-art { display: flex; align-items: center; justify-content: center; min-height: 170px; margin: 2px -5px 12px; border-radius: 12px; background: #fff8df70; }
.shop-art svg, svg.shop-art { width: 100%; height: 176px; overflow: visible; }
.shop-card-info h3 { margin-bottom: 6px; font-size: 19px; }
.shop-card-info p { font-size: 14px; line-height: 1.45; color: #526244; }
.star-price { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 9px; border-radius: 8px; color: #704617; background: #f6e6af; font-size: 15px; font-weight: 800; }
.star-price .icon { width: 19px; height: 19px; }
.purchase-panel { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.purchase-panel h2, .purchase-panel h3 { font-size: 25px; margin-bottom: 10px; }
.purchase-panel p { margin: 10px 0 18px; font-size: 16px; line-height: 1.6; color: #485e3b; }
.purchase-panel .secondary { margin-top: 12px; }
.shop-trust { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; color: #506044; font-size: 14px; line-height: 1.65; }
.shop-trust p + p { margin-top: 10px; }
.shop-owned, .shop-badge { display: inline-flex; margin-top: 8px; padding: 4px 7px; border-radius: 6px; font-size: 14px; font-weight: 750; color: #3b592d; background: #dae7c4; }

/* Supporting screens follow the same readable scale. */
.section-title { margin: 30px 0 14px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 19px; font-weight: 650; }
.setting-row small { display: block; margin-top: 7px; color: #536249; font-size: 15px; line-height: 1.5; font-weight: 400; }
.toggle { position: relative; min-width: 60px; min-height: 48px; background: none; }
.toggle:before { content: ""; position: absolute; top: 9px; left: 1px; width: 56px; height: 30px; border-radius: 18px; background: #bdc8a7; }
.toggle:after { content: ""; position: absolute; top: 13px; left: 5px; width: 22px; height: 22px; border-radius: 50%; background: #fffaf0; box-shadow: 0 2px 3px #26391b25; transition: left .15s; }
.toggle.on:before { background: #627e42; }
.toggle.on:after { left: 31px; }
.stage-list { display: grid; gap: 13px; margin-top: 24px; }
.stage-row { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 91px; padding: 16px; border: 1px solid #bbc8a4; border-radius: 18px; background: #eaf0dd; text-align: left; }
.stage-row.active { border: 2px solid #5c773d; padding: 15px; background: #e3eccf; }
.stage-row > span:nth-child(2) { flex: 1; min-width: 0; }
.stage-row strong { font-size: 18px; line-height: 1.3; }
.stage-row small { display: block; margin-top: 6px; color: #4e6141; font-size: 14px; line-height: 1.4; }
.stage-row > .icon { width: 22px; }
.stage-row:disabled { opacity: .68; }
.trial-layout { display: grid; gap: 24px; }
.trial-main, .trial-side { min-width: 0; }
.trial-side { display: grid; gap: 22px; }
.trial-creature { width: 100%; height: 340px; margin: 14px auto; overflow: visible; }
.daily-goal, .friend-trial { padding: 24px 20px; border: 1px solid #b6c5a1; border-radius: 12px; background: #e6efd9; }
.daily-goal h2 { font-size: 29px; margin: 9px 0 0; }
.goal-creature { width: 100%; height: 270px; margin: 12px 0; overflow: visible; }
.daily-goal > strong { display: block; font-size: 20px; color: #36522b; }
.daily-goal .progress-track { width: 100%; height: 12px; margin: 14px 0 18px; }
.daily-goal p, .friend-trial p { color: #4b6040; font-size: 16px; line-height: 1.6; margin: 12px 0 20px; }
.friend-trial { background: var(--panel); }
.friend-trial h2 { font-size: 27px; }
.trial-hero { padding: 28px 22px; border: 2px solid var(--edge); border-radius: 12px; background: radial-gradient(ellipse at 50% 55%, #f7e7b9 0 35%, transparent 36%), #ccd6b5; text-align: center; }
.trial-hero > .icon { width: 68px; height: 68px; margin: 0 auto 20px; color: #5b753d; }
.trial-hero h2 { font-size: 31px; }
.trial-hero p { max-width: 620px; margin: 15px auto 0; font-size: 17px; line-height: 1.6; color: #475c3a; }
.opponent-preview { position: relative; display: flex; align-items: center; justify-content: center; height: 370px; padding: 14px; border: 1px solid #bac7a1; border-radius: 25px; background: radial-gradient(circle, #faf1c7 0 38%, transparent 39%), linear-gradient(140deg, #e6ecd0, #d4e0bb); }
.opponent-preview .hero-creature { height: 340px; }
.enemy-tag { position: absolute; top: 18px; left: 18px; color: #476037; font-size: 14px; font-weight: 750; }
.enemy-name { margin-top: 20px; text-align: center; font-size: 26px; }
.share-url { width: 100%; margin: 13px 0 0; padding: 17px; border: 1px solid #aebb96; border-radius: 13px; color: #364d2a; background: #fffaf0; font-size: 16px; }
.loading { min-height: 90dvh; max-width: 760px; margin: auto; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loading-mark, .landing-mascot { width: 115px; height: 115px; margin-bottom: 20px; }
.loading h1 { margin-top: 10px; font-size: 38px; }
.loading p { max-width: 580px; margin: 20px 0; color: #4e6041; font-size: 17px; line-height: 1.65; }
.loading .primary { max-width: 440px; }
.bot-link { margin-top: 12px; }
.skeleton { width: min(80%, 350px); height: 10px; margin: 24px auto; overflow: hidden; border-radius: 8px; background: #d5ddc4; }
.skeleton i { display: block; width: 40%; height: 100%; border-radius: 8px; background: #799652; animation: load 1.5s ease-in-out infinite; }
details { margin: 22px 0; font-size: 16px; line-height: 1.7; color: #4d5f40; }
summary { display: flex; align-items: center; min-height: 52px; padding: 10px 0; cursor: pointer; color: #2e4425; font-size: 17px; font-weight: 750; line-height: 1.4; }
details p { margin: 12px 0; }
footer.version { margin: 32px 0 10px; color: #5a684d; text-align: center; font-size: 14px; line-height: 1.75; }
.empty-art { margin: 30px; font-size: 70px; text-align: center; color: #6d824e; }

/* Existing combat animation timing remains driven by journal playback. */
@keyframes attack { 50% { transform: translateX(15px) rotate(4deg); } }
@keyframes hit { 35% { transform: translateX(-6px); } 65% { transform: translateX(5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes load { 50% { margin-left: 60%; } }
@keyframes damage-float {
  from { transform: translateY(6px) scale(.8); opacity: 0; }
  20% { transform: translateY(-4px) scale(1.12); opacity: 1; }
  to { transform: translateY(-23px) scale(1); opacity: 1; }
}
@keyframes attack-left { 50% { transform: translateX(-15px) rotate(-4deg); } }
@keyframes dodge { 50% { transform: translateY(-14px) rotate(-7deg); } }

/* Compact phones keep readable labels by changing layout, never by shrinking text. */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .topbar { gap: 8px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .edition { font-size: 14px; }
  .local-pill { display: none; }
  .heading-row h1, .page-head h1 { font-size: 32px; }
  .workshop-stage, .shop-stage, .result-showcase { padding: 20px 14px; }
  .workshop-controls, .battle-preparation, .result-detail, .detail-panel, .battle-aside { padding: 20px 14px; }
  .specimen, .cosmetic-scene { height: 325px; }
  .hero-creature { height: 315px; }
  .slot-grid { grid-template-columns: 1fr; }
  .slot { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 16px; padding: 12px; }
  .slot-top { grid-column: 2; align-self: end; }
  .slot-art { grid-column: 1; grid-row: 1 / 3; height: 68px; margin: 0; }
  .slot-name { grid-column: 2; align-self: start; text-align: left; margin-top: 5px; font-size: 17px; }
  .stat-value { font-size: 23px; gap: 3px; }
  .stat-value .icon { width: 17px; height: 17px; }
  .stage-reward { flex-basis: 52px; }
  .tactic-card { grid-template-columns: 24px minmax(0, 1fr) 96px; gap: 4px 8px; padding: 13px 9px; }
  .tactic-card > .icon { width: 24px; height: 24px; }
  .tactic-card b { font-size: 16px; }
  .tactic-card small, .tactic-card > span { font-size: 14px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .part-card { padding: 18px 10px 14px; }
  .part-card .part-preview { height: 130px; }
  .part-card h3 { font-size: 18px; overflow-wrap: anywhere; }
  .build-preview { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .build-preview svg { height: 285px; }
  .reward-card { grid-template-columns: 1fr; text-align: center; }
  .reward-art { height: 165px; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 12px; }
  .shop-art, .shop-art svg, svg.shop-art { height: 150px; min-height: 150px; margin: 0; }
  .charge-meter > div { flex-direction: column; align-items: flex-start; }
  .combatants { gap: 16px; }
  .arena { padding: 18px 10px; }
  .hp-label { flex-direction: column; align-items: flex-start; }
  .damage-table > div { grid-template-columns: 18px minmax(0, 1fr) 30px 30px; gap: 7px; }
  .damage-table .damage-table-head { grid-template-columns: minmax(0, 1fr) 30px 30px; }
  .next-experiment { flex-wrap: wrap; }
  .suggestion-art { width: 62px; flex-basis: 62px; }
}

/* A single reserved bottom action never shares its space with page content. */
@media (max-width: 899px) {
  .topbar { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
  .mobile-slot-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px -4px 2px; order: 3; }
  .workshop-stage { display: flex; flex-direction: column; }
  .workshop-stage .heading-row { order: 1; }
  .workshop-stage .specimen { order: 2; height: 330px; }
  .workshop-stage .hero-creature { height: 320px; }
  .workshop-stage .creature-label { order: 4; }
  .workshop-stage .creature-label p { display: none; }
  .workshop-controls > .panel-heading, .workshop-controls > .slot-grid { display: none; }
  .workshop-controls { padding-top: 2px; }
  .parts-layout { gap: 18px; }
  .shell[data-screen="parts"] .main { padding-top: 16px; }
  .shell[data-screen="parts"] .page-head { margin-bottom: 12px; }
  .shell[data-screen="parts"] .page-head h1 { font-size: 29px; }
  .shell[data-screen="parts"] .page-head p { display: none; }
  .parts-picker { position: sticky; z-index: 12; top: var(--safe-top); margin: 0 -3px; padding: 5px 3px 10px; border-bottom: 2px solid #617059; background: var(--paper); }
  .parts-picker .progress-line { padding: 0 2px 6px; border: 0; font-size: 14px; }
  .parts-picker .progress-track { flex-basis: 75px; height: 7px; }
  .parts-picker .tabs { margin: 0 0 8px; }
  .parts-picker .tab { min-height: 42px; padding: 8px 5px; font-size: 15px; }
  .parts-picker .parts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .parts-picker .part-card { padding: 7px 0 6px; text-align: center; border-radius: 6px; box-shadow: 1px 2px 0 #68735f; }
  .parts-picker .part-card .part-preview { height: 54px; margin: 3px 0 4px; }
  .parts-picker .part-card h3 { min-height: 34px; margin: 0; font-size: 14px; line-height: 1.2; letter-spacing: -.25px; overflow-wrap: anywhere; }
  .parts-picker .part-card small, .parts-picker > .center-note { display: none; }
  .parts-picker .part-badge { top: 2px; right: 2px; padding: 2px; border: 0; border-radius: 3px; }
  .parts-picker .part-badge .icon { width: 15px; height: 15px; }
  .detail-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .detail-panel > * { order: 1; margin-inline: 16px; }
  .detail-panel .panel-heading { margin-top: 18px; margin-bottom: 0; gap: 5px; }
  .detail-panel .panel-heading > .eyebrow { letter-spacing: .25px; text-transform: none; }
  .detail-panel h2 { margin: 0; font-size: 28px; }
  .detail-panel .build-preview { order: 0; margin: 0; padding: 10px 14px 12px; border: 0; border-bottom: 1px solid #a3a58b; border-radius: 10px 10px 0 0; }
  .detail-panel .build-preview svg { height: clamp(280px, 38dvh, 320px); }
  .detail-panel > .primary { width: calc(100% - 32px); margin-bottom: 18px; }
  .detail-panel > .callout { margin-top: 4px; margin-bottom: 18px; }
  .battle-header { gap: 8px; margin-bottom: 15px; }
  .battle-header h1 { font-size: 25px; line-height: 1.08; }
  .round-badge { padding: 8px; font-size: 14px; }
  .tactics-section .section-heading > span { display: none; }
  .charge-meter { min-height: 30px; margin-top: 8px; padding-top: 8px; }
  .charge-meter small, .charge-meter.passive { display: none; }
  .combat-moment { margin-top: 13px; min-height: 100px; padding: 11px; gap: 10px; }
  .combat-moment-copy strong { font-size: 19px; }
  .reward-layout { gap: 20px; }
  .reward-picker { order: 1; }
  .reward-stage { order: 2; padding: 16px; }
  .reward-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .reward-card { display: block; padding: 10px 5px; text-align: center; }
  .reward-art { height: 85px; margin-bottom: 8px; }
  .reward-card h3 { font-size: 16px; line-height: 1.2; margin-bottom: 6px; overflow-wrap: anywhere; }
  .reward-card small { font-size: 14px; line-height: 1.25; }
  .reward-description h2 { font-size: 28px; }
  .reward-stage .build-preview svg { height: 310px; }
  .reward-picker > .center-note { display: none; }
  .reward-actions { margin: 12px 0 0; }
  .reward-actions > .ghost { min-height: 40px; }

  .shop-picker-above { display: block; margin-bottom: 0; }
  .shop-catalog > .panel-heading, .shop-catalog > .shop-grid { display: none; }
  .shop-catalog > .bundle-card { margin-top: 0; }
  .workshop-stage { padding-top: 16px; padding-bottom: 16px; }
  .workshop-stage .heading-row .eyebrow, .workshop-stage .intro-copy { display: none; }
  .workshop-stage .heading-row h1 { margin-top: 0; }
  .workshop-stage .specimen { margin-top: 8px; margin-bottom: 0; }
  .workshop-stage .creature-label { margin-top: 18px; margin-bottom: 0; }
  .shell[data-screen="workshop"] { padding-bottom: calc(174px + var(--safe-bottom)); }
  .workshop-action .primary { min-height: 60px; padding-top: 8px; padding-bottom: 8px; font-size: 20px; line-height: 1.1; }
  .workshop-action .action-context { display: block; margin-top: 3px; font-size: 14px; line-height: 1.2; font-weight: 550; letter-spacing: 0; }
  .shell[data-screen="workshop"] .workshop-action .primary {
    position: fixed;
    z-index: 31;
    left: max(var(--gutter), var(--platform-left, 0px));
    right: max(var(--gutter), var(--platform-right, 0px));
    bottom: calc(88px + var(--safe-bottom));
    width: auto;
    box-shadow: 0 4px 0 #852c16, 0 0 0 8px var(--paper);
  }
  .shell:is([data-screen="prebattle"], [data-screen="battle"], [data-screen="reward"], [data-screen="result"]) .navbar { display: none; }
  .shell:is([data-screen="prebattle"], [data-screen="reward"], [data-screen="result"]) { padding-bottom: calc(110px + var(--safe-bottom)); }
  .shell[data-screen="battle"] { padding-bottom: calc(30px + var(--safe-bottom)); }
  .result-hero > .eyebrow { display: none; }
  .result-mark { width: 40px; height: 40px; border-radius: 12px; margin: 6px auto 12px; }
  .result-mark .icon { width: 25px; height: 25px; }
  .shell[data-screen="prebattle"] .battle-actions .primary,
  .shell[data-screen="reward"] .button-stack .primary,
  .shell[data-screen="result"] .result-detail > .button-stack > .primary {
    position: fixed;
    z-index: 31;
    bottom: calc(18px + var(--safe-bottom));
    left: max(var(--gutter), var(--platform-left, 0px));
    right: max(var(--gutter), var(--platform-right, 0px));
    width: auto;
    box-shadow: 0 4px 0 #852c16, 0 0 0 12px var(--paper);
  }
  .shell[data-screen="workshop"] .workshop-action .primary:disabled { box-shadow: 0 4px 0 #a0ae89, 0 0 0 8px var(--paper); }
  .shell[data-screen="prebattle"] .battle-actions .primary:disabled,
  .shell[data-screen="reward"] .button-stack .primary:disabled,
  .shell[data-screen="result"] .result-detail > .button-stack > .primary:disabled { box-shadow: 0 4px 0 #a0ae89, 0 0 0 12px var(--paper); }
}

/* Short, narrow phones show the entire assembly dock above the battle action. */
@media (max-width: 699px) and (max-height: 780px) {
  .workshop-stage .specimen { height: 286px; }
  .workshop-stage .specimen:before { width: min(100%, 280px); box-shadow: 0 0 0 1px #fff7d133, 0 6px 0 -2px #162b24; }
  .workshop-stage .hero-creature { height: 280px; }
  .workshop-stage .creature-label { display: none; }
  .mobile-slot-dock { margin-top: 8px; }
  .mobile-slot-dock button { grid-template-rows: auto 38px auto; padding: 6px 4px; }
  .dock-art { height: 38px; }
}

@media (min-width: 360px) and (max-width: 699px) and (min-height: 781px) {
  .mobile-slot-dock button { grid-template-rows: auto 49px auto; padding-top: 4px; padding-bottom: 4px; }
  .dock-art { height: 49px; }
}

/* Tablets get useful columns before the full desktop workbench. */
@media (min-width: 640px) and (max-width: 899px) {
  :root { --gutter: 28px; }
  .shell { max-width: 900px; }
  .main { padding-top: 28px; }
  .workshop-layout { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .workshop-stage { position: relative; }
  .workshop-stage, .workshop-controls { padding: 22px 16px; }
  .slot-grid { grid-template-columns: 1fr; }
  .slot { display: grid; grid-template-columns: 66px minmax(0, 1fr); column-gap: 12px; }
  .slot-top { grid-column: 2; align-self: end; }
  .slot-art { grid-column: 1; grid-row: 1 / 3; height: 63px; margin: 0; }
  .slot-name { grid-column: 2; text-align: left; margin-top: 4px; }
  .hero-creature { height: 380px; }
  .specimen { height: 395px; }
  .shop-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-card { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 12px; }
  .shop-art, .shop-art svg, svg.shop-art { height: 150px; min-height: 150px; }
  .detail-panel { padding: 0; }
  .build-preview { grid-template-columns: 1fr; text-align: center; }
  .versus-preview svg { height: 310px; }
  .versus-preview b { font-size: 21px; }
  .fighter { height: 335px; }
  .fighter svg { height: 325px; }
  .reward-card { grid-template-columns: 135px minmax(0, 1fr); padding: 22px; }
}

@media (min-width: 900px) {
  :root { font-size: 17px; --gutter: 30px; }
  body { padding: 0 20px; background: #e6e2d7; }
  .shell { padding-bottom: 36px; border-left: 1px solid #d1d3c3; border-right: 1px solid #d1d3c3; box-shadow: 0 20px 70px #27311d0b; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 96px; padding: 18px 30px; gap: 18px; }
  .brand { font-size: 20px; }
  .brand-mark { width: 52px; height: 52px; flex-basis: 52px; }
  .top-meta { grid-column: 3; }
  .navbar { position: absolute; top: calc(22px + var(--safe-top)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); display: flex; justify-content: center; gap: 4px; padding: 0; width: auto; border: 0; background: transparent; box-shadow: none; }
  .topbar > .navbar { position: static; transform: none; justify-self: center; }
  .nav-item { flex-direction: row; min-height: 48px; gap: 8px; padding: 12px 13px; border-radius: 7px; font-size: 14px; }
  .nav-item .icon { width: 22px; height: 22px; }
  .main { padding-top: 30px; padding-bottom: 28px; }
  .heading-row h1 { font-size: 48px; letter-spacing: -1.8px; }
  .intro-copy { font-size: 17px; }
  .page-head { margin-bottom: 30px; gap: 18px; }
  .page-head h1 { font-size: 44px; letter-spacing: -1.4px; }
  .page-head p { font-size: 17px; }
  .workshop-layout { grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr); gap: 24px; }
  .workshop-stage { padding: 30px 26px 26px; }
  .workshop-controls, .battle-preparation, .result-detail, .detail-panel, .battle-aside { padding: 28px 24px; }
  .specimen, .cosmetic-scene { height: 500px; margin-top: 18px; }
  .hero-creature { height: 485px; }
  .specimen:before, .cosmetic-scene:before { width: 430px; }
  .specimen:after, .cosmetic-scene:after { height: 29px; bottom: 10px; }
  .creature-label h2, .cosmetic-label h2 { font-size: 29px; }
  .creature-label p, .cosmetic-label p { font-size: 15px; }
  .slot-art { height: 94px; }
  .slot-name { font-size: 16px; }
  .stat-value { font-size: 29px; }
  .stat-name { font-size: 14px; }
  .stage-info strong { font-size: 20px; }
  .build-insight p { font-size: 16px; }
  .workshop-action .primary { min-height: 64px; font-size: 20px; }
  .workshop-extra { gap: 0; }
  .workshop-extra .ghost { flex-basis: 100%; }
  .parts-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 30px; }
  .parts-grid { gap: 18px; }
  .part-card { padding: 20px; }
  .part-card .part-preview { height: 200px; margin-top: 20px; }
  .part-card h3 { font-size: 24px; }
  .part-card small { font-size: 14px; }
  .detail-panel { position: sticky; top: 24px; }
  .detail-panel h2 { font-size: 34px; }
  .detail-panel > p { font-size: 17px; }
  .build-preview { padding: 20px; }
  .build-preview svg { height: 355px; }
  .build-preview p { font-size: 21px; }
  .prebattle-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; }
  .versus-preview { padding: 28px 18px; gap: 10px; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); }
  .versus-preview svg { height: 355px; width: 110%; margin: 18px -5%; }
  .versus-preview b { font-size: 21px; }
  .versus-preview span { font-size: 14px; }
  .versus-preview > i { font-size: 27px; }
  .enemy-plan { font-size: 15px; }
  .enemy-brief p { font-size: 17px; }
  .tactic-card { min-height: 88px; padding: 16px; grid-template-columns: 34px minmax(0, 1fr) minmax(110px, auto); }
  .tactic-card b { font-size: 19px; }
  .tactic-card small, .tactic-card > span { font-size: 15px; }
  .tactic-explanation { font-size: 16px; }
  .battle-layout { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 24px; }
  .battle-header h1 { font-size: 36px; }
  .round-badge { font-size: 16px; padding: 10px 15px; }
  .arena { padding: 25px 22px 20px; border-radius: 14px; }
  .arena:before { height: 355px; top: 130px; }
  .combatants { gap: 40px; }
  .fighter-name { font-size: 20px; min-height: 48px; }
  .hp-label { font-size: 15px; }
  .hp-track { height: 15px; }
  .fighter { height: 360px; }
  .fighter svg { height: 350px; width: calc(100% + 20px); }
  .status { font-size: 14px; }
  .charge-meter { min-height: 92px; }
  .charge-meter b { font-size: 15px; }
  .charge-meter small { font-size: 14px; }
  .combat-caption { font-size: 17px; }
  .vs { font-size: 29px; }
  .battle-log { max-height: 470px; font-size: 16px; }
  .result-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; }
  .result-showcase { padding: 30px; }
  .result-hero h1 { font-size: 51px; }
  .result-hero p { font-size: 17px; }
  .result-duo { height: 365px; }
  .result-duo > div { height: 355px; }
  .result-duo svg { height: 355px; }
  .result-duo .is-loser svg { height: 280px; }
  .result-facts { font-size: 17px; }
  .battle-analysis h2 { font-size: 32px; }
  .battle-analysis > p { font-size: 17px; }
  .damage-table > div { font-size: 16px; padding: 16px 0; }
  .reward-layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px; }
  .reward-stage { padding: 25px; }
  .reward-stage .build-preview svg { height: 395px; }
  .reward-description h2 { font-size: 35px; }
  .reward-description > p { font-size: 17px; }
  .reward-grid { grid-template-columns: 1fr; gap: 16px; }
  .reward-card { grid-template-columns: 105px minmax(0, 1fr); padding: 16px 20px; }
  .reward-art { height: 120px; }
  .reward-card h3 { font-size: 27px; }
  .reward-card small { font-size: 15px; }
  .reward-actions { margin-top: 26px; }
  .shop-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); gap: 26px; }
  .shop-stage { padding: 28px; position: sticky; top: 24px; }
  .shop-catalog { padding: 24px; }
  .shop-grid { gap: 16px; }
  .shop-card { padding: 16px; }
  .shop-art { min-height: 205px; }
  .shop-art svg, svg.shop-art { height: 210px; }
  .shop-card-info h3 { font-size: 23px; }
  .shop-card-info p { font-size: 15px; }
  .star-price { font-size: 17px; }
  .purchase-panel p { font-size: 17px; }
  .shop-trust { font-size: 15px; }
  .stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .stage-row { min-height: 102px; padding: 20px; }
  .stage-row.active { padding: 19px; }
  .stage-row strong { font-size: 20px; }
  .stage-row small { font-size: 15px; }
  .opponent-preview { height: 490px; }
  .opponent-preview .hero-creature { height: 470px; }
  .enemy-name { font-size: 32px; }
  .shell:is([data-screen="settings"], [data-screen="share"], [data-screen="challenge"]) .main { max-width: 820px; margin: 0 auto; }
  .trial-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
  .trial-creature { height: 395px; }
  .daily-goal, .friend-trial { padding: 28px; }
  .daily-goal h2 { font-size: 33px; }
  .goal-creature { height: 285px; }
  .trial-hero { padding: 34px; }
  .trial-hero h2 { font-size: 38px; }
  .loading h1 { font-size: 48px; }
}

/* Short desktop windows keep the rival and battle action before deeper detail. */
@media (min-width: 900px) and (max-height: 900px) {
  .topbar { min-height: 78px; padding-top: 13px; padding-bottom: 13px; }
  .navbar { top: calc(15px + var(--safe-top)); }
  .main { padding-top: 22px; }
  .workshop-stage { padding: 22px 24px; }
  .workshop-stage .specimen { height: 420px; margin-top: 10px; }
  .workshop-stage .hero-creature { height: 410px; }
  .workshop-stage .specimen:before { width: min(100%, 365px); }
  .workshop-stage .creature-label { margin-top: 8px; }
  .workshop-controls { display: flex; flex-direction: column; padding: 20px; }
  .workshop-controls > * { order: 4; }
  .workshop-controls .panel-heading { order: 1; margin-bottom: 14px; }
  .workshop-controls .slot-grid { order: 2; }
  .workshop-controls .slot { padding-top: 10px; padding-bottom: 10px; }
  .workshop-controls .slot-art { height: 80px; }
  .workshop-controls .stats { order: 3; margin: 18px 0; }
  .workshop-controls .stage-card { order: 5; padding-top: 12px; padding-bottom: 12px; }
  .workshop-controls .workshop-action { order: 6; }
  .workshop-controls .workshop-action .primary { min-height: 60px; }
  .workshop-controls .workshop-action .center-note { margin-top: 10px; }
  .workshop-controls .build-insights { order: 7; margin: 18px 0 0; }
  .workshop-controls .workshop-extra { order: 8; }
  .arena { padding-top: 20px; padding-bottom: 16px; }
  .arena:before { height: 280px; top: 122px; }
  .fighter { height: 290px; }
  .fighter svg { height: 280px; }
  .charge-meter { min-height: 64px; }
  .combat-moment { margin-top: 14px; }
}

/* At laptop height, the event remains on stage instead of falling below the fold. */
@media (min-width: 900px) and (max-height: 780px) {
  .shell[data-screen="battle"] .topbar { min-height: 66px; padding-top: 6px; padding-bottom: 6px; }
  .shell[data-screen="battle"] .brand-mark { width: 46px; height: 46px; flex-basis: 46px; }
  .shell[data-screen="battle"] .navbar { top: calc(9px + var(--safe-top)); }
  .shell[data-screen="battle"] .main { padding-top: 12px; }
  .battle-header { margin-bottom: 12px; }
  .round-badge { padding-top: 6px; padding-bottom: 6px; }
  .arena { padding-top: 18px; padding-bottom: 12px; }
  .arena:before { height: 238px; top: 118px; }
  .fighter { height: 240px; }
  .fighter svg { height: 232px; }
  .charge-meter { min-height: 36px; margin-top: 8px; padding-top: 8px; }
  .charge-meter small, .charge-meter.passive { display: none; }
  .combat-moment { min-height: 94px; margin-top: 12px; padding: 11px 14px; }
  .combat-moment-art svg { height: 60px; }
}

@media (min-width: 900px) and (min-height: 821px) and (max-height: 900px) {
  .workshop-stage .specimen { height: 500px; }
  .workshop-stage .hero-creature { height: 485px; }
  .workshop-stage .specimen:before { width: min(100%, 430px); }
}

/* On desktop the live event is the commentary column, leaving the whole ring to the fighters. */
@media (min-width: 900px) {
  .battle-layout { grid-template-columns: minmax(0, 1fr) 272px; grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 16px; }
  .battle-layout > .arena { display: contents; }
  .battle-layout > .arena:before, .battle-layout > .arena > .vs { display: none; }
  .battle-layout .combatants { grid-column: 1; grid-row: 1 / 3; align-self: start; gap: 30px; padding: 23px 22px 20px; border: 2px solid #172a28; border-radius: 14px; overflow: hidden; isolation: isolate; color: #fff7df; background: linear-gradient(145deg, #35514a, #182e2e 78%); box-shadow: 4px 4px 0 #122424; }
  .battle-layout .combatants:before { content: ""; position: absolute; inset: 119px -7% 96px; z-index: -1; border: 1px solid #fffbdf80; border-radius: 50%; background: radial-gradient(ellipse at 50% 25%, #fff2c3, #dad5a2 75%); box-shadow: 0 14px 0 #111f21a1, 0 20px 0 #91ab7245; }
  .battle-layout .combatants:after { content: "VS"; position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%) rotate(-8deg); color: #52624a; font-size: 28px; font-weight: 900; pointer-events: none; }
  .battle-layout .fighter { height: 380px; }
  .battle-layout .fighter svg { height: 370px; }
  .battle-layout .fighter:before { bottom: 11px; height: 17px; background: #253b3b55; }
  .battle-layout .charge-meter { min-height: 66px; }
  .battle-layout .combat-moment { grid-column: 2; grid-row: 1; align-self: start; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; margin: 0; padding: 18px; border: 1.5px solid #6f765b; border-top: 5px solid var(--moment-accent); border-radius: 9px; box-shadow: 3px 3px 0 #b4b49c; }
  .battle-layout .combat-moment-art { width: 70px; flex: 0 0 auto; justify-content: flex-start; }
  .battle-layout .combat-moment-art svg { width: 62px; height: 70px; }
  .battle-layout .combat-moment-art > .icon { width: 30px; height: 30px; }
  .battle-layout .combat-moment-copy strong { margin: 6px 0; font-size: 23px; }
  .battle-layout .combat-moment-copy p { font-size: 15px; line-height: 1.5; }
  .battle-layout .battle-aside { grid-column: 2; grid-row: 2; padding: 18px; border-color: #a4ab95; background: #fbf6e9; }
  .battle-layout .replay-tools { gap: 7px; margin-bottom: 18px; }
  .battle-layout .speed { padding: 10px; white-space: nowrap; font-size: 14px; }
  .battle-layout .replay-tools .ghost { padding-inline: 0; font-size: 14px; white-space: nowrap; }
  .battle-layout .battle-log { max-height: clamp(140px, calc(100dvh - 500px), 310px); font-size: 15px; }
  .battle-layout .battle-log p { padding: 11px 0; }
  .battle-layout .battle-aside > .center-note { padding-top: 12px; border-top: 1px solid #cfccb6; font-size: 14px; }
}

@media (min-width: 900px) and (max-height: 780px) {
  .battle-layout .combatants { padding: 18px 22px 16px; }
  .battle-layout .combatants:before { top: 110px; bottom: 68px; }
  .battle-layout .fighter-name { min-height: 42px; font-size: 18px; }
  .battle-layout .fighter { height: 326px; }
  .battle-layout .fighter svg { height: 316px; }
  .battle-layout .charge-meter { min-height: 32px; }
  .battle-layout .combat-moment { padding: 14px 16px; }
  .battle-layout .combat-moment-art svg { height: 58px; }
  .battle-layout .combat-moment-copy strong { font-size: 21px; }
  .battle-layout .battle-aside { padding: 16px; }
  .battle-layout .battle-log { max-height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.reduced-motion *, .reduced-motion *:before, .reduced-motion *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Keep the longest head name intact without shrinking mobile type. */
@media (max-width: 374px) {
  .parts-picker .parts-grid { gap: 3px; }
  .parts-picker .part-card[data-id="H03"] h3 { letter-spacing: -.6px; }
}

@media (min-width: 900px) and (max-height: 780px) {
  .workshop-stage .specimen { height: 380px; }
  .workshop-stage .hero-creature { height: 370px; }
  .workshop-controls .slot-art { height: 64px; }
  .workshop-controls .experiment-entry { margin: 8px 0; padding: 10px 14px; }
  .workshop-controls .experiment-entry-art svg { height: 52px; }
}