.smartphone-controller{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg-color,#f5f5f5);color:var(--text-color,#333);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;z-index:10000}@media (prefers-color-scheme:dark){.smartphone-controller{--bg-color:#121212;--text-color:#f0f0f0;--zone-bg:#2a2a2a;--zone-border:#444}}.smartphone-controller.theme-dark{--bg-color:#121212;--text-color:#f0f0f0;--zone-bg:#2a2a2a;--zone-border:#444;--header-bg:#6d4c41;--accent-color:#a57865;--accent-color-hover:#8a6553;--menu-active-bg:rgba(255, 255, 255, 0.08)}.smartphone-controller.theme-light{--bg-color:#f6f4f1;--text-color:#2b2623;--zone-bg:#fbfaf8;--zone-border:rgba(27, 24, 22, 0.12);--header-bg:#a57865;--accent-color:#a57865;--accent-color-hover:#8a6553;--menu-active-bg:rgba(0, 0, 0, 0.04)}.smartphone-controller{--zone-bg:#ffffff;--zone-border:#ddd;--holding-color:#e74c3c;--armed-color:#4caf50;--running-color:#3498db;--stopped-color:#9b59b6;--accent-color:#a57865;--accent-color-hover:#8a6553;--menu-active-bg:rgba(0, 0, 0, 0.06)}.controller-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--header-bg,#a57865);color:#fff;flex-shrink:0;position:relative}.controller-header-left{position:relative;display:flex;align-items:center;gap:8px}.controller-menu-btn{width:38px;height:38px;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer}.controller-menu-btn:active{transform:scale(.97)}.controller-inspection-btn{border:0;border-radius:10px;padding:9px 12px;background:var(--accent-color,#a57865);color:#fff;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}.controller-inspection-btn:active{background:var(--accent-color-hover,#8a6553)}.controller-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;background:var(--zone-bg);color:var(--text-color);border:1px solid var(--zone-border);border-radius:12px;box-shadow:0 14px 28px rgba(0,0,0,.22);overflow:hidden;z-index:40}.controller-menu-item{width:100%;border:0;border-bottom:1px solid var(--zone-border);padding:12px 14px;text-align:left;background:0 0;color:inherit;font-size:.92rem;font-weight:600;cursor:pointer}.controller-menu-item:last-child{border-bottom:0}.controller-menu-item:active{background:var(--menu-active-bg)}.controller-menu-item.danger{color:#e74c3c}.controller-connection{display:flex;align-items:center;gap:8px;font-size:.85rem}.connection-dot{width:10px;height:10px;border-radius:50%;background:#888;transition:background .3s ease}.connection-dot.connected{background:#4caf50;box-shadow:0 0 8px rgba(76,175,80,.6)}.connection-dot.reconnecting{background:#f39c12;animation:pulse 1s infinite}.connection-dot.disconnected{background:#e74c3c}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}.controller-status{text-align:center;padding:16px;font-size:1.1rem;font-weight:500;background:var(--zone-bg);border-bottom:1px solid var(--zone-border);flex-shrink:0;transition:background .2s ease,color .2s ease}.controller-status.ready{background:var(--armed-color);color:#fff}.controller-status.running{background:var(--running-color);color:#fff}.controller-status.stopped{background:var(--stopped-color);color:#fff}.controller-status.error{background:#e74c3c;color:#fff}.controller-status.connecting{background:#f39c12;color:#fff}.controller-actions{display:flex;flex-direction:column;gap:8px;justify-content:center;padding:8px 16px;background:var(--zone-bg);border-bottom:1px solid var(--zone-border);flex-shrink:0}.controller-action-row{display:flex;align-items:center;gap:8px}.inspection-actions{justify-content:center}.penalty-actions{justify-content:stretch}.inspection-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;font-size:1rem;font-weight:600;color:#fff;background:#3498db;border:none;border-radius:12px;cursor:pointer;transition:background .2s ease,transform .1s ease;touch-action:manipulation}.inspection-btn:active{background:#2980b9;transform:scale(.97)}.inspection-btn i{font-size:1.3rem}.inspection-btn.cancel{background:#7f8c8d}.inspection-btn.cancel:active{background:#6c7a7b}.penalty-btn{flex:1;min-width:0;padding:10px 10px;border:none;border-radius:10px;color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .2s ease,transform .1s ease;touch-action:manipulation}.penalty-btn:active{transform:scale(.97)}.penalty-btn.none{background:#34495e}.penalty-btn.none:active{background:#2c3e50}.penalty-btn.plus2{background:#f39c12}.penalty-btn.plus2:active{background:#d68910}.penalty-btn.dnf{background:#e74c3c}.penalty-btn.dnf:active{background:#c0392b}.controller-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}.controller-modal{width:100%;max-width:420px;background:var(--zone-bg);color:var(--text-color);border:1px solid var(--zone-border);border-radius:14px;padding:14px}.controller-modal-title{font-size:1.05rem;font-weight:700;margin-bottom:10px}.controller-modal-message{font-size:.92rem;opacity:.85}.controller-modal-textarea{width:100%;min-height:120px;border:1px solid var(--zone-border);border-radius:10px;padding:10px;resize:vertical;font-size:.95rem;background:0 0;color:inherit}.controller-modal-actions{margin-top:12px;display:flex;justify-content:flex-end;gap:8px}.controller-modal-btn{border:0;border-radius:8px;padding:9px 12px;font-weight:700;background:#3498db;color:#fff}.controller-modal-btn.secondary{background:#7f8c8d}.controller-modal-btn.danger{background:#c0392b}.controller-tags-list{display:flex;flex-wrap:wrap;gap:8px;max-height:220px;overflow-y:auto;padding:4px 0}.controller-tag-chip{border:1px solid var(--zone-border);background:0 0;color:inherit;border-radius:999px;padding:8px 11px;font-size:.82rem;font-weight:700;cursor:pointer}.controller-tag-chip.active{background:var(--tag-color,#a57865);border-color:var(--tag-color,#a57865);color:#fff}.controller-tags-empty{font-size:.85rem;opacity:.75;padding:2px 0 6px}.controller-timer{text-align:center;padding:20px 16px;font-size:3.5rem;font-weight:700;font-family:"SF Mono",Menlo,Monaco,"Courier New",monospace;font-variant-numeric:tabular-nums;letter-spacing:2px;background:var(--zone-bg);flex-shrink:0}@media (min-height:700px){.controller-timer{font-size:4.5rem;padding:30px 16px}}.controller-zones{display:flex;flex:1;gap:4px;padding:4px;min-height:0}.touch-zone{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--zone-bg);border:3px solid var(--zone-border);border-radius:16px;transition:all .15s ease;cursor:pointer;position:relative;overflow:hidden}.zone-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;opacity:.3;transition:opacity .2s ease,transform .2s ease}.zone-icon svg{width:100%;height:100%}.zone-icon i{font-size:48px}.zone-label{margin-top:12px;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;opacity:.4}.touch-zone.active{transform:scale(.98);background:rgba(0,0,0,.05)}.touch-zone.active .zone-icon{opacity:.5;transform:scale(1.1)}.left-zone .zone-icon i{transform:scaleX(-1)}.touch-zone.holding{background:var(--holding-color);border-color:var(--holding-color);color:#fff}.touch-zone.holding .zone-icon{opacity:.8}.touch-zone.holding .zone-label{opacity:.8}.touch-zone.armed{background:var(--armed-color);border-color:var(--armed-color);color:#fff;animation:readyPulse .5s ease-in-out infinite alternate}.touch-zone.armed .zone-icon{opacity:1}.touch-zone.armed .zone-label{opacity:1}@keyframes readyPulse{from{box-shadow:0 0 20px rgba(76,175,80,.4)}to{box-shadow:0 0 40px rgba(76,175,80,.8)}}.touch-zone.running{background:var(--zone-bg);border-color:var(--running-color);opacity:.7}.touch-zone.running .zone-icon{opacity:.2}.touch-zone.running .zone-label{opacity:.3}.touch-zone.stopped{background:var(--stopped-color);border-color:var(--stopped-color);color:#fff;opacity:.9}.controller-instructions{text-align:center;padding:12px 16px;font-size:.85rem;color:var(--text-color);opacity:.6;background:var(--zone-bg);border-top:1px solid var(--zone-border);flex-shrink:0}@media (max-height:600px){.controller-status{padding:10px;font-size:1rem}.controller-actions{padding:6px 12px}.inspection-btn{padding:10px 20px;font-size:.95rem}.inspection-btn i{font-size:1.1rem}.controller-timer{padding:12px;font-size:2.5rem}.zone-icon{width:48px;height:48px}.zone-icon i{font-size:36px}.zone-label{font-size:.85rem;margin-top:8px}.controller-instructions{padding:8px 12px;font-size:.75rem}}@media (orientation:landscape){.controller-zones{flex-direction:row}.controller-timer{font-size:2.5rem;padding:12px}.controller-status{padding:8px;font-size:.9rem}.controller-actions{padding:4px 8px}.controller-action-row{gap:6px}.inspection-btn{padding:7px 12px;font-size:.82rem;gap:6px}.inspection-btn i{font-size:1rem}.penalty-btn{padding:7px 8px;font-size:.8rem}.controller-instructions{display:none}.controller-menu{min-width:160px}.controller-menu-item{padding:10px 12px;font-size:.85rem}.controller-inspection-btn{font-size:.75rem;padding:7px 10px}}@media (min-width:768px) and (min-height:1024px){.controller-timer{font-size:6rem;padding:40px}.zone-icon{width:96px;height:96px}.zone-icon i{font-size:72px}.zone-label{font-size:1.2rem}.inspection-btn{padding:18px 36px;font-size:1.3rem}}@media (prefers-color-scheme:dark){.smartphone-controller:not(.theme-light) .controller-header{background:#6d4c41}.smartphone-controller:not(.theme-light) .touch-zone{background:#1e1e1e;border-color:#333}.smartphone-controller:not(.theme-light) .touch-zone.active{background:rgba(255,255,255,.05)}.smartphone-controller:not(.theme-light) .controller-actions,.smartphone-controller:not(.theme-light) .controller-instructions,.smartphone-controller:not(.theme-light) .controller-status,.smartphone-controller:not(.theme-light) .controller-timer{background:#1e1e1e;border-color:#333}.inspection-btn{background:#2980b9}.inspection-btn:active{background:#1f6491}.inspection-btn.cancel{background:#5f6c6d}.inspection-btn.cancel:active{background:#4f5a5b}}.smartphone-controller.theme-light .controller-header{background:var(--header-bg)}.smartphone-controller.theme-light .controller-actions,.smartphone-controller.theme-light .controller-instructions,.smartphone-controller.theme-light .controller-menu,.smartphone-controller.theme-light .controller-modal,.smartphone-controller.theme-light .controller-status,.smartphone-controller.theme-light .controller-timer,.smartphone-controller.theme-light .touch-zone{background:var(--zone-bg);border-color:var(--zone-border);color:var(--text-color)}@supports (padding-top:env(safe-area-inset-top)){.controller-header{padding-top:calc(12px + env(safe-area-inset-top))}.controller-instructions{padding-bottom:calc(12px + env(safe-area-inset-bottom))}.controller-zones{padding-left:calc(4px + env(safe-area-inset-left));padding-right:calc(4px + env(safe-area-inset-right))}}.connection-dot,.controller-status,.touch-zone{transition-property:background,border-color,color,opacity,transform,box-shadow;transition-duration:.15s;transition-timing-function:ease}.touch-zone.active{transition-duration:50ms}