:root { color-scheme: light; --ink: #182239; --primary: #3730a3; --surface: #fff; --page: #f0f4f8; --line: #65738a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: clamp(.75rem, 3vw, 2rem); background: var(--page); color: var(--ink); font-family: Tahoma, Arial, sans-serif; font-size: 1rem; line-height: 1.65; }
.game-container { max-width: 44rem; margin-inline: auto; padding: clamp(1rem, 3vw, 1.75rem); border: 2px solid var(--primary); border-radius: 1rem; background: var(--surface); }
h1, h2, h3, p { margin: 0 0 .65rem; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--primary); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
.page-header { margin-bottom: 1.25rem; }
.page-header p, .supporting { color: #43516a; }
button, input, select { font: inherit; }
button { min-height: 2.75rem; padding: .5rem 1rem; border: 2px solid var(--primary); border-radius: .5rem; background: var(--primary); color: #fff; cursor: pointer; line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
button.secondary { background: var(--surface); color: var(--primary); }
button:hover:not(:disabled) { filter: brightness(.93); }
button:disabled { cursor: default; background: #e5e9ef; border-color: #69768b; color: #475569; }
:focus-visible { outline: 3px solid #9a3412; outline-offset: 4px; }
h2:focus { outline: 2px solid var(--primary); outline-offset: 4px; }
input:not([type="radio"]), select { display: block; inline-size: 100%; min-inline-size: 0; min-height: 2.75rem; padding: .5rem; margin-block: .35rem .75rem; border: 2px solid var(--line); border-radius: .4rem; color: var(--ink); background: var(--surface); }
fieldset { margin: .75rem 0; padding: .5rem .75rem; border: 1px solid var(--line); min-width: 0; }
legend, label { font-weight: 600; }
.radio-label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: normal; }
input[type="radio"] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--primary); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: .75rem; align-items: center; }
.notice { background: #fff3d3; border-inline-start: 4px solid #805200; padding: .65rem; margin-block: .75rem; }
.progress-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.braille-cell { direction: ltr; display: grid; grid-template-areas: "dot1 dot4" "dot2 dot5" "dot3 dot6"; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 11rem); gap: .5rem 1rem; margin: .75rem auto; }
.braille-dot { width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid var(--primary); background: #eef0ff; color: #302782; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.braille-dot[data-dot="1"] { grid-area: dot1; }
.braille-dot[data-dot="2"] { grid-area: dot2; }
.braille-dot[data-dot="3"] { grid-area: dot3; }
.braille-dot[data-dot="4"] { grid-area: dot4; }
.braille-dot[data-dot="5"] { grid-area: dot5; }
.braille-dot[data-dot="6"] { grid-area: dot6; }
.braille-dot.dot-raised, .braille-dot.dot-raised:disabled { background: var(--primary); color: #fff; border-style: double; border-width: 6px; border-color: var(--primary); }
.braille-dot:disabled { background: #eef0ff; color: #302782; border-color: var(--primary); }
.feedback-message { min-height: 1.65em; margin-block: .5rem; font-weight: bold; }
.feedback-message[data-outcome="wrong"] { color: #9b1c1c; }
.feedback-message[data-outcome="correct"] { color: #11613a; }
#audio-message:empty { display: none; }
#audio-message { color: #805200; }
#practice-screen #practice-objective { color: #43516a; }
.reference-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-block: .75rem; }
.reference-entry { border-block-end: 1px solid var(--line); padding-block-end: .5rem; }
.reference-entry .braille-cell { width: 6rem; gap: .25rem .5rem; }
.reference-entry .braille-dot { font-size: 1rem; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -8rem; color: var(--primary); background: #fff; padding: .5rem; }
.skip-link:focus { top: .5rem; }
@media (min-width: 40rem) { #practice-screen { max-width: 30rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .braille-dot.dot-raised { border: 6px double ButtonText; background: Highlight; color: HighlightText; } }