/* BrightSMP Store
   Warmes Dunkel, ein Gold-Akzent (Laternenlicht aus dem Hero), die Gems bringen das Blau. */

@font-face { font-family: 'Bricolage'; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url('/fonts/bricolage-latin.woff2') format('woff2-variations'), url('/fonts/bricolage-latin.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 400; font-display: swap; src: url('/fonts/geist-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-display: swap; src: url('/fonts/geist-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-display: swap; src: url('/fonts/geist-latin-600-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #0D0C0B;
  --surface: #161411;
  --surface-2: #1C1915;
  --surface-hover: #221E19;
  --sunk: #0A0908;
  --line: #27231D;
  --line-strong: #3A342B;
  --fg: #F5F0E8;
  --fg-muted: #ABA293;
  --fg-dim: #7E7567;
  --accent: #F5B53D;
  --accent-hover: #FFC65C;
  --accent-deep: #B9791C;
  --accent-fg: #1B1203;
  --gem: #3EA6FF;
  --ok: #7BD88F;
  --err: #FF7A6B;

  --f-display: 'Bricolage', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r: 14px;
  --r-sm: 10px;
  --gap: 16px;
  --side: 280px;
  --shadow: 0 1px 0 rgb(255 255 255 / .035) inset, 0 10px 30px -18px rgb(0 0 0 / .8);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: 160ms;
  --base: 380ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 15px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--f-mono); font-size: .88em; background: var(--sunk); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; color: var(--accent); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-muted); }
.small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.px { filter: drop-shadow(0 2px 0 rgb(0 0 0 / .45)); } /* gibt den Pixel-Icons etwas Tiefe, passend zu den Gem-Renders */

::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
main#main:focus, main#main:focus-visible { outline: none; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top var(--fast) var(--ease); }
.skip:focus { top: 16px; }

.shell { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---------------------------------------------------------- Hero */

.hero { position: relative; isolation: isolate; min-height: clamp(460px, 62vh, 600px); display: flex; overflow: hidden; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 40%; z-index: -2; transform: scale(1.02); }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(13 12 11 / .88) 0%, rgb(13 12 11 / .62) 34%, rgb(13 12 11 / .08) 70%),
    linear-gradient(180deg, rgb(13 12 11 / .55) 0%, rgb(13 12 11 / 0) 22%, rgb(13 12 11 / 0) 55%, var(--bg) 100%);
}
.hero__inner { display: flex; flex-direction: column; width: 100%; padding-top: 24px; padding-bottom: 72px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__gem { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .5)); }
.brand__word { font: 800 24px/1 var(--f-display); letter-spacing: -.02em; }
.brand__word span { color: var(--accent); }

.top__actions { display: flex; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .1); background: rgb(16 14 12 / .82); font-weight: 600; font-size: 14px;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pill .ic { flex: none; }
.pill:hover { background: rgb(28 25 21 / .95); border-color: rgb(255 255 255 / .18); }
.pill:active { transform: translateY(1px); }
.pill--cart { border-radius: 999px 0 0 999px; background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.pill--cart:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pill__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--accent-fg); color: var(--accent); font-size: 11px; }
.pill--cart.bump .pill__count { animation: bump 420ms var(--ease); }
@keyframes bump { 30% { transform: scale(1.35); } }
.pill--user { border-radius: 0 999px 999px 0; border-left: 0; padding-right: 4px; }
.pill__head { width: 36px; height: 36px; border-radius: 999px; overflow: hidden; background: var(--sunk); border: 1px solid var(--line-strong); }
.pill__head img { width: 100%; height: 100%; image-rendering: pixelated; }
.pill__head:empty { display: none; }
.pill--user:has(.pill__head:empty) { padding-right: 16px; }

.hero__content { margin-top: auto; padding-top: 64px; max-width: 600px; }
.status {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  background: rgb(13 12 11 / .7); border: 1px solid rgb(255 255 255 / .1); font-size: 13px; font-weight: 500; color: var(--fg);
}
.led { width: 8px; height: 8px; border-radius: 999px; background: var(--fg-dim); flex: none; }
.led--on { background: #4ADE80; box-shadow: 0 0 0 3px rgb(74 222 128 / .18); }
.hero__title {
  font: 800 clamp(56px, 9vw, 112px)/.9 var(--f-display); letter-spacing: -.045em; margin: 18px 0 16px;
  text-shadow: 0 2px 30px rgb(0 0 0 / .35);
}
.hero__title span { color: var(--accent); }
.hero__lead { font-size: 17px; line-height: 1.55; color: #DDD5C8; max-width: 46ch; }
.hero__ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 12px; margin-top: 28px; }

.cta {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: var(--r);
  text-align: left; text-decoration: none; border: 1px solid rgb(255 255 255 / .12); background: rgb(16 14 12 / .82); color: var(--fg);
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.cta:hover { transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta--play { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: 0 10px 30px -12px rgb(245 181 61 / .55); }
.cta--play:hover { background: var(--accent-hover); }
.cta--discord:hover { background: rgb(28 25 21 / .95); border-color: rgb(255 255 255 / .2); }
.cta[aria-disabled="true"] { opacity: .7; }
.cta__tile { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-fg); color: var(--accent); }
.cta__tile--discord { background: #5865F2; color: #fff; }
.cta__tile .ic { width: 16px; height: 16px; }
.cta__tile--discord .ic { width: 22px; height: 22px; }
.cta__text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.cta__text strong { font: 700 17px/1.2 var(--f-display); letter-spacing: -.01em; }
.cta__sub { font-size: 13px; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta__copy, .cta__arrow { opacity: .6; transition: opacity var(--fast), transform var(--fast) var(--ease); }
.cta:hover .cta__copy, .cta:hover .cta__arrow { opacity: 1; }
.cta--discord:hover .cta__arrow { transform: translateX(3px); }

/* ---------------------------------------------------------- Layout */

.layout {
  position: relative; z-index: 1; margin-top: -32px;
  display: grid; gap: var(--gap);
  grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "nav main" "widgets main";
}
.menu { grid-area: nav; }
.widgets { grid-area: widgets; display: flex; flex-direction: column; gap: var(--gap); align-self: start; }
main { grid-area: main; min-width: 0; }

.card {
  position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface) 60%);
  border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow);
}
.label {
  font: 600 11px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted);
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.label__sub { letter-spacing: .02em; text-transform: none; font-weight: 500; color: var(--fg-dim); }
.demo-tag { font-size: 10px; letter-spacing: .08em; color: var(--fg-muted); border: 1px dashed var(--line-strong); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }

/* Menü */
.menu { padding: 14px; }
.menu .label { padding: 4px 8px 0; margin-bottom: 10px; }
.menu ul { display: grid; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--fg-muted); font-weight: 500; transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.menu a:hover { background: var(--surface-hover); color: var(--fg); }
.menu a[aria-current="page"] { color: var(--fg); background: var(--surface-hover); box-shadow: inset 2px 0 0 var(--accent); }
.menu__ic { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.menu__ic img { width: 24px; height: 24px; object-fit: contain; }

/* Köpfe */
.heads { display: flex; flex-wrap: wrap; gap: 6px; }
.heads li { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.heads img { width: 100%; height: 100%; image-rendering: pixelated; }
.heads .empty-li { width: auto; height: auto; border: 0; background: none; }
.skel { background: linear-gradient(90deg, var(--sunk), #16130F, var(--sunk)) 0 0 / 200% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }

/* Formulare */
.inline-form { display: flex; gap: 8px; }
.inline-form input, .field input {
  min-width: 0; flex: 1; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--sunk); border: 1px solid var(--line); color: var(--fg);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
input::placeholder { color: var(--fg-dim); }
input:hover { border-color: var(--line-strong); }
input:focus { border-color: var(--accent); outline: none; }
input[aria-invalid="true"] { border-color: var(--err); }
.form-msg { font-size: 13px; margin-top: 8px; color: var(--fg-muted); }
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-hover); color: var(--fg);
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { background: #2A251E; border-color: #4A4236; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 8px 22px -10px rgb(245 181 61 / .6); }
.btn--small { height: 40px; padding: 0 14px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--line); color: var(--fg-muted);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--fg); border-color: var(--line-strong); }

.ulink { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--base) var(--ease), color var(--fast) var(--ease); padding-bottom: 2px; }
.ulink:hover { background-size: 100% 1px; color: var(--fg); }

/* Top-Unterstützer */
.top-card__body { display: flex; align-items: center; gap: 14px; }
.top-card__body img { width: 56px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.top-card__name { font: 600 16px/1.25 var(--f-body); overflow-wrap: anywhere; }
.top-card__sum { color: var(--accent); font-weight: 600; }

/* Community-Ziel */
.goal__num { font: 700 28px/1 var(--f-display); letter-spacing: -.02em; margin-bottom: 10px; }
.goal__bar { height: 8px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); overflow: hidden; margin-bottom: 10px; }
.goal__bar span { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transition: width 1.2s var(--ease); }

/* ---------------------------------------------------------- Views */

.view { display: grid; gap: 32px; }
.view > * { animation: rise var(--base) var(--ease) both; }
.view > *:nth-child(2) { animation-delay: 60ms; }
.view > *:nth-child(3) { animation-delay: 120ms; }
.view > *:nth-child(4) { animation-delay: 180ms; }
.view > *:nth-child(5) { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.h1 { font: 800 clamp(34px, 4.4vw, 52px)/1 var(--f-display); letter-spacing: -.035em; }
.h2 { font: 700 26px/1.15 var(--f-display); letter-spacing: -.02em; }
.h3 { font: 700 20px/1.2 var(--f-display); letter-spacing: -.015em; }
.eyebrow { font: 600 11px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.lead { color: var(--fg-muted); max-width: 62ch; margin-top: 12px; font-size: 16px; }
.page-head { padding-top: 8px; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title .h3 { margin: 0; }
.section-title a { font-size: 13px; color: var(--fg-muted); }

.price { font-weight: 600; color: var(--fg); white-space: nowrap; }
.price small { color: var(--fg-muted); font-weight: 500; font-size: 12px; }
.tag {
  display: inline-flex; align-items: center; font: 600 10px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 7px; border-radius: 5px; background: rgb(245 181 61 / .14); color: var(--accent); white-space: nowrap;
}
.tag--gem { background: rgb(62 166 255 / .14); color: #8CC9FF; }

/* Rang-Karten */
.rank-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.rank-card { display: flex; flex-direction: column; gap: 14px; transition: border-color var(--fast) var(--ease), transform var(--base) var(--ease); }
.rank-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.rank-card--pick { border-color: rgb(245 181 61 / .45); }
.rank-card__top { display: flex; align-items: center; gap: 14px; }
.rank-card__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; flex: none; }
.rank-card__name { font: 700 21px/1.1 var(--f-display); letter-spacing: -.015em; }
.rank-card .tag { position: absolute; top: 16px; right: 16px; }
.rank-card p { color: var(--fg-muted); font-size: 14px; flex: 1; }

/* Gem-Pakete */
.gem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.gem-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: border-color var(--fast) var(--ease), transform var(--base) var(--ease); }
.gem-card:hover { border-color: rgb(62 166 255 / .35); transform: translateY(-2px); }
.gem-card__media {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 14px;
  background: radial-gradient(60% 55% at 50% 58%, rgb(62 166 255 / .16), transparent 70%), var(--sunk);
  border-bottom: 1px solid var(--line);
}
.gem-card__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .55)); transition: transform var(--base) var(--ease); }
.gem-card:hover .gem-card__media img { transform: scale(1.04) rotate(-1deg); }
.gem-card__media .tag { position: absolute; top: 12px; left: 12px; }
.gem-card__body { padding: 16px; display: grid; gap: 12px; }
.gem-card__amount { font: 700 22px/1.05 var(--f-display); letter-spacing: -.02em; }
.gem-card__amount small { display: block; font: 500 13px/1.4 var(--f-body); color: var(--fg-muted); letter-spacing: 0; margin-top: 2px; }

/* Gem-Seite: große Karten mit Mengenwahl */
.pack-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pack { display: grid; grid-template-columns: 170px 1fr; gap: 0; padding: 0; overflow: hidden; }
.pack .gem-card__media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
.pack__body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.qty-row { display: grid; grid-template-columns: repeat(var(--q, 3), minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.qty {
  display: grid; place-content: center; text-align: center; gap: 3px; min-height: 62px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); color: var(--fg);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.qty__n { font: 600 17px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.qty__p { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.qty:hover { border-color: rgb(245 181 61 / .6); background: var(--surface-hover); }
.qty:hover .qty__p { color: var(--accent); }
.qty:active { transform: translateY(1px); }
.qty.added { border-color: var(--accent); background: rgb(245 181 61 / .1); }

/* Willkommen / Schritte / Infos */
.welcome { padding: 28px; }
.welcome .prose { display: grid; gap: 12px; margin-top: 14px; color: var(--fg-muted); max-width: 70ch; }
.welcome strong { color: var(--fg); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { padding: 2px 20px 2px 0; }
.step + .step { padding-left: 20px; border-left: 1px solid var(--line); }
.step__n { font: 700 13px/1 var(--f-display); color: var(--accent); letter-spacing: .04em; }
.step h3 { font: 600 16px/1.3 var(--f-body); margin: 10px 0 6px; }
.step p { color: var(--fg-muted); font-size: 14px; }
.info-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.info h3 { font: 600 11px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 12px; }
.info p { color: var(--fg-muted); font-size: 14px; }
.info p + p { margin-top: 8px; }

/* Rang-Tabelle */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
.rtable { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.rtable th, .rtable td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); transition: background var(--fast) linear; }
.rtable tbody tr:last-child > * { border-bottom: 0; }
.rtable th[scope="row"] { text-align: left; font-weight: 500; color: var(--fg-muted); font-size: 14px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.rtable thead th { vertical-align: bottom; padding-top: 24px; padding-bottom: 18px; background: var(--surface-2); }
.rtable thead th:first-child, .rtable tfoot td:first-child { position: sticky; left: 0; z-index: 1; }
.rtable tfoot td:first-child { background: var(--surface); }
.rtable .col-head { display: grid; justify-items: center; gap: 8px; }
.rtable .col-head .rank-card__name { font-size: 19px; }
.rtable td { font-size: 14px; }
.rtable td .ic { margin: 0 auto; }
.rtable .yes { color: var(--ok); }
.rtable .no { color: var(--fg-dim); }
.rtable tfoot td { border-bottom: 0; border-top: 1px solid var(--line); }
.rtable[data-hot="1"] [data-col="1"], .rtable[data-hot="2"] [data-col="2"], .rtable[data-hot="3"] [data-col="3"] { background-color: rgb(255 255 255 / .025); }
.rtable .is-pick { box-shadow: inset 0 2px 0 var(--accent); }

/* Kisten */
.crate-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.crate { display: flex; flex-direction: column; gap: 14px; }
.crate__head { display: flex; align-items: center; gap: 14px; }
.crate__icon { width: 60px; height: 60px; display: grid; place-items: center; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; flex: none; }
.crate__cost { font-size: 13px; color: var(--fg-muted); }
.odds { display: grid; gap: 9px; }
.odds li { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 13px; }
.odds .bar { grid-column: 1 / -1; height: 4px; background: var(--sunk); border-radius: 2px; overflow: hidden; }
.odds .bar span { display: block; height: 100%; width: calc(var(--w) * 1%); min-width: 3px; background: var(--line-strong); border-radius: 2px; }
.odds li.rare .bar span { background: var(--accent); }
.odds li.rare > span:first-child { color: var(--accent); }
.odds .pct { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.key-list { display: grid; gap: 10px; }
.key-row { display: grid; grid-template-columns: minmax(190px, 1.3fr) 2fr; gap: 10px; align-items: stretch; }
.key-row__name { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.key-row__name strong { display: block; font: 700 16px/1.2 var(--f-display); }
.key-row .qty-row { margin: 0; }
.note { font-size: 13px; color: var(--fg-muted); border-left: 2px solid var(--line-strong); padding-left: 12px; }

/* Supporter */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.supporter { display: grid; justify-items: center; gap: 10px; padding: 18px 12px 14px; text-align: center; margin: 0; }
.supporter img { height: 128px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .45)); }
.supporter__name { font-weight: 600; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rank-chip { position: absolute; top: 10px; left: 10px; font: 600 10px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 5px; background: var(--sunk); border: 1px solid var(--line-strong); }
.rank-chip[data-rank="nova"] { color: #D9CCFF; }
.rank-chip[data-rank="flare"] { color: #FF9D57; }
.rank-chip[data-rank="spark"] { color: #FFD966; }

.empty { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 48px 20px; color: var(--fg-muted); }
.empty img { width: 120px; }

/* Verifizieren */
.verify { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.vsteps { display: grid; gap: 18px; }
.vsteps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.vsteps .n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line-strong); font: 700 14px/1 var(--f-display); color: var(--accent); }
.vsteps h3 { font: 600 15px/1.3 var(--f-body); margin: 5px 0 4px; }
.vsteps p { color: var(--fg-muted); font-size: 14px; }
.conn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Auth */
.auth { display: grid; gap: 14px; margin-top: 16px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--fg-muted); border: 1px solid transparent; cursor: pointer; transition: all var(--fast) var(--ease); }
.seg input:checked + span { color: var(--fg); background: var(--surface-hover); border-color: var(--line-strong); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: grid; gap: 6px; }
.field > label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.field input { width: 100%; flex: none; height: 46px; }
.code-input { font: 600 22px/1 var(--f-mono) !important; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; text-align: center; }
.prefix-note { font-size: 12px; color: var(--fg-dim); }
.demo-hint { font-size: 12px; color: var(--fg-muted); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 10px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.demo-hint button { background: none; border: 0; color: var(--accent); font-weight: 600; padding: 0; }

/* Modal */
.modal { width: min(440px, calc(100vw - 32px)); padding: 28px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.modal::backdrop { background: rgb(8 7 6 / .72); backdrop-filter: blur(3px); }
.modal[open] { animation: pop var(--base) var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal .h3 { margin-bottom: 8px; padding-right: 40px; }
.modal__close { position: absolute; top: 18px; right: 18px; }

/* Warenkorb */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(8 7 6 / .66); animation: fade var(--base) var(--ease); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-strong); animation: slide var(--base) var(--ease); }
.drawer.closing .drawer__panel { animation: slide var(--base) var(--ease) reverse both; }
.drawer.closing .drawer__scrim { animation: fade var(--base) var(--ease) reverse both; }
@keyframes slide { from { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; align-content: start; gap: 10px; }
.drawer__foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.drawer__foot:empty { display: none; }
.line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk); }
.line__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--surface); border-radius: var(--r-sm); }
.line__icon img { width: 44px; height: 44px; object-fit: contain; }
.line__name { font-weight: 600; font-size: 14px; }
.line__price { font-size: 13px; color: var(--fg); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-muted); transition: all var(--fast) var(--ease); }
.stepper button:hover { color: var(--fg); background: var(--surface-hover); }
.stepper output { min-width: 24px; text-align: center; font-weight: 600; font-size: 13px; }
.total { display: flex; justify-content: space-between; align-items: baseline; }
.total strong { font: 700 26px/1 var(--f-display); letter-spacing: -.02em; color: var(--fg); }
.check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 12px; color: var(--fg-muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.check a { color: var(--fg); }
.demo-banner { font-size: 12px; color: var(--fg-muted); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; }
.success { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 32px 8px; }
.success img { width: 150px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--fg); color: var(--bg); padding: 12px 16px; border-radius: var(--r-sm); font-weight: 600; font-size: 14px;
  box-shadow: 0 12px 30px rgb(0 0 0 / .5); transition: opacity var(--base) var(--ease), transform var(--base) var(--ease); max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Rechtliches */
.legal { display: grid; gap: var(--gap); }
.legal h2 { font: 700 18px/1.2 var(--f-display); margin-bottom: 10px; }
.legal p { color: var(--fg-muted); font-size: 14px; }
.legal p + p { margin-top: 8px; }
.todo { color: var(--accent); font-family: var(--f-mono); font-size: 13px; }

/* Footer */
.foot { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-top: 64px; padding: 24px 0 40px; border-top: 1px solid var(--line); }
.foot__brand { font: 700 14px/1 var(--f-display); margin-bottom: 8px; }
.foot__legal { font-size: 12px; color: var(--fg-dim); max-width: 52ch; }
.foot__links { display: flex; gap: 20px; font-size: 13px; color: var(--fg-muted); }

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1180px) {
  .gem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-list { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .rank-row, .crate-row { grid-template-columns: 1fr; }
  .verify { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .shell { padding: 0 16px; }
  .hero { min-height: 520px; }
  .hero__shade {
    background: linear-gradient(180deg, rgb(13 12 11 / .6) 0%, rgb(13 12 11 / .2) 28%, rgb(13 12 11 / .55) 62%, var(--bg) 100%);
  }
  .hero__inner { padding-top: 16px; padding-bottom: 56px; }
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "main" "widgets"; grid-template-rows: auto; margin-top: -24px; }
  .menu { padding: 6px; }
  .menu .label { display: none; }
  .menu ul { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .menu ul::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; padding: 8px 12px; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .widgets { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .brand__word { font-size: 20px; }
  .brand__gem { width: 36px; height: 36px; }
  .pill { height: 40px; padding: 0 12px; font-size: 13px; }
  #userName { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero__lead { font-size: 15px; }
  .hero__ctas { grid-template-columns: 1fr; }
  .gem-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gem-card__body { padding: 12px; }
  .gem-card__amount { font-size: 18px; }
  .gem-card .btn { padding: 0 8px; font-size: 13px; }
  .pack { grid-template-columns: 1fr; }
  .pack .gem-card__media { border-right: 0; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; }
  .key-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .step, .step + .step { padding: 0 0 0 16px; border-left: 1px solid var(--line); }
  .info-row { grid-template-columns: 1fr; }
  .widgets { grid-template-columns: 1fr; }
  .welcome { padding: 20px; }
  .foot { flex-direction: column; align-items: start; }
  .foot__links { flex-wrap: wrap; gap: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .view > * { animation: none; }
  .skel { animation: none; }
}

@media print {
  .hero__media, .hero__shade, .top__actions, .hero__ctas, .widgets, .menu, .drawer, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #ccc; background: none; box-shadow: none; }
}

/* ---------------------------------------------------------- Hinweis-Leiste */
.announce { position: relative; z-index: 5; text-align: center; padding: 9px 16px; font-size: 13px; font-weight: 600; background: var(--accent); color: var(--accent-fg); }
.announce[hidden] { display: none; }
.announce--warn { background: #7A2E22; color: #FFE8E3; }

/* ---------------------------------------------------------- Warenkorb: Codes, Zahlart, Summe */
.voucher { display: grid; gap: 8px; }
.voucher form { display: flex; gap: 8px; }
.voucher input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r-sm); background: var(--sunk); border: 1px solid var(--line); color: var(--fg); text-transform: uppercase; }
.voucher input::placeholder { text-transform: none; color: var(--fg-dim); }
.voucher input:focus { border-color: var(--accent); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; background: rgb(245 181 61 / .12); color: var(--accent); font-size: 12px; font-weight: 600; }
.chip button { width: 20px; height: 20px; border-radius: 999px; border: 0; background: rgb(245 181 61 / .18); color: inherit; display: grid; place-items: center; padding: 0; }
.chip button:hover { background: rgb(245 181 61 / .35); }
.sum { display: grid; gap: 6px; font-size: 14px; }
.sum div { display: flex; justify-content: space-between; color: var(--fg-muted); }
.sum .disc { color: var(--ok); }
.pay { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.pay legend { font: 600 11px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; padding: 0; }
.pay label { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); cursor: pointer; font-weight: 600; font-size: 14px; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.pay label:hover { border-color: var(--line-strong); }
.pay label:has(input:checked) { border-color: var(--accent); background: rgb(245 181 61 / .07); }
.pay input { accent-color: var(--accent); width: 16px; height: 16px; }
.pay small { margin-left: auto; color: var(--fg-dim); font-weight: 500; }
.sandbox { font-size: 12px; color: var(--fg-muted); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; }

/* ---------------------------------------------------------- Bestellseiten */
.status-card { display: grid; gap: 14px; }
.status-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pill-status { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--surface-hover); color: var(--fg-muted); }
.pill-status.ok { background: rgb(123 216 143 / .14); color: var(--ok); }
.pill-status.wait { background: rgb(245 181 61 / .14); color: var(--accent); }
.pill-status.bad { background: rgb(255 122 107 / .14); color: var(--err); }
.order-list { display: grid; gap: 10px; }
.order-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 16px; text-decoration: none; }
.order-row:hover { border-color: var(--line-strong); }
.order-row .id { font-family: var(--f-mono); font-size: 13px; }
.lines { display: grid; gap: 8px; }
.lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.legal-text { display: grid; gap: 10px; color: var(--fg-muted); font-size: 14px; white-space: pre-line; }
@media (max-width: 640px) { .order-row { grid-template-columns: 1fr auto; } .order-row > :nth-child(2) { grid-column: 1 / -1; order: 3; } }