/* Captain's Club · game: Il volo del Capitano (club/js/game-flight.js). Every rule is scoped to .gm--flight.
   The stage is a comic panel (ink border, hard shadow) holding the canvas; the HUD, the hint and the three overlays
   (how to play, pause, the end card) sit on top of it. The canvas height is set by the script (CSSOM). */

/* a game reads best in one centred column, title included */
.scr.gm--flight{max-width:752px}
.gm--flight .fl{position:relative;max-width:720px;margin:0 auto}
.gm--flight .fl__play{position:relative;border:3px solid var(--ink);border-radius:22px;background:#CBEAF6;box-shadow:5px 5px 0 var(--ink);overflow:hidden;isolation:isolate;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none}
.gm--flight .fl__play:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:22px}
/* while flying, a swipe on the stage is a tap, not a scroll */
.gm--flight .fl.is-play .fl__play{touch-action:none;cursor:pointer}
.gm--flight .fl__cv{display:block;width:100%;height:440px}

/* ---------- HUD ---------- */
.gm--flight .fl__hud{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;align-items:flex-start;gap:8px;pointer-events:none}
.gm--flight .fl__pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 5px;border-radius:999px;background:#fff;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-weight:900;font-size:1.15rem;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .2s,opacity .2s}
/* the Captain flying up under the pills: they fade so he stays in sight (the script sets .is-dim) */
.gm--flight .fl__hud.is-dim .fl__pill{opacity:.3}
.gm--flight .fl__pc{width:30px;height:30px;filter:drop-shadow(0 1px 1px rgba(11,11,12,.25))}
.gm--flight .fl__pill.is-rec{background:var(--y)}
@media (prefers-reduced-motion:no-preference){.gm--flight .fl__pill.is-rec{animation:flPop .45s var(--spring)}}
@keyframes flPop{40%{transform:scale(1.14)}}
.gm--flight .fl__pill--best{height:32px;margin-top:4px;padding:0 11px 0 8px;gap:5px;background:var(--ink);color:var(--y);border-color:var(--ink);box-shadow:none;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.gm--flight .fl__pill--best .i{width:14px;height:14px;fill:var(--y)}
.gm--flight .fl__pill--best b{font-size:.92rem;letter-spacing:0}
.gm--flight .fl__pause{pointer-events:auto;margin-left:auto;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.gm--flight .fl__pause .i{width:20px;height:20px;stroke-width:3.4}
.gm--flight .fl__pause:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (hover:hover){.gm--flight .fl__pause:hover{background:var(--y)}}

/* ---------- "tap to fly" between flights ---------- */
.gm--flight .fl__hint{position:absolute;left:50%;bottom:30%;z-index:2;translate:-50% 0;max-width:calc(100% - 24px);padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--y);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--y-600);
  font-weight:900;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.gm--flight .fl__hint{animation:flPulse 1.6s ease-in-out infinite}}
@keyframes flPulse{50%{transform:scale(1.06)}}

/* ---------- overlays: how to play, pause, the end card ---------- */
.gm--flight .fl__ov{position:absolute;inset:0;z-index:3;display:flex;padding:14px;overflow:auto;overscroll-behavior:contain}
.gm--flight .fl__ov--start,.gm--flight .fl__ov--pause{background:rgba(255,250,238,.42)}
.gm--flight .fl__ov--end{background:rgba(11,11,12,.38)}
.gm--flight .fl__card{margin:auto;width:100%;max-width:370px;padding:18px 18px 20px;border-radius:22px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);text-align:center}
.gm--flight .fl__card--sm{max-width:320px}
.gm--flight .fl__k{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--y-ink)}
.gm--flight .fl__h{margin-top:2px;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(1.55rem,7vw,2.05rem)}
.gm--flight .fl__p{margin-top:6px;color:var(--steel);font-size:.92rem}
.gm--flight .fl__how{display:grid;gap:6px;margin:14px 0 16px;padding:0;text-align:left}
.gm--flight .fl__how li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;font-size:.9rem;font-weight:600;line-height:1.35}
.gm--flight .fl__ic{width:44px;height:44px;justify-self:center;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(11,11,12,.18))}
.gm--flight .fl__ic--cap{width:52px;height:44px}
.gm--flight .fl__go,.gm--flight .fl__resume{margin-top:4px}
.gm--flight .fl__card--sm .fl__resume{margin-top:16px}
.gm--flight .fl__resume .i{width:18px;height:18px;fill:currentColor;stroke:none}
.gm--flight .fl__go:disabled{opacity:.7}
/* the shared end card (games.css), sized for the stage */
.gm--flight .fl__ov--end .gres{margin:auto;width:100%;max-width:460px}
@media (max-width:430px){
  .gm--flight .fl__ov{padding:10px}
  .gm--flight .fl__ov--end .gres{grid-template-columns:72px minmax(0,1fr);gap:10px;padding:14px 12px}
  .gm--flight .fl__ov--end .gres__cap{width:72px}
  .gm--flight .fl__ov--end .gres__t{font-size:1.15rem}
  .gm--flight .fl__ov--end .gres__acts .btn{flex:1 1 auto;padding-left:1rem;padding-right:1rem}
}
/* a short stage (a phone on its side): a tighter card */
@media (max-height:520px){
  .gm--flight .fl__card{padding:12px 14px 14px}
  .gm--flight .fl__how{margin:8px 0 10px;gap:2px}
  .gm--flight .fl__how li{font-size:.84rem}
}