/* Atrapa la respuesta: una tarjeta azul noche sobre una puerta metálica en pixel art (puerta.svg). Arriba la pregunta
   (en blanco) y, a la derecha, los puntos que darías (en amarillo); debajo tu intervalo cifra a cifra, centrado sobre
   la barra; luego la barra del tramo de 100 y el botón para fijarlo. Letras del sistema (no las pixel del resto de la web). */
body.atr{
  --wall:#3a3f46; --panel:rgba(20,23,27,.9); --edge:#5b636c;
  --led:#f5c518; --gold:#f5c518;
  --papel:#172338; --papel2:#0f182a; --linea:rgba(255,255,255,.12);
  --tinta:#f3f5f9; --tinta2:#93a1b8; --ambar:#f6b73c; --verde:#4fd08b; --rojo-ko:#ff6b5b;
  /* letras del sistema: pregunta con serifa, números estrechos y gruesos, cifras del intervalo de ancho fijo */
  --f-card:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-num:"Bahnschrift","DIN Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-preg:Georgia,"Times New Roman",serif;
  --f-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Roboto Mono",Menlo,monospace;
}
body.atr #bg{background:var(--wall) url("puerta.svg") center/cover no-repeat}
body.atr #bg::after{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,rgba(0,0,0,0) 1px 3px),
  linear-gradient(to bottom,rgba(10,12,15,.35) 0,rgba(10,12,15,0) 30%,rgba(10,12,15,.15) 70%,rgba(10,12,15,.6) 100%)}

/* Logo en dos líneas: «ATRAPA LA» pequeño y «RESPUESTA» más grande */
body.atr .logo{color:var(--gold);text-shadow:3px 3px 0 #000,0 0 14px rgba(245,197,24,.55)}
body.atr .logo a{display:flex;flex-direction:column;gap:5px}
body.atr .logo .l1{font-size:10px;letter-spacing:.08em;color:var(--cream);text-shadow:2px 2px 0 #000}
body.atr .logo .l2{font-size:22px}
@media (max-width:440px){body.atr .logo .l1{font-size:8px}body.atr .logo .l2{font-size:14px}}

/* ---------- La tarjeta ---------- */
body.atr .app{justify-content:flex-start}
.tarjeta{position:relative;width:100%;max-width:620px;margin:auto auto;display:flex;flex-direction:column;gap:14px;padding:18px 22px 20px;
  background:var(--papel);color:var(--tinta);font-family:var(--f-card);border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--linea),0 24px 50px rgba(0,0,0,.65)}
.t-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--linea);
  font:500 15px/1 var(--f-card);color:var(--tinta2)}
.t-cab #qtotal{font-weight:700;color:var(--tinta)}

/* Pregunta (izquierda) | puntos (derecha, en amarillo) */
.t-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
.tarjeta h2{margin:0;font:700 27px/1.2 var(--f-preg);color:var(--tinta);text-wrap:balance}
.t-pts{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:3.2ch}
.t-lbl{font:700 12px/1 var(--f-card);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2)}
.t-num{font:700 64px/.9 var(--f-num);font-stretch:condensed;letter-spacing:-.01em;color:var(--ambar)}
.t-num.cero{color:var(--rojo-ko)}

/* Tras fijar: el veredicto y la respuesta, debajo de la pregunta */
.t-rv{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-radius:12px;background:var(--papel2);box-shadow:inset 0 0 0 1px var(--linea)}
.t-rv[hidden]{display:none}
.t-rv b{font:700 26px/1.05 var(--f-preg);color:var(--tinta)}
.t-rv.ok b{color:var(--verde)}
.t-rv.ko b{color:var(--rojo-ko)}
.t-rv span{font:16px/1.2 var(--f-card);color:var(--tinta2)}

/* Tu intervalo, cifra a cifra en casillas, centrado justo encima de la barra */
.t-iv{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:2px}
.t-ivnum{display:flex;align-items:center;justify-content:center;gap:12px}
.t-ivnum span{font:600 20px/1 var(--f-card);color:var(--tinta2)}
/* cada cifra en su casilla: fuente de ancho fijo, una casilla de 1,6ch cada 1,8ch (el fondo) y la letra centrada en ella
   (.3ch de margen + 1ch de letra + .8ch de espaciado). --n (lo pone atrapa.js) es el número de cifras: así 100, 150
   o 300 caben enteros. El último espaciado (.5ch tras la última casilla) se tapa con el color de la tarjeta. */
body.atr .ivin{--n:2;--cas:var(--papel2);box-sizing:border-box;width:calc(var(--n) * 1.8ch + .3ch);padding:.18em 0 .18em .3ch;margin:0 -.5ch 0 0;
  border:0;border-radius:0;outline:none;font:700 40px/1 var(--f-mono);letter-spacing:.8ch;text-align:left;color:var(--tinta);caret-color:var(--ambar);cursor:text;
  background:linear-gradient(90deg,transparent calc(var(--n) * 1.8ch - .2ch),var(--papel) 0),
    repeating-linear-gradient(90deg,var(--cas) 0 1.6ch,transparent 1.6ch 1.8ch)}
body.atr .ivin:focus{--cas:#2a3a5a;color:var(--ambar)}
body.atr .ivin[readonly]{cursor:default}
body.atr .ivin::selection{background:var(--ambar);color:var(--papel)}
body.atr .ivin.shake{animation:shake .22s steps(2)}
.tarjeta.revela #ivLbl{visibility:hidden}

/* La barra (tramo de 100): pista oscura redondeada, bloque amarillo, rayas cada 25 y números debajo */
.rango{--ph:56px;position:relative;padding:12px 12px 30px;user-select:none;-webkit-user-select:none}
.rpista{position:relative;height:var(--ph);touch-action:none;cursor:pointer;border-radius:12px;
  background:var(--papel2);box-shadow:inset 0 0 0 1px var(--linea)}
.rblk{position:absolute;top:6px;bottom:6px;left:calc(var(--pa,0) * 100%);right:calc((1 - var(--pb,1)) * 100%);min-width:4px;
  border-radius:8px;background:var(--ambar);box-shadow:0 0 18px rgba(246,183,60,.35);cursor:grab}
.rpista.drag.m .rblk{cursor:grabbing}
/* extremos: zona ancha para el dedo con una raya blanca de agarre */
.rh{position:absolute;top:-6px;bottom:-6px;width:34px;cursor:ew-resize;touch-action:none;z-index:1}
.rh.lo{left:-17px}.rh.hi{right:-17px}
.rh::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:60%;transform:translate(-50%,-50%);border-radius:3px;
  background:#fff;box-shadow:0 0 0 2px var(--papel)}
.rh:focus{outline:none}
.rh:focus-visible::before{background:var(--ambar);box-shadow:0 0 0 2px #fff}
.rmarcas{position:absolute;left:12px;right:12px;top:12px;bottom:0;pointer-events:none}
.rmarcas i{display:none}
.rmarcas i.g{display:block;position:absolute;top:0;height:var(--ph);width:1px;background:var(--linea);transform:translateX(-50%)}
.rmarcas i.g:first-child,.rmarcas i.g:last-of-type{display:none}
.rmarcas span{position:absolute;bottom:4px;transform:translateX(-50%);font:600 14px/1 var(--f-mono);color:var(--tinta2)}
/* la respuesta correcta tras fijar: etiqueta blanca sobre la barra y una raya fina */
.bans{position:absolute;top:-6px;bottom:-6px;left:calc(var(--pr,0) * 100%);width:3px;transform:translateX(-50%);z-index:2;background:#fff;border-radius:2px}
.bans.ok{background:var(--verde)}
.bans.ko{background:var(--rojo-ko)}
.bans span{position:absolute;left:50%;bottom:100%;margin-bottom:4px;transform:translateX(-50%);padding:5px 9px 4px;white-space:nowrap;border-radius:6px;
  font:700 18px/1 var(--f-mono);color:var(--papel);background:#fff;animation:etiqueta .3s steps(3)}
.bans.ok span{background:var(--verde)}
.bans.ko span{background:var(--rojo-ko)}
@keyframes etiqueta{from{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.rango.revela .rpista{pointer-events:none}
.rango.revela .rh{display:none}

/* Botón amarillo de ancho completo */
.t-btn{width:100%;min-height:54px;border:0;border-radius:12px;cursor:pointer;font:700 20px/1 var(--f-num);font-stretch:condensed;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papel2);background:var(--ambar);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.t-btn:hover{background:#ffc552}
.t-btn:active{transform:translate(1px,1px)}
.t-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.t-btn.alt{background:#fff}

/* Móvil */
@media (max-width:560px){
  .tarjeta{padding:14px 14px 16px;gap:12px;border-radius:14px}
  .t-cab{font-size:13px}
  .tarjeta h2{font-size:21px}
  .t-top{gap:10px}
  .t-num{font-size:50px}
  .t-lbl{font-size:11px}
  body.atr .ivin{font-size:32px}
  .t-ivnum{gap:10px}
  .t-ivnum span{font-size:17px}
  .t-rv b{font-size:22px}
  .t-rv span{font-size:15px}
  .rango{--ph:50px;padding:10px 10px 28px}
  .rmarcas{left:10px;right:10px;top:10px}
  .rmarcas span{font-size:13px}
  .t-btn{min-height:48px;font-size:18px}
}
/* Pantallas bajas: lo pone common.js (ajustar) si no cabe */
body.ajuste1.atr .tarjeta{gap:8px;padding-top:12px;padding-bottom:12px}
body.ajuste1.atr .tarjeta h2{font-size:20px}
body.ajuste1.atr .t-num{font-size:44px}
body.ajuste1.atr .ivin{font-size:28px}
body.ajuste1.atr .rango{--ph:44px}
body.ajuste1.atr .t-btn{min-height:44px}
body.ajuste2.atr .tarjeta h2{font-size:18px}
body.ajuste2.atr .t-num{font-size:36px}
body.ajuste2.atr .ivin{font-size:24px}
body.ajuste2.atr #ivLbl{display:none}
body.ajuste2.atr .rango{--ph:38px}
body.ajuste2.atr .t-btn{min-height:40px}

/* La tarjeta, centrada en la pantalla entera: un hueco abajo igual de alto que la barra de arriba la equilibra */
body.atr .app::after{content:"";flex:0 0 auto;height:var(--alto-barra,56px)}

/* ---------- Ventanas (resumen, normas, archivo) con el mismo estilo azul noche ---------- */
body.atr .sheet{background:var(--papel);color:var(--tinta);font-family:var(--f-card);font-size:17px;border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--linea),0 24px 60px rgba(0,0,0,.75)}
body.atr .sh-head h3{font:700 30px/1.05 var(--f-preg);text-transform:none;letter-spacing:0;color:var(--tinta);text-shadow:none}
body.atr .sh-sub{color:var(--tinta2);font-size:15px}
body.atr .close{color:var(--tinta);box-shadow:0 0 0 1px var(--linea);border-radius:10px;font:700 18px/1 var(--f-card)}
body.atr .rules{font-size:18px;line-height:1.3;color:var(--tinta)}
body.atr .rules strong{color:var(--ambar);font-weight:700}
body.atr .rules li::marker{color:var(--ambar);font-weight:700}
body.atr .sheet .btn{border-radius:12px;font:700 18px/1 var(--f-num);font-stretch:condensed;letter-spacing:.1em;color:var(--papel2);background:var(--ambar);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
body.atr .sheet .btn.alt{background:#fff}
/* total grande */
.s-total{display:flex;align-items:baseline;gap:10px;padding:4px 0 12px;border-bottom:1px solid var(--linea)}
.s-total b{font:700 72px/.9 var(--f-num);font-stretch:condensed;color:var(--ambar)}
.s-total .s-de{font:600 22px/1 var(--f-card);color:var(--tinta2)}
.s-total .t-lbl{align-self:flex-start}
/* gráfica: barras grises, las que superas en amarillo, tu tramo en blanco */
body.atr .dist{background:none;box-shadow:none;padding:0}
body.atr .dist .lbl{font:700 13px/1 var(--f-card);letter-spacing:.14em;color:var(--tinta2)}
body.atr .dist-head{font:600 20px/1.2 var(--f-card);color:var(--tinta);text-shadow:none}
body.atr .dist-head b{font:700 30px/1 var(--f-num);font-stretch:condensed;color:var(--ambar);text-shadow:none;vertical-align:-2px}
body.atr .dist .bar.lost{fill:#2c3a54}
body.atr .dist .bar.won{fill:var(--ambar)}
body.atr .dist .bar.me{fill:#fff;filter:none}
body.atr .dist .ax,body.atr .dist .tkl{stroke:var(--tinta2)}
body.atr .dist .tk{font:600 14px var(--f-card);fill:var(--tinta2)}
body.atr .dist .mk{stroke:#fff}
body.atr .dist .pill{fill:#fff}
body.atr .dist .you{font:700 15px var(--f-card);fill:var(--papel)}
body.atr .dist-axis{font-size:14px;color:var(--tinta2)}
/* lista de preguntas: pregunta y respuesta a la izquierda, puntos a la derecha */
.s-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.s-lista li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--linea)}
.s-q{display:flex;flex-direction:column;gap:4px;min-width:0}
.s-q b{font:700 17px/1.25 var(--f-preg);color:var(--tinta)}
.s-q span{font:500 15px/1 var(--f-card);color:var(--tinta2)}
.s-p{flex:none;font:700 30px/1 var(--f-num);font-stretch:condensed;color:var(--ambar)}
.s-p.fallo{font-size:20px;letter-spacing:.08em;color:var(--rojo-ko)}
/* compartir, vuelta mañana, otros juegos y archivo */
body.atr #shareTxt{background:var(--papel2);color:var(--tinta);border-radius:10px;box-shadow:inset 0 0 0 1px var(--linea);font:15px/1.3 var(--f-card)}
body.atr .comeback b{font:700 24px/1.1 var(--f-preg);text-transform:none;color:var(--tinta);text-shadow:none}
body.atr .countdown{color:var(--ambar);text-shadow:none}
body.atr .otros{border-top-color:var(--linea)}
body.atr .otros .lbl{color:var(--tinta2);font:700 13px/1 var(--f-card);letter-spacing:.14em}
body.atr .otro{background:var(--papel2);color:var(--tinta);border-radius:12px;box-shadow:inset 0 0 0 1px var(--linea)}
body.atr .otro b{font:700 20px/1 var(--f-card)}
body.atr .otro .os{font:500 14px/1.1 var(--f-card);color:var(--tinta2)}
body.atr .otro.o-atrapa{--oc:var(--ambar)}
body.atr .arch-row{background:var(--papel2);color:var(--tinta);border-radius:10px;box-shadow:inset 0 0 0 1px var(--linea);font:16px var(--f-card)}
body.atr .arch-row .d{color:var(--ambar);font-weight:700}
body.atr .arch-row .st{color:var(--tinta2)}