/* ============================================================================
   Side panel: the dice tray, the action prompt and the host's "end round"
   (the scoreboard and the journal are the shell's).
   ============================================================================ */
.tray,.prompt,.skip{
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
}

/* ---------- Dice ---------- */
.tray{padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;
  background:radial-gradient(ellipse at 50% 40%,#4f8a3b 0,#386641 75%);}
.dice{display:flex;gap:14px;min-height:60px;align-items:center}
.die{
  width:56px;height:56px;padding:8px;border-radius:13px;
  background:#fffdf7;border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:2px;
}
.die i{border-radius:50%;margin:1px}
.die i.on{background:var(--ink)}
.die.idle{opacity:.55}
.die.rolling{animation:tumble .28s linear infinite}
.die.landed{animation:land .3s cubic-bezier(.2,1.6,.4,1)}
.dice.farmer .die{background:var(--barn);border-color:#2a0f10}
.dice.farmer .die i.on{background:#fff}
.dice.farmer .die.unused{opacity:.35;transform:scale(.85)}
.dice.farmer.double .die{box-shadow:0 4px 0 var(--ink)}
.dice.double .die{box-shadow:0 4px 0 var(--ink),0 0 0 4px var(--gold)}
@keyframes tumble{
  0%{transform:rotate(0) translateY(0)}
  25%{transform:rotate(90deg) translateY(-6px)}
  50%{transform:rotate(180deg) translateY(0)}
  75%{transform:rotate(270deg) translateY(-4px)}
  100%{transform:rotate(360deg)}
}
@keyframes land{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.dice-caption{display:flex;gap:8px;align-items:center;color:#fff;font-weight:700;height:24px}
.dice-caption .who{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}
.dice-caption .sum{font-family:var(--font-display);font-size:20px;line-height:1;color:var(--hay)}

/* ---------- Prompt ---------- */
.prompt{padding:12px;display:flex;flex-direction:column;gap:8px;min-height:120px;flex-shrink:0}
.turn-line{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:nowrap;min-width:0}
.turn-text{font-family:var(--font-display);font-size:18px;line-height:1.15;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.turn-text.dot::before{
  content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;
  background:var(--pig);border:2px solid var(--ink);vertical-align:1px;
}
.clock{flex:none;font-weight:700;font-size:13px;padding:2px 8px;border-radius:999px;background:var(--paper-2);border:2px solid var(--ink)}
.clock.urgent{background:var(--barn);color:#fff;animation:throb .5s ease-in-out infinite}
.prompt-body{display:flex;flex-direction:column;gap:8px}
.roll-btn{font-family:var(--font-display);font-weight:400;font-size:22px;padding:12px;animation:nudge 1.4s ease-in-out infinite}
.roll-btn:disabled{animation:none;opacity:.5;filter:grayscale(1);cursor:not-allowed}
.roll-btn.notice,.roll-btn.notice:disabled{
  animation:none;opacity:1;filter:none;cursor:default;
  background:var(--barn-dark);color:#fff;text-transform:uppercase;
}
@keyframes nudge{0%,70%,100%{transform:none}80%{transform:rotate(-2deg)}90%{transform:rotate(2deg)}}
.key-hint{margin:0;font-size:11px;color:var(--muted);text-align:center}

/* ---------- End round (host only) ---------- */
.skip{padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.skip-hint{margin:0;font-size:12.5px;color:var(--muted)}
.skip-btn{font-weight:700}

/* ---------- Log ---------- */

/* Below 980px the shell stacks the board above the side column (shell.css),
   which then spans the full width: without a cap the dice and the roll
   button stretch edge to edge and look oversized. */
@media (max-width:980px){
  .tray,.prompt,.skip{max-width:480px;width:100%;margin:0 auto}
  .tray{padding:8px;gap:4px}
  .die{width:40px;height:40px;padding:5px;border-radius:10px}
  .dice{gap:8px;min-height:44px}
  .dice-caption{font-size:12px}
  .dice-caption .sum{font-size:16px}
  .prompt{padding:8px;min-height:0}
  .turn-text{font-size:15px}
  .roll-btn{font-size:18px;padding:8px}
  .key-hint{display:none}
  .cp-journal-list{font-size:12px}
}