@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Montserrat:wght@500;600;700;800;900&display=swap');

:root{color-scheme:dark;scroll-behavior:smooth;font-synthesis:none}
*{box-sizing:border-box}
body{--bg:#131410;--surface:#1d2019;--ink:#eff0d9;--muted:#b6b8a3;--accent:#cedc83;--secondary:#9996f1;--line:#393c2e;--heading:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--copy:Montserrat,Arial,sans-serif;--mono:'IBM Plex Mono',monospace;--margin:clamp(20px,4.5vw,76px);margin:0;color:var(--ink);background:var(--bg);font:500 15px/1.6 var(--copy)}
button,input,select{font:inherit}
button,a,select,summary{touch-action:manipulation}
button,summary{cursor:pointer}
a{color:inherit;text-decoration:none}
button{color:inherit}
:focus-visible{outline:2px solid var(--secondary);outline-offset:4px}
[hidden]{display:none!important}
p,h1,h2,h3{margin:0}
.top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:16px var(--margin);min-height:78px;border-bottom:1px solid var(--line);position:relative;z-index:2;background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px;width:max-content;font:900 18px/.86 var(--heading);letter-spacing:.055em}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;color:var(--accent);border:1px solid var(--accent);font:700 22px/1 serif;transform:rotate(-5deg)}
.login{background:transparent;border:1px solid transparent;padding:7px 11px;font-size:11px;font-weight:800;white-space:nowrap}
.login{justify-self:end;border-color:var(--line);color:var(--ink)}
.login span{color:var(--secondary);padding-right:5px}
.login:hover{border-color:var(--accent)}
.account-actions{min-width:0;justify-self:end}
.account-actions .login{
  min-height:40px;border-color:var(--secondary);box-shadow:3px 3px 0 #08050d;
  background:#27123a;color:#fff6ff;padding-inline:clamp(8px,1.4vw,18px)
}
.account-actions .login:hover{background:var(--accent);border-color:var(--accent);color:#170d25}
.account-actions .login:hover span{color:inherit}
.account-menu{position:relative}
.account-trigger{
  display:flex;align-items:center;gap:8px;list-style:none;min-width:0;
  padding:4px 9px 4px 4px;border:1px solid var(--secondary);box-shadow:3px 3px 0 #08050d;
  background:linear-gradient(100deg,#3a2053,#1c0f2b);color:#fff6ff;font-size:12px;font-weight:900
}
.account-trigger::-webkit-details-marker{display:none}
.account-trigger:hover,.account-menu[open] .account-trigger{border-color:var(--accent)}
.account-portrait{flex:none;display:grid;width:32px;height:32px}
.account-portrait .avatar{
  box-sizing:border-box;width:100%;height:100%;display:grid;place-items:center;object-fit:cover;
  border:1px solid var(--accent);border-radius:0;background:#44305b;color:var(--accent);
  font:600 11px/1 var(--mono)
}
.account-handle{max-width:clamp(70px,28vw,190px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-chevron{color:var(--accent);line-height:1}
.account-menu[open] .account-chevron{transform:rotate(180deg)}
.account-panel{
  position:absolute;z-index:3;inset:calc(100% + 8px) 0 auto auto;min-width:max-content;
  border:1px solid var(--secondary);background:#221234;box-shadow:3px 3px 0 #08050d
}
.account-panel button{background:none;border:0;padding:9px 12px;font-size:12px;font-weight:800;text-align:left}
.account-panel button:hover{color:var(--accent)}
.shell{
  --nav-size:50px;--nav-edge:var(--margin);--nav-gap:clamp(20px,2vw,28px);
  max-width:1700px;margin:auto;
  padding-inline:var(--margin) calc(var(--nav-edge) + var(--nav-size) + var(--nav-gap));
}
.side{
  position:fixed;top:56%;right:10px;
  transform:translateY(-50%);display:grid;gap:12px;z-index:4;
}
.side a{position:relative;display:grid;width:var(--nav-size);height:var(--nav-size);border-radius:50%;isolation:isolate}
.side-icon{
  display:grid;place-items:center;border:2px solid var(--secondary);border-radius:inherit;
  background:radial-gradient(circle,#ff68be48 1px,transparent 1.2px) 0 0/5px 5px,#27113f;
  color:#fff1fa;box-shadow:3px 3px #09060e;
  font:900 25px/1 Arial,sans-serif;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.side a.active .side-icon{
  background:radial-gradient(circle,#25113142 1px,transparent 1.2px) 0 0/5px 5px,var(--accent);
  border-color:#1c1025;color:#1c1025;
}
.side-label{
  position:absolute;right:calc(100% + 8px);top:50%;z-index:-1;
  padding:6px 10px;background:#1d102c;color:#fff1fa;border:2px solid var(--secondary);
  box-shadow:3px 3px #09060e;font-size:12px;font-weight:900;white-space:nowrap;
  opacity:0;transform:translate(12px,-50%) skewX(-7deg);pointer-events:none;
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.75,.3,1);
}
.side a:is(:hover,:focus-visible) .side-icon{transform:rotate(-8deg) scale(1.06);border-color:var(--accent)}
.side a:is(:hover,:focus-visible) .side-label{opacity:1;transform:translate(0,-50%) skewX(-7deg)}
main{min-width:0}
section{scroll-margin-top:22px}
.hero{position:relative;isolation:isolate;min-height:clamp(510px,47vw,750px);display:grid;grid-template-columns:1fr .95fr;align-items:center;border-bottom:1px solid var(--line)}
.hero-art{position:absolute;z-index:-1;inset:0 -2% 0 32%;overflow:hidden}
.hero-art img{width:100%;height:100%;display:block;object-fit:contain;object-position:right center;animation:art-in .65s ease both}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 24%),linear-gradient(0deg,var(--bg),transparent 17%);pointer-events:none}
.art-caption{position:absolute;z-index:1;right:2%;bottom:10%;color:var(--accent);padding:6px 8px;border:1px solid currentColor;font:700 13px/1.2 serif;writing-mode:vertical-rl;letter-spacing:.25em}
.hero-copy{padding:45px 0;animation:art-in .5s ease both}
.eyebrow{color:var(--accent);font:600 11px/1.5 var(--mono);letter-spacing:.17em;text-transform:uppercase}
.hero h1{margin:15px 0 20px;color:var(--accent);font:900 clamp(76px,10vw,162px)/.77 var(--heading);letter-spacing:-.035em}
.hero h1 span{display:block}
.hero h1 span:last-child{color:var(--ink)}
.hero-description{max-width:32ch;color:var(--muted);margin-bottom:28px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:23px;min-height:45px;padding:10px 17px;color:var(--bg);background:var(--accent);border:1px solid var(--accent);font-size:12px;font-weight:900;transition:transform .18s,box-shadow .18s}
.cta span{font-size:17px;line-height:1}
.cta:hover{transform:translateY(-3px);box-shadow:3px 4px 0 var(--secondary)}
.ballot{padding:50px 0 65px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.section-head h2,.about h2{font:900 clamp(31px,4vw,58px)/1.06 var(--heading);margin-top:7px}
.section-head>p{max-width:36ch;color:var(--muted);font-size:13px}
.voting-clock{
  --clock-color:var(--accent);display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:9px 18px;margin-bottom:11px;padding:8px 10px 8px 13px;
  background:radial-gradient(circle,#bb74dd45 1px,transparent 1.3px) 0 0/6px 6px,#21112f;
  border:1px solid #6d408c;border-left:4px solid var(--clock-color);box-shadow:3px 3px #100919;
}
.voting-clock.closed{--clock-color:var(--secondary)}
.voting-clock-copy p{
  color:var(--clock-color);font-size:clamp(11px,1.5vw,17px);font-weight:900;
}
.voting-clock-copy time{display:block;color:var(--muted);font-size:11px}
.voting-clock-digits{display:flex;gap:4px;max-width:100%}
.voting-clock-digits span{
  display:grid;justify-items:center;min-width:0;padding:3px clamp(4px,1vw,11px);
  color:#180b23;background:var(--clock-color);font-size:clamp(9px,1vw,11px);font-weight:800;
  transform:skewX(-6deg);
}
.voting-clock-digits b{font:600 clamp(15px,2.1vw,27px)/1.15 var(--mono)}
.panel-body{padding:14px 17px 16px;display:grid;gap:8px}
label,.add summary{font-size:11px;font-weight:800;color:var(--muted)}
select,input{width:100%;min-width:0;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:8px 10px;border-radius:0;font-size:13px;min-height:40px}
select{cursor:pointer}
.profile{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:45px;font-size:11px;overflow-wrap:anywhere;animation:panel-in .24s both}
.profile a{border:1px solid var(--line);padding:4px 7px;color:var(--panel-accent);font-weight:800}
.profile a:hover{border-color:currentColor}
.avatar{display:grid;place-items:center;width:32px;height:32px;object-fit:cover;background:var(--panel-accent);color:var(--bg);font-weight:900}
.add summary{padding:4px 0;color:var(--panel-accent);width:max-content}
.add form{margin-top:5px}
.input-line{display:grid;grid-template-columns:1fr auto;gap:4px;margin-top:5px}
.input-line button{border:0;background:var(--panel-accent);color:var(--bg);min-width:40px;font-weight:900}
.form-feedback{color:var(--panel-accent);font-size:11px;margin-top:5px}
.vote-choice{position:relative;display:grid;gap:4px}
.vote-choice:focus-within{z-index:2}
.vote-picker{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:38px;padding:5px 8px;text-align:left;overflow-wrap:anywhere;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
  font-size:13px;font-weight:700;
}
.vote-picker::after{
  content:"";width:6px;height:6px;flex:none;margin-right:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
}
.vote-picker[aria-expanded=true]::after{transform:rotate(225deg)}
.vote-popup{
  position:absolute;z-index:3;top:100%;left:0;right:0;min-width:0;
  padding:6px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);box-shadow:3px 4px #09060e;
}
.vote-options{max-height:min(12rem,33vh);overflow:auto;margin-top:4px}
.vote-option{
  display:block;width:100%;padding:6px 8px;border:0;background:transparent;
  color:inherit;text-align:left;overflow-wrap:anywhere;font-size:13px;
}
.vote-option[aria-selected=true]{font-weight:900}
.vote-option:hover,.vote-option.highlighted{background:var(--panel-accent);color:#170e20}
.vote-empty{padding:5px 8px;font-size:12px}
.vote-submit{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--panel-accent);background:var(--panel-accent);color:var(--bg);font-size:13px;font-weight:900}
.vote-submit:disabled{opacity:.52;cursor:default}
.vote-recorded .vote-submit{opacity:1}
.vote-note{font-size:11px;color:var(--muted);line-height:1.4}
.ballot-summary{
  margin-bottom:clamp(22px,4vw,48px);padding:clamp(9px,1.6vw,19px);
  border:2px solid #6d408c;background:#100919;box-shadow:4px 4px #09060e;
}
.ballot-summary-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:6px 14px;padding:clamp(9px,1.7vw,20px);margin-bottom:8px;
  border-bottom:2px solid var(--accent);
  background:radial-gradient(circle,#b274d344 1px,transparent 1.4px) 0 0/6px 6px,#281140;
}
.ballot-summary-head h2{
  font:900 italic clamp(22px,3.8vw,48px)/1 var(--heading);
  letter-spacing:-.045em;overflow-wrap:anywhere;
}
.ballot-summary-count{
  padding:4px 8px;background:var(--accent);color:#180b23;
  font:600 clamp(10px,1vw,14px)/1.35 var(--mono);
  box-shadow:2px 2px #09060e;transform:skewX(-6deg);
}
.ballot-summary-export{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.ballot-summary-export .cta:disabled{opacity:.56;cursor:default;transform:none}
.ballot-summary-export p{color:var(--muted);font-size:12px}
.highlights{margin-bottom:clamp(22px,4vw,48px)}
.highlights .section-head{align-items:center}
.highlights-empty{padding:12px 14px;border-left:4px solid #ffbd51;background:#251233;color:var(--muted);font-size:13px}
.highlights-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:9px;margin:0;padding:0;list-style:none}
.highlights-list li{--panel-accent:#ffbd51;min-width:0;background:#1f102d;border:2px solid #ffbd51;box-shadow:3px 3px #09060e}
.highlight-watch{
  position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  color:#fff6de;font-weight:900;
  background:linear-gradient(90deg,#170b23b5,#170b236e),url('assets/banners/moment.jpg') center 45%/cover;
}
.highlight-watch img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.highlight-watch::before{
  content:"▶";position:absolute;top:44%;left:50%;display:grid;place-items:center;width:42px;height:42px;
  transform:translate(-50%,-50%) rotate(-6deg);border:2px solid #14091d;border-radius:50%;
  background:#ffbd51;color:#14091d;box-shadow:3px 3px #09060e;font-size:17px;
}
.highlight-watch span{
  position:absolute;inset:auto 0 0;display:block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:6px 9px;background:#130a1ded;font-size:12px;
}
.highlight-watch:hover,.highlight-watch:focus-visible{color:#ffbd51}
.highlight-profile{padding:7px 9px}
#highlight-player{width:min(800px,calc(100vw - 40px));max-width:none}
#highlight-player iframe{display:block;width:100%;height:max(300px,min(50vw,440px));border:0;margin:8px 0}
#highlight-player-link{color:var(--accent);font-weight:800}
.ballot-summary-rounds{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
  margin:0;padding:0;list-style:none;
}
.ballot-summary-rounds a{
  position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;
  grid-template-rows:auto auto;align-items:center;gap:1px 9px;min-height:62px;
  height:100%;padding:7px 8px;border:1px solid #4a2e60;border-left:3px solid var(--panel-accent);
  background:#21112f;transition:background-color .18s,border-color .18s;
}
.ballot-summary-rounds a:hover,.ballot-summary-rounds a:focus-visible{background:#34194b;border-color:var(--panel-accent)}
.ballot-summary-rounds a>img{grid-row:1/3;width:42px;height:42px;object-fit:cover;border:1px solid var(--panel-accent)}
.ballot-summary-rounds strong{align-self:end;font-size:clamp(12px,1.35vw,16px);line-height:1.2;overflow-wrap:anywhere}
.ballot-summary-pick{display:flex;align-items:center;gap:6px;min-width:0;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.ballot-summary-pick .avatar{width:20px;height:20px;flex:none;font-size:9px}
.has-vote .ballot-summary-pick{color:var(--panel-accent);font-weight:800}
.ballot-summary-mark{grid-column:3;grid-row:1/3;color:var(--panel-accent);font-size:16px}
.has-vote .ballot-summary-mark{
  display:grid;place-items:center;width:28px;height:28px;border:2px solid #14091d;border-radius:50%;
  background:radial-gradient(circle,#24113135 1px,transparent 1.2px) 0 0/4px 4px,var(--panel-accent);
  color:#14091d;box-shadow:0 0 0 1px var(--panel-accent),2px 3px #09060e;
  font:900 17px/1 Arial,sans-serif;transform:rotate(-9deg);
}
@media(max-width:690px){.ballot-summary-rounds{grid-template-columns:1fr}}
.award-final{
  position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;
  min-height:clamp(245px,27vw,370px);margin-bottom:clamp(22px,4vw,48px);
  border:3px solid #e6dfca;outline:2px solid #09060e;box-shadow:5px 5px var(--accent);
  background:radial-gradient(circle,#a85cdb58 1px,transparent 1.4px) 0 0/6px 6px,#281140;
}
.award-final-art{
  position:absolute;inset:0 0 0 auto;width:62%;z-index:-1;overflow:hidden;
  clip-path:polygon(17% 0,100% 0,100% 100%,0 100%);
}
.award-final-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.award-final-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1b0d2aa8,transparent 42%)}
.award-final-copy{display:grid;justify-items:start;gap:12px;max-width:57%;padding:clamp(13px,3.5vw,49px)}
.award-final-copy h2{
  padding:5px 10px;background:#12091d;border:2px solid #e6dfca;box-shadow:3px 3px #09060e;
  color:var(--accent);font:italic 900 clamp(24px,4.7vw,63px)/1 var(--heading);
  letter-spacing:-.055em;text-transform:uppercase;transform:rotate(-2deg);
}
.award-final-copy p{max-width:38ch;font-size:clamp(12px,1.15vw,15px)}
.award-final-copy .award-final-announcement{font-size:11px;color:var(--muted)}
.award-final-date{color:var(--accent);font:600 clamp(11px,1.3vw,16px)/1.4 var(--mono)}
@media(max-width:690px){
  .award-final-art{position:relative;inset:auto;width:100%;aspect-ratio:2.25;clip-path:none}
  .award-final-art::after{background:linear-gradient(0deg,#2811409e,transparent 60%)}
  .award-final-copy{max-width:100%;padding:12px 10px 16px}
}
@media(max-height:420px){.side{top:50%;gap:6px}.shell{--nav-size:36px}}
.about{display:grid;grid-template-columns:1fr 1fr;gap:35px;border-block:1px solid var(--line);padding:38px 0 44px}
.about p:not(.eyebrow){color:var(--muted);max-width:60ch}
.about details{margin-top:16px}
.about summary{font-weight:800;color:var(--accent)}
.about details p{margin-top:7px;font-size:13px}
footer{display:flex;justify-content:space-between;gap:10px;padding:22px 0;color:var(--muted);font:600 11px/1.5 var(--mono)}
dialog{background:var(--surface);color:var(--ink);padding:26px;border:1px solid var(--accent);max-width: min(440px,calc(100vw - 32px))}
dialog::backdrop{background:#000b}
dialog form{display:grid;gap:12px}
dialog .cta{justify-self:start}
.close{position:absolute;right:8px;top:4px;border:0;background:none;font-size:23px}
.login-welcome{
  width:min(450px,calc(100% - 32px));max-width:none;
  background:radial-gradient(circle at 100% 0,#3f2257,transparent 67%),#1c102b;
  box-shadow:6px 6px 0 #08050d;color:#fff6ff
}
.login-welcome h2{padding-right:18px;color:var(--accent);font:900 clamp(26px,5vw,36px)/1.05 var(--heading)}
.login-welcome p{color:#e6d8ee;font-size:14px;max-width:34ch}
.welcome-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:4px}
.welcome-actions .cta{font-size:12px}
.welcome-later{border:1px solid #7f579e;background:#271638;padding:8px 10px;font-size:12px;font-weight:800}
.welcome-later:hover{border-color:var(--accent);color:var(--accent)}
@keyframes panel-in{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes art-in{from{opacity:.2}to{opacity:1}}

[data-theme=arcade]{--bg:#170b28;--surface:#281140;--ink:#f8f1ff;--muted:#dac8ee;--accent:#dcff37;--secondary:#ff68be;--line:#6d408c;--heading:Montserrat,Arial,sans-serif;background-image:linear-gradient(135deg,#300f4c 25%,transparent 25%),linear-gradient(315deg,#300f4c 25%,transparent 25%);background-size:44px 44px}
[data-theme=arcade] .hero{grid-template-columns:1fr;align-items:end;min-height:620px;margin-top:28px;background:#37105b;border:4px solid #100819;box-shadow:6px 6px var(--accent)}
[data-theme=arcade] .hero-art{inset:0}
[data-theme=arcade] .hero-art img{object-fit:cover;object-position:center 43%}
[data-theme=arcade] .hero-art:after{background:linear-gradient(90deg,#170626e8,transparent 80%),linear-gradient(0deg,#160822 2%,transparent 75%)}
[data-theme=arcade] .hero-copy{padding:45px 6% 38px;container-type:inline-size}
[data-theme=arcade] .hero h1{font-size:clamp(44px,6.75vw,99px);font-style:italic;line-height:.9;letter-spacing:-.09em;text-shadow:5px 5px #210c3c}
[data-theme=arcade] .hero h1 span:first-child{font-size:min(1em,8.5cqi);white-space:nowrap}
[data-theme=arcade] .hero h1 span:last-child{color:var(--accent)}
[data-theme=arcade] .art-caption{writing-mode:horizontal-tb;right:4%;bottom:5%;background:var(--accent);color:var(--bg);transform:rotate(-5deg)}
[data-theme=arcade] .cta{clip-path:polygon(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),0 6px,6px 6px)}
[data-theme=arcade] .about{background:#260d3f;padding-inline:22px}



@media(max-width:900px){
  .shell{--nav-size:46px}
  .hero{min-height:495px}
  .hero h1{font-size:clamp(57px,11vw,110px)}
  [data-theme=arcade] .hero{min-height:495px}
}
@media(max-width:690px){
  .top{grid-template-columns:1fr 1fr;gap:12px;padding:12px var(--margin)}
  .account-actions{grid-column:2;grid-row:1}
  .shell{--nav-size:40px;--nav-edge:9px;--nav-gap:16px;padding-inline-start:16px}
  .side{gap:9px}
  .side-icon{font-size:21px}
  .hero{grid-template-columns:1fr;align-items:end;min-height:525px}
  .hero-art{inset:0 -8% 18% 0}
  .hero-art img{object-position:center top}
  .hero-art:after{background:linear-gradient(0deg,var(--bg) 1%,transparent 63%)}
  .hero h1{font-size:clamp(64px,16vw,100px)}
  .hero-description{max-width:36ch;font-size:13px}
  .hero-copy{padding:24px 0}
  .art-caption{right:8%;bottom:18%}
  .section-head{align-items:start;flex-direction:column;gap:9px}
  .about{grid-template-columns:1fr;gap:15px}
  [data-theme=arcade] .hero{min-height:460px;margin-top:13px}
  [data-theme=arcade] .hero-copy{padding-bottom:25px}
  [data-theme=arcade] .hero h1{font-size:clamp(38px,10vw,63px)}
}
@media(max-width:460px){
  .hero{min-height:470px}
  .ballot{padding-top:35px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.brand-mark{display:block;object-fit:contain;border:0;transform:none;width:44px;height:44px}

[data-theme=arcade] .ballot{padding-block:28px 38px}
[data-theme=arcade] .section-head{margin-bottom:12px}
[data-theme=arcade] .board{
  display:block;isolation:isolate;padding:5px;background:#09070c;
  border:1px solid #765085;box-shadow:4px 4px #09070c;
}
.round-stage{
  --panel-accent:var(--round-color);
  position:relative;z-index:1;background:#0e0b12;
}
.round-layout{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(195px,29%);
  gap:clamp(8px,1.3vw,18px);align-items:end;
  min-height:clamp(305px,31vw,430px);
  padding:clamp(10px,1.45vw,20px) clamp(10px,1.6vw,22px) clamp(11px,1.6vw,22px) 13%;
  border:3px solid #e6dfca;
  background:#28134e;
}
.round-scene{position:absolute;inset:0;z-index:-1;isolation:isolate;overflow:hidden;pointer-events:none}
.round-scene::before{
  content:"";position:absolute;z-index:-2;inset:0 0 0 8%;
  background:
    radial-gradient(circle,#1a0a3455 .9px,transparent 1.2px) 0 0/4px 4px,
    repeating-conic-gradient(from 10deg at 56% 48%,var(--round-color) 0deg 13deg,#6532e6 14deg 22deg,var(--round-color) 23deg 34deg,#feef88 35deg 39deg);
  animation:round-burst .45s ease-out both;
}
.round-art{
  position:absolute;z-index:-1;top:0;left:12%;width:88%;height:100%;
  object-fit:cover;object-position:center 6%;
  clip-path:polygon(5% 0,100% 0,100% 100%,0 100%);
  animation:round-art-in .42s cubic-bezier(.17,.8,.27,1) both;
}
.round-frames{
  position:absolute;z-index:0;inset:-6% auto -6% -2%;
  width:13%;display:grid;grid-template-rows:1fr .8fr 1.05fr;
  gap:3px;padding:3px;background:#09070c;
  border:3px solid #e6dfca;box-shadow:4px 0 #0d0811;
  transform:rotate(-5deg);pointer-events:none;
  animation:round-frames-in .35s ease-out both;
}
.round-frames img{
  display:block;width:100%;height:100%;min-height:0;object-fit:cover;
  border:2px solid #e6dfca;filter:grayscale(1) contrast(1.36) brightness(.85);
}
.round-intro{
  position:relative;z-index:1;align-self:end;min-width:0;max-width:38ch;
  animation:round-title-in .36s .04s cubic-bezier(.16,.8,.3,1.15) both;
}
.round-intro h3{
  position:relative;isolation:isolate;display:table;margin:0 8px 0 0;
  max-width:100%;padding:7px 14px 9px;
  font:900 clamp(27px,4.1vw,61px)/.9 var(--heading);font-style:italic;
  letter-spacing:-.07em;text-transform:uppercase;overflow-wrap:anywhere;
  color:var(--round-color);text-shadow:2px 3px #0a0511;
  transform:rotate(-3deg);
}
.round-intro h3::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:#0d0912;border:2px solid #e6dfca;
  box-shadow:4px 4px #0a0511;
  transform:skew(-9deg);
}
.round-intro p{
  max-width:35ch;margin-top:8px;padding:5px 8px;
  background:#100a18;color:#faf4e9;border-left:3px solid var(--round-color);
  font-size:clamp(12px,1.05vw,14px);line-height:1.42;
}
[data-theme=arcade] .round-stage .panel-body{
  align-self:end;position:relative;z-index:1;
  min-width:0;gap:5px;padding:0;
  margin-right:calc(-1 * clamp(21px,3vw,43px));
  animation:round-form-in .3s .12s ease-out both;
}
.round-stage .vote-choice,.round-stage .add,.round-stage .profile,.round-stage .vote-submit{
  position:relative;isolation:isolate;padding:6px 13px;
  filter:drop-shadow(3px 3px #09060e);
}
.round-stage .vote-choice::before,.round-stage .add::before,.round-stage .profile::before,.round-stage .vote-submit::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border:2px solid #09060e;outline:1px solid #09060e;
  background:var(--strip,#f3eacb);transform:skewX(-8deg);
}
.round-stage .vote-choice{--strip:#f3eacb;margin-left:4px}
.round-stage .vote-choice label{color:#23172b;font-weight:900}
.round-stage .vote-picker,.round-stage .vote-search{
  min-height:34px;padding:5px 8px;color:#170e20;background:#fff8e6;
  border:1px solid #503b60;font-weight:700;
}
.round-stage .vote-popup{background:#fff8e6;color:#170e20;border:2px solid #09060e}
.round-stage .profile{
  --strip:#21122d;--avatar-size:clamp(44px,4vw,56px);
  grid-template-columns:var(--avatar-size) minmax(0,1fr) auto;
  min-height:calc(var(--avatar-size) + 16px);margin-right:3px;padding-block:8px;
  gap:10px;font-size:clamp(14px,1.25vw,17px);line-height:1.2;
}
.round-stage .profile .avatar{width:var(--avatar-size);height:var(--avatar-size)}
.round-stage .profile a{background:#190e23;font-size:11px;white-space:nowrap}
.round-stage .add{--strip:#2b143f;margin:0 9px 0 5px;padding-block:2px}
.round-stage .add form{padding-bottom:4px}
.round-stage .add summary{width:auto}
.round-stage .vote-submit{
  --strip:var(--round-color);margin:0 0 0 -3px;min-height:44px;
  border:0;background:transparent;color:#170b22;
  font-size:clamp(13px,1.4vw,20px);font-weight:900;font-style:italic;
  text-transform:uppercase;
  transition:transform .18s;
}
.round-stage .vote-submit::before{
  background:radial-gradient(circle,#240e4155 1px,transparent 1.3px) right center/5px 5px,var(--strip);
}
.round-stage .vote-submit:not(:disabled):hover{transform:translate(3px,-2px) rotate(-1deg)}
.round-stage .vote-submit:disabled{opacity:1;--strip:#c5b5bd}
.round-stage .vote-recorded .vote-submit:disabled{--strip:var(--round-color)}
.round-stage .vote-note{
  justify-self:end;margin-right:3px;padding:2px 7px;
  background:#160c22;color:#f9ecff;font-weight:700;
}
.round-shelf-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:26px;padding:2px 7px;background:#131017;border-bottom:1px solid #4b414f;
}
.round-shelf-head h3{
  padding:2px 6px;background:#e6dfca;color:#100919;
  transform:skew(-6deg);
  font:900 10px/1.3 var(--copy);text-transform:uppercase;
}
.round-progress{font:600 11px/1.3 var(--mono);color:var(--accent)}
.round-shelf{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;
  align-items:stretch;padding:9px 6px 5px;
  background:repeating-linear-gradient(135deg,#131017 0 4px,#19151d 4px 5px);
}
.round-cover{
  position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;
  padding:3px;text-align:left;color:#1a0c24;background:var(--round-color);
  border:2px solid #090510;box-shadow:2px 2px #4c315e;
  transition:transform .18s ease,box-shadow .18s ease;
}
.round-cover img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border:1px solid #180b22;
}
.round-cover span{
  display:grid;align-content:center;min-height:41px;padding:4px 3px 2px;
  font-size:clamp(10px,1vw,14px);font-weight:900;line-height:1.14;overflow-wrap:anywhere;
}
.round-cover:hover,.round-cover[aria-pressed=true]{
  transform:translateY(-5px);box-shadow:2px 3px #100919,3px 4px var(--round-color);
}
.round-cover[aria-pressed=true]{outline:1px solid var(--round-color)}
.round-cover:focus-visible{outline:2px solid #fff;outline-offset:2px}
.round-cover.picked::after{
  content:"✓";position:absolute;top:4px;right:4px;display:grid;place-items:center;
  width:20px;height:20px;background:#170b28;color:var(--round-color);
  border:1px solid currentColor;font:900 13px/1 var(--copy);
}
@keyframes round-burst{
  from{transform:scale(1.1) rotate(-2deg)}
  to{transform:scale(1) rotate(0)}
}
@keyframes round-art-in{
  from{transform:translateX(9%) scale(1.045);opacity:.45}
  to{transform:translateX(0) scale(1);opacity:1}
}
@keyframes round-frames-in{
  from{transform:translateX(-12%) rotate(-7deg)}
  to{transform:translateX(0) rotate(-5deg)}
}
@keyframes round-title-in{
  from{transform:translate(-13px,8px) rotate(-4deg);opacity:0}
  to{transform:translate(0) rotate(0);opacity:1}
}
@keyframes round-form-in{
  from{transform:translate(-14px,6px) rotate(-3deg);opacity:.35}
  to{transform:translate(0) rotate(0);opacity:1}
}
@media(max-width:1100px){
  .round-shelf{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(95px,1fr);overflow-x:auto;scroll-snap-type:x proximity}
  .round-cover{scroll-snap-align:start}
}
@media(max-width:690px){
  [data-theme=arcade] .ballot{padding-block:21px 30px}
  .round-layout{grid-template-columns:1fr;gap:8px;padding:135px 8px 8px 11%;min-height:0}
  .round-scene::before{inset:0 0 auto 0;height:205px}
  .round-art{left:11%;width:88%;height:205px;object-position:50% 43%}
  .round-frames{top:-9px;bottom:auto;height:220px;width:13%}
  .round-intro h3{font-size:clamp(25px,7.5vw,46px)}
  .round-intro p{margin-top:6px}
  [data-theme=arcade] .round-stage .panel-body{justify-self:end;width:min(100%,315px);margin-right:-15px}
  .round-stage .vote-submit:not(:disabled):hover{transform:translateY(-2px)}
  .round-shelf{grid-auto-columns:102px}
}
.vote-options,.round-shelf,html{--scroll-track:#170d25;--scroll-thumb:#cbec38}
@supports not selector(::-webkit-scrollbar){
  html,.vote-options,.round-shelf{scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
}
html::-webkit-scrollbar,.vote-options::-webkit-scrollbar,.round-shelf::-webkit-scrollbar{width:12px;height:10px}
html::-webkit-scrollbar-track,.vote-options::-webkit-scrollbar-track,.round-shelf::-webkit-scrollbar-track{background:var(--scroll-track)}
html::-webkit-scrollbar-thumb,.vote-options::-webkit-scrollbar-thumb,.round-shelf::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);border:2px solid var(--scroll-track);border-radius:9px
}
html::-webkit-scrollbar-thumb:hover,.vote-options::-webkit-scrollbar-thumb:hover,.round-shelf::-webkit-scrollbar-thumb:hover{background:#e9ff76}