.mobile-logo-bg {
   display: none;
 }

@media (max-width: 640px) {
  .admin-entry {
    display: none !important;
  }

  html {
    min-height: 100%;
    overflow-x: clip !important;
    overflow-y: auto !important;
    background: #020202;
    touch-action: pan-y;
  }

  body {
    min-height: 100svh;
    overflow: visible !important;
    touch-action: pan-y;
    background:
      radial-gradient(circle at 50% 16%, rgba(255,255,255,0.035), transparent 34%),
      linear-gradient(180deg, #020202 0%, #050505 56%, #010101 100%) !important;
  }

  .noise {
    opacity: 0.025;
  }

  .ticker-bg {
    display: none !important;
  }

  .mobile-logo-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 0.58rem;
    width: 100%;
    height: 100lvh;
    min-height: 100svh;
    overflow: hidden;
    padding: 0.32rem 0;
    pointer-events: none;
  }

  .mobile-logo-bg span {
    --mobile-logo-width: 165vw;
    --mobile-logo-gap: 1.15rem;
    display: flex;
    gap: var(--mobile-logo-gap);
    width: max-content;
    min-height: 0;
    opacity: 0.075;
    animation: mobile-logo-drift-left 34s linear infinite;
    will-change: transform;
  }

  .mobile-logo-bg span::before,
  .mobile-logo-bg span::after {
    content: "";
    flex: 0 0 var(--mobile-logo-width);
    width: var(--mobile-logo-width);
    height: 100%;
    background-image: url("./assets/1spot-logo-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .mobile-logo-bg span:nth-child(even) {
    animation-name: mobile-logo-drift-right;
    animation-duration: 39s;
  }

  .mobile-logo-bg span:nth-child(3n) {
    animation-duration: 46s;
  }

  .mobile-logo-bg span:nth-child(n + 7) {
    display: none;
  }

  @keyframes mobile-logo-drift-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-165vw - 1.15rem), 0, 0); }
  }

  @keyframes mobile-logo-drift-right {
    from { transform: translate3d(calc(-165vw - 1.15rem), 0, 0); }
    to { transform: translate3d(0, 0, 0); }
  }

  .page-shell {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column;
    width: min(100%, 560px) !important;
    min-height: 100svh !important;
    margin: 0 auto !important;
    padding: max(2.45rem, calc(env(safe-area-inset-top) + 1.35rem)) clamp(1.15rem, 4.4vw, 1.55rem) max(1.2rem, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .site-header {
    display: contents !important;
  }

  .brand {
    order: 1;
    align-self: center;
    display: block !important;
    width: clamp(7.1rem, 30vw, 8.2rem) !important;
    height: auto !important;
    margin: 0 0 0.95rem !important;
    transform: none !important;
  }

  .brand img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .hero {
    order: 2;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-label {
    order: 1;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 -0.08rem !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--text) !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
  }

  .section-label span {
    display: none !important;
  }

  .section-label::after { display: none !important; }

  .spot-frame {
    order: 2;
    position: relative !important;
    display: grid !important;
    place-items: center;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: rgba(8,8,8,0.82) !important;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.58), 0 26px 60px rgba(0,0,0,0.5) !important;
  }

  .spot-frame .corner {
    display: none !important;
  }

  .spot-surface {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .spot-surface::before {
    border-radius: 7px !important;
  }

  .takeover-top {
    order: 3;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center;
    width: 100% !important;
    min-height: 3.65rem !important;
    margin: 0.56rem 0 0 !important;
    padding: 0.18rem 0.98rem 0 !important;
    overflow: hidden;
    border: 1px solid var(--text) !important;
    border-radius: 8px !important;
    background: var(--text) !important;
    color: #050505 !important;
    font-size: clamp(0.9rem, 4vw, 1.08rem) !important;
    line-height: 1 !important;
    text-align: center;
    transform: none !important;
    animation: mobile-claim-pulse 2.4s ease-in-out infinite;
  }

  .takeover-top::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -70%;
    width: 55%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
    animation: mobile-claim-sheen 3.6s ease-in-out infinite;
  }

  .takeover-top > span:first-child {
    position: relative;
    z-index: 1;
  }

  .takeover-top .button-arrow {
    display: none !important;
  }

  .takeover-top.is-owned,
  .takeover-top:disabled {
    border-color: rgba(248,248,244,0.38) !important;
    background: rgba(8,8,8,0.28) !important;
    color: rgba(248,248,244,0.54) !important;
    box-shadow: none !important;
    animation: none !important;
  }

  .takeover-top.is-owned::after,
  .takeover-top:disabled::after {
    display: none;
  }

  .takeover-top.is-battle:not(:disabled) {
    border-color: rgba(255,54,54,0.64) !important;
    background: rgba(255,54,54,0.06) !important;
    color: var(--red) !important;
  }

  @keyframes mobile-claim-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
    50% { box-shadow: 0 0 26px rgba(255,255,255,0.16); }
  }

  @keyframes mobile-claim-sheen {
    0%, 42% { left: -70%; }
    62%, 100% { left: 120%; }
  }

  .battle-actions {
    order: 4;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.52rem !important;
    width: 100% !important;
    margin: 0.42rem 0 0 !important;
  }

  .battle-actions[hidden] {
    display: none !important;
  }

  .battle-actions button {
    display: grid !important;
    place-items: center;
    min-height: 3.25rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 0.12rem 0.6rem 0 !important;
    line-height: 1 !important;
  }

  .battle-actions button:first-child {
    border-color: rgba(71,229,139,0.68) !important;
    background: rgba(71,229,139,0.12) !important;
    color: var(--success) !important;
  }

  .battle-actions button:last-child {
    border-color: rgba(248,248,244,0.28) !important;
    background: rgba(248,248,244,0.08) !important;
    color: var(--muted) !important;
  }

  .mobile-stats-carousel {
    order: 5;
    display: grid;
    gap: 0.48rem;
    width: 100%;
    margin: 0.48rem 0 0.58rem;
    overflow: hidden;
    touch-action: pan-y;
  }

  .stats-grid {
    order: 0 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: translate3d(calc(var(--mobile-stat-index, 1) * -100%), 0, 0) !important;
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
  }

  .stat-card {
    flex: 0 0 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: 0.34rem !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 5.35rem !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.64rem 0.78rem !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(248,248,244,0.05), rgba(248,248,244,0.015)), var(--panel) !important;
    transform: none !important;
  }

  .stat-card::after {
    display: none !important;
  }

  .stat-card h2,
  .stat-card strong,
  .stat-card p {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    text-align: left !important;
  }

  .stat-card h2 {
    color: var(--muted) !important;
    font-size: clamp(0.62rem, 2.45vw, 0.78rem) !important;
    line-height: 1 !important;
  }

  .stat-card strong {
    color: var(--text) !important;
    font-size: clamp(1.35rem, 6.2vw, 2rem) !important;
    line-height: 0.98 !important;
    white-space: normal !important;
  }

  .stat-card .money,
  .stat-card .number {
    font-family: var(--font-number) !important;
    font-size: clamp(1.55rem, 7.4vw, 2.25rem) !important;
    white-space: nowrap !important;
  }

  .stats-grid .stat-card.is-open strong.money,
  .stats-grid .stat-card.is-open strong.number,
  .stats-grid .stat-card strong.money,
  .stats-grid .stat-card strong.number {
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  .stat-card p {
    display: block !important;
    color: var(--muted) !important;
    font-size: clamp(0.66rem, 2.55vw, 0.82rem) !important;
    line-height: 1.15 !important;
  }

  .mobile-stats-dots {
    order: 1;
    display: flex;
    justify-content: center;
    gap: 0.38rem;
    min-height: 0.7rem;
  }

  .mobile-stats-dots button {
    width: 0.38rem;
    height: 0.38rem;
    border: 0;
    border-radius: 999px;
    background: rgba(248,248,244,0.26);
    padding: 0;
    transition: width 220ms ease, background 220ms ease;
  }

  .mobile-stats-dots button[aria-current="true"] {
    width: 1.05rem;
    background: var(--text);
  }

  .nav-links {
    order: 3;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 2.85rem !important;
    gap: 0.38rem !important;
    width: 100% !important;
    margin: 0.58rem 0 0 !important;
    transform: none !important;
  }

  .nav-links > button {
    display: grid !important;
    place-items: center;
    min-width: 0 !important;
    min-height: 2.85rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: rgba(8,8,8,0.7) !important;
    color: var(--muted) !important;
    padding: 0.12rem 0.4rem 0 !important;
    font-size: clamp(0.58rem, 2.65vw, 0.8rem) !important;
    line-height: 1 !important;
    text-align: center;
    white-space: normal !important;
  }

  .nav-links > button[data-modal="history"] { order: 1; }
  .nav-links > button[data-modal="how"] { order: 2; }
  .nav-links > button[data-modal="about"] { order: 3; }
  .telegram-menu {
    order: 4;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 40 !important;
    display: grid !important;
    width: 2.85rem !important;
    height: 2.85rem !important;
    place-items: center;
  }

  .telegram-link {
    display: grid !important;
    width: 2.85rem !important;
    height: 2.85rem !important;
    place-items: center;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: rgba(8,8,8,0.76) !important;
    padding: 0 !important;
  }

  .telegram-link img {
    width: 48% !important;
    height: 48% !important;
    object-fit: contain;
  }

  .telegram-dropdown {
    display: none !important;
  }

  .telegram-dropdown .is-connect {
    color: var(--success) !important;
  }

  .telegram-dropdown .is-disconnect {
    color: #ff4747 !important;
  }

  .site-footer {
    order: 4;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    align-self: flex-start;
    width: 100% !important;
    margin: 0.92rem 0 0 !important;
    color: var(--text) !important;
    font-size: clamp(0.78rem, 3.35vw, 0.94rem) !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap;
    transform: none !important;
  }

  .modal {
    width: calc(100% - 2rem) !important;
    max-width: 32rem !important;
    max-height: min(84svh, 46rem) !important;
    border-radius: 8px !important;
    padding: 1.1rem !important;
  }

  .takeover-modal {
    max-height: calc(100svh - 1.25rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-padding-bottom: 1rem;
  }

  .takeover-modal .terms-link {
    position: relative !important;
    inset: auto !important;
    margin: 1rem 0 0 !important;
    border: 0 !important;
    text-decoration: none !important;
    width: max-content !important;
    line-height: 1 !important;
  }

  .takeover-modal .terms-link::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -0.16rem !important;
    height: 1px !important;
    background: rgba(248,248,244,0.72) !important;
  }

  .modal-close {
    transform: none !important;
  }

  #modal-how .manifest-copy,
  #modal-about .manifest-copy {
    gap: 0.76rem !important;
    color: var(--muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.38 !important;
    text-transform: none !important;
  }

  #modal-how .manifest-copy p,
  #modal-about .manifest-copy p {
    color: var(--muted) !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

@media (min-width: 641px) {
  .mobile-stats-carousel {
    display: contents;
  }

  .mobile-stats-dots {
    display: none;
  }
}