#duel-root{position:relative;isolation:isolate;min-height:calc(100dvh - 72px);overflow:hidden;background:#050810;color:#eef7f7}
#duel-root .duel-scenes,#duel-root .duel-shade{position:absolute;inset:0;pointer-events:none}
#duel-root .duel-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(1.12) contrast(1.06);transform:scale(1.03);transition:opacity 1.6s ease,transform 12s ease-out}
#duel-root .duel-scene.active{opacity:.82;transform:scale(1.1);filter:saturate(1.15) contrast(1.06) brightness(1.08)}
#duel-root .duel-shade{z-index:1;background:linear-gradient(90deg,rgba(5,8,16,.55),rgba(5,8,16,.08) 48%,rgba(5,8,16,.5)),linear-gradient(0deg,rgba(5,8,16,.55),transparent 48%,rgba(5,8,16,.2))}
#duel-root #qdFx{position:absolute;inset:0;z-index:4;pointer-events:none}
#duel-root .duel-content{position:relative;z-index:5;width:min(1180px,100%);min-height:calc(100dvh - 72px);margin:0 auto;padding:clamp(18px,3vw,42px);display:flex;flex-direction:column;justify-content:center}
#duel-root .duel-module-nav{position:absolute;z-index:7;top:14px;left:18px;display:flex;align-items:center;gap:12px}
#duel-root .duel-module-nav button{padding:7px 10px;border:1px solid rgba(34,211,238,.35);background:rgba(5,8,16,.65);color:#b8c8c8;font:500 .56rem var(--mono);cursor:pointer}
#duel-root .duel-module-nav span{color:#fbbf24;font:500 .52rem var(--mono);letter-spacing:.12em}
#duel-root .duel-guide{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:24px}
#duel-root .duel-dyian{width:88px;height:120px;object-fit:contain;object-position:center top;filter:drop-shadow(0 0 22px rgba(34,211,238,.2))}
#duel-root .duel-guide small,#duel-root .duel-kicker{display:block;color:#fbbf24;font:500 .6rem var(--mono);letter-spacing:.16em;text-transform:uppercase}
#duel-root .duel-guide h1,#duel-root .duel-lobby h1,#duel-root .duel-join h1{margin:8px 0;font:800 clamp(2.2rem,5.5vw,5rem)/.92 var(--display);letter-spacing:-.025em;text-transform:uppercase;text-shadow:0 0 26px rgba(34,211,238,.18)}
#duel-root .duel-guide p{max-width:660px;color:#b8c8c8;font:400 .8rem/1.6 var(--ui)}
#duel-root .duel-versus{display:grid;grid-template-columns:minmax(0,1fr) 138px minmax(0,1fr);align-items:stretch;gap:22px}
#duel-root .duel-option{padding:22px;background:rgba(5,8,16,.72);border:1px solid rgba(34,211,238,.32);backdrop-filter:blur(9px);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
#duel-root .duel-option.host{border-color:rgba(248,113,113,.45)}
#duel-root .duel-option>span{color:#f87171;font:600 .56rem var(--mono);letter-spacing:.12em}
#duel-root .duel-option.guest>span{color:#22d3ee}
#duel-root .duel-option h2{margin:10px 0;font:700 1.6rem var(--display);text-transform:uppercase}
#duel-root .duel-option p{min-height:54px;color:#a9babc;font:400 .74rem/1.55 var(--ui)}
#duel-root .duel-vs{align-self:center;display:grid;place-items:center;width:128px;height:128px;border:1px solid rgba(251,191,36,.45);border-radius:50%;background:radial-gradient(circle,#17273a,#070c14 70%);box-shadow:0 0 34px rgba(251,191,36,.12);animation:duelCore 3s ease-in-out infinite}
#duel-root .duel-vs b{font:800 1.8rem var(--display)}#duel-root .duel-vs b i{color:#f87171;font-style:normal;display:inline-block;transform:scaleX(-1)}
#duel-root .duel-vs small{position:absolute;margin-top:70px;color:#fbbf24;font:600 .5rem var(--mono);letter-spacing:.14em}
#duel-root .duel-btn,#duel-root .duel-btn.secondary{min-height:46px;padding:11px 16px;border:1px solid #f87171;background:#a72a24;color:#fff0d0;font:600 .6rem var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background-color .18s,box-shadow .18s}
#duel-root .duel-btn.secondary{background:rgba(8,15,25,.78);border-color:#22d3ee;color:#22d3ee}
#duel-root .duel-btn:hover{background:#c03930;box-shadow:0 0 22px rgba(248,113,113,.24)}
#duel-root .duel-btn.secondary:hover{background:#102334;box-shadow:0 0 22px rgba(34,211,238,.2)}
#duel-root .duel-option .duel-btn{width:100%;margin-top:12px}
#duel-root .duel-foot{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:22px;color:#8fa5a8;font:500 .52rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
#duel-root .duel-foot span:before{content:"◆";margin-right:6px;color:#34d399}
#duel-root .duel-link{padding:8px 10px;border:0;background:transparent;color:#a9babc;font:500 .58rem var(--mono);text-decoration:underline dotted;cursor:pointer}
#duel-root .duel-link:hover{color:#22d3ee}
#duel-root .duel-lobby,#duel-root .duel-join{text-align:center}
#duel-root .duel-lobby>p,#duel-root .duel-join>p{color:#a9babc;font:400 .78rem/1.55 var(--ui)}
#duel-root .duel-charge{position:relative;width:142px;height:142px;margin:22px auto;display:grid;place-items:center;border:1px solid rgba(34,211,238,.4);border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.08),transparent 68%)}
#duel-root .duel-charge:before,#duel-root .duel-charge:after{content:"";position:absolute;inset:12px;border:2px dashed rgba(34,211,238,.42);border-radius:50%;animation:duelSpin 7s linear infinite}
#duel-root .duel-charge:after{inset:30px;border-color:rgba(248,113,113,.5);animation-duration:4s;animation-direction:reverse}
#duel-root .duel-charge b{font:800 1.8rem var(--display)}#duel-root .duel-charge small{position:absolute;bottom:26px;color:#8fa5a8;font:500 .44rem var(--mono);letter-spacing:.1em}
#duel-root .duel-code-display{width:max-content;max-width:100%;margin:8px auto 20px;padding:12px 22px;background:rgba(5,8,16,.75);border:1px dashed rgba(251,191,36,.6);color:#fbbf24;font:600 clamp(1.7rem,5vw,3rem) var(--mono);letter-spacing:.3em;text-shadow:0 0 18px rgba(251,191,36,.24)}
#duel-root .duel-players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:680px;margin:0 auto}
#duel-root .duel-players>div{padding:12px;border-top:1px solid #f87171;background:rgba(5,8,16,.58)}
#duel-root .duel-players>div:last-child{border-top-color:#22d3ee}
#duel-root .duel-players small{display:block;color:#8fa5a8;font:500 .48rem var(--mono)}#duel-root .duel-players b{font:600 .82rem var(--ui)}
#duel-root .duel-players>span{color:#fbbf24;font:800 1.3rem var(--display)}
#duel-root .duel-wait{margin:14px 0;color:#a9babc;font:500 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
#duel-root .duel-wait:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:#fbbf24;box-shadow:0 0 12px #fbbf24;animation:duelWait 1s ease-in-out infinite}
#duel-root .duel-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
#duel-root .duel-join-form{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:560px;margin:22px auto 8px}
#duel-root .duel-join-form input{min-width:0;padding:13px;background:rgba(5,8,16,.76);border:1px solid rgba(34,211,238,.38);color:#eef7f7;font:500 1rem var(--mono);letter-spacing:.3em;text-align:center;text-transform:uppercase}
#duel-root .duel-error{min-height:26px;color:#f87171;font:500 .64rem/1.5 var(--mono)}
#duel-root .duel-countdown{text-align:center}
#duel-root .duel-count-names{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font:700 clamp(1.3rem,4vw,2.6rem) var(--display);text-transform:uppercase}
#duel-root .duel-count-names span:first-child{color:#f87171}#duel-root .duel-count-names span:last-child{color:#22d3ee}#duel-root .duel-count-names i{color:#fbbf24;font-style:normal}
#duel-root .duel-count-number{font:800 clamp(7rem,24vw,14rem)/.82 var(--display);text-shadow:0 0 48px rgba(34,211,238,.32);animation:duelCount .9s ease-in-out infinite}
#duel-root .duel-countdown p{color:#fbbf24;font:500 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
@keyframes duelSpin{to{transform:rotate(360deg)}}
@keyframes duelCore{0%,100%{box-shadow:0 0 24px rgba(251,191,36,.1)}50%{box-shadow:0 0 44px rgba(34,211,238,.24)}}
@keyframes duelWait{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes duelCount{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1);opacity:1}}

/* Arena y evaluación */
#duel-root .duel-game{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
#duel-root .duel-ladder{padding:14px;background:rgba(5,8,16,.74);border:1px solid rgba(248,113,113,.28);backdrop-filter:blur(8px)}
#duel-root .duel-ladder>span{color:#f87171;font:700 .62rem var(--mono);letter-spacing:.14em}
#duel-root .duel-step{display:flex;justify-content:space-between;padding:4px 6px;border:1px solid transparent;color:#7f9a9f;font:500 .56rem var(--mono)}
#duel-root .duel-step.actual{border-color:#fbbf24;color:#fbbf24}#duel-root .duel-step.hecha{border-color:#34d399;color:#34d399}
#duel-root .duel-points{margin-top:12px;color:#f4f7ed;font:700 1.5rem var(--display);text-align:center}#duel-root .duel-points small{display:block;color:#7f9a9f;font:500 .46rem var(--mono)}
#duel-root .duel-code-small{margin-top:10px;color:#fbbf24;font:600 .7rem var(--mono);text-align:center;letter-spacing:.16em}
#duel-root .duel-question{padding:clamp(16px,3vw,30px);background:rgba(5,8,16,.78);border:1px solid rgba(34,211,238,.32);backdrop-filter:blur(10px);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
#duel-root .duel-question-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8fa5a8;font:500 .58rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
#duel-root .duel-clock{display:grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid #fbbf24;border-radius:50%;color:#fbbf24;font:700 1rem var(--mono)}
#duel-root .duel-clock.qd-rojo{border-color:#f87171;color:#f87171;animation:duelWait .5s ease-in-out infinite}
#duel-root .duel-time{height:4px;margin:12px 0 18px;background:rgba(34,211,238,.12);overflow:hidden}#duel-root .duel-time i{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#fbbf24,#f87171);transition:width .25s linear}
#duel-root .duel-question-text{font:700 clamp(1.35rem,3vw,2.3rem)/1.16 var(--display);color:#f4f7ed}
#duel-root .duel-options{display:grid;gap:9px}
#duel-root .duel-answer{padding:12px 14px;border:1px solid rgba(34,211,238,.28);background:rgba(12,18,32,.78);color:#e7f2f2;text-align:left;font:400 .8rem/1.45 var(--ui);cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
#duel-root .duel-answer b{display:inline-block;width:26px;color:#fbbf24}
#duel-root .duel-answer:hover{border-color:#22d3ee;background:#102334;transform:translateX(4px);box-shadow:-4px 0 0 #22d3ee}
#duel-root .duel-answer.qd-ok{border-color:#34d399;background:rgba(52,211,153,.14)}#duel-root .duel-answer.qd-mal{border-color:#f87171;background:rgba(248,113,113,.14)}
#duel-root .duel-answer.qd-apagada{opacity:.25}
#duel-root .duel-jokers{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}#duel-root .duel-jokers button{padding:7px 10px;border:1px dashed rgba(251,191,36,.4);background:rgba(5,8,16,.7);color:#fbbf24;font:500 .54rem var(--mono);cursor:pointer}#duel-root .duel-jokers button:disabled{opacity:.35}
#duel-root .duel-feed{min-height:30px;margin-top:12px;color:#a9babc;font:400 .68rem/1.5 var(--ui)}#duel-root .duel-feed b{color:#f4f7ed}
#duel-root .duel-evaluation-guide{display:grid;grid-template-columns:1fr;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(34,211,238,.22)}
#duel-root .duel-guide-label{display:block;color:#f87171;font:600 .58rem var(--mono);letter-spacing:.14em}
#duel-root .duel-evaluation-guide .duel-dyian{width:100px;height:130px}
#duel-root .duel-evaluation-guide small{color:#f87171;font:600 .56rem var(--mono);letter-spacing:.14em}
#duel-root .duel-evaluation-guide h2{margin:7px 0;font:700 clamp(1.6rem,3.4vw,2.8rem)/1.06 var(--display);text-transform:uppercase;word-break:normal;overflow-wrap:normal}
#duel-root .duel-evaluation-guide p{color:#a9babc;font:400 .74rem/1.55 var(--ui)}
#duel-root .duel-eval-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
#duel-root .duel-eval-grid>div{padding:13px 10px;background:rgba(12,18,32,.68);border:1px solid rgba(34,211,238,.2);text-align:center}
#duel-root .duel-eval-grid strong{display:block;color:#fbbf24;font:700 1.55rem var(--display)}#duel-root .duel-eval-grid span{display:block;margin-top:3px;color:#8fa5a8;font:500 .5rem var(--mono);text-transform:uppercase}
#duel-root .duel-eval-note{color:#8fa5a8;font:500 .56rem var(--mono);text-align:center}
#duel-root .duel-result-code{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:16px 0;padding:12px;background:rgba(5,8,16,.6);border:1px solid rgba(34,211,238,.2)}
#duel-root .duel-result-code span{grid-column:1/-1;color:#8fa5a8;font:500 .5rem var(--mono);text-transform:uppercase}#duel-root .duel-result-code b{overflow-wrap:anywhere;color:#22d3ee;font:500 .58rem var(--mono)}
#duel-root .duel-compare{margin:12px 0;color:#a9babc;font:500 .58rem var(--mono)}#duel-root .duel-compare summary{cursor:pointer}#duel-root .duel-compare>div{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}#duel-root .duel-compare input{min-width:0;padding:10px;background:#0a1020;border:1px solid rgba(34,211,238,.3);color:#eef7f7}
#duel-root .duel-online{margin-top:12px;padding:12px;border:1px dashed rgba(52,211,153,.3);color:#a9babc;font:400 .62rem/1.55 var(--ui)}
#duel-root .duel-loading,#duel-root .duel-error{padding:20px;color:#a9babc;font:500 .66rem var(--mono);text-align:center}

/* Moloch, siempre detrás del contenido */
#duel-root .qd-moloch-wrap{position:fixed;z-index:2;right:-10px;bottom:-30px;width:360px;height:540px;pointer-events:none;opacity:.38;animation:qdMolochMove 18s ease-in-out infinite}
#duel-root .qd-moloch{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 13px rgba(34,211,238,.1))}
#duel-root .qd-specter{fill:#02080a;stroke:#1a3438;stroke-width:1.2;transform-origin:50% 55%;animation:qdSpecterBreath 4.8s ease-in-out infinite}
#duel-root .qd-head{fill:#020608;stroke:#1a3438;stroke-width:1}
#duel-root .qd-limb{fill:none;stroke:#02080a;stroke-width:19;stroke-linecap:round;stroke-linejoin:round;transform-origin:55% 42%}
#duel-root .qd-limb.a{animation:qdLimbA 5.6s ease-in-out infinite}#duel-root .qd-limb.b{animation:qdLimbB 6.2s ease-in-out infinite}#duel-root .qd-limb.c{animation:qdLimbB 5.4s ease-in-out infinite reverse}#duel-root .qd-limb.d{animation:qdLimbA 6.4s ease-in-out infinite reverse}
#duel-root .qd-spine{fill:none;stroke:#13262a;stroke-width:2;stroke-linecap:round;opacity:.55}
@keyframes qdMolochMove{0%,100%{transform:translate(6%,4%) rotate(4deg)}45%{transform:translate(-5%,-3%) rotate(-3deg)}70%{transform:translate(-1%,1%) rotate(1deg)}}
@keyframes qdSpecterBreath{0%,100%{transform:scaleY(1) skewX(0deg)}50%{transform:scaleY(1.035) skewX(-1deg)}}
@keyframes qdLimbA{0%,100%{transform:rotate(0)}45%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}}
@keyframes qdLimbB{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@media(max-width:760px){
  #duel-root .duel-content{justify-content:flex-start;padding:64px 14px 24px}
  #duel-root .duel-guide{gap:10px;margin-bottom:16px}#duel-root .duel-dyian{width:62px;height:86px}#duel-root .duel-guide h1,#duel-root .duel-lobby h1,#duel-root .duel-join h1{font-size:2.25rem}#duel-root .duel-guide p{font-size:.68rem}
  #duel-root .duel-versus{grid-template-columns:1fr;gap:12px}#duel-root .duel-vs{order:-1;width:86px;height:86px;margin:0 auto}#duel-root .duel-vs b{font-size:1.25rem}#duel-root .duel-vs small{margin-top:48px;font-size:.42rem}
  #duel-root .duel-option{padding:16px}#duel-root .duel-option p{min-height:0}#duel-root .duel-option h2{font-size:1.3rem}
  #duel-root .duel-foot{gap:10px;font-size:.44rem}#duel-root .duel-charge{width:108px;height:108px}#duel-root .duel-charge small{bottom:18px}
  #duel-root .duel-code-display{padding:10px 14px;font-size:1.6rem;letter-spacing:.22em}#duel-root .duel-players{gap:8px}#duel-root .duel-players>div{padding:9px 6px}#duel-root .duel-players b{font-size:.7rem}
  #duel-root .duel-game{grid-template-columns:1fr}#duel-root .duel-ladder{display:none}#duel-root .duel-question{padding:16px}#duel-root .duel-answer:hover{transform:none}
  #duel-root .duel-evaluation-guide{grid-template-columns:70px minmax(0,1fr)}#duel-root .duel-evaluation-guide .duel-dyian{width:70px;height:94px}#duel-root .duel-eval-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#duel-root .duel-result-code,#duel-root .duel-compare>div{grid-template-columns:1fr}
  #duel-root .qd-moloch-wrap{width:250px;height:390px;right:-70px;bottom:-30px;opacity:.28}
}
@media(prefers-reduced-motion:reduce){#duel-root .duel-scene{transition:opacity .01s;transform:none}#duel-root .duel-vs,#duel-root .duel-charge:before,#duel-root .duel-charge:after,#duel-root .duel-count-number,#duel-root .qd-moloch-wrap,#duel-root .qd-specter,#duel-root .qd-limb{animation:none}}

/* Marcos holográficos y consolas de escritura */
#duel-root .duel-option{position:relative;box-shadow:0 0 24px rgba(34,211,238,.09),inset 0 0 24px rgba(34,211,238,.035);background:rgba(5,8,16,.68)}
#duel-root .duel-option:before{content:"";position:absolute;inset:7px;border-top:1px solid rgba(34,211,238,.34);border-bottom:1px solid rgba(34,211,238,.12);pointer-events:none}
#duel-root .duel-option:after{content:"";position:absolute;right:10px;top:10px;width:8px;height:8px;background:#22d3ee;box-shadow:0 0 12px #22d3ee;pointer-events:none}
#duel-root .duel-option.host:after{background:#f87171;box-shadow:0 0 12px #f87171}
#duel-root .duel-question{box-shadow:0 0 26px rgba(34,211,238,.1),inset 0 0 24px rgba(34,211,238,.035);background:rgba(5,8,16,.76)}
#duel-root .duel-eval-grid>div{box-shadow:inset 0 0 14px rgba(34,211,238,.04)}
#duel-root .duel-result-code{box-shadow:0 0 18px rgba(34,211,238,.07);border-color:rgba(34,211,238,.38)}