/* CAMPAIGN-30-001 / F3 — RED 30: shared app-surface sheet, separate night-mode skin. */
#operation30 .operation-card__kicker .red30-signal{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:44px;min-width:44px;padding:0 7px;
  border:1px solid rgba(83,215,208,.42);border-radius:11px;
  background:#143238;color:#86eee9;
  font:900 9px/1 system-ui,-apple-system,sans-serif;letter-spacing:.09em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
#operation30 .operation-card__kicker .red30-signal[hidden]{display:none!important}
#operation30 .operation-card__kicker .red30-signal:focus-visible{outline:2px solid #087a82;outline-offset:3px}
.red30-signal__dot{
  width:7px;height:7px;border-radius:50%;background:#53d7d0;
  box-shadow:0 0 0 3px rgba(83,215,208,.12);
}
.red30-dialog{--app-surface-max-width:680px;}
.red30-dialog .red30-sheet{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;overflow:hidden;
  background:#151823;color:#faf4e9;border:1px solid rgba(83,215,208,.25);
  box-shadow:0 24px 80px rgba(5,10,19,.48);
}
/* Interference belongs to the real card. It never changes geometry or captures taps. */
.red30-dialog.is-handshaking .red30-sheet::after,
.red30-dialog.is-system-active .red30-sheet::after{
  content:'';position:absolute;z-index:5;inset:0;pointer-events:none;
  opacity:0;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(135,246,240,.25) 3px 4px,transparent 4px 9px),
    linear-gradient(90deg,transparent 0%,rgba(83,215,208,.22) 38%,rgba(239,114,182,.19) 64%,transparent 100%);
}
.red30-dialog.is-handshaking .red30-sheet::after{animation:red30WholeSignal .66s steps(6,end) 1}
.red30-dialog.is-system-active .red30-sheet::after{animation:red30WholeSignal .32s steps(5,end) 1}
@keyframes red30WholeSignal{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  14%{opacity:.68;clip-path:inset(9% 0 78% 0);transform:translateX(-5px)}
  34%{opacity:.4;clip-path:inset(38% 0 45% 0);transform:translateX(4px)}
  52%{opacity:.78;clip-path:inset(57% 0 21% 0);transform:translateX(-3px)}
  70%{opacity:.52;clip-path:inset(19% 0 68% 0);transform:translateX(2px)}
  85%{opacity:.3;clip-path:inset(79% 0 7% 0);transform:none}
}
.red30-dialog .red30-sheet .app-surface__drag-zone{
  background:#1b2230;flex:none;
}
.red30-dialog .red30-sheet .app-surface__grabber::after{background:rgba(156,191,194,.45)}
.red30-dialog .red30-sheet .app-surface__header{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  min-height:64px;padding:10px 16px 12px;
  background:transparent;border-bottom:1px solid rgba(83,215,208,.16);
}
.red30-dialog.is-handshaking .red30-sheet .app-surface__header::after{
  content:'';position:absolute;z-index:2;pointer-events:none;inset:0 0 auto;
  height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(152,255,247,.94),transparent);
  box-shadow:0 0 13px rgba(83,215,208,.3);
  animation:red30HeaderLock .64s cubic-bezier(.2,.75,.2,1) 1;
}
.red30-dialog .red30-link-state{
  display:block;margin-top:5px;padding-left:11px;position:relative;
  color:#8db6b6;font:750 9px/1.35 ui-monospace,monospace;letter-spacing:.065em;
}
.red30-dialog .red30-link-state::before{
  content:'';position:absolute;left:0;top:4px;width:5px;height:5px;
  background:#53d7d0;border-radius:50%;box-shadow:0 0 6px rgba(83,215,208,.45);
}
.red30-dialog.is-handshaking .red30-link-state{animation:red30LinkLock .64s steps(4,end) 1}
.red30-dialog.is-handshaking .app-surface__header h2{animation:red30HandshakeTitle .64s steps(1,end) 1}
.red30-dialog.is-handshaking .app-surface__header::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(83,215,208,.18),transparent);
  animation:red30HandshakeSweep .64s ease-out 1;
}
@keyframes red30HandshakeSweep{
  0%{opacity:0;transform:translateX(-110%)}
  20%{opacity:.95}80%{opacity:.8}
  100%{opacity:0;transform:translateX(110%)}
}
@keyframes red30HandshakeTitle{
  0%,17%,100%{text-shadow:none;transform:none;opacity:1}
  8%{text-shadow:2px 0 #53d7d0,-2px 0 #ef72b6;transform:translateX(-1px);opacity:.75}
  32%{text-shadow:-2px 0 #53d7d0,2px 0 #ef72b6;transform:translateX(1px);opacity:.95}
  43%{text-shadow:none;transform:none;opacity:1}
}
@keyframes red30HeaderLock{
  0%{opacity:0;transform:translateY(0)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(90px)}
}
@keyframes red30LinkLock{0%,35%{opacity:.5}17%,52%,100%{opacity:1}}
.red30-dialog .red30-sheet .app-surface__header small{
  color:#53d7d0;font:900 9px/1.4 ui-monospace,monospace;letter-spacing:.13em;
}
.red30-dialog .red30-sheet .app-surface__header h2{
  color:#faf4e9;font:900 clamp(15px,4.3vw,22px)/1.2 system-ui,-apple-system,sans-serif;
  margin:4px 0 0;letter-spacing:.03em;
}
.red30-dialog .red30-close{
  /* Visually hidden, not display:none: keyboard and assistive tech retain Exit. */
  position:absolute;top:12px;right:12px;width:1px;height:1px;
  padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.red30-dialog .red30-close:focus-visible{
  z-index:4;clip-path:none;width:auto;height:44px;max-width:90px;
  padding:0 10px;overflow:visible;
  display:grid;place-items:center;border:1px solid rgba(250,244,233,.25);
  border-radius:12px;background:#253441;color:#faf4e9;
  font:800 10px/1 ui-monospace,monospace;
}
.red30-dialog .red30-sheet:focus{outline:none}
.red30-dialog .red30-close:focus-visible,
.red30-dialog .red30-toolbar button:focus-visible,
.red30-dialog .red30-archive-item:focus-visible{
  outline:2px solid #53d7d0;outline-offset:2px;
}
.red30-dialog .red30-content{
  min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;
  padding:0 16px max(14px,env(safe-area-inset-bottom));
}
.red30-dialog .red30-headline{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin:14px 0 11px;color:#c0c2cb;
  font:850 10px/1.35 ui-monospace,monospace;letter-spacing:.065em;
}
.red30-dialog .red30-headline strong{color:#53d7d0;font-size:13px}
/* Same app-surface shell as the other cards: two real sliding panels.
   The archive stays underneath the active conversation during back swipe. */
.red30-dialog .red30-stage{
  position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;
}
.red30-dialog .red30-archive{
  position:absolute;inset:0;min-width:0;min-height:0;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;touch-action:pan-y;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.red30-dialog .red30-reader-panel{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  min-width:0;min-height:0;overflow:hidden;background:#151823;
  transition:transform .18s cubic-bezier(.2,.76,.25,1);
}
.red30-dialog .red30-reader-panel.is-swiping{transition:none!important}
.red30-dialog .red30-reader{
  flex:1;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;touch-action:pan-y;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.red30-dialog .red30-archive[aria-hidden="true"]{pointer-events:none}
.red30-dialog .red30-archive::-webkit-scrollbar,
.red30-dialog .red30-reader::-webkit-scrollbar{display:none;width:0;height:0}
.red30-dialog .red30-archive-hint{
  margin:6px 0 22px;padding:13px 14px;
  border:1px solid rgba(83,215,208,.18);border-radius:11px;
  color:#a9c5c7;background:rgba(83,215,208,.045);
  font:650 12px/1.6 system-ui,-apple-system,sans-serif;
}
.red30-dialog .red30-archive-list:empty{padding-bottom:0}
.red30-dialog [hidden]{display:none!important}
.red30-dialog .red30-archive-list{display:grid;gap:8px;padding-bottom:16px}
.red30-dialog .red30-archive-item{
  width:100%;min-height:68px;display:flex;align-items:center;gap:12px;
  padding:12px;border:1px solid rgba(83,215,208,.12);
  border-radius:13px;background:#202737;color:#faf4e9;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.red30-dialog .red30-archive-item:disabled{opacity:.48;cursor:default;background:#1b202e}
.red30-dialog .red30-archive-item__number{
  flex:none;display:grid;place-items:center;width:36px;height:36px;
  border:1px solid rgba(83,215,208,.33);border-radius:10px;
  color:#53d7d0;font:900 13px/1 ui-monospace,monospace;
}
.red30-dialog .red30-archive-item__body{display:grid;gap:5px;min-width:0;flex:1}
.red30-dialog .red30-archive-item__body strong{
  color:#faf4e9;font:900 13px/1.22 system-ui,-apple-system,sans-serif;
}
.red30-dialog .red30-archive-item__body small{
  font:700 9px/1.4 ui-monospace,monospace;letter-spacing:.015em;color:#b2bcc9
}
.red30-dialog .red30-archive-item__arrow{flex:none;color:#53d7d0;font-size:20px}

/* RED30-AMBIENT-010 · Live but quiet terminal. No JS timers and no sheet transforms.
   These shared-shell treatments persist between the archive and conversation.
   Archive-only light stops immediately when the reader covers the list. */
.red30-dialog[open] .red30-link-state::before{
  animation:red30BeaconBreathe 3.4s ease-in-out infinite;
}
@keyframes red30BeaconBreathe{
  0%,16%,49%,100%{opacity:.72;box-shadow:0 0 4px rgba(83,215,208,.24)}
  34%{opacity:1;box-shadow:0 0 10px rgba(83,215,208,.6),0 0 0 3px rgba(83,215,208,.08)}
  56%{opacity:.58}
  58%{opacity:.92}
}
.red30-dialog .red30-sheet .app-surface__drag-zone{
  position:relative;overflow:hidden;
}
.red30-dialog[open] .red30-sheet .app-surface__drag-zone::before{
  content:'';position:absolute;z-index:3;top:0;left:0;right:0;height:2px;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(120,232,227,.44),transparent);
  box-shadow:0 0 10px rgba(83,215,208,.16);
  animation:red30AmbientHeaderScan 12s linear infinite;
}
@keyframes red30AmbientHeaderScan{
  0%,8%,100%{opacity:0;transform:translateY(0)}
  9%{opacity:.45;transform:translateY(0)}
  21%{opacity:.38;transform:translateY(145px)}
  22%,99%{opacity:0;transform:translateY(145px)}
}
/* Keep the original grabber geometry; only its reflected light changes. */
.red30-dialog[open] .red30-sheet .app-surface__grabber::after{
  animation:red30GrabberGleam 9s ease-in-out infinite;
}
@keyframes red30GrabberGleam{
  0%,15%,42%,100%{background-color:rgba(156,191,194,.45);box-shadow:none}
  26%{background-color:rgba(177,226,224,.65);box-shadow:0 0 8px rgba(83,215,208,.23)}
}
/* One quiet recurring signal from each available archived file. */
.red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-item:not(:disabled){
  position:relative;isolation:isolate;overflow:hidden;
  animation:red30ArchiveBorder 7s ease-in-out infinite;
}
@keyframes red30ArchiveBorder{
  0%,18%,63%,100%{border-color:rgba(83,215,208,.12);box-shadow:none}
  39%{border-color:rgba(83,215,208,.29);box-shadow:0 0 16px rgba(83,215,208,.045)}
}
.red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-item:not(:disabled)::before{
  content:'';position:absolute;z-index:1;top:0;bottom:0;left:-55%;width:50%;
  pointer-events:none;opacity:0;transform:skewX(-17deg) translateX(0);
  background:linear-gradient(90deg,transparent,rgba(125,242,231,.11),transparent);
  animation:red30ArchiveSweep 14s ease-in-out infinite;
}
@keyframes red30ArchiveSweep{
  0%,48%,100%{opacity:0;transform:skewX(-17deg) translateX(0)}
  50%{opacity:.6}
  61%{opacity:.8;transform:skewX(-17deg) translateX(360%)}
  63%{opacity:0;transform:skewX(-17deg) translateX(360%)}
}
.red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-item__arrow{
  animation:red30ArchiveArrow 6s ease-in-out infinite;
}
@keyframes red30ArchiveArrow{
  0%,57%,75%,100%{transform:translateX(0)}
  65%{transform:translateX(3px)}
}
.red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-hint{
  animation:red30HintBreathe 10s ease-in-out infinite;
}
@keyframes red30HintBreathe{
  0%,18%,57%,100%{border-color:rgba(83,215,208,.18);background-color:rgba(83,215,208,.045)}
  37%{border-color:rgba(83,215,208,.26);background-color:rgba(83,215,208,.065)}
}
@media(prefers-reduced-motion:reduce){
  .red30-dialog[open] .red30-link-state::before,
  .red30-dialog[open] .red30-sheet .app-surface__drag-zone::before,
  .red30-dialog[open] .red30-sheet .app-surface__grabber::after,
  .red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-item:not(:disabled),
  .red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-item:not(:disabled)::before,
  .red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-item__arrow,
  .red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-hint{
    animation:none!important;
  }
  .red30-dialog[open] .red30-sheet .app-surface__drag-zone::before,
  .red30-dialog[open] .red30-archive[aria-hidden="false"] .red30-archive-item:not(:disabled)::before{
    display:none!important;
  }
}

.red30-dialog .red30-reader{padding:4px 2px 24px}
/* Reuse the back control of La Banda; change only surface colors for RED30. */
.red30-dialog .red30-reader .crew-profile-panel__back{
  color:#78d9d2;min-height:40px;top:-4px;
  padding:10px 0 11px;
  background:linear-gradient(#151823 80%,rgba(21,24,35,0));
}
.red30-dialog .red30-reader .crew-profile-panel__back:focus-visible{
  outline:2px solid #53d7d0;outline-offset:-2px;border-radius:4px;
}
.red30-dialog .red30-reader:active{cursor:default}
/* Holding on the conversation pauses typing without intercepting vertical scroll.
   Long press does not open Safari's text selection/callout while it is playing. */
.red30-dialog .red30-reader.is-playing .red30-messages{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.red30-dialog .red30-episode-label{
  color:#b2bcc9;font:800 10px/1.4 ui-monospace,monospace;letter-spacing:.07em;
  margin:9px 0 18px;
}
.red30-dialog .red30-message{margin:0 0 18px;padding:11px 13px;border-left:2px solid rgba(83,215,208,.55);background:#1c2331;border-radius:0 11px 11px 0}
.red30-dialog .red30-message--central{border-left-color:rgba(239,114,182,.8);background:#2b2032}
.red30-dialog .red30-message--sistema{
  position:relative;
  border:1px dashed rgba(225,184,91,.43);border-radius:9px;
  background:rgba(225,184,91,.065);text-align:center;
}
.red30-dialog .red30-message--sistema::before{
  content:'';position:absolute;left:10px;top:11px;
  width:4px;height:4px;background:#e1b85b;box-shadow:0 0 5px rgba(225,184,91,.36);
}
.red30-dialog .red30-message--sistema .red30-message__who{
  padding-bottom:7px;border-bottom:1px solid rgba(225,184,91,.2);
}
.red30-dialog .red30-message--sistema.is-decoding::after{
  content:'RX // 0x30 ░▒';position:absolute;right:10px;top:9px;
  font:800 8px/1 ui-monospace,monospace;letter-spacing:.02em;color:#e1b85b;
  pointer-events:none;opacity:0;animation:red30PacketRecover .28s steps(3,end) 1;
}
.red30-dialog.is-system-active .red30-sheet .app-surface__header{
  animation:red30SystemPulse .3s steps(3,end) 1;
}
@keyframes red30PacketRecover{
  0%,25%{opacity:.9;transform:translateX(-3px)}
  50%{opacity:.5;transform:translateX(2px)}
  100%{opacity:0;transform:none}
}
@keyframes red30SystemPulse{
  0%,100%{border-bottom-color:rgba(83,215,208,.16)}
  40%{border-bottom-color:rgba(225,184,91,.62)}
  70%{border-bottom-color:rgba(83,215,208,.35)}
}
.red30-dialog .red30-message__who{
  display:block;margin:0 0 8px;
  color:#53d7d0;font:900 10px/1.25 ui-monospace,monospace;letter-spacing:.07em;
}
.red30-dialog .red30-message--central .red30-message__who{color:#f3a0d0}
.red30-dialog .red30-message--sistema .red30-message__who{color:#e1b85b}
.red30-dialog .red30-message__text{
  margin:0;min-height:1em;color:#faf4e9;
  font:450 16px/1.55 system-ui,-apple-system,sans-serif;
  overflow-wrap:anywhere;
}
/* The single terminal cursor belongs to the currently printed message only. */
.red30-dialog .red30-message__text.is-typing::after{
  content:'';display:inline-block;vertical-align:-.11em;
  width:2px;height:.95em;margin-left:3px;background:#53d7d0;
  animation:red30CaretBlink .85s steps(1,end) infinite;
}
@keyframes red30CaretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .red30-dialog .red30-message__text.is-typing::after{animation:none;opacity:0}
}
.red30-dialog .red30-message--sistema .red30-message__text{font-size:13px;color:#e3cda0}
/* Short-lived RGB split only during scripted corruption, no permanent vibration. */
.red30-dialog .red30-message.is-corrupting{
  animation:red30PacketGlitch .9s steps(5,end) 1;border-color:rgba(83,215,208,.7);
}
.red30-dialog .red30-message.is-corrupting .red30-message__text{
  color:#d7fff5;text-shadow:1px 0 rgba(83,215,208,.8),-1px 0 rgba(239,114,182,.6);
}
@keyframes red30PacketGlitch{
  0%,100%{transform:none;box-shadow:none}
  22%{transform:translateX(-2px);box-shadow:inset 2px 0 rgba(83,215,208,.55)}
  44%{transform:translateX(1px)}
  66%{transform:translateX(-1px);box-shadow:inset -2px 0 rgba(239,114,182,.4)}
  85%{transform:translateX(1px)}
}
.red30-dialog .red30-toolbar{
  display:flex;gap:8px;align-items:center;justify-content:space-between;
  padding:12px 0 6px; /* The common content shell already owns the bottom safe area. */
  border-top:1px solid rgba(83,215,208,.15);
}
.red30-dialog .red30-toolbar:not(:has(>button:not([hidden]))){display:none}
.red30-dialog .red30-toolbar button{
  flex:1;min-height:44px;padding:10px 12px;
  border:1px solid rgba(83,215,208,.3);border-radius:10px;
  color:#faf4e9;background:#283042;
  font:900 10px/1.2 ui-monospace,monospace;letter-spacing:.04em;
}
.red30-dialog .red30-toolbar .red30-primary{
  background:#53d7d0;color:#11131b;border-color:#53d7d0;
}
.red30-dialog .red30-toolbar button:disabled{opacity:.5}
.red30-dialog .red30-feedback{
  padding:10px;margin:6px 0;color:#f2d1a1;border-radius:9px;
  background:#46382f;font-size:12px;line-height:1.4;
}
@media(min-width:761px){
  .red30-dialog .red30-sheet{max-height:min(700px,90dvh)}
  .red30-dialog .red30-content{padding:0 22px 20px}
}
@media(max-width:350px){
  #operation30 .operation-card__kicker{font-size:9px;letter-spacing:.07em}
  #operation30 .operation-card__kicker .red30-signal{padding:0 5px}
  .red30-dialog .red30-content{padding-left:12px;padding-right:12px}
  .red30-dialog .red30-archive-item{padding:9px;gap:9px}
}
@media(prefers-reduced-motion:reduce){
  .red30-dialog .red30-sheet{transition:none!important;animation:none!important}
}
/* The entry animation is CSS-owned, not a persistent JS transform.
   The shared swipe controller takes over once the sheet is on screen. */
@media(max-width:760px){
  /* Anchor the native dialog to the viewport, not the document scroll position.
     Safari otherwise paints a temporary rectangle around the page's midpoint. */
  .red30-dialog{
    position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;
    height:92vh;height:92dvh;max-height:92vh;max-height:92dvh;
    overflow:hidden;
  }
  .red30-dialog .red30-sheet{height:100%;max-height:100%}
  /* Move the entire native modal, not its child: no stationary dark rectangle
     is exposed while the card rises; the existing sheet still owns drag gestures. */
  .red30-dialog[open]{
    animation:red30SheetEnter .38s cubic-bezier(.2,.78,.2,1) 1;
  }
}
@keyframes red30SheetEnter{
  from{transform:translate3d(0,100%,0);opacity:.98}
  to{transform:translate3d(0,0,0);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .red30-dialog[open],
  .red30-dialog.is-handshaking .app-surface__header::before,
  .red30-dialog.is-handshaking .app-surface__header::after,
  .red30-dialog.is-handshaking .app-surface__header h2,
  .red30-dialog.is-handshaking .red30-link-state,
  .red30-dialog.is-system-active .app-surface__header,
  .red30-dialog .red30-message--sistema.is-decoding::after,
  .red30-dialog .red30-message.is-corrupting{animation:none!important}
  .red30-dialog.is-handshaking .red30-sheet::after,
  .red30-dialog.is-system-active .red30-sheet::after{display:none!important}
}
/* Admin-only URL preview reuses the original signal and reader, but never
   depends on the visibility of the invitation flow or any game state. */
body > .red30-signal.red30-signal--preview{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:9998;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-width:180px;min-height:48px;padding:12px 18px;
  border:1px solid #86eee9;border-radius:14px;
  background:#143238;color:#e8fffc;box-shadow:0 10px 32px rgba(4,19,26,.34);
  font:900 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.06em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
body > .red30-signal.red30-signal--preview[hidden]{display:none!important}
body > .red30-signal.red30-signal--preview:focus-visible{outline:3px solid #53d7d0;outline-offset:3px}

/* RED30-HUD-BREACH-001: the HUD border itself is being corrupted. No icon. */
.red30-fugitive{
  position:absolute;left:24%;bottom:-20px;z-index:4;
  display:block;width:108px;height:44px;
  padding:0;border:0;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:opacity .2s ease,transform .34s cubic-bezier(.22,.78,.22,1),left .65s cubic-bezier(.22,.78,.22,1);
}
.red30-fugitive[hidden]{display:none!important}
.red30-fugitive__rift{
  position:absolute;left:6px;right:6px;top:15px;height:16px;
  pointer-events:none;isolation:isolate;
}
.red30-fugitive__rift::before{
  content:'';position:absolute;left:0;right:0;top:5px;height:5px;
  background:linear-gradient(90deg,transparent,#60cabe 15%,#c4fff6 37%,#ef72b6 57%,#73fff0 73%,transparent);
  clip-path:polygon(0 63%,7% 63%,7% 27%,13% 27%,13% 55%,21% 55%,21% 2%,27% 2%,27% 67%,42% 67%,42% 37%,52% 37%,52% 0,59% 0,59% 65%,69% 65%,69% 34%,77% 34%,77% 74%,86% 74%,86% 29%,92% 29%,92% 57%,100% 57%,100% 100%,0 100%);
  filter:drop-shadow(0 0 5px rgba(83,215,208,.65));
  animation:red30RiftPulse 6.8s steps(1,end) infinite;
}
.red30-fugitive__rift::after{
  content:'';position:absolute;left:10%;right:13%;top:7px;height:2px;
  background:linear-gradient(90deg,transparent,#ff84c4 15%,transparent 39%,#91fff0 57%,transparent 90%);
  opacity:.75;transform:translate(2px,-2px);
  animation:red30RiftSplit 6.8s steps(1,end) infinite;
}
.red30-fugitive__noise{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 4%,rgba(109,255,235,.96) 4% 9%,transparent 9% 24%,rgba(255,145,208,.76) 24% 29%,transparent 29% 72%,rgba(125,255,239,.85) 72% 78%,transparent 78%),
    linear-gradient(90deg,transparent 14%,rgba(128,246,238,.55) 14% 19%,transparent 19% 66%,rgba(255,132,190,.6) 66% 71%,transparent 71%);
  background-size:100% 2px,100% 2px;
  background-position:0 1px,0 12px;
  background-repeat:no-repeat;
  opacity:.35;
  animation:red30RiftNoise 6.8s steps(1,end) infinite;
}
.red30-fugitive:focus{outline:none}
.red30-fugitive:focus-visible .red30-fugitive__rift::before{
  filter:drop-shadow(0 0 8px rgba(83,215,208,.95));
}
.hud--rolling .red30-fugitive{pointer-events:none;opacity:0;transform:translate3d(0,-20px,0)}
/* Captured and fully read: the exact same breach remains a static shortcut.
   Only a server-released, locally unread chapter reactivates the glitch. */
.red30-fugitive.is-discovered:not(.has-new-transmission) .red30-fugitive__rift::before,
.red30-fugitive.is-discovered:not(.has-new-transmission) .red30-fugitive__rift::after,
.red30-fugitive.is-discovered:not(.has-new-transmission) .red30-fugitive__noise{animation:none}
.red30-fugitive.is-discovered:not(.has-new-transmission) .red30-fugitive__noise{opacity:.25}
.red30-fugitive.has-new-transmission .red30-fugitive__rift::before{
  filter:drop-shadow(0 0 7px rgba(83,215,208,.78));
}
.red30-fugitive.has-new-transmission .red30-fugitive__rift::after{opacity:.9}
@keyframes red30RiftPulse{
  0%,72%,87%,100%{opacity:.64;transform:none}
  74%{opacity:1;transform:translateX(2px)}
  76%{opacity:.23;transform:translateX(-3px)}
  78%,82%{opacity:1;transform:translateX(1px)}
  84%{opacity:.38;transform:translateX(-2px)}
}
@keyframes red30RiftSplit{
  0%,72%,87%,100%{opacity:.12;transform:translate(0,-1px)}
  74%{opacity:1;transform:translate(5px,-3px)}
  76%{opacity:.2;transform:translate(-4px,2px)}
  78%,84%{opacity:.93;transform:translate(3px,-2px)}
}
@keyframes red30RiftNoise{
  0%,71%,87%,100%{opacity:.12;transform:none}
  73%,76%,80%,84%{opacity:.86;transform:translateX(2px)}
  75%,78%,82%{opacity:.2;transform:translateX(-3px)}
}

/* RED30-PROGRESSIVE-GLITCH-001: the breach wanders along the lower HUD edge,
   rather than jumping to a fixed opposite corner. Hit target stays 108x44px. */
.red30-fugitive.red30-fugitive--escalated{left:min(48%,calc(100% - 116px))}
.red30-fugitive.red30-fugitive--wandering{left:min(58%,calc(100% - 116px))}
.red30-fugitive--escalated .red30-fugitive__rift::before{
  filter:drop-shadow(0 0 8px rgba(83,215,208,.78));
  animation-duration:5.4s;
}
.red30-fugitive--urgent .red30-fugitive__rift::before{
  filter:drop-shadow(0 0 9px rgba(83,215,208,.9)) drop-shadow(0 0 4px rgba(255,132,190,.35));
  animation-duration:4.7s;
}
.red30-fugitive--escalated .red30-fugitive__rift::after,
.red30-fugitive--escalated .red30-fugitive__noise{animation-duration:5.4s}
.red30-fugitive--urgent .red30-fugitive__rift::after,
.red30-fugitive--urgent .red30-fugitive__noise{animation-duration:4.7s}
#hud.hud--red30-ambient-glitch:not(.hud--rolling):not(.hud--announcement-visible){
  animation:red30HudAmbientBreach .28s steps(1,end) 1;
}
#hud.hud--red30-ambient-glitch .hud__wanted-zone,
#hud.hud--red30-ambient-glitch .hud__menu-toggle{
  animation:red30HudAmbientDigits .28s steps(1,end) 1;
}
@keyframes red30HudAmbientBreach{
  0%,100%{box-shadow:none}
  24%{box-shadow:inset 0 -2px 0 rgba(83,215,208,.85),0 0 8px rgba(83,215,208,.16)}
  46%{box-shadow:inset 0 -2px 0 rgba(236,92,166,.82)}
  71%{box-shadow:inset 0 -1px 0 rgba(83,215,208,.4)}
}
@keyframes red30HudAmbientDigits{
  0%,100%{filter:none}
  24%{filter:brightness(1.5) drop-shadow(1px 0 rgba(83,215,208,.7))}
  46%{filter:brightness(.8) drop-shadow(-1px 0 rgba(236,92,166,.7))}
  71%{filter:brightness(1.25)}
}

/* The HUD itself is the scanner. Only this transmission gets a fill layer. */
#hud[data-transmission="red30"].hud--announcement-expanded{
  --red30-scan-progress:0%;
  border-color:rgba(83,215,208,.52)!important;
  background:linear-gradient(145deg,#15252e,#19212d 73%,#1b2530)!important;
  box-shadow:0 13px 32px rgba(7,31,41,.19),0 0 0 1px rgba(83,215,208,.1)!important;
}
#hud[data-transmission="red30"].hud--announcement-expanded::before{
  content:'';position:absolute;top:0;left:0;bottom:0;
  width:var(--red30-scan-progress,0%);z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(167,255,243,.10) 4px 5px),
    linear-gradient(90deg,rgba(37,162,161,.16),rgba(48,209,190,.30));
  border-right:1px solid rgba(184,255,246,.58);
  box-shadow:7px 0 17px rgba(83,215,208,.24);
}
#hud[data-transmission="red30"] .hud__announcement{
  z-index:1;gap:16px;
  padding:20px max(20px,env(safe-area-inset-left)) 20px max(20px,env(safe-area-inset-right));
  justify-content:center;isolation:isolate;
}
#hud[data-transmission="red30"] .hud__announcement-copy{
  width:100%;min-width:0;gap:10px;
  padding:0 0 14px;margin:0;
  border-bottom:1px solid rgba(83,215,208,.32);
}
#hud[data-transmission="red30"] .hud__announcement-kicker:not([hidden]){
  color:#7bdccd;letter-spacing:.105em;line-height:1.5;font-size:9px;
}
#hud[data-transmission="red30"] .hud__announcement strong{
  color:#c4fff3!important;letter-spacing:.045em;
  font-size:clamp(16px,4.7vw,20px);line-height:1.22;
}
#hud[data-transmission="red30"] .hud__announcement small{
  color:rgba(224,251,246,.77);font-size:clamp(11px,3.1vw,13px);
  line-height:1.55;letter-spacing:.015em;
}
#hud[data-transmission="red30"] .hud__announcement-action:not([hidden]){
  align-self:stretch;width:100%;min-width:0;min-height:54px;
  padding:13px 15px;margin:0;
  background:linear-gradient(100deg,rgba(17,91,98,.92),rgba(42,70,80,.96) 79%,rgba(37,103,109,.88))!important;color:#e6fff9!important;
  border:1px solid rgba(147,244,230,.45)!important;border-radius:10px;
  box-shadow:inset 0 1px rgba(194,255,242,.07)!important;
  font:850 11px/1.3 ui-monospace,monospace;letter-spacing:.065em;
  text-align:center;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* Limit the existing focused HUD button outline to cyan, not the global pink. */
#hud[data-transmission="red30"] .hud__announcement-action:focus-visible{
  outline:2px solid #53d7d0;
  outline-offset:3px;
}
/* The scanning interaction is explained by its fill, not by a decorative square. */
#hud[data-transmission="red30"] .hud__announcement-action:not([hidden])::after{content:none}
#hud[data-transmission="red30"] .hud__announcement::before{
  content:'';position:absolute;z-index:2;left:0;right:0;top:-6%;
  height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(164,255,242,.7),transparent);
  box-shadow:0 0 19px rgba(83,215,208,.3);
  animation:red30ArrivalScan .75s ease-out 1 both;
}
#hud[data-transmission="red30"] .hud__announcement::after{content:none!important}
#hud[data-transmission="red30"].hud--announcement-visible .hud__announcement-copy{
  animation:red30SignalDecode .34s steps(3,end) both;
}
#hud.hud--red30-scan-complete[data-transmission="red30"]::before{
  filter:brightness(1.45);
}
#hud.hud--red30-capturing .hud__announcement strong{
  animation:red30CaptureFlash .42s steps(3,end) 1;
}
@keyframes red30ArrivalScan{from{top:-6%;opacity:0}15%{opacity:1}to{top:104%;opacity:0}}
@keyframes red30SignalDecode{
  0%{opacity:.26;filter:blur(2px);transform:translate3d(-5px,0,0)}
  45%{opacity:.82;filter:blur(0);transform:translate3d(2px,0,0)}
  100%{opacity:1;filter:none;transform:none}
}
@keyframes red30CaptureFlash{0%,100%{opacity:1}25%,75%{opacity:.3}50%{opacity:1}}
@media(max-width:380px){
  #hud[data-transmission="red30"] .hud__announcement{padding:16px 17px;gap:12px}
  #hud[data-transmission="red30"] .hud__announcement-copy{gap:8px;padding-bottom:11px}
  #hud[data-transmission="red30"] .hud__announcement strong{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  #hud.hud--red30-ambient-glitch, #hud.hud--red30-ambient-glitch .hud__wanted-zone,
  #hud.hud--red30-ambient-glitch .hud__menu-toggle,
  .red30-fugitive,.red30-fugitive__rift::before,.red30-fugitive__rift::after,.red30-fugitive__noise,
  #hud[data-transmission="red30"] .hud__announcement::before,
  #hud[data-transmission="red30"].hud--announcement-visible .hud__announcement-copy,
  #hud.hud--red30-capturing .hud__announcement strong{
    animation:none!important;transition:none!important;
  }
  #hud[data-transmission="red30"] .hud__announcement::before{display:none}
}