@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/barlow-condensed-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/barlow-condensed-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/barlow-condensed-800.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/barlow-condensed-900.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dm-sans-400.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/dm-sans-500.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/dm-sans-600.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-700.ttf) format('truetype');
}

:root{color-scheme:dark;--bg:#101112;--lime:#d1ff48;--muted:#90938b;--line:#30332c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f7f8ee;font-family:'DM Sans',Arial,sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}main{max-width:960px;margin:auto;padding:0 28px}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:44px}.logo{text-decoration:none;color:var(--lime);font-size:28px;font-weight:900;letter-spacing:-3px;display:flex;align-items:center;gap:14px;transform:skew(-6deg)}.logo span{font:800 18px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:white}.quiet{border:1px solid var(--line);background:transparent;color:#d1d3c9;border-radius:6px;padding:10px 14px;min-height:42px;font:600 12px 'DM Sans',sans-serif;cursor:pointer}button{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:5px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--lime)}i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:8px}h1{font:900 clamp(44px,8vw,86px)/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1.5px;margin:19px 0}h1 em{color:var(--lime);font-style:normal}.intro{color:#b0b3a9;font-size:14px;line-height:1.8;margin-bottom:35px}.selection-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;margin-bottom:13px;color:#a4a79d}.selection-heading span:first-child{color:white}.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#35312a,#191b18 75%);height:360px;border:1px solid #3b3c35;border-radius:8px;color:white;cursor:pointer;text-align:left;padding:0;transition:border .2s,transform .2s}.card.selected{border:2px solid var(--lime)}.card:hover{transform:translateY(-3px)}.card img{width:100%;height:120%;object-fit:contain;object-position:center top;margin-top:28px}.tag{position:absolute;top:15px;left:15px;font-size:8px;letter-spacing:1.6px;z-index:1;color:#dbdcd3}.card-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:end;justify-content:space-between;padding:50px 19px 20px;background:linear-gradient(transparent,#111 70%)}.card strong{font:800 40px/.9 'Barlow Condensed',Impact,sans-serif}.pick{font-size:9px;color:#aeb1a7;letter-spacing:1px}.selected .pick{color:var(--lime)}.primary{width:100%;min-height:58px;border:0;border-radius:6px;background:var(--lime);color:#11170a;font:800 19px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;padding:17px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-top:18px}.primary:hover{background:#e2ff87}.primary:disabled{opacity:.45;cursor:default}.promise{text-align:center;font-size:9px;letter-spacing:1.8px;color:var(--muted);margin:17px 0 29px}.promise b{margin:0 10px}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);padding-top:25px}.how>div{display:flex;gap:12px}.how b{color:var(--lime);font:700 26px 'Barlow Condensed',sans-serif}.how span{font-size:12px;font-weight:700}.how small{display:block;color:var(--muted);font-size:11px;font-weight:400;line-height:1.5;margin-top:6px}.record{color:var(--muted);text-align:center;font-size:11px;margin-top:25px}footer{margin-top:40px;padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;color:#73776c}.match-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1px}.live{background:#982b32;padding:7px;border-radius:4px;color:white}.live i{background:white;width:5px;height:5px}.healths{display:grid;grid-template-columns:1fr 34px 1fr;gap:14px;align-items:center;margin:24px 0 16px}.healths>div>div{display:flex;gap:8px;align-items:center;margin-bottom:7px}.healths b{font:700 24px 'Barlow Condensed',sans-serif}.healths small{font-size:9px;color:var(--muted)}.healths span{margin-left:auto;font-size:12px}.healths>strong{font:700 16px 'Barlow Condensed',sans-serif;color:var(--muted);text-align:center}progress{width:100%;height:8px;border:0;border-radius:10px;overflow:hidden;background:#34372d}progress::-webkit-progress-bar{background:#34372d}progress::-webkit-progress-value{background:var(--lime);transition:width .3s}progress::-moz-progress-bar{background:var(--lime)}#ehealth::-webkit-progress-value{background:#ff695d}#ehealth::-moz-progress-bar{background:#ff695d}.arena{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#181916}canvas{width:100%;height:auto;display:block}.arena-label{position:absolute;left:18px;bottom:13px;font:700 13px 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#a6ad99}.arena-label span{font:8px 'DM Sans',sans-serif;margin-left:12px;color:#68705e}.controls{text-align:center;max-width:560px;margin:24px auto 0}.controls h2{font:800 32px 'Barlow Condensed',sans-serif;margin:8px 0}.controls p{font-size:12px;color:#a4a89b;margin:8px 0 20px}.meter{height:28px;background:#343b2e;border-radius:5px;position:relative;overflow:hidden}.good{position:absolute;left:30%;width:40%;height:100%;background:#759638}.perfect{position:absolute;left:45%;width:10%;height:100%;background:var(--lime)}#marker{position:absolute;height:100%;width:4px;background:white;box-shadow:0 0 8px #000;left:50%;transform:translateX(-50%)}.meter-labels{display:flex;justify-content:space-between;color:#777e6c;font-size:8px;letter-spacing:1px;margin-top:7px}.meter-labels span:nth-child(2){color:var(--lime)}.controls .primary{justify-content:center;gap:16px}.match-foot{display:flex;justify-content:space-between;color:#757c6b;font-size:8px;letter-spacing:1px;margin-top:25px}.overlay{position:fixed;inset:0;background:#080b07e8;z-index:10;display:grid;place-items:center;padding:24px;backdrop-filter:blur(8px)}[hidden]{display:none!important}.modal{max-width:470px;width:100%;text-align:center;padding:35px;border:1px solid #465134;border-radius:10px;background:#171c13}.modal h2{font:900 58px/.95 'Barlow Condensed',Impact,sans-serif;margin:20px 0;color:white}.modal p{font-size:14px;line-height:1.7;color:#adb4a3}.modal .quiet{margin-top:16px}#impact{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%) rotate(-9deg);font:900 40px 'Barlow Condensed',Impact,sans-serif;color:var(--lime);text-shadow:2px 3px #111;pointer-events:none}.shake{animation:shake .2s}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media(min-width:760px){#select{max-width:760px;margin:auto}.card{height:395px}}@media(max-width:540px){main{padding:0 18px}header{height:70px;margin-bottom:28px}h1{font-size:49px}.intro{font-size:12px;margin-bottom:28px}.card{height:280px}.card img{width:122%;margin-left:-11%;height:125%}.card strong{font-size:31px}.card-bottom{padding:40px 12px 15px;display:block}.pick{display:block;margin-top:9px}.tag{font-size:6px;left:10px}.cards{gap:10px}.how{grid-template-columns:1fr;gap:18px}.how small{margin-top:3px}.promise{font-size:7px;letter-spacing:1px}.selection-heading{font-size:8px}.healths{gap:6px}.healths b{font-size:21px}.arena-label span{display:none}.match-top{font-size:8px}.controls{margin-top:20px}.controls h2{font-size:29px}.modal{padding:28px}.modal h2{font-size:48px}footer{font-size:6px;gap:15px}.match-foot{font-size:6px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.cinematic .meter,.cinematic .meter-labels,.cinematic #action,.cinematic .healths,.cinematic .match-foot{display:none}.cinematic .arena{margin-top:18px}.cinematic #skip-intro{margin-bottom:18px}.cinematic .controls{min-height:180px}

/* Phone match layout keeps the fight and thumb control in one view. */
#match .controls{position:sticky;bottom:0;padding:14px 0 max(14px,env(safe-area-inset-bottom));background:#101112f5;z-index:2}
#match.defending .primary{background:#76cfff}#match.defending .perfect{left:40%;width:20%;background:#76cfff}#match.defending .good{background:#345268}
#match.defending #mcentre{color:#76cfff}
.selection-heading,.promise,.match-foot,.meter-labels,.tag{font-size:11px;letter-spacing:.7px}
.how small,.record{font-size:13px}footer{font-size:10px}
#pause-note{padding:12px;color:#d1ff48;text-align:center;background:#222a1a}
.modal{max-height:90dvh;overflow:auto}.modal h2{white-space:pre-line}
@media(max-width:540px){header{height:56px;margin-bottom:16px}body:has(#match:not([hidden])) header{display:none}#match{padding-top:12px}.match-top .quiet{min-height:44px}.healths{margin:10px 0}.arena{border-radius:10px}#match canvas{height:clamp(240px,42dvh,400px);object-fit:contain}.controls h2{font-size:26px;margin:5px 0}.controls p{font-size:13px;margin:5px 0 12px}.controls .primary{margin-top:10px;min-height:58px}.controls .eyebrow{font-size:12px}.match-foot{font-size:10px;gap:12px}.meter-labels{font-size:10px}.tag{font-size:9px}.selection-heading{font-size:10px}.promise{font-size:10px}.quiet{min-height:44px}.cinematic .controls{min-height:150px}}

.player-right .healths>div:first-child{order:3}.player-right .healths>strong{order:2}.player-right .healths>div:last-child{order:1}
/* Arcade attract opening: rivals arrive, burst, then title slam. */
.opening-active>header,.opening-active>footer{display:none}
.opening{position:fixed;inset:0;z-index:20;overflow:hidden;isolation:isolate;background:#6e1020;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:30px 20px max(24px,env(safe-area-inset-bottom));min-height:440px}
.opening[hidden]{display:none}
.opening-rays{position:absolute;inset:-65%;z-index:-3;background:repeating-conic-gradient(from 12deg at 50% 48%,#ffdc55 0deg 12deg,#ed9c22 12deg 24deg);opacity:0;animation:arcade-burst .2s .65s forwards}
.opening-rays:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,transparent 12%,#a62116a0 70%)}
.opening-streaks{position:absolute;inset:0;z-index:-2;background:repeating-linear-gradient(0deg,transparent 0 25px,#ffffff0c 26px 28px);pointer-events:none}
.opening-kicker{position:absolute;top:max(24px,env(safe-area-inset-top));font:800 12px 'Barlow Condensed',Impact,sans-serif;letter-spacing:4px;text-shadow:0 2px 4px #000}
.opening-rivals{position:absolute;inset:8% 0 10%;z-index:-1;display:flex;justify-content:center;align-items:end;max-width:1100px;margin:auto;pointer-events:none}
.opening-rivals img{position:absolute;bottom:0;width:58%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 0 #31092580)}
.opening-knine{left:-2%;animation:rival-left .7s cubic-bezier(.2,.8,.2,1) both}
.opening-salveno{right:-2%;animation:rival-right .7s cubic-bezier(.2,.8,.2,1) both}
.opening-names{position:absolute;top:18%;width:min(90%,750px);display:flex;align-items:center;justify-content:space-between;font:900 clamp(24px,5vw,48px) 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;text-shadow:3px 3px #2e1139;animation:title-land .4s .65s both}
.opening-names b{color:#ecff75;font-size:1.4em;font-style:italic}
.opening-title{position:absolute;top:35%;text-align:center;transform:rotate(-8deg);font:900 clamp(62px,14vw,150px)/.73 'Barlow Condensed',Impact,sans-serif;letter-spacing:-2px;filter:drop-shadow(5px 8px 0 #251344);animation:title-land .5s 1.1s both;pointer-events:none}
.opening-title span,.opening-title strong{display:block;-webkit-text-stroke:2px #32124d;paint-order:stroke fill}
.opening-title span{color:#ff5945}.opening-title strong{color:#efff65;font-size:1.2em}
.opening-title small{display:block;margin-top:20px;letter-spacing:4px;font:900 clamp(14px,3vw,25px) 'Barlow Condensed',Impact,sans-serif;color:white}
.opening-enter{z-index:2;width:min(360px,90%);border:2px solid #fff6a0;border-radius:4px;background:#251344;color:#fff6a0;min-height:58px;display:flex;align-items:center;justify-content:center;gap:28px;font:900 25px 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px;cursor:pointer;box-shadow:5px 5px 0 #401322;animation:prompt-in .4s 1.6s both}
.opening-note{font:700 10px 'DM Sans',sans-serif;letter-spacing:2px;color:#fff9d8;text-shadow:1px 1px #251344;margin:18px 0 0;animation:prompt-in .4s 1.6s both}
@keyframes rival-left{from{transform:translateX(-110%)}to{transform:translateX(0)}}
@keyframes rival-right{from{transform:translateX(110%)}to{transform:translateX(0)}}
@keyframes arcade-burst{to{opacity:1}}
@keyframes title-land{from{opacity:0;scale:2.3;translate:0 -40px}to{opacity:1;scale:1;translate:0 0}}
@keyframes prompt-in{from{opacity:0}to{opacity:1}}
@media(min-width:800px){.opening-rivals{inset:5% 4% 0}.opening-rivals img{width:50%}.opening-knine{left:0}.opening-salveno{right:0}.opening-title{top:30%}}
@media(prefers-reduced-motion:reduce){.opening *{animation:none!important}.opening-rays{opacity:1}}
/* Fight-night art direction */
:root{--bg:#0b1120;--lime:#efbd58;--muted:#a0aec4;--line:#3b4960}
body{background:#0b1120;color:#f6edda}body:before{display:none}
main{max-width:1000px;padding:0 24px}header{height:64px;margin-bottom:22px;border-bottom:2px solid #354159}.logo{color:#e94b42}.logo span{color:#efbd58;letter-spacing:2px}
.quiet{border-radius:0;border-color:#516078;color:#dde5f2;background:#172236;font:700 13px 'Barlow Condensed',sans-serif;letter-spacing:1px}
#select{max-width:760px;padding-bottom:20px}.select-title{text-align:center;margin:26px 0 30px}.select-title>span{font:700 11px 'DM Sans',sans-serif;letter-spacing:3px;color:#96a5bc}.select-title h1{font-size:clamp(44px,8vw,74px);font-style:italic;line-height:.85;letter-spacing:-1px;margin:18px 0;text-shadow:3px 4px #000}.select-title h1 em{color:#efbd58}.select-title p{font:800 19px 'Barlow Condensed',sans-serif;letter-spacing:3px;margin:0;color:#d0d9e8}.select-title b{color:#e94b42;margin:0 15px}
.selection-heading{font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:1.3px;color:#a0aec4;border-bottom:2px solid #354159;padding-bottom:9px;margin-bottom:12px}
.cards{gap:18px}.card{height:370px;border:2px solid #47526a;border-radius:0;background:linear-gradient(125deg,#501e2c 0%,#941f32 50%,#301e31 100%);box-shadow:5px 6px 0 #040915;transition:transform .15s,border-color .15s}.card:nth-child(2){background:linear-gradient(235deg,#18385b,#305788 50%,#18283e)}.card:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 28px,#ffffff08 28px 30px);pointer-events:none}.card.selected{border:3px solid #efbd58;box-shadow:0 0 0 2px #0b1120,0 0 0 4px #efbd58,5px 8px 0 #040915}.card img{height:130%;width:115%;margin:20px 0 0 -7.5%;object-position:center top;filter:drop-shadow(8px 3px 0 #0004)}.tag{top:12px;left:12px;font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:1px;background:#09111ede;padding:6px 9px;color:#e8d9ba}.card-bottom{background:linear-gradient(transparent,#080e1b 55%);padding:55px 16px 18px;display:block}.card strong{font:900 italic 44px/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;text-shadow:3px 3px #000}.pick{display:block;margin-top:10px;font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:2px}.selected .pick{color:#efbd58}
.primary{border-radius:0;background:#ba343a;border:2px solid #ed6961;box-shadow:0 5px 0 #681e2a;color:#fff3df;min-height:60px;font:900 italic 24px 'Barlow Condensed',Impact,sans-serif;letter-spacing:2px;justify-content:center;gap:20px;margin-top:24px}.primary:hover{background:#d14243}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #681e2a}.primary:disabled{transform:none;opacity:.55}.control-guide{display:flex;justify-content:center;gap:26px;margin:25px 0 20px;font-size:11px;color:#b3bfd2}.control-guide b{font:800 14px 'Barlow Condensed',sans-serif;color:#efbd58;margin-right:5px}.record{font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:1.2px;color:#aab8ce;border-top:1px solid #354159;padding-top:16px}
footer{margin-top:15px;border-top:1px solid #354159;color:#788aa6}.healths{background:#131d30;padding:12px;border:2px solid #53617a;margin:12px 0 0;gap:12px}.healths b{font-style:italic;font-size:28px;color:#fff0d3}.healths>strong{font:900 italic 28px 'Barlow Condensed',sans-serif;color:#efbd58}.healths span{font-weight:800;color:#fff0d3}progress{height:18px;border-radius:0;border:2px solid #090f1b;background:#3d2632}progress::-webkit-progress-bar{background:#3d2632}progress::-webkit-progress-value{background:#efbd58}progress::-moz-progress-bar{background:#efbd58}#ehealth::-webkit-progress-value{background:#e85c50}#ehealth::-moz-progress-bar{background:#e85c50}
.arena{border:2px solid #53617a;border-top:0;border-radius:0;background:#121d32}.arena-label{color:#bec9d9;letter-spacing:2px}.arena-label span{color:#94a4bb}.live{border-radius:0;background:#ba343a}.match-top{color:#c5d0df}.match-foot{color:#a3b0c6;margin:16px 0}.controls h2{font-style:italic;text-transform:uppercase}.controls p{color:#bcc7d9}#match .controls{background:#0b1120fa;padding:16px 12px max(16px,env(safe-area-inset-bottom));border-top:2px solid #354159;margin-top:18px}.meter{height:32px;border:2px solid #68758c;border-radius:0;background:#4f2630}.good{background:#946541}.perfect{background:#efbd58}.meter-labels{color:#bcc7d9}.meter-labels span:nth-child(2){color:#efbd58}.defending .primary{color:#102039;border-color:#b1ddff;box-shadow:0 5px 0 #34577f}.modal{border:3px solid #efbd58;border-radius:0;background:#142037;box-shadow:8px 8px 0 #000}.modal h2{color:#efbd58;font-style:italic}.modal p{color:#c0cadc}.overlay{background:#050a16ed}#pause-note{background:#1d2b43;color:#efbd58}
.opening{background:#151f34}.opening-rays{background:repeating-conic-gradient(from 12deg at 50% 48%,#273d5a 0deg 12deg,#192940 12deg 24deg)}.opening-rays:after{background:radial-gradient(ellipse,transparent 15%,#070d1b 75%)}.opening-title span{color:#ed574d}.opening-title strong,.opening-names b{color:#efbd58}.opening-title{filter:drop-shadow(5px 8px 0 #050a14)}.opening-title span,.opening-title strong{-webkit-text-stroke-color:#070e1d}.opening-enter{border-radius:0;background:#b93139;color:#fff0d3;border-color:#f5826b;box-shadow:0 5px #631e2b}.opening-note{color:#b8c5d9}
@media(max-width:540px){main{padding:0 14px}header{margin-bottom:12px}.select-title{margin:22px 0}.select-title h1{font-size:53px}.cards{gap:12px}.card{height:clamp(250px,40dvh,350px)}.card strong{font-size:34px}.card-bottom{padding:50px 10px 15px}.tag{font-size:10px;left:7px;top:8px}.pick{font-size:11px;letter-spacing:1px}.healths{gap:6px;padding:9px}.healths b{font-size:22px}.healths small{font-size:8px}.arena{border-radius:0}.control-guide{gap:14px;font-size:10px}.controls .primary{font-size:25px}.match-foot{font-size:9px}}