:root{color-scheme:dark;--ink:#101321;--paper:#f6f4ea;--lime:#c2fb77;--muted:#a2a7bb}
*{box-sizing:border-box}html{min-width:320px;background:var(--ink)}body{margin:0;color:var(--paper);font-family:'Trebuchet MS','Segoe UI',sans-serif;background:radial-gradient(ellipse at 50% 35%,#242b43,#101321 74%);min-height:100svh;transition:background .4s}body[data-mode=number]{--ink:#030907;--paper:#e0ffec;--lime:#68ffad;--muted:#8fb5a0;background:radial-gradient(ellipse at 50% 40%,#0a2618,#020705 74%)}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:5px}main{max-width:1200px;margin:auto;min-height:100svh;padding:22px 28px 24px;position:relative;isolation:isolate}#celebration{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0}body.mega #celebration{opacity:1;animation:neon-waves 4s ease-in-out 2;background:radial-gradient(ellipse at center,transparent 30%,#00ffb133);box-shadow:inset 0 0 100px #62ff9188}header{display:flex;justify-content:center;position:relative;z-index:4}.brand{position:absolute;left:0;top:14px;width:30px;height:30px}.mode-label{display:block;text-align:center;color:var(--muted);font-size:13px;margin:0 0 8px}.mode-switch{display:flex;gap:4px;padding:4px;border:1px solid #ffffff20;border-radius:99px;background:#050b1280}.mode-switch button{min-width:112px;border:0;border-radius:99px;padding:10px 18px;background:none;letter-spacing:1.5px;font-size:13px;font-weight:900}.mode-switch button[aria-pressed=true]{background:#ffffff16;box-shadow:inset 0 0 0 1px #ffffff26}.rainbow{background:linear-gradient(90deg,#ff78be 8%,#b67aff 30%,#ffe466 55%,#79ef8a 80%,#fff);color:transparent;background-clip:text}#number-mode{color:#aaffc8}.intro{text-align:center;margin:22px 0 12px}.eyebrow{color:var(--lime);letter-spacing:4px;font-size:11px;font-weight:bold;margin:0 0 8px}h1{font-size:clamp(38px,6vw,62px);line-height:1.05;margin:0;font-weight:1000;font-style:italic;letter-spacing:-2.5px;text-shadow:3px 4px #0007}h1 span{color:var(--lime)}.settings-wrap{text-align:center;position:relative;z-index:5;min-height:26px;margin:10px 0 0}details{display:inline-block;position:relative}summary{font-size:12px;color:var(--muted);cursor:pointer;list-style:none;padding:7px 14px;border:1px solid #ffffff1c;border-radius:99px}summary:after{content:' ▾';color:var(--lime)}.size-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:12px;background:#09170f;border:1px solid #4c9168;border-radius:14px;min-width:240px}.top-choices{position:absolute;left:50%;transform:translateX(-50%);margin-top:7px;box-shadow:0 12px 40px #000a}.size-choices button{border:1px solid #356444;border-radius:9px;background:#0f291b;padding:13px 16px;font-weight:bold}.size-choices button[aria-pressed=true]{background:var(--lime);color:#062110}.settings-note{font-size:11px;color:var(--muted);margin:5px 0 0}#number-options[hidden],#palette[hidden],#number-footer[hidden],[hidden]{display:none!important}.play-stage{position:relative;margin-top:0;isolation:isolate}#scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.dice-field{position:relative;width:min(100%,920px);margin:auto;isolation:isolate;transition:height .65s ease}.die{position:absolute;text-align:center;border-radius:50%;transition:left .65s cubic-bezier(.2,.8,.2,1),top .65s cubic-bezier(.2,.8,.2,1),width .65s ease,height .65s ease;z-index:1}.die-meta{height:23px;display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:11px;letter-spacing:.6px}.die-index{display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid #ffffff20;border-radius:50%;font-size:10px}.die-word{font-weight:900;font-size:clamp(15px,2.2vw,24px);height:30px;line-height:30px;white-space:nowrap}.die canvas{display:block;width:100%;height:calc(100% - 53px)}.die-edit{position:absolute;inset:0;border:0;border-radius:50%;background:transparent;z-index:3}.die-edit:hover{box-shadow:0 0 0 1px #81ffb34a}.die-edit:disabled{pointer-events:none}.die-crit{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#ffd861;color:#322209;border:1px solid #fff3b5;box-shadow:0 0 22px #ffbb3366;border-radius:99px;padding:3px 9px;font-weight:1000;font-size:12px;letter-spacing:1px;z-index:4;white-space:nowrap}.die.critical canvas{filter:drop-shadow(0 0 12px #ffb00066)}.die.settled{z-index:0}.dice-field.ring-layout .die-meta{font-size:10px;height:18px;gap:3px}.dice-field.ring-layout .die-word{font-size:13px;line-height:19px;height:19px}.dice-field.ring-layout .die canvas{height:calc(100% - 37px)}.dice-field.ring-layout .die-crit{bottom:-4px;font-size:10px;padding:2px 7px}.dice-field.ring-layout .die-index{display:none}.total{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:220px;text-align:center;z-index:1;opacity:0;pointer-events:none;transition:opacity .5s .35s}.total.visible{opacity:1}.total-kicker{font-size:12px;letter-spacing:3px;color:var(--lime);font-weight:bold}.total canvas{width:100%;height:145px;display:block}.total-limit{font-size:12px;color:var(--muted);margin:-2px 0 8px}.total-quip{font-size:14px;line-height:1.4;margin:0;color:var(--paper)}.caption{font-size:14px;line-height:1.5;color:#c4cad8;max-width:700px;margin:15px auto 17px;text-align:center;min-height:23px;position:relative;z-index:3}.caption:empty{margin:4px 0 9px;min-height:12px}body[data-mode=number] .caption{color:#b5dfc5}.result-recap{display:flex;gap:6px 14px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted);margin:0 auto 9px;max-width:760px}.result-recap:empty{display:none}.controls{text-align:center;position:relative;z-index:3}.roll-controls{display:flex;align-items:center;justify-content:center;gap:24px}.count-button{width:48px;height:48px;border:1px solid #ffffff28;border-radius:15px;background:#ffffff07;font-size:21px;display:flex;align-items:center;justify-content:center;gap:3px}.count-button small{font-size:15px}.count-button:hover:not(:disabled){border-color:var(--lime);background:#ffffff10}.count-button:disabled{opacity:.24}.paw-wrap{position:relative;width:154px;height:147px;--charge:0}.paw-wrap:before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--lime);filter:blur(27px);opacity:var(--glow,0);pointer-events:none}.paw{border:0;padding:0;width:150px;height:140px;background:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 7px 0 #0008) drop-shadow(0 0 var(--blur,3px) #baff6c66);transform:scale(var(--scale,1));transition:transform .08s}.paw:focus-visible{border-radius:40%}.paw svg{width:100%;height:100%;overflow:visible}.paw .pad{fill:#97be71;stroke:#d7ffae;stroke-width:1.6}body[data-mode=number] .paw .pad{fill:#57bc81;stroke:#9bffc0}.paw .shine{fill:#dbffa9;opacity:var(--shine,.15)}body[data-mode=number] .paw .shine{fill:#baffd5}.paw text{fill:#142019;font-size:12px;font-weight:900;letter-spacing:1px}.paw[aria-disabled=true]{cursor:wait}.ring{position:absolute;inset:-7px 0 0;width:154px;height:154px;pointer-events:none;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:2;stroke:var(--lime);stroke-dasharray:490;stroke-dashoffset:490;opacity:.8}.hold-label{font-size:16px;font-weight:800;margin:9px 0 5px;min-height:21px}.hold-label strong{color:var(--lime)}.help{margin:0;color:var(--muted);font-size:12px;min-height:17px}.count-label{font-size:11px;color:var(--muted);margin:8px 0 0;letter-spacing:.5px}.palette{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:23px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid #ffffff0c}.palette li{display:flex;align-items:center;gap:6px;font-size:12px;color:#b9bfd0}.swatch{width:10px;height:10px;border-radius:50%;background:var(--color)}.swatch.black{border:1px solid #9ca8bd}#number-footer{text-align:center;margin:20px 0 0;color:var(--muted);font-size:12px;border-top:1px solid #8bffa015;padding-top:14px}dialog{color:var(--paper);border:1px solid #539972;border-radius:20px;padding:22px;background:#08140e;width:min(340px,90vw);box-shadow:0 25px 90px #000b}dialog::backdrop{background:#020b08c9;backdrop-filter:blur(5px)}dialog h2{font-size:21px;margin:0 0 6px}dialog p{font-size:14px;color:var(--muted);margin:0 0 16px}.close-dialog{display:block;margin:15px auto 0;border:0;background:none;color:var(--muted);padding:8px 15px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes neon-waves{0%,100%{filter:hue-rotate(0);opacity:.35}25%{filter:hue-rotate(100deg);opacity:.8}50%{filter:hue-rotate(210deg);opacity:.45}75%{filter:hue-rotate(300deg);opacity:.8}}
@media(max-width:600px){main{padding:16px 12px 20px}.brand{width:23px;height:23px;top:25px}.mode-switch button{min-width:96px;padding:10px 14px;font-size:12px}.mode-label{font-size:12px}.intro{margin-top:21px}.eyebrow{font-size:10px;letter-spacing:2.8px}.settings-wrap{margin-top:6px}.caption{font-size:13px;margin:11px 5px 14px}.die-word{font-size:18px}.die-meta{font-size:10px}.total{width:122px}.total canvas{height:85px}.total-kicker{font-size:9px;letter-spacing:1px}.total-limit{font-size:10px;margin:0 0 5px}.total-quip{font-size:11px;line-height:1.3}.dice-field.ring-layout .die-word{font-size:10px;line-height:15px;height:15px}.dice-field.ring-layout .die-meta{height:14px;font-size:9px}.dice-field.ring-layout .die canvas{height:calc(100% - 29px)}.dice-field.ring-layout .die-crit{font-size:8px;padding:1px 5px;bottom:-2px}.palette{gap:10px 14px}.palette li{font-size:11px}.roll-controls{gap:18px}.result-recap{font-size:11px}.count-button{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.paw{transform:none!important}body.mega #celebration{opacity:.25}}
@media(max-width:600px){.dice-field.dense .die-word{font-size:13px;height:22px;line-height:22px}.dice-field.dense .die canvas{height:calc(100% - 45px)}}
@media(max-width:360px){.total{width:108px}.total canvas{height:68px}.total-quip{font-size:11px;line-height:1.25}.total-limit{font-size:9px}.total-kicker{font-size:9px}}

#dialog-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0 15px}
#dialog-kinds button{position:relative;isolation:isolate;min-width:0;border:1px solid #356444;border-radius:9px;background:#0f291b;min-height:47px;padding:10px 3px;font-size:12px;font-weight:900;letter-spacing:.5px;transition:box-shadow .2s,border-color .2s,background .2s}
#dialog-kinds button[aria-pressed=true]{border:2px solid #7affb0;background:#1a402c;box-shadow:inset 0 0 0 1px #071b11}
#dialog-kinds .kind-fear{font-family:Papyrus,'Copperplate Gothic Bold',Georgia,serif;font-size:15px;font-weight:900;letter-spacing:1px;color:#f95376;text-shadow:1px 2px #390412,1px 3px #9b1332,0 5px 1px #790a20}
#dialog-kinds .kind-fear:hover,#dialog-kinds .kind-fear:focus-visible{border-color:#ff3255;background:#220712;box-shadow:0 0 14px #e6164344,0 6px 13px #000;text-shadow:0 0 7px #ff183b,1px 3px #700821,0 5px #59071d}
#dialog-kinds .kind-fear[aria-pressed=true]{border-color:#fd416a;background:#330d22}
#dialog-kinds .kind-hope{font-size:15px;font-family:'Trebuchet MS','Segoe UI',sans-serif;letter-spacing:1.4px;color:#fff2b5}
#dialog-kinds .kind-hope:before{content:'';position:absolute;z-index:-1;inset:-5px;border-radius:12px;background:repeating-conic-gradient(from 6deg,#ffe8a800 0deg 24deg,#fff4b499 25deg 27deg,#ffe8a800 28deg 45deg);opacity:0;mask-image:radial-gradient(ellipse,transparent 50%,#000 65%,transparent 74%);pointer-events:none}
#dialog-kinds .kind-hope:hover,#dialog-kinds .kind-hope:focus-visible{border-color:#fff2bb;background:#303b2c;box-shadow:0 0 17px #ffe6a34d;text-shadow:0 0 8px #fff1ac;animation:hope-bounce .45s ease-out 1}
#dialog-kinds .kind-hope:hover:before,#dialog-kinds .kind-hope:focus-visible:before{opacity:1}
#dialog-kinds .kind-hope[aria-pressed=true]{border-color:#ffe5a2;background:#354332}
#confirm-die{display:block;width:100%;border:1px solid #9affc4;border-radius:10px;background:#68ffad;color:#062110;font-size:14px;font-weight:bold;padding:12px 6px}
#confirm-die:hover{background:#a5ffd0}dialog .close-dialog{margin-top:8px}
.die[data-kind=fear] .die-type{color:#ed8ba8}.die[data-kind=hope] .die-type{color:#f6e0a9}
.die[data-kind=fear].critical canvas{filter:drop-shadow(0 0 12px #a95cfa66)}.die[data-kind=hope].critical canvas{filter:drop-shadow(0 0 13px #fff0ae77)}
.die[data-kind=fear] .die-crit{color:#ead4ff;background:#35184d;border-color:#bf89ea;box-shadow:0 0 14px #953dce66}.die[data-kind=hope] .die-crit{color:#674407;background:#fff5cf;border-color:#fff;box-shadow:0 0 20px #fff1b777}
.ring-layout .die.critical canvas{filter:none}.ring-layout .die-crit{box-shadow:none}.ring-layout .die-word{color:#b4bfc6}.ring-layout .die[data-kind] .die-crit{box-shadow:none}
@keyframes hope-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#dialog-kinds button{animation:none!important}}

@media(max-width:600px){.total canvas{height:94px}}
@media(max-width:360px){.total canvas{height:86px}}

.fact-source{color:var(--muted);text-decoration:none;padding:4px;font-size:13px}.fact-source:hover,.fact-source:focus-visible{color:var(--paper);text-decoration:underline}

/* A low roll has its own badge; successful crit effects remain on high rolls. */
.die.failure .die-crit{background:#243444;color:#d4eaff;border-color:#88a6c2;box-shadow:0 0 12px #8cbcea25}
.die.failure[data-kind=fear] .die-crit{background:#300c2d;color:#ffb7d1;border-color:#955984}
.die.failure[data-kind=hope] .die-crit{background:#30333c;color:#fff0bb;border-color:#dac47d}

/* The total verdict shares the numeral's animated metal renderer. */
#total #total-verdict-art{display:block;width:100%;height:68px}
#total-verdict{margin:-5px -9px 2px}
#total[data-kind=hope] .total-limit{color:#d9c994}
#total[data-kind=fear] .total-limit{color:#ce9ec2}
@media(max-width:600px){#total #total-verdict-art{height:43px}#total-verdict{margin:-4px -7px 2px}}
@media(max-width:360px){#total #total-verdict-art{height:39px}}

/* A single aura spans the total numeral and verdict, behind both metal layers. */
#total-visual{position:relative;isolation:isolate}
#total #total-aura{position:absolute;left:-20%;top:-20%;width:140%;height:140%;z-index:-1;pointer-events:none}
#total[data-kind=default] #total-aura{display:none}

/* Six neon hues in two seconds: three color changes per second. */
#mega-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0}
body.mega-loop #mega-backdrop{opacity:1;background-color:#d000ff;animation:mega-neon-cycle 2s steps(1,end) infinite;background-image:radial-gradient(ellipse at center,#020705b8 15%,#02070566 100%)}
@keyframes mega-neon-cycle{0%,100%{background-color:#d000ff}16.6667%{background-color:#00eaff}33.3333%{background-color:#80ff00}50%{background-color:#ffae00}66.6667%{background-color:#ff00a8}83.3333%{background-color:#00ffad}}
.reset-button{display:block;margin:0 auto 13px;padding:8px 24px;border:1px solid #ffffff35;border-radius:99px;background:#07110dc9;color:var(--paper);font-size:12px;font-weight:900;letter-spacing:2px;box-shadow:0 3px 12px #0003}
.reset-button:hover{border-color:var(--lime);color:var(--lime);background:#14261fe6}
@media(prefers-reduced-motion:reduce){body.mega-loop #mega-backdrop{animation:none;background-color:#7e31b3;opacity:.45}}