*{box-sizing:border-box}html{background:#021a13}body{margin:0;color:#fff9e8;font-family:Arial,Helvetica,sans-serif;min-height:100svh;background:#021a13 url('assets/arena-tunnel.png') center top/cover fixed no-repeat}body:before{content:'';position:fixed;inset:0;background:linear-gradient(#001a1455,transparent 40%,#00181133);pointer-events:none}.app{position:relative;width:min(100%,780px);margin:auto;min-height:100svh;padding:clamp(22px,4svh,45px) 0 20px;text-align:center;overflow:hidden}header{position:relative;z-index:6;padding:0 12px}h1{margin:0;color:#fffdf3;text-transform:uppercase;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-stretch:condensed;font-weight:950;font-size:clamp(34px,7vw,64px);line-height:.98;letter-spacing:.2px;text-shadow:0 3px 0 #19221c,0 6px 16px #000a}h1 span{display:inline-block;color:#f7cb51;font-size:1.13em;margin-top:4px;text-shadow:0 2px 0 #98701f,0 6px 15px #000b}.intro{font-size:clamp(14px,2.5vw,20px);line-height:1.3;color:#e1e5df;margin:14px 0 0;text-shadow:0 2px 6px #000}.arena{position:relative;margin-top:8px}.track{position:relative;isolation:isolate;height:clamp(300px,49svh,520px);overflow:hidden;touch-action:pan-y;user-select:none}.player{position:absolute;left:50%;top:0;width:53%;height:100%;transform:translateX(calc(-50% + var(--slot)*65%)) scale(.76);transform-origin:center 82%;z-index:2;cursor:pointer;opacity:.85;filter:brightness(.74)}.player[data-slot='0']{transform:translateX(-50%) scale(1);z-index:3;opacity:1;filter:drop-shadow(0 5px 12px #0007)}.player[data-slot='-2'],.player[data-slot='2'],.player[data-slot='-3'],.player[data-slot='3']{opacity:0;pointer-events:none}.player.moving{transition:transform .32s ease,opacity .32s ease,filter .32s ease}.figure{position:relative;height:100%;aspect-ratio:2/3;margin:auto;pointer-events:none}.figure img,.printing{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.figure img{mask-image:linear-gradient(#000 0 82%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0 82%,transparent 100%)}.printing{filter:drop-shadow(0 2px 1px #000a)}.arrow{position:absolute;z-index:5;top:43%;border:0;background:transparent;color:#ffe374;font-size:62px;line-height:1;padding:4px 10px;cursor:pointer;text-shadow:0 0 14px #fed76366}.prev{left:2%}.next{right:2%}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,.track:focus-visible{outline:3px solid white;outline-offset:4px}.selection{position:relative;z-index:5;margin:-32px auto 0;padding:14px 20px 0;background:linear-gradient(transparent,#001a1466 30%,transparent)}.position{color:#f5ce65;font-weight:800;font-size:clamp(12px,2.5vw,17px);letter-spacing:3px;text-transform:uppercase}.name{font-size:clamp(24px,5.3vw,38px);margin:10px 0 8px;font-weight:950;line-height:1.1;text-shadow:0 3px 12px #000}.count{font-size:15px;color:#c5ccc6;font-variant-numeric:tabular-nums}.confirm{display:flex;align-items:center;justify-content:center;gap:25px;width:min(100%,410px);min-height:62px;margin:20px auto 0;padding:13px 20px;border:2px solid #ffeaa0;border-radius:999px;color:#06291d;background:linear-gradient(125deg,#edba32,#ffe98c 45%,#e5ae26);box-shadow:0 0 20px #ffd54c55,inset 0 2px 3px #fff9;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(22px,4vw,29px);font-weight:950;text-transform:uppercase;letter-spacing:1px;cursor:pointer}.confirm:hover{filter:brightness(1.08)}.confirm:active{transform:scale(.98)}#confirmation{min-height:18px;margin:11px auto 0;color:#ffe39b;font-size:13px}.slogan{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(22px,4vw,33px);font-weight:850;font-style:italic;transform:rotate(-3deg);margin:15px 0 16px;text-shadow:0 2px 6px #000}.slogan:after{content:'';display:block;width:160px;height:3px;margin:9px auto 0;background:linear-gradient(90deg,transparent,#e6bc4f,transparent);transform:rotate(-3deg)}@media(min-width:900px){body{background-size:auto 140%;background-color:#021a13}.app{box-shadow:0 0 120px #0008}}@media(max-width:440px){.track{height:clamp(300px,46svh,390px)}.player{width:55%}.figure{height:100%;width:auto;max-width:none}.selection{margin-top:-24px}.arrow{font-size:48px;padding:4px}.confirm{min-height:58px;margin-top:16px}.slogan{margin-top:12px}.name{margin-top:8px}}@media(prefers-reduced-motion:reduce){.player.moving{transition:none}}
.arrow{font-family:Arial,sans-serif;font-size:62px;line-height:1}@media(max-width:440px){.arrow{font-size:48px}}