:root{
      --iri-panel-scale: 0.85;
      --iri-panel-bg-image: url("CENIZA/FONDO.jpeg");
      --bg: #0b0b0d;
      --card-bg: #14141b;
      --text: #f7f4fb;
      --muted: #b7b1c6;
      --glass: rgba(255, 255, 255, 0.06);
      --accent: #cbb4ff;
      --line: rgba(255, 255, 255, 0.12);
      --danger: #e74c3c;
      --killer-compact-right: 20px;
      --killer-compact-bottom: 19px;
      --killer-compact-size: 112px;
      --killer-compact-gap: -8px;
      --killer-afk-timer-top: 24px;
      --killer-afk-timer-x: 0px;
      --killer-afk-ring-size: 68px;
      --killer-afk-icon-size: 44px;
    }

    html,body{
      height:100%;
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight:700;
    }

    .wrap{
      max-width:1920px;
      margin:0 auto;
      padding: 0 6px;
    }

    header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
    }

    .controls{display:flex;gap:8px;align-items:center}
    .btn{
      background:rgba(255,255,255,0.04);
      border:1px solid var(--line);
      padding:10px 16px;
      border-radius:10px;
      cursor:pointer;
      color:var(--text);
      font-weight:700;
      font-size:10px;
      transition:background .2s ease, transform .1s ease, border-color .2s ease;
    }
    .btn:hover{
      background:rgba(255,255,255,0.08);
      transform:translateY(-1px) scale(1.02);
      border-color: rgba(255,255,255,0.18);
    }

    .grid{
      margin-top:2px;
      display:grid;
      grid-auto-rows: 1fr;
      gap:1px;
      width:100%;
    }

    .one-row{
      grid-template-columns:repeat(41, 1fr) !important;
    }

    /* En RETO IRIDISCENTE: la vista 1 FILA (one-row) debe permanecer oculta SIEMPRE.
       (Sirve para que el bot??n/atajo "1" siga ocultando el CENTER GRID sin mostrar la fila superior) */
    body.iri-challenge-active #grid.one-row{
      display:none !important;
    }


    /* En RETO IRIDISCENTE: ocultar SIEMPRE el panel Current Killer (stat-group.current-killer) */
    body.iri-challenge-active .stat-group.current-killer{
      display: none !important;
    }

    /* En RETO IRIDISCENTE: ocultar SIEMPRE el tracker de VICTORIAS de Killer (iconos en la parte inferior/centro) */
    body.iri-challenge-active #unaplayMatchTracker,
    body.iri-challenge-active .unaplay-match-tracker{
      display: none !important;
    }


    /* En RETO IRIDISCENTE: ocultar SOLO el banner de bits */
    body.iri-challenge-active #bitsBanner,
    body.iri-challenge-active .bits-banner{
      display: none !important;
    }


    /* -----------------------------
       HEADER DEL RETO + BITS BADGE
       ----------------------------- */

    .challenge-header{
      position:fixed;
      top:55px;
      left:50%;
      transform:translateX(-50%);
      text-align:center;
      display:none;
      flex-direction:column;
      gap:2px;
      z-index:900;
      pointer-events:none;
    }
    .challenge-subtitle{
      font-size:11px;
      letter-spacing:0.18em;
      text-transform:uppercase;
      opacity:0.6;
    }
    .challenge-title{
      font-size:26px;
      font-weight:800;
      letter-spacing:0.18em;
    }
    .challenge-title span{
      color:#2ecc71;
    }

    .bits-banner{
      position:fixed;
      top:390px;
      right:22px;
      padding:1px 5px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.12);
      background:rgb(0, 0, 0);
      font-size:14px;
      letter-spacing:0.12em;
      text-transform:uppercase;
      z-index:900;

      white-space:normal;
      text-align:center;

      display:flex;
      align-items:center;
      justify-content:center;

      transition: opacity 0.5s ease-in-out;
      overflow:hidden;

      --bits-offset: 0px;
      transform: translateY(var(--bits-offset));
    }

    .bits-banner-hidden{
      opacity:0;
    }

    body.grid-centered .challenge-header{
      display:flex;
    }

    /* Panel current killer */
    .stat-group.current-killer {
      min-width: 200px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      padding-right: 4px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
    }

    .stat-group.current-killer.selected {
      border: 2px solid var(--accent);
      box-shadow: none;
    }

    .current-killer-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .current-killer-thumb {
      flex-shrink: 0;
      margin-left: auto;
    }

    .current-killer-thumb img {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      display: none;
    }

    .grid-animate .cell {
      animation: gridIn 0.35s ease-out;
    }

    @keyframes gridIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .cell{
      position:relative;
      border-radius:6px;
      overflow:hidden;
      background:var(--card-bg);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: none;
      border: 3px solid transparent;
      box-sizing: border-box;
    }

    .cell img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:0.35s ease;
    }

    .cell.done:hover img{
      transform:scale(1.03);
    }

    .cell.locked img{
      filter:grayscale(100%) contrast(80%);
      opacity:.55;
      transform:none;
    }

    .cell.done img{
      filter:none;
      opacity:1;
    }

    .stats-under {
      position: fixed;
      top: 90px;
      left: 20px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: auto;
      gap: 12px;
    }


    /* Fuerza los STATS EXTRA (G) a quedarse en la columna izquierda, debajo del panel Iridiscente */
    #unaplayContent .stats-under #globalStatsPanel,
    #unaplayContent .stats-under #topKillersPanel{
      width: 270px;
      max-width: 270px;
    }
    /* ---- Panel Twitch m??s peque??o a la derecha ---- */

    #twitchStatsPanel .stat-line {
      font-size: 12px;
      line-height: 1.3;
    }

    #twitchStatsPanel .stat-line:first-child {
      font-size: 11px;
      opacity: 0.7;
    }

    #twitchTopDonorsList .top-donor-row {
      font-size: 14px;
    }

    #twitchTopDonorsList .top-donor-amount {
      font-size: 14px;
    }

    #streamlabsTopDonorsList .top-donor-row {
  font-size: 14px;
}

#streamlabsTopDonorsList .top-donor-amount {
  font-size: 14px;
}


    #currentKillerWinrate {
      font-weight: 800;
    }

    .winrate-good {
      color: #00ff6a;
    }

    .winrate-mid {
      color: #ffd700;
    }

    .winrate-bad {
      color: #e74c3c;
    }

    .stat-group {
      background: var(--glass);
      border: 1px solid rgba(255,255,255,0.06);
      padding: 16px 24px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: left;
      min-width: 140px;
      backdrop-filter: blur(8px);
    }

    .stat-line{
      font-size: 13px;
    }

    .stat-group.general-stats{
      padding: 10px 16px;
      border-radius: 7px;
      min-width: 200px;
      gap: 4px;
    }

    .stat-group.general-stats .stat-line{
      font-size: 14px;
    }

    .stat-group.general-stats .progress-wrap{
      height: 4px;
      margin-top: 2px;
      margin-bottom: 6px;
    }

    #streakBest {
      color: #ffd700;
    }

    .progress-wrap{
      margin-top:4px;
      margin-bottom:8px;
      width:100%;
      height:8px;
      background:rgba(255,255,255,0.06);
      border-radius:999px;
      overflow:hidden;
    }
    .progress-bar{
      height:100%;
      width:0%;
      background:var(--accent);
      transition:width .3s ease;
    }

    #twitchBitsProgressBar {
      background: #9146FF;
    }

    
.unaplay-bottom-buttons{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 190px;
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  z-index: 2000;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.unaplay-bottom-buttons .btn{
  font-size: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  line-height: 1.1;
  width: 100%;
  min-height: 0;
  height: auto;
}

/* Scrollbar (opcional, Chrome/Edge) */
.unaplay-bottom-buttons::-webkit-scrollbar{ width: 8px; }
.unaplay-bottom-buttons::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 7px;
}
.unaplay-bottom-buttons::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 7px;
}

    .random-button-wrap{ display:none; }

    .center-grid {
      display: grid !important;
      justify-content: center;
      align-content: center;
      grid-template-columns: repeat(8, 1fr);
      grid-auto-rows: 1fr;
      gap: 4px;
      height: 90vh;
      transform: scale(0.85);
      transform-origin: center;
      width: max-content;
      margin: 0 auto;
      padding-top: 40px;
    }

    .center-grid .killer {
      width: 150px !important;
      height: 150px !important;
    }

    .highlight {
      outline: 4px solid red;
      outline-offset: -4px;
    }

    @keyframes blinkRed {
      0% { outline: 4px solid red; }
      50% { outline: 4px solid transparent; }
      100% { outline: 4px solid red; }
    }

    .blink {
      animation: blinkRed 0.5s infinite;
      outline-offset: -4px;
    }

    /* ==== Highlight especial para TABLERO SURVIVOR ==== */

/* Quita el cuadrado rojo en Survivor */
.survivor-cell.highlight {
  outline: none;
}

/* Glow m??s suave y que aparece al instante */
.survivor-cell.highlight img {
  filter: drop-shadow(0 0 1px #ffffff)
          drop-shadow(0 0 2px #ffffff);
  transition: none; /* sin fade, para que se vea desde el primer tick */
}

/* Parpadeo solo para el ganador, con menos resplandor */
@keyframes survivorGlow {
  30%, 100% {
    filter: drop-shadow(0 0 1px #ffffff)
            drop-shadow(0 0 1px #ffffff);
  }
  50% {
    filter: drop-shadow(0 0 1px #00ff00)
            drop-shadow(0 0 2px #00ff00);
  }
}

/* Sobrescribe la animaci??n .blink solo en Survivor */
.survivor-cell.blink {
  animation: none;
}

.survivor-cell.blink img {
  animation: survivorGlow 0.5s infinite;
}



    .last-picked{
      border-color: var(--accent);
    }

    .confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5000;
    }

    .confirm-overlay.hidden {
      display: none;
    }

    .confirm-box {
      background: #000;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 14px;
      padding: 20px 26px;
      max-width: 320px;
      text-align: center;
      box-shadow: none;
    }

    .confirm-text {
      margin-bottom: 18px;
      font-size: 16px;
      font-weight: 600;
    }

    .confirm-buttons {
      display: flex;
      justify-content: center;
      gap: 12px;
    }

    .confirm-btn {
      padding: 8px 16px;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,0.12);
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
    }

    .confirm-yes {
      background: #2e7d32;
      color: #fff;
      border-color: rgba(255,255,255,0.18);
    }

    .confirm-no {
      background: #c62828;
      color: #fff;
      border-color: rgba(255,255,255,0.18);
    }

    .confirm-cancel{
      background:#f57c00;
      color:#111;
      border-color: rgba(255,255,255,0.18);
    }


    /* ===== CONFIRM: selector de PIPS ===== */
    .confirm-pip-area{
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.10);
      text-align: center;
    }
    .confirm-pip-label{
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.85;
      margin-bottom: 10px;
    }
    .confirm-pip-buttons{
      display:flex;
      justify-content:center;
      gap:10px;
      margin-bottom: 8px;
    }

    /* Base */
    .confirm-btn.pip-btn{
      /* IMPORTANTE: en este proyecto existe un "neutralizador" global
         (.btn,.confirm-btn { background: ... !important })
         Por eso aqu?? usamos !important para que los PIPS s?? tengan color. */
      background: #2b2b2b !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      font-weight: 800;
      font-size: 26px;
      line-height: 1;
      min-width: 54px;
      padding: 10px 0;
    }

    /* Colores por PIPS */
    .confirm-btn.pip-btn[data-pips="0"]{ background:#c62828 !important; color:#fff !important; }
    .confirm-btn.pip-btn[data-pips="1"]{ background:#f57c00 !important; color:#111 !important; }
    .confirm-btn.pip-btn[data-pips="2"]{ background:#2e7d32 !important; color:#fff !important; }

    /* Seleccionado */
    .confirm-btn.pip-btn.active{
      filter: brightness(1.12);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.35) inset, 0 0 14px rgba(255,255,255,0.10);
    }

    .confirm-pip-skip{
      display:flex;
      justify-content:center;
      margin: 6px 0 10px;
    }
    .confirm-btn.pip-skip-btn{
      background: rgba(255,255,255,0.10) !important;
      color: rgba(255,255,255,0.90) !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      padding: 8px 14px;
      font-weight: 800;
      letter-spacing: 0.02em;
      border-radius: 10px;
    }
    .confirm-btn.pip-skip-btn:hover{
      filter: brightness(1.1);
    }

    .confirm-pip-hint{
      font-size: 11px;
      opacity: 0.65;
      font-weight: 600;
    }

    /* ===== RETO IRIDISCENTE (panel de grado) ===== */
    .iri-challenge-panel{
  
  position: relative;
  zoom: var(--iri-panel-scale, 1);
  background-color: var(--iri-panel-bg, #000) !important;
  background-image: var(--iri-panel-bg-image, none) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: none !important;

  overflow: hidden;
}


/* Video de fondo (en bucle) */

/* Fallback si 'zoom' no est?? soportado (en Electron s?? suele estarlo) */
@supports not (zoom: 1){
  .iri-challenge-panel{
    transform: scale(var(--iri-panel-scale, 1));
    transform-origin: top left;
  }
}

.iri-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* No comprime: recorta desde el centro */
  object-position: center; /* Centro hacia afuera */
  z-index: 0;
  pointer-events: none;
}

    /* Overlay para opacidad */
.iri-challenge-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--iri-bg-dim, 0.50)); /* <-- Opacidad: cambia --iri-bg-dim (0 a 1) */
  pointer-events:none;
  z-index: 1;
}

/* Asegura que el contenido quede encima del overlay */
.iri-challenge-panel > *:not(.iri-bg-video){
  position: relative;
  z-index: 2;
}

    .iri-title{
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.85;
    }
    .iri-rank{
      display:flex;
      gap: 10px;
      align-items:center;
    }
    .iri-emblem-wrap{
      position: relative;
      width: 180px;
      height: 182px;
      flex: 0 0 112px;
    }
    .iri-emblem{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: contain;
      display:block;
    }
    .iri-roman{
      position:absolute;
      left:50%;
      top:47%;
      transform: translate(-50%,-50%);
      width: 82px;
      height: 82px;
      object-fit: contain;
      filter: drop-shadow(0 0 2px rgba(0,0,0,0.7));
    }
    .iri-progress{
      display:flex;
      flex-direction:column;
      gap: 4px;
      min-width: 0;
    }
    .iri-progress-label{
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display:flex;
      gap: 8px;
      align-items:baseline;
      white-space: nowrap;
    }
    .iri-progress-label #iriRankName{ opacity: 0.80; font-size: 18px; }
    .iri-progress-label #iriRankTier{ opacity: 0.80; font-size: 20px; }
    .iri-progress-bar{
      margin-top: 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 8px 10px;
      background: #000;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
      width: fit-content;
      max-width: 100%;
    }
    .iri-progress-bar-title{
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.95;
      white-space: nowrap;
    }
    .iri-pips-row{
      margin-top: 10px;
      display:flex;
      gap: 4px;
      align-items:center;
      flex-wrap: nowrap;
    }
    .iri-pip-slot{
      position: relative;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
    }
    .iri-pip-circle{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: contain;
      opacity: 0.95;
    }
    .iri-pip-fill{
      position:absolute;
      left:52%;
      top:33%;
      transform: translate(-50%,-50%);
      width: 28px;
      height: 60px;
      object-fit: contain;
      display:none;
      filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
    }
    .iri-pip-slot.filled .iri-pip-fill{
      display:block;
    }
    .iri-pips-meta{
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      opacity: 0.70;
      text-transform: uppercase;
    }

    
    .iri-meta-row{
      margin-top: 10px;
      display:flex;
      flex-direction: column;
      gap: 4px;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.04em;
      opacity: 0.88;
      text-transform: none;
    }
    .iri-meta-row .meta-line{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap: 4px;
    }
    .iri-meta-row .meta-line b{
      font-weight: 900;
    }
    .iri-meta-row .iri-best-record{
      margin-top: 2px;
      font-size: 14px;
      opacity: 0.95;
    }
    .iri-meta-row .iri-best-record b{
      color: #ffd54f;
      text-shadow: 0 0 10px rgba(255, 213, 79, 0.25);
      font-size: 16px;
    }
    .iri-timer-row{
      margin-top: 10px;
      display:flex;
      align-items:center;
      justify-content: flex-start;
      gap: 4px;
    }
    .iri-timer-btn{
      width: 20px;
      height: 20px;
      padding: 0;
      border-radius: 6px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.16);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 12px;
      font-weight: 900;
      color: #fff;
      cursor: pointer;
      user-select:none;
    }
    
    
    .iri-timer-btn .iri-timer-icon{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display:block;
      pointer-events:none;
      user-select:none;
    }
.iri-timer-btn:focus,
    .iri-timer-btn:active{
      outline:none !important;
      box-shadow:none !important;
    }
.iri-timer-btn.running{
      background: #c62828;
      color: #fff;
    }
    .iri-timer-btn.done{
      background: #2e7d32;
      color: #fff;
      cursor: default;
    }
    .iri-timer-display{
      font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.12em;
      opacity: 0.95;
    }

    /* Modal final del reto */
    .iri-stats-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index: 6000;
      padding: 16px;
    }
    .iri-stats-overlay.hidden{display:none;}
    .iri-stats-box{
      width: min(620px, 96vw);
      background: #0b1020;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 16px;
      padding: 18px 18px 14px;
      box-shadow: none;
      text-align:left;
    }

/* Video de fondo SOLO para el modal final de estad??sticas IRI */
.iri-stats-box{
  position: relative;
  overflow: hidden;
  background: transparent; /* deja ver el video */
}

.iri-stats-box::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--iri-bg-dim, 0.50)); /* misma opacidad que el panel IRI */
  pointer-events:none;
  z-index: 1;
}

.iri-stats-box > *:not(.iri-bg-video){
  position: relative;
  z-index: 2;
}


    .iri-stats-box h2{
      margin: 0 0 10px;
      font-size: 16px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .iri-stats-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 14px;
      font-size: 13px;
    }
    .iri-stats-item{
      padding: 10px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.35);
    }
    .iri-stats-item .k{
      opacity: 0.72;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .iri-stats-item .v{
      margin-top: 4px;
      font-weight: 900;
      font-size: 15px;
      letter-spacing: 0.04em;
    }
    .iri-stats-actions{
      display:flex;
      justify-content:flex-end;
      gap: 10px;
      margin-top: 14px;
    }
    /* Bot??n toggle del reto iridiscente */
    #toggleIriChallengeBtn{
      background: #1b4f72;
      border-color: #2980b9;
    }
    #toggleIriChallengeBtn:hover{
      background: #2980b9;
      transform: translateY(-1px) scale(1.02);
    }

.body-compact .unaplay-bottom-buttons .btn { display: none; }

/* En modo compacto se ven SIEMPRE estos 5 */
.body-compact #backToMenuBtn,
.body-compact #goToSurvivorBoardBtn,
.body-compact #compactModeBtn,
.body-compact #resetBtn,
.body-compact #editUnaplayGoalBtn,
.body-compact #editStatsBtn,
.body-compact #toggleIriChallengeBtn {
  display: inline-flex;
}

.body-compact .random-button-wrap { display: none; }

/* P: ocultar/mostrar panel de botones (UNAPLAY + TABLERO SURVIVOR) */
body.buttons-hidden .unaplay-bottom-buttons,
body.buttons-hidden .survivor-bottom-buttons{
  display: none !important;
}
#helpText {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      color: #e6f7ff;
      padding: 20px 30px;
      border-radius: 7px;
      font-size: 13px;
      max-width: 80%;
      text-align: center;
      display: none;
      z-index: 3000;
      box-shadow: none;
    }
    .cell.locked::after{
      content:"WIN";
      position:absolute;
      top:4px;
      left:4px;
      font-size:9px;
      background:rgba(39,174,96,0.9);
      padding:2px 6px;
      border-radius:999px;
      text-transform:uppercase;
      font-weight: 800;
    }
    .one-row .cell.locked::after{
      font-size:7px;
      padding:1px 4px;
      top:2px;
      left:2px;
    }


    /* IRIDISCENTE: desactivar visual de WIN/locked y mostrar contador de Partidas por killer */
    body.iri-challenge-active .cell.locked img{
      filter:none !important;
      opacity:1 !important;
    }
    body.iri-challenge-active .cell.locked::after{
      content:"";
      display:none !important;
    }
    body.iri-challenge-active .cell.iri-matches::after{
      content:"Partidas: " attr(data-iri-matches);
      position:absolute;
      top:6px;
      left:6px;
      font-size:18px;
      background:rgba(6, 75, 12, 0.95); /* verde */
      color:#ffffff; /* texto blanco */
      padding:4px 10px;
      border-radius:999px;
      font-weight:900;
      text-transform:none;
      z-index: 5;
    }
    body.iri-challenge-active .one-row .cell.iri-matches::after{
      font-size:12px;
      padding:3px 8px;
      top:4px;
      left:4px;
    }

    .center-grid .cell.locked::after{
      font-size:15px;
      padding:4px 10px;
      top:6px;
      left:6px;
    }

    #resetBtn {
      background: #c0392b;
      border-color: #e74c3c;
    }
    #resetBtn:hover {
      background: #e74c3c;
      transform: translateY(-1px) scale(1.02);
    }

    #hardResetBtn {
      background: #7b0b17;
      border-color: #ff5c6c;
    }
    #hardResetBtn:hover {
      background: #ff5c6c;
      transform: translateY(-1px) scale(1.02);
    }

    #oneRowBtn,
    #centerGridBtn {
      background: #154360;
      border-color: #1f618d;
    }
    #oneRowBtn:hover,
    #centerGridBtn:hover {
      background: #1f618d;
      transform: translateY(-1px) scale(1.02);
    }

    #compactModeBtn {
      background: #2c3e50;
      border-color: #4b6584;
    }
    #compactModeBtn:hover {
      background: #4b6584;
      transform: translateY(-1px) scale(1.02);
    }

    #editStatsBtn {
      background: #4a235a;
      border-color: #8e44ad;
    }
    #editStatsBtn:hover {
      background: #8e44ad;
      transform: translateY(-1px) scale(1.02);
    }

    #toggleSoundBtn {
      background: #145a32;
      border-color: #27ae60;
    }
    #toggleSoundBtn:hover {
      background: #27ae60;
      transform: translateY(-1px) scale(1.02);
    }

    #helpBtn {
      background: #1b2631;
      border-color: #2980b9;
    }
    #helpBtn:hover {
      background: #2980b9;
      transform: translateY(-1px) scale(1.02);
    }

    #randomBtn {
      background: transparent;
      border-color: var(--accent);
      color: var(--accent);
    }
    #randomBtn:hover {
      background: rgba(39, 174, 96, 0.12);
      transform: translateY(-1px) scale(1.02);
    }

    #toggleExtraStatsBtn {
      background: #273746;
      border-color: #5d6d7e;
    }
    #toggleExtraStatsBtn:hover {
      background: #5d6d7e;
      transform: translateY(-1px) scale(1.02);
    }

    .current-killer-meta{
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: #b0b0b0;
      opacity: 0.7;
      margin-bottom: 2px;
    }

    .top-killer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    #topKillersList {
      transition: opacity 0.4s ease-in-out;
    }

    #topKillersList.fade-out {
      opacity: 0;
    }

    #topKillersList.fade-in {
      opacity: 1;
    }

    .top-donor-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-size: 13px;
    }

/* Top lists del Tablero Survivor */
#survivorDonorsPanel .top-donor-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#survivorDonorsPanel .top-donor-row:last-child{ border-bottom:none; }

#survivorDonorsPanel .top-donor-name{
  flex:0 1 auto;
  max-width: 165px;
  text-align:left;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#survivorDonorsPanel .top-donor-amount{
  margin-left: 2px;
  font-weight:700;
  text-align:right;
}

#survivorTimersPanel .survivor-timer-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#survivorTimersPanel .survivor-timer-row:last-child{ border-bottom:none; }
#survivorTimersPanel .survivor-timer-row.is-soon .top-donor-amount{
  color:#ffb74d;
  font-weight:800;
}
#survivorTimersPanel .survivor-timer-row.is-soon .top-donor-name{
  color:#ffe0b2;
}

/* Top donadores del Tablero Killer (mismo estilo que Survivor) */
#killerDonorsPanel .top-donor-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:2px 0;
  border-bottom: 1px solid #ffffff;
}
#killerDonorsPanel .top-donor-row:last-child{ border-bottom:none; }

#killerDonorsPanel .top-donor-name{
  flex:0 1 auto;
  max-width: 165px;
  text-align:left;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#killerDonorsPanel .top-donor-amount{
  margin-left: 2px;
  font-weight:700;
  text-align:right;
}


/* Tabla de precios del Tablero Survivor */
#survivorPricesPanel{
  padding: 12px 16px;
}
#survivorPricesPanel .stat-line{
  margin-bottom: 4px;
}
#survivorPricesPanel .prices-table{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
}
#survivorPricesPanel .price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size:13px;
}
#survivorPricesPanel .price-row:last-child{ border-bottom:none; }
#survivorPricesPanel .price-name{
  flex:1;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity: .92;
}
#survivorPricesPanel .price-val{
  text-align:right;
  font-weight:700;
  white-space:nowrap;
}
#survivorPricesPanel .prices-note{
  margin-top:10px;
  font-size:11px;
  line-height:1.25;
  opacity:0.65;
  font-weight:600;
}


    .top-donor-name {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .top-donor-name.rank-1 {
      color: #FFD700;
    } 

    .top-donor-name.rank-2 {
      color: #C0C0C0;
    }

    .top-donor-name.rank-3 {
      color: #CD7F32;
    }

    .top-donor-amount {
      font-weight: 600;
      opacity: .9;
      font-size: 13px;
    }

    .top-killer-rank {
      opacity: .7;
      width: 28px;
    }

    .top-killer-name {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .top-killer-winrate {
      font-weight: 600;
      font-size: 13px;
      opacity: .9;
    }

    #twitchStatsPanel {
      position: fixed;
      top: 533px;
      right: 20px;
      left: auto;
      width: 260px;
      display: inline-block;
      padding: 0;
      border-radius: 7px;
      font-size: 12px;
      overflow: hidden;
      min-height: 150px;
    }

    .twitch-subpanel {
      padding: 10px 16px;
      box-sizing: border-box;
      transition: opacity 0.5s ease;
    }

    .twitch-subpanel-visible {
      opacity: 1;
      pointer-events: auto;
      position: static;
    }

    .twitch-subpanel-hidden {
      opacity: 0;
      pointer-events: none;
      position: absolute;
      inset: 0;
    }

    body.killer-active .twitch-subpanel-hidden {
      display: none !important;
    }

    body.killer-active #twitchStatsPanel {
      display: none !important;
    }

    #backToMenuBtn {
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 16px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  transition: background 0.2s ease, transform 0.1s ease;
}

#backToMenuBtn:hover {
  background: rgba(39, 174, 96, 0.6);
  transform: translateY(-1px) scale(1.02);
}

.unaplay-bottom-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

 #tableroGrid {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 columnas */
    grid-template-rows: repeat(7, 1fr); /* 7 filas */
    gap: 10px; /* Espacio entre los cuadros */
  }
  .grid-item {
    width: 100%;
    height: 100px; /* Tama??o de cada cuadro */
    background-color: #333;
    border-radius: 5px;
    border: 1px solid #444;
  }
  
/* ==== TABLERO SURVIVOR (60 perks) ==== */

/* Contenedor general del modo Survivor */
#tableroSurvivorContent{
  display:none;
  width:100%;
  height:100vh;         /* altura fija de la vista */
  box-sizing:border-box;
  padding: 3px 6px 40px;
  overflow:hidden;      /* que no se alargue hacia abajo */
}


/* Layout: izquierda (stats), centro (tablero), derecha (botones) */
#survivorLayout{
  display:flex;
  gap:32px;
  align-items:flex-start;
  justify-content:space-between; /* ???????? clave: ya no se centra */
  width:100%;
}

/* para que no se deformen */
.survivor-left{
  flex: 0 0 260px;
}
.survivor-right{
  flex: 0 0 260px;
}
.survivor-center{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* arriba, no centrado vertical */
  padding-top: 6px;
}



/* ==== COLUMNA IZQUIERDA: FOTO + STATS ==== */
.survivor-left{
  width:260px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.survivor-portrait{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  background:var(--glass);
  padding:8px;
}

.survivor-portrait img{
  width:100%;
  border-radius:12px;
  object-fit:cover;
  display:block;
}

/* ==== CENTRO: TABLERO 60 PERKS ==== */
.survivor-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Caja que limita el tablero Survivor */
.survivor-grid-wrapper{
  max-width: 1500px;                 /* puedes bajar a 1200 si quieres */
  height: calc(100vh - 220px);       /* espacio disponible para el tablero */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;                   /* lo que sobre no empuja la p??gina */
}


/* Rejilla fija: 10 x 6, perks grandes y juntas */
/* Tablero Survivor: perks m??s grandes */
.survivor-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 96px);  /* casillas m??s peque??as */
  grid-auto-rows: 96px;
  gap: 4px;                                  /* un poco de espacio entre perks */
  justify-content: center;
  align-content: start;
  transform-origin: top center;
  transition: transform 0.2s ease-out;       /* para el escalado */
}

/* =========================
   SURVIVOR: CONTADOR W/L
   (5 victorias + derrotas)
   ========================= */
.survivor-match-tracker{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap: 14px;
  margin: 0;
  user-select:none;
  pointer-events:none;
}

#survivorLossBlock{ display:none; }



/* =========================
   SURVIVOR: TRACKER ARRIBA (SIEMPRE VISIBLE)
   ========================= */
.survivor-center{ position: relative; }

/* Pegar el tracker arriba y centrado (no depende del layout del grid) */
#survivorMatchTracker{
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding-top: 4px;
  pointer-events:none;
}

/* Deja espacio para el tracker arriba del tablero */
.survivor-grid-wrapper{
  margin-top: 130px;
}

.survivor-match-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 4px;
}

.survivor-match-title{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  opacity: 0.92;
  line-height: 1.1;
  white-space: nowrap;
}
.survivor-match-icons{
  display:flex;
  align-items:center;
  gap: 10px;
}

.survivor-match-sep{
  width: 3px;
  height: 34px;
  margin-top: 18px;
  border-radius: 3px;
  background: rgba(255,255,255,0.85);
  opacity: 0.9;
}

.survivor-match-icon{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display:block;
  filter: none;
}

.survivor-match-icon.is-gray{
  filter: grayscale(1) contrast(0.9) brightness(0.85);
  opacity: 0.75;
}




/* Cada casilla del tablero (ocupa todo el espacio del grid) */
/* Casilla sin fondo negro, solo la perk */
/* Casilla con fondo oscuro para todas las perks del Tablero Survivor */
.survivor-cell{
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;      /* <- ya no pinta todo el cuadro */
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Fondo oscuro m??s peque??o (ajusta el inset) */
.survivor-cell::before{
  content:"";
  position:absolute;
  inset: 8px;
  background: transparent;  /* ya no se ve el fondo */
  border-radius: 7px;
  z-index: 0;
}


.survivor-cell-inner{ z-index: 1; }
.survivor-cell-donor{ z-index: 2; }
.survivor-cell.eslog::after,
.survivor-cell.mepela::after,
.survivor-cell.comodin::after{ z-index: 3; }



/* Contenedor interno de la imagen */
.survivor-cell-inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Imagen de la perk */
/* La imagen de la perk ocupa toda la casilla */
.survivor-cell img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* respeta la forma del rombo */
  display: block;
}


/* Nombre del donador dentro de la casilla */
.survivor-cell-donor{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  text-align:center;
  font-size:13px;
  background:rgba(0,0,0,0.75);
  padding:3px 5px;
  border-radius:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Etiquetas visuales para tipos de casilla */
.survivor-cell.eslog::after{
  content:"";
}

.survivor-cell.mepela::after{
  content:"";
}

.survivor-cell.comodin::after{
  content:"";
}
/* Casillas vac??as (espacios libres para donaciones futuras) */
.survivor-cell.empty{
  opacity:0.4;
}

/* ==== COLUMNA DERECHA: TABLERO TEMPORAL + BOTONES ==== */
.survivor-right{
  width:260px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.survivor-bottom-buttons{
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 170px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  z-index:2000;
}

.unaplay-bottom-buttons{
  position: fixed;
  left: 14px;      /* igual que Survivor */
  bottom: 14px;
  width: 170px;    /* igual que Survivor */
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  z-index:2000;
  max-height: 46vh;      /* por si hay muchos botones en modo completo */
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

/* Oculta scrollbar para que se vea limpio (igual estilo panel survivor) */
.unaplay-bottom-buttons{ scrollbar-width: none; }
.unaplay-bottom-buttons::-webkit-scrollbar{ width: 0; height: 0; }

.unaplay-bottom-buttons .btn{
  width: 100%;
  text-align: center;
  letter-spacing: 0.04em;
}

.survivor-bottom-buttons .btn{
  font-size:10px;
  padding:6px 8px;
  border-radius:10px;
  line-height:1.1;
  width:100%;
  min-height:0;
  height:auto;
}

#survivorRandomBtn,
#survivorResetRollBtn{
  display:none !important;
}

/* ==== RESPONSIVE (pantallas m??s peque??as) ==== */
@media (max-width:1100px){
  #survivorLayout{
    flex-direction:column;
    align-items:center;
  }

  .survivor-left,
  .survivor-right{
    width:100%;
    max-width:420px;
  }

  .survivor-center{
    order:-1; /* tablero arriba en m??vil */
  }

  .survivor-grid{
    grid-template-columns:repeat(8, 56px);
    grid-auto-rows:56px;
    gap:8px;
  }

.survivor-cell{
  margin: 0;
  padding: 0;
}
  .survivor-bottom-buttons{
    width:160px;
    left:10px;
    bottom:10px;
  }

  .unaplay-bottom-buttons{
    width:160px;
    left:10px;
    bottom:10px;
  }

}

#survivorTimersPanel{
  position: fixed;   /* lo saca del layout y lo pega a la ventana */
  top: 430px;         /* altura desde arriba: AJ????STALO a gusto */
  right: 10px;       /* distancia del borde derecho: AJ????STALO tambi??n */
  width: 250px;      /* mismo ancho que tus tarjetas laterales */
  z-index: 20;       /* para que quede por encima de todo */
}

#killerTimersPanel{
  position: fixed;   /* igual que survivor */
  top: 430px;
  right: 10px;
  width: 250px;
  z-index: 20;
}

#survivorTimersPauseBtn:hover,
#killerTimersPauseBtn:hover{
  background: rgba(255,255,255,0.10);
}
#survivorTimersPauseBtn.is-paused,
#killerTimersPauseBtn.is-paused{
  background: rgba(39,174,96,0.18);
  border-color: rgba(39,174,96,0.65);
}


/* ===== PERKS QUE SE USAR????N (panel inferior) ===== */
.survivor-used-perks{
  position: fixed;
  left: 50%;
  bottom: 18px;                  /* ???????? sube/baja TODO el panel */
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                      /* separaci??n head ?????? perks */
  pointer-events: none;

  /* Ancho "visual"?? del bloque inferior para que el t??tulo/la raya
     y la fila de perks queden centrados y alineados entre s??. */
  --usedW: min(980px, 94vw);
}

.survivor-used-sep{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  opacity: .9;
  transform: translateY(var(--sepY));
}

.survivor-used-title{
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;                       /* base del texto */
  text-align: center;

  font-size: 25px;
  letter-spacing: 0.0em;
  text-transform: uppercase;
  opacity: 1.00;

  transform: translateY(var(--titleY));
}

#survivorLastRollName{
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}


.survivor-used-row{
  display: flex;
  gap: 58px;
  width: var(--usedW);
  justify-content: center; /* ???????? centra los slots dentro del ancho */
  align-items: center;
}

/* Donador ARRIBA en los 4 slots usados (abajo) */
.survivor-used-wrap{
  position: relative;
  width: 150px;
  height: 150px;
  padding-top: 26px;             /* ???????? espacio para que el nombre NO choque con el rombo */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.survivor-used-donor{
  position: absolute;
  top: 4px;                   /* ???????? arriba dentro del slot */
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
  font-size: 14px;
  background: rgba(0,0,0,0.75);
  padding: 4px 6px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  z-index: 5;                 /* ???????? evita que el rombo lo tape */
}
.survivor-used-donor.is-visible{ opacity: 1; }


/* ???????? Ajustes FINOS (toca estos n??meros) */
.survivor-used-head{
  width: var(--usedW);
  position: relative;
  height: 26px;                   /* alto reservado para raya+t??tulo */

  --sepY: 50Px;                    /* ???????? sube/baja la raya */
  --titleY: 25px;                 /* ???????? sube/baja el texto */
}


.survivor-used-slot{
  width: 56px;
  height: 56px;
padding: 5px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  margin-top: 10px;           /* ???????? baja un pel??n el rombo para dejar aire al nombre */
  transform: scale(2.40);
  transform-origin: center;
}

/* CONTENEDOR del t??tulo "PERK QUE SE USAR????N:" */
.perks-used-head{
  position: relative;
  margin-top: -10px;   /* sube TODO el bloque (raya + texto) */
  padding-top: 0;
}

/* Si tu raya es un pseudo-elemento */
.perks-used-head::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: -8px;           /* sube la raya */
  height: 2px;
  background: rgba(230,247,255,.75);
}

/* Texto del t??tulo */
.perks-used-head .title{
  position: relative;
  top: -26px;           /* sube el texto */
}

/* Permite click SOLO en las im??genes de perks usadas */
.survivor-used-perks { pointer-events: none; }
.survivor-used-slot  { pointer-events: auto; cursor: pointer; }

/* Perk candidata con borde rojo */
.survivor-used-candidate{
  outline: 2px solid rgba(231,76,60,0.95);
  outline-offset: 2px;
  border-radius: 7px;
}

/* Cuando est?? esperando que elijas reemplazo, marcamos los 4 locks */
/* Sigue siendo clickeable, pero sin "candados/cuadritos"?? visuales */
.survivor-slot-clickable{
  outline: none !important;
  box-shadow: none !important;
}

/* === HOVER "SELECCIONAR"?? SOLO CUANDO EST????N LISTAS PARA REEMPLAZO === */
.survivor-used-slot.survivor-slot-clickable{
  transition: transform .12s ease, filter .12s ease, outline-color .12s ease, box-shadow .12s ease;
}

.survivor-used-slot.survivor-slot-clickable:hover{
  transform: scale(3.55); /* un poquito m??s que 2.40 */

  outline-offset: 4px;

}

.survivor-used-slot.survivor-slot-clickable:active{
  transform: scale(5.90);
}

.survivor-used-slot.survivor-slot-clickable:focus-visible{
  outline: 2px solid rgba(39,174,96,.95) !important;
  outline-offset: 4px;
}



#survivorCandidatePerk {
  display: none !important;
}

/* Oculta COMPLETAMENTE el 5???? slot (perk candidata) y su donador */
.survivor-used-candidate-wrap{ display:none !important; }
#survivorCandidateDonor{ display:none !important; }


.survivor-used-title {
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  text-align: center;
  display: flex;
  justify-content: space-between; /* Esto mover?? el bot??n a la derecha */
  align-items: center; /* Alinea los elementos verticalmente */
  font-size: 30px;
  letter-spacing: 0.0em;
  text-transform: uppercase;
    color: rgb(255, 255, 255);
  opacity: 1.0;
  transform: translateY(var(--titleY));
  padding: 0 10px; /* Agrega un poco de espacio en los extremos */
}

.survivor-ignore-btn {
  pointer-events: auto;
  position: relative;
  left: 0;
  right: 0;
  top: -5px;
  text-align: right;
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid rgba(231, 76, 60, 0.95);
  color: rgba(231, 76, 60, 0.95);
  cursor: pointer;
  line-height: 0.8;
}

.survivor-ignore-btn:hover {
  background: rgb(0, 0, 0);
}



#survivorUsedPerksPanel {
    display: flex; /* Aseg??rate de que est?? visible por defecto */
}

/* Oculta el centro + panel inferior SOLO en el Tablero Survivor */
#tableroSurvivorContent#tableroSurvivorContent.center-hidden .survivor-grid-wrapper{
  display: none !important;
}
#tableroSurvivorContent.center-hidden #survivorUsedPerksPanel{
  display: none !important;
}

#tableroSurvivorContent.center-hidden .survivor-bottom-buttons{
  display: none !important;
}

/* =========================
   SURVIVOR: BORDES SIN GLOW
   ========================= */

/* Quita cualquier glow/shadow que tengas puesto */
.survivor-cell.highlight img,
.survivor-cell.blink img{
  filter: none !important;
  animation: none !important;
}

/* Borde base (apagado) */
.survivor-cell{
  outline: none;
}

/* SELECCI?????N (cuando la ruleta est?? pasando por encima o marcando) -> BLANCO */
.survivor-cell.highlight{
  outline: 8px solid #ffffff !important;  /* <-- grosor aqu?? */
  outline-offset: -8px !important;        /* queda pegado hacia adentro */
  border-radius: 12px;                    /* ajusta si quieres */
}

/* GANADOR / PARPADEO -> VERDE (sin brillo, solo borde) */
@keyframes survivorBorderBlink {
  0%, 100% { outline-color: #00ff00; }
  50%      { outline-color: transparent; }
}

.survivor-cell.blink{
  outline: 8px solid #00ff00 !important;  /* <-- grosor aqu?? */
  outline-offset: -8px !important;
  border-radius: 12px;
  animation: survivorBorderBlink 0.5s infinite !important;
}

 /* =========================
   KILLER: BORDES IGUAL QUE SURVIVOR (marco, no perk)
   ========================= */

/* (Opcional pero recomendado) que el marco recorte bien el borde interno */
.killer-perk-cell{
  border-radius: 12px;
  overflow: hidden;
}

/* SELECCIÓN (ruleta pasando) -> BLANCO en el marco */
.killer-perk-cell.highlight{
  outline: 5px solid #ffffff !important;
  outline-offset: -8px !important;
  border-radius: 12px;
}

/* GANADOR / PARPADEO -> VERDE en el marco */
@keyframes killerBorderBlink {
  0%, 100% { outline-color: #00ff00; }
  50%      { outline-color: transparent; }
}

.killer-perk-cell.blink{
  outline: 5px solid #00ff00 !important;
  outline-offset: -8px !important;
  border-radius: 12px;
  animation: killerBorderBlink 0.5s infinite !important;
}

 
    /* ==== MODAL ASIGNADOR DE DONACIONES (BITS / STREAMLABS) ==== */
    .alloc-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5000;
      padding: 16px;
    }
    .alloc-overlay.hidden{display:none;}
    .alloc-box{
      width: min(560px, 96vw);
      background: #0b1020;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 14px;
      padding: 16px 16px 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.55);
      backdrop-filter: blur(10px);
      color: var(--text);
      position: relative;
      overflow: hidden;
    }
    .alloc-box::before{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(0,0,0,var(--iri-bg-dim, 0.50));
      pointer-events:none;
      z-index: 1;
    }
    .alloc-box > *:not(.iri-bg-video){
      position: relative;
      z-index: 2;
    }
    .alloc-title{
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 6px;
      letter-spacing: .2px;
    }
    .alloc-sub{
      font-size: 13px;
      opacity: .82;
      margin-bottom: 12px;
      line-height: 1.35;
      word-break: break-word;
    }
    .alloc-budget{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px;
    }
    .alloc-manual{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px;
    }
    .alloc-manual-row{
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .alloc-manual-label{
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      opacity: 0.7;
    }
    .alloc-manual-input{
      height: 30px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      padding: 0 10px;
      font-size: 12px;
    }
    .alloc-pill{
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 8px 10px;
      font-size: 12px;
    }
    .alloc-pill b{
      display:block;
      font-size: 14px;
      margin-top: 3px;
      letter-spacing: .2px;
    }
    .alloc-options{
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 10px;
    }
    .alloc-row{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px;
      padding: 10px 10px;
    }
    .alloc-left{
      display:flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .alloc-name{
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .alloc-price{
      font-size: 12px;
      opacity: .75;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .alloc-stepper{
      display:flex;
      align-items:center;
      gap: 8px;
      flex-shrink: 0;
    }
    .alloc-stepper .alloc-btn{
      width: 34px;
      height: 32px;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      font-weight: 900;
      cursor: pointer;
    }
    .alloc-stepper .alloc-btn:disabled{
      opacity: .35;
      cursor: not-allowed;
    }

    .alloc-stepper .alloc-btn.alloc-max{
      width: 52px;
      font-size: 11px;
      letter-spacing: .35px;
      padding: 0 6px;
    }
    .alloc-qty{
      min-width: 26px;
      text-align: center;
      font-weight: 900;
      font-size: 14px;
    }
    .alloc-note{
      font-size: 12px;
      opacity: .75;
      margin-bottom: 12px;
      line-height: 1.35;
    }
    .alloc-saved-btn{
      width: 100%;
      margin-bottom: 8px;
      font-size: 11px;
    }
    .alloc-saved{
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 8px;
      margin-bottom: 10px;
      max-height: 180px;
      overflow-y: auto;
      background: rgba(255,255,255,0.03);
    }
    .alloc-saved-list{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .alloc-saved.hidden{
      display: none;
    }
    .alloc-saved-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 4px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .alloc-saved-row:last-child{
      border-bottom: none;
    }
    .alloc-saved-info{
      min-width: 0;
    }
    .alloc-saved-title{
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .alloc-saved-meta{
      font-size: 10px;
      opacity: 0.7;
    }
    .alloc-saved-load{
      font-size: 10px;
      padding: 6px 8px;
    }
    .alloc-saved-empty{
      font-size: 12px;
      opacity: 0.7;
      padding: 4px 2px;
    }
    .alloc-actions{
      display:flex;
      gap: 10px;
      justify-content: flex-end;
    }
    .alloc-actions .confirm-btn{
      min-width: 120px;
      border-radius: 12px;
    }

  
/* =========================
   UNAPLAY: MATCH TRACKER (10 victorias, sin derrotas)
   - Coloca tu imagen en la misma carpeta que este index.html y n??mbrala:
     unaplay_win.png
   - Para victorias BONUS (donadas), coloca tambi??n:
     unaplay_win_bonus.png
   ========================= */
.unaplay-match-tracker{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 14px;
  border: none;
  background: transparent;
  backdrop-filter: none;
  }

.unaplay-survivor-match-tracker{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  pointer-events: none;
  user-select: none;
}

.unaplay-match-title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
  opacity: 0.92;
  text-transform: uppercase;
}
.unaplay-match-icons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.unaplay-match-icons--bonus{
  margin-bottom: 2px;
}
.unaplay-match-icon{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}
.unaplay-match-icon.is-gray{
  filter: grayscale(1) contrast(0.9) brightness(0.85);
  opacity: 0.75;
}


/* === Botones sin color (neutros) === */
.btn,
.confirm-btn{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.btn:hover,
.confirm-btn:hover{
  background: rgba(255,255,255,0.10) !important;
}

.btn:active,
.confirm-btn:active{
  transform: translateY(1px);
}

/* Neutraliza variantes con color si exist??an */
.btn.green,.btn.red,.btn.blue,.btn.purple,.btn.orange,
.btn-success,.btn-danger,.btn-primary,.btn-secondary,.btn-warning,
.confirm-yes,.confirm-no{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
}

/* === UNAPLAY: ocultar botones (siguen funcionando con atajos) === */
#unaplayContent #oneRowBtn,
#unaplayContent #centerGridBtn,
#unaplayContent #toggleExtraStatsBtn,
#unaplayContent #helpBtn,
#unaplayContent #markWinBtn{
  display: none !important;
}

/* === Men??: panel de atajos === */
.menu-shortcuts-panel{
  margin: 14px auto 0 auto;
  max-width: 560px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.menu-shortcuts-title{
  font-weight: 900;
  letter-spacing: 0.10em;
  font-size: 13px;
  opacity: 0.95;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.menu-shortcuts-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 650px){
  .menu-shortcuts-grid{ grid-template-columns: 1fr; }
}
.menu-shortcuts-section{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  text-align: left;
}
.menu-shortcuts-subtitle{
  font-weight: 800;
  font-size: 12.5px;
  opacity: 0.92;
  margin-bottom: 6px;
}
.menu-shortcuts-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  opacity: 0.90;
  line-height: 1.25;
}
.menu-shortcuts-note{
  font-size: 12px;
  opacity: 0.70;
  margin-top: 8px;
}

/* ========================================
   BOT??N DE PAUSA/PLAY - ??REA CLICKEABLE MEJORADA
   ======================================== */
#survivorTimersPauseBtn,
#killerTimersPauseBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 4px 4px !important;
  font-size: 22px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0px !important;
  min-height: 0px !important;
  z-index: 10;
  line-height: 1 !important;
}

#survivorTimersPauseBtn .timers-pause-icon,
#killerTimersPauseBtn .timers-pause-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

#survivorTimersPauseBtn:hover,
#killerTimersPauseBtn:hover {
  background: rgba(39, 174, 96, 0.8);
  border-color: rgba(39, 174, 96, 1);
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(39, 174, 96, 0.5);
}

#survivorTimersPauseBtn:active,
#killerTimersPauseBtn:active {
  transform: scale(0.95);
}

/* ============================================ */
/* TABLERO KILLER - TEMA OSCURO */
/* ============================================ */

#tableroKillerContent {
  width: 100%;
  height: 100vh;
  position: relative;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  padding: 12px 10px 24px;
  box-sizing: border-box;
}

.killer-container {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* Columna Izquierda */
.killer-left {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.killer-stats,
.killer-top-donors,
.killer-prices,
.killer-used-section,
.killer-temporary-section {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 24px;
  backdrop-filter: blur(8px);
}

.killer-used-section{
  background: transparent;
  border: none;
  padding: 0;
}

.killer-match-tracker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.killer-tracker-section {
  background: rgba(0, 0, 0, 0.35);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}

.killer-tracker-label {
  font-size: 13px;
  color: rgba(230, 247, 255, 0.75);
  margin-bottom: 6px;
  font-weight: 700;
}

.killer-tracker-count {
  font-size: 28px;
  color: var(--accent);
  font-weight: 900;
  text-align: center;
  margin: 6px 0;
}

.killer-tracker-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.killer-match-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.killer-survivor-progress {
  margin-top: 12px;
  padding: 10px;
  background: rgba(39, 174, 96, 0.10);
  border-radius: 10px;
  border: 1px solid rgba(39, 174, 96, 0.35);
}

.killer-progress-title {
  font-size: 12px;
  color: rgba(230, 247, 255, 0.75);
  margin-bottom: 6px;
  font-weight: 700;
}

.killer-progress-count {
  font-size: 22px;
  color: var(--accent);
  font-weight: 900;
  text-align: center;
  margin: 6px 0;
}

.killer-progress-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.killer-survivor-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.killer-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.killer-controls .btn {
  width: 100%;
}

.killer-btn {
  font-size: 11px;
}

.killer-top-donors {
  padding: 14px;
}

#killerTopDonorsList {
  max-height: 260px;
  overflow-y: auto;
}

.killer-donor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 4px 0;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}

.killer-donor-rank {
  font-weight: 800;
  color: rgba(230, 247, 255, 0.7);
  min-width: 26px;
}

.killer-donor-name {
  flex: 1;
  color: var(--text);
  margin: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.killer-donor-bits {
  color: rgba(230, 247, 255, 0.7);
  font-weight: 700;
  white-space: nowrap;
}

.killer-prices {
  padding: 14px;
}

.killer-prices-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.killer-price-btn{
  display: flex;
}

.killer-prices-actions .btn{
  width: 100%;
  font-size: 10px;
  padding: 6px 8px;
}

/* Columna Centro */
.killer-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
}

.killer-board-grid {
  display: grid;
  grid-template-columns: repeat(10, 80px);
  grid-auto-rows: 80px;
  gap: 3px;
  justify-content: center;
  align-content: start;

  /* QUITAR CAJA */
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.killer-roulette-wrap {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 10px 12px 20px;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: var(--roulette-text);
  box-sizing: border-box;
  --roulette-bg: #0b0f14;
  --roulette-accent: #ffcc33;
  --roulette-text: #f5f7ff;
  --roulette-ring: #11161d;
}

.killer-roulette-head {
  width: min(680px, 92vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.killer-roulette-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.killer-roulette-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(520px, 44vw);
}

.killer-roulette-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--roulette-text);
}

.killer-roulette-theme-btn {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.2);
}

.killer-roulette-wheel-area {
  position: relative;
  width: min(72vh, 88vw, 700px);
  height: min(72vh, 88vw, 700px);
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
}

.killer-roulette-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--roulette-bg);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  transform: rotate(0deg);
  will-change: transform;
  overflow: hidden;
}

.killer-roulette-wheel canvas {
  display: block;
  border-radius: 50%;
}

.killer-roulette-hub {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.7));
  border: 4px solid var(--roulette-accent);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.killer-roulette-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 34px solid var(--roulette-accent);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
  z-index: 3;
  cursor: pointer;
}

.killer-roulette-current {
  width: 280px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 18px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

.killer-roulette-current.is-donation {
  border-color: rgba(26, 123, 56, 0.7);
}

.killer-roulette-current-label {
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffffff;
}

.killer-roulette-current-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 12px;
  background: transparent;
  border: none;
  padding: 0;
}

.killer-roulette-current-name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.killer-roulette-current.is-donation .killer-roulette-current-name {
  color: rgba(215, 247, 225, 0.95);
}

#tableroKillerContent.killer-mode-roulette .killer-board-grid {
  display: none;
}

#tableroKillerContent.killer-mode-roulette .killer-roulette-wrap {
  display: flex;
}

#tableroKillerContent.killer-mode-grid .killer-roulette-wrap {
  display: none;
}

@media (max-width: 1100px) {
  .killer-roulette-body {
    flex-direction: column;
  }

  .killer-roulette-current {
    width: min(260px, 85vw);
  }
}


.killer-perk-cell{
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  cursor: default;
  position: relative;
  border: 2px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ Fondo igual estilo “perk background” */
  background-image: url("../perks/fondo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Donador en perks temporales del grid (centro) */
.killer-cell-donor{
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
  font-size: 12px;
  background: rgba(0,0,0,0.75);
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 5;
}




.killer-perk-cell:hover {
  border-color: rgba(39, 174, 96, 0.65);
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(39, 174, 96, 0.25);
}

.killer-perk-cell.fixed {
  border-color: rgba(255,255,255,0.10);
}

.killer-perk-cell.temporary {
  border-color: rgba(39, 174, 96, 0.35);
}

.killer-perk-cell.temporary.empty {
  border: none;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  display: none;
}

.killer-perk-cell.temporary.empty:hover {
  transform: none;
  box-shadow: none;
}

.killer-perk-cell.temporary.empty img {
  opacity: 0;
}

#tableroKillerContent .killer-bottom-buttons {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  z-index: 2000;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

#tableroKillerContent .killer-bottom-buttons .btn {
  font-size: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  line-height: 1.1;
  width: 100%;
  min-height: 0;
  height: auto;
}

.killer-perk-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: -10px;
  box-sizing: border-box;
}

#tableroKillerContent .killer-used-perks{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  pointer-events: none;
  z-index: 1200;
  --usedW: min(600px, 84vw);
}

#tableroKillerContent .killer-roulette-side .killer-used-perks{
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  z-index: 2;
  --usedW: 100%;
}

#tableroKillerContent .killer-roulette-side .killer-used-head{
  width: 100%;
}

#tableroKillerContent .killer-roulette-side .killer-used-row{
  width: 100%;
}

.killer-used-head{
  width: var(--usedW);
  position: relative;
  height: 26px;
  --sepY: 44px;
  --titleY: 19px;
  --annulY: 0px;
}

.killer-used-annul{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #22c55e;
  text-transform: uppercase;
  transform: translateY(var(--annulY));
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.killer-used-annul.is-visible{
  opacity: 1;
}

.killer-used-sep{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  opacity: 0.9;
  transform: translateY(var(--sepY));
}

.killer-used-title{
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  letter-spacing: 0.0em;
  text-transform: uppercase;
  opacity: 1.0;
  transform: translateY(var(--titleY));
  padding: 0 10px;
  color: rgb(255, 255, 255);
}

.killer-ignore-btn{
  pointer-events: auto;
  position: relative;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid rgba(231, 76, 60, 0.95);
  color: rgba(231, 76, 60, 0.95);
  cursor: pointer;
  line-height: 0.9;
}

.killer-ignore-btn:hover{
  background: rgb(0, 0, 0);
}

.killer-used-row {
  display: flex;
  gap: -6px;
  width: var(--usedW);
  justify-content: center;
  align-items: center;
}

.killer-used-actions{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.killer-used-commodin-btn{
  font-size: 12px;
  padding: 6px 12px;
}

.killer-used-wrap{
  position: relative;
  width: 110px;
  height: 110px;
  padding-top: 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.killer-used-donor{
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
  font-size: 14px;
  background: rgba(0,0,0,0.75);
  padding: 4px 6px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.killer-used-donor.is-visible{ opacity: 1; }

.killer-used-cell {
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  overflow: hidden;
}

.killer-used-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}

.killer-used-slot{
  width: 54px;
  height: 54px;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
  pointer-events: none;
  position: relative;
  z-index: 1;
  margin-top: 4px;
  transform: scale(2.5);
  transform-origin: center;
}

.killer-used-slot.killer-slot-clickable{
  pointer-events: auto;
  cursor: pointer;
}

.killer-used-candidate{
  outline: 2px solid rgba(231,76,60,0.95);
  outline-offset: 2px;
  border-radius: 7px;
}

/* Oculta visualmente el 5to slot (perk candidata) en Killer */
#tableroKillerContent .killer-used-candidate-wrap{
  display: none !important;
}
#tableroKillerContent #killerCandidateDonor{
  display: none !important;
}

body.buttons-hidden #tableroKillerContent .killer-bottom-buttons{
  display: none !important;
}

#tableroKillerContent.center-hidden .killer-center{
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#tableroKillerContent.center-hidden #killerUsedPerksPanel{
  display: none !important;
}

#tableroKillerContent.center-hidden .killer-bottom-buttons{
  display: none !important;
}

#tableroKillerContent.center-hidden .killer-left button,
#tableroKillerContent.center-hidden .killer-right button{
  display: none !important;
}

#tableroKillerContent.center-hidden #killerTimersPanel{
  display: none !important;
}

#tableroKillerContent.center-hidden .killer-prices-actions{
  display: none !important;
}

#tableroKillerContent.center-hidden .killer-temp-dots{
  display: none !important;
}

.killer-afk-timer{
  position: fixed;
  left: 50%;
  top: var(--killer-afk-timer-top);
  transform: translateX(-50%) translateX(var(--killer-afk-timer-x));
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(6, 10, 16, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f5f7ff;
  letter-spacing: 0.08em;
  z-index: 3600;
  pointer-events: none;
  --afk-ring-color: #6ad9ff;
  --afk-progress: 1;
}

#tableroKillerContent.center-hidden .killer-afk-timer.is-active{
  display: flex;
}

.killer-afk-timer.is-active .killer-afk-icon{
  animation: killerAfkPulse 1s ease-in-out infinite;
}

.killer-afk-timer.is-warn{
  --afk-ring-color: #ffd166;
}

.killer-afk-timer.is-urgent{
  --afk-ring-color: #ff5c5c;
}

.killer-afk-timer.is-finish{
  animation: killerAfkFlash 650ms ease-in-out 1;
}

.killer-afk-badge{
  position: relative;
  width: var(--killer-afk-ring-size);
  height: var(--killer-afk-ring-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.killer-afk-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--afk-ring-color) calc(var(--afk-progress) * 1turn),
    rgba(255,255,255,0.15) 0
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}

.killer-afk-icon{
  width: var(--killer-afk-icon-size);
  height: var(--killer-afk-icon-size);
  object-fit: contain;
  opacity: 0.95;
}

.killer-afk-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.killer-afk-value{
  font-size: 28px;
  font-weight: 900;
}

.killer-afk-count{
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

@keyframes killerAfkPulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes killerAfkFlash{
  0% { background: rgba(6, 10, 16, 0.75); }
  35% { background: rgba(255, 92, 92, 0.5); }
  70% { background: rgba(6, 10, 16, 0.75); }
  100% { background: rgba(6, 10, 16, 0.75); }
}

.killer-used-compact{
  position: fixed;
  right: var(--killer-compact-right);
  bottom: var(--killer-compact-bottom);
  width: calc(var(--killer-compact-size) * 2 + var(--killer-compact-gap));
  height: calc(var(--killer-compact-size) * 2 + var(--killer-compact-gap));
  display: none;
  pointer-events: none;
  z-index: 3500;
}

#tableroKillerContent.center-hidden .killer-used-compact{
  display: block;
}

.killer-used-compact-slot{
  position: absolute;
  width: var(--killer-compact-size);
  height: var(--killer-compact-size);
  object-fit: contain;
  opacity: 0.9;
}

.killer-used-compact-slot.is-empty{
  opacity: 0.45;
}

.killer-used-compact-top{
  top: 0;
  left: calc(50% - (var(--killer-compact-size) / 2));
}

.killer-used-compact-right{
  right: 0;
  top: calc(50% - (var(--killer-compact-size) / 2));
}

.killer-used-compact-bottom{
  bottom: 0;
  left: calc(50% - (var(--killer-compact-size) / 2));
}

.killer-used-compact-left{
  left: 0;
  top: calc(50% - (var(--killer-compact-size) / 2));
}

.killer-roulette-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
}

.killer-roulette-overlay.hidden {
  display: none;
}

.killer-roulette-modal {
  width: min(520px, 90vw);
  background: rgba(6, 10, 16, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px 24px 18px;
  text-align: center;
  box-shadow: none;
  color: #f5f7ff;
}

.killer-roulette-modal.is-donation {
  border-color: rgba(26, 123, 56, 0.7);
}

.killer-roulette-modal-title {
  font-size: 12px;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}

.killer-roulette-modal-name {
  margin: 8px 0 12px;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
}

.killer-roulette-modal-img {
  width: min(220px, 60vw);
  height: min(220px, 60vw);
  object-fit: contain;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.4);
  padding: 8px;
}

.killer-roulette-modal-donor {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}

.killer-annul-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4600;
  padding: 18px;
}

.killer-annul-overlay.hidden {
  display: none;
}

.killer-annul-modal {
  width: min(760px, 94vw);
  background: rgba(6, 10, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 26px 24px 22px;
  text-align: center;
  color: #f5f7ff;
}

.killer-annul-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.22em;
  margin-bottom: 18px;
}

.killer-annul-donor{
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 900;
  color: #22c55e;
}

.killer-annul-perks-wrap {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.killer-annul-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  min-height: 96px;
}

.killer-annul-card{
  position: relative;
  width: 96px;
  height: 96px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.killer-annul-perk {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.45);
  padding: 6px;
}

.killer-annul-empty {
  font-size: 13px;
  opacity: 0.7;
}

.killer-annul-x {
  position: absolute;
  inset: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 86px;
  font-weight: 900;
  color: rgba(255, 35, 35, 0.9);
  text-shadow: 0 6px 18px rgba(255, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.2) rotate(-8deg);
  animation: killerAnnulXPop 320ms ease-out forwards;
  pointer-events: none;
}

.killer-annul-card.is-empty .killer-annul-x{
  display:none;
}

@keyframes killerAnnulXPop {
  0% { opacity: 0; transform: scale(0.2) rotate(-8deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.killer-annul-ok {
  margin-top: 16px;
  padding: 8px 20px;
  font-size: 13px;
}

.killer-commodin-poll-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4500;
  padding: 16px;
}

.killer-commodin-poll-overlay.hidden{
  display: none;
}

.killer-commodin-poll-box{
  width: min(520px, 92vw);
  background: rgba(6, 10, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px 18px 16px;
  color: #f5f7ff;
  text-align: left;
}

.killer-commodin-poll-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}

.killer-commodin-poll-sub{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}

.killer-commodin-saved-note{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

.killer-commodin-poll-setup{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.killer-commodin-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.killer-commodin-save-btn{
  font-size: 12px;
  padding: 8px 14px;
}

.killer-commodin-pick-row{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.killer-commodin-pick-box{
  flex: 1;
  min-width: 0;
  height: 150px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #f5f7ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.killer-commodin-pick-box:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.45);
}

.killer-commodin-pick-img{
  width: 90px;
  height: 90px;
  object-fit: contain;
  opacity: 0.9;
}

.killer-commodin-pick-label{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.killer-commodin-select-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.killer-commodin-choice-label{
  width: 18px;
  font-weight: 800;
  text-align: center;
}

.killer-commodin-select{
  flex: 1;
  min-width: 0;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: #f5f7ff;
  padding: 0 8px;
  font-size: 12px;
}

.killer-commodin-start-btn{
  margin-top: 6px;
  width: 100%;
  font-size: 11px;
  padding: 8px 10px;
}

.killer-commodin-poll-live{
  margin-top: 14px;
}

.killer-commodin-poll-live.hidden{
  display: none;
}

.killer-commodin-timer{
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 6px;
}

.killer-commodin-status{
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 10px;
}

.killer-commodin-votes{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.killer-commodin-vote-row{
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
}

.killer-commodin-vote-num{
  font-weight: 800;
  width: 16px;
  text-align: center;
}

.killer-commodin-vote-label{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.killer-commodin-vote-count{
  font-weight: 900;
  font-size: 13px;
}

.killer-commodin-vote-bar{
  position: absolute;
  inset: auto 10px 6px 40px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.killer-commodin-vote-bar-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(214, 178, 76, 0.85), rgba(214, 178, 76, 0.25));
  transition: width 160ms ease;
}

.killer-commodin-vote-row{
  position: relative;
  padding-bottom: 20px;
}

.killer-commodin-select-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4600;
  padding: 16px;
}

.killer-commodin-select-overlay.hidden{
  display: none;
}

.killer-commodin-select-box{
  width: min(900px, 96vw);
  background: rgba(6, 10, 16, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px;
  color: #f5f7ff;
}

.killer-commodin-select-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 12px;
}

.killer-commodin-select-grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 900px){
  .killer-commodin-select-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.killer-commodin-select-card{
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.killer-commodin-select-card img{
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.killer-commodin-select-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.4);
}

.killer-commodin-select-card.is-selected{
  border-color: rgba(214, 178, 76, 0.9);
  box-shadow: 0 0 0 2px rgba(214, 178, 76, 0.2);
}

.killer-commodin-select-card.is-disabled{
  opacity: 0.35;
  cursor: not-allowed;
}

.killer-commodin-close-btn{
  margin-top: 12px;
  width: 100%;
  font-size: 11px;
  padding: 8px 10px;
}

#killerDonationHighlightBtn.is-on {
  background: rgba(26, 123, 56, 0.2);
  border-color: rgba(26, 123, 56, 0.75);
}


/* Columna Derecha */
.killer-right {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
}

.killer-temporary-section {
  display: flex;
  flex-direction: column;
}

.killer-temp-title{
  font-size:14px;
  color:#ffffff;
  opacity:1;
}

.killer-temp-controls {
  margin: 10px 0;
}

.killer-temp-container{
  transition: opacity 320ms ease, transform 320ms ease;
}

.killer-temp-container.is-fading{
  opacity: 0;
  transform: translateY(6px);
}

.killer-temp-dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 8px;
}

.killer-temp-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  transition: transform 160ms ease, background 160ms ease;
  border: none;
  cursor: pointer;
  padding: 0;
}

.killer-temp-dot.is-active{
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.25);
}

.killer-temp-dot:focus-visible{
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.killer-btn-small {
  font-size: 11px;
}

.killer-temp-container {
  flex: 1;
  overflow-y: auto;
  max-height: 520px;
}

.killer-temp-perk-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.8fr;
  gap: 8px;
  padding: 8px;
  margin: 4px 0;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
}

.killer-temp-donor {
  color: rgba(230, 247, 255, 0.8);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.killer-temp-name {
  color: rgba(230, 247, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.killer-temp-time {
  color: var(--accent);
  font-weight: 800;
  text-align: right;
}

/* Botones de Navegacion */
.killer-nav-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

/* Scrollbar personalizado para Killer */
#tableroKillerContent ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#tableroKillerContent ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}

#tableroKillerContent ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}

#tableroKillerContent ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}

/* Responsive */
@media (max-width: 1400px) {
  .killer-container {
    gap: 24px;
  }

  .killer-board-grid {
    grid-template-columns: repeat(10, 74px);
    grid-auto-rows: 74px;
  }
}

@media (max-width: 1200px) {
  .killer-container {
    flex-direction: column;
    align-items: center;
  }

  .killer-left,
  .killer-right {
    width: 100%;
    max-width: 420px;
    flex: 0 0 auto;
  }

  .killer-board-grid {
    grid-template-columns: repeat(8, 72px);
    grid-auto-rows: 72px;
  }

  .killer-temporary-section {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .killer-board-grid {
    grid-template-columns: repeat(6, 60px);
    grid-auto-rows: 60px;
  }

  .killer-used-row {
    grid-template-columns: repeat(2, 110px);
  }
}


/* ===== Tablero Killer: highlight/blink igual que Survivor ===== */
.killer-perk-cell.highlight {
  outline: none;
}

.killer-perk-cell.highlight img {
  filter: drop-shadow(0 0 1px #ffffff)
          drop-shadow(0 0 2px #ffffff);
  transition: none;
}

@keyframes killerGlow {
  30%, 100% {
    filter: drop-shadow(0 0 1px #ffffff)
            drop-shadow(0 0 1px #ffffff);
  }
  50% {
    filter: drop-shadow(0 0 1px #00ff00)
            drop-shadow(0 0 2px #00ff00);
  }
}

/* El parpadeo verde solo se aplica al ganador */
.killer-perk-cell.blink {
  animation: none;
}

.killer-perk-cell.blink img {
  animation: killerGlow 0.5s infinite;
}


/* Tabla de precios del Tablero Killer (copiado del Survivor para que sea idéntico) */
#killerPricesPanel{
  padding: 12px 16px; /* igual a survivor */
}
#killerPricesPanel .stat-line{
  margin-bottom: 4px;
}
#killerPricesPanel .prices-table{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
}
#killerPricesPanel .price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 0;
  border-bottom: 1px solid #ffffff;
  font-size:13px;
}
#killerPricesPanel .price-row:last-child{ border-bottom:none; }

#killerPricesPanel .price-name{
  flex:1;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity: .92;
}

#killerPricesPanel .price-name-annul{
  color: #ff2d2d;
  font-weight: 800;
  opacity: 1;
}
#killerPricesPanel .price-val{
  text-align:right;
  font-weight:700;
  white-space:nowrap;
}
#killerPricesPanel .prices-note{
  margin-top:10px;
  font-size:11px;
  line-height:1.25;
  opacity:0.65;
  font-weight:600;
}

/* Panel de victorias por bits (Tablero Killer) */
#killerBitsWinsPanel{
  padding: 12px 16px;
}

#killerBitsWinsPanel .killer-bits-progress{
  height: 10px;
  margin-top: 6px;
  margin-bottom: 6px;
}

#killerBitsProgressBar{
  background: var(--accent);
}

.killer-bits-progress-label{
  text-align:center;
  font-size:11px;
  opacity:0.7;
}

.killer-bits-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
  font-size:12px;
}

.killer-bits-label{
  font-size:11px;
  letter-spacing:0.06em;
  opacity:0.85;
}

.killer-bits-input{
  width:72px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  color: var(--text);
  padding:4px 6px;
  font-weight:700;
  text-align:center;
}

.killer-bits-value{
  font-size:13px;
  font-weight:800;
  min-width:36px;
  text-align:right;
}

.killer-bits-goal-controls{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}

.killer-bits-goal-buttons{
  display:flex;
  gap:6px;
  order:1;
}

.killer-bits-goal-controls .killer-bits-value{
  order:2;
}

.killer-bits-goal-btn{
  font-size:9px;
  padding:4px 6px;
  min-width:0;
}

.killer-bits-controls{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:8px;
  flex-wrap: wrap;
}

.killer-bits-btn{
  font-size:10px;
  padding:6px 10px;
}

.killer-bits-total{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:center;
}

.killer-bits-total-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.killer-bits-total-label{
  font-size:12px;
  letter-spacing:0.18em;
  opacity:0.7;
}

.killer-bits-win-btn{
  font-size:10px;
  padding:4px 8px;
  line-height:1;
}

.killer-bits-reset-btn{
  opacity:0.85;
}

.killer-bits-total-value{
  font-size:28px;
  font-weight:900;
  color: var(--accent);
}

.auto-msg-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4700;
  padding: 16px;
}

.auto-msg-overlay.hidden{
  display: none;
}

.auto-msg-box{
  width: min(980px, 96vw);
  max-height: 86vh;
  background: rgba(6, 10, 16, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px 18px;
  color: #f5f7ff;
  display: flex;
  flex-direction: column;
}

.auto-msg-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auto-msg-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}

.auto-msg-sub{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}

.auto-msg-header{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.auto-msg-list{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding-right: 6px;
}

.auto-msg-row{
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
}

.auto-msg-label{
  font-size: 12px;
  font-weight: 700;
}

.auto-msg-sample{
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.75;
  line-height: 1.3;
  word-break: break-word;
}

.auto-msg-edit-btn{
  margin-top: 6px;
  font-size: 10px;
  padding: 4px 8px;
}

.auto-msg-edit-area{
  display: none;
  margin-top: 6px;
}

.auto-msg-row.is-editing .auto-msg-edit-area{
  display: block;
}

.auto-msg-input{
  margin-top: 6px;
  width: 100%;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.4);
  color: #e6f7ff;
}

.auto-msg-hint{
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.6;
}

.auto-msg-placeholders{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  opacity: 0.75;
}

.auto-msg-placeholder-label{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.auto-msg-placeholder{
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auto-msg-toggle{
  display: flex;
  justify-content: center;
}

.auto-msg-disabled{
  font-size: 12px;
  opacity: 0.4;
}

.auto-msg-switch{
  position: relative;
  width: 36px;
  height: 18px;
  display: inline-block;
}

.auto-msg-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.auto-msg-slider{
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  transition: background 160ms ease;
}

.auto-msg-slider:before{
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 160ms ease;
}

.auto-msg-switch input:checked + .auto-msg-slider{
  background: rgba(26, 123, 56, 0.6);
}

.auto-msg-switch input:checked + .auto-msg-slider:before{
  transform: translateX(18px);
}

@media (max-width: 720px){
  .auto-msg-header,
  .auto-msg-row{
    grid-template-columns: 1fr 70px 70px;
  }
}

.predictions-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4710;
  padding: 16px;
}

.predictions-overlay.hidden{
  display: none;
}

.predictions-box{
  width: min(980px, 96vw);
  max-height: 90vh;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.predictions-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.predictions-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.predictions-sub{
  font-size: 12px;
  color: var(--muted);
}

.predictions-status{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
}

.predictions-status-label{
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.predictions-status-text{
  font-size: 12px;
}

.predictions-status-text.is-error{
  color: #ff6a6a;
}

.predictions-status-text.is-warn{
  color: #f6c157;
}

.predictions-status-text.is-ok{
  color: #75d784;
}

.predictions-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.predictions-actions .btn{
  font-size: 11px;
  padding: 6px 10px;
}

.predictions-actions .btn:disabled{
  opacity: 0.45;
  pointer-events: none;
}

.predictions-next{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.predictions-next-label{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.predictions-next-text{
  font-size: 12px;
  opacity: 0.9;
}

.predictions-templates-head{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.predictions-templates{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding-right: 6px;
}

.predictions-template-row{
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.predictions-template-row.is-compact{
  padding: 8px 12px;
}

.predictions-compact-line{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.predictions-compact-title{
  color: var(--accent);
  font-weight: 700;
}

.predictions-compact-option{
  font-weight: 700;
}

.predictions-compact-option-a{
  color: var(--accent);
}

.predictions-compact-option-b{
  color: #f4b8ff;
}

.predictions-compact-vs{
  color: #ffffff;
  font-weight: 800;
}

.predictions-template-row.is-next{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(203, 180, 255, 0.4);
}

.predictions-template-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.predictions-template-title{
  font-size: 12px;
  font-weight: 700;
}

.predictions-template-actions{
  display: flex;
  gap: 6px;
}

.predictions-template-actions .btn{
  font-size: 10px;
  padding: 4px 8px;
}

.predictions-template-grid{
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 8px 10px;
}

.predictions-template-grid label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.predictions-input{
  width: 100%;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.predictions-add-btn{
  align-self: flex-start;
  font-size: 11px;
  padding: 6px 12px;
}

.predictions-footer{
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.predictions-mods-btn{
  font-size: 11px;
  padding: 6px 12px;
}

.predictions-mods-panel{
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.predictions-mods-panel.hidden{
  display: none;
}

.predictions-mods-title{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.predictions-mods-input{
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  resize: vertical;
}

.predictions-mods-hint{
  font-size: 10px;
  color: var(--muted);
}

.predictions-mods-save{
  align-self: flex-start;
  font-size: 11px;
  padding: 6px 12px;
}

.predictions-empty{
  font-size: 12px;
  color: var(--muted);
}

.prediction-active-box{
  max-width: 520px;
}

.prediction-active-title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.prediction-active-options{
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.prediction-active-title-text{
  color: #7fe17a;
  font-weight: 700;
}

.prediction-active-option-a{
  color: #4aa3ff;
  font-weight: 700;
}

.prediction-active-option-b{
  color: #ff7bd8;
  font-weight: 700;
}

.prediction-active-vs{
  color: #ffffff;
  font-weight: 800;
}

.killer-prediction-widget{
  position: fixed;
  left: 50%;
  bottom: calc(var(--killer-prediction-widget-bottom, 10px) + var(--killer-prediction-safe-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  width: min(420px, 84vw);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.killer-prediction-widget.hidden{
  opacity: 0;
}

.killer-prediction-widget.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body:not(.killer-active) .killer-prediction-widget{
  display: none;
}

.killer-prediction-card{
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #f5f7ff;
}

.killer-prediction-card.is-active{
  border-color: rgba(74, 163, 255, 0.6);
}

.killer-prediction-card.is-locked{
  border-color: rgba(245, 197, 66, 0.6);
}

.killer-prediction-card.is-resolved{
  border-color: rgba(56, 217, 123, 0.6);
}

.killer-prediction-card.is-canceled{
  border-color: rgba(255, 77, 77, 0.6);
}


.killer-prediction-card-header{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  gap: 8px;
}

.killer-prediction-card-option{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.killer-prediction-card-option.is-winner::after,
.killer-prediction-card-option.is-loser::after{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 1px 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.killer-prediction-card-option.is-winner::after{
  content: "OK";
  color: #0d2b18;
  background: rgba(56, 217, 123, 0.9);
}

.killer-prediction-card-option.is-loser::after{
  content: "X";
  color: #2b0d0d;
  background: rgba(255, 77, 77, 0.9);
}

.killer-prediction-card-option-a{
  color: #4aa3ff;
  justify-self: start;
}

.killer-prediction-card-option-b{
  color: #ff4fb3;
  text-align: right;
  justify-self: end;
}

.killer-prediction-card-timer{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.95;
  color: #ffffff;
  text-align: center;
  min-width: 64px;
  white-space: nowrap;
}

.killer-prediction-card-bar{
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  overflow: hidden;
}

.killer-prediction-card-bar-fill{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
}

.killer-prediction-card-bar-fill-a{
  left: 0;
  background: linear-gradient(90deg, rgba(74, 163, 255, 0.95), rgba(74, 163, 255, 0.4));
}

.killer-prediction-card-bar-fill-b{
  right: 0;
  background: linear-gradient(270deg, rgba(255, 79, 179, 0.95), rgba(255, 79, 179, 0.4));
}

.killer-prediction-card-stats{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.killer-prediction-card-side{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.killer-prediction-card-main{
  display: flex;
  align-items: center;
  gap: 4px;
}

.killer-prediction-card-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.killer-prediction-card-side-right{
  align-items: flex-end;
  text-align: right;
}

.killer-prediction-card-side-right .killer-prediction-card-main{
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 4px;
}

.killer-prediction-card-side-right .killer-prediction-card-meta{
  align-items: flex-end;
  text-align: right;
}

.killer-prediction-card-side:not(.killer-prediction-card-side-right) .killer-prediction-card-points,
.killer-prediction-card-side:not(.killer-prediction-card-side-right) .killer-prediction-card-multiplier,
.killer-prediction-card-side:not(.killer-prediction-card-side-right) .killer-prediction-card-users{
  flex-direction: row;
  justify-content: flex-start;
  gap: 4px;
}

.killer-prediction-card-side-right .killer-prediction-card-points{
  justify-content: flex-end;
  flex-direction: row;
  gap: 4px;
  width: 100%;
  text-align: right;
}

.killer-prediction-card-side-right .killer-prediction-card-multiplier,
.killer-prediction-card-side-right .killer-prediction-card-users{
  flex-direction: row;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  text-align: right;
}

.killer-prediction-card-percent{
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.killer-prediction-value{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.killer-prediction-value.is-pulse{
  animation: prediction-value-pulse 0.35s ease;
}

.killer-prediction-card-percent.killer-prediction-value{
  font-weight: 900;
}

.killer-prediction-card-points{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  opacity: 0.9;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.killer-prediction-points-icon{
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.killer-prediction-card-multiplier{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  opacity: 0.85;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.killer-prediction-multiplier-icon{
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.killer-prediction-card-users{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  opacity: 0.75;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.killer-prediction-users-icon{
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.killer-prediction-card-top{
  font-size: 12px;
  opacity: 0.85;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  max-width: none;
}

.killer-prediction-card.is-resolved .killer-prediction-card-top{
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  max-width: none;
}

.killer-prediction-card-list{
  --prediction-entry-height: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
  max-height: calc(var(--prediction-entry-height) * 5);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent);
}

.killer-prediction-card-list.is-scroll{
  animation: prediction-list-scroll var(--prediction-scroll-duration, 10s) ease-in-out infinite;
}

.killer-prediction-card-entry{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: var(--prediction-entry-height);
  opacity: 0;
  transform: translateY(6px);
  animation: prediction-roll-in 0.5s ease forwards;
}

.killer-prediction-card-entry-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.killer-prediction-card-entry-points{
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.killer-prediction-card-entry-points.is-win{
  color: #38d97b;
}

.killer-prediction-card-entry-points.is-lose{
  color: #ff4d4d;
}

@keyframes prediction-roll-in{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes prediction-list-scroll{
  0%{
    transform: translateY(0);
  }
  15%{
    transform: translateY(0);
  }
  85%{
    transform: translateY(calc(var(--prediction-scroll-lines, 0) * -1 * var(--prediction-entry-height)));
  }
  100%{
    transform: translateY(calc(var(--prediction-scroll-lines, 0) * -1 * var(--prediction-entry-height)));
  }
}

@keyframes prediction-value-pulse{
  0%{
    transform: scale(1);
  }
  40%{
    transform: scale(1.06);
  }
  100%{
    transform: scale(1);
  }
}

.killer-prediction-card-divider{
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.18);
  margin-top: 2px;
}

.killer-prediction-card-title{
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #9fd8ff;
  background: linear-gradient(90deg, #4aa3ff, #ff4fb3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.killer-prediction-tops{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.killer-prediction-tops.is-hidden{
  display: none;
}

.killer-prediction-tops-heading{
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 6px;
}

.killer-prediction-tops-col{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.killer-prediction-tops-title{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.killer-prediction-tops-list{
  font-size: 11px;
  min-height: 14px;
}

.killer-prediction-tops-list-inner{
  --prediction-entry-height: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: calc(var(--prediction-entry-height) * 10);
  overflow: hidden;
}

.killer-prediction-tops-panel{
  position: fixed;
  right: 16px;
  bottom: calc(var(--killer-prediction-widget-bottom, 10px) + var(--killer-prediction-safe-bottom, 0px));
  width: min(360px, 80vw);
  background: transparent;
  border: none;
  border-radius: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.killer-prediction-tops-panel.hidden{
  opacity: 0;
}

.killer-prediction-tops-panel.is-visible{
  opacity: 1;
  transform: translateY(0);
}

body:not(.killer-active) .killer-prediction-tops-panel{
  display: none;
}

.killer-prediction-tops-card{
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 16px;
  color: #f5f7ff;
}

@media (max-width: 720px){
  .killer-prediction-card{
    padding: 10px 12px;
  }
  .killer-prediction-card-header{
    font-size: 16px;
  }
  .killer-prediction-card-percent{
    font-size: 18px;
  }
  .killer-prediction-card-title{
    font-size: 14px;
  }
}

@media (max-width: 720px){
  .predictions-template-grid{
    grid-template-columns: 1fr;
  }
}

/* Evita que cualquier modal oscurezca el fondo (croma) */
.confirm-overlay,
.alloc-overlay,
.iri-stats-overlay,
.killer-roulette-overlay,
.killer-commodin-poll-overlay,
.killer-commodin-select-overlay,
.auto-msg-overlay,
.predictions-overlay{
  background: transparent !important;
}

.premium-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.premium-actions .btn{
  font-size: 11px;
  padding: 6px 10px;
}

.premium-manual-toggle{
  margin-top: 4px;
}

.premium-manual-toggle .btn{
  font-size: 10px;
  padding: 4px 8px;
  opacity: 0.8;
}

.premium-fields{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.premium-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.premium-label{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.premium-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.premium-note{
  font-size: 12px;
  opacity: 0.7;
}

@media (max-width: 720px){
  .premium-fields{
    grid-template-columns: 1fr;
  }
}

.premium-overlay-block{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.premium-overlay-label{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}

.premium-overlay-row{
  display: flex;
  gap: 8px;
  align-items: center;
}

.premium-overlay-row .predictions-input{
  flex: 1;
  min-width: 0;
}
.container{
  width: min(1120px, 92vw);
  margin: 0 auto;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header .nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 18px;
}

.site-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-header .brand-mark{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.site-header .nav-links{
  display: flex;
  gap: 20px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
}

.site-header .nav-links a{
  position: relative;
  color: var(--text);
}

.site-header .nav-links a::after,
.site-header .nav-pill::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.site-header .nav-links a:hover::after,
.site-header .nav-links a:focus-visible::after,
.site-header .nav-pill:hover::after,
.site-header .nav-pill:focus-visible::after,
.site-header .nav-dropdown:hover .nav-pill::after{
  width: 100%;
}

.site-header .nav-pill{
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  font: inherit;
  cursor: pointer;
  position: relative;
}

.site-header .nav-right{
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header .socials{
  display: flex;
  gap: 8px;
  align-items: center;
}

.site-header .social-link{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.02);
}

.site-header .social-link img{
  width: 18px;
  height: 18px;
  display: block;
}

.site-header .nav-dropdown{
  position: relative;
}

.site-header .dropdown-menu{
  position: absolute;
  top: 150%;
  left: 0;
  min-width: 220px;
  padding: 12px;
  border-radius: 10px;
  background: #14141b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6);
  display: grid;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: all 0.18s ease;
  z-index: 5;
}

.site-header .nav-dropdown:hover .dropdown-menu,
.site-header .nav-dropdown:focus-within .dropdown-menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-header .dropdown-link{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
}

.site-header .dropdown-link.is-muted{
  color: var(--muted);
}

.site-header .dropdown-link span{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.site-header .dropdown-link:hover{
  background: rgba(255, 255, 255, 0.06);
}

.app-shell .predictions-overlay{
  position: static;
  inset: auto;
  min-height: auto;
  padding: 32px 16px 48px;
}

.app-shell .predictions-box{
  box-shadow: 0 24px 40px -32px rgba(0, 0, 0, 0.6);
}