@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{--orange:#ff6434;--muted:#787c85;--line:#292c31}*{box-sizing:border-box}body{margin:0;background:#101114;color:#f1eee8;font-family:'IBM Plex Mono',monospace}header{height:88px;border-bottom:1px solid var(--line);padding:0 5%;display:flex;align-items:center;gap:30px}.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;font-weight:600;font-size:17px}.brand small{font-size:9px;color:var(--muted);border-left:1px solid var(--line);padding-left:16px;max-width:70px;line-height:1.5}.mark{background:var(--orange);color:#141414;font:900 32px 'Barlow Condensed',sans-serif;padding:0 9px}.edition{margin-left:auto;font-size:10px;color:#aaa}i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin:0 10px}button{cursor:pointer;font-family:inherit}header button{background:none;color:#d1d1d1;border:1px solid #41434a;padding:10px 13px;font-size:10px}main{max-width:1280px;margin:36px auto;padding:0 40px}.eyebrow{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--orange)}.eyebrow span:last-child{color:var(--muted)}.title-row{display:flex;justify-content:space-between;align-items:center;margin:7px 0 24px}h1{font:900 clamp(40px,5.5vw,76px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:0}h1 em{font-style:normal;color:var(--orange)}.tag{font-size:10px;color:#92959d;line-height:1.8;text-align:right}.tag b{color:#e1dfdc;font-weight:400}.cabinet{border:1px solid #3d4047;background:#191b20;box-shadow:0 20px 60px #0005}.game-top,.game-bottom{height:34px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#a8acb4}.game-top i{margin-left:0}.game-bottom{height:32px;font-size:8px}.game-bottom b{color:var(--orange);margin-right:6px}.muted{color:#555;margin:0 7px}.screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#181c30}canvas{width:100%;height:100%;image-rendering:pixelated;display:block;outline:none}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 4px);opacity:.45}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#090c16ed 0%,#090c1699 48%,#090c1600);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:6% 8%}.intro-kicker{font-size:11px;letter-spacing:3px;color:#ff9f75}h2{font:900 clamp(30px,5.5vw,76px)/.95 'Barlow Condensed',Impact,sans-serif;margin:16px 0}#overlay p{color:#aeb1bf;font-size:12px;margin:0 0 24px}#start{background:var(--orange);border:0;padding:18px 22px;color:#141414;font-weight:600;font-size:11px;letter-spacing:1px;box-shadow:4px 4px 0 #0007}#start span{margin-left:35px;font-size:17px}#overlay small{margin-top:18px;font-size:8px;letter-spacing:2px;color:#9599a8}#pause{position:absolute;right:12px;bottom:12px;color:#eee;background:#1118;border:1px solid #ffffff40;padding:5px 10px}.below{display:grid;grid-template-columns:1fr 1.35fr;gap:34px;padding:26px 0;border-bottom:1px solid var(--line)}.fighter-card{display:flex;gap:18px;border-right:1px solid var(--line)}.portrait{width:86px;height:96px;background-image:url('assets/reference.png');background-size:310px auto;background-position:0 0;border:1px solid #4d4643;flex-shrink:0;filter:saturate(.7)}.section-label{font-size:9px;letter-spacing:1.6px;color:var(--orange)}h3{font:700 27px 'Barlow Condensed',sans-serif;margin:5px 0}h3 span{font-size:14px;margin-left:10px}.fighter-card p,blockquote{font-size:9px;color:#92959d;margin:0}blockquote{margin-top:10px;color:#c6c4c0;font-style:italic}.control-heading{display:flex;justify-content:space-between;font-size:8px;color:#777}.keys{display:flex;justify-content:space-between;margin-top:16px}.keys>div{text-align:center}kbd{display:inline-flex;align-items:center;justify-content:center;border:1px solid #494b53;border-bottom:3px solid #494b53;border-radius:3px;width:29px;height:30px;font:12px 'IBM Plex Mono';background:#202228}.wide{width:64px}small{display:block}.keys small{font-size:9px;color:#aaa;margin-top:10px}footer{display:flex;justify-content:space-between;color:#686c75;font-size:8px;letter-spacing:1px;padding:20px 0}footer b{font-weight:400;color:#b1b1b1}.touch{display:none}button:hover{filter:brightness(1.15)}button:focus-visible{outline:2px solid #fff;outline-offset:3px}@media(max-width:700px){header{height:64px;padding:0 20px}.edition,.brand small,.tag{display:none}header button{margin-left:auto}main{padding:0 14px;margin:24px auto}.title-row{margin-bottom:16px}.eyebrow{font-size:7px}h1{font-size:40px}.below{grid-template-columns:1fr;gap:22px}.fighter-card{border:0}.game-top,.game-bottom{font-size:6px;padding:0 8px}.game-top{height:26px}#overlay{padding:5%}#overlay h2{font-size:36px;margin:8px 0}#overlay p{font-size:8px;margin-bottom:12px}.intro-kicker{font-size:7px}#start{font-size:8px;padding:10px 14px}#overlay small{display:none}.touch{display:flex;gap:5px;margin-top:16px;touch-action:none}.touch button{flex:1;background:#25272e;border:1px solid #444;color:#eee;padding:17px 0;font-size:9px}.touch button:active{background:var(--orange)}footer{font-size:6px;gap:15px}}
.portrait{background-position:-60px -3px}

[hidden]{display:none!important}
#character-select{display:flex;gap:10px;margin:0 0 20px}#character-select button{background:#161c29e8;border:1px solid #535b6a;color:#eee;text-align:left;padding:14px 16px}#character-select button[aria-pressed="true"]{border-color:var(--orange);box-shadow:inset 3px 0 var(--orange);background:#35231f}#character-select b{font-size:12px}#character-select small{font-size:8px;color:#c1bdba;margin-top:6px}#change-character{background:transparent;color:#eee;border:1px solid #777;padding:10px 14px;margin-top:12px;font-size:10px}.portrait.rival-portrait{background-image:url('assets/william-portrait.png');background-size:cover;background-position:center;image-rendering:pixelated}
#overlay:has(#character-select:not([hidden])) h2{font-size:clamp(26px,4.2vw,58px)}
@media(max-width:700px){#character-select{gap:6px;margin-bottom:8px}#character-select button{padding:7px 9px}#character-select b{font-size:9px}#character-select small{display:none}#overlay:has(#character-select:not([hidden])) h2{font-size:26px}#overlay:has(#character-select:not([hidden])) .intro-kicker{display:none}}

/* Portraits stay visible in both fighter choices, including narrow screens. */
#character-select button{display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-width:215px}
.choice-face{display:block;grid-row:1 / 3;width:60px;height:68px;border:1px solid #69646a;background-repeat:no-repeat;background-color:#111725;image-rendering:pixelated}
.choice-giuseppe{background-image:url('assets/reference.png');background-size:220px auto;background-position:-43px -2px}
.choice-william{background-image:url('assets/william-portrait.png');background-size:cover;background-position:center}
#character-select button b{align-self:end}#character-select button small{align-self:start;margin-top:7px;letter-spacing:0}
@media(max-width:700px){#character-select button{min-width:0;grid-template-columns:40px 1fr;column-gap:7px;padding:6px 8px}#character-select .choice-face{width:40px;height:46px}#character-select .choice-giuseppe{background-size:148px auto;background-position:-29px -1px}#character-select button b{align-self:center;font-size:8px;grid-row:1 / 3}#overlay:has(#character-select:not([hidden])) h2{font-size:22px;margin:5px 0}#overlay:has(#character-select:not([hidden])) p{margin-bottom:7px}}
/* Larger character-selection portraits. */
#character-select button{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;min-width:172px;padding:12px 18px;text-align:center;row-gap:8px}
#character-select .choice-face{grid-row:auto;width:112px;height:126px}
#character-select .choice-giuseppe{background-size:407px auto;background-position:-80px -4px}
#character-select button b{align-self:center}
#character-select button small{margin:0}
#overlay:has(#character-select:not([hidden])) h2{font-size:clamp(26px,3.4vw,46px);margin:10px 0}
#overlay:has(#character-select:not([hidden])) p{margin-bottom:14px}
#overlay:has(#character-select:not([hidden])){padding-top:3%;padding-bottom:3%}
@media(max-width:700px){
 .screen:has(#character-select:not([hidden])){aspect-ratio:auto;min-height:410px}
 .screen:has(#character-select:not([hidden])) canvas{position:absolute;inset:0;object-fit:cover}
 #character-select button{min-width:126px;padding:10px;grid-template-columns:1fr;grid-template-rows:auto auto;row-gap:8px}
 #character-select .choice-face{width:86px;height:96px;grid-row:auto}
 #character-select .choice-giuseppe{background-size:310px auto;background-position:-60px -3px}
 #character-select button b{grid-row:auto;font-size:10px}
 #overlay:has(#character-select:not([hidden])) h2{font-size:30px}
}