/* ==========================================================================
   Simulador JLPT N5 (/test/): portada, hoja de examen, explicaciones y resultados.
   La hoja imita el cuadernillo del examen real: もんだい en caja negra, opciones numeradas como la hoja de
   respuestas (burbuja que se rellena al elegir) y 〇/✕ rojos de corrección japonesa.
   ========================================================================== */

.ex-page main { min-height: calc(100vh - var(--nav-h)); }
.ex-wrap { max-width: 860px; margin: 0 auto; padding: clamp(18px, 4vw, 40px) var(--gutter) 120px; }
.ex-h1 { font-size: clamp(30px, 5vw, 52px); margin: 6px 0 12px; }
.ex-h2 { font-size: clamp(22px, 3vw, 30px); margin: 40px 0 14px; }
.jp ruby rt { font-size: .5em; font-weight: 500; letter-spacing: 0; }
.ex-nofuri rt { visibility: hidden; }

/* ---------- portada /test/ ---------- */
.ex-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; margin-bottom: 28px; }
.ex-hero h1 { margin: 8px 0 12px; }
.ex-hero h1 .brush { display: block; font: 400 .55em/1.1 var(--f-brush); color: var(--seal); text-transform: none; }
.ex-hero-art { max-height: 300px; width: auto; justify-self: center; }
@media (max-width: 720px) { .ex-hero { grid-template-columns: 1fr; } .ex-hero-art { max-height: 150px; order: -1; } }
.ex-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ex-facts .tag { font-size: 12.5px; padding: 6px 12px; }
.ex-resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--gold-2); font: 700 15px/1.35 var(--f-display); }
.ex-resume[hidden] { display: none; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.ex-mock { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--white); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.ex-mock:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.ex-mock-n { flex: none; width: 52px; height: 52px; display: grid; place-items: center; align-content: center; border-radius: 12px; background: var(--ink); color: var(--paper); font: 900 22px/1 var(--f-display); }
.ex-mock-n small { font: 700 11px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 2px; }
.ex-mock-t { flex: 1; min-width: 0; }
.ex-mock-t b { display: block; font: 800 16px/1.2 var(--f-display); }
.ex-mock-t small { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
/* tu mejor nota va como sello en la esquina: dentro de la fila apretaba el título («Mock / Test 2») */
.ex-mock { position: relative; }
.ex-score { position: absolute; top: -10px; right: -8px; padding: 4px 8px; border: 2px solid var(--ink); border-radius: 10px; background: var(--gold-2); font: 900 16px/1 var(--f-display); box-shadow: 2px 2px 0 var(--ink); transform: rotate(4deg); }
.ex-score small { font-size: 11px; font-weight: 700; }
.ex-score.is-pass { background: var(--teal); color: var(--white); }
.ex-practice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.ex-pcard { display: block; padding: 14px 16px; background: var(--white); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.ex-pcard:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.ex-pcard .ex-mn { margin-right: 6px; }
.ex-pcard b { font: 800 16.5px/1.25 var(--f-display); }
.ex-pcard p { margin: 6px 0 4px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.ex-pcard small { font: 700 12.5px/1.3 var(--f-display); color: var(--teal); letter-spacing: .02em; }
.ex-pcard.is-soon { background: var(--paper-2); box-shadow: none; border-style: dashed; cursor: default; }
.ex-pcard.is-soon small { color: var(--ink-soft); }
.ex-sechead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 30px 0 12px; }
.ex-sechead h2 { font-size: clamp(20px, 2.6vw, 26px); margin: 0; }
.ex-sechead span { font: 700 13px/1.2 var(--f-display); color: var(--ink-soft); letter-spacing: .04em; }
.ex-mistakes { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: var(--line) solid var(--ink); border-radius: 16px; background: #fff1e6; color: var(--ink); text-decoration: none; font: 800 15.5px/1.3 var(--f-display); box-shadow: var(--shadow-sm); margin: 12px 0 0; }
.ex-mistakes[hidden] { display: none; }
.ex-mistakes b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--seal); color: var(--white); }
.ex-subh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 10px; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.ex-subh .jp { font-size: 14px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
/* pregunta de muestra en el HTML de cada práctica (sin JS y para buscadores): exam.js la sustituye al cargar */
.ex-sample { margin-top: 16px; }
.ex-sample .ex-stem { font-size: 20px; line-height: 2; }
.ex-sample-opts { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; font-size: 18px; }
.ex-sample-opts li { display: flex; align-items: center; gap: 10px; }
.ex-sample-opts .ex-bub { width: 28px; height: 28px; font-size: 14px; }
.ex-sample summary { cursor: pointer; font: 800 14px/1.3 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.ex-sample details p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; }
.ex-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding-top: 0; font: 700 14px/1.4 var(--f-display); }
.ex-info { margin-top: 40px; }
.ex-info h2 { font-size: clamp(22px, 3vw, 30px); }
.ex-info h3 { font-size: 19px; margin-top: 22px; }
.ex-info p, .ex-info li { font-size: 16px; line-height: 1.55; max-width: 70ch; }
.ex-fmt { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 14.5px; background: var(--white); border: 2px solid var(--ink); }
.ex-fmt th, .ex-fmt td { border: 1px solid var(--ink-soft); padding: 7px 9px; text-align: left; vertical-align: top; }
.ex-fmt thead th { background: var(--ink); color: var(--paper); font: 800 12.5px/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.ex-fmt td:last-child, .ex-fmt th:last-child { text-align: center; white-space: nowrap; }
.ex-src { font-size: 13.5px !important; color: var(--ink-soft); }

/* ---------- inicio de un Mock Test ---------- */
.ex-start { max-width: 760px; margin: 0 auto; }
.ex-secs { display: grid; gap: 10px; margin: 18px 0; }
.ex-sec { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); cursor: pointer; }
.ex-sec input { width: 22px; height: 22px; accent-color: var(--seal); flex: none; }
.ex-sec span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ex-sec b { font: 800 16.5px/1.2 var(--f-display); }
.ex-sec small { font-size: 13px; color: var(--ink-soft); }
.ex-sec em { font-style: normal; font-size: 14px; color: var(--ink-2); width: 100%; }
.ex-sec i { font-style: normal; font: 800 12.5px/1.2 var(--f-display); color: var(--teal); }
.ex-sec.is-off { cursor: default; background: var(--paper-2); border-style: dashed; padding-left: 48px; color: var(--ink-soft); }
.ex-modes { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.ex-modes legend { font: 800 14px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.ex-mode { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); cursor: pointer; }
.ex-mode:has(input:checked) { background: #e3f6f3; box-shadow: var(--shadow-sm); }
.ex-mode input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--seal); flex: none; }
.ex-mode b { display: block; font: 800 16px/1.2 var(--f-display); }
.ex-mode small { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-top: 3px; }
.ex-go { justify-content: space-between; gap: 14px; }
.ex-bestline { margin: 14px 0 0; }
.ex-break { text-align: center; }
.ex-secjp { font-size: 18px; color: var(--ink-soft); }
.ex-err { max-width: 560px; margin: 40px auto; text-align: center; }

/* interruptor de furigana */
.ex-furi { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); font: 800 12.5px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.ex-furi .jp { font: 700 18px/1 var(--f-jp); }
.ex-furi .jp rt { font-size: 9px; }
.ex-furi[aria-pressed="false"] { background: var(--paper-2); }
.ex-furi[aria-pressed="false"] rt { visibility: hidden; }
.ex-furi b { color: var(--seal); }

/* ---------- barra de arriba durante el examen ---------- */
.ex-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ex-where { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ex-where b { font: 800 15px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-where small { font: 700 12px/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ex-count { font: 900 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ex-count small { font-size: 13px; color: var(--ink-soft); }
.ex-timer { padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--gold-2); font: 800 16px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ex-timer.is-low { background: var(--seal); color: var(--white); animation: pulse 1s ease-in-out infinite; }
.ex-quit { width: 40px; height: 40px; flex: none; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); font: 800 16px/1 var(--f-display); cursor: pointer; color: var(--ink); }
.ex-bar { height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); overflow: hidden; margin-bottom: 14px; }
.ex-bar i { display: block; height: 100%; background: var(--teal); transition: width .3s ease; }
@media (max-width: 560px) {
  .ex-top { flex-wrap: wrap; }
  .ex-where { flex-basis: calc(100% - 140px); }
  .ex-furi { order: 5; }
  .ex-furi { min-height: 36px; }
}

/* ---------- la hoja ---------- */
.ex-sheet { position: relative; background: var(--white); border: var(--line) solid var(--ink); border-radius: 6px 6px 18px 18px; box-shadow: var(--shadow-lg); padding: clamp(16px, 3vw, 30px); }
.ex-sheet::before { /* margen del cuadernillo */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 20px); opacity: .12; }
.ex-mondai { margin: 0 0 16px; }
.ex-mn { display: inline-block; padding: 4px 10px; background: var(--ink); color: var(--white); font: 700 15px/1.2 var(--f-jp); letter-spacing: .06em; border-radius: 3px; }
.ex-tname { margin-left: 8px; font: 800 12.5px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ex-ins { margin: 10px 0 2px; font-size: 16px; line-height: 2.05; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 4px; }
.ex-ins-en { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.ex-mondai.is-compact { margin-bottom: 10px; }

.ex-text { margin: 0 0 18px; padding: 14px 16px; background: #fbf8f0; border: 1.5px solid var(--ink-soft); border-radius: 6px; }
.ex-text p { margin: 0; font-size: 18px; line-height: 2.2; }
.ex-ttl { text-align: center; font: 700 18px/1.9 var(--f-jp); margin: 0 0 4px; }
.ex-gap { display: inline-grid; place-items: center; min-width: 2.6em; padding: 0 .3em; margin: 0 .15em; border: 2px solid var(--ink); border-radius: 4px; background: var(--white); line-height: 1.5; vertical-align: .1em; }
.ex-gap b { font: 800 14px/1 var(--f-display); }
.ex-gap.is-cur { background: var(--gold-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
.ex-gap.is-filled { background: #e3f6f3; border-color: var(--teal); }
.ex-fill { color: #126e67; font-weight: 700; }
.ex-intro { font-size: 17px; line-height: 2.1; margin: 0 0 12px; }
.ex-doc { margin: 0 0 18px; padding: 14px; border: 3px double var(--ink); border-radius: 6px; background: #fffdf2; }
.ex-doc-t { text-align: center; font: 800 20px/1.9 var(--f-jp); margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); }
.ex-doc p { margin: 4px 0; font-size: 16px; line-height: 2; }
.ex-tbl-wrap { overflow-x: auto; margin: 8px 0; }
.ex-tbl { border-collapse: collapse; width: 100%; font-size: 15.5px; line-height: 1.9; background: var(--white); }
.ex-tbl th, .ex-tbl td { border: 1.5px solid var(--ink); padding: 3px 8px; text-align: center; white-space: nowrap; }
.ex-tbl thead th { background: var(--paper-2); }
.ex-tbl tbody th { background: #fbf8f0; font-weight: 700; }
/* móvil: la tabla cabe entera (se partía por la derecha y había que deslizarla sin saberlo); las celdas se parten por 〜 */
@media (max-width: 560px) {
  .ex-doc { padding: 10px 8px; }
  .ex-tbl { font-size: 14px; line-height: 1.75; }
  .ex-tbl th, .ex-tbl td { padding: 3px 4px; white-space: normal; }
}
.ex-notes { margin: 8px 0 0; padding-left: 1.2em; font-size: 15.5px; line-height: 1.95; }

.ex-q { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; flex-wrap: wrap; }
.ex-qn { flex: none; min-width: 32px; height: 32px; padding: 0 6px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 4px; font: 800 16px/1 var(--f-display); margin-top: 6px; }
.ex-stem { flex: 1; min-width: 0; margin: 0; font-size: clamp(19px, 2.6vw, 23px); line-height: 2.25; }
.ex-stem:focus { outline: none; }
.ex-qen { width: 100%; margin: -4px 0 0 44px; font-size: 14px; color: var(--ink-soft); }
.ex-u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }
.ex-blank { display: inline-block; min-width: 3.6em; height: 1.4em; margin: 0 .2em; border: 2px solid var(--ink); border-radius: 4px; vertical-align: -.25em; background: var(--white); }

/* opciones: burbujas de la hoja de respuestas */
.ex-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ex-opts.is-long { grid-template-columns: 1fr; }
.ex-opt { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; text-align: left; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; transition: transform .1s, box-shadow .1s, background-color .15s; box-shadow: var(--shadow-sm); }
.ex-opt:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.ex-opt:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }
.ex-bub { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font: 800 14px/1 var(--f-display); background: var(--white); transition: background-color .15s, color .15s; }
.ex-ot { flex: 1; font-size: 20px; line-height: 1.9; }
.ex-opts.is-long .ex-ot { font-size: 18px; }
.ex-opt.is-pick { background: #fff7d6; }
.ex-opt.is-pick .ex-bub { background: var(--ink); color: var(--white); }
.ex-opt.is-right { background: #e3f6f3; border-color: #126e67; box-shadow: 0 0 0 2px #126e67; }
.ex-opt.is-right .ex-bub { background: #126e67; border-color: #126e67; color: var(--white); }
.ex-opt.is-wrong { background: #ffe9e6; border-color: var(--seal); animation: shake .4s; }
.ex-opt.is-wrong .ex-bub { background: var(--seal); border-color: var(--seal); color: var(--white); }
.ex-opt[disabled] { cursor: default; transform: none; box-shadow: none; }
.ex-opt[disabled]:not(.is-right):not(.is-wrong) { opacity: .55; }
@media (max-width: 560px) {
  .ex-opts { grid-template-columns: 1fr; gap: 8px; }
  .ex-opt { min-height: 54px; }
  .ex-ot { font-size: 19px; }
  .ex-qen { margin-left: 0; }
}

/* ★ ordenar */
.ex-ordline { line-height: 2.6; }
.ex-slot { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 4.2em; min-height: 1.8em; margin: 0 .18em; padding: 0 .35em; vertical-align: middle; border: 0; border-bottom: 3px solid var(--ink); background: #fbf8f0; color: var(--ink); font: inherit; line-height: 1.8; cursor: pointer; border-radius: 4px 4px 0 0; }
.ex-slot.is-full { background: #fff7d6; }
.ex-slot.is-star { border-bottom-color: var(--seal); }
.ex-slot .ex-star { position: absolute; left: 50%; bottom: -1.15em; translate: -50% 0; font: 900 15px/1 var(--f-display); font-style: normal; color: var(--seal); }
.ex-slot.is-right { background: #e3f6f3; }
.ex-slot[disabled] { cursor: default; }
.ex-hint { margin: 10px 0 8px; font-size: 14px; color: var(--ink-soft); min-height: 1em; }
.ex-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ex-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); color: var(--ink); font-size: 19px; line-height: 1.9; cursor: pointer; box-shadow: var(--shadow-sm); }
.ex-chip[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.ex-ch { display: inline-block; padding: 0 .2em; border-bottom: 2px solid var(--ink-soft); margin: 0 .1em; position: relative; }
.ex-ch.is-star { border-bottom-color: var(--seal); background: #ffe9e6; }
.ex-ch i { position: absolute; top: -1.1em; left: 50%; translate: -50% 0; font: 900 12px/1 var(--f-display); font-style: normal; color: var(--seal); }

/* ---------- explicación ---------- */
.ex-fbwrap:empty { display: none; }
.ex-fb { margin: 18px 0 0; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 16px; background: #f3fbf9; animation: popin .3s ease both; scroll-margin: 90px 0 110px; }
.ex-fb.is-ko { background: #fff6ef; }
.ex-fb p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.ex-fb .jp { font-size: 1.08em; }
.ex-fb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ex-fb-head p { margin: 0; font-size: 17px; }
.ex-lbl { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 800 11px/1.5 var(--f-display); letter-spacing: .08em; text-transform: uppercase; vertical-align: .1em; }
.ex-traps { margin: 0 0 10px; }
.ex-traps ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ex-traps li { padding: 8px 10px; border: 1.5px solid var(--ink-soft); border-radius: 10px; background: var(--white); font-size: 15px; line-height: 1.5; }
.ex-traps li b { display: block; font-size: 16px; line-height: 1.9; }
.ex-traps li em { display: inline-block; margin: 0 8px 4px 0; padding: 1px 8px; border-radius: 999px; background: var(--seal); color: var(--white); font: 800 11px/1.6 var(--f-display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.ex-traps li.is-mine { border: 2px solid var(--seal); }
.ex-tip { padding: 10px 12px; border-radius: 12px; background: var(--gold-2); border: 2px solid var(--ink); }
.ex-tip .ex-lbl { background: var(--seal); }
.ex-full { font-size: 19px !important; line-height: 2.4 !important; }
.ex-learn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 800 14.5px/1.3 var(--f-display); color: var(--ink); text-underline-offset: 4px; }
.ex-st { padding: 3px 7px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); font: 800 11.5px/1.15 var(--f-display); letter-spacing: .05em; }
/* 〇 y ✕ de corrección */
.ex-mk { flex: none; position: relative; width: 38px; height: 38px; }
.ex-mk.is-ok { border: 6px solid var(--seal); border-radius: 50%; animation: exMark .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.ex-mk.is-ko::before, .ex-mk.is-ko::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 6px; margin-left: -60%; translate: 0 -50%; border-radius: 3px; background: var(--seal); transform: rotate(45deg); }
.ex-mk.is-ko::after { transform: rotate(-45deg); }
.ex-mk.is-ko { animation: exMark .35s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes exMark { from { transform: scale(1.8) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }

/* ---------- navegación ---------- */
.ex-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; min-height: 52px; }
.ex-run.is-study .ex-nav { justify-content: flex-end; }
.ex-navhint { font: 700 14px/1.3 var(--f-display); }
.ex-map { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.ex-map button { width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); font: 800 12.5px/1 var(--f-display); cursor: pointer; color: var(--ink); }
.ex-map button.is-done { background: var(--ink); color: var(--white); }
.ex-map button.is-cur { box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 5px var(--ink); }

/* ---------- resultados ---------- */
.ex-res-top { text-align: left; }
.ex-total { font: 700 20px/1.3 var(--f-display); }
.ex-total b { font-size: 38px; }
.ex-verdict { margin: 14px 0; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 16px; background: #e3f6f3; }
.ex-verdict.is-fail { background: #fff1e6; }
.ex-verdict p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.ex-big { font: 900 56px/1 var(--f-display) !important; margin-bottom: 8px !important; }
.ex-big small { font-size: 22px; color: var(--ink-soft); }
.ex-secres p { margin: 0 0 4px; }
.ex-rows { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.ex-rows li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; }
.ex-rows li span:first-child b { display: block; font: 800 15px/1.2 var(--f-display); }
.ex-rows li small { font-size: 12.5px; color: var(--ink-soft); }
.ex-rbar { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); overflow: hidden; }
.ex-rbar i { display: block; height: 100%; background: var(--teal); }
.ex-res-btns { margin-top: 10px; }
.ex-review { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ex-review > li { min-width: 0; }
.ex-review details { background: var(--white); border: 2px solid var(--ink); border-radius: 14px; }
.ex-review summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.ex-review summary::-webkit-details-marker { display: none; }
.ex-review summary .ex-mk { width: 26px; height: 26px; animation: none; }
.ex-review summary .ex-mk.is-ok { border-width: 4px; }
.ex-review summary .ex-mk.is-ko::before, .ex-review summary .ex-mk.is-ko::after { height: 4px; }
.ex-rn { font: 800 14px/1 var(--f-display); min-width: 22px; }
.ex-rt { flex: none; font: 800 11.5px/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ex-rq { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.ex-rbody { padding: 0 14px 14px; }
.ex-rbody .ex-stem { font-size: 19px; margin: 6px 0 0; }
.ex-rbody .ex-text p { font-size: 16.5px; }
@media (max-width: 560px) {
  .ex-rt { display: none; }
  .ex-rows li { grid-template-columns: minmax(0, 1fr) 70px auto; }
}
.ex-empty { text-align: center; }

/* ---------- audición ---------- */
.ex-pic { margin: 0 0 14px; }
.ex-pic img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.ex-play { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 10px 14px 10px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fbf8f0; }
.ex-pbtn { flex: none; position: relative; width: 56px; height: 56px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--seal); color: var(--white); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .1s, box-shadow .1s; }
.ex-pbtn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.ex-pbtn[disabled] { background: var(--paper-2); color: var(--ink-soft); cursor: default; transform: none; box-shadow: none; }
.ex-pico { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent currentColor; }
.ex-play[data-st="playing"] .ex-pico { width: 18px; height: 20px; margin: 0; border: 0; background: linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px, currentColor 12px 18px); }
.ex-play[data-once][data-st="playing"] .ex-pico { width: 22px; height: 20px; background: none; border: 0; margin: 0; display: flex; align-items: flex-end; justify-content: space-between; }
.ex-play[data-once][data-st="playing"] .ex-pico::before, .ex-play[data-once][data-st="playing"] .ex-pico::after { content: ""; width: 6px; height: 100%; background: currentColor; border-radius: 2px; animation: exEq .9s ease-in-out infinite alternate; }
.ex-play[data-once][data-st="playing"] .ex-pico::after { animation-delay: -.45s; }
@keyframes exEq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ex-play[data-st="loading"] .ex-pico { width: 22px; height: 22px; margin: 0; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: exSpin .8s linear infinite; }
@keyframes exSpin { to { transform: rotate(360deg); } }
.ex-play[data-st="done"][data-once] .ex-pico { width: 12px; height: 20px; margin: -4px 0 0; border: solid currentColor; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.ex-pmid { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ex-ptrack { display: block; height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); overflow: hidden; }
.ex-ptrack i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .25s linear; }
.ex-pinfo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 13px/1.25 var(--f-display); color: var(--ink-soft); }
.ex-pstate { color: var(--ink); font-weight: 800; }
.ex-ptime { flex: none; font-variant-numeric: tabular-nums; }
.ex-lhint { font: 700 16px/1.5 var(--f-display) !important; color: var(--ink-soft); padding-top: 8px; }
.ex-opts.is-spoken { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-opts.is-spoken .ex-opt { justify-content: center; min-height: 64px; }
.ex-opts.is-spoken .ex-opt:not([disabled]) .ex-bub { width: 40px; height: 40px; font-size: 18px; }
.ex-opts.is-spoken .ex-opt[disabled] { justify-content: flex-start; }
.ex-opts.is-spoken .ex-opt[disabled] .ex-ot { font-size: 17px; }
.ex-script { margin: 0 0 12px; padding: 12px 14px; background: var(--white); border: 1.5px solid var(--ink-soft); border-radius: 12px; }
.ex-script .ex-lbl { margin-bottom: 6px; }
.ex-sl { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 2px !important; font-size: 17px !important; line-height: 2.1 !important; }
.ex-who { flex: none; width: 28px; height: 28px; margin-top: 6px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-soft); color: var(--white); font: 700 13px/1 var(--f-jp); }
.ex-who.is-m { background: #2c5c9e; }
.ex-who.is-f { background: #b8324a; }
.ex-onum { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border: 2px solid var(--ink); border-radius: 50%; font: 800 12px/1 var(--f-display); vertical-align: .1em; }
.ex-en.is-pre { white-space: pre-line; }
.ex-parts { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 6px; }
.ex-parts li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font-size: 15.5px; }
.ex-parts li b { font: 900 22px/1 var(--f-display); min-width: 72px; }
.ex-parts li b small { font-size: 13px; color: var(--ink-soft); }
.ex-parts li span { margin-left: auto; font: 700 12.5px/1.2 var(--f-display); color: var(--ink-soft); }
.ex-parts li.is-ko { border-color: var(--seal); background: #fff6ef; }
.ex-sample-pic { display: block; width: 100%; max-width: 480px; height: auto; margin: 8px 0 12px; border: 2px solid var(--ink); border-radius: 10px; }
@media (max-width: 560px) {
  .ex-opts.is-spoken { grid-template-columns: 1fr; }
  .ex-play { border-radius: 20px; }
  .ex-sl { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-fb, .ex-mk, .ex-opt.is-wrong, .ex-timer.is-low, .ex-pico, .ex-pico::before, .ex-pico::after { animation: none !important; }
}

/* ---------- portada /test/ (v2, 26/10): «¿cuánto tiempo tienes?» primero, el resto recogido ---------- */
.ex-hero--slim { margin-bottom: 16px; }
.ex-hero--slim h1 { font-size: clamp(32px, 4.6vw, 50px); }
.ex-hero--slim .ex-hero-art { max-height: 200px; }
@media (max-width: 720px) { .ex-hero--slim .ex-hero-art { display: none; } }
.ex-askh { font-size: clamp(20px, 2.6vw, 26px); margin: 6px 0 12px; }
.ex-pick { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.ex-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; background: var(--white); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.ex-choice:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.ex-choice.is-main { background: var(--gold-2); }
.ex-time { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 800 12.5px/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.ex-choice b { font: 900 20px/1.15 var(--f-display); }
.ex-choice p { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ex-cta { margin-top: 4px; font: 800 15px/1.2 var(--f-display); color: var(--seal); }
.ex-choice.is-main .ex-cta { padding: 10px 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--seal); color: var(--white); box-shadow: 2px 2px 0 var(--ink); }
.ex-last { font: 700 12.5px/1.2 var(--f-display); color: var(--ink-2); }
.ex-last[hidden] { display: none; }
@media (max-width: 720px) {
  .ex-pick { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ex-choice.is-main { grid-column: 1 / -1; }
  .ex-choice:not(.is-main) { padding: 12px; gap: 4px; }
  .ex-choice:not(.is-main) p { display: none; }
  .ex-choice:not(.is-main) b { font-size: 16.5px; }
  .ex-choice:not(.is-main) .ex-cta { font-size: 14px; }
}
.ex-block { margin-top: 34px; scroll-margin-top: calc(var(--nav-h) + 12px); }
.ex-block .ex-sechead { margin-top: 0; }
.ex-sechead .ex-ico { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; color: var(--teal); }

/* prácticas: pestañas por parte del examen (sin JS se ven las tres listas) */
.ex-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ex-tabs[hidden] { display: none; }
.ex-tab { padding: 9px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font: 800 14.5px/1.2 var(--f-display); cursor: pointer; }
.ex-tab:hover { background: var(--paper-2); }
.ex-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.ex-tabbed .ex-ptab[hidden] { display: none; }
.ex-tabbed .ex-ptab .ex-subh { display: none; }
@media (max-width: 560px) {
  .ex-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ex-tab { padding: 8px 6px; font-size: 13px; text-align: center; border-radius: 12px; }
}
.ex-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.ex-prow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--white); border: 2px solid var(--ink); border-radius: 14px; color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.ex-prow:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.ex-prow .ex-mn { flex: none; padding: 3px 7px; font-size: 12.5px; }
.ex-pn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-pn b { font: 800 15.5px/1.25 var(--f-display); }
.ex-pn small { font: 700 12.5px/1.3 var(--f-display); color: var(--teal); }
.ex-prow::after { content: '→'; margin-left: auto; font: 800 16px/1 var(--f-display); color: var(--seal); }

/* Mock Tests: casillas numeradas con tu mejor nota */
.ex-tiles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
/* en móvil la casilla solo lleva el número (y los auriculares si tiene audición): la leyenda de arriba da los minutos */
@media (max-width: 720px) { .ex-tiles { grid-template-columns: repeat(5, 1fr); } .ex-tmin { display: none; } .ex-tile .ex-ico { width: 16px; height: 16px; } }
.ex-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; aspect-ratio: 1; background: var(--white); border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.ex-tile:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.ex-tile b { font: 900 22px/1 var(--f-display); }
.ex-tile small { display: inline-flex; align-items: center; gap: 2px; font: 700 11px/1 var(--f-display); color: var(--ink-soft); white-space: nowrap; }
.ex-tile.has-l { background: #e3f6f3; }
.ex-tile.is-done { background: var(--paper-2); }
.ex-tile.is-pass { background: var(--teal); color: var(--white); }
.ex-tscore { font: 800 11.5px/1 var(--f-display); white-space: nowrap; }
.ex-ico { width: 13px; height: 13px; flex: none; }

/* «How the JLPT N5 works», plegado */
details.ex-info { margin-top: 40px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); }
details.ex-info[open] { padding-bottom: 14px; }
details.ex-info > summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 34px 14px 0; list-style: none; cursor: pointer; }
details.ex-info > summary::-webkit-details-marker { display: none; }
details.ex-info > summary h2 { margin: 0; font-size: clamp(19px, 2.4vw, 24px); }
details.ex-info > summary span { font: 700 13px/1.3 var(--f-display); color: var(--ink-soft); }
details.ex-info > summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 900 26px/1 var(--f-display); color: var(--seal); }
details.ex-info[open] > summary::after { content: '−'; }

/* examen corto: inicio y resultado (sin nota sobre 180: cómo vas por partes) */
.ex-qparts { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.ex-qparts li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); font: 700 16px/1.3 var(--f-display); }
.ex-qparts li > b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 900 15px/1 var(--f-display); }
.ex-qparts .muted { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 13px; }
.ex-qparts .ex-ico { width: 15px; height: 15px; }
.ex-verdict.is-mid { background: #fff6d6; }
.ex-verdict.is-low { background: #fff1e6; }
.ex-quickv .ex-learn { margin-right: 16px; }
.ex-verdict .ex-qnote { margin-top: 12px; font-size: 14px; }