/* ============================================================================
   HUD — topbar, right-hand turn panel and dice tray (loaded last).
   Topbar: crest + phase on the left, the table's turn order in the middle
   (js/hud/topbar.js), the utility buttons gathered in one brass-rimmed
   cluster on the right. Right panel: the same walnut glass as the roster,
   with the turn header + step tracker, a parchment "what now" card, compact
   actions and the chronicle filling what's left. Dice tray: a felt-lined
   walnut box where the last throw stays on show (js/hud/dice-display.js).
   ============================================================================ */

/* ------------------------------------------------------------------ TOPBAR */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.topbar-left{justify-self:start;min-width:0;}
.topbar-right{justify-self:end;}
.topbar-center{justify-self:center;gap:14px;font-size:1rem;}
.topbar-ornament{display:none;}

#turn-indicator{display:flex;align-items:center;gap:14px;}
.tb-rail{display:flex;align-items:center;gap:5px;padding:3px 8px 3px 5px;border-radius:999px;
  background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(209,162,79,.28), inset 0 2px 6px rgba(0,0,0,.35);}
.tb-seat{position:relative;width:28px;height:28px;border-radius:50%;flex-shrink:0;
  opacity:.5;filter:saturate(.55);transition:width .45s var(--ui-spring,ease), height .45s var(--ui-spring,ease), opacity .3s ease, filter .3s ease;}
.tb-seat img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#2b1d11;}
.tb-seat-ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--house);pointer-events:none;}
.tb-seat.me .tb-seat-ring{box-shadow:0 0 0 1px rgba(255,240,210,.35);}
.tb-seat.on{width:40px;height:40px;opacity:1;filter:none;}
.tb-seat.on .tb-seat-ring{border-width:2.5px;box-shadow:0 0 0 2px rgba(20,12,4,.7), 0 0 14px color-mix(in srgb, var(--house) 70%, transparent);}
.tb-seat.on::after{ /* a little brass caret under whoever plays */
  content:"";position:absolute;left:50%;bottom:-8px;width:0;height:0;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:#e8c478;border-bottom:none;
}
.tb-now{display:flex;flex-direction:column;justify-content:center;min-width:132px;line-height:1;}
.tb-now-name{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:#fbe7b4;
  text-shadow:0 1px 0 rgba(0,0,0,.6);white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis;}
.tb-now-sub{display:flex;align-items:center;gap:3px;margin-top:4px;
  font:700 .56rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb, var(--house) 45%, #f2d48c 55%);}
.topbar-center .turn-timer{
  font:600 .9rem/1 "IBM Plex Mono",monospace;padding:6px 10px;border-radius:999px;margin:0;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(209,162,79,.3);color:#f2d48c;
}

/* utility cluster */
.topbar-right{gap:6px;padding:4px 5px 4px 12px;border-radius:999px;
  background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(209,162,79,.25);}
.topbar-right .vp-target-badge{border:none;padding:4px 8px 4px 0;margin-right:2px;border-right:1px solid rgba(209,162,79,.3);border-radius:0;
  font-size:.66rem;color:#f2d48c;}
.topbar-right .rules-btn{padding:5px 12px 5px 9px;font-size:.98rem;border-radius:999px;}
.topbar-right .icon-btn.round-btn{width:32px;height:32px;border-width:1.5px;}

/* ------------------------------------------------------------ RIGHT PANEL */
.sidebar-right,
body.immersive .sidebar-right{
  background-color:rgba(24,16,9,.74);
  background-image:linear-gradient(180deg, rgba(255,236,200,.07), rgba(255,236,200,0) 40%), linear-gradient(180deg, rgba(43,29,17,.55), rgba(15,10,5,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
}
body.immersive .sidebar-right{
  box-shadow:inset 0 0 0 1px rgba(209,162,79,.55), inset 0 1px 0 rgba(255,240,210,.12), 0 18px 40px rgba(6,10,14,.45), 0 2px 6px rgba(0,0,0,.35);
}
.sidebar-right .scroll-panel{
  background:none;box-shadow:none;color:#f3e6c8;padding:14px 14px 12px;
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
}
.sidebar-right .scroll-panel::before{display:none;}

/* header: who plays + where the turn stands */
.rp-head{display:flex;align-items:center;gap:11px;}
.rp-avatar{position:relative;width:48px;height:48px;flex-shrink:0;border-radius:50%;
  box-shadow:0 0 0 2px var(--house), 0 0 0 4px rgba(20,12,4,.8), 0 0 18px color-mix(in srgb, var(--house) 45%, transparent);}
.rp-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.rp-head-text{min-width:0;}
.sidebar-right .scroll-heading{text-align:left;font-size:1.55rem;color:#fbe7b4;text-shadow:0 1px 0 rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-right .scroll-kicker{justify-content:flex-start;margin:4px 0 0;color:rgba(232,196,120,.65);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;}
.sidebar-right .scroll-autosave::before{content:none;}
.rp-steps{display:flex;list-style:none;margin:12px 0 0;padding:0;counter-reset:step;gap:4px;}
.rp-steps li{
  counter-increment:step;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 0 6px;
  font:700 .6rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,230,200,.4);
  border-bottom:2px solid rgba(209,162,79,.18);transition:color .3s ease, border-color .3s ease;
}
.rp-steps li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  font-size:.56rem;letter-spacing:0;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(209,162,79,.25);}
.rp-steps li.done{color:rgba(243,230,200,.7);border-color:rgba(209,162,79,.5);}
.rp-steps li.done::before{content:"✓";background:rgba(209,162,79,.45);color:#1c130a;}
.rp-steps li.on{color:#fbe7b4;border-color:#e8c478;}
.rp-steps li.on::before{background:linear-gradient(180deg,#f2d48c,#c89a48);color:#1c130a;box-shadow:0 0 10px rgba(242,207,122,.55);}
.rp-steps li.alert.on{color:#ffd0c4;border-color:#d0553f;}
.rp-steps li.alert.on::before{background:linear-gradient(180deg,#e0715a,#9c2c1c);color:#fff4e4;box-shadow:0 0 10px rgba(224,90,60,.55);}

/* the parchment "what now" card: art at the side, words beside it */
.sidebar-right #turn-guide{
  display:grid;grid-template-columns:74px 1fr;grid-template-areas:"art tag" "art title" "body body";
  column-gap:10px;align-items:center;text-align:left;margin:0;padding:10px 12px 11px;border-radius:12px;color:var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(180deg,var(--parch-0),var(--parch-1) 60%,var(--parch-2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 26px rgba(120,90,40,.2), 0 0 0 1px rgba(184,137,58,.65), 0 8px 18px rgba(0,0,0,.35);
  animation:rpCardIn .45s var(--ui-ease,ease) both;
}
@keyframes rpCardIn{from{opacity:.4;transform:translateY(4px);}to{opacity:1;transform:none;}}
.sidebar-right #turn-guide .guide-art{grid-area:art;width:74px;margin:0;align-self:center;filter:drop-shadow(0 3px 4px rgba(60,40,10,.35));}
.sidebar-right #turn-guide .guide-tag{grid-area:tag;align-self:end;margin:0 0 3px;font-size:.54rem;}
.sidebar-right #turn-guide .guide-title{grid-area:title;align-self:start;margin:0;font-size:1.28rem;text-wrap:balance;}
.sidebar-right #turn-guide .guide-body{grid-area:body;margin-top:8px;padding:0;font-size:.76rem;line-height:1.42;}

/* actions: trades side by side, end of turn full width */
.sidebar-right .action-stack{gap:7px;}
.action-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.btn-wood.btn-wood-sm{padding:8px 6px;font-size:1.02rem;white-space:nowrap;}
.btn-wood.btn-wood-sm .ico{width:16px;height:16px;margin-right:5px;vertical-align:-3px;}
.sidebar-right .btn-wood-ghost:disabled{background:rgba(255,246,226,.06);color:rgba(243,230,200,.45);border-color:rgba(209,162,79,.3);box-shadow:none;text-shadow:none;}

/* chronicle: fills the rest of the panel, light ink on the dark glass */
.sidebar-right .log-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0;padding-top:10px;border-top:1px solid rgba(209,162,79,.22);}
.sidebar-right .scroll-title{
  text-align:left;margin:0 0 8px;font:700 .6rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(232,196,120,.7);
}
.sidebar-right #game-log{flex:1 1 auto;max-height:none;min-height:0;color:#f0e2c4;font-size:.95rem;gap:8px;
  mask-image:linear-gradient(180deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);}
.sidebar-right #game-log .log-line{color:#f0e2c4;}
.sidebar-right #game-log .log-entry.important .log-line{color:#f6c38a;}
.sidebar-right #game-log .log-meta{color:rgba(243,230,200,.45);}

/* -------------------------------------------------------------- DICE TRAY */
.dice-area{
  padding:0;gap:8px;background:none;border:none;box-shadow:none;flex-direction:column;align-items:center;
}
.dice-tray{
  position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:14px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.07), transparent 65%),
    repeating-linear-gradient(35deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px),
    linear-gradient(180deg,#2d5a3c,#1f4430);                             /* green baize */
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.5),   /* felt sunk in the frame */
    0 0 0 5px #4a3019, 0 0 0 6px #b8893a, 0 0 0 7px rgba(20,12,4,.85), /* walnut rim + brass line */
    0 14px 28px rgba(0,0,0,.5);
}
.dice-faces{display:flex;gap:12px;perspective:420px;}
.dice-faces .dice{
  --die:38px;position:relative;width:var(--die);height:var(--die);padding:0;border:none;background:none;box-shadow:none;
  display:block;transform-style:preserve-3d;
}
.dice-faces .dice::before{ /* contact shadow on the felt */
  content:"";position:absolute;left:8%;right:-6%;bottom:-16%;height:34%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transform:translateZ(-30px);
}
.dice-faces .dice[data-value="0"]::after{content:none;}
.dice-faces .dice .die3d-cube{transition:transform .5s cubic-bezier(.3,1.5,.5,1);}
.dice-faces .dice .die3d-face{border-radius:18%;}
.dice-faces .dice .pip{width:72%;}
.dice-faces .dice.blank{opacity:.35;filter:grayscale(.6);}
.dice-faces .dice.dice-land .die3d-cube{animation:trayDieLand .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes trayDieLand{0%{scale:1.25;}50%{scale:.92;}100%{scale:1;}}
.dice-sum{
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;padding:4px 8px 5px;border-radius:10px;
  background:linear-gradient(180deg,#fbf3df,#e6d3a8);color:var(--ink);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px #b8893a, 0 3px 8px rgba(0,0,0,.45);
  animation:traySumIn .5s cubic-bezier(.3,1.6,.5,1) both;
}
.dice-sum[hidden]{display:none;}
.dice-sum b{font-family:var(--font-display);font-weight:700;font-size:1.65rem;line-height:1;font-variant-numeric:tabular-nums;}
.dice-sum small{display:flex;align-items:center;gap:3px;max-width:70px;margin-top:1px;
  font:700 .5rem/1.1 "IBM Plex Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dice-sum small::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--house);box-shadow:0 0 0 1px rgba(0,0,0,.35);}
.dice-sum.seven{background:linear-gradient(180deg,#c24a38,#7c1d14);color:#fff4e4;}
.dice-sum.seven small{color:#ffd9c9;}
.dice-sum.seven small::before{display:none;}
@keyframes traySumIn{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}
.dice-faces.dice-away ~ .dice-sum{opacity:0;transition:opacity .15s ease;}
.dice-area .roll-pill{margin-top:6px;}

@media (max-width:1000px){
  .dice-faces .dice{--die:30px;}
  .dice-tray{padding:9px 10px;gap:8px;}
  .tb-rail{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .tb-seat,.dice-faces .dice .die3d-cube{transition:none;}
  .sidebar-right #turn-guide,.dice-sum,.dice-faces .dice.dice-land .die3d-cube{animation:none;}
}

/* ============================================================================
   COMPACT — touch screens wide enough for the desktop layout (iPad landscape,
   ~1024–1366px) and small laptops (13" and under: ≤1480px wide or ≤860px
   tall). Same HUD, pared back: the ornaments, flavour lines, house labels,
   trophy race and tutorial copy go, panels slim down and the hand dock
   shrinks, so the island is what the eye lands on.
   ============================================================================ */
@media (min-width:1001px) and (hover:none) and (pointer:coarse),
       (min-width:1001px) and (max-width:1480px),
       (min-width:1001px) and (max-height:860px){
  body.immersive{--imm-left:232px;--imm-right:292px;--imm-top:72px;--imm-bottom:128px;}
  body.immersive .game-main{grid-template-columns:216px 1fr 276px;}

  /* decoration off */
  .corner-ornament,
  .topbar-crest,
  #phase-label,
  .board-flavor,
  .bottom-bar-motto,
  .placement-pill,
  .sidebar-left .sidebar-title{display:none !important;}
  body.immersive .topbar::before,
  body.immersive .sidebar::before{opacity:0;}
  body.immersive .topbar,
  body.immersive .sidebar{box-shadow:inset 0 0 0 1px rgba(209,162,79,.3), 0 10px 26px rgba(6,10,14,.4);}

  /* topbar: crest-less, icon-only rules button */
  body.immersive .topbar{height:50px;}
  .logo-sm{font-size:1.5rem;}
  .tb-now-name{font-size:1.15rem;}
  .tb-now-sub{display:none;}
  .topbar-right .rules-btn{font-size:0;gap:0;width:32px;height:32px;padding:0;justify-content:center;}
  .topbar-right .rules-btn .rules-btn-icon{margin:0;}

  /* roster: name + VP + one stat row, nothing else */
  .sidebar-left .panel-standings,
  .sidebar-left .rc-track{display:none;}
  .sidebar-left .pc-house:not(:has(.rc-status)){display:none;}
  .sidebar-left .player-card.roster{grid-template-columns:42px 1fr auto;column-gap:8px;row-gap:6px;padding:8px;}
  .sidebar-left .player-card.roster .pc-avatar{width:42px;height:42px;}
  .sidebar-left .player-card.roster .pc-avatar-img{left:5px;top:5px;width:32px;height:32px;}
  .sidebar-left .player-card.roster .pc-avatar-ring{inset:2.5px;}
  .sidebar-left .player-card.roster .pc-name{font-size:1.1rem;}
  .sidebar-left .rc-vp{min-width:28px;}
  .sidebar-left .rc-vp strong{font-size:1.6rem;}
  body.immersive .sidebar-left{align-self:start;max-height:100%;}

  /* right panel: the step tracker says where we are, the card just the title */
  .sidebar-right .scroll-panel{padding:12px 12px 10px;gap:10px;}
  .rp-avatar{width:38px;height:38px;}
  .sidebar-right .scroll-heading{font-size:1.3rem;}
  .sidebar-right .scroll-autosave{display:none;}
  .sidebar-right #turn-guide{display:block;padding:9px 12px;}
  .sidebar-right #turn-guide .guide-art,
  .sidebar-right #turn-guide .guide-tag,
  .sidebar-right #turn-guide .guide-body{display:none;}
  .sidebar-right #turn-guide .guide-title{font-size:1.1rem;}
  .sidebar-right #game-log{font-size:.85rem;gap:6px;}
  .sidebar-right #game-log .log-meta{display:none;}

  /* board chrome: zoom buttons only (no slider / readout) */
  .board-toolbar .zoom-range,
  .board-toolbar .zoom-pct{display:none;}
  body.immersive .board-toolbar{gap:2px;padding:4px;}
  .board-zoom-controls .tool-btn{width:34px;height:34px;border-radius:50%;}
  .board-toolbar .tool-sep{height:20px;margin:0 3px;}

  /* dice tray: a size down */
  .dice-faces .dice{--die:30px;}
  .dice-tray{padding:9px 10px 9px 12px;gap:9px;}
  .dice-sum b{font-size:1.35rem;}

  /* hand dock: smaller cards and plaques */
  #bottom-bar{min-height:0;padding:10px 12px 10px;}
  body.immersive #bottom-bar{padding-top:14px;}
  #bottom-bar .resource-chip,
  #bottom-bar .dev-card-item{width:78px;padding:5px 4px 5px;}
  #bottom-bar .resource-chip-name{font-size:.9rem;}
  #bottom-bar .resource-icon-img{width:34px;height:34px;}
  #bottom-bar .resource-chip-count{width:22px;height:22px;font-size:.9rem;}
  #bottom-bar .dev-card-art{width:30px;height:30px;}
  #bottom-bar .dev-card-name{font-size:.74rem;}
  #bottom-bar .build-btn{width:96px;padding:6px 4px 5px;gap:2px;}
  #bottom-bar .build-btn-cost{gap:2px;}
  #bottom-bar .cost-chip{padding:1px 2px;}
  #bottom-bar .cost-chip img{width:12px;height:12px;}
  #bottom-bar .build-btn-icon img{width:28px;height:28px;}
  #bottom-bar .build-btn-label{font-size:.95rem;}
  #bottom-bar .build-btn-remaining{display:none;}
}
@media (min-width:1001px) and (max-width:1180px){
  body.immersive{--imm-left:212px;--imm-right:264px;}
  body.immersive .game-main{grid-template-columns:196px 1fr 248px;}
  .tb-rail .tb-seat:not(.on){width:24px;height:24px;}
  .sidebar-left .rc-tag{display:none;}
  .sidebar-right .btn-wood.btn-wood-sm{font-size:.92rem;}
}

/* under 14": the topbar rail already says whose turn it is, so the right
   panel drops its avatar/step header and opens on the "what now" card */
@media (min-width:1001px) and (max-width:1480px){
  .sidebar-right #turn-indicator-big{display:none;}
}

/* mouse / trackpad: wheel or pinch zooms, drag turns the island — the zoom
   slider and the rotate buttons are only needed on touch */
@media (hover:hover) and (pointer:fine){
  .board-toolbar .zoom-range,
  .board-toolbar .zoom-pct,
  #rotate-left-btn,
  #rotate-right-btn{display:none;}
}