/* Game District: Locker (player card, loadouts, inventory, frames, social wheel), Avatar builder and wardrobe,
   Journal, Account (auth, saves), Ladder.  Class names are produced by the hub script and game-identity.js. */

.hub-spaced { margin-top: 24px; }
.hub-muted { color: var(--muted); font-weight: 600; font-size: .88rem; }
.hub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hub-card-head h3, .dashboard-owned-head h3 { font-size: 1.1rem; font-family: var(--font-display); font-weight: 400; }
.dashboard-owned-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.dashboard-owned-head small { color: var(--muted); font-weight: 700; }

.hub-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding: 5px; width: fit-content; max-width: 100%; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.hub-subnav button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 11px; border: 0; background: transparent; color: var(--muted); font-weight: 800; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.hub-subnav button:hover { background: var(--surface-2); color: var(--text); }
.hub-subnav button.is-active { background: var(--gold); color: var(--on-gold); }

.dashboard-player-grid { display: grid; gap: 18px; }

/* ------------------------------------------------------------- player card */
.hub-identity { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 20px; align-items: start; }
.hub-identity-side { display: grid; gap: 16px; }
.retro-player-card { display: grid; gap: 18px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); position: relative; overflow: hidden; }
.retro-player-card::before { content: ''; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pink) 30%, transparent), transparent 70%); pointer-events: none; }
.retro-player-header { display: flex; align-items: center; gap: 16px; position: relative; }
.retro-player-card .retro-avatar { width: 96px; height: 96px; border-width: 3px; }
.retro-player-meta { display: grid; gap: 6px; min-width: 0; }
.retro-player-name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.retro-player-username { font-family: var(--font-body); font-size: .8rem; color: var(--muted); font-weight: 700; }
.retro-player-subline { color: var(--muted); font-weight: 700; font-size: .88rem; }
.retro-code-line { display: flex; flex-wrap: wrap; gap: 6px; }
.retro-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; position: relative; }
.retro-stat-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.retro-stat-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.retro-stat-icon img, .retro-stat-icon svg { width: 100%; height: 100%; object-fit: contain; }
.retro-stat-copy { display: grid; line-height: 1.1; min-width: 0; }
.retro-stat-copy strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.retro-stat-copy span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-player-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.dashboard-player-stat { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.dashboard-player-stat i { grid-row: 1 / 3; font-size: 1.3rem; color: var(--cyan); }
.dashboard-player-stat span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-player-stat strong { font-size: 1.05rem; }
.dashboard-profile-form { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.dashboard-profile-name-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dashboard-profile-name-row .retro-field { flex: 1 1 180px; }
.dashboard-profile-name-note { color: var(--dim); font-size: .78rem; font-weight: 700; }
.hub-sync { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.hub-sync > i { font-size: 1.6rem; }
.hub-sync.is-cloud > i { color: var(--green); }
.hub-sync.is-local > i { color: var(--gold); }
.hub-sync span { display: grid; flex: 1 1 160px; }
.hub-sync small { color: var(--muted); font-weight: 600; }
.hub-sync-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .76rem; font-weight: 900; border: 1px solid var(--line-2); }
.hub-sync-pill.is-cloud { color: var(--green); border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.hub-sync-pill.is-local { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }

/* name frames (carried over from the old sheet, colours come from --frame-*) */
.dashboard-card-name-frame { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 10px; color: var(--frame-text, #2f2216); background: linear-gradient(135deg, var(--frame-accent, #f7ead1), var(--frame-primary, #d2a24b)); border: 3px solid var(--frame-secondary, #1f5f8b); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); font-family: var(--font-display); font-weight: 400; position: relative; overflow: hidden; }
.dashboard-card-name-frame--plain { background: transparent; border: 0; box-shadow: none; color: var(--text); padding: 0; }
.dashboard-card-name-frame > span { position: relative; z-index: 1; }
.dashboard-card-name-frame.is-animated::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: hubFrameShine 2.6s ease-in-out infinite; }
@keyframes hubFrameShine { 60%, 100% { transform: translateX(100%); } }
.dashboard-card-name-frame--hero { font-size: inherit; }
.dashboard-frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.dashboard-frame-option { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--rar, var(--line)) 40%, var(--line)); text-align: center; }
.dashboard-frame-option.is-equipped { box-shadow: 0 0 0 2px var(--green); }
.dashboard-frame-option > div:nth-child(2) { display: grid; gap: 6px; justify-items: center; }
.dashboard-frame-preview { display: inline-flex; justify-content: center; align-items: center; padding: 8px 16px; border-radius: 10px; color: var(--frame-text, #2f2216); background: linear-gradient(135deg, var(--frame-accent, #f7ead1), var(--frame-primary, #d2a24b)); border: 3px solid var(--frame-secondary, #1f5f8b); font-family: var(--font-display); position: relative; overflow: hidden; justify-self: center; max-width: 100%; }
.dashboard-frame-preview.is-animated::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-100%); animation: hubFrameShine 2.6s ease-in-out infinite; }
.dashboard-frame-preview span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-mini-frame { display: inline-flex; padding: 3px 10px; border-radius: 8px; color: var(--frame-text, #2f2216); background: linear-gradient(135deg, var(--frame-accent, #f7ead1), var(--frame-primary, #d2a24b)); border: 2px solid var(--frame-secondary, #1f5f8b); font-family: var(--font-display); font-size: .9rem; }

/* ------------------------------------------------------------- loadouts */
.hub-loadout-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hub-loadouts { display: grid; gap: 12px; }
.hub-loadout { border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; border-left: 4px solid var(--accent, var(--gold)); }
.hub-loadout.is-open { background: var(--surface-2); }
.hub-loadout-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.hub-loadout-head img, .hub-loadout-ico { width: 64px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; display: grid; place-items: center; background: var(--surface-3); }
.hub-loadout-title { display: grid; flex: 1; min-width: 0; }
.hub-loadout-title strong { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.hub-loadout-title small { color: var(--muted); font-weight: 700; }
.hub-loadout-chev { transition: transform .2s; color: var(--muted); }
.hub-loadout.is-open .hub-loadout-chev { transform: rotate(180deg); }
.hub-loadout-body { padding: 4px 16px 16px; display: grid; gap: 14px; }
.hub-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.hub-slot { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.hub-slot:hover { border-color: var(--gold); transform: translateY(-2px); }
.hub-slot.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--rar, var(--green)) 70%, transparent); }
.hub-slot-art { width: 62px; height: 62px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; padding: 4px; color: var(--dim); font-size: 1.4rem; }
.hub-slot-art > * { max-width: 100%; max-height: 100%; }
.hub-slot-copy { display: grid; min-width: 0; }
.hub-slot-copy small { color: var(--cyan); font-weight: 900; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.hub-slot-copy strong { font-size: .92rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-slot-copy em { font-style: normal; color: var(--dim); font-size: .72rem; font-weight: 700; }
.hub-loadout-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.hub-picker-dialog { width: min(640px, 100%); }
.hub-picker-list { display: grid; gap: 8px; }
.hub-pick { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.hub-pick.is-equipped { border-color: var(--green); }
.hub-pick.is-locked .hub-pick-art { filter: saturate(.55); }
.hub-pick-art { width: 76px; height: 56px; border-radius: 10px; border: 0; padding: 4px; display: grid; place-items: center; overflow: hidden; cursor: var(--gcur-zoom, pointer); color: var(--dim); font-size: 1.3rem; }
.hub-pick-art > * { max-width: 100%; max-height: 100%; }
.hub-pick--none .hub-pick-art { background: var(--surface-3); cursor: default; }
.hub-pick-copy { display: grid; gap: 3px; min-width: 0; }
.hub-pick-copy strong { line-height: 1.2; }
.hub-pick-copy small { color: var(--muted); font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------- inventory / collection / social */
.dashboard-owned-grid, .dashboard-inventory-grid, .dashboard-collection-grid, .dashboard-slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.dashboard-owned-item, .dashboard-inventory-item, .dashboard-slot-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--rar, var(--line)) 35%, var(--line)); }
.dashboard-owned-item:hover, .dashboard-inventory-item:hover { border-color: var(--rar, var(--gold)); }
.dashboard-inventory-item.is-equipped, .dashboard-slot-item.is-equipped { border-color: var(--green); }
.dashboard-owned-icon, .dashboard-inventory-icon, .dashboard-slot-icon, .dashboard-gear-slot-icon, .dashboard-wardrobe2-slot-icon { width: 64px; height: 54px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); overflow: hidden; padding: 3px; flex: 0 0 auto; }
.dashboard-owned-icon > *, .dashboard-inventory-icon > *, .dashboard-slot-icon > *, .dashboard-gear-slot-icon > *, .dashboard-wardrobe2-slot-icon > * { max-width: 100%; max-height: 100%; }
.dashboard-owned-copy, .dashboard-inventory-copy, .dashboard-slot-copy { display: grid; gap: 3px; min-width: 0; }
.dashboard-owned-copy strong, .dashboard-inventory-copy strong, .dashboard-slot-copy strong { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.dashboard-owned-copy span, .dashboard-inventory-copy small, .dashboard-slot-copy small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.dashboard-owned-note, .dashboard-slot-note { color: var(--dim); font-size: .74rem; font-weight: 800; }
.dashboard-owned-item .retro-button-secondary, .dashboard-inventory-item .retro-button-secondary, .dashboard-slot-action { min-height: 34px; padding: 5px 10px; font-size: .8rem; }
.dashboard-slot-action { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 900; cursor: pointer; }
.dashboard-slot-action:hover:not(:disabled) { border-color: var(--gold); }
.dashboard-slot-action:disabled { opacity: .5; cursor: default; }
.dashboard-slot-order-note { display: flex; gap: 8px; align-items: center; color: var(--muted); font-weight: 800; font-size: .8rem; grid-column: 1 / -1; }
.dashboard-slot-list { grid-template-columns: 1fr; max-height: 60vh; overflow: auto; }
.dashboard-collection-card { display: grid; grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.dashboard-collection-card.is-complete { border-color: var(--green); }
.dashboard-collection-icon { grid-row: 1 / 3; width: 56px; height: 50px; display: grid; place-items: center; background: var(--surface-3); border-radius: 10px; overflow: hidden; padding: 3px; }
.dashboard-collection-icon > * { max-width: 100%; max-height: 100%; }
.dashboard-collection-copy { display: grid; min-width: 0; }
.dashboard-collection-copy small { color: var(--muted); font-size: .72rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dashboard-collection-count { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.dashboard-collection-bar { grid-column: 2 / 4; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.dashboard-collection-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); }

.dashboard-social-form { display: grid; gap: 18px; }
.dashboard-social-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 8px; }
.dashboard-social-section-head span { color: var(--gold); font-weight: 900; font-size: .85rem; }
.dashboard-social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.dashboard-social-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; }
.dashboard-social-chip:hover { border-color: var(--gold); }
.dashboard-social-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dashboard-social-chip:has(input:checked) { background: color-mix(in srgb, var(--gold) 16%, var(--bg-2)); border-color: var(--gold); }
.dashboard-social-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.dashboard-social-action-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; }
.dashboard-social-action-icon svg, .dashboard-social-action-icon img { width: 100%; height: 100%; }
.dashboard-social-chip strong { font-size: .88rem; line-height: 1.2; }
.dashboard-social-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 8px; padding: 10px 14px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--line); }
.dashboard-social-footer span { color: var(--muted); font-weight: 800; font-size: .84rem; }

/* ------------------------------------------------------------- avatar builder */
.dashboard-customizer { display: grid; gap: 18px; }
.dashboard-customizer-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; }
.dashboard-customizer-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin: 4px 0 6px; line-height: 1.05; }
.dashboard-customizer-head p { color: var(--muted); max-width: 60ch; }
.dashboard-customizer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dashboard-customizer-stage { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr) minmax(250px, .8fr); gap: 16px; align-items: start; }
.dashboard-customizer-panel { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.dashboard-customizer-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dashboard-customizer-section-title span { font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.dashboard-customizer-section-title strong { font-size: .9rem; color: var(--muted); }
.dashboard-customizer-portrait { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: radial-gradient(80% 80% at 50% 30%, #41377a, #1e1744); border: 1px solid var(--line-2); box-shadow: inset 0 0 40px rgba(0, 0, 0, .35); }
.dashboard-customizer-portrait svg { width: 100%; height: 100%; display: block; }
.dashboard-avatar-cropper { display: grid; gap: 10px; }
.dashboard-avatar-crop-intro h3 { font-size: .95rem; }
.dashboard-avatar-crop-intro p { color: var(--muted); font-size: .8rem; }
.dashboard-avatar-crop-layout { display: grid; grid-template-columns: 1fr 84px; gap: 12px; align-items: start; }
.dashboard-avatar-crop-stage { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; touch-action: none; cursor: var(--gcur-crosshair, default); background: var(--bg-2); border: 1px solid var(--line-2); }
.dashboard-avatar-crop-stage svg { width: 100%; height: 100%; display: block; }
.dashboard-avatar-crop-box { position: absolute; left: var(--crop-x); top: var(--crop-y); width: var(--crop-w); height: var(--crop-h); border: 2px solid var(--cyan); box-shadow: 0 0 0 999px rgba(5, 3, 14, .55); border-radius: 4px; cursor: var(--gcur-move, pointer); }
.dashboard-avatar-crop-preview { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); background: #f3d89d; }
.dashboard-avatar-crop-preview svg { width: 100%; height: 100%; display: block; }
.dashboard-avatar-crop-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dashboard-avatar-crop-controls label { flex: 1 1 140px; display: grid; gap: 4px; font-size: .74rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dashboard-customizer-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-customizer-colors span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); font-size: .72rem; font-weight: 800; color: var(--muted); }
.dashboard-customizer-colors i { width: 12px; height: 12px; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(255, 255, 255, .5); }
.dashboard-custom-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.dashboard-custom-fieldset legend { font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 6px; }
.dashboard-custom-choice-row, .dashboard-custom-swatch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-custom-option { position: relative; }
.dashboard-custom-option input, .dashboard-custom-swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.dashboard-custom-option span { display: inline-flex; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); font-weight: 800; }
.dashboard-custom-option input:checked + span { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.dashboard-custom-option input:focus-visible + span, .dashboard-custom-swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.dashboard-custom-swatch { position: relative; display: inline-flex; }
.dashboard-custom-swatch span { width: 30px; height: 30px; border-radius: 50%; background: var(--swatch); border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); transition: transform .12s; }
.dashboard-custom-swatch strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dashboard-custom-swatch input:checked + span { outline: 3px solid var(--gold); outline-offset: 2px; transform: scale(1.1); }
.dashboard-custom-color { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; color: var(--muted); }
.dashboard-gear-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.dashboard-gear-slot { position: relative; display: flex; align-items: stretch; border-radius: 14px; background: var(--bg-2); border: 1px dashed var(--line-2); }
.dashboard-gear-slot.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--rar, var(--green)) 65%, transparent); }
.dashboard-gear-slot-main { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.dashboard-gear-slot-main:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 14px; }
.dashboard-gear-slot-main > span:last-child { display: grid; min-width: 0; }
.dashboard-gear-slot-main strong { font-size: .86rem; }
.dashboard-gear-slot-main small { color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-gear-unequip { align-self: center; margin-right: 6px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); cursor: pointer; }
.dashboard-gear-unequip:hover { background: var(--red); color: #fff; border-color: transparent; }
.dashboard-customizer-inventory { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.dashboard-avatar-floating-save { position: sticky; bottom: 12px; z-index: 40; display: flex; justify-content: flex-end; align-items: center; gap: 12px; pointer-events: none; }
.dashboard-avatar-floating-save > * { pointer-events: auto; }
.dashboard-avatar-floating-save:not(.is-dirty) .retro-button { opacity: .0; pointer-events: none; transform: translateY(10px); }
.dashboard-avatar-floating-save .retro-button { transition: opacity .2s, transform .2s; box-shadow: var(--shadow); }
.dashboard-avatar-floating-alert { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--gold); }
.dashboard-avatar-floating-alert span { display: grid; }
.dashboard-avatar-floating-alert small { color: var(--muted); }
.dashboard-avatar-floating-alert i { color: var(--gold); font-size: 1.2rem; }

.dashboard-wardrobe-dialog--planner { width: min(1180px, 100%); }
.dashboard-wardrobe2-head p, .dashboard-wardrobe-head p { color: var(--muted); }
.dashboard-wardrobe2-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 340px); gap: 16px; align-items: start; }
.dashboard-wardrobe2-rail, .dashboard-wardrobe2-slots, .dashboard-wardrobe2-preview { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.dashboard-wardrobe2-stats { display: grid; gap: 6px; }
.dashboard-wardrobe2-stat { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: .82rem; }
.dashboard-wardrobe2-stat i { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.dashboard-wardrobe2-stat i.is-owned { background: var(--cyan); }
.dashboard-wardrobe2-stat i.is-equipped { background: var(--green); }
.dashboard-wardrobe2-stat small { color: var(--muted); font-weight: 700; }
.dashboard-wardrobe2-system { display: grid; gap: 6px; font-size: .82rem; }
.dashboard-wardrobe2-system div { display: flex; flex-wrap: wrap; gap: 5px; }
.dashboard-wardrobe2-system span { padding: 2px 8px; border-radius: 999px; background: var(--surface-3); font-weight: 800; }
.dashboard-wardrobe2-system .is-muted, .dashboard-wardrobe2-system small { color: var(--dim); }
.dashboard-wardrobe2-tip { display: grid; gap: 4px; font-size: .78rem; color: var(--muted); }
.dashboard-wardrobe2-tip i { color: var(--gold); }
.dashboard-wardrobe2-panel-title { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.dashboard-wardrobe2-group { display: grid; gap: 8px; }
.dashboard-wardrobe2-group-title { font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dashboard-wardrobe2-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.dashboard-wardrobe2-slot { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.dashboard-wardrobe2-slot.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--rar, var(--green)) 65%, transparent); }
.dashboard-wardrobe2-slot:hover { border-color: var(--gold); }
.dashboard-wardrobe2-slot > span:nth-child(2) { display: grid; min-width: 0; }
.dashboard-wardrobe2-slot small { color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-wardrobe2-preview-stage { position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(80% 80% at 50% 30%, #41377a, #1e1744); min-height: 260px; }
.dashboard-wardrobe2-mirror-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; padding: 10px; }
.dashboard-wardrobe2-standing-avatar svg, .dashboard-wardrobe2-mirror-glass svg { width: 100%; height: auto; display: block; }
.dashboard-wardrobe2-mirror-glass { border-radius: 12px; overflow: hidden; border: 3px solid var(--gold); background: rgba(255, 255, 255, .06); box-shadow: 0 0 22px var(--avatar-aura, transparent); }
.dashboard-wardrobe2-background-title { display: flex; justify-content: space-between; font-size: .78rem; }
.dashboard-wardrobe2-background-title span { color: var(--muted); }
.dashboard-wardrobe2-bg-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.dashboard-wardrobe2-bg { position: relative; width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--surface-3); overflow: hidden; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--text); }
.dashboard-wardrobe2-bg.is-selected { border-color: var(--green); }
.dashboard-wardrobe2-bg.is-locked { filter: saturate(.6); }
.dashboard-wardrobe2-bg > span:last-child { position: absolute; right: 2px; bottom: 2px; font-size: .62rem; }
.dashboard-wardrobe2-bg--more { flex-direction: column; font-size: .68rem; font-weight: 900; }
.dashboard-wardrobe2-bg .dashboard-mini-avatar-bg { width: 100%; height: 100%; }
.dashboard-wardrobe2-outfits { display: grid; gap: 8px; }
.dashboard-wardrobe2-outfit-select, .dashboard-wardrobe2-outfit-name { display: grid; gap: 4px; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dashboard-wardrobe2-outfit-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 800; }
.dashboard-wardrobe2-outfit-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.dashboard-wardrobe2-outfit-actions button, .dashboard-wardrobe2-mini { padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 800; font-size: .76rem; cursor: pointer; }
.dashboard-wardrobe2-outfit-actions button:hover:not(:disabled), .dashboard-wardrobe2-mini:hover { border-color: var(--gold); }
.dashboard-wardrobe2-outfit-actions button:disabled { opacity: .45; cursor: default; }
.dashboard-wardrobe2-outfit-actions .is-danger:hover:not(:disabled) { background: var(--red); border-color: transparent; color: #fff; }
.dashboard-wardrobe2-outfits select, .dashboard-wardrobe2-outfits input { width: 100%; min-height: 36px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-weight: 700; }
.dashboard-wardrobe2-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dashboard-wardrobe2-warning { display: none; margin-right: auto; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--gold); background: var(--surface-3); }
.dashboard-wardrobe2-foot.is-dirty .dashboard-wardrobe2-warning, .dashboard-wardrobe2-warning:not([hidden]) { display: flex; }
.dashboard-wardrobe2-warning span { display: grid; }
.dashboard-wardrobe2-warning small { color: var(--muted); }
.dashboard-wardrobe2-warning i { color: var(--gold); }
.dashboard-unsaved-dialog { display: grid; gap: 14px; }
.dashboard-unsaved-dialog p { color: var(--muted); }

/* ------------------------------------------------------------- journal */
.dashboard-journal-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.dashboard-journal-stats span { display: grid; padding: 8px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.dashboard-journal-stats strong { font-size: 1.15rem; color: var(--gold); }
.dashboard-journal-stats small { color: var(--muted); font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.dashboard-journal-book { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.dashboard-journal-index { position: sticky; top: calc(var(--top-h) + 12px); display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); max-height: calc(100vh - var(--top-h) - 24px); overflow: auto; scrollbar-width: thin; }
.dashboard-journal-set-list { display: grid; gap: 6px; }
.dashboard-journal-set { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 8px 10px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; cursor: pointer; overflow: hidden; }
.dashboard-journal-set:hover { background: var(--surface-2); }
.dashboard-journal-set.is-active { background: color-mix(in srgb, var(--gold) 14%, var(--surface-2)); border-color: var(--gold); }
.dashboard-journal-set > span:nth-child(2) { display: grid; min-width: 0; }
.dashboard-journal-set small { color: var(--muted); font-weight: 700; }
.dashboard-journal-set > i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.dashboard-journal-set-icon { display: inline-block; width: 40px; height: 40px; }
.dashboard-journal-set-icon svg { width: 100%; height: 100%; }
.dashboard-journal-pages { display: grid; gap: 18px; min-width: 0; }
.dashboard-journal-showcase { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid color-mix(in srgb, var(--rar, var(--line)) 50%, var(--line)); overflow: hidden; }
.dashboard-journal-showcase-art { position: relative; display: grid; place-items: center; min-height: 180px; border-radius: 16px; background: var(--bg-2); padding: 14px; }
.dashboard-journal-showcase-set-icon { position: absolute; left: 8px; top: 8px; width: 40px; opacity: .9; }
.dashboard-journal-showcase-art > .hub-pv-wrap, .dashboard-journal-showcase-art > svg { max-height: 150px; }
.dashboard-journal-showcase-copy { display: grid; gap: 8px; align-content: center; }
.dashboard-journal-showcase-copy h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.dashboard-journal-showcase-copy p { color: var(--muted); }
.dashboard-journal-bonus-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-journal-bonus-list span { padding: 3px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: .78rem; font-weight: 800; }
.dashboard-journal-progress { display: grid; gap: 4px; font-weight: 800; }
.dashboard-journal-progress > i { display: block; height: 8px; border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.dashboard-journal-progress b { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.dashboard-journal-effect-stage { grid-column: 1 / -1; }
.dashboard-journal-items-head { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.dashboard-journal-items-head strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.dashboard-journal-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px; }
.dashboard-journal-item { display: grid; grid-template-columns: 54px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.dashboard-journal-item.is-missing { opacity: .75; }
.dashboard-journal-item.is-owned { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.dashboard-journal-item-icon { width: 54px; height: 46px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); overflow: hidden; padding: 2px; }
.dashboard-journal-item-icon > * { max-width: 100%; max-height: 100%; }
.dashboard-journal-item-copy { display: grid; min-width: 0; }
.dashboard-journal-item-copy strong { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-journal-item-copy small { color: var(--muted); font-weight: 700; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-journal-item-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.dashboard-journal-item.is-owned .dashboard-journal-item-state { color: var(--green); }

/* ------------------------------------------------------------- account */
.hub-account-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.hub-account-grid .hub-guide { grid-column: 1 / -1; }
.dashboard-auth-card { display: grid; gap: 16px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); }
.dashboard-auth-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dashboard-auth-tabs .retro-button-secondary { flex: 1 1 auto; min-height: 38px; padding: 6px 10px; font-size: .84rem; }
.dashboard-auth-copy h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin: 4px 0 6px; line-height: 1.1; }
.dashboard-auth-copy p { color: var(--muted); font-size: .9rem; }
.dashboard-auth-form { display: grid; gap: 12px; }
.dashboard-account-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub-saves { display: grid; gap: 10px; align-content: start; }
.hub-saves-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.hub-save-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent, var(--gold)); }
.hub-save-row img { width: 64px; height: 40px; border-radius: 8px; object-fit: cover; }
.hub-save-row span { display: grid; min-width: 0; }
.hub-save-row small { color: var(--muted); font-weight: 700; font-size: .74rem; }
.hub-save-row > i { color: var(--dim); font-size: 1.1rem; }
.hub-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hub-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.hub-steps li > i { font-size: 1.5rem; color: var(--gold); }
.hub-steps span { display: grid; gap: 2px; }
.hub-steps small { color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------- ladder */
.hub-ladder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.dashboard-board h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }
.dashboard-board p { margin: 2px 0 14px; }
.retro-board-list { display: grid; gap: 8px; }
.retro-board-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.retro-board-row.active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg-2)); }
.retro-board-row:nth-child(1) .retro-board-rank { color: #ffd34a; } .retro-board-row:nth-child(2) .retro-board-rank { color: #d6dbe6; } .retro-board-row:nth-child(3) .retro-board-rank { color: #e0985c; }
.retro-board-rank { font-family: var(--font-display); font-size: 1.15rem; text-align: center; color: var(--muted); }
.retro-board-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.retro-board-meta .retro-avatar { width: 40px; height: 40px; }
.retro-board-copy { display: grid; min-width: 0; line-height: 1.15; }
.retro-board-copy > span { color: var(--dim); font-size: .72rem; font-weight: 700; }
.retro-board-player-name, .retro-board-title { font-weight: 900; display: flex; gap: 6px; align-items: center; }
.retro-board-stats { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.retro-mini-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.retro-pill-icon, .retro-inline-stat { display: inline-grid; width: 14px; height: 14px; }
.retro-pill-icon svg, .retro-pill-icon img, .retro-inline-stat svg, .retro-inline-stat img { width: 100%; height: 100%; }
.retro-category-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--surface-3); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
    .dashboard-customizer-stage { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
    .dashboard-customizer-panel--colors { grid-column: 1 / -1; }
    .dashboard-wardrobe2-body { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
    .dashboard-wardrobe2-rail { grid-column: 1 / -1; grid-row: 2; }
    .dashboard-journal-book { grid-template-columns: 1fr; }
    .dashboard-journal-index { position: static; max-height: none; }
    .hub-identity, .hub-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .dashboard-customizer-stage { grid-template-columns: 1fr; }
    .dashboard-wardrobe2-body { grid-template-columns: 1fr; }
    .dashboard-journal-showcase { grid-template-columns: 1fr; }
    .dashboard-pet-hero { grid-template-columns: 1fr; }
    .dashboard-pet-hero-scene { grid-column: 1; grid-row: auto; }
    .retro-board-row { grid-template-columns: 34px 1fr; }
    .retro-board-stats { grid-column: 1 / -1; justify-content: flex-start; }
    .retro-player-header { flex-direction: column; align-items: flex-start; }
    .dashboard-journal-item { grid-template-columns: 46px 1fr auto; }
    .dashboard-journal-item .dashboard-rarity-pill { display: none; }
    .hub-dialog, .dashboard-wardrobe-dialog { padding: 14px; border-radius: 16px; }
}

/* avatar builder: live preview stays in view; the save button floats */
.dashboard-customizer-panel--portrait { position: sticky; top: calc(var(--top-h) + 12px); }
.dashboard-avatar-floating-save { position: fixed; right: 20px; bottom: 18px; z-index: 90; }
@media (max-width: 1180px) { .dashboard-customizer-panel--portrait { position: static; } }

.dashboard-journal-effect-stage { background: var(--bg-2) !important; border-color: var(--line-2) !important; min-height: 90px; }
.dashboard-journal-effect-labels span { color: var(--text) !important; background: var(--surface-3) !important; }

/* fixes after first visual pass */
.dashboard-social-footer > span:first-child { color: var(--muted); font-weight: 800; font-size: .84rem; }
.dashboard-social-footer span { color: inherit; }
.dashboard-owned-item { grid-template-columns: 64px 1fr; }
.dashboard-owned-item > .retro-button-secondary, .dashboard-owned-item > .dashboard-owned-note { grid-column: 2; justify-self: start; }
.dashboard-owned-copy .dashboard-rarity-pill, .hub-pick-copy .dashboard-rarity-pill, .dashboard-inventory-copy + .dashboard-rarity-pill { justify-self: start; width: fit-content; }
.dashboard-inventory-item { grid-template-columns: 64px 1fr; }
.dashboard-inventory-item > .dashboard-rarity-pill, .dashboard-inventory-item > .retro-button-secondary { grid-column: 2; justify-self: start; }

.dashboard-slot-item { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
.dashboard-slot-item .dashboard-slot-action { white-space: nowrap; }
.dashboard-slot-item--clear { grid-template-columns: 64px minmax(0, 1fr) auto; }
.dashboard-wardrobe-dialog--planner { display: flex; flex-direction: column; overflow: hidden; }
.dashboard-wardrobe-dialog--planner .dashboard-wardrobe2-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 6px; }
.dashboard-wardrobe-dialog--planner .dashboard-wardrobe-foot { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .dashboard-slot-item { grid-template-columns: 52px minmax(0, 1fr) auto; } .dashboard-slot-item .dashboard-rarity-pill { display: none; } }

body[data-dashboard-tab="account"] .hub-player-chip { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }

/* Set showcase: a fixed-size stage that clips its art, a neat row of set pieces, effects as plain tags */
.dashboard-journal-showcase { min-width: 0; }
.dashboard-journal-showcase > * { min-width: 0; }
.dashboard-journal-showcase-art { width: 100%; aspect-ratio: 1 / 1; min-height: 0; max-height: 240px; padding: 0; overflow: hidden; isolation: isolate; }
.dashboard-journal-showcase-stage { position: absolute; inset: 14px; display: block; overflow: hidden; border-radius: 12px; }
.dashboard-journal-showcase-stage > .hp-slot, .dashboard-journal-showcase-stage > * { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.dashboard-journal-showcase-stage svg, .dashboard-journal-showcase-stage canvas, .dashboard-journal-showcase-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dashboard-journal-showcase-set-icon { z-index: 2; width: 34px; height: 34px; }
.dashboard-journal-showcase-set-icon svg { width: 100%; height: 100%; }
.dashboard-journal-progress { min-width: 0; }
.dashboard-journal-progress > span { overflow-wrap: anywhere; }
.dashboard-journal-pieces { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; min-width: 0; }
.dashboard-journal-piece { display: grid; grid-template-rows: 64px auto auto; gap: 3px; justify-items: center; text-align: center; min-width: 0; padding: 8px 6px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.dashboard-journal-piece.is-owned { border-style: solid; border-color: var(--green); }
.dashboard-journal-piece.is-locked .dashboard-journal-piece-art { opacity: .55; filter: saturate(.6); }
.dashboard-journal-piece:hover, .dashboard-journal-piece:focus-visible { border-color: var(--gold); outline: none; }
.dashboard-journal-piece-art { width: 64px; height: 64px; display: block; position: relative; overflow: hidden; border-radius: 10px; background: var(--bg-2); }
.dashboard-journal-piece-art > * { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.dashboard-journal-piece-name { font-size: .74rem; font-weight: 800; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-journal-piece-state { display: inline-flex; gap: 4px; align-items: center; font-size: .68rem; font-weight: 900; color: var(--dim); }
.dashboard-journal-piece.is-owned .dashboard-journal-piece-state { color: var(--green); }
.dashboard-journal-effect-stage { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible; align-content: start; }
.dashboard-journal-effect-stage::before { display: none !important; }
.dashboard-journal-effect-labels { position: static; }
.dashboard-journal-effect-labels span { background: var(--surface-3) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 4px 10px !important; }
@media (max-width: 760px) {
    .dashboard-journal-showcase-art { aspect-ratio: 4 / 3; max-height: 220px; }
}