body.dice-page { background:#fbf9fd; color:#352541; }
.dice-page .dropdown a[aria-current="page"],.dice-page .mobile-submenu a[aria-current="page"] { color:#6812a8; background:#f5e9fb; }
.dice-page .dice-main { max-width:1640px; margin:auto; padding:18px 20px 65px; }
.dice-page button,.dice-page input { font-family:inherit; }
.dice-page button:focus-visible,.dice-page a:focus-visible,.dice-page input:focus-visible { outline:3px solid #d59c12; outline-offset:3px; }
.dice-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); align-items:center; min-height:300px; overflow:hidden; padding:clamp(28px,4vw,48px) clamp(28px,6vw,88px); border:1px solid #eee3f6; border-radius:28px; background:radial-gradient(circle at 86% 12%,#ead8f9,transparent 37%),linear-gradient(115deg,#fff,#faf4ff); box-shadow:0 18px 43px rgba(57,23,84,.08); }
.dice-hero::after { content:""; position:absolute; right:-100px; bottom:-230px; width:500px; height:500px; border:1px solid rgba(106,13,173,.13); border-radius:50%; box-shadow:0 0 0 38px rgba(106,13,173,.025),0 0 0 75px rgba(106,13,173,.018); pointer-events:none; }
.dice-hero-copy { position:relative; z-index:1; }
.dice-eyebrow,.panel-index { color:#7119ac; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.dice-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid #e9daf4; border-radius:99px; background:#fff; }
.dice-hero h1 { margin:19px 0 15px; color:#301a44; font-size:clamp(2.9rem,5vw,5.4rem); line-height:1.02; letter-spacing:-.06em; }
.dice-hero h1 span { color:#7119ac; }
.dice-hero p { max-width:590px; margin:0; color:#6e6377; font-size:1.04rem; line-height:1.75; }
.dice-hero-link { display:inline-flex; align-items:center; gap:10px; margin-top:23px; color:#6812a8; font-size:.88rem; font-weight:800; text-decoration:underline; text-underline-offset:5px; }
.dice-hero-art { position:relative; display:grid; width:min(100%,300px); height:240px; place-items:center; justify-self:center; }
.dice-hero-art img { position:relative; z-index:1; width:190px; height:190px; object-fit:contain; filter:drop-shadow(0 21px 18px rgba(65,22,102,.18)); animation:hero-die-float 5s ease-in-out infinite; }
.dice-hero-orbit { position:absolute; width:260px; height:260px; border:1px solid #dbbfea; border-radius:50%; }
.dice-hero-orbit.orbit-two { width:310px; height:310px; border-style:dashed; opacity:.6; }
.hero-art-label { position:absolute; z-index:2; right:-12px; bottom:16px; padding:9px 13px; border:1px solid #eadff1; border-radius:11px; background:#fff; color:#705480; font-size:.7rem; font-weight:800; box-shadow:0 9px 20px rgba(55,25,80,.1); }
@keyframes hero-die-float { 50% { transform:translateY(-11px) rotate(4deg); } }
.dice-layout { display:grid; grid-template-columns:minmax(320px,390px) minmax(0,1fr); align-items:start; gap:22px; margin-top:25px; scroll-margin-top:22px; }
.dice-controls,.dice-stage { min-width:0; padding:clamp(22px,2.8vw,34px); border:1px solid #ece2f3; border-radius:24px; background:#fff; box-shadow:0 12px 32px rgba(53,23,78,.055); }
.dice-controls { position:sticky; top:18px; }
.panel-heading h2,.stage-heading h2 { margin:10px 0 8px; color:#352044; font-size:clamp(1.45rem,2.3vw,2rem); line-height:1.18; letter-spacing:-.035em; }
.panel-heading p { margin:0 0 22px; color:#776d7e; font-size:.86rem; line-height:1.65; }
.dice-options { display:grid; gap:7px; }
.dice-option { display:grid; grid-template-columns:39px 1fr auto; align-items:center; gap:11px; min-height:62px; padding:8px 10px; border:1px solid #eee7f3; border-radius:12px; background:#fcfafd; transition:border-color .2s,background .2s,box-shadow .2s; }
.dice-option.has-dice { border-color:#d9b7ee; background:#f9f1fe; box-shadow:inset 3px 0 #8a32bc; }
.dice-symbol { display:grid; width:38px; height:38px; place-items:center; clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); background:linear-gradient(145deg,#bb6fe4,#6913a2); color:#fff; font-size:.68rem; font-weight:800; }
.dice-option strong,.dice-option small { display:block; }
.dice-option strong { color:#3c2b4a; font-size:.88rem; }
.dice-option small { margin-top:3px; color:#887d8f; font-size:.7rem; }
.dice-stepper { display:flex; align-items:center; gap:6px; }
.dice-stepper button { display:grid; width:36px; height:36px; place-items:center; border:1px solid #e9def1; border-radius:9px; background:#fff; color:#641394; font-size:1.12rem; font-weight:700; cursor:pointer; }
.dice-stepper button:hover:not(:disabled) { border-color:#c99ddf; background:#f3e6fa; }
.dice-stepper button:disabled { opacity:.36; cursor:not-allowed; }
.dice-stepper output { min-width:18px; color:#3a2548; font-size:.86rem; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
.dice-presets { margin-top:21px; padding-top:18px; border-top:1px solid #eee7f2; }
.dice-presets > span,.dice-modifier label,.dice-formula span { display:block; color:#62516d; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.dice-presets > div { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.dice-presets button { min-height:32px; padding:5px 10px; border:1px solid #e6d7ef; border-radius:8px; background:#faf5fd; color:#692398; font-size:.7rem; font-weight:800; cursor:pointer; }
.dice-presets button:hover { background:#f0e0f9; }
.dice-modifier { margin-top:22px; }
.modifier-input { display:flex; align-items:center; gap:8px; width:120px; margin-top:9px; padding:0 10px; border:1px solid #e7d9ef; border-radius:9px; background:#fff; color:#8c56ae; }
.modifier-input input { width:100%; height:39px; border:0; outline:0; background:transparent; color:#352044; font-size:.88rem; font-weight:800; }
.dice-modifier small { display:block; margin-top:6px; color:#8c8292; font-size:.68rem; }
.dice-formula { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; padding:13px 14px; border:1px solid #e9ddf1; border-radius:10px; background:#faf6fd; }
.dice-formula small { display:block; margin-top:4px; color:#8b7896; font-size:.68rem; font-weight:700; }
.dice-formula strong { color:#6a139f; font-size:.92rem; text-align:right; overflow-wrap:anywhere; }
.dice-error { margin:10px 0 0; color:#a32248; font-size:.77rem; font-weight:700; }
.roll-button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:51px; margin-top:14px; padding:10px 16px; border:0; border-radius:12px; background:#ffd400; color:#461276; box-shadow:0 11px 23px rgba(207,163,12,.18); font-size:.86rem; font-weight:800; cursor:pointer; transition:transform .2s,box-shadow .2s,background .2s; }
.roll-button .fa-arrow-right { margin-left:auto; }
.roll-button:hover:not(:disabled) { transform:translateY(-2px); background:#ffe05a; box-shadow:0 15px 26px rgba(207,163,12,.25); }
.roll-button:disabled { opacity:.7; cursor:wait; }
.stage-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:18px; }
.stage-heading h2 { margin-bottom:0; }
.clear-button,.history-heading button { border:0; background:transparent; color:#7c499d; font-size:.72rem; font-weight:800; cursor:pointer; }
.clear-button:hover,.history-heading button:hover { text-decoration:underline; text-underline-offset:3px; }
.clear-button i { margin-left:5px; }
.dice-table { position:relative; height:clamp(390px,43vw,560px); overflow:hidden; isolation:isolate; border:12px solid #795332; border-radius:28px; background:radial-gradient(ellipse at 48% 38%,#623078,#341946 78%),#341946; box-shadow:inset 0 0 0 3px #b98751,inset 0 12px 30px rgba(0,0,0,.38),0 20px 32px rgba(64,24,85,.16); }
.dice-table::before { content:""; position:absolute; z-index:0; inset:9px; border:1px solid rgba(245,211,143,.35); border-radius:15px; pointer-events:none; }
.dice-table::after { content:""; position:absolute; z-index:0; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(22,8,31,.4)); pointer-events:none; }
.table-grain { position:absolute; inset:0; opacity:.22; background-image:repeating-linear-gradient(25deg,transparent 0 22px,rgba(255,255,255,.035) 23px 24px),repeating-linear-gradient(116deg,transparent 0 32px,rgba(0,0,0,.055) 33px 34px); pointer-events:none; }
.table-mark { position:absolute; z-index:1; right:21px; bottom:15px; color:rgba(255,228,166,.42); font-size:.56rem; font-weight:800; letter-spacing:.18em; pointer-events:none; }
.dice-empty { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff2df; text-align:center; pointer-events:none; }
.dice-empty[hidden] { display:none; }
.dice-empty i { margin:5px 0 12px; color:#e6b5fb; font-size:3.1rem; filter:drop-shadow(0 8px 13px rgba(0,0,0,.25)); }
.dice-empty strong { font-size:1.35rem; }
.dice-empty > span:last-child { margin-top:8px; color:#d7bfe0; font-size:.82rem; }
.dice-empty .empty-spark { color:#ffdc74; font-size:1.3rem; }
.dice-pieces { position:absolute; z-index:3; inset:0; pointer-events:none; }
.dice-effect { position:absolute; z-index:5; top:20px; left:50%; display:flex; align-items:center; gap:11px; width:max-content; max-width:calc(100% - 32px); padding:10px 16px 10px 10px; border:1px solid #a8dfbb; border-radius:14px; background:rgba(244,255,247,.97); color:#1c6b42; box-shadow:0 14px 28px rgba(10,5,20,.23); transform:translateX(-50%); animation:dice-effect-appear 3.2s ease both; pointer-events:none; }
.dice-effect[hidden] { display:none; }
.dice-effect-icon { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border-radius:10px; background:#d9f4e2; color:#168345; font-size:1.25rem; font-weight:800; }
.dice-effect strong,.dice-effect small { display:block; }
.dice-effect strong { font-size:.83rem; }
.dice-effect small { margin-top:2px; color:#4e755e; font-size:.67rem; line-height:1.35; }
.dice-effect.is-min { border-color:#edb8c7; background:rgba(255,246,248,.97); color:#a3264a; }
.dice-effect.is-min .dice-effect-icon { background:#ffe1e9; color:#b51e4a; }
.dice-effect.is-min small { color:#895468; }
.dice-effect.is-mixed { border-color:#d8c1df; background:linear-gradient(110deg,rgba(245,255,247,.98),rgba(255,246,248,.98)); color:#563469; }
.dice-effect.is-mixed .dice-effect-icon { background:linear-gradient(135deg,#dcf3df,#ffe0e7); color:#6b328c; }
@keyframes dice-effect-appear { 0% { opacity:0; translate:0 -12px; scale:.94; } 12%,78% { opacity:1; translate:0 0; scale:1; } 100% { opacity:0; translate:0 -7px; scale:1; } }
.table-die { position:absolute; left:50%; top:-18%; width:100px; height:100px; opacity:0; perspective:550px; scale:var(--die-scale,1); transform:translate(-50%,-50%); transition:left 1.35s cubic-bezier(.19,.95,.31,1),top 1.35s cubic-bezier(.14,1.32,.28,1),opacity .18s ease; will-change:left,top; }
.table-die.is-landed { opacity:1; }
.table-die.is-max::before,.table-die.is-min::before { content:""; position:absolute; z-index:-1; inset:-8px; border:2px solid #59d991; border-radius:50%; box-shadow:0 0 20px rgba(72,229,132,.65),inset 0 0 15px rgba(72,229,132,.35); animation:natural-ring 1.9s ease-out both; }
.table-die.is-min::before { border-color:#ff6d90; box-shadow:0 0 20px rgba(255,79,121,.68),inset 0 0 15px rgba(255,79,121,.37); }
@keyframes natural-ring { 0% { opacity:0; scale:.65; } 20% { opacity:1; scale:1.12; } 60% { opacity:.85; scale:1.3; } 100% { opacity:.3; scale:1.42; } }
.table-die::after { content:""; position:absolute; z-index:-1; right:8px; bottom:-15px; left:8px; height:19px; border-radius:50%; background:rgba(8,3,14,.55); filter:blur(8px); }
.table-die.is-landed::after { animation:die-shadow-land 1.35s ease-out both; }
@keyframes die-shadow-land { 0% { opacity:0; scale:.35; } 70% { opacity:.35; scale:1.25; } 100% { opacity:1; scale:1; } }
.polyhedron { position:absolute; inset:0; transform-style:preserve-3d; transition:transform 1.35s cubic-bezier(.16,.82,.24,1); will-change:transform; }
.poly-face { position:absolute; z-index:1; backface-visibility:hidden; clip-path:var(--face-outline); background:linear-gradient(125deg,#ffe9a7,#c68d24 48%,#f4d477); }
.poly-face::before { content:""; position:absolute; inset:0; clip-path:var(--face-inset); background:linear-gradient(145deg,var(--face-light),var(--face-dark)); }
.poly-face::after { content:""; position:absolute; top:9%; left:13%; width:36%; height:52%; clip-path:polygon(0 0,100% 0,0 100%); background:rgba(255,255,255,.12); }
.poly-face span { position:absolute; z-index:1; color:#fff9e8; font-size:var(--face-font,14px); font-weight:800; line-height:1; text-shadow:0 1px 2px #391055,0 2px 5px rgba(18,4,27,.7); transform:translate(-50%,-50%); font-variant-numeric:tabular-nums; }
.table-die[data-type="d6"] .poly-face::before { background:linear-gradient(145deg,#c981ec,#641494); }
.table-die[data-type="d100"] .poly-face::before { background:linear-gradient(145deg,#edc96a,#a9671f); }
.table-die.is-max .poly-face.is-result-face { background:linear-gradient(125deg,#e9ffb5,#43c779,#a4efad); }
.table-die.is-max .poly-face.is-result-face::before { background:linear-gradient(145deg,#29b972,#0c754c); }
.table-die.is-min .poly-face.is-result-face { background:linear-gradient(125deg,#ffe1ad,#ed638b,#ffafbe); }
.table-die.is-min .poly-face.is-result-face::before { background:linear-gradient(145deg,#e04b73,#8e1540); }
.dice-result { display:grid; grid-template-columns:155px 1fr; min-height:102px; margin-top:17px; overflow:hidden; border:1px solid #eadff1; border-radius:15px; background:#faf6fd; }
.result-total { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px; border-right:1px solid #eadff1; }
.result-total span { color:#816f8c; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.result-total strong { margin-top:5px; color:#6812a8; font-size:2.6rem; line-height:1; font-variant-numeric:tabular-nums; }
.result-detail { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:16px 21px; }
.result-detail strong { color:#3b284b; font-size:.9rem; }
.result-detail p { margin:6px 0 0; color:#786c80; font-size:.77rem; line-height:1.55; overflow-wrap:anywhere; }
.result-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.result-chips:empty { display:none; }
.result-chip { display:inline-flex; align-items:center; gap:6px; min-height:29px; padding:4px 8px; border:1px solid #e4d4ef; border-radius:8px; background:#fff; }
.result-chip small { color:#826293; font-size:.62rem; font-weight:800; }
.result-chip strong { color:#61228d; font-size:.81rem; }
.result-chip.is-max { border-color:#a9dbb9; background:#ecf9ef; }
.result-chip.is-max strong,.result-chip.is-max em { color:#197447; }
.result-chip.is-min { border-color:#efb9c7; background:#fff0f4; }
.result-chip.is-min strong,.result-chip.is-min em { color:#a5254b; }
.result-chip em { margin-left:2px; font-size:.55rem; font-style:normal; font-weight:800; letter-spacing:.07em; }
.history-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:25px 0 10px; }
.history-heading h3 { margin:0; color:#3d2a4c; font-size:1.03rem; }
.dice-history { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.dice-history li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 13px; border:1px solid #eee7f2; border-radius:10px; background:#fff; }
.dice-history li span { color:#6e6278; font-size:.76rem; }
.dice-history li strong { color:#67129c; font-size:.9rem; }
.dice-history .history-empty { color:#96899f; font-size:.76rem; }
.dice-history li.has-max { border-left:3px solid #41b979; }
.dice-history li.has-min { border-left:3px solid #dc5e80; }
.dice-history li.has-mixed { border-left:3px solid #9b55bb; }
.dice-footnote { max-width:1580px; margin:16px auto 0; color:#867b8d; font-size:.75rem; line-height:1.6; }
@media (max-width:1050px) { .dice-layout { grid-template-columns:330px minmax(0,1fr); } .dice-controls,.dice-stage { padding:22px; } .dice-table { height:450px; } }
@media (max-height:850px) { .dice-controls { position:static; } }
@media (max-width:820px) { .dice-hero { grid-template-columns:1fr 220px; } .dice-hero-art { width:210px; height:220px; } .dice-hero-art img { width:145px; height:145px; } .dice-hero-orbit { width:185px; height:185px; } .dice-hero-orbit.orbit-two { width:220px; height:220px; } .dice-layout { grid-template-columns:1fr; } .dice-controls { position:static; } .dice-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .dice-page .dice-main { padding:10px 10px 45px; } .dice-hero { grid-template-columns:1fr; min-height:0; padding:33px 23px 25px; border-radius:21px; } .dice-hero h1 { font-size:clamp(2.7rem,11vw,3.8rem); } .dice-hero p { font-size:.9rem; } .dice-hero-art { width:180px; height:150px; margin:14px auto 0; } .dice-hero-art img { width:126px; height:126px; } .dice-hero-orbit { width:160px; height:160px; } .dice-hero-orbit.orbit-two { width:195px; height:195px; } .hero-art-label { right:-24px; bottom:-5px; } .dice-layout { gap:13px; margin-top:13px; } .dice-controls,.dice-stage { padding:18px; border-radius:18px; } .dice-options { grid-template-columns:1fr; gap:7px; } .dice-option { grid-template-columns:38px 1fr auto; gap:9px; padding:8px 10px; } .dice-symbol { width:38px; height:38px; font-size:.65rem; } .dice-option strong { font-size:.84rem; } .dice-option small { font-size:.67rem; } .dice-stepper { grid-column:auto; justify-self:end; margin:0; } .stage-heading { align-items:start; } .stage-heading h2 { font-size:1.35rem; } .clear-button { max-width:78px; line-height:1.35; } .dice-table { height:400px; border-width:9px; border-radius:21px; } .dice-result { grid-template-columns:100px 1fr; } .result-total strong { font-size:2rem; } .result-total span { font-size:.57rem; text-align:center; } .result-detail { padding:11px; } .result-detail p { font-size:.7rem; } }
@media (prefers-reduced-motion:reduce) { .dice-hero-art img,.table-die.is-landed::after,.table-die.is-max::before,.table-die.is-min::before,.dice-effect { animation:none; } .dice-effect { opacity:1; } .table-die.is-max::before,.table-die.is-min::before { opacity:.35; } .table-die,.polyhedron,.roll-button { transition:none; } }