/* Eva's & Max's Aeroplane – the cockpit (bottom part of the screen) and the
   #frame overlay over the window view. Three looks: .ck-a toy plane,
   .ck-b little propeller plane, .ck-c jet airliner. Layout follows the
   cockpit's own size (container queries): wide (tablets), tall (phones in
   portrait) and short (phones in landscape). */

.ck {
  --ink: #3d2c55;
  --ink-soft: #7d6c93;
  --gap: clamp(6px, 2.2cqh, 16px);
  --pad: clamp(8px, 3.2cqh, 22px);
  --g: min(42cqh, 15cqw);
  --scr: min(88cqh, 27cqw);
  --btn: clamp(56px, 17cqh, 78px);
  --thr-w: clamp(58px, 7cqw, 76px);
  --travel: 13cqh;
  position: absolute;
  inset: 0;
  container: ck / size;
  font-family: 'Fredoka', ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.ck *, .ck *::before, .ck *::after { box-sizing: border-box; }
.ck-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ck-svg text { font-family: inherit; }

/* ---------- layout: wide (default) ---------- */

.ck-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'btns instL yoke instR thr';
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--pad) + 6px) var(--pad) var(--pad);
  overflow: hidden;
}
/* The dashboard's backdrop starts --lift below the top, so what stands out
   above it (instruments, yoke, buttons) floats over the window view. */
.ck-dash { position: absolute; left: 0; right: 0; bottom: 0; top: var(--lift, 0px); z-index: 0; }
.ck-btns { grid-area: btns; display: flex; flex-direction: column; gap: calc(var(--gap) + 6px); align-self: center; z-index: 2; }
.ck-instL { grid-area: instL; }
.ck-instR { grid-area: instR; }
.ck-inst { display: flex; flex-direction: column; gap: var(--gap); align-items: center; justify-content: center; z-index: 1; }
.ck-gauge { width: var(--g); height: var(--g); flex: none; border-radius: 50%; filter: drop-shadow(0 5px 6px rgba(61, 44, 85, 0.22)); }
.ck-screen { width: var(--scr); aspect-ratio: 1.3; flex: none; }

/* ---------- layout: tall (phones in portrait, tablets in portrait) ---------- */

@container ck (aspect-ratio < 1.9) {
  .ck .ck-panel { --g: min(22.5cqw, 27cqh); --scr: min(46cqw, 34cqh * 1.3); --btn: clamp(56px, 10cqh, 72px); --travel: 9cqh; --thr-w: 60px; }
  .ck .ck-panel {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'instL instL instR instR' 'btns yoke yoke thr';
    row-gap: calc(var(--gap) * 0.6);
  }
  .ck .ck-inst { flex-direction: row; }
  .ck .ck-instL { justify-self: end; }
  .ck .ck-instR { justify-self: start; }
  .ck .ck-thr { align-self: stretch; }
}

/* ---------- layout: short (phones in landscape) ---------- */

@container ck (aspect-ratio >= 1.9) and (max-height: 230px) {
  .ck .ck-panel { --g: min(76cqh, 10.5cqw); --scr: min(72cqh * 1.3, 22cqw); --btn: 56px; --gap: 6px; --pad: 6px; --travel: 10cqh; --thr-w: 56px; }
  .ck .ck-panel { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'btns yoke instL instR thr'; padding-top: 10px; }
  .ck .ck-inst { flex-direction: row; }
  .ck .ck-btns { display: grid; grid-template-columns: repeat(2, var(--btn)); gap: 8px 6px; }
  .ck .ck-btns .ck-engine { grid-column: 1 / 3; width: 100%; }
  .ck .ck-thr { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; gap: 6px; align-self: stretch; align-items: stretch; margin-right: 6px; }
  .ck .ck-thr .ck-plus { grid-column: 1; grid-row: 1; align-self: start; }
  .ck .ck-thr .ck-minus { grid-column: 1; grid-row: 2; align-self: end; }
  .ck .ck-thr .ck-thr-track { grid-column: 2; grid-row: 1 / 3; height: auto; }
  .ck .ck-thr .ck-tbtn { margin-bottom: 6px; }
}

/* ---------- the yoke ---------- */

.ck-yoke-zone {
  grid-area: yoke;
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  min-height: 0;
  container: yoke / size;
  touch-action: none;
  cursor: grab;
}
.ck-grab .ck-yoke-zone { cursor: grabbing; }
.ck-yoke-move {
  --p: 0;
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(88cqw, 118cqh);
  aspect-ratio: 300 / 170;
  transform: translate(-50%, -50%) translateY(calc(var(--p) * var(--travel))) scale(calc(1 + var(--p) * 0.07));
  will-change: transform; /* its own layer: moving it every frame needs no repaint */
  pointer-events: none;
}
.ck-yoke-rot { --r: 0; position: absolute; inset: 0; transform-origin: 50% 59%; transform: rotate(calc(var(--r) * 38deg)); will-change: transform; }
.ck-yoke-svg { filter: drop-shadow(0 8px 8px rgba(61, 44, 85, 0.3)); }
.ck-shaft {
  position: absolute;
  left: 50%;
  top: 59%;
  width: 17%;
  height: 400%;
  transform: translateX(-50%);
  border-radius: 12px 12px 0 0;
}

/* ---------- the throttle ---------- */

.ck-thr { grid-area: thr; display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) + 2px); height: 100%; min-height: 0; --t: 0; z-index: 2; }
.ck-thr-track {
  position: relative;
  flex: 1;
  min-height: 70px;
  width: var(--thr-w);
  border-radius: 20px;
  touch-action: none;
  cursor: ns-resize;
}
.ck-thr-track::before { /* the slot */
  content: '';
  position: absolute;
  left: 50%;
  top: 9%;
  bottom: 9%;
  width: 22%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: rgba(61, 44, 85, 0.35);
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.3);
}
.ck-thr-hi, .ck-thr-lo { position: absolute; left: 0; right: 0; text-align: center; font-size: clamp(14px, 4cqh, 22px); line-height: 1; opacity: 0.85; pointer-events: none; }
.ck-thr-hi { top: 4px; }
.ck-thr-lo { bottom: 4px; }
.ck-thr-handle {
  --hh: 46px;
  position: absolute;
  left: -6px;
  right: -6px;
  height: var(--hh);
  top: calc((1 - var(--t)) * (100% - var(--hh)));
  border-radius: 16px;
  pointer-events: none;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.ck-thr-auto .ck-thr-handle { animation: ck-glow 1s ease-in-out infinite alternate; }

/* ---------- buttons ---------- */

.ck-btn {
  --b: #fff;
  --bd: #e3d3bc;
  position: relative;
  display: grid;
  place-items: center;
  min-width: var(--btn);
  min-height: var(--btn);
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 22px;
  font: inherit;
  font-size: calc(var(--btn) * 0.48);
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%), var(--b);
  box-shadow: 0 6px 0 var(--bd), 0 10px 14px rgba(61, 44, 85, 0.2);
  transition: transform 0.08s, box-shadow 0.08s, background-color 0.2s;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ck-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--bd), 0 4px 8px rgba(61, 44, 85, 0.2); }
.ck-btn:focus-visible { outline: 4px solid rgba(77, 171, 247, 0.7); outline-offset: 3px; }
.ck-ico { line-height: 1; }
.ck-lamp {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d14848;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.ck-tbtn { --btn: 56px; font-size: 34px; line-height: 1; border-radius: 50%; }
.ck-tbtn .ck-lamp, .ck-horn .ck-lamp { display: none; }
.ck-engine { --b: #ffd43b; --bd: #dba600; animation: ck-invite 1.2s ease-in-out infinite; }
.ck-engine-on .ck-engine { --b: #4cc76a; --bd: #2f9a4c; animation: none; }
.ck-engine-on .ck-engine .ck-lamp { background: #b2ff9e; box-shadow: 0 0 0 2px #fff, 0 0 10px 3px rgba(140, 255, 120, 0.9); }
.ck-helper .ck-lamp { background: #c9cfd8; }
.ck-helper-on .ck-helper { --b: #ffd43b; --bd: #dba600; }
.ck-helper-on .ck-helper .ck-lamp { background: #fff36b; box-shadow: 0 0 0 2px #fff, 0 0 10px 3px rgba(255, 230, 80, 0.9); }
.ck-helper-active .ck-helper { animation: ck-pulse 0.8s ease-in-out infinite; }
.ck-horn.ck-ring .ck-ico { display: inline-block; animation: ck-wiggle 0.5s ease-in-out; }

@keyframes ck-invite { 50% { transform: scale(1.07); } }
@keyframes ck-pulse {
  0%, 100% { box-shadow: 0 6px 0 var(--bd), 0 0 0 0 rgba(255, 212, 59, 0.9); }
  50% { box-shadow: 0 6px 0 var(--bd), 0 0 0 12px rgba(255, 212, 59, 0); }
}
@keyframes ck-glow { to { filter: drop-shadow(0 0 10px rgba(255, 212, 59, 1)); } }
@keyframes ck-wiggle { 25% { transform: rotate(-18deg) scale(1.2); } 75% { transform: rotate(18deg) scale(1.2); } }
@keyframes ck-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }

/* ---------- blinking lights along the top of the panel ---------- */

.ck-lights { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; pointer-events: none; }
.ck-lights i { width: 10px; height: 10px; border-radius: 50%; background: #c9cfd8; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.ck-engine-on .ck-lights i { animation: ck-blink 1.2s steps(1) infinite; }
.ck-engine-on .ck-lights i:nth-child(1) { background: #ff6b6b; }
.ck-engine-on .ck-lights i:nth-child(2) { background: #ffd43b; animation-delay: 0.3s; }
.ck-engine-on .ck-lights i:nth-child(3) { background: #51cf66; animation-delay: 0.6s; }
.ck-engine-on .ck-lights i:nth-child(4) { background: #4dabf7; animation-delay: 0.9s; }
.ck-engine-on .ck-lights i:nth-child(5) { background: #f783ac; animation-delay: 0.15s; }

/* ================= design a: toy plane ================= */

.ck-a .ck-dash {
  background:
    radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.35) 3px, transparent 4px) 0 0 / 34px 34px,
    linear-gradient(180deg, #74c0fc, #4dabf7 40%, #3d9ae6);
  border-top: 8px solid #ffd43b;
  border-radius: 34px 34px 0 0;
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.35);
}
.ck-a .ck-shaft { background: linear-gradient(90deg, #9775fa, #b197fc 40%, #7950f2); }
.ck-a .ck-horn { --b: #f783ac; --bd: #d6336c; }
.ck-a .ck-tbtn { --b: #fff; --bd: #e3d3bc; color: #2b84cc; }
.ck-a .ck-thr-track { background: linear-gradient(180deg, #ff8787, #ffd43b 50%, #8ce99a); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.18), 0 0 0 5px #fff; }
.ck-a .ck-thr-track::before { background: rgba(255, 255, 255, 0.55); box-shadow: none; }
.ck-a .ck-thr-handle { background: radial-gradient(circle at 35% 30%, #ffffff, #ff6b6b 35%, #d14848); border-radius: 999px; left: -8px; right: -8px; box-shadow: 0 6px 0 #a83434, 0 8px 10px rgba(0, 0, 0, 0.2); }
.ck-a .ck-lights { top: -2px; }

/* ================= design b: little propeller plane ================= */

.ck-b .ck-dash {
  background: linear-gradient(180deg, #fbf3e3, #f1e3c9);
  border-top: clamp(10px, 4cqh, 22px) solid #a0673a;
  border-image: linear-gradient(180deg, #c48a55, #8a5530) 1;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.7);
}
.ck-b .ck-dash::before { /* soft-grey instrument sub-panel behind the dials */
  content: '';
  position: absolute;
  inset: 8% 2% 10%;
  border-radius: 28px;
  background: linear-gradient(180deg, #e9eaee, #d9dce3);
  box-shadow: inset 0 2px 6px rgba(61, 44, 85, 0.15);
  pointer-events: none;
}
.ck-b .ck-gauge { position: relative; }
.ck-b .ck-shaft { background: linear-gradient(90deg, #3a4152, #8992a6 45%, #3a4152); width: 12%; }
.ck-b .ck-btn { border-radius: 18px; }
.ck-b .ck-engine { --b: #fff; --bd: #c9b796; }
.ck-b .ck-engine-on .ck-engine, .ck-b.ck-engine-on .ck-engine { --b: #4cc76a; --bd: #2f9a4c; }
.ck-b .ck-horn { --b: #4dabf7; --bd: #2b84cc; }
.ck-b .ck-tbtn { --b: #fff; --bd: #c9b796; }
.ck-b .ck-thr-track { background: linear-gradient(90deg, #d9dce3, #eceef2 50%, #d9dce3); box-shadow: inset 0 3px 6px rgba(61, 44, 85, 0.25), 0 0 0 3px #c9b796; }
.ck-b .ck-thr-handle { background: transparent; }
.ck-b .ck-thr-handle i {
  display: block;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b7488, #2c3240 60%);
  box-shadow: 0 0 0 4px #f6ecd9, 0 6px 8px rgba(0, 0, 0, 0.3);
}
.ck-b .ck-lights i { width: 9px; height: 9px; }
.ck-b .ck-lights { top: 1px; }

/* ================= design c: jet airliner ================= */

.ck-c .ck-dash {
  background: linear-gradient(180deg, #eef2f7, #dde4ec);
  border-top: clamp(10px, 4cqh, 20px) solid #b8c3d1;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8);
}
.ck-c .ck-screen {
  padding: 3.5%;
  border-radius: 22px;
  background: linear-gradient(180deg, #c7d0dc, #aab5c4);
  box-shadow: 0 6px 12px rgba(61, 44, 85, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.ck-c .ck-shaft { background: linear-gradient(90deg, #7d8798, #c7d0dc 45%, #7d8798); width: 14%; }
.ck-c .ck-btn { border-radius: 16px; }
.ck-c .ck-engine { --b: #fff; --bd: #aab5c4; }
.ck-c.ck-engine-on .ck-engine { --b: #4cc76a; --bd: #2f9a4c; }
.ck-c .ck-horn { --b: #9775fa; --bd: #7048e8; }
.ck-c .ck-tbtn { --b: #fff; --bd: #aab5c4; }
.ck-c .ck-thr-track { width: calc(var(--thr-w) + 14px); background: linear-gradient(180deg, #8e98a8, #6f7a8c); border-radius: 18px; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3), 0 0 0 3px #c7d0dc; }
.ck-c .ck-thr-track::before { width: 46%; background: rgba(30, 36, 48, 0.55); }
.ck-c .ck-thr-hi, .ck-c .ck-thr-lo { opacity: 1; }
.ck-c .ck-thr-handle { left: -4px; right: -4px; }
.ck-c .ck-thr-handle i { flex: 1; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #dfe5ee); box-shadow: 0 5px 0 #8e98a8, 0 7px 8px rgba(0, 0, 0, 0.25); }
.ck-c .ck-thr-handle i:first-child { background: linear-gradient(180deg, #ffffff, #d0ebff); }
.ck-c .ck-lights { display: none; } /* the glare shield (#frame) has its own */

/* ================= #frame: window pillars and dashboard edge ================= */

.ck-frame { position: fixed; left: 0; right: 0; top: 0; height: var(--split, 50%); pointer-events: none; z-index: 5; overflow: hidden; }
.ck-frame > * { position: absolute; }

/* a: a rounded toy window */
.ck-frame-a .fr-window { inset: 0 0 -40px; border: clamp(6px, 1.2vmin, 12px) solid #4dabf7; border-radius: clamp(26px, 6vmin, 64px); box-shadow: 0 0 0 40px #4dabf7, inset 0 0 0 4px rgba(255, 255, 255, 0.5); }
.ck-frame-a .fr-coaming { left: 30%; right: 30%; bottom: -1px; height: clamp(10px, 2.2vmin, 18px); border-radius: 40px 40px 0 0; background: #ffd43b; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.5); }

/* b: a light aircraft windscreen */
.ck-frame-b .fr-top { left: 0; right: 0; top: 0; height: clamp(8px, 1.6vmin, 14px); background: #f1e3c9; box-shadow: 0 2px 0 rgba(61, 44, 85, 0.15); }
.ck-frame-b .fr-post { top: 0; bottom: 0; width: 7%; background: linear-gradient(90deg, #e9d9bb, #f6ecd9); }
.ck-frame-b .fr-l { left: 0; clip-path: polygon(0 0, 100% 0, 30% 100%, 0 100%); }
.ck-frame-b .fr-r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%); background: linear-gradient(270deg, #e9d9bb, #f6ecd9); }
.ck-frame-b .fr-shield { left: 8%; right: 8%; bottom: -1px; height: clamp(10px, 2.4vmin, 22px); border-radius: 60% 60% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #c48a55, #a0673a); }
.ck-frame-b .fr-compass { left: 50%; top: 0; transform: translateX(-50%); width: clamp(34px, 5vmin, 48px); height: clamp(22px, 3.2vmin, 32px); border-radius: 0 0 14px 14px; background: #2c3240; color: #fff; font: 700 clamp(13px, 2vmin, 18px)/1 'Fredoka', system-ui, sans-serif; display: grid; place-items: center; }

/* c: airliner windows with a centre post and a glare shield */
.ck-frame-c .fr-top { left: 0; right: 0; top: 0; height: clamp(8px, 1.4vmin, 12px); background: #c7d0dc; }
.ck-frame-c .fr-post { top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, #b8c3d1, #dde4ec); }
.ck-frame-c .fr-l { left: 0; clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%); }
.ck-frame-c .fr-r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%); background: linear-gradient(270deg, #b8c3d1, #dde4ec); }
.ck-frame-c .fr-mid { left: 50%; top: 0; bottom: 0; width: clamp(8px, 1.3vmin, 14px); transform: translateX(-50%); background: linear-gradient(90deg, #b8c3d1, #dde4ec, #b8c3d1); }
.ck-frame-c .fr-shield { left: 0; right: 0; bottom: -1px; height: clamp(12px, 2.6vmin, 24px); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #c7d0dc, #b8c3d1); display: flex; justify-content: center; align-items: center; gap: 10px; }
.ck-frame-c .fr-shield i { width: clamp(16px, 3vmin, 28px); height: 6px; border-radius: 3px; background: #4cc76a; opacity: 0.85; }
.ck-frame-c .fr-shield i:nth-child(2) { background: #4dabf7; }
.ck-frame-c .fr-shield i:nth-child(3) { background: #ffd43b; }

@media (prefers-reduced-motion: reduce) {
  .ck-engine, .ck-helper-active .ck-helper, .ck-engine-on .ck-lights i, .ck-thr-auto .ck-thr-handle { animation: none !important; }
}