.online-panel {
  --online-border: var(--line, #34405c);
  --online-bg: var(--panel, #171f35);
  --online-subtle: var(--muted, #a6b5d4);
  --online-red: #ff6e8e;
  --online-yellow: #ffdc78;
  --online-blue: #8cbfff;
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.online-panel [hidden] { display: none; }
.online-panel-title, .online-option h4, .online-option-description, .online-status { margin: 0; }
.online-panel-title { font-size: clamp(1.25rem, 4vw, 1.65rem); }

.online-status {
  border: 1px solid var(--online-border);
  border-radius: .8rem;
  padding: .8rem 1rem;
  color: var(--online-blue);
  background: rgba(99, 140, 242, .12);
  font-weight: 700;
}

.online-lobby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .85rem;
}

.online-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  min-width: 0;
  border: 1px solid var(--online-border);
  border-radius: 1rem;
  padding: 1rem;
  background: var(--online-bg);
}

.online-option-description { color: var(--online-subtle); line-height: 1.5; }
.online-join { display: flex; flex-wrap: wrap; gap: .55rem; width: 100%; align-items: end; }
.online-field { display: grid; flex: 1 1 8rem; gap: .35rem; min-width: 0; font-size: .875rem; font-weight: 650; }
.online-seats { width: min(100%, 15rem); }
.online-queue-computer { justify-self: start; }

.online-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.8rem;
  padding: .55rem .75rem;
  border: 1px solid var(--online-border);
  border-radius: .65rem;
  background: #0b1223;
  color: #f1f5ff;
  font: inherit;
  font-size: 1rem;
}

.online-input[name="room"] { text-transform: uppercase; letter-spacing: .07em; }
.online-input[aria-invalid="true"] { border-color: var(--online-red); }
.online-room { display: grid; gap: 1rem; min-width: 0; }
.online-room-bar, .online-room-actions, .online-identity { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.online-room-bar { justify-content: space-between; }
.online-room-actions { justify-content: center; }

.online-code-group, .online-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--online-border);
  border-radius: .65rem;
  padding: .5rem .65rem;
  color: var(--online-subtle);
  background: var(--online-bg);
  font-size: .85rem;
}

.online-code { color: #f2f5ff; font-family: ui-monospace, monospace; letter-spacing: .08em; font-weight: 800; }
.online-player-piece { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; color: var(--online-red); font-size: 1rem; font-weight: 900; }
.online-player-piece[data-player="2"] { color: var(--online-blue); }
.online-player-piece[data-game="connect-four"] { border-radius: 50%; background: var(--online-red); box-shadow: inset 0 0 0 .18rem #ffffff35; }
.online-player-piece[data-game="connect-four"][data-player="2"] { background: var(--online-yellow); box-shadow: inset 0 0 0 .18rem #5b341441; }

.online-board { display: grid; justify-self: center; width: 100%; min-width: 0; }
.online-tic { max-width: 20rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }

.online-square {
  appearance: none;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid var(--online-border);
  border-radius: .85rem;
  padding: 0;
  color: var(--online-red);
  background: var(--online-bg);
  font: 900 clamp(2rem, 11vw, 4rem)/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.online-square[data-player="2"] { color: var(--online-blue); }
.online-square[aria-disabled="false"]:hover, .online-column[aria-disabled="false"]:hover { background: #243354; }
.online-square[aria-disabled="true"], .online-column[aria-disabled="true"] { cursor: default; }
.online-square.is-winning { background: #203b4e; border-color: #89f1da; box-shadow: inset 0 0 0 1px #89f1da; }

.online-connect {
  max-width: 26rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .1rem;
  padding: clamp(.15rem, 2vw, .4rem);
  background: var(--online-bg);
  border: 1px solid var(--online-border);
  border-radius: .9rem;
}

.online-column {
  appearance: none;
  min-width: 0;
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: clamp(.18rem, 1.1vw, .35rem);
  padding: .2rem clamp(.12rem, .8vw, .3rem) .4rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  color: var(--online-blue);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.online-drop-arrow { opacity: .28; line-height: 1; }
.online-column[aria-disabled="false"] .online-drop-arrow { opacity: 1; }

.online-disc {
  width: 100%;
  max-width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--online-border);
  background: #0a1020;
}

.online-disc[data-player="1"] { border-color: #ff9eb3; background: radial-gradient(circle, #ffe9ec 10%, var(--online-red) 11% 65%, #b22c50 66%); }
.online-disc[data-player="2"] { border-color: #fff1b0; background: repeating-linear-gradient(135deg, var(--online-yellow) 0 18%, #e6a645 20% 34%); }
.online-disc.is-winning { outline: 2px solid #8efce0; outline-offset: -1px; }

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

@media (max-width: 350px) {
  .online-option, .online-status { padding: .65rem; }
  .online-room-bar, .online-identity { gap: .4rem; }
}