/* === AniGames mobile-only hardening pass === */
    @media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      body {
        min-width: 0;
        overscroll-behavior-x: none;
      }

      main {
        width: 100%;
        max-width: 100%;
        padding: 0.9rem max(0.72rem, env(safe-area-inset-left)) calc(5rem + env(safe-area-inset-bottom)) max(0.72rem, env(safe-area-inset-right));
        gap: 0.9rem;
        overflow-x: hidden;
      }

      header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.58rem;
        padding: 0.85rem max(0.72rem, env(safe-area-inset-right)) 0.85rem max(0.72rem, env(safe-area-inset-left));
      }

      .logo {
        min-width: 0;
        font-size: clamp(0.68rem, 4vw, 0.86rem);
        line-height: 1.45;
        white-space: nowrap;
      }

      nav {
        order: 3;
        grid-column: 1 / -1;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        justify-content: stretch;
        overflow: visible;
        padding: 0;
      }

      nav button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0.55rem 0.42rem;
        font-size: 0.76rem;
        line-height: 1.18;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .header-actions {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        justify-content: stretch;
      }

      .header-actions > *,
      .language-menu,
      .support-header-btn,
      .auth-header-btn,
      .achievement-header-btn,
      .lang-toggle-btn {
        width: 100%;
        min-width: 0;
      }

      .support-header-btn,
      .auth-header-btn,
      .achievement-header-btn,
      .lang-toggle-btn {
        justify-content: center;
        padding-inline: 0.5rem;
        font-size: 0.76rem;
        line-height: 1.18;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .exp-header-widget {
        grid-column: 1 / -1;
        width: 100%;
      }

      .lang-dropdown {
        left: auto;
        right: 0;
        width: min(100vw - 1.45rem, 320px);
        max-height: min(72dvh, 420px);
        overflow-y: auto;
      }

      #gameSelectionView,
      #gameView,
      #rouletteGameView,
      #leaderboardView,
      #hallOfFameView,
      .pokedle-game-view {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
      }

      .hero,
      .game-library-header,
      .roulette-game-header,
      .pokedle-header {
        width: 100%;
        min-width: 0;
      }

      .hero h1,
      .game-library-header h1,
      .roulette-game-header h1,
      .pokedle-header h1,
      .lb-header h2 {
        font-size: clamp(0.78rem, 5vw, 1.05rem) !important;
        line-height: 1.55;
        overflow-wrap: anywhere;
      }

      .hero p,
      .game-library-header p,
      .roulette-game-header p,
      .pokedle-header p {
        font-size: 0.88rem !important;
        line-height: 1.45;
      }

      .game-selection-layout,
      #gameSelectionView.has-trainer-showcase .game-selection-layout,
      .game-library-grid,
      #gameView,
      .game-area,
      .pokedle-shell,
      .roulette-game-layout,
      #rouletteGameView .roulette-game-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
      }

      .game-tile,
      .upcoming-release-panel,
      .trainer-showcase,
      .roulette-panel,
      .roulette-side-card,
      .pokedle-card,
      .lb-table,
      .achievements-modal,
      .profile-modal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
      }

      .game-tile {
        min-height: 142px;
        padding: 0.85rem 0.72rem;
        gap: 0.55rem;
      }

      .game-tile-icon {
        width: 72px;
        height: 72px;
        border-radius: 18px;
      }

      .game-tile-title {
        font-size: 0.5rem;
        line-height: 1.55;
      }

      .game-tile-desc {
        font-size: 0.74rem;
        line-height: 1.35;
      }

      .upcoming-release-panel,
      .trainer-showcase {
        padding: 0.78rem;
        border-radius: 18px;
      }

      .upcoming-release-card {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        min-height: 92px;
        padding: 0.68rem;
        gap: 0.68rem;
        border-radius: 16px;
      }

      .upcoming-release-art {
        width: 56px;
        height: 56px;
        border-radius: 16px;
      }

      .upcoming-release-card h3 {
        font-size: 0.48rem;
        line-height: 1.45;
      }

      .upcoming-release-card p {
        font-size: 0.68rem;
        line-height: 1.38;
      }

      .trainer-visual-row {
        grid-template-columns: 1fr !important;
      }

      .trainer-sprite-stage {
        min-height: clamp(250px, 76vw, 330px) !important;
      }

      .trainer-sprite {
        width: min(300px, 118%) !important;
        max-height: clamp(245px, 72vw, 320px) !important;
      }

      .trainer-badge-card {
        width: min(100%, 260px) !important;
        min-height: auto !important;
        justify-self: center;
      }

      #rouletteGameView.active {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      #rouletteGameView .roulette-game-header {
        padding: 0.05rem 0 0.1rem;
        gap: 0.35rem;
      }

      .roulette-panel,
      #rouletteGameView .roulette-panel,
      .roulette-side-card,
      #rouletteGameView .roulette-side-card {
        margin: 0 !important;
        padding: 0.72rem !important;
        border-radius: 18px !important;
        overflow: visible;
      }

      .roulette-pointer-readout,
      #rouletteGameView .roulette-pointer-readout,
      .roulette-controls,
      #rouletteGameView .roulette-controls,
      .roulette-result-card,
      #rouletteGameView .roulette-result-card {
        width: 100% !important;
        max-width: 100% !important;
      }

      .roulette-pointer-readout,
      #rouletteGameView .roulette-pointer-readout {
        min-height: 52px;
        padding: 0.58rem 0.62rem;
        margin-bottom: 0.72rem;
        border-radius: 14px;
      }

      .roulette-pointer-readout .readout-label,
      #rouletteGameView .roulette-pointer-readout .readout-label {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
      }

      .roulette-pointer-readout .readout-value,
      #rouletteGameView .roulette-pointer-readout .readout-value {
        font-size: clamp(0.5rem, 2.9vw, 0.64rem);
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .roulette-wheel-wrap,
      #rouletteGameView .roulette-wheel-wrap {
        width: 100% !important;
        max-width: min(100%, 430px) !important;
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 0;
        margin-inline: auto;
        overflow: visible;
      }

      #pokemonRouletteCanvas {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
      }

      .roulette-pointer,
      #rouletteGameView .roulette-pointer {
        right: -2px !important;
        border-top-width: clamp(12px, 4vw, 18px) !important;
        border-bottom-width: clamp(12px, 4vw, 18px) !important;
        border-right-width: clamp(22px, 7vw, 32px) !important;
      }

      .roulette-center-ball,
      #rouletteGameView .roulette-center-ball {
        width: clamp(56px, 17vw, 76px) !important;
        height: clamp(56px, 17vw, 76px) !important;
        border-width: 4px !important;
      }

      .roulette-center-ball::after,
      #rouletteGameView .roulette-center-ball::after {
        width: clamp(18px, 5vw, 24px) !important;
        height: clamp(18px, 5vw, 24px) !important;
        border-width: 4px !important;
      }

      .roulette-controls,
      #rouletteGameView .roulette-controls {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
        margin: 0.75rem 0 0 !important;
      }

      .roulette-main-btn,
      .roulette-secondary-btn,
      #rouletteGameView .roulette-main-btn,
      #rouletteGameView .roulette-secondary-btn,
      .spin-btn,
      .guess-btn,
      .silhouette-restart-btn {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        min-height: 52px;
        padding: 0.72rem 0.58rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.35;
        font-size: clamp(0.48rem, 2.65vw, 0.62rem) !important;
      }

      .roulette-result-card,
      #rouletteGameView .roulette-result-card {
        min-height: 0;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 0.62rem;
        padding: 0.72rem !important;
        text-align: left;
      }

      .roulette-result-card img,
      #rouletteGameView .roulette-result-card img {
        width: 62px !important;
        height: 62px !important;
        margin: 0;
      }

      .roulette-result-card .title,
      #rouletteGameView .roulette-result-card .title {
        font-size: 0.52rem !important;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .roulette-result-card .text,
      #rouletteGameView .roulette-result-card .text {
        font-size: 0.78rem !important;
        line-height: 1.35;
      }

      .roulette-setup-card,
      #rouletteGameView .roulette-setup-card,
      .roulette-phase-card,
      #rouletteGameView .roulette-phase-card,
      .roulette-opponent-card,
      #rouletteGameView .roulette-opponent-card,
      .roulette-inventory-card,
      #rouletteGameView .roulette-inventory-card {
        padding: 0.75rem !important;
        border-radius: 16px !important;
        margin-bottom: 0.72rem;
      }

      .roulette-setup-title,
      .roulette-phase-label,
      .roulette-opponent-title,
      .roulette-inventory-title {
        font-size: 0.48rem !important;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .roulette-setup-hint,
      .roulette-phase-text,
      .roulette-opponent-text,
      .roulette-inventory-note {
        font-size: 0.76rem !important;
        line-height: 1.38;
      }

      .roulette-gen-grid,
      #rouletteGameView .roulette-gen-grid {
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
      }

      .roulette-gen-btn,
      #rouletteGameView .roulette-gen-btn {
        min-height: 76px !important;
        padding: 0.65rem !important;
        border-radius: 16px !important;
      }

      .roulette-gen-btn .gen-number,
      #rouletteGameView .roulette-gen-btn .gen-number {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.58rem !important;
      }

      .roulette-gen-btn .gen-main,
      #rouletteGameView .roulette-gen-btn .gen-main {
        font-size: 0.52rem !important;
      }

      .roulette-gen-btn .gen-sub,
      #rouletteGameView .roulette-gen-btn .gen-sub {
        font-size: 0.76rem !important;
      }

      .roulette-stat-grid,
      #rouletteGameView .roulette-stat-grid,
      .roulette-team-grid,
      #rouletteGameView .roulette-team-grid,
      .roulette-inventory-grid,
      #rouletteGameView .roulette-inventory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
      }

      .roulette-stat,
      #rouletteGameView .roulette-stat {
        min-height: 0 !important;
        padding: 0.58rem 0.4rem !important;
        border-radius: 13px !important;
      }

      .roulette-stat .label,
      #rouletteGameView .roulette-stat .label {
        font-size: 0.55rem !important;
        line-height: 1.2;
        letter-spacing: 0.3px;
      }

      .roulette-stat .value,
      #rouletteGameView .roulette-stat .value {
        font-size: 0.54rem !important;
        line-height: 1.35;
        overflow-wrap: anywhere;
      }

      .roulette-progress-row,
      #rouletteGameView .roulette-progress-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.42rem !important;
      }

      .roulette-badge-slot,
      #rouletteGameView .roulette-badge-slot {
        min-height: 46px !important;
        border-radius: 13px !important;
      }

      .roulette-badge-slot img,
      #rouletteGameView .roulette-badge-slot img {
        width: 42px !important;
        height: 42px !important;
      }

      .roulette-power-bar {
        grid-template-columns: 1fr auto 1fr;
        gap: 0.38rem;
      }

      .roulette-team-header {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 0.55rem;
      }

      .roulette-bank-btn {
        width: 100%;
        min-height: 44px;
        white-space: normal;
      }

      .roulette-team-slot,
      #rouletteGameView .roulette-team-slot {
        min-height: 112px !important;
        padding: 0.52rem 0.32rem !important;
        border-radius: 15px !important;
        gap: 0.28rem !important;
      }

      .roulette-team-slot img,
      #rouletteGameView .roulette-team-slot img {
        width: 62px !important;
        height: 62px !important;
      }

      .roulette-team-slot .name,
      #rouletteGameView .roulette-team-slot .name {
        font-size: 0.68rem !important;
        overflow-wrap: anywhere;
      }

      .roulette-team-slot .power,
      #rouletteGameView .roulette-team-slot .power {
        font-size: 0.64rem !important;
      }

      .roulette-inventory-item,
      #rouletteGameView .roulette-inventory-item {
        min-height: 78px !important;
        padding: 0.52rem 0.36rem !important;
        border-radius: 13px !important;
      }

      .roulette-inventory-item img,
      #rouletteGameView .roulette-inventory-item img {
        width: 34px !important;
        height: 34px !important;
      }

      .roulette-inventory-item .item-name,
      #rouletteGameView .roulette-inventory-item .item-name {
        font-size: 0.66rem !important;
        overflow-wrap: anywhere;
      }

      .roulette-log,
      #rouletteGameView .roulette-log {
        max-height: min(32dvh, 220px) !important;
        gap: 0.42rem;
      }

      .roulette-log-entry,
      #rouletteGameView .roulette-log-entry {
        font-size: 0.76rem !important;
        padding: 0.58rem 0.65rem !important;
        line-height: 1.35;
      }

      .roulette-bank-overlay {
        align-items: flex-end;
        padding: max(0.55rem, env(safe-area-inset-top)) max(0.55rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
      }

      .roulette-bank-modal {
        width: 100% !important;
        max-height: 88dvh !important;
        padding: 0.85rem !important;
        border-radius: 20px 20px 0 0 !important;
      }

      .roulette-bank-header {
        flex-direction: column;
        gap: 0.55rem;
      }

      .roulette-bank-columns,
      .roulette-bank-grid {
        grid-template-columns: 1fr !important;
      }

      .roulette-bank-column {
        padding: 0.75rem;
      }

      .roulette-bank-mon {
        min-height: 108px;
      }

      .lb-header,
      .lb-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.55rem;
      }

      .lb-refresh,
      .lb-source,
      .lb-mode-btn {
        width: 100%;
        text-align: center;
        white-space: normal;
      }

      .lb-mode-tabs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
      }

      .lb-table {
        border: 0;
        background: transparent;
        display: grid;
        gap: 0.65rem;
        overflow: visible;
      }

      .lb-row.header {
        display: none !important;
      }

      .lb-row {
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 0.45rem 0.65rem;
        padding: 0.82rem !important;
        border: 1px solid var(--border) !important;
        border-radius: 15px;
        background: var(--card);
      }

      .lb-rank {
        grid-row: span 5;
        width: 2.15rem;
        height: 2.15rem;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(255,255,255,0.04);
        font-size: 0.55rem !important;
      }

      .lb-player-name,
      .lb-player-title {
        white-space: normal;
      }

      .lb-val,
      .lb-date,
      .hall-points {
        font-family: 'Nunito', sans-serif !important;
        font-size: 0.8rem !important;
        text-align: left;
        line-height: 1.25;
      }

      .modal-overlay,
      .name-modal-overlay,
      .utility-modal-overlay,
      .exp-modal-overlay,
      .achievements-modal-overlay,
      .roulette-outcome-overlay,
      .achievement-unlock-overlay {
        padding: max(0.55rem, env(safe-area-inset-top)) max(0.55rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
      }

      .modal,
      .name-modal,
      .utility-modal,
      .exp-modal,
      .achievements-modal,
      .roulette-outcome-modal,
      .achievement-unlock-modal,
      .profile-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90dvh !important;
        overflow-y: auto;
        padding: 0.95rem !important;
        border-radius: 18px !important;
      }

      .name-modal .logo-big,
      .modal h2,
      .utility-modal-title,
      .exp-modal h2,
      .achievements-modal h2,
      .roulette-outcome-modal h2,
      .achievement-unlock-title {
        font-size: clamp(0.62rem, 4vw, 0.82rem) !important;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }

      .start-lang-switch.lang-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .profile-card-display,
      .profile-achievement-filters,
      .profile-tabs {
        grid-template-columns: 1fr !important;
      }

      .profile-sprite-stage,
      .profile-badge-display {
        min-height: 210px !important;
      }

      .profile-sprite-stage img {
        width: min(300px, 112%) !important;
        max-height: 260px !important;
      }

      .achievements-total-card,
      .achievements-summary-card,
      .profile-achievements-total {
        flex-direction: column;
        align-items: stretch;
      }

      .achievements-grid,
      .profile-achievement-grid {
        grid-template-columns: 1fr !important;
      }

      .pokedle-header {
        grid-template-columns: 1fr !important;
        padding: 0.85rem;
      }

      .pokedle-input-row {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
      }

      .pokedle-submit-btn,
      .pokedle-reset-btn,
      .pokedle-back-btn {
        width: 100%;
      }

      .pokedle-gen-grid,
      .pokedle-status-row {
        grid-template-columns: 1fr !important;
      }

      .pokedle-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .pokedle-table {
        min-width: 640px;
      }

      .feedback-widget {
        right: max(0.65rem, env(safe-area-inset-right));
        bottom: max(0.65rem, env(safe-area-inset-bottom));
        z-index: 80;
      }

      .feedback-bubble-btn {
        width: 50px;
        height: 50px;
        font-size: 1.45rem;
      }

      .feedback-panel {
        width: min(330px, calc(100vw - 1.3rem));
        max-height: min(70dvh, 520px);
        overflow-y: auto;
      }
    }

    @media (max-width: 420px) {
      .header-actions {
        grid-template-columns: 1fr;
      }

      nav {
        grid-template-columns: 1fr;
      }

      .roulette-result-card,
      #rouletteGameView .roulette-result-card {
        grid-template-columns: 1fr !important;
        text-align: center;
      }

      .roulette-result-card img,
      #rouletteGameView .roulette-result-card img {
        margin-inline: auto;
      }
    }

    @media (max-width: 360px) {
      .roulette-stat-grid,
      #rouletteGameView .roulette-stat-grid,
      .roulette-team-grid,
      #rouletteGameView .roulette-team-grid,
      .roulette-inventory-grid,
      #rouletteGameView .roulette-inventory-grid {
        grid-template-columns: 1fr !important;
      }

      .roulette-progress-row,
      #rouletteGameView .roulette-progress-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }