/* Projeto Tekken: visual comum da mesa local e da online.
   A mesa é desenhada em 1180×800 e escalada para caber na tela. */
:root{
  --tinta:#0c0a10; --grafite:#15121b; --aco:#1f1b27; --placa:#2a2433; --linha:#3b3447;
  --osso:#efe6d6; --osso2:#cfc6b8; --cinza:#958ea1;
  --sangue:#d3243c; --arcano:#3b7be6; --brasa:#f2a541; --ouro:#ffd65a; --meter:#55d4ff;
  --f-disp:"Teko","Oswald","Arial Narrow",sans-serif;
  --f-txt:"Barlow Semi Condensed","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  color-scheme:dark;
  --l:1; /* velocidade das animações: 1 = normal, maior = mais lento */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--tinta);color:var(--osso);font-family:var(--f-txt);font-size:15px;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
button:disabled{opacity:.35;cursor:default}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.btn{font:600 18px/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;background:var(--aco);border:1px solid var(--linha);padding:9px 16px 5px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.btn.hot{background:var(--brasa);border-color:var(--brasa);color:var(--tinta)}
.btn.p1{background:var(--sangue);border-color:var(--sangue)}
.btn.p2{background:var(--arcano);border-color:var(--arcano)}
.btn.danger{background:var(--sangue);border-color:var(--sangue);color:#fff}
@keyframes glowp{from{box-shadow:0 0 0 2px var(--ouro),0 0 8px rgba(255,214,90,.45)}to{box-shadow:0 0 0 3px var(--ouro),0 0 26px rgba(255,180,30,.95)}}
.glow{animation:glowp .65s ease-in-out infinite alternate!important;position:relative;z-index:3}

/* ---------- seleção ---------- */
#select{min-height:100%;padding-block:18px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(1100px 480px at 10% -12%,rgba(211,36,60,.24),transparent 62%),radial-gradient(1000px 480px at 100% 112%,rgba(59,123,230,.2),transparent 62%),repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.018) 22px 23px),var(--tinta)}
.wrap{max-width:1240px;margin:0 auto}
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand h1{margin:0;font:600 clamp(36px,5.4vw,58px)/.85 var(--f-disp);letter-spacing:.04em;text-transform:uppercase;padding-top:6px}
.brand h1 span{color:var(--sangue)}
.brand .ver{font:500 18px/1 var(--f-disp);letter-spacing:.22em;color:var(--brasa);text-transform:uppercase;border:1px solid currentColor;padding:6px 9px 2px}
.toplinks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.home{font:500 16px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);text-decoration:none;padding:8px 4px 4px}
.tabs{display:flex;gap:4px}
.tab{font:600 22px/1 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;padding:11px 20px 6px;background:var(--aco);border:0;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);color:var(--cinza)}
.tab[aria-selected="true"]{background:var(--osso);color:var(--tinta)}
.selgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;align-items:start}
.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{position:relative;aspect-ratio:4/5;border:0;padding:12px;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--cc) 72%,#000) 0%,color-mix(in srgb,var(--cc) 22%,var(--tinta)) 56%,var(--tinta) 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);transition:transform .15s,filter .15s}
.tile:hover{transform:translateY(-2px);filter:brightness(1.1)}
.tile .mono{position:absolute;top:-4px;right:8px;font:700 clamp(70px,8vw,112px)/1 var(--f-disp);color:rgba(255,255,255,.13)}
.tile b{font:600 clamp(24px,2.6vw,32px)/.9 var(--f-disp);text-transform:uppercase;letter-spacing:.03em;padding-top:4px}
.tile small{font:500 15px/1.1 var(--f-txt);color:var(--osso2)}
.tile em{font-style:normal;color:var(--ouro);font-size:13px;letter-spacing:.12em}
.tile[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--osso)}
.tile .tags{position:absolute;top:8px;left:8px;display:flex;gap:4px}
.tile .tags i{font:600 15px/1 var(--f-disp);font-style:normal;padding:4px 6px 1px;background:var(--sangue)}
.tile .tags i.p2{background:var(--arcano)}
.detail{background:linear-gradient(180deg,var(--grafite),var(--tinta));border:1px solid var(--linha);border-top:4px solid var(--cc);padding:18px 20px 20px;min-width:0}
.detail h2{margin:0;font:600 clamp(52px,7vw,82px)/.8 var(--f-disp);text-transform:uppercase;color:var(--cc);letter-spacing:.02em;padding-top:8px}
.meta{display:flex;flex-wrap:wrap;gap:4px 16px;font:500 19px/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--osso2);margin:8px 0 12px}
.meta b{color:var(--osso);font-weight:600}
.lema{font-size:18px;font-weight:500;margin:0 0 4px;max-width:62ch}
.como{color:var(--osso2);margin:0;max-width:62ch;line-height:1.35}
.blk{margin-top:16px}
.blk h3,.panel h5{margin:0 0 8px;font:600 18px/1 var(--f-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.cards{display:flex;flex-wrap:wrap;gap:8px}
.detail .card{--z:1.12}
#select .card,#ov .card{touch-action:auto;cursor:pointer}
.pt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.box{background:var(--aco);border-left:3px solid var(--x,var(--cc));padding:10px 12px 11px;min-width:0}
.box b{font:600 21px/1 var(--f-disp);letter-spacing:.04em;text-transform:uppercase}
.box small{color:var(--cinza);font:500 15px/1 var(--f-disp);letter-spacing:.1em;margin-left:6px;text-transform:uppercase}
.box p{margin:5px 0 0;font-size:15px;line-height:1.3}
.virachip{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--meter);border:1px solid color-mix(in srgb,var(--meter) 55%,transparent);padding:5px 8px 2px;margin:8px 0}
.virachip.on{background:var(--ouro);border-color:var(--ouro);color:#0c0a10;animation:glowp .65s ease-in-out infinite alternate}
.deckstrip{display:flex;flex-wrap:wrap;gap:4px}
.deckstrip.used .mc{filter:grayscale(.85) brightness(.6)}
.pickrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pickbar{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));margin-top:20px;background:linear-gradient(0deg,var(--tinta) 72%,rgba(12,10,16,0))}
.slot{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--aco);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);min-width:0;min-height:58px}
.slot .who{font:700 22px/1 var(--f-disp);padding:5px 8px 1px;background:var(--sangue);flex:none}
.slot.p2{flex-direction:row-reverse;text-align:right}
.slot.p2 .who{background:var(--arcano)}
.slot b{font:600 28px/1 var(--f-disp);text-transform:uppercase;color:var(--cc,var(--cinza));padding-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fight{font:700 36px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;padding:13px 38px 6px;background:var(--brasa);color:var(--tinta);border:0;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.resume{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--aco);border-left:3px solid var(--brasa);padding:10px 14px;margin-bottom:16px}
.resume span{font-size:16px}
.resume div{display:flex;gap:8px;flex-wrap:wrap}

/* regras */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:0 36px;align-items:start}
.rules .note{grid-column:1/-1}
.rcol{min-width:0}
.rules section{margin:0 0 24px}
.rules h3{font:600 28px/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--brasa);padding-top:4px}
.rules p,.rules li{line-height:1.45;max-width:66ch;font-size:16px}
.rules ol,.rules ul{padding-left:20px;margin:6px 0}
.rules li+li{margin-top:4px}
.k{font:600 17px/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--osso)}
.note{border:1px dashed var(--brasa);padding:10px 12px;color:var(--osso);margin:0 0 20px;break-inside:avoid;font-size:16px}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.legend i{font:600 15px/1 var(--f-disp);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px 2px;background:var(--sc);color:#0c0a10}
.tri{display:block;width:100%;max-width:340px;height:auto;margin:6px auto 4px}
.tri .tn{font:600 18px var(--f-disp);letter-spacing:.06em}
.tri .tl{font:500 15px var(--f-disp);letter-spacing:.14em;fill:var(--osso2);text-transform:uppercase}
.anat-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 22px;align-items:center;margin-top:10px}
.anat{position:relative;width:max-content;margin-left:14px}
.anat .card{--z:2;cursor:default}
.mk{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--ouro);color:#0c0a10;font:600 16px/26px var(--f-disp);text-align:center;box-shadow:0 0 0 2px var(--tinta);z-index:2}
.mk.l{left:-12px}.mk.r{right:-12px}
.legend-list{margin:0;padding-left:22px}
.legend-list li{font-size:15px;line-height:1.35}
.legend-list li::marker{font:600 16px var(--f-disp);color:var(--ouro)}

/* ---------- cartas ---------- */
.card{width:calc(84px*var(--z,1));height:calc(118px*var(--z,1));border-radius:calc(5px*var(--z,1));background:linear-gradient(180deg,#221d2b,#120f17);border:1px solid var(--linha);display:flex;flex-direction:column;overflow:hidden;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.55);cursor:grab;color:var(--osso)}
.card .ch{background:var(--sc);color:#0c0a10;display:flex;justify-content:space-between;align-items:center;height:calc(21px*var(--z,1));padding:0 calc(5px*var(--z,1));flex:none}
.card .ch b{font:600 calc(13.5px*var(--z,1))/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;padding-top:calc(3px*var(--z,1))}
.card .ch b.long{font-size:calc(11.6px*var(--z,1));letter-spacing:.01em}
.card .ch i{font:700 calc(26px*var(--z,1))/1 var(--f-disp);font-style:normal;padding-top:calc(5px*var(--z,1))}
.card .cn{font:600 calc(15.5px*var(--z,1))/.95 var(--f-disp);padding:calc(5px*var(--z,1)) calc(5px*var(--z,1)) 0;letter-spacing:.02em;flex:none}
.card .ct{font:500 calc(9.6px*var(--z,1))/1.18 var(--f-txt);padding:calc(2px*var(--z,1)) calc(5px*var(--z,1));color:#ddd5c8;flex:1;overflow:hidden}
.card .ct.sm{font-size:calc(8.6px*var(--z,1));line-height:1.13;padding-top:calc(1px*var(--z,1))}
.card .ct.xs{font-size:calc(7.9px*var(--z,1));line-height:1.1;padding-top:0}
.card .cb{font:600 calc(11px*var(--z,1))/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;padding:calc(4px*var(--z,1)) calc(5px*var(--z,1)) calc(2px*var(--z,1));border-top:1px solid var(--linha);color:var(--sc);flex:none}
.card.ult{background:linear-gradient(180deg,#2a1d3c,#130f1a)}
.card.ult.ready{box-shadow:0 0 0 2px var(--sc),0 0 18px var(--sc);animation:pulse 1.4s ease-in-out infinite}
/* v1.3 (T-031) · a Ultimate carregada: o selo dourado embaixo da carta e o contorno dourado */
.card.ult.carregada{box-shadow:0 0 0 2px var(--ouro),0 0 16px rgba(255,214,90,.5)}
.card .cb.carga{background:var(--ouro);color:#0c0a10;border-top-color:var(--ouro);font-weight:700;letter-spacing:.04em}
.cardart{background:
  radial-gradient(70% 36% at 50% 104%,#fff1b0 0%,#ffb231 18%,#ff5f1c 40%,rgba(211,36,60,.65) 60%,rgba(211,36,60,0) 78%),
  radial-gradient(34% 28% at 16% 106%,#ff8a2a 0%,rgba(211,36,60,.45) 55%,transparent 75%),
  radial-gradient(34% 28% at 86% 106%,#ff8a2a 0%,rgba(211,36,60,.45) 55%,transparent 75%),
  repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,.035) 7px 8px),
  linear-gradient(180deg,#1b1422,#0d0a10 72%)}
.card.back{align-items:center;justify-content:center;border-color:color-mix(in srgb,var(--cc) 70%,#000);
  box-shadow:inset 0 0 0 calc(3px*var(--z,1)) #0d0a10,inset 0 0 0 calc(4px*var(--z,1)) color-mix(in srgb,var(--cc) 80%,transparent),0 2px 8px rgba(0,0,0,.55)}
.card.back span,.pile .pt1{font:600 calc(11px*var(--z,1))/1 var(--f-disp);letter-spacing:.34em;color:var(--osso2);padding-left:.34em;margin-top:calc(-16px*var(--z,1))}
.card.back b,.pile .pt2{font:700 calc(23px*var(--z,1))/.85 var(--f-disp);letter-spacing:.04em;color:#ff4458;text-shadow:0 0 10px rgba(255,90,30,.7),0 1px 0 #000;padding-top:calc(4px*var(--z,1))}
.card.justrev{animation:rev calc(.45s*var(--l,1)) ease-out}
@keyframes rev{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
@keyframes pulse{50%{filter:brightness(1.25)}}

/* golpes de combo */
.mc{width:66px;height:56px;flex:none;position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:25px 1fr;padding:0;text-align:left;
  background:linear-gradient(160deg,var(--cc),color-mix(in srgb,var(--cc) 45%,#000));border:1px solid rgba(0,0,0,.45);color:#0c0a10}
.mc .mh{font:700 24px/1 var(--f-disp);padding:5px 0 0 5px}
.mc .md{display:flex;flex-direction:column;align-items:center;background:rgba(12,10,16,.85);color:var(--osso);padding:2px 4px 0;margin:2px 2px 0 0;height:22px;line-height:1}
.mc .md small{font:600 8px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase}
.mc .md b{font:600 15px/1 var(--f-disp)}
.mc .mn{grid-column:1/-1;font:700 10.5px/1.02 var(--f-txt);padding:0 4px 3px;align-self:end;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mc .mt{position:absolute;top:26px;right:4px;font-size:11px;line-height:1;color:#0c0a10}
.mc.efx{outline:1px dashed rgba(255,226,120,.95);outline-offset:-4px}
.mc.miss{background:linear-gradient(160deg,#5b5560,#26222c);color:#a59fae}
.mc.miss::before{content:"";position:absolute;left:-6px;right:-6px;top:27px;height:3px;background:#ff4d5e;box-shadow:0 0 8px #ff4d5e;transform:rotate(-30deg);z-index:1}
.mc.miss::after{content:"DROP";position:absolute;left:50%;top:21px;transform:translateX(-50%) rotate(-12deg);font:700 14px/1 var(--f-disp);letter-spacing:.06em;color:#fff;background:#d3243c;padding:2px 5px 0;z-index:2}
.mc.torn{box-shadow:0 0 0 2px var(--ouro),0 0 12px var(--ouro)}
.mc.enter{animation:mcin calc(.35s*var(--l,1)) ease-out calc(var(--ed,0s)*var(--l,1)) both}
@keyframes mcin{from{transform:translateY(-14px) scale(1.25);opacity:0}}
.cbig{width:230px;height:322px;position:relative;background:linear-gradient(160deg,var(--cc),color-mix(in srgb,var(--cc) 35%,#000) 75%);color:#0c0a10;display:flex;flex-direction:column;padding:14px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);flex:none}
.cbh span,.cbd span{font:600 16px/1 var(--f-disp);letter-spacing:.2em}
.cbh b{display:block;font:700 92px/.8 var(--f-disp);padding-top:10px}
.cbn{font:600 34px/.9 var(--f-disp);text-transform:uppercase;margin-top:8px;padding-top:4px}
.cbt{font:600 16px/1.25 var(--f-txt);margin-top:8px;flex:1}
.cbt.has{background:rgba(255,240,180,.35);padding:6px 8px;border:1px dashed rgba(12,10,16,.55);align-self:flex-start;flex:0 1 auto;margin-bottom:auto}
.cbd{align-self:flex-end;background:rgba(12,10,16,.85);color:var(--osso);padding:8px 14px 4px;text-align:right}
.cbd b{display:block;font:700 46px/.8 var(--f-disp);padding-top:6px}
.cbig small.who{position:absolute;left:16px;bottom:12px;font:600 15px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.cbig.cmd{width:168px;height:236px;padding:10px 12px;border-radius:9px}
.cbig.cmd .cbh b{font-size:66px;padding-top:7px}
.cbig.cmd .cbn{font-size:25px}
.cbig.cmd .cbt{font-size:12.5px}
.cbig.cmd .cbd{padding:6px 10px 3px}
.cbig.cmd .cbd b{font-size:32px}
.cbig.cmd small.who{font-size:12px;left:12px;bottom:9px}

/* ---------- mesa ---------- */
#game{position:fixed;inset:0;overflow:hidden;touch-action:none;
  background:radial-gradient(1200px 380px at 50% 0%,rgba(59,123,230,.16),transparent 70%),radial-gradient(1200px 380px at 50% 100%,rgba(211,36,60,.16),transparent 70%),repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.016) 26px 27px),var(--tinta)}
#table{position:absolute;top:0;left:0;width:1180px;height:800px;transform-origin:0 0;display:grid;grid-template-rows:374px 52px 374px}
.half{position:relative;display:grid;grid-template-rows:52px 134px minmax(0,1fr);gap:7px;padding:8px 10px 9px;min-height:0;
  background:radial-gradient(700px 200px at 50% 125%,color-mix(in srgb,var(--side) 30%,transparent),transparent 72%)}
.half.p1{--side:var(--sangue)}
.half.p2{--side:var(--arcano);transform:rotate(180deg)}
.hud{display:grid;grid-template-columns:262px minmax(0,1fr) 270px;gap:16px;align-items:center}
.tagbox{display:flex;align-items:center;gap:9px;min-width:0}
.tagbox .pl{font:700 21px/1 var(--f-disp);padding:6px 7px 1px;background:var(--side);flex:none}
.tagbox .nm{min-width:0}
.tagbox b{display:block;font:600 31px/.85 var(--f-disp);text-transform:uppercase;color:var(--cc);white-space:nowrap;padding-top:4px}
.tagbox small{display:block;font:500 13px/1 var(--f-disp);letter-spacing:.12em;color:var(--cinza);text-transform:uppercase;white-space:nowrap}
.wins{display:flex;gap:7px;margin-left:auto;padding-right:4px}
.win{width:16px;height:16px;transform:rotate(45deg);border:2px solid var(--ouro);background:transparent;padding:0}
.win.on{background:var(--ouro);box-shadow:0 0 10px var(--ouro)}
.hpwrap{display:flex;align-items:center;gap:10px;min-width:0}
.hpbar{position:relative;flex:1;height:26px;background:#2a1016;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);overflow:hidden}
.hpbar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--max) - 1px),rgba(0,0,0,.35) calc(100%/var(--max) - 1px) calc(100%/var(--max)))}
.hpbar .chip{position:absolute;inset:0 auto 0 0;background:#f4eee4;transition:width calc(.55s*var(--l,1)) ease-out calc(.35s*var(--l,1))}
.hpbar .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#fff4ae,#ffcf3a 45%,#ee9020);transition:width .15s}
.hpbar.low .fill{background:linear-gradient(180deg,#ff9c9c,#e5383b);animation:pulse 1s infinite}
.hpctl{display:flex;align-items:center;gap:4px;flex:none}
.hpctl output{font:600 36px/1 var(--f-disp);min-width:78px;text-align:center;font-variant-numeric:tabular-nums;padding-top:5px}
.hpctl output small{font-size:19px;color:var(--cinza)}
.sbtn{height:32px;min-width:40px;font:600 19px/1 var(--f-disp);background:var(--aco);border:1px solid var(--linha);padding:5px 6px 0}
.meter{display:flex;align-items:center;gap:5px;justify-content:flex-end;padding-bottom:8px}
.meter .ml{font:600 14px/1 var(--f-disp);letter-spacing:.14em;color:var(--meter);margin-right:4px;padding-top:2px;text-transform:uppercase}
.seg{position:relative;width:28px;height:22px;border:1px solid color-mix(in srgb,var(--meter) 60%,transparent);background:rgba(85,212,255,.06);transform:skewX(-18deg);padding:0}
.seg.on{background:linear-gradient(180deg,#c9f3ff,var(--meter));box-shadow:0 0 10px rgba(85,212,255,.55)}
.seg[data-m]::after{content:attr(data-m);position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%) skewX(18deg);font:600 10px/1 var(--f-disp);letter-spacing:.06em;color:var(--cinza);white-space:nowrap}
.seg.on[data-m]::after{color:var(--ouro)}
/* v1.3 · PAS ✓: a passiva já virou (a marca fica dourada mesmo com o segmento apagado) */
.seg.virou[data-m]::after{color:var(--ouro)}
.meter output{font:600 32px/1 var(--f-disp);width:22px;text-align:center;padding-top:5px}
/* momentum que subiu sozinho no counter: o segmento novo pula e brilha, e a barra inteira acende */
.seg.up{z-index:2;animation:segup calc(.7s*var(--l,1)) ease-out 3}
@keyframes segup{0%{transform:skewX(-18deg) scale(1)}40%{transform:skewX(-18deg) scale(1.4);background:linear-gradient(180deg,#fff,var(--ouro));box-shadow:0 0 16px var(--ouro),0 0 34px rgba(85,212,255,.95)}100%{transform:skewX(-18deg) scale(1)}}
.meter.glow{border-radius:6px}
.meter.glow output{color:var(--ouro);text-shadow:0 0 14px var(--ouro)}

.mid{display:grid;grid-template-columns:220px 190px 168px minmax(0,1fr);gap:8px;min-height:0}
.pass{background:var(--aco);border:0;border-left:3px solid var(--cc);padding:8px 10px;text-align:left;display:flex;flex-direction:column;gap:3px;overflow:hidden;min-width:0}
.pass small{font:600 12px/1 var(--f-disp);letter-spacing:.16em;color:var(--cinza);text-transform:uppercase}
.pass b{font:600 24px/.9 var(--f-disp);text-transform:uppercase;padding-top:3px}
.pass p{margin:0;font-size:12.5px;line-height:1.2;color:var(--osso2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pass .vira{margin-top:auto;align-self:flex-start;font:600 13px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--meter);border:1px solid color-mix(in srgb,var(--meter) 55%,transparent);padding:4px 7px 1px}
.pass .vira.on{background:var(--ouro);border-color:var(--ouro);color:#0c0a10;animation:glowp .65s ease-in-out infinite alternate}
.pass.verso{background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 26%,var(--aco)),var(--aco))}
.deck{display:grid;grid-template-columns:66px minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
.pile{grid-row:1/3;border:1px solid color-mix(in srgb,var(--cc) 70%,#000);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;position:relative;
  box-shadow:inset 0 0 0 3px #0d0a10,inset 0 0 0 4px color-mix(in srgb,var(--cc) 80%,transparent),3px 3px 0 rgba(0,0,0,.5),6px 6px 0 color-mix(in srgb,var(--cc) 30%,#000)}
.pile .pt1{font-size:9px;margin-top:-30px}
.pile .pt2{font-size:18px}
.pile .pc{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font:700 26px/1 var(--f-disp);background:rgba(12,10,16,.85);padding:4px 8px 0;min-width:40px;text-align:center}
.pile .pc small{display:block;font:500 9px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--osso2);padding-bottom:3px}
.pile.empty{opacity:.45}
.go{background:var(--cc);color:#0c0a10;border:0;font:700 22px/1 var(--f-disp);letter-spacing:.05em;text-transform:uppercase;padding-top:5px;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.end{background:var(--aco);border:1px solid var(--linha);font:600 19px/1 var(--f-disp);letter-spacing:.04em;text-transform:uppercase;padding-top:4px}
.end:not(:disabled){background:var(--osso);color:#0c0a10;border-color:var(--osso)}

.heat{--h:0;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#0f0b10,#1d100b);border:1px solid #3d2620;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto auto;padding:6px 6px 4px}
.flames{position:absolute;left:0;right:0;bottom:0;height:calc(8% + var(--h) * 100%);opacity:calc(.15 + var(--h) * .85);filter:blur(5px);z-index:-1;transition:height .45s ease-out,opacity .45s}
.flames i{position:absolute;bottom:-12%;width:46%;height:100%;border-radius:50% 50% 38% 38%/62% 62% 38% 38%;transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 92%,#fff7c8 0%,#ffc53a 24%,#ff6a1a 52%,rgba(211,36,60,.5) 68%,rgba(211,36,60,0) 78%);animation:flick 1s ease-in-out infinite alternate}
.flames i:nth-child(1){left:-6%;animation-duration:.8s}
.flames i:nth-child(2){left:22%;width:56%;height:118%;animation-duration:1.1s;animation-delay:-.3s}
.flames i:nth-child(3){left:58%;animation-duration:.9s;animation-delay:-.6s}
.flames i:nth-child(4){left:34%;width:32%;height:84%;animation-duration:.7s;animation-delay:-.2s;background:radial-gradient(ellipse at 50% 92%,#fff 0%,#ffe27a 30%,rgba(255,170,40,0) 70%)}
.embers{position:absolute;inset:0;z-index:-1;opacity:calc(var(--h) * 1.2 - .3)}
.embers b{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:#ffd36b;box-shadow:0 0 6px #ff9d2e;animation:rise 1.6s linear infinite}
.embers b:nth-child(1){left:18%;animation-delay:-.2s}.embers b:nth-child(2){left:42%;animation-delay:-.9s}.embers b:nth-child(3){left:66%;animation-delay:-.5s}.embers b:nth-child(4){left:82%;animation-delay:-1.3s}.embers b:nth-child(5){left:30%;animation-delay:-1.1s}.embers b:nth-child(6){left:55%;animation-delay:-.7s}.embers b:nth-child(7){left:8%;animation-delay:-1.5s}
@keyframes flick{0%{transform:scaleY(.82) scaleX(1.04) skewX(-4deg)}50%{transform:scaleY(1.06) scaleX(.92) skewX(3deg)}100%{transform:scaleY(.9) scaleX(1.06) skewX(-2deg)}}
@keyframes rise{0%{transform:translateY(0);opacity:1}100%{transform:translate(8px,-110px);opacity:0}}
.heat.idle .flames,.heat.idle .embers{opacity:0}
.heat.drop{border-color:var(--sangue)}
.heat.drop .hv b{color:#ff5a68;text-shadow:none}
.heat.shake{animation:shake calc(.4s*var(--l,1))}
.heat.charging .flames{transition:none;filter:blur(4px) saturate(1.35)}
.heat.charging .embers{opacity:1}
.heat.charging .embers b{animation-duration:.8s}
.heat.flare{border-color:var(--ouro);box-shadow:0 0 0 2px var(--ouro),0 0 44px rgba(255,170,30,.95),inset 0 0 36px rgba(255,200,80,.55);z-index:4}
.heat.flare .flames{height:160%!important;opacity:1!important;filter:blur(3px) brightness(1.3)}
.heat.flare .hv b{color:#fff7d0;text-shadow:0 0 18px #ffb300,0 0 42px #ff6a00;transform:scale(1.18)}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.hv,.dv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
.hv small,.dv small{font:600 12px/1 var(--f-disp);letter-spacing:.2em;color:var(--osso2);text-transform:uppercase}
.hv b{font:700 50px/.8 var(--f-disp);font-variant-numeric:tabular-nums;padding-top:8px;color:#fff;text-shadow:0 0 calc(var(--h) * 22px) #ffae38,0 0 calc(var(--h) * 6px) #fff2c0;transition:transform .3s}
.dv b{font:700 36px/.8 var(--f-disp);color:var(--ouro);padding-top:8px;font-variant-numeric:tabular-nums}
.adj{display:flex;gap:2px}
.adj button{width:26px;height:20px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);font:600 17px/1 var(--f-disp);padding:3px 0 0}
.hs{grid-column:1/-1;text-align:center;font:600 15px/1 var(--f-disp);letter-spacing:.2em;color:var(--brasa);padding-top:3px;text-transform:uppercase}
.hb{grid-column:1/-1;text-align:center;font:600 12px/1.1 var(--f-disp);letter-spacing:.08em;color:var(--ouro);text-transform:uppercase;min-height:12px}
.sq{font:600 12px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);padding:4px 5px 1px;margin-top:2px}
.sq.on{background:var(--brasa);color:#0c0a10;border-color:var(--brasa)}

.rows{touch-action:pan-y;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding-right:2px;scrollbar-width:thin}
.rows.empty{align-items:center;justify-content:center;color:var(--cinza);font-size:14px;border:1px dashed var(--linha);text-align:center;padding:8px 14px}
.row{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.03);padding:4px 6px;border-left:3px solid var(--linha);flex:none}
.row.open{border-left-color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,transparent)}
.row.dropped{border-left-color:var(--sangue)}
.rh{display:flex;flex-direction:column;align-items:flex-start;width:62px;flex:none;gap:2px}
.rh b{font:600 18px/.9 var(--f-disp);padding-top:3px;text-transform:uppercase;letter-spacing:.03em}
.rh span{font:600 15px/1 var(--f-disp);color:var(--ouro)}
.rh em{font:500 12px/1 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);font-style:normal}
.row.dropped .rh em{color:#ff6b6b}
.rc{display:flex;gap:4px;overflow-x:auto;min-width:0;scrollbar-width:none;padding:3px 2px}

.zones{display:grid;grid-template-columns:minmax(0,1fr) 100px 182px 124px 100px;gap:8px;min-height:0}
.zone{background:rgba(255,255,255,.025);border:1px solid var(--linha);display:flex;flex-direction:column;min-width:0;min-height:0;transition:background .12s,border-color .12s}
.zone.target{border-style:dashed;border-color:rgba(255,214,90,.45)}
.zone.over{border:1px solid var(--ouro);background:rgba(255,214,90,.1)}
.zl{display:flex;align-items:center;gap:6px;font:600 13px/1 var(--f-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);padding:6px 8px 1px;height:22px}
.zl span{color:var(--osso)}
.zl button{margin-left:auto;font:600 12px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;background:var(--aco);border:1px solid var(--linha);padding:3px 5px 0;height:18px}
.zc{flex:1;display:flex;align-items:center;gap:6px;padding:2px 8px 6px;min-width:0}
.z-mao.tight .zc .card+.card{margin-left:-14px}
.z-descarte .zc .card+.card{margin-left:-68px}
.z-exauridas .zc .card+.card{margin-left:-72px}
.z-jogada .zc,.z-armazenada .zc{justify-content:center}
.ghost{position:fixed;z-index:80;pointer-events:none;margin:0!important;box-shadow:0 14px 34px rgba(0,0,0,.7)}
.lifting{opacity:.25}

.fx{position:absolute;inset:0;pointer-events:none;display:grid;place-items:end center;padding-bottom:64px;z-index:30;overflow:hidden}
.fx>b{position:relative;z-index:35;grid-area:1/1;font:700 104px/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;animation:boom calc(1s*var(--l,1)) cubic-bezier(.2,.9,.3,1) forwards;-webkit-text-stroke:2px rgba(0,0,0,.5)}
.fx>b.torn{color:var(--ouro);text-shadow:0 0 34px #ffb300,0 0 80px #ff6a00;font-size:124px;animation-duration:calc(1.9s*var(--l,1))}
.fx>b.drop{color:#ff4d5e;text-shadow:0 0 26px var(--sangue),0 0 60px rgba(211,36,60,.7);justify-self:start;margin-left:40px;font-size:120px;animation-duration:calc(1.5s*var(--l,1))}
.fx>b.end{color:var(--osso);text-shadow:0 0 22px rgba(255,255,255,.45);font-size:92px;animation-duration:calc(1.3s*var(--l,1))}
@keyframes boom{0%{transform:scale(2.3) skewX(-12deg);opacity:0}16%{transform:scale(1) skewX(-12deg);opacity:1}72%{opacity:1}100%{transform:scale(1.06) skewX(-12deg) translateX(34px);opacity:0}}
.burst{grid-area:1/1;position:absolute;inset:0;background:radial-gradient(60% 70% at 45% 45%,rgba(255,210,90,.55),rgba(255,110,20,.25) 40%,transparent 70%);animation:burst calc(1.4s*var(--l,1)) ease-out forwards}
@keyframes burst{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.strike{position:absolute;right:392px;top:262px;--i:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:8px 22px 7px 44px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cc) 88%,#000) 24%);animation:strk calc(1.4s*var(--l,1)) ease-out both;white-space:nowrap;z-index:31}
.strike b{font:700 calc(40px + var(--i)*24px)/.86 var(--f-disp);text-transform:uppercase;color:#fff;padding-top:6px;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 calc(var(--i)*26px) rgba(255,170,40,calc(var(--i)*.9))}
.strike span{font:600 15px/1 var(--f-disp);letter-spacing:.16em;text-transform:uppercase;color:#0c0a10;background:rgba(255,255,255,.88);padding:3px 8px 0}
.strike.miss{animation-duration:calc(2.4s*var(--l,1))}
.strike.miss b{animation:strikeout .01s calc(1.35s*var(--l,1)) forwards}
@keyframes strikeout{to{color:#ff9aa5;text-decoration:line-through;text-decoration-color:#ff3b4f}}
@keyframes strk{0%{opacity:0;transform:translate(46px,-50%) skewX(-10deg)}12%{opacity:1;transform:translate(0,-50%) skewX(-10deg)}80%{opacity:1;transform:translate(-6px,-50%) skewX(-10deg)}100%{opacity:0;transform:translate(-34px,-50%) skewX(-10deg)}}
.draw{position:absolute;left:870px;top:262px;width:168px;height:236px;margin:-118px 0 0 -84px;z-index:31;--i:0;animation:dIn calc(1.45s*var(--l,1)) cubic-bezier(.2,.9,.3,1) both}
.draw .cbig{box-shadow:0 0 0 2px rgba(255,255,255,.3),0 0 calc(10px + var(--i)*48px) calc(var(--i)*12px) rgba(255,150,40,calc(.2 + var(--i)*.8)),0 14px 30px rgba(0,0,0,.6)}
.draw.hot{animation:dIn calc(1.45s*var(--l,1)) cubic-bezier(.2,.9,.3,1) both,jit calc(.08s*var(--l,1)) linear calc(.25s*var(--l,1)) 6}
.draw.istorn{animation:dInT calc(2.6s*var(--l,1)) cubic-bezier(.2,.9,.3,1) both,jit calc(.07s*var(--l,1)) linear calc(1.2s*var(--l,1)) 8}
.draw.istorn .cbig{box-shadow:0 0 0 3px var(--ouro),0 0 60px 14px rgba(255,190,40,.95),0 14px 30px rgba(0,0,0,.6)}
.draw.isdrop{animation:dInD calc(2.9s*var(--l,1)) cubic-bezier(.2,.9,.3,1) both,jit calc(.07s*var(--l,1)) linear calc(.7s*var(--l,1)) 9}
.draw .dc{position:absolute;inset:0}
.draw .dc1{clip-path:polygon(0 0,100% 0,100% 38%,0 62%);animation:fall1 calc(.9s*var(--l,1)) calc(1.35s*var(--l,1)) cubic-bezier(.5,0,.75,.7) forwards}
.draw .dc2{clip-path:polygon(0 62%,100% 38%,100% 100%,0 100%);animation:fall2 calc(.9s*var(--l,1)) calc(1.35s*var(--l,1)) cubic-bezier(.5,0,.75,.7) forwards}
.draw .slash{position:absolute;left:-22%;width:144%;top:50%;height:6px;margin-top:-3px;background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);box-shadow:0 0 16px #fff,0 0 34px #ff3b4f;transform:rotate(-18.6deg);clip-path:inset(0 100% 0 0);animation:slash calc(.18s*var(--l,1)) calc(1.15s*var(--l,1)) ease-in forwards,fadeo calc(.5s*var(--l,1)) calc(1.6s*var(--l,1)) forwards;z-index:3}
.draw .stamp{position:absolute;left:50%;top:50%;z-index:4;font:700 54px/1 var(--f-disp);letter-spacing:.06em;color:#ff3b4f;border:4px solid #ff3b4f;padding:8px 14px 0;background:rgba(12,10,16,.82);text-shadow:0 0 18px rgba(255,59,79,.85);box-shadow:0 0 24px rgba(255,59,79,.6);opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.6);animation:stampIn calc(.32s*var(--l,1)) calc(1.42s*var(--l,1)) cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes dIn{0%{opacity:0;filter:blur(6px);transform:scale(calc(1.5 + var(--i)*.7)) rotate(-12deg)}16%{opacity:1;filter:blur(0);transform:scale(.84) rotate(-4deg)}22%{transform:scale(.88) rotate(-4deg)}72%{opacity:1;transform:scale(.84) rotate(-4deg)}100%{opacity:0;transform:translate(-90px,-170px) scale(.3) rotate(0)}}
@keyframes dInT{0%{opacity:0;filter:blur(6px);transform:scale(2.3) rotate(-12deg)}10%{opacity:1;filter:blur(0);transform:scale(.84) rotate(-4deg)}52%{transform:scale(.84) rotate(-4deg)}60%{transform:scale(1.02) rotate(0)}86%{opacity:1;transform:scale(.96) rotate(0)}100%{opacity:0;transform:translate(-90px,-170px) scale(.3)}}
@keyframes dInD{0%{opacity:0;filter:blur(6px);transform:scale(2.2) rotate(-12deg)}10%{opacity:1;filter:blur(0);transform:scale(.84) rotate(-4deg)}88%{opacity:1;transform:scale(.84) rotate(-4deg)}100%{opacity:0;transform:translateY(30px) scale(.8) rotate(-4deg)}}
@keyframes jit{0%,100%{translate:0 0}25%{translate:-3px 2px}50%{translate:3px -2px}75%{translate:-2px -3px}}
@keyframes fall1{to{transform:translate(-30px,-46px) rotate(-16deg);filter:grayscale(1) brightness(.45);opacity:.8}}
@keyframes fall2{to{transform:translate(26px,64px) rotate(12deg);filter:grayscale(1) brightness(.45);opacity:.8}}
@keyframes slash{to{clip-path:inset(0 0 0 0)}}
@keyframes fadeo{to{opacity:0}}
@keyframes stampIn{to{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
.redflash{position:absolute;inset:0;background:radial-gradient(70% 80% at 60% 55%,rgba(211,36,60,.55),rgba(211,36,60,.18) 48%,transparent 75%);animation:burst calc(1.3s*var(--l,1)) ease-out forwards}
.half.quake{animation:quake calc(.45s*var(--l,1)) linear}
.half.quake.lite{animation:quakeL calc(.3s*var(--l,1)) linear}
@keyframes quake{0%,100%{translate:0 0}15%{translate:-9px 4px}30%{translate:8px -5px}45%{translate:-6px -3px}60%{translate:5px 4px}75%{translate:-3px 2px}}
@keyframes quakeL{0%,100%{translate:0 0}25%{translate:-3px 1px}50%{translate:3px -1px}75%{translate:-2px -1px}}
.heat.over .hv b{color:#ff5a68;text-shadow:0 0 18px #d3243c}
.heat.over .flames{filter:blur(5px) hue-rotate(-28deg) saturate(1.7)}
.heat.surge .flames{filter:blur(4px) brightness(calc(1 + var(--h)*.6))}
.heat.surge .hv b{transform:scale(calc(1 + var(--h)*.22))}
.notices{position:absolute;right:14px;top:66px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:32;pointer-events:none;width:max-content;max-width:548px}
.notice{font:700 17px/1.2 var(--f-txt);padding:8px 18px 7px;background:var(--osso);color:#0c0a10;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);box-shadow:0 8px 24px rgba(0,0,0,.6);animation:nin calc(.3s*var(--l,1)) ease-out}
.notice.bad{background:var(--sangue);color:#fff}
.notice.good{background:var(--ouro)}
.notice.shown{animation:none}
@keyframes nin{from{transform:translateY(-12px);opacity:0}}

.center{display:flex;align-items:center;gap:10px;padding:0 14px;background:linear-gradient(90deg,var(--arcano) 0 5px,transparent 5px calc(100% - 5px),var(--sangue) calc(100% - 5px)),#09070c;border-block:1px solid var(--linha);position:relative;z-index:2}
.rnd{font:600 25px/1 var(--f-disp);letter-spacing:.14em;padding-top:5px;white-space:nowrap;text-transform:uppercase}
.rnd small{font-size:15px;color:var(--cinza);letter-spacing:.12em;margin-left:6px}
.reveal{margin:0 auto;font:700 30px/1 var(--f-disp);letter-spacing:.18em;text-transform:uppercase;padding:9px 46px 3px;background:var(--brasa);color:#0c0a10;border:0;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.clock{font:500 14px/1 var(--f-disp);letter-spacing:.16em;color:var(--cinza);background:none;border:0;display:flex;gap:8px;align-items:baseline;padding:4px 2px 0;text-transform:uppercase}
.clock b{font:600 23px/1 var(--f-disp);color:var(--osso);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clock.paused b{color:var(--cinza)}
.clock.paused::after{content:"pausado";color:var(--brasa)}

/* sobreposições */
#ov{position:fixed;inset:0;z-index:60;background:rgba(6,5,9,.8);display:grid;place-items:center;padding:16px}
#ov .panel{background:var(--grafite);border:1px solid var(--linha);border-top:3px solid var(--x,var(--brasa));padding:18px 20px;max-width:min(94vw,780px);max-height:92vh;overflow:auto}
#ov.rot .panel{transform:rotate(180deg)}
#ov.wide .panel{max-width:min(96vw,1100px)}
.panel h4{margin:0 0 10px;font:600 30px/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;padding-top:4px}
.panel h5{margin-top:14px}
.panel p{margin:0 0 8px;line-height:1.4;max-width:60ch}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mvrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;align-items:center}
.mvrow span{font:600 15px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);padding-top:3px;margin-right:4px}
.zoomwrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.zoomwrap .card{--z:2.7;cursor:default}
.kw{max-width:300px;display:flex;flex-direction:column;gap:8px}
.kw p{margin:0;font-size:15px;line-height:1.35;color:var(--osso2)}
.kw .k{color:var(--ouro)}
.peek{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.peek figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:center}
.peek figcaption{font:600 16px/1 var(--f-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.passbig{display:flex;flex-direction:column;align-items:flex-start;max-width:520px}
.passbig .box{--x:var(--cc);width:100%}
.passbig .box.cur{box-shadow:inset 0 0 0 1px var(--cc),0 0 20px color-mix(in srgb,var(--cc) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 22%,var(--aco)),var(--aco))}
.passbig .box.off{opacity:.45}
.muted{color:var(--cinza)}

#vs{position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#07060a;overflow:hidden;cursor:pointer}
#vs .l,#vs .r{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;font:700 clamp(54px,10vw,132px)/.82 var(--f-disp);text-transform:uppercase}
#vs .l{align-items:flex-end;text-align:right;background:linear-gradient(110deg,color-mix(in srgb,var(--c1) 70%,#000),#0c0a10 80%);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);animation:inl calc(.45s*var(--l,1)) ease-out both}
#vs .r{align-items:flex-start;background:linear-gradient(250deg,color-mix(in srgb,var(--c2) 70%,#000),#0c0a10 80%);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);animation:inr calc(.45s*var(--l,1)) ease-out both}
#vs small{font:600 clamp(16px,2vw,24px)/1 var(--f-disp);letter-spacing:.3em;opacity:.8}
#vs .v{font:700 clamp(70px,11vw,150px)/1 var(--f-disp);color:var(--ouro);animation:pop calc(.35s*var(--l,1)) calc(.35s*var(--l,1)) both;padding-top:12px;text-transform:uppercase}
#vs .msg{position:absolute;left:0;right:0;bottom:10%;text-align:center;font:600 clamp(30px,4.4vw,58px)/1 var(--f-disp);letter-spacing:.32em;text-transform:uppercase;animation:fade calc(.5s*var(--l,1)) calc(.8s*var(--l,1)) both}
@keyframes inl{from{transform:translateX(-100%)}}
@keyframes inr{from{transform:translateX(100%)}}
@keyframes pop{from{transform:scale(3);opacity:0}}
@keyframes fade{from{opacity:0;transform:translateY(16px)}}
#toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:95;background:var(--osso);color:var(--tinta);font:600 20px/1 var(--f-disp);letter-spacing:.06em;padding:10px 16px 6px;pointer-events:none}

@media (max-width:880px){.selgrid{grid-template-columns:1fr}.pt{grid-template-columns:1fr}}
@media (max-width:540px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}.pickbar{grid-template-columns:1fr 1fr}.fight{grid-column:1/-1;grid-row:1}.slot b{font-size:22px}.tab{font-size:19px;padding:10px 14px 5px}.anat-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== v0.8 (03/11/2026): acréscimos para o tekken.css comum (valem na local e no online) ===== */
/* v0.8 · ajuste P-004: os números do relógio têm largura fixa (a Teko não tem algarismos de largura igual), então o Revelar não anda */
.clock b{display:inline-block;min-width:2.3em;text-align:left}
/* v0.8 · ajuste P-004: combo simultâneo (os dois com combo aberto ao mesmo tempo) */
.fx>b.simul{color:var(--osso);font-size:84px;text-shadow:0 0 22px var(--arcano),0 0 48px var(--sangue),0 0 90px rgba(255,214,90,.55);animation-duration:calc(1.9s*var(--l,1))}
/* Barra de momentum com o máximo de cada lutador (momMax, de 3 a 6): com mais de 5 segmentos,
   eles ficam mais estreitos para caber na coluna de 270 px do HUD */
.meter.many{gap:4px}
.meter.many .seg{width:23px}
/* "Preparar todas" numa linha só, e a zona Armazenada sem a contagem (ajustes que o tutorial achou) */
.z-descarte .zl{gap:4px;letter-spacing:.1em}
.z-descarte .zl button{white-space:nowrap;flex:none;letter-spacing:.03em;padding:3px 4px 0}
.z-armazenada .zl span{display:none}
/* Prévia do baralho durante o combo (P-003): o que cada golpe faria se saísse agora.
   Tornado brilha no dourado; drop fica meio caído e apagado; continua tem uma chama no pé, como o fogo do Heat. */
.pvsum{font:600 17px/1.2 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--osso2);margin:0 0 8px}
.deckstrip.pv{gap:16px 7px;padding:4px 4px 12px;isolation:isolate}
.mc.pv-torn{box-shadow:0 0 0 2px var(--ouro),0 0 12px var(--ouro);animation:glowp .65s ease-in-out infinite alternate}
.mc.pv-drop{transform:rotate(-9deg) translate(-1px,5px);filter:grayscale(.9) brightness(.7);opacity:.5}
.mc.pv-cont::after{content:"";position:absolute;left:8%;right:8%;bottom:-12px;height:24px;z-index:-1;pointer-events:none;border-radius:50% 50% 38% 38%/62% 62% 38% 38%;transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 92%,#fff7c8 0%,#ffc53a 24%,#ff6a1a 52%,rgba(211,36,60,.5) 68%,rgba(211,36,60,0) 78%);filter:blur(2px);animation:flick 1s ease-in-out infinite alternate}