:root {
  --flap-bg: #031f1f;
  --flap-panel: rgba(2, 15, 20, .88);
  --flap-cyan: #1ce7d2;
  --flap-lime: #b8ff39;
  --flap-purple: #a95cff;
  --flap-white: #f7fbff;
}

.flap-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  background: #021716;
}

.flap-game {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 540px;
  overflow: hidden;
  background: #101820;
  color: var(--flap-white);
  border: 2px solid rgba(28,231,210,.55);
  box-shadow: 0 0 0 5px rgba(28,231,210,.08), 0 28px 70px rgba(0,0,0,.35);
  border-radius: 20px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
  outline: none;
}

.flap-game:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  min-height: 100vh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.flap-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.flap-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.20), transparent 28%, transparent 72%, rgba(0,0,0,.42)),
    radial-gradient(circle at center, transparent 58%, rgba(0,0,0,.32) 100%);
  z-index: 2;
}

.flap-hud {
  position: absolute;
  z-index: 7;
  inset: 18px 20px auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  pointer-events: none;
}

.flap-hud-card {
  justify-self: start;
  min-width: 138px;
  padding: 10px 15px 12px;
  border-radius: 11px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  backdrop-filter: blur(7px);
}
.flap-hud-card:last-child { justify-self: end; text-align:right; }
.flap-hud-centre { justify-self:center; text-align:center; min-width:118px; opacity:.88; }
.flap-hud-card span { display:block; font-size:11px; letter-spacing:.13em; font-weight:800; color:#c9d5db; }
.flap-hud-card strong { display:block; font-size:23px; line-height:1.05; margin-top:2px; text-shadow:0 2px 8px #000; }

.flap-fullscreen {
  position:absolute;
  z-index:9;
  right:20px;
  bottom:20px;
  width:46px;height:46px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  color:white;
  background:rgba(0,0,0,.58);
  font-size:23px;
  cursor:pointer;
}

.flap-start,
.flap-pit,
.flap-finish {
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:24px;
  background:linear-gradient(180deg, rgba(0,8,12,.34), rgba(0,10,13,.82));
  backdrop-filter: blur(3px);
}
.flap-start[hidden], .flap-pit[hidden], .flap-finish[hidden],
.flap-scenario[hidden], .flap-feedback[hidden], .flap-countdown[hidden] { display:none !important; }

.flap-start-card,
.flap-pit-card,
.flap-finish-card {
  width:min(640px, 92%);
  padding:34px;
  text-align:center;
  background:linear-gradient(160deg, rgba(3,32,35,.95), rgba(5,13,27,.96));
  border:1px solid rgba(28,231,210,.45);
  border-radius:22px;
  box-shadow:0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.flap-kicker {
  color:var(--flap-lime);
  font-weight:900;
  letter-spacing:.16em;
  font-size:12px;
}
.flap-start h2,.flap-finish h2 {
  margin:8px 0 10px;
  font-size:clamp(34px,5vw,64px);
  line-height:.95;
}
.flap-start p,.flap-pit p,.flap-finish p { color:#d5e1e6; font-size:17px; line-height:1.55; }
.flap-control-copy { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0; font-size:13px; color:#cbd7dc; }
.flap-primary {
  border:0;
  border-radius:13px;
  padding:15px 28px;
  background:linear-gradient(135deg, #6938c9, #9d5cff);
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:.05em;
  cursor:pointer;
  min-height:52px;
  box-shadow:0 10px 30px rgba(111,63,200,.35);
}

.flap-countdown {
  position:absolute;
  z-index:19;
  inset:0;
  display:grid;
  place-items:center;
  font-size:clamp(90px,18vw,210px);
  font-weight:1000;
  color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.65);
  pointer-events:none;
}

.flap-scenario {
  position:absolute;
  z-index:10;
  left:50%;
  bottom:74px;
  transform:translateX(-50%);
  width:min(860px, calc(100% - 150px));
  padding:14px 18px 17px;
  background:linear-gradient(180deg, rgba(0,13,17,.90), rgba(0,19,24,.95));
  border:1px solid rgba(28,231,210,.46);
  border-radius:16px;
  box-shadow:0 14px 44px rgba(0,0,0,.52);
  backdrop-filter:blur(9px);
}
.flap-scenario-topline {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--flap-lime);
}
.flap-scenario-text {
  margin:7px auto 11px;
  max-width:760px;
  text-align:center;
  font-size:clamp(14px,1.9vw,20px);
  line-height:1.25;
  font-weight:800;
}
.flap-route-labels {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.flap-route {
  border-radius:12px;
  padding:9px 12px;
  text-align:center;
  background:rgba(255,255,255,.035);
  border:2px solid currentColor;
  line-height:1.1;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.flap-route-left { color:var(--flap-lime); box-shadow:inset 0 0 24px rgba(184,255,57,.05); }
.flap-route-right { color:#d681ff; box-shadow:inset 0 0 24px rgba(169,92,255,.06); }
.flap-route small { font-size:10px; font-weight:1000; letter-spacing:.12em; opacity:.9; }
.flap-route strong { color:white; font-size:clamp(12px,1.7vw,17px); margin-top:3px; }

.flap-feedback {
  position:absolute;
  z-index:13;
  left:50%;
  top:96px;
  transform:translateX(-50%);
  width:min(650px, calc(100% - 130px));
  padding:12px 16px;
  border-radius:13px;
  background:rgba(0,0,0,.82);
  border:1px solid rgba(255,255,255,.2);
  text-align:center;
  box-shadow:0 12px 38px rgba(0,0,0,.48);
}
.flap-feedback strong { display:block; font-size:16px; margin-bottom:3px; }
.flap-feedback span { color:#d7e0e4; font-size:13px; line-height:1.35; }

.flap-steering {
  position:absolute;
  z-index:12;
  bottom:18px;
  left:18px;
  display:flex;
  gap:10px;
}
.flap-steering button {
  width:58px;height:50px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.52);
  color:#fff;
  font-size:22px;
  font-weight:900;
  user-select:none;
  touch-action:none;
}

.flap-pit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0;
}
.flap-pit-grid div {
  text-align:left;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  border-radius:12px;
}
.flap-pit-grid span { display:block; color:#9fb1b8; font-size:12px; }
.flap-pit-grid strong { display:block; color:#fff; margin-top:3px; font-size:20px; }

.flap-finish-score {
  display:flex;
  flex-direction:column;
  margin:18px auto;
}
.flap-finish-score strong {font-size:42px;}
.flap-finish-score span {color:#aab8bd;}

.flap-status {
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}

@media (max-width: 780px) {
  .flap-shell { margin:0; }
  .flap-game { border-radius:14px; min-height:510px; aspect-ratio:auto; height:min(82vh, 690px); }
  .flap-hud { inset:10px 10px auto; gap:6px; }
  .flap-hud-card { min-width:0; padding:8px 9px; border-radius:9px; }
  .flap-hud-card span { font-size:8px; }
  .flap-hud-card strong { font-size:16px; }
  .flap-hud-centre { min-width:88px; }

  .flap-scenario {
    bottom:78px;
    width:calc(100% - 18px);
    padding:11px 10px 12px;
  }
  .flap-scenario-text { font-size:14px; }
  .flap-route-labels { gap:7px; }
  .flap-route { padding:7px; min-height:53px; }
  .flap-route strong { font-size:12px; }

  .flap-feedback {
    top:70px;
    width:calc(100% - 18px);
  }
  .flap-steering { left:50%; transform:translateX(-50%); bottom:14px; gap:22px; }
  .flap-steering button { width:72px; height:56px; background:rgba(0,0,0,.66); }
  .flap-fullscreen { right:10px; bottom:15px; width:42px; height:42px; }

  .flap-start-card,.flap-pit-card,.flap-finish-card { padding:24px 18px; width:96%; }
  .flap-pit-grid { grid-template-columns:1fr; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .flap-game { min-height:100vh; height:100vh; border-radius:0; }
  .flap-scenario { bottom:58px; }
  .flap-steering button { height:42px; width:62px; }
  .flap-steering { bottom:8px; }
  .flap-fullscreen { bottom:8px; }
}

/* v0.3.0 review fixes */
.flap-game,.flap-game *{box-sizing:border-box}.flap-game [class*="card"],.flap-game .flap-scenario,.flap-game .flap-feedback,.flap-game .flap-route,.flap-game .flap-hud-card,.flap-game .flap-fullscreen,.flap-game .flap-steering button{color:#fff!important}.flap-game [class*="card"] p,.flap-game [class*="card"] span,.flap-game .flap-feedback span,.flap-game .flap-scenario-topline,.flap-game .flap-route small,.flap-game .flap-route strong{color:#fff!important}.flap-scenario{top:82px;bottom:auto;width:min(760px,calc(100% - 250px));padding:10px 14px 12px;pointer-events:none}.flap-scenario-text{margin:5px auto 8px;font-size:clamp(13px,1.55vw,17px)}.flap-route{min-height:44px;padding:6px 10px;background:rgba(0,0,0,.66)}.flap-feedback{top:auto;left:auto;right:18px;bottom:78px;transform:none;width:min(330px,31vw);padding:10px 12px;pointer-events:none;background:rgba(0,0,0,.82)}.flap-steering{bottom:16px;left:18px;gap:14px}.flap-steering button{width:76px;height:62px;font-size:28px;background:rgba(0,0,0,.72);border:2px solid rgba(255,255,255,.42)}.flap-steering button:active{transform:scale(.96);background:rgba(22,104,99,.88)}@media(max-width:780px){.flap-scenario{top:62px;bottom:auto;width:calc(100% - 16px);padding:8px 8px 9px}.flap-scenario-text{font-size:12.5px;line-height:1.2;margin:4px auto 6px}.flap-route{min-height:40px;padding:5px 6px}.flap-route strong{font-size:11px}.flap-feedback{right:8px;left:auto;bottom:86px;top:auto;width:min(265px,calc(100% - 180px));padding:8px 9px}.flap-feedback strong{font-size:12px}.flap-feedback span{font-size:10.5px}.flap-steering{left:10px;transform:none;bottom:10px;gap:10px}.flap-steering button{width:78px;height:64px;font-size:28px}}@media(orientation:landscape) and (max-height:560px){.flap-scenario{top:48px;width:min(690px,calc(100% - 220px));padding:6px 10px}.flap-scenario-text{font-size:11.5px;margin:3px auto 5px}.flap-route{min-height:35px;padding:3px 6px}.flap-steering button{width:72px;height:48px}.flap-feedback{bottom:62px;width:300px}}

.flap-build-badge{position:absolute;z-index:30;left:14px;bottom:14px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.45);padding:5px 8px;border-radius:8px;font:800 11px/1 system-ui;letter-spacing:.08em;pointer-events:none;opacity:.88}.flap-game:fullscreen .flap-build-badge{left:16px;bottom:16px}@media(max-width:780px){.flap-build-badge{left:auto;right:10px;top:10px;bottom:auto;font-size:10px}}