/* =====================================================================
   PERSONALIZACIÓN · COLORES, FUENTES Y FONDO
   ===================================================================== */
:root{
  --gold:#e3b956;          /* dorado de bordes y títulos */
  --gold-soft:#f6e2a6;     /* dorado claro para textos destacados */
  --gold-dark:#8a6a24;
  --jade:#3fbf9a;          /* acento jade */
  --night:#0a1226;         /* azul noche */
  --parchment:#efe0b8;     /* pergamino */
  --ink:#2b1d0c;           /* tinta sobre pergamino */
  --danger:#e0594a;
  --font-title:'Cinzel Decorative','Cinzel',Georgia,serif;
  --font-head:'Cinzel',Georgia,serif;
  --font-body:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* Fondo propio: pon aquí una imagen, p. ej. url('fondo.jpg'). Se dibuja bajo la niebla. */
  --bg-image:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#03050b;overflow:hidden;color:var(--gold-soft);font-family:var(--font-body)}
body{display:grid;place-items:center}
button{font-family:var(--font-head);cursor:pointer}
.hide{display:none!important}

/* Marco 16:9 que se adapta a cualquier ventana / pantalla completa / OBS */
.frame{
  --u:min(1vw,1.7778vh);              /* 1u = 1% del ancho del marco */
  width:calc(var(--u)*100);height:calc(var(--u)*56.25);
  position:relative;overflow:hidden;font-size:var(--u);
  background:radial-gradient(ellipse at 50% 20%,#27406e 0%,#13213f 45%,#070d1c 100%);
}

/* ---------- Fondo: montañas, templo, niebla ---------- */
.bg{position:absolute;inset:0;background:var(--bg-image) center/cover no-repeat}
.bg svg{position:absolute;left:0;bottom:0;width:100%;height:100%}
.fog{position:absolute;left:-50%;width:200%;height:40%;opacity:.35;pointer-events:none;
  background:radial-gradient(ellipse at 30% 50%,rgba(220,235,240,.55),transparent 60%),
             radial-gradient(ellipse at 70% 50%,rgba(220,235,240,.45),transparent 60%);
  animation:drift 60s linear infinite}
.fog.f1{bottom:8%}
.fog.f2{bottom:22%;opacity:.22;animation-duration:90s;animation-direction:reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(25%)}}
#fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ---------- Barra superior ---------- */
.topbar{position:absolute;top:1.2em;left:2em;right:2em;display:flex;justify-content:space-between;align-items:center;z-index:20}
.brand{font-family:var(--font-head);font-size:calc(var(--u)*1.25);letter-spacing:.15em;color:var(--gold);text-transform:uppercase;opacity:.85}
.pres-hotspot{position:absolute;top:0;right:0;width:8em;height:5em;z-index:40}
body:not(.pres) .pres-hotspot{display:none}
.pres-hotspot button{opacity:0;transition:opacity .3s}
.pres-hotspot:hover button{opacity:.9}

/* ---------- Botones ---------- */
.btn{
  font-size:calc(var(--u)*1.35);letter-spacing:.08em;padding:.7em 1.6em;color:var(--gold-soft);
  background:linear-gradient(#1f3a6e,#10213f);border:calc(var(--u)*.14) solid var(--gold);border-radius:.5em;
  box-shadow:0 0 0 calc(var(--u)*.14) #0004,0 .4em 1em #0008, inset 0 0 1em #0006;transition:filter .2s,transform .2s,opacity .2s,color .2s,border-color .2s;   /* + color y borde: el tema de Xuen los cambia con un fundido */
}
.btn:hover:not(:disabled){filter:brightness(1.25);transform:translateY(-.1em)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.big{font-size:calc(var(--u)*2);padding:.8em 2em}
.btn.jade{background:linear-gradient(#2a9d80,#14574a)}
.btn.warn{background:linear-gradient(#8a2f27,#4a1612);border-color:#e08a7c}
.btn.small{font-size:calc(var(--u)*1);padding:.5em 1em}
.btn.ghost{background:#0006}

/* ---------- Pantallas ---------- */
.screen{position:absolute;inset:0;z-index:10;padding:4.5em 3em 2em;display:none}
.screen.active{display:flex}
.parchment{
  background:linear-gradient(135deg,#f3e6c3,#e2cd96);color:var(--ink);border:calc(var(--u)*.25) solid var(--gold);
  border-radius:.8em;box-shadow:0 0 0 calc(var(--u)*.2) var(--gold-dark),0 1em 3em #000a, inset 0 0 4em #8a5a1a55;
}
.panel{background:linear-gradient(#162a52ee,#0b1630ee);border:calc(var(--u)*.2) solid var(--gold);border-radius:.8em;
  box-shadow:0 0 2em #000a, inset 0 0 2em #0008}

/* ---------- ADMIN ---------- */
#admin{flex-direction:column;align-items:center;overflow-y:auto}   /* con «Avanzado» abierto el panel crece y la pantalla hace scroll: nada se solapa */
#admin h1{font-family:var(--font-title);font-size:calc(var(--u)*3.2);margin:0;color:var(--gold);text-align:center;text-shadow:0 0 1em #e3b95688,0 .1em .2em #000}
#admin h2{font-family:var(--font-head);font-size:calc(var(--u)*1.7);margin:.2em 0 1em;color:var(--jade);letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.admin-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2em;width:100%;flex:1;min-height:0}
.admin-col{padding:1.2em 1.5em;display:flex;flex-direction:column;min-height:0}
.admin-col h3{margin:0 0 .5em;font-family:var(--font-head);font-size:calc(var(--u)*1.4);color:var(--gold)}
#names{flex:1;min-height:0;resize:none;width:100%;font:500 calc(var(--u)*1.5)/1.35 var(--font-body);padding:.7em;color:var(--ink);
  background:#fbf3da;border:calc(var(--u)*.12) solid var(--gold-dark);border-radius:.4em}
#names:disabled{opacity:.6}
.row{display:flex;gap:.8em;flex-wrap:wrap;margin-top:.8em;align-items:center}
.stats{display:flex;gap:1.2em;font-family:var(--font-head);font-size:calc(var(--u)*1.2)}
.stats b{color:var(--gold-soft);font-size:calc(var(--u)*1.8)}
.stats span.bad b{color:var(--danger)}
#problems{flex:1;overflow:auto;font-size:calc(var(--u)*1.3);line-height:1.35}
.problem{padding:.5em .8em;border-left:calc(var(--u)*.3) solid var(--danger);background:#e0594a22;margin-bottom:.5em;border-radius:.2em}
.problem.ok{border-color:var(--jade);background:#3fbf9a22}
.chips{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.6em;overflow:auto;max-height:12em}
.chip{font-size:calc(var(--u)*1);padding:.15em .6em;border-radius:1em;background:#ffffff14;border:1px solid #e3b95666}
.chip.dup{background:#e0594a44;border-color:var(--danger)}

/* ---------- ESCENARIO ---------- */
#stage{gap:1.5em}
.arena{flex:1;display:grid;grid-template-rows:auto 1fr auto;min-width:0;position:relative}
.stage-head{display:flex;align-items:center;gap:1.2em;justify-content:center;min-height:9em}
.stage-head .emblem-sm{width:8em;height:8em}
.stage-head .txt{text-align:left}
#stageNum{font-family:var(--font-head);letter-spacing:.3em;color:var(--jade);font-size:calc(var(--u)*1.3);text-transform:uppercase}
#stageName{font-family:var(--font-title);font-size:calc(var(--u)*3.4);margin:0;color:var(--gold);line-height:1.05;text-shadow:0 0 .8em var(--stage-glow,#e3b95688)}
#stageTitle{font-family:var(--font-head);font-weight:500;font-size:calc(var(--u)*1.7);margin:.1em 0 0;color:var(--gold-soft);letter-spacing:.12em}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0;position:relative}
.emblem-lg{width:19em;height:19em;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 0 1.5em var(--stage-glow,#e3b956aa))}
@keyframes float{50%{transform:translateY(-.8em)}}
.quote{max-width:42em;font-size:calc(var(--u)*2.3);font-style:italic;line-height:1.3;color:var(--gold-soft);margin:.6em 0 0;text-shadow:0 .1em .3em #000}
.count{font-family:var(--font-title);font-size:calc(var(--u)*17);color:var(--gold);text-shadow:0 0 .5em var(--gold);animation:pop 1s ease-out infinite}
@keyframes pop{0%{transform:scale(1.6);opacity:0}25%{opacity:1}100%{transform:scale(.9);opacity:.8}}
.cand{font-family:var(--font-title);color:#fff;line-height:1.05;overflow-wrap:anywhere;max-width:92%;
  text-shadow:0 0 .35em var(--gold),0 0 1em var(--gold),0 .08em .15em #000}
.cand.rolling{filter:blur(.04em);opacity:.85;color:var(--gold-soft)}
.cand.revealed{animation:reveal 1.4s cubic-bezier(.2,1.4,.4,1) both}
@keyframes reveal{0%{transform:scale(.2);opacity:0;filter:blur(1em)}60%{transform:scale(1.15);filter:blur(0)}100%{transform:scale(1);opacity:1}}
.cand.gone{color:#8c8f99;text-shadow:none;text-decoration:line-through;text-decoration-color:var(--danger);animation:fade 1.6s ease-out both}
@keyframes fade{0%{transform:scale(1.05);filter:brightness(2) blur(.1em)}100%{transform:scale(.9);filter:brightness(.7)}}
.rays{position:absolute;width:60em;height:60em;left:50%;top:50%;margin:-30em 0 0 -30em;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#e3b95644 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 65%);mask:radial-gradient(circle,#000 0,transparent 65%)}
.rays.on{opacity:1;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.msg{max-width:46em;font-size:calc(var(--u)*2);line-height:1.3;margin-top:.6em;color:var(--gold-soft);text-shadow:0 .1em .2em #000}
.msg.ask{font-weight:700;font-size:calc(var(--u)*2.2)}
.msg.win{color:var(--jade);font-weight:700}
.msg.lose{color:#c9a9a3}
.timerbox{position:relative;width:11em;height:11em;margin-top:.8em}
.timerbox svg{width:100%;height:100%;transform:rotate(-90deg)}
.timerbox circle{fill:#0009;stroke-width:8}
#ringBg{stroke:#ffffff22}
#ringFg{stroke:var(--jade);stroke-linecap:round;transition:stroke .3s}
.timerbox.low #ringFg{stroke:var(--danger)}
.timerbox.low #timeText{color:var(--danger);animation:beat 1s infinite}
@keyframes beat{50%{transform:translate(-50%,-50%) scale(1.12)}}
#timeText{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-head);font-size:calc(var(--u)*3);color:#fff;font-weight:700}
.paused-badge{position:absolute;left:0;right:0;top:0;display:none;justify-content:center;z-index:6;pointer-events:none}
#stage[data-flow="paused"] .paused-badge{display:flex}
.paused-badge div{background:#000c;border:calc(var(--u)*.25) solid var(--danger);color:#fff;padding:.5em 1.4em;border-radius:.5em;font-family:var(--font-head);
  font-size:calc(var(--u)*3);letter-spacing:.2em;animation:blink 1.4s infinite;text-align:center}
.paused-badge small{display:block;font-size:calc(var(--u)*1.2);letter-spacing:.1em;color:var(--gold-soft)}
@keyframes blink{50%{opacity:.55}}
#stage[data-flow="paused"] .timerbox{opacity:.45}
#notice{position:absolute;left:50%;transform:translateX(-50%);top:0;background:#7a4a10ee;border:calc(var(--u)*.14) solid var(--gold);padding:.4em 1.2em;
  border-radius:.4em;font-size:calc(var(--u)*1.3);z-index:7;max-width:90%;text-align:center;pointer-events:none}
.dock{position:relative;z-index:9;display:flex;justify-content:center;gap:1em;min-height:4.5em;align-items:center;flex-wrap:wrap}
body.pres .dock{opacity:0;transition:opacity .4s}
body.pres .dock:hover,body.pres .dock:focus-within{opacity:1}

/* ---------- Panel del presentador ---------- */
.ops{width:22em;padding:1em 1.2em;display:flex;flex-direction:column;min-height:0;font-size:calc(var(--u)*1.1)}
body.pres .ops,body.pres .topbar .ctl{display:none}
.ops h3{margin:0 0 .4em;font-family:var(--font-head);color:var(--gold);font-size:calc(var(--u)*1.3);letter-spacing:.1em}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;text-align:center;margin-bottom:.8em}
.counters div{background:#0006;border-radius:.4em;padding:.3em;font-family:var(--font-head);font-size:calc(var(--u)*.9)}
.counters b{display:block;font-size:calc(var(--u)*2);color:var(--gold-soft)}
#history{flex:1;overflow:auto;list-style:none;margin:0;padding:0;font-size:calc(var(--u)*1.05);line-height:1.25}
#history li{padding:.35em .2em;border-bottom:1px solid #e3b95622}
#history time{color:var(--gold-dark);font-size:.85em;margin-right:.4em}
#history li.t-conf{color:var(--jade)} #history li.t-aus{color:#e8a094} #history li.t-sys{color:#9fb3d9}
#history li.t-dq{color:#ffb15c;font-weight:700} #history li.t-des{color:#c9b9ff}
.counters small{display:block;font-size:.85em;opacity:.8;font-family:var(--font-body);font-weight:500}
.counters-extra{font-size:calc(var(--u)*.95);text-align:center;margin:-.4em 0 .7em;opacity:.9}
#modalInput{width:100%;font:inherit;font-size:calc(var(--u)*1.5);padding:.4em .6em;margin:-.4em 0 1em;border-radius:.3em;border:1px solid var(--gold-dark);background:#fbf3da;color:var(--ink)}
.ops-btns{display:flex;flex-direction:column;gap:.5em;margin-top:.8em}

/* ---------- Twitch / avisos ---------- */
.tw{margin-top:.8em;padding:.6em .8em;background:#0006;border-radius:.4em;font-size:calc(var(--u)*1.1)}
.tw-state{display:flex;align-items:center;gap:.5em;font-family:var(--font-head);font-size:calc(var(--u)*1);line-height:1.25}
.dot{flex:none;width:.9em;height:.9em;border-radius:50%;background:#777}
.dot.on{background:var(--jade);box-shadow:0 0 .6em var(--jade)}.dot.wait{background:#e3b956;animation:blink 1s infinite}.dot.err{background:var(--danger)}
.msg.verify{font-size:calc(var(--u)*1.5);color:#ffd27a;font-weight:700}
#toast{position:absolute;left:50%;transform:translateX(-50%);top:4em;z-index:70;background:#7a1f18f0;border:calc(var(--u)*.14) solid #e08a7c;padding:.5em 1.2em;border-radius:.4em;font-size:calc(var(--u)*1.3);max-width:80%;text-align:center}
.emb{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:calc(var(--u)*.25) solid var(--gold);box-shadow:0 0 0 calc(var(--u)*.12) var(--gold-dark),0 .3em 1em #000a}
/* ---------- Xuen — La fuerza (ronda extraordinaria): azul eléctrico, blanco y violeta ---------- */
.frame.xuen{--gold:#8fdcff;--gold-soft:#eaf7ff;--gold-dark:#4a63b8;--jade:#a77bff;--night:#0d0a2e;
  background:radial-gradient(ellipse at 50% 20%,#4a2f9a 0%,#241a66 45%,#0b0828 100%)}
.frame.xuen .rays{background:repeating-conic-gradient(from 0deg,#8fdcff44 0 6deg,transparent 6deg 18deg)}
.frame.xuen #stageName{font-size:calc(var(--u)*2.9)}
.xuen-codes{margin-top:.3em;font-family:var(--font-head);font-size:calc(var(--u)*1.35);color:#fff;letter-spacing:.08em;text-shadow:0 0 .6em #8fdcff}
.xuen-fx{position:absolute;inset:0;z-index:3;pointer-events:none;display:none}
.frame.xuen .xuen-fx{display:block}
.xuen-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#a77bff33,transparent 60%),radial-gradient(ellipse at 20% 80%,#5fd0ff22,transparent 50%)}
.xuen-fx svg{position:absolute;inset:0;width:100%;height:100%}
.bolt{fill:none;stroke:#eaf7ff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px #8fdcff) drop-shadow(0 0 14px #a77bff);opacity:0;animation:zap 5s infinite}
.bolt.b2{animation-delay:1.7s;animation-duration:6.5s}.bolt.b3{animation-delay:3.1s;animation-duration:4.2s}.bolt.b4{animation-delay:.8s;animation-duration:7.3s}
@keyframes zap{0%,86%,100%{opacity:0}88%{opacity:1}90%{opacity:.2}92%{opacity:.95}95%{opacity:0}}
.xuen-flash{position:absolute;inset:0;z-index:30;pointer-events:none;background:#eaf7ff;opacity:0}
.xuen-flash.go{animation:xflash 1.1s ease-out}
@keyframes xflash{0%{opacity:.9}100%{opacity:0}}
#history li.t-xuen{color:#8fdcff;font-weight:700}
.wcard .tag{display:inline-block;margin:.2em 0 .3em;padding:.1em .7em;border-radius:1em;background:linear-gradient(90deg,#2f6bff,#8a4dff);background-color:#5a50ec;   /* el degradado lo tapa; fija el color de fondo (contraste del blanco ≥ 5:1) */
  color:#fff;font-family:var(--font-head);font-size:calc(var(--u)*.95);letter-spacing:.08em}
/* ---------- Configuración del sorteo ---------- */
.tabs{display:flex;gap:.6em;margin:-.4em 0 .6em;align-self:flex-start}
.tab{font-size:calc(var(--u)*1.3);padding:.4em 1.4em;color:var(--gold-soft);background:#0008;border:calc(var(--u)*.14) solid var(--gold-dark);border-radius:.5em}
.tab.on{background:linear-gradient(#1f3a6e,#10213f);border-color:var(--gold)}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35em 1.2em}
.cfg-row{display:flex;flex-direction:column;font-size:calc(var(--u)*1.05)}
.cfg-row span{color:var(--gold-soft)} .cfg-row small{opacity:.7}
.cfg-row input{font:inherit;font-size:calc(var(--u)*1.35);padding:.2em .5em;border-radius:.3em;border:1px solid var(--gold-dark);background:#fbf3da;color:var(--ink);width:100%}
.cfg-row input.bad{outline:2px solid var(--danger)}
.cfg-row em{color:#ff9d8f;font-style:normal;font-size:.9em;min-height:1.1em}
#admin details.adv{margin-top:.4em;font-size:calc(var(--u)*1.1)} #admin details.adv summary{cursor:pointer;color:var(--gold)}
#cfgPreview{margin:0;padding:0;list-style:none;overflow:auto;flex:1;min-height:0;font-size:calc(var(--u)*1.25)}
#cfgPreview li{padding:.2em .5em;border-bottom:1px solid #e3b95622;display:flex;gap:.6em}
#cfgPreview li b{color:var(--gold-soft);min-width:5.5em} #cfgPreview li.xrow{opacity:.85;color:#8fdcff}
#cfgMsg{font-size:calc(var(--u)*1.1);color:var(--jade)} #cfgDirty{font-size:calc(var(--u)*1.05);color:#ffd27a}
.timer-note{margin-top:.4em;font-size:calc(var(--u)*1.1);color:var(--gold-soft);opacity:.85}
.htag{display:inline-block;margin-right:.4em;padding:0 .4em;border-radius:.6em;background:#ffffff1a;font-size:.85em;color:var(--gold-soft)}
.winners.dense{flex-wrap:wrap;justify-content:center;gap:.7em;max-width:96%;max-height:62%;overflow:auto}
.winners.dense .wcard{width:18em;padding:.5em .6em}
.winners.dense .emblem-sm{display:none}
.winners.dense .deity{font-size:calc(var(--u)*1.15)} .winners.dense .trial{font-size:calc(var(--u)*.95);margin:0} .winners.dense .wname{font-size:calc(var(--u)*1.7)}
.manual .tw,.manual .tw-state{display:none}      /* (0,2,0) gana a .tw-state{display:flex} (0,1,0): no hace falta !important */
.celestial-long:empty{display:none}
.celestial-long{margin:.5em 0 0;font-family:var(--font-title);font-size:calc(var(--u)*2.6);color:var(--gold);text-shadow:0 0 .8em var(--stage-glow,#e3b95688),0 .1em .2em #000;text-align:center}
.ctl{display:flex;gap:.8em;align-items:center}
.langsw{display:inline-flex;border:calc(var(--u)*.14) solid var(--gold-dark);border-radius:.5em;overflow:hidden}
.langsw button{font-family:var(--font-head);font-size:calc(var(--u)*1);padding:.45em .8em;color:var(--gold-soft);background:#0008;border:0;cursor:pointer}
.langsw button.on{background:linear-gradient(#1f3a6e,#10213f);color:#fff;box-shadow:inset 0 -.2em 0 var(--gold)}
.help{position:relative;display:inline-block;width:1.35em;height:1.35em;line-height:1.3em;text-align:center;border-radius:50%;background:#e3b95622;border:1px solid var(--gold);color:var(--gold-soft);font-style:normal;font-size:.85em;cursor:help;margin-left:.25em;vertical-align:middle}
.help:hover,.help:focus{background:var(--gold);color:var(--night);outline:none}
.help::after{content:attr(data-tip);display:none;position:absolute;left:-1em;bottom:150%;width:calc(var(--u)*26);padding:.6em .8em;text-align:left;white-space:normal;
  background:#0b1630;border:calc(var(--u)*.14) solid var(--gold);border-radius:.4em;color:var(--gold-soft);box-shadow:0 .4em 1.2em #000c;
  font-family:var(--font-body);font-weight:500;font-size:calc(var(--u)*1.1);line-height:1.3;z-index:60;pointer-events:none}
.help:hover::after,.help:focus::after{display:block}
/* El panel de configuración crece con su contenido (p. ej. con «Avanzado» abierto); #admin hace scroll (overflow-y, arriba): nada se solapa. */
#paneC{flex:0 0 auto;min-height:auto}
#paneC .admin-col{min-height:auto}
#paneC #cfgPreview{min-height:8em;max-height:26em}
.cfg-row:nth-child(even) .help::after{left:auto;right:-1em}
/* ---------- FINAL ---------- */
#final{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1em}
#final h1{font-family:var(--font-title);font-size:calc(var(--u)*3.6);color:var(--gold);margin:0;text-shadow:0 0 .6em #e3b95699}
#final .sub{font-size:calc(var(--u)*1.7);color:var(--gold-soft);font-style:italic;margin:0}
.winners{display:flex;gap:2em;margin:1em 0}
.wcard{width:26em;padding:1.2em 1em 1.4em;text-align:center;animation:rise 1s both}
.wcard:nth-child(2){animation-delay:.4s}.wcard:nth-child(3){animation-delay:.8s}
@keyframes rise{from{transform:translateY(3em);opacity:0}}
.wcard .emblem-sm{width:7em;height:7em;margin:0 auto}
.wcard .deity{font-family:var(--font-head);font-size:calc(var(--u)*1.5);color:#6b3f0a;margin:.3em 0 0;font-weight:700}
.wcard .trial{font-size:calc(var(--u)*1.3);color:#5a4220;margin:0 0 .5em;font-style:italic}
.wcard .wname{font-family:var(--font-title);font-weight:700;font-size:calc(var(--u)*2.6);color:#1a2a52;overflow-wrap:anywhere;line-height:1.1}
.wcard.empty{opacity:.55}
.wcard.empty .wname{font-size:calc(var(--u)*1.6);color:#6b5a3a}

/* ---------- Modal ---------- */
#modal{position:absolute;inset:0;z-index:60;background:#000b;display:none;align-items:center;justify-content:center}
#modal.on{display:flex}
#modal .box{max-width:42em;padding:2em 2.4em;text-align:center}
#modal p{font-size:calc(var(--u)*1.9);margin:0 0 1.2em;line-height:1.3}
#modal .row{justify-content:center}

/* ---------- Accesibilidad: sin animaciones decorativas si el sistema operativo pide reducir el movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .fog,.emblem-lg,.count,.cand.revealed,.cand.gone,.rays.on,.timerbox.low #timeText,.paused-badge div,.dot.wait,.bolt,.xuen-flash.go,.wcard{animation:none}
}