/* ==========================================================================
 * SHENMEN — el acabado
 *
 * Capa encima de style.css: no cambia la estructura del juego, cambia cómo se
 * lee y cómo se toca. Tres ideas:
 *
 *  1. La letra. Cinzel para los títulos (ya estaba en la portada), Alegreya
 *     Sans para la interfaz y Alegreya —una serif hecha para leer largo— para
 *     todo lo que se cuenta: la crónica, el maestro, las cartas. Las tres son
 *     libres (SIL OFL) y van servidas desde assets/fonts, sin llamar a nadie.
 *     Los lienzos siguen en su monoespaciada: son pixel art.
 *  2. La materia. Laca, oro y jade, la paleta de siempre, pero con cuerpo: los
 *     paneles tienen filo de oro, los botones se hunden al pulsarlos y nada late
 *     si no pide atención de verdad.
 *  3. El dedo. En un teléfono el juego entero cabe y se toca: el menú se pliega,
 *     las salas se deslizan, el modal es una hoja a pantalla completa y los
 *     minijuegos conservan su proporción.
 * ========================================================================== */

/* ---------- La letra ---------- */
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-sans-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-weight: 400 800; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 400 800; font-style: normal; font-display: swap;
  src: url("../assets/fonts/alegreya-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../assets/fonts/alegreya-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../assets/fonts/alegreya-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font-ui: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-text: "Alegreya", Georgia, "Times New Roman", serif;
  --font-title: "Cinzel", "Trajan Pro", Georgia, serif;
  --gold-hi: #f6dc8c;
  --gold: #d4ad55;
  --gold-lo: #8a6f2f;
  --lacquer: #7c2a20;
  --ink: #120e0b;
  --hair: rgba(212, 173, 85, .28);       /* el filo de oro de los paneles */
  --hair-strong: rgba(212, 173, 85, .55);
  --panel-grad: linear-gradient(180deg, #3a2f24 0%, #2f261d 100%);
  --press: 0 2px 0 rgba(0, 0, 0, .55);
  --lift: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .4);
  --radius: 3px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

html, body {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
body {
  background:
    radial-gradient(1100px 520px at 28% -12%, rgba(124, 42, 32, .22) 0%, transparent 62%),
    radial-gradient(900px 600px at 110% 110%, rgba(74, 138, 110, .10) 0%, transparent 60%),
    var(--bg);
}
#app { height: 100vh; height: 100dvh; }
button, input, select, textarea { font-family: var(--font-ui); }
strong, b { font-weight: 700; }

/* Las cifras se alinean: la caja no baila al contar */
.chip, .stat-cell strong, .subasta-precio, .clock-inline, #v-coins, #v-reputation, #v-day, #v-level {
  font-variant-numeric: tabular-nums;
}

/* La narrativa se lee en serif, más grande y con aire */
.cronica-texto, .prologue-text, .dialogo, .carta, .ending-body, .ending-hilo, .mentor-text,
.epidemia-desc, .veil-text, .title-text, .patient-line, .consejo-vuelta .dialogo,
.hilo-actos, .hilo-espera, .obra-nota, .ficha-hoja, .examen-caso {
  font-family: var(--font-text);
  font-weight: 400;
  letter-spacing: .005em;
}
.cronica-texto, .prologue-text, .ending-body { font-size: 16.5px !important; line-height: 1.7 !important; }
.dialogo, .carta { font-size: 16px !important; }
.mentor-text { font-size: 15.5px; line-height: 1.55; }
.title-text { font-size: 15.5px; line-height: 1.65; }
.hint { font-size: 13.5px; line-height: 1.5; font-weight: 500; }
#modal-content p { font-size: 14.5px; }

/* Títulos: Cinzel con oro */
/* Oro liso, no degradado recortado: el recorte convertía los emojis del título
 * en cuadros dorados. */
#modal-content h3 {
  font-family: var(--font-title); font-weight: 700;
  font-size: 19px; letter-spacing: .06em;
  color: #f1d27e;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(232, 196, 106, .25);
  margin-bottom: 14px;
  padding-right: 34px; padding-left: 34px;   /* el aspa no pisa el título */
}
#modal-content h4 { font-family: var(--font-ui); font-weight: 800; letter-spacing: .04em; }
#modal-content h3::after {
  content: ""; display: block; height: 1px; margin: 9px auto 0; width: min(220px, 60%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- La barra de arriba ---------- */
#topbar {
  background: linear-gradient(180deg, #2c241c 0%, #221b15 100%);
  border-bottom: 1px solid var(--hair-strong);
  box-shadow: 0 1px 0 #000, 0 6px 18px rgba(0, 0, 0, .35);
  padding: 8px 14px; padding-top: calc(8px + var(--safe-t));
  font-size: 13.5px;
  position: relative; z-index: 10;
}
#topbar .brand {
  font-family: var(--font-title); font-weight: 800; font-size: 16px; letter-spacing: .2em;
  background: linear-gradient(180deg, #fff3c4, #d4ad55 60%, #9c7a30);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.chips { min-width: 0; }
.chips .chip { flex: 0 0 auto; }
.chip {
  background: linear-gradient(180deg, #1d1712, #17120e);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 999px;
  padding: 4px 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .6);
  font-weight: 700;
}
.chip span { color: var(--gold-hi); }
.chip .fx-up { color: #8fe3bd !important; text-shadow: 0 0 10px rgba(143, 227, 189, .6); }
.chip .fx-down { color: #ff9a85 !important; text-shadow: 0 0 10px rgba(255, 120, 100, .5); }
.chip-clock .clock-track { border-radius: 99px; border-color: rgba(0, 0, 0, .8); }
.chip-clock .clock-fill { border-radius: 99px; }

.icon-btn, .room-btn {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, #43372a, #362c22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--press);
  color: #eadfcb;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease, color .15s;
}
.icon-btn:hover, .room-btn:hover:not(.active):not(:disabled) {
  background: linear-gradient(180deg, #54442f, #433626); color: #fff6e0;
}
.icon-btn:active, .room-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }

#room-nav {
  background: linear-gradient(180deg, #2a221b, #241d17);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  padding: 7px 14px;
}
.room-btn { color: var(--muted); padding: 6px 13px; }
.room-btn.active {
  color: #fff3d6;
  background: linear-gradient(180deg, #4f8f72, #3b7158);
  border-color: #1f4434;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(212, 173, 85, .35), var(--press);
}
.room-resources { font-size: 12.5px; }

/* ---------- El escenario ---------- */
canvas#game {
  border: 3px solid #0d0a08;
  outline: none;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px var(--hair-strong),
    0 0 0 7px #2a2019,
    0 0 0 8px rgba(0, 0, 0, .6),
    0 18px 40px rgba(0, 0, 0, .55);
  touch-action: manipulation;
}
.stage-fade { position: absolute; inset: 0; pointer-events: none; background: #0b0807; opacity: 0; z-index: 3; }
.stage-fade.on { animation: stage-fade .42s ease both; }
@keyframes stage-fade { 0% { opacity: .9; } 100% { opacity: 0; } }

#panel .hint { line-height: 1.55; }
.goal-chip {
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2a221b, #231c16);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 3px solid var(--gold-lo);
  padding: 6px 10px; font-size: 13px; font-weight: 600;
}
.goal-chip.done { border-left-color: var(--jade); background: linear-gradient(180deg, #23342b, #1d2b23); }

/* ---------- El modal ---------- */
#modal {
  background: radial-gradient(ellipse at center, rgba(10, 8, 6, .62) 0%, rgba(6, 5, 4, .88) 100%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#modal-box {
  background:
    radial-gradient(700px 240px at 50% -60px, rgba(212, 173, 85, .09), transparent 70%),
    var(--panel-grad);
  border: 1px solid #0b0806;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px var(--hair),
    inset 0 0 0 5px rgba(0, 0, 0, .18),
    inset 0 0 0 6px rgba(212, 173, 85, .10),
    0 24px 70px rgba(0, 0, 0, .65);
  /* 7 px de marco (las sombras interiores); el resto del aire lo pone el
     contenido, que es quien se desplaza, para que nunca pise el filo */
  padding: 7px;
  /* Arriba, una franja propia para el aspa: el contenido se desplaza por
     debajo de ella, nunca bajo el botón */
  padding-top: 46px;
  animation: modal-in .26s cubic-bezier(.2, .9, .25, 1.05);
}
#modal-content {
  padding: 2px 19px 17px;
  scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to { opacity: 1; transform: none; }
}
.modal-close-btn {
  border-radius: 999px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; font-size: 15px;
  top: 9px; right: 9px; z-index: 2;
}
/* Sin aspa (decisiones obligatorias) no hace falta la franja */
#modal-box:has(> .modal-close-btn.hidden) { padding-top: 7px; }
#modal-box:has(> .modal-close-btn.hidden) > #modal-content { padding-top: 15px; }

/* Las fichas y recuadros del modal: un poco de cuerpo y filo */
.ficha-clinica, .diag-header, .findings-box, .bagang-box, .bagang-review, .tongue-panel, .cronica,
.needle-prompt, .quick-consult, .shop-card, .stat-cell, .achievement-card, .hilo-card, .obra-row,
.protocolo-row, .examen-caso, .caso-cab, .herb-shop-row, .cuaderno, .cuaderno-filtros, .nurse-list {
  border-radius: var(--radius);
  border-color: rgba(0, 0, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.needle-prompt { font-size: 14px; line-height: 1.55; }
.diag-header { background: linear-gradient(180deg, #2b231b, #241d17); }
.patient-portrait { border-radius: 2px; box-shadow: 0 0 0 1px var(--hair); }

/* Los lienzos de los minijuegos: encuadrados, y siempre en su proporción */
#modal-content > canvas, #modal-content canvas[id$="-canvas"]:not(.tongue-canvas) {
  max-width: 100%; height: auto;
  border-radius: 4px;
  border: 1px solid #0b0806;
  box-shadow: 0 0 0 1px var(--hair), 0 14px 34px rgba(0, 0, 0, .5);
  touch-action: none;
}
#needle-canvas, #nn-canvas, #extra-canvas, #nx-canvas {
  width: min(320px, 100%, calc(58vh * 160 / 260)) !important;
  height: auto !important; aspect-ratio: 160 / 260;
  max-height: none !important;
}

/* ---------- Botones ---------- */
.btn-primary {
  animation: none;           /* nada late si no pide atención de verdad */
  font-family: var(--font-ui); font-weight: 800; font-size: 14px; letter-spacing: .02em;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #5aa082 0%, #458a6c 55%, #3a7a5e 100%);
  border: 1px solid #1d3f30;
  color: #f2fff8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 0 #1d3f30, 0 6px 14px rgba(0, 0, 0, .35);
  padding: 10px 18px;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn-primary:hover:not(:disabled) { animation: none; filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 0 #1d3f30, 0 2px 6px rgba(0, 0, 0, .3);
}
.btn-primary:disabled { filter: grayscale(.6); }
.btn-big {
  font-family: var(--font-title); font-weight: 800; letter-spacing: .1em; font-size: 16px;
  padding: 14px 32px;
  background: linear-gradient(180deg, #f1d27e 0%, #d4ad55 50%, #a8822f 100%);
  border-color: #5e4614; color: #2a1d08; text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 #5e4614, 0 10px 26px rgba(212, 173, 85, .25);
}
.btn-big:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 #5e4614; }
.btn-gremio { background: linear-gradient(180deg, #7d5a9a, #5f4278); border-color: #2f1f3e; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #2f1f3e; }

.btn-option, .herb-row, .exam-btn, .bagang-opt, .filtro-chip, .tab-btn, .cuaderno-row, .intake-opt {
  font-family: var(--font-ui);
  border-radius: var(--radius);
  transition: background .12s, border-color .12s, transform .08s, box-shadow .12s;
}
.btn-option {
  font-weight: 700; font-size: 14px;
  background: linear-gradient(180deg, #3d3226, #342a20);
  border: 1px solid rgba(0, 0, 0, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.btn-option:hover:not(:disabled) {
  background: linear-gradient(180deg, #4d3f2c, #3f3324);
  box-shadow: inset 3px 0 0 var(--gold), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.btn-option:active:not(:disabled), .exam-btn:active:not(:disabled), .herb-row:active:not(:disabled) { transform: translateY(1px); }
.btn-option .opt-name { font-size: 14.5px; }
.btn-option .opt-pinyin, .opt-axes { font-size: 12px; }
.btn-mini {
  font-family: var(--font-ui); font-weight: 700; font-size: 12.5px;
  border-radius: var(--radius); padding: 5px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 #1d3f30;
}
.btn-mini:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

.exam-btn {
  background: linear-gradient(180deg, #3a2f24, #2f261d);
  border: 1px solid rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 rgba(0, 0, 0, .5);
  font-size: 12.5px; padding: 10px 4px;
}
.exam-icon { font-size: 21px; }
.exam-name { font-size: 13px; }
.exam-cost { font-size: 11.5px; }
.exam-btn.done { background: linear-gradient(180deg, #2f4437, #273a2e); border-color: #1f4434; }
.bagang-opt { font-size: 13px; font-weight: 700; padding: 7px 4px; }
.bagang-opt.sel {
  background: linear-gradient(180deg, #9a7a34, #7b5f24); color: #fff6dc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px var(--gold);
}
.bagang-label { font-size: 13.5px; }
.herb-row { font-size: 13.5px; padding: 8px 10px; }

/* ---------- Avisos ---------- */
.event-banner, .achievement-toast {
  border-radius: 4px;
  background: var(--panel-grad);
  border: 1px solid #0b0806;
  box-shadow: inset 0 0 0 1px var(--hair-strong), 0 16px 40px rgba(0, 0, 0, .55);
  font-size: 13.5px;
}
.achievement-toast { bottom: calc(18px + var(--safe-b)); }
.floating-gain {
  font-family: var(--font-ui); font-weight: 800; font-size: 14px;
  color: var(--gold-hi);
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(212, 173, 85, .55);
  white-space: nowrap;
}

#mentor {
  border-radius: 6px;
  border: 1px solid #0b0806;
  box-shadow: inset 0 0 0 1px var(--hair-strong), 0 20px 50px rgba(0, 0, 0, .6);
  bottom: calc(18px + var(--safe-b));
}

/* ---------- La portada ---------- */
#title-box {
  border-radius: 6px;
  border: 1px solid #0b0806;
  box-shadow: inset 0 0 0 1px var(--hair-strong), inset 0 0 0 6px rgba(0, 0, 0, .2),
    inset 0 0 0 7px rgba(212, 173, 85, .12), 0 30px 80px rgba(0, 0, 0, .7);
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(212, 173, 85, .10), transparent 70%),
    var(--panel-grad);
}
.title-sub { font-family: var(--font-title); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; color: #8fc9ab; }
.title-continue {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: -4px 0 16px;
}
.title-continue span {
  font-size: 13px; font-weight: 700; color: #eadfcb;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 999px; padding: 4px 11px;
}
.title-continue span b { color: var(--gold-hi); font-variant-numeric: tabular-nums; }

/* ==========================================================================
 * El brillo (js/fx.js)
 * ========================================================================== */
#fx-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 600; }

.fx-stamp {
  position: fixed; z-index: 610; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-title); font-weight: 800; letter-spacing: .08em;
  font-size: clamp(22px, 6vw, 34px); white-space: nowrap;
  padding: 6px 16px 4px;
  border: 3px solid currentColor; border-radius: 6px;
  background: rgba(14, 10, 8, .55);
  animation: fx-stamp 1.05s cubic-bezier(.2, 1.5, .4, 1) both;
}
.fx-stamp.q-perfecta {
  color: #f6dc8c; text-shadow: 0 0 18px rgba(246, 220, 140, .8);
  box-shadow: 0 0 30px rgba(246, 220, 140, .35), inset 0 0 18px rgba(246, 220, 140, .2);
}
.fx-stamp.q-buena { color: #8fe3bd; text-shadow: 0 0 14px rgba(143, 227, 189, .55); }
.fx-stamp.q-aceptable { color: #d8cbb2; font-size: clamp(18px, 5vw, 26px); }
.fx-stamp.q-fallida { color: #ff8a73; text-shadow: 0 0 12px rgba(255, 120, 100, .5); }
@keyframes fx-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(2.2); }
  18% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(.94); }
  28% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -54%) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -66%) rotate(-6deg) scale(.96); }
}

.fx-shake { animation: fx-shake .36s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes fx-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.fx-levelup {
  position: fixed; inset: 0; z-index: 605; pointer-events: none;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(212, 173, 85, .16), transparent 60%);
  animation: fx-fade 2.6s ease both;
}
.fx-levelup-band {
  width: 100%; text-align: center; padding: 18px 0 16px;
  background: linear-gradient(90deg, transparent, rgba(20, 14, 9, .92) 18%, rgba(20, 14, 9, .92) 82%, transparent);
  border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong);
  animation: fx-band 2.6s cubic-bezier(.2, .9, .25, 1) both;
}
.fx-levelup-band small {
  display: block; font-family: var(--font-title); letter-spacing: .4em; font-size: 12px; color: #8fc9ab;
  text-transform: uppercase; margin-bottom: 4px;
}
.fx-levelup-band strong {
  font-family: var(--font-title); font-weight: 900; font-size: clamp(34px, 9vw, 56px); letter-spacing: .1em;
  background: linear-gradient(180deg, #fff6d2, #f1d27e 40%, #b88a32 60%, #fbe7a6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3b2b0c) drop-shadow(0 0 24px rgba(246, 219, 140, .5));
}
@keyframes fx-fade { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-band { 0% { transform: scaleY(0); } 14% { transform: scaleY(1); } 100% { transform: scaleY(1); } }

/* El diálogo propio */
.fx-dialog {
  position: fixed; inset: 0; z-index: 700;
  display: grid; place-items: center; padding: 16px;
  background: rgba(6, 5, 4, .7);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fx-fade-in .16s ease both;
}
.fx-dialog.leaving { animation: fx-fade-out .16s ease both; }
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-fade-out { from { opacity: 1; } to { opacity: 0; } }
.fx-dialog-box {
  width: min(420px, 100%); text-align: center;
  padding: 22px 22px 20px; border-radius: 6px;
  background: radial-gradient(400px 160px at 50% -40px, rgba(212, 173, 85, .12), transparent 70%), var(--panel-grad);
  border: 1px solid #0b0806;
  box-shadow: inset 0 0 0 1px var(--hair-strong), 0 26px 70px rgba(0, 0, 0, .7);
  animation: modal-in .22s cubic-bezier(.2, .9, .25, 1.05);
}
.fx-dialog-icon { font-size: 34px; margin-bottom: 4px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.fx-dialog-box h3 {
  font-family: var(--font-title); font-weight: 700; font-size: 19px; letter-spacing: .06em;
  color: var(--gold-hi); margin-bottom: 8px;
}
.fx-dialog-box p { font-size: 15px; line-height: 1.55; color: #eadfcb; margin-bottom: 16px; }
.fx-dialog-box p strong { color: var(--gold-hi); }
.fx-dialog-actions { display: flex; gap: 10px; }
.fx-dialog-actions button { flex: 1; margin-top: 0; min-height: 46px; justify-content: center; align-items: center; text-align: center; }

/* ---------- La botonera táctil (js/input.js) ---------- */
.touch-pad { display: flex; gap: 10px; justify-content: center; margin: 4px auto 6px; max-width: 420px; }
.touch-key {
  flex: 1; min-height: 56px; min-width: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--font-ui); font-weight: 800; font-size: 22px; color: #fff3d6;
  background: linear-gradient(180deg, #4b3d2c, #382d21);
  border: 1px solid #0b0806; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--hair), 0 4px 0 #0d0a08;
  user-select: none; -webkit-user-select: none; cursor: pointer;
  transition: transform .06s, box-shadow .06s, background .1s;
}
.touch-key small { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.touch-key.down {
  transform: translateY(4px);
  background: linear-gradient(180deg, #6a5434, #4e3d27);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--gold), 0 0 0 #0d0a08;
}
.pad-split { justify-content: space-between; }
.pad-split .touch-key { flex: 0 0 38%; }
.pad-wide .touch-key { font-size: 16px; min-height: 52px; }
.pad-arrows .touch-key { font-size: 26px; }

/* ==========================================================================
 * El menú: lo de todos los días a la vista; lo demás, tras ☰
 * ========================================================================== */
#btn-menu { display: grid; place-items: center; min-width: 36px; height: 32px; padding: 0 10px; font-size: 16px; }
.sys-more {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 12px; z-index: 30;
  grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; min-width: 300px;
  background: var(--panel-grad); border-radius: 8px; border: 1px solid #0b0806;
  box-shadow: inset 0 0 0 1px var(--hair-strong), 0 20px 50px rgba(0, 0, 0, .7);
}
body.menu-open .sys-more { display: grid; animation: modal-in .18s ease both; }
.sys-more .icon-btn { min-height: 38px; text-align: left; padding: 7px 12px; }
/* Los botones de solo icono dicen qué hacen */
.sys-more #btn-sound::after, .sys-more #btn-haptics::after, .sys-more #btn-fullscreen::after, .sys-more #btn-reset::after {
  content: " " attr(title); font-size: 13px;
}
.sys-more #btn-volume::after { content: " Volumen"; font-size: 13px; }
body.menu-open #btn-menu { background: linear-gradient(180deg, #6a5434, #4e3d27); color: #fff3d6; }

/* ==========================================================================
 * Pantallas estrechas: el juego entero en un teléfono
 * ========================================================================== */
@media (max-width: 760px) {
  html, body { font-size: 15px; }
  #app { height: auto; min-height: 100dvh; }

  /* Barra superior: marca, cifras deslizables y el menú */
  #topbar {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 6px 8px; padding: 6px 10px; padding-top: calc(6px + var(--safe-t));
    position: sticky; top: 0;
  }
  #topbar .brand { font-size: 13px; letter-spacing: .14em; margin: 0; grid-column: 1; grid-row: 1; }
  #btn-menu { grid-column: 3; grid-row: 1; }
  /* Las cifras van en su propia fila, a todo lo ancho: la caja, la fama y el
   * nivel tienen que verse sin deslizar nada. */
  .chips {
    grid-column: 1 / -1; grid-row: 2; gap: 5px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
    padding-right: 18px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { padding: 4px 8px; font-size: 13px; }
  .chip-clock { min-width: 0; }
  .chip-clock .clock-track { width: 30px; }
  #topbar { z-index: 40; }
  /* En el teléfono, lo principal y lo demás van juntos en la misma hoja */
  .sys-more, body.menu-open .sys-more { display: contents; position: static; animation: none; }
  #btn-menu { width: 40px; height: 36px; padding: 0; font-size: 18px; }
  .sys-controls {
    position: absolute; top: 100%; right: 8px; left: 8px; margin: 6px 0 0;
    display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px;
    background: var(--panel-grad); border-radius: 8px; border: 1px solid #0b0806;
    box-shadow: inset 0 0 0 1px var(--hair-strong), 0 20px 50px rgba(0, 0, 0, .7);
    z-index: 30;
  }
  body.menu-open .sys-controls { display: grid; animation: modal-in .2s ease both; }
  .sys-controls .icon-btn { min-height: 44px; font-size: 14px; text-align: left; padding: 8px 12px; }
  .sys-controls #btn-sound, .sys-controls #btn-fullscreen, .sys-controls #btn-reset { text-align: center; }

  /* Las salas, en una tira que se desliza */
  #room-nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; padding: 6px 10px; gap: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
            mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  #room-nav::-webkit-scrollbar { display: none; }
  .room-btn { flex: 0 0 auto; scroll-snap-align: start; min-height: 38px; font-size: 13.5px; }
  .room-resources { display: none; }

  #layout { flex-direction: column; padding: 10px 8px calc(14px + var(--safe-b)); gap: 10px; }
  #stage { min-height: 0; flex: 0 0 auto; }
  #panel { flex-direction: column; flex-wrap: nowrap; max-width: none; width: 100%; padding: 0 2px; }
  canvas#game { border-width: 2px; box-shadow: 0 0 0 1px var(--hair-strong), 0 10px 26px rgba(0, 0, 0, .5); }

  /* El modal: una hoja a pantalla completa que sube desde abajo */
  #modal { align-items: flex-end; }
  #modal-box {
    width: 100%; max-width: none; max-height: 100dvh; height: 100dvh;
    border-radius: 0; padding: 6px;
    padding-top: calc(54px + var(--safe-t)); padding-bottom: calc(6px + var(--safe-b));
    animation: sheet-in .28s cubic-bezier(.2, .9, .25, 1);
  }
  #modal-content { padding: 2px 8px 16px; overscroll-behavior: contain; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal-close-btn { top: calc(8px + var(--safe-t)); right: 8px; width: 40px; height: 40px; }
  #modal-content h3 { font-size: 17px; }
  #modal-box:has(> .modal-close-btn.hidden) { padding-top: calc(6px + var(--safe-t)); }
  #modal-box:has(> .modal-close-btn.hidden) > #modal-content { padding-top: 10px; }
  .tab-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-left: -2px; margin-right: -2px; }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; min-height: 44px; }
  #modal-content > canvas { margin: 10px auto; }

  .bagang-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .bagang-label { flex: 0 0 auto; }
  .bagang-opt { padding: 10px 4px; font-size: 13.5px; }
  .exam-row { grid-template-columns: 1fr 1fr; }
  .exam-btn { padding: 12px 4px; }
  .btn-option, .herb-row { min-height: 46px; }
  .btn-primary { min-height: 46px; width: 100%; }
  .btn-mini { min-height: 36px; }
  .diag-header { gap: 10px; padding: 8px; }
  .shop-grid, .achievement-grid { grid-template-columns: 1fr; }
  .cronica-choices button { flex: 1 1 100%; }
  .prologue canvas { width: 84px; height: 112px; }

  #title-box { width: 94%; padding: 22px 16px 24px; max-height: calc(100dvh - 24px); }
  .event-banner { top: 8px; width: 94%; max-width: none; }
  .achievement-toast { left: 10px; right: 10px; max-width: none; }
  #mentor { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); padding: 10px; gap: 10px; }
  #mentor-portrait { width: 42px; height: 56px; }
  .mentor-text { min-height: 0; font-size: 14.5px; }
  body.tut-on #modal-box { height: auto; max-height: 58dvh; }
}

/* Teléfono en horizontal: el escenario manda, el panel se queda al lado */
@media (max-height: 500px) and (orientation: landscape) {
  #app { height: 100dvh; }
  #topbar { padding: 4px 10px; }
  #room-nav { padding: 4px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .room-btn { flex: 0 0 auto; padding: 4px 10px; }
  .room-resources { display: none; }
  #layout { flex-direction: row; padding: 6px 10px; gap: 10px; }
  #stage { min-height: 0; }
  #panel { flex: 0 0 240px; max-width: 240px; flex-direction: column; flex-wrap: nowrap; overflow-y: auto; }
  #layout { justify-content: center; }
  #modal-box { max-height: 100dvh; }
}

/* Con el dedo no hay «hover»: nada se queda iluminado tras tocar */
@media (hover: none) {
  .btn-option:hover:not(:disabled), .icon-btn:hover, .room-btn:hover:not(.active):not(:disabled),
  .herb-row:hover:not(:disabled), .exam-btn:hover:not(:disabled), .bagang-opt:hover {
    filter: none;
  }
  .btn-primary:hover:not(:disabled) { transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-stamp, .fx-levelup, .fx-levelup-band, .fx-dialog, .fx-dialog-box, #modal-box { animation: none !important; }
}

/* ==========================================================================
 * El resumen del día (js/ui.js): una ceremonia, no un parte
 * ========================================================================== */
.sum-hero { text-align: center; margin: -4px 0 14px; padding: 6px 0 12px; position: relative; }
.sum-hero > small {
  display: block; font-family: var(--font-title); letter-spacing: .32em; text-transform: uppercase;
  font-size: 11px; color: #8fc9ab; margin-bottom: 2px;
}
#modal-content .sum-hero h3 { margin-bottom: 10px; font-size: 22px; }
.sum-net { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sum-net span {
  font-family: var(--font-title); font-weight: 800; font-size: 26px; letter-spacing: .02em;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06);
  font-variant-numeric: tabular-nums;
}
.sum-net span.up { color: #9fe8c6; text-shadow: 0 0 16px rgba(143, 227, 189, .35); }
.sum-net span.down { color: #ffa08c; text-shadow: 0 0 16px rgba(255, 120, 100, .3); }
.sum-net b { font-weight: 800; }
.sum-perfect {
  display: inline-block; margin: 12px 0 0 !important; padding: 5px 14px;
  border-radius: 999px; font-weight: 800; color: #10261c;
  background: linear-gradient(180deg, #9fe8c6, #5aa082);
  box-shadow: 0 0 24px rgba(143, 227, 189, .35);
}
.sum-hero.perfect h3 { filter: drop-shadow(0 0 18px rgba(246, 220, 140, .45)) drop-shadow(0 2px 0 rgba(0,0,0,.55)); }

.sum-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sum-tile {
  background: linear-gradient(180deg, #2b231b, #221b15);
  border: 1px solid rgba(0, 0, 0, .6); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  padding: 8px 11px;
}
.sum-tile small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.sum-tile strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.sum-ledger {
  background: linear-gradient(180deg, #2a2119, #211a14);
  border: 1px solid rgba(0, 0, 0, .6); border-left: 3px solid var(--gold-lo);
  border-radius: var(--radius); padding: 9px 12px; margin: 0 0 12px;
}
.sum-ledger-title {
  font-family: var(--font-title); letter-spacing: .14em; font-size: 12px !important; color: var(--gold) !important;
  text-transform: uppercase; margin-bottom: 6px !important;
}
.sum-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .07); font-size: 14px;
}
.sum-row small { color: var(--muted); font-weight: 500; }
.sum-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-row.up b { color: #9fe8c6; }
.sum-row.down b { color: #ffa08c; }
.sum-row.total { border-bottom: 0; border-top: 1px solid var(--hair-strong); margin-top: 4px; padding-top: 7px; font-weight: 800; }
.sum-row.total b { color: var(--gold-hi); font-size: 16px; }
.sum-fame { font-size: 13px !important; margin: 7px 0 0 !important; color: var(--muted); }

/* Lo demás entra escalonado, como quien repasa el día */
.sum-hero ~ * { animation: sum-in .45s cubic-bezier(.2, .8, .25, 1) both; }
.sum-hero ~ :nth-child(2) { animation-delay: .12s; }
.sum-hero ~ :nth-child(3) { animation-delay: .2s; }
.sum-hero ~ :nth-child(4) { animation-delay: .28s; }
.sum-hero ~ :nth-child(5) { animation-delay: .34s; }
.sum-hero ~ :nth-child(n+6) { animation-delay: .4s; }
@keyframes sum-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sum-hero ~ * { animation: none; } }
.sum-row.open { color: var(--muted); }
.sum-row.open b { color: var(--muted); }
.sum-banner { border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; font-size: 14px; font-weight: 700; color: #fff; }
.sum-banner.ok { background: linear-gradient(180deg, #4f8f72, #3b7158); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.sum-banner.bad { background: linear-gradient(180deg, #94443b, #7a352e); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.sum-note {
  background: linear-gradient(180deg, #2a2119, #211a14); border: 1px solid rgba(0,0,0,.6);
  border-radius: var(--radius); padding: 9px 12px; margin: 8px 0; font-size: 14px; line-height: 1.7;
}

/* ---------- El panel de la sala ---------- */
.room-card {
  background:
    radial-gradient(260px 120px at 0% 0%, rgba(212, 173, 85, .10), transparent 70%),
    linear-gradient(180deg, #2c241c, #241d17);
  border: 1px solid #0b0806; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--hair), 0 10px 26px rgba(0, 0, 0, .35);
  padding: 12px 14px 14px;
}
.room-title {
  font-family: var(--font-title); font-weight: 700; font-size: 17px; letter-spacing: .06em;
  color: #f1d27e; text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
  margin: 0 0 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.room-title small {
  font-family: "Noto Serif CJK SC", "Songti SC", serif; font-weight: 700; font-size: 14px;
  color: #c9564a; letter-spacing: .1em; margin-left: auto;
}
.room-title-icon { font-size: 16px; }
.room-card #stage-hint {
  font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.6; color: #e6dccb;
}
@media (max-width: 760px) {
  .room-card { padding: 10px 12px 12px; }
  .room-title { font-size: 16px; }
}
@media (max-width: 1000px) { #panel .room-card { flex: 1 1 100%; } }

/* ---------- La portada: el diorama de la clínica (js/portada.js) ---------- */
.title-scene {
  display: block;
  width: calc(100% + 76px); height: auto; aspect-ratio: 208 / 64;
  margin: -30px -38px 4px;
  image-rendering: pixelated;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid var(--hair-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  animation: sm-fade 1.2s ease-out both;
}
#title-box { overflow-x: hidden; }
.shenmen-logo { margin-top: -6px; }
@media (max-width: 480px) {
  .title-scene { width: calc(100% + 36px); margin: -24px -18px 2px; }
}
@media (max-width: 760px) {
  .title-scene { width: calc(100% + 32px); margin: -22px -16px 2px; }
}

/* El maestro en el teléfono: su texto se desplaza en vez de cortarse */
@media (max-width: 760px) {
  .mentor-text { max-height: 26dvh; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .mentor-text { max-height: 20dvh; font-size: 14px; }
  body.tut-on #modal-box { max-height: 54dvh; }
}
/* El maestro recogido mientras hay un minijuego abierto (js/tutorial.js) */
body.tut-mini #mentor { padding: 6px 10px; gap: 8px; align-items: center; cursor: pointer; }
body.tut-mini #mentor-portrait { width: 30px; height: 40px; }
body.tut-mini .mentor-text, body.tut-mini .mentor-actions { display: none; }
body.tut-mini .mentor-name { margin: 0; }
body.tut-mini .mentor-name::after { content: " · toca para leer"; color: var(--muted); font-weight: 500; letter-spacing: 0; }
body.tut-mini.tut-mini-open .mentor-text { display: block; max-height: 30dvh; }
body.tut-mini.tut-mini-open .mentor-actions { display: flex; }
body.tut-mini.tut-mini-open .mentor-name::after { content: " · toca para cerrar"; }
body.tut-mini #modal-box { max-height: 100dvh !important; height: 100dvh; }
body.tut-mini #modal { padding-bottom: 58px; }

/* ---------- Los rostros (js/faces.js) ---------- */
.faceset {
  image-rendering: pixelated;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #0b0806, 0 0 0 3px #8a6a24, 0 0 0 4px #0b0806, 0 8px 18px rgba(0, 0, 0, .45);
  background: #1a1410;
}
.cronica-quien {
  float: left; margin: 2px 14px 6px 0; text-align: center; width: 92px;
}
.cronica-quien .faceset { display: block; margin: 0 auto 6px; }
.cronica-quien figcaption {
  font-family: var(--font-title); font-weight: 700; font-size: 10.5px; letter-spacing: .04em;
  color: #f1d27e; line-height: 1.25;
}
.cronica-quien figcaption span { display: block; font-family: "Noto Serif CJK SC", serif; color: #c9564a; font-size: 12px; letter-spacing: .15em; }
.cronica::after { content: ""; display: block; clear: both; }
@media (max-width: 420px) {
  .cronica-quien { width: 72px; margin-right: 10px; }
  .cronica-quien .faceset { width: 64px !important; height: 64px !important; }
}
/* Caras pequeñas junto a una frase: la aprendiza, el rival, el maestro */
.cara-linea { display: flex; gap: 10px; align-items: flex-start; }
.cara-linea .faceset { flex: 0 0 auto; }
.cara-linea > :not(.faceset) { flex: 1; min-width: 0; }
#mentor-portrait { width: 64px; height: 64px; border: 0; }
.prologue canvas#prologue-portrait { width: 112px; height: 112px; border: 0; }
@media (max-width: 760px) { #mentor-portrait { width: 48px; height: 48px; } .prologue canvas#prologue-portrait { width: 88px; height: 88px; } }
body.tut-mini #mentor-portrait { width: 34px; height: 34px; }

/* ---------- La tarjeta de pergamino ----------
 * Tienda, biblioteca y logros eran rejillas de cajas oscuras iguales: no se
 * distinguía qué se podía comprar ni qué era ya tuyo. Ahora todo lo que se
 * ofrece es una hoja de papel de arroz con tinta, y lo que ya tienes lleva el
 * sello rojo de la casa. Lo que aún no se ha descubierto sigue a oscuras. */
.shop-card, .achievement-card.unlocked {
  position: relative;
  color: #3a2a1a;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 252, 240, .55) 0%, transparent 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(150, 110, 60, .18) 0%, transparent 70%),
    linear-gradient(180deg, #efe3c6 0%, #e4d3ad 100%);
  border: 1px solid #a88a58;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 250, 235, .35),
    inset 0 0 18px rgba(120, 85, 40, .22), 0 6px 14px rgba(0, 0, 0, .35);
  padding: 12px 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.shop-card:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 250, 235, .35), inset 0 0 18px rgba(120, 85, 40, .22), 0 10px 20px rgba(0, 0, 0, .4); }
#modal-content .shop-card h4, .shop-card h4, .achievement-card.unlocked strong {
  font-family: var(--font-text); font-weight: 700; font-size: 15px;
  color: #7c2a20 !important; letter-spacing: .01em; margin: 0 0 4px;
}
.shop-card p, .shop-card .hint, .achievement-card.unlocked small, .achievement-card.unlocked span:not(.ach-icon) {
  color: #4a3825; font-size: 13px;
}
.shop-card .hint { color: #6a5338; font-style: normal; }
.shop-card p:not(.hint) { font-weight: 700; color: #3a2a1a; }
.shop-card .btn-primary { margin-top: 6px; }
.shop-card .btn-primary:disabled { filter: grayscale(.6); opacity: .55; }
/* el sello de lo que ya es tuyo */
.shop-card.owned, .achievement-card.unlocked { border-color: #a88a58; }
.shop-card.owned::after, .achievement-card.unlocked::after {
  content: '得';
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; display: grid; place-items: center;
  font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 18px; font-weight: 700; line-height: 1;
  color: #fbeee0; background: #b3352a; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #b3352a, inset 0 0 0 3px #fbeee0;
  transform: rotate(-8deg); opacity: .88;
  pointer-events: none;
}
.shop-card.owned h4 { padding-right: 34px; }
.achievement-card.unlocked { padding-right: 46px; }
/* lo no descubierto: sombra y candado, sin papel */
.achievement-card.locked { opacity: .6; background: rgba(0, 0, 0, .25); }
/* las secciones de la biblioteca, con su trazo de pincel */
.library-section {
  border-bottom: 0 !important;
  background: linear-gradient(90deg, rgba(212, 173, 85, .55), rgba(212, 173, 85, 0) 80%) bottom left / 100% 2px no-repeat;
  padding-bottom: 6px;
}
.library-shelf { margin: 14px 0 4px; }
.library-shelf > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 700 15px var(--font-ui); color: var(--gold-hi, #f6dc8c); margin: 0 0 8px; padding: 6px 0 8px 22px; position: relative; min-height: 32px; }
.library-shelf > summary::-webkit-details-marker { display: none; }
.library-shelf > summary::before { content: "▸"; position: absolute; left: 4px; top: 6px; transition: transform .2s; color: var(--muted, #a89a82); }
.library-shelf[open] > summary::before { transform: rotate(90deg); }
.library-shelf > summary small { color: var(--muted, #a89a82); font-weight: 400; }
.library-shelf > summary:focus-visible { outline: 2px solid #d4ad55; outline-offset: 2px; }
.shelf-badge { font: 700 11.5px var(--font-ui); color: #10261c; background: #8fd3b3; border-radius: 999px; padding: 2px 8px; }
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: 1fr; }
}

/* El presagio: la última línea del día, a la luz de la luna */
.presagio {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 14px 0 6px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(40, 52, 84, .55), rgba(22, 26, 40, .7));
  border: 1px solid rgba(160, 180, 230, .25); border-radius: var(--radius);
  box-shadow: inset 0 0 24px rgba(120, 150, 220, .12);
  animation: presagio-in 1.2s ease both .4s;
}
.presagio p { margin: 0; font-family: var(--font-text); font-style: italic; font-size: 15px; line-height: 1.5; color: #dfe6f5; }
.presagio p strong { font-style: normal; color: #f6dc8c; font-family: var(--font-ui); }
.presagio-luna { font-size: 22px; filter: drop-shadow(0 0 6px rgba(246, 220, 140, .6)); }
@keyframes presagio-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .presagio { animation: none; } }

/* Ventanas de dos líneas: a su medida, no a 640 px (js/ui.js, ajustarAncho) */
#modal-box.modal-corto { max-width: 460px; }

/* La marca: el taijitu ámbar de acupuntura.app. Las semillas laten en
 * contrafase, como en la cabecera del sitio; no gira. */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-taiji { width: 20px; height: 20px; flex: 0 0 auto; filter: drop-shadow(0 0 4px rgba(242, 164, 19, .35)); }
.brand-taiji circle[class] { transform-box: fill-box; transform-origin: center; animation: taiji-late 6s ease-in-out infinite; }
.brand-taiji .taiji-b { animation-delay: -3s; }
@keyframes taiji-late { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .brand-taiji circle[class] { animation: none; } }

/* La decisión es tuya: la cara del doctor junto a los caminos */
.cronica-tu { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.cronica-tu .faceset { flex: 0 0 auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--hair-strong), 0 4px 10px rgba(0,0,0,.4); }
.cronica-tu .cronica-choices { flex: 1; margin-top: 0; }

/* El aviso de la música en la portada: discreto, y late despacio */
.title-sound { font-size: 12.5px; color: rgba(246, 220, 140, .7); letter-spacing: .04em; margin: -4px 0 10px; animation: sonido-late 2.6s ease-in-out infinite; }
@keyframes sonido-late { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .title-sound { animation: none; } }

/* Las ilustraciones de la tienda: el dibujo a la izquierda, sobre su sombra */
.shop-card.con-dibujo { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; align-content: start; }
.shop-card.con-dibujo > * { grid-column: 2; }
.shop-card.con-dibujo > .shop-ill { grid-column: 1; grid-row: 1 / span 4; align-self: start; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(90, 60, 30, .25)); }
.shop-card.con-dibujo > canvas.faceset.shop-ill { border-radius: 3px; box-shadow: 0 0 0 1px #a88a58; }
.icono { image-rendering: pixelated; }
.achievement-card .medalla { flex: 0 0 auto; }
.achievement-card.locked .medalla { opacity: .85; }

/* El volumen: tres deslizadores, uno por capa */
.volumenes { display: grid; gap: 14px; margin: 6px 0 14px; }
.volumen-fila { display: grid; grid-template-columns: 28px 110px 1fr 42px; align-items: center; gap: 10px; }
.volumen-fila span:first-child { font-size: 20px; text-align: center; }
.volumen-fila label { font-weight: 700; }
.volumen-fila output { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
.volumen-fila input[type=range] { width: 100%; accent-color: #d4ad55; height: 28px; }
@media (max-width: 480px) {
  .volumen-fila { grid-template-columns: 24px 1fr 44px; grid-template-areas: "ic nom num" "barra barra barra"; row-gap: 2px; }
  .volumen-fila span:first-child { grid-area: ic; } .volumen-fila label { grid-area: nom; }
  .volumen-fila output { grid-area: num; } .volumen-fila input[type=range] { grid-area: barra; }
}

/* El aviso de instalar (iPhone: Compartir → Añadir a pantalla de inicio) */
.title-install {
  display: flex; gap: 10px; align-items: center; text-align: left;
  margin: 0 auto 12px; max-width: 460px; padding: 10px 12px;
  background: rgba(20, 16, 12, .7); border: 1px solid var(--hair-strong); border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.45; color: #efe3c6;
}
.title-install.hidden { display: none; }
.title-install-ic { font-size: 22px; }
.title-install em { color: var(--gold-hi); font-style: normal; font-weight: 700; }
.title-install-go { margin: 0; padding: 6px 12px; flex: 0 0 auto; }
.title-install-x { background: none; border: 0; color: rgba(239, 227, 198, .6); font-size: 14px; padding: 4px; cursor: pointer; flex: 0 0 auto; align-self: flex-start; }
.title-install > span:not(.title-install-ic) { flex: 1 1 0; min-width: 0; }
@media (max-width: 760px) {
  /* el botón ancho del móvil baja a su propia fila; la ✕ se queda arriba */
  .title-install { flex-wrap: wrap; row-gap: 8px; }
  .title-install-go { order: 3; flex: 1 1 100%; min-height: 42px; }
}
/* el icono de compartir de iOS: una caja con la flecha hacia arriba */
.ios-share { display: inline-block; width: 12px; height: 14px; vertical-align: -2px; position: relative;
  border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 2px 2px; margin: 0 2px; }
.ios-share::before { content: ''; position: absolute; left: 50%; top: -6px; width: 1.5px; height: 10px; background: currentColor; transform: translateX(-50%); }
.ios-share::after { content: ''; position: absolute; left: 50%; top: -6px; width: 5px; height: 5px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translateX(-50%) rotate(45deg); }

/* La cara con que se va el paciente, y lo que dice al salir */
.cobro-cara { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.cobro-cara .faceset { border-radius: 3px; box-shadow: 0 0 0 1px var(--hair-strong), 0 6px 14px rgba(0,0,0,.4); }
.cobro-frase { margin: 0 !important; font-family: var(--font-text); font-style: italic; font-size: 15px !important; color: #efe3c6; }

/* El álbum de la crónica (js/vinetas.js) y las láminas de los grandes momentos */
.vineta { image-rendering: pixelated; display: block; height: auto; max-width: 100%; }
.hilo-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.album-acto { margin: 0; background: #efe3c6; padding: 5px 5px 6px; box-shadow: 0 0 0 1px #a88a58, 0 4px 10px rgba(0,0,0,.35); transform: rotate(-.4deg); }
.album-acto:nth-child(2n) { transform: rotate(.5deg); }
.album-acto .vineta { width: 100% !important; }
.album-acto figcaption { font-family: var(--font-text); font-size: 12.5px; line-height: 1.3; color: #4a3825; margin-top: 5px; text-align: center; }
canvas.vineta.lamina { width: 100% !important; max-width: 624px; margin: 0 auto 12px; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--hair-strong), 0 12px 30px rgba(0,0,0,.5); animation: lamina-in 1.1s ease both; }
@keyframes lamina-in { from { opacity: 0; filter: brightness(1.6) blur(1px); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { canvas.vineta.lamina { animation: none; } }

/* La sala de espera del panel: caras, nombre y cuánto les duele */
.waiting-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; background: var(--panel-grad); border: 1px solid rgba(0,0,0,.55);
  box-shadow: inset 0 0 0 1px var(--hair); border-radius: var(--radius); padding: 10px; }
.waiting-list.hidden { display: none; }
.waiting-title { margin: 0 0 2px; font-family: var(--font-title); font-size: 14px; color: var(--gold); letter-spacing: .06em; }
.waiting-title small { font-family: var(--font-ui); color: var(--muted); font-size: 12px; margin-left: 4px; }
.waiting-row { display: flex; align-items: center; gap: 10px; text-align: left; padding: 5px 8px 5px 5px; width: 100%;
  background: rgba(0,0,0,.22); border: 1px solid rgba(0,0,0,.4); border-radius: 3px; color: inherit; cursor: pointer; font: inherit;
  transition: background .15s, transform .15s; }
.waiting-row:hover, .waiting-row:focus-visible { background: rgba(212,173,85,.12); transform: translateX(2px); }
.waiting-row.urgente { box-shadow: inset 3px 0 0 #c9564a; }
.waiting-row.vip { box-shadow: inset 3px 0 0 #d4ad55; }
.waiting-row .faceset { flex: 0 0 auto; border-radius: 2px; }
.waiting-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.waiting-info strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waiting-tags { font-size: 12px; }
.waiting-bar { display: block; height: 5px; background: #14100c; border-radius: 2px; overflow: hidden; }
.waiting-bar i { display: block; height: 100%; }
.waiting-prisa { color: #e8906a; font-size: 11.5px; }
@media (max-width: 1000px) { .waiting-list { flex: 1 1 100%; } }

/* ---------- La intro (js/intro.js) ---------- */
#intro { position: fixed; inset: 0; z-index: 400; background: #05040a; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: calc(56px + var(--safe-t)) 12px calc(14px + var(--safe-b, 0px));
  animation: intro-in .8s ease both; }
#intro.saliendo { animation: intro-out .7s ease both; }
#intro canvas { image-rendering: pixelated; display: block; box-shadow: 0 0 0 1px rgba(212,173,85,.35), 0 30px 80px rgba(0,0,0,.8); cursor: pointer; }
.intro-texto { width: 100%; max-width: 760px; min-height: 6.4em; margin: 0; text-align: center; cursor: pointer;
  font-family: var(--font-text); font-size: clamp(16px, 2.2vw, 21px); line-height: 1.55; color: #efe3c6;
  transition: opacity .9s ease; }
.intro-texto p { margin: 0 0 .45em; opacity: 0; transform: translateY(6px); transition: opacity 1s ease, transform 1s ease; text-wrap: pretty; }
.intro-texto p.visible { opacity: 1; transform: none; }
/* la línea anterior se queda, pero un paso atrás: el ojo va a la nueva */
.intro-texto p.visible:not(:last-child) { opacity: .62; }
.intro-texto.saliendo { opacity: 0; }
.intro-texto b { color: #f6dc8c; font-weight: 700; }
.intro-pie { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.intro-ayuda { margin: 0; font: 500 13px var(--font-ui); color: rgba(239,227,198,.55); letter-spacing: .04em;
  opacity: 0; transition: opacity .8s ease; }
.intro-ayuda.visible { opacity: 1; animation: intro-latido 2.4s ease-in-out infinite; }
@keyframes intro-latido { 50% { opacity: .45; } }
.intro-controles { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; left: 12px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.intro-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(20,14,8,.6); border: 1px solid rgba(212,173,85,.4); color: #efe3c6; font: 600 14px var(--font-ui);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.intro-btn:hover, .intro-btn:focus-visible { background: rgba(60,40,20,.85); border-color: #d4ad55; outline: none; }
.intro-ritmo { margin-right: auto; }
.intro-pausa-velo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1;
  font: 600 clamp(18px, 3vw, 28px) var(--font-title); letter-spacing: .2em; text-transform: uppercase; color: #f6dc8c; background: rgba(5,4,10,.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
#intro.en-pausa .intro-pausa-velo { opacity: 1; }
.intro-puntos { display: flex; gap: 8px; }
.intro-puntos i { width: 18px; height: 3px; background: rgba(239,227,198,.2); border-radius: 2px; transition: background .5s; }
.intro-puntos i.on { background: #d4ad55; }
.intro-puntos i.ahora { background: linear-gradient(90deg, #d4ad55, rgba(212,173,85,.35)); }
@media (max-width: 520px) { .intro-btn { font-size: 12.5px; padding: 6px 11px; } .intro-puntos i { width: 12px; } }
@keyframes intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; } }
.sys-more #btn-intro::after { content: " Ver la intro"; font-size: 13px; }
.sys-more #btn-cine::after { content: " Sala de proyección"; font-size: 13px; }
.intro-escena { position: relative; line-height: 0; }
.intro-titulo { line-height: 1.1; position: absolute; left: 50%; top: 3%; width: 100%; transform: translateX(-50%) scale(.92); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 1.4s ease, transform 2.4s cubic-bezier(.2,.8,.2,1); }
.intro-titulo.visible { opacity: 1; transform: translateX(-50%) scale(1); }
.intro-titulo strong { display: block; font-family: var(--font-title); font-weight: 700; letter-spacing: .18em;
  font-size: clamp(34px, 7.5vw, 96px); line-height: 1;
  background: linear-gradient(180deg, #fff3c4 0%, #f6dc8c 38%, #c9973a 70%, #8a5a1e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(60,24,6,.85)) drop-shadow(0 0 28px rgba(246,200,110,.45)); }
.intro-titulo em { display: block; margin-top: 8px; font-family: var(--font-title); font-style: normal; letter-spacing: .32em;
  text-transform: uppercase; font-size: clamp(11px, 1.6vw, 17px); color: #fbeedc; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.intro-sello { display: inline-block; margin-bottom: 10px; padding: 4px 8px; background: #b3352a; color: #fbeee0;
  font: 700 clamp(16px, 2.4vw, 26px) "Noto Serif CJK SC", serif; border-radius: 3px; box-shadow: inset 0 0 0 2px #b3352a, inset 0 0 0 3px #fbeee0;
  transform: rotate(-4deg); }

/* ---------- La ficha del médico (js/ficha.js) ---------- */
.chip-ficha { cursor: pointer; transition: background .2s, box-shadow .2s; }
.chip-ficha:hover, .chip-ficha:focus-visible { box-shadow: inset 0 0 0 1px rgba(212,173,85,.6); outline: none; }
.ficha-cab { display: flex; gap: 14px; align-items: center; margin: 4px 0 12px; }
.ficha-cab > div { flex: 1; min-width: 0; }
.ficha-nivel { margin: 0 0 6px; font: 600 17px var(--font-ui); color: #efe3c6; }
.ficha-nivel small { color: var(--muted, #a89a82); font-weight: 400; font-size: 13px; }
.ficha-barra { display: block; height: 8px; border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(212,173,85,.25); overflow: hidden; }
.ficha-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #b8893a, #f6dc8c); transition: width .6s ease; }
.ficha-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.ficha-tile { background: rgba(0,0,0,.25); border: 1px solid rgba(212,173,85,.2); border-radius: 6px; padding: 8px 10px; }
.ficha-tile small { display: block; color: var(--muted, #a89a82); font: 600 12px var(--font-ui); }
.ficha-tile strong { display: block; font: 700 18px var(--font-ui); color: #f6dc8c; margin: 2px 0; }
.ficha-tile p { margin: 0; font-size: 12.5px; line-height: 1.4; color: #cfc2a6; }
.ficha-camino, .ficha-consejos { background: rgba(0,0,0,.22); border: 1px solid rgba(212,173,85,.22); border-left: 3px solid #d4ad55; border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; }
.ficha-camino-tit { margin: 0 0 6px; font: 700 15px var(--font-ui); color: #f6dc8c; }
.ficha-camino-tit small { color: var(--muted, #a89a82); font-weight: 400; margin-left: 6px; }
.ficha-camino ul, .ficha-consejos ul { list-style: none; margin: 0; padding: 0; }
.ficha-camino li { display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px 0; }
.ficha-camino li .ficha-barra { grid-column: 2 / 4; height: 6px; }
.ficha-camino li.ok .ficha-nom { color: #8fd3b3; }
.ficha-ico { grid-row: 1 / 3; font-size: 18px; text-align: center; }
.ficha-nom { font-size: 14px; color: #efe3c6; }
.ficha-nom small { display: block; font-size: 12px; color: var(--muted, #a89a82); }
.ficha-camino li b { font: 700 13px var(--font-ui); color: #f6dc8c; }
.ficha-camino.compacto li { padding: 3px 0; }
.ficha-camino.compacto .ficha-nom { font-size: 13px; }
.ficha-consejos li { padding: 5px 0 5px 2px; font-size: 14px; line-height: 1.45; border-bottom: 1px dashed rgba(212,173,85,.15); }
.ficha-consejos li:last-child { border-bottom: 0; }
.ficha-consejos .btn-mini { margin-top: 8px; }
.sum-camino { margin: 12px 0; }
.sum-nivel { margin: 0 0 8px; font: 600 13.5px var(--font-ui); color: #efe3c6; }
.sum-nivel .ficha-barra { margin-top: 4px; }

/* La mini-ficha del panel */
.ficha-mini { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; margin: 0 0 8px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(60,44,28,.85), rgba(36,26,18,.85)); border: 1px solid rgba(212,173,85,.3); border-radius: 6px;
  color: #efe3c6; font: 500 13px var(--font-ui); }
.ficha-mini:hover, .ficha-mini:focus-visible { border-color: #d4ad55; outline: none; }
.ficha-mini.hidden { display: none; }
.ficha-mini .ficha-barra { flex: 1; min-width: 40px; height: 7px; }
.ficha-mini b { color: #f6dc8c; }
.fm-rep { color: var(--muted, #a89a82); font-size: 12px; white-space: nowrap; }
.fm-camino { white-space: nowrap; }
.fm-ver { color: #d4ad55; font-weight: 700; white-space: nowrap; font-size: 12px; }
.fx-levelup-det { margin: 8px auto 0; max-width: 520px; font: 500 14px var(--font-ui); color: #fbeedc; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fx-levelup.con-detalle, .fx-levelup.con-detalle .fx-levelup-band { animation-duration: 4.4s; }
.fx-levelup-det { padding: 0 16px; }

/* Lo que pide atención en cada sala: un punto o una cifra en la pestaña */
.room-btn[data-badge] { position: relative; }
.room-btn[data-badge]::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px; background: #c8463a; color: #fff3e6; font: 800 11px/18px var(--font-ui); text-align: center;
  box-shadow: 0 0 0 2px #1e1712, 0 2px 6px rgba(0,0,0,.5); pointer-events: none; }
.room-btn.active[data-badge]::after { display: none; }
#room-nav { padding-top: 10px; }
.sys-more #btn-controls::after { content: " Controles"; font-size: 13px; }
.tabla-controles { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.tabla-controles th { text-align: left; font: 600 13px var(--font-ui); color: #f6dc8c; padding: 6px 10px 6px 0; white-space: nowrap; vertical-align: top; width: 1%; }
.tabla-controles td { padding: 6px 0; color: #efe3c6; border-bottom: 1px dashed rgba(212,173,85,.15); }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; margin: 0 2px; border-radius: 4px; text-align: center;
  background: #2a2018; border: 1px solid rgba(212,173,85,.45); box-shadow: 0 2px 0 rgba(0,0,0,.6); font: 700 12px var(--font-ui); color: #f6dc8c; }

/* El aviso del camino a la capital */
.camino-toast { position: fixed; left: 50%; top: calc(70px + var(--safe-t)); transform: translateX(-50%); z-index: 620; cursor: pointer;
  width: min(92vw, 460px); padding: 12px 16px; border-radius: 8px; text-align: center;
  background: linear-gradient(180deg, rgba(40,30,18,.97), rgba(24,18,12,.97)); border: 1px solid #d4ad55;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 18px 50px rgba(0,0,0,.6), 0 0 30px rgba(212,173,85,.25);
  animation: camino-in .5s cubic-bezier(.2,.9,.25,1) both; }
.camino-toast strong { display: block; font: 700 13px var(--font-title); letter-spacing: .12em; color: #f6dc8c; text-transform: uppercase; margin-bottom: 4px; }
.camino-toast span { font: 400 15px var(--font-text); color: #efe3c6; line-height: 1.45; }
.camino-toast.leaving { animation: camino-out .5s ease both; }
@keyframes camino-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes camino-out { to { opacity: 0; transform: translate(-50%, -10px); } }
.title-recap { flex-basis: 100%; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #d8ccb0; text-align: center; }
.title-recap b { color: #f6dc8c; }

/* El resumen de la noche es largo: el botón de seguir no se esconde al fondo */
.sum-pie { position: sticky; bottom: -17px; z-index: 2; margin: 14px -19px -17px; padding: 14px 19px 17px;
  background: linear-gradient(180deg, rgba(47,38,29,0), #2f261d 22px); }
.sum-pie .sum-continuar { width: 100%; margin: 0; }
@media (max-width: 760px) {
  .sum-pie { bottom: -16px; margin: 14px -8px -16px; padding: 14px 8px 16px; }
}

/* ---- La sala de proyección (js/peliculas.js) ---- */
.cine-nota { margin: 0 0 12px; opacity: .85; }
.cine-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cine-fila { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px;
  background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(212,173,85,.22); }
.cine-carteles { flex: 0 0 auto; }
.cine-cartel { display: block; width: 192px; height: 108px; image-rendering: pixelated; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(212,173,85,.4), 0 6px 18px rgba(0,0,0,.45); }
.cine-fila > canvas.vineta, .cine-fila > canvas:not(.cine-cartel) { flex: 0 0 auto; width: 40px; height: 40px; image-rendering: pixelated; border-radius: 50%; }
.cine-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cine-texto strong { font-size: 1.05em; }
.cine-texto p { margin: 2px 0 6px; font-size: .9em; opacity: .85; }
.cine-laminas { font-size: .8em; opacity: .7; }
.cine-pasar { margin-top: 0 !important; padding: 6px 14px; }
@media (max-width: 560px) {
  .cine-fila { flex-wrap: wrap; }
  .cine-cartel { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .cine-carteles { flex-basis: 100%; }
}

/* Terminar el día, bajo el lienzo: solo en el teléfono y al caer la tarde
 * (js/ui.js lo enciende). En escritorio ya está a la vista en la barra. */
.end-day-dusk { display: none; }
@media (max-width: 760px) {
  .end-day-dusk {
    display: block; width: 100%; min-height: 48px; padding: 10px 16px;
    font: 700 16px var(--font-ui); letter-spacing: .02em; color: #fff3d6;
    border-radius: var(--radius); border: 1px solid rgba(0, 0, 0, .7);
    background: linear-gradient(180deg, #4a3f6e, #332a52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(201, 162, 75, .55), 0 6px 18px rgba(0, 0, 0, .45);
    animation: end-day-glow 2.4s ease-in-out infinite;
  }
  .end-day-dusk:active { transform: translateY(2px); }
}
/* En escritorio y tableta el de la barra ya está a la vista: al caer la tarde, se enciende */
@media (min-width: 761px) {
  #btn-end-day.dusk-cta {
    color: #fff3d6; font-size: 14px; padding-inline: 14px;
    background: linear-gradient(180deg, #4a3f6e, #332a52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(201, 162, 75, .55), 0 4px 12px rgba(0, 0, 0, .45);
    animation: end-day-glow 2.4s ease-in-out infinite;
  }
  #btn-end-day.dusk-cta:hover { background: linear-gradient(180deg, #5a4d84, #3f3463); }
}
@keyframes end-day-glow {
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 2px rgba(201, 162, 75, .9), 0 0 18px rgba(201, 162, 75, .45); }
}
@media (prefers-reduced-motion: reduce) { .end-day-dusk, #btn-end-day.dusk-cta { animation: none; } }