/* ============================================
   SIGUES TRIVIAL — DARK THEME
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0b1120;
  --bg-card:#141b2d;
  --bg-card2:#1a2236;
  --bg-surface:#1e293b;
  --blue:#3b82f6;
  --blue-glow:rgba(59,130,246,.15);
  --green:#22c55e;
  --green-glow:rgba(34,197,94,.12);
  --red:#ef4444;
  --red-glow:rgba(239,68,68,.12);
  --orange:#f97316;
  --orange-glow:rgba(249,115,22,.12);
  --purple:#a855f7;
  --purple-glow:rgba(168,85,247,.12);
  --gold:#eab308;
  --text:#e2e8f0;
  --text-dim:#94a3b8;
  --text-muted:#64748b;
  --border:#1e293b;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,.4);
  --font:'Segoe UI','Inter',system-ui,sans-serif;
}

/* Force dark theme on all plugin containers */
.sts-presenter,.sts-join,.sts-public-admin,.sts-control,
.sts-presenter *,.sts-join *,.sts-public-admin *,.sts-control *{color:var(--text)}
.sts-presenter,.sts-join,.sts-public-admin,.sts-control{background:var(--bg)}
.sts-presenter a,.sts-join a,.sts-public-admin a,.sts-control a{color:var(--blue)}
.sts-presenter h1,.sts-presenter h2,.sts-presenter h3,
.sts-join h1,.sts-join h2,.sts-join h3,
.sts-public-admin h1,.sts-public-admin h2,.sts-public-admin h3,
.sts-control h1,.sts-control h2,.sts-control h3{color:#fff}
.sts-presenter input,.sts-presenter select,.sts-presenter textarea,
.sts-join input,.sts-join select,.sts-join textarea,
.sts-public-admin input,.sts-public-admin select,.sts-public-admin textarea,
.sts-control input,.sts-control select,.sts-control textarea{background:var(--bg-card);color:var(--text);border-color:var(--border)}

.sts-card,.sts-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}

/* ============ BADGES ============ */
.sts-category-badge{display:inline-block;background:var(--blue);color:#fff;padding:4px 14px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.sts-category-badge-sm{display:inline-block;background:var(--bg-surface);color:var(--text-dim);padding:2px 10px;border-radius:10px;font-size:.65rem;font-weight:600}
.sts-cat-sm{display:inline-block;background:var(--bg-surface);color:var(--text-dim);padding:2px 8px;border-radius:6px;font-size:.6rem;font-weight:600;margin-right:4px}
.sts-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:700;color:#fff}
.sts-badge-lobby{background:#475569}.sts-badge-playing{background:var(--blue)}.sts-badge-paused{background:var(--orange)}.sts-badge-finished{background:var(--green)}.sts-badge-phase{background:var(--blue)}

/* ============ BUTTONS ============ */
.sts-ctrl-btn{padding:10px 24px;border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--blue);color:#fff!important}
.sts-ctrl-btn:hover{filter:brightness(1.15);box-shadow:0 0 16px var(--blue-glow)}
.sts-ctrl-btn:active{transform:scale(.97)}
.sts-ctrl-btn:disabled{opacity:.3;cursor:not-allowed;transform:none!important;filter:none!important;box-shadow:none!important}
.sts-ctrl-start{background:var(--green);font-size:1.1rem;padding:16px 40px;margin-top:20px}
.sts-ctrl-danger{background:var(--red)}

/* ============================================
   PRESENTER — PROJECTOR (DARK)
   ============================================ */
.sts-presenter{max-width:1200px;margin:0 auto;padding:24px;font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh}

/* Lobby */
.sts-lobby-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;min-height:80vh;align-items:center}
.sts-lobby-main{text-align:center;padding:40px 20px}
.sts-game-title{font-size:3rem;font-weight:900;margin-bottom:28px;color:#fff}
.sts-qr-section{margin:28px auto;max-width:280px}
#sts-qr-code{margin:0 auto 14px;display:flex;justify-content:center}
#sts-qr-code img{border-radius:14px;box-shadow:var(--shadow-lg);border:3px solid var(--bg-card)}
.sts-join-link{font-size:.75rem;color:var(--text-muted);word-break:break-all}
.sts-waiting-msg{color:var(--text-muted);font-size:.9rem;margin-top:20px;font-style:italic}
.sts-lobby-teams{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.sts-lobby-teams h2{font-size:1.1rem;margin-bottom:16px;color:var(--text)}
.sts-lobby-teams ul{list-style:none}
.sts-lobby-teams li{padding:10px 14px;margin-bottom:6px;background:var(--bg-surface);border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;border-left:3px solid var(--blue);color:var(--text)}

/* Playing */
.sts-play-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--bg-card2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);margin-bottom:20px}
.sts-play-progress{font-size:1rem;font-weight:700}
.sts-play-answers{font-size:.8rem;color:var(--text-dim);min-width:120px}
.sts-answers-bar{height:4px;background:var(--bg-surface);border-radius:2px;margin-top:4px;overflow:hidden}
.sts-answers-fill{height:100%;background:var(--green);border-radius:2px;transition:width .5s ease}
.sts-phase-label{text-align:center;font-size:1.3rem;font-weight:800;padding:10px;color:var(--orange);letter-spacing:3px;text-transform:uppercase}

.sts-play-body-full{padding:16px 0}
.sts-play-body-full .sts-play-question{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow-lg);max-width:900px;margin:0 auto}
.sts-play-body-full .sts-play-question h2{font-size:1.9rem;font-weight:800;margin-bottom:20px;line-height:1.3;color:#fff}
.sts-play-body-full .sts-play-question .sts-image{max-width:100%;max-height:300px;border-radius:var(--radius-sm);margin-bottom:16px;object-fit:contain}

/* Countdown */
#sts-p-countdown{display:flex;align-items:center;gap:12px}
.sts-cd-label{font-size:.8rem;color:var(--text-dim)}
.sts-cd-num{font-size:2rem;font-weight:900;min-width:50px;text-align:center;color:#fff}
.sts-cd-num.warning{color:var(--orange)}
.sts-cd-num.danger{color:var(--red);animation:pulse .8s infinite}

/* Options */
.sts-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.sts-option-card{border-radius:var(--radius-sm);padding:18px 22px;font-size:1.15rem;font-weight:700;border:2px solid transparent;transition:all .3s}
.sts-opt-text{display:flex;align-items:center;gap:10px}
.sts-option-card.opt-A,.sts-option-card.opt-A *{color:var(--red)!important}
.sts-option-card.opt-A{background:var(--red-glow);border-color:rgba(239,68,68,.3)}
.sts-option-card.opt-B,.sts-option-card.opt-B *{color:var(--blue)!important}
.sts-option-card.opt-B{background:var(--blue-glow);border-color:rgba(59,130,246,.3)}
.sts-option-card.opt-C,.sts-option-card.opt-C *{color:var(--orange)!important}
.sts-option-card.opt-C{background:var(--orange-glow);border-color:rgba(249,115,22,.3)}
.sts-option-card.opt-D,.sts-option-card.opt-D *{color:var(--purple)!important}
.sts-option-card.opt-D{background:var(--purple-glow);border-color:rgba(168,85,247,.3)}
.sts-option-card.dimmed{opacity:.3}
.sts-option-card.correct{border-color:var(--green)!important;background:var(--green-glow)!important;color:var(--green)!important;box-shadow:0 0 20px var(--green-glow)}
.sts-option-card.wrong{opacity:.15}
.sts-dist-bar{height:5px;background:var(--bg-surface);border-radius:3px;margin-top:8px;overflow:hidden;position:relative}
.sts-dist-fill{height:100%;border-radius:3px;transition:width .6s ease}
.opt-A-bg{background:var(--red)}.opt-B-bg{background:var(--blue)}.opt-C-bg{background:var(--orange)}.opt-D-bg{background:var(--purple)}
.sts-dist-num{position:absolute;right:0;top:-14px;font-size:.65rem;color:var(--text-muted)}
.sts-explanation{margin-top:16px;padding:14px 18px;background:var(--green-glow);border-left:3px solid var(--green);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.85rem;color:var(--text)}

/* ============ FINISHED — PROJECTOR ============ */
.sts-confetti{display:none!important}

/* Layout: sidebar + columns */
.fin-layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}

/* Sidebar: podium + ranking */
.fin-sidebar{padding:24px 20px;background:var(--bg-card);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.fin-sidebar h1{font-size:1.4rem;font-weight:900;color:#fff!important;text-align:center;margin-bottom:16px}
.fin-sidebar h3{font-size:.7rem;color:var(--text-muted)!important;text-transform:uppercase;letter-spacing:1px;margin:16px 0 8px}

.sts-podium{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin:0 auto 8px;max-width:260px}
.sts-podium-item{border-radius:10px;padding:12px 8px;text-align:center;font-weight:700;animation:popIn .5s ease both;display:flex;flex-direction:column;justify-content:flex-end;min-width:60px}
.sts-podium-name{font-size:.65rem;margin-bottom:2px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sts-podium-medal{font-size:.6rem;opacity:.5;margin-top:2px;text-transform:uppercase}
.sts-podium-score{font-size:1.4rem;font-weight:900;display:block;line-height:1}
.sts-podium-1{background:linear-gradient(160deg,#ca8a04,#eab308);color:#422006;min-height:100px;flex:1.2;box-shadow:0 0 20px rgba(234,179,8,.2)}
.sts-podium-2{background:linear-gradient(160deg,#6b7280,#9ca3af);color:#1f2937;min-height:75px;flex:1}
.sts-podium-3{background:linear-gradient(160deg,#92400e,#d97706);color:#fff;min-height:60px;flex:1}

#sts-final-ranking-list{list-style:none;padding:0;flex:1}
.fin-rank-item{display:flex;align-items:center;gap:6px;padding:6px 8px;margin-bottom:3px;border-radius:6px;background:var(--bg-surface);border:1px solid var(--border)}
.fin-rank-pos{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.6rem;background:var(--bg-card);color:var(--text-muted)!important;flex-shrink:0}
.fin-rank-name{flex:1;font-weight:600;font-size:.75rem;color:var(--text)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-rank-score{font-weight:900;font-size:.8rem;color:var(--blue)!important}
.fin-rank-1 .fin-rank-pos{background:var(--gold);color:#422006!important}
.fin-rank-2 .fin-rank-pos{background:#9ca3af;color:#1f2937!important}
.fin-rank-3 .fin-rank-pos{background:#d97706;color:#fff!important}

/* Main: dynamic columns of questions */
.fin-main{padding:20px;overflow-y:auto;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.fin-col{flex:1;min-width:280px;max-width:50%}

/* Each question row: compact */
.fin-row{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;margin-bottom:4px;padding:6px 10px;overflow:hidden}
.fin-r-head{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.fin-r-num{font-weight:900;font-size:.65rem;color:var(--text-muted)!important;flex-shrink:0}
.fin-r-q{flex:1;font-size:.95rem;font-weight:700;color:#fff!important;line-height:1.2}
.fin-r-pct{font-weight:800;font-size:.7rem;flex-shrink:0}
.fin-r-pct.good{color:var(--green)!important}
.fin-r-pct.bad{color:var(--red)!important}

.fin-r-opts{display:flex;gap:3px;flex-wrap:wrap}
.fin-r-opt{font-size:.6rem;padding:1px 6px;border-radius:3px;background:var(--bg-surface);color:var(--text-muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.fin-r-ok{background:transparent!important;color:var(--green)!important;font-weight:800;border:2px solid var(--green);font-size:.65rem!important}

/* Responsive */
@media(max-width:900px){
  .fin-layout{grid-template-columns:1fr}
  .fin-sidebar{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;flex-wrap:wrap;gap:16px;align-items:flex-start}
  .fin-sidebar h1{width:100%}
  .sts-podium{margin:0}
  #sts-final-ranking-list{display:flex;flex-wrap:wrap;gap:4px}
  .fin-rank-item{min-width:120px}
  .fin-col{min-width:100%;max-width:100%}
}
@media(max-width:500px){.fin-sidebar{padding:16px 12px}.fin-main{padding:12px}}

/* ============================================
   PLAYER — MOBILE (DARK)
   ============================================ */
.sts-join{max-width:480px;margin:0 auto;padding:16px;font-family:var(--font);min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text)}

/* ============ REGISTER SCREEN ============ */
.sts-register-box{padding:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}

.reg-hero{text-align:center;padding:24px 20px 20px}
.reg-icon{font-size:3.5rem;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.reg-hero h1{font-size:clamp(1.6rem,6vw,2.2rem);font-weight:900;color:#fff!important;margin-bottom:8px;line-height:1.1}
.reg-subtitle{font-size:.9rem;color:var(--text-muted)!important}

.reg-form{padding:4px 20px 32px}
.reg-field{margin-bottom:20px}
.reg-label{display:block;font-size:.85rem;font-weight:700;color:var(--text-dim)!important;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}

.reg-input{width:100%!important;padding:20px 18px!important;font-size:1.1rem!important;border:2px solid var(--border)!important;border-radius:var(--radius-sm)!important;background:var(--bg-card)!important;color:#fff!important;transition:border-color .2s;height:auto!important;line-height:normal!important;box-sizing:border-box!important}
.reg-input:focus{border-color:var(--blue)!important;outline:none!important;box-shadow:0 0 0 4px var(--blue-glow)!important}
.reg-input::placeholder{color:var(--text-muted)!important}
.reg-input-big{font-size:1.3rem!important;font-weight:700!important;text-align:center!important;padding:24px 20px!important;letter-spacing:1px}

/* Member rows */
.reg-member-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.reg-member-num{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff!important;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;flex-shrink:0}
.reg-member-row .reg-input{flex:1;padding:18px 16px;font-size:1.05rem}

.reg-add-btn{width:100%;padding:18px;border:2px dashed var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted)!important;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px}
.reg-add-btn:hover{border-color:var(--blue);color:var(--blue)!important;background:var(--blue-glow)}

.reg-submit{width:100%;padding:20px;font-size:1.2rem;font-weight:800;background:var(--green);color:#fff!important;border:none;border-radius:var(--radius);cursor:pointer;transition:all .15s;margin-top:12px;letter-spacing:.5px;text-transform:uppercase}
.reg-submit:hover{filter:brightness(1.15);box-shadow:0 4px 20px rgba(34,197,94,.3)}
.reg-submit:active{transform:scale(.98)}
.reg-submit:disabled{opacity:.4;cursor:not-allowed}

/* Game box */
.sts-game-box{animation:fadeIn .3s ease}
.sts-player-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-card2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);margin-bottom:12px}
.sts-player-team{font-weight:700;font-size:.95rem}
.sts-player-status{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px}

/* Timer bar */
.sts-player-timer{margin-bottom:12px}
.sts-timer-bar-track{height:5px;background:var(--bg-surface);border-radius:3px;overflow:hidden}
.sts-timer-bar-fill{height:100%;background:var(--green);border-radius:3px;transition:width .5s linear,background .3s}
.sts-timer-bar-fill.warning{background:var(--orange)}
.sts-timer-bar-fill.danger{background:var(--red)}
.sts-timer-bar-text{display:block;text-align:center;font-size:.75rem;font-weight:700;margin-top:4px;color:var(--text-muted)}

/* Question */
#sts_question_area h3{font-size:1.15rem;font-weight:700;margin-bottom:12px;color:#fff;line-height:1.4}
#sts_question_area .sts-image{width:100%;max-height:200px;object-fit:contain;border-radius:var(--radius-sm);margin-bottom:12px}
.sts-q-progress{font-size:.75rem;color:var(--text-muted);margin-bottom:8px;font-weight:600}

/* Answer buttons */
.sts-answer-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0}
.sts-answer-btn{width:100%;padding:16px 14px;border:2px solid transparent;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:all .12s;text-align:left;display:flex;align-items:center;gap:12px;background:var(--bg-card);color:var(--text)}
.sts-answer-btn .sts-opt-letter,.sts-answer-static .sts-opt-letter{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#fff;flex-shrink:0}
.sts-answer-btn.opt-A{border-color:rgba(239,68,68,.25);color:var(--text)!important}.sts-answer-btn.opt-A .sts-opt-letter{background:var(--red);color:#fff!important}
.sts-answer-btn.opt-B{border-color:rgba(59,130,246,.25);color:var(--text)!important}.sts-answer-btn.opt-B .sts-opt-letter{background:var(--blue);color:#fff!important}
.sts-answer-btn.opt-C{border-color:rgba(249,115,22,.25);color:var(--text)!important}.sts-answer-btn.opt-C .sts-opt-letter{background:var(--orange);color:#fff!important}
.sts-answer-btn.opt-D{border-color:rgba(168,85,247,.25);color:var(--text)!important}.sts-answer-btn.opt-D .sts-opt-letter{background:var(--purple);color:#fff!important}
.sts-answer-btn:active{transform:scale(.97)}
.sts-answer-btn:disabled{opacity:.3;cursor:not-allowed;transform:none!important}
.sts-answer-btn.selected{opacity:.5;border-width:3px}
.sts-answer-btn.selected.opt-A{border-color:var(--red);background:var(--red-glow)}
.sts-answer-btn.selected.opt-B{border-color:var(--blue);background:var(--blue-glow)}
.sts-answer-btn.selected.opt-C{border-color:var(--orange);background:var(--orange-glow)}
.sts-answer-btn.selected.opt-D{border-color:var(--purple);background:var(--purple-glow)}

/* Static answers */
.sts-answer-static{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;font-weight:600;display:flex;align-items:center;gap:12px;background:var(--bg-card);color:var(--text)}
.sts-answer-static .sts-opt-letter{background:#475569}
.sts-answer-static.opt-A .sts-opt-letter{background:var(--red)}.sts-answer-static.opt-B .sts-opt-letter{background:var(--blue)}
.sts-answer-static.opt-C .sts-opt-letter{background:var(--orange)}.sts-answer-static.opt-D .sts-opt-letter{background:var(--purple)}
.sts-answer-static.dimmed{opacity:.3}
.sts-answer-static.correct{border-color:var(--green);background:var(--green-glow)}
.sts-answer-static.wrong{border-color:var(--red);background:var(--red-glow)}

/* Sent */
.sts-sent-msg{text-align:center;padding:28px 18px;background:var(--green-glow);border:1px solid rgba(34,197,94,.2);border-radius:var(--radius);margin:14px 0}
.sts-sent-msg .sts-check{font-size:2.2rem;display:block;margin-bottom:6px;color:var(--green)!important}
.sts-sent-msg p{font-weight:600;color:var(--green)!important;font-size:.9rem}

/* Phase msg */
.sts-phase-msg{text-align:center;padding:24px 18px;background:var(--blue-glow);border:1px solid rgba(59,130,246,.15);border-radius:var(--radius);margin:14px 0}
.sts-phase-msg p{font-weight:700;color:var(--blue)!important;font-size:1rem}

/* Ranking */
.sts-player-ranking{margin-top:16px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.sts-player-ranking h4{font-size:.75rem;margin-bottom:8px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.sts-player-ranking ol{list-style:none;counter-reset:rank;padding:0}
.sts-player-ranking li{counter-increment:rank;padding:6px 0;font-size:.85rem;font-weight:600;display:flex;justify-content:space-between;border-bottom:1px solid var(--border);color:var(--text-dim)}
.sts-player-ranking li:last-child{border-bottom:none}
.sts-player-ranking li::before{content:counter(rank)".";margin-right:8px;color:var(--text-muted);min-width:22px}
.sts-player-ranking li.sts-rank-me{color:var(--blue);font-weight:700}

/* Waiting */
.sts-waiting{text-align:center;padding:44px 20px}
.sts-waiting h3{font-size:1.15rem;color:#fff;margin-bottom:8px}
.sts-waiting p{color:var(--text-muted);font-size:.85rem}
.sts-dots::after{content:'';animation:dots 1.5s infinite}

/* ============ PLAYER FINISHED ============ */
.sts-score-card{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 20px;box-shadow:var(--shadow-lg);margin-bottom:14px;animation:popIn .5s ease}
.sts-score-card h2{font-size:1.2rem;color:var(--text-dim);margin-bottom:12px}
.sts-score-big{font-size:3.2rem;font-weight:900;color:#fff;line-height:1}
.sts-score-label{font-size:.8rem;color:var(--text-muted);margin-top:4px}
.sts-score-rank{margin-top:12px;font-size:.95rem;font-weight:700;color:var(--text)}
.sts-winner-card{background:linear-gradient(160deg,#422006,#713f12);border:2px solid var(--gold);box-shadow:0 0 40px rgba(234,179,8,.15)}
.sts-winner-card .sts-score-big{color:var(--gold)}
.sts-winner-card .sts-score-rank{color:#fde68a}
.sts-trophy{font-size:3.2rem;margin-bottom:10px;animation:trophyBounce 1s ease}

/* Review */
.sts-results-review{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.sts-results-review h4{font-size:.75rem;color:var(--text-muted);margin-bottom:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.sts-review-row{display:grid;grid-template-columns:24px 1fr 28px 28px 24px;gap:4px;align-items:center;padding:8px 4px;border-radius:8px;margin-bottom:2px;font-size:.75rem}
.sts-rr-num{font-weight:700;color:var(--text-muted);text-align:center;font-size:.7rem}
.sts-rr-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim)}
.sts-rr-answer,.sts-rr-correct{text-align:center;font-weight:800;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.7rem}
.sts-rr-correct{background:var(--green-glow);color:var(--green)}
.sts-rr-icon{text-align:center;font-size:.9rem}
.sts-rr-ok{background:var(--green-glow)}.sts-rr-ok .sts-rr-icon{color:var(--green)}.sts-rr-ok .sts-rr-answer{background:var(--green-glow);color:var(--green)}
.sts-rr-fail{background:var(--red-glow)}.sts-rr-fail .sts-rr-icon{color:var(--red)}.sts-rr-fail .sts-rr-answer{background:var(--red-glow);color:var(--red)}
.sts-rr-skip{opacity:.3}
.sts-rr-explanation{font-size:.7rem;color:var(--text-muted);padding:2px 4px 8px 30px;font-style:italic}

/* ============ ANIMATIONS ============ */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(.7)}80%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes dots{0%{content:'.'}33%{content:'..'}66%{content:'...'}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes trophyBounce{0%{transform:scale(0) rotate(-20deg)}50%{transform:scale(1.3) rotate(5deg)}70%{transform:scale(.95)}100%{transform:scale(1) rotate(0)}}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){.sts-lobby-layout{grid-template-columns:1fr}.sts-options-grid{grid-template-columns:1fr}.sts-play-body-full .sts-play-question h2{font-size:1.3rem}.sts-play-body-full .sts-play-question{padding:20px}}
@media(min-width:600px) and (max-width:900px){.sts-options-grid{grid-template-columns:1fr 1fr}.sts-option-card{font-size:1rem;padding:14px 16px}}
@media(max-width:480px){.sts-presenter{padding:12px}.sts-game-title{font-size:2rem}.sts-finished-layout h1{font-size:1.8rem}}

/* ============================================
   ADMIN APP — CREATE + CONTROL
   ============================================ */
.sts-admin-app{min-height:100vh;font-family:var(--font);color:var(--text);background:var(--bg)}
.sts-admin-app *{color:var(--text)}
.sts-admin-app h1,.sts-admin-app h2,.sts-admin-app h3{color:#fff!important}
.sts-admin-app input,.sts-admin-app select{background:var(--bg-card);color:#fff!important;border-color:var(--border)}

/* Lock screen */
.app-lock-icon{font-size:4rem;margin-bottom:8px;filter:drop-shadow(0 4px 16px rgba(0,0,0,.4))}
.app-lock-input{width:100%;max-width:240px;padding:18px;font-size:1.5rem;font-weight:700;text-align:center;letter-spacing:6px;border:2px solid var(--border,#1e293b);border-radius:12px;background:var(--bg-card,#141b2d);color:#fff;transition:border-color .2s}
.app-lock-input:focus{border-color:var(--blue,#3b82f6);outline:none;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.app-lock-input::placeholder{color:var(--text-muted,#64748b);font-size:1rem;letter-spacing:1px}
.app-lock-btn{display:block;width:100%;max-width:240px;margin:16px auto 0;padding:16px;font-size:1.1rem;font-weight:800;background:var(--blue,#3b82f6);color:#fff!important;border:none;border-radius:12px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .15s}
.app-lock-btn:hover{filter:brightness(1.15);box-shadow:0 4px 20px rgba(59,130,246,.3)}
.app-lock-error{color:var(--red,#ef4444)!important;font-weight:700;margin-top:14px;font-size:.9rem}

/* Sections */
.app-section{max-width:600px;margin:0 auto;padding:0 20px 24px}
.app-section-title{font-size:.8rem!important;color:var(--text-muted)!important;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;padding-left:4px}

/* Active games list */
.app-games-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.app-game-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}
.app-game-item:hover{border-color:var(--blue);box-shadow:0 0 16px var(--blue-glow)}
.app-game-info{flex:1;min-width:0}
.app-game-title{font-size:.95rem;font-weight:700;color:#fff!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-game-meta{font-size:.7rem;color:var(--text-muted)!important;margin-top:2px}
.app-game-badge{padding:4px 10px;border-radius:6px;font-size:.65rem;font-weight:800;color:#fff!important;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}
.app-game-status-lobby{background:#475569}
.app-game-status-playing{background:var(--green)}
.app-game-status-paused{background:var(--orange)}
.app-game-status-finished{background:var(--text-muted)}

.app-hero{text-align:center;padding:48px 24px 24px}
.app-hero h1{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:900;margin-bottom:8px}
.app-hero p{color:var(--text-muted)!important;font-size:.9rem}

/* Quiz list */
.app-quiz-list{display:flex;flex-direction:column;gap:8px}
.app-quiz-item{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);margin-bottom:10px;cursor:pointer;transition:all .15s}
.app-quiz-item:hover{border-color:var(--blue);box-shadow:0 0 20px var(--blue-glow);transform:translateX(4px)}
.app-quiz-icon{font-size:2rem;flex-shrink:0}
.app-quiz-info{flex:1}
.app-quiz-title{font-size:1.1rem;font-weight:700;color:#fff!important}
.app-quiz-meta{font-size:.8rem;color:var(--blue)!important;font-weight:700;margin-top:2px}
.app-quiz-desc{font-size:.75rem;color:var(--text-muted)!important;margin-top:4px}
.app-quiz-arrow{font-size:1.5rem;color:var(--text-muted)!important;opacity:.5}

/* Config form */
.app-form{max-width:500px;margin:0 auto;padding:0 20px 40px}
.app-form label{display:block;font-weight:700;color:var(--text-dim)!important;font-size:.8rem;margin-bottom:6px;margin-top:16px;text-transform:uppercase;letter-spacing:.5px}
.app-input{width:100%!important;padding:20px 16px!important;font-size:1.15rem!important;font-weight:600!important;border:2px solid var(--border)!important;border-radius:var(--radius-sm)!important;background:var(--bg-card)!important;color:#fff!important;transition:border-color .2s;text-align:center;height:auto!important;line-height:normal!important;box-sizing:border-box!important}
.app-input:focus{border-color:var(--blue)!important;outline:none!important;box-shadow:0 0 0 3px var(--blue-glow)!important}
.app-input-big{font-size:1.3rem!important;font-weight:700!important;padding:24px 20px!important}
.app-form-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.app-form-col{text-align:center}
.app-toggle-row{display:flex;gap:8px;margin-top:4px}
.app-toggle{flex:1;padding:18px;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);font-weight:700;cursor:pointer;transition:all .15s;text-align:center;font-size:1rem;color:var(--text-dim)!important}
.app-toggle.active{border-color:var(--blue);background:var(--blue-glow);color:var(--blue)!important}
.app-btn-primary{width:100%;padding:18px;font-size:1.1rem;font-weight:800;background:var(--green);color:#fff!important;border:none;border-radius:var(--radius);cursor:pointer;margin-top:24px;text-transform:uppercase;letter-spacing:.5px;transition:all .15s}
.app-btn-primary:hover{filter:brightness(1.15);box-shadow:0 4px 20px rgba(34,197,94,.3)}
.app-btn-primary:disabled{opacity:.4;cursor:not-allowed}
.app-btn-back{display:block;width:100%;background:none;border:none;color:var(--text-muted)!important;font-size:.85rem;cursor:pointer;margin-top:12px;text-decoration:underline;text-align:center}

/* Ready bar (top) */
.app-ready-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:var(--bg-card2);border-bottom:1px solid var(--border)}
.app-ready-bar strong{color:#fff!important;font-size:1rem}
.app-ready-pin{margin-left:16px;font-size:.8rem;color:var(--text-muted)!important}
.app-ready-pin strong{color:var(--orange)!important}
.app-btn-projector{display:inline-block;padding:10px 24px;background:var(--blue);color:#fff!important;border-radius:8px;font-weight:700;font-size:.85rem;text-decoration:none;transition:all .15s}
.app-btn-projector:hover{filter:brightness(1.15)}

.app-ready-join{display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--bg-surface);border-bottom:1px solid var(--border);font-size:.8rem;flex-wrap:wrap}
.app-ready-join span{color:var(--text-muted)!important;white-space:nowrap}
.app-ready-join code{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:.75rem;word-break:break-all;color:var(--text-dim)!important;font-family:monospace}
.app-btn-copy{padding:6px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-dim)!important;font-size:.75rem;cursor:pointer;font-weight:600;white-space:nowrap}
.app-btn-copy:hover{border-color:var(--blue);color:var(--blue)!important}

.app-btn-new-game{width:100%;padding:16px;background:var(--green);color:#fff!important;border:none;border-radius:var(--radius);font-size:1rem;font-weight:700;cursor:pointer;margin-top:16px;text-transform:uppercase;letter-spacing:.5px}
.app-btn-new-game:hover{filter:brightness(1.15)}

/* ============================================
   CONTROL PANEL — FULL SCREEN DASHBOARD
   ============================================ */
.sts-control{max-width:100%;min-height:100vh;padding:0;font-family:var(--font);color:var(--text);background:var(--bg)}

/* Top bar */
.ctrl-topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--bg-card2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.ctrl-topbar-left{display:flex;align-items:center;gap:16px}
.ctrl-topbar-left h1{font-size:1rem;font-weight:800;color:#fff!important;white-space:nowrap}
.ctrl-topbar-right{display:flex;gap:8px;flex-wrap:wrap}

.ctrl-badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:.65rem;font-weight:800;color:#fff!important;text-transform:uppercase;letter-spacing:.5px}
.ctrl-badge-lobby{background:#475569}
.ctrl-badge-playing{background:var(--green)}
.ctrl-badge-paused{background:var(--orange)}
.ctrl-badge-finished{background:var(--text-muted)}
.ctrl-badge-phase-reading{background:var(--blue)}
.ctrl-badge-phase-open{background:var(--green)}
.ctrl-badge-phase-closed{background:var(--orange)}
.ctrl-badge-phase-waiting{background:#475569}
.ctrl-info-text{font-size:.8rem;color:var(--text-dim)}

/* Buttons */
.ctrl-btn{padding:8px 18px;border:none;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .12s;background:var(--bg-surface);color:var(--text)!important;border:1px solid var(--border)}
.ctrl-btn:hover{background:var(--blue);color:#fff!important;border-color:var(--blue)}
.ctrl-btn:active{transform:scale(.97)}
.ctrl-btn:disabled{opacity:.3;cursor:not-allowed}
.ctrl-btn-green{background:var(--green);color:#fff!important;border-color:var(--green)}
.ctrl-btn-green:hover{filter:brightness(1.2)}
.ctrl-btn-red{background:var(--red);color:#fff!important;border-color:var(--red)}
.ctrl-btn-orange{background:var(--orange);color:#fff!important;border-color:var(--orange)}

/* Main layout */
.ctrl-main{display:grid;grid-template-columns:1fr 360px;gap:0;min-height:calc(100vh - 56px)}
.ctrl-left{padding:20px 24px;overflow-y:auto}
.ctrl-right{padding:20px;background:var(--bg-card);border-left:1px solid var(--border);overflow-y:auto}

/* Question card */
.ctrl-question-card{background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px}
.ctrl-q-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ctrl-q-header span{font-size:.8rem;font-weight:700;color:var(--text-dim)}
#ctrl-q-timer{font-size:1.4rem;font-weight:900;color:var(--orange)}
.ctrl-cat{display:inline-block;background:var(--blue);color:#fff!important;padding:2px 10px;border-radius:6px;font-size:.65rem;font-weight:700;text-transform:uppercase;margin-bottom:8px}
.ctrl-q-text{font-size:1.15rem;font-weight:700;color:#fff!important;line-height:1.4;margin-bottom:12px}

/* Options */
.ctrl-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ctrl-opt{padding:10px 14px;border-radius:8px;font-size:.85rem;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-dim)!important}
.ctrl-opt-correct{border-color:var(--green)!important;background:rgba(34,197,94,.15);color:var(--green)!important;font-weight:700}
.ctrl-explanation{margin-top:10px;padding:10px 14px;background:rgba(34,197,94,.06);border-left:3px solid var(--green);border-radius:0 8px 8px 0;font-size:.8rem;color:var(--text-dim)!important;font-style:italic}

/* Answers card */
.ctrl-answers-card{background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.ctrl-answers-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ctrl-answers-header h3{font-size:.85rem;font-weight:700;color:#fff!important}
#ctrl-answers-count{font-size:1.1rem;font-weight:900;color:var(--blue)}

.ctrl-progress-bar{height:6px;background:var(--bg-surface);border-radius:3px;overflow:hidden;margin-bottom:12px}
.ctrl-progress-fill{height:100%;background:var(--green);border-radius:3px;transition:width .4s ease}

/* Answers table */
.ctrl-table{width:100%;border-collapse:collapse;font-size:.8rem}
.ctrl-table thead th{text-align:left;padding:6px 10px;border-bottom:2px solid var(--border);color:var(--text-muted)!important;font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}
.ctrl-table tbody td{padding:8px 10px;border-bottom:1px solid var(--border)}
.ctrl-row-ok td{color:var(--green)!important}
.ctrl-row-fail td{color:var(--red)!important}

/* Distribution bars */
.ctrl-dist{margin-top:14px}
.ctrl-dist-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ctrl-dist-letter{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.7rem;background:var(--bg-surface);color:var(--text-dim)!important;flex-shrink:0}
.ctrl-dist-correct{background:var(--green);color:#fff!important}
.ctrl-dist-bar{flex:1;height:8px;background:var(--bg-surface);border-radius:4px;overflow:hidden}
.ctrl-dist-fill{height:100%;border-radius:4px;transition:width .4s ease}
.ctrl-dist-A{background:var(--red)}.ctrl-dist-B{background:var(--blue)}.ctrl-dist-C{background:var(--orange)}.ctrl-dist-D{background:var(--purple)}
.ctrl-dist-count{font-size:.75rem;font-weight:700;color:var(--text-dim)!important;min-width:20px;text-align:right}

/* Ranking (right panel) */
.ctrl-ranking-card,.ctrl-teams-card{margin-bottom:16px}
.ctrl-ranking-card h3,.ctrl-teams-card h3{font-size:.8rem;font-weight:700;color:var(--text-muted)!important;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
#ctrl-ranking{list-style:none;padding:0}
.ctrl-rank-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:4px;border-radius:8px;background:var(--bg-surface);border:1px solid var(--border)}
.ctrl-rank-pos{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.7rem;background:var(--bg-card);color:var(--text-muted)!important;flex-shrink:0}
.ctrl-rank-name{flex:1;font-weight:600;font-size:.85rem;color:var(--text)!important}
.ctrl-rank-score{font-weight:900;font-size:.9rem;color:var(--blue)!important}
.ctrl-rank-1 .ctrl-rank-pos{background:var(--gold);color:#422006!important}
.ctrl-rank-2 .ctrl-rank-pos{background:#9ca3af;color:#1f2937!important}
.ctrl-rank-3 .ctrl-rank-pos{background:#d97706;color:#fff!important}
.ctrl-rank-1{border-color:rgba(234,179,8,.3)}
.ctrl-rank-2{border-color:rgba(156,163,175,.3)}
.ctrl-rank-3{border-color:rgba(217,119,6,.3)}

/* Teams list */
.ctrl-team-item{padding:8px 10px;margin-bottom:4px;border-radius:8px;background:var(--bg-surface);border:1px solid var(--border);font-size:.85rem}
.ctrl-team-item strong{color:#fff!important}
.ctrl-team-size{color:var(--text-muted)!important;font-size:.75rem}
.ctrl-team-members{display:block;font-size:.75rem;color:var(--text-muted)!important;margin-top:2px}

/* Game log table */
.ctrl-log-card{background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:16px}
.ctrl-log-card h3{font-size:.8rem;font-weight:700;color:var(--text-muted)!important;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.ctrl-log-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctrl-log-table{width:100%;border-collapse:collapse;font-size:.75rem;white-space:nowrap}
.ctrl-log-table thead{position:sticky;top:0}
.ctrl-log-th-team{text-align:left;padding:6px 10px;background:var(--bg-surface);color:var(--text-dim)!important;font-weight:700;border-bottom:2px solid var(--border);min-width:100px;position:sticky;left:0;z-index:2}
.ctrl-log-th-q{text-align:center;padding:6px 4px;background:var(--bg-surface);color:var(--text-muted)!important;font-weight:700;border-bottom:2px solid var(--border);min-width:32px}
.ctrl-log-th-total{text-align:center;padding:6px 8px;background:var(--bg-surface);color:var(--blue)!important;font-weight:900;border-bottom:2px solid var(--border);min-width:42px}
.ctrl-log-team{text-align:left;padding:6px 10px;font-weight:700;color:var(--text)!important;border-bottom:1px solid var(--border);position:sticky;left:0;background:var(--bg-card2);z-index:1}
.ctrl-log-cell{text-align:center;padding:6px 4px;font-weight:700;border-bottom:1px solid var(--border)}
.ctrl-log-ok{color:var(--green)!important;background:rgba(34,197,94,.08)}
.ctrl-log-fail{color:var(--red)!important;background:rgba(239,68,68,.06)}
.ctrl-log-empty{color:var(--text-muted)!important;opacity:.3}
.ctrl-log-current{background:var(--blue-glow)!important}
.ctrl-log-total{text-align:center;padding:6px 8px;font-weight:900;font-size:.85rem;color:var(--blue)!important;border-bottom:1px solid var(--border)}
.ctrl-log-correct-row .ctrl-log-team{color:var(--green)!important;font-style:italic}
.ctrl-log-correct-cell{color:var(--green)!important;background:rgba(34,197,94,.06);font-weight:800}
.ctrl-log-th-q.ctrl-log-current,.ctrl-log-th-team.ctrl-log-current{background:var(--blue-glow)!important}

/* Responsive */
@media(max-width:900px){
  .ctrl-main{grid-template-columns:1fr}
  .ctrl-right{border-left:none;border-top:1px solid var(--border)}
  .ctrl-topbar{flex-direction:column;gap:10px;align-items:flex-start}
  .ctrl-opts{grid-template-columns:1fr}
}
@media(max-width:500px){
  .ctrl-left{padding:12px}
  .ctrl-right{padding:12px}
  .ctrl-topbar-right{width:100%;justify-content:flex-start}
  .ctrl-btn{padding:6px 12px;font-size:.75rem}
}

/* ============ PROJECTOR: FULL SIZE ============ */
.sts-presenter{max-width:100%!important;min-height:100vh;padding:24px 40px}
.sts-play-body-full{padding:20px 0}
.sts-play-body-full .sts-play-question{max-width:100%;padding:40px 60px}
.sts-play-body-full .sts-play-question h2{font-size:clamp(1.5rem,4vw,2.8rem);line-height:1.2}
.sts-options-grid{grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.sts-option-card{padding:24px 28px;font-size:clamp(1rem,2.5vw,1.4rem)}
.sts-play-header{padding:18px 32px;font-size:1.1rem}
.sts-phase-label{font-size:clamp(1.2rem,3vw,2rem);padding:14px}
#sts-p-countdown{gap:16px}
.sts-cd-num{font-size:clamp(2rem,5vw,3.5rem)}
.sts-cd-label{font-size:clamp(.8rem,1.5vw,1.1rem)}

.sts-lobby-layout{gap:50px;min-height:90vh}
.sts-game-title{font-size:clamp(2rem,6vw,4rem)}
.sts-lobby-teams li{font-size:1rem;padding:12px 16px}
.sts-lobby-members{opacity:.5;font-size:.8em;font-weight:400}
.sts-auto-tag{background:var(--orange);color:#fff!important;padding:3px 10px;border-radius:6px;font-size:.65rem;vertical-align:middle;margin-left:8px}

/* (old stat styles removed — replaced by fin-q-* grid) */

/* ============ PLAYER: selected hint + dimmed ============ */
.sts-selected-hint{text-align:center;font-size:.8rem;color:var(--text-muted);margin-top:8px;font-style:italic}
.sts-answer-btn.dimmed-btn{opacity:.35}
.sts-answer-btn.selected{opacity:1!important;border-width:3px;box-shadow:0 0 12px var(--blue-glow)}

/* ============ FULLSCREEN BUTTON (presentador) ============ */
.sts-fs-btn{position:fixed;top:14px;right:14px;z-index:100;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;
  background:rgba(30,41,59,.55);color:var(--text)!important;border:1px solid var(--border);
  border-radius:10px;cursor:pointer;opacity:.35;transition:opacity .2s,background .2s}
.sts-fs-btn:hover{opacity:1;background:var(--bg-surface)}
.sts-presenter:fullscreen,.sts-presenter:-webkit-full-screen{background:var(--bg)}

/* ============ AUDIO ============ */
/* Presentador: reproductor grande y centrado */
.sts-audio{display:block;width:100%;max-width:640px;margin:24px auto;height:54px}
/* Jugador: aviso de que el audio suena en pantalla */
.sts-audio-hint{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  background:var(--purple-glow);color:var(--purple)!important;border:1px solid var(--purple);
  border-radius:var(--radius-sm);padding:16px;margin:14px 0;font-weight:700;font-size:1rem}
/* Panel de control: reproductor compacto para repetir a peticion */
.ctrl-audio{display:block;width:100%;margin-top:12px;height:40px}

/* ============ PREGUNTA FINAL x2 ============ */
.sts-final-tag,.sts-final-badge,.ctrl-final-tag{
  display:inline-block;background:var(--gold);color:#1a1206!important;font-weight:900;
  border-radius:6px;padding:2px 10px;letter-spacing:.5px;vertical-align:middle;
  box-shadow:0 0 14px rgba(234,179,8,.5);animation:sts-final-pulse 1.2s ease-in-out infinite}
.sts-final-tag{font-size:.7rem;margin-left:8px}
.sts-final-badge{font-size:.8rem;margin-left:6px}
.ctrl-final-tag{font-size:.7rem;margin-left:8px}
@keyframes sts-final-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.sts-score-sub{text-align:center;color:var(--text-dim);font-size:.95rem;margin-top:2px}

/* ============ GESTION DE CONTENIDO (panel publico) ============ */
.app-btn-manage{display:inline-block;margin-top:6px;padding:10px 18px;font-size:.85rem;font-weight:700;
  background:var(--bg-card);color:var(--text)!important;border:2px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;transition:all .15s}
.app-btn-manage:hover{border-color:var(--blue);color:var(--blue)!important}
/* Textareas dentro del form de contenido: alineadas a la izquierda */
textarea.app-input{text-align:left!important;min-height:64px;resize:vertical;font-family:inherit;font-weight:600!important}
/* Mensaje de resultado al guardar */
.content-msg{text-align:center;margin-top:12px;font-weight:700;font-size:.9rem;min-height:1em}
.content-msg.err{color:var(--red)!important}
.content-msg.ok{color:var(--green)!important}
/* Vista previa del archivo */
#content-media-preview{margin-top:8px;text-align:center}
.content-file-name{display:inline-block;background:var(--purple-glow);color:var(--purple)!important;
  padding:6px 12px;border-radius:8px;font-size:.85rem;font-weight:700;word-break:break-all}
/* Listado de preguntas */
.content-q-item{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm)}
.content-q-correct{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff!important;font-weight:900;border-radius:8px;font-size:.9rem}
.content-q-text{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content-q-del{flex-shrink:0;background:none;border:1px solid var(--red);color:var(--red)!important;
  padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}
.content-q-del:hover{background:var(--red);color:#fff!important}
.content-q-edit{flex-shrink:0;background:none;border:1px solid var(--blue);color:var(--blue)!important;
  padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}
.content-q-edit:hover{background:var(--blue);color:#fff!important}
