:root{--ink:#080D12;--ink-2:#0D151C;--panel:rgba(11,18,24,.82);--edge:rgba(200,178,120,.22);--edge-strong:rgba(200,178,120,.44);--brass:#C9A227;--brass-lit:#EBD48A;--parch:#EDE6D4;--muted:#7E8894;--spell:#FF6B2C;--spell-dim:rgba(255,107,44,.18);--display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--ui:ui-sans-serif,-apple-system,"Avenir Next","Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;--rail:96px}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--ink);color:var(--parch);font-family:var(--ui);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}::selection{background:transparent}canvas#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#boot{position:fixed;inset:0;display:grid;place-content:center;gap:14px;text-align:center;background:var(--ink);z-index:50;transition:opacity .5s ease}#boot.gone{opacity:0;pointer-events:none}#boot h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,42px);letter-spacing:.02em;margin:0}#boot p{color:var(--muted);font-size:13px;margin:0;max-width:44ch;line-height:1.6}.spin{width:34px;height:34px;margin:0 auto;border:1px solid var(--edge);border-top-color:var(--brass);border-radius:50%;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}#ribbon{position:fixed;top:0;left:0;right:0;padding:18px max(20px,env(safe-area-inset-right)) 26px max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;z-index:20;background:linear-gradient(180deg,rgba(6,10,14,.78),transparent)}#notation{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}#notation b{color:var(--parch);font-weight:500}#total{font-family:var(--display);font-size:clamp(40px,min(9vw,13vh),86px);line-height:.92;letter-spacing:-.02em;color:var(--parch);text-shadow:0 0 34px var(--spell-dim),0 2px 0 rgba(0,0,0,.5);transition:color .35s ease;font-variant-numeric:lining-nums}#total.rolling{color:var(--muted);opacity:.5}#chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:min(680px,92vw)}.chip{font-family:var(--mono);font-size:12px;min-width:32px;height:26px;padding:2px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;border:1px solid var(--edge);border-radius:6px;background:#00000059;color:var(--muted);opacity:.35;transform:translateY(-3px);transition:opacity .25s,transform .25s,color .25s,border-color .25s,box-shadow .25s}.chip.in{opacity:1;transform:none;color:var(--parch);border-color:var(--edge-strong)}.chip.crit{color:#0a0a0a;background:var(--spell);border-color:var(--spell);box-shadow:0 0 18px var(--spell);font-weight:700}.chip.fumble{color:#c46a6a;border-color:#c46a6a80}.chip i{font-style:normal;opacity:.45;font-size:9px;margin:0}#verdict{font-family:var(--display);font-size:15px;letter-spacing:.28em;text-transform:uppercase;height:18px;color:var(--spell);opacity:0;transition:opacity .3s}#verdict.show{opacity:1}#tray{position:fixed;left:0;right:0;bottom:0;z-index:30;width:100%;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px;align-items:center;background:linear-gradient(0deg,#060a0ef0 55%,#060a0e00)}.row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;min-width:0}.die,.pill,.btn,.mod{flex:0 0 auto}.lab-s{display:none}.die{position:relative;width:56px;height:58px;border:1px solid var(--edge);border-radius:10px;background:linear-gradient(180deg,#ffffff0b,#00000040);color:var(--parch);cursor:pointer;display:grid;place-items:center;gap:0;padding:0;transition:border-color .2s,background .2s,transform .12s}.die svg{width:26px;height:26px;margin-top:6px;opacity:.82;transition:opacity .2s}.die span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}.die:hover{border-color:var(--edge-strong);background:linear-gradient(180deg,#ffffff13,#0003)}.die:active{transform:translateY(1px)}.die.has{border-color:var(--spell);box-shadow:0 0 0 1px var(--spell-dim),0 6px 22px -12px var(--spell)}.die.has svg{opacity:1;color:var(--spell)}.die b{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--spell);color:#080c10;font-family:var(--mono);font-size:11px;font-weight:700;display:grid;place-content:center;box-shadow:0 3px 12px -3px var(--spell)}.die:focus-visible,.pill:focus-visible,.btn:focus-visible,.step:focus-visible{outline:2px solid var(--brass-lit);outline-offset:2px}.pill{font-family:var(--ui);font-size:12px;letter-spacing:.04em;padding:5px 14px 5px 5px;border-radius:999px;cursor:pointer;border:1px solid var(--edge);background:#0000004d;color:var(--muted);transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:8px}.pill .ico{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--c);opacity:.62;transition:background .2s,color .2s,opacity .2s,box-shadow .2s}.pill .ico svg{width:16px;height:16px;display:block}.pill:hover{color:var(--parch);border-color:var(--edge-strong)}.pill:hover .ico{opacity:.95}.pill.on{color:var(--parch);font-weight:600;border-color:var(--c);background:var(--c-dim);box-shadow:0 5px 20px -12px var(--c)}.pill.on .ico{opacity:1;background:var(--c);color:#0a0e12;box-shadow:0 0 12px -2px var(--c)}.btn{font-family:var(--display);font-size:16px;letter-spacing:.16em;text-transform:uppercase;padding:12px 30px;border-radius:8px;cursor:pointer;border:1px solid var(--spell);color:#080c10;background:var(--spell);transition:filter .18s,transform .12s,opacity .2s;font-weight:600}.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.35;cursor:not-allowed;filter:none}.btn.ghost{background:transparent;color:var(--muted);border-color:var(--edge);font-size:13px;padding:12px 16px;letter-spacing:.1em}.btn.ghost:hover{color:var(--parch);border-color:var(--edge-strong)}.mod{display:flex;align-items:center;border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:#0000004d}.step{width:34px;height:44px;border:0;background:transparent;color:var(--muted);font-size:17px;cursor:pointer;font-family:var(--mono)}.step:hover{color:var(--parch);background:#ffffff0d}.mod b{font-family:var(--mono);font-size:13px;min-width:40px;text-align:center;color:var(--parch);font-weight:500}.mod i{font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;padding-right:9px}#share{display:none;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em}#share.on{display:flex}#seed{color:var(--muted);background:#00000059;border:1px solid var(--edge);border-radius:5px;padding:4px 8px;user-select:text;-webkit-user-select:text}#copy{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:1px solid var(--edge);background:transparent;color:var(--muted);border-radius:5px;padding:4px 8px}#copy:hover{color:var(--parch);border-color:var(--edge-strong)}#hint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#7e8894b3;text-align:center}@media(max-width:720px){.die{width:48px;height:52px}.die svg{width:22px;height:22px}.btn{padding:11px 22px;font-size:15px}#hint{display:none}#ribbon{padding-top:12px}}@media(max-width:700px){.lab{display:none}.lab-s{display:inline}}@media(max-width:520px){#tray{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.row{gap:6px}.die{width:44px;height:48px}.die svg{width:20px;height:20px}.die span{font-size:9px;margin-bottom:4px}.pill{font-size:11px;padding:3px 8px 3px 3px;gap:5px}.pill .ico{width:19px;height:19px}.pill .ico svg{width:13px;height:13px}.btn{padding:10px 18px;font-size:14px}.btn.ghost{padding:10px 13px;font-size:12px}.step{width:30px;height:40px}.mod b{min-width:34px;font-size:12px}}@media(max-width:360px){.row{gap:5px}.die{width:38px;height:42px}.die svg{width:16px;height:16px}.die span{font-size:8px;margin-bottom:3px}.die b{min-width:17px;height:17px;font-size:10px;top:-6px;right:-6px}.pill{font-size:10px;padding:3px 9px 3px 3px;gap:5px}.pill .ico{width:19px;height:19px}.pill .ico svg{width:13px;height:13px}.btn{padding:9px 14px;font-size:13px;letter-spacing:.12em}.btn.ghost{padding:9px 10px;font-size:11px}.step{width:28px;height:36px;font-size:15px}.mod b{min-width:28px;font-size:12px}.mod i{padding-right:6px;font-size:8px}#total{font-size:clamp(34px,min(11vw,13vh),86px)}}@media(max-height:560px){#hint{display:none}#ribbon{padding:8px 16px 10px;gap:3px}#notation{font-size:10px;letter-spacing:.12em}#total{font-size:clamp(26px,7.5vh,44px)}.chip{height:22px;font-size:10px;min-width:28px;padding:1px 5px}.chip i{font-size:8px}#verdict{font-size:11px;height:13px;letter-spacing:.2em}#tray{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;padding-top:8px}.row{width:auto}#dicerow{order:1}#ctrlrow{order:2}#spellrow{order:3}.die{width:40px;height:44px}.die svg{width:18px;height:18px}.die span{font-size:9px;margin-bottom:3px}.pill{font-size:11px;padding:4px 10px 4px 4px}.pill .ico{width:21px;height:21px}.pill .ico svg{width:14px;height:14px}.btn{padding:9px 18px;font-size:14px}.btn.ghost{padding:9px 12px;font-size:12px}.step{width:30px;height:36px}.mod b{min-width:34px;font-size:12px}.mod i{padding-right:7px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}