/* v10: mobile composition approved in the 15 October image preview. */
/* Keep the existing desktop geometry while making the mobile DOM order linear. */
@media (min-width:801px) {
  .first-screen-grid.mobile-approved {
    grid-template-rows:max-content 1fr;
    row-gap:0;
  }
  .mobile-approved>.updates-row {grid-column:1;grid-row:1}
  .mobile-approved>.overview-column {grid-column:1;grid-row:2}
  .mobile-approved>.purchase-terminal {grid-column:2;grid-row:1 / 3}
}

@media (max-width:800px) {
  .site-header .header-row {height:64px;gap:12px}
  .site-header .brand {font-size:18px;gap:8px}
  .site-header .brand b {font-size:22px}
  .site-header .brand img {width:30px;height:39px}
  .site-header .header-actions {gap:12px}
  .site-header .header-cta,.site-header .language-count {display:none}
  .site-header .language-button {min-height:44px;font-size:14px;padding:0 4px}
  .site-header .menu-button {border:0;border-radius:6px;padding:10px}
  .site-header .menu-button::after {
    content:'';display:block;height:2px;margin:5px 0;background:var(--ink);
  }
  .site-header .mobile-nav {max-height:calc(100dvh - 64px);padding:12px 16px}
  .site-header .language-menu {
    position:fixed;top:64px;inset-inline:16px;width:auto;max-width:none;
    max-height:calc(100dvh - 80px);overflow:auto;
  }
  .language-options {max-height:min(360px,calc(100dvh - 170px))}

  .launch-section {padding-top:8px;background:linear-gradient(#fff 75%,#f3f7ff)}
  .launch-section>.wrap {width:calc(100% - 32px);max-width:600px}
  .launch-banner {
    display:flex;flex-direction:column;align-items:center;gap:0;
    min-height:0;padding:12px 16px 10px;border-radius:17px;overflow:hidden;
    background-image:url('/assets/sparta-hero-mobile-v10.webp');
    background-size:100% 100%;background-position:center;
  }
  .launch-banner::before {border-radius:15px;background:linear-gradient(#1038a018,transparent 60%)}
  .launch-banner .banner-copy {display:contents}
  .launch-banner .banner-crown {
    order:0;position:relative;inset:auto;transform:none;
    max-width:100%;margin:0 auto 14px;
  }
  .launch-banner .banner-fire {width:190px;max-width:84%;height:29px;margin-bottom:-2px}
  .launch-banner .banner-badge {
    font-family:var(--sparta-display,SpartaMeme),Arial,sans-serif;font-size:14px;line-height:1.3;
    padding:7px 12px;gap:6px;border-radius:11px;white-space:normal;
  }
  .launch-banner .banner-badge .ui-icon {width:18px;height:18px}
  .launch-banner .banner-copy h1 {
    order:1;width:100%;max-width:430px;margin:0;
    font-family:var(--sparta-display,SpartaMeme),Arial,sans-serif;font-size:clamp(29px,8.6vw,42px);
    font-weight:900;line-height:1.17;letter-spacing:-.05em;text-align:center;
    word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;
  }
  .launch-banner .banner-subtitle {
    order:2;max-width:100%;margin:10px 0 0;
    font-family:var(--sparta-display,SpartaMeme),Arial,sans-serif;font-size:clamp(14px,3.8vw,18px);
    font-weight:900;line-height:1.45;text-align:center;overflow-wrap:anywhere;
  }
  .launch-banner .hero-art {
    order:3;position:relative;inset:auto;width:100%;max-width:420px;
    height:clamp(215px,62vw,280px);margin:7px 0 0;display:block;
    align-self:center;direction:ltr;
  }
  .launch-banner .mascot-stage {
    position:absolute;inset:auto;left:3%;bottom:0;
    width:auto;height:100%;aspect-ratio:3 / 4;max-width:none;
    padding:0;margin:0;align-self:auto;
  }
  .launch-banner .mascot-stage canvas {
    display:block;width:100%;height:100%;max-width:none;
    background-size:contain;filter:drop-shadow(2px 3px 0 #11203b4d);
  }
  .launch-banner .speech {
    left:auto;right:1%;top:16px;bottom:auto;
    width:47%;min-width:0;max-width:180px;padding:9px 10px;
    font-size:clamp(11px,3.1vw,15px);line-height:1.35;
    white-space:normal;overflow-wrap:anywhere;z-index:5;
  }
  .launch-banner .speech::after {width:43px;height:27px;left:-7px;bottom:-17px}
  .launch-banner .banner-status {
    order:4;position:relative;z-index:5;max-width:100%;
    margin:0 auto;min-height:34px;padding:6px 16px;
    font-size:13px;line-height:1.4;justify-content:center;text-align:center;
  }

  .first-screen-grid.mobile-approved {
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;
    gap:16px;margin-top:14px;
  }
  .mobile-approved>.updates-row,
  .mobile-approved>.purchase-terminal,
  .mobile-approved>.overview-column {grid-column:1;grid-row:auto;min-width:0}
  .mobile-approved>.updates-row {min-height:44px;gap:9px;font-size:12px}
  .mobile-approved>.updates-row .updates-label {padding:8px 10px;align-items:center}
  .mobile-approved>.updates-row .updates-title {
    white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;
    overflow-wrap:anywhere;padding-block:6px;
  }
  .mobile-approved>.updates-row>button {
    font-size:0;min-width:32px;min-height:44px;padding:0 9px;
  }
  .mobile-approved>.updates-row>button::after {content:'›';font-size:24px;line-height:1}
  .mobile-approved>.purchase-terminal {width:100%;justify-self:stretch;scroll-margin-top:80px}
  .payment-rail {width:calc(100% - 8px);font-size:12px;padding:9px 12px 11px;gap:8px}
  .payment-rail>span {min-width:0;overflow-wrap:anywhere}
  .coin-icons {gap:4px}
  .coin {width:19px;height:19px;font-size:16px}
  .terminal-shell {padding:18px 16px;border-radius:17px}
  .terminal-topline {font-size:12px;margin-bottom:10px}
  .terminal-shell h2 {
    font-family:var(--sparta-display,SpartaMeme),Arial,sans-serif;font-size:clamp(19px,5.7vw,25px);
    line-height:1.35;margin-bottom:13px;text-wrap:balance;overflow-wrap:anywhere;
  }
  .countdown {padding:11px 10px;margin-bottom:12px}
  .clock-grid>div {font-size:12px}
  .clock-grid b {font-size:30px}
  .countdown p {font-size:12px}
  .raised-block {font-size:13px;padding-bottom:10px;margin-bottom:10px}
  .raised-block strong {font-size:26px}
  .token-price {font-size:15px;margin-bottom:12px}
  .terminal-tabs.tab-list button {font-size:15px;min-height:44px}
  .payment-pane {min-height:62px;padding:10px;gap:10px}
  .payment-pane>.ui-icon {width:25px;height:25px}
  .payment-disclosure {font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
  .terminal-links {gap:10px;margin-top:12px}
  .terminal-bottom,.wallet-help {min-height:48px;font-size:15px;padding:10px 8px;gap:7px}
  .terminal-bottom>span,.wallet-help>span {min-width:0;overflow-wrap:anywhere}
  .wallet-help .ui-icon {width:22px;height:22px}
  .terminal-note {font-size:12px;margin-top:12px}

  .overview-copy {padding:2px 2px 14px}
  .vision-label {font-size:13px;margin-bottom:7px}
  .overview-copy h2,html:not([lang=ko]) .overview-copy h2 {
    font-size:clamp(27px,7.3vw,36px);line-height:1.2;overflow-wrap:anywhere;
  }
  .overview-copy p {font-size:14px;line-height:1.6;margin-top:8px;overflow-wrap:anywhere}
  .overview-copy::after {width:110px;height:140px;top:0;right:1%;opacity:.8}
  .vision-path {grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:20px}
  .vision-step {min-height:90px;padding:12px 15px;align-items:center;background:#fffaf0}
  .vision-step-copy {max-width:calc(100% - 108px)}
  .vision-step strong,html:not([lang=ko]) .vision-step strong {font-size:17px;line-height:1.4}
  .vision-step strong>b {display:inline;font-size:inherit;margin-inline-end:8px;margin-bottom:0}
  .vision-step small,html:not([lang=ko]) .vision-step small {font-size:13px;line-height:1.4;margin-top:5px}
  .vision-illustration,.vision-illustration.participate,.vision-illustration.continue {
    display:block;right:3px;left:auto;bottom:0;width:108px;height:100%;opacity:1;
  }
  .vision-illustration img {inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom}
  .ecosystem-heading {gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .ecosystem-heading h3 {font-size:clamp(18px,4.7vw,24px);line-height:1.3}
  .ecosystem-heading h3::after {display:none}
  .ecosystem-heading>a {font-size:12px;min-height:28px;display:flex;align-items:center}
  .ecosystem-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ecosystem-item {min-height:72px;padding:11px 9px 10px 44px}
  .ecosystem-top,html:not([lang=ko]) .ecosystem-top {font-size:14px;line-height:1.35}
  .ecosystem-top .ui-icon {width:29px;height:29px;padding:5px;left:7px;top:50%;transform:translateY(-50%)}
  .ecosystem-status,html:not([lang=ko]) .ecosystem-status {
    font-size:11px;line-height:1.4;gap:4px;overflow-wrap:anywhere;
  }
  .ecosystem-arrow {display:none}
  #communityBanner {
    grid-template-columns:minmax(0,1fr);padding:17px 12px 79px;
    gap:12px;margin:20px 0 8px;min-height:220px;
  }
  #communityBanner>.community-copy {padding:0;text-align:center}
  #communityBanner .community-copy strong {font-size:16px;line-height:1.45;text-wrap:balance}
  #communityBanner .community-copy p {font-size:12px;line-height:1.5}
  #communityBanner>.community-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #communityBanner .community-actions a {font-size:12px;min-height:44px;padding:8px 6px;gap:4px}
  #communityBanner>.community-art-flag {width:142px;height:95px;left:-16px;bottom:-8px;max-height:none}
  #communityBanner>.community-art-shield {width:129px;height:85px;right:-14px;bottom:-8px;max-height:none}
  #communityBanner>.community-ground {left:10%;right:10%;bottom:0}
  html[dir=rtl] .vision-illustration {right:auto;left:3px}
  html[dir=rtl] .ecosystem-item {padding:11px 44px 10px 9px}
  html[dir=rtl] .ecosystem-top .ui-icon {left:auto;right:7px}
}

@media (max-width:360px) {
  .launch-banner {padding-inline:12px}
  .launch-banner .banner-badge {font-size:12px;padding-inline:10px}
  .launch-banner .speech {font-size:11px;padding:8px 7px}
  .payment-rail {padding-inline:8px;font-size:11px}
  .coin-icons {gap:3px}
  .coin {width:17px;height:17px;font-size:14px}
  .wallet-help {font-size:13px;gap:5px}
  .ecosystem-item {padding-inline-start:37px;padding-inline-end:7px}
  .ecosystem-top .ui-icon {left:5px;width:26px;height:26px;padding:4px}
  .ecosystem-top,html:not([lang=ko]) .ecosystem-top {font-size:13px}
  .vision-step {padding-inline:12px}
  .vision-step-copy {max-width:calc(100% - 95px)}
  .vision-illustration,.vision-illustration.participate,.vision-illustration.continue {width:94px}
  html[dir=rtl] .ecosystem-item {padding-inline-start:37px;padding-inline-end:7px}
  html[dir=rtl] .ecosystem-top .ui-icon {left:auto;right:5px}
}