main { padding:18px 20px 40px; }
.sech { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; margin:6px 0 8px 2px; }
/* The overview: the same bookcase, scaled so the whole shelf fits in a small
   strip on top, mirroring the book wall's mini. */
.ov { overflow:hidden; margin-bottom:26px; }
#mini { width:max-content; transform-origin:0 0; cursor:pointer; }
/* --- The game shelf: five Regale, the outer two folded back --- */
#wall { overflow-x:auto; padding:14px 0 40px; }
.scene { width:max-content; }
.labels { display:flex; margin:0 0 8px; }
.lbl { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-left:4px; flex:none; }
.lsp { flex:none; }
.bookcase { display:flex; align-items:flex-end; }
.rpanel { position:relative; display:flex; flex-direction:column; flex:none; }
.frame { display:flex; flex-direction:column; border-radius:3px; background:#b98c50;
  box-shadow:0 16px 36px rgba(60,40,10,.32); }
@media (prefers-color-scheme: dark) {
  .frame { background:#7d5e30; box-shadow:0 16px 36px rgba(0,0,0,.55); }
}
/* Shelf 0: games resting on top of the unit, open (no sides), above the frame. */
.roof { display:flex; align-items:flex-end; }
.rcol { position:relative; display:flex; align-items:flex-end; justify-content:flex-start; gap:7px; padding:0 6px 1px; }
.rsp { flex:none; }
/* The shelf-number label, like the book wall's Brett labels. */
.bnum { position:absolute; left:5px; top:3px; z-index:0; font-size:9px; line-height:1;
  color:var(--muted); opacity:.7; pointer-events:none; }
.rail { height:11px; flex:none; background:linear-gradient(180deg,#dcb87e 0,#bd9152 100%); }
.base { height:16px; flex:none; background:linear-gradient(180deg,#b0863f 0,#7f5c2c 100%); }
.pbody { display:flex; flex:none; }
@media (prefers-color-scheme: dark) {
  .rail { background:linear-gradient(180deg,#8a6a38 0,#6f5127 100%); }
  .base { background:linear-gradient(180deg,#6f5127 0,#4a3518 100%); }
}
.vdiv { flex:none;
  background:linear-gradient(90deg,#6f4e28 0,#b98c50 35%,#d3b47f 50%,#b98c50 65%,#6f4e28 100%); }
@media (prefers-color-scheme: dark) {
  .vdiv { background:linear-gradient(90deg,#4a3518 0,#7d5e30 35%,#8a6a38 50%,#7d5e30 65%,#4a3518 100%); }
}
.ucol { display:flex; flex-direction:column; flex:none; }
.comp { position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
  gap:7px; padding:0 6px; background:linear-gradient(180deg,#ded4c4 0,#e8e0d2 100%); }
@media (prefers-color-scheme: dark) {
  .comp { background:linear-gradient(180deg,#26221c 0,#332e27 100%); }
}
/* The side wings fold back, hinged at the corner they share with the middle. */
.wing { flex:none; display:flex; perspective:1500px; }
.wing.left { justify-content:flex-end; }
.wing.right { justify-content:flex-start; }
.wing.left > .rpanel { transform-origin:100% 50%; }
.wing.right > .rpanel { transform-origin:0% 50%; }
/* The fold shading goes on the shelf body, not the whole panel: the panel also
   spans the open roof above the unit, where there is nothing behind the wash but
   the page, so it painted a floating grey pane beside the top-shelf boxes. */
.wing .frame { position:relative; }
.wing .frame::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px; }
.wing.left .frame::after { background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,0) 60%); }
.wing.right .frame::after { background:linear-gradient(270deg,rgba(0,0,0,.34),rgba(0,0,0,0) 60%); }
/* Lying games (a pile, grows upward) and standing games (spines). */
.stackH { display:flex; flex-direction:column-reverse; gap:2px; flex:none; }
.lie { display:flex; align-items:center; padding:0 8px; border-radius:2px; cursor:pointer;
  overflow:hidden; transition:transform .12s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 3px rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.2); }
.lie:hover, .lie:focus-visible { transform:translateX(6px); z-index:5; outline:none; }
.lie .t { font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.stackN { display:flex; flex-direction:column; align-items:stretch; flex:none; }
/* An unidentified box: placed for its arrangement and colour, marked as a stand-in. */
.lie.ph, .spine.ph { outline:1px dashed currentColor; outline-offset:-3px; opacity:.9; cursor:default; }
.stackV { display:flex; align-items:flex-end; gap:2px; flex:none; }
.gfix { flex:none; display:block; align-self:flex-end; }
.gfix svg { width:100%; height:100%; display:block; }
.spine { display:flex; align-items:center; justify-content:center; flex:none;
  border-radius:2px 2px 0 0; cursor:pointer; overflow:hidden; transition:transform .12s ease;
  box-shadow:-2px 0 3px rgba(0,0,0,.25) inset, 2px 0 3px rgba(255,255,255,.14) inset,
    1px -1px 4px rgba(0,0,0,.28); }
.spine:hover, .spine:focus-visible { transform:translateY(-8px); z-index:5; outline:none; }
.spine .t { writing-mode:vertical-rl; font-size:9.5px; font-weight:700; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:92%; }
@keyframes gflash { 0%,100% { box-shadow:0 0 0 0 rgba(124,92,255,0); }
  20%,60% { box-shadow:0 0 0 4px var(--accent), 0 0 22px 6px var(--accent); } }
.lie.flash, .spine.flash { animation:gflash 2.4s ease-in-out 2; z-index:6; }
/* The two-door Schrank filling the merged double compartment in Regal 3. */
.cab { display:flex; gap:6px; width:100%; height:100%; padding:8px 4px; }
.cab i { flex:1; border-radius:2px; border:1px solid rgba(60,40,10,.4);
  background:linear-gradient(92deg,#d8bd8f 0,#c6a367 45%,#d3b47f 78%,#b78f52 100%);
  box-shadow:inset 0 0 26px rgba(60,40,10,.18); position:relative; }
.cab i::after { content:""; position:absolute; top:50%; width:6px; height:6px;
  border-radius:50%; background:#6f5127; }
.cab i:first-child::after { right:9px; }
.cab i:last-child::after { left:9px; }
@media (prefers-color-scheme: dark) {
  .cab i { background:linear-gradient(92deg,#7d5e30 0,#6a4f28 45%,#7d5e30 78%,#5e441f 100%); }
}