@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Trade+Winds&display=swap');

:root {
  --primary-50:#f5f3f2; --primary-100:#e8e3e0; --primary-200:#d1c7c1;
  --primary-300:#b5a89f; --primary-400:#9a8a7d; --primary-500:#6B5D52;
  --primary-600:#4A3F37; --primary-700:#362E28; --primary-800:#2A221D;
  --primary-900:#241B18; --primary-950:#1A1412;

  --bg-primary:#241B18; --bg-secondary:#1A1412; --bg-tertiary:#2A221D;
  --bg-card:rgba(36,27,24,.95);

  --text-primary:#fff; --text-secondary:rgba(255,255,255,.85);
  --text-muted:rgba(255,255,255,.6); --text-dim:rgba(255,255,255,.4);

  --border:rgba(107,93,82,.2); --border-hover:rgba(107,93,82,.4);
  --gold:#c9a96e;

  --font-display:'Trade Winds',cursive;
  --font-body:'Inter',sans-serif;

  --navbar-h:56px; --sidebar-w:220px;
  --radius:8px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:rgba(107,93,82,.3);border-radius:3px}
::selection{background:rgba(107,93,82,.4);color:#fff}

/* ========== SCROLL PROGRESS ========== */
#scrollProgress{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:10000;width:0%}

/* ========== PRE REGISTER MODAL ========== */
.pre-register-modal{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.pre-register-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.pre-register-backdrop{position:absolute;inset:0;background:rgba(10,7,5,.76);backdrop-filter:blur(8px)}
.pre-register-panel{position:relative;width:min(920px,100%);max-height:min(760px,calc(100vh - 32px));overflow:hidden;background:linear-gradient(145deg,rgba(36,27,24,.98),rgba(26,20,18,.98) 58%,rgba(42,34,29,.96));border:1px solid rgba(201,169,110,.36);border-radius:8px;box-shadow:0 26px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08);animation:preRegisterIn .34s ease both}
.pre-register-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 78% 28%,rgba(201,169,110,.16),transparent 38%),radial-gradient(ellipse at 14% 82%,rgba(74,63,55,.52),transparent 42%);pointer-events:none}
.pre-register-panel::after{content:'';position:absolute;left:20px;right:20px;bottom:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,110,.5),transparent)}
.pre-register-close{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:rgba(12,9,7,.7);border:1px solid rgba(201,169,110,.24);border-radius:50%;cursor:pointer;transition:all .2s ease}
.pre-register-close:hover{color:#fff;border-color:rgba(201,169,110,.55);background:rgba(201,169,110,.12)}
.pre-register-ribbon{position:relative;z-index:2;margin:0 auto;width:min(620px,76%);padding:18px 24px;text-align:center;font-family:var(--font-display);font-size:1.35rem;letter-spacing:1px;color:#1a1410;background:linear-gradient(90deg,#b98945,#f2d38d 20%,#c9a96e 50%,#f2d38d 80%,#b98945);box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 28px rgba(201,169,110,.18)}
.pre-register-ribbon::before,.pre-register-ribbon::after{content:'';position:absolute;top:100%;width:34px;height:14px;background:#8a6335}
.pre-register-ribbon::before{left:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.pre-register-ribbon::after{right:0;clip-path:polygon(0 0,100% 0,0 100%)}
.pre-register-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.92fr);gap:22px;align-items:center;padding:42px 44px 36px}
.pre-register-copy{min-width:0}
.pre-register-kicker{display:inline-flex;margin-bottom:12px;padding:6px 12px;font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);background:rgba(201,169,110,.08);border:1px solid rgba(201,169,110,.22);border-radius:4px}
.pre-register-copy h2{font-family:var(--font-display);font-size:2.45rem;line-height:1.08;color:#fff;margin-bottom:12px;text-shadow:0 0 18px rgba(201,169,110,.22)}
.pre-register-copy p{max-width:440px;font-size:.88rem;line-height:1.7;color:var(--text-secondary);margin-bottom:18px}
.pre-register-rewards{display:grid;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.pre-register-rewards li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;background:rgba(12,9,7,.46);border:1px solid rgba(201,169,110,.13);border-left:2px solid rgba(201,169,110,.65);border-radius:5px}
.pre-register-rewards span{font-size:.78rem;font-weight:700;color:#f2e7d6}
.pre-register-rewards strong{font-size:.68rem;font-weight:600;color:rgba(255,255,255,.62);text-align:right}
.pre-register-actions{display:flex;gap:10px;flex-wrap:wrap}
.pre-register-visual{position:relative;min-height:430px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,rgba(201,169,110,.12),rgba(12,9,7,.18));border:1px solid rgba(201,169,110,.18)}
.pre-register-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,20,18,.12),transparent 22%,transparent 72%,rgba(26,20,18,.22)),radial-gradient(ellipse at center,transparent 42%,rgba(26,20,18,.52) 100%);z-index:1;pointer-events:none}
.pre-register-visual::after{content:'ÖN KAYIT AKTİF';position:absolute;left:50%;bottom:18px;z-index:2;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);padding:9px 16px;font-family:var(--font-display);font-size:1.22rem;color:#f4db9b;text-shadow:0 2px 0 #1a1410,0 0 14px rgba(201,169,110,.45);background:rgba(12,9,7,.68);border:1px solid rgba(201,169,110,.26);border-radius:5px}
.pre-register-visual img{width:100%;height:100%;min-height:430px;object-fit:cover;object-position:center 54%;filter:saturate(1.05) contrast(1.05)}
@keyframes preRegisterIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:820px){
  .pre-register-modal{padding:14px}
  .pre-register-panel{overflow:auto}
  .pre-register-ribbon{width:calc(100% - 56px);font-size:1rem;padding:14px 18px}
  .pre-register-content{grid-template-columns:1fr;padding:30px 18px 24px;gap:18px}
  .pre-register-copy h2{font-size:1.75rem}
  .pre-register-copy p{font-size:.8rem}
  .pre-register-rewards li{align-items:flex-start;flex-direction:column;gap:3px}
  .pre-register-rewards strong{text-align:left}
  .pre-register-visual{min-height:260px;order:-1}
  .pre-register-visual img{min-height:260px;object-position:center 52%}
  .pre-register-visual::after{font-size:.95rem}
}
@media(max-width:480px){
  .pre-register-actions .btn{width:100%;padding-left:16px;padding-right:16px}
  .pre-register-close{top:8px;right:8px;width:32px;height:32px}
}

/* ========== NAVBAR ========== */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--navbar-h);background:rgba(36,27,24,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);z-index:1000;display:flex;align-items:center;padding:0 20px}
.navbar-inner{width:100%;display:flex;align-items:center;justify-content:space-between}
.navbar-logo{display:flex;align-items:center}
.navbar-logo-img{height:36px;width:auto}
.navbar-actions{display:flex;align-items:center;gap:8px}
.nav-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:.75rem;font-weight:600;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.5px;transition:all .2s;border:1px solid transparent}
.nav-btn-discord{background:#5865F2;color:#fff}
.nav-btn-discord:hover{opacity:.85}
.nav-btn-register{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(201,169,110,.3)}
.nav-btn-register:hover{background:rgba(201,169,110,.12);border-color:rgba(201,169,110,.5);color:var(--gold)}
.nav-btn-download{background:linear-gradient(135deg,#c9a96e 0%,#a67c3d 50%,#c9a96e 100%);color:#1a1410;border:none;font-weight:700;box-shadow:0 0 12px rgba(201,169,110,.3)}
.nav-btn-download:hover{background:linear-gradient(135deg,#d4b87a 0%,#b8894a 50%,#d4b87a 100%);box-shadow:0 0 20px rgba(201,169,110,.45)}

/* Lang Selector */
.lang-selector{position:relative}
.lang-toggle{display:flex;align-items:center;gap:6px;background:rgba(107,93,82,.08);border:1px solid var(--border);border-radius:6px;padding:6px 12px;color:var(--text-muted);cursor:pointer;font-size:.75rem;font-family:var(--font-body);transition:all .2s}
.lang-toggle:hover{border-color:var(--border-hover)}
.lang-toggle svg{width:14px;height:14px;transition:transform .2s}.lang-toggle.open svg{transform:rotate(180deg)}
.lang-options{position:absolute;top:calc(100% + 6px);right:0;background:rgba(26,20,18,.96);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:6px;padding:4px;min-width:140px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s;z-index:100}
.lang-options.open{opacity:1;visibility:visible;transform:translateY(0)}
.lang-option{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:.75rem;color:var(--text-muted);transition:all .15s}
.lang-option:hover{background:rgba(107,93,82,.15);color:var(--text-primary)}
.lang-option.active{color:var(--text-primary)}
.lang-flag{width:18px;height:14px;image-rendering:pixelated;border-radius:2px;flex-shrink:0}

/* Mobile */
.mobile-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:4px}
.mobile-toggle span{width:20px;height:2px;background:var(--text-muted)}

/* ========== HERO ========== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;min-width:100%;min-height:100%;object-fit:cover;z-index:1}
.hero-overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 45% 55% at center,rgba(26,20,18,.7) 0%,rgba(26,20,18,.35) 50%,rgba(26,20,18,.15) 100%)}
.hero-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;max-width:620px;width:100%;padding:40px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-eyebrow{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:4px;color:var(--gold);margin-bottom:12px;padding:6px 18px;background:rgba(26,20,18,.6);border:1px solid rgba(201,169,110,.25);border-radius:4px;backdrop-filter:blur(6px)}
.hero-logo-img{max-width:320px;width:75%;height:auto;margin:0 auto 16px;display:block}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hero-subtitle{font-size:2rem;color:var(--primary-200);margin-bottom:14px;font-weight:600}
.hero-description{font-size:.84rem;color:var(--text-muted);line-height:1.7;margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto}
.no-p2w{color:#4ade80;font-weight:600}

/* Hero Stats */
.hero-stats{display:inline-flex;gap:0;margin-bottom:28px;background:rgba(36,27,24,.5);border:1px solid var(--border);border-radius:var(--radius);padding:10px 4px;backdrop-filter:blur(8px)}
.hero-stat{text-align:center;padding:2px 16px}
.hero-stat-val{display:block;font-family:var(--font-body);font-size:1.5rem;font-weight:700;color:var(--gold)}
.hero-stat-label{font-size:.58rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}
.hero-stat-divider{width:1px;background:var(--border);margin:2px 0}

.hero-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 28px;font-size:.8rem;font-weight:700;font-family:var(--font-body);cursor:pointer;transition:all .25s;text-transform:uppercase;letter-spacing:1px;text-decoration:none;text-align:center;border-radius:6px;border:none}
.btn-download{background:linear-gradient(135deg,#c9a96e 0%,#a67c3d 50%,#c9a96e 100%);color:#1a1410;box-shadow:0 0 16px rgba(201,169,110,.35),0 2px 8px rgba(0,0,0,.3);text-shadow:0 1px 0 rgba(255,255,255,.15)}
.btn-download:hover{background:linear-gradient(135deg,#d4b87a 0%,#b8894a 50%,#d4b87a 100%);box-shadow:0 0 24px rgba(201,169,110,.5),0 4px 12px rgba(0,0,0,.3);transform:translateY(-1px)}
.btn-register{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(201,169,110,.3);backdrop-filter:blur(4px)}
.btn-register:hover{background:rgba(201,169,110,.12);border-color:rgba(201,169,110,.5);color:var(--gold);transform:translateY(-1px)}

/* Scroll indicator */
.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2}
.scroll-arrow{width:20px;height:20px;border-right:3px solid var(--gold);border-bottom:3px solid var(--gold);transform:rotate(45deg);animation:scrollBounce 2s infinite;opacity:.85}
@keyframes scrollBounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(6px)}}

/* ========== MAIN LAYOUT ========== */
.main-layout{display:flex;min-height:100vh}
.sidebar{position:fixed;top:var(--navbar-h);left:0;width:var(--sidebar-w);height:calc(100vh - var(--navbar-h));overflow-y:auto;background:rgba(26,20,18,.95);border-right:1px solid var(--border);padding:16px 0;z-index:100;transition:width .3s ease,transform .3s ease}
.sidebar.collapsed{width:0;overflow:hidden;padding:0;border-right:none}
.sidebar.collapsed .sidebar-inner{opacity:0;pointer-events:none}
.sidebar-toggle{position:fixed;top:calc(var(--navbar-h) + 12px);left:calc(var(--sidebar-w) - 14px);width:28px;height:28px;border-radius:50%;background:var(--bg-secondary);border:1px solid var(--border);color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:102;transition:left .3s ease;padding:0}
.sidebar-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.sidebar-toggle.collapsed{left:6px}
.sidebar-toggle.collapsed svg{transform:rotate(180deg)}
.sidebar-inner{padding:0 12px;transition:opacity .2s ease}
.sidebar-group{margin-bottom:20px;margin-left:16px;position:relative}
.sidebar-group::before{content:'';position:absolute;left:0;top:26px;bottom:8px;width:2px;background:rgba(107,93,82,.15);border-radius:1px}
.sidebar-label{font-size:.62rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);padding:4px 0 6px 16px;font-weight:600}
.sidebar-link{display:block;padding:6px 10px 6px 16px;font-size:.78rem;color:var(--text-dim);border-radius:0 4px 4px 0;transition:color .15s;position:relative}
.sidebar-link::before{content:'';position:absolute;left:-3px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--bg-primary);border:2px solid rgba(107,93,82,.25);z-index:1;box-sizing:border-box}
.sidebar-link:hover{color:var(--text-secondary)}
.sidebar-link.active{color:var(--text-primary);font-weight:500}
.sidebar-link.active::before{border-color:var(--gold);background:var(--gold)}

.content{flex:1;min-width:0;padding:0;margin-left:var(--sidebar-w);transition:margin-left .3s ease}
.sidebar.collapsed~.content{margin-left:0}

/* ========== RENDER IMAGES ========== */
.render-showcase{text-align:center;margin-bottom:24px}
.render-hero-img{max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border)}
.render-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:24px}
.render-gallery img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border)}
.race-render{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:260px;margin-bottom:12px}
.race-render img{width:100%;height:260px;object-fit:contain;position:relative;z-index:1}
.race-render::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:16px;background:radial-gradient(ellipse,rgba(0,0,0,.4) 0%,transparent 70%);border-radius:50%}
.auto-card-img{width:100%;height:140px;object-fit:contain;margin-bottom:10px}
.pvp-card-img{width:100%;height:120px;object-fit:contain;margin-bottom:10px}
.info-card-render{width:100%;height:140px;object-fit:contain;margin-bottom:10px}
.equip-character{position:relative;display:flex;justify-content:center;align-items:flex-end}
.equip-character img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.equip-character::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:18px;background:radial-gradient(ellipse,rgba(0,0,0,.4) 0%,transparent 70%);border-radius:50%}

/* ========== CONTENT SECTIONS ========== */
.content-section{padding:50px 36px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.content-section>*{position:relative;z-index:1}
#races::before,#equip::before,#evo::before,#vip::before,#rowa::before,#costumes::before,#calendar::before,#calendarev::before,#vote::before,#auto::before,#bp::before,#inv::before,#shop::before,#skill::before,#switchbot::before,#farm::before,#wiki::before,#rank::before,#pvp::before,#guild::before,#life::before,#gfx::before{content:'';position:absolute;inset:0;opacity:.22;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}
#inv::before,#equip::before{opacity:.12}
/* #races::before{background-image:url('../web_img/section_bg.png')} */
/* #equip::before{background-image:url('../sistem_img/equip_character.webp');opacity:.2} */
/* #vip::before{background-image:url('../sistem_img/dungeon_saphir.webp')} */
/* #evo::before{background-image:url('../sistem_img/dungeon_troll.webp')} */
/* #rowa::before{background-image:url('../sistem_img/dungeon_ice.webp')} */
/* #costumes::before{background-image:url('../sistem_img/dungeon_azrael.webp')} */
/* #calendar::before{background-image:url('../sistem_img/dungeon_jotun.webp')} */
/* #calendarev::before{background-image:url('../sistem_img/dungeon_beran.webp')} */
/* #vote::before{background-image:url('../sistem_img/dungeon_scorpion.webp')} */
/* #auto::before{background-image:url('../sistem_img/dungeon_djinn.webp')} */
/* #bp::before{background-image:url('../sistem_img/dungeon_akzadur.webp')} */
/* #inv::before{background-image:url('../sistem_img/dungeon_saphir.webp')} */
/* #shop::before{background-image:url('../sistem_img/dungeon_troll.webp')} */
/* #skill::before{background-image:url('../sistem_img/dungeon_ice.webp')} */
/* #switchbot::before{background-image:url('../sistem_img/dungeon_azrael.webp')} */
/* #farm::before{background-image:url('../sistem_img/dungeon_jotun.webp')} */
/* #wiki::before{background-image:url('../sistem_img/dungeon_scorpion.webp')} */
/* #rank::before{background-image:url('../sistem_img/dungeon_beran.webp')} */
/* #pvp::before{background-image:url('../sistem_img/dungeon_akzadur.webp')} */
/* #guild::before{background-image:url('../sistem_img/dungeon_djinn.webp')} */
/* #life::before{background-image:url('../sistem_img/dungeon_saphir.webp')} */
/* #gfx::before{background-image:url('../sistem_img/dungeon_troll.webp')} */
.content-section:last-child{border-bottom:none}
.section-header{text-align:center;margin-bottom:32px}
.section-title{font-family:var(--font-display);font-size:1.6rem;color:var(--text-primary);margin-bottom:8px;letter-spacing:1px}
.section-desc{font-size:.82rem;color:var(--text-muted);max-width:520px;margin:0 auto;line-height:1.7}
.ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.ornament-line{width:30px;height:1px;background:var(--border-hover)}
.ornament-diamond{width:4px;height:4px;background:var(--primary-500);transform:rotate(45deg)}

/* ========== RACE CARDS ========== */
.race-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.race-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px;text-align:center;transition:border-color .2s;position:relative;overflow:hidden}
.race-card::before{content:'';position:absolute;inset:0;opacity:.15;pointer-events:none;z-index:0}
.race-card>*{position:relative;z-index:1}
.race-card:hover{border-color:var(--border-hover)}
.race-card:hover::before{opacity:.22}
.race-name{font-family:var(--font-display);font-size:1rem;margin-bottom:2px}
.race-spec{font-size:.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.race-desc{font-size:.78rem;color:var(--text-dim);line-height:1.6}

/* ========== EQUIPMENT ========== */
.equip-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.equip-character{text-align:center}
.equip-character img{width:80%;height:auto;display:inline-block;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in;animation:equipFloat 4s ease-in-out infinite}
@keyframes equipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.equip-dual{display:flex;justify-content:flex-start;gap:16px;flex-wrap:wrap}
.equip-inv{display:flex;flex-direction:column;align-items:center}
.equip-inv-label{font-size:.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;text-align:center}
.equip-inv-panel{position:relative;width:180px;aspect-ratio:152/186;animation:invGlow 3s ease-in-out infinite alternate}
@keyframes invGlow{0%{box-shadow:0 0 8px rgba(201,169,110,.05)}100%{box-shadow:0 0 20px rgba(201,169,110,.15),0 0 40px rgba(201,169,110,.05)}}
.equip-inv-bg{width:100%;height:100%;display:block;border-radius:var(--radius);image-rendering:pixelated}
.equip-inv-slot{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:1px;background:transparent;border:none;box-shadow:none}
.equip-inv-slot img{image-rendering:pixelated;object-fit:contain;filter:brightness(.85);transition:filter .2s}
/* 1-slot icons (32x32) */
.equip-inv-slot[data-slot="1xitem"] img,
.equip-inv-slot[data-slot="helmet"] img,
.equip-inv-slot[data-slot="bracelet"] img,
.equip-inv-slot[data-slot="earrings"] img,
.equip-inv-slot[data-slot="shoes"] img,
.equip-inv-slot[data-slot="mount"] img,
.equip-inv-slot[data-slot="necklace"] img{width:85%;height:85%}
/* 2-slot icons (32x64) */
.equip-inv-slot[data-slot="weapon"] img,
.equip-inv-slot[data-slot="armor"] img{width:85%;height:90%}
.equip-inv-slot[data-slot="shield"] img{width:85%;height:85%}
.equip-inv-slot:hover img{filter:brightness(1.3)}
.equip-inv-slot:hover{background:rgba(201,169,110,.12)}
.equip-inv-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(10,8,6,.96);border:1px solid #8b7355;border-radius:3px;padding:8px 12px;font-size:.7rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all .12s;pointer-events:none;z-index:10;min-width:130px}
.equip-inv-slot:hover .equip-inv-tooltip{opacity:1;visibility:visible}
.tt-rarity{font-size:.65rem;color:#9e9e9e;margin-bottom:4px}
.tt-name{color:#c9a96e;font-weight:600;font-size:.75rem;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid rgba(139,115,85,.3)}
.tt-stats{color:#9ed666;line-height:1.7;font-size:.68rem}

.promoter-box{display:flex;align-items:center;gap:10px;margin-top:20px;padding:14px 16px;background:rgba(107,93,82,.06);border:1px solid var(--border);border-radius:6px;flex-wrap:wrap}
.promoter-label{font-size:.78rem;font-weight:600;color:var(--text-secondary)}
.promoter-input{padding:6px 12px;background:rgba(26,20,18,.8);border:1px solid var(--border);border-radius:4px;color:var(--gold);font-family:var(--font-body);font-size:.82rem;font-weight:600;width:120px;text-align:center}
.promoter-hint{font-size:.68rem;color:var(--text-dim)}

/* ========== TO BE ADDED NOTICE ========== */
.tba-notice{text-align:center;margin-top:16px;padding:14px 20px;background:rgba(200,60,60,.06);border:1px solid rgba(200,60,60,.35);border-radius:6px;color:rgba(220,80,80,.9);font-size:.84rem;font-weight:600;letter-spacing:.3px}

/* Trophy Podium */
/* ========== TROPHY REWARDS ========== */
.trophy-reward {
	margin-top: 14px;
	padding: 6px 14px;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-radius: 4px;
	white-space: nowrap;
	font-family: var(--font-display);
}

/* Birincilik Ödülü Stili */
.trophy-gold .trophy-reward {
	color: #ffd700;
	background: rgba(255, 215, 0, 0.1);
	border: 1px solid rgba(255, 215, 0, 0.3);
	box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.05);
	text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* İkincilik Ödülü Stili */
.trophy-silver .trophy-reward {
	color: #c0c0c0;
	background: rgba(192, 192, 192, 0.1);
	border: 1px solid rgba(192, 192, 192, 0.25);
	box-shadow: inset 0 0 10px rgba(192, 192, 192, 0.05);
}

/* Üçüncülük Ödülü Stili */
.trophy-bronze .trophy-reward {
	color: #cd7f32;
	background: rgba(205, 127, 50, 0.1);
	border: 1px solid rgba(205, 127, 50, 0.25);
	box-shadow: inset 0 0 10px rgba(205, 127, 50, 0.05);
}

/* Kutu hizalamasını düzeltme (isim ile ödülün çok yapışmaması için) */
.trophy-place {
	margin-bottom: 4px;
}

.trophy-section{text-align:center;margin-top:28px}
.trophy-label{font-family:var(--font-display);font-size:.75rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px}
.trophy-podium{display:flex;justify-content:center;align-items:flex-end;gap:12px}
.trophy-card{display:flex;flex-direction:column;align-items:center;padding:16px 20px 14px;background:linear-gradient(165deg,rgba(42,34,29,.9),rgba(30,24,20,.95));border:1px solid var(--border);border-radius:8px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.trophy-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:8px 8px 0 0}
.trophy-card:hover{transform:translateY(-3px)}
.trophy-glyph{font-size:1.3rem;font-weight:700;margin-bottom:6px;line-height:1}
.trophy-place{font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:1px}
.trophy-gold{min-width:100px;padding:20px 24px 16px;margin-bottom:8px}
.trophy-gold::before{background:linear-gradient(90deg,transparent,#ffd700,transparent)}
.trophy-gold{border-color:rgba(255,215,0,.25)}.trophy-gold:hover{border-color:rgba(255,215,0,.5);box-shadow:0 6px 20px rgba(255,215,0,.1)}
.trophy-gold .trophy-glyph{color:#ffd700;text-shadow:0 0 12px rgba(255,215,0,.4)}
.trophy-gold .trophy-place{color:#ffd700}
.trophy-silver{min-width:85px}
.trophy-silver::before{background:linear-gradient(90deg,transparent,#c0c0c0,transparent)}
.trophy-silver{border-color:rgba(192,192,192,.2)}.trophy-silver:hover{border-color:rgba(192,192,192,.4);box-shadow:0 6px 20px rgba(192,192,192,.08)}
.trophy-silver .trophy-glyph{color:#c0c0c0;text-shadow:0 0 8px rgba(192,192,192,.3)}
.trophy-silver .trophy-place{color:#c0c0c0}
.trophy-bronze{min-width:85px}
.trophy-bronze::before{background:linear-gradient(90deg,transparent,#cd7f32,transparent)}
.trophy-bronze{border-color:rgba(205,127,50,.2)}.trophy-bronze:hover{border-color:rgba(205,127,50,.4);box-shadow:0 6px 20px rgba(205,127,50,.08)}
.trophy-bronze .trophy-glyph{color:#cd7f32;text-shadow:0 0 8px rgba(205,127,50,.3)}
.trophy-bronze .trophy-place{color:#cd7f32}
.trophy-notice{font-size:.72rem;color:var(--text-muted);margin-top:14px;font-style:italic;line-height:1.5}
@media(max-width:480px){.trophy-podium{gap:8px}.trophy-card{min-width:0;flex:1;padding:12px 8px}.trophy-gold{padding:14px 10px}}

/* ========== VIP CARD ========== */
.vip-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.vip-card{background:linear-gradient(160deg,rgba(36,27,24,.95) 0%,rgba(42,34,29,.9) 50%,rgba(36,27,24,.95) 100%);border:1px solid rgba(201,169,110,.25);border-radius:var(--radius);padding:32px 36px;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(201,169,110,.1)}
.vip-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.vip-card::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at top center,rgba(201,169,110,.06) 0%,transparent 60%);pointer-events:none}
.vip-img img{width:100%;border-radius:var(--radius);mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.vip-badge{display:inline-block;font-family:var(--font-display);font-size:1.05rem;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;padding:10px 28px;border:1px solid rgba(201,169,110,.35);border-radius:4px;background:linear-gradient(135deg,rgba(201,169,110,.1) 0%,rgba(201,169,110,.04) 100%);position:relative;z-index:1;text-shadow:0 0 12px rgba(201,169,110,.3)}
.vip-perks{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.vip-perks li{font-size:.84rem;color:var(--text-secondary);padding:10px 16px;background:rgba(201,169,110,.04);border-left:2px solid rgba(201,169,110,.25);border-radius:0 6px 6px 0;text-align:left;transition:all .25s}
.vip-perks li:hover{border-left-color:var(--gold);background:rgba(201,169,110,.08);padding-left:20px}
.vip-perks li::before{content:'✦';margin-right:10px;color:var(--gold);font-size:.7rem;opacity:.6}
.vip-duration{font-size:.78rem;color:var(--text-muted);font-style:italic;padding-top:12px;border-top:1px solid rgba(201,169,110,.15);position:relative;z-index:1}

/* ========== TABS ========== */
.tab-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;padding:4px;background:rgba(20,16,13,.6);border:1px solid var(--border);border-radius:8px;justify-content:center}
.tab{padding:9px 20px;border:none;background:transparent;color:var(--text-muted);font-family:var(--font-body);font-size:.78rem;cursor:pointer;border-radius:6px;transition:all .25s;letter-spacing:.3px;font-weight:500}
.tab:hover{color:var(--text);background:rgba(201,169,110,.06)}
.tab.active{color:#1a1410;background:linear-gradient(135deg,#c9a96e 0%,#a67c3d 50%,#c9a96e 100%);font-weight:700;box-shadow:0 0 12px rgba(201,169,110,.3)}
.tab-content{padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}

/* Evo Panels Grid */
.evo-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.evo-panel{padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.evo-panel-title{font-family:var(--font-display);font-size:1rem;color:var(--gold);margin-bottom:14px;letter-spacing:.5px}

/* Evo Tables */
.evo-table{width:100%;border-collapse:collapse;font-size:.82rem}
.evo-table th{padding:8px 12px;text-align:left;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px}
.evo-table td{padding:7px 12px;border-bottom:1px solid rgba(107,93,82,.12)}
.evo-table tr:last-child td{border-bottom:none}
.evo-table tbody tr{opacity:0;transform:translateX(-12px);animation:evoRowIn .5s ease forwards}
.evo-table tbody tr:nth-child(1){animation-delay:.1s}
.evo-table tbody tr:nth-child(2){animation-delay:.2s}
.evo-table tbody tr:nth-child(3){animation-delay:.3s}
.evo-table tbody tr:nth-child(4){animation-delay:.4s}
.evo-table tbody tr:nth-child(5){animation-delay:.5s}
.evo-table tbody tr:nth-child(6){animation-delay:.6s}
@keyframes evoRowIn{to{opacity:1;transform:translateX(0)}}
.evo-table td:not(:first-child){text-align:center;color:var(--text-secondary)}

/* Tier Colors */
.tier-common{color:#9e9e9e;font-weight:600}
.tier-rare{color:#4fc3f7;font-weight:600}
.tier-epic{color:#ba68c8;font-weight:600}
.tier-legendary{color:var(--gold);font-weight:600}
.tier-mythic{color:#ef5350;font-weight:600}
.tier-divine{color:#26c6da;font-weight:600}

/* Accessories Evolution Chain */
.evo-acc-info{font-size:.82rem;color:var(--text-secondary);margin-bottom:6px}
.evo-acc-classic{font-size:.78rem;color:var(--text-muted);margin-bottom:14px}
.evo-acc-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.evo-acc-step{padding:6px 14px;border-radius:6px;background:rgba(107,93,82,.1);border:1px solid var(--border);font-size:.78rem;animation:evoStepPulse 6s ease-in-out infinite;transition:box-shadow .3s}
.evo-acc-step:nth-child(1){animation-delay:0s}
.evo-acc-step:nth-child(3){animation-delay:1s}
.evo-acc-step:nth-child(5){animation-delay:2s}
.evo-acc-step:nth-child(7){animation-delay:3s}
.evo-acc-step:nth-child(9){animation-delay:4s}
.evo-acc-step:nth-child(11){animation-delay:5s}
@keyframes evoStepPulse{0%,100%{box-shadow:none}15%{box-shadow:0 0 12px rgba(201,169,110,.3)}30%{box-shadow:none}}
.evo-acc-icons{display:flex;gap:16px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;align-items:flex-end}
.evo-acc-icon-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;color:var(--text-muted);transition:transform .3s}
.evo-acc-icon-item:hover{transform:translateY(-4px)}
.evo-acc-arrow{font-size:1rem;color:var(--primary-400);animation:evoArrowPulse 2s ease-in-out infinite alternate}
@keyframes evoArrowPulse{0%{opacity:.4;transform:translateX(0)}100%{opacity:1;transform:translateX(3px)}}

/* Evo Icon Wrap (frame + item overlay) */
.evo-icon-wrap{position:relative;width:40px;height:40px;flex-shrink:0}
.evo-icon-wrap--tall{width:40px;height:72px}
.evo-icon-wrap--sm{width:30px;height:30px;margin:0 auto 4px}
.evo-icon-frame{width:100%;height:100%;display:block}
.evo-icon-item{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:70%;object-fit:contain}
.evo-icon-wrap{overflow:hidden}
.evo-icon-wrap::after{content:'';position:absolute;top:-50%;left:-50%;width:30%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(25deg);animation:evoShimmer 4s ease-in-out infinite}
@keyframes evoShimmer{0%,100%{left:-50%}50%{left:120%}}
.evo-icon-wrap--tall .evo-icon-item{width:80%;height:85%}
.evo-icon-cell{width:48px;text-align:center;padding:4px 6px !important}
.evo-icon-cell--tall{width:48px;padding:2px 6px !important}

/* Full-width panel */
.evo-panel--full{grid-column:1/-1;max-width:820px;margin:0 auto}

/* Combined PvP + Accessories */
.evo-combined{display:flex;flex-direction:column;gap:0}
.evo-combined-section{}
.evo-combined-divider{height:1px;background:var(--border);margin:16px 0}



/* ========== ZIGZAG LAYOUT ========== */
.zigzag{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.zigzag-reverse{direction:rtl}
.zigzag-reverse>*{direction:ltr}
.zigzag-img img{width:80%;height:auto;margin:0 auto;display:block}
.zigzag-img-fade{position:relative}
.zigzag-img-fade img{width:100%;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.zigzag-title{font-family:var(--font-display);font-size:1.3rem;margin-bottom:12px;letter-spacing:1px}
.zigzag-desc{font-size:.84rem;color:var(--text-muted);line-height:1.8;margin-bottom:16px}
.zigzag-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.zigzag-list li{font-size:.8rem;color:var(--text-secondary);padding-left:16px;position:relative}
.zigzag-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
/* Goal Stages (Odegon-style rows) */
.goal-stages {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 520px;
	margin-top: 12px;
}

.goal-stage {
	display: grid;
	grid-template-columns: 34px 50px minmax(0, 1fr);
	grid-template-areas:
		"icon level reward"
		"icon details details";
	align-items: center;
	column-gap: 10px;
	row-gap: 5px;

	min-height: 52px;
	padding: 7px 11px;

	background:
		linear-gradient(
			90deg,
			rgba(201, 169, 110, 0.035),
			transparent 45%
		),
		rgba(15, 13, 11, 0.65);

	border: 1px solid rgba(201, 169, 110, 0.1);
	border-radius: 7px;

	transition:
		border-color 0.25s ease,
		background-color 0.25s ease,
		transform 0.25s ease;
}

.goal-stage:hover {
	border-color: rgba(201, 169, 110, 0.3);
	background-color: rgba(22, 19, 16, 0.8);
	transform: translateX(2px);
}

.goal-icon-slot {
	grid-area: icon;

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

	width: 32px;
	height: 32px;

	background: rgba(42, 34, 29, 0.9);
	border: 1px solid rgba(201, 169, 110, 0.2);
	border-radius: 4px;

	box-shadow:
		inset 0 0 8px rgba(0, 0, 0, 0.25),
		0 2px 6px rgba(0, 0, 0, 0.18);
}

.goal-icon-slot img {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
	image-rendering: pixelated;
}

.goal-lvl {
	grid-area: level;

	font-family: var(--font-display);
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1;

	color: var(--gold, #c9a96e);
	white-space: nowrap;
}

.goal-reward {
	grid-area: reward;
	justify-self: end;

	max-width: 100%;

	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: right;

	color: #8bc78b;
}

.goal-details {
	grid-area: details;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 5px 12px;

	min-width: 0;
	padding-top: 5px;

	border-top: 1px solid rgba(201, 169, 110, 0.08);
}

.goal-details span {
	display: inline-flex;
	align-items: center;
	gap: 4px;

	font-size: 0.62rem;
	font-weight: 400;
	line-height: 1.2;

	color: var(--text-secondary, #968f87);
	white-space: nowrap;
}

.goal-details strong {
	font-weight: 600;
	color: #c9a96e;
}

.goal-count::before,
.goal-cooldown::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 13px;
	height: 13px;

	font-size: 0.55rem;
	color: rgba(201, 169, 110, 0.85);
}

.goal-count::before {
	content: "◆";
}

.goal-cooldown::before {
	content: "◷";
	font-size: 0.72rem;
}

@media (max-width: 520px) {
	.goal-stages {
		max-width: 100%;
	}

	.goal-stage {
		grid-template-columns: 32px 46px minmax(0, 1fr);
		column-gap: 7px;
		padding: 7px 8px;
	}

	.goal-reward {
		font-size: 0.65rem;
	}

	.goal-details {
		justify-content: flex-start;
		gap: 5px 9px;
	}

	.goal-details span {
		font-size: 0.59rem;
	}
}
@media(max-width:768px){
  .zigzag{grid-template-columns:1fr;gap:20px}
  .zigzag-reverse{direction:ltr}
}

/* ========== DEW / ROUA SYSTEM ========== */
.dew-hero{text-align:center;margin:8px 0 24px}
.dew-hero img{display:inline-block;max-width:500px;width:70%;height:auto;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.dew-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dew-shop-row{display:flex;justify-content:center;margin-top:20px}
.dew-shop-row .dew-group{max-width:700px;width:100%}
.dew-list-horizontal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dew-group{border-radius:var(--radius);padding:22px 16px}
.dew-group-styled{border:1px solid rgba(201,169,110,.2);background:linear-gradient(160deg,rgba(36,27,24,.95) 0%,rgba(42,34,29,.9) 50%,rgba(36,27,24,.95) 100%);position:relative;overflow:hidden}
.dew-group-styled::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.dew-group-title{font-family:var(--font-display);font-size:.92rem;margin-bottom:4px;letter-spacing:.5px}
.dew-group-sub{font-size:.72rem;color:var(--text-muted);margin-bottom:14px}
.dew-list{display:flex;flex-direction:column;gap:5px}
.dew-item{display:flex;align-items:center;gap:10px;padding:7px 10px;background:rgba(15,13,11,.4);border:1px solid rgba(201,169,110,.06);border-radius:6px;transition:border-color .2s}
.dew-item:hover{border-color:rgba(201,169,110,.2)}
.dew-icon{width:28px;height:28px;flex-shrink:0;image-rendering:pixelated}
.dew-info{display:flex;flex-direction:column;gap:1px}
.dew-name{font-size:.75rem;color:var(--text-primary);font-weight:600}
.dew-stat{font-size:.7rem;color:#8bc78b;font-weight:500}
.dew-herb{color:var(--gold);font-weight:600}
@media(max-width:900px){
  .dew-two-col{grid-template-columns:1fr}
  .dew-list-horizontal{grid-template-columns:1fr}
}

/* ========== FEATURE GRID ========== */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.feature-card{padding:20px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.feature-icon{font-size:1.6rem;margin-bottom:8px}
.feature-card h4{font-size:.85rem;margin-bottom:4px}
.feature-card p{font-size:.75rem;color:var(--text-dim);line-height:1.5}

/* ========== TWO COLUMN ========== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-card{padding:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .3s,transform .3s}
.info-card:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.info-card .info-card-render{width:100%;height:280px;object-fit:cover;object-position:center top;display:block;mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);transition:transform .4s}
.info-card:hover .info-card-render{transform:scale(1.03)}
.info-card-body{padding:0 24px 24px;text-align:center}
.info-card h4{font-family:var(--font-display);font-size:1.1rem;margin-bottom:8px;color:var(--gold);letter-spacing:.5px}
.info-card h4::after{content:'';display:block;width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:8px auto 0;border-radius:2px}
.info-card p{font-size:.82rem;color:var(--text-muted);line-height:1.7;margin-bottom:4px}
/* ========== SET BONUS BOX ========== */
.set-bonus-box{margin-top:16px;background:rgba(0,0,0,.5);border:1px solid rgba(86,227,86,.15);border-radius:6px;padding:12px 14px}
.set-bonus-header{font-size:.78rem;color:#56e356;font-weight:700;margin-bottom:8px}
.set-bonus-box .bonus-table{margin-top:0}
.set-bonus-box .bonus-table th{border-bottom-color:rgba(86,227,86,.15)}
.buffi-info{margin-top:14px;background:rgba(0,0,0,.4);border:1px solid rgba(201,169,110,.15);border-radius:6px;padding:12px 14px}
.buffi-info-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.82rem;font-weight:700;color:var(--gold)}
.buffi-glyph{font-size:1.1rem;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(201,169,110,.08);border:1px solid rgba(201,169,110,.2);border-radius:6px;color:var(--gold)}
.buffi-details{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.buffi-details li{font-size:.75rem;color:var(--text-secondary);line-height:1.5;padding-left:14px;position:relative}
.buffi-details li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.5}

/* ========== VOTE BUFF CARDS ========== */
.vote-buffs{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.vote-buff-card{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(0,0,0,.4);border:1px solid rgba(201,169,110,.12);border-radius:6px;transition:border-color .3s}
.vote-buff-card:hover{border-color:rgba(201,169,110,.35)}
.vote-buff-card:hover .vote-btn-off{opacity:0}
.vote-buff-card:hover .vote-btn-on{opacity:1}
.vote-buff-icon{width:52px;height:48px;flex-shrink:0;position:relative}
.vote-buff-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.vote-btn-off{opacity:1}
.vote-btn-on{opacity:0}
.vote-buff-info{flex:1}
.vote-buff-name{font-size:.82rem;color:var(--gold);font-weight:600;margin-bottom:4px}
.vote-buff-stats{display:flex;flex-direction:column;gap:1px}
.vote-buff-stats .bio-bonus{font-size:.7rem;line-height:1.5}
.vote-buff-dur{font-size:.6rem;color:var(--text-dim);margin-top:4px;background:rgba(255,255,255,.06);display:inline-block;padding:1px 8px;border-radius:3px}

.buff-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.buff-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(107,93,82,.06);border:1px solid rgba(107,93,82,.12);border-radius:6px;font-size:.78rem;color:var(--text-secondary);transition:border-color .2s}
.buff-item:hover{border-color:rgba(201,169,110,.25)}
.buff-icon{width:24px;height:24px;border-radius:5px;flex-shrink:0}
.buff-atk{background:linear-gradient(135deg,#c0392b,#e74c3c);box-shadow:0 0 8px rgba(231,76,60,.25)}
.buff-def{background:linear-gradient(135deg,#2980b9,#3498db);box-shadow:0 0 8px rgba(52,152,219,.25)}
.buff-exp{background:linear-gradient(135deg,#8e44ad,#9b59b6);box-shadow:0 0 8px rgba(155,89,182,.25)}
.buff-gold{background:linear-gradient(135deg,#a67c3d,#c9a96e);box-shadow:0 0 8px rgba(201,169,110,.25)}
.buff-text{flex:1;display:flex;align-items:center;justify-content:space-between}
.buff-dur{font-size:.68rem;color:var(--text-dim);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:3px}

/* ========== AUTO SYSTEMS SLIDER ========== */
.auto-slider{overflow:hidden;position:relative}
.auto-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transform:scale(.97);transition:opacity .6s ease,transform .6s ease;pointer-events:none;display:flex;justify-content:center}
.auto-slide.active{position:relative;opacity:1;transform:scale(1);pointer-events:auto}
.auto-slide-block{display:inline-flex;flex-direction:column;align-items:center;max-width:50%}
.auto-slide-block img,.auto-slide-block video{width:100%;height:auto;display:block;border-radius:var(--radius);mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.auto-slide-video{object-fit:cover;max-height:400px}
.auto-slide-text{backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-top:12px;position:relative;z-index:2;text-align:center;max-width:320px}
.auto-slide-text h3{font-family:var(--font-display);font-size:1.1rem;margin-bottom:6px;letter-spacing:1px}
.auto-slide-text p{font-size:.8rem;color:var(--text-muted);line-height:1.6}
/* Per-slide accent colors */
.auto-hunt .auto-slide-text{background:rgba(42,34,29,.95);border-color:rgba(201,169,110,.2)}
.auto-hunt .auto-slide-text h3{color:#c9a96e}
.auto-fish .auto-slide-text{background:rgba(29,36,42,.95);border-color:rgba(110,165,201,.2)}
.auto-fish .auto-slide-text h3{color:#6ea5c9}
.auto-mine .auto-slide-text{background:rgba(32,38,29,.95);border-color:rgba(143,191,122,.2)}
.auto-mine .auto-slide-text h3{color:#8fbf7a}
.auto-slider-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.auto-arrow{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:rgba(42,34,29,.8);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0}
.auto-arrow:hover{border-color:var(--gold);color:var(--gold)}
.auto-slider-dots{display:flex;gap:10px;align-items:center}
.auto-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--primary-400);background:transparent;cursor:pointer;padding:0;transition:all .25s}
.auto-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(201,169,110,.4)}
.auto-dot:hover{border-color:var(--gold)}
.auto-details{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.auto-detail-item{padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;transition:border-color .2s,transform .2s}
.auto-detail-item:hover{border-color:rgba(201,169,110,.25);transform:translateY(-2px)}
.auto-detail-icon-slot{width:40px;height:40px;margin:0 auto 8px;background:rgba(42,34,29,.9);border:1px solid rgba(201,169,110,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(201,169,110,.1)}
.auto-kanji{font-size:1.4rem;color:var(--primary-400);line-height:1;font-weight:700}
.auto-detail-item h4{font-size:.85rem;margin-bottom:6px;color:var(--gold)}
.auto-detail-item p{font-size:.78rem;color:var(--text-muted);line-height:1.6}
@media(max-width:768px){
  .auto-slide{justify-content:center}
  .auto-slide-block{max-width:85%}
  .auto-details{grid-template-columns:1fr}
}

/* ========== FARM CARDS ========== */
.farm-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.farm-card-block{display:flex;flex-direction:column;align-items:center}
.farm-card-block img{width:100%;height:auto;display:block;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.farm-card-text{background:rgba(42,34,29,.95);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-top:-36px;position:relative;z-index:2;text-align:center;max-width:280px}
.farm-card-text h4{font-size:.9rem;margin-bottom:4px;color:var(--gold)}
.farm-card-text p{font-size:.78rem;color:var(--text-muted);line-height:1.6}

/* ========== BATTLE PASS ========== */
.bp-hero{text-align:center;margin-bottom:24px}
.bp-hero img,.bp-hero video{width:60%;height:auto;display:inline-block;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.hero-video{border-radius:var(--radius);width:60%}

/* Extended Inventory Animation */
.ext-inv{margin-top:20px;position:relative;padding:60px 0}
.ext-inv-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.ext-inv-bg img{width:100%;height:100%;object-fit:cover;display:block;mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 85%,transparent 100%),linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 85%,transparent 100%),linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.ext-inv-row{position:relative;z-index:1}
.ext-inv-row{display:flex;justify-content:center;align-items:center;gap:6px}
.ext-inv-panel{position:relative;transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.ext-inv-panel img{height:400px;width:auto;display:block;border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.ext-inv-tab{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--gold);font-weight:600;letter-spacing:1px;opacity:0;transition:opacity .4s .6s}
.ext-inv-center img{height:420px;box-shadow:0 0 25px rgba(201,169,110,.2)}
.ext-inv-left-1,.ext-inv-right-1{opacity:0;transform:translateX(0) scale(.9)}
.ext-inv-left-2,.ext-inv-right-2{opacity:0;transform:translateX(0) scale(.8)}
.ext-inv-left-1{transform:translateX(60px) scale(.9)}
.ext-inv-left-2{transform:translateX(120px) scale(.8)}
.ext-inv-right-1{transform:translateX(-60px) scale(.9)}
.ext-inv-right-2{transform:translateX(-120px) scale(.8)}
.ext-inv.visible .ext-inv-left-1{opacity:1;transform:translateX(0) scale(.95)}
.ext-inv.visible .ext-inv-left-2{opacity:1;transform:translateX(0) scale(.88);transition-delay:.15s}
.ext-inv.visible .ext-inv-right-1{opacity:1;transform:translateX(0) scale(.95)}
.ext-inv.visible .ext-inv-right-2{opacity:1;transform:translateX(0) scale(.88);transition-delay:.15s}
.ext-inv.visible .ext-inv-tab{opacity:1}
.ext-inv-center{z-index:2}
.ext-inv-left-1,.ext-inv-right-1{z-index:1}
.ext-inv-left-2,.ext-inv-right-2{z-index:0}
@media(max-width:768px){.ext-inv-panel img{height:200px}.ext-inv-center img{height:220px}.ext-inv-left-2,.ext-inv-right-2{display:none}}
@media(max-width:480px){.ext-inv-panel img{height:150px}.ext-inv-center img{height:170px}}

/* Special Inventory */
.inv-special{margin-top:32px;text-align:center}
.inv-special-title{font-family:var(--font-display);font-size:1.1rem;color:var(--gold);margin-bottom:8px;letter-spacing:1px}
.inv-special-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:20px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}
.inv-special-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.inv-special-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);min-width:100px;transition:border-color .2s,transform .2s}
.inv-special-item:hover{border-color:rgba(201,169,110,.4);transform:translateY(-3px)}
.inv-special-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(201,169,110,.08);border-radius:50%;color:var(--gold)}
.inv-glyph{font-size:1.4rem;font-weight:700;line-height:1}
.inv-special-item span{font-size:.78rem;color:var(--text-secondary);font-weight:500}

.bp-tracks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.bp-track {
	min-width: 0;
	padding: 24px;

	background:
		linear-gradient(
			165deg,
			rgba(42, 34, 29, 0.9),
			rgba(30, 24, 20, 0.95)
		);

	border: 1px solid var(--border);
	border-radius: 10px;

	transition:
		border-color 0.3s,
		transform 0.3s,
		box-shadow 0.3s;
}

.bp-track:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.bp-track-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.bp-track-glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 48px;
	height: 48px;

	border-radius: 10px;

	font-size: 1.5rem;
	font-weight: 700;
}

.bp-track h4 {
	margin: 0;

	font-family: var(--font-display);
	font-size: 0.95rem;
	letter-spacing: 0.5px;
}

.bp-track-desc {
	margin: 0;

	font-size: 0.82rem;
	line-height: 1.7;

	color: var(--text-secondary);
}

/* Ücretsiz */

.bp-free {
	border-color: rgba(114, 213, 114, 0.15);
}

.bp-free:hover {
	border-color: rgba(114, 213, 114, 0.4);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.3),
		0 0 20px rgba(114, 213, 114, 0.06);
}

.bp-free h4 {
	color: #72d572;
}

.bp-glyph-free {
	color: #72d572;

	background: rgba(114, 213, 114, 0.08);
	border: 1px solid rgba(114, 213, 114, 0.25);

	text-shadow: 0 0 10px rgba(114, 213, 114, 0.3);
}

/* Premium */

.bp-premium {
	border-color: rgba(255, 215, 0, 0.17);
}

.bp-premium:hover {
	border-color: rgba(255, 215, 0, 0.42);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.3),
		0 0 20px rgba(255, 215, 0, 0.06);
}

.bp-premium h4 {
	color: #ffd700;
}

.bp-glyph-premium {
	color: #ffd700;

	background: rgba(255, 215, 0, 0.08);
	border: 1px solid rgba(255, 215, 0, 0.25);

	text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Etkinlik */
.bp-event{
	background:
		linear-gradient(
			165deg,
			rgba(167,113,255,.035),
			rgba(167,113,255,.01)
		),
		linear-gradient(
			165deg,
			rgba(42,34,29,.9),
			rgba(30,24,20,.95)
		);

	border-color:rgba(167,113,255,.18);
}

.bp-event:hover{
	border-color:rgba(167,113,255,.38);
	box-shadow:
		0 8px 24px rgba(0,0,0,.3),
		0 0 16px rgba(167,113,255,.04);
}

.bp-event h4{
	color:#b98aff;
}

.bp-glyph-event{
	background:rgba(167,113,255,.08);
	border:1px solid rgba(167,113,255,.24);
	color:#b98aff;
	text-shadow:0 0 10px rgba(167,113,255,.25);
}

/* Responsive */

@media (max-width: 900px) {
	.bp-tracks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bp-event {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.bp-tracks {
		grid-template-columns: 1fr;
	}

	.bp-event {
		grid-column: auto;
	}

	.bp-track {
		padding: 20px;
	}
}
.bp-levels{display:flex;flex-direction:column;gap:6px}
.bp-level{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(107,93,82,.06);border:1px solid rgba(107,93,82,.1);border-radius:6px;font-size:.78rem;color:var(--text-secondary);transition:border-color .2s}
.bp-level:hover{border-color:rgba(201,169,110,.2)}
.bp-lv{font-size:.68rem;font-weight:700;color:var(--gold);min-width:32px}
.bp-reward-slot{width:32px;height:32px;background:rgba(42,34,29,.9);border:1px solid rgba(201,169,110,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bp-reward-name{flex:1;color:var(--text-secondary)}

/* ========== RANKINGS ========== */
.rank-categories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.rank-cat{display:flex;align-items:center;gap:14px;padding:18px 20px;background:linear-gradient(165deg,rgba(42,34,29,.9),rgba(30,24,20,.95));border:1px solid var(--border);border-radius:8px;font-size:.85rem;font-weight:600;transition:border-color .3s,transform .3s,box-shadow .3s}
.rank-cat:hover{border-color:rgba(201,169,110,.35);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.rank-cat span{color:var(--gold)}
.rank-cat-desc{font-size:.72rem;color:var(--text-muted);font-weight:400;margin-top:4px;line-height:1.4}
.rank-icon{width:36px;height:36px;image-rendering:auto;filter:drop-shadow(0 0 6px rgba(201,169,110,.35));flex-shrink:0}

/* ========== PVP SLIDER ========== */
.pvp-slider{overflow:hidden;position:relative;padding:10px 0}
.pvp-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transform:scale(.97);transition:opacity .6s ease,transform .6s ease;pointer-events:none;display:flex;justify-content:center}
.pvp-slide.active{position:relative;opacity:1;transform:scale(1);pointer-events:auto}
.pvp-slide-block{display:inline-flex;flex-direction:column;align-items:center;max-width:50%}
.pvp-slide-block img{width:100%;height:auto;display:block;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.pvp-slide-text{background:linear-gradient(165deg,rgba(42,34,29,.95),rgba(30,24,20,.98));backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;padding:18px 28px;margin-top:-36px;position:relative;z-index:2;text-align:center;max-width:360px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.pvp-slide-text h4{font-size:1rem;margin-bottom:6px;color:var(--gold);font-family:var(--font-display);letter-spacing:.5px}
.pvp-slide-text p{font-size:.78rem;color:var(--text-muted);line-height:1.6}
/* Per-event accent */
.pvp-dojang .pvp-slide-text{border-color:rgba(201,169,110,.25);border-top:2px solid rgba(201,169,110,.4)}
.pvp-guildwar .pvp-slide-text{border-color:rgba(110,165,201,.2);background:linear-gradient(165deg,rgba(29,36,42,.95),rgba(22,28,34,.98));border-top:2px solid rgba(110,165,201,.4)}
.pvp-guildwar .pvp-slide-text h4{color:#6ea5c9}
.pvp-kingdom .pvp-slide-text{border-color:rgba(191,122,122,.2);background:linear-gradient(165deg,rgba(42,29,29,.95),rgba(34,22,22,.98));border-top:2px solid rgba(191,122,122,.4)}
.pvp-kingdom .pvp-slide-text h4{color:#bf7a7a}
.pvp-slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.pvp-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:linear-gradient(165deg,rgba(42,34,29,.9),rgba(30,24,20,.95));color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;padding:0}
.pvp-arrow:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px rgba(201,169,110,.2)}
.pvp-slider-dots{display:flex;gap:12px;align-items:center}
.pvp-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--primary-400);background:transparent;cursor:pointer;padding:0;transition:all .3s}
.pvp-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(201,169,110,.5)}
.pvp-dot:hover{border-color:var(--gold)}
@media(max-width:768px){
  .pvp-slide-block{max-width:85%}
}

/* ========== DUNGEON SLIDER ========== */
.dungeon-section::before{background-image:url('../sistem_img/dungeon_akzadur.webp')!important;opacity:.08!important}
.dungeon-slider{overflow:hidden;position:relative}
.dungeon-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transform:scale(.97);transition:opacity .6s ease,transform .6s ease;pointer-events:none;display:flex;justify-content:center}
.dungeon-slide.active{position:relative;opacity:1;transform:scale(1);pointer-events:auto}
.dungeon-slide-block{display:inline-flex;flex-direction:column;align-items:center;max-width:80%}
.dungeon-slide-block img{width:100%;height:380px;object-fit:cover;display:block;border-radius:var(--radius);mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent),linear-gradient(to bottom,transparent,black 10%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent),linear-gradient(to bottom,transparent,black 10%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.dungeon-slide-text{background:linear-gradient(180deg,rgba(42,34,29,.98),rgba(30,24,20,.95));backdrop-filter:blur(10px);border:1px solid var(--border);border-top:2px solid var(--gold);border-radius:0 0 var(--radius) var(--radius);padding:16px 24px;margin-top:-8px;position:relative;z-index:2;text-align:center;width:100%}
.dungeon-slide-text h4{font-family:'Trade Winds',cursive;font-size:1rem;margin-bottom:6px;color:var(--gold);letter-spacing:.5px}
.dungeon-slide-text p{font-size:.75rem;color:var(--text-muted);line-height:1.8;letter-spacing:.3px}
.dungeon-details{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin-top:4px}
.dungeon-details span{font-size:.7rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px}
.dungeon-details .dd-val,.dungeon-details .dd-lvl,.dungeon-details .dd-runs,.dungeon-details .dd-earth,.dungeon-details .dd-dark,.dungeon-details .dd-lightning,.dungeon-details .dd-wind,.dungeon-details .dd-ice,.dungeon-details .dd-fire{background:rgba(255,255,255,.05);padding:1px 7px;border-radius:3px;border:1px solid rgba(255,255,255,.1)}
.dungeon-details .dd-val{color:var(--gold)}
.dungeon-details .dd-lvl{color:#7ecf6a}
.dungeon-details .dd-runs{color:#e05555}
.dungeon-details .dd-earth{color:#8bc34a}
.dungeon-details .dd-dark{color:#b388ff}
.dungeon-details .dd-lightning{color:#ffeb3b}
.dungeon-details .dd-wind{color:#80deea}
.dungeon-details .dd-ice{color:#81d4fa}
.dungeon-details .dd-fire{color:#ff8a65}
.dungeon-slider-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.dungeon-arrow{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:rgba(42,34,29,.8);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0}
.dungeon-arrow:hover{border-color:var(--gold);color:var(--gold)}
.dungeon-slider-dots{display:flex;gap:6px;align-items:center}
.dungeon-dot{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--primary-400);background:transparent;cursor:pointer;padding:0;transition:all .25s}
.dungeon-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 6px rgba(201,169,110,.4)}
.dungeon-dot:hover{border-color:var(--gold)}
@media(max-width:768px){
  .dungeon-slide-block{max-width:90%}
  .dungeon-slide-block img{height:200px}
  .dungeon-slide-text{width:90%}
}

/* ========== SWITCHBOT MODES ========== */
.switchbot-unified{text-align:center;background:linear-gradient(165deg,rgba(42,34,29,.9),rgba(30,24,20,.95));border:1px solid var(--border);border-radius:10px;padding:28px 24px 22px;margin-top:24px}
.switchbot-icon-big{margin-bottom:10px}
.switchbot-icon-big .game-icon{width:64px;height:64px;display:inline-block;filter:drop-shadow(0 0 10px rgba(201,169,110,.3));animation:equipFloat 4s ease-in-out infinite}
.switchbot-unified-title{font-family:var(--font-display);font-size:.9rem;color:var(--gold);letter-spacing:.5px;margin-bottom:18px}
.switchbot-dual{display:flex;justify-content:center;align-items:stretch;gap:0}
.switchbot-mode{text-align:center;padding:4px 28px;flex:1;max-width:340px}
.switchbot-mode-badge{display:inline-block;padding:4px 14px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.5px;margin-bottom:8px}
.switchbot-badge-normal{background:rgba(114,213,114,.08);border:1px solid rgba(114,213,114,.25);color:#72d572}
.switchbot-badge-instant{background:rgba(201,169,110,.08);border:1px solid rgba(201,169,110,.25);color:var(--gold)}
.switchbot-mode p{font-size:.76rem;color:var(--text-muted);line-height:1.6}
.switchbot-mode-divider{width:1px;align-self:stretch;background:var(--border);flex-shrink:0}
@media(max-width:768px){
  .switchbot-dual{flex-direction:column;align-items:center}
  .switchbot-mode{padding:12px 16px}
  .switchbot-mode-divider{width:60px;height:1px}
}

/* ========== GUILD FEATURES ========== */
.guild-features{display:inline-flex;align-items:center;gap:0;background:rgba(42,34,29,.8);border:1px solid var(--border);border-radius:var(--radius);padding:16px 8px;margin:0 auto 24px;width:auto}
.content-section .guild-features{display:flex;justify-content:center}
.guild-feature{text-align:center;padding:4px 28px}
.guild-glyph{display:block;font-size:1.4rem;color:var(--gold);opacity:.45;margin-bottom:6px;line-height:1}
.guild-feature h4{font-size:.88rem;color:var(--gold);margin-bottom:4px}
.guild-feature p{font-size:.76rem;color:var(--text-muted);line-height:1.5}
.guild-feature-divider{width:1px;height:40px;background:var(--border)}

/* ========== HIGHLIGHT BOX ========== */
.highlight-box{display:flex;align-items:center;gap:16px;padding:20px 24px;background:rgba(42,34,29,.9);border:1px solid rgba(201,169,110,.2);border-radius:var(--radius)}
.highlight-icon{font-size:2rem}
.highlight-box h4{font-size:.9rem;color:var(--gold);margin-bottom:2px}
.highlight-box p{font-size:.8rem;color:var(--text-muted)}

@media(max-width:768px){
  .guild-features{flex-wrap:wrap;gap:12px;padding:12px}
  .guild-feature{padding:8px 14px;min-width:calc(50% - 12px)}
  .guild-feature-divider{display:none}
}
@media(max-width:480px){
  .guild-feature{min-width:100%}
}

/* ========== SKILL READER ITEMS ========== */
.skill-items{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.skill-item{background:rgba(42,34,29,.85);border:1px solid rgba(201,169,110,.15);border-radius:var(--radius);padding:20px;transition:border-color .3s,transform .3s}
.skill-item:hover{border-color:rgba(201,169,110,.4);transform:translateY(-2px)}
.skill-item-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.skill-item-icon{display:none}
.skill-item h4{font-size:.88rem;color:var(--gold);margin:0}
.skill-item p{font-size:.78rem;color:var(--text-muted);line-height:1.7;margin:0}
@media(max-width:768px){
  .skill-items{grid-template-columns:1fr;gap:12px}
}

/* ========== GAME ICON ========== */
.game-icon{width:32px;height:32px;image-rendering:pixelated;display:block}

/* ========== EVENT BOXES ========== */
.event-boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.event-box{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(42,34,29,.6);border:1px solid rgba(201,169,110,.12);border-radius:6px;transition:border-color .2s}
.event-box:hover{border-color:rgba(201,169,110,.3)}
.event-icon-slot{width:40px;height:40px;flex-shrink:0;background:rgba(42,34,29,.9);border:1px dashed rgba(201,169,110,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:.8rem;transition:border-color .2s}
.event-info{flex:1}
.event-label{font-size:.76rem;color:var(--gold);font-weight:600;margin-bottom:2px}
.event-desc{font-size:.66rem;color:var(--text-dim);line-height:1.4}
@media(max-width:480px){.event-boxes{grid-template-columns:1fr}}

/* ========== FARM LIMIT VISUAL ========== */
.farm-limit-visual{display:flex;align-items:center;gap:8px;margin-top:12px;justify-content:center;flex-wrap:wrap}
.farm-ball{width:14px;height:14px;border-radius:50%;transition:transform .2s}
.farm-ball-ok{background:linear-gradient(135deg,#2ecc71,#27ae60);box-shadow:0 0 8px rgba(46,204,113,.4);animation:farmPulse 2s ease-in-out infinite}
.farm-ball-blocked{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 0 8px rgba(231,76,60,.5);animation:farmPulseRed 1.5s ease-in-out infinite}
@keyframes farmPulse{0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(46,204,113,.4)}50%{transform:scale(1.15);box-shadow:0 0 14px rgba(46,204,113,.6)}}
@keyframes farmPulseRed{0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(231,76,60,.5)}50%{transform:scale(1.15);box-shadow:0 0 14px rgba(231,76,60,.8)}}
.farm-limit-label{font-size:.68rem;color:var(--text-dim);margin-left:4px}
.farm-limit-label strong{color:var(--text-secondary)}
.farm-tag{padding:4px 10px;border-radius:4px;font-size:.68rem;font-weight:600;letter-spacing:.5px}
.farm-tag-hwid{background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.3);color:#e74c3c}
.farm-tag-daily{background:rgba(243,156,18,.12);border:1px solid rgba(243,156,18,.3);color:#f39c12}

/* ========== SWITCHBOT ICON SLOTS ========== */
.switchbot-icon-slot{width:44px;height:44px;margin:0 auto 10px;background:rgba(42,34,29,.9);border:1px solid rgba(201,169,110,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(201,169,110,.1)}

/* ========== SKILL GAME ICON SLOTS ========== */
.skill-game-icon-slot{width:40px;height:40px;background:rgba(42,34,29,.9);border:1px solid rgba(201,169,110,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 10px rgba(201,169,110,.1)}

/* PVP showcase removed - using slider */

/* ========== LIFE ICON SLOTS ========== */
.life-icon-row{display:flex;gap:12px;margin-top:16px;justify-content:center}
.life-icon-slot{position:relative;width:44px;height:44px;background:rgba(42,34,29,.85);border:1px solid rgba(201,169,110,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.life-icon-slot:hover{border-color:var(--gold);background:rgba(42,34,29,1);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 8px rgba(201,169,110,.15)}
.life-icon-featured{width:64px;height:64px;background:linear-gradient(135deg,rgba(42,34,29,.95),rgba(30,24,20,.9));border:1px solid rgba(201,169,110,.3);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 12px rgba(201,169,110,.1);cursor:default}
.life-icon-featured:hover{transform:none;box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 12px rgba(201,169,110,.1)}
.life-icon-big{width:48px!important;height:48px!important;image-rendering:auto;filter:drop-shadow(0 0 6px rgba(201,169,110,.25))}
.life-bonuses{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px;text-align:left}
.life-bonuses li{font-size:.78rem;color:var(--text-secondary);padding:8px 12px;background:rgba(201,169,110,.04);border-left:2px solid rgba(201,169,110,.25);border-radius:0 6px 6px 0;line-height:1.5;transition:border-color .2s}
.life-bonuses li:hover{border-left-color:var(--gold)}
.life-bonus-highlight{color:var(--gold);font-weight:600}
.life-icon-slot:hover .equip-inv-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Life Passive Bonuses */
.life-passives{margin-top:28px}
.life-passives-title{font-family:var(--font-display);font-size:1.1rem;color:var(--gold);text-align:center;margin-bottom:18px;letter-spacing:1px}
.life-passives-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.life-passive-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s}
.life-passive-card:hover{border-color:rgba(201,169,110,.4)}
.life-passive-icon{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.life-passive-info{display:flex;flex-direction:column;gap:2px}
.life-passive-name{font-size:.85rem;color:var(--text-primary);font-weight:600;text-align:left}
.life-passive-bonus{font-size:.75rem;color:#72d572}
@media(max-width:768px){.life-passives-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.life-passives-grid{grid-template-columns:1fr}}

/* ========== GFX GRID ========== */
.gfx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gfx-card{padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.gfx-card h4{font-size:.9rem;color:var(--gold);margin-bottom:6px;text-align:center}
.gfx-card-desc{font-size:.72rem;color:var(--text-dim);text-align:center;margin-bottom:12px;line-height:1.5}
.gfx-card-wide{grid-column:1/-1}
.gfx-card-video{display:flex;flex-direction:column;background:linear-gradient(165deg,rgba(42,34,29,.9),rgba(30,24,20,.95));overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.gfx-card-video:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.gfx-video-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.gfx-video-header h4{margin-bottom:2px;text-align:left}
.gfx-video-glyph{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:1.4rem;font-weight:700;flex-shrink:0}
.gfx-glyph-option{background:rgba(110,165,201,.08);border:1px solid rgba(110,165,201,.25);color:#6ea5c9;text-shadow:0 0 10px rgba(110,165,201,.3)}
.gfx-glyph-character{background:rgba(191,122,122,.08);border:1px solid rgba(191,122,122,.25);color:#bf7a7a;text-shadow:0 0 10px rgba(191,122,122,.3)}
.gfx-ui-option{border-color:rgba(110,165,201,.15)}.gfx-ui-option:hover{border-color:rgba(110,165,201,.35)}
.gfx-ui-character{border-color:rgba(191,122,122,.15)}.gfx-ui-character:hover{border-color:rgba(191,122,122,.35)}
.gfx-video-sub{font-size:.72rem;color:var(--text-muted);line-height:1.4}
.gfx-video{width:100%;border-radius:6px;display:block;margin-top:auto;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent),linear-gradient(to bottom,transparent,black 8%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent),linear-gradient(to bottom,transparent,black 8%,black 90%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
/* Before/After Interactive Slider */
.gfx-before-after{position:relative;border-radius:6px;overflow:hidden;height:500px;cursor:ew-resize;user-select:none}
.gfx-ba-after,.gfx-ba-before{position:absolute;top:0;left:0;width:100%;height:100%}
.gfx-ba-before{clip-path:inset(0 50% 0 0);z-index:1}
.gfx-ba-img{width:100%;height:100%;object-fit:cover;display:block}

.gfx-ba-label{position:absolute;top:8px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:3px;background:rgba(0,0,0,.6);color:var(--text-muted);z-index:3}
.gfx-ba-before .gfx-ba-label{left:8px}
.gfx-ba-after .gfx-ba-label{right:8px}
.gfx-ba-placeholder{font-size:.72rem;color:var(--text-dim)}
.gfx-ba-handle{position:absolute;top:0;bottom:0;left:50%;z-index:4;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);pointer-events:none}
.gfx-ba-handle-line{flex:1;width:2px;background:var(--gold)}
.gfx-ba-handle-grip{width:28px;height:28px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:#1a1410;box-shadow:0 0 10px rgba(201,169,110,.6);flex-shrink:0}
/* Animated UI Window */
.gfx-ui-window{background:rgba(20,16,14,.9);border:1px solid rgba(201,169,110,.2);border-radius:8px;overflow:hidden}
.gfx-ui-titlebar{display:flex;align-items:center;gap:5px;padding:6px 10px;background:rgba(201,169,110,.08);border-bottom:1px solid rgba(201,169,110,.15)}
.gfx-ui-dot{width:6px;height:6px;border-radius:50%;background:rgba(201,169,110,.3)}
.gfx-ui-title{font-size:.6rem;color:var(--text-dim);margin-left:auto;text-transform:uppercase;letter-spacing:1px}
.gfx-ui-body{padding:12px}
.gfx-ui-footer{text-align:center;padding:6px;font-size:.6rem;color:var(--text-dim);border-top:1px solid rgba(201,169,110,.1)}
.gfx-ui-body-tba{padding:32px 16px;text-align:center;font-size:.75rem;color:var(--text-dim);letter-spacing:.5px}
.gfx-ui-tba{min-height:120px;display:flex;flex-direction:column}
.gfx-ui-tba .gfx-ui-body-tba{flex:1;display:flex;align-items:center;justify-content:center}
/* Stat bars */
.gfx-stat-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gfx-stat-bar:last-child{margin-bottom:0}
.gfx-stat-name{font-size:.6rem;color:var(--gold);min-width:24px;font-weight:700}
.gfx-stat-fill{height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(201,169,110,.6),var(--gold));animation:statFill 2s ease-out forwards;transform-origin:left;position:relative;flex:1}
@keyframes statFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Option rows */
.gfx-option-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:.65rem;color:var(--text-muted)}
.gfx-option-row:last-child{margin-bottom:0}
.gfx-toggle{width:28px;height:14px;border-radius:7px;background:rgba(255,255,255,.1);position:relative;transition:background .3s}
.gfx-toggle-on{background:rgba(46,204,113,.3)}
.gfx-toggle-on::after{content:'';position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#2ecc71;transition:all .3s}
.gfx-slider-bar{width:60px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;position:relative}
.gfx-slider-thumb{position:absolute;top:-3px;left:65%;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(201,169,110,.4);animation:sliderMove 3s ease-in-out infinite alternate}
@keyframes sliderMove{from{left:20%}to{left:75%}}
@media(max-width:768px){.gfx-grid{grid-template-columns:1fr}.gfx-card-wide{grid-column:auto}.gfx-before-after{height:260px}}

/* ========== SHOWCASE BOX ========== */
.showcase-box{border:1px dashed var(--border);border-radius:var(--radius);overflow:hidden}
.showcase-placeholder{padding:40px 16px;text-align:center;color:var(--text-dim);font-size:.85rem}

/* ========== FOOTER ========== */
.footer{background:var(--bg-tertiary);border-top:1px solid var(--border);padding:32px 24px 16px}
.footer-inner{max-width:1000px;margin:0 auto;text-align:center}
.footer-tagline{font-size:.78rem;color:var(--text-dim);margin-bottom:16px}
.footer-socials{display:flex;justify-content:center;gap:12px;margin-bottom:16px}
.footer-socials a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:color .15s}
.footer-socials a:hover{color:var(--text-primary)}
.footer-platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}
.platform-btn{display:inline-flex;align-items:center;padding:6px 14px;font-size:.7rem;font-weight:600;letter-spacing:.3px;color:var(--text-muted);border:1px solid rgba(201,169,110,.15);border-radius:5px;background:rgba(201,169,110,.05);transition:all .2s}
.platform-btn:hover{color:var(--gold);border-color:rgba(201,169,110,.4);background:rgba(201,169,110,.1)}
.footer-copyright{font-size:.68rem;color:var(--text-dim);text-align:center;padding:0 12px}
.footer-credit{margin-top:4px;font-size:.62rem;color:var(--text-dim)}
.footer-credit-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 22px;font-size:.82rem;color:var(--gold);text-decoration:none;letter-spacing:.5px;border:1px solid rgba(201,169,110,.2);border-radius:20px;background:rgba(201,169,110,.05);transition:all .3s ease;animation:credit-glow 3s ease-in-out infinite}
.footer-credit-link:hover{background:rgba(201,169,110,.12);border-color:rgba(201,169,110,.5);transform:scale(1.05)}
.footer-credit-link strong{color:#fff;font-weight:700}
@media(max-width:480px){.footer{padding:24px 16px 12px}.footer-platforms{gap:6px}.platform-btn{padding:5px 10px;font-size:.65rem}.footer-copyright{font-size:.62rem}.footer-credit-link{padding:6px 16px;font-size:.72rem;gap:6px}}
.credit-text{position:relative}
.credit-sparkle{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:credit-pulse 2s ease-in-out infinite;box-shadow:0 0 6px rgba(201,169,110,.6)}
.credit-sparkle:last-child{animation-delay:1s}
@keyframes credit-pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
@keyframes credit-glow{0%,100%{box-shadow:0 0 0 rgba(201,169,110,0)}50%{box-shadow:0 0 15px rgba(201,169,110,.15)}}

/* ========== SCROLL TO TOP ========== */
#scrollToTop{position:fixed;bottom:20px;right:20px;width:36px;height:36px;background:rgba(36,27,24,.9);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s;z-index:900}
#scrollToTop.visible{opacity:1;visibility:visible}
#scrollToTop:hover{color:var(--text-primary)}

/* ========== FIREFLIES ========== */
.fireflies{display:none}

/* ========== FADE IN ========== */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ========== RESPONSIVE ========== */
@media(max-width:1024px){
  .sidebar{display:none}
  .sidebar-toggle{display:none}
  .content{margin-left:0}
  .race-grid{grid-template-columns:repeat(2,1fr)}
  .auto-grid,.pvp-grid,.rank-categories{grid-template-columns:repeat(2,1fr)}
  .equip-layout{grid-template-columns:1fr}
  .equip-dual{gap:12px}
  .bp-tracks{grid-template-columns:1fr}
}
@media(max-width:768px){
  .navbar-actions{display:none}
  .mobile-toggle{display:flex}
  .navbar-actions.open{display:flex;position:absolute;top:var(--navbar-h);left:0;right:0;background:rgba(26,20,18,.96);backdrop-filter:blur(16px);flex-direction:column;padding:12px;gap:8px;border-bottom:1px solid var(--border)}
  .hero-stats{flex-wrap:wrap}
  .hero-stat{min-width:50%}
  .hero-stat-divider{display:none}
  .content-section{padding:32px 16px}
  .race-grid{grid-template-columns:1fr 1fr}
  .equip-inv-panel{width:150px}
  .auto-grid,.farm-cards{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .vip-layout{grid-template-columns:1fr}
  .rank-categories{grid-template-columns:1fr}
  .evo-panels{grid-template-columns:1fr}
  .evo-acc-chain{flex-direction:column}
  .evo-acc-arrow{transform:rotate(90deg)}
  .evo-icon-wrap{width:32px;height:32px}
  .evo-icon-wrap--tall{width:32px;height:58px}
  .evo-icon-wrap--sm{width:26px;height:26px}
  .evo-icon-cell{width:40px;padding:3px 4px !important}
  .evo-icon-wrap--tall{width:32px;height:58px}
  .evo-icon-cell--tall{width:40px}
}
@media(max-width:480px){
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%}
  .race-grid{grid-template-columns:1fr}
  .equip-inv-panel{width:140px}
  .section-title{font-size:1.2rem}
}

.hero-opening {
	display: inline-block;
	font-weight: 700;
	letter-spacing: 1px;

	background: linear-gradient(
		90deg,
		#ffffff 0%,
		#ffffff 35%,
		#ffd59a 50%,
		#ffffff 65%,
		#ffffff 100%
	);
	background-size: 250% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	animation:
		openingEntrance 0.9s ease-out both,
		openingShine 3s linear infinite,
		openingPulse 2s ease-in-out infinite;
}

@keyframes openingEntrance {
	from {
		opacity: 0;
		transform: translateY(15px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes openingShine {
	from {
		background-position: 200% center;
	}

	to {
		background-position: -50% center;
	}
}

@keyframes openingPulse {
	0%,
	100% {
		filter: drop-shadow(0 0 3px rgba(255, 213, 154, 0.25));
		transform: scale(1);
	}

	50% {
		filter: drop-shadow(0 0 10px rgba(255, 213, 154, 0.65));
		transform: scale(1.025);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-opening {
		animation: none;
	}
}

.evo-panel {
	padding: 22px;
	background:
		linear-gradient(
			135deg,
			rgba(201, 169, 110, 0.025),
			transparent 45%
		),
		rgba(24, 18, 15, 0.78);
	border: 1px solid rgba(201, 169, 110, 0.14);
	border-radius: 8px;
}

.evo-panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(201, 169, 110, 0.12);
}

.evo-panel-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--gold, #d6a95e);
	text-transform: uppercase;
}

.evo-panel-description {
	margin: 5px 0 0;
	font-size: 0.68rem;
	line-height: 1.5;
	color: var(--text-secondary, #8d837c);
}

.evo-shared-badge {
	flex-shrink: 0;
	padding: 6px 10px;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #93c993;
	background: rgba(75, 139, 75, 0.08);
	border: 1px solid rgba(112, 190, 112, 0.16);
	border-radius: 4px;
	text-transform: uppercase;
}

.evo-content {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 22px;
}

.evo-equipment-section,
.evo-upgrade-section {
	min-width: 0;
}

.evo-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(201, 169, 110, 0.1);
}

.evo-section-title > span {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	color: #c9a96e;
	text-transform: uppercase;
}

.evo-section-title small {
	font-size: 0.58rem;
	font-weight: 600;
	color: #756d67;
}

.evo-equipment-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.evo-equipment {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 72px;
	padding: 4px 10px;
	background: rgba(13, 11, 10, 0.4);
	border: 1px solid rgba(201, 169, 110, 0.07);
	border-radius: 5px;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.evo-equipment:hover {
	background: rgba(20, 17, 14, 0.72);
	border-color: rgba(201, 169, 110, 0.2);
	transform: translateX(2px);
}

.evo-equipment-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.evo-equipment-info strong {
	overflow: hidden;
	font-size: 0.68rem;
	font-weight: 600;
	color: #c1b6ae;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.evo-equipment-info span {
	font-size: 0.56rem;
	color: #6f6762;
	white-space: nowrap;
}

.evo-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.evo-icon-wrap--tall {
	width: 40px;
	height: 64px;
}

.evo-icon-frame,
.evo-icon-item {
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: contain;
	image-rendering: pixelated;
	transform: translate(-50%, -50%);
}

.evo-icon-frame {
	z-index: 1;
	width: 100%;
	height: 100%;
}

.evo-icon-item {
	z-index: 2;
	max-width: calc(100% - 6px);
	max-height: calc(100% - 6px);
}

.evo-upgrade-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(9, minmax(54px, 1fr));
	gap: 6px;
	padding-top: 8px;
}

.evo-upgrade-track::before {
	content: "";
	position: absolute;
	top: 37px;
	right: 4%;
	left: 4%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(201, 169, 110, 0.2) 8%,
		rgba(201, 169, 110, 0.2) 92%,
		transparent
	);
}

.evo-upgrade-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.evo-upgrade-level {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 20px;
	font-size: 0.64rem;
	font-weight: 700;
	color: #b9b0aa;
	background: #191411;
	border: 1px solid rgba(201, 169, 110, 0.14);
	border-radius: 10px;
}

.evo-upgrade-step--final .evo-upgrade-level {
	color: #e1b967;
	border-color: rgba(225, 185, 103, 0.34);
	box-shadow: 0 0 12px rgba(225, 185, 103, 0.08);
}

.evo-upgrade-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 100%;
	padding: 10px 4px 8px;
	background: rgba(13, 11, 10, 0.46);
	border: 1px solid rgba(201, 169, 110, 0.07);
	border-radius: 5px;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.evo-upgrade-item:hover {
	background: rgba(22, 18, 15, 0.8);
	border-color: rgba(42, 211, 207, 0.25);
	transform: translateY(-2px);
}

.evo-upgrade-item .evo-icon-wrap {
	width: 40px;
	height: 40px;
}

.evo-upgrade-item > span {
	font-size: 0.65rem;
	font-weight: 600;
	color: #a99e97;
}

.evo-upgrade-step--final .evo-upgrade-item {
	background:
		linear-gradient(
			180deg,
			rgba(225, 185, 103, 0.04),
			transparent
		),
		rgba(13, 11, 10, 0.46);
	border-color: rgba(225, 185, 103, 0.15);
}

.evo-upgrade-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	padding: 11px 13px;
	background: rgba(201, 169, 110, 0.035);
	border: 1px solid rgba(201, 169, 110, 0.09);
	border-radius: 5px;
}

.evo-upgrade-note-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	font-size: 0.5rem;
	color: #c9a96e;
	background: rgba(201, 169, 110, 0.08);
	border-radius: 50%;
}

.evo-upgrade-note strong {
	display: block;
	margin-bottom: 3px;
	font-size: 0.65rem;
	font-weight: 600;
	color: #b9afa8;
}

.evo-upgrade-note p {
	margin: 0;
	font-size: 0.6rem;
	line-height: 1.5;
	color: #7c746e;
}

@media (max-width: 950px) {
	.evo-content {
		grid-template-columns: 1fr;
	}

	.evo-equipment-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.evo-upgrade-track {
		grid-template-columns: repeat(3, minmax(70px, 1fr));
		gap: 10px;
	}

	.evo-upgrade-track::before {
		display: none;
	}
}

@media (max-width: 520px) {
	.evo-panel {
		padding: 15px;
	}

	.evo-panel-header {
		flex-direction: column;
		gap: 10px;
	}

	.evo-equipment-list {
		grid-template-columns: 1fr;
	}

	.evo-upgrade-track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.evo-conversion-section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(201, 169, 110, 0.12);
}

.evo-section-title--conversion {
	align-items: flex-end;
	margin-bottom: 15px;
}

.evo-section-title--conversion > div {
	min-width: 0;
}

.evo-section-title--conversion > div > span {
	display: block;
	font-family: var(--font-display);
	font-size: 0.74rem;
	font-weight: 700;
	color: #c9a96e;
	text-transform: uppercase;
}

.evo-section-title--conversion p {
	margin: 4px 0 0;
	font-size: 0.59rem;
	line-height: 1.45;
	color: #756d67;
}

.evo-conversion-recipe {
	display: grid;
	grid-template-columns:
		minmax(180px, 1fr)
		34px
		minmax(235px, 1.35fr)
		56px
		minmax(180px, 1fr);
	align-items: center;
	gap: 10px;
	padding: 18px;

	background:
		linear-gradient(
			90deg,
			rgba(201, 169, 110, 0.025),
			transparent 45%,
			rgba(79, 167, 92, 0.025)
		),
		rgba(13, 11, 10, 0.36);

	border: 1px solid rgba(201, 169, 110, 0.09);
	border-radius: 7px;
}

.evo-conversion-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.evo-conversion-label {
	font-family: var(--font-display);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #837972;
	text-transform: uppercase;
}

.evo-conversion-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 82px;
	padding: 8px 12px;

	background: rgba(22, 18, 15, 0.72);
	border: 1px solid rgba(201, 169, 110, 0.11);
	border-radius: 6px;

	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.evo-conversion-card:hover {
	background: rgba(27, 22, 18, 0.9);
	border-color: rgba(201, 169, 110, 0.27);
	transform: translateY(-2px);
}

.evo-conversion-card--result {
	background:
		linear-gradient(
			135deg,
			rgba(85, 167, 95, 0.06),
			transparent 65%
		),
		rgba(22, 18, 15, 0.72);

	border-color: rgba(100, 190, 110, 0.18);
}

.evo-conversion-card--result:hover {
	border-color: rgba(100, 190, 110, 0.38);
}

.evo-conversion-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-right: 26px;
}

.evo-conversion-info strong {
	overflow: hidden;
	font-size: 0.67rem;
	font-weight: 600;
	color: #c6bbb3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.evo-conversion-info span {
	font-size: 0.56rem;
	line-height: 1.4;
	color: #756d67;
}

.evo-conversion-count {
	position: absolute;
	top: 8px;
	right: 8px;

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

	min-width: 26px;
	height: 19px;
	padding: 0 6px;

	font-size: 0.57rem;
	font-weight: 700;
	color: #c9a96e;

	background: rgba(201, 169, 110, 0.07);
	border: 1px solid rgba(201, 169, 110, 0.12);
	border-radius: 10px;
}

.evo-conversion-operator {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: rgba(201, 169, 110, 0.65);

	background: rgba(201, 169, 110, 0.04);
	border: 1px solid rgba(201, 169, 110, 0.1);
	border-radius: 50%;
}

.evo-conversion-materials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.evo-conversion-material {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 7px 8px;

	background: rgba(22, 18, 15, 0.62);
	border: 1px solid rgba(42, 211, 207, 0.1);
	border-radius: 5px;

	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;
}

.evo-conversion-material:hover {
	background: rgba(27, 22, 18, 0.82);
	border-color: rgba(42, 211, 207, 0.28);
}

.evo-conversion-material .evo-icon-wrap {
	width: 38px;
	height: 38px;
}

.evo-conversion-material > div:last-child {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.evo-conversion-material strong {
	overflow: hidden;
	font-size: 0.59rem;
	font-weight: 600;
	color: #ada29b;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.evo-conversion-material span {
	font-size: 0.59rem;
	font-weight: 700;
	color: #c9a96e;
}

.evo-conversion-fee,
.evo-conversion-success {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 30px;
	padding: 6px 9px;

	background: rgba(201, 169, 110, 0.035);
	border: 1px solid rgba(201, 169, 110, 0.08);
	border-radius: 4px;
}

.evo-conversion-fee span,
.evo-conversion-success span {
	font-size: 0.57rem;
	color: #756d67;
}

.evo-conversion-fee strong {
	font-size: 0.59rem;
	font-weight: 600;
	color: #d2b06e;
	white-space: nowrap;
}

.evo-conversion-success {
	background: rgba(85, 167, 95, 0.035);
	border-color: rgba(85, 167, 95, 0.1);
}

.evo-conversion-success strong {
	font-size: 0.6rem;
	font-weight: 700;
	color: #8bc78b;
}

.evo-conversion-arrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
}

.evo-conversion-arrow::before {
	content: "";
	width: 38px;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(201, 169, 110, 0.16),
		rgba(139, 199, 139, 0.65)
	);
}

.evo-conversion-arrow::after {
	content: "";
	position: absolute;
	right: 5px;

	width: 7px;
	height: 7px;

	border-top: 1px solid #8bc78b;
	border-right: 1px solid #8bc78b;

	transform: rotate(45deg);
}

.evo-conversion-notice {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 10px;
	padding: 8px 11px;

	background: rgba(201, 169, 110, 0.025);
	border: 1px solid rgba(201, 169, 110, 0.07);
	border-radius: 5px;
}

.evo-conversion-notice-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 20px;
	height: 20px;

	font-size: 0.45rem;
	color: #c9a96e;

	background: rgba(201, 169, 110, 0.07);
	border-radius: 50%;
}

.evo-conversion-notice p {
	margin: 0;
	font-size: 0.57rem;
	line-height: 1.5;
	color: #746c66;
}

@media (max-width: 1050px) {
	.evo-conversion-recipe {
		grid-template-columns:
			minmax(170px, 1fr)
			30px
			minmax(210px, 1.2fr);
	}

	.evo-conversion-arrow {
		grid-column: 1 / -1;
		height: 22px;
		transform: rotate(90deg);
	}

	.evo-conversion-group:last-child {
		grid-column: 1 / -1;
		width: min(100%, 360px);
		margin: 0 auto;
	}
}

@media (max-width: 700px) {
	.evo-conversion-recipe {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
	}

	.evo-conversion-operator {
		align-self: center;
	}

	.evo-conversion-arrow {
		align-self: center;
		width: 50px;
		transform: rotate(90deg);
	}

	.evo-conversion-group:last-child {
		width: 100%;
	}

	.evo-conversion-materials {
		grid-template-columns: 1fr;
	}
}