/* ============================================================
   UNIFIED GAME HEADER  — shared across all games
   ============================================================ */

#game-header {
  background: #16213e;
  border-bottom: 1px solid #0f3460;
  position: sticky;
  top: 0;
  z-index: 90;
}

.gh-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

.gh-nav {
  border-bottom: 1px solid #0f346044;
  min-height: 36px;
}

.gh-status-row {
  min-height: 30px;
}

/* Back arrow */
.gh-back {
  color: #7ab8d4;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  padding: 2px 8px 3px;
  border: 1px solid #1e4a6a;
  border-radius: 5px;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  transition: background .15s;
}
.gh-back:hover { background: #1e4a6a; }

/* Round badge */
.gh-round {
  font-size: 12px;
  color: #8899aa;
  background: #0f3460;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Player chips */
.gh-players {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.gh-player {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  border: 1px solid var(--pc, #30363d);
  color: #c8d8e8;
  white-space: nowrap;
  transition: background .15s;
  cursor: default;
}

.gh-player.is-mine {
  box-shadow: 0 0 0 1.5px var(--pc, #27ae60);
}

.gh-start-marker { font-size: 9px; }

.gh-player-cur {
  font-size: 10px;
  color: var(--pc, #aaa);
}

.gh-player-vp {
  color: #e2b96a;
  font-size: 10px;
  margin-left: 2px;
}

.presence-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
  vertical-align: middle;
}
.presence-dot.online  { background: #4ade80; }
.presence-dot.offline { background: #4b5563; }

/* Burger button */
.gh-burger-btn {
  background: none;
  border: 1px solid #30363d;
  color: #8899aa;
  font-size: 16px;
  padding: 3px 9px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
}
.gh-burger-btn:hover { background: #21262d; color: #e6edf3; }

.gh-hint-dot {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 7px;
  color: #e2b96a;
  line-height: 1;
}

/* Burger dropdown */
.gh-burger-menu {
  position: fixed;
  background: #1a2233;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  z-index: 1000;
  min-width: 210px;
  overflow: hidden;
}

.gh-burger-menu button,
.gh-burger-menu a {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #21262d;
  color: #c9d1d9;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  font-family: inherit;
}
.gh-burger-menu button:hover,
.gh-burger-menu a:hover { background: #21262d; }
.gh-burger-menu button:last-child,
.gh-burger-menu a:last-child { border-bottom: none; }

.gh-menu-sep {
  height: 1px;
  background: #2a3a50;
  border: none;
  padding: 0;
  margin: 2px 0;
}

/* Status text */
.gh-status-text {
  font-size: 12px;
  color: #8899aa;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gh-status-text.is-my-turn {
  color: #27ae60;
  font-weight: 600;
  background: #0d2a1a;
  padding: 2px 10px;
  border-radius: 10px;
}

/* Action buttons in status row */
.gh-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Collapsible section headers */
.gh-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  background: #111927;
  border-bottom: 1px solid #0f3460;
  cursor: pointer;
  font-size: 11px;
  color: #5577aa;
  user-select: none;
}
.gh-section-toggle:hover { color: #7ab8d4; background: #131f30; }
.gh-section-toggle .gh-arr { transition: transform .2s; display: inline-block; }
.gh-section-toggle.collapsed .gh-arr { transform: rotate(-90deg); }
.gh-section-body { transition: max-height .25s ease; overflow: hidden; }

/* Tournament status bar */
.gh-tournament-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: #0c1a0c;
  border-bottom: 1px solid #1a3a1a;
  font-size: 11px;
  color: #8899aa;
  min-height: 28px;
  flex-wrap: wrap;
}

.gh-t-label {
  color: #e2b96a;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}

.gh-t-tables {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.gh-t-table {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #2a3a2a;
  cursor: pointer;
  text-decoration: none;
  color: #8899aa;
  white-space: nowrap;
  font-size: 11px;
  transition: background .15s;
}
.gh-t-table:hover { background: #1a2a1a; color: #c8d8e8; }
.gh-t-table.is-current { border-color: #4a7a9b; color: #c8d8e8; background: #0d1e2e; font-weight: 600; }
.gh-t-table.my-turn {
  border-color: #2ea043;
  color: #4ade80;
  background: #0d2a1a;
  font-weight: 600;
}

.gh-t-discord {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(114,137,218,0.45);
  color: #7289da;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: background .15s;
}
.gh-t-discord:hover { background: rgba(114,137,218,0.15); }

/* Mobile: fixed at bottom */
@media (max-width: 600px) {
  .gh-tournament-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    border-bottom: none;
    border-top: 1px solid #1a3a1a;
    background: #0a140a;
    padding: 5px 10px;
  }
}

/* Tournament toast (shown when your turn fires via WS) */
.gh-t-toast {
  position: fixed;
  bottom: 24px;
  right: 20px;
  background: #1a2233;
  border: 1px solid #2ea043;
  border-radius: 10px;
  padding: 10px 14px;
  z-index: 10000;
  min-width: 210px;
  max-width: 300px;
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
  animation: gh-toast-in .2s ease;
}
@keyframes gh-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gh-t-toast-title { font-size: 12px; color: #e2b96a; font-weight: 600; margin-bottom: 4px; }
.gh-t-toast-msg   { font-size: 13px; color: #e6edf3; margin-bottom: 10px; }
.gh-t-toast-btns  { display: flex; gap: 8px; align-items: center; }
.gh-t-toast-go    {
  padding: 5px 12px; background: #238636; border: 1px solid #2ea043;
  border-radius: 6px; color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.gh-t-toast-go:hover { background: #2ea043; }
.gh-t-toast-close {
  padding: 4px 8px; background: none; border: 1px solid #30363d;
  border-radius: 6px; color: #8899aa; font-size: 12px; cursor: pointer;
  margin-left: auto;
}
.gh-t-toast-close:hover { background: #21262d; color: #e6edf3; }

/* Mobile */
@media (max-width: 600px) {
  .gh-row { padding: 5px 8px; gap: 6px; }
  .gh-player { font-size: 10px; padding: 2px 6px; }
  .gh-player-vp { font-size: 9px; }
  .gh-burger-menu { right: 8px !important; }
  .gh-t-toast { bottom: 50px; right: 8px; left: 8px; max-width: none; }
}