/* Klee One (Fontworks, SIL OFL 1.1 · fonts/OFL-KleeOne.txt): solo los kana, para dibujar los trazos con letra de cuaderno escolar */
@font-face{font-family:'Klee One Kana';src:url('../fonts/klee-one-kana.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+3041-30FF;}
  :root{
    --washi:#f2ecdc; --washi-deep:#e9e0c9;
    --sumi:#2b2a28; --ai:#28415c; --ai-deep:#1b2c40;
    --shu:#bd4932; --shu-deep:#963824; --kincha:#b8912f;
    --bosque:#16211a; --hoja-bosque:#2a3a28; --luz-sol:#ffe7a8;   /* bienvenida «komorebi» (js/motor/escenas.js) */
    --matcha:#5c7a52; --line:#c9bd9c;
    /* Colores derivados (antes estaban fijos en cada regla): los temas oscuros los redefinen */
    --papel:#fffdf6; --gris:#8a8371; --gris-osc:#6d6656; --gris-cl:#a49a80;
    --gris-cl-2:#b5ab90; --gris-osc-2:#5e5848; --line-cl:#d9cdb0; --tinte-shu:#fff3e4;
    --tinte-shu-2:#fff8ee; --tinte-shu-3:#fff8ec; --tinte-shu-4:#fff6ea; --tinte-papel:#fbf6ea;
    --tinte-matcha:#f4f7ef; --tinte-kincha:#e9d9a6; --tinte-kincha-2:#f2d9a0; --tinte-murasaki:#e9d3f0;
    --matcha-osc:#3d5535; --matcha-osc-2:#34482e; --matcha-osc-3:#4f6a46; --kincha-osc:#8a6a22;
    --kincha-osc-2:#7d6220; --kincha-osc-3:#6b531a; --kincha-osc-4:#64491a; --shu-osc:#a8402b;
    --shu-osc-2:#7e2e1d; --murasaki:#6a4c7d; --murasaki-osc:#4a3459;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse at 15% 10%, color-mix(in srgb, var(--kincha) 7%, transparent), transparent 40%),
      radial-gradient(ellipse at 85% 90%, color-mix(in srgb, var(--ai) 7%, transparent), transparent 45%),
      var(--washi);
    background-attachment:fixed;
    font-family:'Noto Serif', serif; color:var(--sumi);
    min-height:100vh; padding:28px 16px 60px;
  }
  .wrap{max-width:660px;margin:0 auto;}
  .hdr{text-align:center;margin-bottom:22px;}
  /* La cabecera es el mismo logo que cierra la bienvenida (.bv-marca): Komorebi · 木漏れ日 · Japonés paso a paso */
  .hdr .kanji{font-family:'Shippori Mincho', serif;font-weight:700;font-size:2.3rem;color:var(--sumi);letter-spacing:.04em;line-height:1;margin:0;}
  .hdr .marca-kj{font-family:'Shippori Mincho', serif;font-size:.9rem;letter-spacing:.5em;padding-left:.5em;color:var(--shu);margin:8px 0 0;line-height:1.2;}
  .hdr .sub{font-family:'Zen Maru Gothic', sans-serif;font-size:.88rem;color:var(--gris);letter-spacing:.02em;margin-top:5px;}
  .lang-btn{margin-top:8px;font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;background:none;border:1px solid var(--line);border-radius:14px;padding:4px 12px;color:var(--gris);cursor:pointer;}@media (hover:hover){
  .lang-btn:hover{border-color:var(--ai);color:var(--ai-deep);}}
  .hdr .rule{width:120px;height:3px;margin:14px auto 0;background:linear-gradient(90deg, transparent, var(--kincha), transparent);}

  .menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
  .cat-card{
    background:var(--papel);border:1px solid var(--line);border-radius:8px;
    padding:20px 18px;cursor:pointer;text-align:left;font-family:'Zen Maru Gothic',sans-serif;
    box-shadow:0 2px 0 var(--line);transition:transform .12s ease;
  }@media (hover:hover){
  .cat-card:hover{transform:translateY(-2px);border-color:var(--ai);}}
  .cat-card .n{font-family:'Shippori Mincho',serif;font-size:1.7rem;color:var(--ai-deep);display:block;margin-bottom:6px;}
  .cat-card .t{font-weight:500;font-size:1.05rem;display:block;margin-bottom:4px;}
  .cat-card .c{font-size:.78rem;color:var(--gris);}
  .cat-card .prog{margin-top:10px;height:5px;border-radius:4px;background:var(--washi-deep);overflow:hidden;}
  .cat-card .prog span{display:block;height:100%;background:var(--matcha);width:0%;}

  .progress-row{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
  .back-btn{
    font-family:'Zen Maru Gothic',sans-serif;border:1.5px solid var(--line);background:var(--washi);
    border-radius:6px;padding:8px 10px;cursor:pointer;color:var(--sumi);flex-shrink:0;
  }@media (hover:hover){
  .back-btn:hover{border-color:var(--ai);}}
  .progress-track{flex:1;height:8px;border-radius:6px;background:var(--washi-deep);border:1px solid var(--line);overflow:hidden;}
  .progress-fill{height:100%;background:linear-gradient(90deg, var(--ai), var(--ai-deep));width:0%;transition:width .3s ease;}
  .progress-label{font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;color:var(--sumi);white-space:nowrap;}
  .score-badge{
    display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
    border:2px solid var(--shu);color:var(--shu-deep);font-family:'Shippori Mincho',serif;font-weight:700;
    font-size:1rem;background:var(--washi);flex-shrink:0;
  }

  .card{background:var(--papel);border:1px solid var(--line);border-radius:4px;padding:26px 24px 24px;box-shadow:0 2px 0 var(--line), 0 10px 24px rgba(43,42,40,0.08);position:relative;min-height:300px;display:flex;flex-direction:column;}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg, var(--ai) 0 18px, transparent 18px 26px);opacity:.55;}
  .cat-tag{display:inline-block;font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ai-deep);background:color-mix(in srgb, var(--ai) 8%, transparent);border:1px solid color-mix(in srgb, var(--ai) 25%, transparent);padding:3px 10px;border-radius:20px;margin-bottom:14px;align-self:flex-start;}
  .question{font-family:'Zen Maru Gothic',sans-serif;font-size:1.12rem;line-height:1.55;color:var(--sumi);margin-bottom:18px;overflow-wrap:break-word;word-break:break-word;}
  /* Pista de la escalera: la regla delante de la pregunta, como una nota al margen */
  .q-pista{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:9px 13px;border-left:3px solid var(--kincha);background:color-mix(in srgb, var(--kincha) 9%, var(--papel));border-radius:4px 10px 10px 4px;color:var(--sumi);font-size:.98rem;line-height:1.5;}
  .q-pista-t{font-family:'Zen Maru Gothic',sans-serif;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-osc);}
  /* Botón «Pista» (farolillo): abre la explicación animada entera */
  .q-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .q-luz{display:inline-flex;align-items:center;gap:5px;margin-top:-2px;padding:4px 11px 4px 8px;border-radius:20px;border:1.5px solid color-mix(in srgb, var(--kincha) 55%, transparent);background:color-mix(in srgb, var(--kincha) 10%, var(--papel));color:var(--sumi);font-family:'Zen Maru Gothic',sans-serif;font-size:.82rem;cursor:pointer;flex-shrink:0;}
  .q-luz .ic-luz{width:20px;height:20px;}
  .ic-luz .ic-t{fill:none;stroke:var(--kincha);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;} .ic-luz .ic-fino{stroke-width:2;opacity:.7;}

  /* ---- Explicación animada: una diapositiva que se construye paso a paso ---- */
  .tut-puntos{flex:1;display:flex;justify-content:center;gap:8px;}
  .tut-puntos span{width:8px;height:8px;border-radius:50%;background:var(--line);}
  .tut-puntos span.on{background:var(--ai);transform:scale(1.25);} .tut-puntos span.hecho{background:color-mix(in srgb, var(--ai) 45%, var(--line));}
  .tut-saltar{color:var(--gris-osc);font-size:.88rem;text-decoration:underline;text-underline-offset:3px;padding:6px 4px;}
  .tut-card{cursor:pointer;padding-bottom:18px;}
  .tut-diapo{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .tut-titulo{font-family:'Shippori Mincho',serif;font-size:1.25rem;color:var(--ai-deep);margin:2px 0 14px;}
  .tut-paso{position:relative;width:100%;opacity:0;padding-top:26px;}
  .tut-paso:first-of-type,.tut-titulo + .tut-paso{padding-top:0;}
  /* el hilo entre paso y paso: una flecha fina que baja */
  .tut-paso:not(:first-of-type):not(.tut-titulo + .tut-paso)::before{content:'';position:absolute;top:4px;left:50%;width:1.5px;height:15px;background:color-mix(in srgb, var(--gris) 55%, transparent);}
  .tut-paso:not(:first-of-type):not(.tut-titulo + .tut-paso)::after{content:'';position:absolute;top:13px;left:calc(50% - 4px);width:7px;height:7px;border-right:1.5px solid color-mix(in srgb, var(--gris) 55%, transparent);border-bottom:1.5px solid color-mix(in srgb, var(--gris) 55%, transparent);transform:rotate(45deg);}
  .tut-paso.ver{opacity:1;}
  .tut-trozo{white-space:nowrap;}
  .tut-ja{font-family:'Zen Maru Gothic','Noto Serif JP',sans-serif;font-size:clamp(1.25rem, 6.2vw, 1.65rem);font-weight:500;color:var(--sumi);letter-spacing:.04em;line-height:1.35;}
  .tut-es{margin-top:4px;color:var(--gris-osc);font-size:.98rem;}
  .tut-pregunta{font-family:'Zen Maru Gothic',sans-serif;font-size:1.02rem;color:var(--ai-deep);}
  .tut-nota{font-size:.9rem;color:var(--gris-osc);}
  .tut-pieza{display:flex;flex-direction:column;align-items:center;gap:6px;}
  .tut-pieza-ja{display:inline-block;padding:8px 18px;border-radius:14px;background:var(--shu);color:var(--washi);font-family:'Zen Maru Gothic',sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:.04em;box-shadow:0 3px 0 var(--shu-deep);}
  .tut-pieza-txt{font-size:.92rem;color:var(--gris-osc);}
  .tut-nuevo{color:var(--shu);font-weight:700;display:inline-block;}
  .tut-quita{display:inline-block;color:var(--gris);text-decoration-line:line-through;text-decoration-color:var(--shu);text-decoration-thickness:2px;overflow:hidden;vertical-align:bottom;white-space:nowrap;}
  .tut-nav{display:flex;justify-content:center;margin-top:22px;}
  .tut-nav .btn{min-width:60%;padding:13px;font-size:1rem;}
  .tut-aviso{margin:4px 0 10px;}
  /* hoja de pista: todo visible, sin animación */
  .tut-velo{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:color-mix(in srgb, var(--sumi) 35%, transparent);padding:16px;}
  .tut-hoja{width:100%;max-width:520px;max-height:85vh;overflow:auto;cursor:default;}
  .tut-todo .tut-paso{opacity:1;}
  .tut-todo + .tut-todo{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);}
  @media (prefers-reduced-motion:no-preference){
    /* de borroso a nítido, subiendo un poco */
    .tut-diapo:not(.tut-todo) .tut-paso{filter:blur(7px);transform:translateY(12px);transition:opacity .75s ease, filter .75s ease, transform .75s cubic-bezier(.2,.8,.2,1);}
    .tut-diapo:not(.tut-todo) .tut-paso.ver{filter:none;transform:none;}
    /* la pieza llega con un pequeño golpe de sello */
    .tut-diapo:not(.tut-todo) .tut-pieza.ver .tut-pieza-ja{animation:tut-sello .55s .25s cubic-bezier(.3,1.6,.5,1) both;}
    /* en la frase final: lo que se va se tacha y se encoge; lo nuevo entra después, grande, y se asienta */
    .tut-diapo:not(.tut-todo) .tut-paso.ver .tut-quita{animation:tut-sale 1.1s .5s ease both;}
    .tut-diapo:not(.tut-todo) .tut-paso.ver .tut-nuevo{animation:tut-entra .7s 1.2s cubic-bezier(.3,1.5,.5,1) both;}
    .tut-diapo:not(.tut-todo) .tut-frase:first-of-type .tut-nuevo,.tut-diapo:not(.tut-todo) .tut-titulo + .tut-frase .tut-nuevo{animation-delay:.3s;}
  }
  .tut-todo .tut-quita{display:none;}
  @keyframes tut-sello{from{transform:scale(1.8) rotate(-6deg);opacity:0;} to{transform:none;opacity:1;}}
  @keyframes tut-sale{0%{text-decoration-line:none;max-width:4em;opacity:1;} 35%{text-decoration-line:line-through;max-width:4em;opacity:1;} 100%{text-decoration-line:line-through;max-width:0;opacity:0;}}
  @keyframes tut-entra{from{transform:scale(1.7) translateY(-6px);opacity:0;} to{transform:none;opacity:1;}}
  .options{display:flex;flex-direction:column;gap:10px;margin-top:auto;}
  .opt-btn{font-family:'Zen Maru Gothic',sans-serif;font-size:1rem;text-align:left;padding:12px 16px;border-radius:6px;border:1.5px solid var(--line);background:var(--washi);cursor:pointer;transition:all .15s ease;color:var(--sumi);overflow-wrap:break-word;word-break:break-word;}@media (hover:hover){
  .opt-btn:hover:not(:disabled){border-color:var(--ai);background:var(--papel);}}
  .opt-btn:disabled{cursor:default;}
  .opt-btn.correct{background:color-mix(in srgb, var(--matcha) 18%, transparent);border-color:var(--matcha);color:var(--matcha-osc);font-weight:600;}
  .opt-btn.wrong{background:color-mix(in srgb, var(--shu) 14%, transparent);border-color:var(--shu);color:var(--shu-deep);}
  .opt-btn.focused{border-color:var(--ai);box-shadow:0 0 0 2px color-mix(in srgb, var(--ai) 25%, transparent);background:var(--papel);}
  .fill-row{display:flex;gap:10px;margin-top:auto;}
  .fill-row input, .fill-row textarea{flex:1;resize:none;overflow:hidden;height:auto;line-height:1.4;white-space:nowrap;font-family:'Zen Maru Gothic',sans-serif;font-size:1.1rem;padding:12px 14px;border-radius:6px;border:1.5px solid var(--line);background:var(--washi);color:var(--sumi);}
  .fill-row input:focus, .fill-row textarea:focus{outline:none;border-color:var(--ai);}
  .fill-row button{font-family:'Zen Maru Gothic',sans-serif;font-weight:500;padding:12px 18px;border-radius:6px;border:none;background:var(--ai);color:var(--washi);cursor:pointer;}@media (hover:hover){
  .fill-row button:hover{background:var(--ai-deep);}}
  .fill-row button:disabled{opacity:.5;cursor:default;}
  .feedback{margin-top:14px;padding:12px 14px;border-radius:6px;font-family:'Zen Maru Gothic',sans-serif;font-size:.92rem;line-height:1.5;display:none;}
  .feedback.show{display:block;}
  .feedback.ok{background:color-mix(in srgb, var(--matcha) 14%, transparent);color:var(--matcha-osc);border:1px solid color-mix(in srgb, var(--matcha) 40%, transparent);}
  .feedback.ko{background:color-mix(in srgb, var(--shu) 10%, transparent);color:var(--shu-deep);border:1px solid color-mix(in srgb, var(--shu) 35%, transparent);}
  .next-row{display:flex;justify-content:flex-end;margin-top:16px;}
  .next-btn{font-family:'Zen Maru Gothic',sans-serif;font-weight:500;font-size:.95rem;background:var(--shu);color:var(--tinte-shu-2);border:none;border-radius:6px;padding:10px 22px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;}
  .next-btn.show{opacity:1;pointer-events:auto;}@media (hover:hover){
  .next-btn:hover{background:var(--shu-deep);}}

  .results{text-align:center;padding:20px 6px;}
  .results .stamp{width:92px;height:92px;border:3px solid var(--shu);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:'Shippori Mincho',serif;color:var(--shu);font-size:1.6rem;font-weight:700;transform:rotate(-6deg);}
  .results h2{font-family:'Shippori Mincho',serif;color:var(--ai-deep);margin:0 0 6px;}
  .results p{font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);margin:0 0 18px;}
  .results-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  /* ===== Recompensas: racha 連, revancha, último tramo y sello final (js/motor/recompensas.js) ===== */
  :root{--rc-1:var(--sumi);--rc-2:var(--shu);--rc-3:var(--kincha);--rc-oro:var(--kincha);--rc-kj:var(--ai-deep);--rc-neon:var(--shu);}
  :root[data-tema="sakura"]{--rc-1:#f2b7c6;--rc-2:#e892aa;--rc-3:#f7d6de;--rc-kj:var(--shu-deep);}
  :root[data-tema="matsuri"]{--rc-1:#e0a020;--rc-2:#d23a24;--rc-3:#1f3a6e;--rc-kj:var(--shu-deep);}
  :root[data-tema="samurai"]{--rc-1:#c9a24a;--rc-2:#e8dcc4;--rc-3:#c9a24a;--rc-kj:var(--sumi);--rc-oro:#c9a24a;}
  :root[data-tema="noche"]{--rc-1:#ff5fa2;--rc-2:#49d6e6;--rc-3:#ffd36b;--rc-kj:#ffe9f3;--rc-neon:#ff5fa2;--rc-oro:#ffd36b;}
  :root[data-tema="manga"]{--rc-1:var(--sumi);--rc-2:var(--sumi);--rc-3:var(--gris);--rc-kj:var(--sumi);}

  /* La racha: un sello 連 con los aciertos seguidos, en la esquina de la tarjeta */
  .rc-racha{position:absolute;top:-16px;right:14px;z-index:3;width:52px;height:52px;border:2.5px solid var(--shu);border-radius:10px;background:var(--papel);color:var(--shu-deep);
    display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;line-height:1;transform:rotate(-5deg);pointer-events:none;}
  .rc-racha small{font-size:.72rem;font-weight:700;} .rc-racha b{font-size:1.25rem;font-weight:700;margin-top:2px;}
  .rc-racha.oro{border-color:var(--rc-oro);color:var(--rc-oro);box-shadow:0 0 0 3px color-mix(in srgb, var(--rc-oro) 22%, transparent);}
  .rc-seguidas{position:absolute;top:44px;right:8px;z-index:3;font-family:'Shippori Mincho',serif;font-weight:700;font-size:1rem;color:var(--rc-oro);background:var(--papel);
    border:1px solid var(--rc-oro);border-radius:14px;padding:3px 10px;pointer-events:none;}
  .rc-check{position:absolute;right:16px;top:58px;width:64px;height:64px;z-index:2;pointer-events:none;}
  .rc-check path{fill:none;stroke:var(--matcha);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;}
  .rc-racha.rota{display:none;}

  /* Último tramo: la barra se vuelve dorada y late */
  .progress-row.rc-tramo .progress-fill{background:linear-gradient(90deg, var(--kincha), var(--rc-oro));}
  .progress-row.rc-tramo .progress-track{border-color:var(--rc-oro);}

  /* La revancha: el kanji del tema, a lo grande, sobre la tarjeta */
  .rc-revancha{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;border-radius:inherit;}
  .rc-velo{position:absolute;inset:0;background:color-mix(in srgb, var(--papel) 92%, transparent);}
  .rc-rv-txt{position:relative;text-align:center;padding:0 12px;}
  .rc-rv-kj{font-family:'Shippori Mincho',serif;font-weight:700;font-size:clamp(4rem, 22vw, 7.5rem);line-height:1;color:var(--rc-kj);}
  .rc-rv-kj.largo{font-size:clamp(2.6rem, 13vw, 4.6rem);}
  .rc-rv-sub{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;color:var(--sumi);margin:12px 0 0;font-size:1rem;}
  .rc-rv-sub small{display:block;font-weight:400;color:var(--gris-osc);margin-top:3px;font-size:.85rem;}
  .rc-chispa{position:absolute;left:50%;top:45%;border-radius:50%;background:var(--rc-1);opacity:0;}
  .rc-chispa.c1{background:var(--rc-2);} .rc-chispa.c2{background:var(--rc-3);}
  .rc-chispa.petalo{border-radius:70% 10% 70% 10%;} .rc-chispa.raya{border-radius:2px;}
  .rc-tajo{position:absolute;left:-10%;width:120%;top:50%;height:4px;background:linear-gradient(90deg, transparent, var(--rc-1), var(--rc-2), transparent);transform:rotate(-18deg);transform-origin:left center;}
  .rc-ef-neon .rc-rv-kj{text-shadow:0 0 8px var(--rc-neon), 0 0 22px var(--rc-neon), 0 0 42px var(--rc-2);}
  .rc-rayos{position:absolute;left:50%;top:50%;width:max(170%, 560px);transform:translate(-50%,-50%);}
  .rc-rayos path{fill:var(--sumi);}
  .rc-ef-rayos .rc-rv-kj{font-family:'Dela Gothic One',sans-serif;color:var(--papel);-webkit-text-stroke:2px var(--sumi);text-shadow:4px 4px 0 var(--sumi);}
  .rc-ef-rayos .rc-rv-sub{background:var(--papel);display:inline-block;padding:4px 10px;border:2px solid var(--sumi);}
  .rc-revancha.fuera{opacity:0;transition:opacity .35s ease;}

  /* El final: la nota sube y cae el sello 良 / 優 / 秀 / 満点 */
  .rc-final{position:relative;height:0;}
  .rc-sello{position:absolute;left:calc(50% + 28px);top:-86px;width:58px;height:58px;border-radius:8px;background:var(--shu);color:var(--papel);display:flex;align-items:center;justify-content:center;
    font-family:'Shippori Mincho',serif;font-weight:700;font-size:1.8rem;transform:rotate(8deg);box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--papel) 35%, transparent);}
  .rc-sello.largo{font-size:1.15rem;letter-spacing:-.02em;}
  .rc-sello.oro{background:var(--rc-oro);}
  .results .stamp.rc-oro{border-color:var(--rc-oro);color:var(--rc-oro);box-shadow:0 0 0 4px color-mix(in srgb, var(--rc-oro) 22%, transparent);}

  @media (prefers-reduced-motion:no-preference){
    .rc-racha.pop{animation:rc-pop .35s ease-out;}
    .rc-racha.rota{display:flex;animation:rc-cae .85s ease-in forwards;}
    .rc-seguidas{animation:rc-sube 1.6s ease-out forwards;}
    .rc-check path{stroke-dasharray:120;stroke-dashoffset:120;animation:rc-trazo .4s ease-out forwards, rc-fuera .3s .75s ease forwards;}
    .card.rc-tiembla{animation:rc-tiembla .32s ease-in-out;}
    .progress-row.rc-tramo .progress-track{animation:rc-late 1.4s ease-in-out infinite;}
    .rc-revancha{opacity:0;transition:opacity .18s ease;} .rc-revancha.ve{opacity:1;} .rc-revancha.fuera{opacity:0;}
    .rc-revancha .rc-rv-kj{opacity:0;transform:scale(.4);} .rc-revancha.ve .rc-rv-kj{animation:rc-kj .6s cubic-bezier(.2,1.6,.4,1) forwards;}
    .rc-revancha.ve .rc-chispa{animation:rc-chispa 1.1s ease-out forwards;}
    .rc-tajo{transform:rotate(-18deg) scaleX(0);} .rc-revancha.ve .rc-tajo{animation:rc-tajo .35s ease-out forwards;}
    .rc-rayos{opacity:0;} .rc-revancha.ve .rc-rayos{animation:rc-rayos .4s ease-out forwards;}
    .rc-sello{opacity:0;} .rc-sello.ve{animation:rc-estampa .4s cubic-bezier(.3,1.4,.5,1) forwards;}
  }
  @keyframes rc-pop{0%{transform:rotate(-5deg) scale(.6)}60%{transform:rotate(-5deg) scale(1.18)}100%{transform:rotate(-5deg) scale(1)}}
  @keyframes rc-cae{0%{transform:rotate(-5deg)}25%{transform:rotate(14deg)}100%{transform:rotate(38deg) translateY(70px);opacity:0}}
  @keyframes rc-sube{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
  @keyframes rc-trazo{to{stroke-dashoffset:0}}
  @keyframes rc-fuera{to{opacity:0}}
  @keyframes rc-tiembla{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  @keyframes rc-late{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--rc-oro) 0%, transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--rc-oro) 28%, transparent)}}
  @keyframes rc-kj{to{opacity:1;transform:scale(1)}}
  @keyframes rc-chispa{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1)}}
  @keyframes rc-tajo{to{transform:rotate(-18deg) scaleX(1)}}
  @keyframes rc-rayos{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:.92;transform:translate(-50%,-50%) scale(1)}}
  @keyframes rc-estampa{0%{opacity:0;transform:rotate(8deg) scale(2.2)}100%{opacity:1;transform:rotate(8deg) scale(1)}}
  .rc-cuenta{position:absolute;left:50%;top:-108px;width:92px;height:92px;margin-left:-46px;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;color:var(--shu);font-size:1.6rem;font-weight:700;transform:rotate(-6deg);pointer-events:none;}
  .results .stamp.rc-contando{color:transparent;}
  .results .stamp.rc-oro + .rc-final .rc-cuenta{color:var(--rc-oro);}

  /* El tren avanza: en el camino, al volver de una lección (js/motor/recompensas.js) */
  .rc-tren{position:absolute;left:0;top:0;z-index:4;width:38px;height:24px;pointer-events:none;opacity:0;transition:opacity .25s ease;}
  .rc-tren.ve{opacity:1;} .rc-tren.fuera{opacity:0;transition:opacity .45s ease;}
  .rc-tren-c{fill:var(--papel);stroke:var(--sumi);stroke-width:1.6;} .rc-tren-v{fill:var(--ai);} .rc-tren-l{fill:var(--lc, var(--shu));} .rc-tren-r{fill:var(--sumi);}
  .rc-medida{fill:none;stroke:none;}
  .rc-cartel{position:fixed;left:50%;bottom:calc(var(--alto-tabbar, 0px) + 16px);z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
    padding:8px 14px 8px 8px;border-radius:10px;background:var(--sumi);color:var(--papel);font-family:'Zen Maru Gothic',sans-serif;font-size:.9rem;line-height:1.3;
    box-shadow:0 6px 18px color-mix(in srgb, var(--sumi) 30%, transparent);transform:translate(-50%, 0);opacity:0;transition:opacity .3s ease, transform .3s ease;pointer-events:none;}
  .rc-cartel.ve{opacity:1;}
  .rc-cartel b{flex:0 0 auto;font-family:'Shippori Mincho',serif;font-size:1rem;background:var(--rc-oro);color:var(--sumi);border-radius:6px;padding:4px 8px;}
  .rc-cartel strong{font-weight:700;}
  .rc-ekisello{position:absolute;z-index:5;width:76px;height:76px;margin:-96px 0 0 -38px;border:3px solid var(--shu);border-radius:14px;outline:1.2px solid var(--shu);outline-offset:-8px;
    background:color-mix(in srgb, var(--papel) 88%, transparent);color:var(--shu);display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:'Shippori Mincho',serif;line-height:1.1;transform:rotate(-8deg);pointer-events:none;}
  .rc-ekisello b{font-size:1.2rem;} .rc-ekisello span{font-size:.75rem;margin-top:3px;}
  .rc-ekisello.fuera{opacity:0;transition:opacity .45s ease;}
  .pl-tren .pl-tren-c{fill:var(--papel);stroke:var(--sumi);stroke-width:1.2;} .pl-tren .pl-tren-v{fill:var(--ai);} .pl-tren .pl-tren-l{fill:var(--shu);}
  @media (prefers-reduced-motion:no-preference){
    .rc-cartel{transform:translate(-50%, 14px);} .rc-cartel.ve{transform:translate(-50%, 0);}
    .st.rc-ola .st-dot{animation:rc-ola 1.2s ease-out;} .st.rc-llega .st-dot{animation:rc-ola 1s ease-out 2;}
    .rc-ekisello{opacity:0;} .rc-ekisello.ve{animation:rc-estampa-eki .4s cubic-bezier(.3,1.4,.5,1) forwards;} .rc-ekisello.ve.fuera{animation:rc-fuera .45s ease forwards;}
  }
  @keyframes rc-ola{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--lc) 70%, transparent)}100%{box-shadow:0 0 0 22px color-mix(in srgb, var(--lc) 0%, transparent)}}
  @keyframes rc-estampa-eki{0%{opacity:0;transform:rotate(-8deg) scale(2)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}

  .btn{font-family:'Zen Maru Gothic',sans-serif;font-weight:500;border:none;border-radius:6px;padding:12px 20px;cursor:pointer;font-size:.92rem;}
  .btn.primary{background:var(--ai);color:var(--washi);}@media (hover:hover){
  .btn.primary:hover{background:var(--ai-deep);}}
  .btn.ghost{background:var(--washi);border:1.5px solid var(--line);color:var(--sumi);}@media (hover:hover){
  .btn.ghost:hover{border-color:var(--ai);}}
  .copy-box{
    text-align:left;background:var(--washi);border:1px solid var(--line);border-radius:6px;padding:12px 14px;
    margin-top:16px;font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;line-height:1.5;color:var(--sumi);
    max-height:160px;overflow-y:auto;white-space:pre-wrap;display:none;
  }
  .copy-box.show{display:block;}
  .hint-note{font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris-osc);margin-top:10px;}   /* --gris-osc: contraste AA en los 6 temas */

  .dash-strip{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap;}
  .dash-stat{flex:1;min-width:110px;background:var(--papel);border:1px solid var(--line);border-radius:8px;padding:14px 12px;text-align:center;box-shadow:0 2px 0 var(--line);}
  .dash-stat .v{display:block;font-family:'Shippori Mincho',serif;font-size:1.6rem;color:var(--ai-deep);font-weight:700;}
  .dash-stat .l{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;color:var(--gris);margin-top:2px;}

  .tema-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
  .tema-card{
    background:var(--papel);border:1px solid var(--line);border-radius:10px;padding:24px 22px;cursor:pointer;
    box-shadow:0 2px 0 var(--line), 0 10px 24px rgba(43,42,40,0.06);transition:transform .12s ease;position:relative;overflow:hidden;
  }@media (hover:hover){
  .tema-card:hover{transform:translateY(-3px);border-color:var(--ai);}}
  .tema-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg, var(--ai) 0 18px, transparent 18px 26px);opacity:.5;}
  .tema-card .tema-kanji{font-family:'Shippori Mincho',serif;font-size:2.2rem;color:var(--ai-deep);display:block;margin-bottom:4px;}
  .tema-card h2{font-family:'Shippori Mincho',serif;font-size:1.3rem;color:var(--ai-deep);margin:0 0 2px;}
  .tema-card .tema-sub{font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--shu-deep);margin:0 0 10px;}
  .tema-card .tema-desc{font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;color:var(--sumi);line-height:1.5;margin:0 0 16px;}
  .tema-progbar{height:7px;border-radius:5px;background:var(--washi-deep);border:1px solid var(--line);overflow:hidden;margin-bottom:10px;}
  .tema-progbar div{height:100%;background:linear-gradient(90deg, var(--ai), var(--ai-deep));}
  .tema-foot{display:flex;justify-content:space-between;align-items:center;font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;color:var(--gris);}
  .tema-foot .tema-cta{color:var(--shu-deep);font-weight:600;}
  .tab-row{display:flex;gap:8px;margin-bottom:18px;}
  .tab-btn{font-family:'Zen Maru Gothic',sans-serif;font-weight:500;padding:8px 18px;border-radius:20px;border:1.5px solid var(--line);background:var(--washi);cursor:pointer;color:var(--sumi);font-size:.88rem;}
  .tab-btn.active{background:var(--ai);color:var(--washi);border-color:var(--ai);}
  .ref-section{background:var(--papel);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:16px;}
  .ref-section h4{font-family:'Shippori Mincho',serif;color:var(--ai-deep);font-size:1.05rem;margin:0 0 12px;}
  .ref-table{width:100%;border-collapse:collapse;font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;}
  .ref-table th{text-align:left;color:var(--ai-deep);border-bottom:2px solid var(--line);padding:6px 8px;font-weight:600;}
  .ref-table td{padding:6px 8px;border-bottom:1px solid var(--washi-deep);color:var(--sumi);}
  .ref-html{font-family:'Zen Maru Gothic',sans-serif;font-size:.88rem;line-height:1.65;color:var(--sumi);}
  .ref-html strong{color:var(--ai-deep);}
  .ref-html .ex{color:var(--gris);font-style:italic;}
  .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
  .chip{font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;color:var(--ai-deep);background:color-mix(in srgb, var(--ai) 8%, transparent);border:1px solid color-mix(in srgb, var(--ai) 20%, transparent);padding:3px 10px;border-radius:20px;}

  @media (max-width:420px){ .hdr .kanji{font-size:1.9rem;} .card{padding:20px 16px;} }
  /* ---- Taller de verbos ---- */
  .taller-card{background:var(--ai-deep);color:var(--washi);border-radius:10px;padding:20px 22px;margin-bottom:22px;cursor:pointer;display:flex;align-items:center;gap:18px;box-shadow:0 2px 0 var(--sumi),0 10px 24px color-mix(in srgb, var(--ai-deep) 18%, transparent);transition:transform .12s ease;}@media (hover:hover){
  .taller-card:hover{transform:translateY(-2px);}}
  .taller-card .tk{font-family:'Shippori Mincho',serif;font-size:2.2rem;color:var(--kincha);line-height:1;}
  .taller-card h2{font-family:'Shippori Mincho',serif;font-size:1.25rem;margin:0 0 4px;}
  .taller-card p{font-family:'Zen Maru Gothic',sans-serif;font-size:.82rem;margin:0;opacity:.85;line-height:1.45;}
  .taller-card .tcta{margin-left:auto;font-family:'Zen Maru Gothic',sans-serif;font-weight:600;color:var(--kincha);white-space:nowrap;}
  .t-h3{font-family:'Zen Maru Gothic',sans-serif;color:var(--ai-deep);font-size:1rem;margin:22px 0 6px;}
  .pool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
  .pool-card{background:var(--papel);border:1.5px solid var(--line);border-radius:8px;padding:12px;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;display:flex;flex-direction:column;gap:3px;}@media (hover:hover){
  .pool-card:hover{border-color:var(--ai);}}
  .pool-card.sel{border-color:var(--ai);box-shadow:0 0 0 2px color-mix(in srgb, var(--ai) 25%, transparent);background:var(--papel);}
  .pool-card .pn{font-family:'Shippori Mincho',serif;font-size:1.2rem;color:var(--shu-deep);}
  .pool-card .pt{font-weight:600;font-size:.92rem;}
  .pool-card .pd{font-size:.72rem;color:var(--gris);line-height:1.35;}
  .pbar{display:flex;height:5px;border-radius:4px;background:var(--washi-deep);overflow:hidden;margin:6px 0 2px;}
  .pbar .ok{background:var(--matcha);} .pbar .mid{background:var(--kincha);} .pbar .ko{background:var(--shu);}
  .vk{font-family:'Shippori Mincho',serif;color:var(--gris);font-size:.9em;}
  .vm{font-size:.85rem;color:var(--gris);}
  .vq{font-size:.95rem;color:var(--ai-deep);}
  .vbig{font-size:1.6rem;font-weight:700;color:var(--ai-deep);}
  .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .vcell{display:flex;flex-direction:column;gap:4px;font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;color:var(--ai-deep);font-weight:500;}
  .vcell small{color:var(--gris);font-weight:400;}
  .vcell input{font-family:'Zen Maru Gothic',sans-serif;font-size:1.05rem;padding:10px 12px;border-radius:6px;border:1.5px solid var(--line);background:var(--washi);color:var(--sumi);width:100%;}
  .vcell input:focus{outline:none;border-color:var(--ai);}
  .vcell input.good{border-color:var(--matcha);background:color-mix(in srgb, var(--matcha) 14%, transparent);}
  .vcell input.bad{border-color:var(--shu);background:color-mix(in srgb, var(--shu) 10%, transparent);text-decoration:line-through;}
  .vcell .vfix{font-style:normal;color:var(--matcha);font-weight:700;min-height:1em;}
  .vdiag{margin:6px 0 4px;padding-left:18px;} .vdiag li{margin-bottom:4px;}
  .vsteps{margin-top:10px;padding-top:10px;border-top:1px dashed color-mix(in srgb, var(--shu) 35%, transparent);color:var(--sumi);}
  .feedback.ok .vsteps{border-top-color:color-mix(in srgb, var(--matcha) 40%, transparent);}
  .vsteps>div{margin-bottom:5px;}
  .vstep{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--ai);color:var(--washi);font-size:.7rem;margin-right:6px;}
  .vtable{border-collapse:collapse;font-size:.85rem;margin-left:24px;}
  .vtable td{padding:2px 10px 2px 0;white-space:nowrap;} .vtable tr.hl td{color:var(--shu-deep);font-weight:600;}
  .vchips{display:flex;flex-wrap:wrap;gap:6px;}
  .vchip{font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;padding:4px 10px;border-radius:16px;border:1.5px solid var(--line);background:var(--papel);cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;}
  .vchip small{font-size:.62rem;color:var(--gris);}
  .vchip.st-ko{border-color:var(--shu);background:color-mix(in srgb, var(--shu) 10%, transparent);}
  .vchip.st-mid{border-color:var(--kincha);background:color-mix(in srgb, var(--kincha) 12%, transparent);}
  .vchip.st-ok{border-color:var(--matcha);background:color-mix(in srgb, var(--matcha) 16%, transparent);}
  .legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;} .legend .vchip{cursor:default;font-size:.72rem;}
  @media (max-width:420px){ .vgrid{grid-template-columns:1fr;} .vtable{margin-left:0;font-size:.8rem;} .vtable td:nth-child(2){display:none;} .taller-card{flex-wrap:wrap;} .taller-card .tcta{margin-left:0;} }
  .vsearch{width:100%;font-family:'Zen Maru Gothic',sans-serif;font-size:1rem;padding:11px 14px;border-radius:8px;border:1.5px solid var(--line);background:var(--papel);color:var(--sumi);margin-bottom:10px;}
  .vsearch:focus{outline:none;border-color:var(--ai);}
  .vselect{font-family:'Zen Maru Gothic',sans-serif;font-size:.88rem;padding:10px;border-radius:6px;border:1.5px solid var(--line);background:var(--washi);color:var(--sumi);max-width:100%;}
  .vrow{background:var(--papel);border:1px solid var(--line);border-radius:6px;margin-bottom:6px;}
  .vrow-h{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;}
  .vrow-jp{font-weight:600;min-width:120px;}
  .vrow-es{color:var(--gris-osc-2);font-size:.88rem;flex:1;}
  .vrow-d{display:none;padding:0 12px 10px;font-family:'Zen Maru Gothic',sans-serif;font-size:.88rem;}
  .vrow.open .vrow-d{display:block;} .vrow.open{border-color:var(--ai);}
  .vrow-d .vsteps{margin-top:0;border-top-color:var(--line);}
  .vdot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--line);background:var(--papel);}
  .vdot.st-ko{background:var(--shu);border-color:var(--shu);} .vdot.st-mid{background:var(--kincha);border-color:var(--kincha);} .vdot.st-ok{background:var(--matcha);border-color:var(--matcha);}
  @media (max-width:420px){ .vrow-h{flex-wrap:wrap;gap:4px 10px;} .vrow-jp{min-width:0;} .vrow-es{flex-basis:100%;order:3;} }
  .vbadge{display:inline-flex;align-items:center;gap:3px;font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;padding:2px 7px;border-radius:12px;border:1.5px solid var(--line);background:var(--papel);color:var(--gris);white-space:nowrap;}
  .vbadge i{font-style:normal;letter-spacing:1px;}
  .vbadge.st-ko{border-color:var(--shu);background:color-mix(in srgb, var(--shu) 12%, transparent);color:var(--shu-deep);}
  .vbadge.st-mid{border-color:var(--kincha);background:color-mix(in srgb, var(--kincha) 14%, transparent);color:var(--kincha-osc-2);}
  .vbadge.st-ok{border-color:var(--matcha);background:color-mix(in srgb, var(--matcha) 18%, transparent);color:var(--matcha-osc);}
  .vbadges{display:flex;gap:4px;margin-left:auto;}
  .vfilters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
  .vfilter{font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;padding:6px 11px;border-radius:16px;border:1.5px solid var(--line);background:var(--papel);cursor:pointer;color:var(--sumi);}
  .vfilter.on{border-color:var(--ai);background:var(--ai);color:var(--washi);}
  
  .review-banner{font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;background:color-mix(in srgb, var(--kincha) 14%, transparent);border:1.5px dashed var(--kincha);color:var(--kincha-osc-3);border-radius:6px;padding:9px 12px;margin-bottom:12px;line-height:1.5;}
  .review-banner span{font-size:.76rem;opacity:.85;}
  .nav-hint{text-align:center;margin-top:14px;}
  @media (hover:none){ .nav-hint{display:none;} }
  .seg{display:flex;gap:8px;margin:4px 0 6px;}
  .seg-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:'Zen Maru Gothic',sans-serif;padding:10px 8px;border-radius:8px;border:1.5px solid var(--line);background:var(--papel);color:var(--sumi);cursor:pointer;}
  .seg-btn b{font-size:1.05rem;} .seg-btn small{font-size:.72rem;color:var(--gris);}
  .seg-btn.on{background:var(--ai);border-color:var(--ai);color:var(--washi);} .seg-btn.on small{color:color-mix(in srgb, var(--washi) 80%, transparent);}
  .subgroup{border-left:3px solid var(--line);padding-left:12px;margin:12px 0 16px;}
  .sg-h{font-family:'Zen Maru Gothic',sans-serif;margin-bottom:8px;display:flex;flex-direction:column;gap:2px;}
  .sg-h b{color:var(--ai-deep);font-size:.95rem;} .sg-h span{font-size:.75rem;color:var(--gris);}
  .ta-table td,.ta-table th{text-align:center;white-space:nowrap;} .ta-table td:last-child{text-align:left;}
  .base-table td,.base-table th{white-space:nowrap;} .base-table td:nth-child(2){white-space:normal;min-width:110px;}
  /* ---- Portada por secciones ---- */
  .sec-list{display:flex;flex-direction:column;gap:16px;}
  .sec-card{position:relative;align-items:center;overflow:hidden;border-radius:12px;padding:22px 22px 20px;cursor:pointer;display:flex;gap:18px;align-items:flex-start;color:var(--washi);transition:transform .12s ease;box-shadow:0 2px 0 rgba(0,0,0,.25),0 12px 26px rgba(43,42,40,.16);}@media (hover:hover){
  .sec-card:hover{transform:translateY(-3px);}}
  .sec-card::after{content:"";position:absolute;right:-30px;bottom:-40px;width:160px;height:160px;border-radius:50%;border:18px solid rgba(255,255,255,.06);}
  .sec-shu{background:linear-gradient(135deg,var(--shu-osc),var(--shu-osc-2));} .sec-mura{background:linear-gradient(135deg,var(--murasaki),var(--murasaki-osc));} .sec-mura .sec-kj{color:var(--tinte-murasaki);} .sec-ai{background:linear-gradient(135deg,var(--ai),var(--ai-deep));} .sec-kin{background:linear-gradient(135deg,var(--matcha-osc-3),var(--matcha-osc-2));}
  .sec-kj{font-family:'Shippori Mincho',serif;font-size:2.3rem;line-height:1;color:var(--kincha);writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.1em;flex-shrink:0;}
  .sec-shu .sec-kj{color:var(--tinte-kincha-2);} .sec-kin .sec-kj{color:var(--tinte-kincha);}
  .sec-body{flex:1;min-width:0;}
  .sec-eyebrow{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-bottom:2px;}
  .sec-card h2,.sec-head h2{font-family:'Shippori Mincho',serif;font-size:1.45rem;margin:0 0 6px;}
  .sec-card h2 small{font-size:.8rem;opacity:.7;font-family:'Zen Maru Gothic',sans-serif;}
  .sec-card p{font-family:'Zen Maru Gothic',sans-serif;font-size:.84rem;line-height:1.45;margin:0 0 10px;opacity:.9;}
  .sec-card .sec-meta{font-size:.76rem;margin:6px 0 0;opacity:.85;}
  .sec-bar{margin-top:8px;height:6px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;}
  .sec-bar div{height:100%;background:var(--kincha);}
  .sec-cta{font-family:'Zen Maru Gothic',sans-serif;font-size:1.4rem;color:var(--kincha);align-self:center;}
  .sec-head{display:flex;align-items:center;gap:14px;border-radius:12px;padding:14px 16px;color:var(--washi);margin-bottom:18px;}
  .sec-head .sec-kj{writing-mode:horizontal-tb;font-size:1.9rem;}
  .sec-head h2{margin:0;font-size:1.25rem;}
  .sec-head .back-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--washi);}
  .tema-card.locked{opacity:.55;cursor:default;border-style:dashed;}@media (hover:hover){ .tema-card.locked:hover{transform:none;border-color:var(--line);}}
  @media (max-width:420px){ .sec-card{padding:18px 16px;gap:12px;} .sec-kj{font-size:1.9rem;} .sec-cta{display:none;} }

  /* ---- Cuenta ---- */
  .acct{margin-top:6px;font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris);}
  .acct-ok{color:var(--matcha);}
  .acct-cta{border-color:var(--kincha);color:var(--kincha-osc-2);}
  .auth-form{display:flex;flex-direction:column;gap:12px;}
  .auth-form label{display:flex;flex-direction:column;gap:4px;font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;color:var(--ai-deep);}
  .auth-form input{font-family:'Zen Maru Gothic',sans-serif;font-size:1rem;padding:11px 12px;border-radius:6px;border:1.5px solid var(--line);background:var(--washi);color:var(--sumi);}
  .auth-form input:focus{outline:none;border-color:var(--ai);}
  .auth-actions{display:flex;gap:10px;flex-wrap:wrap;}
  .btn:disabled{opacity:.5;cursor:default;}
  .auth-link{color:var(--shu-deep);font-weight:600;}
  .danger-zone{border-color:color-mix(in srgb, var(--shu) 45%, transparent);}
  .btn-danger{font-family:'Zen Maru Gothic',sans-serif;font-weight:500;padding:12px 16px;border-radius:6px;border:none;background:var(--shu);color:var(--tinte-shu-2);cursor:pointer;white-space:nowrap;}
  .btn-danger:disabled{opacity:.4;cursor:default;}

  /* ---- Móvil: ejercicios compactos para que la pregunta no se esconda tras el teclado ---- */
  @media (max-width:600px), (max-height:500px){
    body.focus-mode{padding-top:10px;}
    body.focus-mode .hdr{display:none;}
    body.focus-mode .progress-row{margin-bottom:12px;}
    body.focus-mode .card{min-height:0;padding:16px 14px;}
    body.focus-mode .question{margin-bottom:12px;}
    body.focus-mode .fill-row, body.focus-mode .options{margin-top:4px;}
    body.focus-mode .nav-hint{display:none;}
  }

  /* ---- Nada puede ser más ancho que la pantalla (el botón "Comprobar" se salía en móvil) ---- */
  html, body{overflow-x:hidden;max-width:100%;}
  .fill-row input, .fill-row textarea, .vcell input, .vsearch, .vselect{min-width:0;}
  .fill-row button, .fill-row .btn-danger{flex-shrink:0;}
  @media (max-width:420px){ .fill-row button{padding:12px 14px;} }

  /* ---- "Comprobar" debajo de la casilla, a todo el ancho ---- */
  .fill-row{flex-direction:column;align-items:stretch;}
  .fill-row button{width:100%;}
  .fill-row > span:empty{display:none;}
  .feedback.hint{background:color-mix(in srgb, var(--kincha) 14%, transparent);color:var(--kincha-osc-3);border:1px dashed var(--kincha);}

  /* ---- Teclado en pantalla ---- */
  .kb{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;justify-content:center;}
  .kb-key{font-family:'Noto Serif',serif;font-size:1.05rem;min-width:34px;height:38px;padding:0 6px;border-radius:6px;border:1.5px solid var(--line);background:var(--papel);color:var(--sumi);cursor:pointer;touch-action:manipulation;}
  .kb-key:active{background:var(--washi-deep);}
  .kb-wide{font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;min-width:72px;}
  @media (max-width:420px){ .kb{gap:4px;} .kb-key{min-width:28px;height:36px;font-size:.95rem;padding:0 4px;} }

  /* =====================================================================
     CAMINO · portada Hoy
     ===================================================================== */
  .today{margin-bottom:22px;}
  .today-next{width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:none;cursor:pointer;
    background:var(--ai-deep);color:var(--washi);border-radius:14px;padding:18px 20px;box-shadow:0 3px 0 var(--sumi),0 14px 30px color-mix(in srgb, var(--ai-deep) 22%, transparent);}@media (hover:hover){
  .today-next:hover{transform:translateY(-1px);}}
  .today-next:focus-visible, .node:focus-visible, .tl-item button:focus-visible{outline:3px solid var(--kincha);outline-offset:3px;}
  .today-next.done{background:var(--matcha);box-shadow:0 3px 0 var(--matcha-osc);cursor:default;}
  .tn-seal{flex-shrink:0;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:'Shippori Mincho',serif;font-size:1.7rem;font-weight:700;background:var(--shu);color:var(--tinte-shu-4);transform:rotate(-6deg);
    box-shadow:inset 0 0 0 3px rgba(255,246,234,.35);}
  .tn-body{display:flex;flex-direction:column;gap:2px;min-width:0;font-family:'Zen Maru Gothic',sans-serif;}
  .tn-k{font-size:.78rem;opacity:.75;}
  .tn-t{font-family:'Shippori Mincho',serif;font-size:1.35rem;font-weight:700;line-height:1.2;}
  .tn-s{font-size:.84rem;color:var(--kincha);}
  .today-row{display:flex;gap:10px;margin-top:12px;}
  .today-chip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border-radius:10px;
    background:var(--papel);border:1px solid var(--line);font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);}
  .today-chip b{font-family:'Shippori Mincho',serif;font-size:1.5rem;color:var(--ai-deep);line-height:1.1;}
  .today-chip b small{font-size:.9rem;color:var(--gris);font-weight:400;}
  .today-chip span{font-size:.72rem;color:var(--gris);text-align:center;}
  button.today-chip{cursor:pointer;}
  button.today-chip:disabled{cursor:default;}
  button.today-chip.has{background:var(--matcha);border-color:var(--matcha);}
  button.today-chip.has b, button.today-chip.has span{color:var(--tinte-matcha);}
  .path-bar{display:flex;justify-content:center;margin-bottom:6px;}
  .path-bar .seg{width:min(260px,100%);}
  .today-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px;}

  /* ---- Cabecera de unidad ---- */
  .unit{margin-top:26px;}
  .unit-head{display:flex;gap:14px;align-items:flex-start;padding:16px 16px 14px;border-radius:12px;color:var(--washi);position:relative;}
  .unit-head.u0{background:linear-gradient(135deg,var(--murasaki),var(--murasaki-osc));} .unit-head.u1{background:linear-gradient(135deg,var(--shu-osc),var(--shu-osc-2));}
  .unit-head.u2{background:linear-gradient(135deg,var(--ai),var(--ai-deep));} .unit-head.u3{background:linear-gradient(135deg,var(--matcha-osc-3),var(--matcha-osc-2));}
  .unit-head.u4{background:linear-gradient(135deg,var(--kincha-osc),var(--kincha-osc-4));}
  .unit-kj{font-family:'Shippori Mincho',serif;font-size:2.4rem;line-height:1;color:var(--tinte-kincha-2);flex-shrink:0;width:44px;text-align:center;}
  .unit-txt{flex:1;min-width:0;font-family:'Zen Maru Gothic',sans-serif;}
  .unit-n{font-size:.74rem;opacity:.75;}
  .unit-txt :is(h2,h3){font-family:'Shippori Mincho',serif;font-size:1.3rem;margin:1px 0 3px;}
  .unit-txt p{font-size:.82rem;line-height:1.45;margin:0 0 9px;opacity:.9;}
  .unit-prog{height:5px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden;}
  .unit-prog div{height:100%;background:var(--kincha);}
  .unit-count{font-size:.72rem;opacity:.8;display:block;margin-top:4px;}
  .unit-start{position:absolute;top:12px;right:12px;font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;padding:4px 10px;border-radius:14px;
    border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:var(--washi);cursor:pointer;}@media (hover:hover){
  .unit-start:hover{background:rgba(255,255,255,.22);}}
  .unit-head:has(.unit-start) .unit-txt{padding-right:84px;}

  /* ---- Estilo «Camino»: sellos unidos por un trazo de tinta ---- */
  .trail{position:relative;padding:18px 0 4px;}
  .trail-svg{position:absolute;inset:0;pointer-events:none;overflow:visible;}
  .node-row{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:20px;transform:translateX(var(--off));}
  .node{position:relative;width:66px;height:66px;border-radius:50%;border:2.5px solid var(--line);background:var(--washi);cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--line);transition:transform .12s ease;}@media (hover:hover){
  .node:hover{transform:translateY(-2px);}}
  .node-seal{font-family:'Shippori Mincho',serif;font-size:1.6rem;font-weight:700;color:var(--gris-cl);}
  .node.is-done{background:var(--shu);border-color:var(--shu-deep);box-shadow:0 4px 0 var(--shu-deep);transform:rotate(-5deg);}
  .node.is-done .node-seal{color:var(--tinte-shu);}
  .node.is-done.t-review{background:var(--kincha);border-color:var(--kincha-osc);box-shadow:0 4px 0 var(--kincha-osc);}
  .node.is-current{background:var(--papel);border-color:var(--ai);border-width:3px;box-shadow:0 4px 0 var(--ai-deep),0 0 0 7px color-mix(in srgb, var(--ai) 12%, transparent);}
  .node.is-current .node-seal{color:var(--ai-deep);}
  .node.t-review:not(.is-done){border-style:double;border-width:5px;}
  .node-flag{position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Zen Maru Gothic',sans-serif;
    font-size:.72rem;font-weight:700;background:var(--ai);color:var(--washi);padding:3px 10px;border-radius:12px;}
  .node-flag::after{content:"";position:absolute;bottom:-5px;left:50%;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--ai);}
  .node-label{margin-top:8px;text-align:center;font-family:'Zen Maru Gothic',sans-serif;font-size:.84rem;font-weight:500;color:var(--sumi);max-width:160px;line-height:1.3;}
  .node-label small{display:block;font-size:.7rem;font-weight:400;color:var(--gris);}
  @media (prefers-reduced-motion:no-preference){ .node.is-current{animation:node-in .6s ease-out 1;} }
  @keyframes node-in{from{box-shadow:0 4px 0 var(--ai-deep),0 0 0 0 color-mix(in srgb, var(--ai) 35%, transparent);} to{box-shadow:0 4px 0 var(--ai-deep),0 0 0 7px color-mix(in srgb, var(--ai) 12%, transparent);}}

  /* ---- Estilo «Lista»: línea de tiempo compacta ---- */
  .tl{list-style:none;margin:10px 0 0;padding:0 0 0 22px;position:relative;}
  .tl::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:2px;background:var(--line);}
  .tl-item button{width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;padding:7px 4px;cursor:pointer;text-align:left;border-radius:8px;font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);}@media (hover:hover){
  .tl-item button:hover{background:rgba(201,189,156,.25);}}
  .tl-dot{position:relative;z-index:1;flex-shrink:0;width:30px;height:30px;margin-left:-15px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:'Shippori Mincho',serif;font-size:.95rem;background:var(--washi);border:2px solid var(--line);color:var(--gris-cl);}
  .tl-item.is-done .tl-dot{background:var(--shu);border-color:var(--shu-deep);color:var(--tinte-shu);}
  .tl-item.is-current .tl-dot{border-color:var(--ai);color:var(--ai-deep);box-shadow:0 0 0 4px color-mix(in srgb, var(--ai) 15%, transparent);}
  .tl-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
  .tl-txt b{font-weight:500;font-size:.92rem;}
  .tl-txt small{font-size:.74rem;color:var(--gris);}
  .tl-now{font-size:.72rem;font-weight:700;background:var(--ai);color:var(--washi);padding:3px 9px;border-radius:12px;}

  /* ---- Ficha de lección ---- */
  .step-card{min-height:0;}
  .step-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;}
  .step-seal{flex-shrink:0;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;
    font-size:1.6rem;font-weight:700;background:var(--shu);color:var(--tinte-shu);transform:rotate(-6deg);}
  .step-seal.t-review{background:var(--kincha);} .step-seal.t-verb{background:var(--ai);} .step-seal.t-kanji{background:var(--matcha);}
  .step-title{font-family:'Shippori Mincho',serif;color:var(--ai-deep);font-size:1.4rem;margin:0 0 4px;}
  .step-ref{border-top:1px dashed var(--line);padding-top:10px;margin-bottom:16px;}
  .step-ref summary{cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;font-weight:500;color:var(--shu-deep);margin-bottom:10px;}
  .step-ref .ref-section{box-shadow:none;}
  .step-ref .ref-table{display:block;overflow-x:auto;}
  .step-go{width:100%;padding:14px;font-size:1rem;}

  /* ---- ¿Desde dónde empiezas? ---- */
  .place{max-width:520px;margin:0 auto;}
  .place-h{font-family:'Shippori Mincho',serif;color:var(--ai-deep);font-size:1.6rem;margin:4px 0 6px;}
  .place-opt{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;margin-bottom:10px;padding:16px 18px;border-radius:12px;cursor:pointer;
    background:var(--papel);border:1.5px solid var(--line);font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);box-shadow:0 2px 0 var(--line);}@media (hover:hover){
  .place-opt:hover{border-color:var(--ai);}}
  .place-opt b{font-size:1.02rem;color:var(--ai-deep);}
  .place-opt span{font-size:.84rem;color:var(--gris);}
  .place-opt.small{padding:11px 14px;}
  .place-more summary{cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;color:var(--shu-deep);font-weight:500;margin:6px 0 12px;}
  @media (max-width:420px){ .today-next{padding:14px 14px;gap:12px;} .tn-seal{width:50px;height:50px;font-size:1.45rem;} .tn-t{font-size:1.15rem;} .node-row{--scale:.8;} }

  /* ---- Bienvenida (primera vez) ---- */
  .welcome{max-width:460px;margin:8px auto 0;text-align:center;}
  .welcome-h{font-family:'Shippori Mincho',serif;color:var(--ai-deep);font-size:1.75rem;line-height:1.25;margin:0 0 10px;}
  .welcome-p{font-family:'Zen Maru Gothic',sans-serif;font-size:.98rem;line-height:1.6;color:var(--sumi);margin:0 auto 22px;max-width:36ch;}
  .welcome-trail{display:flex;align-items:center;justify-content:center;gap:0;margin:0 0 24px;}
  .w-seal{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-size:1.4rem;font-weight:700;
    background:var(--washi);border:2.5px solid var(--line);color:var(--gris-cl);}
  .w-seal.on{background:var(--shu);border-color:var(--shu-deep);color:var(--tinte-shu);transform:rotate(-6deg);}
  .w-dash{width:26px;border-top:3px dotted var(--line);}
  .w-more{font-family:'Shippori Mincho',serif;color:var(--gris-cl);font-size:1.3rem;margin-left:4px;}
  .welcome-list{list-style:none;padding:0;margin:0 auto 26px;max-width:340px;text-align:left;font-family:'Zen Maru Gothic',sans-serif;font-size:.9rem;color:var(--sumi);}
  .welcome-list li{padding:8px 0 8px 26px;border-bottom:1px dashed var(--line);position:relative;}
  .welcome-list li::before{content:"";position:absolute;left:4px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--shu);}
  .welcome-go{width:100%;max-width:340px;padding:14px;font-size:1.05rem;}
  .welcome-acc{width:100%;max-width:340px;margin-top:10px;}
  .invite{margin:18px auto 0;max-width:420px;text-align:left;background:var(--papel);border:1.5px solid var(--kincha);border-radius:10px;padding:14px 16px;font-family:'Zen Maru Gothic',sans-serif;}
  .invite b{display:block;color:var(--ai-deep);font-size:1rem;margin-bottom:3px;}
  .invite span{display:block;font-size:.85rem;color:var(--sumi);line-height:1.5;margin-bottom:10px;}
  .invite-acts{display:flex;gap:8px;flex-wrap:wrap;}

  /* ---- Fondo del camino: patrón de tinta suave (img/patron.svg) ---- */
  /* (los dibujos los coloca js/motor/fondo.js solo en los huecos: nunca debajo de un texto o un sello) */
  .bg-line{fill:none;stroke:var(--sumi);stroke-opacity:.14;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .bg-sakura{fill:none;stroke:var(--shu);stroke-opacity:.2;stroke-width:1.6;}
  .bg-word{fill:var(--sumi);fill-opacity:.13;stroke:none;}
  .tl-wrap{position:relative;}
  .tl-wrap .tl{position:relative;z-index:1;}

  /* La lección actual deja sitio arriba para su cartel «Siguiente» (así no tapa el porcentaje de la anterior) */
  .node-row.has-flag{margin-top:34px;}

  /* ---- Fondo de dibujos dentro de las lecciones (js/motor/fondo-pagina.js) ---- */
  .page-bg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:0;overflow:visible;}
  .wrap{position:relative;z-index:1;}

  /* ---- Dibujos de palabras (js/idiomas/japones-dibujos.js): tinta, un solo detalle de color ---- */
  .ilus{fill:none;stroke:var(--sumi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block;}
  .ilus .a{stroke:var(--shu);} .ilus .b{stroke:var(--ai);} .ilus .c{stroke:var(--matcha);} .ilus .k{stroke:var(--kincha);} .ilus .fc{fill:var(--matcha);stroke:none;}
  .ilus .fa{fill:var(--shu);stroke:none;} .ilus .fb{fill:var(--ai);stroke:none;} .ilus .fs{fill:var(--sumi);stroke:none;}

  /* ---- Lección de palabras · Conoce ---- */
  .conoce-dots{flex:1;display:flex;gap:6px;align-items:center;}
  .conoce-dots span{flex:1;height:6px;border-radius:3px;background:var(--line);opacity:.55;}
  .conoce-dots span.seen{background:var(--shu);opacity:.75;}
  .conoce-dots span.now{background:var(--shu);opacity:1;}
  .conoce-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:18px;padding-bottom:26px;}
  .conoce-card .cat-tag{align-self:center;}
  .conoce-pic{margin:6px 0 14px;padding:14px;border-radius:50%;background:radial-gradient(circle, var(--papel) 62%, color-mix(in srgb, var(--papel) 0%, transparent) 72%);}
  .conoce-w{font-family:'Zen Maru Gothic','Noto Serif JP',sans-serif;font-size:2.5rem;font-weight:500;color:var(--sumi);letter-spacing:.06em;line-height:1.2;}
  .conoce-m{font-family:'Shippori Mincho',serif;font-size:1.25rem;color:var(--ai-deep);margin:6px 0 16px;}
  .conoce-nav{display:flex;gap:10px;justify-content:space-between;margin-top:16px;}
  .conoce-nav .btn{flex:1;padding:13px;font-size:1rem;}
  .conoce-nav .btn:disabled{opacity:.4;cursor:default;}
  .linkish{background:none;border:none;padding:0;cursor:pointer;font:inherit;}
  .say{background:var(--papel);border:1.5px solid var(--line);border-radius:18px;padding:3px 9px;cursor:pointer;font-size:.9rem;line-height:1.2;vertical-align:middle;color:var(--sumi);}@media (hover:hover){
  .say:hover{border-color:var(--ai);}}
  .fb-say{margin-top:10px;}
  .fb-say .say{font-size:1rem;padding:5px 12px;} .fb-say .say span{margin-left:4px;}
  .say-big{padding:8px 16px;font-family:'Zen Maru Gothic',sans-serif;font-size:.95rem;}

  /* ---- Lección de palabras · Practica ---- */
  .q-pic{display:flex;justify-content:center;margin:2px 0 12px;}
  .q-big{font-size:1.5em;font-weight:500;letter-spacing:.04em;}
  .fb-word{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px dashed currentColor;border-top-color:rgba(43,42,40,.18);color:var(--sumi);}
  .fb-pic{flex-shrink:0;background:var(--papel);border-radius:10px;padding:4px;}
  .fb-txt{flex:1;font-size:.95rem;} .fb-txt b{font-size:1.25rem;font-weight:500;margin-right:6px;}
  @media (prefers-reduced-motion:no-preference){ .feedback.ok .fb-pic{animation:fb-pop .35s ease-out 1;} }
  @keyframes fb-pop{from{transform:scale(.6) rotate(-8deg);opacity:0;} to{transform:none;opacity:1;}}
  .results-words{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px auto 18px;max-width:520px;}
  .results-words span{display:flex;flex-direction:column;align-items:center;width:84px;padding:8px 4px;background:var(--papel);border:1px solid var(--line);border-radius:10px;font-family:'Zen Maru Gothic',sans-serif;}
  .results-words b{font-weight:500;font-size:.95rem;margin-top:2px;} .results-words small{font-size:.72rem;color:var(--gris);}
  .step-seal.t-words{background:var(--shu);}

  /* ---- Escuchar ---- */
  .listen-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 16px;}
  .listen-big{width:84px;height:84px;border-radius:50%;border:2.5px solid var(--ai);background:var(--papel);font-size:2.1rem;cursor:pointer;box-shadow:0 4px 0 var(--ai-deep);}
  .listen-big:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ai-deep);}
  .listen-slow{border:1.5px solid var(--line);background:var(--papel);border-radius:18px;padding:6px 12px;font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;color:var(--sumi);cursor:pointer;}
  .listen-text{font-size:1.8rem;letter-spacing:.05em;}
  /* «No puedo escuchar ahora»: discreto, debajo del audio; y el aviso mientras dura */
  .sa-fila{font-family:'Zen Maru Gothic',sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:-6px 0 14px;font-size:.82rem;color:var(--gris);}
  .sa-btn{border:none;background:none;padding:4px 6px;font:inherit;font-family:'Zen Maru Gothic',sans-serif;color:var(--gris);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
  .sa-on{margin:0 0 12px;}
  .sa-on span{border:1px solid var(--line);border-radius:12px;padding:3px 10px;background:var(--papel);}
  .sa-jp{display:block;margin-top:8px;}
  .sa-texto{margin:10px auto 0;font-size:1.15rem;line-height:1.8;text-align:left;max-width:30em;}
  .options.opt-pics{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .options.opt-pics .opt-btn{display:flex;justify-content:center;align-items:center;padding:10px;margin:0;min-height:92px;}
  .step-seal.t-listen{background:var(--ai);}
  .node.is-done.t-listen{background:var(--ai);border-color:var(--ai-deep);box-shadow:0 4px 0 var(--ai-deep);}
  .options.opt-big .opt-btn{font-size:1.6rem;text-align:center;padding:8px;}

  /* ---- Frases con bloques ---- */
  .build-ans{min-height:58px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:8px 2px 10px;margin-bottom:14px;
    border-bottom:2px solid var(--line);background:repeating-linear-gradient(transparent 0 48px, rgba(201,189,156,.5) 48px 49px);}
  .build-ans.is-ok{border-bottom-color:var(--matcha);} .build-ans.is-ko{border-bottom-color:var(--shu);}
  .build-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;}
  .tile{font-family:'Zen Maru Gothic',sans-serif;font-size:1.05rem;padding:8px 13px;border-radius:9px;border:1.5px solid var(--line);background:var(--papel);
    color:var(--sumi);cursor:pointer;box-shadow:0 2px 0 var(--line);line-height:1.3;}
  .tile[lang="ja"]{font-size:1.2rem;}
  .tile.used{visibility:hidden;}
  .tile.on{border-color:var(--ai);box-shadow:0 2px 0 var(--ai);}
  .tile:disabled{cursor:default;}
  .build-go .btn{width:100%;padding:13px;font-size:1rem;}
  .build-go .btn:disabled{opacity:.5;}
  .step-seal.t-build{background:var(--kincha);}
  .build-line{display:flex;align-items:flex-end;gap:6px;margin-bottom:14px;}
  .build-line .build-ans{flex:1;margin-bottom:0;}
  .qmark{font-family:'Zen Maru Gothic',sans-serif;font-size:1.6rem;color:var(--ai-deep);padding-bottom:12px;}

  /* ---- Historias: diálogo tipo chat ---- */
  .st-head{margin:2px 0 14px;}
  .st-head .step-title{margin:6px 0 4px;}
  .st-chat{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
  .st-line{display:flex;gap:10px;align-items:flex-start;}
  .st-av{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:700;color:var(--tinte-shu-3);}
  .st-shu .st-av{background:var(--shu);} .st-ai .st-av{background:var(--ai);} .st-matcha .st-av{background:var(--matcha);}
  .st-bub{flex:1;min-width:0;background:var(--papel);border:1.5px solid var(--line);border-radius:4px 14px 14px 14px;padding:9px 12px 8px;display:flex;flex-direction:column;gap:3px;}
  .st-who{font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;color:var(--gris);}
  .st-jp{font-size:1.3rem;line-height:1.5;color:var(--sumi);overflow-wrap:anywhere;}
  .st-es{display:none;font-family:'Zen Maru Gothic',sans-serif;font-size:.9rem;color:var(--ai-deep);border-top:1px dashed var(--line);padding-top:4px;}
  .st-es.on{display:block;}
  .st-tools{display:flex;gap:6px;justify-content:flex-end;}
  .st-tr{font-family:'Zen Maru Gothic',sans-serif;font-size:.75rem;border:1.5px solid var(--line);background:var(--washi);border-radius:14px;padding:3px 10px;cursor:pointer;color:var(--sumi);}
  .st-q{margin:4px 0 0;}
  .st-q .question{margin-bottom:12px;}
  .step-seal.t-story{background:var(--matcha);}
  @media (prefers-reduced-motion:no-preference){ .st-chat > :last-child{animation:st-in .3s ease-out 1;} }
  @keyframes st-in{from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;}}

  /* Camino recorrido: en la lista, el tramo entre lecciones hechas también se marca */
  .tl-item{position:relative;}
  .tl-item.is-done:has(+ .tl-item.is-done)::before, .tl-item.is-done:has(+ .tl-item.is-current)::before{content:"";position:absolute;left:-1px;top:50%;height:100%;width:3px;margin-left:-.5px;background:var(--shu);opacity:.75;}

  /* Simulacro: el texto de lectura, como en el examen */
  .exam-text{font-size:1.15rem;line-height:1.9;background:var(--papel);border:1px solid var(--line);border-left:4px solid var(--kincha);border-radius:4px;padding:12px 14px;margin:0 0 14px;color:var(--sumi);}

  /* ---- Kana de 5 en 5: ficha, truco y trazo ---- */
  .step-seal.t-kana{background:var(--shu);} .step-seal.t-kanarep{background:var(--ai);}
  .node.is-done.t-kanarep{background:var(--ai);border-color:var(--ai-deep);box-shadow:0 4px 0 var(--ai-deep);}
  .kana-big{font-family:'Zen Maru Gothic',sans-serif;font-size:6.5rem;line-height:1.05;color:var(--sumi);margin-top:6px;}
  .kana-card .conoce-m{margin-bottom:8px;}
  .kana-truco{max-width:34ch;margin:14px auto 4px;font-size:.98rem;line-height:1.5;color:var(--sumi);}
  .q-kana{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:3.6rem;line-height:1.15;margin-top:8px;text-align:center;}
  .kana-trazo{display:flex;justify-content:center;margin:14px 0 6px;}
  .kana-trazo[hidden], .trazo-acts[hidden]{display:none;}
  .trazo-pad{position:relative;width:220px;height:220px;background:var(--papel);border:1.5px solid var(--line);border-radius:14px;touch-action:none;}
  .trazo-pad canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;}
  .trazo-tinta{touch-action:none;cursor:crosshair;}
  .trazo-acts{display:flex;justify-content:center;gap:10px;margin:8px 0 4px;}
  .trazo-fb{min-height:1.4em;margin:6px 0 0;font-size:.92rem;color:var(--gris-osc);}
  .results-kana{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px auto 18px;font-family:'Zen Maru Gothic',sans-serif;}
  .results-kana span{display:flex;flex-direction:column;align-items:center;width:58px;padding:6px 0;background:var(--papel);border:1px solid var(--line);border-radius:10px;font-size:1.7rem;}
  .results-kana small{font-size:.75rem;color:var(--gris);}
  .trazo-fb.ok{color:var(--matcha);font-size:1rem;} .trazo-fb.ok b{color:var(--matcha);}
  .trazo-fb.ko{color:var(--shu);}
  @media (prefers-reduced-motion:no-preference){ .trazo-fb.ok{animation:fb-pop .3s ease-out 1;} }
  @media (max-width:600px){ .kana-card .kana-big{font-size:5rem;} .kana-card .kana-truco{margin-top:8px;} .kana-card .kana-trazo{margin-top:8px;} }

  /* ---- Portada en pestañas: Camino · Leer · Repasar ---- */
  .tabbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;
    display:flex;gap:4px;padding:5px;background:color-mix(in srgb, var(--papel) 96%, transparent);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 6px 22px rgba(43,42,40,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
  .tabbar[hidden]{display:none;}
  .tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:88px;padding:6px 14px 5px;border:0;border-radius:13px;
    background:transparent;color:var(--gris-osc);font-family:'Zen Maru Gothic',sans-serif;cursor:pointer;}
  .tab-kj{font-family:'Shippori Mincho',serif;font-size:1.35rem;line-height:1.1;}
  .tab-name{font-size:.74rem;line-height:1.15;text-align:center;}
  .tab.on{background:var(--ai);color:var(--washi);}
  .tab.on .tab-kj{color:var(--tinte-kincha-2);}
  @media (hover:hover){ .tab:not(.on):hover{background:color-mix(in srgb, var(--ai) 8%, transparent);} }
  .tab:focus-visible{outline:2px solid var(--shu);outline-offset:2px;}
  .tab-badge{position:absolute;top:2px;right:12px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--shu);color:var(--papel);
    font-size:.66rem;line-height:18px;text-align:center;}
  body.con-tabs .wrap{padding-bottom:110px;}
  @media (max-width:600px){
    .tabbar{left:0;right:0;bottom:0;transform:none;border-radius:0;border-width:1px 0 0;padding:4px 6px calc(4px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -2px 14px rgba(43,42,40,.08);}
    .tab{flex:1;min-width:0;padding-left:2px;padding-right:2px;}
    .tab-name{font-size:.68rem;letter-spacing:-.01em;}
    .tab[data-tab="ver"]{flex:1.35;}
  }
  @media (max-width:360px){
    .tab-name{font-size:.6rem;}
  }
  .tab-h{font-family:'Shippori Mincho',serif;font-size:1.7rem;color:var(--ai-deep);margin:4px 0 4px;}
  .tab-sub{font-family:'Shippori Mincho',serif;font-size:1.2rem;color:var(--ai-deep);margin:30px 0 4px;}
  .tab-intro{margin:0 0 14px;}
  .tab-foot{text-align:center;margin-top:28px;}

  /* Camino: una línea de estado en vez de tres casillas, y ajustes plegados */
  .today-line{font-family:'Zen Maru Gothic',sans-serif;font-size:.86rem;color:var(--gris-osc);text-align:center;margin:10px 0 0;}
  /* La semana de sellos y tu avance, juntos en una tarjeta tranquila al lado (o debajo) de «Continuar» */
  .today-lado{margin-top:12px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px 16px;
    background:var(--papel);border:1px solid var(--line);border-radius:14px;}
  .today-lado .semana{margin:0;padding:0;border:0;background:transparent;box-shadow:none;}
  .today-lado .today-line{display:flex;align-items:center;gap:12px;margin:0;text-align:left;font-variant-numeric:tabular-nums;}
  .today-lado .today-line span:first-child{white-space:nowrap;}
  .tl-barra{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;}
  .tl-barra i{display:block;height:100%;background:var(--matcha);border-radius:3px;}
  .today-lado .semana{min-width:0;}
  .today-lado .sem-txt{min-width:0;}
  @media (max-width:480px){
    .today-lado{padding:12px 12px;}
    .today-lado .sem-dias{gap:3px;}
    .today-lado .sem-d, .today-lado .sem-d svg{width:28px;height:28px;}
    .today-lado .sem-txt{white-space:normal;text-align:right;font-size:.76rem;line-height:1.25;}
  }
  .today-line .linkish{font-size:inherit;color:var(--shu);font-weight:500;}
  .path-bar{align-items:center;gap:10px;position:relative;}
  .ajustes{position:relative;}
  .ajustes > summary{list-style:none;cursor:pointer;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--papel);
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--gris-osc);}
  .ajustes > summary::-webkit-details-marker{display:none;}
  .ajustes[open] > summary{background:var(--washi-deep);}
  .ajustes-menu{position:absolute;right:0;top:44px;z-index:5;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--papel);
    border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px rgba(43,42,40,.12);white-space:nowrap;}

  /* Unidades plegables: solo la actual abierta */
  .unit-head{cursor:pointer;}
  .unit-head:focus-within:has(.unit-toggle:focus-visible){outline:3px solid var(--kincha);outline-offset:2px;}
  .unit-toggle{all:unset;cursor:pointer;display:inline;font:inherit;color:inherit;}
  .unit-toggle:focus-visible{outline:none;}   /* el contorno lo lleva toda la cabecera */
  .unit-chev{position:absolute;right:14px;bottom:10px;font-size:.8rem;opacity:.8;}
  .unit.is-closed{margin-top:10px;}
  .unit.is-closed .unit-head{padding:12px 16px 12px;align-items:center;}
  .unit.is-closed .unit-txt p{display:none;}
  .unit.is-closed .unit-kj{font-size:1.9rem;}
  .unit.is-closed .unit-txt :is(h2,h3){font-size:1.12rem;}
  .unit.is-complete .unit-head{opacity:.82;}

  /* Leer */
  .read-list{display:flex;flex-direction:column;gap:10px;}
  .read-card{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:14px 16px;background:var(--papel);border:1px solid var(--line);
    border-radius:12px;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);box-shadow:0 3px 0 var(--washi-deep);}
  @media (hover:hover){ .read-card:hover{border-color:var(--matcha);} }
  .read-kj{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--matcha);color:var(--tinte-matcha);display:flex;align-items:center;justify-content:center;
    font-family:'Shippori Mincho',serif;font-size:1.3rem;}
  .read-card.is-done .read-kj{background:var(--papel);color:var(--matcha);border:2px solid var(--matcha);}
  .read-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .read-txt b{font-family:'Shippori Mincho',serif;font-size:1.1rem;font-weight:700;color:var(--ai-deep);}
  .read-txt span{font-size:.88rem;line-height:1.45;}
  .read-txt small{font-size:.74rem;color:var(--gris);}
  .read-list.later .read-card{opacity:.62;}

  /* Repasar */
  .review-card{min-height:0;align-items:center;text-align:center;padding:22px 18px 18px;}
  .rv-big{display:flex;flex-direction:column;align-items:center;margin-bottom:8px;font-family:'Zen Maru Gothic',sans-serif;}
  .rv-big b{font-family:'Shippori Mincho',serif;font-size:3rem;line-height:1;color:var(--matcha);}
  .rv-big span{font-size:.9rem;color:var(--gris-osc);}
  .review-card .btn{min-width:220px;}
  .rv-stats{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;color:var(--gris);}
  .rv-stats b{color:var(--ai-deep);font-size:.95rem;}
  .voz-help{white-space:normal;width:min(300px,78vw);font-family:'Zen Maru Gothic',sans-serif;font-size:.84rem;color:var(--sumi);}
  .voz-help summary{display:block;cursor:pointer;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;text-align:center;font-size:.92rem;list-style:none;}
  .voz-help summary::-webkit-details-marker{display:none;}
  .voz-help p{margin:10px 2px 6px;line-height:1.45;} .voz-help ul{margin:0;padding-left:18px;line-height:1.45;} .voz-help li{margin-bottom:6px;}
  .listen-slow span{font-weight:500;}
  /* Iconos de audio (palabras.js: ICONO): fūrin para escuchar y caracol 円相 para «Más despacio». Tinta en currentColor, detalle en bermellón */
  .ic-audio{width:1.35em;height:1.35em;vertical-align:-.32em;flex:0 0 auto;overflow:visible;}
  .ic-audio .ic-t{fill:none;stroke:currentColor;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;}
  .ic-audio .ic-fino{stroke-width:2.8;} .ic-audio .ic-enso{stroke-width:5.2;}
  .ic-audio .ic-t.ic-d{stroke:var(--shu);} .ic-audio .ic-df{fill:var(--shu);} .ic-audio .ic-f{fill:currentColor;}
  .listen-big{color:var(--ai-deep);display:inline-flex;align-items:center;justify-content:center;}
  .listen-big .ic-audio{width:46px;height:46px;vertical-align:0;}
  .listen-slow, .say{display:inline-flex;align-items:center;gap:5px;}
  .listen-slow .ic-audio{width:1.55em;height:1.55em;}
  .say-slow .ic-audio{width:1.5em;height:1.5em;}

  /* ===== Camino como plano de metro (路線図) ===== */
  /* Cabecera de unidad = cartel de la línea, en su color */
  .unit-head{background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.14)), var(--lc, var(--ai));}
  .unit-kj{width:48px;height:48px;border-radius:50%;background:var(--papel);color:var(--lc, var(--ai));display:flex;align-items:center;justify-content:center;
    font-size:1.65rem;border:3px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 2px var(--lc, var(--ai));}
  .unit.is-closed .unit-kj{width:42px;height:42px;font-size:1.45rem;}
  .unit-prog div{background:var(--papel);opacity:.85;}

  /* Plano general: todas las líneas */
  .rosen-wrap{margin:4px -16px 14px;padding:0 16px;}
  .rosen{display:flex;align-items:flex-start;overflow-x:auto;scrollbar-width:none;padding:8px 6px 6px;scroll-snap-type:x proximity;}
  .rosen::-webkit-scrollbar{display:none;}
  .ro{flex:0 0 auto;width:66px;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;padding:0;position:relative;scroll-snap-align:center;font-family:'Zen Maru Gothic',sans-serif;}
  .ro-sym{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-weight:700;font-size:1.15rem;
    background:var(--papel);color:var(--lc);border:3px solid var(--lc);opacity:.55;
    background-image:conic-gradient(color-mix(in srgb, var(--lc) 22%, transparent) calc(var(--pct)*1%), transparent 0);}
  .ro.is-started .ro-sym, .ro.is-current .ro-sym{opacity:1;}
  .ro.is-done .ro-sym{opacity:1;background:var(--lc);color:var(--papel);}
  .ro.is-current .ro-sym{box-shadow:0 0 0 4px var(--papel), 0 0 0 6px var(--shu);}
  .ro-name{font-size:.62rem;line-height:1.2;color:var(--gris-osc);text-align:center;max-width:64px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .ro.is-current .ro-name{color:var(--sumi);font-weight:700;}
  .ro-here{position:absolute;top:-6px;right:2px;background:var(--shu);color:var(--papel);font-size:.56rem;padding:1px 4px;border-radius:4px;letter-spacing:.05em;}
  .ro-link{flex:0 0 14px;height:3px;margin-top:27px;background:var(--line);border-radius:2px;}
  .ro:focus-visible{outline:2px solid var(--kincha);outline-offset:2px;border-radius:8px;}

  /* Estaciones */
  .metro{list-style:none;margin:6px 0 0;padding:6px 0 2px;}
  .st{position:relative;}
  .st button{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:8px 10px 8px 0;border:0;background:none;text-align:left;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);border-radius:12px;}
  @media (hover:hover){ .st button:hover{background:color-mix(in srgb, var(--papel) 70%, transparent);} }
  .st button:focus-visible{outline:3px solid var(--kincha);outline-offset:2px;}
  /* la vía: mitad de arriba y mitad de abajo de cada estación; recorrida = color pleno */
  .st::before, .st::after{content:"";position:absolute;left:29px;width:8px;background:color-mix(in srgb, var(--lc) 28%, var(--papel));z-index:0;}
  .st::before{top:0;height:50%;} .st::after{top:50%;bottom:0;}
  .st.first::before, .st.last::after{display:none;}
  .st.prev-done::before, .st.is-done::after{background:var(--lc);}
  .st-dot{position:relative;z-index:1;flex:0 0 auto;margin-left:15px;width:36px;height:36px;border-radius:50%;background:var(--papel);border:4px solid var(--lc);
    display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-weight:700;font-size:.95rem;color:color-mix(in srgb, var(--lc) 70%, var(--sumi));}
  .st.t-review .st-dot, .st.t-kanarep .st-dot{border-style:double;border-width:6px;}
  .st.is-done .st-dot{background:var(--lc);color:var(--papel);font-family:'Zen Maru Gothic',sans-serif;}
  .st.is-current .st-dot{width:44px;height:44px;margin-left:11px;font-size:1.1rem;box-shadow:0 0 0 4px var(--papel), 0 0 0 7px var(--shu);}
  @media (prefers-reduced-motion:no-preference){ .st.is-current .st-dot{animation:st-pulse 2.4s ease-in-out infinite;} }
  @keyframes st-pulse{0%,100%{box-shadow:0 0 0 4px var(--papel), 0 0 0 7px var(--shu);} 50%{box-shadow:0 0 0 4px var(--papel), 0 0 0 11px color-mix(in srgb, var(--shu) 25%, transparent);}}
  .st-body{display:flex;flex-direction:column;min-width:0;flex:1;}
  .st-num{align-self:flex-start;font-size:.64rem;font-weight:700;letter-spacing:.04em;color:var(--lc);border:1.5px solid var(--lc);border-radius:5px;padding:0 5px;line-height:1.5;background:var(--papel);margin-bottom:2px;}
  .st-body b{font-weight:500;font-size:.95rem;line-height:1.3;}
  .st-body small{font-size:.72rem;color:var(--gris);}
  .st.is-current .st-body b{font-weight:700;}
  .st-here{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;background:var(--shu);color:var(--papel);border-radius:8px;padding:4px 8px;font-size:.66rem;line-height:1.2;box-shadow:0 2px 0 var(--shu-deep);}
  .st-here b{font-family:'Shippori Mincho',serif;font-size:.9rem;letter-spacing:.08em;}
  .metro-transfer{margin:6px 0 4px 8px;font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .metro-transfer > span{background:var(--papel);border:1px solid var(--line);border-radius:5px;padding:0 5px;color:var(--sumi);}
  .metro-transfer b{display:inline-flex;align-items:center;gap:5px;color:var(--sumi);font-weight:500;}
  .metro-transfer b i{font-style:normal;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--lc);color:var(--lc);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:var(--papel);}

  /* ===== Libro de sellos (御朱印帳) ===== */
  .semana{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:12px 0 0;padding:8px 12px;background:var(--papel);border:1px solid var(--line);
    border-radius:14px;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);text-align:left;box-shadow:0 2px 0 var(--washi-deep);}
  @media (hover:hover){ .semana:hover{border-color:var(--shu);} }
  .semana:focus-visible{outline:3px solid var(--kincha);outline-offset:2px;}
  .sem-dias{display:flex;gap:4px;}
  .sem-d{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line-cl);font-size:.68rem;color:var(--gris-cl);}
  .sem-d i{font-style:normal;}
  .sem-d.si{border:0;}
  .sem-d.hoy:not(.si){border-color:var(--shu);color:var(--shu);border-style:solid;}
  .sem-d.fut{opacity:.5;}
  .sem-txt{display:flex;flex-direction:column;align-items:flex-end;font-size:.8rem;font-weight:500;white-space:nowrap;}
  .sem-txt small{font-size:.7rem;color:var(--shu);font-weight:400;}
  @media (max-width:380px){ .sem-d{width:26px;height:26px;} .sem-d svg{width:26px;height:26px;} }

  .sl-over{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb, var(--washi) 88%, transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
  .sl-card{width:min(360px,100%);background:var(--papel);border:1px solid var(--line);border-radius:18px;padding:22px 20px 18px;text-align:center;box-shadow:0 18px 50px rgba(43,42,40,.18);font-family:'Zen Maru Gothic',sans-serif;}
  .sl-stamp{display:flex;justify-content:center;margin:4px 0 6px;}
  .sl-k{margin:0;font-family:'Shippori Mincho',serif;color:var(--shu);letter-spacing:.2em;font-size:.95rem;}
  .sl-card h3{font-family:'Shippori Mincho',serif;font-size:1.45rem;margin:2px 0 6px;color:var(--ai-deep);}
  .sl-card p{margin:0 0 14px;font-size:.92rem;line-height:1.5;}
  .sl-acts{display:flex;gap:10px;justify-content:center;}
  @media (prefers-reduced-motion:no-preference){
    .sl-stamp svg{animation:hanko .55s cubic-bezier(.3,1.4,.5,1) .15s both;}
    @keyframes hanko{0%{transform:scale(1.9) rotate(-10deg);opacity:0;} 60%{transform:scale(.94) rotate(2deg);opacity:1;} 78%{transform:scale(1.03);} 100%{transform:none;opacity:1;}}
    .sl-goshuin svg{animation-duration:.7s;}
  }

  .libro{padding-bottom:40px;}
  .lb-k{margin:6px 0 0;font-family:'Shippori Mincho',serif;color:var(--shu);letter-spacing:.25em;}
  .lb-stats{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 14px;font-family:'Zen Maru Gothic',sans-serif;font-size:.84rem;color:var(--gris-osc);}
  .lb-stats b{font-family:'Shippori Mincho',serif;font-size:1.2rem;color:var(--ai-deep);}
  .lb-cal{min-height:0;padding:14px 12px 16px;}
  .lb-mes{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:'Shippori Mincho',serif;font-size:1.1rem;text-transform:capitalize;}
  .lb-mes .btn{padding:4px 14px;min-width:0;}
  .lb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .lb-h{text-align:center;font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;color:var(--gris);padding-bottom:2px;}
  .lb-c{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;}
  .lb-c i{font-style:normal;font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;color:var(--gris-cl-2);}
  .lb-c.hoy{box-shadow:inset 0 0 0 1.5px var(--shu);}
  .lb-c svg{width:100%;height:100%;max-width:52px;max-height:52px;}
  .tab-sub small{font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris);font-weight:400;margin-left:6px;}
  .lb-goshuin{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px;margin-top:10px;}
  .lb-goshuin figure{margin:0;text-align:center;}
  .lb-rachas{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;margin:10px 0 18px;}
  .lb-rachas figure{margin:0;text-align:center;}
  .lb-rachas svg{width:100%;max-width:80px;height:auto;}
  .lb-rachas figcaption{font-family:'Zen Maru Gothic',sans-serif;font-size:.7rem;color:var(--gris-osc);line-height:1.3;}
  .lb-rachas figcaption small{display:block;font-size:.64rem;color:var(--gris);}
  .lb-goshuin svg{width:100%;height:auto;filter:drop-shadow(0 2px 0 var(--washi-deep));}
  .lb-goshuin figcaption{font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;color:var(--gris-osc);margin-top:4px;line-height:1.3;}
  .lb-cal{max-width:460px;margin-left:auto;margin-right:auto;}

  /* ===== Omikuji (御神籤) y estantería (本棚) · js/motor/omikuji.js ===== */
  :root{--omk-madera:var(--kincha-osc-3);--omk-madera-cl:var(--kincha-osc);--omk-tela-sellos:var(--ai-deep);--omk-tela-omikuji:var(--shu-osc-2);}
  .omk{margin:4px auto 18px;max-width:480px;text-align:left;display:flex;flex-direction:column;gap:12px;}
  .omk-fila{display:flex;align-items:center;gap:18px;background:var(--papel);border:1px solid var(--line);border-radius:14px;padding:26px 16px 14px;}
  .omk-caja{position:relative;z-index:0;isolation:isolate;flex:0 0 auto;width:96px;height:132px;transform-origin:50% 90%;}   /* la caja manda: más grande que el texto */
  .omk-caja-svg{width:100%;height:100%;display:block;}
  .omk-madera{fill:var(--omk-madera-cl);stroke:var(--omk-madera);stroke-width:2;stroke-linejoin:round;}
  .omk-canto{fill:none;stroke:var(--omk-madera);stroke-width:1.4;opacity:.7;}
  .omk-agujero{fill:var(--sumi);}
  .omk-cartel{fill:var(--papel);stroke:var(--shu);stroke-width:1;}
  .omk-cartel-t{font-family:'Shippori Mincho',serif;font-weight:700;font-size:11px;fill:var(--shu);text-anchor:middle;}
  .omk-palito{position:absolute;left:50%;top:-10px;width:18px;height:72px;margin-left:-9px;border-radius:2px;background:var(--papel);border:1px solid var(--omk-madera);
    display:flex;align-items:flex-start;justify-content:center;opacity:0;transform:translateY(42px);pointer-events:none;z-index:-1;}
  .omk-palito b{display:block;width:1em;word-break:break-all;text-align:center;font-family:'Shippori Mincho',serif;font-size:12px;color:var(--shu);line-height:1.05;margin-top:4px;}   /* un carácter por línea: en vertical en todos los navegadores */
  .omk-palito.sale{opacity:1;transform:translateY(-40px);}
  @media (max-width:480px){   /* móvil: algo menos, para que el texto no quede en una columna estrecha */
    .omk-fila{gap:14px;padding:24px 12px 12px;}
    .omk-caja{width:80px;height:110px;}
    .omk-palito{width:15px;height:60px;margin-left:-7.5px;transform:translateY(35px);} .omk-palito b{font-size:10px;}
    .omk-palito.sale{transform:translateY(-34px);}
  }
  .omk-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;font-family:'Zen Maru Gothic',sans-serif;}
  .omk-txt b{font-family:'Shippori Mincho',serif;font-size:1rem;color:var(--ai-deep);}
  .omk-txt > span{font-size:.78rem;color:var(--gris-osc);line-height:1.35;}
  .omk-boton{align-self:flex-start;margin-top:6px;padding:8px 14px;font-size:.88rem;}
  .omk-mini{flex:0 0 auto;width:48px;height:64px;border-radius:3px 6px 6px 3px;background:var(--omk-tela-omikuji);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    box-shadow:inset 4px 0 0 color-mix(in srgb, var(--sumi) 25%, transparent);}
  .omk-mini b{display:flex;flex-direction:column;align-items:center;font-family:'Shippori Mincho',serif;font-size:.6rem;line-height:1.05;color:var(--sumi);background:var(--papel);padding:3px 2px;border-radius:1px;}
  .omk-mini b i, .est-titulo i, .est-pagina span i{display:block;font-style:normal;}
  .omk-mini-n{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;color:var(--gris-osc);white-space:nowrap;}
  .omk-papel{display:flex;justify-content:center;}
  /* Cerrada: solo la caja con su nombre encima, sin tarjeta ni texto (omikuji.js · ofrecer). Al tocarla, se abre. */
  .omk.cerrada .omk-fila{flex-direction:column;gap:10px;background:none;border-color:transparent;padding:6px 16px 12px;cursor:pointer;width:max-content;margin:0 auto;border-radius:14px;}
  .omk.cerrada .omk-mini{display:none;}
  .omk.cerrada .omk-caja{transition:transform var(--dur-corta, .18s) ease;}
  @media (hover:hover){ .omk.cerrada .omk-fila:hover .omk-caja{transform:translateY(-3px) rotate(-2deg);} }
  .omk.cerrada .omk-fila:focus-visible{outline:2px solid var(--ai);outline-offset:3px;}
  .omk .omk-nombre{font-family:'Shippori Mincho',serif;font-size:1.3rem;color:var(--ai-deep);text-align:center;}
  .omk:not(.cerrada) .omk-nombre{text-align:left;font-size:1.15rem;}
  @media (prefers-reduced-motion:no-preference){ .omk.cerrada .omk-caja{animation:omk-llama 2.8s ease-in-out 1.2s infinite;} }
  @keyframes omk-llama{0%,82%,100%{transform:none;} 86%{transform:rotate(-4deg);} 90%{transform:rotate(4deg);} 94%{transform:rotate(-2deg);}}
  .omk-txt[hidden]{display:none;}
  .omk-txt{overflow:hidden;gap:6px;}
  .omk-txt .omk-regla b{font-family:inherit;font-size:inherit;color:var(--sumi);}
  .omk-regla{border-left:3px solid var(--shu);padding-left:8px;}
  .omk-regla b{color:var(--sumi);}
  /* Progreso de cada proverbio: N/10 con su barrita; completo, con el sello 満 */
  .omk-prog{display:inline-flex;align-items:center;gap:5px;font-family:'Zen Maru Gothic',sans-serif;font-size:.68rem;color:var(--gris-osc);margin-top:4px;}
  .omk-hoja .omk-prog{font-size:.78rem;margin-top:8px;justify-content:center;width:100%;}
  .omk-barra{display:inline-block;width:44px;height:5px;border-radius:3px;background:color-mix(in srgb, var(--line) 70%, transparent);overflow:hidden;}
  .omk-hoja .omk-barra{width:90px;}
  .omk-barra i{display:block;height:100%;background:var(--shu);border-radius:3px;}
  .omk-prog.hecho{color:var(--shu);font-weight:700;}
  .omk-sello{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--shu);border-radius:3px;font-family:'Shippori Mincho',serif;font-size:.7rem;line-height:1;transform:rotate(-6deg);}
  .omk-ranura button{position:relative;}
  .omk-r-sello{position:absolute;top:6px;right:5px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:2px solid var(--shu);border-radius:4px;
    color:var(--shu);font-family:'Shippori Mincho',serif;font-weight:700;font-size:.85rem;transform:rotate(-10deg);background:color-mix(in srgb, var(--shu) 8%, transparent);}
  .omk-ranura.hecho button{background:color-mix(in srgb, var(--shu) 6%, var(--papel));}
  /* El especial (13.º): marco dorado y algo de brillo; mientras falta, un hueco dorado con «？» */
  .omk-ranura.esp button{border-top-color:var(--rc-oro, var(--kincha));border-bottom-color:var(--rc-oro, var(--kincha));box-shadow:0 0 0 2px color-mix(in srgb, var(--rc-oro, var(--kincha)) 40%, transparent), 0 0 14px color-mix(in srgb, var(--rc-oro, var(--kincha)) 30%, transparent);}
  .omk-ranura.vacia.esp{border-color:var(--rc-oro, var(--kincha));color:var(--rc-oro, var(--kincha));}
  .omk-ranura.vacia.esp b{color:var(--rc-oro, var(--kincha));}
  .omk-ranura.vacia small{font-size:.62rem;text-align:center;padding:0 4px;}
  .omk-papel.esp .omk-hoja{border-top-color:var(--rc-oro, var(--kincha));border-bottom-color:var(--rc-oro, var(--kincha));box-shadow:0 0 0 3px color-mix(in srgb, var(--rc-oro, var(--kincha)) 35%, transparent), 0 0 30px color-mix(in srgb, var(--rc-oro, var(--kincha)) 35%, transparent);}
  .omk-esp{font-family:'Shippori Mincho',serif;font-weight:700;color:var(--rc-oro, var(--kincha));letter-spacing:.1em;margin:6px 0 0 !important;}
  .omk-hoja{width:min(300px, 100%);background:var(--papel);border:1px solid var(--line);border-top:6px solid var(--shu);border-bottom:6px solid var(--shu);
    padding:12px 16px 14px;text-align:center;font-family:'Zen Maru Gothic',sans-serif;box-shadow:0 8px 24px color-mix(in srgb, var(--sumi) 14%, transparent);}
  .omk-papel.dai .omk-hoja{border-top-color:var(--kincha);border-bottom-color:var(--kincha);box-shadow:0 0 0 3px color-mix(in srgb, var(--kincha) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--sumi) 14%, transparent);}
  .omk-hoja p{margin:0;}
  .omk-num{font-family:'Shippori Mincho',serif;font-size:.8rem;color:var(--gris);letter-spacing:.2em;}
  .omk-suerte{font-family:'Shippori Mincho',serif;font-weight:700;font-size:3rem;line-height:1.1;color:var(--shu);margin-top:2px !important;}
  .omk-papel.dai .omk-suerte{color:var(--kincha-osc);}
  .omk-suerte-es{font-size:.8rem;color:var(--gris-osc);margin-bottom:10px !important;}
  .omk-frase{font-family:'Shippori Mincho',serif;font-weight:700;font-size:1.35rem;color:var(--sumi);border-top:1px dashed var(--line);padding-top:10px;}
  .omk-kana{font-size:.85rem;color:var(--gris-osc);}
  .omk-rom{font-size:.8rem;color:var(--gris);font-style:italic;}
  .omk-es{font-size:.95rem;color:var(--sumi);margin-top:6px !important;}
  .omk-col{font-size:.8rem;color:var(--gris-osc);margin-top:10px !important;border-top:1px dashed var(--line);padding-top:8px;}
  .omk-col b{color:var(--matcha-osc);}
  .omk-vuela{position:fixed;z-index:65;width:44px;height:58px;display:flex;align-items:center;justify-content:center;background:var(--papel);border:1px solid var(--line);border-top:4px solid var(--shu);
    font-family:'Shippori Mincho',serif;font-weight:700;color:var(--shu);font-size:.9rem;pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.6,1), opacity .7s ease;}
  /* el álbum de la colección */
  .omk-album{list-style:none;margin:12px 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));gap:10px;}
  .omk-ranura{aspect-ratio:3/4.4;}
  .omk-ranura button{width:100%;height:100%;}
  .omk-ranura button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--papel);border:1px solid var(--line);border-top:4px solid var(--shu);border-bottom:4px solid var(--shu);
    border-radius:2px;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);padding:6px 4px;box-shadow:0 2px 0 var(--washi-deep);transition:transform .15s ease;}
  .omk-ranura button:focus-visible{outline:2px solid var(--ai);outline-offset:2px;}
  @media (hover:hover){ .omk-ranura button:hover{transform:translateY(-2px) rotate(-1deg);} }
  .omk-ranura b{font-family:'Shippori Mincho',serif;font-size:1.5rem;color:var(--shu);line-height:1.1;}
  .omk-ranura.dai button{border-top-color:var(--kincha);border-bottom-color:var(--kincha);box-shadow:0 0 0 2px color-mix(in srgb, var(--kincha) 30%, transparent);}
  .omk-ranura.dai b{color:var(--kincha-osc);}
  .omk-r-num{font-family:'Shippori Mincho',serif;font-size:.62rem;color:var(--gris);}
  .omk-r-frase{font-family:'Shippori Mincho',serif;font-size:.7rem;line-height:1.25;color:var(--gris-osc);text-align:center;}
  .omk-ranura small{font-size:.65rem;color:var(--gris);}
  .omk-ranura.vacia{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--line);border-radius:4px;color:var(--gris-cl);}
  .omk-ranura.vacia b{font-family:'Shippori Mincho',serif;font-size:1.6rem;color:var(--gris-cl);}
  .omk-detalle{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px;}

  /* la estantería */
  .est-mueble{margin:18px auto 10px;max-width:420px;}
  .est-balda{display:flex;justify-content:center;align-items:flex-end;gap:26px;padding:0 20px;min-height:200px;}
  .est-tabla{height:16px;border-radius:3px;background:linear-gradient(var(--omk-madera-cl), var(--omk-madera));box-shadow:0 6px 12px color-mix(in srgb, var(--sumi) 18%, transparent);}
  .est-libro{width:118px;height:168px;padding:0;border:none;background:none;cursor:pointer;transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,1.4,.5,1);}
  .est-libro:focus-visible{outline:2px solid var(--ai);outline-offset:4px;}
  @media (hover:hover){ .est-libro:hover{transform:translateY(-8px) rotate(-1.5deg);} }
  .est-libro:active{transform:translateY(-4px) scale(.98);}
  .est-tapa, .est-cara{position:relative;display:flex;justify-content:center;width:100%;height:100%;border-radius:3px 7px 7px 3px;
    box-shadow:inset 7px 0 0 color-mix(in srgb, var(--sumi) 28%, transparent), 0 4px 8px color-mix(in srgb, var(--sumi) 22%, transparent);}
  .est-sellos .est-tapa, .est-sellos .est-cara{background:var(--omk-tela-sellos);
    background-image:radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--papel) 14%, transparent) 2px, transparent 2.5px), radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--papel) 10%, transparent) 2px, transparent 2.5px);
    background-size:16px 16px;}
  .est-omikuji .est-tapa, .est-omikuji .est-cara{background:var(--omk-tela-omikuji);
    background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--kincha) 22%, transparent) 0 2px, transparent 2px 12px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--kincha) 22%, transparent) 0 2px, transparent 2px 12px);}
  .est-titulo{margin-top:14%;align-self:flex-start;display:flex;flex-direction:column;align-items:center;line-height:1.15;background:var(--papel);color:var(--sumi);font-family:'Shippori Mincho',serif;font-weight:700;
    font-size:1.05rem;padding:10px 6px;border:1px solid var(--line);border-radius:1px;box-shadow:0 1px 0 color-mix(in srgb, var(--sumi) 20%, transparent);}
  .est-pies{display:flex;justify-content:center;gap:26px;margin-top:8px;}
  .est-pies span{width:118px;text-align:center;font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris-osc);line-height:1.35;display:flex;flex-direction:column;}
  .est-pies b{color:var(--ai-deep);font-size:.85rem;}
  /* el libro que se abre */
  .est-abre{position:fixed;inset:0;z-index:70;perspective:1400px;background:color-mix(in srgb, var(--washi) 80%, transparent);pointer-events:none;}
  .est-libro3d{position:absolute;left:0;top:0;transform-style:preserve-3d;}
  .est-pagina{position:absolute;inset:0;background:var(--papel);border-radius:3px 8px 8px 3px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    box-shadow:0 18px 40px color-mix(in srgb, var(--sumi) 25%, transparent);}
  .est-pagina span{font-family:'Shippori Mincho',serif;font-weight:700;color:var(--shu);font-size:1.3rem;display:flex;flex-direction:column;align-items:center;line-height:1.2;margin-bottom:8px;}
  .est-pagina > i{display:block;width:60%;height:2px;background:var(--line);border-radius:1px;}
  .est-cubierta{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;}
  .est-cara, .est-dorso{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
  .est-dorso{transform:rotateY(180deg);background:var(--washi-deep);border-radius:8px 3px 3px 8px;border:1px solid var(--line);}

  @media (prefers-reduced-motion:no-preference){
    .omk-caja.agita{animation:omk-agita .5s ease-in-out 2;}
    .omk-palito{transition:opacity .25s ease, transform .55s cubic-bezier(.3,1.3,.5,1);}
    .omk-papel.abre .omk-hoja{animation:omk-desenrolla .65s cubic-bezier(.3,.9,.3,1) both;}
    .omk-papel.abre .omk-hoja > *{animation:omk-tinta .5s ease-out both;}
    .omk-papel.abre .omk-suerte{animation:omk-sello .5s cubic-bezier(.3,1.5,.5,1) .35s both;}
    .omk-papel.abre .omk-frase{animation-delay:.55s;} .omk-papel.abre .omk-kana, .omk-papel.abre .omk-rom{animation-delay:.65s;} .omk-papel.abre .omk-es{animation-delay:.75s;} .omk-papel.abre .omk-col{animation-delay:.95s;}
    .omk-mini.pop{animation:omk-pop .45s cubic-bezier(.3,1.6,.5,1);}
    .omk-album .omk-ranura{animation:omk-tinta .4s ease-out both;}
  }
  @keyframes omk-agita{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg) translateY(-2px)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg) translateY(-1px)}80%{transform:rotate(6deg)}}
  @keyframes omk-desenrolla{0%{transform:scaleY(.04);opacity:.4}60%{opacity:1}100%{transform:scaleY(1)}}
  @keyframes omk-tinta{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
  @keyframes omk-sello{0%{opacity:0;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}
  @keyframes omk-pop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1)}}
  .path-bar{justify-content:space-between;}
  .path-bar-t{font-family:'Shippori Mincho',serif;font-size:1.05rem;color:var(--ai-deep);font-weight:700;}
  .kana-intro{text-align:left;align-items:stretch;}
  .kana-intro .kana-big{text-align:center;font-size:4.5rem;}
  .kana-intro-h{font-family:'Shippori Mincho',serif;font-size:1.5rem;color:var(--ai-deep);text-align:center;margin:0 0 10px;}
  .kana-intro p{font-family:'Zen Maru Gothic',sans-serif;font-size:.98rem;line-height:1.6;margin:0 0 10px;max-width:46ch;align-self:center;}
  .kana-comp .comp-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0 4px;}
  .comp-k{display:flex;flex-direction:column;align-items:center;gap:3px;width:118px;padding:10px 6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--papel);font-family:'Zen Maru Gothic',sans-serif;}
  .comp-big{font-family:'Zen Maru Gothic',sans-serif;font-size:3.4rem;line-height:1.1;color:var(--sumi);}
  .comp-k b{font-family:'Shippori Mincho',serif;font-size:1.1rem;color:var(--ai-deep);}
  .comp-k small{font-size:.74rem;line-height:1.35;color:var(--gris-osc);text-align:center;}
  @media (max-width:420px){ .comp-k{width:calc(50% - 8px);} }
  .lb-goshuin figcaption small{display:block;font-size:.66rem;color:var(--gris);margin-top:2px;line-height:1.3;}
  .lb-goshuin svg.niv-3{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--kincha) 45%, transparent)) drop-shadow(0 2px 0 var(--washi-deep));}
  .kana-pista{margin-top:8px;font-size:.88rem;line-height:1.45;color:var(--sumi);}
  .kana-pista span[lang=ja]{font-size:1.3rem;margin-right:2px;}
  .lb-c.descanso b, .sem-d.descanso b{font-family:'Shippori Mincho',serif;font-weight:700;color:var(--ai);opacity:.55;}
  .lb-c.descanso{flex-direction:column;}
  .lb-c.descanso i{font-size:.6rem;line-height:1;}
  .lb-c.descanso b{font-size:1.05rem;line-height:1;}
  .sem-d.descanso b{font-size:.95rem;}
  .st-new{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;background:var(--tinte-papel);color:var(--kincha);border:1.5px solid var(--kincha);border-radius:8px;padding:3px 7px;font-size:.62rem;line-height:1.2;}
  .st-new b{font-family:'Shippori Mincho',serif;font-size:.95rem;}
  .st.is-new .st-dot{box-shadow:0 0 0 3px color-mix(in srgb, var(--kincha) 35%, transparent);}
  .ro-new{position:absolute;top:-6px;right:2px;background:var(--kincha);color:var(--papel);font-family:'Shippori Mincho',serif;font-size:.62rem;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .unit-new{font-weight:700;}
  .unit-new i{font-style:normal;font-family:'Shippori Mincho',serif;}
  .conf-card{margin-top:16px;}
  .conf-head{display:flex;gap:12px;align-items:center;}
  .conf-head h3{margin:0;font-family:'Shippori Mincho',serif;}
  .conf-head p{margin:2px 0 0;font-size:.85rem;color:var(--gris-osc);}
  .conf-kj{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--kincha);color:var(--papel);display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-size:1.3rem;}
  .conf-pares{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
  .conf-par{display:flex;align-items:baseline;gap:4px;border:1.5px solid var(--line-cl);border-radius:10px;padding:4px 10px;background:var(--tinte-papel);}
  .conf-par b{font-size:1.5rem;font-weight:400;}
  .conf-par i{font-style:normal;color:var(--gris-cl);}
  .conf-par small{color:var(--shu);font-weight:700;margin-left:4px;}
  .say.say-slow{margin-left:6px;}

  /* =====================================================================
     PERFIL DEL ALUMNO — onboarding (gustos, objetivo, tiempo, test) y «Contenido recomendado»
     ===================================================================== */
  .ob{max-width:540px;margin:0 auto;}
  .ob-h{font-family:'Shippori Mincho',serif;color:var(--ai-deep);font-size:1.6rem;line-height:1.25;margin:4px 0 6px;text-wrap:balance;}
  .ob .hint-note{margin:0 0 14px;line-height:1.5;}
  .ob-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
  .ob-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;background:var(--papel);
    border:1.5px solid var(--line);font-family:'Zen Maru Gothic',sans-serif;font-size:.92rem;color:var(--sumi);text-align:left;}
  .ob-sello{flex-shrink:0;width:34px;height:34px;border-radius:6px;display:grid;place-items:center;font-family:'Shippori Mincho',serif;font-weight:700;
    font-size:1.05rem;color:var(--shu-deep);border:1.5px solid var(--shu);transform:rotate(-3deg);transition:background .15s ease, color .15s ease;}
  .ob-chip[aria-pressed="true"]{border-color:var(--shu);}
  .ob-chip[aria-pressed="true"] .ob-sello{background:var(--shu);color:var(--papel);}
  @media (hover:hover){ .ob-chip:hover{border-color:var(--ai);} }
  .ob-acts{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
  .ob-acts .btn{width:100%;padding:13px;font-size:1rem;}
  .place-opt.on{border-color:var(--ai);box-shadow:inset 0 0 0 1px var(--ai);}
  .ob-test{margin-top:4px;}
  .ob-test-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
  .ob-test-top small{font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris);font-variant-numeric:tabular-nums;}
  .ob-jp{font-family:'Shippori Mincho',serif;font-size:1.9rem;color:var(--sumi);text-align:center;margin:18px 0 22px;line-height:1.5;overflow-wrap:anywhere;}
  .ob-jp.larga{font-size:1.3rem;text-align:left;}
  .ob-ops{display:flex;flex-direction:column;gap:8px;}
  .ob-op{padding:13px 16px;border-radius:8px;border:1.5px solid var(--line);background:var(--washi);font-family:'Zen Maru Gothic',sans-serif;font-size:1rem;color:var(--sumi);text-align:left;cursor:pointer;}
  .ob-op.no{background:transparent;border-style:dashed;color:var(--gris);font-size:.9rem;}
  @media (hover:hover){ .ob-op:hover{border-color:var(--ai);} }
  .ob-resumen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 18px;}
  .ob-dato{background:var(--papel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:'Zen Maru Gothic',sans-serif;min-width:0;}
  .ob-dato small{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:4px;}
  .ob-dato b{font-weight:500;color:var(--ai-deep);font-size:.98rem;}
  .ob-sub{font-family:'Shippori Mincho',serif;color:var(--ai-deep);font-size:1.15rem;margin:18px 0 8px;}
  .ob-temas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px;}
  .ob-tema{border:1.5px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;background:var(--papel);font-family:'Zen Maru Gothic',sans-serif;
    font-size:.78rem;color:var(--gris);text-align:left;display:flex;flex-direction:column;gap:5px;min-width:0;}
  .ob-tema[aria-pressed="true"]{border-color:var(--shu);box-shadow:inset 0 0 0 1px var(--shu);}
  .ob-tema b{font-weight:500;font-size:.86rem;color:var(--ai-deep);}
  .ob-muestra{height:74px;border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,.15);}
  .ob-muestra svg{width:100%;height:100%;display:block;}
  .ob-muestra .farol, .ob-muestra .neon, .ob-muestra .parpadeo{animation:none;}
  .ob-muestra.washi{background:#f2ecdc;} .ob-muestra.sakura{background:#fbf0f1;} .ob-muestra.matsuri{background:#f7efe0;}
  .ob-muestra.samurai{background:#141110;} .ob-muestra.noche{background:#10142a;} .ob-muestra.manga{background:#f7f5ef;}
  .ob-pack{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
  .ob-palabra{background:var(--papel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:'Zen Maru Gothic',sans-serif;}
  .ob-palabra .k{font-family:'Shippori Mincho',serif;font-size:1.25rem;display:block;color:var(--sumi);}
  .ob-palabra .r{font-size:.78rem;color:var(--shu-deep);}
  .ob-palabra .s{font-size:.8rem;color:var(--gris);display:block;}
  .ob-edad{display:flex;gap:10px;align-items:flex-start;font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;line-height:1.45;margin:4px 0 2px;}
  .ob-edad input{margin-top:3px;accent-color:var(--ai);}
  @media (max-width:460px){ .ob-resumen{grid-template-columns:1fr;} .ob-temas{grid-template-columns:1fr 1fr;} .ob-h{font-size:1.4rem;} .ob-jp{font-size:1.5rem;} .ob-jp.larga{font-size:1.15rem;} }

  /* Mi perfil y aspecto */
  .aj-sec{margin:0 0 6px;}
  .aj-sec .ob-sub{margin-top:22px;}
  .aj-aviso{font-family:'Zen Maru Gothic',sans-serif;font-size:.86rem;color:var(--matcha-osc);background:var(--tinte-matcha);border:1px solid var(--matcha);border-radius:8px;padding:10px 12px;margin:0 0 6px;line-height:1.5;}

  /* «Contenido recomendado» */
  .ver-filtros{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
  .ver-filtro{font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;border:1.5px solid var(--line);background:var(--washi);color:var(--sumi);border-radius:16px;padding:5px 12px;cursor:pointer;}
  .ver-filtro[aria-pressed="true"]{background:var(--ai);border-color:var(--ai);color:var(--washi);}
  .ver-perfil{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--papel);border:1.5px dashed var(--ai);
    border-radius:10px;padding:12px 14px;margin:0 0 16px;font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;color:var(--sumi);}
  .ver-perfil b{color:var(--ai-deep);font-weight:500;}
  .ver-lista{display:flex;flex-direction:column;gap:12px;}
  .obra{background:var(--papel);border:1px solid var(--line);border-radius:8px;padding:16px 16px 14px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;box-shadow:0 2px 0 var(--line);}
  .obra .ob-sello{grid-row:span 3;width:44px;height:44px;font-size:1.25rem;}
  .obra h3{margin:0;font-family:'Shippori Mincho',serif;font-size:1.12rem;color:var(--ai-deep);line-height:1.3;}
  .obra .ja{font-family:'Shippori Mincho',serif;color:var(--gris);font-size:.85rem;margin-left:6px;font-weight:500;}
  .obra-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris);}
  .obra-pill{border-radius:12px;padding:2px 9px;border:1px solid var(--matcha);color:var(--matcha);font-weight:500;}
  .obra-desc{margin:2px 0 0;font-size:.9rem;line-height:1.55;color:var(--sumi);}
  .obra-porque{grid-column:1 / -1;margin:8px 0 0;padding:8px 0 0;border-top:1px dashed var(--line);font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;color:var(--sumi);display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;}
  .obra-porque li::before{content:"・";color:var(--shu);}
  .obra-calc{grid-column:1 / -1;font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;color:var(--gris);}
  .obra-calc summary{cursor:pointer;color:var(--shu-deep);margin-top:6px;}
  .obra-barras{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;margin-top:8px;font-variant-numeric:tabular-nums;}
  .obra-barra{height:6px;border-radius:4px;background:var(--washi-deep);overflow:hidden;}
  .obra-barra span{display:block;height:100%;background:var(--matcha);}

  /* =====================================================================
     TEMAS VISUALES — capa opcional sobre la base washi (elige cada alumno).
     Solo redefinen colores y añaden una escena dibujada (js/motor/escenas.js).
     Washi es el de siempre: sin atributo o con data-tema="washi" no cambia nada.
     ===================================================================== */
  .escena{position:absolute;pointer-events:none;z-index:0;}
  .escena svg{display:block;width:100%;height:100%;}
  .escena-arriba{top:0;left:50%;transform:translateX(-50%);width:min(100%, 760px);height:220px;
    -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent);mask-image:linear-gradient(to bottom, #000 70%, transparent);}
  .escena-izq{position:fixed;left:0;bottom:0;width:clamp(110px, 20vw, 240px);height:clamp(140px, 28vw, 280px);opacity:.9;}
  .escena-der{position:fixed;right:0;bottom:0;width:clamp(110px, 20vw, 240px);height:clamp(120px, 22vw, 230px);opacity:.9;}
  .escena-fondo{position:fixed;left:0;right:0;bottom:0;height:clamp(110px, min(18vw, 26vh), 340px);z-index:1;}   /* encima de los dibujos de fondo (.page-bg), debajo de la app (.wrap va después) */
  .escena-petalos{position:fixed;inset:0;overflow:hidden;}
  .escena-petalos span{position:absolute;top:-20px;width:12px;height:9px;border-radius:70% 10% 70% 10%;background:#f2b7c6;opacity:.85;animation:ob-caer linear infinite;}
  .escena-petalos span:nth-child(3n){background:#e892aa;width:10px;height:8px;}
  @keyframes ob-caer{0%{transform:translate(0,-5vh) rotate(0);}50%{transform:translate(var(--d),50vh) rotate(200deg);}100%{transform:translate(0,110vh) rotate(400deg);}}
  .escena .farol{animation:ob-mecer 4s ease-in-out infinite alternate;}
  @keyframes ob-mecer{from{transform:rotate(-4deg);}to{transform:rotate(4deg);}}
  .escena .neon, .escena .parpadeo{animation:ob-neon 6s infinite;}
  @keyframes ob-neon{0%,92%,100%{opacity:1;}93%{opacity:.35;}95%{opacity:1;}96%{opacity:.5;}}
  body.con-tabs .escena-izq, body.con-tabs .escena-der{bottom:64px;}
  body.focus-mode .escena{display:none;}
  /* Las esquinas solo se ven fuertes cuando hay margen a los lados de la columna; si no, quedan suaves detrás */
  @media (max-width:999px){ .escena-izq,.escena-der{opacity:.3;} }
  @media (max-width:640px){ body.con-tabs .escena-izq, body.con-tabs .escena-der{bottom:58px;} }
  /* En el móvil la barra de pestañas va pegada abajo: el paisaje se pone justo encima, más suave para leer bien */
  @media (max-width:600px){ body.con-tabs .escena-fondo{bottom:var(--alto-tabbar, 64px);opacity:.6;} }
  /* Con contenido encima (js/motor/escenas.js: tapado), el paisaje y las esquinas se quedan casi transparentes */
  .escena-fondo,.escena-izq,.escena-der{transition:opacity .35s ease;}
  #escena.tapado .escena-fondo,#escena.tapado .escena-izq,#escena.tapado .escena-der{opacity:.12;}
  :root[data-tema="manga"] #escena.tapado .escena-fondo{opacity:.08;}
  @media (prefers-reduced-motion:reduce){ .escena-petalos{display:none;} .escena .farol,.escena .neon,.escena .parpadeo{animation:none;} }
  :root[data-tema]:not([data-tema="washi"]) .hdr{padding-top:26px;min-height:150px;}

  /* Sakura */
  :root[data-tema="sakura"]{--washi:#fbf0f1;--washi-deep:#f1dde0;--papel:#fffafa;--sumi:#3a2a30;--gris:#8c7479;--gris-osc:#6f5a5f;--ai:#7a3b55;--ai-deep:#5c2a40;
    --shu:#d0607f;--shu-deep:#b04565;--kincha:#e6a3b4;--matcha:#6f8a5e;--line:#e7c9cf;--line-cl:#efd8dc;}
  :root[data-tema="sakura"] body{background:radial-gradient(ellipse 7px 4px at 12% 18%, rgba(232,155,176,.5) 90%, transparent) 0 0/260px 260px,
    radial-gradient(ellipse 5px 3px at 70% 40%, rgba(240,181,196,.55) 90%, transparent) 0 0/260px 260px, var(--washi);}
  :root[data-tema="sakura"] .card::before{background:radial-gradient(ellipse 6px 3px at 50% 50%, #e89bb0 90%, transparent) 0 0/22px 5px;opacity:1;}
  /* Matsuri */
  :root[data-tema="matsuri"]{--washi:#f7efe0;--washi-deep:#eedfc4;--papel:#fffaf0;--sumi:#2a2320;--gris:#7f7262;--gris-osc:#62574a;--ai:#1f3a6e;--ai-deep:#152a52;
    --shu:#cf3a24;--shu-deep:#a82c1a;--kincha:#e3a02a;--matcha:#4f7a4a;--line:#dcc49c;}
  :root[data-tema="matsuri"] body{background:radial-gradient(circle at 8% 0%, rgba(227,160,42,.25), transparent 18%), radial-gradient(circle at 92% 0%, rgba(207,58,36,.2), transparent 16%), var(--washi);}
  :root[data-tema="matsuri"] .card::before{background:repeating-linear-gradient(90deg, #cf3a24 0 12px, #fffaf0 12px 24px);opacity:1;height:7px;}
  /* Viñeta */
  :root[data-tema="manga"]{--washi:#f7f5ef;--washi-deep:#e6e3da;--papel:#ffffff;--sumi:#111111;--gris:#5a5750;--gris-osc:#3f3d38;--ai:#111111;--ai-deep:#111111;
    --line:#111111;--line-cl:#8d8a82;--shu:#c0392b;--shu-deep:#9b2a1e;}
  :root[data-tema="manga"] body{background:radial-gradient(rgba(17,17,17,.12) .9px, transparent 1.2px) 0 0/9px 9px, var(--washi);}
  :root[data-tema="manga"] .card{border-width:2px;box-shadow:5px 5px 0 #111;}
  :root[data-tema="manga"] .card::before{display:none;}
  :root[data-tema="manga"] .hdr .kanji{font-family:'Dela Gothic One','Shippori Mincho',sans-serif;font-weight:400;}
  /* Temas oscuros: Samurái y Tokio de noche */
  :root[data-tema="samurai"]{--washi:#141110;--washi-deep:#2b2421;--papel:#1e1917;--sumi:#ece3d3;--gris:#a2968a;--gris-osc:#c4b9ab;--gris-cl:#8a7f73;
    --ai:#c9a24a;--ai-deep:#e0bf6c;--shu:#e05a4c;--shu-deep:#e86a5c;--kincha:#c9a24a;--matcha:#9bb98a;--line:#3a302b;color-scheme:dark;}
  :root[data-tema="samurai"] body{background:radial-gradient(ellipse at 50% -10%, rgba(201,162,74,.14), transparent 50%), var(--washi);}
  :root[data-tema="samurai"] .hdr .kanji{text-shadow:0 2px 10px #000, 0 0 2px #000;}
  :root[data-tema="samurai"] .hdr .sub{text-shadow:0 1px 6px #000;color:#f3d9a0;}
  :root[data-tema="samurai"] .hdr .marca-kj{color:var(--kincha);text-shadow:0 1px 6px #000, 0 0 2px #000;}
  :root[data-tema="samurai"] .card::before{background:linear-gradient(90deg, #c0392b 0 30%, #c9a24a 30% 100%);height:2px;opacity:1;}
  :root[data-tema="noche"]{--washi:#10142a;--washi-deep:#262c4a;--papel:#1a1f3a;--sumi:#ece8f5;--gris:#a7a3bd;--gris-osc:#c8c4dc;--gris-cl:#8a86a3;
    --ai:#ff5fa2;--ai-deep:#ff8cc0;--shu:#49d6e6;--shu-deep:#7fe6f2;--kincha:#ffd166;--matcha:#7ee0a8;--line:#323a60;color-scheme:dark;}
  :root[data-tema="noche"] body{background:radial-gradient(ellipse at 90% 0%, rgba(255,95,162,.22), transparent 45%), radial-gradient(ellipse at 0% 100%, rgba(73,214,230,.14), transparent 50%), var(--washi);}
  :root[data-tema="noche"] .hdr .kanji{text-shadow:0 0 18px rgba(255,95,162,.6);}
  :root[data-tema="noche"] .card::before{background:linear-gradient(90deg, #ff5fa2, #49d6e6);height:3px;opacity:1;box-shadow:0 0 14px #ff5fa2;}
  /* En los temas oscuros, los tonos claros de fondo se oscurecen y los textos oscuros se aclaran */
  :root[data-tema="samurai"], :root[data-tema="noche"]{
    --gris-cl-2:color-mix(in srgb, var(--gris) 70%, var(--papel)); --gris-osc-2:var(--gris-osc); --line-cl:color-mix(in srgb, var(--line) 70%, var(--sumi));
    --tinte-shu:color-mix(in srgb, var(--papel) 82%, var(--shu)); --tinte-shu-2:color-mix(in srgb, var(--papel) 86%, var(--shu));
    --tinte-shu-3:color-mix(in srgb, var(--papel) 86%, var(--shu)); --tinte-shu-4:color-mix(in srgb, var(--papel) 84%, var(--shu));
    --tinte-papel:color-mix(in srgb, var(--papel) 92%, var(--sumi)); --tinte-matcha:color-mix(in srgb, var(--papel) 82%, var(--matcha));
    --tinte-kincha:color-mix(in srgb, var(--papel) 75%, var(--kincha)); --tinte-kincha-2:color-mix(in srgb, var(--papel) 40%, var(--kincha));
    --tinte-murasaki:color-mix(in srgb, var(--papel) 78%, #b48ad0);
    --matcha-osc:color-mix(in srgb, var(--matcha) 70%, #fff); --matcha-osc-2:color-mix(in srgb, var(--matcha) 65%, #fff); --matcha-osc-3:var(--matcha);
    --kincha-osc:color-mix(in srgb, var(--kincha) 80%, #fff); --kincha-osc-2:color-mix(in srgb, var(--kincha) 80%, #fff);
    --kincha-osc-3:color-mix(in srgb, var(--kincha) 75%, #fff); --kincha-osc-4:color-mix(in srgb, var(--kincha) 75%, #fff);
    --shu-osc:var(--shu-deep); --shu-osc-2:var(--shu-deep); --murasaki:#c9a6e0; --murasaki-osc:#dcc3ee;}
  :root[data-tema="samurai"] .tabbar, :root[data-tema="noche"] .tabbar{background:color-mix(in srgb, var(--papel) 94%, transparent);}
  :root[data-tema="samurai"] .ob-muestra, :root[data-tema="noche"] .ob-muestra{border-color:rgba(255,255,255,.15);}

  /* =====================================================================
     CONFIGURACIÓN (js/motor/ajustes.js)
     ===================================================================== */
  .acct{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
  .acct .lang-btn{margin-top:0;}
  .cfg-lista{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
  .cfg-fila, .cfg-tu{width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;background:var(--papel);
    border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);}
  @media (hover:hover){ .cfg-fila:hover, .cfg-tu:hover{border-color:var(--ai);} }
  .cfg-fila:focus-visible, .cfg-tu:focus-visible{outline:2px solid var(--kincha);outline-offset:2px;}
  .cfg-fila-txt, .cfg-tu-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .cfg-fila-txt b{font-weight:500;font-size:.98rem;}
  .cfg-fila-txt span, .cfg-tu-txt span{font-size:.8rem;color:var(--gris-osc);line-height:1.35;}
  .cfg-tu{margin:6px 0 12px;padding:12px 14px;border-color:var(--shu);box-shadow:0 2px 0 var(--line);}
  .cfg-tu .hanko{flex-shrink:0;}
  .cfg-tu-txt b{font-family:'Shippori Mincho',serif;font-size:1.2rem;color:var(--ai-deep);}
  .cfg-flecha{color:var(--gris);font-size:1.4rem;line-height:1;}
  /* Volumen (Configuración · Sonidos) */
  .cfg-vol{display:flex;flex-direction:column;gap:10px;padding:12px 14px 10px;margin:-4px 0 4px;border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;background:color-mix(in srgb, var(--papel) 85%, transparent);}
  .cfg-vol-fila{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t n" "r r";align-items:center;gap:4px 10px;font-family:'Zen Maru Gothic',sans-serif;font-size:.88rem;color:var(--sumi);}
  .cfg-vol-fila span{grid-area:t;} .cfg-vol-fila output{grid-area:n;font-variant-numeric:tabular-nums;color:var(--gris-osc);font-size:.82rem;}
  .cfg-vol-fila input[type=range]{grid-area:r;width:100%;accent-color:var(--matcha);height:28px;margin:0;}
  .cfg-vol-fila input:disabled{opacity:.4;}
  .cfg-vol-nota{margin:0;font-family:'Zen Maru Gothic',sans-serif;font-size:.74rem;color:var(--gris);}
  .aj-aviso.ko{border-color:var(--shu);color:var(--shu);background:var(--tinte-shu);}
  .cfg-interruptor{flex-shrink:0;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;transition:background .15s ease;}
  .cfg-interruptor::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--papel);box-shadow:0 1px 2px rgba(43,42,40,.3);transition:left .15s ease;}
  .cfg-fila[aria-pressed="true"] .cfg-interruptor{background:var(--matcha);}
  .cfg-fila[aria-pressed="true"] .cfg-interruptor::after{left:21px;}
  .cfg .ob-sub{margin-top:22px;}
  .cfg-pills{margin-bottom:8px;}
  .cfg-campo{display:flex;flex-direction:column;gap:6px;margin:14px 0 6px;font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;color:var(--gris-osc);}
  .cfg-campo input{font:inherit;font-size:1.05rem;color:var(--sumi);background:var(--papel);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;}
  .cfg-campo input:focus{outline:none;border-color:var(--ai);}
  .cfg-hanko{display:flex;align-items:center;gap:18px;margin:16px 0 4px;padding:16px;background:var(--papel);border:1px solid var(--line);border-radius:10px;}
  .cfg-hanko .hanko{flex-shrink:0;}
  .cfg-hanko-txt{min-width:0;}
  .cfg-hanko-txt small{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:.75rem;color:var(--gris);letter-spacing:.05em;}
  .cfg-hanko-txt b{display:block;font-family:'Shippori Mincho',serif;font-size:1.6rem;color:var(--shu-deep);margin:2px 0 6px;overflow-wrap:anywhere;}
  .cfg-hanko-txt .hint-note{margin:0;}
  .hanko.vacio{opacity:.35;}
  .cfg-lee{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;color:var(--gris-osc);margin:-2px 0 6px;}
  .cfg-solo-kata{font-family:'Zen Maru Gothic',sans-serif;font-size:.82rem;color:var(--shu-deep);background:var(--tinte-shu);border:1px solid var(--shu);border-radius:8px;padding:8px 10px;margin:0 0 6px;}
  #cfgHankoTxt{font-family:'Shippori Mincho',serif;font-size:1.3rem;letter-spacing:.08em;}
  .kb-kata{display:grid;grid-template-columns:repeat(10, minmax(0, 1fr));gap:4px;margin:8px 0 10px;}
  .kb-kata .kb-key{min-width:0;padding:0;font-family:'Shippori Mincho',serif;font-size:1.05rem;}
  .kb-kata .kb-hueco{display:block;}
  .kb-kata .kb-wide{grid-column:span 2;font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;}
  .cfg-muestra{display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--papel);border:1px dashed var(--line);border-radius:10px;padding:16px 16px 14px;margin:8px 0 4px;}
  .cfg-m-frase{font-family:'Shippori Mincho',serif;font-size:1.35rem;color:var(--sumi);}
  .cfg-letra-muestra{font-family:'Zen Maru Gothic',sans-serif;font-size:1rem;color:var(--sumi);background:var(--papel);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:6px 0 4px;}
  .cfg-letra-muestra span{font-family:'Shippori Mincho',serif;font-size:1.4rem;margin-right:6px;}
  .cfg-dias .ver-filtro{min-width:40px;text-align:center;}
  .cfg-hora{font-family:'Zen Maru Gothic',sans-serif;font-size:1.2rem;color:var(--sumi);background:var(--papel);border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;}
  .cfg-opcion{background:var(--papel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 10px;font-family:'Zen Maru Gothic',sans-serif;}
  .cfg-opcion > b{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--sumi);}
  .cfg-opcion p{font-size:.86rem;color:var(--gris-osc);line-height:1.5;margin:6px 0 10px;}
  .cfg-opcion p b{color:var(--sumi);font-weight:500;}
  .cfg-opcion small{display:block;font-size:.76rem;color:var(--gris);margin-top:8px;line-height:1.4;}
  .cfg-cal-btns{display:flex;flex-wrap:wrap;gap:8px;}
  .cfg-cal-btns .btn{text-decoration:none;display:inline-flex;align-items:center;}
  .cfg-opcion.pronto{border-style:dashed;background:transparent;}
  .cfg-opcion.pronto p{margin-bottom:0;}
  .cfg-op-kj{font-family:'Shippori Mincho',serif;font-weight:700;color:var(--shu-deep);border:1.5px solid var(--shu);border-radius:5px;width:26px;height:26px;display:inline-grid;place-items:center;font-size:.9rem;transform:rotate(-3deg);}
  .cfg-pronto{font-size:.7rem;color:var(--kincha-osc-2);border:1px solid var(--kincha);border-radius:10px;padding:1px 8px;margin-left:auto;}
  .lb-hanko{display:flex;align-items:center;gap:12px;margin:4px 0 10px;font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);}
  .lb-hanko small{display:block;font-family:'Shippori Mincho',serif;color:var(--shu-deep);font-size:.95rem;}

  /* Ayudas de lectura: rōmaji debajo (data-rom) y furigana encima (.frg) */
  :root[data-romaji="si"] [data-rom]::after{content:attr(data-rom);display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:max(.58em, .72rem);
    font-weight:400;letter-spacing:.02em;line-height:1.3;color:var(--gris-osc);margin-top:1px;text-transform:none;white-space:normal;}
  :root[data-romaji="si"] span[data-rom], :root[data-romaji="si"] b[data-rom]{display:inline-block;text-align:center;vertical-align:middle;}
  :root[data-romaji="si"] .st-jp[data-rom], :root[data-romaji="si"] .cfg-m-frase[data-rom]{display:block;text-align:left;}
  .frg{display:inline-block;position:relative;}
  :root[data-furigana="si"] .frg{padding-top:.6em;}
  :root[data-furigana="si"] .frg::before{content:attr(data-furi);position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;
    font-family:'Zen Maru Gothic',sans-serif;font-size:.45em;line-height:1.2;letter-spacing:0;color:var(--gris-osc);font-weight:400;}

  /* Accesibilidad: tamaño de letra (todo va en rem) */
  :root[data-letra="grande"]{font-size:112.5%;}
  :root[data-letra="enorme"]{font-size:125%;}
  /* Letra grande: la tira de la semana pasa a dos líneas para no salirse */
  :root[data-letra="grande"] .semana, :root[data-letra="enorme"] .semana{flex-wrap:wrap;}
  :root[data-letra="grande"] .sem-txt, :root[data-letra="enorme"] .sem-txt{white-space:normal;}
  /* ---- Pestaña central: el camino, destacado (un poco más grande y en relieve, sin salirse de la barra) ---- */
  .tab.principal{background:color-mix(in srgb, var(--ai) 9%, var(--papel));box-shadow:0 2px 6px color-mix(in srgb, var(--sumi) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ai) 22%, transparent);}
  .tab.principal .tab-kj{font-size:1.6rem;}
  .tab.principal .tab-name{font-weight:700;}
  .tab.principal.on{background:var(--ai);box-shadow:0 3px 10px color-mix(in srgb, var(--ai) 45%, transparent);}
  @media (max-width:600px){ .tab.principal{flex:1.25;} }
  /* ---- Pestaña Kanji ---- */
  .kanji-big{font-family:'Shippori Mincho',serif;font-size:6.5rem;line-height:1.05;color:var(--sumi);margin-top:6px;}
  .q-kanji{display:block;font-family:'Shippori Mincho',serif;font-size:3.8rem;line-height:1.15;margin-top:8px;text-align:center;}
  .q-es{display:block;text-align:center;color:var(--gris-osc);font-size:.85rem;margin-top:2px;}
  .kj-fila{font-family:'Shippori Mincho',serif;font-size:2.4rem;letter-spacing:.12em;text-align:center;margin:10px 0;white-space:nowrap;}
  .q-kanji-pal{font-size:2.8rem;}
  .kj-palabras{margin:14px auto 0;max-width:340px;text-align:left;}
  .kj-palabras > small{display:block;color:var(--gris-osc);font-size:.78rem;margin-bottom:4px;}
  .kj-pal{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px dashed var(--line);}
  .kj-w{font-family:'Shippori Mincho',serif;font-size:1.5rem;min-width:5.5em;}
  .kj-w rt{font-family:'Zen Maru Gothic',sans-serif;font-size:.5em;color:var(--gris-osc);}
  .kj-es{flex:1;font-size:.88rem;color:var(--sumi);}
  @media (max-width:600px){ .kanji-card .kanji-big{font-size:5rem;} }
  .kj-origen{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;}
  .kj-origen svg{width:58px;height:58px;fill:none;stroke:var(--shu);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;color:var(--shu);}
  .kj-origen svg path[fill], .kj-origen svg circle[fill]{stroke:none;}
  .kj-flecha{color:var(--gris);font-size:1.2rem;}
  .kj-o-k{font-family:'Shippori Mincho',serif;font-size:2.6rem;line-height:1;color:var(--sumi);}
  .kj-origen figcaption{flex-basis:100%;text-align:center;font-size:.82rem;color:var(--gris-osc);}
  @media (prefers-reduced-motion:no-preference){ .kj-origen svg{animation:kj-aparece .9s ease-out both;} .kj-o-k{animation:kj-aparece .6s .7s ease-out both;} }
  @keyframes kj-aparece{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:none;}}
  .kj-tambien{margin:-2px 0 6px;font-size:.88rem;color:var(--gris-osc);}
  .kj-lee{margin:8px 0 0;font-size:.92rem;color:var(--gris-osc);}
  .kj-lee b{font-family:'Shippori Mincho',serif;font-size:1.25rem;color:var(--sumi);margin:0 4px;}
  :root[data-furigana="si"] .frg.sabido{padding-top:0;}
  :root[data-furigana="si"] .frg.sabido::before{display:none;}
  /* Al terminar una lección del camino: los kanji que han salido y se pueden aprender en la pestaña Kanji */
  .kj-sugerencia{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px auto 0;max-width:440px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--papel);text-align:left;}
  .kj-sug-k{flex-basis:100%;font-family:'Shippori Mincho',serif;font-size:1.6rem;color:var(--ai-deep);letter-spacing:.12em;}
  .kj-sug-t{flex:1 1 180px;font-size:.86rem;color:var(--gris-osc);line-height:1.35;}
  .kj-sugerencia .btn{flex:0 0 auto;margin-left:auto;}
  .kj-sug-t b{display:block;color:var(--sumi);font-size:.95rem;}

  /* ===== Plano de metro v2: vías que dan vueltas, transbordos y plano general (js/motor/plano.js) ===== */
  /* Colores de las líneas. Cada tema los «tiñe» hacia su paleta: --mezcla es el color con el que se mezclan
     y --mezcla-pct cuánto (0% en washi: los colores de siempre). Así las 17 líneas casan con cada tema. */
  :root{
    --lb-0:#b4553f; --lb-1:#2f6f9f; --lb-2:#3f8a63; --lb-3:#c88a1e; --lb-4:#7a5ea8; --lb-5:#1f8f8c;
    --lb-6:#c2557a; --lb-7:#8a6d3b; --lb-8:#d0702e; --lb-9:#5b7fb8; --lb-10:#a0457a; --lb-11:#6c8c2f;
    --lb-12:#2a5f6e; --lb-13:#c0392b; --lb-14:#4b4b8f; --lb-15:#2b2a28; --lb-16:#8c7a3a;
    --lb-verbos:#8e5aa8; --lb-historias:#d4881f;
    --mezcla:var(--sumi); --mezcla-pct:0%;
    --linea-0:color-mix(in oklab, var(--lb-0), var(--mezcla) var(--mezcla-pct));
    --linea-1:color-mix(in oklab, var(--lb-1), var(--mezcla) var(--mezcla-pct));
    --linea-2:color-mix(in oklab, var(--lb-2), var(--mezcla) var(--mezcla-pct));
    --linea-3:color-mix(in oklab, var(--lb-3), var(--mezcla) var(--mezcla-pct));
    --linea-4:color-mix(in oklab, var(--lb-4), var(--mezcla) var(--mezcla-pct));
    --linea-5:color-mix(in oklab, var(--lb-5), var(--mezcla) var(--mezcla-pct));
    --linea-6:color-mix(in oklab, var(--lb-6), var(--mezcla) var(--mezcla-pct));
    --linea-7:color-mix(in oklab, var(--lb-7), var(--mezcla) var(--mezcla-pct));
    --linea-8:color-mix(in oklab, var(--lb-8), var(--mezcla) var(--mezcla-pct));
    --linea-9:color-mix(in oklab, var(--lb-9), var(--mezcla) var(--mezcla-pct));
    --linea-10:color-mix(in oklab, var(--lb-10), var(--mezcla) var(--mezcla-pct));
    --linea-11:color-mix(in oklab, var(--lb-11), var(--mezcla) var(--mezcla-pct));
    --linea-12:color-mix(in oklab, var(--lb-12), var(--mezcla) var(--mezcla-pct));
    --linea-13:color-mix(in oklab, var(--lb-13), var(--mezcla) var(--mezcla-pct));
    --linea-14:color-mix(in oklab, var(--lb-14), var(--mezcla) var(--mezcla-pct));
    --linea-15:color-mix(in oklab, var(--lb-15), var(--mezcla) var(--mezcla-pct));
    --linea-16:color-mix(in oklab, var(--lb-16), var(--mezcla) var(--mezcla-pct));
    /* Líneas transversales (字 Kanji, 動 Verbos, 話 Historias) y el texto que va encima de un color de línea */
    --tr-kanji:var(--sumi);
    --tr-verbos:color-mix(in oklab, var(--lb-verbos), var(--mezcla) var(--mezcla-pct));
    --tr-historias:color-mix(in oklab, var(--lb-historias), var(--mezcla) var(--mezcla-pct));
    --sobre-linea:var(--papel);
    --via-pct:30%;   /* cuánto color tiene la vía que aún no has recorrido */
  }
  :root[data-tema="sakura"]{--mezcla:var(--ai);--mezcla-pct:24%;}
  :root[data-tema="matsuri"]{--mezcla:var(--shu);--mezcla-pct:8%;}
  :root[data-tema="manga"]{--mezcla:var(--sumi);--mezcla-pct:42%;}
  /* En los temas oscuros las líneas se aclaran (si no, no se verían sobre el fondo) y la línea casi negra pasa a gris claro */
  :root[data-tema="samurai"]{--mezcla:var(--sumi);--mezcla-pct:30%;--lb-15:#8f857b;--via-pct:48%;}
  :root[data-tema="noche"]{--mezcla:var(--sumi);--mezcla-pct:28%;--lb-15:#8b88a6;--via-pct:48%;}
  /* Paleta unificada por tema: cada tema tiene sus 6 tintas (--tp-0 … --tp-5), sacadas de sus propios colores,
     y las 17 líneas salen de ahí: las 6 tintas, luego las mismas más hondas (hacia --sumi) y luego más suaves
     (hacia --washi). Así el camino, el plano, las cabeceras y el tren hablan el mismo idioma que el resto del tema.
     Washi no cambia: sus 17 colores tradicionales de siempre. */
  :root[data-tema="sakura"]{--tp-0:#d0607f;--tp-1:#7a3b55;--tp-2:#6f8a5e;--tp-3:#8a6fae;--tp-4:#e08a6a;--tp-5:#4f8a8b;}
  :root[data-tema="matsuri"]{--tp-0:#cf3a24;--tp-1:#1f3a6e;--tp-2:#d99417;--tp-3:#2f6a4a;--tp-4:#e0622a;--tp-5:#8a2f5a;}
  :root[data-tema="manga"]{--tp-0:#111111;--tp-1:#c0392b;--tp-2:#5a5750;--tp-3:#9b2a1e;--tp-4:#3f3d38;--tp-5:#7a756c;}
  :root[data-tema="samurai"]{--tp-0:#c9a24a;--tp-1:#d0453a;--tp-2:#b07a4a;--tp-3:#8fa3b8;--tp-4:#8fae7a;--tp-5:#b07aa0;}
  :root[data-tema="noche"]{--tp-0:#ff5fa2;--tp-1:#49d6e6;--tp-2:#ffd166;--tp-3:#a98bff;--tp-4:#7ee0a8;--tp-5:#ff9f5a;}
  :root[data-tema]:not([data-tema="washi"]){--mezcla-pct:0%;
    --lb-0:var(--tp-0); --lb-1:var(--tp-1); --lb-2:var(--tp-2); --lb-3:var(--tp-3); --lb-4:var(--tp-4); --lb-5:var(--tp-5);
    --lb-6:color-mix(in oklab, var(--tp-0) 70%, var(--sumi)); --lb-7:color-mix(in oklab, var(--tp-1) 70%, var(--sumi)); --lb-8:color-mix(in oklab, var(--tp-2) 70%, var(--sumi));
    --lb-9:color-mix(in oklab, var(--tp-3) 70%, var(--sumi)); --lb-10:color-mix(in oklab, var(--tp-4) 70%, var(--sumi)); --lb-11:color-mix(in oklab, var(--tp-5) 70%, var(--sumi));
    --lb-12:color-mix(in oklab, var(--tp-0) 68%, var(--washi)); --lb-13:color-mix(in oklab, var(--tp-1) 68%, var(--washi)); --lb-14:color-mix(in oklab, var(--tp-2) 68%, var(--washi));
    --lb-15:color-mix(in oklab, var(--tp-3) 68%, var(--washi)); --lb-16:color-mix(in oklab, var(--tp-4) 68%, var(--washi));
    --lb-verbos:var(--tp-3); --lb-historias:var(--tp-2);
    --hondo:var(--sumi);}   /* «tinta honda»: hacia donde se oscurece un color (en los temas oscuros, hacia el fondo) */
  :root[data-tema="samurai"], :root[data-tema="noche"]{--hondo:var(--washi);}
  /* Contraste en los temas oscuros (Tokyo night y Samurái): lo que va SOBRE un color vivo (pestaña activa,
     cabecera de la línea, «Continuar») se escribe en tinta honda, no en otro color vivo que se pierde. */
  :root[data-tema="samurai"] .tab.on .tab-kj, :root[data-tema="noche"] .tab.on .tab-kj{color:inherit;}
  /* El rojo de Samurái es más claro (#e05a4c) para que se lea como texto sobre el fondo oscuro (4,7:1);
     por eso, lo que va escrito ENCIMA del rojo, en tinta oscura (5,1:1) en vez de blanco (2,9:1). */
  :root[data-tema="samurai"] .next-btn, :root[data-tema="samurai"] .btn-danger, :root[data-tema="samurai"] .tl-item.is-done .tl-dot, :root[data-tema="samurai"] .w-seal.on{color:var(--washi);}
  :root[data-tema="samurai"] .read-kj, :root[data-tema="noche"] .read-kj{color:var(--washi);}
  :root[data-tema="samurai"] .read-list.later .read-card, :root[data-tema="noche"] .read-list.later .read-card{opacity:.8;}   /* las de «Más adelante»: apagadas, pero legibles */
  :root[data-tema="samurai"] .tn-s, :root[data-tema="noche"] .tn-s{color:inherit;font-weight:700;opacity:.9;}
  :root[data-tema="samurai"] .unit-head .unit-oro, :root[data-tema="noche"] .unit-head .unit-oro{color:var(--hondo);}
  :root[data-tema="samurai"] .unit-atajo, :root[data-tema="noche"] .unit-atajo{color:var(--hondo);background:color-mix(in srgb, var(--hondo) 14%, transparent);border-color:color-mix(in srgb, var(--hondo) 45%, transparent);}
  /* Las tarjetas de secciones (Repasar, Leer…) y los libros de la estantería, con las tintas del tema */
  :root[data-tema]:not([data-tema="washi"]) .sec-shu{background:linear-gradient(135deg, var(--tp-0), color-mix(in oklab, var(--tp-0) 72%, var(--hondo)));}
  :root[data-tema]:not([data-tema="washi"]) .sec-ai{background:linear-gradient(135deg, var(--tp-1), color-mix(in oklab, var(--tp-1) 72%, var(--hondo)));}
  :root[data-tema]:not([data-tema="washi"]) .sec-kin{background:linear-gradient(135deg, var(--tp-2), color-mix(in oklab, var(--tp-2) 72%, var(--hondo)));}
  :root[data-tema]:not([data-tema="washi"]) .sec-mura{background:linear-gradient(135deg, var(--tp-3), color-mix(in oklab, var(--tp-3) 72%, var(--hondo)));}
  :root[data-tema]:not([data-tema="washi"]) .sec-card .sec-kj{color:color-mix(in oklab, var(--washi) 80%, var(--tp-2));}
  :root[data-tema]:not([data-tema="washi"]){--omk-tela-sellos:color-mix(in oklab, var(--tp-1) 62%, var(--hondo));--omk-tela-omikuji:color-mix(in oklab, var(--tp-0) 62%, var(--hondo));
    --omk-madera-cl:color-mix(in oklab, var(--kincha) 55%, var(--hondo));--omk-madera:color-mix(in oklab, var(--kincha) 35%, var(--hondo));}

  /* La vía de cada línea abierta: la dibuja Plano.vias() sobre las estaciones */
  .metro-wrap{position:relative;margin-top:10px;background:color-mix(in srgb, var(--papel) 78%, transparent);border:1px solid var(--line);border-radius:18px;}
  .metro-wrap > svg.via{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible;}
  .metro-wrap.has-via .st::before, .metro-wrap.has-via .st::after{display:none;}
  .via path{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
  .via .via-base{stroke:color-mix(in srgb, var(--lc) var(--via-pct), var(--papel));}
  .via .via-hecha{stroke:var(--lc);}
  .via .via-salto{stroke:var(--lc);stroke-width:5;stroke-dasharray:.5 10;}

  /* Estaciones en serpiente: una fila hacia la derecha, la siguiente vuelve y la vía da la media vuelta.
     Móvil: 3 por fila (2 en pantallas muy estrechas); tableta: 4; ordenador: 6. */
  .metro-wrap ol.metro{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));grid-auto-rows:minmax(116px, auto);row-gap:2px;padding:14px 14px 12px;margin:0;}
  .metro-wrap ol.metro .st{grid-row:var(--r3);grid-column:var(--c3);}
  .metro-wrap .metro .st button{z-index:1;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:5px;min-height:0;height:100%;padding:6px 3px 8px;}
  .metro-wrap .metro .st-dot, .metro-wrap .metro .st.is-current .st-dot{margin-left:0;}
  .metro-wrap .metro .st-dot{width:34px;height:34px;font-size:.88rem;}
  .metro-wrap .metro .st.is-current .st-dot{width:40px;height:40px;font-size:1rem;}
  .metro-wrap .metro .st-body{align-items:center;width:100%;}
  .metro-wrap .metro .st-num{align-self:center;font-size:.6rem;}
  .metro-wrap .metro .st-body b{font-size:.8rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
  .metro-wrap .metro .st-body small{font-size:.64rem;line-height:1.3;}
  /* Cartel de estación (駅名標): una placa de papel con el número de la estación en una franja del color de la línea.
     Es opaca, así la vía nunca pasa por encima del nombre. En el móvil, estrecha para que la media vuelta la rodee. */
  .metro-wrap .metro .st-body{width:min(100%, 92px);gap:1px;padding:0 4px 5px;background:var(--papel);border:1.5px solid color-mix(in srgb, var(--lc) 40%, var(--line));
    border-radius:7px;overflow:hidden;box-shadow:0 1px 0 var(--washi-deep);}
  .metro-wrap .metro .st-num{align-self:stretch;margin:0 -4px 3px;border:0;border-radius:0;background:var(--lc);color:var(--sobre-linea);padding:1px 0;line-height:1.45;}
  .metro-wrap .metro .st-body b{font-size:.74rem;line-height:1.2;}
  .metro-wrap .metro .st-body small{font-size:.6rem;}
  .metro-wrap .metro .st.is-current .st-body{border-color:var(--shu);box-shadow:0 0 0 2px color-mix(in srgb, var(--shu) 25%, transparent);}
  .metro-wrap .metro .st.is-skipped .st-body{border-style:dashed;}
  .metro-wrap .metro .st.is-skipped .st-num{background:color-mix(in srgb, var(--lc) 55%, var(--papel));}
  .metro-wrap .metro .st:not(.is-done):not(.is-current):not(.is-skipped) .st-num{background:color-mix(in srgb, var(--lc) 80%, var(--papel));}
  @media (hover:hover){ .metro-wrap .metro .st button:hover .st-body{border-color:var(--lc);} }
  /* «Estás aquí» y «Nueva»: solo el kanji, en una etiqueta junto a la estación */
  .metro-wrap .metro .st-here, .metro-wrap .metro .st-new{position:absolute;top:0;left:calc(50% + 20px);padding:2px 6px;font-size:0;white-space:nowrap;z-index:2;}
  .metro-wrap .metro .st-here b, .metro-wrap .metro .st-new b{font-size:.78rem;}
  /* En la última columna, la etiqueta va a la izquierda de la estación para no salirse */
  .metro-wrap .metro .fin3 .st-here, .metro-wrap .metro .fin3 .st-new{left:auto;right:calc(50% + 20px);}
  /* El % de la lección hecha: debajo del nombre, grande y claro (la satisfacción de verlo todo al 100 %) */
  .st-pct{display:block;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:1.3rem;line-height:1.1;margin-top:2px;
    color:color-mix(in srgb, var(--lc, var(--ai)) 72%, var(--sumi));font-variant-numeric:tabular-nums;letter-spacing:.01em;}
  .metro-wrap .metro .st-pct{font-size:1.15rem;}
  .st-pct.oro{color:color-mix(in srgb, var(--rc-oro) 80%, var(--sumi));}
  @media (max-width:359px){
    .metro-wrap ol.metro{grid-template-columns:repeat(2, minmax(0,1fr));}
    .metro-wrap ol.metro .st{grid-row:var(--r2);grid-column:var(--c2);}
    .metro-wrap .metro .fin3 .st-here, .metro-wrap .metro .fin3 .st-new{left:calc(50% + 20px);right:auto;}
    .metro-wrap .metro .fin2 .st-here, .metro-wrap .metro .fin2 .st-new{left:auto;right:calc(50% + 20px);}
  }
  @media (min-width:560px){
    .metro-wrap ol.metro{grid-template-columns:repeat(4, minmax(0,1fr));grid-auto-rows:minmax(128px, auto);padding:18px 40px 14px;}
    .metro-wrap ol.metro .st{grid-row:var(--r4);grid-column:var(--c4);}
    .metro-wrap .metro .st-dot{width:36px;height:36px;font-size:.95rem;}
    .metro-wrap .metro .st.is-current .st-dot{width:44px;height:44px;font-size:1.1rem;}
    .metro-wrap .metro .st-body{width:min(100%, 150px);padding:0 6px 6px;}
    .metro-wrap .metro .st-num{margin:0 -6px 4px;}
    .metro-wrap .metro .st-body b{font-size:.86rem;}
    .metro-wrap .metro .st-body small{font-size:.68rem;}
    .metro-wrap .metro .st-here, .metro-wrap .metro .st-new{left:calc(50% + 26px);}
    .metro-wrap .metro .st-here b, .metro-wrap .metro .st-new b{font-size:.86rem;}
    .metro-wrap .metro .fin3 .st-here, .metro-wrap .metro .fin3 .st-new{left:calc(50% + 26px);right:auto;}
    .metro-wrap .metro .fin4 .st-here, .metro-wrap .metro .fin4 .st-new{left:auto;right:calc(50% + 26px);}
  }

  /* Transbordo (乗換): estación con anillo de tinta, como en los planos de metro */
  .st.is-trans .st-dot{box-shadow:0 0 0 3px var(--papel), 0 0 0 5.5px var(--sumi);}
  .st.is-trans.is-current .st-dot{box-shadow:0 0 0 3px var(--papel), 0 0 0 5.5px var(--sumi), 0 0 0 9px var(--shu);}
  .st-trans{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;margin-top:3px;font-size:.66rem;color:var(--gris-osc);}
  .st-trans > span{font-family:'Shippori Mincho',serif;font-weight:700;color:var(--papel);background:var(--sumi);border-radius:4px;padding:0 4px;line-height:1.5;}
  .st-trans i{font-style:normal;font-family:'Shippori Mincho',serif;font-weight:700;width:17px;height:17px;border-radius:4px;background:var(--tc);color:var(--sobre-linea);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;}
  .st-trans em{font-style:normal;}
  @media (max-width:559px){ .st-trans em{display:none;} }   /* en el móvil, sin el nombre: basta el kanji de la transversal */
  /* Pasada en exprés (急行) */
  .st.is-skipped .st-dot{border-style:dashed;color:var(--lc);}
  .st.is-skipped .st-body b{color:var(--gris-osc);}
  .unit-acts{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  .unit-acts .unit-start{position:static;}
  .unit-head:has(.unit-acts) .unit-txt{padding-right:96px;}
  .unit-atajo{font-family:'Zen Maru Gothic',sans-serif;font-size:.72rem;padding:3px 10px 3px 4px;border-radius:14px;border:1px solid color-mix(in srgb, var(--kincha) 70%, var(--washi));
    background:color-mix(in srgb, var(--kincha) 30%, transparent);color:var(--washi);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
  .unit-atajo b{font-family:'Shippori Mincho',serif;font-size:.7rem;background:var(--kincha);color:var(--papel);border-radius:10px;padding:1px 6px;}
  @media (hover:hover){ .unit-atajo:hover{background:color-mix(in srgb, var(--kincha) 50%, transparent);} }
  .unit-pasada{font-weight:500;} .unit-pasada i{font-style:normal;font-family:'Shippori Mincho',serif;background:var(--kincha);color:var(--papel);border-radius:8px;padding:0 5px;}

  /* Plano general (路線図): solo al pulsar «Ver el plano completo», a pantalla entera, para no abrumar al empezar */
  .pl-acceso{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 16px;}
  .pl-abrir{width:100%;max-width:520px;display:flex;align-items:center;gap:14px;padding:12px 16px;border:2px solid var(--ai);border-radius:16px;background:var(--papel);
    color:var(--sumi);cursor:pointer;text-align:left;font-family:'Zen Maru Gothic',sans-serif;box-shadow:0 3px 0 color-mix(in srgb, var(--ai) 35%, var(--washi-deep));}
  @media (hover:hover){ .pl-abrir:hover{border-color:var(--shu);} .pl-abrir:hover .pl-abrir-ir{transform:translateX(3px);} }
  .pl-abrir:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb, var(--ai) 35%, var(--washi-deep));}
  .pl-abrir:focus-visible, .pl-guia-link:focus-visible{outline:3px solid var(--kincha);outline-offset:2px;}
  .pl-mini{flex:0 0 auto;width:64px;height:44px;}
  .pl-mini path{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;}
  .pl-mini circle{fill:var(--papel);stroke:var(--sumi);stroke-width:1.8;}
  .pl-mini .pl-mini-inter{stroke-width:2.6;}
  .pl-abrir-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .pl-abrir-t b{font-size:1.06rem;font-weight:700;color:var(--ai-deep);line-height:1.25;}
  .pl-abrir-t b span{font-family:'Shippori Mincho',serif;color:var(--shu);margin-right:4px;}
  .pl-abrir-t small{font-size:.78rem;color:var(--gris-osc);line-height:1.35;}
  .pl-abrir-ir{flex:0 0 auto;font-size:1.35rem;color:var(--ai);transition:transform .15s;}
  .pl-guia-link{border:0;background:none;cursor:pointer;padding:4px 8px;font-family:'Zen Maru Gothic',sans-serif;font-size:.84rem;color:var(--shu-deep);
    text-decoration:underline;text-underline-offset:3px;border-radius:6px;}
  .pl-guia-link span{font-family:'Shippori Mincho',serif;font-weight:700;margin-right:3px;}
  .pl-acceso .pl-ley{align-self:stretch;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:2px -16px 0;padding:2px 16px 4px;}
  .pl-acceso .pl-ley::-webkit-scrollbar{display:none;}
  .pl-acceso .pl-sim{display:none;}
  .pl-ley{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'Zen Maru Gothic',sans-serif;}
  .pl-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:999px;background:var(--papel);
    border:1.5px solid color-mix(in srgb, var(--tc) 45%, var(--line));font-size:.8rem;color:var(--sumi);}
  .pl-chip > i{font-style:normal;font-family:'Shippori Mincho',serif;font-weight:700;width:22px;height:22px;border-radius:6px;background:var(--tc);color:var(--sobre-linea);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;}
  .pl-chip b{font-weight:500;}
  .pl-chip-n{font-size:.72rem;color:var(--gris-osc);}
  .pl-chip-bar{width:40px;height:4px;border-radius:3px;background:var(--line-cl);overflow:hidden;}
  .pl-chip-bar span{display:block;height:100%;background:var(--tc);}
  .pl-sim{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--gris-osc);}
  .pl-sim svg{width:16px;height:16px;}
  .pl-sim-inter{fill:var(--papel);stroke:var(--sumi);stroke-width:2.2;}
  .pl-sim-exp{font-family:'Shippori Mincho',serif;font-size:.7rem;color:var(--papel);background:var(--kincha);border-radius:8px;padding:1px 6px;}
  /* El dibujo del plano */
  .pl-svg{display:block;width:100%;height:auto;font-family:'Zen Maru Gothic',sans-serif;}
  .pl-linea{fill:none;stroke:color-mix(in srgb, var(--lc) var(--via-pct), var(--papel));stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
  .pl-linea.is-done{stroke:var(--lc);}
  .pl-linea.is-skipped{stroke:var(--lc);stroke-width:5;stroke-dasharray:.5 9;}
  .pl-pasillo{fill:none;stroke:var(--sumi);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;}
  .pl-trans-borde{fill:none;stroke:var(--papel);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;}
  .pl-trans-via{fill:none;stroke:var(--tc);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.42;}
  .pl-trans.is-started .pl-trans-via{opacity:.85;}
  .pl-st{cursor:pointer;}
  .pl-hit{fill:transparent;}
  .pl-dot{fill:var(--papel);stroke:color-mix(in srgb, var(--lc) calc(var(--via-pct) + 10%), var(--papel));stroke-width:2;}
  .pl-st.is-done .pl-dot{stroke:var(--lc);stroke-width:2.4;}
  .pl-st.is-skipped .pl-dot{stroke:var(--lc);stroke-dasharray:2 2;}
  .pl-st.is-inter .pl-dot{stroke:var(--sumi);stroke-width:2.4;}
  .pl-st.is-inter:not(.is-done) .pl-dot{stroke:color-mix(in srgb, var(--sumi) 55%, var(--papel));}
  @media (hover:hover){ .pl-st:hover .pl-dot{stroke-width:3.6;stroke:var(--shu);} }
  .pl-badge{cursor:pointer;outline:none;}
  .pl-badge circle{fill:var(--lc);stroke:var(--papel);stroke-width:3;}
  .pl-badge:not(.is-started):not(.is-done):not(.is-current) circle{fill:color-mix(in srgb, var(--lc) 55%, var(--papel));}
  .pl-badge.is-current circle{stroke:var(--shu);stroke-width:3.5;}
  .pl-badge.is-done circle{stroke:var(--kincha);}
  .pl-badge:focus-visible circle{stroke:var(--kincha);stroke-width:5;}
  .pl-badge-kj{fill:var(--sobre-linea);font-family:'Shippori Mincho',serif;font-weight:700;font-size:14px;text-anchor:middle;}
  .pl-badge-name{font-size:12.5px;font-weight:500;fill:var(--sumi);paint-order:stroke;stroke:var(--papel);stroke-width:4px;stroke-linejoin:round;}
  @media (hover:hover){ .pl-badge:hover .pl-badge-name{fill:var(--shu);} }
  .pl-tbadge rect{fill:var(--tc);stroke:var(--papel);stroke-width:2.5;}
  .pl-tbadge text{fill:var(--sobre-linea);font-family:'Shippori Mincho',serif;font-weight:700;font-size:13px;text-anchor:middle;}
  .pl-here{cursor:pointer;}
  .pl-here-dot{fill:var(--shu);stroke:var(--papel);stroke-width:3;}
  .pl-here-pulso{fill:var(--shu);opacity:.25;}
  .pl-here rect{fill:var(--shu);}
  .pl-here text{fill:var(--papel);font-family:'Shippori Mincho',serif;font-weight:700;font-size:11.5px;text-anchor:middle;letter-spacing:.06em;}
  @media (prefers-reduced-motion:no-preference){
    .pl-here-pulso{animation:pl-pulso 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
    @keyframes pl-pulso{0%,100%{transform:scale(1);opacity:.28;} 50%{transform:scale(2.1);opacity:0;}}
  }
  /* A pantalla entera: se arrastra (o se desplaza) para moverse por el plano */
  body.pl-abierto{overflow:hidden;}
  .pl-over{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--washi);}
  /* Barra de arriba: las pestañas (路線図 Plano · 案内 Cómo funciona) en el centro y «Cerrar» a la derecha */
  .pl-over-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--line);
    font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);background:var(--papel);}
  .pl-over-top .pl-tabs{grid-column:2;}
  .pl-over-top .btn{grid-column:3;justify-self:end;padding:7px 16px;min-width:0;}
  .pl-cerrar-x{display:none;}
  .pl-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--washi);}
  .pl-tabs button{border:0;background:transparent;border-radius:10px;padding:8px 16px;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;font-size:.95rem;color:var(--gris-osc);white-space:nowrap;}
  .pl-tabs button b{font-family:'Shippori Mincho',serif;font-weight:700;font-size:1.02rem;margin-right:5px;color:color-mix(in srgb, var(--shu) 82%, var(--sumi));}   /* contraste AA */
  .pl-tabs button[aria-selected="true"]{background:var(--ai);color:var(--washi);}
  .pl-tabs button[aria-selected="true"] b{color:inherit;}
  .pl-tabs button:focus-visible{outline:3px solid var(--kincha);outline-offset:1px;}
  /* En el móvil no cabe «Cerrar» con las pestañas centradas: se queda en una ✕ */
  @media (max-width:599px){
    .pl-over-top{gap:6px;padding-left:10px;padding-right:10px;}
    .pl-over-top .btn{padding:6px 10px;}
    .pl-cerrar-t{display:none;} .pl-cerrar-x{display:inline;font-size:1rem;line-height:1;}
    .pl-tabs button{padding:7px 9px;font-size:.86rem;}
    .pl-tabs button b{font-size:.95rem;margin-right:4px;}
  }
  @media (max-width:360px){ .pl-tabs button{padding:6px 7px;font-size:.8rem;} .pl-tabs button b{font-size:.9rem;} }
  .pl-vista{flex:1;min-height:0;display:flex;flex-direction:column;}
  .pl-vista[hidden]{display:none;}
  /* El aviso: lleva a la pestaña 案内 */
  .pl-aviso{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;
    background:color-mix(in srgb, var(--kincha) 14%, var(--papel));color:var(--sumi);font-family:'Zen Maru Gothic',sans-serif;font-size:.84rem;line-height:1.4;}
  .pl-aviso b{font-weight:700;}
  .pl-aviso-i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--kincha);color:var(--papel);display:inline-flex;align-items:center;justify-content:center;
    font-family:'Noto Serif',serif;font-style:italic;font-weight:700;}
  .pl-aviso-ir{margin-left:auto;font-size:1.2rem;color:var(--kincha-osc);}
  .pl-aviso:focus-visible{outline:3px solid var(--kincha);outline-offset:-3px;}
  .pl-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;}
  .pl-scroll .pl-svg{width:1200px;max-width:none;margin:0 auto;}
  .pl-scroll .pl-svg.is-vertical{width:100%;max-width:520px;}   /* móvil: ocupa el ancho y se baja con scroll */
  .pl-scroll:has(.is-vertical){overflow-x:hidden;}
  @media (min-width:1240px){ .pl-scroll .pl-svg{width:min(100%, 1500px);} }
  .pl-vista > .pl-ley{padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--papel);flex-wrap:nowrap;overflow-x:auto;}
  /* La guía (案内): cómo funciona el plano */
  .pl-vista-guia{overflow:auto;-webkit-overflow-scrolling:touch;}
  .pl-guia{max-width:720px;margin:0 auto;padding:22px 18px calc(40px + env(safe-area-inset-bottom));font-family:'Zen Maru Gothic',sans-serif;color:var(--sumi);line-height:1.6;}
  .pl-guia h2{margin:0 0 8px;font-family:'Shippori Mincho',serif;font-size:1.55rem;color:var(--ai-deep);text-wrap:balance;}
  .pl-guia h2 span{color:var(--shu);margin-right:6px;}
  .pl-guia section{margin-top:24px;padding-top:18px;border-top:1px dashed var(--line);}
  .pl-guia h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:'Shippori Mincho',serif;font-size:1.18rem;color:var(--ai-deep);}
  .pl-guia h3 i{font-style:normal;min-width:32px;height:30px;padding:0 6px;border-radius:7px;background:var(--sumi);color:var(--papel);display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;}
  .pl-guia p{margin:0 0 8px;font-size:.95rem;max-width:62ch;}
  .pl-g-lead{font-size:1rem!important;color:var(--gris-osc);}
  .pl-g-num{white-space:nowrap;}
  .pl-g-kj{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:3px solid var(--lc);background:var(--papel);color:var(--lc);
    font-family:'Shippori Mincho',serif;font-size:.72rem;vertical-align:middle;}
  .pl-g-sim, .pl-g-trans, .pl-g-rec{list-style:none;padding:0;margin:10px 0 0;}
  .pl-g-sim{display:grid;gap:12px;}
  .pl-g-sim li{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;}
  .pl-g-dot{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:4px solid var(--linea-2);background:var(--papel);display:flex;align-items:center;justify-content:center;
    font-family:'Shippori Mincho',serif;font-weight:700;font-size:.85rem;color:color-mix(in srgb, var(--linea-2) 70%, var(--sumi));}
  .pl-g-dot.is-done{background:var(--linea-2);color:var(--sobre-linea);}
  .pl-g-tag{flex:0 0 auto;align-self:flex-start;background:var(--shu);color:var(--papel);border-radius:6px;padding:2px 7px;font-family:'Shippori Mincho',serif;font-weight:700;font-size:.8rem;font-style:normal;line-height:1.5;}
  .pl-g-tag.is-new{background:var(--tinte-papel);color:var(--kincha);border:1.5px solid var(--kincha);}
  .pl-g-tipos{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
  .pl-g-tipos span{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border:1px solid var(--line);border-radius:999px;background:var(--papel);font-size:.8rem;}
  .pl-g-tipos i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--washi-deep);display:inline-flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-weight:700;font-size:.72rem;}
  .pl-g-trans{display:grid;gap:10px;}
  .pl-g-trans li{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1.5px solid color-mix(in srgb, var(--tc) 40%, var(--line));border-radius:12px;background:var(--papel);font-size:.9rem;}
  .pl-g-trans i{flex:0 0 auto;font-style:normal;width:30px;height:30px;border-radius:7px;background:var(--tc);color:var(--sobre-linea);display:inline-flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-weight:700;}
  .pl-g-trans small{display:block;margin-top:3px;color:var(--gris-osc);font-size:.78rem;}
  .pl-g-exp{font-family:'Shippori Mincho',serif;font-size:.78rem;color:var(--sumi);background:color-mix(in srgb, var(--kincha) 30%, var(--papel));border:1px solid var(--kincha);border-radius:8px;padding:1px 6px;}
  /* El recorrido completo, como el plano de una sola línea que hay encima de las puertas del vagón */
  .pl-g-rec li{position:relative;}
  .pl-g-rec li:not(:last-child)::before{content:"";position:absolute;left:28px;top:30px;height:100%;width:6px;background:var(--lc);border-radius:3px;}
  .pl-g-rec button{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:100%;padding:7px 8px;border:0;border-radius:10px;background:none;cursor:pointer;
    text-align:left;font-family:inherit;color:inherit;}
  @media (hover:hover){ .pl-g-rec button:hover{background:color-mix(in srgb, var(--papel) 80%, transparent);} .pl-g-rec button:hover b{color:var(--shu);} }
  .pl-g-rec button:focus-visible{outline:3px solid var(--kincha);outline-offset:1px;}
  .pl-g-rec i{flex:0 0 auto;font-style:normal;width:36px;height:36px;margin-left:3px;border-radius:50%;border:4px solid var(--lc);background:var(--papel);color:var(--lc);
    display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-weight:700;}
  .pl-g-rec li.is-done i{background:var(--lc);color:var(--sobre-linea);}
  .pl-g-rec li.is-current i{box-shadow:0 0 0 3px var(--papel), 0 0 0 5.5px var(--shu);}
  .pl-g-rec span{flex:1;min-width:0;display:flex;flex-direction:column;}
  .pl-g-rec b{font-weight:600;font-size:.95rem;}
  .pl-g-rec small{font-size:.76rem;color:var(--gris-osc);}
  .pl-g-rec em{flex:0 0 auto;font-style:normal;font-size:.8rem;color:var(--gris-osc);font-variant-numeric:tabular-nums;}
  .pl-g-rec em.pl-g-tag{color:var(--papel);}

  /* ===== Ordenador: el camino a lo ancho ===== */
  @media (min-width:1000px){
    body.plano-ancho .wrap{max-width:1240px;}
    body.plano-ancho .today{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:stretch;}
    body.plano-ancho .today-next{height:100%;}
    body.plano-ancho .today-lado{margin:0;padding:14px 20px;gap:12px;}
    body.plano-ancho .today-lado .sem-d{width:34px;height:34px;}
    body.plano-ancho .today-lado .sem-d svg{width:34px;height:34px;}
    body.plano-ancho .pl-acceso{margin:6px 0 20px;}
    body.plano-ancho .pl-abrir{max-width:620px;padding:14px 20px;}
    body.plano-ancho .pl-abrir-t b{font-size:1.15rem;}
    body.plano-ancho .pl-acceso .pl-ley{align-self:center;justify-content:center;margin:4px 0 0;padding:0;flex-wrap:wrap;overflow:visible;}
    body.plano-ancho .pl-acceso .pl-sim{display:inline-flex;}
    /* Las líneas cerradas, en rejilla; la abierta ocupa toda la fila */
    body.plano-ancho #path{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;align-items:start;}
    body.plano-ancho #path .unit{margin-top:0;}
    body.plano-ancho #path .unit:not(.is-closed){grid-column:1 / -1;}
    body.plano-ancho .metro-transfer{margin-left:12px;}
    body.plano-ancho .unit-acts{flex-direction:row;}
    body.plano-ancho .unit:not(.is-closed) .unit-head:has(.unit-acts) .unit-txt{padding-right:220px;}
    body.plano-ancho .path-bar-t{visibility:hidden;}
  }
  @media (min-width:1000px) and (max-width:1199px){ body.plano-ancho #path{grid-template-columns:repeat(2, minmax(0,1fr));} }
  @media (min-width:1200px){
    body.plano-ancho .metro-wrap ol.metro{grid-template-columns:repeat(6, minmax(0,1fr));grid-auto-rows:minmax(132px, auto);row-gap:6px;padding:20px 74px 18px;}
    body.plano-ancho .metro-wrap ol.metro .st{grid-row:var(--r6);grid-column:var(--c6);}
    body.plano-ancho .metro-wrap .metro .fin4 .st-here, body.plano-ancho .metro-wrap .metro .fin4 .st-new{left:calc(50% + 26px);right:auto;}
    body.plano-ancho .metro-wrap .metro .fin6 .st-here, body.plano-ancho .metro-wrap .metro .fin6 .st-new{left:auto;right:calc(50% + 26px);}
  }
  /* Repaso de hoy: barra de la tanda y sello 済 «hecho» */
  .rv-barra{width:min(260px,80%);height:8px;margin:2px auto 12px;border-radius:4px;background:var(--line);overflow:hidden;}
  .rv-barra div{height:100%;background:var(--matcha);border-radius:4px;}
  .rv-hecho{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px;font-family:'Zen Maru Gothic',sans-serif;}
  .rv-hecho b{font-size:1.1rem;color:var(--ai-deep);}
  .rv-sello{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:3px solid var(--shu);border-radius:12px;
    color:var(--shu);font-family:'Shippori Mincho',serif;font-size:2.2rem;transform:rotate(-8deg);}
  .rv-hecho-fin{flex-direction:row;justify-content:center;gap:14px;max-width:420px;margin:6px auto 10px;text-align:left;font-size:.92rem;color:var(--gris-osc);}
  .rv-hecho-fin .rv-sello{flex:none;animation:rv-sellar .45s cubic-bezier(.3,1.6,.6,1) .3s both;}
  @keyframes rv-sellar{from{transform:scale(1.8) rotate(-8deg);opacity:0;}to{transform:scale(1) rotate(-8deg);opacity:1;}}
  @media (prefers-reduced-motion:reduce){ .rv-hecho-fin .rv-sello{animation:none;} }
  /* «Tus confusiones»: barra de cada pareja (se llena según las separas) y las ya superadas */
  .conf-par{display:inline-flex;flex-direction:column;align-items:center;gap:5px;}
  .conf-barra{display:block;width:72px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;}
  .conf-barra i{display:block;height:100%;background:var(--matcha);border-radius:3px;transition:width .4s ease;}
  .conf-progreso{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:10px;}
  .conf-progreso .conf-barra{width:min(220px,70%);height:8px;}
  .conf-progreso small{font-size:.8rem;color:var(--gris);}
  .conf-fila{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0;font-size:1.2rem;}
  .conf-fila .conf-barra{width:140px;height:8px;}
  .conf-sup{margin:12px 0 0;font-size:.85rem;color:var(--gris-osc);}
  .conf-sup span{margin-right:4px;} .conf-sup b{display:inline-block;margin:0 4px;font-weight:400;color:var(--matcha);}

  /* =====================================================================
     BIENVENIDA «KOMOREBI» (js/motor/escenas.js · Bienvenida): luz entre las hojas
     ===================================================================== */
  .bv{position:fixed;inset:0;z-index:1000;overflow:hidden;background:var(--bosque);cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .bv-copa{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 0;animation:bv-mecer 3.2s ease-in-out infinite alternate;}
  .bv-copa path{fill:var(--hoja-bosque);}
  .bv-rayos{position:absolute;inset:-20% -20% 0 -20%;opacity:0;animation:bv-aparece 1.8s ease-out .35s forwards;}
  .bv-rayo{position:absolute;top:0;width:9%;height:140%;transform-origin:50% 0;transform:rotate(22deg);
    background:linear-gradient(to bottom, color-mix(in srgb, var(--luz-sol) 55%, transparent), transparent 85%);}
  .bv-motas{position:absolute;inset:0;}
  .bv-mota{position:absolute;border-radius:50%;opacity:0;animation:bv-mota 2.6s ease-in-out forwards;
    background:radial-gradient(circle, color-mix(in srgb, var(--luz-sol) 85%, transparent), transparent 70%);}
  .bv-sol{position:absolute;left:72%;top:6%;width:10vmin;height:10vmin;margin:-5vmin;border-radius:50%;background:var(--washi);transform:scale(0);
    animation:bv-sol 1.1s cubic-bezier(.6,0,.3,1) 2.05s forwards;}
  .bv-marca{position:absolute;left:0;right:0;top:44%;text-align:center;font-family:'Shippori Mincho',serif;color:var(--sumi);opacity:0;animation:bv-subir .9s ease-out 2.55s forwards;}
  .bv-nombre{font-size:clamp(2rem, 9.5vmin, 4.5rem);font-weight:700;letter-spacing:.04em;line-height:1;}
  .bv-kj{font-size:clamp(.8rem, 3.6vmin, 1.6rem);letter-spacing:.5em;padding-left:.5em;color:var(--shu);margin-top:2vmin;}
  .bv-desc{font-family:'Zen Maru Gothic',sans-serif;font-size:clamp(.75rem, 3vmin, 1.1rem);color:var(--gris);margin-top:1.4vmin;}
  .bv-saltar{position:absolute;right:calc(14px + env(safe-area-inset-right, 0px));top:calc(14px + env(safe-area-inset-top, 0px));z-index:2;font:inherit;font-size:.85rem;
    border:1px solid color-mix(in srgb, var(--papel) 40%, transparent);background:color-mix(in srgb, var(--papel) 70%, transparent);color:var(--sumi);border-radius:999px;padding:6px 14px;cursor:pointer;}
  .bv-saltar:focus-visible{outline:3px solid var(--kincha);outline-offset:2px;}
  .bv.bv-fuera{animation:bv-fuera .6s ease forwards;pointer-events:none;}
  .bv.bv-corta *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;}
  @keyframes bv-mecer{from{transform:rotate(-1.2deg);}to{transform:rotate(1.2deg);}}
  @keyframes bv-aparece{to{opacity:1;}}
  @keyframes bv-mota{0%{opacity:0;transform:translate(0,0) scale(.6);}45%{opacity:1;}100%{opacity:.85;transform:translate(var(--dx),2vmin) scale(1);}}
  @keyframes bv-sol{to{transform:scale(64);}}   /* que llegue a todas las esquinas, también en móviles altos */
  @keyframes bv-subir{from{opacity:0;transform:translateY(2.5vmin);}to{opacity:1;transform:none;}}
  @keyframes bv-fuera{to{opacity:0;visibility:hidden;}}

  /* ===== Aparecer al hacer scroll («tinta»): js/motor/camino.js → Aparecer =====
     Lo que entra en pantalla sube un poco y pasa de borroso a nítido. En las estaciones, el punto crece desde
     su centro (no se mueve, así la vía sale en su sitio) y el cartel sube. */
  @media (prefers-reduced-motion:no-preference){
    .ap:not(.st){opacity:0;transform:translateY(18px);filter:blur(3px);}
    .ap:not(.st).ap-on{opacity:1;transform:none;filter:none;
      transition:opacity .8s ease var(--ap-d,0s), transform .9s cubic-bezier(.2,.7,.15,1) var(--ap-d,0s), filter .8s ease var(--ap-d,0s);}
    .st.ap .st-dot{opacity:0;transform:scale(.55);}
    .st.ap .st-body{opacity:0;transform:translateY(14px);filter:blur(3px);}
    .st.ap .st-here, .st.ap .st-new{opacity:0;}
    .st.ap.ap-on .st-dot{opacity:1;transform:none;transition:opacity .6s ease var(--ap-d,0s), transform .7s cubic-bezier(.3,1.4,.5,1) var(--ap-d,0s);}
    .st.ap.ap-on .st-body{opacity:1;transform:none;filter:none;
      transition:opacity .8s ease calc(var(--ap-d,0s) + .12s), transform .9s cubic-bezier(.2,.7,.15,1) calc(var(--ap-d,0s) + .12s), filter .8s ease calc(var(--ap-d,0s) + .12s);}
    .st.ap.ap-on .st-here, .st.ap.ap-on .st-new{opacity:1;transition:opacity .5s ease calc(var(--ap-d,0s) + .5s);}
  }
  /* Aviso sin bloqueo al empezar «Presentarte» si los kana aún cuestan (js/motor/camino.js · avisoKana) */
  .aviso-kana p{margin:12px 0 0;}
  .aviso-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
  .aviso-acts .btn{flex:1 1 200px;}

  /* ===== Paso entre ejercicios (js/motor/app.js → pasarEjercicio) =====
     El ejercicio que acabas sube y se va; el siguiente entra desde abajo. Rápido, solo para acompañar el cambio. */
  @media (prefers-reduced-motion:no-preference){
    .card.ej-sale, .next-row.ej-sale{animation:ej-sale .15s cubic-bezier(.5,0,.9,.6) forwards;pointer-events:none;}
    .card.ej-entra{animation:ej-entra .24s cubic-bezier(.2,.8,.25,1);}
  }
  @keyframes ej-sale{to{opacity:0;transform:translateY(-40px);}}
  @keyframes ej-entra{from{opacity:0;transform:translateY(40px);}}

  /* ===== Movimiento (js/motor/movimiento.js): una misma forma de moverse en toda la app =====
     Una curva con un pequeño rebote (muelle), una suave, y tres duraciones. Nada si el sistema pide reducir movimiento. */
  :root{--curva-muelle:cubic-bezier(.34,1.56,.64,1); --curva-suave:cubic-bezier(.2,.8,.2,1); --dur-rapida:.16s; --dur-media:.26s; --dur-lenta:.42s;}
  @media (prefers-reduced-motion:no-preference){
    /* Opciones de respuesta: la correcta late, la elegida mal tiembla, las demás se retiran */
    .opt-btn.opt-latido{animation:mv-latido .42s var(--curva-muelle);}
    .opt-btn.opt-tiembla{animation:mv-tiembla .32s ease-in-out;}
    .opt-btn.opt-retira{animation:mv-retira var(--dur-media) var(--curva-suave) forwards;}
    /* Rōmaji → kana: el rōmaji sube y se va, el kana entra letra a letra */
    .fill-row{position:relative;}
    .fill-row.rk-anim textarea, .fill-row.rk-anim input{color:transparent;}
    .rk-capa{position:absolute;pointer-events:none;display:flex;align-items:center;white-space:nowrap;overflow:hidden;box-sizing:border-box;}
    .rk-capa > span{position:absolute;display:flex;}
    .rk-romaji span{display:inline-block;color:var(--gris-osc);animation:mv-rk-sale .26s ease-in calc(var(--i) * 18ms) forwards;}
    .rk-kana span{display:inline-block;color:var(--sumi);opacity:0;animation:mv-rk-entra .34s var(--curva-muelle) calc(140ms + var(--i) * 45ms) forwards;}
    /* Estación → lección: el punto de la estación se convierte en la tarjeta (View Transitions) */
    /* Ida: la tarjeta crece desde el punto de la estación (redonda al principio). Vuelta: se encoge hasta su estación. */
    ::view-transition-group(leccion){animation-duration:.44s;animation-timing-function:var(--curva-suave);}
    ::view-transition-old(leccion), ::view-transition-new(leccion){height:100%;width:100%;object-fit:cover;}
    html.vt-ida::view-transition-image-pair(leccion){animation:mv-vt-abre .44s var(--curva-suave) both;}
    html.vt-ida::view-transition-old(leccion){animation:none;opacity:0;}
    html.vt-ida::view-transition-new(leccion){animation:mv-vt-dentro .14s linear both;}
    html.vt-vuelta::view-transition-image-pair(leccion){animation:mv-vt-cierra .44s var(--curva-suave) both;}
    html.vt-vuelta::view-transition-old(leccion){animation:mv-vt-fuera .16s linear .26s both;}
    html.vt-vuelta::view-transition-new(leccion){animation:mv-vt-dentro .16s linear .26s both;}
    ::view-transition-old(root){animation:mv-vt-fuera .22s ease-out both;}
    ::view-transition-new(root){animation:mv-vt-dentro .28s var(--curva-suave) .05s both;}
  }
  @keyframes mv-latido{0%{scale:1;}40%{scale:1.035;}100%{scale:1;}}
  @keyframes mv-tiembla{0%,100%{translate:0;}25%{translate:-5px 0;}55%{translate:4px 0;}80%{translate:-2px 0;}}
  @keyframes mv-retira{to{opacity:.45;scale:.975;}}
  @keyframes mv-rk-sale{to{opacity:0;transform:translateY(-10px);filter:blur(2px);}}
  @keyframes mv-rk-entra{from{opacity:0;transform:translateY(10px) scale(.8);}to{opacity:1;transform:none;}}
  @keyframes mv-vt-fuera{to{opacity:0;}}
  @keyframes mv-vt-abre{from{clip-path:inset(0 round 999px);}to{clip-path:inset(0 round 14px);}}
  @keyframes mv-vt-cierra{from{clip-path:inset(0 round 14px);}to{clip-path:inset(0 round 999px);}}
  @keyframes mv-vt-dentro{from{opacity:0;}}

  /* ===== Lecciones dominadas, en dorado (90 % o más; Camino.dominada) =====
     Un anillo dorado alrededor de la estación y el marco de su cartel en dorado. El dorado es --rc-oro: cambia con cada tema. */
  .st.is-oro .st-dot{box-shadow:0 0 0 2.5px var(--papel), 0 0 0 5px var(--rc-oro), 0 0 12px color-mix(in srgb, var(--rc-oro) 55%, transparent);}
  .st.is-oro .st-body{border-color:var(--rc-oro);box-shadow:0 0 0 1px var(--rc-oro), 0 1px 8px color-mix(in srgb, var(--rc-oro) 35%, transparent);}
  .metro-wrap .metro .st.is-oro .st-body{border-color:var(--rc-oro);box-shadow:0 0 0 1px var(--rc-oro), 0 1px 8px color-mix(in srgb, var(--rc-oro) 35%, transparent);}
  .tl li.is-oro .tl-dot{box-shadow:0 0 0 2px var(--papel), 0 0 0 4px var(--rc-oro);}
  .unit-oro{color:color-mix(in srgb, var(--rc-oro) 75%, var(--sumi));font-weight:700;white-space:nowrap;}
  .unit-head .unit-oro{color:color-mix(in srgb, var(--rc-oro) 45%, var(--papel));}   /* sobre la cabecera de color, un dorado claro que se lea */
  .unit-oro i{font-style:normal;font-family:'Shippori Mincho',serif;}
  .unit.is-oro .unit-kj{box-shadow:0 0 0 2.5px var(--papel), 0 0 0 5px var(--rc-oro);}
  .pl-st.is-oro .pl-dot{stroke:var(--rc-oro);stroke-width:3;}
  .pl-badge.is-oro circle{stroke:var(--rc-oro);}
  .pl-g-dot.is-oro{box-shadow:0 0 0 2px var(--papel), 0 0 0 4px var(--rc-oro);}
  .oro-nota, .results .oro-nota{display:flex;align-items:center;gap:12px;margin:4px auto 14px;max-width:480px;box-sizing:border-box;padding:10px 14px;text-align:left;border:1.5px solid var(--rc-oro);border-radius:12px;
    background:color-mix(in srgb, var(--rc-oro) 10%, var(--papel));}
  .oro-nota span:last-child{display:flex;flex-direction:column;gap:1px;font-size:.88rem;color:var(--gris);}
  .oro-nota b{color:var(--sumi);font-size:.98rem;}
  .oro-sello{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-weight:700;font-size:1.15rem;
    color:var(--papel);background:var(--rc-oro);box-shadow:0 0 0 2px var(--papel), 0 0 0 4px var(--rc-oro);}
  @media (prefers-reduced-motion:no-preference){ .oro-nota .oro-sello{animation:oro-brilla 1.6s ease-out 1;} }
  @keyframes oro-brilla{0%{transform:scale(.6);opacity:0;} 45%{transform:scale(1.12);opacity:1;} 100%{transform:scale(1);}}

  /* Nombres propios con su kana en el enunciado (app.js · nombresConKana) */
  .q-nombre{font-size:.92em;color:var(--ai);white-space:nowrap;}