/* The radio bunker decoder (/map/<slug>/radio, templates/map_radio.html). The site's own look: the wiki panels'
 * opaque navy (#12182a, wiki-browse.css .wiki-panel), its uppercase section labels and cyan accent (#00d4ff); only
 * what Tailwind cannot say lives here (the tape, the code boxes, the cards). */
.rd-panel {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: #12182a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.rd-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}
.rd-mono, .rd-tape, .rd-grid, .rd-digits { font-family: 'Roboto Mono', ui-monospace, Consolas, monospace; }

/* buttons */
.rd-src, .rd-link-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.rd-src:hover, .rd-link-btn:hover { border-color: rgba(0, 212, 255, 0.5); color: #fff; }
.rd-src-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.rd-src-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.rd-src-stop { background: rgba(220, 38, 38, 0.18); border-color: rgba(248, 113, 113, 0.45); color: #fecaca; }
.rd-src[hidden] { display: none; }
.rd-src:disabled, .rd-src.rd-off { opacity: 0.45; cursor: not-allowed; }
.rd-src:focus-visible, .rd-link-btn:focus-visible, .rd-src:focus-within { outline: 2px solid #00d4ff; outline-offset: 2px; }
.rd-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rd-link-btn { min-height: 40px; font-size: 0.85rem; }

/* when the radio plays */
.rd-onair {
  display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem;
  border: 1px solid rgba(250, 204, 21, 0.35); background: rgba(250, 204, 21, 0.08); font-size: 0.85rem; color: #e2e8f0;
}
.rd-onair i { margin-top: 0.2rem; color: #facc15; }
.rd-onair b { color: #fde68a; }

/* "hear the radio better": the DayZ sound settings picture (click to enlarge) beside the tip */
.rd-tip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 1rem; padding: 0.6rem 0.75rem;
  border: 1px solid rgba(0, 212, 255, 0.35); border-radius: 0.5rem; background: rgba(0, 212, 255, 0.06);
  font-size: 0.85rem; color: #cbd5e1;
}
.rd-tip p { flex: 1 1 220px; margin: 0; }
.rd-tip b { color: #e2e8f0; }
.rd-tip p > b:first-child { color: #67e8f9; }
.rd-tip-pic { flex: 0 1 300px; }
.rd-tip-pic img { display: block; width: 100%; height: auto; border-radius: 0.375rem; border: 1px solid rgba(255, 255, 255, 0.12); }

/* live state */
.rd-status { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: #e2e8f0; }
.rd-status::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #475569; }
#rd-live.rd-on .rd-status::before { background: #00d4ff; box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.18); }
.rd-meter { display: block; width: 120px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rd-meter span { display: block; height: 8px; width: 0; background: #00d4ff; }

/* the tape: one group per digit, its dots and dashes as bars, the digit under them */
.rd-tape {
  min-height: 62px;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0b1020;
  overflow-x: auto;
  box-sizing: border-box;
}
/* a slim site-blue bar, not the system's white one with arrows (owner 2026-10-18). Chromium and Safari: the
 * ::-webkit-scrollbar rules (a standard scrollbar-color would switch them off and bring the arrows back); Firefox,
 * which has no such selector: the standard properties. */
.rd-tape::-webkit-scrollbar { height: 6px; }
.rd-tape::-webkit-scrollbar-track { margin: 0 8px; background: transparent; }
.rd-tape::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(37, 99, 235, 0.6); }
.rd-tape::-webkit-scrollbar-thumb:hover { background: #2563eb; }
@supports not selector(::-webkit-scrollbar) {
  .rd-tape { scrollbar-width: thin; scrollbar-color: rgba(37, 99, 235, 0.6) transparent; }
}
.rd-tape-empty { font-size: 0.85rem; color: #64748b; line-height: 40px; }
.rd-tape-row { display: flex; gap: 14px; align-items: flex-end; min-width: max-content; }
.rd-g { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rd-g.rd-word { margin-left: 14px; padding-left: 14px; border-left: 1px dashed rgba(255, 255, 255, 0.15); }
.rd-g:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.rd-els { display: flex; gap: 3px; align-items: center; height: 10px; }
.rd-els i { display: block; width: 6px; height: 6px; border-radius: 3px; background: #cbd5e1; }
.rd-els i.rd-dash { width: 20px; }
.rd-g b { font-weight: 700; font-size: 1rem; min-height: 24px; color: #e2e8f0; }
.rd-g b.rd-unread { color: #475569; }

/* results */
.rd-results { display: flex; flex-direction: column; gap: 0.6rem; }
.rd-empty { padding: 1.25rem; border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 0.5rem; text-align: center; font-size: 0.875rem; color: #94a3b8; }
.rd-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
}
.rd-card.rd-sure { border-color: rgba(0, 212, 255, 0.5); background: rgba(0, 212, 255, 0.06); }
.rd-card-info { flex: 1 1 140px; min-width: 0; }
.rd-grid { font-size: 1.15rem; font-weight: 700; color: #fff; }
.rd-badge { display: block; margin-top: 2px; font-size: 0.75rem; color: #94a3b8; }
.rd-sure .rd-badge { color: #67e8f9; }
.rd-digits { display: flex; gap: 6px; }
.rd-digits span {
  width: 38px; height: 46px; border-radius: 0.375rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1); background: #0b1020; font-size: 1.5rem; font-weight: 700; color: #64748b;
}
.rd-sure .rd-digits span { color: #67e8f9; border-color: rgba(0, 212, 255, 0.35); }
.rd-card-foot { flex: 1 1 100%; font-size: 0.8rem; color: #94a3b8; }

/* the card's map picture: satellite tiles around the bunker, a pulsing mark, where it is, the call to open the map */
.rd-mapthumb {
  flex: 1 1 100%; position: relative; display: block; height: 140px; overflow: hidden; border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1); background: #0b1020;
}
.rd-mapthumb:focus-visible { outline: 2px solid #00d4ff; outline-offset: 2px; }
.rd-tiles { position: absolute; display: block; transition: transform .35s ease; }
.rd-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; }
.rd-mapthumb:hover .rd-tiles { transform: scale(1.12); }
.rd-ping {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #00d4ff; box-shadow: 0 0 0 3px rgba(11, 16, 32, 0.85);
}
.rd-ping::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #00d4ff;
  animation: rd-ping 1.6s ease-out infinite;
}
@keyframes rd-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rd-ping::after { animation: none; } .rd-tiles { transition: none; } }
.rd-thumb-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 1.25rem 0.6rem 0.5rem; background: linear-gradient(to top, rgba(11, 16, 32, 0.95), rgba(11, 16, 32, 0));
  font-size: 0.8rem;
}
.rd-thumb-where { display: inline-flex; align-items: center; gap: 0.35rem; color: #f1f5f9; font-weight: 500; min-width: 0; }
.rd-thumb-where i { color: #00d4ff; }
.rd-thumb-cta {
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 9999px;
  background: #2563eb; color: #fff; font-weight: 600;
}
.rd-mapthumb:hover .rd-thumb-cta { background: #1d4ed8; }

/* how it works */
.rd-zoom { display: block; cursor: zoom-in; }
.rd-lightbox {
  max-width: min(94vw, 1600px); max-height: 94vh; padding: 0; border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem; background: #0b1020; overflow: hidden; cursor: zoom-out;
}
.rd-lightbox::backdrop { background: rgba(0, 0, 10, 0.82); }
.rd-lightbox img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; }
.rd-lightbox-close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11, 16, 32, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 1.1rem;
}
.rd-lightbox-close:hover { background: #1d4ed8; }
/* every step picture is 16:9 (the share window is padded to it, never cropped); click opens it full size */
.rd-step img {
  display: block; width: calc(100% + 2rem); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin: -1rem -1rem 0.75rem; border-radius: 0.75rem 0.75rem 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rd-step-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 212, 255, 0.14); border: 1px solid rgba(0, 212, 255, 0.5); color: #a5f3fc; font-weight: 700; font-size: 0.85rem;
}

/* the quest FAQ: the questions players search for, answered */
.rd-faq { padding: 0.25rem 1rem; }
.rd-faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rd-faq details:last-child { border-bottom: 0; }
.rd-faq summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: #f1f5f9; }
.rd-faq p { margin: 0 0 0.9rem; font-size: 0.9rem; color: #cbd5e1; }

/* the privacy small print at the foot of the page */
.rd-smallprint { margin: 1.5rem 0 0.5rem; font-size: 0.75rem; line-height: 1.5; color: #64748b; }
.rd-smallprint a { color: #94a3b8; text-decoration: underline; }