/* ============================================================
   KNUCKLEBONES — 2.5D integration. Scoped to body.room3d-bones.
   The Three.js coal cellar (rooms3d/bones.mjs) is the ENVIRONMENT
   behind the UI; the game's own 2D dice canvas (.kb-canvas) stays
   the centerpiece play surface. Everything else here is restyled
   to holographic glass so the cellar shows through — matching the
   Parlor's house3d.css look.

   Palette: bone #efe7d6, brass #c8a85e, brass-deep #5e4c25,
            red #cf4636 (RED reserved for the skull / loss only).
   ============================================================ */

body.room3d-bones {
  --kb-bone: #efe7d6;
  --kb-brass: #c8a85e;
  --kb-brass-deep: #5e4c25;
  --kb-red: #cf4636;
}

/* ---- let the cellar show through: kill the room's own backdrops ---- */
/* the heavy room/felt vignette and the skull-count brightness dims are the
   2D room's own atmosphere — the 3D cellar already supplies that, so drop them */
body.room3d-bones #screen-bones .kb-room::after { display: none !important; }
body.room3d-bones #screen-bones .kb-feltwrap,
body.room3d-bones #screen-bones .kb-room[data-skulls='1'] .kb-feltwrap,
body.room3d-bones #screen-bones .kb-room[data-skulls='2'] .kb-feltwrap,
body.room3d-bones #screen-bones .kb-room[data-skulls='3'] .kb-feltwrap {
  filter: none;
  background: transparent;
}

/* ---- THE PLAY SURFACE — the 2D dice canvas stays the centerpiece ---- */
/* keep it crisp and centered, but trade the heavy wood/charcoal frame for a
   subtle brass-glass frame so it reads as the lit table in the cellar */
body.room3d-bones #screen-bones .kb-canvas,
:root.mono body.room3d-bones #screen-bones .kb-canvas {
  border: 1px solid rgba(200, 168, 94, 0.55);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(200, 168, 94, 0.16),
    0 18px 50px rgba(0, 0, 0, 0.7);
  transition: opacity 0.35s ease;
}
/* THE CAST — while the bones are in the air, the flat board recedes so the
   REAL thrown dice (the 3D scene's bones, tumbling onto the slab and settling
   on the result) are what the player watches. The board returns, read, when
   they land. */
body.room3d-bones.kb-casting #screen-bones .kb-canvas {
  opacity: 0.08;
  transition: opacity 0.25s ease;
}

/* ---- HUD plaques → holographic glass (matches Parlor .hud-cell) ---- */
body.room3d-bones #screen-bones .kb-hud {
  border-bottom: 1px solid rgba(200, 168, 94, 0.22);
  background: linear-gradient(168deg, rgba(36, 26, 16, 0.5), rgba(18, 12, 8, 0.42));
  border-radius: 4px;
  padding: 0.45rem 0.7rem 0.55rem;
  box-shadow: inset 0 1px 0 rgba(200, 168, 94, 0.1), 0 6px 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-bones #screen-bones .kb-felt-coins { color: var(--kb-brass); }
body.room3d-bones #screen-bones .kb-bank-coins { color: var(--kb-bone); }

/* keep head + coach + wobble + man legible over the moving scene */
body.room3d-bones #screen-bones .kb-head .label,
body.room3d-bones #screen-bones .kb-man,
body.room3d-bones #screen-bones .kb-coach,
body.room3d-bones #screen-bones .kb-wobble {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* ---- THE LINES — holographic glass chips (matches Parlor .offer/.rule-card) ---- */
body.room3d-bones #screen-bones .kb-linebtn {
  background: linear-gradient(168deg, rgba(38, 28, 18, 0.6), rgba(16, 11, 7, 0.5));
  border: 1px solid rgba(200, 168, 94, 0.42);
  box-shadow: 0 0 18px rgba(200, 168, 94, 0.1), inset 0 0 24px rgba(255, 190, 110, 0.04), 0 12px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-bones #screen-bones .kb-linebtn .kb-line-name { color: var(--kb-bone); }
body.room3d-bones #screen-bones .kb-linebtn .kb-line-terms { color: var(--kb-brass); }
body.room3d-bones #screen-bones .kb-linebtn.picked {
  border-color: var(--kb-brass);
  background: linear-gradient(168deg, rgba(48, 36, 22, 0.66), rgba(20, 14, 9, 0.56));
  box-shadow: 0 0 26px rgba(200, 168, 94, 0.3), inset 0 0 26px rgba(255, 190, 110, 0.08), 0 14px 34px rgba(0, 0, 0, 0.5);
}
/* the deep line keeps its blood-red warning */
body.room3d-bones #screen-bones .kb-linebtn[data-line='deep'] .kb-line-terms { color: var(--kb-red); }
body.room3d-bones #screen-bones .kb-linebtn[data-line='deep'].picked {
  border-color: var(--kb-red);
  box-shadow: 0 0 26px rgba(207, 70, 54, 0.32), inset 0 0 26px rgba(207, 70, 54, 0.08), 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* ---- THE CHIPS + POCKET — holographic glass ---- */
body.room3d-bones #screen-bones .kb-chipbtn {
  background: linear-gradient(168deg, rgba(38, 28, 18, 0.58), rgba(16, 11, 7, 0.48));
  border: 1px solid rgba(200, 168, 94, 0.42);
  color: var(--kb-bone);
  box-shadow: 0 0 14px rgba(200, 168, 94, 0.08), 0 10px 26px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-bones #screen-bones .kb-chipbtn .kb-chipface { color: var(--kb-brass-deep); }
body.room3d-bones #screen-bones .kb-chipbtn.picked {
  border-color: var(--kb-brass);
  color: var(--kb-brass);
  box-shadow: 0 0 18px rgba(200, 168, 94, 0.32);
}
body.room3d-bones #screen-bones .kb-chipbtn.picked .kb-chipface { color: var(--kb-brass); }

body.room3d-bones #screen-bones .kb-bankbtn {
  background: linear-gradient(168deg, rgba(34, 30, 16, 0.6), rgba(15, 13, 7, 0.5));
  border: 1px solid rgba(200, 168, 94, 0.55);
  color: var(--kb-brass);
  box-shadow: 0 0 16px rgba(200, 168, 94, 0.12), 0 10px 26px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-bones #screen-bones .kb-bankbtn:not(:disabled):hover {
  box-shadow: 0 0 22px rgba(200, 168, 94, 0.34);
}
/* the two-skull urge keeps its red pulse */
body.room3d-bones #screen-bones .kb-bankbtn.urge {
  border-color: var(--kb-red);
  color: #e0938b;
}

/* ---- THE EXPLAINER (vestibule) → light holographic glass, not opaque ---- */
body.room3d-bones #screen-bones .kb-explainer {
  background: linear-gradient(168deg, rgba(10, 8, 6, 0.62), rgba(4, 5, 6, 0.5));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.room3d-bones #screen-bones .kb-explainer-house,
body.room3d-bones #screen-bones .kb-howto {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
body.room3d-bones #screen-bones .kb-howto b { color: var(--kb-brass); }

/* ---- THE END PANEL (ledger + verdict) → light holographic glass ---- */
body.room3d-bones #screen-bones .kb-end {
  background: linear-gradient(168deg, rgba(10, 8, 6, 0.66), rgba(4, 5, 6, 0.54));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.room3d-bones #screen-bones .kb-end h3 { color: var(--kb-brass); }
body.room3d-bones #screen-bones .kb-end h3.kb-down { color: var(--kb-red); }
body.room3d-bones #screen-bones .kb-ledger {
  background: linear-gradient(168deg, rgba(30, 22, 14, 0.5), rgba(12, 9, 6, 0.42));
  border: 1px solid rgba(200, 168, 94, 0.4);
  box-shadow: 0 0 20px rgba(200, 168, 94, 0.1), 0 14px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-bones #screen-bones .kb-ledger-row[data-kind='win'] .kb-lg-res { color: var(--kb-brass); }
body.room3d-bones #screen-bones .kb-ledger-row[data-kind='skull'] .kb-lg-res,
body.room3d-bones #screen-bones .kb-ledger-row[data-kind='skull'] .kb-lg-dice { color: var(--kb-red); }
body.room3d-bones #screen-bones .kb-end-house { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); }

/* ---- toast → glass plaque over the lit felt ---- */
body.room3d-bones #screen-bones .kb-toast {
  background: linear-gradient(168deg, rgba(20, 15, 9, 0.85), rgba(8, 7, 4, 0.8));
  border: 1px solid rgba(200, 168, 94, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.room3d-bones #screen-bones .kb-toast[data-kind='win'],
body.room3d-bones #screen-bones .kb-toast[data-kind='bank'] {
  color: var(--kb-brass);
  border-color: var(--kb-brass);
}
body.room3d-bones #screen-bones .kb-toast[data-kind='skull'] {
  color: #e0938b;
  border-color: var(--kb-red);
  box-shadow: 0 0 22px rgba(207, 70, 54, 0.45);
}