/* wings.css - Wings: a one-tap paper-plane flyer. Reuses tokens from
   styles.css and game-shell.css's shell/bar/pause chrome, same as every
   other game. No joystick -- the whole interaction is tapping directly
   on the board to flap. The big centre score and the start/game-over
   overlays keep the preview's look; the stats row above the board is
   the shared pattern (Score / Best / Gates / Coins). */

.wings-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 8px;
}

.wings-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .wings-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
    gap: 10px;
  }
  /* Same precedent as Stacks' own mobile stat-row fix -- Coins is the
     least essential stat mid-play, so it's the one dropped when the
     shell's own button clearance squeezes this row. */
  .wings-stats .wings-stat-compact-hide {
    display: none;
  }
}

.wings-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.wings-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.wings-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.wings-board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Chromium (Chrome/Edge) paints its default tap-highlight colour over
     a tapped clickable element -- on this full-board tap surface that
     reads as a colour flash on every tap. Transparent keeps the tap
     itself working exactly as before, just without the flash. The
     property is inherited, so the canvas and overlays inside the board
     get it too. */
  -webkit-tap-highlight-color: transparent;
}

.wings-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #7ec4e8;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
  /* Explicit on the canvas itself (the visible tap surface) as well as
     the wrap, so the flash stays gone even if the canvas is ever moved
     out of the board wrap. */
  -webkit-tap-highlight-color: transparent;
}

/* Big centre score while flying -- the flappy-style HUD, same as the
   preview. */
.wings-hud {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.wings-hud[hidden] { display: none; }

.wings-hud-score {
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(20, 40, 60, .18), 0 6px 22px rgba(20, 40, 60, .35);
  font-variant-numeric: tabular-nums;
}

.wings-hud-label {
  margin-top: 2px;
  color: rgba(255, 255, 255, .92);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(20, 40, 60, .45);
}

/* -- Overlays (start/game-over) -- same pattern as every other game.
   The start overlay stays transparent so the sky and the bobbing plane
   show through, as in the preview. */

.wings-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px;
  border-radius: var(--radius);
}

.wings-overlay[hidden] { display: none; }

.wings-plane-mark {
  width: 74px;
  height: 74px;
  margin-bottom: 14px;
  filter: drop-shadow(0 8px 18px rgba(20, 40, 60, .35));
}

.wings-kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(20, 40, 60, .4);
  margin: 0 0 6px;
}

.wings-overlay-title {
  font-family: Georgia, serif;
  font-size: 4.6rem;
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
  text-shadow: 0 3px 0 rgba(20, 40, 60, .15), 0 10px 30px rgba(20, 40, 60, .35);
}

.wings-overlay-text {
  margin: 12px 0 0;
  max-width: 30ch;
  color: rgba(255, 255, 255, .94);
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(20, 40, 60, .45);
}

.wings-tap-hint {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(13, 24, 36, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  animation: wings-pulse 1.6s ease-in-out infinite;
}

@keyframes wings-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .wings-tap-hint { animation: none; }
}

.wings-how {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: .85rem;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(20, 40, 60, .5);
  max-width: 34ch;
}

.wings-how b { color: #fff; }

/* Game-over panel -- a solid card over a dimmed board, same pattern as
   every other game's game-over overlay. */

#wingsGameOver {
  background: rgba(10, 13, 16, .72);
}

.wings-panel {
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  padding: 22px 22px 20px;
  width: min(320px, 88%);
  box-shadow: 0 16px 44px rgba(10, 25, 40, .35);
  cursor: default;
}

.wings-panel h2 {
  font-family: Georgia, serif;
  font-size: 1.9rem;
  line-height: 1.05;
  margin: 0;
  font-weight: 800;
}

.wings-newbest {
  display: none;
  margin: 10px auto 0;
  width: fit-content;
  background: var(--accent);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

.wings-newbest.show { display: block; }

.wings-panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 18px 0;
}

.wings-panel-stat {
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 4px 9px;
}

.wings-panel-num {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wings-panel-lab {
  margin-top: 5px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.wings-again-hint {
  margin: 11px 0 0;
  font-size: .8rem;
  color: var(--muted);
}