.friends-scrim { position: fixed; inset: 0; z-index: var(--z-modal-scrim); }
.friends-dialog {
  position: fixed;
  z-index: var(--z-modal);
  
  inset: 40px 0 auto;
  margin-inline: auto;
  box-sizing: border-box;
  width: min(880px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 80px));
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--surface-overlay);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  box-shadow: var(--win-shadow);
  overflow: hidden;
}
.friends-dialog-head, .friends-me { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--step-3); padding: var(--step-3) var(--step-4); border-bottom: 1px solid var(--line-1); }
.friends-dialog-title { margin: 0; font: 700 var(--type-head) / 1.2 var(--font-display); letter-spacing: var(--track-display); }
.friends-dialog-tabs { display: flex; gap: var(--step-2); margin-right: auto; margin-left: var(--step-4); }
.friends-tabbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--step-2);
  min-height: var(--touch);
  padding: 0 var(--step-3);
  border: 1px solid transparent;
  border-radius: var(--round-1);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) { .friends-tabbtn:hover { color: var(--ink-1); background: var(--surface-1); } }
.friends-tabbtn.on { border-color: var(--line-2); background: var(--line-2); color: var(--ink-1); box-shadow: inset 0 -2px 0 var(--ink-1); }
.friends-tabbtn:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.friends-me { flex-wrap: wrap; }
.friends-me-label { font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.friends-me-handle { font-weight: 600; overflow-wrap: anywhere; }
.friends-copy { min-height: var(--touch); padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-1); background: none; color: var(--ink-1); font: inherit; cursor: pointer; }
@media (hover: hover) { .friends-copy:hover { border-color: var(--ink-3); background: var(--surface-1); } }
.friends-copy:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.friends-appear { margin-left: auto; display: grid; gap: var(--step-1); }
.friends-left { display: flex; flex-direction: column; gap: var(--step-3); min-height: 0; padding: var(--step-3) var(--step-3) var(--step-3) var(--step-4); border-right: 1px solid var(--line-1); }
.friends-left-list { flex: 1; min-height: 0; overflow-y: auto; }
.friends-list { margin: 0; padding: 0; list-style: none; }
.friends-left-foot { border-top: 1px solid var(--line-1); padding-top: var(--step-2); }
.friends-pick { display: flex; align-items: center; gap: var(--step-3); width: 100%; min-height: var(--touch); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.friends-pick:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.friends-row.is-selected { background: var(--surface-2); }
.friends-pane { min-height: 0; min-width: 0; overflow-y: auto; padding: var(--step-4); }
.friends-pane-body { display: grid; gap: var(--step-5); align-content: start; }
.friends-pane-head { display: flex; align-items: center; gap: var(--step-3); }

.friends-pane-name { margin: 0; font-size: var(--type-head); overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; color: var(--ink-1); }
.friends-pane-actions { margin-left: 0; }
.friends-since { margin: 0; color: var(--ink-2); font-size: var(--type-body); }
.friends-since:empty { display: none; }
.friends-games { display: grid; gap: var(--step-2); }
.friends-games-list { margin: 0; padding: 0; list-style: none; }
.friends-game-link { display: flex; flex: 1; align-items: center; gap: var(--step-3); min-height: var(--touch); min-width: 0; color: inherit; text-decoration: none; }
@media (hover: hover) { .friends-game-link:hover .friends-game-legend { text-decoration: underline; text-underline-offset: 3px; } }
.friends-game-link:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.friends-game-legend { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
@media (max-width: 720px) {
  .friends-dialog { inset: 0; margin-inline: 0; width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); }
  .friends-dialog[data-friends-view="list"] .friends-pane { display: none; }
  .friends-dialog[data-friends-view="pane"] .friends-left { display: none; }
  .friends-left { border-right: 0; padding-left: var(--step-4); }
  .friends-dialog-head { flex-wrap: wrap; }
  .friends-dialog-tabs { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(2, 1fr); margin-left: 0; }
  .friends-dialog-tabs > button { min-height: var(--touch); }
  .friends-appear { margin-left: 0; }
}


:root[data-compact] .friends-dialog { inset: 0; margin-inline: 0; width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
:root[data-compact] .friends-dialog[data-friends-view="list"] .friends-pane { display: none; }
:root[data-compact] .friends-dialog[data-friends-view="pane"] .friends-left { display: none; }
:root[data-compact] .friends-left { border-right: 0; padding-left: var(--step-4); }
:root[data-compact] .friends-left, :root[data-compact] .friends-pane { order: 1; }
:root[data-compact] .friends-me { order: 2; border-bottom: 0; border-top: 1px solid var(--line-1); }
:root[data-compact] .friends-done { order: 3; }
@media (min-width: 601px) {
  :root[data-compact] .friends-done, :root[data-input="touch"][data-compact] .friends-done { display: none; }
}


.friends-add { display: grid; gap: var(--step-2); }
.friends-label { font-size: var(--type-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.friends-add-row { display: flex; gap: var(--step-3); align-items: center; }
.friends-field {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  min-height: var(--touch);
  padding: 0 var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-1);
  color: var(--ink-1);
  font: var(--type-read) / 1.3 var(--mono);
}

.friends-search { flex: none; width: 100%; box-sizing: border-box; min-height: var(--touch); font-family: var(--font-ui); }
.friends-field::placeholder { color: var(--ink-3); }
.friends-field:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.friends-add .ui-btn { min-height: var(--touch); padding-inline: var(--step-5); }


.friends-section { display: grid; gap: var(--step-3); }
.friends-pane .friends-section + .friends-section { padding-top: var(--step-4); border-top: 1px solid var(--line-1); }
.friends-head { display: flex; align-items: baseline; gap: var(--step-3); }
.friends-count { font: 500 var(--type-label) / 1 var(--font-ui); letter-spacing: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.friends-none { margin: 0; font-size: var(--type-body); color: var(--ink-3); }

.friends-row { flex-wrap: wrap; row-gap: var(--step-2); }
.friends-who { display: grid; flex: 1 1 8rem; gap: 2px; min-width: 0; }
.friends-actions { display: inline-flex; flex-wrap: wrap; gap: var(--step-1); margin-left: auto; }

.friends-ask .friends-actions { flex-basis: 100%; margin-left: 0; padding-left: calc(36px + var(--step-3)); }
.friends-ring {
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: 3px;
  border-radius: 50%;
  background: var(--surface-ground);
  color: var(--ink-1);
  font-weight: 700;
  font-size: var(--type-read);
}
.friends-ring-none { box-shadow: 0 0 0 2px var(--line-2); color: var(--ink-2); }
.friends-ring-online { box-shadow: 0 0 0 2px var(--good); }
.friends-ring-in_game { box-shadow: 0 0 0 2px var(--good), 0 0 0 4px var(--surface-ground), 0 0 0 6px var(--good); }
.friends-ring-away { border: 2px dashed var(--ink-2); box-shadow: none; }
.friends-ring-offline { box-shadow: 0 0 0 1px var(--line-2); color: var(--ink-3); }
.friends-presence { font-size: var(--type-label); }
.friends-presence-online, .friends-presence-in_game { color: var(--good); }
.friends-presence-away { color: var(--ink-2); }
.friends-presence-offline { color: var(--ink-3); }
.friends-offline .ur-row-name { color: var(--ink-2); }


.friends-trouble { flex-wrap: wrap; align-items: center; }
.friends-trouble-text { flex: 1 1 14rem; }


.friends-me .friends-appear-says { font-size: var(--type-note); max-width: 30ch; }
.friends-appear-says { margin: 0; color: var(--ink-2); font-size: var(--type-body); line-height: 1.45; }

@media (max-width: 420px) {
  .friends-add-row { flex-wrap: wrap; }
  .friends-add .ui-btn { flex: 1 1 100%; }
}


.friends-confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2) var(--step-3); }
.friends-confirm { color: var(--ink-1); font-size: var(--type-body); }


.friends-done { display: none; grid-column: 1 / -1; padding: var(--step-3) var(--step-4); border-top: 1px solid var(--line-1); }
:root[data-input="touch"] .friends-done { display: flex; }
:root[data-input="touch"] .friends-done .ui-btn { flex: 1; }
:root[data-input="touch"] .friends-dialog-head > .ui-btn { margin-left: auto; min-width: var(--touch); padding-inline: var(--step-4); border: 1px solid var(--line-2); }


.challenge-pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); }
.challenge-body { display: grid; gap: var(--step-4); }
.ur-deckrow.is-refused { flex-wrap: wrap; opacity: 0.7; }
.ur-deckrow.is-refused .ur-deckrow-main { cursor: not-allowed; }
.challenge-why { flex: 1 1 100%; padding: 0 var(--step-2) var(--step-1); font-size: var(--type-label); color: var(--ink-2); }

.totem.has-menu { cursor: pointer; }
.totem.has-menu:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.totem.has-menu[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--opponent); }