/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:    #c89b3c;
  --gold-lt: #f0e6a2;
  --dark:    #0a0c10;
  --card:    #12161e;
  --border:  #2a2f3d;
  --text:    #d4cfc4;
  --muted:   #7a7a8c;
  --blue:    #4d9de0;
  --green:   #5cb85c;
  --red:     #e05c5c;
  --purple:  #9b5de5;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--dark);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lt); }

/* ─── Nav ───────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,12,16,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}

.nav-brand {
  font-size: 1.2rem; font-weight: 700;
  color: var(--gold);
  letter-spacing: .05em;
  margin-right: auto;
}

nav a {
  font-size: .85rem; font-weight: 500;
  color: var(--muted);
  transition: color .2s;
}
nav a:hover, nav a.active { color: var(--gold-lt); }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  z-index: 200; width: 0%; transition: width .2s;
}

/* ─── TOC Sidebar ───────────────────────────────────────────────── */
.toc {
  position: fixed;
  left: max(1rem, calc(50% - 560px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: .4rem 0;
}

@media (max-width: 1260px) { .toc { display: none; } }

.toc::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 12px; bottom: 12px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}

.toc-item {
  position: relative;
  display: flex; align-items: center; gap: .65rem;
  padding: .38rem 0;
  text-decoration: none;
  color: var(--muted);
  transition: color .2s;
}
.toc-item:hover { color: var(--gold-lt); }
.toc-item.active { color: var(--gold-lt); }
.toc-item.read   { color: var(--text); }

.toc-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--dark);
  flex-shrink: 0;
  position: relative; z-index: 1;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.toc-item.read   .toc-dot { border-color: rgba(200,155,60,.5); background: rgba(200,155,60,.2); }
.toc-item.active .toc-dot {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 10px rgba(200,155,60,.6);
}

.toc-label {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .04em; white-space: nowrap;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toc:hover .toc-label,
.toc-item.active .toc-label { opacity: 1; transform: translateX(0); }

/* ─── Champion Browser ──────────────────────────────────────────── */
.champ-browser { margin-top: 2.5rem; }

.champ-filters {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.cost-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.cost-tab {
  padding: .4rem .9rem; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card); color: var(--muted);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.cost-tab:hover  { border-color: var(--gold); color: var(--text); }
.cost-tab.active { border-color: var(--gold); background: rgba(200,155,60,.15); color: var(--gold-lt); }

.cgem {
  display: inline-block; min-width: 1.4em; text-align: center;
  font-weight: 700;
}
.c1{color:#9e9e9e;}.c2{color:#5cb85c;}.c3{color:#4d9de0;}.c4{color:#9b5de5;}.c5{color:#c89b3c;}

.trait-filter-wrap { position: relative; }
.trait-filter-btn {
  padding: .4rem .9rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); font-size: .82rem; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.trait-filter-btn:hover { border-color: var(--gold); color: var(--text); }

.trait-dropdown {
  position: absolute; top: calc(100% + .4rem); left: 0; z-index: 200;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: .5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;
  min-width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.trait-dropdown.hidden { display: none; }
.trait-dd-item {
  padding: .32rem .7rem; border-radius: 5px; font-size: .75rem;
  border: 1px solid transparent; cursor: pointer;
  background: transparent; color: var(--muted);
  text-align: left; transition: all .15s;
}
.trait-dd-item:hover  { border-color: var(--tc,#888); color: #fff; background: rgba(128,128,128,.1); }
.trait-dd-item.active { border-color: var(--tc,var(--gold)); color: #fff;
                         background: rgba(128,128,128,.15); }

/* Champion grid */
.champ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .75rem;
}

.champ-card {
  position: relative; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .6rem .5rem .5rem;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  cursor: pointer; transition: border-color .2s, transform .15s, box-shadow .2s;
  user-select: none;
}
.champ-card::after {
  content: '▸';
  position: absolute; bottom: .3rem; right: .35rem;
  font-size: .58rem; color: var(--gold); opacity: .45;
  transition: opacity .2s;
  pointer-events: none;
}
.champ-card:hover {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(200,155,60,.25);
}
.champ-card:hover::after { opacity: 1; }

.champ-cost-badge {
  position: absolute; top: .35rem; right: .35rem;
  font-size: .6rem; font-weight: 800;
  color: #000; padding: .1rem .32rem; border-radius: 4px;
  line-height: 1.2;
}

.champ-portrait {
  width: 72px; height: 72px; border-radius: 8px;
  object-fit: cover; background: #1a1f2e;
  border: 2px solid var(--border); transition: border-color .2s;
}
.champ-card:hover .champ-portrait { border-color: var(--gold); }

.champ-name {
  font-size: .75rem; font-weight: 700;
  color: var(--text); text-align: center; line-height: 1.2;
}

.champ-traits {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem;
}
.champ-trait {
  font-size: .58rem; padding: .1rem .35rem; border-radius: 3px;
  border: 1px solid var(--tc, #888);
  color: var(--tc, #888); background: rgba(128,128,128,.1);
  white-space: nowrap;
}

/* Champion modal */
.champ-modal-header {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.champ-modal-portrait {
  width: 90px; height: 90px; border-radius: 10px;
  object-fit: cover; border: 2px solid var(--gold); flex-shrink: 0;
  background: #1a1f2e;
}
.champ-modal-info h2 { color: var(--gold-lt); margin-bottom: .4rem; font-size: 1.4rem; }
.champ-modal-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.champ-role-badge {
  font-size: .72rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 99px; background: rgba(200,155,60,.2);
  border: 1px solid var(--gold); color: var(--gold-lt);
}
.cost-star { font-size: .82rem; color: var(--gold); font-weight: 700; }

.champ-modal-traits { display: flex; flex-wrap: wrap; gap: .35rem; }
.m-trait-pill {
  font-size: .75rem; padding: .2rem .6rem; border-radius: 5px;
  border: 1px solid var(--tc, #888); color: var(--tc, #888);
  background: rgba(128,128,128,.12);
}

.champ-items-row {
  display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem;
}
.champ-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--muted); text-align: center; max-width: 70px;
}
.champ-item img {
  width: 48px; height: 48px; border-radius: 6px;
  border: 1px solid var(--border); background: #1a1f2e;
  object-fit: cover;
}

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 5rem 1.5rem 4rem;
  background: radial-gradient(ellipse at 50% 0%, #1a1600 0%, var(--dark) 70%);
  border-bottom: 1px solid var(--border);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(200,155,60,.4);
  margin-bottom: .5rem;
}

.hero .subtitle {
  font-size: 1.1rem; color: var(--muted);
  max-width: 600px; margin: 0 auto 2rem;
}

.pill-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin-bottom: 2rem;
}
.pill {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 99px; padding: .3rem .85rem;
  font-size: .78rem; color: var(--muted);
}
.pill.gold  { border-color: var(--gold);   color: var(--gold-lt); }
.pill.blue  { border-color: var(--blue);   color: var(--blue); }
.pill.green { border-color: var(--green);  color: var(--green); }

.cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, #c89b3c, #a07020);
  color: #000; font-weight: 700; font-size: 1rem;
  padding: .75rem 2rem; border-radius: 8px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(200,155,60,.35);
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(200,155,60,.5); color: #000; }

/* ─── Sections ──────────────────────────────────────────────────── */
section {
  max-width: 960px; margin: 0 auto;
  padding: 4rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

section:last-of-type { border-bottom: none; }

.section-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .4rem;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800; color: #fff;
  margin-bottom: .5rem;
}

.section-intro {
  color: var(--muted); margin-bottom: 2rem;
  max-width: 700px;
}

/* ─── Cards ─────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  transition: border-color .2s, transform .15s;
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); }

.card-icon { font-size: 1.8rem; margin-bottom: .6rem; }

.card h3 {
  font-size: 1rem; font-weight: 700;
  color: #fff; margin-bottom: .4rem;
}
.card p { font-size: .88rem; color: var(--muted); }

/* ─── Economy table ─────────────────────────────────────────────── */
.eco-table {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; margin-top: 1rem;
}
.eco-table th {
  background: #1a1f2e; color: var(--gold);
  padding: .6rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
.eco-table td {
  padding: .6rem 1rem;
  border-bottom: 1px solid #1a1f2e;
  color: var(--text);
}
.eco-table tr:last-child td { border-bottom: none; }
.eco-table tr:hover td { background: #0f1219; }

/* ─── Trait tiers ───────────────────────────────────────────────── */
.tier-row {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem;
}
.tier-badge {
  padding: .4rem 1rem; border-radius: 8px;
  font-size: .82rem; font-weight: 700;
}
.tier-badge.bronze { background: #3d2a1a; color: #cd7f32; border: 1px solid #cd7f32; }
.tier-badge.silver { background: #1e2030; color: #c0c0c0; border: 1px solid #c0c0c0; }
.tier-badge.gold   { background: #2a2000; color: var(--gold); border: 1px solid var(--gold); }
.tier-badge.prismatic { background: #1a0a2e; color: #9b5de5; border: 1px solid #9b5de5; }

/* ─── Step list ─────────────────────────────────────────────────── */
.step-list { counter-reset: step; list-style: none; margin-top: 1rem; }
.step-list li {
  counter-increment: step;
  display: flex; gap: 1rem; align-items: flex-start;
  margin-bottom: 1rem;
}
.step-list li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold); color: #000;
  font-weight: 800; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: .15rem;
}
.step-list strong { color: #fff; display: block; }
.step-list span { font-size: .88rem; color: var(--muted); }

/* ─── Do / Don't ────────────────────────────────────────────────── */
.do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-top: 1rem;
}
@media (max-width: 540px) { .do-dont { grid-template-columns: 1fr; } }

.do-box, .dont-box {
  border-radius: 10px; padding: 1rem 1.2rem;
}
.do-box   { background: #0d1f10; border: 1px solid #2a5c2a; }
.dont-box { background: #1f0d0d; border: 1px solid #5c2a2a; }

.do-box h4   { color: var(--green); margin-bottom: .5rem; }
.dont-box h4 { color: var(--red);   margin-bottom: .5rem; }

.do-box ul, .dont-box ul {
  list-style: none; padding: 0;
  font-size: .88rem;
}
.do-box li::before   { content: "✓  "; color: var(--green); }
.dont-box li::before { content: "✗  "; color: var(--red); }
.do-box li, .dont-box li { margin-bottom: .3rem; }

/* ─── Tip callout ───────────────────────────────────────────────── */
.tip {
  background: #0d1a2e; border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: .85rem 1.1rem; margin: 1rem 0;
  font-size: .88rem;
}
.tip strong { color: var(--blue); }

/* ─── Champ cost pills ──────────────────────────────────────────── */
.cost-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.cost-pill {
  padding: .3rem .9rem; border-radius: 6px;
  font-size: .82rem; font-weight: 700;
}
.cost-1 { background: #1c1c1c; color: #ccc; border: 1px solid #555; }
.cost-2 { background: #0d2200; color: #5cb85c; border: 1px solid #5cb85c; }
.cost-3 { background: #000d22; color: #4d9de0; border: 1px solid #4d9de0; }
.cost-4 { background: #1a0033; color: #9b5de5; border: 1px solid #9b5de5; }
.cost-5 { background: #2a1500; color: var(--gold); border: 1px solid var(--gold); }

/* ─── Quiz ──────────────────────────────────────────────────────── */
.quiz-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem;
  margin-top: 1rem; max-width: 600px;
}
.quiz-card h3 { color: #fff; margin-bottom: 1rem; }
.quiz-options { display: flex; flex-direction: column; gap: .5rem; }
.quiz-option {
  background: #0f1219; border: 1px solid var(--border);
  border-radius: 8px; padding: .65rem 1rem;
  cursor: pointer; font-size: .9rem; color: var(--text);
  transition: border-color .15s, background .15s;
  text-align: left;
}
.quiz-option:hover { border-color: var(--gold); background: #1a1600; }
.quiz-option.correct { background: #0d1f10; border-color: var(--green); color: var(--green); }
.quiz-option.wrong   { background: #1f0d0d; border-color: var(--red);   color: var(--red); }
.quiz-feedback { margin-top: .8rem; font-size: .88rem; min-height: 1.2em; }

/* ─── Progress tracker ──────────────────────────────────────────── */
#progress-tracker {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: .75rem 1.1rem;
  font-size: .8rem; color: var(--muted);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
#progress-tracker strong { color: var(--gold); }

/* ─── Language switcher ─────────────────────────────────────────── */
.lang-switcher {
  display: flex; align-items: center; gap: .35rem;
  margin-left: auto;
}
.lang-btn {
  background: none; border: 1px solid var(--border);
  color: var(--muted); padding: .2rem .65rem;
  border-radius: 6px; cursor: pointer;
  font-size: .78rem; font-weight: 700;
  transition: color .15s, border-color .15s, background .15s;
  line-height: 1.6;
}
.lang-btn:hover { color: var(--gold); border-color: var(--gold); }
.lang-btn.active {
  color: #000; background: var(--gold);
  border-color: var(--gold);
}

/* ─── Clickable card hint ───────────────────────────────────────── */
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--gold); }
.card-hint {
  display: block; margin-top: .75rem;
  font-size: .75rem; color: var(--gold);
  opacity: .65;
  transition: opacity .2s, color .2s;
}
.card.clickable:hover .card-hint { opacity: 1; color: var(--gold-lt); }

/* ─── Modal overlay ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-panel {
  position: relative;
  width: min(600px, 100vw);
  height: 100vh;
  background: #0e1118;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 2rem 2rem 3rem;
  transform: translateX(40px);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.open .modal-panel { transform: translateX(0); }

.modal-close {
  position: sticky; top: 0; float: right;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); font-size: 1rem;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; line-height: 1;
  transition: color .15s, border-color .15s;
  z-index: 10;
}
.modal-close:hover { color: #fff; border-color: var(--gold); }

/* ─── Modal content styles ──────────────────────────────────────── */
.modal-header {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.5rem; padding-top: .25rem;
}
.modal-header .m-icon { font-size: 2.2rem; }
.modal-header h2 { font-size: 1.5rem; color: #fff; margin: 0; }
.modal-header .m-sub { font-size: .85rem; color: var(--muted); }

.modal-section { margin-bottom: 1.75rem; }
.modal-section h3 {
  font-size: .95rem; font-weight: 700;
  color: var(--gold); letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.modal-section p { font-size: .9rem; color: var(--text); margin-bottom: .6rem; }
.modal-section ul { list-style: none; padding: 0; }
.modal-section ul li {
  font-size: .88rem; color: var(--text);
  padding: .3rem 0; padding-left: 1.2rem; position: relative;
}
.modal-section ul li::before {
  content: "▸"; position: absolute; left: 0;
  color: var(--gold); font-size: .75rem; top: .38rem;
}

.modal-table {
  width: 100%; border-collapse: collapse;
  font-size: .85rem; margin-top: .5rem;
}
.modal-table th {
  background: #1a1f2e; color: var(--gold);
  padding: .5rem .9rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
.modal-table td {
  padding: .5rem .9rem;
  border-bottom: 1px solid #1a1f2e;
  color: var(--text);
}
.modal-table tr:last-child td { border-bottom: none; }
.modal-table .up   { color: var(--green); font-weight: 700; }
.modal-table .down { color: var(--red);   font-weight: 700; }
.modal-table .zero { color: var(--muted); font-weight: 700; }

.modal-callout {
  background: #0d1a2e; border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: .8rem 1rem; margin: .75rem 0;
  font-size: .85rem; color: var(--text);
}
.modal-callout strong { color: var(--blue); }

.modal-callout.warn {
  background: #1f1600; border-color: var(--gold);
}
.modal-callout.warn strong { color: var(--gold-lt); }

.star-upgrade-summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .6rem; margin: .75rem 0 1.2rem;
}
.star-summary-tile {
  background: #11151e; border: 1px solid var(--border);
  border-radius: 8px; padding: .75rem;
}
.star-summary-k { font-size: .72rem; color: var(--muted); margin-bottom: .25rem; }
.star-summary-v { font-size: .95rem; color: var(--gold-lt); font-weight: 700; }
.star-hero-grid {
  display: grid; grid-template-columns: 1fr;
  gap: .65rem; margin-top: .75rem;
}
.star-hero-card {
  background: #10141d; border: 1px solid var(--border);
  border-radius: 8px; padding: .85rem;
}
.star-hero-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .35rem;
}
.star-hero-name { color: #fff; font-weight: 700; }
.star-hero-role { color: var(--muted); font-size: .75rem; margin-bottom: .55rem; }
.star-hero-ability { color: var(--gold-lt); font-size: .83rem; margin-bottom: .45rem; }
.star-hero-values {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  gap: .45rem; align-items: center; font-size: .78rem;
}
.star-val {
  background: #0b0e14; border: 1px solid #1a1f2e;
  border-radius: 6px; padding: .35rem .45rem; color: var(--text);
}
.star-val strong { display: block; color: #fff; font-size: .82rem; margin-top: .1rem; }
.star-arrow { color: var(--muted); }
.star-gain { color: var(--green); font-weight: 800; white-space: nowrap; }

@media (max-width: 520px) {
  .star-upgrade-summary { grid-template-columns: 1fr; }
  .star-hero-values { grid-template-columns: 1fr; }
  .star-arrow { display: none; }
}

.lp-bar-row {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .45rem; font-size: .82rem;
}
.lp-bar-label { width: 50px; color: var(--muted); flex-shrink: 0; text-align: right; }
.lp-bar-track {
  flex: 1; height: 10px; border-radius: 99px;
  background: #1a1f2e; overflow: hidden;
}
.lp-bar-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.lp-bar-val { width: 60px; flex-shrink: 0; font-weight: 700; }
.place-1 .lp-bar-fill  { background: #f0e6a2; }
.place-2 .lp-bar-fill  { background: var(--gold); }
.place-3 .lp-bar-fill  { background: #5cb85c; }
.place-4 .lp-bar-fill  { background: #4d9de0; }
.place-5 .lp-bar-fill  { background: #7a7a8c; }
.place-6 .lp-bar-fill  { background: #e07a3c; }
.place-7 .lp-bar-fill  { background: #e05c5c; }
.place-8 .lp-bar-fill  { background: #8c1a1a; }

/* ─── Feedback + Changelog layout ──────────────────────────────── */
.fb-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Feedback Survey ───────────────────────────────────────────── */
#feedback {
  flex: 1 1 640px;
  min-width: 0;
  padding: 4rem 0 2rem;
}

/* Accordion header */
.fb-header {
  cursor: pointer;
  border-radius: 10px;
  padding: .6rem .8rem;
  margin: -.6rem -.8rem;
  transition: background .2s;
  user-select: none;
}
.fb-header:hover  { background: rgba(200,155,60,.06); }
.fb-header:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.fb-chevron {
  display: block; text-align: center;
  color: var(--muted); font-size: .75rem;
  margin-top: .6rem;
  transition: transform .35s ease;
}
.fb-header[aria-expanded="true"] .fb-chevron { transform: rotate(180deg); }

/* Collapsible body */
.fb-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,0,.2,1);
}
.fb-body.open { max-height: 4000px; }

.fb-form {
  display: flex; flex-direction: column; gap: 1.8rem;
}

.fb-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
}

.fb-q {
  font-weight: 600; font-size: .97rem;
  margin-bottom: .9rem; color: var(--gold-lt);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

.fb-hint {
  font-weight: 400; font-size: .78rem;
  color: var(--muted); letter-spacing: .02em;
}

.fb-radios, .fb-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .55rem;
}

.fb-radio, .fb-check {
  display: flex; align-items: center; gap: .55rem;
  cursor: pointer; padding: .45rem .6rem;
  border-radius: 6px; border: 1px solid var(--border);
  font-size: .875rem; color: var(--text);
  transition: border-color .2s, background .2s;
}
.fb-radio:hover, .fb-check:hover {
  border-color: var(--gold); background: rgba(200,155,60,.07);
}
.fb-radio input, .fb-check input { accent-color: var(--gold); }

/* Star rating — reversed order trick (CSS-only) */
.star-rating {
  display: flex; flex-direction: row-reverse;
  justify-content: flex-end; gap: .2rem;
}
.star-rating input { display: none; }
.star-rating label {
  font-size: 2rem; cursor: pointer;
  color: var(--border); transition: color .15s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: var(--gold); }

.fb-textarea {
  width: 100%; padding: .7rem .9rem;
  background: #0d1016; border: 1px solid var(--border);
  border-radius: 7px; color: var(--text);
  font-family: inherit; font-size: .9rem; resize: vertical;
  transition: border-color .2s;
}
.fb-textarea:focus { outline: none; border-color: var(--gold); }

.fb-input {
  width: 100%; padding: .6rem .9rem;
  background: #0d1016; border: 1px solid var(--border);
  border-radius: 7px; color: var(--text);
  font-family: inherit; font-size: .9rem;
  transition: border-color .2s;
}
.fb-input:focus { outline: none; border-color: var(--gold); }

.fb-submit {
  align-self: flex-start;
  padding: .75rem 2rem; font-size: 1rem; font-weight: 700;
  background: var(--gold); color: #0a0c10;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background .2s, transform .1s;
}
.fb-submit:hover { background: var(--gold-lt); transform: translateY(-1px); }
.fb-submit:active { transform: translateY(0); }

/* Thank-you toast */
.fb-toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(120px);
  background: #1a2510; border: 1px solid #5cb85c;
  color: #a8e6a0; padding: .9rem 1.8rem;
  border-radius: 10px; font-weight: 600; font-size: .95rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  z-index: 9999; pointer-events: none;
}
.fb-toast.show { transform: translateX(-50%) translateY(0); }

/* ─── Subscribe / Updates section ───────────────────────────────── */
#subscribe {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}
.sub-header { border-top: 1px solid var(--border); margin-top: 0; }

.sub-body {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.sub-body.open { max-height: 1200px; }

.sub-layout {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

.sub-form-wrap {
  flex: 0 0 280px;
}
.sub-form-wrap h3 { color: var(--gold); font-size: .95rem; margin-bottom: .8rem; }

.sub-form { display: flex; flex-direction: column; gap: .6rem; }

.sub-email-input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: .7rem 1rem;
  font-size: .95rem;
  width: 100%;
  transition: border-color .2s;
}
.sub-email-input:focus { outline: none; border-color: var(--gold); }
.sub-email-input::placeholder { color: var(--muted); }

.sub-submit {
  align-self: flex-start;
  padding: .65rem 1.6rem;
  font-size: .95rem; font-weight: 700;
  background: var(--gold); color: #0a0c10;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background .2s, transform .1s;
}
.sub-submit:hover { background: var(--gold-lt); transform: translateY(-1px); }
.sub-note { font-size: .75rem; color: var(--muted); margin-top: .2rem; }

.sub-changelog { flex: 1 1 280px; }
.sub-changelog h3 { color: var(--gold); font-size: .95rem; margin-bottom: .8rem; }

.sub-log-list {
  list-style: none;
  display: flex; flex-direction: column; gap: .6rem;
}
.sub-log-list li {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: .85rem; padding: .5rem .8rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
}
.sub-log-date {
  font-size: .72rem; font-weight: 700;
  color: var(--gold); white-space: nowrap;
  padding-top: .05rem;
}

/* ─── Footer ────────────────────────────────────────────────────── */
footer {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--muted); font-size: .82rem;
  border-top: 1px solid var(--border);
}

/* ─── Chapter 4: Components Grid ───────────────────────────────── */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .8rem; margin: 1rem 0 2rem;
}
.comp-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem; background: #11151e; border: 1px solid var(--border);
  border-radius: 10px; padding: .75rem .5rem; text-align: center;
  cursor: default; transition: border-color .2s, transform .15s, box-shadow .15s;
}
.comp-item.clickable { cursor: pointer; }
.comp-item.clickable::after {
  content: '▸';
  position: absolute; bottom: .32rem; right: .4rem;
  font-size: .6rem; color: var(--gold); opacity: .55;
  transition: opacity .2s;
  pointer-events: none;
}
.comp-item.clickable:hover {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(200,160,48,.25);
}
.comp-item.clickable:hover::after { opacity: 1; }
.comp-item img {
  width: 48px; height: 48px; object-fit: cover; border-radius: 6px;
  background: #1a1f2e;
}
.comp-item .comp-name { font-size: .72rem; color: var(--text); font-weight: 600; line-height: 1.2; }
.comp-item .comp-stat { font-size: .68rem; color: var(--gold); }
.comp-item .comp-zh   { font-size: .68rem; color: var(--muted); }

/* ─── Component Modal: recipe list ─────────────────────────────── */
.m-comp-icon { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.comp-recipe-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
.comp-recipe-row {
  display: flex; align-items: flex-start; gap: .75rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 10px; padding: .7rem .9rem;
}
.comp-recipe-icon { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #1a1f2e; }
.comp-recipe-info { flex: 1; min-width: 0; }
.comp-recipe-name { font-size: .9rem; font-weight: 700; color: var(--text); }
.comp-recipe-combo { font-size: .78rem; font-weight: 400; color: var(--gold); margin-left: .3rem; }
.comp-recipe-effect { font-size: .8rem; color: #b8c4d8; margin-top: .25rem; line-height: 1.45; }
.comp-recipe-best { font-size: .76rem; color: var(--gold); margin-top: .2rem; }

/* ─── Spatula Modal: emblem grid ────────────────────────────────── */
.comp-emblem-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .6rem; margin-top: .5rem;
}
.comp-emblem-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-align: center;
}
.comp-emblem-item img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.comp-emblem-item div { font-size: .65rem; color: var(--text); line-height: 1.2; }

/* ─── Chapter 4: Meta Item Cards ────────────────────────────────── */
.meta-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem; margin: 1rem 0;
}
.meta-item-card {
  position: relative;
  background: #11151e; border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem; cursor: pointer;
  transition: border-color .2s, transform .1s;
}
.meta-item-card::after {
  content: '▸';
  position: absolute; bottom: .75rem; right: .85rem;
  font-size: .7rem; color: var(--gold); opacity: .5;
  transition: opacity .2s;
  pointer-events: none;
}
.meta-item-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.meta-item-card:hover::after { opacity: 1; }
.meta-item-header {
  display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem;
}
.meta-item-header img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
  background: #1a1f2e; flex-shrink: 0;
}
.meta-item-header .item-names { flex: 1; }
.meta-item-header .item-name-en { font-size: .95rem; font-weight: 700; color: var(--text); }
.meta-item-header .item-name-zh { font-size: .8rem; color: var(--muted); }
.meta-item-header .item-name { font-size: .95rem; font-weight: 700; color: var(--text); }
.meta-item-recipe {
  font-size: .75rem; color: var(--gold); margin-bottom: .4rem;
  display: flex; align-items: center; gap: .3rem;
}
.meta-item-why { font-size: .82rem; color: #c0c8d8; line-height: 1.5; }
.meta-item-why strong { color: #e8d090; }
.meta-item-tag {
  display: inline-block; margin-top: .5rem;
  background: rgba(200,160,48,.15); border: 1px solid rgba(200,160,48,.3);
  color: var(--gold); font-size: .7rem; padding: .2rem .5rem;
  border-radius: 12px;
}
.item-role-tag {
  font-size: .7rem; padding: .15rem .45rem; border-radius: 8px;
  font-weight: 600;
}
.item-role-tag.ad  { background:rgba(200,80,80,.2); color:#ff9090; border:1px solid rgba(200,80,80,.3); }
.item-role-tag.ap  { background:rgba(100,100,220,.2); color:#a0a0ff; border:1px solid rgba(100,100,220,.3); }
.item-role-tag.tank{ background:rgba(60,140,200,.2); color:#80c8ff; border:1px solid rgba(60,140,200,.3); }
.item-role-tag.util{ background:rgba(100,180,100,.2); color:#80e080; border:1px solid rgba(100,180,100,.3); }

/* ─── Chapter 3: Shop Odds Table ────────────────────────────────── */
.odds-table {
  width: 100%; border-collapse: collapse;
  font-size: .85rem; margin: 1rem 0;
}
.odds-table th { padding: .5rem .7rem; text-align: center; }
.odds-table td { padding: .45rem .7rem; text-align: center; border-top: 1px solid var(--border); }
.odds-table tr:hover td { background: rgba(255,255,255,.03); }
.odds-table .lvl-col { font-weight: 700; color: var(--gold); }
.odds-c1 { color: #9e9e9e; }
.odds-c2 { color: #5cb85c; }
.odds-c3 { color: #4d9de0; }
.odds-c4 { color: #9b5de5; }
.odds-c5 { color: #c89b3c; }

/* ─── Chapter 5: Positioning Scenarios ─────────────────────────── */
.pos-scenario-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin: 1rem 0;
}
@media (max-width: 640px) { .pos-scenario-grid { grid-template-columns: 1fr; } }
.pos-scenario {
  background: #11151e; border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem;
}
.pos-scenario h4 { font-size: .9rem; color: var(--gold); margin: 0 0 .6rem; }
.hex-board {
  font-family: monospace; font-size: .7rem; line-height: 1.7;
  background: #090c14; border-radius: 8px; padding: .7rem;
  color: #6080a0; letter-spacing: .05em; white-space: pre;
}
.hex-board .t { color: #4d9de0; font-weight:700; } /* tank */
.hex-board .c { color: #9b5de5; font-weight:700; } /* carry */
.hex-board .s { color: #5cb85c; font-weight:700; } /* support */
.hex-board .e { color: #ff6060; font-weight:700; } /* enemy */
.pos-label {
  font-size: .75rem; color: var(--muted);
  margin-top: .5rem; line-height: 1.5;
}

/* ─── Chapter 5: Unit Tier Lists ────────────────────────────────── */
.unit-tier-row {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0;
}
.unit-chip {
  display: flex; align-items: center; gap: .4rem;
  background: #11151e; border: 1px solid var(--border);
  border-radius: 20px; padding: .3rem .7rem;
  font-size: .8rem; color: var(--text);
}
.unit-chip img {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
}
.unit-chip .uc-cost { font-size: .68rem; font-weight: 700; }

/* ─── Hero Version Badge ─────────────────────────────────────────── */
.version-badge {
  display: inline-block;
  margin-top: .6rem;
  padding: .25rem .75rem;
  background: rgba(200,155,60,.1);
  border: 1px solid rgba(200,155,60,.3);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--gold);
  letter-spacing: .04em;
}

/* ─── Chapter 3: Trait Cards Grid ───────────────────────────────── */
.trait-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  margin: .5rem 0 1.5rem;
}
.trait-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  display: flex; align-items: flex-start; gap: .65rem;
}
.trait-card::after {
  content: '▸';
  position: absolute; bottom: .5rem; right: .6rem;
  font-size: .62rem; color: var(--gold); opacity: .5;
  transition: opacity .2s;
  pointer-events: none;
}
.trait-card:hover {
  border-color: var(--gold);
  background: rgba(200,155,60,.07);
  transform: translateY(-2px);
}
.trait-card:hover::after { opacity: 1; }
.trait-card img {
  width: 32px; height: 32px;
  object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(200,155,60,.35));
}
.trait-card-body { min-width: 0; }
.trait-card-name {
  font-size: .88rem; font-weight: 700;
  color: var(--gold-lt); line-height: 1.2;
  margin-bottom: .2rem;
}
.trait-card-type {
  font-size: .72rem; color: var(--muted);
  margin-bottom: .35rem;
}
.trait-card-tiers { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ─── Trait Tier Badges ──────────────────────────────────────────── */
.trait-tier-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: rgba(200,155,60,.15);
  border: 1px solid rgba(200,155,60,.35);
  border-radius: 4px;
  font-size: .68rem; font-weight: 700;
  color: var(--gold);
}
.trait-tier-badge.large {
  min-width: 28px; height: 28px; padding: 0 8px;
  font-size: .85rem;
}

/* ─── Trait Modal: tier list ─────────────────────────────────────── */
.trait-tier-list { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 1rem; }
.trait-tier-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .4rem .6rem;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}
.trait-tier-desc { font-size: .85rem; color: var(--text); }

/* ─── Trait Modal: champion grid ─────────────────────────────────── */
.trait-champ-grid {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem;
}
.trait-champ-card {
  display: flex; flex-direction: column; align-items: center;
  gap: .25rem; width: 72px;
}
.trait-champ-card img {
  width: 52px; height: 52px;
  border-radius: 8px; object-fit: cover;
  border: 2px solid var(--border);
}
.trait-champ-name {
  font-size: .7rem; color: var(--text);
  text-align: center; line-height: 1.2; word-break: break-word;
}
.trait-champ-cost {
  font-size: .65rem; font-weight: 700;
}

/* ─── Trait Modal: comp list ─────────────────────────────────────── */
.trait-comp-list {
  list-style: none; padding: 0; margin: .5rem 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.trait-comp-list li {
  padding: .5rem .75rem;
  background: rgba(255,255,255,.03);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-size: .83rem; color: var(--text); line-height: 1.4;
}

/* ─── Chapter 3: Champion Portrait Grid (cost modals) ───────────── */
.champ-portrait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .75rem;
}
.champ-portrait-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.champ-portrait-card img {
  width: 60px; height: 60px;
  border-radius: 8px; object-fit: cover;
  border: 2px solid var(--border);
}
.champ-portrait-name {
  font-size: .82rem; font-weight: 700;
  color: var(--gold-lt); text-align: center;
}
.champ-portrait-traits {
  display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center;
}
.champ-trait-tag {
  font-size: .62rem; padding: .1rem .35rem;
  background: rgba(77,157,224,.15);
  border: 1px solid rgba(77,157,224,.3);
  border-radius: 4px; color: var(--blue);
}
.champ-portrait-role {
  font-size: .72rem; font-weight: 600;
}
.champ-portrait-stats {
  font-size: .7rem; color: var(--muted); text-align: center; line-height: 1.5;
}
.champ-portrait-ability {
  width: 100%;
  background: rgba(255,255,255,.03);
  border-radius: 6px; padding: .4rem .5rem;
  margin-top: .1rem;
}
.champ-ability-name {
  font-size: .7rem; font-weight: 700;
  color: var(--gold); margin-bottom: .15rem;
}
.champ-ability-desc {
  font-size: .68rem; color: var(--muted); line-height: 1.4;
}

/* ─── Chapter 9: Board Simulator ───────────────────────────── */
.sim-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.sim-left { flex: 1 1 0; min-width: 0; }
.sim-right { width: 280px; flex-shrink: 0; }

.sim-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.sim-section-header h3 { color: #fff; font-size: 1rem; margin: 0; }

.sim-filter-bar { display: flex; gap: .3rem; flex-wrap: wrap; }
.sim-filter-btn {
  padding: .25rem .55rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sim-filter-btn.active, .sim-filter-btn:hover {
  background: var(--gold); color: #000; border-color: var(--gold);
}

.sim-pool {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-height: 210px;
  overflow-y: auto;
  padding: .5rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .8rem;
  scrollbar-width: thin;
}
.sim-pool-champ {
  width: 66px;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: grab;
  text-align: center;
  padding: .2rem .2rem .25rem;
  transition: border-color .15s, transform .1s;
  user-select: none;
}
.sim-pool-champ:hover { border-color: var(--gold); transform: scale(1.05); }
.sim-pool-champ:active { cursor: grabbing; }
.sim-pool-champ img {
  width: 50px; height: 50px;
  object-fit: cover; border-radius: 4px;
  display: block; margin: 0 auto .1rem;
  pointer-events: none;
}
.sim-pool-name {
  font-size: .58rem; color: var(--muted);
  line-height: 1.2; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sim-row-num-label {
  font-size: .55rem; color: var(--muted); width: 14px;
  flex-shrink: 0; text-align: right; padding-top: 38px; line-height: 1;
}

.sim-board-header { margin-top: .8rem; }
.sim-board-controls { display: flex; gap: .4rem; flex-wrap: wrap; }
.sim-ctrl-btn {
  padding: .3rem .7rem;
  border-radius: 5px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sim-ctrl-btn:hover { background: var(--gold); color: #000; }
.sim-ctrl-danger { border-color: var(--red); color: var(--red); }
.sim-ctrl-danger:hover { background: var(--red); color: #fff; }
.sim-ctrl-opp { border-color: #60aaff; color: #60aaff; }
.sim-ctrl-opp:hover { background: #60aaff; color: #000; }
.sim-opp-board { border-color: rgba(80,160,255,.4); }
.sim-opp-header h3 { color: #60aaff; }

/* Champion skill detail panel */
.sim-champ-detail {
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(30,25,15,.95); border: 1px solid var(--gold);
  border-radius: 8px; padding: .6rem .8rem; margin-bottom: .5rem;
  position: relative;
}
.sim-champ-detail-close {
  position: absolute; top: .4rem; right: .5rem;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .85rem; line-height: 1; padding: 0;
}
.sim-champ-detail-close:hover { color: var(--gold); }
.sim-champ-detail-img { width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.sim-champ-detail-name { font-size: .85rem; font-weight: 700; color: var(--gold); }
.sim-champ-detail-ability { font-size: .75rem; color: #aaa; margin-top: .15rem; font-style: italic; }
.sim-champ-detail-effect { font-size: .72rem; color: var(--text); margin-top: .25rem; line-height: 1.45; max-width: 340px; }

.sim-board {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: .5rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .5rem;
}
.sim-row { display: flex; gap: 5px; justify-content: center; }

.sim-hex {
  width: 76px; height: 96px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s;
  flex-shrink: 0;
}
.sim-hex:hover { border-color: var(--gold); }
.sim-hex.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,155,60,.35);
}
.sim-hex.drag-over {
  border-color: var(--gold-lt);
  box-shadow: 0 0 0 3px rgba(240,230,162,.45);
  background: rgba(200,155,60,.12);
}
.sim-hex.dragging { opacity: 0.45; }
.sim-hex-plus { font-size: 1.5rem; color: var(--border); pointer-events: none; }

.sim-hex-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: .2rem .12rem .1rem;
  border-radius: 9px;
  position: relative;
  cursor: grab;
}
.sim-hex-inner:active { cursor: grabbing; }
.sim-hex-inner.cost-c1 { border-top: 2px solid #a0a0a0; }
.sim-hex-inner.cost-c2 { border-top: 2px solid #5cb85c; }
.sim-hex-inner.cost-c3 { border-top: 2px solid #4d9de0; }
.sim-hex-inner.cost-c4 { border-top: 2px solid #9b5de5; }
.sim-hex-inner.cost-c5 { border-top: 2px solid #f0c050; }

.sim-champ-img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink: 0; pointer-events: none; }
.sim-champ-name-row {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; margin-top: 1px; gap: 1px;
}
.sim-champ-name {
  font-size: .55rem; color: var(--text);
  line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%; text-align: center; pointer-events: none;
}
.sim-champ-stars { display: flex; gap: 1px; flex-shrink: 0; }
.sim-star {
  font-size: .95rem; color: rgba(255,255,255,.2);
  cursor: pointer; line-height: 1; padding: 0 1px;
  transition: color .1s;
  pointer-events: all;
}
.sim-star.active { color: var(--gold); text-shadow: 0 0 4px rgba(200,155,60,.6); }
.sim-star:hover { color: var(--gold-lt); }
.sim-item-slots { display: flex; gap: 2px; margin-top: 3px; }
.sim-item-slot {
  width: 20px; height: 20px;
  border: 1.5px dashed rgba(200,155,60,.45);
  border-radius: 3px;
  background: rgba(200,155,60,.06);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.sim-item-slot:hover {
  border-color: var(--gold);
  background: rgba(200,155,60,.18);
  border-style: solid;
}
.sim-item-slot img { width: 100%; height: 100%; object-fit: cover; }
.sim-slot-plus { font-size: .75rem; color: rgba(200,155,60,.7); font-weight: 700; line-height: 1; }
.sim-item-slot.filled { background: rgba(200,155,60,.12); border-color: var(--gold); border-style: solid; }

.sim-hex-remove {
  position: absolute; top: 2px; right: 2px;
  width: 15px; height: 15px;
  background: rgba(224,92,92,.8); color: #fff;
  border: none; border-radius: 3px; cursor: pointer;
  font-size: .6rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
  z-index: 2;
}
.sim-hex:hover .sim-hex-remove { opacity: 1; }
.sim-board-hint { font-size: .75rem; color: var(--muted); margin-top: .3rem; }

.sim-right h3 { color: #fff; font-size: 1rem; margin-bottom: .5rem; }
.sim-stats-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.sim-stats-section h4 {
  font-size: .85rem; color: var(--gold);
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--border); padding-bottom: .2rem;
}
.sim-stat-sub { font-size: .8rem; color: var(--muted); margin: .4rem 0 .2rem; }
.sim-stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; font-size: .82rem; padding: .15rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sim-stat-row:last-child { border-bottom: none; }
.sim-stat-row strong { color: var(--gold-lt); }
.sim-stat-note { background: rgba(200,155,60,.08); padding: .2rem .4rem; border-radius: 4px; }
.sim-dps-row {
  display: flex; justify-content: space-between;
  font-size: .8rem; gap: .5rem; padding: .1rem 0;
}
.sim-stats-empty { font-size: .82rem; color: var(--muted); text-align: center; padding: 1rem 0; }

/* Stacking DPS timeline (Guinsoo's / Titan's) */
.sim-dps-row.stacking {
  flex-direction: column;
  gap: .2rem;
  align-items: flex-start;
  padding: .35rem 0 .4rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sim-dps-row.stacking:last-child { border-bottom: none; }
.sim-dps-name { font-size: .82rem; color: var(--gold); font-weight: 600; }
.sim-stack-timeline {
  display: flex; flex-wrap: wrap; gap: .3rem .5rem;
  margin-top: .1rem;
}
.sim-stack-pt {
  font-size: .75rem; color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .3rem;
  white-space: nowrap;
}
.sim-stack-pt strong { color: var(--text); }
.sim-stack-pt.peak { border-color: var(--gold); background: rgba(200,155,60,.1); }
.sim-stack-pt.peak strong { color: var(--gold-lt); }
.sim-stack-note { font-size: .65rem; color: var(--muted); margin-top: .1rem; }

.sim-traits-section h4 {
  font-size: .85rem; color: var(--gold);
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--border); padding-bottom: .2rem;
}
.sim-traits { display: flex; flex-direction: column; gap: .25rem; }
.sim-trait-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; gap: .4rem;
  padding: .2rem .3rem; border-radius: 4px;
  background: rgba(255,255,255,.02);
}
.sim-trait-active { background: rgba(200,155,60,.1); }
.sim-trait-label { display: flex; align-items: center; gap: .3rem; color: var(--text); }
.sim-trait-cnt { color: var(--muted); font-size: .75rem; }
.sim-trait-pips { display: flex; gap: 3px; }
.sim-trait-pip {
  width: 16px; height: 16px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: .6rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.sim-trait-pip.active { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 700; }

.sim-item-picker {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.sim-picker-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 680px; width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1rem 1.2rem;
  scrollbar-width: thin;
}
.sim-picker-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .8rem;
}
.sim-picker-header h3 { font-size: 1rem; color: #fff; }
.sim-picker-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: 5px;
  padding: .3rem .6rem; cursor: pointer; font-size: .85rem;
}
.sim-picker-close:hover { border-color: var(--red); color: var(--red); }
.sim-picker-group { margin-bottom: .8rem; }
.sim-picker-type-label { font-size: .8rem; color: var(--gold); font-weight: 600; margin-bottom: .4rem; }
.sim-picker-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.sim-item-pick {
  width: 80px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .3rem .3rem .25rem;
  cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.sim-item-pick:hover { border-color: var(--gold); background: rgba(200,155,60,.1); }
.sim-item-pick.selected { border-color: var(--gold-lt); background: rgba(200,155,60,.18); }
.sim-item-pick img {
  width: 36px; height: 36px;
  object-fit: cover; border-radius: 4px;
  display: block; margin: 0 auto .2rem;
}
.sim-item-pick-name { font-size: .65rem; color: var(--text); line-height: 1.2; margin-bottom: .15rem; }
.sim-item-pick-stats { font-size: .58rem; color: var(--muted); line-height: 1.3; }
.sim-picker-remove-wrap { margin-top: .5rem; text-align: center; }
.sim-picker-remove {
  background: transparent; border: 1px solid var(--red);
  color: var(--red); border-radius: 5px;
  padding: .35rem .8rem; cursor: pointer; font-size: .82rem;
}
.sim-picker-remove:hover { background: var(--red); color: #fff; }

/* ── Board row wrappers with row number labels ────────────────── */
.sim-row-wrapper { display: flex; align-items: flex-start; gap: 3px; }
@media (max-width: 768px) {
  .sim-layout { flex-direction: column; }
  .sim-right { width: 100%; }
}

/* ── Chapter page navigation ─────────────────────────────────────── */
.chapter-breadcrumb {
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
  padding: .6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .6rem 1.2rem;
  font-size: .85rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.chapter-breadcrumb a { color: var(--gold); text-decoration: none; }
.chapter-breadcrumb a:hover { color: var(--gold-lt); }
.chapter-breadcrumb .chap-sep { opacity: 0.35; }
.chapter-breadcrumb .chap-current { color: var(--text); font-weight: 600; }

.chapter-nav-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.chapter-nav-footer a {
  color: var(--gold);
  text-decoration: none;
  padding: .5rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .88rem;
  transition: border-color .15s, background .15s;
}
.chapter-nav-footer a:hover { border-color: var(--gold); background: rgba(200,155,60,.08); }
.chapter-nav-footer .chap-home { color: var(--muted); }

/* ── Hub page chapter grid ───────────────────────────────────────── */
.hub-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.hub-chapter-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.25rem;
  text-decoration: none;
  display: block;
  transition: border-color .2s, transform .15s;
}
.hub-chapter-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.hub-chapter-card .chap-num {
  font-size: .72rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: .45rem;
}
.hub-chapter-card h3 {
  color: var(--text);
  font-size: 1rem;
  margin: 0 0 .55rem;
  line-height: 1.35;
}
.hub-chapter-card p {
  color: var(--muted);
  font-size: .86rem;
  margin: 0 0 .75rem;
  line-height: 1.55;
}
.hub-chapter-card .chap-cta { font-size: .82rem; color: var(--gold); }
@media (max-width: 600px) {
  .hub-chapter-grid { grid-template-columns: 1fr; }
  .chapter-nav-footer { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ─── Changelog sidebar ─────────────────────────────────────────── */
.fb-changelog {
  flex: 0 0 320px;
  padding: 4rem 0 2rem;
}
.changelog-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 1.2rem;
}
.changelog-list {
  list-style: none;
  margin: 0;
  padding: 0 .3rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,155,60,.3) transparent;
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
}
.cl-item {
  display: flex;
  gap: .65rem;
  font-size: .82rem;
  line-height: 1.5;
}
.cl-item.cl-new .cl-date { color: var(--gold); font-weight: 700; }
.cl-date {
  flex-shrink: 0;
  color: var(--muted);
  font-size: .75rem;
  padding-top: .15rem;
  min-width: 5.2rem;
}
.cl-body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.cl-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: rgba(200,155,60,.15);
  color: var(--gold);
  border-radius: 4px;
  padding: .1rem .4rem;
  align-self: flex-start;
}
.cl-desc {
  color: var(--muted);
}
.cl-tag.cl-tag-fix {
  background: rgba(80,160,140,.15);
  color: #50a08c;
}
@media (max-width: 900px) {
  .fb-layout { flex-direction: column; }
  .fb-changelog { flex: none; width: 100%; padding-top: 0; }
}

/* ─── Augment pill list (Chapter 6 live augment lists) ─────────── */
.aug-list-section { margin-top: 1.5rem; border-top: 1px solid rgba(200,155,60,.15); padding-top: 1rem; }
.aug-list-section h3 { font-size: .85rem; color: var(--muted); font-weight: 500; margin-bottom: .75rem; }
.aug-pill-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.aug-pill {
  display: inline-block;
  font-size: .75rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(200,155,60,.2);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   ADVANCED PAGE
═══════════════════════════════════════════════════════════════════ */

/* ── Page enter transition ────────────────────────────────────── */
.adv-page-enter { animation: advSlideIn .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes advSlideIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Advance entry button (on index.html) ─────────────────────── */
.adv-entry-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.6rem; border-radius: 8px;
  background: linear-gradient(135deg,rgba(80,160,255,.18),rgba(120,60,200,.18));
  border: 1px solid rgba(80,160,255,.4); color: #80c4ff;
  font-size: .9rem; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; transition: background .2s, border-color .2s, transform .15s;
  margin-top: .8rem;
}
.adv-entry-btn:hover { background: rgba(80,160,255,.28); border-color: rgba(80,160,255,.7); transform: translateY(-2px); }
.adv-entry-badge {
  font-size: .65rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px;
  background: rgba(80,160,255,.3); color: #c0e4ff; letter-spacing: .06em;
}

/* ── Advanced Hero ────────────────────────────────────────────── */
.adv-hero {
  text-align: center; padding: 4rem 1rem 2.5rem;
  background: linear-gradient(180deg, rgba(20,30,55,.9) 0%, var(--bg) 100%);
  border-bottom: 1px solid rgba(80,160,255,.2);
}
.adv-hero-back { margin-bottom: 1.2rem; }
.adv-back-btn {
  color: var(--muted); font-size: .82rem; text-decoration: none;
  padding: .3rem .7rem; border-radius: 5px; border: 1px solid rgba(255,255,255,.08);
  transition: color .15s, border-color .15s;
}
.adv-back-btn:hover { color: var(--gold); border-color: var(--gold); }
.adv-hero-badge {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: #80c4ff; background: rgba(80,160,255,.15); border: 1px solid rgba(80,160,255,.35);
  padding: .2rem .8rem; border-radius: 999px; margin-bottom: .8rem;
}
.adv-hero h1 { font-size: 2.2rem; color: var(--gold); margin-bottom: .5rem; }
.adv-hero-sub { color: var(--muted); max-width: 620px; margin: 0 auto .8rem; }

/* ── Section wrapper ──────────────────────────────────────────── */
.adv-section { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1rem; }

/* ── Meta comp grid ───────────────────────────────────────────── */
.adv-comps-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  margin-top: 1.2rem;
}
.adv-comp-card {
  background: rgba(255,255,255,.035); border: 1px solid rgba(200,155,60,.18);
  border-radius: 10px; padding: 1rem 1.1rem; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  position: relative;
}
.adv-comp-card:hover { border-color: rgba(200,155,60,.5); background: rgba(255,255,255,.055); transform: translateY(-2px); }
.adv-comp-tier {
  position: absolute; top: .8rem; right: .8rem;
  font-size: 1.1rem; font-weight: 800; letter-spacing: .02em;
}
.adv-comp-name  { font-size: 1rem; font-weight: 700; color: var(--gold); margin-bottom: .25rem; padding-right: 2rem; }
.adv-comp-traits{ font-size: .72rem; color: var(--accent); margin-bottom: .6rem; }
.adv-comp-champs{ display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.adv-comp-champ {
  display: flex; flex-direction: column; align-items: center;
  width: 46px; gap: .15rem;
}
.adv-comp-champ img { width: 40px; height: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); object-fit: cover; }
.adv-comp-carry img { border-color: var(--gold); box-shadow: 0 0 6px rgba(200,155,60,.5); }
.adv-comp-cname { font-size: .5rem; color: var(--muted); text-align: center; line-height: 1.2; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-comp-no-img{ width:40px; height:40px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.adv-comp-meta  { font-size: .72rem; color: var(--muted); margin-bottom: .3rem; }
.adv-comp-style { color: var(--accent); }
.adv-comp-tagline{ font-size: .78rem; color: var(--text); opacity: .75; margin-bottom: .5rem; }
.adv-comp-hint  { font-size: .68rem; color: var(--accent); opacity: .7; }

/* ── Comp modal ───────────────────────────────────────────────── */
.adv-comp-modal {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.75); align-items: center; justify-content: center;
  padding: 1rem;
}
.adv-comp-modal-inner {
  background: var(--card); border: 1px solid rgba(200,155,60,.3);
  border-radius: 12px; padding: 1.5rem 1.8rem; max-width: 680px; width: 100%;
  max-height: 85vh; overflow-y: auto; position: relative;
}
.adv-comp-modal-close {
  position: absolute; top: .7rem; right: .9rem; background: none;
  border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: .2rem .5rem;
}
.adv-comp-modal-close:hover { color: var(--gold); }
.adv-modal-traits { font-size: .8rem; color: var(--accent); margin-bottom: .5rem; }
.adv-modal-carry-row td { font-weight: 700; color: var(--gold); }

/* ── Crit banner ──────────────────────────────────────────────── */
.adv-crit-banner {
  background: rgba(80,160,255,.08); border: 1px solid rgba(80,160,255,.22);
  border-radius: 8px; padding: .7rem 1rem; font-size: .82rem;
  color: var(--text); margin-bottom: 1.2rem; line-height: 1.6;
}
.adv-crit-banner strong { color: #80c4ff; }

/* ── Enemy armor bar ──────────────────────────────────────────── */
.adv-enemy-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .8rem; font-size: .8rem; color: var(--muted);
}
.adv-enemy-btns { display: flex; gap: .3rem; }
.adv-armor-btn {
  padding: .2rem .55rem; border-radius: 4px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: var(--text); font-size: .75rem; cursor: pointer;
}
.adv-armor-btn.active { background: rgba(200,155,60,.25); border-color: var(--gold); color: var(--gold); }

/* ── Stats panel ──────────────────────────────────────────────── */
.adv-stats-panel { font-size: .8rem; }
.sim-stats-section { margin-bottom: 1.2rem; }
.sim-stats-title { font-size: .72rem; font-weight: 600; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem; }
.adv-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .25rem .4rem; border-radius: 4px; margin-bottom: .15rem;
}
.adv-stat-row:hover { background: rgba(255,255,255,.03); }
.adv-dps strong     { color: #80c4ff; }
.adv-crit-dmg strong{ color: #ffb347; }
.adv-mitigation strong { color: #c0a050; }
.adv-crit-lucky { font-size: .72rem; color: #80c4ff; margin: .2rem .4rem .4rem; }

/* ── Per-carry block ──────────────────────────────────────────── */
.adv-carry-block {
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: .7rem .8rem; margin-bottom: .8rem;
}
.adv-carry-header { font-weight: 700; color: var(--gold); font-size: .88rem; margin-bottom: .5rem; }
.adv-carry-star   { color: var(--accent); font-size: .75rem; }
.adv-stat-grid    { margin-top: .4rem; }

/* ── Crit bar ─────────────────────────────────────────────────── */
.adv-crit-bar-wrap {
  position: relative; height: 14px; background: rgba(255,255,255,.07);
  border-radius: 7px; overflow: hidden; margin-bottom: .3rem;
}
.adv-crit-bar-fill {
  height: 100%; background: linear-gradient(90deg,#ffb347,#ff6b00);
  border-radius: 7px; transition: width .3s ease;
}
.adv-crit-bar-label {
  position: absolute; right: 6px; top: 0; font-size: .65rem;
  line-height: 14px; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ── Crit distribution ────────────────────────────────────────── */
.adv-dist-block {
  margin-top: .6rem; padding: .6rem .5rem; background: rgba(80,160,255,.06);
  border: 1px solid rgba(80,160,255,.15); border-radius: 6px; font-size: .72rem;
}
.adv-dist-title   { color: #80c4ff; font-weight: 600; margin-bottom: .35rem; }
.adv-dist-summary { color: var(--muted); margin-bottom: .4rem; }
.adv-dist-row     { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.adv-dist-k       { min-width: 70px; color: var(--text); }
.adv-dist-bar-wrap{ flex: 1; height: 10px; background: rgba(255,255,255,.07); border-radius: 5px; position: relative; overflow: hidden; }
.adv-dist-bar     { height: 100%; background: rgba(80,160,255,.55); border-radius: 5px; }
.adv-dist-pct     { min-width: 32px; color: var(--muted); text-align: right; }
.adv-dist-note    { margin-top: .4rem; color: var(--muted); font-size: .68rem; font-style: italic; line-height: 1.4; }

/* ── Item picker type colours ─────────────────────────────────── */
.adv-item-type-ad  { border-color: rgba(200,155,60,.35) !important; }
.adv-item-type-as  { border-color: rgba(80,200,80,.3) !important; }
.adv-item-type-ap  { border-color: rgba(100,150,255,.35) !important; }
.adv-item-type-tank{ border-color: rgba(150,150,150,.3) !important; }

@media (max-width: 700px) {
  .adv-hero h1        { font-size: 1.6rem; }
  .adv-comps-grid     { grid-template-columns: 1fr; }
  .adv-comp-modal-inner{ padding: 1rem; }
}

/* ── Advanced crit panel (sits below simStats) ──────────────────── */
.adv-crit-panel:not(:empty) {
  margin-top: 1rem;
  border-top: 1px solid rgba(80,160,255,.18);
  padding-top: .8rem;
}
.adv-crit-section-title {
  font-size: .72rem; font-weight: 600; color: #80c4ff;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem;
}

/* ── Chapter 9 → Advanced Training callout ──────────────────────── */
.adv-callout {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.8rem; padding: .9rem 1.2rem;
  background: linear-gradient(135deg, rgba(80,160,255,.08), rgba(120,60,200,.08));
  border: 1px solid rgba(80,160,255,.28); border-radius: 10px;
}
.adv-callout-icon { font-size: 1.5rem; flex-shrink: 0; }
.adv-callout-body { flex: 1; font-size: .85rem; color: var(--text); line-height: 1.55; min-width: 200px; }
.adv-callout-body strong { color: #80c4ff; }
.adv-callout-btn {
  flex-shrink: 0; padding: .5rem 1.1rem; border-radius: 7px;
  background: rgba(80,160,255,.18); border: 1px solid rgba(80,160,255,.4);
  color: #80c4ff; font-size: .85rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: background .2s, border-color .2s;
}
.adv-callout-btn:hover { background: rgba(80,160,255,.3); border-color: rgba(80,160,255,.7); }

/* ══════════════════════════════════════════════════════════════════
   CHAMPION TIER LIST (Advanced page)
══════════════════════════════════════════════════════════════════ */
.adv-tier-row {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .7rem .8rem; border-radius: 8px; margin-bottom: .7rem;
  background: var(--tier-bg,rgba(255,255,255,.03));
  border-left: 3px solid var(--tier-color,#888);
}
.adv-tier-label {
  min-width: 110px; font-size: .82rem; font-weight: 700;
  color: var(--tier-color,#888); padding-top: .35rem; flex-shrink: 0;
  letter-spacing: .02em;
}
.adv-tier-champs { display: flex; flex-wrap: wrap; gap: .45rem; }
.adv-tier-champ {
  display: flex; flex-direction: column; align-items: center;
  width: 56px; cursor: pointer; border-radius: 8px; padding: .3rem .2rem .2rem;
  border: 1px solid rgba(255,255,255,.07); transition: border-color .15s, background .15s, transform .12s;
  position: relative;
}
.adv-tier-champ:hover  { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.adv-tier-champ.active { border-color: var(--gold); background: rgba(200,155,60,.12); }
.adv-tier-champ img    { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; display: block; }
.adv-tier-no-img       { width: 44px; height: 44px; border-radius: 6px; background: rgba(255,255,255,.06); }
.adv-tier-champ-name   { font-size: .52rem; color: var(--muted); margin-top: .2rem; text-align: center; line-height: 1.2; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-tier-champ-cost   { font-size: .55rem; font-weight: 700; margin-top: .1rem; }

/* Cost colours (reuse existing cost-cN classes) */
.cost-c1 { color: #9aa4af; }
.cost-c2 { color: #4caf50; }
.cost-c3 { color: #2196f3; }
.cost-c4 { color: #9c27b0; }
.cost-c5 { color: #ffc107; }

/* ── Champion detail panel ─────────────────────────────────────── */
.adv-champ-detail {
  background: rgba(255,255,255,.035); border: 1px solid rgba(200,155,60,.25);
  border-radius: 10px; padding: 1.2rem 1.4rem; margin-top: .5rem;
  animation: advDetailIn .2s ease both;
}
@keyframes advDetailIn {
  from { opacity:0; transform: translateY(-8px); }
  to   { opacity:1; transform: translateY(0); }
}
.adv-detail-header {
  display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem;
}
.adv-detail-portrait {
  width: 64px; height: 64px; border-radius: 10px; object-fit: cover;
  border: 2px solid var(--gold); flex-shrink: 0;
}
.adv-detail-title-block { flex: 1; }
.adv-detail-name        { font-size: 1.1rem; font-weight: 700; color: var(--gold); margin-bottom: .25rem; }
.adv-detail-cost        { font-weight: 800; font-size: .9rem; padding: .1rem .4rem; border-radius: 4px; background: rgba(255,255,255,.06); }
.adv-detail-tier        { font-weight: 800; font-size: 1rem; margin-left: .3rem; }
.adv-detail-style       { font-size: .8rem; color: var(--accent); margin-bottom: .35rem; }
.adv-detail-reason      { font-size: .82rem; color: var(--text); line-height: 1.55; }
.adv-detail-section     { margin-bottom: .85rem; }
.adv-detail-label       { font-size: .72rem; font-weight: 600; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem; }
.adv-detail-items       { font-size: .85rem; color: var(--gold); font-weight: 500; }
.adv-detail-traits      { font-size: .75rem; color: #80c4ff; margin-bottom: .5rem; }
.adv-detail-units       { display: flex; flex-wrap: wrap; gap: .4rem; }
.adv-detail-unit {
  display: flex; flex-direction: column; align-items: center; width: 52px;
  background: rgba(255,255,255,.03); border-radius: 7px; padding: .3rem .2rem .2rem;
  border: 1px solid rgba(255,255,255,.07);
}
.adv-detail-unit img    { width: 38px; height: 38px; border-radius: 5px; object-fit: cover; }
.adv-detail-unit-name   { font-size: .48rem; color: var(--muted); text-align: center; line-height: 1.2; max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .15rem; }
.adv-detail-unit-cost   { font-size: .52rem; font-weight: 700; margin-top: .05rem; }
.adv-detail-tips        { padding-left: 1.1rem; font-size: .8rem; line-height: 1.8; color: var(--text); margin: 0; }
.adv-detail-tips li     { margin-bottom: .15rem; }

@media (max-width: 600px) {
  .adv-tier-label { min-width: 60px; font-size: .72rem; }
  .adv-detail-header { flex-direction: column; }
}

.adv-sim-pip-hint {
  font-size: .82rem;
  color: #c89b3c;
  opacity: .85;
  margin-top: -.2rem;
  margin-bottom: .6rem;
}

/* ══════════════════════════════════════════════════════════════════
   PiP (Picture-in-Picture) Floating Simulator Window
   pip_widget.js injects .pip-fab and .pip-window into advanced.html.
══════════════════════════════════════════════════════════════════ */

/* ── FAB trigger button ─────────────────────────────────────── */
.pip-fab {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 9998;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c89b3c 0%, #e8c060 100%);
  color: #000;
  font-size: 1.35rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.6), 0 0 0 2px rgba(200,155,60,.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
  line-height: 1;
}
.pip-fab:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 24px rgba(0,0,0,.7), 0 0 0 3px rgba(200,155,60,.6);
}
.pip-fab:active { transform: scale(.96); }

/* ── Floating window ────────────────────────────────────────── */
.pip-window {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #0a0c10;
  border: 1px solid rgba(200,155,60,.55);
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(200,155,60,.15);
  overflow: hidden;
  min-width: 540px;
  min-height: 380px;
  /* entrance animation */
  animation: pip-appear .2s ease;
}
@keyframes pip-appear {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ── Title bar ──────────────────────────────────────────────── */
.pip-titlebar {
  height: 36px;
  background: linear-gradient(90deg, rgba(200,155,60,.18) 0%, rgba(200,155,60,.08) 100%);
  border-bottom: 1px solid rgba(200,155,60,.3);
  display: flex; align-items: center;
  padding: 0 .55rem;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  gap: .4rem;
}
.pip-tb-icon  { font-size: 1rem; flex-shrink: 0; }
.pip-tb-title {
  flex: 1;
  font-size: .82rem; font-weight: 700; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pip-tb-controls { display: flex; gap: .3rem; flex-shrink: 0; }

.pip-tbtn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.pip-tbtn:hover            { background: var(--gold); color: #000; border-color: var(--gold); }
.pip-tbtn.pip-clos:hover   { background: #e05555 !important; border-color: #e05555 !important; color: #fff !important; }

/* ── Iframe body ────────────────────────────────────────────── */
.pip-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.pip-iframe {
  display: block;
  width: 100%; height: 100%;
  border: none;
  background: #0a0c10;
}

/* Transparent overlay that absorbs mouse events during drag/resize
   (prevents the iframe from capturing mousemove/mouseup) */
.pip-blocker {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
}

/* ── Resize handle (bottom-right corner) ───────────────────── */
.pip-resize {
  position: absolute;
  bottom: 0; right: 0;
  width: 18px; height: 18px;
  cursor: se-resize;
  z-index: 10000;
  /* visual diagonal stripe */
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(200,155,60,.45) 3px,
    rgba(200,155,60,.45) 4px
  );
  border-bottom-right-radius: 10px;
  opacity: .6;
  transition: opacity .15s;
  flex-shrink: 0;
}
.pip-resize:hover { opacity: 1; }