*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;color:#eef2ff;background:#090d19;min-height:100vh;overflow-x:hidden}button{font-family:inherit}a{text-decoration:none;color:inherit}
:root{
  --bg:#090d19;
  --panel:rgba(255,255,255,.06);
  --panel-border:rgba(255,255,255,.09);
  --text-soft:#b9c3e7;
  --gold:#ffcf7a;
  --purple:#a96dff;
  --danger:#ff7e7e;
  --common:#95a3c6;
  --rare:#5bc0ff;
  --epic:#bf7cff;
  --legendary:#ffb84d;
}
.bg-layer{position:fixed;border-radius:50%;filter:blur(85px);pointer-events:none;opacity:.34;z-index:0}
.bg-1{width:320px;height:320px;background:#8e61ff;top:80px;left:4%}
.bg-2{width:360px;height:360px;background:#ffbf66;right:6%;bottom:40px}
.app-shell{position:relative;z-index:1;width:min(1380px,calc(100% - 26px));margin:18px auto 26px}
.glass{background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(18px);box-shadow:0 22px 70px rgba(0,0,0,.28)}
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-radius:26px}
.brand-wrap{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--purple));color:#111527;font-weight:900;box-shadow:0 10px 30px rgba(169,109,255,.22)}
.brand-name{font-family:Cinzel,serif;font-size:1.25rem;font-weight:700;letter-spacing:.05em}
.build-pill,.battle-pill,.tab-btn.active,.shop-foot em,.inventory-action.primary-action{background:linear-gradient(135deg,var(--gold),var(--purple));color:#101424}
.build-pill{padding:8px 12px;border-radius:999px;font-weight:800;font-size:.8rem}
.topbar-stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.tiny-stat{padding:10px 14px;border-radius:16px;background:rgba(8,13,27,.45);min-width:88px;text-align:center}
.tiny-stat span{display:block;font-size:.77rem;color:var(--text-soft);margin-bottom:6px}
.tiny-stat strong{font-size:1rem}
.topbar-actions{display:flex;gap:10px}
.btn{border:none;border-radius:16px;padding:13px 18px;font-weight:800;cursor:pointer;transition:.18s ease;background:rgba(255,255,255,.08);color:#fff}
.btn:hover{transform:translateY(-1px)}
.btn-small{padding:10px 14px;border-radius:14px;font-size:.92rem}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--purple));color:#101424}
.btn-secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.btn-danger{background:rgba(255,114,114,.16);border:1px solid rgba(255,114,114,.2)}
.full-btn{width:100%}
.tabs-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.tab-btn{padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#eef2ff;font-weight:800;cursor:pointer;transition:.18s ease}
.tab-panel{display:none}
.tab-panel.active{display:block}
.battle-grid{display:grid;grid-template-columns:300px 1fr 300px;gap:16px}
.side-column{display:grid;gap:16px}
.panel{border-radius:28px;padding:20px}
.panel-title-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.panel-title-row h3,.profile-copy h2,.account-id-wrap h2{margin:0}
.panel-eyebrow{display:block;font-size:.78rem;letter-spacing:.03em;color:var(--gold);font-weight:800;margin-bottom:6px}
.panel-copy,.account-sub,.profile-copy p{color:var(--text-soft);line-height:1.7;margin:10px 0 0}
.hero-badge,.zone-icon,.enemy-mini{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:1.1rem;font-weight:900}
.hero-preview,.profile-visual{position:relative;display:grid;place-items:center;min-height:210px;margin:18px 0;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(8,12,26,.22))}
.premium-aura{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,207,122,.22),transparent 65%);filter:blur(14px);animation:pulseAura 2.8s ease-in-out infinite}
.art-image{display:block;user-select:none}
.preview-art{width:min(190px,100%);filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));animation:floaty 3s ease-in-out infinite;position:relative;z-index:2}
.battle-art{width:min(230px,100%);filter:drop-shadow(0 22px 32px rgba(0,0,0,.42));animation:floaty 3s ease-in-out infinite}
.enemy-battle-art{width:min(210px,100%)}
.profile-art{width:220px;max-width:100%;filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
.mini-stats,.major-stats,.stat-grid,.account-grid,.equipment-list,.slot-board{display:grid;gap:10px}
.mini-stats div,.major-stat,.stat-box,.account-box,.equip-item,.slot-card{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(8,13,27,.48)}
.mini-stats span,.major-stat span,.stat-box span,.account-box span,.equip-item span,.slot-card span{color:var(--text-soft)}
.battle-center{position:relative;overflow:hidden}
.battle-topline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.battle-pill{padding:8px 12px;border-radius:999px;font-size:.8rem;font-weight:900}
.secondary-pill{background:rgba(255,255,255,.08);color:#eef2ff}
.arena{position:relative;display:grid;grid-template-columns:1fr 120px 1fr;gap:14px;align-items:center;min-height:490px;margin:18px 0 12px}
.arena-bg{position:absolute;inset:0;border-radius:26px;background:
radial-gradient(circle at top,rgba(171,110,255,.16),transparent 28%),
radial-gradient(circle at bottom,rgba(255,207,122,.09),transparent 34%),
linear-gradient(180deg,rgba(17,24,42,.74),rgba(9,13,25,.54));
border:1px solid rgba(255,255,255,.06)}
.fighter-card{position:relative;z-index:2;padding:18px;border-radius:24px;background:rgba(8,12,26,.58);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.fighter-card.hit{animation:cardHit .26s ease}
.fighter-glow{position:absolute;inset:-20% auto auto -10%;width:180px;height:180px;background:radial-gradient(circle,rgba(255,207,122,.24),transparent 60%);filter:blur(12px)}
.enemy-glow{inset:-20% -10% auto auto;background:radial-gradient(circle,rgba(255,100,100,.26),transparent 60%)}
.fighter-headline{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px}
.fighter-role{font-size:.78rem;color:var(--gold);font-weight:800}
.fighter-art{position:relative;display:grid;place-items:center;min-height:250px;margin:14px 0 18px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.health-wrap label{display:block;margin-bottom:8px;color:#d8dff8;font-size:.92rem}
.health-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.health-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--purple));border-radius:999px;transition:width .2s ease}
.enemy-health span{background:linear-gradient(90deg,#ff7676,#ffb06d)}
.health-wrap small{display:block;margin-top:8px;color:var(--text-soft)}
.vs-core{position:relative;z-index:2;display:grid;place-items:center}
.vs-ring{width:94px;height:94px;border-radius:50%;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle,rgba(255,207,122,.14),rgba(255,255,255,.03));animation:rotateRing 7s linear infinite}
.vs-text{position:absolute;font-size:1.35rem;font-weight:900;color:var(--gold);letter-spacing:.1em}
.damage-float{position:absolute;top:38%;opacity:0;font-weight:900;font-size:1.08rem;pointer-events:none}
.player-dmg{left:8px;color:#ff8f8f}
.enemy-dmg{right:8px;color:#ffc075}
.damage-float.show{animation:floatDamage .85s ease}
.battle-controls{display:flex;gap:10px;flex-wrap:wrap}
.battle-log-wrap{margin-top:14px}
.battle-log{padding:16px 18px;border-radius:20px;background:rgba(8,13,27,.56);min-height:88px;line-height:1.7;color:#d8dff8}
.class-grid,.shop-grid,.premium-grid,.inventory-list{display:grid;gap:12px}
.character-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.profile-header{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:center}
.character-circle{width:230px;height:230px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,207,122,.14),rgba(169,109,255,.14));box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 20px 50px rgba(0,0,0,.28);overflow:hidden}
.major-stats{grid-template-columns:repeat(4,1fr);margin:18px 0}
.stat-grid{grid-template-columns:repeat(4,1fr)}
.class-card,.shop-card{background:rgba(8,13,27,.54);border:1px solid rgba(255,255,255,.08);border-radius:22px;color:#eef2ff;cursor:pointer;transition:.18s ease}
.class-card,.inventory-item{padding:16px}
.class-card{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;text-align:left}
.class-card:hover,.shop-card:hover,.inventory-action:hover{transform:translateY(-2px)}
.class-card.active{outline:1px solid rgba(255,207,122,.38);background:rgba(255,207,122,.08)}
.class-badge{width:84px;height:84px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:grid;place-items:center;overflow:hidden}
.class-thumb{width:78px;height:78px;object-fit:contain}
.class-card small{display:block;margin-top:6px;color:var(--text-soft)}
.inventory-layout{display:grid;grid-template-columns:320px 1fr;gap:16px}
.inventory-item{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;border-radius:22px;background:rgba(8,13,27,.46);border:1px solid rgba(255,255,255,.07)}
.inventory-item.rarity-common{box-shadow:inset 0 0 0 1px rgba(149,163,198,.25)}
.inventory-item.rarity-rare{box-shadow:inset 0 0 0 1px rgba(91,192,255,.35)}
.inventory-item.rarity-epic{box-shadow:inset 0 0 0 1px rgba(191,124,255,.38)}
.inventory-item.rarity-legendary{box-shadow:inset 0 0 0 1px rgba(255,184,77,.42)}
.inventory-artbox{width:88px;height:88px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:grid;place-items:center;font-size:2rem}
.inventory-body strong{display:block}
.inventory-body small{display:block;color:var(--text-soft);margin-top:6px;line-height:1.5}
.inventory-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.inventory-tag{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem;font-weight:800}
.tag-common{color:var(--common)}
.tag-rare{color:var(--rare)}
.tag-epic{color:var(--epic)}
.tag-legendary{color:var(--legendary)}
.inventory-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.inventory-action{padding:10px 14px;font-weight:900;border:none;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.inventory-action.sell-action{background:rgba(255,126,126,.14)}
.shop-grid{grid-template-columns:repeat(2,1fr)}
.shop-card{padding:18px;text-align:left}
.shop-top,.shop-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.shop-top{margin-bottom:10px}
.shop-top span{font-size:1.9rem}
.shop-card p,.premium-card p{color:var(--text-soft);line-height:1.7}
.shop-foot{margin-top:12px}
.shop-foot em{padding:8px 12px;border-radius:999px;font-style:normal;font-weight:900}
.premium-grid{grid-template-columns:repeat(3,1fr)}
.premium-card{padding:20px;border-radius:24px;background:rgba(8,13,27,.54);border:1px solid rgba(255,255,255,.08)}
.premium-icon{font-size:2rem;margin-bottom:12px}
.premium-card span{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--gold);font-size:.82rem;font-weight:800}
.account-id-wrap{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.account-avatar{width:86px;height:86px;border-radius:26px;display:grid;place-items:center;font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--purple));color:#101424}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulseAura{0%,100%{transform:scale(.94);opacity:.45}50%{transform:scale(1.08);opacity:.95}}
@keyframes rotateRing{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes cardHit{0%{transform:translateX(0)}35%{transform:translateX(-6px)}70%{transform:translateX(6px)}100%{transform:translateX(0)}}
@keyframes floatDamage{0%{opacity:0;transform:translateY(8px) scale(.92)}15%{opacity:1}100%{opacity:0;transform:translateY(-28px) scale(1.05)}}

@media (max-width:1200px){
  .battle-grid{grid-template-columns:280px 1fr}
  .battle-grid>.side-column:last-child{grid-column:1 / -1;grid-template-columns:1fr 1fr}
  .inventory-layout,.account-grid,.stat-grid,.major-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .topbar{grid-template-columns:1fr;justify-items:start}
  .battle-grid,.character-layout,.profile-header,.shop-grid,.premium-grid,.inventory-layout,.account-grid,.major-stats,.stat-grid{grid-template-columns:1fr}
  .battle-grid>.side-column:last-child{grid-template-columns:1fr}
  .arena{grid-template-columns:1fr;min-height:auto;padding-top:12px}
  .vs-core{min-height:70px}
}
@media (max-width:680px){
  .app-shell{width:min(100% - 16px,100%);margin:12px auto 18px}
  .topbar,.panel{border-radius:22px}
  .brand-mark{width:42px;height:42px;border-radius:14px}
  .brand-name{font-size:1.08rem}
  .tabs-row{overflow:auto;flex-wrap:nowrap;padding-bottom:2px}
  .tab-btn{white-space:nowrap;padding:13px 15px}
  .battle-controls{flex-direction:column}
  .inventory-item{grid-template-columns:1fr}
  .inventory-actions{justify-content:flex-start}
}


.arena-pulse,.attack-fx,.enemy-hit-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.arena-pulse::before{
  content:"";
  position:absolute;
  inset:12% 20%;
  border-radius:50%;
  opacity:0;
  filter:blur(18px);
  transform:scale(.85);
}
.arena-pulse.show::before{animation:arenaPulseFx .5s ease}
.attack-fx::before,.attack-fx::after{
  content:"";
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.enemy-hit-fx::before,.enemy-hit-fx::after{
  content:"";
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.attack-fx.knight::before{
  width:170px;height:20px;
  right:24%;top:44%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,215,125,0),rgba(255,215,125,.95),rgba(169,109,255,0));
  transform:skewX(-25deg) rotate(-8deg);
}
.attack-fx.knight.show::before{animation:slashFx .34s ease}
.enemy-hit-fx.knight::before{
  width:94px;height:94px;right:16%;top:34%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,122,.35),rgba(255,207,122,0));
}
.enemy-hit-fx.knight.show::before{animation:hitBurst .34s ease}

.attack-fx.mage::before{
  width:44px;height:44px;left:35%;top:43%;
  border-radius:50%;
  background:radial-gradient(circle,#9fd1ff 0%,#8e6bff 55%,rgba(142,107,255,0) 72%);
  box-shadow:0 0 24px rgba(143,107,255,.65);
}
.attack-fx.mage::after{
  width:180px;height:8px;left:40%;top:50%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(116,181,255,.1),rgba(143,107,255,.85),rgba(143,107,255,0));
}
.attack-fx.mage.show::before{animation:orbCast .42s ease}
.attack-fx.mage.show::after{animation:beamFx .42s ease}
.enemy-hit-fx.mage::before{
  width:120px;height:120px;right:12%;top:30%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(143,107,255,.36),rgba(116,181,255,.12),rgba(143,107,255,0));
  box-shadow:0 0 30px rgba(116,181,255,.28);
}
.enemy-hit-fx.mage.show::before{animation:magicBurst .42s ease}

.attack-fx.archer::before{
  width:155px;height:6px;left:37%;top:49%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(114,240,167,0),rgba(114,240,167,.95),rgba(255,207,122,0));
}
.attack-fx.archer::after{
  width:24px;height:6px;left:63%;top:49%;
  border-radius:999px;
  background:linear-gradient(90deg,#f8e7b2,#72f0a7);
  box-shadow:0 0 18px rgba(114,240,167,.7);
}
.attack-fx.archer.show::before{animation:arrowTrail .28s ease}
.attack-fx.archer.show::after{animation:arrowHead .28s ease}
.enemy-hit-fx.archer::before{
  width:100px;height:100px;right:15%;top:34%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(114,240,167,.3),rgba(114,240,167,0));
}
.enemy-hit-fx.archer.show::before{animation:hitBurst .28s ease}

.vocation-pill{
  background:rgba(255,255,255,.08);
  color:#eef2ff;
}
body.vocation-knight .vocation-pill{
  background:linear-gradient(135deg,rgba(255,207,122,.95),rgba(169,109,255,.88));
  color:#101424;
}
body.vocation-mage .vocation-pill{
  background:linear-gradient(135deg,rgba(116,181,255,.95),rgba(143,107,255,.9));
  color:#101424;
}
body.vocation-archer .vocation-pill{
  background:linear-gradient(135deg,rgba(114,240,167,.95),rgba(242,208,123,.9));
  color:#101424;
}
body.vocation-knight .player-card .fighter-glow{
  background:radial-gradient(circle,rgba(255,207,122,.28),transparent 60%);
}
body.vocation-mage .player-card .fighter-glow{
  background:radial-gradient(circle,rgba(116,181,255,.24),rgba(143,107,255,.14),transparent 60%);
}
body.vocation-archer .player-card .fighter-glow{
  background:radial-gradient(circle,rgba(114,240,167,.24),rgba(242,208,123,.12),transparent 60%);
}
body.vocation-knight .player-card{box-shadow:inset 0 0 0 1px rgba(255,207,122,.1)}
body.vocation-mage .player-card{box-shadow:inset 0 0 0 1px rgba(116,181,255,.14)}
body.vocation-archer .player-card{box-shadow:inset 0 0 0 1px rgba(114,240,167,.14)}

body.vocation-knight .player-dmg.show{animation:floatDamage .85s ease}
body.vocation-mage .enemy-dmg{color:#bba6ff}
body.vocation-archer .enemy-dmg{color:#8ef1b5}

@keyframes slashFx{
  0%{opacity:0;transform:translateX(-30px) skewX(-25deg) rotate(-8deg)}
  25%{opacity:1}
  100%{opacity:0;transform:translateX(120px) skewX(-25deg) rotate(-8deg)}
}
@keyframes hitBurst{
  0%{opacity:0;transform:scale(.6)}
  35%{opacity:1}
  100%{opacity:0;transform:scale(1.4)}
}
@keyframes orbCast{
  0%{opacity:0;transform:translateX(-24px) scale(.6)}
  30%{opacity:1}
  100%{opacity:0;transform:translateX(160px) scale(1.12)}
}
@keyframes beamFx{
  0%{opacity:0;transform:scaleX(.2);transform-origin:left center}
  25%{opacity:1}
  100%{opacity:0;transform:scaleX(1.15);transform-origin:left center}
}
@keyframes magicBurst{
  0%{opacity:0;transform:scale(.5)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.5)}
}
@keyframes arrowTrail{
  0%{opacity:0;transform:translateX(-28px)}
  20%{opacity:1}
  100%{opacity:0;transform:translateX(140px)}
}
@keyframes arrowHead{
  0%{opacity:0;transform:translateX(-22px)}
  20%{opacity:1}
  100%{opacity:0;transform:translateX(132px)}
}
@keyframes arenaPulseFx{
  0%{opacity:0;transform:scale(.82)}
  35%{opacity:1}
  100%{opacity:0;transform:scale(1.12)}
}

.battle-mode-controls{align-items:stretch}
.mode-btn.active-mode{
  background:linear-gradient(135deg,var(--gold),var(--purple));
  color:#101424;
}
.progression-note{
  margin:10px 0 14px;
  color:#d7def7;
  font-size:.9rem;
  line-height:1.55;
}
.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
}

.skill-status-row{
  margin-top:12px;
}
.skill-status-box{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(8,13,27,.48);
  color:#eef2ff;
}
.skill-status-box span{
  color:#d8dff8;
  font-weight:800;
}
.skill-btn{
  position:relative;
  overflow:hidden;
}
.skill-btn.ready-skill{
  background:linear-gradient(135deg,rgba(255,207,122,.95),rgba(169,109,255,.9));
  color:#101424;
}
.skill-btn.cooldown-skill{
  opacity:.7;
}

.battle-resource-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.resource-card{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(8,13,27,.48);
}
.resource-bar{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin:4px 0 8px;
}
.resource-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#72f0a7,#74b5ff,#8f6bff);
  transition:width .2s ease;
}
.resource-card small{
  color:#d8dff8;
  font-weight:800;
}
.skills-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:16px;
}
.skill-tree-summary{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.skills-tree-list{
  display:grid;
  gap:14px;
}
.skill-tree-card{
  padding:18px;
  border-radius:22px;
  background:rgba(8,13,27,.48);
  border:1px solid rgba(255,255,255,.08);
}
.skill-tree-card.unlocked{
  box-shadow:inset 0 0 0 1px rgba(255,207,122,.2);
}
.skill-tree-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.skill-tree-top strong{
  font-size:1.05rem;
}
.skill-tree-top span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#ffcf7a;
  font-size:.78rem;
  font-weight:800;
}
.skill-tree-card p{
  margin:10px 0 14px;
  color:#b9c3e7;
  line-height:1.65;
}
.skill-tree-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.skill-tree-cost{
  color:#d8dff8;
  font-weight:800;
}
.unlock-skill-btn{
  border:none;
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--purple));
  color:#101424;
}
.unlock-skill-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
@media (max-width: 980px){
  .battle-resource-grid,.skills-layout{grid-template-columns:1fr}
}

.skill-fx-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.skill-fx-layer::before,
.skill-fx-layer::after{
  content:"";
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.skill-fx-layer.show::before,
.skill-fx-layer.show::after{
  opacity:1;
}
.skill-fx-layer.skill-knight-slam::before{
  width:210px;height:24px;
  left:36%;top:47%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,207,122,0),rgba(255,207,122,.98),rgba(169,109,255,0));
  transform:skewX(-30deg) rotate(-10deg);
  box-shadow:0 0 28px rgba(255,207,122,.35);
}
.skill-fx-layer.skill-knight-slam::after{
  width:130px;height:130px;
  right:13%;top:31%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,122,.42),rgba(255,207,122,0));
}
.skill-fx-layer.skill-knight-slam.show::before{animation:skillKnightSlamSlash .48s ease}
.skill-fx-layer.skill-knight-slam.show::after{animation:skillKnightSlamImpact .48s ease}

.skill-fx-layer.skill-knight-guard::before{
  width:170px;height:170px;
  left:7%;top:27%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,122,.26),rgba(169,109,255,.14),rgba(255,207,122,0));
  box-shadow:0 0 30px rgba(255,207,122,.18);
}
.skill-fx-layer.skill-knight-guard::after{
  width:150px;height:150px;
  right:15%;top:32%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,122,.30),rgba(255,207,122,0));
}
.skill-fx-layer.skill-knight-guard.show::before{animation:skillKnightGuardAura .7s ease}
.skill-fx-layer.skill-knight-guard.show::after{animation:skillKnightGuardImpact .55s ease}

.skill-fx-layer.skill-mage-burst::before{
  width:82px;height:82px;
  left:38%;top:41%;
  border-radius:50%;
  background:radial-gradient(circle,#a8d9ff 0%,#8f6bff 58%,rgba(143,107,255,0) 76%);
  box-shadow:0 0 34px rgba(143,107,255,.6);
}
.skill-fx-layer.skill-mage-burst::after{
  width:150px;height:150px;
  right:11%;top:27%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(143,107,255,.42),rgba(116,181,255,.18),rgba(143,107,255,0));
}
.skill-fx-layer.skill-mage-burst.show::before{animation:skillMageBurstCast .52s ease}
.skill-fx-layer.skill-mage-burst.show::after{animation:skillMageBurstImpact .56s ease}

.skill-fx-layer.skill-mage-nova::before{
  width:88px;height:88px;
  left:37%;top:40%;
  border-radius:50%;
  background:radial-gradient(circle,#d7f0ff 0%,#74b5ff 42%,#8f6bff 68%,rgba(143,107,255,0) 80%);
  box-shadow:0 0 36px rgba(116,181,255,.6);
}
.skill-fx-layer.skill-mage-nova::after{
  width:220px;height:220px;
  right:6%;top:18%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,217,255,.28),rgba(143,107,255,.2),rgba(143,107,255,0));
}
.skill-fx-layer.skill-mage-nova.show::before{animation:skillMageNovaCast .5s ease}
.skill-fx-layer.skill-mage-nova.show::after{animation:skillMageNovaBoom .72s ease}

.skill-fx-layer.skill-archer-arrow::before{
  width:190px;height:7px;
  left:35%;top:49%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(114,240,167,0),rgba(114,240,167,.95),rgba(242,208,123,0));
}
.skill-fx-layer.skill-archer-arrow::after{
  width:118px;height:118px;
  right:13%;top:31%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(114,240,167,.34),rgba(114,240,167,0));
}
.skill-fx-layer.skill-archer-arrow.show::before{animation:skillArcherArrowTrail .32s ease}
.skill-fx-layer.skill-archer-arrow.show::after{animation:skillArcherArrowImpact .34s ease}

.skill-fx-layer.skill-archer-rain::before{
  width:240px;height:180px;
  right:4%;top:16%;
  background:
    linear-gradient(160deg,rgba(242,208,123,0) 0%,rgba(242,208,123,.0) 30%,rgba(114,240,167,.85) 48%,rgba(114,240,167,0) 56%),
    linear-gradient(165deg,rgba(242,208,123,0) 10%,rgba(114,240,167,.78) 46%,rgba(114,240,167,0) 54%),
    linear-gradient(155deg,rgba(242,208,123,0) 20%,rgba(242,208,123,.75) 48%,rgba(242,208,123,0) 56%);
  opacity:0;
}
.skill-fx-layer.skill-archer-rain::after{
  width:180px;height:180px;
  right:9%;top:23%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,208,123,.18),rgba(114,240,167,.18),rgba(114,240,167,0));
}
.skill-fx-layer.skill-archer-rain.show::before{animation:skillArcherRainLines .58s ease}
.skill-fx-layer.skill-archer-rain.show::after{animation:skillArcherRainImpact .58s ease}

@keyframes skillKnightSlamSlash{
  0%{opacity:0;transform:translateX(-40px) skewX(-30deg) rotate(-10deg)}
  20%{opacity:1}
  100%{opacity:0;transform:translateX(150px) skewX(-30deg) rotate(-10deg)}
}
@keyframes skillKnightSlamImpact{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.55)}
}
@keyframes skillKnightGuardAura{
  0%{opacity:0;transform:scale(.5)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.2)}
}
@keyframes skillKnightGuardImpact{
  0%{opacity:0;transform:scale(.7)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes skillMageBurstCast{
  0%{opacity:0;transform:translateX(-28px) scale(.55)}
  30%{opacity:1}
  100%{opacity:0;transform:translateX(150px) scale(1.08)}
}
@keyframes skillMageBurstImpact{
  0%{opacity:0;transform:scale(.55)}
  28%{opacity:1}
  100%{opacity:0;transform:scale(1.55)}
}
@keyframes skillMageNovaCast{
  0%{opacity:0;transform:translateX(-24px) scale(.5)}
  26%{opacity:1}
  100%{opacity:0;transform:translateX(130px) scale(1.15)}
}
@keyframes skillMageNovaBoom{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.8)}
}
@keyframes skillArcherArrowTrail{
  0%{opacity:0;transform:translateX(-38px)}
  18%{opacity:1}
  100%{opacity:0;transform:translateX(165px)}
}
@keyframes skillArcherArrowImpact{
  0%{opacity:0;transform:scale(.55)}
  25%{opacity:1}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes skillArcherRainLines{
  0%{opacity:0;transform:translateY(-16px)}
  24%{opacity:1}
  100%{opacity:0;transform:translateY(18px)}
}
@keyframes skillArcherRainImpact{
  0%{opacity:0;transform:scale(.7)}
  22%{opacity:1}
  100%{opacity:0;transform:scale(1.5)}
}

.enemy-skill-box{
  margin-top:12px;
}
.enemy-skill-ready{
  color:#ffcf7a !important;
}
.enemy-skill-charging{
  color:#ff9e9e !important;
}
.enemy-cast-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.enemy-cast-fx::before,
.enemy-cast-fx::after{
  content:"";
  position:absolute;
  opacity:0;
}
.enemy-cast-fx.show::before,
.enemy-cast-fx.show::after{
  opacity:1;
}
.enemy-cast-fx.skill-bite::before{
  width:130px;height:130px;right:14%;top:30%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,140,.30),rgba(255,140,140,0));
}
.enemy-cast-fx.skill-bite::after{
  width:170px;height:18px;right:25%;top:47%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,140,140,0),rgba(255,140,140,.9),rgba(255,140,140,0));
  transform:skewX(25deg) rotate(10deg);
}
.enemy-cast-fx.skill-bite.show::before{animation:enemyBiteBurst .42s ease}
.enemy-cast-fx.skill-bite.show::after{animation:enemyBiteSlash .42s ease}

.enemy-cast-fx.skill-poison::before{
  width:140px;height:140px;right:13%;top:28%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(137,255,164,.28),rgba(137,255,164,0));
}
.enemy-cast-fx.skill-poison::after{
  width:190px;height:70px;right:7%;top:42%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(137,255,164,.2),rgba(137,255,164,0));
}
.enemy-cast-fx.skill-poison.show::before{animation:enemyPoisonCast .6s ease}
.enemy-cast-fx.skill-poison.show::after{animation:enemyPoisonCloud .7s ease}

.enemy-cast-fx.skill-crush::before{
  width:150px;height:150px;right:10%;top:27%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,187,106,.25),rgba(255,187,106,0));
}
.enemy-cast-fx.skill-crush::after{
  width:120px;height:120px;left:14%;top:34%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,122,.28),rgba(255,122,122,0));
}
.enemy-cast-fx.skill-crush.show::before{animation:enemyCrushCharge .45s ease}
.enemy-cast-fx.skill-crush.show::after{animation:enemyCrushImpact .45s ease}

.enemy-cast-fx.skill-dark::before{
  width:180px;height:180px;right:8%;top:22%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(150,110,255,.25),rgba(150,110,255,0));
}
.enemy-cast-fx.skill-dark::after{
  width:220px;height:12px;left:24%;top:49%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(150,110,255,0),rgba(150,110,255,.92),rgba(150,110,255,0));
}
.enemy-cast-fx.skill-dark.show::before{animation:enemyDarkOrb .6s ease}
.enemy-cast-fx.skill-dark.show::after{animation:enemyDarkBeam .6s ease}

@keyframes enemyBiteBurst{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.45)}
}
@keyframes enemyBiteSlash{
  0%{opacity:0;transform:translateX(20px) skewX(25deg) rotate(10deg)}
  20%{opacity:1}
  100%{opacity:0;transform:translateX(-120px) skewX(25deg) rotate(10deg)}
}
@keyframes enemyPoisonCast{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.45)}
}
@keyframes enemyPoisonCloud{
  0%{opacity:0;transform:translateX(10px) scale(.75)}
  35%{opacity:1}
  100%{opacity:0;transform:translateX(-35px) scale(1.18)}
}
@keyframes enemyCrushCharge{
  0%{opacity:0;transform:scale(.65)}
  35%{opacity:1}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes enemyCrushImpact{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.5)}
}
@keyframes enemyDarkOrb{
  0%{opacity:0;transform:scale(.55)}
  25%{opacity:1}
  100%{opacity:0;transform:scale(1.55)}
}
@keyframes enemyDarkBeam{
  0%{opacity:0;transform:scaleX(.2);transform-origin:right center}
  25%{opacity:1}
  100%{opacity:0;transform:scaleX(1.2);transform-origin:right center}
}

.boss-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,8,18,.72);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:16px;
}
.boss-overlay.show{
  display:flex;
}
.boss-card{
  width:min(560px,100%);
  padding:24px;
  border-radius:28px;
}
.boss-card h2{
  margin:6px 0 10px;
}
.boss-card p{
  margin:0 0 18px;
  color:#c8d3f4;
  line-height:1.7;
}
.loot-chest-box,
.loot-reward-box{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(8,13,27,.5);
  border:1px solid rgba(255,255,255,.08);
}
.loot-chest-box{
  margin-bottom:14px;
}
.loot-chest-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--purple));
  color:#101424;
  font-size:1.4rem;
}
.loot-chest-box small{
  display:block;
  margin-top:4px;
  color:#b9c3e7;
}
.loot-reward-box{
  min-height:78px;
}
.loot-reward-box strong{
  display:block;
  margin-bottom:4px;
}
.boss-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.enemy-mini.boss-mini{
  background:linear-gradient(135deg,rgba(255,207,122,.2),rgba(169,109,255,.2));
  box-shadow:0 0 0 1px rgba(255,207,122,.18);
}
.fighter-card.boss-card-active{
  box-shadow:inset 0 0 0 1px rgba(255,207,122,.22), 0 0 24px rgba(255,207,122,.12);
}

.map-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:16px;
}
.map-summary{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.world-map-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:center;
  min-height:220px;
  margin-top:10px;
}
.map-path-line{
  position:absolute;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,207,122,.25),rgba(169,109,255,.25));
  top:50%;
  transform:translateY(-50%);
  z-index:0;
}
.path-line-1{
  left:17%;
  width:32%;
}
.path-line-2{
  left:51%;
  width:32%;
}
.zone-node{
  position:relative;
  z-index:1;
  border:none;
  padding:18px 14px;
  border-radius:24px;
  background:rgba(8,13,27,.58);
  border:1px solid rgba(255,255,255,.08);
  color:#eef2ff;
  text-align:center;
  cursor:pointer;
  transition:.18s ease;
  min-height:132px;
}
.zone-node:hover{
  transform:translateY(-2px);
}
.zone-node .node-icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 10px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(255,207,122,.18),rgba(169,109,255,.18));
  font-size:1.7rem;
}
.zone-node strong{
  display:block;
  margin-bottom:4px;
}
.zone-node small{
  color:#b9c3e7;
}
.zone-node.current-zone{
  box-shadow:inset 0 0 0 1px rgba(255,207,122,.28), 0 0 22px rgba(255,207,122,.12);
}
.zone-node.unlocked-zone{
  box-shadow:inset 0 0 0 1px rgba(116,181,255,.18);
}
.zone-node.locked-zone{
  opacity:.5;
}
.zone-scene-preview{
  margin-top:18px;
}
.scene-backdrop{
  min-height:260px;
  border-radius:28px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.08);
}
.scene-backdrop::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.95;
}
.scene-forest::before{
  background:
    radial-gradient(circle at 25% 25%, rgba(114,240,167,.18), transparent 18%),
    radial-gradient(circle at 70% 20%, rgba(255,207,122,.14), transparent 18%),
    linear-gradient(180deg, #132538 0%, #102414 48%, #0e131f 100%);
}
.scene-desert::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,207,122,.2), transparent 20%),
    radial-gradient(circle at 76% 18%, rgba(255,170,96,.18), transparent 18%),
    linear-gradient(180deg, #3a2414 0%, #5a381e 46%, #1b1216 100%);
}
.scene-dungeon::before{
  background:
    radial-gradient(circle at 24% 28%, rgba(143,107,255,.22), transparent 18%),
    radial-gradient(circle at 75% 20%, rgba(116,181,255,.14), transparent 18%),
    linear-gradient(180deg, #19182d 0%, #101426 46%, #070b14 100%);
}
.scene-content{
  position:relative;
  z-index:1;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:260px;
}
.scene-badge{
  display:inline-flex;
  width:fit-content;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#ffcf7a;
  font-weight:800;
  font-size:.82rem;
  margin-bottom:10px;
}
.scene-content h3{
  margin:0 0 8px;
  font-size:1.5rem;
}
.scene-content p{
  margin:0;
  color:#d5ddf8;
  line-height:1.7;
  max-width:520px;
}
.zone-theme-forest .arena-bg{
  background:
    radial-gradient(circle at top,rgba(114,240,167,.12),transparent 26%),
    radial-gradient(circle at bottom,rgba(255,207,122,.08),transparent 28%),
    linear-gradient(180deg,rgba(17,34,28,.78),rgba(9,13,25,.58));
}
.zone-theme-desert .arena-bg{
  background:
    radial-gradient(circle at top,rgba(255,207,122,.14),transparent 26%),
    radial-gradient(circle at bottom,rgba(255,150,94,.09),transparent 28%),
    linear-gradient(180deg,rgba(58,36,20,.82),rgba(21,14,18,.62));
}
.zone-theme-dungeon .arena-bg{
  background:
    radial-gradient(circle at top,rgba(143,107,255,.18),transparent 28%),
    radial-gradient(circle at bottom,rgba(116,181,255,.08),transparent 26%),
    linear-gradient(180deg,rgba(18,18,34,.82),rgba(7,11,20,.66));
}
@media (max-width:980px){
  .map-layout{
    grid-template-columns:1fr;
  }
  .world-map-board{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .map-path-line{
    display:none;
  }
}

.town-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
}
.town-scene{
  margin-top:14px;
}
.town-backdrop{
  position:relative;
  min-height:290px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#122238 0%, #19172a 45%, #0d101b 100%);
}
.town-layer{
  position:absolute;
  inset:0;
}
.town-sky{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,207,122,.18), transparent 16%),
    radial-gradient(circle at 80% 18%, rgba(143,107,255,.18), transparent 16%),
    linear-gradient(180deg, rgba(20,34,58,.95), rgba(24,22,38,.8));
}
.town-towers{
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(12,18,30,.0) 55%),
    radial-gradient(circle at 14% 58%, rgba(0,0,0,.0) 0 24%, rgba(33,40,59,.95) 25% 32%, transparent 33%),
    radial-gradient(circle at 34% 56%, rgba(0,0,0,.0) 0 19%, rgba(39,47,68,.96) 20% 29%, transparent 30%),
    radial-gradient(circle at 57% 60%, rgba(0,0,0,.0) 0 22%, rgba(44,49,74,.96) 23% 33%, transparent 34%),
    radial-gradient(circle at 78% 57%, rgba(0,0,0,.0) 0 18%, rgba(37,43,67,.96) 19% 28%, transparent 29%);
  opacity:.9;
}
.town-ground{
  background:
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(18,40,26,.0) 65%, rgba(18,40,26,.92) 100%);
}
.town-content{
  position:relative;
  z-index:1;
  padding:28px;
  min-height:290px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.town-content h3{
  margin:0 0 8px;
  font-size:1.6rem;
}
.town-content p{
  margin:0;
  color:#d5ddf8;
  line-height:1.7;
  max-width:560px;
}
.town-quick-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}
.town-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:14px;
}
.town-card{
  border:none;
  border-radius:22px;
  padding:18px;
  background:rgba(8,13,27,.52);
  border:1px solid rgba(255,255,255,.08);
  color:#eef2ff;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.town-card:hover{
  transform:translateY(-2px);
}
.town-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,207,122,.18),rgba(169,109,255,.18));
  margin-bottom:12px;
  font-size:1.45rem;
}
.town-card strong{
  display:block;
  margin-bottom:6px;
}
.town-card small{
  color:#b9c3e7;
  line-height:1.55;
}
@media (max-width:980px){
  .town-layout,.town-quick-stats,.town-grid{
    grid-template-columns:1fr;
  }
}

.town-layout-advanced{
  grid-template-columns:1fr 1fr 1fr;
  align-items:start;
}
.town-npcs-panel{
  min-height:100%;
}
.npc-grid{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.npc-card{
  border:none;
  border-radius:20px;
  padding:14px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  align-items:center;
  background:rgba(8,13,27,.52);
  border:1px solid rgba(255,255,255,.08);
  color:#eef2ff;
  cursor:pointer;
  text-align:left;
  transition:.18s ease;
}
.npc-card:hover{
  transform:translateY(-2px);
}
.npc-card.active{
  box-shadow:inset 0 0 0 1px rgba(255,207,122,.24);
  background:rgba(255,207,122,.07);
}
.npc-avatar{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(255,207,122,.18),rgba(169,109,255,.18));
  font-size:1.5rem;
}
.npc-body strong{
  display:block;
  margin-bottom:4px;
}
.npc-body small{
  color:#b9c3e7;
  line-height:1.5;
}
.npc-dialogue-box{
  margin-top:16px;
  padding:18px;
  border-radius:22px;
  background:rgba(8,13,27,.48);
  border:1px solid rgba(255,255,255,.08);
}
.npc-dialogue-box h4{
  margin:6px 0 8px;
  font-size:1.05rem;
}
.npc-dialogue-box p{
  margin:0;
  color:#d3dcf8;
  line-height:1.7;
}
.npc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
@media (max-width:1180px){
  .town-layout-advanced{
    grid-template-columns:1fr;
  }
}

.quest-board-panel{
  margin-top:16px;
  padding:18px;
  border-radius:22px;
  background:rgba(8,13,27,.48);
  border:1px solid rgba(255,255,255,.08);
}
.quest-board-panel h4{
  margin:6px 0 0;
  font-size:1.02rem;
}
.quest-list{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.quest-card{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.quest-card.completed{
  box-shadow:inset 0 0 0 1px rgba(114,240,167,.22);
}
.quest-card.claimed{
  opacity:.72;
}
.quest-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.quest-top strong{
  display:block;
  margin-bottom:4px;
}
.quest-top small{
  color:#b9c3e7;
  line-height:1.5;
}
.quest-status-pill{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#ffcf7a;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.quest-progress-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:12px;
}
.quest-progress-bar{
  flex:1;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.quest-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#72f0a7,#74b5ff,#8f6bff);
}
.quest-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}
.quest-reward{
  color:#d8dff8;
  font-weight:800;
}
.quest-claim-btn{
  border:none;
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--purple));
  color:#101424;
}
.quest-claim-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

.profile-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:8px 12px;
  border-radius:16px;
  background:rgba(8,13,27,.46);
  min-width:120px;
}
.profile-chip-label{
  color:#b9c3e7;
  font-size:.72rem;
  margin-bottom:4px;
}
.profile-chip strong{
  font-size:.9rem;
}
.profile-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,8,18,.76);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:60;
  padding:16px;
}
.profile-overlay.show{
  display:flex;
}
.profile-modal{
  width:min(920px,100%);
  padding:24px;
  border-radius:28px;
}
.profile-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:14px;
}
.profile-auth-panel,
.profile-list-panel{
  padding:18px;
  border-radius:22px;
  background:rgba(8,13,27,.42);
  border:1px solid rgba(255,255,255,.08);
}
.profile-tabs{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}
.profile-tab{
  border:none;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:#eef2ff;
  font-weight:800;
  cursor:pointer;
}
.profile-tab.active{
  background:linear-gradient(135deg,var(--gold),var(--purple));
  color:#101424;
}
.profile-tab-panel{
  display:none;
}
.profile-tab-panel.active{
  display:block;
}
.form-label{
  display:block;
  margin:10px 0 6px;
  color:#dbe4ff;
  font-size:.9rem;
  font-weight:700;
}
.form-input{
  width:100%;
  border:none;
  outline:none;
  padding:13px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#eef2ff;
}
.form-input::placeholder{
  color:#98a7d4;
}
.profile-note-box{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
}
.profile-note-box strong{
  display:block;
  margin-bottom:6px;
}
.profile-note-box small{
  color:#b9c3e7;
  line-height:1.55;
}
.saved-profiles-list{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.saved-profile-card{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.saved-profile-card.active-profile{
  box-shadow:inset 0 0 0 1px rgba(255,207,122,.25);
}
.saved-profile-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.saved-profile-top strong{
  display:block;
}
.saved-profile-top small{
  color:#b9c3e7;
}
.saved-profile-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.saved-profile-btn{
  border:none;
  border-radius:12px;
  padding:9px 12px;
  font-weight:800;
  cursor:pointer;
  background:rgba(255,255,255,.08);
  color:#eef2ff;
}
.saved-profile-btn.primary{
  background:linear-gradient(135deg,var(--gold),var(--purple));
  color:#101424;
}
.saved-profile-btn.danger{
  background:rgba(255,126,126,.16);
}
@media (max-width:980px){
  .profile-modal-grid{
    grid-template-columns:1fr;
  }
}