@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Outfit:wght@500;600;700;800;900&display=swap);
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf1fa;background:#0b1020;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -12%,#263652 0,#111b2e 32%,#0b1020 75%);min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}[hidden]{display:none!important}.app{max-width:1200px;margin:auto;min-height:100vh;padding:0 24px}.top{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1b}.brand{text-decoration:none;color:#fff;font-size:16px;letter-spacing:.08em;font-weight:800}.brand b{color:#f3bc72}.brand-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#f3bc72;color:#172033;margin-right:10px}.offline{color:#99adbe;font-size:12px}.offline:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#65c89b;margin-right:7px}.intro{text-align:center;padding:45px 0 29px}.eyebrow{color:#f3bc72;font-size:11px;font-weight:800;letter-spacing:.18em;margin:0 0 10px}.intro h1{font-size:clamp(32px,5vw,53px);letter-spacing:-.045em;line-height:1.05;margin:0}.intro>p:last-child{color:#9eafc2;margin:13px 0 0;font-size:16px}.tabs{max-width:440px;margin:0 auto 28px;padding:5px;border:1px solid #354157;border-radius:15px;background:#111a2b;display:grid;grid-template-columns:1fr 1fr;gap:5px}.tabs button{border:0;background:transparent;color:#a9b7c8;border-radius:11px;padding:12px 14px;font-weight:750}.tabs button.active{background:#f3bc72;color:#18202c;box-shadow:0 2px 12px #0004}.columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.stack{display:flex;flex-direction:column;gap:20px}.card{background:#172236;border:1px solid #324158;border-radius:19px;padding:24px;box-shadow:0 12px 28px #0002}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}.card h2{margin:0;font-size:22px;letter-spacing:-.025em}.count{font-size:12px;color:#c7d1e0;background:#26354b;border:1px solid #3b4a60;border-radius:99px;padding:7px 10px;white-space:nowrap}.field-label{color:#b7c4d4;font-weight:700;font-size:13px;margin:18px 0 10px}.colors{display:flex;flex-wrap:wrap;gap:8px}.color-choice,.player-choice,.loaded-die,.face{background:var(--chip);color:var(--ink)}.color-choice{border:2px solid transparent;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:800;min-height:39px}.color-choice[aria-pressed=true]{outline:2px solid #fff;outline-offset:2px}.die-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.die-type{border:1px solid #4b5b70;background:#26354a;color:#f1f5fb;border-radius:10px;padding:13px 4px;font-weight:800}.die-type:hover,.secondary:hover,.preset-button:hover{border-color:#f3bc72}.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-button{border:1px solid #425269;background:#233149;color:#e6edf7;border-radius:10px;min-height:46px;padding:10px;text-align:left;font-weight:700}.save-form{display:flex;gap:8px;margin:15px 0 0}.save-form input{width:100%;min-width:0;background:#101b2e;border:1px solid #44526a;border-radius:10px;padding:11px;color:#fff}.save-form .secondary{white-space:nowrap}.secondary{border:1px solid #5c6980;background:#2b3b53;color:#fff;border-radius:10px;padding:11px 14px;font-weight:800}.preset-row{display:flex;gap:8px;align-items:center;margin-top:8px}.preset-row .preset-button{flex:1}.text-button{border:0;background:transparent;color:#f0bb79;font-size:13px;font-weight:750;padding:7px}.text-button:disabled{opacity:.4}.loaded-dice{min-height:100px;padding:15px;border:1px dashed #53627a;border-radius:13px;background:#111b2d;display:flex;gap:8px;flex-wrap:wrap;align-content:center}.loaded-dice .muted{margin:auto}.loaded-die{border:1px solid #ffffff66;border-radius:8px;padding:10px;font-weight:800;min-width:62px}.tray-tools{display:flex;align-items:center;justify-content:space-between;margin:18px 0}.modifier{display:flex;align-items:center;gap:9px;color:#c3cfdf;font-size:13px}.modifier button{width:31px;height:31px;border:1px solid #54647a;background:#2a3b54;color:#fff;border-radius:8px;font-size:19px}.modifier strong{min-width:26px;text-align:center;color:#fff}.primary{border:0;border-radius:11px;background:#f3bc72;color:#192233;padding:13px 18px;font-weight:850}.primary:hover:not(:disabled){background:#ffd191}.roll{width:100%;display:flex;justify-content:space-between;font-size:17px;padding:16px 19px}.result{margin-top:17px;min-height:82px;border-radius:13px;background:#101a2b;border:1px solid #35445b;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#9fb0c6;padding:13px;text-align:center}.result-faces{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.face{display:grid;place-items:center;border-radius:9px;min-width:43px;min-height:43px;padding:6px;font-size:16px;font-weight:900}.total{font-size:23px;color:#fff;margin-top:8px}.history{max-height:290px;overflow:auto}.history-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:11px 0;border-top:1px solid #ffffff16;align-items:center;font-size:13px}.history-row strong{overflow-wrap:anywhere}.history-row span{color:#f3bc72;font-weight:700}.history-row small,.muted{color:#9aacbf}.first-layout{max-width:900px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.players{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:23px 0}.player-choice{min-height:54px;border:3px solid transparent;border-radius:11px;font-weight:850;opacity:.55}.player-choice[aria-pressed=true]{opacity:1;border-color:#fff;box-shadow:0 0 0 2px #f3bc72}.first-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.first-actions button{min-height:52px}.reveal-card{min-height:400px}.first-result{min-height:315px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.placeholder-symbol{font-size:70px;color:#485e77}.first-result h3{font-size:26px;letter-spacing:-.03em;margin:14px 0}.winner-badge{display:grid;place-items:center;width:110px;height:110px;border-radius:25px;background:var(--chip);color:var(--ink);font-size:60px}.order-list{width:100%;padding-left:36px;text-align:left}.order-list li{padding:7px 10px;margin:5px 0;border-left:5px solid var(--chip);background:#233149;border-radius:5px;font-weight:700}footer{text-align:center;color:#71849b;font-size:12px;padding:35px 0 25px}@media(max-width:760px){.columns,.first-layout{grid-template-columns:1fr}.app{padding:0 14px}.top{height:62px}.intro{padding:31px 0 24px}.card{padding:18px}.reveal-card{min-height:230px}.first-result{min-height:170px}}@media(max-width:380px){.die-types{grid-template-columns:repeat(4,1fr)}.presets{grid-template-columns:1fr 1fr}.players{grid-template-columns:repeat(2,1fr)}.save-form{flex-direction:column}.history-row{grid-template-columns:1fr auto}.history-row small{grid-column:2}}
:root{
  --font-body:Inter,system-ui,sans-serif;--font-display:Outfit,system-ui,sans-serif;
  --bg:#0a0c0f;--bg-raised:#111418;--panel:#161b22;--panel-alt:#1c232d;
  --border:#ffffff20;--border-bright:#ffffff3d;--text:#f0f6fc;--muted:#9ca9b6;
  --accent:#9b8cff;--accent-strong:#7c6bf2;--accent-ink:#fff;--shadow:#0005;
  color-scheme:dark;font-family:var(--font-body);color:var(--text);background:var(--bg)
}
:root[data-theme=light]{
  --bg:#f5f7fb;--bg-raised:#fff;--panel:#fff;--panel-alt:#f0f2f7;
  --border:#20334a24;--border-bright:#20334a50;--text:#172033;--muted:#566477;
  --accent:#6252d3;--accent-strong:#5140c4;--accent-ink:#fff;--shadow:#17203316;
  color-scheme:light
}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]):not([data-theme=light]),:root[data-theme=system]{
  --bg:#f5f7fb;--bg-raised:#fff;--panel:#fff;--panel-alt:#f0f2f7;
  --border:#20334a24;--border-bright:#20334a50;--text:#172033;--muted:#566477;
  --accent:#6252d3;--accent-strong:#5140c4;--accent-ink:#fff;--shadow:#17203316;
  color-scheme:light
}}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.app{max-width:1120px}
.top{border-color:var(--border);gap:12px}
.brand{color:var(--text);font-family:var(--font-display);display:inline-flex;align-items:center;white-space:nowrap}
.brand b{color:var(--accent)}
.brand-icon{background:var(--accent-strong);color:#fff;font-size:18px}
.icon{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.1em;flex:none}
.top-actions{display:flex;align-items:center;gap:15px}
.offline{color:var(--muted)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:7px 11px;background:var(--panel);color:var(--text);border:1px solid var(--border-bright);border-radius:8px;font-size:12px;font-weight:750}
.theme-toggle:hover{border-color:var(--accent)}
.intro h1,.card h2,.first-result h3{font-family:var(--font-display)}
.intro{padding-top:39px}.intro>p:last-child,.muted{color:var(--muted)}
.eyebrow{color:var(--accent);letter-spacing:.11em}
.tabs{background:var(--bg-raised);border-color:var(--border);max-width:460px;border-radius:10px}
.tabs button{color:var(--muted);display:flex;align-items:center;justify-content:center;gap:9px;border-radius:7px;min-height:44px}
.tabs button.active{background:var(--accent-strong);color:#fff;box-shadow:0 2px 8px var(--shadow)}
.tabs .icon{font-size:17px}
.card{background:var(--panel);border-color:var(--border);border-radius:12px;box-shadow:0 6px 18px var(--shadow)}
.card h2{display:flex;align-items:center;gap:10px;font-size:21px}
.heading-icon{color:var(--accent);font-size:19px}
.count{background:var(--panel-alt);border-color:var(--border);color:var(--muted)}
.field-label,.modifier{color:var(--muted)}
.color-choice{border-radius:7px}.color-choice[aria-pressed=true]{outline-color:var(--accent)}
.die-type,.preset-button,.secondary,.modifier button{background:var(--panel-alt);border-color:var(--border-bright);color:var(--text);border-radius:8px}
.die-type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:63px}
.die-type .icon{font-size:24px}
.die-type:hover,.secondary:hover,.preset-button:hover{border-color:var(--accent)}
.save-form input{background:var(--bg-raised);color:var(--text);border-color:var(--border-bright);border-radius:8px}
.save-form input::placeholder{color:var(--muted)}
.text-button{color:var(--accent-strong)}
.loaded-dice,.result{background:var(--bg-raised);border-color:var(--border-bright);border-radius:9px}
.loaded-die{display:inline-flex;align-items:center;gap:7px;border-color:#7778}.loaded-die .icon{font-size:18px}.remove-mark{opacity:.65}
.modifier strong{color:var(--text)}
.primary{background:var(--accent-strong);color:#fff;border-radius:8px}
.primary:hover:not(:disabled){background:var(--accent)}
.roll>span{display:inline-flex;align-items:center;gap:9px}
.result{color:var(--muted)}.total{color:var(--text);font-family:var(--font-display)}
.history-row{border-color:var(--border)}.history-row span{color:var(--accent)}.history-row small{color:var(--muted)}
.player-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:76px}
.player-choice .icon{font-size:25px}.player-choice span{font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.player-choice[aria-pressed=true]{border-color:var(--text);box-shadow:0 0 0 2px var(--accent)}
.first-actions button{display:flex;align-items:center;justify-content:center;gap:8px}
.placeholder-symbol{width:60px;height:60px;color:var(--muted);opacity:.5}
.winner-badge .icon{width:55px;height:55px}.order-list li{background:var(--panel-alt);color:var(--text)}
footer{color:var(--muted)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:500px){.offline{display:none}.top{height:66px}.theme-toggle{min-height:42px}.die-type{min-height:60px}.card{border-radius:10px}.intro{padding-top:29px}}

@media(max-width:760px){.columns{display:flex;flex-direction:column}.columns .stack{display:contents}.columns .stack:first-child .card:first-child{order:1}.tray-card{order:2}.columns .stack:first-child .card:nth-child(2){order:3}.columns .stack:last-child .card:nth-child(2){order:4}}
@media(max-width:500px){.intro{padding-bottom:18px}.intro>p:last-child{font-size:14px}.tabs{margin-bottom:20px}.card-head{margin-bottom:15px}.card{padding:16px}.field-label{margin:15px 0 8px}.loaded-dice{min-height:80px}.result{min-height:65px}}

.loaded-dice.rolling .loaded-die{animation:tumble .12s linear infinite alternate}.rolling-word,.choosing-label{color:var(--accent);font-family:var(--font-display);font-weight:800;animation:pulse .45s ease-in-out infinite alternate}.choosing{transition:background-color .05s ease}.first-result .choosing-label{margin:12px 0 0}@keyframes tumble{from{transform:translate(-2px,2px) rotate(-4deg)}to{transform:translate(2px,-2px) rotate(4deg)}}@keyframes pulse{from{opacity:.55;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}@media(prefers-reduced-motion:reduce){.loaded-dice.rolling .loaded-die,.rolling-word,.choosing-label{animation:none}}