:root{--glass:linear-gradient(135deg,#d9ffed16,#b9d8e306);--glass-line:#d8eae32e;--warm:#f1d2a1;--aqua:#9fddda}
body.theory-page{background:radial-gradient(ellipse at 8% 0,#304e3b80,transparent 46%),radial-gradient(ellipse at 95% 20%,#265a6535,transparent 48%),#0b1919;background-attachment:fixed;padding-bottom:105px}.learn-main{max-width:1140px}.learn-intro h1{letter-spacing:-.052em;line-height:1.03;background:linear-gradient(125deg,#fff2d7,#e8b46f);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(40px,6vw,74px)}.learn-kicker{color:var(--aqua)}.learn-header{border-bottom-color:var(--glass-line);background:#0c1b1b70;backdrop-filter:blur(16px)}
.learn-card,.route-card,.learn-banner,.answer-explanation,.ride-event,.game-dialog,.question-panel,.overlay-card,.glass-select{background:var(--glass);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 #ffffff10,0 14px 42px #00000018;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.learn-card,.route-card{border-radius:22px}.learn-actions button,.learn-actions .button,.exam-choice,.theory-page button,.theory-page .button{border-radius:13px;min-height:48px}.theory-page .primary,.route-card .primary{background:linear-gradient(135deg,#e2eed3,#bedbc8);color:#163631;box-shadow:inset 0 1px 0 #fff9,0 4px 18px #a9dec316}.theory-page button:focus-visible,.main-dock a:focus-visible,.glass-select summary:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}
.main-dock{height:auto;top:auto;right:auto;margin:0;position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:70;display:flex;gap:5px;padding:7px;background:linear-gradient(135deg,#55716b55,#1a3638bb);border:1px solid #bfdcd552;border-radius:24px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 #ffffff20,0 16px 38px #0005}.main-dock a{display:flex;align-items:center;gap:9px;justify-content:center;padding:12px 22px;min-width:106px;min-height:49px;border-radius:17px;text-decoration:none;color:#c8dcd3;font:600 13px system-ui}.main-dock a[aria-current=page]{background:linear-gradient(135deg,#e7efdb,#bdd9cd);color:#193730;box-shadow:inset 0 1px 0 #fff9}.main-dock svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.playing .main-dock,body:has(#scene) .main-dock{display:none}#garage{padding-bottom:120px}.garage-copy .mode-tabs{padding:5px;border-radius:15px;background:#b8ddcb0c;border:1px solid var(--glass-line)}.mode-tabs button.selected{background:#dcebd9;color:#17332d;box-shadow:inset 0 1px 0 #fff8}.theory-entry{border-radius:17px}.plans-entry{color:var(--aqua)}
.route-filters{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0}.route-filters button{padding:11px 21px;background:var(--glass);border:1px solid var(--glass-line);color:#d0ded5;cursor:pointer}.route-filters button[aria-pressed=true]{color:#16352e;background:#d2e5ce}.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.route-card{overflow:hidden}.route-card[hidden]{display:none}.route-card>svg{width:100%;display:block}.route-card>div{padding:26px}.route-card h2{font-size:27px;margin:9px 0;letter-spacing:-.04em}.route-card p{color:#b9c9c0;line-height:1.6}.route-card .learn-kicker{font-size:10px;color:var(--aqua)}.motorway-card{background:linear-gradient(135deg,#1c555855,#193b3480);display:grid;align-items:center}.motorway-card h2{font-size:39px;color:var(--warm)}
.glass-select{position:relative;border-radius:12px;margin-top:7px;font:13px system-ui;color:#e5ede1}.glass-select summary{padding:15px;cursor:pointer;list-style:none}.glass-select summary:after{content:'⌄';float:right;color:#afcdbb}.glass-select[open]{z-index:80}.glass-options{position:absolute;z-index:81;top:calc(100% + 8px);left:0;right:0;max-height:270px;overflow:auto;background:linear-gradient(135deg,#345652f5,#142b30f5);border:1px solid #acc9bf55;border-radius:15px;backdrop-filter:blur(25px);box-shadow:0 18px 36px #0007;padding:6px}.glass-options label{display:flex!important;align-items:center;gap:10px!important;min-height:48px;padding:10px;border-radius:9px;color:#e5ede1!important;letter-spacing:0!important;font:13px system-ui!important;cursor:pointer}.glass-options label:has(:checked){background:#c3dfcf24}.glass-options input{accent-color:#b7dcbc}.game-dialog{background:linear-gradient(135deg,#1c3032f5,#0f2025f5)}
@media(max-width:700px){.route-grid{grid-template-columns:1fr;gap:18px}.route-card>div{padding:22px}.main-dock{width:calc(100% - 38px);max-width:385px;bottom:calc(12px + env(safe-area-inset-bottom));gap:2px}.main-dock a{flex:1;min-width:0;padding:11px 8px;gap:6px;font-size:12px}.main-dock svg{width:20px}.learn-header{padding:18px}.learn-main{padding-top:30px}.learn-banner{font-size:12px}.route-filters{gap:6px}.route-filters button{font-size:12px;padding:10px 14px}#garage{padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.wrap-choice{margin-top:16px;padding:12px 16px;min-height:46px;background:linear-gradient(135deg,#94bbcf1a,#f3e9cf0a);color:#dbe6db;border:1px solid #b7d1c843;border-radius:12px;font:600 12px system-ui;cursor:pointer}.wrap-choice[aria-pressed=true]{background:#d3e3d5;color:#173732}#app:not([data-phase=driving]) #question-now{display:none}.playing #question-now{font-size:12px!important;min-width:85px}

select[hidden]{display:none!important}
/* A dialog owns its buttons; the mode dock must not intercept them on phones. */
body:has(#overlay:not([hidden])) .main-dock{visibility:hidden;pointer-events:none}