/* ═══════════════════════════════════════════════════════════════════
   SYNTH-TUBE — Mobile Responsive Layer
   Generated: 2026-04-01T09:42:35.350Z
   
   RULES:
   • Every rule is inside @media — desktop is NEVER affected
   • .is-mobile class from Express middleware enables server-side gating
   • --vh variable from mobile-gate.js fixes iOS 100vh bug
   • Touch targets: minimum 44px as per WCAG / Apple HIG
   • No !important unless overriding inline styles from JS
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS CUSTOM PROPERTIES (mobile overrides) ────────────────────── */
:root {
  --mobile-pad: 0.75rem;
  --mobile-font-min: 0.72rem;
  --mobile-touch-min: 44px;
  --mobile-card-min: 260px;
  --mobile-sidebar-w: 280px;
  --mobile-nav-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET — 768px and below
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── GLOBAL LAYOUT ─────────────────────────────────────────────── */
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Fix iOS 100vh issue — use var(--vh, 1vh) * 100 instead of 100vh */
  .full-height,
  .is-mobile .full-height {
    height: calc(var(--vh, 1vh) * 100);
  }

  /* ── NAVIGATION ────────────────────────────────────────────────── */
  nav, .nav, .main-nav, .site-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 0 var(--mobile-pad);
    gap: 0.25rem;
  }
  nav::-webkit-scrollbar,
  .nav::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar {
    display: none;
  }
  nav a, .nav a, .main-nav a, .site-nav a {
    font-size: 0.42rem;
    padding: 0.35rem 0.5rem;
    flex-shrink: 0;
    min-height: var(--mobile-touch-min);
    display: inline-flex;
    align-items: center;
  }

  /* ── HAMBURGER TOGGLE (injected by mobile-gate.js) ─────────────── */
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    background: transparent;
    border: 1px solid rgba(0, 245, 196, 0.15);
    color: rgba(0, 245, 196, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    position: fixed;
    top: var(--safe-top, 0);
    right: var(--safe-right, 0);
    z-index: 9999;
    border-radius: 0;
    transition: background 0.2s, border-color 0.2s;
  }
  .mobile-nav-toggle:active {
    background: rgba(0, 245, 196, 0.08);
    border-color: rgba(0, 245, 196, 0.4);
  }
  .mobile-nav-toggle[aria-expanded="true"] {
    background: rgba(0, 245, 196, 0.06);
  }

  .mobile-nav-drawer {
    position: fixed;
    top: 0; right: 0;
    width: var(--mobile-sidebar-w);
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background: rgba(4, 8, 18, 0.97);
    border-left: 1px solid rgba(0, 245, 196, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9998;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--mobile-nav-h) + 12px) var(--mobile-pad) calc(var(--safe-bottom, 0px) + 12px);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-nav-drawer.open {
    transform: translateX(0);
  }
  .mobile-nav-drawer a {
    display: flex;
    align-items: center;
    min-height: var(--mobile-touch-min);
    padding: 0 1rem;
    font-family: 'Orbitron', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    text-transform: uppercase;
    border-left: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    white-space: nowrap;
  }
  .mobile-nav-drawer a:active,
  .mobile-nav-drawer a.active {
    color: rgba(0, 245, 196, 0.9);
    border-left-color: rgba(0, 245, 196, 0.6);
    background: rgba(0, 245, 196, 0.03);
  }
  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .mobile-nav-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── CARD GRIDS — broadcast engines, games, codex ──────────────── */
  .cards, .card-grid, .game-grid, .news-cards,
  .broadcast-cards, .entity-grid, .ent-grid,
  .feat-grid, .ach-grid, .codex-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--mobile-card-min), 1fr)) !important;
    gap: 0.75rem;
    padding: 0 var(--mobile-pad);
  }
  .card, .news-card, .game-card, .broadcast-card {
    min-width: 0;
  }

  /* ── BROADCAST PLAYER — vertical stack ─────────────────────────── */
  .player-layout, .broadcast-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .player-main, .broadcast-main {
    width: 100% !important;
    max-width: 100% !important;
  }
  .player-sidebar, .broadcast-sidebar,
  .entity-sidebar, .chat-sidebar {
    width: 100% !important;
    max-height: 50vh;
    border-left: none !important;
    border-top: 1px solid rgba(0, 245, 196, 0.08);
  }

  /* ── VIDEO PLAYER ──────────────────────────────────────────────── */
  video, .video-player, .hls-player {
    width: 100% !important;
    max-height: 40vh;
    object-fit: contain;
  }

  /* ── ENTITY PANELS ─────────────────────────────────────────────── */
  .entity-panel, .entity-info {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* ── HEADLINE TICKER ───────────────────────────────────────────── */
  .ticker, .headline-ticker {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.6rem;
  }

  /* ── FLOATING COMMENTS (Socket.io overlay) ─────────────────────── */
  .floating-comment, .socket-comment, .live-comment {
    font-size: 0.55rem !important;
    max-width: 75vw;
    padding: 4px 8px;
    opacity: 0.85;
  }
  .is-mobile .comment-area, .is-mobile .floating-comments {
    bottom: 0;
    height: 35vh;
    top: auto !important;
  }

  /* ── CHAT INTERFACE ────────────────────────────────────────────── */
  .chat-container, .chat-wrap {
    flex-direction: column;
  }
  .entity-list, .entity-select {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    padding: 0.5rem var(--mobile-pad);
  }
  .entity-list::-webkit-scrollbar { display: none; }
  .entity-list .entity-item, .entity-select .entity-option {
    flex-shrink: 0;
    min-width: 80px;
  }
  .msg, .message {
    max-width: 88%;
  }
  .msg-bubble, .message-bubble {
    font-size: 0.78rem;
    padding: 8px 12px;
  }
  .input-area, .chat-input-area {
    padding: 8px var(--mobile-pad) calc(8px + var(--safe-bottom, 0px));
  }
  #msg-input, .chat-input {
    font-size: 16px; /* prevents iOS zoom on focus */
    min-height: var(--mobile-touch-min);
  }

  /* ── FORUM ─────────────────────────────────────────────────────── */
  .thread-list, .post-list {
    gap: 0.5rem;
    padding: 0 var(--mobile-pad);
  }

  /* ── ART GALLERY ───────────────────────────────────────────────── */
  .art-grid, .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
  }

  /* ── MODALS & OVERLAYS ─────────────────────────────────────────── */
  .modal, .modal-content, .overlay-panel {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
    max-height: calc(var(--vh, 1vh) * 85);
    margin: auto 1rem;
    border-radius: 0;
  }

  /* ── AUTH MODAL ────────────────────────────────────────────────── */
  .auth-modal .modal-content {
    width: calc(100% - 1rem) !important;
  }
  .auth-modal input {
    font-size: 16px; /* prevent iOS zoom */
    min-height: var(--mobile-touch-min);
  }

  /* ── BUTTONS — touch target enforcement ────────────────────────── */
  button, .btn, [role="button"], input[type="submit"],
  .generate-btn, .send-btn, .genre-btn, .action-btn {
    min-height: var(--mobile-touch-min);
    min-width: var(--mobile-touch-min);
    touch-action: manipulation;
  }

  /* ── TABLES ────────────────────────────────────────────────────── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── SCROLLBAR CLEANUP ─────────────────────────────────────────── */
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 245, 196, 0.15);
  }

  /* ── FONT SIZE FLOOR ───────────────────────────────────────────── */
  p, span, div, li, td, th, label, .text {
    font-size: max(var(--mobile-font-min), inherit);
  }

  /* ── PROFILE PAGE ──────────────────────────────────────────────── */
  .hero-top {
    flex-direction: column;
  }
  .hero-right {
    align-items: flex-start;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-grid {
    grid-template-columns: 1fr;
  }
  .xp-bar-wrap {
    width: 120px;
  }

  /* ── SYNTHESIZE / BREEDING ─────────────────────────────────────── */
  .synth-panel, .breed-panel {
    flex-direction: column;
    gap: 1rem;
  }
  .entity-slot {
    width: 100%;
    max-width: 300px;
  }

  /* ── VOID COMPOSER ─────────────────────────────────────────────── */
  .composer-layout {
    flex-direction: column;
  }
  .composer-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* ── RADIO ─────────────────────────────────────────────────────── */
  .radio-layout {
    flex-direction: column;
  }
  .radio-sidebar {
    width: 100%;
    max-height: 40vh;
  }

  /* ── LIBRARY ───────────────────────────────────────────────────── */
  .word-grid, .entity-words {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  .word-btn {
    font-size: 0.6rem;
    padding: 0.4rem;
  }
  .chapter-text {
    font-size: 0.85rem;
    line-height: 1.7;
    padding: 0 var(--mobile-pad);
  }
  .directives-row {
    grid-template-columns: 1fr;
  }

  /* ── CODEX ─────────────────────────────────────────────────────── */
  .codex-header {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  /* ── SEVEN LAYER — CRT terminal ────────────────────────────────── */
  .crt-screen, .seven-terminal {
    font-size: 0.65rem;
    padding: var(--mobile-pad);
  }
  .scanlines {
    opacity: 0.03;
  }
  /* Reduce heavy CRT pseudo-element rendering on mobile */
  .is-mobile .crt-screen::before,
  .is-mobile .crt-screen::after {
    display: none;
  }

  /* ── MUSIC TOOLS (ProTracker / Music 2026) ─────────────────────── */
  .tracker-grid, .pattern-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.55rem;
  }
  .timeline-container, .daw-timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .track-controls {
    min-width: 80px;
  }

  /* ── ENTRANCE PAGE ─────────────────────────────────────────────── */
  .splash-title, .fcta-title {
    font-size: clamp(1.4rem, 8vw, 3rem);
    letter-spacing: 0.05em;
  }
  .cta-group {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0 1rem;
  }
  .cta-group a, .cta-group button {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }

  /* ── CONNECTIONS / SOCIAL ───────────────────────────────────────── */
  .connections-grid {
    grid-template-columns: 1fr;
  }
  .dm-layout {
    flex-direction: column;
  }
  .dm-sidebar {
    width: 100%;
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* ── FACTIONS ──────────────────────────────────────────────────── */
  .faction-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* ── MY CREATIONS ──────────────────────────────────────────────── */
  .creations-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* ── REIKI GENERATOR ───────────────────────────────────────────── */
  .reiki-controls {
    flex-direction: column;
    gap: 0.75rem;
  }
  .chakra-selector {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ── GAMES — common patterns ───────────────────────────────────── */
  .game-container canvas {
    max-width: 100vw;
    max-height: 60vh;
    touch-action: none;
  }
  .game-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem var(--mobile-pad);
  }
  .game-hud {
    font-size: 0.6rem;
    flex-wrap: wrap;
  }

  /* ── NOTIF BELL ────────────────────────────────────────────────── */
  .notif-bell {
    min-width: var(--mobile-touch-min);
    min-height: var(--mobile-touch-min);
  }
  .notif-dropdown {
    right: 0;
    left: auto;
    width: calc(100vw - 1rem);
    max-width: 360px;
  }

  /* ── SHARE MODAL ───────────────────────────────────────────────── */
  .share-modal .share-options {
    flex-direction: column;
    gap: 0.5rem;
  }
}

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

  /* Tighter padding */
  .cards, .card-grid, .game-grid, .news-cards,
  .broadcast-cards {
    grid-template-columns: 1fr !important;
    padding: 0 0.5rem;
  }

  .feat-grid {
    grid-template-columns: 1fr;
  }
  .ent-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Entity word grid — 2 columns on phones */
  .word-grid, .entity-words {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Art gallery — 2 columns */
  .art-grid, .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats row — stack */
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }
  .ach-grid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  }

  /* Hide decorative elements */
  .is-mobile .grain,
  .is-mobile #grain,
  .is-mobile .vignette,
  .is-mobile #vignette,
  .is-mobile .bg-canvas,
  .is-mobile #bg-canvas {
    display: none;
  }

  /* Smaller modals */
  .modal, .modal-content {
    width: calc(100% - 0.5rem) !important;
    margin: auto 0.25rem;
  }

  /* Game canvas — full width */
  .game-container canvas {
    width: 100vw !important;
    max-height: 55vh;
  }

  /* Video — taller on phones */
  video, .video-player, .hls-player {
    max-height: 35vh;
  }

  /* Floating comments — even smaller */
  .floating-comment, .socket-comment {
    font-size: 0.48rem !important;
    max-width: 65vw;
  }

  /* Entrance page */
  .pulse-entities {
    display: none;
  }
  .pulse-label {
    width: 100%;
    text-align: center;
    border-right: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL PHONE — 360px and below (SE, Galaxy S mini etc.)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  nav a, .nav a {
    font-size: 0.38rem;
    padding: 0.3rem 0.35rem;
  }
  .splash-title, .fcta-title {
    font-size: clamp(1.1rem, 7vw, 2rem);
  }
  .mobile-nav-drawer {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — short viewport
   ═══════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  video, .video-player, .hls-player {
    max-height: 70vh;
  }
  .game-container canvas {
    max-height: 80vh;
  }
  .player-sidebar, .broadcast-sidebar,
  .entity-sidebar, .chat-sidebar {
    max-height: 30vh;
  }
  .mobile-nav-drawer {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    max-height: 60vh;
    transform: translateY(-100%);
  }
  .mobile-nav-drawer.open {
    transform: translateY(0);
  }
  .mobile-nav-drawer a {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TOUCH DEVICE OVERRIDES (also targets tablets with touch)
   ═══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Disable hover effects — they stick on touch devices */
  .card:hover, .news-card:hover, .game-card:hover,
  .broadcast-card:hover, .btn:hover, button:hover,
  .pulse-entity:hover, .entity-item:hover,
  .mobile-nav-drawer a:hover {
    transition: none;
  }

  /* Ensure all interactive elements are tappable */
  a, button, [role="button"], input, select, textarea,
  .clickable, [onclick], [data-action] {
    touch-action: manipulation;
  }

  /* Custom scrollbar for touch */
  * {
    scrollbar-width: thin;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PREFERS REDUCED MOTION — accessibility
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scanlines, .grain, .vignette, .chromatic,
  .screen-flicker, .crt-screen::before, .crt-screen::after,
  #grain, #scanlines, #vignette, #chromatic {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   iOS SAFE AREAS
   ═══════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .input-area, .chat-input-area, .game-controls {
      padding-bottom: max(8px, var(--safe-bottom));
    }
    .mobile-nav-toggle {
      top: max(0px, var(--safe-top));
      right: max(0px, var(--safe-right));
    }
    nav, .nav, .main-nav {
      padding-left: max(var(--mobile-pad), var(--safe-left));
      padding-right: max(var(--mobile-pad), var(--safe-right));
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT (just in case)
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .mobile-nav-toggle, .mobile-nav-drawer, .mobile-nav-overlay,
  .notif-bell, .floating-comment, .scanlines, .grain, .vignette,
  nav, .nav, .site-nav {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   GALAXY FOLD FIX — 344px and below
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 344px) {
  .splash-title, .fcta-title,
  h1, .hero-title, .site-title {
    font-size: clamp(0.9rem, 6.5vw, 1.6rem) !important;
    letter-spacing: 0.02em !important;
    word-break: break-word;
  }
  .splash-sub, .fcta-sub, .hero-sub {
    font-size: 0.65rem !important;
  }
  p, .description, .tagline {
    font-size: 0.7rem !important;
    padding: 0 0.3rem;
  }
  .cta-group a, .cta-group button {
    font-size: 0.5rem !important;
    padding: 0.6rem 1rem !important;
  }
  .mobile-nav-drawer {
    width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   AUTH INDICATOR MOBILE — collapse into hamburger
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .auth-indicator {
    display: none !important;
  }
}