/* ==========================================================================
   THE DICE TRAY — real polyhedra, raw rolls, no modifiers, ever.
   Ported from the v3 mockup; spacing re-expressed in tokens.
   ========================================================================== */
.tray-handle{
  position:fixed;
  right:max(var(--s3), env(safe-area-inset-right));
  bottom:max(var(--s3), env(safe-area-inset-bottom));
  z-index:90;
  width:54px;height:54px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-deep);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--gold-hi) 40%, transparent), transparent 60%),
    linear-gradient(180deg,var(--panel),var(--panel-2));
  color:var(--gold-deep);
  box-shadow:0 8px 20px -8px rgba(30,15,0,.8);
  transition:transform .18s ease, opacity .2s ease;
}
.tray-handle svg{width:30px;height:30px;display:block}
.tray-handle:hover{transform:translateY(-2px) rotate(-8deg)}
.tray-handle:active{transform:scale(.94)}
.tray-handle[aria-expanded="true"]{opacity:0;pointer-events:none}

/* ---------- the Edit handle — mirror of the tray handle, bottom-LEFT ---------- */
.edit-fab{
  position:fixed;
  left:max(var(--s3), env(safe-area-inset-left));
  bottom:max(var(--s3), env(safe-area-inset-bottom));
  z-index:90;
  width:54px;height:54px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-deep);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--gold-hi) 40%, transparent), transparent 60%),
    linear-gradient(180deg,var(--panel),var(--panel-2));
  color:var(--gold-deep);
  box-shadow:0 8px 20px -8px rgba(30,15,0,.8);
  transition:transform .18s ease, opacity .2s ease, box-shadow .18s ease, border-color .18s ease;
}
.edit-fab .edit-fab-ic{display:grid;place-items:center;transition:transform .18s ease}
.edit-fab svg{width:26px;height:26px;display:block}
/* the quill tips, not the whole button — keeps the tooltip upright */
.edit-fab:hover{transform:translateY(-2px)}
.edit-fab:hover .edit-fab-ic{transform:rotate(6deg)}
.edit-fab:active{transform:scale(.94)}
/* edit mode ON — a gold halo reads as "active" without touching icon contrast */
body.is-edit-mode .edit-fab{
  border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold-hi) 55%, transparent), 0 8px 20px -8px rgba(30,15,0,.85);
}
/* while the tray is open it can cover this corner on narrow screens — recede,
   exactly as the tray handle itself does */
body.tray-open .edit-fab{opacity:0;pointer-events:none;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){
  .edit-fab{transition:opacity .2s ease, box-shadow .18s ease}
  .edit-fab .edit-fab-ic{transition:none}
  .edit-fab:hover,.edit-fab:active{transform:none}
  .edit-fab:hover .edit-fab-ic{transform:none}
  body.tray-open .edit-fab{transform:none}
}

.tray{
  position:fixed;
  right:max(var(--s2), env(safe-area-inset-right));
  bottom:max(var(--s2), env(safe-area-inset-bottom));
  z-index:95;
  width:min(30rem, calc(100vw - 1rem));
  max-height:calc(100dvh - 1rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--s3);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:
    radial-gradient(140% 100% at 50% 0%, color-mix(in srgb, var(--panel) 92%, #fff 8%) 0%, var(--panel) 55%, var(--panel-2) 100%);
  box-shadow:0 26px 60px -24px rgba(30,15,0,.85);
  transform:translateY(calc(100% + 1.5rem));
  visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.72,.24,1), visibility 0s .34s;
}
.tray[data-open="true"]{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.22,.72,.24,1), visibility 0s}

.tray-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.tray-title{
  margin:0;
  letter-spacing:.22em;
  flex:1;
  white-space:nowrap;
}
.tray-x{width:var(--field);height:var(--field);flex:none;color:var(--ink-faint);font-size:var(--fs-small);border-radius:var(--r-sm)}
.tray-x:hover{color:var(--rubric);background:color-mix(in srgb, var(--rubric) 10%, transparent)}
.dice-theme-picker{position:relative;flex:none}
.dice-theme-trigger{
  min-height:var(--field);
  max-width:11rem;
  display:flex;
  align-items:center;
  gap:var(--s2);
  padding:var(--s1) var(--s2);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);
  background:var(--panel-2);
  color:var(--ink-soft);
  text-align:left;
}
.dice-theme-trigger:hover,
.dice-theme-trigger[aria-expanded="true"]{border-color:var(--gold-deep);background:color-mix(in srgb,var(--gold-hi) 12%,var(--panel-2))}
.dice-theme-trigger__text{min-width:0;display:grid;gap:2px;font:600 .68rem/1.1 var(--font-display)}
.dice-theme-trigger__label{color:var(--ink-faint);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase}
#dice-theme-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dice-theme-swatch{
  --swatch-a:#f4ecd6;
  --swatch-b:#6b563a;
  --swatch-c:#2b2016;
  flex:none;
  width:1.45rem;
  height:1.45rem;
  border:1px solid color-mix(in srgb,var(--swatch-b) 82%,#000);
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,var(--swatch-a) 0 35%,var(--swatch-b) 38% 67%,var(--swatch-c) 70% 100%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--swatch-a) 30%,transparent);
}
.dice-theme-popover{
  position:absolute;
  z-index:4;
  top:calc(100% + var(--s1));
  right:0;
  width:min(20rem,calc(100vw - 2rem));
  padding:var(--s3);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel);
  box-shadow:0 16px 36px -18px rgba(30,15,0,.8);
}
.dice-theme-popover__title{margin:0 0 var(--s2);letter-spacing:.12em;color:var(--gold-deep)}
.dice-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.dice-theme-option{
  min-width:0;
  min-height:4.6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s1);
  padding:var(--s2) var(--s1);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);
  color:var(--ink-soft);
  font:600 .64rem/1.15 var(--font-display);
  text-align:center;
}
.dice-theme-option:hover{border-color:var(--gold-deep);background:color-mix(in srgb,var(--gold-hi) 10%,transparent)}
.dice-theme-option[aria-pressed="true"]{border-color:var(--gold-deep);background:color-mix(in srgb,var(--gold-hi) 16%,var(--panel-2));color:var(--ink)}
.dice-theme-option[aria-pressed="true"]::after{content:"Selected";color:var(--verdigris);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase}

.dice-theme-option[data-diestyle="ivory"] .dice-theme-swatch,
.dice-theme-swatch[data-theme-preview="ivory"]{--swatch-a:#f4ecd6;--swatch-b:#6b563a;--swatch-c:#2b2016}
.dice-theme-option[data-diestyle="obsidian"] .dice-theme-swatch,
.dice-theme-swatch[data-theme-preview="obsidian"]{--swatch-a:#463c2c;--swatch-b:#a87e22;--swatch-c:#171411}
.dice-theme-option[data-diestyle="verdigris"] .dice-theme-swatch,
.dice-theme-swatch[data-theme-preview="verdigris"]{--swatch-a:#386e5b;--swatch-b:#143024;--swatch-c:#f3e9cd}
.dice-theme-option[data-diestyle="wax-bone"] .dice-theme-swatch,
.dice-theme-swatch[data-theme-preview="wax-bone"]{--swatch-a:#e9dcc0;--swatch-b:#9f2934;--swatch-c:#4b171d}
.dice-theme-option[data-diestyle="lapis-silver"] .dice-theme-swatch,
.dice-theme-swatch[data-theme-preview="lapis-silver"]{--swatch-a:#315ca0;--swatch-b:#b8c3d0;--swatch-c:#102750}
.dice-theme-option[data-diestyle="amethyst-gold"] .dice-theme-swatch,
.dice-theme-swatch[data-theme-preview="amethyst-gold"]{--swatch-a:#7650a1;--swatch-b:#d3aa42;--swatch-c:#2e173f}

/* ---------- the bed: tooled leather rim, felt within ---------- */
.tray-bed{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 6rem;
  gap:var(--s2);
  padding:var(--s3);
  border:3px solid var(--leather);
  border-radius:var(--r-md);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--felt-hi), var(--felt) 70%);
  box-shadow:
    0 0 0 1px var(--leather-hi),
    inset 0 3px 9px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
.tray-bed::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:var(--r-md);
  pointer-events:none;
  border:3px solid transparent;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 7px) border-box;
  -webkit-mask:linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) border-box exclude, linear-gradient(#000 0 0) padding-box;
}

.tray-stage{
  position:relative;
  min-height:168px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s3);
  perspective:640px;
  perspective-origin:50% 42%;
}
.tray-empty{
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-small);
  color:color-mix(in srgb, #fff 84%, var(--felt));
  text-align:center;
}
.die-wrap{position:relative;isolation:isolate}
.die-toss{position:relative;z-index:1;transform-style:preserve-3d}
.die{position:relative;transform-style:preserve-3d}
.die-wrap.is-rolling .die-toss,
.die-wrap.is-rolling .die{will-change:transform}
.die .face{
  position:absolute;
  top:50%;left:50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.die .face svg{display:block;width:100%;height:100%;overflow:visible}
.die .fpoly{
  fill:var(--dieA);
  stroke:var(--dieEdge);
  stroke-width:.035;
  stroke-linejoin:round;
}
.die .fnum{
  fill:var(--dieNum);
  font-family:var(--font-display);
  font-weight:700;
  paint-order:stroke;
}
.die .funder{stroke:var(--dieNum);stroke-width:.035;stroke-linecap:round}
.die-wrap.is-settled .die .face[data-result] .fpoly{fill:var(--dieHi);stroke:var(--gold-hi);stroke-width:.05}
.die-wrap.is-settled .die .face[data-result] .fnum{fill:var(--dieNumHi)}
.die-shadow{
  position:absolute;
  z-index:0;
  left:13%;bottom:4px;
  width:74%;height:14%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);
  transform-origin:center;
  pointer-events:none;
}

/* dice styles — persisted */
.tray[data-die-style="ivory"]{--dieA:#f4ecd6;--dieHi:#fff8e6;--dieEdge:#6b563a;--dieNum:#2b2016;--dieNumHi:#5a3a10}
.tray[data-die-style="obsidian"]{--dieA:#2c2721;--dieHi:#463c2c;--dieEdge:#a87e22;--dieNum:#e8c979;--dieNumHi:#ffe9a8}
.tray[data-die-style="verdigris"]{--dieA:#275443;--dieHi:#386e5b;--dieEdge:#143024;--dieNum:#f3e9cd;--dieNumHi:#fff8e0}
.tray[data-die-style="wax-bone"]{--dieA:#e7d7b7;--dieHi:#f7ecd4;--dieEdge:#8d2730;--dieNum:#6e1e27;--dieNumHi:#a62e3a}
.tray[data-die-style="lapis-silver"]{--dieA:#183b76;--dieHi:#2a579c;--dieEdge:#b5c0cc;--dieNum:#edf2f6;--dieNumHi:#fff}
.tray[data-die-style="amethyst-gold"]{--dieA:#4b2968;--dieHi:#714798;--dieEdge:#c89c35;--dieNum:#f0d788;--dieNumHi:#fff1b1}

/* ---------- the roll log, in the tray's margin ---------- */
.tray-log{
  display:flex;
  flex-direction:column;
  gap:var(--s1);
  padding:var(--s1);
  border-left:1px solid rgba(255,255,255,.13);
  min-width:0;
}
.tray-log h4{
  margin:0 0 var(--s1);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:color-mix(in srgb, #fff 82%, var(--felt));
}
.log-line{
  display:block;
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  line-height:1.3;
  color:color-mix(in srgb, #fff 76%, var(--felt));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.log-line:first-of-type{color:#fff;font-style:normal;font-family:var(--font-display);font-size:var(--fs-label);font-weight:600}
.log-line b{color:var(--gold-hi);font-weight:700}
.log-none{font-family:var(--font-scribal);font-style:italic;font-size:var(--fs-label);color:color-mix(in srgb, #fff 45%, var(--felt))}

.die-row{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.die-btn{
  flex:1 1 auto;
  min-width:var(--field);
  min-height:var(--field);
  padding:var(--s1) var(--s2);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel-2);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-soft);
  transition:transform .1s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.die-btn:hover{border-color:var(--gold-deep);color:var(--gold-deep);background:color-mix(in srgb, var(--gold-hi) 12%, var(--panel-2))}
.die-btn:active{transform:translateY(1px) scale(.97)}
.tray-foot{
  margin:var(--s2) 0 0;
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  text-align:center;
  color:var(--ink-faint);
}

/* ---------- the breakdown readout (sheet-driven rolls only) ---------- */
/* A plain tray roll clears this; a save/skill/attack/damage roll fills it with
   the full modifier math, e.g. "Stealth +5: [14] + 5 = 19". */
.tray-readout{
  margin:var(--s2) 0 0;
  padding:var(--s2) var(--s3);
  border:1px solid var(--gold-deep);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold-hi) 14%, var(--panel-2));
  color:var(--ink);
  font:600 .82rem/1.35 var(--font-display);
  letter-spacing:.01em;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ---------- advantage / disadvantage: the dropped die recedes ---------- */
.die-wrap.is-dropped{opacity:.42;filter:grayscale(.5)}
.die-wrap.is-dropped::after{
  content:"";
  position:absolute;
  inset:34% 8% auto;
  height:2px;
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--rubric) 70%, transparent);
  transform:rotate(-8deg);
  pointer-events:none;
}
.die-wrap.is-kept{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--gold-hi) 45%, transparent))}

@media (max-width:800px){
  .tray-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--field);
    gap:var(--s1);
  }
  .tray-title{grid-column:1;grid-row:1;align-self:center}
  .tray-x{grid-column:2;grid-row:1}
  .dice-theme-picker{
    grid-column:1/-1;
    grid-row:2;
    justify-self:start;
  }
  .dice-theme-popover{
    right:auto;
    left:0;
  }
}

@media (max-width:480px){
  .tray{padding:var(--s2)}
  .tray-bed{
    grid-template-columns:minmax(0,1fr);
    gap:var(--s1);
    padding:var(--s2);
  }
  .tray-stage{min-height:160px;gap:var(--s2)}
  .tray-log{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    gap:var(--s1);
    padding:var(--s2) var(--s1) var(--s1);
    border-left:0;
    border-top:1px solid rgba(255,255,255,.13);
  }
  .tray-log h4{grid-column:1/-1;margin:0}
  .log-line{font-size:var(--fs-label);text-align:center}
  .log-line:first-of-type{font-size:var(--fs-label)}
  .log-none{grid-column:1/-1}
}