body[data-app="direction-sense"] { --accent:#31597a; --wash:#e4eef4; }
.compass { position:relative; display:grid; grid-template:repeat(3,1fr) / repeat(3,1fr); place-items:center; width:min(245px,80%); aspect-ratio:1; margin:12px auto; border:1px solid #99adb7; border-radius:50%; background:repeating-radial-gradient(circle at center,#f5f8f6 0 20px,#e7eeec 21px 22px); color:#24425a; font-size:1.08rem; font-weight:850; }
.compass .north { grid-area:1 / 2; }
.compass .east { grid-area:2 / 3; }
.compass .south { grid-area:3 / 2; }
.compass .west { grid-area:2 / 1; }
.compass-center { grid-area:2 / 2; display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:50%; border:1px solid #b0c1c7; background:#fffefa; }
#needle { display:block; width:68%; height:auto; color:var(--accent); transform:rotate(var(--heading,0deg)); transition:transform .22s ease; }
.compass-state { margin:8px 0 1px; text-align:center; font-size:.86rem; color:var(--muted); font-weight:750; }
.start-direction { margin:0; font-size:.88rem; }
.turn-list { display:flex; flex-wrap:wrap; gap:5px; list-style:none; margin:9px 0 12px; padding:0; }
.turn-list li { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px; padding:5px 7px; border:1px solid #cfdae0; border-radius:5px; color:#31597a; background:#eef4f5; font-size:.79rem; font-weight:750; }
.turn-list span { font-size:1.07rem; line-height:1; }
.direction-choices button { min-height:48px; }
.direction-choices button[data-result="right"] { background:#e5f1e7; border-color:#629276; color:#235b3a; opacity:1; }
.direction-choices button[data-result="wrong"] { background:#f5e4de; border-color:#ae695c; color:#832f29; opacity:1; }
.direction-feedback { min-height:2.9em; }
#trace { margin:0 0 8px; overflow-wrap:anywhere; }
.direction-result { max-width:640px; }
#final-score { font-size:2rem; font-weight:850; color:var(--accent); }
.direction-mistakes { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.direction-mistakes ul { padding-left:20px; margin:0; font-size:.84rem; line-height:1.75; }
@media(max-width:730px) {
  .compass { width:150px; margin-block:7px; font-size:.9rem; }
}
@media(prefers-reduced-motion:reduce) { #needle { transition:none; } }