@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Libre+Baskerville:wght@400;700&display=swap');
:root{--bg:#09090d;--panel:#15131b;--panel2:#1d1725;--gold:#c7a347;--gold2:#e2c66f;--purple:#7a43b6;--ivory:#f4efe5;--muted:#aaa1af;--line:rgba(199,163,71,.28)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% 0,#251332,transparent 30%),linear-gradient(180deg,#0b0a10,#09090d 55%);color:var(--ivory);font-family:'Libre Baskerville',Georgia,serif}a{color:inherit}button,input,select{font:inherit}
.tool-header{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:0 clamp(20px,5vw,70px);border-bottom:1px solid var(--line);background:rgba(6,6,9,.92)}.brand{font:700 .92rem Cinzel,serif;color:var(--gold2);letter-spacing:.18em;text-decoration:none}.back-link{color:#d6ccd9;font-size:.78rem;text-decoration:none}.back-link:hover{color:var(--gold2)}
main{max-width:1180px;margin:auto;padding:54px 22px 90px}.hero{padding:48px clamp(24px,6vw,70px);border:1px solid var(--line);background:linear-gradient(120deg,rgba(28,19,38,.96),rgba(11,10,15,.94));box-shadow:0 25px 70px rgba(0,0,0,.28)}.kicker{margin:0 0 10px;font:600 .67rem Cinzel,serif;color:#b890d8;letter-spacing:.2em}.hero h1{margin:0;font:700 clamp(3rem,8vw,6.4rem) Cinzel,serif;line-height:.95;color:var(--gold2)}.subtitle{margin:.3rem 0 1.15rem;font:600 clamp(1.1rem,2.5vw,1.7rem) Cinzel,serif;color:#fff}.intro{max-width:760px;color:#d2c9d4;line-height:1.7}
.method-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.tab{border:1px solid var(--line);background:#121017;color:#d8cfe0;padding:15px 12px;cursor:pointer;font:700 .72rem Cinzel,serif}.tab:hover,.tab.active{color:#111;background:linear-gradient(#e0c568,#b88e34);border-color:var(--gold2)}
.method-panel{display:none;padding:clamp(24px,4vw,42px);border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));box-shadow:0 20px 50px rgba(0,0,0,.25)}.method-panel.active{display:block}.method-panel p{color:#cfc5d2;line-height:1.65}.method-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.method-heading h2{margin:.1em 0;font:700 clamp(1.9rem,4vw,3rem) Cinzel,serif;color:var(--gold2)}.method-badge{padding:8px 11px;border:1px solid rgba(199,163,71,.4);color:var(--gold2);background:rgba(199,163,71,.08);font:600 .62rem Cinzel,serif}
.score-bank{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.score-chip{min-width:62px;padding:12px 14px;text-align:center;border:1px solid var(--gold);background:#0c0b10;color:var(--gold2);font:700 1.1rem Cinzel,serif}.score-chip.used{opacity:.26}
.ability-grid,.point-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 26px}.ability-card,.point-card{padding:18px;border:1px solid rgba(255,255,255,.08);background:#0f0d13}.ability-card label,.point-card label{display:block;color:var(--gold2);font:700 .72rem Cinzel,serif;margin-bottom:10px}.ability-card select{width:100%;padding:10px;border:1px solid var(--line);background:#09080c;color:var(--ivory)}.score-display{font:700 2.25rem Cinzel,serif;color:#fff}.modifier{display:inline-block;margin-left:8px;color:#b890d8;font:700 1rem Cinzel,serif}
.random-controls,.panel-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border:1px solid var(--gold);cursor:pointer;font:700 .68rem Cinzel,serif}.button.primary{background:linear-gradient(#d7b85b,#aa7d27);color:#0c0b0d}.button.secondary{background:transparent;color:var(--gold2)}
.roll-results{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:22px 0}.roll-card{padding:14px 8px;text-align:center;background:#0c0b10;border:1px solid var(--line)}.roll-card .dice{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;color:#a99caf;font-size:.72rem}.roll-card .dice .dropped{text-decoration:line-through;opacity:.35}.roll-total{display:block;margin-top:8px;color:var(--gold2);font:700 1.7rem Cinzel,serif}
.point-table-wrap{overflow:auto;margin:20px 0}.point-table{width:100%;border-collapse:collapse;min-width:420px;background:#0d0c11}.point-table th,.point-table td{padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.07);text-align:center}.point-table th{color:var(--gold2);font:700 .7rem Cinzel,serif}
.point-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.point-step{width:38px;height:38px;padding:0;border:1px solid var(--line);background:#18131f;color:var(--gold2);cursor:pointer;font-size:1.2rem}.point-step:disabled{opacity:.25;cursor:not-allowed}.point-cost{display:block;margin-top:8px;color:#94889a;font-size:.72rem}.point-message{min-height:24px;color:#b890d8;font-size:.8rem}
.reference{margin-top:24px;padding:30px;border:1px solid var(--line);background:#111016}.reference-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.reference article{padding:15px 12px;border:1px solid rgba(255,255,255,.07);background:#0c0b10}.reference strong{display:block;color:var(--gold2);font:700 1rem Cinzel,serif}.reference span{display:block;margin:4px 0;color:#fff;font-size:.8rem}.reference small{color:#978e9a;line-height:1.4}
footer{padding:30px 20px;border-top:1px solid var(--line);text-align:center;color:#8f8693;font-size:.76rem}footer a{color:var(--gold2)}
.copy-flash{position:fixed;right:20px;bottom:20px;padding:12px 16px;border:1px solid var(--gold);background:#17121d;color:var(--gold2);box-shadow:0 15px 40px rgba(0,0,0,.45)}
@media(max-width:900px){.ability-grid,.point-grid{grid-template-columns:repeat(2,1fr)}.roll-results{grid-template-columns:repeat(3,1fr)}.reference-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.tool-header{align-items:flex-start;flex-direction:column;padding-top:14px;padding-bottom:14px}.method-tabs{grid-template-columns:1fr}.ability-grid,.point-grid{grid-template-columns:1fr}.roll-results{grid-template-columns:repeat(2,1fr)}.reference-grid{grid-template-columns:repeat(2,1fr)}.method-heading{flex-direction:column}}

/* Roll the Bones v2 */
:root{--array:#d4aa49;--three:#cb6c47;--four:#7f62d1;--point:#42a982;--str:#c85a4f;--dex:#d59536;--con:#6c9b54;--int:#4c8fc7;--wis:#8467bd;--cha:#bd568e}
body{background:
  radial-gradient(circle at 85% 5%,rgba(91,45,145,.26),transparent 30%),
  radial-gradient(circle at 5% 40%,rgba(199,163,71,.08),transparent 28%),
  #09090d}
.back-link{border:1px solid var(--line);padding:8px 13px}
main{padding-top:32px}
.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;overflow:hidden;position:relative;padding:clamp(34px,6vw,72px)}
.hero:before{content:"";position:absolute;width:340px;height:340px;right:-90px;top:-170px;border:1px solid rgba(199,163,71,.18);transform:rotate(45deg)}
.hero-dice{position:relative;z-index:1;width:150px;height:150px;display:grid;place-items:center;clip-path:polygon(50% 0,95% 24%,100% 72%,66% 100%,17% 88%,0 42%);background:linear-gradient(145deg,#d7bc69,#7f5520);color:#100d12;filter:drop-shadow(0 18px 25px rgba(0,0,0,.45))}
.hero-dice:before{content:"";position:absolute;inset:7px;clip-path:inherit;background:linear-gradient(145deg,#201726,#0c0a0e);z-index:-1}
.hero-dice span{font:700 3rem Cinzel,serif;color:var(--gold2);margin-top:18px}
.hero-dice small{position:absolute;bottom:27px;color:#b7a7bc;font:600 .48rem Cinzel,serif;letter-spacing:.12em}
.method-tabs{grid-template-columns:repeat(4,1fr);gap:12px}
.tab{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;background:#111017;border-color:rgba(255,255,255,.1);transition:.2s}
.tab>span:last-child{display:flex;flex-direction:column;gap:2px}.tab strong{font:700 .7rem Cinzel,serif}.tab small{font:400 .65rem 'Libre Baskerville',serif;color:#9b92a0}.tab-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:1px solid currentColor;border-radius:50%;font:700 .78rem Cinzel,serif}
.tab-array{color:var(--array)}.tab-3d6{color:var(--three)}.tab-4d6{color:#ae99ee}.tab-point{color:#72c9a8}
.tab:hover,.tab.active{color:#0d0b0f;transform:translateY(-2px)}
.tab.active small,.tab:hover small{color:#332b34}
.tab-array.active,.tab-array:hover{background:linear-gradient(135deg,#e4c875,#b78930)}
.tab-3d6.active,.tab-3d6:hover{background:linear-gradient(135deg,#e18a65,#9f452f)}
.tab-4d6.active,.tab-4d6:hover{background:linear-gradient(135deg,#ad96ee,#6548ad)}
.tab-point.active,.tab-point:hover{background:linear-gradient(135deg,#76d0ae,#318465)}
.method-panel{position:relative;overflow:hidden;border-top-width:4px}
.method-panel:after{content:"";position:absolute;width:260px;height:260px;right:-130px;bottom:-150px;border:1px solid currentColor;border-radius:50%;opacity:.08;pointer-events:none}
.panel-array{border-top-color:var(--array);color:var(--array)}.panel-3d6{border-top-color:var(--three);color:var(--three)}.panel-4d6{border-top-color:var(--four);color:#ae99ee}.panel-point{border-top-color:var(--point);color:#72c9a8}
.method-panel>p{max-width:850px}.method-heading h2{color:currentColor}.method-badge{color:currentColor;border-color:currentColor;background:rgba(255,255,255,.035)}
.score-chip{display:flex;align-items:baseline;justify-content:center;gap:6px}.score-chip small{font-size:.65rem;color:#b59ccc}
.ability-card,.point-card{position:relative;overflow:hidden;border-left:4px solid var(--ability-color,#777);transition:transform .18s,border-color .18s}.ability-card:hover,.point-card:hover{transform:translateY(-2px);border-color:var(--ability-color,#aaa)}
.ability-card label,.point-card label{display:flex;align-items:baseline;gap:8px;color:var(--ability-color,var(--gold2))}
.ability-card label b,.point-card label b{font-size:1rem}.ability-card label span,.point-card label span{color:#d8cfdc;font:400 .7rem 'Libre Baskerville',serif}
.ability-str{--ability-color:var(--str)}.ability-dex{--ability-color:var(--dex)}.ability-con{--ability-color:var(--con)}.ability-int{--ability-color:var(--int)}.ability-wis{--ability-color:var(--wis)}.ability-cha{--ability-color:var(--cha)}
.dice span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.22);background:#1b1720;color:#fff;font:700 .8rem Cinzel,serif;transform:rotate(2deg)}
.dice span:nth-child(even){transform:rotate(-3deg)}.dice .dropped{border-color:#b44747;color:#db7777;background:#2a1418;text-decoration:none!important;position:relative}
.dice .dropped:after{content:"";position:absolute;width:34px;height:2px;background:#db5757;transform:rotate(-35deg)}
.roll-total{display:flex;align-items:baseline;justify-content:center;gap:6px}.roll-total small{color:#a990bf;font-size:.62rem}
.button{transition:.18s}.button:hover{transform:translateY(-1px);filter:brightness(1.1)}.button:focus-visible,.tab:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.point-settings{margin:22px 0;border:1px solid rgba(114,201,168,.4);background:#0d1111}
.point-settings summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px;cursor:pointer;color:#8bdbbc;font:700 .75rem Cinzel,serif;list-style:none}.point-settings summary::-webkit-details-marker{display:none}.point-settings summary:after{content:"+";font-size:1.3rem}.point-settings[open] summary:after{content:"−"}.point-settings summary small{margin-left:auto;color:#8c9a95;font:400 .7rem 'Libre Baskerville',serif}
.settings-body{padding:20px;border-top:1px solid rgba(114,201,168,.25)}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.settings-grid label,.cost-scale label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#15181a;border:1px solid rgba(255,255,255,.08);color:#cfc7d2;font-size:.72rem}
.settings-grid label{flex-direction:column;align-items:flex-start}.settings-grid input{width:100%}.settings-body input{padding:9px;border:1px solid rgba(114,201,168,.42);background:#090b0c;color:#fff}
.cost-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:24px 0 10px}.cost-heading strong{display:block;color:#8bdbbc;font:700 .78rem Cinzel,serif}.cost-heading small{color:#918895}.text-button{border:0;background:none;color:#cdb568;text-decoration:underline;cursor:pointer}
.cost-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:260px;overflow:auto;padding-right:4px}.cost-scale input{width:62px}
.settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.settings-error{color:#ee8c81!important;margin:10px 0 0!important;min-height:1.4em;font-size:.75rem}
.point-summary{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 10px}.point-summary span{padding:8px 12px;background:rgba(114,201,168,.08);border:1px solid rgba(114,201,168,.25);color:#aeb8b4;font-size:.72rem}.point-summary strong{color:#89d5b7;margin-left:4px}
.shared-rules{padding:13px 15px;margin-top:16px;border-left:4px solid var(--point);background:rgba(66,169,130,.12);color:#c8ded5;font-size:.78rem}.shared-rules strong{color:#8bdbbc}.over-budget{color:#ef776c!important}
.reference{padding:clamp(24px,4vw,42px);background:linear-gradient(145deg,#17131c,#0d0c11)}
.reference-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:22px}.reference-heading h2{margin:0;color:var(--gold2);font:700 clamp(1.8rem,4vw,3rem) Cinzel,serif}.reference-heading>p{max-width:510px;color:#a9a0ad;line-height:1.55}
.reference-grid{grid-template-columns:repeat(3,1fr);gap:12px}.reference article{min-height:190px;padding:20px;border-top:4px solid var(--ability-color);position:relative;overflow:hidden}.reference article:after{content:"";position:absolute;width:100px;height:100px;border:1px solid var(--ability-color);border-radius:50%;right:-50px;top:-55px;opacity:.18}.reference strong{font-size:1.2rem;color:var(--ability-color)}.reference span{font-size:.95rem}.reference small{display:block;min-height:42px}.reference article p{margin:15px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);color:#e0d8e3;font-style:italic;font-size:.78rem;line-height:1.55}
.reference article{min-height:290px}.score-example{margin-top:14px;padding:12px 13px;border-left:3px solid;background:rgba(255,255,255,.025)}.score-example b{font:700 .62rem Cinzel,serif;letter-spacing:.08em}.score-example p{margin:6px 0 0!important;padding:0!important;border:0!important;color:#d8d1dc!important;font-style:normal!important;font-size:.74rem!important;line-height:1.55!important}.example-high{border-color:#45d67a;box-shadow:inset 12px 0 22px rgba(69,214,122,.05)}.example-high b{color:#78ef9f}.example-low{border-color:#e05353;box-shadow:inset 12px 0 22px rgba(224,83,83,.045)}.example-low b{color:#ff8585}
.ref-str{--ability-color:var(--str)}.ref-dex{--ability-color:var(--dex)}.ref-con{--ability-color:var(--con)}.ref-int{--ability-color:var(--int)}.ref-wis{--ability-color:var(--wis)}.ref-cha{--ability-color:var(--cha)}
.copy-flash{z-index:100;border-color:#72c9a8;color:#a2e0c8}
@media(max-width:980px){.method-tabs{grid-template-columns:repeat(2,1fr)}.cost-scale{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.hero{grid-template-columns:1fr}.hero-dice{display:none}.reference-heading{display:block}.reference-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.cost-scale{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.method-tabs{grid-template-columns:1fr}.cost-scale{grid-template-columns:1fr}.point-settings summary small{display:none}}

/* Multiple ability groups and score glows */
.group-controls{align-items:flex-end}.group-controls label{display:flex;flex-direction:column;gap:6px;color:#cfc5d2;font-size:.7rem}.group-controls select{min-width:145px;padding:10px;border:1px solid rgba(174,153,238,.55);background:#0b0910;color:#fff}
#results-4d6{display:block}.roll-group{margin:14px 0;padding:15px;border:1px solid rgba(174,153,238,.25);background:#0b0910;transition:.2s}.roll-group.selected{border-color:#ae99ee;box-shadow:0 0 22px rgba(127,98,209,.2)}.roll-group>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.roll-group>header>div{display:flex;flex-direction:column}.roll-group>header strong{color:#c8b8f3;font:700 .76rem Cinzel,serif}.roll-group>header small{color:#938a99}.choose-group{padding:8px 12px}.group-rolls{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.score-high{border-color:#45d67a!important;box-shadow:0 0 10px rgba(69,214,122,.75),inset 0 0 18px rgba(69,214,122,.12)!important}.score-high .roll-total{color:#78ef9f}.score-low{border-color:#e05353!important;box-shadow:0 0 10px rgba(224,83,83,.68),inset 0 0 18px rgba(224,83,83,.1)!important}.score-low .roll-total{color:#ff8585}
.roll-group.highest-group{border-color:#e5bd54;box-shadow:0 0 22px rgba(229,189,84,.58),inset 0 0 34px rgba(229,189,84,.08);background:linear-gradient(135deg,rgba(229,189,84,.1),#0b0910 38%)}.roll-group.highest-group>header strong{color:#f1d477}.roll-group.highest-group>header strong em{display:inline-block;margin-left:9px;padding:3px 7px;border:1px solid rgba(229,189,84,.65);background:rgba(229,189,84,.14);color:#f3d981;font:700 .5rem Cinzel,serif;letter-spacing:.08em;font-style:normal;vertical-align:middle}.roll-group.highest-group>header small{color:#d9bd72}
@media(max-width:900px){.group-rolls{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.group-controls{align-items:stretch}.group-controls label,.group-controls select{width:100%}.group-rolls{grid-template-columns:repeat(2,1fr)}.roll-group>header{align-items:flex-start;flex-direction:column}}