/* M19: Veynord's single appearance layer. Layout and behavior stay in layout.css.
   Tokens -> typography -> panels -> controls -> items -> responsive adjustments. */
@layer layout, theme;
@layer theme {
:root {
 --bg:#101710; --panel:#182219; --panel2:#233024;
 --border:#3e4a38; --gold:#d8b77b; --text:#efeade; --muted:#b5bcae; --green:#a7c5a5;
 --edge:#766847; --edge-light:#b49a65; --danger:#dfa998;
 --surface:linear-gradient(145deg,#222e22,#162017 75%);
 --metal:linear-gradient(180deg,#35432f,#202e22 35%,#162219);
 --metal-primary:linear-gradient(180deg,#71613c,#4a452d 32%,#303723);
 --art-bg:radial-gradient(ellipse at 50% 45%,#283324,#0c140e 78%);
 --radius:10px; --radius-small:6px;
 --control-shadow:inset 0 1px #ead6aa25,0 2px 6px #0003;
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
 --font-display:VeynordDisplay,Georgia,serif; --font-body:VeynordText,Georgia,serif;
 --font-small:.875rem; --font-tiny:.75rem;
 font-size:16px; color-scheme:dark;
}
body{font-family:var(--font-body);font-size:1rem;line-height:1.55;color:var(--text);background:radial-gradient(ellipse at top right,#243023,transparent 55%),var(--bg)}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,.enemy strong,.hero-attribute-top strong,.hero-level strong,.training-symbol strong,.rewards strong,.countdown{
 font-family:var(--font-display);font-weight:600;letter-spacing:.01em;line-height:1.3;word-break:normal;overflow-wrap:break-word;
}
h1{font-size:1.75rem}h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:8px 0 12px}h3{font-size:1.2rem}h4{font-size:1rem;margin:0 0 12px}
p{line-height:1.6}small{line-height:1.45}
.eyebrow,.hero-kicker,.body-caption,.body-slot>span,.rarity-label{font-family:var(--font-display);font-size:var(--font-tiny);letter-spacing:.06em;line-height:1.5}
.eyebrow,.hero-kicker{color:var(--gold)}
.section-head{display:grid;gap:var(--space-2);margin-bottom:var(--space-6)}.section-head h2,.section-head p{margin:0}.section-head p{font-size:1rem;max-width:65ch;color:var(--muted)}
.top{padding:12px 32px}.top .wallet{gap:8px 24px}.top .wallet small{font-size:var(--font-tiny)}.top .wallet strong{font-size:1.125rem;font-variant-numeric:tabular-nums}
main{padding:28px 32px;max-width:1300px}.surface{min-width:0}.surface>p{margin:16px 0;color:var(--muted)}
/* A panel has one quiet edge. Rarity belongs to an item, not every nested box. */
.quest-card,.paperdoll,.backpack,.training.illustrated-training,.report,.contract,.mission-running,.empty,.initial,.encounter-panel,.emerald-wallet,.hero.hero-card{
 background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius);padding:var(--space-6);box-shadow:0 6px 20px #0002;
}
.hero.hero-card{padding:0}.quest-card{margin:20px 0}.quest-card>p{font-size:1rem;margin:12px 0;max-width:76ch;line-height:1.6}
.quest-card h3{margin:8px 0 12px}.quest-card article{padding:16px 0;border-color:var(--border)}
.quest-card button{margin:8px 8px 0 0}.quest-card>button{margin:8px 0 0;max-width:100%}.quest-card>button+button{margin-top:8px}
.quest-card .primary{margin-right:0}.quest-choices{gap:16px}
.quest-choices>div,.loadout-grid>section,.growth-grid>article,.hero-attribute{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-small);padding:16px;box-shadow:none}
.growth-grid .unlocked{border-color:var(--edge-light)}.hero-attribute{padding:12px}
.route-group{padding:0;border:0;background:none;box-shadow:none}.route-heading{margin-bottom:16px}.route-heading h3{font-size:1.25rem}
.enemy-card{padding:16px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--surface)}
.route-group .enemy-card{padding:16px}.route-group .enemy{padding:0 0 16px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;box-shadow:none;gap:14px;text-align:left;color:var(--text)}
.route-group .enemy strong{font-size:1.125rem}.enemy small{font-size:var(--font-tiny);letter-spacing:.025em}.enemy em{color:var(--gold);font-size:var(--font-small)}
.route-group .enemy-avatar{width:80px;height:100px;border:1px solid var(--border);border-radius:var(--radius-small);object-fit:cover}
/* Text actions are explicit siblings of image cards and navigation. */
button:where(:not(.nav-art-button,.item-card,.item-slot,.empty-slot,.enemy,[data-offer],[data-loot],[data-preview-type],[data-resume-battle])){
 position:relative;min-height:48px;padding:12px 16px;border:1px solid var(--edge-light);border-radius:var(--radius-small);
 background:var(--metal);color:#ead6aa;box-shadow:var(--control-shadow);
 font-family:var(--font-display);font-size:.875rem;font-weight:600;letter-spacing:.02em;line-height:1.4;
 text-align:center;white-space:normal;overflow-wrap:break-word;transition:background .15s,border-color .15s;
}
button::before{content:none}
button.primary{background:var(--metal-primary);border-color:var(--gold);color:#ffedc2}
button.secondary{background:var(--metal);box-shadow:var(--control-shadow);border-color:var(--edge-light);color:#ead6aa}
button[data-act=sell],button[data-act=dismantle]{color:var(--danger);border-color:#926d55}
button:disabled{opacity:1;cursor:not-allowed;color:#949b8b;background:#1b251b;border-color:#46513e;box-shadow:none}
button:active:not(:disabled){transform:none}
@media(hover:hover){
 button:where(:not(.nav-art-button,.item-card,.item-slot,.empty-slot,.enemy,[data-preview-type],[data-shop-quality],[data-quality])):hover:not(:disabled){border-color:var(--gold);color:var(--text);background:var(--panel2)}
 button.primary:hover:not(:disabled){background:linear-gradient(180deg,#837044,#454b2d);color:#fff2cf}
 .route-group .enemy:hover{background:transparent;color:var(--gold)}
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #f2d69a;outline-offset:3px}
input:not([type=radio]),select,textarea,.catalog-tools select,.catalog-tools input,.bag-tools select{
 min-height:48px;padding:10px 12px;background:#101a12;border:1px solid var(--edge);border-radius:var(--radius-small);color:var(--text);font:400 1rem/1.5 var(--font-body);
}
input[type=radio]{accent-color:var(--gold)}.catalog-tools label,.bag-tools label{font-size:var(--font-small);color:var(--muted)}
.catalog-tools,.backpack .bag-tools{gap:12px}.catalog-pages{font-size:var(--font-small)}
.training-amount label,.durations label{min-height:48px;border:1px solid var(--edge);border-radius:var(--radius-small);background:var(--metal);font-family:var(--font-display);font-size:.875rem}
.training-amount .chosen,.durations .chosen{border-color:var(--gold);background:var(--metal-primary);box-shadow:none;color:#ffedc2}
button[aria-pressed=true]:where([data-route],[data-merchant-mode]){border-color:var(--gold);box-shadow:inset 0 -3px var(--gold);background:var(--metal-primary)}
.route-picker button{padding:12px;text-align:left;font-family:var(--font-body);font-size:.9375rem;letter-spacing:0}.route-picker strong{font-weight:600}.route-picker small{font-size:var(--font-tiny)}
.scene-choices button{text-align:left;font-family:var(--font-body);font-size:1rem;letter-spacing:0}
.training-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.training.illustrated-training{gap:16px;padding:20px;grid-template-columns:76px minmax(0,1fr)}
.training-copy h3{font-size:1.125rem}.training-copy p,.training-copy small{font-size:var(--font-small);line-height:1.5}.training-symbol img{width:72px;height:72px;background:var(--art-bg);border-radius:var(--radius-small)}
.training-symbol strong{font-family:var(--font-display);font-size:1.75rem}.training.illustrated-training>button{background:var(--metal);border-color:var(--edge-light);font-size:.875rem}
/* Shared item visual: square contained art, a single rarity edge and stable text rows. */
.quality-common{--quality:#b9c0b3}.quality-uncommon{--quality:#80cc8c}.quality-rare{--quality:#79b5ff}.quality-epic{--quality:#ff8585}
.item-card,.loot-list button{
 min-width:0;border:1px solid var(--quality,var(--edge));border-radius:var(--radius-small);background:var(--panel);color:var(--text);box-shadow:inset 0 1px #ead6aa12;
 font-family:var(--font-body);font-weight:400;letter-spacing:0;line-height:1.45;overflow-wrap:normal;word-break:normal;
}
.item-card img,.loot-list img,.detail-art{display:block;max-width:100%;aspect-ratio:1;object-fit:contain;background:var(--art-bg);border-radius:var(--radius-small)}
.item-card:where(.merchant-card,.loot-card,.reward-item){padding:10px;gap:8px;display:flex;flex-direction:column;align-items:stretch;text-align:left}
.item-card:where(.merchant-card,.loot-card,.reward-item)>img{width:100%;height:auto;max-width:100%;object-fit:contain;aspect-ratio:1}
.item-card strong,.item-card .loot-preview-name,.reward-item>span{font-family:var(--font-body);font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:0;word-break:normal;overflow-wrap:break-word;color:var(--text)}
.item-card .shop-rarity{font-size:var(--font-tiny);color:var(--quality)}
.merchant-card small{font-size:var(--font-tiny);color:var(--muted)}.merchant-card>strong{min-height:2.8em}.merchant-card>span:not(.shop-rarity){margin-top:auto;font-size:var(--font-small);color:var(--gold)}
.merchant-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.merchant-card.selected{outline:2px solid var(--gold);outline-offset:3px}
.possible-loot.loot-preview-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,5.5rem),1fr));gap:8px;max-width:none;margin:12px 0 16px}
.possible-loot button[data-preview-type]{padding:8px;border:1px solid var(--edge);background:var(--panel);box-shadow:none;border-radius:var(--radius-small);color:var(--text);text-align:left;font-family:var(--font-body);font-size:.8125rem;gap:6px}
.possible-loot button[data-preview-type] img{width:100%;height:auto;object-fit:contain;border-radius:var(--radius-small)}
.loot-preview-name{min-height:2.8em;font-size:.8125rem!important;line-height:1.4;overflow-wrap:break-word;word-break:normal}
.loot-preview-grid>button>small{font-size:.6875rem;color:var(--muted)}
.item-slot{padding:0;width:100%;aspect-ratio:1;overflow:hidden;position:relative}.item-slot img{width:100%;height:100%;object-fit:contain;border-radius:0}
.item-slot .slot-level,.slot-rank{font-family:var(--font-body);font-size:.6875rem;line-height:1.4;background:#101710eb;border-radius:3px;color:var(--text)}
.slot-rank{color:var(--gold)}.empty-slot,.bag-empty{border:1px dashed var(--border);background:#121c14;border-radius:var(--radius-small)}
.item-slot.slot-selected{border-color:var(--quality);outline:2px solid var(--gold);outline-offset:2px}
.possible-loot .reward-item img{width:100%;height:auto}.reward-item{width:148px}.reward-item small{font-size:var(--font-tiny);color:var(--muted)}
.loot-list button{padding:10px;box-shadow:none}.loot-list img{width:64px;height:64px;flex-shrink:0}
/* Every detail view has one outer frame, including hover and long-press dialogs. */
dialog,.item-detail,.item-inspect-dialog{background:var(--panel);border:1px solid var(--quality,var(--edge));border-radius:var(--radius);padding:24px;box-shadow:0 12px 36px #0005;color:var(--text)}
dialog{max-height:calc(100dvh - 32px);overscroll-behavior:contain}dialog::backdrop{background:#070b08c9}
.item-inspect-dialog{padding:16px}.item-hover-preview .item-detail{background:var(--panel);border:1px solid var(--quality,var(--edge));border-radius:var(--radius);padding:16px}
.item-inspect-dialog .item-detail{border:0;background:none;box-shadow:none;margin:0;padding:0;border-radius:0}
.detail-heading{gap:16px;align-items:center;margin-bottom:16px}.detail-heading>div{min-width:0}.detail-heading h3{font-size:1.4rem;line-height:1.3;margin:6px 0;overflow-wrap:break-word}
.detail-art{width:96px;height:96px;border:0;flex-shrink:0}.item-detail>img.detail-art{width:128px;height:128px;object-fit:contain;border-radius:var(--radius-small);margin:16px 0}
.item-model,.item-detail>p,.item-detail>small{font-size:var(--font-small);line-height:1.55;color:var(--muted)}
.item-detail>p{margin:12px 0}.rarity-label{color:var(--quality,var(--muted));font-size:var(--font-small);letter-spacing:.02em}
.quality-impact{background:#101a12;border:0;border-left:3px solid var(--quality,var(--gold));border-radius:0;padding:12px 16px;margin:16px 0;box-shadow:none}
.quality-impact strong{font-size:1.75rem;color:var(--quality,var(--gold))}.quality-impact p{font-size:var(--font-small)}
.socket-info{background:#101a12;border:0;border-left:2px solid var(--border);padding:12px 16px;border-radius:0}
.equipped-reference{border:0;border-radius:var(--radius-small);background:#111b13;padding:12px}.equipped-reference strong{font-size:1rem}.equipped-reference small{font-size:var(--font-tiny)}
.comparison-head{font-family:var(--font-body);font-size:.6875rem;letter-spacing:.035em;margin-top:20px}
.comparison{font-size:var(--font-small)}.comparison>div{padding:12px 0;border-color:var(--border)}.comparison-head,.comparison>div{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.9fr);gap:12px}
.comparison dt{overflow-wrap:break-word}.comparison dd{font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.detail-actions{gap:12px;margin:20px 0 12px}.detail-actions button{min-width:0;flex:1 1 180px}
.rarity-comparison{border-color:var(--border)}.rarity-rows>div{border-left-width:2px;border-radius:0;background:#111b13}
.shop-quality-tabs,.loot-preview-dialog:has([data-quality])>div:has(>[data-quality]){display:flex;flex-wrap:wrap;gap:8px}
button[data-shop-quality],button[data-quality]{border-color:var(--quality);color:var(--quality);font-family:var(--font-body);font-size:var(--font-small);padding:10px 12px;box-shadow:none;background:#121c15}
button[data-shop-quality][aria-pressed=true],button[data-quality][aria-pressed=true]{box-shadow:inset 0 -3px var(--quality);background:var(--panel2)}
/* Feedback is readable without changing the established illustrated navigation. */
.notice{border:1px solid var(--gold);border-radius:var(--radius-small);background:#283421;color:var(--text);font-size:var(--font-small);padding:12px 16px}
.connection{border-radius:var(--radius);background:#2b241b;color:var(--text)}
.battle-dock{background:var(--panel);border-color:var(--edge-light);border-radius:var(--radius)}
.battle-dock button{background:none;border:0;box-shadow:none;display:flex;padding:8px 12px;text-align:left;gap:10px;font:400 .875rem/1.4 var(--font-body);color:var(--text)}
.battle-dock button:hover{background:none}.battle-dock button::before{content:none}
.recipe-grid>.quest-card{padding:16px}.recipe-grid .detail-art{width:64px;height:64px}.recipe-grid h3{font-size:1rem}.recipe-grid p{font-size:var(--font-small)}
.hunt-progress button{padding:10px;font-size:.8125rem}.report h3{font-size:1.4rem}.report p,.combat-round p{font-size:var(--font-small)}
.build-warning{border-left-color:var(--gold);color:#e8cc98}.emerald-wallet{border-color:#56724e}.emerald-wallet p{font-size:var(--font-small)}
@media(max-width:1000px){.merchant-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
 .top{padding:12px 16px}.top .wallet{gap:6px 16px}.top .wallet span{gap:6px}.top .wallet strong{font-size:1rem}.top .wallet small{font-size:.6875rem}
 main{padding:20px 14px 28px}.section-head h2{font-size:1.5rem}.section-head{margin-bottom:20px}
 .quest-card,.paperdoll,.backpack,.report,.contract,.mission-running,.empty,.initial,.encounter-panel,.emerald-wallet{padding:16px}
 .quest-card>p{font-size:1rem}.quest-card>h3{font-size:1.125rem}.quest-card{margin:16px 0}
 .merchant-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.merchant-card strong{font-size:.875rem}
 .training-list{grid-template-columns:minmax(0,1fr)}.training.illustrated-training{padding:16px;gap:12px}.training-copy h3{font-size:1.125rem}
 .item-detail{padding:16px}.detail-heading h3{font-size:1.2rem}.detail-art{width:80px;height:80px}.detail-heading{gap:12px;align-items:flex-start}
 .item-inspect-dialog{padding:16px}.detail-actions button{flex-basis:100%}.comparison{font-size:.8125rem}.comparison-head,.comparison>div{gap:8px}
 .route-group .enemy-card{padding:14px}.route-group .enemy-avatar{width:76px;height:96px}
 .catalog-pages{gap:8px}.catalog-pages button{font-size:.8125rem;padding:10px 12px}.hero-attribute-name{font-size:.875rem}
 .paperdoll .body-slot{width:76px}.paperdoll .body-slot .empty-slot{height:76px}.paperdoll .body-portrait{height:420px}
}
@media(max-width:359px){
 .top .wallet{gap:6px 12px}.top .wallet span{display:grid;gap:0}.detail-art{width:64px;height:64px}
 .merchant-card{padding:8px}.item-card strong{font-size:.8125rem}.comparison-head{font-size:.625rem}
 .hero-attributes{gap:8px}.hero-attribute{padding:8px}.hero-attribute-top img{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* M20: quieter surfaces, legible hierarchy and explicit interaction feedback. */
.quest-card,.paperdoll,.backpack,.training.illustrated-training,.report,.contract,.mission-running,.empty,.initial,.encounter-panel,.emerald-wallet,.enemy-card{border-color:var(--border)}
.eyebrow,.hero-kicker,.rarity-label,.enemy small{font-family:var(--font-body)}
.top .wallet strong,.countdown,.metric-value{font-variant-numeric:tabular-nums}
button:active:not(:disabled,.nav-art-button){filter:brightness(1.12)}
.item-card{transition:border-color .15s,box-shadow .15s}
@media(hover:hover){.item-card:hover:not(:disabled){box-shadow:0 0 0 1px var(--quality,var(--gold)),0 5px 16px #0005}}
.item-card strong,.loot-preview-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.route-group .enemy-avatar{width:96px;height:112px}
.route-group .enemy strong{font-size:1.25rem}
.route-group .enemy-card .possible-loot{grid-template-columns:repeat(auto-fit,minmax(min(100%,5.5rem),1fr));max-width:360px}
.loot-more{width:100%;margin-top:4px}
.item-detail table{font-variant-numeric:tabular-nums}
.item-detail tr:nth-child(even){background:#ffffff03}
.item-detail td,.item-detail th{padding:12px 8px}
.countdown{font-size:clamp(2.5rem,7vw,4rem);color:var(--gold);letter-spacing:.04em}
summary{min-height:44px;cursor:pointer;padding-block:8px}
@media(max-width:600px){
 .top{padding:10px 14px}.section-head{margin-bottom:16px}
 .route-group .enemy-avatar{width:84px;height:104px}
 .route-group .enemy strong{font-size:1.125rem}
 .item-detail table{font-size:.875rem}.item-detail td,.item-detail th{padding:10px 4px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* M21: combat readability and loot presentation. */
.encounter-attack{position:sticky;top:8px;bottom:auto;z-index:5;background:var(--bg);padding:8px;border:1px solid var(--edge);border-radius:var(--radius);box-shadow:0 6px 18px #0006}
.encounter-attack button{width:100%}
.encounter-art{max-height:340px;object-fit:cover;object-position:center 25%}
.duel-stage>div{min-width:0}.duel-stage img{object-position:center 20%;border-radius:var(--radius-small)}
.duel-round{padding:16px;border-left:3px solid var(--gold);background:var(--panel2);border-radius:var(--radius-small)}
.critical-hit{color:var(--gold);font-family:var(--font-display)}
.duel-health{width:100%;height:12px;accent-color:#ad654f;border:0;border-radius:6px;overflow:hidden}
.duel-health::-webkit-progress-bar{background:var(--border)}
.duel-health::-webkit-progress-value{background:linear-gradient(90deg,#7c3d32,#bf7960)}
.reward-reveal{animation:loot-arrive .4s ease-out both}
.reward-reveal.quality-epic{border-width:2px;box-shadow:0 0 20px #ff858525;background:linear-gradient(145deg,#392726,var(--panel))}
.reward-reveal.quality-rare{box-shadow:0 0 14px #79b5ff20}
@keyframes loot-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.reward-reveal{animation:none}}

/* M23: the same gold frame and dark metal as controls, without fake clickability. */
.top .wallet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;min-width:0;max-width:540px;justify-self:center}
.top .wallet .resource-counter{min-width:0;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--edge-light);border-radius:var(--radius-small);background:var(--metal);box-shadow:var(--control-shadow)}
.top .wallet .resource-label{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;font:400 .6875rem/1rem var(--font-body);color:#ead6aa}
.top .wallet .resource-label img{display:block;width:20px;height:20px;flex-shrink:0;object-fit:contain}
.top .wallet .resource-label span{display:block;font:inherit;letter-spacing:0;overflow-wrap:normal;word-break:normal}
.top .wallet .resource-value{font:600 1.0625rem/1.4375rem var(--font-body);font-variant-numeric:tabular-nums;color:var(--gold);max-width:100%;overflow-wrap:anywhere;text-align:center}
.top .wallet [data-resource=emeralds] .resource-value{color:#8bdbad}
@media(max-width:720px){.top .wallet{max-width:none;grid-column:1/-1;justify-self:stretch}}
@media(min-width:721px) and (max-width:1050px){.top{grid-template-columns:minmax(0,1fr) auto}.top .wallet{grid-column:1/-1;grid-row:2;max-width:none}.top #account-button{grid-column:2;grid-row:1}}
@media(max-width:359px){.top .wallet{gap:4px}.top .wallet .resource-counter{padding-inline:4px}.top .wallet .resource-label{gap:3px}}
/* M24 audit: complete states and safe text flow for shared components. */
:root{--positive:#80cc8c;--emerald:#8bdbad;--focus:#f2d69a}
.surface,.quest-card,.report,.item-detail,.empty{overflow-wrap:break-word}
.surface>.section-head:not(:first-child){margin-top:var(--space-8)}
.quest-card article>p+button{margin-top:var(--space-3)}
.quest-card article>p{margin-block:var(--space-2)}
.quest-choices{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.auth-links{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.auth-links>button{flex:1 1 160px;min-width:0;margin:0}
.auth-error:empty{display:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.training-amount{flex-wrap:wrap}
.training-amount label{flex:1 1 60px;box-shadow:var(--control-shadow)}
.training-amount label:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.item-card,.item-slot{min-width:0}
.item-card :where(strong,small,span),.loot-list button>span{min-width:0;max-width:100%;overflow-wrap:break-word}
.item-card .shop-rarity,.rarity-label{color:var(--quality,var(--muted))}
@media(hover:hover){
 .item-card:hover:not(:disabled),.item-slot:hover:not(:disabled){border-color:var(--quality,var(--gold));background:var(--panel2)}
 button[data-shop-quality]:hover:not(:disabled),button[data-quality]:hover:not(:disabled){border-color:var(--quality);color:var(--quality);background:var(--panel2)}
}
dialog{scroll-padding-top:76px}
dialog>button[data-close],dialog .detail-back{position:sticky;top:0;z-index:2;display:block;width:100%;margin:0 0 var(--space-4);background:var(--metal)}
.detail-heading{flex-wrap:wrap}
.detail-heading>div{flex:1 1 150px}
.comparison dd,.rewards strong,.encounter-facts>div,.battle-insight dd{min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.report-monster{align-items:flex-start}.report-monster>div{min-width:0}
.hero-avatar,.hero-level,.hero-attribute-top img,.paperdoll .body-slot>span{border-radius:var(--radius-small)}
.hero-card-header{background:var(--surface);border-color:var(--border)}
.hero-level{border-color:var(--edge);background:var(--bg);color:var(--text)}
.hero-attribute-name{word-break:normal;overflow-wrap:break-word}
.hero-attribute-breakdown span{white-space:normal}
.hero-xp progress{border-color:var(--border);border-radius:var(--radius-small)}
.hero-xp progress::-webkit-progress-bar{background:var(--bg)}
.hero-xp progress::-webkit-progress-value{background:var(--gold)}
.hero-xp progress::-moz-progress-bar{background:var(--gold)}
.top .wallet .resource-label{flex-wrap:wrap;row-gap:2px}
.top .wallet [data-resource=emeralds] .resource-value{color:var(--emerald)}
.rewards{gap:var(--space-2)}.rewards>span{min-width:0}
@media(max-width:359px){
 .route-group .enemy-avatar{width:64px;height:82px}
 .route-group .enemy{gap:var(--space-2)}
 .detail-heading>div{flex-basis:130px}
 .rewards strong{font-size:1.25rem}.encounter-facts{gap:var(--space-2)}
 .merchant-grid{gap:var(--space-2)}
}

}


/* M25: source cards and equipment synergies reuse the established panels. */
.hunt-sources,.gear-set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:16px 0}
.hunt-sources>section,.gear-set{min-width:0;padding:16px;border:1px solid var(--gold,#d9bb7e);border-radius:12px;background:linear-gradient(145deg,#263425,#111b14)}
.hunt-goal>.detail-heading{align-items:center}
.hunt-details{margin:18px 0;padding:12px 0;border-block:1px solid #655e43}
.set-pieces{display:grid;gap:12px}
.set-pieces>div{display:flex;gap:12px;align-items:center;min-width:0}
.set-pieces img{width:56px;height:56px;object-fit:contain;border:1px solid #655e43;border-radius:6px;flex-shrink:0}
.set-pieces span{overflow-wrap:anywhere}
.gear-sets p,.hunt-goal p{line-height:1.5}
.hunt-sources button{max-width:100%;white-space:normal}


.top .brand img{width:270px;height:90px;object-fit:contain}

/* Persistent player status, five illustrated destinations, grouped secondary views. */
.top{position:sticky;top:0;z-index:6;background:var(--bg);box-shadow:0 6px 18px #0005;padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:8px}
.top .wallet{margin:0;gap:6px;order:initial}
.top .wallet .player-progress{grid-column:1/-1;min-width:0;padding:0 2px 2px}
.top .wallet .player-progress-copy{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:0 12px}
.top .wallet .player-progress-copy strong{font:600 .875rem/1.4 var(--font-body);color:var(--gold)}
.top .wallet .player-progress-copy span{display:block;font:.75rem/1.4 var(--font-body);color:var(--text)}
.top .wallet .player-progress progress{height:6px;margin:5px 0 0;border-radius:3px;overflow:hidden}
.workspace nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.workspace nav button.nav-art-button{flex-direction:column;gap:2px;min-height:72px;height:auto;padding:5px 2px;border:1px solid transparent}
.workspace nav .nav-art-button img{width:min(60px,100%);height:60px;object-fit:contain}
.workspace nav .nav-art-button.active::after{bottom:0}
.section-tabs{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}
.section-tabs button{flex:1;min-width:120px}
.section-tabs button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:var(--panel2)}
.equipment-builds{clear:both}
@media(max-width:720px){
 .top{gap:4px 10px;padding-left:12px;padding-right:12px}
 .top .brand img{width:clamp(180px,52vw,240px);height:auto;aspect-ratio:3/1;object-fit:contain}
 .top #account-button{min-height:44px;max-width:clamp(96px,30vw,140px);padding:6px 8px;font-size:.75rem;overflow-wrap:anywhere}
 .top .wallet .resource-counter{padding:5px 4px;gap:1px}
 .top .wallet .resource-label{font-size:.75rem}
 .top .wallet .resource-value{font-size:1rem;line-height:1.3}
 .workspace nav{grid-template-columns:repeat(5,minmax(0,1fr))}
 .workspace nav button.nav-art-button{min-width:0;min-height:72px;height:auto}
 main{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
 .battle-dock{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .notice{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
 .connection{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media(max-height:480px) and (orientation:landscape){.top .brand,.top #account-button{display:none}.top .wallet{grid-column:1/-1;grid-row:auto;max-width:none}.top{padding-block:4px}}

/* M31: player status remains visible while the content gets more room. */
header.top{grid-template-columns:minmax(0,1fr) auto;align-items:center}
header.top .header-actions{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:3px}
header.top .header-actions .language-picker{justify-content:flex-end;margin:0;gap:4px;font-size:12px}
header.top .header-actions .language-picker>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
header.top .header-actions select{min-height:30px;padding:2px 6px;max-width:110px;width:100%}
header.top .wallet{grid-column:1/-1;grid-row:2}
header.top.compact .brand img{width:150px;height:44px;aspect-ratio:auto}
header.top.compact .language-picker{display:none}
header.top.compact .wallet .resource-counter{display:flex;flex-direction:row;justify-content:center;gap:6px;padding:3px}
header.top.compact .resource-label span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
header.top.compact .resource-value{font-size:.9rem}
.training-amount{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}
.training-amount select{min-height:44px;max-width:160px}
.location-reward{color:var(--gold);margin:12px 0}
.equipment-help{margin-bottom:16px}
.equipment-help summary{font-size:.875rem}
@media(max-width:720px){header.top .brand img{max-width:100%}header.top{gap:4px 10px}header.top .header-actions{max-width:110px}}
@media(max-height:480px) and (orientation:landscape){
 header.top{grid-template-columns:110px minmax(0,1fr) auto;gap:8px;padding-block:4px}
 header.top .brand,header.top #account-button{display:block}
 header.top .brand img,header.top.compact .brand img{width:110px;height:36px}
 header.top .header-actions{grid-column:3;grid-row:1}
 header.top .header-actions .language-picker{display:none}
 header.top .wallet{grid-column:2;grid-row:1}
 header.top .wallet .resource-counter{display:flex;flex-direction:row;gap:4px;padding:2px}
 header.top .resource-label span{display:none}
}

/* Connection recovery must stay reachable above contextual help and item previews. */
.connection{z-index:100}

/* Desktop navigation follows the actual (expanded or compact) header height. */
@media(min-width:721px){
 .workspace nav{position:sticky;top:var(--header-height,224px);z-index:7}
}