/* EXP Tube on phones (<= 640px). Loaded last by index.html, so these rules
   win over each feature's own sheet without touching any of them. Desktop and
   tablets are unaffected: everything here is inside the media query below.
   Remove the <link> in index.html to undo all of it. */
@media (max-width: 640px) {
  :root { --m-gutter: 14px; }

  /* ---------- header ----------
     Row 1: logo + search. Row 2: one swipeable strip of pills. The pills used
     to shrink below their own text (flex-shrink + min-width:0), so labels
     spilled out of the pill; now each is exactly as wide as its label. */
  .app-header {
    padding: 10px var(--m-gutter) 8px;
    gap: 8px 10px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .05);
  }
  .app-header__brand img { height: 32px; }
  .app-search__input { height: 40px; font-size: 15px; padding-left: 16px; border-radius: 999px 0 0 999px; }
  .app-search__go { height: 40px; width: 52px; border-radius: 0 999px 999px 0; }
  .app-header__actions {
    gap: 8px;
    margin: 0 calc(var(--m-gutter) * -1);
    padding: 2px var(--m-gutter) 4px;
    /* No scroll-snap here: the Game toggle is inserted after load, and snapping
       kept the old first pill in place, opening the strip scrolled right. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--m-gutter), #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--m-gutter), #000 calc(100% - 28px), transparent 100%);
  }
  .app-header .app-header__btn {
    flex: none;
    justify-content: center;
    gap: 0;               /* text-only pills: "Game&nbsp;<b>ON</b>" already carries its space */
    height: 36px;
    min-width: max-content;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 700;
    line-height: 36px;
  }
  .app-header .app-header__btn b { font-weight: 900; }

  /* ---------- home ---------- */
  .home-hero__slide img { border-radius: 16px; }

  /* ---------- watch: the action row as a tidy two-column grid ---------- */
  .watch-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .watch-actions > [hidden] { display: none !important; }
  .watch-actions > .watch-actions__slot:not([hidden]) { display: contents; }
  .watch-actions .watch-actions__btn,
  .watch-actions .watch-actions__slot > button {
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    border-radius: 14px;
  }
  /* Mob Mode's button sits inside its own .mob-bar wrapper. */
  .watch-actions .mob-bar { width: 100%; display: block; }
  .watch-actions .mob-bar .mob-btn {
    width: 100%; height: 46px; margin: 0; padding: 0 12px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  }
  .watch-actions .mob-bar__note:empty { display: none; }
  .watch-actions .watch-actions__btn > *,
  .watch-actions .watch-actions__slot > button > * { line-height: 1; }

  /* Digital inventory: tiles swipe and snap instead of being cut mid-card. */
  .di-tiles { scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding-bottom: 6px; }
  .di-tile { scroll-snap-align: start; }

  /* ---------- the monster layer: phone-sized sprites ----------
     Scaled around the feet (the point the game positions), so every monster
     and player stands exactly where the game puts it, just smaller. The game
     only transforms the <img> inside, never this box. */
  #vmmoWorld .vm-ent.vm-mon,
  #vmmoWorld .vm-ent.vm-char,
  #vmmoWorld .vm-ent.vm-ally {
    transform: translate(-50%, -100%) scale(.56);
    transform-origin: 50% 100%;
  }

  /* ---------- floating controls: small, at the edges, never over content ---------- */
  .exp-progression-toggle {
    left: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
  }
  .vm-hud.vm-hud-site {
    left: auto !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: calc(100vw - 120px) !important;
  }
  .vm-hud.vm-hud-site .vm-panel { padding: 6px !important; border-radius: 999px; }
  .vm-hud.vm-hud-site .vm-self:not([hidden]) ~ * { display: none; }
  .vm-hud.vm-hud-site .vm-panel:has(.vm-self:not([hidden])) { border-radius: 14px; }
  /* The long "Monsters are loose…" sentence: the Join button says it on a phone. */
  .vm-hud.vm-hud-site .vm-tip { display: none !important; }
  .vm-hud.vm-hud-site .vm-join { height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}