/* Hide mobile dock on desktop — JS shows it on mobile */
.mobile-dock { display: none; }

/* Panel open state */
.mobile-extra-panel.open { bottom: 0 !important; }
.mobile-extra-backdrop.open { display: block !important; }

/*
 * Play BackWords Mobile Layout
 * Only activates on screens ≤768px
 * Desktop layout remains completely untouched
 */

@media (max-width: 768px) {

  /* ========================================
     GLOBAL MOBILE ADJUSTMENTS
     ======================================== */

  /* Game screen: flex column, fills viewport. NO overflow:hidden (clips fixed dock on iOS) */
  #screen-game {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: visible;
  }

  /* Lobby and other screens scroll freely */
  #screen-lobby,
  #screen-stats,
  #screen-info,
  #screen-admin {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: visible;  /* must be visible so fixed dropdowns aren't clipped on iOS */
  }
  /* Scrolling content inside lobby */
  #screen-lobby .lobby-wrap {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    /* Must have explicit max-height since parent overflow:visible can't contain it */
    max-height: calc(100dvh - 52px); /* 52px = topnav height */
  }
  #screen-stats .stats-wrap,
  #screen-info .stats-wrap {
    overflow-y: auto;
    flex: 1;
  }

  /* ========================================
     MOBILE TOP BAR - Always visible
     [Lobby] [Mini Games] [Game Info] [Shop] [Profile]
     ======================================== */
  
  #screen-game .topnav {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--nav-bg);
    border-bottom: 1px solid #ddd;
    padding: 8px 12px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  /* Hide desktop nav elements */
  #screen-game .topnav .logo-sm,
  #screen-game .topnav .btn-sm:first-child {
    display: none !important;
  }

  /* Mobile top bar icons */
  #screen-game .nav-games {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: flex-start;
  }

  #screen-game .nav-games .btn-sm {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  #screen-game .nav-right {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: 0 !important;
  }

  #screen-game .nav-right .username-badge,
  #screen-game .nav-right .coin-badge {
    font-size: 11px;
    padding: 4px 6px;
    height: auto;
  }

  /* Add mobile-only icons to nav */
  /* home icon now in HTML button, not pseudo-element */

  /* Shop icon removed */

  /* ========================================
     HIDE DESKTOP GAME ELEMENTS
     ======================================== */
  
  #screen-game .topbar,
  #screen-game .legend,
  #screen-game .side,
  #screen-game .side-icons,
  #screen-game #saved-moves-pane {
    display: none !important;
  }

  /* ========================================
     GAME BOARD - Full screen, zoomable
     ======================================== */
  
  #screen-game .main {
    flex: 0 0 auto;        /* size to board, don't stretch */
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    background: #b8d48e;  /* matches board bg */
    padding: 0;
    margin: 0;
  }

  #screen-game .board-wrap {
    width: 100%;
    aspect-ratio: 15 / 15.15;   /* very slightly taller to prevent bottom crop */
    flex: 0 0 auto;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    background: #f8f7f4;
  }

  #screen-game .board {
    touch-action: pinch-zoom;
    margin: 0;
    flex-shrink: 0;
    /* Fill available width at natural scale */
    width: 100%;
  }

  /* Score preview label under board */
  #screen-game .board-wrap::after {
    content: 'score preview';
    display: block;
    font-size: 9px;
    color: rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 2px 0 4px;
    width: 100%;
  }

  /* ========================================
     MOBILE DOCK - Always visible at bottom
     ======================================== */
  
  /* ── Mobile dock — stacks from top to bottom ── */
  #screen-game .mobile-dock {
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1.5px solid var(--border);
    z-index: 999;
    padding: 0 8px 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Tile rack */
  #screen-game .mobile-dock-top {
    display: flex;
    justify-content: center;
    margin-bottom: 1px;
  }
  #screen-game .mobile-dock .rack {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
  }

  /* Score preview */
  #screen-game .mobile-wp {
    font-size: 11px;
    text-align: left;
    color: var(--text-muted);
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-weight: 500;
    flex-shrink: 0;
    max-height: 1.4em;
    display: block;
    cursor: pointer;
    padding-right: 24px; /* room for "..." hint */
    position: relative;
  }
  #screen-game .mobile-wp::after {
    content: " ▸";
    position: absolute;
    right: 4px;
    top: 0;
    font-size: 10px;
    color: #534AB7;
    font-weight: 700;
    background: var(--surface);
    padding-left: 2px;
  }

  /* Submit / Shuffle / Recall */
  #screen-game .mobile-dock-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 1px;
  }
  #screen-game .mobile-dock-actions .btn-sm,
  #screen-game .mobile-dock-actions .btn-primary {
    flex: 1;
    height: 36px !important;
    padding: 0 4px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
  }
  #screen-game .mobile-dock-actions .btn-primary {
    flex: 2;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 0 8px !important;
    margin: 0 !important;
  }
  #screen-game .mobile-dock-actions .btn-recall { background: var(--surface2); border-color: var(--border); }
  #screen-game .mobile-dock-actions .btn-shuffle { background: var(--surface2); border-color: var(--border); }

  /* Turn direction line */
  .mobile-turn-line {
    font-size: 11px;
    text-align: center;
    color: var(--text-muted);
    min-height: 0;
    margin: 0;
    line-height: 1.2;
  }

  /* ── Sticky bottom bar: React | More | Save | Options ── */
  .mobile-bottom-bar {
    display: flex;
    border-top: 1px solid var(--border);
    margin: 0 -10px;
    background: var(--surface);
  }
  .mbb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 4px 3px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    -webkit-tap-highlight-color: rgba(83,74,183,0.15);
  }
  .mbb-btn span {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
  }
  .mbb-btn:active { background: var(--surface2); }

  body.dark-mode .mbb-btn span,
  body.dark-mode .mbb-btn { color: var(--text-muted) !important; }

  /* ========================================
     MOBILE SETTINGS/MORE MODAL
     ======================================== */
  
  /* All slide-up panels share this base */
  #screen-game .mobile-extra-backdrop,
  #mobile-chaos-backdrop,
  #mobile-more-backdrop,
  #mobile-save-backdrop,
  #mobile-info-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
  }
  #screen-game .mobile-extra-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
  }

  #screen-game .mobile-extra-backdrop.open {
    display: block;
  }

  #screen-game .mobile-extra-panel {
    display: block !important;  /* override global display:none */
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    z-index: 1101;
    transition: bottom 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  }

  #screen-game .mobile-extra-panel.open {
    bottom: 0;
  }

  /* Settings panel specific */
  #mobile-settings-panel .btn-secondary {
    background: #f4f2ed;
    border: 1px solid #ddd;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    border-radius: 8px;
    text-align: center;
  }

  #mobile-settings-panel .btn-secondary:active {
    background: #e8e6e0;
  }

  /* Emoji panel specific */
  #mobile-emoji-panel .emoji-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px;
    scrollbar-width: none;
  }
  #mobile-emoji-panel .emoji-bar::-webkit-scrollbar { display: none; }

  #mobile-emoji-panel .emoji-bar button {
    font-size: 24px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 2px solid #ddd;
    background: #f4f2ed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }

  #mobile-emoji-panel .emoji-bar button:active {
    transform: scale(0.9);
    border-color: #534AB7;
    background: #EEEDFE;
  }

  /* Game log in settings panel */
  #screen-game .mobile-extra-panel .log {
    max-height: 250px;
    overflow-y: auto;
    background: #f8f7f4;
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  #screen-game .mobile-extra-panel .log > div {
    padding: 6px 0;
    border-bottom: 1px solid #e8e6e0;
  }

  #screen-game .mobile-extra-panel .log > div:last-child {
    border-bottom: none;
  }

  /* ========================================
     AUTH SCREEN MOBILE
     ======================================== */

  #screen-auth {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth-wrap {
    padding: 32px 20px 40px;
    justify-content: flex-start;
    padding-top: max(48px, env(safe-area-inset-top, 48px));
  }

  .auth-wrap .logo {
    font-size: 42px;
  }

  .auth-wrap .card {
    width: 100%;
    max-width: 400px;
  }

  /* ========================================
     LOBBY SCREEN MOBILE
     ======================================== */
  
  #screen-lobby .topnav {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 500;
    padding: 8px 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    background: var(--nav-bg);
    z-index: 100;
  }

  #screen-lobby .nav-games {
    order: 3;
    width: 100%;
    margin-top: 8px;
    justify-content: space-between;
  }

  #screen-lobby .nav-games .btn-sm {
    flex: 1;
    min-width: 44px;
  }

  #screen-lobby .lobby-wrap {
    padding: 12px;
    margin: 0;
    flex-direction: column;
  }

  #screen-lobby .lobby-col {
    width: 100%;
    max-width: none;
    flex: none;
  }

  /* Collapse game options on mobile */
  #screen-lobby .option-row {
    padding: 8px 0;
  }

  #screen-lobby .mode-row-sub {
    font-size: 11px;
  }

  /* ========================================
     MODAL ADJUSTMENTS
     ======================================== */
  
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    z-index: 1200;
  }

  .modal-box {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* ========================================
     MINI GAMES MOBILE
     ======================================== */
  
  /* WordBlitz, WordStorm, WordDrift all use modals */
  /* They should be full-screen on mobile */
  .modal-box {
    font-size: 14px;
  }

  /* ========================================
     OPPONENT INFO - Always visible
     ======================================== */
  
  .mobile-scores-bar { display: none !important; } /* replaced by game-nav-scores in topnav */

  .mobile-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .mobile-score-name {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    margin-bottom: 2px;
  }

  .mobile-score-pts {
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }

  .mobile-score-status {
    font-size: 11px;
    color: #534AB7;
    font-weight: 700;
    padding: 4px 8px;
    background: #EEEDFE;
    border-radius: 6px;
    white-space: nowrap;
  }

  /* scores bar removed — board top is set by topnav height */

  /* ========================================
     UTILITY CLASSES
     ======================================== */
  
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* ========================================
     TOUCH INTERACTIONS
     ======================================== */
  
  /* Larger tap targets — but don't override explicit heights in the dock */
  button:not(.mobile-dock-actions button), .btn-sm:not(.mobile-dock-actions .btn-sm) {
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(83, 74, 183, 0.2);
  }
  .mobile-dock-actions button {
    -webkit-tap-highlight-color: rgba(83, 74, 183, 0.2);
  }

  /* Tile touches */
  .tile {
    -webkit-tap-highlight-color: rgba(83, 74, 183, 0.2);
  }

  /* Board cell touches */
  .cell {
    -webkit-tap-highlight-color: rgba(83, 74, 183, 0.1);
  }

  /* ========================================
     SAFE AREAS (iPhone notch, etc)
     ======================================== */
  
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    #screen-game .mobile-dock {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    #screen-game .topnav {
      padding-top: calc(8px + env(safe-area-inset-top));
    }
  }

  /* ========================================
     MINI GAMES ICON MODAL
     ======================================== */
  
  /* When mini games are condensed into one icon */
  .mini-games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
  }

  .mini-game-card {
    background: #f4f2ed;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
  }

  .mini-game-card:active {
    transform: scale(0.95);
    border-color: #534AB7;
  }

  .mini-game-card .icon {
    font-size: 32px;
    margin-bottom: 8px;
  }

  .mini-game-card .title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
  }

  /* ========================================
     PERFORMANCE OPTIMIZATIONS
     ======================================== */
  
  /* Hardware acceleration for smooth animations — game screen only */
  #screen-game .board,
  #screen-game .mobile-dock,
  /* translateZ removed — interferes with fixed positioning on iOS */

  /* Reduce animations on low-end devices */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ========================================
     LANDSCAPE ORIENTATION
     ======================================== */
  
  @media (max-width: 768px) and (orientation: landscape) {
    #screen-game .main {
      bottom: 140px; /* Shorter dock in landscape */
    }

    #screen-game .mobile-dock {
      padding: 6px 12px 8px;
    }

    #screen-game .mobile-wp {
      font-size: 11px;
      margin-bottom: 4px;
    }

    #screen-game .mobile-dock-actions .btn-sm,
    #screen-game .mobile-dock-actions .btn-primary {
      font-size: 12px;
      height: 38px !important;
      min-height: 38px !important;
      max-height: 38px !important;
    }
  }

  /* ========================================
     SMALL PHONES (≤480px)
     ======================================== */
  
  @media (max-width: 480px) {
    #screen-game .topnav {
      padding: 6px 8px;
    }

    #screen-game .nav-games .btn-sm {
      width: 32px;
      height: 32px;
      font-size: 16px;
    }

    #screen-game .mobile-dock-actions {
      gap: 4px;
    }

    #screen-game .mobile-dock-actions .btn-sm,
    #screen-game .mobile-dock-actions .btn-primary {
      font-size: 12px;
    }

  }
}

/* ── Must-use tile glow (Hit Me / Gambler's Draw) ── */
.tile.must-use {
  box-shadow: 0 0 0 2px #EF9F27, 0 0 10px 3px rgba(239,159,39,0.55);
  border-color: #EF9F27 !important;
  animation: must-use-pulse 1.4s ease-in-out infinite;
}
@keyframes must-use-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #EF9F27, 0 0 10px 3px rgba(239,159,39,0.45); }
  50%       { box-shadow: 0 0 0 2px #EF9F27, 0 0 16px 6px rgba(239,159,39,0.75); }
}

/* ── Tile on Lurker-eaten cell: regular tile + gold dashed border ── */
.cell.chaos-broken-played::after {
  content: '';
  position: absolute; inset: 1px;
  border: 2px dashed #EF9F27;
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
}

/* ========================================
   AUTH SCREEN — MOBILE SPECIFIC FIXES
   ======================================== */

@media (max-width: 768px) {

  /* Auth screen must cover full viewport — z-index ABOVE all fixed game elements
     (game topnav=1000, dock=999, score bar=998) */
  #screen-auth.active,
  #screen-username.active {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f0ece0; /* fallback while board bg loads */
  }

  /* Auth wrap: full width, content from top */
  #screen-auth .auth-wrap {
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 40px 20px 60px;
    padding-top: max(40px, env(safe-area-inset-top, 40px));
    box-sizing: border-box;
    justify-content: flex-start;
  }

  /* Cards full width on mobile */
  #screen-auth .card,
  #screen-auth .auth-info {
    max-width: 100%;
    width: 100%;
  }

  /* Username screen inner layout */
  #screen-username.active .auth-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(40px, env(safe-area-inset-top, 40px)) 20px 40px;
    box-sizing: border-box;
  }

  /* Hide mini-games card completely when no user session */
  #mini-games-card:empty,
  #mini-games-scores:empty {
    display: none;
  }

  /* Hide chat panel on mobile when on auth/username screens */
  /* chat-panel visibility controlled entirely by JS via setProperty */
  .chat-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100dvh; z-index: 9000; }

  /* ========================================
     LOBBY — prevent content showing before auth
     ======================================== */

  #screen-lobby:not(.active),
  #screen-game:not(.active),
  #screen-admin:not(.active),
  #screen-stats:not(.active),
  #screen-info:not(.active) {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  /* Auth features grid — single column on small screens */
  .auth-features {
    grid-template-columns: 1fr 1fr;
  }

  @media (max-width: 400px) {
    .auth-features {
      grid-template-columns: 1fr;
    }
  }
}

/* ========================================
   LOBBY MOBILE — consolidated nav + layout
   ======================================== */

@media (max-width: 768px) {

  /* Hide desktop-only items in nav */
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }

  /* Lobby nav: compact single row */
  #screen-lobby .topnav {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 500;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 6px 8px;
    gap: 4px;
  }

  /* Logo smaller on mobile */
  #screen-lobby .logo-sm {
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Mini game buttons: smaller on mobile */
  #screen-lobby .nav-games {
    display: flex;
    gap: 3px;
    flex-shrink: 1;
    overflow: hidden;
  }

  #screen-lobby .nav-games .btn-sm {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 15px;
    flex-shrink: 0;
  }

  /* Username badge — shorter on mobile */
  #screen-lobby .nav-profile-badge {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  /* Hamburger visible on mobile */
  #lobby-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 18px;
    flex-shrink: 0;
  }

  /* Chat button: JS controls visibility via inline style, CSS just sets position */

  /* Event banner: full width, proper layout */
  #event-banner {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
  }

  /* Lobby layout: stack columns, games first */
  #screen-lobby .lobby-wrap {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 0;
  }

  /* Right col (Your Games) comes first on mobile */

  /* Hide mini games card on mobile — icons in nav serve this purpose */
  #mini-games-card {
    display: none !important;
  }

  /* Community stats card — show but compact */
  #community-card {
    font-size: 13px;
  }
}

/* ========================================
   LOBBY NAV — further consolidation
   ======================================== */

@media (max-width: 768px) {

  /* XP/coins: show as tiny subtitle under username in badge */
  #screen-lobby .nav-xp-meta {
    display: none !important; /* hidden standalone — JS appends to badge */
  }

  /* Profile badge: slightly wider to fit username */
  #screen-lobby .nav-profile-badge {
    max-width: 90px;
    font-size: 12px;
    padding: 4px 8px;
  }

  /* Chat button: JS-only control via inline style — no CSS override */

  /* Nav right: compact */
  #screen-lobby .nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  /* ========================================
     GAME SCREEN — wider tap targets for top icons
     ======================================== */

  #screen-game .nav-games .btn-sm {
    width: 42px;
    height: 42px;
    min-height: 42px;
    font-size: 19px;
  }

  #screen-game .topnav {
    padding: 6px 8px;
    gap: 4px;
  }
}

/* ========================================
   CHAT — full screen modal on mobile
   ======================================== */

@media (max-width: 768px) {

  .chat-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2000 !important;
    border-left: none !important;
    border-radius: 0 !important;
  }

  /* Chat header: add close button styling */
  .chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Don't shift lobby content when chat opens on mobile */
  body.chat-open #screen-lobby .lobby-wrap,
  body.chat-open #screen-lobby .topnav,
  body.chat-open #screen-game .main,
  body.chat-open #screen-game .topnav {
    margin-right: 0 !important;
  }

  /* Event banner: never shift on mobile */
  body.chat-open #event-banner {
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* ========================================
   LOBBY MOBILE — dropdown + toggles + overflow
   ======================================== */

@media (max-width: 768px) {

  /* Opponent select: smaller font */
  #opponent-select {
    font-size: 14px !important;
    padding: 8px 10px;
  }

  /* Mode toggles: fix pill shape (overriding any inherited box-model issues) */
  .toggle {
    display: inline-block !important;
    width: 42px !important;
    height: 24px !important;
    min-width: 42px !important;
    min-height: 24px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    box-sizing: content-box !important;
  }

  .toggle::after {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    top: 3px !important;
    left: 3px !important;
  }

  .toggle.on::after { left: 21px !important; }

  .mode-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* ========================================
     PREVENT HORIZONTAL SCROLL — ALL SCREENS
     ======================================== */

  html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  .screen, .lobby-wrap, .stats-wrap, .auth-wrap,
  .card, .topnav, .modal-box {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Prevent any single element from overflowing */
  * {
    max-width: 100%;
  }

  /* Exception: modal overlays and fixed elements need freedom */
  .modal-overlay, #loading-overlay, .chat-panel,
  .mobile-extra-panel, .mobile-extra-backdrop { max-width: none; }

  /* ========================================
     GAME BOARD — zoom centering
     ======================================== */

  #screen-game .board-wrap {
    touch-action: pinch-zoom;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
  }

  #screen-game .board {
    touch-action: pinch-zoom;
    flex-shrink: 0; /* Don't let board shrink — let wrap scroll */
    transform-origin: top left;
  }

  /* ========================================
     MOBILE EXTRA PANELS — ensure visible
     ======================================== */

  /* Override global display:none for game screen panels */
  #screen-game .mobile-extra-panel.open {
    display: block !important;
    bottom: 0 !important;
  }

  #screen-game .mobile-extra-backdrop.open {
    display: block !important;
  }

  /* Dock action buttons — slightly larger */
  #screen-game .mobile-dock-actions .btn-sm,
  #screen-game .mobile-dock-actions .btn-primary {
    min-width: 0;
    flex: 1;
  }
}

/* ========================================
   COMPREHENSIVE MOBILE FIXES (v2)
   ======================================== */

@media (max-width: 768px) {

  /* ── Toggle pills: nuclear reset ────────────────────────── */
  button.toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex !important;
    width: 42px !important;
    height: 24px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border-radius: 12px !important;
    border: none !important;
    background: #ccc !important;
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    overflow: visible !important;
    box-sizing: content-box !important;
    transition: background 0.2s !important;
  }
  button.toggle.on {
    background: #534AB7 !important;
  }
  button.toggle::after {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border-radius: 50% !important;
    top: 3px !important;
    left: 3px !important;
    transition: left 0.2s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  }
  button.toggle.on::after {
    left: 21px !important;
  }
  .mode-row-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .mode-row-title {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* ── Opponent dropdown: smaller ─────────────────────────── */
  #opponent-select {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  /* ── Lobby columns: Your Games above New Game on mobile ─── */
  #screen-lobby .lobby-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Chat: use modal overlay on mobile ──────────────────── */
  .chat-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    z-index: 5000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Don't shift any content — chat is full overlay */
  body.chat-open #screen-lobby .lobby-wrap,
  body.chat-open #screen-game .main,
  body.chat-open #screen-admin .stats-wrap,
  body.chat-open #screen-stats .stats-wrap,
  body.chat-open #screen-info .stats-wrap,
  body.chat-open #event-banner {
    margin-right: 0 !important;
  }

  /* ── Board zoom: center on finger position ───────────────── */
  #screen-game .board-wrap {
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }
  #screen-game .board {
    touch-action: pan-x pan-y pinch-zoom !important;
    transform-origin: 0 0 !important;
    flex-shrink: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
  }

  /* ── Settings/emoji panels: ensure visible above dock ────── */
  .mobile-extra-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 1100 !important;
    display: none !important;
  }
  .mobile-extra-backdrop.open {
    display: block !important;
  }
  .mobile-extra-panel {
    position: fixed !important;
    bottom: -100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 75vh !important;
    background: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1200 !important;
    transition: bottom 0.25s ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
    display: block !important; /* always in DOM, position controls visibility */
  }
  .mobile-extra-panel.open {
    bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FINAL OVERRIDES — these win all specificity battles
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Your Games above New Game ─────────────────────────── */
  #screen-lobby .lobby-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Hide Classic on mobile ─────────────────────────────── */
  .mobile-hidden { display: none !important; }
  #row-classic, #classic-subopts, #row-ranked { display: none !important; }

  /* ── Nav: compact icon sizes ────────────────────────────── */
  #screen-lobby .nav-games .btn-sm,
  #screen-lobby .btn-info {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }
  #screen-lobby .nav-profile-badge {
    max-width: 72px !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #lobby-hamburger {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  /* ── Chat: full-screen modal ────────────────────────────── */
  .chat-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    z-index: 9000 !important;
    border-radius: 0 !important;
    border: none !important;
  }

  /* Don't shift page when chat opens on mobile */
  body.chat-open #screen-lobby .lobby-wrap,
  body.chat-open .topnav,
  body.chat-open #screen-game .main,
  body.chat-open #screen-admin .stats-wrap,
  body.chat-open #screen-stats .stats-wrap,
  body.chat-open #screen-info .stats-wrap {
    margin-right: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   GAME SCREEN MOBILE NAV — slim bar + hide on zoom
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Slim game topnav */
  #screen-game .topnav {
    height: 48px;
    padding: 0 8px;
    gap: 4px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Topnav always visible — never hide it */
  body.board-zoomed .mobile-scores-bar {
    transform: translateY(-100%);
    opacity: 0;
  }

  /* Game nav score strip */
  #game-nav-scores {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Home button */
  #screen-game .mobile-only.btn-sm {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    flex-shrink: 0;
  }

  /* Chat badge */
  .chat-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #A32D2D;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
  }

  /* Chat nav btn needs relative positioning for badge */
  .chat-nav-btn {
    position: relative !important;
  }
}

/* Mobile lobby: natural HTML source order used */

@media (max-width: 768px) {
  /* Scores bar hidden — game-nav-scores in topnav replaces it */
  .mobile-scores-bar { display: none !important; }

  /* XP and coin badges desktop only — never show in game topnav on mobile */
  #screen-game #xp-display,
  #screen-game #coin-display { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   GAME SCREEN MOBILE — rack, scores, board position
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* rack handled below */

  /* top offset not needed — using flex layout */

  /* Tighten topnav height */
  #screen-game .topnav {
    height: 48px !important;
    min-height: 48px !important;
  }

  /* Stats modal: tighter padding */
  .modal-box {
    padding: 16px !important;
  }
  .modal-box h2 {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  /* Stats grid: tighter cells */
  #modal-stat-grid > div {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  #modal-stat-grid > div > div:last-child {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   LOBBY CARDS — colored collapsible headers
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-collapsible-card {
    overflow: hidden;
    padding: 0 !important;
  }
  .mobile-collapsible-card > div:first-child {
    /* header row — already styled inline */
  }
  .mobile-collapsible-card #new-game-body,
  .mobile-collapsible-card #community-body {
    padding: 14px 16px;
  }
  /* On desktop: reset the colored header */
}
@media (min-width: 769px) {
  .mobile-collapsible-card > div:first-child {
    /* desktop: headers are clickable, keep pointer-events */
  }
  .mobile-collapsible-card > div:first-child button,
  .mobile-collapsible-card > div:first-child a {
    pointer-events: all !important;  /* re-enable buttons inside */
    cursor: pointer !important;
  }
  /* Achievements is collapsible on desktop — re-enable its header */
  #achievements-card > div:first-child {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: #fff8ec !important;
    margin: -16px -16px 14px !important;
    padding: 14px 16px 12px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  #achievements-card > div:first-child span[id="achievements-chevron"] {
    display: inline !important;
  }
  .mobile-collapsible-card #new-game-body,
  .mobile-collapsible-card #community-body,
  .mobile-collapsible-card #your-games-body,
  .mobile-collapsible-card #mini-games-body {
    display: block !important; /* always open on desktop */
  }
  /* Achievements: closed by default on desktop, loads on click */
  /* Desktop: hide chevrons */
  .mobile-collapsible-card > div:first-child span[id$="-chevron"] {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RACK — fit on one line on mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Mobile rack: no wrap, smaller tiles */
  #screen-game #rack-mobile {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 4px !important;
    overflow-x: visible !important;
    justify-content: center !important;
    background: transparent !important;
  }
  #screen-game #rack-mobile .tile {
    width: 32px !important;
    height: 34px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    border-radius: 5px !important;
  }
  #screen-game #rack-mobile .tile .tp {
    font-size: 8px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }
  /* Mobile dock top: center the rack */
  .mobile-dock-top {
    display: flex;
    justify-content: center;
    padding: 2px 4px;
  }
}

/* ══════════════════════════════════════════════════════════
   FINAL DEFINITIVE FIXES
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Scores bar: GONE — game-nav-scores in topnav replaces it ── */
  .mobile-scores-bar,
  #mobile-scores-bar {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── Rack: always one line, tiles scale to fit ── */
  #screen-game #rack-mobile,
  #screen-game .mobile-dock-top .rack {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 3px !important;
    background: transparent !important;
    justify-content: center !important;
    overflow: visible !important;
    width: 100% !important;
  }
  /* Scale tiles using clamp — fits 8-10 tiles on any phone, a bit bigger */
  #screen-game #rack-mobile .tile,
  #screen-game .mobile-dock-top .rack .tile {
    width: clamp(30px, calc((100vw - 48px) / 8), 42px) !important;
    height: clamp(34px, calc((100vw - 48px) / 8 + 4px), 46px) !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    border-radius: 5px !important;
  }
  #screen-game #rack-mobile .tile .tp,
  #screen-game .mobile-dock-top .rack .tile .tp {
    font-size: 8px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }

  /* ── Chat button: force visible when JS sets it ── */
  .chat-nav-btn[style*="flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    position: relative !important;
  }
}

/* ── Board buffer fix ── */
@media (max-width: 768px) {
  #screen-game .board-wrap {
    padding: 2px 4px 2px 3px !important; /* tiny left buffer, less right */
  }
  /* Dark mode board bg */
  body.dark-mode #screen-game .main,
  body.dark-mode #screen-game .board-wrap {
    background: var(--bg) !important;
  }
  /* Dark mode mobile panels */
  body.dark-mode .mobile-extra-panel {
    background: var(--surface) !important;
    color: var(--text) !important;
  }
  body.dark-mode .mobile-dock {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
  }
  body.dark-mode .mobile-dock-actions .btn-sm {
    background: var(--surface2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   BOARD CENTERING + CHAOS BAR SPACE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Board wrap: center the board, add chaos bar space at top */
  #screen-game .board-wrap {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 8px 4px 4px 4px !important; /* top space for chaos bar */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #screen-game .board {
    flex-shrink: 0 !important;
    margin: 0 auto !important;
  }

  /* Chaos abilities dock - sits above board inside board-wrap area */
  #chaos-abilities-dock {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 4px 4px 0;
  }

  /* Board zoomed - hide chaos bar */
  body.board-zoomed #chaos-abilities-dock {
    display: none !important;
  }

  /* Dark mode - game screen dropdowns */
  body.dark-mode #game-menu-dropdown {
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  body.dark-mode #game-menu-dropdown .btn-sm {
    color: var(--text) !important;
    background: transparent !important;
  }
  body.dark-mode #game-menu-dropdown .btn-sm:hover {
    background: var(--surface2) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   BOARD — bigger letter font, chaos bar above board
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Bigger cell letters on mobile - don't change tile size */
  #screen-game .cell.placed,
  #screen-game .cell.locked {
    font-size: 18px !important;
    font-weight: 800 !important;
  }
  #screen-game .cell .lp { font-size: 7px !important; }

  /* Chaos abilities bar is now in the chaos panel — no extra .main override needed */

  /* Chaos bar - sticky at top of main, above board */
  #chaos-abilities-bar-mobile {
    order: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    padding: 4px 6px !important;
    background: var(--bg) !important;
    z-index: 5 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Board wrap fills remaining space */
  #screen-game .board-wrap {
    order: 1 !important;
    flex: 1 !important;
    padding: 3px 6px 3px 5px !important;
  }
}

/* ── Reactions in settings panel — compact single-row scroll ── */
@media (max-width: 768px) {
  #ebar-settings { scrollbar-width: none; }
  #ebar-settings::-webkit-scrollbar { display: none; }
  #ebar-settings button {
    font-size: 22px !important;
    width: 40px !important;
    height: 36px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    border: 1.5px solid #ddd !important;
    background: #f4f2ed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.dark-mode #ebar-settings button {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE READABILITY — FONT SIZE BUMPS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Body base */
  body { font-size: 15px !important; }

  /* Cards and sections */
  .card h2 { font-size: 16px !important; }
  .card p, .card .hint { font-size: 14px !important; }
  .card label { font-size: 13px !important; }

  /* Game list */
  .gli-left .vs   { font-size: 16px !important; font-weight: 700 !important; }
  .gli-left .meta { font-size: 13px !important; }
  .badge          { font-size: 13px !important; }
  .badge.your-turn { font-size: 13px !important; font-weight: 800 !important; }

  /* Lobby collapsible headers */
  .mobile-collapsible-card > div:first-child span:first-child { font-size: 16px !important; }

  /* Settings panel */
  .mobile-extra-panel strong { font-size: 17px !important; }
  .mobile-extra-panel .btn-sm,
  .mobile-extra-panel .btn-secondary { font-size: 14px !important; min-height: 42px; }

  /* Word preview */
  .mobile-wp, #wp-mobile { font-size: 13px !important; padding: 4px 10px !important; }
  #recent-log-line { font-size: 12px !important; }

  /* Auth / login screen */
  .logo { font-size: 32px !important; }
  .auth-wrap .card p, .auth-wrap .card label { font-size: 14px !important; }
  .auth-wrap input { font-size: 16px !important; } /* prevents iOS zoom */

  /* Footer */
  footer { font-size: 13px !important; }
  footer a { font-size: 13px !important; }

  /* Nav XP meta */
  .nav-xp-meta { font-size: 12px !important; }

  /* Profile game list */
  .stats-tab { font-size: 14px !important; padding: 8px 14px !important; }

  /* Info modal */
  .info-tab-content p,
  .info-tab-content li { font-size: 14px !important; line-height: 1.6 !important; }

  /* Season card */
  #season-card { font-size: 14px !important; }
}

/* ── Lobby column order on mobile — New Game below Community ── */
@media (max-width: 768px) {
  .lobby-wrap { display: flex; flex-direction: column; }
  /* Right col (community + your games) comes first on mobile */
  #lobby-col-games { order: 1; }
  /* Left col (new game + mini games) comes after */
  .lobby-wrap > .lobby-col:first-child { order: 2; }
  /* New game card — tighten top margin when below community */
  #new-game-card { margin-top: 0; }
}

/* ── Achievements: in left col on desktop, shown below Your Games on mobile via order ── */
@media (max-width: 768px) {
  #achievements-card {
    order: 10; /* shows at end of right column on mobile */
  }
  /* On mobile the achievements card stays in left col but CSS order moves it visually */
  /* Actually since it IS in left col, it'll naturally appear after new-game/mini-games */
  /* which is correct: Community > Your Games > (right col end), then New Game > Mini Games > Achievements */
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE LOBBY — 2-COLUMN GRID LAYOUT
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Mobile lobby layout — flex column, pairs share a row ── */
  .lobby-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  /* Both lobby-col wrappers become flex columns, stacked */
  .lobby-wrap > .lobby-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    order: unset !important;
  }

  /* Column ordering on mobile */
  #lobby-col-left { order: 1; }   /* Season, achievements, mini-games, new-game */
  #lobby-col-games { order: 0; }  /* Community, your-games — shown FIRST */

  /* ── Pair rows: Mini Games | New Game and Community | Achievements ── */
  /* Wrap these in a flex row using a pseudo-row wrapper via JS */
  /* Instead: use absolute positioning trick — put them in same row via CSS */

  /* The pair-row technique: cards with the same 'data-row' sit side by side */
  /* We use a wrapper div approach — add .lobby-pair-row wrapper in mobile via CSS flex */

  /* Season — full width */
  #season-card { width: 100%; }

  /* Pair: Mini Games + New Game */
  /* These are in lobby-col-left, we make them display side by side */
  #lobby-col-left {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }
  /* Season and achievements span full width in the grid */
  #lobby-col-left > #season-card,
  #lobby-col-left > #achievements-card,
  #lobby-col-left > #mini-games-card {
    grid-column: 1 / -1 !important;
  }
  /* Mini games and new game share a row */
  #lobby-col-left > #mini-games-card-mobile { grid-column: span 1; }
  #lobby-col-left > #new-game-card { grid-column: span 1; }

  /* When either expands, go full width */
  #lobby-col-left > #mini-games-card-mobile.card-expanded,
  #lobby-col-left > #new-game-card.card-expanded {
    grid-column: 1 / -1 !important;
  }

  /* Right col: Community + Achievements in a 2-col grid */
  #lobby-col-games {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }
  /* Community and Achievements share a row */
  #lobby-col-games > #community-card { grid-column: span 1; }
  #lobby-col-games > #achievements-card { grid-column: span 1; }
  /* Your Games full width */
  #lobby-col-games > #your-games-card { grid-column: 1 / -1 !important; }

  /* When expanded, go full width */
  #lobby-col-games > #community-card.card-expanded,
  #lobby-col-games > #achievements-card.card-expanded {
    grid-column: 1 / -1 !important;
  }

  /* Collapsed card headers — round all corners when body hidden */
  .mobile-collapsible-card:not(.card-expanded) > div:first-child {
    margin-bottom: 0 !important;
    border-radius: 12px !important;
  }

  /* Chevrons always visible on mobile */
  .lobby-wrap .mobile-collapsible-card > div:first-child span[id$="-chevron"] {
    display: inline !important;
    pointer-events: auto !important;
  }
  .lobby-wrap .mobile-collapsible-card > div:first-child {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE LOBBY — NEW GRID LAYOUT
   
   Desktop: existing 2-col layout unchanged
   Mobile: single column, each "row" is a 2-col grid where specified
   
   Layout:
   [  Season  ]          — full width
   [ Start ]  [ Play ]   — 2 equal tiles (headers tap to expand)
   [ New Game ] [ Mini ] — content under headers (expand full-width)
   [ Community ] [ Quest ] — 2 equal
   [ Your Games ]         — full width
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Lobby wrap: standard 2-col stacked vertically on mobile ── */
  .lobby-wrap {
    display: block !important;     /* simple block — no flex tricks */
    padding: 10px 10px 0 !important;
  }
  /* Each col: 2-column grid for pair rows */
  #lobby-col-left {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  #lobby-col-games {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── 2. LEFT COL: Season full-width, then New Game | Mini Games side by side ── */
  #lobby-col-left > #season-card        { grid-column: 1 / -1; margin-bottom: 0; }
  #lobby-col-left > #new-game-card      { grid-column: span 1; }
  #lobby-col-left > #mini-games-card-mobile { grid-column: span 1; margin: 0; }
  /* Achievements full width below */
  #lobby-col-left > #achievements-card  { grid-column: 1 / -1; }
  /* Mini games desktop scores — hidden on mobile */
  #lobby-col-left > #mini-games-card    { display: none !important; }

  /* Expand to full width when opened */
  #new-game-card.card-expanded,
  #mini-games-card-mobile.card-expanded { grid-column: 1 / -1 !important; }

  /* ── 3. RIGHT COL: Community | Achievements side by side, Your Games full width ── */
  /* Wait — achievements is in left col. Right col: just Community + Your Games */
  #lobby-col-games > #community-card    { grid-column: span 1; }
  #lobby-col-games > #your-games-card   { grid-column: 1 / -1; }
  #community-card.card-expanded         { grid-column: 1 / -1 !important; }

  /* Mini-games desktop card — hidden on mobile */
  #mini-games-card { display: none !important; }

  /* ── Collapsed headers: full border-radius, tight ── */
  .mobile-collapsible-card:not(.card-expanded) > div:first-child {
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
  }
  /* When collapsed, no bottom padding on card */
  .mobile-collapsible-card:not(.card-expanded) {
    padding-bottom: 0 !important;
  }

  /* Keep chevrons and pointer-events working on mobile */
  .mobile-collapsible-card > div:first-child {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  .mobile-collapsible-card > div:first-child span[id$="-chevron"] {
    display: inline !important;
  }

  /* ── Lobby bottom nav bar ── */
  .lobby-nav-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface2);   /* slightly different from page bg */
    border-top: 2px solid var(--border);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  }
  body.dark-mode .lobby-nav-bar {
    background: #1e1b2e;            /* darker than dark bg */
    border-top-color: #3a3560;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.35);
  }
  .lnb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: var(--text);            /* HIGH CONTRAST default */
    -webkit-tap-highlight-color: rgba(83,74,183,0.15);
  }
  .lnb-btn span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.2px;
  }
  .lnb-btn.lnb-active span {
    color: var(--purple) !important;
    font-weight: 800;
  }
  .lnb-btn.lnb-active { color: var(--purple) !important; }
  .lnb-btn:active { background: rgba(83,74,183,0.1); }

  /* Lobby content — padding-bottom so content clears fixed nav bar */
  #screen-lobby .lobby-wrap,
  #screen-lobby #mobile-lobby-sections { padding-bottom: 76px; }
}

/* Lobby nav bar hidden on desktop */
@media (min-width: 769px) {
  .lobby-nav-bar { display: none !important; }
}

/* ── Lobby nav bar refinements ── */
@media (max-width: 768px) {
  /* Games BW text icon — bold and readable */
  #lnb-games { font-weight: 900; color: var(--text) !important; }
  #lnb-games span:first-child {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    letter-spacing: -1px;
    line-height: 1;
  }
  #lnb-games.lnb-active span:first-child { color: var(--purple) !important; }

  /* Active state — purple icon + label */
  .lnb-btn.lnb-active { color: var(--purple) !important; }
  .lnb-btn.lnb-active span { color: var(--purple) !important; }

  /* Mobile bottom bar only in game screen */
  .mobile-bottom-bar { display: none; }
  #screen-game .mobile-bottom-bar { display: flex !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE LOBBY — FULL-WIDTH SECTIONS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide desktop cols; show mobile sections */
  #lobby-col-left, #lobby-col-games { display: none !important; }
  #mobile-lobby-sections { display: block !important; padding: 10px 10px 80px; } /* 80px clears fixed nav bar */

  /* Each section */
  .mlb-section {
    background: var(--surface);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  /* Section header */
  .mlb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-radius: 14px 14px 0 0;
  }

  /* Section body */
  .mlb-body {
    padding: 14px 16px 16px;
  }

  /* BW text mark in nav */
  .lnb-bw {
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: -1px;
    line-height: 1;
    color: inherit;
  }
  #lnb-games.lnb-active .lnb-bw { color: var(--purple) !important; }

  /* Dark mode header tints — all purple headers get consistent dark purple + white text */
  body.dark-mode #mlb-games .mlb-header,
  body.dark-mode #mlb-new .mlb-header,
  body.dark-mode #mlb-minis .mlb-header    { background: rgba(60,52,137,0.55) !important; }
  body.dark-mode #mlb-games .mlb-header span,
  body.dark-mode #mlb-new .mlb-header span,
  body.dark-mode #mlb-minis .mlb-header span { color: #fff !important; }
  body.dark-mode #mlb-community .mlb-header,
  body.dark-mode #mlb-open-games .mlb-header { background: rgba(180,100,0,0.4) !important; }
  body.dark-mode #mlb-community .mlb-header span,
  body.dark-mode #mlb-open-games .mlb-header span { color: #ffd580 !important; }
  body.dark-mode #mlb-achievements .mlb-header { background: rgba(60,52,137,0.55) !important; }
  body.dark-mode #mlb-achievements .mlb-header span { color: #fff !important; }

  /* Light mode: community + open-games headers white text to match purple headers */
  /* dark mode handled above */
}

/* Desktop: hide mobile lobby sections */
@media (min-width: 769px) {
  #mobile-lobby-sections { display: none !important; }
}

@media (max-width: 768px) {
  /* Shuffle and Recall: purple border, readable on light background */
  #screen-game .mobile-dock-actions .btn-shuffle,
  #screen-game .mobile-dock-actions .btn-recall {
    color: var(--text) !important;
    background: var(--surface2) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1.5px solid #534AB7 !important;
    border-color: #534AB7 !important;
  }
  body.dark-mode #screen-game .mobile-dock-actions .btn-shuffle,
  body.dark-mode #screen-game .mobile-dock-actions .btn-recall {
    border-color: #7B74D4 !important;
  }
}

/* ── Lobby footer: always below content, clears mobile nav bar ── */
#screen-lobby > footer {
  display: block;
  flex-shrink: 0;
  padding-bottom: 84px;
}

/* ── Lobby footer: clearance above mobile nav bar ── */
@media (max-width: 768px) {
  .lobby-wrap > footer {
    padding-bottom: 80px !important;
  }
}