/* Mobile material system. Layout and business behavior on desktop stay shared. */
.mobile-service-icon { display: none; }
@media (max-width: 600px) {
  html { scrollbar-gutter: auto; }
  body {
    --glass-bg: rgba(26, 39, 57, .76);
    --glass-nav-bg: rgba(19, 30, 45, .56);
    --glass-solid: #192639;
    --glass-edge: rgba(209, 225, 245, .22);
    --glass-highlight: rgba(255, 255, 255, .17);
    --glass-selected: rgba(211, 227, 247, .12);
    --glass-content: #131f30;
    --glass-content-soft: #182638;
    --glass-shadow: 0 10px 30px rgba(0, 7, 19, .24), inset 0 1px 0 var(--glass-highlight);
    --glass-nav-offset: calc(12px + env(safe-area-inset-bottom, 0px));
    --glass-nav-space: calc(var(--mobile-nav-height, 72px) + var(--glass-nav-offset));
    --glass-duration: 240ms;
    --text-muted: #98a9bf;
    --text-secondary: #bdc9da;
    background-color: var(--bg);
    padding-bottom: calc(var(--glass-nav-space) + 18px);
  }

  body.theme-light {
    --glass-bg: rgba(250, 253, 255, .79);
    --glass-nav-bg: rgba(255, 255, 255, .50);
    --glass-solid: #f6f9fe;
    --glass-edge: rgba(255, 255, 255, .94);
    --glass-highlight: rgba(255, 255, 255, .96);
    --glass-selected: rgba(40, 89, 207, .09);
    --glass-content: #fff;
    --glass-content-soft: #f1f5fb;
    --glass-shadow: 0 10px 28px rgba(32, 57, 89, .11), inset 0 1px 0 var(--glass-highlight);
    --text-muted: #5f7088;
    --text-secondary: #4f6078;
  }

  body .top-bar, body .wotb-topbar, body.payment-page > header {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-edge);
    box-shadow: 0 4px 20px var(--header-shadow-color), inset 0 -1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }

  body .top-bar :is(.login-btn, .register-btn, .user-menu-btn, .theme-toggle-btn, .order-notification-bell),
  body .wotb-home {
    border-radius: 999px;
    background: var(--glass-selected);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
  }
  body .top-bar .register-btn { background: transparent; border-color: transparent; }
  body .top-bar .logo-text { font-weight: 750; }

  body .mobile-nav {
    --glass-tab: 0;
    left: 12px;
    right: 12px;
    bottom: var(--glass-nav-offset);
    min-height: 70px;
    padding: 6px;
    gap: 0;
    border: 1px solid var(--glass-edge);
    border-radius: 28px;
    background: var(--glass-nav-bg);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
    isolation: isolate;
  }
  body .mobile-nav-btn {
    position: relative;
    z-index: 1;
    min-height: 56px;
    padding: 5px 2px;
    gap: 3px;
    border-radius: 22px;
    color: var(--text-muted);
    transition: color var(--glass-duration), transform 180ms ease;
  }
  body .mobile-nav-btn span { display: grid; place-items: center; height: 24px; }
  body .mobile-nav-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body .mobile-nav-btn small { font-size: 11px; font-weight: 650; line-height: 1.3; }
  body .mobile-nav-btn.active { background: var(--glass-selected); color: var(--accent); }
  body .mobile-nav-btn:hover { background: transparent; color: var(--text); }
  body .mobile-nav-btn.active:hover { color: var(--accent); }
  body .mobile-nav-btn:focus-visible { outline-offset: -3px; }

  /* A single sliding capsule follows the actual active navigation item. */
  @supports selector(:has(*)) {
    body .mobile-nav::before {
      content: '';
      position: absolute;
      left: 6px;
      top: 6px;
      bottom: 6px;
      width: calc((100% - 12px) / 5);
      border: 1px solid var(--glass-highlight);
      border-radius: 22px;
      background: linear-gradient(145deg, var(--glass-selected), transparent), var(--glass-selected);
      box-shadow: inset 0 1px 1px var(--glass-highlight), 0 2px 6px rgba(0, 0, 0, .04);
      transform: translateX(calc(var(--glass-tab) * 100%));
      transition: transform var(--glass-duration) cubic-bezier(.22, .7, .25, 1), opacity 180ms;
      pointer-events: none;
      opacity: 0;
    }
    body .mobile-nav:has(.active)::before { opacity: 1; }
    body .mobile-nav:has(.mobile-nav-btn:nth-child(2).active) { --glass-tab: 1; }
    body .mobile-nav:has(.mobile-nav-btn:nth-child(3).active) { --glass-tab: 2; }
    body .mobile-nav:has(.mobile-nav-btn:nth-child(4).active) { --glass-tab: 3; }
    body .mobile-nav:has(.mobile-nav-btn:nth-child(5).active) { --glass-tab: 4; }
    body .mobile-nav-btn.active { background: transparent; }
  }

  body .boost-checkout-bar {
    left: 12px;
    right: 12px;
    bottom: calc(var(--glass-nav-space) + 10px);
    padding: 12px 14px;
    border: 1px solid var(--glass-edge);
    border-radius: 23px;
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
  }
  body[data-current-section=boost] .boost-checkout-bar { bottom: calc(var(--glass-nav-space) + 10px); }
  body .boost-checkout-bar .submit-order-btn { border-radius: 15px; min-height: 46px; }
  body .boost-bar-price strong { font-size: 1.2rem; }

  body .support-launch {
    right: 16px;
    bottom: calc(var(--glass-nav-space) + 12px);
    min-height: 44px;
    padding: 10px 15px;
    color: var(--text);
    background: var(--glass-bg);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
  body[data-current-section=boost] .support-launch {
    bottom: calc(var(--glass-nav-space) + 10px + var(--boost-checkout-height, 80px) + 12px);
  }
  body[data-current-section=boost] #sectionBoost {
    padding-bottom: calc(var(--glass-nav-space) + var(--boost-checkout-height, 80px) + var(--support-launch-height, 44px) + 56px);
  }
  body[data-current-section=thirdparty] #sectionThirdParty {
    padding-bottom: calc(var(--glass-nav-space) + var(--support-launch-height, 44px) + 36px);
  }
  body .toast-message { bottom: calc(var(--glass-nav-space) + 16px); }
  body[data-current-section=boost] .toast-message {
    bottom: calc(var(--glass-nav-space) + var(--boost-checkout-height, 80px) + var(--support-launch-height, 44px) + 44px);
  }

  body .user-dropdown, body .panel-more-menu {
    background: var(--glass-bg);
    border-color: var(--glass-edge);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
  }

  /* Dialogs cover navigation and the floating launcher, with readable bodies. */
  body .modal-overlay {
    z-index: 2000;
    align-items: flex-end;
    padding: max(12px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
    background: rgba(3, 10, 21, .58);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  body #orderCenterModal { z-index: 2000; }
  body .modal-card, body .oc-modal-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0 auto;
    padding-top: 28px;
    border: 1px solid var(--glass-edge);
    border-radius: 28px;
    background: var(--glass-content);
    box-shadow: var(--glass-shadow);
    animation: glass-sheet-in var(--glass-duration) cubic-bezier(.22, .7, .25, 1);
  }
  body .modal-card:not(.oc-modal-card):not(.order-notification-modal) {
    max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  body .modal-card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: calc(50% - 18px);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--text-muted);
    opacity: .45;
    pointer-events: none;
  }
  body .modal-header h3 { font-size: 1.05rem; }
  body .oc-modal-header, body .order-notification-modal header {
    background: var(--glass-content-soft);
    border-color: var(--border);
  }
  body .oc-modal-footer { background: var(--glass-content-soft); }
  body .modal-close { border-radius: 50%; background: var(--glass-selected); }
  body .support-overlay { padding: max(12px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  body .support-shell {
    border: 1px solid var(--glass-edge);
    border-radius: 28px;
    height: min(800px, calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    background: var(--glass-content);
    box-shadow: var(--glass-shadow);
  }
  body .support-header, body .support-compose { background: var(--glass-content-soft); }
  body .pwa-install-guide, body .boost-activities-dialog {
    margin: auto auto max(8px, env(safe-area-inset-bottom, 0px));
    width: calc(100% - 16px);
    max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--glass-edge);
    border-radius: 28px;
    background: var(--glass-content);
    box-shadow: var(--glass-shadow);
  }
  body .pwa-install-guide header, body .boost-activities-header { background: var(--glass-content-soft); }
  body .pwa-install-guide::backdrop, body .boost-activities-dialog::backdrop { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

  body :is(.mobile-nav-btn, .hero-primary, .hero-secondary, .support-launch, .submit-order-btn, .service-card, .quick-card):active:not(:disabled) {
    transform: scale(.975);
  }

  /* Content surfaces keep stable contrast; only the controls above use live blur. */
  body:not(.theme-light) {
    background-image:
      radial-gradient(ellipse at 100% 0, rgba(84, 155, 190, .15), transparent 55%),
      radial-gradient(ellipse at 0 45%, rgba(221, 154, 88, .08), transparent 50%),
      linear-gradient(rgba(7, 14, 25, .9), rgba(7, 14, 25, .96)),
      url('bg.webp');
    background-attachment: scroll;
  }
  body.theme-light {
    background-image:
      radial-gradient(ellipse at 100% 0, rgba(155, 194, 243, .2), transparent 60%),
      radial-gradient(ellipse at 0 50%, rgba(215, 186, 145, .1), transparent 55%);
  }
  body .main-menu { padding: 20px 16px 24px; gap: 28px; background: none; }
  body .home-hero, body.theme-light .home-hero {
    padding: 26px 22px 18px;
    border: 1px solid var(--glass-edge);
    border-radius: 28px;
    gap: 18px;
    background:
      linear-gradient(135deg, var(--glass-selected), transparent 65%),
      linear-gradient(150deg, var(--glass-content-soft), var(--glass-content));
    box-shadow: 0 10px 30px var(--header-shadow-color), inset 0 1px 0 var(--glass-highlight);
  }
  body .home-hero::before, body .home-hero::after { display: none; }
  body .hero-eyebrow { font-size: 10px; letter-spacing: .025em; margin-bottom: 12px; }
  body .hero-eyebrow::before { border-radius: 50%; box-shadow: none; }
  body .hero-copy h1 { font-size: clamp(1.65rem, 7.3vw, 2.1rem); line-height: 1.3; letter-spacing: -.035em; }
  body .hero-copy > p { font-size: 13px; line-height: 1.8; margin-top: 14px; color: var(--text-secondary); }
  body .hero-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
  body .main-menu .hero-actions .menu-card { flex: none; width: 100%; min-height: 48px; border-radius: 16px; font-size: 14px; }
  body .main-menu .hero-actions .hero-secondary { min-height: 44px; background: transparent; border-color: transparent; color: var(--text-secondary); }
  body .hero-trust { gap: 12px; margin-top: 10px; font-size: 11px; }
  body .hero-trust span::before { box-shadow: none; }
  body .hero-panel {
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--glass-edge);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body .hero-panel-label { display: none; }
  body .hero-panel ol { margin: 0; gap: 6px; }
  body .hero-panel li { display: flex; align-items: center; gap: 5px; }
  body .hero-panel li > span { width: auto; height: auto; min-width: 0; font-size: 10px; border: 0; background: none; box-shadow: none; }
  body .hero-panel li strong { font-size: 11px; font-weight: 550; color: var(--text-secondary); }
  body .hero-panel li small { display: none; }
  body .home-section-heading { margin-bottom: 14px; }
  body .home-section-heading h2 { font-size: 1.15rem; }
  body .home-section-heading > div > span { font-size: 11px; }

  body .main-menu .service-card, body .main-menu .quick-card {
    border: 1px solid var(--glass-edge);
    border-radius: 22px;
    background: var(--glass-content);
    box-shadow: 0 4px 16px var(--header-shadow-color), inset 0 1px 0 var(--glass-highlight);
    transition: transform 180ms ease, border-color 180ms ease;
  }
  body .main-menu .service-card::before, body .main-menu .service-card::after,
  body .main-menu .quick-card::before, body .main-menu .quick-card::after { display: none; }
  body .main-menu .service-card { padding: 18px; min-height: 112px; }
  body .main-menu .service-card-primary { border-color: var(--accent-border); background: linear-gradient(140deg, var(--accent-soft), var(--glass-content) 75%); }
  body .main-menu .service-card:hover, body .main-menu .quick-card:hover { background: var(--glass-content); box-shadow: inset 0 1px 0 var(--glass-highlight); }
  body .service-card .menu-icon { width: 46px; height: 46px; border-radius: 15px; background: var(--glass-content-soft); border-color: var(--border); box-shadow: none; }
  body .quick-grid { gap: 12px; }
  body .main-menu .quick-card { padding: 16px; min-height: 122px; }
  body .quick-card .menu-icon { color: var(--accent); }
  body .menu-icon .menu-glyph { display: none; }
  body .mobile-service-icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  body .main-menu .service-copy small, body .main-menu .quick-card small { color: var(--text-muted); line-height: 1.65; }
  body .pwa-install-area { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; margin-top: 16px; padding: 12px; background: var(--glass-content-soft); border-color: var(--border); border-radius: 18px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body .pwa-install-icon { width: 32px; height: 32px; border-radius: 10px; }
  body .pwa-install-copy strong { font-size: 12px; }
  body .pwa-install-copy > span { font-size: 11px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body .pwa-install-actions button { min-height: 40px; font-size: 12px; border-radius: 12px; }

  body .section-top {
    background: var(--glass-content);
    border-color: var(--glass-edge);
    padding: 14px 16px;
  }
  body :is(.card, .rental-account-card, .oc-card, .tp-order-card, .news-item, .content-item-card),
  body .community-page :is(.card, .rental-account-card) {
    border-radius: 22px;
    background: var(--glass-content);
    border-color: var(--border);
    box-shadow: 0 5px 18px var(--header-shadow-color), inset 0 1px 0 var(--glass-highlight);
  }
  body .card { padding: 20px 16px; }
  body .card-header { border-color: var(--border); }
  body :is(.card-inner, .detail-inner, .player-inner) { border-radius: 15px; background: var(--glass-content-soft); box-shadow: none; }
  body .boost-progress { background: var(--glass-content); border: 1px solid var(--border); border-radius: 18px; }
  body .boost-progress b { border-radius: 50%; }
  body .boost-progress span { min-height: 44px; }
  body .rental-filter-panel { background: var(--glass-content); border-radius: 20px; }
  body :is(.rental-filters, .tp-toolbar, .oc-filters, .calc-result) { border-radius: 18px; }
  body :is(.rental-filters input, .rental-filters select, .form-group input, .form-group select, .remark-input, .calc-field input) { border-radius: 12px; }

  body #sectionProfile .profile-dashboard .card { border-radius: 24px; padding: 22px; }
  body #sectionProfile .profile-points-card { background: linear-gradient(135deg, var(--accent-soft), var(--glass-content) 70%); border-color: var(--accent-border); }
  body .profile-avatar { border-radius: 18px; background: var(--glass-content-soft); }
  body .profile-balance { margin: 22px 0; }
  body .profile-balance strong { font-size: 2.4rem; }
  body .profile-badges span { border-radius: 999px; }
  body .profile-settings { border-radius: 999px; }
  body .profile-overview-grid, body .profile-details-grid { gap: 14px; }

  body.wotb-page, body.payment-page { --glass-nav-space: 0px; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  body .wotb-topbar { height: auto; min-height: calc(60px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
  body .wotb-nav { top: calc(60px + env(safe-area-inset-top, 0px)); background: var(--glass-content); border-color: var(--border); }
  body .wotb-nav > div { gap: 4px; padding: 8px 12px; }
  body .wotb-nav a { border-radius: 999px; padding: 8px 13px; min-height: 44px; display: inline-flex; align-items: center; }
  body .wotb-nav a.active { background: var(--accent-soft); }
  body .wotb-hero { padding: 30px 0 24px; }
  body :is(.wotb-search-form, .wotb-stat, .wotb-chart-panel, .wotb-radar, .wotb-result, .wotb-filters, .wotb-tank, .wotb-hall-card, .wotb-cn-panel, .wotb-benchmark) {
    background: var(--glass-content);
    border-color: var(--border);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
  }
  body .wotb-stat.primary { background: var(--accent-soft); border-color: var(--accent-border); }
  body .wotb-period-tabs button { min-height: 44px; border-radius: 999px; }
  body.wotb-page :is(input, select) { font-size: 16px; border-radius: 12px; }
  body.payment-page > header { min-height: calc(64px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
  body.payment-page section, body.payment-page .plan { background: var(--glass-content); border-radius: 22px; box-shadow: inset 0 1px 0 var(--glass-highlight); }
  body.payment-page button { border-radius: 14px; }

  @keyframes glass-sheet-in {
    from { opacity: .4; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Preserve the material silhouette when backdrop filtering is unavailable. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body :is(.top-bar, .wotb-topbar, .mobile-nav, .boost-checkout-bar, .support-launch, .user-dropdown, .panel-more-menu),
    body.payment-page > header { background: var(--glass-solid); }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body :is(.top-bar, .wotb-topbar, .mobile-nav, .boost-checkout-bar, .support-launch, .user-dropdown, .panel-more-menu),
    body.payment-page > header {
      background: var(--glass-solid);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border-color: var(--text-muted);
    }
    body .modal-overlay, body .pwa-install-guide::backdrop, body .boost-activities-dialog::backdrop {
      background: rgba(3, 10, 21, .82);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body .mobile-nav::before, body .mobile-nav-btn { transition: none; }
    body .modal-card { animation: none; }
    body :is(.mobile-nav-btn, .hero-primary, .hero-secondary, .support-launch, .submit-order-btn, .service-card, .quick-card):active { transform: none; }
  }
}