/* Time-of-day cues belong to the shared frame, keeping the artwork readable. */
.environment.time-morning{--phase-header:#e8f4f5;--phase-surface:#d9ecef;--phase-frame:#9bbac5;--phase-accent:#286278;--phase-ink:#243f4b}
.environment.time-afternoon{--phase-header:#fff1cf;--phase-surface:#f5e5bd;--phase-frame:#c7b88c;--phase-accent:#74551e;--phase-ink:#54401e}
.environment.time-evening{--phase-header:#f9d2b8;--phase-surface:#f1c4a8;--phase-frame:#c38e75;--phase-accent:#943e21;--phase-ink:#63351f}
.environment.time-night{--phase-header:#dce3f1;--phase-surface:#cbd7eb;--phase-frame:#8596b4;--phase-accent:#354f78;--phase-ink:#293d60}
.environment.cloth-ui,.environment.tutorial-environment{background:var(--phase-frame)}
.environment.cloth-ui .workspace{background:repeating-linear-gradient(0deg,#ffffff12 0 1px,transparent 1px 4px),var(--phase-frame)}
.environment .common-header,.environment .topbar,.environment .tutorial-app-header{background:var(--phase-header);border-color:var(--phase-accent);color:var(--phase-ink)}
.environment .resourcebar{background:var(--phase-surface);border-color:var(--phase-accent)}
.environment .day-display>.day-number,.environment .day-display>span,.environment .tutorial-app-header>span{color:var(--phase-ink)}
.environment .day-display .phase-badge,.environment .tutorial-app-header .phase-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;vertical-align:middle;white-space:nowrap;margin:0 0 0 5px;padding:2px 7px;border-radius:6px;background:var(--phase-accent);color:#fff;font-size:14px;font-weight:800;line-height:20px;letter-spacing:.06em}
.environment .phase-badge .phase-symbol{width:22px;height:22px;display:block;flex:none}
.environment .phase-badge>span{font:inherit;color:inherit}
.environment .advance-panel>b{color:var(--phase-accent);background:var(--phase-header);border-radius:4px;padding:2px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.environment .tutorial-app-header button{color:var(--phase-ink)}
@media(max-width:900px){
 .environment .topbar .day-display .phase-badge{display:flex;margin:1px 0 0;padding:1px 5px;font-size:12px;line-height:18px;gap:3px}
 .environment .phase-badge .phase-symbol{width:18px;height:18px}
 .environment .tutorial-app-header .phase-badge{padding:1px 6px;font-size:12px;line-height:18px}
}