/* ══ wallhunt ds v1 · sistema de componentes único (prefijo wh-) ═══
   Todo componente nuevo se define aquí y se registra en COMPONENTS.md. */

/* ── chrome: header + footer ─────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.wordmark { font-weight: 600; font-size: 15px; letter-spacing: -0.3px; }
.wordmark span { color: var(--accent); }
header .wordmark { cursor: pointer; }
footer {
  position: fixed; inset: auto 0 0 0; z-index: 15;
  display: flex; gap: 18px; align-items: center;
  padding: 8px 28px; font-size: 11.5px; color: var(--text-muted);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  white-space: nowrap;
}
footer .legend { display: flex; gap: 12px; margin-left: auto; }
footer .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
kbd {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text); background: var(--surface-2);
  padding: 0 6px; border-radius: 5px;
}

/* ── botones ─────────────────────────────────────────────────────── */
.wh-btn {
  font: inherit; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 14px;
  transition: background var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap),
              transform var(--dur-fast) var(--ease-snap);
}
.wh-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.wh-btn:active { transform: scale(.96); }
.wh-btn:disabled { color: var(--text-muted); cursor: wait; transform: none; }
.wh-btn--accent { color: var(--accent); border-color: #6d5ae64d; }
.wh-btn--sm { padding: 4px 13px; font-size: 12px; }
.wh-btn--pill { border-radius: 99px; }
.wh-btn--icon { padding: 6px 9px; color: var(--text-muted); }
.wh-btn--icon:hover { color: var(--text); }
.wh-btn--primary {
  position: relative; overflow: hidden;
  background: var(--accent); border-color: transparent;
  color: #fff; font-weight: 500;
}
.wh-btn--primary:hover { background: var(--accent-hover); }
.wh-btn--primary:active { transform: scale(.95); }
.wh-btn--primary::after, .wh-btn--discord::after {   /* barrido especular idle — la firma crispy */
  content: ""; position: absolute; inset: -10% -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, #ffffff59 50%, transparent 58%);
  transform: translateX(-120%) skewX(-10deg);
  animation: wh-sweep 4.5s cubic-bezier(.6,.05,.3,1) infinite;
}
@keyframes wh-sweep {
  0% { transform: translateX(-120%) skewX(-10deg); }
  18%, 100% { transform: translateX(120%) skewX(-10deg); }
}
.wh-btn--primary:disabled { background: var(--surface-2); color: var(--text-muted); }
.wh-btn--primary:disabled::after { animation: none; }
.wh-btn .spin, .wh-menu-item .spin { display: inline-block; }
.wh-btn:disabled .spin, .wh-menu-item:disabled .spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── control segmentado ──────────────────────────────────────────── */
.wh-seg { display: flex; gap: 2px; background: var(--surface); border-radius: 8px; padding: 3px; }
.wh-seg button {
  font: inherit; font-size: 12.5px; color: var(--text-muted); background: none; border: 0;
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 6px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap);
}
.wh-seg button:hover { color: var(--text); }
.wh-seg button.on { background: var(--surface-2); color: var(--text); }
.wh-seg button.on.kept { color: var(--success); }
.wh-seg button.on.fav, .wh-seg button.on.trashed { color: var(--danger); }
.wh-seg .n { font-family: var(--font-mono); font-size: 10.5px; margin-left: 6px; font-weight: 400; opacity: .7; }
.wh-seg .n:empty { display: none; }
.wh-seg--icons button { padding: 5px 8px; }

/* ── búsqueda colapsada (header) — abre la huntbar con B ─────────── */
.wh-search {
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 99px;
  padding: 5px 7px 5px 12px; min-width: 160px; max-width: 320px;
  transition: border-color var(--dur-fast) var(--ease-snap), color var(--dur-fast);
}
.wh-search:hover { border-color: var(--border-strong); color: var(--text); }
.wh-search .wh-search-hint {
  flex: 1; text-align: left; font-size: 12px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-search kbd { margin-left: auto; color: var(--text-muted); }
.wh-search.hunting {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ── huntbar: búsqueda spotlight — atenúa el resto del sitio ─────── */
.wh-huntbar, .wh-help, .wh-modal {
  position: fixed; inset: 0; z-index: 40;
  display: none;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(7px) saturate(.85);
}
.wh-huntbar { justify-content: center; align-items: flex-start; padding-top: 14vh; }
.wh-help, .wh-modal { justify-content: center; align-items: center; }
.wh-huntbar.on, .wh-help.on, .wh-modal.on { display: flex; animation: wh-fade var(--dur-base) ease; }
@keyframes wh-fade { from { opacity: 0; } }
.wh-huntbar-card, .wh-help-card, .wh-modal-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  animation: wh-overlay-enter .25s var(--ease-snap);
}
@keyframes wh-overlay-enter { from { transform: translateY(-14px) scale(.98); opacity: 0; } }
.wh-huntbar-card::before, .wh-help-card::before, .wh-modal-card::before {  /* barrido de bienvenida, one-shot */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, #ffffff10 47%, #ffffff1f 50%, #ffffff10 53%, transparent 60%);
  transform: translateX(-120%) skewX(-10deg);
}
.on > .wh-huntbar-card::before, .on > .wh-help-card::before, .on > .wh-modal-card::before {
  animation: wh-sweep-once .7s cubic-bezier(.6,.05,.3,1) .12s;
}
@keyframes wh-sweep-once { to { transform: translateX(120%) skewX(-10deg); } }
.wh-huntbar-card {
  width: min(640px, 92vw);
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
}
.wh-tagbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 4px; }
.wh-tagbar .glyph { color: var(--text-muted); flex: none; }
.wh-tagbar input {
  font: inherit; font-size: 14px; color: var(--text); background: none; border: 0;
  flex: 1; min-width: 120px; outline: none; padding: 6px 4px;
}
.wh-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  border-radius: 99px; padding: 2px 10px; font-size: 12px;
  animation: wh-chip-in .15s var(--ease-snap);
}
@keyframes wh-chip-in { from { transform: scale(.7); opacity: 0; } }
.wh-chip b { cursor: pointer; font-weight: 400; opacity: .7; }
.wh-chip b:hover { opacity: 1; }
.wh-huntbar-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--border);
}

/* ── menú (⋯ / avatar) ───────────────────────────────────────────── */
.wh-menu {
  position: fixed; top: 56px; right: 24px; z-index: 30;
  display: none; flex-direction: column; gap: 2px;
  min-width: 230px; padding: 6px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop);
}
.wh-menu.on { display: flex; animation: wh-pop var(--dur-base) var(--ease-snap); }
@keyframes wh-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.wh-menu-item {
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  color: var(--text); background: none; border: 0; text-decoration: none;
  border-radius: 8px; padding: 8px 10px;
  transition: background var(--dur-fast);
}
.wh-menu-item:hover { background: var(--surface-2); }
.wh-menu-item .n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.wh-menu-item.accent { color: var(--accent); }
.wh-menu-sep { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }
#menu-session:empty + .wh-menu-sep { display: none; }
.wh-menu-user { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--text-muted); }
.wh-menu-user img { width: 22px; height: 22px; border-radius: 50%; display: block; }
.wh-menu-user b { color: var(--text); font-weight: 500; }
#menu-face { display: flex; }
#menu-face img { width: 20px; height: 20px; border-radius: 50%; display: block; }

/* ── panel de hunts: mission control de lo que corre ahora ───────── */
.wh-btn .n { font-family: var(--font-mono); font-size: 10.5px; color: var(--warning); }
.wh-btn .n:empty { display: none; }
#huntpanel {
  position: fixed; top: 56px; right: 24px; z-index: 30;
  display: none; flex-direction: column;
  width: 360px; max-height: 460px; overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 8px;
}
#huntpanel.on { display: flex; animation: wh-pop var(--dur-base) var(--ease-snap); }
.h-sect { color: var(--text-muted); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 10px 2px; }
.h-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.h-row:hover { background: var(--surface-2); }
.h-top { display: flex; align-items: baseline; gap: 8px; }
.h-q { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-who { color: var(--text-muted); white-space: nowrap; }
.h-st { margin-left: auto; font-size: 11px; white-space: nowrap; }
.h-st.running { color: var(--warning); }
.h-st.queued { color: var(--text-muted); }
.h-st.done { color: var(--success); }
.h-st.error { color: var(--danger); }
.h-prog { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.h-prog b { color: var(--success); font-weight: 600; }

/* pill flotante: imágenes nuevas esperando arriba del grid */
#pending {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 30; display: none;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--accent);
  border: 0; border-radius: 999px; padding: 8px 16px;
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-fast) var(--ease-snap);
}
#pending:active { transform: translateX(-50%) scale(.95); }
#pending.on { display: block; animation: wh-fade var(--dur-base) ease; }

/* ── helper de atajos (?) ────────────────────────────────────────── */
.wh-help-btn {
  font: inherit; font-size: 11.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); background: none; border: 0; padding: 2px 4px;
}
.wh-help-btn:hover { color: var(--text); }
.wh-help-card { width: min(520px, 92vw); padding: 22px 24px; }
.wh-help-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.wh-help-title span { color: var(--accent); font-weight: 400; }
.wh-help-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px 18px; font-size: 12.5px; color: var(--text-muted);
}
.wh-help-grid kbd { margin-right: 7px; }

/* ── grid: layout + densidad ─────────────────────────────────────── */
main {
  padding: 26px 28px 10px;
  display: flex; gap: 16px; align-items: flex-start;
}
.gcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
body.grid-single main { padding: 18px 12px 0; }
body.grid-single .gcol { gap: 26px; }

/* ══ catalog, lightbox and mobile experiences ═════════════════════════════ */
select {
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--surface-2);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; outline: none;
}
.wh-spacer { flex: 1; }
.wh-actions { display: flex; gap: 10px; align-items: center; }

.wh-card {
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s, opacity .25s;
  outline: 2px solid transparent; outline-offset: 2px;
}
.wh-card.enter {
  animation: wh-card-enter .5s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes wh-card-enter {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
}
.wh-card.fresh {
  outline-color: var(--warning);
  animation: wh-card-enter .5s cubic-bezier(.2,.8,.25,1) backwards;
}
#sentinel {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 20px 0 64px; color: var(--text-muted); font-size: 12px;
}
.s-pulse { color: var(--warning); animation: wh-breathe 1.1s ease-in-out infinite; }
.s-end { text-align: center; line-height: 1.7; }
.s-end-top { color: var(--text); font-size: 12.5px; }
.s-end-sub { color: var(--text-muted); font-size: 11.5px; }
.s-end-sub b { color: var(--ratio-wqxga); }
.s-end-sub kbd { background: var(--surface-2); color: var(--text); padding: 0 5px; border-radius: 4px; }
.wh-card.seen { opacity: .82; }
.wh-card.seen::after {
  content: "Visto"; position: absolute; bottom: 8px; left: 8px; z-index: 2;
  font-size: 9.5px; color: var(--text-muted); background: #0e0e11b3;
  padding: 1px 7px; border-radius: 99px; backdrop-filter: blur(4px);
}
.wh-card.sel.seen { opacity: 1; }
@keyframes wh-breathe { 50% { opacity: .25; transform: scale(.85); } }
.wh-card { box-shadow: 0 0 0 1px #ffffff0a; }
.wh-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #ffffff14, 0 10px 32px #0009; }
.wh-card::before {  /* barrido de luz al hover — mismo lenguaje que el deck mobile */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, #ffffff0d 47%, #ffffff22 50%, #ffffff0d 53%, transparent 60%);
  transform: translateX(-120%); opacity: 0;
}
.wh-card:hover::before { animation: wh-card-shine .9s cubic-bezier(.4, 0, .2, 1); }
@keyframes wh-card-shine { 10% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
.wh-card.sel { outline-color: var(--accent); }
.wh-card.leaving { opacity: 0; transform: scale(.94); pointer-events: none; }
.wh-card img { display: block; width: 100%; height: auto; }

/* ratio strip: which monitors this image can serve */
.wh-ratio-strip { display: flex; height: 4px; }
.wh-ratio-strip i { flex: 1; }
.wh-ratio-strip .ultrawide { background: var(--ratio-uw); }
.wh-ratio-strip .wqxga     { background: var(--ratio-wqxga); }
.wh-ratio-strip .fhd       { background: var(--ratio-fhd); }

/* bottom strip: tags siempre visibles; el meta completo aparece al hover */
.wh-card-foot {
  position: absolute; inset: auto 0 4px 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
  padding: 24px 10px 8px;
  pointer-events: none;
}
.wh-card-foot.hastags, .wh-card:hover .wh-card-foot, .wh-card.sel .wh-card-foot {
  background: linear-gradient(transparent, #0e0e11e0);
}
.wh-card-meta {
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s;
  font-size: 11.5px; color: var(--text-muted);
}
.wh-card:hover .wh-card-meta, .wh-card.sel .wh-card-meta { opacity: 1; transform: none; }
.wh-card-meta .wh-resolution { color: var(--text); }
.wh-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.wh-tag {
  padding: 1.5px 9px; border-radius: 99px; font-size: 10.5px;
  background: #16161ac4; color: var(--text-muted);
  backdrop-filter: blur(6px); cursor: pointer;
}
.wh-tag:hover { color: var(--text); background: var(--surface-2); }
.wh-tag.hit { background: #6d5ae63d; color: var(--accent); font-weight: 600; }
.wh-tag.more { opacity: .65; cursor: default; }
.wh-data-chip {
  padding: 1px 7px; border-radius: 99px; font-size: 11px;
  background: var(--surface-2);
}
.wh-data-chip.aes { color: var(--warning); }
.wh-data-chip.dark { color: var(--ratio-wqxga); }
.wh-rating-stars { color: var(--warning); letter-spacing: 1px; }
.wh-source {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 9px; border-radius: 99px; font-size: 10.5px;
  background: #0e0e11b3; color: var(--text-muted);
  backdrop-filter: blur(4px);
}
.wh-badge-kept {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 600;
}
.wh-badge-kept  { background: #3ecf8e33; color: var(--success); }
.wh-badge-fav   { background: #e5566d33; color: var(--danger); }
.wh-badge-var {
  position: absolute; top: 34px; right: 8px;
  padding: 2px 9px; border-radius: 99px; font-size: 10.5px;
  background: #6f9bea2b; color: #6f9bea; backdrop-filter: blur(4px);
}

/* ── barra de variantes (lightbox) ─────────────────── */
#varbar {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 22px; border-top: 1px solid var(--surface-2); font-size: 12px;
  color: var(--text-muted);
}
#varbar.on { display: flex; }
.wh-variant-chip {
  font: inherit; font-size: 11.5px; cursor: pointer;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--surface-2); border-radius: 99px; padding: 3px 12px;
  transition: border-color .15s, color .15s;
}
.wh-variant-chip:hover { border-color: #6f9bea77; }
.wh-variant-chip.on { color: #6f9bea; border-color: #6f9bea77; background: #6f9bea14; }
.wh-variant-chip.edit { color: var(--success); }
.wh-variant-chip.edit:hover { border-color: #3ecf8e77; }
.wh-variant-chip.edit.on { color: var(--success); border-color: #3ecf8e77; background: #3ecf8e14; }
.wh-variant-chip.dup { color: var(--text-muted); opacity: .75; }
.wh-variant-chip.dup.on { color: var(--text-muted); border-color: #8b8b9677; background: #8b8b9614; }
.wh-variant-keep {
  font: inherit; font-size: 11.5px; cursor: pointer; margin-left: auto;
  color: var(--success); background: none;
  border: 1px solid #3ecf8e44; border-radius: 99px; padding: 3px 12px;
  transition: background .15s;
}
.wh-variant-keep:hover { background: #3ecf8e1a; }
.wh-variant-compare {
  font: inherit; font-size: 11.5px; cursor: pointer;
  color: var(--warning); background: #e3b34112;
  border: 1px solid #e3b34144; border-radius: 99px; padding: 3px 12px;
}
.wh-variant-compare:hover { background: #e3b34122; }

/* ── presets + upscale (panel de ajustes) ──────────── */
.wh-editor-presets { display: flex; gap: 5px; flex-wrap: wrap; }
.wh-editor-presets button {
  font: inherit; font-size: 11px; cursor: pointer;
  color: var(--text-muted); background: var(--surface-2);
  border: 0; border-radius: 99px; padding: 3px 10px;
  transition: color .12s, background .12s;
}
.wh-editor-presets button:hover { color: var(--text); background: #6d5ae62e; }
#look-presets button.on { color: var(--accent); background: #6d5ae62e; }
.wh-editor-section {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 4px;
}
.wh-editor-presets button.up { color: var(--ratio-wqxga); background: #45b3a21a; }
.wh-editor-presets button.up:hover { background: #45b3a233; }
.wh-editor-presets button:disabled { opacity: .4; cursor: wait; }

/* ── menú de colecciones (lightbox) ────────────────── */
#collmenu {
  position: absolute; bottom: 62px; right: 16px; z-index: 5;
  display: none; flex-direction: column; gap: 2px;
  min-width: 210px; max-height: 320px; overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--surface-2); border-radius: 12px;
  box-shadow: 0 12px 40px #000a; padding: 6px;
}
#collmenu.on { display: flex; animation: wh-fade .15s ease; }
#collmenu button {
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  color: var(--text); background: none; border: 0;
  border-radius: 8px; padding: 7px 10px;
  display: flex; justify-content: space-between; gap: 10px;
}
#collmenu button:hover { background: var(--surface-2); }
#collmenu button .in { color: var(--success); }
#collmenu input {
  font: inherit; font-size: 12px; color: var(--text);
  background: var(--bg); border: 1px solid var(--surface-2);
  border-radius: 8px; padding: 6px 10px; outline: none; margin-top: 4px;
}
#collmenu input:focus { border-color: var(--accent); }

/* ── lightbox ────────────────────────────────────────── */
#box {
  position: fixed; inset: 0; z-index: 20;
  display: none; flex-direction: column;
  background: #08080af2; backdrop-filter: blur(8px);
}
#box.open { display: flex; animation: wh-fade .18s ease; }

#box .wh-lightbox-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 20px; }
/* max-height en viewport, no en %: la cadena de porcentajes se corta en .wh-compare
   (altura indefinida) y el flex estiraría la imagen rompiendo el aspect ratio */
#box img {
  max-width: 100%; max-height: calc(100dvh - 130px);
  border-radius: 6px; box-shadow: 0 20px 80px #000c;
}

/* ── comparador antes/después ──────────────────────── */
/* sin max-height propio: .wh-compare abraza exactamente a la imagen (que ya se capa
   sola con 100dvh), y así el overlay absoluto queda calcado sobre ella */
.wh-compare {
  position: relative; display: flex;
  align-items: center; justify-content: center;  /* nunca stretch: preserva aspect */
  max-width: 100%; min-width: 0;
}
.wh-compare img { display: block; flex: none; }
#box-img2, .wh-compare-bar, .wh-compare-label { display: none; }
.wh-compare.on #box-img2 {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.wh-compare.on .wh-compare-bar {
  display: block; position: absolute; top: 0; bottom: 0; width: 2px;
  background: #ffffffb0; z-index: 5; cursor: ew-resize; touch-action: none;
  box-shadow: 0 0 12px #0008;
}
.wh-compare.on .wh-compare-bar::before {  /* hit area generosa para arrastrar */
  content: ""; position: absolute; inset: 0 -14px;
}
.wh-compare-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid #ffffff30; border-radius: 99px;
  padding: 3px 9px; font-size: 11px; color: var(--text); white-space: nowrap;
  pointer-events: none;
}
.wh-compare.on .wh-compare-label {
  display: block; position: absolute; top: 10px; z-index: 4;
  font-size: 10.5px; letter-spacing: .5px; padding: 2px 10px; border-radius: 99px;
  background: #0e0e11b3; color: var(--text-muted); backdrop-filter: blur(4px);
  pointer-events: none;
}
.wh-compare-label.a { left: 10px; }
.wh-compare-label.b { right: 10px; }
.wh-compare .wh-particle {
  position: absolute; z-index: 6; pointer-events: none;
  color: var(--warning); text-shadow: 0 0 6px #e3b34188;
  animation: wh-particle-pop .9s ease-out forwards;
}
@keyframes wh-particle-pop {
  from { opacity: 1; transform: translate(0, 0) scale(.5) rotate(0deg); }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(var(--rot)); }
}
#adj-cmp.on { color: var(--warning); border-color: #e3b34155; }

/* ── crop → nuevo wallpaper ────────────────────────── */
#croplayer { position: absolute; inset: 0; display: none; overflow: hidden; z-index: 7; }
.wh-compare.cropping #croplayer { display: block; }
#crop-rect {
  position: absolute; border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 9999px #000000a8;   /* oscurece todo lo no seleccionado */
  cursor: move; touch-action: none;
}
#crop-rect .sz {
  position: absolute; top: -26px; left: -2px;
  font-size: 11px; white-space: nowrap;
  background: #0e0e11d0; color: var(--accent);
  padding: 1px 9px; border-radius: 99px;
}
.wh-crop-handle {
  position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); cursor: nwse-resize;
  box-shadow: 0 0 8px #0009;
}
#cropp {
  position: absolute; top: 16px; left: 16px; z-index: 8;
  display: none; flex-direction: column; gap: 10px;
  width: 240px; padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--surface-2); border-radius: 14px;
  box-shadow: 0 12px 40px #000a;
}
#cropp.on { display: flex; animation: wh-fade .15s ease; }
#cropp .wh-editor-presets button.on { color: var(--accent); background: #6d5ae62e; }
.wh-crop-custom { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.wh-crop-custom input {
  font: inherit; font-size: 12px; width: 62px; color: var(--text);
  background: var(--bg); border: 1px solid var(--surface-2);
  border-radius: 8px; padding: 4px 8px; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.wh-crop-custom input:focus { border-color: var(--accent); }
#crop-info { font-size: 11.5px; color: var(--text-muted); min-height: 17px; }
#crop-info b { color: var(--ratio-wqxga); }
#crop-info .bad { color: var(--danger); }
#box .wh-lightbox-info {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 22px; border-top: 1px solid var(--surface-2); font-size: 12px;
}
#box .wh-lightbox-info a { color: var(--ratio-wqxga); text-decoration: none; }
#box .wh-lightbox-info a:hover { text-decoration: underline; }
#box .wh-lightbox-title { color: var(--text-muted); max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── panel de ajustes (lightbox) ───────────────────── */
#adj {
  position: absolute; top: 16px; right: 16px;
  display: none; flex-direction: column; gap: 10px;
  width: 238px; padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--surface-2); border-radius: 14px;
  box-shadow: 0 12px 40px #000a;
}
#adj.on { display: flex; animation: wh-fade .15s ease; }
.wh-editor-row {
  display: grid; grid-template-columns: 72px 1fr 42px;
  align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text-muted);
}
.wh-editor-row b {
  text-align: right; color: var(--text); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.wh-editor-row input[type=range] { width: 100%; height: 14px; accent-color: var(--accent); cursor: pointer; }
#adj .wh-actions, #cropp .wh-actions { gap: 6px; margin-top: 2px; }
#adj .wh-actions .wh-btn, #cropp .wh-actions .wh-btn {
  flex: 1; justify-content: center; padding: 6px 4px; font-size: 11.5px;
}

/* ── status bar ──────────────────────────────────────── */
#crawler { color: var(--text-muted); white-space: nowrap; }
#crawler b { color: var(--ratio-wqxga); font-weight: 500; }
#crawler.working b { color: var(--warning); }
#crawler.live { color: var(--success); transition: color .2s; }
#crawler.working .pick { display: inline-block; animation: wh-breathe 1.1s ease-in-out infinite; }

#toast {
  position: fixed; left: 50%; bottom: 52px; z-index: 30;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--surface-2); color: var(--text);
  padding: 8px 18px; border-radius: 99px; font-size: 12px;
  transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── timeline de actividad ─────────────────────────── */
#activity-btn { display: inline-flex; align-items: center; gap: 7px; }
#activity-btn svg { display: block; }
#timeline {
  position: fixed; top: 58px; right: 18px; z-index: 25;
  display: none; flex-direction: column;
  width: 330px; max-height: 430px; overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--surface-2); border-radius: 14px;
  box-shadow: 0 12px 40px #000a;
  padding: 8px;
}
#timeline.on { display: flex; animation: wh-fade .15s ease; }
.wh-timeline-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: 8px; font-size: 12px;
}
.wh-timeline-row:hover { background: var(--surface-2); }
.wh-timeline-delta {
  font-weight: 700; min-width: 40px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.wh-timeline-delta.pos { color: var(--success); }
.wh-timeline-delta.neg { color: var(--danger); }
.wh-timeline-delta.zero { color: var(--text-muted); }
.wh-timeline-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-timeline-label small { color: var(--text-muted); }
.wh-timeline-time { margin-left: auto; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.wh-timeline-empty { color: var(--text-muted); text-align: center; padding: 18px 0; font-size: 12px; }

.wh-empty { color: var(--text-muted); padding: 60px 0; text-align: center; column-span: all; }

/* ── agente local: el comando con token, listo para copiar ── */
#ag-cmd {
  font-family: ui-monospace, "Cascadia Code", monospace; font-size: 12px;
  text-align: left; color: var(--text); background: var(--surface);
  border: 1px solid var(--surface-2); border-radius: 10px;
  padding: 12px 14px; margin: 12px 0 4px;
  white-space: pre-wrap; word-break: break-all; user-select: all;
}

/* ── mobile triage ───────────────────────────────────── */
#start, #triage { display: none; }
body.mobile { overflow: hidden; height: 100dvh; }
body.mobile header, body.mobile main, body.mobile footer, body.mobile #sentinel { display: none; }

/* fix scroll mobile: el body es overflow:hidden, así que #start scrollea él
   mismo. Nada de justify-content:center — con overflow, el contenido centrado
   desborda por ARRIBA del origen de scroll y queda inalcanzable (Safari/Chrome). */
#start.on {
  display: flex; flex-direction: column;
  height: 100dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
  gap: 10px;
}
#start .wordmark { font-size: 26px; margin-bottom: 4px; }
#start p { color: var(--text-muted); margin-bottom: 14px; }
#start .wh-section-label { margin: 14px 0 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
#m-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
#m-who img { width: 24px; height: 24px; border-radius: 50%; display: block; }
#m-who b { color: var(--text); font-weight: 600; }
#m-who .logout { margin-left: auto; font: inherit; font-size: 12px; color: var(--text-muted); background: none; border: 1px solid var(--surface-2); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
#m-who a.m-login {
  flex: 1; text-align: center; color: var(--accent); text-decoration: none;
  background: var(--surface); border: 1px solid var(--surface-2);
  border-radius: 14px; padding: 13px 16px;
}
.wh-category {
  display: flex; align-items: center; gap: 12px;
  font: inherit; font-size: 15px; text-align: left;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--surface-2); border-radius: 14px;
  padding: 16px 18px; cursor: pointer;
  transition: transform .12s, background .15s;
}
.wh-category:active { transform: scale(.97); background: var(--surface-2); }
.wh-category i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.wh-category small { margin-left: auto; color: var(--text-muted); }

#triage.on { display: flex; flex-direction: column; height: 100dvh; }
.wh-triage-top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  color: var(--text-muted); font-size: 12.5px;
}
.wh-triage-top button {
  font: inherit; font-size: 18px; color: var(--text);
  background: none; border: 0; padding: 4px 10px; cursor: pointer;
}
.wh-triage-progress { color: var(--accent); }
.wh-triage-resolution { margin-left: auto; }
.wh-triage-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-x; overflow: hidden;
}
.wh-triage-stage img {
  max-width: 100%; max-height: 100%; border-radius: 8px;
  will-change: transform; transition: transform .2s cubic-bezier(.2,.8,.25,1), opacity .2s;
}
.wh-triage-stage img.fly-l { transform: translateX(-120vw) rotate(-8deg); opacity: 0; }
.wh-triage-stage img.fly-r { transform: translateX(120vw) rotate(8deg); opacity: 0; }
.wh-triage-hint {
  position: absolute; top: 18px; font-size: 15px; font-weight: 700;
  padding: 4px 14px; border-radius: 99px; opacity: 0; transition: opacity .1s;
  pointer-events: none;
}
.wh-triage-hint.keep  { right: 18px; color: var(--success); background: #3ecf8e22; }
.wh-triage-hint.trash { left: 18px;  color: var(--danger);   background: #e5566d22; }
.wh-triage-done { text-align: center; color: var(--text-muted); font-size: 15px; line-height: 2; }
.wh-triage-done b { color: var(--text); font-size: 22px; display: block; }

.wh-triage-stars {
  display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px;
}
.wh-triage-stars button {
  font: inherit; font-size: 22px; width: 46px; height: 44px;
  background: none; border: 0; color: var(--surface-2); cursor: pointer;
  transition: color .12s, transform .12s;
}
.wh-triage-stars button.on { color: var(--warning); }
.wh-triage-stars button:active { transform: scale(1.25); }
.wh-triage-actions {
  display: flex; justify-content: center; align-items: center; gap: 22px;
  padding: 8px 16px; padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.wh-triage-action {
  font: inherit; cursor: pointer; border-radius: 50%;
  width: 66px; height: 66px; font-size: 26px;
  background: var(--surface); transition: transform .12s, background .15s;
}
.wh-triage-action:active { transform: scale(.92); }
.wh-triage-action.trash { color: var(--danger); border: 1.5px solid #e5566d55; }
.wh-triage-action.keep  { color: var(--success); border: 1.5px solid #3ecf8e55; }
.wh-triage-action.fav   { color: var(--danger); border: 1.5px solid #e5566d55;
               width: 54px; height: 54px; font-size: 21px; }
.wh-triage-action.skip  {
  width: auto; height: auto; border-radius: 99px; font-size: 13px;
  color: var(--text-muted); border: 1px solid var(--surface-2); padding: 8px 16px;
}

/* ── deck: cartas TCG con snap vertical, holo y auto-scroll ── */
#deck { display: none; }
#deck.on { display: flex; flex-direction: column; height: 100dvh; touch-action: manipulation; }
.wh-deck-top {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 12px 4px; padding-top: max(8px, env(safe-area-inset-top));
  color: var(--text-muted); font-size: 12.5px;
}
.wh-deck-top button { font: inherit; color: var(--text); background: none; border: 0; padding: 4px 6px; cursor: pointer; }
#d-back { font-size: 18px; }
#d-prog { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
#d-streak { color: var(--ratio-fhd); font-weight: 700; opacity: 0; transition: opacity .2s; }
#d-streak.on { opacity: 1; animation: wh-streak-pop .3s cubic-bezier(.2,.8,.25,1); }
@keyframes wh-streak-pop { 50% { transform: scale(1.5); } }
.wh-deck-control {
  font-size: 11.5px !important; color: var(--text-muted) !important;
  border: 1px solid var(--surface-2) !important; border-radius: 99px !important;
  padding: 4px 10px !important; background: var(--surface) !important;
}
.wh-deck-control.hot { color: var(--warning) !important; border-color: #e3b34155 !important; }
#d-play {
  position: relative; width: 34px; height: 34px; flex: none;
  border-radius: 50% !important; padding: 0 !important; font-size: 12px !important;
}
#d-play.playing { color: var(--accent) !important; }
#d-play.playing::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent);
  animation: spin var(--spd, 2s) linear infinite;
}
#d-tags { display: flex; gap: 7px; overflow-x: auto; flex: none; padding: 4px 14px 10px; scrollbar-width: none; }
#d-tags::-webkit-scrollbar { display: none; }
.wh-deck-tag {
  font: inherit; font-size: 12px; flex: none; cursor: pointer;
  color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--surface-2); border-radius: 99px; padding: 5px 13px;
  transition: color .12s, border-color .12s;
}
.wh-deck-tag.on { color: var(--accent); border-color: #6d5ae677; background: #6d5ae615; }
.wh-deck-tag.dice { color: var(--warning); border-color: #e3b34144; }
#d-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  transition: opacity .25s, transform .25s;
}
#d-scroll::-webkit-scrollbar { display: none; }
#d-scroll.deal { opacity: 0; transform: scale(.96); }
.wh-deck-card {
  height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 14px max(10px, env(safe-area-inset-bottom));
  perspective: 1100px;
}
.wh-deck-shell {
  position: relative; width: 100%; max-width: 440px; height: 100%; max-height: 700px;
  display: flex; flex-direction: column; gap: 8px;
  border-radius: 22px; padding: 10px 10px 12px;
  background: linear-gradient(165deg, #1c1c21, #101013 60%);
  box-shadow: 0 18px 60px #000b;
  transform: rotateY(var(--ry, 0deg)) translateX(var(--tx, 0px)) rotate(var(--rz, 0deg));
  transition: transform .25s cubic-bezier(.2,.8,.25,1), opacity .25s;
  will-change: transform;
}
.wh-deck-shell.drag { transition: opacity .25s; }
.wh-deck-shell.fly-l { transform: translateX(-120vw) rotate(-10deg); opacity: 0; }
.wh-deck-shell.fly-r { transform: translateX(120vw) rotate(10deg); opacity: 0; }
.wh-deck-shell::before {  /* borde de rareza (anillo con mask) */
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 2px;
  background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.wh-deck-shell.r-com  { --edge: linear-gradient(165deg, #3c3c46, #232328); }
.wh-deck-shell.r-rare { --edge: linear-gradient(165deg, var(--ratio-wqxga), #1e6f63); }
.wh-deck-shell.r-epic { --edge: linear-gradient(165deg, var(--accent), #443a8f); }
.wh-deck-shell.r-leg  { --edge: linear-gradient(115deg, #e3b341, #cf8e63, #6d5ae6, #45b3a2, #e3b341); }
.wh-deck-shell.r-leg::before { background-size: 180% 180%; }
.wh-deck-card-top { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; font-size: 13px; }
.wh-deck-name { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-deck-aesthetic { margin-left: auto; color: var(--warning); font-weight: 700; flex: none; }
.wh-deck-art { position: relative; flex: 1; min-height: 0; border-radius: 14px; overflow: hidden; background: #000; }
.wh-deck-art .bg {  /* relleno ambiente: la misma imagen, difusa (misma URL = un solo download) */
  position: absolute; inset: -20px;
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.5) brightness(.55);
}
/* el arte cubre el box y "roamea": tour lateral en landscape, ken burns al
   sujeto en portrait. Solo transform+opacity → compositor, 60fps reales. */
.wh-deck-art .main {
  position: absolute; top: 0; left: 0; z-index: 1;
  transform-origin: var(--fx, 50%) var(--fy, 50%);
  transform: translate3d(var(--tx0, 0px), var(--ty0, 0px), 0) scale(var(--s0, 1));
  will-change: transform;
}
.wh-deck-art .main.fit-c { width: 100%; height: 100%; object-fit: cover; }  /* pre-plan */
.wh-deck-art .main.fit-h { height: 100%; width: auto; max-width: none; }
.wh-deck-art .main.fit-w { width: 100%; height: auto; max-height: none; }
.wh-deck-card.live .wh-deck-art .main.roam {
  animation: wh-art-roam var(--roam, 16s) ease-in-out infinite alternate;
}
@keyframes wh-art-roam {
  from { transform: translate3d(var(--tx0, 0px), var(--ty0, 0px), 0) scale(var(--s0, 1)); }
  to   { transform: translate3d(var(--tx1, 0px), var(--ty1, 0px), 0) scale(var(--s1, 1)); }
}
.wh-deck-shine {  /* barrido specular tipo slider: pasa, respira, vuelve a pasar */
  position: absolute; inset: -20% -35%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, #ffffff12 46%, #ffffff2c 50%, #ffffff12 54%, transparent 60%);
  mix-blend-mode: screen; opacity: 0;
  transform: translateX(-70%) skewX(-8deg);
}
.wh-deck-card.live .wh-deck-shine { animation: wh-shine-sweep 5.5s cubic-bezier(.6,.05,.3,1) .6s infinite; }
@keyframes wh-shine-sweep {
  0%        { transform: translateX(-70%) skewX(-8deg); opacity: 0; }
  6%        { opacity: 1; }
  32%, 100% { transform: translateX(70%) skewX(-8deg); opacity: 0; }
}
.wh-deck-ping {  /* sonar que florece sobre el sujeto detectado al entrar la carta */
  position: absolute; z-index: 3; width: 120px; height: 120px; margin: -60px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffffff26, transparent 65%);
  border: 1.5px solid #ffffff2e;
  transform: scale(.2); opacity: 0;
  animation: wh-ping-bloom 1s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes wh-ping-bloom { 20% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
/* looks del mazo: preview CSS de los mismos presets del editor */
#deck.look-oled  .wh-deck-art .main { filter: brightness(.88) contrast(1.14) saturate(1.06); }
#deck.look-vivid .wh-deck-art .main { filter: brightness(1.03) contrast(1.1) saturate(1.35); }
#deck.look-anime .wh-deck-art .main { filter: contrast(1.06) saturate(1.14); }
.wh-holo {  /* foil que sigue al dedo (vars heredadas de .wh-deck-shell) */
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: color-dodge; opacity: .3;
  background:
    radial-gradient(70% 60% at var(--hx, 50%) var(--hy, 35%), #ffffff30, transparent 60%),
    linear-gradient(115deg, transparent 32%, #6d5ae62e 45%, #45b3a22e 50%, #e3b3412e 55%, transparent 68%);
  background-size: 100% 100%, 230% 230%;
  background-position: 0 0, var(--hp, 50%) 0;
}
.r-leg .wh-holo { opacity: .5; }
.wh-deck-hint {
  position: absolute; top: 14px; z-index: 3; font-size: 15px; font-weight: 700;
  padding: 4px 14px; border-radius: 99px; opacity: 0; transition: opacity .1s;
  pointer-events: none; backdrop-filter: blur(4px);
}
.wh-deck-hint.keep  { right: 12px; color: var(--success); background: #3ecf8e2b; }
.wh-deck-hint.trash { left: 12px; color: var(--danger); background: #e5566d2b; }
.wh-deck-favorite {
  position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 14px;
  color: var(--danger); background: #0e0e11b3; padding: 3px 10px; border-radius: 99px;
}
.wh-deck-heart {
  position: absolute; left: 50%; top: 45%; z-index: 4; pointer-events: none;
  font-size: 74px; color: var(--danger); text-shadow: 0 0 34px #e5566dcc;
  transform: translate(-50%, -50%) scale(0);
  animation: wh-heart-pop .75s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes wh-heart-pop {
  35%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}
.wh-particle {
  position: absolute; z-index: 4; pointer-events: none;
  color: var(--warning); text-shadow: 0 0 8px #e3b34188;
  animation: wh-particle-pop .9s ease-out forwards;
}
.wh-deck-type { display: flex; gap: 10px; align-items: center; padding: 0 4px; font-size: 11.5px; color: var(--text-muted); }
.wh-deck-type .wh-source-label { margin-left: auto; }
.wh-deck-shell.r-com  .wh-rarity { color: var(--text-muted); }
.wh-deck-shell.r-rare .wh-rarity { color: var(--ratio-wqxga); }
.wh-deck-shell.r-epic .wh-rarity { color: var(--accent); }
.wh-deck-shell.r-leg  .wh-rarity { color: var(--warning); }
.wh-deck-tags { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 4px; max-height: 48px; overflow: hidden; }
.wh-deck-tags .wh-tag { background: var(--surface-2); }
.wh-deck-actions { display: flex; justify-content: center; align-items: center; gap: 18px; padding-top: 2px; }
.wh-deck-actions .wh-triage-action { width: 54px; height: 54px; font-size: 21px; }
.wh-deck-actions .wh-triage-action.fav { width: 46px; height: 46px; font-size: 18px; }
.wh-deck-actions .wh-triage-action.skip { width: auto; height: auto; padding: 7px 14px; font-size: 12px; }
.wh-deck-done { text-align: center; color: var(--text-muted); font-size: 15px; line-height: 2; padding: 20px; }
.wh-deck-done b { color: var(--text); font-size: 22px; display: block; }
.wh-deck-done .wh-btn { margin: 12px 4px 0; padding: 10px 16px; }

/* ── intro: primer arranque en mobile, empujón de dopamina único ────────── */
.wh-deck-intro-burst { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
.wh-deck-intro-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, #ffffffcc, #ffffff40 32%, transparent 66%);
  mix-blend-mode: screen;
  animation: wh-intro-flash-pop .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes wh-intro-flash-pop {
  0%   { opacity: 0; transform: scale(.35); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── toggle de tema: view transition con reveal circular desde el click ── */
::view-transition-old(root), ::view-transition-new(root) {
  animation: none; mix-blend-mode: normal;
}

/* ── modales (welcome / onboarding / agente) ─────────────────────── */
.wh-modal-card { width: min(560px, 92vw); padding: 24px 26px; }
.wh-modal-card h1 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.wh-modal-card h1 span { color: var(--accent); }
.wh-modal-card > p { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; margin-bottom: 16px; }
.wh-modal-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.wh-ghost {
  font: inherit; font-size: 12.5px; cursor: pointer;
  background: none; border: 0; color: var(--text-muted); padding: 10px 12px;
}
.wh-ghost:hover { color: var(--text); }
.wh-btn--discord {
  font: inherit; font-weight: 500; font-size: 13px; cursor: pointer; text-decoration: none;
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #5865f2; color: #fff; border: 0; border-radius: 10px; padding: 11px 16px;
  position: relative; overflow: hidden;
  transition: filter var(--dur-fast), transform var(--dur-fast) var(--ease-snap);
}
.wh-btn--discord:hover { filter: brightness(1.08); }
.wh-btn--discord:active { transform: scale(.98); }
.wh-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.wh-pill {
  font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 99px; padding: 7px 16px;
  transition: color var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.wh-pill.on {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: scale(1.04);
}
.wh-input {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px;
  outline: none; width: 100%;
  transition: border-color var(--dur-fast);
}
.wh-input:focus { border-color: var(--accent); }
.wh-code {
  font-family: var(--font-mono); font-size: 12px; text-align: left;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin: 4px 0 16px; white-space: pre-wrap; word-break: break-all; user-select: all;
}

/* ── plumitas ✦ — partículas firma (comparador A/B y hero del welcome) ── */
.wh-star {
  position: absolute; z-index: 6; pointer-events: none;
  color: var(--warning); text-shadow: 0 0 6px #e3b34188;
  animation: star-pop .9s ease-out forwards;
}
@keyframes star-pop {
  from { opacity: 1; transform: translate(0, 0) scale(.5) rotate(0deg); }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(var(--rot)); }
}

/* ── hero A/B del welcome: la insignia, jugable en 5 segundos ────── */
.wh-hero {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 21 / 8; margin-bottom: 18px;
  background: var(--surface-2);
  touch-action: none; user-select: none; cursor: ew-resize;
}
.wh-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.wh-hero img.a { filter: saturate(.22) brightness(.72); }
.wh-hero img.b { clip-path: inset(0 0 0 55%); filter: contrast(1.08) saturate(1.16); }
.wh-hero .htag {
  position: absolute; top: 8px; z-index: 4; pointer-events: none;
  font-size: 10.5px; padding: 2px 10px; border-radius: 99px;
  background: #0e0e11b3; color: #c9c9d4; backdrop-filter: blur(4px);
}
.wh-hero .htag.a { left: 8px; }
.wh-hero .htag.b { right: 8px; }
.wh-hero .bar {
  position: absolute; top: 0; bottom: 0; left: 55%; width: 2px; z-index: 5;
  background: #ffffffc8; box-shadow: 0 0 14px #0009;
}
.wh-hero .bar i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-style: normal; font-size: 11px; white-space: nowrap;
  background: var(--surface); border: 1px solid #ffffff30; border-radius: 99px;
  padding: 3px 10px; color: var(--text);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ── fx del motto: anillo de cursor, holo del grid, fps, shimmer ─── */
.wh-ring {
  position: fixed; top: -13px; left: -13px; width: 26px; height: 26px; z-index: 90;
  border: 1.5px solid color-mix(in srgb, var(--accent) 75%, transparent);
  border-radius: 50%; pointer-events: none;
}
.wh-holo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: screen; border-radius: inherit;
  background: radial-gradient(60% 55% at var(--hx, 50%) var(--hy, 40%), #ffffff1f, transparent 65%);
}
.wh-fps { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.wh-fps.bad { color: var(--warning); }
.wh-skel {
  position: relative; overflow: hidden;
  background: var(--surface); border-radius: var(--radius);
}
.wh-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--text) 5%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: wh-skel-sweep 1.3s ease-in-out infinite;
}
@keyframes wh-skel-sweep { to { transform: translateX(100%); } }

.wh-vtag {
  font-family: var(--font-mono); font-size: 11px; text-decoration: none;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 99px; padding: 1px 9px;
}
.wh-vtag:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── reacciones: burbujas una-sola-vez sobre la imagen (social, 60fps) ── */
.wh-rx {
  position: absolute; z-index: 8; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text); white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border); border-radius: 99px; padding: 4px 13px;
  backdrop-filter: blur(6px);
  opacity: 0;
  animation: wh-rx-rise 3.2s var(--ease-snap) forwards;
  animation-delay: var(--d, 0s);
}
.wh-rx i { font-style: normal; }
.wh-rx small { color: var(--text-muted); font-size: 11px; }
@keyframes wh-rx-rise {
  0%   { opacity: 0; transform: translateY(22px) scale(.85); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(.96); }
}