/* Scale the home composition for short landscape phone screens. */
@media (orientation: landscape) and (min-width: 650px) and (max-width: 1100px) and (max-height: 600px) {
  body:has(.club-home) .nav { height: 48px !important; min-height: 48px !important; padding-inline: 20px !important; gap: clamp(12px, 2vw, 24px) !important; }
  body:has(.club-home) .nav .brand { margin-right: auto; }
  body:has(.club-home) .nav .club-nav-note { display: none !important; }
  body:has(.club-home) .nav .ko-logo { width: 66px !important; height: 44px !important; }
  body:has(.club-home) .nav .ko-logo::after { font-size: 9px !important; }
  html body:has(.club-home) #app .nav a:not(.brand) { font-size: clamp(12px, 1.45vw, 15px) !important; }
  html body:has(.club-home) #app .nav .profile { font-size: clamp(12px, 1.45vw, 15px) !important; padding: 3px 4px !important; }
  body:has(.club-home) .nav .console-theme-toggle { width: 34px !important; height: 34px !important; flex: 0 0 34px; }
  body .club-home .club-opening { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, .95fr); align-items: center; gap: clamp(10px, 1.7vw, 20px); min-height: 0; max-width: none; padding: 13px 20px 15px; }
  body .club-home .club-copy { text-align: left; min-width: 0; }
  body .club-home .club-copy h1, body[data-palette=ps2light] .club-home .club-copy h1 { font-size: clamp(28px, 3.7vw, 42px) !important; line-height: 1.04; letter-spacing: -.035em; margin: 0; }
  body .club-home .club-copy h1 span { white-space: normal; }
  body .club-home .hero-card-fan { display: block; position: relative; left: auto; top: auto; width: 100%; height: 150px; padding: 0; border: 0; background: transparent; transform: none; cursor: pointer; isolation: isolate; }
  body .club-home .hero-fan-flash { position: absolute; inset: 10px; background: radial-gradient(ellipse, #62b7ff2e, transparent 70%); pointer-events: none; }
  body .club-home .hero-fan-card { display: block; position: absolute; top: 5px; left: 50%; width: 80px; height: 120px; margin-left: -40px; padding: 3px; overflow: hidden; background: #fff; border: 1px solid #96c7ff; box-shadow: 0 9px 16px #0718326e; pointer-events: none; transition: transform .35s ease, opacity .35s ease; }
  body .club-home .hero-fan-card img, body .club-home .hero-fan-card svg { display: block; width: 100%; height: 100%; object-fit: cover; }
  body .club-home .hero-fan-card-left { z-index: 1; transform: translate(-37px, 22px) rotate(-21deg); }
  body .club-home .hero-fan-card-right { z-index: 2; transform: translate(37px, 22px) rotate(20deg); }
  body .club-home .hero-fan-card-front { z-index: 3; transform: rotate(-2deg); }
  body .club-home .hero-fan-card-entering { z-index: 4; transform: translate(100px, 12px) rotate(25deg) scale(.7); opacity: 0; }
  body .club-home .hero-fan-card-exiting { z-index: 0; transform: translate(-100px, 60px) rotate(-25deg) scale(.7); opacity: 0; }
  body .club-home .hero-fan-status { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  body .club-home .entry-ticket { display: grid; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto !important; gap: 0 !important; min-height: 0 !important; width: 100%; max-width: none; margin: 0; padding: 11px 15px 0; transform: none; }
  body .club-home .entry-ticket > * { grid-column: 1 !important; }
  body .club-home .entry-ticket h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1; margin: 7px 0; max-width: 100%; }
  body .club-home .entry-ticket > p { font-size: 11px; line-height: 1.35; max-width: none; }
  body[data-palette=ps2light] .club-home .entry-ticket > p { color: #43567d; }
  body .club-home .entry-ticket .ticket-top, body .club-home .entry-ticket .ticket-art { display: none; }
  body .club-home .entry-ticket .ticket-start { min-height: 34px; margin: 7px 0 5px; padding: 5px 11px; font-size: 13px; }
  body .club-home .entry-ticket .ticket-start svg { width: 17px; height: 17px; }
  body .club-home .entry-ticket .ticket-bottom { padding: 5px 0; font-size: 7px; }
  body .club-home .club-choices { padding: 5px 20px 24px; }
  body .club-home .choices-heading { margin-bottom: 7px; }
  body .club-home .choices-heading h2 { font-size: 21px; }
  body .club-home .choice-grid { gap: 12px !important; padding-bottom: 8px; }
  body .club-home .choice-ticket {
    flex: 0 0 clamp(138px, 17vw, 176px) !important;
    width: clamp(138px, 17vw, 176px) !important;
    height: 252px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  body[data-cover-design] .club-home .choice-ticket .choice-art {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  body[data-cover-design] .club-home .choice-ticket .choice-art img {
    width: 100% !important;
    height: 100% !important;
    padding: 25px 0 52px !important;
    object-fit: cover !important;
  }
  body[data-cover-design] .club-home .choice-ticket .case-brand {
    height: 25px !important;
    padding: 0 6px !important;
  }
  body[data-cover-design] .club-home .choice-ticket .case-brand::before { font-size: 11px !important; }
  body[data-cover-design] .club-home .choice-ticket .case-brand .case-logo { width: 31px !important; height: 23px !important; }
  body[data-cover-design] .club-home .choice-ticket .choice-art + div {
    min-height: 58px !important;
    padding: 12px 8px 7px !important;
  }
  body[data-cover-design] .club-home .choice-ticket h3 {
    font-size: 17px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  body .club-home .club-abilities {
    max-width: none;
    padding: 30px 20px 38px;
  }
  body .club-home .abilities-heading {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 20px;
    align-items: center;
  }
  body .club-home .abilities-heading h2 {
    font-size: 35px;
    line-height: 1;
  }
  body .club-home .abilities-heading p { font-size: 13px; line-height: 1.4; }
  body .club-home .abilities-link { font-size: 12px; }
  body .club-home .club-abilities[data-ability-layout="showcase"] .abilities-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
    margin-top: 20px;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature {
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-rows: auto auto auto auto;
    gap: 5px 10px;
    min-height: 0;
    padding: 15px 17px;
    border-radius: 10px;
    box-shadow: 0 7px 18px #0002;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-icon {
    width: 64px;
    height: 64px;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-index { font-size: 10px; }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature h3 {
    font-size: 21px;
    line-height: 1.05;
    max-width: none;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-effect {
    align-self: start;
    margin: 4px 0 0;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-effect span,
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-timing span {
    font-size: 9px;
    letter-spacing: .09em;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-effect p {
    max-width: none;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.3;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-timing {
    margin: 4px 0 0;
    padding: 6px 0 0;
  }
  body .club-home .club-abilities[data-ability-layout="showcase"] .ability-feature-timing strong {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.25;
  }
  body .club-home .club-last-call { margin: 0 20px 24px; padding: 18px 20px; }
  body .club-home .club-last-call h2 { font-size: 29px; }
  body .club-home .club-last-call .button { font-size: 14px; }
  body .club-home .club-last-call p { font-size: 11px; }
}

@media (orientation: landscape) and (min-width: 650px) and (max-width: 750px) and (max-height: 600px) {
  body .club-home .abilities-heading h2 em { margin-left: .18em; }
}
