/* ============================================================================
   Channel [V] — mobile layer
   The desktop design stays lime-green Y2K. Under 880px we wrap it in a 2008-era
   phone skin: fake carrier status bar up top, compact [V] TV that follows you,
   bottom tab bar built like a Razr keypad, slide-up menu sheet, SMS toasts.
   ============================================================================ */

/* Hide the mobile-only chrome on desktop */
#m-statusbar, #m-tabbar, #m-menu, #m-toast { display: none; }

/* ---------- breakpoint: mobile + small tablet ---------- */
@media (max-width: 880px) {

  /* --- global reset of the grid --- */
  html, body { font-size: 13px; }
  body {
    padding-bottom: 88px; /* room for the fixed bottom tab bar */
    background-color: var(--lime);
    background-image:
      /* a small [V] tiled texture for the lime body — extra nostalgia */
      radial-gradient(circle at 3px 3px, rgba(0,0,0,0.1) 1px, transparent 0);
    background-size: 16px 16px;
  }

  /* ---- STATUS BAR (top, fake handset) ------------------------------------ */
  #m-statusbar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    background: #000;
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    position: sticky;
    top: 0;
    z-index: 45;
    border-bottom: 1px solid #2a0008;
  }
  .m-carrier { color: #fff; font-weight: bold; display: flex; align-items: center; gap: 4px; }
  .m-carrier .m-v { color: var(--v-red); font-weight: bold; }
  .m-signal { display: inline-flex; gap: 1px; align-items: flex-end; height: 10px; }
  .m-signal span { width: 2px; background: #fff; border-radius: 1px; }
  .m-signal span:nth-child(1) { height: 3px; }
  .m-signal span:nth-child(2) { height: 5px; }
  .m-signal span:nth-child(3) { height: 7px; }
  .m-signal span:nth-child(4) { height: 9px; }
  .m-signal span:nth-child(4) { opacity: 0.35; animation: signalFluctuate 4s ease-in-out infinite; }
  @keyframes signalFluctuate {
    0%, 100% { opacity: 0.35; }
    45%, 55% { opacity: 1; }
  }
  .m-3g { color: var(--yellow); font-size: 9px; padding: 1px 4px; border: 1px solid var(--yellow); border-radius: 2px; }
  .m-spacer { flex: 1; }
  .m-clock { color: #fff; font-weight: bold; }
  .m-battery {
    position: relative;
    width: 22px; height: 10px;
    border: 1px solid #fff; border-radius: 2px;
    padding: 1px;
  }
  .m-battery::after {
    content: "";
    position: absolute;
    top: 2px; right: -3px;
    width: 2px; height: 4px;
    background: #fff;
  }
  .m-battery i {
    display: block;
    width: 82%;
    height: 100%;
    background: #0aff66;
    box-shadow: 0 0 3px #0aff66;
    animation: batteryPulse 10s ease-in-out infinite;
  }
  @keyframes batteryPulse {
    0%, 92%, 100% { width: 82%; }
    94% { width: 80%; }
    96% { width: 78%; }
  }

  /* ---- TOP BAR (brand ribbon) shrinks for mobile ------------------------- */
  #topbar {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 8px 12px;
    top: 22px; /* sit under the status bar */
  }
  #topbar .logo img { height: 32px; }
  #topbar .tagline { display: none; } /* no room on a 375 screen */
  #topbar .nowplaying {
    gap: 5px;
    font-size: 10px;
    max-width: 42vw;
  }
  #topbar .np-label { display: none; } /* 'ON AIR' takes too much width */
  #topbar .np-text { max-width: 40vw; font-size: 10px; }
  #topbar .clock { font-size: 11px; padding: 2px 6px; }

  /* ---- TICKER stays, but tighter ---------------------------------------- */
  #ticker { top: 72px; font-size: 10px; }

  /* ---- FRAME collapses to a single stream -------------------------------- */
  #frame {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
    max-width: 100%;
  }

  /* Hide the desktop left nav entirely — its job is the bottom tab bar now */
  #nav { display: none; }

  /* ---- TV becomes a sticky top strip ------------------------------------- */
  #tv {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 100px; /* under the ticker */
    height: auto;
    box-shadow: 0 4px 0 var(--v-red), 0 5px 14px rgba(0,0,0,0.45);
    border-width: 2px;
    z-index: 38;
  }
  /* Tap the [V] LIVE header to collapse the TV into a slim status strip —
     the video screen, queue, and controls all tuck away so you can read the
     content underneath. Tap again to expand. */
  #tv.collapsed .tv-queue,
  #tv.collapsed .tv-ctrl,
  #tv.collapsed .tv-screen { display: none; }
  #tv.collapsed .tv-chrome::after {
    content: "▾ tap to expand [V]";
    color: var(--yellow);
    font-size: 10px;
    letter-spacing: 0.15em;
    margin-left: auto;
    margin-right: 8px;
  }
  #tv.collapsed .tv-rhs .tv-btn { display: none; }

  /* Auto-collapse on scroll down — queue hides but the video screen stays
     shrunken so you can keep watching while reading. Smooth transition. */
  #tv {
    transition: max-height 0.3s ease;
    max-height: 1000px;
    overflow: hidden;
  }
  #tv.scrolled {
    max-height: 52px; /* just the chrome */
  }
  #tv.scrolled .tv-chrome::after {
    content: "▾ tap to expand";
    color: var(--yellow);
    font-size: 10px;
    letter-spacing: 0.15em;
    margin-left: auto;
    margin-right: 8px;
  }
  /* When something is actively playing, keep a video-only peek when scrolled */
  #tv.scrolled.playing {
    max-height: 140px;
  }
  #tv .tv-chrome { padding: 4px 8px; }
  #tv .tv-chrome .tv-label { font-size: 10px; }
  #tv .tv-rhs .tv-btn { width: 26px; height: 20px; }
  #tv .tv-ctrl { padding: 4px; }
  #tv .ctrl { padding: 6px 8px; font-size: 12px; min-width: 36px; } /* touch target */
  #tv .ctrl-big { min-width: 54px; font-size: 16px; }
  #tv .tv-queue {
    max-height: 140px;
  }
  #tv .tv-queue-list li { padding: 8px 6px; font-size: 11px; } /* bigger tap target */

  /* ---- CONTENT column gets the full width -------------------------------- */
  #content {
    grid-column: 1;
    grid-row: 2;
  }

  /* Panels soften — fit small screens, hold the 2000s feel */
  .panel {
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 4px 4px 0 var(--v-red);
    border-width: 2px;
  }
  .panel h1 { font-size: 16px; letter-spacing: 0.06em; }
  .panel h2 { font-size: 13px; }
  .panel h3 { font-size: 12px; }
  .panel p  { font-size: 12px; }

  /* Grids collapse to single column on phones */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Video list rows — bigger touch targets, tighter layout */
  .video-list li {
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    padding: 10px 6px;
  }
  .video-list li .vl-meta { display: none; } /* region/genre hidden; still visible via year */
  .video-list .vl-num { font-size: 13px; }
  .video-list .vl-artist { font-size: 13px; }
  .video-list .vl-title { font-size: 11px; }

  /* whatUwant wall — smaller cards, 2 across comfortably on any phone width */
  .wuw-wall { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .wuw-card { padding: 8px; min-height: 72px; font-size: 10px; }
  .wuw-card .c-artist { font-size: 11px; }
  .wuw-card .c-cta { font-size: 9px; }

  /* VJ grid — 2 cols on phones */
  .vj-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vj-card { padding: 8px; }
  .vj-card h3 { font-size: 12px; }
  .vj-card p { font-size: 10px; }

  /* Chart rows — keep the chunky rank font */
  .chart-row { grid-template-columns: 44px 1fr auto; padding: 6px 8px; }
  .chart-row .rank { font-size: 24px; }
  .ch-title { font-size: 10px; }

  /* Gigs — stack columns */
  .gig-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 4px;
  }
  .gig-row .btn-primary { margin-top: 6px; align-self: flex-start; }

  /* ---- CHAT window: on mobile it becomes an SMS-style bottom sheet ------- */
  #chat {
    position: fixed;
    left: 10px; right: 10px;
    bottom: 88px;
    width: auto;
    max-height: 42vh;
    box-shadow: 3px 3px 0 var(--v-red);
    border-width: 2px;
  }
  #chat.hidden { display: none; transform: none; }
  #chat .chat-title { font-size: 11px; padding: 6px 10px; }
  #chat .chat-log { font-size: 11px; max-height: 36vh; }
  #chat .chat-log li { padding: 2px 0; }

  /* ---- FOOTER — tuck it under bottom nav space -------------------------- */
  #footer { margin-bottom: 0; padding-bottom: 4px; }
  .vmail-strip { font-size: 10px; }
  .vmail-tag { padding: 3px 8px; font-size: 9px; }
  .legal { font-size: 9px; padding: 8px 14px; }

  /* ---- BOTTOM TAB BAR --------------------------------------------------- */
  #m-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    height: 72px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background:
      linear-gradient(180deg, #151515 0%, #050505 100%);
    border-top: 3px solid var(--v-red);
    box-shadow: 0 -3px 10px rgba(0,0,0,0.45), 0 -1px 0 #000 inset;
    gap: 4px;
  }
  .m-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: #1a1a1a;
    color: var(--cream);
    border: 1px solid #000;
    border-top-color: #3a3a3a;
    border-bottom-color: #0a0a0a;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    padding: 6px 2px;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4);
    transition: transform 0.08s ease, background 0.12s;
  }
  .m-tab:active {
    transform: translateY(2px) scale(0.97);
    background: var(--v-red-deep);
    color: #fff;
  }
  .m-tab.active {
    background: linear-gradient(180deg, #fc0f34, #b10021);
    color: #fff;
    border-color: #ff5870 #6a0013 #6a0013 #ff5870;
    box-shadow:
      inset 0 -2px 0 rgba(0,0,0,0.3),
      inset 0 2px 0 rgba(255,255,255,0.2),
      0 0 6px rgba(252,15,52,0.6);
  }
  .m-tab.active .m-tab-lb { color: var(--yellow); }
  .m-tab.active .m-tab-ic { text-shadow: 0 0 6px #fff; }
  .m-tab-ic {
    font-size: 18px;
    line-height: 1;
    color: var(--v-red);
    font-weight: bold;
  }
  .m-tab.active .m-tab-ic { color: #fff; }
  .m-tab-lb {
    font-weight: bold;
    color: var(--cream);
  }
  /* the LIVE tab pulses like the on-air dot */
  .m-tab-live .m-tab-ic { animation: pulse 1.3s ease-in-out infinite; }

  /* ---- SHEET MENU (slides up) ------------------------------------------- */
  #m-menu {
    display: block;
    position: fixed; inset: 0;
    z-index: 70;
    pointer-events: none;
  }
  .m-sheet-back {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .m-sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--cream);
    border-top: 4px solid var(--v-red);
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.3, 1.2);
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #m-menu.open { pointer-events: auto; }
  #m-menu.open .m-sheet-back { opacity: 1; }
  #m-menu.open .m-sheet-panel { transform: translateY(0); }
  .m-sheet-grip {
    width: 40px; height: 4px;
    background: #000;
    margin: 6px auto 2px;
    border-radius: 2px;
  }
  .m-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px 8px;
    border-bottom: 2px dashed #000;
  }
  .m-sheet-title {
    font-family: var(--mono);
    font-weight: bold;
    font-size: 12px;
    color: var(--v-red);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .m-sheet-x {
    background: #000; color: var(--v-red);
    border: 2px solid var(--v-red);
    width: 28px; height: 28px;
    font-weight: bold;
    font-family: var(--mono);
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    padding: 0;
  }
  .m-sheet-body {
    padding: 8px 12px 16px;
    overflow-y: auto;
  }
  .m-menu-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 10px;
    background: #fff;
    border: 2px solid #000;
    margin-bottom: 6px;
    font-family: var(--sans);
    color: #000 !important;
    box-shadow: 3px 3px 0 #000;
    text-decoration: none !important;
  }
  .m-menu-link span { font-weight: bold; font-size: 14px; }
  .m-menu-link em { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--v-red); letter-spacing: 0.1em; text-transform: uppercase; }
  .m-menu-link:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #000;
    background: var(--v-red);
    color: #fff !important;
  }
  .m-menu-link:active em { color: var(--yellow); }

  .m-menu-divider {
    font-family: var(--mono);
    font-size: 10px;
    color: #000;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 12px 0 6px;
    border-bottom: 1px dashed #000;
    padding-bottom: 2px;
  }
  .m-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .m-menu-chip {
    padding: 10px;
    background: #000;
    color: var(--v-red) !important;
    border: 2px solid var(--v-red);
    font-family: var(--mono);
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 2px 2px 0 #000;
  }
  .m-menu-chip:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #000;
    background: var(--v-red);
    color: #fff !important;
  }

  /* ---- TOAST (SMS-style notification) ---------------------------------- */
  #m-toast {
    display: block;
    position: fixed;
    top: 28px;
    left: 10px; right: 10px;
    z-index: 80;
    pointer-events: none;
  }
  .m-toast-item {
    background: rgba(10,10,10,0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid var(--v-red);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    font-family: var(--mono);
    font-size: 11px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    animation: toastIn 0.3s ease, toastOut 0.4s ease 4s forwards;
    transform-origin: top center;
  }
  .m-toast-item .t-tag {
    color: var(--v-red);
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-right: 6px;
  }
  .m-toast-item .t-from { color: var(--yellow); }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(-24px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes toastOut {
    to { opacity: 0; transform: translateY(-24px) scale(0.92); pointer-events: none; }
  }

  /* ---- tiny screen polish ---------------------------------------------- */
  .boot-inner img { height: 80px; }
  .boot-bar { width: 220px; }
}

/* ---------- very narrow (iPhone SE, legacy) ------------------------------ */
@media (max-width: 400px) {
  .panel h1 { font-size: 14px; }
  .vj-grid { grid-template-columns: 1fr; }
  .chart-row .rank { font-size: 20px; }
  #topbar .nowplaying { max-width: 32vw; }
  .wuw-card .c-cta { display: none; } /* save room */
  .m-tab-lb { font-size: 8px; }
}

/* Respect reduced motion — no ticker/disco/scanline animation */
@media (prefers-reduced-motion: reduce) {
  #ticker-track, .vmail-track,
  .dance-floor::before,
  .np-dot, .stage::before,
  .m-signal span:nth-child(4),
  .m-battery i,
  .m-tab-live .m-tab-ic {
    animation: none !important;
  }
}