/* dlfi-extras.css
   Styles for: view-toggle, admin Submissions Vault, branded confirm modal,
   no-tel link override, mobile polish, force-desktop override. */

/* ============================================================
   SCISSORS DOCTRINE PANEL — Recruitment page
   ============================================================ */
.scissors-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,27,107,0.10), rgba(20,8,14,0.7));
  border: 1px solid var(--pink);
  padding: 2rem 2rem 1.8rem;
  overflow: hidden;
  box-shadow: 0 0 28px rgba(255,27,107,0.18);
}
@media (max-width: 720px) {
  .scissors-panel { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; padding: 1.6rem 1.2rem; }
  .scissors-panel .scissors-glyph { justify-content: center; }
}
.scissors-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,27,107,0.03) 2px 3px);
  pointer-events: none;
}
.scissors-glyph {
  display: flex; gap: 0.4rem;
  align-items: center;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  flex-shrink: 0;
}
.scissors-glyph .sc-emoji {
  filter: drop-shadow(0 0 14px rgba(255,27,107,0.55));
  animation: scSnip 2.6s ease-in-out infinite;
}
.scissors-glyph .sc-emoji:nth-child(2) { animation-delay: 0.25s; }
.scissors-glyph .sc-emoji:nth-child(3) { animation-delay: 0.5s; }
@keyframes scSnip {
  0%, 100% { transform: rotate(-6deg); }
  35%      { transform: rotate(8deg); }
  60%      { transform: rotate(-4deg); }
}
.scissors-body { position: relative; }
.scissors-body .sc-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.55rem; letter-spacing: 3px;
  color: var(--pink); text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.scissors-body .sc-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.scissors-body .sc-title .italic { color: var(--pink); font-style: italic; }
.scissors-body .sc-quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--pink);
  text-shadow: 0 0 14px var(--pink-glow);
  margin: 0 0 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--pink);
}
.scissors-body .sc-rules {
  list-style: none; padding: 0; margin: 0 0 0.8rem;
  display: grid; gap: 0.4rem;
}
.scissors-body .sc-rules li {
  font-family: var(--f-mono);
  font-size: 0.66rem; letter-spacing: 1.2px;
  color: var(--silver); text-transform: uppercase;
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.6;
}
.scissors-body .sc-rules li::before {
  content: '✂️';
  position: absolute; left: 0; top: 0;
  font-size: 0.85em;
}
.scissors-body .sc-rules li strong { color: var(--pink); font-weight: 700; }
.scissors-body .sc-foot {
  font-family: var(--f-mono);
  font-size: 0.55rem; letter-spacing: 2px;
  color: var(--silver-dim); text-transform: uppercase;
}

/* ============================================================
   "KEEP A COPY" footer inside RECEIVED modal
   ============================================================ */
.received-vault {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(255,27,107,0.4);
  background: rgba(255,27,107,0.04);
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  justify-content: center;
}
.received-vault .rv-tag {
  font-family: var(--f-mono);
  font-size: 0.58rem; letter-spacing: 3px;
  color: var(--pink); text-transform: uppercase;
}
.received-vault .rv-text {
  font-family: var(--f-mono);
  font-size: 0.6rem; letter-spacing: 1.5px;
  color: var(--silver-dim); text-transform: uppercase;
  line-height: 1.6;
  flex: 1; min-width: 200px;
  text-align: left;
}
.received-vault .rv-btn { flex-shrink: 0; }
@media (max-width: 540px) {
  .received-vault { flex-direction: column; text-align: center; }
  .received-vault .rv-text { text-align: center; }
  .received-vault .rv-btn { width: 100%; }
}

/* ============================================================
   DIARY MODAL — Evidence Room
   ============================================================ */
.modal-box.diary-box {
  max-width: 640px;
  text-align: left;
}
.diary-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono);
  font-size: 0.6rem; letter-spacing: 3px;
  color: var(--silver-dim); text-transform: uppercase;
  border-bottom: 1px dotted rgba(255,27,107,0.18);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}
.diary-head .pink { color: var(--pink); }
.diary-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--text);
  margin: 0 0 0.8rem;
  line-height: 1.1;
}
.diary-title .italic { color: var(--pink); font-style: italic; }
.diary-meta {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  font-family: var(--f-mono);
  font-size: 0.6rem; letter-spacing: 2px;
  color: var(--silver-dim); text-transform: uppercase;
  padding: 0.7rem 0.9rem;
  background: rgba(255,27,107,0.04);
  border: 1px solid var(--line);
  margin-bottom: 1.2rem;
}
.diary-meta strong {
  color: var(--text);
  font-family: var(--f-mono);
  font-weight: 500;
  margin-right: 4px;
}
.diary-meta .pink { color: var(--pink); }
.diary-body {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  color: var(--text);
  letter-spacing: 0.005em;
}
.diary-body p {
  margin: 0 0 1rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(255,27,107,0.3);
}
.diary-body p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-weight: 900;
  font-style: italic;
  font-size: 2.4em;
  float: left;
  color: var(--pink);
  text-shadow: 0 0 14px var(--pink-glow);
  line-height: 0.9;
  margin: 0.05em 0.12em 0 0;
}
.diary-lesson {
  margin: 1.4rem 0 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--pink);
  background: rgba(255,27,107,0.06);
  font-family: var(--f-mono);
  font-size: 0.66rem; letter-spacing: 1.5px;
  line-height: 1.6;
  color: var(--text); text-transform: uppercase;
  display: flex; flex-direction: column; gap: 6px;
}
.diary-lesson .dl-label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--pink);
}

/* Make story-cards visibly clickable */
.story-card[onclick] { cursor: pointer; }
.story-card[onclick]::after {
  content: '↗  Open Diary';
  position: absolute;
  bottom: 12px; right: 14px;
  font-family: var(--f-mono);
  font-size: 0.5rem; letter-spacing: 2px;
  color: var(--pink); text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s;
}
.story-card[onclick]:hover::after { opacity: 1; }
.story-card { position: relative; }
/* ============================================================
   tel:-link override — kill iOS auto-blue on phone numbers
   ============================================================ */

/* ============================================================
   WITNESS BADGE on Sideburn Desertion case
   ============================================================ */
.witness-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(5, 2, 4, 0.85);
  border: 1px solid var(--pink);
  color: var(--pink);
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 8px;
  z-index: 5;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 14px rgba(255, 27, 107, 0.35);
}
.witness-badge .wb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
  animation: livePulse 1.4s ease-in-out infinite;
}
.witness-tape {
  position: absolute;
  bottom: 8px; left: 8px;
  /* Leave room on the right for the EV-10 charge badge */
  right: 78px;
  background: rgba(255, 27, 107, 0.88);
  color: #050204;
  font-family: var(--f-federal);
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 3px;
  padding: 3px 8px;
  text-align: center;
  text-transform: uppercase;
  z-index: 5;
  transform: skew(-3deg);
}

/* ============================================================
   UNIVERSAL CLOSE BUTTON — explicit "× CLOSE" label so non-tech
   users instantly know how to dismiss any popup.
   ============================================================ */
.dlfi-close, .modal-close, .mm-close, .pm-close, .av-close {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 6px 12px !important;
  background: rgba(5, 2, 4, 0.92) !important;
  border: 1px solid var(--pink) !important;
  color: var(--pink) !important;
  font-family: var(--f-federal) !important;
  font-weight: 700 !important;
  font-size: 0.6rem !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase;
  cursor: pointer !important;
  z-index: 10;
  transition: all 0.25s;
  height: auto !important;
  box-shadow: 0 0 12px rgba(255,27,107,0.25);
}
.dlfi-close:hover, .modal-close:hover, .mm-close:hover, .pm-close:hover, .av-close:hover {
  background: var(--pink) !important;
  color: #050204 !important;
}
.dlfi-close .dc-x {
  font-family: var(--f-mono);
  font-size: 1rem;
  line-height: 0.8;
  font-weight: 700;
}
.dlfi-close .dc-lbl {
  font-family: var(--f-federal);
  font-size: 0.6rem;
  letter-spacing: 2px;
}

/* ============================================================
   MODAL SCROLL HINT — shows "↓ scroll for more" when overflow
   ============================================================ */
.modal-box.has-scroll::after,
.mm-box.has-scroll::after,
.av-box.has-scroll::after,
.pm-box.has-scroll::after,
.dc-box.has-scroll::after {
  content: '↓  Scroll for more';
  position: sticky;
  bottom: 0;
  display: block;
  margin: 0 -1.4rem -1.4rem;
  padding: 8px 1rem;
  background: linear-gradient(180deg, transparent, rgba(5,2,4,0.96) 40%);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 2.5px;
  color: var(--pink);
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  animation: scrollBounce 1.6s ease-in-out infinite;
  z-index: 8;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* ============================================================
   VAULT count row — count NOT behind close button
   ============================================================ */
#admin-vault .av-count-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.6rem; letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  padding: 0.5rem 0.8rem;
  background: rgba(255,27,107,0.05);
  border: 1px solid rgba(255,27,107,0.18);
}
#admin-vault .av-count-row #av-count { color: var(--pink); }
#admin-vault .av-count-row .av-scroll-hint {
  color: var(--silver-dim);
  font-size: 0.55rem;
}

/* Position close buttons inside modals with safe top-right offset */
#admin-vault .av-close,
#promotion-modal .pm-btn-close,
#module-modal .mm-close,
.modal-overlay .modal-close,
#dlfi-confirm .dc-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
}

a[href^="tel:"], .no-tel, .no-tel a, span.no-tel {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: inherit !important;
  pointer-events: none;
  font: inherit;
  text-shadow: inherit;
}

/* ============================================================
   PHONE / DESKTOP VIEW TOGGLE
   (Shown only on touch / small screens — created by JS)
   ============================================================ */
.view-toggle {
  position: fixed;
  bottom: 8px; left: 8px;
  z-index: 9990;
  display: inline-flex;
  background: rgba(8, 4, 6, 0.85);
  border: 1px solid var(--pink);
  border-radius: 999px;
  padding: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(255,27,107,0.25);
  font-family: var(--f-mono);
  pointer-events: auto;
}
.view-toggle .vt-opt {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: transparent;
  color: var(--silver-dim);
  font-family: inherit;
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer !important;
  transition: all 0.2s;
}
.view-toggle .vt-opt:hover { color: var(--pink); }
.view-toggle .vt-opt.is-on {
  background: var(--pink);
  color: #050204;
  box-shadow: 0 0 12px rgba(255,27,107,0.45);
}
.view-toggle .vt-glyph { font-size: 0.9em; }

/* When forced to desktop view we want all desktop layouts to stick around even
   though the device is narrow. The viewport meta is set to width=1280 so the
   browser will scale; we just need to ensure no mobile-only CSS kicks in. */
body.force-desktop {
  min-width: 1280px;
}
body.force-desktop .view-toggle {
  /* Toggle position stays sensible after scaling */
  bottom: 12px; left: 12px;
}

/* ============================================================
   BRANDED CONFIRM MODAL (replaces window.confirm)
   ============================================================ */
#dlfi-confirm {
  position: fixed; inset: 0;
  z-index: 999999;
  background: radial-gradient(ellipse at center, rgba(20,4,12,0.92), rgba(5,2,4,0.98));
  display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: dcFadeIn 0.3s ease both;
}
#dlfi-confirm.is-on { display: flex; }
@keyframes dcFadeIn { from { opacity: 0; } to { opacity: 1; } }
#dlfi-confirm, #dlfi-confirm * { cursor: default !important; }
#dlfi-confirm button { cursor: pointer !important; }
#dlfi-confirm .dc-box {
  position: relative;
  max-width: 460px; width: 100%;
  background: var(--noir-1);
  border: 1px solid var(--pink);
  padding: 2rem 1.8rem 1.6rem;
  text-align: center;
  box-shadow: 0 0 40px rgba(255,27,107,0.3);
  animation: dcPop 0.35s cubic-bezier(.5,1.6,.4,1) both;
}
@keyframes dcPop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#dlfi-confirm .dc-box::before {
  content: '';
  position: absolute; inset: 6px;
  border: 1px dashed rgba(255,27,107,0.25);
  pointer-events: none;
}
#dlfi-confirm .dc-stamp {
  display: inline-block;
  font-family: var(--f-display);
  font-style: italic; font-weight: 900;
  font-size: 0.9rem; letter-spacing: 4px;
  color: var(--pink);
  border: 2px solid var(--pink);
  padding: 0.35rem 1.1rem;
  transform: rotate(-2deg);
  margin-bottom: 1rem;
  box-shadow: 0 0 18px var(--pink-glow);
}
#dlfi-confirm .dc-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 0.7rem;
  line-height: 1.15;
}
#dlfi-confirm .dc-body {
  font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: 1.5px;
  line-height: 1.8;
  color: var(--silver-dim);
  text-transform: uppercase;
  margin: 0 0 1.3rem;
}
#dlfi-confirm .dc-body .pink { color: var(--pink); }
#dlfi-confirm .dc-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
#dlfi-confirm .dc-actions .btn-outline,
#dlfi-confirm .dc-actions .btn-primary {
  flex: 1; min-width: 140px;
}

/* ============================================================
   ADMIN SUBMISSIONS VAULT
   ============================================================ */
#admin-vault {
  position: fixed; inset: 0;
  z-index: 999998;
  background: radial-gradient(ellipse at center, rgba(20,4,12,0.94), rgba(5,2,4,0.98));
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  animation: dcFadeIn 0.4s ease both;
}
#admin-vault.is-on { display: flex; }
#admin-vault, #admin-vault * { cursor: default !important; }
#admin-vault button, #admin-vault code { cursor: pointer !important; }
#admin-vault input, #admin-vault textarea { cursor: text !important; }
#admin-vault .av-box {
  position: relative;
  width: 100%; max-width: 880px;
  background: var(--noir-1);
  border: 1px solid var(--pink);
  padding: 2rem 1.8rem 1.6rem;
  box-shadow: 0 0 60px rgba(255,27,107,0.25);
  font-family: var(--f-mono);
}
#admin-vault .av-box::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px dashed rgba(255,27,107,0.2);
  pointer-events: none;
}
#admin-vault .av-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent;
  border: 1px solid var(--pink);
  color: var(--pink);
  font-family: var(--f-mono); font-size: 0.8rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all 0.25s;
}
#admin-vault .av-close:hover { background: var(--pink); color: #000; }
#admin-vault .av-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.55rem; letter-spacing: 3px;
  color: var(--silver-dim); text-transform: uppercase;
  border-bottom: 1px solid rgba(255,27,107,0.18);
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
}
#admin-vault .av-head .pink { color: var(--pink); }
#admin-vault .av-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--text);
  line-height: 1;
  margin: 0 0 0.3rem;
}
#admin-vault .av-title .italic { color: var(--pink); font-style: italic; }
#admin-vault .av-sub {
  font-size: 0.6rem; letter-spacing: 2.5px;
  color: var(--silver-dim); text-transform: uppercase;
  margin-bottom: 1.2rem;
}
#admin-vault .av-toolbar {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
#admin-vault .av-list {
  display: grid; gap: 0.8rem;
  max-height: 65vh; overflow-y: auto;
  padding-right: 4px;
}
#admin-vault .av-empty {
  font-family: var(--f-mono);
  font-size: 0.65rem; letter-spacing: 2px;
  color: var(--silver-dim); text-transform: uppercase;
  text-align: center; padding: 2rem 1rem;
  border: 1px dashed var(--line);
}
#admin-vault .av-card {
  background: rgba(255,27,107,0.04);
  border: 1px solid var(--line);
  padding: 0.9rem 1rem;
}
#admin-vault .av-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.55rem; letter-spacing: 2px;
  color: var(--silver-dim); text-transform: uppercase;
  border-bottom: 1px dotted rgba(255,27,107,0.18);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}
#admin-vault .av-id { color: var(--pink); font-weight: 600; }
#admin-vault .av-type { color: var(--text); }
#admin-vault .av-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.66rem;
  line-height: 1.5;
}
#admin-vault .av-k {
  color: var(--silver-dim);
  font-family: var(--f-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.55rem;
}
#admin-vault .av-v {
  color: var(--text);
  font-family: var(--f-body);
  word-break: break-word;
}
#admin-vault .av-foot {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,27,107,0.18);
  font-size: 0.55rem; letter-spacing: 2px;
  color: var(--silver-dim); line-height: 1.7;
  text-transform: uppercase;
}
#admin-vault .av-foot code {
  font-family: var(--f-tech);
  color: var(--pink);
  background: rgba(255,27,107,0.08);
  padding: 1px 5px;
}
#admin-vault .av-foot strong { color: var(--text); }

/* ============================================================
   MOBILE POLISH PASS
   Tightens layout density on Case Files / Hotline / Report and
   makes the top status bar / hero / nav read cleanly on phones.
   ============================================================ */
@media (max-width: 720px) {
  /* Status bar — compress, ensure nothing clips */
  .status-bar {
    font-size: 0.5rem !important;
    padding: 5px 10px !important;
    letter-spacing: 1.5px !important;
    gap: 8px !important;
  }
  .status-bar .sb-group { gap: 8px !important; }
  .status-bar .sb-hide-sm { display: none; }
  .status-bar #utcClock { font-family: var(--f-tech); }

  /* Nav — leaner */
  nav { padding: 0 12px !important; height: 56px !important; }
  .nav-seal { width: 36px !important; height: 36px !important; }
  .nav-brand-text .brand-name { font-size: 0.95rem !important; }
  .nav-brand-text .brand-sub { display: none; }
  .hamburger { padding: 10px; }

  /* Hero buttons stack and grow */
  .page-hero .btn-primary,
  .page-hero .btn-outline {
    width: 100%; justify-content: center;
    padding: 14px 18px;
    font-size: 0.72rem;
  }
  .page-hero > div[style*="display: flex"][style*="gap: 1rem"] {
    flex-direction: column;
  }

  /* Case files filter bar — wraps cleanly */
  #cases-grid .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 1rem;
  }
  #cases-grid .filter-bar > div[style*="margin-left: auto"] {
    margin-left: 0 !important;
    width: 100%;
    justify-content: space-between;
  }
  #cases-grid .filter-bar .filter-label { font-size: 0.55rem; }
  #cases-grid .filter-bar .filter-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 0.58rem;
    padding: 9px 8px;
    text-align: center;
  }
  /* Wrap row of filter buttons */
  #cases-grid .filter-bar { flex-wrap: wrap; }
  #cases-grid .filter-bar > .filter-label { flex-basis: 100%; }
  #cases-grid .filter-bar > .filter-btn { flex: 1 1 calc(50% - 4px); }

  /* Cases grid — one per row with big tap targets */
  #cases-grid .grid-4 { grid-template-columns: 1fr !important; gap: 1rem; }
  .case-card .case-title { font-size: 1rem; }
  .case-card .case-num { font-size: 0.55rem; }
  .case-card .ev-photo,
  .case-card .ev-dossier,
  .case-card .ev-surveillance,
  .case-card .ev-polaroid {
    aspect-ratio: 16/10;
  }
  .archive-sealed {
    flex-direction: column;
    padding: 1.6rem 1rem !important;
    text-align: center;
    gap: 0.8rem;
  }
  .archive-sealed .seal-divider { display: none; }
  .archive-sealed .seal-meta { text-align: center; font-size: 0.55rem; }
  .archive-sealed .seal-stamp {
    font-size: 1.1rem !important;
    letter-spacing: 3px !important;
    padding: 0.45rem 1rem !important;
  }

  /* Hotline page — phone display + dispatch panel */
  #page-hotline .grid-2 { grid-template-columns: 1fr !important; gap: 1.4rem; }
  #page-hotline .neon-text { font-size: clamp(1.1rem, 5.5vw, 1.5rem) !important; letter-spacing: 1.5px !important; }
  #page-hotline .neon-frame { padding: 1rem !important; }
  #page-hotline .hf-quote { font-size: 0.85rem; }
  #page-hotline .hf-bracket { width: 24px; height: 24px; }
  #page-hotline .call-card { padding: 1.2rem 1rem; }

  /* Report page — tighter form */
  #page-report .grid-2 { grid-template-columns: 1fr !important; gap: 0.8rem; }
  #page-report .hero-wrap,
  #page-report .hero-grid,
  #page-report .hero-grid > * {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }
  #page-report .hero-grid { grid-template-columns: 1fr !important; }
  #page-report form {
    padding: 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #page-report .form-label { font-size: 0.6rem; }
  #page-report .form-input,
  #page-report .form-textarea,
  #page-report .form-select {
    font-size: 16px !important;
    padding: 11px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #page-report .btn-primary { font-size: 0.72rem !important; padding: 16px !important; }
  #page-report .check-list li { font-size: 0.7rem; }
  /* Side panel under form on phone */
  #page-report .hero-grid,
  #page-report .grid-2[data-reveal] { grid-template-columns: 1fr !important; }

  /* Make sure the report-page hero is fully visible (was right-cut on iOS) */
  #page-report .page-hero { padding: 1.5rem 1rem 2.5rem !important; }
  #page-report .display-xl { font-size: clamp(2rem, 8vw, 3rem) !important; }

  /* "Report A Disturbance" CTA should be reachable on phone via the
     mobile menu (we already have it). Also expose it as a floating
     bottom-of-screen button when not on the report page itself. */
  .nav-cta { display: none; }

  /* Modals — make them feel native */
  .modal-overlay { padding: 0.6rem !important; align-items: flex-start; }
  .modal-box { max-height: 92vh; overflow-y: auto; padding: 1.4rem 1rem !important; }
  .modal-box .display-md, .modal-box h2 { font-size: 1.4rem !important; }
  .dossier-meta-grid { grid-template-columns: 1fr !important; gap: 0.5rem; }
  /* Close button must stay a pill with "× CLOSE" label even on phones — DO NOT shrink to a square */
  .modal-close, .mm-close, .av-close, .pm-close, .dlfi-close {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 7px 12px !important;
    font-size: 0.6rem !important;
  }

  /* YouTube panel */
  .yt-panel { padding: 1.2rem !important; }

  /* Quiz on phone */
  .quiz-head .qh-q { font-size: 0.9rem !important; line-height: 1.35 !important; }
  .quiz-head .qh-num { font-size: 1.2rem !important; }

  /* View toggle position so it doesn't fight audio toggle */
  .audio-toggle { bottom: 48px !important; right: 8px !important; }
  .view-toggle { bottom: 48px !important; left: 8px !important; }
  /* Slimmer ticker on phone — keep visible but compact */
  .ticker-wrap { height: 30px !important; }
  .ticker-label {
    font-size: 0.5rem !important; letter-spacing: 1.5px !important;
    padding: 5px 9px !important;
  }
  .ticker-track span { font-size: 0.55rem !important; letter-spacing: 1.5px !important; }
  /* Push page content above the ticker on phones */
  .page-content > footer { margin-bottom: 30px; }
  body { padding-bottom: 30px; }

  /* Big-quote alignment */
  .big-quote { font-size: clamp(1.1rem, 4.5vw, 1.5rem); padding: 0 0.5rem; }
  .footer-marquee { font-size: 0.52rem !important; letter-spacing: 2px !important; }
}

/* Even tighter for very small phones */
@media (max-width: 380px) {
  .status-bar { font-size: 0.45rem !important; letter-spacing: 1px !important; padding: 4px 8px !important; }
  nav { height: 52px !important; padding: 0 10px !important; }
  .nav-seal { width: 32px !important; height: 32px !important; }
  .nav-brand-text .brand-name { font-size: 0.85rem !important; }
  #cases-grid .filter-bar .filter-btn { font-size: 0.55rem; padding: 8px 6px; }
  .display-xl { font-size: clamp(2rem, 9vw, 3rem) !important; }
}

/* Force-desktop overrides any mobile-specific styling */
body.force-desktop .status-bar .sb-hide-sm,
body.force-desktop .nav-brand-text .brand-sub { display: inline !important; }
body.force-desktop .nav-links, body.force-desktop .nav-cta { display: flex !important; }
body.force-desktop .hamburger { display: none !important; }
body.force-desktop .mobile-menu { display: none !important; }
body.force-desktop .filter-bar { flex-direction: row !important; }
body.force-desktop .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
body.force-desktop .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
body.force-desktop .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
body.force-desktop .hero-grid,
body.force-desktop .hero-grid-3 { grid-template-columns: 1fr 1fr !important; }
/* When forced desktop, the nav has 7 links + CTA + audio — let it scroll horizontally
   if the viewport is still narrower than nav can fit cleanly */
body.force-desktop nav {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
body.force-desktop nav::-webkit-scrollbar { display: none; }
body.force-desktop .nav-links { flex-wrap: nowrap; }
body.force-desktop .nav-links li a { white-space: nowrap; }

/* Desktop nav scroll-on-overflow even when not forced */
nav { overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
.nav-links { flex-wrap: nowrap; }
.nav-links li a { white-space: nowrap; }


/* ============================================================
   Phone nav swipe affordance — make scrollable nav obviously scrollable
   ============================================================ */
@media (max-width: 900px) {
  nav {
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .nav-swipe-hint {
    position: fixed;
    top: 60px;
    right: 8px;
    z-index: 990;
    background: rgba(5, 2, 4, 0.9);
    border: 1px solid var(--pink);
    color: var(--pink);
    font-family: var(--f-mono);
    font-size: 0.5rem;
    letter-spacing: 1.5px;
    padding: 5px 8px;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255,27,107,0.3);
    animation: navHintFade 6s ease-out 1.5s forwards;
  }
  @keyframes navHintFade {
    0%, 70% { opacity: 1; transform: translateX(0); }
    100%    { opacity: 0; transform: translateX(12px); pointer-events: none; visibility: hidden; }
  }
}
body.force-desktop nav { mask-image: none !important; -webkit-mask-image: none !important; }

/* Floating bottom-bar "Report A Disturbance" so the CTA is visible on phone */
@media (max-width: 720px) {
  .mobile-cta-floating {
    position: fixed;
    bottom: 88px;
    right: 8px;
    z-index: 985;
    display: inline-flex;
    align-items: center; gap: 8px;
    background: var(--pink);
    color: #050204;
    font-family: var(--f-federal);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 12px 14px;
    border: 1px solid var(--pink);
    box-shadow: 0 0 20px rgba(255,27,107,0.45);
    cursor: pointer;
    text-decoration: none;
  }
  .mobile-cta-floating::before {
    content: '⚡';
    font-size: 1em;
  }
}
.mobile-cta-floating { display: none; }
@media (max-width: 720px) { .mobile-cta-floating { display: inline-flex; } }


/* ============================================================
   REPORT PAGE — robust mobile layout (overrides inline styles)
   ============================================================ */
@media (max-width: 720px) {
  #page-report .page-hero {
    padding: 1.5rem 12px 2.5rem !important;
  }
  #page-report .hero-wrap {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #page-report .hero-grid-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
    width: 100% !important;
  }
  #page-report .hero-grid-3 > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Reorder: form first on phone */
  #page-report .hero-grid-3 > :nth-child(1) { order: 2; }
  #page-report .hero-grid-3 > :nth-child(2) { order: 1; }
  #page-report .hero-grid-3 > :nth-child(3) { order: 3; }
  /* Form internals */
  #page-report form {
    padding: 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  #page-report form .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  #page-report .form-input,
  #page-report .form-textarea,
  #page-report .form-select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    padding: 11px 12px !important;
    box-sizing: border-box;
  }
  /* Anonymous badge — bring inside viewport on small screens */
  #page-report [style*="top: -16px"][style*="left: -16px"] {
    top: -6px !important;
    left: 0 !important;
    width: 64px !important; height: 64px !important;
  }
  /* Shrink the cinematic left visual */
  #page-report [style*="aspect-ratio: 3/4"] {
    aspect-ratio: 16/9 !important;
    min-height: 200px;
    padding: 1rem !important;
  }
}

/* ============================================================
   CLOSE BUTTON SPACING — ensure no text under it
   ============================================================ */
.modal-box, .mm-box, .av-box, .pm-box, .dc-box {
  padding-top: 3.4rem !important;
}
.modal-box .stamp:first-of-type,
.mm-box .mm-head,
.av-box .av-head,
.pm-box .pm-eyebrow,
.dc-box .dc-stamp {
  margin-top: 0.4rem;
}

/* Position close buttons so they never overlap content */
.dlfi-close, .modal-close, .mm-close, .pm-close, .av-close {
  top: 10px !important;
  right: 10px !important;
}

/* ============================================================
   HIDE floating toggles whenever a modal is open
   (Class added/removed by JS — see dlfi-extras.js modal observer)
   ============================================================ */
body.modal-open .audio-toggle,
body.modal-open .view-toggle,
body.modal-open .mobile-cta-floating,
body.modal-open .nav-swipe-hint {
  display: none !important;
}

/* Scroll hint moved INSIDE the modal box, above any other UI */
.modal-box.has-scroll::after,
.mm-box.has-scroll::after,
.av-box.has-scroll::after,
.pm-box.has-scroll::after,
.dc-box.has-scroll::after {
  bottom: 0 !important;
  z-index: 50 !important;
}


/* ============================================================
   DEPARTMENT — make every profile card OBVIOUSLY clickable
   ============================================================ */
.profile-card.is-clickable,
.chief-clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}
.profile-card.is-clickable:hover,
.chief-clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(255,27,107,0.35);
}
.profile-card.is-clickable::after {
  content: '↗  Tap to read bio';
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--f-mono);
  font-size: 0.55rem; letter-spacing: 2px;
  color: var(--pink);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  background: rgba(5,2,4,0.85);
  padding: 4px 8px;
  border: 1px solid var(--pink);
}
.profile-card.is-clickable:hover::after,
.profile-card.is-clickable:focus-visible::after {
  opacity: 1;
}
/* Always-visible tap hint on touch devices */
@media (pointer: coarse) {
  .profile-card.is-clickable::after,
  .chief-clickable::after,
  .chief-clickable .chief-tap-hint { opacity: 1 !important; }
}
.profile-card.is-clickable::before {
  /* subtle border-glow pulse to draw eye */
  content: '';
  position: absolute; inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  animation: clickablePulse 3.6s ease-in-out infinite;
  z-index: 1;
}
@keyframes clickablePulse {
  0%, 100% { border-color: transparent; box-shadow: none; }
  50%      { border-color: rgba(255, 27, 107, 0.45); box-shadow: 0 0 14px rgba(255,27,107,0.25); }
}

/* Universal "click me" affordance helpers — applied via JS to make
   clickable items obviously clickable for non-technical users. */
.click-affordance {
  position: absolute;
  bottom: 10px; right: 12px;
  background: var(--pink);
  color: #050204;
  font-family: var(--f-federal);
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255,27,107,0.45);
  z-index: 4;
}

/* ============================================================
   BIO MODAL — personnel file dossier
   ============================================================ */
.modal-box.bio-box {
  max-width: 560px;
  text-align: left;
}
.bio-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono);
  font-size: 0.58rem; letter-spacing: 3px;
  color: var(--silver-dim); text-transform: uppercase;
  border-bottom: 1px dotted rgba(255,27,107,0.22);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.bio-head .pink { color: var(--pink); }
.bio-portrait {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3/4;
  margin: 0 auto 1rem;
  border: 1px solid var(--pink);
  background: var(--noir-2);
  overflow: hidden;
  box-shadow: 0 0 24px rgba(255,27,107,0.25);
}
.bio-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(0.95);
}
.bio-portrait-scan {
  position: absolute; left: 0; right: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(255,27,107,0.16), transparent);
  pointer-events: none;
  animation: scanlineMove 4s linear infinite;
}
.bio-portrait .bio-badge-id,
.bio-portrait .bio-badge-clear {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 0.5rem; letter-spacing: 2px;
  color: #050204;
  background: var(--pink);
  padding: 3px 7px;
  text-transform: uppercase;
}
.bio-portrait .bio-badge-id { top: 8px; left: 8px; }
.bio-portrait .bio-badge-clear { top: 8px; right: 8px; }

.bio-title-row {
  text-align: center;
  margin-bottom: 0.6rem;
}
.bio-rank {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.55rem; letter-spacing: 3px;
  color: var(--pink); text-transform: uppercase;
  margin-bottom: 4px;
}
.bio-name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--text);
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 0 14px var(--pink-glow);
}
.bio-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: 0.58rem; letter-spacing: 2px;
  color: var(--silver-dim); text-transform: uppercase;
  padding: 0.6rem 0.8rem;
  background: rgba(255,27,107,0.04);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}
.bio-meta strong { color: var(--text); font-weight: 500; margin-right: 4px; }
.bio-meta .pink { color: var(--pink); }

.bio-section {
  margin-bottom: 1.2rem;
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--pink);
  background: rgba(255,27,107,0.04);
}
.bio-section-h {
  font-family: var(--f-mono);
  font-size: 0.58rem; letter-spacing: 3px;
  color: var(--pink); text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.bio-body {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  line-height: 1.7;
  color: var(--text);
}
.bio-body p {
  margin: 0 0 0.7rem;
}
.bio-body p:last-child { margin-bottom: 0; }
.bio-quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--pink);
  text-shadow: 0 0 12px var(--pink-glow);
  line-height: 1.4;
}

/* ============================================================
   CLOSE BUTTONS — make sure they sit INSIDE every modal box
   ============================================================ */
.modal-box, .mm-box, .av-box, .pm-box, .dc-box {
  position: relative !important;
  padding-top: 3.4rem !important;
}
.modal-overlay .modal-close,
#admin-vault .av-close,
#module-modal .mm-close,
#dlfi-confirm .dc-close,
.modal-box .dlfi-close,
.dlfi-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
}


/* ============================================================
   MODAL-PREVIEW VARIANT for classified dossiers
   Larger container = stamp can be calmer and easier to read.
   No glitch in the modal — the home card has the motion; the
   modal preview is the "evidence photo" version.
   ============================================================ */
.ev-dossier.is-classified.in-modal { aspect-ratio: 16/10; }
.ev-dossier.is-classified.in-modal::before {
  animation: none !important;
  font-size: clamp(1.6rem, 6vw, 2.6rem) !important;
  letter-spacing: 5px !important;
  padding: 8px 22px !important;
  text-shadow: 0 0 12px var(--pink), 0 0 30px var(--pink-glow) !important;
  opacity: 1 !important;
  border-width: 3px !important;
  max-width: calc(100% - 32px) !important;
}

/* ============================================================
   "TAP TO OPEN" affordance — show on case cards, training cards,
   featured cases on home page, and the Chief Investigator card.
   Make it OBVIOUS to non-technical users they can click.
   ============================================================ */
.case-card { cursor: pointer; position: relative; }
.case-card::after {
  content: '↗ Open File';
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: var(--pink);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  background: rgba(5, 2, 4, 0.85);
  padding: 4px 8px;
  border: 1px solid var(--pink);
  z-index: 6;
}
.case-card:hover::after { opacity: 1; }
@media (pointer: coarse) {
  /* Always show on touch devices (no hover state) */
  .case-card::after { opacity: 1; }
}

/* Training cards on Standard Issue Curriculum */
.training-card { cursor: pointer; position: relative; }
.training-card::after {
  content: '↗ Tap to read';
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: var(--pink);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  background: rgba(5, 2, 4, 0.85);
  padding: 4px 8px;
  border: 1px solid var(--pink);
  z-index: 6;
}
.training-card:hover::after { opacity: 1; }
@media (pointer: coarse) {
  .training-card::after { opacity: 1; }
}

/* Chief Investigator card explicit affordance */
.chief-clickable {
  cursor: pointer !important;
  position: relative;
}
.chief-clickable::after {
  content: '↗ Tap to read bio';
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.55rem;
  letter-spacing: 2.5px;
  color: var(--pink);
  text-transform: uppercase;
  background: rgba(5, 2, 4, 0.85);
  padding: 5px 10px;
  border: 1px solid var(--pink);
  z-index: 8;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s;
}
.chief-clickable:hover::after,
.chief-clickable:focus-visible::after { opacity: 1; }

/* ============================================================
   STRONGER mobile close-button override — ensure it sits INSIDE
   the modal box with its full "× CLOSE" label readable.
   ============================================================ */
@media (max-width: 720px) {
  .modal-close, .mm-close, .av-close, .pm-close, .dlfi-close {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 12px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    gap: 5px !important;
    border-radius: 0 !important;
    box-sizing: content-box !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .modal-close .dc-x, .mm-close .dc-x, .av-close .dc-x, .pm-close .dc-x, .dlfi-close .dc-x {
    font-size: 0.95rem !important;
    line-height: 1 !important;
  }
  .modal-close .dc-lbl, .mm-close .dc-lbl, .av-close .dc-lbl, .pm-close .dc-lbl, .dlfi-close .dc-lbl {
    font-size: 0.55rem !important;
  }
}


/* ============================================================
   EVIDENCE BOARD — Case Files hero centerpiece
   Pinned polaroids, manila folder, sticky note, magnifying glass.
   Animated and crowded on purpose — feels like a detective desk.
   ============================================================ */
.evidence-board {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(15,8,11,0.6), rgba(5,2,4,0.9));
  border: 1px solid var(--line);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.6),
    0 0 30px rgba(255,27,107,0.18);
  overflow: hidden;
}
/* Subtle corkboard texture */
.evidence-board::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,27,107,0.06), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(120, 50, 80, 0.05), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px);
  pointer-events: none;
}
.eb-string {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(255,27,107,0.4));
  animation: ebStringPulse 4s ease-in-out infinite;
}
@keyframes ebStringPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
.eb-card {
  position: absolute;
  z-index: 3;
  background: #1a0e14;
  border: 1px solid var(--line);
  padding: 6px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.55),
    0 0 18px rgba(255,27,107,0.08);
  transition: transform 0.5s var(--ease-out-soft);
  animation: ebFloat 5s ease-in-out infinite;
}
@keyframes ebFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-3px) rotate(calc(var(--rot, 0deg) + 0.4deg)); }
}
.eb-card:hover {
  z-index: 10;
  transform: rotate(0deg) scale(1.08) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.7), 0 0 30px rgba(255,27,107,0.4) !important;
  animation-play-state: paused;
}
.eb-pin {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff6da0, #c00858 70%, #6a042e);
  box-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px rgba(255,27,107,0.55);
  z-index: 4;
}
.eb-pin--pink {
  background: radial-gradient(circle at 35% 35%, #ffe26b, #f4a900 70%, #806000);
  box-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px rgba(255, 196, 0, 0.5);
}

/* Polaroid variants */
.eb-polaroid {
  width: 38%;
  padding: 6px 6px 26px;
}
.eb-polaroid .eb-img {
  width: 100%; aspect-ratio: 4/5;
  background: #050204;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,27,107,0.18);
}
.eb-img--surveillance {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(120,255,160,0.15), transparent 60%),
    linear-gradient(180deg, #0c1a14, #050b08);
}
.eb-img--surveillance .eb-crosshair {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(120,255,160,0.5);
  font-size: 1.5rem;
  text-shadow: 0 0 8px rgba(120,255,160,0.6);
}
.eb-img--surveillance .eb-rec {
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px;
  background: #ff2a2a;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff2a2a;
  animation: livePulse 1s ease-in-out infinite;
}
.eb-img--surveillance .eb-scan {
  position: absolute; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(120,255,160,0.18), transparent);
  animation: scanlineMove 3s linear infinite;
  pointer-events: none;
}
.eb-img--silhouette {
  background: linear-gradient(180deg, #2a0d1a, #050204);
}
.eb-img--silhouette .eb-silhouette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 38% 50% at 50% 35%, rgba(50,20,32,1), transparent 70%),
    radial-gradient(ellipse 28% 28% at 50% 30%, rgba(30,10,18,1), transparent 70%);
}
.eb-img--silhouette .eb-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,27,107,0.35), transparent 50%);
  animation: ebFlash 4.5s ease-in-out infinite;
}
@keyframes ebFlash {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
  10%, 12% { opacity: 1.2; }
  14% { opacity: 0.3; }
}
.eb-caption {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 0.45rem;
  letter-spacing: 1.2px;
  color: var(--silver-dim);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}

/* Folder */
.eb-folder {
  width: 42%;
  background: linear-gradient(180deg, #2d1a22, #1a0e14);
  border: 1px solid rgba(255,27,107,0.25);
  padding: 22px 8px 8px;
}
.eb-folder .eb-tab {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--pink);
  color: #050204;
  font-family: var(--f-mono);
  font-size: 0.45rem;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.eb-folder-body {
  position: relative;
  background: #0e0508;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.eb-folder .eb-bar {
  height: 4px;
  width: 90%;
  background: rgba(255,255,255,0.06);
  margin-bottom: 5px;
}
.eb-folder .eb-stamp {
  position: absolute;
  bottom: 6px; right: 6px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--pink);
  border: 1.5px solid var(--pink);
  padding: 2px 6px;
  transform: rotate(-6deg);
  box-shadow: 0 0 10px rgba(255,27,107,0.4);
  animation: ebStampPulse 2.4s ease-in-out infinite;
}
@keyframes ebStampPulse {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(-6deg) scale(1.06); }
}

/* Sticky note */
.eb-note {
  width: 40%;
  background: linear-gradient(180deg, rgba(255,27,107,0.18), rgba(255,27,107,0.05));
  border: 1px solid rgba(255,27,107,0.4);
  padding: 8px 10px;
  font-family: var(--f-display);
  font-style: italic;
  color: var(--text);
}
.eb-note-tag {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.45rem;
  letter-spacing: 2px;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.eb-note-body {
  font-size: 0.55rem;
  line-height: 1.5;
}

/* Position each card */
.eb-1 { top: 14%;  left: 8%;   --rot: -7deg;  transform: rotate(-7deg); animation-delay: 0s; }
.eb-2 { top: 18%;  left: 50%;  --rot: 5deg;   transform: rotate(5deg);  animation-delay: 0.7s; }
.eb-3 { top: 52%;  left: 12%;  --rot: 4deg;   transform: rotate(4deg);  animation-delay: 1.4s; }
.eb-4 { top: 56%;  left: 52%;  --rot: -4deg;  transform: rotate(-4deg); animation-delay: 2.1s; }

/* Magnifier — orbits over the board */
.eb-magnifier {
  position: absolute;
  width: 64px; height: 64px;
  pointer-events: none;
  z-index: 5;
  animation: ebMagnifierOrbit 14s linear infinite;
}
.eb-magnifier-glass {
  width: 48px; height: 48px;
  border: 3px solid var(--pink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle, rgba(255,27,107,0.18) 0%, rgba(255,27,107,0.04) 60%, transparent 100%);
  box-shadow:
    0 0 18px var(--pink-glow),
    inset 0 0 18px rgba(255,27,107,0.25);
  backdrop-filter: blur(0.5px);
}
.eb-magnifier-handle {
  position: absolute;
  bottom: -4px; right: -2px;
  width: 22px; height: 5px;
  background: linear-gradient(90deg, var(--pink), #6a042e);
  transform: rotate(45deg);
  transform-origin: left center;
  border-radius: 2px;
  box-shadow: 0 0 8px var(--pink-glow);
}
@keyframes ebMagnifierOrbit {
  0%   { top: 20%;  left: 10%; transform: rotate(0deg); }
  25%  { top: 18%;  left: 65%; transform: rotate(8deg); }
  50%  { top: 55%;  left: 64%; transform: rotate(-4deg); }
  75%  { top: 60%;  left: 16%; transform: rotate(5deg); }
  100% { top: 20%;  left: 10%; transform: rotate(0deg); }
}

/* Corner stamps */
.eb-corner {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: var(--silver-dim);
  text-transform: uppercase;
  line-height: 1.5;
  pointer-events: none;
  z-index: 2;
}
.eb-corner-tl { top: 8px; left: 10px; }
.eb-corner-br { bottom: 8px; right: 10px; text-align: right; }

@media (max-width: 720px) {
  .evidence-board { max-width: 100%; aspect-ratio: 4/3; }
  .eb-polaroid { width: 32%; }
  .eb-folder { width: 36%; }
  .eb-note { width: 36%; }
  .eb-caption { font-size: 0.42rem; }
  .eb-magnifier { width: 50px; height: 50px; }
  .eb-magnifier-glass { width: 36px; height: 36px; }
}


/* ============================================================
   EVIDENCE BOARD — real photo backgrounds for polaroids
   ============================================================ */
.eb-img--surveillance,
.eb-img--silhouette {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* When a photo is loaded, soften the green/pink gradient overlays */
.eb-img--surveillance[style*="background-image"]::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(120,255,160,0.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.45));
  pointer-events: none;
}
.eb-img--silhouette[style*="background-image"]::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,27,107,0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.5));
  pointer-events: none;
  mix-blend-mode: multiply;
}
.eb-img--silhouette[style*="background-image"] .eb-silhouette { display: none; }

/* Small timestamp tag inside each polaroid frame */
.eb-img .eb-ts {
  position: absolute;
  bottom: 4px; left: 5px;
  font-family: var(--f-tech, var(--f-mono));
  font-size: 0.42rem;
  letter-spacing: 1.2px;
  color: rgba(255, 196, 220, 0.9);
  text-shadow: 0 0 6px rgba(255, 27, 107, 0.7);
  pointer-events: none;
  z-index: 3;
}


/* ============================================================
   AUDIO HINT — pulsing pill near the audio toggle, hides after gesture
   ============================================================ */
.audio-hint {
  position: fixed;
  bottom: 92px; right: 12px;
  z-index: 989;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(8, 4, 6, 0.92);
  border: 1px solid var(--pink);
  color: var(--pink);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(255, 27, 107, 0.45);
  pointer-events: none;
  animation: audioHintPulse 1.6s ease-in-out infinite;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.audio-hint .ah-icon { font-size: 0.85rem; }
.audio-hint::after {
  /* small arrow nudge pointing toward the audio toggle */
  content: '↘';
  margin-left: 4px;
  color: var(--pink);
}
.audio-hint.is-dismissed {
  opacity: 0;
  transform: translateY(8px);
  animation: none;
  pointer-events: none;
}
@keyframes audioHintPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 16px rgba(255,27,107,0.4); }
  50%      { transform: translateY(-3px); box-shadow: 0 0 28px rgba(255,27,107,0.7); }
}
/* Hide entirely once a modal is open or on mobile force-desktop crowding */
body.modal-open .audio-hint { display: none !important; }
@media (max-width: 720px) {
  .audio-hint { bottom: 96px; right: 8px; font-size: 0.52rem; padding: 6px 11px; letter-spacing: 1.5px; }
}


/* ============================================================
   RECRUIT CARD — extra cinematic animation
   ============================================================ */
.recruit-card {
  position: relative;
  /* overflow stays visible so the RECRUIT corner stamp isn't clipped;
     the sweep + scanline overlays still get clipped by .rc-anim-clip below */
  overflow: visible;
}
/* Inner wrapper that clips the diagonal scan + grain to the card body */
.recruit-card .rc-anim-clip {
  position: absolute; inset: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
/* Pulsing pink border halo */
.recruit-card {
  animation: recruitCardHalo 3.2s ease-in-out infinite;
}
@keyframes recruitCardHalo {
  0%, 100% {
    box-shadow:
      0 0 22px rgba(255,27,107,0.20),
      inset 0 0 14px rgba(255,27,107,0.08),
      0 0 0 0 rgba(255,27,107,0.4);
  }
  50% {
    box-shadow:
      0 0 38px rgba(255,27,107,0.45),
      inset 0 0 22px rgba(255,27,107,0.18),
      0 0 0 6px rgba(255,27,107,0.0);
  }
}

/* Diagonal scan sweep across the card (clipped to body via inset) */
.recruit-card::after {
  content: '';
  position: absolute; inset: 1px;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 27, 107, 0.18) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 250% 250%;
  background-repeat: no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: recruitCardSweep 5s linear infinite;
  z-index: 2;
  overflow: hidden;
  clip-path: inset(0);
}
@keyframes recruitCardSweep {
  0%   { background-position: -150% -150%; }
  100% { background-position: 250% 250%; }
}

/* Faint scanline grain over the card */
.recruit-card::before {
  background:
    repeating-linear-gradient(0deg,
      transparent 0 2px,
      rgba(255, 27, 107, 0.04) 2px 3px),
    inherit;
  animation: recruitCardJitter 4s steps(8) infinite;
}
@keyframes recruitCardJitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-0.5px, 0.5px); }
  50%  { transform: translate(0.5px, -0.5px); }
  75%  { transform: translate(-0.5px, 0); }
  100% { transform: translate(0, 0); }
}

/* RECRUIT stamp — bouncy tilt animation, glow throb */
.recruit-card .rc-stamp {
  animation: recruitStampSway 2.8s ease-in-out infinite;
  transform-origin: center;
  z-index: 5;
}
@keyframes recruitStampSway {
  0%, 100% {
    transform: rotate(6deg) scale(1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  35% {
    transform: rotate(10deg) scale(1.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 18px rgba(255,27,107,0.55);
  }
  70% {
    transform: rotate(4deg) scale(0.98);
  }
}

/* Live status pulse on the ID number */
.recruit-card .rc-id {
  animation: recruitIdGlow 2.2s ease-in-out infinite;
}
@keyframes recruitIdGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(255,27,107,0.4); }
  50%      { text-shadow: 0 0 18px rgba(255,27,107,0.9); }
}

/* CLASSIFIED codename glitches every few seconds */
.recruit-card .rc-row .v {
  position: relative;
}
.recruit-card .rc-row:nth-child(3) .v { /* Codename row */
  animation: recruitClassifiedGlitch 5s steps(1) infinite;
}
@keyframes recruitClassifiedGlitch {
  0%, 80%, 100% {
    color: var(--text);
    text-shadow: none;
    transform: translateX(0);
  }
  82% {
    color: var(--pink);
    text-shadow: 1.5px 0 0 #00f6ff, -1.5px 0 0 #ff0050;
    transform: translateX(0.8px);
  }
  84% {
    color: var(--text);
    text-shadow: -1.5px 0 0 #00f6ff, 1.5px 0 0 #ff0050;
    transform: translateX(-0.8px);
  }
  86% {
    color: var(--text);
    text-shadow: none;
    transform: translateX(0);
  }
}

/* Status ACTIVE blinks like a live LED */
.recruit-card .rc-row:nth-child(4) .v {
  animation: recruitActiveBlink 1.6s ease-in-out infinite;
}
@keyframes recruitActiveBlink {
  0%, 100% { color: var(--pink); text-shadow: 0 0 8px rgba(255,27,107,0.5); }
  50%      { color: #ff6ba8; text-shadow: 0 0 18px rgba(255,27,107,0.95); }
}

/* Current rank block — slow breathing glow */
.recruit-card .rc-current-rank {
  position: relative;
  overflow: hidden;
  animation: recruitRankPulse 3.6s ease-in-out infinite;
}
@keyframes recruitRankPulse {
  0%, 100% {
    background: rgba(255,27,107,0.05);
    border-color: rgba(255,27,107,0.25);
  }
  50% {
    background: rgba(255,27,107,0.12);
    border-color: rgba(255,27,107,0.55);
  }
}
.recruit-card .rc-current-rank::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,27,107,0.18), transparent);
  animation: recruitRankSweep 3.2s linear infinite;
  pointer-events: none;
}
@keyframes recruitRankSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.recruit-card .rc-current-rank .nm {
  animation: recruitRankNameGlow 3.2s ease-in-out infinite;
}
@keyframes recruitRankNameGlow {
  0%, 100% { text-shadow: 0 0 12px var(--pink-glow); }
  50%      { text-shadow: 0 0 22px var(--pink-glow), 0 0 38px rgba(255,27,107,0.45); }
}

/* Subtle hover lift */
.recruit-card:hover {
  transform: translateY(-2px);
  transition: transform 0.4s ease;
}

/* Mobile: Evidence Room story cards always show 'Tap to read diary' hint
   so visitors on phones know the popups are clickable. */
@media (pointer: coarse) {
  .story-card[onclick]::after {
    content: '↗ Tap to read diary';
    opacity: 1;
  }
  /* Give the story body breathing room so the badge doesn't overlap text. */
  .story-card { padding-bottom: 2.4rem; }
}

/* Mobile: Tap to read bio on Chief Investigator card sits very close to the
   'NO SARCASM. NO CLASS. CASE CLOSED.' neon frame text. Drop it lower so
   there's clear visual breathing room. */
@media (pointer: coarse) {
  .chief-clickable { padding-bottom: 2.2rem; }
  .chief-clickable::after { bottom: -8px; }
}