/* Base compartida del cliente: tokens, tipografía, componentes (docs/diseno.md es el contrato). Cada módulo tiene su css aparte. */
/* La tipografía de las cartas de Magic, sacada del propio MTG Arena instalado en esta Mac
   (tools/mtga-piezas/mtga-fuentes.mjs). Se usa SOLO en la carta del campo estilo Arena: el nombre, la línea
   de tipo y los números de fuerza/resistencia. El resto de la interfaz sigue con --font. */
@font-face { font-family: Beleren; src: url(/fonts/BELEREN2016-BOLD.otf) format('opentype'); font-weight: 700; font-style: normal; font-display: block; }
:root {
  color-scheme: dark;
  accent-color: var(--gold);
  /* fondos y bordes (cálidos, casi negros) */
  --bg: #120d09; --bg-2: #17110b; --panel: #1e1710; --panel-2: #261d15; --panel-3: #30251a;
  --border: #33281d; --border-2: #473727;
  /* texto */
  --text: #efe6d8; --text-2: #bfb2a0; --muted: #8a7d6b;
  /* acentos de marca */
  --gold: #c9a23b; --gold-2: #e0b94f; --forest: #2f6b3f; --forest-2: #3d8a51; --ember: #d67d2a; --ember-2: #e8923e;
  --wine: #9b2323; --wine-2: #b83333; --wood: #7a5232;
  /* alias semánticos (el código viejo los usa; siguen valiendo) */
  --accent: var(--gold); --accent-2: var(--gold-2); --green: var(--forest-2); --green-2: var(--forest);
  --orange: var(--ember); --orange-2: var(--ember-2); --red: var(--wine-2); --yellow: var(--gold); --purple: #8b5fbf;
  --on-accent: #1a0e07;              /* texto sobre dorado */
  /* colores de maná (no cambian, son de Magic) */
  --w: #f8f2d8; --u: #3b8fd9; --b: #7b6b8c; --r: #e05a3a; --g: #3fa65b; --c: #9aa3ad;
  /* espaciado */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* tipografía */
  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 16px; --fs-6: 18px; --fs-7: 22px; --fs-8: 28px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-carta: Beleren, "Iowan Old Style", Palatino, Georgia, serif;   /* la del juego, para la carta del campo */
  /* radios */
  /* flecha de objetivo: los colores que usa MTG Arena, medidos en sus materiales */
  --arrow-1: #ff6036; --arrow-2: #ffb01e; --arrow-3: #ffed00; --arrow-core: #fff8d0;
  /* paleta de la carta del campo de MTG Arena (Bucket_Card.ColorOverride_*). Los dos juegos son de tablas
     distintas del juego: PinlineColors pinta el hilo del marco del arte y el filete de la barra del nombre;
     TitleBarColors, el plato claro de esa barra. No son colores de diseño: son los del juego.
     No hay caso "tierra": una tierra lleva el color del maná que produce (ver HS.arenaTinte). */
  --ar-pin-c: #dedfe0; --ar-pin-W: #f4f3eb; --ar-pin-U: #006eab; --ar-pin-B: #383631; --ar-pin-R: #e23f26; --ar-pin-G: #006f41; --ar-pin-M: #edd26d;
  --ar-bar-c: #ccc4c0; --ar-bar-W: #f2efe6; --ar-bar-U: #b7d3e4; --ar-bar-B: #c0b8b6; --ar-bar-R: #f2c8b3; --ar-bar-G: #becec4; --ar-bar-M: #ccb575;
  /* insignias de habilidad (prefab BadgeViewWithIcon): azulejo claro con el ícono oscuro. #E7E7E7 si la
     habilidad ya es de la carta, #8ACEFF si es ganada con un contador. */
  --ar-badge-propia: #e7e7e7; --ar-badge-ganada: #8aceff;
  /* el nombre en la barra del campo va en negro (TextMeshPro "Battlefield Title - Toho", m_fontColor32 =
     0xFF000000), sobre el plato claro. Nada de blanco sobre negro: eso era la barra de otra pieza. */
  --ar-ink-titulo: #000;
  /* la carta del campo está APOYADA en la mesa, no flotando: tiene una sombra de contacto corta. Medida en
     una captura del juego: el suelo pegado al borde baja al 46 % de su luz y se recupera en unos 9 px sobre
     una carta de 220, o sea un desenfoque del 2,95 % del ancho con 1,14 % de corrimiento hacia abajo. */
  --ar-sombra-tinta: rgba(0,0,0,.6);
  /* fuerza y resistencia: tinta negra, y azul o rojo si los contadores la cambiaron (Text_LightGreyBlueRed) */
  --ar-sube: #0055ff; --ar-baja: #c20000;
  --rojo-contador: #dd4630;   /* el rojo del contador común (Ctrl+1), medido en EDHPlay: más vivo que --wine-2 */
  --rojo-vida: #db7269;       /* la píldora "♥ +6" de la vida, medida en EDHPlay: el mismo rojo suba o baje */
  --ar-ink: #16120d; --ar-base: #0b0907;
  --card-black: #0b0907; /* el negro del borde de una carta de Magic */
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-pill: 999px; --r-card: 4.75% / 3.4%;
  /* sombras y brillos */
  --sh-1: 0 1px 3px rgba(0,0,0,.5); --sh-2: 0 6px 18px rgba(0,0,0,.45); --sh-3: 0 14px 40px rgba(0,0,0,.6);
  --glow-gold: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 14px color-mix(in srgb, var(--gold) 35%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent);
  /* movimiento */
  --t-fast: .12s; --t-base: .18s; --t-slow: .3s; --ease: cubic-bezier(.2,.7,.2,1);
  --t-lento: .8s;      /* entradas de página (la portada) */
  --t-ambiente: 6s;   /* movimientos que se repiten solos, muy lentos (el brillo del tocón en la portada) */
  /* capas */
  --z-raise: 10; --z-float: 100; --z-arrows: 500; --z-menu: 900; --z-modal: 1000; --z-toast: 1100; --z-drag: 1200;
}
/* alias de los tokens viejos: los css de módulo todavía los usan (pages.css, table.css, draft.css) */
:root { --radius: var(--r-3); --radius-s: var(--r-2); --shadow: var(--sh-2); --card-ratio: 1.4; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-4); line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--gold-2); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-8); font-family: var(--font-display); font-weight: 600; letter-spacing: 0; } h2 { font-size: var(--fs-6); } h3 { font-size: var(--fs-5); }
p { margin: 0 0 .8em; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--wood) 60%, var(--panel-3)); border-radius: var(--r-2); border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: color-mix(in srgb, var(--wood) 60%, var(--panel-3)) transparent; }

.muted { color: var(--muted); } .small { font-size: var(--fs-2); } .tiny { font-size: var(--fs-1); }
.caps { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.sec-title { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 600; letter-spacing: 0; margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border-2); }
h1.sec-title { font-size: var(--fs-7); }
.row { display: flex; align-items: center; gap: var(--s2); } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; } .right { margin-left: auto; } .col { display: flex; flex-direction: column; gap: var(--s2); }
.hidden { display: none !important; }
.sep { height: 1px; background: var(--border); margin: var(--s3) 0; }

/* ---------- íconos (HS.icon) ---------- */
.icon { display: inline-flex; width: 16px; height: 16px; flex: none; vertical-align: middle; }
.icon-sm { width: 14px; height: 14px; } .icon-lg { width: 20px; height: 20px; }
.icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-spin svg { animation: spin calc(var(--t-slow) * 3) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- botones ---------- */
.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs, .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 36px; padding: 0 14px; border-radius: var(--r-2); border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); font-weight: 600; font-size: var(--fs-3); line-height: 1; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); user-select: none; text-decoration: none; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.btn:hover, .btn-icon:hover, .btn-icon-sm:hover, .btn-icon-xs:hover { background: var(--panel-3); border-color: color-mix(in srgb, var(--border-2) 60%, var(--text-2)); text-decoration: none; }
.btn:active, .btn-icon:active, .btn-icon-sm:active, .btn-icon-xs:active, .icon-btn:active { transform: translateY(1px); }
.btn:disabled, .btn-icon:disabled, .btn-icon-sm:disabled, .btn-icon-xs:disabled, .icon-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 92%, white), var(--gold)); border-color: color-mix(in srgb, var(--gold) 70%, var(--on-accent)); color: var(--on-accent); }
.btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--gold-2) 92%, white), var(--gold-2)); border-color: var(--gold-2); }
.btn-green { background: var(--forest); border-color: var(--forest); color: var(--text); } .btn-green:hover { background: var(--forest-2); border-color: var(--forest-2); }
.btn-orange { background: var(--ember); border-color: var(--ember); color: var(--on-accent); } .btn-orange:hover { background: var(--ember-2); border-color: var(--ember-2); }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--wine-2) 60%, transparent); color: color-mix(in srgb, var(--wine-2) 70%, white); box-shadow: none; }
.btn-danger:hover { background: color-mix(in srgb, var(--wine) 18%, transparent); border-color: var(--wine-2); }
.btn-ghost, .icon-btn { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn-ghost:hover, .icon-btn:hover { background: var(--panel-2); border-color: transparent; color: var(--text); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-2); gap: var(--s1); }
.btn-lg { height: 44px; padding: 0 20px; font-size: var(--fs-5); }
.btn-block { width: 100%; }
.btn-icon, .icon-btn { width: 36px; padding: 0; flex: none; }
.btn-icon-sm, .btn-icon-xs { flex: none; }
.btn-icon.btn-sm, .btn-icon-sm { width: 28px; height: 28px; padding: 0; }
.btn-icon-xs { width: 20px; height: 20px; padding: 0; border-width: 1px; font-size: var(--fs-1); }
.btn-icon-xs .icon { width: 12px; height: 12px; }
.icon-btn { font-size: var(--fs-5); } /* alias de .btn-icon.btn-ghost; los módulos todavía le ponen un carácter adentro */

/* ---------- inputs ---------- */
.input, .select, .textarea { width: 100%; height: 36px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-2); padding: 0 var(--s3); color: var(--text); outline: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--gold); box-shadow: var(--ring); }
.select:focus-visible { color: var(--gold-2); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; }
.input-error, .input-error:focus-visible { border-color: var(--wine); }
/* chevron del select: dos degradés en currentColor (un <select> no admite pseudo-elementos y una máscara recorta, no pinta) */
.select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
                    linear-gradient(135deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 6px 6px, 6px 6px; background-position: right 16px center, right 11px center; background-repeat: no-repeat; }
.select option { background: var(--panel); color: var(--text); }
.textarea { height: auto; min-height: 120px; padding: var(--s2) var(--s3); resize: vertical; font-family: var(--font-mono); font-size: var(--fs-2); line-height: 1.5; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.range { appearance: auto; -webkit-appearance: auto; width: 100%; height: 36px; margin: 0; padding: 0; background: none; border: 0; accent-color: var(--gold); cursor: pointer; }
.field { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); }
.field > label { font-size: var(--fs-2); color: var(--text-2); font-weight: 600; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; font-size: var(--fs-3); color: var(--text-2); }

/* segmentado */
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: 3px; gap: 3px; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 28px; border: 0; background: transparent; color: var(--text-2); padding: 0 var(--s3); border-radius: var(--r-1); font-weight: 600; font-size: var(--fs-3); line-height: 1; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg button.on { background: var(--gold); color: var(--on-accent); }
.seg button:hover:not(.on) { background: var(--panel-3); color: var(--text); }
.seg-fill { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* switch */
.switch { position: relative; width: 34px; height: 18px; border-radius: var(--r-pill); background: var(--border-2); border: 0; padding: 0; flex: none; transition: background var(--t-fast) var(--ease); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--text); transition: left var(--t-fast) var(--ease); }
.switch.on { background: var(--gold); } .switch.on::after { left: 18px; background: var(--on-accent); }
.switch:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- paneles y superficies ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-3); }
.glass, .toast, .pill { background: color-mix(in srgb, var(--panel-2) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--sh-2); }
.card-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-3); padding: 14px; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.card-tile:hover { border-color: var(--border-2); }
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 72px; border-radius: var(--r-3); background: linear-gradient(180deg, var(--panel), transparent); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; background: url(/brand/stump.png) left center / auto 140% no-repeat; }
.grid { display: grid; gap: var(--s3); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* cartas */
.card { border-radius: var(--r-card); background: var(--card-black); box-shadow: var(--sh-1); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), filter var(--t-base) var(--ease); }
.card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover:not(.no-hover) { box-shadow: var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.12); filter: brightness(1.08); }
.back-thumb { width: 40px; aspect-ratio: 5 / 7; flex: none; }
.card-placeholder { aspect-ratio: 1 / 1.4; background: var(--panel-2); border: 2px solid var(--wood); border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s3); font-weight: 700; color: var(--text); }

/* etiquetas */
.badge { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; flex: none; padding: 2px var(--s2); border-radius: var(--r-pill); background: var(--panel-3); color: var(--text-2); font-size: var(--fs-1); font-weight: 600; line-height: 1.4; }
.badge-green { background: color-mix(in srgb, var(--forest-2) 18%, transparent); color: color-mix(in srgb, var(--forest-2) 60%, white); }
.badge-gold, .badge-blue { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-2); }
.badge-red { background: color-mix(in srgb, var(--wine-2) 18%, transparent); color: color-mix(in srgb, var(--wine-2) 55%, white); }
.badge-orange { background: color-mix(in srgb, var(--ember) 18%, transparent); color: var(--ember-2); }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-1); background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--text); font-size: var(--fs-1); font-weight: 700; line-height: 1; box-shadow: var(--sh-1); }
.chip-plus { background: var(--forest); } .chip-minus { background: var(--wine); } .chip-pt { background: var(--gold); color: var(--on-accent); } .chip-tok { background: var(--purple); }
.pill { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3); border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-3); white-space: nowrap; }
.pill-active { border-color: var(--forest-2); box-shadow: var(--sh-2), 0 0 0 1px color-mix(in srgb, var(--forest-2) 45%, transparent), 0 0 12px color-mix(in srgb, var(--forest-2) 30%, transparent); }
.dot { width: 8px; height: 8px; border-radius: var(--r-pill); display: inline-block; flex: none; background: var(--muted); }
.dot-green { background: var(--forest-2); } .dot-red { background: var(--wine-2); }
kbd, .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-1); background: var(--panel-3); border: 1px solid var(--border-2); border-bottom-width: 2px; font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 700; color: var(--text); line-height: 1; }

/* estados */
.empty { color: var(--muted); text-align: center; padding: var(--s6) var(--s3); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; padding: var(--s6) var(--s4); background: var(--panel); border-radius: var(--r-3); color: var(--text-2); }
.empty-state > .icon { width: 28px; height: 28px; color: var(--muted); }
.empty-state.is-error .icon { color: var(--wine-2); }
.empty-state .btn { margin-top: var(--s1); }
.skeleton { display: block; min-height: 14px; border-radius: var(--r-2); background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer calc(var(--t-slow) * 4) var(--ease) infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.tip { position: fixed; z-index: var(--z-toast); max-width: 260px; padding: var(--s1) var(--s2); background: var(--panel-3); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-2); box-shadow: var(--sh-2); font-size: var(--fs-2); font-weight: 500; line-height: 1.35; pointer-events: none; animation: fade var(--t-fast) var(--ease); }
#conn-banner { position: fixed; top: var(--s3); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s4); border-color: var(--ember); border-radius: var(--r-pill); color: var(--text); font-size: var(--fs-3); font-weight: 600; white-space: nowrap; animation: drop var(--t-base) var(--ease); }
#conn-banner .icon { color: var(--ember-2); }
@keyframes drop { from { transform: translate(-50%, -8px); opacity: 0; } }

/* íconos de MTG Arena: PNG blanco con alfa usado como máscara, así toma currentColor como los HS.icon */
.micon { display: inline-flex; width: 16px; height: 16px; flex: none; background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.micon.icon-sm { width: 14px; height: 14px; } .micon.icon-lg { width: 20px; height: 20px; }

/* pips de maná: símbolos reales de Magic. Los SVG (de Scryfall, con su propio color y su círculo de
   fondo) viven en public/symbols/; un archivo por símbolo, referenciado desde una clase .pip-<clave>.
   El tamaño se hereda: cualquier ancestro puede poner --pip-size (default 14px, el de hoy). OJO: el default
   va en el var() de .pip, NUNCA declarado en .pips, porque ahí taparía el valor del ancestro. */
.pips { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.pips-em { --pip-size: 1.1em; }   /* escala con el font-size del texto que lo rodea */
.pip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--pip-size, 14px); height: var(--pip-size, 14px); border-radius: var(--r-pill); color: transparent; background: center / contain no-repeat; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 45%, transparent); }
/* sin SVG (rarezas de Un-sets como {L} o {D}): vuelve al circulito con la letra, legible */
.pip-txt { color: var(--on-accent); background-color: var(--c); font-size: calc(var(--pip-size, 14px) * .58); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
/* el {1000000} de Gleemax es una píldora ancha, no un círculo */
.pip-1000000 { width: calc(var(--pip-size, 14px) * 5); border-radius: var(--r-pill); }
/* medio símbolo ({HW}): la mitad derecha de un círculo */
.pip-hw { width: calc(var(--pip-size, 14px) / 2); border-radius: 0 var(--r-pill) var(--r-pill) 0; }
/* un archivo por símbolo; el navegador baja solo los que aparecen en pantalla */
/* colores */
.pip-w{background-image:url(/symbols/w.svg)} .pip-u{background-image:url(/symbols/u.svg)} .pip-b{background-image:url(/symbols/b.svg)} .pip-r{background-image:url(/symbols/r.svg)} .pip-g{background-image:url(/symbols/g.svg)} .pip-c{background-image:url(/symbols/c.svg)}
/* genéricos */
.pip-0{background-image:url(/symbols/0.svg)} .pip-1{background-image:url(/symbols/1.svg)} .pip-2{background-image:url(/symbols/2.svg)} .pip-3{background-image:url(/symbols/3.svg)} .pip-4{background-image:url(/symbols/4.svg)} .pip-5{background-image:url(/symbols/5.svg)} .pip-6{background-image:url(/symbols/6.svg)} .pip-7{background-image:url(/symbols/7.svg)} .pip-8{background-image:url(/symbols/8.svg)} .pip-9{background-image:url(/symbols/9.svg)} .pip-10{background-image:url(/symbols/10.svg)} .pip-11{background-image:url(/symbols/11.svg)} .pip-12{background-image:url(/symbols/12.svg)} .pip-13{background-image:url(/symbols/13.svg)} .pip-14{background-image:url(/symbols/14.svg)} .pip-15{background-image:url(/symbols/15.svg)} .pip-16{background-image:url(/symbols/16.svg)} .pip-17{background-image:url(/symbols/17.svg)} .pip-18{background-image:url(/symbols/18.svg)} .pip-19{background-image:url(/symbols/19.svg)} .pip-20{background-image:url(/symbols/20.svg)} .pip-x{background-image:url(/symbols/x.svg)} .pip-y{background-image:url(/symbols/y.svg)} .pip-z{background-image:url(/symbols/z.svg)}
/* especiales */
.pip-tap{background-image:url(/symbols/tap.svg)} .pip-untap{background-image:url(/symbols/untap.svg)} .pip-s{background-image:url(/symbols/s.svg)} .pip-e{background-image:url(/symbols/e.svg)}
/* híbridos */
.pip-wu{background-image:url(/symbols/wu.svg)} .pip-ub{background-image:url(/symbols/ub.svg)} .pip-br{background-image:url(/symbols/br.svg)} .pip-rg{background-image:url(/symbols/rg.svg)} .pip-gw{background-image:url(/symbols/gw.svg)} .pip-wb{background-image:url(/symbols/wb.svg)} .pip-ur{background-image:url(/symbols/ur.svg)} .pip-bg{background-image:url(/symbols/bg.svg)} .pip-rw{background-image:url(/symbols/rw.svg)} .pip-gu{background-image:url(/symbols/gu.svg)}
/* 2/color */
.pip-2w{background-image:url(/symbols/2w.svg)} .pip-2u{background-image:url(/symbols/2u.svg)} .pip-2b{background-image:url(/symbols/2b.svg)} .pip-2r{background-image:url(/symbols/2r.svg)} .pip-2g{background-image:url(/symbols/2g.svg)}
/* fyrexianos */
.pip-wp{background-image:url(/symbols/wp.svg)} .pip-up{background-image:url(/symbols/up.svg)} .pip-bp{background-image:url(/symbols/bp.svg)} .pip-rp{background-image:url(/symbols/rp.svg)} .pip-gp{background-image:url(/symbols/gp.svg)} .pip-cp{background-image:url(/symbols/cp.svg)}
/* híbridos fyrexianos */
.pip-wup{background-image:url(/symbols/wup.svg)} .pip-ubp{background-image:url(/symbols/ubp.svg)} .pip-brp{background-image:url(/symbols/brp.svg)} .pip-rgp{background-image:url(/symbols/rgp.svg)} .pip-gwp{background-image:url(/symbols/gwp.svg)} .pip-wbp{background-image:url(/symbols/wbp.svg)} .pip-urp{background-image:url(/symbols/urp.svg)} .pip-bgp{background-image:url(/symbols/bgp.svg)} .pip-rwp{background-image:url(/symbols/rwp.svg)} .pip-gup{background-image:url(/symbols/gup.svg)}
/* incoloro/color */
.pip-cw{background-image:url(/symbols/cw.svg)} .pip-cu{background-image:url(/symbols/cu.svg)} .pip-cb{background-image:url(/symbols/cb.svg)} .pip-cr{background-image:url(/symbols/cr.svg)} .pip-cg{background-image:url(/symbols/cg.svg)}
/* rarezas */
.pip-hw{background-image:url(/symbols/hw.svg)} .pip-1000000{background-image:url(/symbols/1000000.svg)}

/* ---------- modales ---------- */
.modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--s4); animation: fade var(--t-fast) var(--ease); }
.modal { background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--r-4); width: min(440px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--sh-3); animation: pop var(--t-base) var(--ease); }
.modal-wide { width: min(860px, 100%); } .modal-xl { width: min(1200px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: var(--fs-6); font-weight: 700; }
.modal-body { padding: var(--s4); overflow: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
.modal-card .modal-body { padding: var(--s4); }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { transform: scale(.97); opacity: 0; } }

/* info de carta (HS.showCard) */
.cardinfo { display: grid; grid-template-columns: 260px 1fr; gap: var(--s5); }
.cardinfo-img .card, .cardinfo-img img { width: 100%; } .cardinfo-back { margin-top: var(--s2); }
.cardinfo-text h3 { font-size: var(--fs-6); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cardinfo-type { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s1) 0 var(--s3); }
.cardinfo-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-bottom: var(--s3); }
.cardinfo-meta .badge { height: 20px; }
.cardinfo-meta .icon { width: 12px; height: 12px; }
.cardinfo-gc { background: color-mix(in srgb, var(--gold) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold-2); font-weight: 700; }
.cardinfo-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.oracle p { margin: 0 0 var(--s2); } .rulings { padding-left: var(--s4); font-size: var(--fs-2); } .rulings li { margin-bottom: var(--s2); }
@media (max-width: 640px) { .cardinfo { grid-template-columns: 1fr; } .cardinfo-img { max-width: 240px; margin: 0 auto; } }

/* ---------- toasts ---------- */
#toast-root { position: fixed; right: var(--s4); bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s2); z-index: var(--z-toast); pointer-events: none; }
.toast { min-width: 240px; max-width: 360px; border-left: 3px solid var(--gold); padding: 10px 14px; font-size: var(--fs-3); animation: slide var(--t-base) var(--ease); }
.toast-title { font-weight: 700; margin-bottom: 2px; }
.toast-error { border-left-color: var(--wine-2); } .toast-success { border-left-color: var(--forest-2); }
.toast.out { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
@keyframes slide { from { transform: translateX(20px); opacity: 0; } }

/* ---------- cabecera de las páginas (no de la mesa) ---------- */
.topbar { position: sticky; top: 0; z-index: var(--z-float); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.topbar-in { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; gap: var(--s2); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); margin-right: var(--s4); color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); letter-spacing: .02em; flex: none; }
.brand:hover { text-decoration: none; color: var(--gold-2); }
.brand-ico, .brand img { width: 34px; height: 34px; flex: none; object-fit: cover; border-radius: var(--r-2); box-shadow: var(--sh-1); } /* el logo ya trae su cuero de fondo */
.brand-word { display: inline-block; width: 128px; height: 30px; -webkit-mask: url(/brand/wordmark.png) center / contain no-repeat; mask: url(/brand/wordmark.png) center / contain no-repeat; background-color: var(--text); transition: background-color var(--t-fast) var(--ease); }
.brand:hover .brand-word { background-color: var(--gold-2); }
.brand b { color: var(--gold); } /* wordmark viejo en texto (los módulos lo siguen usando hasta migrar a HS.brand) */
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; white-space: nowrap; border-radius: var(--r-2); color: var(--text-2); font-weight: 600; font-size: var(--fs-3); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.on { background: var(--panel-2); color: var(--text); }
.page { max-width: 1200px; margin: 0 auto; padding: var(--s5) 20px 60px; }
.user-chip { display: inline-flex; align-items: center; gap: var(--s2); height: 32px; padding: 0 var(--s3) 0 10px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; flex: none; border-radius: var(--r-pill); background: var(--panel-2); border: 1px solid var(--border); font-size: var(--fs-2); font-weight: 600; color: var(--text); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.user-chip:hover { border-color: var(--border-2); background: var(--panel-3); }
.lan-hint { font-size: var(--fs-2); color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.lan-hint code { background: var(--panel-2); padding: 2px 6px; border-radius: var(--r-1); color: var(--text-2); font-family: var(--font-mono); }
.lan-addr { font-family: var(--font-mono); font-size: var(--fs-7); font-weight: 600; text-align: center; color: var(--gold-2); padding: var(--s3); margin-bottom: var(--s3); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-3); user-select: all; word-break: break-all; }

/* ---------- foco y movimiento ---------- */
.btn:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible, .seg button:focus-visible, .switch:focus-visible, .chip:focus-visible, .btn-icon:focus-visible, .btn-icon-sm:focus-visible, .btn-icon-xs:focus-visible, .icon-btn:focus-visible, .range:focus-visible, .user-chip:focus-visible, .nav a:focus-visible, .brand:focus-visible, .pill:focus-visible, .tb-side-item:focus-visible, .tb-menu-item:focus-visible, .tb-ctr-row:focus-visible, .df-card:focus-visible, .pg-chip:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 800px) { .hidden-sm { display: none !important; } .brand-word { width: 96px; height: 24px; } .brand { margin-right: var(--s2); } }
@media (max-width: 720px) { .topbar-in { padding: 0 var(--s3); } .page { padding: var(--s4) var(--s3) 60px; } .nav a { padding: 0 7px; } }
/* .round gana a .glass/.pill (mismo peso, va último) */
.round, .round.glass, .round.pill { border-radius: var(--r-pill); }
@media (max-width: 560px) { .brand-word { display: none; } .brand { margin-right: 0; } .topbar-in { gap: var(--s1); } .nav a { padding: 0 6px; font-size: var(--fs-2); } .user-chip { max-width: 96px; padding: 0 var(--s2) 0 var(--s2); } }