.mobile-site-header { display: none; }
.mobile-nav-dialog:not([open]) { display: none; }
.qr-card { animation: none; }

@media (max-width: 900px) {
  :root { --header-h: 0px; }
  .site-header { display: none !important; }
  .mobile-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 62px;
    padding-inline: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #e6eaf2;
    box-shadow: 0 4px 16px rgba(15, 27, 45, .06);
  }
  .mobile-site-header img { width: auto; height: 38px; }
  .mobile-nav-toggle, .mobile-nav-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #d4dbe8;
    border-radius: 12px;
    background: #fff;
    color: #0f1b2d;
    font: inherit;
    cursor: pointer;
  }
  .mobile-nav-toggle svg { width: 24px; height: 24px; }
  .mobile-nav-dialog {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    box-sizing: border-box;
    width: min(calc(100vw - 28px), 380px);
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #0f1b2d;
    box-shadow: 8px 0 28px rgba(8, 14, 26, .12);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-start-end-radius: 24px;
    border-end-end-radius: 24px;
  }
  .mobile-nav-dialog::backdrop { background: rgba(8, 14, 26, .4); backdrop-filter: blur(3px); }
  .mobile-nav-dialog[open] { animation: mobile-menu-enter .22s ease-out; }
  [dir="rtl"] .mobile-nav-dialog { --menu-offset: 20px; }
  @keyframes mobile-menu-enter { from { opacity: 0; transform: translateX(var(--menu-offset, -20px)); } to { opacity: 1; transform: none; } }
  body:has(.mobile-nav-dialog[open]) { overflow: hidden; }
  .mobile-nav-panel { min-height: 100%; display: flex; flex-direction: column; gap: 24px; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; }
  .mobile-nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .mobile-nav-top img { width: auto; height: 36px; }
  .mobile-nav-close { flex-shrink: 0; border: 0; border-radius: 50%; background: #f3f5f9; font-size: 26px; line-height: 1; }
  .mobile-nav-label { display: block; margin: 0 0 10px; color: #69768c; font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1.5; }
  [dir="rtl"] .mobile-nav-label { letter-spacing: 0; }
  .mobile-nav-links { display: grid; gap: 6px; }
  .mobile-nav-links > .mobile-nav-label { margin-bottom: 2px; padding-inline: 12px; }
  .mobile-nav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    gap: 14px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    color: #344159;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, color .18s;
  }
  .mobile-nav-link svg { width: 20px; height: 20px; flex-shrink: 0; color: #79869a; }
  .mobile-nav-link .mobile-nav-arrow { margin-inline-start: auto; width: 16px; height: 16px; color: #a0aaba; }
  [dir="rtl"] .mobile-nav-arrow { transform: rotate(180deg); }
  .mobile-nav-link:hover { background: #f5f7fb; }
  .mobile-nav-link[aria-current="page"] { color: #2c63e9; background: #eef2fb; }
  .mobile-nav-link[aria-current="page"] :is(svg, .mobile-nav-arrow) { color: inherit; }
  .mobile-nav-bottom { margin-top: auto; display: grid; gap: 20px; padding-top: 20px; border-top: 1px solid #edf0f5; }
  .mobile-nav-language { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f3f5f9; }
  .mobile-nav-language a {
    flex: 1;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    color: #56627a;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
  }
  .mobile-nav-language a[aria-current="true"] { color: #2c63e9; background: #fff; box-shadow: 0 1px 4px rgba(15, 27, 45, .06); }
  .mobile-nav-actions { display: grid; gap: 10px; }
  .mobile-nav-actions a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e6eaf2;
    border-radius: 12px;
    color: #344159;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background .18s;
  }
  .mobile-nav-actions a:first-child { color: #fff; background: #2c63e9; border-color: #2c63e9; }
  .mobile-nav-actions a:first-child:hover { background: #1d4ed8; }
  .mobile-nav-actions a:last-child:hover { background: #f3f5f9; }
  .mobile-nav-actions svg { width: 18px; height: 18px; }
  .mobile-nav-dialog :is(a, button):focus-visible { outline: 2px solid #2c63e9; outline-offset: 3px; }
  @media (max-height: 700px) {
    .mobile-nav-panel { gap: 12px; padding-block: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom)); }
    .mobile-nav-links { gap: 2px; }
    .mobile-nav-link { min-height: 46px; }
    .mobile-nav-label { margin-bottom: 6px; }
    .mobile-nav-bottom { gap: 14px; padding-top: 14px; }
    .mobile-nav-actions { gap: 8px; }
    .mobile-nav-actions a { min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) { .mobile-nav-dialog[open], .mobile-nav-dialog * { animation: none; transition: none; } }
  .page-hero { padding-top: 26px; }
  .hero-inner { padding-top: 18px; }
  .game-grid, .gc-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-grid > *, .gc-page > * { min-width: 0; }
  .game-art > img, .gcover img { width: 100%; height: 100%; object-fit: cover; }
  .game-tag, .game-hot { font-size: 10px; padding: 4px 6px; }
  .legal-txt, .faq, main p, main h1, main h2, main h3 { overflow-wrap: anywhere; }
  .foot-main .foot-col h4 { color: #fff; }
  .foot-main .foot-col a, .foot-main .foot-brand p, .foot-main .socials a { color: #8a92a2; }
  .fab-zone { bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  [data-reveal] { opacity: 1; transform: none; }
  .hero-grid { gap: 28px; }
  .hero-copy { order: 0; }
  .hero-visual { order: 1; }
  .qr-card img { height: auto; aspect-ratio: 1; }
  .promo-card .btn, .bonus-cta .btn { min-height: 44px; }
}

@media (max-width: 359px) {
  .game-grid, .gc-page { grid-template-columns: minmax(0, 1fr); }
  .dl-buttons { flex-direction: column; }
  .dl-buttons .btn-dark { width: 100%; min-height: 50px; }
}