/* Nivel 36 — menú de RPG pixel, paleta inspirada en Pokémon Rojo
   Rojo Pokédex + ventanas blancas + azul de menú. Un solo acento (rojo). */
:root {
  --c0: #1b1d29;   /* tinta / bordes (nunca negro puro) */
  --c1: #5a5f72;   /* texto secundario */
  --c2: #a8302a;   /* rojo oscuro: trama del fondo */
  --c3: #c0392f;   /* rojo Pokédex: fondo de página */
  --c4: #f5f5f2;   /* ventanas blancas */
  --shade: #e3e3de;
  --navy: #1e2b57; /* azul de menú */
  --navy-dk: #101a38;
  --navy-lt: #2d4080;
  --on-navy-dim: #b9c1de;
  --red: #c0392f;
  --red-lt: #ee8c83;
  --gold: #f0c13a;  /* solo para invitadxs de honor */
  --on-page: #f5f5f2; /* texto directamente sobre el fondo de página */
  --gut: 16px;
  --notch: 4px;
  --f-display: "Press Start 2P", monospace;
  --f-body: "Pixelify Sans", "Press Start 2P", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--f-body); font-size: 1.2rem; line-height: 1.45;
  color: var(--c0); background-color: var(--c3);
  background-image:
    linear-gradient(45deg, var(--c2) 25%, transparent 25%, transparent 75%, var(--c2) 75%),
    linear-gradient(45deg, var(--c2) 25%, transparent 25%, transparent 75%, var(--c2) 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
/* ---------- Temas (se eligen con ?tema=nombre o PARTY.tema en config.js) ---------- */
/* Amarillo: Pokémon Amarillo, página amarilla, tinta carbón, acento rojo */
html[data-tema="amarillo"] {
  --c0: #2a2118; --c1: #6b5a3f; --c2: #d2a41a; --c3: #e8b923; --c4: #faf9f5; --shade: #ebe8df;
  --navy: #2e2a26; --navy-dk: #1a1714; --navy-lt: #4a443d; --on-navy-dim: #cfc8bb;
  --red: #b8322a; --red-lt: #ee8c83; --on-page: #2a2118;
}
/* Cristal: Pokémon Cristal, verde azulado profundo, acento coral */
html[data-tema="cristal"] {
  --c0: #12303a; --c1: #4b6870; --c2: #1f6b76; --c3: #247a86; --c4: #f3f9f9; --shade: #dfeded;
  --navy: #123e48; --navy-dk: #0a2a31; --navy-lt: #1d5864; --on-navy-dim: #b5d3d8;
  --red: #c9472f; --red-lt: #f0a090; --on-page: #f3f9f9;
}
/* Plata: Pokémon Plata, gris pizarra, acento naranja */
html[data-tema="plata"] {
  --c0: #1c2128; --c1: #555d6b; --c2: #7a8493; --c3: #8a94a3; --c4: #f2f3f5; --shade: #e1e4e8;
  --navy: #2b3340; --navy-dk: #181d26; --navy-lt: #414c5d; --on-navy-dim: #c1c8d4;
  --red: #c4461a; --red-lt: #f2a07f; --on-page: #1c2128;
}
/* Charmander: naranja quemado, tinta café, acento rojo ladrillo */
html[data-tema="charmander"] {
  --c0: #2b1a10; --c1: #6a5445; --c2: #cb6a2a; --c3: #e07a35; --c4: #fbf8f4; --shade: #efe8df;
  --navy: #3b2417; --navy-dk: #24140b; --navy-lt: #5a3a28; --on-navy-dim: #dcc7b8;
  --red: #b3321f; --red-lt: #f0a08f; --on-page: #2b1a10;
}
/* Pocket: Game Boy Pocket en blanco y negro; solo el dorado de lxs invitadxs de honor tiene color */
html[data-tema="pocket"] {
  --c0: #17181a; --c1: #5c5f63; --c2: #a3a39f; --c3: #b4b4b0; --c4: #f6f6f4; --shade: #e2e2df;
  --navy: #232528; --navy-dk: #111214; --navy-lt: #3d4044; --on-navy-dim: #c4c6c9;
  --red: #17181a; --red-lt: #9a9c9f; --on-page: #17181a;
}

svg.spr { display: block; shape-rendering: crispEdges; }
.c0 { fill: var(--c0); } .c1 { fill: var(--c1); } .c2 { fill: var(--c2); } .c3 { fill: var(--c3); }

/* HUD */
.hud {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center;
  padding: 10px var(--gut); background: var(--navy); color: var(--c4);
  font-family: var(--f-display); font-size: .65rem; line-height: 1.6; letter-spacing: .04em;
}
.hud-hp { display: inline-flex; align-items: center; gap: 6px; }
#hud-hearts { display: inline-flex; gap: 3px; }
#hud-hearts svg { width: 12px; height: 12px; }
#hud-hearts .c0 { fill: var(--red-lt); }

/* Layout */
.wrap { max-width: 1040px; margin: 0 auto; padding: 24px var(--gut) 40px; }
.cols { display: grid; gap: 24px; }
.hero, .stack { display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) {
  .wrap { padding-top: 40px; }
  .cols { grid-template-columns: 5fr 6fr; gap: 32px; align-items: start; }
}
/* Panel fijo solo si cabe completo en pantalla; así nunca queda cortado ni tapa el pie */
@media (min-width: 900px) and (min-height: 820px) {
  .hero { position: sticky; top: 24px; }
}

/* Ventana RPG */
.window {
  position: relative; padding: 20px; background: var(--c4); color: var(--c0);
  border: 4px solid var(--c0);
  box-shadow: inset 0 0 0 3px var(--c4), inset 0 0 0 5px var(--c1);
  clip-path: polygon(0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
    calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch)));
}
.window.dark { background: var(--navy); color: var(--c4); box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 5px var(--navy-lt); }
.w-title {
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 4px solid var(--c0);
  font-family: var(--f-display); font-weight: 400; font-size: .8rem; line-height: 1.5; letter-spacing: .04em;
}

/* Hero */
.title-card { padding-top: 16px; }
.kicker { margin: 0 0 14px; text-align: center; font-weight: 600; font-size: 1.05rem; letter-spacing: .12em; line-height: 1.2; color: var(--c1); text-wrap: balance; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { margin: 0; display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 400; }
.t-small { font-size: clamp(1.1rem, 5vw, 1.5rem); letter-spacing: .12em; }
.t-big { font-size: clamp(5rem, 22vw, 7.5rem); line-height: 1; color: var(--red); text-shadow: 4px 4px 0 var(--shade); margin-left: -4px; }
.cake { width: clamp(96px, 26vw, 140px); flex: none; animation: bob 1.2s steps(2) infinite; }
.cake svg { width: 100%; height: auto; }
.cake .c1 { fill: var(--navy); } .cake .c2 { fill: var(--red); } .cake .c3 { fill: var(--red-lt); }
.party svg .c0 { fill: var(--red); }
@keyframes bob { 50% { transform: translateY(-4px); } }

.dialog { padding: 16px 20px 26px; min-height: 8.5rem; }
.speaker { margin: 0 0 8px; font-family: var(--f-display); font-size: .65rem; color: var(--red-lt); letter-spacing: .08em; }
.speech { margin: 0; font-size: 1.3rem; line-height: 1.5; max-width: 52ch; }
.speech .rest { opacity: 0; }
.ribbon { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px;
  font-family: var(--f-display); font-size: .65rem; line-height: 1.6; letter-spacing: .06em; color: var(--gold); text-align: center; }
.ribbon[hidden] { display: none; }
.ribbon svg { width: 22px; height: 22px; flex: none; }
.ribbon .c0 { fill: var(--gold); }
.window.honor { box-shadow: inset 0 0 0 3px var(--c4), inset 0 0 0 6px var(--gold), inset 0 0 0 7px var(--c0); }
.party li.honor-slot { background: var(--c4); }
.party li.honor-slot .tag { color: var(--c0); }
.unlocked.honor .conf:nth-child(4n) { background: var(--gold); }
.unlocked.honor .badge { display: inline-block; margin: 0 0 12px; padding: 6px 10px; background: var(--navy); color: var(--gold); font-family: var(--f-display); font-size: .55rem; line-height: 1.6; }
.more { position: absolute; right: 18px; bottom: 10px; font-size: .9rem; animation: blink .9s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick li {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 12px 6px; background: var(--c4); border: 4px solid var(--c0); font-weight: 600; font-size: 1.05rem; line-height: 1.2;
}
.quick svg { width: 28px; height: 28px; }
@media (max-width: 420px) { .quick { gap: 8px; } .quick li { padding: 10px 4px; font-size: .95rem; } .quick svg { width: 24px; height: 24px; } .kicker { letter-spacing: .06em; font-size: 1rem; } }

/* Botones */
.btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer; border: 4px solid var(--c0);
  padding: 16px 18px; min-height: 52px; background: var(--navy); color: var(--c4);
  font-family: var(--f-display); font-size: .7rem; line-height: 1.6; letter-spacing: .04em;
  box-shadow: 0 4px 0 var(--navy-dk); transition: transform .08s steps(2);
}
.btn:hover { background: var(--navy-lt); }
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn.ghost { background: var(--c4); color: var(--c0); }
.btn.ghost:hover { background: var(--shade); }
.cta { display: block; }
a:focus-visible, button:focus-visible, .choice:has(input:focus-visible), .check:has(input:focus-visible) { outline: 4px dashed var(--c0); outline-offset: 4px; }
.dark a:focus-visible, .dark button:focus-visible { outline-color: var(--c4); }

/* Misión */
.quest { margin: 0; display: grid; gap: 14px; }
.quest > div { display: grid; grid-template-columns: 28px 1fr; gap: 6px 14px; align-items: start; }
.quest svg { width: 28px; height: 28px; grid-row: 1 / span 2; align-self: center; }
.quest dt { font-weight: 600; font-size: 1rem; letter-spacing: .08em; line-height: 1.2; color: var(--c1); grid-column: 2; }
.quest dd { margin: 0; grid-column: 2; grid-row: 2; font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.quest dd small { display: block; margin-top: 2px; font-weight: 400; font-size: 1.1rem; }
.quest .pending { color: var(--c1); font-weight: 400; }

/* Menú con cursor */
.menu { list-style: none; margin: 20px 0 0; padding: 14px 0 0; border-top: 4px solid var(--c0); display: grid; gap: 2px; }
.menu a {
  position: relative; display: block; padding: 11px 12px 11px 34px; min-height: 44px; color: var(--c0); text-decoration: none;
  font-family: var(--f-display); font-size: .65rem; line-height: 1.7;
}
.menu a::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 14px; margin-top: -7px; background: var(--c0);
  clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0;
}
.menu a:hover, .menu a:focus-visible { background: var(--shade); }
.menu a:hover::before, .menu a:focus-visible::before { opacity: 1; animation: blink 1s steps(2, start) infinite; }

/* Cuenta regresiva + XP */
.count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.count div { background: var(--navy); color: var(--c4); padding: 12px 2px 8px; }
.count b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.1rem, 5.5vw, 1.6rem); line-height: 1.3; }
.count small { font-size: .95rem; letter-spacing: .06em; color: var(--on-navy-dim); }
.xp { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.xp-bar { flex: 1; height: 16px; border: 4px solid var(--c0); background: var(--c4); padding: 2px; }
.xp-bar i { display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.2s steps(12); }
.xp-txt { font-family: var(--f-display); font-size: .6rem; line-height: 1.6; white-space: nowrap; }

/* RSVP */
.party { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.party li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 4px solid var(--c0); background: var(--shade); font-weight: 600; font-size: 1.2rem; }
.party svg { width: 32px; height: 24px; }
.party .tag { font-size: 1rem; letter-spacing: .08em; color: var(--c1); font-weight: 600; }
.party li.empty { background: transparent; border-style: dashed; color: var(--c1); }
.party li.empty svg { opacity: .35; }
.ask { margin: 0 0 12px; font-family: var(--f-display); font-size: .7rem; line-height: 1.7; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: block; text-align: center; padding: 16px 8px 16px 24px; min-height: 56px; position: relative; border: 4px solid var(--c0); background: var(--c4); font-family: var(--f-display); font-size: .65rem; line-height: 1.7; }
.choice span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 10px; height: 12px; margin-top: -6px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; }
.choice input:checked + span { background: var(--navy); color: var(--c4); }
.choice input:checked + span::before { opacity: 1; }
.choice:hover span { background: var(--shade); }
.choice:hover input:checked + span { background: var(--navy); }
.check { display: flex; gap: 14px; align-items: center; margin: 0 0 18px; cursor: pointer; position: relative; font-weight: 600; font-size: 1.25rem; min-height: 44px; }
.check input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; cursor: pointer; }
.check span::before { content: ""; display: inline-block; width: 28px; height: 28px; margin-right: 14px; vertical-align: middle; border: 4px solid var(--c0); background: var(--c4); }
.check input:checked + span::before { background: var(--red); box-shadow: inset 0 0 0 4px var(--c4); }
.hidden { display: none !important; }

.unlocked { position: relative; overflow: hidden; text-align: center; padding: 20px 8px 6px; }
.unlocked h3 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: .85rem; line-height: 1.6; }
.unlocked p { margin: 0 0 14px; }
.unlocked.no h3 { font-size: .75rem; }
.note { color: var(--c1); margin: 0 0 14px; }
.err { margin: 14px 0 0; padding: 12px; border: 4px solid var(--red); background: var(--c4); color: var(--c0); font-weight: 600; }
.demo { margin: 14px 0 0; padding: 8px; background: var(--navy); color: var(--c4); font-size: 1rem; text-align: center; }
.conf { position: absolute; top: -10px; width: 8px; height: 8px; background: var(--navy); animation: fall 1.8s steps(14) forwards; }
.conf:nth-child(3n) { background: var(--red); } .conf:nth-child(3n+1) { background: var(--c0); }
@keyframes fall { to { transform: translateY(260px) rotate(180deg); opacity: 0; } }
.foot { text-align: center; font-size: 1rem; color: var(--on-page); margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cake, .more, .menu a::before { animation: none !important; }
  .conf { display: none; }
  .xp-bar i { transition: none; }
}