/* Mèo Nổ – tông sáng, ấm, vui */
:root{
  --bg:#fff3e2;--bg2:#ffe3c4;--ink:#2d2a32;--muted:#7a6f80;--line:#2d2a3214;--card:#fff;
  --pri:#ff6b35;--pri2:#ff8f3d;--pink:#ff5d8f;--red:#e5383b;--green:#2fbf71;--blue:#3a86ff;--purple:#8e5cf7;
  --shadow:0 14px 34px -14px #5a2d0055;--r:18px;--hard:4px 5px 0 #2d2a3238;
  --ol2:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink);
  --ol4:4px 0 0 var(--ink),-4px 0 0 var(--ink),0 4px 0 var(--ink),0 -4px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink);
  --cw:66px;--ch:94px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:500 15px/1.45 "Be Vietnam Pro",system-ui,sans-serif;overflow:hidden}
h1,h2,h3,h4,.logo,.btn,.banner,.title-tag,.mc-name,.boom-word,.boom-sub,.reveal-bang{font-family:"Baloo 2","Be Vietnam Pro",sans-serif}
button,input,select{font:inherit;color:inherit}
.bg-paws{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffcf9e'%3E%3Cellipse cx='30' cy='38' rx='9' ry='7'/%3E%3Ccircle cx='20' cy='27' r='3.5'/%3E%3Ccircle cx='27' cy='23' r='3.5'/%3E%3Ccircle cx='35' cy='23' r='3.5'/%3E%3Ccircle cx='41' cy='28' r='3.5'/%3E%3C/g%3E%3Cg fill='%23ffd9b3' transform='rotate(25 88 88)'%3E%3Cellipse cx='88' cy='94' rx='8' ry='6'/%3E%3Ccircle cx='79' cy='84' r='3'/%3E%3Ccircle cx='86' cy='80' r='3'/%3E%3Ccircle cx='93' cy='80' r='3'/%3E%3Ccircle cx='98' cy='85' r='3'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(circle at 15% 10%,#ffd6e5 0,transparent 40%),radial-gradient(circle at 90% 85%,#ffe1b8 0,transparent 45%)}
.screen{position:fixed;inset:0;display:none;z-index:1}
.screen.active{display:flex}

/* ---------- nút ---------- */
.btn{border:0;border-radius:16px;padding:9px 18px;min-height:44px;font-weight:800;font-size:17px;cursor:pointer;background:#fff;color:var(--ink);box-shadow:0 4px 0 #0000001f,0 6px 16px -8px #0006;transition:transform .1s,filter .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0000001f}
.btn:disabled{opacity:.5;cursor:default}
.btn.big{font-size:19px;padding:11px 22px;min-height:50px}
.btn.pri{background:linear-gradient(135deg,var(--pri),var(--pink));color:#fff}
.btn.red{background:var(--red);color:#fff}
.btn.green{background:var(--green);color:#fff}
.btn small{font-size:12px;opacity:.9;font-family:"Be Vietnam Pro";font-weight:700;background:#0002;border-radius:8px;padding:0 6px}
.chip{border:0;border-radius:999px;padding:6px 12px;min-height:40px;min-width:40px;background:#fff;font-weight:700;cursor:pointer;box-shadow:0 2px 8px -3px #0004;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.chip.on{background:var(--pri);color:#fff}
.chip.sm{min-height:32px;padding:3px 10px;font-size:13px}
select.chip{appearance:none;padding:6px 10px}

/* ---------- trang chủ ---------- */
#screen-home{align-items:center;justify-content:center;padding:16px;overflow:auto}
.back-hub{position:fixed;left:12px;top:10px;z-index:3;text-decoration:none;color:var(--ink);font-weight:800;background:#fff;border-radius:999px;padding:8px 14px;box-shadow:0 2px 10px -4px #0005}
.home-card{position:relative;margin:auto;width:min(440px,100%);background:#fffdf9;border-radius:30px;padding:22px 20px 18px;box-shadow:var(--shadow);text-align:center}
.hero{position:relative;height:126px;margin:4px 0 0}
.hero .mcard{position:absolute;left:50%;top:6px;--cw:76px;--ch:108px;transform:translateX(-50%) rotate(var(--r));transform-origin:50% 140%;animation:heroIn .6s backwards;animation-delay:var(--d)}
.hero .mcard.t-bomb{z-index:2;animation:heroIn .6s backwards,wob 1.6s 1s infinite}
@keyframes heroIn{from{opacity:0;transform:translateX(-50%) translateY(40px) rotate(0)}}
@keyframes wob{50%{transform:translateX(-50%) rotate(calc(var(--r) + 4deg)) scale(1.05)}}
.logo{font-size:58px;line-height:1;margin:8px 0 4px;color:var(--ink);letter-spacing:-1px}
.logo span{color:var(--pri);display:inline-block;animation:boomTitle 2.4s infinite}
@keyframes boomTitle{0%,80%,100%{transform:none}86%{transform:scale(1.18) rotate(-6deg);color:var(--red)}92%{transform:scale(.95) rotate(3deg)}}
.tag{margin:0 0 14px;color:var(--muted);font-weight:600}
.fld{display:block;text-align:left;margin:0 0 12px}
.fld span{display:block;font-weight:800;font-size:13px;color:var(--muted);margin:0 0 4px 4px}
input#name,.join-row input{width:100%;border:2px solid #f0dcc6;border-radius:14px;padding:10px 14px;min-height:46px;background:#fff;font-weight:700;outline:0}
input#name:focus,.join-row input:focus{border-color:var(--pri)}
.btn-col{display:flex;flex-direction:column;gap:10px}
.join-row{display:flex;gap:8px}.join-row input{text-transform:uppercase;letter-spacing:3px;text-align:center}
.home-tools{display:flex;gap:8px;justify-content:center;margin:14px 0 6px}
.note{font-size:12px;color:var(--muted);margin:8px 0 0}

/* ---------- sảnh ---------- */
#screen-lobby{overflow:auto;padding:14px}
.lobby{margin:auto;width:min(860px,100%);display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.lobby-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.code-box{background:#fff;border-radius:999px;padding:6px 8px 6px 16px;font-weight:700;box-shadow:0 2px 10px -4px #0004;display:flex;align-items:center;gap:8px}
.code-box b{font-family:"Baloo 2";font-size:24px;letter-spacing:3px;color:var(--pri)}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.lobby-grid{grid-template-columns:1fr}}
.panel{background:#fffdf9;border-radius:24px;padding:14px 16px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 8px;font-size:22px}
.plist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;background:#fff6ec;border-radius:14px;padding:6px 8px;font-weight:700}
.plist li span{flex:1}
.plist .x{border:0;background:#fff;border-radius:50%;width:36px;height:36px;cursor:pointer;font-weight:800}
.av{position:relative;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:"Baloo 2";font-size:20px;flex:none;box-shadow:inset 0 -3px 0 #0002}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:10px;align-items:center;background:#fff6ec;border-radius:14px;padding:8px 10px;cursor:pointer}
.opt span{flex:1;display:flex;flex-direction:column}.opt small{color:var(--muted)}
.opt input[type=checkbox]{width:22px;height:22px;accent-color:var(--pri);flex:none}
.opt select{border:2px solid #f0dcc6;border-radius:10px;padding:6px;background:#fff;min-height:40px}
.deck-info{margin-top:10px;font-size:14px;color:var(--muted)}
.wait{text-align:center;color:var(--muted);font-weight:700}
#btn-start{align-self:center;min-width:220px}

/* ---------- lá bài ---------- */
.mcard{--bgc:#fff;--acc:#2d2a32;position:relative;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .15);background:var(--bgc);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 2px #ffffffb0,0 3px 0 #2d2a3240,0 6px 12px -6px #0006;display:flex;flex-direction:column;align-items:center;overflow:hidden;flex:none;user-select:none;color:var(--acc);isolation:isolate}
.mcard::before{content:"";position:absolute;inset:4px;border-radius:calc(var(--cw) * .1);border:1.5px dashed #ffffff8a;pointer-events:none;z-index:1}
.mc-art{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;padding-top:6%;z-index:1}
.mc-art .art{width:84%;height:auto;max-height:100%}
.mc-art .emo{font-size:calc(var(--cw) * .5);line-height:1;filter:drop-shadow(0 3px 0 #0002)}
.mc-art .emo2{position:absolute;right:10%;bottom:6%;font-size:calc(var(--cw) * .22)}
.mc-name{position:relative;z-index:1;width:100%;height:calc(var(--cw) * .42);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:calc(var(--cw) * .15);line-height:1.12;padding:0 4px calc(var(--cw) * .05);text-transform:uppercase;letter-spacing:.1px;text-shadow:0 1.5px 0 #0003}
.mc-desc{display:none}
.mcard.lg,.mcard.md{--cw:120px;--ch:170px}
.mcard.lg .mc-desc,.mcard.md .mc-desc{display:block;font-size:11px;line-height:1.2;text-align:center;padding:0 8px 10px;font-weight:600;opacity:.9}
.mcard.sm{--cw:64px;--ch:90px}.mcard.xs{--cw:48px;--ch:68px;border-width:2px}
.mcard.xs .mc-name{font-size:8.5px}
.mcard.back{background:repeating-linear-gradient(90deg,#00000012 0 2px,transparent 2px 6px),linear-gradient(160deg,#e6b376,#cf9455);align-items:center;justify-content:center}
.mcard.back::before{border-color:#8a5a2b66}
.mcard.back .tape{position:absolute;left:50%;top:-2px;bottom:-2px;width:30%;transform:translateX(-50%);background:#f7e2b0d9;border-left:1.5px dashed #c79a5c;border-right:1.5px dashed #c79a5c}
.back-art{position:relative;z-index:2;font-size:calc(var(--cw) * .36);background:#fff6e6;border:2px solid var(--ink);border-radius:50%;width:58%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #2d2a3240;transform:rotate(-8deg)}
.bomb-art .spark-g{animation:fz .25s infinite alternate;transform-origin:72px 5px}
@keyframes fz{to{transform:scale(1.5)}}

/* ---------- bàn chơi ---------- */
#screen-game{flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.topbar{display:flex;align-items:center;gap:6px;padding:6px 8px;position:relative;z-index:5}
.title-tag{font-weight:800;font-size:20px;white-space:nowrap}
.tools{margin-left:auto;display:flex;gap:5px;align-items:center}
#vol{width:80px;accent-color:var(--pri)}
.table{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:0 8px;gap:6px;position:relative;z-index:2}
.opps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;width:100%;max-width:900px}
.seat{width:76px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;padding:5px 2px 4px;border-radius:16px;background:#ffffffb8;transition:.2s}
.seat .av{width:44px;height:44px}
.seat .cnt{position:absolute;right:-8px;bottom:-4px;background:#fff;color:var(--ink);border-radius:999px;font:800 13px/1 "Be Vietnam Pro";min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 6px -2px #0006}
.seat .nm{font-weight:700;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.seat .nm small{font-size:10px;margin-left:2px}
.seat .st{position:absolute;left:2px;top:0;font-size:13px;font-weight:800;background:#fff;border-radius:999px;padding:0 5px;box-shadow:0 2px 6px -2px #0005}
.seat .st.x2{background:var(--red);color:#fff;animation:pulse 1s infinite}
.seat.turn{background:#fff;box-shadow:0 0 0 3px var(--pri),0 8px 18px -8px #ff6b35}
.seat.turn .av{animation:bob 1.2s infinite}
.seat.out{opacity:.45;filter:grayscale(1)}
.seat.winner{box-shadow:0 0 0 3px #ffd23f,0 8px 22px -6px #ffb300}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes pulse{50%{transform:scale(1.15)}}
.center{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(22px,8vw,60px)}
.pile{position:relative;--cw:82px;--ch:116px;width:var(--cw);height:var(--ch)}
.pile .mcard{position:absolute;left:0;top:0}
.deck .mcard:nth-child(1){transform:translate(4px,6px) rotate(3deg)}
.deck .mcard:nth-child(2){transform:translate(2px,3px) rotate(-2deg)}
.deck.can{cursor:pointer}
.deck.can .top{animation:invite 1.4s infinite;box-shadow:0 0 0 3px var(--pri),0 10px 24px -8px #ff6b35}
@keyframes invite{50%{transform:translateY(-6px) rotate(-1deg)}}
.deck.suspense .top{animation:susp .12s infinite}
@keyframes susp{0%{transform:translate(-2px,-8px) rotate(-3deg)}50%{transform:translate(2px,-10px) rotate(3deg)}100%{transform:translate(-1px,-9px) rotate(-2deg)}}
.deck.low .top{box-shadow:0 0 0 3px var(--red),0 10px 24px -8px var(--red)}
.deck .cnt{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:1px 10px;font-weight:800;font-size:13px;white-space:nowrap;z-index:2}
.shuffling .mcard{animation:shuf .5s}
@keyframes shuf{25%{transform:translateX(-26px) rotate(-12deg)}75%{transform:translateX(26px) rotate(12deg)}}
.discard .mcard{transform:rotate(var(--rot))}
.discard .mcard.under{opacity:.9}
.empty-pile{width:100%;height:100%;border:3px dashed #8a5a2b66;border-radius:14px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;color:#8a5a2b99;font-weight:800;font-size:13px;background:#00000008}
.fishbone{width:56%;height:auto}
.meter{width:min(520px,100%);min-height:38px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:5px 12px;box-shadow:0 3px 12px -6px #0005;font-size:13px;margin-bottom:2px}
.meter:empty{visibility:hidden}
.meter .lbl{font-weight:700;white-space:nowrap}
.meter .bar{flex:1;height:10px;background:#f3e6d8;border-radius:99px;overflow:hidden;min-width:40px}
.meter .bar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .5s}
.meter b{white-space:nowrap}
.meter.warm .bar i{background:#ffb300}.meter.hot .bar i{background:var(--red)}
.meter.hot{animation:hotglow 1s infinite}
@keyframes hotglow{50%{box-shadow:0 0 0 3px #e5383b55,0 3px 12px -6px #0005}}
.meter.peek{justify-content:center;flex-wrap:wrap;border-radius:18px}
.meter.peek.safe b{color:var(--green)}.meter.peek.hot b{color:var(--red)}
.pk{display:flex;gap:2px;font-size:18px}.pki.b{animation:pulse .6s infinite}
.meter.off{justify-content:center}

/* thanh trạng thái / cửa sổ HUỶ KÈO! */
.strip{height:64px;flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;position:relative;z-index:3}
.strip .hint{background:#fff;border-radius:16px;padding:6px 14px;font-size:14px;text-align:center;box-shadow:0 3px 10px -6px #0005;max-width:640px;line-height:1.3}
.strip .hint.mine{background:#fff1e6;box-shadow:0 0 0 2px var(--pri)}
.strip.window{background:linear-gradient(90deg,#fff,#fff6ec)}
.wbox{flex:1;min-width:0;max-width:560px;display:flex;flex-direction:column;gap:5px}
.wtxt{font-size:14px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wtxt .k{color:var(--pri)}.wtxt .you{color:var(--red)}
.nn{font-weight:800;font-size:12px;border-radius:999px;padding:1px 7px;white-space:nowrap}
.nn.c{background:var(--red);color:#fff}.nn.ok{background:var(--green);color:#fff}
.wprog{height:9px;background:#f0e1d1;border-radius:99px;overflow:hidden}
.wprog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),var(--pri));border-radius:99px}
.strip.cancelled .wprog i{background:linear-gradient(90deg,#666,#999)}
.wwait{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
.nope-btn{background:repeating-linear-gradient(-45deg,#ff4d6d 0 10px,#e11d48 10px 20px);color:#fff;font-size:20px;min-height:52px;padding:6px 16px;animation:nopeP .7s infinite;flex:none;text-shadow:0 2px 0 #0003}
@keyframes nopeP{50%{transform:scale(1.07)}}

/* phần của mình */
.me{flex:none;display:flex;flex-direction:column;gap:4px;padding:0 6px 6px;position:relative;z-index:3}
.clockbar{height:20px;border-radius:99px;background:#f3e3d1;overflow:hidden;position:relative;visibility:hidden;max-width:620px;width:100%;align-self:center}
.clockbar.on{visibility:visible}
.clockbar i{position:absolute;left:0;top:0;bottom:0;background:#c8b6a6;border-radius:99px}
.clockbar.mine i{background:var(--pri)}.clockbar.low i{background:var(--red)}
.clockbar::after{content:attr(data-t);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--ink)}
.actions{min-height:52px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.btn.draw{background:linear-gradient(135deg,#2d2a32,#4a4054);color:#fff}
.mini-hint{font-size:12px;color:var(--muted);font-weight:700;max-width:180px;line-height:1.2}
.hand{--ov:0px;display:flex;align-items:flex-end;justify-content:center;padding:16px 8px 2px;min-height:calc(var(--ch) + 20px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.hand::-webkit-scrollbar{display:none}
.hand.tiny{--cw:58px;--ch:84px}
.hand .mcard{margin-right:var(--ov);cursor:pointer;transition:transform .15s}
.hand .mcard:last-child{margin-right:0}
.hand .mcard.sel{transform:translateY(-14px);box-shadow:0 0 0 3px var(--pri),0 10px 18px -6px #ff6b35;z-index:2}
.hand .mcard.glow{animation:glow .7s infinite;z-index:2}
@keyframes glow{50%{transform:translateY(-10px);box-shadow:0 0 0 4px #ffd23f,0 0 22px #e11d48}}
.hand .mcard.fresh{animation:fresh .6s 2}
@keyframes fresh{50%{transform:translateY(-12px) scale(1.06)}}
.hand.pulse{animation:handP .6s}@keyframes handP{40%{transform:scale(1.03)}}
.empty-hand{color:var(--muted);font-weight:800;font-size:22px;align-self:center}
.log{position:fixed;right:0;top:0;bottom:0;width:min(340px,88vw);background:#fffdf9;box-shadow:-10px 0 30px -12px #0005;z-index:30;transform:translateX(105%);transition:.25s;display:flex;flex-direction:column}
.log.open{transform:none}
.log h4{margin:0;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:20px}
.log ol{margin:0;padding:0 14px 14px 30px;overflow:auto;font-size:13px;flex:1}
.log li{margin:3px 0}

/* ---------- hộp thoại ---------- */
.modal{position:fixed;inset:0;background:#2d1a0a66;backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:40;padding:12px}
.modal.open{display:flex}
.modal-box{position:relative;background:#fffdf9;border-radius:26px;padding:18px;box-shadow:var(--shadow);width:min(460px,100%);max-height:92vh;max-height:92dvh;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 8px;font-size:24px;text-align:center;line-height:1.15;padding:0 26px}
.close-x{position:absolute;right:10px;top:10px;border:0;background:#f4e6d6;border-radius:50%;width:40px;height:40px;font-weight:800;cursor:pointer}
.ctr{text-align:center}
.btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.target-list{display:flex;flex-direction:column;gap:8px}
.target-list button{display:flex;align-items:center;gap:10px;border:0;background:#fff3e6;border-radius:16px;padding:8px 12px;min-height:52px;font-weight:800;cursor:pointer;text-align:left}
.target-list button span:first-of-type{flex:1}
.target-list button:disabled{opacity:.45}
.target-list .n{font-size:13px;color:var(--muted)}
.name-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.name-grid button{border:0;background:#fff3e6;border-radius:14px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font-weight:700;font-size:12px}
.pick-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pick-grid .mcard{cursor:pointer;--cw:72px;--ch:102px}
.pick-grid .mcard:hover{transform:translateY(-4px)}
.alter-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.alt{display:flex;flex-direction:column;align-items:center;gap:6px}
.alt .mcard{--cw:86px;--ch:122px}
.alt-n{font-size:12px;font-weight:800;color:var(--muted)}
.alt-btns{display:flex;gap:6px}
.defuse .bomb-big{width:110px;margin:0 auto;animation:bombShake .18s infinite}
@keyframes bombShake{50%{transform:rotate(3deg) translateX(2px)}}
.pos-box{background:#fff3e6;border-radius:18px;padding:12px;margin-top:8px}
.pos-ends{display:flex;justify-content:space-between;font-size:13px;font-weight:800;color:var(--muted)}
#pos{width:100%;height:36px;accent-color:var(--red)}
.pos-lbl{text-align:center;font-weight:800;color:var(--red);min-height:22px}
.pos-quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.mtimer{height:6px;background:#f0e1d1;border-radius:99px;overflow:hidden;margin-top:12px}
.mtimer i{display:block;height:100%;width:100%;background:var(--pri)}
.win{text-align:center}.win .big{font-size:64px;line-height:1}
.rank{text-align:left;display:inline-block;margin:6px 0;font-weight:700}
.guide h3{margin:12px 0 4px;font-size:19px}
.guide p,.guide li{font-size:14.5px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.cards-row{display:flex;flex-direction:column;gap:8px}
.cards-row>div{display:flex;gap:10px;align-items:center;background:#fff6ec;border-radius:14px;padding:6px}
.cards-row span{font-size:14px}

/* ---------- hiệu ứng ---------- */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.flyer{position:fixed;left:0;top:0;will-change:transform;--cw:66px;--ch:94px}
.flyer.reveal-fly .mcard{animation:flipIn .5s}
@keyframes flipIn{0%{transform:rotateY(90deg)}100%{transform:none}}
.flyer.sneak{opacity:.7}
.float-text{position:fixed;transform:translate(-50%,-50%);font-family:"Baloo 2";font-weight:800;font-size:26px;color:var(--pri);text-shadow:0 2px 0 #fff,0 0 12px #fff;animation:floatUp 1.4s forwards;white-space:nowrap}
.float-text.bad{color:var(--red)}.float-text.ok{color:var(--green);font-size:22px}
@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%,-170%) 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}}
.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:38%;transform:translate(-50%,-50%);font-size:clamp(28px,8vw,58px);font-weight:800;color:#fff;padding:2px 26px;border-radius:22px;background:linear-gradient(135deg,var(--pri),var(--pink));box-shadow:0 18px 40px -12px #0007;white-space:nowrap;animation:bannerIn 1.1s forwards;text-shadow:0 3px 0 #0003;max-width:96vw;overflow:hidden;text-overflow:ellipsis}
.banner.long{font-size:clamp(20px,6.4vw,44px);white-space:normal;text-align:center;line-height:1.2;padding:8px 18px;width:max-content;max-width:92vw}
.banner.nope{background:repeating-linear-gradient(-45deg,#ff4d6d 0 14px,#e11d48 14px 28px);font-size:clamp(40px,12vw,90px)}
.banner.bomb,.banner.boom{background:linear-gradient(135deg,#1d1a22,#5b2333);color:#ffd23f}
.banner.defuse{background:linear-gradient(135deg,#2fbf71,#14b8a6)}
.banner.k-attack,.banner.attack{background:linear-gradient(135deg,#ff5a36,#e5383b)}
.banner.k-skip,.banner.k-bottom{background:linear-gradient(135deg,#3a86ff,#14b8a6)}
.banner.k-shuffle,.banner.k-future,.banner.k-alter{background:linear-gradient(135deg,#8e5cf7,#4f46e5)}
@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:58px;transform:translate(-50%,-20px);background:var(--ink);color:#fff;border-radius:14px;padding:8px 16px;font-weight:700;opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);animation:revealIn .5s cubic-bezier(.2,1.4,.4,1) both}
.reveal .mcard{animation:bombShake .12s infinite;box-shadow:0 0 0 4px #ffd23f,0 0 60px 10px #ff3d2e}
@keyframes revealIn{from{transform:translate(-50%,-50%) scale(.3) rotateY(180deg);opacity:0}}
.boom-flash{position:fixed;inset:0;background:radial-gradient(#e5383b55 2px,transparent 2.6px) 0 0/12px 12px,radial-gradient(circle,#fff 0,#ffd23f 30%,#ff6b35 60%,transparent 80%);animation:flash .8s forwards}
@keyframes flash{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
.boom-word{position:fixed;left:50%;top:42%;width:min(88vw,480px);aspect-ratio:1/.82;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;animation:boomW 1.6s forwards}
.boom-word .burst{position:absolute;inset:0;width:100%;height:100%}
.boom-word span{position:relative;font-size:clamp(60px,19vw,140px);font-weight:800;line-height:1;color:#fff;transform:rotate(-6deg);text-shadow:var(--ol4),0 9px 0 #e5383b,0 9px 0 var(--ink)}
@keyframes boomW{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0}15%{transform:translate(-50%,-50%) scale(1.25) rotate(6deg);opacity:1}30%{transform:translate(-50%,-50%) scale(1) rotate(-3deg)}80%{opacity:1}100%{transform:translate(-50%,-60%) scale(1.1);opacity:0}}
.shock{position:fixed;width:30px;height:30px;margin:-15px;border-radius:50%;border:8px solid #ffd23f;animation:shock .8s ease-out forwards}
@keyframes shock{to{transform:scale(18);opacity:0;border-width:1px}}
.smoke{position:fixed;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle,#6b6170cc,#6b617000 70%);animation:smoke 1.6s ease-out forwards}
@keyframes smoke{from{transform:scale(.3);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(2.6);opacity:0}}
.flycat{position:fixed;width:64px;height:64px;margin:-32px;font-size:48px;line-height:64px;text-align:center;animation:flycat 1.8s cubic-bezier(.15,.7,.4,1) both}
.flycat svg{width:100%;height:100%}
@keyframes flycat{from{transform:scale(.3)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.3)}}
body.quake .screen.active{animation:quake .8s}
@keyframes quake{10%{transform:translate(-12px,8px) rotate(-1deg)}20%{transform:translate(10px,-10px) rotate(1deg)}30%{transform:translate(-14px,-6px)}40%{transform:translate(12px,10px) rotate(-1deg)}55%{transform:translate(-8px,4px)}70%{transform:translate(6px,-4px)}85%{transform:translate(-3px,2px)}}


/* ================= CHỦ ĐỀ: thế giới mèo hoạt hình – bàn cà phê mèo, hộp các-tông, len, xương cá, nổ kiểu truyện tranh ================= */
.bg-paws{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23ffd2a6' transform='translate(34 40) scale(1)'%3E%3Cellipse cx='0' cy='6' rx='8' ry='6.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.3'/%3E%3Ccircle cx='-3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='9' cy='-4' r='3.3'/%3E%3C/g%3E%3Cg transform='translate(118 46) rotate(-18)' stroke='%23ffd9b8' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-18 0 h28 M-10 -7 l3 7 l-3 7 M-2 -7 l3 7 l-3 7 M6 -6 l3 6 l-3 6'/%3E%3Cpath d='M10 0 l9 -7 v14 z'/%3E%3Ccircle cx='-21' cy='0' r='3' fill='%23ffd9b8'/%3E%3C/g%3E%3Cg transform='translate(124 130)' stroke='%23ffc9d9' stroke-width='2.6' fill='none' stroke-linecap='round'%3E%3Ccircle r='13'/%3E%3Cpath d='M-12 -5 q12 -6 22 6 M-13 3 q14 -4 24 8 M-6 -12 q10 10 4 25'/%3E%3Cpath d='M12 6 q14 6 8 16 q-4 6 -12 2'/%3E%3C/g%3E%3Cg fill='%23ffdcbc' transform='translate(46 138) scale(0.8)'%3E%3Cellipse cx='0' cy='6' rx='8' ry='6.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.3'/%3E%3Ccircle cx='-3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='9' cy='-4' r='3.3'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(circle at 15% 10%,#ffd6e5 0,transparent 40%),radial-gradient(circle at 90% 85%,#ffe1b8 0,transparent 45%)}
/* nút & chip: viền mực, bóng cứng kiểu hoạt hình */
.btn{border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.pri,.btn.red,.btn.green,.btn.draw{text-shadow:0 2px 0 #0003}
.chip{border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.chip.on{background:var(--pri);color:#fff}
.chip.sm{box-shadow:0 1.5px 0 var(--ink)}
.home-card,.panel,.modal-box{border:3px solid var(--ink);box-shadow:6px 7px 0 #2d2a3233,var(--shadow)}
.plist li,.opt{border:2px solid #2d2a321f}
.back-hub{border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.logo{font-size:62px;letter-spacing:0}
.logo span{color:#ffd23f;text-shadow:var(--ol2),3px 5px 0 #e5383b,3px 5px 0 var(--ink);padding:0 4px}
.home-tools{align-items:center}
.home-cat{width:58px;height:48px}
.lobby-cat{display:inline-block;width:46px;height:38px;vertical-align:middle;margin-right:6px;cursor:pointer}
.woke{animation:woke .5s}@keyframes woke{40%{transform:translateY(-8px) rotate(-6deg)}}
input#name,.join-row input,.opt select{border:2.5px solid var(--ink)}

/* bàn chơi = mặt bàn gỗ quán cà phê mèo */
#screen-game{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23c98a4a22' transform='translate(40 50) scale(1)'%3E%3Cellipse cx='0' cy='6' rx='8' ry='6.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.3'/%3E%3Ccircle cx='-3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='9' cy='-4' r='3.3'/%3E%3C/g%3E%3Cg fill='%23c98a4a1c' transform='translate(160 170) scale(0.8)'%3E%3Cellipse cx='0' cy='6' rx='8' ry='6.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.3'/%3E%3Ccircle cx='-3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='9' cy='-4' r='3.3'/%3E%3C/g%3E%3Cg transform='translate(170 60) rotate(20)' stroke='%23c98a4a1f' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-18 0 h28 M-10 -7 l3 7 l-3 7 M-2 -7 l3 7 l-3 7 M6 -6 l3 6 l-3 6'/%3E%3Cpath d='M10 0 l9 -7 v14 z'/%3E%3Ccircle cx='-21' cy='0' r='3' fill='%23c98a4a1f'/%3E%3C/g%3E%3Cg transform='translate(60 170)' stroke='%23c98a4a1c' stroke-width='2.6' fill='none' stroke-linecap='round'%3E%3Ccircle r='13'/%3E%3Cpath d='M-12 -5 q12 -6 22 6 M-13 3 q14 -4 24 8 M-6 -12 q10 10 4 25'/%3E%3Cpath d='M12 6 q14 6 8 16 q-4 6 -12 2'/%3E%3C/g%3E%3C/svg%3E"),repeating-linear-gradient(90deg,transparent 0 157px,#b5773d38 157px 160px),repeating-linear-gradient(0deg,#ffffff12 0 3px,transparent 3px 12px),linear-gradient(180deg,#f6d6a8,#ecc38c)}
.seat{background:#fffdf7;border:2px solid #2d2a3233;box-shadow:0 3px 0 #2d2a3226}
.seat.turn{background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px var(--pri),0 4px 0 var(--ink)}
.seat .cnt{border:1.5px solid var(--ink)}
.seat .st{border:1.5px solid var(--ink)}
/* avatar có tai mèo: rũ khi chờ, dựng lên khi tới lượt / có biến */
.av{isolation:isolate;box-shadow:none}
.av b{position:relative;z-index:1;font-weight:800;text-shadow:0 2px 0 #0003}
.av .ears{position:absolute;inset:0;border-radius:50%;background:inherit;z-index:-1;filter:drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))}
.av .ears::before,.av .ears::after{content:"";position:absolute;top:-16%;width:44%;height:48%;background:inherit;clip-path:polygon(0 0,100% 34%,34% 100%);transition:transform .3s}
.av .ears::before{left:-2%;transform:rotate(6deg)}
.av .ears::after{right:-2%;transform:scaleX(-1) rotate(6deg)}
.seat:not(.turn) .ears::before{transform:rotate(-14deg) translate(-2px,3px)}
.seat:not(.turn) .ears::after{transform:scaleX(-1) rotate(-14deg) translate(-2px,3px)}
.opps.alert .seat:not(.out) .ears::before{transform:rotate(14deg) translateY(-3px)}
.opps.alert .seat:not(.out) .ears::after{transform:scaleX(-1) rotate(14deg) translateY(-3px)}
.seat.out .ears::before{transform:rotate(-40deg) translate(-3px,6px)}.seat.out .ears::after{transform:scaleX(-1) rotate(-40deg) translate(-3px,6px)}

/* giữa bàn = hộp các-tông */
.center{width:min(620px,100%);flex:1 1 auto;min-height:0;margin:0 auto;padding:18px 12px 18px;border-radius:20px;position:relative;
  background:repeating-linear-gradient(90deg,#0000000b 0 2px,transparent 2px 7px),radial-gradient(ellipse at 50% 40%,#e9b979,#d89c5b);
  border:3px solid #7a4d22;box-shadow:inset 0 0 0 5px #f0c48c,inset 0 14px 22px -10px #00000040,0 7px 0 #a8743f,0 14px 26px -12px #0007;gap:clamp(10px,4vw,40px)}
.center::before{content:"HÀNG DỄ NỔ · NHẸ TAY 🐾";position:absolute;top:2px;left:50%;transform:translateX(-50%) rotate(-1deg);background:#f7e2b0e6;color:#9b6a35;font:800 9.5px/14px "Be Vietnam Pro",sans-serif;letter-spacing:1px;padding:0 12px;border-left:2px dashed #c79a5c;border-right:2px dashed #c79a5c;white-space:nowrap;pointer-events:none}
.deck .cnt{border:2px solid #fff;box-shadow:0 2px 0 var(--ink)}
.discard .mcard.under{filter:brightness(.96)}
/* mèo linh vật */
.mascot{flex:none;width:72px;height:60px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.mascot svg{width:100%;height:100%;overflow:visible;display:block}
.mascot .ey,.mascot .mo,.mascot .m-zz,.mascot .m-bang,.mascot .m-heart{display:none}
.m-sleep .ey-sleep,.m-sleep .mo-calm,.m-sleep .m-zz,.m-alert .ey-open,.m-alert .mo-calm,.m-panic .ey-panic,.m-panic .mo-o,.m-panic .m-bang,
.m-happy .ey-happy,.m-happy .mo-calm,.m-happy .m-heart,.m-dizzy .ey-dizzy,.m-dizzy .mo-o{display:inline}
.mascot .m-body,.mascot .m-head,.mascot .m-ears,.mascot .m-tail,.mascot .m-zz,.mascot .m-heart{transform-box:fill-box;transform-origin:50% 100%}
.m-sleep .m-body{animation:breathe 2.6s ease-in-out infinite}
.m-sleep .m-head{transform:translateY(5px) rotate(-4deg);transition:transform .4s}
.m-sleep .m-ears{transform:scaleY(.82)}
.m-sleep .m-zz{animation:zz 2.6s ease-in-out infinite}
.m-alert .m-tail{animation:tail 1.1s ease-in-out infinite;transform-origin:0 100%}
.m-alert .m-ears{transform:scaleY(1.08)}
.m-panic svg{animation:shiver .12s infinite}
.m-panic .m-ears{transform:scaleY(.6) translateY(4px)}
.m-panic .m-tail{transform:scale(1.15)}
.m-panic .m-bang{animation:pulse .5s infinite;transform-box:fill-box;transform-origin:center}
.m-happy svg{animation:hop .5s ease-in-out infinite}
.m-happy .m-heart{animation:zz 1.2s ease-in-out infinite}
.m-dizzy .m-head{animation:dizzy .6s ease-in-out infinite;transform-origin:50% 80%}
@keyframes breathe{50%{transform:scaleY(1.05) scaleX(.98)}}
@keyframes zz{0%{opacity:0;transform:translate(0,4px) scale(.7)}40%{opacity:1}100%{opacity:0;transform:translate(6px,-8px) scale(1.1)}}
@keyframes tail{50%{transform:rotate(-12deg)}}
@keyframes shiver{50%{transform:translateX(1.5px)}}
@keyframes hop{50%{transform:translateY(-5px)}}
@keyframes dizzy{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
/* đồ trang trí 2 bên (chỉ màn hình rộng) */
.deco{display:none}

/* lá bài: khung hoạt hình, mỗi loại một tính cách */
.mc-pat{position:absolute;inset:0;pointer-events:none;z-index:0}
.is-act .mc-art .emo{position:relative}
.is-act .mc-name{color:#fff;text-shadow:var(--ol2);text-shadow:1px 0 0 #2d2a32aa,-1px 0 0 #2d2a32aa,0 1px 0 #2d2a32aa,0 -1px 0 #2d2a32aa,0 2px 0 #2d2a32}
.t-bomb .mc-pat{background:radial-gradient(#ff3d2e66 1.3px,transparent 1.8px) 0 0/7px 7px}
.t-bomb::before{border:2px dashed #ffd23f}
.t-bomb .mc-name{color:#ffd23f;font-size:max(11px,calc(var(--cw) * .19))}
.t-defuse .mc-name{font-size:max(11px,calc(var(--cw) * .19))}
.t-defuse .mc-pat{background:repeating-linear-gradient(135deg,transparent 0 9px,#ffffff24 9px 11px)}
.t-attack .mc-pat{background:repeating-conic-gradient(from 0deg at 50% 46%,#ffffff2e 0 9deg,transparent 9deg 20deg)}
.t-skip .mc-pat{background:repeating-linear-gradient(0deg,transparent 0 7px,#ffffff30 7px 9px);-webkit-mask:linear-gradient(90deg,#000,transparent 75%);mask:linear-gradient(90deg,#000,transparent 75%)}
.t-shuffle .mc-pat{background:repeating-radial-gradient(circle at 50% 46%,transparent 0 6px,#ffffff22 6px 8px)}
.t-future .mc-pat{background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/11px 11px,radial-gradient(#ffffff99 .8px,transparent 1.2px) 5px 6px/13px 13px}
.t-alter .mc-pat{background:linear-gradient(45deg,#ffffff22 25%,transparent 25% 75%,#ffffff22 75%) 0 0/12px 12px}
.t-favor .mc-pat{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 14 l-5 -4.5 c-2.5 -2.5 0 -6 2.6 -4.4 l2.4 1.8 l2.4 -1.8 c2.6 -1.6 5.1 1.9 2.6 4.4z' fill='%23ffffff33'/%3E%3C/svg%3E") 0 0/18px 18px}
.t-bottom .mc-pat{background:repeating-linear-gradient(90deg,#00000014 0 2px,transparent 2px 6px)}
.t-nope .mc-pat{background:radial-gradient(#ffffff40 1.2px,transparent 1.7px) 0 0/7px 7px}
.t-nope.is-cat .mc-pat{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='%230000000f' transform='translate(13 12) scale(0.55)'%3E%3Cellipse cx='0' cy='6' rx='8' ry='6.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.3'/%3E%3Ccircle cx='-3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='3.5' cy='-9.5' r='3.3'/%3E%3Ccircle cx='9' cy='-4' r='3.3'/%3E%3C/g%3E%3C/svg%3E") 0 0/26px 26px}
.is-cat::before{border-color:#2d2a3226}

/* thanh nguy cơ / gợi ý / đồng hồ: viền mực */
.meter{border:2.5px solid var(--ink);box-shadow:0 3px 0 #2d2a3240}
.meter .bar{border:1.5px solid var(--ink)}
.strip .hint{border:2.5px solid var(--ink);box-shadow:0 3px 0 #2d2a3240}
.strip .hint.mine{box-shadow:0 0 0 2px var(--pri),0 3px 0 #2d2a3240}
.strip.window{background:none}
.strip.window .wbox{background:#fffdf7;border:2.5px solid var(--ink);border-radius:14px;padding:5px 9px;box-shadow:0 3px 0 #2d2a3240}
.wprog{border:1.5px solid var(--ink)}
.nope-btn{text-shadow:var(--ol2);letter-spacing:.5px}
.clockbar{border:2px solid var(--ink)}
.clockbar::after{text-shadow:0 0 3px #fff,0 0 3px #fff}

/* banner kiểu truyện tranh: viền mực, bóng cứng, chấm bi */
.banner{border:3.5px solid var(--ink);border-radius:16px;box-shadow:6px 7px 0 var(--ink);text-shadow:var(--ol2),0 4px 0 var(--ink)}
.banner::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(#ffffff40 1.3px,transparent 1.8px) 0 0/8px 8px}
.banner.bomb,.banner.boom{background:#ffd23f;color:#fff}
.banner.bomb{top:17%}.banner.boom{top:76%}
.banner.bomb::after,.banner.boom::after{background:radial-gradient(#e5383b55 1.6px,transparent 2.1px) 0 0/8px 8px}
.banner.nope{border-width:5px;animation-name:stampIn}
@keyframes stampIn{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4) rotate(-14deg)}16%{opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(-8deg)}26%{transform:translate(-50%,-50%) scale(1) rotate(-8deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}}
.boom-rays{position:fixed;inset:0;background:repeating-conic-gradient(from 0deg at var(--x) var(--y),#ffd23fb3 0 6deg,#ff8a0000 6deg 15deg);transform-origin:var(--x) var(--y);animation:rays 1.4s ease-out forwards}
@keyframes rays{0%{opacity:0;transform:scale(.3) rotate(-10deg)}15%{opacity:1}100%{opacity:0;transform:scale(1.3) rotate(10deg)}}
.boom-sub{position:fixed;transform:translate(-50%,-50%) rotate(var(--r));font-weight:800;font-size:clamp(22px,7vw,42px);color:#ffd23f;text-shadow:var(--ol2),3px 4px 0 var(--ink);white-space:nowrap;animation:subPop 1.3s both}
@keyframes subPop{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(.2)}20%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(1.2)}35%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) rotate(var(--r)) scale(1)}}
.reveal .burst{position:absolute;width:250%;left:-75%;top:-38%;z-index:-1;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reveal-bang{position:absolute;right:-34px;top:-26px;font-size:58px;line-height:1;color:#ffd23f;text-shadow:var(--ol2),3px 4px 0 var(--ink);transform:rotate(14deg);animation:pulse .4s infinite}
.float-text{text-shadow:var(--ol2),0 3px 0 var(--ink);color:#fff}
.float-text.bad{color:#ff8b8b}.float-text.ok{color:#9ff0c0}
.toast{border:2px solid #fff;box-shadow:0 3px 0 #0004}
.modal-box h2{font-size:25px}
.target-list button,.name-grid button,.cards-row>div{border:2px solid #2d2a321f}
.pos-box{border:2px solid #2d2a321f}
#pos{accent-color:var(--red)}

/* ---------- điện thoại ---------- */
@media (max-width:640px){
  .title-tag,#vol{display:none}
  .tools{gap:4px}.tools .chip{padding:4px 8px;min-width:40px}
  select.chip{max-width:84px;font-size:13px}
  .seat{width:72px}
}
@media (max-width:380px){
  .seat{width:68px}.seat .av{width:40px;height:40px}
  .tools .chip{min-width:38px;padding:4px 6px}
  select.chip{max-width:74px}
}
@media (min-width:900px){
  :root{--cw:84px;--ch:120px}
  .pile{--cw:104px;--ch:148px}
  .seat{width:92px}.seat .av{width:52px;height:52px;font-size:24px}
  .strip{height:70px}
}
@media (min-height:780px){.pile{--cw:100px;--ch:142px}}
@media (max-height:700px){
  .pile{--cw:70px;--ch:100px}
  .strip{height:56px}
  .seat{padding:3px 2px 2px}.seat .av{width:38px;height:38px}
  .hero{height:110px}
}
@media (max-height:600px) and (min-width:641px){:root{--cw:62px;--ch:88px}}
/* điện thoại dài (≥780px): bàn dư chỗ → lá trên tay to hơn cho dễ nhận */
@media (max-width:899px) and (min-height:780px){:root{--cw:76px;--ch:108px}.hand.tiny{--cw:66px;--ch:94px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .banner,.float-text,.boom-word,.boom-flash{animation-duration:1.2s!important}
}

/* chủ đề: kích thước theo màn hình */
@media (max-width:640px){ .mascot{width:60px;height:50px} .center{padding:17px 8px 16px} }
@media (max-width:380px){ .mascot{width:54px;height:45px} }
@media (max-height:700px){ .center{padding-top:16px;padding-bottom:15px} .mascot{width:54px;height:45px} }
@media (min-width:900px){ .mascot{width:96px;height:80px} }
@media (min-width:1080px) and (min-height:600px){
  .deco{display:block;position:absolute;pointer-events:none;width:150px;height:128px;top:calc(50% - 90px);background:center/contain no-repeat;z-index:1}
  .deco-yarn{left:calc(50% - 310px - 190px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Cpath d='M96 80 q30 6 34 24 q2 10 -10 12' stroke='%23ff5d8f' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='62' cy='60' r='46' fill='%23ff8fb1' stroke='%232d2a32' stroke-width='4'/%3E%3Cg stroke='%23d94d7c' stroke-width='4' fill='none' stroke-linecap='round'%3E%3Cpath d='M22 44 q40 -22 78 6'/%3E%3Cpath d='M18 64 q44 -16 88 12'/%3E%3Cpath d='M30 90 q34 -8 62 4'/%3E%3Cpath d='M48 16 q30 30 14 88'/%3E%3C/g%3E%3Cpath d='M30 12 l20 40 M100 10 l-26 44' stroke='%232d2a32' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='12' r='5' fill='%23ffd23f' stroke='%232d2a32' stroke-width='2.5'/%3E%3Ccircle cx='100' cy='10' r='5' fill='%233a86ff' stroke='%232d2a32' stroke-width='2.5'/%3E%3C/svg%3E");transform:rotate(-8deg)}
  .deco-fish{right:calc(50% - 310px - 190px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Cellipse cx='70' cy='108' rx='56' ry='8' fill='%2300000018'/%3E%3Cpath d='M14 70 h112 q-4 38 -56 38 q-52 0 -56 -38z' fill='%233a86ff' stroke='%232d2a32' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M30 84 q40 10 80 0' stroke='%23ffffff88' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ctext x='70' y='100' font-size='14' font-weight='800' text-anchor='middle' fill='%23fff' font-family='sans-serif'%3EMEO%3C/text%3E%3Cg transform='translate(70 52) rotate(-10)' stroke='%232d2a32' stroke-width='4' fill='%23fff6e6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-36 0 h52' fill='none'/%3E%3Cpath d='M-24 -12 l5 12 l-5 12 M-10 -12 l5 12 l-5 12 M4 -11 l5 11 l-5 11' fill='none'/%3E%3Cpath d='M16 0 l18 -14 v28 z'/%3E%3Ccircle cx='-40' cy='0' r='7'/%3E%3C/g%3E%3C/svg%3E");transform:rotate(6deg)}
}
@media (prefers-reduced-motion:reduce){ .boom-rays,.reveal .burst{animation:none!important;opacity:.6} }
/* trang chủ: link về hub nằm trong luồng, không đè thẻ */
#screen-home{flex-direction:column;align-items:center}
#screen-home .back-hub{position:static;align-self:flex-start;margin:0 0 10px}
.home-tools .chip{white-space:nowrap}
.home-tools{flex-wrap:wrap}
.hero{height:128px}
@media (max-height:700px){.hero{height:122px}}
@media (max-width:400px){.home-card{padding:18px 14px 14px}.home-cat{width:50px;height:42px}}
#screen-home{justify-content:flex-start}

/* ===== lá bài (thiết kế lại 11/2026): mỗi loại một màu nền + hoạ tiết riêng, góc trái có biểu tượng + chữ tắt, hình lớn, tên to ===== */
.mcard{--bgc:#fff;--acc:#2d2a32;--cc:#fff;--ct:#2d2a32}
.mc-corner{position:absolute;left:4%;top:3%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:calc(var(--cw) * .3);padding:calc(var(--cw) * .03) calc(var(--cw) * .03) calc(var(--cw) * .025);background:var(--cc);color:var(--ct);border:1.5px solid var(--ink);border-radius:calc(var(--cw) * .08);box-shadow:0 1.5px 0 #2d2a3240;line-height:1}
.mc-ci{font-size:max(11px,calc(var(--cw) * .2));line-height:1;width:max(13px,calc(var(--cw) * .22));height:max(13px,calc(var(--cw) * .22));display:flex;align-items:center;justify-content:center}
.mc-ci svg{width:100%;height:100%}
.mc-ab{font-family:"Baloo 2","Be Vietnam Pro",sans-serif;font-weight:800;font-size:max(9px,calc(var(--cw) * .15));letter-spacing:-.3px;white-space:nowrap}
.mc-art{padding:calc(var(--cw) * .1) 4% 0 18%}
.mc-art .art{width:100%;max-height:100%;filter:drop-shadow(0 2px 0 #0003)}
.mc-name{height:auto;min-height:calc(var(--cw) * .36);font-size:max(10px,calc(var(--cw) * .17));line-height:1.02;padding:0 3px calc(var(--cw) * .06);letter-spacing:-.2px;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}
.mc-en{display:none}
.is-act .mc-name,.t-bomb .mc-name{color:#fff;text-shadow:1px 0 0 #2d2a32,-1px 0 0 #2d2a32,0 1px 0 #2d2a32,0 -1px 0 #2d2a32,0 2px 0 #2d2a32}
.is-cat .mc-name{color:var(--acc);text-shadow:0 1.5px 0 #fff9}
.mc-pair{position:absolute;right:4%;top:3%;z-index:3;font-size:max(8px,calc(var(--cw) * .12));font-weight:800;background:#fff;border:1.5px solid var(--ink);border-radius:99px;padding:0 calc(var(--cw) * .04);line-height:1.45;color:var(--ink);white-space:nowrap}
.mcard.lg .mc-en,.mcard.md .mc-en{display:block;font-size:10.5px;font-weight:700;opacity:.85;margin-top:-4px;padding-bottom:2px;font-style:italic}
.mcard.lg .mc-desc,.mcard.md .mc-desc{padding:0 8px 9px}
.mcard.xs .mc-corner,.mcard.xs .mc-pair{display:none}.mcard.xs .mc-art{padding:6% 6% 0}
.mcard.lg{--cw:150px;--ch:212px}
.mcard.lg .mc-name{font-size:24px}.mcard.lg .mc-desc{font-size:13px}
/* màu: khác cả độ sáng lẫn hoạ tiết để người mù màu đỏ–xanh vẫn phân biệt */
.t-bomb{--bgc:radial-gradient(circle at 50% 46%,#fff3b0 0,#ffb020 30%,#ff3d2e 62%,#7a0f0a 100%);--acc:#ffd23f;--cc:#ffd23f;border:3px solid #ffd23f;box-shadow:0 0 0 2.5px #2d2a32,0 0 14px 2px #ff3d2ecc,0 6px 12px -6px #000}
.t-bomb .mc-pat{background:repeating-linear-gradient(-45deg,#ffd23f 0 6px,#17141c 6px 12px);padding:5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.t-bomb::before{border:none}
.t-bomb .mc-name{color:#ffd23f;font-size:max(11px,calc(var(--cw) * .19))}
.t-defuse .mc-name{font-size:max(11px,calc(var(--cw) * .19))}
.t-defuse{--bgc:radial-gradient(circle at 50% 40%,#bbf7d0,#4ade80 70%);--cc:#fff;border:3px solid #fff;box-shadow:0 0 0 2.5px #166534,0 0 14px 2px #86efacd0,0 6px 12px -6px #0006}
.t-defuse .mc-pat{background:repeating-linear-gradient(135deg,transparent 0 9px,#ffffff55 9px 12px)}
.t-defuse .mc-name{text-shadow:1px 0 0 #14532d,-1px 0 0 #14532d,0 1px 0 #14532d,0 -1px 0 #14532d,0 2px 0 #14532d}
.t-attack{--bgc:#f97316;--cc:#ffedd5}
.t-skip{--bgc:#38bdf8;--cc:#e0f2fe}
.t-shuffle{--bgc:#7e22ce;--cc:#f3e8ff}
.t-future{--bgc:#1e3a8a;--cc:#dbeafe}
.t-alter{--bgc:#0f766e;--cc:#ccfbf1}
.t-favor{--bgc:#f472b6;--cc:#fce7f3}
.t-bottom{--bgc:#7c3f12;--cc:#ffedd5}
.t-nope{--bgc:repeating-linear-gradient(-45deg,#e11d48 0 9px,#ffe4e6 9px 12px);--cc:#fff}
.t-nope .mc-pat{background:none}
.t-cat1{--bgc:#fde047;--acc:#713f12;--cc:#fef9c3}
.t-cat2{--bgc:#94a3b8;--acc:#0f172a;--cc:#f1f5f9}
.t-cat3{--bgc:#fff7ed;--acc:#9a3412;--cc:#ffedd5}
.t-cat4{--bgc:#c08457;--acc:#2b1608;--cc:#fbe8d6}
.t-cat5{--bgc:#e9d5ff;--acc:#581c87;--cc:#faf5ff}
.t-cat1 .mc-pat{background:radial-gradient(#b4530933 2px,transparent 2.6px) 0 0/10px 10px}
.t-cat2 .mc-pat{background:repeating-linear-gradient(90deg,#33415533 0 4px,transparent 4px 11px)}
.t-cat3 .mc-pat{background:radial-gradient(circle at 92% 30%,#fb923c 0 9%,transparent 9.5%),radial-gradient(circle at 6% 46%,#2d2a32 0 6%,transparent 6.5%),radial-gradient(circle at 96% 58%,#2d2a32 0 5%,transparent 5.5%)}
.t-cat4 .mc-pat{background:linear-gradient(45deg,#2b160822 25%,transparent 25% 75%,#2b160822 75%) 0 0/12px 12px,linear-gradient(45deg,#2b160822 25%,transparent 25% 75%,#2b160822 75%) 6px 6px/12px 12px}
.t-cat5 .mc-pat{background:radial-gradient(#fff 1.6px,transparent 2.1px) 0 0/9px 9px,radial-gradient(#c084fc88 1.2px,transparent 1.7px) 4px 5px/11px 11px}
.t-future .mc-pat{background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/11px 11px,radial-gradient(#ffffff99 .8px,transparent 1.2px) 5px 6px/13px 13px}
.t-attack .mc-pat{background:repeating-conic-gradient(from 0deg at 60% 50%,#ffffff2e 0 9deg,transparent 9deg 20deg)}
/* tay bài chật: lá chồng lên nhau → tên canh trái, góc trái là thứ luôn lộ ra */
.hand.tight .mc-name{justify-content:flex-start;text-align:left;padding-left:4px}
.hand.tight .mcard:last-child .mc-name{justify-content:center;text-align:center}
.hand.tight .mc-pair{display:none}.hand.tight .mcard:last-child .mc-pair{display:block}
/* xem chi tiết lá */
.card-detail{display:flex;gap:16px;align-items:center}
.card-detail .cd-txt h2{margin:0 0 2px}.card-detail .cd-en{color:var(--muted);font-weight:700;font-style:italic;margin:0 0 8px}
.card-detail .cd-txt p{margin:0 0 6px}
@media (max-width:640px){.card-detail{flex-direction:column;text-align:center}}
.card-detail .mcard .mc-desc,.card-detail .mcard .mc-en{display:none}
.is-act.lg .mc-desc,.is-act.md .mc-desc,.is-act.lg .mc-en,.is-act.md .mc-en,.t-bomb.lg .mc-desc{color:#fff;text-shadow:0 1px 2px #000c}

/* ===== nâng cấp 11/2026: lá nào cũng có mèo, dấu mộc HUỶ KÈO!, huy hiệu cuối ván ===== */
.bomb-art .spark-g{transform-origin:90px 32px}
.mc-art .art{overflow:visible}
/* con dấu HUỶ KÈO! giữa bàn: mỗi lần HUỶ KÈO! thêm 1 dấu lệch góc */
.nope-stack{position:fixed;left:50%;top:42%;width:0;height:0;z-index:2;transition:opacity .4s}
.nope-stack.bye{opacity:0}
.stamp{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r));display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(170px,min(58vw,72vh),330px);padding:4px 10px 8px;border-radius:18px;color:#e11d48;border:7px solid currentColor;background:#fff7f8f5;
  box-shadow:inset 0 0 0 3px #fff7f8,inset 0 0 0 6px currentColor,0 10px 26px -10px #0008;font-family:"Baloo 2","Be Vietnam Pro",sans-serif;line-height:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.6 3.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.6 3.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px;
  animation:stampSlam .52s cubic-bezier(.3,1.6,.5,1) both}
.stamp b{font-size:clamp(46px,min(21vw,24vh),118px);font-weight:800;letter-spacing:1px;line-height:.95;margin-top:4px}
.stamp small{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:clamp(12px,min(3.8vw,4vh),18px);letter-spacing:.3px;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* giữ đủ dấu tiếng Việt: chừa chỗ trên cho dấu, không cắt dòng nhỏ theo chiều dọc, vân mực nhẹ hơn để dấu nhỏ không bị ăn mất */
.stamp{padding:12px 12px 10px}
.stamp b{line-height:1.12;padding-top:.08em}
.stamp b{font-size:clamp(30px,min(10.5vw,14vh),80px);white-space:nowrap} /* "HUỶ KÈO!" dài hơn "ĐÉO!" */
.stamp small{line-height:1.45;padding:2px 2px 0;overflow:visible;text-overflow:clip;white-space:normal;text-align:center}
.stamp{-webkit-mask-size:220px 220px;mask-size:220px 220px}
.stamp .lv{position:absolute;right:8px;top:4px;font-style:normal;font-weight:800;font-size:clamp(18px,5vw,26px)}
.stamp.save{color:#1d4ed8;background:#f3f7fff5;box-shadow:inset 0 0 0 3px #f3f7ff,inset 0 0 0 6px currentColor,0 10px 26px -10px #0008}
.stamp.old{opacity:.55;filter:saturate(.8)}
@keyframes stampSlam{0%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(calc(var(--r) - 14deg)) scale(2.6)}55%{opacity:1;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.92)}75%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}}
body.thud #table{animation:thud .28s}
@keyframes thud{30%{transform:translateY(5px) scale(.995)}}
@media (prefers-reduced-motion:reduce){.stamp{animation:none!important}}
/* lá Mèo Nổ khi bốc trúng: tên người bốc */
.reveal-who{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;background:#fff;border:2.5px solid var(--ink);border-radius:99px;padding:3px 12px;font-weight:800;font-size:15px;box-shadow:0 3px 0 var(--ink)}
.reveal.doom .reveal-who{background:#2d2a32;color:#ffd23f}
/* sảnh: tuỳ chọn hỗn loạn */
.opt.hot{background:repeating-linear-gradient(-45deg,#fff0f6 0 12px,#f3e8ff 12px 24px);box-shadow:0 0 0 2px #a855f7}
/* cuối ván: huy hiệu + bảng số liệu */
.aw-h{margin:10px 0 6px;font-size:19px}
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;text-align:left}
.aw{display:flex;gap:8px;align-items:center;background:#fff6ec;border:2px solid #2d2a321f;border-radius:14px;padding:6px 8px;animation:awIn .45s backwards;animation-delay:var(--d)}
.aw-i{font-size:28px;line-height:1;flex:none;width:36px;text-align:center}
.aw-t{display:flex;flex-direction:column;min-width:0;line-height:1.2;font-size:14px}
.aw-n{font-family:"Baloo 2","Be Vietnam Pro",sans-serif;font-size:16px;color:var(--pri)}
.aw-t small{color:var(--muted);font-weight:600;font-size:12.5px}
@keyframes awIn{from{opacity:0;transform:translateY(10px) scale(.9)}}
.stt{width:100%;border-collapse:collapse;margin:10px 0 2px;font-size:14px;font-weight:700}
.stt th,.stt td{padding:5px 4px;text-align:center;border-bottom:1.5px solid #2d2a3214}
.stt th{font-size:15px}
.stt .nm{text-align:left;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stt tr.mine td{background:#fff1e0}
.stt small{color:var(--muted);font-weight:700;font-size:12px}
.stt-key{font-size:12px;color:var(--muted);margin:2px 0 0}
.reveal .mcard.lg{--cw:168px;--ch:238px}
.reveal .mcard .mc-desc,.reveal .mcard .mc-en{display:none}
.reveal .mcard.lg .mc-name{font-size:28px}
@media (max-height:680px){.reveal .mcard.lg{--cw:150px;--ch:212px}}
/* thanh công cụ điện thoại: ô tốc độ thành nút icon để chừa chỗ nút 📝 Có gì mới */
#speed-btn{display:none}
@media (max-width:640px){select#speed{display:none}#speed-btn{display:inline-flex}}
@media (max-width:380px){.topbar{padding:6px 5px;gap:4px}.tools{gap:3px}.tools .chip{min-width:40px;padding:4px 5px}}
@media (max-width:640px){
  .awards{grid-template-columns:1fr 1fr;gap:5px}
  .aw{padding:5px 6px;gap:5px;align-items:flex-start}
  .aw-i{font-size:21px;width:24px}
  .aw-n{font-size:14px;line-height:1.1}.aw-t{font-size:12.5px}.aw-t small{font-size:12px}
  .win .big{font-size:48px}
  .stt{font-size:13px}.stt th,.stt td{padding:4px 2px}
}