* { box-sizing: border-box; margin: 0; padding: 0; }

  html { overflow: hidden; background: #1a1a1a; margin: 0; }
  body {
    background: #111; color: #fff; margin: 0;
    width: 100vw; height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); overflow: hidden;
    display: flex; flex-direction: column;
    font-family: system-ui, sans-serif;
  }

  /* ── HAND ── */
  .hand {
    height: 48px;
    background: transparent;
    position: absolute; left: 0; right: 0;
    overflow: visible; z-index: 10;
  }
  .hand.p1 { bottom: 30px; }
  .hand.p2 { top: 30px; transform: scaleY(-1); }

  /* ── PLAYER BAR ── */
  /* Sits between hand and board — acts as the boundary line */
  .player-bar {
    height: 48px; display: flex; align-items: center; gap: 12px;
    padding: 0 20px 0 max(16px, calc(50% - 390px));
    background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 12%, transparent) 0%, #161616 55%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: 'Nunito', sans-serif; flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative; z-index: 600;
    pointer-events: none;
  }
  .player-bar.p1 {
    border-bottom: none; border-top: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 12%, transparent) 0%, #161616 55%);
  }
  /* P2 bar is mirrored: content on the right */
  .player-bar.p2 {
    flex-direction: row-reverse;
    padding: 0 max(16px, calc(50% - 390px)) 0 20px;
    background: linear-gradient(270deg, color-mix(in srgb, var(--pc) 12%, transparent) 0%, #161616 55%);
  }
  .player-bar.p2 .bar-reset { margin-left: 0; margin-right: auto; }
  /* Bar children restore pointer events so UI elements remain interactive */
  .player-bar > * { pointer-events: auto; }

  /* ── Active turn state ── */
  .player-bar.active-turn {
    background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 32%, transparent) 0%, color-mix(in srgb, var(--pc) 5%, #161616) 60%) !important;
    border-color: color-mix(in srgb, var(--pc) 40%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 22%, transparent);
  }
  .player-bar.p2.active-turn {
    background: linear-gradient(270deg, color-mix(in srgb, var(--pc) 32%, transparent) 0%, color-mix(in srgb, var(--pc) 5%, #161616) 60%) !important;
  }
  /* Atenuar el turno inactivo SIN tocar las herramientas de la barra (registro/opciones y sus menús):
     el opacity/filter va en los hijos directos excepto #bar-tools-p1 (un opacity en el padre no se
     puede deshacer desde un hijo). */
  .player-bar.inactive-turn > *:not(#bar-tools-p1) {
    opacity: 0.45;
    filter: saturate(0.3);
  }
  .player-bar.inactive-turn .player-dot {
    box-shadow: none;
  }

  /* Turn badge */
  .turn-badge {
    font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--pc); color: #000;
    padding: 2px 7px; border-radius: 20px;
    opacity: 0; transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; flex-shrink: 0;
  }
  .active-turn .turn-badge {
    opacity: 1; transform: scale(1);
  }

  .player-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--pc); box-shadow: 0 0 8px var(--pc); flex-shrink: 0;
    transition: box-shadow 0.3s;
  }
  .active-turn .player-dot {
    box-shadow: 0 0 14px 3px var(--pc);
  }
  .player-name {
    font-size: 16px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pc);
    cursor: text;
  }
  .player-name-input {
    font-size: 16px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--pc); background: transparent;
    border: none; border-bottom: 2px solid var(--pc);
    outline: none; font-family: 'Nunito', sans-serif;
    width: 120px; padding: 0;
  }
  .score-label { font-size: 13px; opacity: 0.4; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 2px; }
  .bar-identity { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  /* Ban global del jugador: prohibición en el ÁREA DEL TABLERO, cerca del nombre,
     cuando NO puede jugar cierto tipo de carta o hacer cierta acción. Detrás de las
     cartas (z-index bajo) y sin capturar el puntero → no tapa ni bloquea nada. */
  .player-ban {
    position: absolute; z-index: 3; pointer-events: none; display: none;
    width: 26px; height: 26px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    align-items: center; justify-content: center;
    animation: ban-pop 0.2s cubic-bezier(0.22,1,0.36,1);
  }
  .player-ban img { width: 92%; height: 92%; display: block; }
  /* left/top los fija el JS = posición ESPEJO de la zona de energías de ese jugador */
  @keyframes ban-pop { from { opacity: 0; transform: scale(0.4); } }
  .sdot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer; transition: all 0.18s; flex-shrink: 0;
  }
  .sdot.on { background: var(--pc); border-color: var(--pc); box-shadow: 0 0 9px var(--pc); }
  /* Modo Normal: el marcador lo lleva el motor (KOs) → los puntos no son clicables */
  html.pb-mode-normal .sdot { cursor: default; }
  .bar-reset {
    margin-left: auto; font-size: 13px; font-family: 'Nunito', sans-serif;
    opacity: 0.3; cursor: pointer; padding: 3px 12px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 20px;
    background: none; color: white; transition: opacity 0.2s;
  }
  .bar-reset:hover { opacity: 0.8; }

  /* ── Trainer use animation ── */
  .trainer-wrap {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    width: 80px; height: 112px;
    will-change: transform, opacity;
    overflow: visible;
  }
  .trainer-flipper {
    width: 100%; height: 100%;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
    will-change: transform;
  }
  /* ── Bar layout: identity left/right edge, actions toward board centre ── */
  .player-bar { gap: 10px; }
  .bar-spacer  { flex: 0 0 clamp(50px, 8vw, 130px); }  /* moderate gap ≈ bench zone, not full stretch */

  /* identity group (dot+name+badges+score) stays near screen edge */
  /* actions group (draw, overflow) stays near board centre */
  .bar-actions  { display: flex; align-items: center; gap: 8px;  flex-shrink: 0; }
  .bar-draw-btn {
    font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    font-family: 'Nunito', sans-serif; cursor: pointer;
    padding: 4px 10px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
    transition: all 0.15s; flex-shrink: 0;
  }
  .bar-reset-btn {
    border-color: rgba(100,180,255,0.2);
    color: rgba(100,180,255,0.55);
  }

  /* ── Bar overflow menu ── */
  .bar-overflow {
    position: relative;
    display: flex; align-items: center;
    margin-left: 4px;
    flex-shrink: 0;
  }
  .bar-overflow-left {
    margin-left: 0; margin-right: 4px;
    flex-direction: row-reverse;
  }
  .bar-overflow-trigger {
    width: 28px; height: 28px;
    background: none; border: none;
    color: #888;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
    flex-shrink: 0;
  }
  .bar-overflow-trigger svg { width: 16px; height: 16px; }
  .bar-overflow-trigger:hover { color: #ccc; background: rgba(255,255,255,0.06); }
  .bar-overflow-trigger[aria-expanded="true"] {
    color: #eee;
    transform: rotate(-90deg);
  }
  .bar-overflow-left .bar-overflow-trigger[aria-expanded="true"] {
    transform: rotate(90deg);
  }

  .bar-overflow-panel {
    position: absolute;
    top: 50%; transform: translateY(-50%) translateX(0px);
    left: calc(100% + 4px);
    display: flex; flex-direction: row; align-items: center; gap: 2px;
    overflow: hidden;
    width: 0;
    pointer-events: none;
    /* open: cubic-bezier(0.16, 1, 0.3, 1) 400ms */
    transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
    white-space: nowrap;
  }
  .bar-overflow-panel-left {
    left: auto; right: 100%;
    flex-direction: row-reverse;
  }
  .bar-overflow-panel.open {
    width: 200px;
    pointer-events: auto;
    /* close: cubic-bezier(0.7, 0, 0.84, 0) 300ms — applied via JS class swap */
  }
  .bar-overflow-panel.closing {
    width: 0 !important;
    transition: width 0.3s cubic-bezier(0.7,0,0.84,0) !important;
    pointer-events: none;
  }

  .bar-overflow-item {
    height: 28px; padding: 0 12px;
    background: transparent; border: none;
    color: #e0e0e0; font-size: 10px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; border-radius: 6px;
    white-space: nowrap; flex-shrink: 0;
    /* stagger: start hidden, slide from right */
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16,1,0.3,1),
                background 0.12s ease;
  }
  .bar-overflow-panel-left .bar-overflow-item {
    transform: translateX(-12px);
  }
  .bar-overflow-item:hover { background: rgba(255,255,255,0.08); }
  .bar-overflow-item:disabled { opacity: 0 !important; cursor: default; pointer-events: none; }
  .bar-overflow-item.visible {
    opacity: 1; transform: none;
  }
  .bar-overflow-panel-left .bar-overflow-item.visible { transform: none; }

  .bar-reset-btn:not(:disabled):hover {
    background: rgba(100,180,255,0.1);
    color: rgba(100,180,255,0.9);
    border-color: rgba(100,180,255,0.4);
  }
  .bar-draw-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22); }
  .bar-draw-btn:disabled { opacity: 0.25; cursor: default; }

  /* ── BOARD ── */
  .board {
    flex: 1; display: flex; flex-direction: column;
    /* Compactado (2026-06): manos siempre visibles → menos aire vertical */
    padding: 6px 8px; gap: 0; min-height: 0;
    /* Fieltro: color base + noise SVG inline + grain sutil */
    background-color: #3a3a3a;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
      radial-gradient(ellipse at 50% 50%, #1e4a2e 0%, #112a1a 100%);
    background-blend-mode: overlay, normal;
    position: relative;
  }
  /* Viñeta sobre el tablero */
  .board::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,
      transparent 40%,
      rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    z-index: 0;
  }
  /* Asegurar que todo el contenido del board quede sobre la viñeta */
  .player-zone, .zone-divider { position: relative; z-index: 1; }

  .player-zone {
    flex: 1; display: flex; justify-content: center; align-items: stretch;
    gap: 60px; padding: 6px 20px; min-height: 0;
  }

  /* ── DIVIDER central mejorado ── */
  .zone-divider {
    flex-shrink: 0; margin: 2px 40px;
    height: auto; min-height: 20px;
    display: flex; align-items: center;
    position: relative; z-index: 10;
    overflow: visible;
  }
  .zone-divider::before,
  .zone-divider::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,170,80,0.45), transparent);
  }
  .zone-divider-icon { display: none; }

  /* ── End turn button — absolute inside .board, positioned by JS ── */
  #btn-end-turn {
    position: absolute;
    z-index: 20;
    padding: 5px 14px; border-radius: 12px;
    border: 1px solid var(--et-color, rgba(255,255,255,0.22));
    background: rgba(14,14,24,0.92);
    color: var(--et-color, rgba(255,255,255,0.75));
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 0 8px var(--et-glow, transparent);
    transition: background 0.18s, border-color 0.18s, color 0.18s,
                box-shadow 0.18s, transform 0.12s;
  }
  #btn-end-turn:hover {
    background: var(--et-bg-hover, rgba(255,255,255,0.08));
    transform: scale(1.05);
  }
  #btn-end-turn.active-player {
    animation: etPulse 2.2s ease-in-out infinite;
  }
  @keyframes etPulse {
    0%, 100% { box-shadow: 0 0 10px var(--et-glow, transparent); }
    50%       { box-shadow: 0 0 22px var(--et-glow, transparent),
                            0 0  8px var(--et-glow, transparent); }
  }

  /* ── Start / New game button (inherits bar-draw-btn, extra states) ── */
  /* ── Deck hover menu ── */
  .deck-hover-menu {
    position: absolute; z-index: 50;
    display: flex; flex-direction: column; gap: 4px;
    pointer-events: none;
    top: 50%; transform: translateY(-50%);
  }
  /* P1 deck: slide out to the RIGHT */
  .deck-hover-menu.side-right {
    left: calc(100% + 6px);
  }
  /* P2 deck: slide out to the LEFT */
  .deck-hover-menu.side-left {
    right: calc(100% + 6px);
  }
  .deck-hover-btn {
    /* Same style as bar-draw-btn */
    font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    font-family: 'Nunito', sans-serif; cursor: pointer;
    padding: 4px 10px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: all 0.15s;
    /* Slide from deck side */
  }
  .deck-hover-menu.side-right .deck-hover-btn { transform: translateX(-10px); }
  .deck-hover-menu.side-left  .deck-hover-btn { transform: translateX(10px); }

  .deck-hover-menu.visible { pointer-events: auto; }
  .deck-hover-menu.visible .deck-hover-btn {
    opacity: 1; transform: translateX(0); pointer-events: auto;
  }
  .deck-hover-menu.visible .deck-hover-btn:nth-child(1) { transition-delay: 0ms; }
  .deck-hover-menu.visible .deck-hover-btn:nth-child(2) { transition-delay: 35ms; }
  .deck-hover-menu.visible .deck-hover-btn:nth-child(3) { transition-delay: 70ms; }
  .deck-hover-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22); }
  #btn-end-turn.pre-game {
    --et-color:    #4cff88;
    --et-glow:     rgba(76,255,136,0.55);
    --et-bg-hover: rgba(76,255,136,0.12);
    animation: etPulse 2s ease-in-out infinite;
  }
    color: rgba(255,180,180,0.7);
    border-color: rgba(255,100,100,0.3);
  }
  #btn-start-game.started:hover {
    background: rgba(255,80,80,0.12);
    border-color: rgba(255,100,100,0.5);
    color: rgba(255,160,160,0.95);
  }

  /* ── Coin flip overlay ── */
  #coin-overlay {
    position: fixed; left: 0; right: 0; bottom: 0; top: 48px; z-index: 8000;
    background: rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 28px;
    font-family: 'Nunito', sans-serif;
    animation: coinFadeIn 0.3s ease;
  }
  @keyframes coinFadeIn { from { opacity:0; } to { opacity:1; } }

  #coins-row {
    display: flex; align-items: center; justify-content: center;
    gap: 40px;
  }

  .coin-choice {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* Both coins forced to exactly the same rendered size */
  .coin-img {
    width: 120px; height: 120px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 6px 28px rgba(0,0,0,0.55);
    display: block; flex-shrink: 0;
  }

  /* Selector ring — lives inside each coin-choice */
  .coin-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.9);
    box-shadow: 0 0 18px rgba(255,255,255,0.45), inset 0 0 10px rgba(255,255,255,0.08);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
    z-index: 2;
  }
  .coin-choice.active .coin-ring { opacity: 1; }

  /* Losing coin: fade + shrink, pure transform, no layout change */
  .coin-choice {
    transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.4,0,0.6,1);
  }
  .coin-choice.losing {
    opacity: 0;
    transform: scale(0.52);
    pointer-events: none;
  }
  .coin-choice.losing .coin-ring { opacity: 0; }
  .coin-choice.winning {
    transform: scale(1.08);
    transition: transform 0.38s cubic-bezier(0.34,1.15,0.64,1);
  }
  .coin-choice.winning .coin-ring {
    opacity: 1;
    border-color: var(--win-color, rgba(255,255,255,0.9));
    box-shadow: 0 0 24px var(--win-color, rgba(255,255,255,0.5)),
                inset 0 0 12px rgba(255,255,255,0.1);
  }

  /* Result text */
  #coin-result {
    text-align: center;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    line-height: 1.35;
  }
  #coin-result.show { opacity: 1; transform: translateY(0); }
  #coin-result .cr-badge {
    display: inline-block;
    font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.38);
    margin-bottom: 5px;
  }
  #coin-result .cr-name {
    display: block; font-size: 24px; font-weight: 900;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  }

  /* ── Deck picker ── */
  #deck-picker-modal {
    position: fixed; inset: 0; z-index: 8500;
    background: rgba(0,0,0,0.72);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Nunito', sans-serif;
    animation: coinFadeIn 0.2s ease;
  }
  .dpm-box {
    background: #0f0f1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; padding: 26px 26px 22px;
    width: 440px; max-width: 92vw;
    display: flex; flex-direction: column; gap: 20px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.85);
  }
  .dpm-header { display: flex; align-items: center; justify-content: space-between; }
  .dpm-title { font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.45); }
  .dpm-close { background: none; border: none; color: rgba(255,255,255,0.22);
    cursor: pointer; font-size: 18px; line-height: 1; padding: 0; transition: color 0.15s; }
  .dpm-close:hover { color: rgba(255,255,255,0.65); }
  .dpm-player { display: flex; flex-direction: column; gap: 9px; }
  .dpm-player-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; }
  .dpm-deck-row { display: flex; gap: 7px; flex-wrap: wrap; }
  .dpm-chip {
    padding: 6px 14px; border-radius: 20px; cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45);
    font-size: 11px; font-weight: 700; transition: all 0.15s;
    max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dpm-chip:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.07); }
  .dpm-chip.sel { background: rgba(255,255,255,0.121); border-color: rgba(255,255,255,0.25); color: #fff; }
  .dpm-chip.rnd { border-color: rgba(80,200,120,0.2); color: rgba(100,220,140,0.55); }
  .dpm-chip.rnd:hover { background: rgba(60,180,100,0.1); color: rgba(120,240,160,0.85); border-color: rgba(80,200,120,0.38); }
  .dpm-chip.rnd.sel { background: rgba(60,180,100,0.18); border-color: rgba(80,220,120,0.5); color: #7ef7a4; }
  .dpm-divider { height: 1px; background: rgba(255,255,255,0.07); }
  .dpm-footer { display: flex; justify-content: flex-end; gap: 9px; }
  .dpm-btn { padding: 9px 20px; border-radius: 10px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1); background: none;
    color: rgba(255,255,255,0.38); transition: all 0.15s; }
  .dpm-btn:hover { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.2); }
  .dpm-btn-ok { background: rgba(255,255,255,0.088); color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.16); }
  .dpm-btn-ok:hover { background: rgba(255,255,255,0.165); color: #fff; border-color: rgba(255,255,255,0.55); }

  .center-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  /* Compactado (2026-06): los Pokémon de ambos jugadores se arriman al divisor
     central → el aire sobrante queda en los bordes, donde despliegan las manos */
  #zone-p2 .center-zone { justify-content: flex-end; }
  #zone-p1 .center-zone { justify-content: flex-start; }
  .bench-zone  { display: flex; gap: 16px; margin: auto 0; }
  .side-zone   { display: flex; flex-direction: column; gap: 16px; position: relative; }
  /* P1: Estadio aligns with Active (top of center-zone) */
  #zone-p1 .side-zone:first-child { justify-content: flex-start; padding-top: 0; }
  /* P2: Estadio aligns with Active (bottom of center-zone) — bench(151px)+gap(16px)=167px push */
  #zone-p2 .side-zone:last-child  { justify-content: flex-end; padding-bottom: 0; }

  /* ── SLOT ── */
  .slot {
    width: 98px; height: 137px;
    border: 1.5px dashed rgba(255,255,255,0.25); border-radius: 8px;
    position: relative; display: flex; justify-content: center; align-items: center;
    color: rgba(255,255,255,0.25); font-size: 10px; font-weight: bold;
    background: rgba(0,0,0,0.2);
    cursor: pointer; transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; flex-shrink: 0;
  }
  .slot:hover { border-color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.3); }
  .slot.pokemon-slot:has(.card) > span { display: none; }

  /* Drag-over pulse on valid drop targets */
  @keyframes slotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.55); }
    60%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); border-color: rgba(255,255,255,0.55); }
  }
  .slot.drag-over {
    animation: slotPulse 0.8s ease-out infinite;
    background: rgba(255,255,255,0.07);
  }

  /* Card entry pop when placed in a slot — Pocket-style snap */
  @keyframes cardEntry {
    0%   { transform: scale(0.5) translateY(12px); opacity: 0; filter: brightness(1.8); }
    50%  { transform: scale(1.06) translateY(-2px); opacity: 1; filter: brightness(1.15); }
    75%  { transform: scale(0.97) translateY(0); opacity: 1; filter: brightness(1.0); }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1.0); }
  }
  .card.entering { animation: cardEntry 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }
  /* Slot glow ring on card placement */
  @keyframes slotReceive {
    0%   { box-shadow: inset 0 0 0 2px rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); }
    30%  { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 0 18px 4px rgba(255,255,255,0.12); }
    100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); }
  }
  .slot.receiving { animation: slotReceive 0.4s ease-out; }

  /* ── CARD ── */
  .card {
    width: 98px; height: 137px; border-radius: 7px; cursor: grab;
    background-size: cover; background-position: center; position: absolute;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); z-index: 1;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
  }
  .card.spotlight {
    box-shadow: 0 0 0 3px #f0d060, 0 0 22px 8px rgba(240,208,0,0.5) !important;
  }
  /* Glare overlay — moves with cursor inside card */
  .card-glare {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 2;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 65%);
    transition: background 0.1s;
    mix-blend-mode: overlay;
  }
  /* Slot needs perspective for 3D children */
  .slot { perspective: 500px; }

  /* Score dot pop */
  @keyframes scorePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.6); }
    70%  { transform: scale(0.85); }
    100% { transform: scale(1); }
  }
  .sdot.pop { animation: scorePop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
  /* ── KO ceremony: board-center dot scoreboard ── */
  .ko-board-anim {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 800;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    pointer-events: none;
    opacity: 0;
  }
  /* P1 scores → enters from right */
  .ko-board-anim.enter-from-right {
    animation: koEnterRight 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  /* P2 scores → enters from left */
  .ko-board-anim.enter-from-left {
    animation: koEnterLeft 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  @keyframes koEnterRight {
    from { opacity: 0; transform: translate(calc(-50% + 120px), -50%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
  @keyframes koEnterLeft {
    from { opacity: 0; transform: translate(calc(-50% - 120px), -50%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
  /* P1 scores → exits left */
  .ko-board-anim.exit-left {
    animation: koExitLeft 0.35s ease-in forwards;
  }
  /* P2 scores → exits right */
  .ko-board-anim.exit-right {
    animation: koExitRight 0.35s ease-in forwards;
  }
  @keyframes koExitLeft {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to   { opacity: 0; transform: translate(calc(-50% - 120px), -50%); }
  }
  @keyframes koExitRight {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to   { opacity: 0; transform: translate(calc(-50% + 120px), -50%); }
  }

  /* The 3 large dots container */
  .ko-dots-row {
    display: flex; gap: 14px; align-items: center;
  }
  /* Each large dot */
  .ko-big-dot {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    position: relative;
    transition: none;
  }
  /* Already scored before this KO — shown dim */
  .ko-big-dot.prior {
    background: var(--pc);
    border-color: var(--pc);
    opacity: 0.25;
  }
  /* Newly scored — lights up with animation */
  .ko-big-dot.lighting {
    border-color: var(--pc);
    background: var(--pc);
    opacity: 1;
    animation: koBigDotPop var(--pop-dur, 0.4s) var(--pop-delay, 0s) cubic-bezier(0.34,1.56,0.64,1) both;
    box-shadow: 0 0 16px var(--pc), 0 0 32px color-mix(in srgb, var(--pc) 40%, transparent);
  }
  @keyframes koBigDotPop {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.25); opacity: 1; }
    75%  { transform: scale(0.92); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  /* Ring that expands out from each newly lit dot */
  .ko-big-dot .ko-ring {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2.5px solid var(--pc);
    opacity: 0;
    animation: koBigRing 0.5s var(--pop-delay, 0s) ease-out forwards;
  }
  @keyframes koBigRing {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.4); opacity: 0; }
  }
  /* Tiny KO label beneath dots */
  .ko-mini-label {
    font-family: 'Nunito', sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    animation: koLabelFade 0.3s 0.05s ease both;
  }
  @keyframes koLabelFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Victory variant: bigger dots, glow, sparkles ── */
  .ko-board-anim.victory .ko-big-dot {
    width: 44px; height: 44px;
  }
  .ko-board-anim.victory .ko-big-dot.prior {
    opacity: 0.5;
    box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 30%, transparent);
  }
  .ko-board-anim.victory .ko-big-dot.lighting {
    box-shadow: 0 0 24px var(--pc), 0 0 48px color-mix(in srgb, var(--pc) 50%, transparent);
  }
  .ko-board-anim.victory .ko-big-dot .ko-ring {
    border-width: 3px;
  }
  .ko-board-anim.victory .ko-mini-label {
    font-size: 13px; color: rgba(255,255,255,0.65);
    letter-spacing: 0.25em;
  }
  /* Victory sparkle particles */
  .ko-sparkle {
    position: absolute; border-radius: 50%; pointer-events: none; opacity: 0;
    animation: koSparkle var(--dur) var(--delay) ease-out forwards;
  }
  @keyframes koSparkle {
    0%   { opacity: 0; transform: translate(0,0) scale(0); }
    20%  { opacity: 1; transform: translate(var(--dx1), var(--dy1)) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx2), var(--dy2)) scale(0.2); }
  }

  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

  /* ── HAND: fan layout — overlays player bar, cards behind bar UI ── */
  .hand {
    height: 40px; display: block;
    background: transparent;
    position: absolute; left: 0; right: 0;
    overflow: visible; z-index: 10;
  }
  /* Pegadas a los bordes: el hueco del arco del abanico queda tras la barra */
  .hand.p1 { bottom: 16px; }
  .hand.p2 { top: 16px; }
  .hand { overflow: visible !important; pointer-events: none; }
  .hand .card { pointer-events: auto; }
  /* Buffer invisible alrededor de cada carta para eliminar el stutter al moverse entre cartas */
  .hand .card::before {
    content: ''; position: absolute; inset: -12px;
  }
  .hand .card {
    width: 84px; height: 118px; border-radius: 6px;
    position: absolute;
    transition: transform 0.2s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.15s;
    cursor: grab;
    /* transform-origin set per card by JS */
  }
  /* Opponent's hand: visually flip cards so they appear right-side up to the viewer.
     Uses ::after overlay — zero impact on fan positions or transforms. */
  #hand-p2 .card {
    overflow: hidden;
  }
  #hand-p2 .card::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Imagen vía VARIABLE (no `inherit`: en Safari/iOS, inherit en pseudo-elementos resetea
       background-size a auto → arte gigante). --cimg lo fija layoutFan con la imagen de la carta. */
    background-image: var(--cimg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: inherit;
    transform: scaleY(-1);
    pointer-events: none;
  }
  .card.dragging { opacity: 0.75; z-index: 100 !important; cursor: grabbing; }

  /* ── PC: manos por DELANTE del FONDO de su barra, pero puntos/herramientas por ENCIMA ──
     El tuck-tras-la-barra ocultaba el arte de la mano del rival. Se lleva la mano por
     delante del FONDO de la barra (z 701) para verla entera y derecha, anclada al borde;
     pero el contenido de la barra (puntos, nombre, herramientas) se sube por ENCIMA de la
     mano (z 720) para que un abanico ancho no tape los puntos. Para que la barra no atrape
     a sus hijos por debajo de la mano, la barra deja de tener z-index propio.
     Además: bancas un poco más cerca del activo (gap −33%) para que la mano no tape sus
     energías, y la mano entera al 95% (el abanico queda idéntico, se escala el div).
     SIN @media: aplica en TODOS los anchos → móvil = escritorio, sin adaptar. */
  #hand-p1, #hand-p2 { z-index: 701 !important; }
  .player-bar { z-index: auto; }
  .player-bar .bar-identity { position: relative; z-index: 720; }
  #bar-tools-p1 { z-index: 720; }
  /* mano entera al 95% (escala el DIV, el abanico interior queda igual).
     Origen CENTRO en ambas: simétrico → la del rival queda en ESPEJO exacto de la de J1
     (el volteo scaleY(-1) ya hace el reflejo; con origen centro no se descoloca/corta). */
  #hand-p1 { transform: scale(0.95); transform-origin: center; }
  #hand-p2 { transform: scaleY(-1) scale(0.95); transform-origin: center; }
  /* Bancas un 5% más hacia el centro (cada una desde su lado) y activos un 2%.
     Medido como % del medio-tablero (≈40vh): banca 2vh, activo 0.8vh. P1 (mitad de
     abajo) sube; P2 (mitad de arriba) baja. Translate → no descoloca el flex ni las manos. */
  #zone-p1 .bench-zone  { transform: translateY(-2vh); }
  #zone-p1 .active-slot { transform: translateY(-0.8vh); }
  #zone-p2 .bench-zone  { transform: translateY(2vh); }
  #zone-p2 .active-slot { transform: translateY(0.8vh); }

  /* Stadium glow — subtle pulsing light under the card */
  @keyframes stadiumGlow {
    0%   { box-shadow: 0 0 10px 4px rgba(255,220,80,0.08), 0 0 30px 10px rgba(255,200,50,0.04); }
    50%  { box-shadow: 0 0 18px 8px rgba(255,220,80,0.18), 0 0 50px 20px rgba(255,200,50,0.09); }
    100% { box-shadow: 0 0 10px 4px rgba(255,220,80,0.08), 0 0 30px 10px rgba(255,200,50,0.04); }
  }
  .slot.sb-target {
    border-color: rgba(255,255,255,0.33) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.099), inset 0 0 12px rgba(255,255,255,0.033);
    transition: border-color 0.2s, box-shadow 0.2s
  /* Slot pick mode: waiting for user to choose a slot */
  .slot.pick-target {
    border-color: rgba(77,171,255,0.7) !important;
    box-shadow: 0 0 0 2px rgba(77,171,255,0.25), inset 0 0 14px rgba(77,171,255,0.08);
    animation: pickPulse 1.2s ease-in-out infinite;
    cursor: crosshair !important;
  }
  @keyframes pickPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(77,171,255,0.25); }
    50%       { box-shadow: 0 0 0 6px rgba(77,171,255,0.0); }
  };
  }
  .slot[data-label*="Estadio"]:has(.card) {
    animation: stadiumGlow 3s ease-in-out infinite;
  }

  /* Cards placed in slots always fill the slot regardless of origin size */
  .slot .card { width: 98px; height: 137px; border-radius: 7px; margin-left: 0; }

  /* Centrado de la carta en su hueco: con box-sizing:border-box el borde de 1.5px
     del slot encoge el área interior, y la carta (anclada a left/top:0 por el JS en
     ~20 sitios) quedaba desplazada 1.5px abajo-derecha (se veía el borde arriba/izda
     y tapaba abajo/dcha). La subimos/izquierda 1.5px (= el borde) para que cubra el
     borde-box EXACTO. !important gana al estilo inline left/top que pone el JS.
     (margin:auto no servía: hay un `margin-left:0` que lo descentraba.) NO afecta a
     mazo/descartes (no son pokemon-slot ni Estadio → la carta del descarte intacta). */
  .slot.pokemon-slot > .card,
  .slot[data-label*="Estadio"] > .card { top: -1.5px !important; left: -1.5px !important; }

  /* Banca menor que el activo: que las cartas no se pisen entre filas */
  .bench-zone .slot, .bench-zone .slot .card { width: 86px; height: 121px; border-radius: 6px; }
  /* Hueco fijo activo-banca (en vez del auto simétrico): banca más cerca del activo */
  /* gap activo↔banca: el espacio real = 10 (gap del center-zone) + este margen.
     Reducido un 33% (50px → ~33px) para que la mano tape menos la banca/energías.
     Móvil lo sobreescribe en responsive.css. */
  #zone-p1 .bench-zone { margin-top: 23px; }
  #zone-p2 .bench-zone { margin-bottom: 23px; }

  /* Active pokemon slot — ~20% bigger than bench slots */
  .slot.active-slot { width: 118px; height: 165px; border-radius: 10px; }
  .slot.active-slot .card { width: 118px; height: 165px; border-radius: 9px; }

  /* ── OVERLAYS ── */
  .overlay { pointer-events: none; position: absolute; text-shadow: 1px 1px 3px black; font-weight: 900; }
  /* HP: top-right corner — simple remaining HP number */
  .hp-text { top: -9px; right: -6px; color: #fff; font-size: 24px; line-height: 1; }

  /* ══ Efectos en la carta — HUECO ROTATIVO único (arriba-izquierda) ══
     Todos los efectos (condiciones + inmunidad + restricciones) en un sitio;
     el ticker de main.js rota el icono cada ~2,4 s si hay varios. */
  .card .fx-slot {
    position: absolute; top: calc(33% - 7px); left: -6px;   /* 33% de la altura de la carta más abajo (≈ mitad del arte) */
    z-index: 6; pointer-events: none;
  }
  .cond-badge {
    width: 19px; height: 19px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 700 11px/1 system-ui, sans-serif; color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  }
  .cond-badge.cond-poisoned  { background: radial-gradient(circle at 35% 30%, #c061e0, #8b1ea6); }
  .cond-badge.cond-burned    { background: radial-gradient(circle at 35% 30%, #ff8a4c, #e0431f); }
  .cond-badge.cond-asleep    { background: radial-gradient(circle at 35% 30%, #6fb3e0, #2f6fae); }
  .cond-badge.cond-paralyzed { background: radial-gradient(circle at 35% 30%, #ffd95a, #d6a312); color:#5a3d00; text-shadow:none; }
  .cond-badge.cond-confused  { background: radial-gradient(circle at 35% 30%, #f07ad0, #b41e8e); }
  .cond-badge.fx-immune      { background: radial-gradient(circle at 35% 30%, #6fc3ff, #2a7fd6); color:#fff; }
  .cond-badge.fx-cantattack  { background: radial-gradient(circle at 35% 30%, #ff7a7a, #d62a2a); color:#fff; }
  .cond-badge svg { display: block; }
  /* Iconos PNG de estado/efecto (data/status.icons.js). Estados = traen su círculo;
     buff/debuff/escudo = icono sin fondo → sobre círculo blanco. */
  .cond-badge.fx-png { background: none !important; box-shadow: none; text-shadow: none; }
  .cond-badge.fx-png img { width: 100%; height: 100%; display: block; }
  .cond-badge.fx-png-wc { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.55); }
  .cond-badge.fx-png-wc img { width: 94%; height: 94%; margin: 3%; }
  /* Botón deshabilitado por efecto (p.ej. «can't retreat») — gris e inerte */
  .cep-disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.6); }
  .cond-badge { animation: cond-pop 0.22s cubic-bezier(0.22,1,0.36,1); }
  @keyframes cond-pop { from { opacity: 0; transform: scale(0.4); } }
  /* Cura/quitar condición: se desvanece suave hacia arriba (sin coinflip) */
  .cond-badge.cond-leaving { animation: cond-leave 0.34s ease forwards; pointer-events: none; }
  @keyframes cond-leave { to { opacity: 0; transform: translateY(-6px) scale(0.65); } }

  /* Objetivo elegible (efecto "elige 1 ...") — resaltado simple, a mejorar */
  .card.fx-target {
    cursor: pointer; outline: 3px solid #ffd23f; outline-offset: 1px;
    animation: fx-target-pulse 0.9s ease-in-out infinite; z-index: 12;
  }
  @keyframes fx-target-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,63,0.45); }
    50%      { box-shadow: 0 0 16px 4px rgba(255,210,63,0.75); }
  }
  /* Selección MÚLTIPLE de Pokémon (Gyarados/Mega Blastoise) — seleccionado = anillo verde fijo */
  .card.fx-selected {
    cursor: pointer; outline: 3px solid #4ade80; outline-offset: 1px;
    box-shadow: 0 0 14px 3px rgba(74,222,128,0.6); z-index: 13;
  }
  #multi-confirm-btn {
    font: 600 14px system-ui; color: #0a0a0f; background: #4ade80;
    border: none; border-radius: 10px; padding: 9px 18px; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5); transition: transform 0.12s;
  }
  #multi-confirm-btn:active { transform: scale(0.96); }

  /* Elegir un HUECO para daño retardado (Meowscarada) — naranja, distinto del amarillo de objetivo */
  .slot.fx-spot-choose {
    cursor: pointer; outline: 3px dashed #ff9d3f; outline-offset: 2px;
    animation: fx-spot-pulse 0.9s ease-in-out infinite; z-index: 12;
  }
  @keyframes fx-spot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,157,63,0.4); }
    50%      { box-shadow: 0 0 16px 5px rgba(255,157,63,0.7); }
  }
  /* Hueco MARCADO con daño retardado pendiente — spot_mark centrado en el hueco
     (sin stroke); si hay carta, se superpone encima de ella. */
  .slot.fx-delayed::after {
    content: ''; position: absolute; inset: 0;
    background-image: var(--spot-mark-img); background-repeat: no-repeat;
    background-position: center; background-size: 58%;
    z-index: 14; pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
    animation: fx-spot-bob 1.7s ease-in-out infinite;
  }
  @keyframes fx-spot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  /* Mazo destacado para elegir (Unown CHECK) — mismo cue que .fx-target */
  .deck-slot.fx-deck-target {
    cursor: pointer; outline: 3px solid #ffd23f; outline-offset: 2px;
    animation: fx-target-pulse 0.9s ease-in-out infinite; z-index: 12;
  }
  /* Pop-up central de «mirar/revelar» cartas (estética Cartas, system-ui) */
  /* Selector de ataque a copiar (Mew ex Genome Hacking / Ditto / Mimikyu) */
  #attack-picker-overlay {
    position: fixed; inset: 0; z-index: 9360;
    display: none; align-items: center; justify-content: center;
    background: rgba(8,8,12,0.62); backdrop-filter: blur(3px);
  }
  #attack-picker-overlay.open { display: flex; }
  #attack-picker-panel {
    background: #1a1a22; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; padding: 18px 20px; min-width: 280px; max-width: 90vw;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  }
  #attack-picker-title { font: 600 16px system-ui; color: #fff; margin-bottom: 12px; text-align: center; }
  #attack-picker-list { display: flex; flex-direction: column; gap: 8px; }
  #attack-picker-list .ap-attack { width: 100%; }

  #reveal-overlay {
    position: fixed; inset: 0; z-index: 9300;
    display: none; align-items: center; justify-content: center;
    background: rgba(8,8,12,0.62); backdrop-filter: blur(3px);
    font-family: system-ui, -apple-system, sans-serif;
  }
  /* Misma estética que la pila de descartes: cuadro translúcido + fade a los lados + 2 filas con scroll-drag */
  #reveal-panel {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 0; border-radius: 16px;
    background: rgba(8,8,14,0.55); backdrop-filter: blur(18px) saturate(0.8);
    border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    max-width: 92vw; animation: reveal-pop 0.26s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes reveal-pop { from { transform: scale(0.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  #reveal-title {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.55);
    letter-spacing: 0.08em; text-transform: uppercase; padding: 0 9%;
  }
  #reveal-cards {
    display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: 10px;
    grid-template-rows: 151px;   /* 1 fila por defecto; el JS pone 2 filas si hay muchas */
    padding: 4px 9%; max-width: 92vw;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    cursor: grab; user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  }
  #reveal-cards::-webkit-scrollbar { display: none; }
  #reveal-cards:active { cursor: grabbing; }
  .reveal-card {
    width: 108px; height: 151px; border-radius: 8px;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5); flex-shrink: 0;
  }
  .reveal-empty { color: rgba(255,255,255,0.5); font-size: 14px; padding: 22px 9%; }
  #reveal-close {
    padding: 9px 22px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9); font-size: 14px; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
  }
  #reveal-close:hover { background: rgba(255,255,255,0.14); }
  #reveal-close:active { transform: scale(0.96); }
  .hp-text.hp-low  { color: #ff9040; }
  .hp-text.hp-crit { color: #ff3333; }
  /* HP +/- stepper — slides out left/right from the HP badge on hover */
  .hp-stepper {
    position: absolute; top: -13px; right: -6px;
    display: flex; align-items: center; gap: 2px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 30;
  }
  .hp-stepper.visible { opacity: 1; pointer-events: auto; }
  .hp-step-btn {
    width: 20px; height: 20px; border-radius: 50%;
    border: none; cursor: pointer;
    background: rgba(0,0,0,0.72); color: #fff;
    font-size: 14px; font-weight: 900; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    transition: background 0.1s, transform 0.1s;
    flex-shrink: 0;
  }
  .hp-step-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.15); }
  .hp-step-btn:active { transform: scale(0.92); }
  .hp-step-minus { order: 0; }  /* left of the number */
  .hp-step-plus  { order: 2; }  /* right of the number */
  .hp-step-val   { order: 1; color: #fff; font-size: 22px; font-weight: 900;
                   line-height: 1; text-shadow: 1px 1px 3px black; min-width: 28px; text-align: center; }
  /* Damage floating number — animated */
  .dmg-text { display: none; }  /* legacy, hidden — animation handles it */
  /* Damage animation overlay */
  @keyframes dmg-rise {
    0%   { opacity:0; transform: translate(-50%,10%) scale(0.4); }
    18%  { opacity:1; transform: translate(-50%,-15%) scale(1.18); }
    40%  { opacity:1; transform: translate(-50%,-30%) scale(1.0); }
    100% { opacity:0; transform: translate(-50%,-75%) scale(0.92); }
  }
  @keyframes ko-fly {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    20%  { transform: scale(1.08) rotate(-5deg); opacity: 1; }
    100% { transform: scale(0.25) translate(var(--ko-dx), var(--ko-dy)) rotate(20deg); opacity: 0; }
  }
  @keyframes card-hit {
    0%       { transform: translate(0,0) rotate(0deg); }
    12%      { transform: translate(-3px,-2px) rotate(-1.5deg); }
    28%      { transform: translate(4px,1px) rotate(1.5deg); }
    44%      { transform: translate(-2px,-1px) rotate(-0.8deg); }
    65%      { transform: translate(1px,0) rotate(0.4deg); }
    100%     { transform: translate(0,0) rotate(0deg); }
  }
  @keyframes flash-red {
    0%   { box-shadow: inset 0 0 0 3px rgba(255,60,60,0); }
    20%  { box-shadow: inset 0 0 0 3px rgba(255,60,60,0.9); }
    60%  { box-shadow: inset 0 0 0 3px rgba(255,60,60,0.4); }
    100% { box-shadow: inset 0 0 0 3px rgba(255,60,60,0); }
  }
  /* Beat de HABILIDAD: glow rojo LIMPIO cuando su habilidad se dispara (secuenciador, 1s).
     Recto (no «boomy»): entra rápido, se MANTIENE estable y sale — sin expansión radial. */
  @keyframes ability-beat-glow {
    0%   { box-shadow: 0 0 0 0 rgba(255,72,72,0); }
    12%  { box-shadow: 0 0 9px 1px rgba(255,82,82,0.92); }
    78%  { box-shadow: 0 0 9px 1px rgba(255,82,82,0.9); }
    100% { box-shadow: 0 0 0 0 rgba(255,72,72,0); }
  }
  .card.ability-beat { animation: ability-beat-glow 1s ease-out; z-index: 6; }
  /* Impacto LIMPIO al recibir daño: un «punch» de escala, sin jitter (sustituye a card-hit) */
  @keyframes card-impact {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.93); }
    70%  { transform: scale(1.015); }
    100% { transform: scale(1); }
  }
  /* Flash del número de HP durante el conteo (daño = blanco→rojo, cura = blanco→verde) */
  @keyframes hp-flash-dmg  { 0%{ text-shadow:0 0 0 transparent; } 30%{ text-shadow:0 0 9px rgba(255,70,70,0.95); } 100%{ text-shadow:0 1px 2px rgba(0,0,0,0.6); } }
  @keyframes hp-flash-grn  { 0%{ text-shadow:0 0 0 transparent; } 30%{ text-shadow:0 0 9px rgba(90,230,130,0.95); } 100%{ text-shadow:0 1px 2px rgba(0,0,0,0.6); } }
  .hp-text.hp-flash      { animation: hp-flash-dmg 0.625s ease-out; }
  .hp-text.hp-flash-heal { animation: hp-flash-grn 0.625s ease-out; color:#5fe082 !important; }
  .dmg-float-el {
    position: absolute; top: 38%; left: 50%;
    pointer-events: none; z-index: 999;
    font-family: inherit;                 /* misma tipografía que el número de HP de la carta */
    font-weight: 900; font-size: 40px; line-height: 1;
    background: linear-gradient(180deg, #ffffff 42%, #ffbcbc 100%);   /* casi blanco con toque rojo abajo */
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.85));   /* sombra suave, como la del número de HP */
    animation: dmg-rise 1.19s cubic-bezier(0.22,1,0.36,1) forwards;   /* 20% más lenta */
    white-space: nowrap;
  }
  /* Número flotante de CURA (N): verde claro arriba → casi blanco abajo */
  .heal-float-el {
    background: linear-gradient(180deg, #8ef0ab 0%, #f3fff6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.85));
  }
  /* Halo de cura: anillo verde que se expande y desvanece */
  .heal-halo {
    position: absolute; inset: -6px; z-index: 998; pointer-events: none; border-radius: 12px;
    box-shadow: 0 0 0 0 rgba(95,224,130,0.55), inset 0 0 14px rgba(95,224,130,0.35);
    animation: heal-halo 0.81s ease-out forwards;
  }
  @keyframes heal-halo {
    0%   { box-shadow: 0 0 0 0 rgba(95,224,130,0.55), inset 0 0 14px rgba(95,224,130,0.45); opacity: 1; }
    100% { box-shadow: 0 0 0 16px rgba(95,224,130,0), inset 0 0 14px rgba(95,224,130,0); opacity: 0; }
  }
  /* Mini «+» verdes que suben */
  .heal-plus {
    position: absolute; left: 50%; top: 60%; z-index: 998; pointer-events: none;
    font: 800 16px system-ui, sans-serif; color: #7af0a0; text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    animation: heal-plus-rise 0.875s ease-out forwards; animation-delay: var(--hd, 0s);
    transform: translate(-50%, 0);
  }
  @keyframes heal-plus-rise {
    0%   { opacity: 0; transform: translate(calc(-50% + var(--hx,0px)), 6px) scale(0.6); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--hx,0px)), -36px) scale(1); }
  }
  /* Halo de subida/bajada de stat (buffo verde / debuffo rojo), ~1 s, estilo «stat raised/lowered» */
  .stat-halo {
    position: absolute; inset: -4px; z-index: 997; pointer-events: none; border-radius: 12px;
    animation: stat-halo 0.95s cubic-bezier(0.3,0.7,0.4,1) forwards;
  }
  .stat-halo-up   { --shc: 95,224,130; }
  .stat-halo-down { --shc: 235,95,95; }
  @keyframes stat-halo {
    0%   { box-shadow: 0 0 0 0 rgba(var(--shc),0), inset 0 0 0 2px rgba(var(--shc),0); opacity: 0; }
    25%  { box-shadow: 0 0 14px 2px rgba(var(--shc),0.5), inset 0 0 0 2px rgba(var(--shc),0.7); opacity: 1; }
    100% { box-shadow: 0 0 22px 6px rgba(var(--shc),0), inset 0 0 0 2px rgba(var(--shc),0); opacity: 0; }
  }
  /* Energies: bottom-left, overlapping icons */
  .energy-container {
    bottom: -11px; left: -6px;
    display: flex; flex-direction: row;
    pointer-events: none; position: absolute; z-index: 10;
  }
  .energy {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    flex-shrink: 0; position: relative;
    object-fit: cover;
  }
  .energy + .energy { margin-left: -10px; }

  /* ── UPLOAD BUTTON ── */
  #upload-btn {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    padding: 6px 12px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; font-size: 11px; z-index: 5;
  }
  #upload-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
  #binder-btn {
    position: absolute; left: 136px; top: 50%; transform: translateY(-50%);
    padding: 6px 12px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; font-size: 11px; z-index: 5;
  }
  #binder-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

  /* ── Temp cards section ── */
  #binder-temp-section {
    padding: 0 14px 10px;
    display: none;
  }
  #binder-temp-section.has-cards { display: block; }
  #binder-temp-label {
    font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,0.3);
    margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
  }
  #binder-temp-label::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,0.07);
  }
  #binder-temp-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .binder-temp-wrap {
    position: relative; width: 72px; height: 100px;
    flex-shrink: 0;
  }
  .binder-temp-thumb {
    width: 72px; height: 100px;
    border-radius: 5px;
    background-size: cover; background-position: center;
    cursor: grab;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .binder-temp-thumb:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.55); }
  .binder-temp-del {
    position: absolute; top: -5px; right: -5px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(30,20,20,0.95); border: 1px solid rgba(255,80,80,0.45);
    color: rgba(255,100,100,0.8); font-size: 10px; font-weight: 900;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s, background 0.15s;
    z-index: 2; line-height: 1;
  }
  .binder-temp-wrap:hover .binder-temp-del { opacity: 1; }
  .binder-temp-del:hover { background: rgba(200,40,40,0.9); color: #fff; }
  .binder-temp-badge {
    position: absolute; bottom: 3px; left: 0; right: 0;
    text-align: center; font-size: 10px; font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 4px; pointer-events: none;
  }
  #binder-temp-divider {
    margin: 0 14px 10px;
    height: 1px; background: rgba(255,255,255,0.07);
  }

  /* ── Temp card create modal ── */
  #temp-card-modal {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.78);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Nunito', sans-serif;
    animation: coinFadeIn 0.2s ease;
  }
  .tcm-box {
    background: #0f0f1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; padding: 26px;
    width: 340px; max-width: 92vw;
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.85);
  }
  .tcm-header {
    display: flex; align-items: center; justify-content: space-between;
  }
  .tcm-title {
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
  }
  .tcm-close {
    background: none; border: none; color: rgba(255,255,255,0.25);
    cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
    transition: color 0.15s;
  }
  .tcm-close:hover { color: rgba(255,255,255,0.7); }
  .tcm-img-drop {
    width: 100%; height: 130px;
    border: 2px dashed rgba(255,255,255,0.12);
    border-radius: 12px;
    background-size: contain; background-repeat: no-repeat;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
    font-size: 11px; color: rgba(255,255,255,0.3);
    font-weight: 700; letter-spacing: 0.06em;
    position: relative; overflow: hidden;
  }
  .tcm-img-drop.has-img .tcm-img-hint { display: none; }
  .tcm-img-drop:hover { border-color: rgba(255,255,255,0.25); background-color: rgba(255,255,255,0.03); }
  .tcm-img-drop.drag-over { border-color: rgba(99,180,255,0.5); background-color: rgba(99,180,255,0.06); }
  .tcm-fields { display: flex; flex-direction: column; gap: 11px; }
  .tcm-row { display: flex; flex-direction: column; gap: 5px; }
  .tcm-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.35);
  }
  .tcm-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px;
    color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600;
    font-family: inherit; outline: none; transition: border-color 0.15s;
    width: 100%; box-sizing: border-box;
  }
  .tcm-input:focus { border-color: rgba(120,140,255,0.45); }
  .tcm-type-row { display: flex; gap: 7px; }
  .tcm-type-chip {
    flex: 1; padding: 7px 6px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45);
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; text-align: center;
    transition: all 0.14s;
  }
  .tcm-type-chip:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.75); }
  .tcm-type-chip.sel {
    background: rgba(255,255,255,0.121); border-color: rgba(255,255,255,0.25); color: #fff;
  }
  .tcm-footer { display: flex; justify-content: flex-end; gap: 9px; }
  .tcm-btn {
    padding: 9px 20px; border-radius: 10px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1); background: none;
    color: rgba(255,255,255,0.38); transition: all 0.15s; font-family: inherit;
  }
  .tcm-btn:hover { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.2); }
  .tcm-btn-ok {
    background: rgba(255,255,255,0.099); color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.175);
  }
  .tcm-btn-ok:hover { background: rgba(255,255,255,0.176); color: #fff; }
  .tcm-btn-ok:disabled { opacity: 0.35; cursor: not-allowed; }

  /* ── Bulk custom card modal ── */
  .tcm-bulk { width: min(90vw, 820px) !important; }
  .tcm-bulk-drop {
    border: 2px dashed rgba(255,255,255,0.14); border-radius: 14px;
    padding: 28px 20px; text-align: center; cursor: pointer;
    color: rgba(255,255,255,0.35); font-size: 13px; line-height: 1.6;
    transition: border-color 0.15s, background 0.15s;
  }
  .tcm-bulk-drop b { color: rgba(255,255,255,0.45); }
  .tcm-bulk-drop small { font-size: 11px; color: rgba(255,255,255,0.2); }
  .tcm-bulk-drop:hover, .tcm-bulk-drop.drag-over {
    border-color: rgba(255,255,255,0.225); background: rgba(100,105,255,0.05);
  }
  .tcm-bulk-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px; max-height: 55vh; overflow-y: auto; padding: 2px;
  }
  .tcm-bulk-gallery::-webkit-scrollbar { width: 4px; }
  .tcm-bulk-gallery::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
  .tcm-bulk-item {
    display: flex; flex-direction: column; gap: 7px;
    background: rgba(255,255,255,0.03); border-radius: 10px; padding: 8px;
    border: 1px solid rgba(255,255,255,0.07);
  }
  .tcm-bulk-thumb {
    width: 100%; aspect-ratio: 2/3; border-radius: 7px;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; position: relative;
  }
  .tcm-bulk-spinner { animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .tcm-bulk-fields { display: flex; flex-direction: column; gap: 5px; }
  .tcm-b-name, .tcm-b-hp {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px; padding: 5px 8px;
    color: rgba(255,255,255,0.8); font-size: 12px; font-family: inherit;
    outline: none;
  }
  .tcm-b-type {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px; padding: 5px 8px;
    color: rgba(255,255,255,0.7); font-size: 11px; font-family: inherit;
    outline: none; cursor: pointer;
  }
  .tcm-bulk-del {
    align-self: flex-end; background: rgba(255,60,60,0.12);
    border: 1px solid rgba(255,60,60,0.25); border-radius: 5px;
    color: rgba(255,120,120,0.8); font-size: 10px; cursor: pointer; padding: 2px 6px;
    transition: background 0.12s;
  }
  .tcm-bulk-del:hover { background: rgba(255,60,60,0.25); }
  #binder-overlay {
    position: fixed; left: 0; right: 0; bottom: 0; top: 48px; z-index: 2600;
    background: rgba(0,0,0,0.45);
    display: none; justify-content: center; align-items: center;
    transition: opacity 0.25s ease;
  }
  #binder-overlay.open { display: flex; }
  #binder-panel {
    width: min(92vw, 720px); max-height: 88vh;
    background: rgba(16,16,24,0.65); backdrop-filter: blur(22px) saturate(0.7);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 18px;
    display: flex; flex-direction: column; overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transform: scale(0.95); opacity: 0;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  #binder-overlay.open #binder-panel { transform: scale(1); opacity: 1; }
  #binder-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 10px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  #binder-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  #binder-count { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.3); margin-left: 8px; }
  #binder-close { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 18px; padding: 2px 4px; transition: color 0.15s; }
  #binder-close:hover { color: rgba(255,255,255,0.8); }
  #binder-drop {
    margin: 12px 18px 0; padding: 18px; flex-shrink: 0;
    border: 2px dashed rgba(255,255,255,0.12); border-radius: 12px;
    text-align: center; cursor: pointer;
    color: rgba(255,255,255,0.3); font-size: 12px;
    transition: border-color 0.2s, background 0.2s;
  }
  #binder-drop.hover { border-color: rgba(99,180,255,0.5); background: rgba(99,180,255,0.06); color: rgba(99,180,255,0.8); }
  #binder-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px; padding: 14px 18px 18px;
    overflow-y: auto; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .binder-thumb {
    /* 512/367 ≈ 139.5% — padding-bottom trick guarantees correct card ratio */
    width: 100%; height: 0; padding-bottom: 139.5%;
    border-radius: 7px;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    cursor: grab; user-select: none;
    position: relative; overflow: hidden;
    box-sizing: border-box;
  }
  .binder-thumb.drag-over {
    outline: 2px solid rgba(99,180,255,0.7);
    outline-offset: 2px;
  }
  .binder-thumb.dragging-src {
    opacity: 0.3;
  }
  .binder-thumb .binder-glare {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 65%);
    mix-blend-mode: color-dodge;
  }
  .binder-thumb .binder-shine {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    filter: brightness(0.35) contrast(1.1);
    opacity: 0;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, rgba(0,0,0,0.2) 40%, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, rgba(0,0,0,0.2) 40%, transparent 70%);
  }

  /* ── SETTINGS ── */
  #settings-btn {
    position: fixed; bottom: 18px; right: 18px; z-index: 1000;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(14,14,20,0.82);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
  }
  #settings-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.28);
    box-shadow: 0 6px 28px rgba(0,0,0,0.65);
  }
  #settings-btn svg {
    width: 16px; height: 16px;
    fill: rgba(255,255,255,0.5);
    transition: fill 0.22s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  }
  #settings-btn:hover svg { fill: rgba(255,255,255,0.9); }
  #settings-btn.open { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
  #settings-btn.open svg { transform: rotate(90deg); fill: rgba(255,255,255,0.85); }

  #settings-panel {
    position: fixed; bottom: 68px; right: 18px; z-index: 1000;
    background: rgba(14,14,20,0.96);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px; padding: 18px 20px 16px; width: 260px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
    display: flex; flex-direction: column; gap: 15px;
    font-family: 'Nunito', sans-serif;
    backdrop-filter: blur(16px);
    /* closed state */
    opacity: 0; pointer-events: none;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34,1.28,0.64,1);
  }
  #settings-panel.open {
    opacity: 1; pointer-events: all;
    transform: translateY(0) scale(1);
  }

  .cfg-title {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.2em;
    text-transform: uppercase; color: rgba(255,255,255,0.28);
    margin-bottom: 2px;
  }
  .cfg-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0 -4px; }
  .cfg-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .cfg-label { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.72); }
  .cfg-presets { display: flex; gap: 7px; flex-wrap: nowrap; }
  .preset-dot {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s;
    flex-shrink: 0;
  }
  .preset-dot:hover {
    transform: scale(1.25);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
  }
  .preset-dot.active {
    border-color: rgba(255,255,255,0.85);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
  }
  /* ── Segmented toggle ── */
  .seg-toggle {
    display: inline-flex; border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10); flex-shrink: 0;
  }
  .seg-toggle button {
    padding: 4px 10px; font-size: 10.5px; font-weight: 700;
    font-family: 'Nunito', sans-serif; cursor: pointer;
    background: transparent; color: rgba(255,255,255,0.35);
    border: none; transition: background 0.18s, color 0.18s;
    letter-spacing: 0.02em;
  }
  .seg-toggle button:hover { color: rgba(255,255,255,0.6); }
  .seg-toggle button.active {
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.88);
  }

  /* ── SIDEBAR PANEL ── */
  /* ══ APP SHELL: push layout ══ */

  /* ── Placement phase: per-player accent glow on active + bench slots ── */
  .placement-highlight-p1 {
    box-shadow: 0 0 0 1.5px rgba(77,171,255,0.7), 0 0 14px rgba(77,171,255,0.35) !important;
    animation: placement-pulse-p1 1.8s ease-in-out infinite;
  }
  .placement-highlight-p2 {
    box-shadow: 0 0 0 1.5px rgba(255,107,107,0.7), 0 0 14px rgba(255,107,107,0.35) !important;
    animation: placement-pulse-p2 1.8s ease-in-out infinite;
  }
  @keyframes placement-pulse-p1 {
    0%,100% { box-shadow: 0 0 0 1.5px rgba(77,171,255,0.7),  0 0 14px rgba(77,171,255,0.35); }
    50%      { box-shadow: 0 0 0 2px   rgba(77,171,255,1),    0 0 22px rgba(77,171,255,0.55); }
  }
  @keyframes placement-pulse-p2 {
    0%,100% { box-shadow: 0 0 0 1.5px rgba(255,107,107,0.7), 0 0 14px rgba(255,107,107,0.35); }
    50%      { box-shadow: 0 0 0 2px   rgba(255,107,107,1),   0 0 22px rgba(255,107,107,0.55); }
  }
  #btn-end-turn.placement-phase {
    --et-color:    #ffd840;
    --et-glow:     rgba(255,216,64,0.55);
    --et-bg-hover: rgba(255,216,64,0.14);
  }
  /* ── Glow de jugabilidad (modo Normal): el pulso blanco de mantener energía sobre un
     Pokémon (slotPulse), pero 50% más lento y un poco más perceptible (mayor y opaco). ── */
  .card.pb-playable { animation: pbPlayablePulse 1.2s ease-out infinite; border-radius: 8px; }
  @keyframes pbPlayablePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.38); }
    60%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }
  #dmg-strip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* left set by JS after layout */
    width: 52px;
    height: 316px;
    z-index: 20;
    display: flex; flex-direction: column; align-items: center;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,0.24);
    backdrop-filter: blur(3px);
    box-shadow: 0 6px 28px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.06),
                inset 0 -1px 0 rgba(0,0,0,0.3);
    transition: height 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  #dmg-strip.collapsed { height: 30px; }

  /* Toggle tab — full-width bar, static flex child so inner starts below it */
  #dmg-strip-toggle {
    width: 100%; height: 30px;
    flex-shrink: 0; z-index: 4;
    background: rgba(255,255,255,0.04);
    border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px 14px 0 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    color: rgba(255,255,255,0.32); font-size: 9px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
  }
  #dmg-strip-toggle:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); }
  #dmg-strip.collapsed #dmg-strip-toggle { border-radius: 14px; border-bottom: none; }

  /* Top fade — subtle vignette at the top edge of the scroll area */
  #dmg-fade-top {
    position: absolute; top: 30px; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, transparent 100%);
    z-index: 3; pointer-events: none;
  }
  #dmg-fade-bot {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(to top, rgba(0,0,0,0.38) 0%, transparent 100%);
    z-index: 3; pointer-events: none;
  }
  /* Collapse: hide pills and fades */
  #dmg-strip.collapsed #dmg-strip-inner { opacity: 0; pointer-events: none; }
  #dmg-strip.collapsed #dmg-fade-top    { opacity: 0; }
  #dmg-strip.collapsed #dmg-fade-bot    { opacity: 0; }

  #dmg-strip-inner {
    width: 100%; flex: 1;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 8px 0 32px;   /* 8px top (below toggle), 32px bottom (above fade) */
    scrollbar-width: none;
    transition: opacity 0.2s ease;
  }
  #dmg-strip-inner::-webkit-scrollbar { display: none; }

  .dmg-pill {
    width: 44px; height: 44px; border-radius: 50%;
    cursor: grab; flex-shrink: 0;
    position: relative; user-select: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.5);
    box-shadow: 0 3px 8px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(255,255,255,0.25),
                inset 0 -2px 4px rgba(0,0,0,0.3);
    transition: transform 0.1s, box-shadow 0.1s;
  }
  /* Reticular texture overlay */
  .dmg-pill::before {
    content: '';
    position: absolute; inset: 0; border-radius: 50%;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,0,0,0.08) 4px, rgba(0,0,0,0.08) 5px),
      repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0,0,0,0.08) 4px, rgba(0,0,0,0.08) 5px);
    mix-blend-mode: multiply; border-radius: 50%;
  }
  /* Highlight rim */
  .dmg-pill::after {
    content: '';
    position: absolute; inset: 2px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    pointer-events: none;
  }
  .dmg-pill:hover { transform: scale(1.12); box-shadow: 0 5px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.3); }
  .dmg-pill:active { cursor: grabbing; transform: scale(1.05); }
  .dmg-pill.orange { background: radial-gradient(circle at 45% 35%, #f07020 0%, #c85010 60%, #a03808 100%); }
  .dmg-pill.red    { background: radial-gradient(circle at 45% 35%, #e03020 0%, #b01a10 60%, #800e08 100%); }

  /* Dragging ghost */
  #dmg-cursor {
    position: fixed; z-index: 9999; pointer-events: none;
    width: 46px; height: 46px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    box-shadow: 0 5px 16px rgba(0,0,0,0.6);
    transform: translate(-50%,-50%) scale(0);
    transition: transform 0.12s cubic-bezier(0.34,1.4,0.64,1);
  }
  #dmg-cursor.active { display: flex; transform: translate(-50%,-50%) scale(1.1); }

  #page-wrap { display: flex; flex-direction: row; width: 100vw; height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); overflow: hidden; }
  #app-shell {
    flex: 1; display: flex; flex-direction: row;
    min-height: 0; overflow: hidden; position: relative;
  }
  #main-content {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; overflow: clip; position: relative;
  }

  /* ══ SIDEBAR TABS ══ */
  #sb-tabs {
    display: flex; flex-shrink: 0; align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
  }
  /* Settings popup — anchored to #app-gear-btn in the top nav.
     Animado igual que el menú de idioma de al lado (mismo origen top-right → al cambiar de
     uno a otro se transicionan/funden como si uno se transformara en el otro). */
  #sb-settings-popup {
    position: absolute; top: calc(100% + 8px); right: 12px; z-index: 9200;
    width: 260px;
    background: #1a1a2a; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px) scale(0.97); transform-origin: top right;
    transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22,1,0.36,1), visibility 0.16s;
  }
  #sb-settings-popup.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .sb-settings-inner {
    padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 14px;
  }
  .sb-settings-label {
    font-size: 12px; color: rgba(255,255,255,0.55); font-family: 'Plus Jakarta Sans',sans-serif;
  }
  .sb-settings-btn {
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6);
    font-family: 'Nunito',sans-serif; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all 0.15s; text-align: left;
  }
  .sb-settings-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
  .sb-settings-btn-danger {
    border-color: rgba(239,68,68,0.25); color: rgba(239,68,68,0.7);
    background: rgba(239,68,68,0.07);
  }
  .sb-settings-btn-danger:hover { background: rgba(239,68,68,0.15); color: rgba(239,68,68,0.9); }

  /* ── Ajustes: secciones + switch unificado (estética Cartas, system-ui) ── */
  #sb-settings-popup { background: #16161f; border-color: rgba(255,255,255,0.09); }
  .sb-settings-inner { gap: 4px; }
  .sbs-group { display: flex; flex-direction: column; gap: 11px; padding: 12px 0; }
  .sbs-group + .sbs-group { border-top: 1px solid rgba(255,255,255,0.06); }
  .sbs-group:first-child { padding-top: 2px; }
  .sbs-group-title {
    font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.34);
  }
  .sbs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sbs-row > span { font-family: system-ui, sans-serif; font-size: 13px; color: rgba(255,255,255,0.8); }
  .sbs-row--col { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Opción atenuada cuando su dependencia está apagada (ej. auto-rotación sin tilt) */
  .sbs-row.sbs-disabled { opacity: 0.4; }
  .sbs-row.sbs-disabled .pb-switch { pointer-events: none; cursor: default; }
  .sbs-presets { display: flex; gap: 7px; flex-wrap: wrap; }
  .sbs-actions { gap: 6px; }
  .sb-settings-btn {
    font-family: system-ui, sans-serif !important; font-weight: 600 !important;
    font-size: 12px !important; padding: 10px 11px;
  }
  /* Switch on/off neutro (on = blanco, knob oscuro) */
  .pb-switch {
    width: 40px; height: 23px; border-radius: 12px; flex-shrink: 0; cursor: pointer;
    background: rgba(255,255,255,0.15); position: relative;
    transition: background 0.2s; -webkit-tap-highlight-color: transparent;
  }
  .pb-switch.on { background: rgba(255,255,255,0.9); }
  .pb-switch-knob {
    position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
    background: #fff; transition: left 0.2s ease, background 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  }
  .pb-switch.on .pb-switch-knob { left: 20px; background: #16161f; }

  /* Subir carta / Binder: tenían posición ABSOLUTA + colores verde/azul legacy
     (rompían el layout del popup). En Ajustes van en flujo, neutros y a lo ancho. */
  .sbs-actions #upload-btn,
  .sbs-actions #binder-btn {
    position: static; transform: none; left: auto; top: auto; z-index: auto;
    width: 100%; text-align: left;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    padding: 10px 11px;
  }
  .sbs-actions #upload-btn:hover,
  .sbs-actions #binder-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }

  /* ══ Controles del tablero (botón abajo-izquierda + menú) — estética Cartas ══ */
  /* Panel de REPARTO de energías rampeadas (Ho-Oh ex / Moltres ex / Manaphy): orbes encima de la banca */
  #energy-dist-panel {
    position: fixed; z-index: 9300;
    display: flex; gap: 8px; padding: 8px 12px;
    background: rgba(20,20,28,0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    pointer-events: auto;
  }
  #energy-dist-panel .dist-orb {
    width: 34px; height: 34px; cursor: grab; touch-action: none;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
    transition: transform .12s;
  }
  #energy-dist-panel .dist-orb:hover { transform: scale(1.12); }
  .dist-orb.dragging {
    position: fixed; z-index: 9400; pointer-events: none;
    transform: translate(-50%,-50%) scale(1.2); cursor: grabbing;
  }
  #board-ctrl { display: none; }   /* vaciado: el menú se mueve a #bar-tools-p1 por JS */
  /* Grupo de herramientas a la IZQUIERDA de la barra de J1 (espejo del #sidebar-toggle, que va a la derecha):
     opciones (⋯) + registro, pegados al borde izquierdo de la barra. */
  #bar-tools-p1 { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: stretch; z-index: 30;
    pointer-events: auto; font-family: system-ui,-apple-system,sans-serif; }
  .bar-tool-btn {
    width: 44px; height: 100%; padding: 0;
    background: transparent; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    position: relative;
  }
  .bar-tool-btn::after {   /* divisor a la derecha (espejo del de #sidebar-toggle) */
    content: ''; position: absolute; right: 0; top: 22%; bottom: 22%;
    width: 1px; background: rgba(255,255,255,0.12);
  }
  .bar-tool-btn:hover { background: rgba(255,255,255,0.05); }
  .bar-tool-btn svg { width: 16px; height: 16px; color: rgba(255,255,255,0.4); transition: color 0.15s; }
  .bar-tool-btn:hover svg, .bar-tool-btn[aria-expanded="true"] svg { color: rgba(255,255,255,0.85); }
  .bar-tool-btn.disabled { pointer-events: none; }
  .bar-tool-btn.disabled svg { color: rgba(255,255,255,0.16); }
  #bar-undo-btn:not(.disabled):active svg { transform: rotate(-22deg) scale(0.9); }   /* micro-feedback del gesto deshacer */
  #bar-undo-btn svg { transition: color 0.15s, transform 0.18s cubic-bezier(0.34,1.4,0.64,1); }
  #board-ctrl-btn svg { width: 18px; height: 18px; }
  /* Panel del REGISTRO de acciones (desplegable hacia arriba desde la barra) */
  #action-log-panel {
    position: absolute; left: 0; bottom: calc(100% + 8px);
    width: 320px; max-height: 50vh; display: flex; flex-direction: column;
    /* liquid glass (estilo tierlist): alpha BAJO + blur fuerte → se ve el fondo desenfocado */
    background: linear-gradient(180deg, rgba(48,48,64,0.30), rgba(16,16,26,0.42));
    -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18); overflow: hidden;
  }
  #action-log-panel::before {   /* brillo glossy superior */
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 28%);
  }
  #action-log-panel > * { position: relative; z-index: 1; }
  #action-log-head { font: 600 12px/1 system-ui,sans-serif; color: rgba(255,255,255,0.55);
    padding: 11px 13px 8px; letter-spacing: .02em; border-bottom: 1px solid rgba(255,255,255,0.07); }
  #action-log-list { overflow-y: auto; padding: 6px 0; }
  .alog-entry { font: 13px/1.35 system-ui,sans-serif; color: rgba(255,255,255,0.82);
    padding: 5px 13px; display: flex; gap: 7px; align-items: baseline; }
  .alog-entry .alog-pc { flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; margin-top: 6px; }
  .alog-entry.alog-p1 .alog-pc { background: #4dabff; }
  .alog-entry.alog-p2 .alog-pc { background: #ff6b6b; }
  .alog-entry.alog-sys { color: rgba(255,255,255,0.5); font-style: italic; }
  .alog-empty { font: italic 13px/1.4 system-ui,sans-serif; color: rgba(255,255,255,0.4); padding: 14px 13px; text-align: center; }
  #board-ctrl-menu {
    position: absolute; left: 0; bottom: calc(100% + 8px);
    min-width: 214px;
    /* liquid glass (estilo tierlist): cristal translúcido que refracta el tablero por detrás.
       Alpha BAJO + blur fuerte = se ve el fondo desenfocado (no un tinte opaco). */
    background: linear-gradient(180deg, rgba(48,48,64,0.28), rgba(16,16,26,0.40));
    -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18); padding: 8px;
    flex-direction: column; gap: 4px;
  }
  #board-ctrl-menu::before {   /* brillo glossy superior */
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 32%);
  }
  #board-ctrl-menu > * { position: relative; z-index: 1; }
  #board-ctrl-menu .bc-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 2px; }
  #board-ctrl-menu .bc-matcolor { display: flex; flex-direction: column; gap: 9px; padding: 6px 9px; }
  #board-ctrl-menu .bc-matcolor > span { font: 600 12px/1 system-ui,sans-serif; color: rgba(255,255,255,0.55); }
  /* botones del menú (neutral; anula el verde/azul legacy de #upload-btn/#binder-btn aquí) */
  #board-ctrl-menu .sb-settings-btn,
  #board-ctrl-menu #upload-btn, #board-ctrl-menu #binder-btn {
    position: static; transform: none; left: auto; top: auto; z-index: auto;
    width: 100%; text-align: left;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    padding: 10px 11px; font: 600 12.5px/1 system-ui,sans-serif; cursor: pointer;
    transition: background .12s, color .12s;
  }
  #board-ctrl-menu .sb-settings-btn:hover,
  #board-ctrl-menu #upload-btn:hover, #board-ctrl-menu #binder-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
  #board-ctrl-menu .sb-settings-btn-danger { color: #ff8a8a; }
  #board-ctrl-menu .sb-settings-btn-danger:hover { background: rgba(239,68,68,0.14); color: #ff8a8a; }
  /* ══ Toggle Modo de reglas (Sandbox / Normal) ══ */
  #board-ctrl-menu .bc-rules-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 9px;
  }
  #board-ctrl-menu .bc-rules-text { display: flex; flex-direction: column; gap: 2px; }
  #board-ctrl-menu .bc-rules-text > span:first-child { font: 600 12.5px/1 system-ui,sans-serif; color: rgba(255,255,255,0.82); }
  #board-ctrl-menu .bc-rules-state { font: 600 10.5px/1 system-ui,sans-serif; color: rgba(255,255,255,0.45); }
  #board-ctrl-menu .bc-rules-row.normal .bc-rules-state { color: #6fd08a; }

  /* ══ Reducir animaciones (toggle de Ajustes / hereda prefers-reduced-motion) ══
     Calma animaciones y transiciones CSS (la coreografía por Web Animations API
     no se ve afectada). Se activa con la clase global en <html>. */
  html.pb-reduce-motion *,
  html.pb-reduce-motion *::before,
  html.pb-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sb-tab {
    flex: 1; background: none; border: none; cursor: pointer;
    padding: 11px 0; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.22); transition: color 0.15s, background 0.15s;
    position: relative;
  }
  .sb-tab svg { width: 15px; height: 15px; }
  .sb-tab:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.03); }
  .sb-tab.active { color: rgba(255,255,255,0.88); }
  .sb-tab.active::after {
    content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
    height: 2px; background: rgba(255,255,255,0.35); border-radius: 2px 2px 0 0;
  }

  /* ══ SIDEBAR PANES ══ */
  #sb-pane-settings {
    display: none; flex-direction: column; flex: 1; overflow-y: auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
  }
  #sb-pane-settings.active { display: flex; }
  .sb-pane-inner { padding: 16px 14px; }

  /* card grid: 6 cols by default, 3 when deck is visible */
  #sb-top-row.search-active .card-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Copy badge ── */
  .deck-copy-badge {
    position: absolute; bottom: 3px;
    left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 1px;
    background: rgba(0,0,0,0.68); border-radius: 4px;
    padding: 1px 3px; pointer-events: auto;
    transition: opacity 0.15s; white-space: nowrap;
  }
  .card-thumb.in-deck:hover .deck-copy-badge { opacity: 1 !important; }
  .dcb-minus, .dcb-plus {
    width: 13px; text-align: center; cursor: pointer;
    font-size: 11px; line-height: 1; font-weight: 900;
    color: rgba(255,255,255,0.45);
    opacity: 0; transition: opacity 0.12s, color 0.12s;
  }
  .card-thumb.in-deck:hover .dcb-minus,
  .card-thumb.in-deck:hover .dcb-plus { opacity: 1; }
  .dcb-minus:hover { color: #ff7070 !important; }
  .dcb-plus:hover  { color: #70ffaa !important; }
  .dcb-plus.maxed  { color: rgba(255,255,255,0.12) !important; cursor: default; pointer-events: none; }
  .dcb-count { min-width: 10px; text-align: center;
    font-size: 9px; font-weight: 900; color: rgba(255,255,255,0.88); }
  .card-thumb.in-deck.drag-over { outline: 2px solid rgba(140,170,255,0.6); }

  /* ══ SIDEBAR (overlay: se desliza sobre el espacio vacío, NO desplaza el tablero) ══ */
  #sidebar {
    position: absolute; top: 0; right: 0; z-index: 8800;
    width: 650px; height: 100%;
    background: #111118;
    border-left: 1px solid rgba(255,255,255,0.07);
    box-shadow: -8px 0 32px rgba(0,0,0,0.6);
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;   /* capa propia de composición: el deslizamiento NO re-rasteriza el tablero */
  }
  #sidebar.open { transform: translateX(0); }
  /* Minimum content width so inner layout doesn't collapse */
  #sidebar > * { min-width: 650px; }

  /* ── SOLAPA / FLAP de la sidebar: pestañita vertical en el borde derecho.
       Cabalga el borde del panel (right:0 → 650px) y al hover asoma su texto. ── */
  #sidebar-toggle {
    position: absolute; top: 50%; right: 0; z-index: 8810;
    transform: translateY(-50%); transform-origin: right center;
    height: 66px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,20,28,0.82);
    border: 1px solid rgba(255,255,255,0.10); border-right: none;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 18px rgba(0,0,0,0.35);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    cursor: pointer; overflow: hidden;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1), background 0.15s, transform 0.18s cubic-bezier(0.34,1.3,0.64,1);
  }
  /* Hover: crece un poco y la flecha se desplaza ligeramente (sin texto) */
  #sidebar-toggle:hover { background: rgba(34,34,46,0.95); transform: translateY(-50%) scale(1.1); }
  #sidebar-toggle svg {
    width: 15px; height: 15px; flex: none;
    color: rgba(255,255,255,0.55); fill: none;
    transition: color 0.15s, transform 0.24s cubic-bezier(0.4,0,0.2,1);
  }
  #sidebar-toggle:hover svg { color: rgba(255,255,255,0.95); transform: translateX(-2px); }
  /* Panel abierto: la solapa cabalga al borde izquierdo del panel y la flecha gira */
  #app-shell.sb-open #sidebar-toggle { right: 650px; }
  #app-shell.sb-open #sidebar-toggle svg { transform: rotate(180deg); }
  #app-shell.sb-open #sidebar-toggle:hover svg { transform: rotate(180deg) translateX(-2px); }

  #new-game-btn {
    position: absolute; top: 0; left: 0; z-index: 20;
    width: 48px; height: 100%;
    background: transparent; border: none; border-radius: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
  }
  #new-game-btn::after {
    content: '';
    position: absolute; right: 0; top: 20%; bottom: 20%;
    width: 1px; background: rgba(255,255,255,0.12);
  }
  #new-game-btn:hover { background: rgba(255,255,255,0.05); }
  #new-game-btn svg {
    width: 16px; height: 16px; color: rgba(255,255,255,0.4);
    fill: none; transition: color 0.15s, transform 0.3s;
  }
  #new-game-btn:hover svg { color: rgba(255,255,255,0.85); }
  #new-game-btn:active svg { transform: rotate(-45deg); }

  /* Two-column top area */
  #sb-top-row {
    display: flex; flex: 1;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    min-height: 0; overflow: hidden;
  }
  .sb-col {
    display: flex; flex-direction: column;
    flex: 1; min-width: 0; overflow: hidden;
  }
  .sb-col-search { border-right: 1px solid rgba(255,255,255,0.06); }
  .sb-col-search {
    flex: 1; min-width: 0;
    transition: max-width 0.28s cubic-bezier(0.4,0,0.2,1),
                opacity 0.22s ease,
                flex 0.28s cubic-bezier(0.4,0,0.2,1);
    max-width: 0; flex: 0; opacity: 0; overflow: hidden; pointer-events: none;
  }
  .sb-col-search.search-visible {
    flex: 1; max-width: 50%; opacity: 1; pointer-events: auto;
  }
  .sb-col-deck {
    flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column;
    transition: max-width 0.28s cubic-bezier(0.4,0,0.2,1),
                flex 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  /* Deck full-width: 4 bigger columns */
  #sb-top-row:not(.search-active) .sb-col-deck .card-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  /* Search active: 3 smaller columns (same as before) */
  #sb-top-row.search-active .card-grid { grid-template-columns: repeat(3, 1fr); }

  /* Full-width deck: 2 rows × 3 buttons */
  #sb-top-row:not(.search-active) .deck-grid-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5px; padding: 8px 10px;
  }
  #sb-top-row:not(.search-active) .deck-btn {
    padding: 7px 0; min-height: 0; height: 100%;
  }
  #sb-top-row:not(.search-active) .deck-btn svg { width: 18px; height: 18px; }
  #sb-top-row:not(.search-active) .deck-btn {
    flex-direction: row; gap: 6px; justify-content: center;
    padding: 9px 6px;
  }
  #sb-top-row:not(.search-active) .deck-btn::after {
    content: attr(data-tip);
    position: static; transform: none;
    display: inline; font-size: 10px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: inherit; opacity: 0.65;
    white-space: nowrap;
    background: transparent; border: none; padding: 0;
    transition: opacity 0.15s;
  }
  #sb-top-row:not(.search-active) .deck-btn:hover::after { opacity: 1; }

  /* Search-active: compact single row as before */
  #sb-top-row.search-active .deck-grid-actions {
    display: flex; gap: 5px; padding: 6px 8px;
  }
  #sb-top-row.search-active .deck-btn {
    flex-direction: row; min-height: 36px; padding: 0;
  }
  #sb-top-row.search-active .deck-btn::after {
    display: none;
  }
  #sb-deck-toggle {
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 44px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07); border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    z-index: 10;
  }
  #sb-deck-toggle:hover { background: rgba(255,255,255,0.09); }
  #sb-deck-toggle svg { width: 9px; height: 9px; fill: rgba(255,255,255,0.35); transition: transform 0.28s; }
  #sidebar-body { position: relative; }
  .sb-col-inner {
    flex: 1; overflow-y: auto; min-height: 0;
    padding: 10px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
  }
  .sb-col-inner::-webkit-scrollbar { width: 3px; }
  .sb-col-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
  .sb-col-header {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border-bottom: none; flex-shrink: 0;
  }
  .sb-col-badge {
    font-size: 9px; font-weight: 700; padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4);
    margin-left: auto;
  }

  /* Card thumbnail grid */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 6px 0;
    transition: grid-template-columns 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .card-thumb {
    aspect-ratio: 63/88; border-radius: 6px;
    background-size: cover; background-position: center;
    background-color: #111120;
    cursor: pointer; position: relative;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.14s cubic-bezier(0.34,1.2,0.64,1), border-color 0.14s, box-shadow 0.14s;
    overflow: hidden;
  }
  .card-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3));
    opacity: 0; transition: opacity 0.14s; pointer-events: none;
    border-radius: inherit;
  }
  .card-thumb:hover {
    transform: scale(1.08) translateY(-2px);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 6px 18px rgba(0,0,0,0.55); z-index: 10;
  }
  .card-thumb:hover::after { opacity: 1; }
  .card-thumb.in-deck {
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
  }

  /* Deck column specifics */
  .deck-grid-actions {
    display: flex; gap: 6px; padding: 8px 10px 10px;
    flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.12);
  }

  /* Bottom sections (edit + settings) */
  #sb-bottom {
    flex: 0 0 auto; display: flex; flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  #sb-bottom .sb-section { border-bottom: none; border-top: 1px solid rgba(255,255,255,0.05); }
  #sb-sec-settings { margin-top: 0 !important; }


  /* Sidebar header (SaaS) */
  .sb-close:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.15); }

  /* ── SIDEBAR BODY (SaaS) ── */
  #sidebar-body {
    flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column;
  }
  #sidebar-body::-webkit-scrollbar { width: 3px; }
  #sidebar-body::-webkit-scrollbar-track { background: transparent; }
  #sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

  /* Sidebar sections (SaaS) */
  .sb-section { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .sb-section-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; cursor: pointer; user-select: none;
    transition: background 0.12s;
  }
  .sb-section-header:hover { background: rgba(255,255,255,0.025); }
  .sb-section-icon { font-size: 11px; width: 16px; text-align: center; opacity: 0.5; }
  .sb-section-label {
    font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.3);
    letter-spacing: 0.01em; flex: 1;
  }
  .sb-section-badge {
    font-size: 9px; font-weight: 700; padding: 2px 7px;
    border-radius: 20px; background: rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.165);
  }
  .sb-section-arrow {
    font-size: 9px; color: rgba(255,255,255,0.18);
    transition: transform 0.18s ease;
  }
  .sb-section.collapsed .sb-section-arrow { transform: rotate(-90deg); }
  .sb-section-body { padding: 10px 14px 14px; }
  .sb-section.collapsed .sb-section-body { display: none; }
  /* Settings section sticks to bottom */
  #sb-sec-settings { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: none; }

  /* Search results — max 6 visible, scroll internally */


  /* Shared field styles */
  .editor-field { display: flex; flex-direction: column; gap: 4px; }
  .editor-label {
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .editor-hint {
    font-size: 10px; color: rgba(255,255,255,0.25); line-height: 1.4;
  }
  .editor-input {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px; padding: 7px 10px; color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700;
    outline: none; transition: border-color 0.15s;
    width: 100%; box-sizing: border-box;
  }
  .editor-input:focus { border-color: rgba(255,255,255,0.35); }
  .editor-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 4px -14px; }

  /* ── CARD SEARCH ── */
  /* Search bar — identical to #cv-search-wrap in advanced search */
  #search-wrap {
    position: relative; display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid transparent;
    border-radius: 8px; padding: 8px 12px;
    margin-bottom: 8px;
    transition: border-color 0.15s, background 0.15s;
  }
  #search-wrap:hover { background: rgba(255,255,255,0.07); }
  #search-wrap:focus-within { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.07); }
  #search-input {
    flex: 1; background: none; border: none; outline: none;
    color: #f0f0f0; font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-appearance: none; appearance: none;
  }
  #search-input::placeholder { color: rgba(255,255,255,0.4); }
  #search-clear:hover { color: rgba(255,255,255,0.7) !important; }

  #search-results::-webkit-scrollbar { width: 4px; }
  #search-results::-webkit-scrollbar-track { background: transparent; }
  #search-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

  /* Filter pills */
  #search-filters {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 2px;
    align-items: flex-start;
  }
  /* Stage active — same purple as Cartas */
  .cv-chip[data-cv-stage].active {
    background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); color: #fff;
  }

  /* Multi-row single block — CSS Grid guarantees column alignment across rows */
  .sb-multirow-group {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; overflow: hidden;
    margin-bottom: 5px;
    display: grid;
  }
  .sb-multirow-group.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sb-multirow-group.cols-5 { grid-template-columns: repeat(5, 1fr); }
  /* Row dividers via nth-child — first N items are row 1 */
  .sb-multirow-group.cols-3 .cv-chip:nth-child(-n+3) {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .sb-multirow-group.cols-5 .cv-chip:nth-child(-n+5) {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  /* All chips inside: fill cell, centered, no own border-radius */
  .sb-multirow-group .cv-chip {
    border-radius: 0 !important;
    border-top: none; border-bottom: none; border-left: none;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    display: flex; align-items: center; justify-content: center;
    padding: 9px 10px; white-space: nowrap; font-size: 12px;
  }
  /* Last chip in each visual column: no right border */
  .sb-multirow-group.cols-3 .cv-chip:nth-child(3n)  { border-right: none !important; }
  .sb-multirow-group.cols-5 .cv-chip:nth-child(5n)  { border-right: none !important; }
  /* Energy icon chips: compact padding, centered orb */
  .sb-multirow-group .cv-chip.cv-el-icon { padding: 7px 4px; }
  .sb-multirow-group .cv-chip img {
    width: 22px; height: 22px; border-radius: 50%;
    display: block; flex-shrink: 0;
  }
  #search-status {
    font-size: 11px; color: rgba(255,255,255,0.3); text-align: center;
    padding: 8px 0; display: none;
  }
  .editor-actions { display: flex; gap: 8px; margin-top: 4px; }
  .editor-btn {
    flex: 1; padding: 7px 0; border-radius: 8px; border: none;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800;
    cursor: pointer; transition: all 0.15s; letter-spacing: 0.05em;
  }
  .editor-btn.confirm { background: rgba(255,255,255,0.12); color: #fff; }
  .editor-btn.confirm:hover { background: rgba(255,255,255,0.22); }
  .editor-btn.cancel  { background: transparent; color: rgba(255,255,255,0.3); }
  .editor-btn.cancel:hover  { color: rgba(255,255,255,0.7); }

  /* ── DECK PEEK FLIP ── */
  .slot.deck-slot { perspective: 600px; }
  .slot.deck-slot > span { display: none; }
  .slot.deck-slot > span { display: none; }

  .deck-inner {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: inherit;
  }
  .deck-inner.flipped { transform: rotateY(180deg); }

  .deck-face {
    position: absolute; inset: 0;
    border-radius: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-size: cover;
    background-position: center;
  }
  .deck-face.back  { /* default — card back image set via JS */ }
  .deck-face.front { transform: rotateY(180deg); }

  /* Pulse hint on deck slot with a card loaded but not yet revealed */
  @keyframes deckPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,220,80,0.0); }
    50%       { box-shadow: 0 0 0 5px rgba(255,220,80,0.35); }
  }
  .slot.deck-slot.has-card .deck-inner:not(.flipped) {
    animation: deckPulse 2.5s ease-in-out infinite;
  }


  /* ══ DECK BUILDER SECTION ══ */
  .deck-player-tabs {
    display: flex; gap: 5px; margin-bottom: 8px;
  }
  .deck-tab {
    flex: 1; padding: 6px 0; border-radius: 10px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
    cursor: pointer; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.28);
    transition: all 0.15s;
  }
  .deck-tab:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }
  .deck-tab.active {
    color: var(--tab-pc, #fff);
    background: color-mix(in srgb, var(--tab-pc, #fff) 12%, transparent);
    border-color: color-mix(in srgb, var(--tab-pc, #fff) 35%, transparent);
  }
  .deck-counter {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; font-size: 11px; color: rgba(255,255,255,0.35);
    font-weight: 700; letter-spacing: 0.05em;
  }
  .deck-counter span { color: rgba(255,255,255,0.7); }
  .deck-list {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 220px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
  }
  .deck-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 7px; border-radius: 6px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    cursor: default;
  }
  .deck-entry img { width: 26px; height: 36px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
  .deck-entry-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.75); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .deck-entry-type { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 10px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); flex-shrink: 0; }
  .deck-entry-remove { color: rgba(255,255,255,0.2); cursor: pointer; font-size: 14px; flex-shrink: 0; line-height: 1;
    transition: color 0.12s; padding: 0 2px; }
  .deck-entry-remove:hover { color: rgba(255,80,80,0.8); }
  .deck-add-hint {
    font-size: 10px; color: rgba(255,255,255,0.22); text-align: center;
    padding: 12px 0; font-style: italic;
  }
  .deck-actions {
    display: flex; gap: 6px; margin-top: 10px;
  }
  .deck-btn {
    flex: 1; padding: 8px 0; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.4); transition: background 0.13s, color 0.13s, border-color 0.13s;
    display: flex; align-items: center; justify-content: center;
    position: relative; min-height: 36px;
  }
  .deck-btn svg { width: 16px; height: 16px; display: block; }
  .deck-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.15); }
  .deck-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

  /* Pop-in for newly added deck cards — same as pill */
  .card-thumb.sb-pop-in { animation: sb-card-pop 0.28s ease-out both; }
  @keyframes sb-card-pop {
    0%   { opacity:0; filter:brightness(1.8) saturate(1.4); transform:scale(0.88); }
    40%  { filter:brightness(1.2); }
    100% { opacity:1; filter:brightness(1) saturate(1); transform:scale(1); }
  }
  /* Second copy pulse */
  .card-thumb.sb-pop-second { animation: sb-card-second 0.35s ease-out both; }
  @keyframes sb-card-second {
    0%   { filter:brightness(1); }
    35%  { filter:brightness(1.5) saturate(1.2); transform:scale(1.03); }
    100% { filter:brightness(1); transform:scale(1); }
  }
  /* Tooltip — 500ms delay */
  .deck-btn::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: rgba(14,14,22,0.97); color: rgba(255,255,255,0.88);
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; padding: 4px 9px; border-radius: 6px;
    pointer-events: none; opacity: 0;
    transition: opacity 0.15s 0.5s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .deck-btn:hover::after { opacity: 1; }

  
  /* ── Trainer use animation ── */

  /* ── Deck viewer overlay ── */
  /* When deck carousel is open, push pills and end-turn behind it */
  .board.deck-open #dmg-strip    { z-index: 8 !important; }
  .board.deck-open #btn-end-turn { z-index: 8 !important; }
  #deck-carousel {
    position: absolute; inset: 0; z-index: 10;
    pointer-events: none;
  }
  /* Backdrop: captures click-outside */
  #deck-carousel-backdrop {
    position: absolute; inset: 0; pointer-events: auto;
    cursor: default;
  }
  /* X — minimal, no background */
  #deck-carousel-close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; padding: 4px 6px;
    color: rgba(255,255,255,0.3); font-size: 18px; line-height: 1;
    cursor: pointer; pointer-events: auto; z-index: 3;
    transition: color 0.12s;
  }
  #deck-carousel-close:hover { color: rgba(255,255,255,0.8); }
  /* Flechas prev/next (trasladadas del hero de Inicio). Posición por JS (left/top). */
  .deck-carousel-arrow {
    position: absolute; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%; z-index: 70;
    display: grid; place-items: center; cursor: pointer; pointer-events: auto;
    background: rgba(20,20,28,0.72); color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: 20px; line-height: 1;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }
  .deck-carousel-arrow:hover { background: rgba(40,40,54,0.92); color: #fff; }
  .deck-carousel-arrow:active { transform: translateY(-50%) scale(0.92); }
  /* Strip wrapper: full board, overflow:visible — no clipping ever */
  #deck-carousel-strip {
    position: absolute; left: 0; right: 0;
    height: 280px;
    overflow: visible;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-50%) scale(0);   /* starts as a point at deck slot (origin set by JS) */
    transform-origin: center center;
    transition: opacity 0.30s ease, transform 0.42s cubic-bezier(0.34,1.45,0.64,1); /* spring overshoot = card pop */
  }
  #deck-carousel.open #deck-carousel-strip {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  #deck-carousel.closing #deck-carousel-strip {
    opacity: 0 !important;
    transform: translateY(-50%) scale(0) !important;   /* collapse back to deck slot point */
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.55,0,1,1) !important; /* fast ease-in */
  }

  /* Cards: absolutely positioned by JS */
  .deck-thumb {
    position: absolute; top: 50%; margin-top: -113px;
    width: 162px; height: 226px; border-radius: 11px;
    background-size: cover; background-position: center;
    box-shadow: 0 8px 28px rgba(0,0,0,0.7);
    cursor: grab; user-select: none;
    opacity: 0;
    will-change: transform, z-index;
  }
  .deck-thumb.revealed { opacity: 1; }
  .deck-thumb:active { cursor: grabbing; }
  .deck-thumb-num {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.72); color: rgba(255,255,255,0.55);
    font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
    padding: 2px 7px; border-radius: 5px; pointer-events: none;
    white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .deck-thumb-num.next { background: rgba(77,171,255,0.9); color: #fff; }
  /* Position badge */
  .deck-thumb-num {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.72); color: rgba(255,255,255,0.55);
    font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
    padding: 2px 7px; border-radius: 5px; pointer-events: none;
    white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .deck-thumb-num.next { background: rgba(77,171,255,0.9); color: #fff; }
  /* Drag ghost */
  #deck-drag-ghost {
    position: fixed; pointer-events: none; z-index: 9300;
    width: 84px; height: 118px; border-radius: 8px;
    background-size: cover; background-position: center;
    box-shadow: 0 8px 28px rgba(0,0,0,0.7);
    transform: translate(-50%,-55%) scale(1.05) rotate(2deg);
    display: none;
  }
  .hand.deck-drag-over .card { box-shadow: 0 0 0 2px rgba(77,171,255,0.7); }
  }
  .deck-thumb.flipping {
    animation: deckFlip var(--flip-dur, 0.5s) cubic-bezier(0.25,1,0.4,1) both;
  }
  #deck-empty { color: rgba(255,255,255,0.25); font-size:12px; padding:20px 18px; }

/* ── Deck sub-tabs ── */
  .deck-subtabs {
    display: flex; flex-shrink: 0; padding: 0 10px 8px;
    gap: 0;
  }
  /* Subtabs as a single cv-chip-group segmented control */
  .deck-subtabs-inner {
    display: flex; flex: 1;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;
  }
  .deck-subtab {
    flex: 1; padding: 7px 0; background: rgba(255,255,255,0.03); border: none;
    border-right: 1px solid rgba(255,255,255,0.08); cursor: pointer;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    color: rgba(255,255,255,0.35); font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color 0.13s, background 0.13s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .deck-subtab:last-child { border-right: none; }
  .deck-subtab:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); }
  .deck-subtab.active { background: rgba(255,255,255,0.12); color: #fff; }
  .deck-subtab svg { width: 13px; height: 13px; opacity: 0.65; }

  /* ── Crear / Mis mazos panels ── */
  .deck-panel {
    display: flex; flex-direction: column; flex: 1; overflow: hidden;
    max-height: 0; opacity: 0;
    transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
    pointer-events: none;
  }
  .deck-panel.active {
    max-height: 2000px; opacity: 1; pointer-events: auto; flex: 1;
  }

  /* ── Saved deck cards ── */
  .saved-deck-list {
    flex: 1; overflow-y: auto; padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    align-content: start;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
  }
  /* Full-width deck (búsqueda cerrada): dos columnas INDEPENDIENTES lado a lado.
     Cada .sdl-col (la crea renderDeckLibrary) es su propia pila vertical, así
     expandir una tarjeta en hover solo empuja las de SU columna (sin hueco en la
     otra) y la lista entera hace SCROLL vertical cuando no caben (sin límite). */
  .saved-deck-list.sdl-2col { flex-direction: row; align-items: flex-start; }
  .saved-deck-list.sdl-2col .sdl-col {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .saved-deck-item {
    display: flex; flex-direction: column;
    border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    cursor: default; overflow: hidden;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s;
  }
  .saved-deck-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }

  /* Thumb fills full width of item */
  .saved-deck-body {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
  }

  .saved-deck-thumb {
    width: 56px; height: 78px; flex-shrink: 0;
    position: relative; border-radius: 6px;
    cursor: pointer;
  }
  .saved-deck-thumb:hover .sdt-edit-hint { opacity: 1; }
  .sdt-edit-hint {
    position: absolute; bottom: 3px; right: 3px; z-index: 5;
    width: 18px; height: 18px; border-radius: 4px;
    background: rgba(0,0,0,0.72);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s; pointer-events: none;
  }
  .sdt-edit-hint svg { width: 10px; height: 10px; color: rgba(255,255,255,0.75); }
  .sdt-back {
    position: absolute; inset: 0;
    border-radius: 6px;
    background-size: cover; background-position: center;
  }
  .sdt-back-3 { transform: translateY(6px);  opacity: 0.45; z-index: 0; }
  .sdt-back-2 { transform: translateY(4px);  opacity: 0.65; z-index: 1; }
  .sdt-back-1 { transform: translateY(2px);  opacity: 0.82; z-index: 2; }
  .sdt-front {
    position: absolute; inset: 0; z-index: 3;
    border-radius: 6px;
    background-size: cover; background-position: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.25);
  }

  /* ── Thumbnail fan picker (fixed, spawns from thumb) ── */
  #sdt-fan-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: none;
  }
  #sdt-fan-overlay.open { display: block; }
  .sdt-fan-card {
    position: fixed;
    width: 72px; height: 100px;
    border-radius: 6px;
    background-size: cover; background-position: center;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
    transform-origin: center bottom;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .sdt-fan-card:hover {
    border-color: rgba(255,255,255,0.7) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.85), 0 0 14px rgba(200,220,255,0.3) !important;
    z-index: 9010 !important;
  }
  .sdt-fan-card.fan-selected { border-color: rgba(140,180,255,0.85); }

  .saved-deck-name {
    flex: 1; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.88);
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: text; min-width: 0; outline: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .saved-deck-name:focus {
    background: rgba(255,255,255,0.08); border-radius: 4px; padding: 2px 6px;
    white-space: normal; overflow: visible;
  }

  /* Hover-reveal action bar at bottom */
  .saved-deck-actions {
    display: flex; overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1);
    border-top: 1px solid transparent;
  }
  .saved-deck-item:hover .saved-deck-actions {
    max-height: 40px;
    border-top-color: rgba(255,255,255,0.07);
  }
  .saved-deck-load {
    flex: 1; height: 38px; border: none; border-right: 1px solid rgba(255,255,255,0.07);
    background: rgba(40,180,80,0.08); color: rgba(80,220,120,0.6);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .saved-deck-load:hover { background: rgba(40,180,80,0.22); color: rgba(80,220,120,1); }
  .saved-deck-del {
    flex: 1; height: 38px; border: none;
    background: rgba(255,60,60,0.07); color: rgba(255,100,100,0.55);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .saved-deck-del:hover { background: rgba(255,60,60,0.22); color: rgba(255,100,100,1); }
  /* Estado armado: primer clic pide confirmación, segundo clic borra */
  .saved-deck-del.confirm {
    background: rgba(255,60,60,0.85); color: #fff;
  }
  .saved-deck-del.confirm::after {
    content: '¿Borrar?';
    font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800;
    margin-left: 5px; letter-spacing: 0.02em;
  }
  .saved-deck-del.confirm:hover { background: rgba(255,60,60,1); }

  .saved-deck-empty {
    text-align: center; color: rgba(255,255,255,0.2);
    font-size: 11px; padding: 32px 8px; font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .deck-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .deck-btn.deck-btn-primary {
    background: rgba(255,255,255,0.099); border-color: rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.95);
  }
  .deck-btn.deck-btn-primary:hover { background: rgba(255,255,255,0.154); }
  .deck-btn:disabled { opacity: 0.3; pointer-events: none; }
  #deck-random-btn.working { animation: btnPulse 0.6s ease-in-out infinite alternate; }
  @keyframes btnPulse { from { opacity:0.5; } to { opacity:1; } }

  /* Temp draw controls floating over board */
  #draw-controls {
    position: fixed; bottom: 70px; right: 12px; z-index: 1500;
    display: flex; flex-direction: column; gap: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .draw-btn {
    padding: 7px 14px; border-radius: 8px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px);
    background: rgba(20,20,30,0.85); color: rgba(255,255,255,0.75);
    transition: all 0.15s; white-space: nowrap;
  }
  .draw-btn:hover { background: rgba(40,40,60,0.95); color: #fff; }
  .draw-btn:disabled { opacity: 0.3; pointer-events: none; }
  .draw-btn.p1-color { border-color: rgba(77,171,255,0.4); }
  .draw-btn.p2-color { border-color: rgba(255,107,107,0.4); }

  /* Card fly animation */
  .fly-card {
    position: fixed; pointer-events: none; z-index: 9000;
    border-radius: 7px; background-size: cover; background-position: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
    backface-visibility: hidden;
  }
  /* ══ CARD HOVER PREVIEW — tooltip near cursor, inside sidebar ══ */
  #card-preview {
    display: none; position: fixed; z-index: 3500;
    pointer-events: none;
    flex-direction: column; align-items: center; gap: 5px;
    filter: drop-shadow(0 12px 32px rgba(0,0,0,0.8));
    opacity: 0; transition: opacity 0.12s ease;
  }
  #card-preview.visible { display: flex; }
  #card-preview.visible.faded-in { opacity: 1; }
  #card-preview-img {
    width: 180px; aspect-ratio: 63/88;
    border-radius: 7px; background-size: cover; background-position: center;
    background-color: #1a2a3a;
    outline: 1px solid rgba(255,255,255,0.1);
  }
  #card-preview-info {
    text-align: center; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
    color: rgba(255,255,255,0.55); line-height: 1.5;
    background: rgba(15,15,25,0.85); backdrop-filter: blur(6px);
    padding: 4px 10px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.07);
  }
  #card-preview-info .preview-exp { color: rgba(255,255,255,0.22); font-size: 9px; display: block; }

  #zoom-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0);
    cursor: pointer;
    transition: background 0.45s ease;
  }
  #zoom-overlay.visible { background: rgba(0,0,0,0.78); }
  #zoom-wrapper {
    position: absolute;
    width: 390px; height: 543px;
    position: relative;
    will-change: transform;
    perspective: 900px;
  }

  /* card: receives 3D tilt from lerp loop */
  #zoom-card {
    width: 100%; height: 100%;
    border-radius: 20px;
    position: relative;
    transform-style: preserve-3d;
    cursor: default;
    will-change: transform;
    touch-action: none;   /* táctil: arrastrar inclina la carta (sin scroll) */
    /* holo engine vars set by applyHolo: --tiltx/--tilty in -1..1, --o fade 0..1.
       All the LOOK params are :root vars (see the HOLO block) so the tuner can
       adjust them live. */
    --tiltx: 0; --tilty: 0; --o: 0;
  }
  #zoom-card .overlay { display: none !important; }

  /* flipper: rotates around Y axis for the flip */
  #zoom-flipper {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    border-radius: inherit;
    will-change: transform;
  }

  #zoom-flipper-front,
  #zoom-flipper-back {
    position: absolute; inset: 0;
    border-radius: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-size: cover;
    background-position: center;
    /* La sombra NO va aquí: las caras rotan 360° en el flip y su box-shadow
       oscilaba creando una franja negra fea en los lados. La sombra de reposo
       la aplica el bucle de tilt sobre #zoom-card (que solo se inclina, no gira). */
  }
  /* front = card image, visible when flipper at 0° */
  #zoom-flipper-front { transform: rotateY(0deg); }
  /* back  = card back, visible when flipper at 180° */
  #zoom-flipper-back  { transform: rotateY(180deg); }

  /* ════════ HOLO (zoom) ════════
     Selectable STYLES via data-holo on the card front:
       rainbow → smooth multicolour spectrum (RGB look, oversized + sliding)
       classic → the ORIGINAL holo (diagonal rainbow bands + radial mask)
       matte   → no foil (just the glare)
     applyHolo feeds --tiltx/--tilty/--o; per-card strength via --holo-i (set
     by setHoloFor from the rarity→{style,intensity} config). The rainbow look
     params are :root vars, tuned live by holo_tuner.html. Selectors accept the
     real #ids (board zoom) AND .holo-* classes, so the tuner can render a
     preview per rarity from this same source CSS (no duplication). */
  :root {
    --holo-angle: 112deg;   /* rainbow direction */
    --holo-scale: 200%;     /* gradient zoom (lower = more colours at once) */
    --holo-slide: 20%;      /* how far the rainbow travels with the tilt */
    --holo-sat: 1.35;       /* colour saturation */
    --holo-bright: 1;       /* brightness */
    --holo-glare: 0.45;     /* white spotlight strength */
    --holo-blend: overlay;  /* blend mode */
    /* classic (original) style params */
    --holoc-angle: 88deg;
    --holoc-scale: 100%;    /* band width */
    --holoc-slide: 40px;    /* band travel with tilt */
    --holoc-sat: 1;
    --holoc-bright: 0.72;
    --holoc-contrast: 1.45;
    --holoc-hue: 35deg;     /* hue shift with tilt */
    --holoc-mask: 62%;      /* radial mask size */
    --holoc-blend: color-dodge;
  }
  #zoom-glare, .holo-glare {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 3;
    background-image: radial-gradient(circle at calc(50% + var(--tiltx) * 50%) calc(50% + var(--tilty) * 50%),
      rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 32%, transparent 58%);
    mix-blend-mode: overlay;
    opacity: calc(var(--o) * var(--holo-glare));
    transition: opacity 0.4s ease;
  }
  #zoom-shine, .holo-shine {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  /* ── RAINBOW style ── smooth continuous spectrum, no hard edges */
  [data-holo="rainbow"] #zoom-shine, [data-holo="rainbow"] .holo-shine {
    background-image: linear-gradient(var(--holo-angle),
      hsl(0,95%,62%) 0%,   hsl(46,95%,62%) 5%,  hsl(98,85%,59%) 10%, hsl(165,90%,59%) 15%,
      hsl(220,95%,64%) 20%, hsl(285,90%,64%) 25%, hsl(330,95%,62%) 30%, hsl(0,95%,62%) 35%,
      hsl(46,95%,62%) 40%, hsl(98,85%,59%) 45%, hsl(165,90%,59%) 50%, hsl(220,95%,64%) 55%,
      hsl(285,90%,64%) 60%, hsl(330,95%,62%) 65%, hsl(0,95%,62%) 70%, hsl(46,95%,62%) 75%,
      hsl(98,85%,59%) 80%, hsl(165,90%,59%) 85%, hsl(220,95%,64%) 90%, hsl(285,90%,64%) 95%,
      hsl(330,95%,62%) 100%);
    background-size: var(--holo-scale) var(--holo-scale);
    background-position: calc(50% + var(--tiltx) * var(--holo-slide)) calc(50% + var(--tilty) * var(--holo-slide));
    mix-blend-mode: var(--holo-blend);
    filter: saturate(var(--holo-sat)) brightness(var(--holo-bright));
    opacity: calc(var(--o) * var(--holo-i, 0));
  }
  /* ── CLASSIC style ── the original holo (diagonal bands + radial mask) */
  [data-holo="classic"] #zoom-shine, [data-holo="classic"] .holo-shine {
    background-image: repeating-linear-gradient(var(--holoc-angle),
      hsla(45,85%,62%,0.50) 0px,  hsla(335,75%,58%,0.45) 14px, hsla(175,80%,50%,0.48) 28px,
      hsla(210,80%,55%,0.50) 42px, hsla(280,70%,55%,0.45) 56px, hsla(45,85%,62%,0.50) 72px);
    background-size: var(--holoc-scale) var(--holoc-scale);
    background-position: calc(var(--tiltx) * var(--holoc-slide)) 0;
    -webkit-mask-image: radial-gradient(ellipse var(--holoc-mask) calc(var(--holoc-mask) * 0.84) at 50% 50%, #000 0%, rgba(0,0,0,0.18) 50%, transparent 85%);
    mask-image: radial-gradient(ellipse var(--holoc-mask) calc(var(--holoc-mask) * 0.84) at 50% 50%, #000 0%, rgba(0,0,0,0.18) 50%, transparent 85%);
    mix-blend-mode: var(--holoc-blend);
    filter: saturate(var(--holoc-sat)) brightness(var(--holoc-bright)) contrast(var(--holoc-contrast)) hue-rotate(calc(var(--tiltx) * var(--holoc-hue)));
    opacity: calc(var(--o) * var(--holo-i, 0));
  }
  /* matte → no shine rule matches → only the glare shows */


  /* ══ CARD EDITOR POPOVER — compact redesign ══ */
  #card-editor-popover {
    position: fixed; z-index: 4000;
    width: 224px;
    /* liquid glass (mismo cristal que el registro / controles del tablero) */
    background: linear-gradient(180deg, rgba(48,48,64,0.34), rgba(16,16,26,0.52));
    -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    pointer-events: auto;
    opacity: 0; transform: translateY(6px) scale(0.97);
    transition: opacity 0.15s ease, transform 0.15s ease;
    display: none;
    overflow: hidden;
  }
  #card-editor-popover::before {   /* brillo glossy superior */
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 26%);
  }
  #card-editor-popover > * { position: relative; z-index: 1; }
  #card-editor-popover.visible   { display: block; }
  #card-editor-popover.visible.shown { opacity: 1; transform: translateY(0) scale(1); }

  #cep-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px 6px;
  }
  #cep-title {
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,0.25);
  }
  #cep-close {
    background: none; border: none; color: rgba(255,255,255,0.2);
    font-size: 11px; cursor: pointer; padding: 0; line-height: 1;
    transition: color 0.12s;
  }
  #cep-close:hover { color: rgba(255,255,255,0.7); }

  #cep-body { padding: 0 10px 10px; }
  #cep-no-card {
    font-size: 11px; color: rgba(255,255,255,0.2); line-height: 1.5; padding: 4px 0 6px;
  }
  #cep-fields { display: none; flex-direction: column; gap: 6px; }

  /* Compact label+input rows */
  .cep-row {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px; padding: 5px 8px;
  }
  .cep-lbl {
    font-size: 9px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; color: rgba(255,255,255,0.28);
    min-width: 42px; flex-shrink: 0;
  }
  .cep-inp {
    flex: 1; background: none; border: none; outline: none;
    color: #fff; font-family: system-ui, sans-serif;
    font-size: 13px; font-weight: 600; padding: 0;
    min-width: 0;
  }
  .cep-inp::placeholder { color: rgba(255,255,255,0.15); font-weight: 400; }

  /* Botones de ATAQUE (modo Normal, solo el Activo) */
  #cep-attacks { display: flex; flex-direction: column; gap: 5px; }
  .cep-attack {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
    color: #fff; font-family: system-ui, sans-serif; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
  }
  .cep-attack:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.2); }
  .cep-attack:active { transform: scale(0.98); }
  .cep-atk-cost { display: flex; gap: 2px; flex-shrink: 0; }
  .cep-atk-orb {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.4);
  }
  .cep-orb-fire{background:#ee8130}.cep-orb-water{background:#6390f0}.cep-orb-grass{background:#7ac74c}
  .cep-orb-lightning{background:#f7d02c}.cep-orb-psychic{background:#f95587}.cep-orb-fighting{background:#c22e28}
  .cep-orb-darkness{background:#5a5366}.cep-orb-metal{background:#b7b7ce}.cep-orb-colorless{background:#d8d4cc}
  .cep-atk-name { flex: 1; font-size: 12.5px; font-weight: 600; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cep-atk-dmg { font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; }

  /* Habilidad activada (Tanda C.3) */
  #cep-abilities { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
  .cep-ability {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; border-radius: 8px;
    background: rgba(150,120,255,0.12); border: 1px solid rgba(150,120,255,0.28);
    color: #fff; font-family: system-ui, sans-serif; cursor: pointer; width: 100%;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
  }
  .cep-ability:hover { background: rgba(150,120,255,0.20); border-color: rgba(150,120,255,0.4); }
  .cep-ability:active { transform: scale(0.98); }
  .cep-ab-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #cdbcff; background: rgba(150,120,255,0.22); padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
  .cep-ab-name { flex: 1; font-size: 12.5px; font-weight: 700; text-align: left; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Condition row — chips REDONDOS con el icono PNG real (tamaño de los orbes de energía).
     Apagado = atenuado/gris; activo = a todo color + anillo. La etiqueta va arriba. */
  .cep-cond-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .cep-cond-btns { display: flex; gap: 8px; justify-content: space-between; }
  .cep-cond {
    width: 32px; height: 32px; flex: 0 0 auto; padding: 0;
    border-radius: 50%; border: none; background: none; cursor: pointer;
    color: rgba(255,255,255,0.5); font: 700 13px/1 system-ui, sans-serif;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.4; filter: grayscale(0.7);
    transition: opacity 0.13s, filter 0.13s, transform 0.1s, box-shadow 0.13s;
  }
  .cep-cond img { width: 100%; height: 100%; display: block; border-radius: 50%; }
  .cep-cond:hover { opacity: 0.8; filter: grayscale(0.15); }
  .cep-cond:active { transform: scale(0.9); }
  .cep-cond.active {
    opacity: 1; filter: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 2px 7px rgba(0,0,0,0.45);
  }

  /* Lista de efectos activos de la carta (icono + descripción) */
  #cep-fxlist { display: flex; flex-direction: column; gap: 5px; }
  .cep-fx-row {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px; padding: 6px 8px;
  }
  .cep-fx-row .cond-badge { flex-shrink: 0; }
  .cep-fx-txt { min-width: 0; }
  .cep-fx-name { font: 700 11.5px/1.1 system-ui, sans-serif; color: #fff; }
  .cep-fx-desc { font: 500 10.5px/1.25 system-ui, sans-serif; color: rgba(255,255,255,0.55); margin-top: 2px; }

  /* Apply button */
  .cep-apply {
    width: 100%; padding: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px; color: rgba(255,255,255,0.6);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; transition: background 0.13s, color 0.13s;
  }
  .cep-apply:hover { background: rgba(255,255,255,0.12); color: #fff; }

  /* Action pills grid */
  #cep-actions-grid {
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 6px;
  }
  .cep-pill {
    width: 100%; padding: 6px 8px;
    border-radius: 7px; border: 1px solid transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700;
    cursor: pointer; text-align: left;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
  }
  .cep-pill-energy {
    background: rgba(255,200,40,0.08); color: rgba(255,200,40,0.8);
    border-color: rgba(255,200,40,0.18);
  }
  .cep-pill-energy:hover { background: rgba(255,200,40,0.18); color: rgba(255,215,80,1); }
  .cep-pill-retreat {
    background: rgba(120,220,160,0.08); color: rgba(140,230,180,0.85);
    border-color: rgba(120,220,160,0.18);
  }
  .cep-pill-retreat:hover { background: rgba(120,220,160,0.18); color: rgba(170,245,205,1); }
  .cep-pill-bounce {
    background: rgba(77,171,255,0.08); color: rgba(140,210,255,0.85);
    border-color: rgba(77,171,255,0.18);
  }
  .cep-pill-bounce:hover { background: rgba(77,171,255,0.18); color: rgba(180,225,255,1); }
  .cep-pill-shuffle {
    background: rgba(160,130,255,0.08); color: rgba(195,170,255,0.85);
    border-color: rgba(160,130,255,0.18);
  }
  .cep-pill-shuffle:hover { background: rgba(160,130,255,0.18); color: rgba(215,200,255,1); }
    background: rgba(255,200,40,0.10); color: rgba(255,200,40,0.85);
    border: 1px solid rgba(255,200,40,0.28); border-radius: 6px;
    padding: 6px 10px; font-size: 11px; cursor: pointer; width: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
    transition: background 0.15s, color 0.15s;
    text-align: center;
  }
  .cep-btn-transfer:hover { background: rgba(255,200,40,0.2); color: rgba(255,200,40,1); } color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
  .cep-btn-apply:hover { background: rgba(255,255,255,0.14); color: #fff; }

  /* ══════════════════════════════════════════════════════════════════
     BARRA DE ACCIÓN (modo Normal) — sube desde abajo, estilo Cartas.
     Atacar / habilidad / retirada. Editor manual = solo sandbox (aparte).
     ══════════════════════════════════════════════════════════════════ */
  #board-action-backdrop {
    position: fixed; inset: 0; z-index: 8400;
    background: rgba(6,7,12,0.42);
    backdrop-filter: blur(1.5px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
  }
  #board-action-backdrop.show { opacity: 1; pointer-events: auto; }

  #board-action-bar {
    position: fixed; z-index: 8500;
    width: max-content; min-width: 208px; max-width: min(340px, calc(100vw - 24px));
    /* liquid glass (mismo cristal que el registro) */
    background: linear-gradient(180deg, rgba(48,48,64,0.34), rgba(16,16,26,0.50));
    -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: 11px 11px 12px;
    display: none; flex-direction: column; align-items: stretch; gap: 7px;
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.22s ease;
  }
  #board-action-bar::before {   /* brillo glossy superior */
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0) 24%);
  }
  #board-action-bar > * { position: relative; z-index: 1; }
  /* móvil: centrado abajo-medio (la posición desktop la fija el JS en línea, anclada a la carta) */
  #board-action-bar.bab-mobile {
    left: 50%; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(140%);
  }
  #board-action-bar.visible { display: flex; }
  #board-action-bar.visible.shown { transform: translateX(-50%) translateY(0); opacity: 1; }

  #bab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
  #bab-name {
    font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  #bab-close {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 8px; font-size: 12px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.14s, color 0.14s;
  }
  #bab-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

  /* tira de estados/efectos (solo lectura) */
  /* estados/efectos activos: filas con icono + nombre + descripción (qué hacen) */
  #bab-fx { display: flex; flex-direction: column; gap: 6px; }
  #bab-fx .cep-fx-row { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
  #bab-fx .cep-fx-name { font-size: 12.5px; }
  #bab-fx .cep-fx-desc { font-size: 11px; color: rgba(255,255,255,0.62); }

  /* habilidad (encima de los ataques) — acento ROJO */
  #bab-ability { display: flex; flex-direction: column; gap: 7px; }
  .bab-ability {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,90,90,0.13); border: 1px solid rgba(255,90,90,0.30);
    border-radius: 12px; padding: 11px 13px; cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.08s;
  }
  .bab-ability:hover { background: rgba(255,90,90,0.22); border-color: rgba(255,90,90,0.46); }
  .bab-ability:active { transform: scale(0.985); }
  .bab-ab-tag {
    font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,180,180,0.92); background: rgba(255,90,90,0.18);
    padding: 3px 7px; border-radius: 6px; flex-shrink: 0;
  }
  .bab-ab-name { flex: 1; font-size: 14px; font-weight: 700; color: #fff; text-align: left;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ataques */
  #bab-attacks { display: flex; flex-direction: column; gap: 7px; }
  .bab-attack {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px; padding: 11px 13px; cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.08s;
  }
  /* Calculadora de daño: daño previsto debajo del ataque (número o rango mín–máx) */
  .bab-atk-pred { flex-basis: 100%; text-align: right; font-size: 12px; font-weight: 800;
    color: rgba(120,230,150,0.92); letter-spacing: -0.01em; margin-top: -3px; }
  .bab-attack:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
  .bab-attack:active { transform: scale(0.985); }
  .bab-attack-recall { border-style: dashed; }
  .bab-atk-cost { display: flex; gap: 3px; flex-shrink: 0; }
  .bab-atk-name { flex: 1; font-size: 14.5px; font-weight: 700; color: #fff; text-align: left;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bab-atk-dmg { font-size: 19px; font-weight: 900; color: #fff; flex-shrink: 0; letter-spacing: -0.02em; }

  /* orbe de coste = ICONO REAL de energía. lleno = tienes esa energía / gris = te falta */
  .bab-orb {
    width: 17px; height: 17px; border-radius: 50%; display: inline-block; flex-shrink: 0;
    background-size: cover; background-position: center;
  }
  .bab-orb-off { filter: grayscale(1) brightness(0.62); opacity: 0.42; }

  /* retirada (abajo) */
  #bab-retreat { display: flex; }
  .bab-retreat {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px; padding: 10px 13px; cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.08s;
  }
  .bab-retreat:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
  .bab-retreat:active { transform: scale(0.985); }
  .bab-rt-lbl { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.82); }
  .bab-rt-cost { display: flex; gap: 3px; }

  /* estado no usable (energía insuficiente / habilidad gastada / no puede) */
  .bab-attack.bab-off, .bab-ability.bab-off, .bab-retreat.bab-off { opacity: 0.45; }
  .bab-ability.bab-off { pointer-events: none; }

  /* ── DECK STACK VISUAL ── */
  .deck-stack-bg {
    position: absolute; border-radius: inherit;
    background-size: cover; background-position: center;
    backface-visibility: hidden;
  }
  .deck-stack-1 { inset: 0; transform: translate(0, -3px); opacity: 0.55; z-index: 0; }
  .deck-stack-2 { inset: 0; transform: translate(0, -6px); opacity: 0.35; z-index: -1; }
  .deck-stack-3 { inset: 0; transform: translate(0, -9px); opacity: 0.2;  z-index: -2; }
  .deck-slot-p1 .deck-stack-1 { transform: translate(0, 3px); }
  .deck-slot-p1 .deck-stack-2 { transform: translate(0, 6px); }
  .deck-slot-p1 .deck-stack-3 { transform: translate(0, 9px); }
  .slot.deck-slot { overflow: visible; }
  .deck-inner { position: relative; z-index: 1; }
  .hand.drag-over-hand {
    background: rgba(255,255,255,0.06) !important;
    outline: 1.5px dashed rgba(255,255,255,0.25);
  }

  /* ── DISCARD PILE ── */
  .discard-pile {
    cursor: pointer; position: relative; overflow: visible;
  }
  .discard-pile .discard-stack-top {
    position: absolute; inset: 0; border-radius: inherit;
    background-size: cover; background-position: center;
    display: none;
    opacity: 0.55;
  }
  .discard-pile.has-cards .discard-stack-top { display: block; }
  .discard-pile .discard-label {
    position: absolute; bottom: 6px; left: 0; right: 0;
    text-align: center; font-size: 9px; font-weight: 600;
    color: rgba(255,255,255,0.35); letter-spacing: 0.08em; text-transform: uppercase;
    pointer-events: none;
  }
  .discard-pile.has-cards .discard-label { display: none; }
  .discard-pile .discard-count, .deck-count-badge {
    position: absolute; top: 4px; right: 4px; z-index: 10;
    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85); font-size: 10px; font-weight: 700;
    border-radius: 4px; padding: 1px 5px; pointer-events: none;
  }
  /* Deck badge always visible */
  .deck-count-badge {
    display: block !important;
  }
  /* Contador del mazo de J1 → esquina IZQUIERDA (hacia el centro), simétrico con el de J2
     (que ya cae hacia el centro por su posición). En TODOS los anchos (móvil = escritorio). */
  #zone-p1 .deck-slot .deck-count-badge { left: 4px; right: auto; }
  .discard-pile:hover::after {
    content: '';
    position: absolute; inset: -2px; border-radius: inherit;
    border: 1.5px solid rgba(255,255,255,0.2);
  }

  /* ── DISCARD OVERLAY ── */
  #discard-overlay {
    position: fixed; inset: 0; z-index: 2500;
    pointer-events: none;
    display: none;
  }
  #discard-overlay.open { display: block; }
  #discard-panel {
    position: absolute;
    /* left/right/top/height set by JS — bounded to actual board slots */
    background: rgba(8,8,14,0.38); backdrop-filter: blur(18px) saturate(0.7);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
    pointer-events: auto;
    /* fade left/right edges — gradient terminates at solid 15% in from each side
       so text/buttons sit in the fully-opaque center region */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    /* slide from right → left on open; continues left on close */
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  }
  #discard-overlay.open #discard-panel {
    opacity: 1;
    transform: translateX(0px);
  }
  /* closing: JS pins inline style then transitions out leftward */
  #discard-panel.closing {
    opacity: 0 !important;
    transform: translateX(-40px) !important;
  }

  /* ── Evolution glow ── */
  @keyframes evoGlow {
    0%   { box-shadow: 0 0 0   0   rgba(140,200,255,0);   }
    40%  { box-shadow: 0 0 24px 12px rgba(140,200,255,0.55); }
    100% { box-shadow: 0 0 0   0   rgba(140,200,255,0);   }
  }
  .evo-glow { animation: evoGlow 0.55s ease forwards; }

  /* ── Evolution badge ── */
  .evo-count-badge {
    position: absolute; bottom: 4px; left: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(99,140,255,0.85); color: #fff;
    font-size: 9px; font-weight: 900; line-height: 16px;
    text-align: center; pointer-events: none; z-index: 5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }

  /* ── Tool widget (attached to pokémon) ── */
  .tool-widget {
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 28px;
    border-radius: 4px;
    background-size: 140%;
    background-position: center 25%;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    border: 3px solid #ffffff;
    cursor: grab;
    z-index: 4;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .tool-widget:hover {
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 8px rgba(140,180,255,0.35);
  }

  /* ── Zoom carousel (pre-evo navigation) ── */
  #zoom-evo-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  #zoom-evo-nav.visible { display: flex; }
  .zoom-evo-side {
    position: absolute;
    left: -220px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px; height: 252px;
    border-radius: 12px;
    background-size: cover; background-position: center;
    opacity: 0.6; cursor: pointer;
    box-shadow: 0 6px 28px rgba(0,0,0,0.65);
    transition: opacity 0.2s, transform 0.2s;
    border: 1px solid rgba(255,255,255,0.15);
    pointer-events: auto;
  }
  .zoom-evo-side:hover { opacity: 0.85; transform: translateY(-50%) scale(1.04); }
  .zoom-evo-arrow {
    position: absolute;
    font-size: 22px; color: rgba(255,255,255,0.45);
    background: none; border: none; cursor: pointer; padding: 8px;
    transition: color 0.15s;
    pointer-events: auto;
    top: 50%; transform: translateY(-50%);
  }
  .zoom-evo-arrow:hover { color: rgba(255,255,255,0.9); }
  #zoom-evo-left  { left:  -250px; }
  #zoom-evo-right { right: -135px; }

  /* ── Aura (May) return-to-deck overlay ── */
  #aura-overlay {
    position: fixed; inset: 0; z-index: 3000;
    display: none; align-items: center; justify-content: center;
    pointer-events: none;
  }
  #aura-overlay.open { display: flex; }
  #aura-panel {
    pointer-events: auto;
    background: rgba(8,8,18,0.72); backdrop-filter: blur(20px) saturate(0.65);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 22px 28px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.75);
    animation: auraIn 0.25s cubic-bezier(0.34,1.1,0.64,1);
    min-width: 300px;
  }
  @keyframes auraIn {
    from { opacity:0; transform: scale(0.92) translateY(12px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
  }
  #aura-panel-title {
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.42);
  }
  #aura-slots {
    display: flex; gap: 16px; align-items: center;
  }
  .aura-slot {
    width: 84px; height: 118px; border-radius: 8px;
    background: rgba(0,0,0,0.55);
    border: 1.5px dashed rgba(255,255,255,0.14);
    box-shadow: inset 0 4px 18px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.4);
    position: relative; display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: default;
  }
  .aura-slot.drag-over {
    border-color: rgba(140,170,255,0.55);
    box-shadow: inset 0 4px 18px rgba(0,0,0,0.6), 0 0 14px rgba(100,140,255,0.3);
  }
  .aura-slot .aura-slot-hint {
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(255,255,255,0.2);
    text-align: center; line-height: 1.4; padding: 0 6px;
    pointer-events: none;
  }
  .aura-slot .card {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important;
    margin: 0 !important; border-radius: 7px;
    background-size: cover; background-position: center;
    cursor: grab;
  }
  #aura-confirm {
    padding: 9px 28px; border-radius: 20px;
    border: 1.5px solid rgba(140,170,255,0.35);
    background: rgba(80,100,255,0.14);
    color: rgba(160,180,255,0.85); font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: all 0.15s; font-family: inherit;
  }
  #aura-confirm:disabled {
    opacity: 0.3; cursor: not-allowed;
    border-color: rgba(255,255,255,0.1); background: none; color: rgba(255,255,255,0.3);
  }
  #aura-confirm:not(:disabled):hover {
    background: rgba(80,100,255,0.28); color: #fff;
    border-color: rgba(160,180,255,0.55);
  }
  #discard-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0 8px; flex-shrink: 0;
  }
  #discard-panel-title {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding-left: 15%; /* stay in opaque zone — same % as mask solid start */
  }
  #discard-panel-close {
    background: none; border: none; color: rgba(255,255,255,0.3);
    cursor: pointer; font-size: 16px; padding: 2px 0;
    padding-right: 15%; /* mirror of title padding */
    transition: color 0.15s; line-height: 1;
  }
  #discard-panel-close:hover { color: rgba(255,255,255,0.7); }
  #discard-panel-grid {
    display: grid;
    /* Tamaño de carta = --dt (alto), lo fija openDiscardOverlay para que la pila
       QUEPA exacta en la zona de cada jugador (ancho deriva por proporción 108/151).
       Default si el JS no lo fija aún. */
    grid-template-rows: var(--dt, 143px) var(--dt, 143px);
    grid-auto-flow: column;
    grid-auto-columns: calc(var(--dt, 143px) * 108 / 151);
    gap: 10px;
    padding: 8px 0 14px;
    padding-left: 15%;
    padding-right: 15%;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    cursor: grab;
    user-select: none;
    min-width: 0;
  }
  #discard-panel-grid:active { cursor: grabbing; }
  #discard-panel-grid::-webkit-scrollbar { display: none; }
  #discard-panel-grid .discard-thumb {
    width: calc(var(--dt, 143px) * 108 / 151); height: var(--dt, 143px); border-radius: 8px;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    position: relative; transform-style: preserve-3d;
  }
  #discard-panel-grid .discard-thumb:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.55); filter: brightness(1.10);
    z-index: 2;
  }
  #discard-empty {
    padding: 16px; padding-left: 15%;
    color: rgba(255,255,255,0.16); font-size: 11px;
  }
  /* Discard slot: dimmed when empty, full opacity when has cards */
  .discard-pile { opacity: 0.45; filter: brightness(0.7); }
  .discard-pile.has-cards { opacity: 1; filter: none; }

  /* ══ ENERGY ZONE ══ */
  /* Energy zone: absolute in side-zone (not inside discard — avoids opacity inheritance) */
  #energy-zone-p1 {
    position: absolute;
    left: calc(100% + 10px);
    bottom: 0; /* aligned to discard which is at bottom of P1 side-zone */
  }
  #energy-zone-p2 {
    position: absolute;
    right: calc(100% + 10px);
    top: 0; /* aligned to discard which is at top of P2 side-zone */
  }
  /* ── PC: mazo/descarte de J2 en ESPEJO con J1 + energías en el flujo, bajo el descarte ──
     (1) J2 empacaba su mazo/descarte arriba (pegados a su barra) → quedaban más abajo en su
     mitad que los de J1, que se pegan al divisor. Con flex-end, J2 también los pega al divisor
     → espejo de J1. (2) Las energías estaban en ABSOLUTO pegadas al borde de pantalla y a la
     barra; pasan al FLUJO de la columna (justo tras el descarte, centradas) → quedan debajo del
     descarte, más hacia el centro y arriba de su lado, con el gap de 16px (no pegadas).
     SIN @media: aplica en TODOS los anchos → móvil = escritorio, sin adaptar. */
  #zone-p2 .side-zone:first-child { justify-content: flex-end; }
  /* relative (no static): queda en el flujo en su sitio, pero sigue siendo contexto de
     posición para el indicador de próxima energía (.next-energy-mini, hijo absoluto). */
  #energy-zone-p1, #energy-zone-p2 { position: relative; inset: auto; align-self: center; }
  /* Columnas laterales (estadio/mazo/descarte/energía de cada lado) acercadas al centro como
     GRUPO. Era 2.5vw (≈5%); revertidos 12px porque era demasiado → calc(2.5vw - 12px).
     El botón FIN DE TURNO se centra por JS sobre el mazo de J1 → acompaña a su columna solo. */
  #zone-p1 .side-zone:first-child, #zone-p2 .side-zone:first-child { transform: translateX(calc(2.5vw - 12px)); }
  #zone-p1 .side-zone:last-child,  #zone-p2 .side-zone:last-child  { transform: translateX(calc(12px - 2.5vw)); }
  /* Mazo y descarte un 5% más pequeños (98×137 → 93×130). El interior usa inset:0 → escala solo;
     el gap de 16px del flex se mantiene → mismos espacios, y el mazo sigue anclado al divisor
     (flex-start J1 / flex-end J2), así que la línea central es la referencia. */
  #zone-p1 .deck-slot, #zone-p2 .deck-slot,
  #zone-p1 .discard-pile, #zone-p2 .discard-pile { width: 93px; height: 130px; }
  /* Lo mismo con ambos huecos de Estadio (anclados al divisor por su flex) + la carta jugada
     encima (las cartas en slot son 98×137 por regla genérica → hay que escalarla también). */
  #zone-p1 .slot[data-label*="Estadio"], #zone-p2 .slot[data-label*="Estadio"] { width: 93px; height: 130px; }
  .slot[data-label*="Estadio"] .card { width: 93px; height: 130px; }
  /* ── UI de jugadores: quitar "PUNTOS", invertir J2 (espejo) y rellenar hacia el centro ──
     (1) fuera la palabra Puntos en ambos → solo nombre + círculos.
     (2) J2 invierte el orden de su identidad → círculos hacia el CENTRO, espejo de la de J1.
     (3) el hueco liberado se llena hacia el centro: se separa el punto de color (al borde) del
     nombre+círculos (al centro) con un margen. */
  .player-bar .score-label { display: none; }
  .player-bar .player-dot { display: none; }          /* fuera el punto de color suelto (rojo/azul) */
  .player-bar.p2 .bar-identity { flex-direction: row-reverse; }
  /* Nombre 10% más pequeño + CAJA FIJA: el ancho no depende del texto, así que cambiar el nombre
     (más largo/corto) NO reposiciona los círculos ni la UI. El texto se alinea HACIA LOS PUNTOS
     (J1 a la derecha, J2 a la izquierda), no centrado. Recorta con ellipsis. */
  .player-bar .player-name {
    font-size: 14.4px;
    display: inline-block; width: 134px; box-sizing: border-box;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .player-bar.p1 .player-name, .player-bar.p1 .player-name-input { text-align: right; }
  .player-bar.p2 .player-name, .player-bar.p2 .player-name-input { text-align: left; }
  .player-bar .player-name-input { width: 100%; font-size: 14.4px; }
  .player-bar .sdot { width: 16px; height: 16px; }    /* círculos 10% más pequeños (18 → 16) */
  /* la caja fija (134px) ya empuja los círculos hacia el centro; margen fino +10px aprox */
  .player-bar.p1 .bar-identity .player-name { margin-left: 34px; }
  .player-bar.p2 .bar-identity .player-name { margin-right: 34px; }
  .player-bar { height: 43px; }                       /* barra 10% más baja (48 → 43) */
  /* Miniatura de la PRÓXIMA energía — MISMO orbe 3D de la zona de energía (esfera con highlight +
     sombra + glow del tipo), pero pequeño y ESTÁTICO (sin floating). Usa los mismos --ob/--od/--og
     que pone _renderNextEnergy. */
  .next-energy-mini {
    position: absolute;
    width: 15px; height: 15px; border-radius: 50%; pointer-events: none; z-index: 5;
    --ob:#aaa; --od:#444; --og:rgba(160,160,160,0.3);
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.65) 0%, transparent 45%),
      radial-gradient(circle at 65% 72%, rgba(0,0,0,0.30) 0%, transparent 35%),
      radial-gradient(circle at 50% 50%, var(--ob) 0%, var(--od) 100%);
    box-shadow:
      0 0 7px 2px var(--og),
      0 2px 5px rgba(0,0,0,0.5),
      inset 0 -3px 7px rgba(0,0,0,0.35),
      inset 0 1px 3px rgba(255,255,255,0.1);
  }
  /* J1 (zona de energía abajo-derecha del tablero): diagonal ABAJO-IZQUIERDA = hacia el centro, pegada */
  .next-energy-mini.ne-p1 { top: calc(100% - 6px); left: -8px; }
  /* J2 (vista espejo del otro lado): mismo, reflejado 180° = ARRIBA-DERECHA */
  .next-energy-mini.ne-p2 { bottom: calc(100% - 6px); right: -8px; }
  .next-energy-mini img {
    position: absolute; inset: 0; margin: auto;
    width: 10px; height: 10px; object-fit: contain;
    opacity: 0.75; mix-blend-mode: multiply;
  }

  .energy-zone {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s;
    z-index: 4; overflow: visible;
    background:
      radial-gradient(circle at 50% 38%, rgba(255,255,255,0.03) 0%, transparent 50%),
      radial-gradient(circle at 50% 75%, rgba(0,0,0,0.25) 0%, transparent 45%),
      radial-gradient(circle at 50% 50%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.32) 100%);
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.55),
      inset 0 -1px 2px rgba(255,255,255,0.03);
  }
  .energy-zone.has-orb {
    background: none;
    box-shadow: none;
  }
  .energy-zone-label {
    display: none;
  }
  .energy-orb {
    width: 34px; height: 34px; border-radius: 50%;
    position: relative; cursor: grab; flex-shrink: 0;
    /* táctil: press-hold + arrastrar el orbe a un Pokémon (sin que el navegador
       lo interprete como scroll/pan y cancele el gesto con pointercancel) */
    touch-action: none;
    /* 3-layer sphere: top highlight + bottom shadow + base color */
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.65) 0%, transparent 45%),
      radial-gradient(circle at 65% 72%, rgba(0,0,0,0.30) 0%, transparent 35%),
      radial-gradient(circle at 50% 50%, var(--ob) 0%, var(--od) 100%);
    box-shadow:
      0 0 18px 6px var(--og),
      0 6px 16px rgba(0,0,0,0.55),
      inset 0 -6px 16px rgba(0,0,0,0.35),
      inset 0 3px 8px rgba(255,255,255,0.1);
    animation: orbIdle 3.8s ease-in-out infinite;
    --ob:#aaa; --od:#444; --og:rgba(160,160,160,0.3);
    /* hide browser default drag ghost box */
    -webkit-user-drag: element;
  }
  .energy-orb:active { cursor: grabbing; }
  .energy-orb img {
    position: absolute; inset: 0; margin: auto;
    width: 24px; height: 24px;
    pointer-events: none; draggable: false;
    opacity: 0.75;
    mix-blend-mode: multiply;
  }
  @keyframes orbIdle {
    0%,100% { transform: translateY(0px) scale(1);     filter: brightness(1); }
    50%      { transform: translateY(-4px) scale(1.04); filter: brightness(1.14); }
  }
  .orb-particle {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    pointer-events: none; top: 50%; left: 50%; margin: -4px;
    animation: orbBurst 0.60s cubic-bezier(0.2,0,0.8,1) forwards;
    z-index: 1;
  }
  .energy-orb { z-index: 2; }
  /* ── Energy type picker — animated goo blob ── */
  .energy-zone { cursor: pointer; }

  /* Zona de energía acercada al centro (escritorio + móvil): hacia el centro =
     su radio (20px) + 10px extra = 30px. P1 (lado derecho del centro) → izquierda;
     P2 (lado izquierdo) → derecha. ×--bs para que escale en móvil (=1 en escritorio). */
  #energy-zone-p1 { transform: translateX(calc(-30px * var(--bs,1))); }
  #energy-zone-p2 { transform: translateX(calc( 30px * var(--bs,1))); }

  /* ── ÁREA DE ENTRENADORES (Tanda 7) ── cuadro translúcido donde se sueltan los
     partidarios/objetos para activarlos. Interior MUY translúcido; borde y halo
     apenas menos translúcidos (sutil). Halo = mismo anillo que las cartas jugables
     de la mano, en amarillo. Posición/tamaño los fija el JS (= pila de descartes). */
  #trainer-drop-zone {
    position: fixed; z-index: 8500; display: none;
    pointer-events: none;            /* TÁCTIL: puramente visual; el drop se detecta por geometría
                                        (si capturara eventos, cancelaría el toque en curso) */
    border-radius: 16px; box-sizing: border-box; border: none;   /* sin borde */
    background: rgba(255,255,255,0.04);   /* BLANCO (como el de las cartas), translúcido (perilla) */
    transition: background 0.15s;
  }
  #trainer-drop-zone.open { display: block; animation: trainerZonePulse 1.2s ease-out infinite; }
  #trainer-drop-zone.tz-over { background: rgba(255,255,255,0.09); }
  /* ESCRITORIO (ratón): el cuadro ENTERO es destino de soltado nativo (no solo los huecos).
     El drag de ratón no se cancela con pointer-events como el táctil → aquí sí captura. */
  @media (hover: hover) and (pointer: fine) {
    #trainer-drop-zone.open { pointer-events: auto; }
  }
  @keyframes trainerZonePulse {
    /* halo BLANCO como el de las cartas jugables; misma opacidad, ~20% más de distancia (12px) */
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.18); }
    60%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }

  /* Outer wrapper — blob shape + float animation, never touched by JS transform */
  #energy-menu-wrap {
    position: fixed; z-index: 8000;
    display: none;
    width: 190px; height: 190px;
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(60,40,120,0.22) 0%, transparent 60%),
      radial-gradient(ellipse at 70% 70%, rgba(20,20,60,0.35) 0%, transparent 55%),
      rgba(6,5,16,0.94);
    backdrop-filter: blur(18px) saturate(0.7);
    box-shadow:
      0 0 0 1px rgba(120,90,255,0.18),
      0 0 40px 8px rgba(80,40,200,0.18),
      0 0 80px 20px rgba(60,20,180,0.09),
      0 20px 60px rgba(0,0,0,0.85),
      inset 0 1px 0 rgba(255,255,255,0.06);
    pointer-events: none;
    /* Grow animation from energy zone circle */
    transform-origin: 50% 50%;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0s;
  }
  #energy-menu-wrap.open { display: block; }
  #energy-menu-wrap.spawned {
    animation: blobMorph 6s ease-in-out infinite, blobFloat 4s ease-in-out infinite, blobGrow 0.6s cubic-bezier(0.34,1.05,0.64,1) forwards;
  }
  @keyframes blobGrow {
    0%   { clip-path: circle(2% at var(--grow-x,50%) var(--grow-y,50%));   opacity:0; filter:blur(6px); }
    25%  { clip-path: circle(28% at var(--grow-x,50%) var(--grow-y,50%));  opacity:1; filter:blur(4px); }
    55%  { clip-path: circle(52% at 51% 49%);  opacity:1; filter:blur(1px); }
    75%  { clip-path: circle(48% at 49% 51%);  opacity:1; filter:blur(0); }
    100% { clip-path: circle(75% at 50% 50%);  opacity:1; filter:blur(0); }
  }
  @keyframes blobMorph {
    0%   { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; }
    20%  { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
    40%  { border-radius: 55% 45% 30% 70% / 40% 55% 45% 60%; }
    60%  { border-radius: 35% 65% 60% 40% / 65% 35% 65% 35%; }
    80%  { border-radius: 68% 32% 42% 58% / 48% 68% 32% 52%; }
    100% { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; }
  }
  @keyframes blobFloat {
    0%,100% { transform: translateY(0px) rotate(0deg); }
    33%     { transform: translateY(-5px) rotate(0.8deg); }
    66%     { transform: translateY(3px) rotate(-0.5deg); }
  }
  #energy-menu-wrap::before {
    content: ''; position: absolute; inset: -14px; border-radius: inherit;
    background: radial-gradient(ellipse, rgba(100,60,255,0.14) 0%, transparent 70%);
    animation: blobGlow 3s ease-in-out infinite alternate;
    pointer-events: none; z-index: -1;
  }
  @keyframes blobGlow {
    from { opacity:0.5; transform:scale(0.95); }
    to   { opacity:1;   transform:scale(1.06); }
  }
  #energy-menu-wrap::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background:
      radial-gradient(circle at 20% 80%, rgba(140,100,255,0.15) 0%, transparent 30%),
      radial-gradient(circle at 80% 20%, rgba(80,160,255,0.1) 0%, transparent 25%),
      radial-gradient(circle at 60% 60%, rgba(200,100,255,0.08) 0%, transparent 20%);
    animation: blobShimmer 5s ease-in-out infinite; pointer-events: none;
  }
  @keyframes blobShimmer { 0%,100%{opacity:.6;} 50%{opacity:1;} }

  /* Inner menu: absolute positioning for scattered orbs */
  #energy-menu {
    position: absolute; inset: 0;
    pointer-events: none;
  }
  #energy-menu.active { pointer-events: auto; }

  .energy-menu-orb {
    position: absolute;
    width: 30px; height: 30px; border-radius: 50%;
    cursor: grab;
    /* Center via margin instead of transform so orbIdle translateY doesn't conflict */
    margin-left: -15px; margin-top: -15px;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.65) 0%, transparent 45%),
      radial-gradient(circle at 65% 72%, rgba(0,0,0,0.30) 0%, transparent 35%),
      radial-gradient(circle at 50% 50%, var(--ob) 0%, var(--od) 100%);
    box-shadow: 0 0 14px 4px var(--og), 0 4px 12px rgba(0,0,0,0.55),
                inset 0 -4px 10px rgba(0,0,0,0.35), inset 0 2px 6px rgba(255,255,255,0.1);
    transform: scale(0); opacity: 0;
    --ob:#aaa; --od:#444; --og:rgba(160,160,160,0.3);
    user-select: none; z-index: 2;
    transition: box-shadow 0.15s, filter 0.15s;
  }
  .energy-menu-orb.spawned {
    animation: orbSpawn 0.45s cubic-bezier(0.34,1.4,0.64,1) var(--spawn-delay,0s) forwards,
               orbIdle 3.8s ease-in-out var(--idle-delay,0.5s) infinite;
  }
  @keyframes orbSpawn {
    0%   { transform: scale(0.1); opacity:0; filter:brightness(2.5); }
    65%  { transform: scale(1.2); opacity:1; filter:brightness(1.4); }
    100% { transform: scale(1);   opacity:1; filter:brightness(1);   }
  }
  .energy-menu-orb:hover {
    filter: brightness(1.25) !important;
    box-shadow: 0 0 22px 8px var(--og), 0 6px 16px rgba(0,0,0,0.6) !important;
    z-index: 10;
  }
  .energy-menu-orb img {
    position: absolute; inset: 0; margin: auto;
    width: 20px; height: 20px; pointer-events: none;
    opacity: 0.75; mix-blend-mode: multiply;
  }

  /* Cursor orb while dragging */
  #energy-cursor-orb {
    position: fixed; z-index: 9999; pointer-events: none;
    width: 34px; height: 34px; border-radius: 50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.65) 0%, transparent 45%),
      radial-gradient(circle at 50% 50%, var(--ob,#aaa) 0%, var(--od,#444) 100%);
    box-shadow: 0 0 18px 6px var(--og,rgba(160,160,160,0.3)), 0 4px 12px rgba(0,0,0,0.6);
    transform: translate(-50%,-50%) scale(0);
    transition: transform 0.15s cubic-bezier(0.34,1.4,0.64,1);
    display: none;
  }
  #energy-cursor-orb.active { transform: translate(-50%,-50%) scale(1); display: block; }
  #energy-cursor-orb img {
    position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px; pointer-events: none;
    opacity: 0.75; mix-blend-mode: multiply;
  }

  .drop-particle {
    position: fixed;
    width: 7px; height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: dropParticle var(--dur,0.55s) cubic-bezier(0.4,0,0.2,1) forwards;
  }
  @keyframes dropParticle {
    0%   { transform: translate(0px, 0px) scale(0.3); opacity: 0; }
    12%  { transform: translate(0px, 0px) scale(1.1); opacity: 1; }
    42%  { transform: translate(var(--ex), var(--ey)) scale(1.0); opacity: 0.95; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.15); opacity: 0; }
  }

  @keyframes orbBurst {
    0%   { opacity:1; transform:rotate(var(--a)) translateX(0px) scale(1); }
    100% { opacity:0; transform:rotate(var(--a)) translateX(var(--dist,34px)) scale(0.2); }
  }
  /* ── Deck builder energy type selector ── */
  #deck-energy-selector {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 4px 6px 3px; align-items: center; flex-shrink: 0;
  }
  #deck-energy-selector .en-label { display: none; }
  .energy-type-toggle {
    width: 28px; height: 28px; border-radius: 50%; padding: 0;
    border: 2px solid transparent; cursor: pointer; background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, transform 0.12s, opacity 0.15s;
    opacity: 0.35; flex-shrink: 0;
  }
  .energy-type-toggle img { width: 24px; height: 24px; border-radius: 50%; display: block; }
  .energy-type-toggle.selected { border-color: rgba(255,255,255,0.6); opacity: 1; transform: scale(1.12); }
  .energy-type-toggle.disabled-toggle { opacity: 0.15; cursor: not-allowed; }

  /* ── Deck count overlay (bottom-right of grid) ── */
  #deck-count-overlay {
    position: absolute; bottom: 6px; right: 8px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5); pointer-events: none;
    z-index: 2;
  }
  #deck-count-overlay #deck-count { color: rgba(255,255,255,0.82); }
  #deck-count-overlay.full #deck-count { color: #6bffae; }
  .dco-max { color: rgba(255,255,255,0.28); }

/* ══ UI COMPARTIDA: toast global + modales custom (js/shared.js) ══
   Lenguaje visual de la pestaña Cartas: system-ui, superficies neutras,
   sin acentos de color — material, moderno, smooth. */
#pb-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.98);
  background: rgba(32,32,42,0.97);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 500;
  padding: 11px 18px; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.22,1,0.36,1);
  z-index: 99999;
}
#pb-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ══ Aviso del motor de reglas — centrado en el tablero, cursiva, casi sin fondo ══
   (no usa el toast global #pb-toast, que cae sobre la mano de J1) */
#board-rules-notice {
  position: fixed; left: 50%; top: 50%;   /* body-level: por encima de cualquier menú */
  transform: translate(-50%, -50%) translateY(7px);
  font-family: system-ui, sans-serif; font-style: italic; font-weight: 500;
  font-size: 15px; letter-spacing: 0.2px; line-height: 1.3;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 12px rgba(0,0,0,0.92), 0 0 3px rgba(0,0,0,0.75);
  max-width: 60%; text-align: center;
  pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
  z-index: 9400;   /* por ENCIMA de todos los menús del tablero (popover 4000, energía 8000/9300) */
}
#board-rules-notice.visible { opacity: 0.93; transform: translate(-50%, -50%) translateY(0); }
/* Salida: se desvanece HACIA ARRIBA (poco movimiento) con ease-out, poco después de entrar */
#board-rules-notice.exiting {
  opacity: 0; transform: translate(-50%, -50%) translateY(-9px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

/* Banner de victoria (p.ej. derrota por quedarse sin Pokémon en banca) */
.board-victory-banner {
  position: fixed; left: 50%; top: 42%;
  transform: translate(-50%, -50%) scale(0.85);
  font-family: system-ui, sans-serif; font-weight: 800;
  font-size: 30px; letter-spacing: 0.3px; text-align: center; max-width: 80%;
  padding: 18px 30px; border-radius: 16px;
  background: rgba(18,18,26,0.92); backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #fff; pointer-events: none; opacity: 0; z-index: 9500;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.board-victory-banner.vb-p1 { border: 2px solid #4dabff; text-shadow: 0 0 18px rgba(77,171,255,0.55); }
.board-victory-banner.vb-p2 { border: 2px solid #ff6b6b; text-shadow: 0 0 18px rgba(255,107,107,0.55); }
.board-victory-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ══ FIN DE PARTIDA — overlay con ganador + Revancha / Ver el tablero (estética Cartas) ══ */
#board-gameover {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,12,0.66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  font-family: system-ui, -apple-system, sans-serif;
  opacity: 0; transition: opacity 0.3s ease;
}
#board-gameover.show { opacity: 1; }
#board-gameover .go-panel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 40px 26px; border-radius: 20px; max-width: 90vw;
  background: rgba(16,16,23,0.72); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 80px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.06),
              0 0 0 1px var(--gc, #4dabff) inset;
  transform: scale(0.9); transition: transform 0.34s cubic-bezier(0.34,1.56,0.64,1);
}
#board-gameover.show .go-panel { transform: scale(1); }
#board-gameover .go-crown {
  width: 46px; height: 46px; margin-bottom: 2px;
  fill: var(--gc, #4dabff);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gc, #4dabff) 55%, transparent));
  animation: go-crown-pop 0.5s cubic-bezier(0.34,1.7,0.5,1) both;
}
@keyframes go-crown-pop { from { transform: translateY(6px) scale(0.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
#board-gameover .go-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
#board-gameover .go-winner {
  font-size: 26px; font-weight: 800; text-align: center; line-height: 1.15;
  color: var(--gc, #4dabff);
  text-shadow: 0 0 22px color-mix(in srgb, var(--gc, #4dabff) 45%, transparent);
}
#board-gameover .go-score {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 10px;
  font-size: 22px; font-weight: 800; color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums;
}
#board-gameover .go-score .go-s-w { color: var(--gc, #4dabff); }
#board-gameover .go-score .go-dash { color: rgba(255,255,255,0.32); font-weight: 500; }
#board-gameover .go-actions { display: flex; gap: 10px; margin-top: 4px; }
#board-gameover .go-btn {
  padding: 11px 22px; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 700; font-family: inherit;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.9);
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
#board-gameover .go-btn:hover { background: rgba(255,255,255,0.13); }
#board-gameover .go-btn:active { transform: scale(0.96); }
#board-gameover .go-btn-primary {
  background: color-mix(in srgb, var(--gc, #4dabff) 22%, rgba(255,255,255,0.06));
  border-color: color-mix(in srgb, var(--gc, #4dabff) 55%, transparent);
  color: #fff;
}
#board-gameover .go-btn-primary:hover { background: color-mix(in srgb, var(--gc, #4dabff) 34%, rgba(255,255,255,0.08)); }
@media (max-width: 720px) {
  #board-gameover .go-panel { padding: 26px 26px 22px; }
  #board-gameover .go-winner { font-size: 22px; }
  #board-gameover .go-actions { flex-direction: column; width: 100%; }
  #board-gameover .go-btn { width: 100%; padding: 13px 22px; }
}

.pb-modal-overlay {
  /* Oscurece solo el área de contenido (el nav queda visible) y poco:
     los pop-ups no deben sacarte de la página */
  position: fixed; left: 0; right: 0; bottom: 0; top: 48px; z-index: 99990;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.18s;
}
.pb-modal-overlay.open { opacity: 1; }
.pb-modal {
  background: #16161f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px;
  width: 340px; max-width: 90vw;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  font-family: system-ui, sans-serif;
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.pb-modal-overlay.open .pb-modal { transform: translateY(0) scale(1); }
.pb-modal-title {
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
}
.pb-modal-msg { font-size: 12.5px; color: rgba(255,255,255,0.45); line-height: 1.55; margin-top: -6px; }
.pb-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.pb-btn {
  padding: 9px 16px; border-radius: 9px;
  border: none; background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.pb-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.pb-btn:active { transform: scale(0.97); }
.pb-btn-primary { background: rgba(255,255,255,0.92); color: #15151c; font-weight: 600; }
.pb-btn-primary:hover { background: #fff; color: #000; }
.pb-btn-danger { background: rgba(229,72,77,0.9); color: #fff; font-weight: 600; }
.pb-btn-danger:hover { background: #e5484d; color: #fff; }
.pb-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid transparent; border-radius: 9px;
  color: #f0f0f0; font-family: system-ui, sans-serif; font-size: 14px;
  padding: 11px 13px; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.pb-input:hover { background: rgba(255,255,255,0.07); }
.pb-input:focus { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.07); }

/* Selector de energía del mazo (pbDeckSave) */
.pb-en-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); font-family: system-ui, sans-serif; margin: 2px 0 -2px; }
.pb-en-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pb-en-orb {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; transition: transform 0.12s, border-color 0.15s, background 0.15s, opacity 0.15s;
}
.pb-en-orb img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; filter: grayscale(0.6) opacity(0.55); transition: filter 0.15s; }
.pb-en-orb:hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.pb-en-orb.sel { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.12); }
.pb-en-orb.sel img { filter: none; }
.pb-en-orb.dim { opacity: 0.4; cursor: default; }
.pb-en-hint { font-size: 11px; color: rgba(255,255,255,0.35); font-family: system-ui, sans-serif; line-height: 1.4; }

/* ══ AVISO MÓVIL (js/shared.js) ══ */
#pb-mobile-notice {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(8,8,14,0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
  padding: 24px;
}
#pb-mobile-notice.open { opacity: 1; }
.pbmn-box {
  background: #16161f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 420px; text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8);
  font-family: system-ui, sans-serif;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.pbmn-icon { font-size: 40px; }
.pbmn-title { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.95); letter-spacing: -0.01em; }
.pbmn-msg { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; }
.pbmn-btn {
  margin-top: 8px; padding: 11px 22px; border-radius: 9px; border: none;
  background: rgba(255,255,255,0.92); color: #15151c;
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.pbmn-btn:hover { background: #fff; }
.pbmn-btn:active { transform: scale(0.97); }

/* ══ ENERGÍAS EN LA PILA DE DESCARTES + SELECTOR DE RETIRADA ══ */
#discard-energy-strip {
  display: flex; align-items: flex-start; justify-content: center; gap: 18px;
  padding: 8px 14px 2px;
  flex-shrink: 0;
}
.denergy-group {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: grab;
}
.denergy-group:active { cursor: grabbing; }
.denergy-orb {
  width: 42px; height: 42px; border-radius: 50%;
  transition: transform 0.12s;
}
.denergy-group:hover .denergy-orb { transform: scale(1.1); }
.denergy-orb img {
  width: 100%; height: 100%; border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55));
}
.denergy-count {
  min-width: 30px; text-align: center;
  padding: 1px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.09);
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.retreat-modal { width: 350px; }
.retreat-count-row { display: flex; align-items: center; gap: 12px; margin: 2px 0 4px; }
.retreat-count-chip {
  min-width: 42px; height: 42px; border-radius: 12px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  font-size: 21px; font-weight: 700; color: rgba(255,255,255,0.92);
  transition: background 0.18s, color 0.18s;
}
.retreat-count-chip.done { background: rgba(255,255,255,0.92); color: #15151c; }
.retreat-count-lbl { font-size: 12.5px; color: rgba(255,255,255,0.45); }
.retreat-capsule {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 13px 14px;
}
.retreat-orb {
  width: 40px; height: 40px; border-radius: 50%; padding: 2px;
  border: 2px solid transparent; background: rgba(255,255,255,0.05);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}
.retreat-orb img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.retreat-orb:hover { background: rgba(255,255,255,0.1); transform: scale(1.06); }
.retreat-orb:active { transform: scale(0.95); }
.retreat-orb.sel { border-color: rgba(255,255,255,0.9); transform: scale(1.08); }

/* Orbe volador: el mismo orbe 3D de la zona de energías, en fixed para seguir
   al cursor (drag desde la pila) o volar hacia la pila (retirada) */
.energy-orb.fly-orb {
  position: fixed; z-index: 12000;
  margin: -17px 0 0 -17px;
  pointer-events: none; cursor: default;
}
.energy-orb.fly-orb.mini {
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  animation: none; /* transform limpio para la trayectoria WAAPI */
}
.energy-orb.fly-orb.mini img { width: 16px; height: 16px; }

/* Partículas de "destrucción" de energía (retirada): salen del orbe y se apagan */
.energy-shatter {
  position: fixed; z-index: 11900;
  border-radius: 50%; pointer-events: none;
  animation: energyShatter 0.38s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes energyShatter {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0.2); }
}

/* Mini flash pop-in sobre la miniatura del descarte al recibir una energía */
.discard-flash {
  position: fixed; z-index: 11500;
  border-radius: 9px; pointer-events: none;
  background: rgba(255,255,255,0.9);
  animation: discardFlash 0.26s ease-out forwards;
}
@keyframes discardFlash {
  0%   { opacity: 0;    transform: scale(0.82); }
  35%  { opacity: 0.55; transform: scale(1.04); }
  100% { opacity: 0;    transform: scale(1); }
}

/* Modo clic: capa que captura el clic de destino y Pokémon candidatos
   respirando con un aura del color de la energía que se va a equipar */
#energy-pick-catcher {
  position: fixed; inset: 0; z-index: 11000;
}
#energy-pick-catcher.over-target { cursor: pointer; }
.card.energy-pick-target {
  --epc: rgba(255,255,255,0.22);
  animation: energyPickPulse 1.6s ease-in-out infinite;
}
@keyframes energyPickPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.30), 0 0 8px 1px var(--epc); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.55), 0 0 12px 2px var(--epc); }
}

/* ══ PANEL DE PROBABILIDADES DE ROBO (menú del mazo en el tablero) ══ */
.dprob-modal { width: 430px; }
.dprob-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 360px; overflow-y: auto;
  margin: 4px 0 2px; padding-right: 4px;
}
.dprob-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 9px;
  background: rgba(255,255,255,0.035);
}
.dprob-row:hover { background: rgba(255,255,255,0.07); }
.dprob-thumb {
  width: 26px; height: 36px; border-radius: 4px; flex-shrink: 0;
  background-size: cover; background-position: center top;
  background-color: rgba(255,255,255,0.06);
}
.dprob-name {
  flex: 1; min-width: 0;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.82);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dprob-vals { font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap; }
.dprob-vals b { color: rgba(255,255,255,0.85); font-weight: 700; }

/* ══ ESCENARIOS GUARDABLES ══ */
.scen-modal { width: 390px; }
.scen-save-btn { width: 100%; margin: 2px 0 6px; }
.scen-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 300px; overflow-y: auto; padding-right: 2px;
}
.scen-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.scen-row:hover { background: rgba(255,255,255,0.07); }
.scen-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.scen-name {
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scen-date { font-size: 10.5px; color: rgba(255,255,255,0.35); }
.pb-btn-sm { padding: 6px 13px; font-size: 12px; }
.scen-del {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: rgba(255,255,255,0.35); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.scen-del:hover { background: rgba(229,72,77,0.15); color: #e5484d; }
.scen-empty { font-size: 12px; color: rgba(255,255,255,0.35); text-align: center; padding: 12px 0; }
/* selección de carta del descarte (Pokémon Flute) */
#reveal-cards .reveal-card.reveal-pick { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
#reveal-cards .reveal-card.reveal-pick:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 8px 24px rgba(0,0,0,.5); }