body { background: #f1f8f7; color: #163f43; }
main { width: min(900px,100%); }
.screen-reader-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.geometry-heading { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.shape-badge { display:block; padding:12px; background:#d9efe9; border-radius:14px; color:#18756a; font-size:25px; letter-spacing:3px; }
.geometry-heading h1 { margin:0; }
#mode-help { margin:14px auto 22px; max-width:620px; min-height:0; }
.question-card { padding:24px 32px; border-color:#d5e6df; box-shadow:0 10px 35px #21594a0c; }
.question-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; font-size:14px; color:#536e6d; }
.topic { background:#e6f5ef; color:#1b6b59; border-radius:20px; padding:7px 13px; font-weight:bold; }
h2 { font-size:clamp(21px,4vw,28px); margin-bottom:8px; line-height:1.35; }
#diagram { display:block; width:min(320px,100%); height:250px; margin:0 auto 10px; overflow:visible; }
.shape-fill { fill:#dcf1eb; stroke:#207c70; stroke-width:4; stroke-linejoin:round; }
.ray { stroke:#207c70; stroke-width:4; stroke-linecap:round; }
.angle-arc { stroke:#ce7620; stroke-width:3; fill:none; }
.diagram-label { fill:#173f43; font:600 18px Arial,sans-serif; paint-order:stroke; stroke:white; stroke-width:4; stroke-linejoin:round; }
.vertex { fill:#ce7620; stroke:white; stroke-width:2; }
.axis { stroke:#a54985; stroke-width:2.5; stroke-dasharray:6 5; }
.choice { min-width:115px; font-size:20px; padding:16px 18px; color:#1f6259; background:#f0faf6; border-color:#a6cfc1; font-weight:600; }
.choice:hover:not(:disabled) { background:#e0f3eb; border-color:#207c70; }
.choice.right { opacity:1; border-color:#207b38; background:#e0f6e4; }
.choice.wrong { opacity:1; border-color:#b93629; background:#fff0ec; }
#answer-form { grid-template-columns:auto minmax(0,1fr) auto auto; max-width:400px; }
#answer-form>span { font-size:28px; }
.submit, .next { background:#207c70; color:white; border:0; border-radius:9px; padding:14px 22px; min-height:48px; font-weight:600; }
.next { margin-top:4px; min-width:210px; }
.secondary { border:1px solid #b1ccc4; background:white; color:#31665a; border-radius:8px; padding:11px 14px; min-height:44px; }
.feedback { margin-top:20px; padding:0 16px; border-radius:12px; }
#result { margin:0; font-size:21px; font-weight:600; min-height:26px; }
#explanation { margin:8px 0 0; line-height:1.55; }
.feedback.right, .feedback.wrong { padding:16px; margin-bottom:14px; }
.feedback.right { background:#e9f7eb; color:#21672d; }
.feedback.wrong { background:#fff1e9; color:#873c1c; }
.feedback.invalid { color:#873c1c; }
.round-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:18px 0; text-align:left; font-size:14px; color:#526e68; }
.round-actions button { flex-shrink:0; }
#stats { grid-template-columns:repeat(4,1fr); background:#277a61; }
.mirror-board { width:min(448px,100%); display:grid; grid-template-columns:1fr 12px 1fr; margin:12px auto; }
#given-grid,#answer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.mirror-axis { border-left:3px dashed #a54985; margin:0 auto; }
.grid-cell { aspect-ratio:1; min-width:0; padding:0; background:#edf5f2; border:1px solid #a7c9bc; border-radius:5px; }
button.grid-cell { min-height:0; }
.grid-cell.filled { background:#318c78; border-color:#246c5d; }
.grid-cell:disabled { opacity:1; }
.grid-cell.expected { outline:3px solid #a54985; outline-offset:-5px; }
.grid-cell.extra { background:#f7d6c8; border:2px solid #b93629; }
.mirror-labels { display:grid; grid-template-columns:1fr 1fr; width:min(448px,100%); margin:20px auto 0; font-size:14px; font-weight:600; }
.grid-help { font-size:15px; color:#526e68; line-height:1.5; }
#check-mirror { margin-right:6px; }
.info-main { padding-top:20px; }
.info-nav .language { justify-self:end; }
.info-intro { max-width:630px; margin:15px auto 25px; line-height:1.7; color:#526e68; }
.info-preview { width:min(500px,100%); border-radius:18px; border:1px solid #d5e6df; margin:10px auto 25px; display:block; }
.mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; margin:30px 0; }
.mode-cards article { background:white; border:1px solid #d5e6df; border-radius:12px; overflow:hidden; }
.mode-cards h2 { font-size:20px; color:white; margin:0; padding:15px 18px; }
.mode-cards p { padding:0 18px; line-height:1.6; }
.play-link { display:inline-block; text-decoration:none; }
@media(max-width:600px) {
    .question-card { padding:20px 14px; }.choice { font-size:17px; padding:14px 12px; min-width:90px; }
    .shape-badge { font-size:18px; padding:9px; }.geometry-heading { gap:8px; }
    .round-actions { flex-direction:column; text-align:center; gap:10px; }#stats div { font-size:12px; padding:0 3px; }
    #answer-form { gap:6px; }#answer-form .submit { padding:14px 12px; }.question-topline { font-size:12px; }
    .mode-cards { grid-template-columns:1fr; }.mirror-board { grid-template-columns:1fr 10px 1fr; }
    .info-nav>strong { display:none; }
}