:root {
  --blue: #4c9be8;
  --blue-dark: #1e3a8a;
  --red: #dc5353;
  --green: #3cb563;
  --ink: #222;
  --muted: #7b8793;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; padding: 22px 14px 34px; background: #fff; color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; }
button { font: inherit; }
.home-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); color: #777; font-size: 1.05rem; text-decoration: none; }
.dice-app { width: 100%; max-width: 540px; margin: 0 auto; text-align: center; }
h1 { margin: 3px 42px 4px; color: var(--blue-dark); font-size: 1.45rem; line-height: 1.2; }
.subtitle { margin-bottom: 13px; color: var(--muted); font-size: .9rem; }
.intro { max-width: 430px; margin: 24px auto 22px; color: #52677b; font-size: .95rem; line-height: 1.55; }
.dice-reference { width: 100%; max-width: 500px; margin: 0 auto 16px; padding: 10px 10px 9px; border: 1px solid #e0e7ee; border-radius: 15px; background: #f9fbfd; }
.reference-title { margin-bottom: 8px; color: #687b8c; font-size: .76rem; font-weight: 750; }
.reference-row { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 12px); }
.reference-item { display: flex; align-items: center; justify-content: center; min-width: 0; }
.mini-die { width: clamp(50px, 13vw, 62px); padding: 3px; border-width: 2px; border-radius: 10px; box-shadow: none; background: #fff; }
.mini-die .pip { width: clamp(14px, 3.8vw, 18px); height: clamp(14px, 3.8vw, 18px); background: transparent; }
.mini-die .pip.active { background: radial-gradient(circle, #222 0 5px, transparent 6px); }
.counter { min-height: 22px; margin-bottom: 8px; color: #a2aab2; font-size: .82rem; font-weight: 700; }
.progress { display: flex; justify-content: center; gap: 7px; margin: 0 auto 18px; }
.progress-dot { width: 26px; height: 7px; border-radius: 99px; background: #e4e8ec; }
.progress-dot.correct { background: var(--blue); }
.progress-dot.wrong { background: var(--red); }
.listening-zone { min-height: 74px; margin-bottom: 6px; }
.instruction { min-height: 25px; color: #52677b; font-size: .95rem; font-weight: 650; }
.replay-btn { margin-top: 9px; padding: 8px 14px; border: 1px solid #dce8f4; border-radius: 12px; background: #f5f9fd; color: #315f8d; cursor: pointer; font-weight: 700; }
.dice-zone { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 30px); min-height: 190px; margin: 3px auto 16px; }
.die { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: clamp(138px, 39vw, 158px); aspect-ratio: 1; padding: 10px; border: 4px solid #242424; border-radius: 22px; background: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.12); }
.die.fixed { background: #fbfbfb; }
.pip { align-self: center; justify-self: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 10px, #d4dae0 11px 12px, transparent 13px); }
.die.fixed .pip { background: transparent; }
.die.fixed .pip.active { background: radial-gradient(circle, #222 0 12px, transparent 13px); }
button.pip { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .1s; }
button.pip:active { transform: scale(.88); }
button.pip:focus-visible { outline: 4px solid rgba(76,155,232,.3); outline-offset: 2px; }
.pip.active { background: radial-gradient(circle, #222 0 12px, transparent 13px); }
.die.wrong { border-color: var(--red); animation: shake .25s linear 1; }
.die.correct { border-color: var(--green); }
.pip-tl { grid-area: 1 / 1; } .pip-tr { grid-area: 1 / 3; }
.pip-ml { grid-area: 2 / 1; } .pip-mc { grid-area: 2 / 2; } .pip-mr { grid-area: 2 / 3; }
.pip-bl { grid-area: 3 / 1; } .pip-br { grid-area: 3 / 3; }
.answer-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 330px; margin: 0 auto 16px; }
.answer-key { min-height: 52px; border: 2px solid #e7e9ec; border-radius: 13px; background: #f9fafb; color: #20262d; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-size: 1.3rem; font-weight: 800; }
.answer-key:active { transform: scale(.96); background: #eaf3fd; }
.answer-key:focus-visible { outline: 4px solid rgba(76,155,232,.3); outline-offset: 2px; }
.feedback { min-height: 28px; margin-bottom: 10px; color: var(--muted); font-size: .95rem; font-weight: 700; }
.feedback.good { color: var(--green); } .feedback.bad { color: var(--red); }
.actions, .end-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; margin: 0 auto; }
.action-btn { width: 100%; padding: 13px 20px; border: 0; border-radius: 14px; background: var(--blue); color: #fff; cursor: pointer; font-size: 1rem; font-weight: 750; text-decoration: none; }
.action-btn.secondary { background: #eef3f8; color: #4f6478; }
.action-btn:focus-visible { outline: 4px solid rgba(76,155,232,.3); outline-offset: 3px; }
.end-screen { padding-top: 54px; } .end-screen h2 { color: var(--blue-dark); font-size: 1.55rem; }
.end-text { margin: 9px 0 25px; color: var(--muted); line-height: 1.5; }
.hidden { display: none !important; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 390px) { body { padding-left: 8px; padding-right: 8px; } h1 { font-size: 1.25rem; } .dice-reference { padding-left: 5px; padding-right: 5px; } .reference-row { gap: 4px; } .dice-zone { gap: 7px; min-height: 170px; } .die { padding: 7px; border-width: 3px; border-radius: 18px; } .pip { width: 42px; height: 42px; } .mini-die { padding: 2px; border-width: 2px; } .mini-die .pip { width: 14px; height: 14px; } }
@media (max-height: 700px) { body { padding-top: 10px; } .dice-zone { min-height: 160px; margin-bottom: 8px; } .listening-zone { min-height: 60px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }