:root {
  --ink: #20163d;
  --ink-soft: #655c75;
  --violet: #321267;
  --violet-bright: #6030bd;
  --violet-pale: #eee6ff;
  --yellow: #ffd84d;
  --orange: #ff7d3b;
  --cream: #f8f5ed;
  --paper: #fffdf8;
  --line: rgba(49, 25, 86, .13);
  --shadow-soft: 0 24px 65px rgba(47, 26, 75, .11);
  --shadow-card: 0 14px 34px rgba(47, 26, 75, .1);
  --sans: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--cream);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
}

body.is-modal-open { overflow: hidden; }

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid rgba(255, 184, 45, .85);
  outline-offset: 3px;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

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

.battle-app {
  min-height: 100vh;
  overflow: clip;
  background:
    linear-gradient(rgba(58, 31, 95, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 31, 95, .038) 1px, transparent 1px),
    radial-gradient(circle at 6% 4%, rgba(255, 216, 77, .2), transparent 24rem),
    radial-gradient(circle at 93% 32%, rgba(96, 48, 189, .1), transparent 31rem),
    var(--cream);
  background-size: 56px 56px, 56px 56px, auto, auto, auto;
}

/* Header, inspired by the Challenge Hebdo identity */
.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 245, 237, .9);
  backdrop-filter: blur(18px);
}

.header-inner {
  width: min(1480px, calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.identity-cluster,
.geniart-brand,
.battle-brand,
.primary-nav,
.account-area,
.profile-chip,
.theme-topline,
.theme-meta,
.deadline-line,
.panel-heading,
.upload-actions,
.creation-footer,
.reveal-meta,
.vote-dock-inner,
.vote-progress-copy,
.lightbox-topbar,
.lightbox-bottom,
.site-footer,
.footer-brand,
.site-footer nav,
.archive-detail-meta,
.archive-card-meta,
.winner-credit,
.member-hero,
.member-group-heading {
  display: flex;
  align-items: center;
}

.identity-cluster { min-width: 0; gap: 17px; }
.geniart-brand { flex: 0 0 auto; text-decoration: none; }
.geniart-brand img {
  width: 92px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(98, 54, 197, .16));
}

.header-divider { width: 1px; height: 38px; background: rgba(49, 25, 86, .16); }
.battle-brand { min-width: 0; align-items: flex-start; flex-direction: column; color: var(--ink); text-decoration: none; }
.battle-brand strong { font-size: 17px; font-weight: 850; letter-spacing: -.025em; }
.battle-brand span {
  max-width: 260px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--orange);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.primary-nav {
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, .75);
  box-shadow: 0 8px 25px rgba(47, 26, 75, .045);
}

.nav-link {
  padding: 9px 17px;
  border-radius: 999px;
  color: #6b6479;
  font-size: 13px;
  font-weight: 730;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}
.nav-link:hover { color: var(--violet); background: var(--violet-pale); }
.nav-link.is-active { color: white; background: var(--violet); box-shadow: 0 6px 16px rgba(50, 18, 103, .19); }

.account-area { min-width: 0; justify-content: flex-end; }
.account-loading { color: var(--ink-soft); font-size: 11px; }
.profile-chip {
  min-width: 0;
  gap: 10px;
  padding: 6px 13px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, .86);
}

.avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, var(--violet-bright), var(--orange));
  font-size: 11px;
  font-weight: 850;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-copy { min-width: 0; display: flex; flex-direction: column; }
.profile-copy strong { max-width: 150px; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.profile-copy small { margin-top: 1px; color: var(--ink-soft); font-size: 9px; }
.account-actions { display: flex; align-items: center; gap: 7px; }
.account-shortcut { padding: 9px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--violet); background: var(--paper); font-size: 9px; font-weight: 820; text-decoration: none; }
.account-shortcut.is-winner { border-color: rgba(201,147,0,.32); color: #4d3500; background: var(--yellow); }

.discord-button,
.primary-button,
.panel-primary-button,
.save-votes-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.discord-button {
  gap: 9px;
  padding: 12px 17px;
  border-radius: 999px;
  color: white;
  background: #5865f2;
  box-shadow: 0 8px 24px rgba(88, 101, 242, .23);
  font-size: 12px;
  font-weight: 800;
}
.discord-button::before {
  content: "";
  width: 17px;
  height: 12px;
  border-radius: 8px 8px 5px 5px;
  background: radial-gradient(circle at 35% 50%, #5865f2 0 1.5px, transparent 2px), radial-gradient(circle at 65% 50%, #5865f2 0 1.5px, transparent 2px), white;
}
.logout-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--violet);
  background: var(--paper);
  font-weight: 850;
}

/* Current battle */
.battle-intro { width: min(1480px, calc(100% - 48px)); margin: 28px auto 0; }
.battle-intro-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(370px, .75fr); gap: 18px; }
.theme-panel, .participation-panel { position: relative; overflow: hidden; min-height: 368px; border-radius: 32px; }
.theme-panel {
  isolation: isolate;
  padding: clamp(30px, 4.6vw, 68px);
  color: white;
  background: radial-gradient(circle at 83% 18%, rgba(255, 216, 77, .34), transparent 17rem), radial-gradient(circle at 16% 120%, rgba(127, 70, 227, .58), transparent 26rem), linear-gradient(135deg, #1b083e, #351268 52%, #4b2083);
  box-shadow: 0 30px 80px rgba(39, 12, 84, .24);
}
.theme-panel::before {
  position: absolute; z-index: -1; content: ""; inset: 0; opacity: .22;
  background: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, black 40%, black);
}
.theme-panel::after {
  position: absolute; z-index: -1; content: ""; width: 280px; height: 280px; right: -86px; bottom: -96px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018);
}
.battle-watermark {
  position: absolute; z-index: -1; right: clamp(18px, 4vw, 64px); top: 7px;
  color: rgba(255,255,255,.055); font-family: var(--mono); font-size: clamp(150px,19vw,290px); font-weight: 900; line-height: .95; letter-spacing: -.13em;
}
.theme-topline { gap: 8px; }
.status-pill, .sent-badge {
  display: inline-flex; align-items: center; width: max-content; border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;
}
.status-pill { gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.09); backdrop-filter: blur(9px); }
.status-signal { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,216,77,.12); }
.status-pill.is-live .status-signal { animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0%,45% { box-shadow: 0 0 0 4px rgba(255,216,77,.15); } 80%,100% { box-shadow: 0 0 0 9px rgba(255,216,77,0); } }

.battle-kicker, .section-eyebrow { font-size: 11px; font-weight: 840; letter-spacing: .13em; text-transform: uppercase; }
.battle-kicker { margin: clamp(34px,5vw,63px) 0 13px; color: rgba(255,255,255,.58); }
.battle-kicker b { color: var(--yellow); }
.theme-panel h1 { max-width: 950px; margin: 0; color: white; font-size: clamp(36px,5vw,76px); font-weight: 850; line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.theme-meta { flex-wrap: wrap; gap: 10px; margin-top: 24px; color: rgba(255,255,255,.61); font-size: 12px; }
.theme-meta b { color: white; }
.deadline-line {
  position: absolute; left: clamp(30px,4.6vw,68px); right: clamp(30px,4.6vw,68px); bottom: 25px;
  flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.69); font-size: 12px;
}
.deadline-line strong { color: white; }
.deadline-line small { margin-left: auto; color: rgba(255,255,255,.4); }
.deadline-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #2c1950; background: var(--yellow); font-weight: 900; }

.participation-panel { padding: 27px; border: 1px solid var(--line); background: rgba(255,253,248,.9); box-shadow: var(--shadow-soft); }
.panel-heading { justify-content: space-between; gap: 14px; }
.section-eyebrow { margin: 0 0 6px; color: var(--orange); }
.panel-heading h2, .gallery-heading h2, .winner-heading h2 { margin: 0; color: var(--ink); font-weight: 850; letter-spacing: -.04em; }
.panel-heading h2 { font-size: clamp(23px,2vw,30px); line-height: 1.08; }
.sent-badge { flex: 0 0 auto; padding: 7px 10px; color: #246849; background: #daf4e7; }
.panel-skeleton, .collection-skeleton { position: relative; overflow: hidden; border-radius: 20px; background: #eee9f2; }
.panel-skeleton { min-height: 190px; margin-top: 21px; }
.panel-skeleton::after, .collection-skeleton::after {
  position: absolute; content: ""; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.drop-zone, .upload-locked {
  min-height: 178px; margin-top: 21px; display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: 1.5px dashed rgba(79,43,126,.27); border-radius: 20px; text-align: center;
  background: radial-gradient(circle at center, rgba(96,48,189,.06), transparent 70%), rgba(246,241,255,.52);
}
.drop-zone { cursor: pointer; transition: border .18s, background .18s, transform .18s; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--violet-bright); background: rgba(238,230,255,.88); transform: translateY(-2px); }
.upload-symbol { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: white; background: var(--violet); box-shadow: 0 10px 22px rgba(50,18,103,.2); font-size: 25px; font-weight: 750; }
.drop-zone p { margin: 13px 0 0; }
.drop-zone strong, .drop-zone span { display: block; }
.drop-zone strong { font-size: 13px; }
.drop-zone p span { margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
.upload-note { margin: 10px 0 0; color: #867d91; font-size: 9.5px; text-align: center; }
.upload-locked { gap: 12px; padding: 25px; border-style: solid; }
.upload-locked p { max-width: 280px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.upload-preview { min-height: 162px; margin-top: 21px; display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 16px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 20px; background: rgba(242,236,252,.55); }
.upload-preview img { width: 132px; height: 140px; border-radius: 13px; object-fit: cover; background: #e8e1f0; }
.upload-preview-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.upload-preview-copy strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.upload-preview-copy span { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.upload-preview-copy small { width: max-content; padding: 4px 7px; border-radius: 999px; color: #27704d; background: #ddf5e9; font-size: 9px; }
.upload-actions { justify-content: flex-end; gap: 9px; margin-top: 13px; }
.text-button { padding: 10px 12px; border: 0; cursor: pointer; color: var(--violet); background: transparent; font-size: 11px; font-weight: 780; }
.panel-primary-button, .primary-button { padding: 11px 16px; border-radius: 12px; color: white; background: var(--violet); box-shadow: 0 8px 20px rgba(50,18,103,.17); font-size: 11px; font-weight: 800; }
.panel-primary-button:disabled, .text-button:disabled { cursor: wait; opacity: .55; }

/* Gallery and votes */
.gallery-section { width: min(1480px, calc(100% - 48px)); margin: clamp(56px,7vw,94px) auto 0; padding-bottom: 154px; }
.gallery-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 30px; margin-bottom: 26px; }
.gallery-heading.compact { margin-top: 54px; }
.gallery-heading h2 { max-width: 900px; font-size: clamp(31px,4vw,58px); line-height: 1.01; text-wrap: balance; }
.gallery-heading > div > p:last-child { max-width: 680px; margin: 13px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.heading-vote-counter { width: 124px; height: 124px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--line); border-radius: 50%; color: white; background: radial-gradient(circle at 32% 25%,rgba(255,255,255,.2),transparent 30%),var(--violet); box-shadow: 0 18px 42px rgba(50,18,103,.2); }
.heading-vote-counter span { font-family: var(--mono); font-size: 42px; font-weight: 780; line-height: 1; }
.heading-vote-counter small { margin-top: 5px; color: rgba(255,255,255,.62); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.page-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 13px 15px; border: 1px solid rgba(157,50,50,.18); border-radius: 14px; color: #7a3030; background: #ffebeb; font-size: 11px; }
.page-notice.is-info { border-color: rgba(172,120,10,.22); color: #73530e; background: #fff3c7; }
.page-notice button { padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; cursor: pointer; color: inherit; background: transparent; font-size: 10px; font-weight: 800; }
.creation-grid { column-count: 4; column-gap: 18px; }
.creation-card { position: relative; width: 100%; margin: 0 0 18px; display: inline-block; overflow: hidden; border: 1px solid rgba(49,25,86,.09); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-card); break-inside: avoid; vertical-align: top; transition: transform .23s, box-shadow .23s; }
.creation-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(47,26,75,.15); }
.creation-card.is-own { border-color: rgba(255,125,59,.42); box-shadow: 0 15px 38px rgba(255,125,59,.12); }
.creation-card.is-winner { border: 2px solid rgba(241,183,13,.75); box-shadow: 0 22px 50px rgba(241,183,13,.25); }
.creation-image-button { position: relative; width: 100%; display: block; overflow: hidden; padding: 0; border: 0; cursor: zoom-in; background: #ded7e8; }
.creation-image-button img { width: 100%; min-height: 210px; display: block; object-fit: cover; background: linear-gradient(135deg,#e7e0ed,#c9bfd7); transition: transform .6s cubic-bezier(.2,.65,.25,1); }
.creation-image-button::after { position: absolute; content: ""; inset: 0; opacity: 0; background: linear-gradient(to top,rgba(19,6,41,.52),transparent 42%); transition: opacity .23s; }
.creation-image-button:hover img { transform: scale(1.025); }
.creation-image-button:hover::after, .creation-image-button:hover .zoom-hint { opacity: 1; }
.zoom-hint { position: absolute; z-index: 2; right: 12px; bottom: 12px; opacity: 0; padding: 7px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: white; background: rgba(29,12,55,.58); backdrop-filter: blur(8px); font-size: 9px; font-weight: 760; transition: opacity .23s; }
.winner-ribbon { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 7px 10px; border-radius: 999px; color: #402800; background: var(--yellow); box-shadow: 0 7px 20px rgba(33,20,0,.18); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.creation-footer { min-height: 70px; justify-content: space-between; gap: 13px; padding: 12px 13px 13px 16px; }
.creation-label { min-width: 0; display: flex; flex-direction: column; }
.creation-label > span { color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.creation-label small { margin-top: 3px; color: var(--orange); font-size: 9px; font-weight: 780; }
.vote-stepper { flex: 0 0 auto; display: grid; grid-template-columns: 30px 30px 30px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #f4f0f8; }
.vote-stepper button { width: 30px; height: 34px; display: grid; place-items: center; border: 0; cursor: pointer; color: var(--violet); background: transparent; font-size: 18px; font-weight: 650; }
.vote-stepper button:hover:not(:disabled) { color: white; background: var(--violet); }
.vote-stepper button:disabled { cursor: not-allowed; opacity: .25; }
.vote-stepper output { color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 800; text-align: center; }
.own-vote-lock { padding: 7px 9px; border-radius: 999px; color: #9d552d; background: #fff0e6; font-size: 8.5px; font-weight: 820; letter-spacing: .04em; text-transform: uppercase; }
.reveal-meta { gap: 9px; }
.rank-badge { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--violet); font-family: var(--mono); font-size: 11px; font-weight: 780; }
.reveal-meta > div { min-width: 0; display: flex; flex-direction: column; }
.reveal-meta a, .reveal-meta strong { max-width: 140px; overflow: hidden; color: var(--violet); font-size: 10px; font-weight: 820; white-space: nowrap; text-overflow: ellipsis; }
.reveal-meta small { margin-top: 2px; color: var(--ink-soft); font-size: 9px; }
.gallery-empty { min-height: 340px; display: grid; place-items: center; align-content: center; padding: 40px; border: 1.5px dashed rgba(49,25,86,.18); border-radius: 32px; text-align: center; background: rgba(255,253,248,.6); }
.gallery-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--violet); background: var(--yellow); font-size: 25px; }
.gallery-empty h2, .gallery-empty h3 { margin: 18px 0 0; font-size: 23px; }
.gallery-empty p { margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; }
.gallery-empty .primary-button { margin-top: 18px; }

.vote-dock { position: fixed; z-index: 80; left: 50%; bottom: 18px; width: min(920px,calc(100% - 34px)); transform: translateX(-50%); pointer-events: none; }
.vote-dock-inner { min-height: 76px; gap: 21px; padding: 10px 11px 10px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; color: white; background: rgba(35,13,74,.93); box-shadow: 0 23px 65px rgba(27,9,57,.3); backdrop-filter: blur(20px); pointer-events: auto; }
.vote-progress-copy { min-width: 285px; gap: 11px; }
.vote-orb { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; color: #332100; background: var(--yellow); box-shadow: inset 0 -7px 13px rgba(196,137,0,.19); font-family: var(--mono); font-size: 20px; font-weight: 840; }
.vote-progress-copy > div { display: flex; flex-direction: column; }
.vote-progress-copy strong { font-size: 12px; }
.vote-progress-copy div > span { margin-top: 4px; color: rgba(255,255,255,.53); font-size: 9.5px; }
.vote-progress-track { min-width: 90px; flex: 1; overflow: hidden; height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); }
.vote-progress-track span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--orange),var(--yellow)); transition: width .28s; }
.save-votes-button { min-width: 190px; min-height: 52px; padding: 12px 19px; border-radius: 16px; color: #332100; background: var(--yellow); font-size: 11px; font-weight: 850; }
.save-votes-button:disabled { cursor: default; color: rgba(255,255,255,.62); background: rgba(255,255,255,.11); }

/* Archive listing */
.secondary-main { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 68px 0 150px; }
.secondary-hero { max-width: 980px; margin-bottom: 52px; }
.secondary-hero h1, .archive-detail-hero h1, .member-hero h1 { margin: 0; color: var(--ink); font-size: clamp(47px,7vw,94px); font-weight: 880; line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.secondary-hero h1 em { color: var(--violet-bright); font-style: normal; }
.secondary-hero > p:last-of-type { max-width: 630px; margin: 22px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.archive-stats { gap: 9px; min-height: 34px; margin-top: 27px; }
.archive-stat { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: rgba(255,253,248,.72); font-size: 10px; font-weight: 760; }
.archive-stat b { color: var(--violet); }
.archive-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.collection-skeleton { min-height: 390px; }
.archive-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 27px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-card); text-decoration: none; transition: transform .23s, box-shadow .23s; }
.archive-card:hover { transform: translateY(-5px); box-shadow: 0 25px 55px rgba(47,26,75,.16); }
.archive-card-image { position: relative; width: 100%; display: block; overflow: hidden; aspect-ratio: 16/11; padding: 0; border: 0; cursor: zoom-in; background: linear-gradient(145deg,#2b115a,#6738a9); }
.archive-card-image:disabled { cursor: default; }
.archive-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s ease; }
.archive-card:hover .archive-card-image img { transform: scale(1.025); }
.archive-number { position: absolute; top: 15px; left: 15px; padding: 8px 11px; border-radius: 999px; color: #332100; background: var(--yellow); box-shadow: 0 7px 18px rgba(0,0,0,.15); font-family: var(--mono); font-size: 10px; font-weight: 850; }
.archive-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.13); font-family: var(--mono); font-size: 90px; font-weight: 900; }
.archive-card-body { padding: 21px; }
.archive-card-body h2 { margin: 0; font-size: 24px; line-height: 1.08; letter-spacing: -.035em; }
.archive-card-body h2 a { color: var(--ink); text-decoration: none; }
.archive-card-body h2 a:hover { color: var(--violet-bright); }
.archive-card-meta { justify-content: space-between; gap: 10px; margin-top: 17px; color: var(--ink-soft); font-size: 10px; }
.archive-winner { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--violet); font-size: 10px; font-weight: 760; }

/* Archive detail */
.archive-detail-hero { max-width: 1080px; margin-bottom: 56px; }
.back-link { display: inline-flex; margin-bottom: 52px; color: var(--violet); font-size: 11px; font-weight: 800; text-decoration: none; }
.archive-detail-hero h1 { font-size: clamp(43px,6.6vw,86px); }
.archive-detail-meta { flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.archive-detail-meta span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--paper); font-size: 10px; }
.winner-section { margin-top: 30px; }
.winner-heading { margin-bottom: 18px; }
.winner-heading h2 { font-size: 32px; }
.winner-card { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); overflow: hidden; border: 2px solid rgba(240,181,0,.64); border-radius: 32px; background: var(--paper); box-shadow: 0 28px 70px rgba(146,104,0,.18); }
.winner-image { position: relative; min-height: 560px; padding: 0; border: 0; cursor: zoom-in; background: #ddd3e7; }
.winner-image img { width: 100%; height: 100%; display: block; object-fit: contain; background: #17101d; }
.winner-copy { position: relative; display: flex; justify-content: flex-end; flex-direction: column; padding: 40px; color: white; background: radial-gradient(circle at top right,rgba(255,216,77,.25),transparent 45%),linear-gradient(145deg,#27104e,#3c176e); }
.winner-copy::before { content: "01"; position: absolute; top: 12px; right: 22px; color: rgba(255,255,255,.06); font-family: var(--mono); font-size: 130px; font-weight: 900; }
.winner-copy .winner-crown { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; color: #352300; background: var(--yellow); font-size: 25px; }
.winner-copy h3 { margin: 22px 0 4px; font-size: 35px; letter-spacing: -.04em; }
.winner-credit { gap: 10px; margin-top: 20px; }
.winner-credit .avatar { width: 44px; height: 44px; }
.winner-credit .avatar { color: white; font-size: 11px; }
.winner-credit > div { display: flex; flex-direction: column; }
.winner-credit a { color: var(--yellow); font-size: 12px; font-weight: 820; }
.winner-credit span { color: rgba(255,255,255,.58); font-size: 10px; }
.ranking-section { margin-top: 70px; }
/* Member gallery */
.member-hero { position: relative; align-items: flex-end; gap: 30px; min-height: 300px; margin-bottom: 58px; padding: 58px; overflow: hidden; border-radius: 32px; color: white; background: radial-gradient(circle at 85% 15%,rgba(255,216,77,.3),transparent 18rem),linear-gradient(135deg,#1b083e,#4a1c82); box-shadow: 0 30px 75px rgba(39,12,84,.22); }
.member-hero .back-link { position: absolute; top: 28px; left: 34px; margin: 0; color: rgba(255,255,255,.72); }
.member-hero h1 { color: white; font-size: clamp(42px,6vw,78px); }
.member-hero > div:last-child > p:last-child { margin: 12px 0 0; color: rgba(255,255,255,.6); font-size: 12px; }
.member-avatar { width: 120px; height: 120px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 4px solid rgba(255,255,255,.18); border-radius: 34px; color: var(--violet); background: var(--yellow); box-shadow: 0 20px 45px rgba(0,0,0,.2); font-size: 37px; font-weight: 880; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-avatar.is-loading { background: rgba(255,255,255,.08); }
.member-collections { display: grid; gap: 70px; }
.member-group-heading { justify-content: space-between; gap: 20px; margin: 0 0 18px; }
.member-group-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.member-group-heading h2 a { color: var(--ink); text-decoration: none; }
.member-group-heading > span { color: var(--ink-soft); font-size: 10px; }
.member-grid { column-count: 3; column-gap: 18px; }

/* Shared footer, lightbox and toasts */
.site-footer { width: min(1480px,calc(100% - 48px)); min-height: 126px; justify-content: space-between; gap: 25px; margin: 0 auto; border-top: 1px solid var(--line); }
.footer-brand { gap: 11px; }
.footer-brand img { width: 54px; height: auto; }
.site-footer p { margin: 0; font-size: 11px; font-weight: 720; }
.site-footer p a { color: var(--violet); }
.site-footer p small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 9px; font-weight: 480; }
.site-footer nav { gap: 17px; }
.site-footer nav a { color: var(--ink-soft); font-size: 10px; font-weight: 700; text-decoration: none; }

.lightbox-backdrop { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(12,5,27,.88); backdrop-filter: blur(15px); }
.lightbox-dialog { width: min(1180px,100%); max-height: calc(100vh - 44px); overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; color: white; background: #170b30; box-shadow: 0 35px 90px rgba(0,0,0,.44); }
.lightbox-topbar { min-height: 66px; justify-content: space-between; gap: 20px; padding: 11px 12px 11px 21px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lightbox-topbar > div { display: flex; flex-direction: column; }
.lightbox-topbar span { font-family: var(--mono); font-size: 11px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.lightbox-topbar small { margin-top: 3px; color: rgba(255,255,255,.45); font-size: 9px; }
.lightbox-close { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; cursor: pointer; color: white; background: rgba(255,255,255,.07); font-size: 25px; }
.lightbox-stage { position: relative; height: min(70vh,760px); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%,rgba(116,67,197,.2),transparent 52%),#0e071b; }
.lightbox-stage img { width: 100%; height: 100%; padding: 18px 70px; object-fit: contain; }
.lightbox-arrow { position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; cursor: pointer; color: white; background: rgba(26,10,54,.68); transform: translateY(-50%); }
.lightbox-arrow.is-left { left: 17px; }
.lightbox-arrow.is-right { right: 17px; }
.lightbox-bottom { min-height: 66px; justify-content: space-between; gap: 20px; padding: 10px 16px 10px 22px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.62); font-size: 11px; }
.lightbox-bottom:empty { display: none; }
.lightbox-bottom a { color: var(--yellow); font-weight: 760; }
.lightbox-bottom .vote-stepper { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.13); }
.lightbox-bottom .vote-stepper button, .lightbox-bottom .vote-stepper output { color: white; }

.toast-region { position: fixed; z-index: 210; top: 102px; right: 22px; width: min(390px,calc(100% - 44px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; padding: 13px 16px 13px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; color: white; background: rgba(34,14,70,.95); box-shadow: 0 18px 48px rgba(25,8,53,.24); backdrop-filter: blur(14px); font-size: 11px; line-height: 1.45; animation: toast-in .22s ease-out; }
.toast > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #2c1b00; background: var(--yellow); font-weight: 900; }
.toast.is-error > span { color: white; background: #d64747; }
.toast.is-success > span { color: white; background: #2b9668; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1120px) {
  .header-inner { grid-template-columns: minmax(0,1fr) auto auto; }
  .profile-copy { display: none; }
  .profile-chip { padding-right: 6px; }
  .battle-intro-grid { grid-template-columns: minmax(0,1.3fr) minmax(340px,.7fr); }
  .creation-grid { column-count: 3; }
  .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .header-inner { width: min(100% - 32px,1480px); min-height: 76px; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .primary-nav { display: none; }
  .header-divider, .battle-brand span { display: none; }
  .geniart-brand img { width: 74px; }
  .battle-brand strong { font-size: 14px; }
  .battle-intro, .gallery-section, .site-footer, .secondary-main { width: min(100% - 32px,1480px); }
  .battle-intro-grid { grid-template-columns: 1fr; }
  .theme-panel { min-height: 430px; }
  .participation-panel { min-height: 0; }
  .creation-grid { column-count: 2; }
  .vote-progress-track { display: none; }
  .winner-card { grid-template-columns: 1fr; }
  .winner-image { min-height: 480px; }
  .winner-copy { min-height: 270px; }
  .member-grid { column-count: 2; }
}

@media (max-width: 620px) {
  .battle-app { background-size: 42px 42px,42px 42px,auto,auto,auto; }
  .site-header { position: sticky; top: 0; }
  .header-inner { width: calc(100% - 22px); min-height: 66px; }
  .geniart-brand img { width: 61px; }
  .identity-cluster { gap: 8px; }
  .battle-brand strong { max-width: 118px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  .profile-chip { border: 0; background: transparent; }
  .discord-button { width: 39px; height: 39px; overflow: hidden; padding: 0; border-radius: 13px; font-size: 0; }
  .account-actions { gap: 3px; }
  .account-shortcut { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0; }
  .account-shortcut:not(.is-winner)::before { content: "A"; font-size: 10px; font-weight: 900; }
  .account-shortcut.is-winner { width: 35px; height: 35px; display: inline-flex; padding: 0; font-size: 0; }
  .account-shortcut.is-winner::before { content: "✦"; font-size: 14px; }
  .logout-button { width: 33px; height: 33px; }
  .battle-intro { width: calc(100% - 20px); margin-top: 10px; }
  .battle-intro-grid { gap: 10px; }
  .theme-panel, .participation-panel { border-radius: 24px; }
  .theme-panel { min-height: 460px; padding: 27px 22px 100px; }
  .theme-panel::before { background-size: 34px 34px; }
  .battle-watermark { right: 8px; top: 54px; font-size: 135px; }
  .battle-kicker { margin-top: 48px; font-size: 9px; }
  .theme-panel h1 { font-size: clamp(35px,10.5vw,48px); line-height: .99; }
  .theme-meta { align-items: flex-start; flex-direction: column; gap: 4px; font-size: 11px; }
  .deadline-line { left: 22px; right: 22px; bottom: 20px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 5px 8px; }
  .deadline-line small { grid-column: 2; margin: 0; }
  .participation-panel { padding: 22px 18px; }
  .drop-zone, .upload-locked { min-height: 164px; }
  .upload-preview { grid-template-columns: 104px minmax(0,1fr); }
  .upload-preview img { width: 104px; height: 126px; }
  .upload-actions { align-items: stretch; flex-direction: column-reverse; }
  .upload-actions button { width: 100%; }
  .gallery-section { width: calc(100% - 20px); margin-top: 60px; padding-bottom: 135px; }
  .gallery-heading { grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; margin: 0 8px 21px; }
  .gallery-heading h2 { font-size: 31px; }
  .gallery-heading > div > p:last-child { font-size: 11px; }
  .heading-vote-counter { width: 76px; height: 76px; }
  .heading-vote-counter span { font-size: 28px; }
  .heading-vote-counter small { max-width: 55px; font-size: 7px; text-align: center; }
  .creation-grid, .member-grid { column-count: 1; }
  .creation-card { margin-bottom: 11px; border-radius: 20px; }
  .creation-card:hover { transform: none; }
  .zoom-hint { display: none; }
  .vote-stepper { grid-template-columns: 34px 34px 34px; }
  .vote-stepper button { width: 34px; height: 38px; }
  .vote-dock { bottom: max(8px,env(safe-area-inset-bottom)); width: calc(100% - 16px); }
  .vote-dock-inner { min-height: 70px; justify-content: space-between; gap: 9px; padding: 8px; border-radius: 20px; }
  .vote-progress-copy { min-width: 0; flex: 1; gap: 9px; }
  .vote-orb { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; }
  .vote-progress-copy strong { font-size: 10px; }
  .vote-progress-copy div > span { max-width: 145px; font-size: 8px; line-height: 1.25; }
  .save-votes-button { width: 112px; min-width: 112px; min-height: 48px; padding: 8px 10px; border-radius: 14px; font-size: 9px; text-align: center; }
  .secondary-main { width: calc(100% - 20px); padding: 46px 0 120px; }
  .secondary-hero { margin: 0 8px 36px; }
  .secondary-hero h1, .archive-detail-hero h1 { font-size: 47px; }
  .secondary-hero > p:last-of-type { font-size: 12px; }
  .archive-grid { grid-template-columns: 1fr; gap: 13px; }
  .archive-card { border-radius: 22px; }
  .archive-detail-hero { margin: 0 8px 42px; }
  .back-link { margin-bottom: 38px; }
  .winner-card { border-radius: 24px; }
  .winner-image { min-height: 390px; }
  .winner-copy { min-height: 250px; padding: 27px; }
  .member-hero { align-items: flex-start; flex-direction: column; gap: 18px; min-height: 390px; margin-bottom: 42px; padding: 92px 25px 30px; border-radius: 25px; }
  .member-hero .back-link { top: 25px; left: 25px; }
  .member-avatar { width: 91px; height: 91px; border-radius: 26px; }
  .member-hero h1 { font-size: 43px; }
  .member-group-heading { align-items: flex-start; flex-direction: column; gap: 5px; margin-left: 7px; }
  .site-footer { width: calc(100% - 32px); min-height: 170px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 18px; padding: 28px 0 80px; }
  .site-footer nav { flex-wrap: wrap; }
  .lightbox-backdrop { padding: 0; }
  .lightbox-dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .lightbox-stage { height: calc(100dvh - 132px); }
  .lightbox-stage img { padding: 10px 8px; }
  .lightbox-arrow { top: auto; bottom: 14px; transform: none; }
  .lightbox-arrow.is-left { left: 12px; }
  .lightbox-arrow.is-right { right: 12px; }
  .lightbox-bottom { min-height: 66px; padding: 9px 11px 9px 15px; font-size: 9px; }
  .toast-region { top: 78px; right: 12px; width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}