@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--gold:#ffcf5a;--bg:#0c101a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#fff;font-family:Barlow,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer;border:0;color:inherit;font-size:14px;font-weight:700}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}main{max-width:1450px;margin:auto;padding:26px 40px 18px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.brand{text-decoration:none;color:white;font:900 32px/.85 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.5px}.brand span{color:var(--gold);margin-left:5px}.brand small{display:block;margin-top:8px;font:600 12px Barlow,Arial;letter-spacing:3px;text-transform:uppercase;color:#a8acb9}.tools{display:flex;gap:10px}.tools button,.secondary{background:#1e2432;border:1px solid #343c4d;padding:12px 18px;border-radius:5px;font-size:13px}.arena{position:relative;border:1px solid #454550;border-radius:12px;overflow:hidden;aspect-ratio:1200/650;background:#191823;box-shadow:0 20px 70px #0005}canvas{width:100%;height:100%;display:block}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#10141dfc 0%,#10141df7 38%,#10141d80 67%,#10141d15);display:flex;align-items:center;padding:5%}.intro{position:relative;z-index:2;width:58%}.eyebrow{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--gold)}h1{font:900 clamp(38px,5.4vw,82px)/.92 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:20px 0}p{font-size:16px;color:#bdc3cf;margin:14px 0 24px}.poster{position:absolute;inset:0;background:url(assets/duelo.png) right center/auto 100% no-repeat;z-index:-1}.select{display:flex;gap:10px;margin-bottom:20px}.fighter{display:flex;align-items:center;gap:12px;position:relative;text-align:left;background:#20232ece;border:1px solid #4b4e5d;border-radius:7px;padding:12px;flex:1;transition:.2s}.fighter.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#383126}.portrait{width:60px;height:65px;border-radius:4px;background-image:url(assets/duelo.png);background-size:660px 440px;flex-shrink:0}.chong{background-position:-10px -5px}.melendez{background-position:-593px -5px}.fighter small{font-size:11px;letter-spacing:1px;color:#aeb4c4;display:block;margin-bottom:5px}.fighter b{font:800 23px/.98 'Barlow Condensed',Impact,sans-serif}.fighter i{position:absolute;right:7px;top:5px;opacity:0;font-style:normal;color:var(--gold)}.fighter.selected i{opacity:1}.primary{background:var(--gold);color:#17181d;font:800 23px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;border-radius:5px;padding:15px 30px;min-width:220px;box-shadow:0 4px 0 #bc8930;transition:.15s}.primary:hover{background:#ffe08c;transform:translateY(-1px)}.quick{font-size:13px;color:#a2a8b5;margin-top:16px}.controls{padding:22px 0}.keyboard{display:flex;justify-content:center;gap:25px;color:#aab1c0;font-size:14px}.keyboard span{display:flex;align-items:center;gap:5px}kbd{font:700 13px Barlow,Arial;color:#eee;background:#242b3a;border:1px solid #3d4658;border-bottom:3px solid #3d4658;padding:5px 8px;border-radius:4px}.hud{position:absolute;left:4%;right:4%;top:5%;display:flex;align-items:start;gap:4%}.health{flex:1;min-width:0}.name{display:flex;justify-content:space-between;align-items:center;font:800 27px 'Barlow Condensed',Impact,sans-serif;text-shadow:0 2px 6px #000}.name span{font:700 12px Barlow;background:#0007;padding:4px 7px}.bar{height:20px;background:#1c1524;border:2px solid #fff8;transform:skewX(-12deg);margin-top:6px;overflow:hidden;box-shadow:0 3px 8px #0007}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#bd2a28,#ff6550);transition:width .12s}.right .bar i{background:linear-gradient(90deg,#3b80ec,#85bdff);float:right}.health small{display:block;font-size:12px;letter-spacing:1px;margin-top:9px;text-shadow:0 2px 5px black}.right small{text-align:right}.timer{text-align:center;background:#151923cf;border:1px solid #ffffff60;border-radius:5px;padding:8px 20px}.timer span{display:block;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--gold)}.timer b{font:800 50px/1 'Barlow Condensed',Impact,sans-serif}.result{flex-direction:column;justify-content:center;text-align:center;background:#0c101adb;backdrop-filter:blur(5px)}h2{font:900 clamp(40px,7vw,90px)/1 'Barlow Condensed',Impact,sans-serif;margin:18px 0;color:var(--gold)}.result .secondary{margin-top:20px}.result p{margin-bottom:28px}#announce{pointer-events:none;position:absolute;top:36%;width:100%;text-align:center;font:900 clamp(30px,6vw,80px) 'Barlow Condensed',Impact,sans-serif;color:var(--gold);text-shadow:3px 3px #15121a,0 0 30px #000}.touch{display:none}footer{display:flex;justify-content:space-between;gap:18px;font-size:12px;color:#858d9f;border-top:1px solid #252c3b;padding-top:18px}@media(max-width:850px){main{padding:18px 16px}.arena{aspect-ratio:1.38}.intro{width:78%}h1{font-size:53px}.select{margin-bottom:15px}.fighter{padding:9px;gap:8px}.fighter b{font-size:21px}.portrait{width:45px}.keyboard{gap:12px;flex-wrap:wrap}.hud{gap:12px}.name{font-size:21px}.timer{padding:7px 10px}.timer b{font-size:38px}.touch{display:flex;justify-content:space-between;gap:8px;margin-top:12px}.touch>div{display:flex;gap:7px}.touch button{height:58px;min-width:52px;border-radius:8px;background:#2c3548;border:1px solid #4b556d;touch-action:none;user-select:none;font-size:12px;padding:0 10px}.touch .hit{background:#b73c37}.touch .power{background:#b28731}.touch button.active{filter:brightness(1.6)}footer{flex-direction:column;gap:6px}}@media(max-width:520px){main{padding:14px 10px}.brand{font-size:27px}.brand small{font-size:10px;letter-spacing:1px}.tools{gap:5px}.tools button{font-size:11px;padding:10px}.arena{aspect-ratio:.92}.overlay{padding:22px}.intro{width:100%}.eyebrow{font-size:11px;letter-spacing:2px}h1{font-size:50px;margin:18px 0}p{font-size:15px}.portrait{width:38px}.fighter{gap:6px;padding:10px 7px}.fighter b{font-size:21px}.fighter small{font-size:9px}.primary{width:100%;padding:14px 18px}.quick{font-size:12px}.keyboard{font-size:12px;gap:10px}kbd{font-size:12px;padding:3px 6px}.controls{padding:14px 0}.touch{gap:4px}.touch>div{gap:4px}.touch button{min-width:38px;font-size:10px;padding:0 7px;height:56px}.hud{left:3%;right:3%;gap:9px}.name{font-size:16px}.name span{font-size:9px;padding:3px}.bar{height:16px}.health small{font-size:9px;letter-spacing:0}.timer{padding:6px}.timer span{font-size:9px}.timer b{font-size:30px}}
#menu{background:linear-gradient(90deg,#10141dfc 0%,#10141df7 38%,#10141d85 67%,#10141d20),url(assets/duelo.png) center/cover no-repeat}.poster{display:none}@media(max-width:520px){.arena.playing{aspect-ratio:1200/750}.arena.playing .result{padding:12px}.arena.playing h2{font-size:32px;margin:8px 0}.arena.playing .result p{font-size:12px;margin:5px 0 12px}.arena.playing .result .primary{font-size:18px;padding:8px;min-width:160px;width:auto}.arena.playing .result .secondary{margin-top:10px;padding:8px;font-size:11px}.arena.playing .result .eyebrow{font-size:10px}}
/* Actual clickable controls; held keyboard and touch inputs share the same state. */
.keyboard button{font:700 13px Barlow,Arial;color:#eee;background:#242b3a;border:1px solid #3d4658;border-bottom:3px solid #3d4658;padding:7px 10px;border-radius:4px;min-width:34px;min-height:34px;touch-action:none;user-select:none}.keyboard button.active{background:#69541e;border-color:var(--gold)}.keyboard button[data-key="l"]{min-width:48px;font-size:11px}.keyboard button.cooling,.touch button.cooling{filter:saturate(.3);opacity:.7}.keyboard button:disabled,.touch button:disabled{cursor:default;opacity:.35}.hud{pointer-events:none}.controls{user-select:none}.touch button{position:relative;-webkit-user-select:none;-webkit-touch-callout:none}.arena.playing{aspect-ratio:1200/650}canvas{touch-action:none}@media(max-width:850px){.keyboard{display:none}.touch{margin-top:0}.touch button{min-height:64px}.touch .power{min-width:74px}}
/* Original duel artwork blends into the menu; both faces stay outside the text. */
.arena:not(.playing){aspect-ratio:auto}.arena:not(.playing)>canvas{position:absolute;inset:0}
#menu{position:relative;display:flex;align-items:center;isolation:isolate;min-height:620px;padding:42px 4%;background:#10141d;overflow:hidden}
#menu:before{content:'';position:absolute;inset:-20px;z-index:-2;background:linear-gradient(90deg,#10141ded,#10141d50),url(assets/duelo.png) center/cover no-repeat;filter:blur(16px)}
#menu .poster{display:block;position:absolute;inset:0 0 0 auto;width:74%;height:100%;z-index:-1;border:0;background:none;mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 100%)}
#menu .poster img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center;padding:0}
#menu .intro{width:37%;padding:0;text-shadow:0 2px 15px #10141d}
#menu h1{font-size:clamp(40px,4.3vw,65px);margin:20px 0}#menu p{max-width:300px}
#menu .select{display:grid;grid-template-columns:1fr;gap:10px;max-width:320px}
#menu .fighter{padding:12px;gap:12px;min-width:0;background:#20232ed9;backdrop-filter:blur(8px)}
#menu .fighter.selected{background:#383126ed}#menu .fighter b{font-size:23px}#menu .portrait{width:52px}#menu .fighter small{font-size:10px}
#menu .quick{max-width:300px;font-size:12px}#start{min-width:0;max-width:320px;width:100%;font-size:22px}
#start:disabled{cursor:default;box-shadow:none;background:#343a48;color:#bec4cf;opacity:1}
@media(max-width:950px){#menu{display:block;min-height:0;padding:calc(66.666vw - 50px) 26px 30px}#menu .poster{inset:0 0 auto;width:100%;height:auto;aspect-ratio:3/2;mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%)}#menu .poster img{object-position:center top}#menu .intro{width:100%;max-width:640px;margin:auto}#menu h1{font-size:42px;margin:15px 0}#menu h1 br{display:none}#menu p{max-width:none;margin:12px 0 20px}#menu .select{grid-template-columns:1fr 1fr;max-width:none}#menu .quick{max-width:none}#start{max-width:none}}
@media(max-width:520px){#menu{padding:calc(66.666vw - 30px) 18px 25px}#menu h1{font-size:37px;line-height:1.05}#menu h1 br{display:block}#menu .fighter{padding:10px 7px;gap:7px}#menu .fighter b{font-size:21px}#menu .portrait{width:37px}#menu .fighter small{font-size:9px}#menu .eyebrow{font-size:11px}}

/* Powers, readable reference cards and mobile input layout. */
.loadout{padding:10px;border:1px solid #ffffff30;border-radius:6px;max-width:320px;margin:0 0 16px;background:#10141ddd}.loadout legend{font-size:12px;letter-spacing:1px;color:var(--gold);padding:0 6px}.loadout label{display:flex;align-items:center;gap:6px;font-size:14px;padding:5px 0;cursor:pointer}.loadout small{margin-left:auto;font-size:12px;color:#bec4cf}.loadout input{accent-color:var(--gold)}#menu{min-height:750px}#menu h1{margin:14px 0}#menu p{margin-bottom:16px}.tools{flex-wrap:wrap;justify-content:flex-end}dialog{color:#fff;background:#151b27;border:1px solid #697286;border-radius:12px;max-width:900px;width:calc(100% - 24px);max-height:85dvh;padding:24px}dialog::backdrop{background:#000b}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-head h2{font-size:32px;margin:0}.preferences{display:flex;flex-wrap:wrap;gap:20px;margin:24px 0}.preferences label{display:flex;gap:10px;align-items:center;font-size:16px}.source-card{border:1px solid #445069;border-radius:7px;padding:16px;margin:12px 0;background:#1d2636}.source-card h3{margin:0 0 6px;font-size:18px;color:var(--gold)}.source-card p{margin:8px 0;font-size:16px;line-height:1.5}.source-card small{font-size:13px;color:#bac7da}.source-card a{color:#a4d6ff;display:inline-block;margin:8px 16px 0 0}summary{font-size:16px;padding:14px 0;cursor:pointer}.performance{font-size:13px!important}.keyboard{gap:16px;flex-wrap:wrap}button:disabled{cursor:default}.result{background:#0c101ab0;backdrop-filter:blur(1px)}
@media(max-width:950px){#menu{min-height:0}.loadout{max-width:none}.loadout label{padding:8px 0}}
@media(max-width:650px){header{gap:10px;align-items:start}.tools button{padding:9px;font-size:11px}.tools{max-width:200px}.touch{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.touch>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.touch>div:last-child{grid-template-columns:repeat(2,1fr)}.touch button{min-width:0!important;height:56px;min-height:56px;font-size:12px;padding:0 4px}.touch>div:first-child{align-self:stretch}.touch>div:first-child button{height:100%}.health small{font-size:10px}.dialog-head h2{font-size:24px}dialog{padding:16px}.arena.playing .hud{top:3%}.arena.playing .name{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

#menu .power-context{font-size:12px;line-height:1.45;color:#c3cedb;margin:0 0 14px;max-width:340px}.loadout label{flex-wrap:wrap}.loadout small{white-space:nowrap}.loadout{max-width:350px}#announce{font-size:clamp(20px,4vw,48px)}
@media(min-width:951px){#menu{min-height:840px}}
@media(max-width:950px){#menu .power-context{max-width:none}}

.combat-context{border:1px solid #414b5b;border-radius:6px;background:#131c28;padding:8px 12px;margin-top:10px}.combat-context p{font-size:13px;line-height:1.5;color:#dae4ef;margin:2px 0}.combat-context p:first-child{color:#ffe4a1}@media(max-width:650px){.combat-context{padding:7px 10px}.combat-context p{font-size:12px;line-height:1.5}}

.arsenal{padding:12px;background:#121d29e8;border:1px solid #677387;border-radius:7px;margin-bottom:15px;max-width:350px}.arsenal h3{font-size:12px;letter-spacing:.7px;color:var(--gold);margin:0 0 8px}#menu .arsenal .power-context{margin:0;line-height:1.7}.combat-context p{overflow-wrap:anywhere}@media(max-width:950px){.arsenal{max-width:none}}

#resultTitle{color:#ffd45a;font-size:clamp(27px,5vw,66px);max-width:95%;line-height:1.08;text-wrap:balance}.result-share{background:#171f2c;border:1px solid #6d603c;border-radius:10px;padding:20px;margin:14px 0}.result-share h3{color:#ffd45a;margin:0 0 8px}.result-share p{font-size:14px;line-height:1.5}.share-actions,.share-networks{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.share-actions button,.share-networks a{padding:12px 16px;border:1px solid #8d8056;border-radius:6px;background:#232d3d;color:#fff;text-decoration:none;font:700 13px Arial;cursor:pointer}.share-actions button:first-child{background:#ffd45a;color:#151923}.share-actions button:disabled{opacity:.45;cursor:default}.result-share small{color:#bdc6d2;font-size:12px}.result-share input{width:100%;padding:10px}.health small{overflow-wrap:anywhere}@media(max-width:650px){.arena.finished{min-height:350px}.arena.playing #resultTitle{font-size:30px}.result-share{padding:14px}.share-actions button{flex:1 1 140px}.arena.finished .result{overflow:auto}}