@media (max-width: 480px) {
  html, body {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .jt-dock {
    top: auto !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    left: 6px !important;
    right: 6px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 4px !important;
    z-index: 100 !important;
  }
  .jt-dock a {
    font-size: 10px !important;
    letter-spacing: .02em !important;
    padding: 8px 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* TRY ON: full width left panel, hide right */
  .left-panel, #left-panel, .cabin > aside {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
  }
  .right-panel, .cabin > section.right-panel {
    display: none !important;
  }
  .cabin, .cabin-stage {
    display: block !important;
    width: 100% !important;
  }
  .zone-2, #zone-featured {
    max-width: 100% !important;
  }
  #featured-slot, .featured-slot {
    width: 100% !important;
    max-width: 280px !important;
  }
  .cat-tabs, #cat-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .explore-list, #explore-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .attract-hint, #attract-hint, [data-i18n="placeholder"] {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(80vw, 260px) !important;
    text-align: center !important;
    z-index: 5 !important;
  }

  /* KIDS */
  .cabin {
    height: 100dvh !important;
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(60px + env(safe-area-inset-bottom)) !important;
    grid-template-rows: auto 1fr !important;
  }
  .stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  .col-left {
    flex-direction: row !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    max-height: 88px !important;
  }
  .col-right { display: none !important; }
  .char-card { flex: 0 0 auto !important; }
  .char-card img { width: 52px !important; height: 52px !important; }
  .headline { font-size: 14px !important; white-space: normal !important; text-align: center !important; }
  .logo-text { max-height: 26px !important; max-width: 48vw !important; }
  .btn-stop { right: 8px !important; top: auto !important; bottom: 8px !important; transform: none !important; }

  /* KIDS: keep both character rows visible on a phone. */
  body.kids-page .stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: 74px 74px minmax(0, 1fr) !important;
  }
  body.kids-page .col-left,
  body.kids-page .col-right {
    grid-column: 1 !important;
    width: 100% !important;
    height: 74px !important;
    max-height: 74px !important;
    padding: 3px 8px 5px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  body.kids-page .col-left { grid-row: 1 !important; }
  body.kids-page .col-right { grid-row: 2 !important; }
  body.kids-page .stage-center {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
  }
  body.kids-page .char-card {
    flex: 0 0 54px !important;
    width: 54px !important;
    scroll-snap-align: center;
  }
  body.kids-page .char-card img {
    width: 40px !important;
    height: 40px !important;
  }
  body.kids-page .char-name {
    max-width: 50px !important;
    font-size: 8px !important;
  }

  /* FX */
  .page-top { top: calc(6px + env(safe-area-inset-top)) !important; }
  .page-title { font-size: 15px !important; margin: 2px 0 0 !important; }
  .page-logo { height: 28px !important; }
  .dock {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .dock-halloween {
    bottom: calc(140px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    right: 8px !important;
  }
  .fx-row {
    flex-direction: row !important;
    gap: 6px !important;
    padding: 6px !important;
    overflow-x: auto !important;
  }
  .fx-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
    flex: 0 0 auto !important;
  }
  .fx-reset {
    left: auto !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(200px + env(safe-area-inset-bottom)) !important;
    width: 68px !important;
    height: 32px !important;
    font-size: 11px !important;
  }

  /* STAGE */
  .halo {
    object-fit: cover !important;
    object-position: center 30% !important;
    width: 100vw !important;
    height: calc(100dvh - 60px) !important;
  }
  .caption {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    font-size: 16px !important;
  }
  .used-minutes {
    font-size: 11px !important;
    top: calc(6px + env(safe-area-inset-top)) !important;
    right: 8px !important;
  }
}