/* ===== legacy-01 ===== */
.clan-member-role-grid{display:grid;gap:10px;margin-top:18px}.clan-member-role-option{position:relative;display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid #315468;border-radius:14px;background:linear-gradient(135deg,rgba(12,28,39,.96),rgba(8,18,27,.96));cursor:pointer;transition:.18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.clan-member-role-option:hover{border-color:#6b92a8;transform:translateY(-1px)}.clan-member-role-option.selected{border-color:var(--gold2);box-shadow:0 0 0 1px rgba(255,196,72,.22),0 8px 24px rgba(0,0,0,.22)}.clan-member-role-option input{position:absolute;opacity:0;pointer-events:none}.clan-member-role-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.clan-member-role-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.06);font-size:23px;flex:none}.clan-member-role-main b{display:block;font-size:15px}.clan-member-role-main small{display:block;margin-top:4px;color:#9fb5c2;line-height:1.35}.clan-role-check{width:25px;height:25px;border:2px solid #52758a;border-radius:50%;display:grid;place-items:center;color:transparent;font-weight:900;flex:none}.clan-member-role-option.selected .clan-role-check{border-color:var(--gold2);background:var(--gold2);color:#08131b}.clan-modal .btn.red.armed{border-color:#ff8b7b;box-shadow:0 0 0 2px rgba(255,99,80,.14)}@media(max-width:600px){.clan-member-role-option{padding:12px}.clan-member-role-main small{font-size:11px}.clan-modal-footer{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.avatar-vip-frame,.avatar-vip-frame::before,.avatar-vip-frame::after,.rank-frame.vip-bronze,.rank-frame.vip-iron,.rank-frame.vip-steel,.rank-frame.vip-flame,.rank-frame.vip-sapphire,.rank-frame.vip-lion,.rank-frame.vip-epic,.rank-frame.vip-dragon,.rank-frame.vip-legend,.rank-frame.vip-imperial,.rank-frame.vip-bronze::after,.rank-frame.vip-iron::after,.rank-frame.vip-steel::after,.rank-frame.vip-flame::after,.rank-frame.vip-sapphire::after,.rank-frame.vip-lion::after,.rank-frame.vip-epic::after,.rank-frame.vip-dragon::after,.rank-frame.vip-legend::after,.rank-frame.vip-imperial::after,.rank-frame.vip-flame::before,.rank-frame.vip-sapphire::before,.rank-frame.vip-lion::before,.rank-frame.vip-epic::before,.rank-frame.vip-dragon::before,.rank-frame.vip-legend::before,.rank-frame.vip-imperial::before{animation:none!important}}
/* Profilo: mantieni l'immagine grande ma non gigantesca, come nella scheda eroe */
.character-art-wrap{
  padding:0 10px;
}
.character-art-wrap .profile-class-art{
  width:100%;
  max-width:360px;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
}
.character-art-wrap .profile-class-art .class-art-image{
  object-fit:cover!important;
  object-position:center 44%!important;
}
@media(max-width:700px){
  .character-hero{
    grid-template-columns:1fr;
  }
  .character-art-wrap{
    min-height:480px!important;
  }
  .character-art-wrap .profile-class-art{
    max-width:100%;
  }
}


/* Profilo mobile: immagine più contenuta, come nella scheda eroe */
.character-art-wrap .profile-class-art{max-width:360px;margin:0 auto;width:100%;height:420px}
.character-art-wrap .profile-class-art .class-art-image{object-fit:cover!important;object-position:center 44%!important}
@media(max-width:700px){
  .character-art-wrap{min-height:380px!important;padding:0 12px;align-items:flex-start}
  .character-art-wrap .profile-class-art{max-width:360px;height:380px}
}

/* ===== legacy-02 ===== */
.clan-top-tabs{display:flex;gap:10px;margin:0 0 16px;padding:6px;border:1px solid #23465f;border-radius:14px;background:linear-gradient(135deg,rgba(9,25,39,.96),rgba(6,17,27,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.clan-top-tab{flex:1;min-height:44px;border:1px solid transparent;border-radius:10px;background:transparent;color:#9fb5c2;font-weight:900;letter-spacing:.5px;cursor:pointer;transition:.18s ease}.clan-top-tab:hover{color:#fff;border-color:#315468;background:rgba(255,255,255,.04)}.clan-top-tab.active{color:#08131b;background:var(--gold2);border-color:var(--gold2);box-shadow:0 6px 18px rgba(0,0,0,.22)}.clan-boss-placeholder{padding:30px 18px;text-align:center;border:1px solid #315468;border-radius:16px;background:radial-gradient(circle at 50% 0,rgba(226,188,98,.11),transparent 45%),linear-gradient(135deg,rgba(12,28,39,.96),rgba(8,18,27,.96))}.clan-boss-icon{font-size:56px;display:block;margin-bottom:10px}@media(max-width:600px){.clan-top-tabs{gap:6px}.clan-top-tab{font-size:12px;padding:0 8px}}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#040b12;--bg2:#081724;--panel:#091927;--panel2:#0d2234;--panel3:#132d43;
  --line:#23465f;--gold:#e2bc62;--gold2:#f2d58e;--blue:#62b7e6;--blue2:#8fd6f7;
  --red:#dc5b53;--green:#59d39b;--muted:#7894a6;--text:#e7f0f5;--danger:#d75a63;
  --shadow:0 18px 45px rgba(0,0,0,.42)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 45% -15%,rgba(48,104,146,.28),transparent 34%),linear-gradient(135deg,#030a11,#071521 50%,#040b12);color:var(--text);font-family:Inter,Arial,sans-serif}
body{min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.topbar{height:76px;position:sticky;top:0;z-index:50;background:rgba(3,10,16,.97);border-bottom:1px solid #18384e;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.top{height:100%;display:grid;grid-template-columns:290px 1fr 390px;align-items:center;gap:16px;padding:0 18px}
.brand{justify-self:center;font:800 27px Cinzel;color:#efd68c;letter-spacing:2px}
.player{display:flex;align-items:center;gap:11px;min-width:0}
.avatar{width:58px;height:58px;border-radius:50%;overflow:hidden;border:3px solid var(--gold);background:#0b1824;flex:0 0 auto;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-vip{position:relative;width:70px;height:70px;display:grid;place-items:center;flex:0 0 auto}.avatar-vip-frame{position:absolute;inset:0;border:3px solid var(--gold2);border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 14px rgba(242,213,142,.35)}.avatar-vip-label{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);padding:2px 7px;cursor:pointer;user-select:none;touch-action:manipulation;border:1px solid var(--gold2);border-radius:8px;background:#08131b;color:#f2d58e;font:800 9px Inter,Arial,sans-serif;letter-spacing:.5px;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.45)}
/* VIP HOME EPIC TIERS — escalation 1→10 */
.avatar-vip-frame::before,.avatar-vip-frame::after{content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none}
.avatar-vip-frame.vip-bronze{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 12px #9b6b3f88}
.avatar-vip-frame.vip-iron{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 14px #aab7c488}
.avatar-vip-frame.vip-steel{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 16px #6f9bb8aa}
.avatar-vip-frame.vip-flame{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 18px #e85d3faa;animation:vipHomePulse 2s ease-in-out infinite}
.avatar-vip-frame.vip-sapphire{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 20px #4aa9e8bb;animation:vipHomePulse 1.8s ease-in-out infinite}
.avatar-vip-frame.vip-lion{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 22px #d2a642cc;animation:vipHomePulse 1.65s ease-in-out infinite}
/* VIP 7: arcane particles */
.avatar-vip-frame.vip-epic{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 30px #b16ee8ee,0 0 58px #b16ee855;animation:vipHomePulse 1.45s ease-in-out infinite}
.avatar-vip-frame.vip-epic::before{inset:-7px;border:2px solid currentColor;box-shadow:0 0 8px currentColor,0 0 18px currentColor;animation:vipHomeSpin 2.8s linear infinite}
.avatar-vip-frame.vip-epic::after{inset:-12px;background:radial-gradient(circle at 10% 20%,currentColor 0 1px,transparent 2px),radial-gradient(circle at 78% 12%,currentColor 0 1.5px,transparent 2.5px),radial-gradient(circle at 88% 72%,currentColor 0 1px,transparent 2px),radial-gradient(circle at 22% 86%,currentColor 0 1.5px,transparent 2.5px),conic-gradient(from 20deg,transparent 0 12%,currentColor 18%,transparent 23% 52%,currentColor 59%,transparent 65% 100%);opacity:.75;filter:drop-shadow(0 0 4px currentColor);animation:vipHomeParticles 2.4s linear infinite}
/* VIP 8: dragon flame + emerald energy */
.avatar-vip-frame.vip-dragon{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 34px #57a96bee,0 0 70px #57a96b66;animation:vipHomePulse 1.25s ease-in-out infinite}
.avatar-vip-frame.vip-dragon::before{inset:-9px;background:conic-gradient(from 0deg,transparent 0 8%,#57a96b 13%,transparent 19%,#b9ff91 24%,transparent 31%,#57a96b 38%,transparent 46%,#9cff7a 52%,transparent 61%,#57a96b 68%,transparent 76%,#b9ff91 84%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;filter:drop-shadow(0 0 5px currentColor);animation:vipHomeSpin .95s linear infinite}
.avatar-vip-frame.vip-dragon::after{inset:-13px;background:radial-gradient(circle at 8% 30%,#b9ff91 0 1.5px,transparent 3px),radial-gradient(circle at 92% 24%,#57a96b 0 2px,transparent 3.5px),radial-gradient(circle at 82% 88%,#b9ff91 0 1px,transparent 3px),radial-gradient(circle at 16% 82%,#57a96b 0 2px,transparent 3.5px),conic-gradient(from 35deg,transparent 0 10%,#57a96b 15%,transparent 22% 45%,#b9ff91 51%,transparent 58% 78%,#57a96b 84%,transparent 91%);filter:drop-shadow(0 0 6px #57a96b);opacity:.9;animation:vipHomeFlame 1.1s ease-in-out infinite}
/* VIP 9: divine lightning + gold stars */
.avatar-vip-frame.vip-legend{box-shadow:0 0 0 2px rgba(4,11,18,.9),0 0 40px #e6c95cff,0 0 82px #e6c95c66;animation:vipHomePulse 1.05s ease-in-out infinite}
.avatar-vip-frame.vip-legend::before{inset:-10px;background:conic-gradient(from 0deg,transparent 0 7%,#fff5b0 9%,#e6c95c 11%,transparent 14% 27%,#fff 29%,#e6c95c 31%,transparent 34% 51%,#fff5b0 54%,#e6c95c 56%,transparent 60% 77%,#fff 79%,#e6c95c 81%,transparent 84%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;filter:drop-shadow(0 0 7px #ffe477);animation:vipHomeLightning .72s steps(2,end) infinite}
.avatar-vip-frame.vip-legend::after{inset:-15px;background:radial-gradient(circle at 5% 18%,#fff5b0 0 2px,transparent 4px),radial-gradient(circle at 95% 20%,#e6c95c 0 1.5px,transparent 4px),radial-gradient(circle at 90% 82%,#fff 0 2px,transparent 4px),radial-gradient(circle at 12% 86%,#e6c95c 0 1.5px,transparent 4px),radial-gradient(circle at 50% 2%,#fff5b0 0 1.5px,transparent 4px);opacity:.95;filter:drop-shadow(0 0 7px #e6c95c);animation:vipHomeStars 1.4s ease-in-out infinite alternate}
/* VIP 10: imperial storm — brightest, densest and fastest */
.avatar-vip-frame.vip-imperial{border-width:4px;box-shadow:0 0 0 2px rgba(4,11,18,.95),0 0 48px #f1d37aff,0 0 95px #fff0a655,0 0 135px #f1d37a33;animation:vipHomePulse 0.8s ease-in-out infinite}
.avatar-vip-frame.vip-imperial::before{inset:-12px;background:conic-gradient(from 0deg,transparent 0 4%,#fff 6%,#f1d37a 8%,transparent 11% 18%,#fff7cf 20%,#f1d37a 22%,transparent 25% 36%,#fff 38%,#f1d37a 40%,transparent 43% 57%,#fff7cf 60%,#f1d37a 62%,transparent 66% 79%,#fff 81%,#f1d37a 83%,transparent 87% 94%,#fff7cf 96%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;filter:drop-shadow(0 0 9px #fff0a6);animation:vipHomeLightning .48s steps(2,end) infinite}
.avatar-vip-frame.vip-imperial::after{inset:-18px;background:radial-gradient(circle at 5% 10%,#fff 0 2px,transparent 4px),radial-gradient(circle at 95% 12%,#f1d37a 0 2px,transparent 4px),radial-gradient(circle at 98% 55%,#fff7cf 0 1.5px,transparent 4px),radial-gradient(circle at 88% 92%,#fff 0 2px,transparent 4px),radial-gradient(circle at 52% 98%,#f1d37a 0 2px,transparent 4px),radial-gradient(circle at 8% 86%,#fff7cf 0 1.5px,transparent 4px),radial-gradient(circle at 2% 45%,#fff 0 2px,transparent 4px),conic-gradient(from 15deg,transparent 0 8%,#fff 11%,#f1d37a 14%,transparent 19% 40%,#fff7cf 45%,transparent 51% 71%,#fff 76%,#f1d37a 79%,transparent 85%);opacity:.98;filter:drop-shadow(0 0 9px #f1d37a);animation:vipHomeStars .9s ease-in-out infinite alternate}
.avatar-vip-label.vip-imperial{box-shadow:0 0 16px #f1d37acc,0 0 30px #fff0a655,0 3px 8px rgba(0,0,0,.55);animation:vipHomeLabel 1s ease-in-out infinite}
@keyframes vipHomePulse{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.22);transform:scale(1.035)}}
@keyframes vipHomeSpin{to{transform:rotate(360deg)}}
@keyframes vipHomeParticles{0%{transform:rotate(0deg) scale(.96);opacity:.45}50%{opacity:1}100%{transform:rotate(360deg) scale(1.04);opacity:.55}}
@keyframes vipHomeFlame{0%,100%{transform:scaleY(.96) rotate(0deg);opacity:.65}50%{transform:scaleY(1.08) rotate(3deg);opacity:1}}
@keyframes vipHomeLightning{0%,100%{opacity:.55;transform:rotate(0deg)}18%{opacity:1}22%{opacity:.35}27%{opacity:1}55%{opacity:.5}58%{opacity:1}100%{transform:rotate(360deg)}}
@keyframes vipHomeStars{0%{transform:scale(.92) rotate(0deg);opacity:.5}100%{transform:scale(1.08) rotate(18deg);opacity:1}}
@keyframes vipHomeLabel{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3);transform:translateX(-50%) scale(1.04)}}
/* RANKING: stable VIP effects, escalating from VIP 7 to 10 */
.rank-frame.vip-epic,.rank-frame.vip-dragon,.rank-frame.vip-legend,.rank-frame.vip-imperial{overflow:visible}
.rank-frame.vip-epic{box-shadow:0 0 10px #b16ee8cc,0 0 22px #b16ee855}
.rank-frame.vip-dragon{box-shadow:0 0 12px #57a96bcc,0 0 28px #57a96b55}
.rank-frame.vip-legend{box-shadow:0 0 14px #e6c95ccc,0 0 34px #e6c95c66}
.rank-frame.vip-imperial{box-shadow:0 0 18px #f1d37aee,0 0 42px #fff0a655}
.rank-frame.vip-epic::before,.rank-frame.vip-dragon::before,.rank-frame.vip-legend::before,.rank-frame.vip-imperial::before{content:'';position:absolute;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.rank-frame.vip-epic::before{inset:-3px;padding:1px;border:1px solid #cf8cff;box-shadow:0 0 5px #cf8cff;animation:vipRankSpin 2.5s linear infinite}
.rank-frame.vip-dragon::before{inset:-4px;padding:1px;background:conic-gradient(#b9ff91,transparent 12%,#57a96b 25%,transparent 38%,#b9ff91 52%,transparent 66%,#57a96b 80%,transparent);animation:vipRankSpin 1.5s linear infinite}
.rank-frame.vip-legend::before{inset:-5px;padding:1.5px;background:conic-gradient(#fff5b0,transparent 9%,#e6c95c 18%,transparent 32%,#fff 42%,transparent 55%,#e6c95c 70%,transparent 86%,#fff5b0);filter:drop-shadow(0 0 4px #ffe477);animation:vipRankSpin .9s steps(2,end) infinite}
.rank-frame.vip-imperial::before{inset:-6px;padding:2px;background:conic-gradient(#fff,#f1d37a 6%,transparent 12%,#fff7cf 20%,transparent 28%,#fff 38%,#f1d37a 44%,transparent 54%,#fff7cf 65%,transparent 74%,#fff 84%,#f1d37a 90%,transparent);filter:drop-shadow(0 0 6px #fff0a6);animation:vipRankSpin .62s steps(2,end) infinite}
.rank-frame.vip-epic::after,.rank-frame.vip-dragon::after,.rank-frame.vip-legend::after,.rank-frame.vip-imperial::after{content:'';position:absolute;pointer-events:none;border:0;background-repeat:no-repeat;animation:vipRankParticles 1.6s ease-in-out infinite alternate}
.rank-frame.vip-epic::after{inset:-4px;background:radial-gradient(circle at 5% 18%,#cf8cff 0 1px,transparent 2.5px),radial-gradient(circle at 92% 82%,#cf8cff 0 1px,transparent 2.5px)}
.rank-frame.vip-dragon::after{inset:-5px;background:radial-gradient(circle at 5% 22%,#b9ff91 0 1px,transparent 3px),radial-gradient(circle at 92% 76%,#57a96b 0 1px,transparent 3px),radial-gradient(circle at 82% 5%,#b9ff91 0 1px,transparent 3px)}
.rank-frame.vip-legend::after{inset:-6px;background:radial-gradient(circle at 5% 18%,#fff5b0 0 1.5px,transparent 3px),radial-gradient(circle at 95% 25%,#fff 0 1px,transparent 3px),radial-gradient(circle at 85% 90%,#e6c95c 0 1.5px,transparent 3px),radial-gradient(circle at 15% 88%,#fff5b0 0 1px,transparent 3px)}
.rank-frame.vip-imperial::after{inset:-7px;background:radial-gradient(circle at 5% 12%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 95% 15%,#f1d37a 0 1.5px,transparent 3px),radial-gradient(circle at 98% 60%,#fff7cf 0 1px,transparent 3px),radial-gradient(circle at 84% 92%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 12% 90%,#f1d37a 0 1.5px,transparent 3px)}
@keyframes vipRankParticles{0%{transform:scale(.9) rotate(0deg);opacity:.45}100%{transform:scale(1.08) rotate(12deg);opacity:1}}
/* keep existing lower VIP ranking pulse/badge behavior */
.rank-frame.vip-bronze,.rank-frame.vip-iron,.rank-frame.vip-steel,.rank-frame.vip-flame,.rank-frame.vip-sapphire,.rank-frame.vip-lion,.rank-frame.vip-epic,.rank-frame.vip-dragon,.rank-frame.vip-legend,.rank-frame.vip-imperial{animation:vipRankPulse 2.4s ease-in-out infinite}
.rank-vip-badge{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);z-index:4;padding:2px 6px;border:1px solid currentColor;border-radius:7px;background:linear-gradient(180deg,#101d27,#050b10);font:900 8px Inter,Arial,sans-serif;letter-spacing:.4px;white-space:nowrap;box-shadow:0 2px 7px rgba(0,0,0,.6),0 0 8px currentColor;line-height:1.1}
.rank-vip-badge.vip-bronze{color:#c28b58}.rank-vip-badge.vip-iron{color:#d4e0e8}.rank-vip-badge.vip-steel{color:#8dc1df}.rank-vip-badge.vip-flame{color:#ff7758}.rank-vip-badge.vip-sapphire{color:#63c7ff}.rank-vip-badge.vip-lion{color:#f0c95a}.rank-vip-badge.vip-epic{color:#cf8cff}.rank-vip-badge.vip-dragon{color:#72d58b}.rank-vip-badge.vip-legend{color:#ffe477}.rank-vip-badge.vip-imperial{color:#fff0a6}
@keyframes vipRankPulse{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.18);transform:scale(1.035)}}
@keyframes vipRankShine{0%{transform:rotate(0deg);opacity:.25}50%{opacity:.85}100%{transform:rotate(360deg);opacity:.25}}
@keyframes vipRankSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.avatar-vip-frame,.avatar-vip-frame::before,.avatar-vip-frame::after,.avatar-vip-label,.rank-frame.vip-bronze,.rank-frame.vip-iron,.rank-frame.vip-steel,.rank-frame.vip-flame,.rank-frame.vip-sapphire,.rank-frame.vip-lion,.rank-frame.vip-epic,.rank-frame.vip-dragon,.rank-frame.vip-legend,.rank-frame.vip-imperial,.rank-vip-badge{animation:none!important}}
@media (prefers-reduced-motion:reduce){.rank-frame.vip-bronze,.rank-frame.vip-iron,.rank-frame.vip-steel,.rank-frame.vip-flame,.rank-frame.vip-sapphire,.rank-frame.vip-lion,.rank-frame.vip-epic,.rank-frame.vip-dragon,.rank-frame.vip-legend,.rank-frame.vip-imperial,.rank-frame.vip-bronze::after,.rank-frame.vip-iron::after,.rank-frame.vip-steel::after,.rank-frame.vip-flame::after,.rank-frame.vip-sapphire::after,.rank-frame.vip-lion::after,.rank-frame.vip-epic::after,.rank-frame.vip-dragon::after,.rank-frame.vip-legend::after,.rank-frame.vip-imperial::after,.rank-frame.vip-flame::before,.rank-frame.vip-sapphire::before,.rank-frame.vip-lion::before,.rank-frame.vip-epic::before,.rank-frame.vip-dragon::before,.rank-frame.vip-legend::before,.rank-frame.vip-imperial::before{animation:none}}

.player-name{font:700 15px Cinzel;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-title{color:#d9b85f;font:700 10px Cinzel;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.player-level{color:var(--gold);font-size:11px}
.resources{display:flex;justify-content:flex-end;gap:8px}
.res{min-width:108px;padding:9px 11px;border:1px solid var(--line);background:linear-gradient(145deg,#0d2234,#091522);border-radius:9px;color:var(--muted);font-size:12px}
.res strong{display:block;color:var(--gold2);font-size:16px;margin-top:1px}
.res.power strong{color:#ffae61}.res.gem strong{color:#72c8f1}
.layout{display:grid;grid-template-columns:190px 1fr;min-height:calc(100vh - 76px)}
:root{--im-purple-nav-icons:url('assets/images/nav_bar_purple_fullbleed.webp');}
nav{position:sticky;top:76px;height:calc(100vh - 76px);border-right:1px solid #17384d;background:linear-gradient(180deg,#06131f,#071a29 75%,#050f18);padding:12px 10px;overflow:auto}
.nav-btn{width:100%;text-align:left;border:1px solid transparent;background:transparent;color:#89a5b7;padding:12px 13px;border-radius:8px;margin-bottom:4px;font-size:13px}
.nav-btn:hover{background:#0c2538;color:#dceaf2;border-color:#1d425b}
.nav-btn.active{background:linear-gradient(90deg,#17324a,#0d2335);border-color:#315774;color:#f0d27a;box-shadow:inset 3px 0 #d7ad58}

/* V39 — Sistema notifiche navigazione: segnali leggeri ma visibili */
.nav-btn.im-notify, .city-main-destination.im-notify, .city-sub-destination.im-notify{
  position:relative;
  box-shadow:0 0 0 1px rgba(255,196,72,.20),0 0 14px rgba(255,196,72,.20);
  animation:imNotifyGlow 1.8s ease-in-out infinite;
}
.nav-btn.im-notify::after, .city-main-destination.im-notify::after, .city-sub-destination.im-notify::after{
  content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:#ffd35a;box-shadow:0 0 5px #ffd35a,0 0 12px rgba(255,193,70,.95);
  animation:imNotifyDot 1.2s ease-in-out infinite;pointer-events:none;
}
.city-main-destination.im-notify::after{top:8px;right:28px;width:9px;height:9px}
.city-sub-destination.im-notify::after{top:50%;right:10px;transform:translateY(-50%);width:8px;height:8px}
.im-notify-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:999px;background:#ffb52e;color:#15100a;font:900 9px/16px Arial,sans-serif;box-shadow:0 0 10px rgba(255,181,46,.75);vertical-align:middle}
@keyframes imNotifyGlow{0%,100%{filter:brightness(1);box-shadow:0 0 0 1px rgba(255,196,72,.15),0 0 8px rgba(255,196,72,.12)}50%{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(255,196,72,.32),0 0 20px rgba(255,196,72,.28)}}
@keyframes imNotifyDot{0%,100%{transform:scale(.9);opacity:.72}50%{transform:scale(1.25);opacity:1}}
@media(prefers-reduced-motion:reduce){.nav-btn.im-notify,.city-main-destination.im-notify,.city-sub-destination.im-notify,.nav-btn.im-notify::after,.city-main-destination.im-notify::after,.city-sub-destination.im-notify::after{animation:none!important}}
.social-notify-dot{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#ff3b30;color:#fff;border:2px solid #071522;font:900 9px/11px Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px rgba(255,59,48,.12),0 0 12px rgba(255,59,48,.95);animation:socialPulse 1.15s ease-in-out infinite;z-index:8;pointer-events:none}.social-notify-dot.hidden{display:none}@keyframes socialPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.22);filter:brightness(1.3)}}
.city-notify-dot{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 3px;border-radius:999px;background:#ff3b30;color:#fff;border:2px solid #071522;font:900 10px/13px Arial,sans-serif;text-align:center;box-shadow:0 0 14px rgba(255,59,48,.95);animation:socialPulse 1.15s ease-in-out infinite;z-index:20;pointer-events:none}.city-main-destination,.city-sub-destination{position:relative}.social-notify-dot.city-inline{top:4px;right:4px}

.nav-sep{height:1px;background:#17384d;margin:10px 0}.nav-note{padding:8px 9px;color:#557287;font-size:10px;line-height:1.4}
main{padding:24px;max-width:1600px;width:100%;margin:auto}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:14px}
.eyebrow{font-size:10px;letter-spacing:2px;color:#5f8ba8;font-weight:800}
h1{font:700 28px Cinzel;color:#e9ce83;margin:3px 0 0}
h2{font:700 18px Cinzel;color:#d9c077;margin:0 0 10px}
h3{margin:0;color:#e4edf1;font-size:15px}.muted{color:var(--muted);font-size:12px}.tiny{font-size:10px;color:#648095}
.card{background:linear-gradient(145deg,rgba(10,29,45,.98),rgba(5,16,27,.98));border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.pad{padding:16px}.grid{display:grid;gap:12px}.home-grid{grid-template-columns:340px minmax(0,1fr) 360px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.home-stat-grid{grid-template-columns:repeat(3,1fr)}.stat{padding:9px;background:#071522;border:1px solid #17384d;border-radius:8px;text-align:center}.stat b{display:block;font-size:15px;white-space:nowrap}.stat small{color:#7892a3}
.progress{height:8px;background:#071018;border:1px solid #203746;border-radius:20px;overflow:hidden}
.stat-bonus{color:#79d99a;font-size:.82em;font-weight:800;margin-left:3px}
.damage-pop{position:fixed;z-index:9999;pointer-events:none;font-size:30px;font-weight:900;text-shadow:0 3px 8px #000;transform:translate(-50%,0) scale(.9);animation:damageFloat .8s ease-out forwards}
.damage-pop.manual{color:#67f28b;text-shadow:0 0 8px rgba(35,170,76,.75),0 3px 8px #000}
.damage-pop.auto{color:#ff5b55;text-shadow:0 0 8px rgba(210,35,35,.8),0 3px 8px #000}
.damage-pop.crit{font-size:40px;color:#ffd45c;text-shadow:0 0 10px #7a2f12,0 3px 10px #000;animation:critFloat .95s ease-out forwards}
.damage-pop.auto.crit{color:#72dcff;text-shadow:0 0 12px rgba(73,194,255,.95),0 3px 10px #000}
/* ===== Premium Cosmetics · beta-ready (solo estetica, zero statistiche) ===== */
/* ===== CORNICI PREMIUM · ANCORATE AL RIQUADRO COMBATTIMENTO =====
   La cornice vive nello stesso contenitore dell'immagine: nessun tracking
   su scroll, nessun inseguimento del riquadro e nessun micro-spostamento. */
.combat-art-shell{position:relative!important}
#premiumCombatFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  pointer-events:none!important;
  z-index:8;
  box-sizing:border-box;
  border-radius:inherit;
  border:4px solid transparent;
  transform:translateZ(0);
}
#premiumCombatFrame.active{display:block}

/* Velo dell'Abisso — ametista */
#premiumCombatFrame.frame-abyss{
  border-color:rgba(191,106,255,1);
  box-shadow:
    inset 0 0 0 2px rgba(38,10,56,1),
    inset 0 0 20px rgba(112,31,156,.72),
    inset 0 0 40px rgba(151,69,205,.38),
    0 0 0 2px rgba(31,8,46,.94),
    0 0 14px rgba(196,103,255,.82),
    0 0 30px rgba(151,64,214,.72),
    0 0 52px rgba(55,17,76,.70);
}

/* Corona Infernale — rubino */
#premiumCombatFrame.frame-inferno{
  border-color:rgba(255,67,94,1);
  box-shadow:
    inset 0 0 0 2px rgba(104,8,24,1),
    inset 0 0 18px rgba(208,18,48,.42),
    inset 0 0 34px rgba(138,10,30,.24),
    0 0 0 2px rgba(112,9,27,.94),
    0 0 13px rgba(255,112,132,.84),
    0 0 28px rgba(235,38,72,.92),
    0 0 46px rgba(120,10,27,.56);
}

/* Morsa Venefica — smeraldo */
#premiumCombatFrame.frame-venom{
  border-color:rgba(42,224,148,1);
  box-shadow:
    inset 0 0 0 2px rgba(8,81,52,1),
    inset 0 0 20px rgba(17,151,96,.38),
    inset 0 0 36px rgba(14,112,73,.24),
    0 0 0 2px rgba(7,76,49,.94),
    0 0 14px rgba(78,244,177,.82),
    0 0 28px rgba(31,201,131,.82),
    0 0 46px rgba(10,102,66,.48);
}

.hit-flash{animation:monsterHit .24s ease-out}
.crit-flash{animation:monsterCrit .5s ease-out}
.auto-crit-flash{animation:monsterAutoCrit .5s ease-out}
@keyframes damageFloat{0%{opacity:0;transform:translate(-50%,12px) scale(.75)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-58px) scale(1.08)}}
@keyframes critFloat{0%{opacity:0;transform:translate(-50%,15px) scale(.65) rotate(-3deg)}12%{opacity:1;transform:translate(-50%,0) scale(1.15) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-78px) scale(1.25) rotate(0)}}
@keyframes monsterHit{0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}100%{transform:translateX(0)}}
@keyframes monsterCrit{0%{filter:brightness(1);transform:scale(1)}18%{filter:brightness(1.9);transform:scale(1.045)}45%{filter:brightness(1.35);transform:scale(.985)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes monsterAutoCrit{0%{filter:brightness(1) saturate(1);transform:scale(1)}18%{filter:brightness(1.75) saturate(1.7) hue-rotate(155deg);transform:scale(1.04)}45%{filter:brightness(1.3) saturate(1.35) hue-rotate(155deg);transform:scale(.988)}100%{filter:brightness(1) saturate(1);transform:scale(1)}}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#8d6729,#eac866)}
.scene{height:475px;position:relative;background:#06121d}
.scene img{width:100%;height:100%;object-fit:cover;display:block}
.scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,8,13,.02) 45%,rgba(0,0,0,.75) 100%)}
.enemy-title{position:absolute;z-index:4;top:54px;left:12%;right:12%;text-align:center;font:700 20px Cinzel;color:#f0d58c;text-shadow:0 2px 7px #000;background:rgba(3,10,16,.34);padding:3px 8px;border-radius:10px}
.enemy-sub{font:500 10px Inter;color:#9cb8c8;margin-left:6px}
.stage-chip{position:absolute;z-index:4;top:14px;left:15px;border:1px solid #315774;background:#081a29d9;border-radius:18px;padding:7px 11px;color:#a9c5d4;font-size:11px}
.enemy-info{position:absolute;z-index:5;left:10%;right:10%;bottom:18px;text-align:center}
.hp-text{font-size:12px;font-weight:800;text-shadow:0 2px 5px #000;margin-bottom:5px}.hpbar{height:14px;border:1px solid #68272a;background:#160b0f;border-radius:10px;overflow:hidden}.hpbar i{height:100%;display:block;background:linear-gradient(90deg,#842026,#dc483f,#ff6e58)}
.attack-row{overflow:hidden;position:absolute;z-index:6;left:0;right:0;bottom:57px;text-align:center}.attack{border:1px solid #b7893e;border-radius:26px;background:linear-gradient(#94743b,#4a361b);color:#f8e4ae;padding:11px 30px;font-weight:800;box-shadow:0 8px 20px #000}
.rewards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #17384f}.reward{padding:11px 12px;border-right:1px solid #17384f}.reward:last-child{border-right:0}.reward small{display:block;color:#67859a;font-size:9px;letter-spacing:1px}.reward b{display:block;margin-top:4px;color:#dce8ee;font-size:13px}
.stage-track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stage-node{padding:10px;border:1px solid #1a4058;background:#071522;border-radius:8px}.stage-node.active{border-color:var(--gold);box-shadow:0 0 0 1px rgba(226,188,98,.25)}.stage-node.done{border-color:#2f6e58}.stage-node.locked{opacity:.45}.stage-node b{font-size:11px}.stage-node span{display:block;color:#7894a6;font-size:9px;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:18px;border:1px solid #315774;background:#091a29;color:#aac1cf;font-size:10px}
.badge.tier1{border-color:#466477;color:#c5d0d7}.badge.tier2{border-color:#4f896f;color:#8fe0b3}.badge.tier3{border-color:#47739b;color:#8bc7f4}.badge.tier4{border-color:#7b5a9f;color:#c9a4ff}.badge.tier5{border-color:#9c7035;color:#f4cf7f}.badge.tier6{border-color:#9b4147;color:#ff9a8f}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.tile{border:1px solid #1b425c;border-radius:8px;background:#071522;overflow:hidden}.tile img{width:100%;aspect-ratio:1.35;object-fit:cover;display:block}.tile-body{padding:7px}.tile-body b{display:block;font-size:11px}.tile-body small{display:block;color:#6e8ca0;font-size:9px;margin-top:2px}
.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.chapter-card{padding:14px;border:1px solid #1b425c;border-radius:10px;background:linear-gradient(145deg,#091a29,#07131f)}.chapter-top{display:flex;justify-content:space-between;gap:10px;align-items:start}.chapter-card h3{font:700 17px Cinzel;color:#e7ce87}.chapter-card .desc{color:#7995a6;font-size:11px;margin:7px 0 11px;line-height:1.4}.reqs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.req{padding:6px;border:1px solid #17384d;border-radius:6px;background:#06121e;font-size:10px;color:#7e9aaa}.chapter-card.locked{opacity:.5}.chapter-card.current{border-color:#9c7b3f;box-shadow:0 0 0 1px rgba(226,188,98,.12)}
.list{display:grid;gap:10px}.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid #183a50;background:#071522;border-radius:9px}.row-main{min-width:0}.row strong{color:#e2c671}.btn{border:1px solid #315774;background:#12304a;color:#dcebf3;padding:8px 12px;border-radius:7px}.btn.gold{border-color:#8b6d39;background:#4b391e;color:#f5d994}.btn.red{border-color:#7c3c45;background:#3b1c22;color:#ffb8b3}.btn.green{border-color:#33735b;background:#163728;color:#9ce1bd}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.tab{border:1px solid #23465f;background:#091a29;color:#91adbe;padding:8px 12px;border-radius:8px}.tab.active{color:#f0d27a;border-color:#b18c4b}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:9px;border-bottom:1px solid #17384d;text-align:left;font-size:12px}.table th{color:#7190a2;font-size:10px;letter-spacing:1px}.rank1{color:#f0d27a}.rank2{color:#cbd7df}.rank3{color:#d89e74}.rank-player{display:flex;align-items:center;gap:9px;min-width:190px}.rank-frame{width:42px;height:42px;flex:0 0 42px;position:relative;border:2px solid #315774;border-radius:11px;padding:2px;background:#071522;box-shadow:0 0 0 1px #0b1c2a}.rank-frame img{width:100%;height:100%;display:block;object-fit:cover;border-radius:7px}.rank-frame.avventuriero{border-color:#728da2}.rank-frame.guerriero{border-color:#aab7c4}.rank-frame.veterano{border-color:#a77935}.rank-frame.fiamma{border-color:#c65b35;box-shadow:0 0 10px #c65b3544}.rank-frame.regale{border-color:#d7ad58;box-shadow:0 0 10px #d7ad5855}.rank-frame.teschio{border-color:#b5c0c5}.rank-frame.draconico{border-color:#8a4dca;box-shadow:0 0 10px #8a4dca55}.rank-frame.ombra{border-color:#53617d;box-shadow:0 0 10px #53617d44}.rank-frame.fulmine{border-color:#72b8d6}.rank-frame.tridente{border-color:#5bc0b6}.rank-frame.drago-antico,.rank-frame.imperiale{border-color:#e2c671}.rank-frame.cosmico{border-color:#a47bd4}.rank-frame.mandra-eterno{border-color:#f0d27a}.rank-frame.vip-bronze{border-color:#9b6b3f}.rank-frame.vip-iron{border-color:#aab7c4}.rank-frame.vip-steel{border-color:#6f9bb8}.rank-frame.vip-flame{border-color:#e85d3f;box-shadow:0 0 10px #e85d3f55}.rank-frame.vip-sapphire{border-color:#4aa9e8;box-shadow:0 0 10px #4aa9e855}.rank-frame.vip-lion{border-color:#d2a642;box-shadow:0 0 10px #d2a64255}.rank-frame.vip-epic{border-color:#b16ee8;box-shadow:0 0 10px #b16ee855}.rank-frame.vip-dragon{border-color:#57a96b;box-shadow:0 0 10px #57a96b55}.rank-frame.vip-legend{border-color:#e6c95c;box-shadow:0 0 10px #e6c95c66}.rank-frame.vip-imperial{border-color:#f1d37a;box-shadow:0 0 12px #f1d37a77}.avatar-vip-frame.vip-bronze{border-color:#9b6b3f}.avatar-vip-frame.vip-iron{border-color:#aab7c4}.avatar-vip-frame.vip-steel{border-color:#6f9bb8}.avatar-vip-frame.vip-flame{border-color:#e85d3f;box-shadow:0 0 12px #e85d3f66}.avatar-vip-frame.vip-sapphire{border-color:#4aa9e8;box-shadow:0 0 12px #4aa9e866}.avatar-vip-frame.vip-lion{border-color:#d2a642;box-shadow:0 0 12px #d2a64266}.avatar-vip-frame.vip-epic{border-color:#b16ee8;box-shadow:0 0 12px #b16ee866}.avatar-vip-frame.vip-dragon{border-color:#57a96b;box-shadow:0 0 12px #57a96b66}.avatar-vip-frame.vip-legend{border-color:#e6c95c;box-shadow:0 0 14px #e6c95c77}.avatar-vip-frame.vip-imperial{border-color:#f1d37a;box-shadow:0 0 16px #f1d37a88}.rank-player-info{display:flex;flex-direction:column;gap:2px}.rank-title{font-size:10px;color:#e2c671;font-weight:800}.clan-rank-frame{border-radius:50%;overflow:hidden}.clan-rank-frame img{width:100%;height:100%;object-fit:cover;display:block}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.field label{display:block;color:#7592a4;font-size:10px;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;background:#06131f;color:#edf4f8;border:1px solid #294c64;border-radius:8px;padding:10px}.field textarea{min-height:110px;resize:vertical}
.avatar-choices{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.avatar-choice{border:1px solid #1c4159;background:#071522;border-radius:8px;padding:0;overflow:hidden}.avatar-choice img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.avatar-choice.active{border-color:var(--gold);box-shadow:0 0 0 1px rgba(226,188,98,.2)}
.chat{height:360px;overflow:auto;padding:10px;background:#06121d;border:1px solid #17384d;border-radius:9px}.msg{margin-bottom:9px}.msg .who{color:#e2c671;font-weight:800;font-size:11px}.msg .text{color:#c5d7e1;font-size:12px;margin-top:2px}.msg.me .who{color:#8fd6f7}
.clan-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.72);z-index:100;padding:18px}.modal.show{display:grid}.modal-box{width:min(520px,100%);background:#091927;border:1px solid #315774;border-radius:12px;padding:18px}
.small-list{display:grid;gap:6px}.small-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border:1px solid #183a50;background:#071522;border-radius:7px;font-size:11px}
.notice{padding:11px;border:1px dashed #315774;background:#071522;border-radius:8px;color:#8da8b7;font-size:11px;line-height:1.45}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.kpi{padding:12px;border:1px solid #183a50;background:#071522;border-radius:8px}.kpi small{display:block;color:#6e8ca0;font-size:9px;text-transform:uppercase;letter-spacing:1px}.kpi b{display:block;margin-top:4px;font-size:15px}

.class-selection{min-height:calc(100vh - 125px);display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:1280px;margin:auto}
.selection-head{text-align:center;max-width:860px;margin:0 auto}.selection-head h1{font-size:38px}.selection-head p{color:var(--muted);font-size:13px}
.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.class-card{padding:0;border:1px solid #1b425c;background:linear-gradient(145deg,#0a1b2a,#06121d);border-radius:14px;overflow:hidden;text-align:left;color:var(--text);transition:.18s;box-shadow:0 15px 35px #0007}.class-card:hover{transform:translateY(-3px);border-color:#426c86}.class-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(226,188,98,.18),0 18px 40px #0009}.class-card img{width:100%;aspect-ratio:1.55;object-fit:contain;object-position:center center;display:block;background:#06121d}.class-card-body{padding:12px}.class-card-body h2{margin:5px 0 4px}.class-card-body p{color:#7e99aa;font-size:11px;line-height:1.45;min-height:62px}.selection-footer{display:flex;align-items:center;gap:12px;flex-direction:column}.class-confirm{min-width:220px;font-size:14px;padding:11px 18px}
/* V24 — selezione classe a carosello + HUD nascosto durante la scelta */
body.class-selection-mode .topbar,body.class-selection-mode nav{display:none!important}
body.class-selection-mode .layout{display:block;min-height:100vh}
body.class-selection-mode main{max-width:none;min-height:100vh;padding:28px 24px;}
body.class-selection-mode .class-selection{min-height:calc(100vh - 56px);}
.class-carousel{display:grid;grid-template-columns:74px minmax(0,760px) 74px;align-items:center;justify-content:center;gap:18px;width:100%;margin:0 auto;}
.class-arrow{width:74px;height:74px;border:1px solid #6d5830;border-radius:50%;background:radial-gradient(circle at 35% 30%,#273d4b,#091522 70%);color:#f0d27a;font:900 34px/1 Arial,sans-serif;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(226,188,98,.08),0 10px 25px #0008;transition:.16s ease;}
.class-arrow:hover{transform:scale(1.08);filter:brightness(1.15);border-color:#d7ad58;box-shadow:0 0 18px rgba(226,188,98,.25),0 10px 28px #0009;}
.class-carousel .class-card{width:100%;height:500px;text-align:left;display:flex;flex-direction:column;}
.class-carousel .class-card img{aspect-ratio:1.65;max-height:420px;flex:0 0 auto;object-fit:cover;}
.class-carousel .class-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;min-height:0;}
.class-carousel .class-card-body h2{font-size:30px;margin:5px 0 3px;}
.class-carousel .class-card-body p{font-size:13px;line-height:1.55;min-height:0;margin:10px 0 14px;color:#9ab0bc}.class-lore{font-style:italic;color:#b2c1c9!important;margin:8px 0 10px!important}.class-effects{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid #17384d}.class-effect-box{padding:10px 11px;border:1px solid #23465f;border-radius:9px;background:#071522;min-height:58px}.class-effect-box h4{margin:0 0 6px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase}.class-effect-box.buff h4{color:#63d471}.class-effect-box.nerf h4{color:#ff625b}.class-effect{display:block;font-size:11px;font-weight:800;line-height:1.45;margin-top:3px}.class-effect.buff{color:#63d471}.class-effect.nerf{color:#ff625b}
.class-role{color:#8fa8b7;font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:800;}
.class-effect.none{color:#607b8d;font-weight:600;}
.class-carousel-counter{text-align:center;color:#66869b;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-top:5px;position:relative;z-index:2;}
@media(max-width:700px){
  body.class-selection-mode main{padding:14px 10px 20px;}
  body.class-selection-mode .class-selection{min-height:calc(100vh - 34px);gap:12px;}
  .class-carousel{grid-template-columns:48px minmax(0,1fr) 48px;gap:7px;}
  .class-arrow{width:48px;height:58px;border-radius:14px;font-size:27px;}
  .class-carousel .class-card{height:500px;}
  .class-carousel .class-card img{aspect-ratio:1.65;max-height:245px;}
  .class-carousel .class-card-body{padding:14px 15px 16px;}
  .class-carousel .class-card-body h2{font-size:24px;}
  .class-carousel .class-card-body p{font-size:12px;line-height:1.45;margin:8px 0 11px;}
  .class-effects{gap:7px;margin-top:auto;padding-top:8px;}
  .class-effect-box{padding:9px 10px;min-height:56px;}
  .class-effect-box h4{margin-bottom:5px;font-size:9px;}
  .class-effect{font-size:10px;}
}
@media(max-width:380px){
  .class-carousel{grid-template-columns:42px minmax(0,1fr) 42px;gap:5px;}
  .class-arrow{width:42px;height:52px;font-size:24px;}
  .class-carousel .class-card{height:500px;}
  .class-carousel .class-card img{max-height:205px;}
  .class-carousel .class-card-body h2{font-size:21px;}
}
.character-sheet{display:grid;gap:12px}.character-hero{display:grid;grid-template-columns:390px 1fr;min-height:315px}.character-art-wrap{background:#06121d;min-height:315px;display:flex;align-items:center;justify-content:center}.character-art{width:100%;height:100%;object-fit:cover;display:block}.character-info{padding:20px}.character-info h2{font-size:28px;margin:3px 0 10px}.character-info p{max-width:760px}
.auth-screen{min-height:calc(100vh - 110px);display:flex;align-items:center;justify-content:center;padding:30px}.auth-box{width:min(520px,100%);background:linear-gradient(145deg,#0a1d2d,#06121d);border:1px solid #315774;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.auth-tabs{display:flex;border-bottom:1px solid #1b425c}.auth-tab{flex:1;padding:13px;border:0;background:#071522;color:#7e99aa}.auth-tab.active{color:#f0d27a;background:#10283b}.auth-body{padding:22px}.auth-title{font:700 28px Cinzel;color:#e9ce83;margin:0 0 6px}.auth-actions{display:flex;gap:8px;margin-top:12px}.auth-actions .btn{flex:1}.auth-language{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin:-2px 0 14px}
.auth-language{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:-2px 0 14px}
.auth-language-label{color:#7894a6;font-size:9px;text-transform:uppercase;letter-spacing:1px}
.auth-language-select{min-width:210px;max-width:100%;height:42px;padding:0 36px 0 12px;border:1px solid #315774;border-radius:9px;background:#071522;color:#e9ce83;font:800 11px Inter,Arial,sans-serif;cursor:pointer;outline:none}
.auth-language-select:focus{border-color:#b18c4b;box-shadow:0 0 0 2px rgba(226,188,98,.12)}
.language-settings-select{min-width:220px}
@media(max-width:520px){.auth-language{align-items:stretch;flex-direction:column}.auth-language-select{width:100%;min-width:0}}
.auth-language-label{color:#7894a6;font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-right:2px}.char-upgrade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.char-upgrade{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:13px;border:1px solid #1b425c;border-radius:10px;background:#071522}.char-icon{width:72px;height:72px;border-radius:10px;display:grid;place-items:center;background:#0b2030;border:1px solid #23465f;font-size:28px}.char-upgrade h3{margin-bottom:4px}.char-level{color:#e2c671;font-size:11px}.char-values{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.char-values span{font-size:10px;color:#8ca6b5}.char-cost{min-width:110px;text-align:right}.logout-link{float:right;margin-top:10px}/* V13 mobile polish: fixed centered resources + non-scrolling attack button */
body{overflow-x:hidden}
.layout.auth-mode{display:block;min-height:100vh}
.layout.auth-mode nav{display:none!important}
.layout.auth-mode main{width:100%;max-width:none;padding:24px 16px}
body.auth-shell-mode .topbar,
body.auth-shell-mode #nav{display:none!important}
body.auth-shell-mode .layout{display:block!important;min-height:100vh!important}
body.auth-shell-mode .layout main{width:100%!important;max-width:none!important;min-height:100vh!important;padding:0!important}
body.auth-shell-mode .auth-screen{min-height:100vh!important}
.auth-screen{width:100%;max-width:100%;min-height:calc(100vh - 48px);padding:24px 12px;margin:0 auto}
.auth-box{margin:0 auto;max-width:520px;width:100%}
.auth-body{min-width:0}
.attack{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain;white-space:nowrap;max-width:100%;}
.resources{min-width:0}
@media(max-width:900px){
  .top{grid-template-columns:1fr;justify-items:center;padding:0 10px;}
  .resources{grid-column:1;width:100%;justify-content:center;align-items:center;gap:8px;}
  .res{flex:0 1 150px;min-width:0;}
}
@media(max-width:560px){
  .topbar{height:76px;}
  .resources{width:100%;gap:6px;justify-content:center;}
  .res{flex:1 1 0;max-width:150px;min-width:0;padding:7px 8px;}
  .res strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .attack{width:100%;padding:12px 14px;font-size:clamp(14px,4vw,18px);}
}

@media(max-width:700px){.char-upgrade-grid{grid-template-columns:1fr}.char-upgrade{grid-template-columns:60px 1fr}.char-cost{grid-column:2;text-align:left}.auth-actions{flex-direction:column}}

@media(max-width:1200px){.home-grid{grid-template-columns:300px minmax(0,1fr)}.home-grid>.bestiary{grid-column:1/-1}.home-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-grid{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(6,1fr)}}
@media(max-width:900px){.top{grid-template-columns:1fr auto}.brand{display:none}.player{display:none}.resources{grid-column:2}.layout{grid-template-columns:1fr}main{padding:15px 10px 106px}.home-grid,.clan-layout{grid-template-columns:1fr}.home-grid>.profile{display:none}.stage-track{grid-template-columns:repeat(3,1fr)}.gallery{grid-template-columns:repeat(3,1fr)}.avatar-choices{grid-template-columns:repeat(4,1fr)}.form-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.resources{gap:3px}.res{min-width:58px;padding:5px 4px}.res strong{font-size:10px}.scene{height:370px}.chapter-grid{grid-template-columns:1fr}.stage-track{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}.avatar-choices{grid-template-columns:repeat(3,1fr)}.head{align-items:start}.rewards{grid-template-columns:repeat(2,1fr)}.reward:nth-child(2){border-right:0}}

.banner-frame{position:relative;border:3px solid #9d7a35;border-radius:16px;padding:6px;background:linear-gradient(145deg,#0b1724,#07101a);box-shadow:0 0 0 2px #1b425c,0 8px 28px #0009;height:100%;width:100%;box-sizing:border-box}.banner-frame:before,.banner-frame:after{content:"";position:absolute;width:18px;height:18px;border-color:#e2c671;pointer-events:none}.banner-frame:before{left:-3px;top:-3px;border-left:3px solid;border-top:3px solid;border-radius:12px 0 0 0}.banner-frame:after{right:-3px;bottom:-3px;border-right:3px solid;border-bottom:3px solid;border-radius:0 0 0 0}.banner-frame img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}.banner-frame.avventuriero{border-color:#728da2}.banner-frame.guerriero{border-color:#aab7c4}.banner-frame.veterano{border-color:#a77935}.banner-frame.fiamma{border-color:#c65b35;box-shadow:0 0 16px #c65b3544}.banner-frame.regale{border-color:#d7ad58;box-shadow:0 0 18px #d7ad5855}.banner-frame.teschio{border-color:#b5c0c5}.banner-frame.draconico{border-color:#8a4dca;box-shadow:0 0 18px #8a4dca55}.banner-frame.ombra{border-color:#53617d;box-shadow:0 0 22px #53617d44}.banner-frame.fulmine{border-color:#72b8d6;box-shadow:0 0 22px #72b8d655}.banner-frame.tridente{border-color:#5bc0b6;box-shadow:0 0 22px #5bc0b644}.banner-frame.drago-antico,.banner-frame.imperiale{border-color:#e2c671;box-shadow:0 0 25px #e2c67166}.banner-frame.cosmico{border-color:#a47bd4;box-shadow:0 0 28px #a47bd466}.banner-frame.mandra-eterno{border-color:#f0d27a;box-shadow:0 0 32px #f0d27a88}.milestone-list{display:flex;gap:8px;flex-wrap:wrap}.milestone{padding:9px 11px;border:1px solid #24465d;background:#071522;border-radius:9px;min-width:100px}.milestone.locked{opacity:.42}.milestone b,.milestone small{display:block}.milestone small{color:#6e8ca0;margin-top:3px}.title-badge{display:inline-flex;align-items:center;gap:6px;margin-top:6px}.rpg-sheet{display:grid;gap:14px}.rpg-hero{display:grid;grid-template-columns:360px 1fr;overflow:hidden;padding:0;min-height:330px}.rpg-portrait{position:relative;background:#06121d;min-height:330px;display:flex;align-items:center;justify-content:center}.rpg-portrait img{width:100%;height:100%;object-fit:cover;display:block}.level-badge{position:absolute;right:14px;top:14px;background:#071522;border:1px solid #d7ad58;color:#f0d27a;border-radius:999px;padding:8px 12px;font-weight:800;box-shadow:0 6px 20px #0008}.rpg-identity{padding:24px}.rpg-identity h2{font-size:34px;margin:3px 0}.class-title{color:#e2c671;font-weight:800;font-size:14px;margin-bottom:12px}.xp-head{display:flex;justify-content:space-between;margin-top:20px;font-size:11px;color:#8ca6b5}.xp-head b{color:#f0d27a}.xp-large{height:13px;margin-top:7px}.rpg-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.rpg-mini>div{border:1px solid #1b425c;background:#071522;border-radius:9px;padding:10px}.rpg-mini small{display:block;color:#6e8ca0;font-size:9px;text-transform:uppercase}.rpg-mini b{display:block;margin-top:4px}.section-title-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;margin-bottom:14px}.rpg-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.rpg-stat-card{border:1px solid #1b425c;background:linear-gradient(145deg,#0a1b2a,#06121d);border-radius:11px;padding:14px}.rpg-stat-top{display:flex;gap:11px;align-items:center}.rpg-stat-top h3{margin:0 0 3px}.rpg-stat-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:10px;background:#0b2030;border:1px solid #294c64;font-size:22px}.stat-values{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;margin-top:12px;border-top:1px solid #17384d;border-bottom:1px solid #17384d;padding:10px 0}.stat-values small{display:block;color:#5f8ba8;font-size:8px;letter-spacing:1px}.stat-values b{font-size:14px;color:#e9ce83}.arrow{text-align:center;color:#66869b}.upgrade-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:10px;color:#6e8ca0}.upgrade-row .btn{min-width:105px}.growth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.growth-grid>div{padding:13px;border:1px solid #1b425c;background:#071522;border-radius:10px}.growth-grid span{font-size:20px}.growth-grid b,.growth-grid small{display:block}.growth-grid b{margin:7px 0 4px}.growth-grid small{color:#6e8ca0;line-height:1.4}@media(max-width:900px){.home-stat-grid{grid-template-columns:1fr 1fr}.rpg-hero{grid-template-columns:1fr}.rpg-portrait{height:300px}.rpg-stat-grid{grid-template-columns:1fr}.growth-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.home-stat-grid{grid-template-columns:1fr 1fr}.rpg-mini{grid-template-columns:1fr}.growth-grid{grid-template-columns:1fr}.section-title-row{align-items:flex-start;flex-direction:column}}
.clan-title{display:flex;align-items:center;gap:14px;padding:10px 0 4px}.clan-emblem{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}.clan-emblem.mini{width:42px;height:42px}.emblem-picker{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.emblem-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:9px}.emblem-choice{background:#071522;border:1px solid #23465f;border-radius:10px;padding:6px;cursor:pointer;transition:.15s}.emblem-choice:hover{transform:translateY(-2px);border-color:var(--gold)}.emblem-choice.selected{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(226,188,98,.18),0 0 18px rgba(226,188,98,.12)}.emblem-choice img{display:block;width:100%;height:auto}.emblem-choice{min-height:68px;display:grid;place-items:center}@media(max-width:560px){.emblem-grid{grid-template-columns:repeat(4,1fr)}}

.clan-image-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.clan-image-grid .emblem-choice{aspect-ratio:1/1;min-height:0;padding:5px;background:#071522;overflow:hidden}
.clan-image-grid .emblem-choice img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}
.clan-role-list{display:grid;gap:9px;margin-top:10px}.clan-role-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:linear-gradient(135deg,#0a1b2a,#071522);border:1px solid #23465f;border-radius:12px}.clan-role-card strong{display:block}.clan-role-card .tiny{margin-top:3px}.clan-role-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.clan-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:1000}.clan-modal{width:min(680px,100%);max-height:min(88vh,760px);overflow:auto;background:linear-gradient(160deg,#0d2030,#07131e 70%);border:1px solid #315a73;border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.55);padding:22px}.clan-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.clan-modal-head h2{margin:3px 0 0}.clan-perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.clan-perm-check{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #254b64;border-radius:11px;background:#091a28;cursor:pointer}.clan-perm-check input{appearance:none;width:21px;height:21px;border:2px solid #52758a;border-radius:6px;display:grid;place-items:center;flex:none}.clan-perm-check input:checked{border-color:var(--gold2);background:var(--gold2)}.clan-perm-check input:checked:after{content:'✓';color:#08131b;font-weight:900;font-size:15px}.clan-modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #203e52}.clan-role-select{width:100%;background:#071522;color:#fff;border:1px solid #315a73;border-radius:9px;padding:10px}.clan-new-role{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.clan-new-role input{min-width:0;background:#071522;color:#fff;border:1px solid #315a73;border-radius:9px;padding:10px}@media(max-width:560px){.clan-perm-grid{grid-template-columns:1fr}.clan-modal{padding:16px}.clan-new-role{grid-template-columns:1fr}}
.clan-main-image{width:112px;height:112px;border-radius:12px;object-fit:cover;flex:0 0 112px}
@media(max-width:700px){.clan-image-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clan-main-image{width:86px;height:86px;flex-basis:86px}}

/* ===== legacy-03 ===== */
.reward-bonus{font-size:.68em;font-weight:900;color:#63d471!important;white-space:nowrap}.signed-bonus.positive{color:#63d471!important}.signed-bonus.negative{color:#ff6464!important}.signed-bonus.neutral{color:#8ea8b8!important}

/* ===== legacy-04 ===== */
.nav-btn{display:flex;align-items:center;gap:11px;min-height:44px}
.nav-icon{width:23px;height:23px;display:grid;place-items:center;flex:0 0 23px;color:#7f9cad}
.nav-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.nav-btn.active .nav-icon{color:var(--gold2);filter:drop-shadow(0 0 5px rgba(226,188,98,.18))}.nav-btn .nav-icon{position:relative;border:1px solid #2a4a60;border-radius:8px;background:linear-gradient(145deg,#0b2131,#071522);box-shadow:inset 0 0 0 1px rgba(226,188,98,.05),0 3px 8px #0005}.nav-btn.active .nav-icon{border-color:#8f723d;background:linear-gradient(145deg,#182e40,#0a1926);box-shadow:inset 0 0 0 1px rgba(226,188,98,.12),0 0 9px rgba(226,188,98,.12)}.nav-btn:hover .nav-icon{border-color:#466b80}
.nav-btn:hover .nav-icon{color:#c8dce7}
.skill-badge{border-color:#8c6f39!important;color:#f0d27a!important;background:linear-gradient(145deg,#2b2111,#17140d)!important;box-shadow:0 0 14px rgba(226,188,98,.08)}
.rpg-stat-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.rpg-stat-card:hover{transform:translateY(-2px);border-color:#3c6178;box-shadow:0 14px 28px #0007}
.charUp:not(:disabled){box-shadow:0 5px 14px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08)}
.charUp:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.08)}

/* VIOLET NAVBAR + SYSTEM MAIL DELETE */

.system-mail-entry{position:relative}
.system-mail-item{width:100%}
.system-mail-delete{position:absolute;top:10px;right:10px;z-index:3;min-width:auto;padding:7px 10px;border-radius:999px;border:1px solid #7d2840;background:linear-gradient(145deg,#3b0f1f,#1a0d14);color:#ffd5de;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.24)}
.system-mail-delete:hover{border-color:#ff7b9f;color:#fff3f6;transform:translateY(-1px)}
.system-mail-item.has-admin-delete{padding-right:92px}
.system-mail-admin-note{margin-top:8px;font-size:11px;color:#9fb6c7}

/* ===== legacy-05 ===== */
.home-mobile-focus{max-width:900px;margin:0 auto;}
.monster-card-only{overflow:hidden;}
.enemy-visual{display:flex;justify-content:center;align-items:center;min-height:260px;padding:14px 0;}
.enemy-visual img{width:min(340px,72vw);height:min(340px,72vw);max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));}
.home-rewards{grid-template-columns:repeat(2,1fr);gap:0;}
.home-reward-group{border-top:1px solid #17384f;}
.home-reward-title{padding:9px 12px 0;color:#67859a;font-size:9px;letter-spacing:1.4px;font-weight:800;}
.home-player-group{border-top:1px solid #17384f;}
.home-xp-mini{height:6px;margin-top:7px;}
.home-xp-mini i{display:block;height:100%;background:linear-gradient(90deg,#4b86b4,#7bc6f0);border-radius:20px;}
.home-player-reward{min-height:78px;}
.reward-highlight{position:relative;}
.skill-ready{border:1px solid rgba(255,205,80,.9)!important;border-right:1px solid rgba(255,205,80,.9)!important;background:linear-gradient(145deg,#2b2111,#17140d)!important;box-shadow:0 0 0 1px rgba(255,205,80,.16),0 0 18px rgba(255,190,40,.24),inset 0 0 18px rgba(255,190,40,.06);animation:skillPulse 1.8s ease-in-out infinite;}
.skill-ready-label{display:block;margin-top:4px;font-size:9px;letter-spacing:.12em;color:#ffd66b;font-weight:800;}
.home-skill-reward{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none;border:0;border-right:1px solid #17384f;background:#071522;padding:11px 12px;transition:filter .16s ease,transform .16s ease,background .16s ease;}
.home-skill-reward:hover{filter:brightness(1.08);transform:translateY(-1px);}.home-skill-reward.skill-ready:hover{box-shadow:0 0 0 1px rgba(255,205,80,.2),0 0 26px rgba(255,190,40,.38),inset 0 0 20px rgba(255,190,40,.08);}
.home-skill-reward:focus-visible{outline:2px solid var(--gold2);outline-offset:-2px;}
.home-skill-note{margin:10px 14px 0;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;text-align:center;font-size:12px;color:#a9b0bd;background:rgba(255,255,255,.025);}
.home-skill-note.active{color:#f4d67a;border-color:rgba(255,205,80,.35);background:rgba(255,190,40,.06);}
@keyframes skillPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@media(max-width:700px){
  .home-mobile-focus{width:100%;}
  .monster-card-only{border-radius:14px;}
  .enemy-visual{min-height:220px;padding:8px 0;}
  .enemy-visual img{width:min(270px,76vw);height:min(270px,76vw);}
  .home-rewards{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px;}
  .home-rewards .reward{min-height:62px;padding:9px 8px;}.home-rewards .home-skill-reward{padding:9px 8px;}
  .home-reward-title{padding:9px 10px 0;}
  .home-player-reward{min-height:84px;}
  .home-xp-mini{height:5px;}
  .home-rewards .reward b{font-size:15px;}
  .home-skill-note{margin:8px 10px 2px;font-size:11px;line-height:1.4;}
}

/* ===== legacy-06 ===== */
/* V11 mobile readability */
.stat-bonus{display:block;margin-top:4px;color:#8ea8b8;font-size:10px;line-height:1.35;}
.active-bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.active-bonus-grid>div{padding:11px;border:1px solid #1b425c;background:#071522;border-radius:10px;}
.active-bonus-grid b,.active-bonus-grid span{display:block;}
.active-bonus-grid span{margin-top:5px;color:#7e99aa;font-size:10px;line-height:1.4;}
@media(max-width:700px){
  .class-grid{grid-template-columns:1fr;gap:12px;padding:0 2px;}
  .class-card{width:100%;min-width:0;}
  .class-card img{aspect-ratio:1.9;max-height:190px;object-fit:cover;}
  .class-card-body{padding:14px 15px 16px;}
  .class-card-body h2{font-size:22px;margin:5px 0 6px;}
  .class-card-body p{font-size:13px;line-height:1.5;min-height:0;margin:8px 0 10px;}
  .class-bonus-list{display:flex;flex-wrap:wrap;gap:6px;}
  .class-bonus-list .badge{font-size:10px;}
  .selection-head{padding:12px 8px 8px;}
  .selection-head h1{font-size:34px;line-height:1.05;}
  .selection-head p{font-size:14px;line-height:1.45;}
  .rpg-identity{padding:16px;}
  .rpg-identity h2{font-size:28px;}
  .rpg-stat-card{padding:12px;}
  .rpg-stat-top{gap:9px;}
  .rpg-stat-icon{width:42px;height:42px;font-size:20px;flex:0 0 42px;}
  .stat-values{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:4px;}
  .stat-values b{font-size:13px;}
  .upgrade-row{flex-wrap:wrap;}
  .upgrade-row .btn{min-width:94px;}
  .active-bonus-grid{grid-template-columns:1fr 1fr;gap:8px;}
}
@media(max-width:380px){.active-bonus-grid{grid-template-columns:1fr;}.rpg-stat-grid{gap:9px;}}
@media(min-width:701px){.class-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ===== legacy-07 ===== */
/* V14: mission panel fills the available content width on mobile */
.missions-panel{width:100%;max-width:100%;min-width:0;}
.missions-panel .missions-list{width:100%;min-width:0;}
.missions-panel .missions-list .row{width:100%;min-width:0;}
@media(max-width:900px){
  .missions-panel{width:100%;margin-left:0;margin-right:0;}
  .missions-panel .missions-list .row{box-sizing:border-box;}
}

/* ===== legacy-08 ===== */
/* V15: mission reward buttons stay inside each quest card on mobile */
.mission-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;box-sizing:border-box;}
.mission-main{min-width:0;overflow:hidden;}
.mission-progress{width:100% !important;max-width:100%;margin-top:6px;}
.mission-claim{max-width:100%;min-width:92px;white-space:nowrap;box-sizing:border-box;}
@media(max-width:700px){
  .mission-row{grid-template-columns:minmax(0,1fr);gap:9px;padding:12px;}
  .mission-claim{justify-self:end;min-width:112px;max-width:100%;}
}
@media(max-width:380px){
  .mission-row{padding:10px;gap:8px;}
  .mission-claim{justify-self:stretch;width:100%;min-width:0;}
}

/* ===== legacy-09 ===== */
/* V17 mobile/home polish */
.attack-row{bottom:52px;padding:0 8px;box-sizing:border-box;}
.attack{display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:92%;min-width:180px;box-sizing:border-box;padding:9px 20px;font-size:clamp(14px,3.8vw,17px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:700px){
  .enemy-visual{min-height:250px;padding:6px 0;}
  .enemy-visual img{width:min(310px,84vw);height:min(310px,84vw);}
  .attack-row{bottom:50px;padding:0 6px;}
  .attack{max-width:90%;min-width:165px;padding:9px 16px;font-size:clamp(13px,3.9vw,17px);border-radius:22px;}
  nav{scroll-behavior:smooth;position:fixed;}
  }

/* ===== legacy-10 ===== */
/* V18 Home boss layout */
.home-stage-title{display:inline-block;white-space:nowrap;}
.home-title-wrap{display:inline-flex;align-items:center;vertical-align:middle;gap:12px}.home-boss-name{display:inline-block;margin-left:0;font:700 clamp(15px,2.2vw,21px) Cinzel;color:#d8bc70;vertical-align:middle;white-space:nowrap;max-width:42vw;overflow:hidden;text-overflow:ellipsis;}.idle-btn{
  margin-left:16px;
  margin-top:-8px;
  vertical-align:middle;
  width:66px;
  height:58px;
  padding:5px 7px 4px;
  border:1px solid #6f5a34;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 30%,rgba(65,82,128,.38),transparent 47%),
    linear-gradient(180deg,#141d29 0%,#09111a 100%);
  color:#a58c58;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 12px rgba(0,0,0,.28);
  cursor:pointer;
  overflow:visible;
}
.idle-btn .im-glyph{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  position:relative;
}
.idle-btn .im-glyph svg{
  width:28px;
  height:28px;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0 4px rgba(211,178,100,.18));
}
.idle-btn .im-glyph .moon{
  fill:#d7b66b;
  stroke:#f0d995;
  stroke-width:.8;
}
.idle-btn .im-glyph .star{fill:#f1dfaa;}
.idle-btn .im-glyph .ring{
  fill:none;
  stroke:rgba(215,182,107,.55);
  stroke-width:1;
  stroke-dasharray:2.2 2.8;
}
.idle-btn .im-time{
  display:block;
  margin:0;
  font:800 8px/1 Inter,sans-serif;
  letter-spacing:.01em;
  color:#9aa7b0;
  white-space:nowrap;
}
.idle-btn.unlocked{
  border-color:#b18c4b;
  background:
    radial-gradient(circle at 50% 28%,rgba(86,83,145,.42),transparent 48%),
    linear-gradient(180deg,#172334 0%,#0a131f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 12px rgba(226,188,98,.12),0 4px 12px rgba(0,0,0,.3);
}
.idle-btn.unlocked .im-time{color:#d7c48b;}
.idle-btn.unlocked .im-glyph{animation:idleMandraGlyphPulse 3.2s ease-in-out infinite;}
.idle-btn.locked{filter:saturate(.55);opacity:.82;}
.idle-btn.locked .im-glyph::after{
  content:"🔒";
  position:absolute;
  right:-7px;
  bottom:-4px;
  font-size:10px;
  filter:none;
}
.idle-btn:hover{filter:brightness(1.12);transform:translateY(-1px);}
@keyframes idleMandraGlyphPulse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.12);transform:scale(1.035)}
}
@media(max-width:560px){
  .idle-btn{width:60px;height:54px;margin-left:10px;margin-top:-6px;padding:4px 6px 3px;border-radius:15px}
  .idle-btn .im-glyph,.idle-btn .im-glyph svg{width:25px;height:25px}
  .idle-btn .im-time{font-size:7px}
}
.home-boss-scene{height:auto;aspect-ratio:16/9;min-height:0;background:#02080d;overflow:hidden;}
.home-boss-scene>img{width:100%;height:100%;object-fit:cover;display:block;}
.home-boss-scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.02) 42%,rgba(0,0,0,.62) 100%);}
.home-boss-scene .attack-row{bottom:12px;z-index:8;}
.home-boss-scene .attack{width:82%;max-width:82%;min-width:0;padding:8px 20px;font-size:clamp(13px,2vw,17px);}
.home-boss-hp{position:relative;left:auto;right:auto;bottom:auto;padding:12px 10%;text-align:center;background:#06121d;border-top:1px solid #17384f;}
.home-boss-hp .hp-text{font-size:clamp(11px,1.8vw,14px);color:#dce8ee;text-shadow:none;}
.home-boss-hp .hpbar{height:12px;}
.resources .res strong{font-size:clamp(12px,1.7vw,15px);}
@media(max-width:700px){
  .home-boss-name{font-size:14px;margin-left:7px;max-width:45vw;}
  .home-boss-scene{aspect-ratio:16/10;}
  .home-boss-scene .attack{width:84%;max-width:84%;padding:8px 14px;font-size:13px;border-radius:20px;}
  .home-boss-hp{padding:10px 6%;}
}
@media(max-width:420px){
  .home-boss-name{max-width:43vw;font-size:13px;}
  .home-boss-scene .attack{width:88%;max-width:88%;padding:7px 12px;font-size:12px;}
}

/* ===== legacy-11 ===== */
/* V19 — Home title: chapter compact, boss name larger but always on one line */
.home-title-wrap{
  display:flex;
  align-items:baseline;
  gap:10px;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.home-title-wrap .home-stage-title{
  flex:0 0 auto;
  font-size:clamp(11px,1.45vw,15px);
  line-height:1;
  white-space:nowrap;
}
.home-title-wrap .home-boss-name{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  margin-left:0;
  font-size:clamp(16px,2.1vw,21px);
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:700px){
  .home-title-wrap{gap:7px;}
  .home-title-wrap .home-stage-title{font-size:11px;}
  .home-title-wrap .home-boss-name{font-size:17px;}
}
@media(max-width:420px){
  .home-title-wrap{gap:6px;}
  .home-title-wrap .home-stage-title{font-size:10px;}
  .home-title-wrap .home-boss-name{font-size:16px;}
}

/* ===== legacy-12 ===== */
/* V20 — Header/resources + mobile navigation polish */
.res{min-width:82px;padding:6px 7px;text-align:center;}
.res-label{display:flex;align-items:center;justify-content:center;gap:3px;color:#7895a6;font-size:8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;}
.res-icon{font-size:11px;line-height:1;}
.res strong{font-size:clamp(11px,1.45vw,14px);margin-top:2px;line-height:1.05;}
.home-boss-scene .attack{width:76%;max-width:76%;padding:10px 20px;}
@media(max-width:700px){
  .top{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:0 8px;}
  .player{display:flex;gap:7px;min-width:0;}
  .avatar{width:36px;height:36px;border-width:2px;}
  .player-name{font-size:11px;max-width:30vw;}
  .player-level{font-size:9px;}
  .resources{grid-column:2;gap:4px;justify-content:flex-end;width:auto;}
  .res{min-width:62px;max-width:74px;padding:5px 5px;border-radius:7px;}
  .res-label{font-size:7px;letter-spacing:.2px;gap:2px;}
  .res-icon{font-size:10px;}
  .res strong{font-size:11px;}
  .home-boss-scene .attack{width:80%;max-width:80%;padding:10px 14px;font-size:13px;}
}
@media(max-width:420px){
  .top{gap:4px;padding:0 5px;}
  .avatar{width:32px;height:32px;}
  .player{gap:5px;}
  .player-name{font-size:10px;max-width:27vw;}
  .player-level{font-size:8px;}
  .resources{gap:3px;}
  .res{min-width:56px;padding:4px 3px;}
  .res-label{font-size:6.5px;}
  .res-icon{font-size:9px;}
  .res strong{font-size:10px;}
  .home-boss-scene .attack{width:78%;max-width:78%;padding:10px 11px;font-size:12px;}
}

/* ===== legacy-13 ===== */
/* Dungeon — menu modalità */
.dungeon-menu-wrap{display:grid;gap:12px;}
.dungeon-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.dungeon-tab{border:1px solid #23465f;background:linear-gradient(145deg,#091a29,#071522);color:#9bb1be;border-radius:10px;padding:13px 12px;font:800 14px Cinzel;letter-spacing:.4px;transition:.16s ease;}
.dungeon-tab:hover{border-color:#426c86;color:#dceaf2;transform:translateY(-1px);}
.dungeon-tab.active{border-color:#b18c4b;background:linear-gradient(145deg,#2b2111,#17140d);color:#f0d27a;box-shadow:0 0 0 1px rgba(226,188,98,.14),0 8px 20px rgba(0,0,0,.25);}
.dungeon-panel{text-align:center;padding:28px 18px;min-height:220px;}
@media(max-width:560px){.dungeon-tabs{gap:7px}.dungeon-tab{padding:11px 8px;font-size:12px}.dungeon-panel{padding:24px 14px;}}

/* ===== legacy-14 ===== */
/* V21 — player header + 4 adventure difficulties */
.player-meta{min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.player-name{max-width:100%;}
.difficulty-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.difficulty-current{font:800 18px Cinzel;color:#f0d27a}
.difficulty-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.difficulty-tab{border:1px solid #23465f;background:#071522;color:#9bb1be;border-radius:9px;padding:10px 8px;text-align:center}
.difficulty-tab b,.difficulty-tab span{display:block}.difficulty-tab span{font-size:9px;color:#67859a;margin-top:3px}.difficulty-tab.active{border-color:#b18c4b;background:linear-gradient(145deg,#2b2111,#17140d);color:#f0d27a}.difficulty-tab.locked{opacity:.4}
@media(max-width:900px){.top{grid-template-columns:minmax(0,1fr) auto;padding:0 10px;gap:8px}.player{display:flex;min-width:0}.avatar-vip{width:64px;height:64px}.avatar{width:52px;height:52px}.player-name{font-size:14px}.player-title{max-width:150px}.resources{grid-column:2;justify-content:flex-end;width:auto}.difficulty-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}}
@media(max-width:560px){.topbar{height:76px}.top{grid-template-columns:minmax(0,1fr) auto}.player{gap:7px}.avatar-vip{width:61px;height:61px}.avatar{width:48px;height:48px}.player-name{font-size:13px}.player-title{font-size:9px;max-width:125px}.player-level{font-size:10px}.res{min-width:58px;padding:5px 4px}.res-label{font-size:7px;gap:2px}.res-icon{font-size:10px}.res strong{font-size:10px}.difficulty-head{align-items:flex-start}.difficulty-current{font-size:15px}.difficulty-tab{padding:8px 4px;font-size:10px}.difficulty-tab span{font-size:8px}}

/* ===== legacy-15 ===== */
/* V22 — trailer introduttivo al primo avvio */
body.trailer-active{overflow:hidden!important}
.intro-trailer{position:fixed;inset:0;z-index:100000;background:#010305;overflow:hidden;opacity:1;transition:opacity .65s ease;font-family:Cinzel,serif}
.intro-trailer.ending{opacity:0;pointer-events:none}
.intro-scene{position:absolute;inset:0;opacity:0;transition:opacity 1.05s ease;pointer-events:none;overflow:hidden;background:#02060a}
.intro-scene.active{opacity:1}
.intro-bg{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:blur(20px) brightness(.34) saturate(.9);transform:scale(1.1)}
.intro-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.03) 42%,rgba(0,0,0,.52) 100%);z-index:2;pointer-events:none}
.intro-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1;transform:scale(1.01);transition:transform 9s linear;filter:saturate(.98) contrast(1.02)}
.intro-scene.active .intro-art{transform:scale(1.055)}
.intro-scene.landscape .intro-art{object-fit:cover}
.intro-copy{position:absolute;left:50%;bottom:clamp(62px,9vh,118px);z-index:4;width:min(1120px,88vw);transform:translate(-50%,14px);margin:0;text-align:center;color:rgba(249,236,198,.93);font:800 clamp(23px,2.8vw,43px)/1.28 Cinzel,serif;letter-spacing:.015em;text-shadow:0 3px 8px rgba(0,0,0,.98),0 0 22px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.14);opacity:0;transition:opacity .55s ease,transform .65s ease}
.intro-copy.show{opacity:1;transform:translate(-50%,0)}
.intro-skip{position:absolute;top:22px;right:24px;z-index:8;border:1px solid rgba(239,214,140,.5);background:rgba(3,9,14,.48);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#f0d58c;border-radius:999px;padding:10px 16px;font:800 11px Cinzel,serif;letter-spacing:1.2px;box-shadow:0 7px 24px rgba(0,0,0,.3);transition:.18s}
.intro-skip:hover{background:rgba(20,31,40,.72);border-color:#e2bc62;transform:translateY(-1px)}
.intro-progress{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:9;background:rgba(255,255,255,.12)}
.intro-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7e5e2a,#e5c56e,#f6e6ab);box-shadow:0 0 12px rgba(226,188,98,.45)}
.intro-timeline{position:absolute;left:50%;bottom:18px;z-index:8;transform:translateX(-50%);display:flex;gap:8px;pointer-events:none}
.intro-timeline span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);box-shadow:0 1px 4px #000;transition:.25s}
.intro-timeline span.active{background:#efd58b;box-shadow:0 0 9px rgba(239,213,139,.55)}
@media(max-width:700px){
  .intro-skip{top:14px;right:14px;padding:9px 13px;font-size:10px}
  .intro-copy{width:88vw;bottom:clamp(56px,8vh,86px);font-size:clamp(18px,5.3vw,29px);line-height:1.32;text-shadow:0 3px 7px #000,0 0 18px #000}
  .intro-scene.landscape .intro-art{object-fit:cover;object-position:center}
  .intro-timeline{bottom:15px}
}
@media(prefers-reduced-motion:reduce){
  .intro-scene,.intro-copy,.intro-trailer,.intro-art{transition:none!important}
}

/* ===== legacy-16 ===== */
/* V25 — Città: immagine senza riquadro, a tutta area, proporzioni preservate */
.city-page{
  min-height:calc(100vh - 110px);
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.city-frame{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  width:100%;
  aspect-ratio:1089/1445;
  min-height:0;
  isolation:isolate;
}
.city-frame:before{display:none;}
.city-frame:after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 8% 61%,rgba(255,191,91,.30) 0 1.2%,transparent 5%),radial-gradient(circle at 19% 65%,rgba(255,203,112,.34) 0 1.1%,transparent 4.5%),radial-gradient(circle at 30% 57%,rgba(255,214,126,.30) 0 1.1%,transparent 4%),radial-gradient(circle at 41% 66%,rgba(255,193,82,.34) 0 1.2%,transparent 4.5%),radial-gradient(circle at 51% 58%,rgba(255,207,104,.38) 0 1.3%,transparent 5%),radial-gradient(circle at 61% 67%,rgba(255,190,75,.32) 0 1.2%,transparent 4.5%),radial-gradient(circle at 72% 59%,rgba(255,211,119,.34) 0 1.1%,transparent 4.5%),radial-gradient(circle at 84% 63%,rgba(255,193,81,.34) 0 1.2%,transparent 5%),radial-gradient(circle at 94% 58%,rgba(255,214,126,.28) 0 1.1%,transparent 4%),radial-gradient(circle at 26% 48%,rgba(255,205,104,.22) 0 1%,transparent 4%),radial-gradient(circle at 68% 46%,rgba(255,205,104,.24) 0 1%,transparent 4%),linear-gradient(180deg,rgba(20,37,68,.18),rgba(255,173,70,.06) 62%,rgba(0,0,0,.08));z-index:2;mix-blend-mode:screen;pointer-events:none;animation:none;}
.city-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;filter:saturate(.92) brightness(.92) contrast(1.04) sepia(.03) hue-rotate(3deg);transform:none;animation:none;}
.city-title{position:absolute;z-index:5;top:16px;left:16px;right:16px;text-align:center;pointer-events:none;}
.city-title p{margin:0;color:#f0d27a;font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;text-shadow:0 2px 8px #000;} 
.city-hotspot{position:absolute;z-index:7;transform:translate(-50%,-50%);min-width:116px;min-height:40px;box-sizing:border-box;border:1px solid rgba(239,210,126,.72);background:linear-gradient(145deg,rgba(12,28,39,.94),rgba(5,13,20,.92));color:#f2d58e;border-radius:999px;padding:9px 15px;font:800 11px Cinzel;letter-spacing:.3px;white-space:nowrap;box-shadow:0 0 0 2px rgba(226,188,98,.08),0 0 15px rgba(226,188,98,.26),0 6px 18px rgba(0,0,0,.48);backdrop-filter:blur(3px);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;}
.city-hotspot:before{content:"";position:absolute;inset:-6px;border:1px solid rgba(255,218,125,.18);border-radius:inherit;animation:cityPulse 2.4s ease-in-out infinite;}
.city-hotspot:hover,.city-hotspot:active{transform:translate(-50%,-50%) scale(1.06);filter:brightness(1.15);box-shadow:0 0 0 2px rgba(226,188,98,.14),0 0 25px rgba(226,188,98,.45),0 8px 22px rgba(0,0,0,.55);}
/* Dimensione dei tasti invariata: cambiano solo le coordinate */
.city-hotspot.hero{left:50%;top:20.5%;}.city-hotspot.frames{left:50%;top:35.5%;}.city-hotspot.shop{left:17%;top:47.5%;}.city-hotspot.clan{left:83%;top:47.5%;}.city-hotspot.bestiary{left:50%;top:57.5%;}.city-hotspot.missions{left:27%;top:69.5%;}.city-hotspot.ranking{left:73%;top:69.5%;}.city-hotspot.profile{left:50%;top:85.5%;}
.city-legend{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;padding:2px 4px 0;color:#7894a6;font-size:10px;text-align:center;} .city-legend b{color:#d8bc70;}
@keyframes cityPulse{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.75;transform:scale(1.04)}}
@keyframes cityGlow{0%{transform:translate(3%,-1%);opacity:.6}100%{transform:translate(-3%,2%);opacity:1}}
@keyframes cityDrift{0%{transform:scale(1.025) translate3d(0,0,0)}100%{transform:scale(1.055) translate3d(-.8%,-.4%,0)}}
.dungeon-empty{min-height:calc(100vh - 180px);display:grid;place-items:center;text-align:center;}
.dungeon-empty .card{max-width:620px;padding:38px 24px;} .dungeon-empty .dungeon-icon{font-size:52px;filter:drop-shadow(0 0 16px rgba(226,188,98,.25));}
@media(max-width:900px){.city-page{min-height:calc(100vh - 165px);}.city-frame{border-radius:0;}.city-title{top:13px;}.city-title p{font-size:9px;letter-spacing:1.2px;}.city-hotspot{font-size:9px;min-width:104px;min-height:38px;padding:8px 10px;}}
@media(max-width:560px){.city-frame{border-radius:0;}.city-hotspot{font-size:8px;min-width:94px;min-height:35px;padding:7px 8px;}.city-title p{font-size:8px;letter-spacing:1px;}}

/* ===== legacy-17 ===== */
/* V26 — Città mobile: immagine a pieno schermo tra HUD superiore e barra di navigazione */
@media(max-width:900px){
  main:has(.city-page){
    padding:0!important;
    max-width:none;
  }
  .city-page{
    width:100%;
    height:calc(100vh - 146px);
    height:calc(100dvh - 146px);
    min-height:0!important;
    margin:0;
    gap:0;
  }
  .city-frame{
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
  }
  .city-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
}

/* ===== legacy-18 ===== */
/* V27 — Città: nuovo sfondo pulito + destinazioni ordinate */
.city-page{width:100%;height:calc(100vh - 76px);min-height:0;margin:0;display:block;}
.city-frame{position:relative;width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden;border:0;border-radius:0;background:#06121d;isolation:isolate;}
.city-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
.city-frame:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,0) 30%,rgba(0,0,0,.08) 100%);}
.city-title{top:18px;left:12px;right:12px;z-index:5;}
.city-title p{font-size:clamp(9px,1.6vw,13px);letter-spacing:1.4px;}
.city-hotspot{z-index:7;min-width:132px;min-height:42px;padding:9px 16px;font-size:11px;}
/* 1 — 2 — 2 — 1: leggibile e senza sovrapposizioni */
.city-hotspot.hero{left:50%;top:27%;}
.city-hotspot.frames{left:30%;top:43%;}
.city-hotspot.clan{left:70%;top:43%;}
.city-hotspot.shop{left:30%;top:59%;}
.city-hotspot.bestiary{left:70%;top:59%;}
.city-hotspot.missions{left:50%;top:75%;}
@media(max-width:900px){
  .city-page{height:calc(100dvh - 146px);height:calc(100vh - 146px);}
  .city-title{top:12px;}
  .city-title p{font-size:8px;letter-spacing:1px;}
  .city-hotspot{min-width:112px;min-height:38px;padding:8px 11px;font-size:9px;}
}
@media(max-width:560px){
  .city-hotspot{min-width:100px;min-height:36px;padding:7px 9px;font-size:8px;}
  .city-hotspot.hero{top:28%;}
  .city-hotspot.frames,.city-hotspot.clan{top:44%;}
  .city-hotspot.shop,.city-hotspot.bestiary{top:60%;}
  .city-hotspot.missions{top:76%;}
}

/* ===== legacy-19 ===== */
.vip-header-btn{border:1px solid #6e5318;background:linear-gradient(180deg,#3a2b08,#1f1705);color:#f5d36f;border-radius:6px;padding:2px 7px;font-size:10px;font-weight:900;cursor:pointer;}
.vip-header-btn:hover{filter:brightness(1.2);}
/* ===== legacy-20 ===== */
/* V28 — Città: Lista Amici + Opzioni */
.city-hotspot.friends{left:27%;top:84%;}
.city-hotspot.options{left:73%;top:84%;}
@media(max-width:900px){
  .city-hotspot.friends{left:27%;top:84%;}
  .city-hotspot.options{left:73%;top:84%;}
}
@media(max-width:560px){
  .city-hotspot.friends,.city-hotspot.options{top:84%;}
}
.friend-list{display:grid;gap:10px}
.friend-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #183a50;background:#071522;border-radius:9px}
.friend-info{display:flex;align-items:center;gap:10px;min-width:0}
.friend-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;border:1px solid #315774;background:#0b1824;flex:0 0 42px}
.friend-avatar img{width:100%;height:100%;object-fit:cover}
.friend-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.friend-presence{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:10px;font-weight:900;letter-spacing:.35px;text-transform:uppercase}
.friend-presence:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
.friend-presence.online{color:#46d978}
.friend-presence.offline{color:#ed5c5c}
.private-chat{height:330px;overflow:auto;padding:12px;background:#06121d;border:1px solid #17384d;border-radius:9px}
.private-chat-empty{text-align:center;padding:70px 20px;color:#6e8ca0}
.private-msg{margin-bottom:10px;display:flex}
.private-msg.me{justify-content:flex-end}
.private-msg .bubble{max-width:78%;padding:9px 11px;border-radius:12px;background:#0d2a3e;border:1px solid #23465f;color:#dcebf3;font-size:12px}
.private-msg.me .bubble{background:#3b2d18;border-color:#8b6d39;color:#f5dfaa}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.option-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid #183a50;background:#071522;border-radius:9px}
.option-row small{display:block;color:#6e8ca0;margin-top:3px;line-height:1.35}
.switch{position:relative;width:46px;height:25px;border:1px solid #315774;border-radius:999px;background:#081a29;flex:0 0 46px;cursor:pointer}
.switch i{position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#7894a6;transition:.18s}
.switch.on{background:#4b391e;border-color:#b18c4b}
.switch.on i{left:24px;background:#f0d27a}
@media(max-width:700px){.option-grid{grid-template-columns:1fr}.friend-card{align-items:flex-start;flex-direction:column}.friend-actions{width:100%;justify-content:flex-start}}

/* ===== legacy-21 ===== */
.city-hotspot.ranking{left:73%;top:75%;}
@media(max-width:560px){.city-hotspot.ranking{left:73%;top:76%;}}

/* ===== legacy-22 ===== */
/* V30 — Riduci animazioni: disattiva solo il movimento/vibrazione del mostro, mantenendo i numeri del danno */
.reduced-motion .hit-flash,
.reduced-motion .crit-flash,
.reduced-motion .auto-crit-flash{animation:none!important;}

/* ===== legacy-23 ===== */
/* V29 — Città: disposizione ordinata di tutti i 10 tasti, senza sovrapposizioni */
.city-hotspot.hero{left:50%;top:20%;}
.city-hotspot.frames{left:27%;top:35%;}
.city-hotspot.clan{left:73%;top:35%;}
.city-hotspot.shop{left:27%;top:50%;}
.city-hotspot.bestiary{left:73%;top:50%;}
.city-hotspot.missions{left:27%;top:65%;}
.city-hotspot.ranking{left:73%;top:65%;}
.city-hotspot.friends{left:20%;top:82%;}
.city-hotspot.profile{left:50%;top:82%;}
.city-hotspot.options{left:80%;top:82%;}

@media(max-width:900px){
  .city-hotspot.hero{left:50%;top:20%;}
  .city-hotspot.frames{left:27%;top:35%;}
  .city-hotspot.clan{left:73%;top:35%;}
  .city-hotspot.shop{left:27%;top:50%;}
  .city-hotspot.bestiary{left:73%;top:50%;}
  .city-hotspot.missions{left:27%;top:65%;}
  .city-hotspot.ranking{left:73%;top:65%;}
  .city-hotspot.friends{left:20%;top:82%;}
  .city-hotspot.profile{left:50%;top:82%;}
  .city-hotspot.options{left:80%;top:82%;}
}

@media(max-width:560px){
  .city-hotspot.hero{top:20%;}
  .city-hotspot.frames,.city-hotspot.clan{top:35%;}
  .city-hotspot.shop,.city-hotspot.bestiary{top:50%;}
  .city-hotspot.missions,.city-hotspot.ranking{top:65%;}
  .city-hotspot.friends,.city-hotspot.profile,.city-hotspot.options{top:82%;}
  .city-hotspot.friends{left:20%;}
  .city-hotspot.profile{left:50%;}
  .city-hotspot.options{left:80%;}
}

/* ===== legacy-24 ===== */
/* V36 — Cittadella radiale. Modifica esclusivamente i pulsanti sopra la città: immagine e dimensioni del frame restano quelle della versione stabile. */
.city-radial-mode .city-radial-layer{position:absolute;inset:0;z-index:20;pointer-events:none;}
.city-radial-group{position:absolute;transform:translate(-50%,-50%);z-index:21;pointer-events:auto;}
.city-radial-group.personaggio{left:50%;top:29%;}.city-radial-group.gilda{left:50%;top:55%;}.city-radial-group.mercato{left:25%;top:55%;}.city-radial-group.avventura{left:75%;top:55%;}.city-radial-group.arena{left:36%;top:80%;}.city-radial-group.regno{left:64%;top:80%;}
.city-main-destination{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:154px;height:56px;padding:8px 13px;border:1px solid rgba(239,210,126,.82);border-radius:8px;background:linear-gradient(180deg,rgba(16,35,49,.97),rgba(5,14,22,.98));color:#f2d58e;font:800 12px Cinzel;letter-spacing:1px;text-shadow:0 2px 5px #000;cursor:pointer;box-shadow:0 0 0 2px rgba(226,188,98,.08),0 6px 18px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.07);transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease;}
.city-main-destination:hover,.city-radial-group.open .city-main-destination{transform:translateY(-2px);filter:brightness(1.12);border-color:#f0d27a;box-shadow:0 0 0 2px rgba(226,188,98,.13),0 8px 22px rgba(0,0,0,.58),0 0 18px rgba(226,188,98,.18);}
.city-main-icon{font-size:18px;line-height:1;}.city-main-destination i{font-style:normal;font-size:14px;color:#7894a6;transition:transform .18s ease,color .18s ease;}.city-radial-group.open .city-main-destination i{transform:rotate(180deg);color:#f0d27a;}
.city-submenu{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;}.city-sub-destination{position:absolute;left:0;top:0;width:154px;min-height:50px;padding:8px 10px;border:1px solid #35556a;border-radius:7px;background:linear-gradient(145deg,rgba(10,29,44,.99),rgba(4,14,23,.99));color:#dce8ee;text-align:left;cursor:pointer;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.72);transition:transform .22s ease,opacity .16s ease,visibility .16s ease,border-color .16s ease,box-shadow .16s ease;transition-delay:calc(var(--sub-index) * 28ms);box-shadow:0 6px 16px rgba(0,0,0,.48);}.city-sub-destination b{display:block;font:800 11px Cinzel;color:#efd58e;white-space:nowrap;}.city-sub-destination small{display:block;margin-top:3px;font-size:9px;color:#7f99a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.city-sub-destination:hover{border-color:#e0bd63;box-shadow:0 8px 20px rgba(0,0,0,.58),0 0 14px rgba(225,190,94,.14);}.city-radial-group.open .city-submenu{pointer-events:auto;}.city-radial-group.open .city-sub-destination{opacity:1;visibility:visible;transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(1);}
.personaggio .city-sub-destination:nth-child(1){--tx:0;--ty:-82px}.personaggio .city-sub-destination:nth-child(2){--tx:-102px;--ty:-12px}.personaggio .city-sub-destination:nth-child(3){--tx:102px;--ty:-12px}.personaggio .city-sub-destination:nth-child(4){--tx:0;--ty:70px}.gilda .city-sub-destination:nth-child(1),.mercato .city-sub-destination:nth-child(1),.avventura .city-sub-destination:nth-child(1),.arena .city-sub-destination:nth-child(1),.regno .city-sub-destination:nth-child(1){--tx:0;--ty:-78px}.gilda .city-sub-destination:nth-child(2),.mercato .city-sub-destination:nth-child(2){--tx:0;--ty:68px}
@media(max-width:900px){.city-main-destination{min-width:138px;height:52px;font-size:10px}.city-sub-destination{width:138px;min-height:46px}.city-sub-destination b{font-size:10px}.city-sub-destination small{font-size:8px}.personaggio .city-sub-destination:nth-child(2){--tx:-88px}.personaggio .city-sub-destination:nth-child(3){--tx:88px}}
@media(max-width:560px){.city-main-destination{min-width:116px;height:46px;padding:6px 8px;font-size:8px;gap:5px}.city-main-icon{font-size:15px}.city-main-destination i{font-size:11px}.city-sub-destination{width:118px;min-height:42px;padding:6px 8px}.city-sub-destination b{font-size:8px}.city-sub-destination small{font-size:7px}.personaggio .city-sub-destination:nth-child(1){--ty:-68px}.personaggio .city-sub-destination:nth-child(2){--tx:-78px;--ty:-8px}.personaggio .city-sub-destination:nth-child(3){--tx:78px;--ty:-8px}.personaggio .city-sub-destination:nth-child(4){--ty:60px}.gilda .city-sub-destination:nth-child(1),.mercato .city-sub-destination:nth-child(1),.avventura .city-sub-destination:nth-child(1),.arena .city-sub-destination:nth-child(1),.regno .city-sub-destination:nth-child(1){--ty:-66px}.gilda .city-sub-destination:nth-child(2),.mercato .city-sub-destination:nth-child(2){--ty:58px}}

/* ===== legacy-25 ===== */
/* V38 — Cittadella: Personaggio centrato, Gilda tra Mercato e Avventura, ventaglio rientrato */
.city-radial-mode .city-main-destination{
  width:72px!important;height:72px!important;min-width:72px!important;padding:0!important;
  border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;
  position:relative!important;gap:0!important;font-size:0!important;letter-spacing:0!important;
  background:radial-gradient(circle at 35% 28%,rgba(42,66,81,.98),rgba(7,17,26,.99) 68%);
  border:2px solid rgba(224,188,99,.78)!important;
  box-shadow:0 0 0 4px rgba(226,188,98,.08),0 7px 20px rgba(0,0,0,.62),inset 0 2px 5px rgba(255,255,255,.08)!important;
}
.city-radial-mode .city-main-icon{font-size:30px!important;line-height:1!important;text-shadow:0 2px 7px #000;}
.city-radial-mode .city-main-destination span:not(.city-main-icon){display:none!important;}
.city-radial-mode .city-main-destination i{position:absolute;right:3px;bottom:4px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#07131d;border:1px solid #8c7138;font-size:11px!important;color:#e8cd83!important;transform:none!important;}
.city-radial-mode .city-radial-group.open .city-main-destination i{transform:rotate(180deg)!important;}
.city-radial-mode .city-main-destination:hover,.city-radial-mode .city-radial-group.open .city-main-destination{
  transform:translateY(-2px)!important;filter:brightness(1.16);border-color:#f5d889!important;
  box-shadow:0 0 0 5px rgba(226,188,98,.12),0 9px 24px rgba(0,0,0,.68),0 0 22px rgba(226,188,98,.22)!important;
}
.city-radial-mode .city-sub-destination{
  width:158px!important;min-height:54px!important;padding:9px 12px!important;border-radius:10px!important;
  background:linear-gradient(145deg,rgba(12,31,46,.99),rgba(4,14,23,.99))!important;
  border:1px solid #466276!important;box-shadow:0 8px 20px rgba(0,0,0,.6)!important;
}
.city-radial-mode .city-sub-destination b{font-size:12px!important;line-height:1.15!important;}
.city-radial-mode .city-sub-destination small{font-size:9px!important;position:relative!important;z-index:2!important;margin-bottom:6px!important;}
@media(max-width:900px){
  .city-radial-mode .city-main-destination{width:66px!important;height:66px!important;min-width:66px!important;}
  .city-radial-mode .city-main-icon{font-size:27px!important;}
  .city-radial-mode .city-sub-destination{width:148px!important;min-height:50px!important;}
}
@media(max-width:560px){
  .city-radial-mode .city-main-destination{width:58px!important;height:58px!important;min-width:58px!important;}
  .city-radial-mode .city-main-icon{font-size:23px!important;}
  .city-radial-mode .city-main-destination i{right:1px;bottom:2px;width:14px;height:14px;font-size:9px!important;}
  .city-radial-mode .city-sub-destination{width:128px!important;min-height:46px!important;padding:7px 9px!important;}
  .city-radial-mode .city-sub-destination b{font-size:10px!important;}
  .city-radial-mode .city-sub-destination small{font-size:8px!important;}
}

/* ===== legacy-26 ===== */
/* V39 — Iconografia fantasy per la cittadella: mercato in moneta + sottomenu con icone */
.city-radial-mode .city-main-icon{font-family:Georgia,"Times New Roman",serif!important;font-weight:900!important;}
.city-radial-mode .mercato .city-main-icon{font-size:31px!important;text-shadow:0 1px 0 #6e511a,0 2px 7px #000!important;}
.city-radial-mode .city-sub-destination{display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;}
.city-radial-mode .city-sub-icon{width:30px!important;height:30px!important;flex:0 0 30px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;border:1px solid rgba(214,178,89,.58)!important;background:radial-gradient(circle at 35% 30%,rgba(62,77,83,.95),rgba(7,17,26,.98) 72%)!important;color:#f0d58f!important;font-family:Georgia,"Times New Roman",serif!important;font-size:17px!important;font-weight:900!important;line-height:1!important;text-shadow:0 2px 4px #000!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.08),0 2px 7px rgba(0,0,0,.45)!important;}
.city-radial-mode .city-sub-copy{min-width:0!important;flex:1!important;}
.city-radial-mode .city-sub-destination b{font-size:12px!important;line-height:1.15!important;color:#f0d58f!important;text-shadow:0 1px 3px #000!important;}
.city-radial-mode .city-sub-destination small{font-size:9px!important;color:#849baa!important;}
.city-radial-mode .city-sub-destination:hover .city-sub-icon{border-color:#f0d27a!important;filter:brightness(1.15)!important;transform:scale(1.04)!important;}
@media(max-width:560px){.city-radial-mode .city-sub-destination{gap:8px!important}.city-radial-mode .city-sub-icon{width:26px!important;height:26px!important;flex-basis:26px!important;font-size:15px!important}.city-radial-mode .city-sub-destination b{font-size:10px!important}.city-radial-mode .city-sub-destination small{font-size:8px!important}}

/* ===== legacy-27 ===== */
/* V40 — Icone fantasy a colori: città + barra di navigazione */
.city-radial-mode .city-main-icon{font-family:inherit!important;font-size:34px!important;line-height:1!important;font-weight:400!important;text-shadow:0 2px 6px rgba(0,0,0,.65),0 0 8px rgba(255,255,255,.10)!important;filter:saturate(1.18)!important;}
.city-radial-mode .personaggio .city-main-icon{font-size:36px!important;}
.city-radial-mode .gilda .city-main-icon{font-size:35px!important;}
.city-radial-mode .mercato .city-main-icon{font-size:34px!important;}
.city-radial-mode .avventura .city-main-icon{font-size:34px!important;}
.city-radial-mode .arena .city-main-icon{font-size:34px!important;}
.city-radial-mode .regno .city-main-icon{font-size:32px!important;}
.nav-btn .nav-icon{border-color:#36566c!important;background:linear-gradient(145deg,#122b40,#071521)!important;box-shadow:inset 0 0 0 1px rgba(226,188,98,.07),0 3px 8px #0006!important;}
.nav-emoji{display:grid;place-items:center;width:100%;height:100%;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:20px;line-height:1;filter:saturate(1.2) drop-shadow(0 2px 3px rgba(0,0,0,.55));}
.nav-btn.active .nav-icon{border-color:#b68d42!important;background:linear-gradient(145deg,#24384a,#0b1b29)!important;box-shadow:inset 0 0 0 1px rgba(255,218,125,.15),0 0 12px rgba(226,188,98,.18)!important;}
.nav-btn:hover .nav-icon{border-color:#d0a957!important;}
.nav-btn .nav-icon{width:25px;height:25px;flex-basis:25px}}

/* ===== fix-clan-ranking-overflow ===== */
/* Fix Classifica Clan: evita overflow orizzontale su schermi stretti */
.card:has(.table){min-width:0;max-width:100%;overflow:hidden;}
.card:has(.table) .table{table-layout:fixed;width:100%;max-width:100%;}
.card:has(.table) .table th,.card:has(.table) .table td{min-width:0;overflow:hidden;}
.card:has(.table) .rank-player{min-width:0;width:100%;max-width:100%;}
.card:has(.table) .rank-player-info{min-width:0;overflow:hidden;}
.card:has(.table) .rank-player-info strong,.card:has(.table) .rank-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:600px){
  .card:has(.table) .table th,.card:has(.table) .table td{padding:7px 5px;font-size:11px;}
  .card:has(.table) .rank-frame{width:34px;height:34px;flex-basis:34px;}
  .card:has(.table) .rank-player{gap:6px;}
  .card:has(.table) .table th:nth-child(1),.card:has(.table) .table td:nth-child(1){width:28px;}
  .card:has(.table) .table th:nth-child(2),.card:has(.table) .table td:nth-child(2){width:auto;}
  .card:has(.table) .table th:nth-child(3),.card:has(.table) .table td:nth-child(3){width:52px;}
  .card:has(.table) .table th:nth-child(4),.card:has(.table) .table td:nth-child(4){width:70px;}
}

/* ===== legacy-29 ===== */
/* V55 — VIP 8+ attack bar effects */
.attack{position:relative;overflow:visible;isolation:isolate;transition:transform .12s ease,filter .12s ease,box-shadow .2s ease;}
.attack.vip-tap-8,.attack.vip-tap-9,.attack.vip-tap-10{border-color:transparent;}
.attack.vip-tap-8{background:linear-gradient(90deg,#153b35,#176d63,#153b35);box-shadow:0 0 10px #35e5c055,0 8px 20px #000;}
.attack.vip-tap-8::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:linear-gradient(90deg,transparent,#45ffe1,#9affef,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;background-size:220% 100%;animation:vipTapEnergy8 2s linear infinite;pointer-events:none;}
.attack.vip-tap-8::after{content:"✦ 〰 ✦";position:absolute;inset:-18px -8px;display:flex;align-items:center;justify-content:space-around;color:#62ffe7;font-size:11px;opacity:.28;filter:blur(.1px);pointer-events:none;animation:vipTapSpark8 1.7s ease-in-out infinite;}
.attack.vip-tap-9{background:linear-gradient(90deg,#30204d,#70409a,#3a2559);box-shadow:0 0 13px #c26cff66,0 0 28px #ffcc6633,0 8px 20px #000;}
.attack.vip-tap-9::before{content:"";position:absolute;inset:-3px;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0 18%,#d58cff 27%,#fff1a8 34%,transparent 45% 68%,#b96cff 77%,transparent 88%);filter:blur(1px);opacity:.9;animation:vipTapSpin9 2.3s linear infinite;pointer-events:none;z-index:-1;}
.attack.vip-tap-9::after{content:"✦ ✧ ✦ ✧ ✦";position:absolute;inset:-20px -12px;display:flex;align-items:center;justify-content:space-around;color:#ffe99a;font-size:12px;opacity:.5;text-shadow:0 0 8px #d58cff;pointer-events:none;animation:vipTapStars9 1.8s ease-in-out infinite;}
.attack.vip-tap-10{background:linear-gradient(90deg,#5a4820,#d5ad4a,#fff2a4,#b98a2e,#5a4820);color:#fff9dc;text-shadow:0 0 7px #fff,0 0 14px #ffd75a;box-shadow:0 0 15px #fff1a066,0 0 34px #ffd45a55,0 8px 20px #000;}
.attack.vip-tap-10::before{content:"";position:absolute;inset:-5px;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0 8%,#fff 12%,#ffe47a 16%,transparent 22% 36%,#fff 42%,transparent 48% 70%,#ffe47a 77%,#fff 82%,transparent 90%);filter:blur(1px);opacity:.95;animation:vipTapStorm10 1.5s linear infinite;pointer-events:none;z-index:-1;}
.attack.vip-tap-10::after{content:"✦ ⚡ ✦ ⚡ ✦";position:absolute;inset:-22px -14px;display:flex;align-items:center;justify-content:space-around;color:#fff5bf;font-size:13px;opacity:.7;text-shadow:0 0 8px #fff,0 0 16px #ffd75a;pointer-events:none;animation:vipTapStars10 1.15s ease-in-out infinite;}
.attack.tap-hit{transform:scale(1.045);filter:brightness(1.55);}
.attack.vip-tap-8.tap-hit{box-shadow:0 0 22px #4dffe8,0 0 42px #20cdb366,0 8px 20px #000;}
.attack.vip-tap-9.tap-hit{box-shadow:0 0 25px #d88cff,0 0 50px #ffd86a66,0 8px 20px #000;}
.attack.vip-tap-10.tap-hit{box-shadow:0 0 32px #fff,0 0 62px #ffd75a,0 0 90px #fff5b055,0 8px 20px #000;}
@keyframes vipTapEnergy8{0%{background-position:200% 0}100%{background-position:-20% 0}}
@keyframes vipTapSpark8{0%,100%{transform:translateY(4px);opacity:.18}50%{transform:translateY(-5px);opacity:.6}}
@keyframes vipTapSpin9{to{transform:rotate(360deg)}}
@keyframes vipTapStars9{0%,100%{transform:translateY(5px) scale(.9);opacity:.2}50%{transform:translateY(-6px) scale(1.05);opacity:.7}}
@keyframes vipTapStorm10{to{transform:rotate(360deg)}}
@keyframes vipTapStars10{0%,100%{transform:translateY(7px) scale(.88);opacity:.25}50%{transform:translateY(-8px) scale(1.12);opacity:.9}}
@media(prefers-reduced-motion:reduce){.attack.vip-tap-8::before,.attack.vip-tap-8::after,.attack.vip-tap-9::before,.attack.vip-tap-9::after,.attack.vip-tap-10::before,.attack.vip-tap-10::after{animation:none}.attack.tap-hit{transform:none}}

/* ===== legacy-30 ===== */
.friend-request-modal .clan-modal{border:1px solid rgba(255,210,90,.38);box-shadow:0 0 35px rgba(255,190,60,.16),0 20px 70px rgba(0,0,0,.55)}
.friend-request-modal #friendNameInput{background:rgba(10,12,20,.9);color:inherit;border:1px solid rgba(255,210,90,.28);border-radius:10px;padding:13px 14px;font-size:16px;outline:none}
.friend-request-modal #friendNameInput:focus{border-color:rgba(255,210,90,.7);box-shadow:0 0 0 3px rgba(255,210,90,.08)}

/* ===== legacy-31 ===== */
/* Tab amici: i due banner devono essere perfettamente identici per dimensioni */
.friends-section-buttons{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  align-items:stretch!important;
}
.friends-section-buttons .friendsTab{
  width:100%!important;
  min-width:0!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.2!important;
  font-size:16px!important;
  flex:1 1 0!important;
}

/* ===== legacy-32 ===== */
.friend-not-found-banner{position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:99999;display:flex;align-items:center;gap:12px;min-width:min(420px,calc(100vw - 28px));box-sizing:border-box;padding:14px 16px;border:1px solid #c95b3b;border-radius:14px;background:linear-gradient(145deg,#2a1110,#140b0b);box-shadow:0 12px 35px #000b,0 0 20px #c95b3b44;color:#fff;text-align:left;animation:friendNotFoundIn .22s ease-out;}
.friend-not-found-icon{font-size:28px;line-height:1;}
.friend-not-found-banner strong{display:block;font-size:17px;color:#ffb08d;margin-bottom:3px;}
.friend-not-found-banner div div{font-size:12px;color:#caa9a5;}
.friend-not-found-banner button{margin-left:auto;flex:0 0 auto;background:transparent;border:0;color:#9e7d78;font-size:18px;cursor:pointer;}
@keyframes friendNotFoundIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===== class-system-v1 ===== */
/* CLASS SYSTEM V1 — 10 classi, immagini full body, dettagli e sinergie */

.class-art-panel{position:relative;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;isolation:isolate;padding:0;background:radial-gradient(circle at 50% 34%,rgba(73,104,128,.18),rgba(5,14,22,.96) 76%)}
.class-art-panel::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.10),transparent 42%),radial-gradient(circle at 80% 80%,var(--aura-soft,rgba(255,255,255,.12)),transparent 34%);opacity:.9;pointer-events:none;animation:classBackdropDrift 10s ease-in-out infinite;z-index:0}
.class-art-image{width:100%;height:100%;display:block;object-fit:cover;object-position:center 46%;position:relative;z-index:1;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
.class-art-panel .weapon-aura,.class-art-panel .weapon-aura-alt,.class-art-panel .weapon-spark,.class-art-panel .weapon-spark-alt{position:absolute;pointer-events:none;z-index:2;mix-blend-mode:screen}
.class-art-panel .weapon-aura,.class-art-panel .weapon-aura-alt{left:var(--aura-x,50%);top:var(--aura-y,50%);width:var(--aura-size,108px);height:var(--aura-size,108px);transform:translate(-50%,-50%);border-radius:999px;background:radial-gradient(circle,var(--aura-color,rgba(255,255,255,.82)) 0%,var(--aura-soft,rgba(255,255,255,.26)) 38%,transparent 72%);filter:blur(10px);opacity:.62;animation:weaponAuraPulse 3.4s ease-in-out infinite}
.class-art-panel .weapon-aura-alt{left:var(--aura-x2,62%);top:var(--aura-y2,34%);width:calc(var(--aura-size,108px) * .72);height:calc(var(--aura-size,108px) * .72);opacity:.45;animation-delay:-1.4s;animation-duration:4.2s}
.class-art-panel .weapon-spark,.class-art-panel .weapon-spark-alt{width:22px;height:22px;left:var(--aura-x,50%);top:var(--aura-y,50%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--aura-color,rgba(255,255,255,.9)) 35%,transparent 72%);filter:blur(1px);opacity:.9;box-shadow:0 0 12px var(--aura-color,rgba(255,255,255,.7));animation:weaponSparkOrbit 2.9s linear infinite}
.class-art-panel .weapon-spark-alt{left:var(--aura-x2,62%);top:var(--aura-y2,34%);width:15px;height:15px;opacity:.8;animation-duration:3.6s;animation-delay:-1.2s}
.class-card>.class-art-panel{width:100%;aspect-ratio:1.55;flex:0 0 auto;padding:0}
.class-carousel .class-card>.class-art-panel{height:390px!important;max-height:390px!important;aspect-ratio:auto!important;padding:0}
.class-carousel .class-card>.class-art-panel .class-art-image{object-fit:cover!important;object-position:center 60%!important;background:radial-gradient(circle at 50% 38%,rgba(54,86,108,.16),rgba(4,12,19,.96) 75%)}
.rpg-portrait .class-art-panel,.character-art-wrap .class-art-panel{width:100%;height:100%;padding:0}
.rpg-portrait .class-art-panel .class-art-image,.character-art-wrap .class-art-panel .class-art-image{object-fit:cover!important;object-position:center 44%!important;background:radial-gradient(circle at 50% 38%,rgba(54,86,108,.16),rgba(4,12,19,.96) 75%)}
@keyframes weaponAuraPulse{0%,100%{opacity:.40;transform:translate(-50%,-50%) scale(.86)}50%{opacity:.84;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes weaponSparkOrbit{0%{transform:translate(-50%,-50%) translate(-7px,-2px) scale(.85)}25%{transform:translate(-50%,-50%) translate(9px,-10px) scale(1)}50%{transform:translate(-50%,-50%) translate(15px,5px) scale(.78)}75%{transform:translate(-50%,-50%) translate(-8px,12px) scale(1.02)}100%{transform:translate(-50%,-50%) translate(-7px,-2px) scale(.85)}}
@keyframes classBackdropDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-8px,0) scale(1.03)}}

.class-carousel .class-card{height:auto!important;min-height:650px!important}
.class-carousel .class-card img{height:390px!important;max-height:390px!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;background:radial-gradient(circle at 50% 40%,rgba(70,94,115,.22),rgba(5,14,22,.94) 70%)}
.class-symbol{font-size:18px;vertical-align:-2px;margin-right:4px}
.class-special-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.class-special-grid>div{padding:10px 11px;border:1px solid #23465f;border-radius:9px;background:#071522;min-width:0}
.class-special-grid b,.class-special-grid span{display:block}.class-special-grid b{color:#e4cf8c;font-size:10px;letter-spacing:.25px}.class-special-grid span{color:#8ea7b6;font-size:10px;line-height:1.4;margin-top:4px}
.rpg-portrait .banner-frame img,.character-art{object-fit:contain!important;object-position:center bottom!important;background:radial-gradient(circle at 50% 38%,rgba(54,86,108,.16),rgba(4,12,19,.96) 75%)}
.avatar img.class-avatar-img{object-position:center 20%!important}
.clan-class-system{margin-top:18px;padding-top:16px;border-top:1px solid #23465f;text-align:left}.clan-class-chip{margin:4px 4px 0 0}.dungeon-class-ready{margin:22px auto 0;max-width:620px;padding:13px;border:1px solid #315774;border-radius:10px;background:#071522}.dungeon-class-ready b,.dungeon-class-ready span{display:block}.dungeon-class-ready span{margin-top:5px;color:#8ca6b5;font-size:11px;line-height:1.45}
@media(max-width:700px){.class-carousel .class-card{min-height:620px!important}.class-carousel .class-card>.class-art-panel{height:330px!important;max-height:330px!important}.class-special-grid{grid-template-columns:1fr}.class-special-grid>div{padding:8px 9px}.class-special-grid b,.class-special-grid span{font-size:9px}.rpg-portrait{height:480px!important}.character-art-wrap{min-height:480px!important}}
@media(max-width:380px){.class-carousel .class-card>.class-art-panel{height:285px!important;max-height:285px!important}.class-carousel .class-card{min-height:590px!important}}

/* ===== v-global-chat-city-layout ===== */
/* CHAT GLOBALE — nel menu del libro: Bestiario sopra, Chat Globale sotto */
.city-radial-mode .avventura .city-sub-destination:nth-child(1){--tx:0!important;--ty:-78px!important;}
.city-radial-mode .avventura .city-sub-destination:nth-child(2){--tx:0!important;--ty:68px!important;}

/* Chat globale */
.global-chat-card{display:grid;grid-template-rows:minmax(260px,1fr) auto;gap:10px;}
.global-chat-box{height:min(58vh,520px);overflow:auto;padding:12px;background:#06121d;border:1px solid #17384d;border-radius:10px;scroll-behavior:smooth;}
.global-chat-message{margin-bottom:10px;display:flex;}
.global-chat-message.me{justify-content:flex-end;}
.global-chat-bubble{max-width:min(82%,680px);padding:9px 11px;border:1px solid #23465f;border-radius:12px;background:#0d2a3e;}
.global-chat-message.me .global-chat-bubble{background:#3b2d18;border-color:#8b6d39;}
.global-chat-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#e2c671;font-weight:800;font-size:11px;}
.global-chat-message.me .global-chat-who{color:#8fd6f7;}
.global-chat-time{font-size:9px;color:#6e8ca0;font-weight:600;}
.global-chat-text{margin-top:3px;color:#d5e2e9;font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.global-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}
.global-chat-compose input{min-width:0;width:100%;background:#06131f;color:#fff;border:1px solid #294c64;border-radius:8px;padding:11px;}
.global-chat-status{margin-top:7px;color:#6e8ca0;font-size:10px;line-height:1.4;}
@media(max-width:560px){
  .city-radial-mode .avventura .city-sub-destination:nth-child(1){--ty:-66px!important;}
  .city-radial-mode .avventura .city-sub-destination:nth-child(2){--ty:58px!important;}
  .global-chat-box{height:52vh;padding:9px;}
  .global-chat-compose{grid-template-columns:1fr;}
  .global-chat-compose .btn{width:100%;}
  .global-chat-bubble{max-width:90%;}
}

/* ===== idle-mandra-city-character-menu-fix ===== */
/* Badge notifiche fuori dal flusso: Missioni non si sposta quando compare il numero. */
.city-radial-mode .city-sub-destination .im-notify-badge{
  position:absolute!important;top:4px!important;right:5px!important;margin:0!important;min-width:16px!important;z-index:6!important;
}
/* Stesso GAP VISIVO dal cerchio centrale: i pulsanti laterali sono più larghi,
   quindi richiedono più traslazione orizzontale rispetto a Eroe/Missioni. */
.city-radial-mode .personaggio .city-sub-destination:nth-child(1){--tx:0px!important;--ty:-74px!important;}
.city-radial-mode .personaggio .city-sub-destination:nth-child(2){--tx:-126px!important;--ty:0px!important;}
.city-radial-mode .personaggio .city-sub-destination:nth-child(3){--tx:126px!important;--ty:0px!important;}
.city-radial-mode .personaggio .city-sub-destination:nth-child(4){--tx:0px!important;--ty:74px!important;}
@media(max-width:900px){
  .city-radial-mode .personaggio .city-sub-destination:nth-child(1){--ty:-70px!important;}
  .city-radial-mode .personaggio .city-sub-destination:nth-child(2){--tx:-118px!important;}
  .city-radial-mode .personaggio .city-sub-destination:nth-child(3){--tx:118px!important;}
  .city-radial-mode .personaggio .city-sub-destination:nth-child(4){--ty:70px!important;}
}
@media(max-width:560px){
  .city-radial-mode .personaggio .city-sub-destination:nth-child(1){--ty:-68px!important;}
  .city-radial-mode .personaggio .city-sub-destination:nth-child(2){--tx:-106px!important;}
  .city-radial-mode .personaggio .city-sub-destination:nth-child(3){--tx:106px!important;}
  .city-radial-mode .personaggio .city-sub-destination:nth-child(4){--ty:68px!important;}
}

/* ===== idle-mandra-notify-theme ===== */
#idleMandraBannerStack{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(92vw, 440px);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:99999;
  pointer-events:none;
}
.im-banner{
  pointer-events:auto;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px 14px 14px;
  border-radius:16px;
  border:1px solid rgba(114,163,208,.38);
  background:
    radial-gradient(circle at top left, rgba(32,61,94,.95), rgba(6,17,28,.97) 62%),
    linear-gradient(180deg, rgba(10,24,41,.97), rgba(4,11,19,.97));
  box-shadow:
    0 12px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:#edf6ff;
  backdrop-filter:blur(7px);
  animation:imBannerIn .24s ease-out;
}
.im-banner::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,#dfc06f,#8b6928);
}
.im-banner::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.im-banner--success::before{background:linear-gradient(180deg,#6de0a0,#1e8b54);}
.im-banner--warning::before{background:linear-gradient(180deg,#ffd36d,#b67f0d);}
.im-banner--error::before{background:linear-gradient(180deg,#ff9b9b,#af2c2c);}
.im-banner__icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:20px;
  color:#ffeab6;
  background:linear-gradient(180deg, rgba(223,192,111,.18), rgba(223,192,111,.06));
  border:1px solid rgba(223,192,111,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.im-banner--success .im-banner__icon{
  color:#b4ffd0;
  background:linear-gradient(180deg, rgba(84,188,120,.22), rgba(84,188,120,.08));
  border-color:rgba(84,188,120,.34);
}
.im-banner--warning .im-banner__icon{
  color:#ffe3a3;
}
.im-banner--error .im-banner__icon{
  color:#ffd1d1;
  background:linear-gradient(180deg, rgba(190,56,56,.25), rgba(190,56,56,.08));
  border-color:rgba(190,56,56,.35);
}
.im-banner__content{min-width:0;}
.im-banner__title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#e5c56d;
  margin:1px 0 4px;
}
.im-banner--success .im-banner__title{color:#8af0ba;}
.im-banner--warning .im-banner__title{color:#ffd36d;}
.im-banner--error .im-banner__title{color:#ff9f9f;}
.im-banner__message{
  font-size:14px;
  line-height:1.45;
  color:#edf6ff;
  white-space:pre-wrap;
  word-break:break-word;
}
.im-banner__close{
  appearance:none;
  border:0;
  background:transparent;
  color:#87a6c8;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  padding:0 2px;
  border-radius:10px;
  margin-top:-2px;
}
.im-banner__close:hover{color:#fff;background:rgba(255,255,255,.06);}
.im-banner__timer{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:100%;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(223,192,111,.95), rgba(223,192,111,.15));
  animation:imBannerTimer linear forwards;
}
.im-banner--success .im-banner__timer{background:linear-gradient(90deg, rgba(84,188,120,.95), rgba(84,188,120,.15));}
.im-banner--warning .im-banner__timer{background:linear-gradient(90deg, rgba(255,211,109,.95), rgba(255,211,109,.15));}
.im-banner--error .im-banner__timer{background:linear-gradient(90deg, rgba(255,122,122,.95), rgba(255,122,122,.15));}

@keyframes imBannerIn{
  from{opacity:0; transform:translateY(-10px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes imBannerOut{
  from{opacity:1; transform:translateY(0) scale(1);}
  to{opacity:0; transform:translateY(-8px) scale(.98);}
}
@keyframes imBannerTimer{
  from{transform:scaleX(1);}
  to{transform:scaleX(0);}
}
@media(max-width:560px){
  #idleMandraBannerStack{
    top:10px;
    width:min(94vw, 420px);
    gap:10px;
  }
  .im-banner{
    padding:12px;
    border-radius:14px;
    grid-template-columns:auto 1fr auto;
    gap:10px;
  }
  .im-banner__icon{
    width:38px;
    height:38px;
    font-size:18px;
    border-radius:10px;
  }
  .im-banner__title{
    font-size:12px;
    letter-spacing:.14em;
  }
  .im-banner__message{
    font-size:13px;
  }
}

/* ===== idle-mandra-confirm-theme ===== */
.im-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:100500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(1,7,13,.78);
  backdrop-filter:blur(6px);
  animation:imConfirmFade .16s ease-out;
}
.im-confirm-card{
  position:relative;
  width:min(92vw,460px);
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(98,148,196,.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(43,75,108,.38), transparent 48%),
    linear-gradient(180deg,#0b1b2b 0%,#06111c 100%);
  box-shadow:
    0 28px 70px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:#eef7ff;
  animation:imConfirmRise .2s ease-out;
}
.im-confirm-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#d7b75f,transparent);
}
.im-confirm-card.danger::before{
  background:linear-gradient(90deg,transparent,#b94b4b,transparent);
}
.im-confirm-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 20px 12px;
}
.im-confirm-emblem{
  width:46px;
  height:46px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:21px;
  color:#ffe6a4;
  border:1px solid rgba(215,183,95,.35);
  background:linear-gradient(180deg,rgba(215,183,95,.18),rgba(215,183,95,.06));
}
.im-confirm-card.danger .im-confirm-emblem{
  color:#ffd0d0;
  border-color:rgba(185,75,75,.42);
  background:linear-gradient(180deg,rgba(185,75,75,.20),rgba(185,75,75,.06));
}
.im-confirm-title{
  margin:0;
  color:#e7c96f;
  font-size:18px;
  font-weight:900;
  letter-spacing:.06em;
}
.im-confirm-card.danger .im-confirm-title{color:#f0b0a6;}
.im-confirm-subtitle{
  margin-top:3px;
  color:#7694ad;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.im-confirm-message{
  padding:4px 20px 20px;
  color:#dce8f2;
  font-size:14px;
  line-height:1.6;
  white-space:pre-wrap;
}
.im-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px 20px 20px;
  border-top:1px solid rgba(85,123,153,.18);
  background:rgba(0,0,0,.12);
}
.im-confirm-btn{
  min-height:46px;
  border-radius:12px;
  border:1px solid #24445c;
  background:#0b2233;
  color:#c9d9e6;
  font-weight:900;
  cursor:pointer;
}
.im-confirm-btn:hover{filter:brightness(1.12);}
.im-confirm-btn.confirm{
  border-color:#876d2d;
  color:#ffe9a8;
  background:linear-gradient(180deg,#674d1f,#4b3516);
}
.im-confirm-card.danger .im-confirm-btn.confirm{
  border-color:#813e3e;
  color:#ffd5d5;
  background:linear-gradient(180deg,#6f3030,#4e2020);
}
@keyframes imConfirmFade{from{opacity:0}to{opacity:1}}
@keyframes imConfirmRise{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:560px){
  .im-confirm-overlay{
    align-items:center;
    justify-content:center;
    padding:16px;
  }
  .im-confirm-card{
    width:min(94vw,460px);
    border-radius:18px;
    max-height:88vh;
    overflow:auto;
  }
  .im-confirm-head{padding:18px 16px 10px;}
  .im-confirm-message{padding:4px 16px 18px;font-size:14px;}
  .im-confirm-actions{padding:12px 16px 16px;}
}

/* ===== idle-mandra-confirm-center-guard ===== */
.im-confirm-overlay{
  align-items:center!important;
  justify-content:center!important;
}

/* ===== clan-create-dialog ===== */
.im-clan-create-card{width:min(94vw,560px)}
.im-clan-create-form{display:grid;gap:14px;padding:2px 20px 18px}
.im-clan-create-cost{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid rgba(215,183,95,.26);border-radius:12px;background:linear-gradient(135deg,rgba(215,183,95,.10),rgba(7,19,30,.45));color:#b9cad7;font-size:12px}
.im-clan-create-cost b{color:#ffe49a;font-size:15px}
.im-clan-create-field label{display:block;margin-bottom:6px;color:#8ca6bb;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.im-clan-create-field input{width:100%;min-height:48px;padding:11px 13px;border:1px solid #31556d;border-radius:12px;outline:none;background:#071522;color:#f3f8fb;font-size:15px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.im-clan-create-field input:focus{border-color:#d0aa52;box-shadow:0 0 0 3px rgba(208,170,82,.10),inset 0 1px 0 rgba(255,255,255,.04)}
.im-clan-create-field .tiny{margin-top:5px;color:#6f8ca1}
.im-clan-create-error{display:none;padding:10px 12px;border:1px solid rgba(210,79,79,.36);border-radius:10px;background:rgba(112,24,31,.18);color:#ffb8b8;font-size:12px;font-weight:800}
.im-clan-create-error.show{display:block}
.im-clan-create-emblems{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.im-clan-create-emblem{position:relative;aspect-ratio:1;border:1px solid #27465a;border-radius:11px;background:#071522;padding:4px;overflow:hidden;cursor:pointer;transition:.16s ease}
.im-clan-create-emblem img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}
.im-clan-create-emblem:hover{border-color:#658399;transform:translateY(-1px)}
.im-clan-create-emblem.selected{border-color:#e2bc62;box-shadow:0 0 0 2px rgba(226,188,98,.15),0 7px 18px rgba(0,0,0,.25)}
.im-clan-create-emblem.selected::after{content:"✓";position:absolute;right:3px;bottom:3px;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#e2bc62;color:#10151a;font-size:11px;font-weight:1000;box-shadow:0 2px 8px #0008}
.im-clan-create-preview{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;border:1px solid #294c61;background:rgba(5,15,24,.62)}
.im-clan-create-preview img{width:46px;height:46px;border-radius:10px;object-fit:cover;border:1px solid #4a687b}
.im-clan-create-preview small{display:block;color:#728da0;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.im-clan-create-preview b{display:block;margin-top:2px;color:#f2d58e;font-size:15px}
@media(max-width:560px){
  .im-clan-create-form{padding:2px 16px 16px;gap:12px}
  .im-clan-create-emblems{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .im-clan-create-field input{min-height:46px}
}

/* ===== idle-mandra-class-layout-final-fix ===== */
/* FIX FINALE: messo per ultimo apposta, così non viene sovrascritto dagli stili precedenti */

/* SELEZIONE CLASSE:
   le immagini generate sono 1086x1448 = rapporto 3:4.
   Usiamo lo stesso rapporto del file, così riempiono il riquadro senza tagliare piedi o parte inferiore. */
.class-carousel .class-card > .class-art-panel{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:3 / 4!important;
  padding:0!important;
}
.class-carousel .class-card > .class-art-panel .class-art-image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Le vecchie regole mobile imponevano 330/285px e causavano il taglio verticale. */
@media(max-width:700px){
  .class-carousel .class-card > .class-art-panel{
    height:auto!important;
    max-height:none!important;
    aspect-ratio:3 / 4!important;
  }
}
@media(max-width:380px){
  .class-carousel .class-card > .class-art-panel{
    height:auto!important;
    max-height:none!important;
    aspect-ratio:3 / 4!important;
  }
}

/* PROFILO:
   impedisce alla colonna immagine di allungarsi quanto tutto il testo della scheda.
   La dimensione visiva è ora comparabile alla Scheda Eroe. */
.character-hero{
  align-items:start!important;
}
.character-art-wrap{
  height:420px!important;
  min-height:420px!important;
  align-self:start!important;
  padding:0!important;
  overflow:hidden!important;
}
.character-art-wrap .profile-class-art{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
}
.character-art-wrap .profile-class-art .class-art-image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 44%!important;
}

@media(max-width:900px){
  .character-hero{
    grid-template-columns:1fr!important;
  }
  .character-art-wrap{
    width:100%!important;
    height:480px!important;
    min-height:480px!important;
  }
  .character-art-wrap .profile-class-art{
    height:480px!important;
  }
}

/* ===== idle-mandra-vip-sober-system ===== */
/* =========================================================
   VIP SOBRIO
   Stessa identità cromatica su:
   - cornice tonda profilo/header
   - barra ATTACCA quando il VIP la modifica (VIP 8-10)
   - avatar nelle classifiche giocatori
   Niente particelle, rotazioni, lampi o effetti psichedelici.
   ========================================================= */

/* Palette VIP */
.avatar-vip-frame.vip-bronze,.avatar-vip-label.vip-bronze,
.rank-frame.vip-bronze,.rank-vip-badge.vip-bronze{--vip-color:#a87547;--vip-dark:#2c2118}
.avatar-vip-frame.vip-iron,.avatar-vip-label.vip-iron,
.rank-frame.vip-iron,.rank-vip-badge.vip-iron{--vip-color:#a8b3bc;--vip-dark:#252c31}
.avatar-vip-frame.vip-steel,.avatar-vip-label.vip-steel,
.rank-frame.vip-steel,.rank-vip-badge.vip-steel{--vip-color:#6f9bb8;--vip-dark:#172834}
.avatar-vip-frame.vip-flame,.avatar-vip-label.vip-flame,
.rank-frame.vip-flame,.rank-vip-badge.vip-flame{--vip-color:#c76545;--vip-dark:#321c15}
.avatar-vip-frame.vip-sapphire,.avatar-vip-label.vip-sapphire,
.rank-frame.vip-sapphire,.rank-vip-badge.vip-sapphire{--vip-color:#4a92bd;--vip-dark:#142733}
.avatar-vip-frame.vip-lion,.avatar-vip-label.vip-lion,
.rank-frame.vip-lion,.rank-vip-badge.vip-lion{--vip-color:#b99a4d;--vip-dark:#302817}
.avatar-vip-frame.vip-epic,.avatar-vip-label.vip-epic,
.rank-frame.vip-epic,.rank-vip-badge.vip-epic{--vip-color:#8f70ad;--vip-dark:#251d2e}
.avatar-vip-frame.vip-dragon,.avatar-vip-label.vip-dragon,
.rank-frame.vip-dragon,.rank-vip-badge.vip-dragon{--vip-color:#5d9c73;--vip-dark:#17291e}
.avatar-vip-frame.vip-legend,.avatar-vip-label.vip-legend,
.rank-frame.vip-legend,.rank-vip-badge.vip-legend{--vip-color:#c7aa52;--vip-dark:#302817}
.avatar-vip-frame.vip-imperial,.avatar-vip-label.vip-imperial,
.rank-frame.vip-imperial,.rank-vip-badge.vip-imperial{--vip-color:#ddc373;--vip-dark:#342b16}

/* Cornice tonda del profilo/header */
.avatar-vip-frame[class*="vip-"]{
  border:3px solid var(--vip-color)!important;
  background:transparent!important;
  color:var(--vip-color)!important;
  box-shadow:
    0 0 0 2px rgba(4,11,18,.95),
    0 0 8px color-mix(in srgb,var(--vip-color) 28%,transparent)!important;
  animation:none!important;
  filter:none!important;
}
.avatar-vip-frame[class*="vip-"]::before{
  content:""!important;
  position:absolute!important;
  inset:4px!important;
  border:1px solid color-mix(in srgb,var(--vip-color) 38%,transparent)!important;
  border-radius:50%!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  animation:none!important;
  padding:0!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.avatar-vip-frame[class*="vip-"]::after{
  display:none!important;
  content:none!important;
}
.avatar-vip-label[class*="vip-"]{
  color:var(--vip-color)!important;
  border-color:color-mix(in srgb,var(--vip-color) 70%,#111)!important;
  background:#08131b!important;
  box-shadow:0 3px 8px rgba(0,0,0,.45)!important;
  animation:none!important;
  text-shadow:none!important;
}

/* CLASSIFICHE GIOCATORI — stessa cornice tonda e stesso colore VIP */
.rank-frame[class*="vip-"]{
  border-radius:50%!important;
  border:2px solid var(--vip-color)!important;
  color:var(--vip-color)!important;
  background:#071522!important;
  box-shadow:
    0 0 0 1px #0b1c2a,
    0 0 7px color-mix(in srgb,var(--vip-color) 24%,transparent)!important;
  overflow:visible!important;
  animation:none!important;
  filter:none!important;
}
.rank-frame[class*="vip-"] img{
  border-radius:50%!important;
}
.rank-frame[class*="vip-"]::before{
  content:""!important;
  position:absolute!important;
  inset:-4px!important;
  border:1px solid color-mix(in srgb,var(--vip-color) 34%,transparent)!important;
  border-radius:50%!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  animation:none!important;
  padding:0!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.rank-frame[class*="vip-"]::after{
  display:none!important;
  content:none!important;
}
.rank-vip-badge[class*="vip-"]{
  color:var(--vip-color)!important;
  border-color:var(--vip-color)!important;
  background:#08131b!important;
  box-shadow:0 2px 6px rgba(0,0,0,.58)!important;
  animation:none!important;
  text-shadow:none!important;
}

/* ATTACCA: soltanto i VIP che già modificavano la barra (8-10).
   Il colore è lo stesso della cornice tonda corrispondente. */
.attack.vip-tap-8{
  --vip-attack:#5d9c73;
  background:linear-gradient(180deg,#20392a,#15291d)!important;
  border:1px solid var(--vip-attack)!important;
  color:#e3efe7!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 7px 18px rgba(0,0,0,.48)!important;
  text-shadow:none!important;
}
.attack.vip-tap-9{
  --vip-attack:#c7aa52;
  background:linear-gradient(180deg,#443b22,#302919)!important;
  border:1px solid var(--vip-attack)!important;
  color:#f0e6c3!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 7px 18px rgba(0,0,0,.48)!important;
  text-shadow:none!important;
}
.attack.vip-tap-10{
  --vip-attack:#ddc373;
  background:linear-gradient(180deg,#51452a,#352d1d)!important;
  border:1px solid var(--vip-attack)!important;
  color:#f6edcf!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 7px 18px rgba(0,0,0,.50)!important;
  text-shadow:none!important;
}
.attack.vip-tap-8::before,.attack.vip-tap-9::before,.attack.vip-tap-10::before{
  content:""!important;
  position:absolute!important;
  inset:3px!important;
  border:1px solid color-mix(in srgb,var(--vip-attack) 40%,transparent)!important;
  border-radius:inherit!important;
  background:none!important;
  opacity:1!important;
  animation:none!important;
  filter:none!important;
  padding:0!important;
  -webkit-mask:none!important;
  mask:none!important;
  z-index:0!important;
  pointer-events:none!important;
}
.attack.vip-tap-8::after,.attack.vip-tap-9::after,.attack.vip-tap-10::after{
  display:none!important;
  content:none!important;
}
.attack.vip-tap-8.tap-hit,.attack.vip-tap-9.tap-hit,.attack.vip-tap-10.tap-hit{
  transform:scale(1.018)!important;
  filter:brightness(1.09)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 10px color-mix(in srgb,var(--vip-attack) 25%,transparent),
    0 7px 18px rgba(0,0,0,.5)!important;
}

/* Mantiene tutto fermo anche se vecchie animazioni VIP sono presenti sopra nel CSS. */
.avatar-vip-frame[class*="vip-"],
.avatar-vip-frame[class*="vip-"]::before,
.avatar-vip-frame[class*="vip-"]::after,
.rank-frame[class*="vip-"],
.rank-frame[class*="vip-"]::before,
.rank-frame[class*="vip-"]::after,
.rank-vip-badge[class*="vip-"],
.attack[class*="vip-tap-"]::before,
.attack[class*="vip-tap-"]::after{
  animation:none!important;
}

/* ===== idle-mandra-vip-aura-8-10 ===== */
/* =========================================================
   VIP 8-10: aura leggera + maggiore differenza tra 9 e 10
   ========================================================= */

/* Palette più distinta:
   VIP 8 = verde giada
   VIP 9 = oro caldo
   VIP 10 = platino/oro chiaro */
.avatar-vip-frame.vip-dragon,
.avatar-vip-label.vip-dragon,
.rank-frame.vip-dragon,
.rank-vip-badge.vip-dragon{
  --vip-color:#63a97c!important;
  --vip-aura:rgba(99,169,124,.34)!important;
}

.avatar-vip-frame.vip-legend,
.avatar-vip-label.vip-legend,
.rank-frame.vip-legend,
.rank-vip-badge.vip-legend{
  --vip-color:#d2a744!important;
  --vip-aura:rgba(210,167,68,.38)!important;
}

.avatar-vip-frame.vip-imperial,
.avatar-vip-label.vip-imperial,
.rank-frame.vip-imperial,
.rank-vip-badge.vip-imperial{
  --vip-color:#f0d992!important;
  --vip-aura:rgba(240,217,146,.46)!important;
}

/* Cornice profilo/header: aura discreta e pulsante solo VIP 8-10 */
.avatar-vip-frame.vip-dragon,
.avatar-vip-frame.vip-legend,
.avatar-vip-frame.vip-imperial{
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 10px var(--vip-aura),
    0 0 18px color-mix(in srgb,var(--vip-color) 18%,transparent)!important;
  animation:vipAuraSoft 3.6s ease-in-out infinite!important;
}

.avatar-vip-frame.vip-imperial{
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 12px var(--vip-aura),
    0 0 24px color-mix(in srgb,var(--vip-color) 26%,transparent)!important;
}

/* classifiche: stessa identità visiva, ma ancora più sobria */
.rank-frame.vip-dragon,
.rank-frame.vip-legend,
.rank-frame.vip-imperial{
  box-shadow:
    0 0 0 1px #0b1c2a,
    0 0 8px var(--vip-aura)!important;
}

/* ATTACCA VIP 8-10 */
.attack.vip-tap-8{
  --vip-attack:#63a97c!important;
  --vip-attack-aura:rgba(99,169,124,.30)!important;
  background:linear-gradient(180deg,#24412e,#172b1f)!important;
}
.attack.vip-tap-9{
  --vip-attack:#d2a744!important;
  --vip-attack-aura:rgba(210,167,68,.34)!important;
  background:linear-gradient(180deg,#514021,#342b18)!important;
}
.attack.vip-tap-10{
  --vip-attack:#f0d992!important;
  --vip-attack-aura:rgba(240,217,146,.42)!important;
  background:
    linear-gradient(180deg,#605439,#3e3626)!important;
  color:#fff5d4!important;
}

/* Aura viva ma leggera attorno alla barra */
.attack.vip-tap-8,
.attack.vip-tap-9,
.attack.vip-tap-10{
  animation:vipAttackAuraSoft 3.8s ease-in-out infinite!important;
}

.attack.vip-tap-8{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 8px var(--vip-attack-aura),
    0 7px 18px rgba(0,0,0,.48)!important;
}
.attack.vip-tap-9{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 10px var(--vip-attack-aura),
    0 7px 18px rgba(0,0,0,.48)!important;
}
.attack.vip-tap-10{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 12px var(--vip-attack-aura),
    0 0 22px color-mix(in srgb,var(--vip-attack) 16%,transparent),
    0 7px 18px rgba(0,0,0,.50)!important;
}

/* Piccolo respiro luminoso, senza rotazioni/particelle */
@keyframes vipAuraSoft{
  0%,100%{
    filter:brightness(1);
  }
  50%{
    filter:brightness(1.07);
  }
}

@keyframes vipAttackAuraSoft{
  0%,100%{
    filter:brightness(1);
  }
  50%{
    filter:brightness(1.06);
  }
}

/* Il click resta appena più evidente */
.attack.vip-tap-8.tap-hit,
.attack.vip-tap-9.tap-hit,
.attack.vip-tap-10.tap-hit{
  transform:scale(1.015)!important;
  filter:brightness(1.12)!important;
}

/* ===== idle-mandra-vip-final-effects-v2 ===== */
/* =========================================================
   VIP FINALI V2
   8 = elettrico verde, più fluido
   9 = fuoco/ambra con vera aura visibile
   10 = energia imperiale bianco-oro in movimento
   ========================================================= */

/* ---------------- VIP 8 · ELETTRICO FLUIDO ---------------- */
.avatar-vip-frame.vip-dragon{
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 12px rgba(99,210,135,.42),
    0 0 24px rgba(99,210,135,.16)!important;
  animation:vip8AuraSmooth 3.2s ease-in-out infinite!important;
}
.avatar-vip-frame.vip-dragon::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-8px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:.65!important;
  background:
    conic-gradient(
      from 20deg,
      transparent 0 11%,
      rgba(177,255,200,.78) 12% 13%,
      transparent 14% 34%,
      rgba(85,218,128,.68) 35% 36.2%,
      transparent 37% 61%,
      rgba(196,255,214,.72) 62% 63%,
      transparent 64% 84%,
      rgba(85,218,128,.58) 85% 86%,
      transparent 87% 100%
    )!important;
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 63%,#000 69%,transparent 72%)!important;
  mask:radial-gradient(circle,transparent 60%,#000 63%,#000 69%,transparent 72%)!important;
  filter:drop-shadow(0 0 5px rgba(99,210,135,.62))!important;
  animation:vip8RingFlow 5.5s linear infinite!important;
}

.attack.vip-tap-8{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 10px rgba(99,210,135,.34),
    0 0 20px rgba(99,210,135,.12),
    0 7px 18px rgba(0,0,0,.48)!important;
  animation:vip8BarGlow 3s ease-in-out infinite!important;
}
.attack.vip-tap-8::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-5px!important;
  bottom:-5px!important;
  left:-32%!important;
  width:24%!important;
  border-radius:20px!important;
  pointer-events:none!important;
  opacity:.72!important;
  background:
    linear-gradient(115deg,
      transparent 0 26%,
      rgba(190,255,208,.15) 32%,
      rgba(190,255,208,.86) 47%,
      rgba(84,222,128,.62) 54%,
      transparent 70% 100%)!important;
  filter:
    blur(1.2px)
    drop-shadow(0 0 5px rgba(99,210,135,.58))!important;
  transform:skewX(-15deg)!important;
  animation:vip8ElectricSweep 2.9s ease-in-out infinite!important;
}

/* ---------------- VIP 9 · FUOCO / AURA AMBRA ---------------- */
.avatar-vip-frame.vip-legend{
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 14px rgba(255,183,67,.48),
    0 0 30px rgba(232,124,38,.22)!important;
  animation:vip9AuraBreath 2.35s ease-in-out infinite!important;
}
.avatar-vip-frame.vip-legend::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-12px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:.72!important;
  background:
    radial-gradient(circle at 50% 5%,rgba(255,228,142,.72),transparent 18%),
    radial-gradient(circle at 84% 30%,rgba(255,164,55,.58),transparent 22%),
    radial-gradient(circle at 94% 66%,rgba(230,105,30,.42),transparent 19%),
    radial-gradient(circle at 50% 96%,rgba(255,181,67,.54),transparent 20%),
    radial-gradient(circle at 11% 68%,rgba(235,118,31,.42),transparent 20%),
    radial-gradient(circle at 16% 27%,rgba(255,193,78,.56),transparent 20%)!important;
  filter:blur(5px) drop-shadow(0 0 6px rgba(255,173,60,.38))!important;
  animation:vip9FireHalo 2.05s ease-in-out infinite!important;
}

.attack.vip-tap-9{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 12px rgba(255,180,65,.42),
    0 0 25px rgba(226,113,31,.18),
    0 7px 18px rgba(0,0,0,.48)!important;
  animation:vip9BarAura 2.25s ease-in-out infinite!important;
}
.attack.vip-tap-9::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:3%!important;
  right:3%!important;
  bottom:-8px!important;
  height:20px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:.70!important;
  background:
    radial-gradient(ellipse at 14% 80%,rgba(255,142,35,.66),transparent 32%),
    radial-gradient(ellipse at 38% 60%,rgba(255,207,94,.60),transparent 31%),
    radial-gradient(ellipse at 62% 76%,rgba(242,123,30,.60),transparent 32%),
    radial-gradient(ellipse at 84% 55%,rgba(255,192,75,.62),transparent 31%)!important;
  filter:blur(5px) drop-shadow(0 0 6px rgba(255,159,45,.42))!important;
  transform-origin:center bottom!important;
  animation:vip9FlameFlow 1.8s ease-in-out infinite!important;
}

/* ---------------- VIP 10 · IMPERIALE IN MOVIMENTO ---------------- */
.avatar-vip-frame.vip-imperial{
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 16px rgba(255,238,184,.58),
    0 0 34px rgba(240,217,146,.26)!important;
  animation:vip10AuraBreath 2.1s ease-in-out infinite!important;
}
.avatar-vip-frame.vip-imperial::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-9px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:.80!important;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 8%,
      rgba(255,255,245,.95) 9% 10.5%,
      transparent 12% 28%,
      rgba(241,210,117,.84) 29% 31%,
      transparent 32% 49%,
      rgba(255,255,242,.96) 50% 51.5%,
      transparent 53% 71%,
      rgba(241,210,117,.80) 72% 74%,
      transparent 75% 91%,
      rgba(255,255,245,.94) 92% 93.5%,
      transparent 95% 100%
    )!important;
  -webkit-mask:radial-gradient(circle,transparent 59%,#000 62%,#000 69%,transparent 72%)!important;
  mask:radial-gradient(circle,transparent 59%,#000 62%,#000 69%,transparent 72%)!important;
  filter:
    drop-shadow(0 0 6px rgba(255,252,225,.82))
    drop-shadow(0 0 12px rgba(240,217,146,.42))!important;
  animation:vip10RingTravel 4.4s linear infinite!important;
}

.attack.vip-tap-10{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 14px rgba(255,238,184,.46),
    0 0 28px rgba(240,217,146,.20),
    0 7px 18px rgba(0,0,0,.50)!important;
  animation:vip10BarBreath 2.1s ease-in-out infinite!important;
}
.attack.vip-tap-10::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-8px!important;
  bottom:-8px!important;
  left:-38%!important;
  width:30%!important;
  border-radius:24px!important;
  pointer-events:none!important;
  opacity:.82!important;
  background:
    linear-gradient(108deg,
      transparent 0 24%,
      rgba(255,255,244,.18) 31%,
      rgba(255,255,244,.96) 45%,
      rgba(240,215,135,.86) 53%,
      rgba(255,255,244,.24) 61%,
      transparent 74% 100%)!important;
  filter:
    blur(.8px)
    drop-shadow(0 0 7px rgba(255,248,218,.66))
    drop-shadow(0 0 14px rgba(240,217,146,.28))!important;
  transform:skewX(-18deg)!important;
  animation:vip10ImperialSweep 2.35s cubic-bezier(.42,0,.58,1) infinite!important;
}

/* ---------------- ANIMAZIONI ---------------- */
@keyframes vip8AuraSmooth{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
@keyframes vip8RingFlow{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes vip8BarGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.055)}
}
@keyframes vip8ElectricSweep{
  0%{left:-32%;opacity:0}
  15%{opacity:.72}
  50%{opacity:.82}
  85%{opacity:.68}
  100%{left:108%;opacity:0}
}

@keyframes vip9AuraBreath{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.09)}
}
@keyframes vip9FireHalo{
  0%,100%{transform:scale(.96) rotate(-2deg);opacity:.52}
  35%{transform:scale(1.04) rotate(1deg);opacity:.78}
  68%{transform:scale(.99) rotate(2deg);opacity:.62}
}
@keyframes vip9BarAura{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.075)}
}
@keyframes vip9FlameFlow{
  0%,100%{transform:translateY(2px) scaleX(.96) scaleY(.82);opacity:.46}
  35%{transform:translateY(-2px) scaleX(1.03) scaleY(1.08);opacity:.78}
  70%{transform:translateY(0) scaleX(.99) scaleY(.94);opacity:.60}
}

@keyframes vip10AuraBreath{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.11)}
}
@keyframes vip10RingTravel{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes vip10BarBreath{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.085)}
}
@keyframes vip10ImperialSweep{
  0%{left:-38%;opacity:0}
  12%{opacity:.72}
  48%{opacity:.90}
  82%{opacity:.72}
  100%{left:110%;opacity:0}
}

/* Mantieni il feedback al tap, senza interferire con le animazioni continue */
.attack.vip-tap-8.tap-hit,
.attack.vip-tap-9.tap-hit,
.attack.vip-tap-10.tap-hit{
  transform:scale(1.015)!important;
  filter:brightness(1.14)!important;
}

/* Accessibilità */
body.reduced-motion .avatar-vip-frame.vip-dragon,
body.reduced-motion .avatar-vip-frame.vip-legend,
body.reduced-motion .avatar-vip-frame.vip-imperial,
body.reduced-motion .avatar-vip-frame.vip-dragon::after,
body.reduced-motion .avatar-vip-frame.vip-legend::after,
body.reduced-motion .avatar-vip-frame.vip-imperial::after,
body.reduced-motion .attack.vip-tap-8,
body.reduced-motion .attack.vip-tap-9,
body.reduced-motion .attack.vip-tap-10,
body.reduced-motion .attack.vip-tap-8::after,
body.reduced-motion .attack.vip-tap-9::after,
body.reduced-motion .attack.vip-tap-10::after{
  animation:none!important;
}

/* ===== idle-mandra-vip-9-10-inside-attack-fix ===== */
/* VIP 8 resta invariato.
   VIP 9 e VIP 10: gli effetti animati restano DENTRO il pulsante ATTACCA. */
.attack.vip-tap-9,
.attack.vip-tap-10{
  overflow:hidden!important;
}

/* VIP 9 — fiamme/ambra interne al bordo */
.attack.vip-tap-9::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:3%!important;
  right:3%!important;
  top:auto!important;
  bottom:1px!important;
  height:58%!important;
  border-radius:0 0 22px 22px!important;
  pointer-events:none!important;
  opacity:.72!important;
  background:
    radial-gradient(ellipse at 12% 100%,rgba(255,142,35,.72),transparent 40%),
    radial-gradient(ellipse at 34% 92%,rgba(255,211,101,.68),transparent 38%),
    radial-gradient(ellipse at 58% 100%,rgba(238,122,31,.68),transparent 40%),
    radial-gradient(ellipse at 82% 90%,rgba(255,194,77,.70),transparent 38%)!important;
  filter:blur(3px) drop-shadow(0 0 4px rgba(255,159,45,.32))!important;
  transform-origin:center bottom!important;
  animation:vip9FlameInside 1.75s ease-in-out infinite!important;
}

/* VIP 10 — scia imperiale attraversa la barra senza uscire */
.attack.vip-tap-10::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:2px!important;
  bottom:2px!important;
  left:-28%!important;
  width:24%!important;
  border-radius:18px!important;
  pointer-events:none!important;
  opacity:.86!important;
  background:
    linear-gradient(108deg,
      transparent 0 22%,
      rgba(255,255,244,.12) 29%,
      rgba(255,255,244,.94) 45%,
      rgba(240,215,135,.88) 54%,
      rgba(255,255,244,.20) 63%,
      transparent 76% 100%)!important;
  filter:
    blur(.55px)
    drop-shadow(0 0 5px rgba(255,248,218,.50))!important;
  transform:skewX(-17deg)!important;
  animation:vip10ImperialInside 2.25s cubic-bezier(.42,0,.58,1) infinite!important;
}

@keyframes vip9FlameInside{
  0%,100%{
    transform:translateY(3px) scaleX(.96) scaleY(.80);
    opacity:.48;
  }
  35%{
    transform:translateY(-1px) scaleX(1.03) scaleY(1.08);
    opacity:.80;
  }
  70%{
    transform:translateY(1px) scaleX(.99) scaleY(.94);
    opacity:.62;
  }
}

@keyframes vip10ImperialInside{
  0%{left:-28%;opacity:0}
  12%{opacity:.68}
  48%{opacity:.92}
  82%{opacity:.70}
  100%{left:106%;opacity:0}
}

body.reduced-motion .attack.vip-tap-9::after,
body.reduced-motion .attack.vip-tap-10::after{
  animation:none!important;
}

/* ===== idle-mandra-vip-8-10-new-bar-effects-v9 ===== */
/* =========================================================
   NUOVI EFFETTI BARRA ATTACCA
   SOLO VIP 8 e VIP 10
   VIP 9 resta identico.

   VIP 8  = scarica diagonale verde che attraversa la barra
   VIP 10 = onda imperiale bianco-oro che scorre dentro la barra

   Entrambi restano completamente dentro il pulsante.
   ========================================================= */

.attack.vip-tap-8,
.attack.vip-tap-10{
  position:relative!important;
  overflow:hidden!important;
}

/* ---------- VIP 8 · SCARICA VERDE IN MOVIMENTO ---------- */
.attack.vip-tap-8::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-18%!important;
  bottom:-18%!important;
  left:-42%!important;
  width:28%!important;
  height:auto!important;
  right:auto!important;
  border-radius:18px!important;
  pointer-events:none!important;
  opacity:.95!important;

  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 22%,
      rgba(172,255,201,.12) 30%,
      rgba(172,255,201,.92) 44%,
      rgba(69,222,121,.92) 52%,
      rgba(172,255,201,.30) 62%,
      transparent 74%,
      transparent 100%
    )!important;

  filter:
    blur(.6px)
    drop-shadow(0 0 5px rgba(80,225,130,.72))!important;

  transform:skewX(-18deg)!important;
  transform-origin:center!important;
  animation:vip8LightningSweepV9 1.55s cubic-bezier(.45,0,.55,1) infinite!important;
}

/* piccolo alone interno, sempre contenuto */
.attack.vip-tap-8::before{
  content:""!important;
  position:absolute!important;
  inset:3px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  border:1px solid rgba(110,235,151,.28)!important;
  background:
    linear-gradient(
      90deg,
      rgba(45,134,77,.08),
      rgba(123,238,159,.16),
      rgba(45,134,77,.08)
    )!important;
  background-size:200% 100%!important;
  animation:vip8InnerGlowV9 2.2s linear infinite!important;
  z-index:0!important;
}

/* ---------- VIP 10 · ONDA IMPERIALE BIANCO-ORO ---------- */
.attack.vip-tap-10::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:-55%!important;
  width:48%!important;
  height:100%!important;
  right:auto!important;
  border-radius:18px!important;
  pointer-events:none!important;
  opacity:.92!important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,244,.96) 0%,
      rgba(255,244,196,.86) 28%,
      rgba(236,204,113,.52) 48%,
      rgba(236,204,113,.16) 66%,
      transparent 78%
    )!important;

  filter:
    blur(1.4px)
    drop-shadow(0 0 6px rgba(255,248,218,.68))!important;

  transform:scaleY(.82)!important;
  transform-origin:center!important;
  animation:vip10RoyalWaveV9 1.85s cubic-bezier(.42,0,.58,1) infinite!important;
}

/* sottile luccichio che si muove nella direzione opposta */
.attack.vip-tap-10::before{
  content:""!important;
  position:absolute!important;
  inset:3px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  border:1px solid rgba(255,238,181,.34)!important;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,250,224,.10) 34%,
      rgba(255,250,224,.28) 50%,
      rgba(255,250,224,.10) 66%,
      rgba(255,255,255,0) 100%
    )!important;
  background-size:220% 100%!important;
  animation:vip10InnerShimmerV9 2.35s linear infinite!important;
  z-index:0!important;
}

@keyframes vip8LightningSweepV9{
  0%{
    left:-42%;
    opacity:0;
  }
  12%{
    opacity:.90;
  }
  48%{
    opacity:1;
  }
  88%{
    opacity:.88;
  }
  100%{
    left:116%;
    opacity:0;
  }
}

@keyframes vip8InnerGlowV9{
  from{background-position:0% 50%}
  to{background-position:200% 50%}
}

@keyframes vip10RoyalWaveV9{
  0%{
    left:-55%;
    opacity:0;
    transform:scaleY(.72);
  }
  15%{
    opacity:.82;
  }
  50%{
    opacity:1;
    transform:scaleY(.96);
  }
  85%{
    opacity:.84;
  }
  100%{
    left:112%;
    opacity:0;
    transform:scaleY(.72);
  }
}

@keyframes vip10InnerShimmerV9{
  from{background-position:200% 50%}
  to{background-position:0% 50%}
}

/* Mantiene l'effetto tap */
.attack.vip-tap-8.tap-hit,
.attack.vip-tap-10.tap-hit{
  transform:scale(1.015)!important;
  filter:brightness(1.14)!important;
}

/* Riduzione movimento */
body.reduced-motion .attack.vip-tap-8::after,
body.reduced-motion .attack.vip-tap-8::before,
body.reduced-motion .attack.vip-tap-10::after,
body.reduced-motion .attack.vip-tap-10::before{
  animation:none!important;
}

/* ===== idle-mandra-auto-notification-timing ===== */
/* Notifiche transienti: la barretta in basso indica il tempo residuo.
   Click/tap sulla notifica = chiusura immediata. */
.im-banner{
  cursor:pointer;
}
.im-banner__close{
  cursor:pointer;
}

/* ===== idle-mandra-raid-v1 ===== */
.raid-entry-card{
  margin-bottom:12px;
  border:1px solid #5a4422;
  background:
    radial-gradient(circle at 85% 15%,rgba(183,124,48,.10),transparent 34%),
    linear-gradient(145deg,#101821,#09131c);
}
.raid-entry-card .raid-entry-grid{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
}
.raid-entry-card h2{margin:3px 0 6px}
.raid-entry-card .raid-entry-icon{
  width:82px;height:82px;border-radius:18px;
  display:grid;place-items:center;font-size:38px;
  border:1px solid #72562a;background:#14140f;
  box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 0 20px rgba(209,158,73,.08);
}
.raid-zone{display:grid;gap:12px}
.raid-boss-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.raid-boss-card{
  position:relative;overflow:hidden;
  border:1px solid #284860;border-radius:12px;
  background:linear-gradient(145deg,#0a1824,#07121b);
  min-height:220px;cursor:pointer;
  transition:.16s ease;
}
.raid-boss-card:hover{transform:translateY(-2px);border-color:#4e7088}
.raid-boss-card.active{border-color:#c99a45;box-shadow:0 0 0 1px rgba(221,183,94,.16),0 10px 24px rgba(0,0,0,.3)}
.raid-boss-card.locked{opacity:.52;cursor:not-allowed;filter:saturate(.55)}
.raid-boss-card.cleared::after{
  content:"✓";position:absolute;top:8px;right:8px;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;
  background:#173d29;border:1px solid #4c9b67;color:#bce8c9;
}
.raid-boss-card img{
  width:100%;height:132px;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.05);
}
.raid-boss-card .body{padding:10px}
.raid-boss-card .body b{display:block;font:800 13px Cinzel;color:#e2c671}
.raid-boss-card .body span{display:block;margin-top:3px;font-size:11px;color:#86a0b0}
.raid-arena{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:14px;align-items:stretch;
}
.raid-art{
  position:relative;overflow:hidden;border-radius:14px;min-height:430px;
  border:1px solid #3c5364;background:#07121b;
}
.raid-art img{width:100%;height:100%;min-height:430px;object-fit:cover;display:block}
.raid-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.72) 100%);
}
.raid-art-label{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
}
.raid-art-label h2{margin:2px 0 4px;font-size:24px}
.raid-panel{display:flex;flex-direction:column;gap:12px}
.raid-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.raid-stat{
  padding:11px;border-radius:10px;border:1px solid #223e52;background:#071521;
}
.raid-stat b{display:block;font-size:16px;margin-top:2px}
.raid-attack{
  min-height:58px;font:900 18px Cinzel;letter-spacing:.7px;
}
.raid-result{
  text-align:center;padding:14px;border:1px solid #45624d;border-radius:10px;
  background:#0b1c14;
}
@media(max-width:900px){
  .raid-boss-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raid-arena{grid-template-columns:1fr}
  .raid-art{min-height:360px}
  .raid-art img{min-height:360px}
}
@media(max-width:520px){
  .raid-entry-card .raid-entry-grid{grid-template-columns:1fr}
  .raid-entry-card .raid-entry-icon{width:64px;height:64px}
  .raid-boss-grid{grid-template-columns:1fr 1fr;gap:7px}
  .raid-boss-card{min-height:185px}
  .raid-boss-card img{height:105px}
  .raid-art{min-height:330px}
  .raid-art img{min-height:330px}
}

/* ===== idle-mandra-raid-cover-art ===== */
.raid-entry-card .raid-entry-cover{
  width:128px;
  height:96px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #9b7135;
  background:#080d13;
  box-shadow:
    0 10px 24px rgba(0,0,0,.40),
    0 0 0 1px rgba(226,188,98,.07),
    inset 0 0 18px rgba(209,158,73,.08);
}
.raid-entry-card .raid-entry-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 46%;
  transition:transform .28s ease,filter .28s ease;
}
.raid-entry-card:hover .raid-entry-cover img{
  transform:scale(1.035);
  filter:brightness(1.06);
}
@media(max-width:520px){
  .raid-entry-card .raid-entry-cover{
    width:100%;
    height:124px;
  }
  .raid-entry-card .raid-entry-cover img{
    object-position:center 43%;
  }
}

/* ===== idle-mandra-bestiary-id-cards ===== */
.bestiary-summary{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin-bottom:12px;flex-wrap:wrap;
}
.bestiary-summary .muted{max-width:720px}
.bestiary-tile{
  appearance:none;color:inherit;text-align:left;width:100%;padding:0;
  cursor:pointer;position:relative;transition:.16s ease;
}
.bestiary-tile:hover,.bestiary-tile:focus-visible{
  transform:translateY(-2px);
  border-color:#648aa2;
  box-shadow:0 8px 20px rgba(0,0,0,.26);
  outline:none;
}
.bestiary-tile::after{
  content:"⌕";position:absolute;top:7px;right:7px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(3,12,19,.82);border:1px solid rgba(255,255,255,.14);
  font-size:13px;color:#d4bd7c;
}
.bestiary-tile .bestiary-mini-meta{
  display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;
}
.bestiary-mini-pill{
  font-size:9px;padding:2px 6px;border-radius:999px;
  border:1px solid #31546b;background:#0a1b29;color:#9eb6c5;
}
.bestiary-mini-pill.tier{color:#e8cb77;border-color:#80652e}
.bestiary-id-backdrop{
  position:fixed;inset:0;z-index:1600;
  background:rgba(0,0,0,.78);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.bestiary-id-card{
  width:min(760px,100%);max-height:90vh;overflow:auto;
  border:1px solid #456a80;border-radius:18px;
  background:linear-gradient(160deg,#0c2030,#07131e 72%);
  box-shadow:0 28px 90px rgba(0,0,0,.62);
}
.bestiary-id-hero{
  position:relative;height:310px;overflow:hidden;border-radius:18px 18px 0 0;
  background:#06121b;
}
.bestiary-id-hero img{width:100%;height:100%;object-fit:cover;display:block}
.bestiary-id-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(3,10,15,.92) 100%);
}
.bestiary-id-title{
  position:absolute;left:18px;right:58px;bottom:16px;z-index:2;
}
.bestiary-id-title h2{font-size:26px;margin:2px 0 4px}
.bestiary-id-close{
  position:absolute;z-index:3;top:12px;right:12px;
  width:38px;height:38px;border-radius:50%;border:1px solid #607f91;
  background:rgba(5,17,26,.9);color:#fff;cursor:pointer;font-size:18px;
}
.bestiary-id-body{padding:18px}
.bestiary-id-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
}
.bestiary-id-stat{
  padding:11px;border:1px solid #29495e;border-radius:11px;background:#081824;
}
.bestiary-id-stat small{display:block;color:#809bac;font-size:10px}
.bestiary-id-stat b{display:block;margin-top:3px;font-size:14px}
.bestiary-counter-list{display:grid;gap:7px;margin-top:10px}
.bestiary-counter{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:10px 12px;border:1px solid #2a4a60;border-radius:10px;background:#081824;
}
.bestiary-counter strong{font-size:13px}
.bestiary-counter span{color:#d9bd68;font-weight:900}
.bestiary-tip{
  margin-top:12px;padding:11px 12px;border-radius:10px;
  border:1px solid #5e512c;background:#17160e;color:#c9c0a3;font-size:12px;
}
@media(max-width:650px){
  .bestiary-id-hero{height:240px}
  .bestiary-id-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bestiary-id-title h2{font-size:21px}
}

/* ===== idle-mandra-floor-900 ===== */
.floor-wrap{display:grid;gap:12px}
.floor-hero{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr);
  gap:14px;align-items:stretch;
}
.floor-monster-art{
  position:relative;overflow:hidden;border-radius:15px;min-height:410px;
  border:1px solid #3d596b;background:#07131d;
}
.floor-monster-art img{width:100%;height:100%;min-height:410px;object-fit:cover;display:block}
.floor-monster-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(1,8,13,.88) 100%);
}
.floor-monster-label{position:absolute;z-index:2;left:15px;right:15px;bottom:14px}
.floor-monster-label h2{margin:3px 0 5px;font-size:25px}
.floor-panel{display:flex;flex-direction:column;gap:10px}
.floor-progress{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px
}
.floor-kpi{
  padding:11px;border:1px solid #29475a;border-radius:10px;background:#071722
}
.floor-kpi small{display:block;color:#7894a6;font-size:10px}
.floor-kpi b{display:block;margin-top:3px;font-size:15px}
.floor-attack{min-height:58px;font:900 17px Cinzel}
.floor-roster{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px
}
.floor-roster-item{
  position:relative;overflow:hidden;border-radius:8px;
  border:1px solid #29475a;background:#07141e;aspect-ratio:1/1
}
.floor-roster-item img{width:100%;height:100%;object-fit:cover;display:block;opacity:.68}
.floor-roster-item.current{border-color:#d3a54d;box-shadow:0 0 0 1px rgba(211,165,77,.18)}
.floor-roster-item.current img{opacity:1}
.floor-roster-item span{
  position:absolute;right:3px;bottom:3px;
  min-width:18px;height:18px;border-radius:999px;padding:0 4px;
  display:grid;place-items:center;background:rgba(2,9,14,.88);
  color:#dfca8b;font-size:9px;font-weight:900
}
.floor-complete{
  padding:15px;border:1px solid #5b7b55;border-radius:11px;
  background:#0b1c14;text-align:center
}
@media(max-width:900px){
  .floor-hero{grid-template-columns:1fr}
  .floor-monster-art,.floor-monster-art img{min-height:350px}
}
@media(max-width:600px){
  .floor-progress{grid-template-columns:1fr 1fr}
  .floor-roster{grid-template-columns:repeat(5,minmax(0,1fr))}
  .floor-monster-art,.floor-monster-art img{min-height:320px}
}

/* ===== idle-mandra-step10-class-portrait-final ===== */
/* =========================================================
   STEP 10 - immagini classe
   1) Strega: selezione = figura intera
   2) Profilo/Eroe: tutte le 10 classi usano lo stesso taglio
      "portrait" della Strega dell'Ombra
   ========================================================= */

/* --- PROFILO + SCHEDA EROE: stesso trattamento per TUTTE le classi --- */
.character-art-wrap .class-art-panel,
.rpg-portrait .banner-frame .class-art-panel{
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}

.character-art-wrap .class-art-panel .class-art-image,
.rpg-portrait .banner-frame .class-art-panel .class-art-image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 40%!important;
  transform:none!important;
  margin:0!important;
}

/* Strega dell'Ombra: regole finali nel blocco idle-mandra-shadow-witch-match-other-classes-final. */

/* ===== idle-mandra-shadow-witch-match-other-classes-final ===== */
/* =========================================================
   STREGA DELL'OMBRA
   Usa ESATTAMENTE le stesse dimensioni/riempimento delle altre classi.
   L'asset è già 3:4 (1086x1448), quindi nella selezione entra perfettamente.
   ========================================================= */

/* SELEZIONE CLASSE: identica geometria alle altre 9 classi */
body.class-selection-mode .class-carousel
.class-card[data-selected-class="shadow_witch"] >
.class-art-panel[data-class-art="shadow_witch"]{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:3 / 4!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  display:block!important;
}

body.class-selection-mode .class-carousel
.class-card[data-selected-class="shadow_witch"] >
.class-art-panel[data-class-art="shadow_witch"] .class-art-image{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))!important;
}

/* SCHEDA EROE: stessa resa delle altre classi */
.rpg-portrait .banner-frame >
.class-art-panel[data-class-art="shadow_witch"]{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  display:block!important;
}
.rpg-portrait .banner-frame >
.class-art-panel[data-class-art="shadow_witch"] .class-art-image{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 44%!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}

/* PROFILO: stessa resa delle altre classi */
.character-art-wrap >
.class-art-panel[data-class-art="shadow_witch"]{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  display:block!important;
}
.character-art-wrap >
.class-art-panel[data-class-art="shadow_witch"] .class-art-image{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 44%!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}

/* Nessuna dimensione speciale mobile: eredita le stesse regole
   delle altre classi, compreso il rapporto 3:4. */
@media(max-width:700px){
  body.class-selection-mode .class-carousel
  .class-card[data-selected-class="shadow_witch"] >
  .class-art-panel[data-class-art="shadow_witch"]{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:3 / 4!important;
    padding:0!important;
  }
}

/* ===== idle-mandra-step12-final ===== */
/* Posizionamento Social consolidato in idle-mandra-step16-final. */

/* Tap combattimento consolidato: il gesto iniziato sul pulsante resta del pulsante. */
#attackBtn,#floorAttackBtn,#raidAttackBtn,#timeTrialAttackBtn,#timeTrialStartBtn,#startRaidBtn,#clanBossAttackBtn{
  touch-action:none!important;
  -ms-touch-action:none!important;
  -webkit-tap-highlight-color:transparent!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  cursor:pointer;
}
#floorAttackBtn,#raidAttackBtn,#timeTrialAttackBtn,#timeTrialStartBtn,#startRaidBtn,#clanBossAttackBtn{pointer-events:auto!important;}
#attackBtn:active{transform:scale(.985);}
#floorAttackBtn:active,#raidAttackBtn:active,#timeTrialAttackBtn:active,#timeTrialStartBtn:active,#startRaidBtn:active,#clanBossAttackBtn:active{
  transform:none!important;
  filter:brightness(1.18)!important;
}

/* ===========================
   TIME TRIAL
   =========================== */
.time-trial-shell{display:grid;gap:12px}
.time-trial-main{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:14px}
.time-trial-art{position:relative;min-height:390px;border-radius:15px;overflow:hidden;border:1px solid #34566d;background:#06131d}
.time-trial-art img{width:100%;height:100%;min-height:390px;display:block;object-fit:cover}
.time-trial-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,8,14,.94) 100%);pointer-events:none}
.time-trial-name{position:absolute;z-index:2;left:16px;right:16px;bottom:14px}
.time-trial-name h2{margin:3px 0 5px}
.time-trial-timer{font:900 38px Cinzel;color:#f2cf72;text-align:center;margin:5px 0;text-shadow:0 0 14px rgba(242,207,114,.24)}
.time-trial-timer.danger{color:#ff6860;animation:ttPulse .8s ease-in-out infinite}
@keyframes ttPulse{50%{transform:scale(1.035)}}
.time-trial-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.time-trial-kpi{padding:10px;border:1px solid #29475a;border-radius:10px;background:#071722}
.time-trial-kpi small{display:block;color:#7995a6;font-size:9px}
.time-trial-kpi b{display:block;margin-top:3px}
.time-trial-roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.time-trial-roster>div{position:relative;overflow:hidden;border-radius:9px;border:1px solid #29475a;aspect-ratio:1/1}
.time-trial-roster img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62}
.time-trial-roster .current{border-color:#e1bd61;box-shadow:0 0 0 1px rgba(225,189,97,.18)}
.time-trial-roster .current img{opacity:1}
@media(max-width:850px){.time-trial-main{grid-template-columns:1fr}.time-trial-art,.time-trial-art img{min-height:330px}}
@media(max-width:560px){.time-trial-roster{grid-template-columns:repeat(3,minmax(0,1fr))}.time-trial-timer{font-size:32px}}

/* ===========================
   BOSS CLAN
   =========================== */
.clan-boss-live{display:grid;gap:12px}
.clan-boss-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:14px}
.clan-boss-art{position:relative;min-height:390px;overflow:hidden;border-radius:15px;border:1px solid #544225;background:#07131d}
.clan-boss-art img{width:100%;height:100%;min-height:390px;object-fit:cover;display:block}
.clan-boss-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(2,8,14,.95) 100%);pointer-events:none}
.clan-boss-caption{position:absolute;z-index:2;left:16px;right:16px;bottom:15px}
.clan-boss-caption h2{margin:3px 0 5px}
.clan-boss-status{min-height:18px;color:#8ca6b5;font-size:10px;margin-top:7px}
.clan-boss-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.clan-boss-contrib{display:grid;gap:7px}
.clan-boss-contrib .small-item strong{color:#e7ce83}
@media(max-width:850px){.clan-boss-main{grid-template-columns:1fr}.clan-boss-art,.clan-boss-art img{min-height:330px}}

/* ===== idle-mandra-step13-social-ranking-final ===== */
/* Posizionamento Social consolidato in idle-mandra-step16-final. */

/* =========================================================
   CLASSIFICHE - evidenzia il giocatore e il suo Clan
   ========================================================= */
.table tr.rank-current-player > td,
.table tr.rank-current-clan > td{
  background:
    linear-gradient(90deg,rgba(226,188,98,.16),rgba(226,188,98,.05))!important;
  border-top:1px solid rgba(226,188,98,.48)!important;
  border-bottom:1px solid rgba(226,188,98,.48)!important;
}
.table tr.rank-current-player > td:first-child,
.table tr.rank-current-clan > td:first-child{
  box-shadow:inset 3px 0 0 #e2bc62;
}
.table tr.rank-current-player .rank-player-info strong,
.table tr.rank-current-clan .rank-player-info strong{
  color:#f3d985!important;
  text-shadow:0 0 12px rgba(226,188,98,.18);
}
.rank-you-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:7px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(226,188,98,.55);
  background:rgba(226,188,98,.12);
  color:#f0d27a;
  font-size:8px;
  font-weight:900;
  letter-spacing:.7px;
  vertical-align:middle;
  white-space:nowrap;
}

/* ===== idle-mandra-step14-global-chat-box-final ===== */
/* =========================================================
   CITTÀ > SOCIAL
   Clan sopra - Lista Amici sotto - Chat Globale a destra.
   Chat Globale torna ad avere un vero riquadro con nome,
   ma su telefono viene spostata leggermente in basso a destra
   per non sovrapporsi al pulsante AVVENTURA/libro.
   ========================================================= */

.city-radial-mode .city-radial-group.gilda.open{
  z-index:70!important;
}

/* Desktop: riquadro standard come gli altri */
.city-radial-mode .gilda .city-sub-destination:nth-child(3){
  --tx:132px!important;
  --ty:0px!important;
  width:158px!important;
  min-width:158px!important;
  max-width:158px!important;
  min-height:54px!important;
  height:auto!important;
  padding:9px 12px!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
}

.city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy{
  display:block!important;
  min-width:0!important;
  flex:1!important;
}
.city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy b{
  display:block!important;
  white-space:nowrap!important;
}
.city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy small{
  display:block!important;
}

/* Tablet */
@media(max-width:900px){
  .city-radial-mode .gilda .city-sub-destination:nth-child(3){
    --tx:118px!important;
    --ty:24px!important;
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    min-height:48px!important;
    padding:7px 9px!important;
  }
}

/* Telefono:
   riquadro completo ma più compatto e diagonale in basso a destra,
   così resta visibile e non copre il libro. */
@media(max-width:700px){
  .city-radial-mode .gilda .city-sub-destination:nth-child(3){
    --tx:72px!important;
    --ty:50px!important;

    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    min-height:44px!important;
    height:44px!important;
    padding:6px 7px!important;
    border-radius:9px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    z-index:75!important;
  }

  .city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-icon{
    width:27px!important;
    height:27px!important;
    flex:0 0 27px!important;
    font-size:15px!important;
    margin:0!important;
  }

  .city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy{
    display:block!important;
    flex:1!important;
    min-width:0!important;
  }

  .city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy b{
    display:block!important;
    font-size:8px!important;
    line-height:1.05!important;
    white-space:normal!important;
    color:#f0d58f!important;
  }

  /* Su telefono nascondiamo solo la descrizione piccola,
     il riquadro e la scritta Chat Globale restano ben visibili. */
  .city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy small{
    display:none!important;
  }
}

@media(max-width:420px){
  .city-radial-mode .gilda .city-sub-destination:nth-child(3){
    --tx:65px!important;
    --ty:48px!important;
    width:100px!important;
    min-width:100px!important;
    max-width:100px!important;
  }
}

/* ===== idle-mandra-step15-final ===== */
/* Posizionamento Social consolidato in idle-mandra-step16-final. */

/* Missioni: il badge non deve cambiare geometria/posizione dello slot */
.city-radial-mode .personaggio .city-sub-destination:nth-child(4){box-sizing:border-box!important}
.city-radial-mode .personaggio .city-sub-destination:nth-child(4) .im-notify-badge{
  position:absolute!important;top:4px!important;right:5px!important;margin:0!important;z-index:6!important
}
.city-radial-mode .personaggio .city-sub-destination:nth-child(4).im-notify::after{display:none!important}
.city-radial-mode .personaggio .city-sub-destination:nth-child(4) .city-sub-copy{
  min-width:0!important;padding-right:12px!important
}

/* Orologio EU */
.eu-clock-mini{margin-top:8px;text-align:center;color:#7895a6;font-size:9px;letter-spacing:.35px}
.eu-clock-mini b{color:#d8bf77}
.daily-reset-note{
  margin:0 0 12px;padding:8px 10px;border:1px solid #25465a;border-radius:8px;
  background:#071722;color:#819bab;font-size:10px
}
.daily-reset-note b{color:#e5ca7c}

/* Stato passiva live */
.passive-live{
  margin-top:8px;padding:7px 9px;border:1px solid #243f52;border-radius:8px;
  background:#061521;color:#8fa6b5;font-size:9px
}
.passive-live b{color:#d7c17c}
.passive-live.active{border-color:#5f723d;background:#0b1b12;color:#9ccaa2}

/* ===== idle-mandra-step16-final ===== */
/* =========================================================
   CITTÀ > SOCIAL
   Stesse identiche distanze del menu PERSONAGGIO (spade):
   sopra 74, sotto 74, destra 126.
   ========================================================= */
.city-radial-mode .gilda .city-sub-destination:nth-child(1){
  --tx:0px!important;--ty:-74px!important;
}
.city-radial-mode .gilda .city-sub-destination:nth-child(2){
  --tx:0px!important;--ty:74px!important;
}
.city-radial-mode .gilda .city-sub-destination:nth-child(3){
  --tx:126px!important;--ty:0px!important;
  width:154px!important;min-width:154px!important;max-width:154px!important;
  min-height:50px!important;height:auto!important;
  padding:8px 10px!important;
}
@media(max-width:900px){
  .city-radial-mode .gilda .city-sub-destination:nth-child(1){--tx:0px!important;--ty:-70px!important}
  .city-radial-mode .gilda .city-sub-destination:nth-child(2){--tx:0px!important;--ty:70px!important}
  .city-radial-mode .gilda .city-sub-destination:nth-child(3){
    --tx:118px!important;--ty:0px!important;
    width:148px!important;min-width:148px!important;max-width:148px!important;
    min-height:50px!important
  }
}
@media(max-width:560px){
  .city-radial-mode .gilda .city-sub-destination:nth-child(1){--tx:0px!important;--ty:-68px!important}
  .city-radial-mode .gilda .city-sub-destination:nth-child(2){--tx:0px!important;--ty:68px!important}
  .city-radial-mode .gilda .city-sub-destination:nth-child(3){
    --tx:106px!important;--ty:0px!important;
    width:128px!important;min-width:128px!important;max-width:128px!important;
    min-height:46px!important;padding:7px 9px!important
  }
  .city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy{display:block!important}
  .city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy b{font-size:10px!important;white-space:nowrap!important}
  .city-radial-mode .gilda .city-sub-destination:nth-child(3) .city-sub-copy small{display:none!important}
}

/* Bestiario consolidato nei blocchi STEP 29/30. */

/* =========================================================
   MISSIONI
   ========================================================= */
.daily-mission-count{
  display:inline-flex;align-items:center;gap:5px;
  margin-left:7px;padding:3px 7px;border:1px solid #49657a;
  border-radius:999px;background:#091c29;color:#d7c178;
  font-size:9px;font-weight:900
}
.permanent-intro{
  margin-bottom:12px;padding:9px 11px;border:1px solid #51472c;
  border-radius:9px;background:#15140d;color:#bdb397;font-size:10px
}

/* =========================================================
   TORNEO SETTIMANALE
   ========================================================= */
.tournament-shell{display:grid;gap:13px}
.tournament-hero{
  position:relative;overflow:hidden;padding:18px;
  border:1px solid #755f28;border-radius:15px;
  background:
    radial-gradient(circle at 50% -10%,rgba(224,188,91,.20),transparent 40%),
    linear-gradient(160deg,#172331,#07131d 72%);
  box-shadow:0 16px 38px rgba(0,0,0,.30)
}
.tournament-hero:before{
  content:"🏆";position:absolute;right:18px;top:4px;
  font-size:74px;opacity:.08;filter:grayscale(.2)
}
.tournament-hero h2{margin:4px 0 6px;font-size:25px}
.tournament-rewards{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;margin-top:12px
}
.tournament-prize{
  padding:8px 6px;border:1px solid #3e4c55;border-radius:9px;
  background:#081722;text-align:center
}
.tournament-prize b{display:block;color:#d9c16f;font-size:12px}
.tournament-prize small{color:#7f99a9;font-size:8px}

.tournament-podium{
  display:grid;grid-template-columns:1fr 1.13fr 1fr;
  align-items:end;gap:10px;margin-top:4px
}
.tournament-podium-card{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid #405b6d;border-radius:14px;
  background:linear-gradient(180deg,#102433,#07141e);
  padding:14px 9px 12px;min-height:182px
}
.tournament-podium-card.first{
  min-height:220px;border-color:#b4943c;
  background:linear-gradient(180deg,#2b2714,#0a1922);
  box-shadow:0 0 26px rgba(215,179,79,.13)
}
.tournament-podium-card.second{border-color:#75818a}
.tournament-podium-card.third{border-color:#805638}
.tournament-podium-place{
  font:900 28px Cinzel;color:#d8be68;margin-bottom:7px
}
.tournament-podium-card.second .tournament-podium-place{color:#bfc7ca}
.tournament-podium-card.third .tournament-podium-place{color:#c58b60}
.tournament-podium-card .rank-frame{
  margin:0 auto 7px;width:66px;height:66px
}
.tournament-podium-card.first .rank-frame{width:82px;height:82px}
.tournament-podium-card h3{
  margin:5px 0 2px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.tournament-podium-score{font-weight:900;color:#e5ca76;font-size:15px}
.tournament-podium-reward{margin-top:5px;color:#71c9ff;font-weight:900;font-size:11px}
.tournament-podium-card.is-me{
  outline:2px solid rgba(225,190,94,.62);
  outline-offset:2px
}
.tournament-list .rank-current-player td{
  background:linear-gradient(90deg,rgba(226,188,98,.17),rgba(226,188,98,.04))!important
}
.tournament-status{
  min-height:17px;margin-top:8px;color:#819cab;font-size:9px
}
@media(max-width:700px){
  .tournament-hero h2{font-size:20px}
  .tournament-rewards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tournament-podium{gap:5px}
  .tournament-podium-card{padding:10px 5px;min-height:158px}
  .tournament-podium-card.first{min-height:185px}
  .tournament-podium-card .rank-frame{width:49px;height:49px}
  .tournament-podium-card.first .rank-frame{width:58px;height:58px}
  .tournament-podium-card h3{font-size:10px}
  .tournament-podium-score{font-size:12px}
  .tournament-podium-place{font-size:21px}
}

/* ===== idle-mandra-step17-final ===== */
/* Bestiario: regole immagini consolidate nel blocco dedicato. */

/* =========================================================
   TORNEO - azioni Riscatta / Reward
   ========================================================= */
.tournament-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}
.tournament-actions .btn{
  min-width:128px;
}
.tournament-claim-info{
  margin-top:8px;
  color:#8da2af;
  font-size:9px;
}
.tournament-claim-info strong{color:#e5ca77}

.tournament-reward-backdrop{
  position:fixed;
  inset:0;
  z-index:2200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.80);
  backdrop-filter:blur(7px);
}
.tournament-reward-modal{
  width:min(620px,100%);
  max-height:88vh;
  overflow:auto;
  border:1px solid #806a32;
  border-radius:16px;
  background:linear-gradient(160deg,#132536,#07131d 72%);
  box-shadow:0 28px 90px rgba(0,0,0,.65);
  padding:18px;
}
.tournament-reward-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.tournament-reward-head h2{margin:3px 0}
.tournament-reward-close{
  width:38px;height:38px;border-radius:50%;
  border:1px solid #6a7f8d;background:#071722;color:#fff;
  cursor:pointer;font-size:17px
}
.tournament-reward-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.tournament-reward-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid #304c5e;
  border-radius:10px;
  background:#081824;
}
.tournament-reward-row.top3{
  border-color:#75602e;
  background:linear-gradient(90deg,rgba(211,176,77,.10),#081824);
}
.tournament-reward-row b{color:#e1c66e}
.tournament-reward-row span{color:#70c8ff;font-weight:900}
@media(max-width:560px){
  .tournament-actions{display:grid;grid-template-columns:1fr 1fr}
  .tournament-actions .btn{min-width:0;width:100%}
  .tournament-reward-grid{grid-template-columns:1fr}
}

/* ===== idle-mandra-step18-final ===== */
/* Torneo: il tasto resta visivamente spento finché non esiste
   realmente un premio del ciclo precedente da riscattare. */
#tournamentClaimBtn:disabled{
  opacity:.38!important;
  filter:grayscale(.72)!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}
#tournamentClaimBtn:not(:disabled){
  opacity:1!important;
}

/* ===== idle-mandra-step20-combat-fx ===== */
/* =========================================================
   COMBATTIMENTO UNIFICATO
   Il tasto ATTACCA vive dentro l'immagine del mostro,
   come nella Home, in TimeTrial / Floor / Raid / Boss Clan.
   ========================================================= */
.combat-art-shell{
  position:relative!important;
  isolation:isolate!important;
}

/* FIX TOUCH DUNGEON/RAID
   Tutto ciò che è puramente grafico nell'arena NON può intercettare il dito.
   Il pulsante resta l'unico layer interattivo nella fascia inferiore. */
.combat-art-shell > img,
.combat-art-shell > .time-trial-name,
.combat-art-shell > .floor-monster-label,
.combat-art-shell > .raid-art-label,
.combat-art-shell > .clan-boss-caption{
  pointer-events:none!important;
  -webkit-user-drag:none!important;
  user-select:none!important;
}
.combat-art-shell::before,
.combat-art-shell::after{
  pointer-events:none!important;
}
.combat-overlay-attack{
  position:absolute!important;
  left:11%!important;
  right:11%!important;
  bottom:14px!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
  z-index:40!important;
  pointer-events:auto!important;

  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  padding:0 18px!important;
  box-sizing:border-box!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border-radius:999px!important;
  border:1px solid #d1a651!important;
  background:linear-gradient(180deg,#b18132 0%,#72501d 100%)!important;
  color:#fff3c5!important;

  font-family:Cinzel,serif!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.5px!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;

  box-shadow:
    inset 0 1px 0 rgba(255,244,194,.35),
    inset 0 -2px 0 rgba(64,33,5,.38),
    0 5px 18px rgba(0,0,0,.54),
    0 0 15px rgba(220,177,84,.16)!important;

  touch-action:none!important;
  -ms-touch-action:none!important;
  overscroll-behavior:contain!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;

  /* La posizione non viene mai animata: niente "salti" durante tap ripetuti. */
  transition:filter .10s ease,box-shadow .12s ease,background .12s ease!important;
  will-change:filter!important;
}
.combat-overlay-attack:hover{
  filter:brightness(1.08)!important;
}
.combat-overlay-attack:active{
  transform:none!important;
  translate:none!important;
  scale:1!important;
  filter:brightness(1.18)!important;
}
.combat-overlay-attack:disabled{
  opacity:.48!important;
  filter:grayscale(.65)!important;
  cursor:not-allowed!important;
}
.combat-overlay-attack.tap-hit{
  transform:none!important;
  translate:none!important;
  scale:1!important;
  filter:brightness(1.45)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,194,.42),
    inset 0 -2px 0 rgba(64,33,5,.35),
    0 5px 18px rgba(0,0,0,.54),
    0 0 24px rgba(239,196,101,.42)!important;
}


.combat-overlay-attack.touch-pressed{
  transform:none!important;
  translate:none!important;
  scale:1!important;
  filter:brightness(1.22)!important;
}

/* Spostiamo le didascalie sopra al pulsante */
.time-trial-name,
.floor-monster-label,
.raid-art-label,
.clan-boss-caption{
  bottom:82px!important;
}

/* Il gradiente resta sotto al pulsante */
.time-trial-art:after,
.floor-monster-art::after,
.raid-art::after,
.clan-boss-art:after{
  z-index:1!important;
}
.time-trial-name,
.floor-monster-label,
.raid-art-label,
.clan-boss-caption{
  z-index:3!important;
}

/* Animazione di impatto comune a tutti i mostri */
[data-combat-art].hit-flash{
  animation:monsterHit .24s ease-out!important;
}
[data-combat-art].crit-flash{
  animation:monsterCrit .5s ease-out!important;
}
[data-combat-art].auto-crit-flash{
  animation:monsterAutoCrit .5s ease-out!important;
}

@media(max-width:700px){
  .combat-overlay-attack{
    left:8%!important;
    right:8%!important;
    width:auto!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    padding:0 12px!important;
    font-size:11px!important;
    bottom:10px!important;
    transform:none!important;
    translate:none!important;
    scale:1!important;
  }
  .time-trial-name,
  .floor-monster-label,
  .raid-art-label,
  .clan-boss-caption{
    bottom:74px!important;
  }
}

/* ===== idle-mandra-step21-touch-raid ===== */
/* =========================================================
   ATTACCO MOBILE
   Se il dito parte da un pulsante ATTACCA, un piccolo movimento
   NON può trascinare/scorrere la pagina.
   ========================================================= */
#attackBtn{
  touch-action:none!important;
  -ms-touch-action:none!important;
  overscroll-behavior:contain!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
#timeTrialAttackBtn,
#timeTrialStartBtn,
#floorAttackBtn,
#raidAttackBtn,
#startRaidBtn,
#clanBossAttackBtn{
  touch-action:none!important;
  -ms-touch-action:none!important;
  overscroll-behavior:contain!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
  pointer-events:auto!important;
}

/* =========================================================
   RAID - ANTEPRIME BOSS
   Tutti i banner usano esattamente il rapporto originale
   1024×559. Il Corvo non viene più ritagliato.
   ========================================================= */
.raid-boss-card img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1024 / 559!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
}
@media(max-width:560px){
  .raid-boss-card img{
    height:auto!important;
    aspect-ratio:1024 / 559!important;
  }
}

/* ===== idle-mandra-step23-raid-banner-fill ===== */
/* =========================================================
   RAID - tutte le creature devono riempire il banner anteprima
   ========================================================= */
.raid-boss-card{
  overflow:hidden!important;
}
.raid-boss-card img{
  width:100%!important;
  height:132px!important;
  min-height:132px!important;
  max-height:132px!important;
  object-fit:cover!important;
  object-position:center center!important;
  aspect-ratio:auto!important;
  display:block!important;
  transform:scale(1.02)!important;
  filter:saturate(.94) contrast(1.05)!important;
}
@media(max-width:900px){
  .raid-boss-card img{
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
  }
}
@media(max-width:560px){
  .raid-boss-card img{
    height:105px!important;
    min-height:105px!important;
    max-height:105px!important;
  }
}

/* ===== idle-mandra-step25-corvo-same-as-leviathan ===== */
/* =========================================================
   CORVO DEL PORTALE = STESSE IDENTICHE MISURE DEL LEVIATANO
   Entrambi gli asset originali sono 1024 × 559.
   Qui il Corvo usa ESATTAMENTE le stesse regole degli altri
   banner Raid, senza più scaling speciale in altezza.
   ========================================================= */
.raid-boss-card img[src*="raid_corvo_portale.webp"]{
  width:100%!important;
  height:132px!important;
  min-height:132px!important;
  max-height:132px!important;

  object-fit:cover!important;
  object-position:center center!important;
  aspect-ratio:auto!important;

  display:block!important;
  transform:scale(1.02)!important;
  transform-origin:center center!important;

  filter:saturate(.94) contrast(1.05)!important;
}

@media(max-width:900px){
  .raid-boss-card img[src*="raid_corvo_portale.webp"]{
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
    object-position:center center!important;
    transform:scale(1.02)!important;
  }
}

@media(max-width:560px){
  .raid-boss-card img[src*="raid_corvo_portale.webp"]{
    height:105px!important;
    min-height:105px!important;
    max-height:105px!important;
    object-position:center center!important;
    transform:scale(1.02)!important;
  }
}

/* ===== idle-mandra-bestiary-image-consolidated ===== */
/* Una sola immagine reale per creatura: niente background duplicato sotto l'IMG. */
.gallery{align-items:start!important;}
.bestiary-tile{
  display:flex!important;flex-direction:column!important;align-self:start!important;
  height:auto!important;min-height:0!important;
}
.bestiary-banner-v29{
  position:relative!important;flex:0 0 auto!important;width:100%!important;
  aspect-ratio:1024 / 559!important;overflow:hidden!important;
  background:#06121b!important;isolation:isolate!important;
}
.bestiary-banner-v29::before{display:none!important;content:none!important;}
.bestiary-banner-v29 > img{
  position:static!important;display:block!important;width:100%!important;height:100%!important;
  min-height:0!important;max-height:none!important;object-fit:cover!important;
  object-position:center center!important;transform:none!important;background:transparent!important;
}
.bestiary-tile .tile-body{flex:0 0 auto!important;height:auto!important;min-height:0!important;align-self:stretch!important;}
.bestiary-tile .bestiary-mini-meta{align-content:flex-start!important;}
.bestiary-id-hero{background:#06121b!important;background-image:none!important;}
.bestiary-id-hero::before{display:none!important;content:none!important;}
.bestiary-id-hero > img{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:contain!important;object-position:center center!important;
  background:#06121b!important;transform:none!important;
}
@media(max-width:900px){.gallery{align-items:start!important}.bestiary-tile{align-self:start!important;height:auto!important}}

/* ===== idle-mandra-step36-mission-immobile ===== */
/* STEP36 — Missioni resta ESATTAMENTE nella posizione normale anche con badge. */
/* Usiamo data-city-page invece di nth-child, così il fix non dipende dall'ordine HTML. */

.city-radial-mode [data-city-page="missions"]{
  --tx:0px!important;
  --ty:74px!important;
  box-sizing:border-box!important;
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  animation:none!important;
  filter:none!important;
  overflow:visible!important;
}

/* La posizione è la stessa regola di un normale sottomenu aperto. */
.city-radial-mode .city-radial-group.open [data-city-page="missions"]{
  transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(1)!important;
}

/* Il contatore è solo un overlay: zero spazio occupato nel banner. */
.city-radial-mode [data-city-page="missions"] > .city-slot-notify{
  position:absolute!important;
  top:3px!important;
  right:4px!important;
  margin:0!important;
  z-index:30!important;
  pointer-events:none!important;
}

/* Nessun vecchio pallino ::after può comparire su Missioni. */
.city-radial-mode [data-city-page="missions"]::after{
  display:none!important;
  content:none!important;
}

@media(max-width:900px){
  .city-radial-mode [data-city-page="missions"]{
    --ty:70px!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
  }
}

@media(max-width:560px){
  .city-radial-mode [data-city-page="missions"]{
    --ty:68px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
  }
  .city-radial-mode [data-city-page="missions"] > .city-slot-notify{
    top:2px!important;
    right:3px!important;
  }
}

/* ===== idle-mandra-wiki-v1 ===== */
/* ARCHIVIO CITTÀ: Bestiario sopra al libro, Wiki sotto al libro */
.city-radial-mode .avventura .city-sub-destination:nth-child(1){--tx:0!important;--ty:-76px!important;}
.city-radial-mode .avventura .city-sub-destination:nth-child(2){--tx:0!important;--ty:76px!important;}

.wiki-shell{display:grid;gap:14px;max-width:1180px;margin:0 auto;}
.wiki-search-card{position:relative;z-index:1;padding:14px;background:linear-gradient(145deg,rgba(9,25,39,.98),rgba(6,17,27,.98));border:1px solid #23465f;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.wiki-search-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;}
.wiki-search-icon{width:42px;height:42px;border:1px solid #315774;border-radius:10px;display:grid;place-items:center;background:#071522;color:#e2c671;font-size:19px}
.wiki-search{width:100%;min-width:0;height:42px;border:1px solid #315774;border-radius:10px;background:#06131f;color:#edf4f8;padding:0 13px;outline:none}
.wiki-search:focus{border-color:#b18c4b;box-shadow:0 0 0 3px rgba(226,188,98,.08)}
.wiki-count{font-size:10px;color:#7894a6;white-space:nowrap}
.wiki-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wiki-section{padding:16px;border:1px solid #1b425c;border-radius:12px;background:linear-gradient(145deg,#091a29,#06121d);min-width:0}
.wiki-section.hidden{display:none!important}
.wiki-section h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:17px;color:#e9ce83}
.wiki-section h3{margin:13px 0 6px;color:#d9c077;font-size:13px}
.wiki-section p,.wiki-section li{color:#9ab0bc;font-size:12px;line-height:1.55}
.wiki-section ul{margin:7px 0 0;padding-left:19px}
.wiki-section .wiki-key{display:inline-flex;margin:4px 5px 0 0;padding:4px 7px;border:1px solid #294c64;border-radius:999px;background:#071522;color:#aac1cf;font-size:9px;font-weight:800}
.wiki-empty{display:none;padding:28px;text-align:center;border:1px dashed #315774;border-radius:12px;color:#7894a6;background:#071522}
.wiki-empty.show{display:block}
.wiki-jump{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.wiki-jump button{border:1px solid #294c64;background:#071522;color:#aac1cf;border-radius:999px;padding:6px 9px;font-size:9px;cursor:pointer}
.wiki-jump button:hover{border-color:#b18c4b;color:#f0d27a}

.wiki-section.wiki-wide{grid-column:1/-1}
.wiki-intro-banner{padding:16px;border:1px solid rgba(209,166,81,.38);border-radius:12px;background:linear-gradient(135deg,rgba(177,140,75,.12),rgba(7,21,34,.62));margin-bottom:10px}
.wiki-intro-banner b{color:#f0d58b}
.wiki-callout{margin:10px 0;padding:10px 12px;border-left:3px solid #b18c4b;background:rgba(177,140,75,.08);border-radius:0 8px 8px 0;color:#a9bdc8;font-size:11px;line-height:1.55}
.wiki-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.wiki-stat{padding:10px;border:1px solid #294c64;border-radius:9px;background:#071522}
.wiki-stat small{display:block;color:#7894a6;font-size:8px;font-weight:900;letter-spacing:.65px;text-transform:uppercase}
.wiki-stat b{display:block;margin-top:4px;color:#e6cc82;font-size:13px}
.wiki-table-wrap{overflow:auto;margin-top:10px;border:1px solid #1b425c;border-radius:10px}
.wiki-table{width:100%;border-collapse:collapse;min-width:560px;background:rgba(4,15,24,.42)}
.wiki-table th,.wiki-table td{padding:9px 10px;border-bottom:1px solid rgba(41,76,100,.55);text-align:left;font-size:10px;vertical-align:top}
.wiki-table th{color:#e5c878;background:#071522;font-family:Cinzel,serif;font-size:9px;letter-spacing:.45px;white-space:nowrap}
.wiki-table td{color:#9fb4c0;line-height:1.45}
.wiki-table tr:last-child td{border-bottom:0}
.wiki-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.wiki-class-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:11px;border:1px solid #294c64;border-radius:11px;background:linear-gradient(145deg,#071522,#081a28);min-width:0}
.wiki-class-art{width:88px;height:112px;border-radius:9px;overflow:hidden;border:1px solid rgba(177,140,75,.32);background:#06121b}
.wiki-class-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.wiki-class-main{min-width:0}
.wiki-class-main h3{margin:0 0 3px!important;font-size:14px!important}
.wiki-class-tag{display:inline-flex;padding:3px 7px;border:1px solid #294c64;border-radius:999px;color:#9fb8c6;font-size:8px;font-weight:800;margin-bottom:6px}
.wiki-class-main p{margin:4px 0!important}
.wiki-class-bonuses{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.wiki-class-bonuses span{padding:3px 6px;border-radius:999px;background:rgba(177,140,75,.09);border:1px solid rgba(177,140,75,.24);color:#d9c27e;font-size:8px;font-weight:800}
.wiki-class-detail{margin-top:5px;padding-top:5px;border-top:1px solid rgba(41,76,100,.42);font-size:9px;line-height:1.45;color:#91a9b7}
.wiki-class-detail b{color:#cdb777}
.wiki-reset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.wiki-reset-item{padding:9px 10px;border:1px solid #294c64;border-radius:9px;background:#071522}
.wiki-reset-item b{display:block;color:#dcc477;font-size:10px}
.wiki-reset-item span{display:block;color:#8ea6b4;font-size:9px;line-height:1.4;margin-top:3px}
.wiki-mini-list{display:grid;gap:6px;margin-top:8px}
.wiki-mini-row{padding:8px 9px;border:1px solid rgba(41,76,100,.58);border-radius:8px;background:rgba(7,21,34,.72);font-size:10px;color:#9fb4c0;line-height:1.45}
.wiki-mini-row b{color:#d9c078}
@media(max-width:900px){
  .wiki-class-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wiki-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wiki-class-card{grid-template-columns:72px minmax(0,1fr);gap:9px}
  .wiki-class-art{width:72px;height:96px}
  .wiki-reset-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .city-radial-mode .avventura .city-sub-destination:nth-child(1){--ty:-70px!important;}
  .city-radial-mode .avventura .city-sub-destination:nth-child(2){--ty:70px!important;}
  .wiki-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .city-radial-mode .avventura .city-sub-destination:nth-child(1){--ty:-66px!important;}
  .city-radial-mode .avventura .city-sub-destination:nth-child(2){--ty:66px!important;}
  .wiki-search-wrap{grid-template-columns:auto minmax(0,1fr)}
  .wiki-count{grid-column:1/-1;text-align:right}
  .wiki-search-card{padding:10px}
  .wiki-section{padding:13px}
}

/* ===== idle-mandra-nav-clean-final ===== */
/* Barra navigazione consolidata: 5 sigilli semplici, coerenti con il tema scuro/fantasy. */
nav#nav .nav-sep,nav#nav .nav-note{display:none!important;}
nav#nav .nav-btn{position:relative!important;}
nav#nav .nav-icon{display:grid!important;place-items:center!important;color:#d7b769!important;background:none!important;border:0!important;box-shadow:none!important;}
nav#nav .nav-icon svg{display:block!important;overflow:visible!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));}
nav#nav .nav-icon svg *{stroke-linecap:round!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke!important;}
nav#nav .nav-label{color:#cdbd98!important;font-family:Cinzel,serif!important;font-weight:700!important;text-transform:none!important;}
nav#nav .nav-btn.active .nav-icon,nav#nav .nav-btn.active .nav-label{color:#f0d88f!important;}
@media(max-width:900px){
  nav#nav{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:45!important;
    height:80px!important;min-height:80px!important;
    padding:5px 5px max(5px,env(safe-area-inset-bottom))!important;
    display:flex!important;gap:2px!important;align-items:center!important;
    background:linear-gradient(180deg,rgba(6,19,31,.99),rgba(5,15,24,.995))!important;
    border:0!important;border-top:1px solid rgba(29,66,91,.72)!important;
    box-shadow:0 -7px 22px rgba(0,0,0,.48),0 -1px 10px rgba(23,56,77,.28)!important;
    overflow:visible!important;
  }
  nav#nav::before{content:""!important;display:block!important;position:absolute!important;left:8%!important;right:8%!important;top:0!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(49,87,116,.34),rgba(214,178,111,.34),rgba(49,87,116,.34),transparent)!important;pointer-events:none!important;}
  nav#nav::after{display:none!important;content:none!important;}
  nav#nav .nav-btn,nav#nav .nav-btn:hover,nav#nav .nav-btn.active,nav#nav .nav-btn:focus,nav#nav .nav-btn:focus-visible{
    position:relative!important;flex:1 1 0!important;min-width:0!important;width:auto!important;height:70px!important;min-height:70px!important;
    margin:0!important;padding:4px 1px 2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;
    background:transparent!important;background-image:none!important;border:0!important;border-radius:12px!important;box-shadow:none!important;text-align:center!important;
    outline:0!important;-webkit-tap-highlight-color:transparent!important;-webkit-appearance:none!important;appearance:none!important;
    touch-action:manipulation!important;user-select:none!important;-webkit-user-select:none!important;
    transform:none!important;transition:transform .16s ease,background .16s ease!important;
  }
  nav#nav .nav-icon{
    display:grid!important;opacity:1!important;pointer-events:none!important;
    width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:50%!important;
    color:#89a5b7!important;
    border:1px solid rgba(42,74,96,.82)!important;
    background:radial-gradient(circle at 50% 35%,rgba(18,48,68,.72),rgba(7,21,34,.96) 68%)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 3px 8px rgba(0,0,0,.42)!important;
    transition:transform .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
  }
  nav#nav .nav-icon svg{width:22px!important;height:22px!important;}
  nav#nav .nav-label{display:block!important;color:#9bb1be!important;font-family:Cinzel,serif!important;font-weight:800!important;font-size:8px!important;line-height:1!important;letter-spacing:0!important;text-shadow:0 1px 3px #000!important;white-space:nowrap!important;}
  nav#nav .nav-btn.active{background:linear-gradient(180deg,rgba(23,50,74,.24),rgba(7,21,34,.08))!important;}
  nav#nav .nav-btn.active .nav-icon{
    color:#f1d58a!important;border-color:rgba(225,190,107,.76)!important;
    transform:translateY(-3px) scale(1.06)!important;
    background:radial-gradient(circle at 50% 32%,rgba(49,87,116,.50),rgba(10,25,38,.98) 62%)!important;
    box-shadow:inset 0 0 0 1px rgba(255,236,184,.08),0 0 10px rgba(210,170,90,.24),0 0 14px rgba(49,87,116,.22),0 4px 9px rgba(0,0,0,.48)!important;
  }
  nav#nav .nav-btn.active .nav-label{color:#f0dca7!important;text-shadow:0 0 6px rgba(208,172,93,.32),0 1px 3px #000!important;}
  nav#nav .nav-btn.active::after{content:""!important;position:absolute!important;left:36%!important;right:36%!important;bottom:0!important;height:2px!important;border-radius:999px!important;background:#d2ad67!important;box-shadow:0 0 7px rgba(210,173,103,.52)!important;}
  nav#nav .nav-btn .im-notify-badge{position:absolute!important;top:1px!important;right:8px!important;z-index:5!important;}
  main{padding-bottom:94px!important;}
}

/* ===== release-update gameplay/social ===== */
.mission-row.mission-ready{border-color:#7c6530!important;background:linear-gradient(90deg,rgba(152,111,34,.16),rgba(10,22,31,.96))!important;box-shadow:inset 3px 0 0 #d2ad58!important}
.combat-visual-stack{min-width:0;display:flex;flex-direction:column}
.combat-visual-stack>.combat-art-shell{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
.combat-hp-below-art{width:100%;box-sizing:border-box;border-radius:0 0 10px 10px!important;margin:0!important}
.time-trial-name,.floor-monster-label,.raid-art-label,.clan-boss-caption{bottom:82px!important}
.time-trial-result{display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:#7b622c;background:linear-gradient(135deg,rgba(65,49,17,.72),rgba(8,18,26,.96))}
.chat-identity{display:flex;align-items:center;gap:10px;margin:4px 0}.chat-avatar,.chat-msg-avatar{position:relative;flex:0 0 auto;border-radius:50%;overflow:visible;border:2px solid #526979;background:#08131b;box-shadow:0 3px 10px rgba(0,0,0,.35)}.chat-avatar{width:44px;height:44px}.chat-msg-avatar{width:34px;height:34px;margin-top:3px}.chat-avatar img,.chat-msg-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.chat-avatar[class*="vip-"],.chat-msg-avatar[class*="vip-"]{border-color:var(--vip-color,#d4b35e);box-shadow:0 0 8px color-mix(in srgb,var(--vip-color,#d4b35e) 45%,transparent)}.chat-id-text{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.chat-id-text strong{color:#e7eef2;font:800 14px Cinzel}.chat-vip{display:inline-flex;align-items:center;padding:2px 5px;border-radius:6px;border:1px solid var(--vip-color,#d4b35e);color:var(--vip-color,#d4b35e);background:rgba(5,12,18,.82);font:900 8px Inter,Arial,sans-serif;letter-spacing:.4px;white-space:nowrap}.global-chat-message{gap:8px;align-items:flex-start}.global-chat-message.me{flex-direction:row-reverse}.global-chat-bubble{min-width:0}.global-chat-who{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.global-chat-time{margin-left:auto}.private-msg{gap:8px;align-items:flex-start}.private-msg.me{flex-direction:row-reverse}.private-msg-stack{display:flex;flex-direction:column;align-items:flex-start;max-width:78%}.private-msg.me .private-msg-stack{align-items:flex-end}.private-msg .bubble{max-width:100%!important}.private-msg-meta{display:flex;align-items:center;gap:5px;margin:0 3px 3px;color:#9fb6c4;font-size:9px}.private-msg.me .private-msg-meta{color:#d9c690}
@media(max-width:560px){.time-trial-name,.floor-monster-label,.raid-art-label,.clan-boss-caption{bottom:68px!important}.chat-msg-avatar{width:30px;height:30px}.time-trial-result{align-items:stretch;flex-direction:column}.time-trial-result .btn{width:100%}}

/* Chat: messaggi propri nettamente a destra */
.global-chat-message{justify-content:flex-start;padding-right:14%;}
.global-chat-message.me{justify-content:flex-end!important;flex-direction:row-reverse!important;padding-left:14%;padding-right:0;}
.global-chat-message.me .global-chat-bubble{margin-left:auto;}
.private-msg{justify-content:flex-start;padding-right:14%;}
.private-msg.me{justify-content:flex-end!important;flex-direction:row-reverse!important;padding-left:14%;padding-right:0;}
.private-msg.me .private-msg-stack{margin-left:auto;align-items:flex-end;}
.chat .msg{display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box;padding-right:14%;}
.chat .msg.me{align-items:flex-end;padding-left:14%;padding-right:0;}
.chat .msg .who{cursor:pointer;}
.chat .msg .text{max-width:86%;padding:8px 10px;border:1px solid #23465f;border-radius:11px;background:#0d2a3e;}
.chat .msg.me .text{background:#3b2d18;border-color:#8b6d39;color:#f5dfaa;}
.player-profile-link,[data-player-id],[data-player-self]{cursor:pointer;}
.player-profile-link:hover .chat-id-text strong,[data-player-id]:hover .global-chat-who>span:first-child{color:#f0d88f;}
.player-id-card .bestiary-id-hero{height:330px;}
.player-id-card .bestiary-id-title h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.player-id-avatar{object-position:center 22%;}
.player-id-vip{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid #b89243;border-radius:999px;background:rgba(20,13,4,.78);color:#f2d27d;font:900 10px Inter,Arial,sans-serif;letter-spacing:.05em;}
.player-id-class{color:#d9c37e;font-weight:800;}
.player-id-note{margin-top:14px;padding:11px 12px;border:1px solid #29495e;border-radius:11px;background:#081824;color:#8fa8b7;font-size:11px;line-height:1.5;}
@media(max-width:560px){
  .global-chat-message{padding-right:8%;}.global-chat-message.me{padding-left:8%;}
  .private-msg{padding-right:8%;}.private-msg.me{padding-left:8%;}
  .chat .msg{padding-right:8%;}.chat .msg.me{padding-left:8%;}
  .player-id-card .bestiary-id-hero{height:270px;}
}

/* ===== idle-mandra-home-panel ===== */
.idle-home-card{margin-top:14px;overflow:hidden}
.idle-home-wrap{display:grid;grid-template-columns:minmax(210px,320px) 1fr;gap:16px;align-items:stretch}
.idle-home-art{position:relative;border:1px solid rgba(226,188,98,.24);border-radius:16px;overflow:hidden;min-height:210px;background:radial-gradient(circle at 50% 20%,rgba(57,83,135,.45),rgba(4,11,19,.96) 74%)}
.idle-home-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.idle-home-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.42));pointer-events:none}
.idle-home-info{display:flex;flex-direction:column;gap:12px;justify-content:center}
.idle-home-info h2{margin:0;font:800 clamp(22px,3.1vw,32px) Cinzel,serif;color:#f0d88f}
.idle-home-info .muted b{color:#f1dfb2}
.idle-home-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.idle-home-meta>div{padding:12px 13px;border:1px solid #23465f;border-radius:14px;background:linear-gradient(135deg,rgba(11,26,39,.94),rgba(7,16,25,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.idle-home-meta small{display:block;color:#93a9b9;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.idle-home-meta b{display:block;color:#f4e4b3;font-size:17px;line-height:1.1}
.idle-home-actions{display:flex;gap:10px;flex-wrap:wrap}
.idle-home-card.locked .idle-home-art{filter:saturate(.8) brightness(.9)}
@media(max-width:760px){.idle-home-wrap{grid-template-columns:1fr}.idle-home-art{min-height:190px}.idle-home-info h2{font-size:22px}}


/* ===== vip-page-refined ===== */
.avatar[data-player-self="1"]{cursor:pointer}
.avatar[data-player-self="1"]:hover{filter:brightness(1.08)}
.avatar-vip-label{cursor:pointer;user-select:none}
.vip-tabs-refined{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;padding:6px;border:1px solid #273b49;border-radius:14px;background:linear-gradient(180deg,rgba(8,18,27,.92),rgba(5,12,18,.96))}
.vip-tabs-refined .btn{flex:1;min-width:145px}
.vip-page-shell{display:grid;gap:14px}
.vip-hero-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px;border:1px solid #70582d;border-radius:18px;background:radial-gradient(circle at 12% 20%,rgba(226,188,98,.16),transparent 30%),linear-gradient(135deg,#17150f 0%,#0b1721 55%,#071019 100%);box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,245,205,.05)}
.vip-hero-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 58%,rgba(226,188,98,.06) 72%,transparent 84%)}
.vip-hero-crown{width:72px;height:72px;display:grid;place-items:center;border:1px solid #8b6d39;border-radius:18px;background:linear-gradient(145deg,#2a2213,#101821);font-size:34px;box-shadow:inset 0 1px 0 rgba(255,239,181,.08),0 0 20px rgba(226,188,98,.08)}
.vip-hero-main{min-width:0;position:relative;z-index:1}.vip-hero-main h2{margin:2px 0 4px;font:900 clamp(28px,4vw,42px) Cinzel,serif;color:#f0d88f}.vip-hero-title{color:#d7c08a;font-weight:800;margin-bottom:8px}
.vip-progress-track{height:12px;margin-top:12px;border:1px solid #604d2e;border-radius:999px;background:#080e14;overflow:hidden}.vip-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8e6a2b,#e1bd69,#f4dda0);box-shadow:0 0 12px rgba(226,188,98,.24)}.vip-progress-label{margin-top:5px;color:#8fa5b3;font-size:11px}
.vip-hero-idle{position:relative;z-index:1;min-width:126px;padding:14px;border:1px solid #5d4928;border-radius:14px;text-align:center;background:rgba(7,14,20,.7)}.vip-hero-idle small,.vip-hero-idle span{display:block;color:#8fa5b3;font-size:10px}.vip-hero-idle b{display:block;margin:5px 0;color:#f0d88f;font:900 27px Cinzel,serif}
.vip-level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.vip-level-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"top top" "frame bonus" "frame cosmetic" "frame extra" "req req" "buy buy";column-gap:12px;row-gap:6px;padding:15px;border:1px solid #263e4e;border-radius:16px;background:linear-gradient(145deg,rgba(9,23,34,.96),rgba(6,14,22,.98));opacity:.72}.vip-level-card.unlocked{opacity:1;border-color:#5c4a2a;background:radial-gradient(circle at 0 0,rgba(226,188,98,.09),transparent 38%),linear-gradient(145deg,rgba(17,25,30,.98),rgba(7,15,22,.98))}.vip-level-card.next{opacity:1;border-color:#b28a42;box-shadow:0 0 0 1px rgba(226,188,98,.08),0 0 22px rgba(226,188,98,.07)}.vip-level-card.next .tiny{grid-column:1/-1;margin:0;min-width:0}.vip-level-card.aura-tier.unlocked{background:radial-gradient(circle at 12% 12%,rgba(226,188,98,.13),transparent 38%),linear-gradient(145deg,#17160f,#09131b)}
.vip-level-top{grid-area:top;display:flex;justify-content:space-between;align-items:center;gap:10px}.vip-level-number{font:900 15px Cinzel,serif;color:#f0d88f}.vip-level-state{font-size:9px;font-weight:900;letter-spacing:.08em;color:#7f95a4}.vip-level-card.unlocked .vip-level-state{color:#d5bd7d}.vip-level-frame{grid-area:frame;width:48px;height:48px;display:grid;place-items:center;border:1px solid #4b5b65;border-radius:50%;font-size:18px;background:#09131b}.vip-level-card.unlocked .vip-level-frame{border-color:#8d6f3b;color:#f0d88f}.vip-level-bonus{grid-area:bonus;color:#e6edf1;font-weight:800;line-height:1.35}.vip-level-cosmetic{grid-area:cosmetic;color:#bea96f;font-size:11px}.vip-level-extra{grid-area:extra;color:#91a8b7;font-size:10px}.vip-level-requirement{grid-area:req;padding-top:7px;border-top:1px solid rgba(91,118,135,.2);color:#778e9d;font-size:10px}.vip-level-card .vipBuy{grid-area:buy;margin-top:4px;width:100%}
.vip-note{border-color:#5d4928!important;background:rgba(33,26,13,.38)!important;color:#d8c89b!important}
.vip-panel-card{border-color:#3d4c56!important}.vip-bonus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.vip-bonus-card{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid #274457;border-radius:14px;background:linear-gradient(145deg,#0a1d2b,#07131d)}.vip-bonus-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#111d25;font-size:20px}.vip-bonus-card b,.vip-bonus-card strong,.vip-bonus-card small{display:block}.vip-bonus-card strong{margin:3px 0;color:#f0d88f;font-size:18px}.vip-bonus-card small{color:#7f98a8;line-height:1.3}
.vip-cosmetic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vip-cosmetic-card{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #284355;border-radius:14px;background:#081722}.vip-cosmetic-card.locked{opacity:.5}.vip-cosmetic-card.unlocked{border-color:#66502c;background:linear-gradient(145deg,rgba(36,30,17,.65),#081722)}.vip-cosmetic-preview{width:48px;height:48px;flex:none;display:grid;place-items:center;border:1px solid #506575;border-radius:50%;background:#0b1620;font-size:21px}.vip-cosmetic-card.unlocked .vip-cosmetic-preview{border-color:#98743b;box-shadow:0 0 12px rgba(226,188,98,.08)}.vip-cosmetic-card b,.vip-cosmetic-card span,.vip-cosmetic-card small{display:block}.vip-cosmetic-card b{color:#e7d19a}.vip-cosmetic-card span{margin-top:2px;color:#b7c5cd}.vip-cosmetic-card small{margin-top:4px;color:#7f98a8;line-height:1.3}
@media(max-width:760px){.vip-hero-card{grid-template-columns:auto 1fr}.vip-hero-idle{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;text-align:left}.vip-hero-idle b{margin:0}.vip-level-grid,.vip-cosmetic-grid{grid-template-columns:1fr}.vip-bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.vip-hero-card{grid-template-columns:1fr;padding:16px}.vip-hero-crown{width:58px;height:58px}.vip-hero-idle{grid-template-columns:1fr;text-align:center}.vip-bonus-grid{grid-template-columns:1fr}.vip-tabs-refined .btn{min-width:0;font-size:10px;padding:9px 7px}}


/* ===== STATUS + PROFILO COMPLETO + PREMI GIORNALIERI ===== */
.status-shell{display:grid;gap:14px;max-width:1180px;margin:0 auto}.status-skill-main{border-color:#31546b;background:radial-gradient(circle at 88% 4%,rgba(226,188,98,.09),transparent 30%),linear-gradient(145deg,#0a1b28,#07131d)}
.status-skill-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}.status-skill-head h2{margin:.2rem 0 .4rem}.status-points-orb{min-width:110px;padding:14px 16px;border:1px solid #9d7a35;border-radius:16px;text-align:center;background:linear-gradient(145deg,#241d11,#0d151c);box-shadow:0 0 20px rgba(226,188,98,.08)}.status-points-orb small{display:block;color:#a9986d;font-size:9px;letter-spacing:.12em}.status-points-orb b{display:block;margin-top:4px;color:#f0d27a;font-size:25px}.status-xp-line{display:flex;justify-content:space-between;gap:12px;color:#9eb3c0;font-size:11px;margin-top:10px}.status-xp-line b{color:#e6d29a}.status-reset-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 2px}.status-stat-grid{margin-top:14px}.status-stat-card{border-color:#24465e}.status-class-note{margin-top:12px}.profile-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.profile-source-card{padding:14px;border:1px solid #294b60;border-radius:14px;background:linear-gradient(145deg,rgba(10,27,40,.96),rgba(6,17,26,.96))}.profile-source-head{display:flex;gap:10px;align-items:center;margin-bottom:9px}.profile-source-head>span{font-size:24px}.profile-source-head small{display:block;color:#91a9b8;text-transform:uppercase;font-size:9px;letter-spacing:.1em}.profile-source-head b{display:block;color:#f0d58f;font-size:19px}.profile-source-card ul{margin:0;padding-left:18px;color:#a8bac5;font-size:11px;line-height:1.55}.profile-source-card li::marker{color:#cda956}.profile-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.daily-gifts-shell{display:grid;gap:14px;max-width:900px;margin:0 auto}.daily-gift-tabs{display:flex;gap:10px}.daily-gift-tabs .btn{flex:1}.daily-gift-card{position:relative;overflow:hidden;padding:22px;border:1px solid #31546a;border-radius:18px;background:radial-gradient(circle at 85% 0,rgba(226,188,98,.12),transparent 36%),linear-gradient(145deg,#0b1d2a,#07131d);box-shadow:0 10px 28px rgba(0,0,0,.22)}.daily-gift-card.vip{border-color:#92713b;background:radial-gradient(circle at 82% 0,rgba(229,185,83,.20),transparent 38%),linear-gradient(145deg,#21190d,#0b141c)}.daily-gift-card.claimed{opacity:.72}.daily-gift-card.locked{filter:saturate(.65)}.daily-gift-seal{position:absolute;right:18px;top:14px;font-size:42px;opacity:.32}.daily-gift-card h2{margin:4px 0 7px;color:#f0d58f}.daily-gift-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.daily-gift-rewards>div{padding:13px;border:1px solid rgba(87,117,136,.52);border-radius:12px;background:rgba(5,15,23,.58);text-align:center}.daily-gift-rewards small{display:block;color:#879eae;font-size:9px;letter-spacing:.1em;margin-bottom:5px}.daily-gift-rewards b{color:#f3e0ac}.daily-gift-card .dailyGiftClaim{width:100%;min-height:46px}
/* Mercato: Negozio sopra, Upgrade sotto, Premi giornalieri a destra della moneta. */
.city-radial-mode .mercato [data-city-page="shop"]{--tx:0px!important;--ty:-76px!important}.city-radial-mode .mercato [data-city-page="upgrades"]{--tx:0px!important;--ty:76px!important}.city-radial-mode .mercato.open{z-index:45!important}.city-radial-mode .mercato.open .city-submenu{z-index:46!important}.city-radial-mode .mercato [data-city-page="dailyrewards"]{--tx:126px!important;--ty:0px!important;width:160px!important;min-width:160px!important;z-index:48!important}
@media(max-width:900px){.profile-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.city-radial-mode .mercato [data-city-page="shop"]{--ty:-70px!important}.city-radial-mode .mercato [data-city-page="upgrades"]{--ty:70px!important}.city-radial-mode .mercato [data-city-page="dailyrewards"]{--tx:118px!important;width:150px!important;min-width:150px!important}}
@media(max-width:560px){.status-skill-head,.status-reset-row{flex-direction:column}.status-points-orb{width:100%;box-sizing:border-box}.profile-source-grid,.profile-kpi-grid{grid-template-columns:1fr}.daily-gift-rewards{grid-template-columns:1fr}.city-radial-mode .mercato [data-city-page="shop"]{--ty:-68px!important}.city-radial-mode .mercato [data-city-page="upgrades"]{--ty:68px!important}.city-radial-mode .mercato [data-city-page="dailyrewards"]{--tx:106px!important;width:132px!important;min-width:132px!important}.city-radial-mode .mercato [data-city-page="dailyrewards"] .city-sub-copy small{display:none!important}}



/* ===== idle-mandra-social-system-update ===== */
.city-mail-button{
  position:absolute;left:14px;top:14px;z-index:12;
  min-width:108px;height:58px;padding:0 16px;border-radius:16px;
  border:2px solid #e2c671;
  background:radial-gradient(circle at 26% 30%,rgba(255,232,156,.22),transparent 34%),linear-gradient(145deg,#3a2c12,#151d22 70%);
  color:#fff0ad;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:30px;cursor:pointer;box-shadow:0 0 0 2px rgba(7,19,28,.82),0 0 22px rgba(226,198,113,.38),0 12px 26px rgba(0,0,0,.46);
  animation:cityMailGlow 2.7s ease-in-out infinite;
}
.city-mail-label{font:900 11px/1 Cinzel,serif;letter-spacing:.13em;color:#ffe8a0;text-shadow:0 1px 4px #000}
.city-mail-button:hover{transform:translateY(-2px) scale(1.025);border-color:#fff0ad;color:#fff7d0;box-shadow:0 0 0 2px rgba(7,19,28,.82),0 0 30px rgba(240,210,122,.58),0 14px 28px rgba(0,0,0,.5)}
.city-mail-button .im-notify-badge{position:absolute;right:-7px;top:-7px;min-width:22px;height:22px;font-size:11px;box-shadow:0 0 12px rgba(255,86,86,.72)}
@keyframes cityMailGlow{0%,100%{filter:brightness(1);box-shadow:0 0 0 2px rgba(7,19,28,.82),0 0 18px rgba(226,198,113,.28),0 12px 26px rgba(0,0,0,.46)}50%{filter:brightness(1.08);box-shadow:0 0 0 2px rgba(7,19,28,.82),0 0 29px rgba(226,198,113,.52),0 12px 26px rgba(0,0,0,.46)}}
.system-mail-shell{display:grid;gap:12px}
.system-mail-tabs{display:flex;gap:8px;padding:6px;border:1px solid #29495e;border-radius:14px;background:#071824}
.system-mail-tab{flex:1;min-height:44px;border:1px solid #405568;border-radius:10px;background:#0b1a25;color:#9eb4c1;font-weight:900;cursor:pointer;transition:.16s ease}
.system-mail-tab:hover{border-color:#9b8148;color:#f3dc97;background:#151b1c}
.system-mail-tab.active{border-color:#d6b45a;background:linear-gradient(145deg,#302712,#171b1e);color:#ffe8a0;box-shadow:inset 0 0 0 1px rgba(255,232,160,.08),0 5px 14px rgba(0,0,0,.25)}
.system-mail-list{display:grid;gap:10px}
.system-mail-item{width:100%;text-align:left;padding:14px;border:1px solid #29495e;border-radius:13px;background:linear-gradient(145deg,#0a1b29,#07131e);color:#e8f1f7;cursor:pointer}
.system-mail-item.unread{border-color:#b99643;box-shadow:0 0 0 1px rgba(226,188,98,.14),0 8px 24px rgba(0,0,0,.24)}
.system-mail-item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.system-mail-kind{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#e1c36b}
.system-mail-date{font-size:10px;color:#7e9aad;white-space:nowrap}
.system-mail-item h3{margin:5px 0 6px;font-size:16px}
.system-mail-item p{margin:0;color:#b8cbd6;font-size:12px;line-height:1.55;white-space:pre-wrap}
.system-mail-item.unread h3::before{content:'● ';color:#e7c75f}
.system-admin-compose{display:grid;gap:9px}
.system-admin-compose input,.system-admin-compose textarea,.system-admin-compose select,
.referral-card input,.clan-browser-search input{
  width:100%;box-sizing:border-box;background:#06131f;color:#fff;border:1px solid #294c64;border-radius:9px;padding:10px
}
.system-admin-compose textarea{min-height:120px;resize:vertical}
.referral-code-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.referral-code{font:900 18px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:#f0d47d;background:#081824;border:1px solid #5f522d;border-radius:10px;padding:10px 12px}
.clan-browser-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.clan-browser-card{display:grid;gap:10px;padding:13px;border:1px solid #29495e;border-radius:13px;background:#081824}
.clan-browser-card.mine{border-color:#b89543;box-shadow:0 0 0 1px rgba(226,188,98,.12)}
.clan-browser-head{display:flex;gap:10px;align-items:flex-start}
.clan-browser-copy{min-width:0;flex:1}
.clan-browser-copy h3{margin:0 0 3px;font-size:15px}
.clan-browser-meta{font-size:10px;color:#839eae}
.class-change-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
.class-change-summary{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:12px}
.class-change-summary .class-art-panel{height:260px;border-radius:14px;overflow:hidden}
.class-change-nav{display:flex;gap:8px;justify-content:center;margin-top:10px}
.status-reset-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){
  .clan-browser-grid{grid-template-columns:1fr}
  .class-change-summary{grid-template-columns:1fr}
  .city-mail-button{left:10px;top:10px;height:52px;min-width:94px;padding:0 12px;font-size:27px}
  .city-mail-label{font-size:10px}
  .status-reset-row{align-items:flex-start}
}


/* V-REFERRAL-SIGNUP-DEMO — referral registrazione, pacchetto demo, cambio classe */
.auth-referral-opt{margin-top:12px;padding:12px;border:1px solid rgba(216,177,78,.35);border-radius:12px;background:rgba(109,76,18,.12)}
.auth-referral-toggle{display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer;user-select:none}
.auth-referral-toggle input{width:18px;height:18px;accent-color:#d9b64b}
.auth-referral-input{margin-top:10px}
.auth-referral-input[hidden]{display:none!important}
.auth-referral-help{margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted,#9fb1c0)}
.demo-diamond-pack{margin-top:14px;border:1px solid rgba(239,199,82,.55);box-shadow:0 0 24px rgba(239,199,82,.08) inset}
.demo-diamond-pack .demo-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;color:#f0d47d}
.class-change-picker-card{width:min(96vw,980px);max-height:94vh;overflow:auto;padding:0;border-radius:18px}
.class-change-picker{padding:18px}
.class-change-picker .selection-head{margin-bottom:10px}
.class-change-picker .selection-head p{max-width:720px;margin-left:auto;margin-right:auto}
.class-change-picker .selection-footer{margin-top:12px}
.class-change-picker .class-card{max-width:720px;margin:0 auto}
.class-change-price-note{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
@media(max-width:720px){.class-change-picker{padding:10px}.class-change-picker-card{width:98vw}.auth-referral-opt{padding:10px}}



/* ===== idle-mandra-promo-codes-admin ===== */
.promo-code-card{display:grid;gap:12px}
.promo-code-redeem{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.promo-code-redeem input{flex:1;min-width:190px;box-sizing:border-box;background:#06131f;color:#fff;border:1px solid #294c64;border-radius:10px;padding:11px 12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.promo-admin-grid{display:grid;grid-template-columns:1.25fr .8fr .9fr .8fr 1.15fr auto;gap:8px;align-items:end}
.promo-admin-field{display:grid;gap:5px}
.promo-admin-field label{font-size:9px;font-weight:900;letter-spacing:.1em;color:#8fa9b8;text-transform:uppercase}
.promo-admin-field input{width:100%;box-sizing:border-box;background:#06131f;color:#fff;border:1px solid #294c64;border-radius:9px;padding:10px}
.promo-admin-list{display:grid;gap:8px;margin-top:12px}
.promo-admin-row{display:grid;grid-template-columns:minmax(120px,1.15fr) minmax(150px,1.3fr) minmax(110px,.8fr) minmax(125px,.9fr) auto;gap:9px;align-items:center;padding:11px;border:1px solid #29495e;border-radius:11px;background:#081722}
.promo-admin-code{font-weight:1000;color:#ffe59b;letter-spacing:.08em}
.promo-admin-reward{font-size:11px;color:#d8e5ec}
.promo-admin-meta{font-size:10px;color:#8ca5b4}
.promo-admin-row.off{opacity:.58}
.promo-admin-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.promo-admin-delete{border-color:#7f3434!important;color:#ffd0d0!important;background:#321313!important}
@media(max-width:980px){.promo-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.promo-admin-grid .btn{grid-column:1/-1}.promo-admin-row{grid-template-columns:1fr 1fr}.promo-admin-row .promo-admin-actions{grid-column:1/-1;justify-content:stretch}.promo-admin-actions .btn{flex:1}}
@media(max-width:560px){.promo-code-redeem{display:grid}.promo-admin-grid{grid-template-columns:1fr}.promo-admin-row{grid-template-columns:1fr}}

.chat-mod-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chat-mod-btn{border:1px solid #315468;background:#0a1b28;color:#9fb5c2;border-radius:8px;padding:4px 7px;font-size:10px;font-weight:800;cursor:pointer}
.chat-mod-btn:hover{border-color:#6689a0;color:#fff}
.chat-mod-btn.danger:hover{border-color:#c95c5c;color:#ffd5d5}
.account-danger{border-color:#6d3030!important;background:linear-gradient(135deg,rgba(70,19,25,.30),rgba(18,13,18,.96))!important}
.account-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}


.auth-legal-box{margin-top:12px;padding:11px 12px;border:1px solid #29465a;border-radius:10px;background:rgba(8,23,34,.72)}
.auth-legal-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.auth-legal-links a,.auth-legal-links button{font:inherit}
.auth-legal-link{border:0;background:transparent;color:#8cccf0;padding:0;cursor:pointer;text-decoration:underline;font-size:12px}
.auth-legal-check{display:flex;align-items:flex-start;gap:8px;margin-top:10px;color:#c8d8e2;font-size:12px;line-height:1.35}
.auth-legal-check input{margin-top:2px;accent-color:#d9b65c}
.auth-legal-note{margin-top:7px;color:#7894a6;font-size:10px;line-height:1.35}


/* V42 — schermata di caricamento reale, prima di intro/login/gioco */
body.startup-loading{overflow:hidden!important;background:#02060c!important}
body.startup-loading>.topbar,body.startup-loading>.layout{visibility:hidden!important}
.im-startup-loading{position:fixed;inset:0;z-index:250000;display:grid;place-items:center;overflow:hidden;background:#02060c;opacity:1;transition:opacity .34s ease;font-family:Cinzel,serif}
.im-startup-loading.ending{opacity:0;pointer-events:none}
.im-startup-backdrop{position:absolute;inset:0;background:#02060c}
.im-startup-backdrop:after{display:none}
.im-startup-art{position:relative;z-index:1;width:min(100vw,calc(100dvh * .5628));height:auto;max-width:100vw;max-height:100dvh;aspect-ratio:941/1672;overflow:hidden;background:#02060c;contain:layout paint}
.im-startup-art>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;image-rendering:-webkit-optimize-contrast;user-select:none;-webkit-user-drag:none}
.im-startup-copy{position:absolute;left:10.8%;right:10.8%;bottom:13.9%;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#dcecff;text-shadow:0 2px 8px #000;font:700 clamp(9px,2.4vw,13px) Cinzel,serif;letter-spacing:.08em}
.im-startup-copy strong{color:#8fdcff;font-size:clamp(10px,2.7vw,14px)}
.im-startup-track{position:absolute;left:11%;right:11%;bottom:11.15%;height:clamp(5px,.8dvh,8px);border:1px solid rgba(113,198,255,.76);border-radius:999px;background:rgba(1,8,17,.88);overflow:hidden;box-shadow:inset 0 0 8px rgba(0,0,0,.9),0 0 8px rgba(32,154,255,.22)}
.im-startup-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0869b5,#1aaeff 65%,#b9efff);box-shadow:0 0 12px rgba(65,190,255,.85);transition:width .22s ease}
.im-startup-version{position:absolute;left:0;right:0;bottom:3.2%;text-align:center;color:rgba(220,235,245,.72);font:600 clamp(8px,2vw,11px) Inter,Arial,sans-serif;letter-spacing:.12em;text-shadow:0 1px 5px #000}
@media(max-width:560px){.im-startup-art{width:min(100vw,calc(100dvh * .5628));height:auto;aspect-ratio:941/1672}}
@media(prefers-reduced-motion:reduce){.im-startup-loading,.im-startup-fill{transition:none!important}}


/* V43 — nessun HUD o navigazione durante la scelta classe, anche su mobile */
body.class-selection-mode .topbar,
body.class-selection-mode nav#nav,
body.class-selection-mode #nav{display:none!important}
body.class-selection-mode .layout{display:block!important;min-height:100vh!important}
body.class-selection-mode main{width:100%!important;max-width:none!important;min-height:100vh!important}



/* Evidenza costi in Diamanti */
.diamond-cost{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  white-space:nowrap!important;
  padding:4px 9px!important;
  border:1px solid rgba(102,211,255,.72)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(16,66,92,.92),rgba(8,34,51,.96))!important;
  color:#9fe8ff!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
  text-shadow:0 0 8px rgba(87,205,255,.5)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 12px rgba(55,174,230,.24)!important;
}
.diamond-cost-inline{padding:2px 7px!important;margin:0 2px!important;font-size:11px!important;vertical-align:middle!important}
.premium-buy-actions{display:flex;flex-direction:column;gap:7px;align-items:stretch;min-width:116px}
.premium-buy-actions>.diamond-cost{align-self:center}
.nickname-cost-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;color:#d9e9f2;font-size:12px;font-weight:800}
@media(max-width:560px){.premium-buy-actions{min-width:104px}.diamond-cost{padding:4px 7px!important}}

/* idle-mandra-custom-nav-art */
nav#nav .nav-btn[data-page="home"] .nav-icon,
nav#nav .nav-btn[data-page="adventure"] .nav-icon,
nav#nav .nav-btn[data-page="city"] .nav-icon,
nav#nav .nav-btn[data-page="raid"] .nav-icon,
nav#nav .nav-btn[data-page="dungeon"] .nav-icon{
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
nav#nav .nav-btn[data-page="home"] .nav-icon img,
nav#nav .nav-btn[data-page="adventure"] .nav-icon img,
nav#nav .nav-btn[data-page="city"] .nav-icon img,
nav#nav .nav-btn[data-page="raid"] .nav-icon img,
nav#nav .nav-btn[data-page="dungeon"] .nav-icon img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  -webkit-user-drag:none!important;
  -webkit-tap-highlight-color:transparent!important;
  outline:0!important;
}
/* Allinea le icone alla matrice visiva di Home:
   stessa altezza del disegno visibile e stesso centro, senza transform. */
nav#nav .nav-btn[data-page="adventure"] .nav-icon img{
  width:121.7391304%!important;
  height:121.7391304%!important;
  max-width:none!important;
  position:relative!important;
  left:3.6345109%!important;
  top:2.2418478%!important;
  transform:none!important;
}
nav#nav .nav-btn[data-page="city"] .nav-icon img{
  width:94.9152542%!important;
  height:94.9152542%!important;
  max-width:none!important;
  position:relative!important;
  left:1.5227754%!important;
  top:-0.8210339%!important;
  transform:none!important;
}
nav#nav .nav-btn[data-page="raid"] .nav-icon img{
  width:119.1489362%!important;
  height:119.1489362%!important;
  max-width:none!important;
  position:relative!important;
  left:0.78125%!important;
  top:3.0917553%!important;
  transform:none!important;
}
nav#nav .nav-btn[data-page="dungeon"] .nav-icon img{
  width:114.2857143%!important;
  height:114.2857143%!important;
  max-width:none!important;
  position:relative!important;
  left:0.78125%!important;
  top:-6.0267857%!important;
  transform:none!important;
}
@media(max-width:900px){
  nav#nav .nav-btn[data-page="home"] .nav-icon,
  nav#nav .nav-btn[data-page="adventure"] .nav-icon,
  nav#nav .nav-btn[data-page="city"] .nav-icon,
  nav#nav .nav-btn[data-page="raid"] .nav-icon,
  nav#nav .nav-btn[data-page="dungeon"] .nav-icon{
    width:52px!important;
    height:52px!important;
    flex:0 0 52px!important;
  }
  nav#nav .nav-btn[data-page="home"],
  nav#nav .nav-btn[data-page="adventure"],
  nav#nav .nav-btn[data-page="city"],
  nav#nav .nav-btn[data-page="raid"],
  nav#nav .nav-btn[data-page="dungeon"]{
    gap:2px!important;
  }
}

/* ===== Tutorial breve Idle Mandra ===== */
body.game-tutorial-active{overflow:hidden!important}
.game-tutorial-backdrop{
  position:fixed;inset:0;z-index:100000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,4,12,.82);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)
}
.game-tutorial-card{
  position:relative;width:min(430px,100%);
  border:1px solid rgba(229,190,96,.55);border-radius:18px;
  padding:24px 20px 18px;
  background:linear-gradient(180deg,rgba(31,25,52,.98),rgba(13,11,25,.99));
  box-shadow:0 22px 70px rgba(0,0,0,.58),inset 0 0 34px rgba(120,72,190,.10);
  text-align:center
}
.game-tutorial-card h2{margin:6px 0 10px;font-size:25px}
.game-tutorial-card p{margin:0 auto 18px;max-width:360px;line-height:1.5;color:#ddd7e8;font-size:14px}
.game-tutorial-icon{
  width:68px;height:68px;margin:12px auto 8px;border-radius:50%;
  display:grid;place-items:center;font-size:34px;
  border:1px solid rgba(229,190,96,.45);
  background:radial-gradient(circle,rgba(133,82,205,.28),rgba(23,18,40,.84));
  box-shadow:0 0 26px rgba(135,84,208,.22)
}
.game-tutorial-skip{
  position:absolute;right:14px;top:11px;border:0;background:transparent;
  color:#b9b1c7;font-size:11px;font-weight:800;letter-spacing:.08em;cursor:pointer
}
.game-tutorial-progress{display:flex;gap:6px;justify-content:center;margin:4px 58px 12px}
.game-tutorial-progress i{height:4px;flex:1;border-radius:9px;background:rgba(255,255,255,.12)}
.game-tutorial-progress i.active{background:#d9b35d;box-shadow:0 0 8px rgba(217,179,93,.35)}
.game-tutorial-actions{display:flex;gap:10px;justify-content:space-between}
.game-tutorial-actions .btn{flex:1}
@media(max-width:520px){
  .game-tutorial-backdrop{padding:14px}
  .game-tutorial-card{padding:22px 16px 16px}
  .game-tutorial-card h2{font-size:22px}
  .game-tutorial-card p{font-size:13px}
}


/* V179 — class selection must be identical across Android aspect ratios.
   Never crop character artwork on narrow/tall devices. */
body.class-selection-mode .class-card img,
body.class-selection-mode .class-carousel .class-card img{
  width:100%!important;
  height:auto!important;
  max-height:min(58vh,560px)!important;
  aspect-ratio:1.55!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#06121d!important;
}
@media(max-width:700px){
  body.class-selection-mode .class-card img,
  body.class-selection-mode .class-carousel .class-card img{
    max-height:52vh!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* ===== idle-mandra-vip-overlay-stable =====
   VIP 8/9/10 conservano la barra speciale anche su Raid, Dungeon,
   Time Trial e Boss Clan, senza pseudo-elementi fuori dal pulsante. */
.combat-overlay-attack.vip-tap-8,
.combat-overlay-attack.vip-tap-9,
.combat-overlay-attack.vip-tap-10{
  overflow:hidden!important;
  isolation:isolate!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
}
.combat-overlay-attack.vip-tap-8{
  border-color:#45ffe1!important;
  background:linear-gradient(90deg,#123b35 0%,#176d63 48%,#123b35 100%)!important;
  color:#ddfff8!important;
  text-shadow:0 0 8px rgba(98,255,231,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(126,255,233,.25),0 5px 18px rgba(0,0,0,.54),0 0 18px rgba(53,229,192,.38)!important;
}
.combat-overlay-attack.vip-tap-9{
  border-color:#d58cff!important;
  background:linear-gradient(90deg,#30204d 0%,#70409a 48%,#3a2559 100%)!important;
  color:#fff1bf!important;
  text-shadow:0 0 8px rgba(213,140,255,.62)!important;
  box-shadow:inset 0 0 0 1px rgba(255,236,171,.22),0 5px 18px rgba(0,0,0,.54),0 0 22px rgba(194,108,255,.42)!important;
}
.combat-overlay-attack.vip-tap-10{
  border-color:#fff0a2!important;
  background:linear-gradient(90deg,#5a4820 0%,#c99c38 28%,#f2dc86 50%,#b98a2e 72%,#5a4820 100%)!important;
  color:#fff9dc!important;
  text-shadow:0 0 7px #fff,0 0 13px rgba(255,215,90,.8)!important;
  box-shadow:inset 0 0 0 1px rgba(255,250,216,.34),0 5px 18px rgba(0,0,0,.54),0 0 26px rgba(255,212,90,.48)!important;
}
.combat-overlay-attack.vip-tap-8::before,
.combat-overlay-attack.vip-tap-9::before,
.combat-overlay-attack.vip-tap-10::before{
  content:""!important;
  position:absolute!important;
  inset:2px!important;
  border-radius:inherit!important;
  padding:0!important;
  pointer-events:none!important;
  z-index:0!important;
  filter:none!important;
  opacity:.48!important;
  transform:none!important;
  background:linear-gradient(100deg,transparent 0 28%,rgba(255,255,255,.34) 45%,transparent 62% 100%)!important;
  background-size:220% 100%!important;
  animation:vipOverlayShimmer 2.2s linear infinite!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.combat-overlay-attack.vip-tap-8::after,
.combat-overlay-attack.vip-tap-9::after,
.combat-overlay-attack.vip-tap-10::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  box-shadow:inset 0 0 14px rgba(255,255,255,.10)!important;
}
@keyframes vipOverlayShimmer{
  from{background-position:210% 0}
  to{background-position:-20% 0}
}
.combat-overlay-attack.vip-tap-8.tap-hit,
.combat-overlay-attack.vip-tap-9.tap-hit,
.combat-overlay-attack.vip-tap-10.tap-hit{
  transform:none!important;
  translate:none!important;
  scale:1!important;
  filter:brightness(1.28)!important;
}
body.reduced-motion .combat-overlay-attack.vip-tap-8::before,
body.reduced-motion .combat-overlay-attack.vip-tap-9::before,
body.reduced-motion .combat-overlay-attack.vip-tap-10::before{
  animation:none!important;
}


/* ===== idle-mandra-combat-frame-v2 =====
   Cornice Premium: linea piena, continua e uniforme anche negli angoli. */
#premiumCombatFrame{
  border:0!important;
  border-radius:12px 12px 0 0!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}
#premiumCombatFrame.frame-abyss{
  box-shadow:
    inset 0 0 0 4px rgba(152,122,220,1),
    inset 0 0 0 6px rgba(13,9,24,.96),
    inset 0 0 26px rgba(53,31,84,.46),
    0 0 14px rgba(111,81,182,.76),
    0 0 28px rgba(89,55,157,.62)!important;
}
#premiumCombatFrame.frame-inferno{
  box-shadow:
    inset 0 0 0 4px rgba(255,150,48,1),
    inset 0 0 0 6px rgba(118,30,5,.96),
    inset 0 0 24px rgba(255,89,20,.42),
    0 0 14px rgba(255,221,95,.76),
    0 0 28px rgba(255,103,22,.76)!important;
}
#premiumCombatFrame.frame-venom{
  box-shadow:
    inset 0 0 0 4px rgba(156,255,92,1),
    inset 0 0 0 6px rgba(33,92,17,.96),
    inset 0 0 26px rgba(96,187,39,.40),
    0 0 14px rgba(213,255,106,.74),
    0 0 28px rgba(105,237,61,.72)!important;
}

/* ===== idle-mandra-raid-boss-attack-v2 =====
   Raid/Boss: barra VIP ben visibile, centrata e con geometria bloccata.
   Gli effetti restano nel colore/luce del livello VIP senza pseudo-elementi
   che possano deformare o spostare il pulsante. */
.raid-art > .combat-overlay-attack,
.clan-boss-art > .combat-overlay-attack{
  position:absolute!important;
  left:7%!important;
  right:7%!important;
  bottom:18px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  margin:0!important;
  padding:0 16px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:16px!important;
  z-index:70!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
  overflow:hidden!important;
  font-size:13px!important;
  line-height:1!important;
  letter-spacing:.35px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.raid-art > .combat-overlay-attack.vip-tap-8,
.clan-boss-art > .combat-overlay-attack.vip-tap-8{
  border:2px solid #45ffe1!important;
  background:linear-gradient(90deg,#0d2e2a 0%,#176d63 50%,#0d2e2a 100%)!important;
  color:#effffc!important;
  text-shadow:0 0 8px rgba(98,255,231,.72)!important;
  box-shadow:
    inset 0 0 0 2px rgba(126,255,233,.14),
    0 0 16px rgba(53,229,192,.50),
    0 7px 20px rgba(0,0,0,.68)!important;
}
.raid-art > .combat-overlay-attack.vip-tap-9,
.clan-boss-art > .combat-overlay-attack.vip-tap-9{
  border:2px solid #d58cff!important;
  background:linear-gradient(90deg,#25183b 0%,#70409a 50%,#25183b 100%)!important;
  color:#fff3c8!important;
  text-shadow:0 0 8px rgba(213,140,255,.72)!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,236,171,.12),
    0 0 18px rgba(194,108,255,.52),
    0 7px 20px rgba(0,0,0,.68)!important;
}
.raid-art > .combat-overlay-attack.vip-tap-10,
.clan-boss-art > .combat-overlay-attack.vip-tap-10{
  border:2px solid #fff0a2!important;
  background:linear-gradient(90deg,#4b3b18 0%,#b98a2e 26%,#e4c765 50%,#b98a2e 74%,#4b3b18 100%)!important;
  color:#fffce8!important;
  text-shadow:0 0 7px #fff,0 0 12px rgba(255,215,90,.76)!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,250,216,.16),
    0 0 20px rgba(255,212,90,.54),
    0 7px 20px rgba(0,0,0,.68)!important;
}

.raid-art > .combat-overlay-attack.vip-tap-8::before,
.raid-art > .combat-overlay-attack.vip-tap-8::after,
.raid-art > .combat-overlay-attack.vip-tap-9::before,
.raid-art > .combat-overlay-attack.vip-tap-9::after,
.raid-art > .combat-overlay-attack.vip-tap-10::before,
.raid-art > .combat-overlay-attack.vip-tap-10::after,
.clan-boss-art > .combat-overlay-attack.vip-tap-8::before,
.clan-boss-art > .combat-overlay-attack.vip-tap-8::after,
.clan-boss-art > .combat-overlay-attack.vip-tap-9::before,
.clan-boss-art > .combat-overlay-attack.vip-tap-9::after,
.clan-boss-art > .combat-overlay-attack.vip-tap-10::before,
.clan-boss-art > .combat-overlay-attack.vip-tap-10::after{
  display:none!important;
  content:none!important;
}

.raid-art > .combat-overlay-attack:active,
.raid-art > .combat-overlay-attack.tap-hit,
.raid-art > .combat-overlay-attack.touch-pressed,
.clan-boss-art > .combat-overlay-attack:active,
.clan-boss-art > .combat-overlay-attack.tap-hit,
.clan-boss-art > .combat-overlay-attack.touch-pressed{
  transform:none!important;
  translate:none!important;
  scale:1!important;
  filter:brightness(1.20)!important;
}

.raid-art > .combat-overlay-attack:disabled,
.clan-boss-art > .combat-overlay-attack:disabled{
  opacity:.58!important;
  visibility:visible!important;
}

.raid-art-label,
.clan-boss-caption{
  bottom:92px!important;
}

@media(max-width:700px){
  .raid-art > .combat-overlay-attack,
  .clan-boss-art > .combat-overlay-attack{
    left:5%!important;
    right:5%!important;
    bottom:16px!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    border-radius:14px!important;
    font-size:11px!important;
    padding:0 10px!important;
  }
  .raid-art-label,
  .clan-boss-caption{
    bottom:86px!important;
  }
}


/* ===== idle-mandra-dungeon-attack-v2 =====
   Dungeon Floor + Time Trial: stessa barra stabile usata su Raid/Boss. */
.floor-monster-art > .combat-overlay-attack,
.time-trial-art > .combat-overlay-attack{
  position:absolute!important;
  left:7%!important;
  right:7%!important;
  bottom:18px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  margin:0!important;
  padding:0 16px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:16px!important;
  z-index:70!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
  overflow:hidden!important;
  font-size:13px!important;
  line-height:1!important;
  letter-spacing:.35px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.floor-monster-art > .combat-overlay-attack.vip-tap-8,
.time-trial-art > .combat-overlay-attack.vip-tap-8{
  border:2px solid #45ffe1!important;
  background:linear-gradient(90deg,#0d2e2a 0%,#176d63 50%,#0d2e2a 100%)!important;
  color:#effffc!important;
  text-shadow:0 0 8px rgba(98,255,231,.72)!important;
  box-shadow:
    inset 0 0 0 2px rgba(126,255,233,.14),
    0 0 16px rgba(53,229,192,.50),
    0 7px 20px rgba(0,0,0,.68)!important;
}
.floor-monster-art > .combat-overlay-attack.vip-tap-9,
.time-trial-art > .combat-overlay-attack.vip-tap-9{
  border:2px solid #d58cff!important;
  background:linear-gradient(90deg,#25183b 0%,#70409a 50%,#25183b 100%)!important;
  color:#fff3c8!important;
  text-shadow:0 0 8px rgba(213,140,255,.72)!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,236,171,.12),
    0 0 18px rgba(194,108,255,.52),
    0 7px 20px rgba(0,0,0,.68)!important;
}
.floor-monster-art > .combat-overlay-attack.vip-tap-10,
.time-trial-art > .combat-overlay-attack.vip-tap-10{
  border:2px solid #fff0a2!important;
  background:linear-gradient(90deg,#4b3b18 0%,#b98a2e 26%,#e4c765 50%,#b98a2e 74%,#4b3b18 100%)!important;
  color:#fffce8!important;
  text-shadow:0 0 7px #fff,0 0 12px rgba(255,215,90,.76)!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,250,216,.16),
    0 0 20px rgba(255,212,90,.54),
    0 7px 20px rgba(0,0,0,.68)!important;
}

.floor-monster-art > .combat-overlay-attack.vip-tap-8::before,
.floor-monster-art > .combat-overlay-attack.vip-tap-8::after,
.floor-monster-art > .combat-overlay-attack.vip-tap-9::before,
.floor-monster-art > .combat-overlay-attack.vip-tap-9::after,
.floor-monster-art > .combat-overlay-attack.vip-tap-10::before,
.floor-monster-art > .combat-overlay-attack.vip-tap-10::after,
.time-trial-art > .combat-overlay-attack.vip-tap-8::before,
.time-trial-art > .combat-overlay-attack.vip-tap-8::after,
.time-trial-art > .combat-overlay-attack.vip-tap-9::before,
.time-trial-art > .combat-overlay-attack.vip-tap-9::after,
.time-trial-art > .combat-overlay-attack.vip-tap-10::before,
.time-trial-art > .combat-overlay-attack.vip-tap-10::after{
  display:none!important;
  content:none!important;
}

.floor-monster-art > .combat-overlay-attack:active,
.floor-monster-art > .combat-overlay-attack.tap-hit,
.floor-monster-art > .combat-overlay-attack.touch-pressed,
.time-trial-art > .combat-overlay-attack:active,
.time-trial-art > .combat-overlay-attack.tap-hit,
.time-trial-art > .combat-overlay-attack.touch-pressed{
  transform:none!important;
  translate:none!important;
  scale:1!important;
  filter:brightness(1.20)!important;
}

.floor-monster-art > .combat-overlay-attack:disabled,
.time-trial-art > .combat-overlay-attack:disabled{
  opacity:.58!important;
  visibility:visible!important;
}

.floor-monster-label,
.time-trial-name{
  bottom:92px!important;
}

@media(max-width:700px){
  .floor-monster-art > .combat-overlay-attack,
  .time-trial-art > .combat-overlay-attack{
    left:5%!important;
    right:5%!important;
    bottom:16px!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    border-radius:14px!important;
    font-size:11px!important;
    padding:0 10px!important;
  }
  .floor-monster-label,
  .time-trial-name{
    bottom:86px!important;
  }
}


/* ===== idle-mandra-premium-combat-ribbon =====
   Fascia bonus cosmetico Premium, ancorata al riquadro di combattimento. */
.premium-combat-ribbon{
  position:absolute!important;
  top:12px!important;
  left:0!important;
  z-index:75!important;
  display:flex!important;
  align-items:center!important;
  min-height:28px!important;
  max-width:min(76%,280px)!important;
  padding:0 14px 0 13px!important;
  box-sizing:border-box!important;
  border-radius:0 10px 10px 0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-left:0!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.55px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  pointer-events:none!important;
  text-shadow:0 1px 4px rgba(0,0,0,.9)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}
.premium-combat-ribbon.frame-abyss{
  border-color:rgba(190,155,255,.56)!important;
  background:linear-gradient(90deg,rgba(70,43,115,.98),rgba(108,72,168,.94))!important;
  box-shadow:0 5px 14px rgba(0,0,0,.42),0 0 14px rgba(129,87,202,.34)!important;
}
.premium-combat-ribbon.frame-inferno{
  border-color:rgba(255,194,88,.64)!important;
  background:linear-gradient(90deg,rgba(118,38,7,.98),rgba(207,87,18,.94))!important;
  box-shadow:0 5px 14px rgba(0,0,0,.42),0 0 14px rgba(255,112,26,.38)!important;
}
.premium-combat-ribbon.frame-venom{
  border-color:rgba(180,255,108,.62)!important;
  background:linear-gradient(90deg,rgba(38,99,21,.98),rgba(73,154,37,.94))!important;
  box-shadow:0 5px 14px rgba(0,0,0,.42),0 0 14px rgba(114,225,61,.34)!important;
}
@media(max-width:700px){
  .premium-combat-ribbon{
    top:10px!important;
    min-height:25px!important;
    max-width:78%!important;
    padding:0 11px 0 10px!important;
    border-radius:0 8px 8px 0!important;
    font-size:9px!important;
    letter-spacing:.35px!important;
  }
}

/* ===== vip-8-9-10-combat-bars-final =====
   VIP 8 resta verde; VIP 9 e 10 riprendono i colori storici delle barre
   Raid/Dungeon/Boss, coerenti con il banner VIP in alto a sinistra. */
#raidAttackBtn.vip-tap-8,
#floorAttackBtn.vip-tap-8,
#timeTrialAttackBtn.vip-tap-8,
#clanBossAttackBtn.vip-tap-8{
  border:2px solid #45ffe1!important;
  background:linear-gradient(90deg,#0d2e2a 0%,#176d63 50%,#0d2e2a 100%)!important;
  color:#effffc!important;
  text-shadow:0 0 8px rgba(98,255,231,.72)!important;
  box-shadow:
    inset 0 0 0 2px rgba(126,255,233,.14),
    0 0 16px rgba(53,229,192,.50),
    0 7px 20px rgba(0,0,0,.68)!important;
}

#raidAttackBtn.vip-tap-9,
#floorAttackBtn.vip-tap-9,
#timeTrialAttackBtn.vip-tap-9,
#clanBossAttackBtn.vip-tap-9{
  /* Copia esatta della palette VIP 9 della barra Battaglia. */
  border:1px solid #d2a744!important;
  background:linear-gradient(180deg,#514021,#342b18)!important;
  color:#f0e6c3!important;
  text-shadow:none!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 12px rgba(255,180,65,.42),
    0 0 25px rgba(226,113,31,.18),
    0 7px 18px rgba(0,0,0,.48)!important;
}

#raidAttackBtn.vip-tap-10,
#floorAttackBtn.vip-tap-10,
#timeTrialAttackBtn.vip-tap-10,
#clanBossAttackBtn.vip-tap-10{
  border:2px solid #fff0a2!important;
  background:linear-gradient(90deg,#4b3b18 0%,#b98a2e 26%,#e4c765 50%,#b98a2e 74%,#4b3b18 100%)!important;
  color:#fffce8!important;
  text-shadow:0 0 7px #fff,0 0 12px rgba(255,215,90,.76)!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,250,216,.16),
    0 0 20px rgba(255,212,90,.54),
    0 7px 20px rgba(0,0,0,.68)!important;
}

/* Mantiene le barre overlay stabili senza pseudo-elementi esterni. */
#raidAttackBtn.vip-tap-8::before,
#raidAttackBtn.vip-tap-8::after,
#floorAttackBtn.vip-tap-8::before,
#floorAttackBtn.vip-tap-8::after,
#timeTrialAttackBtn.vip-tap-8::before,
#timeTrialAttackBtn.vip-tap-8::after,
#clanBossAttackBtn.vip-tap-8::before,
#clanBossAttackBtn.vip-tap-8::after,
#raidAttackBtn.vip-tap-9::before,
#raidAttackBtn.vip-tap-9::after,
#floorAttackBtn.vip-tap-9::before,
#floorAttackBtn.vip-tap-9::after,
#timeTrialAttackBtn.vip-tap-9::before,
#timeTrialAttackBtn.vip-tap-9::after,
#clanBossAttackBtn.vip-tap-9::before,
#clanBossAttackBtn.vip-tap-9::after,
#raidAttackBtn.vip-tap-10::before,
#raidAttackBtn.vip-tap-10::after,
#floorAttackBtn.vip-tap-10::before,
#floorAttackBtn.vip-tap-10::after,
#timeTrialAttackBtn.vip-tap-10::before,
#timeTrialAttackBtn.vip-tap-10::after,
#clanBossAttackBtn.vip-tap-10::before,
#clanBossAttackBtn.vip-tap-10::after{
  display:none!important;
  content:none!important;
}


/* ===== vip-9-full-diamond-final =====
   VIP 9: tema Diamante completo.
   Mantiene le animazioni/luci esistenti, cambia solo palette e resa cromatica. */

/* Cerchio VIP in alto a sinistra */
.avatar-vip-frame.vip-legend{
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 14px rgba(185,245,255,.70),
    0 0 30px rgba(105,215,255,.38),
    0 0 48px rgba(235,252,255,.18)!important;
}
.avatar-vip-frame.vip-legend::after{
  background:
    radial-gradient(circle at 50% 5%,rgba(255,255,255,.96),transparent 18%),
    radial-gradient(circle at 84% 30%,rgba(176,241,255,.86),transparent 22%),
    radial-gradient(circle at 94% 66%,rgba(102,210,255,.64),transparent 19%),
    radial-gradient(circle at 50% 96%,rgba(225,250,255,.88),transparent 20%),
    radial-gradient(circle at 11% 68%,rgba(111,220,255,.62),transparent 20%),
    radial-gradient(circle at 16% 27%,rgba(201,247,255,.86),transparent 20%)!important;
  filter:
    blur(5px)
    drop-shadow(0 0 6px rgba(199,247,255,.74))
    drop-shadow(0 0 12px rgba(91,206,255,.42))!important;
}

/* Barra ATTACCA Battaglia */
.attack.vip-tap-9{
  --vip-attack:#c9f7ff!important;
  --vip-attack-aura:rgba(136,226,255,.42)!important;
  border:1px solid #d8fbff!important;
  background:
    linear-gradient(180deg,#31515c 0%,#1d3945 46%,#102832 100%)!important;
  color:#f4feff!important;
  text-shadow:
    0 0 6px rgba(255,255,255,.88),
    0 0 12px rgba(153,235,255,.68)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 0 18px rgba(166,238,255,.10),
    0 0 13px rgba(184,244,255,.58),
    0 0 28px rgba(91,206,255,.32),
    0 7px 18px rgba(0,0,0,.48)!important;
}

/* Mantiene l'effetto luce/fiamma VIP 9, ma in versione cristallo/diamante */
.attack.vip-tap-9::after{
  background:
    radial-gradient(ellipse at 12% 100%,rgba(190,247,255,.86),transparent 40%),
    radial-gradient(ellipse at 34% 92%,rgba(255,255,255,.88),transparent 38%),
    radial-gradient(ellipse at 58% 100%,rgba(104,218,255,.80),transparent 40%),
    radial-gradient(ellipse at 82% 90%,rgba(211,250,255,.86),transparent 38%)!important;
  filter:
    blur(3px)
    drop-shadow(0 0 5px rgba(201,248,255,.58))
    drop-shadow(0 0 10px rgba(99,211,255,.34))!important;
}

/* Raid + Dungeon Floor + Time Trial + Boss Clan: stesso Diamante della Battaglia */
#raidAttackBtn.vip-tap-9,
#floorAttackBtn.vip-tap-9,
#timeTrialAttackBtn.vip-tap-9,
#clanBossAttackBtn.vip-tap-9{
  border:1px solid #d8fbff!important;
  background:
    linear-gradient(180deg,#31515c 0%,#1d3945 46%,#102832 100%)!important;
  color:#f4feff!important;
  text-shadow:
    0 0 6px rgba(255,255,255,.88),
    0 0 12px rgba(153,235,255,.68)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 0 18px rgba(166,238,255,.10),
    0 0 13px rgba(184,244,255,.58),
    0 0 28px rgba(91,206,255,.32),
    0 7px 18px rgba(0,0,0,.48)!important;
}


/* ===== vip-10-battle-match-secondary-final =====
   Battaglia VIP 10: stessa resa visiva della barra Dungeon/Raid/Boss Clan. */
.attack.vip-tap-10{
  border:2px solid #fff0a2!important;
  background:linear-gradient(90deg,#4b3b18 0%,#b98a2e 26%,#e4c765 50%,#b98a2e 74%,#4b3b18 100%)!important;
  color:#fffce8!important;
  text-shadow:0 0 7px #fff,0 0 12px rgba(255,215,90,.76)!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,250,216,.16),
    0 0 20px rgba(255,212,90,.54),
    0 7px 20px rgba(0,0,0,.68)!important;
  animation:none!important;
}
.attack.vip-tap-10::before,
.attack.vip-tap-10::after{
  display:none!important;
  content:none!important;
}


/* ===== vip-9-pure-light-profile-match =====
   VIP 9: particelle più nitide (luce pura, niente nebbia)
   e cornice profilo allineata alla palette Diamante del tasto ATTACCA. */
.avatar-vip-frame.vip-legend{
  border-color:#d8fbff!important;
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 10px rgba(216,251,255,.72),
    0 0 20px rgba(136,226,255,.40),
    0 0 34px rgba(91,206,255,.20)!important;
}

/* Anello elettrico: stessa tinta del pulsante, senza residui oro. */
.avatar-vip-frame.vip-legend::before{
  inset:-10px!important;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 7%,
      #ffffff 9%,
      #d8fbff 11%,
      transparent 14% 27%,
      #ffffff 29%,
      #9feeff 31%,
      transparent 34% 51%,
      #e9fdff 54%,
      #8cddff 56%,
      transparent 60% 77%,
      #ffffff 79%,
      #b8f3ff 81%,
      transparent 84%
    )!important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 5px rgba(127,225,255,.72))!important;
}

/* Particelle: nuclei piccoli e molto luminosi, glow stretto.
   Niente blur ampio che crea l'effetto nebbia/appannato. */
.avatar-vip-frame.vip-legend::after{
  inset:-14px!important;
  opacity:.98!important;
  background:
    radial-gradient(circle at 50% 5%,#ffffff 0 1.7px,rgba(220,251,255,.92) 1.8px 2.8px,transparent 3.4px),
    radial-gradient(circle at 84% 30%,#ffffff 0 1.5px,rgba(153,235,255,.95) 1.6px 2.7px,transparent 3.3px),
    radial-gradient(circle at 94% 66%,#e9fdff 0 1.6px,rgba(101,214,255,.92) 1.7px 2.8px,transparent 3.5px),
    radial-gradient(circle at 50% 96%,#ffffff 0 1.8px,rgba(201,247,255,.95) 1.9px 3px,transparent 3.6px),
    radial-gradient(circle at 11% 68%,#f4feff 0 1.5px,rgba(111,220,255,.92) 1.6px 2.7px,transparent 3.3px),
    radial-gradient(circle at 16% 27%,#ffffff 0 1.7px,rgba(184,244,255,.94) 1.8px 2.9px,transparent 3.5px)!important;
  filter:
    blur(.35px)
    drop-shadow(0 0 2px rgba(255,255,255,.96))
    drop-shadow(0 0 5px rgba(116,221,255,.72))!important;
}

/* Etichetta VIP 9 coerente con la stessa cornice/pulsante. */
.avatar-vip-label.vip-legend{
  border-color:#d8fbff!important;
  color:#f4feff!important;
  box-shadow:
    0 0 7px rgba(184,244,255,.44),
    0 3px 8px rgba(0,0,0,.45)!important;
}


/* ===== raid-keys-inventory-neon-performance-v1 · 2026-09-27 ===== */
/* Città: mantiene ferme tutte le icone inferiori. Solo Personaggio si sposta
   simmetricamente a sinistra per lasciare posto all'Inventario a destra. */
.city-radial-group.personaggio{left:calc(50% - 50px)!important;top:29%!important}
.city-radial-group.inventario{left:calc(50% + 50px)!important;top:29%!important}
.city-inventory-destination{color:#d8edf8!important}
.city-inventory-svg{width:34px;height:34px;display:block;color:#e7d08c;filter:none}
.city-radial-group.inventario .city-main-destination:hover .city-inventory-svg{color:#fff0ad}

.raid-key-svg{width:74px;height:74px;display:block;overflow:visible;filter:none}
.raid-key-svg.small{width:27px;height:27px;display:inline-block;vertical-align:middle}
.raid-key-svg.silver{filter:drop-shadow(0 0 3px rgba(204,239,255,.34))}
.raid-key-svg.gold{filter:drop-shadow(0 0 3px rgba(255,213,91,.36))}
.raid-key-mixed{display:inline-flex;align-items:center;justify-content:center;gap:0}
.raid-key-mixed .raid-key-svg+ .raid-key-svg{margin-left:-22px;transform:translateY(8px) scale(.88)}

.raid-key-shop-title{margin-top:20px}
.raid-key-shop-note{margin-bottom:10px}
.raid-key-shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.raid-key-shop-card{
  display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:12px;
  min-height:108px;padding:13px;border-radius:12px;background:linear-gradient(145deg,#071522,#0a1d2d);
  border:1px solid #34566d;box-shadow:0 7px 18px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035);
}
.raid-key-shop-card.silver{border-color:#6f94a8;box-shadow:0 0 0 1px rgba(200,235,250,.08),0 0 14px rgba(118,195,229,.14),0 7px 18px rgba(0,0,0,.34)}
.raid-key-shop-card.gold{border-color:#ad8730;box-shadow:0 0 0 1px rgba(255,232,143,.08),0 0 14px rgba(232,181,56,.14),0 7px 18px rgba(0,0,0,.34)}
.raid-key-shop-card.mixed{border-color:#8d7d62;box-shadow:0 0 0 1px rgba(226,213,175,.07),0 0 14px rgba(182,164,116,.12),0 7px 18px rgba(0,0,0,.34)}
.raid-key-shop-art{display:flex;align-items:center;justify-content:center}
.raid-key-shop-copy strong{display:block;color:#e8d491;font:700 15px Cinzel;margin-bottom:4px}
.raid-key-shop-copy span{color:#7896a9;font-size:11px;line-height:1.4}
.raid-key-buy{min-width:112px}

.inventory-shell{display:grid;gap:12px}
.inventory-access-card{display:flex;justify-content:space-between;align-items:center;gap:16px;border-color:#66434a}
.inventory-access-card.active{border-color:#3f8066;box-shadow:0 0 16px rgba(82,203,150,.10)}
.inventory-access-cap{font:900 13px Cinzel;color:#e1c675;border:1px solid #775f2e;border-radius:999px;padding:8px 12px;white-space:nowrap}
.raid-key-inventory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.raid-key-inventory-card{
  display:grid;grid-template-columns:86px minmax(0,1fr);grid-template-areas:"art info" "button button";
  gap:8px 13px;padding:14px;border:1px solid #35546a;border-radius:12px;background:linear-gradient(145deg,#071522,#0a1c2a)
}
.raid-key-inventory-card.silver{border-color:#6a8e9f;box-shadow:0 0 15px rgba(132,207,235,.10)}
.raid-key-inventory-card.gold{border-color:#a7812e;box-shadow:0 0 15px rgba(231,183,54,.11)}
.raid-key-inventory-card>.raid-key-svg{grid-area:art}
.raid-key-info{grid-area:info}.raid-key-info h3{font:700 15px Cinzel;color:#e4d08e;margin:4px 0}.raid-key-info p{margin:0;color:#7895a7;font-size:11px}
.raid-key-qty{display:block;margin-top:7px;font-size:18px;color:#dcecf4}
.raid-key-use{grid-area:button;width:100%}
.raid-fragment-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:12px;padding:12px;border:1px solid #31536a;border-radius:10px;background:#071522}
.raid-fragment-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:2px dashed #93b4c4;color:#d8edf7;font-weight:900;background:#0a1d2a}
.inventory-owned-list{display:grid;gap:8px}
.inventory-owned-card{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-radius:10px;border:1px solid #31516a;background:#071522}
.inventory-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.inventory-rule-grid>div{padding:12px;border:1px solid #24465e;border-radius:9px;background:#071522}
.inventory-rule-grid b{display:block;color:#e2ca84;margin-bottom:5px}.inventory-rule-grid span{font-size:11px;color:#7894a6;line-height:1.45}

.raid-access-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.raid-access-banner.active{border-color:#3d7f62;box-shadow:0 0 16px rgba(73,205,143,.10)}
.raid-access-banner.locked{border-color:#6e4149}

/* Neon Premium leggero: più luce percepita usando bordi/shadow statiche,
   senza blur animati o filtri continui. */
.row:has([data-premium-benefit="cosmetic_rune_dorate"]){
  border-color:#43d78a!important;
  box-shadow:inset 0 0 0 1px rgba(95,255,161,.13),0 0 11px rgba(52,228,133,.18)!important;
  background:linear-gradient(145deg,rgba(6,38,29,.94),rgba(5,20,24,.98))!important;
}
.row:has([data-premium-benefit="cosmetic_essenza_ombra"]){
  border-color:#b169f2!important;
  box-shadow:inset 0 0 0 1px rgba(201,128,255,.13),0 0 11px rgba(166,85,238,.18)!important;
  background:linear-gradient(145deg,rgba(35,15,53,.94),rgba(12,13,28,.98))!important;
}
.row:has([data-premium-benefit="cosmetic_luna_cremisi"]){
  border-color:#ef5669!important;
  box-shadow:inset 0 0 0 1px rgba(255,106,124,.13),0 0 11px rgba(239,70,91,.18)!important;
  background:linear-gradient(145deg,rgba(51,15,24,.94),rgba(24,10,17,.98))!important;
}
.inventory-owned-card.premium-inventory-cosmetic_rune_dorate{border-color:#43d78a;box-shadow:0 0 10px rgba(52,228,133,.14)}
.inventory-owned-card.premium-inventory-cosmetic_essenza_ombra{border-color:#b169f2;box-shadow:0 0 10px rgba(166,85,238,.14)}
.inventory-owned-card.premium-inventory-cosmetic_luna_cremisi{border-color:#ef5669;box-shadow:0 0 10px rgba(239,70,91,.14)}

/* VIP 9: elimina l'anello/stella rotante sopra la foto.
   Mantiene bordo Diamante + particelle nette, senza blur GPU pesante. */
.avatar-vip-frame.vip-legend::before{display:none!important;content:none!important}
.avatar-vip-frame.vip-legend{
  animation:none!important;
  filter:none!important;
  border-color:#d8fbff!important;
  box-shadow:0 0 0 2px rgba(4,11,18,.96),0 0 9px rgba(216,251,255,.65),0 0 18px rgba(112,218,255,.28)!important
}
.avatar-vip-frame.vip-legend::after{
  display:block!important;
  content:""!important;
  inset:-13px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 84% 30%,#d9faff 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 94% 66%,#8ddfff 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 50% 96%,#fff 0 1.6px,transparent 2.9px),
    radial-gradient(circle at 11% 68%,#9fe9ff 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 16% 27%,#e4fbff 0 1.5px,transparent 2.8px)!important;
  filter:none!important;
  opacity:.86!important;
  animation:imVip9ParticlesLite 3.8s ease-in-out infinite!important
}
@keyframes imVip9ParticlesLite{0%,100%{opacity:.62;transform:scale(.985) rotate(0deg)}50%{opacity:.96;transform:scale(1.018) rotate(5deg)}}

/* Profilo mobile: riduce il carico continuo della GPU.
   Le particelle VIP9 restano attive ma solo con transform/opacity. */
body.im-mobile-performance .attack.vip-tap-8,
body.im-mobile-performance .attack.vip-tap-9,
body.im-mobile-performance .attack.vip-tap-10,
body.im-mobile-performance .attack.vip-tap-8::before,
body.im-mobile-performance .attack.vip-tap-8::after,
body.im-mobile-performance .attack.vip-tap-9::before,
body.im-mobile-performance .attack.vip-tap-9::after,
body.im-mobile-performance .attack.vip-tap-10::before,
body.im-mobile-performance .attack.vip-tap-10::after,
body.im-mobile-performance .avatar-vip-frame.vip-dragon,
body.im-mobile-performance .avatar-vip-frame.vip-imperial,
body.im-mobile-performance .avatar-vip-frame.vip-dragon::before,
body.im-mobile-performance .avatar-vip-frame.vip-imperial::before,
body.im-mobile-performance .avatar-vip-frame.vip-dragon::after,
body.im-mobile-performance .avatar-vip-frame.vip-imperial::after{
  animation:none!important;
  filter:none!important
}
body.im-mobile-performance .avatar-vip-frame.vip-legend::after{filter:none!important;animation:imVip9ParticlesLite 4.6s ease-in-out infinite!important}
body.im-mobile-performance .nav-btn.im-notify,
body.im-mobile-performance .city-main-destination.im-notify,
body.im-mobile-performance .city-sub-destination.im-notify,
body.im-mobile-performance .social-notify-dot,
body.im-mobile-performance .city-notify-dot{animation:none!important}
body.im-mobile-performance .class-art-panel::before{animation:none!important}
body.im-mobile-performance .raid-key-svg{filter:none!important}

/* Evita lavoro di paint per sezioni lunghe fuori viewport nelle schermate elenco. */
.inventory-shell>.card,.raid-key-shop-card{contain:layout paint}

.wiki-inline-key{display:inline-flex;vertical-align:middle;margin-right:6px}

@media(max-width:760px){
  .raid-key-shop-grid,.raid-key-inventory-grid,.inventory-rule-grid{grid-template-columns:1fr}
  .raid-key-shop-card{grid-template-columns:68px minmax(0,1fr);grid-template-areas:"art copy" "button button"}
  .raid-key-shop-art{grid-area:art}.raid-key-shop-copy{grid-area:copy}.raid-key-buy{grid-area:button;width:100%}
  .raid-key-svg{width:62px;height:62px}
  .inventory-access-card,.raid-access-banner{align-items:flex-start;flex-direction:column}
  .city-radial-group.personaggio{left:calc(50% - 46px)!important}
  .city-radial-group.inventario{left:calc(50% + 46px)!important}
}


/* ===== city-layout-premium-colors-vip9-bar-fix · 2026-09-27 ===== */
/* Città: nessun cambio verticale. Riallineamento solo orizzontale. */
.city-radial-group.personaggio{left:50%!important;top:29%!important}
.city-radial-group.arena{left:25%!important;top:80%!important}
.city-radial-group.regno{left:50%!important;top:80%!important}
.city-radial-group.inventario{left:75%!important;top:80%!important}

/* Zaino in stile cartoon coerente con le altre icone città. */
.city-inventory-cartoon{
  display:block;
  font-size:34px;
  line-height:1;
  filter:none;
  transform:translateY(1px);
}

/* Colori Premium corretti:
   Velo dell'Abisso = viola
   Corona Infernale = rosso
   Morsa Venefica = verde */
.row:has([data-premium-benefit="cosmetic_rune_dorate"]){
  border-color:#b169f2!important;
  box-shadow:inset 0 0 0 1px rgba(201,128,255,.13),0 0 11px rgba(166,85,238,.18)!important;
  background:linear-gradient(145deg,rgba(35,15,53,.94),rgba(12,13,28,.98))!important;
}
.row:has([data-premium-benefit="cosmetic_essenza_ombra"]){
  border-color:#ef5669!important;
  box-shadow:inset 0 0 0 1px rgba(255,106,124,.13),0 0 11px rgba(239,70,91,.18)!important;
  background:linear-gradient(145deg,rgba(51,15,24,.94),rgba(24,10,17,.98))!important;
}
.row:has([data-premium-benefit="cosmetic_luna_cremisi"]){
  border-color:#43d78a!important;
  box-shadow:inset 0 0 0 1px rgba(95,255,161,.13),0 0 11px rgba(52,228,133,.18)!important;
  background:linear-gradient(145deg,rgba(6,38,29,.94),rgba(5,20,24,.98))!important;
}
.inventory-owned-card.premium-inventory-cosmetic_rune_dorate{
  border-color:#b169f2!important;
  box-shadow:0 0 10px rgba(166,85,238,.14)!important;
}
.inventory-owned-card.premium-inventory-cosmetic_essenza_ombra{
  border-color:#ef5669!important;
  box-shadow:0 0 10px rgba(239,70,91,.14)!important;
}
.inventory-owned-card.premium-inventory-cosmetic_luna_cremisi{
  border-color:#43d78a!important;
  box-shadow:0 0 10px rgba(52,228,133,.14)!important;
}

/* VIP 9 Battaglia: estende la luce inferiore fino ai bordi della barra. */
.attack.vip-tap-9::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  top:auto!important;
  bottom:0!important;
  height:58%!important;
  border-radius:0 0 22px 22px!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 8% 100%,rgba(190,247,255,.86),transparent 42%),
    radial-gradient(ellipse at 32% 94%,rgba(255,255,255,.88),transparent 40%),
    radial-gradient(ellipse at 58% 100%,rgba(104,218,255,.80),transparent 42%),
    radial-gradient(ellipse at 88% 94%,rgba(211,250,255,.86),transparent 40%)!important;
  transform-origin:center bottom!important;
}

@media(max-width:760px){
  .city-inventory-cartoon{font-size:30px}
  .city-radial-group.personaggio{left:50%!important}
  .city-radial-group.arena{left:25%!important}
  .city-radial-group.regno{left:50%!important}
  .city-radial-group.inventario{left:75%!important}
}


/* ===== vip9-vip10-ranking-header-sync · 2026-09-27 =====
   VIP9: stesso effetto Diamante anche in classifica.
   VIP10: stesso linguaggio visivo del VIP9, mantenendo la palette oro esistente. */

/* ---------- VIP 9 · CLASSIFICA ---------- */
.rank-frame.vip-legend{
  border-color:#d8fbff!important;
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 9px rgba(216,251,255,.72),
    0 0 18px rgba(112,218,255,.34)!important;
  animation:none!important;
}
.rank-frame.vip-legend::before{
  display:none!important;
  content:none!important;
}
.rank-frame.vip-legend::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-9px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 84% 30%,#d9faff 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 94% 66%,#8ddfff 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 50% 96%,#fff 0 1.45px,transparent 2.7px),
    radial-gradient(circle at 11% 68%,#9fe9ff 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 16% 27%,#e4fbff 0 1.35px,transparent 2.6px)!important;
  filter:none!important;
  opacity:.9!important;
  animation:imVipRankParticlesLite 3.6s ease-in-out infinite!important;
}
.rank-vip-badge.vip-legend{
  color:#e9fdff!important;
  border-color:#d8fbff!important;
  box-shadow:0 2px 7px rgba(0,0,0,.6),0 0 8px rgba(136,226,255,.78)!important;
}

/* ---------- VIP 10 · HEADER ---------- */
/* Mantiene l'oro attuale: cambia solo la forma dell'effetto, resa uguale al VIP9. */
.avatar-vip-frame.vip-imperial{
  animation:none!important;
  filter:none!important;
  border-color:#fff0a2!important;
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 9px rgba(255,240,162,.72),
    0 0 18px rgba(255,212,90,.38),
    0 0 30px rgba(212,160,48,.18)!important;
}
.avatar-vip-frame.vip-imperial::before{
  display:none!important;
  content:none!important;
}
.avatar-vip-frame.vip-imperial::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-13px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 84% 30%,#fff4bd 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 94% 66%,#ffd45a 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 50% 96%,#fff8cf 0 1.6px,transparent 2.9px),
    radial-gradient(circle at 11% 68%,#e8b943 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 16% 27%,#fff0a2 0 1.5px,transparent 2.8px)!important;
  filter:none!important;
  opacity:.9!important;
  animation:imVip10ParticlesLite 3.8s ease-in-out infinite!important;
}
.avatar-vip-label.vip-imperial{
  border-color:#fff0a2!important;
  color:#fff8cf!important;
  box-shadow:
    0 0 7px rgba(255,221,108,.48),
    0 3px 8px rgba(0,0,0,.45)!important;
}

/* ---------- VIP 10 · CLASSIFICA ---------- */
.rank-frame.vip-imperial{
  border-color:#fff0a2!important;
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 9px rgba(255,240,162,.74),
    0 0 18px rgba(255,212,90,.38)!important;
  animation:none!important;
}
.rank-frame.vip-imperial::before{
  display:none!important;
  content:none!important;
}
.rank-frame.vip-imperial::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-9px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 84% 30%,#fff4bd 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 94% 66%,#ffd45a 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 50% 96%,#fff8cf 0 1.45px,transparent 2.7px),
    radial-gradient(circle at 11% 68%,#e8b943 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 16% 27%,#fff0a2 0 1.35px,transparent 2.6px)!important;
  filter:none!important;
  opacity:.9!important;
  animation:imVipRankParticlesLite 3.6s ease-in-out infinite!important;
}
.rank-vip-badge.vip-imperial{
  color:#fff8cf!important;
  border-color:#fff0a2!important;
  box-shadow:0 2px 7px rgba(0,0,0,.6),0 0 8px rgba(255,212,90,.82)!important;
}

@keyframes imVipRankParticlesLite{
  0%,100%{opacity:.60;transform:scale(.985) rotate(0deg)}
  50%{opacity:1;transform:scale(1.025) rotate(5deg)}
}
@keyframes imVip10ParticlesLite{
  0%,100%{opacity:.62;transform:scale(.985) rotate(0deg)}
  50%{opacity:.98;transform:scale(1.018) rotate(5deg)}
}

/* Su mobile manteniamo visibili VIP9/VIP10: solo transform+opacity, niente blur. */
body.im-mobile-performance .avatar-vip-frame.vip-imperial::after{
  display:block!important;
  filter:none!important;
  animation:imVip10ParticlesLite 4.8s ease-in-out infinite!important;
}
body.im-mobile-performance .rank-frame.vip-legend::after,
body.im-mobile-performance .rank-frame.vip-imperial::after{
  display:block!important;
  filter:none!important;
  animation:imVipRankParticlesLite 4.8s ease-in-out infinite!important;
}

@media(prefers-reduced-motion:reduce){
  .avatar-vip-frame.vip-imperial::after,
  .rank-frame.vip-legend::after,
  .rank-frame.vip-imperial::after{animation:none!important}
}


/* ===== vip8-ranking-header-sync · 2026-09-27 =====
   VIP8: stesso linguaggio visivo pulito del VIP9,
   mantenendo integralmente la palette verde esistente.
   Applicato sia all'header sia alla classifica. */

/* ---------- VIP 8 · HEADER ---------- */
.avatar-vip-frame.vip-dragon{
  animation:none!important;
  filter:none!important;
  border-color:#72d58b!important;
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 9px rgba(114,213,139,.70),
    0 0 18px rgba(86,192,112,.34),
    0 0 30px rgba(65,148,87,.16)!important;
}
.avatar-vip-frame.vip-dragon::before{
  display:none!important;
  content:none!important;
}
.avatar-vip-frame.vip-dragon::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-13px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 5%,#f4fff5 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 84% 30%,#b9ff91 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 94% 66%,#72d58b 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 50% 96%,#eaffdf 0 1.6px,transparent 2.9px),
    radial-gradient(circle at 11% 68%,#57a96b 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 16% 27%,#a8ee83 0 1.5px,transparent 2.8px)!important;
  filter:none!important;
  opacity:.90!important;
  animation:imVip8ParticlesLite 3.8s ease-in-out infinite!important;
}
.avatar-vip-label.vip-dragon{
  border-color:#72d58b!important;
  color:#dfffe7!important;
  box-shadow:
    0 0 7px rgba(114,213,139,.46),
    0 3px 8px rgba(0,0,0,.45)!important;
}

/* ---------- VIP 8 · CLASSIFICA ---------- */
.rank-frame.vip-dragon{
  border-color:#72d58b!important;
  box-shadow:
    0 0 0 2px rgba(4,11,18,.96),
    0 0 9px rgba(114,213,139,.72),
    0 0 18px rgba(86,192,112,.34)!important;
  animation:none!important;
}
.rank-frame.vip-dragon::before{
  display:none!important;
  content:none!important;
}
.rank-frame.vip-dragon::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-9px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 5%,#f4fff5 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 84% 30%,#b9ff91 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 94% 66%,#72d58b 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 50% 96%,#eaffdf 0 1.45px,transparent 2.7px),
    radial-gradient(circle at 11% 68%,#57a96b 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 16% 27%,#a8ee83 0 1.35px,transparent 2.6px)!important;
  filter:none!important;
  opacity:.9!important;
  animation:imVipRankParticlesLite 3.6s ease-in-out infinite!important;
}
.rank-vip-badge.vip-dragon{
  color:#dfffe7!important;
  border-color:#72d58b!important;
  box-shadow:0 2px 7px rgba(0,0,0,.6),0 0 8px rgba(86,192,112,.80)!important;
}

@keyframes imVip8ParticlesLite{
  0%,100%{opacity:.62;transform:scale(.985) rotate(0deg)}
  50%{opacity:.98;transform:scale(1.018) rotate(5deg)}
}

body.im-mobile-performance .avatar-vip-frame.vip-dragon::after{
  display:block!important;
  filter:none!important;
  animation:imVip8ParticlesLite 4.8s ease-in-out infinite!important;
}
body.im-mobile-performance .rank-frame.vip-dragon::after{
  display:block!important;
  filter:none!important;
  animation:imVipRankParticlesLite 4.8s ease-in-out infinite!important;
}

@media(prefers-reduced-motion:reduce){
  .avatar-vip-frame.vip-dragon::after,
  .rank-frame.vip-dragon::after{animation:none!important}
}


/* ===== vip8-vip9-attack-bars-match-vip10 · 2026-09-27 =====
   VIP8 e VIP9 usano la stessa tipologia visiva della barra VIP10:
   bordo pieno, gradiente orizzontale simmetrico, centro luminoso,
   glow esterno e nessun pseudo-effetto aggiuntivo.
   Cambiano soltanto i colori originali dei rispettivi VIP. */

/* ---------- VIP 8 · VERDE, struttura VIP10 ---------- */
.attack.vip-tap-8,
#raidAttackBtn.vip-tap-8,
#floorAttackBtn.vip-tap-8,
#timeTrialAttackBtn.vip-tap-8,
#clanBossAttackBtn.vip-tap-8{
  border:2px solid #7bf0a0!important;
  background:
    linear-gradient(
      90deg,
      #17351f 0%,
      #2e7b49 26%,
      #72d58b 50%,
      #2e7b49 74%,
      #17351f 100%
    )!important;
  color:#effff3!important;
  text-shadow:
    0 0 7px rgba(239,255,243,.96),
    0 0 12px rgba(114,213,139,.76)!important;
  box-shadow:
    inset 0 0 0 2px rgba(210,255,220,.14),
    0 0 20px rgba(114,213,139,.52),
    0 7px 20px rgba(0,0,0,.68)!important;
  animation:none!important;
}

/* ---------- VIP 9 · DIAMANTE, struttura VIP10 ---------- */
.attack.vip-tap-9,
#raidAttackBtn.vip-tap-9,
#floorAttackBtn.vip-tap-9,
#timeTrialAttackBtn.vip-tap-9,
#clanBossAttackBtn.vip-tap-9{
  border:2px solid #d8fbff!important;
  background:
    linear-gradient(
      90deg,
      #14303b 0%,
      #2b6676 26%,
      #9feeff 50%,
      #2b6676 74%,
      #14303b 100%
    )!important;
  color:#f4feff!important;
  text-shadow:
    0 0 7px rgba(255,255,255,.98),
    0 0 12px rgba(153,235,255,.78)!important;
  box-shadow:
    inset 0 0 0 2px rgba(220,251,255,.15),
    0 0 20px rgba(153,235,255,.54),
    0 7px 20px rgba(0,0,0,.68)!important;
  animation:none!important;
}

/* Come VIP10: niente sweep, fiamme, stelle o pseudo-elementi esterni. */
.attack.vip-tap-8::before,
.attack.vip-tap-8::after,
.attack.vip-tap-9::before,
.attack.vip-tap-9::after,
#raidAttackBtn.vip-tap-8::before,
#raidAttackBtn.vip-tap-8::after,
#floorAttackBtn.vip-tap-8::before,
#floorAttackBtn.vip-tap-8::after,
#timeTrialAttackBtn.vip-tap-8::before,
#timeTrialAttackBtn.vip-tap-8::after,
#clanBossAttackBtn.vip-tap-8::before,
#clanBossAttackBtn.vip-tap-8::after,
#raidAttackBtn.vip-tap-9::before,
#raidAttackBtn.vip-tap-9::after,
#floorAttackBtn.vip-tap-9::before,
#floorAttackBtn.vip-tap-9::after,
#timeTrialAttackBtn.vip-tap-9::before,
#timeTrialAttackBtn.vip-tap-9::after,
#clanBossAttackBtn.vip-tap-9::before,
#clanBossAttackBtn.vip-tap-9::after{
  display:none!important;
  content:none!important;
}


/* ===== city-backpack-svg-fix · 2026-09-27 ===== */
.city-inventory-cartoon{display:none!important}
.city-inventory-svg{
  display:block!important;
  width:38px!important;
  height:38px!important;
  overflow:visible!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))!important;
}
@media(max-width:760px){
  .city-inventory-svg{width:34px!important;height:34px!important}
}


/* ===== top-profile-space-vip-particles-8-9-10 · 2026-09-27 =====
   Più respiro al profilo in alto; particelle VIP8/9/10 più numerose ma
   contenute all'interno dell'area visibile. */
@media(min-width:901px){
  .topbar{height:92px!important}
  .top{
    grid-template-columns:350px minmax(180px,1fr) 390px!important;
    gap:24px!important;
    padding:0 24px!important;
  }
  .player{gap:15px!important;padding-left:6px!important}
  .avatar-vip{width:78px!important;height:78px!important}
  .avatar{width:64px!important;height:64px!important}
  .player-meta{min-width:0;max-width:245px}
  .player-name{font-size:16px!important;max-width:230px}
  .player-title{max-width:230px!important}
  .layout{min-height:calc(100vh - 92px)!important}
  nav{top:92px!important;height:calc(100vh - 92px)!important}
}

/* Tablet/mobile: conserva spazio tra identità e riquadri risorse. */
@media(max-width:900px){
  .topbar{height:84px!important}
  .top{height:100%!important;gap:12px!important;padding:0 12px!important}
  .player{gap:9px!important;min-width:170px!important;padding-left:3px}
  .avatar-vip{width:68px!important;height:68px!important}
  .avatar{width:54px!important;height:54px!important}
  .player-meta{min-width:0;max-width:160px}
  .player-name{max-width:155px!important}
  .player-title{max-width:155px!important}
}
@media(max-width:560px){
  .topbar{height:82px!important}
  .top{gap:7px!important;padding:0 8px!important}
  .player{min-width:145px!important;gap:7px!important}
  .avatar-vip{width:65px!important;height:65px!important}
  .avatar{width:50px!important;height:50px!important}
  .player-meta{max-width:118px}
  .player-name{max-width:116px!important}
  .player-title{max-width:116px!important}
}

/* VIP8: verde originale, più particelle e margini sicuri. */
.avatar-vip-frame.vip-dragon::after{
  inset:-8px!important;
  background:
    radial-gradient(circle at 50% 9%,#f4fff5 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 72% 13%,#b9ff91 0 1.35px,transparent 2.7px),
    radial-gradient(circle at 88% 34%,#72d58b 0 1.45px,transparent 2.8px),
    radial-gradient(circle at 91% 63%,#dfffe7 0 1.3px,transparent 2.6px),
    radial-gradient(circle at 76% 84%,#57a96b 0 1.45px,transparent 2.8px),
    radial-gradient(circle at 52% 92%,#f4fff5 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 28% 87%,#a8ee83 0 1.35px,transparent 2.7px),
    radial-gradient(circle at 12% 67%,#72d58b 0 1.4px,transparent 2.8px),
    radial-gradient(circle at 14% 39%,#dfffe7 0 1.3px,transparent 2.6px),
    radial-gradient(circle at 31% 17%,#b9ff91 0 1.45px,transparent 2.8px)!important;
}

/* VIP9: diamante originale. */
.avatar-vip-frame.vip-legend::after{
  inset:-8px!important;
  background:
    radial-gradient(circle at 50% 9%,#ffffff 0 1.55px,transparent 2.9px),
    radial-gradient(circle at 72% 13%,#d9faff 0 1.35px,transparent 2.7px),
    radial-gradient(circle at 88% 34%,#8ddfff 0 1.45px,transparent 2.8px),
    radial-gradient(circle at 91% 63%,#e9fdff 0 1.3px,transparent 2.6px),
    radial-gradient(circle at 76% 84%,#9fe9ff 0 1.45px,transparent 2.8px),
    radial-gradient(circle at 52% 92%,#ffffff 0 1.55px,transparent 2.9px),
    radial-gradient(circle at 28% 87%,#b8f3ff 0 1.35px,transparent 2.7px),
    radial-gradient(circle at 12% 67%,#8cddff 0 1.4px,transparent 2.8px),
    radial-gradient(circle at 14% 39%,#e4fbff 0 1.3px,transparent 2.6px),
    radial-gradient(circle at 31% 17%,#d8fbff 0 1.45px,transparent 2.8px)!important;
}

/* VIP10: oro originale, identica densità/posizione particelle. */
.avatar-vip-frame.vip-imperial::after{
  inset:-8px!important;
  background:
    radial-gradient(circle at 50% 9%,#ffffff 0 1.55px,transparent 2.9px),
    radial-gradient(circle at 72% 13%,#fff4bd 0 1.35px,transparent 2.7px),
    radial-gradient(circle at 88% 34%,#ffd45a 0 1.45px,transparent 2.8px),
    radial-gradient(circle at 91% 63%,#fff8cf 0 1.3px,transparent 2.6px),
    radial-gradient(circle at 76% 84%,#e8b943 0 1.45px,transparent 2.8px),
    radial-gradient(circle at 52% 92%,#ffffff 0 1.55px,transparent 2.9px),
    radial-gradient(circle at 28% 87%,#ffe98f 0 1.35px,transparent 2.7px),
    radial-gradient(circle at 12% 67%,#ffd45a 0 1.4px,transparent 2.8px),
    radial-gradient(circle at 14% 39%,#fff4bd 0 1.3px,transparent 2.6px),
    radial-gradient(circle at 31% 17%,#fff0a2 0 1.45px,transparent 2.8px)!important;
}

/* Nessun blur ampio: più punti visibili con costo GPU contenuto. */
.avatar-vip-frame.vip-dragon::after,
.avatar-vip-frame.vip-legend::after,
.avatar-vip-frame.vip-imperial::after{
  filter:
    drop-shadow(0 0 2px currentColor)
    drop-shadow(0 0 4px currentColor)!important;
  opacity:.94!important;
}


/* ===== mobile-thermal-vip-particles-scroll-layer-fix · 2026-09-27 ===== */

/* Lo stack combattimento resta SEMPRE sotto l'header sticky.
   isolation impedisce alla ribbon Premium z-index 75 di uscire dallo stacking context. */
.topbar{
  z-index:100!important;
  isolation:isolate!important;
}
.combat-art-shell{
  position:relative!important;
  z-index:1!important;
  isolation:isolate!important;
}
.premium-combat-ribbon,
#premiumCombatFrame{
  will-change:auto!important;
}

/* VIP 8/9/10: particelle appena FUORI dal bordo, non troppo interne e non
   abbastanza esterne da finire fuori schermo. Più punti, più luminosi. */
.avatar-vip-frame.vip-dragon::after,
.avatar-vip-frame.vip-legend::after,
.avatar-vip-frame.vip-imperial::after{
  inset:-5px!important;
  border-radius:50%!important;
  opacity:1!important;
  pointer-events:none!important;
}

/* VIP8 · verde */
.avatar-vip-frame.vip-dragon::after{
  background:
    radial-gradient(circle at 50% 1%,#f4fff5 0 2px,transparent 3.2px),
    radial-gradient(circle at 68% 5%,#b9ff91 0 1.7px,transparent 3px),
    radial-gradient(circle at 84% 16%,#72d58b 0 1.9px,transparent 3.1px),
    radial-gradient(circle at 96% 36%,#dfffe7 0 1.7px,transparent 3px),
    radial-gradient(circle at 98% 58%,#72d58b 0 1.8px,transparent 3px),
    radial-gradient(circle at 87% 80%,#a8ee83 0 1.8px,transparent 3px),
    radial-gradient(circle at 68% 94%,#57a96b 0 1.8px,transparent 3px),
    radial-gradient(circle at 48% 99%,#f4fff5 0 1.9px,transparent 3.1px),
    radial-gradient(circle at 28% 94%,#b9ff91 0 1.7px,transparent 3px),
    radial-gradient(circle at 10% 79%,#72d58b 0 1.8px,transparent 3px),
    radial-gradient(circle at 2% 57%,#dfffe7 0 1.7px,transparent 3px),
    radial-gradient(circle at 4% 34%,#57a96b 0 1.8px,transparent 3px),
    radial-gradient(circle at 17% 15%,#a8ee83 0 1.8px,transparent 3px),
    radial-gradient(circle at 33% 5%,#dfffe7 0 1.7px,transparent 3px)!important;
}

/* VIP9 · diamante */
.avatar-vip-frame.vip-legend::after{
  background:
    radial-gradient(circle at 50% 1%,#fff 0 2px,transparent 3.2px),
    radial-gradient(circle at 68% 5%,#d9faff 0 1.7px,transparent 3px),
    radial-gradient(circle at 84% 16%,#8ddfff 0 1.9px,transparent 3.1px),
    radial-gradient(circle at 96% 36%,#e9fdff 0 1.7px,transparent 3px),
    radial-gradient(circle at 98% 58%,#8ddfff 0 1.8px,transparent 3px),
    radial-gradient(circle at 87% 80%,#b8f3ff 0 1.8px,transparent 3px),
    radial-gradient(circle at 68% 94%,#9fe9ff 0 1.8px,transparent 3px),
    radial-gradient(circle at 48% 99%,#fff 0 1.9px,transparent 3.1px),
    radial-gradient(circle at 28% 94%,#d9faff 0 1.7px,transparent 3px),
    radial-gradient(circle at 10% 79%,#8cddff 0 1.8px,transparent 3px),
    radial-gradient(circle at 2% 57%,#e4fbff 0 1.7px,transparent 3px),
    radial-gradient(circle at 4% 34%,#9fe9ff 0 1.8px,transparent 3px),
    radial-gradient(circle at 17% 15%,#b8f3ff 0 1.8px,transparent 3px),
    radial-gradient(circle at 33% 5%,#fff 0 1.7px,transparent 3px)!important;
}

/* VIP10 · oro */
.avatar-vip-frame.vip-imperial::after{
  background:
    radial-gradient(circle at 50% 1%,#fff 0 2px,transparent 3.2px),
    radial-gradient(circle at 68% 5%,#fff4bd 0 1.7px,transparent 3px),
    radial-gradient(circle at 84% 16%,#ffd45a 0 1.9px,transparent 3.1px),
    radial-gradient(circle at 96% 36%,#fff8cf 0 1.7px,transparent 3px),
    radial-gradient(circle at 98% 58%,#ffd45a 0 1.8px,transparent 3px),
    radial-gradient(circle at 87% 80%,#ffe98f 0 1.8px,transparent 3px),
    radial-gradient(circle at 68% 94%,#e8b943 0 1.8px,transparent 3px),
    radial-gradient(circle at 48% 99%,#fff 0 1.9px,transparent 3.1px),
    radial-gradient(circle at 28% 94%,#fff4bd 0 1.7px,transparent 3px),
    radial-gradient(circle at 10% 79%,#ffd45a 0 1.8px,transparent 3px),
    radial-gradient(circle at 2% 57%,#fff8cf 0 1.7px,transparent 3px),
    radial-gradient(circle at 4% 34%,#e8b943 0 1.8px,transparent 3px),
    radial-gradient(circle at 17% 15%,#ffe98f 0 1.8px,transparent 3px),
    radial-gradient(circle at 33% 5%,#fff0a2 0 1.7px,transparent 3px)!important;
}

@keyframes imVipParticleBreathUltraLite{
  0%,100%{opacity:.76;transform:scale(.99)}
  50%{opacity:1;transform:scale(1.012)}
}

/* Desktop: un solo movimento leggerissimo. */
@media(min-width:901px){
  .avatar-vip-frame.vip-dragon::after,
  .avatar-vip-frame.vip-legend::after,
  .avatar-vip-frame.vip-imperial::after{
    filter:none!important;
    animation:imVipParticleBreathUltraLite 4.8s ease-in-out infinite!important;
  }
}

/* MOBILE THERMAL MODE
   Priorità: ridurre GPU/compositing mantenendo la grafica leggibile. */
body.im-mobile-performance .topbar{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:#030a10!important;
  box-shadow:0 4px 10px rgba(0,0,0,.34)!important;
}
body.im-mobile-performance .premium-combat-ribbon{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 3px 8px rgba(0,0,0,.34)!important;
}
body.im-mobile-performance #premiumCombatFrame.frame-abyss,
body.im-mobile-performance #premiumCombatFrame.frame-inferno,
body.im-mobile-performance #premiumCombatFrame.frame-venom{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 7px rgba(0,0,0,.28)!important;
}
body.im-mobile-performance .avatar-vip-frame.vip-dragon,
body.im-mobile-performance .avatar-vip-frame.vip-legend,
body.im-mobile-performance .avatar-vip-frame.vip-imperial{
  animation:none!important;
  filter:none!important;
}
body.im-mobile-performance .avatar-vip-frame.vip-dragon::after,
body.im-mobile-performance .avatar-vip-frame.vip-legend::after,
body.im-mobile-performance .avatar-vip-frame.vip-imperial::after{
  animation:none!important;
  filter:none!important;
  opacity:1!important;
}
body.im-mobile-performance .rank-frame.vip-dragon,
body.im-mobile-performance .rank-frame.vip-legend,
body.im-mobile-performance .rank-frame.vip-imperial,
body.im-mobile-performance .rank-frame.vip-dragon::after,
body.im-mobile-performance .rank-frame.vip-legend::after,
body.im-mobile-performance .rank-frame.vip-imperial::after{
  animation:none!important;
  filter:none!important;
}
body.im-mobile-performance .attack.vip-tap-8,
body.im-mobile-performance .attack.vip-tap-9,
body.im-mobile-performance .attack.vip-tap-10,
body.im-mobile-performance .attack.vip-tap-8::before,
body.im-mobile-performance .attack.vip-tap-8::after,
body.im-mobile-performance .attack.vip-tap-9::before,
body.im-mobile-performance .attack.vip-tap-9::after,
body.im-mobile-performance .attack.vip-tap-10::before,
body.im-mobile-performance .attack.vip-tap-10::after{
  animation:none!important;
  filter:none!important;
}
body.im-mobile-performance .damage-pop{
  text-shadow:0 2px 4px rgba(0,0,0,.78)!important;
}
body.im-mobile-performance .damage-pop.auto{
  animation-duration:.5s!important;
}

/* Lo scroll della battaglia non deve mai portare cornice/fascia Premium sopra
   il profilo sticky: tutto il riquadro combattimento passa sotto l'header. */
main,
.home-grid,
.combat-visual-stack{
  position:relative;
  z-index:0;
}
.topbar{
  transform:translateZ(0);
}


/* ===== premium-layer-vip6particles-backpack-size · 2026-09-27 ===== */

/* ---- Premium combat layering ----
   image < premium frame < premium ribbon, while the whole combat block
   remains under the sticky topbar because .combat-art-shell is isolated. */
.combat-art-shell{
  position:relative!important;
  z-index:1!important;
  isolation:isolate!important;
}
.combat-art-shell>img,
.combat-art-shell>[data-combat-art]{
  position:relative!important;
  z-index:1!important;
}
#premiumCombatFrame{
  display:none;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
}
#premiumCombatFrame.active{
  display:block!important;
}
.premium-combat-ribbon{
  z-index:4!important;
}
.topbar{
  z-index:100!important;
  isolation:isolate!important;
}

/* ---- Backpack larger, same approved SVG ---- */
.city-inventory-svg{
  width:46px!important;
  height:46px!important;
}
@media(max-width:760px){
  .city-inventory-svg{
    width:42px!important;
    height:42px!important;
  }
}

/* ---- VIP header: 6 moving particles, just outside the circle ---- */
@keyframes imVipSixParticleOrbit{
  0%,100%{transform:rotate(0deg) scale(1);opacity:.78}
  50%{transform:rotate(7deg) scale(1.025);opacity:1}
}

.avatar-vip-frame.vip-dragon::after,
.avatar-vip-frame.vip-legend::after,
.avatar-vip-frame.vip-imperial::after{
  inset:-9px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  filter:none!important;
  opacity:.98!important;
  animation:imVipSixParticleOrbit 4.2s ease-in-out infinite!important;
}

.avatar-vip-frame.vip-dragon::after{
  background:
    radial-gradient(circle at 50% 0%,#f4fff5 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 90% 24%,#b9ff91 0 1.7px,transparent 3px),
    radial-gradient(circle at 92% 76%,#72d58b 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 50% 100%,#dfffe7 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 8% 76%,#57a96b 0 1.7px,transparent 3px),
    radial-gradient(circle at 10% 24%,#a8ee83 0 1.8px,transparent 3.1px)!important;
}
.avatar-vip-frame.vip-legend::after{
  background:
    radial-gradient(circle at 50% 0%,#ffffff 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 90% 24%,#d9faff 0 1.7px,transparent 3px),
    radial-gradient(circle at 92% 76%,#8ddfff 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 50% 100%,#e9fdff 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 8% 76%,#9fe9ff 0 1.7px,transparent 3px),
    radial-gradient(circle at 10% 24%,#b8f3ff 0 1.8px,transparent 3.1px)!important;
}
.avatar-vip-frame.vip-imperial::after{
  background:
    radial-gradient(circle at 50% 0%,#ffffff 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 90% 24%,#fff4bd 0 1.7px,transparent 3px),
    radial-gradient(circle at 92% 76%,#ffd45a 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 50% 100%,#fff8cf 0 1.8px,transparent 3.1px),
    radial-gradient(circle at 8% 76%,#e8b943 0 1.7px,transparent 3px),
    radial-gradient(circle at 10% 24%,#ffe98f 0 1.8px,transparent 3.1px)!important;
}

/* Keep animation on mobile too, but only transform+opacity. */
body.im-mobile-performance .avatar-vip-frame.vip-dragon::after,
body.im-mobile-performance .avatar-vip-frame.vip-legend::after,
body.im-mobile-performance .avatar-vip-frame.vip-imperial::after{
  animation:imVipSixParticleOrbit 5.2s ease-in-out infinite!important;
  filter:none!important;
}

/* ---- Ranking: same 6-particle language ---- */
.rank-frame.vip-dragon::after,
.rank-frame.vip-legend::after,
.rank-frame.vip-imperial::after{
  inset:-7px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  filter:none!important;
  opacity:.96!important;
  animation:imVipSixParticleOrbit 4.4s ease-in-out infinite!important;
}
.rank-frame.vip-dragon::after{
  background:
    radial-gradient(circle at 50% 0%,#f4fff5 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 90% 24%,#b9ff91 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 92% 76%,#72d58b 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 50% 100%,#dfffe7 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 8% 76%,#57a96b 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 10% 24%,#a8ee83 0 1.5px,transparent 2.7px)!important;
}
.rank-frame.vip-legend::after{
  background:
    radial-gradient(circle at 50% 0%,#ffffff 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 90% 24%,#d9faff 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 92% 76%,#8ddfff 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 50% 100%,#e9fdff 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 8% 76%,#9fe9ff 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 10% 24%,#b8f3ff 0 1.5px,transparent 2.7px)!important;
}
.rank-frame.vip-imperial::after{
  background:
    radial-gradient(circle at 50% 0%,#ffffff 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 90% 24%,#fff4bd 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 92% 76%,#ffd45a 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 50% 100%,#fff8cf 0 1.5px,transparent 2.7px),
    radial-gradient(circle at 8% 76%,#e8b943 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 10% 24%,#ffe98f 0 1.5px,transparent 2.7px)!important;
}
body.im-mobile-performance .rank-frame.vip-dragon::after,
body.im-mobile-performance .rank-frame.vip-legend::after,
body.im-mobile-performance .rank-frame.vip-imperial::after{
  animation:imVipSixParticleOrbit 5.4s ease-in-out infinite!important;
  filter:none!important;
}


/* ===== nav-sharp-premium-frame-fullparticles-v10 · 2026-09-27 ===== */

/* ---------------------------------------------------------
   NAV MOBILE — immagini a pixel interi, niente scaling frazionario.
   Battaglia mantiene la dimensione attuale; le altre principali +8%.
   --------------------------------------------------------- */
@media(max-width:900px){
  nav#nav .nav-btn .nav-icon{
    overflow:visible!important;
  }

  nav#nav .nav-btn[data-page="home"] .nav-icon{
    width:52px!important;
    height:52px!important;
    flex:0 0 52px!important;
  }
  nav#nav .nav-btn[data-page="home"] .nav-icon img{
    width:52px!important;
    height:52px!important;
    max-width:52px!important;
    left:0!important;
    top:0!important;
    transform:none!important;
    object-fit:contain!important;
    image-rendering:-webkit-optimize-contrast;
  }

  nav#nav .nav-btn[data-page="adventure"] .nav-icon,
  nav#nav .nav-btn[data-page="city"] .nav-icon,
  nav#nav .nav-btn[data-page="raid"] .nav-icon,
  nav#nav .nav-btn[data-page="dungeon"] .nav-icon{
    width:56px!important;
    height:56px!important;
    flex:0 0 56px!important;
  }
  nav#nav .nav-btn[data-page="adventure"] .nav-icon img,
  nav#nav .nav-btn[data-page="city"] .nav-icon img,
  nav#nav .nav-btn[data-page="raid"] .nav-icon img,
  nav#nav .nav-btn[data-page="dungeon"] .nav-icon img{
    width:56px!important;
    height:56px!important;
    max-width:56px!important;
    left:0!important;
    top:0!important;
    transform:none!important;
    object-fit:contain!important;
    image-rendering:-webkit-optimize-contrast;
  }

  /* SVG delle altre voci: leggermente più grandi ma raster-free. */
  nav#nav .nav-btn:not([data-page="home"]) .nav-icon svg{
    width:29px!important;
    height:29px!important;
    shape-rendering:geometricPrecision;
  }
}

/* ---------------------------------------------------------
   PREMIUM FRAME — visibilità forzata all'interno dell'immagine.
   Il bordo viene disegnato verso l'interno così non viene tagliato.
   --------------------------------------------------------- */
.combat-art-shell{
  overflow:hidden!important;
  isolation:isolate!important;
}
.combat-art-shell>img,
.combat-art-shell>[data-combat-art]{
  position:relative!important;
  z-index:1!important;
}
#premiumCombatFrame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:6!important;
  border-radius:inherit!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
  opacity:1!important;
}
#premiumCombatFrame.active{
  display:block!important;
  visibility:visible!important;
}
#premiumCombatFrame.active.frame-abyss{
  border:4px solid #b169f2!important;
  box-shadow:
    inset 0 0 0 2px rgba(232,197,255,.52),
    inset 0 0 16px rgba(177,105,242,.34)!important;
}
#premiumCombatFrame.active.frame-inferno{
  border:4px solid #ef5669!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,190,198,.48),
    inset 0 0 16px rgba(239,86,105,.34)!important;
}
#premiumCombatFrame.active.frame-venom{
  border:4px solid #43d78a!important;
  box-shadow:
    inset 0 0 0 2px rgba(181,255,213,.46),
    inset 0 0 16px rgba(67,215,138,.32)!important;
}
.premium-combat-ribbon{
  z-index:7!important;
}

/* ---------------------------------------------------------
   VIP 8 / 9 / 10 — 6 pallini PIENI, più sparsi e non geometrici.
   Coordinate tenute lontane dai bordi del pseudo-elemento così
   nessun pallino viene tagliato a metà.
   --------------------------------------------------------- */
@keyframes imVipSixDotsDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg);opacity:.80}
  34%{transform:translate3d(1px,-2px,0) rotate(2deg);opacity:1}
  68%{transform:translate3d(-1px,1px,0) rotate(5deg);opacity:.91}
}

.avatar-vip-frame.vip-dragon::after,
.avatar-vip-frame.vip-legend::after,
.avatar-vip-frame.vip-imperial::after{
  inset:-12px!important;
  border-radius:50%!important;
  overflow:visible!important;
  background-repeat:no-repeat!important;
  animation:imVipSixDotsDrift 4.6s ease-in-out infinite!important;
  filter:none!important;
  opacity:1!important;
}

/* posizioni volutamente irregolari */
.avatar-vip-frame.vip-dragon::after{
  background:
    radial-gradient(circle at 48% 7%,#f4fff5 0 2.2px,transparent 2.35px),
    radial-gradient(circle at 86% 22%,#b9ff91 0 2px,transparent 2.15px),
    radial-gradient(circle at 91% 69%,#72d58b 0 2.3px,transparent 2.45px),
    radial-gradient(circle at 57% 94%,#dfffe7 0 2.1px,transparent 2.25px),
    radial-gradient(circle at 16% 81%,#57a96b 0 2.2px,transparent 2.35px),
    radial-gradient(circle at 9% 33%,#a8ee83 0 2px,transparent 2.15px)!important;
}
.avatar-vip-frame.vip-legend::after{
  background:
    radial-gradient(circle at 48% 7%,#ffffff 0 2.2px,transparent 2.35px),
    radial-gradient(circle at 86% 22%,#d9faff 0 2px,transparent 2.15px),
    radial-gradient(circle at 91% 69%,#8ddfff 0 2.3px,transparent 2.45px),
    radial-gradient(circle at 57% 94%,#e9fdff 0 2.1px,transparent 2.25px),
    radial-gradient(circle at 16% 81%,#9fe9ff 0 2.2px,transparent 2.35px),
    radial-gradient(circle at 9% 33%,#b8f3ff 0 2px,transparent 2.15px)!important;
}
.avatar-vip-frame.vip-imperial::after{
  background:
    radial-gradient(circle at 48% 7%,#ffffff 0 2.2px,transparent 2.35px),
    radial-gradient(circle at 86% 22%,#fff4bd 0 2px,transparent 2.15px),
    radial-gradient(circle at 91% 69%,#ffd45a 0 2.3px,transparent 2.45px),
    radial-gradient(circle at 57% 94%,#fff8cf 0 2.1px,transparent 2.25px),
    radial-gradient(circle at 16% 81%,#e8b943 0 2.2px,transparent 2.35px),
    radial-gradient(circle at 9% 33%,#ffe98f 0 2px,transparent 2.15px)!important;
}

/* Classifica: stessa resa, proporzionata alla cornice più piccola. */
.rank-frame.vip-dragon::after,
.rank-frame.vip-legend::after,
.rank-frame.vip-imperial::after{
  inset:-10px!important;
  border-radius:50%!important;
  overflow:visible!important;
  animation:imVipSixDotsDrift 4.8s ease-in-out infinite!important;
  filter:none!important;
  opacity:1!important;
}
.rank-frame.vip-dragon::after{
  background:
    radial-gradient(circle at 45% 8%,#f4fff5 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 84% 25%,#b9ff91 0 1.7px,transparent 1.85px),
    radial-gradient(circle at 91% 67%,#72d58b 0 1.9px,transparent 2.05px),
    radial-gradient(circle at 59% 92%,#dfffe7 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 17% 79%,#57a96b 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 10% 35%,#a8ee83 0 1.7px,transparent 1.85px)!important;
}
.rank-frame.vip-legend::after{
  background:
    radial-gradient(circle at 45% 8%,#ffffff 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 84% 25%,#d9faff 0 1.7px,transparent 1.85px),
    radial-gradient(circle at 91% 67%,#8ddfff 0 1.9px,transparent 2.05px),
    radial-gradient(circle at 59% 92%,#e9fdff 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 17% 79%,#9fe9ff 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 10% 35%,#b8f3ff 0 1.7px,transparent 1.85px)!important;
}
.rank-frame.vip-imperial::after{
  background:
    radial-gradient(circle at 45% 8%,#ffffff 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 84% 25%,#fff4bd 0 1.7px,transparent 1.85px),
    radial-gradient(circle at 91% 67%,#ffd45a 0 1.9px,transparent 2.05px),
    radial-gradient(circle at 59% 92%,#fff8cf 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 17% 79%,#e8b943 0 1.8px,transparent 1.95px),
    radial-gradient(circle at 10% 35%,#ffe98f 0 1.7px,transparent 1.85px)!important;
}

/* Anche in thermal mode le particelle restano vive ma leggere. */
body.im-mobile-performance .avatar-vip-frame.vip-dragon::after,
body.im-mobile-performance .avatar-vip-frame.vip-legend::after,
body.im-mobile-performance .avatar-vip-frame.vip-imperial::after,
body.im-mobile-performance .rank-frame.vip-dragon::after,
body.im-mobile-performance .rank-frame.vip-legend::after,
body.im-mobile-performance .rank-frame.vip-imperial::after{
  animation:imVipSixDotsDrift 5.6s ease-in-out infinite!important;
  filter:none!important;
}


/* ===== restore-original-vip9-particles-all-tiers-premium-corners · 2026-09-27 =====
   Ripristina esattamente il linguaggio visivo delle prime particelle VIP9
   apprezzate dall'utente: 6 punti luminosi, movimento lento scale+rotate,
   senza anelli/fulmini/pattern geometrici. Stesso effetto per VIP8/9/10,
   mantenendo soltanto le rispettive palette. */

/* Cornice Premium: stesso spessore, 1px più interna per non troncare
   gli angoli superiori contro overflow:hidden del combat-art-shell. */
#premiumCombatFrame{
  inset:-1px!important;
  width:auto!important;
  height:auto!important;
  border-radius:15px 15px 0 0!important;
}
#premiumCombatFrame.active.frame-abyss,
#premiumCombatFrame.active.frame-inferno,
#premiumCombatFrame.active.frame-venom{
  border-width:4px!important;
  border-style:solid!important;
}

/* Movimento originale VIP9 */
@keyframes imVip9ParticlesLiteRestore{
  0%,100%{opacity:.62;transform:scale(.985) rotate(0deg)}
  50%{opacity:.96;transform:scale(1.018) rotate(5deg)}
}

/* Header/profile: geometria originale VIP9 */
.avatar-vip-frame.vip-dragon::before,
.avatar-vip-frame.vip-legend::before,
.avatar-vip-frame.vip-imperial::before{
  display:none!important;
  content:none!important;
}
.avatar-vip-frame.vip-dragon::after,
.avatar-vip-frame.vip-legend::after,
.avatar-vip-frame.vip-imperial::after{
  display:block!important;
  content:""!important;
  inset:-13px!important;
  border-radius:50%!important;
  overflow:visible!important;
  filter:none!important;
  opacity:.86!important;
  animation:imVip9ParticlesLiteRestore 3.8s ease-in-out infinite!important;
}

/* VIP8 verde */
.avatar-vip-frame.vip-dragon::after{
  background:
    radial-gradient(circle at 50% 5%,#f4fff5 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 84% 30%,#b9ff91 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 94% 66%,#72d58b 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 50% 96%,#eaffdf 0 1.6px,transparent 2.9px),
    radial-gradient(circle at 11% 68%,#57a96b 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 16% 27%,#a8ee83 0 1.5px,transparent 2.8px)!important;
}

/* VIP9 diamante — ripristino dell'effetto originale */
.avatar-vip-frame.vip-legend::after{
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 84% 30%,#d9faff 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 94% 66%,#8ddfff 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 50% 96%,#fff 0 1.6px,transparent 2.9px),
    radial-gradient(circle at 11% 68%,#9fe9ff 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 16% 27%,#e4fbff 0 1.5px,transparent 2.8px)!important;
}

/* VIP10 oro, stesso effetto */
.avatar-vip-frame.vip-imperial::after{
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 84% 30%,#fff4bd 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 94% 66%,#ffd45a 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 50% 96%,#fff8cf 0 1.6px,transparent 2.9px),
    radial-gradient(circle at 11% 68%,#e8b943 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 16% 27%,#fff0a2 0 1.5px,transparent 2.8px)!important;
}

/* Classifica: stessa impostazione, leggermente ridotta per il frame piccolo */
.rank-frame.vip-dragon::before,
.rank-frame.vip-legend::before,
.rank-frame.vip-imperial::before{
  display:none!important;
  content:none!important;
}
.rank-frame.vip-dragon::after,
.rank-frame.vip-legend::after,
.rank-frame.vip-imperial::after{
  display:block!important;
  content:""!important;
  inset:-9px!important;
  border-radius:50%!important;
  overflow:visible!important;
  filter:none!important;
  opacity:.90!important;
  animation:imVip9ParticlesLiteRestore 4.0s ease-in-out infinite!important;
}
.rank-frame.vip-dragon::after{
  background:
    radial-gradient(circle at 50% 5%,#f4fff5 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 84% 30%,#b9ff91 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 94% 66%,#72d58b 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 50% 96%,#eaffdf 0 1.45px,transparent 2.7px),
    radial-gradient(circle at 11% 68%,#57a96b 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 16% 27%,#a8ee83 0 1.35px,transparent 2.6px)!important;
}
.rank-frame.vip-legend::after{
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 84% 30%,#d9faff 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 94% 66%,#8ddfff 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 50% 96%,#fff 0 1.45px,transparent 2.7px),
    radial-gradient(circle at 11% 68%,#9fe9ff 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 16% 27%,#e4fbff 0 1.35px,transparent 2.6px)!important;
}
.rank-frame.vip-imperial::after{
  background:
    radial-gradient(circle at 50% 5%,#fff 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 84% 30%,#fff4bd 0 1.35px,transparent 2.6px),
    radial-gradient(circle at 94% 66%,#ffd45a 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 50% 96%,#fff8cf 0 1.45px,transparent 2.7px),
    radial-gradient(circle at 11% 68%,#e8b943 0 1.25px,transparent 2.5px),
    radial-gradient(circle at 16% 27%,#fff0a2 0 1.35px,transparent 2.6px)!important;
}

/* Mobile: movimento ancora attivo ma soltanto transform+opacity */
body.im-mobile-performance .avatar-vip-frame.vip-dragon::after,
body.im-mobile-performance .avatar-vip-frame.vip-legend::after,
body.im-mobile-performance .avatar-vip-frame.vip-imperial::after,
body.im-mobile-performance .rank-frame.vip-dragon::after,
body.im-mobile-performance .rank-frame.vip-legend::after,
body.im-mobile-performance .rank-frame.vip-imperial::after{
  animation:imVip9ParticlesLiteRestore 4.8s ease-in-out infinite!important;
  filter:none!important;
}


/* ===== premium-shop-jewel-vivid-v1 · 2026-09-28 =====
   Solo resa cromatica: geometria/spessori invariati. Glow statico leggero. */
.row:has([data-premium-benefit="cosmetic_rune_dorate"]){
  border-color:#c96cff!important;
  background:linear-gradient(145deg,rgba(91,20,132,.98),rgba(32,7,52,.99))!important;
  box-shadow:inset 0 0 0 1px rgba(240,190,255,.34),inset 0 0 20px rgba(197,71,255,.22),0 0 12px rgba(202,82,255,.52),0 0 25px rgba(147,36,211,.22)!important;
}
.row:has([data-premium-benefit="cosmetic_essenza_ombra"]){
  border-color:#ff3559!important;
  background:linear-gradient(145deg,rgba(137,10,38,.98),rgba(55,5,19,.99))!important;
  box-shadow:inset 0 0 0 1px rgba(255,177,190,.32),inset 0 0 20px rgba(255,35,75,.22),0 0 12px rgba(255,39,76,.55),0 0 25px rgba(190,12,47,.24)!important;
}
.row:has([data-premium-benefit="cosmetic_luna_cremisi"]){
  border-color:#19f59a!important;
  background:linear-gradient(145deg,rgba(4,112,72,.98),rgba(3,47,35,.99))!important;
  box-shadow:inset 0 0 0 1px rgba(180,255,220,.30),inset 0 0 20px rgba(22,245,153,.20),0 0 12px rgba(24,246,154,.52),0 0 25px rgba(5,175,105,.22)!important;
}
.inventory-owned-card.premium-inventory-cosmetic_rune_dorate{border-color:#c96cff!important;box-shadow:inset 0 0 14px rgba(197,71,255,.18),0 0 12px rgba(202,82,255,.40)!important}
.inventory-owned-card.premium-inventory-cosmetic_essenza_ombra{border-color:#ff3559!important;box-shadow:inset 0 0 14px rgba(255,35,75,.18),0 0 12px rgba(255,39,76,.42)!important}
.inventory-owned-card.premium-inventory-cosmetic_luna_cremisi{border-color:#19f59a!important;box-shadow:inset 0 0 14px rgba(22,245,153,.17),0 0 12px rgba(24,246,154,.40)!important}

/* build-dispatch marker 2026-09-28 premium vivid */


/* ===== premium-combat-jewel-vivid-v1 · 2026-09-28 =====
   Battaglia / Raid / Dungeon / Boss Clan:
   stessa palette gioiello del Negozio, geometria e spessore invariati.
   Solo glow statico leggero. */
#premiumCombatFrame.active.frame-abyss{
  border-color:#c96cff!important;
  box-shadow:
    inset 0 0 0 2px rgba(240,190,255,.58),
    inset 0 0 20px rgba(197,71,255,.30),
    0 0 12px rgba(202,82,255,.52),
    0 0 25px rgba(147,36,211,.22)!important;
}
#premiumCombatFrame.active.frame-inferno{
  border-color:#ff3559!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,177,190,.55),
    inset 0 0 20px rgba(255,35,75,.30),
    0 0 12px rgba(255,39,76,.55),
    0 0 25px rgba(190,12,47,.24)!important;
}
#premiumCombatFrame.active.frame-venom{
  border-color:#19f59a!important;
  box-shadow:
    inset 0 0 0 2px rgba(180,255,220,.52),
    inset 0 0 20px rgba(22,245,153,.28),
    0 0 12px rgba(24,246,154,.52),
    0 0 25px rgba(5,175,105,.22)!important;
}


/* ===== premium-combat-exact-shop-jewel-v2 · 2026-09-28 =====
   Combat frame: stessa identica resa cromatica del relativo riquadro Shop.
   Il gradiente viene applicato come layer trasparente interno, senza coprire l'artwork. */
#premiumCombatFrame.active.frame-abyss{
  border-color:#c96cff!important;
  background:linear-gradient(145deg,rgba(91,20,132,.34),rgba(32,7,52,.22))!important;
  box-shadow:inset 0 0 0 1px rgba(240,190,255,.34),inset 0 0 20px rgba(197,71,255,.22),0 0 12px rgba(202,82,255,.52),0 0 25px rgba(147,36,211,.22)!important;
}
#premiumCombatFrame.active.frame-inferno{
  border-color:#ff3559!important;
  background:linear-gradient(145deg,rgba(137,10,38,.34),rgba(55,5,19,.22))!important;
  box-shadow:inset 0 0 0 1px rgba(255,177,190,.32),inset 0 0 20px rgba(255,35,75,.22),0 0 12px rgba(255,39,76,.55),0 0 25px rgba(190,12,47,.24)!important;
}
#premiumCombatFrame.active.frame-venom{
  border-color:#19f59a!important;
  background:linear-gradient(145deg,rgba(4,112,72,.34),rgba(3,47,35,.22))!important;
  box-shadow:inset 0 0 0 1px rgba(180,255,220,.30),inset 0 0 20px rgba(22,245,153,.20),0 0 12px rgba(24,246,154,.52),0 0 25px rgba(5,175,105,.22)!important;
}


/* ===== premium-combat-neon-border-v3 · 2026-09-28 =====
   SOLO profilo neon: nessun overlay sull'immagine.
   Geometria, posizione e border-width restano invariati. */
#premiumCombatFrame.active.frame-abyss,
#premiumCombatFrame.active.frame-inferno,
#premiumCombatFrame.active.frame-venom{
  background:none!important;
}
#premiumCombatFrame.active.frame-abyss{
  border-color:#efc7ff!important;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 5px #e9a8ff,
    0 0 4px #ffffff,
    0 0 8px #e785ff,
    0 0 15px #c832ff,
    0 0 28px rgba(190,30,255,.96),
    0 0 44px rgba(145,0,255,.72)!important;
}
#premiumCombatFrame.active.frame-inferno{
  border-color:#ffd0d8!important;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 5px #ff9bad,
    0 0 4px #ffffff,
    0 0 8px #ff6b83,
    0 0 15px #ff1748,
    0 0 28px rgba(255,0,55,.96),
    0 0 44px rgba(220,0,38,.72)!important;
}
#premiumCombatFrame.active.frame-venom{
  border-color:#c8ffe6!important;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 5px #8affc7,
    0 0 4px #ffffff,
    0 0 8px #55ffb0,
    0 0 15px #00ff8c,
    0 0 28px rgba(0,255,137,.96),
    0 0 44px rgba(0,211,105,.72)!important;
}


/* ===== premium-combat-pure-color-neon-v4 · 2026-09-28 =====
   Reset visivo dei precedenti glow combat: solo bordo neon saturo.
   Nessun overlay sull'artwork; geometria e spessore invariati. */
#premiumCombatFrame.active.frame-abyss,
#premiumCombatFrame.active.frame-inferno,
#premiumCombatFrame.active.frame-venom{
  background:none!important;
  filter:none!important;
}
#premiumCombatFrame.active.frame-abyss{
  border-color:#b600ff!important;
  box-shadow:
    0 0 3px #b600ff,
    0 0 7px #b600ff,
    0 0 14px #a000ff,
    0 0 24px rgba(182,0,255,.90),
    0 0 38px rgba(145,0,255,.58)!important;
}
#premiumCombatFrame.active.frame-inferno{
  border-color:#ff003c!important;
  box-shadow:
    0 0 3px #ff003c,
    0 0 7px #ff003c,
    0 0 14px #ff003c,
    0 0 24px rgba(255,0,60,.90),
    0 0 38px rgba(220,0,42,.58)!important;
}
#premiumCombatFrame.active.frame-venom{
  border-color:#00f078!important;
  box-shadow:
    0 0 3px #00f078,
    0 0 7px #00f078,
    0 0 14px #00e873,
    0 0 24px rgba(0,240,120,.90),
    0 0 38px rgba(0,200,95,.58)!important;
}

/* release-rebuild-316 · 2026-09-28 · no functional changes */


/* Shop — menu a schede */
.shop-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px;padding:6px;border:1px solid #23465f;border-radius:14px;background:linear-gradient(135deg,rgba(9,25,39,.96),rgba(6,17,27,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.shop-tab{min-height:44px;border:1px solid transparent;border-radius:10px;background:transparent;color:#9fb5c2;font-weight:900;font-size:12px;letter-spacing:.35px;cursor:pointer;transition:.18s ease;padding:0 7px}
.shop-tab:hover{color:#fff;border-color:#315468;background:rgba(255,255,255,.04)}
.shop-tab.active{color:#08131b;background:var(--gold2);border-color:var(--gold2);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.shop-tab-panel{min-height:180px}
.time-trial-key-goal{margin-top:10px;margin-bottom:2px;border-color:#7b6330;background:linear-gradient(145deg,rgba(48,37,15,.72),rgba(13,27,36,.96))}
@media(max-width:600px){.shop-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.shop-tab{font-size:11px;min-height:40px;padding:0 5px}}