/* ───────── Editor postavy ───────── */
.avatarOpenBtn{margin-top:14px;width:100%;padding:12px 18px;border:1px solid #bd8741;border-radius:9px;background:linear-gradient(#5e3d21,#2c1a12);color:#ffdf9a;font-weight:bold;cursor:pointer}
html.avatarModalOpen{overflow:hidden}
.avatarOverlay[hidden]{display:none!important}.avatarOverlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:12px;overflow-y:auto}
.avatarDialog{width:min(1180px,100%);max-height:96vh;overflow-y:auto;background:linear-gradient(145deg,#322116,#15121b);border:2px solid #bc8c4e;border-radius:14px;box-shadow:0 18px 80px #000;color:#f5dfb9}
.avatarDialogTop{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 18px;border-bottom:1px solid #a17845}.avatarDialogTop h2{margin:0}.avatarDialogTop button{padding:8px 12px}
.avatarDialogBody{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr);gap:14px;padding:14px;align-items:start}
.avatarPreviewCol{display:flex;flex-direction:column;gap:12px;min-width:0}
.avatarCreatorPreview{min-height:300px;display:flex;align-items:center;justify-content:center;border:2px ridge #a87a42;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at center,#59402b,#111820 75%);box-shadow:inset 0 0 30px #0009}
.avatarCreatorPreview svg{display:block;width:100%;max-width:340px;max-height:390px;filter:drop-shadow(0 8px 15px #0008)}
.avatarCreator{padding:0}.headEditorLayout{display:grid;grid-template-columns:1fr 1fr;gap:12px}.headColumn{display:flex;flex-direction:column;gap:9px}.headControl{background:linear-gradient(#2c231e,#17151a);border:1px solid #74512d;border-radius:7px;padding:8px}.headLabel{display:flex;justify-content:space-between;gap:6px;color:#f2d29a;font-weight:700;font-size:13px;margin-bottom:6px}.headLabel small{color:#c3a37d;font-weight:400}.headStepper{display:flex;align-items:center;justify-content:space-between;gap:3px}.headStepper>button{background:#594024;color:#ffd17a;border:1px solid #b18a4b;border-radius:5px;cursor:pointer;padding:5px 7px}.headStepper span{display:flex;gap:3px;min-width:0;flex-wrap:wrap;justify-content:center}.headChoice{padding:4px 6px;background:#24313a;color:#eed2a0;border:1px solid #715c3b;border-radius:4px;cursor:pointer;font-size:12px}.headSwatches{display:flex;flex-wrap:wrap;gap:6px}.headSwatches button{background:var(--swatch);width:26px;height:26px;border:2px solid #5c4a37;border-radius:5px;cursor:pointer}.headSwatches button.selected{outline:2px solid #ffcf6e;outline-offset:2px}.headActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.headActions button{padding:9px 12px;cursor:pointer}.headHint{font-size:12px;color:#c5b8a6}
.headChoice.selected{background:linear-gradient(#785026,#362316);border-color:#ffd27b;color:#fff1c9;box-shadow:0 0 0 1px #b88640,0 0 9px #d18a35aa}
.headChoice:focus-visible,.headSwatches button:focus-visible,.headStepper>button:focus-visible,.fitChip:focus-visible{outline:3px solid #ffd27b;outline-offset:2px}

/* Náhled „takhle to sedí ve hře“ – karta postavy a horní lišta, včetně levelu, aury a rámečku */
.avatarFit{padding:12px;border:1px solid #74512d;border-radius:10px;background:linear-gradient(#2a211b,#15131a)}
.avatarFit h3{margin:0 0 2px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#f2d29a}
.fitRow{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:flex-start;justify-content:center}
.fitItem{display:flex;flex-direction:column;align-items:center;gap:18px;padding:16px 22px 12px}
.fitCap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#c3a37d}
.fitFx{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.fitFx>span{min-width:62px;font-size:12px;font-weight:700;color:#f2d29a}.fitFx>div{display:flex;gap:4px;flex-wrap:wrap}
.fitChip{padding:4px 9px;background:#24313a;color:#eed2a0;border:1px solid #715c3b;border-radius:999px;cursor:pointer;font-size:12px}
.fitChip.selected{background:linear-gradient(#785026,#362316);border-color:#ffd27b;color:#fff1c9;box-shadow:0 0 8px #d18a35aa}
@media(max-width:800px){.avatarDialogBody{grid-template-columns:1fr}.avatarCreatorPreview{min-height:240px}.avatarCreatorPreview svg{max-height:300px}}@media(max-width:560px){.headEditorLayout{grid-template-columns:1fr}.fitItem{padding:14px 12px 10px}}

/* ───────── Kulatý avatar: aura + rámeček + obličej + odznak levelu ─────────
   Jedna struktura pro horní lištu (.avatar) i kartu postavy (.avatar.big):
   <div.avatar> <span.avAura/> <span.avRing/> <span.avFace><svg/></span> <b.avLvl/> </div>
   Velikost řídí jediná proměnná --av, všechno ostatní (záře, blesky, odznak) se škáluje s ní. */
.avatar{--av:46px;--ring:max(3px,calc(var(--av)*.058));
 --au-a:transparent;--au-b:transparent;--au-core:#fff;--au-in:transparent;
 position:relative;flex:none;width:var(--av);height:var(--av);border-radius:50%;isolation:isolate}
.avatar.big{--av:104px}
/* Rámeček se otáčí přes transform (běží na GPU), ne přes animovanou barevnou proměnnou → žádné sekání. */
.avRing{position:absolute;inset:0;z-index:1;border-radius:50%;overflow:hidden;box-shadow:0 0 calc(var(--av)*.2) rgba(var(--c1),.4)}
.avRing::before{content:"";position:absolute;inset:-50%;background:conic-gradient(#25f1ff,#8d6cff,#ff2bd6,#25f1ff);animation:avSpin 6s linear infinite;will-change:transform}
.avFace{position:absolute;inset:var(--ring);z-index:2;border-radius:50%;overflow:hidden;
 background:radial-gradient(circle at 50% 36%,#50648f 0%,#222a4d 58%,#0b0f20 100%);
 box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 calc(var(--av)*.1) rgba(0,0,0,.5)}
.avFace>svg{display:block;width:100%;height:100%}
.avLvl{position:absolute;z-index:6;right:calc(var(--av)*-.05);bottom:calc(var(--av)*-.04);
 min-width:max(22px,calc(var(--av)*.3));height:max(22px,calc(var(--av)*.3));padding:0 5px;box-sizing:border-box;
 display:flex;align-items:center;justify-content:center;border-radius:999px;
 background:linear-gradient(#ffe27a,#ffa81f);color:#2b1600;border:max(1px,calc(var(--av)*.015)) solid #fff1b8;
 box-shadow:0 2px 6px rgba(0,0,0,.65);font:800 max(11px,calc(var(--av)*.135))/1 var(--font-ui);font-variant-numeric:tabular-nums}

/* Rámečky z Dračího bazaru */
.avatar.frame-gold .avRing{box-shadow:0 0 calc(var(--av)*.18) rgba(242,182,58,.55)}
.avatar.frame-gold .avRing::before{background:conic-gradient(#fff4ba,#ffc84b,#a96a0b,#ffe187,#fff4ba)}
.avatar.frame-neon .avRing{box-shadow:0 0 calc(var(--av)*.18) rgba(36,217,255,.55)}
.avatar.frame-neon .avRing::before{background:conic-gradient(#2df1ff,#8d6cff,#f65ed8,#2df1ff)}
.avatar.frame-flame .avRing{box-shadow:0 0 calc(var(--av)*.2) rgba(255,98,41,.6)}
.avatar.frame-flame .avRing::before{background:conic-gradient(#ffde64,#ff7424,#bb220d,#ff9b28,#ffde64);animation-duration:3.2s}
.avatar.frame-flame .avRing::after{content:"";position:absolute;inset:0;background:rgba(255,226,150,.55);opacity:.05;animation:avFlicker 1.3s ease-in-out infinite alternate;will-change:opacity}
@keyframes avFlicker{from{opacity:.05}to{opacity:.6}}

/* Barvy aur (stejné proměnné používá i aura kolem celé postavy) */
.avatar.aura-cyan,.heroStage.aura-cyan{--au-a:rgba(37,232,255,.88);--au-b:#25e8ff;--au-core:#effeff;--au-in:rgba(37,232,255,.55)}
.avatar.aura-magenta,.heroStage.aura-magenta{--au-a:rgba(235,103,255,.88);--au-b:#eb67ff;--au-core:#fff0ff;--au-in:rgba(235,103,255,.55)}
.avatar.aura-gold,.heroStage.aura-gold{--au-a:rgba(255,200,70,.9);--au-b:#ffc84b;--au-core:#fffbe0;--au-in:rgba(255,190,60,.55)}
.avatar.aura-cyan .avFace{background:radial-gradient(circle at 50% 36%,#2b79a8 0%,#14355f 58%,#08142b 100%)}
.avatar.aura-magenta .avFace{background:radial-gradient(circle at 50% 36%,#8a4cb8 0%,#3d1c66 58%,#150b2b 100%)}
.avatar.aura-gold .avFace{background:radial-gradient(circle at 50% 36%,#b9853a 0%,#5c3a14 58%,#21140a 100%)}
.avatar[class*="aura-"] .avFace::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,transparent 48%,var(--au-in) 100%);opacity:.85}
@keyframes avInner{0%,100%{opacity:.45}50%{opacity:1}}

/* Aura: pulzující záře + rozbíhavé vlny + blesky + doplněk podle typu */
.avAura{position:absolute;inset:0;z-index:0;pointer-events:none}
.avAura>*{position:absolute;display:block}
.avGlow{inset:-33%;border-radius:50%;background:radial-gradient(closest-side,var(--au-a) 0 62%,transparent 100%);opacity:.85;animation:avBreathe 3s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform,opacity}
@keyframes avBreathe{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.07);opacity:1}}
.avWave{inset:0;border-radius:50%;border:max(1.5px,calc(var(--av)*.022)) solid var(--au-b);opacity:0;animation:avWave 3s cubic-bezier(.2,.6,.3,1) infinite;will-change:transform,opacity}
.avWave.w2{animation-delay:1.5s}
@keyframes avWave{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.55);opacity:0}}
.avBolts{left:-30%;top:-30%;width:160%;height:160%;overflow:visible}
.avBolts path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.avBolts .bg{stroke:var(--au-b);stroke-width:3.6;opacity:.55}
.avBolts .fg{stroke:var(--au-core);stroke-width:1.3}
@keyframes avSpin{to{transform:rotate(360deg)}}
/* neonová: dvě točící se čáry (komety) – každá jede jiným směrem a tempem; maska udělá z kruhu tenký proužek, otáčí se jen transform */
@keyframes avSpinRev{to{transform:rotate(-360deg)}}
/* zlatá: pomalu rotující paprsky a stoupající jiskry */
.avAura s{left:var(--x);bottom:18%;width:calc(var(--av)*.05 + 1px);height:calc(var(--av)*.05 + 1px);border-radius:50%;background:#fff6c4;box-shadow:0 0 calc(var(--av)*.06) #ffd75a;opacity:0;animation:avSpark 2.8s ease-out infinite;animation-delay:var(--d)}
@keyframes avSpark{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(calc(var(--av)*-.75)) scale(1);opacity:0}}

/* ───────── Karta postavy (levý panel) a horní lišta ───────── */
#charAvatar{display:flex;justify-content:center;align-items:center;width:100%;margin:0;padding:24px 0 26px;border:0;background:transparent;color:inherit;cursor:pointer;overflow:visible}
/* Avatar na kartě je klikací (otevře postavu), ale tlačítko samo nesmí být vidět – žádný stín, rámeček ani pozadí z motivu. */
#charAvatar,#charAvatar:hover,#charAvatar:active,#charAvatar:focus{background:none;border:0;box-shadow:none;transform:none;-webkit-tap-highlight-color:transparent}
#charAvatar:hover .avatar{filter:brightness(1.12)}
#charAvatar:focus-visible{outline:2px solid #00d8ff;outline-offset:2px;border-radius:12px}
.hudHero .avatar{margin:2px 2px 2px 4px}
@media(max-width:600px){.avatar{--av:40px}.avatar.big{--av:92px}}

/* ───────── Aura kolem celé postavy (stránka Postava) ───────── */
.heroStage .holoFigure{width:min(74%,340px)}
.heroStage .heroFullFigure{position:relative;z-index:1}
.heroStage .holoScan{z-index:2}
.heroAura{inset:auto;left:50%;top:47%;width:190%;height:150%;transform:translate(-50%,-50%);z-index:0}
.heroAura .avBolts{left:0;top:0;width:100%;height:100%}
.heroAura .avBolts path{vector-effect:non-scaling-stroke}
.heroAura .avBolts .bg{stroke-width:5px}
.heroAura .avBolts .fg{stroke-width:2px}
.heroAura{--av:150px}
.heroStage.aura-cyan::after,.heroStage.aura-magenta::after,.heroStage.aura-gold::after{animation:avStagePulse 3s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform,opacity}
@keyframes avStagePulse{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}

@media(prefers-reduced-motion:reduce){
 .avatar,.avatar *,.avatar *::after,.heroAura,.heroAura *,.heroStage[class*="aura-"]::after{animation:none!important}
}

/* ───────── Profily postav (žebříček, aréna, souboj) ───────── */
.avatar.sm{--av:40px}.avatar.md{--av:64px}.avatar.lg{--av:92px}.avatar.huge{--av:150px}
.lrAvatar,.aAvatar{display:flex;align-items:center;justify-content:center}
.ladderList li{grid-template-columns:34px 52px minmax(120px,1.2fr) minmax(110px,2fr)}
.arenaCard{grid-template-columns:52px minmax(150px,1.3fr) 70px minmax(150px,1fr) auto}
.ladderList li[data-profile],.arenaCard[data-profile]{cursor:pointer;transition:border-color .15s,background-color .15s}
.ladderList li[data-profile]:hover,.arenaCard[data-profile]:hover{border-color:var(--cyan);background-color:rgba(var(--c1),.08)}
.ladderList li[data-profile]:focus-visible,.arenaCard[data-profile]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.fighter-icon.hasAvatar{display:flex;align-items:center;justify-content:center;width:auto;height:auto;padding:22px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
@media(max-width:900px){.arenaCard{grid-template-columns:52px 1fr auto}}
@media(max-width:600px){.ladderList li{grid-template-columns:26px 52px minmax(0,1fr)}.fighter-icon.hasAvatar{padding:14px}.avatar.lg{--av:70px}.avatar.huge{--av:118px}}

dialog.profileDialog{padding:0;width:min(580px,94vw);overflow:hidden}
.pfCard{position:relative;max-height:92vh;overflow-y:auto;padding:20px 22px 18px}
.pfClose{position:absolute;right:12px;top:12px;z-index:2;padding:5px 10px}
.pfHead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pfPortrait{flex:none;padding:34px}
.pfWho{min-width:0;flex:1 1 180px;padding-right:34px}
.pfWho h2{margin:0 0 4px;font:700 24px var(--font-hd);letter-spacing:.06em;text-transform:uppercase;color:#fff;word-break:break-word}
.pfTitle{color:var(--cyan);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.pfRank{margin-top:10px;color:var(--muted);font-size:13px}.pfRank span{margin-right:6px;font:700 28px var(--font-hd);color:var(--gold)}
.pfStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.pfStat{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;padding:8px 10px;border:1px solid var(--b1);border-radius:var(--radius-sm);background:rgba(var(--ink),.6)}
.pfStat span{grid-row:1/3;font-size:20px}.pfStat small{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}.pfStat b{font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
.pfLore{margin:14px 0 8px;line-height:1.5;font-style:italic}
.pfGearLine{color:var(--muted);font-size:13px}.pfGearLine b{color:var(--text)}
.pfDuel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border:1px solid var(--line-neon);border-radius:var(--radius-md);background:rgba(var(--ink),.6)}
.pfDuel .aChance{min-width:72px;font-size:22px}
.pfDuelInfo{display:flex;flex-direction:column;flex:1;min-width:150px}.pfDuelInfo small{color:var(--muted)}
.pfGearGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.pfGear{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;padding:6px 9px;border:1px solid var(--b1);border-radius:var(--radius-sm);background:rgba(var(--ink),.6)}
.pfGear span{grid-row:1/3;font-size:18px}.pfGear small{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}.pfGear b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfGear.empty{opacity:.5}
.pfActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}

/* ───────── Plynulost: aura bez masek a bez nekonečných animací blesků ─────────
   Paprsky a oblouky jsou SVG (otáčí se jen transform na GPU, žádná maska), blesky zabliknou z JS (avatar.js). */
.zap{opacity:0;transition:opacity .06s linear}
.avRays{left:-34%;top:-34%;width:168%;height:168%;fill:var(--au-a);animation:avSpin 18s linear infinite}
.avArc{left:-9%;top:-9%;width:118%;height:118%;fill:none;animation:avSpin 2.4s linear infinite}
.avArc.a2{left:-19%;top:-19%;width:138%;height:138%;opacity:.85;animation:avSpinRev 3.8s linear infinite}
.avArc circle{fill:none;stroke-linecap:round}
.avArc .t{stroke:var(--au-b);stroke-width:2.6;opacity:.4;stroke-dasharray:170 132}
.avArc .h{stroke:var(--au-core);stroke-width:3;stroke-dasharray:60 242;stroke-dashoffset:-110}
.avatar{contain:layout style}
/* modální okna: bez rozmazání pozadí (drahé při každém překreslení) a stránka pod nimi stojí */
dialog.profileDialog::backdrop,dialog.petHatchDialog::backdrop,dialog.arenaDialog::backdrop{backdrop-filter:none;background:rgba(1,2,8,.9)}
html.dlgOpen .wrap *,html.dlgOpen .wrap *::before,html.dlgOpen .wrap *::after,html.dlgOpen .fx,html.dlgOpen .hotbar *{animation-play-state:paused!important}

/* Editor postavy V178: záložky, předvolby, víc možností */
.avTabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.avTab{padding:7px 12px;font-size:12.5px;border-radius:9px;border:1px solid #6b4529;background:linear-gradient(#2c231e,#1c1612);color:#e9d8b8}
.avTab.on{background:linear-gradient(#785026,#362316);border-color:#ffd27b;color:#fff1c9;box-shadow:0 0 0 1px #b88640,0 0 9px #d18a35aa}
.avPane [hidden]{display:none!important}
.headEditorLayout{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.headStepper>span{flex-wrap:wrap;justify-content:center}
.avPresets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.avPresets button{padding:12px 10px;font-size:14px;border-radius:10px;border:1px solid #b88640;background:linear-gradient(#3a2c22,#201813);color:#fff1c9}
.avPresets button:hover{border-color:#ffd27b;box-shadow:0 0 12px #d18a3566}

/* V13: class picker inside character creator */
.avClassChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.avClassChoice{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-height:100px;border:1px solid #a78857;border-radius:12px;background:#192d2c;color:#f3e6d3;padding:12px 8px;cursor:pointer}
.avClassChoice span{font-weight:800}.avClassChoice small{color:#d5bf91}
.avClassChoice.on{border:2px solid #e9c06b;background:#334535}
.avClassChoice:disabled{cursor:default;opacity:.75}
@media(max-width:560px){.avClassChoices{grid-template-columns:1fr}.avClassChoice{min-height:64px}}