/* Approved source: Branding UI UX/Layouts/Preview/pitches/index.html. Visual snapshot; no draft screens are mounted. */

/* Layout: the phone menu screen is the star of the page; the look's rules, HUD sample and palette sit beside it. */
:root{
  --board:#d5e9f8; --ink:#0b1f3f; --paper:#ffffff; --muted:#3c5677;
  --sky:#4aa3f5; --gold:#ffd23a; --gold-dark:#e09a12; --gold-light:#fff3b0;
  --ketchup:#e8322a; --grass:#5cc33b; --grass-dark:#4aad2f; --dirt:#c9772c; --empty:#24395b;
  --f-display:'Bungee',Impact,sans-serif; --f-pixel:'Silkscreen',ui-monospace,monospace; --f-body:'Rubik',system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--board);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px 64px}
.wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}
@media (max-width:760px){.wrap{grid-template-columns:1fr;justify-items:center}}

/* ---------- phone menu screen ---------- */
.phone{--g:30%;width:320px;max-width:100%;aspect-ratio:9/18;border-radius:38px;border:7px solid var(--ink);box-shadow:8px 8px 0 var(--ink);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  background:var(--sky) url("/Branding%20UI%20UX/Layouts/Preview/pitches/sky-tile.png") 0 0/64px 64px;image-rendering:pixelated}
.logo{width:86%;margin-top:60px;position:relative;z-index:2;filter:drop-shadow(0 5px 0 rgba(11,31,63,.35))}
.stands{position:absolute;left:50%;width:104%;max-width:none;translate:-50% 0;bottom:calc(var(--g) - 6px);z-index:1;image-rendering:pixelated}
.ground{position:absolute;bottom:0;left:0;right:0;height:var(--g);z-index:1}
.ground:before{content:"";position:absolute;left:0;right:0;top:-12px;height:58px;background:url("/Branding%20UI%20UX/Layouts/Preview/pitches/grass-tile.png") 0 0/64px 56px repeat-x;image-rendering:pixelated}
.ground:after{content:"";position:absolute;inset:42px 0 0;background:var(--grass) url("/Branding%20UI%20UX/Layouts/Preview/pitches/grass-fill.png") 0 0/64px 32px;image-rendering:pixelated}

.sticker{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(5px 6px 0 rgba(11,31,63,.9))}
.squad{position:absolute;bottom:calc(var(--g) - 28px);left:0;right:0;z-index:3;display:flex;justify-content:center;align-items:flex-end}
.walker{background-size:400% 400%;background-repeat:no-repeat;image-rendering:pixelated;animation:march .56s steps(1,end) infinite}
.w-burger{width:44%;aspect-ratio:1;background-image:url("/Categories/Food/Assets/Preview/burger-walk.png");z-index:2}
.w-donut{width:33%;aspect-ratio:1;background-image:url("/Categories/Food/Assets/Preview/donut-walk.png");margin-right:-9%;margin-bottom:5%;animation-delay:-.14s}
.w-sushi{width:33%;aspect-ratio:1;background-image:url("/Categories/Food/Assets/Preview/sushi-walk.png");margin-left:-9%;margin-bottom:5%;animation-delay:-.28s}
@keyframes march{0%{background-position:0 0}25%{background-position:33.333% 0}50%{background-position:66.667% 0}75%{background-position:100% 0}}

.pxbtn{font:24px/1 var(--f-display);color:var(--ink);background:var(--gold);padding:14px 26px;border:0;cursor:pointer;
  clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  box-shadow:inset 0 -8px 0 var(--gold-dark),inset 0 4px 0 var(--gold-light);outline:4px solid var(--ink)}
.pxbtn:active{box-shadow:inset 0 -3px 0 var(--gold-dark),inset 0 4px 0 var(--gold-light);translate:0 3px}
.pxbtn:focus-visible{outline-color:var(--ketchup)}
/* Let's Brawl: gold pixel button on a navy pixel base. The base doubles as outline and 3D depth,
   since clip-path would cut off a normal outline or shadow. */
.play-wrap{--clip:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  position:absolute;bottom:calc(12% - 4px);left:17%;right:17%;z-index:3;rotate:-2deg;animation:bob .9s steps(1,end) infinite}
.play-wrap:before{content:"";position:absolute;inset:-5px -5px -12px;background:var(--ink);clip-path:var(--clip)}
@keyframes bob{50%{translate:0 -4px}}
.play{position:relative;display:block;width:100%;font:24px/1 var(--f-display);letter-spacing:.5px;color:var(--ink);background:var(--gold);padding:16px 0 18px;white-space:nowrap;border:0;cursor:pointer;overflow:hidden;
  clip-path:var(--clip);box-shadow:inset 0 -8px 0 var(--gold-dark),inset 0 5px 0 var(--gold-light);transition:translate .06s steps(1)}
.play:after{content:"";position:absolute;top:0;bottom:0;width:22px;left:-40px;background:var(--gold-light);box-shadow:14px 0 0 -4px var(--gold-light);transform:skewX(-20deg);animation:shine 2.4s steps(14,end) infinite}
@keyframes shine{0%,55%{left:-40px}100%{left:110%}}
.play:hover{background:#ffdc5c}
.play:active{translate:0 7px;box-shadow:inset 0 -3px 0 var(--gold-dark),inset 0 5px 0 var(--gold-light)}
.play:focus-visible{outline:none;background:#ffe57a}
.play-wrap:has(.play:active){animation-play-state:paused}
.arrow{position:absolute;top:50%;width:16px;height:24px;margin-top:-10px;background:#fff;animation:blink .9s steps(1,end) infinite;filter:drop-shadow(3px 3px 0 var(--ink))}
.arrow.l{left:-32px;clip-path:polygon(0 0,40% 0,40% 20%,70% 20%,70% 40%,100% 40%,100% 60%,70% 60%,70% 80%,40% 80%,40% 100%,0 100%)}
.arrow.r{right:-32px;clip-path:polygon(100% 0,60% 0,60% 20%,30% 20%,30% 40%,0 40%,0 60%,30% 60%,30% 80%,60% 80%,60% 100%,100% 100%)}
@keyframes blink{50%{opacity:0}}

/* Fill the sky: bigger brawlers (ob) plus a player bar and bigger logo (oc). */
.ob{--g:30%}
.ob .w-burger{width:66%}
.ob .w-donut,.ob .w-sushi{width:48%}
.ob .squad{bottom:calc(var(--g) - 30px)}
.ob .w-donut,.ob .w-sushi{margin-bottom:-1%}
.ob .stands{width:130%}
.dirt{position:absolute;left:0;right:0;bottom:0;height:12%;z-index:1;background:var(--dirt) url("/Branding%20UI%20UX/Layouts/Preview/pitches/dirt-tile.png") 0 0/64px 64px;image-rendering:pixelated}
.oc .logo{margin-top:72px;width:92%}
.topbar{position:absolute;top:22px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:3}
/* Chips: navy pixel outline via drop-shadows on the wrapper, since clip-path would cut a real border. */
.chip{display:flex;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 4px 0 var(--ink))}
.chip b{font:700 14px/1 var(--f-pixel);color:var(--ink);background:#fff;padding:8px 11px 9px;display:flex;align-items:center;gap:7px;box-shadow:inset 0 -4px 0 #a4e8ff;
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.chip i{width:14px;height:14px;background:var(--gold);box-shadow:inset 0 -3px 0 var(--gold-dark);clip-path:polygon(25% 0,75% 0,75% 15%,100% 15%,100% 85%,75% 85%,75% 100%,25% 100%,25% 85%,0 85%,0 15%,25% 15%)}
.chip.lv i{background:var(--ketchup);box-shadow:inset 0 -3px 0 #a71c16}

/* ---------- side panel ---------- */
.side{display:flex;flex-direction:column;gap:24px;min-width:0}
h1{font:clamp(30px,5vw,44px)/1 var(--f-display);margin:0}
.lede{margin:8px 0 0;color:var(--muted);font-weight:600;max-width:52ch}
h2{font:800 18px/1.2 var(--f-body);margin:0 0 10px}
ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.hud{border:4px solid var(--ink);border-radius:16px;padding:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--sky) url("/Branding%20UI%20UX/Layouts/Preview/pitches/sky-tile.png") 0 0/48px 48px;image-rendering:pixelated}
.bar{display:flex;gap:3px;transform:rotate(-3deg)}
.bar i{width:14px;height:18px;background:var(--ketchup);border:2px solid var(--ink)}
.bar i.off{background:var(--empty)}
.timer{font:700 24px var(--f-pixel);background:#fff;color:var(--ink);padding:2px 12px;outline:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(2deg)}
.hud .pxbtn{font-size:16px;padding:12px 18px;transform:rotate(6deg)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches div{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 11px var(--f-pixel);color:var(--muted)}
.swatches span{width:48px;height:48px;border-radius:10px;border:3px solid var(--ink)}
.type{display:flex;flex-direction:column;gap:6px}
.type .d{font:26px/1 var(--f-display)}
.type .p{font:700 18px var(--f-pixel)}

/* ---------- finding a match ---------- */
.phones{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.wrap{max-width:1760px;grid-template-columns:1fr;justify-items:center}
.outline{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink))}
.q-head{margin-top:54px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.q-title{font:30px/1.05 var(--f-display);color:#fff;text-align:center;rotate:-2deg;
  text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),0 3px 0 var(--ink),3px 6px 0 var(--ink),-3px 6px 0 var(--ink),0 7px 0 var(--ink)}
.q-tag b{display:block;font:700 11px/1 var(--f-pixel);color:var(--ink);background:var(--gold);padding:6px 10px;rotate:2deg;box-shadow:inset 0 -3px 0 var(--gold-dark);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.seats{margin-top:20px;width:84%;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 12px;z-index:2}
.seat{position:relative;aspect-ratio:1}
.seat b{display:grid;place-items:center;width:100%;height:100%;background:#fff;box-shadow:inset 0 -5px 0 #a4e8ff;
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.seat img{width:80%;height:80%;object-fit:contain;image-rendering:pixelated;margin-top:-3px}
.seat.you b{background:var(--gold);box-shadow:inset 0 -5px 0 var(--gold-dark)}
.seat.you:after{content:"YOU";position:absolute;left:50%;bottom:-8px;translate:-50% 0;font:700 9px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:3px 5px}
.seat.new{animation:pop .5s steps(3,end) both}
@keyframes pop{0%{scale:.4}60%{scale:1.15}100%{scale:1}}
.seat.empty b{background:#2f86d8;box-shadow:inset 0 5px 0 #1f63a8;font:24px/1 var(--f-display);color:#a9d8ff}
.seat.empty b:before{content:"?";animation:blink 1s steps(1,end) infinite}
.seat.empty + .seat.empty b:before{animation-delay:-.5s}
.q-count{margin-top:16px;z-index:2;font:16px/1 var(--f-display);color:#fff;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),0 4px 0 var(--ink)}
.q-count span{font-size:34px}
/* Layout from the owner's drag session. */
.queue .q-head{margin-top:26px;gap:20px}
.queue .seats{margin-top:22px}
.queue .q-count{margin-top:18px}
.queue .squad{bottom:calc(var(--g) - 72px)}
.queue .w-burger{width:56%}
.queue .stands{width:110%}
.queue .play-wrap{left:24%;right:24%;bottom:calc(5% - 4px)}
.queue .play{font-size:20px;padding:13px 0 15px;background:#fff;box-shadow:inset 0 -8px 0 #a4e8ff,inset 0 5px 0 #fff}
.queue .play:after{background:#e6f9fd;box-shadow:14px 0 0 -4px #e6f9fd}
.queue .play:hover{background:#f4fcff}
.queue .play:active{box-shadow:inset 0 -3px 0 #a4e8ff,inset 0 5px 0 #fff}
/* ---------- pick a game: soonest lobby or a category ---------- */
.pick{--g:21%}
.pick .stands{width:110%}
.pick .q-head{margin-top:34px}
.lobby{position:relative;z-index:2;width:84%;margin-top:22px;rotate:-1.5deg;cursor:pointer;border:0;padding:0;background:none;text-align:left}
.lobby b{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;padding:14px 14px 18px;background:var(--gold);box-shadow:inset 0 -7px 0 var(--gold-dark),inset 0 5px 0 var(--gold-light);clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.lobby:hover b{background:#ffdc5c}
.lobby:active{translate:0 4px}
.lobby .l-name{font:22px/1 var(--f-display);color:var(--ink)}
.lobby .l-sub{grid-column:1;font:700 10px/1.2 var(--f-pixel);color:var(--ink)}
.lobby .l-time{grid-row:1/3;grid-column:2;font:26px/1 var(--f-display);color:#fff;background:var(--ink);padding:9px 8px 7px;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.or{z-index:2;margin-top:20px;font:700 14px/1 var(--f-pixel);color:#fff;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),0 2px 0 var(--ink),0 4px 0 var(--ink)}
.cats{z-index:2;width:84%;margin-top:12px;display:flex;flex-direction:column;gap:20px}
.cat{position:relative;display:block;cursor:pointer;border:0;padding:0;background:none;text-align:left}
.cat b{display:flex;align-items:center;gap:10px;padding:8px 12px 11px 8px;background:#fff;box-shadow:inset 0 -5px 0 #a4e8ff;clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.cat .faces{display:flex}
.cat .faces img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.cat .faces img+img{margin-left:-8px}
.cat .c-name{font:16px/1 var(--f-display);color:var(--ink)}
.cat .c-sub{display:block;margin-top:4px;font:700 9px/1 var(--f-pixel);color:var(--muted)}
.cat .c-go{margin-left:auto;font:700 10px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:5px 6px}
.cat.locked{cursor:default}
.cat.locked b{background:#2f86d8;box-shadow:inset 0 5px 0 #1f63a8}
.cat.locked .c-name{color:#d4ecff}
.cat.locked .c-sub{color:#a9d8ff}
.lock{position:relative;flex:none;width:20px;height:15px;margin:9px 9px 2px 7px;background:#a9d8ff}
.lock:before{content:"";position:absolute;left:4px;top:-9px;width:12px;height:9px;box-sizing:border-box;border:3px solid #a9d8ff;border-bottom:0}
.lock:after{content:"";position:absolute;left:8px;top:5px;width:4px;height:5px;background:#2f86d8}
.pick .play-wrap{left:23%;right:23%;bottom:calc(5% - 4px)}
.pick .play{font-size:22px;padding:14px 0 17px;background:#fff;box-shadow:inset 0 -6px 0 #a4e8ff,inset 0 4px 0 #fff}
.pick .play:after{display:none}
/* ---------- drag mode for the finding-brawlers screen ---------- */
.phone [data-drag]{touch-action:none}
.phone.dragging [data-drag]{cursor:grab;outline:2px dashed rgba(255,255,255,.8);outline-offset:3px}
.phone.dragging [data-drag]:active{cursor:grabbing}
.phone.dragging [data-drag] *{pointer-events:none}
.dragbar{display:flex;gap:10px;justify-content:center;margin-top:14px}
.dragbar button{font:700 12px/1 var(--f-pixel);color:#fff;background:var(--ink);border:0;padding:10px 14px;cursor:pointer}
.dragbar button.on{background:var(--ketchup)}
/* Finding Brawlers title styled like the game logo: slanted Bungee, blue then icy-white gradient, navy outline and drop. */
.logo-type{z-index:2;display:flex;flex-direction:column;align-items:center;line-height:.95;rotate:-3deg;
  filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 6px 0 var(--ink))}
.logo-type span{font-family:var(--f-display);line-height:1.15;padding:0 .12em;margin:-.06em 0;transform:skewX(-10deg);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-type .t1{font-size:38px;background-image:linear-gradient(#409dff,#247dfd 55%,#1264e7)}
.logo-type .t2{font-size:42px;background-image:linear-gradient(#fff,#e6f9fd 55%,#c7eeff)}
.pick .logo-type .t1{font-size:46px}
.pick .logo-type .t2{font-size:54px}
.pick .lobby{width:76%;margin-top:18px}
.pick .lobby b{padding:11px 12px 15px}
.pick .lobby .l-name{font-size:18px}
.pick .lobby .l-time{font-size:21px;padding:8px 7px 6px}
.pick .lobby .l-sub{font-size:9px}
/* ---------- in a match ---------- */
.match{--g:100%;background:var(--grass) url("/Branding%20UI%20UX/Layouts/Preview/pitches/grass-fill.png") 0 0/64px 32px}
.match .stands{top:-14px;bottom:auto;width:130%}
.hudbar{position:absolute;top:18px;left:14px;right:14px;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.hp{display:flex;align-items:center;gap:6px}
.hp img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.hp .bar b{display:flex;gap:2px;padding:4px;background:var(--ink)}
.hp .bar i{width:5px;height:12px;background:var(--ketchup);box-shadow:inset 0 -3px 0 #a71c16}
.hp .bar i.off{background:var(--empty);box-shadow:none}
.hp .num{display:block;margin-top:3px;font:700 9px/1 var(--f-pixel);color:#fff;text-shadow:0 2px 0 var(--ink)}
.timer b{display:block;font:20px/1 var(--f-display);color:var(--ink);background:#fff;padding:7px 8px 9px;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.timer.hurry b{color:var(--ketchup);animation:blink 1s steps(1,end) infinite}
.left b{display:block;font:700 9px/1 var(--f-pixel);color:var(--ink);background:var(--gold);padding:6px 7px 8px;white-space:nowrap;box-shadow:inset 0 -3px 0 var(--gold-dark);clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.left span{font:14px/1 var(--f-display)}
/* Arena: dirt plate inside a golden ring, fighters scattered on it. */
.arena{position:absolute;left:5%;width:90%;top:21%;aspect-ratio:1;z-index:2;border-radius:50%;background:var(--dirt) url("/Branding%20UI%20UX/Layouts/Preview/pitches/dirt-tile.png") 0 0/64px 64px;image-rendering:pixelated;
  box-shadow:0 0 0 5px var(--ink),0 0 0 11px var(--gold),0 0 0 15px var(--ink),0 9px 0 15px var(--ink)}
.arena:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 5px var(--gold-dark)}
.fighter{position:absolute;width:21%;translate:-50% -100%}
.fighter img{width:100%;image-rendering:pixelated}
.fighter .mini{display:block;height:5px;margin:0 12% 4px;background:var(--empty);outline:2px solid var(--ink)}
.fighter .mini i{display:block;height:100%;background:var(--ketchup)}
.fighter.me{width:26%}
.fighter.me .mini i{background:#62e04a}
.fighter.me:before{content:"YOU";position:absolute;left:50%;top:-16px;translate:-50% 0;font:700 9px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:3px 5px}
.fighter.hit img{animation:shake .3s steps(2,end) infinite}
@keyframes shake{50%{translate:3px 0}}
.pow-cheese{position:absolute;width:9%;aspect-ratio:1;background:var(--gold);box-shadow:inset 0 -3px 0 var(--gold-dark);clip-path:polygon(0 0,100% 30%,40% 100%);outline:0;filter:drop-shadow(2px 2px 0 var(--ink))}
/* Touch controls */
.stick{position:absolute;left:7%;bottom:6%;width:96px;aspect-ratio:1;z-index:4;background:rgba(11,31,63,.45);clip-path:polygon(30% 0,70% 0,70% 6%,85% 6%,85% 15%,94% 15%,94% 30%,100% 30%,100% 70%,94% 70%,94% 85%,85% 85%,85% 94%,70% 94%,70% 100%,30% 100%,30% 94%,15% 94%,15% 85%,6% 85%,6% 70%,0 70%,0 30%,6% 30%,6% 15%,15% 15%,15% 6%,30% 6%);display:grid;place-items:center}
.stick i{width:44px;aspect-ratio:1;background:#fff;box-shadow:inset 0 -6px 0 #a4e8ff;clip-path:polygon(30% 0,70% 0,70% 6%,85% 6%,85% 15%,94% 15%,94% 30%,100% 30%,100% 70%,94% 70%,94% 85%,85% 85%,85% 94%,70% 94%,70% 100%,30% 100%,30% 94%,15% 94%,15% 85%,6% 85%,6% 70%,0 70%,0 30%,6% 30%,6% 15%,15% 15%,15% 6%,30% 6%);translate:12px -10px}
.acts{position:absolute;right:6%;bottom:5%;z-index:4;display:flex;align-items:flex-end;gap:10px}
.act{border:0;padding:0;background:none;cursor:pointer}
.act b{display:grid;place-items:center;aspect-ratio:1;font:15px/1 var(--f-display);color:var(--ink);clip-path:polygon(30% 0,70% 0,70% 6%,85% 6%,85% 15%,94% 15%,94% 30%,100% 30%,100% 70%,94% 70%,94% 85%,85% 85%,85% 94%,70% 94%,70% 100%,30% 100%,30% 94%,15% 94%,15% 85%,6% 85%,6% 70%,0 70%,0 30%,6% 30%,6% 15%,15% 15%,15% 6%,30% 6%)}
.act.punch b{width:92px;background:var(--gold);box-shadow:inset 0 -8px 0 var(--gold-dark),inset 0 5px 0 var(--gold-light)}
.act.special{margin-bottom:58px}
.act.special b{position:relative;width:70px;font-size:10px;color:#fff;background:var(--ketchup);box-shadow:inset 0 -6px 0 #a71c16,inset 0 4px 0 #ff7a6b;text-align:center;line-height:1.1}
.act.special b:after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(11,31,63,.55) 0 35%,transparent 35%)}
.act:active{translate:0 3px}

/* ---------- results: three options side by side ---------- */
/* Shared title lockup copied from the logo: navy outline with a down-left 3D drop, a rim line on each face, and a gold ribbon subline. */
.hw{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;rotate:-4deg;margin-top:44px}
.hw-l{position:relative;display:block;font-family:var(--f-display);line-height:1;padding:0 .14em;transform:skewX(-11deg);color:transparent;letter-spacing:-1px}
.hw-l:before,.hw-l:after{content:attr(data-t)}
.hw-l:before,.hw-l:after,.hw-l i{position:absolute;inset:0;padding:inherit;font-style:normal}
.hw-l:before{color:var(--ink);-webkit-text-stroke:12px var(--ink);text-shadow:-3px 5px 0 var(--ink),-6px 8px 0 var(--ink)}
.hw-l:before{z-index:0}.hw-l:after{z-index:1}
.hw-l i{z-index:2;-webkit-background-clip:text;background-clip:text;color:transparent}
.hw-1{font-size:56px}
.hw-1:after{color:#8fd0ff;translate:-2px -2px}
.hw-1 i{background-image:linear-gradient(#409dff,#247dfd 50%,#1264e7)}
.hw-2{font-size:58px;margin-top:-8px}
.hw-2:after{color:#6fb6e6;translate:2px 3px}
.hw-2 i{background-image:linear-gradient(#fff,#e6f9fd 60%,#c7eeff)}
.hw-rib{margin-top:8px;rotate:1deg}
.hw-rib b{display:block;font:15px/1 var(--f-display);color:var(--ink);background:var(--gold);padding:7px 16px 9px;transform:skewX(-11deg);box-shadow:inset 0 -5px 0 var(--gold-dark),inset 0 3px 0 var(--gold-light);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.res{--g:40%}
.res .stands{width:130%}
.res .home{position:absolute;left:50%;translate:-50% 0;bottom:2.4%;z-index:3;font:700 11px/1 var(--f-pixel);color:#fff;background:var(--ink);border:0;padding:7px 10px;cursor:pointer}
.res .play-wrap{left:17%;right:17%;bottom:calc(12% - 4px)}
.opt{display:flex;flex-direction:column;align-items:center;gap:14px}
.opt-cap{font:800 15px/1.3 var(--f-body);text-align:center;max-width:300px}
.opt-cap span{display:block;font-weight:400;color:var(--muted)}

/* A: scorecard. Hero burger with the trophy pan on the grass, all numbers in one white card. */
.ra .squad{bottom:calc(var(--g) - 44px)}
.ra .w-burger{width:58%}
.card{position:absolute;left:7%;right:7%;bottom:calc(12% + 74px);z-index:4}
.card b{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;box-shadow:inset 0 -5px 0 #a4e8ff;padding:10px 0 13px;
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.cell{display:flex;flex-direction:column;align-items:center;gap:5px}
.cell+.cell{box-shadow:-2px 0 0 #d6ebf8}
.cell strong{font:24px/1 var(--f-display);color:var(--ink)}
.cell strong small{font-size:13px}
.cell span{font:700 9px/1 var(--f-pixel);color:var(--muted)}
.cell.gold strong{color:var(--gold-dark)}

/* B: big screen. The stadium's scoreboard shows your numbers. */
.rb{--g:34%}
.rb .hw{margin-top:32px}
.jumbo{position:absolute;z-index:3;left:9%;right:9%;top:35%}
.jumbo:before,.jumbo:after{content:"";position:absolute;top:100%;width:10px;height:30px;background:var(--ink);left:22%}
.jumbo:after{left:auto;right:22%}
.jumbo>b{display:block;background:var(--ink);padding:6px;clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.screen{display:grid;grid-template-columns:repeat(3,1fr);padding:8px 0 10px;background:#123063 repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px)}
.screen .cell+.cell{box-shadow:-2px 0 0 #2a4c86}
.screen .cell strong{color:var(--gold);font-size:26px}
.screen .cell span{color:#a9d8ff}
.screen-top{display:block;font:700 9px/1 var(--f-pixel);color:#fff;text-align:center;padding:2px 0 6px;letter-spacing:1px}
.rb .squad{bottom:calc(var(--g) - 60px)}
.rb .w-burger{width:52%}

/* C: title belt. You win the Heavyweight belt; its plates hold the numbers. */
.rc{--g:42%}
.rc .squad{bottom:calc(var(--g) - 6px)}
.rc .w-burger{width:58%}
.belt{position:absolute;z-index:4;left:-4%;right:-4%;bottom:calc(12% + 64px);height:120px;rotate:-3deg;display:flex;align-items:center;justify-content:center;gap:10px}
.belt:before{content:"";position:absolute;left:0;right:0;top:50%;height:40px;translate:0 -50%;background:var(--strap,#3a1d0c);border-block:4px solid var(--ink);
  background-image:repeating-linear-gradient(90deg,var(--stitch,var(--gold)) 0 6px,transparent 6px 12px),repeating-linear-gradient(90deg,var(--stitch,var(--gold)) 0 6px,transparent 6px 12px);background-size:100% 2px,100% 2px;background-position:0 5px,0 calc(100% - 5px);background-repeat:no-repeat}
.plate{position:relative;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink))}
.plate b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--gold);box-shadow:inset 0 -6px 0 var(--gold-dark),inset 0 4px 0 var(--gold-light),inset 0 0 0 9px #ffe680;
  clip-path:polygon(0 10px,10px 10px,10px 0,calc(100% - 10px) 0,calc(100% - 10px) 10px,100% 10px,100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 10px),0 calc(100% - 10px))}
.plate.p-side b{width:66px;height:62px}
.plate.main b{width:116px;height:108px;gap:2px}
.plate strong{font:22px/1 var(--f-display);color:var(--ink)}
.plate.main strong{font-size:30px}
.plate span{font:700 9px/1 var(--f-pixel);color:#7a4a06}
.rc .back{position:absolute;z-index:3;top:16px;left:14px}
.rc .back b{display:block;font:700 10px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:7px 9px}
/* C variations */
.rc2 .belt{bottom:calc(12% + 84px);height:170px}
.plate.big b{width:136px;height:164px;gap:2px}
.plate.big img{width:76px;margin-bottom:2px;image-rendering:pixelated}
.rc3 .belt{gap:0;padding:0 11%}
.strap-txt{position:relative;z-index:1;flex:1;text-align:center;font:700 11px/1 var(--f-pixel);color:var(--gold);white-space:nowrap}
.plate.wide b{width:128px;height:84px}
.rc4 .belt{bottom:auto;top:29%;scale:.85}
.rc4 .squad{bottom:calc(var(--g) - 96px)}
.rc4 .w-burger{width:52%}
.r4b .belt{gap:0;padding:0 11%}
.r4c .hw{margin-top:54px}
.r4c .belt{top:27%;scale:1}
.r4c .plate.main b{width:130px}
.r4d .belt{top:36%;rotate:-7deg;animation:hoist .8s steps(1,end) infinite}
@keyframes hoist{50%{translate:0 -8px}}
.k-blue .belt{--strap:#247dfd}
.k-red .belt{--strap:var(--ketchup)}
.r4d .squad{bottom:calc(var(--g) - 116px)}
.k-navy .belt{--strap:#1a3566}
.k-ice .belt{--strap:#e6f9fd;--stitch:#247dfd}
.k-ice .belt .strap-txt{color:var(--ink)}
/* Pixel title: JS redraws HEAVY/WEIGHT! on a small canvas and scales it up, so the edges step like the logo. */
.hw.px{rotate:0deg;margin-top:26px}
.hw.px .hw-l{display:none}
.hw-px{display:block;image-rendering:pixelated}
.hw.px .hw-rib{margin-top:-10px;rotate:-3deg}
/* Ribbon glow, pulsing in steps. */
.hw-rib.outline{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 0 7px rgba(255,226,90,.95)) drop-shadow(0 0 14px rgba(255,210,58,.7));animation:ribglow 1.2s steps(1,end) infinite}
@keyframes ribglow{50%{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 0 10px rgba(255,236,120,1)) drop-shadow(0 0 22px rgba(255,210,58,.85))}}
/* Falling gold pixel stars, like the animated logo. */
.stars{position:absolute;inset:0 0 40%;z-index:2;pointer-events:none;overflow:hidden}
.stars i{position:absolute;top:-24px;background-size:100% 100%;image-rendering:pixelated;animation:starfall linear infinite}
@keyframes starfall{to{translate:0 420px;rotate:360deg}}
/* White glow behind the pixel title, pulsing in steps like the ribbon. */
.hw-px{filter:drop-shadow(0 0 6px rgba(255,255,255,.85)) drop-shadow(0 0 16px rgba(255,255,255,.55));animation:titleglow 1.2s steps(1,end) infinite}
@keyframes titleglow{50%{filter:drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 24px rgba(255,255,255,.75))}}
/* Pixel belt: strap gets a light top row, dark bottom rows, dither and gold studs; plates get dither, corner rivets and a blinking sparkle. */
.k-red .belt:before{background-color:var(--ketchup);background-image:
  repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px),repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px),
  linear-gradient(90deg,var(--gold) 0 6px,transparent 6px),
  linear-gradient(#ff7a6b,#ff7a6b),linear-gradient(#a71c16,#a71c16),
  repeating-conic-gradient(rgba(11,31,63,.16) 0 25%,transparent 0 50%);
  background-size:100% 2px,100% 2px,26px 6px,100% 3px,100% 5px,6px 6px;
  background-position:0 6px,0 calc(100% - 8px),8px 50%,0 0,0 100%,0 0;
  background-repeat:no-repeat,no-repeat,repeat-x,no-repeat,no-repeat,repeat}
.belt .plate b{position:relative;background-image:
  linear-gradient(var(--gold-dark),var(--gold-dark)),linear-gradient(var(--gold-dark),var(--gold-dark)),linear-gradient(var(--gold-dark),var(--gold-dark)),linear-gradient(var(--gold-dark),var(--gold-dark));
  background-size:5px 5px,5px 5px,5px 5px,5px 5px;
  background-position:13px 13px,calc(100% - 13px) 13px,13px calc(100% - 15px),calc(100% - 13px) calc(100% - 15px);
  background-repeat:no-repeat}
.belt .plate b:after{content:"";position:absolute;top:6px;right:16px;width:9px;height:9px;background:#fff;
  clip-path:polygon(33.3% 0,66.6% 0,66.6% 33.3%,100% 33.3%,100% 66.6%,66.6% 66.6%,66.6% 100%,33.3% 100%,33.3% 66.6%,0 66.6%,0 33.3%,33.3% 33.3%);animation:blink 1.4s steps(1,end) infinite}
.belt .plate.p-side b:after{top:4px;right:10px;width:6px;height:6px;animation-delay:-.7s}
/* Readable belt numbers: bigger, navy, with bold navy labels. */
.r4d .plate.p-side b{width:78px;height:72px}
.r4d .plate.main b{width:124px;height:116px}
.r4d .plate strong{font-size:28px;color:var(--ink)}
.r4d .plate.main strong{font-size:40px}
.r4d .plate span{font:700 11px/1 var(--f-pixel);color:var(--ink)}
.r4d .belt{rotate:-4deg}
/* Burger always stands in front of the belt. */
.r4d .squad{z-index:5}
/* Belt: icons fill the plates, the number sits outside each plate (JS moves it onto .plate). */
.t-icon .plate span{display:none}
.t-icon .plate.p-side b{width:66px;height:62px}
.t-icon.r4d .belt{top:34%}
.t-icon .plate.main b{width:104px;height:96px}
.t-icon .ic{display:block;width:38px;image-rendering:pixelated}
.t-icon .plate.main .ic{width:64px}
.t-icon .plate>strong{position:absolute;left:50%;translate:-50% 0;white-space:nowrap;font:20px/1 var(--f-display);transform:none;letter-spacing:0}
.n-tag .plate>strong{top:calc(100% - 12px);color:var(--ink);background:#fff;padding:5px 8px 6px;box-shadow:inset 0 -3px 0 #a4e8ff;rotate:3deg;
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.n-tag .plate.main>strong{font-size:24px;rotate:-2deg}
.n-badge .plate>strong{left:auto;right:-14px;top:-14px;translate:none;color:#fff;background:var(--ketchup);padding:6px 7px 7px;box-shadow:inset 0 -4px 0 #a71c16;font-size:17px;
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.n-badge .plate.main>strong{font-size:22px;right:-18px;top:-4px}
.n-under .plate>strong{top:calc(100% + 6px);color:#fff;font-size:26px;
  text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),0 6px 0 var(--ink)}
.n-under .plate.main>strong{font-size:32px}
.t-icon.r4d .squad{bottom:calc(var(--g) - 122px)}
.t-icon.r4d .w-burger{width:46%}
.n-badge .plate:first-child>strong{right:auto;left:-14px}
/* Owner tweak: Play Again lower, burger bigger. */
.n-tag .play-wrap{bottom:calc(9.5% - 4px)}
.n-tag .home{bottom:1.6%}
.n-tag.r4d .squad{bottom:calc(var(--g) - 112px)}
.n-tag.r4d .w-burger{width:70%}
/* Belt wrapper so it can be dragged without fighting its own pump animation. */
.belt-move{position:absolute;inset:0;z-index:4;pointer-events:none}
.belt-move>.belt{pointer-events:auto}
.phone.dragging .belt-move{outline:0}
#resPhone.dragging .belt-move .belt,#resPhone.dragging .belt-move .belt *{pointer-events:auto}
.phone.dragging .belt-move .belt{outline:2px dashed rgba(255,255,255,.8);outline-offset:3px;cursor:grab}
/* Positions from the owner's drag session, plus a smaller ribbon. */
#resPhone .hw-px{margin-top:-18px}
#resPhone .hw-rib{margin-top:-6px}
#resPhone .hw-rib b{font-size:12px;padding:6px 12px 7px}
#resPhone .belt{top:calc(34% - 25px)}
#resPhone .squad{bottom:calc(var(--g) - 130px)}
/* ---------- Results V2: share card on top, Play Again below ---------- */
/* Goal: one framed card holds the brag (title, belt, stats, brawler, logo) so a screenshot crops clean; Play Again is the biggest tap target in the thumb zone. */
.v2{background:var(--dirt) url("/Branding%20UI%20UX/Layouts/Preview/pitches/dirt-tile.png") 0 0/64px 64px}
.v2 .share{position:absolute;left:12px;right:12px;top:14px;height:74%;z-index:2;
  filter:drop-shadow(4px 0 0 var(--ink)) drop-shadow(-4px 0 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 -4px 0 var(--ink)) drop-shadow(0 7px 0 var(--ink))}
.v2 .share-in{--g:34%;position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;background:var(--sky) url("/Branding%20UI%20UX/Layouts/Preview/pitches/sky-tile.png") 0 0/64px 64px;clip-path:polygon(0 10px,10px 10px,10px 0,calc(100% - 10px) 0,calc(100% - 10px) 10px,100% 10px,100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 10px),0 calc(100% - 10px))}
.v2 .stands{width:150%}
.v2 .hw.px{margin-top:10px}
.v2.n-tag .plate>strong{top:calc(100% - 20px)}
.v2 .hw-px{width:246px!important}
.v2 .hw-rib{margin-top:-6px!important}
.v2 .hw-rib b{font-size:12px;padding:6px 12px 7px}
.v2 .belt-move{z-index:4}
.v2.t-icon.r4d .belt{top:32%;left:-6%;right:-6%}
.v2.t-icon .plate.p-side b{width:58px;height:54px}
.v2.t-icon .plate.main b{width:92px;height:84px}
.v2.t-icon .ic{width:32px}
.v2.t-icon .plate.main .ic{width:54px}
.v2.n-tag.r4d .squad{bottom:42px;z-index:5}
.v2.n-tag.r4d .w-burger{width:62%}
.v2 .share-foot{position:absolute;left:0;right:0;bottom:0;height:52px;z-index:6;display:grid;place-items:center;background:var(--ink)}
.v2 .share-foot img{height:42px;image-rendering:auto}
.v2.n-tag .play-wrap{left:7%;right:7%;bottom:calc(8.5% + 4px);rotate:-1deg}
.v2 .play{font-size:30px;padding:20px 0 23px}
.v2.n-tag .home{bottom:2.2%}
/* ---------- Results V3: podium inside the share frame, stadium scene behind ---------- */
.v3{--g:44%}
.v3 .stands{width:150%}
.v3 .share{position:absolute;left:16px;right:16px;top:14px;height:73%;z-index:3;
  filter:drop-shadow(4px 0 0 var(--ink)) drop-shadow(-4px 0 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 -4px 0 var(--ink)) drop-shadow(0 7px 0 var(--ink))}
/* Night arena inside the frame so the gold podium, title and stars pop against the daytime scene outside. */
.v3 .share-in{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;clip-path:polygon(0 10px,10px 10px,10px 0,calc(100% - 10px) 0,calc(100% - 10px) 10px,100% 10px,100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 10px),0 calc(100% - 10px));
  background:linear-gradient(rgba(18,48,99,.86),rgba(18,48,99,.86)),var(--sky) url("/Branding%20UI%20UX/Layouts/Preview/pitches/sky-tile.png") 0 0/64px 64px}
.v3 .stars{inset:0 0 30%}
.v3 .hw.px{margin-top:12px}
.v3 .hw-px{width:246px!important}
.v3 .hw-rib{margin-top:-6px!important}
.v3 .hw-rib b{font-size:12px;padding:6px 12px 7px}
.podium3{position:absolute;left:8px;right:8px;bottom:52px;z-index:4;display:flex;align-items:flex-end;justify-content:center}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink))}
.pod>b{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;width:100%;padding-top:10px;clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.pod .walker{position:relative;z-index:2;margin-bottom:-6px}
.pod strong{font:22px/1 var(--f-display);color:var(--ink)}
.p1{width:40%;z-index:2}
.p1>b{height:118px;background:var(--gold);box-shadow:inset 0 -7px 0 var(--gold-dark),inset 0 5px 0 var(--gold-light)}
.p1 .walker{width:150%;max-width:none}
.p1 strong{font-size:26px}
.p2,.p3{width:30%}
.p2>b{height:84px;background:#e3edf6;box-shadow:inset 0 -6px 0 #a9bccf,inset 0 4px 0 #fff}
.p3>b{height:64px;background:#e8975a;box-shadow:inset 0 -6px 0 #a65a22,inset 0 4px 0 #ffc08a}
.p2 .walker,.p3 .walker{width:128%;max-width:none}
.p2 .walker{animation-delay:-.14s}.p3 .walker{animation-delay:-.28s}
.pod [data-ic] svg{display:block;width:100%}
.p1>b>[data-ic]{width:34px}
.pstats{display:flex;gap:6px}
.pstats>span{display:flex;align-items:center;gap:3px;font:15px/1 var(--f-display);color:var(--ink);background:#fff;padding:3px 5px 4px;box-shadow:inset 0 -3px 0 #a4e8ff;clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
.pstats [data-ic]{width:13px}
.v3 .share-foot{position:absolute;left:0;right:0;bottom:0;height:52px;z-index:6;display:grid;place-items:center;background:var(--ink)}
.v3 .share-foot img{height:42px}
.v3 .play-wrap{left:7%;right:7%;bottom:calc(8.5% + 4px);rotate:-1deg}
.v3 .play{font-size:30px;padding:20px 0 23px}
.v3 .home{bottom:2.2%}
/* V3 open: no frame backdrop or outline, podium sits right on the stadium scene. */
.v3 .share{filter:none}
.v3 .share-in{background:none;clip-path:none;overflow:visible}
.v3 .share-foot{background:none}
.v3 .share-foot img{filter:drop-shadow(0 3px 0 rgba(11,31,63,.5))}
/* V3: thick black base under the podium blocks. */
.v3 .podium3{bottom:66px}
/* Base is part of the podium silhouette: one navy outline wraps blocks and base together, base has its own top highlight and stepped ends. */
.v3 .podium3{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 6px 0 var(--ink))}
.v3 .pod{filter:none}
.v3 .pod+.pod>b{box-shadow:inset 3px 0 0 rgba(11,31,63,.35),var(--pod-sh)}
.v3 .p1>b{--pod-sh:inset 0 -7px 0 var(--gold-dark),inset 0 5px 0 var(--gold-light)}
.v3 .p3>b{--pod-sh:inset 0 -6px 0 #a65a22,inset 0 4px 0 #ffc08a}
.v3 .podium3:after{content:"";position:absolute;left:-8px;right:-8px;top:100%;height:18px;background:#141414;box-shadow:inset 0 4px 0 #3b3b3b,inset 0 -4px 0 #000;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.v3 .pod>b{clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% 100%,0 100%)}
.v3 .p1>b{height:108px}
.v3 .p2>b{height:78px}
.v3 .p3>b{height:58px}
.v3 .share-foot{height:48px}
.v3 .share-foot img{height:36px}
/* ---------- V3b: podium grounded in the scene ---------- */
.v3b .podium3{bottom:42px}
.v3b .podium3:after{display:none}
/* Stage front doubles as the logo plaque. */
.v3b .stage{position:absolute;left:-8px;right:-8px;top:100%;height:40px;display:flex;justify-content:center;align-items:flex-start;padding-top:5px;background:#141414;box-shadow:inset 0 4px 0 #3b3b3b,inset 0 -4px 0 #000}
.v3b .stage img{height:26px;image-rendering:auto}
/* 3D tops: a lighter top face with a dark edge under it, plus a small shadow where each brawler stands. */
.v3b .p1>b{box-shadow:inset 0 12px 0 var(--gold-light),inset 0 15px 0 var(--gold-dark),inset 0 -7px 0 var(--gold-dark)}
.v3b .p2>b{box-shadow:inset 3px 0 0 rgba(11,31,63,.0),inset 0 12px 0 #fff,inset 0 15px 0 #a9bccf,inset 0 -6px 0 #a9bccf}
.v3b .p3>b{box-shadow:inset 3px 0 0 rgba(11,31,63,.35),inset 0 12px 0 #ffc08a,inset 0 15px 0 #a65a22,inset 0 -6px 0 #a65a22}
.v3b .p1>b{box-shadow:inset 3px 0 0 rgba(11,31,63,.35),inset 0 12px 0 var(--gold-light),inset 0 15px 0 var(--gold-dark),inset 0 -7px 0 var(--gold-dark)}
.v3b .pod>b{position:relative;padding-top:18px}
.v3b .pod>b:before{content:"";position:absolute;left:22%;right:22%;top:3px;height:6px;background:rgba(11,31,63,.28)}
/* Ground contact: a pixel shadow on the grass, and grass tufts growing in front of the stage. */
.v3b .pod-shadow{position:absolute;left:-6px;right:-6px;bottom:-12px;height:20px;z-index:3;background:rgba(11,31,63,.32);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.v3b .tufts{position:absolute;left:-4px;right:-4px;bottom:-2px;height:20px;z-index:5;background:url("/Branding%20UI%20UX/Layouts/Preview/pitches/grass-tile.png") 0 0/44px 40px repeat-x;image-rendering:pixelated;pointer-events:none}
/* V3b/V3c: no outline under the stage (sides and top only), stage in the logo blue. */
.v3b .podium3{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink))}
.v3b .stage{background:linear-gradient(#409dff,#247dfd 55%,#1264e7);box-shadow:inset 0 4px 0 #8fd0ff,inset 0 -4px 0 #0e4fb8}
.v3b .stage img{height:28px;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)}
/* V3c: blocks in logo blue too, place names white with a navy edge. */
.v3c .p1>b,.v3c .p2>b,.v3c .p3>b{background:linear-gradient(#409dff,#247dfd 55%,#1264e7)}
.v3c .p1>b{box-shadow:inset 3px 0 0 rgba(11,31,63,.35),inset 0 12px 0 #8fd0ff,inset 0 15px 0 #0e4fb8,inset 0 -7px 0 #0e4fb8}
.v3c .p2>b,.v3c .p3>b{box-shadow:inset 3px 0 0 rgba(11,31,63,.35),inset 0 12px 0 #8fd0ff,inset 0 15px 0 #0e4fb8,inset 0 -6px 0 #0e4fb8}
.v3c .p2>b{box-shadow:inset 0 12px 0 #8fd0ff,inset 0 15px 0 #0e4fb8,inset 0 -6px 0 #0e4fb8}
.v3c .pod strong{color:#fff;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),0 4px 0 var(--ink)}
.v3c .stage{box-shadow:inset 0 4px 0 #0e4fb8,inset 0 -4px 0 #0e4fb8}
.v3b .pod-shadow{display:none}
#resBest .hw-px{width:296px!important}
#resBest .hw.px{margin-top:6px}
#resBest2 .hw-px{width:286px!important}
#resBest2 .hw.px{margin-top:16px}
#resBest2 .hw-rib{margin-top:-14px!important}
#resBest3 .hw-px{width:232px!important}
#resBest3 .hw.px{margin-top:2px}
#resBest3 .hw-rib{margin-top:-4px!important}
#resBest4 .hw-px{width:270px!important}
#resBest4 .hw.px{margin-top:4px}
#resBest4 .hw-rib{margin-top:-12px!important}
#resBest4 .share{height:75%}
#resBest4 .p1>b{height:106px;gap:2px}
#resBest4 .p1>b>[data-ic]{width:26px}
#resBest4 .p2>b{height:66px}
#resBest4 .p3>b{height:50px}
#resBest4 .p1 .walker{width:132%}
#resBest4 .p2 .walker,#resBest4 .p3 .walker{width:116%}
/* C2: stage logo as a small white silhouette; falling stars pass in front of the title. */
#resBest4 .stage img{height:22px;margin-top:3px;filter:drop-shadow(0 2px 0 rgba(11,31,63,.55))}
#resBest4 .stars{z-index:4}
#resBest4 .pstats{gap:4px}
#resBest4 .pstats>span{font-size:11px;padding:2px 4px 3px;gap:2px}
#resBest4 .pstats [data-ic]{width:9px}
#resBest4 .pod>b:before{display:none}
/* C2: softer ribbon glow, a little glow on the stars. */
#resBest4 .hw-rib.outline{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 0 4px rgba(255,226,90,.55));animation:ribglow2 1.2s steps(1,end) infinite}
@keyframes ribglow2{50%{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 0 6px rgba(255,226,90,.7))}}
#resBest4 .stars i{filter:drop-shadow(0 0 3px rgba(255,236,120,.9)) drop-shadow(0 0 6px rgba(255,210,58,.5))}
/* ---------- Knocked Out (lose screen): three options ---------- */
.ko .share-foot{display:none}
.ko .hw.px{margin-top:2px}
.ko .hw-px{width:262px!important}
.ko .hw-rib{margin-top:-10px!important}
.ko .stars{z-index:4}
/* Dizzy: three pixel stars circling over the knocked-out burger, in steps. */
.ko-me{position:absolute;z-index:6;width:50%;left:2%;bottom:6px}
.ko-me .walker{width:100%;rotate:-12deg;animation:none;background-position:0 0}
.dizzy{position:absolute;left:26%;top:-4%;width:48%;height:24px;z-index:3;animation:dz .6s steps(1,end) infinite}
@keyframes dz{50%{translate:5px -3px}}
.dizzy{filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))}
.dizzy i{position:absolute;width:15px;height:15px;background:var(--gold);box-shadow:inset 0 -3px 0 var(--gold-dark);
  clip-path:polygon(50% 0,62% 38%,100% 38%,69% 61%,81% 100%,50% 76%,19% 100%,31% 61%,0 38%,38% 38%)}
.dizzy i:nth-child(1){left:0;top:6px}.dizzy i:nth-child(2){left:42%;top:0}.dizzy i:nth-child(3){right:0;top:8px}
.ko-card{position:absolute;z-index:6;right:5%;bottom:34px;rotate:3deg}
.ko-card b{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px 11px;background:#fff;box-shadow:inset 0 -5px 0 #a4e8ff;
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.ko-card .you{font:700 9px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:3px 5px}
.ko-card strong{font:34px/1 var(--f-display);color:var(--ink)}
.ko .pstats>span{font-size:13px}
.ko .pstats [data-ic]{width:11px}
.ko .pstats [data-ic] svg{display:block;width:100%}
/* A: podium shrunk into the background. */
.ko .ko-podium{bottom:138px;left:16%;right:16%;scale:.82;transform-origin:bottom center}
.ko .ko-podium .p1>b{height:70px}.ko-podium .p2>b{height:52px}.ko-podium .p3>b{height:40px}
.ko .ko-podium .pod strong{font-size:16px}.ko .ko-podium .p1>b>[data-ic]{width:22px}
.ko .ko-podium .stage{position:absolute;left:-8px;right:-8px;top:100%;height:14px;background:linear-gradient(#409dff,#247dfd 55%,#1264e7);box-shadow:inset 0 3px 0 #8fd0ff}
.ko .ko-podium .pimg{position:relative;z-index:2;width:96%;margin-bottom:-6px;image-rendering:pixelated}
.ko .ko-podium:after{display:none}
/* B: who knocked you out. */
.ko-by{position:absolute;z-index:5;left:10%;right:10%;top:43%;rotate:-2deg}
.ko-by b{display:flex;flex-direction:column;gap:6px;padding:10px 12px 13px;background:var(--gold);box-shadow:inset 0 -6px 0 var(--gold-dark),inset 0 4px 0 var(--gold-light);
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.ko-by .by{font:700 10px/1 var(--f-pixel);color:var(--ink)}
.ko-by .by-row{display:flex;align-items:center;gap:12px}
.ko-by img{width:62px;image-rendering:pixelated}
.ko-by .by-name{font:22px/1.05 var(--f-display);color:var(--ink)}
#koB .ko-me{width:44%}
/* C: big place number. */
.hw.place{position:absolute;z-index:5;right:2%;top:42%;width:74%;margin:0!important}
.hw.place .hw-px{width:100%!important}
.ko-me.big{width:54%;left:0;bottom:44px}
.ko-strip{position:absolute;z-index:6;right:6%;top:calc(42% + 112px)}
.ko-strip .pstats>span{font-size:16px;padding:4px 7px 5px}
.ko-strip .pstats [data-ic]{width:14px}
/* Knocked Out, toned down: dimmed stadium, no falling stars or glow, red KNOCKED, grey ribbon, burger flat on the ground.
   Play Again stays bright gold so it's the one cheerful thing on screen. */
.ko-dim{position:absolute;inset:0;z-index:2;background:rgba(11,31,63,.42);pointer-events:none}
.ko .stars{display:none}
.ko .hw-px{filter:none;animation:none}
.ko .hw-rib.outline{animation:none;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink))}
.ko .hw-rib b{background:#dfe9f3;box-shadow:inset 0 -5px 0 #a9bccf,inset 0 3px 0 #fff;color:var(--ink)}
.ko-me .walker{rotate:-78deg;translate:0 22%}
.ko .ko-card b{background:#dfe9f3;box-shadow:inset 0 -5px 0 #a9bccf}
.ko .ko-by b{background:#dfe9f3;box-shadow:inset 0 -6px 0 #a9bccf,inset 0 4px 0 #fff}
.ko .ko-podium{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) brightness(.85)}
/* ---------- Knocked Out B variants ---------- */
/* Burger lies flat: the whole group turns 90deg so the dizzy stars stay by his head. */
.ko-lie{position:absolute;z-index:6;left:24%;bottom:-18px;width:52%;aspect-ratio:1;rotate:-90deg}
.ko-lie .walker{width:100%;animation:none;background-position:0 0}
.ko-lie .dizzy{left:24%;top:-2%;width:52%}
.kob .klab{display:block;font:700 9px/1 var(--f-pixel);color:var(--muted)}
.kob .kname{display:block;font:20px/1.05 var(--f-display);color:var(--ink)}
.kob .krow{display:flex;align-items:center;gap:10px}
.kob .krow img{width:52px;image-rendering:pixelated}
.kob .kplace strong{display:block;font:30px/1 var(--f-display);color:var(--ink)}
.kob .krow.you{justify-content:space-between}
/* B1: one card */
.kcard{position:absolute;z-index:5;left:7%;right:7%;top:43%}
.kcard>b{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;background:#dfe9f3;box-shadow:inset 0 -5px 0 #a9bccf,inset 0 3px 0 #fff;clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.kcard .krow.you{padding-top:8px;box-shadow:0 -2px 0 #a9bccf}
/* B2: victor stands over you */
.kstrip{position:absolute;z-index:5;top:43%;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:8px}
.kyou{font:700 10px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:5px 7px;display:flex;align-items:center;gap:6px}
.kyou strong{font:18px/1 var(--f-display)}
.kvictor{position:absolute;z-index:5;right:4%;bottom:34px;width:46%;display:flex;flex-direction:column;align-items:center;gap:6px}
.kvictor .walker{width:100%;aspect-ratio:1}
.ktag b{display:block;font:700 9px/1.2 var(--f-pixel);color:var(--ink);background:#dfe9f3;padding:5px 7px;text-align:center;clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
#koB2 .ko-lie{left:2%;width:48%}
/* B3: navy scoreboard */
.kboard{position:absolute;z-index:5;left:7%;right:7%;top:43%}
.kboard>b{display:flex;flex-direction:column;gap:7px;padding:9px 12px 12px;background:var(--ink) repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.04) 2px 3px);clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.kboard .klab{color:#a9d8ff}
.kboard .kname,.kboard .kplace strong{color:#fff}
.kboard .kline{height:2px;background:#2a4c86}
/* ---------- Knocked Out S: B2's scene kept, new info layouts ---------- */
/* Scene: same as B2 but a bit bigger, sitting lower on the grass. */
.kos .kvictor{right:2%;bottom:78px;width:54%}
.kos .ko-lie{left:-2%;bottom:46px;width:58%}
.kos .hw-rib b{background:#fff;font-size:14px}
/* S1: one stat bar */
.sbar{position:absolute;z-index:7;left:7%;right:7%;bottom:6px}
.sbar b{display:flex;align-items:center;justify-content:space-around;padding:7px 10px 10px;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
.sbar .sp{display:flex;align-items:center;gap:6px}
.sbar strong{font:22px/1 var(--f-display);color:var(--ink)}
.sbar .ss{display:flex;align-items:center;gap:5px}
.sbar [data-ic]{width:18px}.sbar [data-ic] svg,.stiles [data-ic] svg,.youtag [data-ic] svg{display:block;width:100%}
.sbar .sdiv{width:2px;align-self:stretch;background:#cfe3f2}
/* S2: three tiles */
.stiles{position:absolute;z-index:7;left:6%;right:6%;bottom:4px;display:flex;justify-content:center;gap:10px}
.st b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:70px;height:62px;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
.st strong{font:20px/1 var(--f-display);color:var(--ink)}
.st span{font:700 8px/1 var(--f-pixel);color:var(--muted)}
.st [data-ic]{width:16px}
.st:nth-child(1){rotate:-3deg}.st:nth-child(3){rotate:3deg}
/* S3: tag on the burger */
.youtag{position:absolute;z-index:7;left:50%;translate:-50% 0;bottom:10px;rotate:3deg}
.youtag b{display:flex;align-items:center;gap:8px;padding:6px 9px 8px;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.youtag .klab{display:block;font:700 8px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:3px 4px}
.youtag strong{font:22px/1 var(--f-display);color:var(--ink)}
.youtag [data-ic]{width:11px}
/* KO screens: sushi stands a little lower; one-line title gets room. */
#koT1 .kvictor,#koT2 .kvictor,#koT3 .kvictor{bottom:58px}
#koT2 .hw.px{margin-top:30px}
#koT2 .hw-rib{margin-top:2px!important}
/* ---------- Knocked Out: five title ideas ---------- */
#koX1 .kvictor,#koX2 .kvictor,#koX3 .kvictor,#koX4 .kvictor,#koX5 .kvictor{bottom:58px}
.kt{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
/* 1: K.O. stamp */
#koX1 .hw.px{margin-top:8px}
#koX1 .hw,#koX1 .hw.px{position:static;rotate:none;transform:none}
#koX1 .hw-px{width:300px!important;max-width:none;margin:0 auto}
/* Sushi Roll label drops down to sit right over the sushi. */
#koX1 .hw-rib{position:absolute;top:31%;right:3%;margin:0!important;z-index:8;rotate:3deg}
/* Label glows white and silver. */
#koX1 .hw-rib.outline{filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(200,214,228,.8))}
/* 2: knocked-over letters */
.kletters{margin-top:22px;display:flex;flex-direction:column;align-items:center}
.kletters span{display:inline-block;font:44px/1 var(--f-display);text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),-2px 6px 0 var(--ink),-4px 7px 0 var(--ink)}
.kl1 span{color:#ff5a4a}
.kl2{margin-top:-4px}
.kl2 span{font-size:56px;color:#fff}
#koX2 .kt .hw-rib{margin-top:70px!important}
/* 3: REMATCH? */
#koX3 .hw.px{margin-top:34px}
#koX3 .hw-px{width:270px!important}
#koX3 .hw-rib{margin-top:0!important}
/* 4: ref count */
.kcount-lab{margin-top:26px;font:16px/1 var(--f-display);color:#fff;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),0 4px 0 var(--ink)}
.kcount{display:flex;align-items:flex-end;gap:8px;margin:12px 0 10px}
.kc b{display:grid;place-items:center;width:42px;height:50px;font:26px/1 var(--f-display);color:var(--ink);background:#dfe9f3;box-shadow:inset 0 -4px 0 #a9bccf;opacity:.85;clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
.kc.big b{width:86px;height:86px;font-size:50px;color:#fff;background:var(--ketchup);box-shadow:inset 0 -7px 0 #a71c16,inset 0 5px 0 #ff7a6b;opacity:1}
.kc.big{rotate:-6deg}
/* 5: NEXT! from the winner */
#koX5 .kt .hw-rib{margin-top:30px!important}
.hw.knext{position:absolute;z-index:6;right:0;top:33%;width:62%;margin:0!important}
.hw.knext .hw-px{width:100%!important}
/* KO: pulses in steps with a red glow; its white highlights get their own white glow layer. */
#koX1 .kowrap{position:relative;width:268px;margin:0 auto;animation:kopulse 1s steps(1,end) infinite}
#koX1 .kowrap .hw-px,.kok .kowrap .hw-px{display:block;width:100%!important;filter:drop-shadow(0 0 6px rgba(200,24,16,.8)) drop-shadow(0 0 14px rgba(180,20,12,.5));animation:none}
#koX1 .kohi{position:absolute;inset:0;width:100%;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,.9));animation:kohi 1s steps(1,end) infinite}
@keyframes kopulse{50%{scale:1.06}}
@keyframes kohi{50%{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(255,255,255,1))}}
/* KO label: logo-blue frame with a white inner glow, white text. */
#koX1 .hw-rib b{background:linear-gradient(#409dff,#247dfd 55%,#1264e7);color:#fff;box-shadow:inset 0 0 6px 1px rgba(255,255,255,.95),inset 0 0 0 2px rgba(255,255,255,.7);text-shadow:0 2px 0 var(--ink)}
/* ---------- KO: Sushi Roll label options (copies of KO 1) ---------- */
.kok .kowrap{position:relative;width:268px;margin:0 auto;animation:kopulse 1s steps(1,end) infinite}
.kok .kohi{position:absolute;inset:0;width:100%;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,.9));animation:kohi 1s steps(1,end) infinite}
.kok .hw,.kok .hw.px{position:static;rotate:none;transform:none}
.kok .hw.px{margin-top:8px}
.kok .hw-px{max-width:none}
.kby{display:block;margin-top:2px;font:15px/1 var(--f-display);color:#fff;letter-spacing:1px;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),0 4px 0 var(--ink)}
.knametag{position:absolute;left:50%;top:-22px;translate:-50% 0;z-index:3;white-space:nowrap}
.knametag b{display:block;font:12px/1 var(--f-display);color:#fff;background:var(--ketchup);padding:5px 8px 6px;box-shadow:inset 0 -3px 0 #a71c16;clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
.kplate{position:absolute;left:50%;bottom:-12px;translate:-50% 0;z-index:3;white-space:nowrap}
.kplate b{display:flex;flex-direction:column;align-items:center;gap:2px;font:12px/1 var(--f-display);color:var(--ink);background:#fff;padding:4px 8px 6px;box-shadow:inset 0 -3px 0 #a4e8ff;clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
.kplate b span{font:700 7px/1 var(--f-pixel);color:var(--muted)}
#koK1 .kowrap,#koK1b .kowrap{width:236px}
#koK1 .hw.px,#koK1b .hw.px{margin-top:-10px}
#koK1,#koK1b{--g:50%}
#koK1 .kvictor,#koK1b .kvictor{bottom:80px;width:66%;right:-4%}
#koK1 .ko-lie,#koK1b .ko-lie{bottom:56px;width:48%;left:0}
#koK1 .dizzy i,#koK1b .dizzy i{width:11px;height:11px}
/* KO A: Sushi Roll line above the KO, stat tiles nudged up. */
#koK1 .hw.px,#koK1b .hw.px{margin-top:-10px}
#koK1 .kby,#koK1b .kby{position:relative;z-index:5;margin:-9px 0 0;font-size:12px}
#koK1 .stiles,#koK1b .stiles{bottom:12px}
#koK1b .kby{margin:12px 0 0;font-size:22px;letter-spacing:1px}
#koK1b .kowrap{width:270px}
#koK1b .kvictor{bottom:62px;width:60%}
#koK1b .ko-lie{bottom:48px}
#koK1b .hw.px{margin-top:0}
#koK1b .hw{position:relative;z-index:7}
/* ---------- Fight intro: 3, 2, 1, BRAWL! ---------- */
.intro .itag{position:absolute;top:26px;left:50%;translate:-50% 0;z-index:6}
.intro .itag b{rotate:-2deg;white-space:nowrap}
/* Countdown frames stack; JS flips .on every beat and each frame pops in. */
.cd{position:absolute;left:0;right:0;top:15%;height:190px;z-index:8;pointer-events:none}
.cd .hw{position:absolute;inset:0;margin:0!important;justify-content:center;opacity:0;rotate:none}
.cd .hw.on{opacity:1;animation:cdpop .45s steps(3,end) both}
.cd .hw-px{width:220px!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.55))}
.cd .go .hw-px{width:290px!important;filter:drop-shadow(0 0 12px rgba(255,210,58,.8))}
@keyframes cdpop{0%{scale:1.35}60%{scale:.94}100%{scale:1}}
/* A: lineup */
.ia .iseats{position:absolute;left:8%;right:8%;width:auto;bottom:calc(12% + 22px);margin:0;gap:12px 10px}
/* B: you vs everyone */
.ib .ib-you{position:absolute;z-index:5;left:-4%;bottom:calc(12% + 70px);width:62%}
.ib .ib-you .walker{width:100%;aspect-ratio:1}
.ytag{position:absolute;top:8%;left:44%;z-index:2;font:700 10px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:4px 6px}
.ib-vs{position:absolute;z-index:6;right:30%;bottom:calc(12% + 140px);font:34px/1 var(--f-display);color:#fff;rotate:-8deg;text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),-2px 6px 0 var(--ink)}
.ib-rivals{position:absolute;z-index:5;right:4%;bottom:calc(12% + 14px);width:44%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ib-rivals img{width:100%;image-rendering:pixelated}
.ib .cd{top:12%}
/* C: in the arena */
.ic .arena{top:24%}
.ic .fighter{width:19%}
.ic .fighter.me{width:24%}
.ic .fighter.me:before{content:"YOU"}
.ic .cd{top:31%}
.ic .cd .hw-px{width:190px!important}
.ic .cd .go .hw-px{width:270px!important}
/* ---------- Fight intro D: camera zoomed on your spawn ---------- */
/* Floor: arena dirt at close-up scale, with the gold ring arcing past one corner. */
.icam{background:var(--grass) url("/Branding%20UI%20UX/Layouts/Preview/pitches/grass-fill.png") 0 0/96px 48px}
.cam-floor{position:absolute;left:-40%;top:-10%;width:200%;aspect-ratio:1;border-radius:50%;background:var(--dirt) url("/Branding%20UI%20UX/Layouts/Preview/pitches/dirt-tile.png") 0 0/96px 96px;image-rendering:pixelated;
  box-shadow:0 0 0 8px var(--ink),0 0 0 18px var(--gold),0 0 0 24px var(--ink)}
.cam-ring{display:none}
.cam-you{position:absolute;left:50%;top:50%;translate:-50% -10%;width:52%;z-index:4}
.cam-you .walker{width:100%;aspect-ratio:1;position:relative;z-index:2}
.cam-you .ytag{left:50%;top:-4%;translate:-50% 0}
/* Spawn pad under your feet: gold stepped ring. */
.spawn{position:absolute;left:8%;right:8%;bottom:-4%;height:40px;z-index:1;background:transparent;box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 0 8px var(--ink);border-radius:50%;animation:blink 1s steps(1,end) infinite}
.cam-near{position:absolute;z-index:3;width:34%}
.cam-near img{width:100%;image-rendering:pixelated}
.cam-near.n1{left:-10%;top:30%}
.cam-near.n2{right:-12%;top:62%}
/* Edge pointers to rivals off screen. */
.ptr{position:absolute;z-index:6}
.ptr b{display:flex;align-items:center;gap:3px;padding:3px;background:#fff;box-shadow:inset 0 -3px 0 #a4e8ff;clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
.ptr img{width:24px;image-rendering:pixelated}
.ar{width:8px;height:10px;background:var(--ketchup)}
.ar.left{order:-1;clip-path:polygon(100% 0,0 50%,100% 100%)}
.ar.right{clip-path:polygon(0 0,100% 50%,0 100%)}
.ar.up{order:-1;width:10px;height:8px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ptr.p-t b{flex-direction:column}
.p-t{top:16px;left:14px}.p-l{left:6px;top:46%}.p-r{right:6px;top:40%}.p-bl{left:6px;bottom:12%}.p-br{right:6px;bottom:14%}
/* Mini map: navy card, dirt ring, 8 spawn dots, yours gold. */
.mmap{position:absolute;z-index:7;top:16px;right:14px}
.mmap b{display:block;width:78px;height:78px;padding:7px;background:var(--ink);clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
.mring{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:var(--dirt);box-shadow:inset 0 0 0 3px var(--gold)}
.mring i{position:absolute;width:7px;height:7px;translate:-50% -50%;background:var(--ketchup);outline:1px solid #fff}
.mring i.me{width:11px;height:11px;background:var(--gold);outline:2px solid #fff;animation:blink .8s steps(1,end) infinite}
.icam .cd{top:9%}
.icam .cd .hw-px{width:200px!important}
.icam .cd .go .hw-px{width:270px!important}
/* D2: bigger map card top-center, countdown lower. */
.icam.big .mmap{top:14px;left:50%;right:auto;translate:-50% 0}
.icam.big .mmap b{width:136px;height:136px;padding:10px}
.icam.big .mring i{width:10px;height:10px}
.icam.big .mring i.me{width:15px;height:15px}
.icam.big .cd{top:26%}
/* ---------- Fight intro: camera zooms from the full arena down to your spawn ---------- */
/* The world (stands + arena) scales around your spawn point; JS steps it through z0..z3 with the countdown. */
.izoom .world{position:absolute;inset:0;transform-origin:50% 57%;transition:scale .7s cubic-bezier(.3,.7,.3,1)}
.izoom.z1 .world{scale:1.6}
.izoom.z2 .world{scale:2.3}
.izoom.z3 .world{scale:2.7;animation:zshake .3s steps(2,end) 2}
.izoom.zreset .world{transition:scale .25s ease-in}
@keyframes zshake{50%{transform:translate(4px,-3px)}}
.izoom .arena{top:24%}
.zf{position:absolute;width:17%;translate:-50% -80%}
.zf img{position:relative;z-index:2;width:100%;image-rendering:pixelated}
.zf .pad{position:absolute;left:-6%;right:-6%;bottom:-6%;height:34%;z-index:1;border-radius:50%;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--ink);background:rgba(255,255,255,.18)}
.zf.me{width:21%}
.zf.me .pad{box-shadow:inset 0 0 0 4px var(--gold),inset 0 0 0 6px var(--ink);background:rgba(255,210,58,.35);animation:blink .5s steps(1,end) infinite}
.zf.me:before{content:"YOU";position:absolute;left:50%;top:-14px;translate:-50% 0;z-index:3;font:700 8px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:3px 4px}
.izoom .cd{top:4%;height:170px}
.izoom .cd .hw-px{width:190px!important}
.izoom .cd .go{top:4%}
.izoom .cd .go .hw-px{width:286px!important}
/* ---------- Zoom intro: countdown text styles ---------- */
.cd .cdf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.cd .cdf.on{opacity:1;animation:cdpop .45s steps(3,end) both}
#izT1 .cd{top:calc(50% - 85px)}
#izT1 .cd .go{top:0;bottom:0}
#izT1 .cd .hw-px{width:250px!important;filter:drop-shadow(0 0 10px rgba(255,236,61,.65))}
#izT1 .cd .go .hw-px{width:290px!important;filter:drop-shadow(0 0 10px rgba(232,50,42,.7))}
.badge b{display:grid;place-items:center;width:112px;height:112px;font:72px/1 var(--f-display);color:#fff;background:var(--ink);box-shadow:inset 0 0 0 7px var(--gold),inset 0 0 0 11px var(--ink),inset 0 -14px 0 11px #17325e;clip-path:polygon(0 12px,12px 12px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px))}
.slam{rotate:-5deg}
.slam b{display:block;font:46px/1 var(--f-display);color:var(--ink);background:var(--gold);padding:14px 22px 18px;box-shadow:inset 0 -9px 0 var(--gold-dark),inset 0 6px 0 var(--gold-light);clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.pixn{font:700 150px/1 var(--f-pixel);color:#fff;text-shadow:6px 0 0 var(--ink),-6px 0 0 var(--ink),0 6px 0 var(--ink),0 -6px 0 var(--ink),6px 6px 0 var(--ink),-6px 6px 0 var(--ink),6px -6px 0 var(--ink),-6px -6px 0 var(--ink),-4px 12px 0 var(--ink)}
#izT3 .cd .go .hw-px{width:260px!important}
#izT3 .cd .go{top:-6px}
/* Fight intro (izT1): camera keeps you in the lower part of the screen so the centered countdown never covers you. */
#izT1 .world{translate:0 96px}
#izT1.z1 .world{scale:1.5;translate:0 100px}
#izT1.z2 .world{scale:1.9;translate:0 112px}
#izT1.z3 .world{scale:2.2;translate:0 150px}
#izT1 .world{transition:scale .7s cubic-bezier(.3,.7,.3,1),translate .7s cubic-bezier(.3,.7,.3,1)}
#izT1 .cd .hw-px{width:210px!important}
/* ---------- Shop: three options ---------- */
.shop{--g:40%}
.shop .stands{width:130%}
.sh-back{position:absolute;top:18px;left:14px;z-index:6;border:0;padding:0;background:none;cursor:pointer}
.sh-back b{display:block;font:700 10px/1 var(--f-pixel);color:#fff;background:var(--ink);padding:7px 9px}
.sh-coins{position:absolute;top:16px;right:14px;z-index:6}
.shop .hw.sh-title{position:absolute;left:0;right:0;top:38px;margin:0!important;z-index:5;rotate:none}
.shop .sh-title .hw-px{width:190px!important}
.cn{display:inline-block;width:11px;height:11px;margin-right:4px;vertical-align:-1px;background:var(--gold);box-shadow:inset 0 -3px 0 var(--gold-dark);outline:2px solid var(--ink);clip-path:polygon(25% 0,75% 0,75% 15%,100% 15%,100% 85%,75% 85%,75% 100%,25% 100%,25% 85%,0 85%,0 15%,25% 15%)}
.pr{display:flex;align-items:center;font:12px/1 var(--f-display);color:var(--ink)}
/* A */
.feat{position:absolute;left:0;right:0;top:108px;height:230px;z-index:4}
.ftag{position:absolute;top:26px;left:16px;rotate:-4deg}
.ftag b{display:block;font:700 9px/1 var(--f-pixel);color:#fff;background:var(--ketchup);padding:5px 7px;box-shadow:inset 0 -3px 0 #a71c16}
.fhero{position:absolute;left:2%;bottom:0;width:52%}
.fhero img{width:100%;image-rendering:pixelated}
.finfo{position:absolute;right:16px;top:44px;text-align:right;display:flex;flex-direction:column;gap:6px}
.fname2{font:26px/1 var(--f-display);color:#fff;text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),0 5px 0 var(--ink)}
.fpow{align-self:flex-end;font:700 8px/1 var(--f-pixel);color:var(--ink);background:#fff;padding:4px 6px}
.sa .fbuy{left:auto;right:16px;width:120px;bottom:24px;rotate:-2deg}
.sa .fbuy .play{font-size:22px;padding:12px 0 14px;display:flex;align-items:center;justify-content:center}
.sa .fbuy .cn{width:16px;height:16px;margin-right:6px}
.sgrid{position:absolute;left:6%;right:6%;bottom:22px;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}
.sitem b{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 7px;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
.sitem img{width:56%;image-rendering:pixelated}
/* B */
.dhead{position:absolute;top:112px;left:16px;right:16px;z-index:5;display:flex;justify-content:space-between;align-items:center;font:16px/1 var(--f-display);color:#fff;text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),0 4px 0 var(--ink)}
.dtime{font:700 8px/1 var(--f-pixel);color:var(--ink);background:#fff;padding:4px 6px;text-shadow:none}
.deals{position:absolute;top:140px;left:12px;right:12px;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.deal b{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px))}
.deal img{width:72%;image-rendering:pixelated}
.dname{font:9px/1 var(--f-display);color:var(--ink);text-align:center;white-space:nowrap}
.dold{font:700 8px/1 var(--f-pixel);color:var(--muted);text-decoration:line-through}
.dsale{position:absolute;top:4px;right:4px;font:700 8px/1 var(--f-pixel);color:#fff;background:var(--ketchup);padding:3px 4px}
.dbtn{display:flex;align-items:center;justify-content:center;width:100%;font:13px/1 var(--f-display);color:var(--ink);background:var(--gold);padding:6px 0 8px;box-shadow:inset 0 -3px 0 var(--gold-dark);clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}
.bund{position:absolute;left:12px;right:12px;top:338px;z-index:5;rotate:-1deg}
.bund b{display:flex;align-items:center;gap:8px;padding:9px 10px 11px;background:var(--ink);clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.bimgs{display:flex}.bimgs img{width:34px;image-rendering:pixelated}.bimgs img+img{margin-left:-10px}
.btxt{flex:1;display:flex;flex-direction:column;gap:4px}
.bname{font:11px/1.1 var(--f-display);color:#fff}
.bsub{font:700 7px/1 var(--f-pixel);color:#a9d8ff}
.bund .dbtn{width:auto;padding:8px 10px 10px}
/* C */
.cprog{position:absolute;top:158px;left:16px;right:16px;z-index:5;display:flex;flex-direction:column;gap:6px;font:700 10px/1 var(--f-pixel);color:#fff;text-shadow:0 2px 0 var(--ink)}
.cbar{display:block;height:10px;background:var(--ink);padding:2px}
.cbar i{display:block;height:100%;background:var(--gold)}
.cgrid{position:absolute;top:190px;left:12px;right:12px;bottom:18px;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;align-content:start}
.cslot b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.cslot img{width:70%;image-rendering:pixelated}
.cslot.slk b{background:#2f86d8;box-shadow:inset 0 4px 0 #1f63a8}
.cslot.slk img{width:52%;filter:brightness(0) opacity(.45)}
.cslot.slk .pr{color:#fff;font-size:10px}
.sc .hw.sh-title{top:50px}
.shop .sh-title .hw-px{width:240px!important}
.shop .hw-px{filter:none!important;animation:none!important}
.sh-coins b{font-size:11px;padding:6px 8px 7px;gap:5px}
.sh-coins i{width:11px;height:11px}
/* In-match HUD, approved Oct 17 (see hud.html for the pitch history). Flat grass, no sticker stroke on brawlers,
   generated pixel pieces in hud/. */
.inhud{background:var(--grass);image-rendering:pixelated;display:block}
.inhud .tuft{position:absolute;width:3px;height:3px;background:#48a82e;box-shadow:3px -3px 0 #48a82e,-3px -3px 0 #48a82e}
.inhud .hf{position:absolute;width:52px;translate:-50% -50%}
.inhud .hf img{width:100%;display:block;image-rendering:pixelated}
.inhud .hme{position:absolute;left:50%;top:50%;width:92px;aspect-ratio:1;translate:-50% -50%}
.inhud .hme .walker{width:100%;height:100%;filter:none}
.inhud .hc{position:absolute;z-index:4}
.inhud .hc img{display:block;height:100%;width:auto;image-rendering:auto}
.inhud .hstrip{left:0;right:0;top:0;height:14px;background:#3e8f2b}
.inhud .hstrip i{display:block;height:100%;width:70%;background:var(--ketchup)}
.inhud .hstrip b{position:absolute;left:50%;top:100%;translate:-50% 5px;font:700 10px/1 var(--f-pixel);color:#fff;letter-spacing:1px}
.inhud .htimer,.inhud .hleft{height:36px}
.inhud .hstick{height:84px}
.inhud .hpunch{height:104px}
.inhud .hspecial{height:66px}
/* Focus mode: show one screen only. Set data-focus on .wrap and class "focus" on the screen. */
.wrap[data-focus] .side,.wrap[data-focus] .phones>*:not(.focus){display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- Pick Your Brawler (approved Oct 16; reference copy: brawler-select.html). Everything scoped under .bs ---------- */
.phone.bs{--g:64%;--bs-step6:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  --bs-step4:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.bs .stands{width:110%}
.bs .dirt{height:54%}
@keyframes bs-idle{50%{translate:0 -4px}}
/* Back chip, top left. */
.bs .bs-back{position:absolute;top:20px;left:16px;z-index:4;border:0;padding:0;background:none;cursor:pointer}
.bs .bs-back b{display:flex;align-items:center;gap:6px;font:700 12px/1 var(--f-pixel);color:var(--ink);background:#fff;padding:7px 10px 9px 8px;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:var(--bs-step4)}
.bs .bs-back b:before{content:"";width:8px;height:12px;background:var(--ink);clip-path:polygon(100% 0,50% 0,50% 25%,25% 25%,25% 40%,0 40%,0 60%,25% 60%,25% 75%,50% 75%,50% 100%,100% 100%)}
.bs .bs-back:active{translate:0 2px}
/* Name: big white pixel type on a gold plate, hard navy drop, tilted. Owner-tuned offset baked in. */
.bs .bs-name{position:absolute;right:4%;top:24px;z-index:6;max-width:70%;text-align:center;pointer-events:none;rotate:10deg;translate:-6px 15px;scale:.9;transform-origin:right;
  font:700 30px/1.05 var(--f-pixel);color:#fff;background:var(--gold);padding:12px 16px 16px;clip-path:var(--bs-step6);
  box-shadow:inset 0 -6px 0 var(--gold-dark),inset 0 5px 0 var(--gold-light);
  text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),3px 4px 0 var(--ink),2px 5px 0 var(--ink),0 5px 0 var(--ink);
  filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(6px 7px 0 var(--ink))}
.bs .bs-name.mid{font-size:22px}
.bs .bs-name.long{font-size:16px;max-width:56%;translate:-6px 2px}
/* Brawler stands in front of the card on the grass, with a pixel shadow. Owner-tuned offset baked in. */
.bs .bs-hero{position:absolute;left:auto;right:3%;width:60%;bottom:calc(54% + 34px);aspect-ratio:1;z-index:5;display:flex;align-items:flex-end;justify-content:center;translate:5px 19px;scale:.9}
.bs .bs-hero:before{content:"";position:absolute;left:18%;right:18%;bottom:-2px;height:14px;background:rgba(11,31,63,.3);
  clip-path:polygon(0 30%,10% 30%,10% 0,90% 0,90% 30%,100% 30%,100% 70%,90% 70%,90% 100%,10% 100%,10% 70%,0 70%)}
.bs .bs-hero img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;animation:bs-idle .8s steps(1,end) infinite}
.bs .bs-hero.swap img{animation:pop .3s steps(3,end) both}
/* Trading card: gold band with the power name, white blurb, navy strip of pixel meters. */
.bs .bs-col{position:absolute;left:5%;top:88px;width:36%;translate:-2px -8px;scale:.9;z-index:4;display:flex;flex-direction:column;pointer-events:none}
.bs .bs-pcard{rotate:-2deg;transform-origin:top left}
.bs .bs-pcard>b{display:flex;flex-direction:column;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:var(--bs-step6)}
.bs .bs-power{font:700 8px/1.2 var(--f-pixel);color:var(--ink);background:var(--gold);padding:7px 8px 8px;box-shadow:inset 0 -3px 0 var(--gold-dark)}
.bs .bs-desc{font:600 10px/1.25 var(--f-body);color:var(--muted);padding:6px 8px 7px}
.bs .bs-tiles{display:flex;flex-direction:column;gap:5px;padding:7px 8px 10px;background:var(--ink)}
.bs .bs-tile{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;--c:#ff8a7a}
.bs .bs-tile.rng{--c:var(--gold)}.bs .bs-tile.rch{--c:#5ec4ff}
.bs .bs-tile b{font:13px/1 var(--f-display);color:#fff;grid-column:1;grid-row:span 2;text-align:left;min-width:24px}
.bs .bs-tile span{grid-column:2;font:700 7px/1 var(--f-pixel);color:#a9d8ff}
.bs .bs-tile i{grid-column:2;display:flex;gap:2px}
.bs .bs-tile i em{flex:1;height:7px;background:var(--c)}
.bs .bs-tile i em.off{background:#3a5278}
/* Roster: 6 wide, white stepped cards; picked one turns gold; empty slots are blue "?" cards. */
.bs .bs-grid{position:absolute;top:calc(46% + 10px);left:6%;right:6%;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:5px 7px}
.bs .bs-slot{position:relative;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer}
.bs .bs-slot b{display:grid;place-items:center;width:100%;height:100%;background:#fff;box-shadow:inset 0 -4px 0 #a4e8ff;clip-path:var(--bs-step4)}
.bs .bs-slot img{width:82%;height:82%;object-fit:contain;image-rendering:pixelated;margin-top:-2px}
.bs .bs-slot:active{translate:0 2px}
.bs .bs-slot.on b{background:var(--gold);box-shadow:inset 0 -4px 0 var(--gold-dark)}
.bs .bs-slot.on{animation:pop .3s steps(3,end) both}
.bs .bs-slot.locked{cursor:default}
.bs .bs-slot.locked b{background:#2f86d8;box-shadow:inset 0 4px 0 #1f63a8;font:18px/1 var(--f-display);color:#a9d8ff}
.bs .bs-slot.locked b:before{content:"?";animation:blink 1s steps(1,end) infinite}
/* Lock In: the shared gold button. */
.bs .play-wrap{left:20%;right:20%;bottom:calc(5% - 2px)}
.bs .play-wrap.locked-in .play{background:#fff;box-shadow:inset 0 -8px 0 #a4e8ff,inset 0 5px 0 #fff}
.bs .play-wrap.locked-in .play:after,.bs .play-wrap.locked-in .arrow{display:none}