/* A single guided route, with optional access to the existing practice tools. */
.journey-mode{background:#102a65;color:#10234c}
.journey-mode .header{background:#102a65;color:#fff;border:0;height:76px}
.journey-mode .brandmark{background:#ff5149;color:white;box-shadow:0 4px 0 #a92039}
.journey-mode .brand-sub,.journey-mode .header .country{color:#cddcfc}
.journey-mode main{max-width:1100px;padding-top:8px}
.journey-mode .sidebar{display:none}
.journey-mode .workspace{display:block}
.journey-mode:not(.focus-mode) .lesson{border:0;background:transparent;box-shadow:none;overflow:visible}
.journey-mode:not(.focus-mode) .lesson-top,.journey-mode:not(.focus-mode) .lesson-progress{display:none}
.journey-mode:not(.focus-mode) footer{margin:24px 0;color:#d0dfff;justify-content:center}
.journey-mode:not(.focus-mode) footer>span,.journey-mode:not(.focus-mode) footer>#about-button{display:none}
.journey-welcome{max-width:640px;margin:0 auto;background:#fff;border:4px solid #082153;border-radius:30px;padding:28px 40px;text-align:center;box-shadow:0 10px 0 #061c46}
.journey-kicker{display:block;color:#205acf;font-size:15px;font-weight:800;letter-spacing:.3px}
.journey-art{display:block;width:100%;height:180px;margin:6px auto}
.journey-welcome h1{font-size:37px;line-height:1.22;color:#102a65;font-weight:900;margin:14px 0 20px;letter-spacing:-.8px}
.journey-welcome h2{font-size:22px;margin:20px 0 14px}
.journey-welcome p{font-size:18px;line-height:1.65;color:#405374;margin:14px auto;max-width:490px}
.journey-welcome small{display:block;color:#586b8b;font-size:13px;margin-top:16px}
.date-choices{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:20px 0}
.date-choices button{background:#eaf2ff;border:2px solid #205bd1;border-bottom-width:6px;border-radius:15px;padding:17px 9px;min-height:74px;color:#123a81;font-size:17px;font-weight:800;display:flex;gap:9px;align-items:center;justify-content:center}
.date-choices button:nth-child(2){background:#fff0ee;border-color:#e34540;color:#8d2626}
.date-choices button:nth-child(3){background:#fff8d9;border-color:#dca521;color:#745300}
.date-choices button:nth-child(4){background:#efebff;border-color:#7150ce;color:#513394}
.date-choices button:hover{filter:brightness(.97);transform:translateY(-2px)}
.date-choices button:active,.journey-cta:active{transform:translateY(3px);box-shadow:none}
.journey-welcome .journey-cta{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-height:62px;background:#ed423c;color:#fff;border:2px solid #ac252b;border-radius:17px;box-shadow:0 5px 0 #a82430;font-size:21px;font-weight:900;margin:25px 0 18px}
html[dir=ltr] .journey-cta>span{transform:rotate(180deg)}
.journey-welcome .journey-cta:hover{background:#d93635}
.journey-more{margin-top:25px;border-top:1px solid #dce5f4;padding-top:16px;text-align:center}
.journey-more summary{cursor:pointer;color:#586b8b;font-size:14px}
.journey-more>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:16px}
.journey-more button{font-size:13px;padding:9px 12px}
.journey-welcome.compact{padding-top:35px;padding-bottom:35px}
.game-badge{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:8px auto 24px;background:#ffe168;color:#123878;border:4px solid #c59414;border-radius:28px;width:130px;height:112px;padding:16px 8px;font-size:54px;font-weight:900;box-shadow:0 7px 0 #efbd34;transform:rotate(-5deg)}
.game-badge span{font-size:22px}.game-badge.reward{align-items:center;font-size:57px}
.route-dots{display:flex;gap:8px;justify-content:center;align-items:center;margin:20px auto;direction:ltr}
.route-dots>span{display:grid;place-items:center;width:46px;height:46px;background:#e6edf9;border:3px solid #c4d2e9;border-radius:50%;color:#607393;font-size:17px;font-weight:900}
.route-dots>.current{background:#2668ec;border-color:#124fb5;color:white;box-shadow:0 4px 0 #0b3489;transform:scale(1.12)}
.route-dots>.done{background:#c3ef6c;border-color:#548828;color:#214817}
.focus-topics{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 0}
.focus-topics small{width:100%;margin:0 0 4px}.focus-topics span{background:#eaf1ff;color:#1d50ab;border:1px solid #9dbcee;padding:7px 13px;border-radius:18px;font-weight:700}
.journey-welcome .daily-goal{background:#fff6d0;color:#715312;border-radius:13px;padding:10px;font-size:15px}
body.journey-mode.focus-mode{background:#102a65}
.journey-mode.focus-mode .lesson{background:#102a65;min-height:calc(100dvh - 110px)}
.journey-mode.focus-mode .lesson-top{background:#071d48;color:#fff;border:0;padding-block:9px}
.journey-mode.focus-mode .lesson-top #count{background:#23417b;color:#fff}
.journey-mode.focus-mode .lesson-progress{height:7px;background:#25467f}
.journey-mode.focus-mode .lesson-progress>div{background:#ffd957}
.journey-mode .question-head h2{color:#fff;font-size:28px;line-height:1.45;letter-spacing:0}
.journey-mode .question-head .tag{background:#dbe9ff;color:#173f88;font-weight:800}
.journey-mode .question-head p,.journey-mode .answers-label,.journey-mode .exercise-note{color:#dce7ff}
.journey-mode .question-head{padding-top:12px}
.journey-mode .answer{border:3px solid #3978e6;border-bottom-width:7px;border-radius:17px;background:#fff;min-height:68px;font-size:17px;font-weight:700;padding:13px;color:#153366}
.journey-mode .answer .letter{width:36px;height:36px;border-radius:10px;background:#2169e9;color:#fff;font-size:17px;border-bottom:3px solid #10449e}
.journey-mode .answer:nth-child(2) .letter{background:#d94743;border-color:#9c2729}
.journey-mode .answer:nth-child(3) .letter{background:#6c43c9;border-color:#442685}
.journey-mode .answer:nth-child(4) .letter{background:#d68b12;border-color:#945800}
.journey-mode .answer:not(:disabled):hover{background:#eaf2ff;border-color:#78abff;transform:translateY(-2px)}
.journey-mode .answer:active{transform:translateY(3px)}
.journey-mode .answer.correct{background:#e0fac2;border-color:#56a139;color:#1c5319}
.journey-mode .answer.wrong{background:#ffe4de;border-color:#eb5143;color:#852725}
.journey-mode .answer.selected{background:#d5e8ff;border-color:#ffd65b}
.journey-mode .answer:disabled:not(.correct):not(.wrong):not(.selected){opacity:.72}
.journey-mode .answer.correct .letter{background:#377e23;border-color:#205616}
.journey-mode .answer.wrong .letter{background:#c5392d;border-color:#8c221b}
.journey-mode .feedback{border:3px solid #e85a44;background:#fff1e9;border-radius:19px}
.journey-mode .feedback.good{border-color:#70b743;background:#e9fbd9}
.journey-mode .feedback h3{font-size:25px}.journey-mode .success-thumb{font-size:55px}
.journey-mode .practice-controls{background:#f2f6ff;border:2px solid #4169ab;border-bottom:0;box-shadow:0 -5px 0 #071d48}
.journey-mode .practice-controls .primary{background:#ed423c;border:2px solid #ad2529;border-bottom-width:5px;border-radius:13px}
.journey-mode .practice-controls .secondary{border:2px solid #a9bddf;border-bottom-width:5px;border-radius:13px}
.journey-mode .game-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#d9e8ff;padding:10px 28px 0;font-size:13px}
.journey-mode .game-progress .route-dots{margin:0;gap:7px}.journey-mode .game-progress .route-dots>span{width:30px;height:30px;font-size:12px;border-width:2px}
.journey-mode .streak{color:#ffe273;font-weight:800}
.rotate-hint{display:none}.journey-mode .original-road-scene,.journey-mode .official-image{border:3px solid #6c95dc}
@media(max-width:700px){
 .journey-mode .header{height:67px;padding:0 17px}.journey-mode main{padding:8px 13px 18px}
 .journey-welcome{padding:22px 19px;border-radius:25px}.journey-art{height:135px;margin:0 auto}
 .journey-welcome h1{font-size:29px;margin:10px 0 18px}.journey-welcome h2{font-size:21px}.journey-welcome p{font-size:17px}
 .journey-kicker{font-size:13px}.date-choices{gap:10px;margin:17px 0}.date-choices button{font-size:16px;min-height:68px;padding:12px 6px}
 .journey-welcome.compact{padding:25px 20px}.journey-welcome .journey-cta{font-size:20px}
 .route-dots{gap:8px}.route-dots>span{width:36px;height:36px;font-size:14px}
 .journey-mode .question-head h2{font-size:24px}.journey-mode .answer{font-size:16px;min-height:61px;padding:11px}
 .journey-mode .game-progress{padding:12px 17px 0;font-size:11px}.journey-mode .game-progress .route-dots{gap:5px}
 .journey-mode .game-progress .route-dots>span{width:25px;height:25px;font-size:11px}
}
@media(max-width:760px) and (orientation:portrait){
 .journey-mode .rotate-hint{display:flex;gap:8px;justify-content:center;align-items:center;padding:9px 14px;background:#23467f;color:#e6efff;font-size:12px}
 .rotate-hint button{border:0;background:transparent;color:#fff;font-size:19px;padding:0 5px}
}
@media(orientation:landscape) and (max-height:600px){
 .focus-mode .lesson-top{padding-block:5px}.focus-mode .lesson-top button{min-height:32px;padding:5px 10px}
 .game-progress{padding:7px 18px 0}.game-progress .route-dots>span{width:23px;height:23px;font-size:10px}
 .question-head{padding:10px 18px}.question-head h2{font-size:20px;line-height:1.35}
 .question-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:15px;padding-inline:18px}
 .question-body.text-only{display:block}.question-body.text-only .answers{display:grid;grid-template-columns:1fr 1fr}
 .answer{font-size:14px;min-height:48px;padding:7px;border-bottom-width:5px}.answer .letter{width:27px;height:27px;font-size:13px}
 .official-image img,.original-road-scene svg,.diagram svg{max-height:235px}
 :is(.practice-controls,.exam-controls){padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));gap:5px 12px}
 :is(.practice-controls,.exam-controls) button{min-height:37px;padding:6px 12px;font-size:15px}.navigation-feedback{font-size:12px}
 .journey-welcome{max-width:740px}.journey-art{height:105px}.journey-welcome h1{font-size:28px}.date-choices{grid-template-columns:repeat(4,1fr)}
}

html{scroll-padding-top:75px}

.experience-choices{display:grid;gap:13px;margin:26px 0 10px}.experience-choices button{display:flex;align-items:center;gap:15px;justify-content:center;min-height:70px;border:2px solid #2867d8;border-bottom-width:6px;border-radius:15px;color:#163f86;background:#edf4ff;font-size:18px;font-weight:800}.experience-choices button:nth-child(2){border-color:#dd4841;background:#fff0ed;color:#892c28}.experience-choices button:nth-child(3){border-color:#6d4acb;background:#f0eaff;color:#4e318f}.experience-choices button:active{transform:translateY(3px)}.journey-welcome .onboarding-step{font-weight:800;color:#2862b8;margin-top:12px}

@media(max-width:950px) and (orientation:portrait){body .rotate-hint{display:flex;align-items:center;gap:9px;padding:10px 15px;margin:0;background:#e7effc;color:#233f70;font-size:13px;line-height:1.5}body .rotate-hint button{background:transparent;border:0;color:inherit;font-size:22px;min-width:32px;min-height:32px}}
#restart-dialog{max-width:460px}#restart-text{line-height:1.8}#restart-home,#restart-session{white-space:nowrap;font-size:13px;padding:8px 10px;min-height:38px}#restart-session{margin-inline-start:auto}.focus-mode #exit-session{margin-inline-start:0}.journey-mode .header #restart-home{background:#264777;color:white;border-color:#6e93c7}@media(max-width:700px){.header-end{gap:8px}.header .country{display:none}#restart-home{font-size:12px;padding:7px}.brand-sub{font-size:10px}.focus-mode .lesson-top{gap:6px}#restart-session{font-size:12px}}
@media(orientation:landscape) and (max-height:600px){.focus-mode #exercise{padding-bottom:100px}.exam-toolbar{padding:5px 18px}.question-grid{max-width:800px;margin-inline:auto}.focus-mode .lesson-top{position:relative}.question-body .answers{grid-template-columns:1fr}.question-body.text-only .answers{grid-template-columns:1fr 1fr}.exam-controls{width:min(1000px,100%)}}
