/* WH Punch Out screen: an 8-bit boxing TV inside a late-night diner. Original CSS shapes only. */
@font-face{font-family:Chakra;src:url('/assets/fonts/chakra-petch-latin-400.woff2')}
@font-face{font-family:Jersey;src:url('/assets/fonts/jersey-10-latin-400.woff2')}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:#0d0d10;color:#f4f1e6;font-family:Chakra,'Chakra Petch',monospace}
body{margin:0;background:radial-gradient(ellipse 80% 50% at 50% 0,#3b2d12,transparent 70%),#0d0d10}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;border:1px solid #5d5a52;background:#29292b;color:#fff1cb;border-radius:3px;min-height:42px;padding:8px 14px;font-weight:bold}
button:hover,button:focus-visible{outline:2px solid #fff3aa;background:#3d3a33}button:active{transform:translateY(2px)}button:disabled{cursor:default;opacity:.45}
a{color:#f8d43a;text-decoration:none}
.skip-link{position:absolute;top:-100px;z-index:9}.skip-link:focus{top:4px;background:#111;padding:12px}

/* CRT bezel: the HUD, ring and announcer read as one black screen. */
.wh-page .cabinet{position:relative;min-width:0;margin:0 auto;padding:var(--bez);border:0;border-radius:calc(var(--bez) * 1.8);background:linear-gradient(#202024,#111113 22%,#0b0b0c);box-shadow:inset 0 1px #45454c,inset 0 0 0 1px #000,0 0 0 1px #000,0 16px 40px #000c}
.wh-page .screen{position:relative;border-radius:8px;background:#000;box-shadow:0 0 0 1px #000,0 0 0 var(--ring) #e2bd3b,0 0 0 calc(var(--ring) + 1px) #000}
.wh-page .screen::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 0 12px #0008}

/* NES-style HUD band: counters, points and clock over two segmented bars. */
.wh-page .hud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-rows:var(--px) minmax(0,1fr);grid-template-areas:"top top clock" "player enemy clock";column-gap:var(--hud-gap);row-gap:3px;height:var(--hud-h);padding:var(--hud-pad);overflow:hidden;border-radius:8px 8px 0 0;background:#000;color:#fff;font:400 var(--hud-fs)/1.1 var(--font-pixel);border-bottom:2px solid #17171c}
.wh-page .hud p{margin:0}.wh-page .hud span{display:inline;margin:0;color:inherit;font:inherit;line-height:inherit}.wh-page .hud>.hud-bar{text-align:left}
.wh-page .hud-counters{grid-area:top;justify-self:start;align-self:center;display:flex;gap:calc(var(--px) * .9);align-items:center}
.wh-page .hud .hud-stat{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#fff}
.wh-page .hud-points{grid-area:top;justify-self:center;align-self:center;display:flex;gap:.7em;white-space:nowrap}
.wh-page .hud-points span{color:#ffd23a}.wh-page .hud-points b{letter-spacing:.08em}
.wh-page .round{grid-area:clock;display:grid;justify-items:end;align-content:center;row-gap:2px;line-height:1;text-align:right;white-space:nowrap}
.wh-page .round b{color:#ffd23a;font-size:var(--hud-small);letter-spacing:.06em}.wh-page .round small{color:#cbc5b4;font-size:var(--hud-small)}
.wh-page #clock{display:block;font:700 var(--clock-fs)/1 var(--font-pixel);color:#fff;letter-spacing:.02em;margin:0}
.wh-page .hud-bar{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"lab lab" "bar bar" "slab sbar";align-content:end;align-items:center;row-gap:3px;column-gap:6px;min-width:0}
.wh-page .hud-bar.player{grid-area:player}.wh-page .hud-bar.enemy{grid-area:enemy;grid-template-columns:minmax(0,1fr);grid-template-areas:"lab" "bar" "role"}
.wh-page .hud-bar>label:first-child{grid-area:lab;display:flex;justify-content:space-between;gap:6px;min-width:0;margin:0;white-space:nowrap;letter-spacing:.02em}
.wh-page .hud-bar>label:first-child span{overflow:hidden;text-overflow:ellipsis;margin:0;line-height:1.1}.wh-page .hud-bar>label b{color:#ffd23a}
.wh-page .hud progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--bar-h);margin:0;border:0;border-radius:0;background:#2a1c0b;color:var(--bar-c);box-shadow:0 0 0 1px #000,0 0 0 2px #d9d4c5;--bar-c:#ffd23a}
.wh-page .hud progress::-webkit-progress-bar{background:repeating-linear-gradient(90deg,#33230c 0 var(--seg),#000 0 calc(var(--seg) + 2px))}
.wh-page .hud progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,var(--bar-c) 0 var(--seg),#000 0 calc(var(--seg) + 2px));transition:none}
.wh-page .hud progress::-moz-progress-bar{background:repeating-linear-gradient(90deg,var(--bar-c) 0 var(--seg),#000 0 calc(var(--seg) + 2px))}
.wh-page #health{grid-area:bar}.wh-page #enemy{grid-area:bar;--bar-c:#ff7448;transform:scaleX(-1)}
.wh-page .stamina-label{grid-area:slab;margin:0;color:#9fdbe2;font-size:var(--hud-small);line-height:1}
.wh-page #stamina{grid-area:sbar;height:var(--sta-h);--bar-c:#7fd6df;--seg:3px;box-shadow:none;background:#10282b}
.wh-page #role{display:block;grid-area:role;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#bdb6a4;font-size:var(--hud-small);line-height:1.1;margin:0}
/* 7x7 / 7x6 pixel star and heart, drawn as stepped polygons. */
.wh-page .px{display:inline-block;flex:none;width:var(--px);height:var(--px);background:currentColor}
.wh-page .px-star{color:#ffd23a;clip-path:polygon(42.86% 0,57.14% 0,57.14% 14.29%,71.43% 14.29%,71.43% 28.57%,100% 28.57%,100% 42.86%,85.71% 42.86%,85.71% 57.14%,71.43% 57.14%,71.43% 71.43%,85.71% 71.43%,85.71% 100%,71.43% 100%,71.43% 85.71%,57.14% 85.71%,57.14% 71.43%,42.86% 71.43%,42.86% 85.71%,28.57% 85.71%,28.57% 100%,14.29% 100%,14.29% 71.43%,28.57% 71.43%,28.57% 57.14%,14.29% 57.14%,14.29% 42.86%,0 42.86%,0 28.57%,28.57% 28.57%,28.57% 14.29%,42.86% 14.29%)}
.wh-page .px-heart{color:#ff5d7a;height:calc(var(--px) * 6 / 7);clip-path:polygon(14.29% 0,42.86% 0,42.86% 16.67%,57.14% 16.67%,57.14% 0,85.71% 0,85.71% 16.67%,100% 16.67%,100% 50%,85.71% 50%,85.71% 66.67%,71.43% 66.67%,71.43% 83.33%,57.14% 83.33%,57.14% 100%,42.86% 100%,42.86% 83.33%,28.57% 83.33%,28.57% 66.67%,14.29% 66.67%,14.29% 50%,0 50%,0 16.67%,14.29% 16.67%)}

/* One 4:3 game frame; overlays scale with the stage width. */
.wh-page .stage{position:relative;container:stage/inline-size;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:4/3;overflow:hidden;background:#000}
.wh-page #ring{display:block;width:100%;height:100%;image-rendering:pixelated;outline-offset:-4px}.wh-page #ring:focus-visible{outline:3px solid #ffd23a}
.wh-page #overlay{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:minmax(0,1fr);place-items:stretch;padding:0;overflow:hidden;background:#000000eb}
.wh-page #overlay.title-mode,.wh-page #overlay[data-mode=ready],.wh-page #overlay[data-mode=break]{background:#000}
.wh-page #overlay[data-mode=paused]{place-items:center;background:#000000a8}

/* Announcer ticker. */
.wh-page #callout{display:flex;align-items:center;justify-content:center;height:var(--call-h);min-height:0;margin:0;padding:0 14px;overflow:hidden;border-top:2px solid #17171c;border-radius:0 0 8px 8px;background:#000;color:#ffd23a;font:700 var(--call-fs)/1.25 var(--font-pixel);letter-spacing:.03em;text-align:center;text-transform:uppercase}

/* Controller deck: chunky gray d-pad style buttons and a red PUNCH button. */
.wh-page .controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--ctrl-gap);height:var(--ctrl-h);margin:var(--deck-gap) 0 0;padding:5px 6px;touch-action:manipulation}
.wh-page .controls button{display:grid;grid-template-columns:auto auto;grid-template-areas:"glyph label" "key key";place-content:center;align-items:center;justify-items:center;column-gap:7px;row-gap:5px;min-width:0;min-height:0;height:auto;margin:0;padding:2px 4px;border:0;border-radius:0;background:#3a3a41;color:#f6f2e6;font:700 var(--ctrl-fs)/1.05 var(--font-pixel);letter-spacing:.02em;text-align:center;box-shadow:0 -3px #000,0 3px #000,-3px 0 #000,3px 0 #000,inset -3px -3px #232328,inset 3px 3px #63636c;touch-action:manipulation}
.wh-page .controls button>span{grid-area:label;min-width:0}
.wh-page .controls kbd{grid-area:key;display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#c9c4b6;font:400 var(--kbd-fs)/1 var(--font-pixel);white-space:nowrap}
.wh-page .controls button:hover:enabled{background:#4a4a52;outline:0}
.wh-page .controls button:focus-visible{background:#4a4a52;outline:3px solid #ffd23a;outline-offset:5px}
.wh-page .controls button:active:enabled{transform:translateY(2px);box-shadow:0 -3px #000,0 3px #000,-3px 0 #000,3px 0 #000,inset 3px 3px #232328,inset -3px -3px #55555d}
.wh-page .controls .punch{background:#c8102e;color:#fff;box-shadow:0 -3px #000,0 3px #000,-3px 0 #000,3px 0 #000,inset -3px -3px #7e0a1d,inset 3px 3px #ff6170}
.wh-page .controls .punch kbd{color:#fff}.wh-page .controls .punch:hover:enabled,.wh-page .controls .punch:focus-visible{background:#de1a38}
.wh-page .controls .punch:active:enabled{box-shadow:0 -3px #000,0 3px #000,-3px 0 #000,3px 0 #000,inset 3px 3px #7e0a1d,inset -3px -3px #f04a5b}
.wh-page .pad{grid-area:glyph;display:block;width:var(--glyph);height:calc(var(--glyph) * 1.4);background:#ffd23a;clip-path:polygon(0 0,25% 0,25% 14.29%,50% 14.29%,50% 28.57%,75% 28.57%,75% 42.86%,100% 42.86%,100% 57.14%,75% 57.14%,75% 71.43%,50% 71.43%,50% 85.71%,25% 85.71%,25% 100%,0 100%)}
.wh-page .pad-left{transform:scaleX(-1)}.wh-page .pad-down{transform:rotate(90deg)}.wh-page .pad-head{transform:rotate(-90deg)}
/* Head punch (high) and the waffle-star special. */
.wh-page .controls .head-punch{background:#8c1f33;color:#fff;box-shadow:0 -3px #000,0 3px #000,-3px 0 #000,3px 0 #000,inset -3px -3px #5a0f1e,inset 3px 3px #d0566a}
.wh-page .controls .head-punch:hover:enabled,.wh-page .controls .head-punch:focus-visible{background:#a3283e}
.wh-page .controls .waffle{background:#8a5a12;color:#fff6d6;box-shadow:0 -3px #000,0 3px #000,-3px 0 #000,3px 0 #000,inset -3px -3px #5c3a08,inset 3px 3px #e2a640}
.wh-page .controls .waffle[data-stars="0"]{background:#4a3a24;color:#c9b99a}
.wh-page .controls .waffle:hover:enabled,.wh-page .controls .waffle:focus-visible{background:#a26c18}
.wh-page .controls .head-punch kbd,.wh-page .controls .waffle kbd{color:#fff}
.wh-page .pad-waffle{width:calc(var(--glyph) * 1.3);height:calc(var(--glyph) * 1.3);background:repeating-linear-gradient(90deg,#f4b933 0 30%,#9b5d19 30% 36%),#f4b933;box-shadow:inset 0 0 0 2px #4c280f;clip-path:none}
.wh-page .pad-punch{width:calc(var(--glyph) * 1.5);height:calc(var(--glyph) * 1.3);background:#fff;clip-path:polygon(20% 0,80% 0,80% 10%,90% 10%,90% 60%,100% 60%,100% 80%,80% 80%,80% 100%,20% 100%,20% 80%,0 80%,0 30%,10% 30%,10% 10%,20% 10%)}
.wh-page .tools{display:flex;align-items:center;gap:12px;height:var(--tools-h);margin:0;padding:0 6px}
.wh-page .tools button,.wh-page .tools summary{display:inline-flex;align-items:center;height:var(--pill-h);min-height:0;margin:0;padding:0 var(--pill-x);border:0;border-radius:999px;background:#2d2d32;color:#ece8dc;font:400 var(--tools-fs)/1 var(--font-pixel);white-space:nowrap;cursor:pointer;box-shadow:0 0 0 2px #000,inset 0 -2px #18181b,inset 0 2px #48484f}
.wh-page .tools button:hover:enabled,.wh-page .tools summary:hover{background:#3d3d44;outline:0}
.wh-page .tools button:focus-visible,.wh-page .tools summary:focus-visible{background:#3d3d44;outline:3px solid #ffd23a;outline-offset:3px}
.wh-page .tools summary{list-style:none}.wh-page .tools summary::-webkit-details-marker{display:none}.wh-page .tools summary::after{content:'?';margin-left:.6em;color:#ffd23a}
.wh-page .tools details{position:relative;margin-left:auto;max-width:none}
.wh-page .tools details>p{position:absolute;z-index:6;right:0;bottom:calc(100% + 10px);width:min(420px,calc(100vw - 40px));margin:0;padding:12px 14px;border:3px solid #fff;border-radius:4px;background:#000;color:#fff;box-shadow:0 0 0 3px #000;font:600 13px/1.5 'Chakra Petch',Chakra,sans-serif}

/* Title controls; the retired procedural logo/gloves are no longer rendered. */
.wh-page #title-screen{color:#ffd23a;text-align:center}
.wh-page .title-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:.4cqw 3cqw}
.wh-page .title-menu button{display:inline-flex;align-items:center;gap:1cqw;min-height:max(26px,4.4cqw);margin:0;padding:0 1.4cqw;border:0;border-radius:0;background:none;color:#fff;font:700 max(10px,2.5cqw)/1 var(--font-pixel);letter-spacing:.06em}
.wh-page .title-menu button::before{content:'';width:max(5px,1.1cqw);height:max(9px,1.9cqw);background:#ffd23a;visibility:hidden;clip-path:polygon(0 0,25% 0,25% 14.29%,50% 14.29%,50% 28.57%,75% 28.57%,75% 42.86%,100% 42.86%,100% 57.14%,75% 57.14%,75% 71.43%,50% 71.43%,50% 85.71%,25% 85.71%,25% 100%,0 100%)}
.wh-page .title-menu button:enabled:is(:hover,:focus){background:none;color:#ffd23a;outline:0}
.wh-page .title-menu button:focus-visible{outline:2px solid #ffd23a!important;outline-offset:2px}
.wh-page .title-menu button:enabled:is(:hover,:focus)::before,.wh-page .title-menu:not(:hover):not(:focus-within) button:first-child::before{visibility:visible}
.wh-page .title-menu button:disabled{color:#8d887a;opacity:1}
.wh-page #continue-note{max-width:92%;margin:0;color:#bbb4a2;font:400 max(8px,1.3cqw)/1.35 var(--font-pixel)}


/* Fighter card: black intro screen, framed portrait, stat block and NES text box. */
.wh-page .ticket{display:grid;align-content:center;gap:1.1cqw 2.4cqw;width:100%;height:100%;max-height:100%;margin:0;padding:2.4cqw 3.6cqw;overflow:auto;border:0;background:#000;color:#f4f1e6;text-align:left;box-shadow:none;font:400 max(8px,1.7cqw)/1.3 var(--font-pixel);--opp-size:26cqw;--ethen-size:12cqw}
.wh-page .ticket>*{min-width:0;margin:0}.wh-page .portrait-row{display:contents}
.wh-page #ticket-kicker{grid-area:kick;color:#ffd23a;font:700 max(8px,1.55cqw)/1.2 var(--font-pixel);letter-spacing:.14em;text-transform:uppercase}
.wh-page .ticket figure{display:grid;justify-items:center;align-content:start;gap:.7cqw;margin:0}
.wh-page .opp-frame{grid-area:opp}.wh-page .ethen-frame{grid-area:ethen}
.wh-page .ticket canvas{display:block;margin:0;image-rendering:pixelated;background:#1c2131}
.wh-page #portrait{width:var(--opp-size);height:var(--opp-size);border:max(2px,.5cqw) solid #f4f1e6;box-shadow:0 0 0 max(2px,.4cqw) #000,0 0 0 max(3px,.75cqw) #ffd23a}
.wh-page #ethen-portrait{width:var(--ethen-size);height:var(--ethen-size);border:max(2px,.35cqw) solid #f4f1e6;background:#263044}
.wh-page .ticket figcaption{color:#cbc5b4;font:400 max(7px,1.2cqw)/1.15 var(--font-pixel);text-align:center;text-transform:uppercase;white-space:nowrap}
.wh-page .ethen-frame::before{content:'VS';color:#ffd23a;font:400 max(14px,3.6cqw)/.9 'Jersey 10',Jersey,sans-serif;text-shadow:.25cqw .25cqw 0 #e0262b,.5cqw .5cqw 0 #000}
.wh-page #title{grid-area:title;align-self:end;color:#ffd23a;font:400 max(16px,5.6cqw)/1.1 'Jersey 10',Jersey,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-shadow:.25cqw .25cqw 0 #e0262b,.5cqw .5cqw 0 #000}
.wh-page .card-stats{grid-area:stats;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:.6cqw 2.4cqw;margin:0;font-size:max(8px,2cqw)}
.wh-page .card-stats div{display:contents}.wh-page .card-stats dt{color:#ffd23a}.wh-page .card-stats dd{margin:0;color:#fff}
.wh-page #fighter-quote{grid-area:quote;padding:1cqw 1.6cqw;border:max(2px,.45cqw) solid #fff;border-radius:max(3px,.6cqw);background:#000;color:#fff;font:400 max(8px,1.65cqw)/1.4 var(--font-pixel)}
.wh-page #fighter-quote:empty{display:none}
.wh-page #copy{grid-area:copy;align-self:center;color:#e9e3d1;font:600 max(10px,1.75cqw)/1.3 'Chakra Petch',Chakra,sans-serif}
.wh-page #start{grid-area:start;justify-self:end;align-self:center;min-height:max(26px,4.4cqw);margin:0;padding:0 2.2cqw;border:0;border-radius:0;background:#ffd23a;color:#000;font:700 max(10px,1.85cqw)/1 var(--font-pixel);letter-spacing:.05em;white-space:nowrap;box-shadow:0 -3px #000,0 3px #000,-3px 0 #000,3px 0 #000,inset -3px -3px #b38708,inset 3px 3px #fff1a8}
.wh-page #start:hover,.wh-page #start:focus-visible{background:#ffe26a;outline:3px solid #fff;outline-offset:5px}
.wh-page #ticket[data-mode=ready]{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"kick kick kick" "opp title ethen" "opp stats ethen" "quote quote quote" "copy copy start"}
.wh-page #ticket:not([data-mode=ready]) .card-stats{display:none}
.wh-page #ticket:not([data-mode=ready]) #copy{padding:1.2cqw 1.8cqw;border:max(2px,.45cqw) solid #fff;border-radius:max(3px,.6cqw);background:#000;color:#fff;font:400 max(8px,1.6cqw)/1.45 var(--font-pixel)}
.wh-page #ticket:is([data-mode=won],[data-mode=lost]){--opp-size:16cqw;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"kick kick kick" "opp title ethen" "opp copy ethen" "quote quote quote" "start start start"}
.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #start{justify-self:center}
.wh-page #ticket[data-mode=won] #start{translate:0 clamp(6px,1.2cqw,12px)}
.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #fighter-quote{padding:0;border:0;color:#ffd23a;text-align:center}
.wh-page #ticket[data-mode=break]{--ethen-size:17cqw;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"kick kick" "ethen title" "ethen copy" "quote quote" "start start"}
.wh-page #ticket[data-mode=break] .opp-frame{display:none}.wh-page #ticket:not([data-mode=ready]) .ethen-frame::before{content:none}
.wh-page #ticket[data-mode=paused]{width:auto;height:auto;min-width:min(46cqw,100%);max-width:86%;grid-template-columns:minmax(0,1fr);grid-template-areas:"kick" "title" "copy" "start";justify-items:center;text-align:center;padding:2.4cqw 4cqw;border:max(3px,.5cqw) solid #fff;border-radius:max(3px,.6cqw);box-shadow:0 0 0 max(3px,.5cqw) #000}

.wh-page #ticket[data-mode=paused] #copy{padding:0;border:0;color:#e9e3d1;font:600 max(10px,1.75cqw)/1.3 'Chakra Petch',Chakra,sans-serif}
.wh-page #ticket[data-mode=paused] #start{justify-self:center}
@container stage (max-width:560px){
 .wh-page .ticket{gap:5px 10px;padding:7px 12px;--opp-size:23cqw}.wh-page .ticket figcaption{display:none}.wh-page .ticket figure{gap:3px}
 .wh-page #ticket:is([data-mode=won],[data-mode=lost]) #fighter-quote{display:none}
 .wh-page #ticket:is([data-mode=won],[data-mode=lost]){grid-template-areas:"kick kick kick" "opp title ethen" "opp copy ethen" "start start start"}
}
@media(prefers-reduced-motion:reduce){button:active,.wh-page .controls button:active:enabled{transform:none}}

html[data-reduced-motion=true] .wh-page button:active,html[data-reduced-motion=true] .wh-page .controls button:active:enabled{transform:none}
@container stage (max-width:340px){
 .wh-page #ticket[data-mode=ready]{--opp-size:21cqw}
 .wh-page .ticket{gap:4px 8px;padding:5px 10px}.wh-page #ticket[data-mode=break]{--ethen-size:15cqw}
 .wh-page #fighter-quote{padding:3px 6px;line-height:1.25}.wh-page #ticket:not([data-mode=ready]) #copy{padding:4px 6px;line-height:1.3}
 .wh-page #ticket[data-mode=ready] .card-stats>div:is(:nth-child(2),:nth-child(3)){display:none}
}

/* Fighter identity: one accent per challenger (set from card-data) ties the intro card, HUD and circuit together. */
body.wh-page #portrait{box-shadow:0 0 0 max(2px,.4cqw) #000,0 0 0 max(3px,.75cqw) var(--fighter,#ffd23a)}
body.wh-page .ticket .opp-frame figcaption{padding:.25em .7em;background:var(--fighter,#ffd23a);color:#000;box-shadow:0 0 0 2px #000}
body.wh-page .ticket .ethen-frame figcaption{padding:.25em .7em;background:#e0262b;color:#fff;box-shadow:0 0 0 2px #000}
body.wh-page #ethen-portrait{box-shadow:0 0 0 max(2px,.3cqw) #000,0 0 0 max(3px,.6cqw) #e0262b}
body.wh-page .hud-bar>label:first-child span::before{content:'';display:inline-block;width:.7em;height:.7em;margin-right:.4em;vertical-align:baseline;background:#e0262b;box-shadow:0 0 0 1px #000}
body.wh-page .hud-bar.enemy>label:first-child span::before{background:var(--fighter,#ffd23a)}
body.wh-page #roster li{padding-right:46px;border-left:4px solid var(--fighter,#2c2c31)}
body.wh-page #roster li .ladder-face{position:absolute;right:6px;top:50%;width:32px;height:32px;transform:translateY(-50%);image-rendering:pixelated;background:#1c2131;box-shadow:0 0 0 2px #000,0 0 0 3px var(--fighter,#555)}
body.wh-page #roster li.ahead .ladder-face{filter:grayscale(.85) brightness(.7)}
body.wh-page #roster li.current .ladder-name{color:var(--fighter,#fff)}
@media(min-width:601px) and (max-width:1279px){body.wh-page #roster li{padding-right:8px}body.wh-page #roster li .ladder-face{display:none}}
/* Give Chad's right-hand portrait more room; retain the opponent's original sizing. */
body.wh-page #ticket[data-mode=ready]{--ethen-size:16cqw}
@media(min-width:801px) and (min-height:550px) and (max-height:800px){
 body.wh-page #ticket[data-mode=ready]{--opp-size:min(26cqw,max(88px,calc(100dvh - 650px)));--ethen-size:min(16cqw,max(80px,calc(100dvh - 660px)));row-gap:3px;padding-top:1.2cqw;padding-bottom:1.2cqw}
 body.wh-page #ticket[data-mode=ready] #fighter-quote{display:none}
 body.wh-page #ticket[data-mode=ready] #title{font-size:max(16px,4.4cqw);line-height:1}
 body.wh-page #ticket[data-mode=ready] .card-stats{row-gap:.3cqw}
 body.wh-page #ticket[data-mode=ready] .card-stats>div:is(:nth-child(2),:nth-child(3)){display:none}
}
@container stage (max-width:560px){body.wh-page #ticket[data-mode=ready] #fighter-quote{display:none}}
@container stage (max-width:340px){body.wh-page #ticket[data-mode=ready] :is(.card-venue,.card-stats>div:nth-child(5)){display:none}body.wh-page #ticket[data-mode=ready]{row-gap:3px}body.wh-page #ticket[data-mode=ready] #copy{line-height:1.2}}

/* Fight scorecard: the numbers stay legible, with room to breathe before the next bell. */
body.wh-page .fight-summary{grid-area:summary;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2cqw;padding:1.1cqw 0;border-top:2px solid #e2bd3b;border-bottom:2px solid #e2bd3b;background:#0c0b07;font:400 max(8px,1.15cqw)/1.2 var(--font-pixel)}
body.wh-page .fight-summary div{display:grid;gap:.8cqw;align-content:start;justify-items:center;text-align:center;min-width:0}
body.wh-page .fight-summary dt{color:#cbc5b4;white-space:nowrap}
body.wh-page .fight-summary dd{margin:0;color:#fff1a8;font:700 max(12px,2.25cqw)/1 var(--font-pixel);letter-spacing:.04em;font-variant-numeric:tabular-nums}
body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]){--opp-size:16cqw;--ethen-size:16cqw;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"kick kick kick" "opp title ethen" "opp venue ethen" "opp summary ethen" "copy copy copy" "quote quote quote" "start start start";row-gap:1.3cqw;padding-block:3cqw}
body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #title{align-self:center;font-size:max(18px,5.2cqw);line-height:1}
body.wh-page #ticket:is([data-mode=won],[data-mode=break]) #card-venue{display:block;color:#ffd23a;font-size:max(8px,1.25cqw);line-height:1.3}
body.wh-page #ticket[data-mode=lost] .card-venue{display:none}
body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) figure{align-self:center}
body.wh-page #ticket[data-mode=break] .opp-frame{display:grid}
body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) .ethen-frame::before{content:none}
body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #copy{padding:.8cqw 0;border:0;border-radius:0;max-width:78cqw;justify-self:center;text-align:center;font-size:max(9px,1.45cqw);line-height:1.4}
body.wh-page #ticket:is([data-mode=won],[data-mode=lost]) #fighter-quote{display:none}
body.wh-page #ticket[data-mode=break] #fighter-quote{max-width:78cqw;justify-self:center;font-size:max(8px,1.25cqw);line-height:1.35}
body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #start{justify-self:center;translate:none;margin-top:clamp(8px,1.8cqw,18px);min-height:max(28px,4.7cqw)}
@container stage (max-width:560px){
 body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]){row-gap:5px;padding:9px 12px;--opp-size:15cqw;--ethen-size:16cqw}
 body.wh-page .fight-summary{gap:3px;padding:5px 0}
 body.wh-page .fight-summary dt{font-size:7px;letter-spacing:-.03em}
 body.wh-page .fight-summary dd{font-size:max(11px,2.4cqw)}
 body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #copy{max-width:100%;padding:0;line-height:1.3}
 body.wh-page #ticket[data-mode=break] #fighter-quote{display:none}
 body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #start{margin-top:8px}
}
@container stage (max-width:340px){
 body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]){grid-template-areas:"kick kick kick" "opp title ethen" "opp summary ethen" "start start start";row-gap:4px;padding:6px 10px;--opp-size:14cqw;--ethen-size:15cqw}
 body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) :is(#copy,#card-venue){display:none}
 body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #title{font-size:16px}
 body.wh-page .fight-summary{padding:4px 0;border-width:1px}
 body.wh-page .fight-summary dt{font-size:6px;letter-spacing:0}
 body.wh-page #ticket:is([data-mode=won],[data-mode=lost],[data-mode=break]) #start{margin-top:7px;min-height:26px;font-size:9px;padding-inline:8px}
}