/* ═══════════════════════════════════════════════════════════════════════
   Spiele-Abstimmung – Feldterminal-Ästhetik
   Warmes Anthrazit, Signal-Amber, kondensierte Auszeichnungsschrift.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Flächen – warmes statt neutrales Schwarz */
  --ink-900: #0b0a08;
  --ink-850: #100e0c;
  --ink-800: #16140f;
  --ink-700: #1c1913;
  --ink-600: #241f18;
  --ink-500: #2f2920;
  --ink-400: #423a2d;

  /* Schrift */
  --bone: #ece6d9;
  --bone-dim: #a79d8a;
  --bone-faint: #6d6558;

  /* Signalfarben */
  --amber: #ffa524;
  --amber-soft: #ffc46b;
  --amber-deep: #c67c10;
  --rust: #cd5530;
  --moss: #93a355;

  --radius: 3px;
  --shell: 1280px;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink-900);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.05; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--amber); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Feines Korn über allem – nimmt dem Dunkel die digitale Flachheit */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════ Anmeldung läuft (Discord) ══
   Bewusst nur eine schmale Leiste am oberen Rand statt eines Overlays:
   hängt die Anmeldung, bleibt die Abstimmung vollständig bedienbar.        */

.loginState {
  position: fixed;
  top: max(.75rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: calc(100vw - 1.5rem);
  padding: .45rem .9rem;
  background: var(--ink-700);
  border: 1px solid var(--ink-400);
  border-radius: 999px;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .9);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--bone-dim);
  animation: slideIn .4s var(--ease-out) both;
}
.loginState__dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse 1.6s var(--ease-out) infinite;
}
.loginState--fehler { border-color: rgba(205, 85, 48, .5); }
.loginState--fehler .loginState__dot { background: var(--rust); animation: none; }

/* ── Angemeldete Person ───────────────────────────────────────────── */

.masthead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  margin-bottom: 1.4rem;
}
.masthead__top .eyebrow { margin-bottom: 0; }

.whoami {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .8rem .35rem .4rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-500);
  border-radius: 999px;
}
.whoami__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink-600); }
.whoami__text { display: grid; line-height: 1.25; }
.whoami__label {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.whoami__name { font-size: .9rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════ Kopfbereich ══ */

.masthead {
  position: relative;
  padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--ink-500);
  overflow: hidden;
}

/* Warmer Lichtkegel von oben – wie eine Notbeleuchtung */
.masthead__glow {
  position: absolute;
  top: -60%;
  left: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 165, 36, .13), rgba(255, 120, 20, .04) 42%, transparent 68%);
  pointer-events: none;
}

/* Technisches Raster im Hintergrund */
.masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ink-500) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-500) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .22;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* Bildteppich aus den Spiel-Artworks: gibt dem Kopfbereich Substanz,
   ohne mit dem Text zu konkurrieren. Leicht geneigt, damit kein starres
   Raster entsteht. */
.masthead__mosaic {
  position: absolute;
  top: -14%;
  left: -12%;
  width: 124%;
  height: 128%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  transform: rotate(-4deg);
  opacity: .17;
  filter: saturate(.5) contrast(1.05);
  mask-image: linear-gradient(115deg, #000 5%, rgba(0,0,0,.35) 42%, transparent 72%);
  pointer-events: none;
}
.masthead__mosaic i {
  display: block;
  aspect-ratio: 460 / 215;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}
@media (max-width: 780px) {
  .masthead__mosaic {
    grid-template-columns: repeat(3, 1fr);
    opacity: .13;
    mask-image: linear-gradient(160deg, #000 0%, rgba(0,0,0,.3) 45%, transparent 70%);
  }
}

.masthead .shell { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}

.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(255, 165, 36, .7);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 165, 36, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 165, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 165, 36, 0); }
}

.masthead__title {
  max-width: 16ch;
  font-size: clamp(2.6rem, 8.5vw, 5.6rem);
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Zweite Zeile in Amber – setzt den Akzent ohne Farbverlauf-Klischee */
.masthead__title::after {
  content: '';
  display: block;
  width: 96px;
  height: 4px;
  margin-top: 1.4rem;
  background: linear-gradient(90deg, var(--amber), transparent);
}

.masthead__sub {
  max-width: 46ch;
  margin-top: 1.2rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--bone-dim);
}

/* ── Statusleiste ─────────────────────────────────────────────────── */

.statbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 1px;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  background: var(--ink-500);
  border: 1px solid var(--ink-500);
}

.statbar__cell {
  padding: .85rem 1rem;
  background: var(--ink-850);
}
.statbar__cell--wide { grid-column: span 2; min-width: 0; }

.statbar dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.statbar dd {
  margin: .3rem 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statbar dd.num { font-family: var(--font-mono); font-size: 1.3rem; }

@media (max-width: 560px) {
  .statbar { grid-template-columns: 1fr 1fr; }
  .statbar__cell--wide { grid-column: span 2; }
}

/* ── Hinweisband „deine Stimme“ ───────────────────────────────────── */

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: 1.5rem;
  padding: .85rem 1.1rem;
  background: linear-gradient(90deg, rgba(255, 165, 36, .12), rgba(255, 165, 36, .02));
  border: 1px solid rgba(255, 165, 36, .34);
  border-left-width: 3px;
  animation: slideIn .5s var(--ease-out) both;
}
.notice__icon {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-900);
  font-size: .78rem;
  font-weight: 700;
}
.notice__text { flex: 1 1 14rem; font-size: .95rem; }
.notice__text strong { color: var(--amber-soft); font-weight: 600; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════ Sektionen ══ */

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--ink-500);
}
.section__title {
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.section__note {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ═══════════════════════════════════════════════════════ Spitzenreiter ══ */

.leader { margin-bottom: 1.25rem; }

.leader__card {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  background: var(--ink-800);
  border: 1px solid var(--ink-400);
  border-radius: var(--radius);
  overflow: hidden;
  animation: cardIn .5s var(--ease-out) both;
}
.leader__card--mine { border-color: var(--amber); }

.leader__art { position: relative; background: var(--ink-600); }
.leader__art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95); }
.leader__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 45%, var(--ink-800) 99%);
}

.leader__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.leader__label {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.leader__name {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.leader__meter {
  height: 7px;
  background: var(--ink-600);
  border-radius: 99px;
  overflow: hidden;
}
.leader__meter i {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber-soft));
  border-radius: 99px;
  transition: width .7s var(--ease-out);
}

.leader__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--bone-dim);
}
.leader__stats b { color: var(--bone); font-size: 1.05rem; }
.leader__gap { color: var(--moss); }

.leader__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.leader__mine {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  background: rgba(255, 165, 36, .12);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Gleichstand: mehrere Titel nebeneinander */
.leader__tie {
  padding: 1rem 1.15rem 1.15rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-400);
  border-radius: var(--radius);
}
.leader__tieList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: .6rem;
  margin-top: .8rem;
}
.leader__tieItem {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .4rem .6rem .4rem .4rem;
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s var(--ease);
}
.leader__tieItem:hover { border-color: var(--amber-deep); }
.leader__tieItem img { width: 74px; aspect-ratio: 460/215; object-fit: cover; border-radius: 2px; }
.leader__noimg { width: 74px; aspect-ratio: 460/215; background: var(--ink-600); border-radius: 2px; }
.leader__tieName {
  min-width: 0;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader__tieVotes { font-size: 1.1rem; font-weight: 700; color: var(--amber); }

@media (max-width: 680px) {
  .leader__card { grid-template-columns: 1fr; }
  .leader__art { aspect-ratio: 460 / 165; }
  .leader__art::after { background: linear-gradient(to top, var(--ink-800) 2%, transparent 55%); }
}

/* ══════════════════════════════════════════════ Einstieg ohne Stimmen ══ */

.kickoff {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background:
    radial-gradient(ellipse 80% 120% at 15% 0%, rgba(255,165,36,.07), transparent 70%),
    var(--ink-850);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
}
.kickoff__title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kickoff__text { margin-top: .4rem; font-size: .92rem; color: var(--bone-dim); }

.kickoff__picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: .7rem;
  margin-top: 1.3rem;
}
.kickoff__pick {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--ink-800);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.kickoff__pick:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
}
.kickoff__pick img { width: 100%; aspect-ratio: 460/215; object-fit: cover; }
.kickoff__pickBody { display: block; padding: .6rem .75rem .7rem; }
.kickoff__pickName {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.kickoff__pickMeta { display: block; margin-top: .15rem; font-size: .72rem; color: var(--moss); }

/* ══════════════════════════════════════════════════════════ Rangliste ══ */

.standings { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.rank {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: .5rem 1rem;
  padding: .8rem 1rem;
  background: var(--ink-800);
  overflow: hidden;
  transition: background .25s var(--ease);
}
.rank:hover { background: var(--ink-700); }

/* Der Balken liegt als Fläche hinter dem Inhalt */
.rank__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, rgba(255, 165, 36, .2), rgba(255, 165, 36, .05));
  border-right: 2px solid rgba(255, 165, 36, .45);
  transition: width .7s var(--ease-out);
}
/* Inhalt über den Balken heben – der Balken selbst bleibt absolut positioniert
   (":not" ist nötig, sonst überschreibt diese Regel sein position:absolute). */
.rank > *:not(.rank__fill) { position: relative; }

.rank__pos {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bone-faint);
  text-align: center;
}
.rank__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank__voters {
  grid-column: 2;
  font-size: .8rem;
  color: var(--bone-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank__score {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.rank__votes { font-size: 1.1rem; font-weight: 700; }
.rank__pct { font-size: .75rem; color: var(--bone-faint); min-width: 3.4ch; text-align: right; }

/* Führendes Spiel hervorheben */
.rank--lead { background: var(--ink-700); }
.rank--lead .rank__fill {
  background: linear-gradient(90deg, rgba(255, 165, 36, .34), rgba(255, 165, 36, .08));
  border-right-color: var(--amber);
}
.rank--lead .rank__pos { color: var(--amber); }
.rank--lead .rank__votes { color: var(--amber); }

/* Eigene Stimme markieren */
.rank--mine::after {
  content: 'Deine Stimme';
  position: absolute;
  top: 0; right: 0;
  padding: .1rem .5rem;
  background: var(--amber);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════ Toolbar ══ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.toolbar__search {
  position: relative;
  flex: 1 1 15rem;
  display: flex;
  align-items: center;
}
.toolbar__search .icon {
  position: absolute;
  left: .8rem;
  width: 17px; height: 17px;
  color: var(--bone-faint);
  pointer-events: none;
}
.toolbar__search input {
  width: 100%;
  padding: .65rem .9rem .65rem 2.4rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  color: var(--bone);
  transition: border-color .2s var(--ease);
}
.toolbar__search input::placeholder { color: var(--bone-faint); }
.toolbar__search input:focus { border-color: var(--amber-deep); outline: none; }
.toolbar__search input::-webkit-search-cancel-button { filter: invert(.6); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
  padding: .3rem .7rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.chip--filter { cursor: pointer; transition: all .2s var(--ease); }
.chip--filter:hover { border-color: var(--ink-400); color: var(--bone); }
.chip--filter.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-900);
}
.chip--live { background: rgba(147, 163, 85, .15); border-color: rgba(147, 163, 85, .5); color: var(--moss); }
.chip--closed { background: rgba(205, 85, 48, .15); border-color: rgba(205, 85, 48, .5); color: var(--rust); }

.select { display: flex; align-items: center; gap: .5rem; }
.select__label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.select select {
  padding: .55rem 2rem .55rem .7rem;
  background: var(--ink-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a79d8a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center / 14px;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  appearance: none;
  cursor: pointer;
  font-size: .9rem;
}

/* ════════════════════════════════════════════════════════════ Karten ══ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 1.1rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  animation: cardIn .55s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .notice { animation: none; }
}

.card:hover {
  border-color: var(--ink-400);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9);
}

/* Gewähltes Spiel: Amber-Rahmen + Eckmarken */
.card--mine { border-color: var(--amber); }
.card--mine::before,
.card--mine::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 13px; height: 13px;
  border: 2px solid var(--amber);
  pointer-events: none;
}
.card--mine::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.card--mine::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }

/* ── Kartenkopf mit Steam-Artwork ─────────────────────────────────── */

.card__art {
  position: relative;
  aspect-ratio: 460 / 215;
  background: var(--ink-600);
  overflow: hidden;
}
.card__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out), filter .4s var(--ease);
  filter: saturate(.92);
}
.card:hover .card__art img { transform: scale(1.05); filter: saturate(1.05); }

/* Verlauf nach unten, damit Badges lesbar bleiben */
.card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink-800) 2%, rgba(11, 10, 8, .45) 28%, transparent 62%);
  pointer-events: none;
}

.card__index {
  position: absolute;
  top: .55rem; left: .6rem;
  z-index: 2;
  padding: .12rem .45rem;
  background: rgba(11, 10, 8, .82);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--bone-dim);
}

.card__price {
  position: absolute;
  top: .55rem; right: .6rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .5rem;
  background: rgba(11, 10, 8, .85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--ink-400);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
}
.card__price--free { color: var(--moss); border-color: rgba(147, 163, 85, .5); }
.card__price s { color: var(--bone-faint); font-weight: 400; font-size: .68rem; }
.card__discount {
  padding: .05rem .3rem;
  background: var(--moss);
  color: var(--ink-900);
  font-size: .65rem;
}

/* Ersatz-Artwork für Titel ohne Steam-Bild (Minecraft) */
.card__art--custom {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, #4a7a34, #2d4f26 55%, #6b5334);
}
.card__art--custom span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: #f2eddf;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  padding-inline: 1rem;
}

/* ── Kartentext ───────────────────────────────────────────────────── */

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .7rem;
  padding: .9rem 1rem 1rem;
}

.card__name {
  font-size: 1.22rem;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--bone-dim);
}

/* Datenzeile im Monospace – der „Terminal“-Anker der Karte */
.card__data {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  padding-top: .7rem;
  border-top: 1px solid var(--ink-500);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--bone-dim);
}
.card__data b { color: var(--bone); font-weight: 700; }
.card__data .good { color: var(--moss); }
.card__data .mid { color: var(--amber); }
.card__data .bad { color: var(--rust); }

.card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag {
  padding: .1rem .45rem;
  background: var(--ink-600);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--bone-dim);
}

/* ── Hinweis auf ein günstigeres Angebot ──────────────────────────── */

.deal-flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  padding: .25rem .55rem;
  background: rgba(147, 163, 85, .13);
  border: 1px solid rgba(147, 163, 85, .45);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--moss);
}
.deal-flag svg { width: 13px; height: 13px; flex: none; }

/* ── Angebotsliste in der Detailansicht ───────────────────────────── */

.deals {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--ink-800);
  border: 1px solid var(--ink-500);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius);
}
.deals__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .9rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.deals__save {
  padding: .1rem .45rem;
  background: var(--moss);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}

.deals__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--ink-500); }
.deals__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .8rem;
  padding: .6rem .75rem;
  background: var(--ink-850);
}
.deals__row--best { background: var(--ink-700); }
.deals__shop { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deals__row--best .deals__shop { font-weight: 600; }
.deals__price {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--moss);
  white-space: nowrap;
}
.deals__price em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 400;
  color: var(--bone-faint);
}

/* gg.deals: statt „Zum Shop" steht rechts der bisherige Tiefstpreis */
.deals__list--gg .deals__row { grid-template-columns: 1fr auto auto; }
.deals__note {
  display: block;
  font-style: normal;
  font-size: .7rem;
  color: var(--bone-faint);
}
.deals__low {
  min-width: 6.5rem;
  font-size: .72rem;
  color: var(--bone-faint);
  text-align: right;
  white-space: nowrap;
}

.deals__none { font-size: .88rem; color: var(--bone-dim); }
.deals__hint { margin-top: .8rem; font-size: .76rem; line-height: 1.5; color: var(--bone-faint); }

.deals__links { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .8rem; }
.deals__links a {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 165, 36, .35);
}
.deals__links a:hover { border-bottom-color: var(--amber); }

@media (max-width: 420px) {
  .deals__row { grid-template-columns: 1fr auto; }
  .deals__row .btn { grid-column: 2; }
  .deals__price { grid-row: 1; grid-column: 2; }
}

/* ── Ergebnisbalken in der Karte ──────────────────────────────────── */

.card__result { margin-top: auto; padding-top: .3rem; }

.card__bar {
  position: relative;
  height: 5px;
  background: var(--ink-600);
  border-radius: 99px;
  overflow: hidden;
}
.card__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  border-radius: 99px;
  transition: width .7s var(--ease-out);
}
.card--mine .card__bar i { background: linear-gradient(90deg, var(--amber), var(--amber-soft)); }

.card__count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .45rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--bone-faint);
}
.card__count b { color: var(--bone); font-size: .82rem; }

/* ── Kartenaktionen ──────────────────────────────────────────────── */

.card__actions { display: flex; gap: .5rem; margin-top: .8rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1rem;
  min-height: 42px;
  background: none;
  border: 1px solid var(--ink-400);
  border-radius: var(--radius);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--bone-dim); background: var(--ink-600); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn--primary {
  flex: 1;
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-900);
}
.btn--primary:hover:not(:disabled) {
  background: var(--amber-soft);
  border-color: var(--amber-soft);
  box-shadow: 0 0 22px -6px rgba(255, 165, 36, .65);
}

.btn--voted {
  flex: 1;
  background: rgba(255, 165, 36, .12);
  border-color: var(--amber);
  color: var(--amber);
}
.btn--ghost { background: none; }
.btn--sm { padding: .3rem .7rem; min-height: 32px; font-size: .72rem; }
.btn--icon { flex: none; padding-inline: .7rem; }
.btn--icon svg { width: 17px; height: 17px; }

.grid__empty {
  padding: 3rem 1rem;
  color: var(--bone-faint);
  text-align: center;
}

/* ═════════════════════════════════════════════════════ Detailansicht ══ */

.sheet {
  width: min(880px, 100vw);
  max-width: 100vw;
  max-height: 100dvh;
  padding: 0;
  margin: auto;
  background: var(--ink-850);
  border: 1px solid var(--ink-400);
  border-radius: var(--radius);
  color: var(--bone);
  overflow: hidden;
}
.sheet::backdrop { background: rgba(5, 4, 3, .82); backdrop-filter: blur(5px); }
.sheet[open] { animation: sheetIn .35s var(--ease-out); }
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.sheet__scroll { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }

.sheet__close {
  position: absolute;
  top: .8rem; right: .8rem;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: rgba(11, 10, 8, .8);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ink-400);
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.sheet__close:hover { background: var(--rust); border-color: var(--rust); color: #fff; }
.sheet__close svg { width: 17px; height: 17px; }

.sheet__hero { position: relative; aspect-ratio: 16 / 7; background: var(--ink-700); }
.sheet__hero img { width: 100%; height: 100%; object-fit: cover; }
.sheet__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink-850) 3%, transparent 55%);
}

.sheet__head { position: relative; margin-top: -3rem; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.sheet__title {
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  text-transform: uppercase;
  text-wrap: balance;
}
.sheet__by { margin-top: .3rem; font-size: .85rem; color: var(--bone-faint); }

.sheet__content { padding: 1.5rem clamp(1.1rem, 4vw, 2rem) clamp(1.1rem, 4vw, 2rem); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 1px;
  margin-bottom: 1.5rem;
  background: var(--ink-500);
  border: 1px solid var(--ink-500);
}
.facts > div { padding: .7rem .8rem; background: var(--ink-800); }
.facts dt {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.facts dd {
  margin: .25rem 0 0;
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 700;
}

.sheet__text { margin-bottom: 1.5rem; color: var(--bone-dim); line-height: 1.7; }

.shots {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.5rem;
  padding-bottom: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.shots img {
  flex: none;
  width: min(78%, 420px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  scroll-snap-align: start;
}

.sheet__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.5rem; }
.sheet__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.sheet__actions .btn--primary { flex: 1 1 12rem; }

/* ═════════════════════════════════════════════════ Vote-Bestätigung ══ */

.confirm {
  width: min(440px, calc(100vw - 2rem));
  padding: clamp(1.4rem, 5vw, 2rem);
  margin: auto;
  background: var(--ink-800);
  border: 1px solid var(--amber-deep);
  border-radius: var(--radius);
  color: var(--bone);
}
.confirm::backdrop { background: rgba(5, 4, 3, .82); backdrop-filter: blur(5px); }
.confirm[open] { animation: sheetIn .3s var(--ease-out); }

.confirm__eyebrow {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.confirm__title {
  margin: .5rem 0 .6rem;
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  text-transform: uppercase;
}
.confirm__text { font-size: .9rem; color: var(--bone-dim); }

.field { display: block; margin: 1.4rem 0 .5rem; }
.field__label {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.field__label em { font-style: normal; color: var(--bone-faint); font-weight: 400; }
.field input {
  width: 100%;
  padding: .7rem .85rem;
  background: var(--ink-900);
  border: 1px solid var(--ink-400);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.field input:focus { border-color: var(--amber); outline: none; }
.field__hint { display: block; margin-top: .4rem; font-size: .76rem; color: var(--bone-faint); }

.confirm__error {
  margin-top: .9rem;
  padding: .6rem .8rem;
  background: rgba(205, 85, 48, .12);
  border: 1px solid rgba(205, 85, 48, .5);
  border-left-width: 3px;
  font-size: .85rem;
  color: #f0a68c;
}

.confirm__actions { display: flex; gap: .6rem; margin-top: 1.5rem; }
.confirm__actions .btn { flex: 1; }

/* ══════════════════════════════════════════════════════════════ Toast ══ */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 200;
  transform: translate(-50%, 130%);
  padding: .8rem 1.3rem;
  max-width: calc(100vw - 2rem);
  background: var(--ink-600);
  border: 1px solid var(--ink-400);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .95);
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.toast.is-open { transform: translate(-50%, 0); opacity: 1; }
.toast--error { border-left-color: var(--rust); }
.toast--ok { border-left-color: var(--moss); }

/* ═════════════════════════════════════════════════════════════ Fußzeile ══ */

.footer {
  margin-top: clamp(2rem, 6vw, 4rem);
  padding-block: 2.5rem;
  border-top: 1px solid var(--ink-500);
  background: var(--ink-850);
}
.footer__inner { font-size: .82rem; color: var(--bone-faint); }
.footer__meta { margin-top: .4rem; font-family: var(--font-mono); font-size: .7rem; }

/* ═══════════════════════════════════════════════════ Zustandsvarianten ══ */

body.is-closed .btn--primary:not(.btn--voted) { opacity: .35; pointer-events: none; }

/* ── Als Discord-Activity ─────────────────────────────────────────────
   Das Fenster ist deutlich kleiner als eine Browserseite. Der Kopfbereich
   wird gestrafft, damit die Spiele ohne langes Scrollen sichtbar sind. */

.via-discord .masthead {
  padding-block: 1.6rem 1.4rem;
}
.via-discord .masthead__title {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  max-width: 22ch;
}
.via-discord .masthead__title::after { width: 64px; height: 3px; margin-top: .9rem; }
.via-discord .masthead__sub { margin-top: .7rem; font-size: .95rem; }
.via-discord .masthead__mosaic { opacity: .11; }
.via-discord .masthead__glow { top: -80%; }
.via-discord .statbar { margin-top: 1.3rem; }
.via-discord .section { padding-block: 1.8rem; }
.via-discord .footer { padding-block: 1.5rem; margin-top: 1.5rem; }

/* Der Hinweis auf die Gerätekennung stimmt bei Discord-Anmeldung nicht mehr */
.via-discord .footer__meta { display: none; }

/* In sehr flachen Fenstern zusätzlich Höhe sparen */
@media (max-height: 620px) {
  .via-discord .masthead { padding-block: 1.1rem 1rem; }
  .via-discord .masthead__title { font-size: clamp(1.4rem, 4vw, 2rem); }
  .via-discord .masthead__sub { display: none; }
  .via-discord .section { padding-block: 1.3rem; }
}

/* Skelett beim ersten Laden */
.skeleton {
  height: 340px;
  background: linear-gradient(100deg, var(--ink-800) 30%, var(--ink-700) 50%, var(--ink-800) 70%);
  background-size: 220% 100%;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

@media (max-width: 480px) {
  .card__actions { flex-wrap: wrap; }
  .sheet { border: 0; border-radius: 0; }
}

/* Bedienelemente in antippbarer Größe – für Touch-Geräte jeder Breite
   (Tablet im Querformat) und zusätzlich für schmale Fenster, weil manche
   Touch-Notebooks sich als Zeigegerät ausgeben. */
@media (pointer: coarse), (max-width: 620px) {
  .chip--filter {
    min-height: 42px;
    padding-inline: 1rem;
    display: inline-flex;
    align-items: center;
  }
  .btn--sm { min-height: 42px; padding-inline: 1rem; }
  .select select { min-height: 42px; }
  .toolbar__search input { min-height: 44px; }
  .sheet__close { width: 44px; height: 44px; }
  .chips { gap: .5rem; }
}