/* Sobrevive con 100: misma estructura que 301 y Pop (styles.css) con paleta amarilla.
   Fondo: el vestíbulo de un banco (banco.svg). En el centro, la mesa con las monedas que te quedan y el marcador LED
   encima (las monedas salen volando con cada respuesta) y, a su derecha, el selector del intervalo. */
body.sob{
  --wall:#221c10; --panel:rgba(22,17,8,.9); --edge:#7a5f1c; --edge-hi:#a8842a;
  --led:#f5c518; --gold:#f5c518; --gold-dk:#9a6f00; --red:#ff5a45;
}
body.sob #bg{background:var(--wall) url("banco.svg") center/cover no-repeat}
body.sob #bg::after{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,rgba(0,0,0,0) 1px 3px),
  linear-gradient(to bottom,rgba(14,10,4,.6) 0,rgba(14,10,4,.1) 26%,rgba(14,10,4,.1) 62%,rgba(14,10,4,.75) 100%),
  radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 35%,rgba(0,0,0,.45) 100%)}

/* Logo en dos líneas: «SOBREVIVE CON» pequeño y «100» grande */
body.sob .logo{color:var(--gold);text-shadow:3px 3px 0 #000,0 0 14px rgba(245,197,24,.55)}
body.sob .logo a{display:flex;flex-direction:column;gap:5px}
body.sob .logo .l1{font-size:10px;letter-spacing:.08em;color:var(--cream);text-shadow:2px 2px 0 #000}
body.sob .logo .l2{font-size:30px}
body.sob .btn{background:var(--gold);color:var(--ink)}
body.sob .btn.alt{background:var(--cream)}
body.sob .countdown{text-shadow:0 0 8px rgba(245,197,24,.7)}
body.sob .seg .on{filter:drop-shadow(0 0 3px rgba(245,197,24,.85))}
body.sob .led.win .seg .on,body.sob .final.win .seg .on{fill:var(--green);filter:drop-shadow(0 0 3px rgba(79,212,134,.9))}
body.sob .led.pocas .seg .on,body.sob .led.bust .seg .on,body.sob .final.bust .seg .on{fill:var(--red);filter:drop-shadow(0 0 3px rgba(255,90,69,.9))}
body.sob .led .cap{color:var(--cream)}

/* Pregunta: altura fija para que la escena no salte al cambiar de pregunta */
.qpanel h2{min-height:2.1em;display:flex;align-items:center;justify-content:center}

/* Escena: a la izquierda la banca (marcador, coste en rojo y mesa con monedas), a la derecha el selector del intervalo */
.escena{flex:1;min-height:250px;padding:14px 0 10px;position:relative;display:flex;align-items:center;justify-content:center;gap:20px}
.banca{flex:1 1 0;min-width:0;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:10px}
.led.caja{position:relative;left:auto;top:auto;transform:none;z-index:auto;width:100%;max-width:190px;padding:8px 12px 10px}
.led.caja svg.seg{height:44px}
.mesa{width:100%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.mesa svg{display:block;width:100%;height:auto;overflow:visible}
.mesa .coin.gone{visibility:hidden}
.mesa .coin.riesgo{opacity:.28}
.mesa .coin.fly{animation:coinfly .8s cubic-bezier(.25,.7,.45,1) forwards}
@keyframes coinfly{0%{transform:translate(0,0);opacity:1}25%{transform:translate(calc(var(--dx) * .3),-14px);opacity:1}100%{transform:translate(var(--dx),-46px);opacity:0}}
/* Selector del intervalo: Desde | barra | Hasta. Cada número se cambia deslizándolo arriba/abajo, con ±1 o escribiéndolo;
   en la barra (0 abajo, 300 arriba) se toca o arrastra y se mueve el extremo más cercano. */
.selector{--cw:118px;flex:none;display:grid;grid-template-columns:var(--cw) 24px var(--cw);column-gap:12px;row-gap:10px;user-select:none;-webkit-user-select:none}
.selector .col{display:flex;flex-direction:column;gap:6px}
.selector .cab{font:11px/1 var(--f-pixel);letter-spacing:.14em;text-align:center;color:var(--cream);text-shadow:2px 2px 0 #000;padding-bottom:2px}
.paso{font:28px/1 var(--f-term);color:var(--cream);background:rgba(0,0,0,.6);border:0;box-shadow:inset 0 0 0 3px #4a3c20;min-height:56px;cursor:pointer;touch-action:manipulation}
.paso:hover{color:var(--cream)}
.paso:active{background:var(--edge);color:var(--cream)}
.paso:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.valor{display:flex;flex-direction:column;align-items:center;gap:2px;background:#000;box-shadow:inset 0 0 0 3px var(--edge);padding:12px 4px 8px;touch-action:none;cursor:ns-resize}
.valor.drag,.valor:focus-within{box-shadow:inset 0 0 0 3px var(--gold)}
.valor input{width:100%;min-width:0;background:none;border:0;outline:none;border-radius:0;padding:2px 0;text-align:center;cursor:ns-resize;
  font:30px/1 var(--f-pixel);color:var(--gold);caret-color:var(--gold);text-shadow:0 0 8px rgba(245,197,24,.45)}
.valor input:focus{cursor:text}
.valor small{font-size:19px;color:var(--dim)}
.barra{grid-column:2;grid-row:1;position:relative;margin-top:19px;background:#000;box-shadow:0 0 0 3px var(--edge);touch-action:none;cursor:ns-resize}
.bfill{position:absolute;left:3px;right:3px;bottom:calc(var(--pa,0) * 100%);top:calc((1 - var(--pb,1)) * 100%);min-height:2px;background:var(--gold);box-shadow:0 0 10px rgba(245,197,24,.5)}
/* Lo que cuesta el intervalo elegido si la respuesta está dentro, en rojo, mientras lo mueves */
.resumen{grid-column:1 / -1;margin:0;text-align:center;font-size:30px;line-height:1.05;color:var(--red);text-shadow:2px 2px 0 #000,0 0 10px rgba(255,90,69,.45)}
.nota{grid-column:1 / -1;margin:-6px 0 0;text-align:center;font-size:18px;line-height:1.1;color:var(--dim);text-shadow:1px 1px 0 #000}
@media (max-width:560px){
  .escena{gap:10px}
  .nota{font-size:16px}
  .selector{--cw:86px;column-gap:7px}
  .paso{font-size:24px;min-height:50px}
  .valor input{font-size:21px}
  .valor small{font-size:16px}
  .led.caja svg.seg{height:32px}
  .resumen{font-size:26px}
}

/* Sello sobre la mesa: monedas perdidas, ¡EXACTO!, ¡SOBREVIVES! o ¡BANCARROTA! */
body.sob .stamp{position:absolute;left:50%;top:40%;color:var(--ink);background:var(--gold);font-size:18px;padding:12px 14px}
body.sob .stamp.ok{background:var(--green)}
body.sob .stamp.bad{background:var(--red);color:#fff}

/* 7 preguntas */
.slots.s7{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.slot.ok .pt{color:var(--green)}
.slot.cur{box-shadow:inset 0 0 0 2px var(--gold)}
.slot.cur .pt{color:var(--gold)}
.slot .pt.lost{color:#ffb35a}
.slot.bust .pt{color:var(--red)}
.slot .pt.long{font-size:21px;line-height:1.05}
@media (max-width:440px){.slots.s7 .slot{padding:6px 2px 8px}.slot .pt.long{font-size:18px}}

#guess{caret-color:var(--gold);text-align:center}
#guess:focus{box-shadow:inset 0 0 0 2px var(--gold)}
#guess.shake{animation:shake .22s steps(2)}
#send{width:100%;min-height:52px;font-size:16px}
.msg.ok{color:var(--green)}
.msg.bad{color:#ff8f7a}
.final .cap.left{text-align:left}

/* Resumen: respuesta correcta y la tuya bajo cada pregunta */
td small.det{display:block;font-size:20px;color:var(--dim);margin-top:2px}
td small.det b{font-weight:400;color:var(--cream)}
tr.skip td{color:#7d6a4c}
/* Mini barra de cada intervalo, ampliada a su zona: tu intervalo en dorado; la respuesta en verde si quedó dentro, en rojo si fuera */
.mini{display:flex;align-items:center;gap:8px;max-width:380px;margin:8px 0 3px;font-size:18px;line-height:1;color:var(--dim)}
.mini svg{flex:1;min-width:0;height:16px;display:block;overflow:visible}
.mini .tr{fill:#3a2f1a}
.mini .iv{fill:var(--gold)}
.mini .pt0{fill:#000}
.mini .ok{fill:var(--green)}
.mini .ko{fill:var(--red)}

/* Cómo se juega · ejemplo (pantalla 2): la misma pregunta con un intervalo que acierta y otro que falla */
.ej-q{margin:0;text-align:center;font-size:27px;line-height:1.15;color:var(--cream);text-shadow:2px 2px 0 #000}
.ej-caso{display:flex;flex-direction:column;gap:8px;background:#0b0805;padding:12px 14px;box-shadow:inset 0 0 0 2px var(--edge)}
.ej-caso.dentro{box-shadow:inset 0 0 0 2px #2f7a52}
.ej-caso.fuera{box-shadow:inset 0 0 0 2px #8a2f24}
.ej-caso p{margin:0;line-height:1.2}
.ej-caso p b{font-weight:400;color:var(--gold)}
.ej-iv{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:22px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.ej-iv b{font-weight:400;color:var(--gold)}
.ej-tag{font:10px/1 var(--f-pixel);padding:5px 6px 4px;box-shadow:0 0 0 2px #000}
.dentro .ej-tag{background:var(--green);color:var(--ink)}
.fuera .ej-tag{background:var(--red);color:#fff}
.ej-pierdes{color:var(--red)}
.ej-bar svg{display:block;width:100%;height:18px}
.ej-bar .tr{fill:#3a2f1a}
.ej-bar .iv{fill:var(--gold)}
.ej-bar .pt0{fill:#000}
.ej-bar .ok{fill:var(--green)}
.ej-bar .ko{fill:var(--red)}
.ej-esc{display:flex;justify-content:space-between;font-size:17px;line-height:1;color:var(--dim);margin-top:4px}
.ej-tip{margin:0;text-align:center;font-size:23px;line-height:1.2;color:var(--cream)}
.ej-tip strong{font-weight:400;color:var(--gold)}

/* Pregunta repetida junto a la casilla: solo con el teclado del móvil abierto, que tapa el panel de arriba */
.qmini{display:none;margin:0;font-size:24px;line-height:1.1;color:var(--cream);text-align:center;scroll-margin-top:8px}
body.kb .qmini{display:block}
@media (max-width:440px){body.sob .logo .l1{font-size:8px}body.sob .logo .l2{font-size:22px}}