/* Projeto Tekken online: o que muda em relação à mesa local. */
:root{--l:1.4} /* animações mais lentas que na local (pedidos de 02/11: "um pouco mais lento", duas vezes) */

/* avisos rápidos ("Embaralhado", "Desfeito"…) no canto, longe do meio da mesa */
#toast{left:auto;top:auto;right:16px;bottom:16px;transform:none;font-size:17px;padding:9px 14px 5px;box-shadow:0 8px 24px rgba(0,0,0,.6);animation:toastin calc(.25s*var(--l)) ease-out}
@keyframes toastin{from{transform:translateY(10px);opacity:0}}

/* escolha do lutador: tocar de novo no retrato escolhe */
.tile.mine{box-shadow:inset 0 0 0 3px var(--ouro)}
.tile .pickhint{position:absolute;left:0;right:0;bottom:0;padding:5px 8px 3px;font:600 13px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;background:rgba(12,10,16,.82);color:var(--ouro);text-align:center;opacity:0;transition:opacity .2s}
.tile[aria-pressed="true"]:not(.mine) .pickhint{opacity:1}
.tile.picked{animation:pickpop calc(.6s*var(--l)) cubic-bezier(.2,1.4,.4,1) var(--ad,0s)}
.tile.picked::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,240,190,.75) 48%,transparent 66%);transform:translateX(-120%);animation:pickshine calc(.7s*var(--l)) ease-out var(--ad,0s) forwards;pointer-events:none}
.tile .stampok{position:absolute;left:50%;top:42%;font:700 24px/1 var(--f-disp);letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;color:var(--ouro);border:3px solid var(--ouro);padding:6px 10px 1px;background:rgba(12,10,16,.78);transform:translate(-50%,-50%) rotate(-10deg);opacity:0;pointer-events:none}
.tile.picked .stampok{animation:stampok calc(1.3s*var(--l)) cubic-bezier(.2,1.5,.4,1) var(--ad,0s) forwards}
.tile .tags i.pop{animation:tagpop calc(.45s*var(--l)) cubic-bezier(.2,1.6,.4,1) var(--ad,0s) both}
@keyframes pickpop{0%{transform:scale(1)}35%{transform:scale(1.08);filter:brightness(1.5)}100%{transform:scale(1);filter:none}}
@keyframes pickshine{to{transform:translateX(120%)}}
@keyframes stampok{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(2.2)}25%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}
@keyframes tagpop{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}
.pickinfo{font:600 18px/1.2 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ouro);padding:8px 0 0}

/* botão de zerar o marcador do combo */
.heat .zero{position:absolute;left:3px;top:3px;z-index:2;width:20px;height:20px;padding:0;display:grid;place-items:center;font:600 15px/1 var(--f-txt);color:var(--osso);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:50%}
.heat .zero:hover{border-color:var(--ouro);color:var(--ouro)}

/* ---------- lobby ---------- */
.lobby{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;align-items:start}
.lob-card{background:linear-gradient(180deg,var(--grafite),var(--tinta));border:1px solid var(--linha);border-top:4px solid var(--x,var(--brasa));padding:18px 20px 20px;min-width:0}
.lob-card h2{margin:0 0 12px;font:600 34px/.9 var(--f-disp);letter-spacing:.04em;text-transform:uppercase;padding-top:4px}
.lob-card p{margin:0 0 10px;line-height:1.4;color:var(--osso2);max-width:60ch}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.field label{font:600 15px/1 var(--f-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.field input{font:500 20px/1.2 var(--f-txt);color:var(--osso);background:var(--aco);border:1px solid var(--linha);padding:10px 12px;border-radius:0;min-width:0;width:100%;max-width:340px}
.field input:focus{outline:2px solid var(--ouro);outline-offset:0}
.salas{display:flex;flex-direction:column;gap:8px}
.sala{display:flex;align-items:center;gap:14px;background:var(--aco);border-left:3px solid var(--arcano);padding:10px 12px}
.sala.mine{border-left-color:var(--brasa)}
.sala .si{flex:1;min-width:0}
.sala b{display:block;font:600 26px/.9 var(--f-disp);text-transform:uppercase;letter-spacing:.03em;padding-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sala small{display:block;font-size:14px;color:var(--cinza);margin-top:2px}
.vazio{border:1px dashed var(--linha);padding:18px;color:var(--cinza);text-align:center}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5b5560;margin-right:6px;vertical-align:middle}
.dot.on{background:#3fd27a;box-shadow:0 0 8px #3fd27a}
.tutor{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--brasa);padding:10px 12px;margin:0 0 18px}
.tutor span{color:var(--osso2)}
.banner{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--aco);border-left:3px solid var(--brasa);padding:12px 14px;margin-bottom:16px}
.banner b{font:600 26px/1 var(--f-disp);letter-spacing:.04em;text-transform:uppercase;padding-top:4px}
.banner span{color:var(--osso2)}
.wait{animation:pulse 1.6s ease-in-out infinite}
.slot small{display:block;font:500 14px/1 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.slot .ok{color:#3fd27a}
.slot .sl{min-width:0;display:flex;flex-direction:column}
.fight.on{background:#3fd27a}
.tile .tags i.op{background:var(--aco);border:1px solid var(--osso2)}

/* ---------- mesa online: mesa + registro ---------- */
#game.on{display:flex}
#stagewrap{position:relative;flex:1;min-width:0;overflow:hidden;overflow:clip}
#stage{position:absolute;top:0;left:0;width:1180px;height:800px;transform-origin:0 0}
#stage #table{position:absolute;inset:0;transform:none;grid-template-columns:minmax(0,1fr)}
#table .center{min-width:0;gap:8px}
#table .center .reveal{padding:9px 24px 3px;font-size:28px;letter-spacing:.1em;min-width:0;flex:none;white-space:nowrap;line-height:.9}
#table .center .reveal small{font-size:12px;letter-spacing:.1em;margin-top:1px}
#table .center .rnd small{display:none}
#table .center .clock{gap:5px;letter-spacing:.08em}
#table .center .btn{padding:9px 12px 5px}
#table .half.p2{transform:none}
.half.op{grid-template-rows:minmax(0,1fr) 134px 52px;background:radial-gradient(700px 200px at 50% -25%,color-mix(in srgb,var(--side) 30%,transparent),transparent 72%)}
.half.op .zones{order:1}.half.op .mid{order:2}.half.op .hud{order:3}
.half.op .card{cursor:pointer}
.half.op .seg,.half.op .win{display:inline-block;cursor:default}
.half.op .go,.half.op .end{opacity:.45;cursor:default}
.half.op .zl em{font:500 12px/1 var(--f-disp);font-style:normal;letter-spacing:.1em;color:var(--brasa);margin-left:4px}
.hpctl .hpv{font:600 36px/1 var(--f-disp);min-width:78px;text-align:center;font-variant-numeric:tabular-nums;padding-top:5px}
.hpctl .hpv small{font-size:19px;color:var(--cinza)}
.card.mydown{outline:2px dashed rgba(255,214,90,.8);outline-offset:-2px}
.card.mydown::after{content:"virada";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);font:700 15px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;background:rgba(12,10,16,.88);color:var(--ouro);padding:4px 7px 1px;border:1px solid var(--ouro)}
.layer{position:absolute;left:0;width:1180px;height:374px;pointer-events:none;z-index:30}
.layer.top{top:0}.layer.bot{top:426px}
.layer .fx{position:absolute;inset:0}
.layer.top .fx{place-items:start center;padding:30px 0 0}
.layer.top .draw,.layer.top .strike{top:200px}
.layer.top .notices{top:auto;bottom:66px}
.reveal.waiting{background:var(--aco);color:var(--osso);border:1px solid var(--brasa);animation:pulse 1.6s ease-in-out infinite}
.reveal.opready{animation:glowp .65s ease-in-out infinite alternate}
.reveal small{display:block;font:600 13px/1 var(--f-disp);letter-spacing:.12em;margin-top:2px}
.conn{display:flex;align-items:center;font:500 13px/1 var(--f-disp);letter-spacing:.14em;color:var(--cinza);text-transform:uppercase;white-space:nowrap;flex:none}
.conn .dot{margin-right:0}
.conn>span:last-child{display:none}
.conn.off{color:#ff6b6b}
.conn.off>span:last-child{display:inline;margin-left:6px}
.conn.off .dot{background:#ff4d5e;box-shadow:0 0 8px #ff4d5e}

/* registro: abre e fecha deslizando; a mesa acompanha (ResizeObserver no online.js) */
#log{flex:none;width:300px;overflow:hidden;background:#09070c;border-left:1px solid var(--linha);min-height:0;transition:width calc(.25s*var(--l)) ease,border-color calc(.25s*var(--l))}
#log .logbox{width:300px;height:100%;display:flex;flex-direction:column;min-height:0}
#game.logclosed #log{width:0;border-left-color:transparent}
.center .logbtn{display:none;position:relative}
#game.logclosed .center .logbtn{display:inline-block}
/* registro fechado com novidade: só um pontinho vermelho discreto dentro do botão */
.logbtn i{display:none;position:absolute;top:6px;right:11px;width:7px;height:7px;border-radius:50%;background:var(--sangue);box-shadow:0 0 6px rgba(211,36,60,.7)}
.logbtn i.on{display:block;animation:dotin calc(.3s*var(--l)) ease-out}
@keyframes dotin{from{transform:scale(0);opacity:0}}
#log header{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px;border-bottom:1px solid var(--linha)}
#log header b{font:600 22px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;padding-top:4px;flex:1}
#log header button{font:600 15px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;background:var(--aco);border:1px solid var(--linha);padding:6px 8px 3px}
#log ol{list-style:none;margin:0;padding:8px 10px 12px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
#log li{font-size:14px;line-height:1.3;color:var(--osso2);border-left:3px solid var(--linha);padding:2px 0 2px 8px}
#log li.p1{border-left-color:var(--sangue)}
#log li.p2{border-left-color:var(--arcano)}
#log li.sys{color:var(--osso);border-left-color:var(--brasa)}
#log li time{font:500 12px/1 var(--f-disp);letter-spacing:.08em;color:var(--cinza);margin-right:6px}
#log li.new{animation:nin calc(.3s*var(--l)) ease-out;background:rgba(255,214,90,.08)}

/* ---------- choque da revelação ---------- */
#clash{position:absolute;inset:0;pointer-events:none;z-index:45;overflow:hidden}
#clash .cc{position:absolute;left:498px;top:270px;width:185px;height:260px;will-change:transform,opacity}
#clash .cc .card{--z:2.2;cursor:default;box-shadow:0 14px 34px rgba(0,0,0,.75)}
#clash .cc.half1{clip-path:polygon(0 0,100% 0,100% 38%,0 62%)}
#clash .cc.half2{clip-path:polygon(0 62%,100% 38%,100% 100%,0 100%)}
#clash .fxe{position:absolute;pointer-events:none;will-change:transform,opacity}
#clash .burst2{border-radius:50%}
#clash .ring{border-radius:50%;border:6px solid currentColor;box-shadow:0 0 24px currentColor,inset 0 0 18px currentColor}
#clash .slashl{height:7px;background:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent);box-shadow:0 0 16px #fff,0 0 34px var(--sl,#5cc8f2);transform-origin:50% 50%}
#clash .shield{border-radius:50% 50% 0 0/100% 100% 0 0;border:5px solid #8fb4ff;border-bottom:0;box-shadow:0 -6px 24px #4a7ff0,inset 0 8px 22px rgba(120,170,255,.6)}
#clash .rays{border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,240,170,.95) 0 6deg,transparent 6deg 22deg);-webkit-mask:radial-gradient(circle,#000 0 18%,transparent 70%);mask:radial-gradient(circle,#000 0 18%,transparent 70%)}
#clash .spark{width:8px;height:8px;border-radius:50%;background:#fff6c4;box-shadow:0 0 10px #ffd65a,0 0 18px #ffb300}
#clash .fire{border-radius:40% 40% 10px 10px;background:radial-gradient(ellipse at 50% 100%,#fff3b0 0%,#ffb231 22%,#ff5f1c 46%,rgba(211,36,60,.7) 64%,transparent 78%);filter:blur(3px)}
#clash .lbl{left:0;right:0;top:340px;text-align:center;font:700 92px/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;color:#fff;-webkit-text-stroke:2px rgba(0,0,0,.5);text-shadow:0 0 26px var(--lc,#ffb300),0 0 60px var(--lc,#ff6a00)}
#clash .lbl.small{font-size:46px;top:376px;letter-spacing:.14em;text-shadow:0 0 14px var(--lc,#fff)}
#clash .flash{left:0;top:0;width:1180px;height:800px;background:radial-gradient(60% 60% at 50% 50%,var(--fc,rgba(255,220,140,.6)),transparent 70%)}
#stage.quake{animation:quake calc(.5s*var(--l)) linear}
#stage.quake.big{animation:quake calc(.5s*var(--l)) linear 2}

@media (max-width:900px){.lobby{grid-template-columns:1fr}#log,#log .logbox{width:240px}}

/* v0.7: o botão do tutorial guiado é um link */
.tutor a.btn{text-decoration:none;color:var(--tinta)}
/* v1.3: o balão da música (shared/musica.css). No lobby e na escolha, no canto de baixo à esquerda, com o nome da faixa;
   na escolha, sobe para não cobrir o P1 da barra do Pronto. Na partida, fica na faixa do centro, depois do Menu, só o ♪;
   aberto, a faixa do centro passa por cima das metades para o painel não ficar embaixo de brilhos e avisos. */
body:has(#select:not([hidden]) .pickbar) .tkm.c-be{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
.musslot{display:flex;flex:none}
.center .tkm-let{display:none}
.center:has(.tkm.aberto){z-index:40}