/* Shared chrome of every game page (tkm, dortbagla, xox): the way home and the phone layouts.
   Loaded after /style.css (and board.css on the board games). */

/* Home button. The shell's small grid link is replaced by the big one. */
.menu-top .home-link { display: none; }
.game-home {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #1a1204;
  text-decoration: none;
  background: linear-gradient(180deg, #ffe08a, #ffc53d 55%, #f0a41c);
  border: 1px solid rgba(255, 236, 170, 0.9);
  box-shadow: 0 6px 18px rgba(255, 170, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.game-home svg { flex-shrink: 0; }
.game-home:hover { filter: brightness(1.06); }
.game-home:active { transform: scale(0.96); }
.game-home:focus-visible { outline: 2px solid var(--me); outline-offset: 3px; }

.menu-top { width: 100%; justify-content: space-between; margin-bottom: 0; }
.menu-top .game-home-big { margin-right: auto; }

/* Lobby headers: same button, a little shorter. */
.game-home-head { min-height: 40px; padding: 6px 14px 6px 10px; font-size: 14px; }
.rooms-head .game-home-head { order: -1; }
.wait-head { align-items: center; justify-content: space-between; gap: 8px; }

/* During a match: small, top left under the HUD; the first tap arms it, the second leaves. */
.game-home-mini {
  position: absolute;
  z-index: 3;
  left: max(12px, env(safe-area-inset-left));
  top: calc(var(--top) + var(--hud-h, 64px) + 10px);
  min-height: 36px;
  min-width: 36px;
  padding: 6px;
  color: var(--text);
  background: rgba(16, 20, 44, 0.72);
  border: 1px solid var(--panel-border);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  opacity: 0.8;
}
.game-home-mini svg { width: 18px; height: 18px; color: var(--gold); }
.game-home-mini .game-home-text { display: none; }
.game-home-mini.armed {
  opacity: 1;
  padding: 6px 12px 6px 9px;
  color: #ffe1e5;
  background: rgba(120, 16, 36, 0.9);
  border-color: rgba(255, 120, 140, 0.7);
}
.game-home-mini.armed .game-home-text { display: inline; }
body.spectating .game-home-mini { opacity: 1; }

/* Result screen: the third, quiet way out. */
.game-home-over {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--panel-border);
  box-shadow: none;
  font-weight: 700;
  min-height: 48px;
}
.game-home-over svg { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .game-home { transition: none; }
}

/* Board games: the match button lives in the turn bar line. */
.game-home-mini.in-line { position: static; min-height: 28px; min-width: 28px; padding: 4px; opacity: 0.85; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.06); }
.game-home-mini.in-line.armed { padding: 4px 10px 4px 7px; }
.game-home-mini.in-line svg { width: 16px; height: 16px; }
.turn-line:has(.game-home-mini.armed) .turn-text { display: none; }

/* HUD chips: the staff word would collide with the score, so only its icon (or a dot for admin) shows. */
html .hud .role-pill.role-pill-sm { font-size: 0; gap: 0; padding: 2px; letter-spacing: 0; }
html .hud .role-pill.role-pill-sm.admin-pill { width: 9px; height: 9px; padding: 0; }
@media (min-width: 900px) {
  html .hud .role-pill.role-pill-sm { font-size: 9px; gap: 3px; padding: 1px 5px; letter-spacing: 0.06em; }
  html .hud .role-pill.role-pill-sm.admin-pill { width: auto; height: auto; padding: 1px 5px; }
}

/* Result: rematch and leave share a row, home gets its own below. */
.over-btns { flex-wrap: wrap; }
.over-btns .game-home-over { flex: 1 0 100%; }

/* Phones, match phases: the floating buttons (global chat, room chat, social) sit in one row above the
   game controls, icon only, so nothing covers the board or the picks. */
@media (max-width: 720px) {
  html body[data-phase="game"] {
    --fab-y: calc(max(16px, env(safe-area-inset-bottom)) + 124px);
    --fab-r: max(16px, env(safe-area-inset-right));
  }
  html body.board-game[data-phase="game"] { --fab-y: calc(max(16px, env(safe-area-inset-bottom)) + 52px); }
  html body[data-phase="game"] .gchat.collapsed,
  html body[data-phase="game"] .chat.collapsed,
  html body[data-phase="game"] .shell-dock-right { bottom: var(--fab-y); }
  html body[data-phase="game"] .shell-dock-right { height: auto; right: var(--fab-r); }
  html body[data-phase="game"] .chat.collapsed { top: auto; left: auto; right: var(--fab-r); width: auto; }
  html body[data-phase="game"]:has(.shell-dock-right .sc-dock-btn) .chat.collapsed { right: calc(var(--fab-r) + 50px); }
  html body[data-phase="game"] .gchat.collapsed { left: max(16px, env(safe-area-inset-left)); }
  html body[data-phase="game"] .gchat.collapsed .chat-title,
  html body[data-phase="game"] .chat.collapsed .chat-title { display: none; }
  html body[data-phase="game"] .gchat.collapsed .chat-toggle,
  html body[data-phase="game"] .chat.collapsed .chat-toggle { padding: 9px 10px; gap: 4px; }
  /* tkm: the emote row takes the left of that line, so global chat goes one row up. */
  html body:not(.board-game)[data-phase="game"] .gchat.collapsed { bottom: calc(var(--fab-y) + 46px); }
  html body:not(.board-game)[data-phase="game"] .emotes { right: auto; max-width: calc(100% - 140px); flex-wrap: wrap; }
  html body[data-phase="game"] .sc-dock-btn { height: 40px; }
}
@media (max-width: 720px) {
  /* The result sheet sits above the global chat and social buttons. */
  html body.board-game[data-phase="over"] .bg-over { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px); max-height: calc(100% - var(--top) - 120px); }
}
@media (max-width: 400px) {
  html body[data-phase="game"] .emote-btn { font-size: 12px; padding: 6px 7px; }
}

/* Lobby head on phones: the back arrow keeps only its icon and the title steps aside for the buttons. */
@media (max-width: 480px) {
  .rooms-head { flex-wrap: nowrap; gap: 8px; }
  .rooms-head .rooms-back { padding: 6px; }
  .rooms-head .rooms-back-text { display: none; }
  .rooms-head .rooms-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rooms-head .game-home-head { padding: 6px 12px 6px 9px; }
  .wait-head .wait-back { padding: 6px 10px 6px 4px; font-size: 14px; }
}

/* Phones held sideways (short landscape). Panels start under the account corner and keep 120 px free on
   each side for the floating chat and social buttons; the game menu splits into two scrolling columns. */
@media (max-height: 520px) and (orientation: landscape) {
  html body .menu.panel {
    top: calc(var(--top) + max(44px, var(--account-h, 44px)) + 8px);
    bottom: max(10px, env(safe-area-inset-bottom));
    max-height: none;
    width: min(680px, calc(100% - 240px));
    transform: translateX(-50%);
    animation-name: rooms-in;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    padding: 12px 14px;
    overflow: hidden;
  }
  html body .menu.panel > .menu-main,
  html body .menu.panel > .hub {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  html body .menu.panel > .menu-main { display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
  .menu .logo-icons, .menu .bg-logo-icon { display: none; }
  .menu .logo { font-size: 30px; line-height: 1.02; margin: 0; }
  .menu .logo br { display: none; }
  .menu .sub { margin: -4px 0 0; font-size: 13px; }
  .menu .btn.big { padding: 12px 18px; font-size: 17px; }
  .menu .game-home-big { min-height: 40px; }

  html body .rooms.panel {
    top: calc(var(--top) + max(44px, var(--account-h, 44px)) + 8px);
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(880px, calc(100% - 240px));
    padding: 12px 14px;
    gap: 8px;
  }
  .rooms-head .rooms-title { font-size: 20px; }

  html body .wait.panel,
  html body .over.panel:not(.bg-over) {
    width: min(540px, calc(100% - 340px));
    padding: 14px 18px;
    gap: 8px;
  }
  .wait .big-code { font-size: 40px; }
  .over h2 { font-size: 34px; }

  /* Match: the floating buttons stay clear of the picks row and the emote column. */
  html body[data-phase="game"] .shell-dock-right { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 64px); }
  html body[data-phase="game"] .gchat.collapsed .chat-title,
  html body[data-phase="game"] .chat.collapsed .chat-title { display: none; }
  html body[data-phase="game"] .gchat.collapsed .chat-toggle,
  html body[data-phase="game"] .chat.collapsed .chat-toggle { padding: 9px 10px; gap: 4px; }
  .hud { padding: 6px 12px; }
  .hud .score { font-size: 22px; }
  html body.board-game[data-phase="over"] .bg-over {
    top: calc(var(--top) + 60px);
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 56px);
    max-height: none;
    overflow-y: auto;
    padding: 12px 14px;
    gap: 6px;
  }
  html body.board-game[data-phase="over"] .bg-over h2 { font-size: 28px; }
  html body[data-phase="over"] .chat.collapsed { top: calc(var(--top) + 196px); bottom: auto; right: auto; left: max(16px, env(safe-area-inset-left)); }
  .game-home-mini:not(.in-line) { top: calc(var(--top) + var(--hud-h, 52px) + 6px); }
}

/* Emote art from /ui/emote-art.js: a small sticker in each button, the full sticker as the bubble. */
.emote-btn .emote-art { flex-shrink: 0; width: 26px; height: 26px; margin: -4px 0 -4px -3px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.emote-btn { justify-content: flex-start; }
.emote-btn kbd { margin-left: auto; }
.emote-bubble.has-art { padding: 0; background: none; border: 0; box-shadow: none; }
.emote-bubble.has-art .emote-art { display: block; width: 64px; height: 64px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
@media (max-width: 480px), (max-height: 520px) and (orientation: landscape) {
  html body .emote-btn { padding: 3px; border-radius: 12px; }
  html body .emote-btn .emote-art { width: 34px; height: 34px; margin: 0; }
  html body .emote-btn:has(.emote-art) .emote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}