/* Persistent HUD: game state and controls. Contextual help lives in tooltips. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.topbar,.live-match .topbar { position:relative; height:68px; flex:0 0 68px; padding:0 22px; gap:12px; }
.brand svg { width:26px; height:26px; }
.round-panel { position:absolute; left:50%; top:7px; transform:translateX(-50%); width:min(340px,32vw); }
.round-sequence { margin-bottom:4px; }
.round-step { padding:3px 9px; }
.phase-line { font-size:11px; }
#phase-timer { font-size:17px; }
.phase-track { margin-top:5px; }
.player-portrait img { width:32px; height:32px; }
.player-portrait small { margin-top:3px; }
#leave-match { background:transparent; border-color:transparent; padding:7px; color:#aebbb3; }
.connection-notice { position:fixed; z-index:15; top:76px; left:50%; transform:translateX(-50%); max-width:85%; padding:8px 14px; border:1px solid #bc9b6b70; border-radius:5px; background:#302d23f2; }
.connection-notice #match-status { margin:0; max-width:none; color:#e3ceaa; font-size:11px; }
.map-viewport,.live-match .map-viewport { inset:30px 20px 18px; }
.team-capacity { position:absolute; top:17px; left:24px; z-index:2; display:flex; align-items:center; gap:8px; color:#c8d3cd; font-size:20px; font-variant-numeric:tabular-nums; pointer-events:none; }
.team-capacity svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
.loot-tray { top:16px; right:22px; }
.monster-inspector { top:60px; left:22px; }
.current-turn { top:20px; right:22px; }
.selection-readout,.live-match .selection-readout { bottom:12px; left:22px; right:auto; min-height:0; }
.hud-notice { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:8; max-width:75%; padding:10px 16px; border:1px solid #c5ae7455; border-radius:5px; background:#202a27f5; color:#efe0bd; box-shadow:0 4px 18px #0003; font-size:12px; }
#shop-status { text-align:center; }
.shop { padding:0 28px 12px; }
.shop-toolbar { height:36px; }
.wallet { gap:6px; }
.wallet svg { width:22px; height:22px; }
#kamas-count { font-size:21px; }
.card-info { min-height:39px; padding-top:8px; padding-bottom:8px; }
.sold-card { box-shadow:inset 0 1px 10px #0002; }
.sold-card::before { display:none; }
@media (max-width:850px) {
  .topbar,.live-match .topbar { padding:0 16px; }
  .round-panel { left:42%; width:28vw; }
  .round-step { padding:3px 5px; }
  .map-viewport,.live-match .map-viewport { inset:30px 6px 18px; }
  body[data-phase=combat] .map-viewport { bottom:112px; }
  .team-capacity { left:16px; font-size:17px; }
  .monster-inspector { left:16px; }
  .current-turn { right:12px; top:16px; }
  .shop { padding:0 16px 10px; }
  .shop-toolbar { height:32px; }
}
@media (max-width:650px) {
  .topbar,.live-match .topbar { height:96px; flex-basis:96px; align-content:center; flex-wrap:wrap; gap:5px 10px; padding:7px 12px; }
  .brand svg { width:22px; height:22px; }
  .round-panel { position:static; transform:none; order:3; width:100%; display:flex; align-items:center; gap:14px; }
  .round-sequence { margin:0; gap:3px; }
  .phase-line { flex:1; }
  .phase-track { display:none; }
  .player-portrait { gap:4px; padding-right:5px; }
  .player-portrait img { width:28px; height:28px; }
  .player-portrait strong { font-size:9px; }
  .player-portrait small { font-size:8px; }
  .player-portrait i { display:none; }
  .connection-notice { top:103px; }
  .team-capacity { top:12px; left:12px; font-size:15px; }
  .team-capacity svg { width:20px; height:20px; }
  .loot-tray { top:10px; right:12px; }
  .monster-inspector { top:46px; left:12px; }
  .hud-notice { max-width:88%; width:max-content; font-size:11px; }
}