:root{
    --azul-fondo:#04102e;
    --azul-fondo2:#0a1f54;
    --azul-celda:#0b2a6b;
    --azul-borde:#3da9ff;
    --dorado:#ffd34e;
    --dorado2:#ffb000;
    --verde:#2ecc71;
    --rojo:#e74c3c;
    --naranjo:#ff9f1a;
    --texto:#ffffff;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }
  body{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    color:var(--texto);
    background:
      radial-gradient(1200px 700px at 50% -10%, #1c3f93 0%, rgba(28,63,147,0) 60%),
      radial-gradient(900px 900px at 50% 120%, #123b8a 0%, rgba(18,59,138,0) 55%),
      linear-gradient(180deg, var(--azul-fondo) 0%, var(--azul-fondo2) 100%);
    background-attachment:fixed;
    min-height:100vh;
    overflow-x:hidden;
  }

  .oculto{ display:none !important; }

  /* ===== Encabezado / Logo ===== */
  .logo{
    text-align:center;
    padding:18px 10px 4px;
  }
  .logo h1{
    margin:0;
    font-size:clamp(22px,4vw,40px);
    letter-spacing:1px;
    text-transform:uppercase;
    background:linear-gradient(180deg,#fff 0%,var(--dorado) 55%,var(--dorado2) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .logo p{ margin:2px 0 0; font-size:13px; color:#cfe1ff; letter-spacing:3px; }

  /* ===== Botones generales ===== */
  .btn{
    cursor:pointer;
    border:none;
    border-radius:40px;
    padding:14px 28px;
    font-size:18px;
    font-weight:bold;
    font-family:inherit;
    color:#06245c;
    background:linear-gradient(180deg,#ffe89a,var(--dorado),var(--dorado2));
    box-shadow:0 6px 0 #b97e00, 0 8px 16px rgba(0,0,0,.4);
    transition:transform .08s ease, box-shadow .08s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #b97e00; }
  .btn.sec{
    color:#eaf3ff;
    background:linear-gradient(180deg,#2b62c9,#163e8e);
    box-shadow:0 6px 0 #0c2a66, 0 8px 16px rgba(0,0,0,.4);
  }
  .btn.peligro{
    color:#fff;
    background:linear-gradient(180deg,#ff6b5e,#c0392b);
    box-shadow:0 6px 0 #7d1c12, 0 8px 16px rgba(0,0,0,.4);
  }
  .btn.chico{ padding:9px 16px; font-size:14px; }

  /* ===== Pantalla de inicio ===== */
  .pantalla{ padding:10px 16px 40px; max-width:1100px; margin:0 auto; }
  .centro{ text-align:center; }
  .tarjeta{
    background:rgba(8,28,74,.7);
    border:2px solid rgba(61,169,255,.45);
    border-radius:20px;
    padding:26px;
    margin:18px auto;
    max-width:680px;
    box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .tarjeta h2{ margin-top:0; color:var(--dorado); }
  .acciones{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:18px; }

  .selector-nivel{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0; }
  .chip{
    cursor:pointer;
    padding:10px 18px;
    border-radius:30px;
    border:2px solid var(--azul-borde);
    background:rgba(13,42,107,.6);
    color:#dbe9ff;
    font-weight:bold;
    font-size:15px;
  }
  .chip.activo{
    background:linear-gradient(180deg,var(--dorado),var(--dorado2));
    color:#06245c;
    border-color:var(--dorado);
  }

  /* ===== Juego ===== */
  .juego-grid{
    display:grid;
    grid-template-columns:1fr 270px;
    gap:18px;
    align-items:start;
    max-width:1100px;
    margin:0 auto;
  }
  @media (max-width:860px){
    .juego-grid{ grid-template-columns:1fr; }
    .escalera{ order:-1; }
  }

  .barra-superior{
    display:flex; justify-content:space-between; align-items:center;
    gap:12px; flex-wrap:wrap; margin-bottom:8px;
  }
  .comodines{ display:flex; gap:12px; }
  .comodin{
    width:64px;height:64px;border-radius:50%;
    border:3px solid var(--azul-borde);
    background:radial-gradient(circle at 50% 30%, #1e54b0 0%, #0c2a6b 75%);
    color:#fff;font-weight:bold;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:20px; position:relative;
    transition:transform .1s ease;
  }
  .comodin small{ font-size:9px; position:absolute; bottom:6px; width:100%; text-align:center; font-weight:bold; letter-spacing:.5px; }
  .comodin:hover:not(.usado){ transform:scale(1.07); }
  .comodin.usado{
    opacity:.4; cursor:not-allowed;
    filter:grayscale(1);
  }
  .comodin.usado::after{
    content:"✕"; position:absolute; font-size:42px; color:var(--rojo);
    top:50%; left:50%; transform:translate(-50%,-55%);
    text-shadow:0 0 6px #000;
  }

  .temporizador{
    display:flex; align-items:center; gap:10px;
    font-size:15px; font-weight:bold;
  }
  .reloj{
    width:58px;height:58px;border-radius:50%;
    border:3px solid var(--dorado);
    display:flex;align-items:center;justify-content:center;
    font-size:22px; font-weight:bold; color:var(--dorado);
    background:rgba(0,0,0,.25);
  }
  .reloj.alerta{ color:var(--rojo); border-color:var(--rojo); animation:latido .6s infinite; }
  @keyframes latido{ 50%{ transform:scale(1.12);} }

  .panel-pregunta{
    background:rgba(6,22,60,.55);
    border:2px solid rgba(61,169,255,.4);
    border-radius:18px;
    padding:18px;
  }
  .num-pregunta{ text-align:center; color:var(--dorado); font-weight:bold; letter-spacing:1px; margin-bottom:6px;}
  .pregunta-texto{
    text-align:center;
    font-size:clamp(18px,2.4vw,26px);
    background:linear-gradient(180deg,#0d2f76,#081c4e);
    border:2px solid var(--azul-borde);
    border-radius:14px;
    padding:18px;
    min-height:80px;
    display:flex; align-items:center; justify-content:center;
  }

  .opciones{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:18px;
  }
  @media (max-width:560px){ .opciones{ grid-template-columns:1fr; } }

  .opcion{
    cursor:pointer;
    display:flex; align-items:center; gap:12px;
    padding:16px 18px;
    font-size:clamp(15px,1.9vw,20px);
    font-weight:bold;
    color:#fff;
    background:linear-gradient(180deg,#0e2f74,#091f53);
    border:2px solid var(--azul-borde);
    border-radius:12px;
    text-align:left;
    transition:background .15s ease, transform .08s ease;
    position:relative;
  }
  .opcion:hover:not(.bloqueada){ background:linear-gradient(180deg,#1b4aa6,#0d2f76); transform:translateY(-2px); }
  .opcion .letra{ color:var(--dorado); min-width:26px; font-size:1.1em; }
  .opcion.seleccion{ background:linear-gradient(180deg,var(--naranjo),#d9760a); color:#06245c; border-color:#fff; }
  .opcion.correcta{ background:linear-gradient(180deg,var(--verde),#1d9c54); border-color:#fff; animation:correctaFlash .5s; }
  .opcion.incorrecta{ background:linear-gradient(180deg,var(--rojo),#a32b1e); border-color:#fff; }
  .opcion.eliminada{ visibility:hidden; }
  .opcion.bloqueada{ cursor:default; }
  @keyframes correctaFlash{ 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.6);} }

  /* ===== Escalera de premios ===== */
  .escalera{
    background:rgba(6,22,60,.55);
    border:2px solid rgba(61,169,255,.4);
    border-radius:18px;
    padding:12px;
  }
  .escalera h3{ text-align:center; margin:4px 0 10px; color:var(--dorado); font-size:15px; letter-spacing:1px;}
  .nivel-fila{
    display:flex; justify-content:space-between;
    padding:6px 12px; margin:3px 0; border-radius:8px;
    font-weight:bold; font-size:14px; color:#cfe1ff;
  }
  .nivel-fila .n{ color:#7fb0ff; min-width:24px; }
  .nivel-fila.seguro{ color:#fff; }
  .nivel-fila.seguro .premio{ color:var(--dorado); }
  .nivel-fila.actual{
    background:linear-gradient(180deg,var(--naranjo),#d9760a);
    color:#06245c;
  }
  .nivel-fila.actual .n,.nivel-fila.actual .premio{ color:#06245c; }
  .nivel-fila.ganado{ color:#8effc0; }

  /* ===== Modales ===== */
  .overlay{
    position:fixed; inset:0; background:rgba(2,8,24,.78);
    display:flex; align-items:center; justify-content:center; z-index:50;
    padding:16px;
  }
  .modal{
    background:linear-gradient(180deg,#0d2f76,#081c4e);
    border:3px solid var(--azul-borde);
    border-radius:18px; padding:24px; max-width:520px; width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    text-align:center;
  }
  .modal h3{ margin-top:0; color:var(--dorado); }

  /* Voto del público */
  .barras{ display:flex; align-items:flex-end; justify-content:center; gap:18px; height:200px; margin:20px 0; }
  .barra-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
  .barra{
    width:46px; background:linear-gradient(180deg,var(--dorado),var(--dorado2));
    border-radius:6px 6px 0 0; transition:height .8s ease; min-height:2px;
  }
  .barra-col .pct{ font-weight:bold; margin-bottom:4px; }
  .barra-col .let{ margin-top:6px; font-weight:bold; color:var(--dorado); font-size:18px; }

  .amigo-burbuja{
    background:#eef5ff; color:#0a2a6b; border-radius:14px;
    padding:16px; font-size:18px; font-weight:bold; margin:16px 0;
    position:relative;
  }

  /* ===== Resultado ===== */
  .resultado-grande{ font-size:clamp(26px,5vw,52px); font-weight:bold; margin:6px 0; }
  .gano{ color:var(--verde); }
  .perdio{ color:var(--rojo); }
  .premio-final{ font-size:clamp(24px,4vw,40px); color:var(--dorado); font-weight:bold; }

  /* ===== Editor ===== */
  .campo{ text-align:left; margin:12px 0; }
  .campo label{ display:block; font-weight:bold; margin-bottom:4px; color:#cfe1ff; }
  .campo input[type=text], .campo select, .campo textarea{
    width:100%; padding:10px 12px; border-radius:10px;
    border:2px solid var(--azul-borde); background:#06204f; color:#fff;
    font-family:inherit; font-size:15px;
  }
  .opcion-edit{ display:flex; align-items:center; gap:8px; margin:6px 0; }
  .opcion-edit input[type=text]{ flex:1; }
  .opcion-edit input[type=radio]{ width:20px; height:20px; }
  .lista-preguntas{ text-align:left; margin-top:14px; max-height:320px; overflow:auto; }
  .item-pregunta{
    background:rgba(13,42,107,.6); border:1px solid var(--azul-borde);
    border-radius:10px; padding:10px 12px; margin:8px 0;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
  }
  .item-pregunta .txt{ font-size:14px; }
  .item-pregunta .meta{ font-size:12px; color:#9cc1ff; }
  .etiqueta{
    display:inline-block; background:#1b4aa6; border-radius:20px;
    padding:2px 10px; font-size:12px; margin-left:6px;
  }
  .aviso{
    background:rgba(46,204,113,.15); border:1px solid var(--verde);
    color:#b6ffd5; border-radius:10px; padding:10px; margin:10px 0; font-weight:bold;
  }
  .aviso.error{ background:rgba(231,76,60,.15); border-color:var(--rojo); color:#ffc9c2; }

  .mute-btn{
    position:fixed; top:12px; right:12px; z-index:60;
    width:44px;height:44px;border-radius:50%;
    border:2px solid var(--azul-borde); background:rgba(13,42,107,.8);
    color:#fff; font-size:20px; cursor:pointer;
  }
  .pie{ text-align:center; color:#6f8fd0; font-size:12px; margin-top:24px; }