#ft-mobile-lobby {
  display: none;
}

#ft-mobile-lobby .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  html,
  body {
    background: #07110c;
    overscroll-behavior: none;
  }

  #forest {
    background:
      radial-gradient(circle at 78% 8%, rgba(77, 125, 91, .24), transparent 32%),
      linear-gradient(180deg, #0c1c14 0%, #07110c 72%);
  }

  #ft-stage,
  #ft-dock,
  #ft-marquee,
  #ft-arrow-prev,
  #ft-arrow-next,
  #ft-scrim,
  #ft-leaf-canvas {
    display: none !important;
  }

  #forest > header {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px !important;
    background: linear-gradient(180deg, rgba(5, 13, 9, .94), rgba(5, 13, 9, .62) 72%, transparent);
  }

  #forest > header a span:last-child,
  #ft-bg-switch {
    display: none !important;
  }

  #studio-proto-btn,
  #studio-proto-hint,
  #hmix-fav-hub {
    display: none !important;
  }

  #ft-mobile-lobby {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(70px + env(safe-area-inset-top, 0px)) 12px calc(112px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    color: #edf1e8;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    transition: opacity .24s ease, filter .24s ease;
  }

  #ft-mobile-lobby::-webkit-scrollbar {
    display: none;
  }

  #ft-mobile-lobby::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(3, 10, 7, .16), #07110c 78%),
      url('../theater-night-q95.webp') 52% top / auto 58vh no-repeat;
    opacity: .43;
  }

  #ft-mobile-lobby::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
  }

  body.ft-media-on #ft-mobile-lobby,
  body.ft-pl-on #ft-mobile-lobby {
    opacity: .16;
    filter: blur(3px);
    pointer-events: none;
  }

  .ft-mobile-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 2px 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: .2em;
    color: rgba(196, 218, 199, .7);
  }

  .ft-mobile-intro__edition {
    color: #e4c879;
  }

  .ft-mobile-feature {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(231, 202, 124, .2);
    border-radius: 18px 18px 40px 18px;
    background: #0c1711;
    box-shadow: 0 28px 70px -34px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .025);
    isolation: isolate;
  }

  .ft-mobile-feature__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    filter: saturate(.88) contrast(1.04);
    transform: scale(1.015);
  }

  .ft-mobile-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(5, 11, 8, .05) 8%, rgba(5, 11, 8, .24) 42%, rgba(5, 11, 8, .96) 78%),
      linear-gradient(90deg, rgba(5, 11, 8, .46), transparent 62%);
  }

  .ft-mobile-feature__content {
    position: absolute;
    inset: auto 0 0;
    padding: 24px 22px 22px;
  }

  .ft-mobile-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px;
    letter-spacing: .21em;
    color: #e7ca7c;
  }

  .ft-mobile-kicker::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
  }

  .ft-mobile-feature h2 {
    margin: 0;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(30px, 9.5vw, 40px);
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1.18;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .82);
  }

  .ft-mobile-feature__meta {
    margin: 8px 0 0;
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(220, 231, 218, .66);
  }

  .ft-mobile-curator-note {
    margin: 16px 0 18px;
    font-family: 'Noto Serif JP', serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.82;
    color: rgba(236, 239, 229, .82);
  }

  .ft-mobile-curator-note span {
    margin-right: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 9px;
    letter-spacing: .14em;
    color: #e7ca7c;
  }

  .ft-mobile-feature__cta {
    min-height: 48px;
    padding: 0 21px;
    border: 0;
    border-radius: 999px;
    color: #102118;
    background: linear-gradient(135deg, #efd78d, #cba64e);
    box-shadow: 0 14px 30px -15px rgba(231, 202, 124, .82);
    font: 700 13px/1 'Noto Sans JP', sans-serif;
    letter-spacing: .06em;
  }

  .ft-mobile-section {
    margin-top: 36px;
  }

  .ft-mobile-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 3px 14px;
  }

  .ft-mobile-section__eyebrow {
    margin: 0 0 5px;
    font: 11px/1 'Bebas Neue', sans-serif;
    letter-spacing: .22em;
    color: #d9bd6d;
  }

  .ft-mobile-section h2 {
    margin: 0;
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .04em;
  }

  .ft-mobile-section__hint {
    margin: 0 0 2px;
    font-size: 10px;
    letter-spacing: .08em;
    color: rgba(196, 215, 197, .5);
  }

  .ft-mobile-doors {
    display: grid;
    gap: 9px;
  }

  .ft-mobile-door {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    min-height: 82px;
    overflow: hidden;
    padding: 0 16px 0 0;
    border: 1px solid rgba(141, 181, 151, .18);
    border-radius: 14px;
    color: #edf1e8;
    text-align: left;
    background: rgba(13, 28, 20, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .ft-mobile-door__image {
    align-self: stretch;
    min-height: 82px;
    background-position: center;
    background-size: cover;
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
    mask-image: linear-gradient(90deg, #000 72%, transparent);
  }

  .ft-mobile-door__copy {
    margin-left: -4px;
    padding: 13px 8px;
  }

  .ft-mobile-door__verb {
    display: block;
    margin-bottom: 5px;
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    letter-spacing: .08em;
  }

  .ft-mobile-door__detail {
    display: block;
    font-size: 10px;
    line-height: 1.45;
    color: rgba(204, 221, 205, .58);
  }

  .ft-mobile-door__arrow {
    font-size: 18px;
    color: #d9bd6d;
  }

  .ft-mobile-archive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ft-mobile-archive-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(141, 181, 151, .16);
    border-radius: 12px;
    color: #edf1e8;
    text-align: left;
    background: rgba(11, 24, 17, .76);
  }

  .ft-mobile-archive-card__image {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background-position: center;
    background-size: cover;
  }

  .ft-mobile-archive-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 54%, rgba(5, 12, 8, .72));
  }

  .ft-mobile-archive-card__copy {
    display: block;
    padding: 12px 12px 13px;
  }

  .ft-mobile-archive-card__tag {
    display: block;
    margin-bottom: 5px;
    font: 9px/1 'Bebas Neue', sans-serif;
    letter-spacing: .16em;
    color: #d9bd6d;
  }

  .ft-mobile-archive-card__title {
    display: block;
    overflow: hidden;
    font-family: 'Noto Serif JP', serif;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ft-mobile-curation {
    margin: 38px 3px 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(145, 178, 150, .16);
    font-family: 'Noto Serif JP', serif;
    font-size: 11px;
    line-height: 1.8;
    color: rgba(190, 210, 191, .56);
  }

  .ft-mobile-curation strong {
    display: block;
    margin-bottom: 4px;
    font: 11px/1 'Bebas Neue', sans-serif;
    letter-spacing: .2em;
    color: rgba(226, 199, 118, .8);
  }

  .ft-mobile-feature__cta:active,
  .ft-mobile-door:active,
  .ft-mobile-archive-card:active {
    transform: scale(.985);
  }
}

@media (max-width: 360px) {
  .ft-mobile-feature {
    min-height: 410px;
  }

  .ft-mobile-door {
    grid-template-columns: 80px 1fr auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ft-mobile-lobby,
  .ft-mobile-feature__image,
  .ft-mobile-feature__cta,
  .ft-mobile-door,
  .ft-mobile-archive-card {
    transition: none !important;
  }
}