/* Schattenbörse – gemeinsame Gestaltung */
:root {
  --ink: #0b0a14;
  --ink-2: #13111f;
  --ink-3: #1c1930;
  --line: rgba(246, 231, 193, 0.12);
  --line-2: rgba(246, 231, 193, 0.22);
  --paper: #f6e7c1;
  --paper-dim: rgba(246, 231, 193, 0.62);
  --paper-faint: rgba(246, 231, 193, 0.38);
  --gold: #f2c14e;
  --gold-2: #ffde85;
  --blue: #3fa9ff;
  --blue-deep: #0f4c8a;
  --red: #ff3b5c;
  --red-deep: #7a0f24;
  --green: #4be3a0;
  --violet: #9b7bff;
  --display: 'Anton', 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --body: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius: 14px;
  --ease: cubic-bezier(.2, .9, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: inherit; }

/* Körnung + Vignette */
.grain::before {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  opacity: .07;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.logo {
  font-family: var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: .9;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 45%, #b07d1d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(242, 193, 78, .35));
}
.logo .shadow { color: var(--paper); -webkit-text-fill-color: var(--paper); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9em 1.4em;
  border-radius: 999px;
  font-weight: 700; letter-spacing: .02em;
  background: var(--gold); color: var(--ink);
  box-shadow: 0 6px 0 #9a6c12, 0 10px 30px rgba(242, 193, 78, .25);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .2s;
  user-select: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a6c12, 0 4px 14px rgba(242, 193, 78, .2); }
.btn[disabled] { filter: grayscale(1) brightness(.6); pointer-events: none; }
.btn.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--line-2); }
.btn.ghost:active { box-shadow: inset 0 0 0 2px var(--paper-dim); }
.btn.blue { background: var(--blue); color: #021426; box-shadow: 0 6px 0 var(--blue-deep), 0 10px 30px rgba(63, 169, 255, .25); }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 6px 0 var(--red-deep), 0 10px 30px rgba(255, 59, 92, .25); }
.btn.green { background: var(--green); color: #032015; box-shadow: 0 6px 0 #187a50, 0 10px 30px rgba(75, 227, 160, .2); }
.btn.big { font-size: 1.25em; padding: 1em 1.6em; }
.btn.block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .8em; border-radius: 999px;
  background: var(--ink-3); border: 1px solid var(--line);
  font-size: .85em; letter-spacing: .04em;
}

.avatar {
  --c: var(--gold);
  display: inline-grid; place-items: center;
  width: 2.4em; height: 2.4em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, white 10%), color-mix(in srgb, var(--c) 40%, black 50%));
  box-shadow: 0 0 0 2px var(--c), 0 0 18px color-mix(in srgb, var(--c) 45%, transparent);
  font-size: 1em; line-height: 1;
  flex: none;
}
.avatar.ghost { filter: grayscale(1) opacity(.45); box-shadow: 0 0 0 2px #555; }
.avatar.off { opacity: .4; }

.coin-i { display: inline-block; width: .9em; height: .9em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 50%, #9a6c12); box-shadow: 0 0 6px rgba(242, 193, 78, .6); vertical-align: -.08em; margin-right: .25em; }

.blue-t { color: var(--blue); }
.red-t { color: var(--red); }
.gold-t { color: var(--gold); }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fadeUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(242, 193, 78, .3)); } 50% { filter: drop-shadow(0 0 22px rgba(242, 193, 78, .8)); } }
@keyframes flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; } }

.pop { animation: pop .5s var(--bounce) both; }
.fade-up { animation: fadeUp .5s var(--ease) both; }
.shake { animation: shake .5s; }

.law-card {
  --c: var(--blue);
  position: relative;
  width: 7em; height: 10em;
  border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, white 10%), color-mix(in srgb, var(--c) 55%, black 45%));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) inset, 0 12px 30px rgba(0, 0, 0, .5), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent);
  display: grid; place-items: center; text-align: center;
  color: #fff; font-family: var(--display); letter-spacing: .05em;
  overflow: hidden;
}
.law-card.red { --c: var(--red); }
.law-card .seal { font-size: 2.6em; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.law-card .lbl { position: absolute; bottom: .7em; left: 0; right: 0; font-size: 1.05em; text-transform: uppercase; }
.law-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: shine 2.8s ease-in-out infinite;
}
@keyframes shine { 60%, 100% { transform: translateX(120%); } }
.law-card.back { --c: #2a2440; }
.law-card.back .seal { opacity: .6; }