@media (max-width: 1024px) {
  .lobby-grid { grid-template-columns: 1fr 1fr; }
  .room-body { grid-template-columns: 1fr; }
  .game-layout { grid-template-columns: 1fr; }
  .chat-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 60vh; z-index: 120; border-radius: 20px 20px 0 0; transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); background: rgba(7,28,21,.97); border-color: rgba(212,175,55,.3); box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  .chat-panel.open { transform: translateY(0); }
  .chat-close, .chat-fab { display: inline-flex; }
  .chat-fab { position: relative; }
  .chat-fab .unread { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; border-radius: 999px; font-size: .68rem; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }
}

@media (max-width: 768px) {
  :root { --tile-w: 40px; --tile-h: 56px; }
  body { font-size: 14px; }
  .page { padding: 1.25rem 1rem 3rem; }
  .topbar { padding: .6rem .9rem; gap: .75rem; }
  .topnav { display: none; }
  .user-chip-name { display: none; }
  .brand-sub { display: none; }
  .lobby-grid { grid-template-columns: 1fr; }
  .lobby-head { flex-direction: column; align-items: flex-start; }
  .form-row { flex-direction: column; }
  .form .check { padding-top: 0; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-features { flex-direction: column; gap: .5rem; }
  .room-code-box b { font-size: 1.8rem; }
  .seats { min-height: 380px; grid-template-columns: 1fr 1.2fr 1fr; padding: .6rem; gap: .4rem; }
  .player-card { min-width: 0; padding: .5rem .6rem; font-size: .85rem; }
  .seat-left .player-card, .seat-right .player-card { min-width: 90px; }
  .table-logo { font-size: 1.5rem; }
  .data-table th, .data-table td { padding: .6rem .7rem; }

  /* Game: compact table */
  .game-top { padding: .4rem .6rem; gap: .5rem; }
  .game-info { gap: .6rem; font-size: .72rem; }
  .game-info #g-turn { display: none; }
  .game-layout { padding: .4rem; }
  .table { grid-template-columns: 78px 1fr 78px; grid-template-rows: 60px 1fr 50px; border-width: 5px; border-radius: 18px; padding: .35rem; }
  .seat-card { padding: .3rem .45rem; gap: .35rem; flex-direction: column; }
  .seat-card .avatar { width: 28px; height: 28px; font-size: .8rem; }
  .seat-card .name { max-width: 70px; font-size: .72rem; }
  .seat-card .sub { font-size: .62rem; }
  .opp-top { flex-direction: row; }
  .opp-top .seat-card { flex-direction: row; }
  .hidden-hand { display: none; }
  .opp-melds .tile { --tile-w: 16px; --tile-h: 22px; }
  .discards .tile { --tile-w: 18px; --tile-h: 26px; }
  .discards .tile .t-num, .discards .tile .t-hint { display: none; }
  .discards-top { margin-top: 44px; max-height: 26px; }
  .discards-left, .discards-right { max-width: 78px; }
  .discards-bottom { max-height: 54px; }
  .turn-banner { font-size: .95rem; }
  .turn-banner.mine { font-size: 1.15rem; }
  .timer { width: 120px; }
  .last-discard { min-height: 50px; }
  .last-discard .tile { --tile-w: 32px; --tile-h: 44px; }
  .me-info { font-size: .68rem; }
  .hand { gap: 3px; padding-top: 14px; }
  .hand .tile.selected { transform: translateY(-12px); }
  .hand .tile.selectable:hover { transform: none; }
  .actions .btn { min-width: 0; flex: 1 1 30%; padding: .6rem .5rem; font-size: .85rem; }
  .melds-row .tile { --tile-w: 22px; --tile-h: 31px; }
  .modal-card { padding: 1.25rem; border-radius: 16px; }
  .result-title { font-size: 1.5rem; }
  .toasts { left: 1rem; right: 1rem; bottom: 5rem; }
  .toast { max-width: none; }
}

@media (max-width: 420px) {
  :root { --tile-w: 34px; --tile-h: 48px; }
  .hand { gap: 2px; }
  .table { grid-template-columns: 64px 1fr 64px; }
  .discards-left, .discards-right { max-width: 64px; }
}

/* Landscape phones: give the table more vertical room */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --tile-w: 34px; --tile-h: 46px; }
  .game-top { padding: .2rem .6rem; }
  .table { grid-template-rows: 44px 1fr 36px; }
  .hand { padding-top: 8px; }
  .hand-area { padding: .25rem .5rem .35rem; gap: .25rem; }
  .actions { min-height: 36px; }
  .actions .btn { min-height: 36px; padding: .35rem .6rem; }
  .turn-banner { font-size: .85rem; }
  .last-discard { min-height: 40px; }
}

@media (hover: none) {
  .tile.selectable:hover { transform: none; }
  .btn:hover { transform: none; }
}