/* All rules scoped under #hcgame so the game's generic class names (.card, .row,
   .sub ...) and its CSS variables cannot collide with the site's Bootstrap-based
   styles or :root tokens. The game now lives inside the normal site page. */
#hcgame{
  --bg:#0b0f14; --panel:#121820; --ink:#d7e0ea; --dim:#7b8794;
  --accent:#4bd6a0; --bad:#ff6b6b; --line:#1e2730; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  display:flex;justify-content:center;padding:40px 24px;color:var(--ink);
  font:16px/1.5 var(--mono)
}
#hcgame *{box-sizing:border-box}
#hcgame .wrap{width:100%;max-width:640px}
#hcgame h1{font-size:20px;margin:0 0 2px;color:var(--ink)}
#hcgame .sub{color:var(--dim);font-size:13px;margin:0 0 18px}
#hcgame .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:14px}
#hcgame .meta{display:flex;justify-content:space-between;color:var(--dim);font-size:13px;margin-bottom:14px}
#hcgame .ask{color:var(--ink);font-size:16px;font-weight:600;margin:0 0 12px}
#hcgame .hash{word-break:break-all;background:#0b0f14;border:1px solid var(--line);border-radius:8px;
  padding:14px;font-size:15px;color:var(--accent);margin-bottom:16px}
#hcgame .hash.pre{white-space:pre-wrap;word-break:normal;text-align:left;overflow-x:auto;font-size:13px;line-height:1.45}
#hcgame .r .q.pre{white-space:pre-wrap;word-break:normal;font-size:12px}
#hcgame .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#hcgame button.opt{font:inherit;color:var(--ink);background:#0e141b;border:1px solid var(--line);
  border-radius:8px;padding:12px;cursor:pointer;text-align:left}
#hcgame button.opt:hover{border-color:var(--accent)}
#hcgame button.opt:disabled{cursor:default;opacity:.6}
#hcgame .primary{font:inherit;background:var(--accent);color:#06251a;border:0;
  border-radius:8px;padding:11px 16px;cursor:pointer;font-weight:600}
#hcgame .primary:disabled{opacity:.5;cursor:default}
#hcgame input.name{font:inherit;background:#0b0f14;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:11px;width:100%;margin:10px 0 14px}
#hcgame .row{display:flex;gap:10px;align-items:center}
#hcgame .review{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
#hcgame .r{font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
#hcgame .r .q{color:var(--dim);word-break:break-all}
#hcgame .r.ok .a{color:var(--accent)} #hcgame .r.no .a{color:var(--bad)}
#hcgame .r .tell{color:var(--dim)}
#hcgame .score{font-size:40px;color:var(--accent);margin:8px 0}
#hcgame .board{margin-top:8px}
#hcgame .board .lrow{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line);font-size:14px}
#hcgame .board .rank{color:var(--dim);width:2em}
#hcgame .board .nm{flex:1;padding:0 8px;word-break:break-all}
#hcgame .foot{color:var(--dim);font-size:12px;margin-top:18px;text-align:center}
#hcgame a{color:var(--accent)}
#hcgame .err{color:var(--bad)}
#hcgame .hide{display:none}
#hcgame #verifyNote{margin:0}
#hcgame .tl{text-align:left}
#hcgame .wire{font:inherit;background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:11px 16px;text-decoration:none;cursor:pointer;display:inline-block}
#hcgame .wire:hover{border-color:var(--accent);color:var(--accent)}
#hcgame .boardhead{margin-bottom:10px}
#hcgame .youline{margin:12px 0 0}
#hcgame .board .lrow .pts{color:var(--ink)}
#hcgame .board .lrow .det{color:var(--dim);font-size:12px}