/* Merlin's play sky is the whole screen. While he plays, every tap drops a
   pebble, so no button underneath can be pressed by mistake. Only the play
   bar (Care, Finish) stays live. It sits below the care menu (z 275). */
.merlin-flight-layer {
  position: fixed; inset: 0 auto auto 0; z-index: 262;
  pointer-events: none; contain: layout style;
  --flight-ink: #f2e5c7; --flight-edge: rgba(220, 186, 116, .48);
  --flight-panel: rgba(36, 32, 24, .93); --flight-accent: #ead198;
}
.merlin-flight-sky {
  position: absolute; inset: 0; box-sizing: border-box;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: crosshair;
  /* A light hush over the game says "the screen is his sky now". */
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 26, 18, .04), rgba(10, 13, 9, .2));
}
.merlin-flight-sky.is-finishing { pointer-events: auto; cursor: default; }
.merlin-flight-sky:focus-visible { outline: 2px solid var(--flight-accent); outline-offset: -4px; }
.merlin-flight-canvas { position: absolute; inset: 0; display: block; pointer-events: none; }
.merlin-flight-toolbar {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* Just above the dock, so the dock icons stay in view. */
  bottom: calc(var(--nav-height, 62px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
  width: min(420px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 48px; padding: 0 4px 0 14px; box-sizing: border-box;
  color: var(--flight-ink); background: var(--flight-panel);
  border: 1px solid var(--flight-edge); border-radius: 18px;
  box-shadow: 0 6px 18px rgba(13, 17, 10, .35);
  pointer-events: auto;
}
.merlin-flight-status { font: 600 12px/1.35 system-ui, sans-serif; }
.merlin-flight-actions { display: flex; flex: 0 0 auto; align-items: center; }
.merlin-flight-finish {
  position: relative; z-index: 1; flex: 0 0 auto; min-width: 64px; min-height: 44px;
  margin: 0; padding: 8px 12px; color: var(--flight-accent);
  border: 0; border-radius: 14px; background: transparent;
  font: 700 13px/1.2 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
}
.merlin-flight-finish:hover { background: rgba(232, 208, 153, .1); }
.merlin-flight-finish:focus-visible { outline: 2px solid var(--flight-accent); outline-offset: -4px; }
.merlin-flight-finish:disabled { opacity: .65; }
.merlin-flight-care { min-width: 52px; padding-inline: 8px; }
body.comic-ui .merlin-flight-layer {
  --flight-ink: #30291e; --flight-edge: rgba(47, 43, 29, .6);
  --flight-panel: rgba(255, 246, 218, .96); --flight-accent: #2b5b53;
}
body.comic-ui .merlin-flight-toolbar { box-shadow: 2px 3px 0 rgba(41, 39, 27, .72); border-width: 2px; }
.merlin-flight-layer.is-reduced-motion .merlin-flight-sky { background: rgba(10, 13, 9, .1); }
@media (max-height: 440px) {
  .merlin-flight-toolbar { bottom: 6px; min-height: 44px; }
  .merlin-flight-status { font-size: 11px; }
}