:root {
  --bg: #1d2733;        /* brighter than before (was #0e1116) */
  --panel: #29343f;
  --panel-2: #34414f;
  --ink: #f3f7fb;
  --ink-dim: #bcc9d6;   /* clearly readable (was #9aa7b4) */
  --accent: #8f72ff;
  --accent-2: #34e0cc;
  --good: #4cc663;
  --bad: #ff6258;
  --warn: #e3a82a;
  --line: #3c4856;
  --radius: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

#app {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 18px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header ─────────────────────────────────────────── */
header.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
header.bar h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.02em;
}
header.bar h1 .sub { color: var(--ink-dim); font-weight: 400; font-size: 13px; margin-left: 8px; }
.spacer { flex: 1; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-dim);
  white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); }
.pill.ok { color: var(--ink); border-color: #1f6f3a; }
.pill.ok .dot { background: var(--good); box-shadow: 0 0 8px var(--good); }
.pill.off .dot { background: var(--warn); }
.pill.err { color: var(--ink); border-color: #6f2a26; }
.pill.err .dot { background: var(--bad); }
/* the status pill is clickable (shows the device popover) → button-like hover */
#status { cursor: pointer; }
#status:hover { border-color: var(--accent-2); color: var(--ink); }

button {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
button:hover { background: #283040; }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: transparent; color: #fff; }
button.primary:hover { filter: brightness(1.08); }
button.ghost { background: transparent; }
button[aria-pressed="true"] { border-color: var(--accent); color: #fff; background: #2a2350; }

.toggle-group { display: inline-flex; gap: 6px; }

/* ── Menu cards ─────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .emoji { font-size: 30px; }
.card h3 { margin: 0; font-size: 16px; }
.card .en { color: var(--ink-dim); font-size: 12px; font-weight: 400; margin-left: 6px; }
.card p { margin: 0; color: var(--ink-dim); font-size: 13px; line-height: 1.5; }
.card .tag { font-size: 11px; color: var(--accent-2); }

/* ── Stage (game host) ──────────────────────────────── */
.stage-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stage-head h2 { margin: 0; font-size: 16px; }
.stage-head .en { color: var(--ink-dim); font-size: 12px; }

.gamewrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.gametoolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gametoolbar .label { font-size: 12px; color: var(--ink-dim); margin-right: 2px; }
/* compact mode (notice) — keep the whole toolbar on one line */
.gametoolbar.compact { gap: 6px; }
.gametoolbar.compact .toggle-group button { padding: 6px 9px; font-size: 15px; }
.gametoolbar.compact .modality-group .modbtn { padding: 5px 7px; font-size: 12px; }
.gametoolbar.compact .namefield { font-size: 11px; }
.gametoolbar.compact .namefield input { width: 74px; }
.gametoolbar.compact .namefield .namedice { padding: 4px 5px; }

/* gamepad badge shown on a button (which pad button triggers it) */
.padkey {
  display: inline-block; font-size: 10px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 999px; margin-left: 4px; vertical-align: middle;
  background: #2f3a48; color: #dbe2ea; border: 1px solid #45515f;
}
.padkey.k-a { background: #1d4a34; color: #d7ffe9; border-color: #45b07e; }
.padkey.k-b { background: #4a2424; color: #ffd9d9; border-color: #b06a6a; }
.padkey.k-x { background: #1f3a5c; color: #d6e8ff; border-color: #4a78c0; }
.padkey.k-y { background: #4a4220; color: #fff0c2; border-color: #b0a04a; }
.padkey.k-menu { background: #2b3340; color: #e8eef6; border-color: #56627a; }
/* modality group inside the toolbar */
.modality-group .modbtn { display: inline-flex; align-items: center; }

/* stop button — distinct from the purple primary start */
button.danger { background: #3a2330; border-color: #6f3a4a; color: #ffd9e4; }
button.danger:hover { background: #4a2c3d; }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { background: var(--panel-2); }

/* name field in a toolbar */
.namefield { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-dim); }
.namefield input {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; width: 108px;
}
.namefield input:focus { outline: none; border-color: var(--accent); }

/* ── Ranking panel (inline, below a game) ───────────────── */
.rankpanel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.rankpanel .rank-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rankpanel .rank-count { font-size: 12px; color: var(--ink-dim); }
.rankpanel .rank-head .ghost { font-size: 12px; padding: 5px 9px; }
.rank-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rank-table th, .rank-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.rank-table th { font-size: 11px; color: var(--ink-dim); font-weight: 600; }
.rank-table th.r-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.rank-table th.r-sort:hover { color: var(--ink); }
.rank-table th.r-sort.on { color: var(--ink); }
.rank-table td.r-rank { width: 40px; font-weight: 800; text-align: center; }
.rank-table td.r-name { font-weight: 600; }
.rank-table td.r-num { font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
.rank-table td.r-num.on { font-weight: 800; color: var(--accent-2); }
.rank-table tr.top td.r-num.on { color: var(--accent); }
.rank-table td.r-mods .rm { font-size: 13px; margin-right: 1px; }
.rank-table td.r-mods .none { color: #5a6677; }
.rank-table td.r-at { font-size: 11px; color: #5a6677; white-space: nowrap; }
.rank-empty { font-size: 12px; color: var(--ink-dim); margin: 4px 2px; }

/* name field dice */
.namefield .namedice { font-size: 12px; padding: 4px 6px; line-height: 1; border-radius: 7px; }
canvas { display: block; width: 100%; background: #0a0d12; border-radius: 10px; touch-action: none; }

.hud { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.hud b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.note { font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
.note b { color: var(--ink); }

/* connected-device popover — anchored directly under the status pill */
.statuswrap { position: relative; display: inline-flex; align-items: center; }
.device-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 180px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); font-size: 13px;
}
.device-pop.hidden { display: none; }
.device-pop .dp-title { font-size: 11px; color: var(--ink-dim); margin-bottom: 4px; }
.device-pop .dp-item { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--ink); }
.device-pop .dp-addr { color: var(--ink-dim); font-size: 11px; }
.device-pop .dp-empty { color: var(--ink-dim); }
.banner {
  font-size: 13px; padding: 10px 12px; border-radius: 8px;
  background: #2a2412; border: 1px solid #6b541a; color: #f0d999;
}
.center-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.stagebox { position: relative; }

/* ── Result overlay (interactive, kiosk flow) ───────── */
.result {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(7, 10, 14, 0.72); border-radius: 10px; z-index: 5;
}
.result-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 30px; text-align: center;
}
.result-badge {
  font-size: 13px; color: #fff; background: var(--accent); padding: 4px 12px; border-radius: 999px;
}
.result-title { font-size: 26px; font-weight: 700; }
.result-sub { font-size: 14px; color: var(--ink-dim); }
.result-actions { display: flex; gap: 10px; margin-top: 6px; }

/* best-score badge on menu cards */
.card-best {
  font-size: 11px; color: var(--ink-dim); margin-top: auto;
  border-top: 1px solid var(--line); padding-top: 8px;
}
.card-best b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
kbd {
  font: inherit; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--ink);
}