/* Duelos (app/js/duelos.js). Mismo mundo pixel art del sitio: tokens de src/index.src.html, bordes duros y la
   sombra de bloque que ya usan .card y .btn.primary. Una columna hasta 900 px; botones de 44 px. */
.du-h{font:var(--px-sm)/1.5 var(--px);color:var(--fg);margin:0 0 var(--sp-3);text-wrap:balance}
.du-meta{margin:0 0 var(--sp-5)}
.du-grid{display:grid;gap:var(--sp-5);align-items:start}
.du-col{display:grid;gap:var(--sp-5);min-width:0}
.du-col section{min-width:0}
@media (min-width:901px){.du-grid{grid-template-columns:minmax(340px,5fr) 7fr}}
.du-nota{margin-bottom:var(--sp-5);max-width:72ch}
.du-nota p{margin:0 0 var(--sp-3)}
.du-acc{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.du-acc .btn.sm{min-height:var(--hit)}
.du-carga{padding:var(--sp-5) 0}

/* formulario */
.du-form{display:grid;gap:var(--sp-4)}
.du-seg{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.du-seg legend,.du-campo>span{font:var(--fs-sm)/1.2 var(--vt);color:var(--mut);margin-bottom:var(--sp-2);padding:0}
.du-seg label{position:relative;display:inline-flex}
.du-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.du-seg span{display:inline-flex;align-items:center;min-height:var(--hit);padding:0 var(--sp-3);border:1px solid var(--edge);background:var(--panel2);font:var(--fs-md)/1 var(--vt);color:var(--fg)}
.du-seg input:checked+span{background:var(--acc);color:var(--on-acc);border-color:transparent;box-shadow:var(--press)}
.du-seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.du-seg label:hover span{border-color:var(--acc)}
.du-campo{display:grid;gap:0}
.du-campo input{min-height:var(--hit);width:100%;box-sizing:border-box;padding:0 var(--sp-3);border:1px solid var(--edge);background:var(--code-bg);color:var(--fg);font:var(--fs-md)/1 var(--vt);border-radius:0}
.du-campo input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.du-est{font:var(--fs-sm)/1.35 var(--vt);color:var(--fg);background:var(--acc-soft);border:1px solid var(--acc);padding:var(--sp-2) var(--sp-3)}
.du-est:empty{display:none}
.du-est.mal{background:var(--bad-soft);border-color:var(--bad);color:var(--bad-ink)}
.du-creado{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);padding:var(--sp-3);border:var(--b) solid var(--ok);background:var(--ok-soft)}
.du-creado input{min-height:var(--hit);padding:0 var(--sp-2);border:1px solid var(--edge);background:var(--code-bg);color:var(--fg);font:14px/1 var(--mono);min-width:0}

/* listas */
.du-lista{display:grid;gap:var(--sp-3)}
.du-lista>p{margin:0}
.du-item{background:var(--panel);border:var(--b) solid var(--line);box-shadow:5px 5px 0 var(--sh);padding:var(--sp-3) var(--sp-4);min-width:0}
.du-item.gano{border-color:var(--ok)}
.du-item.apagado{box-shadow:none;opacity:.75}
.du-item-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.du-item-t b{font:var(--fs-lg)/1.1 var(--vt);overflow-wrap:anywhere}
.du-tag{font:var(--px-xs)/1.4 var(--px);color:var(--acc-ink)}
.du-item.apagado .du-tag{color:var(--mut)}
.du-item-p{font:var(--fs-sm)/1.35 var(--vt);color:var(--mut);margin-top:var(--sp-1)}
.du-revisar{margin-top:var(--sp-3);border-top:1px solid var(--sep);padding-top:var(--sp-3)}
.du-reglas summary{font:var(--px-sm)/1.5 var(--px);cursor:pointer;min-height:var(--hit);display:flex;align-items:center}
.du-reglas ul{margin:var(--sp-2) 0 0;padding-left:1.2em;font:var(--fs-sm)/1.4 var(--vt)}
.du-reglas li+li{margin-top:var(--sp-2)}
.du-dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-1) var(--sp-4);margin:var(--sp-3) 0;font:var(--fs-sm)/1.35 var(--vt)}
.du-dl dt{color:var(--mut)}
.du-dl dd{margin:0;overflow-wrap:anywhere}
.du-dl .bien{color:var(--ok)} .du-dl .mal{color:var(--bad-ink)}
@media (max-width:480px){.du-dl{grid-template-columns:1fr}.du-dl dd{margin-bottom:var(--sp-2)}}

/* un duelo */
.du-top{margin-bottom:var(--sp-4)}
.du-vs{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin:0 0 var(--sp-5);flex-wrap:wrap;text-align:center}
.du-vs b{font:var(--fs-lg)/1.1 var(--vt);overflow-wrap:anywhere;max-width:40%}
.du-vs span{font:var(--px-lg)/1 var(--px);color:var(--amber);text-shadow:3px 3px 0 var(--sh)}
.du-prep,.du-espera,.du-inv,.du-recibo{max-width:760px}
.du-prep-l{margin:0 0 var(--sp-3);padding-left:1.2em;font:var(--fs-sm)/1.4 var(--vt)}
.du-prep-l li+li{margin-top:var(--sp-2)}
.du-listo{font:var(--fs-sm)/1.3 var(--vt);color:var(--acc-ink);margin:0}
.du-conf{flex-basis:100%;margin:0;font:var(--fs-md)/1.3 var(--vt)}
.du-juego{display:grid;gap:var(--sp-4)}
@media (min-width:1100px){.du-juego{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.du-barra{grid-column:1/-1}}
.du-barra{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;position:sticky;top:0;z-index:5;background:var(--bg);padding:var(--sp-2) 0;border-bottom:1px solid var(--sep)}
.du-barra b{font:var(--fs-lg)/1.1 var(--vt)}
.du-reloj{font:var(--px-lg)/1 var(--px);font-variant-numeric:tabular-nums;color:var(--fg);padding:var(--sp-2) var(--sp-3);border:var(--b) solid var(--line);background:var(--panel)}
.du-reloj.poco{color:var(--amber);border-color:var(--amber)}
.du-reloj.final{color:var(--bad)}
@media (prefers-reduced-motion:no-preference){.du-reloj.final{animation:du-parpadeo 1s steps(2,jump-none) infinite}}
@keyframes du-parpadeo{50%{border-color:var(--line)}}
.du-enun,.du-resp{min-width:0}
.du-prompt{font:var(--fs-md)/1.4 var(--vt);margin:0 0 var(--sp-3);max-width:70ch}
.du-enun pre.code{overflow-x:auto;max-width:100%}
.du-ej{margin:0;padding-left:1.2em;font:var(--fs-sm)/1.5 var(--vt)}
.du-ej code{font:13px/1.4 var(--mono);overflow-wrap:anywhere}
.du-salida{font:var(--fs-sm)/1.35 var(--vt);margin-top:var(--sp-2)}
.du-salida .mal{color:var(--bad-ink)}
.du-guardado{margin:var(--sp-2) 0 0}
.du-res{font-size:var(--px-md)}
.du-recibo.gano{border-color:var(--ok)}
.du-recibo.gano .du-res{color:var(--ok)}
.du-tabla{overflow-x:auto;margin:var(--sp-3) 0}
.du-tabla table{border-collapse:collapse;width:100%;font:var(--fs-sm)/1.3 var(--vt);font-variant-numeric:tabular-nums}
.du-tabla th,.du-tabla td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--sep);text-align:left}
.du-tabla thead th{font:var(--px-xs)/1.4 var(--px);color:var(--fg);overflow-wrap:anywhere}
.du-tabla tbody th{color:var(--mut);font-weight:400}
.du-tabla thead th.gana{color:var(--ok);box-shadow:inset 0 -3px 0 var(--ok)}

/* sin tutor durante el intento competitivo */
html.duelo-activo #fab,html.duelo-activo #chat{display:none!important}