/* Window: a cabin wall with one big window on the left, the flight panel on the right. */
.gamecard.window {
  --wall: #ECE6DD;
  --wall-2: #E2DACE;
  --well: #D6CDBF;
  --red: #E0412F;
  --red-edge: #A92C1E;
  container-type: size;
  container-name: cabin;
  display: grid;
  grid-template-rows: 54% 1fr;
  color: var(--ink);
  background: linear-gradient(to bottom, #F1ECE4, var(--wall) 70%);
}

.pill.red { --edge: var(--red-edge); background: var(--red); color: #FFFFFF; }
.pill.white { --edge: #CFC6B8; }

/* ---------- The cabin and its window ---------- */
.cabin {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* The moulded panel the window sits in */
.surround {
  display: grid;
  place-items: center;
  height: 94%;
  aspect-ratio: 0.78;
  border-radius: 44% / 32%;
  background: #F6F2EC;
  box-shadow: inset 0 14px 30px rgba(70, 55, 35, 0.16), inset 0 -2px 0 rgba(255, 255, 255, 0.8);
}
.win {
  position: relative;
  width: 84%;
  height: 88%;
  padding: 9px;
  border-radius: 42% / 30%;
  background: var(--well);
  box-shadow: inset 0 6px 14px rgba(40, 30, 15, 0.35);
}
.pane {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 40% / 28%;
  background: #0E2A45;
  isolation: isolate;
}

/* The ground drifts slowly, as if the plane is flying over it */
.ground { position: absolute; inset: 0; transform-origin: 50% 22%; }
.ground img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The climb: the close view sinks away and the higher view settles in */
.ground .far { opacity: 0; transform: scale(1.18) translateY(5%); transition: opacity 900ms ease, transform 1700ms cubic-bezier(.25,.7,.2,1); }
.ground .near { transform-origin: 50% 22%; transition: opacity 1000ms ease 150ms, transform 1700ms cubic-bezier(.25,.7,.2,1); }
.win.climbed .ground .far { opacity: 1; transform: none; }
.win.climbed .ground .near { opacity: 0; transform: scale(0.86) translateY(-4%); }

/* High altitude haze, a wing, a glare on the glass */
.pane::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 50px 8px rgba(70, 100, 130, 0.35), inset 0 0 12px rgba(40, 60, 80, 0.3); }
.pane::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(170, 205, 240, 0.35)); }
/* The wing: a full-frame layer, root at the right, tip reaching toward the horizon */
.wing { position: absolute; right: 0; bottom: 0; z-index: 4; width: 80%; height: auto; transform-origin: 100% 75%; pointer-events: none; }
/* Wings flex a little in flight */
@media (prefers-reduced-motion: no-preference) {
  .win.open .wing { animation: flex 4.6s ease-in-out infinite; }
}
@keyframes flex { 50% { transform: translateY(2px) rotate(-0.35deg); } }
.glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 38%, transparent 46%, transparent 58%, rgba(255, 255, 255, 0.08) 62%, transparent 66%); }

/* The shade: down before take-off, slides up to show the view */
.shade {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: repeating-linear-gradient(to bottom, #F4EFE7 0 14px, #EDE7DD 14px 15px);
  transition: transform 1000ms cubic-bezier(.6,0,.2,1);
}
.tab { position: absolute; left: 50%; bottom: 10%; width: 34%; height: 12px; border-radius: 12px; background: #DCD3C6; transform: translateX(-50%); box-shadow: inset 0 2px 3px rgba(40, 30, 15, 0.2); }
.win.open .shade { transform: translateY(-104%); }

@media (prefers-reduced-motion: no-preference) {
  .ground { animation: fly 46s ease-in-out infinite alternate; }
  .win.bump { animation: bump 500ms ease; }
}
@keyframes fly { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes bump { 30% { transform: translateY(3px); } 60% { transform: translateY(-2px); } }

/* ---------- The side panel ---------- */
.side { position: relative; min-height: 0; }
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px 20px 20px; }

.kicker { margin: 0; font-size: 15px; font-weight: 700; color: var(--red); }
.title { margin: 2px 0 10px; font-size: clamp(60px, 18cqw, 84px); font-weight: 800; line-height: 0.85; letter-spacing: -0.07em; }
.lede { margin: 0 0 18px; max-width: 32ch; font-size: 16px; font-weight: 500; line-height: 1.4; color: #4A4640; }
.chips:not(:empty) { margin-top: 14px; }
.window .chip { background: #FFFFFF; }
.window .chip.hot { background: var(--red); color: #FFFFFF; }
.window .chip.gold { background: #FFD23F; color: #1A1300; }


.actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.actions .pill { min-height: 54px; }

/* Flying: route dots and points */
.hud { display: flex; justify-content: space-between; align-items: flex-start; }
.legs { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.dots { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.dots li { width: 22px; height: 6px; border-radius: 6px; background: var(--wall-2); transition: background-color 300ms ease, width 300ms cubic-bezier(.2,.8,.2,1); }
.dots li.done { background: #1A1A1A; }
.dots li.now { width: 34px; background: var(--red); }
.leg { margin: 0; font-size: 13px; font-weight: 600; color: #6F6A62; }
.score { margin: 0; display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; }
.score span { display: inline-block; font-size: 44px; font-variant-numeric: tabular-nums; transform-origin: right center; }
.score small { margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #6F6A62; }
.score.pop span { animation: pop 420ms cubic-bezier(.2,.9,.3,1.4); }
@keyframes pop { 30% { transform: scale(1.2); } }

.ask { margin: 0; font-size: clamp(24px, 7cqw, 32px); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }


.reveal { display: grid; gap: 6px; }
.verdict { justify-self: start; margin: 0; padding: 6px 12px; border-radius: 999px; background: #DDF5E7; color: #11803A; font-size: 14px; font-weight: 800; }
.verdict.miss { background: #FDE3E0; color: #B42318; }
.over-name { margin: 2px 0 6px; font-size: clamp(22px, 6.4cqw, 30px); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.map { width: 100%; height: auto; border-radius: 14px; background: #DCE7EE; }
.map .land { fill: #F6F2EC; stroke: #C9BFB1; stroke-width: 0.25; }
.map .hit { fill: var(--red); }
.map .pin { fill: #1A1A1A; stroke: #FFFFFF; stroke-width: 1.2; }
.map .ping { fill: none; stroke: var(--red); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .map .ping { animation: ping 1.6s ease-out infinite; }
  .reveal:not([hidden]) { animation: rise 500ms cubic-bezier(.2,.8,.2,1); }
}
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* The four answers */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt {
  --edge: #D3CABC;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--edge), 0 1px 2px rgba(40, 30, 20, 0.06), 0 10px 20px -14px rgba(40, 30, 20, 0.35);
  transition: transform 280ms cubic-bezier(.3, 1.35, .5, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1), background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.opt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1px 0 var(--edge), 0 2px 4px rgba(40, 30, 20, 0.06), 0 18px 28px -16px rgba(40, 30, 20, 0.4); }
.opt:active:not(:disabled) { transform: scale(0.98); transition-duration: 80ms; box-shadow: 0 1px 0 var(--edge); }
.opt:disabled { cursor: default; }
.opt .k { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--wall); color: #7A746B; font-size: 13px; font-weight: 700; }
.opt .n { line-height: 1.1; text-wrap: balance; }
.opt.wrong { --edge: #E9C6C0; background: #FBE9E6; color: #B42318; text-decoration: line-through; opacity: 0.8; }
.opt.right { --edge: #11803A; background: var(--good); color: #FFFFFF; }
.opt.right .k { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.opt.faded { opacity: 0.45; }
@media (hover: none) { .opt .k { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .opt.wrong { animation: shake 380ms ease; }
  .opt.right { animation: bounce 380ms cubic-bezier(.2,.9,.3,1.4); }
}
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes bounce { 40% { transform: scale(1.04); } }
.next { min-height: 56px; }

/* Landed */
.big { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; font-weight: 800; line-height: 0.85; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; }
.big span { font-size: clamp(76px, 22cqw, 112px); }
.big small { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #6F6A62; }
.line { margin: 12px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.recap { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.recap li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #FFFFFF; font-size: 15px; font-weight: 600; }
.recap small { display: block; font-size: 13px; font-weight: 500; color: #6F6A62; }
.recap b { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 14px; }
.recap .p2 { background: #DDF5E7; color: #11803A; }
.recap .p1 { background: #FFF1C2; color: #7A5B00; }
.recap .p0 { background: #FDE3E0; color: #B42318; }

/* Panels arrive in sequence */
@media (prefers-reduced-motion: no-preference) {
  .panel.enter > div > *, .panel.enter > .actions { animation: rise 600ms cubic-bezier(.2,.8,.2,1) both; }
  .panel.enter > div > :nth-child(2) { animation-delay: 70ms; }
  .panel.enter > div > :nth-child(3) { animation-delay: 140ms; }
  .panel.enter > div > :nth-child(4) { animation-delay: 210ms; }
  .panel.enter > div > :nth-child(n+5) { animation-delay: 280ms; }
  .panel.enter > .actions { animation-delay: 340ms; }
}

/* ---------- Wide: the window takes the left, the panel the right ---------- */
@media (min-width: 900px) {
  .gamecard.window { grid-template-rows: 1fr; grid-template-columns: 1.15fr 1fr; }
}
@container cabin (min-width: 860px) {
  .surround { height: 86%; }
  .panel { justify-content: center; gap: 28px; padding: 48px 56px 48px 24px; }
  .title { font-size: 120px; }
  .lede { font-size: 19px; }
  .options { grid-template-columns: 1fr; gap: 10px; }
  .opt { min-height: 64px; font-size: 19px; padding: 12px 18px; }
  .ask { font-size: 40px; }
  .score span { font-size: 60px; }
  .big span { font-size: 140px; }
  .over-name { font-size: 34px; }
}
.float.plus { color: var(--red); font-size: 30px; }

/* ---------- Telling the player what is going on ---------- */
/* Tries: two planes, one greys out on a miss */
.tries-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tries { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tries li { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--red); color: #FFFFFF; transition: background-color 300ms ease, color 300ms ease, transform 300ms cubic-bezier(.2,.9,.3,1.4); }
.tries li svg { width: 20px; height: 20px; transform: rotate(45deg); }
.tries li.used { background: var(--wall-2); color: #B3AA9C; transform: scale(0.9); }
.hint { margin: 0; font-size: 15px; font-weight: 600; color: #6F6A62; }
.hint b { color: var(--ink); }
.hint.last b { color: var(--red); }

/* Inside the window: which view this is, and a banner when the plane climbs */
/* In-flight display at the top of the window: view, tries left, and the route across today's five flights */
.ife { position: absolute; top: 6%; left: 50%; z-index: 7; width: min(58%, 220px); padding: 7px 9px 8px; border-radius: 12px; background: rgba(12, 22, 36, 0.58); color: #FFFFFF; transform: translateX(-50%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 400ms ease; }
.win:not(.open) .ife { opacity: 0; }
.ife-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.viewtag { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.viewtag i { width: 6px; height: 6px; border-radius: 50%; background: #7CE0A3; box-shadow: 0 0 0 2px rgba(124, 224, 163, 0.25); }
.viewtag.wide i { background: #FFD23F; box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.25); }
.ife-tries { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pips { display: flex; gap: 4px; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: #FF6B57; box-shadow: 0 0 0 2px rgba(255, 107, 87, 0.25); transition: background-color 300ms ease, box-shadow 300ms ease; }
.pips i.used { background: rgba(255, 255, 255, 0.25); box-shadow: none; }
.route { position: relative; height: 12px; margin-top: 6px; }
.route-line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.route-line i { display: block; height: 100%; width: 0; border-radius: 4px; background: #FF6B57; transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.route-stops { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0; list-style: none; }
.route-stops li { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: background-color 300ms ease; }
.route-stops li.done { background: #FF6B57; }
.route-plane { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #FFFFFF; color: var(--red); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: left 900ms cubic-bezier(.2,.8,.2,1); }
.route-plane svg { width: 10px; height: 10px; transform: rotate(90deg); }
.route-labels { display: flex; justify-content: space-between; margin: 4px -3px 0; padding: 0; list-style: none; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.route-labels li:nth-child(2) { text-align: center; }

.toast { position: absolute; top: 21%; left: 50%; z-index: 7; margin: 0; padding: 10px 16px; border-radius: 14px; background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(10, 20, 40, 0.5); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
.toast span { color: var(--red); }
.toast.show { animation: toast 2600ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }

/* Start screen: three steps in one row */
.how { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.how li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.how-i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FBE9E6; color: var(--red); }
.how-i svg { width: 16px; height: 16px; }
@media (max-width: 899px) {
  .how li { font-size: 13px; padding: 5px 10px 5px 5px; }
  .how-i { width: 24px; height: 24px; }
}
@media (max-width: 520px) {
  .ife { width: 70%; }
}

/* ---------- Short phones ----------
   Most phones once the browser's bars take their share: a smaller window and a tighter panel, so the start button and
   all four answers fit. On a tiny screen the panel scrolls as a last resort rather than cutting them off. */
@media (max-width: 899px) {
  .panel { overflow-y: auto; overscroll-behavior: contain; }
  /* Even a tall iPhone needs a tighter start screen than the big title allows, or the start button drops off */
  .panel { gap: 12px; padding: 16px 18px 18px; }
  .title { font-size: 60px; margin-bottom: 8px; }
  .lede { margin-bottom: 12px; font-size: 15px; }
}
@media (max-width: 899px) and (max-height: 780px) {
  .gamecard.window { grid-template-rows: 40% 1fr; }
  .panel { gap: 10px; padding: 14px 18px 16px; }
  .title { font-size: 52px; margin-bottom: 6px; }
  .lede { margin-bottom: 8px; font-size: 15px; }
  .score span { font-size: 36px; }
  .opt { min-height: 48px; }
  /* The display inside the smaller window: just the view, the tries as dots (the panel spells them out) and the route */
  .ife { width: 84%; }
  #ifeTries, .route-labels { display: none; }
}
/* Very short phones (Android with bigger system text or the three-button bar): the window is too small for the
   display inside it, so the view gets the whole window. Where even that isn't enough, the start screen drops its
   one-line intro, since the three steps below it say the same. */
@media (max-width: 899px) and (max-height: 660px) {
  .gamecard.window { grid-template-rows: 38% 1fr; }
  .ife { display: none; }
  .opt { min-height: 44px; }
}
@media (max-width: 359px) and (max-height: 660px), (max-width: 899px) and (max-height: 580px) {
  #lede { display: none; }
}
@media (max-width: 899px) and (max-height: 580px) {
  .gamecard.window { grid-template-rows: 30% 1fr; }
  .panel { padding: 12px 16px 14px; }
  .title { font-size: 44px; }
  .score span { font-size: 30px; }
}
/* Tall phones: the start and result screens borrow a little of the window, which grows back when the shade lifts */
@media (max-width: 899px) and (min-height: 781px) {
  .gamecard.window:has(#intro:not([hidden]), #over:not([hidden])) { grid-template-rows: 44% 1fr; }
}
/* Phones: after an answer the map stays short enough for "Next flight" to fit under it (the ocean colour fills the
   sides), and the buttons stay on screen whatever happens above them: Next while playing, Share on the result,
   where the round list scrolls under it */
@media (max-width: 899px) {
  .map { max-height: 96px; }
  .over-name { font-size: 22px; }
  .score span { font-size: 38px; }
  #play #next { position: sticky; bottom: 0; z-index: 3; }
  #over.panel { padding-bottom: 0; }
  #over .actions { position: sticky; bottom: 0; z-index: 3; margin: 0 -18px; padding: 14px 18px 18px; background: linear-gradient(rgba(236, 230, 221, 0), var(--wall) 14px); }
}