:root{color-scheme:light;--blue:#214d99;--red:#b33643;--text:#303039;--paper:#eae7df}
body{height:100svh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:18px 28px 12px;background:radial-gradient(ellipse at 12% 40%,#d2deed99,transparent 55%),radial-gradient(ellipse at 90% 60%,#eed5d799,transparent 55%),#eae7df;color:var(--text);overflow:hidden;font-family:Arial,sans-serif}
.top{width:min(100%,860px);margin:auto;position:relative;z-index:1}.eyebrow{display:flex;justify-content:space-between;color:#737078;font-size:10px;font-weight:700;letter-spacing:2px}.scoreboard{display:flex;align-items:center;justify-content:center;gap:32px;margin:7px 0 10px}.score-side{display:flex;align-items:center;gap:20px;font-size:clamp(16px,1.5vw,23px);font-weight:700;min-width:180px;justify-content:center}.score-side b{font-size:38px;line-height:1;font-variant-numeric:tabular-nums;display:inline-block}.blue{color:var(--blue)}.red{color:var(--red)}.challenge{text-align:center;min-width:150px}.challenge h1{font:normal 32px hand,cursive;margin:0}.challenge>span{font-size:10px;color:#78737a;letter-spacing:.4px}.balance{height:5px;border-radius:8px;background:var(--red);overflow:visible;position:relative;box-shadow:0 2px 8px #0001}.balance>div{width:50%;height:100%;border-radius:8px;background:var(--blue);transition:width .8s cubic-bezier(.2,.8,.2,1)}.balance>span{position:absolute;left:50%;top:-2px;height:9px;width:2px;background:#eae7df}
.arena{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:30px;min-height:0;padding:12px 0 18px}article{width:min(100%,calc((100svh - 238px)*1.48));margin:0;min-width:0;transition:filter .5s;position:relative}article h2{font:normal clamp(19px,2vw,29px) hand,cursive;margin:0 0 6px;text-align:center}.spread{box-shadow:0 2px 0 #ddd9cb,0 5px 0 #c9c5bb,0 8px 0 #e0dcd3,0 16px 24px #28232c24;border-radius:5px;transition:box-shadow .5s}article.selected .spread{box-shadow:0 2px 0 #ddd9cb,0 5px 0 #c9c5bb,0 8px 0 #e0dcd3,0 18px 35px color-mix(in srgb,var(--ink),transparent 70%)}article.selected h2::after{content:' ✓';font-family:Arial;font-size:.65em}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:pre-wrap;border:0}
footer{position:relative;z-index:2}.vote-dock{display:grid;grid-template-columns:1fr 1fr;gap:30px}.team{min-width:0;--team:var(--blue)}.team[data-team=olega]{--team:var(--red)}.vote-button{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px;margin:auto;width:min(100%,440px);height:58px;padding:0 22px;border:1px solid color-mix(in srgb,var(--team),transparent 65%);border-radius:18px;background:#fffaf3b3;color:var(--team);font-size:23px;font-weight:750;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--team),transparent 85%),0 10px 24px #00000008;transition:transform .2s,box-shadow .2s,background .3s,color .3s;animation:invite 4.8s ease-in-out infinite;touch-action:manipulation}.team:nth-child(2) .vote-button{animation-delay:2.4s}.vote-button::before{content:'';position:absolute;inset:-50%;z-index:-1;background:linear-gradient(110deg,transparent 40%,#ffffffa6 50%,transparent 60%);transform:translateX(-100%);animation:shine 6s infinite}.team:nth-child(2) .vote-button::before{animation-delay:3s}.button-icon{font-size:24px;font-weight:400}.button-hint{font-size:11px;font-weight:500;margin-left:auto;opacity:.8}.vote-button:hover{transform:translateY(-4px);box-shadow:0 7px 0 color-mix(in srgb,var(--team),transparent 80%),0 16px 30px #0002}.vote-button:active{transform:translateY(3px) scale(.98);box-shadow:0 1px 0 #0002}.vote-button:focus-visible{outline:3px solid var(--team);outline-offset:5px}.vote-button[aria-pressed=true]{background:var(--team);color:white;animation:none;border-color:transparent}.has-vote .vote-button{animation:none}.vote-button:disabled{cursor:wait;opacity:.55;animation:none}.supporters{height:23px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;color:#827780;padding:9px 4px 0}.supporters span+span::before{content:' · ';opacity:.5}.identity{min-height:22px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-size:10px;color:#736e75;margin-top:4px}.live-dot{width:5px;height:5px;border-radius:50%;background:#879286;box-shadow:0 0 0 3px #87928618}.online .live-dot{background:#548b71}.identity #visitor{font-weight:700}#feedback{margin-left:7px}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}.particle{position:absolute;width:7px;height:11px;border-radius:2px}.vote-ring{position:absolute;border:2px solid currentColor;border-radius:50%;width:20px;height:20px;pointer-events:none}.score-pop{animation:score-pop .5s cubic-bezier(.2,.8,.3,1)}
@keyframes invite{0%,13%,100%{transform:translateY(0)}5%{transform:translateY(-5px)}9%{transform:translateY(-2px)}}@keyframes shine{0%,65%{transform:translateX(-100%)}90%,100%{transform:translateX(100%)}}@keyframes score-pop{0%{transform:scale(1)}40%{transform:translateY(-3px) scale(1.22)}100%{transform:scale(1)}}
@media(min-width:761px) and (max-height:620px){body{padding-top:10px}.eyebrow{display:none}.scoreboard{margin:0 0 8px}.score-side b{font-size:28px}.challenge h1{font-size:26px}.vote-button{height:46px}.arena{padding:8px 0 14px}article{width:min(100%,calc((100svh - 197px)*1.48))}.supporters{height:20px}}
@media(max-width:760px){body{padding:12px 12px 10px}.eyebrow{font-size:8px;letter-spacing:1px}.scoreboard{gap:8px;margin:10px 0}.score-side{min-width:0;gap:9px;font-size:15px;flex:1}.score-side b{font-size:29px}.challenge{min-width:95px}.challenge h1{font-size:25px}.challenge>span{font-size:9px}.arena{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:14px;padding:10px 0 14px}article{width:min(100%,calc((100svh - 268px)*.74));margin:0}article h2{font-size:19px;margin-bottom:3px}.vote-dock{gap:10px}.vote-button{height:54px;border-radius:14px;padding:0 12px;gap:7px;font-size:19px}.button-hint{font-size:9px;position:absolute;bottom:5px;left:0;right:0}.vote-button>span:not(.button-hint){transform:translateY(-4px)}.supporters{font-size:9px;height:22px}.identity{font-size:9px;gap:5px}#feedback{margin-left:0}.spread{box-shadow:0 3px 0 #d2cec5,0 6px 0 #e0dcd3,0 10px 16px #28232c22}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
