/* ============================================================
   net-panel.css — the invite code panel, shared by every game
   that can be played with somebody else.

   Pulled out of reversi.css on 2026-08-27 when Hearts grew the
   same panel. It is deliberately plain furniture: a code you read
   out loud, a box to type one into, and one line of status that
   is always a sentence and never a code.

   The code itself is set large, wide tracked and monospaced,
   because its whole job is to be read correctly over a phone by
   somebody who cannot see your screen.
   ============================================================ */

.netpanel{
  border:1px solid var(--line); border-radius:16px; background:var(--panel);
  padding:clamp(14px,3vw,20px); margin:0 0 14px;
}
.netpanel[hidden]{display:none}
.netpanel h2{font-size:1.1rem; margin:0 0 6px}
.netlede{margin:0 0 14px; color:var(--muted); font-size:.92rem; max-width:64ch}
.netrow{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:0 0 4px}
.netrow[hidden]{display:none}
.netstatus{margin:10px 0 0; color:var(--ink); font-size:.92rem; min-height:1.4em}
.netstatus:empty{display:none}

.codebox{display:flex; flex-direction:column; gap:2px}
.codelabel{font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent)}
.code{
  font-family:var(--mono); font-size:1.5rem; letter-spacing:.22em; font-weight:700;
  color:var(--ink); line-height:1.2; word-break:break-all;
}
.codefield{
  font-family:var(--mono); font-size:1rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  min-height:var(--tap); padding:0 12px; width:min(100%, 11ch);
}
.codefield::placeholder{color:var(--muted); opacity:1}
.codefield:focus-visible{outline:3px solid var(--accent-ink); outline-offset:2px}