/* Ma Sói – đêm trăng làng quê. Mobile-first. */
:root{
  --font:"Be Vietnam Pro",system-ui,sans-serif;--title:"Baloo 2","Be Vietnam Pro",sans-serif;
  --gold:#f2c84b;--lantern:#ff8a3d;--wolf:#e5383b;--green:#2fbf71;--blue:#3a86ff;--pink:#ff5d8f;
  --ink:#f3eee2;--muted:#b9b4c9;--panel:rgba(16,20,44,.8);--panel2:rgba(28,34,70,.86);--line:rgba(255,255,255,.14);--chip:rgba(255,255,255,.1);--chipOn:rgba(242,200,75,.25);
  --seat:rgba(22,28,60,.82);--shadow:0 10px 30px -12px #000a;
  --sky-t:#0b1030;
  /* cảnh */
  --hill-far:#1b2350;--hill-mid:#131a3d;--hill-near:#0d1330;--field:#1f2a5a;--banyan:#0f1636;--trunk:#0c1230;
  --bamboo:#10193a;--bamboo-node:#0a1028;--bleaf:#132048;
  --roof:#1a2045;--tile:#232b58;--col:#141a3a;--wall:#1b2148;--door:#ffb347;--door-o:.85;--base:#232a52;--base2:#1a2047;--ridge:#262e60;--pearl:#ffe9a8;
  --hut-roof:#1a2147;--hut-wall:#141a3a;--hut-door:#ffb347;
  --glow-o:1;--fog-o:.55;
  color-scheme:dark;
}
body.th-day,body.th-dawn{
  --ink:#1f2337;--muted:#5d6077;--panel:rgba(255,253,246,.86);--panel2:rgba(255,255,255,.94);--line:rgba(31,35,55,.12);--chip:rgba(31,35,55,.07);--chipOn:rgba(255,138,61,.22);
  --seat:rgba(255,255,255,.88);--shadow:0 10px 26px -14px #2b1d0b88;
  --hill-far:#9fcf8f;--hill-mid:#76b46a;--hill-near:#5b9c50;--field:#8cc47a;--banyan:#3f7d3c;--trunk:#6b4a2b;
  --bamboo:#4f9a45;--bamboo-node:#356d2f;--bleaf:#5daa4d;
  --roof:#a8442b;--tile:#c25a3a;--col:#7a3b22;--wall:#e8d6b0;--door:#5a3420;--door-o:1;--base:#c9b79c;--base2:#b5a184;--ridge:#8a3220;--pearl:#ffd23f;
  --hut-roof:#c9a55a;--hut-wall:#d9c29a;--hut-door:#6b4a2b;
  --glow-o:0;--fog-o:.18;color-scheme:light;
}
body.th-dawn{--hill-far:#c7a2b4;--hill-mid:#9c7f9f;--hill-near:#6f5f86;--bamboo:#4a4e74;--bleaf:#565a85;--roof:#7a3f4a;--wall:#d8bfae;--glow-o:.5;--fog-o:.5}
body.th-dusk{
  --ink:#fff6ea;--muted:#f1d3c4;--panel:rgba(58,26,52,.8);--panel2:rgba(74,34,64,.9);--line:rgba(255,255,255,.16);--chip:rgba(255,255,255,.12);--chipOn:rgba(255,138,61,.3);--seat:rgba(70,30,58,.84);
  --hill-far:#7a3f63;--hill-mid:#5a2c50;--hill-near:#3d1d3c;--field:#6b3456;--banyan:#3a1a38;--trunk:#2c142c;
  --bamboo:#341a37;--bamboo-node:#24102a;--bleaf:#41203f;--roof:#4a1f36;--tile:#5c2a44;--col:#331832;--wall:#4a2443;--door:#ffb347;--door-o:.7;--base:#5a2c4c;--base2:#4a2240;--ridge:#5f2a46;
  --hut-roof:#4a2443;--hut-wall:#3a1a38;--hut-door:#ffb347;--glow-o:.6;--fog-o:.35;
}
body.th-blood{--hill-far:#3a0d18;--hill-mid:#2a0812;--hill-near:#1a050c;--bamboo:#22060f;--bleaf:#2c0a14;--roof:#2a0a14;--fog-o:.5}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font:500 15px/1.45 var(--font);color:var(--ink);background:#0b1030;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--title);line-height:1.15}

/* ================= CẢNH ================= */
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sky{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease}
.s-night{background:linear-gradient(#060a22 0%,#121845 45%,#2b2160 78%,#3b2a63 100%)}
.s-dawn{background:linear-gradient(#5b6fb8 0%,#c99ac2 40%,#ffb38a 72%,#ffd9a0 100%)}
.s-day{background:linear-gradient(#5fb6f0 0%,#9fd8ff 45%,#dff3ff 75%,#fff4d6 100%)}
.s-dusk{background:linear-gradient(#2b2160 0%,#7a3b7a 35%,#e0645a 68%,#ffb05a 100%)}
.s-blood{background:linear-gradient(#12030a 0%,#3a0818 50%,#6b1022 100%)}
.th-night .s-night,.th-dawn .s-dawn,.th-day .s-day,.th-dusk .s-dusk,.th-blood .s-blood{opacity:1}
.stars{position:absolute;inset:0;opacity:0;transition:opacity 2s}
.th-night .stars,.th-blood .stars{opacity:1}.th-dawn .stars,.th-dusk .stars{opacity:.35}
.stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:twinkle 3.4s var(--d) infinite ease-in-out}
@keyframes twinkle{50%{opacity:.25;transform:scale(.6)}}
.moon{position:absolute;right:9%;top:7%;width:clamp(70px,14vmin,150px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#fffbea 0%,#f7e6ad 55%,#e3c470 100%);
  box-shadow:0 0 40px 10px #ffeeb055,0 0 120px 40px #ffe9a822;transition:transform 2.6s cubic-bezier(.5,0,.3,1),opacity 2s,filter 2s;transform:translateY(0)}
.moon i{position:absolute;border-radius:50%;background:#e2c77a;opacity:.55}
.moon i:nth-child(1){width:22%;height:22%;left:24%;top:30%}.moon i:nth-child(2){width:14%;height:14%;left:58%;top:58%}.moon i:nth-child(3){width:9%;height:9%;left:62%;top:24%}
.th-day .moon,.th-dawn .moon{transform:translateY(70vh);opacity:0}.th-dusk .moon{transform:translateY(30vh);opacity:.5}
.th-blood .moon{filter:hue-rotate(-40deg) saturate(3) brightness(.85);box-shadow:0 0 60px 20px #ff3b3b55}
.sun{position:absolute;left:12%;top:9%;width:clamp(60px,11vmin,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(#fff8d0,#ffd23f 60%,#ffb300);
  box-shadow:0 0 60px 20px #ffd23f77;opacity:0;transform:translateY(70vh);transition:transform 2.6s cubic-bezier(.5,0,.3,1),opacity 2s}
.th-day .sun{opacity:1;transform:none}.th-dawn .sun{opacity:.9;transform:translateY(42vh)}.th-dusk .sun{opacity:.9;transform:translate(60vw,46vh);background:radial-gradient(#ffe0a0,#ff7a3d 70%)}
.cloud{position:absolute;height:28px;border-radius:30px;background:#fff;opacity:0;transition:opacity 2s;filter:blur(1px);animation:drift 70s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:46%;height:180%;left:16%;top:-80%}.cloud::after{width:34%;height:140%;left:50%;top:-55%}
.c1{width:140px;top:16%;left:-10%}.c2{width:100px;top:26%;left:-30%;animation-duration:95s;animation-delay:-40s}.c3{width:170px;top:10%;left:-20%;animation-duration:120s;animation-delay:-80s}
.th-day .cloud{opacity:.85}.th-dawn .cloud,.th-dusk .cloud{opacity:.35}
@keyframes drift{to{transform:translateX(130vw)}}
.hills{position:absolute;left:0;right:0;bottom:0;height:min(42vh,360px)}
.hills svg{width:100%;height:100%;display:block}
.hl-far{fill:var(--hill-far)}.hl-mid{fill:var(--hill-mid)}.hl-near{fill:var(--hill-near)}.hl-field{stroke:var(--field);stroke-width:2}
.bn-can{fill:var(--banyan)}.bn-trunk{fill:var(--trunk)}.bn-root{stroke:var(--trunk);stroke-width:2.5}
.h-roof{fill:var(--hut-roof)}.h-wall{fill:var(--hut-wall)}.h-door{fill:var(--hut-door)}
.hills path,.hills rect,.dinh path,.dinh rect,.bamboo path{transition:fill 2.2s,stroke 2.2s,opacity 2s}
.dinh{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);width:min(64vw,560px)}
.dinh svg{width:100%;display:block}
.d-roof{fill:var(--roof)}.d-tile{stroke:var(--tile);stroke-width:2}.d-col{fill:var(--col)}.d-wall rect{fill:var(--wall)}
.d-door{fill:var(--door)!important;opacity:var(--door-o)}
.d-base{fill:var(--base)}.d-base2,.d-step{fill:var(--base2)}.d-band{fill:var(--wall)}.d-win rect{fill:var(--door);opacity:var(--door-o)}
.d-ridge{fill:var(--ridge)}.d-dragon{fill:var(--ridge)}.d-pearl{fill:var(--pearl)}.d-pearl-fire{fill:#ff8a3d}
.d-glow{opacity:calc(var(--glow-o)*.8);transition:opacity 2s;animation:flicker 3.2s infinite}
.lantern .l-str{stroke:#2a1a10;stroke-width:1.5}.lantern .l-body{fill:#d62f2f}
.lantern .l-glow{fill:#ffb347;opacity:calc(var(--glow-o)*.35);animation:flicker 2.4s var(--d) infinite;transition:opacity 2s}
.lantern{animation:sway 4s var(--d) ease-in-out infinite;transform-origin:50% 0;transform-box:fill-box}
@keyframes sway{50%{transform:rotate(4deg)}}
@keyframes flicker{0%,100%{opacity:calc(var(--glow-o)*.8)}40%{opacity:calc(var(--glow-o)*.55)}55%{opacity:calc(var(--glow-o)*.9)}70%{opacity:calc(var(--glow-o)*.6)}}
.bamboo{position:absolute;bottom:0;height:min(78vh,640px);width:auto}
.bamboo svg{height:100%;width:auto;display:block}
.bamboo.left{left:-3vw}.bamboo.right{right:-3vw}
.b-stalk path{stroke:var(--bamboo)}.b-node path{stroke:var(--bamboo-node)}.b-leaf{fill:var(--bleaf);transition:fill 2.2s}
.b-leaf{animation:rustle 6s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
@keyframes rustle{50%{transform:skewX(1.5deg)}}
.eyes{opacity:0;transition:opacity 1s}
.eye-pair ellipse{fill:#ff3b2f;filter:drop-shadow(0 0 4px #ff3b2f)}
.step-wolves .eyes,.step-wolves2 .eyes{opacity:1}
.eye-pair{animation:blink 4s var(--d) infinite}
@keyframes blink{0%,46%,54%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
.eye-pair{transform-box:fill-box;transform-origin:center}
.fog{position:absolute;left:-50%;width:200%;height:30vh;bottom:0;opacity:var(--fog-o);transition:opacity 2.5s;
  background:radial-gradient(ellipse 30% 45% at 20% 70%,#c9d3f066,transparent 70%),radial-gradient(ellipse 25% 40% at 55% 75%,#c9d3f055,transparent 70%),radial-gradient(ellipse 30% 50% at 85% 70%,#c9d3f066,transparent 70%);
  animation:fog 40s linear infinite}
.f2{bottom:12vh;height:22vh;animation-duration:65s;animation-direction:reverse;opacity:calc(var(--fog-o)*.7)}
@keyframes fog{to{transform:translateX(25%)}}
.fireflies{position:absolute;inset:0;opacity:0;transition:opacity 2s}
.th-night .fireflies{opacity:1}
.fireflies i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffef8a;box-shadow:0 0 8px 2px #ffe45c;animation:fly 7s var(--d) ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(var(--x),var(--y));opacity:1}}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 50%,#0006 100%);transition:opacity 2s}
.th-day .vignette{opacity:.25}
body.flash-night #scene{animation:darken 1.4s}
@keyframes darken{30%{filter:brightness(.4)}}

/* ================= CHUNG ================= */
.screen{position:fixed;inset:0;z-index:2;display:none;overflow-y:auto;overflow-x:hidden}
.screen.active{display:flex;flex-direction:column}
.btn{border:0;border-radius:14px;padding:10px 18px;min-height:44px;font-weight:800;background:var(--panel2);color:var(--ink);box-shadow:0 4px 0 #0003,var(--shadow);border:1px solid var(--line);transition:transform .12s,filter .2s}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0003}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.btn.pri{background:linear-gradient(135deg,#ffb347,#ff7a3d);color:#2a1305;border-color:#ffcf8a}
.btn.red{background:linear-gradient(135deg,#ff5a5f,#c81d25);color:#fff;border-color:#ff8a8f}
.btn.green{background:linear-gradient(135deg,#46d38a,#1f9e5a);color:#fff;border-color:#8ff0b9}
.btn.purple{background:linear-gradient(135deg,#a77bf3,#6a3fc4);color:#fff}
.btn.big{font-size:17px;min-height:52px;width:100%}
.btn.sm{min-height:38px;padding:6px 12px;font-size:14px}
.chip{border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:6px 12px;min-height:40px;font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap}
.chip.ico{width:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.chip.on{background:var(--chipOn);border-color:var(--gold)}
.chip.sm{min-height:32px;padding:3px 10px;font-size:13px}
.chip:disabled{opacity:.5}
.back-hub{position:absolute;left:12px;top:10px;color:var(--ink);text-decoration:none;font-weight:700;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;z-index:3;backdrop-filter:blur(6px)}
.note{font-size:12px;color:var(--muted);text-align:center}

/* ================= TRANG CHỦ ================= */
#screen-home{align-items:center;justify-content:center;padding:58px 16px 24px}
.home-card{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:16px 20px 18px;box-shadow:var(--shadow);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:12px;text-align:center}
.hero-svg{width:100%;max-height:170px;display:block;margin:-6px 0 -10px}
.hero-wolf{transform-origin:50% 100%;transform-box:fill-box;animation:howlB 4s ease-in-out infinite}
@keyframes howlB{0%,70%,100%{transform:none}80%{transform:rotate(-5deg) translateY(-2px)}}
.logo{font-size:52px;letter-spacing:1px;color:#fff3c4;text-shadow:0 3px 0 #7a2f12,0 0 24px #ffb34766;margin-top:-4px}
.th-day .logo{color:#a8442b;text-shadow:0 3px 0 #ffd9a0}
.logo span{color:var(--wolf);text-shadow:0 3px 0 #4a0a0d,0 0 18px #ff3b2f88}
.tag{color:var(--muted);font-size:14px}
.fld{display:flex;flex-direction:column;gap:4px;text-align:left;font-weight:700;font-size:13px;color:var(--muted)}
input:not([type]),.fld input,#join-code,#say-in{border:1px solid var(--line);background:var(--chip);border-radius:12px;padding:10px 14px;min-height:44px;font-weight:700;font-size:16px;color:var(--ink);outline:none;width:100%}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #f2c84b33}
.btn-col{display:flex;flex-direction:column;gap:10px}
.join-row{display:flex;gap:8px}.join-row input{text-align:center;letter-spacing:4px;text-transform:uppercase}
.join-row .btn{flex:none}
.home-tools{display:flex;justify-content:center;gap:8px}

/* ================= SẢNH ================= */
#screen-lobby{align-items:center;padding:12px 16px 24px}
.lobby{width:min(980px,100%);display:flex;flex-direction:column;gap:12px}
.lobby-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.code-box{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 14px;font-weight:700;display:flex;align-items:center;gap:8px;backdrop-filter:blur(6px)}
.code-box b{font-family:var(--title);font-size:22px;letter-spacing:3px;color:var(--gold)}
.lobby-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:860px){.lobby-grid{grid-template-columns:1fr 1.25fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:10px;min-width:0}
.panel h3{font-size:19px;display:flex;align-items:baseline;gap:8px}.panel h3 small{font:700 13px var(--font);color:var(--muted)}
.plist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.plist li{display:flex;align-items:center;gap:8px;background:var(--chip);border-radius:12px;padding:5px 6px;min-height:44px;min-width:0}
.plist li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.plist .x{border:0;background:transparent;width:32px;height:32px;border-radius:50%;flex:none;color:var(--muted)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}.row-btns .btn{flex:1}
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:6px}
.rrow{display:flex;align-items:center;gap:8px;background:var(--chip);border-radius:12px;padding:4px 6px;min-height:46px;border-left:4px solid var(--c)}
.rrow .re{font-size:20px;width:26px;text-align:center;flex:none}
.rrow .rn{flex:1;min-width:0;font-weight:700;font-size:14px;line-height:1.2}.rrow .rn small{display:block;font-weight:500;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .cnt{font-family:var(--title);font-size:20px;min-width:22px;text-align:center}
.rrow button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);font-weight:800;font-size:18px;flex:none}
.rrow.off{opacity:.55}.rrow.vill button{visibility:hidden}
.role-err{color:#ff8a8f;font-weight:700;font-size:13px;min-height:1em}
.th-day .role-err{color:#c81d25}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;align-items:center;gap:10px;background:var(--chip);border-radius:12px;padding:6px 10px;min-height:46px}
.opt>span{flex:1;min-width:0;display:flex;flex-direction:column}.opt small{color:var(--muted);font-size:12px;font-weight:500}
.opt select{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 8px;min-height:40px;font-weight:700;max-width:46%}
.opt input[type=checkbox]{width:22px;height:22px;accent-color:#ff8a3d;flex:none}
.opt.auto{background:transparent;padding:0;min-height:40px}
.lobby>#btn-start{position:sticky;bottom:10px;z-index:3;box-shadow:0 4px 0 #0003,0 10px 30px -6px #000c}
.wait{position:sticky;bottom:10px;z-index:3;text-align:center;font-weight:700;color:var(--muted);background:var(--panel);border-radius:999px;padding:8px}

/* avatar */
.av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font:800 18px var(--title);color:#fff;background:var(--c);box-shadow:inset 0 -4px 0 #0003,0 0 0 2px #fff3;position:relative}
.av .bot{position:absolute;right:-5px;bottom:-4px;font-size:12px}

/* ================= VÁN CHƠI ================= */
#screen-game{overflow:hidden;padding:0 0 env(safe-area-inset-bottom)}
.topbar{display:flex;align-items:center;gap:6px;padding:6px 8px;flex:none;background:var(--panel);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);position:relative;z-index:3}
.phase{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font:800 16px/1.15 var(--title)}
.phase .pi{font-size:22px;flex:none}.phase .pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phase small{display:block;font:600 12px var(--font);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools{display:flex;gap:4px;align-items:center;flex:none}
#vol{width:70px;accent-color:#ff8a3d;display:none}
@media (min-width:700px){#vol{display:block}}
@media (max-width:420px){#btn-voice{display:none}}
.clock{height:6px;flex:none;background:#0004;position:relative;z-index:3}
.clock i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ffb347,#ff7a3d);width:0}
.clock.low i{background:var(--wolf)}
.clock:not(.on) i{width:0!important}
.clock b{display:none}
.ntime{margin-left:auto;flex:none;font:800 14px var(--title);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:0 10px;line-height:26px;min-width:44px;text-align:center}
.ntime:empty{display:none}
.ntime.low{color:#fff;background:var(--wolf);animation:pulse 1s infinite}
.narr .nt{min-width:0}
@keyframes pulse{50%{transform:scale(1.1)}}
.gwrap{flex:1;min-height:0;display:flex;flex-direction:column}
.gmain{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.narr{flex:none;margin:8px 8px 0;padding:7px 8px 7px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:14px;line-height:1.3;backdrop-filter:blur(6px);min-height:40px;display:flex;align-items:center;gap:8px}
.narr .ni{font-size:22px;flex:none}
.narr.hot{border-color:var(--gold);box-shadow:0 0 0 2px #f2c84b55,0 0 22px -4px #f2c84b88}
.seats-wrap{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px;position:relative}
.seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-content:start}
.seat{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--seat);padding:6px 3px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:78px;min-width:0;box-shadow:var(--shadow);backdrop-filter:blur(6px);transition:transform .2s,box-shadow .2s,opacity .4s,background .6s}
.seat .av{width:40px;height:40px;font-size:17px}
.seat .nm{font-weight:700;font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;padding:0 2px}
.seat .sub{font-size:11px;color:var(--muted);line-height:1.1;min-height:12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.seat.me{border-color:var(--gold);border-width:2px}
.seat.dead{opacity:.55;filter:grayscale(.8)}
.seat.dead .av{background:#59606f!important}
.seat.dead .av b{opacity:.25}
.seat.dead .av::after{content:"👻";position:absolute;font-size:22px;animation:ghost 3s ease-in-out infinite}
@keyframes ghost{50%{transform:translateY(-4px)}}
.seat.can{cursor:pointer;border-color:#ffcf8a;box-shadow:0 0 0 2px #ff8a3d55,var(--shadow)}
.seat.can:hover{transform:translateY(-2px)}
.seat.sel{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold),0 0 18px #f2c84baa;transform:translateY(-2px)}
.seat.no{opacity:.45}
.seat.talk{animation:talk .5s 2}
@keyframes talk{50%{transform:scale(1.06)}}
.seat .badge{position:absolute;font:800 12px/1 var(--font);border-radius:999px;padding:3px 6px;box-shadow:0 2px 6px -2px #0008;white-space:nowrap}
.seat .b-votes{right:-4px;top:-6px;background:var(--wolf);color:#fff;font-size:13px;min-width:24px;text-align:center}
.seat .b-acc{left:-4px;top:-6px;background:#ffb347;color:#2a1305}
.seat .b-ready{right:-4px;top:-6px;background:var(--green);color:#fff;font-size:11px;padding:3px 5px}
.seat .b-away{left:3px;top:24px;background:#59606f;color:#fff;font-size:10px;padding:2px 3px}
.seat .b-love{left:50%;top:-8px;transform:translateX(-50%);background:transparent;box-shadow:none;font-size:14px;padding:0}
.seat .b-wolfv{left:50%;bottom:-8px;transform:translateX(-50%);background:#3a0d18;color:#ffb3a8;font-size:11px}
.seat .rdot{position:absolute;left:calc(50% + 9px);top:26px;width:22px;height:22px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 0 0 2px #fff6}
.seat .priv{display:none}
body.peeking .seat .priv,body.act-on .seat .priv,body.ghost .seat .priv,body.ph-ended .seat .priv{display:flex}
.seat.wolfmate{background:linear-gradient(180deg,#5a1420cc,var(--seat))}
body:not(.peeking):not(.act-on):not(.ghost) .seat.wolfmate{background:var(--seat)}
.seat.condemned{border-color:var(--wolf);box-shadow:0 0 0 3px var(--wolf),0 0 24px #e5383b99;animation:shiver .3s infinite}
@keyframes shiver{25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
.seat.win{box-shadow:0 0 0 3px var(--gold),0 0 22px #ffd23faa}
.seat .last-say{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px 8px;font-size:12px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;z-index:2}
/* lửa trại giữa sân đình (màn rộng: ngồi vòng tròn) */
.fire{display:none}
.seats-wrap.ring{overflow:hidden}
.seats-wrap.ring .seats{display:block;position:absolute;inset:0}
.seats-wrap.ring .seat{position:absolute;left:var(--x);top:var(--y);width:104px;transform:translate(-50%,-50%);min-height:92px}
.seats-wrap.ring .seat.can:hover,.seats-wrap.ring .seat.sel{transform:translate(-50%,-54%)}
.seats-wrap.ring .seat .av{width:48px;height:48px;font-size:20px}
.seats-wrap.ring .seat .nm{font-size:14px}
.seats-wrap.ring .seat .rdot{top:34px;left:calc(50% + 12px)}
.seats-wrap.ring .fire{display:block;position:absolute;left:50%;top:52%;width:120px;height:120px;transform:translate(-50%,-50%)}
.fire svg{width:100%;height:100%;overflow:visible}
.fl{transform-origin:50% 100%;transform-box:fill-box;animation:flame 1.1s ease-in-out infinite alternate}
.fl2{animation-duration:.8s;animation-delay:-.3s}.fl3{animation-duration:1.4s;animation-delay:-.6s}
@keyframes flame{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.92,1.08) skewX(4deg)}100%{transform:scale(1.05,.95) skewX(-4deg)}}
.fire .glow{animation:flicker 2s infinite;--glow-o:1}
.th-day .fire{opacity:.7}
/* hàng hành động */
.act{flex:none;display:flex;gap:8px;align-items:stretch;padding:6px 8px;background:var(--panel);border-top:1px solid var(--line);backdrop-filter:blur(8px);min-height:76px}
.mycard{flex:none;width:62px;border:1px solid var(--line);background:var(--chip);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.mycard .mc-art{width:34px;display:block}.mycard .mc-art svg{width:100%;display:block}
.mycard .mc-txt{font-size:10px;font-weight:700;line-height:1.1;color:var(--muted);text-align:center}
.mycard:active{border-color:var(--gold)}
.act-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.act-body .hint{font-size:13.5px;font-weight:600;line-height:1.3}
.act-body .hint b{color:var(--gold)}.th-day .act-body .hint b{color:#b8541f}
.act-body .btns{display:flex;gap:6px;flex-wrap:wrap}
.act-body .btns .btn{flex:1 1 auto;min-height:42px;padding:6px 12px;font-size:14px}
.act-body.mine{animation:glowIn 1.2s}
@keyframes glowIn{0%{filter:brightness(1.8)}}
/* khung chat */
.dock{flex:none;height:min(36vh,320px);min-height:170px;display:flex;flex-direction:column;background:var(--panel);border-top:1px solid var(--line);backdrop-filter:blur(8px);transition:height .3s}
.dock.big{height:62vh}
.tabs{display:flex;gap:4px;padding:5px 6px 0;overflow-x:auto;scrollbar-width:none;flex:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:1px solid transparent;background:transparent;border-radius:10px 10px 0 0;padding:5px 10px;min-height:36px;font-weight:700;font-size:13.5px;color:var(--muted);white-space:nowrap;position:relative}
.tab.on{background:var(--chip);color:var(--ink);border-color:var(--line);border-bottom-color:transparent}
.tab .dot{display:inline-block;vertical-align:1px;margin-left:4px;min-width:16px;height:16px;border-radius:8px;background:var(--wolf);color:#fff;font-size:10px;line-height:16px;padding:0 4px;text-align:center}
.tab.t-wolf.on{background:#5a142055;color:#ffb3a8}.tab.t-love.on{background:#ff5d8f33}.tab.t-ghost.on{background:#8ea3c933}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:4px;background:var(--chip);margin:0 6px;border-radius:0 10px 10px 10px;overscroll-behavior:contain}
.m{font-size:13.5px;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere}
.m b{font-weight:800}.m .tm{font-size:11px;color:var(--muted)}
.m.sys{color:var(--muted);font-size:12.5px;font-style:italic;text-align:center;padding:1px 0}
.m.sys.big{font-style:normal;font-weight:700;color:var(--ink);background:var(--chip);border-radius:10px;padding:4px 8px}
.m.acc{color:#ffb347;font-weight:700;text-align:center;font-size:12.5px}.th-day .m.acc{color:#b8541f}
.m.claim{background:#7b4bc433;border-radius:10px;padding:3px 8px}
.m.last{background:#e5383b26;border-radius:10px;padding:3px 8px}
.m.mine b{color:var(--gold)}.th-day .m.mine b{color:#b8541f}
.m.note{background:#f2c84b22;border-radius:8px;padding:3px 8px}
.m.lg{padding:2px 0;border-bottom:1px dashed var(--line)}
.m.lg.death{color:#ff9a9a}.th-day .m.lg.death{color:#c81d25}.m.lg.win{color:var(--gold);font-weight:800}
.msgs .empty{margin:auto;color:var(--muted);font-size:13px;text-align:center}
.quick{display:flex;gap:4px;padding:5px 6px 0;overflow-x:auto;scrollbar-width:none;flex:none}
.quick::-webkit-scrollbar{display:none}
.quick .chip{min-height:32px;font-size:12.5px;padding:3px 10px}
.say{display:flex;gap:6px;padding:6px;flex:none}
.say input{flex:1;min-width:0;min-height:42px;padding:8px 12px;font-size:15px}
.say .btn{min-height:42px;padding:6px 14px}
.say input:disabled{opacity:.5}
/* màn rộng */
@media (min-width:900px){
  .gwrap{flex-direction:row}
  .gmain{flex:1 1 auto}
  .dock{width:min(380px,32vw);height:auto!important;border-top:0;border-left:1px solid var(--line)}
  #btn-dock{display:none}
  .seats{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
  .seat{min-height:96px}.seat .av{width:50px;height:50px;font-size:21px}.seat .nm{font-size:14px}.seat .rdot{top:36px;left:calc(50% + 13px)}
  .act{min-height:84px}.mycard{width:74px}.mycard .mc-art{width:42px}
  .narr{font-size:15px}
}
@media (max-width:380px){.seat .av{width:36px;height:36px;font-size:15px}.seat{min-height:72px}.seat .rdot{top:24px;left:calc(50% + 7px);width:20px;height:20px;font-size:11px}.narr{font-size:13px}}
@media (max-height:700px) and (max-width:899px){.dock{height:max(170px,32vh)}.act{min-height:68px}.narr{min-height:34px;padding-top:5px;padding-bottom:5px}}

/* xem vai (giữ) */
.peek{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#05081bcc;backdrop-filter:blur(4px);padding:16px;pointer-events:none}
body.peeking .peek{display:flex}
.peek .rcard{width:min(62vw,250px);filter:drop-shadow(0 18px 30px #000a);animation:flipIn .35s}
.peek .pk-txt{max-width:420px;text-align:center;color:#f3eee2;font-weight:600;font-size:14px;background:#0008;border-radius:14px;padding:8px 12px}
.peek .pk-txt b{color:var(--gold)}
@keyframes flipIn{0%{transform:rotateY(90deg) scale(.8)}100%{transform:none}}
.rcard{display:block}
.rc-top{font:800 13px var(--title);letter-spacing:5px}
.rc-name{font:800 21px var(--title)}
.rc-team{font:800 11px var(--font);letter-spacing:1.5px}
.rchip{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:1px 8px;font-weight:800;font-size:12px;background:color-mix(in srgb,var(--c) 30%,transparent);border:1px solid var(--c);white-space:nowrap}

/* hộp thoại */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:16px;background:#05081bb3;backdrop-filter:blur(3px)}
.modal.show{display:flex}
.modal-box{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 20px 50px -10px #000c;animation:pop .3s}
.modal-box.wide{width:min(760px,100%)}
.modal-box h2{font-size:24px;text-align:center;margin-bottom:8px}
.modal-box p{margin:6px 0}.modal-box .ctr{text-align:center}
.modal-box .btns{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.modal-box .btns .btn{flex:1 1 140px}
@keyframes pop{0%{transform:scale(.85);opacity:0}}
.reveal-card{width:min(58vw,230px);margin:6px auto;position:relative;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none;cursor:pointer;perspective:800px}
.reveal-card .flip{position:relative;transition:transform .45s;transform-style:preserve-3d}
.reveal-card .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.reveal-card .face.front{position:absolute;inset:0;transform:rotateY(180deg)}
.reveal-card.open .flip{transform:rotateY(180deg)}
.reveal-hint{text-align:center;font-weight:700;color:var(--muted);font-size:13px}
.g-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.g-body h3{font-size:18px;margin:12px 0 4px;color:var(--gold)}.th-day .g-body h3{color:#b8541f}
.g-body ul,.g-body ol{padding-left:20px;display:flex;flex-direction:column;gap:3px}
.g-body p,.g-body li{font-size:14px}
.g-roles{display:flex;flex-direction:column;gap:10px}
.g-role{display:flex;gap:10px;align-items:flex-start;background:var(--chip);border-radius:14px;padding:8px}
.g-card{width:84px;flex:none}.g-card svg{width:100%}
.g-role h4{font-size:17px}.g-role p{font-size:13.5px;margin:2px 0}
.g-role .fun{font:700 11px var(--font);background:#ff5d8f33;border-radius:999px;padding:1px 6px}
.targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin:8px 0}
.targets .btn{min-height:44px;font-size:14px}
.endgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:10px 0}
.endgrid .ec{text-align:center;font-size:12px;font-weight:700;line-height:1.2;min-width:0}
.endgrid .ec svg{width:100%;display:block;margin-bottom:3px}
.endgrid .ec.lose{opacity:.55;filter:grayscale(.6)}
.endgrid .ec .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-title{font-size:30px!important}
.win-title.wolf{color:#ff6b6b}.win-title.village{color:#46d38a}.win-title.lovers{color:#ff8fb3}.win-title.tanner{color:#c3c8d4}

/* thông báo */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;z-index:60;background:#14182ee6;color:#fff;font-weight:700;border-radius:999px;padding:9px 18px;max-width:92vw;text-align:center;transition:.25s;pointer-events:none;font-size:14px}
.toast.show{opacity:1;transform:translate(-50%,0)}
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:800 clamp(26px,7vw,52px)/1.1 var(--title);color:#fff;text-shadow:0 4px 0 #0007,0 0 30px #000;text-align:center;width:94vw;animation:banner var(--bd,2.2s) forwards}
.banner small{display:block;font:700 clamp(14px,3.6vw,20px) var(--font);margin-top:8px;text-shadow:0 2px 8px #000}
.banner.night{color:#cdd7ff}.banner.dawn{color:#ffe6b0}.banner.blood{color:#ff6b6b}.banner.gold{color:#ffd23f}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-30%) scale(.9)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}
.float{position:absolute;transform:translate(-50%,0);font:800 18px var(--title);color:#fff;text-shadow:0 2px 6px #000;animation:floatUp 1.5s forwards;white-space:nowrap}
@keyframes floatUp{to{transform:translate(-50%,-60px);opacity:0}}
.flash{position:absolute;inset:0;animation:flash .6s forwards;opacity:.0}
@keyframes flash{15%{opacity:.6}100%{opacity:0}}
.claw{position:absolute;left:50%;top:40%;width:min(60vw,320px);aspect-ratio:1;transform:translate(-50%,-50%)}
.claw.small{width:120px;transform:none}
.claw path{fill:none;stroke:#e5383b;stroke-width:10;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:scratch .35s forwards,fadeO 1.4s forwards;filter:drop-shadow(0 0 6px #ff0000aa)}
.claw path:nth-child(2){animation-delay:.08s,0s}.claw path:nth-child(3){animation-delay:.16s,0s}
@keyframes scratch{to{stroke-dashoffset:0}}
@keyframes fadeO{70%{opacity:1}100%{opacity:0}}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--x),105vh) rotate(var(--r))}}
.announce{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,440px);background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:16px;text-align:center;box-shadow:0 20px 50px -10px #000c;animation:annIn .5s,annOut .5s var(--hold,4s) forwards;pointer-events:auto}
.announce h3{font-size:26px}.announce .an-sub{color:var(--muted);font-weight:600;font-size:14px}
.announce .tombs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.tomb{width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;animation:rise .6s backwards}
.tomb .stone{width:66px;height:74px;border-radius:33px 33px 6px 6px;background:linear-gradient(#9aa1b3,#646b80);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:inset 0 -6px 0 #0003;position:relative}
.tomb .stone::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-6px;height:10px;border-radius:50%;background:#3d5a2b}
.tomb b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tomb small{font-size:11px;color:var(--muted)}
@keyframes rise{0%{transform:translateY(30px);opacity:0}}
@keyframes annIn{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}}
@keyframes annOut{to{opacity:0;transform:translate(-50%,-60%);visibility:hidden}}
.pop{animation:popA .5s}@keyframes popA{40%{transform:scale(1.12)}}
.shake{animation:shakeA .45s}@keyframes shakeA{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ít chuyển động */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .cloud,.fog,.fireflies i,.stars i,.b-leaf,.lantern,.fl{animation:none!important}
  .announce{animation:none!important}
}
/* rà soát: mô tả vai trong sảnh không bị cắt, chữ "Giữ để xem vai" dễ đọc hơn */
.rrow .rn small{white-space:normal;font-size:12px;line-height:1.25}
.mycard .mc-txt{font-size:12px}
/* điện thoại xoay ngang: chat sang phải, chừa chỗ cho ghế ngồi (trước đây ghế bị ép còn ~10px) */
@media (orientation:landscape) and (max-height:560px) and (max-width:899px){
  .gwrap{flex-direction:row}
  .dock{width:min(330px,40vw);height:auto!important;min-height:0;border-top:0;border-left:1px solid var(--line)}
  #btn-dock{display:none}
  .topbar{padding:3px 8px}
  .narr{margin:4px 6px 0;min-height:30px;padding:4px 8px;font-size:13px}
  .seats-wrap{padding:6px}
  .seats{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:5px}
  .seat{min-height:62px;padding:4px 3px}.seat .av{width:32px;height:32px;font-size:14px}
  .act{min-height:0;padding:4px 6px}.mycard{width:64px}
}

/* ===== nâng cấp v3 ===== */
/* sảnh: tên dài không cắt mất 👑 / (bạn) */
.plist li .pn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.plist li .tg{flex:none;display:flex;align-items:center;gap:3px;white-space:nowrap;font-weight:700}
.plist li .tg small{font-size:12px;color:var(--muted)}
/* bộ vai đã lưu */
.presets{display:flex;flex-direction:column;gap:6px;background:var(--chip);border-radius:14px;padding:8px}
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ps-head b{font-size:14px}
.ps-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.ps{display:flex;align-items:stretch;background:var(--panel2);border:1px solid var(--line);border-radius:12px;min-width:0}
.ps-use{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:6px 10px;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.ps-use b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-use small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps .x{border:0;background:transparent;width:40px;flex:none;color:var(--muted);border-left:1px solid var(--line)}
.ps-empty{font-size:12.5px;color:var(--muted)}
/* Kẻ Trộm chọn lá */
.thief-pick{display:flex;gap:12px;justify-content:center;margin:8px 0}
.thief-pick .tp{flex:0 1 150px;min-width:0;border:2px solid var(--line);background:var(--chip);border-radius:16px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:14px;transition:transform .15s}
.thief-pick .tp:hover,.thief-pick .tp:focus-visible{transform:translateY(-3px);border-color:var(--gold)}
.thief-pick .tp svg{width:100%;display:block}
/* đồng hồ dừng */
.ntime:not(:empty){min-width:40px}
/* 🎓 bong bóng ván tập */
.coach{position:fixed;z-index:55;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100vw - 20px));max-height:46vh;overflow-y:auto;background:var(--panel2);color:var(--ink);border:2px solid var(--gold);border-radius:18px;padding:10px 12px;box-shadow:0 18px 40px -10px #000c,0 0 0 4px #f2c84b33;animation:coachIn .35s}
@keyframes coachIn{0%{opacity:0;transform:translate(-50%,20px)}}
.co-h{display:flex;align-items:center;gap:6px;font:800 17px/1.2 var(--title)}
.co-h .co-ic{font-size:20px}.co-h b{flex:1;min-width:0}
.co-p{flex:none;font:700 11px var(--font);color:var(--muted);background:var(--chip);border-radius:999px;padding:2px 8px}
.co-t{font-size:14px;line-height:1.4;margin:6px 0 8px}
.co-t b{color:var(--gold)}.th-day .co-t b,.th-dawn .co-t b{color:#b8541f}
.co-b{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.co-b .btn{min-height:40px;font-size:13.5px;padding:6px 12px}
@media (min-width:900px),(orientation:landscape) and (max-height:560px){.coach{left:auto;right:12px;top:62px;bottom:auto;transform:none;width:min(380px,40vw);max-height:calc(100vh - 80px)}
  @keyframes coachIn{0%{opacity:0;transform:translateY(-14px)}}}
.coach-hl{position:relative;z-index:4;box-shadow:0 0 0 3px var(--gold),0 0 24px #f2c84baa!important;animation:hlPulse 1.4s infinite;border-radius:14px}
@keyframes hlPulse{50%{box-shadow:0 0 0 5px #f2c84b88,0 0 30px #f2c84b66}}
.tut-end{background:#2fbf7122;border:1px solid #2fbf7155;border-radius:12px;padding:8px 10px;font-size:13.5px}
/* 🎞️ xem lại cả ván */
.modal-box.replay{display:flex;flex-direction:column;gap:6px;max-height:calc(100dvh - 24px)}
.rp-nav{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;flex:none;scroll-snap-type:x proximity}
.rp-nav::-webkit-scrollbar{display:none}
.rp-nav .chip{flex:none;scroll-snap-align:center;min-height:36px}
.rp-share{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;background:var(--chip);border-radius:10px;padding:6px 10px;min-height:40px}
.rp-share input{width:20px;height:20px;accent-color:#ff8a3d;flex:none}
.rp-follow{font-size:13px;font-weight:700;color:var(--muted);text-align:center;display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.rp-follow:empty{display:none}
.rp-body{flex:1 1 auto;min-height:120px;overflow-y:auto;background:var(--chip);border-radius:14px;padding:8px 10px;overscroll-behavior:contain;touch-action:pan-y}
.rp-body h3{font-size:21px;margin:0 0 6px;text-align:center}
.rp-body h4{font-size:15px;margin:8px 0 4px;color:var(--gold)}.th-day .rp-body h4{color:#b8541f}
.rp-roles{list-style:none;display:flex;flex-wrap:wrap;gap:5px}
.rp-roles li{display:flex;align-items:center;gap:4px;font-size:13px}
.rp-note{font-size:13px;margin-top:8px}
.rp-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.rp-list li{display:flex;gap:8px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:7px 9px;font-size:14px;line-height:1.55}
.rp-list li .ri{font-size:18px;flex:none;width:22px;text-align:center;line-height:1.4}
.rp-list li .rt{flex:1;min-width:0}
.rp-list li small{color:var(--muted);font-size:12.5px}
.rp-list li.dim{opacity:.7}
.rp-list li.bad{border-color:#e5383b66}.rp-list li.death{background:#e5383b1f;border-color:#e5383b55}
.rp-list li.good{border-color:#2fbf7166;background:#2fbf711a}
.rp-list li.win{border-color:var(--gold);background:#f2c84b22}
.rp{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:0 8px 0 3px;font-weight:800;font-size:13px;line-height:22px;background:color-mix(in srgb,var(--c) 32%,transparent);border:1px solid color-mix(in srgb,var(--c) 70%,transparent);white-space:nowrap;vertical-align:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rp i{font-style:normal;font-size:13px}
.rc{display:inline-flex;align-items:center;gap:3px;border-radius:6px;padding:0 6px;font-weight:700;font-size:12.5px;line-height:20px;background:color-mix(in srgb,var(--c) 26%,transparent);border:1px dashed var(--c);white-space:nowrap}
.r-wolf{color:#ff6b6b}.r-ok{color:#46d38a}.th-day .r-wolf{color:#c81d25}.th-day .r-ok{color:#1f9e5a}
.vgrid{display:flex;flex-direction:column;gap:4px;margin:4px 0}
.vrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:3px 4px;border-radius:8px}
.vrow.hang{background:#e5383b26}
.vrow .vt{display:inline-flex;align-items:center;gap:4px}
.vrow .vn{font:800 14px var(--title);background:var(--wolf);color:#fff;border-radius:999px;min-width:22px;text-align:center;line-height:20px;padding:0 5px}
.vrow .vby{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center;font-size:13px;color:var(--muted)}
.vres{font-weight:700;font-size:13.5px}
.rp-foot{display:flex;align-items:center;gap:8px;flex:none}
.rp-foot .btn{flex:1;min-height:44px}
.rp-foot b{font:800 15px var(--title);min-width:46px;text-align:center}
.modal-box.replay .btns{margin-top:2px}
.pz{display:inline-block;width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor;vertical-align:-1px}
.ntime .pz{margin:0 2px}
.plist li.me{grid-column:1/-1}
.seat.dead.can{opacity:1;filter:none}.seat.dead.can .av{background:#7a5a9a!important}
@media (max-height:700px) and (max-width:899px){.coach{max-height:31vh;padding:8px 10px}.co-t{font-size:13px;margin:4px 0 6px}.co-h{font-size:15.5px}}
.rp-head{display:flex;align-items:center;gap:8px}
.rp-head h2{flex:1;margin:0!important}
.rp-head .chip.ico{flex:none}
@media (max-height:520px){
  .modal-box.replay{padding:10px 12px;gap:4px}
  .rp-head h2{font-size:19px!important}
  .rp-nav .chip{min-height:32px}
  .rp-share{min-height:32px;padding:3px 8px}
  .rp-body{min-height:90px}.rp-body h3{font-size:17px;margin-bottom:3px}
  .rp-foot .btn{min-height:40px}
  .thief-pick .tp{flex-basis:112px}.thief-pick .tp svg{max-height:40vh;width:auto;margin:0 auto}
  .modal-box h2{font-size:20px;margin-bottom:4px}
}

/* nút thả emoji: góc dưới phải khu ghế, ghế cuối được chừa chỗ khi cuộn */
.react-slot{position:relative;height:0;flex:none;z-index:6}
.seats-wrap.has-react:not(.ring){padding-bottom:58px}

/* gợi ý bộ vai theo số người + kiểu chơi */
.suggest{margin:8px 0}.suggest .sg-t{display:block;font-size:14px;margin-bottom:6px}
.sg-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sg-list button{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--chip);border:1.5px solid var(--line);border-radius:14px;padding:8px;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.sg-list button b{font-size:14px}.sg-list button small{color:var(--muted);font-size:11.5px;line-height:1.25}.sg-list button i{font-style:normal;font-size:13px;line-height:1.3;word-break:break-all}
.sg-list button[aria-pressed=true]{background:var(--chipOn);border-color:#f2c84b}.sg-list button:disabled{cursor:default}
@media(max-width:520px){.sg-list{grid-template-columns:1fr}}
.opt.style{flex-direction:column;align-items:stretch;gap:8px}.opt.style .seg2 button{flex:1}.seg2{display:flex;gap:6px;flex:none}.seg2 button{background:var(--chip);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--ink);font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.seg2 button[aria-pressed=true]{background:var(--chipOn);border-color:#f2c84b}.seg2 button:disabled{cursor:default}