/* Token dùng chung. Bản song song cho canvas nằm ở hằng T trong constants.js —
   sửa màu thì sửa cả hai chỗ. */
:root {
  --ink:#12131f; --panel:#1e2036; --panel-2:#23253c; --line:#34365a;
  --text:#f5f0e8; --dim:#b8b2c8; --faint:#8f89a3;

  --primary:#ff8a3d;  --primary-d:#b23315;
  --info:#4fc3f7;     --info-d:#1c5f95;
  --gold:#ffc53d;     --good:#34d399; --bad:#ff5a5f;
  --p1:#ff4d4d; --p2:#c084fc; --p3:#4fc3f7; --p4:#22c55e;

  --r-sm:10px; --r:14px; --r-lg:18px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  --font-head:'Fredoka','Segoe UI',system-ui,sans-serif;
  --font-body:'Nunito','Segoe UI',system-ui,sans-serif;

  /* Claymorphism: bóng ngoài mềm + gờ trong sáng */
  --clay:0 6px 0 rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.14);
  --clay-press:0 2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.1);
}

/* ---------- Chế độ SÁNG ---------- */
/* Chỉ đảo các màu nền/chữ; giữ nguyên màu nhấn (cam/xanh/vàng, màu nhân vật) để
   hai giao diện vẫn cùng một "chất". Lớp phủ trong ván (canvas, nút cảm ứng) cố
   tình để tối vì nó nằm trên nền game tối. */
:root[data-theme="light"] {
  --ink:#eceaf2; --panel:#ffffff; --panel-2:#f5f2fa; --line:#d7d2e2;
  --text:#20212e; --dim:#59556b; --faint:#7c7790;
  --info-d:#2f7fb8;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(700px 420px at 12% -8%, #ff8a3d18, transparent 70%),
    radial-gradient(680px 400px at 88% -6%, #4fc3f718, transparent 70%),
    var(--ink);
}
:root[data-theme="light"] button.ghost { --btn:#e7e3f0; --btn-d:#d5d0e2; --btn-sh:#b8b2c8; color:var(--text); }
:root[data-theme="light"] .kbd,
:root[data-theme="light"] input[type=text] { color:var(--text); }
/* Chữ vàng/hổ phách sáng vốn hợp nền tối; trên nền sáng thì làm đậm lại cho đọc rõ */
:root[data-theme="light"] .howto > summary,
:root[data-theme="light"] .howto > summary:hover,
:root[data-theme="light"] .howto b { color:#c9791a; }
:root[data-theme="light"] #lobbyCode,
:root[data-theme="light"] .rtitle,
:root[data-theme="light"] #endMoney { color:#c0850f; }

/* Nút đổi sáng/tối — góc trên phải, ẩn khi đang trong ván (nhường nút ⚙️) */
#themeBtn {
  position:fixed; top:12px; right:12px; z-index:60;
  width:44px; height:44px; padding:0; font-size:20px; line-height:1;
  border-radius:50%; min-height:0;
}
body.ingame #themeBtn { display:none; }

* { margin:0; padding:0; box-sizing:border-box; }
body {
  /* hai quầng sáng cam/xanh rất mờ ở hai góc trên, cho nền bớt phẳng */
  background:
    radial-gradient(700px 420px at 12% -8%, #ff8a3d22, transparent 70%),
    radial-gradient(680px 400px at 88% -6%, #4fc3f722, transparent 70%),
    var(--ink);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:var(--s4); user-select:none;
}
h1,h2,h3 { font-family:var(--font-head); }
/* Đang trong ván: khoá trang lại — không cuộn, không kéo lên xuống.
   Phóng to (Ctrl +) hay mở F12 chỉ làm khung nhìn nhỏ đi, game tự co lại vừa vặn. */
html.ingame, body.ingame {
  height:100%; overflow:hidden;
  overscroll-behavior:none; touch-action:none;
}
body.ingame { position:fixed; inset:0; padding:0; }
body.ingame #brand { display:none; }
#brand { text-align:center; margin-bottom:4px; }
h1.title {
  font-size:clamp(30px, 7vw, 48px); margin:14px 0 4px;
  background:linear-gradient(90deg,#ffb347,#ff5a5f,#ff8fd6,#ffb347);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:1px; font-weight:700;   /* Fredoka chỉ có tới 700 */
  animation:titleShine 6s linear infinite;
}
@keyframes titleShine { to { background-position:200% center; } }
@media (prefers-reduced-motion:reduce) { h1.title { animation:none; } }
.tagline { color:var(--dim); margin-bottom:18px; font-style:italic; font-size:14px; }
.screen { display:none; flex-direction:column; align-items:center; width:100%; max-width:900px; }
.screen.on { display:flex; }
/* Nút "clay": dày, bo nhiều, lún xuống khi bấm. Cao tối thiểu 44px cho ngón tay. */
button {
  --btn:#ff8a3d; --btn-d:#f4552e; --btn-sh:var(--primary-d);
  background:linear-gradient(180deg,var(--btn),var(--btn-d)); color:#fff;
  border:none; border-radius:var(--r); min-height:44px; padding:12px 22px;
  font-size:15px; font-weight:700; font-family:var(--font-head); letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 5px 0 var(--btn-sh), 0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.22);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover { filter:brightness(1.08); }
button:active {
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--btn-sh), 0 2px 6px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.16);
}
button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
button.alt   { --btn:#4fc3f7; --btn-d:#2f8fd4; --btn-sh:var(--info-d); }
button.ghost { --btn:#33355a; --btn-d:#2a2c48; --btn-sh:#191a30; }
button.small { min-height:36px; padding:8px 14px; font-size:13px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion:reduce) { button { transition:none; } }

input[type=text] {
  background:var(--ink); border:2px solid var(--line); color:var(--text); border-radius:var(--r-sm);
  padding:12px; font-size:16px;   /* 16px: iOS không tự phóng to khi focus */
  width:100%; margin-bottom:10px; text-align:center;
  font-family:var(--font-body); font-weight:600; text-transform:uppercase;
  min-height:44px; transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=text]::placeholder { color:#5c5875; letter-spacing:normal; font-weight:400; }
input.name { text-transform:none; }
.btnrow { display:flex; gap:var(--s3); margin-top:var(--s5); flex-wrap:wrap; justify-content:center; }
.err { color:#ff8a8a; min-height:20px; font-size:13px; font-weight:600; }
.waiting { color:var(--faint); font-style:italic; }