@charset "utf-8";
@font-face{font-family:'Damned';src:url(../assets/fonts/PermanentMarker-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Barlow';src:url(../assets/fonts/BarlowCondensed-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url(../assets/fonts/BarlowCondensed-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow';src:url(../assets/fonts/BarlowCondensed-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow';src:url(../assets/fonts/BarlowCondensed-ExtraBold.ttf) format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Barlow';src:url(../assets/fonts/BarlowCondensed-Black.ttf) format('truetype');font-weight:900;font-display:swap}
/* Damned Fight — interface
   Layout: tela cheia 3D; HUD de luta no topo (barras espelhadas + cronômetro), controles na base;
   menus são painéis de tinta com corte diagonal sobre a luta ao vivo. */
:root{
  --ink:#0b090a; --ink2:#161113; --ink3:#241b1e; --bone:#ece3d3; --paper:#fbf3e3; --muted:#a3978c; --muted-dark:#5d5373; --line:rgba(236,227,211,.14);
  --curse:#e0221c; --gold:#f2a823; --ember:#ff5a1a; --blood:#8e0c10; --sorc:#58d2ff; --venom:#9dff6a; --violet:#b45cff;
  --display:'Damned', Impact, 'Arial Black', system-ui, sans-serif;
  --ui:'Barlow', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --u:1; --bs:1; --acc:var(--curse);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px); --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--bone);font-family:var(--ui);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#flash{position:fixed;inset:0;background:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none;z-index:5}
#vig{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at center,transparent 50%,rgba(255,40,80,.6) 100%)}
#vig.on{opacity:1;animation:vigp 1s ease-in-out infinite}
@keyframes vigp{50%{opacity:.55}}
#dom{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s;background:radial-gradient(ellipse at center,transparent 35%,var(--domc,#3a6bd8) 120%)}
#dom.on{opacity:.55}
#letterbox i{position:fixed;left:0;right:0;height:0;background:#000;z-index:7;transition:height .35s ease;pointer-events:none}
#letterbox i:first-child{top:0}#letterbox i:last-child{bottom:0}
#letterbox.on i{height:11vh}
#ultCard{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);z-index:8;pointer-events:none;text-align:center;opacity:0;display:flex;flex-direction:column;gap:6px}
#ultCard small{font:800 14px/1 var(--ui);letter-spacing:.4em;text-transform:uppercase;color:var(--bone);text-shadow:0 2px 0 #000}
#ultCard b{font:400 clamp(30px,7vw,66px)/1 var(--display);font-weight:400;color:var(--bone);-webkit-text-stroke:2px #000;text-shadow:0 0 24px var(--ultc,#ff3b6b),5px 5px 0 var(--ultc,#ff3b6b)}
#ultCard.show{animation:ultc 1.7s ease-out forwards}
@keyframes ultc{0%{opacity:0;transform:translateY(-50%) scaleX(2.2)}10%{opacity:1;transform:translateY(-50%) scaleX(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-50%) scaleX(1)}}
#tags,#nums{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;font:700 12px/1 var(--ui);text-shadow:0 1px 0 #000,0 0 4px #000;white-space:nowrap;will-change:transform}
.tag .hb{width:62px;height:5px;background:rgba(0,0,0,.6);border:1px solid rgba(244,234,214,.6);overflow:hidden}
.tag .hb i{display:block;height:100%;background:var(--curse);transform-origin:left}
.tag .mk{width:62px;height:3px;background:rgba(0,0,0,.5);overflow:hidden}
.tag .mk i{display:block;height:100%;background:var(--venom);transform-origin:left}
.tag.target span{color:var(--gold)}
.num{position:absolute;left:0;top:0;font:400 20px/1 var(--display);color:#fff;text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink);will-change:transform,opacity;white-space:nowrap}
.num.big{font-size:32px;color:#ff2c55}
.num.me{color:#ffb4c4}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:8}
.fbar{position:absolute;top:calc(6px + var(--st));display:flex;gap:8px;align-items:flex-start;width:min(330px,37vw)}
.fbar.left{left:calc(8px + var(--sl))}
.fbar.right{right:calc(8px + var(--sr));flex-direction:row-reverse;top:calc(46px + var(--st))}
.por{width:46px;height:46px;object-fit:cover;border:2px solid var(--bone);background:var(--ink2);transform:skewX(-8deg);flex:0 0 auto}
.fcol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.fname{display:flex;gap:6px;align-items:baseline;text-shadow:0 2px 0 var(--ink);white-space:nowrap;overflow:hidden}
.fname b{font:400 15px/1 var(--display);font-weight:400}
.fname span{font:800 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.right .fname{justify-content:flex-end}
.right .fname span{color:var(--muted)}
.hpb,.enb,.evb{position:relative;overflow:hidden;background:rgba(10,8,16,.7);border:2px solid var(--bone);transform:skewX(-14deg)}
.right .hpb,.right .enb{transform:skewX(14deg)}
.hpb{height:15px}.enb{height:9px;padding:0;display:block;width:100%;pointer-events:auto}.evb{height:4px;border-width:1px}
.hpb i,.enb i,.evb i{position:absolute;inset:0;transform-origin:left;display:block}
.right .hpb i,.right .enb i{transform-origin:right}
.hpb .ghost{background:#fff}
.hpb .fill{background:linear-gradient(#ffe06b,#ff9b2b 55%,#e8541f)}
.hpb.low .fill{background:linear-gradient(#ff7d9c,#e0264f);animation:lowp .5s steps(2) infinite}
@keyframes lowp{50%{filter:brightness(1.6)}}
.enb .fill{background:linear-gradient(90deg,var(--acc),var(--gold))}
.enb.ready{border-color:var(--gold);box-shadow:0 0 12px var(--gold);animation:awp .6s ease-in-out infinite alternate}
.enb.active .fill{background:repeating-linear-gradient(90deg,var(--gold) 0 8px,var(--acc) 8px 16px)}
@keyframes awp{from{box-shadow:0 0 2px var(--gold)}to{box-shadow:0 0 16px var(--gold)}}
.evb .fill{background:var(--bone)}
.evb.full{box-shadow:0 0 6px var(--bone)}
.hpt,.ent{position:absolute;inset:0;display:flex;align-items:center;padding:0 6px;font:800 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 0 #000;transform:skewX(14deg)}
.right .hpt,.right .ent{justify-content:flex-end;transform:skewX(-14deg)}
#mid{position:absolute;top:calc(4px + var(--st));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-shadow:0 2px 0 var(--ink)}
#timer{font:400 28px/1 var(--display);font-variant-numeric:tabular-nums;min-width:56px;text-align:center;background:rgba(18,15,28,.65);border:2px solid var(--gold);padding:3px 8px 1px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
#timer.empty{display:none}
#rounds{display:flex;gap:10px;align-items:center}
#rounds span{display:flex;gap:3px}
#rounds i{width:10px;height:10px;transform:rotate(45deg);border:1px solid var(--bone);display:inline-block}
#rounds i.on{background:var(--gold);border-color:var(--gold)}
#score{font:800 13px/1.1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
#dummyBtn{pointer-events:auto;margin-top:4px}
#tr{position:absolute;top:calc(6px + var(--st));right:calc(8px + var(--sr));display:flex;gap:6px;pointer-events:auto}
.pill{height:32px;min-width:44px;padding:0 12px;border:2px solid var(--bone);background:rgba(18,15,28,.65);font:800 13px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.pill.on{background:var(--bone);color:var(--ink)}
#feed{position:absolute;top:calc(96px + var(--st));right:calc(8px + var(--sr));display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:700 12px/1 var(--ui)}
#feed div{background:rgba(18,15,28,.75);padding:4px 8px;border-left:3px solid var(--curse);animation:fd 4s forwards}
@keyframes fd{0%{opacity:0;transform:translateX(12px)}8%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
#banner{position:absolute;left:0;right:0;top:30%;text-align:center;font:400 clamp(34px,8vw,80px)/1 var(--display);color:var(--bone);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--acc),0 0 30px rgba(255,197,61,.5);opacity:0;pointer-events:none}
#banner.show{animation:ban 1.2s ease-out forwards}
@keyframes ban{0%{opacity:0;transform:scale(1.8) skewX(-10deg)}12%{opacity:1;transform:scale(1) skewX(-10deg)}75%{opacity:1;transform:scale(1) skewX(-10deg)}100%{opacity:0;transform:scale(.95) skewX(-10deg)}}

/* ---------- Controles ---------- */
#controls{position:fixed;inset:0;pointer-events:none;z-index:9;--k:calc(var(--u)*var(--bs))}
.cb{position:absolute;pointer-events:auto;touch-action:none;width:calc(var(--k)*58px);height:calc(var(--k)*58px);border-radius:50%;
  border:2px solid rgba(244,234,214,.6);background:rgba(18,15,28,.5);color:var(--bone);font:800 calc(var(--k)*12px)/1 var(--ui);
  text-transform:uppercase;letter-spacing:.05em;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:0;transition:transform .06s}
.cb.down{background:rgba(244,234,214,.34);transform:scale(.92)}
.cb.big{width:calc(var(--k)*90px);height:calc(var(--k)*90px);font-size:calc(var(--k)*17px);border-width:3px;border-color:var(--acc);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),rgba(18,15,28,.55))}
.cb .cd{position:absolute;inset:0;background:conic-gradient(rgba(8,6,14,.82) calc(var(--p,0)*1turn),transparent 0);pointer-events:none}
.cb .cdt{position:absolute;inset:0;display:grid;place-items:center;font:400 calc(var(--k)*17px)/1 var(--display);pointer-events:none;text-shadow:0 2px 0 #000}
.cb .lbl{position:relative;font-size:calc(var(--k)*10.5px);line-height:1.05;max-width:92%;text-align:center;letter-spacing:.02em}
.cb .key{position:relative;font:400 calc(var(--k)*14px)/1 var(--display);margin-bottom:3px}
.sk{border-radius:14px;width:calc(var(--k)*60px);height:calc(var(--k)*56px)}
.sk.flash{background:#fff;color:var(--ink);box-shadow:0 0 22px #fff;border-color:#fff}
.sk.ultslot{border-color:var(--gold);background:rgba(255,197,61,.28)}
.sp{width:calc(var(--k)*50px);height:calc(var(--k)*50px);border-style:dashed}
.ult{border-color:var(--gold);color:var(--gold);font-size:calc(var(--k)*13px)}
.ult.ready{background:rgba(255,197,61,.35);color:#fff;box-shadow:0 0 18px var(--gold);animation:awp .6s ease-in-out infinite alternate}
.ult.active{background:radial-gradient(circle,var(--gold),var(--ember));color:var(--ink)}
#bBlock.down{background:rgba(88,210,255,.38)}
#joy{position:absolute;left:0;top:0;width:calc(var(--k)*124px);height:calc(var(--k)*124px);margin:calc(var(--k)*-62px) 0 0 calc(var(--k)*-62px);
  border-radius:50%;border:2px solid rgba(244,234,214,.4);background:rgba(18,15,28,.28);opacity:.45;pointer-events:none}
#joy.on{opacity:1}
#knob{position:absolute;left:50%;top:50%;width:calc(var(--k)*52px);height:calc(var(--k)*52px);margin:calc(var(--k)*-26px) 0 0 calc(var(--k)*-26px);border-radius:50%;background:rgba(244,234,214,.6)}
.desk .cb{opacity:.82}

/* ---------- Telas ---------- */
.screen{position:fixed;inset:0;z-index:20;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:none;
  padding-block:calc(12px + var(--st)) calc(14px + var(--sb));padding-left:max(16px, var(--sl));padding-right:max(16px, var(--sr))}
.screen.show{display:block;animation:scrIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes scrIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.center.show,#title.show,#main.show,#select.show{display:flex}
.center{align-items:center;justify-content:center;background:rgba(18,15,28,.72)}
.logo-slot svg{width:100%;height:auto;display:block;overflow:visible}
.logo .lt1,.logo .lt2{font-family:var(--display);fill:url(#lgA);stroke:#120f1c;stroke-width:9;paint-order:stroke;letter-spacing:2px}
.logo .lt1{font-size:118px}.logo .lt2{font-size:112px}
#title{align-items:center;justify-content:flex-start;gap:20px;background:linear-gradient(90deg,rgba(18,15,28,.88) 0%,rgba(18,15,28,.55) 45%,rgba(18,15,28,.1) 75%)}
.title-main{position:relative;z-index:2;width:min(520px,60vw);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.title-main .logo-slot{width:100%;animation:logoIn .9s cubic-bezier(.2,1.4,.3,1) both}
@keyframes logoIn{from{opacity:0;transform:scale(1.4) rotate(-4deg)}to{opacity:1;transform:none}}
.tag{margin:0}
.title-main .tag{font:800 15px/1 var(--ui);letter-spacing:.35em;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 0 #000;position:static;display:block}
.title-art{position:absolute;right:0;top:0;bottom:0;width:58%;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;z-index:1}
.title-art img{height:92%;width:auto;max-width:none;margin-left:-9%;object-fit:cover;aspect-ratio:384/634;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 55%,transparent 100%);
  animation:artIn .7s ease-out both}
.title-art img:nth-child(2){animation-delay:.08s;height:86%}.title-art img:nth-child(3){animation-delay:.16s;height:96%}.title-art img:nth-child(4){animation-delay:.24s;height:88%}
@keyframes artIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.go{font:400 22px/1 var(--display);background:var(--curse);color:#fff;border:3px solid var(--ink);padding:14px 18px;box-shadow:5px 5px 0 var(--ink);text-transform:uppercase;letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .1s,filter .1s}
.go:active{transform:translate(3px,3px)}
.go:hover{filter:brightness(1.12)}
.go.big{font-size:20px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.25);transform:scale(1.03)}}
#main{align-items:center;background:linear-gradient(90deg,rgba(18,15,28,.9),rgba(18,15,28,.35) 70%)}
.menu-col{width:min(440px,100%);display:flex;flex-direction:column;gap:16px}
.logo-slot.small{width:min(280px,60vw)}
.mlist{display:flex;flex-direction:column;gap:10px}
.mbtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:0;padding:12px 18px 12px 22px;background:linear-gradient(90deg,var(--ink2),rgba(31,25,48,.6));
  border-left:6px solid var(--curse);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);transition:transform .15s,background .15s}
.mbtn b{font:400 22px/1 var(--display);font-weight:400}
.mbtn small{font:600 13px/1.2 var(--ui);color:var(--muted)}
.mbtn:hover,.mbtn:active{transform:translateX(8px);background:linear-gradient(90deg,var(--ink3),rgba(44,36,66,.7))}
.mbtn:nth-child(2){border-left-color:var(--sorc)}.mbtn:nth-child(3){border-left-color:var(--gold)}
.card{width:min(560px,100%);margin:auto;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--acc);padding:16px;display:flex;flex-direction:column;gap:12px}
.card.wide{width:min(640px,100%)}
.hdr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hdr h2{margin:0;font:400 28px/1 var(--display);font-weight:400;transform:skewX(-6deg)}
.back{width:40px;height:40px;border:2px solid currentColor;background:transparent;font:700 26px/1 var(--ui);display:grid;place-items:center;padding:0 0 3px}
.sec h3{margin:0 0 6px;font:800 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.seg{display:flex;gap:6px}
.seg button{flex:1 1 0;min-width:0;padding:8px 6px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:800 16px/1.05 var(--ui);text-transform:uppercase;letter-spacing:.04em;transition:background .12s}
.seg button small{display:block;font:600 11.5px/1.15 var(--ui);text-transform:none;letter-spacing:0;opacity:.75;margin-top:3px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.rng label{display:flex;justify-content:space-between;font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:6px}
.rng output{color:var(--ink)}
.rng input{width:100%;accent-color:var(--curse)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 auto}
.ghost{background:transparent;border:2px solid var(--ink);color:var(--ink);padding:10px 14px;font:800 15px/1 var(--ui);text-transform:uppercase;letter-spacing:.06em}
.note{font:600 13px/1.35 var(--ui);color:var(--muted-dark);margin:0}
/* seleção de personagem */
#select{gap:16px;align-items:stretch;background:linear-gradient(90deg,rgba(18,15,28,.2),rgba(18,15,28,.85) 48%)}
.sel-art{position:relative;flex:0 0 38%;display:flex;align-items:flex-end;justify-content:center;min-width:0}
.sel-art img{position:relative;z-index:1;height:100%;max-height:calc(100vh - 30px);width:auto;max-width:100%;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%);animation:artIn .45s ease-out both}
.sel-glow{position:absolute;inset:10% 5%;background:radial-gradient(circle,var(--acc),transparent 65%);opacity:.45;filter:blur(20px)}
.sel-panel{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;padding:4px 0}
.sel-panel .hdr h2{color:var(--bone);font-size:32px}
#selTitle{font:800 13px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.role{margin:0;font:600 14px/1.3 var(--ui);color:var(--muted);max-width:60ch}
.stats{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;max-width:380px}
.stats span{font:800 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stats div{height:8px;background:var(--ink3);transform:skewX(-14deg);overflow:hidden}
.stats div i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--gold));transform-origin:left;transition:transform .35s}
.moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin:0;padding:0;list-style:none}
.moves li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;align-items:start;font:600 12.5px/1.2 var(--ui);color:var(--bone)}
.moves li i{font:400 12px/20px var(--display);font-style:normal;text-align:center;background:var(--bone);color:var(--ink);height:20px}
.moves li b{display:block;font-weight:800;font-size:13.5px}
.moves li span{color:var(--muted)}
.moves li span b{color:var(--bone)}
.moves li.aw i{background:var(--gold)}
.roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:560px}
@media (max-width:700px){.roster{grid-template-columns:repeat(3,minmax(0,1fr));max-width:420px}}
.rc{position:relative;border:2px solid var(--ink3);background:var(--ink2);padding:0;aspect-ratio:1;max-width:100%;overflow:hidden;transition:transform .15s,border-color .15s}
.rc img{width:100%;height:100%;object-fit:cover;display:block}
.rc b{position:absolute;left:0;right:0;bottom:0;font:400 12px/1 var(--display);font-weight:400;padding:4px 2px;background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:center}
.rc[aria-pressed="true"]{border-color:var(--c);transform:translateY(-4px);box-shadow:0 6px 0 var(--c)}
.help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font:600 13px/1.3 var(--ui);margin:0}
.help dt{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--muted-dark)}
.help dd{margin:0 0 6px}
.stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.stat3 div{border:2px solid var(--ink);padding:8px 4px}
.stat3 b{display:block;font:400 26px/1 var(--display);font-variant-numeric:tabular-nums}
.stat3 span{font:800 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.rank{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font:700 15px/1.2 var(--ui)}
.rank li{display:flex;justify-content:space-between;border-bottom:1px solid #d8ccb2;padding:4px 0;font-variant-numeric:tabular-nums}
.rank li.me{color:var(--curse)}
#rotate{z-index:40;text-align:center;flex-direction:column;gap:14px}
#rotate:not([hidden]){display:flex}
#rotate .phone{width:46px;height:78px;border:4px solid var(--bone);border-radius:9px;animation:rot 1.8s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#rotate p{margin:0;font:700 18px/1.3 var(--ui);max-width:28ch}
#loading{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,#2a1a33,var(--ink))}
.lbar{width:min(320px,70vw);height:8px;border:2px solid var(--bone);transform:skewX(-14deg);overflow:hidden}
.lbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--curse),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .2s}
#ltext{margin:0;font:700 14px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px) and (orientation:portrait){
  #select{flex-direction:column}.sel-art{flex:0 0 36vh}
  .title-art{width:100%;opacity:.35}.title-main{width:100%}
}
@media (max-height:430px){
  .sel-panel .hdr h2{font-size:24px}.moves{gap:3px 12px}.moves li{font-size:11.5px}.moves li b{font-size:12.5px}
  .hdr h2{font-size:23px}.card{padding:12px;gap:9px}.seg button{padding:6px 4px;font-size:14px}
  .mbtn{padding:9px 16px}.mbtn b{font-size:19px}
}
@media (max-width:460px){.moves,.help{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  #banner.show,#ultCard.show{animation-duration:.01s;opacity:1}
  #rotate .phone,.enb.ready,.ult.ready,.go.big,#vig.on{animation:none}
}

.go.sticky{position:sticky;bottom:calc(8px + var(--sb));z-index:3;box-shadow:0 0 0 6px rgba(18,15,28,.85),5px 5px 0 6px var(--ink)}
.tag.target span{color:var(--gold)}

#modeSeg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#diffSeg{flex-wrap:wrap}
#gore{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;background:
 radial-gradient(circle at 12% 18%,rgba(140,0,14,.85) 0 7%,transparent 8%),radial-gradient(circle at 86% 26%,rgba(120,0,10,.8) 0 5%,transparent 6%),
 radial-gradient(circle at 70% 80%,rgba(150,0,16,.75) 0 9%,transparent 10%),radial-gradient(circle at 24% 74%,rgba(110,0,10,.7) 0 4%,transparent 5%),
 radial-gradient(ellipse at center,transparent 55%,rgba(90,0,8,.55) 100%)}
#gore.on{animation:gore 2.4s ease-out forwards}
@keyframes gore{0%{opacity:0}8%{opacity:1}70%{opacity:.85}100%{opacity:0}}
#combo{position:absolute;left:calc(14px + var(--sl));top:calc(112px + var(--st));display:flex;flex-direction:column;align-items:flex-start;opacity:0;transform:translateX(-12px);transition:opacity .2s,transform .2s;text-shadow:0 2px 0 #000}
#combo.on{opacity:1;transform:none}
#combo b{font:400 42px/1 var(--display);color:var(--gold);-webkit-text-stroke:2px #000}
#combo span{font:800 13px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase}
#combo small{font:700 12px/1.2 var(--ui);color:var(--bone);opacity:.85}
#combo.pop b{animation:cpop .18s ease-out}
@keyframes cpop{from{transform:scale(1.5)}to{transform:none}}
#fatalHint{position:absolute;left:0;right:0;top:calc(42% + 40px);text-align:center;font:800 18px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000,0 0 14px #ff1840;animation:awp .5s ease-in-out infinite alternate}
.ult.fatal{border-color:#ff1840!important;background:radial-gradient(circle,rgba(255,24,64,.65),rgba(60,0,8,.7))!important;animation:pulse .5s ease-in-out infinite alternate}
.tag.ally span{color:var(--venom)}

/* feedback de texto (defesa, esquiva, parede) */
.num.txt{font:800 15px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#e8f6ff;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.6)}
.num.txt.block{color:#9fe6ff}
.num.txt.miss{color:#d8d0e8}
.num.txt.wall{font:400 26px/1 var(--display);color:#ffc53d;-webkit-text-stroke:1px #000}
/* seta do alvo fora da tela */
#offArrow{position:fixed;left:0;top:0;width:34px;height:34px;z-index:7;pointer-events:none;opacity:0;transition:opacity .15s;will-change:transform}
#offArrow::before{content:'';position:absolute;inset:0;background:var(--c,#ffc53d);clip-path:polygon(100% 50%,15% 0,35% 50%,15% 100%);filter:drop-shadow(0 0 4px #000)}
#mapSeg{flex-wrap:wrap}

/* ======== online ======== */
.mbtn.online{border-left-color:var(--venom)}
.form{display:flex;flex-direction:column;gap:10px}
.form label,.field{display:flex;flex-direction:column;gap:4px;font:800 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.form input,.field input,.codeform input{font:600 18px/1.2 var(--ui);letter-spacing:.02em;text-transform:none;padding:10px 12px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:0;min-width:0}
.form input:focus,.field input:focus,.codeform input:focus{outline:3px solid var(--sorc);outline-offset:0}
.err{margin:0;min-height:1.1em;color:#c0153f;font:700 14px/1.25 var(--ui)}
.note.small{font-size:13px;opacity:.8}
.or{display:flex;align-items:center;gap:10px;color:var(--muted-dark);font:700 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em}
.or:before,.or:after{content:"";flex:1;height:2px;background:var(--ink);opacity:.2}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:800 17px/1 var(--ui);box-shadow:4px 4px 0 var(--ink)}
.gbtn svg{width:22px;height:22px}.gbtn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.row.wrap{flex-wrap:wrap;align-items:stretch}
.codeform{display:flex;gap:6px;flex:1 1 220px}.codeform input{flex:1;text-transform:uppercase;letter-spacing:.3em;font-weight:800}
.me-chip{margin-left:auto;font:800 14px/1 var(--ui);background:var(--ink);color:var(--bone);padding:6px 10px;letter-spacing:.03em}
.me-chip i{font-style:normal;color:var(--gold);margin-left:6px}
.rooms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto}
.rooms li{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);padding:8px 10px;background:#fff}
.rooms li.empty{justify-content:center;color:var(--muted-dark);font:600 15px/1.3 var(--ui);border-style:dashed;background:transparent}
.rooms .ri{flex:1;min-width:0}.rooms .ri b{display:block;font:800 17px/1.1 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rooms .ri small{font:600 13px/1.2 var(--ui);color:var(--muted-dark)}.rooms .cnt{font:800 16px/1 var(--ui)}
.rooms button{padding:8px 12px;border:2px solid var(--ink);background:var(--ink);color:var(--bone);font:800 14px/1 var(--ui);text-transform:uppercase}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:var(--bone);padding:10px 12px}
.codebox small{display:block;font:700 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.codebox b{font:400 30px/1 var(--display);letter-spacing:.18em}
.codebox .ghost{color:var(--bone);border-color:var(--bone)}
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.slots li{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);padding:6px;background:#fff;min-height:58px}
.slots li.open{border-style:dashed;background:transparent;color:var(--muted-dark);justify-content:center;font:600 14px/1 var(--ui)}
.slots img{width:44px;height:44px;object-fit:cover;background:var(--ink2);flex:none}
.slots .si{flex:1;min-width:0}.slots .si b{display:block;font:800 16px/1.1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slots .si small{font:600 12px/1.1 var(--ui);color:var(--muted-dark)}
.slots .rdy{font:800 12px/1 var(--ui);padding:4px 6px;border:2px solid var(--ink);text-transform:uppercase}
.slots .rdy.on{background:var(--venom);}
.slots .t1{box-shadow:inset 5px 0 0 var(--sorc)}.slots .t2{box-shadow:inset 5px 0 0 var(--curse)}
.roster.mini{max-width:none;grid-template-columns:repeat(6,minmax(0,1fr))}
.roster.mini .rc b{font-size:10px}
#readyBtn[aria-pressed="true"]{background:var(--venom);color:var(--ink)}
.rank.big li{font-size:16px}
.rank.big li .rt{font-weight:800}
.toast{position:fixed;left:50%;top:calc(14px + var(--st));transform:translateX(-50%);z-index:90;background:var(--ink);color:var(--bone);border:2px solid var(--gold);padding:10px 16px;font:700 15px/1.2 var(--ui);max-width:90vw;text-align:center}
@media (max-width:520px){ .slots{grid-template-columns:1fr} .roster.mini{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ======== tela cheia e espaço da logo do Netlify ======== */
.fsb{display:grid;place-items:center;padding:0 10px}
.fsb svg,.fsfloat svg{width:18px;height:18px}
.fsfloat{position:fixed;z-index:60;top:calc(10px + var(--st));right:calc(10px + var(--sr));display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:2px solid var(--bone);background:rgba(18,15,28,.78);color:var(--bone);font:800 13px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.fsfloat:active{transform:translate(1px,1px)}
html.fs .fsfloat span{display:none}
html.fs .fsb svg path,html.fs .fsfloat svg path{d:path("M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5")}
html.nofs .fsfloat,html.nofs .fsb{display:none}
html.playing .fsfloat{display:none}
/* no Netlify a logo "Powered by Netlify" ocupa o canto de baixo à direita: os botões sobem e deixam esse espaço livre */
html.nl{--sb:calc(env(safe-area-inset-bottom,0px) + 42px)}
html.nl #controls{--k:calc(var(--u)*var(--bs)*.86)}

/* =====================================================================
   DAMNED FIGHT — tema sério: preto quente, vermelho sangue, laranja brasa
   ===================================================================== */
html,body{background:var(--ink)}
::selection{background:var(--curse);color:#fff}

/* ---------- ícones ---------- */
.ico{display:block;width:62%;height:62%;--ic:var(--acc,var(--ember));pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.ico .f{fill:currentColor;stroke:none}
.ico .a{stroke:var(--ic)}
.ico .a.f{fill:var(--ic);stroke:none}
.ico .k{stroke:#0b090a;stroke-width:2.6}
.ico .k.f{fill:#0b090a;stroke:none}

/* ---------- botões de luta ---------- */
#controls{--bo:.85}
#controls .cb{right:calc(var(--sr) + var(--k)*var(--x));bottom:calc(var(--sb) + var(--k)*var(--y));opacity:var(--bo)}
html.lefty #controls .cb{right:auto;left:calc(var(--sl) + var(--k)*var(--x))}
#bM1{--x:20px;--y:20px}#bJump{--x:122px;--y:12px}#bDodge{--x:124px;--y:82px}#bBlock{--x:24px;--y:122px}#bDash{--x:92px;--y:148px}
#bS5{--x:192px;--y:18px}#bUlt{--x:194px;--y:96px}
#bS4{--x:20px;--y:208px}#bS3{--x:86px;--y:208px}#bS2{--x:152px;--y:208px}#bS1{--x:218px;--y:208px}
.cb{border:1.5px solid rgba(236,227,211,.38);background:radial-gradient(circle at 50% 30%,rgba(60,44,48,.72),rgba(11,9,10,.78));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.45);gap:1px}
.cb .ico{width:56%;height:56%;position:relative;z-index:0}
.cb .lbl{font:700 calc(var(--k)*9.5px)/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:rgba(236,227,211,.88);text-shadow:0 1px 0 #000;margin-top:1px;z-index:1}
.cb .key{position:absolute;left:calc(var(--k)*5px);top:calc(var(--k)*3px);margin:0;font:800 calc(var(--k)*10px)/1 var(--ui);color:var(--acc);opacity:.95;z-index:1}
.desk .cb .key{opacity:1}
html.nolbl .cb .lbl{display:none}
html.nolbl .cb .ico{width:64%;height:64%}
.cb .cd{background:conic-gradient(rgba(5,4,5,.84) calc(var(--p,0)*1turn),transparent 0);z-index:2}
.cb .cdt{z-index:3;font:900 calc(var(--k)*19px)/1 var(--ui);color:#fff}
.cb.down{background:radial-gradient(circle,rgba(236,227,211,.35),rgba(30,22,24,.8));transform:scale(.9)}
.cb.big{border:2.5px solid var(--acc);background:radial-gradient(circle at 50% 30%,rgba(110,30,26,.75),rgba(11,9,10,.82));box-shadow:0 0 0 3px rgba(0,0,0,.5),0 0 18px color-mix(in srgb,var(--acc) 45%,transparent)}
.cb.big .ico{width:52%;height:52%}
.sk{border-radius:calc(var(--k)*13px);border-color:color-mix(in srgb,var(--acc) 70%,#fff 10%)}
.sk.sp{width:calc(var(--k)*64px);height:calc(var(--k)*62px);border-style:solid;border-width:2px;border-color:var(--ember);
  background:radial-gradient(circle at 50% 30%,rgba(120,36,14,.7),rgba(11,9,10,.82));--acc:var(--ember)}
.sk.sp::after{content:'';position:absolute;inset:3px;border-radius:inherit;border:1px dashed rgba(255,140,60,.45);pointer-events:none}
.sk.flash{background:#fff;color:var(--ink);box-shadow:0 0 22px #fff;border-color:#fff}
.ult{border:2px solid var(--gold);color:var(--gold);width:calc(var(--k)*60px);height:calc(var(--k)*60px)}
.ult .ico{--ic:var(--gold)}
.ult.ready{background:radial-gradient(circle,rgba(242,168,35,.55),rgba(60,20,6,.8));color:#fff;box-shadow:0 0 20px var(--gold)}
.ult.active{background:radial-gradient(circle,#ffd36a,var(--ember) 70%);color:#160806;box-shadow:0 0 26px var(--ember);animation:awp .4s ease-in-out infinite alternate}
.ult.active .ico{--ic:#160806}
.ult.fatal{border-color:var(--curse)!important;color:#fff}
#bBlock.down{background:radial-gradient(circle,rgba(88,184,255,.55),rgba(11,9,10,.8))}
#joy{border:1.5px solid rgba(236,227,211,.35);background:radial-gradient(circle,rgba(11,9,10,.15),rgba(11,9,10,.45));width:calc(var(--k)*var(--js,1)*124px);height:calc(var(--k)*var(--js,1)*124px);margin:calc(var(--k)*var(--js,1)*-62px) 0 0 calc(var(--k)*var(--js,1)*-62px)}
#joy::before{content:'';position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(236,227,211,.18)}
#knob{background:radial-gradient(circle at 40% 35%,#f4ecdf,#9d9187);box-shadow:0 2px 8px rgba(0,0,0,.6);width:calc(var(--k)*var(--js,1)*50px);height:calc(var(--k)*var(--js,1)*50px);margin:calc(var(--k)*var(--js,1)*-25px) 0 0 calc(var(--k)*var(--js,1)*-25px)}

/* ---------- HUD ---------- */
#hud{--hs:1}
.fbar{transform:scale(var(--hs));transform-origin:top left;width:min(340px,38vw)}
.fbar.right{transform-origin:top right;top:calc(48px + var(--st))}
#mid{transform:translateX(-50%) scale(var(--hs));transform-origin:top center}
#combo{transform-origin:left top}
.por{width:50px;height:50px;border:2px solid var(--acc);border-radius:2px;transform:none;box-shadow:0 0 0 2px #000,0 4px 12px rgba(0,0,0,.6);clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.right .por{clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.fname b{font:400 18px/1 var(--display);letter-spacing:.02em;text-shadow:0 2px 0 #000}
.fname span{font:800 10.5px/1 var(--ui);letter-spacing:.16em}
.hpb,.enb,.evb{background:rgba(8,6,7,.82);border:1px solid rgba(236,227,211,.55);box-shadow:0 0 0 1px #000}
.hpb{height:16px}
.hpb .ghost{background:#f6e7c8}
.hpb .fill{background:linear-gradient(180deg,#ffcf5a 0%,#f2862a 45%,#c9231a 100%)}
.hpb.low .fill{background:linear-gradient(180deg,#ff6a5a,#9a0c10)}
.enb .fill{background:linear-gradient(90deg,#7a1410,var(--ember) 60%,var(--gold))}
.enb.ready{border-color:var(--gold)}
.hpt,.ent{font:800 10px/1 var(--ui);letter-spacing:.1em}
#timer{font:400 30px/1 var(--display);background:linear-gradient(#1c1416,#0b090a);border:1.5px solid var(--curse);color:var(--bone);padding:5px 12px 2px;min-width:64px;box-shadow:0 4px 14px rgba(0,0,0,.6)}
#rounds i{border-color:rgba(236,227,211,.6)}
#rounds i.on{background:var(--curse);border-color:#ff6a5a;box-shadow:0 0 6px var(--curse)}
#rounds b{font:800 12px/1 var(--ui);letter-spacing:.14em}
#score{font:800 12.5px/1.1 var(--ui);letter-spacing:.12em}
#tr{gap:6px}
#tr .pill{height:36px;min-width:36px;padding:0 9px;display:flex;align-items:center;gap:6px;border:1px solid rgba(236,227,211,.4);background:rgba(11,9,10,.7);clip-path:none;border-radius:6px}
#tr .pill .ico{width:20px;height:20px;--ic:var(--gold)}
#tr .pill span{font:800 12px/1 var(--ui);letter-spacing:.06em;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tr .pill.on{background:var(--curse);border-color:var(--curse);color:#fff}
#tr .pill.on .ico{--ic:#fff}
#feed div{background:rgba(11,9,10,.82);border-left:3px solid var(--curse);font:700 12.5px/1 var(--ui);letter-spacing:.03em}
#banner{font:400 clamp(40px,9vw,92px)/1 var(--display);color:var(--bone);-webkit-text-stroke:2px #000;text-shadow:5px 5px 0 var(--curse),0 0 40px rgba(224,34,28,.55)}
#ultCard b{font:400 clamp(34px,7.5vw,72px)/1 var(--display)}
#combo b{font:400 46px/1 var(--display);color:var(--gold);-webkit-text-stroke:1.5px #000;text-shadow:3px 3px 0 var(--curse)}
#combo span{font:900 13px/1 var(--ui);letter-spacing:.28em}
html.nocombo #combo{display:none!important}
html.nonum #nums .num:not(.txt){display:none}
.num{font:900 22px/1 var(--ui);color:#fff;text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.8);letter-spacing:.02em}
.num.big{font:400 34px/1 var(--display);color:#ff3a2a;-webkit-text-stroke:1px #000}
.num.me{color:#ff9b8a}
.tag span{font:800 12px/1 var(--ui);letter-spacing:.05em}
.tag .hb{border:1px solid rgba(236,227,211,.55)}
.tag .hb i{background:linear-gradient(90deg,#c9231a,#f2862a)}

/* ---------- telas ---------- */
.screen{background-color:transparent}
.center{background:radial-gradient(ellipse at 50% 40%,rgba(30,10,12,.72),rgba(5,4,5,.9))}
.logo-slot img.logo{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(224,34,28,.25));-webkit-user-drag:none}
#loading{background:radial-gradient(circle at 50% 40%,#2a0d0e,#050405 70%)}
#loading .logo-slot{width:min(340px,70vw);animation:logoIn .8s cubic-bezier(.2,1.2,.3,1) both}
.lbar{height:6px;border:1px solid rgba(236,227,211,.5);transform:none}
.lbar i{background:linear-gradient(90deg,var(--blood),var(--curse),var(--gold))}
#ltext{font:800 13px/1 var(--ui);letter-spacing:.28em}

/* título */
#title{background:radial-gradient(ellipse at 70% 55%,#3a0c0c 0%,#140808 45%,#050405 85%);justify-content:flex-start;padding-left:max(5vw,var(--sl))}
.title-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.title-bg .sun{position:absolute;right:6%;top:50%;width:min(78vh,52vw);aspect-ratio:1;transform:translateY(-52%);border-radius:50%;
  background:radial-gradient(circle,rgba(242,120,30,.55),rgba(160,20,14,.35) 45%,transparent 70%);filter:blur(6px);animation:sunp 5s ease-in-out infinite}
@keyframes sunp{50%{opacity:.75;transform:translateY(-52%) scale(1.04)}}
.title-bg img{position:absolute;right:2%;bottom:-2%;height:104%;width:auto;max-width:62vw;object-fit:contain;object-position:bottom right;animation:artIn .9s ease-out both;filter:drop-shadow(0 0 40px rgba(0,0,0,.6))}
.title-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,5,.92) 0%,rgba(5,4,5,.55) 38%,transparent 62%),linear-gradient(0deg,rgba(5,4,5,.85),transparent 30%)}
.embers{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 80%,#ff8a3a,transparent),radial-gradient(2px 2px at 60% 90%,#ffb35a,transparent),radial-gradient(1.5px 1.5px at 80% 70%,#ff5a1a,transparent),radial-gradient(2px 2px at 40% 95%,#ff7a2a,transparent),radial-gradient(1.5px 1.5px at 90% 85%,#ffd07a,transparent);
  background-size:300px 300px;animation:emb 7s linear infinite;opacity:.8}
@keyframes emb{from{background-position:0 0}to{background-position:-60px -300px}}
.title-main{width:min(560px,52vw);gap:16px}
.title-main .tag{font:700 15px/1.2 var(--ui);letter-spacing:.32em;color:var(--bone);opacity:.85}
#title .go.big{margin-top:6px}
.ver{position:absolute;left:max(16px,var(--sl));bottom:calc(10px + var(--sb));margin:0;font:700 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(236,227,211,.35);z-index:2}

/* botão principal */
.go{font:400 22px/1 var(--display);background:linear-gradient(180deg,#e8321f,#9b0f0e);color:#fff;border:0;padding:14px 26px 12px;box-shadow:0 0 0 2px #000,0 6px 0 #3d0606,0 10px 24px rgba(0,0,0,.5);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);text-shadow:0 2px 0 rgba(0,0,0,.45);letter-spacing:.03em}
.go:hover{filter:brightness(1.15)}
.go:active{transform:translateY(3px)}
.go.big{font-size:24px;animation:pulse 1.6s ease-in-out infinite}
.go.sticky{box-shadow:0 0 0 6px rgba(11,9,10,.9),0 6px 0 6px #3d0606}

/* menu principal */
#main{background:linear-gradient(90deg,rgba(5,4,5,.92),rgba(5,4,5,.6) 55%,rgba(5,4,5,.15)),radial-gradient(ellipse at 80% 60%,rgba(120,16,12,.35),transparent 60%)}
.menu-col{gap:18px}
.logo-slot.small{width:min(300px,56vw)}
.mbtn{position:relative;flex-direction:row;align-items:center;gap:14px;padding:12px 18px 12px 14px;border:1px solid var(--line);border-left:4px solid var(--curse);
  background:linear-gradient(90deg,rgba(28,20,22,.92),rgba(14,10,12,.6));clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.mbtn .ico{width:34px;height:34px;flex:none;color:var(--bone);--ic:var(--curse)}
.mbtn .mt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mbtn b{font:400 23px/1 var(--display);letter-spacing:.02em}
.mbtn small{font:600 13.5px/1.2 var(--ui);color:var(--muted)}
.mbtn:hover,.mbtn:active{transform:translateX(8px);background:linear-gradient(90deg,rgba(70,16,14,.92),rgba(20,10,12,.6))}
.mbtn:nth-child(2){border-left-color:var(--sorc)}.mbtn:nth-child(2) .ico{--ic:var(--sorc)}
.mbtn:nth-child(3){border-left-color:var(--gold)}.mbtn:nth-child(3) .ico{--ic:var(--gold)}
.mbtn:nth-child(4){border-left-color:var(--muted)}.mbtn:nth-child(4) .ico{--ic:var(--muted)}
.mbtn:nth-child(5){border-left-color:var(--venom)}.mbtn:nth-child(5) .ico{--ic:var(--venom)}

/* painéis (cards) escuros */
.card{background:linear-gradient(180deg,rgba(26,19,21,.97),rgba(12,9,10,.97));color:var(--bone);border:1px solid var(--line);border-top:3px solid var(--curse);
  box-shadow:0 24px 60px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.04);border-radius:2px}
.hdr h2{font:400 30px/1 var(--display);transform:none;letter-spacing:.02em}
.back{border:1px solid var(--line);color:var(--bone);border-radius:4px;background:rgba(255,255,255,.03)}
.sec h3{color:var(--gold);font:800 12px/1 var(--ui);letter-spacing:.22em}
.seg button{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--bone);border-radius:3px;font:800 15.5px/1.05 var(--ui)}
.seg button small{color:var(--muted);opacity:1}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,#c42a1c,#7c0c0c);border-color:#ff5a3a;color:#fff;box-shadow:0 0 12px rgba(224,34,28,.35)}
.seg button[aria-pressed="true"] small{color:#ffd9cf}
.seg+.seg{margin-top:6px}
.rng label{color:var(--muted)}
.rng output{color:var(--bone)}
.rng input{accent-color:var(--curse)}
.hudgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-bottom:8px}
@media (max-width:520px){.hudgrid{grid-template-columns:1fr}}
.ghost{border:1px solid var(--line);color:var(--bone);background:rgba(255,255,255,.03);border-radius:3px}
.ghost:hover{border-color:var(--bone)}
.note{color:var(--muted)}
.help dt{color:var(--gold)}
.help dd{color:var(--bone)}
.help b{color:var(--gold)}
.stat3 div{border:1px solid var(--line);background:rgba(255,255,255,.03)}
.stat3 span{color:var(--muted)}
.rank li{border-bottom:1px solid var(--line)}
.rank li.me{color:var(--gold)}
.form label,.field{color:var(--muted)}
.form input,.field input,.codeform input{background:#0b090a;color:var(--bone);border:1px solid var(--line);border-radius:3px}
.err{color:#ff6b5e}
.or{color:var(--muted)}
.or:before,.or:after{background:var(--bone);opacity:.15}
.gbtn{border:0;border-radius:3px;box-shadow:0 4px 0 #000}
.me-chip{background:rgba(255,255,255,.06);border:1px solid var(--line)}
.rooms li,.slots li{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--bone)}
.rooms li.empty,.slots li.open{color:var(--muted);background:transparent;border-style:dashed}
.rooms .ri small,.slots .si small{color:var(--muted)}
.rooms button{background:var(--curse);border:0;color:#fff;border-radius:3px}
.codebox{background:#050405;border:1px solid var(--line)}
.slots .rdy{border:1px solid var(--line)}
.slots .rdy.on{background:var(--venom);color:#0b090a}
.toast{background:#0b090a;border:1px solid var(--gold);border-radius:3px}

/* seleção */
#select{background:radial-gradient(ellipse at 22% 60%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 55%),linear-gradient(90deg,rgba(5,4,5,.35),rgba(5,4,5,.92) 46%)}
.sel-art img{-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7))}
.sel-glow{background:radial-gradient(circle,var(--acc),transparent 62%);opacity:.5}
.sel-panel .hdr h2{font-size:40px;text-shadow:3px 3px 0 color-mix(in srgb,var(--acc) 80%,#000)}
#selTitle{color:var(--acc);letter-spacing:.24em}
.catb{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 12px 5px 8px;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);background:rgba(11,9,10,.7);border-radius:3px}
.catb .ico{width:22px;height:22px;--ic:var(--acc)}
.catb b{font:800 13px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.catb small{font:600 13px/1.2 var(--ui);color:var(--muted)}
.stats div{background:rgba(255,255,255,.07)}
.moves li{grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center}
.moves li .mi{width:34px;height:34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:7px;background:rgba(11,9,10,.75);position:relative}
.moves li .mi .ico{width:76%;height:76%;color:var(--bone)}
.moves li .mi em{position:absolute;left:2px;top:1px;font:900 9px/1 var(--ui);font-style:normal;color:var(--acc)}
.moves li.s5 .mi{border-color:var(--ember)}
.moves li.aw .mi{border-color:var(--gold)}
.moves li.aw .mi .ico{--ic:var(--gold)}
.moves li b em{font:700 10px/1 var(--ui);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-left:6px;opacity:.9}
.roster{grid-template-columns:repeat(7,minmax(0,1fr));max-width:620px;gap:6px}
@media (max-width:700px){.roster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rc{border:1.5px solid rgba(236,227,211,.18);background:#0b090a;border-radius:3px;clip-path:polygon(0 0,100% 0,100% 84%,84% 100%,0 100%)}
.rc img{filter:saturate(.75) brightness(.8);transition:filter .15s}
.rc[aria-pressed="true"] img,.rc:hover img{filter:none}
.rc b{font:400 12px/1 var(--display)}
.rc .ci{position:absolute;right:3px;top:3px;width:18px;height:18px;padding:2px;border-radius:3px;background:rgba(11,9,10,.8)}
.rc .ci .ico{width:100%;height:100%;color:var(--bone);--ic:var(--c)}
.rc[aria-pressed="true"]{border-color:var(--c);transform:translateY(-3px);box-shadow:0 4px 0 var(--c),0 0 18px color-mix(in srgb,var(--c) 50%,transparent)}

/* tutorial */
html.tuton #mid{visibility:hidden}
#tut{position:fixed;left:calc(10px + var(--sl));top:calc(96px + var(--st));z-index:30;width:min(430px,50vw);align-items:flex-start;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}
#tut .tbox{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(180deg,rgba(26,19,21,.95),rgba(11,9,10,.95));border:1px solid var(--line);border-left:4px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.6);width:100%}
#tut .tbox .ico{width:40px;height:40px;flex:none;color:var(--bone);--ic:var(--gold)}
#tut .tt{flex:1;min-width:0}
#tut .tt small{display:block;font:800 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
#tut .tt b{display:block;font:400 20px/1.05 var(--display)}
#tut .tt p{margin:4px 0 0;font:600 14px/1.25 var(--ui);color:var(--bone)}
#tut .tprog{height:4px;width:100%;background:rgba(255,255,255,.1);overflow:hidden}
#tut .tprog i{display:block;height:100%;background:linear-gradient(90deg,var(--curse),var(--gold));transform-origin:left;transition:transform .3s}
#tut .tskip{pointer-events:auto;align-self:flex-start;font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line);background:rgba(11,9,10,.8);color:var(--bone);border-radius:3px}
#tut .tbox.done{border-left-color:var(--venom)}
#tut .tbox.pop{animation:tpop .35s ease-out}
@keyframes tpop{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
.cb.hint{animation:hintp .7s ease-in-out infinite alternate;opacity:1!important}
@keyframes hintp{from{box-shadow:0 0 0 2px var(--gold),0 0 6px var(--gold)}to{box-shadow:0 0 0 4px var(--gold),0 0 26px var(--gold)}}
#tutAsk .card{width:min(460px,100%)}
@media (max-height:430px){
  #tut{top:calc(84px + var(--st))} #tut .tt b{font-size:17px} #tut .tt p{font-size:13px} #tut .tbox{padding:7px 10px}
  .sel-panel .hdr h2{font-size:30px} .moves li .mi{width:28px;height:28px} .moves li{grid-template-columns:28px minmax(0,1fr)}
  .mbtn .ico{width:28px;height:28px} .mbtn b{font-size:19px}
}
@media (max-width:760px) and (orientation:portrait){ .title-bg img{max-width:100vw;opacity:.45} .title-main{width:100%} }
.title-main .logo-slot{width:min(100%,calc(56vh*1.735))}
@media (max-height:430px){
  .menu-col{gap:8px}.logo-slot.small{width:calc(22vh*1.735)}
  .mlist{gap:6px}.mbtn{padding:6px 14px 6px 10px;gap:10px}.mbtn b{font-size:18px}.mbtn small{font-size:12px}.mbtn .ico{width:24px;height:24px}
  .title-main{gap:10px}.title-main .tag{font-size:12px}
}
html.lefty #tut{left:auto;right:calc(10px + var(--sr))}

/* ---------- avatar + moldura ---------- */
.av{position:relative;display:inline-block;flex:none;width:var(--s,48px);height:var(--s,48px)}
.av img{position:absolute;left:10%;top:10%;width:80%;height:80%;object-fit:cover;border-radius:2px;background:#151113}
.av svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.av .flick{animation:flick .5s steps(2) infinite}
@keyframes flick{50%{opacity:.6;transform:translateY(-1px)}}
.av .glow{filter:drop-shadow(0 0 3px #ff4a12);animation:awp .8s ease-in-out infinite alternate}
.fr-maldito img{box-shadow:0 0 12px rgba(255,74,18,.55)}
/* patentes */
.pat{width:28px;height:28px;flex:none;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.pat.p5{animation:patg 1.4s ease-in-out infinite alternate}
@keyframes patg{to{filter:drop-shadow(0 0 7px #ff5a12)}}

/* ---------- fim de partida: notas ---------- */
#end .card{width:min(620px,100%)}
#end .hdr{position:relative;padding-right:96px;min-height:56px}
#endTitle{font-size:40px}
.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.results li{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-left:3px solid var(--c);background:rgba(255,255,255,.03);opacity:0;animation:rowIn .35s ease-out forwards;animation-delay:calc(var(--d) - .3s)}
.results li.me{background:linear-gradient(90deg,rgba(224,34,28,.18),rgba(255,255,255,.02));border-color:rgba(224,34,28,.5);border-left-color:var(--c)}
.results .rn{flex:1;min-width:0}
.results .rn b{display:block;font:800 16px/1.1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results .rn small{font:600 12.5px/1.2 var(--ui);color:var(--muted)}
.results li.win .rn b::after{content:' · vencedor';font:800 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.gr{font:400 30px/1 var(--display);width:46px;text-align:center;opacity:0;animation:stamp .42s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:var(--d);text-shadow:2px 2px 0 #000}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(3) rotate(-18deg)}60%{opacity:1;transform:scale(.9) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
.g-SS{color:#fff;-webkit-text-stroke:1px #ff4a12;text-shadow:0 0 14px #ff6a1a,3px 3px 0 #8e0c10}
.g-S{color:var(--gold);text-shadow:0 0 10px rgba(242,168,35,.6),2px 2px 0 #000}
.g-A{color:#ff4a3a}.g-B{color:#ff9a3a}.g-C{color:var(--bone)}.g-D{color:#8d837b}
.mygrade{position:absolute;right:0;top:-6px;display:flex;flex-direction:column;align-items:center;opacity:0}
.mygrade.in{animation:stamp .55s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:var(--d)}
.mygrade small{font:800 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mygrade b{font:400 64px/1 var(--display);font-weight:400}
.endrate{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);background:rgba(0,0,0,.3)}
.endrate .pat{width:40px;height:40px}
.endrate b{display:block;font:400 20px/1 var(--display)}
.endrate small{font:600 13px/1.2 var(--ui);color:var(--muted)}
.endrate em{font-style:normal;font-weight:800}.endrate em.up{color:var(--venom)}.endrate em.down{color:#ff6b5e}
.endrate.promo{animation:promo 1.2s ease-out}
@keyframes promo{0%{box-shadow:0 0 0 0 var(--gold)}30%{box-shadow:0 0 0 6px var(--gold),0 0 40px var(--gold)}100%{box-shadow:none}}

/* ---------- perfil ---------- */
.profchip{position:absolute;right:calc(12px + var(--sr));top:calc(58px + var(--st));display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:1px solid var(--line);background:rgba(11,9,10,.78);color:var(--bone);border-radius:4px;max-width:260px;text-align:left}
.profchip span{display:flex;flex-direction:column;gap:2px;min-width:0}
.profchip b{font:800 15px/1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profchip small{font:600 12px/1 var(--ui);color:var(--muted)}
.profchip .pat{width:26px;height:26px}
.profchip:hover{border-color:var(--bone)}
.phead{display:flex;align-items:center;gap:16px}
.pinfo{display:flex;flex-direction:column;gap:6px;min-width:0}
.pinfo b{font:400 28px/1 var(--display)}
.pinfo small{font:600 13px/1 var(--ui);color:var(--muted)}
.ppat{display:flex;align-items:center;gap:8px;font:800 14px/1 var(--ui);letter-spacing:.06em}
.ppat .pat{width:34px;height:34px}
.avpick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.avb{width:52px;height:52px;padding:0;border:2px solid var(--line);background:#0b090a;border-radius:4px;overflow:hidden}
.avb img{width:100%;height:100%;object-fit:cover;display:block}
.avb.on{border-color:var(--curse);box-shadow:0 0 10px rgba(224,34,28,.5)}
.upl{display:inline-flex;align-items:center;margin:0 8px 8px 0;cursor:pointer}
.frpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.frb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--bone);border-radius:4px}
.frb b{font:800 13px/1 var(--ui)}.frb small{font:600 11px/1 var(--ui);color:var(--muted)}
.frb.on{border-color:var(--curse);background:rgba(224,34,28,.12)}
.frb.lock .av{filter:grayscale(1) brightness(.5)}
.stat4{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.stat4 div{border:1px solid var(--line);background:rgba(255,255,255,.03);padding:8px;text-align:center}
.stat4 b{display:block;font:400 22px/1 var(--display)}
.stat4 span{font:800 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.patlist{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media (max-width:560px){.patlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.patlist div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border:1px solid var(--line);opacity:.75}
.patlist div.on{opacity:1;border-color:var(--gold);background:rgba(242,168,35,.08)}
.patlist .pat{width:40px;height:40px}
.patlist b{font:800 13px/1 var(--ui)}.patlist small{font:600 11px/1 var(--ui);color:var(--muted)}

/* ---------- ranking ---------- */
.rankmine{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(242,168,35,.4);background:rgba(242,168,35,.06)}
.rankmine div{flex:1;min-width:0}.rankmine b{display:block;font:800 16px/1.1 var(--ui)}.rankmine small{font:600 12.5px/1.2 var(--ui);color:var(--muted)}
.rank.big li{display:flex;align-items:center;gap:10px;justify-content:flex-start;padding:6px 4px}
.rank.big .pos{width:26px;text-align:center;font:400 18px/1 var(--display);color:var(--muted)}
.rank.big .nm{flex:1;min-width:0}.rank.big .nm b{display:block;font:800 15px/1.1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank.big .nm small{font:600 12px/1.2 var(--ui);color:var(--muted)}
.rank.big .rt{font:900 17px/1 var(--ui);min-width:70px;text-align:right}.rank.big .rt small{font-size:11px;color:var(--muted);font-weight:700}
.rank.big li.top1 .pos{color:var(--gold)}.rank.big li.top2 .pos{color:#dfe6ee}.rank.big li.top3 .pos{color:#d08a48}
.rank.big li.ld{justify-content:center;color:var(--muted);padding:14px}
.me-chip{display:flex;align-items:center;gap:6px;cursor:pointer;padding:3px 10px 3px 3px}
.me-chip .pat{width:22px;height:22px}

.fsfloat{width:40px;height:40px;padding:0;justify-content:center;border-radius:4px;border:1px solid rgba(236,227,211,.45)}
.fsfloat span{display:none}

/* tutorial compacto: não cobre o lutador */
#tut{width:min(330px,42vw);top:calc(92px + var(--st));gap:5px}
#tut .tbox{padding:7px 10px;gap:9px;background:linear-gradient(180deg,rgba(26,19,21,.82),rgba(11,9,10,.82));cursor:pointer}
#tut .tbox .ico{width:28px;height:28px}
#tut .tt small{font-size:10px;margin-bottom:2px}
#tut .tt b{font-size:16px}
#tut .tt p{font-size:12.5px;line-height:1.22}
#tut .tbox.mini p{display:none}
#tut .tprog{height:3px}
#tut .tskip{padding:6px 10px;font-size:11px}
@media (max-height:430px){ #tut{top:calc(80px + var(--st));width:min(300px,40vw)} #tut .tt b{font-size:15px} #tut .tt p{font-size:12px} }

/* configurações por categoria */
.settabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 -2px;padding:0 2px}
.settabs::-webkit-scrollbar{display:none}
.settabs button{flex:0 0 auto;padding:9px 14px 8px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font:800 14px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.settabs button[aria-selected="true"]{color:var(--bone);border-bottom-color:var(--curse)}
.setpane{display:flex;flex-direction:column;gap:12px;min-height:180px}
.setpane[hidden]{display:none!important}
#fpsc{position:fixed;left:calc(8px + var(--sl));bottom:calc(6px + var(--sb));z-index:60;font:800 11px/1 var(--ui);letter-spacing:.1em;color:#9f9;background:rgba(0,0,0,.55);padding:3px 6px;pointer-events:none}

/* MVP e distribuição de pontos */
.mvp{display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:radial-gradient(ellipse at 15% 50%,color-mix(in srgb,var(--c) 30%,transparent),transparent 60%),linear-gradient(90deg,rgba(242,168,35,.12),rgba(0,0,0,.2));position:relative;overflow:hidden;opacity:0}
.mvp.in{animation:mvpIn .55s .15s cubic-bezier(.2,1.3,.4,1) forwards}
.mvp::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);animation:mvpShine 2.6s 1s ease-in-out infinite}
@keyframes mvpIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes mvpShine{0%{left:-50%}40%,100%{left:120%}}
.mvav{position:relative;flex:none}
.mvav .crown{position:absolute;left:50%;top:-12px;transform:translateX(-50%) rotate(-8deg);width:34px;height:34px;color:var(--gold);filter:drop-shadow(0 2px 2px #000)}
.mvav .crown .ico{width:100%;height:100%;--ic:var(--curse)}
.mvt small{display:block;font:800 11px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.mvt b{display:block;font:400 32px/1.05 var(--display);text-shadow:3px 3px 0 color-mix(in srgb,var(--c) 70%,#000)}
.mvt em{display:block;font:700 13.5px/1.2 var(--ui);font-style:normal;color:var(--bone);opacity:.85}
.results li.rh{border:0;background:none;padding:2px 0 0;opacity:1;animation:none;font:800 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.results .pbar{display:block;height:5px;margin-top:5px;background:rgba(255,255,255,.07);overflow:hidden}
.results .pbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c),var(--gold));transform-origin:left;transform:scaleX(0);animation:pbar .7s ease-out forwards;animation-delay:var(--d)}
@keyframes pbar{to{transform:scaleX(var(--w))}}
.results .pts{font:900 18px/1 var(--ui);min-width:46px;text-align:right;color:var(--bone)}
.results li.mvprow{border-color:rgba(242,168,35,.55);box-shadow:inset 0 0 0 1px rgba(242,168,35,.25)}
.results li.win .rn b::after{content:''}
@media (max-height:430px){ .mvp{padding:6px 10px} .mvt b{font-size:24px} .mvav .av{--s:64px!important} #endTitle{font-size:30px} .results li{padding:4px 8px 4px 4px} }
#end{align-items:flex-start}
#end .card{margin:auto}
#end .stat3{display:none}
html:not(.intro) #introSkip{display:none!important}
/* amigos */
.frsearch{gap:8px;flex:none}.frsearch .go{padding:10px 16px;font-size:17px}
.frlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.frlist li{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.frlist li.empty{justify-content:center;color:var(--muted);border-style:dashed;padding:12px;font:600 14px/1.3 var(--ui)}
.frlist .fi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.frlist .fi b{display:flex;align-items:center;gap:6px;font:800 16px/1.1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frlist .fi b .pat{width:20px;height:20px}
.frlist .fi small,.frlist .fi span{font:600 12.5px/1.2 var(--ui);color:var(--muted)}
.frlist .fi span.on{color:var(--venom)}
.frlist .fb{display:flex;gap:6px;flex:none}
.go.sm,.ghost.sm{font-size:14px;padding:8px 12px}
.frlist .tag{position:static;font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
#pingc{position:fixed;left:calc(8px + var(--sl));bottom:calc(28px + var(--sb));z-index:60;font:800 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.6);padding:4px 7px;border-left:3px solid #7f7;color:#cfc;pointer-events:none}
#pingc.mid{border-color:#fc4;color:#fe9}#pingc.bad{border-color:#f55;color:#faa}
/* app instalado */
html.app #fsFloat,html.app #btnFs{display:none!important}
.mbtn.app{border-left-color:var(--ember)}.mbtn.app .ico{--ic:var(--ember)}
.isteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font:600 15px/1.35 var(--ui);color:var(--bone)}
.isteps li::marker{color:var(--gold);font-weight:800}
.isteps b{color:var(--gold)}
@media (max-height:430px) and (min-width:640px){
  .menu-col{width:min(640px,100%)}
  .mlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mbtn{clip-path:none}
}

/* ---------- tela inicial com conta ---------- */
.acct{display:flex;flex-direction:column;gap:10px;width:min(400px,100%);animation:artIn .6s .25s ease-out both}
.acct>div,.acct>#startBtn{display:none}
.acct[data-st="load"] .ac-load,.acct[data-st="out"] .ac-out,.acct[data-st="name"] .ac-name,.acct[data-st="in"] .ac-in,.acct[data-st="off"] .ac-off{display:flex}
.acct[data-st="in"]>#startBtn,.acct[data-st="off"]>#startBtn{display:block}
.acct[data-st="in"] .ac-links{display:flex}
.ac-out,.ac-name{flex-direction:column;gap:9px}
.ac-load{align-items:center;gap:10px;font:700 14px/1 var(--ui);color:var(--muted);letter-spacing:.06em}
.spin{width:18px;height:18px;border-radius:50%;border:3px solid rgba(236,227,211,.18);border-top-color:var(--curse);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.ac-row{display:flex;gap:9px}.ac-row .go{flex:1 1 0;font-size:19px;padding:12px 10px 10px}
.go.alt{background:linear-gradient(180deg,#3a2c30,#1d1517);box-shadow:0 0 0 2px #000,0 6px 0 #0a0708,0 10px 24px rgba(0,0,0,.5)}
#acct .gbtn{width:100%;font-size:17px;padding:11px}
.ghost.light{font-size:14px;padding:11px 14px;width:100%}
.acct .or{color:var(--muted);font-size:11px}
.acct .or::before,.acct .or::after{content:"";flex:1;height:1px;background:var(--line);opacity:1}
.ac-off .note,.ac-name .note{color:var(--bone);opacity:.8;font-size:14px}
.ac-links{justify-content:flex-start;gap:16px}
.linkb{background:none;border:0;padding:4px 0;color:var(--muted);font:700 13px/1 var(--ui);letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start}
.linkb:hover{color:var(--bone)}
.ac-in{flex-direction:column}.stme{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;background:linear-gradient(90deg,rgba(26,19,21,.92),rgba(12,9,10,.6));border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px}
.stme .stn{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.stme .stn small{font:700 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.stme .stn b{font:400 24px/1 var(--display);color:var(--bone);display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere}
.stme .stn em{font:700 13px/1 var(--ui);font-style:normal;color:var(--gold)}
.stme>svg{width:38px;height:38px;flex:none}
#title .acct #startBtn{margin-top:2px;width:100%}
.dlapk{position:absolute;right:max(16px,var(--sr));bottom:calc(12px + var(--sb));z-index:3;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 11px;background:rgba(10,8,9,.82);border:1px solid var(--line);border-left:3px solid #3ddc84;border-radius:3px;color:var(--bone);text-decoration:none;backdrop-filter:blur(4px)}
.dlapk svg{width:26px;height:26px;color:#3ddc84;flex:none}
.dlapk span{display:flex;flex-direction:column;gap:3px}.dlapk b{font:800 14px/1 var(--ui);letter-spacing:.04em}.dlapk small{font:600 11px/1 var(--ui);color:var(--muted)}
.dlapk:hover{border-color:#3ddc84}
@media (max-height:430px){
  .title-main .logo-slot{width:min(100%,calc(34vh*1.735))} .title-main .tag{display:none} .acct{gap:7px}
  .ac-out,.ac-name{gap:7px} .ac-row .go{font-size:16px;padding:9px 8px 8px} #acct .gbtn{padding:8px;font-size:15px} .ghost.light{padding:8px 12px} .acct .or{display:none}
  .stme{padding:6px 10px 6px 6px}.stme .stn b{font-size:20px} #title .go.big{font-size:20px;padding:11px 20px 9px}
  .dlapk{padding:6px 10px 6px 8px}.dlapk small{display:none}.dlapk svg{width:20px;height:20px}
}
@media (max-width:760px) and (orientation:portrait){ .dlapk{left:50%;right:auto;transform:translateX(-50%)} .acct{width:100%} }

/* login e nome com a logo e os lutadores */
.auth.show{gap:28px;padding:16px max(16px,var(--sr)) 16px max(16px,var(--sl))}
.auth .title-bg.dim img{opacity:.55}.auth .title-bg.dim .sun{opacity:.55}
.auth .card{position:relative;z-index:2;margin:0;width:min(440px,100%);flex:none}
.auth-side{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;width:min(360px,38vw)}
.auth-side .logo-slot{width:100%}
.auth-side p{margin:0;font:600 14px/1.4 var(--ui);color:var(--bone);opacity:.8;text-shadow:0 1px 2px #000}
@media (max-height:430px){ .auth-side{width:min(260px,32vw)} .auth-side p{font-size:12px} .auth.show{align-items:flex-start} .auth .card{margin:auto 0} }
@media (max-width:760px) and (orientation:portrait){ .auth.show{flex-direction:column;justify-content:flex-start;gap:14px} .auth-side{width:min(260px,70vw);align-items:center;text-align:center} }

/* ---------- criador ---------- */
.ownb{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;padding:2px 7px 2px 4px;border-radius:2px;background:linear-gradient(180deg,#3a0b0b,#1a0505);border:1px solid #f2a823;box-shadow:0 0 10px rgba(242,168,35,.35);white-space:nowrap;line-height:1}
.ownb svg{width:20px;height:17px;flex:none;filter:drop-shadow(0 0 3px rgba(255,170,40,.6))}
.ownb b{font:800 11px/1 var(--ui)!important;letter-spacing:.16em;color:#ffd36b!important;text-transform:uppercase}
.ownb.sm{padding:1px 5px 1px 3px;gap:3px}.ownb.sm svg{width:15px;height:13px}.ownb.sm b{font-size:9px!important;letter-spacing:.12em}
.fname .ownb{margin-left:6px}
.mbtn.crt{flex-direction:row;align-items:center;gap:12px;border-left-color:#f2a823;background:linear-gradient(90deg,#2a0909,rgba(42,9,9,.6))}
.mbtn.crt .crico svg{width:34px;height:28px;display:block}.mbtn.crt .mt{display:flex;flex-direction:column;gap:3px}
.mbtn.crt b{color:#ffd36b}
#creatorScr .card{border-top-color:#f2a823}
#creatorScr .hdr{gap:10px}#creatorScr .hdr .crb{margin-left:auto}
#creatorScr .sec{display:flex;flex-direction:column;gap:6px}
#creatorScr .sec h3{margin:0;font:800 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.mtog{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:3px;color:var(--bone);cursor:pointer}
.mtog .mt2{display:flex;flex-direction:column;gap:3px;min-width:0}.mtog b{font:800 15px/1.1 var(--ui)}.mtog small{font:600 12px/1.25 var(--ui);color:var(--muted)}
.mtog .sw{flex:none;width:40px;height:22px;border-radius:11px;background:#2a2124;position:relative;transition:background .15s}
.mtog .sw i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#8d8085;transition:transform .15s,background .15s}
.mtog.on{border-color:#f2a823;background:rgba(242,168,35,.08)}
.mtog.on .sw{background:#a8240f}.mtog.on .sw i{transform:translateX(18px);background:#ffd36b}
#modTag{position:fixed;left:50%;bottom:calc(6px + var(--sb));transform:translateX(-50%);z-index:9;pointer-events:none;padding:4px 10px;border-radius:2px;background:rgba(40,8,8,.78);border:1px solid #f2a823;color:#ffd36b;font:800 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
html.photo #pBar,html.photo #eBar,html.photo #mid,html.photo #feed,html.photo #tags,html.photo #modTag{opacity:0!important}

.auth .title-bg img{right:auto;left:-2%;max-width:52vw;opacity:.6}
.auth .title-bg .sun{right:auto;left:8%}
.auth .title-bg::after{background:linear-gradient(270deg,rgba(5,4,5,.94) 0%,rgba(5,4,5,.6) 45%,transparent 75%),linear-gradient(0deg,rgba(5,4,5,.85),transparent 35%)}