/*
 * siharu-mobile.css — Siharu Archive Responsive Layer v1
 *
 * Load AFTER siharu-core.css on every page.
 * This is the ONLY file that should contain @media queries for layout.
 * Page-specific CSS may add @media for fine-tuning but should NOT
 * redefine the breakpoints handled here.
 *
 * Breakpoints:
 *   —  480px  phone portrait (primary mobile target)
 *   —  600px  large phone / small tablet
 *   —  768px  tablet portrait
 *   —  900px  tablet landscape / small desktop
 *   — 1024px  desktop
 *
 * Signal Interference Hub for Anomalous Resonance Understanding
 */

/* ════════════════════════════════════════════════════
   BASE MOBILE SAFETY NET
   (supplements mobile-universal.js)
════════════════════════════════════════════════════ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* iOS bounce fix */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Responsive images */
img, video, canvas { max-width: 100%; height: auto; }

/* Tap targets */
button,
[role="button"],
input[type="submit"],
input[type="button"],
select {
  min-height: 44px;
  min-width: 44px;
}
/* Restore for inline elements */
.sh-theme-btn,
.sh-ticker-item,
p a,
li a {
  min-height: unset;
  min-width: unset;
}

/* iOS input zoom prevention */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-size: max(16px, 1em);
  -webkit-appearance: none;
  appearance: none;
}

/* Safe area insets */
#sh-header,
header {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ════════════════════════════════════════════════════
   PHONE PORTRAIT — 480px and below
════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Header shell ── */
  #sh-header-bar {
    padding: 0 14px !important;
    min-height: 46px !important;
  }
  #sh-logo-word {
    font-size: 1rem !important;
    letter-spacing: 3px !important;
  }
  #sh-logo-sub { display: none !important; }
  #sh-theme-switcher { gap: 4px !important; }
  .sh-theme-btn { width: 8px !important; height: 8px !important; }

  /* Ticker */
  #sh-ticker-wrap { height: 19px !important; }
  #sh-ticker-label {
    font-size: 0.34rem !important;
    padding: 0 5px !important;
    letter-spacing: 1px !important;
  }
  .sh-ticker-item {
    font-size: 0.36rem !important;
    padding: 0 10px !important;
    letter-spacing: 0 !important;
  }
  #sh-ticker-inner { animation-duration: 110s !important; }

  /* ── Hero sections ── */
  #hero,
  .hero,
  [id$="-hero"] {
    padding: 36px 16px !important;
    min-height: 55vh !important;
  }
  .terminal-text,
  .hero-title {
    font-size: clamp(1.8rem, 12vw, 2.6rem) !important;
    letter-spacing: 3px !important;
  }
  .sub-text,
  .hero-sub {
    font-size: 0.6rem !important;
    letter-spacing: 1.5px !important;
  }

  /* ── Archive grid → single column ── */
  .archive-grid,
  .archive-options {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Cards ── */
  .archive-card,
  .card {
    padding: 16px !important;
  }
  .archive-card-title,
  .card-title {
    font-size: 0.9rem !important;
  }

  /* ── Gallery → 2 columns ── */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── Chat panel full-width ── */
  #chat-panel {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ── Stories / chapters reading ── */
  .story-content,
  .chapter-body,
  .lore-section,
  .synopsis-content,
  .chapter-text {
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding: 0 16px !important;
  }

  /* ── Newspaper columns → single ── */
  .classified-grid,
  .newspaper-columns,
  .articles-grid {
    columns: 1 !important;
    column-count: 1 !important;
  }
  [style*="columns:2"],
  [style*="column-count:2"] {
    columns: 1 !important;
    column-count: 1 !important;
  }

  /* ── Login box ── */
  .login-box {
    margin: 12px !important;
    padding: 20px 16px !important;
    gap: 14px !important;
  }
  .login-title  { font-size: 9px !important; letter-spacing: 1px !important; }
  .login-subtitle { font-size: 6px !important; }
  .login-label  { font-size: 7px !important; }
  .login-input  { font-size: 9px !important; padding: 8px 6px !important; }
  .login-btn    { font-size: 7px !important; letter-spacing: 1px !important; padding: 10px !important; }
  .login-error  { font-size: 6px !important; }

  /* ── Clearance toast ── */
  .clr-toast {
    font-size: 0.38rem !important;
    padding: 8px 14px !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: 88vw !important;
  }

  /* ── Buttons ── */
  .btn,
  .btn-access {
    padding: 10px 16px !important;
    font-size: 0.45rem !important;
    letter-spacing: 1.5px !important;
  }

  /* ── ABI-m0 — smaller on mobile ── */
  #abi-m0-container {
    transform: scale(0.7) !important;
    transform-origin: bottom right !important;
  }

  /* ── Globe canvas ── */
  #globe-canvas,
  canvas {
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* ── Flip phone decoder ── */
  #flip-phone,
  #flip-viewport { max-width: 100% !important; }

  /* ── Credits panel ── */
  #credits-panel {
    width: min(94vw, 380px) !important;
    max-height: 80dvh !important;
    overflow-y: auto !important;
  }

  /* ── Cassette / retro TV ── */
  #cassette-player,
  #retro-tv-container { max-width: 100% !important; }

  /* ── Scrollable horizontal tabs ── */
  .chapter-tabs,
  .header-nav,
  .tab-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }
  .chapter-tabs::-webkit-scrollbar,
  .header-nav::-webkit-scrollbar { display: none !important; }

  /* ── Boot/loading screens ── */
  .boot-title  { font-size: 10px !important; letter-spacing: 1px !important; }
  .loader-text { font-size: 8px !important; }
  .loader-percent { font-size: 8px !important; }

  /* ── Failure overlays ── */
  .fx-msg {
    font-size: clamp(7px, 3vw, 10px) !important;
    padding: 12px !important;
    line-height: 1.8 !important;
  }
  .countdown-clock { font-size: clamp(38px, 20vw, 80px) !important; }
  .countdown-label { font-size: clamp(5px, 2vw, 8px) !important; }

  /* ── Chapter sidebar ── */
  #chapter-sidebar,
  #sidebar {
    width: 260px !important;
    z-index: 999 !important;
  }

  /* ── Transmission log ── */
  .log-entry,
  .transmission-entry {
    padding: 12px 14px !important;
  }
  .log-timestamp,
  .entry-ts {
    font-size: 0.38rem !important;
  }

  /* ── Hidden signal — use tap area ── */
  .hidden-signal {
    bottom: 10px !important;
    right: 10px !important;
  }
  .signal-cred { font-size: 6px !important; }

  /* ── Access choice cards ── */
  .ac-cards {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .ac-card {
    padding: 16px !important;
  }
  .ac-title {
    font-size: clamp(1rem, 6vw, 1.6rem) !important;
  }
}

/* ════════════════════════════════════════════════════
   SMALL PHONE — 600px and below
════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Header inner padding */
  .header-container {
    padding: 8px 14px !important;
    min-height: 46px !important;
  }

  /* Archive title scaling */
  .archive-title,
  #archive-head-title {
    font-size: clamp(1.4rem, 8vw, 2.2rem) !important;
  }

  /* Stories entry cards */
  .entry-card {
    padding: 16px !important;
  }
  .entry-title {
    font-size: 0.9rem !important;
  }

  /* Characters grid → single column */
  .characters-grid,
  .char-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Newspaper header */
  .newspaper-masthead {
    font-size: clamp(1.4rem, 8vw, 2.2rem) !important;
    letter-spacing: 2px !important;
  }
}

/* ════════════════════════════════════════════════════
   TABLET PORTRAIT — 601–768px
════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 768px) {

  /* Archive grid → 2 columns */
  .archive-grid,
  .archive-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Gallery → 3 columns */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Characters grid → 2 columns */
  .characters-grid,
  .char-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Header */
  .header-container {
    padding: 10px 20px !important;
  }
  #sh-header-bar {
    padding: 0 20px !important;
  }

  /* Logo sub visible on tablet */
  #sh-logo-sub { display: block !important; max-width: 180px; }
}

/* ════════════════════════════════════════════════════
   TABLET LANDSCAPE — 769–900px
════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 900px) {

  /* Archive grid → 2–3 columns */
  .archive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero height in landscape */
  #hero { min-height: 50vw !important; }

  /* Chapter sidebar narrower */
  #chapter-sidebar,
  #sidebar { width: 200px !important; }
}

/* ════════════════════════════════════════════════════
   LANDSCAPE PHONE — tall viewport warning
════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {
  #hero,
  .hero {
    min-height: 45vw !important;
    padding: 24px 24px !important;
  }

  /* Login box more compact in landscape */
  .login-box {
    padding: 16px 20px !important;
    gap: 10px !important;
  }
}

/* ════════════════════════════════════════════════════
   TOUCH DEVICE ADJUSTMENTS
════════════════════════════════════════════════════ */
@media (hover: none) {

  /* Hidden signal — reveal on tap */
  .hidden-signal { opacity: 0; }
  .hidden-signal:active { opacity: 1; }

  /* Remove hover underlines that look broken on touch */
  .sh-nav-link:hover::after { display: none; }

  /* Disable wrongness.js hover effects on touch */
  .wrongness-cursor-shadow { display: none !important; }
}

/* ════════════════════════════════════════════════════
   HIGH DPI / RETINA
════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure 1px borders don't get blurry */
  .archive-card,
  .card,
  #sh-header-bar,
  .login-box {
    border-width: 0.5px;
  }
}

/* ════════════════════════════════════════════════════
   PRINT — strip horror effects
════════════════════════════════════════════════════ */
@media print {
  body::after,
  .scan-beam,
  #sh-ticker-wrap,
  #abi-m0-container,
  .wrongness-cursor-shadow,
  .fx-overlay { display: none !important; }

  body { background: #fff !important; color: #000 !important; }

  #sh-header { position: static !important; }
}

/* ── Mobile tap feedback — active states for touchscreen ── */
@media (hover: none) {
  .ac-card:active,
  .archive-card:active,
  .btn:active,
  .btn-access:active,
  .story-card:active,
  .char-card:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 0.08s, opacity 0.08s;
  }
}