/* Online duel lobby: pairing code, players and readiness. Loads after visual-fun.css. */

.online-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}
.online-dialog::backdrop { background: rgba(15, 22, 43, .62); backdrop-filter: blur(8px); }
.online-card { display: flex; flex-direction: column; min-width: 0; }

.online-card__header {
  position: relative;
  padding: 22px 76px 18px 26px;
  background: radial-gradient(circle at 92% 0, rgba(255, 184, 107, .32), transparent 11rem), linear-gradient(125deg, var(--surface), var(--primary-soft));
  border-bottom: 1px solid var(--line);
}
.online-card__header .section-kicker { margin: 0 0 4px; }
.online-card__header h2 { margin: 0; font-size: clamp(24px, 4.4vw, 30px); font-weight: 850; line-height: 1.12; letter-spacing: -.03em; overflow-wrap: anywhere; }
.online-summary { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.online-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; cursor: pointer; }
.online-connection { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 4px 11px; color: var(--green-ink); background: var(--green-tint); border-radius: 999px; font-size: 13px; font-weight: 800; }
.online-connection::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 50%; }
.online-connection.is-offline { color: var(--player-b-ink); background: var(--apricot-soft); }
.online-connection.is-offline::before { animation: online-blink 1s steps(2) infinite; }

.online-body { display: grid; gap: 14px; padding: 20px 26px 24px; }
.online-lead { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.online-field { display: grid; }
.online-hint { margin: -6px 0 0; color: var(--ink-soft); font-size: 13px; }
.online-code-input { font: 800 28px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .32em; text-align: center; text-transform: uppercase; }
.online-error { margin: 0; color: var(--red-ink); font-weight: 750; }
.online-error:empty { display: none; }
.online-offline { margin: 0; padding: 11px 14px; color: var(--player-b-ink); background: var(--apricot-soft); border: 1px solid var(--apricot-base); border-radius: 13px; font-weight: 750; }
.online-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.online-actions .button--large { flex: 1 1 220px; }

.online-code { display: grid; justify-items: center; gap: 10px; padding: 18px 14px; background: var(--surface-soft); border: 1px dashed var(--line-strong); border-radius: 20px; text-align: center; }
.online-code > p:first-child { margin: 0; color: var(--ink-soft); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.online-code__value { display: flex; gap: clamp(4px, 1.4vw, 9px); }
.online-code__value span {
  display: grid; place-items: center;
  width: clamp(40px, 11vw, 58px); height: clamp(52px, 13vw, 70px);
  color: var(--violet-dark); background: var(--surface);
  border: 2px solid var(--violet); border-radius: 14px; box-shadow: 0 5px 0 var(--violet-soft);
  font: 850 clamp(26px, 7vw, 38px)/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.online-code__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.online-code .online-hint { margin: 0; }

.online-players { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.online-player { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.online-player.is-me { border-color: var(--violet); box-shadow: inset 4px 0 0 var(--violet); }
.online-player.is-empty { color: var(--ink-soft); background: var(--cream); border-style: dashed; }
.online-player__seat { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--navy-3); border-radius: 50%; font-weight: 850; }
.online-player:nth-child(2) .online-player__seat { background: var(--coral-dark); }
.online-player:first-child .online-player__seat { background: var(--violet); }
.online-player__name { font-weight: 800; overflow-wrap: anywhere; }
.online-player__name small { color: var(--ink-soft); font-weight: 700; }
.online-chip { padding: 5px 11px; color: var(--ink-soft); background: var(--surface-soft); border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.online-chip.is-ready { color: var(--green-ink); background: var(--green-tint); }
.online-chip.is-away { color: var(--player-b-ink); background: var(--apricot-soft); }
.online-dots { display: inline-flex; gap: 3px; margin-left: 6px; }
.online-dots i { width: 5px; height: 5px; background: currentColor; border-radius: 50%; animation: online-dot 1.2s ease-in-out infinite; }
.online-dots i:nth-child(2) { animation-delay: .15s; }
.online-dots i:nth-child(3) { animation-delay: .3s; }
.online-status { margin: 0; font-weight: 750; }
.online-ready[aria-pressed="true"] { background: linear-gradient(135deg, #1a8f66, var(--green-fill)); border-color: var(--green); box-shadow: 0 9px 22px rgba(20, 122, 85, .22); }

.online-countdown { margin: 0; padding: 14px; color: #fff; background: var(--inverse); border-radius: 16px; font-size: 18px; font-weight: 800; text-align: center; }
.online-countdown strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.online-result { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.online-result li { display: grid; gap: 2px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 16px; text-align: center; overflow-wrap: anywhere; }
.online-result li.is-winner { color: #fff; background: linear-gradient(135deg, var(--brand), var(--primary)); border-color: var(--primary); }
.online-result strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.online-result small { font-weight: 800; }

/* Invitation links and the rematch series (server-recorded; head-to-head is device-local). */
.online-share { display: grid; justify-items: center; gap: 10px; width: 100%; }
.online-share__primary { min-width: min(100%, 280px); }
.online-link { display: grid; gap: 2px; max-width: 100%; margin: 0; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.online-link__label { color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.online-link__url { font: 750 14px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.online-invite-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .12em; }

.online-series { display: grid; gap: 10px; padding: 16px; background: linear-gradient(135deg, var(--surface), var(--primary-soft)); border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.online-series > * { margin: 0; }
.online-series__kicker { color: var(--ink-soft); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.online-series__score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.online-series__score strong { color: var(--navy); font-size: clamp(30px, 5vw, 42px); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.online-series__name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.online-series__name:first-child { text-align: right; }
.online-series__name:last-child { text-align: left; }
.online-series__name.is-leading { color: var(--violet-dark); }
.online-series__name.is-leading::after { content: " ★"; color: var(--gold-base); }
.online-series__name.is-me { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.online-series__draws { color: var(--ink-soft); font-size: 13px; font-weight: 800; }
.online-series__rounds { display: grid; gap: 4px; max-height: 9.5rem; padding: 0; overflow-y: auto; list-style: none; text-align: left; overscroll-behavior: contain; }
.online-series__rounds li { padding: 5px 10px; background: var(--surface); border-left: 4px solid var(--line-strong); border-radius: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.online-series__rounds li span { color: var(--ink-soft); font-weight: 850; }
.online-series__rounds li.is-won { border-left-color: var(--green); }
.online-series__rounds li.is-lost { border-left-color: var(--coral-dark); }
.online-series__totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.online-series__totals div { padding: 6px 4px; background: var(--surface); border-radius: 10px; }
.online-series__totals dt { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.online-series__totals dd { margin: 0; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.online-series__h2h { display: grid; gap: 2px; padding: 8px 10px; background: var(--cream); border-radius: 12px; font-size: 14px; font-weight: 700; }
.online-series__h2h small { color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.arena-result .online-series { width: min(100%, 640px); margin-inline: auto; }
.online-series-chip { display: inline-flex; align-items: baseline; gap: 6px; width: fit-content; margin: 0; padding: 3px 10px; color: var(--violet-dark); background: var(--primary-soft); border-radius: 999px; font-size: 13px; font-weight: 800; }
.online-series-chip span { color: var(--ink-soft); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.online-series-chip strong { font-variant-numeric: tabular-nums; }
.online-series-chip small { color: var(--ink-soft); font-weight: 750; }
@media (max-width: 680px) {
  .duel-opponent .online-series-chip { grid-column: 1 / -1; padding: 1px 8px; font-size: 12px; }
}
@media (max-width: 480px) {
  .online-series__totals dd { font-size: 13px; }
  .online-series__name { font-size: 14px; }
}
body.high-contrast .online-series { border: 2px solid var(--navy); }

@keyframes online-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes online-blink { 50% { opacity: .2; } }

@media (max-width: 480px) {
  .online-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 22px; }
  .online-card__header { padding: 18px 68px 14px 18px; }
  .online-body { padding: 16px 18px 20px; }
  .online-actions .button { flex: 1 1 100%; }
}

body.high-contrast .online-dialog { border: 2px solid var(--navy); }
body.high-contrast .online-code__value span,
body.high-contrast .online-player { border-color: var(--navy); }

body.reduced-motion .online-dots i,
body.reduced-motion .online-connection::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .online-dots i, .online-connection::before { animation: none; }
}

/* Entry points */
.hub-join { white-space: nowrap; }
.setup-online { display: grid; gap: 10px; margin: 4px 0 14px; padding: 14px 16px; background: var(--primary-soft); border: 1px solid var(--line); border-radius: 16px; }
.setup-online[hidden] { display: none; }
.setup-online p { margin: 0; line-height: 1.5; }
.setup-online .button { justify-self: start; }
.setup-online__offline { color: var(--player-b-ink); font-weight: 750; }

/* Online duel: the local lane stays full-size; the rival is a compact live panel. */
.duel-lanes--online { grid-template-columns: minmax(0, 1fr) clamp(70px, 8vw, 112px) minmax(190px, .42fr); }
.duel-you { display: inline-block; margin-left: 8px; padding: 2px 9px; color: #fff; background: var(--inverse); border-radius: 999px; font-size: 12px; font-weight: 850; vertical-align: middle; }
.duel-opponent {
  position: relative; display: flex; min-width: 0; flex-direction: column; gap: 10px; justify-content: center;
  padding: clamp(14px, 1.8vw, 24px); color: var(--navy); background: var(--surface);
  border: 2px dashed var(--line-strong); border-radius: 20px; overflow: hidden;
}
.duel-opponent.side-0 { border-color: rgba(29, 79, 159, .55); }
.duel-opponent.side-1 { border-color: rgba(199, 70, 61, .5); }
.duel-opponent__label { margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.duel-opponent h3 { margin: 0; font-size: clamp(18px, 1.6vw, 24px); overflow-wrap: anywhere; }
.duel-opponent__score { font-size: clamp(30px, 3vw, 44px); font-variant-numeric: tabular-nums; line-height: 1; }
.duel-opponent__score small { font-size: 14px; }
.duel-opponent__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.duel-opponent__stats div { padding: 6px; background: var(--surface-soft); border-radius: 10px; text-align: center; }
.duel-opponent__stats dt { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.duel-opponent__stats dd { margin: 0; font-size: 18px; font-weight: 850; font-variant-numeric: tabular-nums; }
.duel-opponent__track { display: block; height: 8px; overflow: hidden; background: var(--surface-soft); border-radius: 999px; }
.duel-opponent__track i { display: block; height: 100%; background: var(--navy-3); transform-origin: left; transition: transform .3s ease; }
.duel-opponent.side-0 .duel-opponent__track i { background: var(--violet); }
.duel-opponent.side-1 .duel-opponent__track i { background: var(--coral-dark); }
.duel-opponent__status { width: fit-content; margin: 0; padding: 5px 10px; color: var(--green-ink); background: var(--green-tint); border-radius: 999px; font-size: 13px; font-weight: 800; }
.duel-opponent.is-locked .duel-opponent__status { color: var(--red-ink); background: var(--red-tint); }
.duel-opponent.is-away { opacity: .72; }
.duel-opponent.is-away .duel-opponent__status,
.duel-opponent.is-disqualified .duel-opponent__status { color: var(--player-b-ink); background: var(--apricot-soft); }
.duel-opponent.duel-glow--correct { animation: online-glow-correct 560ms ease-out; }
.duel-opponent.duel-glow--wrong { animation: online-glow-wrong 560ms ease-out; }
.online-banner { margin: 0 0 8px; padding: 9px 14px; color: var(--player-b-ink); background: var(--apricot-soft); border: 1px solid var(--apricot-base); border-radius: 12px; font-weight: 800; text-align: center; }
.online-banner[hidden] { display: none; }
.online-rematch-status { flex: 1 1 100%; margin: 0; font-weight: 800; text-align: center; }
.online-rematch-status:empty { display: none; }
.arena-dialog .online-exit[hidden] { display: none; }

@keyframes online-glow-correct { 35% { box-shadow: 0 0 0 5px rgba(34, 197, 94, .55), 0 0 26px rgba(34, 197, 94, .45); } }
@keyframes online-glow-wrong { 35% { box-shadow: 0 0 0 5px rgba(239, 68, 68, .5), 0 0 26px rgba(239, 68, 68, .4); } }

@media (max-width: 680px) {
  .hub-join { margin-left: 0; }
  .duel-lanes--online { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .duel-lanes--online > .referee-region { grid-row: 1; }
  .duel-lanes--online > .duel-opponent { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 13px; }
  .duel-lanes--online > .duel-opponent .duel-opponent__label,
  .duel-lanes--online > .duel-opponent .duel-opponent__track { display: none; }
  .duel-lanes--online > .duel-opponent h3 { font-size: 15px; }
  .duel-lanes--online > .duel-opponent .duel-opponent__score { grid-row: 1 / span 2; grid-column: 2; font-size: 26px; }
  .duel-lanes--online > .duel-opponent .duel-opponent__stats { grid-column: 1; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px; }
  .duel-lanes--online > .duel-opponent .duel-opponent__stats div { display: flex; gap: 4px; align-items: baseline; padding: 2px 6px; }
  .duel-lanes--online > .duel-opponent .duel-opponent__stats dd { font-size: 14px; }
  .duel-lanes--online > .duel-opponent .duel-opponent__status { grid-column: 1 / -1; padding: 2px 8px; font-size: 12px; }
  .duel-lanes--online > .duel-side { grid-row: 3; }
}
body.reduced-motion .duel-opponent.duel-glow--correct,
body.reduced-motion .duel-opponent.duel-glow--wrong { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .duel-opponent.duel-glow--correct, .duel-opponent.duel-glow--wrong { animation: none; }
  .duel-opponent__track i { transition: none; }
}
body.high-contrast .duel-opponent { border-style: solid; border-color: var(--navy); }