/* A little friends league, secondary to the phone and main brand. */
html[data-theme] .friends-panel { margin-top: 24px; padding: 16px 14px 12px; border-radius: 20px; background: rgba(255,255,255,.035); box-shadow: 0 0 0 1px rgba(255,255,255,.07); color: var(--ui-ink); }
.friends-panel-heading { display: flex; gap: 7px; align-items: center; }
.friends-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #c8eb7d; box-shadow: 0 0 8px rgba(200,235,125,.22); }
.friends-panel h2 { margin: 0; font: 500 12px/1.4 var(--ui-font); letter-spacing: -.01em; text-wrap: balance; }
.friends-panel > p:not(.friends-run-status) { margin: 6px 0 12px; color: var(--ui-muted); font: 400 11px/1.55 var(--ui-font); text-wrap: pretty; }
html[data-theme] .friends-chrome-button { position: relative; display: block; width: 100%; max-width: 210px; margin: 0 auto; padding: 0; min-height: 48px; border-radius: 12px; background: transparent; border: 0; cursor: pointer; transition: scale 150ms cubic-bezier(.2,0,0,1); }
.friends-chrome-button img { display: block; width: 100%; height: auto; pointer-events: none; }
.friends-button-rest { display: block; }
/* Both supplied renders share a canvas: the base stays still as the face sinks. */
.friends-button-rest, .friends-button-pressed { transition: opacity 140ms cubic-bezier(.2,0,0,1); }
.friends-chrome-button .friends-button-pressed { position: absolute; inset: 0; opacity: 0; }
.friends-chrome-button:active .friends-button-rest { opacity: 0; }
.friends-chrome-button:active .friends-button-pressed { opacity: 1; }
.friends-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; color: var(--ui-muted); font: 400 9px/1.5 var(--ui-font); }
html[data-theme] .friends-panel-footer button { min-height: 40px; flex-shrink: 0; border: 0; background: transparent; padding: 0; color: #c8eb7d; font: 500 10px/1.3 var(--ui-font); cursor: pointer; }
.friends-run-status { margin: 8px 0 0; font: 400 11px/1.5 var(--ui-font); color: #c8eb7d; text-wrap: pretty; }
.friends-run-status:empty { display: none; }
html[data-theme] .friends-dialog { width: min(420px,calc(100vw - 32px)); max-height: 88svh; padding: 0; overflow-y: auto; border: 0; border-radius: 28px; color: var(--ui-ink); background: var(--ui-surface); box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 20px 80px rgba(0,0,0,.5); }
.friends-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(8px); }
.friends-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 0 24px; }
.friends-kicker { color: var(--ui-muted); font: 500 9px/1.4 var(--ui-font); letter-spacing: .05em; }
html[data-theme] #friends-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ui-raised); color: var(--ui-ink); font: 400 22px/1 var(--ui-font); cursor: pointer; }
.friends-dialog-body { padding: 0 24px 24px; }
.friends-dialog-intro { margin: 12px 0 22px; }
.friends-pixel-crown { display: block; color: #c8eb7d; font: 400 36px/1 var(--nokia-font); }
.friends-dialog h2 { margin: 12px 0 12px; font: 500 32px/1.1 var(--ui-font); letter-spacing: -.04em; text-wrap: balance; }
.friends-dialog-intro p { color: var(--ui-muted); margin: 0; font: 400 13px/1.65 var(--ui-font); text-wrap: pretty; }
.friends-name-form { background: #b2be8c; border-radius: 20px; padding: 12px; color: #202919; }
.friends-name-form label, .friends-invite-box label { display: block; margin-bottom: 8px; font: 400 10px/1.5 var(--nokia-font); }
html[data-theme] #friends-name { display: block; width: 100%; min-height: 48px; padding: 12px; background: rgba(32,41,25,.08); border: 0; border-radius: 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,.08); color: #202919; font: 400 16px/1.4 var(--nokia-font); }
#friends-name::placeholder { color: #536044; opacity: 1; }
html[data-theme] #friends-submit, html[data-theme] .friends-primary { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 8px; background: #26321c; color: #e0edbc; font: 400 13px/1.4 var(--nokia-font); cursor: pointer; }
#friends-submit { margin-top: 8px; }
#friends-form-note { margin: 12px 0 0; color: #3d4b2b; font: 400 11px/1.5 var(--ui-font); text-wrap: pretty; }
.friends-ready { display: grid; gap: 10px; }
.friends-invite-box { padding: 12px; border-radius: 20px; background: var(--ui-raised); }
.friends-invite-box label { color: var(--ui-muted); }
.friends-invite-box > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
html[data-theme] #friends-link { width: 100%; min-width: 0; min-height: 44px; background: rgba(0,0,0,.15); border: 0; border-radius: 8px; padding: 10px; color: var(--ui-ink); font: 400 12px/1.4 var(--ui-font); }
html[data-theme] #friends-copy { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--ui-ink); background: rgba(255,255,255,.07); font: 500 12px/1.4 var(--ui-font); cursor: pointer; }
html[data-theme] .friends-ready .friends-primary { border-radius: 12px; background: #c8eb7d; color: #202919; }
html[data-theme] .friends-text-button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--ui-muted); font: 400 12px/1.5 var(--ui-font); cursor: pointer; text-align: left; }
.friends-status { margin: 14px 0 0; color: #c8eb7d; font: 400 12px/1.5 var(--ui-font); text-wrap: pretty; }
.friends-status:empty { display: none; }
.friends-fine-print { margin: 18px 0 0; font: 400 10px/1.6 var(--ui-font); color: var(--ui-muted); text-wrap: pretty; }
.board-league-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.board-league-invite > span { font: 400 10px/1.5 var(--nokia-font); color: #c8eb7d; }
.board-league-invite button { background: transparent; border: 0; padding: 8px 0; min-height: 44px; font: 500 12px/1.5 var(--ui-font); color: var(--ui-ink); cursor: pointer; }
.friends-dialog button { transition: scale 150ms cubic-bezier(.2,0,0,1), opacity 150ms ease; }
.friends-dialog button:disabled { opacity: .5; cursor: wait; }
.friends-dialog button:not(:disabled):active, .friends-chrome-button:active, .friends-panel-footer button:active { scale: .96; }
.friends-dialog :is(input,button):focus-visible, .friends-chrome-button:focus-visible { outline: 2px solid #c8eb7d; outline-offset: 3px; }
#friends-panel [hidden], .friends-dialog [hidden], .board-league-invite[hidden], #board-league-leave[hidden] { display: none !important; }
@media (hover: hover) and (min-width: 701px) {
  .friends-chrome-button:hover .friends-button-rest { opacity: 0; }
  .friends-chrome-button:hover .friends-button-pressed { opacity: 1; }
}
@media (hover: hover) { .friends-text-button:hover, .friends-panel-footer button:hover { color: var(--ui-ink); } }
@media (min-width: 701px) { #friends-desktop-slot { width: 100%; } }
@media (max-width: 700px) {
  #friends-desktop-slot { display: none; }
  html[data-theme] #friends-mobile-slot .friends-panel { margin: 0 0 18px; padding: 16px; }
  .friends-panel h2 { font-size: 14px; }
  .friends-panel > p:not(.friends-run-status) { font-size: 12px; }
  html[data-theme] .friends-chrome-button { max-width: none; margin-inline: 0; border-radius: 22px; }
  .friends-chrome-button .friends-button-rest { opacity: 1; }
  .friends-chrome-button .friends-button-rest img { outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; border-radius: 22px; }
  .friends-chrome-button .friends-button-pressed { display: none; }
  html[data-theme] .friends-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; max-height: 92svh; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  .friends-dialog button, .friends-chrome-button, .friends-button-rest, .friends-button-pressed { transition: none; }
  .friends-chrome-button:active { scale: 1; }
}
body[data-league="true"] #board-form, body[data-league="true"] .board-modes { display: none; }
body[data-league="true"] .board-body { position: relative; }
body[data-league="true"] .board-league-invite { padding-right: 48px; margin-bottom: 6px; }
body[data-league="true"] .board-controls { position: absolute; right: 28px; top: 0; }
body[data-league="true"] .board-summary { padding-top: 16px; }
@media (max-width: 700px) { body[data-league="true"] .board-controls { right: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .friends-dialog[open] .friends-dialog-intro { transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,0,0,1); }
  .friends-dialog[open] :is(.friends-name-form,.friends-ready) { transition: opacity 180ms ease 80ms, transform 220ms cubic-bezier(.2,0,0,1) 80ms; }
  @starting-style {
    .friends-dialog[open] :is(.friends-dialog-intro,.friends-name-form,.friends-ready) { opacity: 0; transform: translateY(6px); }
  }
}