:root {
  --ink: #0b0d13;
  --panel: #12151e;
  --panel-soft: #171b26;
  --panel-raised: #1c202c;
  --gold: #c9a34d;
  --gold-light: #e4c878;
  --cream: #f5f1e6;
  --muted: rgba(245, 241, 230, .58);
  --faint: rgba(245, 241, 230, .36);
  --line: rgba(255, 255, 255, .09);
  --success: #77c994;
  --danger: #ee9a87;
  --shadow: 0 22px 55px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: Manrope, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.modalOpen { overflow: hidden; }

button,
input,
select,
textarea { font: inherit; }

button,
select { cursor: pointer; }

button,
a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(228, 200, 120, .45);
  outline-offset: 3px;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand { display: flex; justify-content: center; }

.brand img {
  display: block;
  width: min(100%, 330px);
  height: auto;
}

.brand.compact { justify-content: flex-start; }

.brand.compact img { width: 180px; }

.eyebrow,
.categoryHeading > span,
.summaryHeading > span {
  margin: 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.primaryButton,
.secondaryButton,
.voteButton {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 800;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.primaryButton {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.primaryButton:hover:not(:disabled) {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.secondaryButton {
  border: 1px solid rgba(245, 241, 230, .25);
  background: transparent;
  color: var(--cream);
}

.secondaryButton:hover:not(:disabled) { border-color: var(--gold); }

.primaryButton:disabled,
.secondaryButton:disabled,
.voteButton:disabled {
  cursor: not-allowed;
  opacity: .32;
}

.quietLink {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quietLink:hover { color: var(--gold-light); }

/* Animated gold frame around the main call to action */

.glowFrame {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 13px;
  background: linear-gradient(90deg, #8a6a1e, var(--gold-light), #8a6a1e);
  background-size: 200% 100%;
  animation: goldSlide 6s linear infinite;
  transition: transform .4s ease;
}

.glowFrame::before {
  position: absolute;
  z-index: -10;
  inset: 0;
  margin: auto;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a6a1e, var(--gold-light), #8a6a1e);
  background-size: 200% 100%;
  content: "";
  filter: blur(.5em);
  opacity: .4;
  animation: goldSlide 6s linear infinite;
  transition: filter .4s ease, opacity .4s ease;
}

.glowFrame:hover::before {
  filter: blur(1.2em);
  opacity: .78;
}

.glowFrame:active::before { filter: blur(.2em); }

.glowFrame:hover { transform: translateY(-2px); }

.glowFrame.block {
  display: flex;
  width: 100%;
  margin-top: 28px;
}

.glowFrame.block > .submitButton { margin-top: 0; }

.glowFrame > .primaryButton {
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, #171b26, #0e1119);
  color: var(--cream);
}

.glowFrame > .primaryButton:hover:not(:disabled) {
  background: linear-gradient(180deg, #1d2230, #121620);
  color: var(--gold-light);
  transform: none;
}

.glowFrame:has(> .primaryButton:disabled) {
  background: rgba(245, 241, 230, .16);
  animation: none;
}

.glowFrame:has(> .primaryButton:disabled)::before { display: none; }

@keyframes goldSlide {
  to { background-position: 200% 0; }
}

/* Light sweeping across the primary buttons on hover */

.primaryButton {
  position: relative;
  overflow: hidden;
}

.primaryButton::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
  content: "";
  transform: translateX(-220%) skewX(-18deg);
  pointer-events: none;
}

.primaryButton:hover:not(:disabled)::after { animation: shineSweep .85s ease; }

@keyframes shineSweep {
  to { transform: translateX(320%) skewX(-18deg); }
}

/* Start */

.adminEntry {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 24px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: var(--faint);
  font-size: 11px;
  font-weight: 750;
}

.adminEntry:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.startScreen,
.thanksScreen {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 72px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(201, 163, 77, .1), transparent 34%),
    var(--ink);
}

.startScreen::before,
.thanksScreen::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 46px 46px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  pointer-events: none;
}

/* Falling gold rain, adapted from the classic green matrix pattern.

   The drops themselves are unchanged: a streak centred on the bottom edge of
   its own tile, so only its top half is painted and it keeps its sharp leading
   edge, plus a sparkle offset half a tile away. Every column still carries its
   own tile height, which is what keeps the fall irregular.

   What changed is how it moves. Scrolling background-position repainted all
   thirty-odd gradients across the whole viewport on the main thread every
   single frame. Instead the drops are split over two layers that are
   rasterised once and then only shifted by the compositor, which costs no
   repaints at all. Each tile height divides the 600px travel distance, so the
   loop closes seamlessly, and the two layers fall at different speeds. */

.goldRain {
  position: absolute;
  z-index: 0;
  contain: layout paint;
  overflow: hidden;
  inset: 0;
  opacity: .5;
  mask-image: linear-gradient(to bottom, black, black 52%, transparent 92%);
  pointer-events: none;
}

.goldRainLayer {
  position: absolute;
  top: -600px;
  right: 0;
  bottom: 0;
  left: 0;
  animation: goldRainFall linear infinite;
  will-change: transform;
}

.goldRainLayer:nth-child(1) {
  background-image:
    radial-gradient(4px 100px at 8px 150px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 158px 75px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 57px 200px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 207px 100px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 104px 120px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 254px 60px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 152px 300px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 2px 150px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 199px 100px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 49px 50px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 248px 200px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 98px 100px, rgba(228, 200, 120, .9) 100%, #0000 150%);
  background-size:
    300px 150px, 300px 150px,
    300px 200px, 300px 200px,
    300px 120px, 300px 120px,
    300px 300px, 300px 300px,
    300px 100px, 300px 100px,
    300px 200px, 300px 200px;
  animation-duration: 6s;
}

.goldRainLayer:nth-child(2) {
  background-image:
    radial-gradient(4px 100px at 32px 200px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 182px 100px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 78px 300px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 228px 150px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 128px 150px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 278px 75px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 176px 100px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 26px 50px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 224px 120px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 74px 60px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 272px 300px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 122px 150px, rgba(228, 200, 120, .9) 100%, #0000 150%);
  background-size:
    300px 200px, 300px 200px,
    300px 300px, 300px 300px,
    300px 150px, 300px 150px,
    300px 100px, 300px 100px,
    300px 120px, 300px 120px,
    300px 300px, 300px 300px;
  animation-duration: 13s;
}

@keyframes goldRainFall {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 600px, 0); }
}

.startContent {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(640px, 100%);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.startContent .brand { margin-bottom: 28px; }

.startCopy h1 {
  max-width: 620px;
  margin: 10px 0 16px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.startCopy > p:last-child {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
}

.startMeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 28px 0;
}

.startMeta span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
}

.startMeta strong { color: var(--cream); }

.startButton {
  display: flex;
  min-width: 238px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 16px;
}

.startHint {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 11px;
}

.loadingCard .brand,
.accessCard .brand { margin-bottom: 28px; }

.accessCard h1 {
  margin: 12px 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
}

.accessCard > p:not(.eyebrow) {
  max-width: 520px;
  color: var(--muted);
}

/* Anforderung des persönlichen Links */

.requestForm {
  width: 100%;
  max-width: 420px;
  margin: 28px auto 0;
  text-align: left;
}

.requestForm .field { margin-bottom: 14px; }

.requestForm input {
  width: 100%;
  text-align: left;
}

.requestForm .primaryButton {
  width: 100%;
  min-height: 52px;
}

.requestForm .statusMessage {
  margin: 14px 0 0;
  min-height: 20px;
  font-size: 13px;
  text-align: center;
}

.loadingSpinner {
  width: 34px;
  height: 34px;
  margin-top: 24px;
  border: 3px solid rgba(245, 241, 230, .14);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Voting structure */

.votingScreen {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 268px minmax(0, 1fr);
}

.votingSidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 28px;
  padding: 28px 18px 98px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #0d1017;
}

.votingSidebar .brand.compact img { width: 190px; }

.votingSidebar > .quietLink {
  margin-top: auto;
  text-align: left;
}

.mobileVotingHeader { display: none; }

.progressBlock { width: 100%; }

.progressLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
}

.progressLabel strong { color: var(--cream); }

.progressTrack {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}

.progressFill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  background-size: 200% 100%;
  animation: goldSlide 3.2s linear infinite;
  transition: width .25s ease;
}

.categoryNav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.categoryNavItem {
  display: grid;
  min-height: 50px;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
}

.categoryNavItem:hover { background: rgba(255, 255, 255, .04); }

.categoryNavItem.active {
  background: rgba(201, 163, 77, .12);
  color: var(--cream);
}

.categoryNavItem.done:not(.active) { color: rgba(245, 241, 230, .75); }

.categoryStatus {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(245, 241, 230, .22);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.categoryNavItem.active .categoryStatus,
.categoryNavItem.done .categoryStatus {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.votingContent {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 46px 44px 128px;
}

.categoryHeading { margin-bottom: 30px; }

.categoryHeading h1 {
  margin: 8px 0 8px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.categoryHeading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.nomineeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* Only set by app.js when the category actually changes, so switching
   carousel slides or voting does not replay the entrance. */

.nomineeGrid.enter > .nomineeCard {
  animation: cardEnter .52s cubic-bezier(.23, 1, .32, 1) backwards;
}

.nomineeGrid.enter > .nomineeCard:nth-child(1) { animation-delay: .03s; }
.nomineeGrid.enter > .nomineeCard:nth-child(2) { animation-delay: .1s; }
.nomineeGrid.enter > .nomineeCard:nth-child(3) { animation-delay: .17s; }
.nomineeGrid.enter > .nomineeCard:nth-child(4) { animation-delay: .24s; }
.nomineeGrid.enter > .nomineeCard:nth-child(5) { animation-delay: .31s; }
.nomineeGrid.enter > .nomineeCard:nth-child(6) { animation-delay: .38s; }
.nomineeGrid.enter > .nomineeCard:nth-child(n+7) { animation-delay: .45s; }

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.nomineeCard {
  position: relative;
  min-width: 0;
  border-radius: 16px;
  transition: transform .48s cubic-bezier(.23, 1, .32, 1);
}

.nomineeCardInner {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Two gold "sheets" stacked behind the card; they fan out on hover. */

.nomineeCardInner::before,
.nomineeCardInner::after {
  position: absolute;
  left: 50%;
  border-radius: inherit;
  content: "";
  transform: translateX(-50%);
  transform-origin: bottom;
  transition: all .48s cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
}

.nomineeCardInner::before {
  z-index: -1;
  top: -2%;
  width: 93%;
  height: 100%;
  background: rgba(201, 163, 77, .26);
}

.nomineeCardInner::after {
  z-index: -2;
  top: -4%;
  width: 86%;
  height: 100%;
  background: rgba(201, 163, 77, .12);
}

@media (hover: hover) {
  .nomineeCard:hover { transform: translateY(-10px); }

  .nomineeCard:hover .nomineeCardInner::before {
    top: 0;
    width: 100%;
    height: 100%;
    rotate: -5deg;
  }

  .nomineeCard:hover .nomineeCardInner::after {
    top: 0;
    width: 100%;
    height: 100%;
    rotate: 5deg;
  }
}

.nomineeCard.selected .nomineeCardInner {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 14px 34px rgba(201, 163, 77, .15);
}

.nomineeHeader {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 10px;
}

.nomineeHeader h3 {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--cream);
  font-size: 16px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nomineeNumber {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid rgba(245, 241, 230, .2);
  border-radius: 6px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
}

.selectedLabel {
  flex: 0 0 auto;
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.carouselWrap { min-width: 0; }

.carousel {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #080a0f;
  touch-action: pan-y;
}

.carouselSlide {
  width: 100%;
  height: 100%;
}

.storySlide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(26px, 5cqw, 54px);
  overflow-y: auto;
  background:
    linear-gradient(145deg, rgba(201, 163, 77, .08), transparent 45%),
    linear-gradient(145deg, var(--panel-raised), var(--ink));
}

.storySlide > span {
  color: var(--gold);
  font-size: clamp(10px, 2.2cqw, 13px);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.storySlide p {
  margin: 0;
  color: var(--cream);
  font-weight: 500;
  line-height: 1.38;
  text-wrap: pretty;
}

.storySlide--short p { font-size: clamp(17px, 5.2cqw, 28px); }
.storySlide--medium p { font-size: clamp(15px, 4.25cqw, 23px); }
.storySlide--long {
  gap: 10px;
  padding: clamp(18px, 3.8cqw, 38px);
}
.storySlide--long p { font-size: clamp(12px, 3.4cqw, 18px); line-height: 1.42; }

.imageSlide {
  position: relative;
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  background: #07080c;
  color: var(--cream);
  cursor: zoom-in;
}

.imageSlide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zoomHint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: rgba(0, 0, 0, .68);
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
}

.slideButton {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: var(--cream);
  font-size: 20px;
}

.slideButton.prev { left: 9px; }
.slideButton.next { right: 9px; }
.slideButton:disabled { opacity: .22; cursor: default; }

.carouselMeta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 26px;
  color: var(--faint);
  font-size: 10px;
}

.dots { display: flex; gap: 5px; }

.dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .19);
}

.dot.active { background: var(--gold); }

.voteButton {
  width: 100%;
  border: 1px solid rgba(245, 241, 230, .25);
  background: transparent;
  color: var(--cream);
  font-size: 13px;
}

.voteButton:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-light);
}

.voteButton.selected {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.votingActionBar {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 268px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px max(24px, calc((100vw - 1420px) / 2));
  border-top: 1px solid var(--line);
  background: rgba(11, 13, 19, .92);
  backdrop-filter: blur(14px);
}

/* Summary and thanks */

.summaryScreen {
  min-height: 100vh;
  padding: 54px 24px;
  background: var(--ink);
}

.summaryShell {
  width: min(720px, 100%);
  margin: 0 auto;
}

.summaryShell > .brand { margin-bottom: 34px; }

.summaryHeading h1 {
  margin: 8px 0 6px;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.summaryHeading p {
  margin: 0 0 24px;
  color: var(--muted);
}

.summaryList { border-top: 1px solid var(--line); }

.summaryRow {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}

.summaryNumber {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.summaryRow small {
  display: block;
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.summaryRow strong {
  display: block;
  color: var(--cream);
  font-size: 14px;
}

.summaryRow > button {
  border: 0;
  background: transparent;
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 800;
}

.submitButton {
  width: 100%;
  min-height: 56px;
  margin-top: 28px;
  font-size: 15px;
}

.summaryBack {
  display: block;
  margin: 18px auto 0;
}

.thanksCard {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(480px, 100%);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.thanksCard > .brand { margin-bottom: 34px; }

.thanksCheck {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 28px;
  font-weight: 800;
  animation: checkPop .7s cubic-bezier(.23, 1, .32, 1) backwards, checkHalo 2.6s ease-out .6s infinite;
}

@keyframes checkPop {
  0% {
    opacity: 0;
    transform: scale(.4) rotate(-18deg);
  }

  60% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes checkHalo {
  0% { box-shadow: 0 0 0 0 rgba(201, 163, 77, .45); }
  70% { box-shadow: 0 0 0 24px rgba(201, 163, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 163, 77, 0); }
}

.thanksCard h1 {
  margin: 0 0 8px;
  font-size: 38px;
  letter-spacing: -.035em;
}

.thanksCard p {
  margin: 0 0 28px;
  color: var(--cream);
  font-size: 16px;
}

.thanksCard .secondaryButton { margin-bottom: 14px; }

/* Lightbox */

.lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: 34px;
  place-items: center;
}

.lightboxBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, .86);
  cursor: zoom-out;
}

.lightboxContent {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1200px, 100%);
  height: min(84vh, 900px);
  padding: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.lightboxContent img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightboxClose {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  color: white;
  font-size: 24px;
}

/* Admin */

.adminLoginScreen {
  display: grid;
  min-height: 100vh;
  padding: 32px 20px;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, rgba(201, 163, 77, .1), transparent 38%);
}

.adminLoginCard {
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}

.adminLoginCard .brand { margin-bottom: 24px; }
.adminLoginCard .brand img { width: 220px; }
.adminLoginCard h1 { margin: 8px 0; font-size: 38px; }
.adminLoginCard > p:not(.eyebrow) { margin: 0 0 24px; color: var(--muted); }
.adminLoginCard form { text-align: left; }
.adminLoginCard form .primaryButton { width: 100%; }
.adminLoginCard > .quietLink { margin-top: 22px; }

.adminScreen {
  width: min(1220px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 28px 80px;
}

.adminTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.adminTopbarActions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.adminHero { padding: 54px 0 30px; }

.adminHero h1 {
  margin: 8px 0;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -.045em;
}

.adminHero > p:not(.eyebrow) { color: var(--muted); }

.notice,
.votingControl {
  margin-top: 22px;
  padding: 15px 17px;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: rgba(201, 163, 77, .08);
  color: rgba(245, 241, 230, .78);
}

.votingControl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.votingControl > div { display: flex; flex-direction: column; }
.votingControl span { color: var(--muted); font-size: 13px; }
.votingControl.closed { border-left-color: var(--danger); background: rgba(238, 154, 135, .07); }

.adminStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.adminStats > div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.adminStats strong {
  display: block;
  color: var(--gold-light);
  font-size: 32px;
}

.adminStats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.adminGrid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 22px;
  align-items: start;
}

.adminPanel {
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.adminPanel h2 { margin: 0 0 8px; }
.adminPanel > p { margin: 0 0 22px; color: var(--muted); }

.field {
  display: block;
  margin-bottom: 16px;
}

.field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(245, 241, 230, .18);
  border-radius: 8px;
  outline: none;
  background: #0a0c12;
  color: var(--cream);
}

.field textarea { min-height: 130px; resize: vertical; }
.field small { display: block; margin-top: 5px; color: var(--faint); }

.formRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.formRow .field { margin: 0; }

.adminCategory { border-top: 1px solid var(--line); }

.adminCategory summary {
  padding: 15px 0;
  color: var(--gold-light);
  cursor: pointer;
  font-weight: 800;
}

.adminNominee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.adminNominee p { margin: 0; }
.adminNominee small { color: var(--muted); }

.adminResults {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.adminResultCategory + .adminResultCategory { border-top: 1px solid var(--line); }

.adminResultCategory h3 {
  margin: 0;
  padding: 13px 15px;
  background: rgba(201, 163, 77, .08);
  color: var(--gold-light);
  font-size: 12px;
}

.adminResultRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
}

.adminResultRow:last-child { border-bottom: 0; }

.adminResultRow small {
  display: block;
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.adminResultRow strong {
  display: block;
  color: var(--cream);
  font-size: 13px;
}

.adminResultRow > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 163, 77, .12);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
}

.miniButton {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(245, 241, 230, .2);
  border-radius: 7px;
  background: transparent;
  color: var(--cream);
  font-size: 11px;
  font-weight: 800;
}

.adminLinks,
.generatedLinks {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.generatedLinks { margin-top: 20px; padding: 16px; }
.generatedLinks h3 { margin: 0 0 4px; }
.generatedLinks > p { margin: 0 0 14px; color: var(--muted); font-size: 12px; }

.adminLinkRow,
.generatedLinkRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.adminLinkRow:last-child,
.generatedLinkRow:last-child { border-bottom: 0; }
.adminLinkRow > div { min-width: 0; flex: 1; }
.adminLinkRow strong,
.adminLinkRow small { display: block; }
.adminLinkRow small { color: var(--muted); font-size: 10px; }
.generatedLinkRow span { width: 110px; font-size: 12px; font-weight: 800; }
.generatedLinkRow input { min-width: 0; flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: #090b10; color: var(--muted); }

.emptyState,
.statusMessage { color: var(--muted); }
.statusMessage.error { color: var(--danger); }
.statusMessage.success { color: var(--success); }

.adminRowActions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.miniButton.danger {
  border-color: rgba(238, 154, 135, .45);
  color: var(--danger);
}

.miniButton[disabled] {
  cursor: not-allowed;
  opacity: .4;
}

.adminLinkRow.isBanned { background: rgba(238, 154, 135, .07); }
.adminLinkRow.isBanned strong { color: var(--danger); }

@media (max-width: 1040px) {
  .nomineeGrid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .votingScreen { display: block; }
  .votingSidebar { display: none; }

  .mobileVotingHeader {
    position: sticky;
    z-index: 18;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 18px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 13, 19, .94);
    backdrop-filter: blur(14px);
  }

  .mobileVotingHeader .brand.compact img { width: 106px; }
  .mobileVotingHeader .progressBlock { min-width: 0; }
  .mobileVotingHeader .progressLabel { margin-bottom: 5px; }

  .mobileCategorySelect { grid-column: 1 / -1; }

  .mobileCategorySelect select {
    width: 100%;
    min-height: 42px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--cream);
    font-size: 12px;
    font-weight: 700;
  }

  .votingContent { padding: 25px 16px 116px; }
  .categoryHeading { margin-bottom: 20px; }
  .categoryHeading h1 { font-size: 27px; }
  .nomineeGrid { gap: 16px; }
  .nomineeCard { border-radius: 14px; }
  .nomineeCardInner { padding: 14px; border-radius: 14px; }
  .nomineeHeader h3 { font-size: 14px; }
  .selectedLabel { display: none; }
  .storySlide { padding: clamp(20px, 6cqw, 28px); }
  .storySlide--long { padding: 16px 18px; }

  .votingActionBar {
    left: 0;
    padding: 12px 14px;
  }

  .votingActionBar .secondaryButton { padding: 0 14px; }
  .votingActionBar .primaryButton { flex: 1; padding: 0 14px; font-size: 12px; }

  .summaryScreen { padding: 30px 18px; }
  .summaryShell > .brand { margin-bottom: 26px; }
  .summaryRow { grid-template-columns: 24px 1fr; }
  .summaryRow > button { grid-column: 2; justify-self: start; padding: 0; }
  .lightbox { padding: 12px; }
  .lightboxContent { height: 90vh; padding: 10px; }
  .adminStats { grid-template-columns: repeat(2, 1fr); }
  .adminGrid { grid-template-columns: 1fr; }
  .votingControl { align-items: stretch; flex-direction: column; }
  .generatedLinkRow { align-items: stretch; flex-direction: column; }
  .generatedLinkRow span { width: auto; }
  .adminLinkRow { align-items: stretch; flex-direction: column; }
  .adminRowActions { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .startScreen { padding: 48px 20px; }
  .startContent .brand { margin-bottom: 20px; }
  .brand img { width: 270px; }
  .startCopy h1 { font-size: 33px; }
  .startCopy > p:last-child { font-size: 14px; }
  .startMeta { margin: 22px 0; }
  .startMeta span { padding: 7px 9px; font-size: 10px; }
  .startButton { width: 100%; }
  .adminScreen { padding: 18px 14px 60px; }
  .adminTopbar .brand.compact img { width: 120px; }
  .adminStats { grid-template-columns: 1fr 1fr; }
  .formRow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  /* Decorative motion only; the loading spinner keeps animating. */

  .goldRainLayer,
  .glowFrame,
  .glowFrame::before,
  .progressFill,
  .thanksCheck,
  .primaryButton::after,
  .nomineeGrid.enter > .nomineeCard {
    animation: none !important;
  }

  .nomineeGrid.enter > .nomineeCard {
    opacity: 1;
    transform: none;
  }

  .thanksCheck { opacity: 1; }
}