/* Browser runtime: preserve browser-native behavior across desktop/mobile. */

html[data-runtime="browser"] body #installHintBar,
body.runtime-browser #installHintBar {
  display: grid;
}

html[data-runtime="browser"][data-route-class="route-room-wait"] body #waitingPanel,
html[data-runtime="browser"][data-route-class="route-room-match"] body #gamePanel,
body.runtime-browser.route-room-wait #waitingPanel,
body.runtime-browser.route-room-match #gamePanel {
  border-color: rgba(224, 195, 122, 0.28);
}

@media (min-width: 1101px) {
  body.runtime-browser.room-waiting .room-grid-main {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 360px);
    grid-template-areas:
      "players waiting info"
      "players chat info"
      "players log info";
    gap: 12px;
  }

  body.runtime-browser.room-waiting #roomChatPanel,
  body.runtime-browser.room-playing #roomChatPanel {
    position: static;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    max-height: none;
  }

  body.runtime-browser.room-waiting .chat-backdrop,
  body.runtime-browser.room-playing .chat-backdrop {
    display: none;
  }
}

@media (max-width: 1100px) {
  body.runtime-browser main {
    overflow: auto;
  }

  body.runtime-browser.room-playing #roomScreen,
  body.runtime-browser.room-waiting #roomScreen {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  body.runtime-browser.room-playing .room-grid-main,
  body.runtime-browser.room-waiting .room-grid-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
  }

  body.runtime-browser.room-playing #actionPanel,
  body.runtime-browser.room-waiting #roomPlayersPanel .player-controls {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    transform: none;
    margin: 0;
  }

  body.runtime-browser.room-playing #actionPanel {
    display: block;
    border-radius: 16px;
  }

  body.runtime-browser.room-waiting #roomChatPanel {
    position: static;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    max-height: 42vh;
    display: flex;
  }

  body.runtime-browser.room-waiting .chat-backdrop {
    display: none;
  }

  body.runtime-browser.room-waiting #toggleRoomChatBtn,
  body.runtime-browser.room-waiting #closeRoomChatBtn {
    display: none;
  }

  body.runtime-browser.room-playing.room-chat-open #actionPanel {
    display: block;
  }
}

@media (max-width: 1100px) {
  body.runtime-browser.room-playing #roomScreen {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  body.runtime-browser.room-playing #gamePanel {
    --board-fit: min(92vw, 68dvh);
  }

  body.runtime-browser.room-playing #actionPanel {
    position: static !important;
    margin-bottom: 4px;
  }

  body.runtime-browser.room-playing #roomPlayersPanel {
    background: rgba(8, 16, 28, 0.88);
  }

  body.runtime-browser.room-playing #toggleRoomChatBtn,
  body.runtime-browser.room-playing #closeRoomChatBtn {
    display: inline-flex !important;
  }

  body.runtime-browser.room-playing #roomChatPanel {
    display: none !important;
    position: fixed !important;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: 58vh;
    z-index: 82;
  }

  body.runtime-browser.room-playing.room-chat-open #roomChatPanel {
    display: flex !important;
  }

  body.runtime-browser.room-playing.room-chat-open #actionPanel {
    display: none !important;
  }

  body.runtime-browser.room-playing.room-chat-open #toggleRoomChatBtn {
    visibility: hidden;
    pointer-events: none;
  }

  body.runtime-browser.room-playing .chat-backdrop {
    display: none;
  }

  body.runtime-browser.room-playing.room-chat-open .chat-backdrop {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  body.runtime-browser.room-playing #gamePanel {
    --board-fit: min(60vw, 560px, max(320px, calc(100dvh - 41rem))) !important;
  }
}

@media (min-width: 1101px) {
  body.runtime-browser.room-playing .room-grid-main {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(280px, 340px);
  }
}

@media (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  body.runtime-browser.device-mobile.room-playing #roomScreen {
    display: grid !important;
    grid-template-columns: minmax(260px, 296px) minmax(0, 1fr);
    grid-template-rows: auto auto !important;
    align-items: start;
    gap: 10px;
    overflow: hidden;
  }

  body.runtime-browser.device-mobile.room-playing .room-grid-main,
  body.runtime-browser.device-mobile.room-playing .room-grid-main > aside.left-col,
  body.runtime-browser.device-mobile.room-playing .room-grid-main > section.right-col {
    display: contents !important;
  }

  body.runtime-browser.device-mobile.room-playing #actionPanel {
    display: grid !important;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
  }

  body.runtime-browser.device-mobile.room-playing #roomInfoDock {
    display: grid !important;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  body.runtime-browser.device-mobile.room-playing #roomInfoDock > :not(.room-utility-row) {
    display: none !important;
  }

  body.runtime-browser.device-mobile.room-playing #roomInfoDock .room-utility-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  body.runtime-browser.device-mobile.room-playing #roomInfoDock .room-utility-row > .btn {
    min-width: 0;
    min-height: 42px;
  }

  body.runtime-browser.device-mobile.room-playing #toggleRoomChatBtn {
    display: inline-flex !important;
  }

  body.runtime-browser.device-mobile.room-playing #gamePanel {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body.runtime-browser.device-mobile.room-playing #gamePanel .board-frame {
    transform: translateY(-16px);
  }
}