/* No framework, no build step. The tile colours are the realm's colours, so a
   board here and a board drawn by gnoweb are the same picture. */
:root { --hit:#6aaa64; --present:#c9b458; --miss:#787c7e; --blank:#fff; --border:#d3d6da;
        --ink:#0f172a; --bg:#fff; --panel:#f8fafc; --line:#e2e8f0; --muted:#64748b; }
@media (prefers-color-scheme: dark) { :root { --ink:#e2e8f0; --bg:#0b1120; --panel:#111a2e; --line:#1e293b; --muted:#94a3b8; --blank:#0b1120; --border:#334155; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
header { padding:1.5rem clamp(1rem,4vw,3rem) 0; }
h1 { margin:0; font-size:1.9rem; letter-spacing:-.02em; }
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:1.4rem 0 .5rem; }
.tagline { margin:.2rem 0 1rem; color:var(--muted); }
nav { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; padding-bottom:1rem; border-bottom:1px solid var(--line); }
nav label { color:var(--muted); font-size:.85rem; }
select,button,input { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; }
button { cursor:pointer; } button:hover { border-color:var(--hit); }
button.link { background:none; border:none; color:var(--muted); text-decoration:underline; padding:0; }
.status { font-size:.85rem; color:var(--muted); margin-left:auto; }
.status.live { color:#16a34a; } .status.bad { color:#c0392b; }
main { display:grid; grid-template-columns:minmax(300px,1fr) minmax(280px,24rem); gap:clamp(1rem,3vw,2.5rem); padding:1.5rem clamp(1rem,4vw,3rem) 3rem; align-items:start; }
@media (max-width:820px) { main { grid-template-columns:1fr; } }
.board { display:grid; grid-template-rows:repeat(6,1fr); gap:6px; max-width:340px; }
.board .row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.board .tile { aspect-ratio:1; display:grid; place-items:center; font-weight:700; font-size:1.7rem;
  text-transform:uppercase; border:2px solid var(--border); border-radius:4px; background:var(--blank); }
.board .tile.hit { background:var(--hit); border-color:var(--hit); color:#fff; }
.board .tile.present { background:var(--present); border-color:var(--present); color:#fff; }
.board .tile.miss { background:var(--miss); border-color:var(--miss); color:#fff; }
#guess-form { display:flex; gap:.5rem; margin-top:1rem; max-width:340px; }
#guess { flex:1; text-transform:uppercase; letter-spacing:.2em; font-weight:600; }
.msg { min-height:1.5em; font-size:.9rem; color:#c0392b; }
.board-meta { display:flex; gap:1rem; font-size:.85rem; color:var(--muted); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
#streaks { display:grid; gap:.25rem; font-size:.8rem; color:var(--muted); font-family:ui-monospace,monospace; }
pre { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.7rem; overflow-x:auto; font-size:.8rem; white-space:pre-wrap; }
footer { margin-top:2rem; border-top:1px solid var(--line); padding-top:1rem; font-size:.85rem; color:var(--muted); }
footer a { color:inherit; }
.fine { font-size:.85rem; }
p { color:var(--muted); font-size:.9rem; }

/* The session panel. Same visual language as everything else: no new colours,
   one status green, and a command block that is obviously meant to be copied. */
.sess-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.6rem 0; }
.sess-row label { font-size:.85rem; color:var(--muted); }
.sess-live { color:#16a34a; }
/* A pubkey is 100 characters with no break opportunity, so without this the
   command block scrolls sideways and the player copies half a line. */
#session pre { user-select:all; overflow-wrap:anywhere; white-space:pre-wrap; }
#session code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; }
#session details summary { cursor:pointer; font-size:.85rem; color:var(--muted); }
#session input { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:.35rem .6rem; width:22ch; font-family:ui-monospace,monospace; font-size:.85rem; }
#session input[aria-invalid="true"] { border-color:#c0392b; }