/* Final responsive pass. Keep the established desktop artwork and brand colours. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Let the shared top menu scroll with the page on desktop and mobile. */
body.hipark-home > header,
body.tournament-page > header { position: relative; top: auto; }
body.hipark-home > #mobile-nav,
body.tournament-page > #mobile-nav { position: absolute; }
#mobile-nav[hidden] { display: none; }
body.hipark-home :where(main, section, article, figure, .wrap),
body.tournament-page .tournament-content :where(section, article, .wrap) { min-width: 0; }

@media (min-width: 1101px) {
  #mobile-nav { display: none; }
}

@media (max-width: 1100px) {
  html { scroll-padding-top: 92px; }
  body.hipark-home > header,
  body.tournament-page > header { height: 76px; padding: 0 18px; gap: 10px; }
  body.hipark-home > header nav,
  body.tournament-page > header nav { display: none; }
  body.hipark-home > header .animated-logo,
  body.tournament-page > header .animated-logo {
    width: clamp(120px, 36vw, 190px); max-width: none; min-width: 0; flex-shrink: 1;
  }
  body.hipark-home > header .nav-cta,
  body.tournament-page > header .nav-cta {
    margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center;
    justify-content: center; min-height: 44px; padding: 10px 12px;
    font-size: 14px; line-height: 1.25; white-space: nowrap;
  }
  body.hipark-home > header .menu-toggle,
  body.tournament-page > header .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; min-width: 44px; min-height: 44px;
    padding: 8px; font-size: 14px; line-height: 1.25; white-space: nowrap;
  }
  #mobile-nav {
    top: 76px; left: 0; right: 0; width: auto; padding: 12px 20px 20px;
    max-height: calc(100svh - 76px); max-height: calc(100dvh - 76px);
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  #mobile-nav a { display: flex; align-items: center; min-height: 48px; padding: 12px 0; font-size: 17px; }
  body.hipark-home main [id], body.tournament-page .tournament-content [id] { scroll-margin-top: 0; }
}

@media (max-width: 900px) {
  #top .opening-motion-copy li {
    --opening-peak-scale: 1;
    white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
    text-align: center; transform-origin: center;
  }
  #top .opening-title { overflow-wrap: anywhere; }
  #top .opening-mascots > img { height: auto; object-fit: contain; }
  #top .opening-support { gap: 10px; }
  #top .opening-support a { min-width: 0; min-height: 48px; display: grid; place-items: center; }
}

@media (max-width: 700px) {
  body.hipark-home .wrap { width: calc(100% - 36px); }
  body.hipark-home .section { padding-top: 56px; padding-bottom: 56px; }
  body.hipark-home :where(h2, h3, h4, p, li) { overflow-wrap: anywhere; }
  body.hipark-home .section-heading { gap: 24px; }
  body.hipark-home .technology-pillars { gap: 8px; }
  body.hipark-home .technology-pillars li { min-width: 0; padding-inline: 3px; }
  body.hipark-home .technology-pillars li > span:not(.technology-emoji) {
    font-size: clamp(12px, 2.8vw, 14px); letter-spacing: 0; line-height: 1.4;
    overflow-wrap: anywhere;
  }
  body.hipark-home .technology-pillars strong { font-size: 16px; }
  body.hipark-home .process-cards > li { padding-inline: 20px; }
  body.hipark-home .process-closing { max-width: 100%; }
  body.hipark-home .process-closing-phone,
  body.hipark-home .process-closing-apply { max-width: 100%; }
  body.hipark-home .space-showcase-image > img { aspect-ratio: auto; height: auto; object-fit: contain; }
  body.hipark-home .space-showcase-image::after { content: none; }
  body.hipark-home .space-showcase-copy {
    position: relative; inset: auto; padding: 24px 22px 28px; background: #15231c;
  }
  body.hipark-home .space-showcase-copy h3 { font-size: clamp(23px, 6.3vw, 36px); }
  body.hipark-home .management-scene { padding: 22px 10px; gap: 30px; }
  body.hipark-home .management-scene > *,
  body.hipark-home .dashboard-body > *,
  body.hipark-home .phone-shell,
  body.hipark-home .phone-screen,
  body.hipark-home .phone-body { min-width: 0; }
  body.hipark-home .dashboard-top { padding: 14px 12px; gap: 10px; }
  body.hipark-home .dashboard-top > span { padding-left: 10px; }
  body.hipark-home .dashboard-body { padding: 20px 12px; }
  body.hipark-home .dashboard-summary { padding: 14px 0; }
  body.hipark-home .dashboard-summary > div { min-width: 0; padding-inline: 6px; text-align: center; }
  body.hipark-home .dashboard-summary span { white-space: normal; font-size: 14px; }
  body.hipark-home .dashboard-summary strong { font-size: 27px; }
  body.hipark-home .dashboard-summary small { margin-left: 3px; }
  body.hipark-home .dashboard-bay { min-width: 0; }
  body.hipark-home .management-guide {
    grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 26px 6px 0; text-align: center;
  }
  body.hipark-home .studio-manager .management-guide .app-character {
    width: 145px !important; max-width: 100%; margin: 0 auto !important;
  }
  body.hipark-home .studio-manager .management-guide .solo-character {
    width: 145px !important; max-width: 100%; max-height: none;
  }
  body.hipark-home .management-phone-stage { width: 100%; max-width: 340px; }
  body.hipark-home #member-app .member-phones { padding: 24px 10px; gap: 32px; }
  body.hipark-home #member-app .phone-shell { width: 100%; max-width: 340px; }
  body.hipark-home .phone-body { padding-inline: 15px; }
  body.hipark-home .app-tabs button { min-height: 44px; font-size: 16px; padding-inline: 8px; }
  body.hipark-home #member-app .phone-bottom { padding-inline: 12px; gap: 6px; font-size: 14px; }
  body.hipark-home .app-static-button,
  body.hipark-home .app-action { min-height: 44px; }
  body.hipark-home #inquiry form { min-width: 0; padding: 26px 20px; }
  body.hipark-home #inquiry .fields { grid-template-columns: minmax(0, 1fr); }
  body.hipark-home #inquiry label { min-width: 0; }
  body.hipark-home #inquiry input:not([type=radio]):not([type=checkbox]),
  body.hipark-home #inquiry select,
  body.hipark-home #inquiry textarea {
    width: 100%; min-width: 0; max-width: 100%; min-height: 48px; font-size: 16px; line-height: 1.5;
  }
  body.hipark-home #inquiry fieldset { display: flex; flex-wrap: wrap; gap: 8px 22px; min-width: 0; }
  body.hipark-home #inquiry fieldset label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
  body.hipark-home .contact-info .email { font-size: 16px; overflow-wrap: anywhere; }
  body.hipark-home .form-phone { flex-wrap: wrap; gap: 10px; min-height: 44px; }
  body.hipark-home :where(.button, .gallery-button, .resource-card, summary) { min-height: 44px; }
  body.hipark-home footer :where(p, small, a) { overflow-wrap: anywhere; }
  body.hipark-home footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  body.hipark-home .mobile-contact {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  body.hipark-home .mobile-contact a { display: flex; align-items: center; justify-content: center; min-height: 46px; }
  body.hipark-home:has(#inquiry :is(input, select, textarea):focus) .mobile-contact { visibility: hidden; }
}

@media (max-width: 600px) {
  body.hipark-home .real-moments-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.hipark-home .real-moments-grid figure { width: 100%; max-width: 360px; margin-inline: auto; }
  body.hipark-home .real-moments-grid figcaption { padding: 18px; }
  body.hipark-home .real-moments-grid figcaption b { font-size: 18px; }
  body.hipark-home .real-moments-grid figcaption span { font-size: 16px; }
  body.hipark-home .mascot-inner { display: flex; flex-direction: column; align-items: center; min-height: 0; gap: 8px; text-align: center; }
  body.hipark-home .mascot-inner > div { padding: 38px 0 8px; }
  body.hipark-home .mascot-inner p { max-width: none; font-size: 16px; }
  body.hipark-home .mascot-inner .eyebrow { max-width: none; font-size: 14px; }
  body.hipark-home .mascot-inner img {
    position: static; align-self: center; width: min(100%, 320px); height: auto; max-height: none;
    object-fit: contain; margin: 0 auto 20px;
  }
  body.hipark-home .mascot-inner h2 { font-size: clamp(32px, 9vw, 44px); margin-bottom: 18px; }
}

@media (max-width: 380px) {
  body.hipark-home > header, body.tournament-page > header { padding-inline: 12px; gap: 7px; }
  body.hipark-home > header .nav-cta, body.tournament-page > header .nav-cta { padding-inline: 10px; }
  body.hipark-home .wrap { width: calc(100% - 32px); }
  #top .opening-support { gap: 6px; }
  #top .opening-support strong { font-size: 13px; }
  body.hipark-home .dashboard-bays { grid-template-columns: minmax(0, 1fr); }
  body.hipark-home .dashboard-bay { grid-template-columns: minmax(0, 1fr) auto; }
  body.hipark-home #member-app .member-character { flex-direction: column; align-items: center; gap: 18px; }
}

/* Event artwork stays complete and can still be opened at full size. */
@media (max-width: 800px) {
  body.tournament-page .tournament-content .wrap { width: calc(100% - 36px); }
  body.tournament-page .tournament-content .embedded-tournaments { scroll-margin-top: 0; }
  body.tournament-page .tournament-content .embedded-tournaments .tournament-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  body.tournament-page .tournament-content .embedded-tournaments .tournament-card { max-width: 560px; width: 100%; margin-inline: auto; }
  body.tournament-page .tournament-content .embedded-tournaments .card-heading h3 { font-size: 22px; }
  body.tournament-page .tournament-content .embedded-tournaments :is(.category, .month) { font-size: 14px; }
  body.tournament-page .tournament-content .embedded-tournaments .card-heading :is(p, a),
  body.tournament-page .tournament-content .embedded-tournaments .lineup-heading > p { font-size: 16px; }
  body.tournament-page .tournament-content .embedded-tournaments .card-heading a { min-height: 44px; display: flex; align-items: center; gap: 6px; }
  body.tournament-page .tournament-content .embedded-tournaments .review-note { font-size: 14px; padding: 18px; }
  body.tournament-page .tournament-content :is(h2, h3, h4, p, li) { overflow-wrap: anywhere; }
  body.tournament-page .tournament-content .schedule li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px 12px; }
  body.tournament-page .tournament-content .schedule li > b { grid-column: 2; font-size: 14px; }
  body.tournament-page .tournament-content .schedule li p { font-size: 16px; }
  body.tournament-page .tournament-content .join-steps li > div { min-width: 0; }
  body.tournament-page .tournament-content .button { min-height: 48px; }
  body.tournament-page .tournament-content #poster-viewer {
    box-sizing: border-box; width: calc(100% - 20px); max-width: 790px;
    max-height: 90svh; max-height: 90dvh; overflow: auto; overscroll-behavior: contain;
    margin: auto; border-radius: 12px;
  }
  body.tournament-page .tournament-content #poster-viewer .viewer-toolbar { padding: 10px 12px; gap: 8px; }
  body.tournament-page .tournament-content #poster-viewer .viewer-toolbar h2 { min-width: 0; font-size: 16px; line-height: 1.4; }
  body.tournament-page .tournament-content #poster-viewer .viewer-toolbar button { min-width: 44px; min-height: 44px; font-size: 14px; }
}

@media (max-width: 700px) {
  body.network-map-view .map-view-toolbar {
    height: auto; min-height: 76px; padding: 12px 16px; gap: 8px 12px; flex-wrap: wrap;
  }
  body.network-map-view .map-view-toolbar :is(a, button) {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; font-size: 14px; line-height: 1.4; white-space: normal;
  }
  body.network-map-view .network-map-viewer { overscroll-behavior-x: contain; }
}