/* Side panels and dice: word bank, dice stage overlay, die shapes. Solid tints, no backdrop blur. */
:root {
  --parchment: #e9dfc4;
  --parchment-dim: #b9ad8e;
  --gold: #d6aa55;
  --gold-soft: rgba(214, 170, 85, 0.35);
  --moon: #c7d4ee;
  --panel-bg: #121826;
  --panel-bg-2: #19212f;
}

/* Dice tray additions (base look lives in app.css) */
.dice-tray { background: var(--panel-bg); border: 1px solid var(--gold-soft); box-shadow: var(--shadow-2); }
.dice-tray .eyebrow, .word-bank .eyebrow { color: var(--gold); }
.dice-toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; color: var(--parchment-dim); cursor: pointer; }
.dice-toggle input { accent-color: var(--gold); }
.dice-notation { display: flex; gap: 6px; margin: 0 0 10px; }
.dice-arena { position: relative; height: 84px; margin: 0 0 8px; border-radius: 12px; overflow: hidden; background: var(--panel-bg-2); border: 1px solid rgba(255, 255, 255, 0.06); }
.dice-log div[draggable="true"] { cursor: grab; }
.dice-log div[draggable="true"]:hover { color: var(--parchment); }
.dice-result.crit { color: var(--gold); text-shadow: 0 0 22px rgba(214, 170, 85, 0.65); }

/* Dice layers: stage overlay and tray arena */
.dice-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.dice-layer.in-tray { z-index: 1; }
.dice-layer .die-shape { position: absolute; left: 0; top: 0; will-change: transform, opacity; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
.dice-layer.on-board .die-shape { pointer-events: auto; cursor: pointer; }
.die-shape svg { width: 100%; height: 100%; overflow: visible; }
.die-shape svg polygon, .die-shape svg rect, .die-shape svg circle { fill: #243247; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.die-shape svg .edge { fill: none; stroke: var(--gold-soft); stroke-width: 2; stroke-linejoin: round; }
.die-shape .die-num { fill: var(--parchment); font-family: var(--font-display); font-weight: 800; }
.dice-layer.crit .die-shape svg polygon, .dice-layer.crit .die-shape svg rect { fill: #5a4310; stroke: #ffd36b; }
.dice-layer.crit .die-shape { filter: drop-shadow(0 0 14px rgba(255, 211, 107, 0.85)); }
.dice-layer.fumble .die-shape svg polygon, .dice-layer.fumble .die-shape svg rect { fill: #4a1620; stroke: #fb7185; }
.dice-layer.fumble .die-shape { filter: drop-shadow(0 0 12px rgba(251, 113, 133, 0.7)); }

.dice-total { position: absolute; left: 50%; top: 50%; margin-top: 70px; transform: translateX(-50%); min-width: 120px; padding: 8px 20px 10px; text-align: center; border-radius: 16px; background: var(--panel-bg); border: 1px solid var(--gold); box-shadow: var(--shadow-2); pointer-events: auto; cursor: pointer; }
.dice-total small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); }
.dice-total b { display: block; font-family: var(--font-display); font-size: 40px; line-height: 1.1; color: var(--parchment); }
.dice-layer.crit .dice-total { border-color: #ffd36b; box-shadow: 0 0 28px rgba(255, 211, 107, 0.55); }
.dice-layer.crit .dice-total b { color: #ffd36b; }
.dice-layer.fumble .dice-total { border-color: #fb7185; }
.dice-layer.fumble .dice-total b { color: #fb7185; }

/* Word bank: docks on the left; slides aside when the dice tray is open */
.word-bank { position: absolute; left: 16px; top: 16px; bottom: 16px; z-index: 24; width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-l); background: var(--panel-bg); border: 1px solid var(--gold-soft); box-shadow: var(--shadow-2); transform: translateX(calc(-100% - 32px)); transition: transform var(--dur-mid) var(--ease-out), left var(--dur-mid) var(--ease-out); }
.word-bank.open { transform: translateX(0); }
.app:has(.dice-tray.open) .word-bank.open { left: 332px; }
.wb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-chip { padding: 3px 9px; border-radius: 999px; font-size: 11px; color: var(--parchment-dim); background: var(--panel-bg-2); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; }
.wb-chip:hover { color: var(--parchment); border-color: var(--gold-soft); }
.wb-chip.on { color: #1a1408; background: var(--gold); border-color: var(--gold); }
.wb-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.wb-group { margin: 8px 0 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.wb-word { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 10px; background: var(--panel-bg-2); border: 1px solid transparent; cursor: grab; }
.wb-word:hover { border-color: var(--gold-soft); background: #1f293a; }
.wb-word:active { cursor: grabbing; }
.wb-word b { font-family: var(--font-display); font-size: 14px; color: var(--parchment); }
.wb-word span { font-size: 12px; line-height: 1.35; color: var(--ink-1); }
.wb-note { padding: 8px 4px; font-size: 12px; color: var(--ink-2); }
.wb-note.err { color: #fb7185; }
.wb-define { border-top: 1px solid var(--gold-soft); padding-top: 10px; }
.wb-define-title { margin-bottom: 6px; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--moon); }
.wb-define-row { display: flex; gap: 6px; }
.wb-define-out { max-height: 150px; overflow-y: auto; margin-top: 8px; font-size: 12px; color: var(--ink-1); }
.wb-def-head b { font-family: var(--font-display); font-size: 15px; color: var(--parchment); }
.wb-phonetic { margin-left: 8px; font-family: var(--font-mono); color: var(--ink-2); }
.wb-pos { margin-top: 6px; font-style: italic; color: var(--gold); }
.wb-defs { margin: 2px 0 0 18px; padding: 0; }
.wb-defs li { margin-bottom: 2px; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .word-bank { transition: none; }
}
@media (max-width: 760px) {
  .word-bank { width: calc(100vw - 88px); }
  .app:has(.dice-tray.open) .word-bank { left: 16px; }
}
.wb-head { display: flex; align-items: center; justify-content: space-between; }