/* Kokpit, odliczanie i wypadek (strona telefonu, wariant HTTP). Wspólny styl: /style.css */
#stage { position: fixed; inset: 0; overflow: hidden; background: #000; }
#stage.shake { animation: shake 1.3s ease-out; }
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  8% { transform: translate(-18px, 12px) rotate(-1.2deg); }
  16% { transform: translate(16px, -14px) rotate(1deg); }
  26% { transform: translate(-12px, 10px) rotate(-0.8deg); }
  38% { transform: translate(10px, -8px) rotate(0.6deg); }
  52% { transform: translate(-6px, 5px) rotate(-0.3deg); }
  70% { transform: translate(3px, -2px); }
  100% { transform: translate(0, 0) rotate(0); }
}

.cockpit {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; min-height: 170px; max-height: 270px;
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; align-items: center;
  padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(to top, #070a0e 0%, #0f151c 70%, rgba(15, 21, 28, 0) 100%);
  color: #e8edf3; pointer-events: none; font-family: system-ui, sans-serif;
}
.cockpit[hidden] { display: none; }
.cockpit svg { width: 100%; height: auto; max-height: 100%; display: block; }
.dial text { fill: #cfd8e3; font: 600 11px system-ui, sans-serif; text-anchor: middle; }
.dial .face { fill: #0a0e13; stroke: #3a4756; stroke-width: 3; }
.dial .tick { stroke: #8fa0b3; stroke-width: 2; }
.dial .needle { stroke: #ff5a4d; stroke-width: 3.2; stroke-linecap: round; }
.dial .hub { fill: #d8e0ea; }
.col { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.col.right { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px; }
.col.right svg { width: 46%; }
.col.right .signal { width: 100%; justify-content: center; }
.digital { font: 700 1.7rem/1 "Courier New", monospace; color: #9df59d; text-shadow: 0 0 8px rgba(120, 255, 120, .35); }
.unit { font-size: 0.7rem; color: #8fa0b3; letter-spacing: .08em; }
.clock { font: 600 1.15rem/1 "Courier New", monospace; color: #ffd98a; }
.km { font: 600 0.8rem/1 "Courier New", monospace; color: #b9c7d6; }
.lamp {
  padding: 6px 12px; border-radius: 8px; font: 800 0.95rem/1 system-ui, sans-serif;
  letter-spacing: .1em; color: #fff; background: #1f7a3a; box-shadow: 0 0 10px rgba(60, 220, 110, .4);
}
.lamp.alarm { background: #d32f2f; box-shadow: 0 0 14px rgba(255, 70, 60, .8); animation: lamp-blink .5s steps(2, start) infinite; }
.lamp.crash { background: #000; color: #ff3b30; border: 2px solid #ff3b30; box-shadow: none; }
.signal { display: flex; gap: 6px; align-items: center; font-size: 0.65rem; color: #8fa0b3; letter-spacing: .08em; }
.signal i { width: 12px; height: 12px; border-radius: 50%; background: #1b2530; display: inline-block; }
.signal i.on-green { background: #3ee06f; box-shadow: 0 0 8px #3ee06f; }
.gauge text { fill: #cfd8e3; font: 600 9px system-ui, sans-serif; text-anchor: middle; }
.gauge .face { fill: #0a0e13; stroke: #3a4756; stroke-width: 3; }
.gauge .needle { stroke: #ffd98a; stroke-width: 3; stroke-linecap: round; }
@keyframes lamp-blink { to { opacity: 0.25; } }

.countdown { position: fixed; left: 0; right: 0; top: 16vh; z-index: 25; text-align: center; pointer-events: none; }
.countdown[hidden] { display: none; }
.countdown .label { display: block; font: 800 1.15rem system-ui, sans-serif; letter-spacing: .22em; color: #fff; text-shadow: 0 2px 10px #000; }
.countdown .num { display: block; font: 900 8rem/1 system-ui, sans-serif; color: #ff3b30; text-shadow: 0 4px 24px #000; animation: pulse 1s ease-in-out infinite; }
.countdown.urgent .num { animation-duration: 0.4s; }
@keyframes pulse { 50% { transform: scale(1.12); } }

.flash { position: fixed; inset: 0; z-index: 40; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash 0.7s ease-out forwards; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.cracks { position: fixed; inset: 0; z-index: 41; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cracks.on { opacity: 1; }

.end {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; padding: 2rem; text-align: center; background: rgba(0, 0, 0, .94); color: #fff; animation: fade-in .9s ease-out;
}
.end[hidden] { display: none; }
.end h2 { margin: 0; font: 900 3.2rem/1 system-ui, sans-serif; letter-spacing: .1em; color: #ff3b30; }
.end p { margin: 0; max-width: 26rem; font-size: 1.1rem; line-height: 1.4; }
.end p.small { font-size: 0.9rem; color: #9fb0c3; }
.end button { margin-top: 1rem; font-size: 1.15rem; padding: 0.9rem 2.2rem; border: 0; border-radius: 0.6rem; background: #2d7ff9; color: #fff; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }