/* Long-term growth screens. The map and original sprite layout remain in styles.css. */
.growth-app { max-width:1320px; }
.growth-app .resource-bar { grid-template-columns:1.25fr 1.4fr 1fr 1.05fr; }
.growth-app .round-stat>strong { display:block; font:700 16px var(--body); letter-spacing:.2px; margin:7px 0; }
.growth-app .round-stat>small { color:#9fb1a3; font-size:8px; display:block; margin-top:5px; }
.growth-app .round-stat .growth-meter { max-width:150px; }
.growth-app .resource small#discovered-value { margin:5px 0 0; padding:0; display:block; font-size:9px; }
.growth-meter { height:4px; display:block; background:#8fb29e20; border-radius:10px; overflow:hidden; }
.growth-meter>i { display:block; height:100%; background:#b8ca88; border-radius:10px; transition:width .4s; }
.main-tabs { display:flex; align-items:center; gap:8px; border-bottom:1px solid #48616a; padding-bottom:11px; margin-bottom:18px; }
.main-tabs>button { display:flex; align-items:center; gap:7px; border:1px solid transparent; background:none; color:#adc0ba; border-radius:7px; padding:10px 14px; font-size:11px; font-weight:700; white-space:nowrap; }
.main-tabs .icon { width:17px; height:17px; }
.main-tabs>button:hover { background:#ffffff07; color:#f5f1dc; }
.main-tabs>button.active { color:#203c42; background:#e9ebd5; border-color:#d5dfc5; }
.main-tabs>button>span { background:#bc713d; color:#fff2d5; border-radius:10px; min-width:17px; padding:2px 4px; font:9px var(--display); }
.save-status { margin-left:auto; font-size:9px; color:#92ac9d; white-space:nowrap; }
.save-status.error { color:#ffb791; }
.save-warning { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 16px; margin-bottom:12px; border:1px solid #ad7152; border-radius:9px; background:#593c2d; color:#ffe3bb; font-size:11px; line-height:1.8; }
.save-warning button { background:#efbb88; border:0; border-radius:5px; color:#493423; font-size:11px; padding:7px 12px; white-space:nowrap; }
.patrol-heading { display:flex; justify-content:space-between; align-items:center; margin:0 2px 13px; gap:10px; }
.patrol-heading>div { display:flex; align-items:center; gap:10px; }
.patrol-heading strong { font-size:14px; letter-spacing:.5px; }
.patrol-heading #patrol-subtitle { font-size:9px; color:#97b0a9; }
.patrol-heading .text-button { padding:4px 0; font-size:9px; color:#c9ccb3; text-decoration:none; }
.growth-app .character-card { padding-bottom:0; }
.growth-app .profile-art { height:108px; }
.growth-app .profile-sprite { width:117px; }
.growth-app .character-name h2 { font-size:16px; }
.growth-app #equipment-summary { font-size:8px; letter-spacing:0; line-height:1.6; }
.payment-balance { border-top:1px solid #b1c4ab59; display:grid; grid-template-columns:1fr 1fr; padding:10px 0; gap:8px; }
.payment-balance>span { color:#718570; font-size:8px; text-align:center; }
.payment-balance b { display:block; color:#375b49; font:600 12px var(--display); margin-top:4px; }
.growth-app .upgrade-button { min-height:62px; }
.growth-app .upgrade-copy strong { display:flex; align-items:baseline; justify-content:space-between; gap:4px; }
.upgrade-copy strong em { color:#92a997; font:normal 8px var(--display); }
.growth-app .upgrade-copy small { font-size:8px; line-height:1.6; }
.growth-app .upgrade-cost { font-size:13px; }
.growth-app .upgrade-note { font-size:8px; }
.growth-app .intro-card h1 { font-size:clamp(23px,2.3vw,32px); }
.growth-app .intro-card { max-width:70%; }
.growth-app .intro-note { font-size:8px; line-height:1.6; }
.offline-ready { white-space:nowrap; color:#8db39c; font-size:8px; }
.goal-card { margin:16px 0 0; width:100%; display:flex; align-items:center; gap:15px; padding:15px 18px; text-align:left; border:1px solid #607962; border-radius:10px; background:#3c564338; color:#e2e8cd; transition:background .2s; }
.goal-card:hover { background:#53684b4d; }
.goal-icon { width:43px; height:43px; flex-shrink:0; border:1px solid #a2b88346; border-radius:9px; display:grid; place-items:center; color:#c8d39e; background:#83916516; }
.goal-icon .icon { width:27px; height:27px; }
.goal-copy { flex:1; min-width:0; }
.goal-copy small { display:block; color:#a1b299; font-size:9px; margin-bottom:5px; }
.goal-copy strong { display:block; font-size:13px; letter-spacing:.2px; margin-bottom:5px; }
.goal-copy>span { display:block; font-size:9px; color:#b6c0a1; line-height:1.7; }
.goal-progress { width:100px; color:#c7d78e; text-align:right; }
.goal-progress b { font:500 23px var(--display); display:block; margin-bottom:7px; }
.goal-card>.icon { width:17px; margin-left:5px; color:#9fb181; }
.growth-app .receipt-strip { margin-top:12px; }
.growth-app .receipt-strip>.text-button { color:#b6c7b9; font-size:10px; padding:4px; text-decoration:none; white-space:nowrap; }
.growth-app .receipt-item { padding:8px 10px; }
.receipt-item>.icon { width:19px; height:19px; color:#a8c6ae; }
.view-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:24px 0; }
.view-heading .eyebrow { font:500 9px var(--display); letter-spacing:2px; color:#d7b57b; }
.view-heading h1 { font-size:24px; font-weight:700; letter-spacing:1px; margin:11px 0; line-height:1.6; }
.view-heading p { color:#a7b9b0; font-size:11px; line-height:1.9; margin:0; }
.view-number { font:500 40px var(--display); color:#e4d3ac; text-align:right; white-space:nowrap; }
.view-number small { font:10px var(--body); color:#99b2a6; margin-left:3px; }
.materials { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:20px; }
.material { display:flex; align-items:center; gap:7px; background:#243e47; border:1px solid #3d5961; border-radius:8px; padding:12px 10px; }
.material>.icon,.material>span>.icon { width:19px; height:19px; }
.material>span { font-size:9px; color:#b4c9c0; white-space:nowrap; }
.material strong { margin-left:auto; font:500 19px var(--display); }
.equipment-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 22px; }
.equipment-slot { border:1px dashed #597078; border-radius:9px; padding:15px; position:relative; background:#1e363b; min-height:105px; }
.equipment-slot .eyebrow { color:#98b2a8; font-size:9px; margin-bottom:12px; }
.equipment-slot>div { display:flex; align-items:center; gap:9px; color:#8eaa9f; }
.equipment-slot>div strong { font-size:11px; }
.equipment-slot>small { color:#657f7a; font-size:8px; display:block; margin:9px 0 0; }
.equipment-slot.is-equipped { border-style:solid; border-color:#9aaa6b; background:#3c514033; }
.equipment-slot.is-equipped>div { color:#e6d99e; }
.equipment-slot .text-button { position:absolute; right:12px; top:7px; padding:6px; font-size:9px; color:#c5bf93; }
.recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.recipe-card { border:1px solid #425d61; border-radius:11px; padding:20px; background:#203942; position:relative; display:flex; flex-direction:column; }
.recipe-card.pinned { border-color:#b99556; }
.recipe-card.owned { background:#31493c; border-color:#687e55; }
.recipe-top { display:flex; align-items:center; gap:12px; }
.recipe-art { width:52px; height:52px; display:grid; place-items:center; border-radius:11px; background:#657d651f; color:#cad3a4; border:1px solid #7b936737; }
.recipe-art .icon { width:32px; height:32px; stroke-width:1.25; }
.recipe-top>span:nth-child(2) { font-size:9px; color:#9fb5a7; }
.pin-button { margin-left:auto; align-self:flex-start; border:0; background:none; color:#5b7776; padding:0; }
.pin-button .icon { width:17px; height:17px; }
.pin-button[aria-pressed=true] { color:#eac278; }
.recipe-card h2 { font-size:15px; line-height:1.5; margin:18px 0 10px; }
.recipe-effect { color:#d9ca9b; font-size:10px; line-height:1.9; min-height:38px; margin:0 0 9px; }
.recipe-flavor { color:#8ea79b; font-size:9px; line-height:1.8; margin:0 0 15px; min-height:32px; }
.recipe-costs { display:grid; gap:7px; margin-top:auto; margin-bottom:13px; }
.recipe-costs>span { display:flex; justify-content:space-between; gap:8px; color:#849f99; font-size:10px; }
.recipe-costs b { color:#b5c2b1; font:11px var(--display); }
.recipe-costs i { color:#6c8985; font:normal 9px var(--display); }
.recipe-costs .enough,.recipe-costs .enough b { color:#cadb94; }
.recipe-actions { margin-top:16px; }
.secondary-button { border:1px solid #b5905b; background:#d89b5740; color:#f3d3a3; border-radius:7px; font-size:11px; font-weight:700; padding:11px 13px; cursor:pointer; width:100%; transition:background .15s,border-color .15s; }
.secondary-button:hover:not(:disabled) { background:#bc854863; border-color:#edc17d; }
.secondary-button:disabled { border-color:#4b6563; background:#526d6412; color:#728b83; }
.secondary-button.equipped { color:#cce4a4; border-color:#adc678; background:#8ca05727; }
.crafted-stamp { margin:auto 0 15px; text-align:center; color:#b5c89a; font-size:11px; letter-spacing:4px; border:1px dashed #97aa7466; padding:21px 10px; border-radius:5px; }
.display-note { display:block; text-align:center; color:#b6c991; font-size:10px; padding:12px; }
.panel-footnote { font-size:9px; color:#78968c; line-height:1.9; margin:18px 0 10px; }
.mastery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.mastery-card { padding:18px; border-radius:9px; border:1px solid #476558; background:#2c463c; }
.mastery-card>div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mastery-card strong { font-size:12px; }
.mastery-card>div>span { font:500 14px var(--display); color:#cedc9c; }
.mastery-card p { color:#a5b79c; font-size:9px; margin:12px 0; line-height:1.6; }
.mastery-card>small { font-size:9px; color:#b7c7a6; display:block; margin-top:8px; }
.collection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.collection-card { border:1px solid #607166; border-radius:10px; padding:18px; background:#ececdc; color:#304c47; position:relative; display:flex; flex-direction:column; }
.collection-card.undiscovered { background:#1c333d; border-style:dashed; border-color:#365059; color:#6d8b89; }
.entry-number { font:8px var(--display); letter-spacing:1.5px; color:#8c9b82; }
.entry-art { width:70px; height:70px; display:grid; place-items:center; margin:18px auto 10px; background:#82967815; border-radius:50%; color:#68886d; }
.entry-art .icon { width:43px; height:43px; stroke-width:1.2; }
.undiscovered .entry-art { color:#3a575c; background:#6b927009; }
.collection-card h2 { font-size:12px; line-height:1.6; margin:10px 0; }
.collection-card>p { font-size:10px; line-height:1.8; color:#778773; min-height:38px; }
.undiscovered>p { color:#627e7b; }
.collection-card blockquote { margin:8px 0 15px; font-size:10px; font-weight:600; line-height:1.8; color:#43674f; }
.entry-drops { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:auto; }
.entry-drops>span { font-size:8px; color:#7c866e; }
.collection-card footer { border-top:1px solid #b5c6a770; margin-top:13px; padding-top:11px; font:11px var(--display); color:#658566; }
.undiscovered footer { color:#617d7b; border-color:#375752; }
.unknown-note { margin:10px 0 auto; color:#476863; text-align:center; letter-spacing:5px; }
.district-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.district-card { border:1px solid #516865; border-radius:12px; background:#203c42; overflow:hidden; display:grid; grid-template-columns:130px 1fr; }
.district-card.locked { border-color:#354e59; }
.district-art { background:var(--district-color); color:#415d54; padding:18px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:15px; position:relative; }
.district-art>span { align-self:flex-start; font:500 24px var(--display); opacity:.45; }
.district-art>.icon { width:54px; height:54px; stroke-width:1; }
.district-art>small { font-size:9px; text-align:center; }
.locked .district-art { filter:saturate(.4) brightness(.65); }
.district-copy { padding:20px; }
.district-copy h2 { font-size:16px; line-height:1.5; margin:0 0 9px; }
.district-copy>p { color:#99b1a8; font-size:10px; line-height:1.8; margin:0 0 15px; }
.district-prices { font:500 13px var(--display); color:#d8c99d; margin-bottom:9px; }
.district-copy>small { color:#829d93; font-size:8px; display:block; line-height:1.8; min-height:29px; }
.district-copy>.secondary-button { margin-top:12px; }
.challenge-heading { margin-top:28px; margin-bottom:15px; }
.challenge-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.challenge-card { border:1px solid #79674d; border-radius:10px; background:#5a483125; padding:19px; display:flex; flex-direction:column; }
.challenge-card .eyebrow { font-size:9px; color:#c1a677; margin-bottom:12px; }
.challenge-card h2 { font-size:14px; margin:0 0 11px; line-height:1.6; }
.challenge-card>p { font-size:10px; color:#a69e88; line-height:1.8; }
.challenge-numbers { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:15px 0 9px; }
.challenge-numbers>strong { font:500 27px var(--display); color:#efc58b; }
.challenge-numbers>span { font:12px var(--display); color:#cfc3a1; white-space:nowrap; }
.challenge-card .challenge-reward { color:#c2b189; min-height:45px; }
.challenge-card .secondary-button { margin-top:auto; font-size:10px; }
.reassurance { font-size:10px; color:#91ad9b; display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:20px; line-height:1.9; }
.reassurance>.icon { width:16px; height:16px; }
.reassurance>span { display:block; margin-left:auto; font-size:9px; color:#b1b296; }
.challenge-strip { display:flex; align-items:center; gap:17px; border:1px solid #c28658; border-radius:10px; background:#7d503831; padding:12px 18px; margin-bottom:14px; }
.challenge-strip>div:first-child { flex:1; }
.challenge-strip>div>span { font-size:11px; color:#e1b989; display:block; margin-bottom:6px; }
.challenge-strip>div>strong { display:block; font:500 24px var(--display); color:#ffcd96; }
.challenge-timer { text-align:center; padding:0 12px; }
.challenge-timer>small { font-size:8px; color:#b29b78; display:block; margin-top:4px; }
.challenge-strip>.secondary-button { width:auto; font-size:10px; padding:9px 11px; }
.room-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr); gap:22px; }
.room-scene { height:435px; background:#d9dec5; border-radius:14px; border:2px solid #789184; position:relative; overflow:hidden; color:#36584e; box-shadow:inset 0 -100px 0 #bda991; }
.room-scene:after { content:""; position:absolute; bottom:100px; height:7px; background:#8d9074; width:100%; left:0; }
.room-window { position:absolute; width:94px; height:110px; left:30px; top:35px; border:5px solid #fbf4d9; background:#9bbaa8; box-shadow:0 4px 0 #919e7c59; display:flex; overflow:hidden; }
.room-window:before { content:""; position:absolute; height:100%; width:4px; left:42px; background:#faf1d8; z-index:2; }
.room-window:after { content:""; position:absolute; width:100%; height:4px; top:50%; background:#faf1d8; z-index:2; }
.room-window i { display:block; width:25px; margin:50px 3px 0; height:100%; background:#507c724a; transform:skewY(-8deg); }
.room-window i:nth-child(2) { margin-top:35px; background:#c5ce9477; }
.room-poster { position:absolute; top:36px; left:151px; padding:11px 12px; background:#f6e8b6; color:#a1754c; font:8px var(--display); transform:rotate(-5deg); box-shadow:2px 3px 0 #8b966844; }
.room-poster>b { display:block; font:700 18px var(--display); letter-spacing:2px; margin-top:5px; line-height:1.1; }
.room-shelf { position:absolute; right:27px; top:32px; width:42%; height:185px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,1fr); background:#708376; border:6px solid #73866e; gap:6px; z-index:3; }
.shelf-item { background:#c5cfb5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#8fa38a; box-shadow:inset 2px 3px 0 #243f3826; }
.shelf-item>.icon { width:29px; height:29px; stroke-width:1.2; opacity:.4; }
.shelf-item>span { font-size:6px; line-height:1.4; text-align:center; }
.shelf-item.filled { background:#e1d5a9; color:#667650; }
.shelf-item.filled>.icon { opacity:1; filter:drop-shadow(1px 2px 0 #5b554627); }
.room-desk { position:absolute; left:25px; bottom:85px; width:50%; height:15px; border-radius:4px; background:#827951; z-index:6; box-shadow:0 5px 0 #675d40; }
.room-desk:before,.room-desk:after { content:""; position:absolute; top:15px; height:60px; width:9px; background:#686b54; }
.room-desk:before { left:12px; }.room-desk:after { right:12px; }
.room-computer { position:absolute; left:22px; bottom:17px; width:80%; display:flex; flex-direction:column; align-items:center; color:#9faa8d; }
.room-computer>.icon { width:98px; height:82px; stroke-width:1; stroke-dasharray:4 3; }
.room-computer>span { font-size:8px; text-align:center; margin-top:3px; }
.room-computer.built { color:#4c6e62; }
.room-computer.built>.icon { stroke-dasharray:none; fill:#84ae8f70; }
.desk-tools { position:absolute; bottom:17px; right:2px; transform:rotate(17deg); color:#70836b; }
.room-sprite { position:absolute; width:124px; bottom:32px; right:27%; z-index:8; }
.room-rug { position:absolute; bottom:20px; right:25px; height:58px; width:50%; background:#b9c4a287; border:2px dashed #647b6959; border-radius:50%; }
.room-caption { position:absolute; right:25px; bottom:132px; font-size:10px; line-height:1.8; width:38%; text-align:center; color:#67755a; }
.life-record { border:1px solid #4d665b; background:#2b41384d; border-radius:11px; padding:25px; }
.life-record>.eyebrow { color:#acc198; letter-spacing:1.5px; }
.life-record h2 { font-size:22px; margin:15px 0 20px; }
.life-record>p { font-size:10px; color:#a9bd9c; line-height:1.9; }
.life-record dl { margin:25px 0; }
.life-record dl>div { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #4d66584d; padding:11px 0; gap:8px; }
.life-record dt { font-size:10px; color:#94a991; }.life-record dd { font:13px var(--display); margin:0; color:#c4d4ac; }
.life-record .life-note { font-size:9px; color:#8fa891; margin:0 0 18px; }
.notice-detail { background:#e5ebd6; border:1px solid #c5d4b4; border-radius:8px; color:#4a6b51; font-size:12px; line-height:1.9; padding:15px; margin:20px 0; text-align:left; }
.notice-detail:empty { display:none; }
.save-dialog { width:min(740px,calc(100% - 30px)); padding:24px 28px; }
.save-dialog h2 { margin:12px 0; }
.save-dialog p { font-size:12px; line-height:1.7; color:#6a796d; margin:12px 0; }
.save-dialog label { display:block; font-size:12px; color:#4e6c5b; font-weight:700; margin:14px 0 8px; }
.save-dialog textarea { width:100%; height:100px; resize:none; font:11px monospace; color:#355347; background:#eef0e4; border:1px solid #a2b596; border-radius:7px; padding:12px; }
.save-dialog textarea:focus { outline:2px solid #a0b67b; outline-offset:2px; }
.save-actions { display:flex; flex-wrap:wrap; gap:10px; }
.save-actions>.secondary-button { flex:1; width:auto; }
.save-dialog .secondary-button { color:#466451; border-color:#9aaf82; background:#d2deba; }
.save-dialog .secondary-button:hover:not(:disabled) { background:#c8d8ae; }
.save-dialog .text-button { color:#587851; }
.save-management-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:14px; border-top:1px solid #c9d1bc; padding-top:8px; }
.save-management-links .text-button { padding:6px 0; }
.save-dialog .reset-link { color:#9b5838; }
.save-dialog .save-note { font-size:11px; margin:8px 0 0; }
.save-dialog .reset-backup-note { padding:12px 14px; background:#e9eddc; border:1px solid #becbac; border-radius:7px; }
.save-dialog #reset-confirm-text { width:100%; border:1px solid #a2b596; border-radius:7px; padding:11px 12px; background:#fffdf5; color:#355347; font:inherit; }
.save-dialog #reset-confirm-text:focus { outline:2px solid #a0b67b; outline-offset:2px; }
.save-dialog #reset-feedback { min-height:21px; color:#9b5838; }
.save-dialog .reset-confirm-button { flex:2; width:auto; background:#b46542; border-color:#9b5838; color:#fff9ee; }
.save-dialog .reset-confirm-button:hover:not(:disabled) { background:#a75937; }
.save-dialog #save-feedback { font-size:11px; line-height:1.8; min-height:21px; }
.save-dialog #confirm-import { margin-top:12px; }
.import-preview { background:#f1deb9; border:1px solid #c3a277; color:#806241; border-radius:7px; padding:13px; font-size:12px; line-height:1.9; }
.import-preview strong { display:block; margin-bottom:6px; }
.enemy.challenge-enemy .enemy-card { border:2px solid #ad6c4b; background:#ffedce; }
.growth-app .enemy-art { background:#6d907b; }
.growth-app .enemy-art>.icon { width:27px; height:27px; color:#e1e6be; stroke-width:1.5; }
.growth-app .enemy-time>i { background:#98b477; }
.growth-app .enemy.urgent .enemy-time>i { background:#cf9e64; }
.growth-app .enemy-name { max-height:25px; }
.growth-app .enemy.double-stock { width:100px; max-width:13%; }
.growth-app .enemy.double-stock .enemy-card { padding-left:4px; padding-right:4px; }
.enemy-drop { position:absolute; top:-10px; left:-5px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:#e4cd88; color:#596d52; border:1px solid #8d966a; font-size:9px; }
.growth-app .effect.purchase { font-size:10px; }
@media(min-width:1000px) and (max-height:950px) {
  .app-shell.growth-app { max-width:1120px; padding:0 22px; }
  .growth-app .masthead { min-height:76px; }
  .growth-app .game-layout { grid-template-columns:minmax(0,1fr) 235px; }
  .growth-app .profile-art { height:106px; }.growth-app .profile-sprite { width:116px; }
  .growth-app .resource-bar { min-height:85px; }
}
@media(max-width:1100px) {
  .materials { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .material { padding:11px 15px; }.material>span { font-size:10px; }
  .recipe-card { padding:17px; }.recipe-card h2 { font-size:13px; }
  .collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .district-card { grid-template-columns:100px 1fr; }.district-copy { padding:17px; }
  .room-shelf { right:18px; width:44%; }.room-poster { left:134px; }.room-window { left:20px; }
  .room-layout { gap:16px; }.life-record { padding:20px; }.room-caption { font-size:8px; }
  .growth-app .offline-ready { display:none; }
}
@media(max-width:850px) {
  .main-tabs { gap:2px; }.main-tabs>button { padding:9px 10px; font-size:10px; gap:5px; }.save-status { font-size:8px; }
  .patrol-heading #patrol-subtitle { display:none; }.patrol-heading strong { font-size:12px; }
  .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .view-heading h1 { font-size:20px; }.view-heading p { font-size:10px; }.view-number { font-size:33px; }
  .room-layout { grid-template-columns:1fr; }.life-record { display:block; }.life-record dl { display:grid; grid-template-columns:1fr 1fr; gap:0 25px; }
  .room-scene { height:400px; }.room-shelf { width:43%; right:40px; top:35px; }.room-poster { left:155px; }.room-window { left:30px; }
  .challenge-grid { gap:10px; }.challenge-card { padding:14px; }.challenge-numbers>strong { font-size:23px; }
  .district-grid { gap:12px; }.district-copy h2 { font-size:14px; }.district-copy { padding:14px; }.district-card { grid-template-columns:80px 1fr; }
  .district-art { padding:14px 9px; }.district-art>.icon { width:39px; }.district-art>small { font-size:8px; }
}
@media(max-width:700px) {
  .growth-app .masthead { min-height:80px; }.growth-app .header-tools { gap:5px; }.growth-app .header-tools>.tool-button { width:29px; height:29px; }
  .growth-app .brand strong span { font-size:8px; letter-spacing:1px; }.growth-app .brand small { font-size:6px; }
  .growth-app .resource-bar { grid-template-columns:1.15fr 1.1fr .88fr 1fr; margin-bottom:12px; }
  .growth-app .round-stat { padding:11px 8px; }.growth-app .round-stat>strong { font-size:10px; line-height:1.5; margin:3px 0; }
  .growth-app .round-stat>small { font-size:6px; margin-top:5px; line-height:1.6; }
  .growth-app .resource .eyebrow { font-size:6px; white-space:nowrap; }.growth-app .resource { padding:11px 7px; }
  .growth-app .resource strong { font-size:18px; }.growth-app .resource small#discovered-value { font-size:7px; }
  .main-tabs { gap:1px; padding-bottom:9px; margin-bottom:13px; justify-content:space-between; position:relative; }
  .main-tabs>button { flex-direction:column; gap:5px; font-size:8px; padding:8px 10px; flex:1; position:relative; }
  .main-tabs .icon { width:17px; height:17px; }.main-tabs>button>span { position:absolute; right:3px; top:2px; font-size:7px; min-width:12px; }
  .save-status { display:none; }.patrol-heading { margin-bottom:10px; }.patrol-heading>div { gap:7px; }.patrol-heading strong { font-size:11px; }.patrol-heading .text-button { font-size:8px; }
  .growth-app .profile-art { height:90px; }.growth-app .profile-sprite { width:100px; }.growth-app .character-name h2 { font-size:12px; }
  .growth-app .character-name #equipment-summary { display:block; font-size:7px; }
  .growth-app .character-quote { display:none; }.payment-balance { padding:8px 0; margin-top:7px; grid-template-columns:1fr; gap:4px; }
  .payment-balance>span { display:flex; gap:5px; align-items:baseline; justify-content:space-between; font-size:7px; }.payment-balance b { font-size:9px; margin:0; }
  .growth-app .upgrade-button { min-height:81px; }.growth-app .upgrade-copy strong { display:block; font-size:9px; }.growth-app .upgrade-copy strong em { font-size:7px; margin-left:4px; }
  .growth-app .upgrade-copy small { font-size:7px; white-space:normal; }.growth-app .upgrade-cost { font-size:13px; }.growth-app .upgrade-note { font-size:7px; line-height:1.7; }
  .growth-app .section-heading h2 { font-size:9px; }.growth-app .section-heading>span { font-size:6px; }
  .growth-app .intro-card h1 { font-size:24px; }.growth-app .intro-note { font-size:6px; }.growth-app .intro-card .primary-button { font-size:10px; padding:9px; }
  .goal-card { padding:12px; gap:10px; margin-top:13px; }.goal-icon { width:35px; height:35px; }.goal-icon .icon { width:23px; }
  .goal-copy small { font-size:7px; margin-bottom:4px; }.goal-copy strong { font-size:11px; margin-bottom:4px; }.goal-copy>span { font-size:7px; }
  .goal-progress { width:48px; }.goal-progress b { font-size:18px; }.goal-card>.icon { width:13px; margin-left:0; }
  .growth-app .receipt-strip>.text-button { font-size:8px; }.growth-app .receipt-item { padding:7px; }.growth-app .receipt-item strong { font-size:7px; }
  .view-heading { margin:18px 0; gap:12px; }.view-heading h1 { font-size:19px; letter-spacing:.3px; margin:9px 0; }.view-heading p { font-size:9px; }.view-heading .eyebrow { font-size:7px; letter-spacing:1px; }
  .view-number { font-size:27px; }.view-number small { display:block; font-size:8px; margin:4px 0 0; }
  .materials { gap:6px; margin-bottom:14px; }.material { padding:9px 7px; gap:5px; }.material>span { font-size:7px; }.material strong { font-size:17px; }.material>span>.icon { width:15px; height:15px; }
  .equipment-slots { gap:6px; margin-bottom:17px; }.equipment-slot { padding:11px 9px; min-height:98px; }.equipment-slot .eyebrow { font-size:7px; margin-bottom:12px; }
  .equipment-slot>div { gap:6px; }.equipment-slot>div strong { font-size:8px; line-height:1.7; }.equipment-slot>div .icon { width:17px; height:17px; }.equipment-slot>small { font-size:6px; line-height:1.6; }
  .equipment-slot .text-button { top:4px; right:4px; font-size:7px; padding:4px; }
  .recipe-grid { gap:10px; }.recipe-card { padding:14px 12px; }.recipe-top { gap:7px; }.recipe-art { width:38px; height:38px; border-radius:8px; }.recipe-art .icon { width:25px; height:25px; }
  .recipe-top>span:nth-child(2) { font-size:7px; }.pin-button .icon { width:14px; height:14px; }.recipe-card h2 { font-size:12px; margin:13px 0 9px; }
  .recipe-effect { font-size:8px; min-height:46px; margin-bottom:6px; }.recipe-flavor { font-size:8px; min-height:38px; margin-bottom:13px; }
  .recipe-costs>span { font-size:8px; }.recipe-costs b { font-size:10px; }.recipe-costs i { font-size:8px; }.secondary-button { font-size:9px; padding:10px 7px; }
  .recipe-actions { margin-top:12px; }.crafted-stamp { padding:21px 6px; font-size:9px; letter-spacing:2px; }.panel-footnote { font-size:8px; }
  .mastery-grid { gap:7px; margin-bottom:16px; }.mastery-card { padding:12px 9px; }.mastery-card>div { align-items:flex-start; gap:5px; }.mastery-card strong { font-size:9px; line-height:1.7; }
  .mastery-card>div>span { font-size:11px; white-space:nowrap; }.mastery-card p { font-size:7px; min-height:33px; margin:10px 0; }.mastery-card>small { font-size:7px; line-height:1.6; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.collection-card { padding:14px; }.entry-art { width:59px; height:59px; margin:13px auto 8px; }.entry-art .icon { width:36px; height:36px; }
  .entry-number { font-size:7px; }.collection-card h2 { font-size:11px; }.collection-card>p { font-size:9px; min-height:45px; }.collection-card blockquote { font-size:9px; }.entry-drops>span { font-size:7px; }.collection-card footer { font-size:10px; }
  .district-grid { grid-template-columns:1fr; gap:12px; }.district-card { grid-template-columns:100px 1fr; }.district-copy { padding:17px; }.district-copy h2 { font-size:15px; }
  .district-copy>p { font-size:9px; margin-bottom:10px; }.district-prices { font-size:12px; }.district-copy>small { font-size:8px; min-height:0; }.district-art { padding:15px; }.district-art>.icon { width:47px; height:47px; }
  .challenge-grid { grid-template-columns:1fr; }.challenge-card { padding:18px; }.challenge-card .eyebrow { font-size:8px; }.challenge-card h2 { font-size:14px; }.challenge-card>p { font-size:9px; }
  .challenge-numbers { margin:8px 0; }.challenge-numbers>strong { font-size:25px; }.challenge-card .challenge-reward { min-height:0; }.challenge-card .secondary-button { margin-top:10px; }
  .reassurance { font-size:9px; gap:6px; }.reassurance>span { margin-left:0; font-size:8px; }
  .challenge-strip { padding:10px 11px; gap:8px; }.challenge-strip>div>span { font-size:9px; }.challenge-strip>div>strong { font-size:19px; }.challenge-timer { padding:0 5px; }.challenge-timer>small { font-size:7px; }.challenge-strip>.secondary-button { font-size:8px; padding:8px; }
  .room-scene { height:360px; }.room-window { width:65px; height:85px; top:30px; left:20px; border-width:4px; }.room-window:before { left:28px; width:3px; }
  .room-poster { left:103px; top:33px; font-size:6px; padding:8px; }.room-poster>b { font-size:12px; letter-spacing:1px; }
  .room-shelf { right:18px; top:137px; width:47%; height:140px; border-width:4px; gap:4px; }.shelf-item>.icon { width:20px; height:20px; }.shelf-item>span { font-size:5px; }
  .room-desk { width:39%; left:17px; bottom:100px; }.room-computer { left:10px; width:80%; }.room-computer>.icon { width:67px; height:58px; }.room-computer>span { font-size:6px; }
  .room-sprite { width:98px; bottom:17px; right:30%; }.room-caption { right:14px; bottom:auto; top:36px; width:40%; font-size:8px; }.room-rug { width:58%; right:12px; }
  .life-record { padding:20px; }.life-record h2 { font-size:21px; }.life-record dl { gap:0 15px; }.life-record dt { font-size:8px; }.life-record dd { font-size:11px; }
  .save-warning { font-size:9px; padding:10px 12px; gap:10px; }.save-warning button { font-size:9px; padding:6px 9px; }.save-dialog .save-actions { gap:7px; }
  .save-dialog textarea { font-size:10px; }.save-dialog .save-actions>.secondary-button { font-size:10px; }.notice-detail { font-size:11px; padding:13px; }
}
@media(max-width:390px) {
  .growth-app .brand strong { font-size:12px; }.growth-app .brand strong span { font-size:7px; }.growth-app .brand-mark { width:31px; height:34px; }
  .main-tabs>button { padding:8px 6px; font-size:7px; }.growth-app .round-stat>strong { font-size:9px; }.growth-app .resource strong { font-size:16px; }
  .growth-app .intro-card h1 { font-size:20px; }.growth-app .intro-card p { font-size:8px; }.growth-app .intro-card .primary-button { font-size:9px; }
  .material>span { font-size:6px; }.material strong { font-size:15px; }.material { gap:4px; }.view-heading h1 { font-size:17px; }
}
/* Keep the workshop readable at touch widths instead of shrinking its labels. */
@media(max-width:520px) {
  .growth-app .resource-bar { grid-template-columns:1fr 1fr; gap:0; }
  .growth-app .round-stat, .growth-app .resource { padding:12px; min-height:84px; }
  .growth-app .round-stat>strong { font-size:12px; }
  .growth-app .round-stat>small, .growth-app .resource .eyebrow { font-size:9px; }
  .growth-app .resource strong { font-size:23px; }
  .growth-app .resource small#discovered-value { font-size:9px; }
  .growth-app .money>small { font-size:9px; }
  .main-tabs>button { font-size:9px; padding:10px 5px; }
  .view-heading p, .panel-footnote { font-size:11px; line-height:1.9; }
  .materials { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .material>span { font-size:10px; }.material strong { font-size:19px; }
  .equipment-slots { grid-template-columns:1fr; gap:8px; }
  .equipment-slot { min-height:0; padding:13px; }.equipment-slot .eyebrow { font-size:9px; margin-bottom:7px; }
  .equipment-slot>div strong { font-size:12px; }.equipment-slot>small { font-size:10px; }.equipment-slot .text-button { font-size:11px; padding:9px; }
  .recipe-grid { grid-template-columns:1fr; gap:14px; }.recipe-card { padding:20px; }
  .recipe-top>span:nth-child(2), .recipe-costs i { font-size:11px; }
  .recipe-card h2 { font-size:17px; }.recipe-effect,.recipe-flavor { font-size:12px; min-height:0; line-height:1.9; }
  .recipe-costs>span { font-size:12px; }.recipe-costs b { font-size:14px; }.secondary-button { font-size:12px; min-height:42px; }
  .mastery-grid { grid-template-columns:1fr; }.mastery-card strong { font-size:12px; }.mastery-card p { font-size:11px; min-height:0; }.mastery-card>small { font-size:10px; }
  .collection-card>p,.collection-card blockquote { font-size:11px; }.collection-card h2 { font-size:13px; }.entry-drops>span { font-size:9px; }
  .district-copy>p,.challenge-card>p { font-size:11px; }.district-copy>small { font-size:10px; }
  .save-warning { font-size:11px; }.save-dialog label,.save-dialog p { font-size:12px; }
}

/* Current ability values and equipment details use the character card's paper palette. */
.ability-status { border-top:1px solid #a7b89466; padding:15px 0 12px; text-align:left; }
.ability-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ability-heading h3,.equipment-totals h3 { font-size:12px; color:#375746; font-weight:700; margin:0; }
.ability-heading>span { color:#5a7044; background:#d4dfb9; border-radius:4px; padding:3px 6px; font-size:9px; }
.ability-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ability-values>div { min-width:0; }
.ability-values>div>span { display:block; font-size:10px; color:#6b8066; margin-bottom:7px; }
.ability-values b { display:block; min-height:48px; font:600 16px var(--display); color:#2e5549; line-height:1.5; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.ability-values small { display:block; font-size:9px; color:#6a7e60; line-height:1.6; margin-top:4px; }
.ability-values em { display:block; min-height:32px; font-style:normal; font-size:10px; font-weight:700; color:#617542; line-height:1.6; margin-top:2px; }
.ability-context { font-size:9px; line-height:1.8; color:#7b8063; margin:11px 0 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.equipment-totals { border-top:1px solid #afbd9766; padding-top:13px; }
.equipment-totals h3 { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
.equipment-totals h3 small { font-size:9px; font-weight:400; color:#7f896d; }
.modifier-list { padding:0; margin:0; }
.modifier-list>div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px; }
.modifier-list dt { margin:0; flex:1; min-width:0; font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
.modifier-list dd { margin:0; flex-shrink:0; font-size:11px; line-height:1.8; text-align:right; font-weight:700; }
.ability-status .modifier-list dt { color:#61755b; }
.ability-status .benefit { color:#4c713d; }.ability-status .drawback { color:#a35d3a; }.ability-status .neutral { color:#76826b; }
.no-equipment { font-size:11px; line-height:1.8; color:#77866a; margin:0 0 14px; }
.equipment-breakdown { border-top:1px solid #a7b78d66; margin-top:12px; }
.equipment-breakdown>summary { cursor:pointer; padding:12px 0; color:#42684f; font-size:11px; font-weight:700; line-height:1.7; }
.equipment-breakdown>summary>span { float:right; font-size:9px; font-weight:400; color:#7c8969; }
.equipment-breakdown>summary:focus-visible { outline:2px solid #779658; outline-offset:3px; border-radius:3px; }
.equipment-breakdown-content { padding:1px 0 0; }
.equipment-breakdown-content>section { padding:12px; border-radius:7px; background:#ccd8ae4d; margin-bottom:9px; }
.equipment-breakdown-content>section>small { font-size:8px; color:#819071; }
.equipment-breakdown-content h4 { color:#466244; font-size:12px; line-height:1.7; margin:4px 0 12px; overflow-wrap:anywhere; }
.equipment-special { font-size:10px; color:#6d7e50; line-height:1.8; margin:10px 0 0; }
.ability-footnote { border-top:1px solid #acbc9566; padding-top:11px; margin:2px 0 0; color:#7d876b; font-size:9px; line-height:1.9; }
.original-effects.modifier-list { margin-bottom:12px; }
.original-effects.modifier-list dt { color:#b9c9b1; }
.original-effects.modifier-list .benefit { color:#e3d293; }
.original-effects.modifier-list .drawback { color:#edb894; }
.original-effects.modifier-list dd { font:600 12px var(--display); line-height:1.8; white-space:normal; flex-shrink:1; min-width:55px; }
.sell-dialog .original-effects.modifier-list { padding:15px; }
.sell-dialog .original-effects.modifier-list dt { color:#49604c; }
.sell-dialog .original-effects.modifier-list .benefit { color:#59713c; }
@media(min-width:1000px) {
  .growth-app .game-layout { grid-template-columns:minmax(0,1fr) 300px; }
}
@media(min-width:761px) and (max-width:999px) {
  .growth-app .game-layout { grid-template-columns:minmax(0,1fr) 280px; }
  .ability-status .modifier-list>div { flex-wrap:wrap; gap:2px 7px; }
  .ability-status .modifier-list dd { margin-left:auto; }
}
@media(max-width:760px) {
  .growth-app .side-panel { display:flex; flex-direction:column; gap:14px; }
  .ability-status { padding:14px 0; }
  .ability-values { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ability-values b { font-size:16px; }.ability-values small { font-size:10px; }
  .ability-context,.ability-footnote { font-size:10px; }
  .ability-heading h3,.equipment-totals h3 { font-size:12px; }
  .ability-status .modifier-list dt,.ability-status .modifier-list dd { font-size:11px; }
  .equipment-breakdown>summary { font-size:12px; padding:14px 0; }
  .equipment-breakdown-content>section>small { font-size:9px; }.equipment-special { font-size:11px; }
}

/* Buying preferences and a small workbench for original parts. */
.rare-preference { white-space:nowrap; }
.rare-preference input,.sale-options input { width:16px; height:16px; margin:0; accent-color:#d5b867; cursor:pointer; flex-shrink:0; }
.rare-preference input:focus-visible,.sale-options input:focus-visible { outline:2px solid #edcd81; outline-offset:4px; }
.sale-options { position:sticky; top:10px; z-index:7; margin:16px 0 12px; padding:13px 15px; border:1px solid #8c9c70; border-radius:7px; background:#344c3b; box-shadow:0 4px 12px #102a292e; }
.sale-options label { display:flex; gap:9px; align-items:center; color:#eee4bd; font-size:13px; font-weight:600; cursor:pointer; }
.sale-options>small { display:block; margin-top:8px; color:#b1c2a3; font-size:11px; line-height:1.7; }
.rare-collection { margin:14px 0 0; padding:8px 10px; border-radius:5px; font-size:11px; color:#9cab9c; background:#172e32; display:flex; flex-wrap:wrap; gap:5px; justify-content:space-between; }
.rare-collection.found { color:#e5cb7d; background:#504a31; border:1px solid #9b88574d; }
.rare-collection.is-effective { display:grid; grid-template-rows:repeat(3,minmax(16px,auto)); gap:2px; align-content:center; justify-content:stretch; }
.rare-collection.is-effective>span { display:flex; justify-content:space-between; gap:6px; min-width:0; color:#d8c88e; font-size:10px; line-height:16px; }
.rare-collection.is-effective b { color:#f0dfac; white-space:nowrap; }
.rare-collection.is-effective .rare-collection-next { color:#acba9e; font-size:9px; }
.rare-collection.is-locked { display:grid; gap:2px; }
.rare-collection.is-locked>span { display:flex; justify-content:space-between; gap:6px; line-height:16px; }
.rare-collection.is-locked small { color:#9eaf9f; font-size:9px; }
.rare-collection-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-left:auto; padding:4px 11px; border:1px solid #556f63; border-radius:7px; background:#213b3c; color:#b8c8af; }
.rare-collection-summary>div { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:0 10px; min-width:0; }
.rare-collection-summary span { grid-column:1; color:#d6c58f; font-size:11px; }
.rare-collection-summary strong { grid-column:2; color:#f0e6c0; font:600 16px/20px var(--display); white-space:nowrap; }
.rare-collection-summary small { grid-column:1/-1; color:#9eaf9f; font-size:10px; line-height:16px; }
.rare-collection-summary.is-unlocked { border-color:#9b885766; background:#504a312b; }
.rare-collection-summary.is-unlocked small { color:#d9c27f; }
.rare-collection-summary .text-button { flex-shrink:0; color:#dbc57e; font-size:10px; }
.enemy-rare { display:flex; flex-wrap:wrap; justify-content:center; gap:0 5px; color:#7a5221; font-weight:700; font-size:10px; line-height:1.4; margin-bottom:3px; }
.growth-app .enemy.rare-enemy .enemy-card { background:#fff0b9; border-color:#aa7d37; box-shadow:0 0 0 2px #e4bb644d; }
.growth-app .enemy-reward { display:block; color:#66793f; font-size:11px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.product-preview { display:grid; grid-template-columns:minmax(0,1fr) 52px; grid-template-rows:28px 52px; gap:12px; padding:18px 20px; border-top:1px solid #5a74635e; background:#263f3c; min-width:0; }
#product-preview-content { display:contents; }
.product-title { grid-column:1; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; gap:10px; min-width:0; }
.product-name { display:block; min-width:0; color:#e8e7d0; font-size:14px; line-height:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-preview .rare-tag { padding:3px 5px; border:1px solid #c9a75666; border-radius:4px; color:#efd38c; font-size:11px; line-height:18px; text-align:center; white-space:nowrap; background:#75603344; }
.product-preview .rare-tag[aria-hidden="true"] { visibility:hidden; }
.product-preview-values { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0; min-width:0; }
.product-preview-values>div { min-width:0; }
.product-preview-values dt { font-size:11px; color:#bac7a6; line-height:18px; white-space:nowrap; }
.product-preview-values dd { margin:0; color:#edd08b; font:600 22px var(--display); line-height:34px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.product-details-button { grid-column:2; grid-row:1; border:1px solid #819272; border-radius:5px; background:#344d43; color:#e2dbb2; font:600 12px var(--body); cursor:pointer; }
.product-details-button:disabled { opacity:.4; cursor:default; }
.product-details-button:focus-visible { outline:2px solid #edcd81; outline-offset:3px; }
.reward-popover { position:fixed; inset:0; margin:auto; width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:22px; border:1px solid #96a680; border-radius:12px; background:#263f3c; color:#e8e7d0; box-shadow:0 12px 60px #071c27a6; }
.reward-popover::backdrop { background:#10262c66; }
.reward-popover-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.reward-popover h2 { font-size:16px; margin:0; }
.reward-popover .tool-button { color:#e1dcba; flex-shrink:0; }
.reward-product-name { margin:16px 0; font-size:14px; font-weight:600; line-height:1.8; overflow-wrap:anywhere; }
.reward-product-name small { display:block; font-size:12px; font-weight:400; color:#bac7a6; }
.reward-popover dl { margin:0; padding:6px 14px; border-radius:5px; background:#193335; }
.reward-popover dl>div { display:flex; justify-content:space-between; gap:14px; margin:10px 0; font-size:13px; color:#c2d1b8; }
.reward-popover dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.product-preview-note { font-size:12px; line-height:1.8; color:#aebeaa; margin:14px 0 0; }
@media(max-width:760px) {
  .product-preview { padding:15px; }
  .product-title { gap:6px; }
  .sale-options { padding:12px; }
  .growth-app .enemy-rare { font-size:10px; }
  .growth-app .enemy-reward { font-size:11px; }
}
.purchase-policy-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; padding:13px 16px; margin-bottom:14px; border:1px solid #506961; border-radius:9px; background:#30483d; }
.policy-fields { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.policy-fields label { color:#c1d0b4; font-size:11px; display:flex; align-items:center; gap:9px; }
.policy-fields select { max-width:100%; font:inherit; color:#f0ecd0; background:#1b3636; border:1px solid #849778; border-radius:5px; padding:8px 22px 8px 9px; }
.policy-fields select:focus-visible { outline:2px solid #e4bf76; outline-offset:3px; }
.purchase-policy-bar>p { flex:1; min-width:160px; margin:0; color:#aec0aa; font-size:10px; line-height:1.8; }
.original-hud.text-button { font-size:10px; color:#e1d6ae; text-decoration:none; text-align:right; padding:2px 0 2px 15px; border-left:1px solid #74826a; }
.original-hud b { font:600 17px var(--display); margin-left:8px; }
.original-hud small { display:block; font-size:9px; color:#a8bda8; margin-top:4px; }
.slot-description { font-size:11px; color:#a4bbae; line-height:1.9; margin:12px 0 0; }
.equipment-slot>.slot-description { display:block; color:#a4bbae; }
.equipment-slot .eyebrow { padding-right:34px; line-height:1.7; }
.original-workshop { margin:25px 0 35px; border:1px solid #8b8966; border-radius:12px; padding:25px; background:#293f39; }
.original-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.original-heading .eyebrow { font:10px var(--display); color:#dbc38e; letter-spacing:2px; }
.original-heading h2 { font-size:22px; color:#eee5be; margin:8px 0; }
.original-heading p { font-size:11px; line-height:1.8; color:#acbfa8; margin:0; }
.original-count { text-align:right; flex-shrink:0; }
.original-count strong { font:500 30px var(--display); color:#e9d79a; }
.original-count small { display:block; color:#bac5ac; font-size:10px; margin-top:5px; }
.original-bench { display:grid; grid-template-columns:minmax(220px, .85fr) minmax(0,2fr); gap:22px; align-items:start; }
.original-craft { background:#1d3431; border:1px dashed #7f8965; border-radius:9px; padding:20px; }
.original-bench-icon { display:block; color:#d5ba77; margin-bottom:15px; }
.original-bench-icon .icon { width:34px; height:34px; }
.original-craft h3 { font-size:14px; line-height:1.7; margin:0 0 10px; color:#ede2b7; }
.original-craft p { font-size:11px; color:#a9bca6; line-height:1.9; margin:0 0 22px; }
.original-craft>small { display:block; font-size:10px; color:#a8b59f; line-height:1.8; margin-top:12px; }
.original-craft .recipe-costs { gap:10px; margin-bottom:18px; }
.original-craft .recipe-costs>span { font-size:11px; }
.original-craft .recipe-costs b { font-size:14px; }
.original-slot { padding:17px 20px; border:1px dashed #718569; border-radius:8px; margin-bottom:13px; background:#9fac7010; }
.original-slot .eyebrow { color:#c2c890; font-size:10px; }
.original-slot h3 { font-size:15px; margin:9px 0 12px; line-height:1.6; }
.original-slot p { font-size:11px; color:#b9c5ac; line-height:1.8; }
.original-slot>small { font-size:10px; color:#aaba9f; line-height:1.8; display:block; }
.original-slot.is-equipped { border-style:solid; border-color:#a7b176; }
.original-inventory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.original-card { padding:18px; border:1px solid #647663; border-radius:8px; background:#213a35; display:flex; flex-direction:column; min-width:0; }
.original-card.is-equipped { border-color:#c1c488; background:#455236; }
.original-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#a9c1a3; font-size:10px; }
.original-card-top .icon { width:24px; height:24px; color:#d3bb81; }
.original-card.is-equipped .original-card-top>span { color:#e4e9b0; }
.original-card h3 { font-size:14px; color:#f0e8c8; line-height:1.6; overflow-wrap:anywhere; margin:11px 0 13px; }
.original-effects { padding:0; margin:0 0 12px; list-style:none; }
.original-effects li { display:flex; justify-content:space-between; gap:12px; color:#b9c9b1; font-size:11px; line-height:1.8; margin-bottom:5px; }
.original-effects strong { white-space:nowrap; color:#e3d293; font:600 13px var(--display); padding-top:2px; }
.original-sale-price { font-size:11px; color:#a0b29c; margin:auto 0 13px; }
.original-sale-price b { color:#e2cf98; }
.original-sell.text-button { font-size:11px; color:#c6b998; margin-top:7px; padding:9px 4px 0; text-align:center; }
.original-empty { grid-column:1/-1; padding:30px 20px; text-align:center; border:1px dashed #607960; border-radius:8px; font-size:12px; line-height:2; color:#a8ba9e; }
.original-workshop .panel-footnote { font-size:10px; color:#a0b59d; }
.tools-heading { margin-bottom:18px; }
.sell-dialog #sell-name { font-weight:700; font-size:16px; color:#375741; }
.sell-dialog .original-effects { background:#dce3c9; padding:15px 18px; border-radius:7px; }
.sell-dialog .original-effects li { color:#49604c; font-size:12px; }
.sell-dialog .original-effects strong { color:#59713c; }
.sell-dialog #sell-warning { font-size:12px; line-height:1.9; color:#695d40; }
.sell-dialog #sell-warning.equipped-warning { font-weight:700; color:#995732; }
.sell-reward { display:block; font:600 27px var(--display); color:#526b36; margin:16px 0; }
.sell-actions { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:12px; }
.sell-actions .secondary-button { color:#476048; background:#d3ddbd; border-color:#9cae81; }
.sell-actions .primary-button { margin:0; width:100%; font-size:12px; }
@media(max-width:900px) {
  .original-bench { grid-template-columns:1fr; }
  .original-craft { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
  .original-bench-icon { display:none; }.original-craft h3,.original-craft p { margin:0; grid-column:1; }
  .original-craft .recipe-costs { grid-column:2; grid-row:1/3; margin:0; }
  .original-craft>small { margin:0; align-self:center; }
  .purchase-policy-bar>p { order:3; flex-basis:100%; }
  .original-hud.text-button { margin-left:auto; }
}
@media(max-width:540px) {
  .purchase-policy-bar { padding:12px; gap:10px; }.policy-fields { flex:1 1 100%; gap:10px; }
  .policy-fields label { font-size:12px; }.policy-fields select { font-size:12px; padding:9px; }
  .purchase-policy-bar>p { order:2; flex-basis:auto; min-width:0; font-size:10px; }
  .original-hud.text-button { order:3; min-width:140px; font-size:10px; padding-left:10px; }.original-hud b { font-size:15px; margin-left:4px; }
  .slot-description { font-size:12px; }.original-workshop { padding:16px; margin-top:20px; }
  .original-heading { flex-wrap:wrap; gap:15px; margin-bottom:19px; }.original-heading h2 { font-size:20px; }.original-heading p { font-size:12px; }
  .original-count { text-align:left; display:flex; align-items:center; gap:14px; }.original-count strong { font-size:25px; }.original-count small { font-size:11px; margin:0; }
  .original-craft { display:block; padding:17px; }.original-craft h3 { margin-bottom:10px; }.original-craft p { margin-bottom:17px; font-size:12px; }
  .original-craft .recipe-costs { margin-bottom:18px; }.original-craft .recipe-costs>span { font-size:12px; }.original-craft>small { margin-top:12px; font-size:11px; }
  .original-slot { padding:16px; }.original-slot p { font-size:12px; }.original-slot>small { font-size:11px; }
  .original-inventory { grid-template-columns:1fr; }.original-card h3 { font-size:16px; }.original-effects li { font-size:12px; }.original-effects strong { font-size:15px; }
  .original-sale-price,.original-sell.text-button { font-size:12px; }.original-sell.text-button { padding:12px 4px 4px; }
  .original-workshop .panel-footnote { font-size:11px; }.sell-actions { gap:9px; }
}

/* 0.5: a compact shopping desk, with detail views outside the page flow. */
.app-shell.growth-app { max-width:1500px; padding:0 18px; }
.growth-app .masthead { min-height:42px; gap:14px; }
.growth-app .brand-mark { width:30px; height:32px; border-radius:9px; }
.growth-app .brand-mark .icon { width:22px; height:22px; }
.growth-app .brand { gap:10px; }.growth-app .brand small { font-size:8px; letter-spacing:2px; }
.growth-app .brand strong { font-size:15px; }.growth-app .brand strong span { font-size:12px; }
.growth-app .edition { display:none; }
.growth-app .resource-bar { grid-template-columns:1.2fr 1fr 1fr 1fr; min-height:0; margin:0 0 6px; padding:6px 0; }
.growth-app .round-stat,.growth-app .resource { min-height:0; padding:0 14px; }
.growth-app .round-stat { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-content:center; }
.growth-app .round-stat>.eyebrow { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; line-height:14px; margin:0; }
.growth-app #rank-level { font:600 12px var(--display); color:#d8dc9d; letter-spacing:0; }
.growth-app .round-stat>strong { grid-column:1/-1; font-size:13px; line-height:18px; margin:0; white-space:nowrap; }
.growth-app .round-stat>small { font-size:10px; line-height:14px; margin:0; }
.growth-app #rank-next { text-align:right; }
.growth-app #restock-bonus { color:#d4da9c; font-size:11px; }
.growth-app .round-stat .growth-meter { position:absolute; left:14px; right:14px; bottom:-3px; max-width:none; height:2px; margin:0; }
.growth-app .resource { position:relative; gap:10px; align-items:center; }
.growth-app .resource .eyebrow { font-size:11px; letter-spacing:0; line-height:14px; margin-bottom:2px; }
.growth-app .resource strong { font-size:24px; line-height:26px; margin-top:0; }
.growth-app .resource-symbol { display:none; }
.growth-app .money { display:flex; flex-wrap:nowrap; gap:8px; }
.growth-app .money>div { min-width:0; }.growth-app .money>small { margin:14px 0 0; padding:0; font-size:11px; line-height:14px; }
.growth-app .resource.money { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:14px 26px 14px; align-content:center; gap:0 5px; }
.growth-app .resource.money>div,.growth-app .wallet-balance { display:contents; }
.growth-app .resource.money .eyebrow { grid-column:1/-1; grid-row:1; margin:0; }
.growth-app #wallet-value { grid-column:1/-1; grid-row:2; }
.growth-app .wallet-balance>span { white-space:nowrap; }
.growth-app .wallet-limit { grid-column:1; grid-row:3; color:#b5c5a6; font:400 12px/14px var(--display); }
.growth-app .resource.money>small { grid-column:2; grid-row:3; justify-self:end; margin:0; line-height:14px; }
.growth-app .resource small#discovered-value { display:inline-block; font-size:10px; margin:0 0 0 8px; }
.growth-app .main-tabs { gap:7px; padding:0 0 5px; margin:0 0 6px; min-height:38px; }
.growth-app .main-tabs>button { padding:6px 12px; font-size:12px; }
.growth-app .save-status { font-size:10px; }
.growth-app .game-layout { grid-template-columns:minmax(0,1fr) minmax(320px,32%); gap:12px; align-items:start; }
.growth-app .game-panel { min-width:0; }
.growth-app .map-toolbar { height:38px; padding:0 12px; gap:8px; }
.growth-app .map-title { gap:7px; }.growth-app .map-subtitle { font-size:10px; }
.district-switch { min-width:0; border:0; padding:6px 0; background:transparent; color:#ece8c8; cursor:pointer; white-space:nowrap; }
.growth-app .district-switch strong { font-size:13px; letter-spacing:0; }
.district-completion-badge { flex-shrink:0; white-space:nowrap; font-size:11px; line-height:24px; padding:0 8px; border-radius:5px; color:#dce8b3; background:#344d3e; }
.district-completion-badge.just-completed { background:#e1e7b9; color:#29493c; box-shadow:0 0 0 2px #c2d38e; }
.growth-app .district-copy>.district-completion-note { color:#dce8b3; }
.growth-app .play-tools { gap:5px; }
.growth-app .purchase-policy-bar { margin:0; padding:5px 12px; border:0; border-top:1px solid #667e5b44; border-radius:0; min-height:38px; gap:8px; }
.growth-app .policy-fields { flex:1; flex-wrap:nowrap; gap:12px; }
.growth-app .policy-fields label { font-size:12px; gap:6px; white-space:nowrap; }
.growth-app .policy-fields select { padding:5px 4px; font-size:12px; }
.growth-app .policy-fields .rare-preference { margin-left:auto; }
.growth-app .arena { min-height:260px; max-height:calc(100dvh - 424px); }
.growth-app .map-art { object-fit:fill; }
.growth-app .intro-card { top:50%; transform:translateY(-50%); padding:18px 22px; }
.growth-app .intro-card h1 { font-size:26px; line-height:1.45; margin:8px 0; }
.growth-app .intro-card p { font-size:11px; line-height:1.6; margin-bottom:10px; }
.growth-app .intro-card .primary-button { padding:10px 16px; }
.growth-app .intro-note { margin-top:8px; }
.growth-app .map-footer { min-height:24px; padding:4px 12px; font-size:10px; }
.growth-app .offline-ready { font-size:10px; }
.growth-app .product-preview { grid-template-rows:24px 28px; gap:4px 12px; padding:8px 12px; }
.growth-app .product-name { font-size:13px; line-height:24px; }
.growth-app .product-preview-values { gap:16px; }
.growth-app .product-preview-values>div { display:flex; align-items:baseline; gap:9px; }
.growth-app .product-preview-values dt { font-size:11px; }
.growth-app .product-preview-values dd { font-size:18px; line-height:28px; }
.growth-app .receipt-strip { display:block; margin:0; padding:4px 12px; border:0; border-top:1px solid #5a74635e; border-radius:0; min-height:0; }
.growth-app .receipt-heading { width:auto; display:flex; justify-content:space-between; align-items:center; padding:0; margin:0 0 4px; border:0; gap:10px; }
.growth-app .receipt-heading>span { font-size:11px; line-height:16px; }
.growth-app .receipt-heading .text-button { padding:0; color:#b7c6a5; font-size:11px; line-height:16px; }
.growth-app .purchase-log { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; height:42px; padding:0; overflow:auto; min-width:0; scrollbar-width:thin; }
.growth-app .receipt-item { min-width:0; width:auto; padding:4px 6px; height:42px; flex-shrink:1; }
.growth-app .receipt-item>span { min-width:0; width:100%; }
.growth-app .receipt-item strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; line-height:16px; }
.growth-app .receipt-item small { display:block; font-size:10px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.growth-app .empty-log { font-size:11px; grid-column:1/-1; align-self:center; }
.growth-app .side-panel { display:flex; flex-direction:column; gap:10px; min-width:0; }
.growth-app .character-card { padding:8px 12px; width:100%; flex-shrink:0; }
.compact-profile { display:flex; align-items:center; gap:10px; }
.growth-app .compact-profile .profile-art { width:62px; height:auto; flex-shrink:0; margin:0; }
.growth-app .compact-profile .profile-sprite { position:static; width:100%; transform:none; }
.growth-app .compact-profile .character-name { display:flex; flex-direction:column; align-items:flex-start; text-align:left; margin:0; min-width:0; }
.growth-app .compact-profile h2 { font-size:16px; line-height:24px; letter-spacing:0; margin:2px 0; }
.growth-app .compact-profile .level-tag { display:inline-block; font-size:10px; line-height:16px; margin:0; padding:1px 5px; }
.growth-app #open-equipment { font-size:11px; color:#536d4e; padding:1px 0; }
.growth-app .ability-status { padding:6px 0 0; margin-top:4px; }
.growth-app .ability-heading { margin-bottom:4px; }.growth-app .ability-heading h3 { font-size:12px; }
.growth-app .ability-heading>span { font-size:10px; padding:2px 5px; }
.growth-app .ability-values { gap:8px; }.growth-app .ability-values>div>span { font-size:11px; margin:0; line-height:16px; }
.growth-app .ability-values b { font-size:17px; line-height:22px; height:22px; min-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.growth-app .ability-context { margin:2px 0 8px; font-size:10px; line-height:16px; }
.growth-app .equipment-totals { padding-top:6px; }.growth-app .equipment-totals h3 { margin:0 0 4px; font-size:12px; line-height:16px; }
.growth-app .equipment-totals-list { min-height:120px; }
.growth-app .modifier-list>div { flex-wrap:nowrap; gap:8px; margin-bottom:2px; }
.growth-app .equipment-totals-list .modifier-list>div { margin-bottom:1px; }
.growth-app .modifier-list dt,.growth-app .modifier-list dd { font-size:11px; line-height:18px; }
.growth-app .no-equipment { font-size:11px; margin:8px 0; }
@media(min-width:821px) and (max-height:800px) {
  .growth-app .character-card { padding-block:6px; }
  .growth-app .ability-status { padding-top:4px; }
  .growth-app .ability-heading { margin-bottom:2px; }
  .growth-app .ability-heading>span { line-height:14px; }
  .growth-app .equipment-totals-list .modifier-list>div { margin-bottom:0; }
}
.growth-app .upgrade-panel { width:100%; }.growth-app .section-heading { margin-bottom:6px; }
.growth-app .upgrade-panel .section-heading h2 { font-size:12px; }.growth-app .upgrade-panel .section-heading>span { font-size:9px; }
.upgrade-modes { display:flex; gap:2px; padding:2px; border:1px solid #6f8963; border-radius:6px; }
.upgrade-modes button { padding:2px 12px; border:0; border-radius:4px; background:transparent; color:#c9d4b6; font:inherit; font-size:12px; line-height:18px; cursor:pointer; }
.upgrade-modes button[aria-pressed="true"] { background:#d0dab4; color:#294a3d; }
.upgrade-modes button:focus-visible { outline:2px solid #eac46e; outline-offset:2px; }
.growth-app .upgrade-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:64px; align-content:start; gap:6px; height:172px; }
.growth-app .upgrade-list[data-category="basic"] { grid-template-rows:64px 64px 32px; }
.growth-app .upgrade-button[hidden] { display:none; }
.growth-app .upgrade-button { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:18px 16px 16px; gap:1px 6px; height:64px; min-height:64px; padding:4px 6px; border-radius:7px; }
.growth-app .upgrade-icon { display:none; }.growth-app .upgrade-copy { display:contents; }
.growth-app .upgrade-copy strong { display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:baseline; grid-column:1/-1; font-size:12px; gap:2px; line-height:18px; min-width:0; }
.growth-app .upgrade-name { min-width:0; white-space:nowrap; }
.growth-app .upgrade-copy strong em { font-size:10px; margin:0; }
.growth-app .upgrade-copy small { grid-column:1/-1; grid-row:2; font-size:11px; line-height:16px; white-space:normal; align-self:center; }
.growth-app .upgrade-button.locked .upgrade-copy small { grid-row:2/span 2; }
.growth-app .upgrade-cost { display:flex; align-items:baseline; gap:2px; grid-column:1/-1; grid-row:3; justify-self:end; align-self:end; font-size:14px; line-height:16px; padding:0; min-width:0; white-space:nowrap; }
.growth-app .upgrade-cost[hidden] { display:none; }
.growth-app .upgrade-cost small { font-size:9px; }.growth-app .upgrade-note { font-size:10px; margin:6px 0 0; }
.growth-app .capacity-upgrade { grid-column:1/-1; grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:20px; align-items:center; height:32px; min-height:32px; }
.growth-app .capacity-upgrade .upgrade-copy strong { grid-column:1; grid-row:1; justify-content:flex-start; gap:5px; }
.growth-app .capacity-upgrade .upgrade-copy small { grid-column:2; grid-row:1; white-space:nowrap; }
.growth-app .capacity-upgrade .upgrade-cost { grid-column:3; grid-row:1; align-self:center; }
.growth-app .page-footer { min-height:20px; margin:0; padding:2px 0; font-size:9px; }
.growth-app #background-patrol { max-width:50%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.growth-app #goal-card { margin:0 0 18px; }
.equipment-popover { width:min(560px,calc(100% - 32px)); background:#edf0d9; color:#365848; }
.equipment-popover .tool-button { color:#46664e; }.equipment-popover .modifier-list dt { font-size:12px; }
.equipment-popover #equipment-summary { font-size:12px; line-height:1.8; }
.equipment-popover .character-quote { font-size:12px; text-align:left; }
.equipment-popover .equipment-breakdown h3 { font-size:14px; margin:14px 0 4px; }
.equipment-popover .advanced-effects { border-top:1px solid #a7b89466; margin-top:12px; padding-top:8px; }
.equipment-popover .advanced-effects h3 { font-size:14px; margin:0 0 6px; }
.equipment-popover .advanced-effects dt small { color:#657660; margin-left:4px; }
.equipment-popover .ability-values small,.equipment-popover .ability-footnote { font-size:11px; }
.equipment-popover .equipment-breakdown-content>section>small { font-size:10px; }.equipment-popover .equipment-special { font-size:12px; }
.growth-app .challenge-strip { margin:0; padding:6px 12px; border-radius:0; }
.growth-app .challenge-strip>div>span { font-size:11px; }.growth-app .challenge-strip>div>strong { font-size:18px; }
@media(min-width:821px) and (max-width:1080px) {
  .growth-app .map-subtitle { display:none; }
  .growth-app .policy-fields { gap:8px; }.growth-app .policy-fields label { font-size:11px; }
  .growth-app .money { flex-wrap:wrap; gap:0; }.growth-app .money>small { margin:0; }
  .growth-app .resource small#discovered-value { display:block; margin:0; }
  .growth-app .resource strong { font-size:22px; }.growth-app .round-stat,.growth-app .resource { padding:0 10px; }
  .growth-app .product-preview-values>div { display:block; }.growth-app .product-preview { grid-template-rows:24px 45px; }
  .growth-app .product-preview-values dd { line-height:26px; }
  .growth-app .purchase-log { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:820px) {
  .app-shell.growth-app { padding:0 12px; }.growth-app .game-layout { grid-template-columns:1fr; gap:12px; }
  .growth-app .arena { max-height:none; min-height:260px; }
  .growth-app .side-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
  .growth-app .resource strong { font-size:21px; }.growth-app .main-tabs { overflow-x:auto; }
  .growth-app .main-tabs>button { font-size:11px; padding:8px; }
  .growth-app .save-status { display:none; }.growth-app .map-subtitle { display:none; }
}
@media(max-width:540px) {
  .growth-app .resource-bar { grid-template-columns:1fr 1fr; row-gap:12px; }
  .growth-app .arena { min-height:300px; }
  .growth-app .intro-card { left:12px; width:calc(100% - 24px); max-width:none; padding:14px 16px; }
  .growth-app .intro-card h1 { font-size:24px; }
  .growth-app .round-stat,.growth-app .resource { padding:0 10px; }.growth-app .round-stat>strong { font-size:13px; }
  .growth-app .round-stat { grid-template-columns:1fr; }.growth-app #rank-next { text-align:left; }
  .growth-app .money { flex-wrap:wrap; gap:0; }.growth-app .money>small { margin:0; }
  .growth-app .resource small#discovered-value { display:block; margin:0; }
  .growth-app .resource .eyebrow { font-size:11px; }.growth-app .main-tabs .icon { display:none; }
  .growth-app .policy-fields { flex-wrap:wrap; gap:6px 12px; }.growth-app .policy-fields label { font-size:12px; }
  .growth-app .policy-fields .rare-preference { margin:0; }.growth-app .purchase-policy-bar { padding:8px 10px; }
  .growth-app .side-panel { display:flex; }
  .growth-app .product-preview { grid-template-rows:24px 46px; }.growth-app .product-preview-values>div { display:block; }
  .growth-app .product-preview-values dd { line-height:28px; }.growth-app .product-title { grid-template-columns:minmax(0,1fr) 96px; }
  .growth-app .product-preview .rare-tag { font-size:10px; }.growth-app .purchase-log { grid-template-columns:1fr; height:88px; }
  .growth-app .receipt-item small { font-size:11px; }.growth-app .offline-ready { display:none; }
  .growth-app .upgrade-copy small { font-size:12px; }.growth-app #background-patrol { display:none; }
}

/* 0.9: desktop pages share one viewport. Content is paged, not clipped. */
.hud-pager { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; font-size:10px; font-weight:400; white-space:nowrap; }
.hud-pager button { display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid #82977970; border-radius:5px; background:#8da27a18; color:inherit; font-size:20px; line-height:1; cursor:pointer; }
.hud-pager button:disabled { opacity:.35; cursor:default; }
.hud-pager button:focus-visible,.view-pagination button:focus-visible,.view-sections button:focus-visible { outline:2px solid #e4bf76; outline-offset:2px; }
.growth-app .receipt-heading .hud-pager { margin-left:auto; }
.growth-app .equipment-totals h3 { align-items:center; gap:4px; }
.growth-app .equipment-totals h3>small { margin-left:auto; }
.view-stack { display:grid; grid-template-columns:minmax(0,1fr); }
.growth-app .page-view { grid-area:1 / 1; min-width:0; }
.growth-app .view-heading { flex-shrink:0; min-height:38px; margin:0 0 6px; gap:12px; align-items:center; }
.growth-app .view-heading>div { min-width:0; }
.growth-app .view-heading h1 { font-size:16px; line-height:1.5; letter-spacing:.3px; margin:0; }
.growth-app .view-heading .view-number { font-size:22px; line-height:1.5; }
.growth-app .view-number small { font-size:11px; }
.view-sections { display:flex; gap:6px; flex-shrink:0; margin:0 0 12px; }
.view-sections button { padding:6px 16px; border:1px solid #637c6c; border-radius:6px; background:#223d3d; color:#b9ccae; font:600 12px var(--body); cursor:pointer; }
.view-sections button[aria-pressed=true] { background:#dce3bb; color:#365843; border-color:#c8d4a4; }
.view-pagination { display:flex; align-items:center; justify-content:center; gap:18px; flex-shrink:0; height:36px; margin-top:8px; font-size:12px; color:#c7d1b0; }
.view-pagination button { min-width:80px; height:30px; border:1px solid #68826a; border-radius:6px; background:#324b40; color:#d9dec0; font:600 12px var(--body); cursor:pointer; }
.view-pagination button:disabled { opacity:.35; cursor:default; }
.view-content { min-width:0; }
.growth-app .room-layout { align-items:start; gap:12px; }
.growth-app .life-record { padding:20px; }
.growth-app .life-record h2 { font-size:18px; margin:0 0 12px; }
.growth-app .life-record dl { margin:12px 0 16px; }
.growth-app .resource>div { min-width:0; max-width:100%; }
.growth-app .resource strong { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.growth-app .resource.money { flex-wrap:wrap; }
.growth-app .material { min-width:0; flex-wrap:wrap; }
.growth-app .material strong { max-width:100%; overflow-wrap:anywhere; }
.growth-app .recipe-costs b { min-width:0; text-align:right; overflow-wrap:anywhere; }
.growth-app .recipe-costs>span { align-items:baseline; }
.growth-app .life-record dd { min-width:0; text-align:right; overflow-wrap:anywhere; }
@media(min-width:821px) {
  .app-shell.growth-app { height:100dvh; display:flex; flex-direction:column; }
  .growth-app .masthead { flex-shrink:0; }
  .growth-app>main { flex:1; min-height:0; display:flex; flex-direction:column; }
  .growth-app .resource-bar,.growth-app .main-tabs,.growth-app .page-footer { flex-shrink:0; }
  .view-stack { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); }
  .growth-app .page-view { display:flex; flex-direction:column; min-height:0; }
  .growth-app .view-content { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; }
  .growth-app .game-layout { display:grid; height:100%; min-height:0; }
  .growth-app .game-panel { display:flex; flex-direction:column; height:auto; max-height:100%; min-height:0; }
  .growth-app .arena { flex:0 1 auto; min-height:200px; max-height:none; aspect-ratio:1000/680; }
  .growth-app .map-toolbar,.growth-app .purchase-policy-bar,.growth-app .map-footer,.growth-app .product-preview,.growth-app .receipt-strip,.growth-app .challenge-strip { flex-shrink:0; }
  .growth-app .side-panel { min-height:0; gap:8px; }
  .growth-app .purchase-log { overflow:visible; }
  .growth-app .upgrade-list { overflow:visible; scrollbar-gutter:auto; }
  .growth-app .room-layout { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); }
  .growth-app .room-scene { height:100%; max-height:435px; min-height:280px; }
  .growth-app .materials,.growth-app .equipment-slots,.growth-app .mastery-grid { gap:12px; margin:0; }
  .growth-app .materials { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .growth-app .recipe-grid,.growth-app .collection-grid,.growth-app .district-grid,.growth-app .challenge-grid { gap:12px; align-content:start; align-items:start; }
  .growth-app .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .growth-app .collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .growth-app .material { padding:8px 10px; }
  .growth-app .material strong { font-size:16px; }
  .growth-app #goal-card.compact-goal { margin:0; padding:5px 10px; gap:8px; min-height:34px; }
  .growth-app .compact-goal .goal-icon { width:22px; height:22px; border:0; }
  .growth-app .compact-goal .goal-icon .icon { width:18px; height:18px; }
  .growth-app .compact-goal .goal-copy { display:flex; align-items:center; gap:10px; }
  .growth-app .compact-goal .goal-copy small { margin:0; font-size:11px; flex-shrink:0; }
  .growth-app .compact-goal .goal-copy strong { margin:0; font-size:12px; flex-shrink:0; }
  .growth-app .compact-goal .goal-copy>span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .growth-app .compact-goal .goal-progress { width:auto; flex-shrink:0; }
  .growth-app .compact-goal .goal-progress b { margin:0; font-size:14px; }
  .growth-app .compact-goal .growth-meter { display:none; }
  .growth-app .view-content .panel-footnote { margin:0; font-size:11px; }
  .growth-app .view-content .tools-heading,.growth-app .view-content .challenge-heading { margin:0; }
  .growth-app .recipe-card,.growth-app .mastery-card,.growth-app .collection-card { padding:14px; }
  .growth-app .recipe-card h2 { font-size:15px; margin:8px 0; }
  .growth-app .recipe-art { width:32px; height:32px; }
  .growth-app .recipe-art .icon { width:24px; height:24px; }
  .growth-app .recipe-effect { min-height:0; margin-bottom:8px; }
  .growth-app .recipe-actions { margin-top:8px; }
  .growth-app .recipe-costs { gap:4px; margin-bottom:6px; }
  .growth-app .recipe-card .modifier-list dt,.growth-app .recipe-card .modifier-list dd { font-size:12px; line-height:1.6; }
  .growth-app .recipe-card .modifier-list>div { margin-bottom:4px; }
  .growth-app .secondary-button { min-height:34px; padding:8px 12px; font-size:12px; }
  .growth-app .collection-card .entry-art { width:44px; height:44px; margin:10px auto 8px; }
  .growth-app .entry-art>.icon { width:36px; height:36px; }
  .growth-app .collection-card h2 { margin-top:4px; }
  .growth-app .collection-card blockquote { margin:8px 0; }
  .growth-app .collection-card>p { margin:6px 0; }
  .growth-app .collection-card .entry-drops { margin-top:8px; }
  .growth-app .district-card { grid-template-columns:100px minmax(0,1fr); }
  .growth-app .district-copy { padding:18px; }
  .growth-app .reassurance { margin-top:0; }
  .growth-app .original-workshop { display:flex; flex-direction:column; min-height:0; margin:0; padding:14px; }
  .growth-app .original-heading { margin-bottom:10px; gap:12px; }
  .growth-app .original-heading h2 { font-size:16px; margin:0; }
  .growth-app .original-count strong { font-size:20px; }
  .growth-app .original-count small { display:inline; margin-left:8px; }
  .growth-app .original-bench { grid-template-columns:minmax(235px,.85fr) minmax(0,1.5fr); gap:14px; min-height:0; }
  .growth-app .original-craft { display:block; padding:12px; }
  .growth-app .original-bench-icon { display:none; }
  .growth-app .original-craft h3 { font-size:14px; margin-bottom:6px; }
  .growth-app .original-craft p { font-size:11px; line-height:1.6; margin-bottom:10px; }
  .growth-app .original-craft .recipe-costs { gap:3px; margin-bottom:8px; }
  .growth-app .original-craft>small { font-size:11px; margin-top:6px; }
  .growth-app .original-slot { margin-bottom:8px; padding:8px 12px; }
  .growth-app .original-slot { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 10px; }
  .growth-app .original-slot>small { margin-left:auto; }
  .growth-app .original-slot h3 { margin:3px 0; font-size:13px; }
  .growth-app .original-slot p { margin:4px 0; }
  .growth-app .original-slot>small { font-size:10px; }
  .growth-app .original-inventory { grid-template-columns:1fr; }
  .growth-app .sale-options { position:static; margin:6px 0; padding:6px 10px; box-shadow:none; }
  .growth-app .sale-options label { font-size:12px; }
  .growth-app .sale-options>small { margin-top:3px; font-size:11px; }
  .growth-app .original-card { padding:10px 12px; }
  .growth-app .original-card h3 { margin:4px 0 8px; font-size:14px; }
  .growth-app .original-card-top .icon { width:18px; height:18px; }
  .growth-app .original-effects { margin-bottom:6px; }
  .growth-app .original-effects li { margin-bottom:2px; }
  .growth-app .original-sale-price { margin-bottom:6px; }
  .growth-app .original-sell.text-button { margin-top:3px; padding:4px; }
  .growth-app .original-workshop .panel-footnote { margin:4px 0 0; }
  .growth-app .original-empty { padding:16px; }
}
@media(min-width:821px) and (max-width:1119px) {
  .growth-app .collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .growth-app .original-count small { display:block; margin-left:0; }
}

/* Workshop: compare equipped tools above owned items; keep all five parts visible. */
.equipment-workshop { display:grid; gap:14px; min-width:0; }
.equipment-category-tabs { display:flex; gap:8px; margin-bottom:10px; }
.equipment-category-tabs button { display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid #577363; border-radius:6px; background:#1e353b; color:#b7c9b1; font:600 12px var(--body); cursor:pointer; }
.equipment-category-tabs .icon { width:23px; height:23px; color:#dfca88; }
.equipment-category-tabs small { font:500 12px var(--display); margin-left:5px; }
.equipment-category-tabs button[aria-pressed=true] { background:#40543f; border-color:#c1bc7e; color:#f0e5b9; }
.equipment-category-tabs button:focus-visible { outline:2px solid #e4bf76; outline-offset:2px; }
.owned-equipment-list { display:grid; gap:10px; }
.owned-equipment-card { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,1.6fr) 126px; align-items:center; gap:18px; min-height:90px; padding:12px 16px; border:1px solid #647d70; border-radius:9px; background:#20383b; }
.owned-equipment-card.is-equipped { border-color:#a3b075; background:#354a393d; }
.owned-equipment-name { display:flex; align-items:center; gap:12px; min-width:0; }
.owned-equipment-name>.icon { width:28px; height:28px; flex-shrink:0; color:#e2d096; }
.owned-equipment-name small { color:#aabfa7; font-size:10px; }
.owned-equipment-name h2 { margin:4px 0 0; font-size:14px; line-height:1.5; color:#eddfa9; }
.owned-equipment-effects { min-width:0; color:#c0ceb1; }
.equipment-empty,.workshop-complete { padding:28px; border:1px dashed #617b6a; border-radius:8px; color:#b6c8af; font-size:12px; }
.equipment-empty button { margin-left:16px; }
@media(min-width:821px) {
  .growth-app .equipment-workshop .equipment-slot { padding:14px; min-height:148px; }
  .growth-app .equipment-workshop .equipment-slot>.eyebrow { display:block; padding-right:36px; margin-bottom:9px; font-size:10px; }
  .growth-app .equipment-workshop .equipment-slot>div>.icon { width:26px; height:26px; flex-shrink:0; }
  .growth-app .equipment-workshop .equipment-slot>div strong { font-size:14px; }
  .growth-app .equipment-workshop .equipment-slot .text-button { font-size:11px; }
  .growth-app .equipment-workshop .slot-description { margin-top:10px; }
  .growth-app .equipment-workshop .modifier-list dt,.growth-app .equipment-workshop .modifier-list dd { font-size:12px; line-height:1.55; }
  .growth-app .equipment-workshop .modifier-list dd { color:#e6d398; }
  .growth-app .equipment-workshop .equipment-special { color:#b4c0a0; font-size:11px; line-height:1.5; margin-top:5px; }
  .growth-app .original-overview { padding:0; border:0; background:none; gap:12px; }
  .growth-app .original-overview .original-heading { margin:0; min-height:28px; }
  .growth-app .original-overview .original-heading h2 { display:flex; align-items:center; gap:12px; font-size:13px; }
  .growth-app .original-overview .original-count { display:inline-flex; align-items:baseline; gap:8px; }
  .growth-app .original-overview .original-count small { display:inline; margin:0; font-size:10px; font-weight:400; }
  .growth-app .original-overview .sale-options { padding:0; margin:0; border:0; background:none; }
  .growth-app .original-overview .original-craft { display:grid; grid-template-columns:minmax(0,1fr) 210px; align-items:center; gap:16px; padding:10px 14px; border-style:solid; }
  .growth-app .original-overview .recipe-costs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0; }
  .growth-app .original-overview .recipe-costs>span { display:flex; flex-direction:column; align-items:flex-start; gap:3px; font-size:11px; }
  .growth-app .original-overview .recipe-costs b { text-align:left; font-size:13px; }
  .growth-app .original-overview .original-inventory { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:stretch; }
  .growth-app .original-overview .original-card { padding:12px; min-height:160px; gap:10px; }
  .growth-app .original-overview .original-card-top { gap:7px; }
  .growth-app .original-overview .original-card-top>.icon { flex-shrink:0; }
  .growth-app .original-overview .original-card h3 { flex:1; min-width:0; font-size:13px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
  .growth-app .original-overview .original-card-top>span { flex-shrink:0; font-size:10px; }
  .growth-app .original-overview .original-effects { margin:0; }
  .growth-app .original-overview .original-effects dt,.growth-app .original-overview .original-effects dd { font-size:12px; line-height:1.55; }
  .growth-app .original-overview .original-effects dd { min-width:0; }
  .growth-app .original-card-actions { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:8px; margin-top:auto; }
  .growth-app .original-card-actions .original-sell { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; border:1px solid #6f8266; border-radius:6px; padding:5px 4px; margin:0; font-size:11px; text-decoration:none; }
  .growth-app .original-card-actions .original-sell small { font:500 11px var(--display); color:#e3d39d; }
  .growth-app .original-card-actions .original-sell:disabled { opacity:.45; cursor:not-allowed; }
}
@media(min-width:821px) and (max-width:1119px) and (max-height:800px) {
  .growth-app .original-overview { gap:10px; }
  .growth-app .original-overview .original-inventory { gap:10px; }
  .growth-app .original-overview .original-card { min-height:148px; padding:10px; gap:8px; }
}

/* 0.12: collection records and crafting share the existing workshop frame. */
.workshop-navigation { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-shrink:0; }
.tools-modes { display:flex; padding:2px; gap:2px; border:1px solid #617864; border-radius:6px; }
.tools-modes button { border:0; background:transparent; color:#b9ccae; border-radius:4px; font:600 12px var(--body); padding:4px 14px; min-height:28px; cursor:pointer; }
.tools-modes button[aria-pressed=true] { background:#cbd8b2; color:#294a3d; }
.tools-modes button:focus-visible { outline:2px solid #e4bf76; outline-offset:2px; }
.part-collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.part-collection-card { display:grid; grid-template-rows:24px 22px 22px 24px 18px 18px; gap:2px; height:160px; min-width:0; padding:10px 14px; border:1px solid #4a6663; border-radius:10px; background:#213c40; }
.part-collection-card h2 { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; white-space:nowrap; }
.part-collection-card h2 .icon { width:21px; height:21px; }
.part-collection-card>div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; line-height:18px; }
.part-collection-card>div>span { font-size:12px; color:#abc1b0; white-space:nowrap; }
.part-collection-card strong { font:500 20px/22px var(--display); color:#eee7cf; }
.part-collection-card b { font:500 16px/20px var(--display); color:#d7dfbd; }
.part-collection-card strong,.part-collection-card b { white-space:nowrap; font-variant-numeric:tabular-nums; }
.part-collection-card .collection-bonus { padding-top:2px; border-top:1px solid #6c855344; }
.part-collection-card .collection-bonus>b { color:#e2c580; }
.part-collection-card .collection-extra>b { font-size:13px; line-height:18px; }
.part-collection-card .collection-extra>span,.part-collection-card .collection-note { font-size:11px; }
.part-collection-card .collection-note { line-height:18px; margin:0; color:#abc1b0; }
.collection-rule { margin:0; font-size:12px; line-height:18px; color:#abc1b0; }

/* Four equipped slots and four inventory cards within the PC frame. */
.growth-app .equipment-workshop { gap:8px; }
.growth-app .equipment-workshop .equipment-slots { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; }
.growth-app .equipment-workshop .equipment-slot { min-width:0; min-height:65px; padding:7px; }
.growth-app .equipment-workshop .equipment-slot>.eyebrow { font-size:10px; margin-bottom:5px; line-height:16px; white-space:nowrap; }
.growth-app .equipment-workshop .equipment-slot>div { min-width:0; gap:7px; }
.growth-app .equipment-workshop .equipment-slot>div strong { min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.growth-app .equipment-workshop .equipment-slot>div>.icon { width:21px; height:21px; }
.equipment-browser-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.equipment-browser-heading .equipment-category-tabs { margin:0; gap:6px; }
.equipment-browser-heading .equipment-category-tabs button { gap:6px; padding:7px 9px; }
.equipment-browser-heading .equipment-category-tabs .icon { width:20px; height:20px; }
.equipment-browser-heading .sale-options { margin:0; padding:0; border:0; background:none; white-space:nowrap; }
.growth-app .owned-equipment-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.growth-app .owned-equipment-list>.equipment-empty { grid-column:1 / -1; }
.growth-app .owned-equipment-card { min-width:0; min-height:120px; grid-template-columns:minmax(0,1fr) 106px; grid-template-rows:20px auto; padding:6px 12px; column-gap:12px; row-gap:2px; }
.inventory-uniques { grid-column:1 / -1; display:flex; justify-content:space-between; gap:8px; min-width:0; padding:0; border:0; background:transparent; color:#eedb94; text-align:left; font:500 11px/20px var(--body); cursor:pointer; }
.inventory-uniques>span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inventory-uniques:focus-visible { outline:2px solid #e4bf76; outline-offset:2px; }
.gear-unique-popover { width:min(510px,calc(100% - 32px)); background:#edf0d9; color:#365848; }
.gear-unique-popover .tool-button { color:#46664e; }
.gear-unique-popover .unique-effect-row { margin-top:12px; }
.gear-unique-popover .unique-effect-row small { display:block; margin-top:4px; font-size:12px; line-height:1.7; }
.growth-app .owned-equipment-name { grid-column:1 / -1; gap:8px; }
.growth-app .owned-equipment-name>.icon { width:22px; height:22px; }
.growth-app .owned-equipment-name>div { display:flex; align-items:baseline; gap:8px; min-width:0; }
.growth-app .owned-equipment-name small { white-space:nowrap; }
.growth-app .owned-equipment-name h2 { margin:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.growth-app .owned-equipment-effects { grid-column:1; grid-row:2; }
.growth-app .owned-equipment-effects .modifier-list { margin:0; }
.growth-app .owned-equipment-effects .modifier-list>div { margin:0; min-height:18px; }
.growth-app .owned-equipment-effects .modifier-list dt,.growth-app .owned-equipment-effects .modifier-list dd { font-size:12px; line-height:18px; }
.growth-app .equipment-workshop .modifier-list dd.drawback { color:#efad98; }
.growth-app .owned-equipment-card>.original-card-actions { grid-column:2; grid-row:2; margin:0; grid-template-columns:1fr; gap:4px; }
.growth-app .owned-equipment-card .secondary-button { min-height:32px; padding:5px; font-size:12px; }
.growth-app .owned-equipment-card .original-sell { padding:4px; line-height:14px; }
.growth-app .owned-equipment-card .original-sell small { line-height:14px; }
.growth-app .equipment-workshop .view-pagination { margin:0; min-height:30px; }
/* 0.14: DIY stays in the equipment view; its quote never expands the page. */
.equipment-count { display:flex; align-items:center; gap:8px; color:#afc2ae; font-size:12px; white-space:nowrap; }
.equipment-count b { font:500 20px var(--display); color:#e8d49e; }
.equipment-count small { font-size:10px; }
.equipment-category-actions { display:flex; align-items:center; gap:18px; min-width:0; }
.equipment-category-actions .equipment-category-tabs { flex-shrink:0; white-space:nowrap; }
.equipment-category-actions .diy-open { display:flex; align-items:center; flex-shrink:0; width:auto; gap:6px; white-space:nowrap; padding:7px 10px; min-height:36px; font-size:12px; background:#dedfac; color:#28463d; }
.equipment-category-actions .diy-open .icon { width:16px; height:16px; }
.equipment-browser-heading .sale-options label { font-size:11px; }
.diy-dialog { width:760px; padding:22px 26px; text-align:left; overflow:visible; }
.diy-dialog h2 { margin:7px 0 4px; font-size:23px; }
.diy-dialog .diy-intro { margin:0 0 14px; line-height:20px; }
.diy-stage { display:grid; min-height:400px; }
.diy-stage>.diy-panel { grid-area:1 / 1; min-width:0; }
.diy-panel[aria-hidden="true"],.diy-dialog[data-stage="result"] #confirm-diy { visibility:hidden; pointer-events:none; }
.diy-result-panel { display:flex; flex-direction:column; justify-content:space-between; padding-bottom:12px; }
.diy-result-card { padding:16px 20px; border:1px solid #b5c6a9; border-radius:10px; background:#edf0dc; }
.diy-result-heading { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.diy-result-heading>.icon { width:34px; height:34px; flex-shrink:0; color:#59713c; }
.diy-result-heading>div { min-width:0; }
.diy-result-heading span { font-size:12px; color:#617767; }
.diy-result-heading h3 { margin:3px 0 0; font-size:20px; line-height:26px; color:#264b3d; overflow-wrap:anywhere; }
.diy-result-card .original-effects.modifier-list { margin:0; }
.diy-result-card .original-effects.modifier-list>div { margin-bottom:3px; }
.diy-result-card .original-effects.modifier-list dt { color:#49604c; font-size:13px; }
.diy-result-card .original-effects.modifier-list dd { font-size:14px; }
.diy-result-card .original-effects.modifier-list .benefit { color:#496531; }
.diy-result-card .original-effects.modifier-list .drawback { color:#a1472c; }
.diy-result-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.diy-result-actions button { min-height:44px; padding:9px 12px; font-size:13px; }
.diy-result-actions .secondary-button { color:#41604c; border-color:#9aae91; background:transparent; }
.diy-result-actions b { margin-left:8px; white-space:nowrap; }
.diy-result-actions button:disabled { opacity:.45; cursor:not-allowed; }
.diy-summary { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin:0 0 12px; }
.diy-summary b { margin-left:5px; font:600 18px var(--display); }
.diy-summary small { margin-left:8px; font-size:10px; color:#617767; }
.diy-cost-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.diy-cost-item { display:flex; flex-direction:column; justify-content:center; min-width:0; height:88px; padding:9px 11px; border:1px solid #b5c6a9; border-radius:8px; background:#edf0dc; }
.diy-cost-item>span { display:flex; align-items:center; gap:6px; color:#456451; font-size:11px; white-space:nowrap; }
.diy-cost-item .icon { width:17px; height:17px; }
.diy-cost-item strong { color:#264b3d; margin-top:5px; font:600 21px/25px var(--display); white-space:nowrap; }
.diy-cost-item strong small { font:500 11px var(--body); }
.diy-cost-item>small { margin-top:2px; font:500 11px/15px var(--body); color:#62745d; white-space:nowrap; }
.diy-cost-item.is-short { border-color:#c48067; background:#f8e8d9; }
.diy-cost-item.is-short strong,.diy-cost-item.is-short>small,.diy-availability.is-short { color:#9b472e; }
.diy-cost-modifiers { display:flex; justify-content:space-between; gap:12px; margin:12px 0 8px; font-size:12px; }
.diy-cost-modifiers b { margin-left:5px; color:#4c674e; font-variant-numeric:tabular-nums; }
.diy-cost-rule { color:#697a64; font-size:11px; line-height:18px; margin:0; }
.diy-availability { font-size:12px; line-height:18px; min-height:36px; margin:10px 0 0; }
.diy-dialog #diy-feedback { min-height:18px; margin:0 0 8px; font-size:11px; line-height:18px; color:#9b472e; }
.diy-actions { display:grid; grid-template-columns:1fr 2fr; gap:12px; }
.diy-actions button { min-height:43px; font-size:13px; }
.diy-actions .secondary-button { color:#41604c; border-color:#9aae91; background:transparent; }
.diy-actions .primary-button:disabled { opacity:.45; cursor:not-allowed; }
.product-preview .familiar-tag { padding:3px 5px; border:1px solid #9e916080; border-radius:4px; color:#53683f; font-size:10px; line-height:18px; text-align:center; white-space:nowrap; background:#dfe8c766; }

/* Unique DIY effects stay compact in the quote and split cleanly in the result. */
.diy-unique-note { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; margin:6px 0 8px; color:#49604c; font-size:11px; }
.unique-catalog-toggle { flex-shrink:0; padding:4px 8px; border:1px solid #9aae91; border-radius:5px; color:#41604c; background:#f3f5e8; font-size:11px; }
.unique-catalog { width:min(700px,calc(100vw - 32px)); max-height:min(560px,calc(100vh - 48px)); padding:16px; border:1px solid #899c7c; border-radius:10px; background:#edf0dc; color:#29483c; box-shadow:0 18px 48px #10241f66; }
.unique-catalog::backdrop { background:#10241f66; }
.unique-catalog-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.unique-catalog-heading strong { font-size:15px; }
.unique-catalog-heading span { color:#657761; font-size:10px; }
.unique-catalog-heading button { border:0; padding:2px 7px; background:transparent; color:#49604c; font-size:20px; line-height:22px; cursor:pointer; }
.unique-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.unique-catalog-grid article { min-width:0; min-height:74px; padding:8px 9px; border:1px solid #b5c6a9; border-radius:7px; background:#f7f8eb; }
.unique-catalog-grid h4 { margin:0 0 3px; color:#355b45; font-size:12px; line-height:16px; }
.unique-catalog-grid p { margin:0; color:#60715e; font-size:10px; line-height:14px; }
.unique-catalog-grid small { display:block; margin-top:3px; color:#8d6b36; font-size:9px; }
.diy-result-effects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.diy-effect-column { min-width:0; padding:10px 12px; border:1px solid #c7d1b9; border-radius:7px; background:#f4f5e9; }
.diy-effect-column h4 { margin:0 0 7px; color:#355b45; font-size:12px; }
.diy-effect-column h4 small { color:#75826d; font-size:10px; font-weight:500; }
.diy-effect-column .original-effects.modifier-list { margin:0; }
.diy-effect-column .original-effects.modifier-list>div { margin-bottom:3px; }
.diy-unique-effects .unique-effect-list { display:grid; gap:5px; }
.diy-unique-effects .unique-effect-row { display:grid; gap:2px; padding-bottom:4px; border-bottom:1px solid #d4dcc9; }
.diy-unique-effects .unique-effect-row:last-child { border-bottom:0; padding-bottom:0; }
.unique-effect-name { color:#355b45; font-size:12px; line-height:16px; }
.unique-effect-row small { color:#687863; font-size:10px; line-height:14px; }
.unique-stack-note { margin:8px 0 0; color:#45623d; font-size:11px; line-height:16px; }
.unique-effects { margin-top:8px; }
.unique-effects h4 { margin:0 0 4px; color:#49604c; font-size:11px; }
.unique-effects h4 small { color:#7a896f; font-size:10px; font-weight:500; }
.unique-effects.is-compact .unique-effect-list { display:flex; flex-wrap:wrap; gap:4px 8px; }
.unique-effects.is-compact .unique-effect-row { min-width:0; padding:0; border:0; }
.unique-effects.is-compact .unique-effect-name { display:block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; line-height:16px; }
.unique-equipment-effects { margin-top:12px; padding-top:10px; border-top:1px solid #6c855344; }
.unique-equipment-effects h3 { margin:0 0 7px; color:#49604c; font-size:13px; }
.unique-equipment-effects h3 small { color:#75826d; font-size:10px; font-weight:500; }
.unique-equipment-effects .modifier-list { margin:0; }
.unique-equipment-effects .modifier-list dd { font-size:11px; }
.unique-equipment-compact { margin:7px 0 0; color:#60715e; font-size:10px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.equipment-workshop .unique-effect-name { color:#e5d49a; }
.unique-effects-empty { margin:0; color:#75826d; font-size:10px; }
@media(max-width:820px) {
  .unique-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .diy-result-effects { grid-template-columns:1fr; }
}

/* The equipment detail popover uses fixed tab content instead of a long scroll. */
.equipment-popover { width:min(860px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:visible; }
.equipment-detail-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin:14px 0 10px; padding:3px; border:1px solid #afbd9766; border-radius:7px; background:#d9e2c2; }
.equipment-detail-tabs button { min-height:32px; padding:6px 7px; border:0; border-radius:5px; background:transparent; color:#5b7157; font:600 11px var(--body); cursor:pointer; }
.equipment-detail-tabs button[aria-selected="true"] { background:#48624d; color:#f0e8c8; }
.equipment-detail-tabs button:focus-visible,.equipment-detail-slot-tabs button:focus-visible { outline:2px solid #d0a957; outline-offset:2px; }
.equipment-detail-content { min-height:450px; }
.equipment-detail-view,.equipment-detail-panel { min-height:450px; }
.equipment-detail-panel { box-sizing:border-box; padding:14px 16px; border:1px solid #b2c19f; border-radius:8px; background:#f5f6e8; color:#42604d; }
.equipment-detail-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.equipment-detail-heading h3 { margin:0; color:#315842; font-size:15px; }
.equipment-detail-heading span { color:#708066; font-size:10px; }
.equipment-detail-value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.equipment-detail-value-grid>div { min-width:0; padding:9px 11px; border:1px solid #c5d0b9; border-radius:6px; background:#e8ecd9; }
.equipment-detail-value-grid span,.equipment-detail-value-grid small { display:block; color:#6d7d68; font-size:10px; line-height:16px; }
.equipment-detail-value-grid strong { display:block; margin:3px 0; color:#315842; font:600 17px/22px var(--display); white-space:nowrap; }
.equipment-detail-context { margin:9px 0 12px; color:#78866d; font-size:10px; }
.equipment-detail-total { padding-top:10px; border-top:1px solid #b8c5aa; }
.equipment-detail-total h4 { margin:0 0 7px; color:#48624d; font-size:12px; }
.equipment-detail-total .modifier-list>div { margin-bottom:4px; }
.equipment-detail-two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; align-content:start; }
.equipment-detail-two-column>div { min-width:0; margin:0; padding:5px 0; border-bottom:1px solid #d4dcc9; }
.equipment-detail-two-column dt { color:#526b56; font-size:11px; line-height:18px; }
.equipment-detail-two-column dd { color:#45663e; font-size:11px; line-height:18px; }
.equipment-detail-two-column dd.neutral { color:#78866d; }
.equipment-detail-two-column dt small { color:#7a896f; margin-left:4px; font-size:9px; }
.equipment-detail-rare .equipment-detail-heading { margin-bottom:10px; }
.rare-detail-locked { margin:0 0 10px; padding:9px 10px; border:1px dashed #a3b39a; border-radius:6px; color:#77866e; font-size:11px; }
.rare-detail-count { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px solid #d4dcc9; color:#5d705a; font-size:11px; }
.rare-detail-count b { color:#48633f; font:600 12px var(--display); white-space:nowrap; }
.rare-detail-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.rare-detail-columns>section { min-width:0; }
.rare-detail-columns h4 { margin:0 0 6px; color:#48624d; font-size:12px; }
.rare-detail-columns .modifier-list { display:grid; grid-template-columns:1fr; gap:2px; }
.rare-detail-columns .modifier-list>div { margin:0; padding:3px 0; border-bottom:1px solid #d4dcc9; }
.rare-detail-columns .modifier-list dt,.rare-detail-columns .modifier-list dd { font-size:11px; line-height:17px; }
.rare-detail-limits { margin:8px 0 0; color:#718269; font-size:10px; line-height:16px; }
.rare-milestone-list { display:grid; gap:4px; }
.rare-milestone { padding:5px 8px; border:1px solid #c5d0b9; border-radius:6px; background:#e8ecd9; }
.rare-milestone>div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.rare-milestone strong { color:#526b56; font-size:11px; }
.rare-milestone small { color:#7a896f; font-size:9px; white-space:nowrap; }
.rare-milestone p { margin:4px 0 0; color:#718269; font-size:10px; line-height:16px; }
.rare-milestone.is-achieved { border-color:#8ea97c; background:#e2ecd7; }
.rare-milestone.is-achieved strong { color:#3f693f; }
.part-detail-grid { gap:7px 18px; }
.part-detail-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline; gap:8px; }
.part-detail-row>div { display:flex; flex-direction:column; min-width:0; }
.part-detail-row strong { color:#48624d; font-size:11px; }
.part-detail-row small,.part-detail-row>span { color:#7a896f; font-size:9px; }
.part-detail-row b { color:#45663e; font:600 12px var(--display); white-space:nowrap; }
.equipment-detail-unique>.unique-equipment-effects { margin-top:0; padding-top:0; border-top:0; }
.equipment-detail-unique .unique-equipment-effects h3 { display:none; }
.equipment-detail-unique .unique-equipment-effects .modifier-list { display:grid; grid-template-columns:1fr; gap:4px; }
.equipment-detail-unique .unique-equipment-effects .modifier-list>div { display:grid; grid-template-columns:160px minmax(0,1fr); align-items:baseline; min-width:0; margin:0; padding:8px 0; border-bottom:1px solid #d4dcc9; }
.equipment-detail-unique .unique-equipment-effects .modifier-list dt,.equipment-detail-unique .unique-equipment-effects .modifier-list dd { font-size:12px; line-height:18px; }
.equipment-detail-unique .unique-equipment-effects .modifier-list dd { white-space:normal; }
.equipment-detail-slot-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-bottom:12px; padding:3px; border:1px solid #c5d0b9; border-radius:6px; background:#e8ecd9; }
.equipment-detail-slot-tabs button { min-height:28px; padding:5px 4px; border:0; border-radius:4px; background:transparent; color:#60745e; font:600 10px var(--body); cursor:pointer; }
.equipment-detail-slot-tabs button[aria-selected="true"] { background:#aec49e; color:#315842; }
.equipment-detail-source { padding:11px 12px; border-radius:7px; background:#e8ecd9; }
.equipment-detail-source>small { color:#718269; font-size:10px; }
.equipment-detail-source h4 { margin:4px 0 9px; color:#315842; font-size:14px; }
.equipment-detail-source .unique-effects { margin-top:10px; padding-top:7px; border-top:1px solid #c5d0b9; }
.equipment-detail-source .unique-effects .unique-effect-row { margin-top:6px; }
.equipment-detail-source .unique-effects .unique-effect-row small { font-size:12px; line-height:18px; }
@media(max-width:640px) {
  .equipment-detail-content,.equipment-detail-view,.equipment-detail-panel { min-height:450px; }
  .equipment-detail-value-grid,.equipment-detail-two-column,.equipment-detail-unique .unique-equipment-effects .modifier-list,.rare-detail-columns { grid-template-columns:1fr; }
  .equipment-detail-tabs button { font-size:10px; padding-inline:3px; }
}

@media(max-width:760px) {
  .rare-collection-summary { align-items:flex-start; }
  .rare-collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Reserve both status tags so a familiar proc never changes the purchase bar height. */
.product-preview .product-title { grid-template-columns:minmax(0,1fr) 96px 108px; }
.product-preview .familiar-tag { padding:3px 5px; border:1px solid #d0b66d99; border-radius:4px; color:#f0dda0; font-size:10px; line-height:18px; text-align:center; white-space:nowrap; background:#75603366; }
.product-preview .familiar-tag[aria-hidden="true"] { visibility:hidden; }
/* Keep readable card widths; measured row capacity determines pagination. */
@media(min-width:821px) {
  .growth-app .collection-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); grid-auto-rows:1fr; align-items:stretch; }
  .growth-app .collection-card .entry-art { margin:6px auto; }
  .growth-app .collection-card h2 { margin-bottom:6px; }
  .growth-app .collection-card blockquote { margin:4px 0; }
  .growth-app .collection-card .entry-drops { margin:4px 0 8px; }
  .growth-app .collection-card footer { margin-top:10px; padding-top:8px; }
  .growth-app .collection-card .rare-collection { margin-top:auto; }
  .growth-app .owned-equipment-list { grid-template-columns:repeat(auto-fit,minmax(390px,1fr)); }
  .growth-app [data-page-list] { flex-shrink:0; }
}
@media(max-width:760px) {
  .product-preview .product-title { grid-template-columns:minmax(0,1fr) 78px 88px; gap:6px; }
}
/* Challenge cards share the measured, scroll-free PC paging area. */
.growth-app .challenge-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.growth-app .challenge-card { padding:9px 12px; min-width:0; min-height:174px; gap:4px; }
.growth-app .challenge-card .eyebrow { margin:0; }
.growth-app .challenge-card h2 { margin:0; font-size:14px; line-height:22px; }
.growth-app .challenge-card h2 small { margin-right:6px; color:#aac094; font:500 12px var(--display); }
.growth-app .challenge-card .challenge-numbers { margin:0; gap:8px; align-items:center; }
.growth-app .challenge-numbers>strong { font:600 13px/1.5 var(--body); color:#efd6a8; }
.growth-app .challenge-card .challenge-rules { margin:0; font-size:11px; line-height:16px; min-height:32px; }
.growth-app .challenge-card .challenge-reward { margin:0; min-height:32px; font-size:12px; line-height:16px; }
.growth-app .challenge-reward b,.growth-app .challenge-reward small { display:block; }
.growth-app .challenge-reward small { font-size:11px; color:#aab9a0; }
.growth-app .challenge-card .secondary-button { margin-top:auto; min-height:30px; padding:5px 7px; font-size:11px; line-height:18px; }
.growth-app .challenge-card.is-cleared { border-color:#72906c; background:#3c65472b; }
.growth-app .challenge-strip>div:first-child { min-width:0; }
.growth-app .challenge-strip #challenge-price { font:600 13px/1.5 var(--body); }
.growth-app .upgrade-modes button { padding-inline:8px; }
/* Progress guidance uses two fixed lines, with the existing map yielding space. */
.growth-app .progression-nav { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:8px; height:52px; min-height:52px; flex-shrink:0; padding:6px 12px; border-block:1px solid var(--line); background:rgba(218,227,177,.06); }
.growth-app #progression-label { font-size:11px; color:var(--teal); font-weight:700; white-space:nowrap; }
.growth-app .progression-copy { display:grid; gap:3px; min-width:0; }
.growth-app #progression-title, .growth-app #progression-hint { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:16px; }
.growth-app #progression-title { font-size:12px; }
.growth-app #progression-hint { font-size:11px; color:var(--muted); }
.growth-app #progression-action { color:#e5c071; font-size:11px; font-weight:700; min-height:32px; white-space:nowrap; padding:4px 0 4px 6px; }
.growth-app .progression-nav.is-new { background:rgba(226,192,109,.13); }
.growth-app .progression-nav.is-new #progression-label { color:#e5c071; }
.growth-app #upgrade-guide { grid-column:1/-1; grid-row:1/-1; min-width:0; }
.growth-app .upgrade-list.has-unlock-guide { grid-template-rows:minmax(0,1fr); }
.growth-app .feature-unlock-guide { height:100%; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(218,227,177,.05); }
.growth-app .feature-unlock-guide h3 { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; }
.growth-app .feature-unlock-guide h3 .icon { width:18px; height:18px; }
.growth-app .feature-unlock-guide p { margin:0; font-size:12px; line-height:1.6; }
.growth-app .feature-unlock-guide button { font-size:12px; min-height:34px; padding:6px 8px; }
.growth-app .challenge-card[aria-current="location"] { border-color:#e5c071; box-shadow:inset 0 0 0 1px #e5c071; }
.growth-app .challenge-card.is-guided { animation:challenge-guide 1.8s ease-out; }
@keyframes challenge-guide { from { box-shadow:inset 0 0 0 3px #e5c071,0 0 15px #e5c07166; } to { box-shadow:inset 0 0 0 1px #e5c071; } }
@media (prefers-reduced-motion:reduce) { .growth-app .challenge-card.is-guided { animation:none; } }