/* Phone seats share one row; existing identity, clock and move logic stays. */
@media (max-width: 620px) {
  body.view-game-view .game-table-shell { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto auto; column-gap: 6px; }
  body.view-game-view #player1-card.room-player-slot { grid-column: 1; grid-row: 1; }
  body.view-game-view #player2-card.room-player-slot { grid-column: 2; grid-row: 1; }
  body.view-game-view .room-board-area { grid-column: 1 / -1; grid-row: 2; }
  body.view-game-view .room-turn-indicator { grid-column: 1 / -1; grid-row: 3; }
  html[data-theme] body.view-game-view .room-player-card {
    min-height: 0; padding: 6px;
    grid-template-columns: 34px minmax(0,1fr) auto;
    grid-template-rows: 17px 17px 24px 15px;
    grid-template-areas: "stone name name" "stone rank rank" "clock clock clock" "color foot captures";
    align-content: start; align-items: center; justify-items: start;
    gap: 2px 4px; border-radius: 7px; box-shadow: none !important;
  }
  html[data-theme] body.view-game-view .room-player-stone { width: 34px; height: 34px; box-shadow: none !important; }
  html[data-theme] body.view-game-view .room-player-name { min-width: 0; width: 100%; font-size: 12px; line-height: 17px; text-align: left; }
  html[data-theme] body.view-game-view .room-player-name .ai-sovereign-badge { --badge-width: 38px; flex-shrink: 0; }
  html[data-theme] body.view-game-view .room-player-rank { min-height: 0; font-size: 11px; line-height: 17px; gap: 3px; align-items: center; }
  html[data-theme] body.view-game-view .room-player-rank .membership-badge { padding: 1px 3px; font-size: 10px; }
  html[data-theme] body.view-game-view .room-player-card .seat-clock-card {
    display: flex; align-items: baseline; justify-content: flex-start;
    width: 100%; min-height: 0; height: 24px; margin: 0; padding: 0; gap: 6px;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  html[data-theme] body.view-game-view .room-player-card .seat-clock-card strong { font-size: 21px; line-height: 24px; }
  html[data-theme] body.view-game-view .room-player-card .seat-clock-card em { min-width: 0; margin: 0; font-size: 11px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-theme] body.view-game-view :is(.room-player-color,.room-player-foot,.room-captures) { min-width: 0; font-size: 11px; line-height: 15px; padding: 0; white-space: nowrap; justify-self: start; }
  html[data-theme] body.view-game-view .room-player-color { font-family: var(--font-sans,sans-serif); }
  html[data-theme] body.view-game-view .room-captures { justify-self: end; }
}

/* Only an already-docked touch confirmation is flattened; desktop popups stay. */
body.view-game-view .has-confirm-dock .board-touch-confirm-slot { padding-top: 6px; }
body.view-game-view #board-touch-confirm.docked {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: calc(100% - 4px) !important; max-width: calc(100% - 4px);
  min-height: 44px; padding: 5px 6px 5px 10px !important; border-radius: 6px !important; text-align: left;
}
body.view-game-view #board-touch-confirm.docked strong { display: inline; padding: 0 !important; font-size: 14px !important; white-space: nowrap; }
body.view-game-view #board-touch-confirm.docked strong::before { content: "落子 "; font-size: 12px; }
body.view-game-view #board-touch-confirm.docked > div { flex: 0 0 auto; gap: 8px !important; }
body.view-game-view #board-touch-confirm.docked button { position: relative; flex: 0 0 auto; height: 32px !important; min-height: 32px !important; min-width: 60px !important; padding: 0 14px !important; border-radius: 5px !important; font-size: 13px !important; }
body.view-game-view #board-touch-confirm.docked button::before { content: ""; position: absolute; inset: -6px 0; }

.mobile-room-actions, .mobile-room-turn { display: none; }
@media(max-width:620px) {
  body.room-mobile-firstscreen #navbar { height:44px; min-height:44px; }
  body.room-mobile-firstscreen #navbar .nav-btn { min-height:28px; padding:4px 6px; font-size:11px; }
  body.room-mobile-firstscreen #navbar .logo { width:90px; flex:0 1 90px; }
  body.room-mobile-firstscreen #nav-user .user-info { flex-wrap:nowrap; }
  body.room-mobile-firstscreen #game-view.active { min-height:0; height:auto; overflow:visible; }
  body.room-mobile-firstscreen .room-layout { height:auto; gap:0; }
  body.room-mobile-firstscreen .game-table-shell { height:var(--mobile-room-height); min-height:0; grid-template-rows:82px minmax(0,1fr) 68px; gap:5px 6px; padding:5px 4px 6px; }
  body.room-mobile-firstscreen #room-turn-indicator { display:none; }
  html[data-theme] body.room-mobile-firstscreen .room-player-card { height:82px; padding:4px 6px; grid-template-columns:30px minmax(0,1fr) auto; grid-template-rows:16px 15px 24px 13px; grid-template-areas:"stone name name" "stone rank rank" "clock clock turn" "foot foot captures"; gap:1px 3px; }
  html[data-theme] body.room-mobile-firstscreen .room-player-stone { width:30px; height:30px; }
  html[data-theme] body.room-mobile-firstscreen .room-player-color { display:none; }
  html[data-theme] body.room-mobile-firstscreen .room-player-card .seat-clock-card { gap:3px; }
  html[data-theme] body.room-mobile-firstscreen .room-player-card .seat-clock-card strong { font-size:20px; white-space:nowrap; }
  body.room-mobile-firstscreen .seat-clock-time::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; background:radial-gradient(circle at 30% 25%,#616761,#111); }
  body.room-mobile-firstscreen .white .seat-clock-time::before { background:radial-gradient(circle at 30% 25%,#fff,#dddace); border:1px solid #aaa; }
  body.room-mobile-firstscreen [data-mobile-phase="compact"] .seat-clock-phase { display:none; }
  html[data-theme] body.room-mobile-firstscreen :is(.room-player-foot,.room-captures) { font-size:11px; line-height:13px; }
  body.room-mobile-firstscreen .mobile-room-turn { display:block; grid-area:turn; font:11px/15px var(--font-sans,sans-serif); color:var(--ink2); white-space:nowrap; }
  body.room-mobile-firstscreen .mobile-room-turn.active { color:var(--ink); background:var(--paper3); padding:1px 3px; border-radius:3px; }
  body.room-mobile-firstscreen .room-board-area { height:100% !important; min-height:0 !important; padding:0 !important; display:flex !important; flex-direction:column; align-items:center; gap:5px !important; overflow:visible; }
  body.room-mobile-firstscreen #go-board { flex:0 0 auto; margin:auto 0; }
  body.room-mobile-firstscreen .room-board-area .board-toolbar { position:static !important; transform:none !important; margin:0 !important; flex:0 0 auto; padding:2px 4px; max-width:100%; }
  body.room-mobile-firstscreen .board-toolbar :is(button,select) { min-height:28px; font-size:11px; padding:3px 6px; }
  body.room-mobile-firstscreen .board-touch-mode-label { font-size:0; gap:0; }
  body.room-mobile-firstscreen .has-confirm-dock .board-touch-confirm-slot { padding-top:0; }
  body.room-mobile-firstscreen .mobile-room-actions { display:grid; grid-column:1/-1; grid-row:3; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  html[data-theme] body.room-mobile-firstscreen .mobile-room-actions :is(.room-action-btn,.room-tool-btn,#room-clear-dead-btn) { display:inline-flex !important; justify-content:center; align-items:center; min-height:0 !important; height:32px !important; margin:0; padding:2px 5px !important; width:100%; font-size:12px !important; }
  body.room-mobile-firstscreen .mobile-room-actions :is(.room-action-icon,.room-tool-icon) { display:none; }
  body.room-mobile-firstscreen .mobile-room-actions button>span { font-size:12px !important; }
  body.room-mobile-firstscreen .game-action-rail { min-height:0; padding:0; border:0; }
  body.room-mobile-firstscreen .game-action-rail :is(.room-panel-title,.room-primary-actions,#review-current-btn) { display:none; }
  body.room-mobile-firstscreen .game-action-rail:has(#analyze-panel[style*="display:none"]), body.room-mobile-firstscreen .game-action-rail:has(#analyze-panel[style*="display: none"]) { display:none; }
}