:root {
  --bg: #1b2233;
  --panel: #262f45;
  --line: #3a4663;
  --text: #eef2fb;
  --muted: #9aa7c4;
  --accent: #ffd23f;
  --good: #3ddc84;
  --bad: #ff5d5d;
  --hidden: #8fa3c7;
  --hidden-hi: #b9c8e6;
  --open: #e8edf7;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 50% 0%, #2c3a5c, var(--bg) 70%) fixed;
  color: var(--text); font: 15px/1.4 "Be Vietnam Pro", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
button, input { font: inherit; color: inherit; }
button {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; justify-content: center;
}
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); color: #1b1300; border-color: var(--accent); font-weight: 600; }
button.on { border-color: var(--accent); color: var(--accent); }
input { background: #151b2a; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  width: min(380px, calc(100vw - 32px)); display: grid; gap: 12px; text-align: center; box-shadow: 0 12px 40px #0008;
}
.card h1, .card h2 { margin: 0; }
.card h1 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.card h1 .logo { width: 40px; height: 40px; }
.card h1 .back { color: var(--muted); display: inline-flex; }
.card label { display: grid; gap: 4px; text-align: left; color: var(--muted); }
.sub, .muted { margin: 0; color: var(--muted); }
.muted { font-size: 12px; }
.join { display: flex; gap: 8px; }
#code { text-transform: uppercase; letter-spacing: 3px; text-align: center; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg button:disabled { opacity: 1; }
#home { height: 100%; display: grid; place-items: center; padding: 16px; }

#room { height: 100%; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); overflow-x: auto; }
header #clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 52px; text-align: right; }
.stat { white-space: nowrap; font-size: 14px; }
.stat b { font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); flex: none; }
.dot.on { background: var(--good); }
@media (max-width: 480px) {
  header { gap: 4px; padding-inline: 8px; }
  header button { padding: 6px 8px; }
  header .lbl { display: none; }
}
/* ≤430px: thanh trên nhiều nút nhất — gọn khoảng cách, bỏ icon QR cạnh mã phòng (bấm mã vẫn mời) để nút âm thanh không khuất. */
@media (max-width: 430px) {
  header { gap: 3px; padding-inline: 6px; }
  header button { padding: 6px 6px; }
  #btnCopy .ic { display: none; }
  header #clock { min-width: 0; }
}
/* Thêm nút Cách chơi (i) trên thanh trên: ≤400px thu khoảng cách / đệm nút cho vẫn vừa 360px. */
@media (max-width: 400px) {
  header { gap: 2px; padding-inline: 4px; }
  header button { padding: 6px 4px; }
}
#players { list-style: none; margin: 4px 12px 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; }
#players li { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px 10px; font-size: 13px; white-space: nowrap; box-shadow: inset 4px 0 var(--c, transparent); }
#players li.me { border-color: var(--accent); }
#players li.off { opacity: .45; }
#players b { color: var(--accent); }

#boardWrap { position: relative; flex: 1; min-height: 0; margin: 8px; }
#board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#cells { position: absolute; inset: 0; display: grid; gap: 2px; }
.m {
  display: grid; place-items: center; border-radius: 4px; cursor: pointer; font-weight: 800;
  font-size: calc(var(--s) * .6); line-height: 1; transition: background .08s;
  background: linear-gradient(160deg, var(--hidden-hi), var(--hidden)); box-shadow: inset 0 -2px #0003;
}
.m:hover { filter: brightness(1.08); }
.m.o { background: var(--open); box-shadow: none; cursor: default; }
/* Cờ / mìn / nổ: icon lucide (flag, bomb, flame) làm mask để tô màu. */
.m.f::after, .m.x::after, .m.b::after { content: ''; width: 62%; aspect-ratio: 1; background: var(--ic); mask: var(--mk) center / contain no-repeat; }
.m.f::after { --ic: #e0312f; --mk: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2015s1-1%204-1%205%202%208%202%204-1%204-1V3s-1%201-4%201-5-2-8-2-4%201-4%201z'%2F%3E%3Cline%20x1%3D'4'%20x2%3D'4'%20y1%3D'22'%20y2%3D'15'%2F%3E%3C%2Fsvg%3E"); }
.m.x::after { --ic: #1b2233; --mk: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'11'%20cy%3D'13'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M14.35%204.65%2016.3%202.7a2.41%202.41%200%200%201%203.4%200l1.6%201.6a2.4%202.4%200%200%201%200%203.4l-1.95%201.95'%2F%3E%3Cpath%20d%3D'm22%202-1.5%201.5'%2F%3E%3C%2Fsvg%3E"); }
.m.b { background: #ff8a8a; }
.m.b::after { --ic: #7a0000; --mk: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.153.433-2.294%201-3a2.5%202.5%200%200%200%202.5%202.5z'%2F%3E%3C%2Fsvg%3E"); }
.m.wf { background: #ffd0d0; }
.n1 { color: #1c5fd6; } .n2 { color: #1d8a3a; } .n3 { color: #d62828; } .n4 { color: #182c8f; }
.n5 { color: #8a1d1d; } .n6 { color: #0d8a8a; } .n7 { color: #222; } .n8 { color: #666; }
#board.shake { animation: shake .3s; }
@keyframes shake { 25% { margin-left: -6px; } 75% { margin-left: 6px; } }

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cursor { position: absolute; transition: left 80ms linear, top 80ms linear; color: var(--c); }
.cursor .ic { width: 22px; height: 22px; fill: var(--c); stroke: #1b2233; stroke-width: 1.5; filter: drop-shadow(0 1px 2px #0008); }
.cursor span { position: absolute; left: 16px; top: 18px; background: var(--c); color: #1b2233; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.ping { position: absolute; border: 3px solid var(--c); border-radius: 6px; animation: ping .5s ease-out 3; }
.ping span { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -2px); background: var(--c); color: #1b2233; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--c); } 100% { box-shadow: 0 0 0 14px transparent; } }

#overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #1b2233b0; z-index: 5; }
#ovScore { margin: 0; color: var(--accent); font-weight: 600; }
#btnResult { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; z-index: 6; box-shadow: 0 6px 20px #0008; }


/* ---------- Skin cổ điển: ảnh từ MS-Texture (MIT, xem skins/LICENSE) ---------- */
body.skin-xp .m, body.skin-choco .m {
  border-radius: 0; box-shadow: none; background: center / 100% 100% no-repeat; color: transparent; font-size: 0;
}
body.skin-xp .m { background-image: url(skins/xp/cellup.svg); }
body.skin-xp .m.o { background-image: url(skins/xp/celldown.svg); }
body.skin-xp .m.n1 { background-image: url(skins/xp/cell1.svg); }
body.skin-xp .m.n2 { background-image: url(skins/xp/cell2.svg); }
body.skin-xp .m.n3 { background-image: url(skins/xp/cell3.svg); }
body.skin-xp .m.n4 { background-image: url(skins/xp/cell4.svg); }
body.skin-xp .m.n5 { background-image: url(skins/xp/cell5.svg); }
body.skin-xp .m.n6 { background-image: url(skins/xp/cell6.svg); }
body.skin-xp .m.n7 { background-image: url(skins/xp/cell7.svg); }
body.skin-xp .m.n8 { background-image: url(skins/xp/cell8.svg); }
body.skin-xp .m.f { background-image: url(skins/xp/cellflag.svg); }
body.skin-xp .m.b { background-image: url(skins/xp/blast.svg); }
body.skin-xp .m.x { background-image: url(skins/xp/cellmine.svg); }
body.skin-xp .m.wf { background-image: url(skins/xp/falsemine.svg); }
body.skin-xp .m::after { content: none !important; }
body.skin-choco .m { background-image: url(skins/choco/cellup.png); }
body.skin-choco .m.o { background-image: url(skins/choco/cell0.png); }
body.skin-choco .m.n1 { background-image: url(skins/choco/cell1.png); }
body.skin-choco .m.n2 { background-image: url(skins/choco/cell2.png); }
body.skin-choco .m.n3 { background-image: url(skins/choco/cell3.png); }
body.skin-choco .m.n4 { background-image: url(skins/choco/cell4.png); }
body.skin-choco .m.n5 { background-image: url(skins/choco/cell5.png); }
body.skin-choco .m.n6 { background-image: url(skins/choco/cell6.png); }
body.skin-choco .m.n7 { background-image: url(skins/choco/cell7.png); }
body.skin-choco .m.n8 { background-image: url(skins/choco/cell8.png); }
body.skin-choco .m.b, body.skin-choco .m.wf { background-image: url(skins/choco/celldown.png); }
/* Socola không có ảnh cờ/mìn -> dùng icon mask như skin Hiện đại. */
/* Skin cổ điển: khung xám nổi kiểu Windows, mặt cười + đồng hồ LED. */
body.skin-xp #board, body.skin-choco #board { outline: 6px solid #bdbdbd; box-shadow: 0 0 0 9px #7b7b7b; }
#face { display: none; padding: 2px; background: none; border: 0; }
#face img { width: 32px; height: 32px; display: block; }
body.skin-xp #face, body.skin-choco #face { display: inline-flex; }
.led { display: none; background: #000; padding: 2px; border-radius: 2px; }
.led img { width: 13px; height: 23px; display: block; }
body.skin-xp .led, body.skin-choco .led { display: inline-flex; }
body.skin-xp #minesLeft, body.skin-choco #minesLeft, body.skin-xp #clock, body.skin-choco #clock { display: none; }
header #ledTime { margin-left: auto; }
body:not(.skin-xp):not(.skin-choco) #ledTime { margin-left: 0; }