@font-face{font-family:Chewy;src:url('../assets/fonts/chewy.ttf')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#173d38;color:#fff9e8;font-family:'Trebuchet MS',system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible{outline:3px solid #ffcf69;outline-offset:5px}button:active{transform:translateY(2px)}[hidden]{display:none!important}#game{position:relative;width:100%;height:100%;min-height:360px;isolation:isolate;touch-action:none;user-select:none}#scene,.vignette{position:absolute;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(180deg,#082b3629,transparent 40%,#082b3640)}header{position:absolute;z-index:5;top:0;left:0;width:100%;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:10px}.home{color:inherit;text-decoration:none;font-size:13px;font-weight:bold;min-width:120px}.brand{font-size:15px;font-weight:900;letter-spacing:3px}.brand i{font-family:Georgia,serif;font-weight:normal;color:#f2c969}.tools{display:flex;gap:8px;min-width:120px;justify-content:flex-end}.tools button{background:#123e3966;border:1px solid #ffffff30;border-radius:30px;padding:9px 14px;font-size:12px}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:75px 20px 50px}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:900;color:#ffd981;margin:0 0 12px}h1,h2{font-family:Chewy,'Trebuchet MS',sans-serif;font-weight:400;margin:0;text-align:center;text-shadow:0 4px 0 #133c3930}h1{font-size:clamp(40px,6.3vh,70px);line-height:.98;margin-bottom:24px}h1 br{display:none}.riders{display:flex;gap:22px}.rider{position:relative;width:240px;border-radius:28px;text-align:left;padding:0 23px 24px;overflow:hidden;border:1px solid #fff6;box-shadow:0 14px 40px #0a282440,inset 0 1px 0 #fff8;transition:translate .18s,box-shadow .18s}.rider:hover{translate:0 -7px;box-shadow:0 20px 50px #0a282470}.staf{background:linear-gradient(150deg,#eff6c4,#c1de9e);color:#234d39}.madou{background:linear-gradient(150deg,#ffe6e8,#e3c7ec);color:#714973}.portrait{height:175px;display:block;margin:0 -23px 8px;background:radial-gradient(ellipse at 50% 70%,#fff9,transparent 65%)}.portrait img{display:block;width:100%;height:100%;object-fit:contain}.rider-name{font-family:Chewy,sans-serif;font-size:36px;display:flex;justify-content:space-between;align-items:center}.rider-name>span{border:1px solid #234d3926;border-radius:50%;font:22px system-ui;width:34px;height:34px;text-align:center}.rider-detail{display:block;font-size:12px;margin:3px 0 18px}.world-label{font-size:9px;letter-spacing:2px;font-weight:bold;border-top:1px solid #234d3926;display:block;padding-top:12px}.choose-note{font-size:13px;margin:20px 0 15px;color:#edf5de}.keyboard-hint{display:flex;gap:22px;font-size:11px;color:#d5e5d5;align-items:center}kbd{display:inline-block;border:1px solid #fff4;border-radius:5px;padding:4px 7px;margin-right:4px;font:10px inherit;background:#123e3955}footer{position:absolute;bottom:20px;left:32px;right:32px;display:flex;justify-content:space-between;font-size:10px;color:#d2e0d5a6;letter-spacing:.6px}#install{background:none;color:#ffe1a2}#hud{position:absolute;top:88px;left:32px;right:32px;display:flex;justify-content:space-between;gap:30px}.stats{display:flex;gap:24px;align-items:center;background:#133c3977;padding:12px 18px;border-radius:18px}#hearts{color:#ffa6a1;letter-spacing:4px;font-size:23px}.star-count{color:#ffe39c;font-size:22px}.star-count b{color:#fff9e8;font-size:18px}.journey{width:240px;padding-top:6px}.journey>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-bottom:10px}.track{background:#163c3b66;height:7px;border-radius:20px;overflow:hidden}.track i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;background:#ffda80;border-radius:20px}#message{position:absolute;top:29%;left:12%;right:12%;text-align:center;font-family:Chewy,sans-serif;font-size:clamp(22px,4vw,36px);text-shadow:0 3px 10px #123e39;pointer-events:none}#controls{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:32px;right:32px;display:flex;justify-content:space-between}#controls>div{display:flex;gap:15px}#controls button{width:74px;height:74px;border-radius:24px;background:#fff9e8dc;color:#264d40;font-size:30px;box-shadow:0 6px 0 #143e3955;border:1px solid #fff9;touch-action:none}#controls small{display:block;font-size:9px;letter-spacing:1px;font-weight:900}#controls #jump{background:#ffdc87}.modal{z-index:10;background:#092d3766;backdrop-filter:blur(8px)}.modal-card{width:min(400px,100%);background:#fbf4df;color:#284d41;padding:35px;border-radius:32px;box-shadow:0 20px 80px #002d3940;text-align:center}.modal .eyebrow{color:#839351}.modal h2{font-size:40px;line-height:1.1}.modal p:not(.eyebrow){font-size:14px;line-height:1.7}.primary,.secondary{display:block;width:100%;padding:15px;border-radius:14px;margin-top:12px;font-weight:bold}.primary{background:#285946;color:#fff7df}.secondary{background:transparent;color:#647364}body.playing .brand{opacity:.65}@media(max-width:600px){header{padding:18px}.home{min-width:50px}.home span{display:none}.tools{min-width:50px}.brand{font-size:11px;letter-spacing:2px}.riders{gap:12px;width:100%;max-width:420px}.rider{width:50%;padding:0 15px 18px;border-radius:22px}.portrait{margin:0 -15px;height:140px}.rider-name{font-size:32px}.rider-detail{font-size:10px}.world-label{font-size:8px;letter-spacing:1px}h1{font-size:48px;line-height:1;margin-bottom:20px}h1 br{display:block}.keyboard-hint{display:none}footer{left:18px;right:18px;font-size:8px}#hud{left:18px;right:18px;top:72px;gap:12px}.stats{padding:9px 12px;gap:12px}#hearts{font-size:18px;letter-spacing:1px}.journey{width:160px}#controls{left:18px;right:18px}#controls button{width:65px;height:65px;border-radius:21px}}@media(max-height:580px) and (min-width:601px){.screen{padding:60px 20px 20px}h1{font-size:32px;margin-bottom:10px}.eyebrow{margin-bottom:6px}.portrait{height:105px}.rider{width:200px;padding-bottom:14px}.rider-name{font-size:28px}.rider-detail{margin-bottom:10px}.world-label{padding-top:8px}.choose-note{margin:10px 0}.keyboard-hint,footer{display:none}header{padding:12px 24px}#hud{top:58px}.stats{padding:6px 12px}#controls{bottom:15px}#controls button{width:58px;height:58px;font-size:24px}#message{top:24%}}@media(prefers-reduced-motion:reduce){.rider{transition:none}}


.difficulty{margin:16px 0 14px;display:grid;grid-template-columns:auto auto;gap:7px 12px;align-items:center;text-align:center}.difficulty-label{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#fff0ca}.difficulty button{display:flex;align-items:center;gap:9px;padding:8px 13px;background:#183e3ddd;border:1px solid #ffffff60;border-radius:24px;font-size:13px}.difficulty button b{min-width:20px;color:#ffd08a}.toggle-track{width:31px;height:18px;background:#ce8753;border-radius:20px;padding:3px}.toggle-track i{display:block;width:12px;height:12px;border-radius:50%;background:#fff4d7;transform:translateX(13px);transition:transform .15s}.difficulty button[aria-checked=false] .toggle-track{background:#83ae88}.difficulty button[aria-checked=false] .toggle-track i{transform:translateX(0)}.difficulty button[aria-checked=false] b{color:#bde5b7}.difficulty small{grid-column:1/-1;font-size:11px;color:#fff5df;text-shadow:0 1px 4px #163a38}@media(max-height:650px){.difficulty{margin:9px 0 8px;gap:4px 10px}.difficulty button{padding:6px 12px}.difficulty small{font-size:10px}}@media(prefers-reduced-motion:reduce){.toggle-track i{transition:none}}
.star-count.heart-count{color:#ffc1ed}
.star-count{display:inline-flex;align-items:center;gap:7px}#collectibleIcon{width:31px;height:34px;object-fit:contain;vertical-align:middle}
#familyTreatIcons{display:inline-flex;align-items:center;gap:3px;margin-left:-4px}#familyTreatIcons img{width:24px;height:34px;object-fit:contain}.family-count{white-space:nowrap}.stats{flex-shrink:0}@media(max-width:420px){#hud{flex-wrap:wrap;gap:8px}.journey{flex:1;min-width:120px}.family-count{gap:4px}#familyTreatIcons{gap:1px}#familyTreatIcons img{width:20px}.family-count #collectibleIcon{width:25px}}
.level-options{display:flex;justify-content:center;gap:8px;margin-top:12px}.level-options button{padding:8px 12px;border-radius:20px;background:#163e3acc;border:1px solid #ffffff55;font-size:11px}.level-options button[aria-pressed=true]{background:#ffe2a4;color:#234d39;border-color:#ffeec5}.level-options button:focus-visible{outline-offset:2px}@media(max-height:650px){.level-options{margin-top:7px}.level-options button{padding:5px 10px;font-size:10px}}@media(max-width:600px){.level-options{gap:6px}.level-options button{padding:8px;font-size:10px}.portrait{height:120px}.rider{padding-bottom:12px}.rider-detail{margin-bottom:10px}}
.difficulty{grid-template-columns:1fr 1fr;width:min(460px,100%);gap:7px 16px}.difficulty-label{grid-column:1/-1}.difficulty-option{display:flex;flex-direction:column;align-items:center;gap:6px}.difficulty-option small{line-height:1.3;max-width:210px}@media(max-height:650px){.difficulty{gap:4px 12px}.difficulty-option{gap:4px}}
/* The loading screen is part of the initial HTML, before any game modules run. */
body.loading #game{visibility:hidden;pointer-events:none}
#loading{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 25% 20%,#41695777,transparent 55%),radial-gradient(ellipse at 85% 85%,#86597855,transparent 55%),#173d38;overflow:auto}
.loading-card{width:min(390px,100%);text-align:center;padding:24px 0}
.loading-magic{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:25px;height:76px}
.loading-magic span{display:block;font-size:64px;color:#ffdc87;filter:drop-shadow(0 5px 12px #ffdc8733);animation:loading-float 3s ease-in-out infinite}
.loading-magic span+span{font-size:54px;color:#efb3d8;animation-delay:-1.5s}
#loading h1{font-size:clamp(34px,7vw,48px);line-height:1.08;margin:0 0 20px}#loading h1 br{display:block}
#loadingText{min-height:40px;margin:0 0 18px;color:#d7e5d6;font-size:14px;line-height:1.5}
#loadingProgress{display:block;appearance:none;width:100%;height:10px;border:0;border-radius:20px;overflow:hidden;background:#ffffff20;color:#ffdc87}
#loadingProgress::-webkit-progress-bar{background:#ffffff20;border-radius:20px}#loadingProgress::-webkit-progress-value{background:linear-gradient(90deg,#b7dfac,#ffdc87,#efb3d8);border-radius:20px;transition:width .2s}
#loadingProgress::-moz-progress-bar{background:linear-gradient(90deg,#b7dfac,#ffdc87,#efb3d8);border-radius:20px}
#loadingPercent{display:block;margin-top:12px;font-size:12px;color:#d7e5d6;font-variant-numeric:tabular-nums}
#loadingRetry{background:#ffdc87;color:#234d39;max-width:240px;margin:20px auto 0}
@keyframes loading-float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.loading-magic span{animation:none}#loadingProgress::-webkit-progress-value{transition:none}}

/* Apply directly to native buttons and their labels, including Safari/iOS. */
button,button *{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
/* iOS can start a selection on an ancestor or nested button label. */
#game,#game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#controls button{touch-action:none;-webkit-appearance:none;appearance:none}
#controls button *{pointer-events:none}
#controls button.control-held{transform:translateY(2px)}
#buildVersion{align-self:center;font:10px monospace;opacity:.8;white-space:nowrap;pointer-events:none}
@media(max-width:420px){header .tools{gap:5px}header .tools button{padding:8px 10px}header .brand{font-size:10px;letter-spacing:1px}}
html,body,body *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
/* Announce messages to assistive technology; visible lettering is on canvas. */
#message{position:absolute;top:auto;left:0;right:auto;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Three adventures, with a full-width family card on narrower phones. */
.riders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(790px,100%);gap:18px}
.riders .rider{width:auto;min-width:0}
.rider.family{background:linear-gradient(135deg,#fff0bc,#d2e3aa);color:#355c39}
.rider.family .rider-name{font-size:36px}
.rider.family .rider-detail{font-size:12px}
.rider.family .portrait img{object-fit:contain;padding:5px}
#choose{overflow-y:auto}
@media(max-width:600px){
 .riders{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;gap:10px}
 .riders .family{grid-column:1/-1;display:grid;grid-template-columns:44% 1fr;grid-template-rows:auto auto auto;text-align:left;padding:10px 15px;align-items:center}
 .rider.family .portrait{grid-row:1/4;margin:-5px 5px -5px -12px;height:115px}
 .rider.family .rider-name{font-size:30px;align-self:end}
 .rider.family .rider-detail{font-size:11px;margin:3px 0 7px}
 .rider.family .world-label{padding-top:6px;align-self:start}
 #choose h1{font-size:40px;margin-bottom:14px}
 #choose h1 br{display:none}
 #choose .eyebrow{margin-bottom:7px}
}
@media(max-height:700px) and (max-width:600px){
 #choose{justify-content:flex-start;padding-top:74px;padding-bottom:50px}
 #choose .portrait{height:100px}
 #choose .family .portrait{height:95px}
}
.rider.family .rider-name{font-size:32px;gap:8px}
.rider.bike{background:linear-gradient(145deg,#e3efeb,#a9c9cc);color:#264b51}
body:not(.playing) #game,body:not(.playing) #choose{touch-action:pan-y}
.rider.bike .portrait{overflow:hidden}
.rider.bike .portrait img{object-fit:contain;padding:5px}
.rider.bike .rider-name{font-size:30px;gap:6px}
@media(min-width:901px){.riders{grid-template-columns:repeat(4,minmax(0,1fr));width:min(1060px,100%);gap:16px}.rider{padding-left:18px;padding-right:18px}.portrait{margin-left:-18px;margin-right:-18px}}
@media(max-width:900px){.riders{grid-template-columns:repeat(2,minmax(0,1fr));width:min(540px,100%)}.riders .family{grid-column:auto;display:block;padding:0 15px 14px}.rider.family .portrait{height:125px;margin:0 -15px 8px}.riders .portrait{height:125px}.riders .rider-name{font-size:29px}.riders .rider-detail{margin-bottom:8px}.riders .world-label{font-size:8px;padding-top:6px}.riders .rider{padding-bottom:14px}#choose{justify-content:flex-start;padding-top:74px;padding-bottom:75px}#choose h1{font-size:36px;margin-bottom:14px}}
@media(max-height:650px) and (min-width:901px){.riders .portrait{height:115px}}
@media(max-width:420px){.riders .portrait,.rider.family .portrait{height:100px}.riders .rider-name{font-size:25px}.riders .world-label{letter-spacing:.5px}}

/* The whole illustrated choice returns to the ride menu. */
#change.change-ride{padding:12px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:9px;border:1px solid #29584a26;border-radius:17px;background:#edf0d9}
.ride-miniatures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:100%;pointer-events:none}
.ride-mini{display:block;min-width:0;border-radius:10px;overflow:hidden}
.ride-mini img{display:block;width:100%;height:60px;object-fit:contain;padding:3px;pointer-events:none;-webkit-user-drag:none}
.ride-mini-staf{background:#dceabd}.ride-mini-madou{background:#f0dcea}.ride-mini-family{background:#eee6b6}.ride-mini-bike{background:#ccdfdc}
@media(max-height:600px){#overlay.modal{padding:12px;max-height:100dvh;overflow-y:auto;justify-content:flex-start}.modal-card{margin:auto 0;flex-shrink:0}#change.change-ride{gap:5px}.ride-mini img{height:48px}}

button.home{background:transparent;padding:8px 0;text-align:left;min-height:40px}
/* Keep the title centred, but hide the menu shortcut when already there. */
body:not(.playing) #rideMenu{visibility:hidden;pointer-events:none}
.rider.popcorn{background:linear-gradient(145deg,#fff6e1,#d7dcf4);color:#4d5274}
.rider.popcorn .portrait img{padding:8px}


.ride-miniatures{grid-template-columns:repeat(5,minmax(0,1fr))}
.ride-mini-popcorn{background:#e4e3f2}
.popcorn-playing #hud .stats{display:flex}
.popcorn-playing #hud{justify-content:space-between}
.popcorn-playing #controls{justify-content:flex-end}
.popcorn-playing .vignette{opacity:.25}
#overlay.popcorn-finish{background:none;backdrop-filter:none;justify-content:flex-start;padding-top:65px;pointer-events:none}
#overlay.popcorn-finish .modal-card{pointer-events:auto;width:min(410px,85%);padding:18px 24px;background:#fffae9ed}
#overlay.popcorn-finish h2{font-size:30px}
#overlay.popcorn-finish .modal-card>p:not(.eyebrow){margin:8px 0;line-height:1.4}
#overlay.popcorn-finish #again{padding:10px;margin-top:8px}
#overlay.popcorn-finish #change{padding:5px;gap:3px;margin-top:6px}
#overlay.popcorn-finish .ride-mini img{height:38px}
@media(min-width:901px){.riders{grid-template-columns:repeat(5,minmax(0,1fr));width:min(1220px,100%);gap:12px}.riders .rider{padding-left:14px;padding-right:14px}.riders .rider-name{font-size:28px}.riders .portrait{margin-left:-14px;margin-right:-14px}.riders .world-label{letter-spacing:1px;font-size:8px}}
@media(max-width:900px){.riders .popcorn{grid-column:1/-1;display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto auto auto;padding:8px 16px}.rider.popcorn .portrait{grid-row:1/4;height:104px;margin:-4px 5px -4px -10px}.rider.popcorn .rider-name{align-self:end}.rider.popcorn .world-label{align-self:start}.riders{flex-shrink:0}#choose>*{flex-shrink:0}}
@media(max-height:650px) and (min-width:901px){#choose{justify-content:flex-start;padding-top:65px}}
@media(max-height:650px) and (min-width:601px){#overlay.popcorn-finish{align-items:flex-end;padding:55px 18px 15px}#overlay.popcorn-finish .modal-card{width:310px}#overlay.popcorn-finish h2{font-size:27px}}
@media(orientation:landscape){#overlay.popcorn-finish{align-items:flex-end;padding:65px 24px 15px}#overlay.popcorn-finish .modal-card{width:min(380px,43%)}}
#choose{justify-content:flex-start;padding-top:86px;padding-bottom:70px}
#choose>*{flex-shrink:0}
@media(min-width:901px){.riders .portrait{height:150px}.riders .rider{padding-bottom:18px}.riders .bike .rider-name{font-size:24px;white-space:nowrap}}
@media(max-width:900px){.riders .bike .rider-name{font-size:24px;white-space:nowrap}body:not(.playing) footer{display:none}}
@media(max-width:420px){.riders .bike .rider-name{font-size:22px}.riders .rider-name>span{width:28px;height:28px;font-size:19px}}
@media(min-width:901px){.riders .bike .rider-name{font-size:clamp(18px,2.1vw,24px);gap:3px}.riders .bike .rider-name>span{flex-shrink:0;width:28px;height:28px;font-size:18px}}
.brand{white-space:nowrap}.brand-short{display:none}
#choose>h1{font-size:clamp(34px,5.5vw,68px);text-align:center}
.rider-detail{min-height:2.5em;line-height:1.3}
.journey{min-width:0}.journey>div:first-child{flex-wrap:wrap;gap:3px 12px}
@media(max-width:800px){.brand-full{display:none}.brand-short{display:inline}}
@media(max-width:600px){.keyboard-hint{flex-wrap:wrap;justify-content:center}.journey #worldName{font-size:10px}.journey #distance{font-size:10px}}