/* THÂM CUNG BẮT BÀI — Premium 3D Chibi Imperial Fantasy UI */
:root{--gold:#f4c95d;--gold2:#ffe7a3;--gold3:#b9852b;--red:#b3121b;--ver:#e0341f;--amber:#ff9a2e;--bur:#4a0b12;--ink:#1a0606;--ink2:#2a0b0b;--txt:#fff4dc;--mu:#d9b98a;--jade:#4fb38a;--A:url(/fans/tcbb/assets/ui/);--r:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--ink)}
html,body{margin:0;min-height:100%;color:var(--txt);font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:15px}
body{overflow-x:hidden;background:transparent}
#bg{position:fixed;inset:0;z-index:-2;background:#140404 var(--a-lobby-background, url(/fans/tcbb/assets/ui/lobby-background.webp)) center/cover no-repeat;transition:background-image .4s}
#bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,4,4,.15),rgba(12,2,2,.78) 75%)}
body.g #bg{background-image:var(--a-main-game-background-dark, url(/fans/tcbb/assets/ui/main-game-background-dark.webp))}
body.lob #bg{background-image:var(--a-matchmaking-screen-background, url(/fans/tcbb/assets/ui/matchmaking-screen-background.webp))}
body.res #bg{background-image:var(--a-result-screen-background, url(/fans/tcbb/assets/ui/result-screen-background.webp))}
@media (max-width:760px){body.g #bg{background-image:var(--a-mobile-background, url(/fans/tcbb/assets/ui/mobile-background.webp))}}
a{color:var(--gold2)}
h1,h2,h3{font-family:'Noto Serif',serif;margin:.2em 0;color:var(--gold2);text-shadow:0 2px 0 #4a0b12,0 0 18px rgba(244,201,93,.35)}
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.boot img{width:140px;animation:spin 8s linear infinite}.boot b{font-family:'Noto Serif',serif;font-size:26px;color:var(--gold2)}
@keyframes spin{to{transform:rotate(360deg)}}
.wrap{max-width:1180px;margin:0 auto;padding:12px 14px 40px}
.top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(180deg,rgba(40,6,8,.92),rgba(40,6,8,.6));border-bottom:1px solid rgba(244,201,93,.35);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)}
.top .logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:'Noto Serif',serif;font-weight:900;color:var(--gold2);letter-spacing:.5px;white-space:nowrap}
.top .logo img{width:30px;height:30px}
.sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(244,201,93,.35);color:var(--txt);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.chip img{width:20px;height:20px;border-radius:50%;object-fit:cover}
/* buttons dùng asset BUTTON STYLE / SECONDARY / DANGER, label render bằng HTML */
.btn{--bi:var(--a-button-style, url(/fans/tcbb/assets/ui/button-style.webp));position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 26px;border:0;background:var(--bi) center/100% 100% no-repeat;color:#fff6dc;font:800 15px 'Be Vietnam Pro';text-shadow:0 1px 2px #3a0000;cursor:pointer;text-decoration:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));transition:transform .12s,filter .12s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);filter:drop-shadow(0 6px 12px rgba(255,170,60,.35)) brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn.sec{--bi:var(--a-secondary-button, url(/fans/tcbb/assets/ui/secondary-button.webp))}
.btn.dan{--bi:var(--a-danger-button, url(/fans/tcbb/assets/ui/danger-button.webp))}
.btn.sm{min-height:36px;padding:6px 18px;font-size:13px}
.btn.lg{min-height:60px;padding:14px 40px;font-size:18px}
.btn[disabled]{filter:grayscale(.85) brightness(.7);cursor:not-allowed;transform:none}
.btn.plain{background:rgba(0,0,0,.35);border:1px solid rgba(244,201,93,.45);border-radius:12px;filter:none}
.panel{position:relative;background:linear-gradient(180deg,rgba(74,11,18,.88),rgba(36,6,8,.92));border:1px solid rgba(244,201,93,.5);border-radius:var(--r);padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 3px rgba(80,10,14,.6),inset 0 0 30px rgba(244,201,93,.08)}
.panel.orn::before,.panel.orn::after{content:"";position:absolute;width:64px;height:64px;background:var(--a-corner-ornaments, url(/fans/tcbb/assets/ui/corner-ornaments.webp)) 0 0/200% 200% no-repeat;pointer-events:none}
.panel.orn::before{top:-8px;left:-8px}.panel.orn::after{bottom:-8px;right:-8px;background-position:100% 100%}
.mu{color:var(--mu)}.small{font-size:12px}.center{text-align:center}.mb{margin-bottom:14px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.hero{position:relative;text-align:center;padding:26px 10px 10px}
.hero .embw{position:relative;width:170px;height:170px;margin:0 auto}.hero .embw .cr{position:absolute;left:24%;top:26%;width:52%;filter:drop-shadow(0 4px 10px #000)}
.hero .emb{width:170px;filter:drop-shadow(0 0 30px rgba(255,180,60,.5));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.hero h1{font-size:clamp(34px,7vw,64px);line-height:1.05;letter-spacing:1px;background:linear-gradient(180deg,#fff3c4,#f4c95d 45%,#b9852b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #5a0b10) drop-shadow(0 0 22px rgba(255,170,60,.45))}
.hero .orn{width:min(560px,90%);display:block;margin:2px auto}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.step{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.28);border-radius:12px;padding:10px;border:1px solid rgba(244,201,93,.2)}
.step b.n{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(#f4c95d,#a8701f);color:#4a0b12;font-weight:900}
.mode{position:relative;overflow:hidden;cursor:pointer;transition:transform .15s}.mode:hover{transform:translateY(-3px)}
.mode .k{font:900 28px 'Noto Serif';color:var(--gold)}.mode .soon{position:absolute;top:10px;right:-30px;transform:rotate(35deg);background:var(--ver);padding:3px 34px;font-size:11px;font-weight:800}
.mode.off{opacity:.6;cursor:default}
.list .it{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px dashed rgba(244,201,93,.18)}
.list .it:last-child{border:0}
.av{width:36px;height:36px;border-radius:50%;background:#3a0a0e center/cover;border:2px solid var(--gold3);flex:0 0 auto;display:grid;place-items:center;font-weight:800;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.tag{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(244,201,93,.15);border:1px solid rgba(244,201,93,.4);color:var(--gold2);white-space:nowrap}
.tag.red{background:rgba(224,52,31,.2);border-color:#e0341f;color:#ffb39f}.tag.green{background:rgba(79,179,138,.2);border-color:var(--jade);color:#b6f3d7}
input,select{font:inherit;color:var(--txt);background:rgba(0,0,0,.4);border:1px solid rgba(244,201,93,.45);border-radius:10px;padding:10px 12px;width:100%}
label.f{display:block;margin-bottom:12px}label.f>span{display:block;font-size:13px;color:var(--mu);margin-bottom:5px;font-weight:600}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;min-width:64px;padding:9px 10px;border-radius:10px;border:1px solid rgba(244,201,93,.4);background:rgba(0,0,0,.35);color:var(--txt);font:700 14px inherit;cursor:pointer}
.seg button.on{background:linear-gradient(180deg,#e0341f,#8a0d14);border-color:var(--gold);color:#fff;box-shadow:0 0 12px rgba(244,201,93,.4)}
.seg button[disabled]{opacity:.4}
.sw{display:flex;align-items:center;gap:10px;cursor:pointer;margin:8px 0}.sw input{width:20px;height:20px;accent-color:#e0341f}
/* ===== Cards ===== */
.cardx{position:relative;width:var(--w,120px);aspect-ratio:5/7;border-radius:calc(var(--w,120px)*.07);overflow:hidden;background:#2a0808;box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 0 2px #c99a3c,0 0 0 4px #5a0b10;flex:0 0 auto;transition:transform .18s,box-shadow .18s;cursor:pointer;user-select:none}
.cardx img.art{width:100%;height:100%;object-fit:cover;display:block}
.cardx .cv{position:absolute;top:5%;left:6%;min-width:24%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff1b8,#f4c95d 40%,#9a6514);color:#5a0b10;font:900 calc(var(--w,120px)*.15)/1 'Noto Serif';box-shadow:0 2px 6px rgba(0,0,0,.6);border:2px solid #fff3c4}
.cardx .cn{position:absolute;left:0;right:0;bottom:0;padding:16% 4% 5%;text-align:center;font:900 calc(var(--w,120px)*.11)/1.1 'Noto Serif';color:#fff3c4;text-shadow:0 2px 3px #000;background:linear-gradient(transparent,rgba(40,4,6,.92) 55%)}
.cardx .cn small{display:block;font:600 calc(var(--w,120px)*.065)/1.2 'Be Vietnam Pro';color:var(--mu);margin-top:2px}
.cardx.back{background:radial-gradient(circle at 50% 45%,#7a121b,#3a0609 70%);box-shadow:0 4px 10px rgba(0,0,0,.6),0 0 0 2px #c99a3c,0 0 0 4px #4a0b12}
.cardx.back::before{content:"";position:absolute;inset:7%;border:2px solid rgba(244,201,93,.7);border-radius:8%;background:var(--a-emblem, url(/fans/tcbb/assets/ui/emblem.webp)) center/78% no-repeat}
.cardx.back::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,215,120,.06) 0 6px,transparent 6px 12px)}
.cardx.dim{filter:grayscale(.7) brightness(.55);cursor:not-allowed}
.cardx.sel{transform:translateY(-16px) scale(1.04);box-shadow:0 14px 30px rgba(255,170,60,.45),0 0 0 3px #ffe7a3,0 0 0 6px #e0341f}
.cardx.sel::after{content:"";position:absolute;inset:-12%;background:var(--a-card-selected-fx, url(/fans/tcbb/assets/ui/card-selected-fx.webp)) center/100% 100% no-repeat;pointer-events:none;animation:pulse 1.4s infinite}
.cardx.mini{--w:30px;border-radius:3px;box-shadow:0 0 0 1px #c99a3c}.cardx.mini .cv{font-size:10px;min-width:44%;top:3%;left:3%;border-width:1px}.cardx.mini .cn{display:none}
@keyframes pulse{50%{opacity:.55;transform:scale(1.04)}}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cards-grid .cw{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
/* ===== Lobby ===== */
.code{font:900 34px 'Noto Serif';letter-spacing:6px;color:var(--gold2);text-shadow:0 0 18px rgba(244,201,93,.5)}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.seat{position:relative;text-align:center;padding:12px 8px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(244,201,93,.25)}
.seat.empty{opacity:.45;border-style:dashed}
.seat .x{position:absolute;top:4px;right:6px;background:none;border:0;color:#ffb39f;font-size:16px;cursor:pointer}
/* ===== Avatar pod with frames ===== */
.pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:118px;text-align:center;transition:transform .2s,opacity .2s}
.ring{position:relative;width:var(--rw,78px);aspect-ratio:1}
.ring .face{position:absolute;inset:19%;border-radius:50%;overflow:hidden;background:#3a0a0e;display:grid;place-items:center;font:900 22px 'Noto Serif';color:var(--gold2)}
.ring .face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ring .frm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ring .ufrm{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none;opacity:.0}
.ring .turnfx{position:absolute;inset:-14%;width:128%;height:128%;pointer-events:none;animation:spin 6s linear infinite}
.ring .prot{position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none;animation:pulse 2s infinite}
.ring .tgt{position:absolute;inset:-16%;width:132%;height:132%;pointer-events:none;animation:spin 3s linear infinite;display:none}
.pod.targetable{cursor:pointer}.pod.targetable .tgt{display:block}.pod.targetable:hover{transform:scale(1.06)}
.pod.picked .tgt{display:block;filter:hue-rotate(-20deg) saturate(2) brightness(1.3)}
.pod.picked .ring::after{content:"🎯";position:absolute;right:-6px;top:-6px;font-size:20px}
.pod.dead{opacity:.62}.pod.dead .face{filter:grayscale(1) brightness(.6)}
.pod.dead .seal{position:absolute;inset:8%;width:84%;opacity:.9;pointer-events:none}
.pod .nm{font-weight:800;font-size:12.5px;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000}
.pod.turn .nm{color:var(--gold2)}
.hearts{display:flex;gap:1px;justify-content:center;min-height:16px}.hearts img{width:16px;height:16px}.hearts img.off{filter:grayscale(1) brightness(.4);opacity:.6}
.badges{display:flex;gap:3px;justify-content:center;font-size:12px;min-height:16px}
.disc{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;max-width:118px;min-height:14px;cursor:pointer}
.disc .cardx.mini{--w:20px}
.handbk{position:absolute;right:2px;bottom:16px;display:flex}.handbk .cardx{--w:18px;margin-left:-8px;box-shadow:0 0 0 1px #c99a3c}.handbk .cardx.back::before{inset:4%}
.offl{position:absolute;left:0;top:0;font-size:11px;background:#555;border-radius:99px;padding:1px 5px}
/* ===== Game layout ===== */
.game{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:calc(100vh - 54px);min-height:calc(100dvh - 54px)}
.ghead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px;background:var(--a-top-screen-ornament, url(/fans/tcbb/assets/ui/top-screen-ornament.webp)) center top/min(900px,100%) auto no-repeat}
.stat{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:rgba(20,2,2,.65);border:1px solid rgba(244,201,93,.4);font-weight:800;font-size:13px}
.stat img{width:20px;height:20px;object-fit:contain}
.timer{position:relative}.timer.low{color:#ff8a7a;animation:pulse .7s infinite}
.arena{position:relative;width:100%;max-width:1180px;margin:0 auto;height:min(58vh,560px)}
.tablebg{position:absolute;left:50%;top:50%;width:min(62%,700px);aspect-ratio:1672/941;transform:translate(-50%,-50%);background:var(--a-game-table, url(/fans/tcbb/assets/ui/game-table.webp)) center/contain no-repeat;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.tcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);display:flex;align-items:flex-end;gap:16px;z-index:2}
.deckw{position:relative;display:flex;flex-direction:column;align-items:center}
.deckw .plat{position:absolute;bottom:-28px;width:150px;left:50%;transform:translateX(-50%);z-index:-1;opacity:.95}
.stack{position:relative;--w:76px;width:76px;aspect-ratio:5/7}
.stack .cardx{position:absolute;inset:0}
.stack .cardx:nth-child(2){transform:translate(-3px,-3px)}.stack .cardx:nth-child(3){transform:translate(-6px,-6px)}
.cnt{margin-top:6px;font-weight:900;font-size:13px;background:rgba(0,0,0,.6);padding:2px 10px;border-radius:99px;border:1px solid var(--gold3)}
.lastp{display:flex;flex-direction:column;align-items:center;gap:4px}
.faceup{display:flex;gap:4px}
.seatpos{position:absolute;transform:translate(-50%,-50%);z-index:3}
.mezone{position:relative;z-index:5;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(26,4,4,.95),rgba(26,4,4,.75) 70%,transparent);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end;max-width:1180px;width:100%;margin:0 auto}
.mehand{display:flex;gap:14px;align-items:flex-end;padding-top:20px}
.mehand .cardx{--w:140px}
.wiz{min-height:150px}
.wiz .stp{font:800 12px 'Be Vietnam Pro';color:var(--amber);letter-spacing:.5px;text-transform:uppercase}
.wiz .ttl{font:900 18px 'Noto Serif';color:var(--gold2);margin:2px 0 6px}
.vals{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.vals button{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold3);background:radial-gradient(circle at 35% 30%,#7a121b,#3a0609);color:var(--gold2);font:900 18px 'Noto Serif';cursor:pointer;transition:transform .12s}
.vals button:hover{transform:scale(1.08)}.vals button.on{background:radial-gradient(circle at 35% 30%,#fff1b8,#f4c95d 40%,#9a6514);color:#5a0b10;border-color:#fff}
.vals button small{display:block;font:600 8px 'Be Vietnam Pro';margin-top:-3px}
.warn{background:rgba(224,52,31,.18);border:1px solid #e0341f;border-radius:10px;padding:8px 10px;font-size:13px;margin:6px 0}
.note{background:rgba(244,201,93,.1);border:1px solid rgba(244,201,93,.35);border-radius:10px;padding:8px 10px;font-size:13px;margin:6px 0}
.side{position:fixed;right:0;top:54px;bottom:0;width:min(360px,92vw);z-index:40;transform:translateX(105%);transition:transform .25s;display:flex;flex-direction:column}
.side.on{transform:none}
.side .panel{flex:1;border-radius:16px 0 0 16px;overflow:auto}
.log .e{padding:6px 4px;border-bottom:1px dashed rgba(244,201,93,.15);font-size:13px;line-height:1.45}
.log .e.priv{background:rgba(79,179,138,.12);border-left:3px solid var(--jade);padding-left:8px}
.log .e.big{color:var(--gold2)}
.memo{max-height:110px;overflow:auto;font-size:12.5px}
.memo div{padding:3px 0;border-bottom:1px dashed rgba(79,179,138,.25)}
/* ===== FX layer (không chặn input) ===== */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;display:grid;place-items:center}
#fx .f{position:absolute;display:flex;flex-direction:column;align-items:center;animation:fxin 1.9s ease forwards}
#fx .f img{width:min(38vw,260px)}
#fx .f.wide img{width:min(80vw,640px)}
#fx .f b{margin-top:-14px;font:900 clamp(22px,4vw,38px) 'Noto Serif';color:var(--gold2);text-shadow:0 3px 0 #5a0b10,0 0 20px rgba(255,170,60,.7);text-align:center}
#fx .banner{position:relative;display:grid;place-items:center}
#fx .banner b{position:absolute;margin:0;font-size:clamp(20px,3.6vw,34px)}
@keyframes fxin{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.05)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
/* ===== Modal ===== */
#modal{position:fixed;inset:0;z-index:70;display:none;place-items:center;background:rgba(10,0,0,.7);padding:16px}
#modal.on{display:grid}
#modal .box{position:relative;width:min(560px,100%);max-height:88vh;overflow:auto;padding:30px 26px 22px;background:var(--a-panel-popup, url(/fans/tcbb/assets/ui/panel-popup.webp)) center/100% 100% no-repeat;filter:drop-shadow(0 20px 40px #000)}
#modal .box.wide{width:min(900px,100%)}
#modal .box.plainbox{background:linear-gradient(180deg,#4a0b12,#240608);border:2px solid var(--gold3);border-radius:18px}
#modal .cls{position:absolute;top:10px;right:14px;background:rgba(0,0,0,.5);border:1px solid var(--gold3);color:var(--gold2);border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:16px}
.confirm{background:var(--a-confirmation-panel, url(/fans/tcbb/assets/ui/confirmation-panel.webp)) center/100% 100% no-repeat !important;padding:44px 44px 34px !important}
/* round / result */
.rres .who{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:10px 0}
.standing{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px dashed rgba(244,201,93,.2)}
.standing .pl{font:900 20px 'Noto Serif';width:30px;color:var(--gold)}
.crown{width:min(240px,60vw);display:block;margin:0 auto -20px;animation:float 3s ease-in-out infinite}
.defeat{width:min(520px,90vw);display:block;margin:0 auto}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(520px,92vw)}
#toast div{background:linear-gradient(180deg,#5a0b10,#2a0608);border:1px solid var(--gold3);padding:10px 16px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.5);animation:fxin 3.4s forwards;font-size:14px;text-align:center}
#toast div.err{border-color:#ff6b5b;background:linear-gradient(180deg,#7a1010,#3a0606)}
#toast div.priv{border-color:var(--jade);background:linear-gradient(180deg,#0f3a2a,#06180f)}
.conn{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:grid;place-items:center;font-weight:800}
table.t{width:100%;border-collapse:collapse;font-size:13px}table.t td,table.t th{padding:6px;border-bottom:1px solid rgba(244,201,93,.15);text-align:left}table.t th{color:var(--gold)}
table.t input{padding:5px 6px;width:64px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rules p,.rules li{line-height:1.6}
/* ===== Mobile layout riêng ===== */
@media (max-width:760px){
 .top .logo span{display:none}
 .arena{height:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 6px}
 .opps{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 2px;width:100%;order:-1}
 .seatpos{position:static;transform:none}
 .pod{width:82px}.ring{--rw:58px}.pod .nm{font-size:11px;max-width:82px}.hearts img{width:12px;height:12px}.disc{max-width:82px}.disc .cardx.mini{--w:14px}
 .tablebg{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:420px;margin-top:-10px}
 .tcenter{transform:translate(-50%,-62%)}
 .stack,.stack .cardx{--w:54px;width:54px}.deckw .plat{width:104px;bottom:-20px}
 .lastp .cardx{--w:54px !important}
 .mezone{grid-template-columns:1fr;gap:6px;position:sticky;bottom:0}
 .mehand{justify-content:center;padding-top:10px}.mehand .cardx{--w:118px}
 .mepod{display:none}
 .wiz{min-height:0}
 .ghead{gap:5px}.stat{padding:4px 8px;font-size:12px}
}
@media (min-width:761px){.opps{display:contents}}

/* ================= FIX v2 (spec FIX CƠ CHẾ + UI/UX) ================= */
html,body{touch-action:pan-x pan-y}
.game,.arena,.mezone{touch-action:manipulation}
/* Button: giữ đúng tỷ lệ asset, label HTML căn giữa, không icon */
.btn{width:min(var(--bw,210px),92vw);aspect-ratio:3/1;min-height:0;height:auto;padding:0 14%;background-size:100% 100%;font:800 clamp(11px,calc(min(var(--bw,210px),92vw)*.074),17px)/1.12 'Be Vietnam Pro';text-align:center;white-space:normal;text-wrap:balance;overflow:hidden;vertical-align:middle;flex:0 0 auto}
.btn.sec{aspect-ratio:8/3}
.btn.dan{aspect-ratio:5/2}
.btn.sm{--bw:150px;min-height:0;padding:0 14%}
.btn.lg{--bw:250px;min-height:0;padding:0 14%}
.btn.xl{--bw:310px}
.btn.plain{width:auto;aspect-ratio:auto;padding:8px 14px}
table.t .btn{--bw:110px}
.cta{gap:14px;align-items:center}
@media (max-width:760px){.btn.lg{--bw:200px}.btn{--bw:180px}.btn.sm{--bw:130px}.cta .btn{--bw:min(200px,44vw)}}
/* Home: title asset + subtitle trong frame */
.title-asset{display:block;margin:-6px auto 0;width:min(620px,92vw)}
.title-asset img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.subtitle{display:inline-block;margin:6px auto 4px;padding:10px 22px;border-radius:14px;background:linear-gradient(180deg,rgba(74,11,18,.82),rgba(36,6,8,.86));border:1px solid rgba(244,201,93,.55);box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 0 0 2px rgba(80,10,14,.55);color:var(--txt);font-weight:600;font-size:14px}
/* Popup: không kéo méo artwork — panel CSS + ornament tỷ lệ tự nhiên */
#modal .box{background:linear-gradient(180deg,#5a0d15 0%,#3a0709 55%,#240608 100%);border:2px solid var(--gold3);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.7),inset 0 0 0 4px rgba(90,11,16,.7),inset 0 0 40px rgba(244,201,93,.08);padding:40px 26px 22px;filter:none}
#modal .box::before{content:"";position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:min(340px,70%);aspect-ratio:3/1;background:var(--a-bottom-ornament, url(/fans/tcbb/assets/ui/bottom-ornament.webp)) center/contain no-repeat;pointer-events:none}
#modal .box.plainbox{padding-top:40px}
.confirm{background:linear-gradient(180deg,#5a0d15,#2a0608) !important;padding:42px 28px 26px !important}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;justify-items:center;text-align:center;margin-top:8px}
.qm{display:flex;flex-direction:column;align-items:center;gap:4px}
.qm .btn{--bw:150px}
.dlg .seg button{line-height:1.2}
/* Lobby/pod: avatar + frame căn tâm tuyệt đối */
.pod{margin:0 auto}
.seat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.seat .pod,.seat .ring{margin-left:auto;margin-right:auto}
.ring{flex:0 0 auto}
.ring .face{inset:19%}
.ring .frm{inset:0;object-fit:contain}
.seat .x{z-index:3}
/* Header sạch */
.ghead{background:none !important;padding:8px 8px 2px}
.stat.sd{color:#ffb39f;border-color:#e0341f;animation:blink3 1.2s ease-in-out 3}
/* Turn bar: timer lớn gần khu vực đang hành động */
.turnbar{position:relative;z-index:6;display:flex;align-items:center;gap:14px;max-width:720px;width:calc(100% - 20px);margin:6px auto 0;padding:10px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(74,11,18,.92),rgba(30,4,6,.92));border:1px solid rgba(244,201,93,.6);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.tb-txt{flex:1;min-width:0}
.tb-who{font:900 18px/1.15 'Noto Serif',serif;color:var(--gold2);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sub{font:600 13px 'Be Vietnam Pro';color:var(--mu);min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sub b{color:var(--gold2)}
.tb-prog{height:6px;border-radius:99px;background:rgba(0,0,0,.45);margin-top:6px;overflow:hidden}
.tb-prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f4c95d,#ffe7a3);transition:width .2s linear}
.tb-time{font:900 52px/1 'Noto Serif',serif;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #4a0b12,0 0 16px rgba(244,201,93,.45);min-width:150px;text-align:right}
.turnbar.warn .tb-time{color:#ff8a4c}.turnbar.warn .tb-prog i{background:linear-gradient(90deg,#e0341f,#ff9a2e)}
.turnbar.crit .tb-time{color:#ff4b3a;animation:pulse .5s infinite}
.turnbar.rest{border-color:rgba(79,179,138,.6)}.turnbar.rest .tb-time{color:#b6f3d7}
.tb-card .cardx{cursor:default}
.pod.botpick .tgt{display:block}
.pod.botpick .ring::after{content:"";position:absolute;inset:-8%;border-radius:50%;box-shadow:0 0 0 3px #ff9a2e,0 0 22px #ff9a2e;animation:pulse 1s infinite}
@media (max-width:760px){.turnbar{gap:8px;padding:8px 10px}.tb-time{font-size:36px;min-width:104px}.tb-who{font-size:14px}.tb-sub{font-size:12px}.tb-card{display:none}}
/* Nhật ký gom theo ván */
.lg-round{border:1px solid rgba(244,201,93,.25);border-radius:12px;margin:8px 0;overflow:hidden;background:rgba(0,0,0,.18)}
.lg-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:linear-gradient(90deg,rgba(179,18,27,.55),rgba(74,11,18,.4));border:0;color:var(--txt);font:inherit;cursor:pointer;text-align:left}
.lg-head b{font:900 14px 'Noto Serif',serif;color:var(--gold2);letter-spacing:1px;white-space:nowrap}
.lg-head span{flex:1;font-size:12px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-head i{font-style:normal;font-weight:900;color:var(--gold)}
.lg-body{display:none;padding:2px 10px 8px}.lg-round.open .lg-body{display:block}
.log .e.important{border:1px solid rgba(244,201,93,.55);border-left:4px solid var(--gold);border-radius:8px;background:rgba(244,201,93,.09);box-shadow:0 0 10px rgba(244,201,93,.18);padding:6px 8px;margin:4px 0}
.log .e.k-eliminate{border-left-color:#e0341f;background:rgba(224,52,31,.12)}
.log .e.k-heart,.log .e.k-revive{border-left-color:#ff5d7a}
.log .e.k-match_win,.log .e.k-round_win{border-left-color:#ffe7a3;font-weight:700}
.log .e.k-timeout{border-left-color:#ff9a2e}
.log .e.fresh.important{animation:blink3 .9s ease-in-out 3}
.pv{font-size:10px;font-weight:800;background:var(--jade);color:#04170f;border-radius:99px;padding:1px 6px}
@keyframes blink3{50%{box-shadow:0 0 18px rgba(255,200,90,.85);background:rgba(244,201,93,.22)}}
/* Lật bài */
.reveal{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:6px 0 10px}
.rv{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(244,201,93,.2)}
.rv.win{border-color:var(--gold);box-shadow:0 0 16px rgba(244,201,93,.45)}
.rv-n{font-weight:800;font-size:14px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-v{font-size:13px;color:var(--mu)}.rv-v b{color:var(--gold2);font-size:16px}.bonus{color:#b6f3d7;font-weight:700}
/* FIX v2.1: padding theo kích thước button (không theo parent) */
.btn,.btn.sm,.btn.lg{padding:0 calc(min(var(--bw,210px),92vw)*.15)}
.btn.dan{padding:0 calc(min(var(--bw,210px),92vw)*.13)}
.btn{white-space:nowrap}
.btn.xl{white-space:normal}
#modal .box{padding-top:58px}
#modal .box::before{top:-30px}
.arena{height:min(50vh,500px)}
.mehand .cardx{--w:128px}
.wiz{min-height:120px}
@media (max-width:760px){.arena{height:auto}.mehand .cardx{--w:112px}}

/* ================= FIX V3 ================= */
/* Bàn: lá úp nhỏ bên trái chồng bài + "Còn X lá" bấm được */
.deckrow{display:flex;align-items:flex-end;gap:6px}
.hidbk .cardx{--w:30px;transform:rotate(-8deg);cursor:default}
.cntbtn{font:inherit;font-weight:900;font-size:13px;color:var(--txt);cursor:pointer;background:rgba(0,0,0,.6);border:1px solid var(--gold3);border-radius:99px;padding:2px 12px;margin-top:6px}
.cntbtn:hover{border-color:var(--gold2);color:var(--gold2)}
/* Turnbar: kích thước cố định, text tối đa 2 dòng, progress ngay dưới đồng hồ */
.turnbar{display:grid;grid-template-columns:minmax(0,1fr) 128px auto;align-items:center;gap:14px;height:92px;max-width:720px;width:calc(100% - 20px);box-sizing:border-box;overflow:hidden}
.tb-txt{min-width:0;align-self:center}
.tb-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.3;min-height:34px;max-height:34px}
.tb-clock{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:128px}
.tb-time{width:128px;min-width:0;text-align:center;font-size:46px}
.tb-clock .tb-prog{margin:0}
.turnbar.crit .tb-time{animation:pulse .5s infinite}.turnbar.warn:not(.crit) .tb-time{animation:pulse 1.2s infinite}
.tb-skip{font:800 12px 'Be Vietnam Pro';color:var(--txt);background:rgba(0,0,0,.45);border:1px solid var(--gold3);border-radius:10px;padding:8px 10px;cursor:pointer;white-space:nowrap}
.tb-skip:hover{border-color:var(--gold2)}
@media (max-width:760px){.turnbar{grid-template-columns:minmax(0,1fr) 96px auto;height:80px;gap:8px}.tb-clock,.tb-time{width:96px}.tb-time{font-size:34px}.tb-sub{font-size:12px;min-height:31px;max-height:31px}}
/* Announcement lớn (không chặn thao tác) */
#ann{position:fixed;left:50%;top:22%;transform:translate(-50%,-10px) scale(.96);z-index:65;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;width:min(680px,92vw);text-align:center}
#ann.on{opacity:1;transform:translate(-50%,0) scale(1)}
#ann .ann-big{display:inline-block;max-width:100%;padding:12px 26px;border-radius:16px;background:linear-gradient(180deg,rgba(90,13,21,.95),rgba(36,6,8,.95));border:1px solid var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 24px rgba(244,201,93,.25);font:900 clamp(18px,3.2vw,30px)/1.25 'Noto Serif',serif;color:var(--gold2);text-shadow:0 2px 0 #3a0000}
#ann .ann-sub{margin-top:6px;font:700 14px 'Be Vietnam Pro';color:var(--txt);text-shadow:0 1px 3px #000}
#ann.crit .ann-big{border-color:#ff6b5b;box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 30px rgba(224,52,31,.45)}
#ann.k-heart .ann-big,#ann.k-revive .ann-big{border-color:#ff8fa3}
#ann.k-round_win .ann-big,#ann.k-match_win .ann-big{border-color:#ffe7a3;box-shadow:0 0 36px rgba(255,231,163,.55)}
/* Badge trạng thái overlay góc phải trên avatar */
.badges{display:none}
.bdgs{position:absolute;top:-4px;right:-10px;display:flex;flex-direction:column;gap:1px;z-index:4;max-height:100%;flex-wrap:wrap-reverse;align-content:flex-end}
.bdg{position:relative;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(26,4,4,.88);border:1px solid var(--gold3);font-size:11px;line-height:1;cursor:help}
.bdg i{position:absolute;right:-4px;bottom:-4px;font:800 9px 'Be Vietnam Pro';background:#e0341f;color:#fff;border-radius:99px;padding:0 3px;font-style:normal}
@media (max-width:760px){.bdg{width:16px;height:16px;font-size:9px}.bdgs{right:-6px}}
.legend{display:grid;gap:8px}.lg-it{display:flex;gap:10px;align-items:flex-start;text-align:left}.bdg-i{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.4);border:1px solid var(--gold3)}
/* Avatar: frame và mặt chung tâm; bot căn như người */
.ring{display:block;aspect-ratio:1/1;width:var(--rw,78px);height:auto}
.ring .face{position:absolute;inset:19%;margin:0}
.ring .frm{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;margin:0}
/* Không viền vuông quanh asset tách nền */
.stat img,.chip img{box-shadow:none;border:0}
.hero .emb,.title-asset img,#fx .f img{box-shadow:none}
/* Kết quả cuối: artwork nằm trọn modal, nút 2×2 */
.result{overflow:hidden}
.res-art{display:flex;justify-content:center;max-width:100%;overflow:hidden}
.res-art img{max-width:min(100%,360px);height:auto;object-fit:contain;margin:0 auto}
.res-art .defeat{max-width:min(100%,460px)}
.res-art .crown{width:min(220px,55vw);margin:0 auto}
.res-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;justify-items:center;margin-top:14px}
.res-btns .btn{--bw:200px;width:min(200px,100%)}
@media (max-width:360px){.res-btns{grid-template-columns:1fr}}
#modal .box{overflow-x:hidden}
/* Mobile: không tràn ngang */
html,body{max-width:100%;overflow-x:hidden}
.side{max-width:100vw}
.side:not(.on){visibility:hidden}
@media (max-width:760px){.opps{max-width:100vw;overflow:hidden}}
/* Asset Manager */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.asset{padding:10px}
.ath{height:130px;display:grid;place-items:center;background:repeating-conic-gradient(#2a0b0b 0 25%,#3a1010 0 50%) 0 0/16px 16px;border-radius:10px;overflow:hidden}
.ath img{max-width:100%;max-height:100%;object-fit:contain}
.ak{margin:6px 0 2px;word-break:break-all}
.avers{margin-top:6px;border-top:1px dashed rgba(244,201,93,.25);padding-top:6px;display:grid;gap:4px}
.av-it{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}.av-it.on{color:var(--gold2)}.av-it i{font-style:normal;color:#b6f3d7;font-weight:700}
.av-it .btn.plain{padding:3px 8px;font-size:11px}
pre.cron{white-space:pre-wrap;word-break:break-all;background:rgba(0,0,0,.45);padding:10px;border-radius:10px;font-size:12px}
/* Nhúng trong AdminCP của Fans */
html.embed .top{display:none}
html.embed .wrap{padding-top:6px}

/* ================= UPGRADE v4: Player Grid + Live Action Feed + FX ================= */
.arena,.opps,.seatpos,.tablebg{display:none !important}
.gmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:12px;max-width:1240px;width:100%;margin:8px auto 0;padding:0 10px;box-sizing:border-box;align-items:start}
.gleft{min-width:0;display:flex;flex-direction:column;gap:10px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.pcard{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;align-items:center;width:auto;margin:0;padding:8px 8px 8px 6px;border-radius:14px;background:linear-gradient(180deg,rgba(74,11,18,.86),rgba(30,4,6,.88));border:1px solid rgba(244,201,93,.28);min-height:96px;box-sizing:border-box;text-align:left;transition:box-shadow .2s,border-color .2s}
.pcard .ring{--rw:58px;width:58px}
.pcard.turn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(244,201,93,.45),0 0 18px rgba(244,201,93,.35)}
.pcard.me{border-color:rgba(79,179,138,.7)}
.pcard.dead{opacity:.6;filter:saturate(.5)}
.pcard.targetable{cursor:pointer;box-shadow:0 0 0 2px #ff9a2e,0 0 16px rgba(255,154,46,.5)}
.pcard.picked{box-shadow:0 0 0 3px #ffe7a3,0 0 22px rgba(255,231,163,.7)}
.pcard.botpick{box-shadow:0 0 0 3px #ff9a2e,0 0 22px rgba(255,154,46,.7)}
.pcard.pod:hover{transform:none}
.pc-no{position:absolute;left:6px;top:4px;font:800 11px 'Baloo 2','Be Vietnam Pro';color:var(--gold);z-index:5;background:rgba(0,0,0,.55);border-radius:6px;padding:0 5px;line-height:16px}
.pc-bot{position:absolute;right:6px;top:4px;font:800 10px 'Be Vietnam Pro';color:#04170f;background:var(--jade);border-radius:6px;padding:0 5px;line-height:16px}
.pc-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.pc-name{font:800 14px/1.2 'Baloo 2','Be Vietnam Pro';color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;padding-right:26px}
.pc-name i{font-style:normal;color:#b6f3d7;font-weight:600;font-size:12px}
.pc-h{justify-content:flex-start}.pc-h img{width:14px;height:14px}
.pc-hn{font-size:10px;color:var(--mu)}
.pc-state{font:800 10.5px 'Be Vietnam Pro';letter-spacing:.3px;color:var(--mu);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-state.on{color:var(--gold2)}.pc-state.out{color:#ff8a7a}
.pc-row{display:flex;align-items:center;gap:6px;min-height:18px;overflow:hidden}
.pc-hand{display:flex}.pc-hand .cardx{--w:14px;margin-right:-5px;box-shadow:0 0 0 1px #c99a3c}.pc-hand .cardx.back::before{inset:4%}
.pcard .disc{display:flex;gap:2px;flex-wrap:nowrap;max-width:none;justify-content:flex-start;overflow:hidden}
.pcard .disc .cardx.mini{--w:16px}
.pcard .bdgs{right:-8px;top:-2px}
.gtable{display:flex;align-items:flex-end;justify-content:center;gap:22px;padding:12px;border-radius:16px;background:radial-gradient(ellipse at center,rgba(150,20,30,.55),rgba(40,6,8,.85));border:1px solid rgba(244,201,93,.35);min-height:150px}
.gt-deck,.gt-last,.gt-face{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.gt-deck .stack{--w:62px;width:62px}.gt-deck .stack .cardx{--w:62px}
.gt-deck .hidbk{position:absolute;left:-34px;bottom:30px}
.gfeed{position:sticky;top:60px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 230px);min-height:260px;padding:10px;border-radius:16px;background:linear-gradient(180deg,rgba(60,8,12,.92),rgba(24,4,6,.94));border:1px solid rgba(244,201,93,.5);overflow:hidden;box-sizing:border-box}
.fd-head{display:flex;align-items:center;gap:8px}.fd-head b{font:900 13px 'Noto Serif',serif;color:var(--gold2);letter-spacing:1px}.fd-head span{flex:1;font-size:12px;color:var(--mu)}
.fd-cur{flex:0 0 auto}
.fd-recent{display:flex;flex-direction:column;gap:6px}
.fd-hist{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0;border-top:1px dashed rgba(244,201,93,.25);padding-top:6px}
.ac{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(244,201,93,.22);overflow:hidden}
.ac.big{border-color:var(--gold);background:linear-gradient(180deg,rgba(120,18,26,.55),rgba(40,6,8,.6));box-shadow:0 0 14px rgba(244,201,93,.18)}
.ac.big .ac-actor{font:800 17px/1.2 'Baloo 2','Be Vietnam Pro';color:var(--gold2)}
.ac.big .ac-act{font:800 16px/1.25 'Baloo 2','Be Vietnam Pro';color:#fff}
.ac.sm{padding:6px 8px;gap:8px;opacity:.9}.ac.sm .ac-actor,.ac.sm .ac-act{font:700 12.5px/1.25 'Baloo 2','Be Vietnam Pro'}.ac.sm .ac-tg,.ac.sm .ac-res{font-size:11.5px}
.ac-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.ac-actor,.ac-act,.ac-tg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-tg{font-size:13px;color:var(--txt)}
.ac-res{font-size:13px;line-height:1.35;color:var(--txt);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ac.sm .ac-res{-webkit-line-clamp:2}
.ac-res .ok{color:#b6f3d7}.ac-res .bad{color:#ff9a8a}
.ac-hint{font-size:11.5px;color:var(--mu)}
.ac-img .cardx{cursor:pointer}
.ac.pend{border-style:dashed;animation:pulse 1.6s infinite}
.ac-sys{display:block;text-align:center;padding:8px}.ac-sys-t{font:800 13px/1.3 'Baloo 2','Be Vietnam Pro';color:var(--gold2);overflow-wrap:anywhere}
.ac-sys.big .ac-sys-t{font-size:16px}
.mewrap{min-width:0}
.mestate{font:900 14px 'Baloo 2','Be Vietnam Pro';letter-spacing:.5px;color:var(--mu);padding:6px 12px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(244,201,93,.25);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mestate.mine{color:#1a0606;background:linear-gradient(90deg,#f4c95d,#ffe7a3);border-color:#fff;box-shadow:0 0 18px rgba(244,201,93,.5)}
.mezone{grid-template-columns:1fr}
/* Timer nhỏ gọn */
.turnbar{height:64px;grid-template-columns:minmax(0,1fr) 96px auto;padding:6px 14px;max-width:1220px}
.tb-who{font-size:15px}.tb-sub{font-size:12px;min-height:16px;max-height:32px}
.tb-clock,.tb-time{width:96px}.tb-time{font-size:28px}
.turnbar.warn .tb-time{animation:pulse 1s infinite}
.turnbar.crit .tb-time{animation:blinkT .5s infinite;color:#ff4b3a}
@keyframes blinkT{50%{opacity:.35}}
.tb-time.tick{animation:tickT .6s ease-out !important}
@keyframes tickT{0%{transform:scale(1.45);text-shadow:0 0 24px #ff6b5b}100%{transform:scale(1)}}
/* FX overlay */
#fxo{position:fixed;inset:0;pointer-events:none;z-index:66}
.flycard{position:fixed;z-index:67;pointer-events:none;will-change:transform}
.flycard.settle .cardx{box-shadow:0 0 0 3px #ffe7a3,0 0 26px rgba(255,200,90,.9);transition:box-shadow .4s}
.fxbox{position:fixed;inset:0;display:grid;place-items:center;background:rgba(10,0,0,0);transition:background .25s,opacity .25s;opacity:0}
.fxbox.on{opacity:1;background:rgba(10,0,0,.55)}.fxbox.out{opacity:0}
.rv-pan,.vs-pan{max-width:min(92vw,760px);max-height:90vh;padding:16px 20px;border-radius:18px;background:linear-gradient(180deg,rgba(90,13,21,.96),rgba(30,4,6,.96));border:2px solid var(--gold);box-shadow:0 20px 60px rgba(0,0,0,.7);text-align:center;overflow:hidden;transform:scale(.9);transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.fxbox.on .rv-pan,.fxbox.on .vs-pan{transform:scale(1)}
.rv-pan.bad{border-color:#ff6b5b}
.rv-who{font:900 24px 'Baloo 2','Be Vietnam Pro';color:var(--gold2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80vw}
.rv-lbl{font-size:14px;color:var(--mu);margin-bottom:8px}
.rv-card{display:flex;justify-content:center}.rv-card .cardx{--w:min(240px,62vw) !important;width:min(240px,62vw)}
.rv-card.flip .cardx{animation:flipIn .55s ease-out}
@keyframes flipIn{0%{transform:rotateY(90deg) scale(.8)}100%{transform:rotateY(0) scale(1)}}
.rv-nm{margin-top:8px;font:800 16px 'Baloo 2','Be Vietnam Pro'}
.vs-title{font:900 18px 'Noto Serif',serif;color:var(--gold2);margin-bottom:8px}
.vs-row{display:flex;align-items:center;justify-content:center;gap:14px}.vs-row.wrap{flex-wrap:wrap}
.vs-x{font:900 34px 'Noto Serif',serif;color:#ff9a2e;text-shadow:0 0 16px #ff6b00}
.vs-side{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:180px;transition:filter .4s,opacity .4s}
.vs-nm{font:800 15px 'Baloo 2','Be Vietnam Pro';max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-card .cardx{animation:flipIn .5s ease-out .5s both}
.vs-v{font-size:13px;color:var(--mu)}
.vs-side.win .cardx{box-shadow:0 0 0 3px #ffe7a3,0 0 30px rgba(255,220,120,.9);animation:flipIn .5s ease-out .5s both,winGlow 1s ease-in-out 1.6s 2}
.vs-side.lose{animation:loseFade .6s ease-out 1.8s forwards}
@keyframes loseFade{to{filter:grayscale(1) brightness(.6);opacity:.7}}
@keyframes winGlow{50%{box-shadow:0 0 0 4px #fff,0 0 44px rgba(255,230,140,1)}}
.vs-res{margin-top:10px;font:900 18px 'Baloo 2','Be Vietnam Pro';color:#fff;opacity:0;animation:fadeUp .4s ease-out 2.2s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rn-prog{max-width:340px;margin:6px auto 0;font-size:14px}
/* Responsive */
@media (max-width:900px){.gmain{grid-template-columns:1fr}.gfeed{position:static;max-height:none;min-height:0}.fd-hist{max-height:220px}}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.pcard{grid-template-columns:44px minmax(0,1fr);min-height:84px;padding:6px}.pcard .ring{--rw:44px;width:44px}.pc-name{font-size:12.5px}.gtable{gap:14px;min-height:120px}.gt-deck .stack,.gt-deck .stack .cardx{--w:50px;width:50px}.vs-side .cardx{--w:110px !important}.vs-x{font-size:24px}.turnbar{height:58px}.tb-time{font-size:24px}}
@media (max-width:340px){.pgrid{grid-template-columns:1fr}}

/* ================= v5: bố cục gọn trong 1 màn hình + Stage 3s ================= */
body.g{overflow:hidden;height:100dvh}
body.g .top{padding:5px 10px;min-height:40px}
.gmain,.arena{display:none !important}
.game5{display:flex;flex-direction:column;gap:6px;height:calc(100dvh - 46px);max-width:1100px;margin:0 auto;padding:4px 8px calc(6px + env(safe-area-inset-bottom));box-sizing:border-box;overflow:hidden}
.game5>*{flex:0 0 auto;min-width:0}
.game5 .ghead{padding:0;gap:4px}.game5 .stat{padding:2px 9px;font-size:11.5px}
.game5 .turnbar{margin:0 auto;height:50px;width:100%;padding:4px 12px}
.game5 .tb-who{font-size:13.5px}.game5 .tb-sub{font-size:11.5px;min-height:14px;max-height:30px}.game5 .tb-time{font-size:24px}.game5 .tb-clock,.game5 .tb-time{width:84px}.game5 .turnbar{grid-template-columns:minmax(0,1fr) 84px auto}
/* Player grid: tối đa 2 hàng, nhiều cột; người đang lượt to hơn */
.pgrid5{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px;align-items:stretch}
.pgrid5 .pcard{grid-template-columns:1fr;justify-items:center;text-align:center;gap:2px;padding:14px 3px 4px;min-height:0;border-radius:10px}
.pgrid5 .pcard .ring{--rw:clamp(26px,calc((min(100vw,1100px) - 24px) / var(--cols) - 18px),54px);width:var(--rw)}
.pgrid5 .pc-info{align-items:center;width:100%}
.pgrid5 .pc-name{font-size:11px;-webkit-line-clamp:1;padding:0;max-width:100%;text-align:center}
.pgrid5 .pc-name i{display:none}
.pgrid5 .pc-h img{width:9px;height:9px}.pgrid5 .pc-h{justify-content:center}
.pgrid5 .pc-state,.pgrid5 .pc-row,.pgrid5 .pc-hn{display:none}
.pgrid5 .pc-no{left:3px;top:2px;font-size:9px;line-height:12px;padding:0 3px}
.pgrid5 .pc-bot{right:3px;top:2px;font-size:8px;line-height:12px;padding:0 3px}
.pgrid5 .bdgs{right:-6px;top:-4px}.pgrid5 .bdg{width:14px;height:14px;font-size:8px}
.pgrid5 .pcard.turn{grid-column:span 2;grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:8px;padding:14px 8px 6px;align-items:center}
.pgrid5 .pcard.turn .ring{--rw:clamp(44px,12vw,64px)}
.pgrid5 .pcard.turn .pc-info{align-items:flex-start}
.pgrid5 .pcard.turn .pc-name{font-size:13.5px;text-align:left;-webkit-line-clamp:2}
.pgrid5 .pcard.turn .pc-state{display:block}.pgrid5 .pcard.turn .pc-h{justify-content:flex-start}.pgrid5 .pcard.turn .pc-h img{width:12px;height:12px}
.pgrid5 .pcard.turn .pc-row{display:flex}
/* Bàn + diễn biến (chỉ hành động gần nhất) */
.mid5{flex:1 1 auto !important;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;overflow:hidden}
.gtable5{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;background:radial-gradient(ellipse at center,rgba(150,20,30,.55),rgba(40,6,8,.85));border:1px solid rgba(244,201,93,.35);overflow:hidden}
.gtable5 .gt-deck,.gtable5 .gt-last,.gtable5 .gt-face{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.gtable5 .stack{--w:54px;width:54px}.gtable5 .stack .cardx{--w:54px}
.gtable5 .hidbk{position:absolute;left:-14px;top:-4px;z-index:2}.gtable5 .hidbk .cardx{--w:22px}
.gtable5 .cnt{font-size:11px;padding:1px 8px;margin-top:0}
.gfeed5{display:flex;flex-direction:column;gap:6px;min-height:0;padding:8px;border-radius:14px;background:linear-gradient(180deg,rgba(60,8,12,.92),rgba(24,4,6,.94));border:1px solid rgba(244,201,93,.5);overflow:hidden}
.gfeed5 .fd-cur{flex:1 1 auto;min-height:0;overflow:hidden}
.gfeed5 .ac{padding:6px 8px;gap:8px}
.gfeed5 .ac.big .ac-actor{font-size:14px}.gfeed5 .ac.big .ac-act{font-size:13.5px}.gfeed5 .ac-tg,.gfeed5 .ac-res{font-size:12px}
.gfeed5 .ac-res{-webkit-line-clamp:3}
.fd-more{flex:0 0 auto;align-self:flex-end;background:none;border:0;color:var(--gold2);font:800 12px 'Be Vietnam Pro';text-decoration:underline;cursor:pointer;padding:2px 4px}
/* Khu người chơi: lá bài trái, thao tác phải */
.me5{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:stretch;padding:6px;border-radius:14px;background:rgba(20,2,4,.7);border:1px solid rgba(244,201,93,.25)}
.me5.mine{border-color:var(--gold);box-shadow:0 0 16px rgba(244,201,93,.35)}
.me5 .mehand{display:flex;gap:6px;align-items:flex-end;padding:0}
.me5 .mehand .cardx{--w:clamp(68px,20vw,120px)}
.me5 .mehand .cardx.sel{transform:translateY(-6px) scale(1.03)}
.me5 .me-seal{width:clamp(70px,20vw,110px)}
.wiz5{min-width:0;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.wiz5 .mestate{margin:0;padding:3px 8px;font-size:12px}
.wiz5 .wiz{min-height:0;padding:0;background:none;border:0;box-shadow:none;overflow:hidden}
.wiz5 .wiz .stp{font-size:10.5px}.wiz5 .wiz .ttl{font-size:14px;margin:0 0 2px;line-height:1.2}
.wiz5 .wiz .mu.small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px}
.wiz5 .note,.wiz5 .warn{padding:3px 7px;font-size:11.5px;margin:3px 0}
.wiz5 .vals{gap:4px;margin:4px 0}.wiz5 .vals button{width:32px;height:32px;font-size:14px}.wiz5 .vals button small{display:none}
.wiz5 .row{gap:6px;margin-top:4px !important}
.wiz5 .btn{--bw:130px}.wiz5 .btn.sm{--bw:104px}
@media (min-width:761px){.me5 .mehand .cardx{--w:110px}.wiz5 .vals button{width:38px;height:38px}}
/* STAGE overlay: 1 panel ở giữa hoặc 2 panel trái/phải */
#stage{position:fixed;inset:0;z-index:64;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s;background:rgba(10,0,0,.5);padding:12px}
#stage.on{opacity:1}
.stg{display:flex;gap:10px;align-items:stretch;justify-content:center;max-width:min(96vw,760px);max-height:86dvh}
.stg-p{flex:1 1 0;min-width:0;max-width:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:16px;background:linear-gradient(180deg,rgba(90,13,21,.96),rgba(30,4,6,.96));border:2px solid var(--gold);box-shadow:0 14px 40px rgba(0,0,0,.6);text-align:center;overflow:hidden;transform:translateY(10px);transition:transform .25s}
#stage.on .stg-p{transform:none}
.stg.one .stg-p{max-width:420px}
.stg-p .sp-card .cardx{--w:min(150px,30vw) !important;width:min(150px,30vw)}
.stg-p .sp-card.flip .cardx{animation:flipIn .5s ease-out}
.sp-txt{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.sp-who{font:900 17px/1.2 'Baloo 2','Be Vietnam Pro';color:var(--gold2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-act,.sp-tg{font:700 14px/1.25 'Baloo 2','Be Vietnam Pro';overflow-wrap:anywhere}
.sp-cap{font-size:12.5px;color:var(--mu)}.sp-cap.bad{color:#ff9a8a;font-weight:800}
.sp-nm{font:800 13px 'Baloo 2','Be Vietnam Pro'}
.sp-img{width:min(150px,30vw);height:auto;object-fit:contain}
.sp-ban{width:min(360px,80vw);height:auto;object-fit:contain}
.sp-big{font:900 clamp(15px,3.6vw,22px)/1.25 'Noto Serif',serif;color:var(--gold2);overflow-wrap:anywhere}
.sp-res{font:900 15px 'Baloo 2','Be Vietnam Pro'}
.sp-hr{display:flex;justify-content:space-between;gap:10px;width:100%;font-size:12.5px;border-bottom:1px dashed rgba(244,201,93,.2);padding:2px 0}.sp-hr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-p .vs-row{gap:6px}.stg-p .vs-x{font-size:22px}.stg-p .vs-side{max-width:46%}
.stg-p .vs-card .cardx{--w:min(104px,18vw) !important;width:min(104px,18vw)}
.stg-p .vs-nm{font-size:12px;max-width:100%}.stg-p .vs-v{font-size:11px}
.stg-p .vs-row.wrap{flex-wrap:wrap}.stg-p .vs-row.wrap .vs-card .cardx{--w:min(80px,15vw) !important;width:min(80px,15vw)}
.stg-p .vs-res{display:none}
#fx,#ann{display:none !important}
@media (max-width:760px){.game5{height:calc(100dvh - 44px)}.gtable5{gap:8px;padding:6px}.gtable5 .stack,.gtable5 .stack .cardx{--w:44px;width:44px}.gtable5 .gt-last .cardx{--w:44px !important}.gtable5 .gt-face{display:none}.stg-p{padding:8px}}
@media (max-height:700px){.game5 .ghead{display:none}}
/* v5.1: chống đè */
.flycard{z-index:62 !important}
#stage{background:rgba(8,0,0,.72)}
.stg-p .vs-row{width:100%;display:flex;align-items:center;justify-content:center}
.stg-p .vs-side{flex:1 1 0;min-width:0;max-width:none;overflow:hidden}
.stg-p .vs-x{flex:0 0 auto}
.stg-p .vs-nm{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.stg-p .vs-card{display:flex;justify-content:center;width:100%}
.stg-p .vs-card .cardx{--w:min(96px,15vw) !important;width:min(96px,15vw)}
.stg-p .vs-v{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg.two .stg-p{max-width:340px}
/* người đang lượt khi bàn đông: xếp dọc, avatar to hơn */
.pgrid5 .pcard.turn{grid-template-columns:1fr;justify-items:center;text-align:center}
.pgrid5 .pcard.turn .pc-info{align-items:center}
.pgrid5 .pcard.turn .pc-name,.pgrid5 .pcard.turn .pc-h{text-align:center;justify-content:center}
.pgrid5 .pcard.turn .pc-row{justify-content:center}
.pgrid5 .pcard.turn .ring{--rw:clamp(40px,calc(((min(100vw,1100px) - 24px) / var(--cols)) * 1.3),72px)}
#fxo{z-index:60 !important}
.stg-p .vs-card .cardx{animation:flipIn .45s ease-out .15s both}
.stg-p .vs-side.win .cardx{animation:flipIn .45s ease-out .15s both,winGlow 1s ease-in-out 1.2s 2}
.stg-p .vs-side.lose{animation:loseFade .6s ease-out 1.3s forwards}
/* v6: bộ bài + diễn biến full hàng ngang; hoạt cảnh to như trước, chỉ chia trái/phải khi có 2 cái cùng lúc */
.mid5{display:flex !important;flex-direction:column;gap:6px}
.gtable5{flex:0 0 auto;width:100%;box-sizing:border-box;justify-content:center;padding:4px 10px;gap:16px;border-radius:12px}
.gtable5 .gt-deck,.gtable5 .gt-last,.gtable5 .gt-face{flex-direction:row;gap:6px}
.gtable5 .stack,.gtable5 .stack .cardx{--w:34px !important;width:34px}
.gtable5 .gt-last .cardx{--w:34px !important}
.gtable5 .gt-face{display:flex !important}.gtable5 .gt-face .cardx{--w:24px !important}
.gtable5 .hidbk{position:static}.gtable5 .hidbk .cardx{--w:18px}
.gfeed5{flex:1 1 auto;width:100%;box-sizing:border-box}
#stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.stg-head{max-width:min(92vw,700px);padding:6px 16px;border-radius:12px;background:rgba(40,4,6,.9);border:1px solid var(--gold3);font:800 clamp(13px,3.4vw,17px)/1.3 'Baloo 2','Be Vietnam Pro';color:var(--gold2);text-align:center;overflow-wrap:anywhere}
.stg.one .stg-p{max-width:min(92vw,520px);padding:16px 20px;background:none;border:0;box-shadow:none}
.stg.one .sp-card .cardx{--w:min(240px,62vw) !important;width:min(240px,62vw)}
.stg.one .sp-img{width:min(300px,70vw)}
.stg.one .sp-big{font-size:clamp(22px,5vw,34px);text-shadow:0 3px 0 #4a0b12,0 0 20px rgba(255,170,60,.6)}
.stg.one .sp-who{font-size:22px}
.stg.one .vs-card .cardx{--w:min(150px,34vw) !important;width:min(150px,34vw)}
.stg.one .vs-nm{font-size:15px}.stg.one .vs-x{font-size:34px}.stg.one .vs-v{font-size:13px}.stg.one .sp-res{font-size:20px}
.stg.one .vs-row{gap:14px}
.stg.two .sp-card .cardx{--w:min(170px,36vw) !important;width:min(170px,36vw)}
.stg.two .sp-img{width:min(200px,38vw)}
#stage{background:rgba(8,0,0,.86)}
/* v7: chồng bài cao hơn, diễn biến gọn; stage chạm để bỏ qua; popup kết quả luôn đóng được */
#stage.on{pointer-events:auto;cursor:pointer}
#stage::after{content:"Chạm để bỏ qua";position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mu);opacity:.8}
#stage:not(.on)::after{display:none}
.gtable5{flex:1 1 auto !important;min-height:84px;container-type:size;align-items:center;padding:6px 10px;gap:clamp(10px,4vw,28px)}
.gtable5 .gt-deck,.gtable5 .gt-last,.gtable5 .gt-face{flex-direction:column;gap:3px}
.gtable5 .stack,.gtable5 .stack .cardx,.gtable5 .gt-last .cardx{--w:clamp(34px,calc((100cqh - 30px) * .714),118px) !important;width:clamp(34px,calc((100cqh - 30px) * .714),118px)}
.gtable5 .gt-face .cardx{--w:clamp(22px,calc((100cqh - 30px) * .45),70px) !important}
.gtable5 .gt-deck{flex-direction:row;align-items:flex-end}
.gtable5 .gt-deck .cntbtn{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);white-space:nowrap}
.gtable5 .gt-deck{padding-bottom:22px}
.gtable5 .gt-last .cnt{white-space:nowrap}
.gfeed5{flex:0 0 auto !important;max-height:132px;min-height:0;padding:6px 8px;gap:2px}
.gfeed5 .fd-cur{flex:0 0 auto}
.gfeed5 .ac-res{-webkit-line-clamp:2}
.gfeed5 .fd-more{padding:0 4px}
#modal .box{max-height:90dvh;overflow-y:auto}
#modal .cls{position:sticky;top:0;float:right;z-index:3;margin:-30px -10px 0 0}

/* v-pcv: avatar trái, bài đã đánh xếp dọc bên phải, tim dưới người chơi (giữ nguyên kích thước frame) */
.pgrid5 .pcard.pcv,.pgrid5 .pcard.pcv.turn{grid-template-columns:minmax(0,1fr) 20px;column-gap:3px;justify-items:stretch;align-items:start;text-align:center}
.pgrid5 .pcard.pcv.turn{grid-template-columns:minmax(0,1fr) 24px}
.pcard.pcv .pc-l{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}
.pcard.pcv .pc-l .pc-info{align-items:center;width:100%}
.pcard.pcv .pc-l .pc-h{justify-content:center}
.pgrid5 .pcard.pcv .ring{--rw:clamp(24px,calc((min(100vw,1100px) - 24px) / var(--cols) - 40px),54px)}
.pgrid5 .pcard.pcv.turn .ring{--rw:clamp(36px,calc(((min(100vw,1100px) - 24px) / var(--cols)) * 1.3 - 30px),68px)}
.pcard .disc.pc-dv{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;align-self:stretch;max-height:100%;overflow:hidden;padding-top:2px;cursor:pointer;min-height:20px}
.pcard .disc.pc-dv .cardx.mini{--w:18px;flex:none}
.pcard.pcv.turn .disc.pc-dv .cardx.mini{--w:22px}
.pcard .disc.pc-dv .cardx.mini+.cardx.mini{margin-top:-13px}
.mehand .cardx{position:relative}
.mehand .cinfo{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(244,201,93,.8);background:rgba(30,4,6,.85);color:#f4c95d;font:700 12px/18px Georgia,serif;font-style:italic;padding:0;cursor:pointer;z-index:3;touch-action:manipulation}
#lastSlot .cardx,.gt-face .cardx{cursor:zoom-in}
.invl{max-height:55vh;overflow:auto}

/* Nút Chơi tiếp nhấp nháy */
@keyframes tcBlink{0%,100%{transform:scale(1);filter:brightness(1);box-shadow:0 0 0 0 rgba(255,210,90,0)}50%{transform:scale(1.06);filter:brightness(1.3);box-shadow:0 0 22px 6px rgba(255,210,90,.75)}}
.btn.blink{animation:tcBlink 1s ease-in-out infinite}