*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#c9a84c;
  --gold-light:#e8c97a;
  --gold-dim:#7a6230;
  --parchment:#f5ead0;
  --ink:#1a1208;
  --bg:#0e0b06;
  --bg2:#1a1408;
  --bg3:#241c0c;
  --blood:#8b1a1a;
  --border:rgba(201,168,76,0.25);
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--parchment);
  font-family:'Crimson Text',Georgia,serif;
  font-size:18px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}

/* ── Header ── */
header{text-align:center;padding:4rem 2rem 3rem;position:relative}
header::after{
  content:'';display:block;
  width:60%;max-width:480px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:2rem auto 0;
}
.eyebrow{
  font-family:'Cinzel',serif;font-size:11px;
  letter-spacing:.3em;color:var(--gold-dim);
  text-transform:uppercase;margin-bottom:1rem;
}
h1{
  font-family:'Cinzel',serif;
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:700;color:var(--gold-light);
  line-height:1.1;
  text-shadow:0 0 40px rgba(201,168,76,.3);
  margin-bottom:.8rem;
}
.sub{color:rgba(245,234,208,.55);font-style:italic;font-size:1.1rem}

/* ── Layout ── */
main{max-width:860px;margin:0 auto;padding:0 1.5rem 6rem}

.section-label{
  font-family:'Cinzel',serif;font-size:10px;
  letter-spacing:.35em;color:var(--gold-dim);
  text-transform:uppercase;margin-bottom:1.2rem;
  display:flex;align-items:center;gap:12px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Style grid ── */
.style-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;margin-bottom:3rem;
}
.style-btn{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;padding:1.1rem 1.2rem;
  cursor:pointer;transition:all .2s;
  text-align:left;color:var(--parchment);
  font-family:'Crimson Text',serif;
}
.style-btn:hover{border-color:var(--gold);background:var(--bg3)}
.style-btn.active{
  border-color:var(--gold);background:var(--bg3);
  box-shadow:inset 0 0 0 1px var(--gold-dim);
}
.style-btn-name{
  font-family:'Cinzel',serif;font-size:.85rem;
  color:var(--gold-light);display:block;margin-bottom:4px;
}
.style-btn-desc{font-size:.88rem;color:rgba(245,234,208,.5);font-style:italic;line-height:1.3}

/* ── Divider ── */
.divider{
  display:flex;align-items:center;gap:12px;
  margin:0 0 2.5rem;color:var(--gold-dim);
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.2em;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Custom input ── */
.custom-input-wrap{margin-bottom:3rem;display:flex;gap:10px}
.custom-input{
  flex:1;background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;padding:.75rem 1rem;
  color:var(--parchment);font-family:'Crimson Text',serif;
  font-size:1rem;outline:none;transition:border-color .2s;
}
.custom-input::placeholder{color:rgba(245,234,208,.3)}
.custom-input:focus{border-color:var(--gold)}
.btn-primary{
  background:var(--gold-dim);border:1px solid var(--gold);
  border-radius:4px;padding:.75rem 1.5rem;
  color:var(--ink);font-family:'Cinzel',serif;
  font-size:.8rem;letter-spacing:.1em;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.btn-primary:hover{background:var(--gold)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}

/* ── Result ── */
.playstyle-banner{
  background:var(--bg3);border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:0 4px 4px 0;
  padding:1.2rem 1.5rem;margin-bottom:2rem;
}
.ps-label{
  font-family:'Cinzel',serif;font-size:9px;
  letter-spacing:.3em;color:var(--gold-dim);
  text-transform:uppercase;margin-bottom:4px;
}
.ps-name{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold-light);margin-bottom:4px}
.ps-desc{color:rgba(245,234,208,.55);font-style:italic;font-size:.95rem}

.party-title{
  font-family:'Cinzel',serif;font-size:9px;
  letter-spacing:.3em;color:var(--gold-dim);
  text-transform:uppercase;margin-bottom:1rem;margin-top:2rem;
}

/* ── Companion cards ── */
.companion-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;padding:1.3rem 1.5rem;margin-bottom:10px;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:1rem;align-items:start;
  animation:fadeUp .4s ease both;
}
.companion-card:nth-child(1){animation-delay:.05s}
.companion-card:nth-child(2){animation-delay:.12s}
.companion-card:nth-child(3){animation-delay:.19s}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.c-rank{font-family:'Cinzel',serif;font-size:.75rem;color:var(--gold-dim);padding-top:2px;min-width:20px}
.c-body{min-width:0}
.c-name{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--gold-light);margin-bottom:2px}
.c-class{font-size:.88rem;color:rgba(245,234,208,.45);font-style:italic;margin-bottom:.6rem}
.c-why{font-size:.95rem;color:rgba(245,234,208,.7);line-height:1.5;font-style:italic}
.c-why::before{content:'"';color:var(--gold-dim)}
.c-why::after{content:'"';color:var(--gold-dim)}
.c-actions{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:6px}
.action-pill{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:2px;padding:2px 8px;font-size:.78rem;
  color:rgba(245,234,208,.55);display:flex;align-items:center;gap:5px;
}
.action-pill .val{color:var(--gold);font-family:'Cinzel',serif;font-size:.72rem}
.c-score{text-align:right;padding-top:2px}
.score-num{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--gold)}
.score-lbl{font-size:.7rem;color:var(--gold-dim);text-transform:uppercase;letter-spacing:.1em}

/* ── Avoid cards ── */
.avoid-card{
  background:rgba(139,26,26,.08);border:1px solid rgba(139,26,26,.3);
  border-radius:4px;padding:.9rem 1.2rem;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;
  animation:fadeUp .4s ease both;
}
.avoid-name{font-family:'Cinzel',serif;font-size:.9rem;color:rgba(245,234,208,.6)}
.avoid-why{font-size:.85rem;color:rgba(245,234,208,.35);font-style:italic}
.avoid-score{font-family:'Cinzel',serif;font-size:.85rem;color:var(--blood)}

/* ── States ── */
.loading{
  text-align:center;padding:3rem;color:var(--gold-dim);
  font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:.2em;
}
.error-msg{
  background:rgba(139,26,26,.12);border:1px solid rgba(139,26,26,.4);
  border-radius:4px;padding:1rem 1.2rem;color:#e57373;font-size:.9rem;
}

/* ── Footer ── */
footer{
  text-align:center;padding:2rem;
  color:rgba(245,234,208,.2);font-size:.8rem;
  border-top:1px solid var(--border);margin-top:4rem;
}
footer a{color:var(--gold-dim);text-decoration:none}
footer a:hover{color:var(--gold)}

@media(max-width:600px){
  .companion-card{grid-template-columns:auto 1fr}
  .c-score{display:none}
  .style-grid{grid-template-columns:1fr 1fr}
}

/* ── Companion name as button ── */
.name-link{
  background:none;border:none;cursor:pointer;
  font-family:'Cinzel',serif;font-size:1.1rem;
  color:var(--gold-light);padding:0;
  text-decoration:underline;text-decoration-color:var(--gold-dim);
  text-underline-offset:3px;transition:color .2s;
}
.name-link:hover{color:var(--gold)}

/* ── Back button ── */
.back-btn{
  background:none;border:1px solid var(--border);border-radius:4px;
  padding:.4rem .9rem;color:var(--gold-dim);
  font-family:'Cinzel',serif;font-size:.75rem;letter-spacing:.1em;
  cursor:pointer;margin-bottom:1.5rem;transition:all .2s;
}
.back-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ── Companion detail ── */
.companion-detail-header{margin-bottom:1.5rem}
.cd-name{font-family:'Cinzel',serif;font-size:1.8rem;color:var(--gold-light);margin-bottom:4px}
.cd-meta{font-size:.9rem;color:rgba(245,234,208,.45);font-style:italic;margin-bottom:.5rem}
.cd-wiki{font-size:.8rem;color:var(--gold-dim);text-decoration:none;font-family:'Cinzel',serif;letter-spacing:.05em}
.cd-wiki:hover{color:var(--gold)}

.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.cd-section{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:1rem}
.cd-section-title{
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:.3em;
  color:var(--gold-dim);text-transform:uppercase;margin-bottom:.7rem;
  display:flex;align-items:center;gap:8px;
}
.events-count{font-family:'Crimson Text',serif;font-size:.8rem;color:rgba(245,234,208,.35);letter-spacing:0;text-transform:none}

.tag{
  display:inline-block;padding:2px 10px;border-radius:2px;
  font-size:.82rem;margin:3px 3px 3px 0;
}
.tag-pos{background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);color:var(--gold-light)}
.tag-neg{background:rgba(139,26,26,.1);border:1px solid rgba(139,26,26,.25);color:#e57373}

/* ── Event rows ── */
.event-row{
  display:flex;gap:.8rem;align-items:baseline;
  padding:.4rem 0;border-bottom:1px solid rgba(201,168,76,.08);
  font-size:.9rem;
}
.event-val{
  font-family:'Cinzel',serif;font-size:.8rem;min-width:32px;
  text-align:right;flex-shrink:0;
}
.event-pos .event-val{color:var(--gold)}
.event-neg .event-val{color:#e57373}
.event-action{color:rgba(245,234,208,.65);font-style:italic;line-height:1.4}

/* ── Thresholds ── */
.threshold-list{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;overflow:hidden;
}
.threshold-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 1rem;border-bottom:1px solid rgba(201,168,76,.08);
  font-size:.88rem;
}
.threshold-row:last-child{border-bottom:none}
.threshold-label{color:rgba(245,234,208,.55);text-transform:capitalize}
.threshold-val{font-family:'Cinzel',serif;font-size:.85rem}
.threshold-val.pos{color:var(--gold)}
.threshold-val.neg{color:#e57373}

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