/* ==========================================================================
   Componentes: carta KARUTA, sello de logro, tarjeta de nivel, chips.
   ========================================================================== */

/* ---------------- CARTA ---------------- */
.kcard {
  --w: 240px;
  --frame: var(--white);
  --edge: var(--ink);
  --accent: var(--teal);
  --artbg: var(--paper-2);
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  width: var(--w); aspect-ratio: 5 / 7.2;
  position: relative; flex: none;
  border-radius: calc(var(--w) * .06);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s;
  box-shadow: 5px 6px 0 var(--ink);
  /* 16 px en una carta de 240 (longitud ÷ número: «--w / 240 * 16px» multiplicaba px por px y Chrome la descartaba) */
  font-size: calc(var(--w) / 15);
  color: var(--ink); /* dentro de un fondo oscuro no hereda el texto claro */
  user-select: none;
}
.kcard.is-tilting { transition: transform .06s linear; }
.kc-frame {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  border: calc(var(--w) * .013) solid var(--ink);
  background: var(--frame);
  padding: 4.5%;
  display: flex; flex-direction: column;
  container: kc / inline-size; /* el contenido decide qué enseña según el ancho real de la carta */
}
.kc-frame::before { /* papel */
  content: ""; position: absolute; inset: 0; background-image: var(--paper-noise); opacity: .9; pointer-events: none; mix-blend-mode: multiply;
}
.kc-inner {
  position: relative; flex: 1; display: flex; flex-direction: column;
  background: var(--white); border: calc(var(--w) * .009) solid var(--ink); border-radius: calc(var(--w) * .035);
  overflow: hidden;
}
.kc-top {
  display: flex; align-items: center; justify-content: space-between; gap: .45em;
  padding: .42em .7em; font: 800 max(11px, .62em)/1.05 var(--f-display); letter-spacing: .04em; text-transform: uppercase;
  border-bottom: calc(var(--w) * .008) solid var(--ink); background: var(--accent); color: var(--white);
}
.kc-top .kc-num { opacity: .9; font-variant-numeric: tabular-nums; }
.kc-rar {
  width: 1.75em; height: 1.75em; display: grid; place-items: center; border-radius: 50%;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink);
  font: 700 max(11px, .95em)/1 var(--f-jp); letter-spacing: 0; flex: none;
}
.kc-art {
  position: relative; flex: 1 1 auto; min-height: 0;
  background: var(--artbg);
  display: grid; place-items: end center; overflow: hidden;
}
.kc-art::before { /* rayos / tramas */
  content: ""; position: absolute; inset: -40%;
  background: var(--rays, none);
}
/* los rayos giran solo donde los hay (rara, épica, legendaria): las comunes giraban una capa vacía, una por carta del álbum */
.kcard:is(.r-rare, .r-epic, .r-legendary) .kc-art::before { animation: kcSpin 40s linear infinite; }
.kc-art::after {
  content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: 6px 6px; opacity: .55; pointer-events: none;
}
.kc-art img {
  position: relative; z-index: 1; max-width: 92%; max-height: 96%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 4px 0 rgba(22,20,24,.7));
  transform: translateZ(30px);
}
.kc-kanji-bg {
  position: absolute; z-index: 0; top: 4%; left: 5%;
  font: 400 4.4em/1 var(--f-brush); color: rgba(22,20,24,.10); writing-mode: vertical-rl; letter-spacing: -.05em;
}
.kc-name {
  padding: .45em .6em .15em; font: 800 max(11px, 1.02em)/1.08 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  border-top: calc(var(--w) * .008) solid var(--ink);
}
.kc-jp { display: flex; align-items: baseline; gap: .1em .45em; padding: 0 .6em .1em; flex-wrap: wrap; }
.kc-jp .jp { font: 900 max(13px, 1.3em)/1.15 var(--f-jp); }
.kc-jp .kc-read { font: 600 max(11px, .66em)/1.3 var(--f-body); color: var(--ink-soft); }
.kc-fact { padding: .3em .6em .55em; font: 500 max(11px, .62em)/1.36 var(--f-body); color: var(--ink-2); min-height: 3.3em; }
.kc-foot {
  display: flex; justify-content: space-between; align-items: center; gap: .3em .8em; padding: .45em .7em;
  border-top: calc(var(--w) * .008) solid var(--ink); background: var(--paper-2);
  font: 800 max(11px, .52em)/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
}
/* los textos no se encogen (antes el dato curioso se metía bajo el pie): cede el dibujo */
.kc-top, .kc-name, .kc-jp, .kc-fact, .kc-foot { flex: none; }
.kc-fact { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.kc-foot > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.kc-foot > span:last-child { flex: none; }
/* LEGIBILIDAD POR TAMAÑO: ninguna letra por debajo de 11 px (los max() de arriba);
   en las cartas pequeñas se quita lo que ya no cabe a ese tamaño, en este orden:
   dato curioso, pie y nombre del set (< 200 px) · lectura (< 165 px) · número (< 130 px).
   Siempre quedan dibujo, nombre, palabra y el sello de rareza. */
@container kc (width < 200px) {
  .kc-fact, .kc-foot, .kc-top > span:nth-child(2) { display: none; }
  .kc-jp { padding-bottom: .45em; }
}
@container kc (width < 165px) { .kc-jp .kc-read { display: none; } }
@container kc (width < 130px) {
  .kc-top .kc-num { display: none; }
  .kc-top { justify-content: flex-end; padding: .3em .4em; }
  .kc-name { padding-inline: .45em; }
  .kc-jp { padding-inline: .45em; }
}
.kc-play { cursor: pointer; border: 0; background: none; padding: 0; font-size: .95em; }
.kc-shine, .kc-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; }
.kc-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light; }
.kcard:hover .kc-glare, .kcard.is-tilting .kc-glare { opacity: 1; }

/* sets */
.kcard[data-set="rt"] { --accent: var(--teal); --artbg: #e6f4f1; }
.kcard[data-set="guardians"] { --accent: var(--indigo); --artbg: #e9e6f6; }
.kcard[data-set="friends"] { --accent: var(--choc); --artbg: #f6eadb; }
.kcard[data-set="mikan"] { --accent: var(--orange); --artbg: #fde6c6; }

/* COMMON: washi */
.kcard.r-common { --frame: var(--paper); }
/* RARE: bermellón con canto plateado */
.kcard.r-rare { --frame: linear-gradient(135deg, #e0372f, #a3140f 60%, #e0372f); --rays: repeating-conic-gradient(from 0deg at 50% 60%, rgba(243,154,180,.45) 0 8deg, transparent 8deg 16deg); }
.kcard.r-rare .kc-frame { box-shadow: inset 0 0 0 calc(var(--w) * .012) #d9dde2, inset 0 0 0 calc(var(--w) * .02) #8f979f; }
.kcard.r-rare .kc-top { background: var(--seal); }
/* EPIC: pan de oro */
.kcard.r-epic { --frame: linear-gradient(120deg, #b88a12, #ffe08a 22%, #c7951b 40%, #fff1b8 55%, #b88a12 75%, #f0c94a); --rays: repeating-conic-gradient(from 0deg at 50% 60%, rgba(224,169,28,.45) 0 7deg, transparent 7deg 14deg); }
.kcard.r-epic .kc-top { background: linear-gradient(90deg, #a87b0c, #e0a91c, #a87b0c); color: var(--ink); }
/* el brillo cruza con transform (antes background-position, que repintaba la carta entera en cada fotograma) */
.kcard.r-epic .kc-frame::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 250%; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 45%, transparent 55%); transform: translateX(-90%); animation: kcSweep 3.2s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }
/* LEGENDARY: holográfica */
.kcard.r-legendary { --frame: conic-gradient(#ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3); --rays: repeating-conic-gradient(from 0deg at 50% 55%, rgba(123,79,224,.30) 0 6deg, rgba(255,255,255,.0) 6deg 12deg); }
/* el arcoíris gira con transform (GPU) en una capa más grande recortada por el marco. Antes se animaba --hue del
   conic-gradient, que repintaba cada carta en cada fotograma, también las bloqueadas y las de fuera de pantalla
   (27 % de CPU con el álbum quieto). Girar el degradado cónico entero es lo mismo que «from <ángulo>». */
.kcard.r-legendary:not(.is-locked) .kc-frame { isolation: isolate; }
.kcard.r-legendary:not(.is-locked) .kc-frame::after { content: ""; position: absolute; inset: -50%; z-index: -1; background: var(--frame); animation: kcTurn 6s linear infinite; pointer-events: none; }
@keyframes kcTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kcard.r-legendary .kc-frame::after { animation: none; } }
.kcard.r-legendary .kc-top { background: linear-gradient(90deg, #7b4fe0, #e03f8f, #e0a91c); }
.kcard.r-legendary .kc-art { background: radial-gradient(circle at 50% 60%, #fff6d0, #f3dcff 55%, #c9b3ff); }
.kcard.r-legendary .kc-shine, .kcard.is-kira .kc-shine {
  background:
    repeating-linear-gradient(115deg, rgba(255,0,128,.0) 0%, rgba(255,90,170,.28) 6%, rgba(255,230,90,.28) 12%, rgba(90,255,200,.28) 18%, rgba(90,170,255,.28) 24%, rgba(200,120,255,.28) 30%, rgba(255,0,128,0) 36%);
  background-size: 300% 300%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge; opacity: .7;
}
.kcard.is-kira::after {
  content: "キラ"; position: absolute; top: -10px; right: -10px; z-index: 6;
  font: 900 max(11px, .8em)/1 var(--f-jp); padding: .45em .5em; border-radius: 50%; background: var(--gold-2); border: 2px solid var(--ink); transform: rotate(12deg);
}
/* exclusiva */
.kcard.is-exclusive .kc-foot { background: var(--ink); color: var(--gold-2); }

/* bloqueada (no la tienes) */
.kcard.is-locked { box-shadow: none; }
.kcard.is-locked .kc-frame { background: var(--paper-2); border-style: dashed; border-color: rgba(22,20,24,.4); }
.kcard.is-locked .kc-inner { background: transparent; border-color: rgba(22,20,24,.25); border-style: dashed; }
.kcard.is-locked .kc-art { background: transparent; }
.kcard.is-locked .kc-art::before, .kcard.is-locked .kc-art::after { display: none; }
.kcard.is-locked img { filter: brightness(0) opacity(.13); }
.kcard.is-locked .kc-top, .kcard.is-locked .kc-foot { background: transparent; color: rgba(22,20,24,.45); border-color: rgba(22,20,24,.25); }
.kcard.is-locked .kc-name { color: rgba(22,20,24,.45); border-color: rgba(22,20,24,.25); }
.kcard.is-locked .kc-jp, .kcard.is-locked .kc-fact { visibility: hidden; }

/* reverso */
.kcard-back {
  position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; transform: rotateY(180deg);
  border: calc(var(--w) * .013) solid var(--ink);
  background: radial-gradient(circle at 50% 45%, var(--seal) 0 22%, transparent 22.5%), var(--ink);
  display: grid; place-items: center; overflow: hidden;
}
.kcard-back::before {
  content: ""; position: absolute; inset: 6%; border: 2px solid rgba(243,236,220,.5); border-radius: calc(var(--w) * .035);
  background: repeating-radial-gradient(circle at 50% 120%, transparent 0 14px, rgba(243,236,220,.07) 14px 16px);
}
.kcard-back span { position: relative; font: 400 3.6em/1 var(--f-brush); color: var(--paper); }
.kcard-back { container: kcb / inline-size; }
.kcard-back small { position: absolute; bottom: 10%; font: 800 max(11px, .62em)/1 var(--f-display); letter-spacing: .2em; color: var(--paper); }
@container kcb (width < 150px) { .kcard-back small { display: none; } }

@keyframes kcSpin { to { transform: rotate(360deg); } }
@keyframes kcSweep { 0% { transform: translateX(-90%); } 60%, 100% { transform: translateX(30%); } } /* = background-position 150% → -50% con la capa al 250 % */
@property --hue { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------------- SELLO ---------------- */
.stamp {
  --c: var(--seal);
  --s: 112px;
  width: var(--s); height: var(--s); position: relative; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--c);
  transform: rotate(var(--rot, -8deg));
}
.stamp-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: calc(var(--s) * .045) solid currentColor;
  box-shadow: inset 0 0 0 calc(var(--s) * .035) transparent, inset 0 0 0 calc(var(--s) * .06) currentColor;
  filter: url(#rough);
}
.stamp-ring::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed currentColor; opacity: .5; }
.stamp-glyph { position: relative; font: 400 calc(var(--s) * .42)/1 var(--f-brush); filter: url(#rough); }
.stamp-glyph img { width: calc(var(--s) * .62); height: calc(var(--s) * .62); object-fit: contain; filter: url(#inkify-red); }
.stamp-label { position: absolute; bottom: 13%; font: 800 calc(var(--s) * .085)/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; filter: url(#rough); }
/* sellos pequeños (avisos, listas): desgaste suave para que el glifo se lea */
.stamp:is([style*="--s:3"], [style*="--s:4"], [style*="--s:5"], [style*="--s:6"]) :is(.stamp-ring, .stamp-glyph) { filter: url(#rough-sm); }
.stamp[data-ink="black"] { --c: #1c1a1d; }
.stamp[data-ink="red"] { --c: var(--seal); }
.stamp[data-ink="gold"] { --c: #b8860b; }
.stamp[data-ink="gold"] .stamp-ring { background: radial-gradient(circle, rgba(255,216,106,.35), transparent 70%); }
.stamp[data-ink="secret"] { --c: #6b3fa0; }
.stamp.is-locked { --c: rgba(22,20,24,.22); }
.stamp.is-locked .stamp-ring { border-style: dashed; box-shadow: none; filter: none; }
.stamp.is-new { animation: slam .5s cubic-bezier(.3,1.4,.5,1) both; }
.stamp-mul { mix-blend-mode: multiply; }

/* ---------------- tarjetas de la cascada / niveles ---------------- */
.lvl-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 10px;
  border: var(--line) solid var(--ink); border-radius: 14px; background: var(--white);
  font: 800 20px/1 var(--f-display); text-decoration: none; box-shadow: var(--shadow-sm);
}
.lvl-chip.is-done { background: var(--seal); color: var(--white); }
.lvl-chip.is-next { background: var(--gold-2); animation: pulse 1.6s ease-in-out infinite; }
.lvl-chip.is-gate { border-radius: 50%; background: var(--ink); color: var(--paper); }

/* ---------------- koinobori de progreso ---------------- */
.ribbon {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px;
  background: var(--ink); color: var(--paper); border-radius: 999px; font: 800 13px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------------- CARTEL DE ESTACIÓN (駅ナンバリング) ----------------
   Caja blanca con borde del color de la línea (--lc): letra de la línea en <b>, número en <i>.
   Lo usan /study/ y /kana/; sirve igual para nivel, perfil o plano. */
.st-sign {
  --lc: var(--rank-e);
  flex: none; display: inline-grid; justify-items: center; align-content: center; gap: 1px;
  width: 34px; height: 37px; background: var(--white); color: var(--ink);
  border: 3px solid var(--lc); border-radius: 8px; box-shadow: 0 0 0 2px var(--ink);
  font-family: var(--f-display); line-height: 1; text-transform: none; letter-spacing: 0;
}
.st-sign b { font-size: 11px; font-weight: 900; }
.st-sign i { font-style: normal; font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.st-sign--sm { width: 33px; height: 36px; border-width: 2.5px; border-radius: 7px; }
.st-sign--sm b { font-size: 11px; }
.st-sign--sm i { font-size: 13.5px; }
.st-sign--lg { width: 52px; height: 56px; border-width: 5px; border-radius: 13px; box-shadow: 0 0 0 2.5px var(--ink); }
.st-sign--lg b { font-size: 13px; }
.st-sign--lg i { font-size: 24px; }