@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
  :root{
    --brand:#6e6def;
    --brand-dark:#444f9e;
    --teal:#00a69c;
    --lavender:#b7b8f8;
    --lavender2:#acb0d6;
    --red:#e63946;
    --green:#2ecc71;
    --blue:#2e8bff;
    --yellow:#ffcc33;
    --purple:#6e6def;
    --navy:#02007f;
    --navy2:#1610a8;
    --panel:rgba(183,184,248,.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Inter',Arial,sans-serif;
    background:radial-gradient(ellipse at 50% -10%, rgba(110,109,239,.35) 0%, transparent 60%), var(--navy);
    color:#fff;
    min-height:100vh;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    position:relative;
  }
  /* Pantallas de pantalla/proyector y de jugador: nunca mostrar más que el
     alto de la pantalla; el contenido interno que no entre hace su propio
     scroll (ver .screen y .player-stage) en vez de estirar la página. */
  body.game-stage-body{
    height:100vh;
    overflow:hidden;
  }
  body::before{
    content:"";
    position:fixed;
    left:0; right:0; top:50%;
    height:30px;
    transform:translateY(-50%);
    background-image:url('images/linea-curva.svg');
    background-repeat:repeat-x;
    background-size:auto 30px;
    z-index:0;
    pointer-events:none;
  }
  /* Auth card: compartida entre admin/login.php, player/login.php y player/team_select.php */
  .auth-card{
    width:100%; max-width:360px;
    background:linear-gradient(180deg,var(--navy2) 0%, var(--navy) 100%);
    border:4px solid var(--brand); border-radius:24px;
    box-shadow:0 0 0 6px #000, 0 0 40px rgba(110,109,239,.35);
    padding:28px 26px; display:flex; flex-direction:column; align-items:center; gap:14px;
    text-align:center;
    position:relative; z-index:1;
  }
  .auth-card h1{ font-size:20px; letter-spacing:1px; }
  .auth-error{ color:var(--red); font-family:'Inter',Arial,sans-serif; font-size:13px; }
  .auth-card form{ width:100%; display:flex; flex-direction:column; gap:12px; }
  .auth-card label{ display:flex; flex-direction:column; gap:6px; font-family:'Inter',Arial,sans-serif; font-size:12.5px; color:#c9cdf5; text-align:left; }
  .auth-card input[type=password], .auth-card input[type=text]{
    font-family:'Inter',Arial,sans-serif; font-size:15px; padding:10px 12px; border-radius:10px;
    border:2px solid var(--brand-dark); background:rgba(255,255,255,.06); color:#fff;
  }

  .stage{
    width:100%;
    max-width:1200px;
    min-height:560px;
    max-height:calc(100vh - 32px);
    background:linear-gradient(180deg,var(--navy2) 0%, var(--navy) 100%);
    border-radius:24px;
    border:4px solid var(--brand);
    box-shadow:0 0 0 6px #000, 0 0 40px rgba(110,109,239,.35), inset 0 0 60px rgba(0,0,0,.5);
    position:relative;
    z-index:1;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  .screen{ display:none; flex:1; flex-direction:column; padding:28px 26px; position:relative; z-index:1; overflow-y:auto; min-height:0;}
  .screen.active{ display:flex; animation:fadein .4s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  /* START SCREEN */
  #screen-start{ align-items:center; justify-content:center; text-align:center; gap:18px;}
  .logo-badge{
    font-size:13px; letter-spacing:4px; color:var(--teal);
    border:2px solid var(--teal); border-radius:999px; padding:6px 16px;
    text-transform:uppercase;
  }
  .brand-lockup{ display:flex; flex-direction:column; align-items:center; gap:14px; }
  .logo-360{ width:150px; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
  .logo-challenge{ width:230px; height:auto; }
  .subtitle{ color:#c9cdf5; font-family:'Inter',Arial,sans-serif; font-weight:400; font-size:15px; letter-spacing:2px; text-transform:uppercase;}

  /* TEAMS */
  .teams-legend, .teams-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
  .teams-legend{ max-width:480px; margin:6px auto 0; }
  .teams-bar{ margin-bottom:14px; }
  .team-chip{
    display:flex; align-items:center; gap:6px; min-width:0;
    padding:7px 8px; border-radius:10px; border:2px solid var(--tc);
    background:rgba(255,255,255,.05); font-family:'Inter',Arial,sans-serif;
    transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .team-chip .key{
    flex:0 0 20px; height:20px; border-radius:50%; background:var(--tc); color:#08123a;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
    font-family:'Inter',Arial,sans-serif;font-weight:900;
  }
  .team-chip .tname{ flex:1; min-width:0; font-size:9.5px; letter-spacing:.3px; font-weight:700; color:var(--tc); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .team-chip .tscore{ font-size:12.5px; font-weight:700; color:#fff; font-family:'Inter',Arial,sans-serif;font-weight:900;}
  .team-chip.active{ background:var(--tc); box-shadow:0 0 16px var(--tc); transform:translateY(-2px);}
  .team-chip.active .tname, .team-chip.active .tscore{ color:#08123a;}
  .team-chip.active .key{ background:#08123a; color:var(--tc);}
  .team-chip.wrong{ opacity:.35;}
  .team-chip.correct{ background:var(--tc); box-shadow:0 0 22px var(--tc);}
  .team-chip.correct .tname, .team-chip.correct .tscore{ color:#08123a;}

  .buzz-banner{
    display:none; margin-bottom:10px; padding:11px 14px; border-radius:12px;
    font-family:'Inter',Arial,sans-serif;font-weight:900; font-size:14px; letter-spacing:1px;
    text-transform:uppercase; text-align:center; color:#08123a; animation:fadein .25s ease;
  }

  input[type=text]{
    width:100%; padding:14px 16px; border-radius:12px; border:2px solid var(--brand-dark);
    background:#0d0a4a; color:#fff; font-size:18px; font-family:'Inter',Arial,sans-serif; text-align:center;
    outline:none;
  }
  input[type=text]:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(110,109,239,.25);}
  .btn{
    font-family:'Inter',Arial,sans-serif;font-weight:900;
    cursor:pointer; border:none; border-radius:14px; padding:16px 28px;
    font-size:17px; letter-spacing:1px; text-transform:uppercase; color:#fff;
    background:linear-gradient(180deg,#8f8ff5, var(--brand) 55%, var(--brand-dark));
    box-shadow:0 6px 0 #2a2570, 0 10px 18px rgba(0,0,0,.4);
    transition:transform .08s ease;
  }
  .btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #2a2570, 0 4px 10px rgba(0,0,0,.4);}
  .btn:disabled{ opacity:.4; cursor:not-allowed;}
  .rules{ margin-top:10px; font-family:'Inter',Arial,sans-serif; font-size:12.5px; color:#8890c9; max-width:420px; line-height:1.5;}

  /* COUNTDOWN */
  #screen-countdown{ align-items:center; justify-content:center;}
  .countdown-num{
    font-size:130px; color:var(--brand);
    text-shadow:0 0 30px rgba(110,109,239,.8);
    animation:pop .9s ease;
  }
  @keyframes pop{ 0%{transform:scale(.3); opacity:0;} 40%{transform:scale(1.15); opacity:1;} 100%{transform:scale(1);} }

  /* QUESTION SCREEN */
  .topbar{ display:flex; justify-content:space-between; align-items:center; font-family:'Inter',Arial,sans-serif; margin-bottom:14px; gap:10px; flex-wrap:wrap;}
  .pill{ background:var(--panel); border:1px solid rgba(110,109,239,.35); border-radius:999px; padding:6px 14px; font-size:12.5px; letter-spacing:1px; color:#dfe3ff; text-transform:uppercase;}
  .progress-wrap{ height:8px; background:#0d0a4a; border-radius:99px; overflow:hidden; margin-bottom:16px; border:1px solid rgba(255,255,255,.08);}
  .progress-bar{ height:100%; background:linear-gradient(90deg,var(--teal),var(--brand)); width:0%; transition:width .3s ease;}

  .category-badge{
    align-self:flex-start; font-family:'Inter',Arial,sans-serif; font-size:11.5px; letter-spacing:2px;
    text-transform:uppercase; color:#02007f; background:var(--teal); padding:4px 12px; border-radius:8px; margin-bottom:10px;
  }
  .question-text{ font-size:21px; line-height:1.35; margin-bottom:14px; text-shadow:0 2px 0 rgba(0,0,0,.4);}

  .timer-wrap{ display:flex; align-items:center; gap:10px; margin-bottom:16px;}
  .timer-track{ flex:1; height:14px; border-radius:99px; background:#0d0a4a; border:1px solid rgba(255,255,255,.1); overflow:hidden;}
  .timer-fill{ height:100%; width:100%; background:linear-gradient(90deg,var(--green),var(--brand),var(--red)); transition:width 1s linear;}
  .timer-label{ font-family:'Inter',Arial,sans-serif; font-size:13px; color:#c9cdf5; min-width:30px; text-align:right;}

  .options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto;}
  .opt{
    display:flex; align-items:center; gap:10px; text-align:left;
    font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:14.5px; line-height:1.25;
    color:#fff; padding:14px 14px; border-radius:14px; border:none; cursor:pointer;
    box-shadow:0 5px 0 rgba(0,0,0,.35), 0 8px 14px rgba(0,0,0,.3);
    transition:transform .08s ease, filter .15s ease;
  }
  .opt:hover:not(:disabled){ filter:brightness(1.08); }
  .opt:active:not(:disabled){ transform:translateY(3px); }
  .opt .letter{
    flex:0 0 26px; height:26px; border-radius:50%; background:rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .opt.a{ background:linear-gradient(180deg,#3b8bff,#1f5fd6); }
  .opt.b{ background:linear-gradient(180deg,#ff5f6d,#d6304a); }
  .opt.c{ background:linear-gradient(180deg,#3ddc84,#1fa25c); }
  .opt.d{ background:linear-gradient(180deg,#8f8ff5,var(--brand-dark)); }
  .opt:disabled{ cursor:default; opacity:.55; }
  .opt.correct{ outline:4px solid #fff; opacity:1 !important; box-shadow:0 0 24px 4px rgba(46,204,113,.8);}
  .opt.wrong{ outline:4px solid #fff; opacity:1 !important; box-shadow:0 0 24px 4px rgba(230,57,70,.8);}

  .text-answer{ display:flex; flex-direction:column; gap:10px; margin-top:auto;}
  .text-answer input{ font-size:18px; }

  .image-answer{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:auto; flex:1; min-height:0;}
  .image-hint{ font-family:'Inter',Arial,sans-serif; font-size:12.5px; color:#9aa0d6; text-align:center;}
  .image-frame{
    position:relative; display:inline-block; max-width:100%; max-height:100%; border-radius:14px; overflow:hidden;
    border:2px solid var(--brand-dark); background:#000; line-height:0;
  }
  .image-frame img{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; }
  #hotspotsWrap{ position:absolute; inset:0; }
  .hotspot{
    position:absolute; width:34px; height:34px; border-radius:50%; transform:translate(-50%,-50%);
    background:rgba(2,0,127,.55); border:2px solid var(--teal); color:var(--teal);
    font-family:'Inter',Arial,sans-serif;font-weight:900; font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 10px rgba(0,0,0,.6);
    transition:transform .1s ease, filter .15s ease;
  }
  .hotspot:hover:not(:disabled){ filter:brightness(1.2); transform:translate(-50%,-50%) scale(1.08); }
  .hotspot:disabled{ cursor:default; }
  .hotspot.correct{ background:rgba(46,204,113,.85); border-color:#fff; color:#06210f; box-shadow:0 0 20px 6px rgba(46,204,113,.9); }
  .hotspot.wrong{ background:rgba(230,57,70,.85); border-color:#fff; color:#2a0508; box-shadow:0 0 20px 6px rgba(230,57,70,.9); }

  .feedback{
    margin-top:14px; padding:14px 16px; border-radius:14px; font-family:'Inter',Arial,sans-serif;
    display:none; animation:fadein .3s ease;
  }
  .feedback.show{ display:block; }
  .feedback.ok{ background:rgba(46,204,113,.15); border:2px solid var(--green); }
  .feedback.bad{ background:rgba(230,57,70,.15); border:2px solid var(--red); }
  .feedback h3{ font-family:'Inter',Arial,sans-serif;font-weight:900; font-size:16px; margin-bottom:6px; letter-spacing:1px;}
  .feedback p{ font-size:13.5px; color:#dfe3ff; line-height:1.5; }
  .feedback .pts{ color:var(--teal); font-weight:700; }

  .next-btn{ margin-top:14px; align-self:flex-end; }

  /* FINAL SCREEN */
  #screen-final{ align-items:center; justify-content:center; text-align:center; gap:10px; position:relative;}
  .confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden;}
  .confetti span{
    position:absolute; top:-20px; width:8px; height:14px; opacity:.9;
    animation:fall linear infinite;
  }
  @keyframes fall{ to{ transform:translateY(620px) rotate(360deg); opacity:0; } }
  .final-label{ font-family:'Inter',Arial,sans-serif; letter-spacing:4px; font-size:13px; color:var(--teal); text-transform:uppercase;}
  .final-title{ font-size:40px; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.4); margin-top:4px;}
  .breakdown{ font-family:'Inter',Arial,sans-serif; font-size:13.5px; color:#c9cdf5; margin-top:14px;}

  .leaderboard{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px; margin:22px auto 4px;}
  .lb-row{
    display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px;
    background:rgba(255,255,255,.06); border:2px solid var(--tc);
  }
  .lb-row.winner{ background:var(--tc); box-shadow:0 0 26px var(--tc); }
  .lb-rank{ font-family:'Inter',Arial,sans-serif;font-weight:900; font-size:20px; width:24px; text-align:center; color:var(--tc);}
  .lb-name{ flex:1; text-align:left; font-family:'Inter',Arial,sans-serif;font-weight:900; font-size:16px; letter-spacing:1px; color:var(--tc);}
  .lb-score{ font-family:'Inter',Arial,sans-serif;font-weight:900; font-size:20px; color:#fff;}
  .lb-row.winner .lb-rank, .lb-row.winner .lb-name, .lb-row.winner .lb-score{ color:#08123a;}

  /* Overlay para desbloquear audio: los navegadores no permiten reproducir sonido
     (ni siquiera loops en bucle) sin un gesto del usuario primero. Se muestra una
     sola vez al abrir la pantalla de proyección y desaparece tras el primer click. */
  .sound-gate{
    position:fixed; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    background:rgba(2,0,127,.85);
  }
  .sound-gate.hidden{ display:none; }

  @media (max-width:520px){
    .options{ grid-template-columns:1fr; }
    .logo-360{ width:110px; }
    .logo-challenge{ width:170px; }
    .question-text{ font-size:18px; }
    .team-chip .tname{ display:none; }
  }