/* ============================================================
   THE ONE-AND-TWENTY — holographic restyle over the 2.5D scene.
   Active only while body.room3d-vingt (the Three.js schoolroom is
   mounted behind the UI). The 3D scene renders the ENVIRONMENT:
   the Governess's desk, the receding rows of pupil desks, the
   slate board on the wall, the coal fire, and the Boy. So here we
   HIDE the room's CSS-ART that doubles that environment, and we
   restyle the GAME (cards, HUD, Governess line, HIT/STAND, count)
   as candlelit holographic glass floating over the scene.
   Palette: bone #efe7d6, brass #c8a85e, brass-deep #5e4c25,
   red #cf4636 (red ONLY for the Boy / bust / loss).
   ============================================================ */

/* ---------- the room shell breathes the scene through ---------- */
/* The schoolroom box (walls/floor/vignette/fire-glow background) is the
   3D scene's job now — strip its frame, ground and shadow so the desk,
   fire and Boy behind the canvas read clean. Its children (the cards,
   the breath words) survive as their own restyled glass below. */
body.room3d-vingt #screen-vingt .vg-schoolroom {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0.2rem 0.55rem 0.4rem !important;
  overflow: visible !important;
}
/* the lesson-dim filters drove the CSS room dark; the scene owns mood now */
body.room3d-vingt #screen-vingt .vg-room[data-lessons] .vg-schoolroom,
body.room3d-vingt #screen-vingt .vg-room.vg-hush .vg-schoolroom,
body.room3d-vingt #screen-vingt .vg-room.vg-kept .vg-schoolroom {
  filter: none !important;
}
/* the mono one-lamp vignette overlay — the 3D scene is the only lamp now */
body.room3d-vingt #screen-vingt .vg-schoolroom::after { display: none !important; }

/* ---------- the duplicated CSS-art environment: HIDE ----------
   The 3D scene renders the coal fire, the rows of pupil desks and the
   slate board. The flat CSS twins double them, so they go dark. The
   GAME — cards, calls, HUD, Governess, HIT/STAND, count — stays. */
body.room3d-vingt #screen-vingt .vg-fire,        /* coal fire → 3D grate */
body.room3d-vingt #screen-vingt .vg-desks {      /* pupil desks → 3D rows */
  display: none !important;
}

/* the slate BOARD panel is the 3D wall slate; drop its heavy oak frame
   and slate fill, but KEEP its chalk content (the rule, the tick margin,
   the calls, the lessons) floating as faint chalk over the scene */
body.room3d-vingt #screen-vingt .vg-board {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 0.1rem 0.4rem 0.2rem !important;
}

/* ---------- the explainer (vestibule) → light holographic glass ----------
   was an opaque ~rgba(4,5,6,.94) scrim that hid the scene entirely. Let the
   schoolroom show through a candlelit pane. */
body.room3d-vingt #screen-vingt .vg-explainer {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(200, 168, 94, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(10, 12, 9, 0.62), rgba(6, 8, 6, 0.76)) !important;
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
}
body.room3d-vingt #screen-vingt .vg-explainer-house,
body.room3d-vingt #screen-vingt .vg-howto { text-shadow: 0 1px 9px rgba(0, 0, 0, 0.85); }

/* the end panel (the slate, complete) — same lighter glass; its own slate
   ledger panel below stays legible glass */
body.room3d-vingt #screen-vingt .vg-end {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(200, 168, 94, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(10, 12, 9, 0.66), rgba(6, 8, 6, 0.8)) !important;
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
}

/* ---------- the HUD plaques → brass glass ---------- */
body.room3d-vingt #screen-vingt .vg-hud {
  border-bottom-color: rgba(200, 168, 94, 0.28) !important;
}
body.room3d-vingt #screen-vingt .vg-felt-coins,
body.room3d-vingt #screen-vingt .vg-bank-coins {
  color: #efe7d6;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.85), 0 0 18px rgba(200, 168, 94, 0.18);
}
body.room3d-vingt #screen-vingt .vg-hold {
  color: #c8a85e;
  text-shadow: 0 0 10px rgba(200, 168, 94, 0.6), 0 1px 4px #000;
}

/* ---------- the Governess line + coach — readable over the scene ---------- */
body.room3d-vingt #screen-vingt .vg-head .label { text-shadow: 0 1px 8px #000; }
body.room3d-vingt #screen-vingt .vg-gov {
  color: #efe7d6;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
body.room3d-vingt #screen-vingt .vg-coach {
  color: #d8c79a;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.85);
}

/* ---------- the slate-board chalk content (kept) — glows as chalk ---------- */
body.room3d-vingt #screen-vingt .vg-board-rule,
body.room3d-vingt #screen-vingt .vg-board-calls,
body.room3d-vingt #screen-vingt .vg-lesson {
  text-shadow: 0 0 8px rgba(228, 234, 238, 0.45), 0 1px 7px rgba(0, 0, 0, 0.85);
}
body.room3d-vingt #screen-vingt .vg-tick { box-shadow: 0 0 6px rgba(228, 234, 238, 0.3); }

/* ---------- the cards — the real game — holographic bone glass ----------
   the 3D scene's redundant dealt cards are hidden (see vingt.mjs); THESE
   DOM cards are the live hand, so they read brightest of all. */
body.room3d-vingt #screen-vingt .vg-card {
  background: linear-gradient(148deg, rgba(245, 238, 220, 0.95), rgba(214, 206, 186, 0.9) 55%, rgba(184, 176, 154, 0.88)) !important;
  border: 1px solid rgba(200, 168, 94, 0.55) !important;
  box-shadow:
    0 0 22px rgba(200, 168, 94, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 252, 240, 0.5) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
body.room3d-vingt #screen-vingt .vg-card.red { color: #b22a1e; }  /* red pips — loss tone */
/* THE BOY — slate-grey card with his red doom bleed (the only red glass) */
body.room3d-vingt #screen-vingt .vg-boycard {
  background: linear-gradient(152deg, rgba(65, 71, 75, 0.92), rgba(36, 41, 44, 0.9)) !important;
  border-color: rgba(207, 70, 54, 0.45) !important;
  box-shadow:
    0 0 20px rgba(207, 70, 54, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.7),
    inset 0 0 14px rgba(0, 0, 0, 0.55) !important;
}

/* the breath words — a faint italic over the desk */
body.room3d-vingt #screen-vingt .vg-breathwords {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

/* ---------- the toast — glass card over the scene ---------- */
body.room3d-vingt #screen-vingt .vg-toast {
  background: linear-gradient(168deg, rgba(38, 28, 18, 0.82), rgba(14, 10, 7, 0.86)) !important;
  border: 1px solid rgba(200, 168, 94, 0.5) !important;
  box-shadow: 0 0 24px rgba(200, 168, 94, 0.18), 0 16px 40px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.room3d-vingt #screen-vingt .vg-toast[data-kind='lose'],
body.room3d-vingt #screen-vingt .vg-toast[data-kind='boy'] {
  border-color: rgba(207, 70, 54, 0.55) !important;
  box-shadow: 0 0 24px rgba(207, 70, 54, 0.26), 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

/* ---------- HIT / STAND — the two biggest buttons, glowing glass ---------- */
body.room3d-vingt #screen-vingt .vg-hit {
  background: linear-gradient(168deg, rgba(38, 28, 18, 0.7), rgba(16, 11, 7, 0.62)) !important;
  border: 1px solid rgba(200, 168, 94, 0.55) !important;
  color: #d8b45a;
  box-shadow: 0 0 18px rgba(200, 168, 94, 0.15), inset 0 0 22px rgba(255, 190, 110, 0.05) !important;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-vingt #screen-vingt .vg-stand {
  background: linear-gradient(168deg, rgba(28, 26, 22, 0.7), rgba(12, 12, 11, 0.62)) !important;
  border: 1px solid rgba(200, 168, 94, 0.32) !important;
  color: #efe7d6;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 252, 240, 0.03) !important;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-vingt #screen-vingt .vg-actions.vg-live .vg-hit:not(:disabled) {
  border-color: #c8a85e !important;
  box-shadow: 0 0 26px rgba(200, 168, 94, 0.32), inset 0 0 16px rgba(255, 190, 110, 0.09) !important;
}
body.room3d-vingt #screen-vingt .vg-actions.vg-live .vg-stand:not(:disabled) {
  border-color: rgba(200, 168, 94, 0.5) !important;
  box-shadow: 0 0 18px rgba(200, 168, 94, 0.16) !important;
}

/* ---------- chips / deal / bank — brass glass to match ---------- */
body.room3d-vingt #screen-vingt .vg-chipbtn {
  background: linear-gradient(168deg, rgba(30, 26, 18, 0.66), rgba(13, 16, 20, 0.6)) !important;
  border: 1px solid rgba(200, 168, 94, 0.32) !important;
  color: #efe7d6;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.room3d-vingt #screen-vingt .vg-chipbtn.picked {
  border-color: #c8a85e !important;
  color: #d8b45a;
  box-shadow: 0 0 14px rgba(200, 168, 94, 0.3) !important;
}
body.room3d-vingt #screen-vingt .vg-dealbtn {
  background: linear-gradient(168deg, rgba(34, 28, 16, 0.7), rgba(15, 19, 13, 0.62)) !important;
  border: 1px solid rgba(200, 168, 94, 0.4) !important;
  color: #d8b45a;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-vingt #screen-vingt .vg-dealbtn:not(:disabled) {
  border-color: #c8a85e !important;
  box-shadow: 0 0 16px rgba(200, 168, 94, 0.28) !important;
}
body.room3d-vingt #screen-vingt .vg-bankbtn {
  background: linear-gradient(168deg, rgba(28, 26, 22, 0.68), rgba(14, 17, 16, 0.6)) !important;
  border: 1px solid rgba(200, 168, 94, 0.3) !important;
  color: #efe7d6;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
/* the bank URGE keeps its red — a doom cue, the one warm-red button */
body.room3d-vingt #screen-vingt .vg-bankbtn.urge {
  border-color: #cf4636 !important;
  color: #e08d84 !important;
}

/* ---------- the mobile fixed bar — glass seam over the scene ---------- */
@media (max-width: 600px) {
  body.room3d-vingt #screen-vingt .vg-bar {
    background: linear-gradient(180deg, rgba(10, 12, 9, 0.7), rgba(6, 8, 6, 0.88) 45%) !important;
    border-top: 1px solid rgba(200, 168, 94, 0.34) !important;
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
  }
}

/* ---------- the end-panel slate ledger — kept legible glass ---------- */
body.room3d-vingt #screen-vingt .vg-slate {
  background: linear-gradient(168deg, rgba(30, 36, 40, 0.78), rgba(18, 22, 25, 0.82)) !important;
  border: 1px solid rgba(200, 168, 94, 0.4) !important;
  box-shadow: 0 0 24px rgba(200, 168, 94, 0.14), inset 0 0 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}