/* ---------- The Trophy Cabinet ---------- */
.room {
  --wood-1: #4a2f1c; --wood-2: #5c3b23; --wood-3: #3a2414; --wood-hi: #7a5232;
  position: relative; min-height: calc(100vh - 96px); overflow: hidden; color: var(--on-dark);
  display: flex; flex-direction: column; align-items: center; padding: 34px 16px 22px; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 180px),
    linear-gradient(180deg, #2a1d14 0%, #22170f 62%, #1a120c 62.2%, #160f0a 100%);
}
.room::before { /* wainscot rail */
  content: ''; position: absolute; left: 0; right: 0; top: 62%; height: 6px; z-index: -1;
  background: linear-gradient(180deg, #4b3322, #2a1c12); box-shadow: 0 1px 0 rgba(216,184,116,.15);
}
.room::after { /* floor */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 120px), linear-gradient(180deg, #24180f, #120c08);
  border-top: 1px solid #3a2818;
}
.room-light { position: absolute; inset: -10% 10% 20%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 46% at 50% 38%, rgba(232, 196, 120, .16), transparent 70%); }

.scene { width: min(1000px, 100%); transition: transform .9s var(--ease), opacity .45s; transform-origin: 50% 45%; }
.room.is-open .scene { transform: scale(1.025) translateY(6px); }
.room.is-zooming .scene { transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(2.1); opacity: .25; transition: transform .48s cubic-bezier(.5, 0, .2, 1), opacity .48s; }

.cabinet { position: relative; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.cab-crown {
  position: relative; height: 44px; margin: 0 -16px; border-radius: 3px 3px 0 0; display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%, rgba(0,0,0,.25) 31%, transparent 40%, rgba(255,255,255,.05) 70%, rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px, rgba(255,255,255,.03) 9px 10px, transparent 10px 17px),
    linear-gradient(180deg, var(--wood-2), var(--wood-3));
  box-shadow: inset 0 -2px 0 rgba(216, 184, 116, .35);
}
.crown-plate {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .5em; padding: 2px 10px 2px 16px; font-size: .78rem; color: #3b2a14;
  background: linear-gradient(180deg, #ecd391, #b8954f 60%, #8a6a2e); border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.cab-body {
  position: relative; padding: 16px; perspective: 1800px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 2px, transparent 2px 8px, rgba(255,255,255,.035) 8px 9px, transparent 9px 15px),
    linear-gradient(90deg, var(--wood-3), var(--wood-1) 8%, var(--wood-2) 50%, var(--wood-1) 92%, var(--wood-3));
}
.cab-interior {
  position: relative; display: grid; gap: 0; padding: 18px 16px 0; min-height: 300px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 60% at 50% 0%, #3b5a47 0%, #24392d 55%, #16241c 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.65), inset 0 0 0 1px rgba(216,184,116,.25);
  transition: filter .8s var(--ease);
}
.room.is-closed .cab-interior { filter: brightness(.5) saturate(.7); }
.interior-glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,226,160,.12), transparent 18%); }

.shelf {
  list-style: none; margin: 0; padding: 14px 4px 0; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px;
}
.shelf::before { /* warm strip light under the shelf above */
  content: ''; position: absolute; left: 6%; right: 6%; top: 0; height: 26px; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255, 220, 150, .2), transparent 70%);
}
.shelf::after { /* shelf board with brass front edge */
  content: ''; position: absolute; left: -16px; right: -16px; bottom: -2px; height: 14px; z-index: 0;
  background: linear-gradient(180deg, #d4b06a 0 2px, #6b4529 2px, #4a2f1c 70%, #2c1b10);
  box-shadow: 0 6px 10px rgba(0,0,0,.45);
}
.slot-li { position: relative; z-index: 1; display: flex; }
.slot {
  position: relative; width: 100%; height: clamp(124px, 15vw, 162px); padding: 0 0 18px; margin: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: inherit; border-radius: 4px; text-decoration: none;
}
.slot:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: -2px; }
.spot {
  position: absolute; inset: -16px -6px 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background:
    radial-gradient(ellipse 22% 10% at 50% 0%, rgba(255, 245, 210, .9), transparent 80%),
    conic-gradient(from 180deg at 50% -4%, transparent 160deg, rgba(255, 228, 165, .26) 172deg, rgba(255, 228, 165, .3) 180deg, rgba(255, 228, 165, .26) 188deg, transparent 200deg),
    radial-gradient(ellipse 40% 14% at 50% 92%, rgba(255, 228, 165, .3), transparent 80%);
}
.figure { width: 74%; max-width: 124px; position: relative; z-index: 1; transition: transform .35s var(--ease), filter .35s; filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)) brightness(.92); }
.figure .mini { width: 100%; height: auto; display: block; }
.plinth { width: 66%; height: 9px; margin-top: -2px; border-radius: 1px; background: linear-gradient(180deg, #caa75f 0 1.5px, #3a2414 1.5px, #24160c); box-shadow: 0 3px 4px rgba(0,0,0,.5); }
.plaque { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); z-index: 2; max-width: 94%; display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 1px; background: linear-gradient(180deg, #e8cd8a, #b8954f 70%, #9a7a3c); color: #2a1d0c; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.plaque-name { font-size: .64rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot[data-asset] .plaque::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #7d8a6f; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.tone-critical .plaque::before { background: #c0392b !important; } .tone-attention .plaque::before { background: #e2a33a !important; }
.tone-healthy .plaque::before { background: #5f9d6e !important; } .tone-info .plaque::before { background: #9a948a !important; }
.slot:hover .spot, .slot:focus-visible .spot, .slot.selected .spot { opacity: 1; }
.slot:hover .figure, .slot:focus-visible .figure, .slot.selected .figure { transform: translateY(-5px); filter: drop-shadow(0 12px 8px rgba(0,0,0,.5)) brightness(1.12); }
.slot-card {
  position: absolute; bottom: calc(100% - 26px); left: 50%; transform: translate(-50%, 6px); z-index: 10; width: max-content; max-width: 230px;
  display: grid; gap: 3px; padding: 9px 11px; text-align: left; font-size: .8rem; line-height: 1.35; color: var(--on-dark);
  background: rgba(18, 13, 10, .96); border: 1px solid rgba(216, 184, 116, .45); border-radius: 4px; box-shadow: 0 10px 24px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none;
}
.slot-card strong { color: var(--brass-bright); font-weight: 700; }
.slot-status { display: flex; gap: 5px; align-items: flex-start; }
.slot-status .ico { margin-top: 1px; }
.tone-critical .slot-status { color: #f0a497; } .tone-attention .slot-status { color: #f0cf8a; } .tone-healthy .slot-status { color: #a9d4b2; }
.slot-sample { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #c7b4e6; }
.slot:hover .slot-card, .slot:focus-visible .slot-card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.shelf:first-child .slot-card { bottom: auto; top: 30%; }
.slot-empty { cursor: default; }
.slot-empty .plinth { opacity: .55; }
.slot-more { justify-content: center; }
.more-n { font-family: var(--font-display); font-size: 2rem; color: var(--brass-bright); margin-bottom: 18px; }

/* Doors */
.door {
  position: absolute; top: 16px; bottom: 16px; width: calc(50% - 16px); z-index: 3; display: grid; grid-template-rows: 1fr 1fr; gap: 8px; padding: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 8px, rgba(255,255,255,.03) 8px 9px, transparent 9px 14px),
    linear-gradient(180deg, var(--wood-2), var(--wood-1));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 3px rgba(216,184,116,.18), 0 0 10px rgba(0,0,0,.35);
  transition: transform .95s cubic-bezier(.45, .05, .2, 1); backface-visibility: visible; pointer-events: none;
}
.door-l { left: 16px; transform-origin: left center; }
.door-r { right: 16px; transform-origin: right center; }
.pane {
  border: 1px solid rgba(216,184,116,.55); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  background:
    linear-gradient(118deg, rgba(255,255,255,.16) 0 7%, transparent 7% 34%, rgba(255,255,255,.07) 34% 38%, transparent 38%),
    linear-gradient(180deg, rgba(40, 60, 54, .28), rgba(20, 30, 26, .38));
}
.handle { position: absolute; top: calc(50% - 30px); width: 7px; height: 60px; border-radius: 4px; background: linear-gradient(90deg, #8a6a2e, #f0d898, #9a7a3c); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.door-l .handle { right: 3px; } .door-r .handle { left: 3px; }
.room.is-open .door-l { transform: rotateY(-104deg); }
.room.is-open .door-r { transform: rotateY(104deg); }
.room.is-open .door .pane { background: linear-gradient(118deg, rgba(255,255,255,.22) 0 12%, transparent 12%), rgba(30,44,40,.4); }

.cab-base { position: relative; height: 30px; margin: 0 -10px; background: linear-gradient(180deg, #d4b06a 0 2px, var(--wood-2) 2px, var(--wood-3)); border-radius: 0 0 2px 2px; }
.foot { position: absolute; bottom: -12px; width: 46px; height: 14px; background: linear-gradient(180deg, var(--wood-3), #1a0f08); border-radius: 0 0 8px 8px; }
.foot:first-child { left: 22px; } .foot:last-child { right: 22px; }

/* CTA, status, empty */
.cab-cta { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 6; display: grid; justify-items: center; gap: 10px; text-align: center; }
.btn-open { min-height: 52px; padding: 0 26px; font-size: 1.05rem; font-family: var(--font-ui); letter-spacing: .02em; box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.45); }
.cab-sub { margin: 0; color: var(--on-dark-2); font-size: .88rem; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.cab-status { min-height: 1.6em; margin: 26px 0 10px; color: var(--on-dark-2); font-size: .92rem; text-align: center; max-width: 640px; }
.cab-empty { position: relative; z-index: 4; margin-top: 26px; max-width: 560px; text-align: center; padding: 22px 26px; background: rgba(18,13,10,.85); border: 1px solid rgba(216,184,116,.3); border-radius: var(--radius-lg); }
.cab-empty .h2 { color: var(--ivory); margin-bottom: 6px; }
.cab-empty p { color: var(--on-dark-2); margin: 0 0 16px; }
.cab-empty .row { justify-content: center; }
.room.is-empty .cab-status { display: none; }
.cab-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: auto; padding-top: 18px; position: relative; z-index: 2; }
.cab-bar .seg { background: rgba(255,255,255,.04); border-color: rgba(216,184,116,.35); }
.cab-bar .seg a { color: var(--on-dark-2); }
.cab-bar .seg [aria-current='page'] { background: rgba(216,184,116,.16); color: var(--brass-bright); }
.check-dark { color: var(--on-dark-2); font-size: .88rem; }
.check-dark input { accent-color: var(--brass); }

@media (max-width: 640px) {
  .room { padding: 22px 10px 16px; min-height: calc(100vh - 150px); }
  .cab-body { padding: 10px; }
  .door { top: 10px; bottom: 10px; width: calc(50% - 10px); padding: 6px; }
  .door-l { left: 10px; } .door-r { right: 10px; }
  .cab-interior { padding: 12px 8px 0; min-height: 260px; }
  .shelf::after { left: -10px; right: -10px; }
  .slot { height: 116px; }
  .cab-crown { height: 34px; margin: 0 -8px; }
  .slot-card { display: none; } /* status line below the cabinet carries the same info on touch */
}