@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
@font-face{font-family:VillageSign;src:url('./assets/fonts/Gaegu-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap;}
@font-face{font-family:VillageRound;src:url('./assets/fonts/Jua-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;}
:root{--ink:#263e36;--green:#34634e;--paper:#fffef9;--gold:#f4c858}*{box-sizing:border-box}body{margin:0;overflow:hidden;color:var(--ink);font:14px 'Noto Sans KR',sans-serif;background:#a8c395}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;touch-action:none;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #7195b2;outline-offset:3px}button:active,.pressed{transform:translateY(2px);filter:brightness(.95)}[hidden]{display:none!important}#world{position:fixed;inset:0}#world canvas{display:block;width:100%;height:100%}.hud{z-index:2}header{position:fixed;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none}.brand{font:27px 'Jua',sans-serif;color:var(--ink);background:var(--paper);padding:10px 15px;border-radius:12px;box-shadow:0 3px 15px #263e3612}.brand span{color:#b77d28}.top-right{display:flex;gap:7px;pointer-events:auto}.top-right button{height:43px;min-width:43px;padding:0 12px;background:var(--paper);border-radius:12px;box-shadow:0 3px 15px #263e3612;font-size:11px}#pause{font-size:21px}
#mission{position:fixed;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:12px 20px 12px 12px;border-radius:14px;background:var(--paper);min-width:310px;max-width:480px;box-shadow:0 5px 20px #263e3620;border-bottom:3px solid #e3b74e}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#edf2e8;font-size:23px;flex-shrink:0}#mission small{display:block;font-size:10px;color:#718379;margin-bottom:3px}#mission strong{font-size:15px;font-weight:800}#distance{color:#6d7f72;font-size:12px;white-space:nowrap}
#map-box{position:fixed;left:24px;top:92px;width:176px;background:var(--paper);padding:8px;border-radius:16px;box-shadow:0 5px 20px #263e361a;text-align:center}#minimap{display:block;width:160px;height:160px;border-radius:10px}#map-box span{display:block;font-size:10px;padding-top:6px;color:#718379}#map-box b{color:var(--green);margin:0 5px}#station-peek{position:fixed;right:24px;top:87px;width:190px;background:var(--paper);padding:13px;border-radius:16px;box-shadow:0 5px 20px #263e3620;text-align:center}#station-peek>b{display:block;font-size:12px;margin-bottom:8px}#station-clock svg{width:100%;height:auto;display:block}#nav-arrow{position:fixed;top:106px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--green);color:white;border-radius:30px;font-size:11px}#arrow{font-size:20px;display:block}#toast{position:fixed;bottom:160px;left:50%;transform:translate(-50%,10px);background:var(--green);color:white;padding:10px 18px;border-radius:30px;opacity:0;transition:.2s;pointer-events:none;z-index:6;font-size:13px;max-width:85vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}#interact{position:fixed;bottom:175px;left:50%;transform:translateX(-50%);background:var(--gold);border:2px solid white;padding:13px 22px;border-radius:30px;font-weight:800}#drift-text{position:fixed;top:45%;right:22%;font:italic 30px 'Jua';color:white;text-shadow:0 2px #42684b;opacity:0;pointer-events:none}#drift-text.active{opacity:1}
.steering{position:fixed;left:26px;bottom:27px;display:flex;gap:10px}.steering button{width:72px;height:70px;border-radius:20px;background:#fffef9e8;border:2px solid white;font-size:26px;box-shadow:0 4px 0 #2b46352b;user-select:none}.pedals{position:fixed;right:26px;bottom:27px;display:grid;grid-template-columns:68px 68px 74px;gap:8px;align-items:end}.pedals button{border:2px solid #ffffffb0;border-radius:16px;font-size:12px;font-weight:800;color:white;box-shadow:0 4px 0 #2b46352b;user-select:none}.pedals small{display:block;font-size:8px;opacity:.7;margin-top:4px}.pedals .drift{background:#46745d;height:60px}.pedals .brake{background:#52635be8;height:60px}.pedals .gas{background:var(--gold);color:#4b482c;height:80px}.pedals .boost{grid-column:1/4;height:34px;background:var(--paper);color:var(--green);border:1px solid white;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px}.pedals .boost small{margin:0}.dashboard{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:165px;text-align:center;color:var(--ink);background:#fffef9ed;padding:9px 15px;border-radius:18px;box-shadow:0 4px 20px #263e3612}.speed{display:flex;align-items:baseline;justify-content:center;gap:6px}.speed strong{font-size:36px;line-height:1;font-weight:800;letter-spacing:-2px}.speed span{font-size:9px}.speed i{font-size:8px;color:#7a8b7b;font-style:normal}.boost-meter{height:4px;background:#dce4d9;border-radius:4px;overflow:hidden;margin-top:8px}.boost-meter>div{height:100%;background:#d5a936}#auto{font-size:9px;color:#65796c;background:none;padding:0;margin-top:6px}#speed-lines{position:fixed;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 100px #f6d66880}body.boosting #speed-lines{opacity:1}
dialog{border:0;border-radius:24px;padding:0;background:var(--paper);color:var(--ink);max-height:94dvh;overflow:auto;box-shadow:0 24px 80px #1b332e40}dialog::backdrop{background:#203d3540;backdrop-filter:blur(3px)}body:has(dialog[open]) .hud{visibility:hidden}#intro{position:fixed;left:5vw;right:auto;top:auto;bottom:9vh;margin:0;width:370px;padding:30px;border:1px solid white}#intro::backdrop{background:linear-gradient(90deg,#e8eddd22,transparent);backdrop-filter:none}.intro-tag{color:#6b8373;font-size:11px}#intro h1{text-align:center;font:64px 'Jua';margin:17px 0 0;letter-spacing:-3px}#intro h1 span{color:#bd9134}#intro h2{font:20px 'Jua';color:#728373;margin:3px 0 28px;letter-spacing:3px}.lesson-picker>div{display:flex;gap:6px}.lesson-picker button{flex:1;border:1px solid #e0e5db;background:#f0f3eb;border-radius:10px;padding:12px 4px;font-size:11px}.lesson-picker button.selected{background:var(--green);border-color:var(--green);color:white}.lesson-picker b{font-weight:600}.primary{display:block;width:100%;border-radius:12px;background:var(--gold);padding:14px;font-weight:800;font-size:14px}#start{margin-top:18px}#lesson{width:740px}#lesson[open]{display:grid;grid-template-columns:.85fr 1fr}.lesson-left{background:#edf2e8;padding:32px}.eyebrow{font-size:10px;color:#718379}.passenger{width:80px;height:80px;border-radius:20px;background:#d5e2ce;display:grid;place-items:center;font:36px 'Jua';margin:24px 0 16px}.passenger img{width:100%;height:100%;object-fit:cover;border-radius:20px}.lesson-left h2{font:26px 'Jua';margin:8px 0}.lesson-left p{font-size:13px;line-height:1.7}.ticket{background:var(--paper);padding:17px;border-radius:12px;margin-top:20px;border:1px dashed #c8d3bd}.ticket small{font-size:10px;color:#718379}.ticket strong{display:block;font:21px 'Jua';margin:8px 0}#requested-time{display:block;font-size:15px;color:#926f28}.lesson-right{padding:27px}.close{position:absolute;right:12px;top:10px;width:28px;height:28px;background:#e5eadf;border-radius:50%;font-size:23px;z-index:2}.clock-heading{display:flex;align-items:center;justify-content:space-between;padding-right:18px;font-size:12px}#clock{display:block;width:100%;max-width:280px;margin:12px auto 0;touch-action:none;cursor:grab;user-select:none}.legend{display:flex;justify-content:center;gap:14px;font-size:10px;margin:8px 0;color:#6c8073}.clock-adjust{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px}.clock-adjust button{padding:9px 2px;font-size:11px;border-radius:8px;background:#edf2e8}#feedback{font-size:12px;min-height:20px;margin:12px 0;color:#718379}#settings{width:380px;padding:28px;text-align:center}#settings h2{font:27px 'Jua';margin:0 0 22px}.instructions{font-size:12px;line-height:1.8;color:#718379;margin:24px 0}#recover{margin-top:14px;background:none;text-decoration:underline;font-size:12px}.credits-link{display:block;font-size:10px;color:#718379;margin-top:18px}#asset-loading{position:fixed;inset:0;z-index:100;background:#f4f6ed;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}#asset-loading strong{font:45px 'Jua'}#asset-loading span{font-size:12px;color:#718379}.fatal{position:fixed;inset:20%;padding:30px;background:var(--paper);border-radius:20px;text-align:center}body[data-phase=setting] .pedals,body[data-phase=setting] .steering{opacity:.35}
@media(max-width:760px){header{top:12px;left:12px;right:12px}.brand{font-size:22px;padding:8px 11px}.top-right button{height:36px;min-width:36px;font-size:9px}#mission{top:63px;min-width:0;width:calc(100% - 24px);max-width:420px;padding:9px 12px;gap:10px}#mission strong{font-size:12px}.avatar{width:34px;height:34px;font-size:20px}#mission small{font-size:9px}#map-box{left:12px;top:137px;width:128px;padding:6px}#minimap{width:116px;height:116px}#station-peek{top:137px;right:12px;width:145px;padding:10px}#station-peek>b{font-size:10px}#nav-arrow{top:137px;font-size:10px;left:auto;right:12px;transform:none;max-width:185px}#intro{left:5vw;bottom:6vh;width:90vw;max-width:370px;padding:26px}.steering{left:12px;bottom:25px;gap:6px}.steering button{width:51px;height:60px;font-size:21px;border-radius:16px}.pedals{right:12px;bottom:24px;grid-template-columns:49px 53px;gap:6px}.pedals .drift{grid-column:1;grid-row:1;height:43px;font-size:9px}.pedals .brake{grid-column:1;grid-row:2;height:43px;font-size:9px}.pedals .gas{grid-column:2;grid-row:1/3;height:92px}.pedals .boost{grid-column:1/3;height:30px}.pedals small{font-size:7px}.dashboard{width:100px;padding:8px;bottom:28px}.speed strong{font-size:29px}.speed i{display:none}.speed span{font-size:7px}#auto{font-size:7px}.boost-meter{margin-top:5px}#toast{bottom:175px;font-size:12px}#interact{bottom:180px}#lesson{width:94vw}#lesson[open]{grid-template-columns:1fr}.lesson-left{padding:18px 22px}.passenger{float:left;width:54px;height:54px;margin:10px 12px 0 0;font-size:26px}.lesson-left h2{font-size:22px;margin:8px 0 3px}.lesson-left p{font-size:12px;margin:0}.ticket{margin-top:12px;padding:10px;clear:both}.ticket strong{font-size:18px;margin:3px 0}#requested-time{font-size:13px}.lesson-right{padding:15px 22px}#clock{max-width:220px;margin-top:6px}.legend{margin:5px 0}.clock-adjust{margin-top:8px}#feedback{margin:8px 0}#settings{width:90vw;max-width:380px}}
@media(max-height:550px){header{top:12px;left:16px;right:16px}.brand{font-size:21px;padding:8px 12px}.top-right button{height:35px;min-width:35px}#mission{top:12px;left:50%;width:auto;min-width:280px;max-width:390px;padding:8px 12px;gap:8px}#mission strong{font-size:12px}#mission small{font-size:8px}.avatar{width:30px;height:30px;font-size:18px}#map-box{top:66px;left:16px;width:116px;padding:6px}#minimap{width:104px;height:104px}#map-box span{font-size:8px;padding-top:4px}#station-peek{top:64px;right:16px;width:132px;padding:9px}#station-peek>b{font-size:10px}#nav-arrow{top:70px;font-size:10px;left:50%;right:auto;transform:translateX(-50%)}.steering{bottom:16px;left:16px}.steering button{width:55px;height:52px;border-radius:15px}.pedals{bottom:16px;right:16px;grid-template-columns:54px 54px 60px;gap:6px}.pedals .drift,.pedals .brake{height:47px;grid-row:1;font-size:10px}.pedals .drift{grid-column:1}.pedals .brake{grid-column:2}.pedals .gas{grid-column:3;grid-row:1;height:60px}.pedals .boost{grid-column:1/4;height:27px}.dashboard{width:135px;bottom:16px;padding:7px 12px}.speed strong{font-size:30px}#auto{font-size:8px}#intro{bottom:6vh;max-width:320px;padding:20px 25px}#intro h1{font-size:48px;margin:8px 0 0}#intro h2{font-size:17px;margin-bottom:16px}#intro .lesson-picker button{padding:9px 2px}#start{margin-top:12px;padding:11px}#lesson{width:700px;max-width:94vw}#lesson[open]{grid-template-columns:.8fr 1fr}.lesson-left{padding:20px}.lesson-right{padding:14px 22px}.passenger{float:left;width:52px;height:52px;margin:10px 10px 5px 0}.lesson-left h2{font-size:22px}.lesson-left p{font-size:12px}.ticket{padding:12px;clear:both;margin-top:18px}#clock{max-width:175px;margin-top:5px}.legend{font-size:9px;margin:3px 0}.clock-adjust{margin-top:5px}.clock-adjust button{padding:6px 2px;font-size:10px}#feedback{margin:5px 0;font-size:11px;min-height:15px}#submit{padding:9px}#toast{bottom:120px}#interact{bottom:125px}}

/* A light game HUD: the street stays visible, controls share one visual language. */
header .brand{background:transparent;color:#fff7dc;text-shadow:0 2px 0 #3b5d4e,0 3px 8px #304c4655;box-shadow:none;font-size:29px;padding:8px 0}.brand span{color:#f8d369}.top-right button{background:#345b4a9e;color:#fff8e5;border:1px solid #fff5d17a;border-radius:50%;box-shadow:none;font-size:10px;min-width:42px;height:42px;padding:0 9px}#mission{background:#315b49ba;color:#fff9e8;border:1px solid #edf3db70;border-radius:30px;min-width:0;padding:10px 24px;box-shadow:none;gap:12px}#mission .avatar{display:none}#mission small{color:#e7d6a4;font-size:9px}#mission strong{font-size:14px}#distance{color:#ffdf83}#map-box{background:transparent;box-shadow:none;padding:0;width:154px}#minimap{width:154px;height:154px;border-radius:50%;border:3px solid #fff3cfbb;box-shadow:0 3px 12px #2f58442a}#map-box>span{color:white;text-shadow:0 1px 3px #304b3e}#map-box b{color:#ffdf87}.dashboard{background:transparent;box-shadow:none;color:white;text-shadow:0 2px 5px #29483dcc;padding:0;width:145px}.speed strong{font-size:42px}.speed i{color:#fff0bb}#auto{color:#fff7df;text-shadow:0 1px 4px #29483d}.boost-meter{height:5px;background:#294e4399;border:1px solid #fff2c099}.boost-meter>div{background:#f6cf73}.steering button,.pedals .brake{background:#3557476e;color:#fff9e9;border:2px solid #fff7dfad;box-shadow:inset 0 1px 3px #ffffff44;border-radius:50%}.steering button{width:66px;height:66px}.pedals .drift{background:#436e5abf;border-radius:50%;height:62px}.pedals .gas{background:linear-gradient(#ffe2a0,#e8b95b);border-color:#fff2d0;border-radius:22px;color:#69532e;box-shadow:inset 0 2px 0 #fff6d6,0 3px 0 #aa844633}.pedals .boost{background:#355747a8;color:#fff2ce;border-color:#fff0cb80;border-radius:20px}#intro{left:auto;right:4vw;bottom:6vh;width:310px;background:transparent;border:0;box-shadow:none;padding:20px;color:#fff7df;overflow:visible}#intro::backdrop{background:linear-gradient(0deg,#294a3b45,transparent 45%);backdrop-filter:none}#intro h1{color:#fff6d9;text-shadow:0 3px 0 #3c6250,0 6px 16px #2e524888;font-size:60px}#intro h1 span{color:#f8ce74}#intro h2{color:#fff1c6;text-shadow:0 2px 5px #274a3f;letter-spacing:3px}.intro-tag{color:#fff5da;text-shadow:0 1px 4px #274a3f}#intro .lesson-picker button{background:#355747bf;border-color:#fff1c288;color:#fff5dd;border-radius:18px}#intro .lesson-picker button.selected{background:#fff0bf;color:#675437;border-color:white}#start{background:linear-gradient(#ffe5a6,#eab95d);border:2px solid #fff1c2;border-radius:30px;box-shadow:0 4px 0 #9c7f4440;color:#604b29}#station-peek{background:#fff8e8e8;border:2px solid #d8cbae;border-radius:20px;box-shadow:0 4px 12px #31564025}#toast{background:#315b49c7;border:1px solid #fff0c488}#lesson{background:#fff9e9}#lesson .lesson-left{background:#e7eddb}#lesson .passenger{width:100px;height:100px;background:#d4e1c5;border-radius:50%;overflow:hidden}#lesson .passenger img{border-radius:50%}
@media(max-width:760px){header .brand{font-size:25px}.top-right button{height:35px;min-width:35px;font-size:8px}#mission{width:auto;max-width:calc(100vw - 24px);white-space:nowrap;padding:9px 17px}#mission strong{font-size:12px}#map-box{width:116px}#minimap{width:116px;height:116px}.steering button{width:51px;height:55px}.dashboard{width:105px}.speed strong{font-size:31px}.pedals .drift{height:43px}#intro{width:310px;max-width:90vw;right:5vw;bottom:5vh}#intro h1{font-size:54px}#lesson .passenger{width:58px;height:58px}}
@media(max-height:550px){header .brand{font-size:23px}#mission{padding:8px 18px;min-width:0}#mission strong{font-size:12px}#map-box{width:104px}#minimap{width:104px;height:104px}.steering button{width:52px;height:52px}.pedals .drift{height:47px}.speed strong{font-size:32px}#intro{width:270px;right:3vw;bottom:4vh;padding:12px}#intro h1{font-size:43px}#intro h2{font-size:15px;margin-bottom:12px}#intro .lesson-picker button{font-size:9px;padding:9px 2px}#start{padding:10px}#lesson .passenger{width:58px;height:58px}}



/* Soft cartoon game chrome. */
:root{--ink:#40465c;--green:#647c9c;--paper:#fffefb;--gold:#ffd265}
header .brand,#intro h1{color:white;text-shadow:0 3px 0 #6976a1,0 5px 10px #394c6655}.brand span,#intro h1 span{color:#ffda73}
.top-right button{background:#8da3cf;color:#fff;border:2px solid #fff;border-radius:16px;box-shadow:0 3px 0 #667da4}
#mission{background:#fff9f0f5;color:#444b64;border:3px solid white;border-bottom-color:#f2bf83;border-radius:20px;box-shadow:0 4px 0 #536b8722}#mission strong{color:#414861}#mission small{color:#a16854}#distance{color:#7b648f}
#minimap{border:4px solid white;outline:2px solid #9ab6bf}#map-box>span{color:#4e637a;background:#fffdf4;border-radius:15px;margin-top:7px;padding:3px 9px;text-shadow:none}#map-box b{color:#ad7941}
.steering button{background:#b7def1;color:#48627c;border:3px solid white;box-shadow:0 4px 0 #759bb8}.pedals .drift{background:#b59ddf;color:#3f355c;border:3px solid white;box-shadow:0 4px 0 #8770ac}.pedals .brake{background:#f0b3b6;color:#68454c;border:3px solid white;box-shadow:0 4px 0 #b77f8b}.pedals .gas{background:#ffda77;color:#685328;border:3px solid white;box-shadow:0 4px 0 #c4a053}.pedals .boost{background:#9bc8bd;color:#355e59;border:2px solid white;box-shadow:0 3px 0 #709c92}.pedals small{opacity:.9}
#intro h2,.intro-tag{color:white;text-shadow:0 2px 4px #607d93}#intro .lesson-picker button{background:#fffdf5;color:#5b6584;border:2px solid white;border-radius:16px;box-shadow:0 3px 0 #667c9b66}#intro .lesson-picker button.selected{background:#c5dcf3;color:#3d5876;border-color:white}#start{background:#ffda77;border:3px solid white;border-radius:24px;color:#665027;box-shadow:0 4px 0 #b89752}
#station-peek{background:#fffdf7f5;border:3px solid white;box-shadow:0 4px 0 #8a9fab66}#lesson{background:#fffdf7;border:3px solid white}#lesson .lesson-left{background:#e7edf8}#lesson .passenger{background:#d0deee;border:3px solid white}.ticket{background:white;border-color:#c2ccdf}#requested-time{color:#8d6841}.primary{background:#ffda77;color:#665027}#toast,#nav-arrow{background:#738eafee;border:2px solid white}#asset-loading{background:#edf4fb}#asset-loading strong{color:#718cb2}#asset-loading span{color:#667995}

/* Thumb steering and landscape-first play. */
#joystick{position:relative;width:126px;height:126px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle,#bcd6e9cc 0 47%,#779cb9b8 48% 51%,#cce3f0b8 52%);box-shadow:0 4px 0 #557b9566,inset 0 2px 12px #fff8;touch-action:none;user-select:none;cursor:grab;outline-offset:5px}#joystick:active{cursor:grabbing}#stick-knob{position:absolute;width:54px;height:54px;left:calc(50% - 27px);top:calc(50% - 27px);border:3px solid white;border-radius:50%;display:grid;place-items:center;background:#edf8ff;box-shadow:0 4px 8px #4a698e55;color:#668bb0;font-size:25px;pointer-events:none}.stick-left,.stick-right{position:absolute;top:calc(50% - 10px);font-size:16px;color:#537c9b;pointer-events:none}.stick-left{left:8px}.stick-right{right:8px}
.pedals{grid-template-columns:66px 78px 78px}.pedals .brake{height:82px;border-radius:19px;background:#f6a1a8;color:#693740;font-size:12px}.pedals .brake b{display:block;font-size:22px;line-height:1.1;margin-bottom:4px}.pedals .gas{height:94px}.landscape-note{font-size:12px;color:white;text-shadow:0 1px 4px #465f7e;margin:0 0 16px}
#rotate-screen{max-width:none;max-height:none;width:100vw;height:100dvh;inset:0;margin:0;padding:20px;border:0;border-radius:0;background:#eaf3fb;color:#4b6387;overflow:hidden}#rotate-screen[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px}#rotate-screen::backdrop{background:#eaf3fb}#rotate-screen h1{font:52px 'Jua';margin:0;color:#7596c2}#rotate-screen h1 span{color:#dca847}#rotate-screen p{font-size:17px;font-weight:700;margin:0}.rotate-phone{width:110px;height:61px;border:5px solid #8faed3;border-radius:15px;display:grid;place-items:center;background:white;font-size:40px;color:#cf9e43;box-shadow:0 6px 0 #c9dbea}
@media(max-height:550px){#joystick{width:104px;height:104px}#stick-knob{width:46px;height:46px;left:calc(50% - 23px);top:calc(50% - 23px)}.pedals{grid-template-columns:54px 66px 66px}.pedals .brake{height:67px;font-size:10px}.pedals .brake b{font-size:18px;margin-bottom:2px}.pedals .gas{height:78px}.landscape-note{font-size:10px;margin-bottom:12px}.steering{bottom:18px;left:max(18px,env(safe-area-inset-left))}.pedals{right:max(18px,env(safe-area-inset-right));bottom:18px}}

/* Two controls only: brake left, full driving stick right. */
.steering{left:auto;right:max(26px,env(safe-area-inset-right));bottom:26px}.pedals{right:auto;left:max(26px,env(safe-area-inset-left));bottom:26px;display:block}.pedals .brake{width:88px;height:88px;border-radius:50%;font-size:12px}.pedals .brake b{font-size:27px;margin-bottom:6px}#joystick{width:138px;height:138px}.stick-up,.stick-down{position:absolute;left:calc(50% - 7px);color:#537c9b;font-size:15px;pointer-events:none}.stick-up{top:6px}.stick-down{bottom:6px}#joystick:focus-visible{outline:3px solid #5d79a4;outline-offset:5px}.dashboard{bottom:30px}
@media(max-height:550px){.steering{left:auto;right:max(18px,env(safe-area-inset-right));bottom:18px}.pedals{right:auto;left:max(18px,env(safe-area-inset-left));bottom:18px}.pedals .brake{width:78px;height:78px;font-size:11px}.pedals .brake b{font-size:23px;margin-bottom:4px}#joystick{width:116px;height:116px}.dashboard{bottom:24px}}

/* Rounded, readable numerals match the village's wall signs. */
#numbers text{font-family:VillageRound,sans-serif;font-weight:400;}
#station-peek>b,#destination-name{font-family:VillageRound,sans-serif;font-weight:400;}

#station-name,#destination-name{font-family:VillageSign,sans-serif;font-weight:700;}

#parking-feedback{position:fixed;left:50%;bottom:24%;transform:translateX(-50%);z-index:18;min-width:150px;padding:12px 22px;background:#fffbf1;color:#b53632;border:3px solid #ef5149;border-radius:18px;text-align:center;pointer-events:none;font-family:VillageRound,sans-serif;box-shadow:0 4px 0 #574a3526}#parking-feedback[hidden]{display:none}#parking-feedback b{font-size:21px;font-weight:400;white-space:nowrap}#parking-feedback span{display:block;height:4px;margin-top:7px;border-radius:3px;background:currentColor;transform:scaleX(var(--parking-progress,0));transform-origin:left}#parking-feedback[data-state="ready"],#parking-feedback[data-state="success"]{border-color:#36cf77;color:#16713e}#parking-feedback[data-state="success"]{animation:parking-pop .32s ease-out;background:#effff2}@keyframes parking-pop{0%{transform:translateX(-50%) scale(.85)}60%{transform:translateX(-50%) scale(1.07)}100%{transform:translateX(-50%) scale(1)}}@media(prefers-reduced-motion:reduce){#parking-feedback{animation:none!important}}

/* Crisp left-side clock/map; parking is an explicit right-thumb action. */
#world canvas{image-rendering:auto}
#map-box{left:max(22px,env(safe-area-inset-left));right:auto;top:92px}
#station-peek{left:max(22px,env(safe-area-inset-left));right:auto;top:92px;width:218px;padding:12px;border-radius:25px;background:#fffefb;box-shadow:0 4px 0 #86a49c55}
#station-clock svg{display:block;width:100%;height:auto;shape-rendering:geometricPrecision}
#station-name{display:block;text-align:center;font-family:VillageRound,sans-serif;font-size:15px;color:#46675e;margin-bottom:6px}
.pedals{left:auto;right:max(180px,env(safe-area-inset-right));bottom:26px;display:flex;flex-direction:column;gap:10px}
.pedals .brake,.pedals .park{width:76px;height:70px;border-radius:20px;border:3px solid white;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:VillageRound,sans-serif;font-size:13px}
.pedals .brake b,.pedals .park b{font:27px VillageRound,sans-serif;margin:0 0 3px;line-height:1}
.pedals .park{background:#a8d7bb;color:#315949;box-shadow:0 4px 0 #72a48a}
.pedals button:disabled{opacity:.45;cursor:default}
#clock{filter:drop-shadow(0 3px 1px #759b8c30);shape-rendering:geometricPrecision}
#numbers text{fill:#283f4c}
#round-result{width:360px;max-width:90vw;padding:32px;text-align:center}#round-result h2{font:29px VillageRound,sans-serif;margin:16px 0;color:#46735e}#round-result p{font-size:13px;line-height:1.8;margin-bottom:24px}
@media(max-height:550px){#map-box{left:16px;top:66px}#station-peek{left:16px;right:auto;top:64px;width:164px;padding:8px}#station-name{font-size:12px;margin-bottom:3px}.pedals{left:auto;right:146px;bottom:18px;gap:9px}.pedals .brake,.pedals .park{width:65px;height:59px;border-radius:17px;font-size:11px}.pedals .brake b,.pedals .park b{font-size:23px;margin-bottom:2px}#clock{max-width:195px}.lesson-right{padding-top:8px;padding-bottom:8px}#round-result{padding:23px}}

#hearts{position:fixed;left:25px;top:70px;display:flex;gap:5px;font-size:25px;line-height:1;color:#e9657c;filter:drop-shadow(0 2px 0 white)}#hearts .empty{color:#bdc5c9}#map-box,#station-peek{top:112px}#gameover{width:370px;max-width:90vw;padding:30px;text-align:center}#gameover h2{font:25px VillageRound,sans-serif;color:#a65664}#gameover p{font-size:14px;line-height:1.8}#gameover .primary{margin-top:20px}@media(max-height:550px){#hearts{left:16px;top:52px;font-size:20px}#map-box,#station-peek{top:80px}#gameover{padding:22px}}

#intro{background:#fffdf8f5;color:#344f50;border:3px solid white;border-radius:25px;box-shadow:0 8px 28px #344f5033;width:375px;max-height:94dvh;overflow:auto;padding:23px;bottom:3vh}#intro h1{font-size:45px;color:#4e7f80;text-shadow:none;margin:5px 0}#intro h2{font-size:15px;color:#617777;text-shadow:none;margin:0 0 12px;letter-spacing:1px}#intro .intro-tag{color:#64766e;text-shadow:none}#intro .landscape-note{color:#697e71;text-shadow:none;font-size:11px;margin-bottom:10px}.start-guide{padding-left:21px;font-size:13px;line-height:1.8;margin:15px 0 10px}.start-guide li{margin-bottom:4px}.start-safety{font-size:11px;line-height:1.8;color:#716956;background:#f4efdf;padding:9px 11px;border-radius:12px}.pedals .brake.held{background:#aad4c5;color:#365e53;box-shadow:0 4px 0 #739c8d}@media(max-height:550px){#intro{width:440px;right:3vw;bottom:3vh;padding:14px 21px}#intro h1{font-size:31px;display:block;margin:2px 0}#intro .intro-tag{float:right;font-size:10px;margin-top:12px}#intro h2{font-size:12px;margin-bottom:7px}#intro .landscape-note{display:none}#intro .lesson-picker button{padding:7px 2px}.start-guide{font-size:11px;line-height:1.6;margin:8px 0}.start-guide li{margin-bottom:2px}.start-safety{font-size:10px;line-height:1.6;margin:6px 0;padding:6px 9px}#start{margin-top:8px;padding:10px}}

#intro:focus{outline:none}

/* A dedicated header keeps reservations clear of the 3D traffic lights. */
body{background:#deeee9}#world{top:76px}#mission{top:7px;left:50%;transform:translateX(-50%);width:max-content;min-width:0;max-width:calc(100vw - 300px);height:62px;padding:7px 16px;gap:8px;border:3px solid #fff;background:#fff8e8;border-bottom-color:#edbd72;border-radius:19px;box-shadow:0 3px 0 #a77b5330;white-space:normal;z-index:4;pointer-events:none}#mission small{font:18px VillageRound,sans-serif;color:#bd6d65;margin-bottom:3px}#mission strong{display:block;font:18px VillageRound,sans-serif;color:#3d5966}#mission .avatar{display:grid;width:35px;height:35px;border-radius:50%;background:#ffe0b1;font-size:22px}#mission.new-reservation{animation:reservation-pop .5s ease-out;background:#fff1d4;border-bottom-color:#eaa869}#mission.new-reservation .avatar{animation:reservation-ring .25s ease-in-out 6 alternate}@keyframes reservation-pop{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes reservation-ring{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}@media(max-width:740px){#mission{max-width:calc(100vw - 265px);padding:5px 10px}#mission small,#mission strong{font-size:15px}#mission .avatar{display:none}}@media(prefers-reduced-motion:reduce){#mission.new-reservation,#mission.new-reservation .avatar{animation:none}}

#intro .lesson-picker{margin-top:10px}#intro .lesson-picker button{min-height:60px;padding:9px 5px;border:2px solid transparent;border-radius:15px;box-shadow:0 3px 0 #607b8040;font:15px VillageRound,sans-serif}#intro .lesson-picker b{display:block;font-weight:400;white-space:nowrap}#intro .lesson-picker small{display:block;font-size:12px;margin-top:4px}#intro .lesson-picker button[data-mode="five"]{background:#96e0cf;color:#15564d}#intro .lesson-picker button[data-mode="one"]{background:#9bcdf8;color:#234f78}#intro .lesson-picker button[data-mode="before"]{background:#ffc2ad;color:#7c3c2a}#intro .lesson-picker button[data-mode="five"].selected{background:#217d6c;color:white;border-color:#105a4c;box-shadow:0 3px 0 #105a4c}#intro .lesson-picker button[data-mode="one"].selected{background:#326fac;color:white;border-color:#214c7a;box-shadow:0 3px 0 #214c7a}#intro .lesson-picker button[data-mode="before"].selected{background:#b75038;color:white;border-color:#853b29;box-shadow:0 3px 0 #853b29}#intro .start-safety{background:#fff0bb;color:#695529}@media(max-height:550px){#intro .lesson-picker button{font-size:13px;min-height:54px;padding:7px 4px}#intro .lesson-picker small{font-size:11px}}

/* Gaegu's handwritten letterforms distinguish the game UI from the old rounded type. */
body,button,input,#intro h1,header .brand,#intro .lesson-picker button,#mission small,#mission strong,.pedals .brake,.pedals .park,.pedals .brake b,.pedals .park b,#parking-feedback,#gameover h2,#settings h2,#station-peek>b,#destination-name{font-family:VillageSign,sans-serif;font-weight:700}#intro .lesson-picker button{font-size:19px}#intro .lesson-picker small{font-size:16px}#mission small,#mission strong{font-size:22px}.start-guide{font-size:17px}.start-safety{font-size:15px}#start{font-size:21px}.pedals{right:auto;left:max(22px,env(safe-area-inset-left));flex-direction:row;align-items:center;bottom:26px}.pedals .brake,.pedals .park{font-size:17px}.pedals .brake.held{background:#f2c19d;color:#774a31;box-shadow:0 2px 0 #bd9074}#parking-feedback b{font-size:25px}@media(max-height:550px){.pedals{left:max(16px,env(safe-area-inset-left));right:auto;bottom:18px;flex-direction:row}.pedals .brake,.pedals .park{font-size:15px}#station-peek{width:140px}#intro .lesson-picker button{font-size:17px}#intro .lesson-picker small{font-size:14px}.start-guide{font-size:14px;line-height:1.45}.start-safety{font-size:13px;line-height:1.45}#start{font-size:19px;padding:8px}#mission small,#mission strong{font-size:20px}}@media(max-height:350px){#station-peek{width:120px}}@media(max-width:740px){#mission small,#mission strong{font-size:18px}}

#intro .lesson-picker button{min-width:0;flex:1 1 0}#intro .lesson-picker b{line-height:1.2}
.pedals .brake,.pedals .park{padding:4px 2px;white-space:nowrap}.pedals .brake b,.pedals .park b{flex-shrink:0}#brake-label{white-space:nowrap}

#safety-feedback{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);z-index:25;pointer-events:none;text-align:center;min-width:290px;max-width:calc(100vw - 40px);padding:16px 28px 10px;background:#fff8eff5;border:3px solid white;border-radius:26px;box-shadow:0 6px 0 #b56a6850,0 10px 32px #47352d30}#safety-reason{display:block;font:700 32px VillageSign,sans-serif;color:#913d48;line-height:1.2}#loss-hearts{display:flex;justify-content:center;gap:12px;margin-top:8px}.loss-slot{position:relative;display:block;font:52px sans-serif;line-height:1;width:58px;height:60px;color:#ec6782}.loss-slot:before{content:'♥';position:absolute;inset:0;color:#ddd4ce}.loss-slot i{position:relative;font-style:normal}.loss-slot.spent i{visibility:hidden}.loss-slot.vanishing i{display:block;animation:heart-vanish 1.25s .15s both}.heart-lost{animation:heart-vanish 1.25s .15s both;color:#ec6782!important}@keyframes heart-vanish{0%,18%{opacity:1;transform:scale(1)}35%{opacity:1;transform:scale(1.25) rotate(-8deg)}100%{opacity:0;transform:translateY(16px) scale(.15) rotate(15deg)}}body:has(#settings[open]) #safety-feedback{visibility:hidden}@media(max-height:550px){#safety-feedback{padding:12px 22px 7px;min-width:260px}#safety-reason{font-size:27px}.loss-slot{font-size:44px;width:50px;height:51px}}@media(prefers-reduced-motion:reduce){.loss-slot.vanishing i,.heart-lost{animation:heart-fade .8s .15s both}@keyframes heart-fade{from{opacity:1}to{opacity:0}}}

#intro{width:420px;max-width:calc(100vw - 32px)}#intro .lesson-picker button[data-mode]{background:#ede8de;color:#53616f;border:2px solid #ded5c7;box-shadow:0 3px 0 #c7bfb466;font-size:17px}#intro .lesson-picker button[data-mode].selected{background:#c4dcef;color:#34526e;border-color:#90b4d2;box-shadow:0 3px 0 #90abc166}#intro .lesson-picker button[data-mode="before"]{font-size:16px}#intro .lesson-picker b{white-space:nowrap}@media(max-height:550px){#intro{width:400px;max-width:calc(100vw - 32px)}#intro .lesson-picker button[data-mode]{font-size:16px}#intro .lesson-picker button[data-mode="before"]{font-size:15px}}

#parking-feedback{max-width:calc(100vw - 32px)}#parking-reason{margin:5px 0 0;font:700 20px VillageSign,sans-serif;line-height:1.3;color:#77554f}#parking-feedback[data-state="invalid"]>span{display:none}@media(max-height:550px){#parking-reason{font-size:18px}}

/* Passenger request: generous type, a clear clock task and one primary action. */
#lesson{outline:none;width:820px;max-width:96vw}#lesson .lesson-left{padding:24px}#lesson .passenger{float:none;margin:0 0 10px;width:84px;height:84px}#lesson #request{font-size:25px;line-height:1.35;margin:12px 0}#lesson .ticket{margin-top:16px;padding:16px}#lesson .ticket small{font-size:23px}#lesson #destination-name{font-size:28px;margin:6px 0}#lesson #requested-time{font-size:26px;line-height:1.3}#lesson .clock-heading{font-size:23px;line-height:1.2;gap:10px;padding-right:20px}#lesson #close-lesson{background:transparent;border-radius:0;box-shadow:none;font:28px sans-serif}#lesson #feedback{font-size:18px;line-height:1.3;min-height:24px}#lesson #submit{font-size:23px}
@media(max-height:550px){#lesson .lesson-left{padding:16px 20px}#lesson .passenger{width:66px;height:66px;float:left;margin:0 12px 8px 0}#lesson #passenger-name{margin:8px 0}#lesson #request{font-size:22px;clear:both;margin:8px 0}#lesson .ticket{margin-top:12px;padding:12px}#lesson .ticket small{font-size:22px}#lesson #destination-name{font-size:26px}#lesson #requested-time{font-size:23px}#lesson .lesson-right{padding:16px 18px}#lesson .clock-heading{font-size:20px;padding-right:18px}#lesson #clock{max-width:170px}#lesson #feedback{font-size:17px;margin:6px 0}#lesson #submit{padding:8px;font-size:22px}}

/* Larger driving controls and opaque, high contrast navigation. */
.pedals .brake,.pedals .park{width:100px;height:90px;font-size:23px;border-radius:24px}.pedals .brake b,.pedals .park b{font-size:34px}.pedals{gap:12px}#interact{font-size:26px;padding:14px 26px}#toast{font-size:24px;line-height:1.3;background:#315b49;border:2px solid #fff1cf;border-radius:20px;bottom:135px;max-width:80vw;padding:14px 22px}#nav-arrow{background:#fffdf5;color:#254e48;border:3px solid white;box-shadow:0 3px 0 #648e83,0 4px 12px #234e4833;border-radius:18px;font-size:25px;gap:12px;padding:10px 18px;max-width:55vw;top:88px}#arrow{font-size:34px;color:#287e69;text-shadow:0 1px 0 #fff}#distance{font-size:20px;font-weight:700;color:#355a64}
@media(max-height:550px){.pedals .brake,.pedals .park{width:86px;height:78px;font-size:21px}.pedals .brake b,.pedals .park b{font-size:30px}.pedals{gap:10px}#interact{font-size:23px;padding:12px 22px}#toast{font-size:22px;bottom:116px}#nav-arrow{top:84px;font-size:22px;padding:8px 14px;max-width:52vw}#arrow{font-size:30px}#distance{font-size:18px}}

/* Keep game gestures from becoming text selection or a mobile long-press callout. */
.hud,.hud *,button,button *,#clock,#clock *,#world,#world *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
#joystick,.pedals,.pedals *,#clock{touch-action:none}

#parking-feedback[data-state="checking"]{min-width:260px;border-color:#83adcf;color:#375a77;background:#f6fbff}
#parking-feedback>span{height:14px;margin-top:12px;background:#dbe7ed;transform:none;border-radius:9px;overflow:hidden}
#parking-feedback>span::before{content:'';display:block;width:100%;height:100%;border-radius:inherit;background:#67a9cf;transform:scaleX(var(--parking-progress,0));transform-origin:left}
#parking-feedback[data-state="success"]>span::before{background:#54bd82}

/* Crisp title and readable header controls. */
header .brand{color:#45677b;text-shadow:none;filter:none}header .brand span{color:#b97a21;text-shadow:none}
.top-right{gap:7px}.top-right button{font-size:20px;line-height:1.1;min-width:58px;height:48px;padding:0 10px;white-space:nowrap}#pause{font-size:28px}
@media(max-height:550px){.top-right button{font-size:18px;min-width:52px;height:43px;padding:0 8px}#pause{font-size:26px}}
@media(max-width:740px){.top-right{gap:5px}.top-right button{font-size:17px;min-width:44px;padding:0 7px}#mission{left:125px;right:205px;transform:none;width:auto;max-width:none}#mission.new-reservation{animation:reservation-drop .5s ease-out}@keyframes reservation-drop{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}}
/* Bright passenger farewell after drop-off. */
#toast.passenger-toast{display:flex;align-items:center;gap:14px;background:#fff7d8;color:#61452c;border:3px solid white;border-radius:24px;padding:12px 20px;max-width:calc(100vw - 40px);white-space:normal;font:700 25px/1.25 VillageSign,sans-serif;box-shadow:0 5px 0 #cca45055;bottom:30%;width:max-content}
#toast.passenger-toast img{width:70px;height:70px;border-radius:50%;border:3px solid #ffc95c;flex:none}#toast.passenger-toast span{max-width:400px}
@media(max-height:550px){#toast.passenger-toast{font-size:24px;bottom:28%}}
/* Two-hand button driving: speed and parking left, steering right. */
#driving-controls .pedals{display:grid;grid-template-columns:86px 86px;grid-template-rows:82px 82px;gap:10px;left:max(18px,env(safe-area-inset-left));right:auto;bottom:max(18px,env(safe-area-inset-bottom));align-items:stretch}
#driving-controls .pedals button{width:86px;height:82px;grid-row:auto;grid-column:auto;border:3px solid #fff;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;font-size:23px;touch-action:none}
#driving-controls .pedals .drive-up{grid-column:1;grid-row:1;background:#ffe09a;color:#715022;font:34px sans-serif;box-shadow:0 4px 0 #bb975a}
#driving-controls .pedals .drive-down{grid-column:1;grid-row:2;background:#dbeafa;color:#365d80;font:34px sans-serif;box-shadow:0 4px 0 #8aa9c6}
#driving-controls .pedals .brake{grid-column:2;grid-row:1}#driving-controls .pedals .park{grid-column:2;grid-row:2}
#driving-controls .steering{left:auto;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:12px;touch-action:none}
#driving-controls .steering button{width:86px;height:82px;border:3px solid white;border-radius:24px;background:#fff8e8;color:#3c627c;font:34px sans-serif;box-shadow:0 4px 0 #90a6b3;touch-action:none}
#driving-controls button.pressed{transform:translateY(3px);filter:brightness(.9);box-shadow:0 1px 0 #718b94}
@media(max-height:550px){#driving-controls .pedals{grid-template-columns:74px 74px;grid-template-rows:70px 70px;gap:9px;bottom:16px;left:max(14px,env(safe-area-inset-left))}#driving-controls .pedals button{width:74px;height:70px;font-size:20px;border-radius:19px}#driving-controls .pedals .drive-up,#driving-controls .pedals .drive-down{font-size:31px}#driving-controls .pedals b{font-size:26px}#driving-controls .steering{bottom:16px;right:max(14px,env(safe-area-inset-right));gap:10px}#driving-controls .steering button{width:74px;height:70px;font-size:31px;border-radius:21px}}
@media(max-height:350px){#driving-controls .pedals{grid-template-columns:65px 65px;grid-template-rows:61px 61px;gap:8px;bottom:12px}#driving-controls .pedals button{width:65px;height:61px;font-size:18px}#driving-controls .steering button{width:65px;height:61px}#driving-controls .steering{bottom:12px}#map-box{width:94px;padding:5px}#minimap{width:84px;height:84px}#station-peek{width:104px;padding:5px}#station-clock svg{width:88px;height:88px}}
@media(max-height:350px){#map-box{top:72px;transform:scale(.78);transform-origin:top left}#station-peek{top:72px}}
/* Rounded brake silhouette and drawn bars instead of a font-shaped icon. */
#driving-controls .pedals .brake{appearance:none;-webkit-appearance:none;overflow:hidden;isolation:isolate;background-clip:padding-box}
#driving-controls .pedals .brake .brake-icon{display:flex;align-items:center;justify-content:center;gap:6px;width:28px;height:28px;margin:0 0 3px;line-height:1;flex:none}
#driving-controls .pedals .brake .brake-icon i{display:block;width:7px;height:23px;border-radius:2.5px;background:currentColor;transform:none}

#settings{outline:none}#settings .instructions{font-size:21px;line-height:1.5;margin:20px 0;color:#526a75}#settings #resume,#settings #back-to-start{font-size:23px;padding:12px;border:0;border-radius:14px}#settings #back-to-start{margin-top:12px;background:#bdddd4;color:#315e58}#settings button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #6d91ad}@media(max-height:550px){#settings{padding:20px 24px}#settings h2{margin-bottom:15px}#settings .instructions{font-size:20px;margin:14px 0}#settings #resume,#settings #back-to-start{padding:9px;font-size:22px}}

/* Keep the passenger's farewell attached to the taxi as the camera turns. */
#toast.passenger-toast{left:var(--taxi-speech-x,50%);top:var(--taxi-speech-y,45%);bottom:auto;transform:translate(-50%,-100%);transition:opacity .2s;word-break:keep-all;max-width:min(460px,calc(100vw - 32px))}
#toast.passenger-toast::after{content:"";position:absolute;left:var(--taxi-speech-tail,50%);bottom:-11px;width:18px;height:18px;background:#fff7d8;border-right:3px solid white;border-bottom:3px solid white;transform:translateX(-50%) rotate(45deg);border-radius:0 0 4px 0}
@media(max-height:550px){#toast.passenger-toast{font-size:22px;padding:9px 14px;gap:10px;max-width:min(380px,calc(100vw - 32px))}#toast.passenger-toast img{width:54px;height:54px}}

#rotate-screen .landscape-phone{display:block;width:min(220px,65vw);height:auto;flex:none}

/* Matching driving keys, a crisp white brake shell, and compact pedal labels. */
#map-box>span{width:max-content;min-width:100%;font-size:23px;line-height:1.1;padding:5px 4px;white-space:nowrap;font-weight:700}
#map-box #delivered{font-size:26px;margin:0 2px}
#driving-controls .pedals .drive-up,#driving-controls .pedals .drive-down,#driving-controls .steering button{background:#ffd265;color:#63491c;box-shadow:0 4px 0 #b78c35}
#driving-controls .pedals .brake{--control-radius:22px;--brake-fill:#f6a1a8;position:relative;background:#fff;background-clip:border-box;border:3px solid white;border-radius:var(--control-radius);isolation:isolate;overflow:hidden}
#driving-controls .pedals .brake::before{content:"";position:absolute;inset:1px;border-radius:calc(var(--control-radius) - 4px);background:var(--brake-fill);z-index:-1;pointer-events:none}
#driving-controls .pedals .brake.held{--brake-fill:#f2c19d;background:#fff}
#driving-controls .pedals .park b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;font:700 29px/1 sans-serif;margin:0 0 3px}
#driving-controls .pedals .brake>span,#driving-controls .pedals .park>span{display:block;line-height:1.1;margin:0}
@media(max-height:550px){#map-box>span{font-size:20px;padding:4px 2px}#map-box #delivered{font-size:23px}#driving-controls .pedals .brake{--control-radius:19px}}
@media(max-height:350px){#driving-controls .pedals .brake,#driving-controls .pedals .park{padding:2px}}

/* Allow scrolling instructions, but never browser pinch or double-tap zoom. */
html,body{touch-action:pan-x pan-y}

#settings .instructions>strong{display:block;font-weight:400;margin-bottom:8px}
#settings .key-guide{display:grid;grid-template-columns:1.2fr 1fr;gap:6px 10px;text-align:left}
#settings .key-guide>span{display:flex;align-items:center;gap:7px;white-space:nowrap}
#settings kbd{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:28px;padding:0 6px;background:#edf1e9;border:1px solid #c6d2c5;border-bottom-width:3px;border-radius:6px;color:#36534a;font:20px 'VillageRound',sans-serif}
#settings kbd.space-key{font-size:13px}
@media(max-height:550px){#settings{padding:14px 20px}#settings h2{margin-bottom:10px}#settings .instructions{margin:10px 0;font-size:20px;line-height:1.2}#settings #resume,#settings #back-to-start{padding:7px}}
@media(max-height:350px){#settings{padding:8px 18px}#settings h2{font-size:26px;margin-bottom:6px}#settings .instructions{margin:8px 0;font-size:18px}#settings .instructions>strong{margin-bottom:5px}#settings .key-guide{gap:4px 8px}#settings kbd{height:25px;font-size:18px}#settings #resume,#settings #back-to-start{padding:5px;font-size:20px}#settings #back-to-start{margin-top:7px}}

#clock[data-hand]{cursor:grabbing}#clock[data-hand="hour"] #hour .hand-grip,#clock[data-hand="minute"] #minute .hand-grip{fill:#fff2ad;stroke-width:7}

/* Keep the whole passenger reply on one line above the taxi. */
#toast.passenger-toast{white-space:nowrap;max-width:calc(100vw - 24px)}
#toast.passenger-toast span{white-space:nowrap;max-width:none;min-width:0;flex-shrink:1}

/* Phone-only layout; tablets and desktop retain their original styling. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1200px) and (pointer:coarse){html[data-phone]{--phone-left:max(10px,env(safe-area-inset-left));--phone-right:max(10px,env(safe-area-inset-right));--phone-bottom:max(10px,env(safe-area-inset-bottom));--phone-key:clamp(48px,calc(var(--phone-height,100dvh) * .15),60px)}html[data-phone] #world{top:60px}html[data-phone] header{top:6px;left:var(--phone-left);right:var(--phone-right)}html[data-phone] header .brand{font-size:20px;padding:0;line-height:25px}html[data-phone] #hearts{left:var(--phone-left);top:33px;font-size:18px;gap:4px}html[data-phone] .top-right{gap:4px}html[data-phone] .top-right button{height:44px;min-width:44px;padding:0 6px;font-size:16px;border-radius:12px}html[data-phone] #pause{font-size:24px}html[data-phone] #mission{top:4px;left:calc(var(--phone-left) + 98px);right:calc(var(--phone-right) + 174px);width:auto;max-width:none;min-width:0;transform:none;height:50px;padding:4px 8px;gap:5px;border-radius:14px}html[data-phone] #mission>div:not(.avatar){min-width:0;flex:1}html[data-phone] #mission small,html[data-phone] #mission strong{font-size:17px;line-height:1.1;margin:0;overflow-wrap:anywhere}html[data-phone] #mission .avatar{width:28px;height:28px;font-size:20px}html[data-phone] #distance{font-size:15px}html[data-phone] #mission.new-reservation{animation:reservation-drop .5s ease-out}html[data-phone] #map-box,html[data-phone] #station-peek{top:66px;left:var(--phone-left);transform:none;width:clamp(84px,calc(var(--phone-height,100dvh) * .25),106px);padding:5px;border-radius:13px}html[data-phone] #minimap{width:100%;height:auto;aspect-ratio:1;border-width:2px;outline-width:1px}html[data-phone] #map-box>span{font-size:17px;min-width:0;width:100%;padding:3px 0;margin-top:4px}html[data-phone] #map-box #delivered{font-size:19px;margin:0}html[data-phone] #station-peek>b{font-size:13px;line-height:1.05;margin-bottom:2px}html[data-phone] #station-clock svg{width:100%;height:auto}html[data-phone] #nav-arrow{top:67px;font-size:18px;max-width:48vw;padding:4px 10px;gap:6px;border-radius:12px}html[data-phone] #arrow{font-size:23px}html[data-phone] #driving-controls .pedals{left:var(--phone-left);bottom:var(--phone-bottom);grid-template-columns:repeat(2,var(--phone-key));grid-template-rows:repeat(2,var(--phone-key));gap:7px}html[data-phone] #driving-controls .pedals button,html[data-phone] #driving-controls .steering button{width:var(--phone-key);height:var(--phone-key);border-radius:15px;padding:2px;font-size:17px}html[data-phone] #driving-controls .pedals .drive-up,html[data-phone] #driving-controls .pedals .drive-down,html[data-phone] #driving-controls .steering button{font-size:26px}html[data-phone] #driving-controls .pedals .brake{--control-radius:15px}html[data-phone] #driving-controls .pedals .brake .brake-icon,html[data-phone] #driving-controls .pedals .park b{width:23px;height:23px;margin-bottom:1px;font-size:24px}html[data-phone] #driving-controls .pedals .brake .brake-icon i{width:6px;height:19px}html[data-phone] #driving-controls .steering{right:var(--phone-right);bottom:var(--phone-bottom);gap:7px}html[data-phone] .dashboard{bottom:var(--phone-bottom);width:94px;padding:5px 8px;border-radius:12px}html[data-phone] .speed strong{font-size:25px}html[data-phone] #interact{bottom:75px;font-size:19px;padding:9px 16px}html[data-phone] #toast{font-size:18px;padding:8px 12px;bottom:88px}html[data-phone] #toast.passenger-toast{font-size:19px;padding:6px 10px;gap:7px;border-radius:17px}html[data-phone] #toast.passenger-toast img{width:42px;height:42px}html[data-phone] #parking-feedback,html[data-phone] #parking-feedback[data-state=checking]{min-width:180px;padding:8px 14px;border-radius:14px}html[data-phone] #parking-feedback b{font-size:21px}html[data-phone] #parking-reason{font-size:16px}html[data-phone] #parking-feedback>span{height:10px;margin-top:7px}html[data-phone] #safety-feedback{min-width:220px;padding:9px 16px}html[data-phone] #safety-reason{font-size:23px}html[data-phone] .loss-slot{width:40px;height:42px;font-size:36px}html[data-phone] dialog{max-height:calc(var(--phone-height,100dvh) - 16px);max-width:calc(100vw - 24px);border-radius:18px}html[data-phone] #intro{left:var(--phone-left);right:auto;top:50%;bottom:auto;transform:translateY(-50%);width:370px;max-width:calc(100vw - 24px);padding:10px 16px}html[data-phone] #intro h1{font-size:29px;margin:0;line-height:1.1}html[data-phone] #intro .lesson-picker{margin-top:6px}html[data-phone] #intro .lesson-picker button[data-mode]{font-size:15px;min-height:44px;padding:5px 3px;border-radius:11px}html[data-phone] #intro .lesson-picker button[data-mode=before]{font-size:14px}html[data-phone] #intro .lesson-picker small{font-size:12px;margin-top:2px}html[data-phone] #intro .start-guide{font-size:13px;line-height:1.3;margin:7px 0;padding-left:18px}html[data-phone] #intro .start-guide li{margin-bottom:1px}html[data-phone] #intro .start-safety{font-size:12px;line-height:1.3;margin:5px 0;padding:5px 8px}html[data-phone] #intro #start{font-size:18px;padding:7px;margin-top:6px;border-radius:14px;min-height:40px}html[data-phone] #lesson{width:680px;max-width:calc(100vw - 24px)}html[data-phone] #lesson[open]{grid-template-columns:1fr 1fr}html[data-phone] #lesson .lesson-left,html[data-phone] #lesson .lesson-right{padding:10px 14px;min-width:0}html[data-phone] #lesson .passenger{width:48px;height:48px;margin:0 8px 5px 0}html[data-phone] #lesson #passenger-name{font-size:20px;margin:5px 0}html[data-phone] #lesson #request{font-size:18px;line-height:1.2;margin:6px 0}html[data-phone] #lesson .ticket{padding:8px;margin-top:7px}html[data-phone] #lesson .ticket small{font-size:17px}html[data-phone] #lesson #destination-name{font-size:22px;margin:4px 0}html[data-phone] #lesson #requested-time{font-size:19px;line-height:1.2}html[data-phone] #lesson .clock-heading{font-size:17px;line-height:1.15;padding-right:22px;min-height:22px}html[data-phone] #lesson #close-lesson{top:5px;right:5px;width:32px;height:32px}html[data-phone] #lesson #clock{width:min(100%,calc(var(--phone-height,100dvh) - 137px));max-width:210px;margin:3px auto 0}html[data-phone] #lesson #feedback{font-size:15px;line-height:1.2;min-height:18px;margin:3px 0}html[data-phone] #lesson #submit{font-size:19px;padding:6px;min-height:36px}html[data-phone] #settings{width:350px;padding:10px 16px}html[data-phone] #settings h2{font-size:23px;margin:0 0 6px}html[data-phone] #settings .lesson-picker button{padding:7px 3px;font-size:12px}html[data-phone] #settings .instructions{font-size:17px;margin:7px 0;line-height:1.15}html[data-phone] #settings .instructions>strong{margin-bottom:5px}html[data-phone] #settings .key-guide{gap:4px 8px}html[data-phone] #settings kbd{height:24px;min-width:27px;font-size:17px}html[data-phone] #settings kbd.space-key{font-size:12px}html[data-phone] #settings #resume,html[data-phone] #settings #back-to-start{font-size:19px;padding:6px;min-height:36px}html[data-phone] #settings #back-to-start{margin-top:6px}html[data-phone] #gameover,html[data-phone] #round-result{padding:16px;width:330px}html[data-phone] #gameover h2,html[data-phone] #round-result h2{font-size:25px;margin:8px 0}html[data-phone] #gameover p,html[data-phone] #round-result p{margin:8px 0;font-size:15px}html[data-phone] #gameover .primary,html[data-phone] #round-result .primary{margin-top:10px;padding:9px;font-size:18px}
}@media (orientation:landscape) and (max-height:600px) and (max-width:650px) and (pointer:coarse){html[data-phone] #mission .avatar{display:none}html[data-phone] #mission small,html[data-phone] #mission strong{font-size:15px}html[data-phone] #mission{padding:4px 6px}html[data-phone] #distance{font-size:13px}}@media (orientation:landscape) and (max-height:300px) and (max-width:1200px) and (pointer:coarse){html[data-phone] #map-box,html[data-phone] #station-peek{width:76px}html[data-phone] #map-box>span{font-size:15px}html[data-phone] #map-box #delivered{font-size:16px}html[data-phone] #intro{width:440px;padding:7px 14px}html[data-phone] #intro h1{font-size:25px}html[data-phone] #intro .start-guide{margin:5px 0;font-size:12px}html[data-phone] #intro .start-safety{font-size:11px}html[data-phone] #intro #start{min-height:34px;padding:4px}html[data-phone] #lesson .lesson-left,html[data-phone] #lesson .lesson-right{padding:8px 12px}html[data-phone] #lesson .passenger{width:38px;height:38px}html[data-phone] #lesson #request{font-size:16px}html[data-phone] #lesson .ticket{padding:6px}html[data-phone] #lesson #requested-time{font-size:17px}html[data-phone] #lesson #destination-name{font-size:20px}
}@media (orientation:landscape) and (max-height:300px) and (max-width:1200px) and (pointer:coarse){html[data-phone] #intro[open]{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;width:560px}html[data-phone] #intro h1,html[data-phone] #intro .lesson-picker,html[data-phone] #intro #start{grid-column:1/-1}html[data-phone] #intro .start-guide{font-size:12px;margin:6px 0;line-height:1.25}html[data-phone] #intro .start-safety{font-size:11px;margin:6px 0;line-height:1.3}html[data-phone] #intro #start{margin-top:0}
}@media (orientation:landscape) and (max-height:300px) and (max-width:1200px) and (pointer:coarse){html[data-phone] #settings[open]{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;width:440px}html[data-phone] #settings h2,html[data-phone] #settings .lesson-picker,html[data-phone] #settings .instructions{grid-column:1/-1}html[data-phone] #settings h2{margin:0}html[data-phone] #settings .instructions{margin:0}html[data-phone] #settings #back-to-start{margin-top:0}
}@media (orientation:landscape) and (max-height:300px) and (max-width:1200px) and (pointer:coarse){html[data-phone] #map-box,html[data-phone] #station-peek{left:calc(var(--phone-left) + 112px)}}
/* A phone's browser toolbar must not stretch or crop the WebGL drawing area. */
html[data-phone],html[data-phone] body{width:100%;height:var(--phone-height,100dvh);overflow:hidden;overscroll-behavior:none}
html[data-phone] #world{bottom:auto;height:calc(var(--phone-height,100dvh) - 60px)}
html[data-phone] #world canvas{width:100%!important;height:100%!important;max-width:100%;display:block}
html[data-phone] #rotate-screen{width:var(--phone-width,100vw);height:var(--phone-height,100dvh);max-height:none}
@media (orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){html[data-phone] #world{top:60px}html[data-phone] dialog{max-height:calc(var(--phone-height,100dvh) - 20px - env(safe-area-inset-bottom));}html[data-phone] #intro,html[data-phone] #lesson,html[data-phone] #settings,html[data-phone] #gameover,html[data-phone] #round-result{max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}html[data-phone] #intro{left:max(12px,env(safe-area-inset-left));top:calc(var(--phone-height,100dvh) / 2)}html[data-phone] #lesson,html[data-phone] #settings,html[data-phone] #gameover,html[data-phone] #round-result{position:fixed;top:calc(var(--phone-height,100dvh) / 2);bottom:auto;transform:translateY(-50%);margin:0 auto}html[data-phone] #mission{overflow:hidden}html[data-phone] #mission strong,html[data-phone] #mission small{word-break:keep-all;overflow-wrap:normal}html[data-phone] #mission #distance{flex-shrink:0}
}

/* Phone screenshot refinements: right-side intro and a compact centered quest. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){
 html[data-phone] #intro{left:auto;right:max(12px,env(safe-area-inset-right))}
 html[data-phone] #mission{left:50%;right:auto;transform:translateX(-50%);width:min(300px,calc(100vw - 380px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none;justify-content:center;text-align:center;padding:4px 8px;gap:5px}
 html[data-phone] #mission small,html[data-phone] #mission strong{font-size:16px;line-height:1.15}
 html[data-phone] #mission .avatar{width:26px;height:26px;font-size:19px}
 html[data-phone] #mission #distance{font-size:12px}
 html[data-phone] #map-box>span{font-size:clamp(13px,calc(var(--phone-height,100dvh) * .045),16px);line-height:1.2;letter-spacing:-.5px;padding:4px 0;width:100%;min-width:0}
 html[data-phone] #map-box #delivered{font-size:inherit;margin:0}
 html[data-phone] #driving-controls .pedals .brake>span{font-size:clamp(12px,calc(var(--phone-key) * .23),14px);letter-spacing:-.6px;line-height:1.15;max-width:100%;white-space:nowrap}
 html[data-phone] #driving-controls .pedals .park>span{font-size:clamp(16px,calc(var(--phone-key) * .3),18px);line-height:1.15;letter-spacing:0}
 html[data-phone] #driving-controls .pedals .brake .brake-icon,html[data-phone] #driving-controls .pedals .park b{margin-bottom:2px}
}
@media (orientation:landscape) and (pointer:coarse) and (max-width:650px){
 html[data-phone] #mission small,html[data-phone] #mission strong{font-size:14px}
}

/* Arrival stays still over the destination; farewell belongs to the person who got out. */
#nav-arrow.arrived{border-color:#a8d5bb;background:#f2fff5}
#nav-arrow.arrived #arrow{position:relative;flex:none;width:.8em;height:.8em;border:.085em solid currentColor;border-radius:50%;overflow:hidden;text-indent:-9999px;color:#27835e;font-family:sans-serif;font-weight:700;line-height:1}
#nav-arrow.arrived #arrow::after{content:"";position:absolute;inset:22%;border-radius:50%;background:currentColor}
#toast.passenger-toast[data-anchor=passenger]{gap:0}

/* Keep lesson choices legible in settings, including the longer before-hour label. */
#settings .lesson-picker button{font-size:22px;font-weight:700;line-height:1.15;min-height:48px;padding:10px 4px;white-space:nowrap}
#settings .lesson-picker button[data-mode=before]{flex:1.35;font-size:20px;letter-spacing:-.35px}
@media(max-height:550px){#settings .lesson-picker button{font-size:20px;min-height:42px;padding:8px 4px}#settings .lesson-picker button[data-mode=before]{font-size:19px}}
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){html[data-phone] #settings .lesson-picker button{font-size:20px;min-height:42px;padding:7px 3px}html[data-phone] #settings .lesson-picker button[data-mode=before]{font-size:18px}}

/* Large, readable end-of-drive message and retry action. */
#gameover{width:420px;padding:30px}
#gameover h2{font-size:34px;line-height:1.2;margin:10px 0 16px;word-break:keep-all}
#gameover #gameover-count{font-size:27px;line-height:1.4;margin:14px 0;font-weight:700}
#gameover #retry-game{font-size:28px;line-height:1.2;min-height:58px;padding:12px;margin-top:20px}
@media(max-height:550px){#gameover{padding:22px}#gameover h2{font-size:32px;margin:8px 0 12px}#gameover #gameover-count{font-size:25px;margin:10px 0}#gameover #retry-game{font-size:27px;min-height:52px;margin-top:14px;padding:10px}}
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){html[data-phone] #gameover{width:380px;padding:18px 20px}html[data-phone] #gameover h2{font-size:29px;line-height:1.2;margin:6px 0 12px}html[data-phone] #gameover #gameover-count{font-size:24px;margin:10px 0}html[data-phone] #gameover #retry-game{font-size:26px;min-height:48px;padding:8px;margin-top:14px}}

/* Pastel notices follow the taxi, below its rear bumper. */
#toast[data-tone=warning],#toast[data-tone=start]{top:var(--taxi-notice-y,72%);bottom:auto;left:var(--taxi-notice-x,50%);width:max-content;max-width:calc(100vw - 32px);padding:12px 24px;border:3px solid #fff;border-radius:20px;font:700 30px/1.25 VillageSign,sans-serif;text-align:center;word-break:keep-all;box-shadow:0 4px 0 #24374333,0 5px 15px #24374322;transform:translate(-50%,0);transition:opacity .18s;z-index:12}
#toast[data-tone=warning]{background:#f6bdc3;color:#842d3a}
#toast[data-tone=start]{background:#c2ddfa;color:#244f82}
#toast.show[data-tone=warning],#toast.show[data-tone=start]{transform:translate(-50%,0)}
@media(max-height:550px){#toast[data-tone=warning],#toast[data-tone=start]{font-size:25px;padding:9px 18px}}
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){html[data-phone] #toast[data-tone=warning],html[data-phone] #toast[data-tone=start]{top:var(--taxi-notice-y,72%);bottom:auto;left:var(--taxi-notice-x,50%);font-size:22px;line-height:1.2;padding:8px 16px;max-width:calc(100vw - 32px);border-radius:16px}}
@media(prefers-reduced-motion:reduce){#toast[data-tone=warning],#toast[data-tone=start]{transition:none}}


/* A larger map and a high-contrast taxi marker, with room for the left pedals. */
#map-box{width:200px}
#minimap{width:100%;height:auto;aspect-ratio:1}
@media(max-height:550px){#map-box{width:clamp(104px,calc(100dvh - 290px),160px)}}
@media(max-height:350px){#map-box{width:94px}}
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){html[data-phone] #map-box{width:clamp(108px,calc(var(--phone-height,100dvh) * .32),136px)}}
@media(orientation:landscape) and (pointer:coarse) and (max-height:300px) and (max-width:1200px){html[data-phone] #map-box{width:96px}}

/* Readable opening instructions, including phones with the browser bar visible. */
#intro{width:550px}
#intro .start-guide{font-size:22px;line-height:1.5;padding-left:27px;margin:16px 0 12px}
#intro .start-guide li{margin-bottom:5px}
#intro .start-safety{font-size:19px;line-height:1.5;margin:12px 0;padding:12px 14px}
@media(max-height:550px){
 #intro{width:560px}
 #intro .start-guide{font-size:20px;line-height:1.4;margin:10px 0;padding-left:25px}
 #intro .start-guide li{margin-bottom:3px}
 #intro .start-safety{font-size:17px;line-height:1.4;margin:8px 0;padding:9px 12px}
}
@media(max-height:350px){
 #intro[open]{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;width:720px;padding:8px 16px}
 #intro h1,#intro .lesson-picker,#intro #start{grid-column:1/-1}
 #intro h1{font-size:27px;margin:0}
 #intro .lesson-picker{margin-top:6px}
 #intro .lesson-picker button[data-mode]{min-height:44px;padding:5px 4px}
 #intro .start-guide{font-size:18px;line-height:1.4;margin:8px 0}
 #intro .start-safety{font-size:16px;line-height:1.4;margin:8px 0}
 #intro #start{margin-top:3px;min-height:38px;padding:5px}
}
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){
 html[data-phone] #intro{width:480px;padding:8px 14px}
 html[data-phone] #intro .start-guide{font-size:18px;line-height:1.35;padding-left:23px;margin:7px 0}
 html[data-phone] #intro .start-guide li{margin-bottom:3px}
 html[data-phone] #intro .start-safety{font-size:16px;line-height:1.35;margin:6px 0;padding:7px 10px}
}
@media(orientation:landscape) and (pointer:coarse) and (max-height:350px) and (max-width:1200px){
 html[data-phone] #intro[open]{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;width:640px;padding:8px 14px}
 html[data-phone] #intro h1,html[data-phone] #intro .lesson-picker,html[data-phone] #intro #start{grid-column:1/-1}
 html[data-phone] #intro .start-guide{font-size:17px;line-height:1.3;margin:7px 0}
 html[data-phone] #intro .start-safety{font-size:15px;line-height:1.35;margin:7px 0;padding:7px 9px}
 html[data-phone] #intro #start{margin-top:2px}
}
@media(orientation:landscape) and (pointer:coarse) and (max-height:300px) and (max-width:1200px){
 html[data-phone] #intro[open]{padding:5px 12px}
 html[data-phone] #intro h1{font-size:23px}
 html[data-phone] #intro .lesson-picker button[data-mode]{min-height:38px;padding:3px}
 html[data-phone] #intro .start-guide,html[data-phone] #intro .start-safety{margin:4px 0}
}

/* Keep larger lesson names on one line, with the unit directly below. */
#intro .lesson-picker button[data-mode] b{font-size:24px;line-height:1.1;white-space:nowrap}
#intro .lesson-picker button[data-mode=before] b{font-size:23px}
#intro .lesson-picker button[data-mode] small{font-size:20px;line-height:1.1;white-space:nowrap}
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){
 html[data-phone] #intro .lesson-picker button[data-mode]{padding:2px 3px}
 html[data-phone] #intro .lesson-picker button[data-mode] b{font-size:22px;line-height:1.05}
 html[data-phone] #intro .lesson-picker button[data-mode=before] b{font-size:21px}
 html[data-phone] #intro .lesson-picker button[data-mode] small{font-size:16px;line-height:1}
}
@media(max-width:480px) and (orientation:portrait){
 #intro .lesson-picker button[data-mode] b{font-size:19px}
 #intro .lesson-picker button[data-mode=before] b{font-size:17px}
 #intro .lesson-picker button[data-mode] small{font-size:16px}
}

/* A little paper town map: square corners retain the outer streets and shops. */
#minimap{border-radius:24px;border:3px solid #fffcf7;outline:1px solid #d6c8bb;outline-offset:1px;box-shadow:0 2px 0 #d6c8bb55;background:#eef5e8}
@media(orientation:landscape) and(pointer:coarse) and(max-height:600px) and(max-width:1200px){html[data-phone] #minimap{border-radius:14px}}

/* Four lesson choices stay on one row without shrinking the tap targets. */
#intro{width:690px}
#intro .lesson-picker>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#intro .lesson-picker button[data-mode]{min-width:0}
#intro .lesson-picker button[data-mode] b{font-size:23px}
#intro .lesson-picker button[data-mode=before] b{font-size:21px}
#intro .lesson-picker button[data-mode=mixed] small{font-size:17px}
#settings .lesson-picker>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-height:550px){#intro{width:650px}}
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1200px){
 html[data-phone] #intro{width:620px}
 html[data-phone] #intro .lesson-picker button[data-mode] b{font-size:21px}
 html[data-phone] #intro .lesson-picker button[data-mode=before] b{font-size:19px}
 html[data-phone] #intro .lesson-picker button[data-mode=mixed] small{font-size:15px}
 html[data-phone] #settings .lesson-picker>div{display:flex}
 html[data-phone] #settings{width:470px}
 html[data-phone] #settings .lesson-picker button[data-mode]{font-size:18px;min-width:0}
 html[data-phone] #settings .lesson-picker button[data-mode=before]{font-size:17px;flex:1.4}
}
@media(max-width:650px){
 #intro .lesson-picker button[data-mode] b,html[data-phone] #intro .lesson-picker button[data-mode] b{font-size:18px}
 #intro .lesson-picker button[data-mode=before] b,html[data-phone] #intro .lesson-picker button[data-mode=before] b{font-size:16px}
 #intro .lesson-picker button[data-mode] small,html[data-phone] #intro .lesson-picker button[data-mode] small{font-size:14px}
}