[hidden]{display:none!important}
:root{--green:#80e800;--green-dark:#4f9800;--black:#080a08;--cream:#f5f3e8;--white:#fff;--purple:#9146ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--black);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
.topbar{height:82px;padding:0 clamp(18px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:var(--black);color:#fff;border-bottom:5px solid var(--green)}
.brand{display:flex;flex-direction:column;font-weight:1000;line-height:.78;transform:skew(-7deg)}
.brand strong{font-size:20px}.brand span{font-size:25px;color:var(--green)}
.draft-badge{padding:9px 12px;border:2px solid var(--green);font-size:11px;font-weight:1000;letter-spacing:.14em;color:var(--green)}
.voting-hero{padding:clamp(42px,7vw,82px) clamp(20px,7vw,110px);background-color:#75dc00;background-image:radial-gradient(rgba(0,0,0,.25) 1.2px,transparent 1.2px),linear-gradient(125deg,rgba(0,0,0,.97) 0 72%,rgba(0,0,0,.08) 72%);background-size:9px 9px,100% 100%;color:#fff}
.eyebrow,.mini-label{margin:0;color:var(--green);font-size:12px;font-weight:1000;letter-spacing:.16em}
.voting-hero h1{margin:18px 0 16px;font:clamp(52px,8vw,105px)/.88 Impact,"Arial Black",sans-serif;text-transform:uppercase;text-shadow:6px 6px 0 #000}
.voting-hero h1 span{color:var(--green)}
.voting-hero>p:not(.eyebrow){max-width:720px;margin:0;font-size:clamp(17px,2vw,23px);font-weight:800;line-height:1.45}
.hero-steps{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-steps span{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#fff;color:#000;border:3px solid #000;box-shadow:4px 4px 0 var(--green);font-size:12px;font-weight:1000;text-transform:uppercase}
.hero-steps b{display:grid;place-items:center;width:25px;height:25px;background:var(--green);border:2px solid #000;border-radius:50%}
.page-shell{min-height:480px;padding:clamp(34px,6vw,80px) clamp(14px,6vw,90px);background-image:radial-gradient(rgba(0,0,0,.12) 1.2px,transparent 1.2px);background-size:10px 10px}
.loading-card,.login-gate,.voting-app,.finished-card{max-width:1280px;margin:0 auto}
.loading-card{display:flex;align-items:center;justify-content:center;gap:14px;min-height:180px;background:#fff;border:5px solid #000;box-shadow:10px 10px 0 var(--green)}
.spinner{width:30px;height:30px;border:4px solid #ddd;border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-gate{padding:clamp(24px,5vw,56px);background:var(--black);color:#fff;border:6px solid #000;box-shadow:14px 14px 0 var(--green)}
.login-copy{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;max-width:920px}
.big-step,.question-number{display:grid;place-items:center;width:76px;height:76px;background:var(--green);color:#000;border:5px solid #fff;box-shadow:5px 5px 0 #000;font:42px/1 Impact,"Arial Black",sans-serif;transform:rotate(-3deg)}
.login-copy h2,.question-head h2,.summary-head h2,.finished-card h2{margin:8px 0 12px;font:clamp(38px,6vw,72px)/.95 Impact,"Arial Black",sans-serif;text-transform:uppercase}
.login-copy>div>p:last-child{max-width:820px;margin:0;color:#e9e9e9;font-size:17px;font-weight:700;line-height:1.5}
.twitch-login{display:flex;align-items:center;justify-content:center;gap:13px;width:min(100%,520px);min-height:68px;margin-top:35px;padding:15px 22px;background:var(--purple);color:#fff;border:4px solid #fff;box-shadow:7px 7px 0 var(--green);font-size:18px;font-weight:1000;text-transform:uppercase}
.twitch-login:hover{transform:translateY(-2px);box-shadow:8px 9px 0 var(--green)}
.twitch-login svg{width:30px;height:30px}
.setup-message,.account-message{margin:30px 0 0;padding:15px;background:#fff;color:#000;border:3px solid var(--green);font-weight:900}
.account-message.is-error{border-color:#ff6262;color:#9c0000}
.twitch-user,.compact-user{display:flex;align-items:center;gap:13px;background:#fff;color:#000;border:3px solid var(--green)}
.twitch-user{max-width:620px;margin-top:30px;padding:13px}
.twitch-user img,.compact-user img{object-fit:cover;background:#eee;border:3px solid #000}
.twitch-user img{width:64px;height:64px}
.twitch-user span,.compact-user span{display:flex;flex:1;flex-direction:column}
.twitch-user small,.compact-user small{color:#666;font-size:9px;font-weight:900}
.twitch-user b{font-size:19px}
.twitch-user i,.compact-user i{display:grid;place-items:center;border:3px solid #000;border-radius:50%;background:var(--green);font-style:normal;font-weight:1000}
.twitch-user i{width:38px;height:38px;font-size:23px}
.voting-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.compact-user{min-width:280px;padding:8px 11px}
.compact-user img{width:42px;height:42px}
.compact-user b{font-size:14px}.compact-user i{width:28px;height:28px}
.progress-copy{flex:1;max-width:600px;text-align:right}
.progress-copy>b{font-size:13px;letter-spacing:.12em}
.progress-track{height:14px;margin-top:8px;background:#fff;border:3px solid #000}
.progress-track span{display:block;height:100%;background:var(--green);transition:width .2s}
.category-panel,.summary-panel{padding:clamp(20px,4vw,48px);background:#fff;border:6px solid #000;box-shadow:13px 13px 0 var(--green)}
.question-head{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding-bottom:26px;border-bottom:4px solid #000}
.question-number{border-color:#000;box-shadow:4px 4px 0 var(--green)}
.question-head p,.summary-head p{margin:0;color:var(--green-dark);font-size:11px;font-weight:1000;letter-spacing:.15em}
.question-head h2{margin:7px 0;font-size:clamp(34px,5vw,62px)}
.question-head span,.summary-head span{font-size:16px;font-weight:800;line-height:1.45}
.selection-note{margin:25px 0 17px;padding:11px 14px;background:#f0f0ec;border-left:6px solid #000;font-weight:1000}
.selection-note.has-selection{background:#eaffd2;border-color:var(--green-dark);color:#255600}
.stand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.stand-card{position:relative;padding:0;background:#fff;color:#000;-webkit-text-fill-color:#000;border:4px solid #000;box-shadow:6px 6px 0 #000;text-align:left;-webkit-appearance:none;appearance:none;transition:.15s}
.stand-card:hover{transform:translateY(-3px);box-shadow:8px 9px 0 #000}
.stand-card.is-selected{background:var(--green);border-color:#000;box-shadow:8px 8px 0 #000}
.stand-card.is-selected:after{content:"✓";position:absolute;top:10px;right:10px;display:grid;place-items:center;width:43px;height:43px;background:var(--green);border:4px solid #000;border-radius:50%;font-size:25px;font-weight:1000}
.stand-photo{position:relative;display:grid;place-items:center;aspect-ratio:3/2;overflow:hidden;background:#0b0d0b;border-bottom:4px solid #000}
.stand-photo img{display:block;width:100%;height:100%;object-fit:contain}
.stand-number{position:absolute;left:9px;bottom:9px;display:grid;place-items:center;min-width:39px;height:35px;padding:0 8px;background:var(--green);color:#000;border:3px solid #000;box-shadow:3px 3px 0 #fff;font:20px/1 Impact,"Arial Black",sans-serif}
.stand-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px}
.stand-meta b{font:23px/1.05 Impact,"Arial Black",sans-serif;text-transform:uppercase}
.stand-meta span{flex:0 0 auto;font-size:10px;font-weight:1000}
.panel-actions{display:flex;justify-content:space-between;gap:16px;margin-top:36px}
.back-button,.next-button,.submit-button,.summary-back{min-height:58px;padding:13px 20px;border:4px solid #000;font-weight:1000;text-transform:uppercase}
.back-button,.summary-back{background:#fff}
.next-button,.submit-button{background:var(--green);box-shadow:6px 6px 0 #000}
.next-button{margin-left:auto;min-width:300px}
button:disabled{cursor:not-allowed;opacity:.42}
.summary-head{text-align:center;padding-bottom:25px;border-bottom:4px solid #000}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}
.summary-card{background:var(--cream);border:4px solid #000;box-shadow:5px 5px 0 #000}
.summary-copy{padding:14px}.summary-copy small{color:var(--green-dark);font-size:10px;font-weight:1000;letter-spacing:.12em}
.summary-copy b{display:block;margin:6px 0 12px;font:25px/1 Impact,"Arial Black",sans-serif;text-transform:uppercase}
.summary-copy button{padding:8px 11px;background:#fff;border:2px solid #000;font-size:10px;font-weight:1000}
.submit-button{display:block;width:100%;font-size:17px}
.summary-back{display:block;margin:18px auto 0}
.finished-card{padding:clamp(32px,6vw,72px);background:#fff;border:6px solid #000;box-shadow:14px 14px 0 var(--green);text-align:center}
.finished-check{display:grid;place-items:center;width:86px;height:86px;margin:0 auto 20px;background:var(--green);border:5px solid #000;border-radius:50%;font-size:51px;font-weight:1000;transform:rotate(-4deg)}
.finished-card h2{margin-top:8px}.finished-card>p:not(.mini-label){font-size:18px;font-weight:800}
.finished-user{margin:28px auto 0;text-align:left}
.toast{position:fixed;right:22px;bottom:22px;z-index:20;max-width:360px;padding:16px 18px;background:#000;color:#fff;border:4px solid var(--green);box-shadow:6px 6px 0 rgba(0,0,0,.35);font-weight:800;transform:translateY(180%);transition:.25s}
.toast.show{transform:none}
footer{display:flex;justify-content:space-between;gap:25px;padding:35px clamp(18px,6vw,85px);background:#000;color:#fff;border-top:6px solid var(--green);font-size:12px;font-weight:900;text-transform:uppercase}
footer a{color:var(--green)}
@media(max-width:850px){
  .voting-toolbar{align-items:stretch;flex-direction:column}.progress-copy{max-width:none;text-align:left}
  .summary-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .topbar{height:72px}.draft-badge{font-size:9px}
  .voting-hero{padding:38px 18px 42px;background-image:radial-gradient(rgba(0,0,0,.25) 1.2px,transparent 1.2px),linear-gradient(145deg,rgba(0,0,0,.97) 0 88%,rgba(0,0,0,.08) 88%)}
  .voting-hero h1{font-size:clamp(46px,15vw,65px);text-shadow:4px 4px 0 #000}
  .voting-hero>p:not(.eyebrow){font-size:16px}.hero-steps{display:grid;grid-template-columns:1fr}
  .page-shell{padding:28px 10px 44px}
  .login-gate{padding:23px 16px;border-width:4px;box-shadow:7px 7px 0 var(--green)}
  .login-copy{grid-template-columns:52px 1fr;gap:12px}.big-step,.question-number{width:52px;height:52px;border-width:3px;font-size:29px;box-shadow:3px 3px 0 #000}
  .login-copy h2{font-size:34px}.login-copy>div>p:last-child{font-size:14px}
  .twitch-login{min-height:60px;font-size:15px}
  .compact-user{min-width:0}.category-panel,.summary-panel{padding:18px 12px;border-width:4px;box-shadow:7px 7px 0 var(--green)}
  .question-head{grid-template-columns:48px 1fr;gap:11px;padding-bottom:18px}.question-number{width:46px;height:46px}
  .question-head h2{font-size:31px}.question-head span{font-size:13px}
  .selection-note{margin:18px 0 14px;font-size:13px}
  .stand-grid{grid-template-columns:1fr;gap:20px}.stand-card{border-width:3px;box-shadow:4px 4px 0 #000}
  .stand-meta{padding:12px}.stand-meta b{font-size:21px}.stand-card.is-selected:after{width:36px;height:36px;border-width:3px;font-size:21px}
  .panel-actions{position:sticky;bottom:0;z-index:5;margin:24px -12px -18px;padding:12px;background:#fff;border-top:4px solid #000}
  .back-button,.next-button{min-width:0;min-height:54px;padding:9px 10px;font-size:11px}.back-button{flex:0 0 34%}.next-button{flex:1}
  .summary-head h2{font-size:39px}.submit-button{font-size:14px}
  .finished-card{padding:32px 17px;border-width:4px;box-shadow:7px 7px 0 var(--green)}
  .finished-card h2{font-size:40px}.toast{right:12px;bottom:12px;left:12px;max-width:none}
  footer{display:block;text-align:center}footer span{display:block;margin-top:9px}
}


/* Vorschau vor der Twitch-Anmeldung */
.login-preview{margin-top:34px;padding:22px;background:#171b17;border:3px solid var(--green)}
.preview-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:17px}
.preview-heading h3{margin:6px 0 0;font:32px/1 Impact,"Arial Black",sans-serif;text-transform:uppercase}
.preview-heading>span{max-width:520px;color:#d8d8d8;font-size:13px;font-weight:800;line-height:1.45}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.preview-tile{position:relative;margin:0;background:#fff;border:3px solid #fff;box-shadow:4px 4px 0 var(--green);overflow:hidden}
.preview-tile img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#090b09}
.preview-tile b{display:flex;align-items:center;gap:8px;padding:10px;background:#fff;color:#000;font-size:11px;font-weight:1000}
.preview-tile b span{display:grid;place-items:center;width:25px;height:25px;background:var(--green);border:2px solid #000;font:14px/1 Impact,"Arial Black",sans-serif}
.preview-note{margin:16px 0 0;color:#bfc4bd;font-size:11px;font-weight:800}
@media(max-width:680px){
  .login-preview{margin-top:24px;padding:14px 10px}
  .preview-heading{display:block;margin-bottom:13px}.preview-heading h3{font-size:25px}
  .preview-heading>span{display:block;margin-top:8px;font-size:12px}
  .preview-grid{gap:7px}
  .preview-tile{border-width:2px;box-shadow:3px 3px 0 var(--green)}
  .preview-tile b{display:block;min-height:46px;padding:7px 5px;font-size:8px;line-height:1.15}
  .preview-tile b span{width:20px;height:20px;margin-bottom:4px;border-width:1px;font-size:11px}
  .preview-note{font-size:10px;line-height:1.35}
}


/* Twitch-Anmeldung erst nach der Auswahl */
.final-auth{margin:30px 0 22px;padding:24px;background:var(--black);color:#fff;border:4px solid #000;box-shadow:7px 7px 0 var(--green)}
.final-auth-copy{max-width:820px}
.final-auth-copy h3{margin:7px 0 9px;font:36px/1 Impact,"Arial Black",sans-serif;text-transform:uppercase}
.final-auth-copy>p:last-child{margin:0;color:#dedede;font-size:14px;font-weight:800;line-height:1.45}
.final-login{margin-top:22px}
.final-user{margin-top:22px}
.final-message{margin-top:14px}
.final-setup{margin-top:20px;padding:14px;background:#fff;color:#000;border:3px solid var(--green);font-weight:900}
@media(max-width:680px){
  .final-auth{padding:19px 13px;margin-top:23px}
  .final-auth-copy h3{font-size:30px}
  .final-login{width:100%;font-size:14px}
}


/* Datenschutz-Hinweis beim Twitch-Login */
.privacy-note{max-width:720px;margin:18px 0 0;color:#d7d7d7;font-size:12px;font-weight:700;line-height:1.5}.privacy-note a{color:var(--green);font-weight:1000;text-decoration:underline;text-underline-offset:3px}@media(max-width:680px){.privacy-note{font-size:11px}}