/* ============================================================
   NAUSTALGIAOS MOBILE FIX v1.0
   Fixes critical mobile issues:
   - Terminal text breaking mid-word
   - Audio player slider glitching
   - Layout overflow issues
   
   Add this AFTER all other stylesheets in index.html
============================================================ */

/* ===== TERMINAL TEXT FIX ===== */
/* Prevent words from breaking mid-word */
body.is-mobile #term,
body.is-mobile .term-inner,
body.is-mobile .term-line {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Ensure terminal lines have proper width constraints */
body.is-mobile .term-line {
  max-width: 100% !important;
  white-space: pre-wrap !important;
}

/* Terminal container */
body.is-mobile #term {
  font-size: 12px !important;
  line-height: 1.4 !important;
  padding: 12px !important;
  overflow-x: hidden !important;
}

/* Input field - prevent zoom on iOS */
body.is-mobile #termInput {
  font-size: 16px !important;
  max-width: 100% !important;
}

/* ===== AUDIO PLAYER / CONTROL PANEL FIX ===== */
body.is-mobile #controlPanel {
  right: 8px !important;
  bottom: 8px !important;
  left: 8px !important;
  min-width: unset !important;
  width: calc(100% - 16px) !important;
  max-width: 400px !important;
  margin-left: auto !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

/* Track scroll - prevent doubling */
body.is-mobile #trackScroll {
  font-size: 0.7rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* Controls row layout fix */
body.is-mobile #controlsRow {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Buttons - smaller on mobile */
body.is-mobile #controlsRow button {
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  min-width: 40px !important;
  flex-shrink: 0 !important;
}

/* Volume label */
body.is-mobile #controlsRow .control-label {
  font-size: 0.6rem !important;
  min-width: 22px !important;
}

/* Volume value display */
body.is-mobile #volumeValue {
  font-size: 0.6rem !important;
  min-width: 20px !important;
}

/* VOLUME SLIDER FIX - This is the critical fix */
body.is-mobile #volumeSlider {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 1 !important;
  min-width: 50px !important;
  max-width: 100px !important;
  height: 20px !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* Slider track - WebKit (Chrome, Safari, Edge) */
body.is-mobile #volumeSlider::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 8px !important;
  background: linear-gradient(to right, 
    rgba(5, 217, 232, 0.4) 0%, 
    rgba(5, 217, 232, 0.2) 100%) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(5, 217, 232, 0.3) !important;
}

/* Slider thumb - WebKit */
body.is-mobile #volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background: #f9f002 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(249, 240, 2, 0.8) !important;
  box-shadow: 0 0 10px rgba(249, 240, 2, 0.6) !important;
  cursor: pointer !important;
  margin-top: -5px !important;
  position: relative !important;
}

/* Slider track - Firefox */
body.is-mobile #volumeSlider::-moz-range-track {
  width: 100% !important;
  height: 8px !important;
  background: linear-gradient(to right, 
    rgba(5, 217, 232, 0.4) 0%, 
    rgba(5, 217, 232, 0.2) 100%) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(5, 217, 232, 0.3) !important;
}

/* Slider thumb - Firefox */
body.is-mobile #volumeSlider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  background: #f9f002 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(249, 240, 2, 0.8) !important;
  box-shadow: 0 0 10px rgba(249, 240, 2, 0.6) !important;
  cursor: pointer !important;
}

/* Trust meter fix */
body.is-mobile #trustMeter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

body.is-mobile #trustBarBg {
  flex: 1 !important;
  min-width: 50px !important;
  height: 8px !important;
}

body.is-mobile #trustBar {
  height: 100% !important;
}

body.is-mobile #trustValue {
  font-size: 0.6rem !important;
  min-width: 30px !important;
}

/* ===== GHOST ENTITY FIX ===== */
body.is-mobile #glitchGhost {
  transform: scale(0.7) !important;
  transform-origin: center center !important;
}

/* ===== TV FRAME ADJUSTMENTS ===== */
body.is-mobile #terminalFrame {
  transform: scale(0.95) !important;
  transform-origin: center center !important;
}

/* ===== HIDE ADMIN CONSOLE ON MOBILE (handled by JS but backup) ===== */
body.is-mobile .admin-console {
  display: none !important;
}

body.is-mobile .admin-console.mobile-open {
  display: flex !important;
}

/* ===== NAVIGATION BAR FIX ===== */
body.is-mobile .topnav,
body.is-mobile #topNav {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

body.is-mobile .topnav::-webkit-scrollbar,
body.is-mobile #topNav::-webkit-scrollbar {
  display: none !important;
}

body.is-mobile .topnav a,
body.is-mobile .nav-btn {
  flex-shrink: 0 !important;
  padding: 8px 12px !important;
  font-size: 0.7rem !important;
  white-space: nowrap !important;
}

/* ===== LINKBAR NAV FIX (MOBILE) ===== */
body.is-mobile #linkBar {
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.is-mobile #linkBar .link-btn {
  padding: 6px 10px !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

body.is-mobile #linkBar .link-icon {
  font-size: 11px !important;
}

/* ===== COUNTDOWN FIX ===== */
body.is-mobile #countdown,
body.is-mobile .countdown {
  font-size: clamp(1.2rem, 5vw, 2rem) !important;
  letter-spacing: 0.1em !important;
}

/* ===== VISUALIZER FIX ===== */
body.is-mobile #viz {
  height: 60px !important;
  max-height: 60px !important;
}

/* ===== PREVENT HORIZONTAL SCROLL ===== */
body.is-mobile {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body.is-mobile * {
  max-width: 100vw !important;
}

/* ===== GUESTBOOK MOBILE FIX ===== */
body.is-mobile .guestbook-panel {
  right: 5px !important;
  left: 5px !important;
  width: auto !important;
  max-width: calc(100vw - 10px) !important;
  max-height: 70vh !important;
}

body.is-mobile .guestbook-canvas-container {
  max-height: 40vh !important;
}

/* ===== BROADCAST CHAT MOBILE FIX ===== */
body.is-mobile .broadcast-chat-window {
  left: 5px !important;
  right: 5px !important;
  width: auto !important;
  top: auto !important;
  bottom: 100px !important;
  transform: none !important;
  max-height: 50vh !important;
}

/* ===== TOUCH TARGETS ===== */
body.is-mobile button,
body.is-mobile a,
body.is-mobile input[type="range"],
body.is-mobile .clickable {
  min-height: 44px;
  min-width: 44px;
}

/* Exception for inline elements */
body.is-mobile #controlsRow button {
  min-height: 36px !important;
  min-width: 36px !important;
}