/*
 * mobile.css — lightweight responsive overrides for tbhonline
 * Only activates on small screens. Desktop is completely untouched.
 * Preserves the original 2003 aesthetic — just makes it not terrible on a phone.
 */

@media screen and (max-width: 600px) {

  /* ===== Global ===== */

  body {
    margin: 0 !important;
    padding: 8px !important;
    -webkit-text-size-adjust: 100%;
  }

  /* Bump up the tiny 8pt fonts to something readable on mobile */
  font[style*="font-size: 8pt"],
  font[style*="font-size:8pt"],
  font[size="1"],
  font[size="2"] {
    font-size: 12px !important;
  }

  /* ===== Tables: make them fluid ===== */

  table[width="393"],
  table[width="350"],
  table[width="340"],
  table[width="270"],
  table[width="316"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  table {
    max-width: 100% !important;
  }

  td {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ===== Images: scale down ===== */

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ===== index.html — splash page ===== */

  /* Main band photo — scale to viewport */
  img[src="images/mainpic.jpg"] {
    width: 100% !important;
    max-width: 456px !important;
    height: auto !important;
  }

  /* ===== main.html — Flash + iframe layout ===== */

  /* Flash embed container */
  object[width="393"],
  embed[width="393"],
  object[WIDTH="393"],
  embed[WIDTH="393"] {
    width: 100% !important;
    max-width: 393px !important;
    height: auto !important;
    min-height: 200px;
  }

  /* Ruffle player container (inserted by ruffle.js) */
  ruffle-embed,
  ruffle-player,
  ruffle-object {
    width: 100% !important;
    max-width: 393px !important;
    height: auto !important;
    min-height: 200px;
    aspect-ratio: 393 / 255;
  }

  /* Content iframe */
  iframe[name="content"],
  iframe[width="393"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 300px;
  }

  /* ===== Content pages in iframe ===== */

  /* Photo thumbnails — keep them tappable */
  img[width="51"][height="51"] {
    width: 40px !important;
    height: 40px !important;
    padding: 4px;
  }

  /* Merch images */
  img[width="130"][height="130"] {
    width: 100px !important;
    height: 100px !important;
  }

  img[width="100"][height="100"] {
    width: 80px !important;
    height: 80px !important;
  }

  /* Links — larger tap targets */
  a {
    display: inline-block;
    min-height: 28px;
    line-height: 1.4;
  }

  /* Justified text can look weird on narrow screens */
  p[align="justify"] {
    text-align: left !important;
  }

  /* ===== Forms (merch, guestbook) ===== */

  input,
  textarea,
  select {
    font-size: 14px !important;
    min-height: 36px;
  }

  input[type="submit"],
  input[type="button"] {
    min-width: 120px;
    min-height: 40px;
    padding: 8px 16px;
  }
}