/* On-demand overlays: scoreboard, death recap, settings dialogs. Tokens only. */

/* Room panel: invite link and bot takeover (clickable, unlike the hold-Tab board) */
.room-panel {
  position: absolute;
  left: 50%;
  top: 128px;
  transform: translateX(-50%);
  zoom: var(--ui-scale);
  width: 860px;
  max-width: calc(100vw / var(--ui-scale) - 32px);
  max-height: calc(100vh / var(--ui-scale) - 148px);
  overflow: auto;
  z-index: var(--z-overlay);
  padding: var(--s4) var(--s5);
}
.room-head { gap: var(--s3); align-items: center; }
.room-note { margin: var(--s2) 0 var(--s3); }
.room-teams { gap: var(--s5); align-items: flex-start; }
.room-team { flex: 1; gap: var(--s2); min-width: 0; }
.room-team .teamlabel { padding: var(--s1) 0; }
.room-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border: 1px solid var(--line); background: var(--bg-1); }
.room-row.you { border-color: var(--you); background: var(--you-soft); }
.room-row .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.room-row .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Scoreboard (hold Tab) */
.board {
  position: absolute;
  left: 50%;
  top: 128px;
  transform: translateX(-50%);
  zoom: var(--ui-scale);
  width: 1320px;
  max-width: calc(100vw / var(--ui-scale) - 32px);
  max-height: calc(100vh / var(--ui-scale) - 148px);
  overflow: auto;
  z-index: var(--z-overlay);
  pointer-events: none; /* clicks go through to the game while Tab is held */
}
.board-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--s3) var(--s5); border-bottom: 2px solid var(--line); }
.board-head .side { gap: var(--s4); }
.board-head .side.r { justify-content: flex-end; }
.objs { gap: var(--s6); justify-content: center; padding: var(--s2); border-bottom: 2px solid var(--line); font-size: var(--t-s); }
.prow, .colhead { display: grid; grid-template-columns: 72px 260px 384px 140px 80px 1fr; align-items: center; gap: var(--s4); padding: var(--s2) var(--s5); }
.prow { border-bottom: 1px solid var(--line); }
.prow.you { background: var(--you-soft); box-shadow: inset 4px 0 0 var(--you); }
.prow .items { display: flex; gap: var(--s1); }
.prow .star { margin-left: var(--s2); image-rendering: pixelated; }
.prow .bounty { margin-left: var(--s1); color: var(--you); border-color: var(--you-deep); }
.prow .bounty svg { width: 14px; height: 14px; vertical-align: -2px; }
.colhead { font-size: var(--t-xs); color: var(--text-dim); padding-top: var(--s1); padding-bottom: var(--s1); }
.teamlabel { padding: var(--s1) var(--s5); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.12em; }

/* Death recap — left side, stays visible beside the shop */
.recap { width: 100%; }
.recap .sum { padding: var(--s3) var(--s4); gap: var(--s2); border-bottom: 2px solid var(--line); }
.split { display: flex; height: 14px; border: 1px solid var(--bg-0); background: var(--bg-2); }
.split.thin { height: 8px; }
.split i { display: block; height: 100%; }
.split .p { background: var(--physical); }
.split .m { background: var(--magic); }
.recap .src { display: grid; grid-template-columns: 52px 1fr; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.recap .src.killer { box-shadow: inset 4px 0 0 var(--enemy); background: var(--enemy-soft); }
.srcicon { display: grid; place-items: center; color: var(--text-dim); }
.killer-chip { color: var(--enemy); border-color: var(--enemy); }
.recapfoot { padding: var(--s3) var(--s4); }

/* Settings and play-mode prompt (native dialogs from settings.ts) */
dialog.game-settings {
  padding: 0;
  color: var(--text);
  width: min(920px, 94vw);
  max-height: 90vh;
  overflow: auto;
  zoom: var(--ui-scale);
}
dialog.game-settings::backdrop { background: var(--scrim); }
.game-settings .tabs { padding: 0 var(--s4); margin-top: var(--s3); }
.setpane { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.setrow { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.setrow select { color-scheme: dark; color: var(--text); background: var(--bg-1); border: 1px solid var(--line-strong); padding: var(--s2); min-width: 150px; }
.setrow small { display: block; color: var(--text-dim); font-size: var(--t-xs); margin-top: 2px; }
.toggle { appearance: none; width: 52px; height: 28px; background: var(--bg-3); border: 2px solid var(--line-strong); border-radius: 14px; position: relative; cursor: pointer; margin: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: left 0.12s; }
.toggle:checked { background: var(--you-deep); border-color: var(--you); }
.toggle:checked::after { left: 27px; background: var(--ink); }
.rangebox { display: flex; align-items: center; gap: var(--s3); }
.rangebox input { width: 220px; accent-color: var(--you); }
.rangebox output { min-width: 88px; font-weight: 700; font-variant-numeric: tabular-nums; }
.section-label { font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; margin: var(--s4) 0 var(--s1); }
.refs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
.ref { display: flex; gap: var(--s3); align-items: center; font-size: var(--t-s); }
.binds { display: flex; flex-direction: column; }
.bind { display: grid; grid-template-columns: 1fr 260px 110px; align-items: center; gap: var(--s4); padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.keybtn { font-weight: 700; font-size: var(--t-m); background: var(--bg-0); border: 2px solid var(--line-strong); padding: var(--s2); text-align: center; color: var(--text); }
.keybtn:is(:hover, .virtual-hover) { border-color: var(--text-dim); }
.keybtn.capture { border-color: var(--you); color: var(--you); }
.conflict { margin: var(--s2) 0; padding: var(--s3) var(--s4); border: 2px solid var(--you); background: var(--you-soft); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.saved { color: var(--ready); font-size: var(--t-s); font-family: var(--font-body); }
.setbuttons { gap: var(--s3); padding: var(--s3) 0; }
.setfoot { padding: var(--s3) var(--s5); border-top: 2px solid var(--line); }
dialog.play-controls-prompt { width: min(560px, 94vw); padding: var(--s5); display: none; }
dialog.play-controls-prompt[open] { display: flex; flex-direction: column; gap: var(--s3); }