/* ============================================================
   THE EVEN ODD — 2.5D holographic restyle.
   Active only while body.room3d-wheel (the 3D wheel scene is
   mounted behind the game UI). Every rule is scoped under
   body.room3d-wheel so the flat-room styles in rooms/wheel.css
   are untouched when no scene is up.

   The 3D scene (rooms3d/wheel.mjs) renders the GORGEOUS turned-
   wood-and-brass wheel + ball + Hollow as the ENVIRONMENT. The
   room's own little 2D wheel canvas (.wh-canvas) would DOUBLE it,
   so we hide that one and keep only the 3D wheel. The bet board /
   chips / EVEN-ODD / number grid / BANK / SPIN-cord stay as
   readable HOLOGRAPHIC GLASS controls floating over the scene.

   Palette (the Parlor's): bone #efe7d6, brass #c8a85e,
   brass-deep #5e4c25, red #cf4636 (red only for the Hollow/loss).
   ============================================================ */

/* ---- (d) THE DOUBLE: hide the room's 2D wheel canvas; the 3D
   wheel in the scene replaces it entirely. The cloth that draws
   over the 2D wheel after the third hollow goes with it. ---- */
/* ---- (d) THE REAL WHEEL: keep the ORIGINAL 2D custom wheel — the historic
   banned design — and show it WHOLE, exactly as it was (its own turned frame,
   the cloth that falls after the third hollow, the cord that spins it). The
   3D scene's redundant wheel is hidden in rooms3d/wheel.mjs (wheelRig.visible
   = false); only the candlelit room + the table's empty well remain, as
   ambient depth around the real wheel. This restores the right look AND keeps
   the cord/spin working — hiding the 2D canvas had collapsed the wheel and
   broken the pull. ---- */
body.room3d-wheel #screen-wheel .wh-canvas { display: block; }
body.room3d-wheel #screen-wheel .wh-wheelwrap { background: transparent; }

/* the room itself: let the scene show through, drop the brightness
   filters (the 3D scene does its own candlelit dimming) ---- */
body.room3d-wheel #screen-wheel .wh-room { background: transparent; }

/* ---- HUD plaques → holographic glass (match the Parlor HUD) ---- */
body.room3d-wheel #screen-wheel .wh-hud {
  border-bottom-color: rgba(200, 168, 94, 0.28);
}
body.room3d-wheel #screen-wheel .wh-purse,
body.room3d-wheel #screen-wheel .wh-tray {
  padding: 0.18rem 0.6rem;
  border-radius: 3px;
  background: linear-gradient(168deg, rgba(36, 26, 16, 0.82), rgba(18, 12, 8, 0.78));
  border: 1px solid rgba(94, 76, 37, 0.9);
  box-shadow: inset 0 1px 0 rgba(200, 168, 94, 0.12), 0 2px 10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
/* the lamp + hollow dots keep their meaning but read over the scene */
body.room3d-wheel #screen-wheel .wh-lamp {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
body.room3d-wheel #screen-wheel .wh-keeper,
body.room3d-wheel #screen-wheel .wh-coach,
body.room3d-wheel #screen-wheel .wh-head .label {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* ---- THE CORD (the SPIN control) → glassy plinth so the pull
   reads as a deliberate control floating over the table ---- */
body.room3d-wheel #screen-wheel .wh-cordhint {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

/* ---- (c) THE LAY — the bet board / chips / EVEN-ODD / number
   grid / BANK → holographic glass, brass-bordered, glowing,
   readable. On desktop this column already sits to the RIGHT of
   the wheel (rooms/wheel.css grid), so the 3D wheel (framed LEFT)
   stays clear. ---- */
body.room3d-wheel #screen-wheel .wh-laywrap {
  padding: 0.6rem 0.7rem 0.8rem;
  border-radius: 8px;
  background: linear-gradient(168deg, rgba(38, 28, 18, 0.62), rgba(16, 11, 7, 0.5));
  border: 1px solid rgba(200, 168, 94, 0.5);
  box-shadow:
    0 0 24px rgba(200, 168, 94, 0.18),
    inset 0 0 30px rgba(255, 190, 110, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}

/* the lay's engraved nameplate stays crisp over the glass */
body.room3d-wheel #screen-wheel .wh-laytitle {
  border-top-color: rgba(200, 168, 94, 0.32);
  border-bottom-color: rgba(200, 168, 94, 0.16);
}

/* chips, pull-mode, clear, BANK — translucent brass-glass buttons */
body.room3d-wheel #screen-wheel .wh-chip {
  border-color: rgba(94, 76, 37, 0.9);
  background:
    radial-gradient(circle at 50% -40%, rgba(200, 168, 94, 0.14), transparent 60%),
    linear-gradient(168deg, rgba(34, 25, 15, 0.7), rgba(14, 10, 6, 0.62));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.room3d-wheel #screen-wheel .wh-chip.sel {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(216, 180, 90, 0.4);
}
body.room3d-wheel #screen-wheel .wh-bank {
  background:
    radial-gradient(circle at 50% -40%, rgba(200, 168, 94, 0.2), transparent 60%),
    linear-gradient(168deg, rgba(40, 29, 16, 0.74), rgba(20, 14, 7, 0.66));
  border-color: rgba(200, 168, 94, 0.55);
  box-shadow: 0 0 16px rgba(200, 168, 94, 0.16), 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* the EVEN/ODD / number / sigil / black PLATES → glowing glass.
   The per-quarter lacquer tints (wh-q0..3) are layered ON TOP of
   the glass so the board still corresponds to the wheel's quarters;
   we only swap the opaque base for translucency. ---- */
body.room3d-wheel #screen-wheel .wh-plate {
  background:
    radial-gradient(circle at 50% -60%, rgba(200, 168, 94, 0.1), transparent 65%),
    linear-gradient(168deg, rgba(34, 25, 15, 0.66), rgba(14, 10, 6, 0.58));
  border-color: rgba(94, 76, 37, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 2px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* re-tint the four quarters over the glass (translucent lacquer) */
body.room3d-wheel #screen-wheel .wh-quarter.wh-q0 {
  background:
    linear-gradient(180deg, rgba(216, 180, 90, 0.12), rgba(216, 180, 90, 0.04)),
    linear-gradient(168deg, rgba(34, 25, 15, 0.66), rgba(14, 10, 6, 0.58));
  border-top: 2px solid rgba(216, 180, 90, 0.55);
}
body.room3d-wheel #screen-wheel .wh-quarter.wh-q1 {
  background:
    linear-gradient(180deg, rgba(207, 70, 54, 0.14), rgba(207, 70, 54, 0.05)),
    linear-gradient(168deg, rgba(34, 25, 15, 0.66), rgba(14, 10, 6, 0.58));
  border-top: 2px solid rgba(207, 70, 54, 0.6);
}
body.room3d-wheel #screen-wheel .wh-quarter.wh-q2 {
  background:
    linear-gradient(180deg, rgba(207, 201, 184, 0.11), rgba(207, 201, 184, 0.04)),
    linear-gradient(168deg, rgba(34, 25, 15, 0.66), rgba(14, 10, 6, 0.58));
  border-top: 2px solid rgba(207, 201, 184, 0.5);
}
body.room3d-wheel #screen-wheel .wh-quarter.wh-q3 {
  background:
    linear-gradient(180deg, rgba(138, 115, 53, 0.16), rgba(138, 115, 53, 0.05)),
    linear-gradient(168deg, rgba(34, 25, 15, 0.66), rgba(14, 10, 6, 0.58));
  border-top: 2px solid rgba(138, 115, 53, 0.7);
}
/* THE HOLLOW plate (black row) keeps its void look — red/black only */
body.room3d-wheel #screen-wheel .wh-black {
  background:
    radial-gradient(circle at 50% 20%, rgba(207, 201, 184, 0.05), transparent 60%),
    rgba(5, 4, 3, 0.78);
  border-color: rgba(38, 32, 26, 0.95);
}
/* a staked plate still GLOWS gold so the bet reads over the scene */
body.room3d-wheel #screen-wheel .wh-plate.staked {
  border-color: var(--gold);
}

/* ---- (a) THE EXPLAINER scrim → light holographic glass, not the
   opaque ~rgba(4,6,4,.94). The candlelit wheel reads behind the
   rules card. ---- */
body.room3d-wheel #screen-wheel .wh-explainer {
  background: rgba(8, 6, 4, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body.room3d-wheel #screen-wheel .wh-explainer-house,
body.room3d-wheel #screen-wheel .wh-howto {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* the END panel scrim → the same light glass (the scene shows the
   wheel still turning behind the night's tally) ---- */
body.room3d-wheel #screen-wheel .wh-end {
  background: rgba(8, 6, 4, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body.room3d-wheel #screen-wheel .wh-end-detail,
body.room3d-wheel #screen-wheel .wh-end-house {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* ---- the result TOAST, lantern button, replay caption — give
   them glassy backs so they sit on the scene cleanly ---- */
body.room3d-wheel #screen-wheel .wh-toast {
  background: linear-gradient(168deg, rgba(20, 14, 8, 0.86), rgba(8, 5, 3, 0.82));
  border-color: rgba(200, 168, 94, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.room3d-wheel #screen-wheel .wh-lantern,
body.room3d-wheel #screen-wheel .wh-replaycap {
  background: linear-gradient(168deg, rgba(20, 14, 8, 0.78), rgba(8, 5, 3, 0.72));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ---- MOBILE bottom-sheet: the lay rides up over the scene. Make
   its sheet translucent glass too (rooms/wheel.css gives it a near-
   opaque dark fill), so the 3D wheel above stays visible. ---- */
@media (max-width: 600px) {
  body.room3d-wheel #screen-wheel .wh-laywrap {
    background: linear-gradient(180deg, rgba(22, 16, 10, 0.9), rgba(10, 7, 5, 0.92));
    border-top: 1px solid rgba(200, 168, 94, 0.45);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  body.room3d-wheel #screen-wheel .wh-sheet-handle {
    background: linear-gradient(180deg, rgba(22, 16, 10, 0.92), rgba(22, 16, 10, 0));
  }
}