:root{
  --R:#ff4d5e;--Y:#ffc23d;--G:#2fc76f;--B:#3d8bff;--W:#26213a;
  --Rd:#d92f42;--Yd:#e09a12;--Gd:#1a9e52;--Bd:#2364d6;
  --bg:#fff7ef;--ink:#2a2340;--muted:#7b7391;--panel:#ffffffee;--line:#ece4f5;--acc:#7a5cff;
  --shadow:0 10px 30px -12px #4a2f8a40,0 2px 6px #4a2f8a14;
  --cw:84px;--ch:126px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink);font:600 15px/1.45 Nunito,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,.logo,.btn,.mode-tag,.banner{font-family:"Baloo 2",Nunito,sans-serif}
.bg-blobs{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg-blobs i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.33;animation:drift 22s ease-in-out infinite alternate}
.bg-blobs i:nth-child(1){background:var(--b1,var(--R));left:-14vmax;top:-16vmax}
.bg-blobs i:nth-child(2){background:var(--b2,var(--Y));right:-16vmax;top:-10vmax;animation-delay:-5s}
.bg-blobs i:nth-child(3){background:var(--b3,var(--G));left:-10vmax;bottom:-20vmax;animation-delay:-10s}
.bg-blobs i:nth-child(4){background:var(--b4,var(--B));right:-14vmax;bottom:-18vmax;animation-delay:-15s}
@keyframes drift{to{transform:translate(6vmax,4vmax) scale(1.12)}}
.screen{position:fixed;inset:0;display:none;z-index:1}
.screen.active{display:flex}

/* ---------- nút ---------- */
.btn{border:0;border-radius:16px;padding:10px 18px;background:#fff;box-shadow:var(--shadow),inset 0 -3px 0 #0000000f;font-weight:800;font-size:17px;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px) scale(.98)}
.btn.big{padding:14px 22px;font-size:20px;width:100%}
.btn.pri{background:linear-gradient(135deg,#ff5f6d,#ff9a3d);color:#fff;box-shadow:0 10px 24px -8px #ff5f6d99,inset 0 -4px 0 #0002}
.btn.green{background:linear-gradient(135deg,#2fc76f,#20a8a0);color:#fff}
.btn.blue{background:linear-gradient(135deg,#3d8bff,#7a5cff);color:#fff}
.btn.red{background:linear-gradient(135deg,#ff4d5e,#ff2d87);color:#fff}
.btn.yellow{background:linear-gradient(135deg,#ffc23d,#ff8a3d);color:#3a2300}
.btn:disabled{opacity:.45;pointer-events:none}
.chip{border:0;background:#fff;border-radius:999px;padding:7px 13px;box-shadow:var(--shadow);font-weight:800;cursor:pointer}
.chip.sm{padding:3px 9px;font-size:12px}
.chip.on{background:var(--ink);color:#fff}

/* ---------- trang chủ ---------- */
#screen-home{align-items:center;justify-content:center;padding:16px;overflow:auto}
.back-hub{position:absolute;left:16px;top:14px;color:var(--ink);text-decoration:none;font-weight:800;background:#fff;padding:6px 12px;border-radius:999px;box-shadow:var(--shadow)}
.home-card{width:min(420px,100%);background:var(--panel);backdrop-filter:blur(12px);border-radius:32px;padding:26px 24px 18px;box-shadow:var(--shadow);text-align:center;margin:auto}
.hero-cards{height:120px;position:relative;margin:-4px 0 4px}
.hero-cards .ucard{position:absolute;left:50%;top:6px;--cw:70px;--ch:105px;transform-origin:50% 140%;animation:heroIn .7s backwards}
@keyframes heroIn{from{opacity:0;transform:translateX(-50%) translateY(30px) rotate(0)}}
.logo{font-size:56px;line-height:.9;margin:6px 0 2px;font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,var(--R),var(--Y) 35%,var(--G) 65%,var(--B));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{font-size:24px;margin-left:6px;-webkit-text-fill-color:var(--ink)}
.tag{color:var(--muted);margin:0 0 16px}
.fld{display:block;text-align:left;margin-bottom:12px}.fld span{font-size:13px;color:var(--muted);font-weight:800}
input#name,.join-row input{width:100%;border:2px solid var(--line);border-radius:14px;padding:11px 14px;font-weight:800;font-size:17px;background:#fff;outline:none}
input:focus{border-color:var(--acc)}
.btn-col{display:grid;gap:10px}
.join-row{display:flex;gap:8px}.join-row input{text-transform:uppercase;letter-spacing:4px;text-align:center}
.home-tools{display:flex;gap:8px;justify-content:center;margin:14px 0 6px}
.note{font-size:11.5px;color:var(--muted);margin:6px 0 0}

/* ---------- sảnh ---------- */
#screen-lobby{overflow:auto;padding:14px}
.lobby{width:min(900px,100%);margin:0 auto}
.lobby-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.code-box{background:#fff;border-radius:16px;padding:8px 14px;box-shadow:var(--shadow);font-weight:800}
.code-box b{font-family:"Baloo 2";font-size:24px;letter-spacing:4px;color:var(--acc);margin:0 6px}
.lobby-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;margin-bottom:14px}
@media (max-width:720px){.lobby-grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border-radius:24px;padding:16px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 10px;font-size:22px}.panel h4{margin:14px 0 8px}
.plist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;background:#faf6ff;border-radius:14px;padding:6px 8px;font-weight:800}
.plist li .x{margin-left:auto;border:0;background:#ffe3e6;color:var(--Rd);border-radius:10px;width:28px;height:28px;cursor:pointer;font-weight:900}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:"Baloo 2";font-weight:800;font-size:17px;flex:none;box-shadow:inset 0 -3px 0 #0002}
.modes{display:grid;gap:8px}
.mode{display:block;text-align:left;border:2px solid var(--line);background:#fff;border-radius:18px;padding:10px 12px;cursor:pointer;transition:.15s}
.mode b{font-family:"Baloo 2";font-size:19px;display:block}.mode small{color:var(--muted);font-weight:700}
.mode.on{border-color:var(--acc);background:#f4f0ff;box-shadow:0 0 0 4px #7a5cff22}
.mode:disabled{cursor:default}
.rules{display:grid;gap:6px}
.rule{display:flex;gap:10px;align-items:center;background:#faf6ff;border-radius:12px;padding:7px 10px;cursor:pointer}
.rule input{width:20px;height:20px;accent-color:var(--acc);flex:none}
.rule small{display:block;color:var(--muted);font-weight:700}
.wait{text-align:center;color:var(--muted)}

/* ---------- lá bài ---------- */
.ucard{width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.14);position:relative;flex:none;background:var(--c,#999);border:calc(var(--cw)*.055) solid #fff;box-shadow:0 6px 14px -6px #2a234088,0 1px 2px #2a234033;overflow:hidden;user-select:none;color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800}
.ucard.c-R{--c:var(--R);--d:var(--Rd)}.ucard.c-Y{--c:var(--Y);--d:var(--Yd)}.ucard.c-G{--c:var(--G);--d:var(--Gd)}.ucard.c-B{--c:var(--B);--d:var(--Bd)}
.ucard.c-W{--c:var(--W);--d:#000}
.ucard::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,#fff4 0%,#fff0 40%,#0000 60%,#0001);pointer-events:none}
.ucard .oval{position:absolute;left:50%;top:50%;width:78%;height:66%;transform:translate(-50%,-50%) rotate(-24deg);background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 -4px 0 #0000000d}
.ucard .oval b{transform:rotate(24deg);color:var(--c);font-size:calc(var(--cw)*.5);line-height:1;text-shadow:2px 2px 0 var(--d);letter-spacing:-1px;white-space:nowrap}
.ucard .oval b.sm{font-size:calc(var(--cw)*.33)}
.ucard.c-W .oval{background:conic-gradient(var(--R) 0 25%,var(--B) 0 50%,var(--Y) 0 75%,var(--G) 0)}
.ucard.c-W .oval b{color:#fff;text-shadow:2px 2px 0 #0006}
.ucard .cor{position:absolute;font-size:calc(var(--cw)*.2);line-height:1;text-shadow:1px 1px 0 #0003}
.ucard .cor.tl{left:7%;top:5%}.ucard .cor.br{right:7%;bottom:5%;transform:rotate(180deg)}
.ucard .lbl{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:Nunito;font-weight:900;font-size:calc(var(--cw)*.11);letter-spacing:.5px;color:#fff;text-shadow:0 1px 2px #0005;z-index:2}
.ucard .lbl span{background:#0003;padding:1px 6px;border-radius:6px}
.ucard.back{background:radial-gradient(circle at 30% 20%,#3b2f66,#1d1733);border-color:#fff}
.ucard.back::before{content:"UNO";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-24deg);background:var(--R);color:var(--Y);padding:12% 14%;border-radius:50%;font-size:calc(var(--cw)*.26);text-shadow:2px 2px 0 #0005;box-shadow:0 0 0 calc(var(--cw)*.03) #fff}
.ucard.mini{--cw:22px;--ch:33px;border-width:2px;border-radius:4px}
.ucard.mini::before{display:none}

/* ---------- ván chơi ---------- */
#screen-game{flex-direction:column}
.topbar{display:flex;align-items:center;gap:8px;padding:8px 10px;z-index:5;position:relative}
.mode-tag{font-weight:800;font-size:18px;background:#fff;border-radius:999px;padding:3px 14px;box-shadow:var(--shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.tools select{appearance:none;padding:7px 10px}
#vol{width:70px;accent-color:var(--acc)}
.table{flex:1;position:relative;min-height:0}
#opps{position:absolute;inset:0}
.seat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:110px;transition:filter .2s}
.seat .plate{background:#fff;border-radius:16px;padding:4px 10px 5px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;min-width:92px;position:relative;transition:box-shadow .2s,transform .2s}
.seat .av{width:44px;height:44px;font-size:21px;margin-top:-24px;border:3px solid #fff}
.seat .nm{font-weight:900;font-size:13px;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .fan{display:flex;height:34px;align-items:flex-end;margin-top:1px}
.seat .fan .ucard{margin-left:-14px;transform-origin:50% 120%}
.seat .fan .ucard:first-child{margin-left:0}
.seat .count{position:absolute;right:-8px;top:-10px;background:var(--ink);color:#fff;border-radius:999px;min-width:28px;height:28px;display:grid;place-items:center;font-family:"Baloo 2";font-size:16px;font-weight:800;border:3px solid #fff}
.seat.danger .count{background:var(--R);animation:pulse 1s infinite}
.seat.turn .plate{box-shadow:0 0 0 4px var(--acc),0 0 26px 4px #7a5cff77;transform:scale(1.06)}
.seat.out{filter:grayscale(1) opacity(.55)}
.seat.out .plate::after{content:"BỊ LOẠI";position:absolute;inset:auto 0 40% 0;text-align:center;font-family:"Baloo 2";color:var(--Rd);font-size:18px;transform:rotate(-10deg)}
.seat .uno-tag{position:absolute;left:-16px;top:-8px;background:var(--Y);color:#3a2300;border-radius:10px;padding:0 7px;font-family:"Baloo 2";font-size:14px;font-weight:800;transform:rotate(-12deg);box-shadow:0 3px 8px #0003;border:2px solid #fff}
.seat .catchme{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);white-space:nowrap}
.seat .bot{font-size:11px}
.center{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;gap:26px;align-items:center;justify-content:center;width:300px;height:220px}
.dir{position:absolute;inset:-20px;display:grid;place-items:center;pointer-events:none;color:#7a5cff55;transition:color .4s}
.dir svg{width:100%;height:100%;animation:spin 14s linear infinite}
.dir.ccw svg{animation-direction:reverse;transform:scaleX(-1)}
.dir path{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round}.dir marker path{fill:currentColor;stroke:none}
@keyframes spin{to{rotate:360deg}}
.pile{position:relative;width:var(--cw);height:var(--ch)}
.pile .ucard{position:absolute;inset:0}
.deck .ucard:nth-child(2){transform:translate(-3px,-3px)}.deck .ucard:nth-child(3){transform:translate(-6px,-6px)}
.deck.can{cursor:pointer}.deck.can .ucard:nth-child(3){box-shadow:0 0 0 4px #fff,0 0 0 8px var(--acc),0 0 30px 6px #7a5cff88;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-6px,-12px)}}
.deck .cnt{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted);font-weight:900}
.discard{--cw:96px;--ch:144px}
.discard .ucard{transition:transform .3s}
.color-dot{position:absolute;right:-6px;top:-6px;width:42px;height:42px;border-radius:50%;border:4px solid #fff;box-shadow:var(--shadow);background:var(--cc,#ccc);transition:background .3s}
.center .color-dot{left:calc(50% + 70px);right:auto;top:6px}
.stack-badge{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);background:linear-gradient(135deg,#ff4d5e,#ff2d87);color:#fff;font-family:"Baloo 2";font-size:22px;font-weight:800;padding:0 16px;border-radius:999px;box-shadow:0 8px 20px -6px #ff2d87;display:none;white-space:nowrap;animation:pulse 1s infinite}
.stack-badge.show{display:block}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.08)}}
.seat.danger .count{animation:pulse2 1s infinite}@keyframes pulse2{50%{transform:scale(1.15)}}
.hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#fffd;border-radius:999px;padding:5px 16px;font-weight:800;box-shadow:var(--shadow);max-width:94%;text-align:center;font-size:14px}
.hint.mine{background:var(--ink);color:#fff}
.hint .cc{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;border:2px solid #fff}
.me{position:relative;z-index:3;padding:0 8px calc(8px + env(safe-area-inset-bottom))}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:46px;padding:4px 0}
.actions .btn{padding:8px 16px;font-size:17px}
.btn.uno{background:linear-gradient(135deg,#ffc23d,#ff4d5e);color:#fff;font-size:22px;letter-spacing:1px;animation:wig 1s infinite}
@keyframes wig{25%{transform:rotate(-4deg) scale(1.05)}75%{transform:rotate(4deg) scale(1.05)}}
.hand{display:flex;justify-content:center;align-items:flex-end;height:calc(var(--ch) + 30px);padding:22px 10px 4px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.hand .ucard{margin-left:calc(var(--ov,-22px));transition:transform .18s,filter .18s,margin .18s;cursor:pointer}
.hand .ucard:first-child{margin-left:auto}.hand .ucard:last-child{margin-right:auto}
.hand .ucard.ok{transform:translateY(-14px)}
.hand .ucard.ok:hover{transform:translateY(-26px) scale(1.04);z-index:5}
.hand .ucard.no{filter:saturate(.55) brightness(.97);opacity:.78}
.hand.myturn .ucard.ok{box-shadow:0 0 0 3px #fff,0 0 18px 4px var(--c),0 10px 18px -6px #0006}
.hand .ucard.fresh::before{content:"MỚI";position:absolute;top:2px;left:50%;transform:translateX(-50%);background:#fff;color:var(--ink);font:900 9px Nunito;padding:0 5px;border-radius:6px;z-index:3}
.hand .ucard.must{animation:bob2 .9s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-24px)}}

/* ---------- nhật ký ---------- */
.log{position:fixed;right:0;top:0;bottom:0;width:min(340px,88vw);background:#fff;box-shadow:-10px 0 30px #0002;z-index:30;transform:translateX(105%);transition:transform .25s;display:flex;flex-direction:column;padding:12px}
.log.open{transform:none}
.log h4{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;font-size:20px}
.log ol{margin:0;padding:0 0 0 20px;overflow:auto;font-size:13.5px;flex:1}
.log li{margin-bottom:4px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:#2a234066;backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:40;padding:14px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:28px;padding:20px;box-shadow:var(--shadow);width:min(460px,100%);max-height:90vh;overflow:auto;animation:popIn .25s}
.modal-box.wide{width:min(760px,100%)}
@keyframes popIn{from{transform:scale(.85);opacity:0}}
.modal-box h2{margin:0 0 10px;font-size:26px;text-align:center}
.color-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.color-pick button{border:0;border-radius:22px;height:96px;font-family:"Baloo 2";font-size:22px;font-weight:800;color:#fff;cursor:pointer;box-shadow:inset 0 -6px 0 #0002,0 8px 18px -8px #0006;transition:transform .12s;text-shadow:0 2px 0 #0003}
.color-pick button:hover{transform:scale(1.04)}
.color-pick small{display:block;font:800 12px Nunito;opacity:.9}
.target-list{display:grid;gap:8px}
.target-list button{display:flex;align-items:center;gap:10px;border:2px solid var(--line);background:#fff;border-radius:16px;padding:8px 12px;cursor:pointer;font-weight:800;text-align:left}
.target-list button:hover{border-color:var(--acc)}
.target-list .n{margin-left:auto;background:var(--ink);color:#fff;border-radius:999px;padding:0 10px}
.win{text-align:center}
.win .big{font-size:64px;line-height:1}
.win .btns{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.guide h3{margin:16px 0 6px;font-size:20px}
.guide p,.guide li{font-weight:600}
.guide .cards-row{display:flex;flex-wrap:wrap;gap:12px}
.guide .cards-row>div{display:flex;gap:10px;align-items:center;width:calc(50% - 6px);min-width:240px}
.guide .cards-row .ucard{--cw:50px;--ch:75px}
.guide .tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.close-x{float:right;border:0;background:#f2eefa;border-radius:12px;width:34px;height:34px;font-weight:900;cursor:pointer}

/* ---------- hiệu ứng ---------- */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:50}
.flyer{position:fixed;left:0;top:0;will-change:transform}
.float-text{position:fixed;transform:translate(-50%,-50%);font-family:"Baloo 2";font-weight:800;font-size:30px;color:var(--R);text-shadow:0 2px 0 #fff,0 0 12px #fff;animation:floatUp 1.3s forwards}
.float-text.good{color:var(--G)}.float-text.uno{color:var(--Yd);font-size:34px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.spark{position:fixed;width:10px;height:10px;border-radius:3px;margin:-5px;animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.2);opacity:0}}
.ring{position:fixed;width:20px;height:20px;margin:-10px;border-radius:50%;border:8px solid;animation:ring .8s ease-out forwards}
@keyframes ring{to{transform:scale(14);opacity:0;border-width:1px}}
.confetti{position:fixed;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(var(--r))}}
.banner{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-size:clamp(34px,8vw,64px);font-weight:800;color:#fff;padding:4px 30px;border-radius:24px;background:linear-gradient(135deg,var(--acc),#ff5f6d);box-shadow:0 18px 40px -12px #0007;white-space:nowrap;animation:bannerIn 1.1s forwards;text-shadow:0 3px 0 #0003}
.banner.R{background:linear-gradient(135deg,var(--R),#ff2d87)}.banner.Y{background:linear-gradient(135deg,var(--Y),#ff8a3d)}.banner.G{background:linear-gradient(135deg,var(--G),#20a8a0)}.banner.B{background:linear-gradient(135deg,var(--B),#7a5cff)}
.banner.uno{background:linear-gradient(135deg,var(--Y),var(--R));font-size:clamp(48px,12vw,96px)}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}28%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(.95)}}
.pop{animation:popA .5s}@keyframes popA{40%{transform:scale(1.2)}}
.shake{animation:shk .45s}@keyframes shk{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}
.toast{position:fixed;left:50%;top:60px;transform:translate(-50%,-20px);background:var(--ink);color:#fff;border-radius:14px;padding:8px 16px;font-weight:800;opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- di động ---------- */
@media (max-width:640px),(max-height:560px){
  :root{--cw:62px;--ch:93px}
  .discard{--cw:74px;--ch:111px}
  .center{width:220px;height:170px;gap:18px;top:54%}
  .center .color-dot{left:calc(50% + 50px);width:34px;height:34px}
  .seat{width:84px}.seat .plate{min-width:74px;padding:3px 6px 4px}.seat .av{width:34px;height:34px;font-size:16px;margin-top:-18px}
  .seat .nm{font-size:11.5px;max-width:78px}.seat .fan{height:26px}.seat .fan .ucard{--cw:17px;--ch:25px;margin-left:-11px}
  .seat .count{min-width:24px;height:24px;font-size:14px}
  .hand{padding-top:18px;justify-content:flex-start}
  .tools #vol{display:none}
  .mode-tag{font-size:13px;padding:3px 9px}
  .topbar{gap:5px;padding:6px 8px}.tools{gap:4px}.topbar .chip{padding:6px 8px;font-size:13px}
  .center{top:54%}
  .actions .btn{padding:7px 12px;font-size:15px}
  .hint{font-size:12.5px;bottom:4px}
}
/* nút tự bốc phạt: chờ 1 giây giữa mỗi lần */
.btn.pull { position: relative; overflow: hidden; font-size: 17px; padding: 12px 22px; }
.btn.pull.cd { opacity: .75; cursor: wait; }
.btn.pull.cd::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #fff; transform-origin: left; animation: pullcd 1s linear forwards; }
@keyframes pullcd { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* chọn lá để tặng */
.gift-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 46vh; overflow: auto; padding: 8px 2px; }
.gift-pick .ucard { --cw: 58px; --ch: 87px; cursor: pointer; transition: transform .15s; }
.gift-pick .ucard.sel { transform: translateY(-8px); box-shadow: 0 0 0 4px #7a5cff, 0 8px 18px #0004; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Chủ đề ===== */
[data-theme="sea"]{--bg:#eefaff;--acc:#1e9bd7;--line:#d7ecf7;--b1:#35c2e8;--b2:#7ee0c8;--b3:#4f8cff;--b4:#a8e6ff;--shadow:0 10px 30px -12px #1d5a8a40,0 2px 6px #1d5a8a14}
[data-theme="sunset"]{--bg:#fff2ea;--acc:#ff6a3d;--line:#f6e0d6;--b1:#ff8a5b;--b2:#ffc46b;--b3:#c86bff;--b4:#ff5fa2;--shadow:0 10px 30px -12px #8a3a2f40,0 2px 6px #8a3a2f14}

/* ===== Rà soát 11/2026 ===== */
.home-tools{flex-wrap:wrap}.home-tools .chip{white-space:nowrap;min-height:40px}
#btn-start{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:5}
.afk{flex:0 0 auto;background:#ff4d5e;color:#fff;border-radius:999px;padding:3px 12px;font-weight:900;box-shadow:var(--shadow);white-space:nowrap;animation:pulse2 1s infinite}
@media (max-width:420px){#btn-theme{display:none}.tools select{padding:6px 6px}}

/* ===== Nâng cấp 11/2026 ===== */
/* nhãn chữ trên lá: không nhỏ hơn 9px */
.ucard .lbl{font-size:max(9px,calc(var(--cw)*.12));letter-spacing:0;white-space:nowrap}
.ucard .lbl span{padding:1px 4px}
.hand .ucard{-webkit-touch-callout:none;touch-action:pan-x}
.discard{cursor:help}
/* chừa 2 góc dưới của bàn cho nút 😂 */
/* nút 😂 ở mép phải hàng nút hành động (không đè bài, không đè gợi ý) */
.me .actions{padding-left:52px;padding-right:52px}
.me .bgr-btn{z-index:4}
/* dòng "vừa xảy ra" trong khoảng trống giữa hàng đối thủ và giữa bàn */
.ticker{position:absolute;left:50%;transform:translate(-50%,-50%);width:min(92%,460px);text-align:center;pointer-events:none;font-size:12.5px;line-height:1.3;color:var(--muted);font-weight:800}
.ticker div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker .now{color:var(--ink);font-size:13.5px;background:#ffffffb8;border-radius:999px;padding:2px 12px;display:inline-block;max-width:100%;box-shadow:0 2px 8px #4a2f8a14}
.tk-in{animation:tkIn .35s ease-out}@keyframes tkIn{from{opacity:0;transform:translateY(6px)}}
@media (max-width:420px){#btn-news{display:none}}
/* điểm nhiều ván */
.seat .pts{position:absolute;left:-10px;bottom:-8px;background:#fff;color:var(--ink);border-radius:999px;padding:0 6px;font:900 11.5px/18px Nunito;box-shadow:0 2px 6px #0002;border:2px solid var(--Y)}
.mode-tag.btn-like{cursor:pointer;border:2px solid var(--Y)}
.match-opt .targets{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 4px;font-weight:800;color:var(--muted)}
.match-opt .targets.off{opacity:.45}
.match-opt .targets .chip{min-width:58px;min-height:40px}
.lobby-score{background:#fffbea;border-radius:14px;padding:8px 10px;display:grid;gap:6px}
table.score{width:100%;border-collapse:separate;border-spacing:0 4px;margin:4px 0}
table.score td{padding:2px 4px;vertical-align:middle}
table.score td:first-child{width:40px}
table.score .nm{font-weight:900;text-align:left;width:100%}
table.score .nm small{color:var(--muted)}
table.score .bar{height:6px;border-radius:9px;background:#efe9f8;margin-top:3px;overflow:hidden}
table.score .bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--Y),var(--R))}
table.score .sub{white-space:nowrap;text-align:right;color:var(--muted);font-weight:800}
table.score .tot{font:800 22px/1 "Baloo 2";text-align:right;min-width:52px}
table.score tr.w td{background:#fff6d6}table.score tr.w td:first-child{border-radius:12px 0 0 12px}table.score tr.w td:last-child{border-radius:0 12px 12px 0}
table.score tr.me .nm{color:var(--acc)}
table.score .gain{background:var(--G);color:#fff;border-radius:999px;padding:1px 8px;font-weight:900}
.score-cap{text-align:center;color:var(--muted);margin:-4px 0 8px;font-weight:700}
.mt-t{opacity:.75}
@media (max-width:480px){.mode-tag .mt-name,.mode-tag .mt-t{display:none}}
/* mũi tên "ai chơi ai" */
.arc-wrap{position:fixed;inset:0;pointer-events:none;transition:opacity .45s}
.arc-wrap.fade{opacity:0}
svg.arc{position:fixed;left:0;top:0;overflow:visible}
svg.arc .arc-bg{fill:none;stroke:#fff;stroke-width:11;stroke-linecap:round;opacity:.75}
svg.arc .arc-ln{fill:none;stroke-width:5;stroke-linecap:round}
.arc-ic{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;border:3px solid var(--ac);display:grid;place-items:center;font-size:22px;line-height:1;box-shadow:0 6px 16px -6px #0007}
.arc-ic b{font:800 18px "Baloo 2";color:var(--ac)}
.arc-ic.land{animation:arcLand .4s}
@keyframes arcLand{50%{scale:1.25}}
.arc-bub{position:fixed;transform:translate(-50%,-50%);background:#fff;border:3px solid;border-radius:16px;padding:4px 12px;font:900 14.5px/1.25 Nunito;color:var(--ink);white-space:nowrap;box-shadow:0 10px 24px -8px #0007;animation:arcBub .3s ease-out;max-width:calc(100vw - 16px);overflow:hidden;text-overflow:ellipsis}
@keyframes arcBub{from{opacity:0;transform:translate(-50%,-30%) scale(.8)}}
/* bong bóng "Lá này làm gì?" */
.tip{position:fixed;left:50%;bottom:180px;transform:translate(-50%,12px);width:min(380px,calc(100vw - 20px));background:#fff;border-radius:20px;box-shadow:0 18px 40px -12px #2a2340aa,0 0 0 3px var(--Y);padding:10px 12px;display:flex;gap:10px;align-items:center;z-index:35;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.tip.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tip::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#fff}
.tip-card .ucard{--cw:52px;--ch:78px}
.tip-body{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
.tip-body>small{display:block;color:var(--acc);font-weight:900;font-size:12px}
.tip-body>b{font-family:"Baloo 2";font-size:18px;line-height:1.1;display:block}
.tip-body p{margin:2px 0 6px;font-weight:700}
.tip-btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tip-btns .chip{min-height:34px;padding:4px 12px;font-size:13px}
.tip-note{color:var(--muted);font-weight:700;font-size:11.5px}
/* điện thoại dọc cao (≥ 720px): lá to hơn, tận dụng khoảng trống */
@media (max-width:640px) and (min-height:720px){
  :root{--cw:70px;--ch:105px}
  .discard{--cw:86px;--ch:129px}
  .center{width:250px;height:200px}
  .center .color-dot{left:calc(50% + 58px);width:38px;height:38px}
  .seat{width:96px}.seat .plate{min-width:84px;padding:4px 8px 5px}.seat .av{width:40px;height:40px;font-size:19px;margin-top:-21px}
  .seat .nm{font-size:13px;max-width:88px}.seat .fan{height:30px}.seat .fan .ucard{--cw:20px;--ch:30px;margin-left:-13px}
  .hint{font-size:13.5px}
}
/* giảm chuyển động */
@media (prefers-reduced-motion:reduce){
  .dir svg,.deck.can .ucard:nth-child(3),.btn.uno,.stack-badge,.seat.danger .count,.hand .ucard.must,.bg-blobs i{animation:none!important}
  .banner{animation-name:fadeOnly!important}.float-text{animation-name:fadeOnly!important}
  @keyframes fadeOnly{0%,80%{opacity:1}100%{opacity:0}}
}
/* gợi ý lá: màn thấp (điện thoại ngang) → dải gọn dưới thanh trên cùng; màn vừa → gọn hơn */
@media (max-height:700px){.tip{padding:8px 10px}.tip-card .ucard{--cw:42px;--ch:63px}.tip-body{font-size:12.5px}.tip-body>b{font-size:16px}.tip-body p{margin:1px 0 4px}}
@media (max-height:560px){
  .tip{top:50px;bottom:auto!important;left:10px;transform:translateY(-8px);width:min(400px,calc(100vw - 20px));padding:6px 10px}
  .tip.show{transform:none}.tip::after{display:none}
  .tip-card .ucard{--cw:34px;--ch:51px}
  .tip-body{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}.tip-body>small{width:100%}.tip-body p{margin:0 0 2px;width:100%}
}
/* trang chủ: link "← Bàn chơi BGVN" không bị thẻ chính che trên điện thoại thấp */
.back-hub{z-index:3}
#screen-home{padding-top:60px}
/* nhãn dài: tự xuống 2 dòng thay vì bị cắt */
.ucard .lbl span{display:inline-block;max-width:92%;white-space:normal;line-height:1.08;text-wrap:balance;vertical-align:bottom}

/* chuỗi cộng dồn giữ trên màn hình */
#chain-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:5}
#chain-layer .chain-live{animation:chainPulse 1.2s ease-in-out infinite}
@keyframes chainPulse{50%{stroke-width:6}}
@media (prefers-reduced-motion: reduce){#chain-layer .chain-live{animation:none}}