/* Responsive work stations, clearer navigation and accessible touch controls. */
body.landing header,body.landing #mission,body.landing #location,body.landing #compass,body.landing footer,body.landing #mapPanel,body.landing #interact,body.landing #touch{visibility:hidden}
body.in-dialog #labels,body.in-dialog #interact,body.in-dialog #touch,body.landing #labels{visibility:hidden}
.dialog-top{position:sticky;top:0;z-index:4;background:var(--paper);padding:4px 0 7px;box-shadow:0 5px 0 var(--paper)}
#compass{width:142px;height:auto;gap:3px;right:24px;text-align:center;background:#f4f7fbe8;padding:12px;border-radius:14px;box-shadow:0 8px 25px #162c440c}
#compass b{display:block;transition:transform .1s;font-size:31px}#compass button{font-size:11px;min-height:34px;padding:5px 10px;width:100%;margin-top:5px}#compass #walkBtn{background:var(--ink);color:var(--accent-soft);border:0}#compass #mapBtn{background:transparent;border:0;min-height:24px;margin:0;padding:2px}
#mapPanel{position:fixed;right:24px;top:300px;background:var(--paper);border-radius:14px;padding:14px;width:248px;box-shadow:0 10px 35px #132a4522}#mapPanel canvas{display:block;width:220px;height:180px;margin:10px 0;border-radius:8px}#mapPanel small{font-size:10px}#mapPanel small span{color:#426d9d}#mapPanel .eyebrow{font-size:8px;letter-spacing:1px}
#modal>section{width:min(860px,100%);scrollbar-gutter:stable}#dialogBody>h3{font-size:17px;line-height:1.4;margin:20px 0 10px}#dialogBody>p{max-width:70ch}#dialogBody .fine{font-size:12px}.duration{display:block;color:#435970;font-size:11px;margin:8px 0 16px}.field-label{display:block;font-size:13px;font-weight:600;margin:15px 0}.field-label input,.field-label textarea{display:block;margin-top:8px}.field-label input[type=time]{width:190px;font-size:26px;font-variant-numeric:tabular-nums}.activity-status{font-size:13px;color:#435970!important;min-height:21px;margin:10px 0!important}.activity-submit{margin-top:20px}
.object-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.object-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px;gap:9px;text-align:center;background:#fff;position:relative;padding:17px 12px;border:2px solid #cbd6e2}.object-card .object-icon{font-size:35px;line-height:50px;color:#435970;background:#eaf0f7;border-radius:14px;width:64px;height:54px}.object-card>span:not(.object-icon){font-size:14px;font-weight:650;line-height:1.3}.object-card small{font-size:10px;color:#435970}.object-card.selected:after{content:'✓';position:absolute;right:8px;top:5px;font-size:18px;color:#426d9d}.selected,button[aria-pressed=true]{background:#eaf0f7!important;border-color:#426d9d!important;box-shadow:inset 0 0 0 1px #426d9d}
.vehicle-workbench{display:grid;grid-template-columns:minmax(200px,.85fr) minmax(230px,1fr);gap:20px;padding:20px;background:#e4edf7;border-radius:16px}.vehicle-art{position:relative;width:100%;max-width:285px;margin:0 auto;align-self:start}.vehicle-photo{width:100%;height:auto;display:block;border-radius:12px}.inspection-point{position:absolute;transform:translate(-50%,-50%);width:37px;height:37px;min-height:37px;padding:0;border:2px solid #fff;background:var(--ink);color:var(--accent-soft);font-size:15px;font-weight:800;border-radius:50%;box-shadow:0 3px 12px #0003}.inspection-point:active{transform:translate(-50%,-50%)}.inspection-point:hover{background:#435970}.vehicle-readings{min-width:0}.inspection-log h3{margin:8px 0;font-size:18px}.inspection-log p,.vehicle-readings p{font-size:13px!important}.inspection-log .eyebrow{font-size:8px;letter-spacing:1px}.lamp{font-size:55px;line-height:80px;text-align:center;background:#cbd6e2;border-radius:12px;color:#435970;max-width:160px}.lamp.lit{background:#fff4c5;color:#c69b32;box-shadow:0 0 25px #f5d67b44}.reading-choice{font-size:12px;padding:9px 12px;min-height:44px;margin:4px 5px 4px 0}.reading-table{background:#f4f7fb;border-radius:10px;padding:10px 13px;margin:14px 0}.reading-table p{margin:5px 0!important;font-size:12px!important}.gauge-box .gauge{font-size:42px;font-weight:750;letter-spacing:-1px;color:var(--ink);background:#fff;border:5px solid #a8bfd7;border-radius:16px;padding:14px;text-align:center;margin:10px 0;box-shadow:inset 0 2px 5px #0001;font-variant-numeric:tabular-nums}.material-slip{background:#fff;border:1px dashed #7798bb;border-left:5px solid #7798bb;padding:18px;border-radius:8px;font-size:14px;font-weight:600}
.part-package{display:flex;flex-direction:column;gap:8px;align-items:center;min-height:230px;background:linear-gradient(#eaf0f7 0 27%,#e4edf7 27% 73%,#f4f7fb 73%);border:1px solid #a8bfd7;padding:20px 12px;box-shadow:0 5px 0 #cbd6e2}.part-package .eyebrow{font-size:8px;letter-spacing:1px}.package-photo{width:100%;max-width:180px;height:auto;display:block;border-radius:8px}.part-package .part-code{font-size:26px;letter-spacing:1px}.part-package small{font-size:11px;color:#435970}.part-package:hover{outline:2px solid #426d9d}
.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.evidence-card{min-height:120px;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#fff}.evidence-card strong{font-size:15px}.evidence-card .eyebrow{font-size:9px;letter-spacing:1px}.sorting-cards{display:grid;gap:10px}.sorting-row{background:#fff;border:1px solid #cbd6e2;padding:13px 17px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.sorting-row p{margin:0!important;font-size:14px;flex:1}.sorting-row .actions{margin:0;flex-wrap:nowrap;gap:4px}.ordered-steps{background:#e4edf7;padding:15px 20px 15px 40px;border-radius:10px;font-size:14px}.ordered-steps:empty{display:none}.ordered-steps li{padding:5px}.result-item summary{cursor:pointer;font-size:15px;font-weight:650;padding:2px;list-style-position:outside;margin-left:15px}.result-item[open]{background:#eaf0f7}.result-item p{padding-left:17px}.chapter-option .primary{margin-bottom:8px;margin-right:8px}
.hazard-scene{position:relative;border-radius:14px;overflow:hidden;background:#e4edf7;margin:18px 0}.hazard-scene svg{width:100%;display:block}.hazard-point{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;min-height:42px;border-radius:50%;background:#eac371;border:2px solid #fff;color:#334a43;padding:0;font-weight:800}.hazard-point:active{transform:translate(-50%,-50%)}
#bagCount{display:inline-grid;place-items:center;border-radius:50%;min-width:19px;height:19px;background:#e4edf7;font-size:10px;margin-left:3px}#joystick:focus-visible{outline:3px solid #2863ae}#touch{display:none!important}body.touch-mode #touch{display:block!important}body.touch-mode footer>span{display:none}body.touch-mode #interact{bottom:70px}body.touch-mode #location{bottom:24px}body.touch-mode footer{bottom:23px}body.touch-mode #touch{bottom:74px}body.touch-mode #touchAction:disabled{opacity:.35}.header-right button{white-space:nowrap}
@media(max-width:900px){.header-right button{font-size:12px;padding:10px 12px}#mission{width:255px;padding:18px}#compass{right:20px;width:125px}.object-card{min-height:145px}.vehicle-workbench{gap:15px;padding:15px}#mapPanel{right:20px}}
@media(max-width:700px){#compass{width:110px;right:15px;padding:10px;gap:1px}#compass button{font-size:10px;padding:6px;min-height:32px}#mapPanel{width:218px;right:15px;top:273px;padding:10px}#mapPanel canvas{width:198px;height:162px}#mission{width:min(56vw,235px);padding:14px}#mission .eyebrow{font-size:8px;letter-spacing:1px}#mission h2{font-size:16px}.object-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.object-card{min-height:135px;font-size:12px;padding:12px 8px}.vehicle-workbench{grid-template-columns:minmax(140px,.8fr) minmax(140px,1fr);gap:10px;padding:12px}.vehicle-readings p{font-size:11px!important}.reading-choice{padding:8px;font-size:11px}.inspection-point{width:34px;height:34px;min-height:34px}.gauge-box .gauge{font-size:30px;padding:10px}.evidence-grid{grid-template-columns:1fr}.evidence-card{min-height:65px;flex-direction:row;padding:10px}.sorting-row{display:block;padding:12px}.sorting-row .actions{margin-top:8px}.part-package{min-height:190px;padding:12px 8px}.part-package .part-code{font-size:23px}.header-right{gap:5px}.header-right button{min-width:37px;padding:8px}.header-right button span{display:none}#bagCount{display:none}#modal>section{padding:20px;max-height:94dvh}#dialogTitle{font-size:24px}.inspection-log .lamp{font-size:40px;line-height:60px}.hazard-point{width:36px;height:36px;min-height:36px}#touchAction{width:62px;height:62px}.intro{padding-right:5px}}
@media(max-width:430px){.vehicle-workbench{grid-template-columns:1fr}.vehicle-art{max-width:190px}.vehicle-readings{width:100%}.vehicle-readings .reading-table{margin-top:10px}.object-grid{grid-template-columns:1fr 1fr}.part-package .eyebrow{font-size:7px}.brand{font-size:10px;letter-spacing:.6px}.brand small{font-size:6px}.brand-icon{width:28px;height:28px}.header-right #clock{margin:0;padding:9px 7px}.header-right button{padding:8px;min-width:32px}.header-right{gap:3px}#mission{width:57vw}.intro-actions{flex-wrap:wrap}}
@media(max-height:600px){#mission{top:80px}#compass{top:80px}#mapPanel{top:250px;max-height:calc(100dvh - 270px);overflow:auto}.world-label:not(.target){display:none}body.touch-mode #touch{bottom:36px}body.touch-mode #interact{bottom:37px}body.touch-mode #location{bottom:10px}#modal>section{max-height:94dvh}.vehicle-art{max-width:210px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
.camera-buttons{display:flex;gap:5px;margin-left:auto}.camera-buttons button{margin:0;font-size:17px;min-width:34px;min-height:34px;padding:3px 8px}footer>#helpBtn{margin-left:5px}body.touch-mode .camera-buttons{display:flex;position:fixed;right:27px;bottom:166px;flex-direction:column}.touch-mode .camera-buttons button{min-width:42px;min-height:42px;background:#f4f7fbe6}@media(max-width:700px){footer{gap:8px}.camera-buttons button{min-width:30px;font-size:14px;padding:3px 6px}body.touch-mode .camera-buttons{right:34px;bottom:151px}}@media(max-height:600px){body.touch-mode .camera-buttons{bottom:119px}}
@media(max-width:700px){body.near-person #mission{width:min(42vw,190px)}body.near-person #mission h2{font-size:15px}body.near-person #mission p{font-size:11px}}

/* Active career decisions: drag/drop and the same controls by tap or keyboard. */
.application-board{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card-bank,.drop-slots{display:grid;gap:9px;align-content:start}.drag-card,.placed-card,.drop-zone,.outfit-card,.interview-answer{text-align:left;width:100%;line-height:1.45}.drag-card{background:#fff;border-left:4px solid #7798bb;touch-action:pan-y;cursor:grab;font-size:14px;position:relative}.drag-card:active{cursor:grabbing}.drag-card.selected,.outfit-card.selected{background:#e4edf7;border-color:#426d9d;box-shadow:inset 0 0 0 1px #426d9d}.drop-zone{border:2px dashed #a8bfd7;background:#eaf0f7;min-height:70px;font-size:13px}.drop-zone:hover{background:#e4edf7}.drop-row{padding:8px;border:1px solid #cbd6e2;border-radius:12px}.small-button{font-size:11px;padding:4px 8px;min-height:30px;margin-top:5px}.application-preview{background:#f4f7fb;padding:22px;border:1px solid #cbd6e2;box-shadow:0 4px 16px #162c440a;margin-top:18px}.application-preview p{font-size:14px}.sorting-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin:18px 0}.sorting-bin{padding:10px;background:#eaf0f7;border-radius:12px}.placed-card{margin-top:8px;background:#fff;font-size:12px;padding:10px;min-height:42px}.outfit-rack{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.outfit-rack .ledger{padding:12px;margin:0}.outfit-card{display:block;font-size:13px;margin-top:8px;padding:12px 9px}.interview-stage{padding:20px;background:#eaf0f7;border-radius:14px}.interview-answer{display:block;margin-top:10px}.activity-submit{display:block;width:100%;margin-top:18px}.activity-submit+button.secondary{margin-top:10px}.drag-card[draggable=true]{-webkit-user-select:none;user-select:none}@media(max-width:650px){.application-board{grid-template-columns:1fr}.outfit-rack{grid-template-columns:1fr}.card-bank{max-height:260px;overflow-y:auto}.drag-card{font-size:13px}.sorting-bins{grid-template-columns:1fr}.interview-stage{padding:14px}}

.drag-card,.placed-card{touch-action:none}

.sort-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.sort-board .sorting-bins{grid-template-columns:1fr;margin:0}.sort-board .card-bank{gap:9px}@media(max-width:650px){.sort-board{grid-template-columns:1fr}.drag-card,.placed-card{touch-action:pan-y}}

.hazard-photo{display:block;width:100%;height:auto}

.phone-track{position:relative;height:5rem;background:#254765;border-radius:.75rem;overflow:hidden;margin:1rem 0}
.phone-block,.phone-target{position:absolute;left:50%;width:22%;transform:translateX(-50%);border-radius:.35rem}
.phone-block{top:.5rem;height:1rem;background:#efb856}
.phone-target{bottom:0;height:12%;background:#a8bfd7}

#modal:has(.lift-quest){align-items:end;background:linear-gradient(transparent 45%,#132a4555);backdrop-filter:none}
#modal:has(.lift-quest)>section{max-height:47dvh;padding:12px 20px}
.lift-quest{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lift-quest p{flex-basis:100%;margin:0}

.balance-wheel{width:3rem;aspect-ratio:1;border:.4rem solid #263438;border-radius:50%;background:conic-gradient(#9ba8a7 0 12%,#51666a 12% 25%,#9ba8a7 25% 37%,#51666a 37% 50%,#9ba8a7 50% 62%,#51666a 62% 75%,#9ba8a7 75% 87%,#51666a 87%);animation:balance-spin 1.1s linear infinite}
@keyframes balance-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.balance-wheel{animation:none}}

/* Exploration first. The compass and route are available on demand. */
body:not(.show-guide) #hint,body:not(.show-guide) #compass>b,
body:not(.show-guide) #distance,body:not(.show-guide) #walkBtn{display:none}
#guideBtn[aria-expanded=true]{border-color:#426d9d;background:#eaf0f7}
body:has(.lift-quest) #mission,body:has(.lift-quest) #compass,
body:has(.lift-quest) #location,body:has(.lift-quest) #mapPanel{visibility:hidden}
#modal:has(.lift-quest) .activity-status:empty{display:none}
#modal:has(.lift-quest) .lift-quest button{min-height:44px}
@media(pointer:coarse){
 #compass button{min-height:44px}
 #compass #mapBtn{min-height:44px}
 #modal:has(.lift-quest)>section{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}

#modal:has(.lift-quest) #dialogTitle{margin:.35rem 0 .55rem;font-size:clamp(1.25rem,3vw,1.8rem)}
#dialogBody:has(.lift-in-progress)>p.speech,#dialogBody:has(.lift-in-progress)>.duration{display:none}
body:has(.lift-quest) header,body:has(.lift-quest) footer{visibility:hidden}

.job-ad{overflow:hidden;border:1px solid #a8bfd7;border-radius:14px;background:#fff}
.job-ad-photo{display:block;width:100%;height:auto;max-width:640px;margin:auto}
.job-ad-copy{padding:10px 15px;border-top:1px solid #a8bfd7}
.job-ad-copy p{margin:.65rem 0 0}
.evidence-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:.45rem}
.lift-quest .rack-tag.on-rack{position:fixed;z-index:22;transform:translate(-50%,-50%);background:#fcf4d7;border:2px solid #7798bb;white-space:nowrap;box-shadow:0 3px 10px #132a4555}

.application-preview .letter-subject{font-weight:700}
.application-preview .letter-signature{white-space:pre-line}

/* Cool slate surfaces and a clear hierarchy for the pause menu. */
:root{--action:#255c9d;--action-hover:#194779;--surface:#e4edf7}
button.primary{background:var(--action);border-color:var(--action);color:#fff}
button.primary:hover{background:var(--action-hover)}
#compass #walkBtn,#interact{background:var(--action);color:#fff}
#modal>section:has(.pause-menu){max-width:640px;border:1px solid #cbd6e2}
.pause-menu{display:grid;gap:14px}
.pause-menu .resume-game{text-align:center;min-height:52px}
.menu-heading{margin:4px 0 0;font-size:14px;color:var(--muted)}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.menu-grid button{text-align:left;min-height:48px}
.menu-grid button:hover{border-color:#7798bb;background:var(--surface)}
.pause-menu .menu-save{margin:2px 0 0}
.pause-menu .menu-reset{justify-self:start;background:transparent;color:#435970;font-size:13px}
@media(max-width:480px){.menu-grid{grid-template-columns:1fr}}

.school-report{width:100%;max-width:34rem;border-collapse:collapse;margin:14px 0}
.school-report caption{text-align:left;font-weight:700;padding-bottom:8px}
.school-report th,.school-report td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.school-report thead{background:var(--surface)}
.school-report tbody th{font-weight:500}

.workshop-mail{padding:clamp(15px,3vw,26px);background:#fff;border:1px solid var(--line);border-radius:14px}
.mail-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mail-meta dt{color:var(--muted);font-weight:600}
.mail-meta dd{margin:0;overflow-wrap:anywhere}
.workshop-mail p{white-space:pre-line;margin:0 0 .8em}
.workshop-mail p:last-child{margin-bottom:0}

.outfit-rack{--cabinet:#4c6279;--shelf:#273b51;--clothing:url('kleidung-werkstatt.jpg');display:block;max-width:29rem;margin:0 auto;padding:10px 13px 14px;border:6px solid var(--shelf);border-radius:9px;background:linear-gradient(100deg,var(--shelf),var(--cabinet) 10% 90%,var(--shelf));box-shadow:0 5px 0 #162c4422}
.outfit-rack.home-wardrobe{--cabinet:#8d715a;--shelf:#594337;--clothing:url('kleidung-zuhause.jpg')}
.cabinet-label{width:max-content;max-width:100%;margin:0 auto 8px;padding:3px 12px;border-radius:4px;background:#eef3f7;color:#233b54;font-size:.8rem;font-weight:700}
.outfit-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px;border-bottom:5px solid var(--shelf);background:#23384c}
.outfit-shelf h3{grid-column:1/-1;margin:0 5px;color:#fff;font-size:.8rem}
.outfit-shelf .outfit-card{margin:0;padding:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr;background:#fff;text-align:center}
.outfit-art{display:block;aspect-ratio:6/5;background-image:var(--clothing);background-size:200% 300%}
.outfit-name{display:block;padding:5px 6px;font-weight:600;font-size:.78rem}
.outfit-card[aria-pressed=true] .outfit-name::before{content:'✓ ';font-weight:800}

.letter-navigation{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.letter-navigation button{min-height:40px;margin:0;font-size:.8rem}
.letter-navigation [aria-current=step]{border-color:var(--action);background:var(--surface);font-weight:700}

.letter-navigation [data-filled=true]::after{content:' ✓';color:var(--action);font-weight:700}

#mailNotice{position:fixed;z-index:9;right:20px;bottom:max(100px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;width:min(420px,calc(100vw - 32px));padding:15px;background:#f4f7fb;color:var(--ink);border:1px solid #7798bb;border-left:5px solid var(--action);border-radius:14px;box-shadow:0 8px 24px #162c4433}
#mailNotice>span{font-size:28px}
#mailNotice strong,#mailNotice small{display:block}
#mailNotice small{font-size:12px;color:var(--muted)}
#mailNotice button{font-size:12px;padding:8px}
@media(max-width:600px){#mailNotice{bottom:180px;right:16px;flex-wrap:wrap}}

.wake-clock{max-width:27rem;margin:15px auto;padding:22px;text-align:center;border:1px solid var(--line);border-radius:18px;background:#e4edf7}
.wake-time{display:block;font-size:clamp(3rem,10vw,5rem);font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:.04em}
.wake-face{font-size:2rem;animation:alarm-ring .4s ease-in-out infinite alternate}
.wake-clock button{display:block;width:100%;margin-top:10px}
@keyframes alarm-ring{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.wake-face{animation:none}}

/* Compact navigation and one clear work area per task. */
#mission{width:clamp(220px,24vw,290px);padding:16px 18px;border-radius:14px}
#mission h2{font-size:19px;line-height:1.25;margin:8px 0}
#mission p{margin-bottom:10px}
#mission .eyebrow{font-size:9px;letter-spacing:1.2px}
#stepCount{margin-top:6px;letter-spacing:.3px}
#modal>section{padding:22px 26px;border:1px solid var(--line)}
#dialogTitle{font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.2;margin:10px 0 16px}
.work-task #dialogBody>p:first-child{margin:0 0 10px}
.work-task #dialogBody>.speech{padding:12px 15px}
.work-task #dialogBody>h3{font-size:16px;margin:12px 0}
.duration{display:inline-block;margin:0 0 10px;padding:3px 9px;border-radius:20px;background:var(--surface);font-size:11px;color:var(--muted)}
.day-plan{list-style:none;padding:0;margin:12px 0;display:grid;gap:6px}
.day-plan li{padding:9px 12px;border-left:3px solid var(--action);border-radius:5px;background:var(--surface)}
.activity-status:empty{display:none}
.work-task .object-card{min-height:115px;padding:12px 9px;gap:7px}
.work-task .object-card .object-icon{font-size:27px;width:48px;height:42px;line-height:42px}
.work-task .activity-submit{position:static;margin-top:14px}
.work-task .reading-table{font-size:13px}
.work-task .vehicle-workbench{padding:14px;gap:14px;margin-top:8px}
@media(pointer:coarse){#modal button{min-height:44px}#closeDialog{min-width:44px}}
@media(max-width:700px){
 #mission{width:min(53vw,235px);padding:11px 13px}
 #mission h2{font-size:16px}
 #location{max-width:calc(100vw - 26px);font-size:9px}
 #saveStatus{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #modal>section{padding:16px}

}

@media(min-width:701px){.work-task .vehicle-art{max-width:clamp(170px,calc((100dvh - 430px)*.6667),210px)}}

.task-object-photo{display:block;width:100%;max-width:170px;aspect-ratio:6/5;background-repeat:no-repeat;border-radius:8px;flex-shrink:0}
.work-task .object-card:has(.task-object-photo){gap:6px;padding:8px}
.object-card .task-object-photo{max-width:180px}
.sort-board .drag-card:has(.task-object-photo){display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:10px;align-items:center}
.sort-board .drag-card .task-object-photo{grid-column:2;grid-row:1}
@media(max-width:650px){.sort-board .drag-card:has(.task-object-photo){grid-template-columns:minmax(0,1fr) 78px}}

.status-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.status-lane{padding:12px;background:var(--surface);border-radius:10px}
.status-lane h3{font-size:15px;margin:0 0 10px}
.order-drag-card{margin:14px 0;padding:15px;border:2px solid #426d9d;border-radius:8px;background:#fff;cursor:grab}
.tyre-observations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tyre-evidence{border:1px solid var(--line);border-radius:10px;padding:10px}
.tyre-photo{display:block;aspect-ratio:1;background:url('reifen-pruefbilder.jpg');background-size:200% 200%;border-radius:8px}
.tyre-evidence .actions{display:grid;gap:5px;margin-top:8px}
.tyre-evidence button{font-size:12px}
@media(max-width:600px){.status-board{grid-template-columns:1fr}.tyre-observations{gap:7px}.tyre-evidence{padding:7px}}

#modal:has(.seated-phone){align-items:end;backdrop-filter:none;background:linear-gradient(transparent 45%,#162c4433)}
#modal:has(.seated-phone)>section{max-height:45dvh}
#modal:has(.seated-phone) #dialogTitle{font-size:1.35rem;margin:5px 0 9px}
body:has(.seated-phone) #mission,body:has(.seated-phone) #compass,body:has(.seated-phone) header,body:has(.seated-phone) footer{visibility:hidden}

#gearChecklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:10px}
.gear-check{display:grid;gap:2px;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden;text-align:center}
.gear-thumb{display:block;aspect-ratio:1;background:url('aufgabe-werkzeuge.jpg');background-size:200% 300%}
.gear-check small{font-size:10px;padding:2px}
.gear-check.ready{border-color:var(--action)}
.gear-check.ready .gear-thumb{opacity:.55}
.application-tip{padding:9px 12px;background:var(--surface);border-left:3px solid var(--action);border-radius:6px}
.intake-stage>.reading-choice{display:block;width:100%;margin:8px 0;text-align:left}
.intake-stage .choices{margin:10px 0}

/* Phone stacking game: a visible tower, clear feedback and generous touch controls. */
.phone-tower{height:13rem;background:linear-gradient(180deg,#10273f,#294c70);border:1px solid #517396;isolation:isolate}
.phone-tower:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,#ffffff0a 23px 24px)}
.phone-tower .phone-block{top:1rem;height:16px;background:#ffcc71;box-shadow:0 3px 10px #0005;transition:width .15s}
.phone-tower .phone-target{height:10px;bottom:12px;background:#cee5ff;opacity:.7}
.phone-tower-stack{position:absolute;left:0;right:0;bottom:24px;height:140px}
.phone-stone{position:absolute;height:15px;transform:translateX(-50%);border:1px solid #ffffff66;border-radius:3px;box-shadow:0 3px 5px #0003}
.phone-score{font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink)}
.phone-game-status{min-height:2.8em;font-size:.95rem}
.phone-miss{border-color:#e89986}

#modal:has(.phone-tower){align-items:center;justify-content:flex-end}
#modal:has(.phone-tower)>section{width:min(410px,100%);max-height:94dvh;padding:14px 18px}
#modal:has(.phone-tower) #dialogTitle{font-size:1.25rem;margin:5px 0}
#modal:has(.phone-tower) .ledger{padding:10px;margin:8px 0}
#modal:has(.phone-tower) p{margin:6px 0}
#modal:has(.phone-tower) .phone-tower{height:clamp(110px,23dvh,180px);margin:8px 0}
#modal:has(.phone-tower) .phone-game-status{font-size:.85rem;min-height:2.7em}
#modal:has(.phone-tower) button{padding:9px 12px}
@media(max-width:600px){#modal:has(.phone-tower){justify-content:center}}