:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#171b17;color:#f4eedf}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{min-height:100dvh;overflow:hidden}button{font:inherit;-webkit-tap-highlight-color:transparent}.app-shell{min-height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:radial-gradient(circle at 50% 35%,#314235,#171b17 68%)}.dice-stage{position:relative;min-height:0;overflow:hidden}#dice-box,#dice-box canvas{position:absolute;inset:0;width:100%;height:100%}.stage-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 7rem #06080688}.engine-status{position:absolute;top:max(1rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);margin:0;color:#d7cfba;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 3px #000;white-space:nowrap}.result{position:absolute;left:50%;bottom:1rem;transform:translate(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .7rem;width:min(92%,42rem);padding:.65rem .9rem;border:1px solid #e8ddc150;border-radius:.85rem;background:#11150ddd;backdrop-filter:blur(9px);text-align:center;transition:opacity .16s ease,transform .16s ease}.result--hidden{opacity:0;transform:translate(-50%,.5rem);pointer-events:none}.die-result{color:#d8d2c1;font-size:.9rem}.die-result b{color:#fff9e8;font-size:1.08rem}.result--nat20 b{color:#9fdaad}.result--nat1 b{color:#e89b8d}.result-total{width:100%;color:#f5e9c8}.controls{z-index:2;padding:.7rem max(1rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));border-top:1px solid #ffffff18;background:linear-gradient(180deg,#20271fef,#141914);box-shadow:0 -1rem 3rem #0004}.selection-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2rem;margin-bottom:.6rem}.selection{overflow:hidden;color:#f2ead7;font-size:.92rem;text-overflow:ellipsis;white-space:nowrap}.text-button{min-height:2.5rem;padding:.3rem .55rem;border:0;background:transparent;color:#d8cfb8}.text-button:disabled{opacity:.35}.dice-buttons{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.42rem}.die-button{min-height:3rem;border:1px solid #e8ddc152;border-radius:.62rem;background:#293329;color:#f4eedf;font-weight:700;box-shadow:inset 0 1px #fff1,0 2px 4px #0003}.die-button:active:not(:disabled){transform:translateY(1px);background:#3a4839}.die-button:disabled{opacity:.45}.roll-button{width:100%;min-height:3.55rem;margin-top:.65rem;border:1px solid #f4dfaa91;border-radius:.75rem;background:linear-gradient(135deg,#d9b56e,#9f7434);color:#171309;font-size:1.1rem;font-weight:800;letter-spacing:.03em;box-shadow:0 3px 10px #0005}.roll-button:disabled{opacity:.45;filter:saturate(.4)}.roll-button:active:not(:disabled){transform:translateY(1px)}@media(orientation:landscape)and (max-height:560px){.app-shell{grid-template-columns:minmax(0,1fr) minmax(18rem,29vw);grid-template-rows:1fr}.controls{display:flex;flex-direction:column;justify-content:center;border-top:0;border-left:1px solid #ffffff18}.dice-buttons{grid-template-columns:repeat(2,1fr)}.roll-button{margin-top:.55rem}.result{bottom:.75rem}}@media(max-width:360px){.dice-buttons{gap:.28rem}.die-button{min-height:2.75rem;font-size:.8rem}}