/* ============================================================
   RESPONSIVE — MEMBURU PEMANGSA
   Mobile-first breakpoints
   ============================================================ */

/* ── BASE (mobile < 520px) ── */

/* Reduce wrap padding on small screens */
@media (max-width: 519px) {
  :root {
    --wrap-pad: 16px;
  }

  /* Topbar: stack brand & nav */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding-top: var(--sp-2);
  }

  /* Nav: natural flow, no stretching */
  #main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .nav-btn {
    font-size: 12px;
    padding: 8px 12px;
    letter-spacing: 2px;
    flex: 0 0 auto; /* no stretching */
  }

  /* Mini countdown */
  .cdmini-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }

  .cdmini-time {
    font-size: 22px;
  }

  /* Thumb grid: 2 columns */
  .thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Korban grid: 1 column */
  .korban-grid {
    grid-template-columns: 1fr;
  }

  /* Laporan feed: stacked */
  .feed-header { display: none; }

  .feed-row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-3);
  }

  .feed-action {
    text-align: left;
    color: var(--ink-dim);
  }

  /* Gate countdown units */
  .cd-units {
    gap: var(--sp-3);
  }

  .cd-unit {
    min-width: 70px;
  }

  /* Fiktif bar: tighter */
  .fiktif-bar {
    padding: 6px var(--sp-3);
    font-size: 10px;
    gap: 6px 12px;
  }
}

/* ── SMALL TABLET (520–720px) ── */
@media (min-width: 520px) and (max-width: 719px) {
  /* Thumb grid: 2 columns */
  .thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Korban grid: 2 columns */
  .korban-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feed: simplified columns */
  .feed-header {
    grid-template-columns: 150px 1fr 90px;
  }
  .feed-row {
    grid-template-columns: 150px 1fr 90px;
  }

  /* Hide action column header text, show icon */
  .feed-header .feed-action { display: none; }
}

/* ── TABLET (720–899px) ── */
@media (min-width: 720px) and (max-width: 899px) {
  /* Thumb grid: 2 cols (for 4-wide, 2 is better on tablet) */
  .thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Korban grid: 2 columns */
  .korban-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── DESKTOP (900px+) ── */
@media (min-width: 900px) {
  /* Thumb grid: 4 columns */
  .thumb-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Korban grid: 4 columns */
  .korban-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Feed always shows all columns on wider screens ── */
@media (min-width: 640px) {
  .feed-header { display: grid; }

  .feed-row {
    grid-template-columns: 165px 1fr 130px 80px;
  }
}

/* ── LARGE (1200px+) ── */
@media (min-width: 1200px) {
  :root {
    --wrap-pad: 32px;
  }
}



/* ── PRINT ── */
@media print {
  .crt-scan, .crt-vig, .crt-flicker, .crt-halftone, .crt-glitch-line {
    display: none;
  }
  #boot, .fiktif-bar, #theme-btn {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
}