/* 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); }
.recap .last-hit-note { margin: 0; padding: var(--s2) var(--s4) 0; color: var(--text); }
.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 .row { align-items: flex-start; }
.recap .src .balance { text-wrap: balance; }
.recap .src .row > b { flex: 1; min-width: 0; }
.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); }
/* The blow landed by a minion or tower when a champion gets the kill: marked, but not in the killer's red (Grok, round 10). */
.recap .src.last-hit { box-shadow: inset 4px 0 0 var(--physical); }
.last-hit-chip { color: var(--physical); border-color: var(--physical); }
.recapfoot { padding: var(--s3) var(--s4); }

/* Settings and its leave-match prompt (native dialogs from settings.rs) */
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: rgb(6 12 22 / 38%); } /* the match stays watchable behind it (GPT-6.1 Sol, round 9) */
/* Out of a match nothing behind it needs watching, and Home beside it read as a second screen (client UI council
   round 0). The size stays the same. */
dialog.game-settings.out-of-match::backdrop { background: var(--scrim-strong); }
.game-settings .tabs { padding: 0 var(--s4); margin-top: var(--s3); }
/* In a match it is a warning, not help text (GPT-6.1 Sol, round 5). */
.game-settings .live-note { padding: 8px 32px 0; margin: 0; color: var(--physical); font-weight: 700; }
.game-settings .save-note { margin-right: var(--s3); font-family: var(--font-body); font-weight: 400; letter-spacing: normal; text-transform: none; }
.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; }
/* Options in a row, the lobby's lane picker in the dialog's colours: the chosen one gold (Tyler, 2026-10-27). */
.choice { display: flex; border: 2px solid var(--steel-line); background: var(--bg-0); border-radius: var(--radius); }
.choice label { position: relative; display: block; }
.choice label + label { border-left: 2px solid var(--steel-line); }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
.choice span { display: block; padding: var(--s2) var(--s3); font: 700 var(--t-s)/1.2 var(--font-body); color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.choice label:is(:hover, .virtual-hover) span { color: var(--text); background: var(--bg-2); }
.choice input:checked + span { color: var(--ink); background: linear-gradient(var(--you-light), var(--you)); }
.choice input:focus-visible + span { outline: 2px solid var(--you-light); outline-offset: -4px; }
.setrow small { display: block; color: var(--text-dim); font-size: var(--t-s); margin-top: 2px; }
/* A switch says its state in words as well as position (Opus, round 3: off read as an empty checkbox). */
.toggle { appearance: none; width: 72px; height: 32px; background: var(--bg-0); border: 2px solid var(--line-strong); border-radius: var(--radius); position: relative; cursor: pointer; margin: 0; }
/* One knob colour, left for Off, right for On (Opus, round 9: the knobs read backwards). */
.toggle::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: var(--radius); background: var(--text); transition: left 0.12s; }
.toggle::before { content: 'Off'; position: absolute; right: 8px; top: 50%; translate: 0 -50%; font: 700 var(--t-s)/1 var(--font-body); color: var(--text-dim); }
.toggle:checked { background: var(--you); border-color: var(--you-light); }
.toggle:checked::after { left: 44px; background: var(--text); box-shadow: 0 0 0 1px var(--ink); }
.toggle:checked::before { content: 'On'; right: auto; left: 8px; color: var(--ink); }
.rangebox { display: flex; align-items: center; gap: var(--s3); }
.rangebox input { appearance: none; width: 220px; height: 20px; margin: 0; background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 0 50% / 100% 6px; cursor: pointer; }
.rangebox input::-webkit-slider-thumb { appearance: none; width: 12px; height: 20px; border-radius: 0; background: var(--you); box-shadow: 0 0 0 2px var(--you-edge); }
.rangebox input::-moz-range-thumb { width: 12px; height: 20px; border: none; border-radius: 0; background: var(--you); box-shadow: 0 0 0 2px var(--you-edge); }
.rangebox input::-moz-range-track { height: 6px; background: var(--line-strong); }
.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: 16px 32px 20px; border-top: 2px solid var(--plate-edge); }
/* On the title both footer buttons are hidden: no empty bar. */
.setfoot:not(:has(button:not([hidden]))) { display: none; }
/* Leaving a match is the one action you cannot undo: red (UI council round 2). */
.setfoot [data-resume] { font-size: var(--t-m); padding: var(--s3) var(--s5); } /* the way back to the match, sized like one (GPT-6.1 Sol, round 10) */
.setfoot :is([data-leave], [data-leave-now]) { color: var(--enemy); }

/* Settings keep one size on every tab, and each tab scrolls inside it (Tyler, 2026-10-27: "every time I click on a new
   tab in settings, this window is a different size"; rounds 6 to 9 had sized it to each tab's rows). */
dialog.game-settings:not(.leave-prompt) { height: min(720px, 90vh); overflow: hidden; }
dialog.game-settings[open] { display: flex; flex-direction: column; }
.game-settings .setpane { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-bottom: 24px; }
:is(.game-settings .setpane, .shop-col.quick, .shop-col.detail-col, .shop-col.browse) { mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.game-settings .setpane[hidden] { display: none; }
.game-settings > :not(.setpane) { flex-shrink: 0; }
/* Settings is one dialog in the client and in a match (Tyler, 29 October 2026: "sometimes you have like big like
   texturized buttons, and sometimes they're flat buttons. Why isn't that consistent? ... it's different in the client
   than it is in game"): the accepted layout A look, the kit's feature frame and controls in place of the panel's. The
   left-click action is a row of steel buttons, a switch is the steel frame with its knob, a slider fills gold to its
   knob, and every action is a steel button. Only the backdrop differs. The outer size stays the same (border-box). */
dialog.game-settings { clip-path: none; border: 10px solid transparent; border-image: url('/c/9cd69333dc17ed5ade6bb46d5efcec31312af5d14fe544a36a658f159be82b62.png') 8 / 16px stretch; background: var(--panel-steel) padding-box; image-rendering: pixelated; box-shadow: 0 8px 24px var(--shadow); }
.game-settings .panel-title { padding: 22px 32px 6px; border: 0; font: 400 var(--t-xl-sm)/1.1 var(--font-head); letter-spacing: 2px; text-transform: uppercase; color: var(--you-light); }
.game-settings .tabs { margin: 8px 32px 0; padding: 0; }
.game-settings .setpane { padding: 6px 32px 24px; gap: 0; }
.game-settings .setrow { gap: 24px; padding: 18px 0; border-bottom: 2px solid var(--plate-edge); }
.game-settings .setrow b { font-size: var(--t-m); }
.game-settings .setrow small { margin-top: 4px; font-size: 15px; line-height: 1.35; }
.game-settings .choice { border: 0; background: none; gap: 0; }
.game-settings .choice label + label { border: 0; margin-left: -4px; }
.game-settings .choice span { padding: 7px 12px; border: 4px solid transparent; border-image: url('/c/21c428881f7c1c8e8af997a3b077a6db135f5fa9e4787d722abb9f29942ad5cd.png') 5 / 10px stretch; background: var(--face-steel) padding-box; image-rendering: pixelated; font-size: 15px; color: var(--text); }
.game-settings .choice label:is(:hover, .virtual-hover) span { border-image-source: url('/c/07193ecb182886b98126d5ebe6b4189811e17fbd0f8bc4cb2295069407ec45ca.png'); background: var(--face-steel-hover) padding-box; }
.game-settings .choice input:checked + span { border-image-source: url('/c/237b4ddb8b6a22cd95523b9185aecfac1bebc5a8cba46a3a7428d6a69a3fe737.png'); background: var(--face-steel) padding-box; color: var(--you-light); }
.game-settings .toggle { width: 92px; height: 38px; border: 4px solid transparent; border-image: url('/c/21c428881f7c1c8e8af997a3b077a6db135f5fa9e4787d722abb9f29942ad5cd.png') 5 / 10px stretch; background: var(--field) padding-box; image-rendering: pixelated; }
.game-settings .toggle::after { top: 5px; left: 4px; width: 20px; height: 20px; background: var(--line-strong); box-shadow: 0 0 0 2px var(--steel-dark); }
.game-settings .toggle::before { right: 12px; font-size: 15px; color: var(--text-dim); }
.game-settings .toggle:checked { border-image-source: url('/c/237b4ddb8b6a22cd95523b9185aecfac1bebc5a8cba46a3a7428d6a69a3fe737.png'); background: var(--field) padding-box; }
.game-settings .toggle:checked::after { left: 60px; background: var(--face-gold); box-shadow: 0 0 0 2px var(--steel-dark); }
.game-settings .toggle:checked::before { left: 12px; color: var(--you-light); }
.game-settings .rangebox { gap: 18px; }
/* The fill's width is --fill, which settings.rs sets from each slider's value. */
.game-settings .rangebox input { width: 260px; height: 28px; background: var(--face-gold) 2px 50% / calc(var(--fill, 0%) - 4px) 12px no-repeat, linear-gradient(var(--field), var(--field)) 2px 50% / calc(100% - 4px) 12px no-repeat, linear-gradient(var(--steel-line), var(--steel-line)) 0 50% / 100% 16px no-repeat; }
.game-settings .rangebox input::-webkit-slider-thumb { width: 20px; height: 28px; background: linear-gradient(#fff1b8, var(--you) 50%, var(--you-deep)); box-shadow: 0 0 0 2px var(--steel-dark); }
.game-settings .rangebox input::-moz-range-thumb { width: 20px; height: 28px; background: linear-gradient(#fff1b8, var(--you) 50%, var(--you-deep)); box-shadow: 0 0 0 2px var(--steel-dark); }
.game-settings .rangebox output { min-width: 64px; text-align: right; font-size: var(--t-m); }
.game-settings .bind { padding: 8px 0; border-bottom: 2px solid var(--plate-edge); }
.game-settings .keybtn { border: 4px solid transparent; border-image: url('/c/21c428881f7c1c8e8af997a3b077a6db135f5fa9e4787d722abb9f29942ad5cd.png') 5 / 10px stretch; background: var(--field) padding-box; image-rendering: pixelated; }
.game-settings .keybtn:is(:hover, .virtual-hover) { border-image-source: url('/c/07193ecb182886b98126d5ebe6b4189811e17fbd0f8bc4cb2295069407ec45ca.png'); }
.game-settings .keybtn.capture { border-image-source: url('/c/237b4ddb8b6a22cd95523b9185aecfac1bebc5a8cba46a3a7428d6a69a3fe737.png'); color: var(--you-light); }
.game-settings .section-label { margin: 24px 0 8px; font: 400 var(--t-s)/1 var(--font-head); letter-spacing: 2px; color: var(--trim); }
.game-settings .conflict { border: 2px solid var(--trim); background: var(--you-soft); }
/* A row of buttons sits 12px under what is above it, and its help line 8px under it or beside it: in a match the
   Display tab then fits above the footer instead of ending half under it in the fade (Ibara check, 29 October 2026). */
.game-settings .setbuttons { padding: 12px 0 0; }
.game-settings .setpane > p { margin: 8px 0 0; }
/* Leave match asks here first (settings/leave.rs): the same frame, sized to its question. */
dialog.leave-prompt { width: min(560px, 94vw); }
.leave-prompt > p { margin: 0; padding: 12px 32px 20px; }
.leave-prompt .setfoot { gap: 12px; }
/* Account conversations, a friend's profile and the notifications: in the client's party and friends column and under
   its bell (client.css), and in the lobby and results. The match HUD remains the only owner in a match. */
.friends-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .friends-header :is(h2, h3) { min-width: 0; margin: 0; font: 400 var(--t-m)/1.2 var(--font-head); letter-spacing: 1px; color: var(--you-light); overflow-wrap: anywhere; } .friends-header .btn { flex: none; }
/* Every chat in the client reads like the match chat (Tyler, 2026-10-29: "Make it bottom aligned and make it stick to
   the bottom"): its heading, the history filling the panel with the newest line at the bottom, scrolling above the
   field pinned to the panel's foot. A note lies over the history's top, over older lines rather than the newest, so
   nothing moves when a line arrives, is sent or is refused. Owner: social_chat.rs; the docked chat's place on Quick play is play.css's. */
.social-chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.social-chat-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.social-chat-head h3 { margin: 0; }
.social-chat-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.social-chat-log { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-wrap: anywhere; font-size: var(--t-s); scrollbar-width: thin; scrollbar-color: var(--text-dim) transparent; }
.social-chat-log > p { margin: auto 0 0; color: var(--text-faint); }
.social-chat-history { list-style: none; display: grid; gap: 4px; margin: auto 0 0; padding: 0; }
.social-chat-history:empty { display: none; }
.social-chat-history li { margin: 0; padding: 0; line-height: 1.35; }
/* The name and time stay on one line, and your own lines start where everyone's do (Ibara check, 29 October 2026: a
   wrapped own line stacked "Y / o / u" when results' .mine rule also styled it). */
.social-chat-meta { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 6px; white-space: nowrap; }
.social-chat-meta b { color: var(--you-light); }
.social-chat-history li.own .social-chat-meta b { color: var(--ally); }
.social-chat-meta .dim { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.social-chat-note { position: absolute; left: 0; right: 0; top: 0; z-index: 1; margin: 0; padding: 6px 8px; font-size: var(--t-xs); background: var(--scrim-strong); }
.social-chat-note[hidden] { display: none; }
.social-chat-composer { flex: none; display: flex; gap: 8px; margin: 0; }
.social-chat-composer .input { flex: 1; width: auto; min-width: 0; padding: 8px 10px; font-weight: 400; font-size: var(--t-s); background: var(--field); }
.social-chat-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.social-pane > .social-chat { height: 100%; }
.social-pane:has(> .social-chat) { overflow: hidden; }
.inbox-panel .social-chat { height: 360px; margin-top: 12px; }
/* The bell: its count once, as a badge on its corner, so it never moves the bar. */
.inbox-toggle { position: relative; pointer-events: auto; }
.unread-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--you); color: var(--ink); font: 700 var(--t-badge)/1 var(--font-body); box-shadow: 0 0 0 2px var(--steel-dark); }
.inbox-panel { position: absolute; right: 24px; top: 100%; max-height: calc(100vh / var(--ui-scale, 1) - 220px); width: min(380px, calc(100% - 24px)); overflow: hidden auto; pointer-events: auto; z-index: 4; padding: 16px; }
.inbox-list { list-style: none; margin: 0; padding: 4px; }
.inbox-item { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.inbox-item .friends-actions { flex-wrap: wrap; }

/* Notifications and the party and friends column in the lobby and results: a bell and a drawer, leaving the room's
   controls in their layout. */
.room-inbox { min-width: 0; max-width: 100%; }
.room-inbox .inbox-panel { position: fixed; right: 12px; z-index: 4; top: 66px; bottom: 16px; max-height: none; box-sizing: border-box; }
.room-inbox :is(button, input):focus-visible { outline: 3px solid var(--you-light); outline-offset: -3px; }
.room-social { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.room-social-drawer { position: fixed; top: 66px; right: 12px; bottom: 16px; width: var(--column-w); z-index: 4; display: flex; }
.room-social-drawer .social-column { flex: 1; box-shadow: -12px 0 30px var(--shadow); }
.lobby-top .invite, .resfoot { min-width: 0; max-width: 100%; flex-wrap: wrap; }

/* Match identity uses the worker's viewer-filtered decoration. */
.match-identity { display: block; width: min(100%, 150px); height: 22px; overflow: hidden; background-color: #101d30; background-position: center; background-size: cover; }
.match-identity-title { display: inline-block; padding: 2px 5px; color: #f6e1a4; background: #0a1222; font-size: 11px; }