/* ============================================================
   THE FREQUENCY — PRODIGAL ROBE
   frequency.css v2.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Permanent+Marker&family=Special+Elite&family=Oswald:wght@300;400;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --fq-black:  #0d0b08;
  --fq-ink:    #060504;
  --fq-dark:   #14110c;
  --fq-panel:  #1a1710;
  --fq-gold:   #c9a227;
  --fq-gold2:  #d4af37;
  --fq-cream:  #d4c9a8;
  --fq-paper:  #c7b894;
  --fq-dim:    #7a6f5a;
  --fq-red:    #cc2200;
  --fq-green:  #33cc55;
  --fq-radius: 12px;
  --fq-gap:    10px;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fq-black); }

/* ── WRAPPER ─────────────────────────────────────────────── */
#frequency-wrapper {
  width: 100%;
  min-height: 100svh;
  background:
    radial-gradient(circle at 20% 0%,  rgba(201,162,39,.09), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(201,162,39,.06), transparent 30%),
    #0d0b08;
  color: var(--fq-cream);
  font-family: 'Special Elite', serif;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}

/* CRT scanline + vignette overlay */
#frequency-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .22;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(255,255,255,.025) 18px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(201,162,39,.035) 24px),
    radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: screen;
}

button, input { font: inherit; }

/* ── BOOT OVERLAY ────────────────────────────────────────── */
#freq-boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .65s ease;
  pointer-events: none;
}

.fq-tv-bezel {
  width: min(82vw, 620px);
  height: min(62vh, 460px);
  background: linear-gradient(150deg, #2e2e2e 0%, #171717 55%, #090909 100%);
  border-radius: 30px;
  padding: 40px 44px 56px;
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,.08),
    inset 0 -4px 12px rgba(0,0,0,.7),
    0 0 0 6px #0d0d0d,
    0 0 0 12px #181818,
    0 32px 80px rgba(0,0,0,.95);
  position: relative;
}

.fq-tv-bezel::before {
  content: 'THE FREQUENCY · PRODIGAL ROBE';
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  color: #4d432b;
  letter-spacing: 4px;
  white-space: nowrap;
}

.fq-tv-bezel::after {
  content: '';
  position: absolute;
  bottom: 22px;
  right: 52px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #222 60%, #111 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 1px 2px rgba(255,255,255,.06);
}

.fq-screen-area {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0,0,0,.9), inset 0 0 0 2px #0a0a0a;
}

#fq-boot-line {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%; height: 2px;
  background: #fff;
  opacity: 0;
}

#fq-static-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
}

.fq-boot-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 5vw, 52px);
  color: #fff;
  letter-spacing: 8px;
  opacity: 0;
  text-shadow: 0 0 30px rgba(201,162,39,.9), 0 0 60px rgba(201,162,39,.4);
  white-space: nowrap;
}

/* ── APP ─────────────────────────────────────────────────── */
#freq-app {
  position: relative;
  z-index: 2;
  width: min(100%, 1700px);
  height: 100svh;
  margin: 0 auto;
  padding: 14px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: var(--fq-gap);
  overflow: hidden;
}

/* ── MOBILE BAR (hidden on desktop) ─────────────────────── */
.fq-mobile-bar {
  display: none;
}

/* ── HERO ────────────────────────────────────────────────── */
.fq-hero {
  display: grid;
  grid-template-columns: minmax(300px,1fr) auto minmax(240px,.7fr);
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  overflow: visible;
  padding-bottom: 8px;
}

.fq-main-logo { line-height: .82; text-transform: uppercase; letter-spacing: 2px; }

.fq-logo-small {
  display: block;
  color: var(--fq-cream);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 2vw, 42px);
  letter-spacing: 10px;
  margin-left: 4px;
}

.fq-logo-big {
  display: block;
  color: var(--fq-cream);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 110px);
  letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
  filter: drop-shadow(0 0 16px rgba(201,162,39,.16));
}

.fq-logo-sub {
  display: block;
  font-family: 'Oswald', sans-serif;
  color: var(--fq-gold2);
  font-size: clamp(11px, 1vw, 17px);
  letter-spacing: 6px;
  margin-top: 8px;
  margin-left: 6px;
}

.fq-tagline {
  justify-self: center;
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.05;
  color: var(--fq-cream);
  transform: rotate(-3deg);
  text-shadow: 0 1px 0 #000;
  overflow: visible;
}

.fq-tune {
  display: inline-block;
  margin-top: 4px;
  color: var(--fq-gold2);
  border: 2px solid var(--fq-gold2);
  border-radius: 50%;
  padding: 1px 12px 3px;
  transform: rotate(-3deg);
}

.fq-ticket {
  justify-self: end;
  width: min(100%, 340px);
  background: linear-gradient(135deg, rgba(211,196,160,.95), rgba(112,91,55,.8));
  color: #1b1309;
  border: 2px solid rgba(201,162,39,.55);
  box-shadow: 0 0 0 3px rgba(0,0,0,.5), inset 0 0 18px rgba(0,0,0,.25);
  padding: 14px 16px;
  transform: rotate(2deg);
}

.fq-ticket h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  margin: 0 0 6px;
  color: #1b1309;
}

.fq-ticket p {
  font-family: 'Permanent Marker', cursive;
  font-size: 18px;
  line-height: 1.12;
  margin: 0;
}

/* ── CONSOLE GRID ────────────────────────────────────────── */
.fq-console {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(0,1fr) 300px;
  grid-template-rows: minmax(0,1fr) 34px 100px 34px;
  gap: var(--fq-gap);
  border: 2px solid rgba(201,162,39,.38);
  border-radius: 16px;
  padding: var(--fq-gap);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%),
    rgba(6,5,4,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 22px 80px rgba(0,0,0,.65);
}

/* ── LEFT COLUMN — INFO PANEL ────────────────────────────── */
.fq-chat-col {
  grid-column: 1;
  grid-row: 1 / span 3;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(201,162,39,.35);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10,9,8,.8);
}

.fq-info-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,.3) transparent;
}

.fq-info-brand  { text-align: center; padding: 4px 0; }

.fq-info-logo {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--fq-gold2);
  font-size: 28px;
  letter-spacing: 4px;
  line-height: 1;
}

.fq-info-sub {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--fq-dim);
  font-size: 11px;
  letter-spacing: 4px;
  margin-top: 3px;
}

.fq-info-tagline {
  font-family: 'Permanent Marker', cursive;
  color: var(--fq-cream);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  opacity: .8;
}

.fq-now-on {
  background: rgba(201,162,39,.08);
  border: 1px solid rgba(201,162,39,.2);
  border-radius: 6px;
  padding: 12px;
}

.fq-now-on-label {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--fq-gold2);
  font-size: 10px;
  letter-spacing: 3px;
  margin-bottom: 4px;
}

.fq-now-on-ch   { font-family: 'Bebas Neue', sans-serif; color: var(--fq-gold2); font-size: 22px; letter-spacing: 2px; }
.fq-now-on-host { font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--fq-gold2); font-size: 11px; letter-spacing: 1px; margin-top: 2px; opacity: .8; }
.fq-now-on-name { font-family: 'Bebas Neue', sans-serif; color: var(--fq-cream); font-size: 18px; letter-spacing: 1px; line-height: 1.1; margin-top: 2px; }
.fq-now-on-desc { font-size: 11px; color: var(--fq-dim); margin-top: 6px; line-height: 1.4; }
.fq-now-on-title { font-size: 11px; color: var(--fq-dim); margin-top: 4px; line-height: 1.3; font-style: italic; }

.fq-info-divider { height: 1px; background: rgba(201,162,39,.18); flex-shrink: 0; }

.fq-info-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  transition: .16s ease;
  cursor: pointer;
}

.fq-btn-discord { background: rgba(88,101,242,.2);  color: #7289da; border: 1px solid rgba(88,101,242,.4); }
.fq-btn-discord:hover { background: rgba(88,101,242,.35); }
.fq-btn-site    { background: rgba(201,162,39,.1);  color: var(--fq-gold2); border: 1px solid rgba(201,162,39,.3); }
.fq-btn-site:hover { background: rgba(201,162,39,.2); }
.fq-btn-prayer  { background: rgba(201,162,39,.15); color: var(--fq-cream); border: 1px solid rgba(201,162,39,.35); }
.fq-btn-prayer:hover { background: rgba(201,162,39,.25); }

.fq-prayer-title { font-family: 'Bebas Neue', sans-serif; color: var(--fq-gold2); font-size: 16px; letter-spacing: 3px; margin-bottom: 2px; }
.fq-prayer-sub   { font-size: 11px; color: var(--fq-dim); letter-spacing: 1px; margin-bottom: 8px; }

.fq-social-row { display: flex; gap: 8px; }

.fq-social-btn {
  flex: 1;
  padding: 8px 4px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: none;
  color: var(--fq-dim);
  border: 1px solid rgba(201,162,39,.2);
  border-radius: 4px;
  transition: .16s ease;
}

.fq-social-btn:hover { color: var(--fq-gold2); border-color: rgba(201,162,39,.5); }

.fq-info-verse {
  font-family: 'Special Elite', serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fq-dim);
  text-align: center;
  font-style: italic;
  padding: 4px 0 8px;
}

.fq-info-verse span { color: var(--fq-gold2); font-style: normal; font-size: 11px; letter-spacing: 1px; }

/* ── RIGHT RAIL — CHANNEL GUIDE ──────────────────────────── */
.fq-right-rail {
  grid-column: 3;
  grid-row: 1 / span 3;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  border: 1px solid rgba(201,162,39,.35);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10,9,8,.8);
}

.fq-guide-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(201,162,39,.25);
  flex-shrink: 0;
}

.fq-guide-title {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--fq-gold2);
  letter-spacing: 4px;
  font-size: 26px;
  line-height: 1;
}

.fq-guide-block { margin-top: 2px; font-size: 10px; color: var(--fq-dim); letter-spacing: 1px; }

/* ── CATEGORY TABS ───────────────────────────────────────── */
.fq-cat-tabs {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.fq-cat-tabs::-webkit-scrollbar { display: none; }

.fq-cat-tab {
  flex-shrink: 0;
  padding: 4px 9px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--fq-dim);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,162,39,.18);
  border-radius: 3px;
  cursor: pointer;
  transition: .15s ease;
  white-space: nowrap;
}

.fq-cat-tab:hover { color: var(--fq-cream); border-color: rgba(201,162,39,.4); }

.fq-cat-tab.is-active {
  color: var(--fq-gold2);
  background: rgba(201,162,39,.14);
  border-color: var(--fq-gold2);
}

/* ── GUIDE LIST ──────────────────────────────────────────── */
.fq-guide-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,.55) rgba(255,255,255,.04);
}

.fq-guide-list::-webkit-scrollbar { width: 5px; }
.fq-guide-list::-webkit-scrollbar-thumb { background: rgba(201,162,39,.45); border-radius: 10px; }
.fq-info-panel::-webkit-scrollbar { width: 5px; }
.fq-info-panel::-webkit-scrollbar-thumb { background: rgba(201,162,39,.35); border-radius: 10px; }

/* Channel item */
.fq-ch-item {
  display: grid;
  grid-template-columns: 46px 90px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  min-height: 68px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: .15s ease;
}

.fq-ch-item:hover,
.fq-ch-item.fq-active {
  background: rgba(201,162,39,.1);
  border-left-color: var(--fq-gold2);
}

.fq-ch-item.fq-ch-pending { opacity: .6; }

.fq-ch-num {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--fq-gold2);
  font-size: 32px;
  line-height: 1;
  text-align: center;
}

.fq-ch-thumb-wrap { width: 100%; height: 52px; overflow: hidden; border: 1px solid rgba(201,162,39,.2); background: var(--fq-panel); }

.fq-ch-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fq-ch-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201,162,39,.45);
  font-size: 20px;
}

.fq-ch-name {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--fq-cream);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fq-ch-host {
  display: block;
  margin-top: 3px;
  font-family: 'Oswald', sans-serif;
  color: var(--fq-dim);
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fq-ch-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.fq-ch-type {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--fq-gold2);
  font-size: 10px;
  letter-spacing: 1px;
}

.fq-ch-live {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  color: var(--fq-red);
  letter-spacing: 1px;
  animation: fqPulse 1.6s ease-in-out infinite;
}

@keyframes fqPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── CENTER — SCREEN ─────────────────────────────────────── */
.fq-screen-wrap-outer {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fq-app-fs-btn {
  align-self: flex-end;
  flex-shrink: 0;
  background: rgba(14,12,9,.85);
  color: var(--fq-gold2);
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 4px;
  padding: 5px 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}

.fq-app-fs-btn:hover { background: rgba(201,162,39,.18); border-color: var(--fq-gold2); }

.fq-screen-wrap {
  flex: 1;
  min-height: 0;
  border: 2px solid rgba(201,162,39,.28);
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  position: relative;
  box-shadow: inset 0 0 42px rgba(0,0,0,.9);
}

.fq-crt-screen {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
}

/* Scanlines */
.fq-crt-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 4px);
}

/* Vignette */
.fq-crt-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%),
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 14%, transparent 86%, rgba(255,255,255,.04));
}

#fq-yt-player,
#fq-yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  z-index: 5;
  background: #000;
}

#fq-tap-blocker {
  position: absolute;
  inset: 0;
  z-index: 6;
  cursor: pointer;
  background: transparent;
  display: none;
}

@media (max-width: 1024px) { #fq-tap-blocker { display: block; } }

.fq-yt-title-mask {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 86px;
  z-index: 13;
  pointer-events: none;
  background: linear-gradient(#000 0%, rgba(0,0,0,.92) 25%, rgba(0,0,0,.15) 100%);
  transition: opacity .2s;
}

.fq-screen-wrap:hover .fq-yt-title-mask { opacity: 0; }

/* No signal */
#fq-no-signal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #050403;
}

#fq-ns-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .18;
}

.fq-no-sig-txt { position: relative; z-index: 3; text-align: center; }

.fq-no-sig-txt h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 5vw, 68px);
  color: var(--fq-cream);
  letter-spacing: 9px;
}

.fq-no-sig-txt p { margin-top: 8px; color: var(--fq-dim); }

/* Channel flash */
#fq-ch-flash {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  opacity: 0;
}

/* Live bug */
.fq-live-bug {
  position: absolute;
  top: 22px; left: 28px;
  z-index: 20;
  font-family: 'Special Elite', serif;
  color: var(--fq-cream);
  text-shadow: 0 2px 0 #000;
  letter-spacing: 2px;
  pointer-events: none;
  transition: opacity .6s ease;
}

.fq-live-bug.fq-bug-hidden { opacity: 0; }
.fq-live-bug span          { display: block; }
.fq-live-bug .ch           { font-size: 22px; }
.fq-live-bug .name         { margin-top: 6px; font-size: 18px; }
.fq-live-bug .host         { margin-top: 2px; font-size: 12px; color: var(--fq-gold2); opacity: .8; }
.fq-live-bug .play         { margin-top: 6px; color: var(--fq-gold2); font-size: 15px; }

/* Fullscreen button (on hover) */
.fq-vid-fs-btn {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 24;
  background: rgba(0,0,0,.65);
  color: var(--fq-cream);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  padding: 6px 9px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: .18s ease;
  line-height: 1;
}

.fq-screen-wrap:hover .fq-vid-fs-btn { opacity: 1; }

/* Brand bug */
.fq-brand-bug {
  position: absolute;
  right: 28px; bottom: 36px;
  z-index: 20;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: rgba(212,201,168,.6);
  letter-spacing: 4px;
  text-align: right;
  pointer-events: none;
}

.fq-brand-bug span { display: block; color: rgba(212,175,55,.6); font-size: 15px; margin-top: 3px; }

/* Share */
.fq-share-btn {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 24;
  background: rgba(0,0,0,.65);
  color: var(--fq-gold2);
  border: 1px solid rgba(201,162,39,.4);
  border-radius: 3px;
  padding: 6px 11px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  opacity: 0;
  transition: .18s ease;
}

.fq-screen-wrap:hover .fq-share-btn { opacity: 1; }

.fq-share-toast {
  position: absolute;
  bottom: 46px; left: 14px;
  z-index: 25;
  background: var(--fq-gold2);
  color: #0d0b08;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 5px 10px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.fq-share-toast.fq-toast-show { opacity: 1; }

/* ── NOW PLAYING BAR ─────────────────────────────────────── */
.fq-now-playing {
  grid-column: 2;
  grid-row: 2;
  height: 34px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  overflow: hidden;
  background: rgba(20,17,12,.86);
  border: 1px solid rgba(201,162,39,.18);
  color: var(--fq-cream);
  flex-shrink: 0;
}

.fq-np-num,
.fq-np-block {
  color: var(--fq-gold2);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  white-space: nowrap;
  font-size: 13px;
}

.fq-np-div  { width: 1px; height: 14px; background: rgba(201,162,39,.32); flex: 0 0 auto; }
.fq-np-name { font-family: 'Oswald', sans-serif; font-weight: 700; white-space: nowrap; font-size: 13px; }
.fq-np-host { font-family: 'Oswald', sans-serif; font-size: 11px; color: var(--fq-dim); white-space: nowrap; }
.fq-np-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--fq-dim);
}

/* ── REMOTE ──────────────────────────────────────────────── */
.fq-remote-wrap {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) 180px;
  gap: var(--fq-gap);
  align-items: stretch;
  flex-shrink: 0;
}

/* Mobile quick controls — hidden on desktop */
.fq-mobile-controls { display: none; }

.fq-dpad, .fq-remote, .fq-note {
  border: 1px solid rgba(201,162,39,.28);
  background: rgba(14,12,9,.78);
  border-radius: 8px;
  min-width: 0;
}

.fq-dpad {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 8px;
  padding: 10px;
  align-items: center;
}

.fq-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(201,162,39,.35);
  display: grid;
  place-items: center;
  color: var(--fq-gold2);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  background: radial-gradient(circle, #1d1a13, #080706);
  cursor: pointer;
  transition: .15s ease;
}
.fq-circle:hover { border-color: var(--fq-gold2); background: radial-gradient(circle, #2a2418, #0f0d0a); }
.fq-circle:active { background: rgba(201,162,39,.15); }

.fq-menu-stack { display: grid; gap: 6px; }

.fq-remote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  flex-wrap: wrap;
}

.fq-rbtn {
  background: linear-gradient(#211d16, #0b0907);
  border: 1px solid rgba(201,162,39,.28);
  color: var(--fq-cream);
  padding: 8px 10px;
  min-width: 46px;
  border-radius: 4px;
  cursor: pointer;
  transition: .16s ease;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.fq-rbtn:hover { border-color: var(--fq-gold2); color: var(--fq-gold2); box-shadow: 0 0 14px rgba(201,162,39,.12); }
.fq-rbtn.fq-primary { background: var(--fq-gold2); color: #100d08; }

.fq-note {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 15px;
  line-height: 1.15;
  color: #161008;
  background: linear-gradient(135deg, rgba(211,196,160,.95), rgba(120,100,68,.78));
  transform: rotate(-1.5deg);
  overflow: hidden;
}

/* ── STATUS BAR ──────────────────────────────────────────── */
.fq-status {
  grid-column: 1 / -1;
  grid-row: 4;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.22);
  background: rgba(8,6,3,.9);
  flex-shrink: 0;
}

.fq-si       { font-size: 11px; white-space: nowrap; color: var(--fq-dim); letter-spacing: 1px; }
.fq-si.fq-green { color: var(--fq-green); }
.fq-si.fq-gold  { color: var(--fq-gold2); margin-left: auto; }

/* ── NAME PROMPT ─────────────────────────────────────────── */
#fq-name-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.88);
  display: none;
  align-items: center;
  justify-content: center;
}

.fq-name-box {
  background: linear-gradient(135deg, #1a1710, #0d0b08);
  border: 2px solid rgba(201,162,39,.55);
  border-radius: 12px;
  padding: 34px 38px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 0 60px rgba(0,0,0,.9);
}

.fq-name-box h2 { font-family: 'Bebas Neue', sans-serif; color: var(--fq-gold2); font-size: 30px; letter-spacing: 4px; margin: 0 0 6px; }
.fq-name-box p  { font-size: 12px; color: var(--fq-dim); margin: 0 0 18px; letter-spacing: 1px; }

.fq-name-inp {
  width: 100%;
  background: #0d0b08;
  border: 1px solid rgba(201,162,39,.4);
  color: var(--fq-cream);
  padding: 11px 14px;
  font-size: 16px;
  outline: none;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.fq-name-btn {
  background: var(--fq-gold2);
  color: #0d0b08;
  border: 0;
  padding: 12px 28px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 8px;
}

.fq-name-skip {
  display: block;
  color: var(--fq-dim);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: center;
  padding: 6px;
  transition: color .2s;
}

.fq-name-skip:hover { color: var(--fq-cream); }

/* ── FULLSCREEN ──────────────────────────────────────────── */
#frequency-wrapper.fq-is-fullscreen { position: fixed; inset: 0; z-index: 99999; width: 100vw; height: 100vh; }
#frequency-wrapper.fq-is-fullscreen #freq-app { width: 100%; height: 100vh; }

/* ════════════════════════════════════════════════════════════
   TABLET  768 – 1180px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  #freq-app { padding: 10px 14px 8px; }

  .fq-hero { grid-template-columns: 1fr auto; }
  .fq-ticket { display: none; }

  .fq-console {
    grid-template-columns: 260px minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) 34px 100px 34px;
  }

  /* Channel guide spans full right, spans rows 1–2 */
  .fq-right-rail  { grid-column: 1; grid-row: 1; }
  .fq-chat-col    { display: none; }
  .fq-screen-wrap-outer { grid-column: 2; grid-row: 1; }

  .fq-ch-item { grid-template-columns: 38px 70px minmax(0,1fr); min-height: 58px; }
  .fq-ch-num  { font-size: 24px; }
  .fq-ch-thumb-wrap { height: 42px; }
  .fq-ch-name { font-size: 14px; }

  .fq-remote-wrap { grid-template-columns: 150px minmax(0,1fr); }
  .fq-note { display: none; }
  .fq-brand-bug { font-size: 26px; right: 16px; bottom: 22px; }
  .fq-brand-bug span { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE  ≤ 767px  — YouTube-inspired vertical layout
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  #frequency-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #freq-app {
    height: auto;
    min-height: 100svh;
    padding: 0;
    overflow: visible;
    gap: 0;
  }

  /* ── Mobile header ── */
  .fq-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    background: rgba(6,5,4,.97);
    border-bottom: 1px solid rgba(201,162,39,.2);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
  }

  .fq-mb-logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  .fq-mb-the {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--fq-dim);
    font-size: 10px;
    letter-spacing: 5px;
  }

  .fq-mb-freq {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--fq-cream);
    font-size: 22px;
    letter-spacing: 3px;
  }

  .fq-mb-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .fq-mb-live {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 10px;
    color: var(--fq-red);
    letter-spacing: 2px;
    animation: fqPulse 1.6s ease-in-out infinite;
  }

  .fq-mb-ch {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    color: var(--fq-gold2);
    letter-spacing: 1px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }

  /* Hide desktop hero */
  .fq-hero { display: none; }

  /* ── Console becomes vertical flow ── */
  .fq-console {
    display: flex;
    flex-direction: column;
    height: auto;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Video — full width, 16:9 */
  .fq-screen-wrap-outer {
    order: 1;
    width: 100%;
    flex-direction: column;
    gap: 0;
  }

  .fq-app-fs-btn { display: none !important; }

  .fq-screen-wrap {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid rgba(201,162,39,.2);
    box-shadow: none;
  }

  /* CRT effects are subtle on mobile — keep scanlines, reduce vignette */
  .fq-brand-bug { font-size: 14px; right: 8px; bottom: 10px; }
  .fq-brand-bug span { font-size: 9px; }

  .fq-live-bug { top: 8px; left: 10px; }
  .fq-live-bug .ch, .fq-live-bug .name { font-size: 11px; }
  .fq-live-bug .host { font-size: 10px; }
  .fq-live-bug .play { font-size: 10px; margin-top: 2px; }

  .fq-vid-fs-btn { display: none !important; }
  .fq-share-btn  { opacity: 1 !important; bottom: 8px; left: 8px; padding: 5px 9px; font-size: 11px; }

  /* Now playing */
  .fq-now-playing {
    order: 2;
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-height: 48px;
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(14,11,8,.95);
    border: none;
    border-bottom: 1px solid rgba(201,162,39,.15);
  }

  .fq-np-num   { font-size: 14px; }
  .fq-np-name  { font-size: 14px; font-weight: 700; }
  .fq-np-host  { font-size: 12px; }
  .fq-np-title { font-size: 11px; flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Mobile quick controls */
  .fq-mobile-controls {
    order: 3;
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(10,8,6,.9);
    border-bottom: 1px solid rgba(201,162,39,.12);
  }

  .fq-mc-btn {
    flex: 1;
    padding: 11px 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--fq-cream);
    background: linear-gradient(#211d16, #0b0907);
    border: 1px solid rgba(201,162,39,.28);
    border-radius: 6px;
    cursor: pointer;
    transition: .15s ease;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .fq-mc-btn:active { background: rgba(201,162,39,.15); border-color: var(--fq-gold2); }

  .fq-mc-primary {
    background: var(--fq-gold2);
    color: #0d0b08;
    border-color: var(--fq-gold2);
  }

  .fq-mc-primary:active { background: #b8901f; }

  /* Hide desktop remote on mobile */
  .fq-remote-wrap { display: none; }

  /* Channel guide */
  .fq-right-rail {
    order: 4;
    grid-column: auto;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    border: none;
    border-radius: 0;
    border-top: 2px solid rgba(201,162,39,.2);
    background: rgba(8,7,5,.95);
  }

  .fq-guide-head {
    padding: 10px 14px 8px;
    position: sticky;
    top: 52px; /* height of mobile header */
    z-index: 50;
    background: rgba(10,8,6,.98);
    border-bottom: 1px solid rgba(201,162,39,.2);
  }

  .fq-guide-title { font-size: 20px; }

  /* Category tabs — large touch targets */
  .fq-cat-tab { padding: 6px 12px; font-size: 12px; }

  .fq-guide-list {
    height: auto;
    max-height: none;
    overflow-y: visible;
  }

  /* Channel items — comfortable touch targets */
  .fq-ch-item {
    grid-template-columns: 44px 26vw minmax(0,1fr);
    min-height: 72px;
    padding: 8px 12px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    scroll-margin-top: 160px; /* accounts for sticky mobile bar + guide head */
  }

  .fq-ch-num  { font-size: 28px; }
  .fq-ch-thumb-wrap { height: 52px; }
  .fq-ch-name { font-size: 16px; }
  .fq-ch-host { font-size: 11px; }
  .fq-ch-type { font-size: 10px; }

  /* Info panel — below guide */
  .fq-chat-col {
    order: 5;
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-height: auto;
    border-radius: 0;
    border: none;
    border-top: 2px solid rgba(201,162,39,.15);
    background: rgba(8,7,5,.95);
  }

  .fq-info-panel {
    max-height: none;
    overflow: visible;
    padding: 16px 14px 24px;
  }

  /* Status bar */
  .fq-status {
    order: 6;
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-height: 32px;
    padding: 6px 14px;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(201,162,39,.15);
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .fq-si.fq-gold { margin-left: 0; }
}

/* ── SMALL PHONES ────────────────────────────────────────── */
@media (max-width: 420px) {
  .fq-ch-item { grid-template-columns: 38px 22vw minmax(0,1fr); }
  .fq-ch-num  { font-size: 22px; }
  .fq-ch-name { font-size: 14px; }
  .fq-ch-thumb-wrap { height: 44px; }
  .fq-mc-btn  { padding: 10px 4px; font-size: 12px; }
}

/* ── MOBILE LANDSCAPE ────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .fq-console {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 52px);
    overflow: hidden;
    align-items: stretch;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
  }

  /* Video: sized from height, maintains 16:9 */
  .fq-screen-wrap-outer {
    order: 0;
    flex: 0 0 auto;
    width: calc((100vh - 52px) * 16 / 9);
    max-width: 65vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }

  .fq-screen-wrap {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
    border: none;
  }

  /* Guide: fills the rest, scrolls internally */
  .fq-right-rail {
    order: 1;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    max-height: none;
    border-top: none;
    border-left: 2px solid rgba(201,162,39,.25);
  }

  .fq-guide-head {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .fq-ch-item { scroll-margin-top: 110px; }

  /* Hide everything else */
  .fq-now-playing,
  .fq-mobile-controls,
  .fq-status,
  .fq-chat-col { display: none !important; }
}