/* ─── INTRO TOOLTIP ─── */
.intro-btn-wrap{position:relative;display:inline-block;}
.intro-trigger{background:transparent;border:1px solid rgba(201,168,76,.4);color:var(--warm);
  font-size:16px;padding:8px 22px;border-radius:20px;cursor:pointer;transition:all .3s;
  font-family:var(--ui-font);}
.intro-trigger:hover{border-color:var(--gold);color:var(--gold2);}
.intro-popup{
  display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:320px;background:rgba(20,5,0,.97);border:1px solid rgba(201,168,76,.35);
  border-radius:10px;padding:16px 18px;z-index:100;text-align:left;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
}
.intro-popup.show{display:block;}
.intro-popup::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:rgba(201,168,76,.35);}
.intro-popup-title{font-family:var(--ui-font);font-weight:700;font-size:15px;color:var(--gold2);margin-bottom:8px;}
.intro-popup p{font-size:13px;color:var(--warm);line-height:1.7;margin-bottom:8px;}
.intro-popup ul{padding-left:16px;font-size:13px;color:var(--warm);line-height:1.9;}
.intro-popup strong{color:var(--gold2);}
.intro-popup em{color:var(--parch);}

/* ─── LANG SELECTOR ─── */
.lang-sel-wrap{position:relative;}
.lang-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:rgba(20,5,0,.97);border:1px solid rgba(201,168,76,.3);border-radius:8px;
  overflow:hidden;z-index:200;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.6);}
.lang-menu.show{display:block;}
.lang-opt{padding:10px 16px;font-size:14px;color:var(--warm);cursor:pointer;transition:background .2s;}
.lang-opt:hover,.lang-opt.active{background:rgba(201,168,76,.12);color:var(--gold2);}

/* ─── HAMBURGER BUTTON ─── */
.hamburger-btn{font-size:22px !important;padding:2px 6px;border-radius:6px;
  border:1px solid rgba(201,168,76,.2);transition:all .2s;}
.hamburger-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.1);}

/* ─── SIDE MENU ─── */
.side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;backdrop-filter:blur(2px);}
.side-overlay.show{display:block;}
.side-menu{
  position:fixed;top:0;right:-320px;width:300px;height:100vh;z-index:301;
  background:linear-gradient(160deg,#2a0800,#1a0400);
  border-left:1px solid rgba(201,168,76,.2);
  display:flex;flex-direction:column;
  transition:right .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.side-menu.open{right:0;}
.side-menu-top{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px;}
.side-menu-brand{font-family:var(--display-font);font-size:13px;color:var(--gold);letter-spacing:2px;font-weight:700;}
.side-menu-close{font-size:20px;color:var(--warm);cursor:pointer;padding:4px 8px;border-radius:6px;
  transition:all .2s;}
.side-menu-close:hover{color:var(--gold2);background:rgba(201,168,76,.1);}
.side-menu-user{display:flex;align-items:center;gap:12px;padding:12px 18px 14px;
  background:rgba(201,168,76,.06);border-top:1px solid rgba(201,168,76,.1);
  border-bottom:1px solid rgba(201,168,76,.1);}
.side-menu-avatar{font-size:28px;width:44px;height:44px;border-radius:50%;
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.25);
  display:flex;align-items:center;justify-content:center;}
.side-menu-username{font-family:var(--ui-font);font-weight:700;font-size:15px;color:var(--parch);}
.side-menu-xp{font-size:12px;color:var(--gold);letter-spacing:.5px;margin-top:2px;}
.side-menu-divider{height:1px;background:rgba(201,168,76,.1);margin:6px 0;}
.side-menu-section{font-size:10px;color:rgba(201,168,76,.5);letter-spacing:2px;
  text-transform:uppercase;padding:10px 18px 4px;}
.side-menu-item{padding:12px 18px;font-size:15px;color:var(--warm);cursor:pointer;
  transition:all .2s;letter-spacing:.3px;}
.side-menu-item:hover{background:rgba(201,168,76,.08);color:var(--gold2);}
.side-menu-item.danger{color:#f08090;}
.side-menu-item.danger:hover{background:rgba(200,24,40,.1);color:#ff8090;}
.side-menu-progress{display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;font-size:14px;color:var(--warm);}
.side-unlock-badge{font-size:11px;padding:3px 9px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#888;}
.side-unlock-badge.unlocked{background:rgba(100,200,80,.15);border-color:rgba(100,200,80,.3);color:#7fdb5a;}

/* ─── CAT SELECT SCREEN ─── */
#s-catselect{
  background:
    radial-gradient(circle at 16% 16%, rgba(255,229,163,.34) 0, rgba(255,229,163,0) 24%),
    radial-gradient(circle at 84% 14%, rgba(255,175,124,.24) 0, rgba(255,175,124,0) 20%),
    linear-gradient(180deg,#6d1117 0%,#3a090d 42%,#190407 100%);
}
.catselect-body{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:20px 16px 60px;}
.catselect-title{font-family:var(--display-font);font-size:clamp(20px,5vw,32px);font-weight:bold;
  color:var(--gold2);letter-spacing:2px;text-align:center;margin-bottom:8px;
  text-shadow:0 0 20px rgba(201,168,76,.4);}
.catselect-sub{font-size:15px;color:var(--warm);font-style:italic;margin-bottom:24px;text-align:center;}
.cats-select{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:100%;max-width:900px;}
.cat-sel{flex:1;min-width:160px;max-width:260px;}
.cat-sel.locked-cat{opacity:.6;cursor:not-allowed;}
.cat-sel.locked-cat:hover{transform:none !important;}
.cat-status{font-size:11px !important;white-space:normal !important;line-height:1.3;}

/* ─── CATEGORY LOCK STATES ─── */
.cat-locked-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;z-index:2;border-radius:10px;
}
.cat-locked-overlay .lock-icon{font-size:28px;}
.cat-locked-overlay .lock-msg{font-size:11px;color:#ccc;text-align:center;padding:0 8px;line-height:1.4;}


/* ─── SIDE MENU TABS ─── */
.side-tabs{display:flex;border-bottom:1px solid rgba(201,168,76,.15);}
.side-tab{flex:1;padding:11px 8px;text-align:center;font-size:13px;color:var(--warm);
  cursor:pointer;transition:all .2s;letter-spacing:.3px;border-bottom:2px solid transparent;}
.side-tab.active{color:var(--gold2);border-bottom-color:var(--gold);}
.side-tab:hover{color:var(--gold2);}
.side-panel{display:none;flex:1;overflow-y:auto;}
.side-panel.active{display:block;}

/* ─── USER DETAILS ─── */
.side-user-details{flex:1;}
.side-user-stats{display:flex;gap:10px;margin:4px 0;}
.side-stat{font-size:12px;color:var(--gold);background:rgba(201,168,76,.1);
  padding:2px 8px;border-radius:10px;}
.side-user-free{font-size:11px;color:#a06030;margin-top:3px;}

/* ─── ACCORDION ─── */
.side-accordion{border-bottom:1px solid rgba(201,168,76,.08);}
.side-acc-header{display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;cursor:pointer;font-size:14px;color:var(--warm);
  transition:background .2s;}
.side-acc-header:hover{background:rgba(201,168,76,.06);}
.side-acc-arrow{font-size:10px;color:rgba(201,168,76,.5);transition:transform .25s;}
.side-accordion.open .side-acc-arrow{transform:rotate(90deg);}
.side-acc-body{display:none;padding:0 18px 14px;font-size:13px;}
.side-accordion.open .side-acc-body{display:block;}
.side-acc-desc{color:#a07040;margin-bottom:8px;font-size:12px;}
.side-acc-unlock-req{color:#f08090;font-size:12px;margin-bottom:8px;
  background:rgba(200,24,40,.08);padding:5px 10px;border-radius:6px;}
.side-acc-progress{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.side-acc-bar{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;}
.side-acc-fill{height:100%;border-radius:4px;transition:width .6s ease;}
.myth-fill{background:linear-gradient(90deg,#9b59b6,#d7b8f5);}
.battle-fill{background:linear-gradient(90deg,#c01828,#f08090);}
.dynasty-fill{background:linear-gradient(90deg,#8a5a10,var(--gold));}
.side-acc-count{font-size:11px;color:var(--warm);white-space:nowrap;}
.side-acc-btn{text-align:center;padding:8px;border-radius:6px;cursor:pointer;
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.25);
  color:var(--gold2);font-size:13px;transition:all .2s;}
.side-acc-btn:hover{background:rgba(201,168,76,.2);}
.side-acc-btn.locked{opacity:.4;cursor:not-allowed;}

/* ─── LANGUAGE PANEL ─── */
.side-lang-opt{display:flex;align-items:center;gap:14px;padding:14px 18px;
  cursor:pointer;transition:background .2s;border-bottom:1px solid rgba(255,255,255,.04);}
.side-lang-opt:hover{background:rgba(201,168,76,.07);}
.side-lang-opt.active{background:rgba(201,168,76,.1);}
.slang-flag{font-size:24px;}
.slang-name{font-size:15px;color:var(--parch);font-weight:600;}
.slang-sub{font-size:12px;color:var(--warm);opacity:.7;margin-top:1px;}
.slang-check{margin-left:auto;color:var(--gold2);font-size:16px;min-width:16px;}

/* ─── PAYWALL XP REDEEM ─── */
.xp-redeem-box{background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2);
  border-radius:10px;padding:16px;width:100%;max-width:400px;margin-bottom:16px;}
.xp-redeem-title{font-size:14px;color:var(--gold2);font-weight:700;margin-bottom:12px;text-align:center;}
.xp-redeem-row{display:flex;gap:8px;justify-content:center;}
.xp-redeem-opt{flex:1;max-width:120px;background:rgba(0,0,0,.3);border:1px solid rgba(201,168,76,.2);
  border-radius:8px;padding:10px 8px;text-align:center;cursor:pointer;transition:all .25s;
  position:relative;}
.xp-redeem-opt:hover{border-color:var(--gold);transform:translateY(-2px);}
.xp-redeem-opt.featured{border-color:var(--gold);background:rgba(201,168,76,.1);}
.xp-cost{font-size:16px;font-weight:700;color:var(--gold2);}
.xp-reward{font-size:11px;color:var(--warm);margin-top:4px;line-height:1.3;}
.xp-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#1a0a00;font-size:9px;padding:1px 7px;border-radius:8px;
  font-weight:700;white-space:nowrap;}
.xp-current{text-align:center;font-size:13px;color:var(--warm);margin-top:10px;}
.pw-divider{color:rgba(255,255,255,.25);font-size:12px;margin:8px 0 12px;letter-spacing:1px;}


/* ═══════════════════════════════
   PATH MAP (Candy Crush style)
═══════════════════════════════ */
.path-map-wrap{
  flex:1;overflow:hidden;position:relative;
  padding:0;
}
.path-map-viewport{
  width:100%;height:100%;
  overflow:hidden;position:relative;
}
.path-map-canvas{
  position:relative;
  width:100%;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
/* Background landscape per theme */
.theme-myth .path-map-canvas{background:linear-gradient(180deg,#2a0840 0%,#1a0428 50%,#0d0118 100%);}
.theme-battle .path-map-canvas{background:linear-gradient(180deg,#3a0808 0%,#1a0203 50%,#0d0102 100%);}
.theme-dynasty .path-map-canvas{background:linear-gradient(180deg,#2a1a00 0%,#150d00 50%,#0d0a01 100%);}

/* SVG path */
.path-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;}

/* NODE */
.path-node{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;
  z-index:2;
  transform:translate(-50%,-50%);
}
.path-node-circle{
  width:68px;height:68px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:3px solid rgba(255,255,255,.15);
  font-size:26px;
  transition:transform .25s,box-shadow .25s;
  position:relative;
}
.path-node:hover .path-node-circle{transform:scale(1.12);}
.path-node.current .path-node-circle{
  animation:nodePulse 1.8s ease-in-out infinite;
  border-width:4px;
}
.path-node.done .path-node-circle{filter:brightness(0.75);}
.path-node.locked .path-node-circle{filter:saturate(0) brightness(0.5);cursor:not-allowed;}
.path-node-num{
  position:absolute;top:-6px;left:-6px;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:#1a0a00;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.path-node-label{
  font-size:11px;font-weight:600;color:var(--parch);
  margin-top:5px;text-align:center;max-width:90px;
  line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.path-node-yr{
  font-size:10px;color:var(--warm);opacity:.8;margin-top:2px;
}
.path-node.locked .path-node-label{opacity:.4;}
.path-node-star{
  position:absolute;top:-8px;right:-8px;
  font-size:14px;
}
@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,205,0,.5),0 4px 14px rgba(0,0,0,.5);}
  50%{box-shadow:0 0 0 12px rgba(255,205,0,0),0 4px 14px rgba(0,0,0,.5);}
}

/* LOCK ICON overlay */
.path-lock{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:rgba(0,0,0,.35);border-radius:50%;
}

/* ERA BANNER */
.path-era-banner{
  position:absolute;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(201,168,76,.25);border-radius:20px;
  padding:5px 16px;font-size:11px;letter-spacing:1.5px;
  color:var(--gold);text-transform:uppercase;white-space:nowrap;
  z-index:3;
}

/* ARROW NAV */
.path-nav-fixed-DISABLED{display:none;}
.path-nav-btn{
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.7);border:1px solid rgba(201,168,76,.35);
  color:var(--gold2);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;pointer-events:all;
  backdrop-filter:blur(6px);
}
.path-nav-btn:hover{background:rgba(201,168,76,.2);transform:scale(1.1);}
.path-nav-btn:disabled{opacity:.25;cursor:not-allowed;transform:none;}
.path-nav-counter{
  background:rgba(0,0,0,.65);border:1px solid rgba(201,168,76,.2);
  border-radius:16px;padding:5px 14px;font-size:12px;color:var(--warm);
  backdrop-filter:blur(4px);pointer-events:none;
}

/* PAYMENT SCREEN */
#s-payment{
  background:
    radial-gradient(circle at 50% 10%, rgba(244,208,111,.04) 0%, transparent 30%),
    linear-gradient(180deg, #0b1020 0%, #070a14 100%);
}
.payment-body{
  flex:1;overflow-y:auto;padding:18px 18px calc(env(safe-area-inset-bottom, 0px) + 96px);
  max-width:520px;width:100%;margin:0 auto;
}
.pay-hero{text-align:center;margin-bottom:20px;padding:16px;}
.pay-hero-icon{font-size:44px;margin-bottom:8px;}
.pay-hero-name{font-size:18px;font-weight:700;color:var(--gold2);margin-bottom:4px;}
.pay-hero-price{font-size:24px;font-weight:700;color:var(--parch);}
.pay-form-card{background:rgba(0,0,0,.4);border:1px solid rgba(201,168,76,.2);
  border-radius:12px;padding:20px;margin-bottom:16px;}
.pay-section-title{font-size:12px;letter-spacing:1.5px;color:var(--gold);
  text-transform:uppercase;margin-bottom:14px;}
.pay-field{margin-bottom:14px;}
.pay-label{display:block;font-size:12px;color:var(--warm);margin-bottom:6px;letter-spacing:.5px;}
.pay-input-wrap{position:relative;}
.pay-input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(201,168,76,.25);
  border-radius:8px;padding:11px 14px;color:var(--parch);font-size:16px;font-family:var(--ui-font);
  transition:border .2s;outline:none;}
.pay-input:focus{border-color:var(--gold);}
.pay-input::placeholder{color:rgba(255,255,255,.25);}
.pay-card-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:18px;}
.pay-row{display:flex;gap:12px;}
.pay-row .pay-field{flex:1;}
.pay-demo-note{font-size:12px;color:rgba(201,168,76,.6);text-align:center;margin:8px 0 14px;
  padding:8px;background:rgba(201,168,76,.06);border-radius:6px;}
.pay-confirm-btn{width:100%;background:linear-gradient(135deg,#7a0810,#da251d);
  border:none;color:var(--gold2);font-size:16px;font-weight:700;
  padding:14px;border-radius:8px;cursor:pointer;transition:all .3s;letter-spacing:.5px;
  font-family:var(--ui-font);}
.pay-confirm-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(218,37,29,.4);}
.pay-confirm-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.pay-secure{text-align:center;font-size:11px;color:rgba(255,255,255,.3);margin-top:10px;}
.pay-success{display:flex;flex-direction:column;align-items:center;padding:20px;text-align:center;
  animation:fadeIn .5s ease;}
.pay-success-icon{font-size:56px;margin-bottom:12px;}
.pay-success-title{font-size:22px;font-weight:700;color:var(--gold2);margin-bottom:8px;}
.pay-success-sub{font-size:15px;color:var(--warm);margin-bottom:20px;}
.pay-start-btn{background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a0a00;font-size:16px;font-weight:700;padding:14px 40px;border:none;
  border-radius:8px;cursor:pointer;font-family:var(--ui-font);}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


/* ─── PATH MAP HORIZONTAL ─── */
.path-map-wrap{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.path-map-viewport{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;min-height:220px;-webkit-overflow-scrolling:touch;}
.path-map-viewport::-webkit-scrollbar{height:4px;}
.path-map-viewport::-webkit-scrollbar-thumb{background:rgba(201,168,76,.3);border-radius:4px;}
.path-map-canvas{position:relative;height:220px;display:inline-block;min-width:100%;}

/* Node: centered on x,y */
.path-node{position:absolute;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;z-index:2;transform:translate(-50%,-50%);}
/* Label below circle for node-bot, above for node-top */
.path-node.node-top{flex-direction:column-reverse;}
.path-node.node-top .path-node-era{order:3;}
.path-node-era{
  font-size:9px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;
  background:rgba(0,0,0,.5);padding:2px 8px;border-radius:8px;
  white-space:nowrap;margin:4px 0;
}
.path-node-label{font-size:11px;font-weight:600;color:var(--parch);
  text-align:center;max-width:85px;line-height:1.25;
  text-shadow:0 1px 5px rgba(0,0,0,.95);margin:4px 0 2px;}
.path-node-yr{font-size:10px;color:var(--warm);opacity:.75;white-space:nowrap;}

/* NAV — bottom of map area, not fixed */
.path-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 16px 8px;background:rgba(0,0,0,.35);
  border-top:1px solid rgba(201,168,76,.12);
  z-index:10;flex-shrink:0;
}
.path-nav-btn{
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid rgba(201,168,76,.3);
  color:var(--gold2);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;backdrop-filter:blur(4px);
}
.path-nav-btn:hover{background:rgba(201,168,76,.2);transform:scale(1.08);}
.path-nav-btn:disabled{opacity:.22;cursor:not-allowed;transform:none;}
.path-nav-counter{font-size:12px;color:var(--warm);letter-spacing:.5px;}