/* ---------------------------------------------------------------------------
   d2-theme.css — authentic Diablo II theming layer (loads last, wins).

   Color language (hex-level, straight from D2's UI):
   - labels/headers ......... muted antique gold  #c7b377
   - body values ............ soft silver-white   #e8e6e0 / #cfccc2
   - highlight moments ...... D2 gold #c7b377 + subtle glow
   - errors / "full" ........ D2 red family       #a02020 / #c04040
   - gem/magic accents ...... D2 slate blue       #6969ff (sparingly)
   - muted italics .......... gray                #7a766c
   Panels read as translucent black tooltips over the world; inputs are dark
   recessed sockets; buttons are stone/iron chips that depress 1px.

   No layout metrics are changed by this layer (colors, backgrounds, borders
   of identical width, text color/shadow, radii only) — with ONE deliberate
   exception: style.css's dialog-only `.seats{margin;border}` rule leaks into
   the signup sheet and made it overflow at 1600×900; `.slots .seats` below
   restores the sheet grid so the hard "no scrolling" invariant holds.
--------------------------------------------------------------------------- */

/* palette/tokens live in tokens.css (loaded first) — this layer only styles */

::selection{background:rgba(199,179,119,.35);color:#f3eedd}

/* ---- 1. Panels: smoky dark glass the cellar glows through ------------------ */
/* translucent + backdrop-blur so the painterly door art breathes through the
   frame instead of a black card pasted over it; the radial keeps the center
   (body text) clearer and darkens the edges so the gold frame reads as a frame. */
.panel{
  background:
    radial-gradient(130% 120% at 50% 40%,
        rgba(0,0,0,0) 42%, rgba(0,0,0,.34) 78%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(6,5,3,.55), rgba(2,1,0,.72)) padding-box;
  -webkit-backdrop-filter:blur(7px) brightness(.82) saturate(.9);
  backdrop-filter:blur(7px) brightness(.82) saturate(.9);
}
/* warm lantern spill + inner vignette (overlay so mood.css torch-breathe box-shadow
   still animates); content sits above it */
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 34px rgba(0,0,0,.55),
             inset 0 14px 26px rgba(214,126,44,.05);
}
.panel > *{position:relative;z-index:1}
/* dialogs go a shade deeper — pure D2 item-tooltip black */
.dialog{
  background:linear-gradient(180deg,rgba(2,2,1,.86),rgba(0,0,0,.93)) padding-box;
}

/* panel headers: no stone plaque (that's button material) — engraved lit gold
   over a thin gold rule, matching the .night-title dividers inside the sheet */
.panel h3{
  border:0;border-image:none;background:none;
  padding:2px 0 8px;margin:0 0 8px;
  color:var(--gold-lt);
  font-size:.86rem;letter-spacing:.2em;
  border-bottom:1px solid rgba(199,179,119,.32);
  text-shadow:0 1px 0 #000,0 2px 4px rgba(0,0,0,.85),0 0 14px rgba(199,179,119,.18);
}
/* small blue gem centered on the header rule — echoes the frame's corner gems */
.panel h3{position:relative}
.panel h3::after{
  content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);
  width:7px;height:7px;background:radial-gradient(#8484e8,#26264a);
  box-shadow:0 0 6px rgba(132,132,232,.5)}
/* mood.css pulses a warm glow around the header glyphs — now gold-emissive */
@keyframes title-glow{
  0%,100%{text-shadow:0 1px 0 #000,0 0 10px rgba(199,179,119,.20)}
  47%    {text-shadow:0 1px 0 #000,0 0 16px rgba(220,201,140,.42),0 0 30px rgba(199,179,119,.14)}
}
/* connective text over the now-translucent panel keeps its own scrim */
.panel .sheet-hint,.panel .night-title{text-shadow:0 1px 2px rgba(0,0,0,.9)}

/* ---- 2. The signup sheet --------------------------------------------------- */
.sheet-sub{color:var(--parch)}
.sheet-sub b{color:var(--gold)}
.sheet-hint{color:var(--d2-gray)}
.hint-link{color:#9b8c62}
.hint-link:hover{color:var(--gold-lt)}

/* FIT FIX: style.css line ~194 (`.seats{margin:.6em 0 1em;border:1px…}`) is a
   dialog rule that also hits the sheet's 2×2 seat grids (+~27px per slot),
   overflowing .slots at 1600×900. Scope it back out of the sheet. */
.slots .seats{margin:0;border:0;border-radius:0;overflow:visible}

/* slot rows: D2 character-select sockets — dark recess, hairline edge,
   restrained hover brightening with a gold edge (no bloom) */
.slotrow{
  background:linear-gradient(180deg,rgba(12,10,7,.72),rgba(2,2,1,.85));
  border:1px solid #000;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(199,179,119,.13),inset 0 1px 8px rgba(0,0,0,.75);
  transition:box-shadow .25s ease,background .25s ease;
}
.slotrow:hover{
  background:linear-gradient(180deg,rgba(19,16,11,.78),rgba(5,4,3,.86));
  box-shadow:inset 0 0 0 1px rgba(199,179,119,.5),inset 0 1px 8px rgba(0,0,0,.7);
}
.slotrow.full{
  box-shadow:inset 0 0 0 1px rgba(160,32,32,.22),inset 0 1px 8px rgba(0,0,0,.75);
}

.sl-time-col{color:var(--gold)}
.fullmark{color:var(--d2-red-lt)}
.seatnum{color:#8d7c50}
.seatname{color:var(--d2-white)}
.seatname.open{color:var(--d2-gray);opacity:.75}

/* name input: dark recessed stone socket, gold caret & selection */
.seat-input{
  color:var(--d2-white);
  background:linear-gradient(180deg,#040302,#0b0906);
  border:1px solid var(--gold-dk);border-radius:3px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.55);
  caret-color:var(--gold);
}
.seat-input::placeholder{color:var(--d2-gray);font-style:italic;opacity:.85}
.seat-input:focus{
  border-color:#8a7440;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85),0 0 6px rgba(199,179,119,.22);
}

/* join button: iron chip, engraved glyph, presses down 1px */
.seat-join{
  color:var(--parch);
  background:linear-gradient(180deg,#39342a,#211d16 55%,#181410);
  border:1px solid #000;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px #4e4229,
             0 1px 2px rgba(0,0,0,.7);
  text-shadow:0 -1px 0 rgba(0,0,0,.9);
  transition:filter .12s ease,box-shadow .2s ease;
}
.seat-join:hover{
  background:linear-gradient(180deg,#453f32,#282218 55%,#1b1712);
  color:var(--gold-lt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 0 0 1px #6e5c34,
             0 1px 2px rgba(0,0,0,.7);
}
.seat-join:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.75),inset 0 0 0 1px #4e4229;
}

/* leave (×): iron chip with D2-red engraving */
.leave-btn{
  color:var(--d2-red-lt);
  background:linear-gradient(180deg,#2b211d,#160f0c);
  border:1px solid #000;border-radius:3px;opacity:.9;
  box-shadow:inset 0 0 0 1px rgba(160,32,32,.35),inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow:0 1px 1px #000;
  transition:opacity .15s ease,box-shadow .2s ease;
}
.leave-btn:hover{
  opacity:1;background:linear-gradient(180deg,#39241f,#1a100d);
  box-shadow:inset 0 0 0 1px rgba(192,64,64,.55),inset 0 1px 0 rgba(255,255,255,.05);
}
.leave-btn:active{transform:translateY(1px);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7),inset 0 0 0 1px rgba(160,32,32,.4)}

/* flash lines: the join confirm is a "unique item" gold moment; errors are red */
.night-flash.ok{color:var(--gold);text-shadow:0 0 8px rgba(199,179,119,.35),0 1px 1px #000}
.night-flash.err{color:var(--d2-red-lt);text-shadow:0 1px 1px #000}

/* status chips: OPEN reads magic-blue (sparingly), FULL reads D2 red */
.status.open{color:var(--d2-blue);background:var(--ok-bg);border-color:var(--ok-bd)}
.status.full{color:var(--d2-red-lt);background:var(--full-bg);border-color:var(--full-bd)}
@keyframes open-pulse{
  0%,86%,100%{box-shadow:0 0 0 rgba(105,105,255,0)}
  92%        {box-shadow:0 0 8px rgba(105,105,255,.35),0 0 16px rgba(105,105,255,.14)}
}

/* ---- 3. Dialogs: D2 item-tooltip energy ------------------------------------ */
.dialog-body h2{
  color:var(--gold);text-align:center;
  text-shadow:0 1px 2px #000,0 0 12px rgba(199,179,119,.28);
}
.dialog-body p{color:var(--parch)}
.dialog-body b{color:var(--gold)}
.dialog-body .muted,.dialog-body .note{color:var(--d2-gray)}
.dialog-body a{color:var(--gold)}
.dialog-body a:hover{color:var(--gold-lt)}
.dialog-body .cain{
  color:var(--gold);font-style:italic;
  text-shadow:0 1px 2px #000,0 0 12px rgba(199,179,119,.4);
}
.gameline{color:var(--gold)}
.ok-msg{color:var(--gold);text-shadow:0 0 8px rgba(199,179,119,.3)}
.field{color:var(--gold)}
.dialog-body input,.dialog-body select{
  color:var(--d2-white);
  background:linear-gradient(180deg,#040302,#0b0906);
  border:1px solid var(--gold-dk);border-radius:3px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85);
  caret-color:var(--gold);
}
.dialog-body input:focus,.dialog-body select:focus{
  outline:none;border-color:#8a7440;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85),0 0 6px rgba(199,179,119,.22);
}
.dialog-close{color:var(--d2-gray)}
.dialog-close:hover{color:var(--gold-lt)}
/* dialog seat list */
.dialog-body .seatline{background:rgba(4,3,2,.6)}
.dialog-body .seatline+.seatline{border-top:1px solid rgba(199,179,119,.14)}
.dialog-body .seatline.open-seat{color:var(--d2-gray)}
.dialog-body .seats{border-color:rgba(199,179,119,.22)}
/* the dialog's warm bloom (mood.css) — keep it faint and antique */
.panel-backdrop.show .dialog{
  box-shadow:0 18px 50px rgba(0,0,0,.75),0 0 22px rgba(199,179,119,.16),
             0 0 55px rgba(199,179,119,.07);
}

/* ---- 4. Chrome around the scene --------------------------------------------- */

/* games shelf: hairline + antique hover edge, no candy glow */
.gamebox img{box-shadow:0 0 0 1px rgba(199,179,119,.2),0 8px 16px rgba(0,0,0,.65)}
.gamebox:hover img{
  box-shadow:0 0 0 1px var(--gold),0 12px 28px rgba(0,0,0,.8),
             0 0 18px rgba(199,179,119,.18);
}

/* ambience toggle (style is injected by audio.js after this sheet — out-rank it) */
#audioToggle#audioToggle{
  color:var(--gold);border:1px solid var(--gold-dk);
  background:rgba(0,0,0,.75);
  text-shadow:0 1px 1px #000;
}
#audioToggle#audioToggle:hover{
  border-color:#8a7440;box-shadow:0 0 8px rgba(199,179,119,.3);
}

/* scrollbars: antique gold on near-black (mood.css repaint) */
.slots,.dialog{scrollbar-color:rgba(199,179,119,.5) rgba(5,4,3,.6)}
.slots::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track{
  background:rgba(5,4,3,.6)}
.slots::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#5c4a1e,#c7b377 45%,#5c4a1e);
  border:1px solid rgba(0,0,0,.9)}
.slots::-webkit-scrollbar-thumb:hover,.dialog::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#6e5a2a,#dcc98c 45%,#6e5a2a)}

/* ---- integration pass (style-bible items) --------------------------------
   D2 has no rounded corners, no teal, and the gauntlet everywhere. */
.seat-input,.seat-join,.leave-btn,.status,.slotrow,.chip,.night-flash,
.dialog-body input,.dialog-body select{border-radius:0 !important}
.door-hotspot{border-radius:0}
.door-hotspot:hover{box-shadow:0 0 34px rgba(199,179,119,.22),
  inset 0 0 40px rgba(199,179,119,.10)}
.door-hotspot:focus-visible{outline:2px solid rgba(199,179,119,.5)}
button,.hint-link,.gamebox,.tab,.slotrow,
.seat-join,.leave-btn,.dialog-close{cursor:url("assets/ui/cursor-hand.png?v=2") 8 0, pointer}

/* door hotspot recentred on the door; knocking scrolls to the signup sheet */
.door-hotspot{left:48%;top:61%}

/* the signup panel flares warm gold when you knock on the door */
@keyframes beckon{
  0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.7)}
  30%    {box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 26px rgba(230,207,134,.55),
          0 0 60px rgba(230,207,134,.28)}
}
.booking.beckon{animation:beckon 1.5s ease-out 1}
@media (prefers-reduced-motion: reduce){ .booking.beckon{animation:none} }

/* ---- filigree page corners (see-through gold, frames the whole page) ---- */
.page-frame{position:fixed;inset:0;z-index:8;pointer-events:none}
.corner{position:absolute;width:min(15vw,180px);height:min(15vw,180px);
  background:url("assets/ui/filigree.webp") no-repeat;background-size:contain;
  opacity:.82;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.corner.tl{top:0;left:0}
.corner.tr{top:0;right:0;transform:scaleX(-1)}
.corner.bl{bottom:0;left:0;transform:scaleY(-1)}
.corner.br{bottom:0;right:0;transform:scale(-1)}

/* ---- mobile: keep door overlays contained to the hero, not the scroll ---- */
@media (max-width:900px){
  .door-hotspot{position:absolute;left:50%;top:48%;
    width:min(60vw,320px);height:min(52vh,460px)}
  .page-frame{z-index:9}            /* corners still frame the viewport */
}

/* dialog close firmly top-right */
.dialog{position:relative}
.dialog-close{left:auto !important;right:12px !important;top:8px !important}