/* Camera views remote: a seatback-handset style view selector docked above the bottom panel, with a
   Tower key that lights its amber lamp near airports with tower data. */

    #camera-remote {
      position: absolute;
      left: 50%;
      bottom: calc(var(--airshow-camera-remote-bottom, 94px) + env(safe-area-inset-bottom, 0px));
      z-index: 1150;
      display: flex;
      align-items: stretch;
      gap: 6px;
      padding: 7px 9px 7px 7px;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, #34373c 0%, #26292d 60%, #1f2124 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 12px 28px rgba(0, 0, 0, 0.42);
      font-family: "Pretendard Variable", Pretendard, ui-sans-serif, sans-serif;
      transform: translate(-50%, 10px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.22s;
    }
    #camera-remote.visible {
      transform: translate(-50%, 0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
    }
    .camera-remote-grille {
      position: relative;
      width: 30px;
      border-radius: 10px 4px 4px 10px;
      background:
        radial-gradient(circle, #0c0d0f 0 1.15px, transparent 1.6px) 0 0 / 6px 6px,
        linear-gradient(180deg, #2b2e33, #222428);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    }
    .camera-remote-grille span {
      position: absolute;
      left: 50%;
      bottom: 6px;
      transform: translateX(-50%) rotate(-90deg);
      transform-origin: center;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: 0.28em;
      color: #c9ced5;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
      white-space: nowrap;
      translate: 0 -14px;
    }
    .camera-remote-key {
      position: relative;
      width: 68px;
      height: 58px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 6px 2px 5px;
      border: 1px solid #0c0d0f;
      border-radius: 9px;
      background: linear-gradient(180deg, #2e3136 0%, #212327 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 0 rgba(0, 0, 0, 0.55);
      color: #aab1ba;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    }
    .camera-remote-key svg {
      width: 24px;
      height: 24px;
    }
    .camera-remote-key span {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .camera-remote-key:hover {
      color: #e6e9ed;
    }
    .camera-remote-key:active {
      transform: translateY(1px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.55);
    }
    .camera-remote-key:focus-visible {
      outline: 2px solid rgba(160, 210, 255, 0.95);
      outline-offset: 2px;
    }
    .camera-remote-led {
      position: absolute;
      top: 5px;
      right: 6px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #3a3f45;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .camera-remote-key.active {
      color: #ffffff;
      background: linear-gradient(180deg, #2c1a9a 0%, #1D0D78 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 0 14px rgba(130, 110, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.55),
        0 0 14px rgba(70, 50, 210, 0.45);
    }
    .camera-remote-key.active .camera-remote-led {
      background: #5dff9c;
      box-shadow: 0 0 6px rgba(93, 255, 156, 0.95);
    }
    .camera-remote-sep {
      width: 1px;
      margin: 6px 2px;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7), transparent);
      box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
    }
    .camera-remote-tour {
      width: 74px;
      --tour-progress: 0;
    }
    .camera-remote-ring {
      position: absolute;
      left: 50%;
      top: 6px;
      width: 32px;
      height: 32px;
      margin-left: -16px;
      border-radius: 50%;
      background: conic-gradient(#5dff9c calc(var(--tour-progress) * 360deg), rgba(255, 255, 255, 0.08) 0);
      -webkit-mask: radial-gradient(circle, transparent 0 13.5px, #000 14px);
      mask: radial-gradient(circle, transparent 0 13.5px, #000 14px);
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .camera-remote-tour svg {
      margin-top: 1px;
    }
    .camera-remote-tour .camera-remote-pause,
    .camera-remote-tour.active .camera-remote-play {
      display: none;
    }
    .camera-remote-tour.active .camera-remote-pause {
      display: inline;
    }
    .camera-remote-tour.active {
      color: #ffffff;
      background: linear-gradient(180deg, #34383e 0%, #26292d 100%);
    }
    .camera-remote-tour.active .camera-remote-ring {
      opacity: 1;
    }
    #camera-presets-toggle[hidden] {
      display: none;
    }
    /* Tower key: dim with "near airports" until the flight is close to a tower; amber lamp when ready. */
    .camera-remote-key[data-preset="tower"] {
      gap: 1px;
      padding-top: 4px;
    }
    .camera-remote-key[data-preset="tower"] svg {
      width: 22px;
      height: 22px;
    }
    .camera-remote-sub {
      font-size: 9px;
      font-weight: 650;
      line-height: 1;
      letter-spacing: 0.04em;
      color: #8d949d;
      white-space: nowrap;
    }
    .camera-remote-key.unavailable {
      color: #737a83;
    }
    .camera-remote-key.unavailable svg,
    .camera-remote-key.unavailable > span {
      opacity: 0.55;
    }
    .camera-remote-key.ready {
      color: #eef1f4;
    }
    .camera-remote-key.ready .camera-remote-sub {
      color: #ffc266;
      font-weight: 750;
      letter-spacing: 0.08em;
    }
    .camera-remote-key.ready .camera-remote-led {
      background: #ffb547;
      box-shadow: 0 0 6px rgba(255, 181, 71, 0.95);
    }
    .camera-remote-key.ready.blink .camera-remote-led {
      animation: camera-remote-lamp 0.5s ease-in-out 3;
    }
    @keyframes camera-remote-lamp {
      50% { background: #4a3a22; box-shadow: none; }
    }
    /* Placard over the Tower key, and the same placard under the camera button while the remote is closed. */
    .camera-remote-hint,
    #camera-remote-callout {
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 8px;
      align-items: center;
      padding: 7px 12px 7px 10px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(180deg, #31343a 0%, #222428 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
      color: #eef1f4;
      font-family: "Pretendard Variable", Pretendard, ui-sans-serif, sans-serif;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }
    .camera-remote-hint {
      position: absolute;
      left: var(--hint-x, 50%);
      bottom: calc(100% + 11px);
      transform: translate(-50%, 6px);
    }
    #camera-remote-callout {
      position: fixed;
      left: var(--callout-x, 50%);
      top: var(--callout-y, 60px);
      z-index: 1240;
      transform: translate(-50%, -6px);
    }
    .camera-remote-hint::after,
    #camera-remote-callout::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 10px;
      height: 10px;
      background: #222428;
      transform: translateX(-50%) rotate(45deg);
    }
    .camera-remote-hint::after {
      bottom: -5px;
      box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
    }
    #camera-remote-callout::after {
      top: -5px;
      background: #31343a;
      box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6);
    }
    .camera-remote-hint.visible,
    #camera-remote-callout.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    }
    .camera-remote-hint i,
    #camera-remote-callout i {
      grid-row: span 2;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffb547;
      box-shadow: 0 0 8px rgba(255, 181, 71, 0.9);
    }
    .camera-remote-hint.muted i,
    #camera-remote-callout.muted i {
      background: #6c737c;
      box-shadow: none;
    }
    .camera-remote-hint b,
    #camera-remote-callout b {
      font-size: 12.5px;
      font-weight: 750;
      letter-spacing: 0.01em;
    }
    .camera-remote-hint span,
    #camera-remote-callout span {
      font-size: 11px;
      font-weight: 550;
      color: #b8c0ca;
    }
    #camera-presets-toggle {
      position: relative;
    }
    .camera-toggle-led {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ffb547;
      box-shadow: 0 0 5px rgba(255, 181, 71, 0.9);
      display: none;
    }
    #camera-presets-toggle.tower-ready .camera-toggle-led {
      display: block;
    }
    /* Tower view under the open remote: its footnote moves above the handset. */
    body.airshow-camera-remote-open .tower-foot {
      bottom: 184px;
    }
    html.airshow-mobile-runtime #camera-remote {
      --airshow-camera-remote-bottom: 58px;
      /* A little right of centre so the map credit line at the bottom-left stays clear. */
      margin-left: 24px;
      gap: 4px;
      padding: 5px 6px 5px 5px;
      border-radius: 12px;
    }
    html.airshow-mobile-runtime .camera-remote-grille {
      width: 18px;
    }
    html.airshow-mobile-runtime .camera-remote-grille span {
      display: none;
    }
    html.airshow-mobile-runtime .camera-remote-key {
      width: 56px;
      height: 48px;
      gap: 1px;
      padding: 4px 1px 3px;
      border-radius: 7px;
    }
    html.airshow-mobile-runtime .camera-remote-key svg {
      width: 19px;
      height: 19px;
    }
    html.airshow-mobile-runtime .camera-remote-key span {
      font-size: 9.5px;
      letter-spacing: 0.02em;
    }
    html.airshow-mobile-runtime .camera-remote-tour {
      width: 58px;
    }
    html.airshow-mobile-runtime .camera-remote-key[data-preset="tower"] {
      gap: 0;
      padding-top: 3px;
    }
    html.airshow-mobile-runtime .camera-remote-key[data-preset="tower"] svg {
      width: 16px;
      height: 16px;
    }
    html.airshow-mobile-runtime .camera-remote-sub {
      margin-top: 1px;
      font-size: 8.5px;
    }
    html.airshow-mobile-runtime .camera-remote-hint,
    html.airshow-mobile-runtime #camera-remote-callout {
      column-gap: 6px;
      padding: 5px 9px 5px 8px;
    }
    html.airshow-mobile-runtime .camera-remote-hint b,
    html.airshow-mobile-runtime #camera-remote-callout b {
      font-size: 11px;
    }
    html.airshow-mobile-runtime .camera-remote-hint span,
    html.airshow-mobile-runtime #camera-remote-callout span {
      font-size: 9.5px;
    }
    html.airshow-mobile-runtime .camera-remote-ring {
      top: 3px;
      width: 26px;
      height: 26px;
      margin-left: -13px;
      -webkit-mask: radial-gradient(circle, transparent 0 10.5px, #000 11px);
      mask: radial-gradient(circle, transparent 0 10.5px, #000 11px);
    }
    @media (prefers-reduced-motion: reduce) {
      #camera-remote,
      #camera-remote.visible,
      .camera-remote-key,
      .camera-remote-ring,
      .camera-remote-hint,
      #camera-remote-callout {
        transition: none;
      }
      .camera-remote-key.ready.blink .camera-remote-led {
        animation: none;
      }
    }