/* The 3D workshop: a quiet interface around a tangible, lit specimen. */
:root {
  color-scheme: dark;
  color: #f2f1e9;
  background: #0b1018;
  --paper: #111822;
  --panel: #1a2432;
  --ink: #f2f1e9;
  --muted: #aebbd0;
  --line: #344255;
  --orange: #e5f266;
  --green: #9ed4ac;
  --stage: #18222f;
  --head: #32324a;
  --body: #3c352a;
  --legs: #263c4b;
  --edge: #4a586c;
  --accent: #e5f266;
  --dim: #7b8ca4;
}
body { background: #0b1018; color: var(--ink); }
.shell { background: var(--paper); border-color: #273244; box-shadow: none; }
.topbar { background: #111822; border-bottom: 1px solid #2b3647; }
.brand { letter-spacing: -.55px; }
.brand-mark { filter: saturate(.7); }
.top-meta .icon-btn { border-color: #354255; }
.icon-btn, .back { color: #d6e0ec; border: 1px solid #3b4960; border-radius: 12px; background: #1e2939; box-shadow: inset 0 1px 0 #ffffff08; }
.icon-btn:hover, .back:hover { background: #2b394c; }
.navbar { background: #131c29f5; border-top: 1px solid #344255; backdrop-filter: blur(16px); }
.nav-item { color: #a8b6ca; border-radius: 10px; font-weight: 650; }
.nav-item.active { color: #f3f5dc; background: #394233; }
.nav-item:hover { color: #fff; background: #273448; }
.nav-item.active:after { content: ""; position: absolute; bottom: 2px; width: 20px; height: 3px; border-radius: 3px; background: var(--accent); }
.eyebrow, .insight-label, .section-title { color: #aabbce; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
h1, h2, h3 { color: #f4f1e7; }
.intro-copy, .page-head p, .panel-heading > p, .panel-heading > span, .section-heading > span { color: var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline-color: var(--accent); }

/* Canvas dimensions replace the old SVG-only rules throughout the screen system. */
.viewport-3d { position: relative; display: block; min-width: 0; width: 100%; overflow: hidden; isolation: isolate; touch-action: pan-y; }
.viewport-3d > canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }
.model-interactive { cursor: grab; }
.model-interactive:active { cursor: grabbing; }
.model-hint { position: absolute; z-index: 2; bottom: 13px; left: 50%; transform: translateX(-50%); padding: 5px 10px; border: 1px solid #8fa4b62e; border-radius: 20px; color: #b9c9d8; background: #12202cbf; font-size: 14px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.model-loading { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; padding: 24px; color: #b5c7d9; background: #182330; font-size: 15px; text-align: center; }
.model-loading[hidden] { display: none; }
.model-ready > .model-loading { display: none; }
.model-unavailable > .model-loading { display: grid; }
.viewport-3d.creature-art, .viewport-3d.part-art { filter: none; }
.viewport-3d.hero-creature { height: 100%; max-width: none; overflow: hidden; }
.viewport-3d.slot-art { height: 96px; }
.viewport-3d.dock-art { height: 48px; }
.viewport-3d.part-preview { height: 160px; }
.viewport-3d.ability-icon { width: 60px; height: 65px; flex: 0 0 60px; }
.viewport-3d.reward-art { height: 138px; }
.viewport-3d.suggestion-art { width: 76px; height: 100px; flex: 0 0 76px; }
.viewport-3d.trial-creature { height: 340px; }
.viewport-3d.goal-creature { height: 270px; }
.viewport-3d.moment-part { width: 60px; height: 72px; flex: 0 0 60px; }
.viewport-3d.moment-part + .viewport-3d { margin-left: -12px; }
.viewport-3d .render-fallback, .viewport-3d .webgl-fallback { display: grid; place-items: center; min-height: 100%; padding: 24px; color: var(--muted); text-align: center; font-size: 15px; }

/* The floor, shadow and backdrop belong to the 3D scene, not decorative CSS discs. */
.specimen:before, .specimen:after, .cosmetic-scene:before, .cosmetic-scene:after,
.challenge-card-art:before, .arena:before, .battle-layout .combatants:before,
.battle-layout .combatants:after, .fighter:before { content: none; display: none; }
.workshop-stage, .shop-stage, .result-showcase {
  color: var(--ink); background: #182330; border: 1px solid #384658; border-radius: 22px;
  box-shadow: inset 0 1px 0 #ffffff08, 0 18px 48px #0408102b;
}
.workshop-stage { padding: 24px 24px 20px; overflow: hidden; }
.workshop-stage .eyebrow { color: #b7c6d4; }
.workshop-stage .heading-row h1 { color: #f4f1e7; font-size: 40px; letter-spacing: -1.4px; }
.workshop-stage .intro-copy { color: #abbacb; font-size: 16px; }
.workshop-stage .specimen { height: 440px; margin: 12px -24px 0; }
.workshop-stage .hero-creature { height: 100%; }
.workshop-stage .creature-label { margin: 6px 0 0; }
.workshop-stage .creature-label h2 { font-size: 24px; }
.workshop-stage .creature-label p { color: #acbbce; font-size: 14px; margin-top: 6px; }
.workshop-controls { padding: 8px 0; }
.workshop-controls .panel-heading { margin-bottom: 16px; }
.workshop-controls .panel-heading h2 { font-size: 26px; }
.workshop-controls .panel-heading > .eyebrow { color: #9db0c8; }
.slot, .mobile-slot-dock button, .part-card, .reward-card {
  color: #e9edf3; background: linear-gradient(150deg, #ffffff07, transparent 75%), var(--part-color, #253140);
  border: 1px solid #4a5669; border-radius: 12px; box-shadow: inset 0 1px 0 #ffffff09;
}
.slot { padding: 12px 7px 13px; }
.slot-top { color: #b9c6d8; }
.slot-top .icon { color: #dce8a0; }
.slot-name { font-weight: 700; }
.slot:hover, .mobile-slot-dock button:hover, .part-card:hover, .reward-card:hover { border-color: #a7b88e; box-shadow: inset 0 1px 0 #ffffff10; }
.slot:hover { transform: translateY(-2px); }
.mobile-slot-dock button { color: #e9edf3; grid-template-rows: auto 48px auto; border-color: #526178; border-radius: 10px; }
.dock-label { color: #bcc9d9; }
.dock-label .icon { color: var(--accent); }
.dock-name { color: #f0f1e9; }
.stats { margin: 22px 0; padding: 0; }
.stat-value { font-weight: 750; letter-spacing: -.7px; }
.stat:nth-child(1) .icon { color: #eea292; }
.stat:nth-child(2) .icon { color: #ecce85; }
.stat:nth-child(3) .icon { color: #9dcbae; }
.stat:nth-child(4) .icon { color: #b5a8e7; }
.stat-name { color: #aebbd0; }
.stat-delta { color: #b9dc9c; }
.stat-delta[data-direction="down"] { color: #f0a190; }
.build-insight { border: 1px solid #3a485d; border-left: 3px solid #a6b878; border-radius: 12px; background: #1e2a39; }
.build-insight p { color: #bac6d5; }
.stage-number { border: 1px solid #657148; color: #eff5cf; background: #303b2d; border-radius: 10px; }
.stage-info strong { color: #f2f1e9; }
.stage-info span { color: #aebbd0; }
.stage-reward { color: #cbdc9f; }
.stage-card { padding: 16px 0; }
.stage-card:hover .stage-info strong { color: var(--accent); }
.style-entry { color: #c7d3e4; border-color: #46566c; border-radius: 10px; }
.style-entry:hover { background: #243244; }
.plan-summary { color: #cbd4e1; }

/* One bright action. Secondary decisions stay deliberately quieter. */
.primary {
  color: #20270d; background: var(--accent); border: 1px solid #f2ff8c; border-radius: 12px;
  box-shadow: inset 0 -3px 0 #a7b536, 0 7px 22px #b5d52d12; font-weight: 800;
}
.primary:hover { color: #1a200b; background: #f0ff7b; }
.primary:disabled { color: #9daaac; background: #303d43; border-color: #425257; box-shadow: none; }
.secondary { color: #e2e9f2; background: #243246; border: 1px solid #4a5b73; border-radius: 12px; font-weight: 700; }
.secondary:hover { color: #fff; background: #304157; }
.ghost { color: #c4d294; }
.ghost:hover { color: #edf6c1; }
.tip, .center-note { color: #adbbd0; }
.callout, .reward-notice { background: #28352b; border: 1px solid #4b6452; color: #dce8d6; border-radius: 12px; }
.reward-notice { background: #393426; border-color: #75643f; color: #eedcad; }
.error { background: #412b30; border-color: #8c535a; color: #ffd1ce; }
.toast { color: #eef5dc; background: #30433c; border: 1px solid #68877c; box-shadow: 0 12px 32px #0008; }
.battle-preparation, .result-detail, .shop-catalog, .detail-panel, .battle-aside,
.reward-stage, .album-preview { border: 1px solid #3c4c63; border-radius: 18px; background: #1a2432; box-shadow: inset 0 1px 0 #ffffff07; }

/* The parts rack and complete build stay in the same lighting family. */
.progress-line { color: #c2d1df; }
.progress-track { background: #354456; border-radius: 8px; }
.progress-track i { background: #b8d277; }
.tabs { border-color: #405168; }
.tab { color: #b4c2d4; }
.tab.active { border-color: #697590; color: #f4f2e7; }
.part-card small, .part-card h3, .reward-card h3, .reward-card small { color: #e0e7ef; }
.part-card small { color: #b4c1d1; }
.part-card.selected, .reward-card.selected { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 22px #c7e24110; background-image: linear-gradient(145deg, #e5f2660c, transparent 75%); }
.part-card.locked { background: #252c39; border-color: #414e62; }
.part-card.locked .part-preview { filter: saturate(.6); opacity: .7; }
.part-badge { color: #e2edba; background: #354332; border-color: #66784e; }
.detail-panel > p, .reward-description > p, .part-ability p, .reward-card p { color: #bdc9d9; }
.build-preview, .detail-panel .build-preview, .album-preview .build-preview {
  background: #182330; border: 1px solid #3b4a60; border-radius: 14px; box-shadow: none; padding: 0;
}
.build-preview > .viewport-3d { height: 335px; }
.build-preview > div:not(.viewport-3d) { padding: 0 18px 16px; }
.build-preview p { color: #ecf0e5; }
.bonus-line { color: #c0d894; }
.ability-tag { color: #dfe6ef; border-color: #59667a; }
.part-combo { background: #273a32; border-color: #567b65; border-radius: 12px; }
.part-combo > span { color: #b8d9a0; }
.part-combo p { color: #c0d1c5; }
.swap-note { color: #aebbd0; }
.reward-card.selected:after { color: var(--accent); }

/* Battle preparation and journal use the same restrained control surface. */
.versus-preview { border: 1px solid #3c4b60; border-radius: 20px; background: #192331; }
.versus-preview .viewport-3d { height: 260px; }
.versus-preview span { color: #acbbce; }
.versus-preview b { color: #edf0e5; }
.versus-preview > i { color: #c4d49d; transform: none; }
.enemy-plan, .enemy-brief p, .abilities li, .opponent-hint p, .tactic-explanation { color: #b7c4d6; }
.enemy-plan b, .abilities li strong { color: #e7eee4; }
.opponent-hint { border-color: #4f6359; }
.opponent-hint > .viewport-3d { flex: 0 0 64px; width: 64px; height: 74px; }
.tactic-card { color: #edf1e7; border-color: #4b5b71; border-left-color: #849872; border-radius: 11px; background: #263141; }
.tactic-card[data-id="rush"] { border-left-color: #d99472; background: #3b2f2e; }
.tactic-card[data-id="guard"] { border-left-color: #77b3cf; background: #24384a; }
.tactic-card.selected { border-color: #bfce74; outline: 2px solid var(--accent); box-shadow: none; }
.tactic-card.selected:after { color: var(--accent); }
.tactic-card > .icon { color: #b2cd8d; }
.tactic-card[data-id="rush"] > .icon { color: #f0aa88; }
.tactic-card[data-id="guard"] > .icon { color: #93c9e3; }
.tactic-card small { color: #bbdba5; }
.tactic-card > span { color: #ecb095; }
.shield-note { color: #bad1ac; }
.round-badge { background: #303b2d; border: 1px solid #63764c; border-radius: 8px; color: #e5edc4; }
.arena { color: #f0f0e7; border: 1px solid #3b4d62; border-radius: 20px; background: #14202b; box-shadow: none; }
.battle-layout .combatants { position: relative; padding: 20px; gap: 24px; border: 1px solid #384c62; border-radius: 20px; background: #14202b; box-shadow: none; }
.arena-3d.viewport-3d { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.combatant { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; pointer-events: none; }
.fighter-name { min-height: 24px; color: #f0f2e8; text-shadow: 0 1px 8px #030a11; }
.hp-label { margin: 7px 0 5px; color: #d7e2eb; text-shadow: 0 1px 5px #030a11; }
.hp-track { border-color: #778b8a80; border-radius: 8px; background: #142632d9; }
.hp-track i { background: #b9d879; border-radius: 8px; }
.combatant.enemy .hp-track i { background: #e3a084; }
.fighter { flex: 1 1 0; min-height: 0; height: auto; background: transparent; }
.fighter.attacking, .fighter.hit, .fighter.dodging, .fighter.dead { animation: none; transform: none; opacity: 1; }
.fighter > .creature-art { display: none; }
.floating-effects { top: 42%; }
.statuses { min-height: 28px; }
.status { color: #dce8ef; border: 1px solid #6289a466; background: #223749dc; border-radius: 6px; }
.status.burn { color: #ffd2a8; border-color: #c8884f; background: #583622e6; }
.charge-meter { min-height: 25px; margin-top: 6px; padding-top: 6px; color: #dfebd0; border-color: #7e978455; }
.charge-meter small { display: none; }
.charge-meter b, .charge-meter small { text-shadow: 0 1px 6px #07111b; }
.charge-pips i { background: #42605a; }
.charge-pips i.filled { background: #cee58b; }
.vs { display: none; }
.combat-moment, .battle-layout .combat-moment {
  color: var(--ink); border-color: #47586e; border-top-color: var(--moment-accent); background: #26313d;
  border-radius: 14px; box-shadow: none;
}
.combat-moment[data-kind="attack"], .combat-moment[data-kind="combo"], .combat-moment[data-kind="burn"] { background: #392d29; }
.combat-moment[data-kind="shield"], .combat-moment[data-kind="slow"], .combat-moment[data-kind="dodge"] { background: #223644; }
.combat-moment[data-kind="heal"], .combat-moment[data-kind="immune"] { background: #26382e; }
.combat-moment-copy small { color: #bdc9d2; }
.combat-moment-copy p { color: #ccd5df; }
.battle-layout .combat-moment-art { width: auto; min-width: 64px; }
.battle-layout .combat-moment-art .viewport-3d { width: 66px; height: 72px; flex-basis: 66px; }
.battle-layout .battle-aside { color: #cad5e3; border-color: #3a4b61; background: #1a2432; border-radius: 16px; }
.battle-layout .battle-aside > .center-note { border-color: #3a4b61; }
.speed { color: #d9e5f1; background: #29394c; border: 1px solid #51667e; border-radius: 9px; }
.battle-log { color: #b9c6d8; }

/* Collection, album, challenge and results share the new material palette. */
.result-showcase, .result-layout[data-outcome="win"] .result-showcase { background: #1e2b2e; }
.result-layout[data-outcome="loss"] .result-showcase { background: #302a31; }
.result-mark { color: #dceaa8; border: 1px solid #738157; background: #39482f; box-shadow: none; }
.result-hero p, .result-highlight p, .battle-analysis > p { color: #bac9d6; }
.result-duo .viewport-3d { width: 100%; height: 280px; }
.result-duo .is-loser .viewport-3d { height: 235px; }
.result-highlight { background: #233642; border: 1px solid #465c6b; border-left: 3px solid #bfd789; border-radius: 12px; }
.result-facts { color: #bdcdb5; border-color: #526354; }
.damage-table .icon, .damage-table .damage-table-head { color: #adbfca; }
.next-experiment { background: #26372f; border-color: #526d50; border-radius: 13px; }
.next-experiment small, .next-experiment span > span { color: #bfd0b7; }
.experiment-entry, .album-summary { color: #e8eddc; background: #2a352c; border: 1px solid #54664a; border-radius: 13px; box-shadow: none; }
.experiment-entry:hover { background: #354230; }
.experiment-entry-copy small, .experiment-entry-copy > span { color: #bdcdb2; }
.experiment-entry-art .viewport-3d { width: 66px; height: 76px; }
.album-card { border-color: #465469; background: #1d2837; border-radius: 12px; }
.album-card:hover { background: #293648; }
.album-card.selected { color: #f0f2e9; border-color: var(--accent); background: #2b383b; box-shadow: none; }
.album-card-art, .album-card[data-status="completed"] .album-card-art { background: transparent; }
.album-card-art .viewport-3d { flex: 0 0 68px; width: 68px; height: 76px; }
.album-card-art .viewport-3d + .viewport-3d { margin-left: -32px; }
.album-state { color: #afbdd0; }
.album-card[data-status="completed"] .album-state { color: #bedc9d; }
.album-preview .build-preview { height: 330px; }
.album-preview .build-preview > .viewport-3d { height: 100%; }
.album-ingredient { border-color: #546378; border-radius: 10px; }
.album-ingredient .viewport-3d { width: 48px; height: 58px; }
.album-hint { border-left-color: #99af69; background: #2b362c; color: #d1dcca; }
.album-proof { border-color: #668463; background: #293b32; color: #dce8d6; border-radius: 13px; }
.album-proof h3 { color: #f0f3e1; }
.shop-stage, .shop-bundle { background: #1e2b39; }
.shop-stage .cosmetic-scene { border-radius: 14px; overflow: hidden; }
.skin-choice { color: #e1e9f1; border-color: #4a5970; background: #253343; box-shadow: none; border-radius: 10px; }
.skin-choice[aria-pressed="true"] { border-color: var(--accent); background: #354338; box-shadow: inset 0 -2px 0 var(--accent); }
.skin-choice small, .shop-preview-status { color: #b9c9da; }
.skin-swatch { border-color: #8090a0; box-shadow: inset 0 0 0 3px #f3f0e02b; }
.shop-price strong { color: #e8ecb4; }
.shop-price small { color: #b4c0ce; }
.shop-owned-label, .shop-owned, .shop-badge { color: #d5e8bf; border-color: #6a815c; background: #334830; }
.shop-comparison { border: 1px solid #4a5b72; background: #111c29; border-radius: 10px; }
.shop-comparison button { color: #bcc9d9; border-radius: 7px; }
.shop-comparison button[aria-pressed="true"] { color: #eef1d5; border-color: #687548; background: #364330; box-shadow: none; }
.shop-comparison-current, .shop-finish-notes, .shop-coverage span, .purchase-panel p, .shop-trust { color: #bdc9d9; }
.shop-coverage > div { border-color: #49596c; }
.shop-unavailable { border-color: #667486; background: #26313e; color: #bac9da; }
.shop-bundle { border: 1px solid #4d5d70; border-radius: 18px; box-shadow: none; }
.shop-bundle-look { color: #f1e9ef; background: #493342; border: 1px solid #7c5b75; box-shadow: none; border-radius: 12px; }
.shop-bundle-look[data-skin="midnight"] { color: #e0e9f2; background: #263446; border-color: #586d88; }
.shop-bundle-art > .viewport-3d { height: 220px; }
.shop-bundle-caption, .shop-bundle-status { color: #bdc9d8; }
.shop-fair-play { background: #27372f; border-color: #57735c; border-radius: 15px; }
.shop-fair-play p { color: #c1d0c2; }
.preview-label { color: #d6e9b7; background: #2e4033e8; border-color: #61774f; }
.goal-progress { background: #24352d; }
.goal-progress strong { color: #c7e1b3; }
.purchase-heading, .bundle-card p { color: #c4d1d7; }
.bundle-card { color: #dfebd0; background: #343b2b; border-color: #65704b; }
.star-price { color: #eaeab5; background: #454b2b; }
.shop-card, .shop-card.owned { border-color: #536777; background: #2b3948; box-shadow: none; }
.shop-card.selected, .shop-card.owned.selected, .shop-card[aria-pressed="true"] { background: #3b4431; border-color: var(--accent); }
.shop-art { background: #15212d; }
.shop-art > .viewport-3d, .viewport-3d.shop-art { height: 210px; }
.shop-card-info p { color: #bac8d5; }
.daily-goal, .friend-trial, .trial-hero { border-color: #435970; background: #213141; border-radius: 18px; }
.daily-goal > strong { color: #d4e6ba; }
.daily-goal p, .friend-trial p, .trial-hero p { color: #becbdc; }
.trial-hero > .icon { color: #c6dc92; }
.opponent-preview { background: #182432; border-color: #40596f; border-radius: 20px; }
.enemy-tag { color: #c2d0df; }
.stage-row { color: #e3eadf; border-color: #405467; background: #21303e; border-radius: 14px; }
.stage-row.active { border-color: #b4c878; background: #2b3b34; }
.stage-row small { color: #bbcad5; }
.setting-row small, details, footer.version { color: #b6c4d6; }
summary { color: #e0e9de; }
.toggle:before { background: #425369; }
.toggle:after { background: #f0f3e6; box-shadow: 0 2px 6px #02081355; }
.toggle.on:before { background: #9bae63; }
.share-url { color: #d3dfef; background: #0e1b28; border-color: #50687e; }
.loading p { color: #b8c9d9; }
.skeleton { background: #29394c; }
.skeleton i { background: #b8cf70; }
.empty-art { color: #b7cc91; }
.challenge-card { background: #1a2939; border: 1px solid #445b72; border-radius: 22px; box-shadow: none; }
.challenge-card-top, .challenge-card-tactic { color: #bac9d9; }
.challenge-card-art { height: 380px; margin-inline: -22px; }
.challenge-card-art .challenge-creature { width: 100%; max-width: none; }
.challenge-card-parts > div { color: #e5eaf0; border: 1px solid #526078; border-radius: 11px; background: var(--head); }
.challenge-card-parts > div[data-slot="body"] { background: var(--body); }
.challenge-card-parts > div[data-slot="legs"] { background: var(--legs); }
.challenge-card-parts .viewport-3d { height: 66px; }
.challenge-card-feature { color: #d6e2eb; border: 1px solid #506070; border-radius: 13px; background: #283846; }
.challenge-steps li:before { color: #e1edbd; background: #35422f; border: 1px solid #657948; }
.challenge-message { background: #1c2b3a; border: 1px solid #4a6176; }
.challenge-local-note { color: #ecdcba; border-left-color: #b8a05c; background: #38362c; }

@media (min-width: 900px) {
  body { padding-inline: 20px; }
  .shell { width: min(100%, 1400px); }
  .navbar { background: #1a2432; border: 1px solid #354256; border-radius: 13px; padding: 3px; top: calc(17px + var(--safe-top)); }
  .nav-item { min-height: 42px; padding: 10px 14px; }
  .nav-item.active:after { display: none; }
  .topbar { min-height: 88px; }
  .main { padding-top: 24px; }
  .workshop-layout { grid-template-columns: minmax(0, 1.38fr) minmax(390px, 1fr); gap: 26px; }
  .workshop-stage { position: sticky; top: 24px; padding: 26px 26px 20px; }
  .workshop-stage .specimen { margin-inline: -26px; height: 450px; }
  .workshop-stage .hero-creature { height: 100%; }
  .workshop-stage .heading-row h1 { font-size: 44px; }
  .workshop-controls { display: flex; flex-direction: column; padding: 8px 0; }
  .workshop-controls > .panel-heading { order: 1; }
  .workshop-controls > .slot-grid { order: 2; }
  .workshop-controls > .stats { order: 3; }
  .workshop-controls > .stage-card { order: 4; }
  .workshop-controls > .workshop-action { order: 5; }
  .workshop-controls > .build-insights { order: 7; }
  .workshop-controls > .experiment-entry { order: 8; }
  .workshop-controls > .workshop-extra { order: 9; }
  .workshop-controls .viewport-3d.slot-art { height: 102px; }
  .parts-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .part-card .viewport-3d.part-preview { height: 200px; }
  .build-preview > .viewport-3d { height: 380px; }
  .reward-stage .build-preview > .viewport-3d { height: 410px; }
  .versus-preview .viewport-3d { height: 360px; }
  .viewport-3d.trial-creature { height: 395px; }
  .viewport-3d.goal-creature { height: 285px; }
  .battle-layout { grid-template-columns: minmax(0, 1fr) 286px; gap: 16px 22px; }
  .battle-layout .combatants { padding: 22px; gap: 40px; height: 540px; min-height: 540px; }
  .battle-layout .fighter { height: auto; min-height: 0; flex-basis: 0; }
  .battle-layout .fighter-name { min-height: 24px; font-size: 18px; }
  .battle-layout .charge-meter { min-height: 26px; }
  .result-duo .viewport-3d { height: 355px; }
  .result-duo .is-loser .viewport-3d { height: 285px; }
  .shop-bundle-art > .viewport-3d { height: 230px; }
  .shell:is([data-screen="share"], [data-screen="challenge"]) .main { max-width: 1180px; }
}

@media (min-width: 900px) and (max-height: 780px) {
  .topbar { min-height: 74px; padding-block: 10px; }
  .navbar { top: calc(12px + var(--safe-top)); }
  .main { padding-top: 18px; }
  .workshop-stage { padding: 20px 22px 18px; }
  .workshop-stage .heading-row h1 { font-size: 37px; }
  .workshop-stage .intro-copy { margin-top: 7px; }
  .workshop-stage .specimen { margin: 4px -22px 0; height: 368px; }
  .workshop-stage .hero-creature { height: 100%; }
  .workshop-stage .creature-label { margin-top: 2px; }
  .workshop-stage .creature-label h2 { font-size: 23px; }
  .workshop-controls { display: flex; flex-direction: column; padding: 0; }
  .workshop-controls .panel-heading { margin-bottom: 12px; }
  .workshop-controls .panel-heading > .eyebrow { display: none; }
  .workshop-controls .viewport-3d.slot-art { height: 76px; }
  .workshop-controls .stats { margin: 18px 0; }
  .workshop-controls .stage-card { order: 4; }
  .workshop-controls .workshop-action { order: 5; }
  .workshop-controls .build-insights { order: 7; }
  .workshop-controls .experiment-entry { order: 8; margin: 14px 0; }
  .workshop-controls .workshop-extra { order: 9; }
  .battle-layout .combatants { height: 494px; min-height: 494px; padding: 18px; }
  .battle-layout .charge-meter { min-height: 26px; }
}

@media (max-width: 899px) {
  .shell { border: 0; }
  .main { padding-top: 16px; }
  .topbar { min-height: 64px; }
  .brand-mark { height: 42px; width: 42px; flex-basis: 42px; }
  .workshop-stage { padding: 16px 16px 14px; border-radius: 19px; }
  .workshop-stage .heading-row h1 { font-size: 29px; letter-spacing: -.8px; }
  .workshop-stage .specimen { height: 302px; margin: 4px -16px 0; }
  .workshop-stage .hero-creature { height: 100%; }
  .workshop-stage .creature-label { margin: 14px 0 0; }
  .workshop-stage .creature-label h2 { font-size: 21px; }
  .mobile-slot-dock { gap: 7px; margin-top: 4px; }
  .mobile-slot-dock button { padding: 7px 3px; }
  .mobile-slot-dock .dock-name { font-size: 14px; font-weight: 650; letter-spacing: -.45px; overflow-wrap: normal; word-break: normal; }
  .workshop-controls { padding: 0; }
  .workshop-layout { gap: 18px; }
  .workshop-action .primary { border-radius: 13px; }
  .shell[data-screen="workshop"] .workshop-action .primary,
  .shell[data-screen="prebattle"] .battle-actions .primary,
  .shell[data-screen="reward"] .button-stack .primary,
  .shell[data-screen="result"] .result-detail > .button-stack > .primary,
  .challenge-actions > .primary { box-shadow: inset 0 -3px 0 #a7b536, 0 0 0 8px var(--paper), 0 -12px 22px #111822; }
  .shell[data-screen="workshop"] .workshop-action .primary:disabled,
  .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 0 0 8px var(--paper); }
  .parts-picker { border-bottom: 1px solid #44566b; background: #111822f5; backdrop-filter: blur(16px); }
  .parts-picker .part-card { box-shadow: none; border-radius: 8px; }
  .parts-picker .part-card .viewport-3d.part-preview { height: 59px; }
  .detail-panel .build-preview { border-radius: 16px 16px 0 0; border-bottom-color: #35495d; padding: 0; }
  .detail-panel .build-preview > .viewport-3d { height: 302px; }
  .detail-panel .build-preview > div:not(.viewport-3d) { padding: 0 16px 16px; }
  .reward-art.viewport-3d { height: 90px; }
  .reward-card { padding-inline: 3px; }
  .reward-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -.45px; overflow-wrap: normal; word-break: normal; }
  .reward-stage .build-preview > .viewport-3d { height: 320px; }
  .arena { padding: 0; border: 0; background: transparent; overflow: visible; }
  .battle-layout .combatants { padding: 16px 12px 12px; gap: 16px; height: 418px; min-height: 418px; }
  .fighter-name { font-size: 15px; min-height: 36px; line-height: 1.2; }
  .fighter { min-height: 0; height: auto; flex-basis: 0; }
  .hp-label { font-size: 14px; margin-top: 4px; line-height: 1.3; }
  .charge-meter { margin-top: 6px; padding-top: 6px; }
  .combat-moment, .battle-layout .combat-moment { margin-top: 12px; min-height: 106px; border-left: 3px solid var(--moment-accent); }
  .battle-layout .combat-moment-art { width: 62px; }
  .battle-layout .combat-moment-art .viewport-3d { width: 58px; flex-basis: 58px; height: 70px; }
  .battle-layout .combat-moment-art:has(.viewport-3d + .viewport-3d) { width: 82px; }
  .battle-layout .combat-moment-art .viewport-3d + .viewport-3d { margin-left: -30px; }
  .battle-layout .battle-aside { padding: 16px; }
  .versus-preview { padding: 16px 8px; }
  .versus-preview .viewport-3d { height: 245px; }
  .album-card-art .viewport-3d { width: 54px; height: 66px; flex-basis: 54px; }
  .album-preview .build-preview { height: 285px; padding: 0; }
  .album-ingredient .viewport-3d { width: 40px; height: 50px; }
  .shop-bundle-art > .viewport-3d { height: 182px; }
  .challenge-card-art { height: 322px; margin-inline: -16px; }
  .challenge-card-parts .viewport-3d { height: 60px; }
}

@media (max-width: 599px) and (max-height: 780px) {
  .workshop-stage .specimen { height: 242px; }
  .workshop-stage .hero-creature { height: 100%; }
  .workshop-stage .creature-label { display: none; }
  .mobile-slot-dock button { grid-template-rows: auto 43px auto; padding: 6px 3px; }
  .viewport-3d.dock-art { height: 43px; }
  .battle-layout .combatants { height: 375px; min-height: 375px; }
  .detail-panel .build-preview > .viewport-3d { height: 274px; }
}

@media (max-width: 359px) {
  .workshop-stage { padding-inline: 12px; }
  .workshop-stage .heading-row h1 { font-size: 27px; }
  .workshop-stage .specimen { margin-inline: -12px; }
  .mobile-slot-dock { gap: 5px; }
  .dock-label, .dock-name { font-size: 14px; }
  .mobile-slot-dock .dock-name { letter-spacing: -.7px; }
  .reward-grid { gap: 6px; }
  .reward-card h3 { font-size: 14px; letter-spacing: -.55px; }
  .dock-label .icon { width: 12px; height: 12px; }
  .parts-picker .part-card .viewport-3d.part-preview { height: 56px; }
  .battle-layout .combatants { gap: 12px; padding-inline: 10px; }
  .hp-label { flex-direction: row; }
  .fighter-name { font-size: 14px; }
  .combat-moment-copy strong { font-size: 18px; }
  .versus-preview .viewport-3d { height: 215px; }
  .shop-bundle-art > .viewport-3d { height: 165px; }
  .challenge-card-art { height: 290px; }
}