/* Projeto Tekken · modo solo: o que muda em relação ao tekken.css comum.
   A mesa é a do online (você embaixo, o bot em cima e sem girar, registro à direita). */
:root{--l:1.4} /* animações no ritmo do online */

/* avisos rápidos no canto */
#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 ---------- */
.tile .breve{position:absolute;left:0;right:0;top:0;padding:6px 8px 3px;font:600 13px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;background:rgba(12,10,16,.85);color:var(--brasa);text-align:center}
.tile .tags i.bot{background:var(--arcano)}
.solocfg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;margin-top:22px;align-items:start}
.cfgbox{background:linear-gradient(180deg,var(--grafite),var(--tinta));border:1px solid var(--linha);border-top:4px solid var(--x,var(--arcano));padding:16px 18px 18px;min-width:0}
.cfgbox h3{margin:0 0 10px;font:600 26px/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;padding-top:4px}
.niveis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nivel{position:relative;text-align:left;border:1px solid var(--linha);background:var(--aco);padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.nivel b{font:600 30px/.9 var(--f-disp);text-transform:uppercase;letter-spacing:.04em;padding-top:4px}
.nivel small{font-size:14px;line-height:1.3;color:var(--osso2)}
.nivel em{font:600 13px/1 var(--f-disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)}
.nivel[aria-pressed="true"]{background:linear-gradient(160deg,color-mix(in srgb,var(--nc) 40%,var(--aco)),var(--aco));border-color:var(--nc);box-shadow:inset 0 0 0 2px var(--nc)}
.nivel.facil{--nc:#3fbf6b}.nivel.medio{--nc:var(--brasa)}.nivel.dificil{--nc:var(--sangue)}
.desafio{display:flex;align-items:flex-start;gap:12px;margin-top:12px;border:1px dashed var(--linha);padding:10px 12px;text-align:left;background:none;width:100%}
.desafio .chk{flex:none;width:26px;height:26px;border:2px solid var(--brasa);display:grid;place-items:center;font:700 20px/1 var(--f-disp);color:var(--tinta);margin-top:2px}
.desafio[aria-pressed="true"]{border-style:solid;border-color:var(--brasa);background:rgba(242,165,65,.08)}
.desafio[aria-pressed="true"] .chk{background:var(--brasa)}
.desafio b{display:block;font:600 22px/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.desafio span{display:block;font-size:14px;color:var(--osso2);margin-top:3px;line-height:1.3}
.dicas{margin:0;padding-left:20px;font-size:15px;line-height:1.4;color:var(--osso2)}
.dicas li+li{margin-top:5px}
.slot small{display:block;font:500 14px/1 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.slot .sl{min-width:0;display:flex;flex-direction:column}
@media (max-width:880px){.solocfg{grid-template-columns:1fr}.niveis{grid-template-columns:1fr}}

/* ---------- mesa: 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{display:block;font:600 12px/1 var(--f-disp);letter-spacing:.1em;margin-top:2px}
#table .center .rnd small{display:none}
#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 .seg,.half .win{display:inline-block;cursor:default}
.half .go:disabled,.half .end:disabled{opacity:.4}
.half.op .go,.half.op .end{display:grid;place-items:center;cursor:default}
.half.op .go{font-size:18px}
.half.op .end{background:var(--aco);color:var(--osso2);border-color:var(--linha);font-size:16px}
.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)}
.half.me .z-mao .card{cursor:pointer}
.half.me .z-mao .card:hover{transform:translateY(-6px);transition:transform .12s}
.half.me.escolhendo .z-mao{border-color:rgba(255,214,90,.55);background:rgba(255,214,90,.05)}
.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 14px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;background:rgba(12,10,16,.88);color:var(--ouro);padding:4px 7px 1px;border:1px solid var(--ouro)}
.zone .pronta{position:absolute;left:3px;right:3px;bottom:3px;font:600 10px/1.05 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro);text-align:center;pointer-events:none;background:rgba(9,7,12,.85);padding:2px 0 1px}
.z-jogada{position:relative}
.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)}
.reveal.go2{animation:glowp .65s ease-in-out infinite alternate}
.reveal:disabled{opacity:1;background:var(--aco);color:var(--cinza);border:1px solid var(--linha)}
.botchip{display:flex;align-items:center;gap:6px;font:600 14px/1 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;flex:none;padding:6px 8px 3px;border:1px solid var(--nc,var(--linha));color:var(--nc,var(--osso2))}
.botchip.facil{--nc:#3fbf6b}.botchip.medio{--nc:var(--brasa)}.botchip.dificil{--nc:#ff5a68}
.botchip i{font-style:normal;color:var(--brasa)}
/* carta de prioridade do Fácil, depois da revelação */
.prio{align-self:flex-end;flex:none;display:flex;gap:3px;align-items:center;background:rgba(9,7,12,.92);border:1px solid #3fbf6b;padding:4px 6px 3px;pointer-events:none}
.rows.empty .prio{align-self:center;margin-bottom:6px}
.prio small{font:600 11px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:#3fbf6b;margin-right:4px;padding-top:2px}
.prio i{font:600 12px/1 var(--f-disp);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:3px 5px 1px;background:var(--sc);color:#0c0a10}
.prio i.esta{outline:2px solid var(--ouro);outline-offset:1px}
.prio b{font-size:11px;color:var(--cinza);font-weight:400}

/* registro: abre e fecha deslizando; a mesa acompanha */
#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}
.logbtn i{position:relative;top:-6px;display:inline-block;width:7px;height:7px;margin:0 0 0 8px;border-radius:50%;background:var(--sangue);box-shadow:0 0 5px rgba(211,36,60,.65);vertical-align:baseline}
.logbtn i[hidden]{display:none}
#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.cab{color:var(--ouro);border-left-color:var(--ouro);font:600 15px/1.2 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;padding-top:5px;margin-top:4px}
#log li.mente{color:var(--cinza);font-style:italic;font-size:13px;border-left-style:dotted}
#log li.new{animation:nin calc(.3s*var(--l)) ease-out;background:rgba(255,214,90,.08)}

/* ---------- choque da revelação (o mesmo do online) ---------- */
#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}

/* ---------- sobreposições do solo ---------- */
.escolhe{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0 4px}
.escolhe .card{--z:1.5;cursor:pointer}
.escolhe .card:hover{transform:translateY(-6px);transition:transform .12s}
.placar{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 12px;font:600 44px/1 var(--f-disp);letter-spacing:.06em}
.placar span{font-size:22px;color:var(--cinza);letter-spacing:.14em;text-transform:uppercase}
.placar .eu{color:var(--sangue)}.placar .ele{color:var(--arcano)}
.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 4px}
.resumo div{background:var(--aco);border-left:3px solid var(--linha);padding:7px 10px 6px}
.resumo b{display:block;font:600 26px/1 var(--f-disp);padding-top:3px}
.resumo small{font:500 13px/1.2 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.ladrao{font-size:15px;color:var(--brasa);font-style:italic}
.toggle{display:flex;align-items:center;gap:10px;margin-top:12px;background:none;border:1px solid var(--linha);padding:8px 10px;text-align:left;width:100%}
.toggle .chk{flex:none;width:20px;height:20px;border:2px solid var(--ouro);display:grid;place-items:center;font:700 15px/1 var(--f-disp);color:var(--tinta)}
.toggle[aria-pressed="true"] .chk{background:var(--ouro)}
.toggle span{font-size:15px;color:var(--osso2)}
@media (max-width:900px){#log,#log .logbox{width:240px}}

/* ---------- fase 2: Desafio em níveis, perguntas do juiz, espiadas, combo simultâneo ---------- */
.desafios{margin-top:12px;border:1px dashed var(--linha);padding:10px 12px}
.dzrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dzrow .dl{font:600 22px/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;padding-top:3px;margin-right:6px}
.dz{font:600 20px/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;min-width:52px;padding:8px 10px 4px;background:var(--aco);border:1px solid var(--linha);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.dz[aria-pressed="true"]{background:var(--brasa);border-color:var(--brasa);color:var(--tinta)}
.desafios p{margin:8px 0 0;font-size:14px;line-height:1.35;color:var(--osso2)}
.deck{position:relative}
.deck .topo{position:absolute;left:0;top:-6px;width:66px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:auto}
.deck .topo .mc{transform:scale(.92);box-shadow:0 0 0 2px var(--ouro),0 6px 14px rgba(0,0,0,.6)}
.deck .topo em{white-space:nowrap;font:600 9px/1 var(--f-disp);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro);background:rgba(12,10,16,.9);padding:2px 4px 0}
.reveal.simul{border-color:var(--ouro);box-shadow:0 0 0 1px var(--ouro),0 0 14px rgba(255,214,90,.5)}
.escolhe .opc{display:flex;flex-direction:column;align-items:center;gap:4px}
.escolhe .opc small{font:600 12px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--brasa)}
.heat .sq:disabled{opacity:.35}
.half .zone.target{border-style:dashed;border-color:rgba(255,214,90,.6)}
.half .zone.over{border:1px solid var(--ouro);background:rgba(255,214,90,.1)}
.card.ghost{--z:1}
/* v3 (03/11 19h): jogar só arrastando, a pausa depois do choque, a mesa mais lisa, a escolha com dois cliques */
.half.me .z-mao .card{cursor:grab}
.acts .dica{align-self:center;margin-right:auto;font-size:14px}
/* as cartas que mudam de zona deslizam (um clone voa por cima da mesa) */
.voando{position:fixed;left:0;top:0;margin:0!important;transform-origin:0 0;z-index:55;pointer-events:none;box-shadow:0 12px 28px rgba(0,0,0,.6)}
/* o HP desce deslizando; a barra branca do dano vem atrás */
.hpbar .fill{transition:width calc(.34s*var(--l,1)) cubic-bezier(.2,.8,.3,1)}
/* as janelas entram com um fade curto (só quando abrem, não quando atualizam) */
#ov.entra{animation:ovfade .18s ease-out}
#ov .panel.entra{animation:ovin .24s cubic-bezier(.2,.8,.3,1)}
@keyframes ovfade{from{background:rgba(6,5,9,0)}}
@keyframes ovin{from{opacity:0;transform:translateY(10px) scale(.97)}}
/* a pausa depois do choque: discreta, sem escurecer a mesa */
#table .center .reveal.cont{clip-path:none;background:rgba(12,10,16,.55);color:var(--osso);border:1px solid rgba(255,214,90,.5);font-size:22px;letter-spacing:.14em;padding:8px 18px 3px;position:relative;animation:respira 1.8s ease-in-out infinite;max-width:440px}
#table .center .reveal.cont small{color:var(--ouro);overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;text-transform:none;font:600 13px/1.1 var(--f-txt)}   /* a letra de texto: no Teko pequeno o "a" de "comba" parecia "o" */
#table .center .reveal.cont::after{content:"clique em qualquer lugar ou aperte uma tecla";position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;font:500 11px/1 var(--f-txt);letter-spacing:.04em;text-transform:none;color:var(--cinza);opacity:0;animation:aparece .4s ease-out .9s forwards;pointer-events:none}
@keyframes respira{0%,100%{border-color:rgba(255,214,90,.3)}50%{border-color:rgba(255,214,90,.85)}}
@keyframes aparece{to{opacity:.85}}
/* escolha com dois cliques: a vaga da vez pisca, e o Lutar acende quando as duas estão prontas */
.slot{cursor:pointer}
.slot.vez{box-shadow:inset 0 0 0 2px var(--ouro);animation:vaga 1s ease-in-out infinite alternate}
.slot.vez small{color:var(--ouro)}
@keyframes vaga{from{background:var(--aco)}to{background:color-mix(in srgb,var(--ouro) 14%,var(--aco))}}
.fight.pronto{animation:luta .8s ease-in-out infinite alternate}
@keyframes luta{to{filter:brightness(1.25) saturate(1.2)}}
/* Como funciona: um botão, abre numa janela */
.solocfg{grid-template-columns:1fr}
.cfghead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cfghead h3{margin:0}
.comofunc{background:none;border:1px solid var(--linha);color:var(--osso2);font:600 16px/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px 5px;cursor:pointer}
.comofunc:hover{border-color:var(--brasa);color:var(--osso)}
#ov .dicas{max-width:62ch}
/* mão cheia (6 habilidades + a Ultimate): só aperta o espaço entre as cartas, sem cobrir o número do canto */
.half .z-mao.tight .zc{gap:2px}
.half .z-mao.tight .zc .card+.card{margin-left:0}
/* PAS ✓: a passiva já virou (a marca fica dourada mesmo sem o segmento aceso) */
.seg.virou[data-m]::after{color:var(--ouro)}