/* ==========================================================================
   PÁGINA DE NIVEL (/level/?n=): cabecera con número enorme y hanko, fachada
   de vídeo, «Today’s 30 minutes», guardián, palabras, trampa y mini test.
   ========================================================================== */

.lvl { padding-bottom: 20px; }
.lv-loading { padding: 120px 0; text-align: center; font: 700 18px/1 var(--f-display); color: var(--ink-soft); }
.lv-loading .jp { display: inline-block; font-size: 28px; animation: wobble .8s ease-in-out infinite; }
/* contenido escrito en el HTML de /level/N/ (prerender_niveles.py) para los buscadores: con JS no se ve ni ocupa
   sitio (como .sr-only; level.js lo sustituye al cargar, así que la página no salta) y sin JS lo enseña el <noscript> */
.lv-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lv-pre .lv-sec { padding: 18px 0; }
.lv-pre table { border-collapse: collapse; } .lv-pre td, .lv-pre th { padding: 4px 10px 4px 0; text-align: left; }
.sec-h { margin: 0 0 18px; }
.sub-h { margin: 28px 0 12px; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.sub-h:empty { display: none; }
.sub-h small { display: inline-block; font: 700 12px/1.2 var(--f-display); letter-spacing: .14em; color: var(--ink-soft); margin-left: 10px; } /* «tap for audio…» salta de línea entero, no a trozos */
/* el japonés de los títulos no se parte a mitad de palabra (jpWrap en level.js) */
.jw { white-space: nowrap; }
@media (max-width: 560px) { .sub-h small { display: block; margin: 5px 0 0; } }
.lv-sec { margin-top: clamp(44px, 7vw, 80px); }
.say-sm {
  flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--gold-2); box-shadow: var(--shadow-sm); cursor: pointer; font-size: 14px;
  transition: transform .12s;
}
.say-sm:hover { transform: scale(1.1) rotate(-6deg); }

/* ---------- cabecera ---------- */
.lv-hero {
  position: relative; overflow: hidden; border-bottom: var(--line) solid var(--ink);
  background:
    radial-gradient(circle at 12% 60%, color-mix(in srgb, var(--rk) 22%, transparent) 0 18%, transparent 46%),
    repeating-conic-gradient(from 0deg at 14% 62%, color-mix(in srgb, var(--rk) 9%, transparent) 0 6deg, transparent 6deg 14deg),
    var(--paper-2);
}
.lv-hero::after { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: 7px 7px; opacity: .35; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent 40%, #000); mask: linear-gradient(90deg, transparent 40%, #000); }
.lv-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding-top: clamp(26px, 4vw, 52px); padding-bottom: clamp(26px, 4vw, 52px); }
.lv-num-wrap { position: relative; }
.lv-num {
  display: block; font: 900 clamp(120px, 20vw, 230px)/.82 var(--f-display); letter-spacing: -.06em;
  color: var(--paper); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 8px 8px 0 var(--ink); animation: numIn .7s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes numIn { from { transform: translateY(30px) rotate(-6deg) scale(.8); opacity: 0; } }
.lv-rank small { font-size: max(11px, calc(var(--s, 64px) * .15)); letter-spacing: .08em; }
.lv-rank { position: absolute; z-index: 2; filter: none; box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 6px var(--paper), 3px 3px 0 var(--ink); right: -12px; bottom: -10px; animation: slam .55s .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.lv-cleared {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-14deg); opacity: 0; pointer-events: none;
  padding: 6px 14px; border: 5px double var(--seal); border-radius: 10px; color: var(--seal); background: rgba(255,253,247,.6);
  font: 900 clamp(22px, 3.4vw, 34px)/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; filter: url(#rough);
}
.lv-cleared.is-on { opacity: .95; }
.lv-cleared.is-slam { animation: clearSlam .6s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes clearSlam { 0% { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; } 100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: .95; } }
.lv-head { min-width: 0; }
.lv-title { font-size: clamp(32px, 5vw, 60px); margin: 10px 0 12px; text-wrap: balance; }
.lv-head .lead { margin-bottom: 14px; }
.lv-tags { gap: 8px; }
.lv-hero-art { position: relative; width: clamp(150px, 20vw, 250px); height: clamp(170px, 22vw, 270px); }
.lv-hero-art .sticker { position: absolute; width: auto; }
.lv-st1 { height: 92%; right: 30%; bottom: 0; animation: floaty 4.2s ease-in-out infinite; }
.lv-st2 { height: 66%; right: -6%; bottom: -4%; animation: floaty 4.8s ease-in-out .7s infinite; }
@media (max-width: 900px) {
  .lv-hero-in { grid-template-columns: auto 1fr; }
  .lv-hero-art { display: none; }
}
@media (max-width: 600px) {
  .lv-hero-in { grid-template-columns: 1fr; gap: 6px; }
  .lv-num-wrap { justify-self: start; }
  .lv-num { -webkit-text-stroke-width: 4px; text-shadow: 6px 6px 0 var(--ink); }
  .lv-rank { right: -48px; bottom: 6px; }
}

/* ---------- aviso de puerta ---------- */
.gate-notice {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 22px; padding: 12px 16px;
  background: var(--white); border: var(--line) solid var(--ink); border-left: 12px solid var(--g); border-radius: 18px; box-shadow: var(--shadow);
  animation: popin .4s ease both; transition: opacity .35s, transform .35s;
}
.gate-notice img { width: 64px; height: 64px; object-fit: contain; }
.gate-notice p { margin: 0; font-size: 15.5px; }
.gate-notice.is-gone { opacity: 0; transform: translateX(40px); }
@media (max-width: 700px) { .gate-notice { grid-template-columns: auto 1fr; } .gate-notice .row { grid-column: 1 / -1; } }

/* ---------- vídeo + hoy ---------- */
.lv-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 30px); margin-top: clamp(24px, 4vw, 44px); align-items: start; }
@media (max-width: 1080px) { .lv-main { grid-template-columns: 1fr; } } /* por debajo, la columna de tareas quedaba tan estrecha que cada tarea ocupaba 3–4 líneas */
/* en una columna y sin vídeo publicado, primero las tareas: el cartel «Not out yet» empujaba «Today’s 30 minutes» a la segunda pantalla del móvil */
@media (max-width: 1080px) { .lv-main:has(.vid--soon) .today { order: -1; } }
.vid-frame { aspect-ratio: 16 / 9; border: var(--line-thick) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--ink); position: relative; }
.vid-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; display: block; color: inherit; }
.vid--live { cursor: pointer; background: var(--ink); }
.vid-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vid--live:hover .vid-thumb { transform: scale(1.04); }
.vid-play {
  position: absolute; left: 50%; top: 50%; width: clamp(64px, 11vw, 92px); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: var(--seal); color: var(--white); border: var(--line-thick) solid var(--ink); box-shadow: var(--shadow);
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.vid-play svg { width: 46%; margin-left: 6%; }
.vid--live:hover .vid-play { transform: translate(-50%, -50%) scale(1.12) rotate(-6deg); }
.vid-play.is-off { left: auto; right: 4%; top: auto; bottom: 6%; transform: none; width: 54px; background: var(--ink-2); opacity: .85; }
.vid-note { position: absolute; left: 10px; bottom: 8px; font: 700 11px/1.2 var(--f-display); letter-spacing: .1em; color: var(--paper); background: rgba(22,20,24,.7); padding: 6px 10px; border-radius: 6px; text-transform: uppercase; }
.vid--soon { background: color-mix(in srgb, var(--rk) 30%, var(--cream)); overflow: hidden; }
.vid-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,253,247,.55) 0 7deg, transparent 7deg 16deg); animation: kcSpin 60s linear infinite; }
.vid--soon::after { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: 7px 7px; opacity: .5; }
.vid-bignum { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font: 900 clamp(110px, 22vw, 260px)/1 var(--f-display); color: rgba(22,20,24,.08); letter-spacing: -.04em; white-space: nowrap; z-index: 1; pointer-events: none; user-select: none; }
.vid-st { position: absolute; z-index: 2; bottom: -2%; height: 74%; width: auto; }
.vid-st1 { left: 3%; animation: floaty 4s ease-in-out infinite; }
.vid-st2 { right: 3%; height: 64%; animation: floaty 4.6s ease-in-out .5s infinite; }
.vid-card {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -54%) rotate(-1.5deg); width: min(58%, 380px);
  padding: 24px 18px 16px; background: var(--white); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); text-align: center;
}
.vid-card b { display: block; font: 800 clamp(13px, 1.7vw, 17px)/1.25 var(--f-display); text-wrap: balance; }
.vid-card small { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
/* centrada con márgenes automáticos: la animación wobble pisa el transform y la descentraba */
.vid-ribbon {
  position: absolute; left: 0; right: 0; width: max-content; margin-inline: auto; top: -16px; transform: rotate(-2deg); white-space: nowrap;
  padding: 7px 16px; background: var(--seal); color: var(--white); border: 2px solid var(--ink); border-radius: 8px;
  font: 900 12px/1.1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--shadow-sm);
  animation: wobble 2.4s ease-in-out infinite;
}
@media (max-width: 520px) {
  .vid-card { width: 66%; padding: 20px 12px 12px; }
  .vid-card small { display: none; }
  .vid-st { height: 58%; }
  .vid-st2 { height: 50%; }
}
.chapters { margin-top: 14px; background: var(--white); border: 2px solid var(--ink); border-radius: 14px; padding: 10px 14px; }
.chapters summary { cursor: pointer; font: 800 14px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.chapters ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; columns: 2; }
@media (max-width: 600px) { .chapters ol { display: block; columns: 1; } }
.chapters li { break-inside: avoid; font-size: 14.5px; padding: 3px 0; }
.chapters li b { display: inline-block; min-width: 44px; font-variant-numeric: tabular-nums; color: var(--seal); }
.chapters button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.chapters button:hover { text-decoration: underline; }

/* Today’s 30 minutes */
.today { padding: 18px 16px 14px; background: var(--white); }
.today-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.today h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.today-30 { display: inline-block; color: var(--seal); transform: rotate(-4deg); }
.today-count { flex: none; font: 900 18px/1 var(--f-display); padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--gold-2); font-variant-numeric: tabular-nums; }
.today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ti {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; padding: 12px 12px 12px 10px;
  border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); transition: background-color .25s, transform .2s;
  animation: popin .4s var(--d) ease both;
}
.ti.is-on { background: #e3f6f3; }
.ti.is-on .ti-txt b { text-decoration: line-through; text-decoration-color: var(--seal); text-decoration-thickness: 3px; }
.ti.is-pop { animation: tiPop .5s cubic-bezier(.3, 1.4, .5, 1); }
.ti.is-nope { animation: shake .4s; }
@keyframes tiPop { 40% { transform: scale(1.04) rotate(-.6deg); } }
.ti-check {
  width: 36px; height: 36px; padding: 5px; border: var(--line) solid var(--ink); border-radius: 10px; background: var(--white); cursor: pointer;
  color: transparent; transition: background-color .2s, color .2s, transform .15s;
}
.ti-check:hover { transform: rotate(-6deg) scale(1.06); }
.ti-check[aria-disabled="true"] { border-style: dashed; cursor: help; }
.ti.is-on .ti-check { background: var(--seal); color: var(--white); border-style: solid; }
.ti.is-on .ti-check svg { animation: popin .35s ease both; }
.ti-ico { width: 30px; text-align: center; font: 900 20px/1 var(--f-jp); color: var(--choc); }
.ti-txt { min-width: 0; }
.ti-txt b { display: block; font: 800 15.5px/1.25 var(--f-display); }
.ti-txt small { display: block; color: var(--ink-soft); font-size: 13.5px; line-height: 1.35; margin-top: 5px; }
.ti-go { min-height: 36px; padding: 8px 14px; font-size: 12px; }
.ti-soon { font: 800 11px/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 8px; }
.today-foot { margin: 14px 0 0; font-size: 13.5px; line-height: 1.4; text-align: center; }
@media (max-width: 400px) { .ti-ico { display: none; } .ti { grid-template-columns: auto 1fr auto; } }

/* ---------- guardián ---------- */
.guardian { margin-top: clamp(44px, 7vw, 80px); background: var(--ink); color: var(--paper); border-block: var(--line) solid var(--ink); position: relative; overflow: hidden; }
.guardian::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 28% 50%, color-mix(in srgb, var(--g) 25%, transparent) 0 6deg, transparent 6deg 15deg); opacity: .6; }
.guardian-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-block: clamp(30px, 5vw, 60px); }
.g-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.g-sun { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--g); border: var(--line-thick) solid var(--paper); box-shadow: 0 0 0 10px rgba(243,236,220,.08); }
.g-full { position: relative; max-height: 440px; width: auto; filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(8px 8px 0 rgba(0,0,0,.6)); animation: floaty 5s ease-in-out infinite; }
.g-heads { position: absolute; bottom: -8px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.g-head { width: 56px; height: 56px; object-fit: contain; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; padding: 3px; animation: floaty 2.4s calc(var(--i) * .25s) ease-in-out infinite; }
.g-txt h2 { font-size: clamp(36px, 6vw, 64px); margin: 10px 0 2px; color: var(--paper); }
.g-jp { font-size: .5em; color: var(--paper); opacity: .6; margin-left: 6px; }
.g-title { font: 700 15px/1.3 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 22px; }
.g-line { color: var(--ink); max-width: 44ch; margin-bottom: 30px; font-size: 17px; }
.g-facts { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.g-facts li { padding: 10px 14px; border: 2px solid rgba(243,236,220,.4); border-radius: 14px; min-width: 96px; }
.g-facts b { display: block; font: 900 24px/1 var(--f-display); color: var(--gold-2); }
.g-facts small { display: block; font-size: 12.5px; line-height: 1.3; opacity: .85; margin-top: 6px; }
.g-cta { animation: pulse 2.2s ease-in-out infinite; }
/* puerta sin preguntas todavía: aviso en lugar de las cifras */
.g-soon-tag { margin: 0 0 24px; font-size: 15.5px; line-height: 1.5; max-width: 46ch; }
.g-soon-tag .tag { margin-right: 8px; vertical-align: 2px; color: var(--ink); } /* sin color propio heredaba el papel de .g-txt y la etiqueta salía en blanco */
.g-cta:hover { animation: none; }
@media (max-width: 800px) { .guardian-in { grid-template-columns: 1fr; } .g-art { min-height: 280px; } .g-full { max-height: 320px; } }

/* ---------- What you’ll learn ---------- */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.point { position: relative; padding: 18px 18px 16px; background: var(--white); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); animation: popin .5s var(--d) ease both; }
.point:nth-child(3n+2) { transform: rotate(.6deg); }
.point:nth-child(3n) { transform: rotate(-.5deg); }
.point .nw { white-space: nowrap; }
.point-ico { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 12px; background: var(--ink); color: var(--paper); font: 900 22px/1 var(--f-display); margin-bottom: 10px; transform: rotate(-4deg); }
.point:nth-child(2) .point-ico { background: var(--rank-e); }
.point:nth-child(3) .point-ico { background: var(--seal); }
.point:nth-child(4) .point-ico { background: var(--teal); }
.point:nth-child(5) .point-ico { background: var(--orange); color: var(--ink); }
.point:nth-child(6) .point-ico { background: var(--pink); color: var(--ink); }
.point h3 { font-size: 19px; margin-bottom: 6px; }
.point p { margin: 0; font-size: 15.5px; color: var(--ink-2); }

.vowels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.vowel {
  display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border: var(--line) solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .15s;
}
.vowel:hover { transform: translateY(-4px) rotate(-2deg); }
.vowel:active { transform: scale(.95); }
.vowel .jp { font: 900 clamp(38px, 7vw, 58px)/1 var(--f-round); }
.vowel b { font: 900 18px/1 var(--f-display); color: var(--seal); }
.vowel small { font-size: 12px; line-height: 1.3; margin-top: 2px; color: var(--ink-soft); text-align: center; }
@media (max-width: 560px) { .vowel small { display: none; } .vowels { gap: 6px; } }

.kgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 520px; }
.kt {
  display: grid; justify-items: center; padding: 8px 0 6px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); cursor: pointer;
  transition: transform .15s, background-color .2s;
}
.kt .jp { font: 900 clamp(30px, 6vw, 40px)/1.1 var(--f-round); }
/* combinaciones de dos kana (きゃ, ティ): en una columna de 1/5 a 375 px se partían en vertical */
.kt.is-pair .jp { white-space: nowrap; font-size: clamp(19px, 4.6vw, 30px); letter-spacing: -.02em; }
.kt small { font: 700 12px/1.2 var(--f-display); color: var(--ink-soft); margin-top: 2px; }
.kt:hover { transform: translateY(-3px); background: var(--cream); }
.kt.is-cur { background: var(--ink); color: var(--paper); }
.kt.is-cur small { color: var(--gold-2); }
.kdetail { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; max-width: 520px; margin-top: 12px; padding: 14px 18px; border: var(--line) solid var(--ink); border-radius: 18px; background: var(--cream); box-shadow: var(--shadow); }
.kdetail[hidden] { display: none; }
.kdetail.is-pop { animation: popin .3s ease both; }
.kd-glyph { font: 900 84px/1 var(--f-round); text-shadow: 4px 4px 0 var(--orange-2); }
.kd-r { font: 900 30px/1 var(--f-display); color: var(--seal); }
.kdetail p { margin: 6px 0 0; font-size: 15px; }
.kd-w { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kd-w .jp { font-weight: 900; font-size: 18px; }

.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); grid-auto-flow: row dense; gap: 12px; align-items: stretch; }
.wt { position: relative; background: var(--white); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; animation: popin .45s var(--d) ease both; }
.wt.is-open { box-shadow: var(--shadow); grid-column: span 2; background: var(--cream); }
.wt-face { height: 100%; align-content: start; }
.wt.is-open .wt-face { height: auto; }
.wt-face { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "jp spk" "kj kj" "r r" "en en"; gap: 2px 8px; padding: 14px 14px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.wt-face:hover .wt-jp { color: var(--seal); }
.wt-jp { grid-area: jp; font: 900 30px/1.1 var(--f-jp); transition: color .2s; }
/* la palabra va siempre en una línea (おにぎ/り o まっち/ゃ partidas no se leen): el tamaño se ajusta a su
   número de caracteres (--len) y al ancho de la ficha; 68 px = relleno + altavoz */
.wt { container-type: inline-size; }
.wt-jp { white-space: nowrap; font-size: clamp(16px, calc((100cqi - 68px) / var(--len, 3)), 30px); }
.wt-kanji { grid-area: kj; font: 700 15px/1.2 var(--f-jp); color: var(--choc-2); min-height: 18px; }
.wt-r { grid-area: r; font: 600 14px/1.2 var(--f-body); color: var(--ink-soft); }
.wt-en { grid-area: en; font: 800 15px/1.25 var(--f-display); margin-top: 4px; }
.wt-spk { grid-area: spk; width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--gold-2); font-size: 13px; }
.wt-more { padding: 0 14px 14px; border-top: 2px dashed rgba(22,20,24,.2); margin: 0 10px; padding-top: 10px; animation: popin .25s ease both; }
.wt-scripts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sc-chip { display: inline-grid; gap: 2px; padding: 5px 10px 6px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.sc-chip small { font: 800 11px/1.1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sc-chip b { font: 900 17px/1.2 var(--f-jp); }
.sc-chip--hiragana { background: #ffe6ee; }
.sc-chip--katakana { background: #e3f6f3; }
.sc-chip--kanji { background: var(--cream); }
.wt-ex { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; }
.wt-ex > span { display: grid; gap: 2px; }
.wt-ex .jp { font-weight: 700; font-size: 16px; }
.wt-ex em { font-style: normal; font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.wt-fact { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

.grammar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gcard { position: relative; padding: 22px 20px 18px; background: var(--white); border: var(--line) solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); animation: popin .5s var(--d) ease both; }
.gcard-n { position: absolute; top: -16px; left: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--white); border: 2px solid var(--ink); font: 900 17px/1 var(--f-display); }
.gcard h3 { font-size: 20px; margin-bottom: 8px; }
.gcard > p { font-size: 15.5px; color: var(--ink-2); }
.gsent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gsent li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--paper); border-radius: 12px; }
.gsent li > span { display: grid; gap: 3px; }
.gs-jp { font: 900 19px/1.3 var(--f-jp); }
.gsent small { font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.gsent em { font-style: normal; font-size: 14px; line-height: 1.35; color: var(--ink-2); }

.gate-checks .lead { max-width: none; margin-bottom: 8px; }
.soon-card { display: flex; gap: 22px; align-items: center; }
.soon-st { width: 150px; height: auto; flex: none; }
@media (max-width: 600px) { .soon-card { flex-direction: column; text-align: center; } }

/* ---------- trampa ---------- */
.trap {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  padding: clamp(22px, 3vw, 34px); padding-right: clamp(22px, 3vw, 34px);
  background: var(--gold-2); background-image: radial-gradient(circle at 1px 1px, rgba(107,58,30,.28) 1.2px, transparent 1.5px); background-size: 8px 8px;
  border: var(--line-thick) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.trap::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(22,20,24,.35); border-radius: 16px; pointer-events: none; }
.trap-badge { position: absolute; top: -22px; left: 22px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--seal); color: var(--white); border: var(--line) solid var(--ink); font: 900 30px/1 var(--f-display); animation: wobble 1.6s ease-in-out infinite; }
.trap h2 { margin: 8px 0 10px; }
.trap-txt > p { max-width: 54ch; font-size: 17px; }
.trap-pair { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.tp { position: relative; display: grid; gap: 2px; padding: 12px 16px 12px 52px; min-width: 190px; background: var(--white); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); }
.tp:not(:has(.say-sm)) { padding-left: 16px; }
.tp .say-sm { position: absolute; left: 10px; top: 12px; }
.tp b { font: 900 26px/1.1 var(--f-jp); }
.tp b:not(.jp) { font-family: var(--f-display); text-transform: uppercase; }
.tp small { font: 700 13px/1.2 var(--f-display); color: var(--seal); letter-spacing: .04em; }
.tp span { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.tp--1 { transform: rotate(1.2deg); background: #ffe6ee; }
.trap-vs { font: 900 22px/1 var(--f-display); color: var(--seal); transform: rotate(-8deg); }
.trap-art { width: clamp(130px, 18vw, 210px); height: auto; margin-bottom: -6px; animation: floaty 4s ease-in-out infinite; }
@media (max-width: 700px) { .trap { grid-template-columns: 1fr; } .trap-art { position: absolute; right: 6px; top: -54px; width: 96px; } .trap-txt .eyebrow, .trap h2 { padding-right: 84px; } .tp { min-width: 0; flex: 1 1 100%; } .trap-vs { margin: 0 auto; } }

/* ---------- mini test ---------- */
.mt { background: var(--white); min-height: 260px; }
.mt-intro { display: flex; gap: 24px; align-items: center; }
.mt-st { width: clamp(110px, 16vw, 170px); height: auto; flex: none; animation: wobble 3s ease-in-out infinite; }
.mt { scroll-margin-top: calc(var(--nav-h) + 30px); } /* deja ver también el sello «Passed», que asoma por arriba */
.mt-explain { scroll-margin-bottom: 110px; } /* en el móvil, por encima de la barra de pestañas */
.mt-q:focus, .mt-result h3:focus { outline: none; } /* reciben el foco solo para el lector de pantalla */
.mt-big { font: 800 clamp(20px, 2.4vw, 26px)/1.25 var(--f-display); margin-bottom: 6px; }
@media (max-width: 560px) { .mt-intro { flex-direction: column; text-align: center; } }
.mt-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mt-n { font: 900 20px/1 var(--f-display); text-transform: uppercase; }
.mt-n small { color: var(--ink-soft); }
.mt-dots { display: flex; gap: 6px; margin-right: auto; }
.mt-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-2); }
.mt-dots i.is-done { background: var(--ink); }
.mt-dots i.is-cur { background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
.mt-q { font: 800 clamp(20px, 2.6vw, 26px)/1.3 var(--f-display); margin-bottom: 16px; }
.mt-q .jp { font-weight: 900; }
.mt-audio { margin-bottom: 16px; }
.mt-opts { display: grid; gap: 10px; }
.mt-opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-sm); font-size: 17px; font-weight: 600;
  transition: transform .12s, background-color .2s;
}
.mt-opt:hover:not(:disabled) { transform: translateX(4px); background: var(--cream); }
.mt-opt:disabled { cursor: default; opacity: .6; }
.mt-opt .jp { font-weight: 900; font-size: 1.15em; }
.mt-letter { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--ink); color: var(--paper); font: 900 15px/1 var(--f-display); }
.mt-opt.is-right { background: #d8f2ee; opacity: 1; animation: tiPop .45s cubic-bezier(.3, 1.4, .5, 1); }
.mt-opt.is-right .mt-letter { background: var(--teal); }
.mt-opt.is-wrong { background: #fbd9d6; opacity: 1; animation: shake .4s; }
.mt-opt.is-wrong .mt-letter { background: var(--seal); }
.mt-explain { margin-top: 16px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 14px; animation: popin .3s ease both; font-size: 16px; }
.mt-explain.is-ok { background: #e3f6f3; }
.mt-explain.is-bad { background: #fff1e6; }
.mt-next { display: flex; margin: 12px 0 0 auto; }
.mt-result { position: relative; display: flex; gap: 24px; align-items: center; }
.mt-score { flex: none; width: 130px; height: 130px; display: grid; place-content: center; text-align: center; border-radius: 50%; border: var(--line-thick) solid var(--ink); background: var(--paper-2); box-shadow: var(--shadow); }
.mt-score b { font: 900 60px/1 var(--f-display); }
.mt-score small { font: 800 18px/1 var(--f-display); color: var(--ink-soft); }
.is-pass .mt-score { background: var(--gold-2); }
.mt-stamp { position: absolute; left: -8px; top: -18px; z-index: 2; padding: 4px 12px; border: 4px solid var(--seal); border-radius: 8px; color: var(--seal); background: rgba(255,253,247,.7); font: 900 22px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; animation: slam .55s cubic-bezier(.3, 1.4, .5, 1) both; filter: url(#rough); }
@media (max-width: 560px) { .mt-result { flex-direction: column; text-align: center; } .mt-stamp { left: 50%; margin-left: 10px; } }

/* ---------- deberes ---------- */
.hw { display: flex; gap: 18px; align-items: flex-end; }
.hw-st { width: clamp(110px, 16vw, 170px); height: auto; flex: none; animation: floaty 4.4s ease-in-out infinite; }
.hw-bubble { flex: 1; font-size: 18px; margin-bottom: 40px; }
.hw-bubble::after { left: -12px; bottom: 26px; transform: rotate(135deg) skew(10deg, 10deg); }
.hw-ex { margin: 12px 0 0; padding: 12px 14px; background: var(--paper); border-radius: 12px; font-weight: 500; }
.hw-ex small { display: block; font: 800 11px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.hw-note { font-size: 14px; }
@media (max-width: 560px) { .hw { flex-direction: column; align-items: stretch; } .hw-st { align-self: flex-start; width: 110px; } .hw-bubble { margin-bottom: 0; } .hw-bubble::after { left: 30px; top: -14px; bottom: auto; transform: rotate(-135deg) skew(10deg, 10deg); } }

/* ---------- práctica ---------- */
.practice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.pr-card { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 18px 18px 16px; border: var(--line) solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.pr-card:hover { transform: translate(-2px, -3px) rotate(-.6deg); box-shadow: 7px 7px 0 var(--ink); }
/* marca de agua: transparencia en el color (no en opacity) para que cuente como decorado */
.pr-card .jp { position: absolute; right: 10px; top: -6px; font: 400 76px/1 var(--f-brush); color: rgb(22 20 24 / .18); pointer-events: none; }
.pr-card b { font: 900 22px/1.1 var(--f-display); text-transform: uppercase; }
.pr-card small { font-size: 14px; }
.pr--speed { background: var(--orange-2); }
.pr--oni { background: var(--pink); }
.pr--chart { background: var(--teal-2); }

/* ---------- navegación: cartel de estación (駅名標) ---------- */
.lv-nav { margin-top: clamp(44px, 7vw, 80px); }
.ekimei { background: var(--white); border: var(--line-thick) solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ek-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px 14px; }
/* numeración de estación: letra de la línea sobre el número, en un cuadrado con el color de la línea */
.ek-code { width: 58px; height: 58px; display: grid; place-content: center; text-align: center; border: 6px solid var(--lc); border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--ink); font: 900 22px/.9 var(--f-display); }
.ek-code small { display: block; font-size: 13px; margin-bottom: 2px; }
.ek-name small { display: block; font: 800 12px/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.ek-name small .jp { letter-spacing: .06em; }
.ek-name b { display: block; font: 900 clamp(22px, 3vw, 32px)/1.05 var(--f-display); text-transform: uppercase; text-wrap: balance; }
.ek-all { display: grid; place-items: center; gap: 4px; padding: 10px 16px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--paper); text-decoration: none; font: 800 11px/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; transition: transform .15s; }
.ek-all:hover { transform: translateY(-2px) rotate(-2deg); }
.ek-all .jp { font: 400 26px/1 var(--f-brush); color: var(--gold-2); }
.ek-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; background: var(--lc); color: var(--lt); border-top: var(--line) solid var(--ink); }
.ek-here { align-self: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); margin: 0 6px; }
.ek-side { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 18px; color: inherit; text-decoration: none; transition: background-color .15s; }
a.ek-side:hover { background: rgba(0, 0, 0, .14); }
.ek-next { flex-direction: row-reverse; text-align: right; }
.ek-arrow { flex: none; font: 900 24px/1 var(--f-display); transition: transform .15s; }
a.ek-prev:hover .ek-arrow { transform: translateX(-4px); }
a.ek-next:hover .ek-arrow { transform: translateX(4px); }
.ek-txt { min-width: 0; }
.ek-txt small { display: block; font: 800 11.5px/1.25 var(--f-display); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.ek-txt b { display: block; font: 800 15px/1.25 var(--f-display); text-wrap: balance; }
.ek-txt em { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 6px; background: var(--white); color: var(--seal); border: 2px solid var(--ink); font: 700 12px/1.3 var(--f-body); font-style: normal; }
.ek-side.is-end { opacity: .75; }
@media (max-width: 640px) {
  .ek-top { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; }
  .ek-code { width: 50px; height: 50px; border-width: 5px; font-size: 19px; }
  .ek-all { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; gap: 8px; padding: 8px; }
  .ek-all .jp { font-size: 20px; }
  .ek-side { padding: 12px 10px; gap: 6px; align-items: flex-start; }
  .ek-arrow { font-size: 18px; margin-top: 1px; }
  .ek-txt b { font-size: 13.5px; }
  .ek-txt small { font-size: 11px; letter-spacing: .05em; }
  .ek-here { width: 14px; height: 14px; border-width: 3px; margin: 0 2px; }
}

/* código de estación en la cabecera del nivel */
.lv-code { display: inline-block; white-space: nowrap; margin-right: 10px; padding: 4px 9px; line-height: 1.15; border-radius: 6px; background: var(--lc); color: var(--lt); border: 2px solid var(--ink); letter-spacing: .06em; vertical-align: 1px; }

/* ---------- la línea del nivel en la cabecera (plano del vagón) ---------- */
.lv-route { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding-bottom: clamp(18px, 3vw, 28px); }
.lr-badge { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 6px solid var(--lc); box-shadow: 0 0 0 2px var(--ink); font: 900 15px/1 var(--f-display); }
.lv-route ol { position: relative; flex: 1; min-width: 0; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.lv-route ol::before { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 10px; background: var(--lc); border: 3px solid var(--ink); border-radius: 999px; }
.lv-route li { position: relative; display: grid; justify-items: center; }
.lv-route a { display: grid; justify-items: center; gap: 6px; text-decoration: none; }
.lv-route i { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); transition: transform .15s; }
.lv-route a:hover i { transform: scale(1.18); }
.lv-route small { font: 800 11.5px/1.1 var(--f-display); letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; }
.lv-route .is-done i { background: var(--lc); box-shadow: inset 0 0 0 3px #fff; }
.lv-route .is-gate i { width: 32px; height: 32px; margin-top: -2px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.lv-route .is-gate.is-done i { background: var(--seal); }
.lv-route .is-next i { background: var(--gold-2); }
.lv-route .is-cur i { background: var(--seal); transform: scale(1.25); box-shadow: 0 0 0 5px rgba(196, 32, 28, .25); }
.lv-route .is-cur small { color: var(--ink); font-weight: 900; }
/* estación actual que además es puerta o terminal: el aro agrandado no pisa su código */
.lv-route .is-cur.is-gate small { margin-top: 6px; }
.lr-end { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border: 2px solid var(--ink); border-radius: 8px; background: #ffd200; font: 800 11.5px/1.15 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.lr-end .jp { font: 900 12.5px/1.15 var(--f-jp); letter-spacing: .02em; padding-right: 8px; border-right: 2px solid var(--ink); }
@media (max-width: 600px) {
  .lv-route { gap: 8px; }
  .lr-badge { width: 26px; height: 26px; border-width: 5px; font-size: 12px; }
  .lr-end { display: none; }
  .lv-route ol::before { left: 8px; right: 8px; top: 7px; height: 8px; border-width: 2.5px; }
  .lv-route i { width: 22px; height: 22px; border-width: 3px; }
  .lv-route .is-gate i { width: 25px; height: 25px; margin-top: -1.5px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
  .lv-route small { font-size: 0; }
  .lv-route .is-cur small, .lv-route .is-gate small { font-size: 11px; }
}

/* ---------- Hoy: mini línea de las 4 tareas hasta el sello 済 ---------- */
.today-track { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 6px 14px; }
.today-track::before { content: ""; position: absolute; left: 6px; right: 14px; top: 50%; height: 6px; margin-top: -3px; background: var(--paper-3); border-radius: 3px; }
.today-track i { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--ink); transition: background-color .3s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.today-track i.is-on { background: var(--lc, var(--teal)); transform: scale(1.15); }
.today-track b { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; border: 2.5px solid var(--ink-soft); color: var(--ink-soft); background: var(--white); font: 900 16px/1 var(--f-jp); transform: rotate(-6deg); transition: all .3s; }
.today.is-cleared .today-track b { color: var(--white); background: var(--seal); border-color: var(--ink); animation: slam .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.today.is-cleared .today-track::before { background: var(--lc, var(--teal)); }
.today.is-cleared .today-count { background: var(--seal); color: var(--white); }
.today-foot a { color: var(--seal); font-weight: 700; }

/* ---------- kana: rejilla y ficha lado a lado ---------- */
.kana-box { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 22px; align-items: start; }
.kana-box .kdetail { position: sticky; top: calc(var(--nav-h) + 16px); margin-top: 0; max-width: none; }
@media (max-width: 860px) { .kana-box { grid-template-columns: 1fr; gap: 12px; } .kana-box .kdetail { position: static; } }
.kd-glyph { border: 0; background: none; padding: 0; cursor: pointer; transition: transform .15s; }
.kd-glyph:hover { transform: rotate(-4deg) scale(1.05); }
.kd-n { display: block; font: 800 11px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

/* ---------- qué comprueba la puerta ---------- */
.gc-stations { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gc-st { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); text-decoration: none; font: 700 13.5px/1.2 var(--f-display); box-shadow: var(--shadow-sm); transition: transform .15s; }
a.gc-st:hover { transform: translateY(-2px); }
.gc-st .lv-code { margin: 0; }
.gc-st.is-done { background: color-mix(in srgb, var(--lc) 14%, var(--white)); }
.gc-st.is-done::after { content: "✓"; font-weight: 900; color: var(--teal); }
.gc-line .jp { font-weight: 700; color: var(--ink-soft); }
.gc-mix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.gc-mix li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font: 700 14.5px/1.2 var(--f-display); }
.gc-mix b { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--g, var(--ink)); color: #fff; font: 900 17px/1 var(--f-display); background: var(--ink); }

/* enlace de suscripción en la fachada del vídeo */
.vid-card small a { color: var(--seal); font-weight: 700; }

/* en el móvil la línea ya sale en la tira de estaciones: el antetítulo cabe en una fila */
@media (max-width: 600px) { .lv-eb-line { display: none; } }

/* mini test: puntos de progreso con acierto/fallo y repaso al final */
.mt-dots i.is-ok { background: var(--teal); }
.mt-dots i.is-ko { background: var(--seal); }
.mt-res-btns { gap: 10px; }
.mt-recap { display: flex; gap: 6px; margin: 14px 0 0; }
.mt-recap span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); font: 800 12px/1 var(--f-display); color: var(--white); }
.mt-recap .is-ok { background: var(--teal); }
.mt-recap .is-ko { background: var(--seal); }
@media (max-width: 560px) { .mt-res-btns, .mt-recap { justify-content: center; } }

/* ficha de kana del nivel con el dibujo de la mnemotecnia (el mismo del mazo de Anki): debajo, centrado */
.kd-art-sm { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: min(170px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: var(--white); border: 2px solid var(--ink); padding: 4px; }

/* icono de la palabra (el mismo del mazo de Anki), arriba de la ficha */
.wt-face:has(.wt-art) { grid-template-areas: "art art" "jp spk" "kj kj" "r r" "en en"; }
.wt-art { grid-area: art; justify-self: center; width: 100%; max-width: 120px; height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: 6px; }

/* japonés suelto dentro del inglés: que no se parta a mitad de palabra (わ|たしは, り|ょこう).
   keep-all trata cada tramo japonés como una palabra; si no cabe en la línea, overflow-wrap lo deja partir */
.gcard p, .wt-fact, .trap-txt p, .kdetail p { word-break: keep-all; overflow-wrap: anywhere; }