/* assets/mobile.css — iOS Safari hardening for Dead Society */
/* keep it subtle: avoid re-skinning; just make it usable */
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --vh: 1vh;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  min-height: calc(var(--vh) * 100);
  padding-bottom: max(0px, var(--safe-bottom));
  padding-top: max(0px, var(--safe-top));
}

/* Prevent accidental zoom on form elements (iOS zooms if < 16px) */
input, textarea, select, button{
  font-size: 16px;
  touch-action: manipulation;
}

/* Tap targets */
a, button{
  min-height: 44px;
}

/* Make embedded media behave on small screens */
iframe, video, canvas, img{
  max-width: 100%;
}

/* Common "100vh" iOS bug mitigation: prefer 100dvh where used */
@supports (height: 100dvh){
  .vh100{ height: 100dvh !important; }
}

/* Table-based layouts (intro page) shouldn't overflow on phones */
table{
  max-width: 100%;
}

@media (max-width: 720px){
  /* Allow horizontal scrolling rather than crushing */
  .page, .wrap, #frame, #vhs-frame, #vhs-screen{
    max-width: 100%;
  }

  /* If any pages use fixed-size cards, let them breathe */
  .card{
    width: auto !important;
    max-width: 92vw !important;
  }

  /* If a classic 90s table layout exists, let it scroll */
  .ns-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}



/* ===== Intro (AOL/Netscape) mobile layout ===== */
@media (max-width: 720px){
  body.intro{
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.intro .page{
    width: 100% !important;
    height: auto !important;
    min-height: calc(var(--vh) * 100);
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    overflow: auto !important;
    box-shadow: none !important;
  }
  body.intro table.layout,
  body.intro tbody,
  body.intro tr,
  body.intro td{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
  body.intro td.nav, body.intro td.side{
    width:100% !important;
  }
  body.intro td.nav{ order: 1; }
  body.intro td.main{ order: 2; }
  body.intro td.side{ order: 3; }
}


/* YouTube recovered footage responsive */
@media (max-width: 720px){
  iframe#ytiframe{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}


/* ===== Global mobile overrides (make fixed/100vh pages usable on iOS) ===== */
:root{ --tap-pad: 12px; }
body{ min-height: calc(var(--vh) * 100) !important; }
@media (max-width: 720px){
  body{ overflow-y:auto !important; -webkit-overflow-scrolling: touch; }
  .wrap, .hero, #hero{ height:auto !important; min-height: calc(var(--vh) * 100) !important; }
  .hud{ top: calc(.5rem + env(safe-area-inset-top)) !important; right: calc(.5rem + env(safe-area-inset-right)) !important; }
  .roll{ left:.5rem !important; right:.5rem !important; width:auto !important; }
  /* Terminal: keep input visible + prevent tiny tap targets */
  .terminal, .card{ padding: 12px !important; }
  input{ font-size:16px !important; line-height:1.2 !important; }
  a, button{ padding: 10px 12px; }
}