:root {
  --bg: #140d0b;
  --bg2: #1d1310;
  --panel: #221714;
  --line: #3a2721;
  --text: #efe3d0;
  --mute: #a8927c;
  --red: #b3261e;
  --red2: #7d1712;
  --gold: #d8a64a;
  --gold2: #f3cf7a;
  --tank: #6aa3d8;
  --healer: #6fcf72;
  --dps: #e06a5a;
  --r: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.5 "Alegreya Sans", system-ui, sans-serif;
  background-image: radial-gradient(1200px 500px at 50% -120px, #4a120e 0, transparent 70%);
}
a { color: var(--gold2); }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; letter-spacing: .02em; margin: 0 0 .6em; }
h2 { font-size: 1.7rem; color: var(--gold); }
h2 small { font: 500 .95rem "Alegreya Sans", sans-serif; color: var(--mute); margin-left: .4em; }
h3 { font-size: 1.15rem; color: var(--gold); margin-top: 1.6em; }

.hero { text-align: center; padding: 48px 16px 8px; }
.hero-in { max-width: 900px; margin: 0 auto; }
.crest { width: 84px; height: 84px; color: var(--red); filter: drop-shadow(0 0 18px #b3261e88); }
.hero h1 { font-size: clamp(2.6rem, 9vw, 5rem); font-weight: 900; line-height: 1; margin: .15em 0 .2em;
  background: linear-gradient(#f6d58b, #b77d2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 span { display: block; font-size: .3em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: .5em;
  color: var(--text); -webkit-text-fill-color: var(--text); }
.sub { color: var(--mute); margin: 0 0 18px; min-height: 1.5em; }
.tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; position: sticky; top: 0; }
.tabs a { text-decoration: none; color: var(--text); border: 1px solid var(--line); background: #0008; padding: 6px 14px; border-radius: 99px; font-weight: 500; }
.tabs a:hover { border-color: var(--gold); color: var(--gold2); }

main { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.panel { background: linear-gradient(var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin: 24px 0; scroll-margin-top: 16px; }

/* Pacto */
.oath { font-size: 1.2rem; line-height: 2.1; margin: 0 0 16px; }
.oath input { font: inherit; color: var(--gold2); background: transparent; border: 0; border-bottom: 2px dashed var(--gold);
  width: 11ch; padding: 0 4px; outline: none; }
.oath input:focus { border-bottom-style: solid; }
input, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; }
select:focus, input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--mute); }
.quote { margin-top: 12px; }
.actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.msg { color: var(--gold2); }
.btn { font: 700 1rem Cinzel, serif; letter-spacing: .04em; border-radius: 8px; padding: 11px 20px; cursor: pointer; border: 1px solid transparent; color: var(--text); }
.btn.blood { background: linear-gradient(var(--red), var(--red2)); border-color: #e04a3a55; box-shadow: 0 4px 20px #b3261e44; }
.btn.blood:hover { filter: brightness(1.15); }
.btn.gold { background: linear-gradient(#e2b25a, #9c6b22); color: #1a0f08; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--mute); }
.btn.ghost:hover { color: var(--text); border-color: var(--mute); }
.btn:disabled { opacity: .5; cursor: wait; }

/* Quiz */
.q-progress { height: 4px; background: var(--line); border-radius: 4px; margin-bottom: 18px; overflow: hidden; }
.q-progress i { display: block; height: 100%; background: var(--gold); transition: width .3s; }
.q-text { font-size: 1.35rem; font-weight: 700; margin: 0 0 14px; }
.q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-opts button { text-align: left; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; cursor: pointer; }
.q-opts button:hover { border-color: var(--gold); background: #2a1b16; }
.q-start { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.q-start p { margin: 0; color: var(--mute); }
.result { border-left: 4px solid var(--c, var(--gold)); padding: 4px 0 4px 18px; }
.result .big { font: 900 clamp(1.8rem, 6vw, 2.6rem)/1.1 Cinzel, serif; color: var(--c); margin: 4px 0 8px; }
.result .why { color: var(--mute); font-style: italic; }
.alts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px 3px 8px; font-size: .9rem; background: var(--bg); color: var(--text); }
button.chip { cursor: pointer; font: inherit; font-size: .9rem; }
button.chip:hover { border-color: var(--c, var(--gold)); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }

/* Party */
.comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.comp div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; align-items: center; gap: 10px; }
.comp b { font: 900 1.8rem Cinzel, serif; }
.comp span { color: var(--mute); }
.verdict { color: var(--gold2); font-style: italic; margin: 12px 0 16px; min-height: 1.5em; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.member { background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 12px 14px; }
.member.me { box-shadow: 0 0 0 1px var(--gold) inset; }
.member .char { font: 800 1.15rem Cinzel, serif; color: var(--c); word-break: break-word; }
.member .who { color: var(--mute); font-size: .9rem; }
.member .spec { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.member q { display: block; margin-top: 8px; font-style: italic; color: var(--mute); font-size: .92rem; }
.ri { width: 16px; height: 16px; flex: none; }
.ri.tank { color: var(--tank); } .ri.healer { color: var(--healer); } .ri.dps { color: var(--dps); }
.empty { color: var(--mute); }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.group { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--bg); }
.group h4 { margin: 0 0 6px; font: 700 .95rem Cinzel, serif; color: var(--gold); }
.slot { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.slot.open { color: var(--mute); font-style: italic; }
.slot .n { color: var(--c); font-weight: 700; }

/* Clases */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filters button { font: inherit; font-size: .9rem; color: var(--mute); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; cursor: pointer; }
.filters button.on { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.classes { display: grid; gap: 10px; }
.cls { border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r); background: var(--bg); }
.cls > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cls > summary::-webkit-details-marker { display: none; }
.cls .nm { font: 800 1.25rem Cinzel, serif; color: var(--c); }
.cls .meta { color: var(--mute); font-size: .9rem; }
.cls .roles { margin-left: auto; display: flex; gap: 4px; }
.cls-body { padding: 0 14px 14px; }
.vibe { font-style: italic; color: var(--gold2); margin: 0 0 10px; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: .95rem; }
.pc ul { margin: 4px 0 0; padding-left: 1.1em; }
.pc .p b { color: var(--healer); } .pc .c b { color: var(--dps); }
.races { color: var(--mute); font-size: .9rem; margin: 10px 0 0; }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.spec-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.spec-card h4 { margin: 0; display: flex; align-items: center; gap: 6px; font: 700 1.05rem Cinzel, serif; }
.spec-card p { margin: 6px 0; font-size: .95rem; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--mute); }
.tags span { border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.skulls { letter-spacing: 1px; }
.spec-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: .9rem; }
.spec-card .row button { font: inherit; font-size: .85rem; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.spec-card .row button:hover { border-color: var(--gold); }
.src { color: var(--mute); font-size: .9rem; margin: 16px 0 0; }

footer { text-align: center; color: var(--mute); padding: 24px 16px 48px; font-family: Cinzel, serif; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .panel { padding: 18px 16px; }
  .pick { grid-template-columns: 1fr; }
  .q-opts { grid-template-columns: 1fr; }
  .comp { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .comp div { flex-direction: column; gap: 2px; padding: 8px; text-align: center; }
  .pc { grid-template-columns: 1fr; }
  .oath { line-height: 2; font-size: 1.1rem; }
}
.races abbr { text-decoration: underline dotted; cursor: help; }
.lv { font: 700 .75rem/1 "Alegreya Sans", sans-serif; letter-spacing: .03em; border-radius: 4px; padding: 3px 6px; border: 1px solid; white-space: nowrap; }
.lv.tS { color: #f3cf7a; border-color: #f3cf7a88; background: #f3cf7a14; }
.lv.tA { color: var(--healer); border-color: #6fcf7277; }
.lv.tB { color: var(--tank); border-color: #6aa3d877; }
.lv.tC { color: var(--mute); border-color: var(--line); }
.lv.tD { color: var(--dps); border-color: #e06a5a77; }
.tags .lv { padding: 0 6px; line-height: 1.4; }
.lvwhy { font-size: .9rem; color: var(--mute); }
.cls-body .lvwhy, .result .lvwhy { color: var(--text); }
.cls > summary .lv { margin-left: 4px; }