:root{--color-page: #efeadd;--color-panel: #faf7ee;--color-border: #d6cfbb;--color-ink: #2a2a24;--color-ink-muted: #6d6b5e;--color-cream: #fffdf7;--color-accent: #e8590c;--color-accent-dark: #c44a08;--color-green-deep: #2f5d34;--color-lawn-a: #8fc276;--color-lawn-b: #84b86c;--color-grid-line: rgb(255 255 255 / .22);--die-size: clamp(64px, calc((100vw - 110px) / 3), 112px);--radius: 14px;--font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light;font-family:var(--font);color:var(--color-ink);background:var(--color-page)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--color-page);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.app{display:flex;flex-direction:column;height:100%;max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));gap:14px}.header{text-align:center}.header h1{margin:0 0 12px;font-size:1.15rem;letter-spacing:.02em;color:var(--color-green-deep)}.toggle{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--color-panel);border:1px solid var(--color-border)}.toggle button{border:0;border-radius:999px;padding:12px 0;background:transparent;font-size:1.05rem;font-weight:700;color:var(--color-ink-muted);transition:background .2s,color .2s}.toggle button.active{background:var(--color-green-deep);color:var(--color-cream);box-shadow:0 2px 6px #0000002e}.faces{margin:8px 0 0;font-size:.85rem;color:var(--color-ink-muted)}.lawn{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:24px 12px;border-radius:20px;border:4px solid var(--color-green-deep);background-color:var(--color-lawn-a);background-image:linear-gradient(var(--color-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid-line) 1px,transparent 1px),conic-gradient(var(--color-lawn-b) 25%,transparent 0 50%,var(--color-lawn-b) 0 75%,transparent 0);background-size:40px 40px,40px 40px,80px 80px;box-shadow:inset 0 0 40px #0000001f;overflow:hidden}.tray{display:grid;grid-template-columns:repeat(3,var(--die-size));justify-content:center;gap:18px}.tray.count-1{grid-template-columns:var(--die-size)}.tray.count-2,.tray.count-4{grid-template-columns:repeat(2,var(--die-size))}.die{width:var(--die-size);height:var(--die-size);padding:0;border:0;background:none;perspective:400px}.die:disabled{opacity:1}.cube{display:block;width:100%;height:100%;border-radius:18%;background:linear-gradient(145deg,#fff,#ece6d6);box-shadow:inset 0 -4px #00000014,0 6px #cfc7b0,0 10px 16px #00000047}.cube svg{display:block;width:100%;height:100%}.pip{fill:var(--color-ink)}.blank{fill:var(--color-ink-muted);opacity:.5;font-size:.42px;font-weight:700;text-anchor:middle;dominant-baseline:central}.die-d6 .cube{background:linear-gradient(145deg,#3b7341,#284f2c);box-shadow:inset 0 -4px #00000026,0 6px #1d3a20,0 10px 16px #0000004d}.die-d6 .pip,.die-d6 .blank{fill:var(--color-cream)}.die.rolling .cube{animation:tumble .32s linear infinite}.die.landed .cube{animation:land .42s cubic-bezier(.3,1.6,.5,1)}@keyframes tumble{0%{transform:translateY(0) rotate(0) rotateX(0) scale(1)}25%{transform:translateY(-14px) rotate(25deg) rotateX(35deg) scale(1.06)}50%{transform:translateY(-4px) rotate(-12deg) rotateY(40deg) scale(.98)}75%{transform:translateY(-12px) rotate(18deg) rotateX(-30deg) scale(1.04)}to{transform:translateY(0) rotate(0) rotateX(0) scale(1)}}@keyframes land{0%{transform:translateY(-10px) scale(1.12) rotate(-6deg)}60%{transform:translateY(2px) scale(.96) rotate(1deg)}to{transform:translateY(0) scale(1) rotate(0)}}@media(prefers-reduced-motion:reduce){.die.rolling .cube,.die.landed .cube{animation:none}}.result{display:flex;flex-direction:column;align-items:center;min-height:92px;justify-content:center;color:var(--color-cream);text-shadow:0 2px 4px rgb(0 0 0 / .35)}.result-label{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.result-value{font-size:4rem;font-weight:800;line-height:1;animation:pop .3s ease-out}.result-hint{font-size:1rem;font-weight:600;opacity:.9}@keyframes pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.controls{display:grid;grid-template-columns:auto 1fr;gap:12px}.stepper{display:flex;align-items:center;border-radius:var(--radius);background:var(--color-panel);border:1px solid var(--color-border)}.stepper button{width:52px;height:64px;border:0;background:none;font-size:1.8rem;font-weight:700;color:var(--color-green-deep)}.stepper button:disabled{color:var(--color-border)}.stepper-value{display:flex;flex-direction:column;align-items:center;min-width:44px}.stepper-number{font-size:1.6rem;font-weight:800;line-height:1}.stepper-unit{font-size:.75rem;color:var(--color-ink-muted)}.roll{border:0;border-radius:var(--radius);background:var(--color-accent);color:var(--color-cream);font-size:1.4rem;font-weight:800;letter-spacing:.03em;box-shadow:0 5px 0 var(--color-accent-dark);transition:transform .08s,box-shadow .08s,opacity .2s}.roll:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--color-accent-dark)}.roll:disabled{opacity:.7}