/* ============================================================
   2.5D ROOM SCENES — layering the Three.js candlelit backdrop
   behind the game UI, and the holographic restyle of that UI.
   Active only while body.room3d (a room scene is mounted).
   ============================================================ */

#room3d-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  display: block; z-index: 0; pointer-events: none;
}
/* the 3D scenes are candlelit colour by design — never desaturate them with the
   menu's mono/grayscale canvas filter */
:root.mono #room3d-canvas, #room3d-canvas { filter: none !important; }

/* the flat-background candle glow + grain belong to the menu, not the 3D rooms */
body.room3d #candle,
body.room3d #grain { opacity: 0 !important; }

/* the game UI floats above the scene */
body.room3d #app { position: relative; z-index: 2; }
body.room3d #shared-bar { z-index: 50; }   /* stay pinned above the scene + any modal */

/* ---- the Parlor: kiosk + scratch as holographic glass over the table ---- */
/* HUD plaques — the top bar reads like the OLD parlor's: SOLID, high-contrast
   plates (not faint glass), brighter labels and bigger numbers, so COINS / NIGHT
   / THE CUT read at a glance — especially on a phone. */
body.room3d-parlor #hud {
  gap: 0.6rem; padding: 0.55rem 0 0.7rem; flex-wrap: wrap;
}
body.room3d-parlor #hud .hud-cell {
  min-width: 4.4rem; padding: 0.3rem 0.7rem 0.4rem;
  background: linear-gradient(168deg, rgba(30,21,12,.96), rgba(12,8,5,.96));
  border: 1px solid #6e5524; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(216,180,94,.18), 0 3px 12px rgba(0,0,0,.7);
}
body.room3d-parlor #hud .label {
  font-size: 0.66rem; letter-spacing: 0.16em;
  color: #c8a85e; opacity: 0.95;
}
body.room3d-parlor #hud .num { font-size: 1.75rem; }
body.room3d-parlor #hud .num.gold { text-shadow: 0 0 10px rgba(216,180,90,.5); }
@media (max-width: 600px) {
  body.room3d-parlor #hud { gap: 0.45rem; }
  body.room3d-parlor #hud .hud-cell { min-width: 4rem; padding: 0.28rem 0.55rem 0.36rem; }
  body.room3d-parlor #hud .label { font-size: 0.62rem; }
  body.room3d-parlor #hud .num { font-size: 1.45rem; }
  body.room3d-parlor #hud .relics-cell { max-width: 9rem; }
}

/* kiosk offers + scratch ticket panels + rule cards become glowing glass over
   the candlelit table — the look Kevin preferred. */
body.room3d-parlor .offer,
body.room3d-parlor .ticket-panel,
body.room3d-parlor .rule-card,
body.room3d-parlor .offer.pawn-offer {
  background: linear-gradient(168deg, rgba(38,28,18,.62), rgba(16,11,7,.5)) !important;
  border: 1px solid rgba(200,168,94,.5) !important;
  box-shadow: 0 0 24px rgba(200,168,94,.18), inset 0 0 30px rgba(255,190,110,.06), 0 16px 40px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
}

/* the offers lift gently toward you on hover — flat, no angle (Kevin found the
   tilted spread distracting) */
body.room3d-parlor #kiosk .offer {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.room3d-parlor #kiosk .offer:hover {
  transform: translateY(-5px);
  border-color: var(--gold, #c8a85e) !important;
  box-shadow: 0 0 30px rgba(200,168,94,.32), inset 0 0 30px rgba(255,190,110,.08), 0 22px 44px rgba(0,0,0,.6) !important;
  z-index: 5;
}

/* the parlorvest intro + night screens let the table show through */
body.room3d-parlor #screen-parlorvest > h2,
body.room3d-parlor #screen-night .kiosk-title { text-shadow: 0 2px 14px #000; }

/* keep text crisp over the scene */
body.room3d-parlor #screen-parlorvest p,
body.room3d-parlor #screen-night p { text-shadow: 0 1px 8px rgba(0,0,0,.7); }

/* ---- THE HALLWAY: holographic doors over the corridor ---- */
#screen-hallway { background: transparent; }
#hallway-inner { position: relative; z-index: 2; }
.hall-title { font-size: 1.4rem; letter-spacing: .28em; color: var(--brass, #c8a85e);
  text-shadow: 0 0 18px rgba(200,168,94,.3); margin-top: 1.4rem; }
.hall-sub { font-style: italic; color: var(--dim, #a3957a); opacity: .72;
  margin: .3rem 0 1.5rem; text-shadow: 0 1px 8px #000; }
#hallway-doors { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
  max-width: 60rem; margin: 0 auto; }
.hall-door { width: clamp(9rem, 13vw, 12rem); padding: 1rem .9rem; border-radius: 6px;
  text-align: center; cursor: pointer; font: inherit; position: relative;
  background: linear-gradient(168deg, rgba(38,28,18,.5), rgba(16,11,7,.42));
  border: 1px solid rgba(200,168,94,.5); color: var(--bone, #efe7d6);
  box-shadow: 0 0 24px rgba(200,168,94,.18), inset 0 0 30px rgba(255,190,110,.06), 0 16px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); transition: transform .2s, box-shadow .2s, border-color .2s; }
.hall-door:hover { transform: translateY(-5px); border-color: var(--brass, #c8a85e);
  box-shadow: 0 0 34px rgba(200,168,94,.32), inset 0 0 30px rgba(255,190,110,.11), 0 22px 50px rgba(0,0,0,.55); }
.hd-plate { display: block; font-size: .9rem; letter-spacing: .08em; color: #fbf3e2;
  text-transform: uppercase; margin-bottom: .35rem; text-shadow: 0 0 10px rgba(200,168,94,.3); }
.hd-sub { display: block; font-size: .67rem; color: #c8baa0; line-height: 1.35; font-style: italic; }
.hall-frontier { border-color: rgba(207,70,54,.4); opacity: .82; cursor: default; }
.hall-frontier .hd-plate { color: #c4564a; }
.hall-frontier:hover { transform: none; box-shadow: 0 0 24px rgba(207,70,54,.16), inset 0 0 30px rgba(207,70,54,.06), 0 16px 40px rgba(0,0,0,.5); }
#btn-hallway-back { margin-top: 1.7rem; }