.road-trip{--car-color:#3689a4;max-width:780px;margin:0 auto;text-align:left}
.road-dashboard{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;padding:14px 18px;border:1px solid #c1cdb4;border-radius:12px;background:#fffdf4;font-size:1rem}
.road-stamp-count{margin-left:auto;color:#345142}.road-stamps{display:flex;gap:8px;width:100%;font-size:27px;color:#747166;line-height:1}.road-stamps .earned{color:#8f6220}
.road-question{margin:16px 0;padding:16px 20px;background:#fff3c8;border:2px solid #bca16b;border-radius:14px;min-height:115px}
.page-games .road-question .road-stage{font-size:1rem;font-weight:750;color:#695126;margin:0 0 7px}
.page-games .road-question h4{font:650 1.5rem/1.4 'Segoe UI',sans-serif;color:#294936;margin:0;overflow-wrap:anywhere}
.road-model{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px}.road-model:empty{display:none}.road-model .game-art{width:36px;height:36px}.road-model strong{font-size:1.8rem;letter-spacing:.1em;overflow-wrap:anywhere}
.road-view{position:relative;height:390px;overflow:hidden;border:3px solid #718c75;border-radius:18px;background:#c7ddbd;isolation:isolate;touch-action:pan-y}
.road-view:focus-visible{outline:4px solid #745894;outline-offset:4px}
.road-landscape{position:absolute;inset:0;overflow:hidden;background:linear-gradient(90deg,#c0d5ad,#e7eccb 18%,#e7eccb 82%,#c0d5ad)}
.road-decoration{position:absolute;width:38px;height:38px;opacity:.95}
.road-destination{position:absolute;z-index:3;top:9px;left:50%;transform:translateX(-50%);max-width:92%;padding:7px 12px;display:flex;align-items:center;gap:7px;border-radius:8px;background:#fffdf5;border:2px solid #617c77;font-size:1rem;font-weight:700;color:#294c43;text-align:center;line-height:1.3}
.road-destination .game-art{width:25px;height:25px}
.road-highway{position:absolute;inset:0 13%;background:#536879;border-left:5px solid #fff5cf;border-right:5px solid #fff5cf;box-shadow:0 0 0 5px #83928d}
.road-stripe{position:absolute;top:-64px;bottom:-64px;width:4px;background:repeating-linear-gradient(to bottom,#eee6cb 0 28px,transparent 28px 64px);opacity:.8}
.road-car{position:absolute;bottom:26px;width:clamp(36px,19%,62px);transform:translateX(-50%);z-index:2;line-height:0;filter:drop-shadow(0 8px 5px #16273755)}
.road-car svg{display:block;width:100%;height:auto}
.road-signs{position:absolute;top:80px;left:4px;right:4px;display:grid;grid-template-columns:repeat(var(--lanes),minmax(0,1fr));gap:7px;z-index:4;align-items:stretch}
.page-games .road-answer{min-width:0;min-height:80px;padding:10px 4px;border:3px solid #e3dcc0;border-radius:10px;background:#fffdf3;color:#263f43;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;font:650 1.125rem/1.3 'Segoe UI',sans-serif;overflow-wrap:anywhere;box-shadow:0 7px 0 #1f3941}
.road-answer .game-art{width:34px;height:34px}.road-answer.selected{background:#fff1b4;border-color:#e9be58;box-shadow:0 7px 0 #a57530}.road-answer.selected::after{content:'Your lane';font-size:.8rem;font-weight:600;line-height:1.25}.road-answer-hint{outline:4px solid #fff;outline-offset:3px}
.road-lane-label{font-size:.85rem;font-weight:500}
.road-distance{height:13px;background:#fffdf7;border:1px solid #a9b89e;border-radius:10px;margin-top:12px;overflow:hidden}.road-distance span{display:block;width:0;height:100%;background:#3d806e}
.road-controls{display:grid;grid-template-columns:1fr minmax(0,2fr) 1fr;gap:12px;margin-top:16px;align-items:stretch}
.page-games .road-controls button{padding:14px 8px;min-height:60px;border-radius:12px;font-size:1.125rem}.road-controls .button{background:#326f5d;border-color:#326f5d;box-shadow:0 4px 0 #244b40}.road-controls .outline{background:#fffdf4}
.page-games .road-status{font-size:1.125rem;line-height:1.6;margin:18px 0;padding:13px 16px;background:#fffdf4;border-left:4px solid #6f5990;color:#324939;border-radius:8px}
.road-options{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-top:4px}.road-options label{display:flex;align-items:center;gap:10px;font-size:1rem}.road-options select{max-width:100%;background:#fffdf9;color:#30483a;border:1px solid #93a28d;border-radius:8px;padding:10px;font:inherit;min-height:44px}.road-motion-label input{width:22px;height:22px;accent-color:#6d568f}
.page-games .road-keyboard{font-size:1rem;color:#486251;margin:16px 0 0}
.road-passport{text-align:left;max-width:620px;margin:18px auto;padding:16px 22px;border:1px solid #b9c8a7;border-radius:14px;background:#fffdf5;color:#294835}.road-passport h4{font:650 1.125rem 'Segoe UI',sans-serif;margin:0 0 10px}.road-passport ul{margin:0;padding-left:24px}.road-passport li{font-size:1.125rem;line-height:1.5;margin:7px 0}
.games-gentle-motion .road-car{transition:left .25s ease,bottom .65s ease}.games-gentle-motion .road-car-crossing{bottom:72%}
.games-gentle-motion .road-running .road-stripe{animation:road-lines .5s linear infinite}.games-gentle-motion .road-running .road-decoration{animation:road-scenery 3s linear infinite;animation-delay:calc(var(--spot)*-.4s)}
[data-theme=ocean] .road-landscape{background:linear-gradient(90deg,#9fcbd0,#efe2b4 16%,#efe2b4 84%,#9fcbd0)}
[data-theme=space] .road-landscape{background:linear-gradient(90deg,#c2afd9,#e3d6ed 16%,#e3d6ed 84%,#c2afd9)}
.games-contrast :is(.road-dashboard,.road-question,.road-status,.road-passport){background:#fff!important;color:#111!important;border-color:#111}.games-contrast .road-question :is(h4,p){color:#111!important}.games-contrast .road-answer{color:#111;border-color:#111}.games-contrast .road-answer.selected{background:#fff1ad;border-width:4px}.games-contrast .road-stamp-count{color:#111}
@keyframes road-lines{to{transform:translateY(64px)}}@keyframes road-scenery{from{transform:translateY(-140px)}to{transform:translateY(200px)}}
@media(max-width:600px){.page-games #game-board:has(.road-trip){padding:12px}.road-question{padding:14px 12px}.road-view{height:330px}.road-highway{inset:0 5%;border-width:3px}.road-decoration{width:22px;height:22px}.road-destination{font-size:.9rem}.road-signs{left:4px;right:4px;gap:4px}.road-answer .game-art{width:29px;height:29px}.road-controls{grid-template-columns:1fr 1fr;gap:10px}.road-controls #road-drive{grid-column:1/-1;grid-row:1}.road-options{align-items:flex-start;gap:12px}.road-options label{flex-wrap:wrap}.road-dashboard{padding:12px}.road-stamp-count{margin-left:0}.road-passport{padding:14px}.road-model strong{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.road-trip *{animation:none!important;transition:none!important}.games-gentle-motion .road-car-crossing{bottom:26px}}
/* Keep whole words visible on small screens and with enlarged text. */
@media(max-width:600px){
 .road-view{height:auto;min-height:330px;display:flex;flex-direction:column}
 .road-destination{position:relative;top:auto;left:auto;transform:none;margin:10px auto;width:fit-content;font-size:1rem}
 .road-highway{position:relative;inset:auto;margin:0 5%;flex:1;min-height:250px;padding:8px 8px 155px;overflow:hidden}
 .road-signs{position:relative;top:auto;left:auto;right:auto;grid-template-columns:1fr;gap:12px}
 .page-games .road-answer{min-height:60px;flex-direction:row;flex-wrap:wrap;gap:5px 10px;padding:10px 8px;overflow-wrap:normal}
 .road-answer strong{overflow-wrap:anywhere;max-width:100%}
 .road-answer.selected::after{width:100%;text-align:center;font-size:.9rem}
 .road-car{width:52px;max-width:26%}
 .games-gentle-motion .road-car-crossing{bottom:90px}
}

@media(prefers-reduced-motion:reduce){.games-gentle-motion .road-car-crossing{bottom:26px}}

/* A quiet little neighborhood sits beside the learning road. */
.road-community{padding:14px 18px 8px;border:3px solid #718c75;border-bottom:0;border-radius:18px 18px 0 0;background:linear-gradient(#e1eff0 0 52%,#d6e3be 52%);position:relative}
.road-community+.road-view{border-radius:0 0 18px 18px}
.page-games .road-friend-bubble{margin:0 auto 9px;padding:9px 14px;width:fit-content;max-width:100%;background:#fffdf4;border:1px solid #b8bc9d;border-radius:15px;color:#355047;font-size:1.125rem;line-height:1.4;text-align:center}
.road-friend-cast{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,5rem),1fr));gap:12px;max-width:550px;margin:auto;align-items:end}
.page-games .road-friend{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;border:2px solid transparent;border-radius:14px;background:transparent;box-shadow:none;padding:3px 8px 8px;min-width:0;min-height:125px;color:#2c4437;font-size:1rem;line-height:1.3;white-space:normal}
.road-friend:hover,.road-friend:focus-visible{border-color:#6c7b88;background:#ffffff80;outline-offset:3px}
.road-friend-picture{display:block;width:105px;max-width:100%;line-height:0}.road-friend-picture svg{width:100%;height:auto;overflow:visible}
.road-friend>span:last-child{padding:3px 9px;border-radius:12px;background:#fffdf0;max-width:100%;overflow-wrap:anywhere;text-align:center}
.road-sound-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px}.page-games .road-sound-controls button{font-size:1.125rem;min-height:48px;padding:10px 18px;border-radius:12px;background:#fff6db;color:#29483b}
.road-sound-controls [aria-pressed=true]{background:#e0eccc!important;border-color:#5c825f}
.road-adjust{margin-top:12px;border:1px solid #b9c8ac;border-radius:12px;background:#fffdf5}.page-games .road-adjust summary{font-size:1.125rem;padding:12px 16px;cursor:pointer;color:#365540}.road-adjust .road-options{padding:8px 16px 18px}
.road-wave-hand{transform-origin:77px 76px}.road-tail{transform-origin:88px 95px}.road-bird-wing{transform-origin:40px 65px}
.games-gentle-motion .road-running .road-wave-hand,.games-gentle-motion .road-friends-reacting .road-wave-hand{animation:road-wave .65s ease-in-out 3 alternate}
.games-gentle-motion .road-friends-reacting .road-tail{animation:road-wag .45s ease-in-out 4 alternate}
.games-gentle-motion .road-running .road-bird-wing,.games-gentle-motion .road-friends-reacting .road-bird-wing{animation:road-flap .7s ease-in-out 3 alternate}
.games-gentle-motion .road-running .road-bird-two{animation:road-fly 3s ease-in-out infinite alternate;transform-origin:center;transform-box:fill-box}
.games-contrast .road-friend-bubble,.games-contrast .road-friend>span:last-child,.games-contrast .road-adjust{background:#fff;color:#111;border-color:#111}.games-contrast .road-adjust summary{color:#111}
@keyframes road-wave{from{transform:rotate(-8deg)}to{transform:rotate(16deg)}}
@keyframes road-wag{from{transform:rotate(-8deg)}to{transform:rotate(12deg)}}
@keyframes road-flap{from{rotate:-8deg}to{rotate:12deg}}
@keyframes road-fly{from{translate:0 0}to{translate:-20px -10px}}
@media(max-width:600px){.road-community{padding:12px 8px 6px}.road-friend-cast{gap:2px}.page-games .road-friend{padding:2px 2px 8px;min-height:100px;font-size:1rem}.road-friend-picture{width:80px}.road-friend>span:last-child{padding:4px}.page-games .road-friend-bubble{font-size:1.125rem}}
@media(prefers-reduced-motion:reduce){.road-community *{animation:none!important;transition:none!important}}

/* Large, glowing celestial landmarks stay outside the driving lanes. */
.page-games[data-play-theme=space] .road-decoration.symbol-sun{width:52px;height:52px}.page-games[data-play-theme=space] .road-decoration.symbol-planet{width:47px;height:47px}
@media(max-width:600px){.page-games[data-play-theme=space] .road-decoration.symbol-sun,.page-games[data-play-theme=space] .road-decoration.symbol-planet{width:24px;height:24px}}

/* Keep the goal, road, and steering together, with friends on sidewalks beside the driving area. */
.road-course-trip .road-cockpit{border:2px solid #799988;border-radius:18px;background:#f9fbf1;overflow:hidden;margin-top:14px;scroll-margin-top:10px}
.road-course-trip .road-question{margin:0;border:0;border-radius:0;min-height:0;padding:12px 16px;border-bottom:2px solid #d9c796}
.page-games .road-course-trip .road-question .road-stage{font-size:.95rem;margin:0 0 4px}
.page-games .road-course-trip .road-question h4{font-size:1.35rem;line-height:1.35}
.road-course-trip .road-model{gap:6px;margin-top:6px}.road-course-trip .road-model .game-art{width:28px;height:28px}
.road-course-trip .road-view{height:clamp(240px,36dvh,390px);min-height:0;display:block;border:0;border-radius:0;overflow:hidden}
.road-course-trip .road-destination{position:absolute;top:7px;left:50%;transform:translateX(-50%);margin:0;padding:4px 9px;max-width:94%;font-size:.9rem;white-space:normal;z-index:3}
.road-course-trip .road-destination .game-art{width:20px;height:20px;flex:none}
.page-games .road-course-trip .road-highway{position:absolute;inset:0 12%;margin:0;min-height:0;padding:0;overflow:hidden}
.road-course-trip .road-car{bottom:8px;width:51px;max-width:22%;z-index:2}
.road-course-trip .road-signs{position:absolute;top:64px;left:5px;right:5px;display:grid;grid-template-columns:repeat(var(--lanes),minmax(0,1fr));gap:8px}
.page-games .road-course-trip .road-answer{min-height:75px;padding:7px 3px;font-size:1.1rem;flex-direction:column;gap:3px;overflow-wrap:anywhere;border-width:2px}
.road-course-trip .road-answer.selected::after{font-size:.8rem}.road-course-trip .road-answer strong{max-width:100%;overflow-wrap:anywhere}
.road-course-trip .road-answer .game-art{width:28px;height:28px}
.road-course-objects{position:absolute;inset:0;pointer-events:none;overflow:hidden}.road-course-object{position:absolute;transform:translate(-50%,-50%);width:45px;max-width:24%;line-height:0}.road-course-object svg,.road-course-object .game-art{display:block;width:100%;height:auto}.road-course-object.road-star{width:33px;filter:drop-shadow(0 0 5px #ffe595)}
.road-course-trip .road-live-stats{display:flex;gap:8px 20px;justify-content:space-between;flex-wrap:wrap;padding:9px 14px;background:#e5eddb;color:#284b3b;font-size:1rem;font-weight:650;border-top:1px solid #a5b9a6}
.road-course-trip .road-distance{height:9px;border:0;border-radius:0;margin:0}.road-course-trip .road-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:12px}
.page-games .road-course-trip .road-controls button{font-size:1rem;padding:9px 3px;min-height:46px;white-space:normal}
.road-course-trip .road-controls #road-drive{grid-column:1/-1;grid-row:2;box-shadow:none}
.page-games .road-course-trip .road-status{margin:0;padding:10px 14px;border-radius:0;border:0;border-top:1px solid #bacab6;background:#f6faed;font-size:1rem;line-height:1.45}
.road-course-trip .road-community{margin-top:16px;border:2px solid #718c75;border-radius:16px;padding:10px 12px}
.road-course-trip .road-friend-picture{width:74px}.page-games .road-course-trip .road-friend{min-height:98px}.road-course-trip .road-friend-bubble{font-size:1rem;padding:5px 12px}
.road-course-trip .road-dashboard{padding:10px 14px;font-size:.95rem}.road-course-trip .road-stamps{width:auto;font-size:22px;margin-left:auto}.road-course-trip .road-stamp-count{margin-left:0}
.road-course-trip .road-stripe{animation:none!important;transform:translateY(var(--road-offset,0px))}.road-course-trip .road-car{transition:none}.games-gentle-motion .road-course-trip .road-car{transition:left .14s ease}.games-gentle-motion .road-course-trip .road-car-crossing{bottom:52%}
.road-course-trip.road-blocked .road-question{background:#fff0b1}.road-course-trip.road-blocked .road-view{box-shadow:inset 0 0 0 4px #edbd68}
.page-games[data-play-theme=ocean] .road-cockpit{border-color:#54cdd0}.page-games[data-play-theme=space] .road-cockpit{border-color:#94aff1}.page-games[data-play-theme=space] .road-live-stats{background:#1c2948;color:#e7f6ff}.page-games[data-play-theme=ocean] .road-live-stats{background:#0c6e88;color:#f1fffc}
.games-contrast .road-cockpit,.games-contrast .road-live-stats{border-color:#111;background:#fff!important;color:#111!important}
@media(max-width:600px){.page-games .road-course-trip .road-highway{inset:0 5%;margin:0}.road-course-trip .road-view{height:clamp(220px,32dvh,290px)}.road-course-trip .road-question{padding:10px 12px}.road-course-trip .road-controls{padding:8px;gap:6px}.page-games .road-course-trip .road-controls button{font-size:1rem}.road-course-trip .road-dashboard{gap:5px 10px}.road-course-trip .road-live-stats{font-size:.9rem;gap:5px 10px}.road-course-trip .road-signs{gap:6px}.page-games .road-course-trip .road-answer{font-size:1rem}.road-course-trip .road-car{width:44px}}
@media(prefers-reduced-motion:reduce){.road-course-trip .road-car{transition:none!important}.road-course-trip .road-car-crossing{bottom:8px}.road-course-trip .road-stripe{transform:none}}
@media(max-width:380px){.road-course-trip .road-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.road-course-trip [data-car-steer=left]{grid-area:1/1}.road-course-trip [data-car-steer=right]{grid-area:1/2}.road-course-trip #road-faster{grid-area:2/1}.road-course-trip #road-slower{grid-area:2/2}.road-course-trip .road-controls #road-drive{grid-row:3;grid-column:1/-1}}

/* The neighborhood is part of the road scene, with clear curbs and sidewalks. */
.road-course-trip{--road-shoulder:19%}
.page-games .road-course-trip.road-trip .road-highway{inset:0 var(--road-shoulder);margin:0}
.page-games .road-course-trip .road-community.road-sidewalk-friends{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:0;background:none;z-index:2;pointer-events:none}
.road-sidewalk-friends .road-sidewalk{position:absolute;top:0;bottom:0;width:calc(var(--road-shoulder) - 8px);background:repeating-linear-gradient(to bottom,#ece8d5 0 45px,#c2bdab 46px 48px);background-position-y:var(--walk-offset,0px);box-shadow:inset -3px 0 #fff5d9}
.road-sidewalk-friends .road-sidewalk-left{left:2px}.road-sidewalk-friends .road-sidewalk-right{right:2px;box-shadow:inset 3px 0 #fff5d9}
.road-sidewalk-friends .road-friend-cast{position:absolute;inset:0;display:block;max-width:none;margin:0}
.page-games .road-sidewalk-friends .road-friend{position:absolute;transform:translateY(-50%);width:calc(var(--road-shoulder) - 8px);min-width:44px;min-height:44px;max-height:none;padding:3px 0;gap:0;border:2px solid transparent;border-radius:10px;pointer-events:auto;font-size:1rem;line-height:1.2;background:transparent}
.page-games .road-sidewalk-friends .road-friend[hidden]{display:none}
.road-sidewalk-friends .road-sidewalk-left-friend{left:2px}.road-sidewalk-friends .road-sidewalk-right-friend{right:2px}
.road-sidewalk-friends .road-friend-picture{width:80px;max-width:100%}
.page-games .road-sidewalk-friends .road-friend>span:last-child{font-size:.875rem;padding:2px 3px;border:1px solid #a7b7a5;background:#fffdf1;line-height:1.25;overflow-wrap:normal}
.page-games .road-sidewalk-friends .road-friend:hover,.page-games .road-sidewalk-friends .road-friend:focus-visible{border-color:#305d66;background:#ffffff65;outline:2px solid #fff;outline-offset:-3px}
.page-games .road-sidewalk-friends .road-friend-greeting>span:last-child{background:#fff0a9;border-color:#817130}
.page-games .road-course-trip .road-friend-bubble{border:0;border-top:1px solid #c0cdb9;border-radius:0;margin:0;max-width:none;width:auto;padding:8px 14px;font-size:1rem;line-height:1.4;background:#edf4e6;text-align:left;color:#294b3d}
.games-gentle-motion .road-sidewalk-friends .road-wave-hand,.games-gentle-motion .road-sidewalk-friends .road-bird-wing,.games-gentle-motion .road-sidewalk-friends .road-bird-two{animation:none}
.road-sidewalk-friends .road-friend-greeting .road-wave-hand{animation:road-wave .55s ease-in-out 4 alternate}
.road-sidewalk-friends .road-friend-greeting .road-tail{animation:road-wag .3s ease-in-out 6 alternate}
.road-sidewalk-friends .road-friend-greeting .road-bird-wing{animation:road-flap .45s ease-in-out 4 alternate}
.page-games[data-play-theme=ocean] .road-sidewalk-friends .road-sidewalk{background-image:repeating-linear-gradient(to bottom,#d3f3eb 0 45px,#8acbc6 46px 48px);box-shadow:inset 0 0 0 2px #7cece6}
.page-games[data-play-theme=space] .road-sidewalk-friends .road-sidewalk{background-image:repeating-linear-gradient(to bottom,#3b4665 0 45px,#7183a3 46px 48px);box-shadow:inset 0 0 0 2px #a6daf1}
.games-contrast .road-sidewalk-friends .road-sidewalk{background-image:repeating-linear-gradient(to bottom,#fff 0 45px,#555 46px 48px)}
.games-contrast .road-course-trip .road-friend-bubble{background:#fff!important;color:#111!important}
@media(max-width:600px){.road-course-trip{--road-shoulder:22%}.page-games .road-course-trip.road-trip .road-highway{inset:0 var(--road-shoulder);margin:0}.road-sidewalk-friends .road-friend-picture{width:65px}.road-course-trip .road-signs{left:2px;right:2px;gap:3px}.page-games .road-course-trip .road-answer{padding:6px 1px;font-size:1rem}.road-course-trip .road-lane-label{font-size:.75rem}.road-course-trip .road-answer.selected::after{font-size:.7rem}.road-course-trip .road-car{max-width:25%}}
@media(prefers-reduced-motion:reduce){.road-sidewalk-friends *{animation:none!important;transition:none!important}.road-sidewalk-friends .road-sidewalk{background-position-y:0}}