/* September 26: pastel surfaces, plum lettering, no outlined white text. */
@font-face{font-family:ShopKei;src:url('assets/fonts/keifont/keifont.ttf') format('truetype');font-weight:400 900;font-display:swap}
@layer global-ui {
:root{--ui-ink:#59445f;--ui-mint:#b9e1d2;--ui-blue:#bddcee;--ui-pink:#efc5d8;--ui-lavender:#d9c9ea;--ui-peach:#f0d3b8;--ui-edge:#ad8eab}
html body,html body :is(button,input,select,textarea,h1,h2,h3,h4,p,label,span,small,strong,b,a,summary,th,td,li,legend,figcaption,output,dt,dd){font-family:ShopKei,'Yu Gothic',Meiryo,sans-serif!important;color:var(--ui-ink)!important;-webkit-text-stroke:0!important;text-shadow:none!important}
html body *{ -webkit-text-stroke-width:0!important;text-shadow:none!important }
html body :is(dialog,.modal,.panel,.card,.hud-bottom,.room-actions,.topstats,.sf-hud,.sf-stat,.sf-hint,.armory-hud,.armory-heading,.armory-controls,.armory-room,.tavern-controls,.fish-panel,.fishing-controls,.battle-controls,.tavern-hud,.battle-hud,.relic-upgrade,.relic-card,.screen-panel){color:var(--ui-ink)!important;background-color:var(--ui-lavender)!important;background-image:none!important;border-color:var(--ui-edge)!important}
html body dialog{background:var(--ui-lavender)!important;color:var(--ui-ink)!important}
html body :is(dialog,.modal,.panel,.relic-upgrade) :is(header,footer){background:var(--ui-peach)!important;color:var(--ui-ink)!important}
html body :is(button,[role=button],input,select,textarea){background-color:var(--ui-mint)!important;background-image:none!important;border-color:var(--ui-edge)!important;color:var(--ui-ink)!important}
html body button:nth-child(4n+2){background-color:var(--ui-blue)!important}
html body button:nth-child(4n+3){background-color:var(--ui-pink)!important}
html body button:nth-child(4n+4){background-color:var(--ui-peach)!important}
html body :is(button,[role=button]):hover{filter:brightness(1.035)}
html body :is(button,[role=button]):focus-visible{outline:3px solid #876595!important;outline-offset:2px}
html body :is(button,[role=button]):disabled{color:#796b80!important;opacity:.65}
html body :is(.relic-card,.choice,.upgrade-card,.fish-card,.enemy-card){background:var(--ui-blue)!important;color:var(--ui-ink)!important}
/* Hit surfaces remain transparent and retain their original geometry. */
html body #modal:has(.roll-delight),html body #modal:has(.roll-delight) #modalContent,html body #modal .relic-upgrade.roll-delight,html body #modal .roll-delight>header,html body #modal .roll-delight>footer{background:transparent!important;box-shadow:none!important}
html body #shopFloor button:is(.ss-target,.sf-fixture),html body :is(.map-hotspot,.scene-hotspot,[data-hotspot]){background:transparent!important;box-shadow:none!important;border:0!important}
html body #shopFloor button.ss-target.ss-slot{background:#c9e9df24!important;border:3px dashed #8c7795!important}
html body #shopFloor button.sf-fixture{color:transparent!important}
/* Meaningful status colors remain separate from ornamental text colors. */
html body :is(.danger,.error,.risk,.insufficient,.unaffordable,[data-status=error]){color:#9d3f58!important}
html body :is(.success,[data-status=success]){color:#356955!important}
html body :is(.warning,[data-status=warning]){color:#80551e!important}
html body :is(progress,meter,.hp-fill,.health-fill,.risk-fill,.danger-meter){background-image:revert!important}

html body #shopFloor .si-dock .si-short .si-price{color:#9d3f58!important}
}



@layer global-ui {
 #battleStatus .battle-meter.xp{display:none!important}
 #battleClock{background:#bddcee!important;color:#59445f!important;border-color:#9f9eb9!important;text-shadow:none!important}
 #battleActionDock #battleBeast{display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;min-height:44px!important;max-width:220px!important;padding:8px 12px!important;background:#d9c9ea!important;border:2px solid #ad8eab!important;border-radius:14px!important;box-shadow:none!important}
 #battleBeast canvas{display:none!important}
 #battleBeast .beast-caption{background:transparent!important;border:0!important;padding:0!important;color:#59445f!important;white-space:normal!important;line-height:1.3!important;font-size:12px!important}
 #battleActionDock #battleBeast[data-ready="true"]{background:#efc5d8!important;border:3px solid #b94c87!important;box-shadow:0 0 0 2px #f4ddea!important}
 #battleBeast:disabled{opacity:.78!important}
 @media(pointer:coarse),(max-height:550px){#battleActionDock #battleBeast{max-width:158px!important;padding:5px 9px!important}#battleBeast .beast-caption{font-size:11px!important}}
 @media(prefers-reduced-motion:reduce){#battleBeast,#battleBeast *{animation:none!important;transition:none!important}}
}
@layer global-ui {
 #battleActionDock #battleBeast{width:48px!important;height:48px!important;min-width:48px!important;padding:4px!important;flex:0 0 48px!important}
 #battleBeast .beast-caption{font-size:25px!important;line-height:1!important}
}

@layer global-ui {
 /* Preserve transparent frames and inventory hit surfaces, not entire panels. */
 html body #screenHUD :is(.hud-top,.hud-rail),html body .character-strip button,html body #streetChoose{background:transparent!important;box-shadow:none!important}
 html body #modalContent .open-backpack .bag-grid :is(.bag-item,.bag-cell){background:transparent!important;box-shadow:none!important}
 html body #modalContent .open-backpack .bag-grid .bag-item{border-color:transparent!important}
 html body #modalContent .open-backpack .bag-grid .bag-item.selected{border-color:#795b88!important}
 html body #modalContent .bag-colors [data-bag-color]{background:var(--bag-swatch)!important}
 html body #mainyaDialog .mainya-card header,html body #modal :is(.order-sheet,.work-sheet,.shared-album)>header{background:transparent!important;box-shadow:none!important}
}
/* Harbor rows carry information, so keep their surface light with dark lettering. */
@layer global-ui {
 html body #harborMarket .hfm-fish>label{background:#d5e8e3!important;color:#59445f!important}
 html body #harborMarket .hfm-summary,html body #harborMarket .hfm-box{background:#e3d9ef!important;color:#59445f!important}
}

/* Keep the shop ceiling visible behind its individual status cards. */
@layer global-ui { html body #shopFloor .sf-hud{background-color:transparent!important;background-image:none!important} }

/* The results and forge share these cards; replace the old dark gradient as well as its text. */
@layer global-ui {
 html body #modal .relic-upgrade .growth-grid>:is(.growth-card,button){background-color:var(--ui-mint)!important;background-image:none!important;color:var(--ui-ink)!important;border:2px solid var(--ui-edge)!important;box-shadow:0 3px 0 #ad8eab55!important}
 html body #modal .relic-upgrade .growth-grid>:is(.growth-card,button):nth-child(4n+2){background-color:var(--ui-pink)!important}
 html body #modal .relic-upgrade .growth-grid>:is(.growth-card,button):nth-child(4n+3){background-color:var(--ui-blue)!important}
 html body #modal .relic-upgrade .growth-grid>:is(.growth-card,button):nth-child(4n+4){background-color:var(--ui-peach)!important}
 html body #modal .relic-upgrade :is(.growth-grid,.growth-tabs) [aria-pressed=true]{border-color:#795588!important;outline:3px solid #795588!important;outline-offset:2px;box-shadow:0 3px 0 #ad8eab55!important}
 html body #modal .relic-upgrade .growth-tabs>button[aria-pressed=true]:after{background:#795588!important}
 html body #modal .relic-upgrade .result-total{color:#64456e!important;font-variant-numeric:tabular-nums}
}

/* Dressing controls are UI surfaces; keep the illustrated room itself intact. */
@layer global-ui {
 html body #wardrobeScreen .wardrobe-options{background:var(--ui-lavender)!important;border-color:var(--ui-edge)!important;box-shadow:0 3px 0 #ad8eab55!important}
 html body #wardrobeScreen .wardrobe-options h3{background:var(--ui-blue)!important;color:var(--ui-ink)!important}
 html body #wardrobeScreen .wardrobe-confirm{background:var(--ui-peach)!important;border-color:var(--ui-edge)!important}
 html body #wardrobeScreen .wardrobe-layout canvas{border-color:var(--ui-edge)!important;box-shadow:0 3px 0 #ad8eab55!important}
 html body #wardrobeScreen .wardrobe-options button.selected{outline:2px solid #795588!important;outline-offset:1px}
}