/* Generated by build-theme.mjs. Source order is intentional. */

/* ===== style.css ===== */
/* Booster & Bohne — Mobile-UI v4 „Candy-Max"
   Gewählt von Constantin (Runde 2, Mockup R2, 11.08.2026). Referenz-Lock:
   Fluz (Vivid gradient playground): Candy-Verlauf Grün→Blau→Lavendel als
   Hero-/Highlight-Feld, hohe Condensed-CAPS-Typo (Bebas Neue) mit engem
   Tracking, Near-Black #1a0000 für Text/CTAs/dunkle Bars, Pill-Buttons
   (200px), 20px-Karten OHNE Border, weiche Farbflächen statt Kanten,
   dunkle Kontrast-Karten #221919, schwebende Sprites als echte Assets.
   Farbrollen: Candy-Verlauf = Hero/Fortschritt/Highlight · Sky #98bbf4 =
   Feature-Fläche (Pokédex) · #1a0000 = Text + Primär-CTA · Mint #9be8b7 =
   Aktiv-Akzent in dunklen Bars · Ball-Stufen (Rot/Blau/Amber/Violett/Gold)
   bleiben Pokémon-Kanon. Keine harten Borders, keine Emojis als Icons. */

:root {
  --black: #1a0000;
  --dark: #221919;
  --white: #fff;
  --mist: #f2f2f2;
  --cloud: #ededec;
  --ash: #514f4c;
  --pebble: #aeaea6;
  --sky: #98bbf4;
  --mint: #9be8b7;
  --lav: #c9b8ff;
  --danger: #d63a2a;
  --green: #128e44;

  --grad: linear-gradient(160deg, #9be8b7 0%, #82befe 48%, #c9b8ff 100%);
  --grad-h: linear-gradient(90deg, #9be8b7 0%, #82befe 48%, #c9b8ff 100%);

  --tier1: #e0301e; --tier2: #2f7cf6; --tier3: #f0a11b; --tier4: #8a5cf5;
  --gold: #d9a51b;

  --r-card: 20px;
  --r-pill: 200px;
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--white);
  color: var(--black);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
.disp, h2, h3, .big, .brand, .life-val, .prize-name, .pk-title {
  font-family: "Bebas Neue", Inter, sans-serif;
  font-weight: 400; letter-spacing: -.005em; text-transform: uppercase;
}

#app { display: flex; flex-direction: column; min-height: 100dvh; }

/* ---------- Dunkle Topbar (Fluz-Signatur: near-black Bars) ---------- */
#topbar {
  display: flex; align-items: center; gap: .6rem;
  padding: calc(.55rem + env(safe-area-inset-top)) 1rem .55rem;
  position: sticky; top: 0; z-index: 10;
  background: var(--black); color: var(--white);
}
.logo { width: 30px; height: 30px; border-radius: 9px; }
.brand { font-size: 1.3rem; line-height: 1; }
.brand span { color: var(--mint); }
#user-chip {
  margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--black);
  background: rgba(255, 255, 255, .9); border-radius: var(--r-pill); padding: .32rem .8rem;
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#view {
  flex: 1; padding: 1rem 1rem 6.6rem;
  max-width: 480px; width: 100%; margin: 0 auto;
}

/* ---------- Dunkle Tabbar ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex;
  background: var(--black);
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
}
#tabbar button {
  flex: 1; min-width: 0; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .4rem 0 .35rem;
  color: #8d7f7f; font: inherit; font-size: .6rem; font-weight: 600;
  line-height: 1.1; transition: color .15s, transform .12s;
}
#tabbar button:active { transform: scale(.93); }
#tabbar button .ico { display: flex; }
#tabbar button .ico svg { width: 22px; height: 22px; }
#tabbar button.active { color: var(--white); }
#tabbar button.active .ico { color: var(--mint); }

/* ---------- Typo & Basisbausteine ---------- */
h2 { font-size: 1.9rem; line-height: .95; margin: 0 0 .7rem; }
h3 { font-size: 1.4rem; line-height: .95; margin: .9rem 0 .45rem; }

.eyebrow {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ash); margin-bottom: .3rem;
  font-family: Inter, sans-serif;
}

.card {
  background: var(--mist);
  border: 0;
  border-radius: var(--r-card);
  padding: 1.1rem;
  margin-bottom: .85rem;
}
.muted { color: var(--ash); font-size: .84rem; line-height: 1.5; }
.big { font-size: 3.4rem; line-height: .9; }

button.primary, button.ghost {
  font: inherit; font-size: .92rem; font-weight: 700;
  padding: .85rem 1.6rem; width: 100%; margin-top: .7rem;
  cursor: pointer; border: 0; border-radius: var(--r-pill);
  transition: transform .12s, filter .12s;
}
button.primary { background: var(--black); color: var(--white); }
button.primary:active { transform: scale(.97); filter: brightness(1.4); }
button.primary:disabled { opacity: .4; }
button.ghost { background: var(--cloud); color: var(--black); }
button.ghost:active { transform: scale(.97); background: #e2e0de; }
button.ghost.is-active { background: var(--black); color: var(--white); }

input, select, textarea {
  font: inherit; width: 100%; padding: .78rem .95rem; margin-top: .35rem;
  border-radius: 14px; border: 1px solid #e2e0de;
  background: var(--white); color: var(--black);
  -webkit-appearance: none; appearance: none;
}
input:focus, textarea:focus { outline: 2px solid var(--black); outline-offset: -1px; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ash); display: block; margin-top: .8rem;
}
.row { display: flex; gap: .6rem; }
.row > * { flex: 1; }
.err { color: var(--danger); font-size: .85rem; font-weight: 600; margin-top: .5rem; }
.ok { color: var(--green); font-size: .85rem; font-weight: 600; margin-top: .5rem; }

.section-heading {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .35rem;
}
.section-heading h3 { margin: 0; }
.section-heading span {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pebble);
}

/* ---------- Login ---------- */
.login-hero {
  text-align: center; padding: 1.6rem 1rem 1.3rem; margin: 0 -0 1rem;
  background: var(--grad); border-radius: 0 0 32px 32px;
  margin: -1rem -1rem 1rem;
}
.login-hero img { width: 72px; height: 72px; border-radius: 18px; }
.login-hero h1 {
  font-family: "Bebas Neue", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 2.6rem; line-height: .9; letter-spacing: -.005em; margin: .6rem 0 .2rem;
}
.login-hero h1 span { color: inherit; }
.login-hero p { color: var(--black); opacity: .75; font-size: .86rem; font-weight: 600; }
.demo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.demo-btns button { margin-top: 0; padding: .7rem .5rem; font-size: .84rem; line-height: 1.35; }
.demo-btns button .muted { font-size: .68rem; font-weight: 600; }

/* ---------- Start ---------- */
.hero-card {
  position: relative; overflow: hidden;
  background: var(--grad);
  padding: 1.3rem 1.1rem 1.4rem;
}
.hero-card::after {
  content: ""; position: absolute; right: -10px; top: 8px;
  width: 128px; height: 128px; transform: rotate(10deg);
  background: url("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png") center/contain no-repeat;
  filter: drop-shadow(0 10px 14px rgba(26, 0, 0, .25));
  pointer-events: none;
}
.hero-card .eyebrow { color: var(--black); opacity: .65; }
.hero-card .big { font-size: 4.6rem; position: relative; z-index: 1; }
.hero-card .muted { color: var(--black); opacity: .75; font-weight: 600; max-width: 62%; }

.golden-card { background: var(--dark); color: var(--white); }
.golden-card .eyebrow { color: var(--pebble); }
.golden-card h3 { margin-top: 0; font-size: 1.9rem; }
.golden-card .primary { background: var(--white); color: var(--black); }

/* Streak */
.streak { display: flex; gap: .6rem; margin: .65rem 0; }
.streak i {
  flex: 1; aspect-ratio: 1; max-width: 50px; border-radius: 50%; font-style: normal;
  background: #e3e1de;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--pebble);
}
.streak i.done { background: var(--black); color: var(--white); }
.streak i.done::before { content: "\2713"; }
.hero-card .streak i { background: rgba(255, 255, 255, .55); color: rgba(26, 0, 0, .5); }
.hero-card .streak i.done { background: var(--black); color: var(--white); }

/* Gutscheine */
.voucher {
  display: flex; align-items: center; gap: .8rem; padding: .62rem 0;
  border-top: 1px solid var(--cloud); font-weight: 600; font-size: .9rem;
}
.voucher:first-of-type { border-top: 0; }
.voucher .code {
  font-family: "Bebas Neue", sans-serif; font-size: .95rem; letter-spacing: .14em;
  background: var(--black); color: var(--white);
  border-radius: var(--r-pill); padding: .28rem .85rem; white-space: nowrap;
}
.voucher.used { opacity: .4; }
.voucher.used span:last-child { text-decoration: line-through; }
details summary { cursor: pointer; padding: .4rem 0; -webkit-user-select: none; user-select: none; }

/* ---------- Overlay: Sheets & Pack-Bühne ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem;
  background: rgba(26, 0, 0, .66);
}
.pack-stage { text-align: center; max-width: 360px; width: 100%; margin: auto; }
.pack-stage.card {
  margin: auto auto calc(.4rem + env(safe-area-inset-bottom));
  background: var(--white); border-radius: 28px;
  padding: 1.3rem 1.15rem 1.1rem;
  animation: sheet-up .32s cubic-bezier(.3, .8, .3, 1);
}
.pack-stage.card::before {
  content: ""; display: block; width: 38px; height: 5px; border-radius: 3px;
  background: var(--cloud); margin: -.25rem auto .8rem;
}
@keyframes sheet-up { from { transform: translateY(50px); opacity: 0; } }
.toast-card h2 { font-size: 1.7rem; margin-bottom: .4rem; }
.toast-card .big { font-size: 2.6rem; }

/* Booster-Pack — Candy-Folie */
.pack-score { color: var(--white); font-weight: 700; font-size: .9rem; margin-bottom: 1rem; }
.bb-pack {
  position: relative; width: 218px; height: 300px; margin: 0 auto 1rem;
  border: 0; border-radius: 20px; cursor: pointer; overflow: hidden;
  display: block; padding: 0;
  background: var(--grad);
  box-shadow: 0 24px 50px -14px rgba(130, 190, 254, .55);
  transition: transform .12s;
}
.bb-pack:active { transform: scale(.97) rotate(-1deg); }
.bb-pack.golden {
  background: linear-gradient(160deg, #ffe9a8 0%, #f0a11b 55%, #221919 130%);
  box-shadow: 0 24px 55px -12px rgba(240, 161, 27, .6);
}
.pack-crimp {
  position: absolute; top: 0; left: 0; right: 0; height: 20px;
  background:
    conic-gradient(from 135deg at 50% 100%, rgba(26, 0, 0, .85) 90deg, transparent 0) bottom/12px 7px repeat-x,
    var(--black);
}
.pack-art {
  position: absolute; inset: 20px 0 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem; color: var(--black);
}
.pack-kicker {
  font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  opacity: .65;
}
.pack-art img {
  width: 92px; border-radius: 22px;
  filter: drop-shadow(0 10px 16px rgba(26, 0, 0, .3));
}
.pk-title { font-size: 1.75rem; line-height: .9; }
.pack-edition { font-size: .66rem; font-weight: 600; opacity: .65; letter-spacing: .08em; }
.pack-rip-line {
  position: absolute; top: 28px; left: 0; right: 0; height: 0;
  border-top: 2px dashed rgba(26, 0, 0, .5);
}
.pack-rip-line i { position: absolute; right: 8px; top: -11px; font-style: normal; }
.pack-rip-line i::before { content: "\2702"; color: rgba(26, 0, 0, .6); font-size: .8rem; }
.pack-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 47%,
    rgba(255, 255, 255, .08) 56%, transparent 70%);
  background-size: 260% 100%; animation: gloss 3.2s ease-in-out infinite;
}
@keyframes gloss { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.pack-hint { color: var(--white); font-size: .84rem; font-weight: 600; }
.pack-hint span { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.bb-pack.opening { animation: rip .55s ease-in forwards; }
@keyframes rip {
  25% { transform: rotate(2deg) scale(1.04); }
  55% { transform: rotate(-3deg) scale(1.08); }
  100% { transform: rotate(1deg) scale(0); opacity: 0; }
}
.is-ripping .pack-gloss { animation: none; }

/* Gewinn-Panel */
.tier-card {
  width: 272px; margin: 0 auto;
  background: var(--white); border-radius: 24px;
  padding: 1rem 1rem 1.15rem; color: var(--black);
}
.tier-card.is-visible { animation: pop .45s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes pop { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.reward-card { position: relative; border-radius: 14px; overflow: hidden; }
.reward-card img { width: 100%; display: block; }
.reward-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  background-size: 240% 100%; animation: gloss 2.6s ease-in-out infinite;
}
.reward-kicker {
  margin-top: .85rem; font-size: .64rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pebble);
}
.prize-name { font-size: 2rem; line-height: .95; margin: .2rem 0; }
.tier-1 { color: var(--tier1); } .tier-2 { color: var(--tier2); }
.tier-3 { color: var(--tier3); } .tier-4 { color: var(--tier4); }
.reward-title { font-weight: 700; font-size: .98rem; }
.reward-code {
  font-family: "Bebas Neue", sans-serif; font-size: 1rem; letter-spacing: .15em;
  background: var(--black); color: var(--white); border-radius: var(--r-pill);
  padding: .12rem .7rem;
}
.toast-card .prize-name { color: var(--black); }

/* QR-Sheet */
.qr-box img {
  width: 240px; max-width: 82%; border-radius: 16px; margin: .5rem auto;
  background: var(--white); display: block;
}
.qr-box h2 { font-size: 1.5rem; }

/* ---------- Hero-Header der Tabs ---------- */
.dex-hero, .fame-hero, .pass-hero, .kasse-hero { padding: .3rem .1rem .9rem; }
.dex-hero h2, .fame-hero h2, .pass-hero h2, .kasse-hero h2 {
  font-size: 2.6rem; margin: 0; line-height: .9;
}
.fame-hero p, .pass-hero p, .kasse-hero p { color: var(--ash); font-size: .86rem; }

/* Pokédex — Sky-Fläche als Feature-Rolle */
.dex-hero {
  display: flex; align-items: center; gap: 1rem;
  background: var(--sky); border-radius: var(--r-card);
  padding: 1.1rem; margin-bottom: .8rem;
}
.dex-hero p { color: var(--black); opacity: .75; font-size: .86rem; font-weight: 600; }
.dex-progress {
  position: relative; flex: none; width: 86px; height: 86px; border-radius: 50%;
  background: conic-gradient(#1a0000 calc(var(--progress) * 1%), rgba(255, 255, 255, .55) 0);
  display: flex; align-items: center; justify-content: center;
}
.dex-progress::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--white);
}
.dex-progress span {
  position: relative; font-family: "Bebas Neue", sans-serif;
  font-size: 1.7rem; line-height: 1;
}
.dex-progress small { font-size: .6em; color: var(--ash); }

.dex-tools { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .8rem; }
.dex-search {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  background: var(--mist); border-radius: var(--r-pill); padding: 0 .4rem 0 .95rem;
}
.dex-search span { color: var(--pebble); font-size: 1.05rem; }
.dex-search input { background: none; border: 0; margin: 0; padding: .72rem .4rem .72rem 0; }
.dex-search input:focus { outline: none; }
.dex-search:focus-within { outline: 2px solid var(--black); outline-offset: -1px; }
.dex-filters { display: flex; gap: .4rem; }
.dex-filters button {
  flex: 1; font: inherit; font-size: .8rem; font-weight: 600; color: var(--ash);
  background: var(--cloud); border: 0; border-radius: var(--r-pill);
  padding: .5rem 0; cursor: pointer; transition: all .15s;
}
.dex-filters button.is-active { background: var(--black); color: var(--white); }

.dex-box {
  background: var(--mist); border: 0; border-radius: var(--r-card);
  margin-bottom: .7rem; overflow: hidden;
}
.dex-box summary { list-style: none; display: flex; align-items: center; gap: .7rem; padding: .85rem .95rem; }
.dex-box summary::-webkit-details-marker { display: none; }
.dex-toggle {
  order: 9; flex: none; width: 20px; height: 20px; position: relative; color: var(--ash);
  transition: transform .2s;
}
.dex-toggle::before {
  content: ""; position: absolute; left: 6px; top: 5px; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.dex-box[open] .dex-toggle { transform: rotate(180deg); }
.dex-ball-mark {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--white);
}
.t0 .dex-ball-mark { background: var(--tier1); }
.t1 .dex-ball-mark { background: var(--tier2); }
.t2 .dex-ball-mark { background: var(--tier3); }
.t3 .dex-ball-mark { background: var(--tier4); }
.t4 .dex-ball-mark { background: var(--gold); font-size: .54rem; }
.dex-tier-title { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.dex-tier-title strong {
  font-family: "Bebas Neue", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1.15rem; line-height: 1; letter-spacing: .01em;
}
.dex-tier-title small { color: var(--ash); font-size: .7rem; font-weight: 600; }
.dex-tier-count {
  margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--black);
  background: var(--white); border-radius: var(--r-pill); padding: .28rem .65rem;
}
.dex-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem;
  padding: 0 .7rem .8rem;
}
.dex-cell {
  background: var(--white); border: 0; border-radius: 14px;
  padding: .4rem .25rem .45rem;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.dex-cell.uncaught { background: rgba(255, 255, 255, .45); }
.dex-number { font-size: .56rem; font-weight: 700; color: var(--pebble); align-self: flex-start; padding-left: .2rem; }
.dex-sprite { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.dex-sprite img { width: 88%; height: 88%; object-fit: contain; }
.dex-cell.uncaught .dex-sprite img { filter: brightness(0) opacity(.16); }
.dex-name {
  font-size: .6rem; font-weight: 700; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dex-cell.uncaught .dex-name { color: var(--pebble); }
.dex-empty { text-align: center; padding: 1.6rem 1rem; background: var(--mist); }
.dex-empty span { font-size: 1.5rem; color: var(--pebble); display: block; }
.dex-empty strong { display: block; margin: .3rem 0 .1rem; }
.life-pad {
  background: var(--white); border-radius: 16px; padding: .85rem; text-align: center;
}
.life-val { font-size: 3.8rem; line-height: .95; font-variant-numeric: tabular-nums; }
.life-btns { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-top: .35rem; }
.life-btns button {
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
  background: var(--cloud); color: var(--black);
  border: 0; border-radius: var(--r-pill);
  min-width: 56px; padding: .52rem .6rem;
  transition: transform .1s;
}
.life-btns button:active { transform: scale(.92); background: #dedcda; }
.calc-display {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--white); border-radius: 14px; padding: .55rem .95rem; margin-top: .6rem;
}
.calc-display span { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--pebble); }
.calc-display strong {
  font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 1.9rem; font-variant-numeric: tabular-nums;
}
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .6rem; }
.keypad button { min-width: 0; padding: .68rem 0; border-radius: 14px; }
.key-soft { background: var(--white) !important; }
.key-minus { background: var(--white) !important; color: var(--danger) !important; }
.key-plus { background: var(--black) !important; color: var(--white) !important; }

.tool-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 1rem 0 .45rem; }
.tool-section-title:first-child { margin-top: 0; }
.tool-section-title span {
  font-family: "Bebas Neue", sans-serif; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .02em;
}
.tool-section-title small { color: var(--pebble); font-size: .66rem; font-weight: 600; }
.prize-cards { display: flex; gap: .25rem; margin: .15rem 0 .3rem; }
.prize-cards i {
  width: 12px; height: 17px; border-radius: 3px;
  background: var(--grad);
}
.prize-cards i.taken { background: var(--cloud); }
.damage-counter { display: flex; align-items: center; gap: .8rem; }
.damage-token {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bebas Neue", sans-serif; font-size: 1.5rem; color: var(--white);
  background: var(--tier4);
  font-variant-numeric: tabular-nums;
}
.damage-counter .life-btns { justify-content: flex-start; }
.damage-counter .life-btns button { min-width: 48px; font-size: .8rem; padding: .48rem .4rem; }
.condition-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.condition-grid button {
  font: inherit; font-size: .58rem; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: var(--white); border: 0;
  border-radius: 12px; padding: .55rem .1rem; color: var(--ash);
}
.condition-grid button span { font-size: 1rem; line-height: 1.2; }
.condition-grid button.is-active { background: var(--black); color: var(--white); }

/* ---------- Hall of Fame ---------- */
.fame-hero { position: relative; }
.season-end {
  position: absolute; right: .1rem; top: .4rem; text-align: center;
  background: var(--mist); border-radius: 14px; padding: .45rem .75rem;
}
.season-end span {
  display: block; font-size: .52rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pebble);
}
.season-end strong { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 1.15rem; }
.my-season-card {
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--grad); border-radius: var(--r-card);
  padding: 1.05rem; margin-bottom: .9rem; color: var(--black);
}
.my-season-card > span {
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .65;
}
.my-season-card strong { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 2.6rem; line-height: .95; }
.my-season-card small { opacity: .75; font-size: .76rem; font-weight: 600; }

.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: .5rem; margin-bottom: .9rem; }
.podium-place {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  background: var(--mist); border-radius: 16px;
  padding: .75rem .3rem .45rem; min-width: 0;
}
.podium-place.place-1 { order: 2; padding-top: 1rem; }
.podium-place.place-2 { order: 1; }
.podium-place.place-3 { order: 3; }
.podium-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; color: var(--white);
  background: var(--black);
}
.podium-place strong {
  font-size: .78rem; font-weight: 700; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .2rem;
}
.podium-place > span { font-size: .68rem; font-weight: 600; color: var(--ash); }
.podium-step {
  font-style: normal; font-family: "Bebas Neue", sans-serif; font-size: 1.1rem;
  width: 100%; text-align: center; border-radius: 10px; margin-top: .3rem; color: var(--black);
}
.place-1 .podium-step { background: var(--grad); padding: .75rem 0; }
.place-2 .podium-step { background: var(--cloud); padding: .5rem 0; }
.place-3 .podium-step { background: #e6dbcd; padding: .32rem 0; }

.bb-medal {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; line-height: 1; color: var(--black);
}
.bb-medal i { font-style: normal; font-size: .38rem; font-weight: 700; opacity: .6; }
.bb-medal b { font-size: .72rem; }
.bb-medal.gold { background: #f5cf58; }
.bb-medal.silver { background: var(--cloud); }
.bb-medal.bronze { background: #e0b184; }

.lb-row {
  display: flex; align-items: center; gap: .7rem; padding: .62rem 0;
  border-top: 1px solid var(--cloud); font-size: .9rem;
}
.lb-row:first-of-type { border-top: 0; }
.lb-row .pl {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--ash);
  background: var(--white);
}
.lb-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .pts {
  margin-left: auto; font-family: "Bebas Neue", sans-serif; font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.fame-empty { text-align: center; padding: 1.5rem 1rem; }
.fame-empty span { font-size: 1.4rem; display: block; color: var(--pebble); }
.fame-empty strong { display: block; margin: .3rem 0 .1rem; }
.honor-section { margin-top: 1.1rem; }
.honor-grid { display: flex; flex-direction: column; gap: .5rem; }
.honor-badge {
  display: flex; align-items: center; gap: .8rem;
  background: var(--mist); border-radius: 16px; padding: .7rem .85rem;
}
.honor-badge strong { display: block; font-size: .88rem; font-weight: 700; }
.honor-badge span { display: block; color: var(--ash); font-size: .72rem; font-weight: 600; }
.honor-badge small { color: var(--pebble); font-size: .68rem; }

/* ---------- Booster Pass ---------- */
.pass-bar {
  height: 14px; border-radius: 7px; background: var(--cloud);
  margin: .6rem 0 .45rem; overflow: hidden;
}
.pass-bar i {
  display: block; height: 100%; border-radius: 7px;
  background: var(--grad-h);
  transition: width .5s cubic-bezier(.3, 1, .4, 1);
}
.pass-level {
  display: flex; align-items: center; gap: .8rem; padding: .68rem 0;
  border-top: 1px solid var(--cloud);
}
.pass-level:first-of-type { border-top: 0; }
.pass-level .lv {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bebas Neue", sans-serif; font-size: 1.15rem;
  background: var(--white); color: var(--pebble);
}
.pass-level.done .lv { background: var(--black); color: var(--white); }
.pass-level > span:nth-child(2) { font-size: .88rem; font-weight: 600; line-height: 1.35; }
.pass-level button.primary { width: auto; margin-top: 0; padding: .5rem 1rem; font-size: .8rem; flex: none; }

/* ---------- Kasse & Admin ---------- */
#k-stats p { margin-top: .2rem; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===== ui-system-v6.css ===== */
/* Booster & Bohne — Clean App UI v6
   Refero lock: Programa foundation, mono structure, Zora/Artsy content density.
   White canvas, green structure, yellow progress/reward. No gradients, glow or icon plates. */

:root {
  --ui-canvas: #ffffff;
  --ui-surface: #ffffff;
  --ui-ink: #172019;
  --ui-green: #284a30;
  --ui-green-strong: #193b23;
  --ui-green-soft: #e8f0e7;
  --ui-yellow: #e7c653;
  --ui-yellow-soft: #f8edbd;
  --ui-muted: #6d746d;
  --ui-faint: #9ba099;
  --ui-line: rgba(23, 32, 25, .14);
  --ui-line-strong: rgba(23, 32, 25, .28);
  --ui-danger: #a84738;
  --ui-success: #18713a;
  --ui-radius-control: 6px;
  --ui-radius-field: 10px;
  --ui-radius-surface: 12px;
  --ui-content: 52rem;

  --black: var(--ui-ink);
  --dark: var(--ui-green-strong);
  --white: var(--ui-surface);
  --mist: var(--ui-canvas);
  --cloud: var(--ui-green-soft);
  --ash: var(--ui-muted);
  --pebble: var(--ui-faint);
  --mint: var(--ui-green);
  --danger: var(--ui-danger);
  --green: var(--ui-success);
  --grad: var(--ui-yellow);
  --grad-h: var(--ui-yellow);
  --r-card: var(--ui-radius-surface);
  --r-pill: var(--ui-radius-control);
}

html {
  min-width: 320px;
  height: 100%;
  /* App-Oberflaeche: der Root darf nie selbst scrollen oder elastisch federn.
     Echter Inhaltsscroll liegt ausschliesslich in #view. (Regel 04.09.2026) */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ui-canvas);
}

body {
  height: 100%;
  overflow: hidden;
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  line-height: 1.45;
  overscroll-behavior: none;
}

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

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

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ui-yellow);
  outline-offset: 2px;
}

.disp,
h1,
h2,
h3,
.big,
.brand,
.life-val,
.prize-name,
.pk-title {
  color: var(--ui-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-weight: 650;
  letter-spacing: -.045em;
  text-transform: none;
}

h2 {
  margin: 0;
  font-size: clamp(2.1rem, 9vw, 2.85rem);
  line-height: 1;
  text-wrap: balance;
}

h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.2;
}

p { text-wrap: pretty; }

#app {
  display: flex;
  width: 100%;
  max-width: none;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  flex-direction: column;
  background: var(--ui-canvas);
}

#topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  flex-shrink: 0;
  display: grid;
  min-height: 4rem;
  padding: calc(.65rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 1.5rem) .65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: color-mix(in srgb, var(--ui-canvas) 94%, transparent);
  color: var(--ui-ink);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#topbar .logo {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

#topbar .brand {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#user-chip {
  display: block;
  min-width: 0;
  max-width: 9.5rem;
  margin: 0;
  padding: .15rem 0 .15rem .85rem;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view {
  flex: 1;
  min-height: 0;
  width: min(100%, var(--ui-content));
  max-width: var(--ui-content);
  margin: 0 auto;
  /* Nur hier wird gescrollt; contain haelt den Scroll im Container und der
     Root federt nicht mit, auch wenn der Inhalt kuerzer als der Viewport ist. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.45rem, 5vw, 2.3rem) clamp(1rem, 4vw, 1.75rem)
    calc(6.25rem + env(safe-area-inset-bottom));
}

#tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 14;
  display: grid;
  width: 100%;
  min-height: calc(4.35rem + env(safe-area-inset-bottom));
  margin: 0;
  padding: 0 max(.2rem, env(safe-area-inset-left)) env(safe-area-inset-bottom)
    max(.2rem, env(safe-area-inset-right));
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: color-mix(in srgb, var(--ui-canvas) 96%, transparent);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#tabbar button {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 4.35rem;
  margin: 0;
  padding: .56rem .1rem;
  flex-direction: column;
  gap: .22rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-faint);
  box-shadow: none;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: none;
}

#tabbar button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  background: transparent;
  transform: translateX(-50%);
}

#tabbar button.active { color: var(--ui-green); }
#tabbar button.active::before { background: var(--ui-yellow); }

#tabbar button .ico {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  place-items: center;
  color: currentColor;
  line-height: 0;
}

#tabbar button .ico svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  stroke-width: 1.8;
  transform: none;
}

.ui-icon,
.section-icon,
.home-module-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  line-height: 0;
}

.ui-icon svg,
.section-icon svg,
.home-module-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.8;
}

.eyebrow {
  display: block;
  margin: 0 0 .45rem;
  color: var(--ui-muted);
  font: 650 .66rem/1.2 Inter, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.muted {
  color: var(--ui-muted);
  font-size: .82rem;
  line-height: 1.5;
}

.big {
  font-size: clamp(2.8rem, 12vw, 4rem);
  font-variant-numeric: tabular-nums;
  line-height: .95;
}

.card {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

button.primary,
button.secondary,
button.ghost,
.auth-primary {
  display: inline-flex;
  width: 100%;
  min-height: 3rem;
  margin: .75rem 0 0;
  padding: .78rem 1rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  background: var(--ui-green);
  color: var(--ui-surface);
  box-shadow: none;
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: -.015em;
  text-transform: none;
  transition: background-color 140ms ease, color 140ms ease, transform 100ms ease;
}

button.secondary,
button.ghost {
  border-color: var(--ui-line-strong);
  background: transparent;
  color: var(--ui-green);
}

button.primary:hover,
.auth-primary:hover { background: var(--ui-green-strong); }

button.secondary:hover,
button.ghost:hover { background: var(--ui-green-soft); }

button.primary:active,
button.secondary:active,
button.ghost:active,
.auth-primary:active { transform: translateY(1px); }

button.primary:disabled,
button.secondary:disabled,
button.ghost:disabled,
.auth-primary:disabled { opacity: .45; }

input,
select,
textarea {
  width: 100%;
  min-height: 3.15rem;
  margin: .4rem 0 0;
  padding: .78rem .9rem;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-field);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder,
textarea::placeholder { color: var(--ui-faint); opacity: 1; }

input:focus,
textarea:focus {
  border-color: var(--ui-green);
  outline: 2px solid color-mix(in srgb, var(--ui-yellow) 52%, transparent);
  outline-offset: 1px;
}

textarea {
  min-height: 8.5rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.5;
}

label {
  display: block;
  margin: .9rem 0 0;
  color: var(--ui-muted);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.err,
.ok {
  margin: .6rem 0 0;
  font-size: .8rem;
  font-weight: 600;
}

.err { color: var(--ui-danger); }
.ok { color: var(--ui-success); }

.section-heading {
  display: flex;
  margin: 0;
  padding: 0 0 .8rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--ui-line);
}

.section-heading h3 { margin: 0; }

.section-heading > span {
  color: var(--ui-muted);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Authentication */
body.auth-mode { background: var(--ui-canvas); }

body.auth-mode #app {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  background: var(--ui-canvas);
}

body.auth-mode #topbar { display: none; }

body.auth-mode #view {
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: max(.6rem, env(safe-area-inset-top)) clamp(1.2rem, 5vw, 2rem)
    max(.6rem, env(safe-area-inset-bottom));
  /* safe center: passt der Inhalt nicht, wird oben ausgerichtet statt
     zentriert abgeschnitten - so entsteht kein toter Scrollrand. */
  place-items: safe center;
  align-content: safe center;
  background: var(--ui-canvas);
}

.auth-v5 { display: contents; }

.auth-panel {
  width: min(100%, 27rem);
  margin: auto;
  padding-block: clamp(.35rem, 1.6vh, 1rem);
}

.auth-brand {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin: 0 auto clamp(1rem, 3.5vh, 1.9rem);
  place-items: center;
}

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

.auth-heading { margin-bottom: 1.15rem; }

.auth-heading h1,
.auth-sheet h2 {
  margin: 0;
  color: var(--ui-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-weight: 650;
  letter-spacing: -.045em;
  text-transform: none;
}

.auth-heading h1 { font-size: clamp(2rem, 9vw, 2.55rem); line-height: 1.05; }

.auth-heading p,
.auth-sheet-copy {
  max-width: 24rem;
  margin: .65rem 0 0;
  color: var(--ui-muted);
  font-size: .92rem;
  line-height: 1.5;
}

.auth-form { display: grid; gap: .8rem; }
.auth-field { display: grid; gap: .42rem; }
.auth-field label { margin: 0; color: var(--ui-ink); }
.auth-field label span { color: var(--ui-muted); font-weight: 500; }
.auth-field input { margin: 0; }

.auth-code-field input {
  text-align: center;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .32em;
  text-indent: .32em;
}

.auth-text-action {
  width: max-content;
  min-height: 2.75rem;
  margin: -.2rem auto -.5rem;
  padding: .65rem .75rem;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-green);
  box-shadow: none;
  font-size: .82rem;
  font-weight: 650;
}

.auth-message {
  min-height: 1.15rem;
  color: var(--ui-muted);
  font-size: .78rem;
  line-height: 1.4;
  text-align: center;
}

.auth-message p { margin: 0; }
.auth-message .ok { color: var(--ui-success); }
.auth-message .err { color: var(--ui-danger); }

.auth-alternatives {
  margin-top: clamp(1.1rem, 3.5vh, 1.9rem);
  border-top: 1px solid var(--ui-line);
}

.auth-alternatives > button,
.auth-account-list > button {
  display: grid;
  width: 100%;
  min-height: 4.15rem;
  margin: 0;
  padding: .7rem .1rem;
  grid-template-columns: 1.35rem minmax(0, 1fr) 1.1rem;
  gap: .8rem;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
  text-align: left;
}

.auth-alternatives > button > span:nth-child(2),
.auth-account-list > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: .1rem;
}

.auth-alternatives strong,
.auth-account-list strong { font-size: .88rem; font-weight: 650; letter-spacing: -.015em; }

.auth-alternatives small,
.auth-account-list small { color: var(--ui-muted); font-size: .71rem; font-weight: 500; }

.auth-alternatives > button > .ui-icon,
.auth-account-list > button > .ui-icon { color: var(--ui-green); }

.auth-alternatives > button > .ui-icon:last-child,
.auth-account-list > button > .ui-icon:last-child { color: var(--ui-muted); }

.auth-privacy { margin: 1.15rem 0 0; color: var(--ui-muted); font-size: .7rem; text-align: center; }
/* Umschalter Anmelden / Registrieren (04.09.2026) */
.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  margin: 0 0 .95rem;
  padding: .25rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: transparent;
}
.auth-switch > button {
  min-height: 2.75rem;
  margin: 0;
  padding: .55rem .5rem;
  border: 0;
  border-radius: calc(var(--ui-radius-control) - .25rem);
  background: transparent;
  color: var(--ui-muted);
  box-shadow: none;
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.auth-switch > button[aria-selected="true"] {
  background: var(--ui-green);
  color: #fff;
}
.auth-switch > button:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 2px; }


.auth-sheet {
  width: min(100%, 30rem);
  max-width: none;
  max-height: min(88dvh, 44rem);
  margin: auto auto 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--ui-canvas);
  color: var(--ui-ink);
  box-shadow: 0 -12px 40px rgba(23, 32, 25, .16);
}

.auth-sheet::backdrop { background: rgba(23, 32, 25, .42); }
.auth-sheet[open] { animation: sheet-up 220ms cubic-bezier(.22, .75, .2, 1); }

.auth-sheet-inner {
  max-height: min(88dvh, 44rem);
  padding: .55rem 1.25rem max(1.35rem, env(safe-area-inset-bottom));
  overflow-y: auto;
}

.auth-sheet-grabber {
  width: 2.2rem;
  height: 3px;
  margin: .15rem auto 1rem;
  border-radius: 2px;
  background: var(--ui-line-strong);
}

.auth-sheet header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.auth-sheet header > div > span {
  display: block;
  margin-bottom: .25rem;
  color: var(--ui-muted);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-sheet h2 { font-size: 1.6rem; line-height: 1.1; }

.auth-sheet-close {
  display: grid;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin: -.25rem -.15rem 0 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}

.auth-sheet-copy { margin-bottom: 1.15rem; }
.auth-account-list { border-top: 1px solid var(--ui-line); }
.auth-sheet .staff-fields { display: grid; grid-template-columns: 1fr; gap: .8rem; }

/* Shared page headers */
.dex-hero,
.fame-hero,
.pass-hero,
.kasse-hero {
  position: relative;
  display: block;
  margin: 0 0 1.5rem;
  padding: 0 0 1.45rem;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.dex-hero p,
.fame-hero p,
.pass-hero p,
.kasse-hero p {
  max-width: 30rem;
  margin: .55rem 0 0;
  color: var(--ui-muted);
  font-size: .86rem;
}

/* Home */
.home-hero {
  position: relative;
  display: grid;
  min-height: 11.5rem;
  margin: 0;
  padding: .3rem 9.4rem 1.75rem 0;
  align-items: end;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
  overflow: visible;
}

.home-hero::before,
.home-hero::after { content: none; }

.home-score {
  color: var(--ui-ink);
  font: 650 clamp(4rem, 20vw, 6rem)/.82 Inter, sans-serif;
  letter-spacing: -.075em;
  font-variant-numeric: tabular-nums;
}

.home-score small { margin-left: .2rem; color: var(--ui-green); font-size: .28em; letter-spacing: -.02em; }

.home-total {
  display: block;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  margin: .8rem 0 0;
  padding: 0 0 .2rem;
  border: 0;
  border-bottom: 2px solid var(--ui-yellow);
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: .72rem;
  font-weight: 600;
}

/* Ladenlogo im Startkopf: der runde Aufkleber von der Ladentheke. */
.home-logo {
  position: absolute;
  right: calc(-.2rem + .3cm);
  bottom: calc(1.4rem + .3cm);
  display: block;
  width: clamp(7rem, 30vw, 8.6rem);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18));
}

.release-callout {
  display: grid;
  margin: 1.15rem 0 0;
  padding: .8rem 0;
  grid-template-columns: auto minmax(0, 1fr) 1.25rem;
  gap: .8rem;
  align-items: center;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.release-date {
  padding: .42rem .55rem;
  border-radius: var(--ui-radius-control);
  background: var(--ui-yellow);
  color: var(--ui-green-strong);
  font: 700 .69rem/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.release-callout > div { display: grid; gap: .12rem; }
.release-callout .eyebrow { margin: 0; }
.release-callout strong { font-size: .88rem; letter-spacing: -.015em; }
.release-callout > .ui-icon { color: var(--ui-green); }

.home-golden {
  display: grid;
  margin: 1.25rem 0 0;
  padding: 1rem;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-yellow) 74%, var(--ui-line));
  border-radius: var(--ui-radius-field);
  background: var(--ui-yellow-soft);
  color: var(--ui-ink);
  box-shadow: none;
}

.home-golden > .ui-icon { color: var(--ui-green); }
.home-golden > div { display: grid; gap: .1rem; }
.home-golden > div span { color: var(--ui-muted); font-size: .68rem; }
.home-golden > div strong { font-size: .86rem; }

.home-golden .primary {
  width: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: .55rem .85rem;
}

.home-grid { display: block; margin: 1.7rem 0 0; }

.home-module {
  min-height: 0;
  margin: 0;
  padding: 1.35rem 0;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}

.home-module:first-child { border-top: 0; padding-top: 0; }

.home-module-heading {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
}

.home-module-heading > .ui-icon { color: var(--ui-green); }
.home-mana-icon {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: var(--ui-green);
}
.home-mana-icon svg { width: 100%; height: 100%; }
.home-module-heading .eyebrow { margin-bottom: .15rem; }
.home-module-heading h3 { font-size: 1.15rem; }

.home-count {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-green);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}

.home-module > p { margin: .9rem 0 0; color: var(--ui-muted); font-size: .84rem; }

.streak {
  display: grid;
  margin: 1rem 0 .75rem;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
}

.streak i {
  display: grid;
  width: 100%;
  max-width: none;
  height: 2.75rem;
  aspect-ratio: auto;
  place-items: center;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-faint);
  font-style: normal;
}

.streak i.done {
  border-color: var(--ui-yellow);
  background: var(--ui-yellow);
  color: var(--ui-green-strong);
}

.streak i.done::before { content: none; }
.streak .ui-icon { width: 1rem; height: 1rem; }

.home-hint {
  display: flex;
  min-height: 0;
  margin: 1rem 0 0;
  padding: .8rem 0 0;
  gap: .55rem;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: .74rem;
}

.home-hint .ui-icon { color: var(--ui-green); }

.mana-track {
  display: grid;
  margin: 1rem 0 .75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;
}

.mana-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.mana-track .mana-mark {
  padding: .32rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  transition: opacity 150ms ease, filter 150ms ease;
}

.mana-track .mana-mark.is-open { opacity: .18; filter: grayscale(1); }
.mana-track .mana-mark.is-collected { border-color: var(--ui-yellow); background: var(--ui-yellow-soft); }

.voucher-list { margin-top: .65rem; }

.voucher {
  display: grid;
  min-height: 3.25rem;
  padding: .65rem 0;
  grid-template-columns: 4.5rem minmax(0, 1fr) 1.1rem;
  gap: .7rem;
  align-items: center;
  border-top: 1px solid var(--ui-line);
  font-size: .84rem;
}

.voucher:first-child { border-top: 0; }

button.voucher {
  width: 100%;
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

button.voucher:hover { background: var(--ui-green-soft); }
button.voucher:active { transform: scale(.99); }
button.voucher:focus-visible {
  outline: 2px solid var(--ui-green);
  outline-offset: 2px;
}

.voucher .code,
.reward-code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-green);
  font: 650 .73rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}

.voucher-label { min-width: 0; font-weight: 600; }
.voucher-reward {
  display: flex;
  min-width: 0;
  gap: .45rem;
  align-items: center;
}
.voucher-reward .reward-kind-icon { width: 1.05rem; height: 1.05rem; color: var(--ui-green); }
.voucher > .ui-icon { width: 1rem; height: 1rem; color: var(--ui-muted); }
.voucher.used { opacity: .48; filter: grayscale(1); }
.voucher.used .code,
.voucher.used .voucher-label {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
}

.wallet-qr-code {
  margin: .15rem 0;
  color: var(--ui-green);
  font: 650 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.redeem-card { max-width: 34rem; margin: 0 auto; text-align: center; }
.redeem-card h3 { margin: .3rem 0; font-size: 1.55rem; }
.redeem-card .code {
  display: inline-block;
  margin: .7rem 0;
  color: var(--ui-green);
  font: 650 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.redeem-customer { margin: .2rem 0; color: var(--ui-muted); }
.redeem-status {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-green-soft);
  color: var(--ui-green);
}
.redeem-status .ui-icon { width: 1.35rem; height: 1.35rem; }
.redeem-card.is-used { filter: grayscale(1); }

.home-empty {
  display: block;
  min-height: 0;
  padding: 1rem 0 0;
  text-align: left;
}

.home-empty p { margin: 0; color: var(--ui-ink); font-size: .84rem; font-weight: 600; }
.home-empty p span { color: var(--ui-muted); font-weight: 500; }

.wallet-history { border-top: 1px solid var(--ui-line); }

.wallet-history summary {
  display: grid;
  min-height: 3rem;
  padding: .75rem 0;
  grid-template-columns: 1.1rem minmax(0, 1fr) 1rem;
  gap: .6rem;
  align-items: center;
  color: var(--ui-muted);
  font-size: .76rem;
  font-weight: 600;
  list-style: none;
}

.wallet-history summary::-webkit-details-marker { display: none; }
.wallet-history summary > .ui-icon { width: 1rem; height: 1rem; }
.wallet-history summary > .ui-icon:last-child { transition: transform 150ms ease; }
.wallet-history[open] summary > .ui-icon:last-child { transform: rotate(90deg); }

.home-logout {
  width: auto !important;
  min-height: 2.75rem !important;
  margin: 2.5rem 0 0 !important;
  padding: .65rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-muted) !important;
  justify-content: flex-start !important;
}

/* Pokédex */
.dex-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
}

.dex-progress {
  position: static;
  display: grid;
  width: auto;
  height: auto;
  min-width: 5.7rem;
  padding: 0 0 .1rem 1rem;
  grid-template-columns: auto auto;
  gap: .15rem;
  align-items: baseline;
  justify-content: end;
  border: 0;
  border-left: 2px solid var(--ui-yellow);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
}

.dex-progress::before { content: none; }

.dex-progress strong { font-size: 2rem; line-height: .9; letter-spacing: -.055em; }
.dex-progress span { position: static; color: var(--ui-muted); font: 550 .78rem/1 Inter, sans-serif; }
.dex-progress small { grid-column: 1 / -1; color: var(--ui-green); font-size: .66rem; font-weight: 650; text-align: right; }

.dex-tools {
  display: grid;
  margin: 0 0 1.4rem;
  gap: .75rem;
}

.dex-search {
  display: grid;
  margin: 0;
  padding: 0 .85rem;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-field);
  background: var(--ui-surface);
  color: var(--ui-muted);
}

.dex-search input { min-height: 3rem; margin: 0; padding: .75rem 0; border: 0; border-radius: 0; background: transparent; }
.dex-search input:focus { outline: none; }
.dex-search:focus-within { border-color: var(--ui-green); outline: 2px solid color-mix(in srgb, var(--ui-yellow) 52%, transparent); outline-offset: 1px; }

.dex-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--ui-line);
}

.dex-filters button {
  min-height: 2.75rem;
  margin: 0;
  padding: .65rem .2rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  box-shadow: none;
  font-size: .78rem;
  font-weight: 600;
}

.dex-filters button.is-active {
  border-bottom-color: var(--ui-yellow);
  background: transparent;
  color: var(--ui-green);
}

.dex-box {
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.dex-box:first-child { border-top: 1px solid var(--ui-line); }

.dex-box summary {
  display: grid;
  min-height: 4rem;
  padding: .85rem 0;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto 1.1rem;
  gap: .65rem;
  align-items: center;
  list-style: none;
}

.dex-box summary::-webkit-details-marker { display: none; }

.dex-toggle {
  order: 4;
  width: 1rem;
  height: 1rem;
  color: var(--ui-muted);
}

.dex-toggle::before {
  left: .2rem;
  top: .1rem;
  width: .45rem;
  height: .45rem;
  border-width: 0 1.5px 1.5px 0;
}

.dex-ball-mark {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: inherit;
}

.dex-ball-mark svg { display: block; width: 1.85rem; height: 1.85rem; overflow: visible; }
.dex-tier-title { gap: .1rem; }
.dex-tier-title strong { font: 650 .9rem/1.2 Inter, sans-serif; letter-spacing: -.02em; text-transform: none; }
.dex-tier-title small { color: var(--ui-muted); font-size: .68rem; font-weight: 500; }

.dex-tier-count {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: .7rem;
}

.dex-grid {
  display: grid;
  padding: 0 0 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.dex-cell {
  display: flex;
  min-width: 0;
  padding: .42rem .38rem .5rem;
  gap: .1rem;
  align-items: stretch;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-field);
  background: var(--ui-surface);
  box-shadow: none;
}

.dex-cell.uncaught { background: color-mix(in srgb, var(--ui-canvas) 70%, var(--ui-surface)); }
.dex-number { padding: 0; color: var(--ui-faint); font: 600 .53rem/1 ui-monospace, monospace; }
.dex-sprite img { width: 92%; height: 92%; filter: none; object-fit: contain; }
.dex-cell.uncaught .dex-sprite img { filter: grayscale(1) opacity(.12); }
.dex-name { color: var(--ui-ink); font-size: .58rem; font-weight: 600; text-align: center; }
.dex-empty { padding: 2rem 0; border-bottom: 1px solid var(--ui-line); text-align: left; }

.life-pad {
  min-width: 0;
  padding: 1rem .65rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-field);
  background: var(--ui-surface);
  text-align: center;
}
.life-val { margin: .4rem 0 .6rem; font-size: clamp(2.5rem, 13vw, 4rem); font-variant-numeric: tabular-nums; line-height: .9; }

.life-btns {
  display: grid;
  margin: .4rem 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
}

.life-btns button,
.condition-grid button {
  min-width: 0;
  min-height: 2.65rem;
  margin: 0;
  padding: .55rem .4rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
  font-size: .74rem;
  font-weight: 600;
}

.calc-display {
  display: flex;
  margin: 0 0 .75rem;
  padding: .8rem 0;
  align-items: baseline;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.calc-display span { color: var(--ui-muted); font-size: .66rem; font-weight: 650; letter-spacing: .06em; }
.calc-display strong { font: 650 2rem/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }

.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.keypad button { min-height: 3rem; }
.keypad .key-soft { background: var(--ui-canvas) !important; }
.keypad .key-minus { border-color: color-mix(in srgb, var(--ui-danger) 45%, transparent); background: transparent !important; color: var(--ui-danger) !important; }
.keypad .key-plus { border-color: var(--ui-green) !important; background: var(--ui-green) !important; color: var(--ui-surface) !important; }

.tool-section-title {
  display: flex;
  margin: 1.6rem 0 .65rem;
  padding-bottom: .55rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--ui-line);
}

.tool-section-title:first-child { margin-top: 0; }
.tool-section-title span { font: 650 .88rem/1.2 Inter, sans-serif; letter-spacing: -.02em; text-transform: none; }
.tool-section-title small { color: var(--ui-muted); font-size: .66rem; font-weight: 500; }
.prize-cards i { width: 11px; height: 16px; border: 1px solid var(--ui-yellow); border-radius: 2px; background: var(--ui-yellow); }
.prize-cards i.taken { border-color: var(--ui-line); background: transparent; }

.damage-counter { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.damage-token { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: var(--ui-radius-field); background: var(--ui-yellow); color: var(--ui-green-strong); font: 650 1.45rem/1 Inter, sans-serif; }
.damage-counter .life-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.condition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.condition-grid button { display: flex; min-height: 3.25rem; flex-direction: row; gap: .35rem; align-items: center; justify-content: center; }
.condition-grid button .ui-icon { width: 1rem; height: 1rem; color: var(--ui-green); }
.condition-grid button span { font-size: .66rem; }
.condition-grid button.is-active { border-color: var(--ui-green); background: var(--ui-green); color: var(--ui-surface); }
.condition-grid button.is-active .ui-icon { color: var(--ui-yellow); }

/* Hall of Fame */
.season-end {
  position: absolute;
  right: 0;
  bottom: 1.45rem;
  top: auto;
  display: grid;
  padding: 0 0 0 .9rem;
  gap: .1rem;
  border: 0;
  border-left: 2px solid var(--ui-yellow);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.season-end span { color: var(--ui-muted); font-size: .55rem; letter-spacing: .07em; }
.season-end strong { font: 650 1rem/1.2 Inter, sans-serif; }

.my-season-card {
  display: grid;
  margin: 0 0 2rem;
  padding: .25rem 0 .25rem 1rem;
  gap: .08rem;
  border: 0;
  border-left: 3px solid var(--ui-yellow);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
}

.my-season-card > span { color: var(--ui-muted); font-size: .65rem; font-weight: 650; letter-spacing: .07em; }
.my-season-card strong { font: 650 2.4rem/.95 Inter, sans-serif; letter-spacing: -.06em; }
.my-season-card small { color: var(--ui-muted); font-size: .72rem; font-weight: 500; }

.fame-list { margin: 0 0 2rem; }

.lb-row {
  display: grid;
  min-height: 4rem;
  padding: .65rem 0;
  grid-template-columns: 1.6rem 2.35rem minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  border-top: 1px solid var(--ui-line);
  font-size: .84rem;
}

.section-heading + .lb-row { border-top: 0; }

.lb-row .pl {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  font: 600 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.lb-row.is-top .pl { color: #8b6a0a; font-weight: 700; }

.ranking-avatar {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid var(--ui-line-strong);
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-green);
  font-size: .8rem;
  font-weight: 650;
}

.lb-name { display: grid; min-width: 0; gap: .08rem; overflow: hidden; }
.lb-name strong { overflow: hidden; font-size: .84rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { color: var(--ui-muted); font-size: .65rem; font-weight: 500; }
.lb-row .pts { margin: 0; font: 650 .84rem/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }

.fame-empty { padding: 2rem 0; border-bottom: 1px solid var(--ui-line); text-align: left; }
.fame-empty > .ui-icon { color: var(--ui-green); }

.honor-section { margin: 0 0 2rem; }
.honor-grid { display: block; }

.honor-badge {
  display: grid;
  min-height: 4rem;
  padding: .7rem 0;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.bb-medal { width: 2rem; height: 2rem; border: 1px solid var(--ui-line); background: transparent !important; }
.bb-medal.gold { border-color: var(--ui-yellow); color: #8b6a0a; }
.honor-badge strong { font-size: .84rem; }
.honor-badge span { color: var(--ui-muted); font-size: .7rem; }

/* Booster Pass */
.pass-overview {
  margin: 0 0 2rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--ui-line);
}

.pass-overview .big { color: var(--ui-ink); }

.pass-balance {
  display: flex;
  margin-top: 1rem;
  padding-top: .8rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ui-line);
}

.pass-balance span { color: var(--ui-muted); font-size: .72rem; }
.pass-balance strong { color: var(--ui-green); font-size: .84rem; font-variant-numeric: tabular-nums; }

.pass-bar {
  height: 6px;
  margin: 1rem 0 .65rem;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ui-green-soft);
}

.pass-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ui-yellow); transition: width 320ms ease; }

.pass-level-list { margin-bottom: 1rem; }

.pass-level {
  display: grid;
  min-height: 4.2rem;
  padding: .65rem 0;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  border-top: 1px solid var(--ui-line);
}

.section-heading + .pass-level { border-top: 0; }

.pass-level .lv {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-faint);
  font: 600 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.pass-level.done .lv { background: transparent; color: var(--ui-green); }
.pass-level > span:nth-child(2) { display: grid; gap: .12rem; font-size: .84rem; }
.pass-level > span:nth-child(2) strong { font-weight: 650; }
.pass-level > span:nth-child(2) small { color: var(--ui-muted); font-size: .68rem; }
.pass-reward-title { display: flex; min-width: 0; gap: .45rem; align-items: center; }
.pass-reward-title .reward-kind-icon { width: 1.05rem; height: 1.05rem; color: var(--ui-green); }
.pass-level button.primary { width: auto; min-height: 2.75rem; margin: 0; padding: .5rem .75rem; border-color: var(--ui-yellow); background: var(--ui-yellow); color: var(--ui-green-strong); font-size: .72rem; }
.pass-check { color: var(--ui-success); }

.pass-buy {
  display: grid;
  width: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: .36rem .65rem;
  gap: .05rem;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-green);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.1;
  box-shadow: none;
}

.pass-buy small { color: var(--ui-muted); font-size: .58rem; font-variant-numeric: tabular-nums; }
.pass-buy:disabled { cursor: not-allowed; opacity: .34; }
.pass-buy:not(:disabled):focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-yellow) 55%, transparent); outline-offset: 2px; }

.pass-buy-dialog { text-align: left; }
.pass-buy-dialog h2 { margin-top: .35rem; }
.pass-buy-dialog .dialog-actions { display: grid; margin-top: 1.15rem; grid-template-columns: 1fr 1.35fr; gap: .6rem; }
.pass-buy-dialog .dialog-actions button { min-height: 3rem; margin: 0; padding: .65rem .75rem; }

/* Kasse and Admin */
.kasse-stats {
  display: grid;
  margin: 0 0 2rem;
  padding: .9rem 0;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.kasse-stats > div {
  display: grid;
  min-width: 0;
  padding: .25rem .65rem;
  gap: .2rem;
  border-left: 1px solid var(--ui-line);
}

.kasse-stats > div:first-child { padding-left: 0; border-left: 0; }
.kasse-stats > div:last-child { padding-right: 0; }
.kasse-stats strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.kasse-stats span { display: flex; color: var(--ui-muted); font-size: .62rem; line-height: 1.25; }
.kasse-stats span .ui-icon { width: .82rem; height: .82rem; margin-right: .28rem; color: var(--ui-green); }

.tool-list,
.admin-settings { border-top: 1px solid var(--ui-line); }

.tool-section,
.admin-section { border-bottom: 1px solid var(--ui-line); }

.tool-section > summary,
.admin-section > summary {
  display: grid;
  min-height: 4.35rem;
  padding: .78rem 0;
  grid-template-columns: 1.35rem minmax(0, 1fr) 1rem;
  gap: .75rem;
  align-items: center;
  color: var(--ui-ink);
  list-style: none;
}

.admin-section > summary { grid-template-columns: 1.35rem minmax(0, 1fr) 1rem; }
.tool-section > summary::-webkit-details-marker,
.admin-section > summary::-webkit-details-marker { display: none; }

.tool-section > summary > span,
.admin-section > summary > span { display: grid; min-width: 0; gap: .1rem; }

.tool-section > summary strong,
.admin-section > summary strong { font-size: .88rem; font-weight: 650; letter-spacing: -.015em; }

.tool-section > summary small,
.admin-section > summary small { color: var(--ui-muted); font-size: .68rem; font-weight: 500; }

.tool-section > summary > .ui-icon:first-child,
.admin-section > summary > .ui-icon:first-child { color: var(--ui-green); }
.tool-section > summary > .ui-icon:last-child,
.admin-section > summary > .ui-icon:last-child { width: 1rem; height: 1rem; color: var(--ui-muted); transition: transform 150ms ease; }

.tool-section[open] > summary > .ui-icon:last-child,
.admin-section[open] > summary > .ui-icon:last-child { transform: rotate(90deg); }

.tool-section[open] > summary strong,
.admin-section[open] > summary strong { color: var(--ui-green); }

.tool-body,
.admin-body {
  padding: .1rem 0 1.4rem 2.1rem;
}

.admin-body { padding-left: 2.1rem; }
.tool-body > label:first-child,
.admin-body > label:first-child { margin-top: 0; }
.tool-body button { max-width: 18rem; }

.kassenbonus-choice {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  border: 0;
}

.kassenbonus-choice legend {
  width: 100%;
  margin: 0 0 .5rem;
  color: var(--ui-muted);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kassenbonus-choice label { position: relative; display: block; margin: 0; cursor: pointer; }
.kassenbonus-choice input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.kassenbonus-option {
  display: grid;
  min-height: 4.25rem;
  padding: .65rem;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: .6rem;
  align-items: center;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.kassenbonus-option > span:first-child { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; color: var(--ui-green); }
.kassenbonus-option svg { width: 100%; height: 100%; }
.kassenbonus-option > span:last-child { display: grid; min-width: 0; gap: .12rem; }
.kassenbonus-option strong { font-size: .78rem; }
.kassenbonus-option small { color: var(--ui-muted); font-size: .61rem; line-height: 1.3; }
.kassenbonus-choice input:checked + .kassenbonus-option { border-color: var(--ui-yellow); background: var(--ui-yellow-soft); }
.kassenbonus-choice input:focus-visible + .kassenbonus-option { outline: 3px solid color-mix(in srgb, var(--ui-yellow) 55%, transparent); outline-offset: 2px; }
.kassenbonus-note { margin: .7rem 0 0; color: var(--ui-muted); font-size: .68rem; line-height: 1.45; }

.scan-bonus {
  margin: 1rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--ui-line);
  text-align: left;
}

.scan-bonus-content {
  display: grid;
  margin-top: .45rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
}

.scan-bonus-content > img { width: 3rem; height: 3rem; object-fit: contain; }
.scan-bonus-content > div { display: grid; gap: .18rem; }
.scan-bonus-content strong { font-size: .9rem; }
.scan-bonus-content small { color: var(--ui-muted); font-size: .7rem; }
.scan-bonus-voucher { margin: .75rem 0 0; padding: .65rem; border-radius: var(--ui-radius-control); background: var(--ui-yellow-soft); font-size: .74rem; }

.admin-note {
  display: grid;
  margin: 0 0 1.5rem;
  padding: .25rem 0 .25rem 1rem;
  gap: .2rem;
  border-left: 3px solid var(--ui-yellow);
}

.admin-note strong { font-size: .82rem; }
.admin-note span { color: var(--ui-muted); font-size: .76rem; line-height: 1.45; }
.admin-save { position: sticky; bottom: calc(5.1rem + env(safe-area-inset-bottom)); z-index: 4; margin-top: 1.25rem !important; }

/* Real overlays and pack interaction */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  background: rgba(23, 32, 25, .58);
}

.pack-stage {
  width: min(100%, 23rem);
  max-width: 23rem;
  margin: auto;
  text-align: center;
}

.pack-stage.card {
  margin: auto auto calc(.4rem + env(safe-area-inset-bottom));
  padding: 1.25rem 1.1rem 1.1rem;
  border-radius: var(--ui-radius-surface);
  background: var(--ui-canvas);
  box-shadow: none;
  animation: sheet-up 220ms cubic-bezier(.22, .75, .2, 1);
}

.pack-stage.card::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  margin: -.2rem auto .9rem;
  border-radius: 2px;
  background: var(--ui-line-strong);
}

@keyframes sheet-up { from { opacity: 0; transform: translateY(1.5rem); } }

.bb-pack {
  position: relative;
  display: block;
  width: 13rem;
  height: 18rem;
  margin: 0 auto 1rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-field);
  background: var(--ui-green-soft);
  box-shadow: none;
}

.bb-pack.golden { background: var(--ui-yellow); box-shadow: none; }
.pack-crimp { height: 1rem; background: var(--ui-green); }
.bb-pack.golden .pack-crimp { background: var(--ui-green-strong); }
.pack-art { color: var(--ui-ink); }
.pack-art img { width: 5.8rem; border-radius: var(--ui-radius-field); filter: none; }
.pack-kicker { color: var(--ui-muted); }
.pack-gloss,
.reward-shine { display: none; }
.pack-rip-line { border-color: var(--ui-green); }
.pack-score,
.pack-hint { color: var(--ui-surface); }

.tier-card {
  width: min(100%, 17rem);
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-field);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.reward-card { border-radius: var(--ui-radius-control); }
.reward-kicker { color: var(--ui-muted); }
.prize-name { font-size: 1.8rem; }

.qr-box img {
  display: block;
  width: 15rem;
  height: auto;
  max-width: 84%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: .7rem auto;
  border: 10px solid var(--ui-surface);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
}

@media (min-width: 38rem) {
  .auth-sheet { margin: auto; border-radius: 18px; }
  .auth-sheet-inner { padding: .7rem 1.5rem 1.5rem; }
}

@media (min-width: 48rem) {
  #view { padding-top: 2.8rem; }

  .home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .home-module,
  .home-module:first-child { padding-top: 0; border-top: 0; }
  .home-module + .home-module { padding-left: 2rem; border-left: 1px solid var(--ui-line); }
  .dex-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .condition-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 22rem) {
  #topbar { padding-inline: .85rem; gap: .55rem; }
  #topbar .logo { width: 2.15rem; height: 2.15rem; }
  #topbar .brand { font-size: .78rem; }
  #user-chip { max-width: 6.4rem; padding-left: .55rem; font-size: .61rem; }
  #view { padding-inline: .9rem; }
  .home-hero { padding-right: 8.2rem; }
  .home-logo { width: 6.8rem; }
  .home-golden { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .home-golden .primary { grid-column: 1 / -1; width: 100%; }
  .dex-grid { gap: .35rem; }
  .life-pads { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
}

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

/* Cinematic pack opening v2 — state-driven, mobile-first */
body.pack-opening-active { overflow: hidden; }

#overlay.is-pack-opening {
  --scene-forest: #091b13;
  --scene-forest-soft: #153426;
  --scene-cream: #f6efdf;
  --scene-gold: #c8a653;
  --scene-gold-rgb: 200, 166, 83;
  --pack-accent: #d65c50;
  --pack-accent-rgb: 214, 92, 80;
  --pack-accent-ink: #26100e;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    max(.8rem, env(safe-area-inset-top))
    max(.8rem, env(safe-area-inset-right))
    max(.8rem, env(safe-area-inset-bottom))
    max(.8rem, env(safe-area-inset-left));
  background: var(--scene-forest);
  color: var(--scene-cream);
  overscroll-behavior: contain;
}

#overlay.is-pack-opening::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .52;
  background-image:
    radial-gradient(circle at 25% 25%, transparent 0 8px, rgba(246, 239, 223, .08) 8.5px 9.5px, transparent 10px),
    linear-gradient(115deg, transparent 0 44%, rgba(246, 239, 223, .045) 44.5% 45.5%, transparent 46% 100%),
    linear-gradient(25deg, transparent 0 46%, rgba(200, 166, 83, .035) 46.5% 47.5%, transparent 48% 100%);
  background-position: 0 0, 24px 24px, 0 0;
  background-size: 92px 92px, 92px 92px, 138px 138px;
}

#overlay.is-pack-opening::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--pack-accent-rgb), .16), transparent 26rem),
    radial-gradient(ellipse at center, transparent 18%, rgba(4, 12, 8, .22) 58%, rgba(3, 9, 6, .86) 100%);
}

#overlay.pack-theme-2 {
  --pack-accent: #5f8eae;
  --pack-accent-rgb: 95, 142, 174;
  --pack-accent-ink: #0b1d29;
}

#overlay.pack-theme-3 {
  --pack-accent: #d1aa47;
  --pack-accent-rgb: 209, 170, 71;
  --pack-accent-ink: #2b2108;
}

#overlay.pack-theme-4 {
  --pack-accent: #9271ad;
  --pack-accent-rgb: 146, 113, 173;
  --pack-accent-ink: #1d1226;
}

#overlay.pack-theme-gold {
  --pack-accent: #d8b552;
  --pack-accent-rgb: 216, 181, 82;
  --pack-accent-ink: #2a2107;
}

#overlay.is-pack-opening .pack-opening-stage {
  --tear-progress: 0;
  --tear-progress-pct: 0%;
  --tear-shift: 0px;
  --tear-angle: 0deg;
  --pack-rotate-x: 0deg;
  --pack-rotate-y: 0deg;
  position: relative;
  z-index: 0;
  display: flex;
  width: min(100%, 27rem);
  max-width: 27rem;
  min-height: calc(100dvh - max(1.6rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 2.2rem) 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--scene-cream);
  perspective: 900px;
}

#overlay.is-pack-opening .pack-vfx {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: min(100vw, 38rem);
  aspect-ratio: 1;
  transform: translate(-50%, -48%);
  pointer-events: none;
}

.pack-light {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  opacity: .64;
  background: radial-gradient(circle, rgba(246, 239, 223, .2), rgba(var(--pack-accent-rgb), .12) 36%, transparent 70%);
  transform: scale(.9);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(.2, .75, .2, 1);
}

.pack-light-ring {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(246, 239, 223, .1);
  border-radius: 50%;
  opacity: .7;
  transform: scale(.9);
  transition: opacity 420ms ease, transform 600ms cubic-bezier(.2, .75, .2, 1);
}

.pack-light-ring-two { inset: 28%; border-color: rgba(var(--pack-accent-rgb), .18); }

.pack-particles,
.pack-particles i { position: absolute; inset: 0; }

.pack-particles i::before {
  content: "";
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size, 3px);
  height: var(--particle-size, 3px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--scene-gold) 72%, var(--scene-cream));
  box-shadow: 0 0 .65rem rgba(var(--scene-gold-rgb), .55);
  animation: pack-dust var(--particle-speed, 8s) ease-in-out var(--particle-delay, 0s) infinite;
  will-change: transform, opacity;
}

.pack-particles i:nth-child(1)  { --particle-x: 12%; --particle-y: 35%; --particle-delay: -1s; --particle-speed: 8.4s; }
.pack-particles i:nth-child(2)  { --particle-x: 21%; --particle-y: 18%; --particle-delay: -5s; --particle-size: 2px; }
.pack-particles i:nth-child(3)  { --particle-x: 38%; --particle-y: 10%; --particle-delay: -3s; --particle-speed: 9.2s; }
.pack-particles i:nth-child(4)  { --particle-x: 61%; --particle-y: 14%; --particle-delay: -7s; --particle-size: 2px; }
.pack-particles i:nth-child(5)  { --particle-x: 79%; --particle-y: 22%; --particle-delay: -2s; --particle-speed: 8.8s; }
.pack-particles i:nth-child(6)  { --particle-x: 89%; --particle-y: 44%; --particle-delay: -6s; --particle-size: 2px; }
.pack-particles i:nth-child(7)  { --particle-x: 84%; --particle-y: 69%; --particle-delay: -4s; }
.pack-particles i:nth-child(8)  { --particle-x: 69%; --particle-y: 83%; --particle-delay: -1.5s; --particle-size: 2px; }
.pack-particles i:nth-child(9)  { --particle-x: 45%; --particle-y: 90%; --particle-delay: -6.5s; --particle-speed: 9.5s; }
.pack-particles i:nth-child(10) { --particle-x: 24%; --particle-y: 79%; --particle-delay: -3.5s; --particle-size: 2px; }
.pack-particles i:nth-child(11) { --particle-x: 8%; --particle-y: 61%; --particle-delay: -7.5s; }
.pack-particles i:nth-child(12) { --particle-x: 66%; --particle-y: 54%; --particle-delay: -4.5s; --particle-size: 2px; }

#overlay.is-pack-opening .pack-intro {
  position: relative;
  z-index: 5;
  margin: 0 0 1.1rem;
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.2, .75, .2, 1);
}

#overlay.is-pack-opening .pack-intro-kicker {
  display: block;
  margin-bottom: .45rem;
  color: color-mix(in srgb, var(--pack-accent) 62%, var(--scene-cream));
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#overlay.is-pack-opening .pack-intro h2 {
  color: var(--scene-cream);
  font-size: clamp(1.9rem, 9vw, 2.65rem);
  letter-spacing: -.055em;
}

#overlay.is-pack-opening .pack-score {
  display: inline-flex;
  min-height: 2rem;
  margin: .7rem 0 0;
  padding: .4rem .75rem;
  align-items: center;
  border: 1px solid rgba(246, 239, 223, .16);
  border-radius: 999px;
  background: rgba(9, 27, 19, .62);
  color: rgba(246, 239, 223, .82);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}

#overlay.is-pack-opening .pack-opening-stage[data-state="sealed"] .pack-intro,
#overlay.is-pack-opening .pack-opening-stage[data-state="intro"] .pack-intro { opacity: 1; transform: translateY(0); }
#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-intro,
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .pack-intro,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .pack-intro,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .pack-intro { opacity: 0; transform: translateY(-.65rem); pointer-events: none; }

#overlay.is-pack-opening .bb-pack {
  position: relative;
  z-index: 4;
  display: block;
  width: clamp(11.75rem, 54vw, 13.5rem);
  height: clamp(16.45rem, 75.5vw, 18.9rem);
  margin: 0 0 1rem;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 1.15rem;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

#overlay.is-pack-opening .bb-pack:focus-visible {
  outline: 3px solid var(--scene-cream);
  outline-offset: 5px;
}

#overlay.is-pack-opening .bb-pack:disabled { opacity: 1; cursor: default; }

.pack-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(246, 239, 223, .42);
  border-radius: 1.15rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .45), transparent 19% 72%, rgba(255, 255, 255, .12)),
    linear-gradient(155deg, color-mix(in srgb, var(--pack-accent) 82%, white), var(--pack-accent) 53%, color-mix(in srgb, var(--pack-accent) 68%, black));
  box-shadow: 0 1.8rem 3.8rem -1.4rem rgba(0, 0, 0, .74), 0 0 2.4rem rgba(var(--pack-accent-rgb), .2);
  transform: translateY(.7rem) scale(.9) rotateX(var(--pack-rotate-x)) rotateY(var(--pack-rotate-y));
  transform-origin: 50% 72%;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease, opacity 260ms ease;
  will-change: transform, opacity;
}

.bb-pack.golden .pack-shell {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .58), transparent 18% 70%, rgba(255, 255, 255, .2)),
    linear-gradient(155deg, #fae6a2, #d8b552 54%, #765512);
}

#overlay.is-pack-opening .pack-opening-stage[data-state="sealed"] .pack-shell {
  transform: translateY(0) scale(1) rotateX(var(--pack-rotate-x)) rotateY(var(--pack-rotate-y));
  animation: cinematic-pack-float 4.8s ease-in-out 500ms infinite;
}

#overlay.is-pack-opening .pack-opening-stage.is-dragging .pack-shell,
#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-shell,
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .pack-shell,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .pack-shell { animation: none; }

#overlay.is-pack-opening .pack-opening-stage.is-dragging .pack-shell { transform: translateY(.2rem) scale(.995); }
#overlay.is-pack-opening .pack-opening-stage.is-resetting .pack-tear-top,
#overlay.is-pack-opening .pack-opening-stage.is-resetting .pack-rip-progress,
#overlay.is-pack-opening .pack-opening-stage.is-resetting .pack-rip-line i { transition-duration: 220ms; }

#overlay.is-pack-opening .pack-art {
  position: absolute;
  inset: 1.15rem 0 0;
  display: flex;
  padding: 1.1rem;
  flex-direction: column;
  gap: .45rem;
  align-items: center;
  justify-content: center;
  color: var(--pack-accent-ink);
}

#overlay.is-pack-opening .pack-art img {
  width: 5.9rem;
  height: 5.9rem;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: .9rem;
  object-fit: cover;
  filter: drop-shadow(0 .7rem .9rem rgba(0, 0, 0, .24));
}

#overlay.is-pack-opening .pack-kicker { color: currentColor; opacity: .6; }
#overlay.is-pack-opening .pack-edition { color: currentColor; opacity: .66; }

.pack-tear-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 2.35rem;
  overflow: hidden;
  border-radius: 1.1rem 1.1rem 0 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .45), transparent 34%),
    color-mix(in srgb, var(--pack-accent) 78%, var(--scene-forest));
  transform: translateX(var(--tear-shift)) rotate(var(--tear-angle));
  transform-origin: 50% 100%;
  transition: transform 0ms linear;
  will-change: transform;
}

.bb-pack.golden .pack-tear-top { background: linear-gradient(145deg, rgba(255, 255, 255, .55), transparent 34%), #8a6a20; }

#overlay.is-pack-opening .pack-crimp {
  position: absolute;
  inset: 0;
  height: auto;
  background:
    conic-gradient(from 135deg at 50% 100%, rgba(9, 27, 19, .76) 90deg, transparent 0) bottom/12px 7px repeat-x;
}

#overlay.is-pack-opening .pack-rip-line {
  position: absolute;
  top: 2.32rem;
  left: .75rem;
  right: .75rem;
  z-index: 6;
  height: 1px;
  border: 0;
  border-top: 1px dashed rgba(38, 16, 14, .6);
}

.pack-rip-progress {
  position: absolute;
  inset: -2px auto auto 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--scene-cream);
  box-shadow: 0 0 .7rem rgba(246, 239, 223, .6);
  transform: scaleX(var(--tear-progress));
  transform-origin: left center;
  transition: transform 0ms linear;
}

#overlay.is-pack-opening .pack-rip-line i {
  position: absolute;
  top: -.38rem;
  left: calc(8% + var(--tear-progress-pct));
  width: .72rem;
  height: .72rem;
  border: 2px solid var(--scene-cream);
  border-radius: 50%;
  background: var(--scene-forest);
  box-shadow: 0 0 .75rem rgba(246, 239, 223, .5);
  transform: translateX(-50%);
  transition: left 0ms linear;
}

#overlay.is-pack-opening .pack-rip-line i::before { content: none; }

.pack-opening-glow {
  position: absolute;
  top: 1.65rem;
  left: 8%;
  right: 8%;
  z-index: 3;
  height: 2rem;
  border-radius: 50%;
  opacity: var(--tear-progress);
  background: radial-gradient(ellipse, rgba(255, 249, 218, .96), rgba(var(--pack-accent-rgb), .38) 44%, transparent 72%);
  transform: scaleX(var(--tear-progress));
  transition: opacity 0ms linear, transform 0ms linear;
}

#overlay.is-pack-opening .pack-gloss {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 31%, rgba(255, 255, 255, .45) 47%, rgba(255, 255, 255, .06) 56%, transparent 69%);
  background-position: 125% 0;
  background-size: 280% 100%;
  animation: cinematic-foil 4.4s ease-in-out 1.2s infinite;
}

#overlay.is-pack-opening .pack-hint {
  position: relative;
  z-index: 5;
  display: flex;
  margin: 0;
  gap: .45rem;
  align-items: center;
  color: rgba(246, 239, 223, .7);
  font-size: .74rem;
  transition: opacity 180ms ease, transform 220ms ease;
}

#overlay.is-pack-opening .pack-hint .ui-icon { width: 1rem; height: 1rem; color: var(--scene-gold); }
#overlay.is-pack-opening .pack-hint span { animation: none; }

#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-tear-top {
  transition: transform 260ms cubic-bezier(.2, .72, .2, 1);
}

#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-rip-progress,
#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-rip-line i,
#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-opening-glow { transition-duration: 260ms; }

#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-shell { transform: translateY(.35rem) scaleX(.985) scaleY(1.012); }
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .pack-shell { transform: translateY(2.35rem) scale(.94); }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .pack-shell { opacity: .18; transform: translateY(5rem) scale(.82); }
#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-hint,
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .pack-hint,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .pack-hint { opacity: 0; transform: translateY(.4rem); }

#overlay.is-pack-opening .pack-opening-stage[data-state="tearing"] .pack-light,
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .pack-light,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .pack-light,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .pack-light { opacity: 1; transform: scale(1.2); }
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .pack-light-ring-one,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .pack-light-ring-one { opacity: .9; transform: scale(1.12); }
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .pack-light-ring-two,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .pack-light-ring-two { opacity: .8; transform: scale(1.28); }

.reward-silhouette {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 3;
  width: 10.2rem;
  aspect-ratio: 649 / 900;
  opacity: 0;
  transform: translate(-50%, -12%) scale(.78);
  transition: opacity 220ms ease, transform 520ms cubic-bezier(.2, .78, .2, 1);
  pointer-events: none;
  will-change: transform, opacity;
}

.reward-silhouette-card {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(246, 239, 223, .34);
  border-radius: .9rem;
  background: #10241a;
  box-shadow: 0 0 0 1px rgba(var(--scene-gold-rgb), .2), 0 0 2rem rgba(var(--scene-gold-rgb), .25);
}

.reward-silhouette-card img { width: 46%; height: auto; opacity: .14; filter: grayscale(1) brightness(2); }
#overlay.is-pack-opening .pack-opening-stage[data-state="opening"] .reward-silhouette { opacity: .9; transform: translate(-50%, -62%) scale(.88); }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .reward-silhouette { opacity: .34; transform: translate(-50%, -108%) scale(1.08); }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .reward-silhouette { opacity: 0; transform: translate(-50%, -118%) scale(1.14); }

#overlay.is-pack-opening .tier-card {
  position: absolute;
  top: clamp(.75rem, 3vh, 1.8rem);
  left: 50%;
  z-index: 8;
  width: min(calc(100% - .4rem), 19rem);
  margin: 0;
  padding: .75rem .75rem 1rem;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--pack-accent) 48%, var(--scene-cream));
  border-radius: 1.15rem;
  background: var(--scene-cream);
  box-shadow: 0 1.8rem 4rem -1.5rem rgba(0, 0, 0, .76), 0 0 2.4rem rgba(var(--pack-accent-rgb), .16);
  color: #15231b;
  opacity: 0;
  transform: translateX(-50%) translateY(1rem) rotateY(-16deg) scale(.86);
  transform-origin: 50% 45%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

#overlay.is-pack-opening .tier-card.is-visible { animation: none; }

#overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .tier-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotateY(0) scale(1);
  transition: opacity 260ms ease, transform 520ms cubic-bezier(.18, .82, .2, 1);
}

#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] { min-height: max(calc(100dvh - 1.6rem), 46rem); justify-content: flex-start; }
#overlay.is-pack-opening .pack-opening-stage.has-pokemon[data-state="revealed"] { min-height: max(calc(100dvh - 1.6rem), 51rem); }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .tier-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotateY(0) scale(1);
}

#overlay.is-pack-opening .reward-status {
  display: flex;
  min-height: 1.6rem;
  margin: .05rem 0 .55rem;
  gap: .42rem;
  align-items: center;
  justify-content: center;
  color: #687269;
  font-size: .59rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#overlay.is-pack-opening .reward-status > span:first-child {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--pack-accent);
  box-shadow: 0 0 .65rem rgba(var(--pack-accent-rgb), .5);
}

#overlay.is-pack-opening .reward-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pack-accent) 22%, transparent);
  border-radius: .82rem;
  background: color-mix(in srgb, var(--pack-accent) 7%, white);
}

#overlay.is-pack-opening .reward-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 649 / 900;
  border-radius: .78rem;
  object-fit: cover;
}

#overlay.is-pack-opening .reward-shine {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .62) 48%, transparent 62%);
  background-position: 125% 0;
  background-size: 270% 100%;
  animation: cinematic-reward-sheen 3.6s ease-in-out 1s infinite;
}

.reward-details { padding: .1rem .15rem 0; }
#overlay.is-pack-opening .reward-kicker,
#overlay.is-pack-opening .prize-name,
#overlay.is-pack-opening .reward-title,
#overlay.is-pack-opening .reward-voucher,
#overlay.is-pack-opening .scan-bonus,
#overlay.is-pack-opening #tclose {
  opacity: 0;
  transform: translateY(.45rem);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.2, .72, .2, 1);
}

#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .reward-kicker { transition-delay: 30ms !important; }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .prize-name { transition-delay: 75ms !important; }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .reward-title { transition-delay: 120ms !important; }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .reward-voucher { transition-delay: 165ms !important; }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .scan-bonus { transition-delay: 210ms !important; }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] #tclose { transition-delay: 255ms !important; }
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .reward-kicker,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .prize-name,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .reward-title,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .reward-voucher,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .scan-bonus,
#overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] #tclose { opacity: 1; transform: translateY(0); }

#overlay.is-pack-opening .reward-kicker {
  margin-top: .7rem;
  color: #687269;
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#overlay.is-pack-opening .prize-name {
  margin: .15rem 0 .2rem;
  color: color-mix(in srgb, var(--pack-accent) 72%, #15231b);
  font-size: clamp(1.65rem, 8vw, 2rem);
  line-height: .98;
  text-wrap: balance;
}

#overlay.is-pack-opening .reward-title {
  margin: 0;
  color: #15231b;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.3;
}

.reward-voucher {
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(21, 35, 27, .14);
  text-align: left;
}

.reward-voucher-label {
  display: block;
  margin-bottom: .35rem;
  color: #687269;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reward-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem;
  align-items: stretch;
}

#overlay.is-pack-opening .reward-code {
  display: flex;
  min-width: 0;
  min-height: 2.75rem;
  padding: .62rem .7rem;
  align-items: center;
  border: 1px solid rgba(21, 35, 27, .18);
  border-radius: .55rem;
  background: #fffdf7;
  color: #15231b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  font-weight: 750;
  letter-spacing: .08em;
  overflow-wrap: anywhere;
  user-select: all;
}

.reward-copy {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .55rem .65rem;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #31543f;
  border-radius: .55rem;
  background: #31543f;
  color: #fffdf7;
  font-size: .66rem;
  font-weight: 700;
}

.reward-copy .ui-icon { width: 1rem; height: 1rem; }
.reward-copy.is-copied { border-color: #1e3d2c; background: #1e3d2c; }
.copy-status { display: block; min-height: 1rem; margin-top: .25rem; color: #536158; font-size: .63rem; }
.reward-note { margin: .05rem 0 0; color: #687269; font-size: .67rem; line-height: 1.35; }

#overlay.is-pack-opening .scan-bonus { margin-top: .65rem; padding-top: .65rem; }
#overlay.is-pack-opening .scan-bonus-content { margin-top: .35rem; }
#overlay.is-pack-opening .scan-bonus-content > img { width: 2.7rem; height: 2.7rem; }
#overlay.is-pack-opening #tclose { width: 100%; margin: .75rem 0 0; }

@keyframes pack-dust {
  0%, 100% { opacity: .12; transform: translate3d(0, .8rem, 0) scale(.7); }
  45% { opacity: .72; }
  75% { opacity: .32; transform: translate3d(.2rem, -1.1rem, 0) scale(1); }
}

@keyframes cinematic-pack-float {
  0%, 100% { transform: translateY(0) scale(1) rotateX(var(--pack-rotate-x)) rotateY(var(--pack-rotate-y)); }
  50% { transform: translateY(-.32rem) scale(1.004) rotateX(var(--pack-rotate-x)) rotateY(var(--pack-rotate-y)); }
}

@keyframes cinematic-foil {
  0%, 18% { background-position: 125% 0; }
  45%, 100% { background-position: -70% 0; }
}

@keyframes cinematic-reward-sheen {
  0%, 16% { background-position: 125% 0; }
  46%, 100% { background-position: -70% 0; }
}

@media (max-height: 44rem) {
  #overlay.is-pack-opening .pack-opening-stage { justify-content: flex-start; padding-top: .5rem; }
  #overlay.is-pack-opening .pack-intro { margin-bottom: .65rem; }
  #overlay.is-pack-opening .pack-intro h2 { font-size: 1.75rem; }
  #overlay.is-pack-opening .pack-score { margin-top: .45rem; }
  #overlay.is-pack-opening .bb-pack { width: 11.4rem; height: 15.95rem; }
  #overlay.is-pack-opening .pack-art img { width: 5rem; height: 5rem; }
}

@media (max-width: 22rem) {
  #overlay.is-pack-opening { padding-inline: max(.55rem, env(safe-area-inset-left)); }
  #overlay.is-pack-opening .tier-card { width: min(calc(100% - .1rem), 18rem); padding-inline: .65rem; }
  .reward-copy span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
  #overlay.is-pack-opening .pack-particles,
  #overlay.is-pack-opening .pack-light-ring,
  #overlay.is-pack-opening .reward-silhouette { display: none; }

  #overlay.is-pack-opening .pack-shell,
  #overlay.is-pack-opening .pack-gloss,
  #overlay.is-pack-opening .reward-shine { animation: none !important; }

  #overlay.is-pack-opening .pack-shell,
  #overlay.is-pack-opening .pack-intro,
  #overlay.is-pack-opening .tier-card,
  #overlay.is-pack-opening .reward-kicker,
  #overlay.is-pack-opening .prize-name,
  #overlay.is-pack-opening .reward-title,
  #overlay.is-pack-opening .reward-voucher,
  #overlay.is-pack-opening .scan-bonus,
  #overlay.is-pack-opening #tclose { transition-duration: .01ms !important; transition-delay: 0ms !important; }

  #overlay.is-pack-opening .pack-opening-stage[data-state="sealed"] .pack-shell { transform: none; }
  #overlay.is-pack-opening .pack-opening-stage[data-state="revealing"] .tier-card,
  #overlay.is-pack-opening .pack-opening-stage[data-state="revealed"] .tier-card { opacity: 1; transform: translateX(-50%); }
}