/* Phone layout: one account action row and one page scroll for the lobby. */
@media (max-width:760px) {
  body:not(.in-game) .site-header {
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px 8px;
    padding:12px 0 14px;
    min-width:0;
  }
  body:not(.in-game) .site-header .logo {min-width:0;font-size:24px;white-space:nowrap}
  body:not(.in-game) .site-header .logo-mark {width:32px;height:32px;font-size:24px;margin-right:8px}
  body:not(.in-game) .site-header #connection.server-status {min-height:32px;padding:7px 8px;font-size:9px;letter-spacing:0}
  body:not(.in-game) .site-header .header-actions {
    display:grid;
    grid-template-columns:44px repeat(3,minmax(0,1fr));
    grid-column:1/-1;
    gap:8px;
    width:100%;
    min-width:0;
  }
  body:not(.in-game) .site-header .header-actions>button {
    width:100%;
    min-width:0;
    height:44px;
    min-height:44px;
    max-height:none;
    padding:0 6px;
    gap:5px;
    font-size:12px;
    white-space:nowrap;
    border-radius:12px;
  }
  body:not(.in-game) .site-header .header-actions .sound-toggle {width:44px;min-width:44px!important;padding:0!important}
  body:not(.in-game) .site-header .sound-toggle svg {width:21px;height:21px}
  body:not(.in-game) .site-header .sound-label {display:none}
  body:not(.in-game) .site-header #profileChip {max-width:none;margin-left:0;padding:0 6px;gap:4px}
  body:not(.in-game) .site-header #profileInitial,
  body:not(.in-game) .site-header .header-avatar {width:24px;height:24px;flex:none}
  body:not(.in-game) .site-header #profileName {min-width:0;font-size:11px}
  body:not(.in-game) .site-header #walletBtn {font-size:12px}
  body:not(.in-game) .site-header #coinBalance {min-width:0;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  body:not(.in-game):not(.has-session) .site-header #walletBtn,
  body:not(.in-game) .site-header #walletBtn:disabled {display:none!important}
  body:not(.in-game).has-session:not(.has-member) .site-header #profileChip,
  body:not(.in-game).has-session:not(.has-member) .site-header #walletBtn {grid-column:span 2;order:1}
  body:not(.in-game) .site-header #adminBtn {grid-column:1/-1;order:1}

  body:not(.in-game) .welcome-copy {padding:16px;border-radius:20px}
  body:not(.in-game) .welcome h1 {max-width:none;font-size:clamp(30px,8vw,38px);line-height:1.1;margin:8px 0}
  body:not(.in-game) .welcome-copy>p {max-width:none;font-size:13px;line-height:1.55;margin:10px 0 14px}
  body:not(.in-game) .hero-buttons {width:100%;max-width:none;margin-top:14px;gap:8px}
  body:not(.in-game) .hero-buttons button {min-width:0;min-height:44px;padding:10px 6px;font-size:12px}
  body:not(.in-game) .welcome-copy .badges {max-width:none;gap:5px;margin-top:12px;flex-wrap:wrap}
  body:not(.in-game) .welcome-copy .badges span {font-size:10px;padding:5px 7px}

  body:not(.in-game) .rooms-section {padding:14px;overflow:visible}
  body:not(.in-game) #roomList {max-height:none;overflow:visible;touch-action:pan-y pinch-zoom}
  body:not(.in-game) #roomList[data-view="cards"] {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body:not(.in-game) #roomList[data-view="cards"] .room-card {min-width:0;min-height:118px;padding:9px;gap:6px}
  body:not(.in-game) #roomList[data-view="cards"] h3 {min-width:0;overflow-wrap:anywhere}
  body:not(.in-game) #roomList[data-view] .room-card-bottom button {min-width:44px;min-height:44px}
  body:not(.in-game) .room-head-actions {gap:6px}
  body:not(.in-game) .room-head-actions .panel-view-toggle {width:44px;height:44px;min-height:44px}
  body:not(.in-game) .room-head-actions .code-join>summary {min-height:44px}
  body:not(.in-game) .online-card ul,
  body:not(.in-game) #weeklyRankingList {touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}

  /* Keep the legal links after the collection, including inside this flex column. */
  body:not(.in-game) .promotion-column {order:8;gap:8px}
  body:not(.in-game) .promotion-column #homePromotion {order:0}
  body:not(.in-game) .promotion-column .promotion-information {order:1}
  body:not(.in-game) main {gap:8px;padding-bottom:10px}
  body:not(.in-game) .dashboard-card,
  body:not(.in-game) .weekly-showcase .weekly-section,
  body:not(.in-game) .weekly-showcase .weekly-star,
  body:not(.in-game) .lobby-chat,
  body:not(.in-game) .online-card {padding:11px;border-radius:16px}
  body:not(.in-game) .section-head {margin-bottom:6px}
  body:not(.in-game) .section-head h2,
  body:not(.in-game) .lobby-panel-title {font-size:16px}
  body:not(.in-game) .welcome-copy {padding:14px}
  body:not(.in-game) .welcome h1 {font-size:clamp(27px,7.5vw,33px)}
  body:not(.in-game) .welcome-copy>p {margin:8px 0 10px}
  body:not(.in-game) .hero-buttons {margin-top:10px;padding-top:4px}
  body:not(.in-game) .welcome-copy .badges {margin-top:10px}
  body:not(.in-game) .lobby-chat {height:260px}
  body:not(.in-game) .online-card ul {max-height:240px}
  body:not(.in-game) .online-card li {min-height:48px}
  body:not(.in-game) .online-card .avatar {width:36px;height:36px;font-size:21px}
  body:not(.in-game) .weekly-showcase {gap:8px}
  body:not(.in-game) .weekly-showcase .star-player {grid-template-columns:88px minmax(0,1fr);gap:6px 16px}
  body:not(.in-game) .weekly-showcase .star-avatar {width:88px;height:88px}
  body:not(.in-game) .weekly-showcase .star-player strong {font-size:clamp(16px,4.5vw,19px)}
  body:not(.in-game) .weekly-showcase #galleryList .featured-drawing {grid-template-columns:88px minmax(0,1fr);grid-template-rows:104px auto;gap:8px}
  body:not(.in-game) .weekly-showcase #galleryList .drawing-preview {width:88px;height:88px;max-width:88px;max-height:88px}
  body:not(.in-game) #dailyAdButton:disabled {min-height:36px;padding:8px;font-size:12px}
  body:not(.in-game) .daily-bonus {grid-template-columns:18px minmax(0,1fr) auto;gap:6px;padding:7px}
  body:not(.in-game) .daily-bonus>.panel-icon {grid-row:1;width:18px;height:18px}
  body:not(.in-game) .daily-bonus>span {grid-column:2;grid-row:1;font-size:11px}
  body:not(.in-game) .daily-bonus strong {grid-column:3;grid-row:1;font-size:11px;white-space:nowrap}
  body:not(.in-game) .ranking-footnote {font-size:11px;line-height:1.4;margin:6px 0 0}
  body:not(.in-game) .promo-slide {grid-template-columns:minmax(0,1fr) 80px;gap:10px;margin-top:8px}
  body:not(.in-game) .promo-copy h2 {font-size:18px}
  body:not(.in-game) .promo-copy p {font-size:11px;line-height:1.4}
  body:not(.in-game) .promo-art,
  body:not(.in-game) .promo-art.product-frame,
  body:not(.in-game) .promo-art:has(.name-preview),
  body:not(.in-game) .promo-art.card-preview {width:80px;height:80px}
  body:not(.in-game) .promo-art .name-preview {font-size:16px}
  body:not(.in-game) .promo-controls {padding-top:0}
  body:not(.in-game) .promotion-information.site-information {padding:8px 2px;gap:6px;border:0;border-radius:0;background:transparent;box-shadow:none}
  body:not(.in-game) .promotion-information .information-nav {gap:2px 12px;font-size:11px;line-height:1.4}
  body:not(.in-game) .promotion-information .information-nav a {display:inline-flex;align-items:center;min-height:24px}
  body:not(.in-game) .promotion-information .information-preference {min-height:32px;padding:6px 10px;font-size:11px}
  body:not(.in-game) .promotion-information small {font-size:10px;line-height:1.4}
  body:not(.in-game) footer {gap:5px;padding:10px 0;font-size:10px;line-height:1.5}
}

@media (max-width:359px) {
  body:not(.in-game) .site-header .header-actions {gap:6px}
  body:not(.in-game) .site-header .header-actions>button {font-size:11px}
  body:not(.in-game) .site-header .logo {font-size:22px}
  body:not(.in-game) #roomList[data-view="cards"] {grid-template-columns:minmax(0,1fr)}
  body:not(.in-game) #roomList[data-view="cards"] .room-card {min-height:100px}
  body:not(.in-game) .rooms-section>.section-head {flex-wrap:wrap}
  body:not(.in-game) .room-head-actions {margin-left:auto}
}

@media (max-width:760px), (max-width:980px) and (max-height:520px) {
  body.in-game .game-layout>.players {max-height:100%;min-height:0;touch-action:pan-y pinch-zoom}
  body.in-game #players {touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
  /* The player dialog owns its scroll; its list does not clip or scroll twice. */
  body.in-game .room-players-dialog {overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom}
  body.in-game .room-players-dialog>.players {display:block!important;max-height:none;overflow:visible}
  body.in-game .room-players-dialog #players {max-height:none;overflow:visible}
}