:root{--red:#e3262b;--deep-red:#a8141a;--orange:#ff7a1a;--yellow:#ffc72c;--green:#2dbe4e;--water:#3fb6f2;--blue:#1e7bff;--steel-light:#d9dee3;--steel-dark:#8c959e;--panel:#1c1f24;--outline:#1b1b2f;--gap:clamp(4px, 1.4vmin, 12px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--panel);overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}img{-webkit-user-drag:none;pointer-events:none}#app{touch-action:none;padding:max(env(safe-area-inset-top), 6px) max(env(safe-area-inset-right), 8px) max(env(safe-area-inset-bottom), 6px) max(env(safe-area-inset-left), 8px);position:fixed;inset:0}.dashboard{will-change:transform;height:100%;transition:transform .55s cubic-bezier(.2,.9,.3,1.1)}.dashboard.waiting{transition:transform .35s ease-in;transform:scale(.9)}.frame{background:linear-gradient(170deg, #f0474b 0%, var(--red) 35%, var(--deep-red) 100%);border-radius:clamp(14px,4vmin,30px);height:100%;padding:clamp(5px,1.5vmin,12px);position:relative;box-shadow:inset 0 2px #ffffff59,inset 0 -3px #0000004d}.panel{height:100%;padding:var(--gap);background:repeating-linear-gradient(45deg, #ffffff06 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, #ffffff06 0 6px, transparent 6px 12px), linear-gradient(180deg, #262a31, var(--panel));gap:var(--gap);border-radius:clamp(10px,3vmin,22px);display:grid;position:relative;overflow:hidden;box-shadow:inset 0 3px 10px #000000b3,0 0 0 2px #00000059}.area-top{grid-area:top;min-height:0;display:grid}.area-btns{gap:var(--gap);grid-area:btns;min-height:0;display:grid}.area-wheel{grid-area:wheel;place-items:center;min-width:0;min-height:0;padding-bottom:clamp(8px,2vmin,16px);display:grid;container-type:size}.panel{grid-template:"top"minmax(0,.4fr)"controls"minmax(0,4.9fr)/minmax(0,1fr)}.area-controls{grid-area:controls;min-width:0;min-height:0;position:relative;container-type:size}.controls{gap:var(--gap);grid-template:"btns"minmax(0,3.2fr)"wheel"minmax(0,1.7fr)/minmax(0,1fr);display:grid;position:absolute;inset:0}.area-btns{grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr))}.no-loud-buttons .area-btns{grid-template-rows:repeat(3,minmax(0,1fr))}@media (orientation:landscape){.area-controls,.controls,.area-btns{display:contents}.cell-siren{grid-area:siren}.cell-horn{grid-area:horn}.cell-bell{grid-area:bell}.cell-water{grid-area:water}.cell-ladder{grid-area:ladder}.cell-megaphone{grid-area:megaphone}.cell-radio{grid-area:radio}.cell-saw{grid-area:saw}.cell-axe{grid-area:axe}.cell-winch{grid-area:winch}.cell-motor{grid-area:motor}.cell-oxygen{grid-area:oxygen}.panel{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:minmax(0,.45fr) repeat(4,minmax(0,1fr)) minmax(0,2.1fr);grid-template-areas:"top bell megaphone axe oxygen wheel""top horn ladder saw motor wheel""top siren water radio winch wheel"}.no-loud-buttons .panel{grid-template-columns:minmax(0,.45fr) repeat(3,minmax(0,1fr)) minmax(0,2.1fr);grid-template-areas:"top megaphone axe oxygen wheel""top ladder saw motor wheel""top water radio winch wheel"}:root[data-turn=cw] .panel{grid-template-columns:minmax(0,2.1fr) repeat(4,minmax(0,1fr)) minmax(0,.45fr);grid-template-areas:"wheel winch radio water siren top""wheel motor saw ladder horn top""wheel oxygen axe megaphone bell top"}:root[data-turn=cw] .no-loud-buttons .panel{grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1fr)) minmax(0,.45fr);grid-template-areas:"wheel winch radio water top""wheel motor saw ladder top""wheel oxygen axe megaphone top"}.lightbar{flex-direction:column-reverse}:root[data-turn=cw] .lightbar{flex-direction:column}}.cell{place-items:center;min-width:0;min-height:0;display:grid;position:relative;container-type:size}.cell[hidden]{display:none}.lightbar{isolation:isolate;touch-action:none;background:linear-gradient(#4a525c,#2a2f36);border-radius:clamp(10px,2.6vmin,18px);gap:1.2%;padding:clamp(5px,1.2vmin,9px);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px #ffffff40,0 2px #00000080}.lightbar:after{content:"";z-index:0;transform-origin:0;transform:scaleX(var(--hold,0));pointer-events:none;background:#ffffff59;position:absolute;inset:0}@media (orientation:landscape){.lightbar:after{transform-origin:bottom;transform:scaleY(var(--hold,0))}:root[data-turn=cw] .lightbar:after{transform-origin:top}}.lamp{z-index:1;background:radial-gradient(at 50% 30%,#2a4d86 0%,#0d2750 70%);border-radius:clamp(6px,1.6vmin,12px);flex:1;min-width:0;transition:background 50ms,box-shadow 50ms;position:relative;box-shadow:inset 0 -2px 4px #00000080}.lamp.on{background:radial-gradient(ellipse at 50% 40%, #fff 0%, #9cc8ff 18%, var(--blue) 55%, #0a4fd1 100%);box-shadow:inset 0 0 6px 2px #fff9,0 0 10px 3px #1e7bffe6}.lamp:nth-child(n+4):nth-child(-n+7){display:none}.lightbar{gap:3%}.panel:after{content:"";border-radius:inherit;pointer-events:none;opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 0 3px #78b4ffe6,inset 0 0 34px 10px #1e7bffbf}.lights-on .panel:after{animation:.68s ease-in-out infinite edge-pulse}@keyframes edge-pulse{0%,to{opacity:.15}50%{opacity:1}}.round{--size:min(88cqw, 88cqh);width:var(--size);height:var(--size);padding:calc(var(--size) * .07);background:radial-gradient(circle at 35% 30%, #fff 0%, var(--steel-light) 25%, var(--steel-dark) 70%, #50575f 100%);border-radius:50%;transition:transform 60ms;position:relative;box-shadow:0 4px #2b2f35,0 6px 12px #0009}.face{background:radial-gradient(circle at 40% 30%,#4a525c 0%,#2c3138 55%,#1c1f24 100%);border-radius:50%;place-items:center;width:100%;height:100%;transition:background .1s,box-shadow .1s;display:grid;position:relative;box-shadow:inset 0 -4px 6px #00000073,inset 0 3px 4px #ffffff2e}.round.pressed{transform:translateY(3px)scale(.95);box-shadow:0 1px #2b2f35,0 2px 5px #0009}.round.pressed .face,.round.lit .face{box-shadow:inset 0 -2px 4px #00000040, inset 0 3px 4px #ffffff80, 0 0 18px 5px color-mix(in srgb, var(--c) 80%, transparent);background:radial-gradient(circle at 40% 30%,#5a636e 0%,#353b43 55%,#23272d 100%)}.icon{place-items:center;width:74%;height:74%;display:grid;position:relative}.icon img{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.icon .emoji{font-size:min(40cqw,40cqh);line-height:1}.icon.has-img .emoji{display:none}.round.siren-pin .face{box-shadow:inset 0 -2px 4px #00000040, 0 0 26px 10px color-mix(in srgb, var(--blue) 90%, transparent)}.waves{pointer-events:none;opacity:0;position:absolute;inset:-12%}.speaking .waves{opacity:1}.waves span{border:3px solid #fffc;border-radius:50%;animation:.9s ease-out infinite wave;position:absolute;inset:0}.waves span:nth-child(2){animation-delay:.3s}.waves span:nth-child(3){animation-delay:.6s}@keyframes wave{0%{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.25)}}.round.radio.speaking .face{box-shadow:inset 0 -2px 4px #00000040, 0 0 20px 6px color-mix(in srgb, var(--green) 85%, transparent)}.round.motor .face{background:radial-gradient(circle at 38% 28%,#c9484c 0%,#8e1417 45%,#45070a 100%);transition:background .18s,box-shadow .18s;box-shadow:inset 0 -5px 8px #00000073,inset 0 4px 6px #ffffff4d}.round.motor.on .face{background:radial-gradient(circle at 42% 38%,#fff1b8 0%,#ff8f6a 22%,#f8332c 60%,#b3161a 100%);box-shadow:inset 0 -4px 8px #78000066,inset 0 4px 8px #ffffff73,0 0 14px 2px #ff3b308c}.motor-word{letter-spacing:.06em;color:#4a0a0d;text-shadow:0 1px #ffffff59;font-size:min(12.5cqw,12.5cqh);font-weight:900;transition:opacity .18s}.round.motor.on .motor-word{opacity:.55}.wheel-slot{--size:min(96cqw, 96cqh);width:var(--size);height:var(--size);position:relative}.wheel-slot:before{content:"";pointer-events:none;opacity:0;border-radius:50%;transition:opacity .1s;position:absolute;inset:0;transform:scale(.97);box-shadow:0 0 22px 8px #ffc72c80}.wheel-slot:has(.grabbed):before{opacity:1}.steering-wheel{filter:drop-shadow(0 5px #15171b)drop-shadow(0 8px 10px #0000008c);width:100%;height:100%;transition:transform 60ms;display:block;position:relative}.steering-wheel.grabbed{transform:scale(.97)}.wheel-glow{opacity:0;transition:opacity .1s}.steering-wheel.grabbed .wheel-glow{opacity:.8}.wash{z-index:25;border-radius:inherit;pointer-events:none;opacity:0;background:repeating-linear-gradient(100deg,#ffffff2e 0 6px,#0000 6px 38px) 0 0/160px 100%,linear-gradient(#3fb6f259,#1e7bff73) 0 0/100% 100%;transition:opacity .25s;position:absolute;inset:0}.spraying .wash{opacity:1;animation:.35s linear infinite water-flow}@keyframes water-flow{0%{background-position:0 0,0 0}to{background-position:-160px 0,0 0}}.fx{border-radius:inherit;pointer-events:none;z-index:30;width:100%;height:100%;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.dashboard,.dashboard.waiting,.start-stack{transition-duration:10ms}.lights-on .panel:after{animation-duration:1.4s}}.start-overlay{touch-action:none;opacity:1;will-change:opacity;transition:opacity .45s ease-out}.start-stack{will-change:transform, opacity;transition:transform .45s cubic-bezier(.4,0,.6,1),opacity .35s ease-out}.start-overlay.leaving{opacity:0;pointer-events:none}.start-overlay.leaving .start-stack{opacity:0;transform:scale(1.25)}.start-overlay.entering,.start-overlay.entering .start-stack{opacity:0;transition:none}.start-overlay.entering .start-stack{transform:scale(.85)}.start-button{background:radial-gradient(circle at 35% 30%, #fff 0%, var(--steel-light) 25%, var(--steel-dark) 70%, #50575f 100%);transition:transform 80ms;box-shadow:0 8px #2b2f35,0 12px 24px #0009}.start-button:before{content:"";z-index:-1;pointer-events:none;will-change:opacity;border-radius:50%;animation:4.2s cubic-bezier(.45,.05,.55,.95) infinite start-breathe;position:absolute;inset:0;box-shadow:0 0 34px 10px #3f96ffb3,0 0 90px 34px #1e7bff59}.start-button.pressed{transform:translateY(4px)scale(.95)}.start-overlay:active .start-label{transform:translateY(3px);box-shadow:0 3px #6e0d11,0 6px 12px #00000080}@keyframes start-breathe{0%,to{opacity:.3}45%,55%{opacity:1}}.start-label{z-index:1;background:linear-gradient(180deg, #f0474b, var(--red) 55%, var(--deep-red));border:4px solid var(--steel-light);color:#fff;letter-spacing:.04em;text-align:center;text-transform:uppercase;text-shadow:0 2px #00000059;visibility:visible;border-radius:999px;min-width:min(52vmin,280px);padding:clamp(12px,3vmin,20px) clamp(28px,7vmin,48px);font-size:clamp(28px,8vmin,48px);font-weight:900;position:relative;box-shadow:0 6px #6e0d11,0 10px 20px #00000080}.parent-panel{z-index:100;padding:max(env(safe-area-inset-top), 12px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 12px) max(env(safe-area-inset-left), 16px);-webkit-user-select:text;user-select:text;touch-action:pan-y;background:#0009;place-items:stretch stretch;display:grid;position:fixed;inset:0}.parent-panel[hidden]{display:none}.pp-sheet{color:#1b1b2f;background:#f6f4ef;border-radius:18px;flex-direction:column;width:100%;max-width:760px;min-height:0;margin:0 auto;display:flex;overflow:hidden}.pp-header{color:#fff;background:#a8141a;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.pp-header h1{margin:0;font-size:20px}.pp-close{color:#fff;background:#fff3;border:0;border-radius:50%;width:48px;height:48px;font-size:24px}.pp-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;min-height:0;padding:0 16px 24px;overflow-y:auto}.pp-section{border-bottom:1px solid #ddd6c8;padding:12px 0}.pp-section h2{margin:4px 0 10px;font-size:17px}.pp-hint{color:#555;font-size:14px;line-height:1.4}.pp-warn{color:#a8141a;font-weight:600}.pp-field{gap:4px;margin-bottom:12px;font-size:15px;display:grid}.pp-input{color:#1b1b2f;background:#fff;border:2px solid #1b1b2f;border-radius:10px;min-height:44px;padding:6px 10px;font-size:16px}.pp-range{width:100%;min-height:44px}.pp-silent .icon{width:180px;height:90px}.pp-silent .icon .emoji{font-size:40px}.pp-toggle{align-items:center;gap:12px;min-height:48px;margin-bottom:12px;font-size:16px;font-weight:600;display:flex}.pp-check{accent-color:#e3262b;width:28px;height:28px}.pp-log{color:#d9dee3;white-space:pre-wrap;-webkit-user-select:text;user-select:text;background:#1b1b2f;border-radius:8px;max-height:240px;padding:8px;font-size:12px;line-height:1.4;overflow:auto}
