@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Rajdhani:wght@400;600;700&display=swap');

*{
  margin:0;padding:0;box-sizing:border-box;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
:root{
  --gold:#e8b84b;--gold2:#ffd97d;--red:#e63946;--blue:#4cc9f0;--purple:#7b2d8b;
  --green:#2dc653;--dark:#07080f;--panel:rgba(10,12,22,0.93);--border:rgba(255,255,255,0.12);
}
html,body{
  width:100%;height:100%;
  overflow:hidden;
  position:fixed;
  overscroll-behavior:none;
}
body{font-family:'Rajdhani',sans-serif;background:var(--dark);color:#fff;}

/* ══ BATTLEFIELD BACKGROUND — GLADIATOR ARENA ═══════════════════════════════ */
#battlefield{position:fixed;inset:0;z-index:0;overflow:hidden;}

/* Sky — hot dusty afternoon/dusk */
#battlefield::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    #1a0a00 0%,
    #3d1400 15%,
    #6b2800 28%,
    #8b3d0a 38%,
    #a04510 45%,
    #7a3208 55%,
    #4a1e04 68%,
    #2a1002 82%,
    #150800 100%);
  transition:background 1.5s ease;
}

/* Dungeon Theme */
body.dungeon-active #battlefield::before{
  background:linear-gradient(180deg,
    #050212 0%,
    #10052a 15%,
    #170b40 28%,
    #2a1548 38%,
    #3c1b60 45%,
    #28104a 55%,
    #150530 68%,
    #0a0218 82%,
    #000000 100%);
}
body.dungeon-active .arena-sun{
  background:radial-gradient(circle,rgba(150,50,255,.25) 0%,rgba(100,20,200,.12) 40%,transparent 70%);
}
body.dungeon-active .arena-dust{
  background:radial-gradient(ellipse at 50% 80%,rgba(100,50,150,.18) 0%,transparent 65%);
}
body.dungeon-active .arena-sand{
  background:linear-gradient(180deg,
    #1f1430 0%,
    #281c40 8%,
    #322250 18%,
    #241540 35%,
    #180e28 60%,
    #0f0515 100%);
}
body.dungeon-active .wt-flame{
  background:radial-gradient(ellipse at 50% 85%,#a020ff 0%,#d040ff 40%,#ff80ff 65%,transparent 85%);
}
body.dungeon-active .wt-light{
  background:radial-gradient(circle,rgba(200,80,255,.22) 0%,transparent 70%);
}

/* Sun glow behind arena top */
#starCanvas{position:absolute;inset:0;width:100%;height:100%;}

.arena-sun{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,60,.25) 0%,rgba(255,120,0,.12) 40%,transparent 70%);
  filter:blur(18px);
  animation:sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse{0%,100%{opacity:.7;}50%{opacity:1;}}

/* Dust particles canvas */
.arena-dust{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 80%,rgba(180,100,20,.18) 0%,transparent 65%);
  animation:dustShift 8s ease-in-out infinite alternate;
}
@keyframes dustShift{0%{opacity:.6;}100%{opacity:1;}}

/* ── CROWD SILHOUETTES ── */
.crowd-layer{
  position:absolute;left:0;width:100%;
  image-rendering:pixelated;
}

/* ── ARENA WALLS / ARCHES ── */
.arena-arch-left,.arena-arch-right{
  position:absolute;bottom:18%;
  width:22%;height:62%;
  pointer-events:none;
}
.arena-arch-left{left:0;}
.arena-arch-right{right:0;}

/* ── COLUMN PILLARS ── */
.pillar{
  position:absolute;bottom:0;
  pointer-events:none;
}
.pillar-left{ left:2%; }
.pillar-right{ right:2%; }

/* ── ARENA FLOOR (sand) ── */
.arena-sand{
  position:absolute;bottom:0;left:0;width:100%;height:30%;
  background:linear-gradient(180deg,
    #6b3a10 0%,
    #7a4415 8%,
    #8a4e18 18%,
    #6e3a10 35%,
    #5a2e08 60%,
    #3d1e04 100%);
}
.arena-sand::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 30% at 30% 40%,rgba(120,60,0,.25) 0%,transparent 60%),
    radial-gradient(ellipse 60% 20% at 70% 60%,rgba(80,30,0,.2) 0%,transparent 50%),
    radial-gradient(ellipse 40% 15% at 50% 80%,rgba(0,0,0,.35) 0%,transparent 50%);
}

/* Sand texture lines */
.arena-sand::after{
  content:'';position:absolute;inset:0;opacity:.2;
  background:repeating-linear-gradient(
    92deg,
    transparent 0px,
    transparent 8px,
    rgba(255,180,60,.08) 8px,
    rgba(255,180,60,.08) 9px
  ),repeating-linear-gradient(
    88deg,
    transparent 0px,
    transparent 14px,
    rgba(0,0,0,.12) 14px,
    rgba(0,0,0,.12) 15px
  );
}

/* Arena battle line — dividing the floor */
.arena-line{
  position:absolute;bottom:22%;left:8%;width:84%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(200,140,40,.35),rgba(232,184,75,.5),rgba(200,140,40,.35),transparent);
  filter:blur(1px);
}

/* Blood stains on sand */
.blood-stain{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(120,0,0,.5) 0%,rgba(80,0,0,.2) 50%,transparent 70%);
  pointer-events:none;
}

/* ── ARENA WALL / BLEACHERS (top section) ── */
.bleachers{
  position:absolute;top:0;left:0;width:100%;
  pointer-events:none;
}

/* Torch brackets on walls */
.wall-torch{
  position:absolute;bottom:28%;
  pointer-events:none;
}
.wall-torch-left{ left:18%; }
.wall-torch-right{ right:18%; }
.wt-bracket{width:6px;height:28px;background:linear-gradient(180deg,#8a6030,#4a3010);margin:0 auto;border-radius:2px;}
.wt-flame{width:16px;height:22px;margin:0 auto -2px;
  background:radial-gradient(ellipse at 50% 85%,#ff4400 0%,#ff8800 40%,#ffcc00 65%,transparent 85%);
  border-radius:50% 50% 30% 30%;
  animation:flicker .25s ease-in-out infinite alternate;transform-origin:bottom;}
.wt-light{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:100px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,0,.22) 0%,transparent 70%);
  animation:torchLight .28s ease-in-out infinite alternate;
}

@keyframes flicker{0%{transform:scaleX(1) scaleY(1) rotate(-4deg);}100%{transform:scaleX(.82) scaleY(1.18) rotate(4deg);}}
@keyframes torchLight{0%{opacity:.6;transform:translateX(-50%) scale(1);}100%{opacity:1;transform:translateX(-50%) scale(1.25);}}

/* Floating embers */
.ember{position:absolute;width:3px;height:3px;border-radius:50%;background:#ff6600;
  animation:emberFloat linear infinite;opacity:0;}
@keyframes emberFloat{0%{transform:translateY(0) translateX(0);opacity:1;}
  100%{transform:translateY(-120px) translateX(var(--ex));opacity:0;}}

/* Dust mote drift */
.dust-drift{
  position:absolute;border-radius:50%;background:rgba(200,150,60,.35);
  animation:dustDrift linear infinite;pointer-events:none;
}
@keyframes dustDrift{
  0%{transform:translateX(-20px) translateY(0);opacity:0;}
  20%{opacity:1;}
  80%{opacity:.6;}
  100%{transform:translateX(60px) translateY(-40px);opacity:0;}
}

/* Arena vignette overlay */
.arena-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,.55) 100%);
}

/* ══ GAME UI ══════════════════════════════════════════════════════════════════ */
.game-container {
  position: relative;
  z-index: 10;
  height: 100dvh; /* MOBİL TARAYICI KESİLMESİNİ ÖNLER */
  display: flex;
  flex-direction: column;
}
/* Header */
.header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,0.85) 0%,transparent 100%);
  backdrop-filter:blur(6px);gap:6px;flex-wrap:wrap;}

.dev-btn-header{
  width:32px; height:32px; border-radius:16px; 
  background:rgba(255, 0, 255, 0.1); border:1px solid rgba(255,0,255,0.4);
  color:#ff00ff; display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; padding:0; box-shadow:0 0 8px rgba(255,0,255,0.2);
  margin-left:auto; transition:all 0.2s;
}
.dev-btn-header:hover{
  background:rgba(255, 0, 255, 0.2); transform:scale(1.1);
  box-shadow:0 0 15px rgba(255,0,255,0.5);
}

.stat-pill{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.6);
  border:1px solid rgba(232,184,75,0.25);border-radius:20px;padding:5px 12px;
  box-shadow:0 0 10px rgba(232,184,75,0.08);}
.stat-pill .icon{font-size:16px;}
.stat-pill .val{font-family:'Cinzel Decorative',serif;font-size:13px;color:var(--gold);font-weight:700;}
.stat-pill .lbl{font-size:9px;opacity:0.5;text-transform:uppercase;letter-spacing:1px;}

/* EXP */
.exp-wrap{padding:0 12px 4px;position:relative;z-index:11;}
.exp-top{display:flex;justify-content:space-between;font-size:10px;opacity:0.55;margin-bottom:2px;font-family:'Rajdhani';}
.exp-bg{height:6px;background:rgba(0,0,0,0.6);border-radius:6px;border:1px solid rgba(255,255,255,0.1);overflow:hidden;}
.exp-fill{height:100%;background:linear-gradient(90deg,#7b2d8b,#e63946);border-radius:6px;transition:width .4s ease;
  box-shadow:0 0 8px rgba(123,45,139,0.8);}

/* ══ ARENA SECTION ══════════════════════════════════════════════════════════ */
.arena-section{flex:1;display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 5% 3%;position:relative;}

/* Character containers */
.char-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  position: relative;
  top: 1vh; /* KARAKTERLERİ AŞAĞI, KUMUN ÜSTÜNE ÇEKER */
}
.char-wrap.enemy-wrap{transform:scaleX(-1);}
.char-wrap.enemy-wrap .char-info{transform:scaleX(-1);}
.enemy-wrap .hp-text-sm{transform:scaleX(-1);display:inline-block;}
/* HP bar fill direction fixed for flipped parent */
.enemy-wrap .char-hp-fill{transform-origin:right center;}

/* SVG Character frames */
.char-svg-wrap{position:relative;width:140px;height:200px;cursor:pointer;}

/* HP bar over character */
.char-hp-bar{width:130px;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;overflow:hidden;height:10px;margin-bottom:4px;}
.char-hp-fill{height:100%;border-radius:8px;transition:width .3s ease;position:relative;overflow:hidden;}
.char-hp-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  animation:hpShine 2s infinite;}
@keyframes hpShine{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.hero-hp-fill{background:linear-gradient(90deg,#4cc9f0,#0077b6);box-shadow:0 0 8px rgba(76,201,240,0.5);}
.enemy-hp-fill{background:linear-gradient(90deg,#e63946,#c1121f);box-shadow:0 0 8px rgba(230,57,70,0.5);}
.hp-text-sm{font-size:9px;text-align:center;font-family:'Rajdhani';opacity:0.8;margin-bottom:6px;}
.hp-fill-low{background:linear-gradient(90deg,#ff4800,#ff0000)!important;animation:hpDanger .5s infinite alternate;}
@keyframes hpDanger{0%{opacity:1;}100%{opacity:0.5;}}

.char-info{text-align:center;margin-top:4px;}
.char-name{font-size:12px;font-weight:700;color:var(--gold);text-shadow:0 0 8px rgba(232,184,75,0.5);}
.char-level{font-size:10px;opacity:0.55;font-family:'Rajdhani';}

/* VS badge + attack button column */
.vs-center {
  position: absolute;
  left: 50%;
  top: 20%; /* BUTONLARI İYİCE YUKARI TAŞIR (25'ten 18'e) */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Boşluğu hafif kıstık */
  font-family: 'Cinzel Decorative', serif;
  font-size: 26px; /* MOBİL İÇİN KÜÇÜLTÜLDÜ (38'den 26'ya) */
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 15px rgba(232,184,75,.9), 0 0 30px rgba(232,184,75,.4);
  animation: vsPulse 2s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
.vs-center .btn-attack,.vs-center .ability-btn{pointer-events:all;}
@keyframes vsPulse{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.04);}}

/* Combo */
.combo-box{position:absolute;left:50%;top:25%;transform:translateX(-50%);
  text-align:center;pointer-events:none;z-index:20;opacity:0;transition:opacity .2s;}
.combo-box.show{opacity:1;}
.combo-num{font-family:'Cinzel Decorative',serif;font-size:52px;font-weight:900;
  color:var(--red);text-shadow:0 0 10px rgba(230,57,70,1),0 0 25px rgba(230,57,70,0.5);
  animation:comboPop .4s ease-in-out infinite alternate;}
@keyframes comboPop{0%{transform:scale(1);}100%{transform:scale(1.08);}}
.combo-lbl{font-size:14px;color:var(--gold);text-transform:uppercase;letter-spacing:6px;}

/* ══ CONTROLS ════════════════════════════════════════════════════════════════ */
.controls{display:flex;justify-content:center;gap:8px;padding:10px 8px;
  background:linear-gradient(0deg,rgba(0,0,0,0.92) 0%,transparent 100%);flex-wrap:wrap;}

.btn{padding:10px 18px;border:none;border-radius:20px;font-family:'Rajdhani',sans-serif;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px;}
.btn-attack {
  background: linear-gradient(135deg, #7b0d1e, #e63946);
  color: #fff;
  font-size: 14px; /* YAZI KÜÇÜLTÜLDÜ */
  padding: 10px 24px; /* BUTON BOYUTU DARALTILDI */
  box-shadow: 0 0 20px rgba(230,57,70,0.5);
  animation: attackGlow 2s infinite;
}
@keyframes attackGlow{0%,100%{box-shadow:0 0 20px rgba(230,57,70,0.5);}50%{box-shadow:0 0 35px rgba(230,57,70,0.9);}}
.btn-attack:active{transform:scale(0.92);}
.btn-ui{background:rgba(255,255,255,0.07);color:#ccc;border:1px solid rgba(255,255,255,0.15);}
.btn-ui:active{background:rgba(255,255,255,0.15);}

/* ══ DAMAGE NUMBERS ══════════════════════════════════════════════════════════ */
.dmg-num{position:fixed;font-family:'Cinzel Decorative',serif;font-weight:900;pointer-events:none;
  z-index:500;animation:dmgFloat .9s ease-out forwards;}
.dmg-normal{font-size:28px;color:#fff;text-shadow:0 0 8px rgba(255,255,255,0.7);}
.dmg-crit{font-size:42px;color:var(--gold);text-shadow:0 0 12px rgba(232,184,75,1),0 0 24px rgba(232,184,75,0.5);}
.dmg-enemy{font-size:22px;color:#ff4444;text-shadow:0 0 8px rgba(255,68,68,0.7);}
.dmg-pet{font-size:24px;color:var(--green);text-shadow:0 0 8px rgba(44,198,83,0.7);}
@keyframes dmgFloat{0%{transform:translateY(0) scale(.5);opacity:0;}20%{transform:translateY(-20px) scale(1.2);opacity:1;}100%{transform:translateY(-80px);opacity:0;}}

/* ══ OVERLAYS ════════════════════════════════════════════════════════════════ */
.overlay-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .3s;}
.overlay-bg.on{opacity:1;pointer-events:all;}

.panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  width:92%;max-width:520px;height:82vh;max-height:82vh;
  background:var(--panel);
  border:1px solid rgba(232,184,75,0.2);border-radius:20px;
  padding:0;
  z-index:101;opacity:0;pointer-events:none;transition:all .3s;
  display:flex;flex-direction:column;
  box-shadow:0 0 50px rgba(0,0,0,.8),inset 0 0 30px rgba(232,184,75,0.03);
}
.panel.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;}

/* Fixed header */
.panel-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px 14px;
  border-bottom:1px solid rgba(232,184,75,0.15);
  flex-shrink:0;
}

/* Scrollable body */
.panel-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:16px 20px 20px;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(232,184,75,.2) transparent;
}
.panel-body::-webkit-scrollbar{width:3px;}
.panel-body::-webkit-scrollbar-track{background:transparent;}
.panel-body::-webkit-scrollbar-thumb{background:rgba(232,184,75,.25);border-radius:4px;}

.panel-title{font-family:'Cinzel Decorative',serif;font-size:17px;color:var(--gold);}
.x-btn{background:none;border:none;color:#888;font-size:26px;cursor:pointer;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;}
.x-btn:hover{background:rgba(230,57,70,0.2);color:var(--red);transform:rotate(90deg);}

/* ══ EQUIPMENT PANEL ══════════════════════════════════════════════════════════ */
.equip-layout{display:grid;grid-template-columns:1fr 64px 1fr;gap:8px;align-items:start;margin-bottom:4px;}
.char-silhouette{display:flex;justify-content:center;align-items:flex-start;padding:4px 0;}
.equip-slots{display:flex;flex-direction:column;gap:6px;}
.eq-slot{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);border-radius:11px;padding:8px 9px;cursor:pointer;
  transition:all .3s;position:relative;}
.eq-slot:hover{border-color:rgba(232,184,75,0.4);background:rgba(232,184,75,0.07);}
.eq-slot.filled{border-color:rgba(232,184,75,0.5);background:rgba(232,184,75,0.08);
  box-shadow:0 0 10px rgba(232,184,75,0.12);}
.eq-slot.filled:hover{border-color:rgba(230,57,70,0.5);background:rgba(230,57,70,0.08);}
.slot-icon-wrap{width:34px;height:34px;border-radius:9px;background:rgba(0,0,0,0.4);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.08);}
.slot-info{flex:1;min-width:0;}
.slot-name{font-size:9px;opacity:0.45;text-transform:uppercase;letter-spacing:1px;margin-bottom:1px;}
.slot-item-name{font-size:11px;font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slot-stat{font-size:10px;color:var(--blue);}
.slot-empty-text{font-size:10px;opacity:0.35;font-style:italic;}
.unequip-hint{position:absolute;top:3px;right:5px;font-size:8px;opacity:0;color:var(--red);transition:opacity .2s;}
.eq-slot.filled:hover .unequip-hint{opacity:1;}
.inv-section{margin-top:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px;}

/* Category tab bar */
.inv-tabs{display:flex;gap:5px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px;touch-action:pan-x;scrollbar-width:none;}
.inv-tabs::-webkit-scrollbar{display:none;}
.inv-tab{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);font-size:11px;font-weight:700;
  color:#aaa;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;
}
.inv-tab:hover{background:rgba(255,255,255,.1);color:#fff;}
.inv-tab.active{background:rgba(76,201,240,.15);border-color:rgba(76,201,240,.4);color:var(--blue);}
.inv-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;font-size:9px;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);
}
.inv-tab.active .inv-tab-count{background:rgba(76,201,240,.2);border-color:rgba(76,201,240,.4);}

/* Item grid */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;}

/* Item card */
.inv-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:9px 7px;text-align:center;cursor:pointer;transition:all .25s;
  position:relative;overflow:hidden;
}
.inv-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:radial-gradient(ellipse at 50% 0%,rgba(76,201,240,.18),transparent 70%);
}
.inv-card:hover{transform:translateY(-3px);border-color:rgba(76,201,240,.5);box-shadow:0 4px 16px rgba(76,201,240,.2);}
.inv-card:hover::before{opacity:1;}
.inv-card:active{transform:scale(.95);}

/* Tier colour tint on left edge */
.inv-card.tier-1{border-left:3px solid #8aaa88;}
.inv-card.tier-2{border-left:3px solid #4cc9f0;}
.inv-card.tier-3{border-left:3px solid #9d4edd;}
.inv-card.tier-4{border-left:3px solid var(--gold);}
.inv-card.tier-5{border-left:3px solid var(--red);}

.inv-card-icon{font-size:26px;margin-bottom:4px;line-height:1;}
.inv-card-name{font-size:9px;font-weight:700;margin-bottom:3px;line-height:1.3;color:#e0e0e0;}
.inv-card-stat{font-size:9px;color:var(--blue);line-height:1.4;}
.inv-card-equip-hint{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(76,201,240,.85);color:#000;font-size:9px;font-weight:700;
  padding:2px;text-align:center;transform:translateY(100%);transition:transform .2s;
}
.inv-card:hover .inv-card-equip-hint{transform:translateY(0);}

.inv-empty{text-align:center;padding:24px;opacity:.35;font-size:13px;grid-column:1/-1;}
.inv-cat-empty{text-align:center;padding:18px;opacity:.3;font-size:12px;grid-column:1/-1;}

/* ══ CRAFTING PANEL ══════════════════════════════════════════════════════════ */
.mat-bar{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;
  background:rgba(0,0,0,0.5);border-radius:12px;border:1px solid rgba(255,255,255,0.08);
  position:sticky;top:0;z-index:2;
  backdrop-filter:blur(8px);
}
.mat-pill{font-size:12px;background:rgba(255,255,255,0.07);border-radius:8px;padding:3px 9px;white-space:nowrap;}

.craft-tabs{display:flex;gap:5px;margin-bottom:12px;overflow-x:auto;flex-wrap:nowrap;
  scrollbar-width:none;touch-action:pan-x;}
.craft-tabs::-webkit-scrollbar{display:none;}
.craft-tab{padding:6px 14px;border-radius:14px;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);font-size:11px;font-weight:700;cursor:pointer;
  color:#aaa;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.craft-tab.active{background:rgba(232,184,75,0.15);border-color:rgba(232,184,75,0.4);color:var(--gold);}

.craft-list{display:flex;flex-direction:column;gap:8px;}
.craft-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:11px 12px;transition:all .2s;}
.craft-row:hover{background:rgba(255,255,255,0.06);}
.craft-row-icon{font-size:28px;flex-shrink:0;}
.craft-row-info{flex:1;min-width:0;}
.craft-row-name{font-size:12px;font-weight:700;margin-bottom:2px;}
.craft-row-stat{font-size:11px;color:var(--green);margin-bottom:3px;}
.craft-row-cost{font-size:11px;display:flex;gap:5px;flex-wrap:wrap;}
.cost-item{padding:2px 6px;border-radius:6px;font-size:10px;}
.cost-ok{background:rgba(44,198,83,0.15);color:var(--green);border:1px solid rgba(44,198,83,0.2);}
.cost-bad{background:rgba(230,57,70,0.15);color:#ff6b6b;border:1px solid rgba(230,57,70,0.2);}
.craft-do-btn{background:linear-gradient(135deg,#1a6b3a,#2dc653);border:none;color:#fff;
  padding:9px 14px;border-radius:11px;font-weight:700;font-size:12px;cursor:pointer;
  flex-shrink:0;transition:all .2s;white-space:nowrap;}
.craft-do-btn:disabled{background:#333;color:#555;cursor:not-allowed;}
.craft-do-btn:not(:disabled):hover{transform:scale(1.05);box-shadow:0 0 12px rgba(44,198,83,0.4);}

/* ══ PETS PANEL ══════════════════════════════════════════════════════════════ */
.pet-grid{display:flex;flex-direction:column;gap:10px;}
.pet-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.03);
  border:2px solid transparent;border-radius:14px;padding:14px;transition:all .25s;}
.pet-row.active-pet{border-color:rgba(230,57,70,0.5);background:rgba(230,57,70,0.07);}
.pet-row.locked-pet{opacity:0.45;}
.pet-row-icon{font-size:40px;flex-shrink:0;}
.pet-row-info{flex:1;}
.pet-row-name{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:2px;}
.pet-row-desc{font-size:11px;opacity:0.65;}
.pet-row-btn{padding:7px 14px;border:none;border-radius:10px;font-weight:700;font-size:11px;cursor:pointer;flex-shrink:0;transition:all .2s;}
.btn-select{background:linear-gradient(135deg,#7b2d8b,#e63946);color:#fff;}
.btn-active{background:rgba(44,198,83,0.2);color:var(--green);border:1px solid rgba(44,198,83,0.3);cursor:default;}
.btn-unlock{background:linear-gradient(135deg,#7a5c00,var(--gold));color:#000;}
.btn-unlock:disabled{background:#333;color:#555;cursor:not-allowed;}

/* ══ LEVEL UP / DEATH SCREENS ════════════════════════════════════════════════ */
.full-overlay{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;z-index:2000;opacity:0;pointer-events:none;transition:opacity .5s;}
.full-overlay.on{opacity:1;pointer-events:all;}

.lvlup-screen{background:radial-gradient(circle, rgba(100, 25, 120, 0.85) 0%, rgba(5, 2, 10, 0.98) 70%); backdrop-filter: blur(10px);}
.death-screen{background:rgba(0,0,0,.97);}
.death-inner{
  display:flex;flex-direction:column;align-items:center;gap:0;
  animation:deathFadeIn .6s ease-out;
}
@keyframes deathFadeIn{0%{opacity:0;transform:scale(.92);}100%{opacity:1;transform:scale(1);}}
.death-skull{
  font-size:72px;margin-bottom:12px;
  animation:skullPulse 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 20px rgba(230,57,70,.8));
}
@keyframes skullPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.death-title{
  font-size:52px;color:var(--red);letter-spacing:6px;
  text-shadow:0 0 30px rgba(230,57,70,1),0 0 60px rgba(230,57,70,.4);
  margin-bottom:14px;
}
.death-details{
  font-size:14px;color:rgba(255,255,255,.5);
  margin-bottom:32px;letter-spacing:1px;text-align:center;
}
.revive-btn{
  background:linear-gradient(135deg,#7b0d1e,var(--red));
  border:none;color:#fff;padding:15px 44px;border-radius:22px;
  font-weight:900;font-size:16px;letter-spacing:2px;
  cursor:pointer;box-shadow:0 0 30px rgba(230,57,70,.5);
  transition:all .25s;font-family:'Rajdhani';
}
.revive-btn:hover{transform:scale(1.06);box-shadow:0 0 50px rgba(230,57,70,.8);}

/* Level-up shared styles */
.big-title{font-family:'Cinzel Decorative',serif;font-weight:900;text-align:center;animation:bigPop .8s ease-out;}
.lvl-title{font-size:48px;color:var(--gold);text-shadow:0 0 20px rgba(232,184,75,.9),0 0 50px rgba(232,184,75,.4);}
@keyframes bigPop{0%{transform:scale(0) rotate(-8deg);opacity:0;}55%{transform:scale(1.15) rotate(3deg);}100%{transform:scale(1);opacity:1;}}
.lvl-details{font-size:18px;margin-top:10px;opacity:.85;}
.stat-gains{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap;justify-content:center;}
.gain-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 18px;text-align:center;}
.gain-val{font-family:'Cinzel Decorative',serif;color:var(--green);font-size:18px;}
.gain-lbl{font-size:10px;opacity:.6;margin-top:2px;}
.tap-hint{margin-top:22px;font-size:13px;opacity:.5;animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:.3;}50%{opacity:.8;}}

/* Offline modal */
.offline-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  width:85%;max-width:360px;background:var(--panel);border:2px solid rgba(232,184,75,0.3);
  border-radius:20px;padding:24px;z-index:3000;text-align:center;opacity:0;pointer-events:none;
  transition:all .4s;box-shadow:0 0 50px rgba(232,184,75,.2);}
.offline-modal.on{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1);}
.off-title{font-family:'Cinzel Decorative',serif;font-size:20px;color:var(--gold);margin-bottom:6px;}
.off-sub{font-size:12px;opacity:.6;margin-bottom:16px;}
.off-rewards{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.off-rw{background:rgba(255,255,255,.05);border-radius:10px;padding:10px 16px;}
.off-rw-val{font-family:'Cinzel Decorative',serif;font-size:20px;color:var(--gold);font-weight:700;}
.off-rw-lbl{font-size:10px;opacity:.6;margin-top:2px;}
.claim-btn{background:linear-gradient(135deg,var(--gold),#ff8c00);border:none;color:#000;
  padding:12px 36px;border-radius:16px;font-weight:900;font-size:15px;cursor:pointer;transition:all .3s;}
.claim-btn:hover{transform:scale(1.05);}

/* Floating text */
.float-txt{position:fixed;font-family:'Rajdhani';font-weight:700;font-size:18px;
  pointer-events:none;z-index:1500;text-shadow:1px 1px 3px rgba(0,0,0,.8);animation:floatUp 1.4s ease-out forwards;}
@keyframes floatUp{0%{transform:translateY(0) scale(.8);opacity:0;}20%{transform:translateY(-18px) scale(1.1);opacity:1;}100%{transform:translateY(-80px);opacity:0;}}

.screen-shake{animation:shake .35s both;}
@keyframes shake{10%,90%{transform:translate3d(-1px,0,0);}20%,80%{transform:translate3d(2px,0,0);}30%,50%,70%{transform:translate3d(-3px,0,0);}40%,60%{transform:translate3d(3px,0,0);}}

/* Loading */
.loading-screen{position:fixed;inset:0;background:var(--dark);display:flex;flex-direction:column;
  justify-content:center;align-items:center;z-index:10000;transition:opacity .6s;}
.loading-screen.hide{opacity:0;pointer-events:none;}
.load-title{font-family:'Cinzel Decorative',serif;font-size:26px;color:var(--gold);animation:blink 1.5s infinite;}
.load-bar{width:200px;height:4px;background:rgba(255,255,255,.1);border-radius:4px;margin-top:18px;overflow:hidden;}
.load-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));width:0%;transition:width .3s;box-shadow:0 0 10px var(--blue);}

/* ══ QUEST PANEL ══════════════════════════════════════════════════════════════ */
.quest-list{display:flex;flex-direction:column;gap:10px;}
.quest-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:13px 13px 13px 16px;transition:all .25s;
  position:relative;overflow:hidden;
}
.quest-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;}
.quest-card.qtype-kill::before{background:var(--red);}
.quest-card.qtype-craft::before{background:var(--green);}
.quest-card.qtype-level::before{background:var(--blue);}
.quest-card.qtype-gold::before{background:var(--gold);}
.quest-card.completed{border-color:rgba(232,184,75,.4);background:rgba(232,184,75,.06);}
.quest-card.claimed{opacity:.4;border-style:dashed;}
.quest-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.quest-icon{font-size:24px;flex-shrink:0;margin-top:1px;}
.quest-info{flex:1;min-width:0;}
.quest-name{font-size:13px;font-weight:700;margin-bottom:2px;}
.quest-desc{font-size:11px;opacity:.6;margin-bottom:6px;line-height:1.4;}
.quest-prog-bg{height:6px;background:rgba(0,0,0,.5);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.08);}
.quest-prog-fill{height:100%;border-radius:6px;transition:width .4s ease;}
.qtype-kill .quest-prog-fill{background:linear-gradient(90deg,#7b0d1e,var(--red));}
.qtype-craft .quest-prog-fill{background:linear-gradient(90deg,#0a5c28,var(--green));}
.qtype-level .quest-prog-fill{background:linear-gradient(90deg,#0a3a5c,var(--blue));}
.qtype-gold .quest-prog-fill{background:linear-gradient(90deg,#7a5c00,var(--gold));}
.quest-prog-txt{font-size:10px;opacity:.55;margin-top:3px;}
.quest-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px;}
.quest-rewards{display:flex;gap:5px;flex-wrap:wrap;flex:1;}
.quest-rew-pill{font-size:10px;background:rgba(255,255,255,.07);border-radius:8px;padding:2px 7px;border:1px solid rgba(255,255,255,.1);}
.quest-rew-pill.rew-gold{color:var(--gold);border-color:rgba(232,184,75,.2);}
.quest-rew-pill.rew-stat{color:var(--green);border-color:rgba(44,198,83,.2);}
.quest-rew-pill.rew-exp{color:var(--blue);border-color:rgba(76,201,240,.2);}
.quest-claim-btn{background:linear-gradient(135deg,var(--gold),#c87800);border:none;color:#000;padding:7px 14px;border-radius:10px;font-weight:700;font-size:11px;cursor:pointer;transition:all .2s;flex-shrink:0;white-space:nowrap;}
.quest-claim-btn:hover{transform:scale(1.05);}
.quest-done-badge{font-size:11px;color:var(--green);font-weight:700;flex-shrink:0;}

/* Quest notification badge on button */
.btn-quest-wrap{position:relative;display:inline-block;}
.quest-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:white;border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:badgePop .3s ease-out;}
@keyframes badgePop{0%{transform:scale(0);}70%{transform:scale(1.3);}100%{transform:scale(1);}}

/* Quest complete toast */
.quest-toast{position:fixed;bottom:20%;left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(135deg,rgba(10,12,22,.97),rgba(20,25,40,.97));border:1px solid rgba(232,184,75,.4);border-radius:16px;padding:14px 22px;z-index:2000;text-align:center;opacity:0;pointer-events:none;transition:all .4s;min-width:240px;box-shadow:0 0 30px rgba(232,184,75,.2);}
.quest-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.qt-title{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:13px;margin-bottom:4px;}
.qt-name{font-size:15px;font-weight:700;margin-bottom:6px;}
.qt-rewards{font-size:12px;opacity:.8;}

/* ══ UPGRADE PANEL ════════════════════════════════════════════════════════════ */
.upg-section-title{
  font-family:'Cinzel Decorative',serif;font-size:11px;color:var(--gold);
  text-transform:uppercase;letter-spacing:3px;opacity:.7;
  margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(232,184,75,.12);
}
.upg-section-title:first-child{margin-top:0;}

.upg-card{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:11px 12px;margin-bottom:8px;
  transition:all .2s;position:relative;overflow:hidden;
}
.upg-card::after{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);
  pointer-events:none;
}
.upg-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);}
.upg-icon{font-size:28px;flex-shrink:0;width:38px;text-align:center;}
.upg-body{flex:1;min-width:0;}
.upg-name{font-size:13px;font-weight:700;margin-bottom:1px;}
.upg-desc{font-size:10px;opacity:.5;margin-bottom:5px;line-height:1.3;}
.upg-progress-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.upg-lvl-badge{
  font-family:'Cinzel Decorative',serif;font-size:10px;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:2px 7px;white-space:nowrap;flex-shrink:0;
}
.upg-bar-bg{flex:1;height:5px;background:rgba(0,0,0,.5);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.08);}
.upg-bar-fill{height:100%;border-radius:6px;transition:width .4s ease;}
.upg-atk   .upg-bar-fill{background:linear-gradient(90deg,#7b0d1e,var(--red));}
.upg-atk   .upg-name{color:#ff6b6b;}
.upg-atkspd .upg-bar-fill{background:linear-gradient(90deg,#0a4a7a,var(--blue));}
.upg-atkspd .upg-name{color:#4cc9f0;}
.upg-hp    .upg-bar-fill{background:linear-gradient(90deg,#0a5c28,var(--green));}
.upg-hp    .upg-name{color:#5eff9a;}
.upg-crit  .upg-bar-fill{background:linear-gradient(90deg,#7a5c00,var(--gold));}
.upg-crit  .upg-name{color:#ffd97d;}
.upg-regen .upg-bar-fill{background:linear-gradient(90deg,#1a4a6a,#00d4ff);}
.upg-regen .upg-name{color:#80efff;}
.upg-gold  .upg-bar-fill{background:linear-gradient(90deg,#5a4000,#e8b84b);}
.upg-gold  .upg-name{color:#e8b84b;}
.upg-def   .upg-bar-fill{background:linear-gradient(90deg,#1a3a6a,#4cc9f0);}
.upg-def   .upg-name{color:#80d4ff;}
.upg-stat-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;opacity:.65;margin-bottom:4px;}
.upg-cur{color:#aaa;}
.upg-nxt{color:var(--green);}
.upg-buy-btn{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:7px 12px;cursor:pointer;transition:all .2s;min-width:64px;
}
.upg-buy-btn:hover:not(:disabled){
  border-color:rgba(232,184,75,.5);background:rgba(232,184,75,.1);
  transform:translateY(-2px);box-shadow:0 4px 15px rgba(232,184,75,.2);
}
.upg-buy-btn:disabled{opacity:.35;cursor:not-allowed;}
.upg-buy-btn:active:not(:disabled){transform:scale(.95);}
.upg-cost-val{font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--gold);font-weight:700;}
.upg-cost-lbl{font-size:9px;opacity:.5;text-transform:uppercase;letter-spacing:1px;}
.upg-maxed{
  flex-shrink:0;font-size:11px;color:var(--gold);font-weight:700;
  background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.3);
  border-radius:10px;padding:6px 10px;text-align:center;
}

/* Block damage number */
.dmg-block{font-size:18px;color:#80d4ff;text-shadow:0 0 8px rgba(76,201,240,0.8);}
/* Upgrade flash on stat cards in header */
.stat-pill.flash{animation:statFlash .5s ease-out;}
@keyframes statFlash{0%{transform:scale(1);}40%{transform:scale(1.15);box-shadow:0 0 20px rgba(232,184,75,.6);}100%{transform:scale(1);}}

/* ══ CHEST / LOOT SYSTEM ══════════════════════════════════════════════════════ */
.chest-panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  width:92%;max-width:420px;
  background:linear-gradient(160deg,#0e0a1a,#1a0e08);
  border:2px solid rgba(232,184,75,.4);border-radius:24px;
  padding:0;z-index:500;opacity:0;pointer-events:none;
  transition:all .4s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 0 60px rgba(232,184,75,.2),0 0 120px rgba(0,0,0,.8);
  display:flex;flex-direction:column;max-height:85vh;
}
.chest-panel.on{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1);}
.chest-panel-hdr{
  padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.chest-panel-title{font-family:'Cinzel Decorative',serif;font-size:16px;color:var(--gold);}
.chest-panel-body{flex:1;overflow-y:auto;padding:16px 20px 20px;touch-action:pan-y;scrollbar-width:none;}
.chest-panel-body::-webkit-scrollbar{display:none;}

/* Key display row */
.key-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.key-pill{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:14px;font-size:12px;font-weight:700;
  border:1px solid;transition:all .2s;
}
.key-pill.silver{background:rgba(192,192,192,.1);border-color:rgba(192,192,192,.3);color:#ddd;}
.key-pill.gold  {background:rgba(232,184,75,.1); border-color:rgba(232,184,75,.4); color:var(--gold);}
.key-pill.plat  {background:rgba(147,51,234,.12);border-color:rgba(147,51,234,.5); color:#d8b4fe;}

/* Chest cards */
.chest-cards{display:flex;flex-direction:column;gap:10px;}
.chest-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:16px;border:1px solid;
  cursor:pointer;transition:all .25s;position:relative;overflow:hidden;
}
.chest-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.08),transparent 70%);
}
.chest-card:hover::before{opacity:1;}
.chest-card:active{transform:scale(.97);}
.chest-card.silver{background:rgba(150,150,160,.07);border-color:rgba(200,200,220,.25);}
.chest-card.gold-c{background:rgba(232,184,75,.07);border-color:rgba(232,184,75,.35);}
.chest-card.plat  {background:rgba(147,51,234,.08);border-color:rgba(147,51,234,.4);}
.chest-card:hover.silver{border-color:rgba(200,200,220,.5);}
.chest-card:hover.gold-c{border-color:rgba(232,184,75,.6);}
.chest-card:hover.plat  {border-color:rgba(147,51,234,.7);}
.chest-card-icon{font-size:40px;flex-shrink:0;filter:drop-shadow(0 0 8px currentColor);}
.chest-card-info{flex:1;}
.chest-card-name{font-family:'Cinzel Decorative',serif;font-size:13px;font-weight:700;margin-bottom:3px;}
.chest-card.silver .chest-card-name{color:#ccc;}
.chest-card.gold-c .chest-card-name{color:var(--gold);}
.chest-card.plat   .chest-card-name{color:#d8b4fe;}
.chest-card-rates{font-size:10px;opacity:.6;line-height:1.7;}
.chest-card-key{font-size:11px;opacity:.5;margin-top:4px;}
.chest-open-btn{
  padding:9px 18px;border:none;border-radius:12px;font-weight:700;font-size:12px;cursor:pointer;
  flex-shrink:0;transition:all .2s;letter-spacing:.5px;
}
.chest-card.silver .chest-open-btn{background:linear-gradient(135deg,#4a4a5a,#8a8a9a);color:#fff;}
.chest-card.gold-c .chest-open-btn{background:linear-gradient(135deg,#7a5c00,var(--gold));color:#000;}
.chest-card.plat   .chest-open-btn{background:linear-gradient(135deg,#4a1a8a,#9333ea);color:#fff;}
.chest-open-btn:disabled{background:#333;color:#555;cursor:not-allowed;}
.chest-open-btn:not(:disabled):active{transform:scale(.95);}

/* Chest open result overlay */
.chest-result{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);
  width:88%;max-width:380px;
  background:linear-gradient(160deg,#0e0a1a,#12080a);
  border:2px solid;border-radius:24px;padding:28px 24px;
  z-index:600;opacity:0;pointer-events:none;
  transition:all .45s cubic-bezier(.2,.8,.3,1);
  text-align:center;
}
.chest-result.on{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1);}
.chest-result.silver{border-color:rgba(200,200,220,.5);}
.chest-result.gold-c{border-color:rgba(232,184,75,.6);}
.chest-result.plat  {border-color:rgba(147,51,234,.7);box-shadow:0 0 40px rgba(147,51,234,.3);}
.chest-result-beam{
  position:absolute;inset:0;border-radius:24px;overflow:hidden;pointer-events:none;
}
.chest-result-beam::before{
  content:'';position:absolute;top:-50%;left:30%;width:40%;height:200%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.04),transparent);
  animation:beamSweep 2s ease-in-out infinite;
}
@keyframes beamSweep{0%,100%{transform:rotate(-15deg) translateX(-40px);}50%{transform:rotate(-15deg) translateX(40px);}}
.chest-result-icon{font-size:64px;margin-bottom:8px;animation:chestPop .5s cubic-bezier(.2,.8,.3,1);}
@keyframes chestPop{0%{transform:scale(0) rotate(-15deg);}60%{transform:scale(1.15) rotate(5deg);}100%{transform:scale(1) rotate(0);};}
.chest-result-rarity{font-size:11px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;opacity:.7;}
.chest-result-name{font-family:'Cinzel Decorative',serif;font-size:18px;margin-bottom:4px;}
.chest-result-stat{font-size:13px;color:var(--green);margin-bottom:18px;}
.chest-result-close{
  padding:10px 32px;border:none;border-radius:14px;cursor:pointer;font-weight:700;font-size:13px;
  background:linear-gradient(135deg,var(--gold),#c87800);color:#000;
  transition:transform .2s;
}
.chest-result-close:active{transform:scale(.95);}

/* ══ COMPANION SYSTEM ════════════════════════════════════════════════════════ */
.companion-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  width:92%;max-width:500px;height:82vh;background:linear-gradient(160deg,#080414,#0e0808);
  border:1px solid rgba(232,184,75,.2);border-radius:20px;
  padding:0;z-index:101;opacity:0;pointer-events:none;transition:all .3s;
  display:flex;flex-direction:column;
  box-shadow:0 0 50px rgba(0,0,0,.8);}
.companion-panel.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;}
.companion-panel .panel-hdr{padding:16px 20px 14px;border-bottom:1px solid rgba(232,184,75,.15);flex-shrink:0;display:flex;justify-content:space-between;align-items:center;}
.companion-panel .panel-body{flex:1;overflow-y:auto;padding:16px 20px 20px;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(232,184,75,.2) transparent;}
.companion-panel .panel-body::-webkit-scrollbar{width:3px;}
.companion-panel .panel-body::-webkit-scrollbar-thumb{background:rgba(232,184,75,.25);border-radius:4px;}

.companion-card{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);margin-bottom:10px;
  transition:all .25s;position:relative;overflow:hidden;
}
.companion-card.active-comp{border-color:rgba(232,184,75,.5);background:rgba(232,184,75,.06);}
.companion-card.locked-comp{opacity:.45;}
.companion-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;}
.companion-portrait{
  width:60px;height:60px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.1);background:rgba(0,0,0,.4);
  position:relative;overflow:hidden;
}
.companion-portrait svg{width:52px;height:52px;}
.companion-info{flex:1;min-width:0;}
.companion-name{font-family:'Cinzel Decorative',serif;font-size:13px;color:var(--gold);margin-bottom:2px;}
.companion-class{font-size:10px;opacity:.5;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.companion-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.comp-stat-pill{font-size:10px;padding:2px 7px;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);}
.comp-stat-pill.atk{color:#ff8888;border-color:rgba(255,100,100,.2);}
.comp-stat-pill.def{color:#80d4ff;border-color:rgba(80,180,255,.2);}
.comp-stat-pill.hp {color:#80ff9a;border-color:rgba(80,255,120,.2);}
.comp-stat-pill.crit{color:var(--gold);border-color:rgba(232,184,75,.2);}
.companion-loyalty-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.comp-loyalty-label{font-size:9px;opacity:.45;text-transform:uppercase;letter-spacing:1px;flex-shrink:0;}
.comp-loyalty-bar-bg{flex:1;height:5px;background:rgba(0,0,0,.5);border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.08);}
.comp-loyalty-fill{height:100%;border-radius:4px;transition:width .5s ease;background:linear-gradient(90deg,#7a5c00,var(--gold));}
.comp-loyalty-txt{font-size:9px;color:var(--gold);opacity:.7;flex-shrink:0;white-space:nowrap;}
.comp-buttons{display:flex;gap:7px;flex-shrink:0;flex-direction:column;align-items:flex-end;}
.comp-select-btn{padding:7px 14px;border:none;border-radius:10px;font-weight:700;font-size:11px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.comp-select-btn.recruit{background:linear-gradient(135deg,#7b2d8b,var(--purple));color:#fff;}
.comp-select-btn.dismiss{background:rgba(230,57,70,.15);color:var(--red);border:1px solid rgba(230,57,70,.3);}
.comp-select-btn.locked{background:#333;color:#555;cursor:not-allowed;}
.comp-select-btn.active{background:rgba(44,198,83,.15);color:var(--green);border:1px solid rgba(44,198,83,.3);cursor:default;}
.comp-loyalty-level{
  font-family:'Cinzel Decorative',serif;font-size:9px;
  padding:2px 7px;border-radius:7px;background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.25);color:var(--gold);white-space:nowrap;
}

/* Companion mini-sprite on battlefield */
.companion-sprite{
  position:absolute;bottom:2px;left:-28px;
  width:26px;height:40px;pointer-events:none;z-index:20;
  animation:compIdle 2.2s ease-in-out infinite;
}
@keyframes compIdle{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.companion-sprite svg{width:26px;height:40px;}

/* ══ DUNGEON SYSTEM ══════════════════════════════════════════════════════════ */
.dungeon-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  width:92%;max-width:500px;height:82vh;background:linear-gradient(160deg,#040810,#080410);
  border:1px solid rgba(76,201,240,.2);border-radius:20px;
  padding:0;z-index:101;opacity:0;pointer-events:none;transition:all .3s;
  display:flex;flex-direction:column;box-shadow:0 0 50px rgba(0,0,0,.8);}
.dungeon-panel.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;}
.dungeon-panel .panel-hdr{padding:16px 20px 14px;border-bottom:1px solid rgba(76,201,240,.15);flex-shrink:0;display:flex;justify-content:space-between;align-items:center;}
.dungeon-panel .panel-body{flex:1;overflow-y:auto;padding:16px 20px 20px;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(76,201,240,.2) transparent;}
.dungeon-panel .panel-body::-webkit-scrollbar{width:3px;}
.dungeon-panel .panel-body::-webkit-scrollbar-thumb{background:rgba(76,201,240,.25);border-radius:4px;}

.dungeon-key-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding:10px 12px;
  background:rgba(0,0,0,.4);border-radius:12px;border:1px solid rgba(255,255,255,.07);}
.dkey-pill{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:10px;font-size:11px;font-weight:700;border:1px solid;}
.dkey-fire  {background:rgba(255,80,0,.1); border-color:rgba(255,80,0,.35);  color:#ff8060;}
.dkey-ice   {background:rgba(100,200,255,.08);border-color:rgba(100,200,255,.3);color:#a0e8ff;}
.dkey-thunder{background:rgba(255,220,0,.08);border-color:rgba(255,220,0,.3); color:#ffe566;}
.dkey-wind  {background:rgba(100,255,180,.08);border-color:rgba(100,255,180,.3);color:#80ffcc;}

.dungeon-cards{display:flex;flex-direction:column;gap:12px;}
.dungeon-card{
  border-radius:18px;border:1px solid;padding:16px;
  cursor:pointer;transition:all .3s;position:relative;overflow:hidden;
}
.dungeon-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .06;
  border-radius: 18px;
  pointer-events: none;
}
.dungeon-card.fire  {border-color:rgba(255,100,30,.4); background:rgba(255,60,0,.05);}
.dungeon-card.fire::before{background:linear-gradient(135deg,#ff4400,transparent);}
.dungeon-card.ice   {border-color:rgba(100,200,255,.35);background:rgba(50,150,255,.05);}
.dungeon-card.ice::before{background:linear-gradient(135deg,#64c8ff,transparent);}
.dungeon-card.thunder{border-color:rgba(255,220,30,.35);background:rgba(200,180,0,.05);}
.dungeon-card.thunder::before{background:linear-gradient(135deg,#ffe040,transparent);}
.dungeon-card.wind  {border-color:rgba(100,255,180,.3); background:rgba(0,200,120,.05);}
.dungeon-card.wind::before{background:linear-gradient(135deg,#64ffb4,transparent);}
.dungeon-card.completed{opacity:.55;filter:grayscale(.6);}
.dungeon-card:active{transform:scale(.98);}

.dungeon-card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.dungeon-card-icon{font-size:36px;filter:drop-shadow(0 0 10px currentColor);}
.dungeon-card-info{flex:1;}
.dungeon-card-name{font-family:'Cinzel Decorative',serif;font-size:14px;margin-bottom:2px;}
.dungeon-card.fire   .dungeon-card-name{color:#ff8060;}
.dungeon-card.ice    .dungeon-card-name{color:#a0e8ff;}
.dungeon-card.thunder .dungeon-card-name{color:#ffe566;}
.dungeon-card.wind   .dungeon-card-name{color:#80ffcc;}
.dungeon-card-desc{font-size:11px;opacity:.55;line-height:1.5;}
.dungeon-key-req{font-size:10px;opacity:.5;margin-top:3px;}
.dungeon-card-sets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.dungeon-set-pill{font-size:10px;padding:2px 8px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);opacity:.7;}
.dungeon-enter-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: 1px;
  font-family: 'Rajdhani';
  position: relative; /* BUTONU AYAĞA KALDIRIR */
  z-index: 10; /* KARTIN TÜM EFEKTLERİNİN ÜSTÜNE ÇIKARIR */
}
.dungeon-card.fire   .dungeon-enter-btn{background:linear-gradient(135deg,#8b2000,#ff4400);color:#fff;}
.dungeon-card.ice    .dungeon-enter-btn{background:linear-gradient(135deg,#003a6b,#4cc9f0);color:#fff;}
.dungeon-card.thunder .dungeon-enter-btn{background:linear-gradient(135deg,#5a4800,#ffd700);color:#000;}
.dungeon-card.wind   .dungeon-enter-btn{background:linear-gradient(135deg,#00503a,#00e599);color:#000;}
.dungeon-enter-btn:disabled{background:#333;color:#555;cursor:not-allowed;}
.dungeon-enter-btn:not(:disabled):active{transform:scale(.98);}

.dungeon-set-complete-banner{
  margin-top:12px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(232,184,75,.15),rgba(232,184,75,.05));
  border:1px solid rgba(232,184,75,.3);text-align:center;
  font-size:11px;color:var(--gold);display:none;
}
.dungeon-all-buff{
  margin:14px 0;padding:14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(232,184,75,.1),rgba(123,45,139,.1));
  border:1px solid rgba(232,184,75,.3);text-align:center;
}
.dungeon-all-buff-title{font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--gold);margin-bottom:4px;}
.dungeon-all-buff-desc{font-size:11px;opacity:.65;}

/* ══ EQUIPMENT PANEL — REDESIGN ═════════════════════════════════════════════ */
.equip-panel-hero{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:16px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(76,201,240,.08),rgba(123,45,139,.06));
  border:1px solid rgba(76,201,240,.15);
}
.equip-hero-avatar{
  width:56px;height:56px;border-radius:12px;overflow:hidden;
  border:2px solid rgba(76,201,240,.3);flex-shrink:0;
  background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;
}
.equip-hero-stats{flex:1;}
.equip-hero-name{font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--gold);margin-bottom:4px;}
.equip-stat-row{display:flex;gap:8px;flex-wrap:wrap;}
.equip-stat-badge{
  display:flex;align-items:center;gap:3px;
  font-size:10px;padding:2px 7px;border-radius:8px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);
}
.equip-stat-badge.atk{color:#ff8888;border-color:rgba(255,100,100,.2);}
.equip-stat-badge.def{color:#80d4ff;border-color:rgba(80,180,255,.2);}
.equip-stat-badge.hp {color:#80ff9a;border-color:rgba(80,255,120,.2);}

.equip-slots-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px;
}
.eq-slot{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:9px 10px;
  cursor:pointer;transition:all .28s;position:relative;overflow:hidden;
}
.eq-slot::after{
  content:'';position:absolute;inset:0;border-radius:13px;
  background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);
  pointer-events:none;
}
.eq-slot:active{transform:scale(.97);}
.eq-slot.filled{
  border-color:rgba(232,184,75,.4);
  background:linear-gradient(135deg,rgba(232,184,75,.07),rgba(0,0,0,.3));
  box-shadow:0 0 14px rgba(232,184,75,.1);
}
.eq-slot:hover{border-color:rgba(255,255,255,.2);}
.eq-slot.filled:hover{border-color:rgba(230,57,70,.5);background:linear-gradient(135deg,rgba(230,57,70,.07),rgba(0,0,0,.3));}
.slot-icon-wrap{
  width:36px;height:36px;border-radius:9px;
  background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;border:1px solid rgba(255,255,255,.07);
}
.eq-slot.filled .slot-icon-wrap{border-color:rgba(232,184,75,.25);}
.slot-info{flex:1;min-width:0;}
.slot-name{font-size:8px;opacity:.4;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1px;}
.slot-item-name{font-size:11px;font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slot-stat{font-size:10px;color:var(--blue);}
.slot-empty-text{font-size:10px;opacity:.3;font-style:italic;}
.unequip-hint{position:absolute;top:3px;right:5px;font-size:8px;opacity:0;color:var(--red);transition:opacity .2s;}
.eq-slot.filled:hover .unequip-hint{opacity:1;}

/* Tier glow border on filled slots */
.eq-slot.tier-1.filled{border-color:rgba(138,170,136,.5);}
.eq-slot.tier-2.filled{border-color:rgba(76,201,240,.5);box-shadow:0 0 12px rgba(76,201,240,.15);}
.eq-slot.tier-3.filled{border-color:rgba(157,78,221,.5);box-shadow:0 0 14px rgba(157,78,221,.2);}
.eq-slot.tier-4.filled{border-color:rgba(232,184,75,.7);box-shadow:0 0 18px rgba(232,184,75,.2);}
.eq-slot.tier-5.filled{border-color:rgba(230,57,70,.7);box-shadow:0 0 20px rgba(230,57,70,.25);}

/* Set indicator tag on slot */
.slot-set-tag{
  position:absolute;bottom:3px;right:6px;
  font-size:8px;padding:1px 5px;border-radius:5px;opacity:.75;
  font-weight:700;letter-spacing:.5px;
}

/* Inventory section divider */
.inv-section{margin-top:0;border-top:1px solid rgba(255,255,255,.07);padding-top:12px;}

/* ══ SET COMPLETION BANNER ═══════════════════════════════════════════════════ */
.set-complete-toast{
  position:fixed;top:12%;left:50%;transform:translateX(-50%) translateY(-20px);
  z-index:900;opacity:0;pointer-events:none;transition:all .5s;
  background:linear-gradient(135deg,rgba(10,4,20,.98),rgba(20,8,30,.98));
  border:2px solid var(--gold);border-radius:20px;padding:14px 22px;
  text-align:center;min-width:260px;
  box-shadow:0 0 40px rgba(232,184,75,.4);
}
.set-complete-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.sct-title{font-family:'Cinzel Decorative',serif;font-size:13px;color:var(--gold);margin-bottom:4px;}
.sct-desc{font-size:12px;opacity:.75;}

/* scrollbar */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03);}
::-webkit-scrollbar-thumb{background:rgba(232,184,75,.3);border-radius:4px;}

/* ══ CLASS SELECTION SCREEN ══════════════════════════════════════════════════ */
#classScreen{
  position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#1a0535 0%,#08030f 70%);
  transition:opacity .8s;
}
#classScreen.hide{opacity:0;pointer-events:none;}
.class-title{
  font-family:'Cinzel Decorative',serif;font-size:clamp(22px,5vw,38px);
  color:var(--gold);text-align:center;margin-bottom:6px;
  text-shadow:0 0 30px rgba(232,184,75,.8),0 0 60px rgba(232,184,75,.3);
  animation:titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse{0%,100%{text-shadow:0 0 20px rgba(232,184,75,.8);}50%{text-shadow:0 0 40px rgba(232,184,75,1),0 0 80px rgba(232,184,75,.5);}}
.class-subtitle{font-size:13px;opacity:.5;margin-bottom:32px;letter-spacing:3px;text-transform:uppercase;}
.class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:90%;max-width:540px;padding:0 10px;}
.class-card{
  background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);
  border-radius:20px;padding:20px 16px;cursor:pointer;transition:all .3s;
  text-align:center;position:relative;overflow:hidden;
}
.class-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(ellipse at 50% 0%,var(--class-glow) 0%,transparent 70%);
}
.class-card:hover{transform:translateY(-6px) scale(1.03);border-color:var(--class-color);}
.class-card:hover::before{opacity:.3;}
.class-card:active{transform:scale(.97);}
.class-card-icon{font-size:52px;margin-bottom:10px;display:block;filter:drop-shadow(0 0 12px var(--class-color));}
.class-card-name{
  font-family:'Cinzel Decorative',serif;font-size:15px;font-weight:700;
  color:var(--class-color);margin-bottom:6px;
}
.class-card-desc{font-size:11px;opacity:.6;line-height:1.5;margin-bottom:12px;}
.class-card-stats{display:flex;flex-direction:column;gap:3px;}
.class-stat-row{display:flex;justify-content:space-between;font-size:10px;padding:3px 8px;
  background:rgba(0,0,0,.3);border-radius:6px;}
.class-stat-label{opacity:.55;}
.class-stat-val{color:var(--class-color);font-weight:700;}

/* ══ CLASS ABILITY BUTTON ═════════════════════════════════════════════════════ */
.ability-btn{
  position:relative;padding:8px 14px;border:2px solid var(--class-color,var(--gold));
  border-radius:20px;background:rgba(0,0,0,.6);color:var(--class-color,var(--gold));
  font-family:'Cinzel Decorative',serif;font-size:12px;cursor:pointer;
  transition:all .25s;overflow:hidden;
  box-shadow:0 0 15px rgba(var(--class-glow-rgb),.3);
}
.ability-btn:hover:not(:disabled){
  background:rgba(var(--class-glow-rgb),.2);transform:translateY(-2px);
  box-shadow:0 0 25px rgba(var(--class-glow-rgb),.5);
}
.ability-btn:disabled{opacity:.5;cursor:not-allowed;}
.ability-btn:active:not(:disabled){transform:scale(.95);}
.ability-cd-fill{
  position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 20px 20px;
  background:var(--class-color,var(--gold));transition:width .1s linear;
}
.ability-cd-text{font-size:9px;opacity:.7;margin-top:2px;display:block;text-align:center;}

/* Class indicator badge on hero name */
.class-badge{
  display:inline-block;font-size:9px;padding:1px 6px;border-radius:8px;
  font-weight:700;margin-left:4px;vertical-align:middle;
  background:rgba(var(--class-glow-rgb),.25);border:1px solid var(--class-color);
  color:var(--class-color);
}

/* ══ INTRO CINEMATIC ═════════════════════════════════════════════════════════ */
#introScreen{
  position:fixed;inset:0;z-index:9000;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;overflow:hidden;
}
.intro-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 60%,rgba(76,30,120,.5) 0%,rgba(10,4,25,.98) 60%,#000 100%);
  animation:introBgPulse 4s ease-in-out infinite alternate;
}
@keyframes introBgPulse{0%{opacity:.7;}100%{opacity:1;}}

.intro-particles{position:absolute;inset:0;pointer-events:none;}

.intro-title-wrap{position:relative;z-index:2;text-align:center;}
.intro-eyebrow{
  font-size:11px;letter-spacing:8px;color:rgba(232,184,75,.6);
  text-transform:uppercase;margin-bottom:18px;
  animation:introFadeIn 1s ease-out 0.3s both;
}
.intro-logo{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(32px,8vw,64px);
  color:transparent;
  background:linear-gradient(135deg,#c8a400,#fff3a0,#e8b84b,#fff,#c8a400);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  text-shadow:none;
  animation:introLogoIn 1.2s cubic-bezier(.2,.8,.3,1) 0.8s both, logoShimmer 3s ease-in-out 2s infinite;
  line-height:1.1;
}
@keyframes introLogoIn{
  0%  {opacity:0;transform:scale(.4) translateY(30px);}
  60% {opacity:1;transform:scale(1.05) translateY(-5px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes logoShimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.intro-sub{
  font-size:clamp(11px,2.5vw,15px);letter-spacing:4px;color:rgba(255,255,255,.5);
  margin-top:12px;text-transform:uppercase;
  animation:introFadeIn .8s ease-out 1.6s both;
}
@keyframes introFadeIn{0%{opacity:0;transform:translateY(12px);}100%{opacity:1;transform:translateY(0);}}

/* Story text box below logo */
.intro-story{
  position:relative;z-index:2;
  max-width:480px;width:88%;
  margin-top:32px;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(232,184,75,.25);
  border-radius:16px;padding:18px 22px;
  font-size:clamp(12px,2.5vw,14px);line-height:1.8;
  color:rgba(255,255,255,.75);text-align:center;
  animation:introFadeIn .9s ease-out 2.2s both;
}
.intro-story em{color:var(--gold);font-style:normal;font-weight:700;}

.intro-btn{
  position:relative;z-index:2;
  margin-top:28px;
  padding:14px 40px;border:none;border-radius:25px;
  font-family:'Cinzel Decorative',serif;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,#7a5c00,#e8b84b,#fff3a0,#e8b84b);
  background-size:200% 200%;color:#000;cursor:pointer;
  letter-spacing:2px;
  animation:introFadeIn .8s ease-out 3.2s both, btnShimmer 2s ease-in-out 3.5s infinite;
  box-shadow:0 0 30px rgba(232,184,75,.4);
  transition:transform .2s,box-shadow .2s;
}
.intro-btn:hover{transform:scale(1.05);box-shadow:0 0 50px rgba(232,184,75,.7);}
@keyframes btnShimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* Floating rune decorations */
.intro-rune{
  position:absolute;z-index:1;pointer-events:none;
  font-family:'Cinzel Decorative',serif;
  color:rgba(232,184,75,.15);
  animation:runeFloat var(--rd,8s) ease-in-out infinite var(--rdelay,0s);
}
@keyframes runeFloat{
  0%,100%{transform:translateY(0) rotate(0deg);opacity:.15;}
  50%{transform:translateY(-30px) rotate(10deg);opacity:.3;}
}

/* ══ STORY POPUP ══════════════════════════════════════════════════════════════ */
.story-popup{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  width:90%;max-width:420px;z-index:800;
  background:linear-gradient(135deg,rgba(8,4,18,.97),rgba(20,8,40,.97));
  border:1px solid rgba(232,184,75,.35);border-radius:18px;
  padding:16px 20px 14px;
  opacity:0;pointer-events:none;
  transition:all .5s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 30px rgba(232,184,75,.1);
}
.story-popup.on{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);}
.story-popup-icon{font-size:22px;margin-bottom:6px;display:block;text-align:center;}
.story-popup-title{
  font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--gold);
  text-align:center;margin-bottom:8px;letter-spacing:2px;
  text-shadow:0 0 10px rgba(232,184,75,.5);
}
.story-popup-text{
  font-size:12px;line-height:1.75;color:rgba(255,255,255,.75);
  text-align:center;font-style:italic;
}
.story-popup-text em{color:var(--gold);font-style:normal;}
.story-popup-close{
  display:block;width:100%;margin-top:12px;padding:8px;
  border:1px solid rgba(232,184,75,.25);border-radius:10px;
  background:rgba(232,184,75,.08);color:rgba(232,184,75,.7);
  font-size:11px;letter-spacing:2px;cursor:pointer;
  font-family:'Cinzel Decorative',serif;transition:all .2s;
}
.story-popup-close:hover{background:rgba(232,184,75,.15);color:var(--gold);}
.stage-banner{
  display:flex;align-items:center;gap:10px;
  padding:5px 14px;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(8,4,20,.88),rgba(0,0,0,.75));
  border-bottom:1px solid rgba(232,184,75,.12);position:relative;z-index:12;flex-wrap:wrap;
}
.stage-num{font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--gold);white-space:nowrap;text-shadow:0 0 8px rgba(232,184,75,.5);}
.stage-bar-wrap{flex:1;min-width:80px;max-width:200px;}
.stage-prog-bg{height:7px;background:rgba(0,0,0,.55);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.1);}
.stage-prog-fill{height:100%;border-radius:6px;transition:width .4s ease;background:linear-gradient(90deg,#4cc9f0,#7b2fff);box-shadow:0 0 6px rgba(76,201,240,.5);}
.stage-kill-txt{font-size:10px;opacity:.5;text-align:right;margin-top:2px;}
.boss-incoming-lbl{font-size:9px;color:var(--red);font-weight:700;letter-spacing:2px;animation:blink 1s infinite;white-space:nowrap;}

/* Boss mode — enemy wrap pulses red AND is bigger */
.enemy-wrap.boss-mode{
  transform:scaleX(-1) scale(1.55);
  transform-origin:bottom center;
  filter:drop-shadow(0 0 18px rgba(230,57,70,.7)) drop-shadow(0 0 40px rgba(230,57,70,.3));
}
.enemy-wrap.boss-mode .char-hp-bar{
  width:160px;height:14px;
  box-shadow:0 0 14px rgba(230,57,70,.9);
}
.enemy-wrap.boss-mode .char-hp-bar .char-hp-fill{height:14px;}
.enemy-wrap.boss-mode .char-name{font-size:14px;color:var(--red);text-shadow:0 0 12px rgba(230,57,70,.9);}
.enemy-wrap.boss-mode .char-level{color:var(--red);font-weight:700;}
.boss-hp-fill{background:linear-gradient(90deg,#7b0000,#e63946,#ff6b35)!important;
  box-shadow:0 0 14px rgba(230,57,70,.9)!important;animation:bossHpGlow 1s ease-in-out infinite alternate!important;}
@keyframes bossHpGlow{0%{box-shadow:0 0 8px rgba(230,57,70,.6);}100%{box-shadow:0 0 24px rgba(230,57,70,1),0 0 50px rgba(230,57,70,.35);}}

/* Boss arrival cinematic */
.boss-arrival{
  position:fixed;inset:0;z-index:1900;pointer-events:none;
  background:radial-gradient(ellipse at 65% 45%,rgba(230,57,70,.3) 0%,transparent 65%);
  animation:bossArrive .9s ease-out forwards;
}
@keyframes bossArrive{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}
.boss-arrival-txt{
  position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);
  font-family:'Cinzel Decorative',serif;font-size:clamp(22px,5vw,40px);
  color:var(--red);text-shadow:0 0 20px rgba(230,57,70,1),0 0 60px rgba(230,57,70,.5);
  animation:bossArriveText .9s ease-out forwards;pointer-events:none;z-index:1901;white-space:nowrap;
}
@keyframes bossArriveText{0%{opacity:0;transform:translate(-50%,-50%) scale(.5);}40%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3);}}

/* Boss loot panel */
.boss-loot-panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:88%;max-width:380px;
  background:linear-gradient(160deg,rgba(10,4,22,.98),rgba(22,8,40,.98));
  border:2px solid rgba(232,184,75,.5);border-radius:22px;padding:22px 18px;
  z-index:2100;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.2,.8,.4,1.2);
  box-shadow:0 0 80px rgba(232,184,75,.2),inset 0 0 30px rgba(232,184,75,.03);
}
.boss-loot-panel.on{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1);}
.boss-loot-title{font-family:'Cinzel Decorative',serif;font-size:17px;color:var(--gold);
  text-align:center;margin-bottom:3px;text-shadow:0 0 14px rgba(232,184,75,.7);}
.boss-loot-sub{font-size:11px;opacity:.45;text-align:center;margin-bottom:16px;letter-spacing:2px;}
.boss-loot-items{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}
.boss-loot-item{display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(232,184,75,.2);
  border-radius:13px;padding:11px 13px;
  animation:lootPop .5s cubic-bezier(.2,.8,.4,1.2) both;}
@keyframes lootPop{0%{transform:scale(0) translateY(18px);opacity:0;}100%{transform:scale(1) translateY(0);opacity:1;}}
.boss-loot-emoji{font-size:30px;flex-shrink:0;}
.boss-loot-info{flex:1;}
.boss-loot-name{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:3px;}
.boss-loot-stat{font-size:11px;color:var(--blue);}
.boss-loot-none{text-align:center;padding:14px;opacity:.45;font-size:13px;}
.boss-loot-ok{width:100%;padding:11px;border:none;border-radius:13px;
  background:linear-gradient(135deg,#7a5c00,var(--gold));color:#000;
  font-family:'Cinzel Decorative',serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .25s;}
.boss-loot-ok:hover{transform:scale(1.03);box-shadow:0 0 18px rgba(232,184,75,.4);}

/* Stage clear */
.stage-clear-screen{background:radial-gradient(circle,rgba(44,198,83,.22) 0%,rgba(0,0,0,.96) 70%);}
.stage-clear-title{font-size:40px;color:var(--green);
  text-shadow:0 0 18px rgba(44,198,83,.9),0 0 50px rgba(44,198,83,.4);}

/* ══ HIT EFFECTS — FULL SYSTEM ════════════════════════════════════════════════ */

/* 1. Enemy body flash */
.hit-flash{display:none;}

/* 2. Expanding shockwave ring — disabled */
.sw-ring{display:none;}
.sw-ring2{display:none;}

/* 3. Slash streak — single diagonal line that streaks across */
.slash-streak{
  position:fixed;pointer-events:none;z-index:460;
  width:var(--sl,130px);height:var(--sw2,5px);
  border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--sc,#fff) 30%,var(--sc,#fff) 70%,transparent);
  box-shadow:0 0 14px var(--sc,#fff),0 0 28px var(--sc,#fff),0 0 50px var(--sc,#fff);
  transform-origin:left center;
  animation:slashStreak var(--sd,.22s) ease-out forwards;
}
@keyframes slashStreak{
  0%  {transform:translate(var(--sx,-80px),var(--sy,-30px)) rotate(var(--sr,-35deg)) scaleX(0);opacity:1;}
  40% {transform:translate(var(--sx,-80px),var(--sy,-30px)) rotate(var(--sr,-35deg)) scaleX(1.2);opacity:1;}
  100%{transform:translate(var(--sx,-80px),var(--sy,-30px)) rotate(var(--sr,-35deg)) scaleX(1.4);opacity:0;}
}
/* Second slash — opposite angle */
.slash-streak2{
  position:fixed;pointer-events:none;z-index:460;
  width:var(--sl,110px);height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--sc,#fff) 30%,var(--sc,#fff) 70%,transparent);
  box-shadow:0 0 10px var(--sc,#fff),0 0 22px var(--sc,#fff);
  transform-origin:left center;
  animation:slashStreak2 .26s ease-out .05s forwards;opacity:0;
}
@keyframes slashStreak2{
  0%  {transform:translate(var(--sx,-60px),var(--sy,20px)) rotate(var(--sr2,30deg)) scaleX(0);opacity:.9;}
  35% {transform:translate(var(--sx,-60px),var(--sy,20px)) rotate(var(--sr2,30deg)) scaleX(1.1);opacity:.9;}
  100%{transform:translate(var(--sx,-60px),var(--sy,20px)) rotate(var(--sr2,30deg)) scaleX(1.3);opacity:0;}
}

/* 4. Central impact burst */
.impact-core{
  position:fixed;pointer-events:none;z-index:461;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff 0%,var(--ic,#fffbe0) 25%,var(--ig,rgba(255,200,0,.4)) 55%,transparent 75%);
  animation:impactCore .3s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes impactCore{
  0%  {width:6px;height:6px;opacity:1;}
  45% {width:var(--iw,90px);height:var(--iw,90px);opacity:1;}
  100%{width:calc(var(--iw,90px)*1.6);height:calc(var(--iw,90px)*1.6);opacity:0;}
}

/* 5. Spark shards — CSS lines flying outward */
.h-shard{
  position:fixed;pointer-events:none;z-index:462;
  width:var(--w,2px);height:var(--h,22px);border-radius:2px;
  background:linear-gradient(0deg,transparent,var(--c,#fff) 40%,#fff);
  box-shadow:0 0 6px var(--c,#fff),0 0 14px var(--c,#fff);
  transform:translate(-50%,-100%) rotate(var(--a,0deg));
  transform-origin:50% 100%;
  animation:hShardFly var(--d,.4s) cubic-bezier(.05,.9,.1,1) forwards;
}
@keyframes hShardFly{
  0%  {transform:translate(-50%,-100%) rotate(var(--a,0deg)) translateY(0) scale(1);opacity:1;}
  70% {opacity:.8;}
  100%{transform:translate(-50%,-100%) rotate(var(--a,0deg)) translateY(var(--dist,-80px)) scale(.15);opacity:0;}
}

/* 6. Crit: full-diagonal gold wipe */
.crit-wipe{
  position:fixed;inset:0;pointer-events:none;z-index:401;overflow:hidden;
}
.crit-wipe::before{
  content:'';position:absolute;inset:-50%;
  background:linear-gradient(108deg,transparent 42%,rgba(255,230,80,.28) 50%,rgba(255,255,200,.08) 52%,transparent 60%);
  animation:critWipe .32s ease-out forwards;
}
@keyframes critWipe{0%{transform:translateX(-60%);} 100%{transform:translateX(80%);}}

/* 7. Crit — concentric gold rings */
.crit-ring{
  position:fixed;border-radius:50%;pointer-events:none;z-index:455;
  border:var(--crw,3px) solid rgba(255,215,0,var(--cra,.9));
  transform:translate(-50%,-50%) scale(0);
  animation:critRingExp var(--crd,.55s) ease-out var(--crdelay,0s) forwards;
}
@keyframes critRingExp{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(var(--crs,6));opacity:0;}
}

/* 8. Type-specific: magic orb pulse */
.magic-orb{
  position:fixed;border-radius:50%;pointer-events:none;z-index:458;
  background:radial-gradient(circle,rgba(255,255,255,.9),var(--mc,#b44aff) 40%,transparent 70%);
  transform:translate(-50%,-50%) scale(0);
  animation:magicOrb .5s cubic-bezier(.1,.9,.2,1) forwards;
}
@keyframes magicOrb{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:1;}
  50% {transform:translate(-50%,-50%) scale(1.4);opacity:.8;}
  100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;}
}
/* Magic trailing sparks rotate */
.magic-spark{
  position:fixed;pointer-events:none;z-index:457;width:6px;height:6px;
  border-radius:50%;background:var(--mc,#b44aff);
  box-shadow:0 0 10px var(--mc,#b44aff),0 0 20px var(--mc,#b44aff);
  animation:magicSpark var(--msd,.6s) ease-out forwards;
}
@keyframes magicSpark{
  0%  {transform:translate(var(--msx,0px),var(--msy,0px)) scale(1);opacity:1;}
  100%{transform:translate(calc(var(--msx,0px)*2.5),calc(var(--msy,0px)*2.5 + 40px)) scale(0);opacity:0;}
}

/* 9. Holy burst — radial light beams */
.holy-beam{
  position:fixed;pointer-events:none;z-index:456;
  width:3px;height:var(--hbl,70px);
  background:linear-gradient(0deg,transparent,rgba(255,240,100,.9),#fff);
  box-shadow:0 0 8px rgba(255,220,0,.8),0 0 20px rgba(255,220,0,.5);
  transform-origin:50% 100%;
  animation:holyBeam .45s ease-out forwards;
}
@keyframes holyBeam{
  0%  {transform:translate(-50%,-100%) rotate(var(--hba,0deg)) scaleY(0);opacity:1;}
  50% {transform:translate(-50%,-100%) rotate(var(--hba,0deg)) scaleY(1.1);opacity:1;}
  100%{transform:translate(-50%,-100%) rotate(var(--hba,0deg)) scaleY(1.3);opacity:0;}
}

/* 10. Hurt vignette */
.hurt-vignette{position:fixed;inset:0;pointer-events:none;z-index:400;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(230,57,70,.8) 100%);
  animation:vigFlash .6s ease-out forwards;}
@keyframes vigFlash{0%{opacity:1;}100%{opacity:0;}}

/* HP bar shake */
@keyframes barShake{
  0%,100%{transform:translateX(0);}
  15%{transform:translateX(-7px);}
  35%{transform:translateX(7px);}
  55%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
.bar-shake{animation:barShake .35s ease-out;}

/* Screen shake on crit */
@keyframes screenShake{
  0%,100%{transform:translate(0,0) rotate(0);}
  20%{transform:translate(-4px,3px) rotate(-.4deg);}
  40%{transform:translate(4px,-3px) rotate(.4deg);}
  60%{transform:translate(-2px,2px) rotate(-.2deg);}
  80%{transform:translate(2px,-1px) rotate(.2deg);}
}
.screen-shake{animation:screenShake .35s ease-out;}

@keyframes petFloat{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-8px) rotate(5deg);}}

@media(max-width:480px){
  .char-wrap{width:120px;}
  .char-svg-wrap{width:110px;height:160px;}
  .vs-center{font-size:28px;}
  .big-title.lvl-title{font-size:34px;}
}

/* WebView Optimizations */
* {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ══ DEV PANEL ══════════════════════════════════════════════════════════════ */
.dev-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dev-btn {
  background: rgba(255, 0, 255, 0.08);
  border: 1px solid rgba(255, 0, 255, 0.4);
  color: #ffbbff;
  padding: 14px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  box-shadow: inset 0 0 10px rgba(255,0,255,0.05);
}
.dev-btn:hover { 
  background: rgba(255, 0, 255, 0.2); 
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255,0,255,0.3);
}
.dev-btn:active { transform: scale(0.95); }

.dev-btn-danger {
  width: 100%;
  background: rgba(230, 57, 70, 0.15);
  border-color: var(--red);
  color: #ffcccc;
}
.dev-btn-danger:hover { 
  background: rgba(230, 57, 70, 0.35); 
  box-shadow: 0 4px 15px rgba(230,57,70,0.5);
}


/* ══ ZİNDAN ATMOSFERİ ═══════════════════════════════════════════════════════ */
body.dungeon-active #battlefield::before {
  background: linear-gradient(180deg, #1a0000 0%, #3d0000 15%, #000 100%) !important;
}
body.dungeon-active .arena-sand {
  filter: hue-rotate(-30deg) saturate(2) brightness(0.6);
}

/* ══ MOBİL ALT MENÜ (4x2 BİRLEŞİK IZGARA) ══════════════════════════════════ */
@media (max-width: 768px) {
  .controls {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); /* Yan yana 4 buton */
    gap: 0 !important; /* Boşlukları tamamen sıfırla (Birleşik tasarım) */
    padding: 0 !important;
    background: rgba(10, 12, 20, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Butonların dış hatlarını düzleştir ve aralarına ince bir çizgi çek */
  .controls > button, .controls > .btn-quest-wrap {
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  /* Görev butonunun kapsayıcısını tam alana yay */
  .btn-quest-wrap {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  /* Buton içindeki yazıları sıkıştır */
  .controls .btn {
    width: 100%;
    height: 100%;
    padding: 12px 2px !important;
    font-size: 10px !important; /* Yazılar sığsın diye küçültüldü */
    letter-spacing: 0 !important;
    white-space: nowrap;
    background: transparent !important;
  }

  /* Aktif tıklandığında hafif parlama efekti */
  .controls .btn:active {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
  }

  .header {
    flex-wrap: nowrap !important; /* Asla alt satıra geçme! */
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  .stat-pill {
    padding: 4px 6px !important;
    gap: 4px !important;
  }
  .stat-pill .val {
    font-size: 11px !important; /* Sayıları biraz küçülttük */
  }
  .stat-pill .lbl {
    display: none !important; /* MOBİLDE HAYAT KURTARAN KOD: "SEVİYE", "ALTIN" yazılarını gizler, sadece ikon (⭐) ve sayı kalır! */
  }

  /* 2. BUTON ÇAKIŞMASINI ÖNLEME */
  .vs-center {
    top: 22% !important; /* Header tek satıra çıkınca bunu da tam ortaya oturtuyoruz */
  }

  /* 3. MOBİL PERFORMANS (FPS) ARTIŞI: AĞIR EFEKTLERİ KAPATMA */
  .slash-streak, 
  .slash-streak2, 
  .impact-core, 
  .h-shard, 
  .crit-wipe, 
  .magic-orb,
  .crit-ring {
    display: none !important; /* Ekran kartını yoran kılıç ve patlama çizimlerini mobilde iptal eder */
  }
  
  /* Hasar sayılarının boyutunu mobilde küçültelim ki ekranı kaplamasınlar */
  .dmg-normal { font-size: 16px !important; }
  .dmg-crit { font-size: 24px !important; }

  canvas {
    display: none !important;
  }
  
  /* Seri tıklamalarda ekranın ve can barlarının deprem gibi titremesini (ekran sarsıntısını) engeller */
  body.screen-shake, .bar-shake, .screen-shake {
    animation: none !important;
    transform: none !important;
  }
  
  /* Hasar sayılarının (Örn: 120, 💥500!) ekranda kalma süresini yarı yarıya düşürür. 
     Böylece sayılar havada asılı kalıp birbirine girmez, anında silinirler. */
  .dmg-num {
    animation-duration: 0.4s !important; 
  }
  
}