/* Stage 1 dialog: braking-reaction game ("Você aguentaria o cockpit?"). */

.dialog--cockpit { width: min(1040px, calc(100% - 28px)); }
.dialog--cockpit .dialog-content { padding: 14px; }

.cockpit { position: relative; }

/* Stage ------------------------------------------------------------------- */
.cockpit-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  max-height: max(340px, calc(100svh - 330px)); /* keep the footer actions on screen on short laptops */
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: #050708;
}

.cockpit-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050708;
  transition: filter 0.7s ease, transform 0.35s var(--ease-out);
}

.cockpit-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 7, 8, 0.82) 0%, rgba(5, 7, 8, 0.2) 52%, transparent 78%),
    linear-gradient(0deg, rgba(5, 7, 8, 0.8) 0%, transparent 40%);
  transition: opacity 0.5s;
}
.cockpit:not([data-phase="intro"]) .cockpit-grade { opacity: 0.55; }

/* Head (title block, overlaid on desktop) --------------------------------- */
.cockpit-head {
  position: absolute;
  top: 28px;
  left: 30px;
  z-index: 5;
  width: min(46%, 480px);
  transition: opacity 0.4s;
}
.cockpit:not([data-phase="intro"]) .cockpit-head { opacity: 0; pointer-events: none; }

.cockpit-kicker {
  font: 600 clamp(13px, 1.3vw, 17px)/1 var(--font-label);
  letter-spacing: 0.16em;
  color: #e5eae6;
}
.cockpit-kicker span { color: var(--lime); font-weight: 700; }

.cockpit-head h2 {
  margin-top: 14px;
  font: 800 clamp(30px, 3.7vw, 54px)/1.02 var(--font-body);
  letter-spacing: -0.02em;
}
.cockpit-head h2 span { display: block; color: var(--lime); }
.cockpit-head h2:focus { outline: none; }

.cockpit-lead {
  margin-top: 14px;
  max-width: 40ch;
  color: #dfe5e1;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.5;
}

.cockpit-chips { display: grid; gap: 10px; justify-items: start; margin-top: 20px; }
.cockpit-chips li {
  padding: 9px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(10, 14, 16, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  color: #e5eae6;
}

/* Badge + trial counter --------------------------------------------------- */
.cockpit-badge {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 4;
  padding: 7px 13px;
  border: 1px solid rgba(181, 245, 52, 0.55);
  border-radius: 999px;
  background: rgba(10, 14, 16, 0.75);
  font: 700 11px/1 var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  opacity: 0;
  transition: opacity 0.3s;
}
.cockpit:not([data-phase="intro"]) .cockpit-badge { opacity: 1; }
.cockpit[data-condition="dehydrated"] .cockpit-badge {
  border-color: rgba(255, 176, 46, 0.7);
  color: #ffb02e;
}

.cockpit-trials {
  position: absolute;
  top: 52px;
  left: 20px;
  z-index: 4;
  font: 600 12px/1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cdd3d2;
}

/* Five lights ------------------------------------------------------------- */
.lights {
  position: absolute;
  top: 66px;
  right: 22px;
  z-index: 4;
  display: flex;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(8, 10, 11, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lights li {
  width: clamp(26px, 4.3vw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3c1616, #150707 72%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05);
  transition: background 0.1s, box-shadow 0.1s;
}
.lights li.on {
  background: radial-gradient(circle at 35% 30%, #ffa3a3, #f12b2b 48%, #9d0f0f 100%);
  box-shadow: 0 0 20px 3px rgba(255, 50, 50, 0.65), inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.cockpit[data-signal="on"] .lights {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(181, 245, 52, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45);
}

.cockpit-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.cockpit[data-signal="on"] .cockpit-flash {
  box-shadow: inset 0 0 140px rgba(181, 245, 52, 0.55);
  animation: signal-flash 0.5s ease-out;
}
.cockpit[data-phase="braking"] .cockpit-flash,
.cockpit[data-phase="miss"] .cockpit-flash {
  opacity: 1;
  box-shadow: inset 0 -90px 130px -50px rgba(255, 60, 40, 0.4);
}
@keyframes signal-flash {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

/* Callout ------------------------------------------------------------------ */
.cockpit-callout {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 6;
  max-width: 92%;
  font: 800 clamp(20px, 2.4vw, 30px)/1 var(--font-body);
  letter-spacing: -0.01em;
  color: #e9eee9;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.cockpit[data-signal="on"] .cockpit-callout {
  font-size: clamp(54px, 10vw, 140px);
  color: var(--lime);
  text-shadow: 0 0 46px rgba(181, 245, 52, 0.6), 0 4px 0 rgba(0, 0, 0, 0.35);
  animation: callout-pop 0.22s var(--ease-out);
}
.cockpit[data-phase="braking"] .cockpit-callout {
  font-size: clamp(34px, 5.5vw, 78px);
  color: var(--lime);
}
.cockpit[data-phase="miss"] .cockpit-callout {
  font-size: clamp(34px, 6vw, 84px);
  color: #ff6a52;
}
@keyframes callout-pop {
  from { transform: translate(-50%, -50%) scale(0.78); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* HUD -------------------------------------------------------------------- */
.cockpit-hud {
  position: absolute;
  bottom: 22px;
  left: 24px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  opacity: 0;
  transition: opacity 0.3s;
}
.cockpit:not([data-phase="intro"]) .cockpit-hud { opacity: 1; }
.hud-speed b {
  font: 800 clamp(40px, 6vw, 84px)/0.9 var(--font-label);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hud-speed small,
.hud-gear small,
.hud-brake small {
  display: block;
  font: 600 10px/1 var(--font-label);
  letter-spacing: 0.14em;
  color: #b9c3c0;
}
.hud-speed small { display: inline; margin-left: 6px; font-size: 13px; }
.hud-gear b { font: 800 clamp(24px, 3vw, 40px)/1 var(--font-label); color: var(--lime); }
.hud-brake span {
  display: block;
  width: clamp(80px, 11vw, 150px);
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.hud-brake i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--lime), #ffb02e 55%, #ff4a2e);
}

/* Action button (Começar / FREAR) --------------------------------------------- */
.cockpit-action {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 6;
  min-width: clamp(170px, 24vw, 300px);
  padding: clamp(14px, 1.7vw, 20px) 28px;
  border: 3px solid rgba(181, 245, 52, 0.6);
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(181, 245, 52, 0.18), 0 12px 40px rgba(181, 245, 52, 0.32);
  font: 800 clamp(20px, 2.5vw, 34px)/1 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a1103;
  touch-action: manipulation;
  transition: transform 0.12s var(--ease-out), box-shadow 0.2s;
}
.cockpit-action:active { transform: scale(0.97); }
.cockpit[data-phase="armed"] .cockpit-action,
.cockpit[data-phase="signal"] .cockpit-action { font-size: clamp(24px, 3.2vw, 44px); }
.cockpit[data-signal="on"] .cockpit-action {
  box-shadow: 0 0 0 7px rgba(181, 245, 52, 0.4), 0 12px 56px rgba(181, 245, 52, 0.6);
  animation: action-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes action-pulse {
  to { transform: scale(1.04); }
}
.cockpit:not([data-phase="intro"]):not([data-phase="armed"]):not([data-phase="signal"]) .cockpit-action { display: none; }

/* Sound ------------------------------------------------------------------- */
.cockpit-sound {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(10, 14, 16, 0.75);
}
.cockpit-sound svg { width: 20px; height: 20px; fill: #e5eae6; }

/* Impairment: simulated 2% dehydration -------------------------------------------- */
.cockpit-impair {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, transparent 26%, rgba(0, 0, 0, 0.66) 100%);
  transition: opacity 0.8s;
}
.cockpit[data-condition="dehydrated"] .cockpit-impair {
  opacity: 1;
  animation: impair-pulse 3.2s ease-in-out infinite;
}
.cockpit[data-condition="dehydrated"] .cockpit-video {
  filter: blur(1.5px) saturate(0.7) contrast(0.9) brightness(0.9);
  animation: impair-sway 5.5s ease-in-out infinite;
}
.cockpit[data-condition="dehydrated"] .lights li.on { filter: saturate(0.7) brightness(0.8); }
@keyframes impair-pulse {
  50% { opacity: 0.78; }
}
@keyframes impair-sway {
  0%, 100% { transform: scale(1.03) translate(0, 0); }
  50% { transform: scale(1.03) translate(-0.6%, 0.4%); }
}
.cockpit[data-phase="braking"] .cockpit-video { transform: scale(1.04) translateY(1%); }

/* Panels ---------------------------------------------------------------------- */
.cockpit-panel {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 7, 8, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cockpit-panel[hidden] { display: none; }

.panel-card {
  display: grid;
  gap: 10px;
  width: min(580px, 100%);
  max-height: 100%;
  padding: 24px 26px;
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: rgba(12, 16, 18, 0.94);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.panel-kicker {
  font: 700 11px/1 var(--font-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.panel-card--fault .panel-kicker { color: #ff9a5c; }
.panel-title { font: 800 clamp(24px, 3vw, 34px)/1.1 var(--font-body); }
.panel-big {
  font: 800 clamp(48px, 7vw, 76px)/1 var(--font-label);
  font-variant-numeric: tabular-nums;
  color: var(--lime);
}
.panel-big small { font-size: 0.32em; font-weight: 600; letter-spacing: 0.06em; color: #cdd3d2; }
.panel-big--delta { color: #ffb02e; }
.panel-card .panel-text { margin: 0; color: #cdd5d1; font-size: 15px; line-height: 1.55; }
.panel-text b { color: #fff; }
.panel-text--warn { color: #ffcf8a; }
.panel-foot { margin: 0; font-size: 12px; line-height: 1.5; color: #8c9893; }
.panel-card .button { justify-self: start; margin-top: 6px; }

.bars { display: grid; gap: 12px; margin: 4px 0 2px; }
.bar {
  display: grid;
  grid-template-columns: minmax(96px, 138px) 1fr 74px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.bar b { text-align: right; font-variant-numeric: tabular-nums; }
.bar em { display: block; font-style: normal; font-size: 11px; color: #8c9893; }
.bar-track { height: 12px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.1); }
.bar-track i { display: block; height: 100%; border-radius: 6px; background: var(--lime); }
.bar--warn .bar-track i { background: linear-gradient(90deg, var(--lime), #ffb02e 62%, #ff5a3c); }

.cockpit-note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: #778c7d;
}

/* Episode disclosure under the game -------------------------------------------- */
.episode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}
.episode-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.episode-toggle:hover { border-color: var(--lime); }
.episode-toggle[aria-expanded="true"] { border-color: var(--lime); color: var(--lime); }
.episode-panel[hidden] { display: none; }

/* Phone ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .dialog--cockpit .dialog-content { padding: 10px; }

  .cockpit-head { position: static; width: auto; padding: 6px 4px 14px; }
  .cockpit-head h2 { margin-top: 10px; }
  .cockpit-chips { grid-auto-flow: column; justify-content: start; gap: 8px; margin-top: 14px; }
  .cockpit-chips li { padding: 7px 11px; font-size: 11px; }
  .cockpit:not([data-phase="intro"]) .cockpit-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .cockpit-stage { aspect-ratio: 4 / 5; max-height: none; border-radius: 16px; }
  .cockpit-video { object-position: 50% 60%; }
  .lights { top: 62px; left: 50%; right: auto; transform: translateX(-50%); }
  .cockpit-callout { top: 40%; }
  .cockpit-hud { bottom: 94px; left: 16px; }
  .cockpit-action {
    right: 14px;
    bottom: 14px;
    left: 14px;
    min-width: 0;
    padding: 18px;
  }
  .cockpit-badge { left: 14px; font-size: 10px; }
  .cockpit-trials { left: 16px; }
  .cockpit-sound { right: 14px; }
  .panel-card { padding: 20px 18px; }
  .bar { grid-template-columns: 1fr 64px; }
  .bar > span:first-child { grid-column: 1 / -1; }
  .bar-track { grid-column: 1; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .cockpit-stage { aspect-ratio: 16 / 9; max-height: calc(100svh - 150px); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cockpit[data-condition="dehydrated"] .cockpit-video,
  .cockpit[data-condition="dehydrated"] .cockpit-impair { animation: none; }
}