/* ============================================================
   Brújula Social RPG — estética "consola JRPG" (pixel)
   Paleta propia, oscura y comprometida. Se aparta del libro a
   propósito: entras a un mini-juego. No toca book.css.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");

.rpg {
  --rpg-bg:#0e0b1a;
  --rpg-stage:#171130;
  --rpg-panel:#1d1640;
  --rpg-panel-2:#2a2057;
  --rpg-edge:#0a0716;
  --rpg-line:#cdbbff;          /* borde claro doble */
  --rpg-ink:#f6f2ff;
  --rpg-ink-soft:#c7bdf0;
  --rpg-gold:#ffce4a;          /* acento / marca */
  --rpg-clarity:#56b6e6;
  --rpg-respect:#67d98a;
  --rpg-bond:#ff7aa2;
  --rpg-asertiva:#67d98a;
  --rpg-pasiva:#7da6d8;
  --rpg-agresiva:#ff6b6b;
  --rpg-evasiva:#ffc24a;
  --rpg-pix:"Press Start 2P", ui-monospace, monospace;
  --rpg-read:"VT323", ui-monospace, monospace;
  --rpg-shadow:6px 6px 0 var(--rpg-edge);
  --z-hud:5;

  max-width:960px;
  margin:0 auto;
  padding:clamp(12px,3vw,28px) clamp(12px,3vw,24px) 64px;
  /* El marco respeta el tema del libro; la "consola" oscura vive dentro del juego. */
  color:var(--ink);
  font-family:var(--font-body);
}

/* La página respeta el tema (light/dark) de book.css; ya no se fuerza el fondo oscuro. */
body.rpg-page .activity-head{display:none}

/* utilidades de marco "pixel" (doble borde duro) */
.rpg-frame{
  border:3px solid var(--rpg-line);
  box-shadow:0 0 0 3px var(--rpg-edge), var(--rpg-shadow);
  background:var(--rpg-panel);
  border-radius:2px;
}

img.rpg-bg, img.rpg-sprite{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- intro de la página (respeta el tema del libro) ---------- */
.rpg-intro{ text-align:center; margin:8px 0 22px }
.rpg-intro h1{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(2rem,5vw,3.2rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 12px;
}
.rpg-intro p{
  font-family:var(--font-body); font-size:clamp(1.05rem,2.2vw,1.2rem);
  color:var(--ink-soft); max-width:54ch; margin:0 auto; line-height:1.5;
}

/* ---------- selector de modo (Explorar / Reto) ---------- */
.rpg-modes{
  display:flex; gap:12px; max-width:680px; margin:0 auto 22px; flex-wrap:wrap;
}
.rpg-mode{
  flex:1 1 220px; text-align:left; cursor:pointer;
  background:var(--paper-raised); color:var(--ink);
  border:var(--bw) solid var(--rule); border-radius:var(--rad);
  padding:14px 16px; transition:border-color .12s, box-shadow .12s, transform .12s;
}
.rpg-mode:hover{ transform:translateY(-1px) }
.rpg-mode:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.rpg-mode[aria-checked="true"]{
  border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);
}
.rpg-mode__name{
  display:block; font-family:var(--font-mono); font-weight:700; font-size:.95rem;
  letter-spacing:.01em; color:var(--ink); margin-bottom:4px;
}
.rpg-mode[aria-checked="true"] .rpg-mode__name{ color:var(--accent) }
.rpg-mode__name::before{ content:"○ " }
.rpg-mode[aria-checked="true"] .rpg-mode__name::before{ content:"● " }
.rpg-mode__desc{
  display:block; font-family:var(--font-body); font-size:.95rem; line-height:1.4; color:var(--ink-soft);
}

/* ============================================================
   Pantalla de selección de caso
   ============================================================ */
.rpg-cases{ display:flex; flex-direction:column; gap:16px; max-width:680px; margin:0 auto }
.rpg-case{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"title go""tag go""comp go";
  gap:2px 16px; align-items:center; text-align:left; cursor:pointer;
  border:3px solid var(--rpg-line); box-shadow:0 0 0 3px var(--rpg-edge), var(--rpg-shadow);
  background:var(--rpg-panel); color:var(--rpg-ink); border-radius:2px;
  padding:18px 20px; transition:transform .12s cubic-bezier(.2,.7,.2,1), box-shadow .12s, background .15s;
}
.rpg-case:hover, .rpg-case:focus-visible{
  transform:translate(-2px,-2px); background:var(--rpg-panel-2);
  box-shadow:0 0 0 3px var(--rpg-edge), 9px 9px 0 var(--rpg-edge); outline:none;
}
.rpg-case:focus-visible{ border-color:var(--rpg-gold) }
.rpg-case__title{ grid-area:title; font-family:var(--rpg-pix); font-size:.82rem; color:var(--rpg-gold); line-height:1.4 }
.rpg-case__tag{ grid-area:tag; font-size:1.25rem; color:var(--rpg-ink); line-height:1.1 }
.rpg-case__comp{ grid-area:comp; font-family:var(--rpg-pix); font-size:.52rem; color:var(--rpg-ink-soft); line-height:1.7; letter-spacing:.02em }
.rpg-case__go{ grid-area:go; font-family:var(--rpg-pix); font-size:.62rem; color:var(--rpg-ink); white-space:nowrap }

/* ============================================================
   Pantalla de juego — "consola" siempre oscura (no depende del tema)
   ============================================================ */
#rpgGame{
  background:var(--rpg-bg); color:var(--rpg-ink);
  border:3px solid var(--rpg-line); box-shadow:0 0 0 3px var(--rpg-edge);
  border-radius:4px; padding:clamp(10px,2.5vw,18px);
}
.rpg-stage{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:3px solid var(--rpg-line); box-shadow:0 0 0 3px var(--rpg-edge), var(--rpg-shadow);
  background:
    radial-gradient(120% 90% at 50% 8%, #2a2057 0%, var(--rpg-stage) 55%, var(--rpg-edge) 100%);
  border-radius:2px;
}
/* rejilla sutil tipo pixel-map cuando no hay fondo cargado */
.rpg-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(90deg, rgba(205,187,255,.06) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(205,187,255,.06) 0 1px, transparent 1px 100%);
  background-size:32px 32px;
}
img.rpg-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .3s ease;
}
img.rpg-bg.is-loaded{ opacity:1 }

img.rpg-sprite{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  height:82%; width:auto; max-width:60%; object-fit:contain; object-position:bottom;
  opacity:0; transition:opacity .25s ease;
  filter:drop-shadow(5px 6px 0 var(--rpg-edge));
}
img.rpg-sprite.is-loaded{ opacity:1; animation:rpg-pop .3s cubic-bezier(.2,.7,.2,1) }
/* placeholder cuando aún no hay PNG: silueta pixel */
img.rpg-sprite:not(.is-loaded){
  opacity:1; width:120px; height:62%; max-width:40%;
  background:
    linear-gradient(180deg, var(--rpg-panel-2) 0 30%, var(--rpg-panel) 30% 100%);
  border:3px solid var(--rpg-line); border-bottom:0; border-radius:6px 6px 0 0;
}
img.rpg-sprite:not(.is-loaded)::after{
  content:"?"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--rpg-pix); font-size:1.4rem; color:var(--rpg-ink-soft);
}
@keyframes rpg-pop{ from{ transform:translateX(-50%) translateY(6px); opacity:0 } to{ transform:translateX(-50%); opacity:1 } }

/* HUD: métricas sobre el escenario */
.rpg-hud{
  position:absolute; top:10px; left:10px; right:10px; z-index:var(--z-hud);
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  padding:8px 10px; background:rgba(10,7,22,.78); border:2px solid var(--rpg-line); border-radius:2px;
  backdrop-filter:blur(2px);
}
.rpg-turn{ font-family:var(--rpg-pix); font-size:.52rem; color:var(--rpg-gold); margin-right:auto }
.rpg-meter{ display:flex; align-items:center; gap:6px; font-family:var(--rpg-pix); font-size:.5rem; color:var(--rpg-ink-soft) }
.rpg-meter__track{ width:84px; height:10px; border:2px solid var(--rpg-line); background:var(--rpg-edge); position:relative; overflow:hidden }
.rpg-meter__fill{ position:absolute; inset:0; transform:scaleX(.5); transform-origin:left center; transition:transform .3s cubic-bezier(.2,.7,.2,1) }
.rpg-meter__fill--clarity{ background:var(--rpg-clarity) }
.rpg-meter__fill--respect{ background:var(--rpg-respect) }
.rpg-meter__fill--bond{ background:var(--rpg-bond) }
.rpg-meter__val{ font-size:.58rem; color:var(--rpg-ink); min-width:1.6em; text-align:right }

/* Caja de diálogo JRPG */
.rpg-dialog{
  position:relative; margin-top:-6px; padding:22px 22px 18px;
  border:3px solid var(--rpg-line); box-shadow:0 0 0 3px var(--rpg-edge), var(--rpg-shadow);
  background:var(--rpg-panel); border-radius:2px; min-height:92px;
}
.rpg-speaker{
  position:absolute; top:-15px; left:16px; font-family:var(--rpg-pix); font-size:.62rem;
  color:var(--rpg-edge); background:var(--rpg-gold); padding:6px 10px; border:3px solid var(--rpg-line);
  border-radius:2px; box-shadow:3px 3px 0 var(--rpg-edge);
}
.rpg-line{
  margin:0; font-family:var(--rpg-read); font-size:clamp(1.25rem,2.8vw,1.6rem);
  line-height:1.3; color:var(--rpg-ink); cursor:pointer; min-height:1.3em;
}
.rpg-line.is-typing::after{
  content:"▋"; color:var(--rpg-gold); animation:rpg-blink .6s steps(1) infinite; margin-left:2px;
}
@keyframes rpg-blink{ 50%{ opacity:0 } }

/* Decisión: prompt + opciones */
.rpg-decision{ margin-top:18px }
.rpg-prompt{
  font-family:var(--rpg-pix); font-size:.66rem; line-height:1.7; color:var(--rpg-gold);
  margin:0 0 14px; text-shadow:2px 2px 0 var(--rpg-edge);
}
.rpg-choices{ display:flex; flex-direction:column; gap:10px }
.rpg-choice{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:stretch; text-align:left; cursor:pointer;
  border:3px solid var(--rpg-line); box-shadow:0 0 0 3px var(--rpg-edge), 4px 4px 0 var(--rpg-edge);
  background:var(--rpg-panel); color:var(--rpg-ink); border-radius:2px; padding:0;
  transition:transform .1s cubic-bezier(.2,.7,.2,1), box-shadow .1s, background .15s;
  overflow:hidden;
}
.rpg-choice:hover:not(:disabled), .rpg-choice:focus-visible{
  transform:translate(-2px,-2px); background:var(--rpg-panel-2);
  box-shadow:0 0 0 3px var(--rpg-edge), 7px 7px 0 var(--rpg-edge); outline:none;
}
.rpg-choice:focus-visible{ border-color:var(--rpg-gold) }
.rpg-choice__k{
  display:grid; place-items:center; min-width:40px; font-family:var(--rpg-pix); font-size:.8rem;
  color:var(--rpg-edge); background:var(--rpg-gold); border-right:3px solid var(--rpg-line);
}
.rpg-choice__body{ display:block; padding:12px 14px 12px 0 }
.rpg-choice__type{ display:block; font-family:var(--rpg-pix); font-size:.52rem; margin-bottom:6px; letter-spacing:.02em }
.rpg-choice__text{ display:block; font-family:var(--rpg-read); font-size:1.28rem; line-height:1.22; color:var(--rpg-ink) }
.rpg-choice[data-type="Asertiva"] .rpg-choice__type{ color:var(--rpg-asertiva) }
.rpg-choice[data-type="Pasiva"]   .rpg-choice__type{ color:var(--rpg-pasiva) }
.rpg-choice[data-type="Agresiva"] .rpg-choice__type{ color:var(--rpg-agresiva) }
.rpg-choice[data-type="Evasiva"]  .rpg-choice__type{ color:var(--rpg-evasiva) }
.rpg-choice.is-picked{ transform:translate(2px,2px); box-shadow:0 0 0 3px var(--rpg-edge), 1px 1px 0 var(--rpg-edge); background:var(--rpg-panel-2) }
.rpg-choice:disabled{ cursor:default; opacity:.62 }
.rpg-choice.is-picked{ opacity:1 }

/* Feedback */
.rpg-feedback{
  margin-top:14px; padding:14px 16px; background:var(--rpg-edge);
  border:3px solid var(--rpg-line); border-radius:2px;
}
.rpg-fb-type{ font-family:var(--rpg-pix); font-size:.52rem; display:inline-block; margin-bottom:6px }
.rpg-fb-type[data-type="Asertiva"]{ color:var(--rpg-asertiva) }
.rpg-fb-type[data-type="Pasiva"]{ color:var(--rpg-pasiva) }
.rpg-fb-type[data-type="Agresiva"]{ color:var(--rpg-agresiva) }
.rpg-fb-type[data-type="Evasiva"]{ color:var(--rpg-evasiva) }
.rpg-feedback strong{ display:block; font-family:var(--rpg-read); font-size:1.35rem; color:var(--rpg-gold); line-height:1.2; margin-bottom:4px }
.rpg-feedback p{ margin:0; font-family:var(--rpg-read); font-size:1.2rem; line-height:1.3; color:var(--rpg-ink-soft); max-width:none }
.rpg-fb-delta{ display:block; margin-top:10px; font-family:var(--rpg-pix); font-size:.5rem; line-height:1.8; letter-spacing:.02em }
.rpg-fb-delta .is-up{ color:var(--rpg-respect) }
.rpg-fb-delta .is-down{ color:var(--rpg-agresiva) }
.rpg-fb-delta__sep{ color:var(--rpg-ink-soft) }

/* Botón continuar / acciones pixel */
.rpg-next, .rpg-btn{
  margin-top:16px; font-family:var(--rpg-pix); font-size:.66rem; cursor:pointer;
  color:var(--rpg-edge); background:var(--rpg-gold); border:3px solid var(--rpg-line);
  border-radius:2px; padding:12px 16px; box-shadow:0 0 0 3px var(--rpg-edge), 4px 4px 0 var(--rpg-edge);
  transition:transform .08s, box-shadow .08s;
}
.rpg-next:active, .rpg-btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 3px var(--rpg-edge), 0 0 0 var(--rpg-edge) }
.rpg-btn--ghost{ background:var(--rpg-panel); color:var(--rpg-ink) }

/* ============================================================
   Pantalla de resultado
   ============================================================ */
/* Fuera del juego: tipografía legible del libro, respeta el tema. */
.rpg-result{ max-width:660px; margin:0 auto }
.rpg-result__badge{
  display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:.8rem;
  letter-spacing:.02em; color:var(--paper); background:var(--accent);
  border-radius:999px; padding:5px 13px; margin-bottom:14px;
}
.rpg-result h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 12px }
.rpg-result__text{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.2rem,2.4vw,1.45rem); line-height:1.45; color:var(--ink); max-width:44ch; margin:0 0 10px }
.rpg-result__profile{ font-family:var(--font-mono); font-size:.85rem; line-height:1.6; color:var(--muted); margin:0 0 26px }

.rpg-fundamento{ margin:0 0 24px }
.rpg-fundamento h3{ font-family:var(--font-mono); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:0 0 10px }

/* Riesgo pedagógico */
.rpg-result__risk{ font-family:var(--font-body); font-size:1.05rem; line-height:1.5; color:var(--ink-soft); margin:0; max-width:60ch }

/* Qué ajustar */
.rpg-actions-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.rpg-action{ position:relative; padding-left:1.6em; font-family:var(--font-body); font-size:1.05rem; line-height:1.5; color:var(--ink); max-width:60ch }
.rpg-action::before{ content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700 }

/* Frase modelo (cita) */
.rpg-phrase{ margin:0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.2rem,2.6vw,1.5rem); line-height:1.4; color:var(--ink); max-width:46ch }

/* Tarjetas (siguiente práctica, fundamentos, referencias) */
.rpg-grounds, .rpg-skills, .rpg-refs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.rpg-ground, .rpg-skill, .rpg-ref{
  background:var(--paper-raised); border:1px solid color-mix(in srgb, var(--rule) 22%, transparent);
  border-radius:var(--rad); padding:12px 14px;
}
.rpg-skill strong{ display:block; font-family:var(--font-mono); font-weight:700; font-size:.82rem; letter-spacing:.02em; color:var(--accent); margin-bottom:5px }
.rpg-skill span{ display:block; font-family:var(--font-body); font-size:1rem; line-height:1.45; color:var(--ink-soft) }
.rpg-ground__marco{ display:block; font-family:var(--font-mono); font-weight:700; font-size:.78rem; letter-spacing:.02em; color:var(--accent); margin-bottom:4px }
.rpg-ground__cita{ display:block; font-family:var(--font-body); font-size:1rem; line-height:1.45; color:var(--ink-soft) }
.rpg-ground.is-provisional .rpg-ground__marco::after{ content:" · por verificar"; color:var(--muted) }
.rpg-ref__org{ display:block; font-family:var(--font-mono); font-weight:500; font-size:.78rem; color:var(--muted); margin-bottom:3px }
.rpg-ref__title{ display:block; font-family:var(--font-body); font-weight:500; font-size:1.05rem; line-height:1.35; color:var(--ink); margin-bottom:3px }
.rpg-ref__title a{ color:var(--accent); border-bottom:1px solid currentColor; text-decoration:none }
.rpg-ref__title a:hover{ border-bottom-color:transparent }
.rpg-ref__note{ display:block; font-family:var(--font-body); font-size:.95rem; line-height:1.4; color:var(--muted) }

.rpg-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px }
.rpg-actions a.rpg-btn{ text-decoration:none; display:inline-block; border-bottom:3px solid var(--rpg-line) }
.rpg-btn--alt{ background:var(--rpg-clarity); color:var(--rpg-edge) }

/* ============================================================
   Transición suave entre pantallas
   ============================================================ */
#rpgSelect:not([hidden]), #rpgGame:not([hidden]), #rpgResult:not([hidden]){
  animation:rpg-screen-in .28s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rpg-screen-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:560px){
  .rpg-stage{ aspect-ratio:4/3 }
  .rpg-hud{ gap:6px 10px }
  .rpg-meter__track{ width:64px }
  .rpg-case{ grid-template-columns:1fr; grid-template-areas:"title""tag""comp""go"; gap:6px }
  .rpg-case__go{ justify-self:start }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .rpg-case, .rpg-choice, .rpg-next, .rpg-btn, .rpg-mode, img.rpg-sprite, img.rpg-bg, .rpg-meter__fill{ transition:none !important; animation:none !important }
  #rpgSelect, #rpgGame, #rpgResult{ animation:none !important }
  .rpg-line.is-typing::after{ animation:none }
}