:root { --ink:#1d2433; --bg:#14213d; --panel:#fff; --accent:#fca311; --line:#c7cedb; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  font:18px/1.4 system-ui, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); }
.panel { background:var(--panel); width:min(420px, 92vw); padding:28px; border-radius:16px; }
h1 { margin:0 0 4px; text-align:center; }
.globe { text-align:center; font-size:2.6rem; line-height:1; margin:0 0 14px; }
label { display:block; margin:14px 0 4px; font-weight:600; }
small { font-weight:400; color:#667085; }
input { width:100%; font:inherit; padding:12px; border:2px solid var(--line); border-radius:10px; }
input:focus { outline:none; border-color:var(--accent); }
button, .button { display:block; width:100%; margin-top:18px; padding:14px; font:inherit; font-weight:700;
  text-align:center; text-decoration:none; color:var(--ink); background:var(--accent); border:none; border-radius:10px; cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }
button.secondary { background:#eef1f6; font-weight:500; }
.error { background:#fdecea; color:#a02a1e; padding:10px 12px; border-radius:8px; }
[hidden] { display:none !important; }
#welcome { text-align:center; }

/* game picker (menu.html) */
body.top { align-items: flex-start; padding: 24px 0; }
.panel.wide { width: min(760px, 94vw); }
.hello { text-align: center; font-weight: 600; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 22px 0 8px; }
.muted { color: #667085; font-weight: 400; }
.gamecard { display: flex; gap: 16px; align-items: center; justify-content: space-between;
  border: 2px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.gamecard p { margin: 4px 0 0; }
.gamecard .button.play { width: auto; margin: 0; padding: 12px 28px; }
.board { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.board li.me { background: #fff4d6; font-weight: 700; }
.credits { font-size: 0.8rem; text-align: center; margin: 14px 0 0; }
.credits a { color: inherit; }
.gamecard + .gamecard { margin-top: 10px; }

/* Ched: a wedge of cheese */
.ched-ico { display: inline-block; width: 1.05em; height: 1.05em; background: url(ched.svg) no-repeat center / contain; vertical-align: -0.18em; margin-right: .12em; }

.guestnote { text-align: center; font-size: .85rem; margin: 10px 0 0; }