/* ==========================================================================
   /me — Mi progreso, el álbum Karuta (/me/collection) y el libro de sellos
   (/me/stamps). Pase de la línea, cartel de estación, billete de la semana,
   caja de karuta lacada, cuaderno washi de sellos y plano de metro mini.
   ========================================================================== */

.me-page { padding: clamp(20px, 4vw, 44px) 0 40px; }
.me-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: clamp(16px, 3vw, 28px); }
.me-head h1 { margin: .12em 0 0; }
.me-head h1 .jp { font: 400 .45em/1 var(--f-brush); color: var(--seal); margin-left: .25em; letter-spacing: .06em; }
.me-crumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.me-crumbs a { text-decoration: none; }
.me-crumbs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
@media (max-width: 520px) {
  .me-head h1 .jp { display: block; margin: .3em 0 0; font-size: .38em; }
  .me-head > div:first-child { width: 100%; }
  /* cada botón toma el ancho de su texto (+ aire fijo a los lados) y el sobrante se reparte */
  .me-crumbs { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
  .me-crumbs .btn { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 9px; font-size: 12px; letter-spacing: .02em; }
  .me-crumbs .hide-sm { display: none; }
}

/* pegatinas de los dibujos del canal en estados vacíos y cabeceras */
.me-stk { width: auto; flex: none; }
.me-empty { color: var(--ink-soft); font-size: 15px; margin: 0; }
.me-empty--art { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.me-empty--art p { margin: 0; }
.me-empty a { color: var(--seal); font-weight: 700; }

/* tinta de sello más llena en mis páginas (el filtro común deja el sello muy «nevado») */
.me-page .stamp:not(.is-locked) .stamp-ring, .me-page .stamp-glyph { filter: url(#ink-wear); }
.me-page .stamp-glyph { font-weight: 400; -webkit-text-stroke: calc(var(--s) * .006) currentColor; }
.me-page .stamp:not(.is-locked) .stamp-glyph img { filter: url(#ink-line); }
/* en los sellos pequeños (72 px en la tarjeta, 64-74 px en «Latest stamps») el desgaste fuerte rompe los
   trazos finos (el 一 de «First Step»): el glifo lleva una variante suave */
.me-page .sb-favs .stamp-glyph, .me-page .me-stamps .stamp-glyph { filter: url(#ink-wear-sm); }

/* las cartas escalan con su ancho (--w, regla común de components.css); en pequeño, solo dibujo, nombre y palabra */
.me-hand .kc-fact, .me-hand .kc-read, .album-grid.is-compact .kc-fact, .album-grid.is-compact .kc-read { display: none; }
.album-grid.is-compact .kc-name { font-size: max(11px, 1.12em); }
.album-grid.is-compact .kc-jp .jp { font-size: max(13px, 1.45em); }
.album-grid.is-compact .kc-jp { padding-bottom: .35em; }

/* ---------------- ÁLBUM KARUTA ---------------- */
.album-box {
  position: relative; border: var(--line-thick) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: radial-gradient(circle at 20% 0%, #5a1612, #2a0b09 60%, #160605); color: var(--paper);
  padding: clamp(16px, 3vw, 28px); overflow: hidden;
}
.album-box::before { /* laca + pan de oro */
  content: ""; position: absolute; inset: 8px; border: 2px solid rgba(224,169,28,.55); border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 0 0 4px rgba(22,20,24,.4), inset 0 0 0 5px rgba(224,169,28,.25);
}
/* marca de agua a la izquierda de la pegatina de Rin, en una sola columna (nowrap) para que se lea entera */
.album-box::after { content: "かるた"; position: absolute; right: 150px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; white-space: nowrap; font: 400 clamp(48px, 5vw, 58px)/1 var(--f-brush); color: rgba(224,169,28,.12); pointer-events: none; }
.album-top { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 28px); align-items: center; }
.album-count { font: 900 clamp(44px, 8vw, 72px)/0.9 var(--f-display); color: var(--gold-2); text-shadow: 3px 3px 0 #000; white-space: nowrap; }
.album-count .of { font-size: .45em; color: var(--paper); }
.album-count small { display: block; font: 800 13px/1.3 var(--f-display); letter-spacing: .16em; color: var(--paper); text-transform: uppercase; text-shadow: none; margin-top: 8px; }
.album-stats { display: grid; gap: 10px; min-width: 0; }
.album-stats .bar { border-color: var(--gold); background: rgba(243,236,220,.12); height: 18px; }
.album-stats .bar > i { border-color: var(--gold); }
.album-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.album-chips .tag { padding: 4px 12px 4px 5px; gap: 7px; }
.album-chips .tag:not(:has(.jp)) { padding-left: 12px; }
.album-chips .tag { background: rgba(243,236,220,.1); color: var(--paper); border-color: rgba(224,169,28,.6); }
.album-chips .tag b { color: var(--gold-2); }
.album-chips .tag .jp { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font: 900 11px/1 var(--f-jp); }
.album-art { position: relative; z-index: 1; align-self: end; height: 150px; margin: -10px 4px 0 0; transform: rotate(3deg); } /* botas dentro del marco dorado */
/* el dibujo de Rin presentando trae un destello ✦ suelto a la derecha de las rodillas: se recorta
   (polígono más grande que la caja para no comerse el borde blanco de la pegatina) */
.me-page .sticker[src$="/rin_presenting.webp"] { clip-path: polygon(-12px -12px, calc(100% + 12px) -12px, calc(100% + 12px) 57%, 86% 57%, 86% 70%, calc(100% + 12px) 70%, calc(100% + 12px) calc(100% + 12px), -12px calc(100% + 12px)); }
.album-prize { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 16px 8px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--gold-2); color: var(--ink); font: 800 13px/1.25 var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 2px 2px 0 #000; justify-self: start; }
.album-prize:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
@media (max-width: 760px) { .album-art { display: none; } .album-top { grid-template-columns: auto minmax(0, 1fr); } .album-box::after { right: 18px; } }

.set-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; padding: 18px 2px 6px; margin: 0 0 4px; }
.set-tab {
  position: relative; flex: none; scroll-snap-align: start; display: grid; grid-template-columns: 40px auto; gap: 2px 10px; align-items: center; text-align: left;
  padding: 8px 12px 8px 8px; min-width: 0; cursor: pointer;
  background: var(--white); border: var(--line) solid var(--ink); border-radius: 16px 16px 6px 6px; box-shadow: var(--shadow-sm);
  transition: transform .12s, background .2s;
}
.set-tab:hover { transform: translateY(-2px); }
.set-tab .ico { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); border: 2px solid var(--ink); font: 900 20px/1 var(--f-jp); }
.set-tab b { font: 800 14px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-wrap: balance; }
.set-tab small { font: 700 12px/1 var(--f-display); color: var(--ink-soft); letter-spacing: .06em; }
.set-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); transform: translateY(-3px); }
.set-tab[aria-selected="true"] small { color: var(--gold-2); }
.set-tab[aria-selected="true"] .ico { background: var(--seal); color: var(--white); border-color: var(--paper); }
.set-tab[data-set="rt"] .ico { background: var(--teal-2); }
.set-tab[data-set="guardians"] .ico { background: #c9c3ef; }
.set-tab[data-set="friends"] .ico { background: var(--cream); }
.set-tab[data-set="mikan"] .ico { background: var(--orange-2); }
.set-tab.is-complete small::after { content: " ★"; color: var(--gold); }
.has-new::after { /* punto de «nuevo» en pestañas */
  content: ""; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--seal); border: 2px solid var(--ink); animation: pulse 1.4s ease-in-out infinite;
}
@media (max-width: 640px) {
  .set-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; padding-top: 16px; }
  .set-tab { min-width: 0; grid-template-columns: 34px minmax(0, 1fr); padding: 7px 10px 7px 7px; border-radius: 14px; }
  .set-tab .ico { width: 34px; height: 34px; font-size: 17px; }
  .set-tab b { font-size: 12.5px; white-space: normal; line-height: 1.15; }
  .set-tab[aria-selected="true"] { transform: none; }
}

.set-panel { margin-top: 10px; }
.set-info { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; margin-bottom: 14px; }
.set-info h2 { margin: 0; font-size: clamp(24px, 3.6vw, 36px); }
.set-info h2 .jp { font: 400 .6em/1 var(--f-brush); color: var(--seal); margin-left: .3em; white-space: nowrap; }
.set-info p { margin: 0; color: var(--ink-2); grid-column: 1 / -1; }
.set-info .set-progress { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; font: 800 14px/1 var(--f-display); font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px 6px 6px; cursor: pointer;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px; font: 800 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  transition: transform .12s, background .15s;
}
.chip:hover { transform: translateY(-1px); }
.chip i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 900 12px/1 var(--f-jp); font-style: normal; background: var(--paper); color: var(--ink); }
.chip small { font: 700 12px/1 var(--f-display); opacity: .7; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.chip[data-r="rare"] i { background: var(--seal); color: var(--white); }
.chip[data-r="epic"] i { background: linear-gradient(120deg, #b88a12, #ffe08a, #c7951b); }
.chip[data-r="legendary"] i { background: conic-gradient(#ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3); }
.chip[data-r="all"] { padding-left: 16px; padding-right: 16px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip.toggle { margin-left: auto; padding-left: 14px; }

.album-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), var(--cw, 160px)); gap: var(--gap, 14px); justify-content: center; }
.album-cell { position: relative; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; border-radius: 14px; animation: cellIn .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes cellIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.album-grid.is-still .album-cell { animation: none; }
.album-cell:focus-visible { outline-offset: 6px; }
.album-cell .copies {
  position: absolute; z-index: 7; right: -6px; bottom: -8px; min-width: 34px; height: 30px; padding: 0 8px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border: 2px solid var(--paper); border-radius: 999px; font: 900 14px/1 var(--f-display); box-shadow: var(--shadow-sm);
}
.album-cell .fav { position: absolute; z-index: 7; left: -6px; top: -8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-2); border: 2px solid var(--ink); font-size: 16px; }
.album-cell .new-badge { position: absolute; z-index: 7; left: 50%; top: -11px; transform: translateX(-50%) rotate(-3deg); padding: 4px 9px; border-radius: 999px; background: var(--seal); color: var(--white); border: 2px solid var(--ink); font: 900 11px/1 var(--f-display); letter-spacing: .14em; box-shadow: var(--shadow-sm); }
.album-cell .kcard.is-locked .kc-top .kc-num { opacity: 1; }
.album-cell .noart { position: absolute; inset: 0; display: grid; place-items: center; font: 400 3em/1 var(--f-brush); color: rgba(22,20,24,.12); }
.album-cell.is-nope { animation: shake .4s ease; }
.album-cell .kcard.is-locked { transition: transform .2s; }
.album-cell:hover .kcard.is-locked { transform: translateY(-3px); }
.album-cell:hover .kcard.is-locked .kc-frame { border-color: rgba(22,20,24,.6); }
.album-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 30px 16px; border: 3px dashed rgba(22,20,24,.25); border-radius: var(--radius-lg); }
.album-empty b { display: block; font: 800 22px/1.2 var(--f-display); text-transform: uppercase; }
.album-empty p { margin: 0; color: var(--ink-2); max-width: 40ch; }

/* vista grande */
.card-view { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.card-view .kcard { touch-action: none; }
.card-view h3 { margin: 0 0 4px; font-size: 26px; text-transform: uppercase; }
.card-view .cv-jp { font: 900 34px/1.1 var(--f-jp); }
.card-view .cv-read { color: var(--ink-soft); font-weight: 600; margin: 4px 0 10px; }
.card-view .cv-fact { font-size: 15px; color: var(--ink-2); }
.card-view .cv-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.card-view .row .btn { flex: 1 1 auto; }
.cv-box { animation: cvIn .35s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes cvIn { from { transform: scale(.94) translateY(10px); opacity: 0; } }
.cv-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 2px dashed rgba(22,20,24,.18); font: 800 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.cv-nav .btn-icon { font-size: 20px; }
.modal-box:has(.cv-box) { width: min(760px, 100%); }
@media (max-width: 640px) {
  .card-view { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .card-view .cv-meta { justify-content: center; }
}

/* ---------------- LIBRO DE SELLOS ---------------- */
.sb-book {
  position: relative; border: var(--line-thick) solid var(--ink); border-radius: 10px 22px 22px 10px; box-shadow: var(--shadow-lg);
  background: var(--paper-2); background-image: var(--paper-noise), var(--fibers);
  padding: clamp(16px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(30px, 5vw, 54px);
}
.sb-book::before { /* encuadernación japonesa (fukuro-toji) */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(18px, 3vw, 30px);
  background: var(--indigo); border-right: 3px solid var(--ink); border-radius: 6px 0 0 6px;
  background-image: radial-gradient(circle, var(--paper) 0 3px, transparent 3.5px); background-size: 100% 70px; background-position: center 20px; background-repeat: repeat-y;
}
.sb-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 28px); align-items: center; }
.sb-total { text-align: center; display: grid; justify-items: center; gap: 6px; }
.sb-total b { display: block; font: 900 clamp(40px, 7vw, 64px)/.9 var(--f-display); color: var(--seal); }
.sb-total b span { font-size: .42em; color: var(--ink); }
.sb-total small { font: 800 12px/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.sb-total .bar { width: 100%; min-width: 110px; height: 12px; }
.sb-art { height: 168px; margin: -40px -6px -26px 0; transform: rotate(4deg); align-self: end; }
.sb-inks { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-ink { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); font: 800 13px/1 var(--f-display); letter-spacing: .04em; }
.sb-ink i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--c); box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 5px var(--c); }
.sb-ink span { font-variant-numeric: tabular-nums; }
.sb-favs { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border: 2px dashed rgba(22,20,24,.3); border-radius: 14px; background: rgba(255,253,247,.6); }
.sb-favs > b { font: 800 12px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.sb-fav-slots { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; } /* los tres huecos nunca se parten */
.sb-favs .slot { width: 72px; height: 72px; border-radius: 50%; border: 2px dashed rgba(22,20,24,.3); display: grid; place-items: center; color: var(--ink-soft); font: 800 22px/1 var(--f-display); }
.sb-next { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sb-next > b { font: 800 12px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--seal); }
.sb-next a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); text-decoration: none; font: 800 12.5px/1 var(--f-display); letter-spacing: .03em; transition: transform .12s; }
.sb-next a:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sb-next a i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--c); color: var(--c); font: 400 12px/1 var(--f-brush); font-style: normal; }
.sb-next a small { font: 700 11.5px/1 var(--f-display); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sb-favslot { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; position: relative; transition: transform .15s; }
.sb-favslot:hover { transform: rotate(-6deg) scale(1.05); }
.sb-favslot::after { content: "✕"; position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); font: 800 11px/1 var(--f-display); opacity: 0; transition: opacity .15s; }
.sb-favslot:hover::after, .sb-favslot:focus-visible::after { opacity: 1; }
@media (max-width: 760px) { .sb-art { display: none; } .sb-top { grid-template-columns: auto minmax(0, 1fr); } }

.sb-tabs { display: flex; gap: 6px; margin: 22px 0 0; padding: 0 2px; }
.sb-tab {
  position: relative; flex: 1 1 auto; display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 10px 10px 8px; cursor: pointer; white-space: nowrap;
  background: var(--paper-3); border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0;
  font: 800 12.5px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; transition: background .15s;
}
.sb-tab:hover { background: var(--cream); }
.sb-tab .jp { font: 400 15px/1 var(--f-brush); color: var(--seal); letter-spacing: 0; }
.sb-tab small { font: 700 11px/1 var(--f-display); opacity: .65; font-variant-numeric: tabular-nums; }
.sb-tab[aria-selected="true"] { background: var(--white); transform: translateY(2px); }
.sb-tab.is-full small { opacity: 1; color: var(--seal); }
.sb-page {
  position: relative; border: 3px solid var(--ink); border-radius: 0 14px 14px 14px; background: var(--white);
  background-image: linear-gradient(rgba(31,154,146,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(31,154,146,.08) 1px, transparent 1px);
  background-size: 24px 24px; padding: clamp(14px, 3vw, 26px);
}
@media (max-width: 1100px) { /* seis pestañas no caben en una fila: índice en rejilla */
  .sb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
  .sb-tab { border-bottom: 3px solid var(--ink); border-radius: 12px; padding: 10px 6px; flex-wrap: wrap; row-gap: 4px; }
  .sb-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); transform: none; }
  .sb-tab[aria-selected="true"] .jp { color: var(--gold-2); }
  .sb-page { border-radius: 14px; }
}
@media (max-width: 520px) { /* en móvil, dos columnas: «Collection 収集 0/7» con aire a los lados */
  .sb-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sb-tab { font-size: 12px; letter-spacing: .03em; padding: 10px 8px 9px; column-gap: 6px; row-gap: 5px; }
  .sb-tab small { flex-basis: 100%; text-align: center; } /* recuento siempre en su propia línea: todas las pestañas iguales */
  .sb-tab .jp { font-size: 14px; }
}
.sb-page-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.sb-page h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: .2em; }
.sb-page h2 .jp { font: 400 .7em/1 var(--f-brush); color: var(--seal); margin-left: .3em; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 420px) { .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.sb-cell { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 14px 10px 12px; border-radius: 14px; border: 2px solid transparent; animation: cellIn .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 30ms); }
.sb-cell.is-got { background: rgba(255,253,247,.75); border-color: rgba(22,20,24,.12); }
.sb-cell.is-new { border-color: var(--seal); box-shadow: 0 0 0 3px rgba(196,32,28,.12); }
.sb-cell b { font: 800 14px/1.2 var(--f-display); text-wrap: balance; }
.sb-cell small { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.sb-cell .date { font: 700 11px/1 var(--f-display); letter-spacing: .1em; color: var(--seal); text-transform: uppercase; }
.sb-cell.is-locked b { color: var(--ink-soft); }
.sb-cell .hint { font-style: italic; color: #6b3fa0; }
.nw { white-space: nowrap; }
.sb-cell .sb-dist { font: 700 12px/1.2 var(--f-display); letter-spacing: .04em; color: var(--seal); }
.sb-cell .reward { font: 700 11px/1.3 var(--f-display); letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; }
.sb-cell .new-tag { position: absolute; z-index: 2; top: 6px; left: 6px; padding: 4px 8px 4px 9px; border-radius: 999px; background: var(--seal); color: var(--white); font: 900 11px/1 var(--f-display); letter-spacing: .12em; }
.sb-press { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.sb-press:active .stamp { transform: rotate(var(--rot)) scale(.92); }
.sb-press .stamp { transition: transform .12s; }
.sb-prog { width: 100%; max-width: 130px; display: grid; gap: 4px; }
.sb-prog .bar { height: 10px; }
.sb-prog span { font: 800 11px/1 var(--f-display); letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sb-pin { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; transition: transform .12s, background .15s; }
.sb-pin:hover { transform: scale(1.1) rotate(-8deg); }
.sb-pin[aria-pressed="true"] { background: var(--gold-2); }
/* leyenda de recompensas: una fila por tinta, con su muestra y aire entre líneas */
.sb-legend { margin: 18px 0 0; padding: 14px 16px; border: 2px dashed rgba(22,20,24,.25); border-radius: 14px; background: rgba(255,253,247,.6); color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.sb-legend > b { display: block; margin-bottom: 10px; font: 800 12px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.sb-legend ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px 28px; }
.sb-legend li { display: flex; align-items: flex-start; gap: 10px; }
.sb-legend li i { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 3px solid var(--c); box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 5px var(--c); }
.sb-legend li b { color: var(--ink); }
.sb-legend p { margin: 12px 0 0; }
.sb-legend p::before { content: ""; display: block; margin-bottom: 10px; border-top: 1.5px dashed rgba(22,20,24,.18); } /* separador */
.ink-splash { position: absolute; z-index: 3; left: 50%; top: 58px; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--c, var(--seal)) 0 8%, transparent 9%), radial-gradient(circle at 20% 30%, var(--c, var(--seal)) 0 4%, transparent 5%), radial-gradient(circle at 80% 25%, var(--c, var(--seal)) 0 3%, transparent 4%), radial-gradient(circle at 70% 80%, var(--c, var(--seal)) 0 4%, transparent 5%); opacity: 0; animation: splash .6s ease-out; }
@keyframes splash { 0% { opacity: .55; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.35); } }
@media (max-width: 520px) {
  .sb-top { grid-template-columns: minmax(0, 1fr); }
  .sb-favs > b, .sb-favs > small { flex-basis: 100%; }
  .sb-favs .slot { width: 64px; height: 64px; }
  .sb-inks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sb-ink { padding-right: 10px; font-size: 12px; gap: 6px; letter-spacing: .02em; white-space: nowrap; }
  .sb-book { padding-right: 12px; }
}

/* ---------------- MI PROGRESO ---------------- */
/* el DOM va en el orden de móvil (= orden del foco, sin `order`); en escritorio, dos columnas que crecen
   por separado: la principal ocupa las filas 1-2 y la lateral la 1, así «Best times» empieza tras la
   principal y «Settings» tras la lateral (la fila 2 es auto y la 3 flexible, y nadie deja huecos) */
.me-grid {
  display: grid; gap: clamp(16px, 2.4vw, 26px); align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
}
.me-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 26px); min-width: 0; }
.me-col--main { grid-column: 1; grid-row: 1 / 3; }
.me-col--side { grid-column: 2; grid-row: 1; }
.me-grid > .me-o-times { grid-column: 1; grid-row: 3; }
.me-grid > .me-o-settings { grid-column: 2; grid-row: 2 / 4; }
@media (max-width: 900px) {
  .me-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .me-col { display: contents; }
  .me-col--main, .me-col--side, .me-grid > .me-o-times, .me-grid > .me-o-settings { grid-column: auto; grid-row: auto; }
}
.me-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.me-sec-h h2 { font-size: clamp(20px, 2.6vw, 26px); margin: 0; }
.me-sec-h h2 .jp { font: 700 .6em/1 var(--f-jp); color: var(--seal); margin-left: .2em; letter-spacing: .04em; }
.me-sec-h a, .me-sec-link { font: 800 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); white-space: nowrap; }
.me-sec-note { flex: none; }

/* aviso de cuenta, con Rin presentando */
.save-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; background: var(--ink); color: var(--paper); margin: 26px 0 22px; padding-top: 14px; padding-bottom: 14px; }
.save-cta p { margin: 0; max-width: 52ch; }
.save-cta b { color: var(--gold-2); }
.save-cta-art { margin: -52px 0 -18px -4px; align-self: end; transform: rotate(-3deg); }
@media (max-width: 640px) {
  .save-cta { grid-template-columns: auto minmax(0, 1fr); margin-top: 34px; }
  .save-cta-art { height: 112px !important; margin-top: -48px; }
  .save-cta .btn { grid-column: 1 / -1; }
}

/* perfil */
.me-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.me-hero .avatar { width: 96px; height: 96px; border-radius: 50%; border: var(--line-thick) solid var(--ink); background: var(--rc, var(--rank-e)); display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow); }
.me-hero .avatar img, .me-hero .avatar svg { width: 100%; height: 100%; object-fit: contain; }
.me-hero .avatar-letter { font: 900 46px/1 var(--f-display); }
.me-id-k { display: block; font: 800 11px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.me-hero h2 { margin: 0 0 2px; font-size: clamp(24px, 4vw, 34px); text-transform: none; overflow-wrap: anywhere; line-height: 1.02; }
.me-hero .title { color: var(--seal); font-weight: 700; }
.me-pass { /* pase de la línea: color de la línea a la izquierda, como un abono */
  margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center;
  padding: 10px 12px 10px 22px; border: var(--line) solid var(--ink); border-radius: 16px;
  background: linear-gradient(90deg, var(--lc) 0 10px, var(--ink) 10px 13px, var(--paper) 13px);
}
.roundel { /* número de estación al estilo del metro de Tokio */
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--white); border: 7px solid var(--lc); box-shadow: 0 0 0 3px var(--ink), 3px 3px 0 3px var(--ink);
}
.roundel b { font: 900 17px/.9 var(--f-display); }
.roundel small { font: 900 19px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.me-pass-txt { min-width: 0; }
.me-pass-txt b { font: 800 15px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.me-pass-txt b .jp { font: 700 13px/1 var(--f-jp); color: var(--ink-soft); letter-spacing: .04em; text-transform: none; margin-left: 4px; }
.me-pass-txt small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.me-pass-txt small b { font: 700 14px/1 var(--f-body); color: var(--ink); text-transform: none; letter-spacing: 0; }
/* el pase se apila cuando su panel es estrecho (móvil o columna de 1024 px) */
.me-o-hero { container-type: inline-size; }
@container (max-width: 520px) {
  .me-pass { grid-template-columns: auto minmax(0, 1fr); padding-left: 20px; }
  .me-pass .btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .me-hero { gap: 14px; }
  .me-hero .avatar { width: 80px; height: 80px; }
}

/* plano mini y cartel de estación (駅名標) */
.falls { position: relative; width: 100%; aspect-ratio: 16 / 7; border: var(--line) solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--white); background-image: linear-gradient(rgba(22,20,24,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,20,24,.05) 1px, transparent 1px); background-size: 22px 22px; }
.falls svg { width: 100%; height: 100%; display: block; }
.eki-sign { display: block; margin-top: 12px; text-decoration: none; border: var(--line) solid var(--ink); border-radius: 12px; background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s; }
.eki-sign:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); }
.es-here { display: block; text-align: center; padding: 9px 10px 0; font: 800 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--seal); }
.es-main { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px 12px; }
.es-code { flex: none; padding: 6px 11px; background: var(--lc); color: var(--li); border: 2px solid var(--ink); border-radius: 8px; font: 900 15px/1 var(--f-display); letter-spacing: .04em; }
.es-main b { font: 800 17px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.es-band { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 14px; background: var(--lc); color: var(--li); border-top: var(--line) solid var(--ink); font: 800 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.es-band .jp { font: 700 13px/1 var(--f-jp); letter-spacing: .12em; }

/* las cinco barras */
.me-bars { display: grid; gap: 14px; }
.me-bars .bar-row { grid-template-columns: 96px 1fr 52px; }
.me-bars .bar-row small { display: block; font: 600 12px/1.1 var(--f-body); letter-spacing: 0; color: var(--ink-soft); margin-top: 4px; }

/* racha, billete y día de gato */
.me-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.me-stat { display: grid; align-content: center; justify-items: center; gap: 4px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); padding: 12px 8px; text-align: center; }
.me-stat b { display: block; font: 900 clamp(28px, 5vw, 38px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.me-stat small { font: 800 11px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.me-stat--fire { background: var(--ink); color: var(--paper); }
.me-stat--fire b { color: var(--gold-2); }
.me-stat--fire small { color: var(--paper); opacity: .8; }
.cat-face { position: relative; width: 42px; height: 42px; }
.cat-face img { width: 100%; height: 100%; object-fit: contain; }
.cat-face i { position: absolute; right: -14px; top: -8px; font: 800 12px/1 var(--f-display); color: var(--indigo); font-style: normal; letter-spacing: .1em; animation: floaty 2.4s ease-in-out infinite; }
.me-stat.cat small span { color: #137068; } /* teal oscurecido: 5:1 sobre el papel */
.me-stat.cat.is-used img { filter: grayscale(.5); }
.me-stat.cat.is-used small span { color: var(--ink-soft); }
.me-week { margin-top: 12px; }
.ticket { /* billete de tren: perforación y agujeros de la picadora de billetes */
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 10px 16px 10px 14px; border: 2px solid var(--ink); border-radius: 10px;
  background: #e7efe2; background-image: repeating-linear-gradient(135deg, rgba(95,143,47,.08) 0 6px, transparent 6px 12px);
}
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); }
.ticket::before { left: -8px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -8px; clip-path: inset(0 50% 0 0); }
.ticket-k { display: grid; gap: 3px; padding-right: 14px; border-right: 2px dashed rgba(22,20,24,.35); font: 800 11px/1.1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.ticket-k small { font: 700 12px/1 var(--f-jp); letter-spacing: .1em; color: var(--choc); text-transform: none; }
.punches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; }
.punch { display: grid; justify-items: center; gap: 4px; }
.punch i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(22,20,24,.32); font: 900 11px/1 var(--f-jp); font-style: normal; color: var(--choc); }
.punch.is-done i { border: 2px solid var(--ink); background: var(--ink); box-shadow: inset 3px 3px 0 rgba(255,253,247,.22); } /* agujero de la picadora */
.punch.is-nap i { border: 2px solid var(--orange); background: var(--cream); }
.punch.is-today:not(.is-done) i { border: 2px solid var(--seal); animation: pulse 1.6s ease-in-out infinite; }
.punch small { font: 800 11px/1 var(--f-display); color: var(--ink-soft); }
.punch.is-today small { color: var(--seal); }
@media (max-width: 600px) { /* en móvil, el rótulo del billete arriba y los 7 agujeros debajo */
  .ticket { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px 14px 10px; }
  .ticket-k { display: flex; align-items: baseline; gap: 8px; padding: 0 0 7px; border-right: 0; border-bottom: 2px dashed rgba(22,20,24,.35); }
}

/* puertas de transbordo con sus guardianes */
.me-gates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.me-gate { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; text-decoration: none; padding-top: 2px; }
.mg-face { position: relative; width: 100%; max-width: 72px; aspect-ratio: 1; border-radius: 50%; border: var(--line) solid var(--ink); background: color-mix(in srgb, var(--lc) 26%, var(--white)); box-shadow: 0 0 0 4px var(--lc); transition: transform .15s; }
.me-gate.is-terminal .mg-face { border-radius: 16px; }
.mg-face img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.me-gate:hover .mg-face { transform: translateY(-3px) rotate(-3deg); }
.me-gate.is-locked .mg-face { background: var(--paper-2); box-shadow: 0 0 0 4px rgba(22,20,24,.08); border-style: dashed; border-color: rgba(22,20,24,.45); }
.me-gate.is-locked img { filter: grayscale(1) opacity(.4); }
.me-gate.is-open .mg-face { box-shadow: 0 0 0 4px var(--gold-2), 0 0 0 7px var(--ink); animation: floaty 2.6s ease-in-out infinite; }
.mg-seal { position: absolute; right: -10px; bottom: -6px; padding: 4px 6px; background: var(--seal); color: var(--white); border: 2px solid var(--ink); border-radius: 6px; font: 900 11px/1 var(--f-jp); letter-spacing: .02em; transform: rotate(-10deg); box-shadow: var(--shadow-sm); }
.mg-seal.is-gold { background: var(--gold-2); color: var(--ink); }
.me-gate b { font: 800 12.5px/1.15 var(--f-display); letter-spacing: .02em; margin-top: 6px; }
.me-gate small { font: 700 11px/1 var(--f-display); letter-spacing: .04em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.me-gate.is-open small { color: var(--seal); }
@media (max-width: 560px) { .me-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; } .mg-face { max-width: 70px; } }

/* mejores tiempos */
.me-times { display: grid; gap: 8px; margin: 0; }
.me-times div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 14px 7px 7px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; font-weight: 600; }
.me-times dt { display: flex; align-items: center; gap: 10px; min-width: 0; font: 800 13px/1.25 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.me-times dt i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: var(--paper); font: 900 15px/1 var(--f-jp); font-style: normal; }
.me-times dt small { display: block; margin-top: 3px; font: 700 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--seal); }
.me-times dd { margin: 0; font: 900 16px/1.3 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* últimos sellos y abanico de cartas */
.me-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px 4px; justify-items: center; }
.me-stamps > a { text-decoration: none; border-radius: 50%; transition: transform .15s; }
.me-stamps > a:hover { transform: scale(1.08) rotate(-5deg); }
.me-stamps .me-empty--art { grid-column: 1 / -1; justify-self: stretch; }
@media (max-width: 560px) { .me-stamps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .me-stamps .stamp { --s: 64px !important; } }
.me-hand { display: flex; justify-content: center; padding: 14px 0 12px; }
.me-hand-card { position: relative; flex: none; margin-left: calc(var(--w) * var(--ov, .4) * -1); text-decoration: none; transform-origin: 50% 100%; transform: translateY(calc(var(--i) * var(--i) * 4px)) rotate(calc(var(--i) * 5deg)); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.me-hand-card:first-child { margin-left: 0; }
.me-hand-card:hover, .me-hand-card:focus-visible { transform: translateY(-16px) rotate(0deg); z-index: 5; }
.me-prize { text-wrap: balance; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border: 2px dashed var(--ink); border-radius: 12px; background: color-mix(in srgb, var(--gold-2) 55%, var(--white)); font: 800 13px/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; }
.me-prize:hover { background: var(--gold-2); }

/* tarjeta de perfil */
.me-card-preview { display: grid; gap: 12px; justify-items: center; }
.me-card-preview canvas { width: min(100%, 360px); height: auto; border-radius: 10px; box-shadow: var(--shadow-lg); border: 2px solid var(--ink); background: var(--paper-2); transition: opacity .25s, transform .25s; }
.me-card-preview canvas.is-drawing { opacity: .55; }
.me-card-preview canvas:hover { transform: rotate(-1deg) translateY(-3px); }
.me-card-tip { margin: 0; text-align: center; font-size: 15px; line-height: 1.45; font-weight: 600; }
.me-card-note { margin: 0; text-align: center; font-size: 14px; line-height: 1.45; }
.me-card-tip:empty { display: none; }
.me-card-tip a { color: var(--seal); font-weight: 800; }

/* ajustes */
.me-settings { display: grid; gap: 12px; }
.me-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1.5px dashed rgba(22,20,24,.18); flex-wrap: wrap; }
.me-set:last-child { border-bottom: 0; }
.me-set > span:first-child { flex: 1 1 190px; min-width: 0; } /* el texto se parte antes de echar el interruptor a otra línea */
.me-set > span b { display: block; font: 800 15px/1.2 var(--f-display); }
.me-set > span small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.me-set select { min-height: 42px; border: 2px solid var(--ink); border-radius: 12px; padding: 0 10px; font: 700 15px var(--f-body); background: var(--white); }
.switch { position: relative; width: 62px; height: 34px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.switch i { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-3); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); transition: transform .2s; }
.switch input:checked + i { background: var(--teal); }
.switch input:checked + i::after { transform: translateX(28px); }
.switch input:focus-visible + i { outline: 3px solid var(--teal); outline-offset: 3px; }
.op-picks { display: flex; gap: 8px; }
.op-pick { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--ink); overflow: hidden; padding: 0; cursor: pointer; background: var(--paper-2); transition: transform .12s; }
.op-pick:hover { transform: translateY(-2px); }
.op-pick img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: scale(1.5); transform-origin: 50% 15%; }
.op-pick[data-op="mikan"] img { transform: none; object-fit: contain; }
.op-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 6px var(--ink); }
.danger-zone { border-color: var(--seal); }

@media (max-width: 520px) {
  .album-top { grid-template-columns: minmax(0, 1fr); }
  .album-count small { display: inline; margin-left: 10px; }
  .album-chips { gap: 7px 6px; }
  .album-chips .tag { padding-right: 11px; gap: 6px; }
  .filters { gap: 8px 7px; }
  .chip.toggle { margin-left: 0; }
  .chip { min-height: 38px; font-size: 12px; padding-right: 13px; gap: 7px; }
  .me-empty--art { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .me-empty--art .me-stk { height: auto !important; width: 70px; max-height: 110px; object-fit: contain; }
}
/* el sello «slam» (escala 2,6) no debe ensanchar la página en móvil */
.sb-book, .me-stamps { overflow-x: clip; overflow-clip-margin: 8px; }
@media (prefers-reduced-motion: reduce) { .me-hand-card, .album-cell, .sb-cell { animation: none; } }

/* tarjeta de invitado: es una muestra igual para todos, no la del usuario */
.me-card-frame { position: relative; display: grid; place-items: center; width: min(100%, 360px); }
.me-card-frame canvas { width: 100%; }
.me-card-sample { display: none; }
.me-card-preview.is-sample canvas { filter: grayscale(.55) opacity(.72); }
.me-card-preview.is-sample canvas:hover { transform: none; }
.me-card-preview.is-sample .me-card-sample {
  display: block; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: 6px 22px; border: 4px solid var(--seal); border-radius: 10px; background: color-mix(in srgb, var(--white) 82%, transparent);
  color: var(--seal); font: 900 clamp(26px, 9vw, 40px)/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink); pointer-events: none;
}

/* hueco de la ficha mientras me.js no la pinta (alturas medidas de la ficha): evita el salto al cargar */
#hero:empty { min-height: 352px; }
@media (min-width: 600px) { #hero:empty { min-height: 280px; } }

/* hueco del aviso «Get your ticket» (alto medido + márgenes del panel, que se colapsan fuera de #save-cta) */
.no-ticket #save-cta:empty { min-height: 146px; }
@media (max-width: 900px) { .no-ticket #save-cta:empty { min-height: 165px; } }
@media (max-width: 760px) { .no-ticket #save-cta:empty { min-height: 230px; } }
@media (max-width: 480px) { .no-ticket #save-cta:empty { min-height: 282px; } }

/* álbum y libro de sellos en pantalla ancha: huecos del contenido que pinta el JS (alturas medidas a 1280 px).
   Sin ellos, el panel crecía de golpe al cargar (CLS 0,41 en el álbum y 0,32 en los sellos) */
@media (min-width: 761px) {
  .set-tabs:empty { min-height: 106px; } #set-info:empty { min-height: 95px; } #filters:empty { min-height: 86px; }
  #album-chips:empty { min-height: 72px; } #grid:empty { min-height: 184px; }
  .sb-tabs:empty { min-height: 91px; } #inks:empty { min-height: 84px; } #favs:empty { min-height: 160px; }
  #total:empty { min-height: 90px; } #page:empty { min-height: 212px; }
}
@media (min-width: 1024px) { .set-tabs:empty { min-height: 91px; } #filters:empty { min-height: 40px; } #favs:empty { min-height: 134px; } }
@media (min-width: 1280px) { #album-chips:empty { min-height: 66px; } .sb-tabs:empty { min-height: 38px; } #inks:empty { min-height: 38px; } #favs:empty { min-height: 100px; } }

/* la tarjeta (carnet con servidor): estado discreto bajo el nombre y la fila «Your card» de ajustes */
.me-sync { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border: 2px solid rgba(22,20,24,.25); border-radius: 999px; background: var(--paper); font: 700 12px/1.25 var(--f-display); letter-spacing: .04em; color: var(--ink-2); }
.me-sync[hidden] { display: none; }
.me-sync::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.me-sync.is-ok { border-color: var(--teal); color: var(--ink); }
.me-sync.is-ok::before { background: var(--teal); }
.me-sync.is-wait::before { background: var(--gold); animation: meSyncBlink 1.2s ease-in-out infinite; }
.me-sync.is-off { border-color: var(--seal); }
.me-sync.is-off::before { background: var(--seal); }
.me-sync a { color: var(--seal); font-weight: 800; text-underline-offset: 2px; }
@keyframes meSyncBlink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .me-sync.is-wait::before { animation: none; } }
.me-inl { display: inline !important; font: inherit !important; font-weight: 800 !important; color: var(--ink); overflow-wrap: anywhere; }
.me-acc-btns { gap: 8px; }
.me-set--card #acc-sync { display: block; margin-top: 4px; font-weight: 700; color: var(--ink-2); }
.me-acc-steps { margin: 6px 0 12px; padding-left: 22px; display: grid; gap: 10px; line-height: 1.45; }
.me-acc-steps b { font-weight: 800; }
.me-acc-modal .muted { line-height: 1.5; }
.save-cta p a { color: var(--gold-2); font-weight: 800; text-underline-offset: 3px; white-space: nowrap; }