:root { --paper:#10120f; --panel:#191c18; --panel-2:#20241e; --ink:#f3f3e8; --muted:#8d9585; --accent:#d9f24f; --line:#363d31; --die-size:min(30vw,210px); --header-offset:82px; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
body { overflow-x:hidden; }
@media (pointer: coarse) {
  html { touch-action: manipulation; }
}
button,select,input { font:inherit; } button { color:inherit; cursor:pointer; }
.app-shell { min-height:100svh; width:min(1180px,90%); margin:auto; padding:26px 0 28px; display:flex; flex-direction:column; position:relative; }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; position:relative; z-index:2; padding-bottom:24px; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:9px; font-size:17px; font-weight:800; letter-spacing:.16em; }
.brand-mark { color:var(--accent); font-size:21px; line-height:1; } .brand small { color:var(--muted); border-left:1px solid var(--line); padding-left:10px; margin-left:2px; font-size:9px; letter-spacing:.14em; font-weight:700; }
.top-roll { border:1px solid var(--accent); background:var(--accent); color:#11140d; padding:10px 13px 10px 18px; border-radius:7px; display:flex; align-items:center; gap:16px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; transition:transform .2s ease,box-shadow .2s ease; box-shadow:0 0 0 0 rgba(217,242,79,0); }
.top-roll kbd { padding:4px 6px; border:1px solid rgba(17,20,13,.28); border-radius:4px; font-size:9px; letter-spacing:.08em; } .top-roll:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(217,242,79,.2); } .top-roll:active { transform:translateY(0) scale(.98); }
.icon-button { border:1px solid var(--line); background:transparent; width:42px; height:42px; border-radius:7px; justify-self:end; transition:background .2s ease,border-color .2s ease; } .icon-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .settings-chevron{display:none}.icon-button.is-open .settings-glyph{display:none}.icon-button.is-open .settings-chevron{display:block}.icon-button:hover{background:var(--panel-2);border-color:var(--muted)}
.eyebrow { margin:0; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.play-area { flex:1; min-height:420px; display:flex; flex-direction:column; justify-content:center; align-items:center; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.board-intro { width:100%; display:flex; justify-content:space-between; align-items:center; margin:30px 0 14px; } .board-hint { color:var(--muted); font-size:11px; letter-spacing:.04em; }
.dice-stage { width:min(100%,1060px); display:grid; grid-template-columns:1fr; place-items:center; justify-content:center; gap:clamp(16px,3.2vw,40px); padding:34px 0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.dice-row { width:100%; display:flex; justify-content:center; align-items:center; gap:clamp(16px,3.2vw,40px); }
.dice-row .die { flex:0 1 var(--die-size); }
.die { --die-color:var(--accent); width:min(100%,var(--die-size)); aspect-ratio:1; position:relative; display:grid; place-items:center; border:0; background:transparent; color:var(--die-color); font-size:clamp(32px,5vw,58px); font-weight:800; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent; touch-action:none; transform:translate(var(--jitter-x,0px),var(--jitter-y,0px)) rotate(var(--jitter-rotate,0deg)); transition:transform .2s ease,filter .2s ease; filter:drop-shadow(0 18px 15px rgba(0,0,0,.35)); }
.die:hover { transform:translate(var(--jitter-x,0px),calc(var(--jitter-y,0px) - 7px)) rotate(calc(var(--jitter-rotate,0deg) + 2deg)); filter:drop-shadow(0 22px 18px rgba(0,0,0,.5)); } .die-face { position:absolute; inset:0; background:var(--panel); border:clamp(3px,.45vw,6px) solid var(--die-color); display:grid; place-items:center; overflow:hidden; container-type:inline-size; box-shadow:inset 0 0 30px rgba(255,255,255,.025); }
.die-face > span { position:relative; z-index:3; }
.die-face:before,.die-face:after { content:""; position:absolute; pointer-events:none; z-index:1; display:none; }
.die-geometry { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; color:var(--die-color); }
.die-geometry .soft { opacity:.52; filter:blur(1.8px); }
.shape-d4,.shape-d6,.shape-d8,.shape-d10,.shape-d12,.shape-d20 { clip-path:none; border:0; background:transparent; }
.mode-2d .die { width:min(100%,var(--die-size)); aspect-ratio:var(--shape-ratio,1); transform:none; }
.mode-2d .die:hover { transform:translateY(-7px); }
.mode-2d .die.is-rolling { animation:throw-2d .9s ease-in-out infinite; }
.mode-2d .die.is-throwing { animation:throw-2d .9s ease-in-out both; }
.mode-2d .shape-d4 > span { transform:translateY(10%); }
.mode-2d .shape-d8 > .die-value { transform:translateY(-25%); }
.mode-2d .shape-d20 > .die-value { position:absolute; left:53.4%; top:50%; transform:translate(-50%,-50%); }
.mode-2d .die-value { font-size:min(5vw,58px,34cqw); line-height:1; }
.mode-2d .shape-d10 > .die-value,
.mode-2d .shape-d12 > .die-value,
.mode-2d .shape-d20 > .die-value { font-size:min(5vw,58px,24cqw); }
.mode-2d .shape-d100 > .die-value { font-size:min(4vw,48px,16cqw); }
@keyframes throw-2d {
  0% { transform:translateY(0) rotate(0); }
  14% { transform:translateY(-10px) rotate(-7deg); }
  30% { transform:translateY(7px) rotate(8deg); }
  46% { transform:translateY(-6px) rotate(-6deg); }
  62% { transform:translateY(5px) rotate(4.5deg); }
  76% { transform:translateY(-3px) rotate(-3deg); }
  88% { transform:translateY(1px) rotate(1.2deg); }
  100% { transform:translateY(0) rotate(0); }
}
.shape-d100{clip-path:polygon(50% 1%,69% 4%,84% 14%,95% 30%,99% 50%,95% 70%,84% 86%,69% 96%,50% 99%,31% 96%,16% 86%,5% 70%,1% 50%,5% 30%,16% 14%,31% 4%);transform:rotate(45deg) scale(.76)}
.shape-d100 span{transform:rotate(-45deg)}
.mode-2d .shape-d100 { clip-path:none; transform:none; border:0; background:transparent; }
.mode-2d .shape-d100 > span { transform:none; }
.mode-2d .shape-d100 .die-asset { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.pip-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:47%;height:47%;gap:8%}.pip{width:100%;aspect-ratio:1;border-radius:50%;background:var(--die-color);box-shadow:0 0 12px color-mix(in srgb,var(--die-color) 30%,transparent)}.pip:nth-child(1){grid-area:1/1}.pip:nth-child(2){grid-area:1/3}.pip:nth-child(3){grid-area:2/2}.pip:nth-child(4){grid-area:3/1}.pip:nth-child(5){grid-area:3/3}
.die.is-rolling{animation:throw-motion .9s ease-in-out infinite}.die.is-throwing{animation:throw-motion .98s cubic-bezier(.22,.72,.32,1) both} @keyframes throw-motion{0%{transform:translateY(0) rotate(0)}14%{transform:translateY(-10px) rotate(-7deg)}30%{transform:translateY(7px) rotate(8deg)}46%{transform:translateY(-6px) rotate(-6deg)}62%{transform:translateY(5px) rotate(4.5deg)}76%{transform:translateY(-3px) rotate(-3deg)}88%{transform:translateY(1px) rotate(1.2deg)}100%{transform:translateY(0) rotate(0)}}
.board-footer{display:flex;width:min(100%,480px);align-items:center;gap:12px;color:#5e665b;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.footer-line{height:1px;flex:1;background:var(--line)}
.scrim{display:none!important}.scrim[hidden]{display:none}.settings-panel{position:relative;z-index:2;max-height:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;background:var(--panel);border:1px solid transparent;border-radius:8px;transition:max-height .36s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .36s}.settings-panel.is-open{max-height:min(470px,calc(100svh - var(--header-offset) - 12px));opacity:1;visibility:visible;pointer-events:auto;border-color:var(--line);box-shadow:0 10px 28px rgba(0,0,0,.05);transition-delay:0s}
.settings-content{padding:17px 28px 24px;display:grid;grid-template-columns:3.1fr 1fr 1fr 1.2fr 1.35fr .8fr .8fr;gap:18px;align-items:start}.setting-block{min-width:0}.field-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin:0 0 9px;color:var(--muted)}
.type-chips{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid var(--line);background:transparent;border-radius:5px;padding:8px 10px;min-width:42px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.04em}.chip:hover,.segment:hover{border-color:var(--muted);color:var(--ink)}.chip.is-selected{background:var(--accent);border-color:var(--accent);color:#11140d}
.stepper{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;border:1px solid var(--line);border-radius:5px;background:var(--panel-2);overflow:hidden;height:38px}.stepper button{height:100%;border:0;background:transparent;font-size:18px;color:var(--ink)}.stepper button:hover{background:#2b3228}.stepper input{width:100%;height:100%;border:0;background:transparent;text-align:center;color:var(--ink);font-size:14px;outline:none;-moz-appearance:textfield}.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.segmented{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}.segment{flex:1;border:0;background:transparent;padding:9px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}.segment.is-selected{background:var(--ink);color:var(--paper)}.color-options{display:flex;gap:11px;align-items:center}.color-swatch{width:25px;height:25px;border-radius:50%;border:2px solid transparent}.color-swatch.is-selected{outline:2px solid var(--ink);outline-offset:3px}.color-coral{background:#ff6a5d}.color-lime{background:#d9f24f}.color-blue{background:#61a8ff}.color-green{background:#72c68d}.color-violet{background:#b190ff}.custom-color{position:relative;width:25px;height:25px;border:1px dashed var(--muted);border-radius:50%;display:grid;place-items:center;color:var(--muted)}.custom-color input{position:absolute;opacity:0;width:100%;height:100%}.d6-options[hidden]{display:none}.toggle-row{padding:10px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px}.switch input{display:none}.switch span{display:block;width:36px;height:21px;border-radius:20px;background:#40483d;padding:3px;transition:.2s}.switch span:after{content:'';display:block;width:15px;height:15px;border-radius:50%;background:#a3ab9b;transition:.2s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{background:#11140d;transform:translateX(15px)}
.settings-open .topbar{border-bottom-color:transparent}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html[data-theme="light"] { --paper:#f4f1ea; --panel:#ebe8e0; --panel-2:#fffdf8; --ink:#202321; --muted:#777870; --line:#d8d4ca; }
html[data-theme="light"] .die-face { background:#f8f6f0; box-shadow:inset 0 0 30px rgba(32,35,33,.035); }
html[data-theme="light"] .top-roll { color:#11140d; }
html[data-theme="light"] .switch span { background:#c7c3ba; } html[data-theme="light"] .switch span:after { background:#fff; }
html[data-theme="light"] .switch input:checked+span:after { background:#11140d; }

/* Shared settings control geometry */
.settings-content > .setting-block { min-height: 63px; }
.settings-content > .setting-block:not(.toggle-row) > .field-label,
.toggle-row > .field-label { height: 16px; display: flex; align-items: center; margin-bottom: 9px; }
.stepper, .segmented, .color-options { height: 38px; }
.color-options { min-width: 0; flex-wrap: nowrap; }
.color-swatch, .custom-color { width: 25px; height: 25px; min-width: 25px; flex: 0 0 25px; aspect-ratio: 1 / 1; border-radius: 50%; }
.color-swatch { padding: 0; }
.toggle-row { min-height: 63px; padding: 0; display: flex; flex-direction: column; align-items: stretch; }
.toggle-row .switch { height: 38px; display: flex; align-items: center; justify-content: flex-start; }
.mode-2d .die-face { background:transparent; box-shadow:none; }
@media (min-width: 901px) { .settings-content { grid-template-columns: 3.1fr 1fr 1fr 1.2fr 1.35fr 1fr .8fr .8fr; } }
.mode-2d .die { filter:none; }
.mode-2d .die-face { background:transparent !important; box-shadow:none !important; }
@media(min-width:700px){.app-shell{padding-top:34px}.play-area{min-height:500px}.dice-stage{gap:clamp(16px,3.2vw,40px)}.dice-row .die{flex-basis:calc((100% - 5 * clamp(16px,3.2vw,40px)) / 6);width:100%}} @media(min-width:1050px){.die{--die-size:min(13.5vw,185px)}} @media(max-width:900px){.settings-content{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 18px}} @media(max-width:699px){.app-shell{width:90%}.brand small{display:none}.top-roll{padding:10px 12px}.top-roll kbd{display:none}.settings-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}.dice-type-block{grid-column:1/-1}.board-intro{margin-top:22px}.board-hint{font-size:10px}.dice-row .die{flex-basis:calc((100% - 2 * clamp(16px,3.2vw,40px)) / 3);width:100%}} @media(max-height:600px) and (orientation:landscape){.app-shell{padding-top:16px}.play-area{min-height:240px}.dice-stage{padding:15px 0;gap:12px}.dice-row{gap:12px}.die{--die-size:min(24vh,150px)}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}}
/* Settings layout: one shared control height, labels aligned above controls. */
.settings-panel.is-open { max-height: min(720px, calc(100svh - var(--header-offset) - 12px)); }
.settings-panel.is-open .settings-content { max-height: calc(100svh - var(--header-offset) - 36px); overflow-y: auto; }
.settings-content > .setting-block { min-height: 63px; }
.settings-content > .setting-block:not(.toggle-row) > .field-label,
.toggle-row > .field-label { height: 16px; margin-bottom: 9px; }
.chip, .stepper, .segmented, .color-options { height: 38px; }
.chip { padding-block: 0; }
.color-options { min-width: 0; flex-wrap: nowrap; }
.color-swatch, .custom-color { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; }
.toggle-row { min-height: 63px; padding: 0; display: flex; flex-direction: column; align-items: stretch; }
.toggle-row .switch { height: 38px; display: flex; align-items: center; justify-content: flex-start; }
@media (min-width: 901px) and (max-width: 1049px) {
  .settings-content { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 18px; }
}
@media (min-width: 1050px) {
  .settings-content { grid-template-columns: minmax(240px, 3fr) repeat(6, minmax(100px, 1fr)); }
  .settings-content > .color-setting { grid-column: span 2; }
}
@media (max-width: 600px) {
  .settings-content > .color-setting { grid-column: 1 / -1; }
  .type-chips { grid-template-columns: repeat(7, minmax(0, 1fr)); display: grid; gap: 5px; }
  .type-chips .chip { min-width: 0; width: 100%; padding-inline: 0; font-size: 9px; letter-spacing: .02em; }
  .dice-stage, .die, .die * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
  .app-shell button, .app-shell label, .brand, .board-hint { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
}
.theme-setting .segment.is-selected { background: var(--accent); color: #11140d; }
.shake-setting { display: none; }
@media (max-width: 600px) {
  .shake-setting { display: flex; }
}
.top-roll, .chip.is-selected, .theme-setting .segment.is-selected { color: var(--accent-ink); }
html[data-theme] .top-roll { color: var(--accent-ink); }
.d6-options .segment.is-selected { background: var(--accent); color: var(--accent-ink); }
.custom-color.is-custom { background: var(--custom-color); border-style: solid; border-color: transparent; color: var(--accent-ink); }
.custom-color.is-custom { border: 2px solid var(--ink); }
.custom-color.is-custom span { opacity: 1; }
.switch input:checked + span:after { background: var(--accent-ink); }
.icon-button.is-open .settings-chevron { transform: rotate(180deg); transform-origin: 12px 12px; transition: transform .2s ease; }
:root { --accent-ink: #11140d; }
.stepper button { color: var(--accent); }
.switch input:checked + span { background: var(--accent); }
html[data-theme] .switch input:checked + span { background: var(--accent); }
html[data-theme] .switch input:checked + span:after { background: var(--accent-ink); }
.stepper button:hover { background: var(--accent); color: var(--accent-ink); }

/* When settings consume vertical space, keep the board inside the viewport. */
.settings-open .play-area { min-height: 0; overflow: hidden; }
.settings-open .app-shell { height: 100svh; min-height: 100svh; overflow: hidden; }
.settings-open .play-area { flex: 1 1 0; }
.live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 700px) {
  .settings-open .dice-row .die {
    flex-basis: min(var(--fit-die-size, 9999px), calc((100% - 5 * clamp(16px, 3.2vw, 40px)) / 6));
    width: 100%;
  }
}
@media (max-width: 699px) {
  .settings-open .dice-row .die {
    flex-basis: min(var(--fit-die-size, 9999px), calc((100% - 2 * clamp(16px, 3.2vw, 40px)) / 3));
    width: 100%;
  }
}
.color-violet { background: #8068bd; }