/* ===========================================================================
   Dice Tower — an animated polyhedral dice roller.
   The JS (assets/js/dice.js) builds the DOM; this styles the launcher, the
   tray, and the full-screen "stage" where dice tumble across and settle.
   Theme variables come from app.css (:root).
   =========================================================================== */

/* --- Floating launcher (a glowing d20) ------------------------------------ */
.dice-fab {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 9000;
    width: 3.4rem; height: 3.4rem; border: none; cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #2a2438, #15121e);
    color: var(--gold-soft);
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 0 0 1px var(--gold);
    transition: transform .18s ease, box-shadow .18s ease;
}
.dice-fab:hover { transform: translateY(-2px) rotate(-12deg) scale(1.06); box-shadow: 0 12px 34px rgba(0,0,0,.7), inset 0 0 0 1px var(--gold-soft), 0 0 22px rgba(200,160,79,.35); }
.dice-fab:active { transform: scale(.94); }
.dice-fab svg { width: 2rem; height: 2rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

/* --- Tray panel ----------------------------------------------------------- */
.dice-tray {
    position: fixed; right: 1.4rem; bottom: 5.4rem; z-index: 9000;
    width: min(22rem, 92vw);
    background: linear-gradient(180deg, var(--panel), #14111d);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem 1.1rem;
    transform-origin: bottom right;
    transform: translateY(12px) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.8,.25,1), opacity .22s ease;
}
.dice-tray.is-open { transform: none; opacity: 1; pointer-events: auto; }
.dice-tray h4 { margin: 0 0 .2rem; font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1rem; letter-spacing: .04em; }
.dice-tray .dice-sub { margin: 0 0 .8rem; font-size: .76rem; color: var(--ink-soft); }

.dice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.dice-btn {
    position: relative; cursor: pointer; border: 1px solid var(--line);
    background: #00000026; color: var(--ink); border-radius: .6rem;
    padding: .55rem .2rem .4rem; display: grid; place-items: center; gap: .15rem;
    transition: border-color .15s, transform .12s, background .15s;
}
.dice-btn:hover { border-color: var(--gold); background: #c8a04f1a; transform: translateY(-2px); }
.dice-btn:active { transform: translateY(0) scale(.95); }
.dice-btn svg { width: 1.9rem; height: 1.9rem; }
.dice-btn .dice-btn-label { font-family: 'Cinzel', serif; font-size: .72rem; color: var(--gold-soft); letter-spacing: .03em; }

.dice-d20row { display: flex; gap: .45rem; margin-top: .6rem; }
.dice-adv { flex: 1; cursor: pointer; border: 1px solid var(--line); background: #00000026; color: var(--ink-soft);
    border-radius: .5rem; padding: .4rem; font-size: .76rem; letter-spacing: .03em; transition: all .15s; font-family: 'Spectral', serif; }
.dice-adv:hover { border-color: var(--gold); color: var(--gold-soft); }
.dice-adv .adv-up { color: var(--good); } .dice-adv .adv-down { color: var(--ember); }

.dice-custom { display: flex; gap: .4rem; margin-top: .7rem; }
.dice-custom input {
    flex: 1; min-width: 0; padding: .45rem .55rem; background: #00000033;
    border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); font-family: 'Spectral', serif;
}
.dice-custom input::placeholder { color: #8a8174; }
.dice-custom button {
    cursor: pointer; border: 1px solid var(--gold); background: linear-gradient(180deg, #c8a04f33, #c8a04f14);
    color: var(--gold-soft); border-radius: .5rem; padding: 0 .9rem; font-family: 'Cinzel', serif; letter-spacing: .04em;
}
.dice-custom button:hover { background: #c8a04f2e; }

.dice-log { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); max-height: 11rem; overflow-y: auto; }
.dice-log:empty { display: none; }
.dice-log li { display: flex; align-items: baseline; gap: .5rem; padding: .3rem .15rem; border-radius: .4rem; cursor: pointer; font-size: .82rem; }
.dice-log li:hover { background: #ffffff0c; }
.dice-log .log-label { color: var(--ink-soft); font-size: .74rem; min-width: 3.4rem; }
.dice-log .log-detail { color: var(--ink-soft); font-size: .72rem; flex: 1; opacity: .8; }
.dice-log .log-total { margin-left: auto; font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: 1rem; }
.dice-log .log-total.is-crit { color: var(--good); }
.dice-log .log-total.is-fumble { color: var(--ember); }

/* --- Full-screen stage where dice tumble ---------------------------------- */
.dice-stage {
    position: fixed; inset: 0; z-index: 9500; pointer-events: none;
    perspective: 1100px; overflow: hidden;
    opacity: 0; transition: opacity .25s ease;
    background: radial-gradient(900px 600px at 50% 42%, rgba(10,8,18,.62), rgba(8,6,14,.34) 60%, transparent 78%);
}
.dice-stage.is-live { opacity: 1; pointer-events: auto; }

.die-mover {
    position: absolute; width: 5.2rem; height: 5.2rem;
    transition: transform 1.05s cubic-bezier(.16,.84,.27,1);
    perspective: 640px; will-change: transform;
}
.die-tumble { width: 100%; height: 100%; transform-style: preserve-3d; }
.die-mover.is-flying .die-tumble { animation: die-tumble .55s linear infinite; }

.die-face {
    position: relative; width: 100%; height: 100%;
    display: grid; place-items: center;
    background: linear-gradient(150deg, #efe6cf 0%, #cbb277 38%, #8a6f3a 68%, #5e4a25 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.32), inset 0 -10px 18px rgba(0,0,0,.4);
    /* clip-path clips box-shadow, so the cast shadow + glow come from filter,
       which follows the clipped silhouette. */
    filter: drop-shadow(0 5px 7px rgba(0,0,0,.55));
}
.die-num {
    font-family: 'Cinzel', serif; font-weight: 700; color: #241a08;
    font-size: 1.7rem; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.45);
    transform: translateZ(1px);
}
.die-d100 .die-num { font-size: 1.3rem; }

/* Polyhedral silhouettes via clip-path. d6 is the plain rounded square. */
.die-d6  .die-face { border-radius: 18%; }
.die-d4  .die-face { clip-path: polygon(50% 4%, 96% 92%, 4% 92%); }
.die-d8  .die-face { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
.die-d10 .die-face { clip-path: polygon(50% 2%, 92% 34%, 74% 98%, 26% 98%, 8% 34%); }
.die-d12 .die-face { clip-path: polygon(50% 2%, 95% 36%, 78% 96%, 22% 96%, 5% 36%); }
.die-d20 .die-face,
.die-d100 .die-face { clip-path: polygon(25% 4%, 75% 4%, 99% 50%, 75% 96%, 25% 96%, 1% 50%); }
/* nudge numbers that sit in a top-heavy silhouette */
.die-d4 .die-num { transform: translateY(18%); }

/* Landing settle + glow (glow via filter so it follows the clipped silhouette) */
.die-mover.is-settled .die-tumble { animation: die-settle .5s cubic-bezier(.2,1.4,.35,1) both; }
.die-mover.is-settled .die-face { filter: drop-shadow(0 5px 7px rgba(0,0,0,.55)) drop-shadow(0 0 13px rgba(227,200,137,.6)); }
.die-mover.is-crit .die-face { background: linear-gradient(150deg, #fff7df, #f3d57a 40%, #c79a35 70%, #8a6418); filter: drop-shadow(0 0 16px rgba(255,214,110,.95)) drop-shadow(0 0 34px rgba(255,190,60,.6)); }
.die-mover.is-crit .die-num { color: #5a3d05; }
.die-mover.is-fumble .die-face { background: linear-gradient(150deg, #e9c9b6, #b5471f 55%, #6e2a12); filter: drop-shadow(0 5px 7px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(181,71,31,.7)); }
.die-mover.is-fumble .die-num { color: #fbe6da; text-shadow: none; }

/* Result banner */
.dice-result {
    position: fixed; left: 50%; bottom: 16vh; transform: translate(-50%, 26px); z-index: 9600;
    background: linear-gradient(180deg, var(--panel), #110e19);
    border: 1px solid var(--gold); border-radius: 1rem; padding: .9rem 1.6rem; text-align: center;
    box-shadow: var(--shadow), 0 0 30px rgba(200,160,79,.25); opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1);
}
.dice-result.is-show { opacity: 1; transform: translate(-50%, 0); }
.dice-result .res-label { font-size: .78rem; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.dice-result .res-total { font-family: 'Cinzel', serif; font-size: 2.6rem; line-height: 1; color: var(--gold-soft); margin: .15rem 0; }
.dice-result .res-total.is-crit { color: var(--good); text-shadow: 0 0 18px rgba(111,174,106,.6); }
.dice-result .res-total.is-fumble { color: var(--ember); text-shadow: 0 0 18px rgba(181,71,31,.6); }
.dice-result .res-detail { font-size: .82rem; color: var(--ink-soft); }
.dice-result .res-flair { font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .2rem; }
.dice-result .res-flair.is-crit { color: var(--good); } .dice-result .res-flair.is-fumble { color: var(--ember); }

@keyframes die-tumble {
    0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(-300deg) rotateZ(220deg); }
}
@keyframes die-settle {
    0%   { transform: rotateZ(-18deg) scale(1.18); }
    55%  { transform: rotateZ(6deg) scale(.94); }
    100% { transform: rotateZ(0deg) scale(1); }
}
@keyframes dice-fab-pulse { 0%,100% { box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 0 0 1px var(--gold); } 50% { box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 0 0 1px var(--gold-soft), 0 0 18px rgba(200,160,79,.4); } }

/* Sheet roll affordance: anything tagged data-roll (saves, skills, abilities). */
.cs-roll { cursor: pointer; transition: color .12s, text-shadow .12s; }
.cs-roll:hover { color: var(--gold-soft); text-shadow: 0 0 12px rgba(200,160,79,.45); }
.cs-abil-mod.cs-roll:hover { background: #c8a04f1f; border-radius: .3rem; }

/* Hide from print */
@media print { .dice-fab, .dice-tray, .dice-stage, .dice-result { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .die-mover { transition-duration: .3s; }
    .die-mover.is-flying .die-tumble { animation-duration: .9s; }
}