/* Theme tối là mặc định; JS gán data-theme="light|dark". Màu --k*, --op, --hi... được canvas đọc lại */
:root{--bg:#16181f;--panel:#232836;--line:#343b4f;--fg:#e6e8ee;--mute:#8b93a5;--acc:#f5b83d;
  --p1:#262d40;--p2:#0b0d12;--b1:#363f55;--b2:#272d3e;--b3:#10131a;
  --fr:#2c3448;--fe:#4a5573;--k1:#6d7a9c;--k2:#64718f;--hi:#ffffff59;--sh:#0000006e;
  --op:#11141b;--ish:#0000009e;--gr:#0a0c10;--ol:#fff}
[data-theme=light]{--bg:#eceef3;--panel:#f6f8fc;--line:#c5cde0;--fg:#1c2030;--mute:#667086;
  --p1:#eef2fb;--p2:#aab6d0;--b1:#fff;--b2:#dfe5f1;--b3:#9ba8c6;
  --fr:#fff;--fe:#fff;--k1:#b5c1de;--k2:#aab7d6;--hi:#ffffffd9;--sh:#4f608e55;
  --op:#e9edf6;--ish:#5b6b9466;--gr:#97a4c4;--ol:#111}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{position:relative;display:flex;flex-direction:column;height:100dvh;color:var(--fg);
  background:radial-gradient(120% 90% at 50% 0,var(--p1),var(--p2));
  font:500 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{flex:none;display:flex;flex-direction:column;gap:10px;padding:10px;background:linear-gradient(var(--b1),var(--panel));
  border-bottom:1px solid var(--line);box-shadow:0 4px 14px #0005}
.r1,.r2{display:flex;align-items:center;gap:10px}
.r1{justify-content:center}
.r2{justify-content:space-between;padding:0 4px}
#home{display:block;flex:none;transition:transform .15s}
#home:hover{transform:rotate(-8deg) scale(1.08)}
#logo{width:36px;height:36px;display:block;filter:drop-shadow(0 2px 2px #0006)}
/* Nút 3D: nổi lên, nhấn xuống khi bấm */
button{font:inherit;color:var(--fg);background:linear-gradient(var(--b1),var(--b2));border:1px solid var(--line);border-radius:10px;padding:7px 10px;cursor:pointer;
  box-shadow:0 3px 0 var(--b3),0 6px 10px #0004,inset 0 1px 0 #ffffff40;transition:transform .08s,box-shadow .08s}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(3px);box-shadow:0 0 0 var(--b3),0 1px 3px #0004,inset 0 1px 3px #0003}
button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#modes{display:flex;gap:3px;padding:4px;border-radius:12px;min-width:0;background:#0000002e;box-shadow:inset 0 2px 5px #0006,0 1px 0 #ffffff26}
#modes button{border:0;background:none;box-shadow:none;padding:6px 10px;color:var(--mute);white-space:nowrap}
#modes button:active{transform:none}
#modes button.on{color:#1a1405;font-weight:700;background:linear-gradient(#ffd56b,#f0a41c);box-shadow:0 2px 0 #a8700a,0 4px 8px #0005,inset 0 1px 0 #fff9}
.rb{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1}
.rb svg{width:24px;height:24px;filter:drop-shadow(0 1px 1px #0005)}
.rb.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 3px 0 var(--b3),0 6px 10px #0004}
.lcd{min-width:66px;text-align:center;padding:2px 8px;border-radius:8px;background:linear-gradient(#050608,#14161c);color:#ff4d4d;
  font:700 26px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;text-shadow:0 0 8px currentColor;
  box-shadow:inset 0 3px 7px #000,0 1px 0 #ffffff33,0 0 0 2px var(--b3)}
.lcd.mines{color:#ff9f1c}
#fgw,#fw{position:relative}
/* Bảng chọn 6 kiểu cờ (nút cờ ở mép phải nên bảng mở về bên trái) */
#fp{display:none;position:absolute;right:0;top:100%;margin-top:8px;gap:6px;padding:6px;z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:0 10px 28px #0007}
#fp::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
#fgw.open #fp{display:flex}
@media (hover:hover){#fgw:hover #fp{display:flex}}
#fp .rb{width:40px;height:40px}
/* Bong bóng thoại của mặt cười */
#msg{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:30;padding:6px 12px;border-radius:12px;
  background:var(--fg);color:var(--bg);font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px #0006;animation:pop .18s ease-out}
#msg::before{content:"";position:absolute;left:50%;top:-6px;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:var(--fg)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-6px)}}
main{flex:1;position:relative;min-height:0;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:pointer}
/* PC/tablet rộng: menu 2 hàng nổi ở góc trên bên trái, bàn chơi canh giữa màn hình */
@media (min-width:700px){
  header{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));z-index:10;
    border:1px solid var(--line);border-radius:18px;box-shadow:0 3px 0 var(--b3),0 14px 30px #0006,inset 0 1px 0 #ffffff33}
  .r1{justify-content:flex-start}
}
@media (max-width:420px){#modes button{padding:6px 8px;font-size:14px}.r1{gap:6px}}
@media (prefers-reduced-motion:reduce){#msg{animation:none}button,#home{transition:none}}