/* ==========================================================================
   Naruto Card Game — simulador
   Misma arquitectura visual que el simulador de One Piece (arena oscura estilo
   Master Duel), repaletizada a Naruto: naranja Konoha en vez de oro pirata.
   ========================================================================== */
/* Paleta: sacada del propio Naruto, no de un tema oscuro generico.
   El naranja es el del traje; el azul, el de la banda; el rojo, el del abanico
   Uchiha; el crema, el del papel de los pergaminos. */
:root {
  --bg: #120d0a;                 /* tinta sumi, calida */
  --bg-2: #1b1310;
  --washi: #e6dcc4;              /* papel de pergamino */
  --panel: rgba(30, 22, 16, 0.90);
  --panel-line: rgba(230, 220, 196, 0.14);   /* borde de papel, no de neon */
  --shu: #c1272d;                /* bermellon del sello hanko */

  --orange: #f57c1f;             /* naranja del traje */
  --orange-lit: #ffab4f;
  --orange-soft: rgba(245, 124, 31, 0.32);
  --blue: #2e6fd9;               /* azul de la banda */
  --uchiha: #c1272d;             /* rojo del abanico */
  --konoha: #3f8f4a;             /* verde del chaleco */

  --cyan: #4bb8e8;
  --red: #d9414f;
  --green: #4bab63;
  --ink: #f4ece0;
  --ink-dim: #a89684;

  --font-display: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --font-ui: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-brush: "Yuji Syuku", serif;

  --r: 8px;
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
}
.hidden { display: none !important; }
.c-cy { color: var(--cyan); }
.c-or { color: var(--orange); }

button {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, #2d2029, #1d151d);
  color: var(--ink);
  border-radius: var(--r);
  padding: 7px 14px;
  font-size: 0.92rem;
  transition: filter .15s, transform .1s, box-shadow .2s;
}
/* Sin halo al pasar el mouse: se aclara el papel y se marca el borde. */
button:hover { filter: brightness(1.18); border-color: var(--orange-soft); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
select {
  background: #1a141d; color: var(--ink);
  border: 1px solid var(--panel-line); border-radius: 6px;
  padding: 7px 10px; font-family: var(--font-ui); font-size: .9rem;
}

/* ---------- fondo: la aldea ----------
   La ilustración de Konoha que trajo el autor. Nada de halos radiales difusos: ese
   recurso es el que hace que una pantalla se lea como generada por IA.

   El VELO no es decorativo: la ilustración es de día, luminosa y saturada, y
   toda la UI es texto crema sobre paneles oscuros. Sin velo se pierden los
   botones. Es un velo plano y parejo, no un degradado radial. */
.epic { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.rays {
  position: absolute; inset: 0;
  background: url("/web/konoha.webp") center/cover no-repeat;
}
/* El velo del TABLERO: ahí las cartas necesitan un fondo oscuro y parejo.
   La clase la pone app.js al entrar a la partida (`.rays` no es hijo de
   `#board`, así que no se puede seleccionar por anidado). En el MENÚ no se
   aplica: ahí vela un solo lado `.setup::before`, y la aldea se ve entera. */
.epic.enpartida .rays { filter: brightness(.40) saturate(.8); }
/* Trama de papel encima de todo, para que se lea como impreso sobre washi */
.leaves {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(230,220,196,.020) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
.vig { position: absolute; inset: 0; box-shadow: inset 0 0 14vmin 3vmin rgba(9,6,4,.5); }
/* El editor y las páginas de herramientas también muestran la aldea. */
.edbody, .rbody { position: relative; }
.edbody::before, .rbody::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9,6,4,.88), rgba(9,6,4,.82)),
    url("/web/konoha.webp") center/cover no-repeat;
}

/* ==========================================================================
   INICIO — la mesa antes de la partida
   La idea no es un formulario centrado sino SENTARSE A LA MESA: tu líder
   apoyado de pie a la izquierda (cambia con el mazo), y a la derecha el
   logotipo y las tres formas de jugar. La pieza memorable es la carta parada
   con su sombra: usa el material del propio juego en vez de decoración.
   ========================================================================== */
.setup { position: relative; z-index: 5; height: 100%; display: grid; place-items: center; padding: 24px; overflow: auto; }
/* SIN CAJA. La aldea ocupa la pantalla entera y los controles se apoyan
   directamente encima.

   Ya se probaron dos cajas y las dos se leían "hechas con IA": vidrio oscuro
   con blur, y papel claro con textura. El problema no era el material sino la
   caja: un recuadro flotando en el medio es el reflejo por defecto. Acá no hay
   panel, no hay borde, no hay textura, no hay sombra de caja. La legibilidad
   la da un velo de un lado (ver .setup::before) y la sombra del propio texto.

   La única pieza con volumen es la carta del líder, porque es del juego. */
.setupbox {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 48px;
  align-items: center;
  max-width: 1080px; width: 100%; text-align: left;
  padding: 0 clamp(20px, 5vw, 56px);
  background: none; border: none; box-shadow: none;
}
/* Velo lateral: la ilustración es de día y clara, y el texto es crema. Sin
   esto no se lee nada. Va sólo del lado del texto, en degradado horizontal,
   para que la aldea se siga viendo entera del otro lado. */
.setup::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(8,5,3,.94) 0%, rgba(8,5,3,.88) 34%,
    rgba(8,5,3,.55) 62%, rgba(8,5,3,.30) 100%);
}
.setupbox::after { content: none; }      /* fuera el sello: sin caja, no apoya */

.setupbox.plain {
  grid-template-columns: 1fr; max-width: 620px; text-align: center;
  justify-items: center;
}
.setupbox.plain .brand { font-size: .8rem; letter-spacing: .5em; color: var(--orange); }

/* ---- controles sin caja ----
   Ya no hay panel de papel: vuelve la paleta oscura de toda la aplicación.
   Los campos son translúcidos para que se vea la aldea detrás, y sólo se
   marcan con un filete: sin relleno sólido no aparece ninguna "cajita". */
.setupbox button, .setupbox select,
.setupbox input[type="text"], .setupbox input:not([type]) {
  background: rgba(8,5,3,.55); color: var(--ink);
  border-color: rgba(230,220,196,.22);
  backdrop-filter: none;
}
.setupbox input:focus, .setupbox select:focus {
  border-color: var(--orange); box-shadow: none; background: rgba(8,5,3,.75);
}
.setupbox input::placeholder { color: #8b7c6c; }
.setupbox .tools > * { background: none; border: none; }

/* ---- el líder ----
   Sin repisa y sin marco: la carta flota sobre la aldea con su propia sombra.
   Es la única pieza con volumen de toda la pantalla, y es del juego. */
.stand { order: 2; display: flex; flex-direction: column; align-items: center; }
.standcard {
  width: clamp(150px, 17vw, 226px); transform: rotate(2deg);
  transition: transform .4s cubic-bezier(.2,.9,.3,1.1);
}
.standcard img {
  width: 100%; display: block; border-radius: 9px;
  box-shadow: 0 3px 6px rgba(0,0,0,.5), 0 26px 44px -14px rgba(0,0,0,.9);
}
.setupbox:hover .standcard { transform: rotate(0deg) translateY(-6px); }
.ledge { display: none; }               /* no hay repisa: no hay mesa */
.standmeta {
  margin-top: 16px; text-align: center; display: flex;
  flex-direction: column; gap: 2px; text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.standmeta b { font-family: var(--font-display); font-size: .9rem; color: var(--ink); }
.standmeta span { font-size: .72rem; color: var(--ink-dim); letter-spacing: .06em; }

/* ---- logotipo ---- */
/* Sin caja que lo contenga, el título tiene que sostener la pantalla solo:
   por eso es grande de verdad y no un renglón más. */
.setmain { order: 1; min-width: 0; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.lockup { margin-bottom: 26px; }
.brand {
  font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: .9; letter-spacing: .01em; color: var(--ink);
  text-shadow: 0 4px 20px rgba(0,0,0,.9);
}
.kicker {
  font-family: var(--font-display); font-size: clamp(.68rem, 1.2vw, .85rem);
  letter-spacing: .62em; text-indent: .62em; color: var(--orange); margin-top: 6px;
}
/* Una sola palabra en pincel. Es el acento japonés: no hace falta más. */
.jp {
  font-family: var(--font-brush); font-size: 1.25rem; color: #c8b191;
  margin-top: 12px; letter-spacing: .18em;
}
.setup h1 {
  font-family: var(--font-ui); font-weight: 500; font-size: .88rem;
  color: var(--ink-dim); margin: 14px 0 0; letter-spacing: .02em;
  padding-top: 14px; border-top: 1px solid rgba(230,220,196,.18);
}
.setgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px 16px; margin-bottom: 12px; text-align: left; }
.setgrid label { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
.deckwarn { font-size: .8rem; color: #ffc978; background: rgba(255,154,60,.08); border: 1px solid rgba(255,154,60,.22); border-radius: 8px; padding: 8px 12px; margin-bottom: 18px; text-align: left; line-height: 1.5; }
.deckwarn:empty { display: none; }
/* Botón principal: bloque de tinta bermellón, como un sello estampado. */
.bigbtn {
  font-size: 1.05rem; padding: 12px 34px; letter-spacing: .06em;
  background: var(--shu); color: #f7ece0; border: 1px solid #8e1d21;
  border-radius: 4px; box-shadow: 0 3px 0 #7a1a1e;
}
.bigbtn:hover { filter: brightness(1.1); border-color: #b8322f; }
.bigbtn:active { transform: translateY(3px); box-shadow: 0 0 0 #7a1a1e; }
.setup .hint {
  margin-top: 16px; color: var(--ink-dim); font-size: .8rem; line-height: 1.6;
}

/* Herramientas: una línea de tinta separada por interpuntos. Se usan poco;
   apiladas como botones competían con «empezar partida» y ensuciaban todo. */
.tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--panel-line);
}
.tools > * {
  background: none; border: none; padding: 3px 6px; border-radius: 3px;
  font-family: var(--font-ui); font-size: .76rem; color: var(--ink-dim);
  text-decoration: none; cursor: pointer; letter-spacing: .01em;
}
.tools > * + *::before {
  content: "·"; margin-right: 9px; color: #5c4c3d; cursor: default;
}
.tools > *:hover { color: var(--orange); background: none; filter: none; }

/* ---------- arena ---------- */
/* La columna izquierda es solo la botonera: 44px alcanzan. El registro y el
   chat viven en el tablero, donde se ubican desde /editor. */
/* dvh, no vh: en el celular la barra de direcciones se mete y con 100vh el
   tablero queda cortado abajo. El padding respeta el notch. */
.board { position: relative; z-index: 2; height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: 44px 1fr; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  touch-action: manipulation; }   /* mata el zoom por doble toque */
/* Ya no lleva registro ni chat: es una tira de botones nada mas. */
.leftcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

/* Lector de cartas: vive en el tablero y se ubica desde /editor. */
.inspector {
  background: rgba(20,14,10,.82); border: 1px solid var(--panel-line);
  border-radius: 4px; backdrop-filter: blur(6px); padding: 8px;
  display: flex; flex-direction: column; gap: 7px; overflow: hidden;
  z-index: 27;
}
.inspector > img { flex: 0 1 auto; min-height: 0; object-fit: contain; }
.inspector .inspinfo { flex: 0 1 auto; min-height: 0; overflow: hidden;
                       display: flex; flex-direction: column; gap: 2px; }
.insphold { color: var(--ink-dim); font-size: .8rem; text-align: center; margin: auto; line-height: 1.7; }
#inspImg { width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
/* El texto de la carta es lo que mas se lee de la pantalla: iba en .76rem y
   quedaba chico. Va con clamp para que no se desborde en pantallas bajas. */
.iname { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 2.6cqh, 1.3rem); }
.istats { color: var(--orange); font-size: clamp(.84rem, 2cqh, 1rem); font-weight: 600; margin: 4px 0 8px; }
.itext { font-size: clamp(.86rem, 2.1cqh, 1.05rem); line-height: 1.55; color: #ddd2c8; white-space: pre-wrap; overflow-y: auto; }
.itext .note { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,154,60,.25); color: #ffc978; font-style: italic; }

/* Botonera vertical: sonido, reglas, salir. */
.toolbar { display: flex; flex-direction: column; gap: 6px; }
.toolbar button { padding: 8px 0; font-size: 1rem; }

/* ---------- campo ----------
   Cada lado es un .mat con posicionamiento ABSOLUTO: la posicion y el tamaño
   de cada zona los pone layout.js en %, y se editan desde /editor.
   Las cartas se dimensionan por el ALTO de su zona (height:100%), asi agrandar
   una zona agranda sus cartas sin tocar ninguna variable. */
.arena { position: relative; display: grid; grid-template-rows: 1fr auto 1fr; gap: 4px; min-height: 0; }
.side { display: flex; flex-direction: column; min-height: 0; }
/* El mat es papel translúcido apoyado sobre la ilustración de la aldea. */
.mat {
  position: relative; flex: 1; min-height: 0;
  background: var(--playmat, rgba(20, 14, 10, 0.34));
  border: 1px solid rgba(230,220,196,.10); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.namechip {
  font-family: var(--font-display); font-size: clamp(.5rem, 1.5cqh, .8rem);
  letter-spacing: .08em; overflow: hidden; white-space: nowrap;
  background: rgba(255,154,60,.12); border: 1px solid var(--panel-line);
  border-radius: 20px; color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.namechip.you { color: var(--cyan); background: rgba(62,201,245,.12); border-color: rgba(62,201,245,.25); }

.lifebox {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,77,99,.16), rgba(255,77,99,.05));
  border: 1px solid rgba(255,77,99,.32);
}
.lifenum { font-family: var(--font-display); font-size: clamp(.9rem, 6cqh, 2.2rem); font-weight: 700; line-height: 1; color: #ff8090; }
.lifelbl { font-size: clamp(.4rem, 1.6cqh, .6rem); letter-spacing: .18em; color: var(--ink-dim); }
.lifebox.hit { animation: lifehit .5s ease; }
@keyframes lifehit { 0%,100% { transform: scale(1);} 40% { transform: scale(1.22); box-shadow: 0 0 22px rgba(255,77,99,.7);} }

/* ---------- zonas ----------
   Cada zona la posiciona layout.js. Adentro, las cartas se estiran al alto. */
.mat { container-type: size; }
.zone {
  display: flex; gap: var(--zgap, .6%); align-items: center;
  border: 1px dashed rgba(255,255,255,.07); border-radius: 8px; padding: 2px;
  overflow: hidden;
}
.zone::before {
  content: attr(data-lbl); position: absolute; left: 6px; top: 1px;
  font-size: clamp(.34rem, 1.2cqh, .5rem); letter-spacing: .16em;
  color: rgba(255,255,255,.18);
  font-family: var(--font-display); pointer-events: none; z-index: 1;
}
.zchars, .zsupport, .zex { justify-content: center; }
.zchakra { align-items: center; }

/* las cartas toman el alto de la zona y mantienen su proporcion */
.zone .card, .zone .back {
  height: 100%; width: auto; aspect-ratio: 5/7; flex: 0 1 auto; min-width: 0;
}
.zone .chak { height: 100%; width: auto; aspect-ratio: 5/7; flex: 0 1 auto; }

/* slots de una sola carta (lider, summon, mazo, trash) */
.slot {
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); color: var(--ink-dim);
}
.slot .card, .slot img { height: 100%; width: 100%; object-fit: contain; }
.slot .card { aspect-ratio: 5/7; height: 100%; width: auto; }

/* ---------- cartas ---------- */
.card {
  position: relative; aspect-ratio: 5/7;
  border-radius: 5px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
  background: #15101a; cursor: default;
  transition: transform .14s, box-shadow .18s, filter .18s;
  /* mantener apretada una carta es el atajo de Ambush: sin esto, iOS abre su
     menú de "guardar imagen" encima y el gesto no llega nunca */
  -webkit-touch-callout: none;
}
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.rested { transform: rotate(90deg) scale(.86); }
.card.sick { filter: saturate(.55) brightness(.8); }
/* Está en el campo pero su animación de entrada todavía no corrió: invisible
   y sin poder clickearse, pero ocupando su lugar para que la fila no salte. */
.card.notyet { opacity: 0; pointer-events: none; }
.card:hover { transform: translateY(-4px) scale(1.06); z-index: 20; box-shadow: 0 12px 32px rgba(0,0,0,.8); }
/* Al pasar el mouse la carta crece y sube: se sale de su zona, y el
   `overflow:hidden` de la zona la cortaba justo cuando se la quiere mirar.
   Mientras haya una carta con hover adentro, esa zona deja de recortar y sube
   por encima de las demas. */
.zone:has(.card:hover), .slot:has(.card:hover), .pilegrid:has(.card:hover) {
  overflow: visible; z-index: 46;
}
.card.rested:hover { transform: rotate(90deg) scale(.94); }

.card.playable { cursor: pointer; box-shadow: 0 0 0 2px var(--cyan), 0 0 16px rgba(62,201,245,.55); }
.card.attacker { cursor: pointer; box-shadow: 0 0 0 2px var(--orange), 0 0 18px rgba(255,154,60,.6); }
.card.target { cursor: crosshair; box-shadow: 0 0 0 2px var(--red), 0 0 18px rgba(255,77,99,.6); animation: tpulse 1.1s ease-in-out infinite; }
@keyframes tpulse { 0%,100% { box-shadow: 0 0 0 2px var(--red), 0 0 12px rgba(255,77,99,.5);} 50% { box-shadow: 0 0 0 3px var(--red), 0 0 26px rgba(255,77,99,.85);} }
.card.selected { outline: 3px solid var(--green); outline-offset: 1px; }
/* Elegible por un EFECTO. Va en ambar y no en rojo a proposito: rojo es
   "objetivo de ataque" y muchos efectos son para beneficiar a los tuyos.

   OJO: la animacion NO puede tocar `transform`. Una carta descansada esta
   rotada 90 grados con transform, y animar transform aca la enderezaba: al
   resaltarse, las descansadas y las activas se veian iguales. El latido es
   solo de sombra. */
.card.choosable {
  cursor: pointer;
  box-shadow: 0 0 0 2px #ffc978, 0 0 18px rgba(255,201,120,.55);
  animation: cpulse 1.25s ease-in-out infinite;
}
@keyframes cpulse {
  0%,100% { box-shadow: 0 0 0 2px #ffc978, 0 0 12px rgba(255,201,120,.45); }
  50%     { box-shadow: 0 0 0 3px #ffe0a8, 0 0 30px rgba(255,201,120,.9); }
}
/* Una descansada elegible se levanta un poco PERO SIGUE ACOSTADA, para que se
   distinga de una activa de un vistazo. */
.card.rested.choosable { transform: rotate(90deg) scale(.92); }
.card.rested.choosable:hover { transform: rotate(90deg) scale(1); }
.card.choosable:not(.rested):hover { transform: translateY(-5px) scale(1.07); }
/* ---------- celular: la carta leída, esperando el segundo toque ----------
   En touch no hay hover, así que el toque es lo único que sirve para leer una
   carta. El primero solo la lee y la deja marcada así; el segundo la juega.
   Material plano: filete crema, sin resplandor — el cyan y el naranja ya
   significan otra cosa (jugable / atacante).

   El aviso de "tocá otra vez" NO va encima de la carta: la carta tiene
   `overflow:hidden` y en el celular mide 40 px de ancho, no entra un cartel.
   Va en el panel de preguntas, que es donde el juego ya habla (renderPrompt). */
.card.armed { outline: 2px solid var(--ink); outline-offset: 1px; }
/* El filete se dibuja por fuera del borde y las zonas recortan: mientras haya
   una carta armada adentro, esa zona deja de recortar (igual que con el hover). */
.zone:has(.card.armed), .slot:has(.card.armed), .pilegrid:has(.card.armed) {
  overflow: visible; z-index: 46;
}
.options .optcard.armed img { box-shadow: 0 0 0 2px var(--ink); }

/* atajo de click derecho que no aplica */
.card.denied { animation: denied .4s ease; }
@keyframes denied {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5%); } 75% { transform: translateX(5%); }
}

/* HP / stats sobre la carta */
.statbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1px 3px; font-family: var(--font-display); font-size: .58rem;
  background: linear-gradient(0deg, rgba(0,0,0,.9), transparent);
  text-shadow: 0 1px 2px #000;
}
.statbar .pw { color: #9ad9ff; }
.statbar .hp { color: #8effb0; }
.statbar .hp.hurt { color: #ff9090; }
.hpbar { position: absolute; left: 2px; right: 2px; bottom: 9px; height: 2.5px; border-radius: 2px; background: rgba(0,0,0,.6); overflow: hidden; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg,#46d98c,#8effb0); }
.hpbar.hurt i { background: linear-gradient(90deg,#ff5f6d,#ffa07a); }
.exbadge { position: absolute; top: 2px; right: 2px; font-family: var(--font-display); font-size: .5rem; background: linear-gradient(180deg,#ffd36e,#e08a1e); color: #2a1704; padding: 0 3px; border-radius: 3px; }
/* material plano, como el resto de las chapitas: color sólido y filete, sin glow */
.rushbadge { position: absolute; top: 2px; left: 2px; z-index: 3; font-family: var(--font-display); font-size: .45rem; letter-spacing: .08em; background: var(--shu); color: #ffeede; border: 1px solid rgba(0,0,0,.45); padding: 0 3px; border-radius: 3px; }

/* ---------- dorso de carta (folio) ----------
   Intercambiable desde el panel de personalización. Cada jugador ve el suyo:
   el folio no viaja en el estado de la partida. */
.back {
  position: relative; aspect-ratio: 5/7; border-radius: 5px; overflow: hidden;
  background: var(--sleeve-bg, linear-gradient(150deg,#3d2109,#1a0e05));
  border: 1px solid var(--sleeve-line, rgba(245,124,31,.35));
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
.back::after {
  content: ""; position: absolute; inset: 18%;
  background-image: var(--sleeve-mark, none);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .82; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
/* Marco interior, como el borde impreso de un folio real. Se apaga
   (--sleeve-frame: 0) cuando el dorso ya es una imagen: el dorso oficial trae
   su propio marco y superponerle otro se ve sucio. */
.back::before {
  content: ""; position: absolute; inset: 7%;
  border: 1px solid var(--sleeve-line, rgba(245,124,31,.35));
  border-radius: 3px; opacity: var(--sleeve-frame, .5);
}

/* chakra — usa la imagen real de la carta C-001 */
.chak {
  aspect-ratio: 5/7; border-radius: 4px;
  overflow: hidden; position: relative;
  border: 1px solid #ffdca0; box-shadow: 0 0 10px rgba(255,180,80,.45);
  transition: filter .25s, transform .25s, box-shadow .25s;
}
.chak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chak.down {
  border-color: rgba(255,255,255,.09); box-shadow: none;
  filter: grayscale(1) brightness(.42); transform: rotate(180deg);
}
/* la carta boca abajo tapa el arte, como en la mesa real */
.chak.down::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, #241d27 0 4px, #1b1520 4px 8px);
}

/* summon card — imagen real de S-001 */
.summoncard, .pile {
  border-radius: 5px; position: relative;
  border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg,#241c26,#161018);
  font-size: clamp(.5rem, 2cqh, .72rem);
  transition: filter .2s, transform .2s, box-shadow .2s;
}
.summoncard img, .pile img { object-fit: contain; }

/* El mazo y el trash muestran el dorso real (tu folio), no una caja vacía. */
.pile {
  background: var(--sleeve-bg, linear-gradient(160deg,#241c26,#161018));
  border-color: var(--sleeve-line, rgba(255,255,255,.12));
  overflow: hidden;
}
.pile::after {
  content: ""; position: absolute; inset: 16%;
  background-image: var(--sleeve-mark, none);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .55;
}
/* el trash es el mismo dorso, gastado */
#youTrash, #oppTrash { filter: grayscale(.65) brightness(.68); }
/* la exclusión son cartas fuera de la partida: dorso apagado y borde de sello */
.pile.excl {
  filter: grayscale(1) brightness(.5);
  border-color: rgba(193,39,45,.45);
}
.pile.excl .pilecount { color: #e8b0ab; }
.summoncard::before, .pile::before, .leaderslot::before {
  content: attr(data-lbl); position: absolute; top: 0; left: 2px;
  font-size: clamp(.34rem, 1.2cqh, .48rem); letter-spacing: .14em;
  color: rgba(255,255,255,.25); pointer-events: none;
}
.leaderslot { position: relative; }
.summoncard.rested { filter: grayscale(1) brightness(.5); transform: rotate(90deg) scale(.84); }
.summoncard.ready { border-color: var(--orange-soft); box-shadow: 0 0 12px rgba(255,154,60,.45); }
.pile { cursor: pointer; }
.pilecount {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8,5,12,.62); font-family: var(--font-display);
  font-size: .95rem; color: var(--ink); text-shadow: 0 1px 4px #000;
}

/* Barra de acciones (habilidad del lider / recuperar chakra).
   OJO: la POSICION la pone layout.js, no este archivo. Estos elementos se
   acomodan desde /editor como cualquier zona; aca solo va como se ven. */
.actionbar {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; align-items: center; overflow: hidden;
}
.actionbar button {
  font-size: .76rem; padding: 6px 12px;
  background: linear-gradient(180deg, #33242e, #201720);
  border-color: var(--orange-soft); color: #ffd9ab;
}
.actionbar button.recover {
  background: linear-gradient(180deg, #ffab4f, #c9661a);
  color: #26120a; border-color: #ffd39a;
}
.actionbar button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.6); }

/* mano */
.handrow { justify-content: center; border-style: solid; border-color: transparent; }
.handrow.you .card:hover { transform: translateY(-9%) scale(1.1); z-index: 40; }
.handrow .card, .handrow .back { height: 96%; }

/* ---------- centro ---------- */
.center { display: grid; place-items: center; min-height: 0; }
/* Panel de preguntas y opciones. Lo ubica layout.js (zona «center»). */
.centerline {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; overflow: auto;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px;
  padding: 8px 16px; backdrop-filter: blur(10px);
}
.centerline:empty, .centerline.empty { display: none; }
.prompt { font-size: .84rem; color: var(--ink); text-align: center; }
.options { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 26vh; overflow-y: auto; }
.options button { font-size: .8rem; padding: 6px 12px; }
.options .optcard { padding: 0; border: none; background: none; width: calc(var(--card-w)*.9); }
.options .optcard img { width: 100%; border-radius: 5px; display: block; box-shadow: 0 0 0 2px transparent; }
.options .optcard:hover img { box-shadow: 0 0 0 2px var(--cyan); }
.options .optcard.on img { box-shadow: 0 0 0 3px var(--green); }
/* El panel ya no lista las cartas: solo dice que hay que tocarlas en la mesa. */
.clickhint {
  font-size: .76rem; color: #ffc978; letter-spacing: .02em;
  display: flex; align-items: center; gap: 7px;
}
.clickhint::before {
  content: "◎"; font-size: 1rem; animation: cpulse 1.25s ease-in-out infinite;
}
.options .confirm {
  background: linear-gradient(180deg,#ffab4f,#c9661a);
  color: #26120a; border-color: #ffd39a;
}

/* Revelar el tope del mazo: sale de la pila, se lee, y vuelve. */
/* Sale del MAZO. Nada de `margin-left` en %: en un elemento `position: fixed`
   ese porcentaje se mide contra el ancho de la VENTANA, no contra la carta, y
   la corría ~115px a la izquierda — justo encima del líder. El centrado lo
   hace el translate(-50%, …) y nada más. */
.revealfx {
  position: fixed; z-index: 62; pointer-events: none;
  width: clamp(96px, 11vw, 150px);
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  /* left/top/width entran en la transición porque la carta revelada VIAJA
     hasta su lugar en el campo cuando el efecto la invoca (Manda, Jugo). */
  transition: transform calc(.42s * var(--fxk, 1)) cubic-bezier(.2,.9,.3,1.2),
              opacity calc(.28s * var(--fxk, 1)),
              left calc(.44s * var(--fxk, 1)) cubic-bezier(.4,.05,.25,1),
              top calc(.44s * var(--fxk, 1)) cubic-bezier(.5,-.15,.3,1),
              width calc(.44s * var(--fxk, 1)) cubic-bezier(.4,.05,.25,1);
}
.revealfx img {
  width: 100%; display: block; border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.7), 0 0 0 2px rgba(255,201,120,.75);
}
.revealfx .revname {
  display: block; text-align: center; margin-top: 5px;
  font-family: var(--font-display); font-size: .72rem; color: #ffe0a8;
  text-shadow: 0 2px 6px #000;
}
.revealfx.up { opacity: 1; transform: translate(-50%, -145%) scale(1) rotate(-3deg); }
.revealfx.out { opacity: 0; transform: translate(-50%, -125%) scale(.82); }
/* viaja a su lugar en el campo: se endereza y queda del tamaño de la zona */
.revealfx.toslot { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
.revealfx.toslot .revname { opacity: 0; transition: opacity calc(.2s * var(--fxk, 1)); }

/* Boton de terminar turno y chip de turno: los ubica layout.js. */
.endturnfab {
  font-size: .82rem; line-height: 1.15; padding: 10px 12px; text-align: center;
  background: linear-gradient(180deg,#ffab4f,#c9661a); color: #26120a; border-color: #ffd39a;
  box-shadow: 0 6px 22px rgba(255,154,60,.4);
}
.turnchip {
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .1em;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 20px; padding: 4px 10px; color: var(--ink-dim);
}
.turnchip.you { color: var(--cyan); border-color: rgba(62,201,245,.35); }

/* flecha de ataque */
.arrowsvg { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
.splat {
  position: absolute; font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  color: #ff6b7d; text-shadow: 0 2px 10px #000; animation: splat calc(.9s * var(--fxk, 1)) ease-out forwards;
}
@keyframes splat { 0% { transform: translate(-50%,-50%) scale(.4); opacity: 0;} 25% { transform: translate(-50%,-50%) scale(1.25); opacity: 1;} 100% { transform: translate(-50%,-160%) scale(1); opacity: 0;} }

/* modales */
.winner {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 90;
  background: rgba(5,3,8,.85); font-family: var(--font-display); font-size: 2.6rem;
  letter-spacing: .1em; text-align: center; padding: 20px;
}
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 95; background: rgba(5,3,8,.8); }
/* Mismo criterio que .setupbox: material plano, sin vidrio esmerilado. */
.modalbox {
  background-color: #191309;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,240,214,.028) 0 1px, transparent 1px 3px);
  border: 1px solid #3b2e1e; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,240,214,.05), 0 26px 64px rgba(0,0,0,.75);
  padding: 24px 28px; max-width: 780px; width: 92%; max-height: 82vh; overflow-y: auto;
}
.modalbox h2 { font-family: var(--font-display); font-weight: 600; margin-bottom: 14px; }
.modalbox button { margin-top: 16px; }
.asum { border-left: 2px solid var(--orange-soft); padding: 6px 0 6px 12px; margin-bottom: 12px; font-size: .82rem; line-height: 1.55; }
.asum b { color: var(--orange); font-family: var(--font-display); letter-spacing: .03em; }
.asum .why { color: #c3b7ae; }
.asum .ver { color: var(--ink-dim); font-style: italic; font-size: .76rem; }

/* ==========================================================================
   Multijugador: pestañas del home, sala de espera, chat, estado del rival
   ========================================================================== */
input[type="text"], input:not([type]) {
  background: #1a141d; color: var(--ink);
  border: 1px solid var(--panel-line); border-radius: 6px;
  padding: 7px 10px; font-family: var(--font-ui); font-size: .9rem;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange-soft); }

/* ---------- pestañas ---------- */
/* Pestañas como las lengüetas de los separadores de una caja de cartas:
   se apoyan sobre una línea, no son tres botones sueltos. */
.tabs {
  display: flex; gap: 2px; margin: 4px 0 16px;
  border-bottom: 1px solid var(--panel-line);
}
.tabs .tab {
  flex: 1; background: transparent; color: var(--ink-dim); border: none;
  border-radius: 3px 3px 0 0; font-size: .82rem; padding: 10px 8px;
  margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-family: var(--font-ui); letter-spacing: .01em;
}
.tabs .tab:hover { color: var(--ink); filter: none; }
.tabs .tab.on {
  color: var(--orange); border-bottom-color: var(--orange);
  background: rgba(255,154,60,.09);   /* plano: un degradado acá se lee a IA */
}
.tabpane { display: none; }
.tabpane.on { display: block; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: none;} }
.panehint { color: var(--ink-dim); font-size: .84rem; line-height: 1.6; margin-bottom: 14px; text-align: left; }
.chk { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-dim); margin-bottom: 16px; text-align: left; cursor: pointer; }
.chk input { width: auto; }

/* ---------- unirse ---------- */
.joinrow { display: flex; gap: 10px; align-items: stretch; }
.joinrow.center { justify-content: center; margin-top: 6px; }
.joinrow .bigbtn { flex: none; padding: 12px 26px; font-size: 1rem; }
.codeinput {
  flex: 1; font-family: var(--font-display) !important; font-size: 1.7rem !important;
  letter-spacing: .38em; text-indent: .38em; text-align: center; text-transform: uppercase;
  padding: 8px 10px !important; color: var(--orange) !important;
}
.lobbylist { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto; }
.lobbyempty { color: var(--ink-dim); font-size: .82rem; line-height: 1.6; padding: 14px; border: 1px dashed rgba(255,255,255,.09); border-radius: 8px; }
.lobbyrow {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(255,255,255,.03); border: 1px solid var(--panel-line);
  border-radius: 8px; padding: 8px 12px; font-size: .86rem;
}
.lobbyrow b { flex: 1; }
.lobbyrow .lcode { font-family: var(--font-display); color: var(--orange); letter-spacing: .18em; }
.lobbyrow .lage { color: var(--ink-dim); font-size: .74rem; }
.lobbyrow button { padding: 5px 14px; font-size: .8rem; }

.homeerr { color: #ff8090; font-size: .85rem; margin-top: 12px; min-height: 1.2em; }

/* ---------- sala de espera ---------- */
.roomcode {
  font-family: var(--font-display); font-size: 4.4rem; font-weight: 700;
  letter-spacing: .3em; text-indent: .3em; color: var(--orange);
  margin: 14px 0 10px;   /* sin glow: el codigo se lee por tamaño, no por brillo */
}
.waiting { margin-top: 22px; color: var(--ink-dim); font-size: .9rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.waiting .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .25; transform: scale(.8);} 50% { opacity: 1; transform: scale(1.15);} }

/* ---------- estado del rival ---------- */
/* Aviso de estado del rival: lo ubica layout.js. */
.connchip {
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .06em;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 20px; padding: 4px 12px; color: var(--ink-dim);
  backdrop-filter: blur(8px); white-space: nowrap;
}
.connchip.warn { color: #ffbe6b; border-color: rgba(255,154,60,.45); cursor: pointer; animation: pulseborder 1.6s ease-in-out infinite; }

/* ---------- reloj ---------- */
/* Reloj: lo ubica layout.js. */
.timechip {
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .06em;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 20px; padding: 4px 12px; color: var(--ink);
  backdrop-filter: blur(8px); font-variant-numeric: tabular-nums;
}
.timechip.theirs { color: var(--ink-dim); font-size: .82rem; }
.timechip.low {
  color: #ff6b7d; border-color: rgba(255,77,99,.6);
  animation: lowtime .9s ease-in-out infinite;
}
@keyframes lowtime {
  0%,100% { box-shadow: 0 0 0 rgba(255,77,99,0); }
  50% { box-shadow: 0 0 18px rgba(255,77,99,.6); transform: scale(1.06); }
}
@keyframes pulseborder { 0%,100% { box-shadow: 0 0 0 rgba(255,154,60,0);} 50% { box-shadow: 0 0 16px rgba(255,154,60,.45);} }

/* ---------- chat ---------- */

/* ==========================================================================
   DECKBUILDER
   ========================================================================== */
.deckbtns { display: flex; gap: 8px; margin: -4px 0 14px; }
.deckbtns button { flex: 1; font-size: .8rem; padding: 7px 10px; }
.deckbtns button:disabled { opacity: .35; cursor: not-allowed; }

.builder {
  position: fixed; inset: 0; z-index: 80; background: var(--bg);
  display: flex; flex-direction: column;
}
.bhead {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--panel-line); background: var(--panel);
  flex-wrap: wrap;
}
.bhead #bName { width: 190px; flex: none; }
.bhead .bigbtn { padding: 8px 20px; font-size: .92rem; }
.bhead .bigbtn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.7); }
.bcounter { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-dim); }
.bcounter b { color: var(--orange); font-size: 1.4rem; }
.bcheck { flex: 1; min-width: 180px; font-size: .74rem; line-height: 1.45; }
.bcheck .berr { color: #ff8090; }
.bcheck .bwarn { color: #ffc978; }
.bcheck .bok { color: var(--green); }

.bbody { flex: 1; display: grid; grid-template-columns: 232px 1fr 268px; gap: 10px;
         padding: 10px; min-height: 0; }
.bside, .bdeck { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.blabel { font-family: var(--font-display); font-size: .7rem; letter-spacing: .16em;
          color: var(--ink-dim); text-transform: uppercase; }

.bleaders { display: flex; gap: 6px; flex-wrap: wrap; }
.bleader {
  width: 62px; cursor: pointer; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; text-align: center; transition: border-color .15s;
}
.bleader img { width: 100%; aspect-ratio: 5/7; object-fit: cover; display: block; }
.bleader span { font-size: .56rem; color: var(--ink-dim); display: block; padding: 2px; }
.bleader.on { border-color: var(--orange); box-shadow: 0 0 14px rgba(255,154,60,.5); }

.binfo {
  flex: 1; background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 12px; padding: 10px; overflow-y: auto; min-height: 0;
}
.binfo img { width: 100%; border-radius: 8px; margin-bottom: 8px; }

.bmain { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.bpool {
  flex: 1; overflow-y: auto; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  align-content: start; padding-right: 4px;
}
.bcard {
  position: relative; cursor: pointer; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; transition: transform .12s, border-color .15s;
  background: #15101a;
}
.bcard img { width: 100%; aspect-ratio: 5/7; object-fit: cover; display: block; }
.bcard:hover { transform: translateY(-3px) scale(1.04); border-color: var(--cyan); }
.bcard.in { border-color: var(--orange); }
.bcard .bname {
  font-size: .55rem; text-align: center; padding: 2px 1px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bqty {
  position: absolute; top: 3px; left: 3px; z-index: 2;
  background: var(--orange); color: #26120a; font-family: var(--font-display);
  font-size: .72rem; min-width: 19px; height: 19px; border-radius: 5px;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.blist {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 12px; padding: 8px; min-height: 0;
}
.bempty { color: var(--ink-dim); font-size: .76rem; line-height: 1.6; padding: 10px; }
.brow { display: flex; align-items: center; gap: 6px; font-size: .76rem; }
.brow img { width: 26px; aspect-ratio: 5/7; object-fit: cover; border-radius: 3px; }
.brow .bn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .bx { color: var(--orange); font-family: var(--font-display); }
.brow button { padding: 1px 7px; font-size: .8rem; line-height: 1.3; }

@media (max-width: 900px) {
  .bbody { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .bside { flex-direction: row; align-items: center; }
  .binfo { display: none; }
  .bdeck { max-height: 26vh; }
}

/* ==========================================================================
   CAPA VISUAL — cinematicas, impactos, sacudones
   La cinematica EX dura 2,5 s y esta cronometrada: la carta aterriza a los
   430 ms y ahi entran el sacudon, los anillos y las particulas. Si se toca un
   tiempo, hay que mover el `setTimeout` de fx.js que le corresponde.
   ========================================================================== */

/* ---------- sacudon de pantalla ---------- */
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(4px, -4px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 3px); }
}
@keyframes shakebig {
  0%,100% { transform: translate(0,0) rotate(0); }
  15% { transform: translate(-13px, 8px) rotate(-.5deg); }
  30% { transform: translate(11px, -10px) rotate(.5deg); }
  45% { transform: translate(-9px, -6px) rotate(-.3deg); }
  60% { transform: translate(8px, 7px) rotate(.3deg); }
  80% { transform: translate(-4px, 2px) rotate(0); }
}
.board.shake { animation: shake calc(.24s * var(--fxk, 1)) ease-in-out; }
.board.shakebig { animation: shakebig calc(.52s * var(--fxk, 1)) cubic-bezier(.36,.07,.19,.97); }

/* ---------- cinematica de invocacion EX ---------- */
.excine {
  position: fixed; inset: 0; z-index: 88; pointer-events: none;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 50%,
              rgba(6,3,10,.72), rgba(4,2,7,.94));
  animation: exfadein .22s ease both;
}
.excine.out { animation: exfadeout .4s ease both; }
@keyframes exfadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes exfadeout { to { opacity: 0; } }

.exflash {
  position: absolute; inset: 0; background: #fff;
  animation: exflash calc(.5s * var(--fxk, 1)) ease-out both;
}
@keyframes exflash {
  0% { opacity: .95; } 12% { opacity: .5; } 100% { opacity: 0; }
}

/* simbolo del clan: entra girando y queda de fondo, pulsando */
.exsymbol {
  position: absolute; width: min(64vh, 62vw); aspect-ratio: 1;
  animation: exsym var(--ex-dur, 2.5s) cubic-bezier(.16,1,.3,1) both;
  opacity: var(--symbol-op, 1);
  filter: drop-shadow(0 0 42px var(--clanglow));
}
.exsymbol svg { width: 100%; height: 100%; }
@keyframes exsym {
  0%   { opacity: 0; transform: scale(.25) rotate(-140deg); }
  22%  { opacity: .34; transform: scale(1.06) rotate(6deg); }
  32%  { opacity: .62; transform: scale(.98) rotate(0); }
  85%  { opacity: .42; transform: scale(1.02) rotate(3deg); }
  100% { opacity: 0; transform: scale(1.12) rotate(6deg); }
}

/* anillos de choque en el aterrizaje */
.exrings { position: absolute; display: grid; place-items: center; }
.exrings i {
  position: absolute; border: 3px solid var(--clan); border-radius: 50%;
  width: 120px; height: 120px; opacity: 0;
  animation: exring calc(1.1s * var(--fxk, 1)) cubic-bezier(.1,.8,.3,1) both;
}
.exrings i:nth-child(1) { animation-delay: .42s; }
.exrings i:nth-child(2) { animation-delay: .54s; }
.exrings i:nth-child(3) { animation-delay: .66s; }
@keyframes exring {
  0%   { opacity: .9; transform: scale(.2); border-width: 6px; }
  100% { opacity: 0; transform: scale(9); border-width: 1px; }
}

/* la carta cae desde arriba y aterriza a los 430 ms */
.excard {
  position: relative; width: min(30vh, 42vw); aspect-ratio: 5/7;
  animation: exdrop var(--ex-dur, 2.5s) cubic-bezier(.2,.9,.25,1) both;
  filter: drop-shadow(0 26px 60px rgba(0,0,0,.9))
          drop-shadow(0 0 26px var(--clanglow));
}
.excard img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
              border: 2px solid rgba(255,255,255,.22); display: block; }
@keyframes exdrop {
  0%   { opacity: 0; transform: translateY(-118vh) rotate(-22deg) scale(1.5); }
  14%  { opacity: 1; }
  17%  { transform: translateY(0) rotate(0) scale(1.1); }       /* impacto */
  21%  { transform: translateY(-22px) rotate(1deg) scale(1.02); } /* rebote */
  26%  { transform: translateY(0) rotate(0) scale(1); }
  84%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.06); }
}

.extext {
  position: absolute; bottom: 12%; text-align: center;
  font-family: var(--font-display); animation: extext var(--ex-dur, 2.5s) ease both;
}
@keyframes extext {
  0%,17% { opacity: 0; transform: translateY(18px); }
  27%    { opacity: 1; transform: translateY(0); }
  86%    { opacity: 1; }
  100%   { opacity: 0; }
}
.exkicker { font-size: .8rem; letter-spacing: .42em; text-indent: .42em; color: var(--clan); }
.exname {
  font-size: clamp(1.8rem, 5.4vw, 3.6rem); font-weight: 700; letter-spacing: .06em;
  color: #fff; text-shadow: 0 0 30px var(--clanglow), 0 4px 20px #000; margin: 2px 0;
}
.exclan { font-size: 1rem; letter-spacing: .34em; text-indent: .34em; color: var(--clanglow); }
.exstats { font-size: .84rem; letter-spacing: .12em; color: #cbbdb4; margin-top: 8px; }

/* particulas que salen del impacto */
.exparts { position: absolute; width: 0; height: 0; }
.exparts i {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--clanglow); box-shadow: 0 0 12px var(--clan);
  animation: expart calc(var(--d) * var(--fxk, 1)) cubic-bezier(.15,.8,.3,1) calc(.42s * var(--fxk, 1)) both;
  transform: rotate(var(--a)) translateX(0);
}
@keyframes expart {
  0%   { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(1.3); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(46vh) scale(.2); }
}

/* ---------- combate ---------- */
.slash {
  position: fixed; height: 4px; transform-origin: 0 50%; z-index: 58;
  background: linear-gradient(90deg, transparent, #fff, var(--orange), transparent);
  box-shadow: 0 0 18px rgba(255,154,60,.9);
  animation: slash calc(.4s * var(--fxk, 1)) cubic-bezier(.2,.9,.2,1) both;
}
@keyframes slash {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  25%  { opacity: 1; }
  60%  { clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
.card.lunge { animation: lunge calc(.34s * var(--fxk, 1)) cubic-bezier(.3,1.4,.4,1); z-index: 30; }
@keyframes lunge {
  0%,100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-12px) scale(1.14); }
}
.card.struck { animation: struck calc(.4s * var(--fxk, 1)) ease; }
@keyframes struck {
  0%,100% { filter: none; transform: translate(0,0); }
  20% { filter: brightness(2.4) saturate(.3); transform: translate(-4px, 3px); }
  55% { filter: brightness(1.3); transform: translate(4px, -2px); }
}
.card.kod { animation: kod calc(.38s * var(--fxk, 1)) ease-in forwards; }
@keyframes kod {
  0% { opacity: 1; }
  100% { opacity: 0; transform: scale(.5) rotate(16deg); filter: grayscale(1) brightness(.4); }
}
/* La carta CAE sobre la mesa. Antes era un desplazamiento de 26px con un
   brillo: se leia como un parpadeo, no como algo que aterriza. Ahora hay
   caida desde arriba, aplastado contra la mesa al tocar (squash) y rebote,
   que es lo que hace que se sienta el peso. */
.card.landed { animation: landed calc(.62s * var(--fxk, 1)) cubic-bezier(.3,.9,.3,1) both; }
@keyframes landed {
  0%   { transform: translateY(-115%) scale(1.16) rotate(-4deg); filter: brightness(1.5); }
  46%  { transform: translateY(0) scale(1.1) rotate(0deg); filter: brightness(1.35); }
  58%  { transform: translateY(0) scaleX(1.14) scaleY(.86); }   /* golpea y se aplasta */
  72%  { transform: translateY(-11%) scaleX(.97) scaleY(1.05); } /* rebota */
  86%  { transform: translateY(0) scaleX(1.03) scaleY(.98); }
  100% { transform: none; filter: none; }
}

/* Carta en vuelo: viaja de su pila (mano, mazo, trash, Ambush) al lugar que le
   toca en el campo. Es lo que hace que la jugada del rival se entienda: la
   carta VIENE de algun lado en vez de aparecer en la mesa. */
.flycard {
  position: fixed; z-index: 61; pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left calc(.3s * var(--fxk, 1)) cubic-bezier(.35,.05,.25,1),
              top calc(.3s * var(--fxk, 1)) cubic-bezier(.45,-.1,.3,1),
              width calc(.3s * var(--fxk, 1)) cubic-bezier(.35,.05,.25,1);
}
.flycard img {
  width: 100%; display: block; aspect-ratio: 5/7; object-fit: cover;
  border-radius: 5px; box-shadow: 0 14px 34px rgba(0,0,0,.72);
}

/* Al llegar: se asienta con un aplastado corto. La caida entera (`landed`) es
   para cuando no se sabe de donde salio. */
.card.settle { animation: settle calc(.3s * var(--fxk, 1)) cubic-bezier(.3,.9,.3,1) both; }
@keyframes settle {
  0%   { transform: scaleX(1.1) scaleY(.9); filter: brightness(1.3); }
  55%  { transform: scaleX(.98) scaleY(1.03); }
  100% { transform: none; filter: none; }
}

/* El polvo del impacto: un anillo plano que se abre y se apaga. Sin halos
   difusos — es un filete que crece, como el circulo de un sello. */
.dustring {
  position: fixed; z-index: 57; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid rgba(255,214,160,.85);
  border-radius: 50%;
  animation: dustring calc(.5s * var(--fxk, 1)) cubic-bezier(.1,.7,.3,1) both;
}
@keyframes dustring {
  0%   { opacity: 0; transform: scale(.3) scaleY(.5); }
  25%  { opacity: .95; }
  100% { opacity: 0; transform: scale(4.6) scaleY(1.9); border-width: 1px; }
}

.splat.dmg { color: #ff6b7d; }
.splat.good { color: #8effb0; }
.splat.big { font-size: 3.4rem; }
.splat.ko { color: #cfc3ba; font-size: 2.4rem; }

/* ---------- jutsu ---------- */
.jutsufx {
  position: fixed; left: 50%; top: 34%; transform: translateX(-50%);
  z-index: 60; text-align: center; font-family: var(--font-display);
  animation: jfx calc(1.3s * var(--fxk, 1)) ease both; pointer-events: none;
}
@keyframes jfx {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.9); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(1.03); }
}
.jutsufx .jname {
  font-size: 1.5rem; font-weight: 600; color: #fff; letter-spacing: .05em;
  text-shadow: 0 0 24px var(--clan), 0 2px 12px #000;
}
.jutsufx .jsub { font-size: .8rem; letter-spacing: .2em; color: #cbbdb4; margin-top: 2px; }
/* El simbolo del clan detras del nombre del jutsu. Va DETRAS y tenue: es
   contexto, no el protagonista; el protagonista es el nombre de la tecnica. */
.jutsufx .jmark {
  position: absolute; left: 50%; top: 50%; width: 148px; height: 148px;
  transform: translate(-50%, -52%); z-index: -1; opacity: .34;
  animation: jmark calc(1.3s * var(--fxk, 1)) ease both;
}
.jutsufx .jmark svg { width: 100%; height: 100%; display: block;
                      filter: drop-shadow(0 0 16px var(--clanglow, #fff)); }
@keyframes jmark {
  0% { opacity: 0; transform: translate(-50%,-52%) scale(.6) rotate(-16deg); }
  22% { opacity: .34; transform: translate(-50%,-52%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-52%) scale(1.16) rotate(7deg); }
}
.jutsufx .jclan {
  font-size: .6rem; letter-spacing: .34em; color: var(--clan);
  margin-top: 6px; opacity: .85;
}

/* Sacrificio = TRIBUTO. La carta se parte en 16 pedazos de su propia imagen,
   los pedazos se separan un instante y se los lleva el centro de la pantalla,
   que es de donde va a salir el EX.

   Nada de esto resplandece: el haz es un rectangulo de bordes duros y los
   pedazos son la carta recortada. */
.sacfx {
  position: fixed; z-index: 59; pointer-events: none;
  transform: translate(-50%, -50%);
}
.sacgrid { position: absolute; inset: 0; }
.sacgrid i {
  position: absolute; display: block;
  width: calc(100% / 4); height: calc(100% / 4);
  left: var(--l); top: var(--t);
  background-image: var(--art);
  background-size: 400% 400%;
  background-position: var(--px) var(--py);
  animation: tribute calc(1.05s * var(--fxk, 1)) cubic-bezier(.35,.05,.2,1)
             calc(var(--d) * var(--fxk, 1)) both;
}
@keyframes tribute {
  /* Los primeros 34% la carta esta ENTERA y quieta: es el tiempo de leer cuál
     se está pagando. Sin esta pausa el bot tributaba tan rápido que el EX
     parecía bajar solo. Las grietas aparecen recién cuando se parte. */
  0%   { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1;
         box-shadow: none; }
  30%  { transform: translate(0,0) scale(1.02) rotate(0deg); opacity: 1;
         box-shadow: none; filter: brightness(1.12); }
  38%  { box-shadow: inset 0 0 0 1px rgba(255,214,160,.75); }
  52%  { transform: translate(var(--ox), var(--oy)) scale(1.04) rotate(0deg);
         opacity: 1; filter: brightness(1.7);
         box-shadow: inset 0 0 0 1px rgba(255,214,160,.55); }
  100% { transform: translate(var(--gx), var(--gy)) scale(.06) rotate(var(--rot));
         opacity: 0; filter: brightness(2.4);
         box-shadow: inset 0 0 0 1px rgba(255,214,160,.2); }
}

/* El haz: sube desde la carta cuando se parte. Bordes duros, sin difuminar. */
.sacbeam {
  position: absolute; left: 50%; top: 50%; width: 26%; height: 300%;
  margin-left: -13%; transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(255,214,160,0) 0%,
              rgba(255,190,110,.75) 55%, #ffd9a8 100%);
  animation: sacbeam calc(.55s * var(--fxk, 1)) cubic-bezier(.2,.8,.3,1)
             calc(.33s * var(--fxk, 1)) both;
}
@keyframes sacbeam {
  0%   { opacity: 0; transform: translateY(-66%) scaleY(0) scaleX(.4); }
  30%  { opacity: .95; transform: translateY(-66%) scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: translateY(-66%) scaleY(1.1) scaleX(.15); }
}

.sacfx .saclbl {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  font-family: var(--font-display); font-size: .56rem; letter-spacing: .22em;
  color: #ffe9d6; background: var(--shu); border-radius: 2px; padding: 1px 7px;
  white-space: nowrap;
  animation: saclbl calc(1.05s * var(--fxk, 1)) ease both;
}
@keyframes saclbl {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  14% { opacity: 1; transform: translate(-50%, 0); }
  62% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* Sello del clan sobre una carta: al invocar y al caer. */
.clanstamp {
  position: fixed; z-index: 58; pointer-events: none;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  animation: stamp calc(.9s * var(--fxk, 1)) cubic-bezier(.2,.9,.3,1.1) both;
}
.clanstamp svg { width: 100%; height: 100%; display: block;
                 filter: drop-shadow(0 0 10px var(--clanglow, #fff)); }
@keyframes stamp {
  0% { opacity: 0; transform: scale(1.7) rotate(-12deg); }
  30% { opacity: .9; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.05) translateY(-16%); }
}
/* variante para el K.O.: el sello cae en vez de subir */
.clanstamp.fade { animation-name: stampfall; }
@keyframes stampfall {
  0% { opacity: .85; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.8) translateY(30%) rotate(14deg); }
}

/* chakra recuperado */
.zone.recovered { animation: recov calc(.9s * var(--fxk, 1)) ease; }
@keyframes recov {
  0%,100% { box-shadow: none; }
  35% { box-shadow: 0 0 0 2px var(--orange), 0 0 34px rgba(255,154,60,.75); }
}

/* respeta a quien pidio menos movimiento en el sistema operativo */
@media (prefers-reduced-motion: reduce) {
  .excine, .excard, .exsymbol, .exrings i, .exparts i, .extext,
  .slash, .card.lunge, .card.struck, .card.landed, .dustring, .jutsufx,
  .sacgrid i, .sacbeam, .flycard, .card.settle,
  .board.shake, .board.shakebig { animation-duration: .01ms !important; }
  .excine { background: rgba(6,3,10,.9); }
}

/* ==========================================================================
   PERSONALIZACIÓN (folios, playmat, arte del líder) — todo local
   ========================================================================== */
/* Velocidad de las animaciones. Material plano: color solido y filete, la
   elegida se marca con borde y con el fondo, sin resplandor. */
.speedrow { display: flex; gap: 8px; flex-wrap: wrap; }
.speedopt {
  flex: 1 1 130px; text-align: left; padding: 8px 11px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--panel-line);
  border-radius: 5px; color: var(--ink-dim); font-family: var(--font-ui);
}
.speedopt b { display: block; font-family: var(--font-display); font-size: .84rem;
              font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.speedopt span { font-size: .68rem; line-height: 1.35; display: block; }
.speedopt.on { border-color: var(--orange); background: rgba(245,124,31,.12); }
.speedopt.on b { color: var(--orange-lit); }

.skingrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.skingrid.mats { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.skinopt {
  background: none; border: 2px solid transparent; border-radius: 8px;
  padding: 5px; display: flex; flex-direction: column; gap: 5px; align-items: center;
  cursor: pointer;
}
.skinopt:hover { border-color: var(--panel-line); }
.skinopt.on { border-color: var(--orange); box-shadow: 0 0 16px rgba(245,124,31,.35); }
.skinopt span { font-size: .68rem; color: var(--ink-dim); font-family: var(--font-ui); }
.skinopt .back { width: 100%; aspect-ratio: 5/7; }
.skinopt .matprev { width: 100%; aspect-ratio: 16/10; border-radius: 6px;
                    border: 1px solid rgba(255,255,255,.08); }

.upload { display: inline-block; cursor: pointer; margin-bottom: 14px; }
.upload input { display: none; }
.upload span {
  display: inline-block; font-family: var(--font-display); font-size: .78rem;
  padding: 7px 14px; border: 1px dashed var(--orange-soft); border-radius: var(--r);
  color: var(--orange); transition: background .15s;
}
.upload span:hover { background: rgba(245,124,31,.10); }
.upload.mini span { font-size: .68rem; padding: 4px 9px; }

.skinleaders { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.skinleader {
  display: flex; align-items: center; gap: 10px; font-size: .82rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--panel-line);
  border-radius: 8px; padding: 7px 10px;
}
.skinleader img { width: 34px; aspect-ratio: 5/7; object-fit: cover; border-radius: 4px; }
.skinleader span { flex: 1; }
.skinleader .upload { margin: 0; }

/* ---------- registro + chat dentro del tablero ---------- */
.boardlog {
  display: flex; flex-direction: column; gap: 4px; padding: 5px;
  background: rgba(10,6,4,.62); border: 1px solid var(--panel-line);
  border-radius: 8px; backdrop-filter: blur(4px); overflow: hidden;
}
.blogfeed {
  flex: 1; overflow-y: auto; min-height: 0; padding-right: 2px;
  font-family: var(--font-ui); font-size: clamp(.4rem, 2.1cqh, .72rem);
  line-height: 1.45; scrollbar-width: thin;
}
.blogfeed .fline { color: #b7a894; }
.blogfeed .fturn {
  color: var(--orange); font-family: var(--font-display);
  margin: 4px 0 2px; letter-spacing: .02em;
}
.blogfeed .fwin { color: var(--orange-lit); font-family: var(--font-display); }
.blogfeed .ftime { color: var(--red); }
.blogfeed .fmsg {
  background: rgba(46,111,217,.14); border-left: 2px solid var(--blue);
  padding: 2px 5px; margin: 3px 0; border-radius: 3px; color: #dfe8f5;
  word-break: break-word;
}
.blogfeed .fmsg b { color: var(--blue); font-weight: 700; }
.blogfeed .fmsg.mine {
  background: rgba(245,124,31,.14); border-left-color: var(--orange);
  color: #f7e6d2;
}
.blogfeed .fmsg.mine b { color: var(--orange); }

.bloginput {
  flex: none; font-size: clamp(.42rem, 2cqh, .72rem) !important;
  padding: 4px 7px !important; border-radius: 5px !important;
}

/* ---------- responsive: celular ---------- */
@media (max-width: 860px) {
  :root { --card-w: clamp(38px, 10vw, 56px); --hand-w: clamp(52px, 13vw, 74px); }
  .board { grid-template-columns: 1fr; padding: 4px; }
  /* La botonera flota abajo a la izquierda, en fila para no comer alto. */
  .leftcol { position: fixed; left: 4px; bottom: 4px; z-index: 70; gap: 4px; }
  .toolbar { flex-direction: row; }
  .toolbar button { padding: 6px 10px; }
  .roomcode { font-size: 3rem; }
  /* En vertical el líder pasa arriba y chico: no puede comerse la pantalla. */
  .setupbox { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .stand { order: 1; flex-direction: row; align-items: center; gap: 14px; }
  .setmain { order: 2; }
  .standcard { width: 84px; flex: none; transform: none; }
  .standmeta { text-align: left; margin-top: 0; }
  .setup::before { background: rgba(8,5,3,.86); }   /* velo parejo en vertical */
  .tabs .tab { font-size: .74rem; padding: 9px 4px; }
}

/* ==========================================================================
   RAREZAS — el acabado de la carta
   No cambian NADA del juego: mismo poder, mismo efecto. Cambian cómo se ve.

   El criterio visual es el del foil de verdad: tramas DIRECCIONALES (líneas
   finas) y un barrido de luz que recorre la carta. Nada de resplandores
   difusos, que es lo que hace que una pantalla se lea como generada por IA.

   Los acabados se aplican con ::before (la trama) y ::after (el barrido), así
   que sirven en cualquier contenedor con position:relative y overflow:hidden —
   el tablero y el deckbuilder usan las mismas clases.
   ========================================================================== */
.r-rara, .r-super, .r-ilustracion, .r-secreta { position: relative; }
.r-rara::before, .r-super::before, .r-ilustracion::before, .r-secreta::before,
.r-rara::after, .r-super::after, .r-ilustracion::after, .r-secreta::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
}
/* el barrido vive fuera del borde izquierdo y entra al pasar el mouse */
.r-rara::after, .r-super::after, .r-ilustracion::after, .r-secreta::after {
  background: linear-gradient(105deg,
    transparent 34%, rgba(255,255,255,.50) 47%,
    rgba(255,255,255,.70) 50%, rgba(255,255,255,.50) 53%, transparent 66%);
  mix-blend-mode: overlay;
  transform: translateX(-115%);
  transition: transform .62s cubic-bezier(.35,.6,.3,1);
}
.r-rara:hover::after, .r-super:hover::after,
.r-ilustracion:hover::after, .r-secreta:hover::after { transform: translateX(115%); }

/* ---- Rara: holo fino, solo la trama ---- */
.r-rara::before {
  background: repeating-linear-gradient(112deg,
    rgba(255,255,255,.10) 0 2px, transparent 2px 5px);
  mix-blend-mode: soft-light; opacity: .9;
}
.r-rara { box-shadow: 0 0 0 1px rgba(150,220,170,.55), 0 4px 14px rgba(0,0,0,.6); }

/* ---- Súper Rara: holo más denso + filete metálico ---- */
.r-super::before {
  background:
    repeating-linear-gradient(112deg, rgba(120,200,255,.18) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(68deg, rgba(255,255,255,.10) 0 1px, transparent 1px 6px);
  mix-blend-mode: color-dodge; opacity: .55;
}
.r-super {
  box-shadow: inset 0 0 0 1px rgba(190,225,255,.85),
              inset 0 0 0 2px rgba(46,111,217,.55),
              0 4px 16px rgba(0,0,0,.65);
}

/* ---- Ilustración Rara: textura de cartón + barrido permanente ---- */
.r-ilustracion::before {
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(100deg, rgba(255,190,120,.16) 0 3px, transparent 3px 8px);
  mix-blend-mode: overlay; opacity: .8;
}
.r-ilustracion::after { animation: foilsweep 5.5s linear infinite; }
.r-ilustracion:hover::after { animation: none; }
.r-ilustracion {
  box-shadow: inset 0 0 0 1px rgba(255,205,150,.8),
              0 5px 18px rgba(0,0,0,.7);
}
@keyframes foilsweep {
  0%   { transform: translateX(-115%); }
  55%  { transform: translateX(115%); }
  100% { transform: translateX(115%); }
}

/* ---- Secreta: foil prismático en líneas + grano en relieve ---- */
.r-secreta::before {
  background:
    repeating-linear-gradient(108deg,
      rgba(255,80,80,.20) 0 2px, rgba(255,190,60,.20) 2px 4px,
      rgba(90,220,120,.20) 4px 6px, rgba(80,170,255,.20) 6px 8px,
      rgba(190,110,230,.20) 8px 10px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  mix-blend-mode: color-dodge; opacity: .5;
}
.r-secreta::after { animation: foilsweep 4s linear infinite; }
.r-secreta:hover::after { animation: none; }
.r-secreta {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9),
              inset 0 0 0 2px rgba(176,107,216,.6),
              0 5px 20px rgba(0,0,0,.72);
}

/* Las chapitas de stats van por encima del acabado. */
.card .statbar, .card .hpbar, .card .exbadge { z-index: 3; }
.r-rara::before, .r-super::before, .r-ilustracion::before, .r-secreta::before { z-index: 1; }
.r-rara::after, .r-super::after, .r-ilustracion::after, .r-secreta::after { z-index: 2; }

/* chapita de rareza, para el deckbuilder y la colección */
.rchip2 {
  font-family: var(--font-display); font-size: .56rem; letter-spacing: .1em;
  padding: 1px 5px; border-radius: 3px; color: #12100e;
  background: var(--rc, #8a7a68);
}

/* ---------- misiones del día (inicio) ---------- */
.daily {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--panel-line);
}
.dailyhead {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 7px;
}
.dailyhead b { font-size: .85rem; letter-spacing: .04em; color: var(--orange); }
.dailylist { display: flex; flex-direction: column; gap: 4px; }
.dailyrow {
  display: flex; align-items: center; gap: 9px; font-size: .78rem;
  padding: 5px 8px; border-radius: 4px;
  background: rgba(120,96,60,.07); border: 1px solid transparent;
}
.dailyrow.ready { border-color: var(--orange-soft); background: rgba(180,86,12,.10); }
.dailyrow.done { opacity: .45; }
.dtxt { flex: 1; }
.dprog { font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: .74rem; }
.dclaim {
  font-size: .68rem; padding: 3px 9px; border-radius: 3px; flex: none;
  background: var(--shu); color: #fbf3e6; border: 1px solid #8e1d21;
}
.dclaim:disabled { background: none; color: var(--ink-dim);
                   border-color: var(--panel-line); cursor: default; }
.wonryo { margin-top: 10px; font-family: var(--font-display);
          font-size: 1.15rem; color: var(--orange-lit); }

/* ---------- selector de acabado (deckbuilder) ---------- */
.brarity { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.brlabel {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-display); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 3px;
}
.bryo { color: var(--orange); letter-spacing: .04em; font-size: .8rem; }
.bropt {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 5px 8px; font-size: .76rem; font-family: var(--font-ui);
  background: rgba(255,255,255,.03); border: 1px solid var(--panel-line);
  border-radius: 5px; color: var(--ink);
}
.bropt .brname { flex: 1; }
.bropt .brcost { font-size: .68rem; color: var(--ink-dim); }
.bropt.on { border-color: var(--rc); background: rgba(255,255,255,.07); }
.bropt.lock { opacity: .62; }
.bropt.lock .brcost { color: var(--orange); }
.bropt.nope { animation: denied .45s ease; }
.bropt .rchip2 { background: var(--rc); }

/* tipos bajo el nombre en el deckbuilder: hay cartas que SOLO se distinguen
   por los tipos, y los tipos deciden efectos */
.bcard .bname i {
  display: block; font-style: normal; font-size: .58rem; opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- pila abierta (trash) ---------- */
.pile.openable { cursor: pointer; }
.pile.openable:hover .pilecount { color: var(--orange); }
.pilebox { max-width: 860px; }
.pilegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; max-height: 62vh; overflow-y: auto; padding: 2px;
}
.pilegrid .card { cursor: default; aspect-ratio: 5/7; }
.pilegrid .card:hover { transform: translateY(-3px) scale(1.05); z-index: 5; }

/* ---------- nombres de carta enlazados en el registro ---------- */
.flink {
  color: var(--orange-lit); font-weight: 600; cursor: pointer;
  border-bottom: 1px dotted rgba(255,171,79,.5);
}
.flink:hover { color: #fff; border-bottom-color: #fff; }

/* revelar desde el mazo del RIVAL: baja en vez de subir, o se iría de pantalla */
.revealfx.abajo.up { transform: translate(-50%, 45%) scale(1) rotate(-3deg); }
.revealfx.abajo.out { transform: translate(-50%, 25%) scale(.82); }

/* varias cartas con el mismo nombre: cada una con su distintivo */
.pileitem { cursor: pointer; }
.pilelbl {
  display: block; margin-top: 4px; text-align: center; font-size: .62rem;
  color: var(--ink-dim); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pileitem:hover .pilelbl { color: var(--orange); }
.flink.multi { border-bottom-style: dashed; }

/* tipos en la lista del mazo: desambiguan cartas del mismo nombre */
.brow .bn i {
  display: block; font-style: normal; font-size: .6rem; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- reportar un problema ---------- */
.repbox { max-width: 560px; }
.rephint { font-size: .82rem; color: var(--ink-dim); line-height: 1.6; margin-bottom: 14px; }
.rephint b { color: #8fd39a; }
.reptipos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.reptipo { font-size: .74rem; padding: 5px 11px; color: var(--ink-dim); }
.reptipo.on { color: var(--orange); border-color: var(--orange-soft);
              background: rgba(255,154,60,.10); }
#repTexto {
  width: 100%; resize: vertical; background: rgba(0,0,0,.28); color: var(--ink);
  border: 1px solid var(--panel-line); border-radius: 6px;
  padding: 9px 11px; font-family: var(--font-ui); font-size: .86rem; line-height: 1.5;
}
#repTexto:focus { outline: none; border-color: var(--orange-soft); }
.repctx {
  font-size: .72rem; color: var(--ink-dim); margin-top: 9px;
  padding: 6px 9px; border-left: 2px solid var(--panel-line); line-height: 1.5;
}
.repmsg { font-size: .82rem; min-height: 1.3em; margin-top: 10px; }
.repmsg.ok { color: #8fd39a; }
.repmsg.err { color: #ff8090; }
.repbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.repbtns .bigbtn { font-size: .92rem; padding: 9px 24px; }

/* ---------- lobby: salas abiertas ---------- */
.lobbyhead {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.lobbyhead b { font-size: .85rem; letter-spacing: .04em; color: var(--orange); }
.joinsep {
  margin: 16px 0 9px; font-size: .74rem; color: var(--ink-dim);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.joinsep::before, .joinsep::after {
  content: ""; flex: 1; height: 1px; background: rgba(230,220,196,.14);
}

/* ---------- reglamento para el jugador ---------- */
.rulesbox { max-width: 680px; }
.rulesdoc { font-size: .84rem; line-height: 1.65; }
.ruleslead {
  color: var(--ink-dim); margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--panel-line);
}
.ruleslead b { color: var(--ink); }
.rulesec { margin-bottom: 18px; }
.rulesec h3 {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 7px;
}
.rulesec ul { list-style: none; padding: 0; }
.rulesec li {
  position: relative; padding-left: 15px; margin-bottom: 5px; color: #cabeb2;
}
.rulesec li::before {
  content: "—"; position: absolute; left: 0; color: var(--ink-dim);
}
.rulescred {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--panel-line);
  font-size: .76rem; color: var(--ink-dim); line-height: 1.6;
}
.rulescred b { color: #cabeb2; }
.rulescred a { color: var(--orange); }

/* ==========================================================================
   PANTALLA DE CARGA
   Material plano, como el resto: color sólido, trama de washi y filete. La
   barra es un bloque naranja que crece, sin degradado ni resplandor.
   ========================================================================== */
#preload {
  position: fixed; inset: 0; z-index: 998;
  display: grid; place-items: center; padding: 24px;
  background: #17110d;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px);
}
.prebox {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  min-width: 260px; max-width: 340px; padding: 26px 22px;
  background: var(--panel, #1d1611); border: 1px solid var(--panel-line);
  border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.65);
}
.prebox b { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.prebox span { font-size: .8rem; color: var(--ink-dim); line-height: 1.5; }
.pretrack {
  width: 100%; height: 8px; margin-top: 4px; border-radius: 2px;
  background: #100c09; border: 1px solid var(--panel-line); overflow: hidden;
}
.pretrack i { display: block; height: 100%; width: 0; background: var(--orange);
              transition: width .18s linear; }
.prenum { font-family: var(--font-display); font-size: .78rem; color: var(--ink-dim); }

/* ==========================================================================
   CELULAR EN VERTICAL — girá el teléfono
   Material plano: color sólido, filete y trama; sin resplandores.
   ========================================================================== */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  body.playing #rotate {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 999;
    background: #17110d;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px);
    padding: 24px;
  }
  body.playing .board { visibility: hidden; }
}
.rotbox {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  max-width: 320px; padding: 26px 22px;
  background: var(--panel, #1d1611); border: 1px solid var(--panel-line);
  border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.65);
}
.rotbox b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.rotbox span { font-size: .82rem; color: var(--ink-dim); line-height: 1.5; }
.rotbox button { margin-top: 8px; padding: 9px 16px; }
.rotphone { width: 108px; height: 82px; fill: none; stroke: var(--orange);
            stroke-width: 3; animation: rotphone 2.6s ease-in-out infinite; }
.rotphone rect { fill: rgba(245,124,31,.10); }
.rotphone .rotarrow { stroke: var(--ink-dim); }
.rotphone .rothead { fill: var(--ink-dim); stroke: none; }
@keyframes rotphone {
  0%, 42% { transform: rotate(0deg); }
  62%, 100% { transform: rotate(-90deg); }
}