/* ============================================================
   THE TIGER — 2.5D restyle. Scoped to body.room3d-tiger.
   The Three.js scene (rooms3d/tiger.mjs) is the ENVIRONMENT:
   the watching TIGER PAINTING, the cold pendant lamp, the oak
   table, the candle, the walls. The game UI (rooms/tiger.mjs)
   floats over it as holographic glass — the faro board, the
   two-beat shoe, the TURN/BANK bar, the call panel.

   The 3D scene's REDUNDANT dealt cards + brass shoe are hidden
   in tiger.mjs so the DOM game surface is never doubled. Here we
   neutralize the room's own opaque backdrops and re-skin its
   chrome as glowing glass so the painting shows through.

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

/* ---- the room's mini DOM painting is REDUNDANT with the giant
   3D TIGER PAINTING behind the glass — fold it away so the real
   one (the room's soul) is the only tiger that watches. Its
   eyes-moved / empty states still drive the stripe theatre via
   the stripe-flash scrim below, so nothing functional is lost. ---- */
body.room3d-tiger #screen-tiger .tg-painting { display: none; }

/* the head keeps the plate + the dealer's voice, centred over the felt */
body.room3d-tiger #screen-tiger .tg-head { margin-bottom: 0.35rem; }
body.room3d-tiger #screen-tiger .tg-head .label {
  color: var(--brass, #c8a85e);
  text-shadow: 0 0 14px rgba(200, 168, 94, 0.35), 0 2px 10px #000;
}
body.room3d-tiger #screen-tiger .tg-dealer {
  color: var(--bone, #efe7d6);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* ---- the explainer + end overlays: opaque near-black scrim →
   light holographic glass so the painting glows behind the rules ---- */
body.room3d-tiger #screen-tiger .tg-explainer,
body.room3d-tiger #screen-tiger .tg-end {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(20, 14, 8, 0.62) 0%, rgba(8, 6, 4, 0.78) 100%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* the rule cards inside become glowing brass glass (parlor look) */
body.room3d-tiger #screen-tiger .tg-explainer .rule-card,
body.room3d-tiger #screen-tiger .tg-end .tg-ledger {
  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);
  border-radius: 5px;
}
body.room3d-tiger #screen-tiger .tg-explainer-house,
body.room3d-tiger #screen-tiger .tg-end-house,
body.room3d-tiger #screen-tiger .tg-end-detail {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* the blackout (lamp dies) stays full black — it's the death of the
   scene's lamp, the one moment the environment must go dark. Untouched. */

/* ---- HUD plaque row: dashed divider → glass band, readable ---- */
body.room3d-tiger #screen-tiger .tg-hud {
  border-bottom: 1px solid rgba(200, 168, 94, 0.28);
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.4), rgba(20, 14, 8, 0));
  border-radius: 4px;
  padding: 0.4rem 0.6rem 0.5rem;
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
}
body.room3d-tiger #screen-tiger .tg-coins { text-shadow: 0 0 12px rgba(200, 168, 94, 0.4); }
body.room3d-tiger #screen-tiger .tg-turnword,
body.room3d-tiger #screen-tiger .tg-flag { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

/* ---- the coach + drift words: float as faint glass-bordered hints ---- */
body.room3d-tiger #screen-tiger .tg-coach {
  background: linear-gradient(168deg, rgba(30, 22, 14, 0.5), rgba(14, 10, 6, 0.42));
  border: 1px solid rgba(200, 168, 94, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
body.room3d-tiger #screen-tiger .tg-humword,
body.room3d-tiger #screen-tiger .tg-cuffword { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

/* ---- THE BOARD — thirteen enamel cells become floating glass tiles
   over the felt; the painting's glow reads between them ---- */
body.room3d-tiger #screen-tiger .tg-cell {
  background:
    linear-gradient(168deg, rgba(28, 34, 26, 0.58), rgba(10, 16, 12, 0.5));
  border: 1px solid rgba(200, 168, 94, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 0 18px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(200, 168, 94, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-tiger #screen-tiger .tg-sigil {
  color: #efe7d6;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 8px rgba(200, 168, 94, 0.2);
}
/* the read (glow), the stake, the win — brass; only loss/eaten go red */
body.room3d-tiger #screen-tiger .tg-cell.glow {
  border-color: rgba(200, 168, 94, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(200, 168, 94, 0.18),
    0 0 18px rgba(200, 168, 94, 0.3);
}
body.room3d-tiger #screen-tiger .tg-cell.staked { border-color: rgba(200, 168, 94, 0.55); }
body.room3d-tiger #screen-tiger .tg-cell.win {
  border-color: var(--brass, #c8a85e);
  box-shadow: inset 0 0 22px rgba(200, 168, 94, 0.34), 0 0 16px rgba(200, 168, 94, 0.5);
}
body.room3d-tiger #screen-tiger .tg-cell.lose {
  border-color: #cf4636;
  box-shadow: inset 0 0 22px rgba(207, 70, 54, 0.5), 0 0 12px rgba(207, 70, 54, 0.42);
}
body.room3d-tiger #screen-tiger .tg-cell.eaten {
  border-color: #cf4636;
  box-shadow: inset 0 0 26px rgba(207, 70, 54, 0.55), 0 0 12px rgba(207, 70, 54, 0.35);
}

/* ---- chip & mode controls → glass pills ---- */
body.room3d-tiger #screen-tiger .tg-chipbtn,
body.room3d-tiger #screen-tiger .tg-mode {
  background: linear-gradient(168deg, rgba(30, 22, 14, 0.6), rgba(14, 10, 6, 0.52));
  border: 1px solid rgba(200, 168, 94, 0.32);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
body.room3d-tiger #screen-tiger .tg-chipbtn.picked,
body.room3d-tiger #screen-tiger .tg-mode.picked {
  border-color: var(--brass, #c8a85e);
  box-shadow: 0 0 12px rgba(200, 168, 94, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ---- THE SHOE area: the room's own DOM brass shoe + the two-beat
   killer/payer cards are the CENTREPIECE of the reveal — the 3D
   scene's redundant shoe + dealt cards are hidden in tiger.mjs, so
   THIS shoe is the only one. Keep it fully visible; the brass just
   reads as glass-lit metal over the felt. ---- */
body.room3d-tiger #screen-tiger .tg-shoebrass {
  box-shadow:
    inset 0 2px 3px rgba(255, 230, 160, 0.32),
    inset 0 -4px 8px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(200, 168, 94, 0.16),
    0 6px 14px rgba(0, 0, 0, 0.6);
}
/* the two-beat cards keep their bone face; just lift them off the felt */
body.room3d-tiger #screen-tiger .tg-card .tg-cardface {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.4);
}
body.room3d-tiger #screen-tiger .tg-cardword { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); }

/* ---- the fixed TURN / BANK bar → glass ledge, never washed out ---- */
body.room3d-tiger #screen-tiger .tg-actions {
  background: linear-gradient(180deg, rgba(6, 9, 6, 0) 0%, rgba(8, 11, 8, 0.74) 34%, rgba(6, 9, 6, 0.9) 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
body.room3d-tiger #screen-tiger .tg-turnbtn {
  background: linear-gradient(168deg, rgba(30, 22, 14, 0.78), rgba(14, 10, 6, 0.72));
  border: 1px solid var(--brass, #c8a85e);
  color: var(--brass, #c8a85e);
  box-shadow: 0 0 18px rgba(200, 168, 94, 0.26), 0 -4px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
body.room3d-tiger #screen-tiger .tg-bankbtn {
  background: linear-gradient(168deg, rgba(30, 22, 14, 0.7), rgba(14, 10, 6, 0.62));
  border: 1px solid rgba(200, 168, 94, 0.4);
  color: var(--bone, #efe7d6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

/* ---- the mobile bottom sheet: its opaque dark slab → glass so the
   painting still glows above the raised board ---- */
@media (max-width: 600px) {
  body.room3d-tiger #screen-tiger .tg-sheet {
    background: linear-gradient(180deg, rgba(22, 28, 22, 0.86), rgba(8, 11, 9, 0.92));
    border-top: 1px solid rgba(200, 168, 94, 0.45);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  body.room3d-tiger #screen-tiger .tg-sheet-handle {
    background: linear-gradient(180deg, rgba(22, 28, 22, 0.9), rgba(22, 28, 22, 0));
  }
}

/* ---- the call panel: opaque modal → glass plaque ---- */
body.room3d-tiger #screen-tiger .tg-callpanel {
  background: linear-gradient(168deg, rgba(20, 16, 10, 0.84), rgba(10, 8, 5, 0.82));
  border: 1px solid rgba(200, 168, 94, 0.5);
  box-shadow: 0 0 30px rgba(200, 168, 94, 0.16), 0 18px 60px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---- the stripe-flash room wash: keep it, but it's the SCENE's painting
   that lunges now. The DOM scrim still breathes tiger-red across the glass
   so the loss reads. (red — the one allowed accent.) ---- */
body.room3d-tiger #screen-tiger .tg-room.stripe-flash::after {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(207, 70, 54, 0.16) 0%, rgba(120, 40, 30, 0.07) 60%, transparent 100%);
}