/* ============================================================
   STOP THE LINE — Estilos completos
   Paleta: navy-blue gradient + cyan/indigo accents
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --stl-bg-1:       #080e1b;
  --stl-bg-2:       #111827;
  --stl-bg-3:       #172554;
  --stl-bg-4:       #0f172a;
  --stl-border:     rgba(96,165,250,.22);
  --stl-glow-blue:  rgba(37,99,235,.14);
  --stl-glow-ring:  rgba(96,165,250,.07);
  --stl-shadow:     rgba(0,0,0,.38);
  --stl-card-bg:    linear-gradient(135deg, var(--stl-bg-2) 0%, var(--stl-bg-3) 42%, var(--stl-bg-4) 100%);
  --stl-card-shadow:
    0 0 0 1px var(--stl-glow-ring),
    0 0 20px var(--stl-glow-blue),
    0 6px 22px var(--stl-shadow);
  --stl-radius:     14px;
  --stl-gap:        9px;
}

/* ── Wrapper raíz ───────────────────────────────────────────── */
.stl-wrap {
  display:        flex;
  flex-direction: column;
  height:         100%;
  gap:            var(--stl-gap);
  padding:        8px;
  box-sizing:     border-box;
  overflow:       hidden;
}

/* ── Tarjeta base ───────────────────────────────────────────── */
.stl-card {
  background:  var(--stl-card-bg);
  border:      1px solid var(--stl-border);
  box-shadow:  var(--stl-card-shadow);
  border-radius: var(--stl-radius);
  transition:  border-color .25s, box-shadow .25s;
}

/* ── Panel de texto reconstruido ────────────────────────────── */
.stl-panel {
  position:       relative;
  flex:           0 0 auto;
  height:         158px;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  border-radius:  var(--stl-radius);
  background:     var(--stl-card-bg);
  border:         1px solid var(--stl-border);
  box-shadow:     var(--stl-card-shadow);
}

@media (min-height: 680px)  { .stl-panel { height: 178px; } }
@media (min-height: 820px)  { .stl-panel { height: 210px; } }
@media (min-height: 1000px) { .stl-panel { height: 240px; } }

/* Video de fondo */
.stl-panel-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}
.stl-panel-video.hidden { display: none; }

/* Overlay oscuro sobre img/video */
.stl-panel-overlay {
  position:          absolute;
  inset:             0;
  z-index:           1;
  pointer-events:    none;
  background: linear-gradient(
    to bottom,
    rgba(8,14,27,.72) 0%,
    rgba(8,14,27,.30) 60%,
    rgba(8,14,27,.55) 100%
  );
}

/* Barra de info */
.stl-panel-header {
  position:       relative;
  z-index:        2;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  padding:        7px 10px;
  flex-shrink:    0;
}

/* Badges */
.stl-badge {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        3px 10px;
  border-radius:  99px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.stl-badge-blue {
  background: rgba(79,70,229,.30);
  border:     1px solid rgba(129,140,248,.42);
  color:      #a5b4fc;
  box-shadow: 0 0 8px rgba(99,102,241,.18);
}
.stl-badge-red {
  background: rgba(185,28,28,.30);
  border:     1px solid rgba(248,113,113,.40);
  color:      #fca5a5;
  box-shadow: 0 0 8px rgba(239,68,68,.18);
}

/* Contenido desplazable */
.stl-panel-content {
  position:   relative;
  z-index:    2;
  flex-grow:  1;
  min-height: 0;
  overflow-y: auto;
  padding:    2px 10px 8px;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.40) transparent;
}
.stl-panel-content::-webkit-scrollbar        { width: 3px; }
.stl-panel-content::-webkit-scrollbar-track  { background: transparent; }
.stl-panel-content::-webkit-scrollbar-thumb  {
  background:    rgba(99,102,241,.45);
  border-radius: 99px;
}

/* ── Fragmento reconstruido ─────────────────────────────────── */
.stl-fragment-entry {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         2px;
  margin-bottom: 5px;
  padding:     4px 7px;
  background:  rgba(8,14,27,.52);
  border:      1px solid rgba(99,102,241,.20);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  animation:   stl-slide-in .28s ease-out both;
}
@keyframes stl-slide-in {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0);    }
}

.stl-word-block {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  background:     rgba(8,14,27,.65);
  border:         1px solid rgba(99,102,241,.28);
  border-radius:  6px;
  padding:        2px 5px;
  margin:         1px;
}
.stl-word-en {
  font-size:   11px;
  font-weight: 600;
  color:       #67e8f9;
  line-height: 1.3;
}
.stl-word-tr {
  font-size:   9px;
  color:       #94a3b8;
  font-style:  italic;
  line-height: 1.2;
}

/* ── Timer ──────────────────────────────────────────────────── */
.stl-timer-track {
  flex-shrink:  0;
  height:       5px;
  background:   rgba(255,255,255,.06);
  border-radius: 99px;
  overflow:     hidden;
  border:       1px solid rgba(255,255,255,.04);
}
.stl-timer-fill {
  height:        100%;
  width:         100%;
  border-radius: 99px;
  /* color inicial: se sobrescribe desde JS */
  background:    linear-gradient(90deg,#06b6d4,#818cf8);
  box-shadow:    0 0 10px rgba(6,182,212,.55);
}

/* ── Área del canvas ─────────────────────────────────────────── */
.stl-canvas-wrap {
  flex:          1 1 0;
  min-height:    0;
  position:      relative;
  border-radius: var(--stl-radius);
  overflow:      hidden;
  /* Fondo oscuro profundo visible a través del canvas transparente */
  background:    linear-gradient(145deg, var(--stl-bg-1) 0%, #0d1836 50%, var(--stl-bg-1) 100%);
  border:        1px solid var(--stl-border);
  box-shadow:    var(--stl-card-shadow);
}

.stl-canvas {
  display: block;
  width:   100%;
  height:  100%;
}

/* ── Botones de acción ──────────────────────────────────────── */
.stl-actions {
  flex-shrink: 0;
  display:     flex;
  gap:         8px;
}

.stl-btn {
  flex:            1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  padding:         11px 10px;
  border-radius:   12px;
  font-weight:     700;
  font-size:       13px;
  line-height:     1;
  border:          none;
  cursor:          pointer;
  white-space:     nowrap;
  letter-spacing:  .03em;
  transition:      transform .15s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.stl-btn:active:not(:disabled) { transform: scale(.95); }
.stl-btn:disabled {
  opacity:        .32;
  cursor:         not-allowed;
  pointer-events: none;
}

/* Ayuda / hint */
.stl-btn-hint {
  background: linear-gradient(135deg,#78350f 0%,#92400e 55%,#a16207 100%);
  border:     1px solid rgba(234,179,8,.28);
  color:      #fcd34d;
  box-shadow: 0 0 0 1px rgba(234,179,8,.08), 0 4px 14px rgba(0,0,0,.40);
}
.stl-btn-hint:hover:not(:disabled) {
  transform:  translateY(-1px);
  box-shadow: 0 0 14px rgba(234,179,8,.28), 0 6px 18px rgba(0,0,0,.40);
}

/* Detener */
.stl-btn-stop {
  background: linear-gradient(135deg,#7f1d1d 0%,#991b1b 55%,#b91c1c 100%);
  border:     1px solid rgba(239,68,68,.28);
  color:      #fecaca;
  font-size:  14px;
  box-shadow: 0 0 0 1px rgba(239,68,68,.08), 0 4px 14px rgba(0,0,0,.40);
}
.stl-btn-stop:hover:not(:disabled) {
  transform:  translateY(-1px);
  box-shadow: 0 0 18px rgba(239,68,68,.38), 0 6px 18px rgba(0,0,0,.40);
}
.stl-btn-stop:active:not(:disabled) {
  transform:  scale(.95);
  box-shadow: 0 0 28px rgba(239,68,68,.55), 0 2px 8px rgba(0,0,0,.40);
}

/* ── Pantalla de fin ─────────────────────────────────────────── */
.stl-end-screen {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  gap:             16px;
  padding:         28px 24px;
  text-align:      center;
  background:      linear-gradient(to bottom, var(--stl-bg-2), var(--stl-bg-1));
  border-radius:   16px;
  border:          1px solid rgba(96,165,250,.18);
  box-sizing:      border-box;
}

.stl-end-icon {
  font-size:  50px;
  line-height: 1;
  animation:  stl-bounce .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes stl-bounce {
  from { opacity:0; transform:scale(.2); }
  to   { opacity:1; transform:scale(1);  }
}

.stl-end-title {
  font-size:      clamp(20px, 6vw, 28px);
  font-weight:    800;
  letter-spacing: -.02em;
  margin:         0;
}
.stl-end-win {
  background:             linear-gradient(90deg,#67e8f9,#a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  filter:                  drop-shadow(0 0 14px rgba(103,232,249,.35));
}
.stl-end-lose {
  color:  #f87171;
  filter: drop-shadow(0 0 12px rgba(248,113,113,.55));
}

.stl-end-sub {
  font-size:  14px;
  color:      #94a3b8;
  max-width:  260px;
  margin:     0;
  line-height: 1.5;
}

.stl-end-btn {
  margin-top:    8px;
  padding:       13px 34px;
  background:    linear-gradient(135deg,#4f46e5 0%,#0891b2 100%);
  border:        1px solid rgba(129,140,248,.28);
  border-radius: 12px;
  color:         #fff;
  font-weight:   700;
  font-size:     14px;
  cursor:        pointer;
  letter-spacing: .03em;
  transition:    transform .2s, box-shadow .2s;
  box-shadow:    0 4px 22px rgba(79,70,229,.32);
  -webkit-tap-highlight-color: transparent;
}
.stl-end-btn:hover  { transform:translateY(-2px); box-shadow:0 8px 30px rgba(79,70,229,.48); }
.stl-end-btn:active { transform:scale(.97); }

/* ── Ajustes responsive ──────────────────────────────────────── */
/* Pantalla muy pequeña (< 580px alto, ej. iPhone SE horizontal) */
@media (max-height: 580px) {
  .stl-panel          { height: 115px; }
  .stl-wrap           { gap: 5px; padding: 5px; }
  .stl-btn            { padding: 9px 8px; font-size: 12px; }
  .stl-timer-track    { height: 4px; }
}

/* Pantalla mediana-grande (tablet) */
@media (min-width: 640px) {
  .stl-wrap  { padding: 12px; gap: 11px; }
  .stl-btn   { padding: 13px 14px; font-size: 14px; border-radius: 14px; }
}

/* Desktop grande */
@media (min-width: 1024px) {
  :root { --stl-radius: 16px; }
  .stl-wrap   { padding: 14px; gap: 12px; }
  .stl-btn    { font-size: 15px; padding: 14px 18px; }
}