/* WOODLORDS theme v3 — self-hosted Vazirmatn + ambient layer (additive, non-destructive) */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/vazirmatn-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/vazirmatn-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212;}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/vazirmatn-arabic-500.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/vazirmatn-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212;}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/vazirmatn-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/vazirmatn-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212;}

/* readable Persian font everywhere (loads after app.css, so this wins) */
body{font-family:'Vazirmatn','Tahoma','Segoe UI',sans-serif;}
button,input,textarea,select{font-family:inherit;}
/* keep the Latin wordmark elegant */
.brand-copy strong{font-family:'Vazirmatn',Georgia,serif;font-weight:800;}

/* ambient particle layer sits behind the UI */
#ambient-fx{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;}
.app-shell{position:relative;z-index:1;}

/* music toggle reuses .round-button; add an active glow */
#musicToggle{transition:transform .15s, box-shadow .25s, background .25s, color .25s;}
#musicToggle.playing{
  background:linear-gradient(145deg,#ffd76b,#d99f2a);
  color:#33240a;border-color:transparent;
  box-shadow:0 0 16px rgba(255,207,92,.55);
}
#musicToggle.playing span{animation:wl-note-bob 1.6s ease-in-out infinite;}
@keyframes wl-note-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) rotate(-6deg)}}
@media (prefers-reduced-motion: reduce){
  #ambient-fx{display:none;}
  #musicToggle.playing span{animation:none;}
}

/* ============ home polish v3 (enhances existing classes, no layout change) ============ */
.level-medal{box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 22px rgba(255,207,92,.35);animation:wl-medal 3.6s ease-in-out infinite;}
@keyframes wl-medal{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 18px rgba(255,207,92,.28)}50%{box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 30px rgba(255,207,92,.55)}}

.resource-chip{background:linear-gradient(150deg,color-mix(in srgb,var(--surface-2) 90%,#2a5a3a 10%),var(--surface));
  transition:transform .16s ease, box-shadow .2s ease;}
.resource-chip:active{transform:translateY(-3px) scale(1.02);}
.resource-chip strong{color:#ffe6a6;}

.action-tile{transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease;}
.action-tile:active{transform:translateY(-4px);}
.action-tile:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent) inset;}
.action-tile .tile-icon{transition:transform .2s ease;}
.action-tile:hover .tile-icon{transform:translateY(-2px) scale(1.06);}

.panel-card{transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease;animation:wl-rise .5s cubic-bezier(.2,.7,.2,1) both;}
.panel-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 14px 32px rgba(0,0,0,.3);}
.panel-card:active{transform:translateY(-3px);}
.panel-icon{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
@keyframes wl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-grid > .panel-card:nth-child(1){animation-delay:.02s}
.panel-grid > .panel-card:nth-child(2){animation-delay:.06s}
.panel-grid > .panel-card:nth-child(3){animation-delay:.10s}
.panel-grid > .panel-card:nth-child(4){animation-delay:.14s}
.panel-grid > .panel-card:nth-child(5){animation-delay:.18s}
.panel-grid > .panel-card:nth-child(6){animation-delay:.22s}
.panel-grid > .panel-card:nth-child(n+7){animation-delay:.26s}

/* xp bar sheen */
.xp-shell .progress{position:relative;overflow:hidden;}
.xp-shell .progress > span::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-120%);animation:wl-sheen 2.8s ease-in-out infinite;}
@keyframes wl-sheen{to{transform:translateX(220%)}}

.weather-badge{border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.25);}

@media (prefers-reduced-motion: reduce){
  .level-medal,.panel-card,.xp-shell .progress > span::after{animation:none !important;}
}

/* ============ phase 3 — unify all screens (enhance shared classes only) ============ */
/* buttons */
.primary-button{background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#08240f;font-weight:700;
  border:none;box-shadow:0 10px 24px rgba(31,157,92,.34);transition:transform .15s ease, box-shadow .22s ease, filter .2s;}
.primary-button:hover{filter:brightness(1.05);}
.primary-button:active{transform:translateY(2px) scale(.99);box-shadow:0 5px 14px rgba(31,157,92,.3);}
.secondary-button,.small-button{transition:transform .15s ease, border-color .2s ease, background .2s ease;}
.secondary-button:active,.small-button:active,.danger-button:active{transform:translateY(2px) scale(.99);}
.small-button:hover,.secondary-button:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
.danger-button{transition:transform .15s ease, filter .2s;}
.danger-button:hover{filter:brightness(1.06);}

/* content cards & hero blocks across every screen */
.mission-card,.mastery-card,.listing-card,.target-card,.duel-target,.building-card,.region-card,
.weapon-card,.weekly-challenge-card,.codex-card,.title-card,.town-building-mini,.achievement-card,
.leader-row,.clan-empty,.collection-card{
  transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease;}
.mission-card:hover,.mastery-card:hover,.listing-card:hover,.target-card:hover,.duel-target:hover,
.building-card:hover,.region-card:hover,.weapon-card:hover,.weekly-challenge-card:hover,
.codex-card:hover,.title-card:hover{
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 12px 28px rgba(0,0,0,.28);}
.mission-card:active,.mastery-card:active,.listing-card:active,.target-card:active,.duel-target:active,
.building-card:active,.region-card:active,.weapon-card:active{transform:translateY(-3px);}

.world-hero,.town-hero,.workshop-hero,.collection-hero,.clan-hero,.raid-banner,.duel-arena,
.boss-card,.season-card,.codex-summary,.invite-hero,.nursery-hero{
  position:relative;box-shadow:0 14px 36px rgba(0,0,0,.3);border:1px solid var(--line, rgba(120,224,163,.18));}

/* headings / eyebrow */
.eyebrow{color:var(--accent-2);letter-spacing:.4px;text-transform:none;font-weight:700;}
.section-head h2{letter-spacing:.2px;}

/* segmented tab switcher (used in adventure/market/progress/collection) */
.segmented{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:16px;padding:4px;}
.segmented button{border-radius:12px;transition:background .2s ease,color .2s ease,transform .12s;}
.segmented button.active{background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#08240f;font-weight:700;
  box-shadow:0 6px 16px rgba(31,157,92,.32);}
.segmented button:active{transform:scale(.97);}

/* stat blocks & chips */
.mini-stat,.battle-stat{transition:transform .15s ease;}
.mini-stat:active,.battle-stat:active{transform:translateY(-2px);}
.status-chip,.max-badge,.rank{border:1px solid rgba(255,255,255,.12);}
.risk-note{border-radius:12px;}

/* highlight the current player in leaderboards */
.leader-row.me{border-color:color-mix(in srgb,var(--accent-2) 60%,transparent) !important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 40%,transparent) inset,0 8px 20px rgba(0,0,0,.25);
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 12%,var(--surface)),var(--surface));}

/* modals */
.modal-sheet{box-shadow:0 -18px 60px rgba(0,0,0,.5);}
.big-icon,.big-symbol{filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));}
.modal-actions .primary-button{width:100%;}

/* friendlier empty states */
.empty-card{border:1px dashed color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:18px;
  color:var(--muted);background:rgba(0,0,0,.14);}

/* list entrance (subtle, short) */
.mission-list > *,.leader-list > *,.listing-list > *,.target-list > *,.building-grid > *,
.weekly-challenge-list > *,.codex-grid > *,.title-grid > *{animation:wl-rise .4s ease both;}
@media (prefers-reduced-motion: reduce){
  .mission-list > *,.leader-list > *,.listing-list > *,.target-list > *,.building-grid > *,
  .weekly-challenge-list > *,.codex-grid > *,.title-grid > *{animation:none;}
}

/* ============ fix: give plain panel-cards a proper forest background ============ */
/* (special panels like .land-v2-panel/.town-panel/.raid-panel set their own background and are unaffected) */
.panel-card{
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 46%),
    linear-gradient(150deg, color-mix(in srgb, var(--surface-2) 78%, #2c6b3f 22%), var(--surface));
}
.panel-card .panel-value{background:rgba(0,0,0,.28);}

/* ============ fix: pages must scroll fully clear of the fixed bottom nav ============ */
.app-shell{padding-bottom:0;}
.content{padding-bottom:calc(104px + var(--safe-bottom));}

/* league badge on the home hero */
.hero-badges .league-badge{
  background:linear-gradient(145deg,rgba(255,207,92,.28),rgba(0,0,0,.42));
  border:1px solid rgba(255,207,92,.4);color:#ffe6a6;font-weight:700;cursor:pointer;
}

/* ============ bottom nav: all 7 items in ONE compact row ============ */
.bottom-nav{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  overflow:visible;
  gap:0;
  padding-inline:4px;
}
.bottom-nav .nav-item{
  min-width:0;
  flex:none;
  padding:6px 1px;
  gap:2px;
}
.bottom-nav .nav-item span{font-size:18px;line-height:1;}
.bottom-nav .nav-item small{
  font-size:8px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* leagues modal */
.league-list{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.league-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;
  border:1px solid var(--border);background:rgba(0,0,0,.18);}
.league-row.current{border-color:rgba(255,207,92,.55);
  background:linear-gradient(145deg,rgba(255,207,92,.16),rgba(0,0,0,.2));box-shadow:0 0 16px rgba(255,207,92,.25);}
.league-row .league-emoji{font-size:28px;flex:0 0 auto;}
.league-row .league-info{flex:1;min-width:0;}
.league-row .league-info strong{display:block;font-size:14px;}
.league-row .league-info span{font-size:11px;color:var(--muted);}
.league-tag{font-size:11px;color:var(--muted);white-space:nowrap;}
.league-tag.now{color:#ffe6a6;font-weight:700;}
.league-tag.done{color:var(--success);}

/* ============ fix: tab bars (بازار/ماجراجویی/پیشرفت) — wrap so labels are readable ============ */
.segmented.scroll-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  grid-auto-flow:row;
  overflow:visible;
  gap:5px;
}
.segmented.scroll-tabs button{
  min-width:0;
  font-size:10px;
  padding:0 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ============ quick-action help icon + reward info modal ============ */
.action-tile{position:relative;}
.tile-help{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;font-style:normal;cursor:pointer;z-index:3;
  color:#cfe9ff;background:linear-gradient(145deg,#2b6fb0,#1b4e86);border:1px solid rgba(150,205,255,.5);
  box-shadow:0 0 10px rgba(80,160,255,.45);}
.tile-help:active{transform:scale(.88);}
/* red "ready to claim" badge, top-left, like the notification bell */
.tile-ready{position:absolute;top:6px;left:6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;z-index:3;
  display:grid;place-items:center;font-size:11px;font-weight:800;font-style:normal;
  color:#fff;background:#e23b3b;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 10px rgba(226,59,59,.6);}
/* tiny bottom-center timer / ready label */
.tile-timer{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;z-index:3;
  font-style:normal;font-size:9px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;
  color:#d9c48a;background:rgba(0,0,0,.32);border:1px solid var(--border);}
.tile-timer.ready{color:#0b1710;background:linear-gradient(145deg,#68d689,#3fae63);border-color:transparent;}
.action-tile{padding-bottom:22px;}
.reward-info-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.reward-info-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:13px;background:rgba(0,0,0,.2);border:1px solid var(--border);font-size:13px;}
.reward-info-row b{color:#ffe6a6;font-weight:700;white-space:nowrap;}

/* ============ locked land plots + expand pulse ============ */
.land-cell.locked{opacity:.5;filter:grayscale(.5);}
.land-cell.locked span{font-size:20px;}
#upgradeLand.pulse{animation:wl-pulse 1.8s ease;}
@keyframes wl-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,207,92,.0)}30%{box-shadow:0 0 0 4px rgba(255,207,92,.5)}60%{box-shadow:0 0 14px 2px rgba(255,207,92,.6)}}

/* ============ home pulse panels: red ready-badge, no clutter, icon never over text ============ */
.panel-card{display:flex;flex-direction:column;align-items:flex-start;}
.panel-card .panel-icon{position:static;margin-bottom:4px;}
.panel-badge{position:absolute;top:9px;left:9px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;font-size:11px;font-weight:800;font-style:normal;z-index:3;
  color:#fff;background:#e23b3b;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 10px rgba(226,59,59,.6);}

/* ============ chest reward preview ============ */
.chest-rewards{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 8px;width:100%;}
.chest-reward{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:7px 9px;border-radius:12px;background:rgba(0,0,0,.24);border:1px solid var(--border);font-size:12px;}
.chest-reward b{color:#ffe6a6;font-weight:700;white-space:nowrap;}
.chest-odds{font-size:10.5px;color:var(--muted);margin-bottom:10px;line-height:1.7;text-align:center;width:100%;}
.chest-emoji{font-size:44px;}

/* ============ chest odds help button (corner ?) ============ */
.chest-card{position:relative;}
.chest-help{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;padding:0;z-index:4;cursor:pointer;
  font-size:14px;font-weight:800;line-height:1;color:#dfe9ff;
  background:rgba(60,120,220,.22);border:1px solid rgba(130,170,255,.5);
  box-shadow:0 0 8px rgba(90,140,240,.35);}
.chest-help:hover,.chest-help:active{background:rgba(80,140,240,.4);}

/* ============ قلمرو: زمین + شهرک + جهان زیر یک تب ============ */
.realm-pane{display:none;}
.realm-pane.on{display:block;animation:screen-in .2s ease;}
.realm-tabs{position:sticky;top:0;z-index:5;margin-bottom:10px;padding:6px;
  background:linear-gradient(180deg,rgba(7,21,13,.96),rgba(7,21,13,.82));
  backdrop-filter:blur(8px);border-radius:16px;}
/* نوار پایین با ۵ تب جا برای متن بیشتری دارد */
.bottom-nav .nav-item small{font-size:10px;}

/* ============ نوار پایین: ۵ تب مساوی و تمام‌عرض ============ */
/* قوانین قدیمی برای حالت ۷ تبی اسکرول‌شونده بودند و با ۵ تب،
   دکمه‌ها جمع می‌شدند و سمت چپ خالی می‌ماند. */
.bottom-nav{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  overflow-x:visible !important;
  justify-content:stretch !important;
  gap:4px !important;
}
.bottom-nav .nav-item{
  min-width:0 !important;
  flex:initial !important;
  width:100% !important;
}

/* ============ انتخاب تعداد در فروشگاه ============ */
.qty-row{display:flex;align-items:center;gap:8px;margin:14px 0 10px;justify-content:center;}
.qty-btn{min-width:52px;padding:11px 8px;border-radius:14px;font-weight:800;font-size:15px;
  color:var(--text);background:rgba(255,255,255,.07);border:1px solid var(--border);}
.qty-btn:active{transform:translateY(2px);}
.qty-input{width:82px;text-align:center;font-size:20px;font-weight:800;padding:10px 6px;
  border-radius:14px;color:#ffe6a6;background:rgba(0,0,0,.3);border:1px solid var(--line,rgba(233,196,106,.3));}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty-presets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px;}
.buy-total{text-align:center;font-weight:800;font-size:15px;color:#ffe6a6;margin-bottom:6px;}
.buy-total.bad{color:#ff9b9b;font-size:13px;}

/* ============ باف‌ها و مزایای اتحاد ============ */
.buff-grid{display:grid;grid-template-columns:1fr;gap:9px;}
.buff-card{display:flex;align-items:center;gap:11px;padding:12px;border-radius:18px;
  background:linear-gradient(150deg,rgba(26,52,34,.9),rgba(7,20,13,.95));border:1px solid var(--border);}
.buff-card.on{border-color:rgba(120,224,163,.6);box-shadow:0 0 20px rgba(74,218,128,.18);}
.buff-card.locked{opacity:.55;}
.buff-icon{font-size:30px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));}
.buff-copy{flex:1;min-width:0;}
.buff-copy h3{margin:0 0 2px;font-size:13.5px;}
.buff-copy p{margin:0;font-size:11px;color:var(--muted);}
.buff-copy small{display:block;margin-top:4px;font-size:10.5px;color:#f1cc74;}
.perk-list{display:flex;flex-direction:column;gap:6px;}
.perk-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:14px;
  background:rgba(0,0,0,.22);border:1px solid var(--border);opacity:.6;}
.perk-row.on{opacity:1;border-color:rgba(120,224,163,.45);}
.perk-level{font-size:11px;font-weight:800;color:#f1cc74;white-space:nowrap;}
.perk-name{font-size:12.5px;font-weight:700;white-space:nowrap;}
.perk-row small{font-size:10.5px;color:var(--muted);margin-right:auto;text-align:left;}

/* ============ پیش‌نمایش ارتقای ساختمان ============ */
.upgrade-preview{margin-top:9px;padding:9px 10px;border-radius:14px;
  background:rgba(0,0,0,.26);border:1px solid var(--border);}
.upgrade-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);}
.upgrade-head b{color:#6ee7a0;font-size:12px;}
.upgrade-bar{position:relative;height:9px;border-radius:999px;margin:7px 0 6px;overflow:hidden;
  background:linear-gradient(90deg,#4ada80,#2f9d5f);}          /* سبز = بعد از ارتقا */
.upgrade-bar > span{position:absolute;inset:0 auto 0 0;display:block;height:100%;
  background:rgba(0,0,0,.62);border-radius:999px;}              /* تیره = وضعیت الان */
.upgrade-legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);}
.upgrade-legend b{color:var(--text);}
.upgrade-legend .next b{color:#6ee7a0;}

/* ============ نظم‌دادن به بازار / پیشرفت / ماجراجویی ============ */
/* ۱) نوار زیرتب‌ها: یک ردیفِ اسکرول‌شونده به‌جای گرید چندردیفهٔ به‌هم‌ریخته */
.segmented.scroll-tabs{
  display:flex !important;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:6px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  /* چسبان می‌ماند تا موقع اسکرول گم نشود */
  position:sticky;top:0;z-index:6;
  backdrop-filter:blur(8px);
}
.segmented.scroll-tabs::-webkit-scrollbar{display:none;}
.segmented.scroll-tabs > button{
  flex:0 0 auto;
  white-space:nowrap;
  padding-inline:13px;
  scroll-snap-align:start;
  font-size:11.5px;
}
.segmented.scroll-tabs > button.active{
  background:linear-gradient(145deg,#f0d489,#c39b3e);
  color:#2a1e05;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.25);
}

/* ۲) ریتم یکنواخت بخش‌ها در هر سه صفحه */
#screen-market .section,#screen-progress .section,#screen-adventure .section{margin-bottom:16px;}
#screen-market .section-head,#screen-progress .section-head,#screen-adventure .section-head{
  margin:2px 3px 9px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.06);}
#screen-market .section-head h2,#screen-progress .section-head h2,#screen-adventure .section-head h2{
  font-size:14.5px;font-weight:800;}
#screen-market .section-head span,#screen-progress .section-head span,
#screen-adventure .section-head span{font-size:10.5px;white-space:nowrap;}

/* ۳) کارت‌ها: فاصله و ارتفاع یکدست */
.mission-list,.achievement-list,.mastery-list,.leader-list,
.weekly-challenge-list,.market-grid,.buff-grid{gap:10px;}
.mission-card,.achievement-card,.weekly-challenge-card{padding:13px;border-radius:20px;}
/* دکمهٔ جایزه همیشه تمام‌عرض و ته کارت */
.mission-card .modal-actions,.achievement-card .modal-actions{margin-top:10px;}
.mission-card .modal-actions button,.achievement-card .modal-actions button{width:100%;}

/* ۴) کارتِ «آمادهٔ دریافت» چشمگیر باشد (چون حالا بالای لیست است) */
.mission-card:has(.primary-button),.achievement-card:has(.primary-button),
.weekly-challenge-card.complete{
  border-color:rgba(120,224,163,.45);
  box-shadow:0 0 0 1px rgba(120,224,163,.18) inset,0 10px 26px rgba(0,0,0,.28);
}

/* ۵) فروشگاه: کارت‌های هم‌قد و قیمت چسبیده به پایین */
.item-card{min-height:0;}
.item-card .item-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.item-card .item-meta button{flex:0 0 auto;}

/* ============ بج قرمز روی زیرتب‌ها ============ */
.segmented button{position:relative;}
.tab-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;display:grid;place-items:center;z-index:2;
  font-size:9.5px;font-weight:800;font-style:normal;line-height:1;
  color:#fff;background:#e23b3b;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 8px rgba(226,59,59,.6);}

/* ============ نوار زیرتب روی دسکتاپ (بدون لمس) ============ */
@media (hover:hover) and (pointer:fine){
  /* روی کامپیوتر اسکرول افقی سخت است، پس تب‌ها می‌پیچند و همه دیده می‌شوند */
  .segmented.scroll-tabs{flex-wrap:wrap !important;overflow-x:visible !important;
    row-gap:6px;justify-content:flex-start;}
  .segmented.scroll-tabs > button{flex:1 1 auto;min-width:104px;}
  /* اسکرول‌بار نازک برای هر جای دیگری که افقی اسکرول می‌شود */
  .segmented.scroll-tabs::-webkit-scrollbar{height:6px;display:block;}
  .segmented.scroll-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;}
}

/* ============ آیکون ? روی کارت منطقهٔ اکتشاف ============ */
.region-card{position:relative;}
.region-help{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;padding:0;z-index:4;cursor:pointer;
  font-size:13px;font-weight:800;line-height:1;color:#dfe9ff;
  background:rgba(60,120,220,.22);border:1px solid rgba(130,170,255,.5);
  box-shadow:0 0 8px rgba(90,140,240,.35);}
.region-help:hover,.region-help:active{background:rgba(80,140,240,.4);}

/* جکپات صندوق */
.chest-jackpot{font-size:10.5px;color:#ffd76b;margin:-2px 0 8px;font-weight:700;}
.jackpot-note{margin-top:10px;padding:10px 12px;border-radius:14px;font-size:12px;
  color:#ffe6a6;background:rgba(255,207,92,.1);border:1px solid rgba(255,207,92,.32);}
.jackpot-note small{display:block;margin-top:4px;color:var(--muted);font-size:10.5px;}

/* بونس واقعی همراه در سطح فعلی */
.pet-now{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5;}
.pet-now b{color:#6ee7a0;}

/* ============ تنظیم اعلان‌ها ============ */
.notify-list{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
.notify-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 13px;border-radius:15px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--border);cursor:pointer;}
.notify-row input{width:20px;height:20px;accent-color:#4ada80;cursor:pointer;}

/* ============ کارت آموزش «کارهای اولت» ============ */
.onboarding-card{padding:15px;border-radius:22px;
  background:radial-gradient(circle at 88% 6%,rgba(255,207,92,.16),transparent 46%),
             linear-gradient(150deg,rgba(26,52,34,.96),rgba(7,20,13,.98));
  border:1px solid rgba(242,193,91,.34);box-shadow:0 14px 34px rgba(0,0,0,.3);}
.ob-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.ob-head b{color:#ffe6a6;font-size:13px;}
.onboarding-card .progress{margin-bottom:10px;}
.ob-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.ob-chip{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:15px;
  background:rgba(255,255,255,.06);border:1px solid var(--border);opacity:.5;}
.ob-chip.done{opacity:1;border-color:rgba(120,224,163,.5);background:rgba(74,218,128,.14);}
.ob-chip.now{opacity:1;border-color:var(--gold,#e9c46a);background:rgba(242,193,91,.16);
  animation:ob-pulse 1.8s ease-in-out infinite;}
@keyframes ob-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,193,91,.5)}50%{box-shadow:0 0 0 6px rgba(242,193,91,0)}}
.ob-hint{margin:0 0 11px;font-size:12px;line-height:1.75;color:var(--muted);}
.ob-hint b{color:var(--text);font-size:13.5px;}
.ob-actions{display:flex;gap:8px;align-items:center;}
.ob-actions .primary-button{flex:1;}
@media (prefers-reduced-motion: reduce){.ob-chip.now{animation:none}}

/* ============ صفحهٔ آمار من ============ */
.stat-title{margin:16px 0 6px;font-size:13px;font-weight:800;color:#ffe6a6;
  padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.08);}
.stat-bar{margin:9px 0 12px;}
.stat-bar-head{display:flex;justify-content:space-between;align-items:center;
  font-size:12px;margin-bottom:5px;}
.stat-bar-head b{color:#6ee7a0;}
.stat-bar small{display:block;margin-top:4px;font-size:10.5px;color:var(--muted);}

/* ===================== ضیافت اتحاد (v3.6.0) ===================== */
.feast-section .feast-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted, #9fb3a5);
}
.feast-card {
  background: linear-gradient(150deg, rgba(255, 196, 92, .12), rgba(16, 38, 26, .55));
  border: 1px solid rgba(255, 196, 92, .28);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
}
.feast-card .feast-desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted, #9fb3a5);
}
.feast-picker {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  max-height: 46vh;
  overflow-y: auto;
}
.feast-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name controls" "meta controls";
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}
.feast-row .feast-fruit { grid-area: name; font-weight: 600; }
.feast-row small { grid-area: meta; font-size: 11px; color: var(--muted, #9fb3a5); }
.feast-row .qty-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: 6px;
}
.feast-row .feast-qty {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.feast-total {
  text-align: center;
  font-size: 14px;
  padding: 8px 0 2px;
}
.feast-total b { color: var(--gold, #ffc45c); }

/* ===================== رویداد غافلگیرکنندهٔ جنگل (v3.7.0) ===================== */
.event-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon copy" "button button";
  align-items: center;
  gap: 10px 12px;
  padding: 14px;
  margin: 0 0 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  animation: eventPulse 2.4s ease-in-out infinite;
}
.event-alert.danger {
  border-color: rgba(255, 106, 82, .45);
  background: linear-gradient(150deg, rgba(255, 106, 82, .18), rgba(28, 14, 12, .6));
}
.event-alert.lucky {
  border-color: rgba(255, 196, 92, .4);
  background: linear-gradient(150deg, rgba(255, 196, 92, .16), rgba(16, 38, 26, .6));
  animation: none;
}
.event-alert .event-icon { grid-area: icon; font-size: 30px; line-height: 1; }
.event-alert .event-copy { grid-area: copy; min-width: 0; }
.event-alert .event-copy h3 { margin: 0 0 3px; font-size: 15px; }
.event-alert .event-copy p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--muted, #9fb3a5); }
.event-alert .event-timer { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.event-alert.danger .event-timer { color: #ff9c86; }
.event-alert button { grid-area: button; width: 100%; margin-top: 2px; }
@keyframes eventPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 82, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 106, 82, .13); }
}
@media (prefers-reduced-motion: reduce) {
  .event-alert { animation: none; }
}

/* ===================== قلب جنگل (v3.8.0) ===================== */
.heart-hero {
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(126, 231, 160, .28);
  background: linear-gradient(150deg, rgba(126, 231, 160, .14), rgba(10, 30, 20, .6));
}
.heart-holder {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.heart-holder .heart-crown { font-size: 30px; line-height: 1; }
.heart-holder strong { font-size: 16px; }
.heart-holder p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted, #9fb3a5); }
.heart-holder.me strong { color: #ffd76a; }
.heart-holder.empty .heart-crown { opacity: .7; }

.heart-compare { margin: 14px 0 10px; }
.heart-bar {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 106, 82, .35);
}
.heart-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7ee7a0, #4fc98a);
  transition: width .4s ease;
}
.heart-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.heart-compare small {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--muted, #9fb3a5);
}
.heart-warn {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: #ffb08f;
}
.panel-badge.crown {
  background: transparent;
  font-size: 15px;
  line-height: 1;
}

/* ============ icon system v3.9 ============
   Replaces UI-chrome emoji with the inline SVG sprite in index.html.
   Emoji are drawn by the OS: they look different on every device, ignore
   currentColor so they cannot follow the theme or dim when disabled, and
   their varying metrics knock rows out of alignment. These do none of that.
   Game content (tree species, item flavour) keeps its emoji on purpose. */
.wl-icon{
  width:1.15em;height:1.15em;flex:none;
  display:inline-block;vertical-align:-.19em;
  color:inherit;fill:none;stroke:none;
  /* stops a long label from squashing the glyph in a flex row */
  min-width:1.15em;
}
.wl-icon>use{color:inherit;}

/* Semantic tints — resources keep their identity without emoji colour.
   Each is blended toward --text rather than set to a flat hex. --text follows
   Telegram's theme (light text on the dark default, dark text on a light
   client), so the same declaration darkens the tint on a light background and
   lightens it on a dark one. A flat #f0c05a measured 1.7:1 against a white
   Telegram theme, i.e. invisible; this keeps every tint above 4:1 in both. */
.wl-icon.i-gold{color:color-mix(in srgb,#f0c05a 62%,var(--text));}
.wl-icon.i-wood{color:color-mix(in srgb,#c08e5e 66%,var(--text));}
.wl-icon.i-fruit{color:color-mix(in srgb,#e2685f 70%,var(--text));}
.wl-icon.i-fame{color:color-mix(in srgb,#e9c46a 62%,var(--text));}
.wl-icon.i-star{color:color-mix(in srgb,#f2c94c 60%,var(--text));}
.wl-icon.i-ok{color:var(--success);}
.wl-icon.i-warn{color:var(--warning);}
.wl-icon.i-danger{color:var(--danger);}
.wl-icon.i-muted{color:var(--muted);}
.wl-icon.i-accent{color:var(--accent);}

/* sizes */
.wl-icon.i-sm{width:.95em;height:.95em;min-width:.95em;}
.wl-icon.i-lg{width:1.5em;height:1.5em;min-width:1.5em;}
.wl-icon.i-xl{width:2.1em;height:2.1em;min-width:2.1em;}

/* resource chips: icon + number on one baseline, digits in a tabular column
   so the row does not jitter as values change */
.resource-chip{display:flex;align-items:center;gap:6px;}
.resource-chip strong{font-variant-numeric:tabular-nums;}

/* bottom nav: outline icon that fills in on the active tab */
.bottom-nav .nav-item .wl-icon{width:23px;height:23px;min-width:23px;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), color .18s ease;}
.bottom-nav .nav-item.active .wl-icon{transform:translateY(-2px) scale(1.06);}
.bottom-nav .nav-item:not(.active) .wl-icon{color:var(--muted);}

/* round buttons in the top bar */
.round-button .wl-icon{width:19px;height:19px;min-width:19px;}

@media (prefers-reduced-motion: reduce){
  .bottom-nav .nav-item .wl-icon{transition:none;}
}

/* .state-icon sets font-size:56px for the old emoji, so an em-sized icon would
   render at 117px. Pin it instead. */
.state-icon .wl-icon{width:58px;height:58px;min-width:58px;}

/* ============ rarity system v3.9 ============
   Rarity was previously only a word in the subtitle, so a legendary tree looked
   exactly like a common one. Now it reads at a glance from the frame and the
   medallion ring — the cheapest way to make a collection feel worth collecting.
   Colours are hue-separated so they stay distinguishable, and the glow is
   reserved for epic and above so it still means something. */
:root{
  --r-common:#7d8f7f;
  --r-rare:#5aa9e6;
  --r-epic:#b47ae0;
  --r-legendary:#e9b44d;
}
.tree-card{position:relative;border:1px solid var(--border);
  transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease;}
.tree-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--rarity,transparent) 12%,transparent),transparent 55%);}
.tree-card.rarity-common{--rarity:var(--r-common);}
.tree-card.rarity-rare{--rarity:var(--r-rare);}
.tree-card.rarity-epic{--rarity:var(--r-epic);}
.tree-card.rarity-legendary{--rarity:var(--r-legendary);}
.tree-card.rarity-rare,
.tree-card.rarity-epic,
.tree-card.rarity-legendary{border-color:color-mix(in srgb,var(--rarity) 45%,transparent);}
.tree-card.rarity-epic{box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--rarity) 22%,transparent) inset;}
.tree-card.rarity-legendary{box-shadow:0 12px 34px rgba(0,0,0,.32),0 0 22px color-mix(in srgb,var(--rarity) 22%,transparent);}

/* the species emoji becomes a struck medallion instead of a floating glyph */
.tree-card-emoji{
  position:relative;display:grid;place-items:center;
  width:56px;height:56px;flex:none;font-size:28px;line-height:1;
  border-radius:18px;
  background:radial-gradient(circle at 35% 28%,
    color-mix(in srgb,var(--rarity,var(--r-common)) 26%,transparent),
    color-mix(in srgb,var(--surface-solid) 92%,#000 8%) 70%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rarity,var(--r-common)) 55%,transparent),
             0 6px 16px rgba(0,0,0,.3);
}
.tree-card-emoji[data-rarity="legendary"]::after,
.tree-card-emoji[data-rarity="epic"]::after{
  content:"";position:absolute;inset:-3px;border-radius:21px;
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--rarity) 70%,transparent),transparent 70%);
  opacity:.55;z-index:-1;animation:wl-rarity-spin 6s linear infinite;
}
@keyframes wl-rarity-spin{to{transform:rotate(360deg)}}

/* status chips: icon and label share a baseline, chip colour drives the icon */
.status-chip{display:inline-flex;align-items:center;gap:5px;}
.status-chip .wl-icon{width:14px;height:14px;min-width:14px;}
.status-chip.good .wl-icon{color:var(--success);}
.status-chip.bad .wl-icon{color:var(--danger);}
.status-chip:not(.good):not(.bad) .wl-icon{color:var(--muted);}

/* buttons that lead with an icon */
.primary-button,.secondary-button,.small-button,.danger-button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.primary-button .wl-icon,.secondary-button .wl-icon,
.small-button .wl-icon,.danger-button .wl-icon{width:1.05em;height:1.05em;min-width:1.05em;}

@media (prefers-reduced-motion: reduce){
  .tree-card-emoji[data-rarity]::after{animation:none;}
}

/* ============ star store v3.9 ============
   The store is the only screen we ask people to spend on, so it gets the most
   deliberate treatment: one accent (Telegram's star gold), impact stated on
   every card, and price given the largest type in the card. */
.star-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 18px 16px;border-radius:24px;margin-bottom:14px;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(242,201,76,.20), transparent 58%),
    linear-gradient(155deg, color-mix(in srgb,var(--surface-solid) 96%,#f2c94c 4%), var(--surface-solid));
  border:1px solid color-mix(in srgb,#f2c94c 26%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.star-hero .eyebrow{display:block;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#f2c94c;margin-bottom:4px;}
.star-hero h2{margin:0 0 5px;font-size:19px;}
.star-hero p{margin:0;color:var(--muted);font-size:12px;line-height:1.7;}
.star-hero-art{flex:none;color:#f2c94c;opacity:.9;}
.star-hero-art .wl-icon{width:46px;height:46px;min-width:46px;
  filter:drop-shadow(0 4px 14px rgba(242,201,76,.45));}
.star-hero.has-pass{border-color:color-mix(in srgb,var(--success) 40%,transparent);}
.star-hero.has-pass .eyebrow{color:var(--success);}

.star-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px;}
.star-card{
  display:flex;flex-direction:column;gap:7px;
  padding:14px 13px 13px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
.star-card:active{transform:translateY(-3px);}
.star-card h3{margin:0;font-size:14px;line-height:1.5;}
.star-card p{margin:0;flex:1;color:var(--muted);font-size:11.5px;line-height:1.75;}
.star-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.star-art{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:15px;
  background:color-mix(in srgb,var(--impact,var(--accent)) 16%,var(--surface-2));
  box-shadow:inset 0 0 0 1.4px color-mix(in srgb,var(--impact,var(--accent)) 42%,transparent);
  color:var(--impact,var(--accent));
}
/* the impact tag is information, not decoration: it is the promise that this
   purchase cannot buy an advantage over another player */
.impact-tag{
  font-size:9.5px;line-height:1.6;padding:2px 7px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--impact,var(--accent)) 16%,transparent);
  color:var(--impact,var(--accent));
}
.star-card.impact-cosmetic{--impact:#b47ae0;}
.star-card.impact-convenience{--impact:#5aa9e6;}
.star-card.impact-progression{--impact:#e9b44d;}

.star-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.star-price{display:inline-flex;align-items:center;gap:5px;color:#f2c94c;}
.star-price b{font-size:16px;font-variant-numeric:tabular-nums;}
.owned-count{color:var(--muted);font-size:10px;}
.star-buy{width:100%;padding:9px;font-size:13px;border-radius:14px;}
.star-card.is-owned{opacity:.62;}
.star-card.is-owned .star-buy{background:var(--surface-2);color:var(--muted);}

/* panel / tile art: the icon sits in a tinted plate so the card has a focal
   point at a glance. Server-driven glyphs (boss, live event) still render as
   emoji here, so the plate has to look right around both. */
.panel-icon,.tile-icon{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:15px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--accent) 20%,transparent),
    color-mix(in srgb,var(--surface-2) 88%,transparent));
  box-shadow:inset 0 0 0 1.2px color-mix(in srgb,var(--accent) 24%,transparent);
  font-size:22px;line-height:1;
}
.panel-icon .wl-icon,.tile-icon .wl-icon{width:23px;height:23px;min-width:23px;color:var(--text);}
.panel-card:hover .panel-icon .wl-icon{color:#fff;}

/* per-panel accents so the grid is scannable instead of twelve identical plates */
.land-v2-panel .panel-icon{--accent:#6fae6a;}
.world-v2-panel .panel-icon{--accent:#4f9dd6;}
.town-panel .panel-icon{--accent:#c9944a;}
.duel-panel .panel-icon{--accent:#d9594d;}
.raid-panel .panel-icon{--accent:#7a6fd0;}
.workshop-panel .panel-icon{--accent:#b0803f;}
.collection-panel .panel-icon{--accent:#57b08a;}
.event-panel .panel-icon{--accent:#d2679c;}
.heart-panel .panel-icon{--accent:#4ec98a;}
.panel-card[data-progress-tab="clan"] .panel-icon{--accent:#8a9ad6;}
.panel-badge.crown .wl-icon{width:15px;height:15px;min-width:15px;}