@media (max-width: 980px) {
  .board {
    --boardSize: min(92vmin, 520px);
  }
}

@media (max-width: 420px) {
  .app {
    max-width: 100%;
  }

  :root {
    --appPad: 12px;
  }

  .brand {
    min-width: 0;
  }

  .brandLogo {
    width: 32px;
    height: 32px;
    gap: 2px;
  }

  .layout {
    gap: 12px;
    margin-top: 12px;
  }

  .topbar {
    padding: 6px 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .stats {
    justify-content: space-between;
    gap: 8px;
  }

  .btn {
    width: 100%;
    padding: 10px 12px;
  }

  .stat {
    min-width: 0;
    padding: 8px 10px;
  }

  .statValue {
    font-size: 20px;
  }

  .stats .stat:nth-child(1) .statValue {
    font-size: var(--scoreSize);
  }

  .board {
    gap: 4px;
    padding: 10px;
  }

  .trayHeader {
    padding: 12px;
  }

  .tray {
    padding: 12px;
    gap: 8px;
  }

  .slot {
    min-height: var(--slotMinH);
  }

  .piece {
    gap: 0px;
    padding: 0;
  }

  .pieceBlock {
    width: var(--trayBlockPx);
    height: var(--trayBlockPx);
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn {
    transition: background 120ms ease, border-color 120ms ease;
  }

  .btn:hover {
    transform: none;
    background: rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 360px) {
  .board {
    --boardSize: min(94vmin, 480px);
  }

  .slot {
    min-height: var(--slotMinH);
  }

  .pieceBlock {
    width: var(--trayBlockPx);
    height: var(--trayBlockPx);
  }

  .noSpaceBtn {
    bottom: 90px;
    min-height: 60px;
    padding: 36px 14px;
    font-size: 28px;
  }
}

@media (max-height: 640px) {
  .noSpaceBtn {
    bottom: 60px;
    min-height: 56px;
    padding: 28px 14px;
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .menuBtn.withIcon {
    width: min(520px, 100%);
  }
}

@media (hover: none) and (pointer: coarse) {
  .menuScreen {
    --menuPad: 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .menuLogoBlocks {
    --logoPx: 10px;
  }

  .menuBtn.withIcon {
    width: min(320px, 100%);
  }

  .menuButtons {
    width: min(320px, 100%);
  }
}

@media (pointer: coarse) {
  .menuScreen::before {
    filter: none;
  }

  .menuLogoBlocks {
    filter: none;
  }

  .menuLogoBlocksLine .menuLogoBlock.on {
    animation: none;
  }

  .gameMenuBackdrop,
  .gameMenuCard,
  .menuTopProfile,
  .menuBtn.more,
  .menuFooter,
  .skinPanel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .menuBtn.withIcon::after {
    filter: none;
  }

  .gameMenuBackdrop:not(.hidden) .gameMenuCard {
    animation: none;
  }

  .gameMenuBackdrop:not(.hidden) .gameMenuBodyButtons > * {
    animation: none;
  }

  .dragPiece {
    filter: none;
  }

  .cell.linePreview {
    box-shadow: none;
    outline: 2px solid var(--linePreviewRing, rgba(255, 255, 255, 0.18));
    animation: linePreviewPulse 700ms ease-in-out infinite;
  }

  @keyframes linePreviewPulse {
    0%, 100% { outline-width: 2px; }
    50% { outline-width: 3px; outline-color: rgba(255, 255, 255, 0.45); }
  }

  .cell.ghostPiece,
  .cell.ghostPieceBad {
    filter: none;
  }

  .cell.flash,
  .cell.place-pop,
  .cell.clear-flash,
  .scorePop {
    animation: none !important;
  }
  
  .cell.line-clear {
    overflow: visible !important;
    z-index: 10 !important;
    animation: clearLine calc(180ms / var(--time-scale)) ease-out 1 forwards !important;
    transform-origin: center;
  }
  .cell.line-clear.row {
    overflow: visible !important;
    z-index: 10 !important;
    animation: clearRow calc(180ms / var(--time-scale)) ease-out 1 forwards !important;
  }
  .cell.line-clear.col {
    overflow: visible !important;
    z-index: 10 !important;
    animation: clearCol calc(180ms / var(--time-scale)) ease-out 1 forwards !important;
  }

  #fx,
  #column-clear-beam,
  #row-clear-beam,
  .column-clear-beam,
  .row-clear-beam {
    display: none;
  }

  #legalOverlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}