/* realm/css/plaza.css — THE STAGE & THE AIRWAVES.
   Navi top-center with two props: the TREASURE BOX (home; what you were
   given) and the RADIO (the airwaves; everyone's open broadcasts). Wherever
   she stands, that's the scene. Blue = public signal (the colour law: gold
   is for what you were given). Scenes keep transparent backs — the shared
   sky shows through. */

/* ── the stage — Navi walks between her props; props are fixed marks,
      pinned HIGH so the scenes below get the room ──────────────────────────
      [ radio 50%−96 ]   [ Navi ±40 ]   [ chest 50%+96 ]
      (radio leads: the guest homepage centres it — login just slides it
      96px left while the chest grows in on the right) ──*/
#rn-navi-dock {
  position: fixed; top: 52px; z-index: 410;
  transform: translateX(-50%) translateX(40px);   /* home: beside the chest */
  transition: transform .34s cubic-bezier(0.34, 1.45, 0.5, 1);
}
body.plaza-open #rn-navi-dock { transform: translateX(-50%) translateX(-40px); }

.plz-prop, #plaza-entry, #plz-chest {
  position: fixed; top: 64px; z-index: 410;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; padding: 6px; border-radius: 14px;
  background: none; border: none;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.2em;
  color: rgba(150,205,240,0.85);
  transition: opacity .3s ease, color .25s ease;
}
#plaza-entry { left: calc(50% - 96px); transform: translateX(-50%); }
#plz-chest   { left: calc(50% + 96px); transform: translateX(-50%); }
#plaza-entry:hover, #plaza-entry:focus-visible,
#plz-chest:hover, #plz-chest:focus-visible { color: #d6ecfa; }
.plz-entry-lbl {
  font-family: var(--font-sans); font-weight: 700; font-size: 9.5px; letter-spacing: 0.07em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 0 12px rgba(24,176,245,0.35);
}

/* the quest marker — bobbing over the prop you are NOT at */
.plz-rx-mark {
  width: 15px; height: 9px; display: block; overflow: visible;
  fill: #bfe6ff;
  filter: drop-shadow(0 0 6px rgba(24,176,245,0.75)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  animation: plzRxMark 1.15s ease-in-out infinite;
}
@keyframes plzRxMark { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
#plaza-entry:hover .plz-rx-mark, #plz-chest:hover .plz-rx-mark { fill: #eaf7ff; }
body:not(.plaza-open) #plz-chest .plz-rx-mark { visibility: hidden; }   /* you're here */
body.plaza-open #plaza-entry .plz-rx-mark { visibility: hidden; }

/* both machines read clickable: they lift and light under the cursor */
.plz-rx, .plz-ch { width: 72px; height: 72px; display: block; overflow: visible;   /* Navi's equal */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
  transition: filter .25s ease, transform .25s ease;
}
#plaza-entry:hover .plz-rx, #plaza-entry:focus-visible .plz-rx {
  transform: translateY(-3px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)) drop-shadow(0 0 12px rgba(24,176,245,0.55));
}
#plaza-entry:active .plz-rx { transform: translateY(-1px); }
#plz-chest:hover .plz-ch, #plz-chest:focus-visible .plz-ch {
  transform: translateY(-3px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)) drop-shadow(0 0 12px rgba(245,197,66,0.45));
}
#plz-chest:active .plz-ch { transform: translateY(-1px); }

/* ── the radio ── */
.plz-rx-hl { fill: #35608e; }
.plz-rx-bd { fill: #1e3d5d; }
.plz-rx-sh { fill: #142c46; }
.plz-rx-ft { fill: #0e2136; }
.plz-rx-gr { fill: #0c1c30; }
.plz-rx-ant { fill: #9ccdf0; }
.plz-rx-tip { fill: #dff4ff; animation: plzRxTip 2.6s ease-in-out infinite; }
@keyframes plzRxTip { 0%, 100% { fill: #dff4ff; } 50% { fill: #18B0F5; } }
/* the signal arrives — outer arc first, then the inner; while the airwaves
   are OPEN the set plays hard (faster waves, brighter scan) */
.plz-rx-w { fill: #18B0F5; opacity: 0; }
.plz-rx-w2 { animation: plzRxWave 2.6s infinite; }
.plz-rx-w1 { animation: plzRxWave 2.6s infinite 0.35s; }
@keyframes plzRxWave {
  0%, 8%   { opacity: 0; }
  16%, 55% { opacity: 0.95; }
  70%, 100% { opacity: 0; }
}
body.plaza-open .plz-rx-w2 { animation-duration: 1.3s; }
body.plaza-open .plz-rx-w1 { animation-duration: 1.3s; animation-delay: 0.18s; }
.plz-rx-sc { fill: #0f2b44; }
.plz-rx-led { fill: #5fd8ff; animation: plzRxScan 1.9s step-end infinite; }
body.plaza-open .plz-rx-led { animation-duration: 0.9s; }
@keyframes plzRxScan {
  0%, 100% { transform: translateX(0); }
  33%      { transform: translateX(1px); }
  66%      { transform: translateX(2px); }
}

/* ── the treasure box ── */
.plz-ch-hl { fill: #35608e; }
.plz-ch-bd { fill: #1e3d5d; }
.plz-ch-sh { fill: #142c46; }
.plz-ch-ft { fill: #0e2136; }
.plz-ch-st { fill: #0c1c30; }           /* straps */
.plz-ch-au { fill: #f5c542; }           /* the clasp — gold, always */
/* lid states: OPEN while you're home (instant pixel swap, no tween) */
.plz-ch-open  { opacity: 1; }
.plz-ch-closed { opacity: 0; }
body.plaza-open .plz-ch-open   { opacity: 0; }
body.plaza-open .plz-ch-closed { opacity: 1; }
/* the open box breathes gold; sparks drift up out of it */
.plz-ch-glow { fill: rgba(245,197,66,0.75); animation: plzChGlow 2.8s ease-in-out infinite; }
@keyframes plzChGlow { 0%, 100% { fill: rgba(245,197,66,0.75); } 50% { fill: rgba(245,216,140,0.45); } }
.plz-ch-sp { fill: #ffe9a8; opacity: 0; }
.plz-ch-sp1 { animation: plzChSpark 2.4s infinite 0.2s; }
.plz-ch-sp2 { animation: plzChSpark 2.4s infinite 1.0s; }
.plz-ch-sp3 { animation: plzChSpark 2.4s infinite 1.7s; }
@keyframes plzChSpark {
  0%, 12%  { opacity: 0; transform: translateY(2px); }
  25%, 55% { opacity: 0.95; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-3px); }
}
/* waiting stars: the box glows, rattles, and wears the gold count badge */
#rn-navi-dock.rn-has-pending ~ #plz-chest .plz-ch {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)) drop-shadow(0 0 14px rgba(245,197,66,0.55));
  animation: plzChRattle 3.2s ease-in-out infinite;
}
@keyframes plzChRattle {
  0%, 86%, 100% { rotate: 0deg; }
  88% { rotate: -3deg; } 91% { rotate: 3deg; } 94% { rotate: -2deg; } 97% { rotate: 1deg; }
}
#plz-chest #rn-navi-badge { top: 0; right: 0; }   /* the badge rides the box */
/* the notice box follows its owner — it hangs under the CHEST now */
#rn-hail { left: calc(50% + 96px); top: 168px; }
@media (max-width: 640px) { #rn-hail { left: 50%; top: calc(6vh + 138px); } }   /* phones: centred is safer */

/* ── scene switch — two rooms sliding past each other, fast ── */
#wallet-view { transition: opacity .3s ease, transform .34s cubic-bezier(0.25, 0.8, 0.3, 1); }
body.plaza-open #wallet-view {
  opacity: 0 !important; pointer-events: none !important;
  transform: translateX(5vw);   /* home exits right — it sits on the right now */
}
body.plaza-open #rlm-topleft, body.plaza-open #rlm-claim-pill, body.plaza-open #rn-cr {
  opacity: 0 !important; pointer-events: none !important;
}
body.ncp-nav-open #plaza-entry, body.ncp-nav-open #plz-chest { opacity: 0; pointer-events: none; }
body.rn-grid-open #plaza-entry, body.rn-grid-open #plz-chest { opacity: 0; pointer-events: none; }
body.sky-open #plaza-entry, body.sky-open #plz-chest,
body.sky-open #rn-navi-dock { opacity: 0 !important; pointer-events: none !important; }

/* ── the scene ── */
#plaza-view {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; align-items: center;
  /* the stage (Navi + props) lives above — the room starts below it */
  padding: 176px 4vw 26px;
}
/* resting visibility is a PLAIN rule — never owed to an animation */
#plaza-view {
  opacity: 0; pointer-events: none; transform: translateX(-5vw);   /* plaza enters from the left */
  transition: opacity .3s ease, transform .34s cubic-bezier(0.25, 0.8, 0.3, 1);
}
#plaza-view.plz-in { opacity: 1; pointer-events: auto; transform: none; }
#plaza-view[hidden] { display: none; }

/* presets — the six car-stereo slots (the people you tuned), top-center */
.plz-presets {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 30px;
  flex-wrap: wrap; justify-content: center;
}
.plz-presets-lbl {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.24em;
  color: rgba(180,200,225,0.4); margin-right: 4px;
}
.plz-slot {
  min-width: 34px; padding: 6px 10px; border-radius: 8px; text-align: center;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  border: 1px solid rgba(150,190,225,0.2); background: rgba(10,20,32,0.4);
  box-shadow: 0 2px 0 rgba(6,12,22,0.8);
}
.plz-slot.empty { color: rgba(160,185,215,0.3); }
.plz-slot.filled {
  cursor: pointer; color: #f5d97a; border-color: rgba(245,197,66,0.45);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.plz-slot.filled:hover { color: #ffe9a8; border-color: rgba(245,197,66,0.8); }
.plz-slot.filled.on { color: #241a04; background: linear-gradient(180deg,#f7d873,#e9b83f); border-color: #e9b83f; box-shadow: 0 2px 0 #8f6416; }
/* the flying ✦ (save flourish) */
.plz-fly {
  position: fixed; z-index: 700; pointer-events: none;
  color: #f5c542; font-size: 14px; text-shadow: 0 0 10px rgba(245,197,66,0.8);
  transition: transform .55s cubic-bezier(0.25, 0.8, 0.3, 1), opacity .55s ease;
}

/* the screen — one broadcast, framed like a set */
.plz-stage { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: min(1060px, 94vw); }
.plz-screen {
  position: relative; flex: 1 1 auto; min-height: 0; border-radius: 18px; overflow: hidden;
  background: #0a0f1a;
  border: 1px solid rgba(150,190,225,0.3);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 40px rgba(24,176,245,0.08);
}
#plz-frame { width: 100%; height: 100%; border: 0; display: block; background: #0a0f1a; }
#plz-noise {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
#plz-noise.plz-noise-on { opacity: 0.55; }

.plz-meta { display: flex; align-items: center; gap: 18px; padding: 14px 6px 0; }
.plz-meta-l { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; }
.plz-name {
  flex: 0 1 auto; min-width: 0;
  font-family: var(--font-pixel, var(--font-mono)); font-size: 15px; letter-spacing: 0.03em;
  color: #f2f6fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plz-by { flex: 0 0 auto; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(180,200,225,0.6); }
.plz-by-name { font-weight: 700; color: #f5d97a; }
.plz-tune {
  flex: 0 0 auto; cursor: pointer; padding: 7px 13px; border-radius: 10px; white-space: nowrap;
  background: rgba(16,40,60,0.5); border: 1px solid rgba(24,176,245,0.5); color: #8fd0f5;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  box-shadow: 0 3px 0 rgba(8,20,36,0.9), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.plz-tune:hover { transform: translateY(1px); box-shadow: 0 2px 0 rgba(8,20,36,0.9), inset 0 1px 0 rgba(255,255,255,0.08); }
.plz-tune.on {
  color: #241a04; background: linear-gradient(180deg,#f7d873,#e9b83f); border-color: #e9b83f;
  box-shadow: 0 3px 0 #8f6416, inset 0 1px 0 rgba(255,255,255,0.35);
}
/* Zo 0724: TUNE IN + SHARE ride together (SHARE hands out the /station/ link);
   phones stack SHARE under TUNE IN (see the mobile block). */
.plz-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.plz-share {
  flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 10px; white-space: nowrap;
  background: rgba(14,22,38,0.5); border: 1px solid rgba(150,190,225,0.32); color: #bcd2e8;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  box-shadow: 0 3px 0 rgba(8,20,36,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.plz-share:hover { color: #eaf3fb; border-color: rgba(150,190,225,0.55); transform: translateY(1px); box-shadow: 0 2px 0 rgba(8,20,36,0.9), inset 0 1px 0 rgba(255,255,255,0.06); }
.plz-share-ico { width: 13px; height: 13px; flex: 0 0 auto; }
.plz-share.plz-share-ok { color: #9be8c0; border-color: rgba(95,216,174,0.5); }

/* the one-time swipe hint (replaces the phone edge arrows) — a white hand
   sweeping right->left twice, then gone. JS only lights it on phones, once. */
.plz-swipe-hint {
  position: absolute; left: 50%; top: 52%; z-index: 7; pointer-events: none;
  width: 58px; height: 66px; margin: -33px 0 0 -29px; opacity: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}
.plz-swipe-hint svg { width: 100%; height: 100%; display: block; }
.plz-swipe-hint.on { animation: plzSwipeHint 3.2s ease forwards; }
@keyframes plzSwipeHint {
  0%   { opacity: 0;    transform: translateX(34px); }
  8%   { opacity: 1;    transform: translateX(34px); }
  30%  { opacity: 1;    transform: translateX(-34px); }
  38%  { opacity: 0.25; transform: translateX(-34px); }
  46%  { opacity: 0.9;  transform: translateX(34px); }
  70%  { opacity: 1;    transform: translateX(-34px); }
  88%  { opacity: 1;    transform: translateX(-34px); }
  100% { opacity: 0;    transform: translateX(-40px); }
}

/* ── the tuner band ── */
.plz-tuner { display: flex; align-items: center; gap: 14px; width: min(860px, 92vw); margin-top: 20px; }
.plz-step {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(10,16,28,0.5); border: 1px solid rgba(200,216,240,0.25); color: #cfe0f2;
  font-size: 17px; line-height: 1;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.plz-step:hover { color: #fff; border-color: rgba(220,232,250,0.55); transform: translateY(-1px); }
.plz-band {
  position: relative; flex: 1 1 auto; height: 64px; cursor: crosshair; touch-action: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,16,28,0.55), rgba(6,10,20,0.65));
  border: 1px solid rgba(150,190,225,0.22);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.plz-ticks { position: absolute; inset: 10px 14px; pointer-events: none; }
.plz-ticks i { position: absolute; bottom: 6px; width: 1px; height: 9px; background: rgba(180,200,225,0.25); }
.plz-ticks i.maj { height: 15px; background: rgba(180,200,225,0.45); }
/* the rail dots (Zo 0723 plan 甲): even slots, big enough to aim at;
   the current one steps forward so the rail doubles as a "you are here" */
.plz-ticks u {
  position: absolute; bottom: 4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: rgba(24,176,245,0.75); box-shadow: 0 0 7px rgba(24,176,245,0.6); text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.plz-ticks u.on { transform: scale(1.5); background: #eaf6ff; box-shadow: 0 0 10px rgba(180,225,255,0.95); }
/* a new round opens — the re-laid dots breathe in */
.plz-ticks.plz-ticks-fresh { animation: plzTicksFresh .55s ease; }
@keyframes plzTicksFresh { from { opacity: 0; } to { opacity: 1; } }
/* a preset creator's station glows gold on the band */
.plz-ticks u.fav { background: #f5c542; box-shadow: 0 0 8px rgba(245,197,66,0.9); }
.plz-needle {
  position: absolute; top: 8px; bottom: 8px; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, #f5c542, rgba(245,197,66,0.25));
  box-shadow: 0 0 10px rgba(245,197,66,0.7);
  transition: left .35s cubic-bezier(0.2,0.8,0.28,1); pointer-events: none;
}
/* Zo 0723 (B): scrub preview — the would-land station rides above the dial
   while you drag; release when the right name shows */
.plz-scrub-tip {
  position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%);
  padding: 5px 9px; white-space: nowrap; pointer-events: none; z-index: 5;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: #e8f0fa; background: rgba(10,18,34,0.94);
  border: 1px solid rgba(126,203,245,0.35); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.plz-scrub-tip[hidden] { display: none; }
.plz-freq {
  position: absolute; top: -6px; left: 50%; transform: translate(-50%, -100%);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(10,16,28,0.85); border: 1px solid rgba(245,197,66,0.4);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: #f5d97a;
}

/* ── mobile ── */
@media (max-width: 640px) {
  .plz-rx, .plz-ch { width: 56px; height: 56px; }
  #plaza-entry { left: calc(50% - 72px); top: calc(6vh + 26px); }   /* Navi drops to 6vh on phones */
  #plz-chest   { left: calc(50% + 72px); top: calc(6vh + 26px); }
  #rn-navi-dock { transform: translateX(-50%) translateX(30px); }
  body.plaza-open #rn-navi-dock { transform: translateX(-50%) translateX(-30px); }
  /* bottom clearance = the weather orb's corner (44px orb + 16px inset) —
     the canvas/tuner must never sit on top of it */
  #plaza-view { padding: calc(6vh + 126px) 3vw 74px; }
  .plz-meta { flex-wrap: nowrap; gap: 10px; }   /* Zo 0722: TUNE IN keeps its right anchor */
  .plz-acts { flex-direction: column; align-items: stretch; gap: 6px; }   /* Zo 0724: SHARE under TUNE IN */
  .plz-share { justify-content: center; }
  .plz-by { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .plz-tuner { margin-top: 12px; gap: 8px; }
  .plz-band { height: 54px; }
  .plz-name { font-size: 13px; }
  .plz-presets { gap: 6px; }
  .plz-slot { min-width: 30px; padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .plz-rx-w { animation: none; opacity: 0.55; }
  .plz-rx-led, .plz-rx-tip, .plz-rx-mark { animation: none; }
  .plz-ch-glow, .plz-ch-sp { animation: none; }
  .plz-ch-sp { opacity: 0.5; }
  #rn-navi-dock.rn-has-pending ~ #plz-chest .plz-ch { animation: none; }
  #rn-navi-dock, #wallet-view, #plaza-view { transition: none; }
}

/* ── full screen — the broadcast fills the viewport (Stations-preview logic) ── */
.plz-hit {
  position: absolute; inset: 0; cursor: zoom-in; background: none; border: none; padding: 0;
  pointer-events: none;   /* 0725: the card iframe (allow-scripts) runs its own JS + scrolls natively — touch/wheel pass straight through; only the ⛶ below stays a tappable island */
}
.plz-fsmark {
  position: absolute; right: 16px; bottom: 14px;
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8,13,24,0.55); border: 1px solid rgba(200,216,240,0.3);
  color: rgba(220,232,250,0.65); font-size: 15px;
  opacity: 0.55; pointer-events: auto; transition: opacity .2s ease, border-color .2s ease, color .2s ease;
}
.plz-hit:hover .plz-fsmark { opacity: 1; color: #fff; border-color: rgba(220,232,250,0.6); }
/* phone hybrid (0725): the card scrolls natively; ⛶ + edge ‹ › are the controls */
.plz-edge {
  display: none; position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; z-index: 6; cursor: pointer;
  align-items: center; justify-content: center;
  background: rgba(8,13,24,0.5); border: 1px solid rgba(200,216,240,0.28);
  color: rgba(224,236,252,0.8); font-size: 20px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.plz-edge-l { left: 8px; }
.plz-edge-r { right: 8px; }
@media (max-width: 640px) {
  .plz-edge { display: inline-flex; }           /* phone nav (desktop uses the tuner) */
  #plz-swipe-hint { display: none; }            /* swipe no longer changes stations */
}
#plz-fs {
  position: fixed; inset: 0; z-index: 640; background: #05070f;
  opacity: 0; transition: opacity .25s ease;
}
#plz-fs.on { opacity: 1; }
#plz-fs iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Zo 0805: 18px 让 EXIT 压在页面自己的导航栏上。实测十个真实站页,固定顶栏
   最高桌面 56px、手机 90px —— 落到它下面。左上的 ✦ 圆点同步下移。 */
.plz-fs-exit {
  position: fixed; top: 76px; right: 20px; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(8,13,24,0.7); border: 1px solid rgba(200,216,240,0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: #e7eefb;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.plz-fs-exit:hover { border-color: rgba(245,197,66,0.6); color: #f5d97a; }
/* Zo 0724: SHARE also lives in full screen — top-left, twin of EXIT. */
/* Zo 0805: full screen's own SHARE is retired — the page carries the ✦ orb now. */

/* sky mode over the plaza: the airwaves recede too — only the sky remains.
   (No transition — this pane's engine freezes long opacity transitions.) */
body.sky-open #plaza-view { opacity: 0 !important; pointer-events: none !important; }

/* ── the FEED LEVER — the console's two-position pixel lever on the left
   flank (the canvas is the screen it feeds): flip UP = SCAN, flip DOWN
   = TUNED · N. Mount in the chest's navy palette, signal-blue ball;
   labels at the two throws in the props' caption type, live end lit.
   ≡ fuses into the TUNED caption row and opens the manage list. ── */
.plz-rig { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 6px 0; z-index: 5; }
.plz-rig-lbl {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: none; border: none; cursor: pointer; padding: 5px 2px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(195,210,232,0.55); text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  transition: color .15s ease, text-shadow .15s ease;
}
/* the LED — a pixel square that lights when its throw is live */
.plz-rig-lbl::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px;
  background: rgba(150,175,205,0.18); box-shadow: inset 0 0 0 1px rgba(150,175,205,0.4);
  transition: background .15s ease, box-shadow .15s ease;
}
.plz-rig-lbl:hover { color: #d9e8f8; }
.plz-rig-lbl.on { color: #7ecbf5; text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 0 12px rgba(24,176,245,0.5); }
.plz-rig-lbl.on::before { background: #18B0F5; box-shadow: 0 0 8px rgba(24,176,245,0.85); }
.plz-rig-lbl b { font-weight: 700; }
.plz-rig-row { display: inline-flex; align-items: center; gap: 6px; }
/* narrow (<860, or any portrait viewport): no flank — the switcher becomes a FULL-WIDTH TAB BAR
   fused onto the canvas's top edge (same width & top radius as the
   canvas, translucent glass): it reads as the filter header of
   everything below, and can never collide with the top props. Active =
   classic underline (TUNED's underline spans its WHOLE unit incl ≡).
   Width mirrors .plz-stage (min(1060px, 94vw)); top mirrors
   #plaza-view's padding-top (176px; phones re-pin below). */
@media (max-width: 859px), (orientation: portrait) {
  .plz-rig {
    position: absolute; left: 50%; top: 176px; transform: translateX(-50%);
    width: min(1060px, 94vw);
    gap: 0; padding: 0;
    background: rgba(8,13,24,0.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(150,190,225,0.22);
    border-radius: 18px 18px 0 0;
  }
  .plz-rig-lbl { flex: 1 1 0; justify-content: center; padding: 12px 6px; font-size: 9px; position: relative; }
  .plz-rig-lbl::before { width: 5px; height: 5px; }
  .plz-rig-lbl.on::after {
    content: ''; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px;
    background: #18B0F5; box-shadow: 0 0 8px rgba(24,176,245,0.8);
  }
  .plz-rig-row { flex: 1 1 0; gap: 8px; position: relative; justify-content: center; }
  .plz-rig-row .plz-rig-lbl { flex: 0 1 auto; }
  .plz-folmg { width: 22px; height: 22px; }
  /* TUNED live: one underline under label + ≡ together */
  .plz-rig-row.on::after {
    content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px;
    background: #18B0F5; box-shadow: 0 0 8px rgba(24,176,245,0.8);
  }
  .plz-rig-row.on .plz-rig-lbl.on::after { display: none; }
  .plz-rig-row.on .plz-folmg { border-color: rgba(126,203,245,0.5); color: #bfe4fa; }
}
/* phones re-pin the bar to the phone padding-top (source order beats the
   bar block above) */
.plz-step-m { display: none; }   /* phones only — the block below turns them on */
@media (max-width: 640px) {
  .plz-rig { top: calc(6vh + 126px); }
  .plz-band-empty { font-size: 8px; letter-spacing: 0.08em; padding: 0 12px; text-align: center; }
  /* the PHONE FEED — the tuner retires; the canvas flips sideways
     (swipe \u2190/\u2192 or tap the edge arrows; tap canvas = full screen) */
  .plz-tuner { display: none; }
  /* Zo 0723: frameless — the glyph alone, shadowed to read on any page;
     the box stays only as an invisible tap target. After the first real
     swipe the gesture is learned — the arrows bow out (.plz-swiped). */
  /* Zo 0724: the ‹ › edge arrows are removed — the one-time hand hint
     (.plz-swipe-hint) teaches the swipe, and the card is never covered. */
  /* the frequency toast — one breath of the dial on every swipe */
  .plz-freq-toast {
    position: absolute; left: 50%; top: 54px; transform: translateX(-50%);
    z-index: 6; pointer-events: none; opacity: 0;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(8,13,24,0.8); border: 1px solid rgba(245,197,66,0.4);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: #f5d97a;
  }
  .plz-freq-toast.on { animation: plzFreqToast 1s ease-out forwards; }
}
@keyframes plzFreqToast {
  0% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  12%, 70% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

/* the lever prop — hidden until the flank exists (narrow = the pill) */
.plz-lever { display: none; background: none; border: none; padding: 2px; cursor: pointer; }
.plz-lv { width: 72px; height: 120px; display: block; }
.plz-lever:hover .plz-lv { filter: drop-shadow(0 0 8px rgba(24,176,245,0.35)); }
.plz-lv-dn { display: none; }
.plz-lever.dn .plz-lv-up { display: none; }
.plz-lever.dn .plz-lv-dn { display: block; }
@keyframes plzClack { 0% { transform: translateY(0); } 45% { transform: translateY(2px); } 100% { transform: translateY(0); } }
.plz-lever.clack .plz-lv { animation: plzClack .16s steps(2, end); }
/* ball / stick / mount (mount = the chest's navy ramp) */
.plz-lv-bl { fill: #1e9de0; } .plz-lv-bh { fill: #8fdcff; } .plz-lv-bs { fill: #0d5c8f; }
.plz-lv-st { fill: #8fa5c0; } .plz-lv-ss { fill: #55688a; }
.plz-lv-m1 { fill: #35608e; } .plz-lv-m2 { fill: #1e3d5d; } .plz-lv-m3 { fill: #142c46; } .plz-lv-m4 { fill: #0e2136; }
.plz-lv-hole { fill: #0c1c30; }
/* ≡ — part of the TUNED caption, not a third control */
.plz-folmg {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10,16,28,0.4); border: 1px solid rgba(150,190,225,0.35); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; line-height: 1; color: rgba(185,202,226,0.6);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.plz-folmg:hover { color: #d9e8f8; border-color: rgba(126,203,245,0.7); background: rgba(24,90,140,0.3); }

/* wide flank (≥1400): the lever stands in the room's left blank, labels at
   its throws (absolute vs #plaza-view — NEVER the stage, whose own shift
   must not become the rig's containing block) */
@media (min-width: 860px) and (orientation: landscape) {
  /* the canvas cedes the flank: its width reserves ~340px so the lever
     panel always fits (at >=1400 this resolves to the old 1060px; a
     half-snapped 1920 window still keeps the lever) */
  .plz-stage { width: min(1060px, calc(100vw - 340px)); }
  .plz-tuner { width: min(860px, calc(100vw - 340px)); }
  /* the rig is a PANEL DOCKED onto the canvas's left edge — right corners
     square, no right border, its right edge ON the canvas border: one
     machine, a side module bolted to the monitor (not two cards). left =
     canvas-left, then pull back by own width via translate(-100%). The
     canvas-left formula must mirror .plz-stage's width EXACTLY. */
  #plaza-view > .plz-rig {
    position: absolute; top: 50%;
    left: calc((100% - min(1060px, 100vw - 340px)) / 2 + clamp(16px, 3vw, 52px));
    transform: translate(-100%, -50%);
    flex-direction: column; gap: 4px; padding: 16px 14px;
    background: linear-gradient(180deg, rgba(10,16,28,0.55), rgba(6,10,20,0.65));
    border: 1px solid rgba(150,190,225,0.22); border-right: 0;
    border-radius: 16px 0 0 16px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.35);
  }
  .plz-lever { display: block; }
  /* the whole throw is the tap target: label rows stretch and tint on
     hover — the hand knows the block is pressable before reading it */
  #plaza-view > .plz-rig .plz-rig-lbl { width: 100%; justify-content: center; padding: 7px 6px; border-radius: 10px; }
  #plaza-view > .plz-rig .plz-rig-row { width: 100%; justify-content: center; border-radius: 10px; }
  #plaza-view > .plz-rig .plz-rig-row .plz-rig-lbl { width: auto; }
  #plaza-view > .plz-rig > .plz-rig-lbl:hover,
  #plaza-view > .plz-rig .plz-rig-row:hover { background: rgba(24,90,140,0.22); }
  /* the console leans a touch right — the flank has furniture now */
  .plz-stage, .plz-tuner { position: relative; left: clamp(16px, 3vw, 52px); }
}
@media (prefers-reduced-motion: reduce) { .plz-lever.clack .plz-lv { animation: none; } }

/* empty TUNED band — one whisper on the dial */
.plz-band-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: rgba(180,200,225,0.5); pointer-events: none;
}
.plz-ticks u.off-band { display: none; }

/* ── the manage modal — your people, tap to tune, ✕ to untune ── */
.plz-folov {
  position: fixed; inset: 0; z-index: 660; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,16,0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.plz-folov.on { opacity: 1; }
.plz-folmodal {
  width: min(480px, 90vw); max-height: 74vh; display: flex; flex-direction: column;
  padding: 28px 28px 20px; border-radius: 20px;
  background: rgba(14,22,38,0.98); border: 1px solid rgba(150,190,225,0.3);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.plz-folmodal-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px;
}
/* the window title — pixel type, the count leads */
.plz-folmodal-title {
  font-family: var(--font-pixel, var(--font-mono)); font-size: 15px; letter-spacing: 0.04em;
  color: #f2f6fc; white-space: nowrap;
}
.plz-folmodal-title b { color: #7ecbf5; font-weight: 400; }
.plz-folmodal-close {
  background: none; border: none; cursor: pointer; padding: 2px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: rgba(190,205,228,0.55);
}
.plz-folmodal-close:hover { color: #e7eefb; }
.plz-folmodal-rows { overflow-y: auto; min-height: 0; }
.plz-folrow { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(150,190,225,0.1); }
.plz-folrow:last-child { border-bottom: none; }
.plz-folrow-go {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 13px 2px; text-align: left;
}
.plz-folrow-name { font-family: var(--font-mono); font-size: 12.5px; color: #dce8f5; }
.plz-folrow-go:hover .plz-folrow-name { color: #fff; }
/* the classic list toggle: TUNED (quiet, filled) ⇄ TUNE IN (outlined) —
   flips in place, the row never vanishes */
.plz-folrow-tg {
  flex: 0 0 auto; cursor: pointer; padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em;
  background: none; border: 1px solid rgba(24,176,245,0.55); color: #6fc4f2;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.plz-folrow-tg:hover { color: #d6ecfa; }
.plz-folrow-tg.on {
  background: rgba(24,60,92,0.5); border-color: rgba(150,190,225,0.3); color: rgba(190,205,228,0.75);
}
.plz-folrow-tg.on:hover { color: #ffb3ab; border-color: rgba(192,98,90,0.5); }

@media (max-width: 640px) {
  .plz-meta { flex-wrap: nowrap; }   /* Zo 0722: TUNE IN keeps its right anchor */
}
/* TUNED with no one on it — the placeholder page carries the message;
   station chrome (meta, full-screen hit, needle) steps out */
#plaza-view.plz-fol-empty .plz-meta,
#plaza-view.plz-fol-empty .plz-hit,
#plaza-view.plz-fol-empty .plz-step-m,
#plaza-view.plz-fol-empty .plz-needle { display: none; }

/* feed still loading (Zo 0723) — same treatment: the TUNING page speaks,
   no station chrome until we know what's really on the air */
#plaza-view.plz-tuning .plz-meta,
#plaza-view.plz-tuning .plz-hit,
#plaza-view.plz-tuning .plz-step-m,
#plaza-view.plz-tuning .plz-needle { display: none; }

/* the empty manage list — one line, pointing at SCAN */
.plz-folrow-none {
  padding: 18px 2px; text-align: center;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: rgba(185,202,226,0.55);
}

/* author display beats the [hidden] UA rule — pin it */
.plz-folmg[hidden], .plz-band-empty[hidden] { display: none; }

/* FIND — searching the open sky. Deliberately quiet: it borrows the same mono
   caption type, border and glass the console's other chips use (.plz-share,
   .rn-search-wrap), so it reads as one more control on the radio rather than a
   new system dropped on top. Zo 0804. */
.plz-find {
  display: flex; align-items: center; gap: 8px;
  width: min(420px, 88vw); margin: 0 auto 10px;
  height: 34px; padding: 0 12px; border-radius: 11px;
  background: rgba(14,22,38,0.5); border: 1px solid rgba(150,190,225,0.22);
  transition: border-color .25s ease;
}
.plz-find:focus-within { border-color: rgba(150,190,225,0.5); }
.plz-find-ico { color: rgba(205,221,242,0.42); font-size: 13px; line-height: 1; }
#plz-find-in {
  flex: 1 1 auto; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: #e7eefb;
}
#plz-find-in::placeholder { color: rgba(205,221,242,0.34); }
.plz-find-x {
  flex: 0 0 auto; cursor: pointer; background: none; border: none; padding: 2px 4px;
  color: rgba(205,221,242,0.45); font-size: 11px; line-height: 1;
}
.plz-find-x:hover { color: #e7eefb; }
.plz-find-x[hidden] { display: none; }
.plz-find-n {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  color: rgba(205,221,242,0.4); white-space: nowrap;
}
.plz-find-n[hidden] { display: none; }
@media (max-width: 640px) { .plz-find { height: 32px; margin-bottom: 8px; } }
@media (max-width: 640px) { .plz-fs-exit { top: 96px; } }