/* Online panel ([data-online-panel] on the play page). Owned by the realtime package.
   Built on the design tokens and components in site.css (.btn, .field, .input, .help, .error,
   .callout, .stack, .cluster). States are data attributes and the `hidden` attribute; there are
   no inline styles (CSP). */

.online-panel {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

/* Views and controls toggled with `hidden` must stay hidden even when a component rule sets display. */
.online-panel [hidden] {
  display: none;
}

.online-view {
  min-width: 0;
}

/* --- Connection status: quiet when fine, clear when not (UI-16) -------------------------------- */
.online-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-height: 24px;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--text-muted);
}

.online-status__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-subtle);
}

.online-status[data-level='ok'] .online-status__dot {
  background: var(--success);
}

.online-status[data-level='warning'] {
  color: var(--warning);
}

.online-status[data-level='warning'] .online-status__dot {
  background: var(--warning);
}

.online-status[data-level='error'] {
  color: var(--danger);
}

.online-status[data-level='error'] .online-status__dot {
  background: var(--danger);
}

.online-status__text {
  flex: 1 1 12rem;
  min-width: 0;
}

.online-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}

.online-notice__text {
  flex: 1;
  min-width: 0;
}

.online-notice__close {
  flex: none;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
}

/* --- Idle: find an opponent, nickname, play a friend ------------------------------------------ */
.online-intro {
  margin: calc(var(--space-2) * -1) 0 0;
}

.online-find .icon,
.online-panel .btn .icon {
  flex: none;
}

.online-friend {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.online-friend__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
}

.online-friend__summary::-webkit-details-marker {
  display: none;
}

.online-friend__summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.online-friend__chevron {
  margin-inline-start: auto;
  transition: transform var(--dur-fast) var(--ease-out);
}

.online-friend[open] .online-friend__chevron {
  transform: rotate(180deg);
}

.online-friend__body {
  padding: 0 var(--space-4) var(--space-4);
}

/* "or" separator drawn with CSS lines, text in --text-muted (4.5:1 or better) */
.online-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.online-or::before,
.online-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border-strong);
}

.online-join {
  display: grid;
  gap: var(--space-2);
}

.online-join label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.online-join__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.online-join__input {
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.online-join__input::placeholder {
  text-transform: none;
  letter-spacing: normal;
}

/* --- Searching -------------------------------------------------------------------------------- */
.online-search {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.online-search__title {
  margin: 0;
  font-weight: var(--fw-semibold);
}

.online-search__time {
  font: var(--fw-bold) var(--text-2xl) / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.online-spinner {
  flex: none;
  width: 28px;
  height: 28px;
  border: 3px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: online-spin 0.8s linear infinite;
}

.online-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

@keyframes online-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-spinner {
    animation: none;
  }

  .online-friend__chevron {
    transition: none;
  }
}

/* --- Private game: creating / waiting / joining ----------------------------------------------- */
.online-busy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.online-busy__text {
  flex: 1 1 10rem;
  min-width: 0;
}

.online-busy__cancel {
  flex: none;
}

.online-busy__text,
.online-waiting__lead {
  margin: 0;
}

.online-code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.online-code__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.online-code__value {
  font:
    var(--fw-bold) var(--text-2xl) / 1 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    'Liberation Mono',
    monospace;
  letter-spacing: 0.12em;
}

.online-invite {
  display: grid;
  gap: var(--space-2);
}

.online-invite__link {
  min-width: 0;
  font-size: var(--text-sm);
}

.online-waiting__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
}

/* QR code of the invite link: shown only with a mouse or trackpad, so a friend's phone can scan
   it from the screen. Always dark on white (scanners need it), also in the dark theme. */
.online-qr {
  display: none;
  margin: 0;
}

@media (pointer: fine) {
  .online-qr {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
}

.online-qr__code {
  flex: none;
  width: 148px;
  height: 148px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  forced-color-adjust: none;
}

.online-qr__light {
  fill: #fff;
}

.online-qr__dark {
  fill: #000;
}

.online-qr__caption {
  margin: 0;
}

/* --- In a game ---------------------------------------------------------------------------------- */
.online-game__title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-bold);
}

.online-game__color {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.online-chip {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
}

.online-game__color[data-color='black'] .online-chip {
  background: var(--disc-black);
}

.online-game__color[data-color='white'] .online-chip {
  background: var(--disc-white-hi);
}

.online-game__away,
.online-game__rematch {
  margin: 0;
}

.online-emotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

/* Emoji above its label, so "Nice move" and "Good game" fit a third of a narrow panel. */
.online-emote {
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
}

.online-emote__emoji {
  font-size: 1.25rem;
  line-height: 1;
}

.online-emote__label {
  font-size: var(--text-xs);
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 359px) {
  .online-emote__label {
    display: none;
  }
}

/* Windows contrast themes: keep the status dot and the color chip visible and distinct. */
@media (forced-colors: active) {
  .online-status__dot,
  .online-chip {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }

  .online-status__dot,
  .online-game__color[data-color='black'] .online-chip {
    background: CanvasText;
  }

  .online-game__color[data-color='white'] .online-chip {
    background: Canvas;
  }

  .online-search,
  .online-friend {
    border-color: CanvasText;
  }
}