/* 22 Ball BR – kit22.css: pele do kit de arte (original) */
@font-face{font-family:'Rubik22';src:url(rubik-700.woff2) format('woff2');font-weight:700 900;font-display:swap}
:root{--k22gold:#f5c542;--k22crim:#b3122a}
.kt{font-family:'Rubik22',system-ui,sans-serif;font-weight:900;color:#fff;-webkit-text-stroke:1.4px #1a0b06;paint-order:stroke fill;text-shadow:0 2px 0 #1a0b06,0 4px 7px rgba(0,0,0,.6)}
@keyframes k22drift{to{transform:scale(1.06) translateX(-1.5%)}}@keyframes k22pulse{50%{opacity:.5}}@keyframes k22dust{to{transform:translateY(-30px)}}
@keyframes k22shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}@keyframes k22float{50%{transform:translateY(-5px)}}
/* ===== LOBBY ===== */
html.k22home #lb22,html.k22home #dsTop,html.k22home #dsHome,html.k22home #lb2p29,html.k22home #opToast{visibility:hidden!important}
html body #menu.home>#k22L,html body #menu>#k22L{visibility:visible!important}
#k22L{position:fixed;inset:0;z-index:30;overflow:hidden;background:#0c0a0d;font-family:'Rubik22',system-ui,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}
#k22L button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#k22L .kbg{position:absolute;inset:-4%;background:url(../img/kit/lobby-bg.webp) center/cover;animation:k22drift 24s ease-in-out infinite alternate}
#k22L .kvig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(0,0,0,.75) 100%),linear-gradient(transparent 55%,rgba(8,4,6,.9));pointer-events:none}
#k22L .kglow{position:absolute;left:50%;top:58%;width:60%;height:40%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(80,255,140,.16),transparent 70%);animation:k22pulse 4s ease-in-out infinite}
#k22L .kdust{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,220,150,.5),transparent),radial-gradient(1.5px 1.5px at 70% 60%,rgba(255,220,150,.4),transparent),radial-gradient(2px 2px at 45% 80%,rgba(255,200,120,.35),transparent),radial-gradient(1px 1px at 85% 25%,rgba(255,255,255,.5),transparent);animation:k22dust 12s linear infinite}
#k22L .ktop{position:absolute;left:0;right:0;top:0;height:clamp(44px,14vh,64px);display:flex;align-items:center;gap:1.4vw;padding:0 1.4vw;border:solid transparent;border-width:0 34px 6px;border-image:url(../img/kit/barra-topo.webp) 40 60 fill/auto stretch;z-index:5}
.kav{position:relative;height:118%;aspect-ratio:1;margin-top:14%;background:url(../img/kit/moldura-avatar.webp) center/contain no-repeat!important;display:grid;place-items:center}
.kavi{width:62%;height:62%;border-radius:8px;display:grid;place-items:center;font-size:150%;overflow:hidden}
.klv{position:absolute;bottom:-4px;right:-6px;background:linear-gradient(#ffd96a,#c8881a);color:#3a1a00;border:2px solid #3a1a00;border-radius:7px;font:900 11px Rubik22,sans-serif;padding:0 4px}
.kwho{text-align:left}.kwho b{display:block;font-size:clamp(12px,3.6vh,17px)}.kxp{display:block;width:12vw;height:7px;border-radius:4px;background:#1a1012;border:1px solid #6a4a1a;overflow:hidden}.kxp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb020,#ffe27a)}
.ksp{flex:1}
.kpill{display:flex;align-items:center;gap:6px;height:clamp(28px,8.5vh,40px);border:solid transparent!important;border-width:8px 20px!important;border-image:url(../img/kit/pilula.webp) 40 60 fill/auto stretch!important;font-weight:900;font-size:clamp(12px,3.6vh,17px)}
.kpill img{height:150%;margin:-8px 0 -8px -26px;filter:drop-shadow(0 2px 2px #000)}
.kplus{width:20px;height:20px;border-radius:5px;background:url(../img/kit/ic-mais.webp) center/contain no-repeat;font-size:0;margin-right:-12px}
.kgear{height:70%;aspect-ratio:1;background:center/contain no-repeat!important;filter:drop-shadow(0 3px 2px #000)}
#k22L .klogo{position:absolute;left:50%;top:13.5vh;width:min(36vw,58vh);transform:translateX(-50%);z-index:3;filter:drop-shadow(0 8px 14px rgba(0,0,0,.8));animation:k22float 3.2s ease-in-out infinite}
#k22L .kmenu{position:absolute;left:50%;transform:translateX(-50%);top:calc(13.5vh + min(16vw,26vh));width:min(46vw,86vh);display:flex;flex-direction:column;gap:1.3vh;z-index:3}
.krow{display:flex;gap:1.2vw}.krow>.kbtn{flex:1}
.kbtn{position:relative;display:flex!important;align-items:center;justify-content:center;gap:.4em;border:solid transparent!important;border-width:clamp(10px,2.4vh,20px) clamp(12px,2.6vh,22px)!important;border-image:var(--ki) 60 64 fill/auto stretch!important;overflow:hidden;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55));transition:transform .08s,filter .08s;height:12vh;font-size:clamp(14px,4.6vh,24px)!important}
.kbtn::after{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%);animation:k22shine 4.5s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}
.kbtn img{height:115%;margin:-6% 0;filter:drop-shadow(0 2px 2px #000)}
.kbtn.big{height:17vh;flex-direction:column;gap:0;font-size:clamp(22px,7.4vh,40px)!important}.kbtn.big small{font-size:40%}
.kbtn.kpr,.kib.kpr,.kslot.kpr,.kpass.kpr,.kfeat.kpr,.kpill.kpr{transform:translateY(3px) scale(.96);filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)) brightness(.88)}
.kbtn.g,.k22 .k22g{--ki:url(../img/kit/btn-verde.webp)}.kbtn.o,.k22 .k22o{--ki:url(../img/kit/btn-ouro.webp)}.kbtn.r,.k22 .k22r{--ki:url(../img/kit/btn-vermelho.webp)}.kbtn.b,.k22 .k22b{--ki:url(../img/kit/btn-azul.webp)}.kbtn.c,.k22 .k22c{--ki:url(../img/kit/btn-teal.webp)}
.kb9{width:1.4em;height:1.4em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,#ffd23a 9% 100%);box-shadow:inset -3px -4px 6px rgba(0,0,0,.35),0 2px 3px #000;display:grid;place-items:center;font:900 .62em Rubik22,sans-serif;color:#222;position:relative;isolation:isolate}
.kb9::before{content:"";position:absolute;inset:24%;border-radius:50%;background:#fff;z-index:-1}
.kside{position:absolute;top:18vh;display:flex;flex-direction:column;gap:1.4vh;z-index:3}.kside.kL{left:2vw}.kside.kR{right:2vw}
.kib{position:relative;width:clamp(44px,13vh,66px);display:flex;flex-direction:column;align-items:center}
.kib i{display:block;width:100%;aspect-ratio:1.1;background:center/contain no-repeat;filter:drop-shadow(0 3px 2px #000);transition:transform .1s}.kib small{font-size:clamp(9px,2.8vh,13px);margin-top:-3px;white-space:nowrap}
.kib.kdot::after{content:"1";position:absolute;top:0;right:0;background:#e01b2a;border:2px solid #fff;border-radius:50%;width:17px;height:17px;font:900 10px/13px Rubik22,sans-serif;text-align:center;animation:k22pulse 1.2s infinite}
.kgift i{animation:k22float 2.6s ease-in-out infinite}
.kbot{position:absolute;left:0;right:0;bottom:0;height:17vh;display:flex;align-items:flex-end;justify-content:space-between;gap:1vw;padding:0 1.6vw 1.4vh;z-index:4;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.kpass{display:flex;align-items:center;gap:6px;width:30vw;height:9vh;padding:0 10px;border:solid transparent!important;border-width:6px 18px!important;border-image:url(../img/kit/barra-topo.webp) 40 60 fill/auto stretch!important;font-size:clamp(10px,3vh,14px)}
.kpass img{height:120%;margin-left:-10px}.kpb{flex:1;height:44%;border:solid transparent;border-width:4px 10px;border-image:url(../img/kit/trilho.webp) 20 40 fill/auto stretch;position:relative;overflow:hidden}
.kpb i{position:absolute;left:0;top:0;bottom:0;width:0;border:solid transparent;border-width:3px 8px;border-image:url(../img/kit/trilho-verde.webp) 20 40 fill/auto stretch}
.kchests{display:flex;gap:.8vw}
.kslot{position:relative;width:clamp(54px,15vh,78px);height:clamp(42px,12vh,62px);border:solid transparent!important;border-width:7px!important;border-image:url(../img/kit/slot-vazio.webp) 40 fill/auto stretch!important;display:grid;place-items:center}
.kslot.pronto{border-image-source:url(../img/kit/slot-brilho.webp)!important}.kslot img{position:absolute;width:96%;top:-38%;filter:drop-shadow(0 3px 3px #000)}.kslot.pronto img{animation:k22float 1.6s ease-in-out infinite}
.kslot small{position:absolute;bottom:-4px;font-size:10px;white-space:nowrap}.kslot.vazio small{position:static;opacity:.5;font-weight:800}
.kfeat{display:flex;align-items:center;gap:6px;height:12vh;animation:k22float 4s ease-in-out infinite}.kfeat img{height:100%;border-radius:5px;box-shadow:0 0 0 2px #f5c542,0 0 16px rgba(255,60,60,.6)}
.kfeat span{display:flex;flex-direction:column;text-align:left;font-size:clamp(10px,2.8vh,13px)}.kfeat small{font-size:10px;opacity:.85;font-weight:800}
.k22av{font-size:0!important;background:var(--k22av) center/cover no-repeat!important;border-radius:8px}
.kavi.k22av{display:block}
/* ===== PARTIDA ===== */
.k22 #msg{display:none!important}
/* v100: aviso único, pequeno, em cima ou embaixo da mesa (posição pelo kit22.js), some em ~1,4 s; vermelho só para falta */
#k22ban{font-family:'Rubik22',system-ui,sans-serif;font-weight:800;position:fixed;left:50%;top:8px;transform:translateX(-50%) translateY(-6px);opacity:0;z-index:60;pointer-events:none;padding:5px 14px;border-radius:999px;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 text-align:center;font-size:clamp(11px,3.2vh,14px);-webkit-text-stroke:0;text-shadow:0 1px 2px rgba(0,0,0,.7);background:rgba(16,22,30,.88);border:1.5px solid #f5c542;color:#ffe9a8;box-shadow:0 3px 10px rgba(0,0,0,.45);transition:opacity .14s,transform .14s}
#k22ban[data-pos=bot]{transform:translateX(-50%) translateY(6px)}
#k22ban.on{opacity:1;transform:translateX(-50%) translateY(0)}
#k22ban.falta{background:rgba(170,18,18,.92);border-color:#ff8a8a;color:#fff}
/* placar do topo: bola encaçapada acende e apaga; grupo definido brilha < 1 s; grupo do adversário apagado */
@keyframes k22hit{0%{opacity:1;transform:scale(1.7);box-shadow:0 0 0 2px #fff,0 0 10px 4px #ffe27a}60%{opacity:1;transform:scale(1.2)}100%{opacity:.22;transform:scale(1)}}
#hud .mb i.k22hit{animation:k22hit .6s ease-out}
@keyframes k22glow{0%{filter:brightness(1)}35%{filter:brightness(1.8) drop-shadow(0 0 5px #ffe27a)}100%{filter:brightness(1)}}
#hud .mb.k22glow{animation:k22glow .8s ease-out}
#hud .mb.k22dim{opacity:.55;transition:opacity .4s}
html body #hud .av.k22low::before{background:conic-gradient(#ff2a2a calc(var(--p)*1%),#ff2a2a33 0)!important;animation:k22blink .45s steps(2) infinite}
html body #hud .av.k22low{box-shadow:0 0 14px #ff2a2a}
@keyframes k22blink{50%{opacity:.25}}
#rail3 i.k22in{animation:k22roll .6s cubic-bezier(.3,.9,.4,1) both}
@keyframes k22roll{from{transform:translateY(-260px) rotate(-540deg);opacity:.2}to{transform:none;opacity:1}}
html body #powbar{background:url(../img/kit/forca-vazia.webp) center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;width:30px!important}
html body #powbar::before{content:"";position:absolute;inset:0;background:url(../img/kit/forca-cheia.webp) center/100% 100% no-repeat;clip-path:inset(0 0 calc((1 - var(--f,0))*100%) 0);transition:clip-path .05s}
html body #spin{background:url(../img/kit/bola-efeito.webp) center/contain no-repeat!important;border:0!important;box-shadow:0 3px 6px #0008!important;border-radius:50%}
html body #wheel{background:url(../img/kit/roda-fina.webp) center/contain no-repeat!important;border:0!important}
html body #btnMenu{font-size:0!important;background:url(../img/kit/btn-verde.webp) center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important}
html body #btnMenu::after{content:"";position:absolute;inset:26% 24%;background:linear-gradient(#fff 0 0) 0 0/100% 18%,linear-gradient(#fff 0 0) 0 50%/100% 18%,linear-gradient(#fff 0 0) 0 100%/100% 18%;background-repeat:no-repeat;filter:drop-shadow(0 1px 0 #1a3a06)}
html body #pot{border:solid transparent!important;border-width:5px 18px!important;border-image:url(../img/kit/pilula.webp) 40 60 fill/auto stretch!important;background:none!important;box-shadow:none!important}
html body #spinBig{background:url(../img/kit/bola-efeito.webp) center/contain no-repeat!important;box-shadow:0 18px 40px #000!important}
html body #spinBig i,html body #spin i{background:url(../img/kit/anel-efeito.webp) center/contain no-repeat!important;border:0!important}
/* ===== TELAS (pele genérica) ===== */
.k22 .scr,.k22 .ov{background:linear-gradient(rgba(8,4,6,.72),rgba(8,4,6,.82)),url(../img/kit/lobby-bg.webp) center/cover!important}
.k22 #vs.ov{background:radial-gradient(ellipse at 50% 45%,rgba(20,40,70,.55),rgba(3,8,18,.92) 70%),url(../img/kit/lobby-bg.webp) center/cover!important}
.k22 #result.ov{background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45)),url(../img/kit/vitoria-bg.webp) center/cover!important}
html body.k22b .scr .card,html body.k22b .scr .panel,html body.k22b .ov .card,html body.k22b #loja .card{background:none!important;box-shadow:none!important;border:solid transparent!important;border-width:12px!important;border-image:url(../img/kit/painel-modal.webp) 70 fill/auto stretch!important}
/* ===== MENU / ESCOLHA DE MESA ===== */
html.k22 body #menu{background:linear-gradient(rgba(8,4,6,.55),rgba(8,4,6,.75)),url(../img/kit/lobby-bg.webp) center/cover!important}
html.k22 body #dsTop{background:none!important;border:solid transparent!important;border-width:0 30px 6px!important;border-image:url(../img/kit/barra-topo.webp) 40 60 fill/auto stretch!important;box-shadow:none!important}
html.k22 body #dsTop .ds-pill{background:none!important;border:solid transparent!important;border-width:6px 16px!important;border-image:url(../img/kit/pilula.webp) 40 60 fill/auto stretch!important;box-shadow:none!important}
html.k22 body #dsTop .ti svg{display:none}html.k22 body #dsTop .ti::before{content:"";display:block;width:30px;height:24px;margin:0 auto;background:center/contain no-repeat;filter:drop-shadow(0 2px 2px #000)}
html.k22 body #dsTop .ti[data-a=clube]::before{background-image:url(../img/kit/ic-clube.webp)}html.k22 body #dsTop .ti[data-a=tacos]::before{background-image:url(../img/kit/ic-tacos.webp)}
html.k22 body #dsTop .ti[data-a=bonus]::before{background-image:url(../img/kit/ic-presente.webp)}html.k22 body #dsTop .ti[data-a=rank]::before{background-image:url(../img/kit/ic-ranking.webp)}html.k22 body #dsTop .ti[data-a=loja]::before{background-image:url(../img/kit/ic-loja.webp)}
html.k22 body #dsTabs .tb{background:none!important;border:solid transparent!important;border-width:6px 18px!important;border-image:url(../img/kit/aba-inativa.webp) 30 50 fill/auto stretch!important;box-shadow:none!important;color:#fff!important;font-family:Rubik22,sans-serif!important;font-weight:900!important;text-shadow:0 2px 0 #000}
html.k22 body #dsTabs .tb.on{border-image-source:url(../img/kit/aba-ativa.webp)!important;color:#3a1a00!important;text-shadow:0 1px 0 #ffe9a0}
html.k22 body #dsTabs .ds-back,html.k22 body .ds-back{background:url(../img/kit/ic-voltar.webp) center/contain no-repeat!important;border:0!important;box-shadow:none!important}
html.k22 body .ds-back svg,html.k22 body .ds-back::before{display:none!important}
html.k22 body #cities .city{background-color:transparent!important;border:solid transparent!important;border-width:14px!important;border-image:url(../img/kit/moldura-card.webp) 60 fill/auto stretch!important;box-shadow:0 10px 18px #000a!important;border-radius:0!important}
html.k22 body #cities .city canvas{border-radius:6px}
html.k22 body #cities .city h2{font-family:Rubik22,sans-serif!important;-webkit-text-stroke:1.2px #1a0b06;paint-order:stroke fill;text-shadow:0 2px 0 #1a0b06}
html.k22 body #cities .city .go,html.k22 body .k22btn,html.k22 body .scr .btn:not(.s),html.k22 body .ov .btn:not(.s),html.k22 body #loja .btn:not(.s){background:none!important;border:solid transparent!important;border-width:9px 14px!important;border-image:url(../img/kit/btn-verde.webp) 60 64 fill/auto stretch!important;box-shadow:none!important;filter:drop-shadow(0 3px 3px #0009);color:#fff!important;font-family:Rubik22,sans-serif!important;font-weight:900!important;text-shadow:0 2px 0 #143d06,0 0 2px #143d06}
html.k22 body #cities .city.lock .go{border-image-source:url(../img/kit/btn-ouro.webp)!important;text-shadow:0 2px 0 #5a3000}
html.k22 body .scr .btn.s,html.k22 body .ov .btn.s,html.k22 body #loja .btn.s{background:none!important;border:solid transparent!important;border-width:9px 14px!important;border-image:url(../img/kit/btn-azul.webp) 60 64 fill/auto stretch!important;box-shadow:none!important;color:#fff!important;font-weight:900!important}
html.k22 body .scr .btn:active,html.k22 body .ov .btn:active,html.k22 body #cities .go:active{transform:translateY(2px) scale(.97);filter:brightness(.88)}
html.k22 body #cities .ex20 .pz{background:none!important;border:solid transparent!important;border-width:6px 26px 10px!important;border-image:url(../img/kit/fita.webp) 50 120 fill/auto stretch!important;color:#fff!important;font-family:Rubik22,sans-serif!important;text-shadow:0 2px 0 #3a0006;box-shadow:none!important}
/* cabeçalhos das telas */
html.k22 body .scr .hd,html.k22 body .scr>header,html.k22 body .scr .top{background:none!important;border:solid transparent!important;border-width:0 30px 6px!important;border-image:url(../img/kit/barra-topo.webp) 40 60 fill/auto stretch!important;box-shadow:none!important}
html.k22 body .scr h1,html.k22 body .scr h2,html.k22 body .ov h1,html.k22 body .ov h2,html.k22 body .scr .ttl{font-family:Rubik22,sans-serif!important;font-weight:900!important;-webkit-text-stroke:1px #1a0b06;paint-order:stroke fill;text-shadow:0 2px 0 #1a0b06}
#k22L .ktop .kav{background:url(../img/kit/moldura-avatar.webp) center/contain no-repeat!important;height:122%;margin-top:16%}
#k22L .kside{top:23vh}
#k22L .kbot{padding-left:15vw}
#k22L .kpass{width:26vw}
html.k22home #tutBtn31{left:1.5vw!important;bottom:2vh!important;transform:scale(.85);transform-origin:left bottom}
#k22L .kslot.vazio small{color:#fff;font-size:10px}
/* ===== telas específicas ===== */
html.k22 body #cf30,html.k22 body #hub22,html.k22 body #perfil14,html.k22 body .c25,html.k22 body .ov25,html.k22 body .m23{background:linear-gradient(rgba(8,4,6,.7),rgba(8,4,6,.82)),url(../img/kit/lobby-bg.webp) center/cover!important}
html.k22 body #cf30 .hd,html.k22 body #hub22 .tb,html.k22 body #perfil14 .tb,html.k22 body .c25 .tp26{background:none!important;border:solid transparent!important;border-width:0 30px 6px!important;border-image:url(../img/kit/barra-topo.webp) 40 60 fill/auto stretch!important;box-shadow:none!important}
html.k22 body #cf30 .bk,html.k22 body .rbk,html.k22 body .bk26{font-size:0!important;background:url(../img/kit/ic-voltar.webp) center/contain no-repeat!important;border:0!important;box-shadow:none!important;min-width:34px;min-height:34px}
html.k22 body .rbk *,html.k22 body .bk26 *,html.k22 body #cf30 .bk *{display:none}
html.k22 body .x25,html.k22 body .xr23{font-size:0!important;background:url(../img/kit/ic-fechar.webp) center/contain no-repeat!important;border:0!important;box-shadow:none!important;width:34px!important;height:34px!important}
html.k22 body #cf30 .bd,html.k22 body .md25,html.k22 body .m23 .cd,html.k22 body #perfil14 .pfr,html.k22 body #perfil14 .pfl{background:none!important;box-shadow:none!important;border:solid transparent!important;border-width:16px!important;border-image:url(../img/kit/painel-modal.webp) 70 fill/auto stretch!important;border-radius:0!important}
html.k22 body .md25 h2,html.k22 body .m23 h2,html.k22 body #cf30 h2,html.k22 body #hub22 h1,html.k22 body .c25 h1{font-family:Rubik22,sans-serif!important;font-weight:900!important;color:#fff!important;-webkit-text-stroke:1px #1a0b06;paint-order:stroke fill;text-shadow:0 2px 0 #1a0b06}
html.k22 body .md25 h2{display:inline-block;padding:4px 40px 10px!important;border:solid transparent;border-width:6px 30px 12px;border-image:url(../img/kit/fita.webp) 50 120 fill/auto stretch;background:none!important}
html.k22 body #cf30 .tg{background:linear-gradient(#5a5458,#2a2629)!important;border:2px solid #111!important}html.k22 body #cf30 .tg.on{background:linear-gradient(#5ae03a,#21880f)!important;border-color:#0b3a04!important}
html.k22 body #cf30 .seg button.on{background:linear-gradient(#ffd96a,#c8881a)!important;color:#3a1a00!important}
html.k22 body .bt25,html.k22 body .btn24,html.k22 body .ad26{background:none!important;border:solid transparent!important;border-width:8px 12px!important;border-image:url(../img/kit/btn-azul.webp) 60 64 fill/auto stretch!important;box-shadow:none!important;color:#fff!important;font-weight:900!important}
html.k22 body .bt25.g,html.k22 body .btn24.b,html.k22 body .ad26.g{border-image-source:url(../img/kit/btn-verde.webp)!important}html.k22 body .bt25.n{border-image-source:url(../img/kit/btn-ouro.webp)!important}
html.k22 body .tile22{background:none!important;box-shadow:none!important;border:solid transparent!important;border-width:14px 16px!important;border-image:url(../img/kit/btn-azul.webp) 60 64 fill/auto stretch!important;filter:drop-shadow(0 6px 6px #0009)}
html.k22 body .tile22:nth-child(2){border-image-source:url(../img/kit/btn-teal.webp)!important}html.k22 body .tile22:nth-child(3){border-image-source:url(../img/kit/btn-vermelho.webp)!important}
html.k22 body .tile22:nth-child(4){border-image-source:url(../img/kit/btn-ouro.webp)!important}html.k22 body .tile22:nth-child(5){border-image-source:url(../img/kit/btn-verde.webp)!important}html.k22 body .tile22:nth-child(6){border-image:url(../img/kit/painel-modal.webp) 70 fill/auto stretch!important}
html.k22 body .tile22{font-family:Rubik22,sans-serif!important;text-shadow:0 2px 0 #000a}
html.k22 body .tb26 button{background:none!important;border:solid transparent!important;border-width:5px 14px!important;border-image:url(../img/kit/aba-inativa.webp) 30 50 fill/auto stretch!important;box-shadow:none!important;color:#fff!important}
html.k22 body .tb26 button.on{border-image-source:url(../img/kit/aba-ativa.webp)!important;color:#3a1a00!important}
html.k22 body .cd26{background-color:#14121a!important;border:solid transparent!important;border-width:10px!important;border-image:url(../img/kit/moldura-card.webp) 60 fill/auto stretch!important;box-shadow:none!important;border-radius:0!important}
html.k22 body #perfil14 .tab14{border:solid transparent!important;border-width:5px 14px!important;border-image:url(../img/kit/aba-inativa.webp) 30 50 fill/auto stretch!important;background:none!important}html.k22 body #perfil14 .tab14.on{border-image-source:url(../img/kit/aba-ativa.webp)!important;color:#3a1a00!important}
html.k22 body #perfil14 .ph .im{border:0!important;box-shadow:none!important;background-color:transparent!important;outline:none!important;position:relative}
html.k22 body #perfil14 .ph{isolation:isolate}html.k22 body #perfil14 .ph .im{transform:scale(.8)}html.k22 body #perfil14 .ph .im::before{content:"";position:absolute;inset:-22%;background:url(../img/kit/moldura-perfil.webp) center/contain no-repeat;pointer-events:none;z-index:-1}html.k22 body #perfil14 .ph .im::after{content:"";position:absolute;inset:0;background:inherit;background-color:transparent;border-radius:inherit;pointer-events:none;z-index:0}
/* VS */
/* v108: VS v3 tem fundo escuro próprio (v16.js) */html.k22 body #vs16>canvas{opacity:0!important}
html.k22 body #vs16 .sq16{background-color:transparent!important;border:0!important;box-shadow:none!important;position:relative}
html.k22 body #vs16 .sq16{isolation:isolate}html.k22 body #vs16 .sq16::before{content:"";position:absolute;inset:-14%;background:url(../img/kit/moldura-avatar.webp) center/contain no-repeat;pointer-events:none;z-index:-1}html.k22 body #vs16 .sq16 .im{transform:scale(.78);border-radius:6px}
html.k22 body #vs16 .vs{font-family:Rubik22,sans-serif!important;color:#ffd23a!important;-webkit-text-stroke:3px #3a0a00;paint-order:stroke fill}

/* resultado (pote de moedas) */
html.k22 body #bal17{background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.4)),url(../img/kit/vitoria-bg.webp) center/cover!important}
html.k22 body #bal17 .bd{background:none!important;box-shadow:none!important;border:solid transparent!important;border-width:14px 24px!important;border-image:url(../img/kit/moldura-oferta.webp) 70 90 fill/auto stretch!important}
html.k22 body #bal17 .dl{font-family:Rubik22,sans-serif!important;-webkit-text-stroke:1.4px #1a0b06;paint-order:stroke fill;text-shadow:0 3px 0 #1a0b06}
html.k22 body #bal17 .hint{background:none!important;border:solid transparent;border-width:8px 14px;border-image:url(../img/kit/btn-verde.webp) 60 64 fill/auto stretch;font-weight:900}
html.k22 body #bal17 .c16{background:url(../img/kit/moeda22.webp) center/contain no-repeat!important;box-shadow:none!important;border:0!important}
/* ---- Regras do Jogo ---- */
#rg22{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
#rg22.on{display:flex}
#rg22 .rgp{position:relative;width:min(92vw,820px);height:min(88vh,440px);border:22px solid transparent;border-image:url(/img/kit/painel-modal.webp) 60 fill/22px stretch;display:grid;grid-template-columns:170px 1fr;grid-template-rows:auto 1fr;gap:8px;color:#fff;font-family:Rubik,system-ui,sans-serif}
#rg22 h2{grid-column:1/3;margin:0;text-align:center;font-size:22px;color:#ffd84a;text-shadow:0 2px 0 #6a3a00}
#rg22 .rgx{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border:0;background:url(/img/kit/ic-fechar.webp) center/contain no-repeat}
#rg22 nav{display:flex;flex-direction:column;gap:2px;overflow:auto}
#rg22 nav button{display:flex;align-items:center;gap:6px;border:0;color:#fff;font:700 12px Rubik,sans-serif;padding:3px 8px;min-height:28px;border-radius:9px;background:url(/img/kit/aba-inativa.webp) center/100% 100%;text-align:left}
#rg22 nav button.on{background-image:url(/img/kit/aba-ativa.webp);color:#3a2300}
#rg22 nav img{width:22px;height:22px;object-fit:contain}
#rg22 .rgc{overflow:auto;background:rgba(0,0,0,.28);border-radius:12px;padding:10px 16px;font-size:14px;line-height:1.45}
#rg22 .rgc h3{margin:0 0 6px;color:#ffd84a}
#rg22 ul{margin:4px 0;padding-left:20px}#rg22 li.no::marker{content:'✖ ';color:#ff5a5a}
#rg22 .rgok{background:rgba(40,160,70,.3);border-radius:8px;padding:6px 10px}
#rg22 .rgill{display:flex;align-items:center;gap:6px;margin:4px 0 8px}
#rg22 .rgb{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 11px Rubik,sans-serif;color:#111;background:radial-gradient(circle at 50% 50%,#fff 0 34%,var(--c) 36%);box-shadow:inset -3px -4px 6px rgba(0,0,0,.4)}
#rg22 .rgat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}#rg22 .rgat img{width:40px;height:40px;object-fit:contain;display:block;margin:auto}#rg22 .rgat small{display:block;opacity:.8;font-size:11px}
#k22L .krg{font:800 22px Rubik,sans-serif;color:#fff;background:radial-gradient(#3d8cff,#1747a8);border-radius:50%;border:2px solid #ffd84a}
#tut31 .rgv{background:#ffb400;color:#3a2300;border:0;border-radius:8px;font-weight:800;padding:6px 10px}

/* QA/a11y: alvos antigos do lobby ficam fora (o lobby do kit os substitui) */
html body #menu .lb-hit:not(#k22L .lb-hit){display:none!important}
/* ---- Procurando adversário ---- */
#fila22{position:fixed;inset:0;z-index:2147482000;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 42%,#173052 0%,#0b1830 45%,#050b16 80%) #050b16;/* v135: fundo próprio opaco (o lobby não aparece por trás) */font-family:Rubik22,Rubik,sans-serif;color:#fff}
#fila22.on{display:flex;animation:f22in .25s ease-out}
@keyframes f22in{from{opacity:0}to{opacity:1}}
#fila22 .fp{text-align:center;width:min(94vw,820px)}
#fila22 h2{font-size:clamp(18px,5.4vh,30px);color:#ffd84a;text-shadow:0 3px 0 #6a3a00;margin:0 0 3vh;letter-spacing:.5px}
#fila22 h2 i{font-style:normal;animation:f22dot 1.2s infinite}#fila22 h2 i:nth-child(2){animation-delay:.2s}#fila22 h2 i:nth-child(3){animation-delay:.4s}
@keyframes f22dot{0%,60%,100%{opacity:.2}30%{opacity:1}}
#fila22.found h2{visibility:hidden}
#fila22 .fvs{display:flex;align-items:center;justify-content:center;gap:2.5vw}
#fila22 .fcard{width:min(30vw,230px);padding:2.2vh 1vw 2vh;display:flex;flex-direction:column;align-items:center;gap:.6vh;background:linear-gradient(180deg,rgba(25,45,80,.92),rgba(10,20,40,.95));border:2px solid rgba(245,197,66,.55);border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
#fila22 .fav,#fila22 .fspin{width:min(30vh,130px);height:min(30vh,130px);border:6px solid transparent;border-image:url(/img/kit/moldura-avatar.webp) 30/6px stretch;background:#0b1626 center/cover;border-radius:12px;box-shadow:0 0 18px rgba(0,0,0,.6);box-sizing:border-box}
#fila22 .fspin{position:relative;overflow:hidden}
#fila22 .fspin span{position:absolute;inset:0;background:center/cover}
#fila22 .fspin span.r{animation:f22roll .11s linear}
@keyframes f22roll{from{transform:translateY(-35%)}to{transform:translateY(0)}}
#fila22 .fspin:not(.lock)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 30%,transparent 70%,rgba(0,0,0,.55))}
#fila22 .fspin.lock{animation:f22lock .45s cubic-bezier(.3,1.6,.5,1);box-shadow:0 0 26px rgba(255,216,74,.85)}
@keyframes f22lock{0%{transform:scale(.85)}100%{transform:scale(1)}}
#fila22 b.fnm,#fila22 b.fon{font-size:clamp(14px,4.4vh,20px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.6vh}
#fila22 .flv{display:flex;align-items:center;gap:4px;font-size:clamp(11px,3.4vh,15px);color:#ffd84a}#fila22 .flv img{height:1.3em}
#fila22 .ffl,#fila22 .fol{font-size:clamp(10px,3vh,13px);opacity:.8;min-height:1.2em}
#fila22 .fop .fon{color:#bfe9ff}#fila22.found .fop .fon{color:#fff}#fila22.found .fop{border-color:#ffd84a}
#fila22 .fmid{display:flex;flex-direction:column;align-items:center;gap:.8vh;min-width:min(22vw,170px)}
#fila22 .fcity{font-size:clamp(14px,4.4vh,20px);color:#ffd84a;text-shadow:0 2px 0 #5a3000}
#fila22 .fpot{display:flex;flex-direction:column;align-items:center;padding:1.2vh 1.6vw;background:rgba(0,0,0,.45);border:1px solid rgba(245,197,66,.4);border-radius:14px}
#fila22 .fpot img{width:min(15vh,64px);animation:k22float 1.6s ease-in-out infinite;filter:drop-shadow(0 4px 4px #000)}
#fila22 .fpot b{font-size:clamp(16px,5.4vh,26px);color:#ffe27a}#fila22 .fpot small{font-size:11px;letter-spacing:1px;opacity:.75}
#fila22 .fen{font-size:clamp(11px,3.2vh,14px);opacity:.85}#fila22 .ft{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums}
#fila22 .fcan{margin:3vh auto 0;padding:1vh 26px;min-height:36px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(179,18,42,.85);color:#fff;font:700 clamp(12px,3.6vh,16px) Rubik22,Rubik,sans-serif;box-shadow:0 4px 10px rgba(0,0,0,.5)}
#fila22.found .fcan{visibility:hidden}
#k22L .kfeat{position:relative}#k22L .kfeat.locked img{filter:grayscale(.7) brightness(.6)}
#k22L .k22lock{position:absolute;left:0;top:0;height:100%;aspect-ratio:1.6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#k22L .k22lock img{height:55%;filter:drop-shadow(0 2px 3px #000)}#k22L .k22lock b{font:800 11px Rubik22,sans-serif;color:#ffd84a;text-shadow:0 1px 2px #000}
html body:has(#menu.home) .modes{display:none!important}
html body #lb22{display:none!important}
body.k22home .modes{display:none!important}

/* v130: perfil responsivo (telas baixas/estreitas em paisagem) */
html.k22 body #perfil14 .pf{grid-template-columns:minmax(170px,30%) minmax(0,1fr)}html.k22 body #perfil14 .pfr{min-width:0}html.k22 body #perfil14 .bars{grid-template-columns:repeat(3,minmax(0,1fr))}html.k22 body #perfil14 .bx{min-width:0}html.k22 body #perfil14 .bx>*{min-width:0}
@media (max-width:760px),(max-height:400px){html.k22 body #perfil14 .pf{gap:8px;padding:8px}html.k22 body #perfil14 .bars{gap:6px}html.k22 body #perfil14 .bx{padding:5px 6px}html.k22 body #perfil14 .pfr h4{font-size:12px;margin:6px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.k22 body #perfil14 .vip24{max-width:46vw;white-space:normal}}
html.k22 body #perfil14 .pfr h4{color:#f1dca0!important;text-shadow:0 1px 2px #000,0 0 4px #000}html.k22 body #perfil14 .pfr{padding-top:10px!important}

/* v135 tela única de fim: chuva de moedas só na vitória com moedas; Revanche online pelo botão único */
.k22 #result.ov:not(.chuva22){background:radial-gradient(ellipse at 50% 40%,#1b2a3d,#070b12 75%)!important}
#rev30{display:none!important}
#result .fim22 .row2{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap}
#result .fim22 .big{font-size:26px;margin:6px 0 4px}
/* v135: tela única de fim cabe na tela do celular deitado e cobre o HUD */
.k22 #result.ov{z-index:98000!important}
#result .fim22{max-height:94vh;overflow-y:auto;padding-top:10px!important;padding-bottom:10px!important}
#result .fim22 .pote canvas{width:auto!important;height:min(18vh,78px)!important;margin-top:0!important}
#result .fim22 .potBal{font-size:18px!important}
#result .fim22 h2,#result .fim22 .ttl{margin:0 0 2px!important}
#result .fim22 .row2 button{min-height:0!important;height:auto!important;padding:9px 16px!important;font-size:15px!important;line-height:1.1!important;white-space:nowrap!important;margin:0!important}
#result .fim22 .big{font-size:24px!important;margin:2px 0!important}
#result .fim22{height:auto!important;max-height:96vh!important}
#result .fim22 .xpbar{margin:4px auto 2px!important}
/* v155: fim de partida – card cresce até caber os 3 botões (Jogar de novo · Revanche · Menu sem corte) */
#result .fim22{width:max-content!important;min-width:min(420px,94vw)!important;max-width:94vw!important;box-sizing:border-box!important;overflow:visible!important}
#result .fim22 .row2{width:100%;box-sizing:border-box;padding:0 4px}
#result .fim22 .row2 button{flex:0 1 auto;min-width:0}
/* v156 (dono): mostrador do grupo – restantes acesas, encaçapadas esmaecidas; "Mesa aberta" antes do grupo; bola 22 quando é a vez dela */
#hud .mb i,.mb i{opacity:1!important}
#hud .mb i.cai,.mb i.cai{opacity:.25!important;filter:grayscale(.85) brightness(.8)!important;box-shadow:none!important}
.mb .ab22{font:600 10.5px/14px Inter,system-ui,sans-serif;color:#cfd8e3;letter-spacing:.3px;text-transform:uppercase;opacity:.85;white-space:nowrap;padding:0 4px}
.mb .ab22.v22{color:#ffd54a;opacity:1;text-transform:none;font-weight:700}
/* v156: altura curta (Safari com barras): HUD e botões do topo menores para a mesa crescer */
body.short22 #hud,body.short22 #btnMenu{zoom:var(--hz22,1)}
html,body{height:100dvh}