/* Tam Quốc Sát – BGVN. Tông giấy dó sáng, sơn mài đỏ, vàng kim, mực tàu. */
:root{
  --bg:#fbf3e3;--bg2:#f4e6c8;--ink:#2b211c;--muted:#8a7560;--panel:#fffaf0;--line:#ead9b8;
  --red:#c8322a;--red2:#e0573d;--gold:#e0a83a;--gold2:#f6d27a;--jade:#2f9e5b;--blue:#3a6fd8;
  --wei:#3a6fd8;--shu:#d8423a;--wu:#2f9e5b;--qun:#7d808c;
  --shadow:0 10px 28px -12px #6b3a1a66,0 2px 6px #6b3a1a1a;--shadow-lg:0 18px 40px -14px #6b3a1a88,0 4px 10px #6b3a1a22;
  --han:'LXGW WenKai TC','KaiTi','STKaiti',serif;
  --fx:1;--cw:96px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink);font:500 15px/1.45 'Noto Serif','Times New Roman',serif;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,.btn,.banner,.logo .vn{font-family:'Noto Serif',serif}
.han{font-family:var(--han);font-weight:700}
.red{color:var(--red)}
.muted{color:var(--muted)}.small{font-size:12.5px}
.center-txt{text-align:center}
.hidden{display:none!important}
.bg-clouds{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  background:radial-gradient(ellipse at 20% 0%,#fff6df 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#f7dcc0 0,transparent 50%),var(--bg)}
.bg-clouds i{position:absolute;width:260px;height:110px;opacity:.35;background:radial-gradient(circle at 30% 60%,#fff 0 28px,transparent 29px),radial-gradient(circle at 55% 40%,#fff 0 36px,transparent 37px),radial-gradient(circle at 78% 62%,#fff 0 26px,transparent 27px);animation:cloud 40s linear infinite}
.bg-clouds i:nth-child(1){top:8%;left:-10%}.bg-clouds i:nth-child(2){top:55%;left:-30%;animation-delay:-14s;transform:scale(1.4)}.bg-clouds i:nth-child(3){top:80%;left:-20%;animation-delay:-27s}
@keyframes cloud{to{translate:130vw 0}}
.screen{position:fixed;inset:0;display:none;z-index:1}
.screen.active{display:flex}

/* ---------- nút ---------- */
.btn{border:0;border-radius:14px;padding:9px 16px;background:#fff;box-shadow:var(--shadow),inset 0 -3px 0 #0000000f;font-weight:800;font-size:16px;cursor:pointer;min-height:42px;transition:transform .12s,filter .12s;line-height:1.15}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}.btn:active{transform:translateY(1px) scale(.98)}
.btn.big{padding:13px 20px;font-size:19px;width:100%}
.btn.sm{min-height:34px;padding:5px 12px;font-size:14px}
.btn.pri{background:linear-gradient(135deg,#d6452f,#e98a2e);color:#fff;box-shadow:0 10px 22px -8px #c8322a99,inset 0 -4px 0 #0002}
.btn.red{background:linear-gradient(135deg,#c8322a,#9e1f1a);color:#fff}
.btn.ghost{background:#fffaf0cc;box-shadow:inset 0 0 0 2px var(--line)}
.btn.sk{background:linear-gradient(135deg,#fff6dd,#f3d991);box-shadow:inset 0 0 0 2px #e0a83a,0 6px 14px -8px #b7791f}
.btn:disabled{opacity:.45;pointer-events:none}
.chip{border:0;background:#fff;border-radius:999px;padding:7px 13px;box-shadow:var(--shadow);font-weight:700;cursor:pointer;min-height:36px}
.chip.sm{padding:3px 9px;font-size:12px;min-height:26px}
.chip.on{background:var(--ink);color:#fff}
.chip.ic{width:40px;height:40px;padding:0;display:inline-grid;place-items:center;font-size:18px}
select.chip{padding:6px 10px;appearance:auto}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* ---------- trang chủ ---------- */
#screen-home{align-items:center;justify-content:center;padding:62px 16px 16px;overflow:auto}
.back-hub{position:absolute;left:14px;top:12px;color:var(--ink);text-decoration:none;font-weight:800;background:#fff;padding:7px 13px;border-radius:999px;box-shadow:var(--shadow);z-index:2;font-size:14px}
.home-card{width:min(430px,100%);background:#fffaf0ee;backdrop-filter:blur(10px);border-radius:30px;padding:24px 22px 16px;box-shadow:var(--shadow-lg);text-align:center;margin:auto;border:2px solid #f0dcb4;position:relative}
.home-card::before{content:'';position:absolute;inset:7px;border:1.5px dashed #e3c58f;border-radius:24px;pointer-events:none}
.hero{height:118px;position:relative;margin:4px 0 0}
.hero-g{position:absolute;left:50%;top:10px;width:74px;height:74px;margin-left:-37px;transform:translateY(var(--y)) rotate(var(--r)) translateX(calc(var(--r) * 5.4));transform-origin:50% 160%;animation:heroIn .7s backwards;animation-delay:var(--d);filter:drop-shadow(0 6px 8px #6b3a1a44)}
.hero-g .portrait{width:100%;height:100%}
.hero-c{position:absolute;left:4%;top:34px;transform:rotate(-14deg);--cw:52px;animation:heroIn .7s .5s backwards}.hero-c.r{left:auto;right:4%;transform:rotate(14deg)}
@keyframes heroIn{from{opacity:0;translate:0 26px}}
.logo{margin:6px 0 4px;line-height:1}
.logo .han{display:block;font-size:54px;color:var(--red);letter-spacing:4px;text-shadow:2px 2px 0 #f6d27a,4px 5px 0 #6b3a1a22}
.logo .vn{display:block;font-size:30px;font-weight:800;color:var(--ink);margin-top:2px}
.tag{color:var(--muted);margin:0 0 14px;font-size:14px}
.fld{display:block;text-align:left;margin-bottom:12px}.fld span{font-size:13px;color:var(--muted);font-weight:700}
input#name,.join-row input{width:100%;border:2px solid var(--line);border-radius:14px;padding:11px 14px;font-weight:700;font-size:17px;background:#fff;outline:none;min-height:46px}
input:focus{border-color:var(--gold)}
.btn-col{display:grid;gap:10px}
.join-row{display:flex;gap:8px}.join-row input{text-transform:uppercase;letter-spacing:4px;text-align:center}
.home-tools{display:flex;gap:8px;justify-content:center;margin:14px 0 6px;flex-wrap:wrap}
.note{font-size:11.5px;color:var(--muted);margin:8px 0 0}

/* ---------- sảnh ---------- */
#screen-lobby{overflow:auto;padding:14px;display:none}
#screen-lobby.active{display:block}
.lobby{width:min(900px,100%);margin:0 auto}
.lobby-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.code-box{background:#fff;border-radius:16px;padding:8px 14px;box-shadow:var(--shadow);font-weight:700}
.code-box b{font-family:'Noto Serif';font-size:24px;letter-spacing:4px;color:var(--red);margin:0 6px}
.lobby-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:720px){.lobby-grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border-radius:22px;padding:16px;box-shadow:var(--shadow);border:1.5px solid #f0dcb4}
.panel h3{margin:0 0 10px;font-size:22px}.panel h3 small{color:var(--muted);font-size:15px}
.plist{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;background:#fdf3df;border-radius:14px;padding:6px 8px;font-weight:700}
.plist li small{color:var(--muted);font-weight:600}.plist .off{color:var(--red)}
.plist li .x{margin-left:auto;border:0;background:#ffe3dc;color:var(--red);border-radius:10px;width:34px;height:34px;cursor:pointer;font-weight:900}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:'Noto Serif';font-weight:800;font-size:17px;flex:none;box-shadow:inset 0 -3px 0 #0002}
.role-preview{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.wait{text-align:center;color:var(--muted)}
.role-desc{width:100%;font-size:13px;margin-top:6px}.role-desc p{margin:4px 0}
#btn-start{position:sticky;bottom:10px;z-index:3}

/* ---------- vai trò ---------- */
.rchip{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:800;white-space:nowrap;background:#eee;color:#555;line-height:1.5}
.rchip.big{font-size:16px;padding:4px 14px}
.r-lord{background:linear-gradient(135deg,#f6d27a,#e0a83a);color:#5a3a00}
.r-loyal{background:#fde9c4;color:#8a5a10}
.r-rebel{background:#fbd5cf;color:#9e1f1a}
.r-spy{background:#d5ecdf;color:#1f5c3a}
.r-hidden{background:#efe6d6;color:#8a7560}

/* ---------- lá bài ---------- */
.qcard{--kc:#c8322a;width:var(--cw);height:calc(var(--cw)*1.42);border-radius:calc(var(--cw)*.1);background:linear-gradient(180deg,#fffdf6,#fbf0d8);border:max(1.5px,calc(var(--cw)*.025)) solid var(--kc);box-shadow:0 4px 10px -4px #6b3a1a66;position:relative;display:flex;flex-direction:column;overflow:hidden;font-size:calc(var(--cw)*.12);flex:none;user-select:none;color:var(--ink)}
.qcard.k-basic{--kc:#c8322a;--kb:#fde4dc}.qcard.k-trick{--kc:#b7791f;--kb:#fbeccb}.qcard.k-equip{--kc:#2f7d5b;--kb:#dcf0e4}
.qcard::after{content:'';position:absolute;inset:calc(var(--cw)*.035);border:1px solid color-mix(in srgb,var(--kc) 35%,transparent);border-radius:calc(var(--cw)*.07);pointer-events:none}
.qcard .ctop{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--cw)*.05) calc(var(--cw)*.07) 0;position:relative;z-index:1}
.qcard .idx{font-weight:800;font-size:calc(var(--cw)*.15);line-height:1;font-family:'Noto Serif'}
.qcard .idx.red{color:var(--red)}
.qcard .ktag{font-size:calc(var(--cw)*.085);font-weight:800;background:var(--kc);color:#fff;border-radius:99px;padding:0 calc(var(--cw)*.05);line-height:1.5;white-space:nowrap}
.qcard .art{flex:1;position:relative;display:grid;place-items:center;min-height:0}
.qcard .art .han{position:absolute;font-size:calc(var(--cw)*.74);color:var(--kc);opacity:.2;line-height:1}
.qcard .art .emo{font-size:calc(var(--cw)*.36);position:relative;filter:drop-shadow(0 2px 2px #0002)}
.qcard .cicons{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;padding:0 2px;min-height:calc(var(--cw)*.16)}
.qcard .ic{font-style:normal;font-size:calc(var(--cw)*.095);background:var(--kb);border-radius:4px;padding:0 3px;font-weight:800;line-height:1.5;white-space:nowrap}
.qcard .cname{background:var(--kc);color:#fff;text-align:center;font-weight:800;font-size:calc(var(--cw)*.118);line-height:1.12;padding:calc(var(--cw)*.04) 2px calc(var(--cw)*.05);min-height:calc(var(--cw)*.22);display:grid;place-items:center;font-family:'Noto Serif'}
.qcard.sm{--cw:58px}.qcard.xs{--cw:40px}.qcard.lg{--cw:150px}
.qcard.sm .ktag,.qcard.xs .ktag,.qcard.xs .cicons,.qcard.xs .ctop{display:none}
.qcard.sm .cicons{display:none}
.qcard.xs .cname{font-size:8px}
.qcard.back{background:repeating-linear-gradient(45deg,#b8342a 0 6px,#a82c23 6px 12px);border-color:#f6d27a}
.qcard.back .back-in{position:absolute;inset:12%;border:2px solid #f6d27a;border-radius:8px;display:grid;place-items:center;background:#c8322acc}
.qcard.back .back-in span{font-family:var(--han);font-weight:700;color:#fff4e0;font-size:calc(var(--cw)*.42)}

/* ---------- bàn chơi ---------- */
#screen-game{flex-direction:column;height:100vh;height:100dvh}
.topbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(180deg,#a8322a,#8e271f);color:#fff4e0;box-shadow:0 2px 10px #6b3a1a55;z-index:20;position:relative;min-height:52px}
.topbar .chip{background:#fff4e01f;color:#fff4e0;box-shadow:inset 0 0 0 1.5px #fff4e055}
.tb-logo{font-size:22px;color:#f6d27a;letter-spacing:2px}
.turn-info{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.timer{display:none;position:relative;border-radius:999px;background:#fff4e022;padding:3px 10px;font-size:13px;font-weight:700;overflow:hidden;white-space:nowrap}
.timer.on{display:block}.timer.mine{background:#f6d27a;color:#5a2a00}.timer.low{animation:pulse .5s infinite alternate}
.timer i{position:absolute;left:0;bottom:0;height:3px;background:currentColor;opacity:.6;transition:width .25s linear}
@keyframes pulse{to{filter:brightness(1.25);transform:scale(1.05)}}
.tb-right{display:flex;gap:6px;align-items:center;margin-left:auto}
.tb-opts{display:flex;gap:6px;align-items:center}
.tb-opts select{max-width:110px}
#btn-more{display:none}
.table-wrap{flex:1;min-height:0;position:relative;padding:6px 8px 0}
.table{position:relative;width:100%;height:100%;max-width:1200px;margin:0 auto}
.felt{position:absolute;inset:8% 8% 4%;border-radius:48% / 42%;background:radial-gradient(ellipse at 50% 40%,#fbecc9 0,#f1d9a6 60%,#e6c487 100%);box-shadow:0 0 0 8px #a8432f,0 0 0 11px #f6d27a,0 0 0 14px #8e271f,0 18px 40px -10px #6b3a1a88,inset 0 0 40px #b3863f55;display:grid;place-items:center;overflow:hidden}
.felt .han{font-size:min(22vw,180px);color:#a8432f;opacity:.07;letter-spacing:10px}
.center{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + var(--cpush,0px)));width:min(440px,50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:4}
.phases{display:flex;gap:2px;flex-wrap:nowrap;justify-content:center;max-width:100%}
.phases span{font-size:11px;font-weight:700;padding:1px 6px;white-space:nowrap;border-radius:99px;background:#fffaf099;color:var(--muted)}
.phases span.on{background:var(--red);color:#fff;box-shadow:0 0 0 2px #f6d27a}
.phases span.skip{text-decoration:line-through;opacity:.6}
.piles{display:flex;gap:14px;align-items:center}
.pile{position:relative;display:grid;place-items:center}
.pile .cnt{position:absolute;right:-8px;bottom:-6px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;border-radius:99px;padding:0 6px}
.pile-empty{width:58px;height:82px;border:2px dashed #a8432f66;border-radius:8px;display:grid;place-items:center;font-size:10px;color:var(--muted);text-align:center}
.prompt{background:var(--panel);border-radius:14px;padding:8px 12px;text-align:center;box-shadow:var(--shadow);max-width:100%;border:1.5px solid #f0dcb4}
.prompt .pt{font-weight:600;font-size:14.5px;line-height:1.3}
.prompt .ps{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.prompt.mine{box-shadow:0 0 0 3px var(--gold),var(--shadow-lg);animation:pop .25s}
.prompt.quiet{background:#fffaf0aa;box-shadow:none;font-size:13px}
.prompt .row{margin-top:6px}
.prompt .peek{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:5px}
.prompt .pk{font-size:11px;background:#fdf3df;border-radius:6px;padding:1px 5px;font-weight:700}.prompt .pk.red small{color:var(--red)}
@keyframes pop{from{transform:scale(.92)}}
.feed{font-size:11.5px;color:#6b5a48;text-align:center;line-height:1.35;max-width:100%}
.feed div{opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed div.new{opacity:1;font-weight:600}

/* ghế */
.seat{position:absolute;transform:translate(-50%,-50%);width:112px;display:flex;flex-direction:column;align-items:center;z-index:5;cursor:pointer;transition:transform .15s,opacity .2s}
.seat{--kc:#b9a888}.k-wei{--kc:var(--wei)}.k-shu{--kc:var(--shu)}.k-wu{--kc:var(--wu)}.k-qun{--kc:var(--qun)}
.seat .ava{position:relative;width:62px;height:62px;border-radius:16px;box-shadow:0 0 0 3px var(--kc),0 0 0 5px #fffaf0,0 8px 16px -6px #6b3a1a88;background:#fffaf0}
.seat .ava .portrait,.me-ava .portrait{width:100%;height:100%;display:block;border-radius:inherit}
.seat .dist{position:absolute;right:-9px;top:-9px;min-width:22px;height:22px;border-radius:50%;background:#fffaf0;color:var(--ink);font-weight:800;font-size:12px;display:grid;place-items:center;box-shadow:0 0 0 2px var(--ink)}
.seat .dist.in{background:var(--red);color:#fff;box-shadow:0 0 0 2px #fff}
.seat .rip{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;background:#0006;border-radius:inherit;color:#fff}
.seat .conn,.seat .buff{position:absolute;left:-8px;top:-8px;font-size:15px;background:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;box-shadow:var(--shadow)}
.seat .buff{left:auto;right:-8px;top:auto;bottom:-6px}
.seat .plate{margin-top:-4px;background:var(--panel);border-radius:10px;padding:6px 5px 4px;width:100%;text-align:center;box-shadow:var(--shadow);border-top:3px solid var(--kc);display:flex;flex-direction:column;align-items:center;gap:1px}
.seat .pname{font-weight:800;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.seat .gname{font-size:11px;color:var(--muted);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.seat .meta{display:flex;gap:2px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:11px;font-weight:800;min-height:16px}
.hc{display:inline-flex;align-items:center;gap:2px;background:#fdf3df;border-radius:5px;padding:0 4px;line-height:1.4}
.hc i{width:7px;height:10px;border-radius:2px;background:#b8342a;box-shadow:1px -1px 0 #f6d27a}
.eqi{display:inline-flex;align-items:center;background:#dcf0e4;border-radius:5px;padding:0 2px;line-height:1.4;font-size:11px}
.eqi b{font-size:9px;margin-left:1px}
.jdi{background:#fbeccb;border-radius:5px;padding:0 2px;line-height:1.4;box-shadow:inset 0 0 0 1px #b7791f}
.hp{display:flex;gap:2px;justify-content:center;align-items:center;min-height:10px}
.hp i{width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e6d9c2;box-shadow:inset 0 0 0 1px #0002}
.hp i.on.g{background:radial-gradient(circle at 35% 35%,#8be0a8,#2f9e5b)}.hp i.on.y{background:radial-gradient(circle at 35% 35%,#ffe08a,#d9a21b)}.hp i.on.r{background:radial-gradient(circle at 35% 35%,#ff9a8a,#c8322a)}
.hp.big i{width:13px;height:13px}
.hp.num{gap:3px;font-size:11px}
.seat .rchip{font-size:10px;padding:0 6px;margin-top:1px}
.seat.current .ava{box-shadow:0 0 0 3px var(--gold),0 0 0 6px #fff4cf,0 0 24px 4px #f6c34d;animation:breathe 1.6s infinite}
.seat.current .plate{box-shadow:0 0 0 2px var(--gold),var(--shadow)}
@keyframes breathe{50%{box-shadow:0 0 0 3px var(--gold),0 0 0 6px #fff4cf,0 0 34px 8px #f6c34d}}
.seat.waiting .plate{box-shadow:0 0 0 2px var(--blue),0 0 14px #3a6fd877}
.seat.waiting .plate::after{content:'…';position:absolute;right:4px;bottom:2px;font-weight:900;color:var(--blue);animation:pulse .5s infinite alternate}
.seat.dying .ava{animation:dying .6s infinite alternate}
@keyframes dying{to{box-shadow:0 0 0 3px var(--red),0 0 22px 6px #ff5a4a}}
.seat.dead{opacity:.62;filter:grayscale(.85)}
.seat.targetable .ava{box-shadow:0 0 0 3px var(--red),0 0 0 6px #ffd9d2,0 0 22px #ff5a4a;animation:aim 1s infinite}
.seat.targetable:hover{transform:translate(-50%,-50%) scale(1.06)}
.seat.selected .ava{box-shadow:0 0 0 4px var(--red),0 0 0 8px var(--gold),0 0 26px #ff5a4a}
.seat.selected::after{content:'🎯';position:absolute;top:18px;font-size:22px;filter:drop-shadow(0 2px 2px #0006)}
.seat.out{opacity:.45;filter:grayscale(.6)}
@keyframes aim{50%{box-shadow:0 0 0 3px var(--red),0 0 0 8px #ffd9d2aa,0 0 30px #ff5a4a}}

/* ghế gọn: bàn thấp, đông người */
.seat.compact{flex-direction:row;align-items:center;width:118px}
.seat.compact .ava{width:38px;height:38px;border-radius:10px;flex:none;z-index:1}
.seat.compact .plate{margin:0 0 0 -6px;padding:3px 4px 3px 9px;align-items:flex-start;text-align:left;border-top:0;border-left:3px solid var(--kc);min-width:0}
.seat.compact .gname{display:none}
.seat.compact .hp,.seat.compact .meta{justify-content:flex-start}
.seat.compact .dist{right:auto;left:-7px;top:-7px}
.seat.compact .plate{flex:1}.seat.compact .rchip{margin-top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.seat.compact.selected::after{top:6px;left:8px}
/* khu của tôi */
.me{position:relative;z-index:6;padding:4px 10px 8px;display:grid;grid-template-columns:330px 1fr;gap:10px;align-items:end;--kc:#b9a888;background:linear-gradient(to top,#f1dcb3 0,#f1dcb300 100%)}
.me.current::before{content:'';position:absolute;left:8%;right:8%;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 14px var(--gold)}
.me.dead{filter:grayscale(.7)}
.me-info{display:grid;grid-template-columns:64px 1fr;grid-template-areas:'ava id' 'zone zone' 'sk sk';gap:6px 10px;background:var(--panel);border-radius:16px;padding:8px 10px;box-shadow:var(--shadow);border-top:4px solid var(--kc);align-self:stretch}
.me-ava{grid-area:ava;position:relative;width:64px;height:64px;border-radius:16px;box-shadow:0 0 0 3px var(--kc);cursor:pointer}
.me-ava.targetable{box-shadow:0 0 0 3px var(--red),0 0 0 6px #ffd9d2,0 0 22px #ff5a4a;animation:aim 1s infinite}.me-ava.selected{box-shadow:0 0 0 4px var(--red),0 0 0 8px var(--gold)}
.me-ava .rip{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;background:#0006;border-radius:inherit;color:#fff}
.me-id{grid-area:id;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.me-id .pname{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-id .gname{color:var(--muted);font-weight:600;font-size:13px}
.me-id .hp{justify-content:flex-start}
.me-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rng{font-size:12px;font-weight:800;background:#fdf3df;border-radius:99px;padding:0 8px}
.me-zone{grid-area:zone;display:flex;gap:5px;flex-wrap:wrap;min-height:26px;align-items:center}
.eqc{display:inline-flex;align-items:center;gap:3px;background:#dcf0e4;border-radius:8px;padding:2px 7px;font-size:12px;cursor:pointer;box-shadow:inset 0 0 0 1.5px #2f7d5b55;min-height:28px}
.eqc b{font-weight:700}.eqc small{font-weight:800}.eqc small.red{color:var(--red)}
.eqc.jd{background:#fbeccb;box-shadow:inset 0 0 0 1.5px #b7791f88}
.eqc.pickable{box-shadow:inset 0 0 0 2px var(--gold),0 0 10px #f6c34d;animation:bob 1.2s infinite}
.eqc.sel{background:var(--red);color:#fff}
.me-skills{grid-area:sk;display:flex;gap:5px;flex-wrap:wrap}
.skc{border:0;border-radius:8px;padding:3px 9px;background:linear-gradient(135deg,#fff6dd,#f3d991);box-shadow:inset 0 0 0 1.5px #e0a83a;font-weight:800;font-size:12.5px;cursor:pointer;min-height:28px}
.skc.off{opacity:.5;text-decoration:line-through}
.me-main{display:flex;flex-direction:column;min-width:0;gap:4px}
.actions{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;min-height:44px;align-items:center}
.actions .lbl{font-weight:800;font-size:14px}
.actions .winner{font-family:'Noto Serif';font-weight:800;font-size:20px;color:var(--red)}
.actions .idle{font-style:italic}
.hand{display:flex;justify-content:center;align-items:flex-end;padding:18px 8px 2px;min-height:calc(var(--cw,96px)*1.42 + 22px);--cw:96px}
.hand .qcard{margin:0 var(--ov,4px);transition:transform .15s,box-shadow .15s,opacity .15s;cursor:pointer}
.hand .qcard.playable{box-shadow:0 0 0 2px #f6c34d,0 6px 14px -6px #b7791f}
.hand .qcard.playable:hover{transform:translateY(-14px) scale(1.06);z-index:5}
.hand .qcard.resp{box-shadow:0 0 0 3px var(--blue),0 0 16px #3a6fd8aa;animation:bob 1.1s infinite}
.hand .qcard.selected{transform:translateY(-18px) scale(1.06);box-shadow:0 0 0 3px var(--red),0 0 0 6px var(--gold),0 12px 20px -8px #6b3a1a;z-index:6}
.hand .qcard.dim{filter:saturate(.45) brightness(.94);opacity:.78}
.hand .qcard.fresh::before{content:'MỚI';position:absolute;top:calc(var(--cw)*.24);left:3px;background:var(--jade);color:#fff;font-size:8px;font-weight:900;padding:0 4px;border-radius:4px;z-index:2}
@keyframes bob{50%{transform:translateY(-5px)}}

/* nhật ký */
.log{position:fixed;right:10px;top:60px;bottom:10px;width:min(360px,calc(100vw - 20px));background:#fffaf0f5;border-radius:16px;box-shadow:var(--shadow-lg);z-index:40;display:flex;flex-direction:column;border:1.5px solid #f0dcb4}
.log h4{margin:0;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
#log-list{overflow:auto;padding:8px 12px;font-size:13px;flex:1}
#log-list div{padding:2px 0;border-bottom:1px dashed #f0e2c6}#log-list div.turn{font-weight:800;color:var(--red);border:0;margin-top:6px}

/* hộp thoại */
.modal{position:fixed;inset:0;background:#2b211c88;display:grid;place-items:center;z-index:60;padding:12px;animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.modal-box{background:var(--panel);border-radius:22px;padding:18px;max-width:min(560px,100%);width:100%;max-height:calc(100dvh - 24px);overflow:auto;box-shadow:var(--shadow-lg);border:2px solid #f0dcb4;animation:pop .2s}
.modal-box.wide{max-width:min(880px,100%)}
.modal-box.guide{max-width:min(920px,100%);height:calc(100dvh - 24px);padding:0;display:flex;flex-direction:column}
.modal-box h2,.modal-box h3{margin:0 0 10px;text-align:center}
.detail{display:flex;gap:16px;align-items:center}
.detail .dt{flex:1}
.te{font-size:12px;color:var(--muted);font-weight:700}.tn{font-family:'Noto Serif';font-weight:800;font-size:20px}.td{font-size:14px}
.pview{display:flex;gap:12px;align-items:center}.pv-ava{width:84px;height:84px;flex:none;border-radius:18px;box-shadow:0 0 0 3px var(--kc)}.pv-ava .portrait{width:100%;height:100%;border-radius:inherit}
.pv-head h3{text-align:left;margin:0}.pv-head .hp{justify-content:flex-start;margin:4px 0}
.pv-stats{display:flex;gap:8px;margin:12px 0}.pv-stats div{flex:1;background:#fdf3df;border-radius:12px;text-align:center;padding:6px}.pv-stats b{display:block;font-size:20px;font-family:'Noto Serif'}.pv-stats small{color:var(--muted)}
.pv-box{background:#fdf3df;border-radius:14px;padding:10px 12px;margin-top:8px;font-size:14px}.pv-box .lbl{display:block;font-size:12px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.5px}.pv-box p{margin:4px 0}
.eqrow{display:flex;gap:10px;align-items:center;margin-top:6px}.eqrow b{display:block}.eqrow span{font-size:13px;color:#5a4a3a}
.gpick .gp-role{text-align:center;margin-bottom:8px}.gpick .gp-role p{margin:6px 0 0;font-size:14px}
.gp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.gp-item{border:0;background:#fdf3df;border-radius:16px;padding:8px;cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:6px}
.gp-item:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--gold),var(--shadow)}
.gp-sk{font-size:12.5px;line-height:1.35}.gp-sk p{margin:2px 0}
.gcard{border-radius:14px;background:linear-gradient(180deg,var(--kc),var(--kd));padding:6px;color:#fff;box-shadow:0 6px 14px -6px #0006}
.gc-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800}
.gc-hp{display:flex;gap:2px}.gc-hp i{width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:radial-gradient(circle at 35% 35%,#8be0a8,#2f9e5b);box-shadow:0 0 0 1px #fff8}
.gc-art{margin:5px auto;width:min(110px,100%);aspect-ratio:1}.gc-art .portrait{width:100%;height:100%}
.gc-name{font-family:'Noto Serif';font-weight:800;font-size:18px;text-align:center;line-height:1.1}
.gc-lord{font-size:11px;background:#f6d27a;color:#5a3a00;border-radius:99px;padding:0 6px;vertical-align:middle}
.gc-tag{font-size:11px;text-align:center;opacity:.9;font-style:italic}
.pk-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pk-row button{border:0;background:#fdf3df;border-radius:12px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;transition:transform .12s}
.pk-row .qcard.sm{--cw:74px}.pk-row .qcard.sm .cicons{display:flex}.gx-row .qcard.sm{--cw:66px}
.pk-row button:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--gold)}
.pk-hand{flex-direction:row!important;gap:10px!important;padding:8px 14px!important;text-align:left}
.suits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.suit-b{border:0;background:#fdf3df;border-radius:14px;font-size:38px;padding:10px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-weight:800;min-height:80px}.suit-b small{font-size:13px}.suit-b.red{color:var(--red)}
.suit-b:hover{box-shadow:0 0 0 3px var(--gold)}
.gx-lbl{font-weight:800;font-size:13px;margin:8px 0 4px}
.gx-row{display:flex;gap:8px;flex-wrap:wrap;min-height:60px;background:#fdf3df;border-radius:12px;padding:8px;justify-content:center;align-items:center}
.gx-c{display:flex;flex-direction:column;align-items:center;gap:3px}
.gx-b{display:flex;gap:2px}.gx-b button{border:0;background:#fff;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:12px;box-shadow:var(--shadow)}.gx-b button:disabled{opacity:.3}
.intro{text-align:center}.intro .kick{font-size:12px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:1px}
.intro-cards{display:flex;gap:12px;justify-content:center;align-items:stretch;margin:10px 0}.intro-cards .gcard{width:150px}
.role-card{width:120px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:'Noto Serif';font-size:20px;box-shadow:0 6px 14px -6px #0006}.role-card .ri{font-size:46px}
.intro .goal{font-weight:600}
.results .res-list{display:grid;gap:6px}
.res-row{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:#fdf3df;border-radius:12px;padding:5px 8px}
.res-row.win{box-shadow:inset 0 0 0 2px var(--gold);background:#fff2cf}.res-row.dead{opacity:.7}
.res-row small{display:block;color:var(--muted);font-size:12px}
.res-ava{width:40px;height:40px}.res-ava .portrait{width:100%;height:100%}

/* hướng dẫn */
.g-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1.5px solid var(--line)}
.g-head h2{margin:0}
.g-toc{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line)}
.g-toc a{font-size:12.5px;font-weight:700;color:var(--red);text-decoration:none;background:#fdf3df;border-radius:99px;padding:2px 9px}
.g-body{overflow:auto;padding:4px 16px 20px;flex:1}
.g-body section{margin-top:16px}.g-body h3{text-align:left!important;color:var(--red);border-bottom:2px solid #f3d991;padding-bottom:3px}
.g-lead{font-size:15px;background:#fdf3df;border-radius:14px;padding:10px 12px;margin-top:12px}
.g-note{background:#fff6dd;border-left:4px solid var(--gold);padding:8px 10px;border-radius:8px;font-size:14px}
.g-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.g-role{border-radius:12px;padding:8px 10px}.g-role p{margin:4px 0 0;font-size:13px}
.g-table{border-collapse:collapse;margin:10px 0;width:100%;max-width:460px;font-size:14px}.g-table th,.g-table td{border:1px solid var(--line);padding:3px 6px;text-align:center}.g-table th{background:#fdf3df}
.g-steps li{margin:4px 0}
.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:8px 0}
.g-card{display:flex;gap:10px;align-items:flex-start;background:#fffdf6;border-radius:12px;padding:8px;box-shadow:inset 0 0 0 1px var(--line)}
.g-card h4{margin:0}.g-card h4 small{color:var(--muted);font-weight:600}.g-card p{margin:3px 0 0;font-size:13.5px}
.g-flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.g-svg{width:min(300px,100%);flex:none}
.g-flex ul{flex:1;min-width:240px}
.g-kd{color:var(--kc);font-size:18px;margin:14px 0 6px}
.g-gens{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.g-gen{display:flex;gap:10px;background:#fffdf6;border-radius:12px;padding:8px;box-shadow:inset 0 0 0 1px var(--line);border-left:4px solid var(--kc)}
.g-ava{width:56px;height:56px;flex:none}.g-ava .portrait{width:100%;height:100%}
.g-gen h4{margin:0;font-size:16px}.g-gen h4 small{color:var(--muted);font-weight:600;font-size:12px}.g-gen p{margin:3px 0;font-size:13px}
.g-foot{font-size:12px;color:var(--muted);text-align:center;margin-top:20px}

/* toast + tooltip */
.toast{position:fixed;left:50%;top:62px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:14px;z-index:90;font-weight:600;max-width:min(92vw,440px);text-align:center;box-shadow:var(--shadow-lg);animation:pop .2s;font-size:14px}
.toast.bad{background:#9e1f1a}.toast.ok{background:#1f6e44}.toast.info{background:#5a3a10}
#card-tip{position:fixed;z-index:80;width:260px;background:#2b211cf2;color:#fff4e0;border-radius:12px;padding:9px 12px;pointer-events:none;opacity:0;transition:opacity .12s;font-size:13px}
#card-tip.on{opacity:1}#card-tip .te{color:#f6d27a}#card-tip .tn{font-size:17px}#card-tip .td{font-size:13px}#card-tip .red{color:#ff8a7a}

/* ---------- hiệu ứng ---------- */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:50}
#fx-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:51}
.flyer{position:fixed;left:0;top:0;z-index:52;will-change:transform}
.flyer .qcard{--cw:58px}
.fly-emo{font-size:34px;filter:drop-shadow(0 0 8px #ffe680)}
.float-text{position:fixed;transform:translate(-50%,-50%);font-family:'Noto Serif';font-weight:800;font-size:30px;text-shadow:0 2px 0 #fff,0 0 8px #fff;animation:floatup calc(1.3s*var(--fx)) ease-out forwards;z-index:53}
@keyframes floatup{to{transform:translate(-50%,-160%);opacity:0}}
.banner{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-2deg);background:linear-gradient(135deg,#c8322a,#e98a2e);color:#fff;font-family:'Noto Serif';font-weight:800;font-size:30px;padding:12px 30px;border-radius:18px;box-shadow:0 0 0 4px #f6d27a,var(--shadow-lg);text-align:center;z-index:55;animation:bannerin .35s cubic-bezier(.2,1.6,.4,1);max-width:92vw}
.banner small{display:block;font-size:15px;font-weight:600;opacity:.92}
.banner.dark{background:linear-gradient(135deg,#2b211c,#5a4a3a)}
.banner.out{transition:opacity .4s,transform .4s;opacity:0;transform:translate(-50%,-70%) rotate(-3deg)}
@keyframes bannerin{from{transform:translate(-50%,-50%) rotate(-3deg) scale(.4);opacity:0}}
.stamp{position:fixed;transform:translate(-50%,-50%) rotate(-12deg);font-family:'Noto Serif';font-weight:800;font-size:20px;color:#fff;background:#2b211ce0;border:3px solid #fff;padding:1px 10px;border-radius:10px;z-index:54;animation:stampin calc(1.1s*var(--fx)) forwards;white-space:nowrap}
.stamp.red{background:#c8322ae8}.stamp.blue{background:#3a6fd8e8}
@keyframes stampin{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(2.2);opacity:0}15%{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}80%{opacity:1}100%{opacity:0}}
.bubble{position:fixed;transform:translate(-50%,-100%);background:#fffaf0;border-radius:12px;padding:4px 10px;font-size:13px;box-shadow:var(--shadow-lg);z-index:54;white-space:nowrap;animation:bubin .2s;border:2px solid var(--gold)}
.bubble::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--gold);border-bottom:0}
.bubble.skill{background:linear-gradient(135deg,#fff6dd,#f3d991)}
@keyframes bubin{from{transform:translate(-50%,-80%) scale(.6);opacity:0}}
.shield-fx{position:fixed;transform:translate(-50%,-50%);z-index:54;font-size:46px;animation:shield calc(.9s*var(--fx)) forwards}
.shield-fx span{display:block;filter:drop-shadow(0 0 12px #9ad0ff)}
@keyframes shield{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{transform:translate(-50%,-50%) scale(1.25);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.judge-fx{position:fixed;transform:translate(-50%,-50%);z-index:56;display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .3s}
.judge-fx.out{opacity:0}
.jf-label{background:#2b211ce8;color:#fff4e0;border-radius:99px;padding:2px 12px;font-weight:700;font-size:13px;white-space:nowrap}
.jf-card{perspective:600px;width:96px;height:137px}
.jf-inner{position:relative;width:100%;height:100%;transition:transform calc(.6s*var(--fx));transform-style:preserve-3d}
.judge-fx.flip .jf-inner{transform:rotateY(180deg)}
.jf-back,.jf-front{position:absolute;inset:0;backface-visibility:hidden}
.jf-front{transform:rotateY(180deg)}
.jf-back .qcard,.jf-front .qcard{--cw:96px}
.white-flash{position:fixed;inset:0;background:#fffbe0;z-index:57;pointer-events:none;animation:wflash .5s forwards}
@keyframes wflash{from{opacity:.85}to{opacity:0}}
.shake{animation:shake calc(.5s*var(--fx))}
@keyframes shake{20%{translate:-6px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:3px 0}}
.seat.shake{animation:sshake calc(.5s*var(--fx))}
@keyframes sshake{20%{transform:translate(calc(-50% - 6px),-50%)}40%{transform:translate(calc(-50% + 6px),-50%)}60%{transform:translate(calc(-50% - 4px),-50%)}80%{transform:translate(calc(-50% + 3px),-50%)}}
.flash-red .plate,.me.flash-red .me-info{animation:fred calc(.75s*var(--fx))}
.flash-heal .plate,.me.flash-heal .me-info{animation:fheal calc(.75s*var(--fx))}
@keyframes fred{30%{background:#ffb3a8;box-shadow:0 0 0 3px var(--red),0 0 24px #ff5a4a}}
@keyframes fheal{30%{background:#c8f0d6;box-shadow:0 0 0 3px var(--jade),0 0 24px #5ad08a}}
.screen-shake{animation:scr .5s}
@keyframes scr{20%{translate:-5px 3px}40%{translate:5px -3px}60%{translate:-3px 2px}80%{translate:2px -1px}}

/* ---------- máy tính bàn rộng ---------- */
@media (min-width:1200px){.hand{--cw:108px}.seat{width:124px}.seat .ava{width:70px;height:70px}}

/* ---------- điện thoại / màn hẹp ---------- */
@media (max-width:900px){
  .me{grid-template-columns:1fr;gap:4px;padding:2px 8px 6px}
  .me-info{grid-template-columns:48px 1fr auto;grid-template-areas:'ava id sk' 'zone zone zone';padding:6px 8px;gap:4px 8px}
  .me-ava{width:48px;height:48px;border-radius:12px}
  .me-skills{flex-direction:column;align-items:flex-end;justify-content:center}
  .me-zone{min-height:0}
  .me-zone .muted{display:none}
}
@media (max-width:760px){
  .topbar{gap:5px;padding:5px 6px;min-height:48px}
  .tb-logo{display:none}
  .turn-info{font-size:12.5px}
  .timer{font-size:12px;padding:2px 8px}
  #btn-more{display:inline-grid}
  .tb-opts{display:none;position:absolute;right:6px;top:52px;background:#8e271f;padding:8px;border-radius:14px;box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch}
  .tb-opts.open{display:flex}
  .tb-opts select{max-width:none}
  .chip.ic{width:38px;height:38px;font-size:17px}
  .table-wrap{padding:4px 2px 0}
  .felt{inset:7% 9% 3%;box-shadow:0 0 0 6px #a8432f,0 0 0 8px #f6d27a,0 0 0 10px #8e271f,0 12px 24px -8px #6b3a1a88}
  .seat{width:80px}
  .seat .ava{width:44px;height:44px;border-radius:12px}
  .seat .plate{padding:4px 3px 3px;border-radius:8px}
  .seat .pname{font-size:11.5px}.seat .gname{font-size:10px}
  .seat .dist{width:19px;height:19px;min-width:19px;font-size:11px;right:-7px;top:-7px}
  .seat .meta{font-size:10px}.eqi{font-size:10px}.hc{padding:0 3px}
  .seat .rchip{font-size:9px;padding:0 4px}
  .hp i{width:7px;height:7px}.hp.big i{width:11px;height:11px}
  .center{width:58%;gap:4px}
  .piles{gap:10px}.piles .qcard.sm{--cw:46px}.pile-empty{width:46px;height:65px}
  .prompt{padding:6px 8px;border-radius:12px}.prompt .pt{font-size:12.5px}.prompt .ps{font-size:11px}
  .phases span{font-size:9px;padding:0 4px}
  .feed{font-size:10.5px}.feed div:not(.new){display:none}
  .hand{padding:14px 4px 0}
  .actions{gap:5px;min-height:42px}.actions .btn{font-size:14px;padding:7px 11px;min-height:40px}
  .banner{font-size:22px;padding:10px 20px}
  .detail{flex-direction:column}
  .intro-cards .gcard{width:130px}.role-card{width:100px}
  .modal-box{padding:14px}
}
@media (max-width:760px) and (max-height:700px){
  .seat .gname{display:none}
  .seat .ava{width:38px;height:38px}
  .seat.compact{width:96px}.seat.compact .ava{width:32px;height:32px}
  .me-info{padding:4px 8px}.me-ava{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* =====================================================================
   CỔ TRANG – giấy dó, tranh thủy mặc, gỗ sơn mài, lụa, ấn son, đồng & ngọc
   ===================================================================== */
:root{
  --bg:#ecdfc3;--bg2:#e2d2ae;--ink:#1f1813;--muted:#6e5b45;--panel:#f6ecd5;--line:#d6c29a;
  --red:#a8291b;--red2:#c4442b;--gold:#c9a24a;--gold2:#ecd28c;--jade:#3b7a62;--blue:#2f5a8a;
  --lacq:#4a140d;--lacq2:#6e2114;--wood:#5a2d17;--wood2:#3a1a0c;--bronze1:#e8cf8e;--bronze2:#a9803a;
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow:0 10px 26px -12px #2a120866,0 2px 6px #2a12081a;--shadow-lg:0 20px 44px -16px #2a1208aa,0 4px 10px #2a120833;
}
body{background:var(--bg) var(--paper);color:var(--ink);letter-spacing:.1px}
.bg-clouds{background:radial-gradient(ellipse at 18% -10%,#f7efdc 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#d9c49c 0,transparent 55%),var(--bg) var(--paper)}
.bg-clouds i{opacity:.22;filter:blur(1px)}
.ink-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:42vh;min-height:180px}
h1,h2,h3,h4{font-weight:800;letter-spacing:.3px}
/* nét bút lông dưới tiêu đề */
.panel h3,.modal-box h2,.modal-box h3,.g-body h3{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C40 3 80 11 130 6 C180 2 230 10 298 5 L296 9 C230 13 180 6 130 10 C80 14 40 7 4 12 Z' fill='%23a8291b' opacity='.75'/%3E%3C/svg%3E") no-repeat 50% 100% / min(240px,80%) 9px;padding-bottom:8px}
.panel h3{background-position:0 100%}
.g-body h3{border:0!important;background-position:0 100%;color:var(--ink)!important}

/* nút: đồng thau / sơn son / giấy */
.btn{background:linear-gradient(180deg,var(--bronze1),#d1b06a 55%,var(--bronze2));color:#2b1a08;border:1px solid #6b4a1a;border-radius:10px;box-shadow:inset 0 1px 0 #fff6d8,inset 0 -2px 0 #0002,0 3px 0 #5a3d14,0 8px 16px -8px #2a1208aa;font-weight:800;text-shadow:0 1px 0 #fff3}
.btn:active{box-shadow:inset 0 1px 0 #fff6d8,0 1px 0 #5a3d14}
.btn.pri{background:linear-gradient(180deg,#c4442b,#9a2416 60%,#7a1b10);color:#ffe9b8;border:1px solid #e0b75c;box-shadow:inset 0 0 0 1px #4a0d06,inset 0 1px 0 #ff9a7a88,0 3px 0 #4a0d06,0 10px 20px -8px #7a1b10cc;text-shadow:0 1px 0 #0006}
.btn.red{background:linear-gradient(180deg,#8a1f14,#5c120a);color:#ffe0c0;border:1px solid #c9a24a}
.btn.ghost{background:#f3e7cc var(--paper);color:var(--ink);border:1px solid #8a6a3a;box-shadow:0 2px 0 #8a6a3a55}
.btn.sk{background:linear-gradient(180deg,#8fc3ac,#3b7a62 60%,#2c5e4b);color:#f3ffe9;border:1px solid #c9a24a;box-shadow:inset 0 1px 0 #d8fff0aa,0 3px 0 #1d3f32;text-shadow:0 1px 0 #0005}
.chip{background:#f3e7cc var(--paper);border:1px solid #8a6a3a;box-shadow:0 2px 0 #8a6a3a44;color:var(--ink)}
.chip.on{background:var(--lacq);color:var(--gold2)}

/* trang chủ: cuộn giấy */
.home-card{background:#f6ecd5 var(--paper);border:0;border-radius:6px;padding:30px 22px 18px;box-shadow:0 0 0 1px #b89a62,0 0 0 6px #f6ecd5,0 0 0 7px #8a6a3a,var(--shadow-lg);position:relative}
.home-card::before{inset:10px;border:1px solid #c9a24a;border-radius:2px}
.home-card::after{content:'';position:absolute;left:-14px;right:-14px;top:-12px;height:14px;border-radius:7px;background:linear-gradient(180deg,#7a3d1e,#3a1a0c);box-shadow:0 70vh 0 -0px transparent,0 3px 6px #0006}
.logo .han{color:var(--ink);text-shadow:none;font-size:58px;letter-spacing:6px}
.logo .han::after{content:'印';display:inline-block;font-size:18px;color:#fff;background:var(--red);border-radius:3px;padding:2px 4px;margin-left:6px;vertical-align:middle;letter-spacing:0;transform:rotate(-6deg)}
.logo .vn{font-size:28px;color:var(--red)}
.back-hub{background:#f3e7cc var(--paper);border:1px solid #8a6a3a;color:var(--ink)}
input#name,.join-row input{background:#fbf5e6;border-color:#b89a62;border-radius:8px}

/* sảnh */
.panel{background:#f6ecd5 var(--paper);border:1px solid #b89a62;border-radius:8px;box-shadow:0 0 0 4px #f6ecd5,0 0 0 5px #b89a6288,var(--shadow)}
.plist li{background:#efe2c4;border-radius:6px;border-left:3px solid var(--red)}
.code-box{background:#f3e7cc var(--paper);border:1px solid #8a6a3a}
.code-box b{color:var(--red)}
.opts{display:grid;gap:8px;margin-bottom:12px}
.opt{display:flex;gap:10px;align-items:flex-start;background:#efe2c4;border-radius:6px;padding:8px 10px;cursor:pointer;border:1px solid #d6c29a}
.opt input{width:22px;height:22px;accent-color:var(--red);flex:none;margin-top:2px}
.opt b{display:block}.opt small{display:block;color:var(--muted);font-size:12px;line-height:1.35}

/* ấn son cho thân phận */
.rchip{border-radius:3px;font-weight:800;padding:0 6px 0 2px;gap:3px;line-height:1.55;box-shadow:inset 0 0 0 1px #0002}
.rchip .seal{font-family:var(--han);font-style:normal;font-weight:700;background:var(--red);color:#fff4e0;border-radius:2px;padding:0 3px;font-size:1.05em;line-height:1.35;box-shadow:inset 0 0 0 1px #fff6,0 0 0 1px var(--red)}
.r-lord{background:linear-gradient(180deg,#f3d98e,#d4a53e);color:#3a2300}
.r-loyal{background:#ecdcae;color:#5a3a08}
.r-rebel{background:#e8c1b4;color:#6a140c}
.r-spy{background:#c9dccd;color:#173c2a}
.r-spy .seal{background:#2c5e4b}.r-loyal .seal{background:#8a6a2a}
.r-hidden{background:#e2d6bd;color:#6e5b45}.r-hidden .seal{background:#8a7a62}

/* lá bài: khung tranh khắc gỗ */
.qcard{background:#f4e8ca var(--paper);border:max(1.5px,calc(var(--cw)*.03)) solid #2b1d12;border-radius:calc(var(--cw)*.06);box-shadow:inset 0 0 0 calc(var(--cw)*.02) #f4e8ca,inset 0 0 0 calc(var(--cw)*.032) var(--kc),0 4px 10px -4px #2a1208aa}
.qcard::after{inset:calc(var(--cw)*.05);border:1px solid #2b1d1233;border-radius:calc(var(--cw)*.03)}
.qcard.k-basic{--kc:#a8291b;--kb:#f0d6c8}.qcard.k-trick{--kc:#27384f;--kb:#d9dde3}.qcard.k-equip{--kc:#3b6a4e;--kb:#d6e6d8}
.qcard.el-fire{--kc:#c4501a}.qcard.el-thunder{--kc:#4b3f8f}
.qcard .ctop{padding:calc(var(--cw)*.06) calc(var(--cw)*.08) calc(var(--cw)*.02);background:linear-gradient(180deg,#f4e8ca,#f4e8caee 70%,transparent);z-index:2}
.qcard .idx{font-family:'Noto Serif',serif}
.qcard .ktag{border-radius:2px;background:var(--kc);font-family:'Noto Serif',serif}
.qcard .art{margin:0 calc(var(--cw)*.07);border:1px solid #2b1d1255;overflow:hidden;background:#efe2c0}
.qcard .art .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.22) contrast(1.06) saturate(.92)}
.qcard .art .cimg ~ .emo{display:none}
.qcard .art .cimg ~ .han{position:absolute;right:2px;bottom:2px;top:auto;font-size:calc(var(--cw)*.2);opacity:1;color:#fff4e0;background:var(--kc);border-radius:2px;padding:0 2px;line-height:1.15;box-shadow:0 0 0 1px #fff6}
.qcard .cicons{padding:calc(var(--cw)*.02) 2px 0}
.qcard .ic{background:var(--kb);border-radius:2px}
.qcard .cname{background:var(--kc);margin:calc(var(--cw)*.02) calc(var(--cw)*.05) calc(var(--cw)*.05);border-radius:2px;font-family:'Noto Serif',serif;letter-spacing:.2px;box-shadow:inset 0 0 0 1px #0003}
.qcard.xs .art,.qcard.sm .art{margin:0 calc(var(--cw)*.05)}
.qcard.back{background:repeating-linear-gradient(45deg,#5c1a12 0 5px,#4a140d 5px 10px);border-color:#c9a24a;box-shadow:inset 0 0 0 2px #2b0a05,0 4px 10px -4px #2a1208aa}
.qcard.back::after{border-color:#c9a24a88}
.qcard.back .back-in{border-color:#c9a24a;background:radial-gradient(circle,#8a2416,#5c1a12);border-radius:4px}
.qcard.back .back-in span{color:#f0d68e;text-shadow:0 0 6px #0008}

/* chân dung tranh cổ: lớp ảnh đè lên SVG */
.pwrap{position:relative;display:block;overflow:hidden;background:#efe2c0}
.pwrap > svg{position:absolute;inset:0;width:100%;height:100%}
.pwrap .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.18) contrast(1.05);background:#efe2c0}
.pwrap .pseal{position:absolute;left:3px;top:3px;font-family:var(--han);font-weight:700;font-style:normal;background:var(--kc);color:#fff;font-size:11px;line-height:1.25;padding:0 2px;border-radius:2px;box-shadow:0 0 0 1px #fff8;z-index:1}

/* thanh trên: sơn mài viền vàng */
.topbar{background:linear-gradient(180deg,#5c1a12,#3a0f09);border-bottom:2px solid #c9a24a;box-shadow:0 1px 0 #3a0f09,0 4px 14px #2a120888}
.topbar .chip{background:#ffffff14;color:#f0d68e;border:1px solid #c9a24a88;box-shadow:none}
.tb-logo{color:#f0d68e}
.timer.mine{background:#f0d68e;color:#3a1a00}

/* bàn: gỗ sơn mài, mặt lụa vẽ núi */
.felt{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C40 90 70 70 100 95 C130 120 150 60 190 55 C230 50 250 105 290 110 C330 115 350 80 400 85 L400 160 L0 160Z' fill='%233b3a36' opacity='.10'/%3E%3Cpath d='M0 140 C60 120 90 115 130 130 C170 145 210 110 260 112 C310 114 340 140 400 130 L400 160 L0 160Z' fill='%233b3a36' opacity='.14'/%3E%3C/svg%3E") no-repeat 50% 100% / 100% 45%,
  radial-gradient(ellipse at 50% 38%,#f6ecd2 0,#ecdcb6 60%,#dcc591 100%);
  box-shadow:0 0 0 3px #c9a24a,0 0 0 13px var(--wood),0 0 0 14px #2a1208,0 0 0 16px #c9a24a99,0 22px 40px -10px #2a1208aa,inset 0 0 50px #8a6a3a55}
.felt::before{content:'';position:absolute;inset:-13px;border-radius:inherit;pointer-events:none}
.felt .han{color:var(--ink);opacity:.06}
.phases span{background:#f3e7ccd0;border:1px solid #b89a6266;border-radius:3px}
.phases span.on{background:var(--red);color:#ffe9b8;box-shadow:0 0 0 1px #c9a24a}
.prompt{background:#f6ecd5 var(--paper);border:1px solid #8a6a3a;border-radius:6px;box-shadow:0 0 0 3px #f6ecd5,0 0 0 4px #b89a6299,var(--shadow)}
.prompt.mine{box-shadow:0 0 0 3px #f6ecd5,0 0 0 5px var(--red),var(--shadow-lg)}
.prompt.quiet{background:#f6ecd5aa;box-shadow:none;border-color:#b89a6266}
.pile .cnt{background:var(--lacq);color:var(--gold2)}
.pile-empty{border-color:#5a2d1766}

/* ghế: thẻ bài vị + cờ hiệu theo nước */
.seat .ava{border-radius:6px;box-shadow:0 0 0 2px #2b1d12,0 0 0 4px var(--kc),0 0 0 5px #c9a24a,0 8px 16px -6px #2a1208aa}
.seat .plate{background:#f6ecd5 var(--paper);border-radius:4px;border:1px solid #8a6a3a;border-top:3px solid var(--kc);position:relative}
.seat .flag{position:absolute;left:-7px;top:-14px;width:18px;height:24px;background:var(--kc);color:#fff;font-family:var(--han);font-weight:700;font-size:11px;display:grid;place-items:start center;padding-top:2px;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:inset 0 0 0 1px #0003;z-index:2;line-height:1}
.seat .flag::before{content:'';position:absolute;left:-2px;top:-3px;width:2px;height:30px;background:#5a2d17}
.seat.compact .flag{display:none}
.seat .dist{background:#f6ecd5;border-radius:3px;box-shadow:0 0 0 1.5px #2b1d12}
.seat .dist.in{background:var(--red);color:#ffe9b8;box-shadow:0 0 0 1.5px #c9a24a}
.seat.current .ava{box-shadow:0 0 0 2px #2b1d12,0 0 0 4px var(--gold),0 0 0 7px #f6e3a8,0 0 26px 5px #e8b84a}
.seat.chained .ava{outline:3px dashed #5a5a62;outline-offset:3px}
.seat.flipped .ava{filter:grayscale(.6) brightness(.85)}
.stb{position:absolute;left:-6px;bottom:-6px;display:flex;gap:1px;z-index:2}
.stb i{font-style:normal;font-size:12px;background:#f6ecd5;border-radius:3px;box-shadow:0 0 0 1px #8a6a3a;line-height:1.3;padding:0 1px}
.stb.long{position:static;display:inline-flex;gap:3px}
.stb.long i{display:inline-flex;align-items:center;gap:2px;padding:0 5px;font-size:12px}
.stb.long small{font-size:11px;font-weight:700}
.hc{background:#efe2c4;border-radius:3px}.eqi{background:#d6e6d8;border-radius:3px}.jdi{background:#ecdcae;border-radius:3px}

/* khu của tôi */
.me{background:linear-gradient(to top,#d9c49c 0,#d9c49c00 100%)}
.me-info{background:#f6ecd5 var(--paper);border-radius:6px;border:1px solid #8a6a3a;border-top:4px solid var(--kc);box-shadow:0 0 0 3px #f6ecd5,0 0 0 4px #b89a6288,var(--shadow)}
.me-ava{border-radius:6px;box-shadow:0 0 0 2px #2b1d12,0 0 0 4px var(--kc),0 0 0 5px #c9a24a}
.eqc{background:#d6e6d8;border-radius:4px;box-shadow:inset 0 0 0 1px #3b6a4e88}
.eqc.jd{background:#ecdcae}
.skc{background:linear-gradient(180deg,#a8d4c0,#5f9c82);color:#10291f;border-radius:4px;box-shadow:inset 0 0 0 1px #2c5e4b,0 2px 0 #2c5e4b}
.rng{background:#efe2c4;border-radius:3px}

/* hộp thoại: cuộn lụa có trục gỗ */
.modal{background:#1f1208aa}
.modal-box{background:#f6ecd5 var(--paper);border:0;border-radius:4px;border-top:14px solid var(--wood);border-bottom:14px solid var(--wood);box-shadow:0 -3px 0 #c9a24a inset,0 3px 0 #c9a24a inset,0 0 0 1px #2a1208,var(--shadow-lg)}
.modal-box.guide{border-top-width:12px;border-bottom-width:12px}
.g-head{border-bottom:1px solid #b89a62}.g-toc{border-bottom:1px solid #d6c29a}
.g-toc a{background:#efe2c4;border-radius:3px;color:var(--red)}
.g-lead,.pv-box,.pv-stats div,.gp-item,.pk-row button,.suit-b,.gx-row,.res-row,.g-card,.g-gen{background:#efe2c4!important}
.g-card,.g-gen{box-shadow:inset 0 0 0 1px #d6c29a}
.g-note{background:#f3e3b8;border-left-color:var(--red)}
.gcard{border-radius:6px;border:2px solid #2b1d12;box-shadow:inset 0 0 0 2px #c9a24a,0 6px 14px -6px #0008}
.gc-art .portrait{border-radius:4px}
.role-card{border-radius:6px;border:2px solid #2b1d12;box-shadow:inset 0 0 0 2px #c9a24a}
.toast{background:#2b1d12;color:#f6ecd5;border:1px solid #c9a24a;border-radius:6px}
.toast.bad{background:#7a1b10}.toast.ok{background:#2c5e4b}.toast.info{background:#4a3416}
#card-tip{background:#2b1d12f4;border:1px solid #c9a24a;border-radius:6px}
.log{background:#f6ecd5f8 var(--paper);border:1px solid #8a6a3a;border-radius:6px}

/* hiệu ứng: ấn son, cờ hiệu */
.stamp{background:transparent;color:var(--red);border:3px double var(--red);border-radius:4px;text-shadow:0 0 1px #fff,0 0 6px #fff;font-family:'Noto Serif',serif;font-weight:800;letter-spacing:1px;box-shadow:0 0 0 2px #fff8 inset}
.stamp.red{color:#fff;background:#a8291be0;border-color:#fff6;text-shadow:none}
.stamp.blue{color:#fff;background:#2c5e4be0;border-color:#fff6;text-shadow:none}
.banner{width:max-content;max-width:86vw;background:linear-gradient(180deg,#6e2114,#4a140d);color:#f6e3a8;border:2px solid #c9a24a;border-radius:4px;box-shadow:0 0 0 4px #2a1208,0 0 0 5px #c9a24a88,var(--shadow-lg);font-family:'Noto Serif',serif;padding:12px 34px}
.banner::before,.banner::after{content:'';position:absolute;top:-8px;bottom:-8px;width:10px;border-radius:5px;background:linear-gradient(90deg,#7a3d1e,#2a1208)}
.banner::before{left:-12px}.banner::after{right:-12px}
.banner.dark{background:linear-gradient(180deg,#2b1d12,#140c06)}
.bubble{background:#f6ecd5;border:2px solid var(--wood);border-radius:6px}.bubble::after{border-top-color:var(--wood)}
.bubble.skill{background:linear-gradient(180deg,#d6e6d8,#a8d4c0)}
.jf-label{background:#2b1d12;color:#f0d68e;border:1px solid #c9a24a}
@media (max-width:760px){
  .tb-opts{background:#3a0f09;border:1px solid #c9a24a}
  .logo .han{font-size:48px}
  .seat .flag{width:15px;height:20px;font-size:9px;top:-11px;left:-5px}
}
.g-head .btn{white-space:nowrap;flex:none}
@media (max-width:760px){.g-head h2{font-size:20px;text-align:left}.g-head{gap:8px}}
.role-card .rseal{font-family:var(--han);font-weight:700;font-size:44px;line-height:1;color:#fff4e0;background:var(--red);padding:8px 10px;border-radius:4px;box-shadow:inset 0 0 0 2px #fff6,0 0 0 2px var(--red);transform:rotate(-4deg)}
.role-card.r-spy .rseal{background:#2c5e4b;box-shadow:inset 0 0 0 2px #fff6,0 0 0 2px #2c5e4b}
.role-card.r-loyal .rseal{background:#8a6a2a;box-shadow:inset 0 0 0 2px #fff6,0 0 0 2px #8a6a2a}

/* ---------- binh khí SVG (vẽ đúng hình) ---------- */
.qcard .art .wart{position:absolute;inset:3%;width:94%;height:94%;z-index:1;filter:drop-shadow(0 1px 0 #fff8)}
.qcard .art .wart ~ .emo{display:none}
.qcard .art .wart ~ .han{position:absolute;right:2px;bottom:2px;top:auto;font-size:calc(var(--cw)*.2);opacity:1;color:#fff4e0;background:var(--kc);border-radius:2px;padding:0 2px;line-height:1.15;box-shadow:0 0 0 1px #fff6;z-index:2}
.qcard.k-equip .art{background:radial-gradient(ellipse at 50% 45%,#f8efd8,#e8d6aa)}
.wi{width:1.3em;height:1.3em;vertical-align:-.3em;display:inline-block;flex:none}
.eqi .wi{width:15px;height:15px}
.chip .wi{width:16px;height:16px}

/* ---------- bàn gỗ sơn mài: viền gỗ vân + chỉ vàng ---------- */
.felt{border:15px solid transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C40 90 70 70 100 95 C130 120 150 60 190 55 C230 50 250 105 290 110 C330 115 350 80 400 85 L400 160 L0 160Z' fill='%233b3a36' opacity='.10'/%3E%3Cpath d='M0 140 C60 120 90 115 130 130 C170 145 210 110 260 112 C310 114 340 140 400 130 L400 160 L0 160Z' fill='%233b3a36' opacity='.14'/%3E%3C/svg%3E") no-repeat 50% 100% / 100% 45% padding-box,
    radial-gradient(ellipse at 50% 38%,#f6ecd2 0,#ecdcb6 60%,#dcc591 100%) padding-box,
    repeating-linear-gradient(97deg,#5a1a10 0 3px,#6e2416 3px 7px,#4a140d 7px 9px,#7a2a18 9px 14px) border-box;
  box-shadow:inset 0 0 0 2px #c9a24a,inset 0 0 0 4px #2a1208,inset 0 0 46px #8a6a3a66,0 0 0 2px #2a1208,0 0 0 4px #c9a24aaa,0 22px 40px -10px #2a1208aa}
@media (max-width:760px){.felt{border-width:9px;box-shadow:inset 0 0 0 1.5px #c9a24a,inset 0 0 0 3px #2a1208,inset 0 0 30px #8a6a3a55,0 0 0 1.5px #2a1208,0 0 0 3px #c9a24a99,0 12px 24px -8px #2a1208aa}}

/* ---------- nút xác nhận = ấn son ---------- */
.btn.pri{background:radial-gradient(ellipse at 30% 20%,#d2492f,#a8291b 55%,#861d12);color:#fff1d0;border:0;border-radius:4px;
  box-shadow:inset 0 0 0 2px #861d12,inset 0 0 0 3.5px #f3d9a4,inset 0 0 0 5px #a8291b,0 3px 0 #4a0d06,0 10px 20px -8px #7a1b10cc;text-shadow:0 1px 0 #0005;letter-spacing:.3px}
.btn.pri::before{content:'印';font-family:var(--han);font-weight:700;display:inline-block;font-size:.78em;line-height:1;padding:2px 3px 3px;margin-right:7px;border:1.5px solid #f3d9a4;border-radius:2px;vertical-align:.12em;color:#fff1d0;transform:rotate(-4deg)}
.btn.big.pri::before{font-size:.7em}
.actions .btn.pri::before{margin-right:5px}
/* nút ngọc cho kỹ năng, nút đồng cho thường (đã có) – thêm vân ngọc */
.btn.sk{background:radial-gradient(ellipse at 30% 25%,#b7e0cc,#4f9a7c 45%,#2c5e4b)}
.skc{background:radial-gradient(ellipse at 30% 25%,#d2efe2,#7fb79f 55%,#4f8a72)}

/* ---------- hộp thoại: cuộn lụa có trục + núm ---------- */
.modal-box{background:
  linear-gradient(90deg,#c9a24a 0 2px,transparent 2px calc(100% - 2px),#c9a24a calc(100% - 2px)) ,
  #f6ecd5 var(--paper);
  border-top:16px solid transparent;border-bottom:16px solid transparent;
  border-image:linear-gradient(180deg,#2a1208,#7a3d1e 30%,#a8582e 50%,#7a3d1e 70%,#2a1208) 16 0 stretch}
.modal-box h2::before,.modal-box h3::before{content:'';display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--red);transform:rotate(45deg) translateY(-2px);box-shadow:0 0 0 2px #f6ecd5,0 0 0 3px var(--red)}
.modal-box.guide h2::before{display:none}

/* ---------- đường phân cách nét bút lông ---------- */
.brush-hr{height:10px;margin:10px auto;width:min(320px,90%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C50 2 90 9 150 5 C210 2 250 9 297 4 L295 7 C250 12 210 6 150 9 C90 12 50 6 5 10 Z' fill='%231f1813' opacity='.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%}
.home-card .tag{position:relative;padding-bottom:12px}
.home-card .tag::after{content:'';position:absolute;left:15%;right:15%;bottom:0;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C50 2 90 9 150 5 C210 2 250 9 297 4 L295 7 C250 12 210 6 150 9 C90 12 50 6 5 10 Z' fill='%231f1813' opacity='.55'/%3E%3C/svg%3E") no-repeat center / 100% 100%}

/* ---------- nền tranh thủy mặc ---------- */
.ink-hills{height:58vh;min-height:240px;opacity:.95}
.ink-hills .birds path{fill:none;stroke:#2a2925;stroke-width:1.4;stroke-linecap:round;opacity:.45}

/* ---------- chân trang ghi nguồn ---------- */
.credit-line{font-size:11px;color:var(--muted);margin:6px 0 0;line-height:1.4}
.credit-line a{color:var(--red)}
.g-credits{font-size:12px;columns:2 300px;column-gap:18px}.g-credits p{margin:2px 0;break-inside:avoid;line-height:1.35}.g-credits a{color:var(--red);word-break:break-word}
.hero-g{transform:translateX(var(--x,0)) translateY(var(--y)) rotate(var(--r));transform-origin:50% 100%;width:66px;height:66px;margin-left:-33px;border-radius:4px;box-shadow:0 0 0 2px #2b1d12,0 0 0 4px #c9a24a,0 8px 14px -6px #2a1208aa;background:#efe2c0}
.hero-g .portrait{border-radius:4px;overflow:hidden}
@media (max-width:400px){.hero-g{width:56px;height:56px;margin-left:-28px}}
.bg-clouds i{opacity:.16;filter:blur(8px)}
.center.tight .feed{display:none}
.center.tight2 .phases{display:none}.center.tight2 .prompt .ps{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-g{--x:calc(var(--i,0) * 36px)}
@media (max-width:400px){.hero-g{--x:calc(var(--i,0) * 27px)}.hero-c{left:0}.hero-c.r{right:0}}
/* ---- rà soát 11/2026: tay bài điện thoại đọc được (tên tắt, chữ ≥10px), màn ngang điện thoại ---- */
.qcard .cn-short{display:none}
@media (max-width:760px),(max-height:500px){
  .hand .qcard .ktag,.hand .qcard .cicons{display:none}
  .hand .qcard .ctop{padding:calc(var(--cw)*.05) calc(var(--cw)*.06) 0}
  .hand .qcard .idx{font-size:max(12px,calc(var(--cw)*.2))}
  .hand .qcard .cname{font-size:max(10.5px,calc(var(--cw)*.16));line-height:1.08;letter-spacing:-.1px;padding:3px 1px 4px;min-height:0}
  .hand .qcard .cname.hs .cn-full{display:none}
  .hand .qcard .cn-short{display:block}
  .hand .qcard .art .cimg~.han,.hand .qcard .art .wart~.han{font-size:max(12px,calc(var(--cw)*.22))}
  .hand.ovl .qcard .cname{justify-items:start;text-align:left;padding-left:3px}
  .hand.ovl .qcard:last-child .cname{justify-items:center;text-align:center;padding-left:1px}
}
/* điện thoại xoay ngang: khu "của tôi" nằm 1 hàng, nhường chỗ cho bàn */
@media (max-height:500px) and (min-width:600px){
  .topbar{min-height:40px;padding:3px 8px;gap:6px}
  .topbar .chip.ic{width:34px;height:34px;font-size:15px}
  .tb-logo{display:none}
  .table-wrap{padding:2px 4px 0}
  .me{grid-template-columns:minmax(190px,26%) 1fr;gap:6px;padding:2px 6px 4px;align-items:end}
  .me-info{grid-template-columns:40px 1fr;grid-template-areas:'ava id' 'sk sk' 'zone zone';padding:4px 6px;gap:3px 6px}
  .me-ava{width:40px;height:40px}
  .me-id .pname{font-size:13px}.me-id .gname{font-size:11.5px}
  .me-skills{flex-direction:row;align-items:center}
  .me-zone .muted{display:none}
  .me-main{flex-direction:row;align-items:flex-end;gap:6px}
  .me-main .actions{flex-direction:column;flex-wrap:nowrap;min-height:0;order:2;flex:none;max-width:150px}
  .me-main .actions .btn{font-size:13px;padding:6px 9px;min-height:40px;width:100%}
  .me-main .hand{flex:1;min-width:0;padding:10px 2px 0;min-height:0}
  .felt{inset:6% 7% 3%}
  .seat .gname{display:none}
  .prompt .pt{font-size:12.5px}.prompt .ps{font-size:11px}
}

/* =====================================================================
   NÂNG CẤP 11/2026: 🎓 Tập chơi / 💡 gợi ý, cờ nước chữ Việt, bảng kỹ năng, lật thẻ thân phận
   ===================================================================== */
/* nút Tập chơi ở trang chủ */
.btn.big.train{background:linear-gradient(180deg,#8fc3ac,#3b7a62 60%,#2c5e4b);color:#f3ffe9;border:1px solid #c9a24a;box-shadow:inset 0 1px 0 #d8fff0aa,0 3px 0 #1d3f32,0 10px 20px -10px #1d3f32;text-shadow:0 1px 0 #0005;display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.15}
.btn.big.train small{font-size:12.5px;font-weight:600;opacity:.92;font-family:'Noto Serif',serif}
/* nút 💡 trong cài đặt */
.chip.hintb{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.chip.hintb small{font-size:12px;font-weight:700}
.chip.hintb.on{background:#e8cf8e;color:#3a1a0c;box-shadow:inset 0 0 0 1.5px #fff4e0}
@media (min-width:761px) and (max-width:1180px){.chip.hintb small{display:none}.chip.hintb{width:38px;height:38px;justify-content:center;padding:0}}
@media (max-height:500px) and (min-width:600px){.chip.hintb{width:34px;height:34px;min-height:34px}}

/* dải "thầy đồ" giữa bàn và khu của tôi */
.coach{position:relative;z-index:7;margin:0 10px 2px;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 8px;background:#f6ecd5 var(--paper);border:1px solid #8a6a3a;border-left:4px solid var(--jade);border-radius:6px;box-shadow:0 4px 12px -8px #2a1208aa;min-height:44px}
.coach.hidden{display:none}
.coach .co-ic{font-size:20px;flex:none;line-height:1}
.coach .co-tx{flex:1;min-width:0;font-size:13px;line-height:1.3}
.coach .co-tx b{font-weight:800}
.coach .co-why{color:#4b3b2a}
.coach .co-more{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.coach .co-n{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--gold);color:#2b1a08;font-size:11px;font-weight:900;margin-right:4px;vertical-align:1px;box-shadow:0 0 0 1px #6b4a1a}
.coach .co-note{position:absolute;left:8px;right:8px;bottom:calc(100% + 4px);background:#2b1d12ee;color:#ffe9b8;font-size:12.5px;line-height:1.35;padding:5px 10px;border-radius:6px;box-shadow:var(--shadow);animation:pop .2s;pointer-events:none}
.coach .co-btns{display:flex;gap:4px;flex:none;align-items:center}
.coach .btn.sm{min-height:40px;padding:4px 10px;font-size:13px}
.coach .co-q{width:40px;padding:0;font-size:17px;font-weight:900}
.co-sit{background:#fdf3df;border-left:4px solid var(--jade);padding:8px 10px;border-radius:4px;margin:0 0 10px;line-height:1.45}
@media (max-width:760px){.coach{margin:0 6px 2px;gap:5px;padding:4px 4px 4px 7px}.coach .co-tx{font-size:12.5px;line-height:1.28}.coach .co-ic{display:none}.coach #co-do{padding:4px 8px;font-size:12.5px}.coach .co-more{font-size:11px}}
@media (max-height:500px) and (min-width:600px){.coach{min-height:40px;padding:2px 4px 2px 6px;margin:0 6px 1px}.coach .co-tx{font-size:12px}.coach .co-more{display:none}}

/* lá / ghế / nút được gợi ý */
.hand .qcard.hinted{box-shadow:0 0 0 3px #f1c84b,0 0 0 6px #fff4c2,0 0 18px 4px #f1c84bcc;animation:hintpulse 1.4s ease-in-out infinite}
.hand .qcard.hinted::after{content:attr(data-step);inset:auto;top:calc(var(--cw)*.24);right:3px;width:20px;height:20px;border:0;border-radius:50%;background:#f1c84b;color:#2b1a08;font:900 12px/20px 'Noto Serif',serif;text-align:center;box-shadow:0 0 0 2px #6b4a1a,0 2px 4px #0005;z-index:3}
.eqc.hinted::after,.gp-item.hinted::after{content:attr(data-step);position:absolute;top:-9px;right:-7px;min-width:20px;height:20px;border-radius:50%;background:#f1c84b;color:#2b1a08;font:900 12px/20px 'Noto Serif',serif;text-align:center;box-shadow:0 0 0 2px #6b4a1a,0 2px 4px #0005;z-index:3}
.eqc.hinted{position:relative;box-shadow:0 0 0 2px #f1c84b,0 0 12px #f1c84b}
.gp-item.hinted{position:relative;box-shadow:0 0 0 3px #f1c84b,0 0 18px #f1c84bcc;border-radius:14px}
.gp-item.hinted::after{content:'💡';background:#fff4c2;font-size:13px}
.gp-hint{background:#fff4c2;border:1px solid #c9a24a;border-radius:6px;padding:7px 10px;margin:10px 0 0;font-size:13.5px;text-align:center}
.seat.hint-tgt .ava::after,.me-ava.hint-tgt::after{content:'💡';position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-size:14px;background:#fff4c2;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;box-shadow:0 0 0 2px #c9a24a,0 2px 4px #0005;z-index:4}
.seat.hint-tgt .plate{box-shadow:0 0 0 2px #f1c84b,0 0 14px #f1c84bcc}
.me-ava.hint-tgt{box-shadow:0 0 0 3px #f1c84b,0 0 14px #f1c84b}
#actions .btn.hinted{box-shadow:0 0 0 3px #f1c84b,0 0 16px #f1c84bcc;animation:hintpulse 1.4s ease-in-out infinite}
@keyframes hintpulse{50%{filter:brightness(1.08)}}
.phases span[data-ph]{cursor:help}

/* cờ nước: chữ Hán + tên Việt */
.seat .flag{display:none}
.kflag{display:inline-flex;align-items:center;gap:2px;height:16px;padding:0 6px 0 3px;background:var(--kc,#7d808c);color:#fff;font-size:10.5px;font-weight:800;line-height:1;border-radius:2px 0 0 2px;clip-path:polygon(0 0,100% 0,calc(100% - 4px) 50%,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #0003;white-space:nowrap;letter-spacing:-.1px}
.kflag b{font-family:var(--han,'LXGW WenKai TC',serif);font-weight:700;font-size:11px}
.me-row .kflag{height:20px;font-size:12px;padding:0 8px 0 4px}.me-row .kflag b{font-size:13px}
.seat .pwrap .pseal{display:none}
@media (max-width:760px){.me-row .kflag{display:none}.seat .kflag{font-size:10px;padding:0 5px 0 2px;height:15px}.seat .kflag b{font-size:10.5px}}

/* tên kỹ năng bấm được + bảng chi tiết */
.skl{color:var(--red);font-weight:800;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer;border-radius:3px}
.skl:hover,.skl:focus-visible{background:#fdeacc;outline:none}
.skc{cursor:pointer}
.skd-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.skd-h h3{margin:0;text-align:left;background:none;padding:0}
.skd-h small{color:var(--muted);font-size:12.5px}
.skd-h>div{flex:1;min-width:0}
.skd-k{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--red);color:#ffe9b8;font-family:var(--han,'LXGW WenKai TC',serif);font-size:26px;border-radius:4px;box-shadow:inset 0 0 0 2px #ffe9b855,0 2px 0 #4a0d06;transform:rotate(-4deg)}
.skd-t{flex:none;font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:99px;background:#efe2c4;border:1px solid #8a6a3a;white-space:nowrap}
.skd-t.t-active,.skd-t.t-conv{background:#d6e6d8;border-color:#3b7a62;color:#1d3f32}.skd-t.t-ask{background:#dfe6f3;border-color:#2f5a8a;color:#1f3f66}.skd-t.t-lord{background:#f3e2a8;border-color:#a9803a}
.skd-desc{font-size:15px;line-height:1.5;margin:0 0 10px;padding:9px 12px;background:#fdf3df;border-radius:4px;border:1px solid #d6c29a}
.skd-warn{background:#fbe1d8;border:1px solid #c4442b;border-radius:4px;padding:6px 10px;font-size:13.5px;margin:0 0 10px}
.skd-grid{display:grid;gap:8px}
.skd-row{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:start;font-size:14px;line-height:1.45}
.skd-row p{margin:0}.skd-row b{font-size:13.5px}
.skd-row.ex{background:#f3ead3;border-left:4px solid var(--gold);padding:7px 10px;border-radius:3px}
@media (max-width:520px){.skd-row{grid-template-columns:1fr;gap:2px}.skd-desc{font-size:14px}}

/* các pha */
.ph-list{margin:8px 0;padding:0;list-style:none;display:grid;gap:5px;counter-reset:ph}
.ph-list li{counter-increment:ph;display:grid;grid-template-columns:28px 1fr;gap:0 8px;padding:6px 8px;border-radius:4px;background:#fdf3df;border:1px solid #e3d2ad;font-size:13.5px;line-height:1.4}
.ph-list li::before{content:counter(ph);grid-row:span 2;width:24px;height:24px;border-radius:50%;background:#efe2c4;display:grid;place-items:center;font-weight:900;box-shadow:inset 0 0 0 1px #8a6a3a}
.ph-list li.on{background:#fbe1d8;border-color:var(--red)}.ph-list li.on::before{background:var(--red);color:#ffe9b8}
.ph-list li span{color:#4b3b2a}

/* màn ngang thấp, đông người: khu giữa bàn xếp ngang (chồng bài cạnh lời nhắc) để ghế trên cùng không che chồng bài */
@media (max-height:500px) and (min-width:600px){
  .center{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-end;width:min(600px,64%);gap:4px 8px;top:auto;bottom:6px;transform:translate(-50%,0)}
  .me-row .kflag{display:none}
  .seat.compact{width:136px}
  .center .feed{display:none}
  .seat.compact .kflag{font-size:9.5px;padding:0 4px 0 2px;height:14px;gap:1px}.seat.compact .kflag b{font-size:10px}
  .center .phases,.center .feed{flex-basis:100%}
  .center .prompt{flex:1 1 220px;min-width:0}
  .center .piles{gap:8px}.center .piles .qcard.sm{--cw:42px}.center .pile-empty{width:42px;height:59px}
}
.seat .rchip{white-space:nowrap}

/* ===== mở đầu ván: lật thẻ tre thân phận ===== */
.reveal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:12px;background:radial-gradient(ellipse at 50% 40%,#3a1a0c,#1a0b05);animation:fadein .3s}
.reveal.hidden{display:none}
.rv-box{width:min(620px,100%);text-align:center;color:#f6ecd5}
.rv-kick{font-family:'Noto Serif',serif;font-weight:800;font-size:20px;letter-spacing:.5px;margin-bottom:14px;color:#ecd28c}
.rv-kick .han{font-family:var(--han,'LXGW WenKai TC',serif);font-size:26px;color:#e8604a;margin-right:6px}
.rv-slips{display:flex;justify-content:center;gap:6px;margin:0 auto 14px;min-height:150px;align-items:flex-end}
.slip{--w:min(54px,calc((100vw - 60px) / var(--n) - 6px));width:var(--w);display:flex;flex-direction:column;align-items:center;gap:6px;animation:dealin .5s calc(var(--i) * 90ms) backwards cubic-bezier(.2,.9,.3,1.3)}
.slip small{font-size:11px;font-weight:700;color:#ecd28c;max-width:calc(var(--w) + 10px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slip-in{position:relative;width:100%;height:132px;transition:transform .35s cubic-bezier(.3,.7,.3,1.2)}
.slip-in.up{transform:translateY(-12px)}
.slip-in.flip{transform:translateY(-12px);animation:flip2d .5s ease-in-out}
.slip-in.flip .sb{animation:hideAt50 .5s linear forwards}.slip-in.flip .sf{animation:showAt50 .5s linear forwards}
@keyframes flip2d{0%,100%{transform:translateY(-12px) scaleX(1)}50%{transform:translateY(-14px) scaleX(.02)}}
@keyframes hideAt50{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes showAt50{0%,49%{opacity:0}50%,100%{opacity:1}}
.slip-in.bow{transform:rotate(-4deg) translateY(4px);transition-duration:.4s}
.slip-f{position:absolute;inset:0;border-radius:4px;overflow:hidden}
.slip-f.sb{background:repeating-linear-gradient(180deg,transparent 0 40px,#5a3d1488 40px 42px,transparent 42px 44px),linear-gradient(90deg,#8a6a2a,#d8b768 30%,#e8cf8e 50%,#c9a24a 72%,#7a5a20);box-shadow:inset 0 0 0 1px #3a2a0c,0 6px 14px -4px #000a}
.slip-f.sb i{position:absolute;left:0;right:0;top:22%;height:5px;background:#7a1b10;box-shadow:0 70px 0 #7a1b10}
.slip-f.sb span{position:absolute;inset:0;display:grid;place-items:center;font-family:'Noto Serif',serif;font-weight:800;font-size:22px;color:#3a1a0c99}
.slip-f.sf{opacity:0;background:#f6ecd5 var(--paper);box-shadow:inset 0 0 0 1px #8a6a3a,inset 0 0 0 3px #f6ecd5,inset 0 0 0 4px var(--rc,#8a6a3a),0 6px 18px -4px #000c;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:calc(var(--w) * .66 + 16px);gap:6px}
.slip-f.sf b{display:block;width:100%;padding:0 2px;text-align:center;white-space:normal;word-break:keep-all;overflow-wrap:normal;font-family:'Noto Serif',serif;font-weight:800;font-size:clamp(9.5px,calc(var(--w) * .22),13px);letter-spacing:0;line-height:1.25;color:var(--rc,#1f1813)} /* chữ ngang, mỗi từ 1 dòng – chữ dọc làm vỡ dấu tiếng Việt */
.slip-f.sf .ss{position:absolute;left:50%;top:8px;width:calc(var(--w) * .66);height:calc(var(--w) * .66);max-width:34px;max-height:34px;transform:translate(-50%,0) rotate(-8deg) scale(1);display:grid;place-items:center;font-style:normal;font-family:var(--han,'LXGW WenKai TC',serif);font-size:clamp(13px,calc(var(--w) * .4),21px);color:#fff4e0;background:#b5321f;border-radius:3px;box-shadow:inset 0 0 0 2px #fff4e066,0 0 0 1px #7a1b10;opacity:0}
.slip-in.stamp .ss{animation:sealstamp .45s ease-out forwards}
.slip-f.sf.r-lord{--rc:#a9803a}.slip-f.sf.r-loyal{--rc:#b7791f}.slip-f.sf.r-rebel{--rc:#a8291b}.slip-f.sf.r-spy{--rc:#3b7a62}
.slip-f.sf.r-lord .ss{background:#c9a24a;color:#3a1a0c}
.slip.mine small{color:#fff;font-weight:900}
.slip.mine .slip-f.sb{box-shadow:inset 0 0 0 1px #3a2a0c,0 0 0 2px #ecd28c,0 6px 18px -2px #ecd28c88}
.slip.lord .slip-in.flip .sf{box-shadow:inset 0 0 0 1px #8a6a3a,inset 0 0 0 3px #f6ecd5,inset 0 0 0 4px var(--rc),0 0 18px 2px #ecd28caa}
.rv-msg{min-height:92px;font-size:15px;line-height:1.5}
.rv-msg p{margin:4px 0}
.rv-me{font-family:'Noto Serif',serif;font-size:20px;animation:pop .3s;background:none!important;box-shadow:none!important;color:#f6ecd5!important;border:0!important}
.rv-me .seal{display:inline-grid;place-items:center;width:28px;height:28px;background:#b5321f;color:#fff4e0;font-style:normal;font-family:var(--han,'LXGW WenKai TC',serif);border-radius:3px;margin-right:4px;vertical-align:-4px}
.rv-me b{color:#ecd28c}.rv-me.r-rebel b{color:#ff8f73}.rv-me.r-spy b{color:#8fd8b4}
.rv-goal{color:#e8dcc0;font-size:14px}
.rv-lord{color:#ecd28c;font-weight:700;animation:pop .3s}
.reveal .btn.ghost{background:#f6ecd522;color:#f6ecd5;border-color:#ecd28c88}
.reveal.still .slip,.reveal.still .slip-in,.reveal.still .ss,.reveal.still .slip-f{animation:none!important;transition:none!important}
.reveal.still .slip-in.flip .sb{opacity:0}.reveal.still .slip-in.flip .sf{opacity:1}
.reveal.still .slip .ss{opacity:1}
@keyframes dealin{from{opacity:0;transform:translateY(-60px) rotate(-12deg) scale(.7)}}
@keyframes sealstamp{0%{opacity:0;transform:translate(-50%,0) rotate(-8deg) scale(2.4)}60%{opacity:1;transform:translate(-50%,0) rotate(-8deg) scale(.92)}100%{opacity:1;transform:translate(-50%,0) rotate(-8deg) scale(1)}}
@media (max-height:520px){.slip-in{height:100px}.rv-slips{min-height:116px;margin-bottom:8px}.rv-kick{margin-bottom:8px;font-size:17px}.rv-msg{min-height:70px;font-size:13.5px}.rv-me{font-size:17px}}

/* gợi ý thay chỗ lời nhắc (điện thoại / màn thấp) */
.prompt.has-co{cursor:pointer;background:#fff4c2 var(--paper);border-color:#c9a24a;box-shadow:0 0 0 3px #fff4c2,0 0 0 5px #f1c84b,var(--shadow-lg)}
.prompt.has-co .pt{font-weight:600}.prompt.has-co .co-i{color:var(--blue);font-weight:900}
.center.tight2 .prompt.has-co .ps{display:block;-webkit-line-clamp:unset}
/* nút thả emoji 😂 trên thanh trên cùng – kiểu chip sơn mài */
.react-slot{display:inline-flex}
.react-slot .bgr-btn{width:38px;height:38px;font-size:19px;background:#fff4e01f;box-shadow:inset 0 0 0 1.5px #ecd28c99;z-index:auto;border-radius:50%}
.react-slot .bgr-btn.cd{background:conic-gradient(#ecd28c88 var(--p,0%),#fff4e01f 0)}
.react-slot .bgr-btn.open{box-shadow:inset 0 0 0 2px #ecd28c,0 0 10px #ecd28c88}
@media (max-height:500px) and (min-width:600px){.react-slot .bgr-btn{width:34px;height:34px;font-size:17px}}
.bgr-panel{background:#f6ecd5 var(--paper)!important;border:1px solid #8a6a3a;border-radius:8px!important}
.bgr-panel .em button{background:#efe2c4!important;border-radius:6px!important}
.bgr-panel .ph button{background:linear-gradient(180deg,#c4442b,#7a1b10)!important;color:#ffe9b8!important;border-radius:4px!important;font-family:'Noto Serif',serif!important}
#btn-guide2{display:none}
@media (max-width:400px){.topbar{gap:4px;padding:5px 5px}.turn-info{font-size:12px;min-width:0}.topbar .chip.ic,.react-slot .bgr-btn{width:35px;height:35px;font-size:16px}#btn-guide{display:none}#btn-guide2{display:inline-grid}.tb-right{gap:4px}.timer{padding:2px 6px}}
/* lá xs (bảng xem người chơi): tên đã ghi bên cạnh → bỏ khung tên để hình hiện đủ */
.qcard.xs{--cw:48px}
.qcard.xs .cname{display:none}
.qcard.xs .art{margin:calc(var(--cw)*.06)}