/* Copyright (c) 2026 Astoria Insight. All rights reserved. */
.asset-showroom{min-width:0;border-top:1px solid #45685a;margin-top:12px;padding-top:8px;color:#d3decf;font:11px ui-monospace,monospace}
.asset-showroom h3{color:#dcb675;font:13px 'Astoria Pixel',ui-monospace,monospace}.asset-showroom>small{display:block;color:#8da69a;line-height:1.35;margin:5px 0 12px}
.asset-tier{min-width:0;margin:0 0 12px;border:1px solid #314f44;background:#091714}.asset-tier-title{display:flex;align-items:center;gap:7px;min-height:32px;padding:4px 8px;color:#e8c47b;border-bottom:1px solid #314f44}.asset-tier-title svg{width:20px;height:20px;flex:none}.asset-tier-title span{margin-left:auto;color:#a37b50;font-size:9px;text-align:right}.asset-tier-track{display:flex;gap:5px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:#775f32 #10211b;padding:6px}
.asset-tile{flex:0 0 104px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2px;min-width:0;height:108px;background:#12211e;border:1px solid #375a48;color:#d0dccf;font:10px ui-monospace,monospace;cursor:pointer;padding:3px}.asset-tile.selected{border-color:#e1b85d}.asset-tile img{width:98px;height:67px;object-fit:contain;image-rendering:pixelated}.asset-tile span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}.asset-tile b{color:#dcb675;font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset-detail{display:flex;gap:9px;align-items:center;min-width:0;background:#11201b;border:1px solid #6d6240;padding:8px;margin:4px 0 8px}.asset-hero{width:130px;max-width:40%;height:100px;object-fit:contain;image-rendering:pixelated;flex:none}.asset-facts{min-width:0;display:grid;gap:4px}.asset-facts strong{color:#e6c783}.asset-facts small{color:#e99d83}.asset-facts span{overflow-wrap:anywhere}.asset-facts button{background:#3a2d0c;border:1px solid #dcb675;color:#fff1c9;min-height:38px;font:700 10px ui-monospace,monospace;cursor:pointer}.asset-facts button:disabled{opacity:.5;cursor:default}.asset-ledger{font-size:10px;color:#9bb7a8;line-height:1.5}
.asset-profile-badge{position:absolute;right:12px;bottom:32px;display:inline-grid;place-items:center;width:24px;height:24px}.asset-profile-badge:empty{visibility:hidden}.asset-profile-badge svg{width:19px;height:19px}
.asset-event-screen{position:fixed;inset:0;z-index:81;display:grid;place-items:center;padding:12px;background:#020a0ae8;overflow:auto}.asset-event-screen[hidden]{display:none}.asset-event-card{width:min(440px,100%);max-height:90dvh;overflow:auto;background:#0b1916;border:2px solid #d2a965;box-shadow:0 0 25px #d2a96533;padding:20px;text-align:center;font:12px ui-monospace,monospace;color:#dce8dc}.asset-event-card h2{font:18px 'Astoria Pixel',ui-monospace,monospace;color:#f1c574}.asset-event-card p{border-top:1px solid #29473b;padding:6px;color:#e8c47b}.asset-event-card button{min-height:44px;width:100%;border:1px solid #dcb675;background:#36290b;color:#fff1c9;cursor:pointer}
@media(max-width:720px){.asset-detail{align-items:flex-start}.asset-hero{max-width:32%;width:90px;height:90px}.asset-tile{flex-basis:97px}.progression-hud .progression-toggle{padding-right:136px!important}.asset-profile-badge{right:116px;top:50%;bottom:auto;transform:translateY(-50%);z-index:1;width:20px;height:20px}.asset-profile-badge svg{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.asset-event-screen,.asset-tile{animation:none;transition:none}}

.asset-showroom.in-store{border-top:0;margin-top:0;padding-top:0}
.asset-tile .asset-frame{width:98px;height:67px;object-fit:contain;image-rendering:pixelated}
.asset-tile .sheet-frame{height:auto;aspect-ratio:402/256}

.asset-detail .asset-hero.sheet-frame{height:auto;aspect-ratio:402/256}

/* End-of-day recap (closing bell). Fixed, non-blocking, never shifts layout. */
.day-recap{position:fixed;right:16px;bottom:76px;z-index:50;width:min(360px,calc(100vw - 24px));max-height:min(60vh,420px);overflow:auto;cursor:pointer;animation:recap-in .28s ease-out}
.day-recap[hidden]{display:none}
.recap-card{display:grid;gap:5px;padding:10px 12px;background:#0b1916f5;border:1px solid #d2a965;box-shadow:0 10px 28px #000c;color:#dce8dc;font:11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.recap-card>small{color:#e9b06c;letter-spacing:.14em;font-size:10px}
.recap-card>strong{color:#f1c574;font:14px 'Astoria Pixel',ui-monospace,monospace;letter-spacing:.06em}
.recap-card ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:3px}
.recap-card li,.recap-total{display:flex;justify-content:space-between;gap:10px;min-width:0}
.recap-card li span{min-width:0;overflow-wrap:anywhere;color:#b9cfc6}
.recap-card li b{flex:none;color:#ff9aa0;font-variant-numeric:tabular-nums}
.recap-card li.gain b{color:#88edbd}
.recap-total{margin:3px 0 0;padding-top:5px;border-top:1px solid #29473b;color:#e8c47b}
.recap-total b{font-variant-numeric:tabular-nums}
.recap-none{margin:0;color:#88edbd}
.recap-note,.recap-next{margin:0;color:#9bb7a8;font-size:10px}
.recap-dismiss{color:#6f8781;font-size:9px;letter-spacing:.12em}
@keyframes recap-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:720px){.day-recap{left:12px;right:12px;width:auto;bottom:64px}}
@media(prefers-reduced-motion:reduce){.day-recap{animation:none}}

/* Store grid: every item is a black silhouette until you own it, then its full-colour picture. The preview panel
   (.asset-detail) is not affected and always shows the real picture. */
.asset-tile.unowned .asset-frame,.asset-tile.unowned img{filter:brightness(0) drop-shadow(1px 0 #a88b52);opacity:.62}
/* While a picture is still loading, or if it failed, show the tier's icon as a plain dark silhouette (never a blank
   or broken box). The real picture replaces it as soon as it has actually loaded (assets.js, watchFrames). */
.asset-frame.frame-wait,.asset-frame.frame-failed{background:var(--ph) center/auto 46% no-repeat!important;filter:brightness(0) drop-shadow(1px 0 #a88b52)!important;min-width:40px;min-height:28px}
/* Preview panel: black silhouette until you own the item, like the grid. */
.asset-hero.asset-unowned{filter:brightness(0) drop-shadow(1px 0 #a88b52);opacity:.62}
/* Each picture gets its own drawing layer, so iPhone Safari redraws it when the picture arrives. */
.asset-tile .asset-frame,.asset-hero,.vault-thumb .asset-frame{transform:translateZ(0);-webkit-backface-visibility:hidden}

.recap-disaster{display:grid;gap:3px;margin-top:4px;padding:6px 7px;border:1px solid #9a3f3f;background:#2a0f0fcc}
.recap-disaster.miss{border-color:#50615b;background:#101a17cc}
.recap-disaster-head{margin:0;color:#ff9a8a;letter-spacing:.1em;font-size:10px}.recap-disaster-head.major{color:#ff6b5a;font-weight:700}
.recap-disaster.miss .recap-disaster-head{color:#9fb9b0}
.recap-life{display:grid;gap:3px;margin-top:4px;padding:6px 7px;border:1px solid #a8843a;background:#221a0acc}
.recap-life-head{margin:0;color:#f1c574;letter-spacing:.1em;font-size:10px}