/* ===== ESTÉTICA ESPACIAL / INTERSTELLAR ===== */
:root{
  --bg:#000;
  --card:rgba(6,8,14,.82);
  --line:rgba(255,255,255,.14);
  --a:#ff9a3c;
  --a2:#ffd08a;
  --ok:#5fe3a1;
  --bad:#ff5a4d;
  --tx:#dfe3ec;
  --mut:#8791a5;
  --cool:#bcd6ff;
  --sans:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --wide:Michroma,"Eurostile","Century Gothic",sans-serif;
  --mono:"Share Tech Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html{background:#000}
body{
  margin:0;min-height:100%;background:transparent;
  font-family:var(--sans);font-size:18px;color:var(--tx);
  overflow-x:hidden;
}

/* Campo de estrellas cósmico */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 23px 41px,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 97px 133px,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 151px 17px,#fff,transparent),
    radial-gradient(1px 1px at 61px 177px,rgba(200,220,255,.8),transparent),
    radial-gradient(1px 1px at 211px 64px,rgba(255,255,255,.75),transparent),
    radial-gradient(1.2px 1.2px at 47px 251px,rgba(255,235,210,.85),transparent),
    radial-gradient(1px 1px at 289px 190px,rgba(255,255,255,.6),transparent),
    radial-gradient(1.8px 1.8px at 133px 311px,rgba(255,255,255,.95),transparent),
    radial-gradient(1.4px 1.4px at 401px 77px,rgba(190,215,255,.9),transparent),
    radial-gradient(ellipse 60% 45% at 14% 6%,rgba(60,85,150,.18),transparent),
    radial-gradient(ellipse 55% 45% at 92% 96%,rgba(130,70,40,.12),transparent);
  background-size:211px 199px,211px 199px,211px 199px,211px 199px,331px 307px,331px 307px,331px 307px,509px 487px,509px 487px,auto,auto;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1.6px 1.6px at 70px 90px,#fff,transparent),radial-gradient(1.6px 1.6px at 250px 210px,rgba(255,225,190,.95),transparent),radial-gradient(1.4px 1.4px at 160px 300px,rgba(190,215,255,.95),transparent);
  background-size:389px 353px;animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}

/* Elementos comunes */
button{font:inherit;cursor:pointer;border:0;letter-spacing:.05em}
button:focus-visible,input:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.screen{display:none;padding:16px;min-height:100vh}
.screen.active{display:block;animation:fadeIn .3s}
.wrap{max-width:1000px;margin:0 auto}
.center{text-align:center}

/* Botones Sci-Fi */
.btn{
  font-family:var(--wide);font-weight:400;font-size:.95rem;letter-spacing:.22em;text-transform:uppercase;padding:16px 34px;border-radius:3px;
  background:rgba(255,154,60,.08);color:#ffe2bd;border:1px solid var(--a);
  box-shadow:0 0 18px rgba(255,154,60,.25),inset 0 0 14px rgba(255,154,60,.08);
  transition:background .2s,color .2s,box-shadow .2s,transform .1s;
}
.btn:hover{background:var(--a);color:#050505;box-shadow:0 0 30px rgba(255,154,60,.7)}
.btn:active{transform:translateY(1px)}
.btn.alt{background:rgba(255,255,255,.06);color:#f1f3f8;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 16px rgba(255,255,255,.12)}
.btn.alt:hover{background:#f1f3f8;color:#050505;box-shadow:0 0 28px rgba(255,255,255,.5)}
.btn.gray{background:rgba(255,255,255,.03);color:#aeb6c8;border:1px solid rgba(255,255,255,.25);box-shadow:none}
.btn.gray:hover{background:rgba(255,255,255,.14);color:#fff}
.btn.red{background:rgba(255,90,77,.1);color:#ffd2cd;border:1px solid var(--bad);box-shadow:0 0 16px rgba(255,90,77,.25)}
.btn.red:hover{background:var(--bad);color:#050505;box-shadow:0 0 28px rgba(255,90,77,.7)}
.btn.sm{font-size:.72rem;padding:11px 18px}
.btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:16px}

/* Tarjetas de vidrio oscuro */
.card{
  background:var(--card);color:var(--tx);border:1px solid rgba(255,255,255,.16);border-radius:6px;backdrop-filter:blur(6px);
  box-shadow:0 0 50px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.03),0 0 30px rgba(90,130,210,.06);
  padding:20px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}

/* Campos */
input{
  width:100%;padding:14px;font-size:1.25rem;border-radius:4px;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.65);color:#fff;text-align:center;
  font-family:var(--sans);font-weight:600;letter-spacing:.05em;
}
input:focus{border-color:var(--a);box-shadow:0 0 16px rgba(255,154,60,.35)}
input::placeholder{color:#59627a}
.err{color:var(--bad);min-height:1.4em;font-weight:700}
.shake{animation:shake .35s}
.note{color:var(--a2);min-height:1.4em;font-weight:700;font-size:.95rem}
.hint{margin:16px 0 8px;color:var(--mut);font-weight:700}

/* ===== PANTALLA DE INICIO (Gargantúa) ===== */
#home{padding:0;position:relative}
#home.active{display:flex;align-items:center;justify-content:center;min-height:100vh}
.homeL{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:60px 24px;width:100%;max-width:850px;overflow:hidden;
}
.homeL>*{position:relative;z-index:1}
/* Agujero negro Gargantúa con disco de acreción */
.homeL::before{
  content:"";position:absolute;left:50%;top:46%;width:min(44vw,400px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle,#000 0 55%,#fff1d2 56.5%,#ffb454 58.5%,rgba(255,120,30,.38) 63%,rgba(255,100,20,.10) 71%,transparent 76%);
  opacity:.55;filter:blur(.6px);
}
.homeL::after{
  content:"";position:absolute;left:50%;top:46%;width:min(120%,900px);height:8%;transform:translate(-50%,-50%);z-index:0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,215,150,.85),rgba(255,140,50,.28) 40%,transparent 70%);opacity:.48;filter:blur(3px);
}
.title{font-family:var(--wide);font-size:clamp(2.1rem,5vw,4.2rem);color:#f4f6fb;letter-spacing:.14em;line-height:1.15;margin:0;text-shadow:0 0 28px rgba(255,255,255,.28),0 2px 10px #000}
.title b{color:var(--a);text-shadow:0 0 26px rgba(255,154,60,.7)}
.sub{font-family:var(--wide);font-size:clamp(.75rem,1.6vw,1.1rem);color:var(--a2);letter-spacing:.45em;margin:.5em 0 0;text-shadow:0 2px 8px #000}
.desc{color:#b9c0d0;font-size:1.1rem;text-shadow:0 1px 6px #000;max-width:480px;margin:1.4em 0 1.8em}
.gear{
  position:fixed;top:0;left:0;margin:0;z-index:3;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.28);border-top:0;border-left:0;color:#c3cad9;border-radius:0 0 6px 0;
  font-family:var(--mono);font-size:.9rem;padding:10px 16px;letter-spacing:.05em;transition:background .2s;
}
.gear.gearR{left:auto;right:0;border-left:1px solid rgba(255,255,255,.28);border-right:0;border-radius:0 0 0 6px}
@media(max-width:600px){.gear{font-size:.75rem;padding:8px 10px}}
.gear:hover{background:rgba(255,255,255,.14);color:#fff}
@media(max-width:800px){.homeL::before{width:70vw}}

/* ===== PANTALLA DE MODALIDADES ===== */
.catList{display:flex;flex-direction:column;gap:20px;margin-top:4vh}
.catRow{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:stretch}
.catBtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 18px;border-radius:6px;
  background:rgba(255,154,60,.08);color:#ffe2bd;border:1px solid var(--a);
  box-shadow:0 0 20px rgba(255,154,60,.2),inset 0 0 16px rgba(255,154,60,.06);
  transition:transform .2s,background .2s,box-shadow .2s;
}
.catBtn:hover{background:var(--a);color:#050505;box-shadow:0 0 35px rgba(255,154,60,.7);transform:translateY(-2px)}
.catBtn.alt{
  background:rgba(188,214,255,.06);color:#f1f3f8;border:1px solid rgba(188,214,255,.5);
  box-shadow:0 0 20px rgba(188,214,255,.15),inset 0 0 16px rgba(188,214,255,.05);
}
.catBtn.alt:hover{background:var(--cool);color:#050505;box-shadow:0 0 35px rgba(188,214,255,.7);transform:translateY(-2px)}
.catIco{font-size:2.8rem}
.catName{font-family:var(--wide);font-size:1.15rem;letter-spacing:.12em;text-align:center}
.catTag{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;opacity:.85}
.catGo{font-family:var(--wide);font-size:.85rem;letter-spacing:.16em;margin-top:4px}
.catRules h3{font-family:var(--wide);margin:0 0 12px;color:var(--a2);font-size:1rem;letter-spacing:.1em}
.catRules ul{list-style:none;padding:0;margin:0}
.catRules li{padding:8px 0;font-size:.95rem;color:#d5dae6;border-bottom:1px solid rgba(255,255,255,.06)}
.catRules li:last-child{border-bottom:0}
@media(max-width:800px){.catRow{grid-template-columns:1fr}}

/* ===== PANTALLA DE NOMBRE ===== */
.nameCard h2{font-family:var(--wide);margin:0 0 14px;font-size:1.2rem;color:var(--a2);letter-spacing:.12em}
#chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-height:150px;overflow-y:auto}
.chip{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.25);color:#cfd5e2;
  font-family:var(--sans);padding:8px 14px;border-radius:4px;font-size:.95rem;transition:background .2s,border-color .2s;
}
.chip:hover{background:rgba(255,154,60,.18);border-color:var(--a)}
.chip.on{background:var(--a);color:#050505;border-color:var(--a);font-weight:700}
.challenge h3{font-family:var(--wide);margin:0 0 10px;color:var(--a2);font-size:.95rem;letter-spacing:.1em;line-height:1.5}
.challenge ul{list-style:none;padding:0;margin:0}
.challenge li{padding:7px 0;font-size:.95rem;color:#d5dae6}
.calc{margin-top:14px;padding:14px;background:rgba(255,255,255,.04);color:var(--mut);border-left:2px solid var(--a);border-radius:2px;line-height:1.45}
.calc h4{margin:0 0 6px;color:var(--a);font-family:var(--wide);font-size:.78rem;letter-spacing:.08em;font-weight:400}

/* ===== PANTALLA DE JUEGO ===== */
.gwrap{max-width:1200px;margin:0 auto}
.hud{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px}
.hud::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,154,60,.9),transparent)}
.hudLeft{display:flex;align-items:center;gap:12px}
.hud .logo{font-family:var(--wide);font-weight:400;font-size:1rem;letter-spacing:.2em;color:#f1f3f8;text-shadow:0 0 14px rgba(255,255,255,.3)}
.hud .logo small{display:block;font-family:var(--mono);font-size:.8rem;color:var(--a);letter-spacing:.1em;margin-top:2px}
.backArrow{
  flex:0 0 auto;width:38px;height:38px;border-radius:4px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.25);color:#cfd5e2;
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;
}
.backArrow:hover{background:rgba(255,90,77,.2);border-color:var(--bad);color:#fff}
#tBox,.stat{
  font-family:var(--mono);font-weight:400;font-size:clamp(1.3rem,4vw,1.9rem);color:var(--a2);
  background:rgba(0,0,0,.65);border:1px solid rgba(255,154,60,.5);border-radius:4px;
  padding:3px 16px;text-shadow:0 0 12px rgba(255,154,60,.8);box-shadow:inset 0 0 14px rgba(0,0,0,.9),0 0 16px rgba(255,154,60,.12);
}
#tBox.warn{color:#fff;background:rgba(130,20,16,.75);border-color:var(--bad);text-shadow:0 0 12px rgba(255,90,77,.9);animation:boxLight .9s ease-in-out infinite}
#barW{height:5px;background:rgba(255,255,255,.06);border-radius:0;overflow:hidden;margin-top:4px}
#bar{height:100%;width:100%;background:linear-gradient(90deg,rgba(255,154,60,.35),var(--a));box-shadow:0 0 12px rgba(255,154,60,.8);transition:width 1s linear}
#bar.warn{background:var(--bad);box-shadow:0 0 12px rgba(255,90,77,.9)}
#alarm{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;box-shadow:inset 0 0 90px 12px rgba(255,90,77,.55)}
#alarm.on{animation:lightBlink .9s ease-in-out infinite}
.info{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:10px auto;font-family:var(--mono);color:#cfd5e2;font-size:.95rem;letter-spacing:.08em}
.info .st{color:var(--a)}
.flash{animation:flash .6s}
#recBar{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;width:fit-content;max-width:100%;margin:12px auto 0;padding:7px 18px;
  font-family:var(--mono);font-size:clamp(.9rem,2.4vw,1.15rem);letter-spacing:.06em;color:var(--a2);
  background:rgba(255,154,60,.08);border:1px solid rgba(255,154,60,.5);border-radius:4px;text-shadow:0 0 10px rgba(255,154,60,.5);
}
#recBar b{color:#fff;font-weight:400;text-shadow:0 0 10px rgba(255,255,255,.4)}
#recBar.beat{color:#c9ffe4;background:rgba(95,227,161,.12);border-color:var(--ok);text-shadow:0 0 10px rgba(95,227,161,.6)}

/* Tablero cósmico con cuadrícula */
.board{
  position:relative;border:1px solid rgba(255,255,255,.22);border-radius:6px;
  background:
    linear-gradient(rgba(150,190,255,.04) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(150,190,255,.04) 1px,transparent 1px) 0 0/40px 40px,
    radial-gradient(ellipse at 50% 35%,#0b1122 0,#04060c 60%,#000 100%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.9),0 0 40px rgba(90,130,210,.10),0 0 0 3px #000,0 0 0 4px rgba(255,255,255,.08);
  overflow:hidden;
}
#svg{display:block;width:100%;height:auto;touch-action:none;user-select:none}
#fig line{stroke:var(--cool);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(150,190,255,.8))}
.lbl{fill:rgba(255,255,255,.3);font-family:var(--wide);font-size:14px;letter-spacing:.3em;text-anchor:middle}
.slot{fill:transparent;stroke:none;transition:fill .3s}
.slot.filled{fill:rgba(255,176,80,.24)}
svg.win .slot{animation:winGlow .5s 2}
.piece{cursor:grab;filter:drop-shadow(0 0 7px rgba(255,255,255,.14))}
.piece polygon{stroke:rgba(255,255,255,.88);stroke-width:2;stroke-linejoin:round;fill-opacity:.94;transform-box:fill-box;transform-origin:center;animation:appear .5s backwards}
.piece.sel polygon{stroke:var(--a);stroke-width:4;filter:drop-shadow(0 0 10px rgba(255,154,60,.8))}
.piece.locked{pointer-events:none;cursor:default;filter:none}
.piece.bad polygon{stroke:var(--bad);stroke-width:5;animation:blink .15s 3}
.anim{transition:transform .25s cubic-bezier(.3,1.5,.5,1)}

/* Panel lateral de resueltas */
.gbody{display:grid;grid-template-columns:170px 1fr;gap:12px;margin-top:8px;align-items:stretch}
.side{position:relative;min-height:0;padding:0;background:var(--card)}
.sideBox{position:absolute;inset:0;display:flex;flex-direction:column;padding:10px}
.sideT{font-family:var(--wide);font-weight:400;color:var(--a2);text-align:center;margin-bottom:8px;font-size:.72rem;letter-spacing:.2em}
#doneList{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
#doneList:empty::before{content:"Aquí aparecerán las figuras resueltas";grid-column:1/-1;color:var(--mut);font-size:.8rem;text-align:center;padding:8px 2px}
.done{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:4px;text-align:center;animation:appear .4s}
.done svg{display:block;width:100%;height:auto;aspect-ratio:1}
.dn{position:absolute;top:3px;left:6px;font-family:var(--mono);font-size:.85rem;color:var(--a)}
.dl{display:block;font-size:.58rem;font-weight:700;color:var(--mut);line-height:1.1;margin-top:2px}
@media(max-width:800px){
  .gbody{grid-template-columns:1fr}
  .side{height:118px}
  #doneList{display:flex;overflow-x:auto;overflow-y:hidden}
  #doneList:empty::before{align-self:center}
  .done{flex:0 0 74px}
}

/* Banner espacial */
#banner{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
#banner.show{display:flex;animation:fadeIn .2s}
.bt{font-family:var(--wide);font-size:clamp(1.2rem,4.8vw,2.4rem);color:var(--a2);text-shadow:0 0 22px rgba(255,154,60,.7);letter-spacing:.1em;animation:zoom .4s}
.bp{font-family:var(--wide);font-size:clamp(.9rem,3vw,1.4rem);color:#f1f3f8;letter-spacing:.14em}
.area{margin-top:8px;font-size:.95rem;color:var(--cool);font-family:var(--mono)}
.area svg{width:110px;height:110px}

/* ===== PANTALLA FINAL (Tabla directa de rankings + botones lado a lado) ===== */
.endBox{max-width:640px;width:100%;margin:4vh auto 0;text-align:center;padding:26px 30px}
.endRank{width:100%}
.endRank h3{font-family:var(--wide);margin:0 0 18px;color:var(--a2);font-size:1.25rem;letter-spacing:.14em;text-shadow:0 0 14px rgba(255,208,138,.45)}
.endRank .rhead{
  display:grid;grid-template-columns:85px 1fr 150px;align-items:center;text-align:center;
  font-family:var(--wide);color:var(--a);font-size:.68rem;letter-spacing:.16em;padding:0 8px 12px;border-bottom:1px solid rgba(255,154,60,.45);
}
.endRank .rbody{max-height:360px;overflow-y:auto;display:flex;flex-direction:column}
.endRank .rrow{
  display:grid;grid-template-columns:85px 1fr 150px;align-items:center;text-align:center;
  flex:none;min-height:46px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);font-size:clamp(1.1rem,2vw,1.45rem);color:var(--cool);text-shadow:0 0 8px rgba(150,190,255,.45);
}
.endRank .rrow .n{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.endRank .rrow .pos{color:var(--cool)}
.endRank .rrow.top1,.endRank .rrow.top1 .pos{color:#ffb454;text-shadow:0 0 14px rgba(255,180,84,.85)}
.endRank .rrow.top2 .pos{color:#fff}
.endRank .rrow.top3 .pos{color:#ffd9a8}
.endRank .rrow.vacio{color:#262d3d;text-shadow:none}

/* Tabla de récords en la pantalla de nombre */
.nameRank{margin-top:20px;text-align:center;padding:20px 24px}
.nameRank .rbody{max-height:280px}

/* Enmarcado de la fila del jugador actual */
.endRank .rrow.me{
  background:rgba(255,154,60,.16);
  outline:2px solid var(--a);
  outline-offset:-1px;
  border-radius:4px;
  box-shadow:0 0 20px rgba(255,154,60,.5),inset 0 0 12px rgba(255,154,60,.15);
  position:relative;
  z-index:2;
}
.endRank .rrow.me .n{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.6)}
.meBadge{
  display:inline-block;background:var(--a);color:#050505;
  font-family:var(--wide);font-size:.62rem;font-weight:700;
  padding:2px 8px;border-radius:3px;margin-left:10px;letter-spacing:.08em;
  flex-shrink:0;box-shadow:0 0 10px rgba(255,154,60,.6);
}
.rempty{text-align:center;color:var(--a2);font-family:var(--wide);font-size:.85rem;letter-spacing:.1em;padding:14px 0 0}

/* Botones finales uno al lado de otro */
.endBtns{
  display:flex;flex-direction:row;justify-content:center;align-items:center;gap:16px;width:100%;margin-top:22px;
}
.endBtns .btn{
  flex:1 1 0;min-width:0;padding:14px 16px;
  font-size:clamp(.82rem,2.2vw,1.05rem);white-space:nowrap;text-align:center;
}
@media(max-width:550px){
  .endBox{padding:18px 14px;margin:2vh auto 0}
  .endRank .rhead,.endRank .rrow{grid-template-columns:60px 1fr 115px;font-size:1.05rem}
  .endBtns{gap:10px}
  .endBtns .btn{padding:12px 6px;font-size:clamp(.72rem,2.8vw,.92rem)}
}

/* ===== MODALES ===== */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;
  z-index:9;padding:16px;backdrop-filter:blur(4px);
}
.modal.show{display:flex}
.modal .card{max-width:440px;width:100%;text-align:center;animation:zoom .25s}
.modal h2{font-family:var(--wide);margin:0 0 10px;color:var(--a2);font-size:1.1rem;letter-spacing:.12em}
.modal p{color:var(--mut);margin:.4em 0 14px}
.exitQ{color:#f1f3f8!important;font-size:1.15rem;font-weight:700;margin:.6em 0 .3em!important}
#exitModal .btns{margin-top:18px}
.credLbl{font-family:var(--mono);letter-spacing:.14em;margin:.2em 0 14px!important}
.credName{font-family:var(--wide);font-size:1.05rem;letter-spacing:.1em;color:#f1f3f8;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);text-shadow:0 0 14px rgba(255,255,255,.25)}
#credModal .btns{margin-top:20px}
.recIco{font-size:3.4rem}
.recTx{font-size:1.35rem;font-weight:700;margin:.3em 0}
.recTx b{color:var(--a2)}

/* Estado pausado */
body.paused #alarm{animation:none!important;opacity:0!important}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoom{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
@keyframes flash{0%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes appear{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes blink{50%{opacity:.4}}
@keyframes winGlow{50%{fill:rgba(255,208,138,.55)}}
@keyframes lightBlink{0%,100%{opacity:0}50%{opacity:1}}
@keyframes boxLight{0%,100%{box-shadow:0 0 0 0 rgba(255,90,77,0)}50%{box-shadow:0 0 22px 6px rgba(255,90,77,.85)}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important}
  body::after{animation:none}
  #tBox.warn{animation:none}
  #alarm.on{animation:none;opacity:.6}
}