/* ==========================================================================
   /join — el alta con Rin y Tadashi, en viñetas de cómic paso a paso.
   ========================================================================== */

.jn { padding: clamp(20px, 4vw, 44px) 0 40px; }
.jn-head { text-align: center; margin-bottom: 18px; }
.jn-head h1 { margin: .15em 0 .1em; }
.jn-head h1 .jp { display: block; font: 400 .42em/1 var(--f-brush); color: var(--seal); letter-spacing: .1em; margin-bottom: .2em; }
/* los pasos son una línea de metro (la Onigiri Line, donde empieza todo el mundo):
   estaciones hechas a todo color, la vía por recorrer apagada y el tren en la estación actual */
.jn-steps { --lc: var(--rank-e); display: flex; justify-content: center; list-style: none; margin: 0 auto 22px; padding: 30px 0 0; counter-reset: st; max-width: 680px; }
.jn-steps[hidden], .jn-steplabel[hidden] { display: none !important; }
.jn-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 800 11px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; min-width: 0; padding-inline: 2px; }
.jn-steps li::before {
  counter-increment: st; content: counter(st); position: relative; z-index: 1;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 3px solid rgba(22,20,24,.35); background: var(--white);
  font: 900 13px/1 var(--f-display); color: var(--ink-soft); transition: transform .3s cubic-bezier(.3,1.5,.5,1), background .3s;
}
.jn-steps li:last-child::before { border-radius: 9px; } /* la última, terminal */
/* tramo de vía hasta la estación siguiente */
.jn-steps li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; top: 11px; left: 50%; width: 100%; height: 8px;
  background: repeating-linear-gradient(90deg, rgba(22,20,24,.22) 0 8px, transparent 8px 13px);
}
.jn-steps li.is-done::after { background: var(--lc); box-shadow: 0 0 0 2px var(--ink); }
.jn-steps li.is-done::before { content: "✓"; border-color: var(--ink); color: var(--lc); }
.jn-steps li.is-on { color: var(--ink); }
.jn-steps li.is-on::before { border-color: var(--ink); background: var(--gold-2); color: var(--ink); transform: scale(1.18); box-shadow: 0 0 0 5px rgba(255,216,106,.45); }
.jn-train { position: absolute; z-index: 2; top: -27px; left: 50%; width: 46px; translate: -50% 0; pointer-events: none; animation: jnTrain .6s cubic-bezier(.2,.9,.3,1.1) both; }
.jn-train svg { display: block; width: 100%; height: auto; }
@keyframes jnTrain { from { transform: translateX(-70px); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
@media (max-width: 560px) { .jn-steps li > span:not(.jn-train) { display: none; } .jn-steps li::before { width: 26px; height: 26px; font-size: 12px; } .jn-steps li:not(:last-child)::after { top: 9px; } .jn-train { width: 40px; top: -25px; } }
.jn-steplabel { display: none; text-align: center; margin: -10px 0 16px; font: 800 12px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--seal); }
@media (max-width: 560px) { .jn-steplabel { display: block; } }
#comic { overflow-x: clip; overflow-clip-margin: 14px; }

/* viñeta */
.jn-panel {
  position: relative; max-width: 880px; margin: 0 auto;
  background: var(--white); border: var(--line-thick) solid var(--ink); border-radius: 8px; box-shadow: var(--shadow-lg);
  padding: clamp(18px, 3.4vw, 34px); overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 14px);
  animation: jnIn .45s cubic-bezier(.2,.9,.3,1.15) both;
}
.jn-panel::before { /* trama y líneas de velocidad */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 100% 0%, rgba(22,20,24,.05) 0 2deg, transparent 2deg 6deg), var(--halftone);
  background-size: auto, 8px 8px;
  -webkit-mask: linear-gradient(200deg, #000, transparent 55%); mask: linear-gradient(200deg, #000, transparent 55%);
}
.jn-panel > * { position: relative; }
.jn-num:focus { outline: none; }
.jn-num { position: absolute; top: 0; left: 0; z-index: 2; padding: 6px 14px 6px 10px; background: var(--ink); color: var(--paper); border-radius: 0 0 14px 0; font: 900 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.jn-num b { color: var(--gold-2); }
@keyframes jnIn { from { opacity: 0; transform: translateX(40px) rotate(1.5deg); } to { opacity: 1; transform: none; } }

.jn-scene { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: clamp(12px, 3vw, 26px); align-items: end; margin-top: 18px; }
.jn-scene.is-right { grid-template-columns: minmax(0, 1fr) minmax(110px, 200px); }
.jn-scene.is-right .jn-who { order: 2; }
.jn-who { position: relative; align-self: end; }
.jn-who img { width: 100%; height: auto; animation: jnPop .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes jnPop { from { transform: translateY(30%) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.jn-bubbles { display: grid; gap: 14px; align-self: center; }
.jn-bubbles .speech { font-size: clamp(16px, 2vw, 19px); line-height: 1.45; animation: popin .35s ease both; }
.jn-bubbles .speech.is-small { font-size: 15px; justify-self: end; max-width: 80%; }
.jn-bubbles .speech.is-alt { background: var(--cream); }
.jn-bubbles .speech.is-alt::after { background: var(--cream); }
/* el pico apunta a quien habla: al dibujo de la viñeta (tail-main) o a su cameo */
.jn-scene .speech.tail-main::after, .jn-scene .speech.has-cameo::after, .jn-opline::after { top: 20px; bottom: auto; width: 20px; height: 20px; border: 0; transform: rotate(45deg); }
.jn-scene .speech.tail-main::after, .jn-scene.is-right .speech.has-cameo::after, .jn-opline::after { left: -13px; right: auto; border-left: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); }
.jn-scene.is-right .speech.tail-main::after, .jn-scene .speech.has-cameo::after { left: auto; right: -13px; border-top: var(--line) solid var(--ink); border-right: var(--line) solid var(--ink); }
.jn-scene.is-right .speech.has-cameo::after { border-top: 0; border-right: 0; }
.jn-scene.is-right .speech.tail-main::after { border-left: 0; border-bottom: 0; }
.jn-scene .speech.has-cameo { margin-right: 60px; }
.jn-scene.is-right .speech.has-cameo { margin-right: 0; margin-left: 60px; }
.jn-cameo {
  position: absolute; top: 0; right: -64px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--ink); background: var(--orange-2); box-shadow: var(--shadow-sm); animation: jnPop .45s cubic-bezier(.3,1.5,.5,1) both;
}
.jn-cameo[data-who="Rin"] { background: var(--pink); }
.jn-cameo[data-who="Tadashi"] { background: var(--teal-2); }
.jn-scene.is-right .jn-cameo, .jn-opline .jn-cameo { right: auto; left: -64px; }
.jn-cameo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.5); transform-origin: 50% 18%; }
.jn-cameo[data-who="Mikan"] img, .jn-opline[data-who="Mikan"] .jn-cameo img { transform: none; object-fit: contain; }
.jn-opline { margin: 16px 0 0 60px; }
.jn-opline[data-who="Rin"] .jn-cameo { background: var(--pink); }
.jn-opline[data-who="Tadashi"] .jn-cameo { background: var(--teal-2); }
.jn-who img.is-panic { animation: shake .45s ease 2; }
.jn-body { margin-top: 22px; }
.jn-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 22px; }
.jn-nav .btn--ghost { margin-right: auto; }
@media (max-width: 620px) {
  .jn-scene, .jn-scene.is-right { grid-template-columns: 96px minmax(0, 1fr); }
  .jn-scene.is-right .jn-who { order: 0; }
  .jn-scene .jn-who { align-self: start; } /* arriba: los picos (a 20 px del borde superior) apuntan a la cara */
  /* en móvil el dibujo siempre va a la izquierda: picos y cameos se recolocan */
  .jn-scene.is-right .speech.tail-main::after { left: -13px; right: auto; border: 0; border-left: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); }
  /* el cameo se convierte en una chapita sobre la esquina del bocadillo (no le roba ancho) */
  .jn-scene .speech.has-cameo, .jn-scene.is-right .speech.has-cameo { margin: 0; padding-right: 40px; }
  .jn-scene .speech.has-cameo::after { display: none; }
  .jn-cameo, .jn-scene.is-right .jn-cameo { width: 36px; height: 36px; top: -12px; right: -8px; left: auto; }
  .jn-opline { margin-left: 0; padding-left: 52px; }
  .jn-opline::after { display: none; }
  .jn-opline .jn-cameo { left: 8px; right: auto; top: 12px; }
  .jn-bubbles .speech { font-size: 15px; padding: 12px 14px; }
  .jn-bubbles .speech.is-small { max-width: 100%; }
  .jn-nav { justify-content: stretch; }
  .jn-nav .btn:not(.btn--ghost) { flex: 1 1 auto; }
}

/* paso 1: la promesa */
.jn-promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.jn-promise li { border: 2px solid var(--ink); border-radius: 14px; padding: 14px 12px; background: var(--paper); text-align: center; }
.jn-promise .ico { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 50%; border: 2px solid var(--ink); font: 900 22px/1 var(--f-display); }
.jn-promise .no { background: var(--pink-2); color: var(--seal); }
.jn-promise .yes { background: var(--teal-2); }
.jn-promise b { display: block; font: 800 15px/1.2 var(--f-display); text-transform: uppercase; }
.jn-promise small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
@media (max-width: 620px) { .jn-promise { grid-template-columns: minmax(0, 1fr); } .jn-promise li { display: grid; grid-template-columns: 48px 1fr; gap: 0 12px; text-align: left; align-items: center; } .jn-promise .ico { grid-row: span 2; margin: 0; } }

/* paso 2: gachapon del personaje */
.jn-gacha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 720px) { .jn-gacha { grid-template-columns: minmax(0, 1fr); } }
.jn-gacha .gx-stagewrap { border-radius: 18px; border: var(--line) solid var(--ink); }
.jn-ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.jn-reveal { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px; border: var(--line) solid var(--ink); border-radius: 18px; background: radial-gradient(circle, #fffdf7 30%, var(--fc, var(--cream))); box-shadow: var(--shadow); }
.jn-reveal { scroll-margin-top: calc(var(--nav-h) + 12px); } /* al bajar hasta el personaje (móvil) no queda bajo la cabecera */
.jn-reveal .art { width: min(200px, 60vw); aspect-ratio: 1; display: grid; place-items: center; animation: jnPop .6s cubic-bezier(.3,1.5,.5,1) both; }
.jn-reveal .art > * { width: 100% !important; height: 100% !important; }
.jn-reveal h3 { margin: 4px 0 0; font-size: clamp(24px, 3.4vw, 32px); text-transform: uppercase; }
.jn-reveal p { margin: 0; font-weight: 600; color: var(--ink-2); max-width: 32ch; }

/* paso 3: nombres */
.jn-namefs { border: 0; padding: 0; margin: 0; min-width: 0; }
.jn-namefs legend { width: 100%; padding: 0; }
.jn-namegrid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.jn-me { display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border: var(--line) solid var(--ink); border-radius: 18px; background: radial-gradient(circle, #fffdf7 35%, var(--cream)); box-shadow: var(--shadow-sm); transform: rotate(-2deg); }
.jn-me > :first-child { width: 120px !important; height: 120px !important; }
.jn-me small { font: 800 11px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
@media (max-width: 620px) { .jn-namegrid { grid-template-columns: minmax(0, 1fr); } .jn-me { display: none; } }
.jn-nav .btn small { font: 700 .72em/1 var(--f-body); letter-spacing: 0; text-transform: none; opacity: .75; margin-left: 4px; }
.jn-names { display: grid; gap: 10px; }
.jn-name { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--white); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s, background .2s; animation: popin .3s ease both; }
.jn-name:nth-child(2) { animation-delay: .07s; } .jn-name:nth-child(3) { animation-delay: .14s; }
.jn-name:hover { transform: translate(-1px, -2px); }
.jn-name input { position: absolute; opacity: 0; pointer-events: none; }
.jn-name .dot { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); background: var(--white); }
.jn-name b { font: 900 clamp(20px, 3vw, 28px)/1.1 var(--f-display); word-break: break-all; }
.jn-name small { font: 800 11px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.jn-name:has(input:checked) { background: var(--gold-2); }
.jn-name:has(input:checked) .dot { background: var(--seal); box-shadow: inset 0 0 0 4px var(--gold-2); }
.jn-name:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; }
.jn-note { font-size: 14px; line-height: 1.4; color: var(--ink-soft); margin: 12px 0 0; }

/* paso 4: el pergamino de Tadashi */
.jn-scroll { position: relative; margin: 0 auto; max-width: 560px; padding: 26px clamp(16px, 4vw, 34px); background: #f7edd6; background-image: var(--paper-noise); border: var(--line) solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); }
.jn-scroll::before, .jn-scroll::after { content: ""; position: absolute; left: -12px; right: -12px; height: 18px; background: linear-gradient(180deg, #8e5631, #6b3a1e); border: 3px solid var(--ink); border-radius: 999px; }
.jn-scroll::before { top: -12px; } .jn-scroll::after { bottom: -12px; }
.jn-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; counter-reset: w; }
.jn-words li { counter-increment: w; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font: 800 clamp(20px, 3.4vw, 28px)/1 var(--f-display); animation: popin .35s ease both; min-width: 0; overflow-wrap: anywhere; }
.jn-words li::before { content: counter(w); flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--seal); color: var(--white); font: 900 16px/1 var(--f-display); }
.jn-words li:nth-child(2) { animation-delay: .25s; } .jn-words li:nth-child(3) { animation-delay: .5s; } .jn-words li:nth-child(4) { animation-delay: .75s; }
.jn-scroll .seal { position: absolute; right: 14px; top: -34px; width: 54px; height: 54px; display: grid; place-items: center; background: var(--seal); color: var(--paper); border: 3px solid var(--ink); border-radius: 10px; transform: rotate(8deg); font: 900 28px/1 var(--f-jp); box-shadow: var(--shadow-sm); }
@media (max-width: 420px) { .jn-words { grid-template-columns: minmax(0, 1fr); } }

/* paso 5 y 6: tarjetas */
.jn-cardwrap { display: grid; justify-items: center; gap: 14px; }
/* tamaño de vista: el texto más pequeño de las tarjetas (28 px en el canvas) queda a ≥ 11 px en escritorio */
.jn-cardwrap canvas { width: 100%; height: auto; max-width: 780px; border-radius: 18px; box-shadow: var(--shadow-lg); border: 2px solid var(--ink); background: var(--ink); transition: filter .35s; }
.jn-cardwrap canvas.is-hidden { filter: blur(14px) saturate(.6); }
.jn-cardwrap canvas.is-profile { max-width: 480px; border-radius: 10px; background: var(--paper-2); }
.jn-warn { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--seal); border-radius: 14px; background: #fff3f0; font-weight: 600; font-size: 15px; }
.jn-warn b { color: var(--seal); }
.jn-warn .ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--seal); color: var(--white); font: 900 18px/1 var(--f-jp); }
.jn-keep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 720px) { .jn-keep { grid-template-columns: minmax(0, 1fr); } }
.jn-box { border: 2px solid var(--ink); border-radius: 16px; padding: 14px; background: var(--paper); }
.jn-box h3 { font-size: 17px; text-transform: uppercase; margin: 0 0 8px; }
.jn-box p { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin: 0 0 10px; }
@media (max-width: 560px) { .jn-box p { font-size: 14px; } }
.jn-box.is-ok { background: #e3f6f3; border-color: var(--teal); }
.jn-box label { font: 800 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; display: block; margin: 8px 0 6px; }
.jn-box .input { min-height: 46px; font-size: 16px; }
.jn-pw { position: relative; }
.jn-pw .input { padding-right: 70px; }
.jn-pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.jn-check { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.jn-check .input { flex: 1; }
.jn-msg { font-weight: 700; font-size: 14px; margin: 8px 0 0; min-height: 1.3em; }
.jn-msg.ok { color: var(--teal); } .jn-msg.bad { color: var(--seal); }
.jn-check .input.is-wrong { border-color: var(--seal); animation: shake .4s ease; }
.jn-lock { flex: 1 1 180px; text-align: right; font: 700 14px/1.4 var(--f-body); color: var(--ink-soft); }
.jn-lock.is-ok { color: var(--teal); font-weight: 800; }
@media (max-width: 620px) { .jn-lock { flex-basis: 100%; order: -1; text-align: center; } }
.jn-public { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--ink-soft); }

/* paso 7 */
.jn-welcome { text-align: center; }
.jn-welcome .trio { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: 26px auto 6px; max-width: 400px; }
.jn-welcome .trio img { width: 32%; height: auto; }
.jn-welcome .trio img:nth-child(2) { width: 22%; margin: 0 -2%; position: relative; z-index: 1; }
.jn-welcome h2 { font-size: clamp(26px, 4.6vw, 44px); }
.jn-welcome h2 span { display: inline-block; max-width: 100%; color: var(--seal); text-transform: none; overflow-wrap: anywhere; }
.jn-welcome .row { justify-content: center; }
.jn-welcome .lead { margin: 0 auto 18px; max-width: 46ch; }
.jn-fine { font-size: 14px; line-height: 1.45; margin: 16px 0 0; }
.jn-restart { margin-top: 12px; }

/* el billete (乗車券): papel verde claro con trama fina, como los billetes de verdad */
.jn-ticketwrap { display: grid; justify-items: center; margin: 14px auto 18px; }
.jn-ticket {
  --lc: var(--rank-e); --lk: #fff;
  position: relative; width: min(100%, 580px); text-align: left; overflow: hidden;
  background: repeating-linear-gradient(45deg, rgba(31,154,146,.08) 0 1.5px, transparent 1.5px 7px), repeating-linear-gradient(-45deg, rgba(31,154,146,.08) 0 1.5px, transparent 1.5px 7px), #e8f5ee;
  border: var(--line) solid var(--ink); border-radius: 10px; box-shadow: var(--shadow-lg);
  animation: jnTicket .8s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes jnTicket { from { transform: translateY(-40px) rotate(-4deg) scale(.9); opacity: 0; } to { transform: rotate(-1deg); opacity: 1; } }
.tk-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 9px 16px; background: var(--lc); color: var(--lk); border-bottom: var(--line) solid var(--ink); }
.tk-jp { font: 900 22px/1 var(--f-jp); letter-spacing: .28em; }
.tk-en { font: 800 11px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.tk-no { margin-left: auto; font: 700 11px/1 var(--f-display); letter-spacing: .08em; opacity: .85; font-variant-numeric: tabular-nums; }
.tk-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 30px 12px 16px; }
.tk-who { display: grid; justify-items: center; gap: 8px; text-align: center; }
.tk-av { display: block; width: 92px; height: 92px; }
.tk-av > *, .tk-av img, .tk-av svg { width: 100% !important; height: 100% !important; }
.tk-name { display: grid; gap: 6px; }
.tk-who small { font: 800 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.tk-who b { font: 900 15px/1.1 var(--f-display); overflow-wrap: anywhere; max-width: 140px; }
.tk-route { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-st { display: grid; justify-items: center; gap: 4px; flex: none; text-align: center; }
.tk-code { display: grid; place-items: center; min-width: 76px; padding: 9px 10px; border-radius: 10px; background: var(--lc); color: var(--lk); border: var(--line) solid var(--ink); box-shadow: var(--shadow-sm); font: 900 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.tk-st.is-end .tk-code { background: #e9b949; color: var(--ink); font: 900 22px/1 var(--f-jp); letter-spacing: .08em; }
.tk-st small { font: 800 11px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tk-st small.jp { font: 700 12px/1 var(--f-jp); letter-spacing: .06em; text-transform: none; }
.tk-arrow { position: relative; flex: 1; min-width: 28px; height: 14px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 13px) center / 100% 3px no-repeat; }
.tk-arrow i { position: absolute; right: 1px; top: 50%; width: 11px; height: 11px; border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
.tk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 30px 10px 16px; border-top: 2px dashed rgba(22,20,24,.35); font: 700 11px/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tk-foot b { color: var(--seal); }
/* la muesca del revisor (改札鋏): aparece al «picar» el billete */
.tk-punch { position: absolute; right: -3px; top: 50%; width: 20px; height: 26px; margin-top: -13px; background: var(--white); border: 3px solid var(--ink); border-right: 0; border-radius: 7px 0 0 7px; transform: scaleX(0); transform-origin: 100% 50%; }
.jn-ticket.is-punched .tk-punch { transform: none; transition: transform .16s cubic-bezier(.3,1.6,.5,1); }
.jn-ticket.is-punched { animation: jnTicket .8s cubic-bezier(.2,.9,.3,1.15) both, jnPunch .25s ease .02s; }
@keyframes jnPunch { 50% { translate: 3px 0; } }
@media (max-width: 560px) {
  .tk-main { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-right: 26px; }
  .tk-who { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 10px; }
  .tk-av { width: 60px; height: 60px; }
  .tk-who b { max-width: none; }
  .tk-code { min-width: 62px; font-size: 18px; padding: 8px; }
  .tk-st.is-end .tk-code { font-size: 18px; }
  .tk-jp { font-size: 19px; }
  .tk-no { margin-left: 0; }
}

/* carnets con servidor: «ya tengo tarjeta», sin red y volver a empezar */
.jn-have { margin: 14px 0 0; text-align: right; font: 700 14px/1.4 var(--f-body); color: var(--ink-2); }
.jn-have a { font-weight: 800; text-underline-offset: 3px; }
@media (max-width: 560px) { .jn-have { text-align: center; } }
.jn-net { margin-top: 14px; }
.jn-net-btns { display: flex; margin-top: 10px; }
.jn-restart-row { justify-content: center; gap: 8px; margin-top: 12px; }
.jn-restart-row .jn-restart { margin-top: 0; }
.jn-welcome .jn-msg { text-align: center; }
.jn-welcome .jn-msg:empty { display: none; }

/* repaso 20/10 · la frase ya va sobre la tarjeta de acceso: las cuatro palabras, en grande debajo de la tarjeta
   (en el móvil la tarjeta se ve pequeña), y «sin mirar» las tapa también aquí y en el bocadillo de Tadashi */
.jn-words.is-mini { width: 100%; max-width: 780px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.jn-words.is-mini li { padding: 8px 10px; font-size: clamp(17px, 2.6vw, 22px); }
.jn-words.is-mini li::before { width: 26px; height: 26px; font-size: 14px; }
/* en pantallas anchas la tarjeta ya las enseña bien grandes: la lista solo hace falta en el móvil */
@media (min-width: 621px) { .jn-words.is-mini { display: none; } }
@media (max-width: 620px) { .jn-words.is-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jn-secret { transition: filter .35s; }
.is-peekless .jn-secret { filter: blur(9px); user-select: none; }
/* el gestor de contraseñas, plegado: es un extra, no un paso */
.jn-pmwrap { margin-top: 14px; }
.jn-pmwrap summary { cursor: pointer; width: fit-content; padding: 6px 0; font: 800 13px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.jn-pmwrap .jn-box { margin-top: 8px; }

/* «Why this system?»: plegado bajo la promesa del alta */
.jn-why { margin-top: 14px; border: 2px dashed rgba(22,20,24,.35); border-radius: 14px; padding: 10px 14px; background: rgba(255,253,247,.7); font-size: 14.5px; line-height: 1.5; }
.jn-why summary { cursor: pointer; font-weight: 800; color: var(--seal); }
.jn-why ul { margin: 10px 0 6px; padding-left: 18px; display: grid; gap: 6px; }
.jn-why p { margin: 6px 0 0; font-weight: 700; }