/* Pipe kit: the copper-pipe blueprint look for lobbies and results (Arena, class games).
   One source: build_arena.py copies it into public/arena.css (Arena shadow root) and public/pipekit.css (class screens). */
.pk{--pk-cut:12px;--pk-steel:#5F7DC0;--pk-steel2:#2A3F7A;--pk-fill1:#14275A;--pk-fill2:#0B1638;--pk-gold:#FFC93C;--pk-gold2:#E08A00;--pk-cu1:#5A220A;--pk-cu2:#B9572080;--pk-ink:#EAF1FF;
  --pk-chamfer:polygon(var(--pk-cut) 0,calc(100% - var(--pk-cut)) 0,100% var(--pk-cut),100% calc(100% - var(--pk-cut)),calc(100% - var(--pk-cut)) 100%,var(--pk-cut) 100%,0 calc(100% - var(--pk-cut)),0 var(--pk-cut));
  --pk-copper:linear-gradient(180deg,#4A1A06 0%,#A9481A 18%,#F0A06A 38%,#FFE0C2 46%,#E58A4F 58%,#9A3F14 82%,#3E1404 100%);
  --pk-brass:linear-gradient(180deg,#3B2A10 0%,#B08A3A 25%,#FFF0B8 45%,#D2A44A 62%,#6E5218 100%);
  --pk-shout:var(--shout,"Lilita One"),"Barlow Condensed",Impact,sans-serif;
  position:relative;color:var(--pk-ink)}
/* the blueprint behind everything: painted art when it's loaded, a drawn grid underneath */
.pk-bg{background:
  radial-gradient(90% 60% at 50% 40%,transparent 40%,rgba(3,8,26,.55) 100%),
  linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(rgba(255,255,255,.09) 1.5px,transparent 1.5px) 0 0/110px 110px,
  linear-gradient(90deg,rgba(255,255,255,.09) 1.5px,transparent 1.5px) 0 0/110px 110px,
  radial-gradient(120% 80% at 50% 0%,#1D4BAF,#123482 45%,#0A1D52 100%)}
.pk-bg.art{background:radial-gradient(70% 55% at 50% 45%,rgba(8,20,60,.25),transparent 70%),var(--pk-art) center/cover no-repeat,#0F2C74}

/* a framed box with cut corners: steel edge, deep navy fill */
.pk-box{position:relative;isolation:isolate;clip-path:var(--pk-chamfer);background:linear-gradient(160deg,var(--pk-bd1,#7E9BDA),var(--pk-bd2,#24386E) 55%,var(--pk-bd1,#7E9BDA));padding:2.5px}
.pk-box::before{content:"";position:absolute;inset:2.5px;z-index:-1;clip-path:polygon(calc(var(--pk-cut) - 1px) 0,calc(100% - var(--pk-cut) + 1px) 0,100% calc(var(--pk-cut) - 1px),100% calc(100% - var(--pk-cut) + 1px),calc(100% - var(--pk-cut) + 1px) 100%,calc(var(--pk-cut) - 1px) 100%,0 calc(100% - var(--pk-cut) + 1px),0 calc(var(--pk-cut) - 1px));
  background:linear-gradient(115deg,rgba(255,255,255,.06) 0 30%,transparent 30% 70%,rgba(255,255,255,.03) 70%),linear-gradient(180deg,var(--pk-fill1),var(--pk-fill2))}
.pk-box.gold{--pk-bd1:#FFE08A;--pk-bd2:#B86A00}
.pk-box.glow{filter:drop-shadow(0 0 10px rgba(80,150,255,.35))}
.pk-box.gold.glow{filter:drop-shadow(0 0 12px rgba(255,190,40,.45))}

/* a copper pipe, horizontal or vertical, with brass collars */
.pk-pipe{position:absolute;height:16px;background:var(--pk-copper);border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.45)}
.pk-pipe.v{width:16px;height:auto;background:linear-gradient(90deg,#4A1A06 0%,#A9481A 18%,#F0A06A 38%,#FFE0C2 46%,#E58A4F 58%,#9A3F14 82%,#3E1404 100%)}
.pk-pipe::before,.pk-pipe::after{content:"";position:absolute;top:-4px;bottom:-4px;width:12px;border-radius:3px;background:var(--pk-brass);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.pk-pipe::before{left:6px}.pk-pipe::after{right:6px}
.pk-pipe.v::before,.pk-pipe.v::after{left:-4px;right:-4px;width:auto;height:12px;background:linear-gradient(90deg,#3B2A10 0%,#B08A3A 25%,#FFF0B8 45%,#D2A44A 62%,#6E5218 100%)}
.pk-pipe.v::before{top:6px;bottom:auto}.pk-pipe.v::after{bottom:6px;top:auto}

/* the title plaque: big shout text, a steel ribbon underneath, copper pipes into each side */
.pk-plaque{position:relative;margin:6px 14px 14px;text-align:center}
.pk-plaque .pk-box{--pk-cut:18px;--pk-bd1:#9FB6E8;--pk-bd2:#2C4386;padding:3px}
.pk-plaque .pk-in{padding:14px 18px 26px}
.pk-plaque small{display:block;font:800 12px/1 var(--body,Barlow),system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#9FC2FF;margin-bottom:6px}
.pk-plaque h1{margin:0;font:400 clamp(26px,8.4vw,44px)/.95 var(--pk-shout);text-transform:uppercase;letter-spacing:.01em;color:#EEF3FF;-webkit-text-stroke:.14em #08112E;paint-order:stroke fill;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45));white-space:nowrap}
.pk-plaque h1 em{font-style:normal;color:#FFC629;text-shadow:0 -1px 0 #FFF3B0}
.pk-plaque>.pk-pipe{top:calc(50% - 14px);width:34px}
.pk-plaque>.pk-pipe.l{left:-26px}.pk-plaque>.pk-pipe.r{right:-26px}
.pk-rib{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);--pk-cut:10px;min-width:56%}
.pk-rib .pk-box{--pk-bd1:#8FA9E0;--pk-bd2:#1E2F63}
.pk-rib span{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 18px;font:400 clamp(17px,5vw,22px)/1 var(--pk-shout);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#fff}
.pk-rib span::before,.pk-rib span::after{content:"";width:18px;height:2px;background:#7FA4EE;border-radius:2px}

/* info strip: icon, small label, value, split by thin rules */
.pk-strip .pk-in{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.pk-cell{display:flex;align-items:center;gap:7px;padding:9px 8px;min-width:0}
.pk-cell+.pk-cell{border-left:1.5px solid rgba(140,175,240,.28)}
.pk-cell svg{flex:none;width:26px;height:26px}
.pk-cell div{min-width:0}
.pk-cell small{display:block;font:800 10.5px/1 var(--body,Barlow),system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8FB0EE}
.pk-cell b{display:block;margin-top:3px;font:800 14px/1.12 var(--body,Barlow),system-ui,sans-serif;color:#fff;overflow-wrap:break-word}

/* twist banner */
.pk-twist .pk-in{display:flex;align-items:center;gap:12px;padding:10px 14px}
.pk-twist svg{flex:none;width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(255,200,40,.6))}
.pk-twist b{display:block;font:400 19px/1 var(--pk-shout);letter-spacing:.04em;text-transform:uppercase;color:var(--pk-gold)}
.pk-twist span{display:block;margin-top:3px;font:600 13.5px/1.3 var(--body,Barlow),system-ui,sans-serif;color:#E6EEFF}

/* a panel with a tab title sitting on its top edge */
.pk-panel{position:relative;margin-top:16px}
.pk-panel>.pk-box{--pk-cut:16px}
.pk-panel>.pk-box>.pk-in{padding:30px 12px 12px}
.pk-tab{position:absolute;left:50%;top:-15px;transform:translateX(-50%);z-index:2;--pk-cut:12px}
.pk-tab .pk-box{--pk-bd1:#A9C0F0;--pk-bd2:#2B4386}
.pk-tab span{display:flex;align-items:center;gap:12px;padding:6px 22px;font:400 clamp(20px,6vw,26px)/1 var(--pk-shout);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:#fff;-webkit-text-stroke:.1em #08112E;paint-order:stroke fill}
.pk-tab span::before,.pk-tab span::after{content:"";width:16px;height:2.5px;background:#FFB23C;border-radius:2px}
.pk-phead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px 2px 10px;font:800 13px/1.2 var(--body,Barlow),system-ui,sans-serif;color:#9FC2FF}
.pk-phead b{font:400 18px/1 var(--pk-shout);color:#fff;letter-spacing:.04em}
.pk-spin{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border-radius:50%;border:2.5px solid var(--pk-gold);border-right-color:transparent;animation:pkSpin .8s linear infinite}
@keyframes pkSpin{to{transform:rotate(360deg)}}

/* player cards, two to a row */
.pk-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pk-cards.tight{gap:7px}
.pk-card{--pk-cut:10px;min-width:0}
.pk-card .pk-box{--pk-bd1:color-mix(in srgb,var(--c,#5F7DC0) 70%,#9FB6E8);--pk-bd2:#1A2A5C;--pk-fill1:#17295E;--pk-fill2:#0E1A40}
.pk-card .pk-in{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 8px;min-height:58px}
.pk-card.tight .pk-in{min-height:46px;padding:5px 8px 5px 6px;gap:8px}
.pk-card .pk-nm{min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-card .pk-nm b{font:800 16px/1.1 var(--body,Barlow),system-ui,sans-serif;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-card.tight .pk-nm b{font-size:14px}
.pk-card .pk-nm i{font:400 14px/1 var(--pk-shout);font-style:normal;letter-spacing:.06em;color:var(--pk-gold);display:flex;align-items:center;gap:4px}
.pk-card .pk-nm i svg{width:16px;height:13px}
.pk-card .pk-nm em{font:700 12px/1 var(--body,Barlow),system-ui,sans-serif;font-style:normal;color:#9FB4E4}
.pk-card.me .pk-box{--pk-bd1:#FFE38A;--pk-bd2:#C07A00;--pk-fill1:#2A2A50;--pk-fill2:#151838;padding:3px}
.pk-card.me{filter:drop-shadow(0 0 10px rgba(255,190,40,.5))}
.pk-card.in{animation:pkIn .42s cubic-bezier(.2,1.4,.4,1) both}
.pk-card.empty .pk-box{--pk-bd1:rgba(140,170,230,.35);--pk-bd2:rgba(40,60,120,.35);--pk-fill1:rgba(20,40,90,.55);--pk-fill2:rgba(10,20,50,.55)}
.pk-card.empty .pk-nm b{color:#6F86BC;font-weight:700}
.pk-card.empty .pk-hex{opacity:.45;animation:pkPulse 1.2s ease-in-out infinite}
@keyframes pkIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes pkPulse{50%{opacity:.2}}

/* hexagon portrait: coloured outer ring, dark inner ring, the character inside */
.pk-hex{--s:44px;flex:none;width:var(--s);height:calc(var(--s) * 1.08);position:relative;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,color-mix(in srgb,var(--c,#5F7DC0) 55%,#fff),var(--c,#5F7DC0) 45%,color-mix(in srgb,var(--c,#5F7DC0) 60%,#000))}
.pk-hex::before{content:"";position:absolute;inset:3px;clip-path:inherit;background:#0A1230}
.pk-hex>span{position:absolute;inset:5px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c,#5F7DC0) 40%,#fff),var(--c,#5F7DC0) 80%);overflow:hidden}
.pk-hex img{position:absolute;left:-14%;top:-4%;width:128%;height:128%;max-width:none;object-fit:cover}
.pk-hex.me{--c:#FFC93C}

/* the countdown: gold hexagon plumbed in with copper pipes */
.pk-count{position:relative;margin:4px auto 0;width:min(100%,330px);text-align:center}
.pk-count .pk-lab{position:relative;z-index:2;display:inline-block;--pk-cut:9px;margin-bottom:-4px}
.pk-count .pk-lab .pk-box{--pk-bd1:#8FA9E0;--pk-bd2:#1E2F63}
.pk-count .pk-lab span{display:block;padding:6px 18px;font:400 15px/1 var(--pk-shout);letter-spacing:.08em;text-transform:uppercase;color:#E6EEFF;white-space:nowrap}
.pk-count .pk-arm{top:calc(50% + 4px);width:calc(50% - 50px)}
.pk-count .pk-arm.l{left:0}.pk-count .pk-arm.r{right:0}
.pk-hexbig{position:relative;z-index:1;margin:0 auto;width:118px;height:112px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(180deg,#FFF2A8,#FFB800 40%,#A85A00);display:grid;place-items:center}
.pk-hexbig::before{content:"";position:absolute;inset:6px;clip-path:inherit;background:linear-gradient(180deg,#1C2E66,#0A1438)}
.pk-hexbig::after{content:"";position:absolute;inset:13px;clip-path:inherit;box-shadow:inset 0 0 0 2px #FFC93C;background:radial-gradient(circle at 50% 40%,rgba(255,200,60,.18),transparent 65%)}
.pk-hexbig b{position:relative;z-index:1;font:400 64px/1 var(--pk-shout);background:linear-gradient(180deg,#FFFDE8 0%,#FFF39A 22%,#FFD21F 40%,#FFB000 70%,#FF7A00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #2B0F00;paint-order:stroke fill;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.pk-hexbig b.pop{animation:pkNum .55s cubic-bezier(.2,1.6,.4,1) both}
.pk-hexbig .pk-spin{position:relative;z-index:1;width:34px;height:34px;margin:0;border-width:5px}
@keyframes pkNum{from{transform:scale(1.9);opacity:0}to{transform:none;opacity:1}}
.pk-count.art{width:min(100%,360px)}
.pk-count.art .pk-hexbig{width:100%;height:auto;aspect-ratio:768/362;clip-path:none;background:url(img/ui/pk_count.webp) center/contain no-repeat}
.pk-count.art .pk-hexbig::before,.pk-count.art .pk-hexbig::after,.pk-count.art .pk-arm,.pk-count .pk-frame{display:none}
.pk-count.art .pk-lab{margin-bottom:-14px}
.pk-count.art .pk-hexbig b{font-size:70px}

/* buttons: chunky cut-corner slabs with a thick bottom lip, a glossy top, a shine that sweeps across, and a springy press */
.pk-btn{appearance:none;border:0;background:none;padding:0 0 7px;display:block;width:min(100%,360px);margin:6px auto 0;cursor:pointer;--pk-cut:14px;--lip:#0B1530;color:#fff;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s cubic-bezier(.3,1.6,.5,1),filter .2s}
.pk-btn::before{content:"";position:absolute;left:0;right:0;top:7px;bottom:0;clip-path:var(--pk-chamfer);background:var(--lip);transition:top .08s}
.pk-btn>.pk-box{--pk-bd1:#B8CCF4;--pk-bd2:#2B4386;--pk-fill1:#2A4590;--pk-fill2:#14255C;padding:3px;transition:transform .08s ease-out;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.pk-btn .pk-in{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:8px 18px;font:400 22px/1 var(--pk-shout);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.pk-btn .pk-in::before{content:"";position:absolute;left:0;right:0;top:0;height:48%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.06));pointer-events:none}
.pk-btn .pk-in::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:pkShine 3.6s 1.2s ease-in-out infinite;pointer-events:none}
.pk-btn svg{width:28px;height:28px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.pk-btn.gold{--lip:#7A3C00}
.pk-btn.gold>.pk-box{--pk-bd1:#FFF4C4;--pk-bd2:#C77A00;--pk-fill1:#FFD54A;--pk-fill2:#F28C00}
.pk-btn.gold .pk-in{color:#3A1E00;text-shadow:0 1.5px 0 rgba(255,240,180,.7)}
.pk-btn.gold{animation:pkBreathe 2.4s ease-in-out infinite}
.pk-btn:not(.gold) .pk-in::after{animation-duration:5.5s;opacity:.6}
@media (hover:hover){.pk-btn:hover{filter:brightness(1.08) drop-shadow(0 0 14px rgba(120,170,255,.45))}.pk-btn.gold:hover{filter:brightness(1.06) drop-shadow(0 0 16px rgba(255,190,40,.6))}}
.pk-btn:active,.pk-btn.down{transform:scale(.97)}
.pk-btn:active>.pk-box,.pk-btn.down>.pk-box{transform:translateY(6px);filter:none}
.pk-btn:active::before,.pk-btn.down::before{top:10px}
.pk-btn.pop{animation:pkPress .38s cubic-bezier(.3,1.8,.5,1)}
.pk-btn.gold:active,.pk-btn.gold.down{animation:none}
.pk-btn:focus-visible{outline:3px solid #FFD964;outline-offset:4px}
.pk-btn[disabled]{opacity:.5;animation:none;cursor:default}
@keyframes pkShine{0%,70%{left:-60%}100%{left:130%}}
@keyframes pkBreathe{50%{transform:scale(1.025)}}
@keyframes pkPress{0%{transform:scale(.95)}60%{transform:scale(1.04)}100%{transform:none}}
.pk-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-row .pk-btn{width:100%;margin:0}
.pk-row .pk-btn .pk-in{font-size:19px;padding:8px 10px;white-space:nowrap}
.pk-row .pk-btn.gold{animation:none}
.pk-step.p1 .pk-hex{filter:drop-shadow(0 0 12px rgba(255,200,60,.8))}

/* small notes and how-to-play lines */
.pk-how .pk-in{display:grid;gap:5px;padding:10px 14px;font:600 13px/1.35 var(--body,Barlow),system-ui,sans-serif;color:#C9D8F7}
.pk-how .pk-in span{display:flex;gap:8px}
.pk-how .pk-in span::before{content:"";flex:none;width:7px;height:7px;margin-top:6px;transform:rotate(45deg);background:var(--pk-gold);border-radius:1px}

/* results: podium blocks become copper-trimmed steel */
.pk-pod{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px}
.pk-step{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pk-step .pk-who{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;animation:pkIn .5s var(--d,0s) both}
.pk-step .pk-who b{font:800 14px/1.1 var(--body,Barlow),system-ui,sans-serif;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pk-step .pk-who em{font:400 18px/1 var(--pk-shout);font-style:normal;color:var(--pk-gold)}
.pk-blk{width:100%;--pk-cut:10px;animation:pkRise .6s var(--d,0s) cubic-bezier(.2,1.2,.4,1) both;transform-origin:bottom}
.pk-blk .pk-in{display:grid;place-items:center;font:400 40px/1 var(--pk-shout);color:#fff;-webkit-text-stroke:.1em #08112E;paint-order:stroke fill}
.pk-step.p1 .pk-blk .pk-in{height:110px}.pk-step.p2 .pk-blk .pk-in{height:80px}.pk-step.p3 .pk-blk .pk-in{height:58px}
.pk-step.p1 .pk-box{--pk-bd1:#FFE38A;--pk-bd2:#B86A00;--pk-fill1:#7A4A06;--pk-fill2:#3A2206}
.pk-step.p2 .pk-box{--pk-bd1:#E6EEF8;--pk-bd2:#6C7C98;--pk-fill1:#46536E;--pk-fill2:#232B40}
.pk-step.p3 .pk-box{--pk-bd1:#F2B27A;--pk-bd2:#8A3E12;--pk-fill1:#6A2E10;--pk-fill2:#331606}
.pk-step.me .pk-who b{color:var(--pk-gold)}
@keyframes pkRise{from{transform:scaleY(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.pk *{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* Arena results: the headline framed like the lobby plaque */
.rs-frame{position:relative;margin:4px 12px 16px}
.rs-frame>.pk-box{--pk-cut:18px;padding:3px}
.rs-frame .rs-hero{border-radius:0;box-shadow:none;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);padding-bottom:26px}
.rs-frame>.pk-pipe{top:46%;width:34px}.rs-frame>.pk-pipe.l{left:-26px}.rs-frame>.pk-pipe.r{right:-26px}
.rs-frame h1{font-family:var(--pk-shout);font-weight:400}
.rs-frame .pk-rib{bottom:-14px}
.rs-pks .pk-cell{flex-direction:column;align-items:flex-start;padding:9px 10px}
.rs-pks .pk-cell b{font:400 22px/1 var(--pk-shout);color:var(--c,#fff);margin-top:4px}
.rs-podp .pk-in{padding-top:40px!important}
.pk-step .pk-who{position:relative}
.pk-step .rs-crown{position:absolute;top:-30px;left:58%;width:40px;height:40px;transform:rotate(-12deg);z-index:2;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
/* player icons: a bevelled metal hexagon in the player's colour, with a glossy top and a small rivet at each corner */
.pk-hex{background:
  radial-gradient(circle at 50% 3.5%,#fff8 0 2.2%,transparent 2.6%),radial-gradient(circle at 50% 96.5%,#0006 0 2.2%,transparent 2.6%),
  linear-gradient(180deg,color-mix(in srgb,var(--c,#5F7DC0) 35%,#fff) 0%,var(--c,#5F7DC0) 38%,color-mix(in srgb,var(--c,#5F7DC0) 55%,#000) 62%,color-mix(in srgb,var(--c,#5F7DC0) 80%,#fff) 100%)}
.pk-hex::before{inset:3px;background:linear-gradient(180deg,#050A1E,#16224A)}
.pk-hex>span::after{content:"";position:absolute;inset:0 0 52% 0;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.pk-hex.me{filter:drop-shadow(0 0 6px rgba(255,200,60,.65))}
/* podium: metal blocks with a lit top face, a copper pipe trim, corner rivets and a medal number */
.pk-blk{position:relative}
.pk-step .pk-who{margin-bottom:10px}
.pk-blk::before{content:"";position:absolute;left:4px;right:4px;top:-9px;height:11px;z-index:1;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--top1,#C7D6F5),var(--top2,#6C82B8))}
.pk-step.p1 .pk-blk{--top1:#FFF1B0;--top2:#D69A12}.pk-step.p2 .pk-blk{--top1:#FFFFFF;--top2:#9AA8C2}.pk-step.p3 .pk-blk{--top1:#FFD0A8;--top2:#B5622A}
.pk-blk .pk-in{position:relative;align-content:center;background:
  radial-gradient(circle at 12px 12px,rgba(255,255,255,.55) 0 2.5px,rgba(0,0,0,.4) 3px,transparent 4px),radial-gradient(circle at calc(100% - 12px) 12px,rgba(255,255,255,.55) 0 2.5px,rgba(0,0,0,.4) 3px,transparent 4px),
  radial-gradient(circle at 12px calc(100% - 12px),rgba(255,255,255,.55) 0 2.5px,rgba(0,0,0,.4) 3px,transparent 4px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),rgba(255,255,255,.55) 0 2.5px,rgba(0,0,0,.4) 3px,transparent 4px),
  linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%)}
.pk-blk .pk-in::before{content:"";position:absolute;left:0;right:0;top:20px;height:10px;background:var(--pk-copper);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.pk-med{position:relative;z-index:1;display:grid;place-items:center;width:1.45em;height:1.45em;margin-top:14px;border-radius:50%;font:400 1em/1 var(--pk-shout);-webkit-text-stroke:0;color:#3A2200;background:radial-gradient(circle at 35% 30%,#FFF8D0,#FFC93C 45%,#C27800 100%);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 4px 0 rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.2)}
.pk-step.p2 .pk-med{color:#2A3346;background:radial-gradient(circle at 35% 30%,#FFFFFF,#D6DEEA 45%,#7D8BA6 100%)}
.pk-step.p3 .pk-med{color:#3A1606;background:radial-gradient(circle at 35% 30%,#FFE0C4,#E39A5E 45%,#8A4518 100%)}
.pk-step.p1 .pk-med{animation:pkMed 2.2s 1s ease-in-out infinite}
@keyframes pkMed{50%{transform:scale(1.08) rotate(-4deg)}}
/* light beams behind the winner */
.pk-step.p1{position:relative;isolation:isolate}
.pk-step.p1::before{content:"";position:absolute;left:50%;top:-30px;width:260%;aspect-ratio:1;transform:translateX(-50%);z-index:-1;background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(255,220,120,.16) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle at 50% 30%,#000 10%,transparent 55%);mask:radial-gradient(circle at 50% 30%,#000 10%,transparent 55%);animation:pkRays 30s linear infinite;pointer-events:none}
@keyframes pkRays{to{transform:translateX(-50%) rotate(360deg)}}
/* painted portrait frames (pk_hex_steel / pk_hex_gold): the portrait sits in the hexagon window under the frame */
.pk-hex.art{clip-path:none;background:none;height:var(--s);width:var(--s)}
.pk-hex.art::before{display:none}
.pk-hex.art>span{inset:12.5% 16.5% 12% 16.5%}
.pk-hex.art::after{content:"";position:absolute;inset:-3%;background:url(img/ui/pk_hex_steel.webp) center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.pk-hex.art.gold::after{background-image:url(img/ui/pk_hex_gold.webp)}
.pk-hex.art.me{filter:drop-shadow(0 0 7px rgba(255,190,40,.55))}
/* painted podium (pk_podium): names stand on the blocks, place numbers sit in the round windows */
.pk-pod.art{display:block;position:relative;flex:none;height:auto;container-type:inline-size;aspect-ratio:1024/823;background:url(img/ui/pk_podium.webp) bottom center/100% 54.6% no-repeat;margin-top:4px}
.pk-pod.art .pk-step{position:absolute;width:31%;translate:-50% 0;display:flex;flex-direction:column;align-items:center}
.pk-pod.art .pk-step.p2{left:17.6%;bottom:43.8%}.pk-pod.art .pk-step.p1{left:49.8%;bottom:54.2%}.pk-pod.art .pk-step.p3{left:82.3%;bottom:38.9%}
.pk-pod.art .pk-who{margin-bottom:2%}
.pk-podn{position:absolute;translate:-50% -50%;font:400 9.5cqw/1 var(--pk-shout);background:linear-gradient(180deg,#FFFDE8,#FFD21F 45%,#FF8A00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.07em #2B0F00;paint-order:stroke fill;filter:drop-shadow(0 .05em 0 rgba(0,0,0,.6));animation:pkIn .5s .6s both}
.pk-podn.n2{left:17.6%;top:81.8%;font-size:8cqw;background:linear-gradient(180deg,#FFFFFF,#D6DEEA 50%,#8A97B2);-webkit-background-clip:text;background-clip:text}
.pk-podn.n1{left:49.8%;top:77.2%}
.pk-podn.n3{left:82.3%;top:84.2%;font-size:7.5cqw;background:linear-gradient(180deg,#FFE6CF,#E39A5E 50%,#9A4A18);-webkit-background-clip:text;background-clip:text}
.pk-pod.art .pk-step.p1::before{top:-10%}
.pk-strip .pk-in{grid-template-columns:1.3fr 1fr .9fr}
.pk-strip[style*="--n:4"] .pk-in,.rs-pks .pk-in{grid-template-columns:repeat(4,minmax(0,1fr))}
.pk-podn.n1{font-size:13cqw}.pk-podn.n2{font-size:11cqw}.pk-podn.n3{font-size:10.5cqw}
.pk-strip.two .pk-in{grid-template-columns:1fr 1fr}