/* Unit 5 page extras (small). Uses site tokens only. */
.u5-quiz { margin: 12px 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel2); }
.u5-row { display: flex; flex-wrap: wrap; gap: 8px; }
.u5-row > button { flex: 1 1 160px; }
button.u5-ok, .u5-out.u5-ok { border-color: var(--ok); background: var(--okbg); }
button.u5-bad, .u5-out.u5-bad { border-color: var(--bad); background: var(--badbg); }
.u5-out { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; }
.u5-out:empty { display: none; }
.u5-fig { display: block; margin: 12px auto; width: 100%; max-width: 520px; height: auto; }
.u5-fig text { font: 600 14px system-ui, sans-serif; fill: var(--ink); }
.u5-fig .ln { stroke: var(--ink); stroke-width: 2; fill: none; }
.u5-fig .fx { stroke: var(--f); stroke-width: 3; fill: none; }
.u5-fig .fxf { fill: var(--f); }
.u5-fig .xx { stroke: var(--x); stroke-width: 3; fill: none; }
.u5-fig .vv { stroke: var(--v); stroke-width: 3; fill: none; }
.u5-fig .aa { stroke: var(--a); stroke-width: 3; fill: none; }
.u5-fig .dash { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.u5-fig .body { fill: var(--panel2); stroke: var(--ink); stroke-width: 2; }
.u5-fig .dot { fill: var(--ink); }
.u5-fig .t-f { fill: var(--f); } .u5-fig .t-x { fill: var(--x); } .u5-fig .t-v { fill: var(--v); } .u5-fig .t-a { fill: var(--a); }
.u5-table td, .u5-table th { white-space: normal; }
/* games and practice set */
.u5-game { margin: 28px 0; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 6px solid var(--f); }
@media (max-width: 599px) { .u5-game { padding: 14px 12px; } }
.u5-game > h2:first-child { margin-top: 0; }
.u5-hud { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; margin: 8px 0; }
.u5-stage { width: 100%; max-width: 640px; display: block; margin: 8px auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.u5-stage text { font: 600 13px system-ui, sans-serif; fill: var(--ink); }
.u5-ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 10px 0; }
@media (min-width: 700px) { .u5-ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.u5-ctl label { display: block; font-weight: 600; }
.u5-ctl .u5-pair { display: flex; gap: 8px; align-items: center; }
.u5-ctl .u5-pair input[type="number"] { width: 6.5em; }
.u5-pick { display: flex; width: 100%; justify-content: flex-start; text-align: left; margin: 6px 0; min-height: 48px; border-width: 2px !important; }
.u5-pick[aria-pressed="true"] { border-color: var(--accent) !important; background: var(--infobg) !important; }
.u5-pick.u5-ok { border-color: var(--ok) !important; background: var(--okbg) !important; }
.u5-pick.u5-bad { border-color: var(--bad) !important; background: var(--badbg) !important; }
.u5-sticky { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 14px; margin: 16px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.u5-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.u5-shapes button { flex-direction: column; min-height: 96px; }
.u5-shapes svg { width: 64px; height: 48px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .u5-stage text { font-size: 22px; } }