/* NIGHT2ASIA — INDEX MOBILE OVERRIDE LAYER
   Existing index.css remains untouched in STEP 1. */
@media (max-width: 1040px) {
    /* INDEX mobile-only overrides start here in later steps */
}

/* STEP 32 — INDEX mobile containment guard. */
@media (max-width: 1040px) {
  .index-page,.index-shell,.index-page main,.index-hero,.index-hero-copy,.country-grid,.country-card,.country-card-content,.trust-strip,.trust-item,.index-footer{
    min-width:0;max-width:100%;box-sizing:border-box;
  }
  .index-page img,.index-page picture,.index-page video{max-width:100%;}
  .index-page h1,.index-page h2,.index-page p,.index-page a,.index-page strong,.index-page span{overflow-wrap:anywhere;}
  .city-pills,.category-tiles{min-width:0;max-width:100%;}
}


/* STEP 44 — INDEX six-language/mobile flow final fit. */
@media (max-width: 1040px) {
  .index-page,
  .index-page main,
  .index-shell,
  .index-hero,
  .country-grid,
  .trust-strip {
    width: 100%;
    min-width: 0;
  }

  html[lang="th"] .index-page h1,
  html[lang="vi"] .index-page h1,
  html[lang="ja"] .index-page h1,
  html[lang="zh"] .index-page h1,
  html[lang="th"] .index-page a,
  html[lang="vi"] .index-page a,
  html[lang="ja"] .index-page a,
  html[lang="zh"] .index-page a {
    word-break: normal;
    overflow-wrap: break-word;
  }
}


/* STEP 45 — final INDEX mobile regression guard. */
@media (max-width: 1040px) {
  .index-page { overflow-x: clip; }
  .index-page img, .index-page video, .index-page iframe { max-width: 100%; }
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M2 — HERO COMPRESSION / TYPOGRAPHY
   2026-08-29
   Phone layout only (<=760px). Desktop/tablet remain untouched.
   ========================================================= */
@media (max-width:760px){
  /* Compress the mobile hero so destination cards enter the first viewport sooner. */
  .index-hero{
    height:190px!important;
    min-height:0!important;
    background:#030303!important;
  }
  .index-hero-scenes{
    height:108px!important;
  }
  .index-hero-scenes img{
    filter:brightness(1.16) saturate(1.02) contrast(1.04)!important;
  }
  .index-hero-scenes img:first-child{object-position:46% 58%!important}
  .index-hero-scenes img:last-child{object-position:57% 57%!important}
  .index-hero-scenes:after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.42) 78%,#030303 100%),
      radial-gradient(circle at 50% 42%,rgba(0,0,0,0),rgba(0,0,0,.10) 72%)!important;
  }

  /* Keep the signature centre ornament, but stop it dominating the phone viewport. */
  .index-hero-divider{
    height:104px!important;
    opacity:.90!important;
  }
  .index-hero-divider:after{
    top:50px!important;
    width:30px!important;
    height:30px!important;
    border-color:rgba(216,170,55,.82)!important;
    box-shadow:0 0 0 1px rgba(0,0,0,.44),0 0 12px rgba(216,170,55,.10)!important;
  }
  .index-hero-divider:before{
    top:50px!important;
    font-size:12px!important;
  }

  /* Build the copy as one compact lock-up independent of language length. */
  .index-hero-copy{
    justify-content:flex-end!important;
    padding:0 14px 8px!important;
    background:linear-gradient(180deg,transparent 25%,rgba(3,3,3,.08) 42%,rgba(3,3,3,.86) 59%,#030303 73%)!important;
  }
  .index-hero h1{
    width:auto!important;
    max-width:min(342px,calc(100vw - 28px))!important;
    margin:0 auto!important;
    font-size:clamp(20px,5.8vw,23px)!important;
    line-height:1.075!important;
    letter-spacing:0!important;
    text-wrap:balance!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-shadow:0 3px 14px rgba(0,0,0,.92)!important;
  }
  .intro-copy{
    max-width:min(334px,calc(100vw - 30px))!important;
    margin:6px auto 0!important;
    font-size:10px!important;
    font-weight:560!important;
    line-height:1.32!important;
    color:rgba(246,241,230,.90)!important;
    text-wrap:balance!important;
  }
  .intro-rule-bottom{
    gap:9px!important;
    margin:7px 0 0!important;
  }
  .intro-rule-bottom:before,
  .intro-rule-bottom:after{
    width:34px!important;
    opacity:.78!important;
  }
  .intro-rule-bottom i{
    width:6px!important;
    height:6px!important;
  }

  /* Locale-specific optical sizing: same visual weight, not identical CSS size. */
  html[lang="en"] .index-hero h1{font-size:clamp(19.5px,5.65vw,22.5px)!important;letter-spacing:.002em!important}
  html[lang="ko"] .index-hero h1{font-size:clamp(20px,5.65vw,22.5px)!important;letter-spacing:-.028em!important}
  html[lang="zh"] .index-hero h1{font-size:clamp(21px,5.95vw,24px)!important;letter-spacing:.006em!important}
  html[lang="ja"] .index-hero h1{font-size:clamp(20px,5.7vw,23px)!important;letter-spacing:-.026em!important}
  html[lang="th"] .index-hero h1{font-size:clamp(18.8px,5.25vw,21px)!important;line-height:1.06!important;letter-spacing:-.018em!important}
  html[lang="vi"] .index-hero h1{font-size:clamp(18px,5.05vw,20.5px)!important;line-height:1.06!important;letter-spacing:-.006em!important}
  html[lang="th"] .intro-copy{font-size:9.7px!important}
  html[lang="vi"] .intro-copy{font-size:9.7px!important}
}

@media (max-width:390px){
  .index-hero{height:186px!important}
  .index-hero-scenes{height:105px!important}
  .index-hero-divider{height:101px!important}
  .index-hero-divider:after,
  .index-hero-divider:before{top:48px!important}
  .index-hero-copy{padding-left:12px!important;padding-right:12px!important;padding-bottom:7px!important}
  .index-hero h1{max-width:calc(100vw - 24px)!important}
  .intro-copy{max-width:calc(100vw - 26px)!important}
}

@media (max-width:350px){
  .index-hero{height:182px!important}
  .index-hero-scenes{height:102px!important}
  .index-hero-divider{height:98px!important}
  .index-hero-divider:after,
  .index-hero-divider:before{top:46px!important}
  .index-hero h1{font-size:19px!important}
  html[lang="zh"] .index-hero h1{font-size:20.5px!important}
  html[lang="th"] .index-hero h1{font-size:18px!important}
  html[lang="vi"] .index-hero h1{font-size:17.4px!important}
  .intro-copy{font-size:9.3px!important}
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M3 — COUNTRY CARD HEADER SYSTEM
   2026-08-30
   Phone layout only (<=760px). Desktop/tablet remain untouched.
   ========================================================= */
@media (max-width:760px){
  /* Give each destination a cleaner standalone card frame. */
  .country-grid{
    padding:0 12px 11px!important;
  }
  .country-card{
    margin-bottom:12px!important;
    border-color:rgba(216,170,55,.52)!important;
    border-radius:14px!important;
    box-shadow:
      inset 0 1px 0 rgba(255,224,140,.045),
      0 10px 26px rgba(0,0,0,.28)!important;
  }

  /* Mobile card top: emblem + text behave as one compact identity block. */
  .country-card-content{
    grid-template-columns:94px minmax(0,1fr)!important;
    column-gap:12px!important;
    row-gap:0!important;
    align-items:start!important;
    padding:14px 13px 13px!important;
    text-align:left!important;
  }
  .country-emblem{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    justify-self:center!important;
    width:100%!important;
    height:72px!important;
    max-width:94px!important;
    margin:0!important;
    object-fit:contain!important;
    filter:drop-shadow(0 7px 11px rgba(0,0,0,.62))!important;
  }
  .country-card h2{
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    width:100%!important;
    margin:0 0 4px!important;
    color:#f2d176!important;
    font-size:25px!important;
    font-weight:650!important;
    line-height:1.02!important;
    letter-spacing:0!important;
    text-align:left!important;
    text-wrap:balance!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-shadow:0 3px 12px rgba(0,0,0,.66)!important;
  }
  .country-description{
    grid-column:2!important;
    grid-row:2!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    align-self:start!important;
    overflow:hidden!important;
    width:100%!important;
    max-width:none!important;
    min-height:31px!important;
    max-height:34px!important;
    margin:0!important;
    color:rgba(235,228,216,.88)!important;
    font-size:10.4px!important;
    font-weight:500!important;
    line-height:1.46!important;
    letter-spacing:0!important;
    text-align:left!important;
    transform:none!important;
  }

  /* Move the first utility label away from the identity block. */
  .country-description + .card-label{
    margin-top:11px!important;
  }
  .card-label{
    grid-column:1/-1!important;
  }

  /* Keep the photography present without competing with title/description. */
  .country-card-backdrop{
    opacity:.84!important;
  }
  .country-card-backdrop img{
    filter:brightness(.65) saturate(.82) contrast(1.05)!important;
  }
  .country-th .country-card-backdrop:after{
    background:
      linear-gradient(90deg,rgba(4,4,4,.15) 0%,rgba(4,4,4,.22) 34%,rgba(4,4,4,.58) 100%),
      linear-gradient(180deg,rgba(4,4,4,.06) 0%,rgba(4,4,4,.24) 34%,rgba(5,5,5,.68) 72%,#070707 98%)!important;
  }
  .country-vn .country-card-backdrop:after{
    background:
      linear-gradient(270deg,rgba(4,4,4,.15) 0%,rgba(4,4,4,.22) 34%,rgba(4,4,4,.58) 100%),
      linear-gradient(180deg,rgba(4,4,4,.06) 0%,rgba(4,4,4,.24) 34%,rgba(5,5,5,.68) 72%,#070707 98%)!important;
  }

  /* Optical typography per script. */
  html[lang="en"] .country-card h2{font-size:25px!important;letter-spacing:.004em!important}
  html[lang="ko"] .country-card h2{font-size:24px!important;letter-spacing:-.028em!important}
  html[lang="zh"] .country-card h2{font-size:25.5px!important;letter-spacing:.008em!important;font-weight:700!important}
  html[lang="ja"] .country-card h2{font-size:24px!important;letter-spacing:-.026em!important;font-weight:700!important}
  html[lang="th"] .country-card h2{font-size:24px!important;line-height:1.06!important;letter-spacing:-.018em!important}
  html[lang="vi"] .country-card h2{font-size:23.5px!important;letter-spacing:-.008em!important}

  html[lang="ko"] .country-description,
  html[lang="zh"] .country-description,
  html[lang="ja"] .country-description{font-size:10.2px!important}
  html[lang="th"] .country-description{font-size:10px!important;line-height:1.48!important}
  html[lang="vi"] .country-description{font-size:9.9px!important;line-height:1.48!important}
}

@media (max-width:390px){
  .country-grid{padding-left:10px!important;padding-right:10px!important}
  .country-card-content{
    grid-template-columns:86px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding:13px 11px 12px!important;
  }
  .country-emblem{height:67px!important;max-width:86px!important}
  .country-card h2{font-size:23px!important;margin-bottom:3px!important}
  .country-description{min-height:29px!important;max-height:32px!important;font-size:9.9px!important;line-height:1.43!important}
  html[lang="en"] .country-card h2{font-size:23.5px!important}
  html[lang="ko"] .country-card h2{font-size:22.5px!important}
  html[lang="zh"] .country-card h2{font-size:24px!important}
  html[lang="ja"] .country-card h2{font-size:22.5px!important}
  html[lang="th"] .country-card h2{font-size:22.5px!important}
  html[lang="vi"] .country-card h2{font-size:22px!important}
  html[lang="th"] .country-description,
  html[lang="vi"] .country-description{font-size:9.5px!important}
}

@media (max-width:350px){
  .country-grid{padding-left:8px!important;padding-right:8px!important}
  .country-card-content{
    grid-template-columns:76px minmax(0,1fr)!important;
    column-gap:9px!important;
    padding:12px 9px 11px!important;
  }
  .country-emblem{height:60px!important;max-width:76px!important}
  .country-card h2{font-size:21.5px!important}
  .country-description{font-size:9.25px!important;line-height:1.4!important}
  html[lang="en"] .country-card h2{font-size:22px!important}
  html[lang="ko"] .country-card h2{font-size:21px!important}
  html[lang="zh"] .country-card h2{font-size:22.5px!important}
  html[lang="ja"] .country-card h2{font-size:21px!important}
  html[lang="th"] .country-card h2{font-size:21px!important}
  html[lang="vi"] .country-card h2{font-size:20.5px!important}
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M4 — CITY SELECTOR SYSTEM
   2026-08-30
   Phone layout only (<=760px). Desktop/tablet remain untouched.
   ========================================================= */
@media (max-width:760px){
  /* Separate the city selector from the identity block with a clear label rhythm. */
  .country-description + .card-label{
    margin:12px 0 6px!important;
    color:#e1b94f!important;
    font-size:10.2px!important;
    font-weight:850!important;
    line-height:1.15!important;
    letter-spacing:.055em!important;
    text-align:center!important;
    text-shadow:0 2px 8px rgba(0,0,0,.82)!important;
  }

  /* Use the artwork's real 276:102 ratio instead of vertically cropping it. */
  .city-pills{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:center!important;
    width:min(100%,308px)!important;
    max-width:308px!important;
    gap:9px!important;
    margin:0 auto 7px!important;
  }
  .city-pills a{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    aspect-ratio:276/102!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:10px!important;
    background:#030303!important;
    line-height:0!important;
    box-shadow:0 3px 10px rgba(0,0,0,.28)!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .city-pills .city-icon{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#030303!important;
    transform:none!important;
  }
  .city-pills a:active{
    transform:scale(.985)!important;
  }

  /* Keep the following category label visually distinct from the city selector. */
  .city-pills + .card-label{
    margin:5px 0 5px!important;
  }
}

@media (max-width:390px){
  .country-description + .card-label{
    margin-top:11px!important;
    margin-bottom:5px!important;
    font-size:9.8px!important;
  }
  .city-pills{
    width:min(100%,286px)!important;
    max-width:286px!important;
    gap:8px!important;
    margin-bottom:6px!important;
  }
}

@media (max-width:350px){
  .country-description + .card-label{
    margin-top:10px!important;
    font-size:9.4px!important;
  }
  .city-pills{
    width:min(100%,262px)!important;
    max-width:262px!important;
    gap:7px!important;
  }
  .city-pills a{
    border-radius:9px!important;
  }
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M5R — COMPACT CATEGORY SHOWCASE
   2026-08-30
   Index categories are visual previews; country CTA remains primary.
   Phone layout only (<=760px). Desktop/tablet remain untouched.
   ========================================================= */
@media (max-width:760px){
  /* Keep the category strip visually secondary to city and country entry. */
  .city-pills + .card-label{
    margin:4px 0 4px!important;
    color:rgba(221,180,72,.88)!important;
    font-size:9.4px!important;
    font-weight:800!important;
    line-height:1.1!important;
    letter-spacing:.045em!important;
  }

  /* Six compact preview tiles in one row: showcase, not a primary selector. */
  .category-tiles{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    justify-content:center!important;
    align-items:center!important;
    width:min(100%,318px)!important;
    max-width:318px!important;
    gap:4px!important;
    margin:0 auto!important;
  }
  .category-tiles a{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    aspect-ratio:200/161!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:5px!important;
    background:#020202!important;
    line-height:0!important;
    box-shadow:none!important;
    transform:none!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .category-tiles .category-tile-art{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center!important;
    border:0!important;
    border-radius:inherit!important;
    background:#020202!important;
    box-shadow:none!important;
    filter:saturate(.96) brightness(.98)!important;
    transform:none!important;
  }
  .category-tiles a:hover,
  .category-tiles a:focus,
  .category-tiles a:active{
    transform:none!important;
    box-shadow:none!important;
  }

  /* Pull the primary country CTA closer to the preview strip. */
  .enter-button{
    margin-top:10px!important;
  }
}

@media (max-width:390px){
  .category-tiles{
    width:min(100%,300px)!important;
    max-width:300px!important;
    gap:3px!important;
  }
  .city-pills + .card-label{
    margin-top:4px!important;
    margin-bottom:3px!important;
    font-size:9px!important;
  }
  .enter-button{margin-top:9px!important;}
}

@media (max-width:350px){
  .category-tiles{
    width:min(100%,272px)!important;
    max-width:272px!important;
    gap:3px!important;
  }
  .city-pills + .card-label{
    font-size:8.7px!important;
  }
  .enter-button{margin-top:8px!important;}
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M6 — PRIMARY COUNTRY CTA
   2026-08-30
   Country entry is the main action; category tiles remain secondary.
   Phone layout only (<=760px). Desktop/tablet remain untouched.
   ========================================================= */
@media (max-width:760px){
  .enter-button{
    position:relative!important;
    height:44px!important;
    min-height:44px!important;
    margin-top:9px!important;
    grid-template-columns:minmax(0,1fr) 38px!important;
    overflow:hidden!important;
    border:1px solid #9e6710!important;
    border-radius:9px!important;
    background:linear-gradient(180deg,#f9df86 0%,#e5b53e 55%,#bf7a13 100%)!important;
    color:#161006!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.018em!important;
    text-align:center!important;
    text-shadow:0 1px 0 rgba(255,245,198,.28)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,235,.82),
      0 0 0 2px #211503,
      0 0 0 3px rgba(157,102,16,.82),
      0 7px 14px rgba(0,0,0,.24)!important;
    transform:none!important;
    transition:filter .14s ease,transform .14s ease!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .enter-button b{
    width:38px!important;
    height:100%!important;
    display:grid!important;
    place-items:center!important;
    border-left:1px solid rgba(76,45,3,.24)!important;
    background:rgba(126,76,5,.045)!important;
    font-size:18px!important;
    font-weight:500!important;
    line-height:1!important;
  }
  .enter-button:active{
    transform:scale(.992)!important;
    filter:brightness(.97)!important;
  }
  .enter-button:focus-visible{
    outline:2px solid #f0cf71!important;
    outline-offset:3px!important;
  }

  html[lang="en"] .enter-button{font-size:11.6px!important;letter-spacing:.012em!important}
  html[lang="ko"] .enter-button{font-size:12px!important;letter-spacing:-.012em!important}
  html[lang="zh"] .enter-button{font-size:12.4px!important;font-weight:800!important;letter-spacing:.015em!important}
  html[lang="ja"] .enter-button{font-size:12.1px!important;font-weight:800!important;letter-spacing:-.01em!important}
  html[lang="th"] .enter-button{font-size:12.2px!important;letter-spacing:0!important}
  html[lang="vi"] .enter-button{font-size:11.7px!important;letter-spacing:.004em!important}
}

@media (hover:hover) and (max-width:760px){
  .enter-button:hover{
    filter:brightness(1.04)!important;
    transform:translateY(-1px)!important;
  }
}

@media (max-width:390px){
  .enter-button{
    height:42px!important;
    min-height:42px!important;
    grid-template-columns:minmax(0,1fr) 36px!important;
    margin-top:8px!important;
    font-size:11.5px!important;
  }
  .enter-button b{width:36px!important;font-size:17px!important}
  html[lang="zh"] .enter-button{font-size:12px!important}
  html[lang="th"] .enter-button{font-size:11.8px!important}
}

@media (max-width:350px){
  .enter-button{
    height:40px!important;
    min-height:40px!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    margin-top:8px!important;
    border-radius:8px!important;
    font-size:11px!important;
  }
  .enter-button b{width:34px!important;font-size:16px!important}
  html[lang="vi"] .enter-button{font-size:10.7px!important}
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M7 — COMPACT TRUST / FOOTER
   2026-08-30
   Supporting information stays secondary to country selection.
   Phone layout only (<=760px). Desktop/tablet remain untouched.
   ========================================================= */
@media (max-width:760px){
  /* Two-column trust grid: readable without becoming another large content block. */
  .trust-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:auto!important;
    min-height:0!important;
    height:auto!important;
    margin:3px 12px 8px!important;
    border:1px solid rgba(216,170,55,.31)!important;
    border-radius:10px!important;
    background:#050505!important;
    overflow:hidden!important;
    box-shadow:inset 0 1px 0 rgba(255,224,140,.025)!important;
  }
  .trust-item{
    min-height:43px!important;
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:7px!important;
    padding:7px 9px!important;
    text-align:left!important;
    border:0!important;
    background:transparent!important;
  }
  .trust-item+.trust-item:before{display:none!important;content:none!important}
  .trust-item:nth-child(even){border-left:1px solid rgba(216,170,55,.14)!important}
  .trust-item:nth-child(n+3){border-top:1px solid rgba(216,170,55,.14)!important}
  .trust-item svg{
    width:22px!important;
    height:22px!important;
    justify-self:center!important;
    stroke:rgba(220,178,69,.90)!important;
    stroke-width:1.45!important;
  }
  .trust-item>div{min-width:0!important}
  .trust-item strong{
    display:block!important;
    margin:0!important;
    color:rgba(229,190,85,.93)!important;
    font-size:9.8px!important;
    font-weight:780!important;
    line-height:1.18!important;
    letter-spacing:.005em!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
  .trust-item span{display:none!important}

  /* Footer becomes three quiet rows, centered and compact. */
  .index-footer{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    align-items:center!important;
    gap:4px!important;
    padding:8px 10px 10px!important;
    border-top:1px solid rgba(216,170,55,.07)!important;
    color:rgba(151,145,135,.82)!important;
    font-size:8.1px!important;
    line-height:1.3!important;
    letter-spacing:.035em!important;
  }
  .index-visitor-stats{
    order:1!important;
    width:auto!important;
    max-width:100%!important;
    justify-content:center!important;
    gap:8px!important;
    color:rgba(170,163,152,.84)!important;
    font-size:8.4px!important;
    line-height:1.25!important;
    letter-spacing:.015em!important;
    white-space:nowrap!important;
  }
  .index-visitor-stats span+span:before{
    margin-right:8px!important;
    color:#5f594f!important;
  }
  .index-visitor-stats b{
    color:#d8b557!important;
    font-weight:850!important;
  }
  .index-footer>span{
    order:2!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    text-align:center!important;
    white-space:nowrap!important;
    color:rgba(133,128,119,.82)!important;
  }
  .index-footer nav{
    order:3!important;
    display:flex!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:6px 16px!important;
    margin:0!important;
  }
  .index-footer nav a{
    color:rgba(142,136,126,.80)!important;
    white-space:nowrap!important;
  }
}

@media (max-width:390px){
  .trust-strip{margin-left:10px!important;margin-right:10px!important}
  .trust-item{grid-template-columns:22px minmax(0,1fr)!important;gap:6px!important;padding:6px 7px!important;min-height:41px!important}
  .trust-item svg{width:20px!important;height:20px!important}
  .trust-item strong{font-size:9.25px!important}
  .index-footer{padding:7px 8px 9px!important;font-size:7.8px!important}
  .index-visitor-stats{font-size:8.1px!important;gap:7px!important}
  .index-visitor-stats span+span:before{margin-right:7px!important}
}

@media (max-width:350px){
  .trust-strip{margin-left:8px!important;margin-right:8px!important}
  .trust-item{grid-template-columns:20px minmax(0,1fr)!important;gap:5px!important;padding:6px!important;min-height:40px!important}
  .trust-item svg{width:19px!important;height:19px!important}
  .trust-item strong{font-size:8.75px!important;line-height:1.16!important}
  .index-footer{font-size:7.4px!important;letter-spacing:.02em!important}
  .index-visitor-stats{font-size:7.7px!important;gap:6px!important}
  .index-visitor-stats span+span:before{margin-right:6px!important}
  .index-footer nav{gap:5px 13px!important}
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M8 — FINAL PHONE REGRESSION GUARD
   2026-08-30
   No desktop changes. Final containment and tap-layout safeguards.
   ========================================================= */
@media (max-width:760px){
  .index-page,
  .index-shell,
  .index-page main,
  .index-hero,
  .country-grid,
  .country-card,
  .country-card-content,
  .city-pills,
  .category-tiles,
  .trust-strip,
  .index-footer{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .country-card-content > *,
  .trust-item > *{
    min-width:0!important;
  }
  .country-description{
    overflow:hidden!important;
  }
  .city-pills a,
  .category-tiles a,
  .enter-button{
    touch-action:manipulation!important;
  }
}

/* Tablet edge fix discovered during M8 regression audit. */
@media (min-width:761px) and (max-width:1040px){
  .trust-strip{
    width:auto!important;
    max-width:none!important;
  }
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M9 — COUNTRY CARD COMPRESSION
   2026-08-30
   Root INDEX is a country chooser. Cities/categories are previews,
   not competing primary actions. Phone layout only (<=760px).
   ========================================================= */
@media (max-width:760px){
  .country-grid{
    padding-left:10px!important;
    padding-right:10px!important;
    padding-bottom:8px!important;
  }
  .country-card{
    margin-bottom:9px!important;
    border-radius:12px!important;
  }
  .country-card-content{
    grid-template-columns:78px minmax(0,1fr)!important;
    column-gap:9px!important;
    padding:11px 11px 10px!important;
  }
  .country-emblem{
    height:60px!important;
    max-width:78px!important;
    margin-top:1px!important;
  }
  .country-card h2{
    margin-bottom:2px!important;
    font-size:22px!important;
    line-height:1.02!important;
  }
  .country-description{
    min-height:27px!important;
    max-height:30px!important;
    font-size:9.7px!important;
    line-height:1.38!important;
  }
  html[lang="en"] .country-card h2{font-size:22.5px!important}
  html[lang="ko"] .country-card h2{font-size:21.5px!important}
  html[lang="zh"] .country-card h2{font-size:23px!important}
  html[lang="ja"] .country-card h2{font-size:21.5px!important}
  html[lang="th"] .country-card h2{font-size:21.5px!important}
  html[lang="vi"] .country-card h2{font-size:21px!important}

  /* City artwork is contextual preview. Reduce scale and button-like weight. */
  .country-description + .card-label{
    margin:8px 0 4px!important;
    font-size:9.2px!important;
    letter-spacing:.045em!important;
    color:rgba(221,180,72,.88)!important;
  }
  .city-pills{
    width:min(100%,246px)!important;
    max-width:246px!important;
    gap:7px!important;
    margin-bottom:4px!important;
  }
  .city-pills a{
    border-radius:8px!important;
    box-shadow:none!important;
    opacity:.94!important;
    transform:none!important;
  }
  .city-pills a:hover,
  .city-pills a:focus,
  .city-pills a:active{
    transform:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /* Categories remain a small visual strip. */
  .city-pills + .card-label{
    margin:3px 0 3px!important;
    font-size:8.8px!important;
    color:rgba(215,174,67,.78)!important;
  }
  .category-tiles{
    width:min(100%,286px)!important;
    max-width:286px!important;
    gap:3px!important;
    opacity:.94!important;
  }

  /* Preserve the country-entry CTA as the only strong action. */
  .enter-button{
    height:42px!important;
    min-height:42px!important;
    margin-top:7px!important;
  }
}

@media (max-width:390px){
  .country-grid{padding-left:9px!important;padding-right:9px!important}
  .country-card-content{
    grid-template-columns:72px minmax(0,1fr)!important;
    column-gap:8px!important;
    padding:10px 10px 9px!important;
  }
  .country-emblem{height:55px!important;max-width:72px!important}
  .country-card h2{font-size:21px!important}
  .country-description{min-height:26px!important;max-height:29px!important;font-size:9.35px!important}
  html[lang="en"] .country-card h2{font-size:21.5px!important}
  html[lang="ko"] .country-card h2{font-size:20.5px!important}
  html[lang="zh"] .country-card h2{font-size:22px!important}
  html[lang="ja"] .country-card h2{font-size:20.5px!important}
  html[lang="th"] .country-card h2{font-size:20.5px!important}
  html[lang="vi"] .country-card h2{font-size:20px!important}
  .country-description + .card-label{margin-top:7px!important;font-size:8.9px!important}
  .city-pills{width:min(100%,232px)!important;max-width:232px!important;gap:6px!important}
  .city-pills + .card-label{font-size:8.5px!important}
  .category-tiles{width:min(100%,274px)!important;max-width:274px!important}
  .enter-button{height:41px!important;min-height:41px!important;margin-top:7px!important}
}

@media (max-width:350px){
  .country-grid{padding-left:8px!important;padding-right:8px!important}
  .country-card-content{
    grid-template-columns:66px minmax(0,1fr)!important;
    column-gap:7px!important;
    padding:9px 8px 8px!important;
  }
  .country-emblem{height:50px!important;max-width:66px!important}
  .country-card h2{font-size:19.5px!important}
  .country-description{min-height:25px!important;max-height:28px!important;font-size:9px!important;line-height:1.36!important}
  html[lang="en"] .country-card h2{font-size:20px!important}
  html[lang="zh"] .country-card h2{font-size:20.5px!important}
  html[lang="vi"] .country-card h2{font-size:18.8px!important}
  .country-description + .card-label{margin-top:6px!important;font-size:8.5px!important}
  .city-pills{width:min(100%,214px)!important;max-width:214px!important;gap:6px!important}
  .city-pills + .card-label{font-size:8.2px!important}
  .category-tiles{width:min(100%,252px)!important;max-width:252px!important;gap:2px!important}
  .enter-button{height:40px!important;min-height:40px!important;margin-top:6px!important}
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M10 — DESKTOP-STYLE STACKED COUNTRY CARDS
   2026-08-30
   Preserve the premium desktop card composition on phones by stacking
   Thailand/Vietnam vertically. Country entry remains the only strong CTA.
   Phone layout only (<=760px). PC/tablet untouched.
   ========================================================= */
@media (max-width:760px){
  /* Two desktop-style panels, stacked vertically. */
  .country-grid{
    display:block!important;
    padding:0 10px 9px!important;
    background:#030303!important;
  }
  .country-grid:before,
  .country-grid:after{display:none!important;content:none!important;}

  .country-card{
    min-height:0!important;
    margin:0 0 10px!important;
    overflow:hidden!important;
    border:1px solid rgba(216,170,55,.52)!important;
    border-radius:14px!important;
    background:#060606!important;
    box-shadow:
      inset 0 1px 0 rgba(255,225,145,.045),
      0 10px 26px rgba(0,0,0,.28)!important;
  }
  .country-card:last-child{margin-bottom:0!important;}

  /* Symmetrical presentation: the desktop left/right card becomes one centered poster. */
  .country-card-backdrop{opacity:.92!important;}
  .country-card-backdrop picture{display:block!important;width:100%!important;height:100%!important;}
  .country-card-backdrop img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    filter:brightness(.66) saturate(.84) contrast(1.06)!important;
    transform:scale(1.02)!important;
  }
  .country-th .country-card-backdrop img{object-position:38% 52%!important;}
  .country-vn .country-card-backdrop img{object-position:64% 53%!important;}
  .country-th .country-card-backdrop:after,
  .country-vn .country-card-backdrop:after{
    background:
      linear-gradient(180deg,rgba(4,4,4,.08) 0%,rgba(4,4,4,.20) 26%,rgba(4,4,4,.47) 58%,rgba(5,5,5,.86) 86%,#070707 100%),
      radial-gradient(ellipse at 50% 20%,rgba(0,0,0,.03) 0%,rgba(0,0,0,.12) 46%,rgba(0,0,0,.42) 100%)!important;
  }

  /* Restore the desktop visual order: emblem → country → ornament → description. */
  .country-card-content{
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
    padding:13px 12px 12px!important;
    text-align:center!important;
  }
  .country-emblem{
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    height:70px!important;
    max-width:158px!important;
    margin:0 0 1px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.62))!important;
  }
  .country-card h2{
    width:100%!important;
    margin:0!important;
    color:#f2d176!important;
    font-size:30px!important;
    font-weight:650!important;
    line-height:1.02!important;
    letter-spacing:.005em!important;
    text-align:center!important;
    text-wrap:balance!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-shadow:0 4px 15px rgba(0,0,0,.66)!important;
  }
  .card-ornament{
    display:block!important;
    margin:4px 0 3px!important;
    color:#d8aa37!important;
    font-size:13px!important;
    line-height:1!important;
    opacity:.90!important;
  }
  .country-description{
    display:block!important;
    width:100%!important;
    max-width:310px!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto 5px!important;
    overflow:visible!important;
    color:rgba(236,229,218,.91)!important;
    font-size:10px!important;
    font-weight:500!important;
    line-height:1.38!important;
    letter-spacing:0!important;
    text-align:center!important;
    transform:none!important;
    -webkit-line-clamp:unset!important;
    text-wrap:balance!important;
  }

  /* Supporting previews stay compact beneath the centered identity block. */
  .country-description + .card-label,
  .card-label{
    display:block!important;
    width:100%!important;
    margin:5px 0 4px!important;
    color:rgba(221,180,72,.91)!important;
    font-size:9px!important;
    font-weight:850!important;
    line-height:1.12!important;
    letter-spacing:.055em!important;
    text-align:center!important;
  }
  .city-pills{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
    max-width:none!important;
    gap:7px!important;
    margin:0 0 3px!important;
  }
  .city-pills a{
    flex:0 0 auto!important;
    width:108px!important;
    height:35px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:7px!important;
    background:#020202!important;
    box-shadow:none!important;
    line-height:0!important;
    opacity:.96!important;
    transform:none!important;
  }
  .city-pills .city-icon{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  .city-pills + .card-label{
    margin:4px 0 3px!important;
    color:rgba(215,174,67,.80)!important;
    font-size:8.7px!important;
    letter-spacing:.045em!important;
  }
  .category-tiles{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    align-items:center!important;
    justify-content:center!important;
    width:min(100%,284px)!important;
    max-width:284px!important;
    gap:3px!important;
    margin:0 auto!important;
    opacity:.95!important;
  }
  .category-tiles a{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:200/161!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:5px!important;
    background:#020202!important;
    box-shadow:none!important;
    line-height:0!important;
    transform:none!important;
  }
  .category-tiles .category-tile-art{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border:0!important;
    border-radius:inherit!important;
    background:#020202!important;
    box-shadow:none!important;
  }

  /* One unmistakable action per country card. */
  .enter-button{
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    margin-top:8px!important;
    grid-template-columns:minmax(0,1fr) 37px!important;
    border-radius:8px!important;
    font-size:11.8px!important;
    font-weight:900!important;
    letter-spacing:.016em!important;
  }
  .enter-button b{width:37px!important;font-size:17px!important;}

  /* Optical type tuning by script. */
  html[lang="en"] .country-card h2{font-size:30px!important;letter-spacing:.008em!important;}
  html[lang="ko"] .country-card h2{font-size:28px!important;letter-spacing:-.025em!important;}
  html[lang="zh"] .country-card h2{font-size:30px!important;letter-spacing:.01em!important;}
  html[lang="ja"] .country-card h2{font-size:28px!important;letter-spacing:-.025em!important;}
  html[lang="th"] .country-card h2{font-size:28px!important;letter-spacing:-.012em!important;}
  html[lang="vi"] .country-card h2{font-size:29px!important;letter-spacing:.002em!important;}
  html[lang="th"] .country-description,
  html[lang="vi"] .country-description{font-size:9.7px!important;line-height:1.34!important;}
}

@media (max-width:390px){
  .country-grid{padding-left:9px!important;padding-right:9px!important;}
  .country-card{margin-bottom:9px!important;border-radius:13px!important;}
  .country-card-content{padding:12px 10px 11px!important;}
  .country-emblem{height:66px!important;max-width:148px!important;}
  .country-card h2{font-size:28px!important;}
  html[lang="en"] .country-card h2{font-size:28.5px!important;}
  html[lang="ko"] .country-card h2{font-size:26.5px!important;}
  html[lang="zh"] .country-card h2{font-size:28px!important;}
  html[lang="ja"] .country-card h2{font-size:26.5px!important;}
  html[lang="th"] .country-card h2{font-size:26.5px!important;}
  html[lang="vi"] .country-card h2{font-size:27px!important;}
  .country-description{max-width:296px!important;font-size:9.55px!important;}
  .city-pills a{width:103px!important;height:33px!important;}
  .category-tiles{width:min(100%,274px)!important;max-width:274px!important;}
  .enter-button{height:41px!important;min-height:41px!important;grid-template-columns:minmax(0,1fr) 36px!important;}
  .enter-button b{width:36px!important;}
}

@media (max-width:350px){
  .country-grid{padding-left:8px!important;padding-right:8px!important;}
  .country-card-content{padding:11px 8px 10px!important;}
  .country-emblem{height:60px!important;max-width:136px!important;}
  .country-card h2{font-size:25.5px!important;}
  html[lang="en"] .country-card h2{font-size:26px!important;}
  html[lang="ko"] .country-card h2{font-size:24.5px!important;}
  html[lang="zh"] .country-card h2{font-size:26px!important;}
  html[lang="ja"] .country-card h2{font-size:24.5px!important;}
  html[lang="th"] .country-card h2{font-size:24.5px!important;}
  html[lang="vi"] .country-card h2{font-size:25px!important;}
  .country-description{max-width:270px!important;font-size:9.1px!important;}
  .card-label{font-size:8.5px!important;}
  .city-pills{gap:6px!important;}
  .city-pills a{width:96px!important;height:31px!important;}
  .category-tiles{width:min(100%,252px)!important;max-width:252px!important;gap:2px!important;}
  .enter-button{height:40px!important;min-height:40px!important;grid-template-columns:minmax(0,1fr) 34px!important;}
  .enter-button b{width:34px!important;}
}