/* Screen contract: the embedded canvas owns the layout and its overflow. */
html,body{height:100%;width:100%;margin:0;overflow:hidden;background:#a8d8cd}
#app{width:100%;height:100%;min-width:0;min-height:0;container: cargo / size;--abz-game-type-display:64px;--abz-game-type-screen-title:38px;--abz-game-type-card-title:23px;--abz-game-type-body:16px;--abz-game-type-control:16px;--abz-game-type-caption:12px}
#ui,#modal-root{position:absolute;inset:0;pointer-events:none}
#ui>* ,#modal-root>*{pointer-events:auto}
[data-game-screen]{min-width:0;min-height:0}
.screen,.drive-ui{position:absolute;inset:0;width:100%;height:100%;margin:0}
[data-abz-type="display"]{font-size:var(--abz-game-type-display)!important;line-height:.9}
[data-abz-type="screen-title"]{font-size:var(--abz-game-type-screen-title)!important;line-height:1.05;letter-spacing:-.8px}
[data-abz-type="card-title"]{font-size:var(--abz-game-type-card-title)!important;line-height:1.15}
[data-abz-type="body"]{font-size:var(--abz-game-type-body)!important;line-height:1.4}
[data-abz-type="control"]{font-size:var(--abz-game-type-control)!important;line-height:1.2}
[data-abz-type="caption"]{font-size:var(--abz-game-type-caption)!important;line-height:1.3}
button{min-width:44px;min-height:44px}
.primary{min-height:48px;padding:12px 20px}
.text-button{min-height:44px}
.game-start{padding:24px 5%;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.game-start .home-copy{max-width:none;text-align:center;padding:0}
.game-start h1{margin:20px 0}.game-start .intro{margin:0 0 22px;max-width:none}
.start-route-badge{font-size:12px}.start-adventure{justify-content:center;flex-wrap:wrap}
.level-screen{padding:22px 5%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;overflow:hidden}
.level-screen h2{margin:0}.level-screen>.text-button{justify-self:start}
.level-grid{width:100%;max-width:1100px;height:100%;align-items:center;margin:auto;padding:8px}
.level-card{min-height:0;height:min(320px,100%);justify-content:center;padding:22px;gap:16px}
.level-card strong{grid-column:1}.level-card .level-check{display:block;margin:0}
.level-card>span:not(.level-stars){font-size:16px;line-height:1.35}
.setup-note{margin:0;font-size:16px}
.custom-screen{padding:18px 4%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;overflow:hidden}
.custom-heading{width:100%;max-width:none;gap:16px}.custom-heading h2{margin:0}
.custom-layout{width:100%;height:100%;margin:0;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px;padding:4px}
.custom-preview-panel{position:sticky;top:0;align-self:start;min-width:0}
.custom-preview{height:min(380px,45cqh);margin:0}
.custom-options .swatches{grid-template-columns:repeat(6,minmax(44px,1fr));max-width:390px;gap:8px}
.custom-options .swatch{min-width:44px;min-height:44px;width:44px;height:44px;max-width:none}
.custom-options .segmented button{min-height:44px;font-size:16px;padding:9px}
.custom-options fieldset{margin-bottom:18px}.custom-options legend small{font-size:14px}
.screen-actions{padding:0 5px 5px;display:flex;justify-content:center}.screen-actions>.primary{width:min(500px,100%)}
.scroll-host{position:relative;min-width:0;min-height:0;height:100%;overflow:hidden}
[data-scroll-region]{min-width:0;min-height:0;max-height:100%;height:100%;overflow:hidden}
[data-scroll-region][data-scroll-enabled="true"]{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding-right:62px!important}
.scroll-cues{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.scroll-cues button{width:48px;height:48px;border:2px solid #173c32;border-radius:50%;background:#ffd042;color:#173c32;box-shadow:0 3px 0 #173c32;font-size:25px;pointer-events:auto}
.scroll-host[data-overflow="false"]>.scroll-cues{display:none}
.modal-shade,.modal-shade:has(.tutorial-modal){position:absolute;inset:0;width:100%;height:100%;padding:18px;overflow:hidden}
.modal,.modal.tutorial-modal,.modal:has(.celebration-media),.modal:has(.picture-equation){width:min(100%,900px);height:100%;max-height:100%;margin:0;padding:22px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;overflow:hidden}
.panel-header{min-width:0}.panel-header h2{margin:0!important;text-align:center}
.panel-content{min-height:0}
.panel-content>p{font-size:var(--abz-game-type-body)!important;line-height:1.4}
.panel-actions{display:flex;flex-direction:column;gap:8px;padding:0 4px 5px}
.panel-actions>.primary{margin:0;width:100%}.panel-actions>.text-button{text-align:center;padding:4px}
.modal[data-content-density="short"]{max-width:850px}
.tutorial-body{display:grid;grid-template-rows:minmax(130px,1fr) auto;gap:14px}
.tutorial-body .driving-demo{min-height:0;height:100%;margin:0}
.tutorial-tips{gap:6px 12px}.tutorial-tips strong{font-size:16px!important}
.tutorial-modal .demo-instruction{font-size:var(--abz-game-type-body)!important;padding:10px;line-height:1.25;right:70px}
.demo-controls>span{font-size:14px;padding:8px;min-width:40px}.demo-replay{top:10px;right:10px;width:44px;height:44px;font-size:20px!important}
.success-body{display:grid;grid-template-rows:auto auto minmax(80px,1fr) auto;gap:12px;align-items:center}
.success-body>p{margin:0!important;text-align:center;font-size:var(--abz-game-type-body)!important}
.success-body .success-equation{font-size:var(--abz-game-type-card-title)!important}
.success-body .celebration-media{height:100%;min-height:0;max-height:none;width:100%;margin:0;align-self:stretch}
.success-body .celebration-media img{object-fit:contain}
.success-body .delivery-count{font-size:var(--abz-game-type-caption)!important}
.modal:has(.picture-equation){width:min(100%,960px)}
.order-header{text-align:center;justify-content:center}.quiz-progress{margin:10px 0}
.picture-instructions{margin:12px 0}.picture-equation{max-width:620px;margin:0 auto}
.word-picture{width:min(140px,18cqh);height:min(140px,18cqh)}
.picture-card{gap:8px;padding:10px}.picture-card .word-slot{font-size:16px;min-height:44px}
.picture-result{min-height:0;margin:8px 0;font-size:16px}
.picture-word-tray{grid-template-columns:repeat(4,minmax(0,1fr));margin:10px 0;gap:10px}
.picture-word-tray .word-crate{min-height:48px;font-size:var(--abz-game-type-control);padding:10px 4px}
.feedback{font-size:16px!important;line-height:1.35!important;min-height:0;margin:10px 0!important}
.quiz-footer{font-size:12px;margin-top:10px}.meaning-choices{gap:12px}
.meaning-choices button{font-size:var(--abz-game-type-body)!important;padding:16px;min-height:52px}
.order-clue{margin:12px 0}.quiz-instruction{font-size:var(--abz-game-type-body)!important}
.ending-symbol{font-size:56px;margin:8px 0}.ending-stats{margin:16px 0}.collected-words{max-height:none;overflow:visible}
.modal[data-game-screen="results"] .panel-content>p{text-align:center}
.hud-top{top:14px;left:2%;right:2%}.hud-bottom{left:2%;right:2%;bottom:22px}
.hud-lives #drive-help,.hud-lives .pause-button{width:44px;height:44px;right:8px}
.hud-top--simple .hud-lives{padding-right:62px}.hud-top--simple .hud-lives #drive-help{width:44px;height:44px;right:8px;bottom:5px}
.hud-top--simple .pause-button{width:44px;height:44px;right:8px;top:5px}
.cargo-slots{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px}.cargo-slot{flex:0 0 56px}
.cargo-ledger{max-width:min(46%,430px)}.cargo-slot small{font-size:12px}
.drive-keys{font-size:12px}.touch-controls{bottom:14px}
.drive-ui:has(.touch-controls) .hud-bottom{bottom:88px}
.delivery-scene{width:100%;height:100%;max-width:none;inset:0;transform:none;background:none;border:0;box-shadow:none;padding:20px}
.delivery-scene h2,.delivery-scene p{width:max-content;max-width:100%;margin:0 auto;padding:8px 16px;background:#fffdf2ef;border-radius:12px}
.game-utilities{bottom:12px;right:12px}
@container cargo (max-width:600px){
 .game-start{grid-template-columns:1fr;padding:24px}.game-start .home-copy{align-self:center;background:#f2f8e7bd;border-radius:24px;padding:20px 10px}
 .start-route-badge{font-size:12px;letter-spacing:0}.start-adventure{max-width:none;margin-top:14px}
 .level-screen{padding:14px;gap:8px}.level-grid{grid-template-columns:1fr;gap:12px;padding:5px}.level-card{height:auto;display:grid;grid-template-columns:1fr auto;gap:6px;padding:16px;align-items:center}
 .level-card .level-stars{font-size:20px;grid-column:2;grid-row:1}.level-card .level-check{font-size:12px}
 .custom-screen{padding:12px;gap:10px}.custom-heading{gap:8px;flex-wrap:wrap}.custom-heading h2{font-size:32px!important}.difficulty-tag{margin-left:0}
 .custom-layout{grid-template-columns:1fr;gap:14px;height:auto;min-height:100%}.custom-preview-panel{position:static;grid-row:1}.custom-preview{height:150px}
 .custom-options .swatches{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:7px}
 .modal-shade,.modal-shade:has(.tutorial-modal){padding:10px}
 .modal,.modal.tutorial-modal,.modal:has(.celebration-media),.modal:has(.picture-equation){padding:16px;gap:12px;border-radius:20px}
 .tutorial-tips{display:grid;padding:10px;gap:4px}
 .demo-controls{flex-wrap:wrap}.demo-controls>span{font-size:12px;padding:6px}
 .picture-equation{gap:6px;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}
 .picture-word-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
 .picture-instructions p{font-size:16px!important}
 .hud-top--simple{grid-template-columns:minmax(70px,1fr) minmax(220px,2fr)}
 .hud-top--simple .hud-lives{padding:10px 53px 10px 8px}
 .hud-top--simple .heart{width:27px;font-size:32px}.hud-top--simple #hearts{gap:1px}
 .cargo-ledger{max-width:66%}.cargo-slot{flex-basis:52px}
}
@container cargo (max-height:570px){
 .modal-shade,.modal-shade:has(.tutorial-modal){padding:10px}
 .modal,.modal.tutorial-modal,.modal:has(.celebration-media),.modal:has(.picture-equation){padding:14px;gap:10px}
 .panel-header h2{font-size:32px!important}
 .game-start h1{margin:10px 0}.start-adventure,.start-route-badge{display:none}
 .game-start .intro{margin-bottom:14px}
 .level-screen{padding:12px;gap:6px}.level-card{padding:12px;gap:8px}.level-grid{gap:12px}
 .custom-heading h2{font-size:32px!important}.custom-preview{height:180px}
 .word-picture{width:68px;height:68px}.picture-instructions{margin:6px 0}
 .quiz-progress{margin:6px 0}.picture-card{padding:6px}.order-stamp{padding:4px}
 .tutorial-body{gap:8px}.tutorial-tips{padding:6px 8px}
 .hud-top--simple .heart{font-size:30px;width:28px}.hud-top--simple .hud-lives{padding-top:8px;padding-bottom:8px;min-width:240px}
 .hud-top--simple .hud-trip{padding:8px 12px}.round-dots{display:none}
 .drive-keys{display:none}.cargo-ledger{padding:8px}.cargo-ledger .eyebrow{margin-bottom:4px}
 .hud-bottom{bottom:12px}.speed-display strong{font-size:42px}
}
@container cargo (min-width:650px) and (max-height:500px){
 .success-body{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:1fr auto 1fr;gap:8px 20px}
 .success-body .celebration-media{grid-column:2;grid-row:1/4}
 .success-body .success-equation{align-self:end}.success-body .delivery-count{align-self:start}
 .tutorial-body{grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:1fr;gap:12px}
 .tutorial-tips{display:flex;flex-direction:column;justify-content:center;gap:16px;align-self:stretch}
 .modal[data-game-screen="question"] .panel-content:has(.picture-equation){display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;align-content:start}
 .modal[data-game-screen="question"] .order-header,.modal[data-game-screen="question"] .quiz-progress{display:none}
 .panel-content:has(.picture-equation) .picture-equation{grid-column:1;grid-row:1/4;width:100%}
 .panel-content:has(.picture-equation) .picture-instructions,.panel-content:has(.picture-equation) .picture-result,.panel-content:has(.picture-equation) .picture-word-tray{grid-column:2;margin:0}
 .panel-content:has(.picture-equation) .feedback,.panel-content:has(.picture-equation) .quiz-footer{grid-column:1/-1;margin:0!important}
 .panel-content:has(.picture-equation) .picture-word-tray{grid-template-columns:repeat(2,1fr)}
 .ending-symbol{display:none}.ending-stats{margin:10px 0}
}
@media(prefers-reduced-motion:reduce){.start-pulse,.impact-caption,#app::after,.siren-lamps i{animation:none!important}}

.panel-actions:has(#tutorial-back){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
@container cargo (min-width:520px) and (max-height:330px){
 .modal[data-game-screen="correct"]{padding:10px;gap:6px}
 .success-body{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:1fr auto;gap:6px 16px}
 .success-body .cargo-confirm{display:none}
 .success-body .celebration-media{grid-row:1/3}
 .success-body .success-equation{grid-row:1;align-self:center;font-size:16px!important;line-height:1.25}
 .success-body .delivery-count{grid-row:2;align-self:start;line-height:1.2}
}
/* Remove repeated hints before spending screen space on a scrollbar. */
.modal[data-game-screen="question"] .quiz-progress,
.modal[data-game-screen="question"] .picture-result:not(:has(strong)),
.modal[data-game-screen="question"] .feedback:not(.try-again){display:none}
.modal[data-game-screen="question"] .quiz-instruction{margin:12px 0!important}
.modal[data-game-screen="question"] .panel-actions:empty{display:none}
.modal[data-game-screen="question"]:not(:has(.panel-actions button)){grid-template-rows:auto minmax(0,1fr)}
@container cargo (max-width:600px){.word-picture{width:82px;height:82px}.picture-card .word-slot{font-size:16px!important}}
@container cargo (min-width:650px) and (max-height:330px){
 .modal.tutorial-modal{grid-template-columns:185px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:10px;gap:8px}
 .tutorial-modal .panel-header{grid-column:1;grid-row:1}
 .tutorial-modal>.scroll-host{grid-column:2;grid-row:1/4}
 .tutorial-modal .panel-actions{grid-column:1;grid-row:3;display:flex;flex-direction:column-reverse;gap:4px}
 .tutorial-body{display:block}.tutorial-tips{display:none}
 .demo-controls>span:not(.active){display:none}
 .tutorial-modal .demo-instruction{padding:6px;font-size:16px!important;left:6px;top:6px;right:58px}
 .demo-replay{right:6px;top:6px}.demo-controls{bottom:6px}
}
.ending-stats span{font-size:12px}.collected-words span{font-size:16px;line-height:1.35}
.pause-inline{max-height:100%;overflow:auto}.police-status span{font-size:16px}
@container cargo (max-height:330px){
 .game-start{padding:10px 4%;align-items:center}.game-start .home-copy{padding:0}
 .game-start h1{margin:5px 0}.game-start .intro{margin-bottom:8px}
}
.custom-options fieldset{min-width:0;width:100%}
.custom-options legend{max-width:100%;overflow-wrap:anywhere}
.custom-layout{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
@container cargo (max-width:600px){.custom-layout{grid-template-columns:minmax(0,1fr)}}
.demo-controls>span{font-size:16px}

/* Short questions hug their content; only genuinely long feedback scrolls. */
.modal[data-game-screen="question"]{display:flex;flex-direction:column;width:min(100%,820px);height:auto;max-height:100%;padding:24px;gap:16px}
.modal[data-game-screen="question"]>.panel-header,.modal[data-game-screen="question"]>.panel-actions{flex-shrink:0}
.modal[data-game-screen="question"]>.scroll-host{height:auto;flex:0 1 auto;display:flex;flex-direction:column}
.modal[data-game-screen="question"] .panel-content{height:auto;max-height:100%;flex:0 1 auto}
.modal[data-game-screen="question"] .panel-header h2{font-size:clamp(28px,4cqw,40px)!important;line-height:1.12;outline:none}
.modal[data-game-screen="question"] .order-stamp{border:0;border-radius:20px;background:#e9efdf;padding:5px 12px;letter-spacing:1px}
.modal[data-game-screen="question"] .picture-instructions{justify-content:center;text-align:center;margin:12px 0 16px}
.modal[data-game-screen="question"] .picture-equation{max-width:580px}
.modal[data-game-screen="question"] .picture-card{padding:12px;gap:10px;border-radius:20px}
.modal[data-game-screen="question"] .word-picture{width:clamp(68px,16cqh,120px);height:clamp(68px,16cqh,120px)}
.modal[data-game-screen="question"] .word-slot{border:1px solid #c6d7d8;background:#ffffffc9;border-radius:10px;min-height:44px}
.modal[data-game-screen="question"] .word-slot.occupied{background:#e4f1d9;border-color:#63946a;color:#173c32}
.modal[data-game-screen="question"] .picture-word-tray{margin:16px 0 10px;gap:12px}
.modal[data-game-screen="question"] .picture-word-tray .word-crate{min-height:48px;border-radius:12px}
.modal[data-game-screen="question"] .panel-actions{padding:0 0 5px}
.modal[data-game-screen="question"] .quiz-footer{margin-top:12px;line-height:1.4}
@container cargo (max-width:600px){
 .modal[data-game-screen="question"]{padding:16px;gap:12px}
 .modal[data-game-screen="question"] .picture-card{padding:8px;gap:8px}
 .modal[data-game-screen="question"] .word-picture{width:82px;height:82px}
 .modal[data-game-screen="question"] .picture-instructions{margin:10px 0 12px}
}
@container cargo (max-height:570px){
 .modal[data-game-screen="question"]{padding:14px;gap:10px}
 .modal[data-game-screen="question"] .word-picture{width:68px;height:68px}
 .modal[data-game-screen="question"] .picture-card{padding:8px;gap:6px}
 .modal[data-game-screen="question"] .picture-word-tray{margin:10px 0 6px}
 .modal[data-game-screen="question"] .picture-instructions{margin:6px 0 10px}
}
@container cargo (min-width:650px) and (max-height:500px){
 .modal[data-game-screen="question"] .picture-instructions{margin:0;text-align:left;justify-content:start}
 .modal[data-game-screen="question"] .picture-word-tray{margin:0}
}
@container cargo (min-width:650px) and (max-height:500px){
 .modal[data-game-screen="question"]:has(.meaning-choices){padding:10px;gap:6px}
 .modal[data-game-screen="question"]:has(.meaning-choices) .panel-header h2{font-size:28px!important}
 .modal[data-game-screen="question"] .panel-content:has(.meaning-choices){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:6px 16px;align-content:start}
 .panel-content:has(.meaning-choices) .order-clue{grid-column:1;grid-row:1;margin:0;padding:8px}
 .panel-content:has(.meaning-choices) .quiz-instruction{grid-column:1;grid-row:2;margin:0!important}
 .panel-content:has(.meaning-choices) .meaning-choices{grid-column:2;grid-row:1/5;gap:8px}
 .panel-content:has(.meaning-choices) .meaning-choices button{min-height:44px;padding:6px 10px;gap:10px}
 .panel-content:has(.meaning-choices) .meaning-choices button>span{padding:4px 6px}
 .panel-content:has(.meaning-choices) .feedback{grid-column:1;grid-row:3;margin:0!important}
 .panel-content:has(.meaning-choices) .quiz-footer{grid-column:1;grid-row:4;margin:0}
}
@container cargo (min-width:650px) and (max-height:330px){
 .modal[data-game-screen="question"]:has(.picture-equation){display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:10px;gap:8px}
 .modal[data-game-screen="question"]:has(.picture-equation)>.panel-header{grid-column:1;grid-row:1}
 .modal[data-game-screen="question"]:has(.picture-equation)>.scroll-host{grid-column:2;grid-row:1/4;height:100%}
 .modal[data-game-screen="question"]:has(.picture-equation)>.panel-actions{grid-column:1;grid-row:3}
 .modal[data-game-screen="question"]:has(.picture-equation) .panel-header h2{font-size:28px!important}
 .modal[data-game-screen="question"] .word-picture{width:52px;height:52px}
 .modal[data-game-screen="question"] .picture-card{padding:5px;gap:4px}
}