@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#173e31;--muted:#748078;--paper:#f6f5ed;--yellow:#f4bf36;--line:#dedfd3}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #e47748;outline-offset:4px}button:disabled{opacity:.4;cursor:default}header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:25px;line-height:.95;letter-spacing:-1px}.brand-sub{display:block;font-size:12px;letter-spacing:2px;margin-top:7px}.brand-icon{display:grid;place-items:center;width:46px;height:46px;background:var(--yellow);border-radius:12px;font-size:35px;position:relative}.brand-icon span{position:absolute;font-size:19px;right:1px;top:0}.header-note{font-size:13px;color:var(--muted)}.profile{display:flex;align-items:center;gap:10px;font-size:12px}.profile img{height:38px;width:38px;border-radius:50%;background:#d9e0c8}.profile b,.profile small{display:block}.profile small{color:var(--muted);font-size:10px;margin-top:3px}.text-button{background:none;border:0;padding:8px;font-size:12px;font-weight:700}main{max-width:1440px;margin:auto;padding:42px 4.5% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c17a35;margin-right:7px}h1,h2{font-family:'Space Grotesk',sans-serif}h1{font-size:clamp(32px,3.6vw,53px);letter-spacing:-2.5px;margin:12px 0}h1>span{color:#d5981f}.intro p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.route-stamp{border:1px solid #bac5b6;border-radius:8px;padding:15px 24px;transform:rotate(-6deg);text-align:center;margin-right:22px}.route-stamp span{display:block;font-size:8px;letter-spacing:2px}.route-stamp strong{display:block;font-family:'Space Grotesk';font-size:32px;padding:5px}.game-layout{display:grid;grid-template-columns:195px minmax(360px,1fr) 220px;gap:34px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading h2{font-size:15px;margin:0}.section-heading>span{font-size:11px;color:var(--muted)}.muted{color:var(--muted);font-size:11px;margin:8px 0 20px}nav{display:flex;flex-direction:column;gap:5px}.level{border:1px solid transparent;background:none;display:flex;align-items:center;text-align:left;padding:10px 9px;border-radius:7px;gap:11px}.level .number{font-family:'Space Grotesk';font-size:12px;color:#8b948b}.level .stop{font-size:12px;font-weight:500;flex:1}.level .star{font-size:12px;color:#a7afa0}.level.active{background:var(--ink);color:#fff}.level.active .number,.level.active .star{color:var(--yellow)}.level.done:not(.active) .star{color:#a47413}.tip{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.tip>span{font-size:9px;letter-spacing:1.5px;font-weight:700}.tip p{font-size:11px;line-height:1.8;color:var(--muted)}.play-area{min-width:0}.board-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px}.board-heading h2{font-size:26px;margin:5px 0 0;letter-spacing:-.8px}.board-heading .eyebrow{color:#8c947f;font-size:9px}.stats{display:flex;gap:24px}.stats>div{display:flex;flex-direction:column;align-items:center}.stats span{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.stats strong{font-family:'Space Grotesk';font-size:25px;font-weight:500;margin-top:3px}.road-wrap{position:relative;background:#dce1d4;border-radius:12px;padding:15px 25px 12px 19px;border:1px solid #cbd3c4}.road-top,.road-bottom{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1.4px;color:#75836f;font-weight:700}.road-top{margin-bottom:12px}.road-bottom{margin-top:11px;font-size:6px;letter-spacing:1px}.road-bottom>span:first-child,.road-bottom>span:last-child{color:#aab5a0;letter-spacing:3px;font-size:10px}.board-row{position:relative}.board{width:100%;aspect-ratio:1;position:relative;border:7px solid #7c8e79;border-radius:7px;background-color:#a1ae96;background-image:linear-gradient(to right,#c0c9b166 1px,transparent 1px),linear-gradient(to bottom,#c0c9b166 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 6);box-shadow:inset 0 2px 8px #263b2c22}.board:after{content:'';position:absolute;right:-8px;top:33.3333%;height:16.6667%;width:9px;background:#a1ae96;pointer-events:none}.exit{position:absolute;left:calc(100% + 2px);top:34%;height:15%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#526c44}.exit span{font-size:6px;writing-mode:vertical-rl;letter-spacing:1px}.exit b{font-size:20px;line-height:1}.vehicle{position:absolute;padding:4px;border:0;background:none;touch-action:none;z-index:1;transition:left .13s,top .13s}.vehicle:focus-visible{outline:3px solid white;outline-offset:-2px;border-radius:10px;z-index:3}.car-body{height:100%;width:100%;background:var(--car);border-radius:10px;border:2px solid #00000018;box-shadow:0 4px 0 #26372c44, inset 0 2px 0 #ffffff66;position:relative;display:flex;align-items:center;justify-content:space-between;padding:7%;color:#173e31}.car-body:before,.car-body:after{content:'';display:block;width:18%;height:74%;background:#263e43cc;border-radius:3px;border:2px solid #ffffff44;box-shadow:0 0 0 1px #00000011}.vehicle.v .car-body{flex-direction:column;padding:10%}.vehicle.v .car-body:before,.vehicle.v .car-body:after{width:74%;height:18%}.roof{position:absolute;background:#ffffff22;border-radius:5px;left:32%;top:13%;width:34%;height:74%;border:1px solid #ffffff24}.v .roof{top:32%;left:13%;height:34%;width:74%}.danfo .car-body{background:linear-gradient(to bottom,#f7bf32 0 24%,#26372c 24% 30%,#f7bf32 30% 70%,#26372c 70% 76%,#f7bf32 76%);border-radius:8px}.danfo .roof{background:#f7bf32;border:0;display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:1px}.vehicle.hinting .car-body{outline:3px dashed #fff;outline-offset:2px}.controls{display:flex;align-items:center;gap:8px;margin-top:16px}.controls button{background:#eeefe6;border:1px solid var(--line);border-radius:6px;padding:9px 10px;font-size:14px;display:flex;align-items:center;gap:7px}.controls button span{font-size:11px}kbd{font:9px 'DM Sans';color:#8a9386;border:1px solid #d2d8cb;border-radius:3px;padding:1px 3px}.controls>span{margin-left:auto;font-size:10px;color:var(--muted)}#status{font-size:11px;color:var(--muted);text-align:center;min-height:30px;line-height:1.6;margin-top:15px}.guide{padding:17px 0 0 8px}.guide-label{font-size:9px;letter-spacing:1.6px;color:#88917c}.guide h2{font-size:26px;letter-spacing:-.9px;line-height:1.15;margin:13px 0 24px}.guide>p{font-size:12px;line-height:1.8;color:var(--muted)}.mini-danfo{height:48px;width:104px;transform:rotate(-8deg);border-radius:8px;background:linear-gradient(#efb82d 0 23%,#26372c 23% 29%,#efb82d 29% 71%,#26372c 71% 77%,#efb82d 77%);box-shadow:0 5px 0 #26372c33;display:flex;align-items:center;justify-content:space-around}.mini-danfo span{height:28px;width:13px;background:#34483c;border-radius:3px}.mini-danfo b{font-size:10px}.guide ol{list-style:none;padding:0;counter-reset:steps;margin-top:25px}.guide li{counter-increment:steps;position:relative;padding-left:30px;margin:19px 0}.guide li:before{content:counter(steps);position:absolute;left:0;top:0;border:1px solid #cbd2c2;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;font-size:10px}.guide li b{font-size:11px;display:block}.guide li span{font-size:11px;line-height:1.7;color:var(--muted);display:block;margin-top:5px}.keyboard-note{border-top:1px solid var(--line);padding-top:18px;margin-top:25px;font-size:11px}.keyboard-note p{font-size:10px;line-height:1.7;color:var(--muted)}.leaderboard-link{border:0;background:none;padding:12px 0;text-align:left;font-size:11px;text-decoration:underline;text-underline-offset:4px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:34px;padding:22px 0;font-size:8px;letter-spacing:1px;color:#8a9485}footer a{color:var(--ink);font-weight:700}.win{position:absolute;inset:0;border-radius:12px;background:#f6f5edf2;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;backdrop-filter:blur(4px)}[hidden]{display:none!important}.win h2{font-size:38px;letter-spacing:-2px;margin:15px 0}.win p{font-size:13px;line-height:1.8}.primary{background:var(--ink);color:#fff;border:0;border-radius:6px;padding:13px 24px;font-weight:600;font-size:13px;margin:15px 0 4px}dialog{border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);max-width:490px;width:90%;padding:35px}dialog::backdrop{background:#173e3188;backdrop-filter:blur(3px)}dialog h2{font-size:30px}dialog p{font-size:12px;line-height:1.7;color:var(--muted)}.dialog-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:25px}#scores{padding-left:24px}#scores li{padding:10px 5px;border-bottom:1px solid var(--line);font-size:13px}#scores li.own{font-weight:700;background:#e5ead8}
@media(min-width:1450px){main{padding-top:48px}.game-layout{grid-template-columns:210px minmax(360px,600px) 230px;gap:45px}}@media(max-width:1100px){.game-layout{grid-template-columns:165px minmax(330px,1fr);gap:25px}.guide{grid-column:1/-1;display:none}.route-stamp{margin-right:5px}.header-note{display:none}main{max-width:950px}.controls>span{font-size:9px}}@media(max-width:650px){header{height:78px;padding:0 20px}.brand{font-size:20px}.brand-icon{width:36px;height:36px;font-size:28px}.profile{gap:5px}.profile img{width:30px;height:30px}.profile small{font-size:9px}main{padding:26px 18px 0}.intro{margin-bottom:26px}h1{letter-spacing:-1.5px;font-size:32px}.intro p{font-size:12px}.route-stamp{display:none}.game-layout{display:flex;flex-direction:column;gap:20px}.journey .section-heading,.journey .muted,.tip{display:none}nav{flex-direction:row;overflow-x:auto;padding-bottom:6px}.level{padding:9px;flex-shrink:0}.level .stop,.level .star{display:none}.board-heading h2{font-size:24px}.controls>span{display:none}.controls button{flex:1;justify-content:center}footer{font-size:7px;gap:20px;line-height:1.7}.wide{display:none}.road-wrap{padding-right:24px} }
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Smaller vehicle artwork, with full grid-sized drag and keyboard targets. */
.vehicle .car-body{transform:scale(.82);transform-origin:center}


.traffic-context{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.traffic-context h3{font-size:12px;margin:8px 0}.traffic-context p{font-size:11px;line-height:1.7;color:var(--muted)}.traffic-context small{font-size:9px;line-height:1.6;color:var(--muted);display:block}


.level:disabled{opacity:.5;cursor:not-allowed}.level:disabled .star{font-size:10px;filter:grayscale(1)}

/* Lagos street: green direction signs, asphalt, and yellow-and-black kerbs. */
.road-wrap{background:#c8baa0;border:1px solid #ad9e83;padding:15px 29px 12px 22px;box-shadow:inset 0 0 0 5px #e0d7c4,0 5px 15px #173e310b}
.road-top{min-height:38px;margin-bottom:12px;color:#4f5d44;font-size:8px}
.road-sign{background:#24623e;color:#fff8df;border:2px solid #f5edd4;border-radius:4px;padding:6px 12px;font-size:10px;letter-spacing:1.5px;box-shadow:0 2px 0 #35543a66;display:flex;align-items:center;gap:9px}
.road-sign-arrow{font-size:19px;line-height:1}.road-authority{text-align:right;font-size:7px;line-height:1.8;letter-spacing:1.1px}
.board{border:9px solid transparent;background-color:#4a514c;background-image:linear-gradient(to right,#ebe4cc22 1px,transparent 1px),linear-gradient(to bottom,#ebe4cc22 1px,transparent 1px),linear-gradient(135deg,#ffffff05 25%,transparent 25%,transparent 75%,#00000006 75%);background-size:calc(100% / 6) calc(100% / 6),calc(100% / 6) calc(100% / 6),7px 7px;background-clip:padding-box;box-shadow:inset 0 0 0 2px #f8e5a966,inset 0 5px 12px #15261b55}
.board-row{border-radius:7px;background:repeating-conic-gradient(#efbd32 0% 25%,#26322a 0% 50%) 0 / 46px 46px;box-shadow:0 3px 0 #695d4c66}
.board:after{right:-10px;width:12px;background:repeating-linear-gradient(to bottom,#f5efdb 0 5px,#4a514c 5px 11px);border-left:2px solid #f5efdb;border-right:2px solid #f5efdb}
.exit{left:calc(100% + 1px);color:#24452f;background:#e2d6b7;border-radius:0 4px 4px 0;padding:2px}.exit span{font-weight:800}.road-bottom{color:#4c5944;min-height:22px;font-size:7px}.road-bottom>span:first-child,.road-bottom>span:last-child{color:#93762b}
@media(max-width:650px){.road-sign{font-size:8px;padding:4px 8px}.road-authority{font-size:6px}.road-bottom{font-size:5px}.road-wrap{padding-left:17px;padding-right:25px}}

/* Detailed overhead vehicles. Parts share an axis so horizontal and vertical
   cars have the same proportions, with their fronts toward right / bottom. */
.vehicle .car-body{display:block;isolation:isolate;padding:0;border:0;border-radius:19% 24% 24% 19% / 29% 35% 35% 29%;background:linear-gradient(180deg,#ffffff6b 0%,transparent 15%,#ffffff12 45%,#00000024 100%),var(--car);box-shadow:0 5px 0 #14201c66,0 9px 9px #07150e55,inset 0 0 0 1px #ffffff66,inset 0 -4px 0 #00000020;overflow:visible}
.vehicle.v .car-body{padding:0;border-radius:29% 29% 35% 35% / 19% 19% 24% 24%;background:linear-gradient(90deg,#ffffff6b 0%,transparent 15%,#ffffff12 45%,#00000024 100%),var(--car)}
.vehicle .car-body:before,.vehicle .car-body:after{display:none}
.car-body>span{position:absolute;display:block;pointer-events:none}
.car-body .roof{left:32%;top:19%;width:28%;height:62%;border-radius:19%;background:linear-gradient(155deg,#ffffff44,#ffffff12 60%,#00000015),var(--car);border:1px solid #ffffff55;box-shadow:inset 0 -2px 2px #00000019;z-index:3}
.car-body .windscreen{left:61%;top:14%;width:16%;height:72%;border-radius:12% 45% 45% 12%;background:linear-gradient(155deg,#bfe0da 0%,#749c9b 19%,#1f4247 22%,#102e36 57%,#395e63 59%,#16353e 100%);border:2px solid #263e3f;box-shadow:0 0 0 1px #ffffff55;z-index:3}
.car-body .rear-window{left:18%;top:17%;width:12%;height:66%;border-radius:40% 10% 10% 40%;background:linear-gradient(155deg,#82a7a6,#163b44 40%,#244b53 70%,#93b7af);border:2px solid #294343;z-index:3}
.car-body .bonnet{left:79%;top:23%;width:15%;height:54%;border-radius:12% 40% 40% 12%;border-top:1px solid #ffffff55;border-bottom:1px solid #00000022;background:linear-gradient(180deg,#ffffff18,transparent);z-index:2}
.car-body .tyre{background:linear-gradient(180deg,#101a18,#35433e 42%,#101a18);border:1px solid #0b1610;border-radius:3px;box-shadow:0 1px 1px #0008;z-index:-1;width:14%;height:14%;left:19%;top:-5%}
.car-body .tyre-fr{left:72%}.car-body .tyre-rl{top:91%}.car-body .tyre-rr{left:72%;top:91%}
.car-body .mirror{width:7%;height:12%;left:60%;top:-4%;border-radius:3px;background:var(--car);border:1px solid #243a3288;box-shadow:1px 1px 1px #0005;z-index:4}.car-body .mirror-right{top:92%}
.car-body .headlight{left:94%;top:17%;width:4%;height:20%;border-radius:2px;background:#fff3c8;box-shadow:0 0 3px #ffe8a588;z-index:4}.car-body .light-right{top:63%}
.car-body .taillight{left:2%;top:19%;width:4%;height:17%;border-radius:2px;background:#eb5744;border-bottom:1px solid #9f2d27;z-index:4}.car-body .tail-right{top:64%}
.car-body .bumper{left:97%;top:34%;width:2%;height:32%;border-radius:2px;background:#b8c6bc;z-index:4}.car-body .rear-bumper{left:0}
.vehicle.v .roof{left:19%;top:32%;width:62%;height:28%}.vehicle.v .windscreen{left:14%;top:61%;width:72%;height:16%;border-radius:12% 12% 45% 45%;background:linear-gradient(130deg,#9dc1ba,#173b45 35%,#16343c 65%,#507a7b 67%,#1b3a42)}
.vehicle.v .rear-window{left:17%;top:18%;width:66%;height:12%;border-radius:40% 40% 10% 10%}.vehicle.v .bonnet{left:23%;top:79%;width:54%;height:15%;border-radius:12% 12% 40% 40%;border-top:0;border-left:1px solid #ffffff55;border-right:1px solid #00000022}
.vehicle.v .tyre{left:-5%;top:19%;width:14%;height:14%}.vehicle.v .tyre-fr{left:91%}.vehicle.v .tyre-rl{top:72%}.vehicle.v .tyre-rr{left:91%;top:72%}
.vehicle.v .mirror{left:-4%;top:60%;width:12%;height:7%}.vehicle.v .mirror-right{left:92%;top:60%}
.vehicle.v .headlight{left:17%;top:94%;width:20%;height:4%}.vehicle.v .light-right{left:63%;top:94%}.vehicle.v .taillight{left:19%;top:2%;width:17%;height:4%}.vehicle.v .tail-right{left:64%;top:2%}
.vehicle.v .bumper{left:34%;top:97%;width:32%;height:2%}.vehicle.v .rear-bumper{top:0}
.vehicle .long-body{border-radius:9% 15% 15% 9% / 23% 30% 30% 23%}.vehicle.v .long-body{border-radius:23% 23% 30% 30% / 9% 9% 15% 15%}.long-body .roof{background:repeating-linear-gradient(90deg,transparent 0 23%,#ffffff22 24% 26%,transparent 27% 50%),var(--car)}.v .long-body .roof{background:repeating-linear-gradient(0deg,transparent 0 23%,#ffffff22 24% 26%,transparent 27% 50%),var(--car)}
.danfo .car-body{border-radius:10% 16% 16% 10% / 16% 22% 22% 16%;background:linear-gradient(180deg,#ffe382 0%,#f3b82c 19%,#303b28 20% 25%,#edb328 26% 74%,#303b28 75% 80%,#d9971d 81% 100%);box-shadow:0 5px 0 #16231b88,0 9px 9px #07150e66,inset 0 0 0 1px #fff0a7,inset 0 -3px 0 #9c6a2288}
.danfo .car-body .roof{left:22%;top:26%;width:40%;height:48%;border-radius:9%;background:linear-gradient(180deg,#ffda67,#edb02a);border:1px solid #ffe38a;box-shadow:0 2px 2px #6a481c55;display:grid;place-items:center}
.danfo .car-body .danfo-lettering{position:static;font-size:clamp(6px,.65vw,10px);letter-spacing:.7px;color:#21382d;font-weight:800}
.danfo .windscreen{left:67%;top:12%;width:15%;height:76%;border-radius:12% 22% 22% 12%;border-width:2px}.danfo .rear-window{left:7%;top:16%;width:12%;height:68%;border-radius:2px}.danfo .bonnet{left:84%;width:10%;top:25%;height:50%;border-radius:2px}.danfo .mirror{left:67%;background:#263d34;width:8%}.danfo .tyre{left:13%;width:12%}.danfo .tyre-fr,.danfo .tyre-rr{left:77%}.danfo .bumper{background:#37453b;width:3%;left:97%}.danfo .rear-bumper{left:0}.danfo .taillight{background:linear-gradient(#f78a2c 50%,#d84028 50%)}

/* Flat-front Lagos minibus: passenger glazing, ribbed roof, twin black bands. */
.danfo .car-body{transform:scale(.9,.91);border-radius:5px 7px 7px 5px;background:linear-gradient(180deg,#ffdc66 0 7%,#e9ad1d 8% 14%,#192a20 15% 20%,#f7c331 21% 76%,#192a20 77% 82%,#d49114 83% 100%);border:1px solid #ffe18a;box-shadow:0 5px 0 #18291c,0 9px 9px #07150e88,inset 0 2px 0 #fff0a4,inset 0 -3px 0 #bb7f1c}
.danfo .car-body .roof{left:17%;top:19%;width:57%;height:62%;border-radius:3px;background:linear-gradient(180deg,#ffe073,#f4bc2c 40%,#e9a91f);border:1px solid #fbe08a;box-shadow:0 2px 3px #68481466,inset 0 1px 0 #fff0a0;z-index:4}
.danfo .car-body .danfo-lettering{font-size:clamp(7px,.8vw,12px);font-weight:900;letter-spacing:1px;transform:rotate(-90deg);text-shadow:0 1px #fff0a099}
.danfo .roof .bus-roof-rib{position:absolute;top:9%;height:82%;width:2px;background:#ffe48499;border-left:1px solid #be8b2266;box-shadow:1px 0 #ffe99b88}.danfo .roof .rib-one{left:20%}.danfo .roof .rib-two{right:20%}
.danfo .car-body .windscreen{left:77%;top:11%;width:16%;height:78%;border-radius:2px;border:2px solid #182e28;background:linear-gradient(180deg,#b0cbc0,#41655f 15%,#173c3c 18% 47%,#e1dcb6 48% 52%,#173c3c 53% 80%,#5c8576 82%,#153a36);box-shadow:1px 0 0 #ffeaa0;z-index:5}
.danfo .car-body .rear-window{left:3%;top:17%;width:10%;height:66%;border-radius:2px;background:linear-gradient(160deg,#72978a,#173c35 45%,#254d40);border:2px solid #21372a;z-index:5}
.danfo .car-body .bonnet{display:none}.danfo .car-body .bus-side{left:17%;top:5%;width:56%;height:12%;border-radius:1px;background:repeating-linear-gradient(90deg,#163b37 0 19%,#dbab35 20% 23%);border:1px solid #b78321;box-shadow:0 1px #ffe180;z-index:3}.danfo .car-body .bus-side-bottom{top:84%;background:repeating-linear-gradient(90deg,#183e37 0 19%,#d7a329 20% 23%)}
.danfo .car-body .mirror{left:81%;top:-8%;width:8%;height:17%;border-radius:2px;background:#172c23;border:1px solid #53694e;z-index:6}.danfo .car-body .mirror-right{top:91%}
.danfo .car-body .headlight{left:95%;top:10%;width:4%;height:14%;border-radius:50%;background:#fff2bf;border:1px solid #a18c54;box-shadow:0 0 2px #fff0b4}.danfo .car-body .light-right{top:76%}
.danfo .car-body .bus-grille{left:95%;top:30%;width:4%;height:40%;border-radius:1px;background:repeating-linear-gradient(0deg,#1e3026 0 2px,#6c7861 2px 3px);z-index:5}.danfo .car-body .bus-plate{left:98%;top:39%;width:4%;height:22%;background:#e8edd9;border:1px solid #495d3c;font-size:3px;writing-mode:vertical-rl;line-height:1;color:#27513b;z-index:7}
.danfo .car-body .front-bumper{left:100%;top:8%;width:3%;height:84%;border-radius:1px;background:linear-gradient(90deg,#6e7860,#25382b);z-index:6}.danfo .car-body .rear-bumper{left:-3%;top:10%;width:3%;height:80%;border-radius:1px}
.danfo .car-body .tyre{left:13%;top:-7%;width:12%;height:16%;border-radius:2px}.danfo .car-body .tyre-fr{left:78%}.danfo .car-body .tyre-rl{top:91%}.danfo .car-body .tyre-rr{left:78%;top:91%}

.danfo .car-body .driver-seat{left:77%;top:51%;width:17%;height:37%;z-index:7;display:grid;place-items:center;border:1px solid #a5bd9a;border-radius:3px;background:#244436;box-shadow:0 0 0 1px #142b25;overflow:hidden}
.driver-seat .driver-face{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.bus-callout{position:absolute;z-index:12;transform:translate(-50%,-110%);padding:8px 11px;white-space:nowrap;background:#fff4cc;border:2px solid #203d2d;border-radius:12px 12px 12px 3px;color:#203d2d;box-shadow:0 3px 0 #1b2d2855;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;pointer-events:none}
.bus-callout:after{content:'';position:absolute;bottom:-7px;left:21px;width:10px;height:10px;background:#fff4cc;border-bottom:2px solid #203d2d;border-right:2px solid #203d2d;transform:rotate(45deg)}
.voice-toggle{display:block;margin:0 auto 10px;background:none;border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:10px;color:var(--muted)}

/* The same start.ng face leans through the driver's side window during a call. */
.danfo .car-body .driver-seat{overflow:visible}
.driver-seat .driver-face{border-radius:3px;transform-origin:50% 85%;transition:transform .22s ease,box-shadow .22s ease;position:relative;z-index:2}
.danfo.driver-out{z-index:10}
.danfo.driver-out .driver-face{transform:translateY(88%) rotate(-16deg) scale(1.65);border-radius:45% 45% 35% 35%;box-shadow:0 2px 0 #173e31,0 4px 5px #0007;outline:1px solid #f9e9a1}
.driver-seat:after{content:'';position:absolute;left:22%;top:80%;width:55%;height:75%;background:#e8b238;border:1px solid #a37a23;border-radius:35%;transform:scaleY(0);transform-origin:top;transition:transform .2s ease;z-index:1}
.driver-out .driver-seat:after{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.driver-seat .driver-face,.driver-seat:after{transition:none}}

.camera-controls{display:flex;align-items:center;gap:5px;margin:0 0 9px}.scene-badge{font-size:7px;letter-spacing:1px;color:#5c674e;margin-right:auto;font-weight:700}.camera-controls button{background:#ded6c2;border:1px solid #a89e84;border-radius:5px;padding:5px 9px;font-size:10px}.camera-controls button[aria-pressed=true]{background:#244d39;color:#fff4cc;border-color:#244d39}
#scene3d{display:none;width:100%;aspect-ratio:1/1.04;border-radius:9px;overflow:hidden}#scene3d.ready{display:block}#scene3d canvas{display:block;width:100%;height:100%;cursor:grab}
.board-row.has-3d{background:none;box-shadow:none}.has-3d>.exit{display:none}.has-3d #board{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);border:0;background:#f6f5ed;z-index:15}
.has-3d #board:focus-within{width:100%;height:auto;max-height:180px;overflow:auto;clip-path:none;border:2px solid var(--ink);border-radius:8px;padding:8px;aspect-ratio:auto;box-shadow:0 6px 14px #0003;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.has-3d #board:focus-within .vehicle{position:static!important;width:auto!important;height:auto!important;min-height:36px;border:1px solid #b0bba7;border-radius:4px;background:#e1e8d7;padding:6px;font-size:10px}.has-3d #board:focus-within .vehicle:after{content:attr(aria-label);font-size:9px;line-height:1.4}.has-3d #board:focus-within .car-body{display:none}.has-3d #board:after{display:none}
.has-3d .bus-callout{font-size:12px}.render-message{font-size:11px;line-height:1.6;color:#6c4828;background:#fff0c1;padding:10px;border-radius:6px}