:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20201d; background: #f6f5f1; }
* { box-sizing: border-box; }
html, body { overflow: hidden; overscroll-behavior: none; }
body { margin: 0; min-width: 320px; min-height: 100dvh; touch-action: manipulation; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.app { max-width: 500px; height: 100dvh; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 25px max(25px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
header { text-align: center; }
.eyebrow { margin: 0 0 7px; color: #88867d; font-size: .68rem; font-weight: 750; letter-spacing: .16em; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2.15rem, 10vw, 3rem); letter-spacing: -.055em; }
.byline { margin: 5px 0 0; color: #88867d; font-size: .68rem; letter-spacing: .025em; }
.dice-count { border: 0; border-bottom: 1px solid #bebcb3; background: transparent; color: #6d6b64; margin-top: 14px; padding: 0 2px 3px; font-size: .8rem; cursor: pointer; }
.dice-area { flex: 1; display: grid; place-content: center; position: relative; min-height: 390px; }
.hint { position: absolute; top: 16%; left: 0; right: 0; text-align: center; color: #88867d; font-size: .83rem; margin: 0; transition: opacity .18s ease; }
.dice-grid { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; justify-content: center; }
.dice-grid.shaking { animation: shake .56s ease-in-out; }
.die { height: 76px; padding: 12px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); border: 1px solid #deddd6; border-radius: 17px; background: #fffefa; box-shadow: 0 7px 16px rgba(49, 45, 32, .055); animation: land .28s ease both; }
.pip { width: 10px; height: 10px; border-radius: 50%; background: #282824; place-self: center; }
.die.one .pip { background: #d95d42; }
.p1 { grid-area: 1 / 1; }.p2 { grid-area: 1 / 2; }.p3 { grid-area: 1 / 3; }.p4 { grid-area: 2 / 1; }.p5 { grid-area: 2 / 2; }.p6 { grid-area: 2 / 3; }.p7 { grid-area: 3 / 1; }.p8 { grid-area: 3 / 2; }.p9 { grid-area: 3 / 3; }
footer { text-align: center; }.roll { width: 100%; padding: 17px; border: 0; border-radius: 15px; background: #282824; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 5px 0 #10100e; }.roll:active { transform: translateY(3px); box-shadow: 0 2px 0 #10100e; }.roll:disabled { opacity: .8; }.shake-toggle { margin-top: 17px; border: 0; border-bottom: 1px solid #bebcb3; padding: 0 1px 3px; background: transparent; color: #6d6b64; font-size: .75rem; cursor: pointer; }.shake-toggle.enabled { border-color: #d95d42; color: #b94832; } footer p { color: #88867d; font-size: .72rem; margin: 12px 0 0; }
dialog { width: min(340px, calc(100% - 36px)); border: 0; border-radius: 20px; padding: 24px; color: #20201d; box-shadow: 0 20px 60px rgba(0,0,0,.19); } dialog::backdrop { background: rgba(31,30,26,.28); backdrop-filter: blur(2px); } dialog p { margin: 0 0 18px; font-family: Georgia, serif; font-size: 1.45rem; }.count-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.count-options button, .cancel { border: 1px solid #deddd6; border-radius: 10px; padding: 12px; background: #fffefa; cursor: pointer; }.cancel { margin-top: 18px; width: 100%; color: #77746c; }
@keyframes land { from { opacity: 0; transform: translateY(-12px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0) rotate(0); } 16% { transform: translateX(-11px) rotate(-3deg); } 32% { transform: translateX(10px) rotate(3deg); } 48% { transform: translateX(-8px) rotate(-2deg); } 64% { transform: translateX(7px) rotate(2deg); } 80% { transform: translateX(-3px) rotate(-1deg); } }
@media (max-height: 650px) { .dice-area { min-height: 280px; } .hint { top: 10%; } }