:root{--cream:#f1e4c5;--gold:#c39447;--bright:#edbf66;--muted:#958262;--line:#77532566;--serif:'Cormorant Garamond',Georgia,serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box}html{min-width:320px;background:#0b0704}body{margin:0;min-height:100vh;color:var(--cream);font-family:var(--serif);background:radial-gradient(ellipse 65% 480px at 50% 0,#43281066,transparent),radial-gradient(ellipse 520px 320px at 50% 540px,#4c281522,transparent),linear-gradient(#150d08,#090604);background-attachment:fixed;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:wait}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--bright);outline-offset:5px}main{position:relative;z-index:1;width:min(820px,calc(100% - 48px));margin:auto;text-align:center;padding:25px 0 28px}.lang{position:absolute;right:32px;top:22px;display:flex;gap:10px;z-index:3;align-items:center;color:#8d7c60;font:11px var(--sans);letter-spacing:3px}.lang button{position:relative;border:0;background:none;color:var(--muted);padding:5px 0 9px;font:inherit;letter-spacing:inherit}.lang button[aria-pressed=true]{color:var(--cream)}.lang button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;left:0;right:3px;height:1px;background:linear-gradient(90deg,transparent,var(--bright),transparent)}.brand{position:relative;padding-bottom:26px}.brand h1{position:relative;font-family:'Instrument Serif',Georgia,serif;font-size:174px;font-weight:400;letter-spacing:-7px;line-height:.95;margin:0;background:linear-gradient(#fffaf0,#ecdbb2);color:transparent;background-clip:text;filter:drop-shadow(0 4px 28px #d18a2820)}.brand-orbit{position:absolute;width:310px;height:310px;border:1px solid #b17e2510;border-radius:50%;left:50%;top:-73px;transform:translateX(-50%);pointer-events:none}.brand-orbit:before,.brand-orbit:after{content:'';position:absolute;inset:15px;border:1px solid #b17e2510;transform:rotate(24deg)}.brand-orbit:after{transform:rotate(54deg)}.eyebrow{font:500 10px/1.8 var(--sans);text-transform:uppercase;letter-spacing:3.4px}.ruled{display:flex;align-items:center;justify-content:center;gap:22px}.ruled:before,.ruled:after{content:'';height:1px;width:48px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--gold))}.ruled:after{transform:scaleX(-1)}.brand p{position:relative;margin:18px 0 0;color:#c6b694;letter-spacing:6px}.framed{position:relative;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#32201130,#140d0733);box-shadow:inset 0 1px 0 #f0d19308}.framed:before{content:'';position:absolute;inset:5px;border:1px solid #96703922;border-radius:11px;pointer-events:none}.controls{padding:14px 17px}.control-row{display:flex;align-items:center;gap:12px;padding:2px 0}.control-row+.control-row{border-top:1px solid #9a71342b;margin-top:10px;padding-top:12px}.control-row h2{flex:0 0 156px;text-align:left;justify-content:flex-start;font:500 14px var(--serif);letter-spacing:1.8px;color:#d3ab64;margin:0}.control-row h2:before{content:'◇';width:auto;height:auto;background:none;font-size:26px;line-height:1;margin-right:-7px}.control-row h2:after{display:none}.options{display:flex;gap:9px;flex:1}.options button,.history-list button{position:relative;flex:1;min-width:0;border:1px solid #77573288;border-radius:12px;background:linear-gradient(145deg,#4a32192b,#0c080766);box-shadow:inset 0 1px 2px #f8d79b0d;color:#f0e2c1;font-size:23px;line-height:1;padding:11px 4px;transition:background .2s,border-color .2s,transform .2s}.options button:hover,.history-list button:hover{border-color:#d6a253;transform:translateY(-2px)}.options button[aria-pressed=true],.history-list button[aria-current=true]{border-color:#f2c76d;background:linear-gradient(#9d292b,#631215 65%,#400b0e);box-shadow:0 0 18px #a32e1922,inset 0 0 0 1px #e9bf65;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);border-radius:0}.tabletop{position:relative}.stage{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 20px;padding:8px 10px 0;min-height:124px;isolation:isolate}.stage:before{content:'';position:absolute;z-index:-1;pointer-events:none;bottom:-3px;left:50%;width:min(590px,100%);height:110px;transform:translateX(-50%);border-radius:50%;border:1px solid #a56a2628;background:repeating-radial-gradient(ellipse at center,transparent 0 23px,#a56a2617 24px 25px,transparent 26px 46px);box-shadow:0 0 50px #b26b120b}.die-wrap{width:110px;position:relative;flex-shrink:0}.die-wrap svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 13px 9px #0008)}.die-value{font-size:15px;line-height:1;color:#c8ac79;min-height:18px;margin-top:-7px;font-variant-numeric:lining-nums tabular-nums}.die-pair{display:flex;width:100%;gap:0}.die-pair svg{width:50%}.stage.many{gap:8px}.stage.many .die-wrap{width:86px}.stage.percentile .die-wrap{width:155px}.stage.percentile.many .die-wrap{width:115px}.dice-hint{font:10px/1.7 var(--sans);letter-spacing:.7px;color:var(--muted);margin:8px 0 13px;min-height:17px}.btn-wrap{filter:drop-shadow(0 10px 24px #8e181920)}.roll-button{position:relative;display:inline-flex;gap:23px;align-items:center;justify-content:center;width:360px;max-width:100%;padding:14px 20px;border:0;font:600 23px var(--serif);letter-spacing:7px;text-transform:uppercase;background:linear-gradient(#f8d985,#bf8533);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);transition:filter .2s,transform .2s}.roll-button:before{content:'';position:absolute;inset:1.5px;background:linear-gradient(#9d282b,#691416 60%,#4a0c0f);clip-path:inherit;box-shadow:inset 0 2px 0 #ffc5a133}.roll-button>*{position:relative}.roll-button svg{width:25px;height:25px;fill:none;stroke:var(--cream);stroke-width:1.3;stroke-linejoin:round}.roll-button svg circle{fill:var(--cream);stroke:none}.roll-button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-2px)}.roll-button:disabled{opacity:.5}.btn-wrap:has(:focus-visible){outline:2px solid var(--bright);outline-offset:6px}.panel{display:grid;grid-template-columns:39% 1fr;gap:30px;align-items:center;text-align:left;margin-top:22px;padding:27px 34px;border-color:#b5873e;animation:reveal .4s ease-out}.panel:before{border-color:#9b733849}.score{text-align:center;border-right:1px solid #af823c70;padding-right:28px}.num{font-family:'Instrument Serif',Georgia,serif;font-size:96px;line-height:.94;background:linear-gradient(#fff4d3,#ddb264 75%,#9f6c25);color:transparent;background-clip:text}.label{font-size:21px;color:var(--bright);margin-top:10px;line-height:1.15}.verdict{font-size:23px;line-height:1.3;margin:0}.meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;border-top:1px solid #98702c42;margin-top:18px;padding-top:14px;font-size:21px;font-variant-numeric:lining-nums tabular-nums}.prob{color:var(--muted);font-size:17px;overflow-wrap:anywhere}.actions{display:flex;gap:26px;align-items:center;margin-top:20px}.actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:22px;border:1px solid #76562f66;border-radius:14px;background:linear-gradient(#38241622,#110b0722);padding:12px;color:var(--cream);font:11px var(--sans);letter-spacing:4px;text-transform:uppercase}.actions button:hover{border-color:var(--gold)}.actions button>span:first-child{color:var(--bright);font:29px/1 var(--serif)}.history{margin-top:25px}.history h2{margin:0 0 16px;color:#bfaf90}.history h2:before,.history h2:after{flex:1;max-width:90px}.history-list{display:flex;gap:10px;overflow:auto;padding:2px 2px 9px;scrollbar-width:thin;scrollbar-color:#6b4c2a transparent}.history-list button{flex:0 0 calc((100% - 40px)/5);min-width:75px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;font-size:32px}.history-list small{font-size:17px;color:var(--muted)}.history-list button[aria-current=true] small{color:#dfc59a}.rules{margin:25px auto 0;color:var(--muted);max-width:700px;font-size:17px;line-height:1.5}.rules summary{cursor:pointer;width:fit-content;margin:auto;font:10px var(--sans);letter-spacing:1.8px;padding:8px}.rules div{text-align:left;padding:5px 15px}.rules p{margin:10px 0}.rules strong{color:#d2bc93;font-weight:600}footer{display:flex;justify-content:center;gap:13px;align-items:center;margin-top:26px;color:#725e41;font:9px var(--sans);letter-spacing:1px}footer>span:first-child{font:17px 'Instrument Serif',Georgia,serif}.edge{position:fixed;top:90px;bottom:50px;width:1px;background:linear-gradient(transparent,#7e5a2a60 25%,#7e5a2a60 80%,transparent);pointer-events:none}.edge-left{left:4.2%}.edge-right{right:4.2%}.edge span{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:65px;line-height:1;color:#89612b80;background:#100a06;padding:8px 0}.edge span:before,.edge span:after{content:'◆';display:block;font-size:9px;text-align:center;margin:9px 0}[hidden]{display:none!important}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.edge{display:none}}
.options button[aria-pressed=true],.history-list button[aria-current=true]{background:linear-gradient(#f6d98f,#b87e2d);isolation:isolate}
.options button[aria-pressed=true]:before,.history-list button[aria-current=true]:before{content:'';position:absolute;inset:1.5px;background:linear-gradient(#9d292b,#631215 65%,#400b0e);clip-path:inherit;z-index:-1}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


.brand h1.long-title{font-size:140px}.tabletop{padding-top:16px}
.result-placeholder{display:none}
#historyDialog{width:min(520px,calc(100% - 28px));padding:38px 20px 22px;border:1px solid var(--gold);border-radius:16px;color:var(--cream);background:#170f09;max-height:65svh;overflow:auto}
#historyDialog::backdrop{background:#080503bb;backdrop-filter:blur(5px)}
#historyDialog .history{margin:0}#closeHistory{position:absolute;right:10px;top:3px;width:36px;height:36px;border:0;background:none;color:var(--gold);font:28px var(--serif)}
@media(max-width:700px){
  body{min-height:100svh}
  main{width:100%;height:100svh;min-height:480px;padding:calc(8px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-rows:76px 168px minmax(70px,1fr) 148px 34px 22px;gap:6px}
  .brand{grid-row:1;padding:0;align-self:center}.brand h1{font-size:66px;line-height:.85;letter-spacing:-3px}.brand h1.long-title{font-size:58px;letter-spacing:-2px}.brand p{font-size:8px;letter-spacing:3px;margin:8px 0 0;gap:10px;line-height:1}.brand p:before,.brand p:after{width:25px}.brand-orbit{width:134px;height:134px;top:-37px}
  .lang{top:12px;right:14px;gap:6px;font-size:9px;letter-spacing:1.5px}.lang button{padding:7px 2px}
  .controls{grid-row:2;padding:0;border:0;background:none;box-shadow:none}.controls:before{display:none}
  .tabletop{grid-row:3;padding:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 16px 46px;gap:4px}
  .stage,.stage.many{container-type:size;min-height:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--dice-columns),minmax(0,1fr));grid-template-rows:repeat(var(--dice-rows),minmax(0,1fr));gap:3px;align-items:center;justify-items:center;overflow:hidden}
  .stage:before{width:95%;height:70%;bottom:0}
  .stage .die-wrap,.stage.many .die-wrap{width:min(100%,calc((100cqh / var(--dice-rows) - 17px) * 116 / 124));max-width:112px}
  .stage.percentile .die-wrap,.stage.percentile.many .die-wrap{width:min(100%,calc((100cqh / var(--dice-rows) - 17px) * 232 / 124));max-width:155px}
  .die-value{font-size:13px;min-height:14px;margin-top:-3px}.dice-hint{font:8px/16px var(--sans);letter-spacing:.1px;margin:0;white-space:nowrap}.roll-button{width:100%;height:46px;font-size:21px;letter-spacing:5px;padding:6px;gap:16px}.roll-button svg{width:23px;height:23px}.btn-wrap{min-width:0}
  .result-slot{grid-row:4;position:relative;min-height:0}.result-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;border:1px solid #77532544;border-radius:14px;color:var(--muted);font-size:19px}
  .panel{height:100%;margin:0;padding:14px;grid-template-columns:85px minmax(0,1fr);gap:14px;border-radius:14px;text-align:left;animation:none}.score{padding:0 12px 0 0;border-right:1px solid #af823c70;min-width:0}.num{font-size:54px;line-height:1}.label{font-size:14px;line-height:1.05;margin-top:6px}.verdict{font-size:17px;line-height:1.15}.meta{margin-top:8px;padding-top:7px;font-size:14px;line-height:1.15;gap:4px;display:flex;flex-direction:column;align-items:flex-start}.prob{font-size:12px;line-height:1.1}.result-detail{min-width:0}
  .actions{grid-row:5;margin:0;gap:10px}.actions button{height:34px;padding:4px;gap:9px;font-size:9px;letter-spacing:2px;border-radius:9px}.actions button>span:first-child{font-size:23px}
  #historyHome,footer{display:none}.history-list{gap:8px}.history-list button{flex-basis:calc((100% - 32px)/5);min-width:58px;font-size:28px}.history h2{font-size:9px;letter-spacing:2px;gap:12px}.history-list small{font-size:15px}
  .rules{grid-row:6;align-self:center;margin:0;font-size:16px}.rules summary{font:9px var(--sans);letter-spacing:1px;padding:5px}.rules[open]{position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:10;max-height:70svh;overflow:auto;padding:12px;border:1px solid var(--gold);border-radius:14px;background:#170f09;box-shadow:0 -20px 90px #000a}.rules[open] summary{padding:10px;position:sticky;top:-12px;background:#170f09;color:var(--cream)}.rules div{padding:0 6px}.rules p{margin:10px 0}
}
@media(max-width:700px) and (max-height:650px){
  main{grid-template-rows:52px 160px minmax(66px,1fr) 104px 30px 20px;gap:4px}
  .brand h1{font-size:54px}.brand h1.long-title{font-size:48px}.brand p{margin-top:6px;font-size:7px}.panel{padding:11px;gap:10px}.num{font-size:48px}.verdict{display:none}.meta{border:0;padding:0;margin:0;font-size:15px;gap:7px}.prob{font-size:12px}.actions button{height:30px}.rules summary{font-size:8px}.dice-hint{font-size:7px}
}
@media(max-width:700px){main{grid-template-rows:76px 168px minmax(70px,1fr) 148px 34px 22px}}
@media(max-width:700px) and (max-height:650px){main{grid-template-rows:52px 160px minmax(66px,1fr) 104px 30px 20px}.brand h1{font-size:48px}.brand h1.long-title{font-size:44px}}
@media(max-width:700px){.label{font-size:13px;overflow-wrap:anywhere}.num.large-total{font-size:38px}}
@media(max-width:700px) and (max-height:650px){.num{font-size:44px}.label{font-size:12px}.prob{font-size:11px}}
@media(max-width:700px){
  .panel{grid-template-columns:70px minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 12px}
  .score{display:contents}.num{grid-column:1;grid-row:1 / 3;text-align:center}.label{grid-column:2;grid-row:1;margin:0;font-size:16px;line-height:1.1;overflow-wrap:normal}.result-detail{grid-column:2;grid-row:2}.verdict{font-size:16px}
}
@media(max-width:700px) and (max-height:650px){.panel{grid-template-columns:66px minmax(0,1fr);gap:5px 10px}.label{font-size:15px}}

@media(max-width:700px){
.controls{display:flex;flex-direction:column;gap:8px}.control-row{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:0;margin:0}.control-row+.control-row{border:0;padding:0;margin:0}.control-row h2{flex:none;justify-content:center;font:9px/12px var(--sans);letter-spacing:2px;color:#beac89}.control-row h2:before,.control-row h2:after{display:none}.options{gap:5px;flex:none;display:grid}.options button{height:44px;padding:0 2px;font-size:21px;border-radius:9px;touch-action:manipulation}.options button:hover{transform:none}#counts{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}#counts button{height:40px}#types{grid-template-columns:repeat(7,minmax(0,1fr))}#types button{font-size:19px}#types button:last-child{font-size:17px}
}
@media(max-width:700px) and (max-height:650px){.controls{gap:6px}#counts button{height:38px}.control-row{gap:4px}.control-row h2{font-size:8px}#types button{font-size:18px}#types button:last-child{font-size:16px}}
#counts button{display:grid;place-items:center;font-variant-numeric:lining-nums tabular-nums;line-height:1}
/* Split wrapped dice evenly, and center a shorter final row on half-cell tracks. */
@media(min-width:701px){
  .stage,.stage.many{--die-size:110px;--dice-gap:20px;display:grid;grid-template-columns:repeat(calc(var(--dice-columns) * 2),calc((var(--die-size) - var(--dice-gap)) / 2));grid-template-rows:repeat(var(--dice-rows),auto);gap:4px var(--dice-gap);justify-content:center;justify-items:center}
  .stage.many{--die-size:86px;--dice-gap:8px}.stage.percentile{--die-size:155px}.stage.percentile.many{--die-size:115px}
}
@media(max-width:700px){.stage,.stage.many{grid-template-columns:repeat(calc(var(--dice-columns) * 2),minmax(0,1fr))}}
/* Absolute endpoints have distinct captions and a steady glow, without moving the panel. */
.panel[data-outcome="minimum"]{border-color:#dc7370;background:radial-gradient(ellipse at 15% 50%,#9b252538,transparent 75%),linear-gradient(135deg,#2c1210,#170b08);box-shadow:0 0 28px #b52e292c,inset 0 0 22px #b52e2912}
.panel[data-outcome="minimum"]:before{border-color:#dd736347}
.panel[data-outcome="minimum"] .num{background-image:linear-gradient(#fff0df,#f39888 60%,#d5504c);filter:drop-shadow(0 0 14px #d6413455)}
.panel[data-outcome="minimum"] .label{color:#ffaaa0}
.panel[data-outcome="maximum"]{border-color:#f5d085;background:radial-gradient(ellipse at 15% 50%,#c38b2838,transparent 75%),linear-gradient(135deg,#302310,#181006);box-shadow:0 0 32px #e6b24533,inset 0 0 22px #ffd58214}
.panel[data-outcome="maximum"]:before{border-color:#f4d48466}
.panel[data-outcome="maximum"] .num{background-image:linear-gradient(#fffde5,#ffe29a 60%,#e8b34e);filter:drop-shadow(0 0 16px #ffc65366)}
.panel[data-outcome="maximum"] .label{color:#ffe3a0}
@media(min-width:701px){.actions{justify-content:center}.actions #historyToggle{flex:0 0 auto;padding:12px 28px}}