*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d0f;--bg2:#13131a;--bg3:#1a1a24;--bg4:#21212e;
  --gold:#c8962a;--gold2:#e8b84b;--gold-dim:#c8962a33;
  --text:#e8e6df;--muted:#888;--border:#ffffff18;
  --attack:#e05252;--attack-dim:#e0525220;
  --defense:#5baee8;--defense-dim:#5baee820;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Barlow',sans-serif;min-height:100vh;overflow-x:hidden}

/* ── Header ── */
.site-header{background:linear-gradient(180deg,#000 0%,var(--bg2) 100%);border-bottom:1px solid var(--gold-dim);padding:0 2rem;position:sticky;top:0;z-index:100}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:2rem;height:64px}
.logo{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--gold);letter-spacing:.08em;white-space:nowrap}
.logo span{color:var(--text);font-weight:400}
.header-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.nav-link{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;text-decoration:none;transition:color .2s}
.nav-link:hover{color:var(--gold)}
.nav-icon{width:20px;height:20px;border-radius:4px;object-fit:cover}

/* ── Main layout ── */
.main{max-width:1200px;margin:0 auto;padding:2rem}

/* ── Hero status bar ── */
.hero-status{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.status-icon{font-size:28px;flex-shrink:0}
.status-info{flex:1;min-width:0}
.status-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold);font-weight:600}
.status-sub{font-size:13px;color:var(--muted);margin-top:2px}
.hero-count-badge{background:var(--gold-dim);border:1px solid var(--gold);border-radius:6px;padding:4px 14px;font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--gold);white-space:nowrap}
.status-warning{color:#e05252;font-size:13px;margin-top:4px}

/* ── Section title ── */
.section-title{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Legion config cards ── */
.legions-config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.legions-lower{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:2rem}

.legion-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:1.25rem;transition:border-color .2s}
.legion-card.purpose-attack{border-color:#e0525240}
.legion-card.purpose-defense{border-color:#5baee840}
.legion-header{display:flex;align-items:center;gap:10px;margin-bottom:.875rem}
.legion-icon{font-size:22px;flex-shrink:0}
.legion-name{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--gold)}
.legion-desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}

.purpose-toggle{display:flex;gap:6px}
.toggle-btn{flex:1;padding:7px 10px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.toggle-btn:hover{border-color:var(--gold);color:var(--text)}
.toggle-btn.active-attack{background:var(--attack-dim);border-color:var(--attack);color:var(--attack)}
.toggle-btn.active-defense{background:var(--defense-dim);border-color:var(--defense);color:var(--defense)}

.purpose-fixed{display:flex;align-items:center;gap:8px}
.purpose-fixed-badge{background:var(--defense-dim);border:1px solid #5baee840;border-radius:6px;padding:7px 14px;font-size:12px;font-weight:700;color:var(--defense)}
.purpose-fixed-note{font-size:11px;color:var(--muted)}

/* ── Troop filter ── */
.troop-filter{margin-top:8px}
.troop-filter-label{font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.troop-toggle{display:flex;gap:4px}
.troop-btn{flex:1;min-width:0;padding:5px 4px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;white-space:nowrap}
.troop-btn:hover{border-color:var(--gold);color:var(--text)}
.troop-btn.active-cavalry{background:#c8962a22;border-color:#c8962a;color:#c8962a}
.troop-btn.active-footmen{background:#c0392b22;border-color:#e05252;color:#e05252}
.troop-btn.active-archer{background:#1a6fa822;border-color:#5baee8;color:#5baee8}
.troop-btn.active-mixed{background:#1e8c5a22;border-color:#3eca8f;color:#3eca8f}

/* ── Generate button ── */
.generate-wrap{text-align:center;margin-bottom:2.5rem;display:flex;flex-direction:column;align-items:center;gap:8px}
.generate-btn{padding:14px 40px;background:linear-gradient(135deg,#c8962a,#e8b84b);border:none;border-radius:8px;color:#000;font-family:'Cinzel',serif;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:.06em;transition:opacity .2s,transform .15s;display:inline-flex;align-items:center;gap:10px}
.generate-btn:hover{opacity:.9;transform:translateY(-1px)}
.generate-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.regen-hint{font-size:12px;color:var(--muted);display:none}

/* ── Result cards ── */
.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.results-lower{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:1.5rem}

.result-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.result-card.purpose-attack{border-top:3px solid var(--attack)}
.result-card.purpose-defense{border-top:3px solid var(--defense)}
.result-card.empty{opacity:.5}
.result-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem .625rem;border-bottom:1px solid var(--border)}
.result-legion-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--gold)}
.result-purpose-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:100px}
.badge-attack{background:var(--attack-dim);color:var(--attack);border:1px solid #e0525240}
.badge-defense{background:var(--defense-dim);color:var(--defense);border:1px solid #5baee840}
.result-body{padding:1rem}

/* ── Hero portraits ── */
.combo-heroes{display:flex;gap:8px;justify-content:center;margin-bottom:.875rem}
.hero-slot{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}
.hero-portrait{width:64px;height:64px;border-radius:8px;object-fit:cover;border:2px solid var(--border);background:var(--bg4)}
.hero-portrait.has-skin{border-color:var(--gold);box-shadow:0 0 10px var(--gold-dim)}
.hero-name-label{font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:72px}

/* ── Combo meta ── */
.combo-meta{display:flex;align-items:center;gap:8px;margin-bottom:.625rem;flex-wrap:wrap}
.tier-badge{font-family:'Cinzel',serif;font-size:14px;font-weight:700;width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-S{background:#ffd70022;color:#ffd700;border:1px solid #ffd70044}
.tb-A{background:#c0c0c022;color:#c0c0c0;border:1px solid #c0c0c044}
.tb-B{background:#cd7f3222;color:#cd7f32;border:1px solid #cd7f3244}
.tb-C{background:#66667722;color:#888;border:1px solid #66667744}
.troop-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:100px}
.tc-CAVALRY{background:#c8962a22;color:#c8962a}
.tc-FOOTMEN{background:#c0392b22;color:#e05252}
.tc-ARCHER{background:#1a6fa822;color:#5baee8}
.tc-MIXED{background:#1e8c5a22;color:#3eca8f}
.score-val{margin-left:auto;font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--gold)}

/* ── Flags ── */
.combo-flags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:.5rem}
.flag-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.04em}
.flag-recovery{background:#1e8c5a22;color:#3eca8f}
.flag-immune{background:#6b3fa022;color:#a66bd4}
.flag-control{background:#c8962a22;color:var(--gold)}
.flag-debuff{background:#c0392b22;color:#e05252}
.flag-damage{background:#1a6fa822;color:#5baee8}
.flag-skin{background:var(--gold-dim);color:var(--gold2);border:1px solid #c8962a33}
.flag-new{background:#44444422;color:#777;border:1px solid #66666633;font-size:9px}

/* ── Score breakdown ── */
.score-breakdown{background:var(--bg4);border-radius:6px;padding:.5rem .75rem;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px}
.bd-item{font-size:10px;color:var(--muted);display:flex;justify-content:space-between}
.bd-item span{color:var(--text);font-weight:600}

.empty-result{padding:2rem;text-align:center;color:var(--muted);font-size:13px}
.empty-result .empty-icon{font-size:28px;margin-bottom:.5rem}

/* ── Save ── */
.save-wrap{text-align:center;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:8px}
.save-btn{padding:11px 32px;background:transparent;border:1px solid var(--gold);border-radius:8px;color:var(--gold);font-family:'Cinzel',serif;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:.04em;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.save-btn:hover{background:var(--gold-dim)}
.save-btn:disabled{opacity:.4;cursor:not-allowed}
.save-status{font-size:12px;color:var(--muted)}

/* ── Lock button (per result card) ── */
.lock-btn{background:transparent;border:1px solid var(--border);border-radius:5px;padding:3px 9px;font-size:11px;font-weight:700;font-family:'Barlow',sans-serif;letter-spacing:.04em;cursor:pointer;color:var(--muted);transition:all .15s;white-space:nowrap;flex-shrink:0}
.lock-btn:hover{border-color:var(--gold);color:var(--gold)}
.lock-btn.locked{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.result-card.card-locked{box-shadow:0 0 0 1px rgba(200,150,42,0.35);}

/* ── Loading overlay ── */
.loading-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000b;z-index:300;align-items:center;justify-content:center;flex-direction:column;gap:1rem}
.loading-overlay.show{display:flex}
.spinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:'Cinzel',serif;font-size:14px;color:var(--gold);letter-spacing:.08em}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg3);border:1px solid var(--gold);border-radius:8px;padding:10px 20px;font-size:13px;font-weight:600;color:var(--text);z-index:400;transition:transform .3s;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── Ads ── */
.ad-container{display:flex;justify-content:center;align-items:center;width:100%;margin:1rem 0}
.ad-container .adsbygoogle{display:block;margin:0 auto !important;width:100%;max-width:728px}
.vip-hide{display:none !important}
@media(max-width:768px){.ad-container .adsbygoogle{max-width:100%}}

/* ── Free mode banner ── */
.free-banner{background:var(--bg3);border:1px solid rgba(200,150,42,0.25);border-radius:10px;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.free-banner-left{flex:1;min-width:0}
.free-banner-title{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--gold);margin-bottom:3px}
.free-banner-sub{font-size:12px;color:var(--muted);line-height:1.5}
.free-banner-cta{padding:8px 18px;background:linear-gradient(135deg,#c8962a,#e8b84b);border-radius:7px;color:#000;font-family:'Cinzel',serif;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;letter-spacing:.04em;transition:opacity .2s}
.free-banner-cta:hover{opacity:.85}

/* ── No-heroes banner ── */
.no-heroes-banner{background:var(--bg3);border:1px solid #c8962a44;border-radius:10px;padding:1.5rem 2rem;margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.no-heroes-banner h3{font-family:'Cinzel',serif;font-size:16px;color:var(--gold);margin-bottom:.4rem}
.no-heroes-banner p{font-size:13px;color:var(--muted);line-height:1.5}
.no-heroes-banner a{color:var(--gold);text-decoration:none}
.open-picker-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:linear-gradient(135deg,#c8962a,#e8b84b);border:none;border-radius:8px;color:#0d0d0f;font-family:'Cinzel',serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;letter-spacing:.04em;transition:opacity .2s,transform .15s;flex-shrink:0}
.open-picker-btn:hover{opacity:.88;transform:translateY(-1px)}

/* ── My Heroes button (hero-status bar) ── */
.edit-heroes-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;
  background:linear-gradient(135deg,rgba(200,150,42,0.12) 0%,rgba(200,150,42,0.06) 100%);
  border:1px solid rgba(200,150,42,0.45);
  border-radius:8px;
  color:var(--gold2);
  font-family:'Cinzel',serif;
  font-size:12px;font-weight:700;
  letter-spacing:.05em;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  box-shadow:0 0 12px rgba(200,150,42,0.08);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .15s;
  position:relative;overflow:hidden;
}
.edit-heroes-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(232,184,75,0.15),transparent);
  opacity:0;transition:opacity .2s;
}
.edit-heroes-btn:hover{
  border-color:var(--gold2);
  box-shadow:0 0 20px rgba(200,150,42,0.25),inset 0 0 12px rgba(200,150,42,0.08);
  transform:translateY(-1px);
}
.edit-heroes-btn:hover::before{opacity:1}
.edit-heroes-btn .btn-icon{font-size:15px;line-height:1;filter:drop-shadow(0 0 4px rgba(200,150,42,0.6))}

/* ── Season selector ── */
.season-section{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.season-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.75rem}
.season-label{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.season-select{background:var(--bg4);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;padding:7px 14px;cursor:pointer;outline:none;transition:border-color .15s;appearance:auto}
.season-select:hover,.season-select:focus{border-color:var(--gold)}
.season-count{font-size:12px;color:var(--muted)}

/* ── Footer ── */
.site-footer{background:var(--bg2);border-top:1px solid var(--border);padding:1.5rem 2rem;text-align:center;margin-top:3rem}
.footer-logo-img{width:32px;height:32px;border-radius:4px;margin-bottom:.5rem}
.footer-text{font-size:12px;color:var(--muted);line-height:1.8}

/* ── Responsive ── */
@media(max-width:768px){
  .season-controls{gap:.625rem}
  .season-select{font-size:13px;padding:6px 10px}

  /* Header */
  .site-header{padding:0 1rem}
  .header-inner{height:auto;min-height:52px;flex-wrap:wrap;gap:8px;padding:8px 0}
  .logo{font-size:15px}
  .header-right{gap:.5rem}
  .nav-link{font-size:11px;gap:4px}
  .nav-icon{width:16px;height:16px}

  /* Main */
  .main{padding:.75rem}

  /* Hero status */
  .hero-status{flex-direction:column;align-items:stretch;gap:.625rem;padding:1rem}
  .hero-status .status-icon{display:none}
  .hero-count-badge{font-size:16px;padding:4px 12px;text-align:center}

  /* Config grids → single column */
  .legions-config-grid,
  .legions-lower{grid-template-columns:1fr!important;gap:10px;margin-bottom:10px}

  /* Legion card */
  .legion-card{padding:1rem}
  .purpose-toggle{gap:8px}
  .toggle-btn{padding:8px 6px;font-size:12px}

  /* Free banner */
  .free-banner{flex-direction:column;gap:.75rem}
  .free-banner-cta{width:100%;text-align:center;padding:10px}

  /* Troop filter */
  .troop-btn{font-size:10px;padding:5px 2px}

  /* Generate button */
  .generate-wrap{padding:0 .25rem}
  .generate-btn{width:100%;justify-content:center;font-size:14px;padding:13px 20px}

  /* Results grids → single column */
  .results-grid,
  .results-lower{grid-template-columns:1fr!important;gap:12px}

  /* Result card */
  .result-card{border-radius:10px}
  .result-header{padding:.75rem .875rem .5rem;flex-wrap:wrap;gap:6px}
  .result-legion-name{font-size:12px}
  .result-body{padding:.875rem}

  /* Hero portraits row — spread evenly */
  .combo-heroes{gap:6px}
  .hero-portrait{width:72px;height:72px;border-radius:7px}
  .hero-name-label{font-size:8px;max-width:76px}

  /* Combo meta */
  .combo-meta{gap:6px}
  .score-val{font-size:13px}

  /* Score breakdown → 2 columns */
  .score-breakdown{grid-template-columns:repeat(2,1fr);gap:4px 12px;padding:.5rem}

  /* Save button */
  .save-wrap{padding:0 .25rem}
  .save-btn{width:100%;justify-content:center}

  /* Section title */
  .section-title{font-size:12px}

  /* No-heroes banner — button full width */
  .no-heroes-banner{padding:1.25rem}
  .open-picker-btn{width:100%;justify-content:center}

  /* Hero status — My Heroes button full width in column */
  .edit-heroes-btn{width:100%;justify-content:center}

  /* Hero name label — minimum readable size */
  .hero-name-label{font-size:9px}

  /* Purpose fixed note — hide on very narrow screens */
  .purpose-fixed-note{display:none}

  /* Interstitial */
  .interstitial-box{border-radius:12px;margin:.5rem}
  .interstitial-header{flex-wrap:wrap;gap:6px;padding:.75rem 1rem}
  .interstitial-title{font-size:11px}
  .interstitial-ad{padding:.875rem 1rem}
}

/* ── Interstitial overlay ── */
.interstitial-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.92);
  z-index:500;display:none;align-items:center;justify-content:center;padding:1rem
}
.interstitial-overlay.show{display:flex}
.interstitial-box{
  background:var(--bg2);border:1px solid rgba(200,150,42,.3);
  border-radius:16px;width:100%;max-width:500px;overflow:hidden
}
.interstitial-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.875rem 1.25rem;border-bottom:1px solid var(--border)
}
.interstitial-title{
  font-family:'Cinzel',serif;font-size:13px;font-weight:700;
  color:var(--gold);letter-spacing:.06em
}
.interstitial-timer{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.interstitial-timer-label{white-space:nowrap}
.timer-ring{position:relative;width:32px;height:32px;flex-shrink:0}
.timer-ring svg{transform:rotate(-90deg)}
.timer-track{fill:none;stroke:var(--border);stroke-width:3}
.timer-fill{
  fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:82;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear
}
.timer-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--gold)
}
.interstitial-ad{
  padding:1rem 1.25rem;min-height:120px;
  display:flex;align-items:center;justify-content:center
}
.interstitial-footer{
  padding:.625rem 1.25rem;text-align:center;
  font-size:11px;color:var(--muted);border-top:1px solid var(--border)
}