/* ═══════════════════════════════════════════════════════════════
 *  ALCÚ-DIA-SHOW 3000 – Cybercartoon-Kitsch-Stylesheet
 *  Geschmack wurde am Flughafen abgegeben.
 * ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Bangers'; src: url('fonts/bangers-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bungee'; src: url('fonts/bungee-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url('fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #0b0016;
  --pink: #ff2bd6;
  --cyan: #00f0ff;
  --yellow: #fff200;
  --orange: #ff8c00;
  --purple: #7a2bff;
  --lime: #b6ff00;
  --red: #ff3b5c;
  --paper: #fffbea;
  --night: #0d0221;
  --f-display: 'Bangers', 'Impact', sans-serif;
  --f-chunky: 'Bungee', 'Arial Black', sans-serif;
  --f-body: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  --f-hand: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-pixel: 'Press Start 2P', monospace;
  --burst: polygon(50.0% 0.0%, 59.8% 13.3%, 75.0% 6.7%, 76.9% 23.1%, 93.3% 25.0%, 86.7% 40.2%, 100.0% 50.0%, 86.7% 59.8%, 93.3% 75.0%, 76.9% 76.9%, 75.0% 93.3%, 59.8% 86.7%, 50.0% 100.0%, 40.2% 86.7%, 25.0% 93.3%, 23.1% 76.9%, 6.7% 75.0%, 13.3% 59.8%, 0.0% 50.0%, 13.3% 40.2%, 6.7% 25.0%, 23.1% 23.1%, 25.0% 6.7%, 40.2% 13.3%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--night);
  overflow-x: hidden;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>🍹</text></svg>") 4 4, auto;
}
button, a, input, select, textarea { font-family: inherit; color: inherit; }
button, a { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>👉</text></svg>") 4 4, pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ─────────────── Synthwave-Malle-Hintergrund ─────────────── */
#bg { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
#bg .sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0d0221 0%, #2b0a63 30%, #8a1a9e 52%, #ff2bd6 66%, #ff8c00 74%, #2b0a63 74.2%, #12002b 100%);
}
#bg .sky::before {
  content: ''; position: absolute; inset: 0 0 40% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 33% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 22%, #fff, transparent),
    radial-gradient(1px 1px at 76% 12%, #fff, transparent),
    radial-gradient(2px 2px at 88% 30%, #fff, transparent),
    radial-gradient(1px 1px at 22% 35%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 46% 4%, #fff, transparent),
    radial-gradient(1px 1px at 67% 38%, #fff, transparent);
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
#bg .sun {
  position: absolute; left: 50%; bottom: 26vh;
  width: min(62vmin, 460px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff200 0%, #ffb300 38%, #ff5a8a 70%, #ff2bd6 100%);
  box-shadow: 0 0 60px rgba(255, 43, 214, .8), 0 0 140px rgba(255, 140, 0, .6);
  -webkit-mask-image: linear-gradient(#000 0 52%, transparent 52%), repeating-linear-gradient(#000 0 13px, transparent 13px 20px);
  mask-image: linear-gradient(#000 0 52%, transparent 52%), repeating-linear-gradient(#000 0 13px, transparent 13px 20px);
  animation: sunpulse 4s ease-in-out infinite;
}
@keyframes sunpulse { 50% { filter: brightness(1.15) saturate(1.2); } }
#bg .grid {
  position: absolute; left: -60%; right: -60%; bottom: -2vh; height: 30vh;
  background-color: #12002b;
  background-image:
    linear-gradient(var(--pink) 2px, transparent 2px),
    linear-gradient(90deg, var(--pink) 2px, transparent 2px);
  background-size: 64px 48px;
  transform: perspective(260px) rotateX(58deg);
  transform-origin: 50% 0;
  animation: gridmove 1.1s linear infinite;
  box-shadow: 0 -6px 40px rgba(255, 43, 214, .9);
}
@keyframes gridmove { to { background-position: 0 48px; } }
#bg .palm {
  position: absolute; bottom: 4vh; font-size: min(34vmin, 260px); line-height: 1;
  filter: brightness(0) drop-shadow(0 0 10px rgba(255, 43, 214, .7));
  transform-origin: bottom center;
  animation: sway 5s ease-in-out infinite alternate;
}
#bg .palm.l { left: -6vmin; }
#bg .palm.r { right: -6vmin; transform: scaleX(-1); animation-name: sway-r; }
@keyframes sway { from { rotate: -3deg; } to { rotate: 4deg; } }
@keyframes sway-r { from { rotate: 3deg; } to { rotate: -4deg; } }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1.3px, transparent 1.6px);
  background-size: 9px 9px;
}

#floaters { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute; bottom: -12vh; opacity: .85;
  animation: floatup linear infinite;
  filter: drop-shadow(2px 2px 0 rgba(11, 0, 22, .6));
}
@keyframes floatup {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(26px, -32vh) rotate(25deg); }
  50% { transform: translate(-22px, -64vh) rotate(-20deg); }
  75% { transform: translate(18px, -96vh) rotate(15deg); }
  100% { transform: translate(0, -128vh) rotate(0); }
}

.fx { position: fixed; z-index: 400; pointer-events: none; left: 0; top: 0; will-change: transform, opacity; }

/* ─────────────── Typo-Bausteine ─────────────── */
.comic {
  font-family: var(--f-display); font-weight: 400; letter-spacing: 1.5px;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink), 6px 6px 0 var(--pink);
  transform: rotate(-1.5deg);
  margin: 0 0 8px;
  line-height: 1.05;
}
h2.comic { font-size: clamp(30px, 7vw, 46px); }
h3.comic { font-size: clamp(24px, 5vw, 32px); color: var(--cyan); text-shadow: 3px 3px 0 var(--ink), 5px 5px 0 var(--pink); }
.neon {
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--c, var(--pink)), 0 0 22px var(--c, var(--pink)), 0 0 40px var(--c, var(--pink));
}
.hand { font-family: var(--f-hand); }
.pixel { font-family: var(--f-pixel); }
.who { font-weight: 700; color: var(--ink); background: var(--c, #fff); padding: 0 6px; border-radius: 6px; border: 2px solid var(--ink); white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }

/* Glitch-Effekt */
.glitch { position: relative; display: inline-block; }
body:not([data-kitsch="0"]):not([data-kitsch="1"]) .glitch::before,
body:not([data-kitsch="0"]):not([data-kitsch="1"]) .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  -webkit-text-stroke: 0; text-shadow: none;
}
body:not([data-kitsch="0"]):not([data-kitsch="1"]) .glitch::before { color: var(--cyan); animation: glitch1 2.6s infinite steps(1); clip-path: inset(0 0 60% 0); }
body:not([data-kitsch="0"]):not([data-kitsch="1"]) .glitch::after { color: var(--pink); animation: glitch2 3.1s infinite steps(1); clip-path: inset(55% 0 0 0); }
@keyframes glitch1 { 0%, 86%, 100% { transform: none; opacity: 0; } 88% { transform: translate(-6px, -2px); opacity: 1; } 92% { transform: translate(5px, 1px); opacity: 1; } 95% { transform: translate(-2px, 2px); opacity: 1; } }
@keyframes glitch2 { 0%, 80%, 100% { transform: none; opacity: 0; } 82% { transform: translate(6px, 2px); opacity: 1; } 87% { transform: translate(-5px, -1px); opacity: 1; } 90% { transform: translate(3px, 0); opacity: 1; } }

/* ─────────────── Buttons ─────────────── */
.btn {
  --c: var(--yellow);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-chunky); font-size: 15px; line-height: 1.1; text-transform: uppercase;
  padding: 12px 18px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--c); color: var(--ink); text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, filter .12s;
  user-select: none;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 7px 7px 0 var(--ink); filter: saturate(1.3); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn:disabled { filter: grayscale(.9) opacity(.6); transform: none; box-shadow: 3px 3px 0 var(--ink); cursor: not-allowed; }
.btn.small { font-size: 12px; padding: 8px 12px; border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); border-radius: 11px; }
.btn.big { font-size: 19px; padding: 16px 24px; }
.btn.pink { --c: var(--pink); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.btn.cyan { --c: var(--cyan); }
.btn.lime { --c: var(--lime); }
.btn.orange { --c: var(--orange); }
.btn.white { --c: #fff; }
.btn.ghost { --c: rgba(255, 255, 255, .85); }
.btn.danger { --c: var(--red); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.btn.rainbow, .rainbow-bg {
  background: linear-gradient(90deg, #ff2bd6, #ff8c00, #fff200, #b6ff00, #00f0ff, #7a2bff, #ff2bd6);
  background-size: 300% 100%;
  animation: rainbow 3s linear infinite;
}
.btn.rainbow { color: var(--ink); }
@keyframes rainbow { to { background-position: 300% 0; } }
.icon-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 21px; border: 3px solid var(--ink); border-radius: 50%; background: #fff;
  box-shadow: 3px 3px 0 var(--ink); padding: 0; transition: transform .12s;
}
.icon-btn:hover { transform: rotate(-12deg) scale(1.08); }
.icon-btn.avatar { background: var(--c); }
.badge {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; font: 11px/1 var(--f-pixel); color: #fff;
  background: var(--red); border: 2px solid var(--ink); border-radius: 11px;
  animation: bounce .6s ease-in-out infinite alternate;
}
@keyframes bounce { to { transform: translateY(-4px) scale(1.1); } }

.input {
  width: 100%; font: 600 17px var(--f-body); padding: 12px 14px;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff;
  box-shadow: inset 3px 3px 0 rgba(11, 0, 22, .15);
  outline: none;
}
.input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px var(--cyan); }

/* ─────────────── Panels ─────────────── */
.panel {
  position: relative;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 18px;
  margin: 0 0 26px;
}
.panel.dark { background: rgba(13, 2, 33, .88); color: #fff; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--ink), 0 0 26px var(--cyan), 8px 8px 0 var(--ink); }
.panel p { line-height: 1.45; }
.panel.dots { background-image: radial-gradient(rgba(255, 43, 214, .14) 2px, transparent 2.4px); background-size: 14px 14px; }

/* ─────────────── Screens: Türsteher & Login ─────────────── */
.screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 14px 60px; text-align: center; }
.gate .panel { max-width: 420px; }
.gate .big-emoji { font-size: 64px; margin-bottom: 6px; animation: wobble 1.4s ease-in-out infinite; }
.gate form { display: grid; gap: 14px; margin-top: 10px; }
.err { color: var(--red); font-weight: 700; min-height: 1.4em; margin: 10px 0 0; }

.logo-big {
  font-family: var(--f-display); font-weight: 400; margin: 0;
  font-size: clamp(46px, 13vw, 112px); line-height: .95; letter-spacing: 2px;
  color: var(--pink);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink), 9px 9px 0 var(--cyan), 13px 13px 0 var(--ink);
  transform: rotate(-3deg);
}
.logo-big span { color: var(--yellow); }
.logo-3000 {
  font-family: var(--f-pixel); font-size: clamp(18px, 4.5vw, 30px); color: var(--yellow);
  margin: 14px 0 6px; text-shadow: 3px 3px 0 var(--pink), 0 0 18px var(--yellow);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .55; } }
.login .tagline { font-size: clamp(16px, 4vw, 21px); max-width: 640px; margin: 10px auto 26px; font-weight: 600; }
.who-are-you { font-size: clamp(30px, 8vw, 54px); margin-bottom: 18px; }
.crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; width: 100%; max-width: 980px; }
.crew-btn {
  --c: var(--yellow);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 10px 14px; border: 4px solid var(--ink); border-radius: 24px;
  background: var(--c); color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink), 0 0 30px var(--c);
  animation: wobble 2.2s ease-in-out infinite; animation-delay: var(--d, 0s);
  transition: transform .15s;
  position: relative; overflow: hidden;
}
.crew-btn::after {
  content: ''; position: absolute; top: -60%; left: -40%; width: 40%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: rotate(20deg); animation: shine 3.2s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes shine { 0%, 60% { left: -40%; } 100% { left: 140%; } }
.crew-btn:hover { animation-play-state: paused; transform: scale(1.08) rotate(-3deg); }
.crew-btn .em { font-size: 54px; line-height: 1.1; filter: drop-shadow(3px 3px 0 var(--ink)); }
.crew-btn .nm { font-family: var(--f-display); font-size: 38px; letter-spacing: 2px; line-height: 1; -webkit-text-stroke: 1.5px var(--ink); color: #fff; paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.crew-btn .nk { font: 600 13px var(--f-body); background: rgba(255, 255, 255, .8); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 8px; }
@keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-5px); } }
.small-print { color: #fff; opacity: .9; margin-top: 30px; font-size: 14px; }

/* ─────────────── Begrüßungs-Overlay ─────────────── */
.overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden; background: rgba(13, 2, 33, .7); }
.overlay .rays {
  position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(from 0deg, var(--yellow) 0 9deg, var(--orange) 9deg 18deg);
  animation: spin 18s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 46%);
  mask-image: radial-gradient(circle, #000 0 18%, transparent 46%);
}
body[data-kitsch="3"] .overlay .rays { background: repeating-conic-gradient(from 0deg, var(--yellow) 0 9deg, var(--pink) 9deg 18deg, var(--cyan) 18deg 27deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.greet-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 20px; max-width: 640px; animation: popin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes popin { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
.greet-hello {
  font-family: var(--f-display); font-size: clamp(44px, 12vw, 92px); line-height: .95; text-align: center;
  color: var(--c, var(--pink)); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink), 9px 9px 0 #fff;
  transform: rotate(-4deg);
}
.bubble {
  position: relative; background: #fff; border: 4px solid var(--ink); border-radius: 30px;
  padding: 20px 24px; box-shadow: 8px 8px 0 var(--ink);
  font: 600 clamp(19px, 4.6vw, 26px)/1.35 var(--f-body); text-align: center;
}
.bubble::after {
  content: ''; position: absolute; left: 22%; bottom: -30px; width: 36px; height: 34px;
  background: #fff; border: 4px solid var(--ink); border-top: 0; border-left: 0;
  transform: skewX(-30deg) rotate(28deg); border-radius: 0 0 8px 0;
}
.bubble.small { font-size: 16px; padding: 12px 16px; border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); }
.bubble.small::after { display: none; }
.greet-sub { color: #fff; font-weight: 600; text-shadow: 2px 2px 0 var(--ink); }

/* ─────────────── Shell ─────────────── */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 16px, #ffe100 16px 32px);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 5px 0 var(--pink), 0 9px 0 var(--ink);
}
.logo {
  font-family: var(--f-display); font-size: clamp(21px, 5.5vw, 32px); letter-spacing: 1px; line-height: 1;
  color: var(--pink); text-decoration: none; white-space: nowrap;
  -webkit-text-stroke: 1.6px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink), 5px 5px 0 var(--cyan);
  transform: rotate(-2deg); display: inline-block;
}
.logo span { color: var(--cyan); text-shadow: 3px 3px 0 var(--ink), 5px 5px 0 var(--pink); }
.logo small { font-family: var(--f-pixel); font-size: 9px; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; margin-left: 4px; vertical-align: top; }
.spacer { flex: 1; }
.coins {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--ink); color: var(--yellow); border: 3px solid var(--ink); border-radius: 22px;
  padding: 4px 12px 4px 5px; box-shadow: 3px 3px 0 var(--pink); position: relative;
}
.coins b { font: 13px var(--f-pixel); text-shadow: 0 0 8px var(--yellow); }
.coin {
  --s: 26px;
  width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; border: 2.5px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, #fffbd0 0 12%, #ffd400 30%, #f0a800 68%, #b77400 100%);
  font: calc(var(--s) * .62)/1 var(--f-display); color: #8a4f00; text-shadow: 1px 1px 0 #fff6a8;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .2);
  animation: coinspin 2.6s linear infinite;
}
.coin.huge { --s: 120px; border-width: 6px; box-shadow: inset -8px -8px 0 rgba(0, 0, 0, .18), 0 0 40px var(--yellow); }
@keyframes coinspin { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.plus-pop { position: absolute; top: -6px; right: 4px; font: 14px var(--f-pixel); color: var(--lime); text-shadow: 2px 2px 0 var(--ink); animation: plusup 1.4s ease-out forwards; pointer-events: none; }
@keyframes plusup { to { transform: translateY(-34px) scale(1.4); opacity: 0; } }

.ticker {
  position: relative; z-index: 5; overflow: hidden; white-space: nowrap;
  background: var(--ink); color: var(--yellow); border-bottom: 3px solid var(--cyan);
  font: 12px/1 var(--f-pixel); padding: 9px 0; margin-top: 9px;
  box-shadow: 0 0 18px rgba(0, 240, 255, .55);
}
.ticker-track { display: inline-block; padding-left: 100%; animation: tick var(--dur, 60s) linear infinite; }
.ticker-track span { margin-right: 42px; }
.ticker-track span:nth-child(3n+2) { color: var(--cyan); }
.ticker-track span:nth-child(3n) { color: var(--pink); }
@keyframes tick { to { transform: translateX(-100%); } }

main#view { max-width: 1120px; margin: 0 auto; padding: 22px 14px 40px; position: relative; z-index: 2; min-height: 60vh; }

.foot { max-width: 760px; margin: 0 auto; padding: 0 16px 130px; text-align: center; color: #fff; position: relative; z-index: 2; }
.foot .wisdom { font-weight: 600; font-size: 16px; text-shadow: 2px 2px 0 var(--ink); background: rgba(13, 2, 33, .6); border: 2px dashed var(--cyan); border-radius: 14px; padding: 10px 14px; }
.foot .disclaimer { font-size: 12px; opacity: .78; margin-top: 12px; }

.tabbar {
  position: fixed; z-index: 70; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(640px, calc(100% - 16px));
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--ink); border: 3px solid var(--ink); border-radius: 22px; padding: 5px; gap: 4px;
  box-shadow: 0 0 0 3px var(--pink), 0 0 26px var(--pink), 0 0 50px rgba(0, 240, 255, .4);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px;
  color: #fff; text-decoration: none; font: 10px/1.1 var(--f-chunky); border-radius: 16px; transition: background .15s, transform .15s;
}
.tabbar a span { font-size: 22px; line-height: 1.1; }
.tabbar a.on { background: var(--yellow); color: var(--ink); transform: translateY(-6px) rotate(-3deg); box-shadow: 0 4px 0 var(--pink); }
.disco-fab {
  position: fixed; z-index: 71; right: 14px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px);
  width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--ink);
  font-size: 30px; background: radial-gradient(circle at 30% 30%, #fff, #c9c9ff 40%, #7a2bff);
  box-shadow: 4px 4px 0 var(--ink), 0 0 22px var(--purple);
  animation: spin 6s linear infinite;
}
body.disco .disco-fab { animation-duration: .9s; box-shadow: 4px 4px 0 var(--ink), 0 0 40px var(--pink), 0 0 70px var(--cyan); }

/* ─────────────── Alben ─────────────── */
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -4px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  --c: #fff; flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font: 14px var(--f-chunky); padding: 8px 12px; border: 3px solid var(--ink); border-radius: 30px; background: #fff;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .12s;
}
.chip i { font: normal 10px var(--f-pixel); background: var(--ink); color: var(--yellow); padding: 4px 6px; border-radius: 10px; }
.chip:hover { transform: rotate(-3deg) scale(1.05); }
.chip.on { background: var(--c); transform: rotate(-3deg) scale(1.08); box-shadow: 4px 4px 0 var(--ink), 0 0 18px var(--c); }
.area-head { --c: var(--yellow); background: linear-gradient(135deg, var(--paper) 55%, var(--c) 55.2%); }
.area-head .tagline { font-family: var(--f-hand); font-size: 18px; margin: 4px 0 12px; }
.area-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.area-head .stat { display: inline-block; font: 11px var(--f-pixel); background: var(--ink); color: var(--yellow); padding: 6px 8px; border-radius: 8px; margin-bottom: 12px; }

.dropzone {
  position: relative; text-align: center; padding: 22px 16px; margin: 0 0 30px;
  border: 4px dashed var(--cyan); border-radius: 24px; background: rgba(13, 2, 33, .86); color: #fff;
  box-shadow: 0 0 0 4px var(--ink), 0 0 30px rgba(0, 240, 255, .6);
  transition: transform .15s, border-color .15s;
}
.dropzone.drag { border-color: var(--yellow); transform: scale(1.02) rotate(-1deg); }
.dropzone h3 { font-family: var(--f-display); font-size: 30px; letter-spacing: 1px; margin: 0 0 6px; }
.dropzone p { margin: 0 0 14px; opacity: .9; }
.dropzone .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.dropzone .input { max-width: 380px; font-size: 15px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 22px 16px; }
.card {
  position: relative; margin: 0;
  background: #fff; border: 3px solid var(--ink); border-radius: 6px;
  padding: 8px 8px 8px; box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(var(--r, 0deg)); transition: transform .15s, box-shadow .15s;
  animation: cardin .45s cubic-bezier(.2, 1.5, .4, 1) backwards; animation-delay: var(--ad, 0s);
}
@keyframes cardin { from { transform: scale(.5) rotate(10deg); opacity: 0; } }
.card::before {
  content: ''; position: absolute; top: -12px; left: 50%; width: 64px; height: 22px; margin-left: -32px; z-index: 2;
  background: rgba(255, 242, 0, .75); border: 1px solid rgba(11, 0, 22, .25);
  transform: rotate(calc(var(--r, 0deg) * -2 + 3deg));
}
.card:hover { transform: rotate(0) scale(1.04); z-index: 3; box-shadow: 9px 9px 0 var(--ink), 0 0 26px var(--pink); }
.card .ph { position: relative; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, #ffe3fb 0 10px, #fff 10px 20px); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.card:hover .ph img { transform: scale(1.06); }
.card figcaption { font-family: var(--f-hand); font-size: 15px; line-height: 1.2; margin: 8px 2px 6px; min-height: 18px; color: #2a1a3a; overflow-wrap: anywhere; }
.card figcaption.empty { opacity: .45; }
.card .owner-tag { font-size: 12px; margin: 0 0 6px 2px; }
.card .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini {
  font: 12px/1 var(--f-chunky); padding: 7px 8px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .1s;
}
.mini:hover { transform: rotate(-4deg) scale(1.08); }
.mini:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.mini.vote { flex: 1; }
.mini.vote.on { background: var(--pink); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.mini.vote.own { background: #eee; }
.mini.dl { background: var(--cyan); }
.burstbadge {
  position: absolute; z-index: 3; width: 58px; height: 58px; display: grid; place-items: center;
  font: 13px/1 var(--f-display); letter-spacing: 1px; color: var(--ink); text-align: center;
  background: var(--yellow); clip-path: var(--burst);
  animation: burstwiggle 1.2s ease-in-out infinite alternate;
}
.burstbadge.new { top: -18px; right: -10px; }
.burstbadge.hot { top: -18px; left: -10px; background: var(--pink); color: #fff; }
.burstbadge.crown { top: -22px; right: -10px; background: var(--lime); font-size: 26px; }
.burstbadge.rank { top: -20px; left: -10px; background: var(--cyan); font: 13px var(--f-pixel); }
@keyframes burstwiggle { from { transform: rotate(-12deg) scale(1); } to { transform: rotate(12deg) scale(1.12); } }
.empty-state { text-align: center; padding: 30px 16px; }
.empty-state .big { font-size: 64px; }

/* ─────────────── Lightbox ─────────────── */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5, 0, 15, .95); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; gap: 12px; }
.lightbox .lb-img-wrap { position: relative; max-width: 100%; display: grid; place-items: center; touch-action: pan-y; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 66vh; object-fit: contain; border: 4px solid #fff; border-radius: 6px; box-shadow: 0 0 0 4px var(--ink), 0 0 34px var(--pink), 0 0 70px var(--cyan); background: #222; }
.lb-info { color: #fff; text-align: center; max-width: 720px; }
.lb-info .hand { font-size: 20px; display: block; margin-top: 6px; }
.lb-info small { opacity: .8; display: block; margin-top: 4px; }
.lb-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lb-x { position: absolute; top: 12px; right: 12px; }

/* ─────────────── Modals ─────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 14px;
  background: rgba(13, 2, 33, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadein .2s ease both;
}
.modal-back.out { animation: fadeout .2s ease both; }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: 88vh; overflow: auto; margin: 0; animation: popin .4s cubic-bezier(.2, 1.6, .4, 1) both; overscroll-behavior: contain; }
.modal-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--ink); background: var(--red); color: #fff; font-size: 16px; box-shadow: 2px 2px 0 var(--ink); z-index: 2; }
.modal .lead { font-size: 17px; }
.modal .btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.thanks-styles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0; }
.thanks-styles .btn { flex-direction: column; font-size: 12px; padding: 12px 8px; text-transform: none; }
.thanks-styles .btn span { font-size: 32px; }
.thanks-thumb { width: 100%; max-height: 200px; object-fit: cover; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); margin: 8px 0 4px; transform: rotate(-1.5deg); background: #eee; }
.burst-title {
  font-family: var(--f-display); font-size: clamp(28px, 7vw, 40px); line-height: 1; letter-spacing: 1px;
  color: var(--pink); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
  margin: 0 40px 6px 0;
}

.notes { display: grid; gap: 12px; margin: 14px 0; }
.note { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 10px; box-shadow: 4px 4px 0 var(--ink); }
.note.unseen { background: #fff9c4; }
.note-thumbs { display: flex; flex: none; }
.note-thumbs img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--ink); border-radius: 8px; background: #eee; }
.note-thumbs img + img { margin-left: -34px; transform: rotate(8deg); }
.note-text { line-height: 1.4; font-size: 15px; }
.note-text small { display: block; opacity: .6; margin-top: 3px; font-size: 12px; }
.newphotos { background: var(--cyan); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; box-shadow: 4px 4px 0 var(--ink); font-weight: 600; }
.newphotos a { color: inherit; }

.upload-rows { display: grid; gap: 10px; margin: 14px 0; max-height: 46vh; overflow: auto; }
.up-row { display: grid; gap: 4px; font-size: 13px; }
.up-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { position: relative; height: 22px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; overflow: hidden; }
.progress .bar { height: 100%; width: 0; transition: width .2s; background: repeating-linear-gradient(-45deg, var(--pink) 0 12px, var(--orange) 12px 24px); background-size: 34px 34px; animation: stripes .6s linear infinite; }
@keyframes stripes { to { background-position: 34px 0; } }
.progress.done .bar { background: var(--lime); animation: none; }
.progress.fail .bar { background: var(--red); animation: none; }
.up-msg { font-family: var(--f-hand); font-size: 18px; min-height: 2.5em; }

.setting-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
input[type=range].kitsch { width: 100%; accent-color: var(--pink); height: 30px; }
.kitsch-label { font: 13px var(--f-pixel); color: var(--purple); display: block; margin-top: 4px; }

/* ─────────────── Toasts ─────────────── */
#toasts { position: fixed; z-index: 500; left: 50%; bottom: 104px; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); display: grid; gap: 10px; pointer-events: none; }
.toast {
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 18px; padding: 12px 16px;
  font-weight: 600; box-shadow: 5px 5px 0 var(--ink), 0 0 22px rgba(255, 242, 0, .7); text-align: center;
  animation: toastin .4s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: auto;
}
.toast.bad { background: #ffd1dc; }
.toast.out { animation: fadeout .3s ease both; }
@keyframes toastin { from { transform: translateY(40px) scale(.7) rotate(-6deg); opacity: 0; } }

/* ─────────────── Arena ─────────────── */
.arena { max-width: 520px; margin: 0 auto; }
.arena-count { display: inline-block; font: 11px var(--f-pixel); background: var(--ink); color: var(--lime); padding: 7px 10px; border-radius: 10px; margin-bottom: 14px; }
.arena-card { position: relative; background: #fff; border: 4px solid var(--ink); border-radius: 10px; padding: 10px 10px 12px; box-shadow: 9px 9px 0 var(--ink), 0 0 34px var(--pink); touch-action: pan-y; user-select: none; transition: transform .1s; }
.arena-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border: 3px solid var(--ink); background: #222; pointer-events: none; }
.arena-card .meta { margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.arena-card .meta .hand { font-size: 17px; }
.arena-card.fly-right { transition: transform .45s ease-in, opacity .45s; transform: translateX(130%) rotate(28deg) !important; opacity: 0; }
.arena-card.fly-left { transition: transform .45s ease-in, opacity .45s; transform: translateX(-130%) rotate(-28deg) !important; opacity: 0; }
.arena-card .stamp { position: absolute; top: 30px; font: 34px var(--f-display); padding: 4px 12px; border: 5px solid; border-radius: 10px; opacity: 0; pointer-events: none; letter-spacing: 2px; background: rgba(255, 255, 255, .85); }
.arena-card .stamp.yes { left: 22px; color: #0a9a3a; border-color: #0a9a3a; transform: rotate(-16deg); }
.arena-card .stamp.no { right: 22px; color: var(--red); border-color: var(--red); transform: rotate(16deg); }
.arena-buttons { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 12px; margin-top: 22px; }
.hint { color: #fff; text-align: center; font-size: 13px; opacity: .85; margin-top: 16px; }

/* ─────────────── Hitparade ─────────────── */
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 12px; }
.pcard { --c: #fff; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: 5px 5px 0 var(--ink); position: relative; }
.pcard .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pcard .av { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; border: 3px solid var(--ink); background: var(--c); flex: none; box-shadow: 0 0 14px var(--c); }
.pcard .nm { font: 24px/1 var(--f-display); letter-spacing: 1px; }
.pcard .rank { font: 10px var(--f-pixel); color: var(--purple); margin-top: 4px; }
.pcard .earned { font: 12px var(--f-pixel); background: var(--ink); color: var(--yellow); padding: 6px 8px; border-radius: 8px; display: inline-block; margin-bottom: 8px; }
.pcard ul { list-style: none; padding: 0; margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.titles { display: flex; flex-wrap: wrap; gap: 6px; }
.title-chip { font: 11px var(--f-chunky); background: var(--c, var(--lime)); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 7px; box-shadow: 2px 2px 0 var(--ink); }
.pcard.r0 { background: linear-gradient(160deg, #fff7b0, #fff 40%); box-shadow: 5px 5px 0 var(--ink), 0 0 30px var(--yellow); }
.potd { text-align: center; }
.potd img { width: min(100%, 560px); max-height: 60vh; object-fit: cover; border: 4px solid var(--ink); border-radius: 10px; box-shadow: 8px 8px 0 var(--ink), 0 0 40px var(--yellow); cursor: zoom-in; transform: rotate(-1deg); }
.totals { color: #fff; text-align: center; font: 11px/2 var(--f-pixel); text-shadow: 2px 2px 0 var(--ink); }

/* ─────────────── Lollo-Bank ─────────────── */
.bank-hero { text-align: center; }
.bank-hero .balance { font: clamp(26px, 8vw, 40px) var(--f-pixel); margin: 18px 0 6px; color: var(--purple); text-shadow: 3px 3px 0 var(--yellow); }
.bank-hero .balance small { display: block; font-size: 12px; color: var(--ink); text-shadow: none; margin-top: 8px; }
.beer-progress { position: relative; height: 34px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; overflow: visible; margin: 18px 34px 10px 0; }
.beer-progress .bar { height: 100%; border-radius: 14px; background: linear-gradient(180deg, #fff 0 18%, #ffd34d 18%, #f5a700); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); transition: width .6s cubic-bezier(.2, 1.4, .4, 1); }
.beer-progress .mug { position: absolute; right: -36px; top: 50%; transform: translateY(-50%); font-size: 38px; }
.rules { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.rules li { display: flex; gap: 10px; align-items: center; background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px 10px; }
.rules li b { font: 11px var(--f-pixel); background: var(--lime); border: 2px solid var(--ink); border-radius: 8px; padding: 5px 6px; margin-left: auto; white-space: nowrap; }
.rules li b.neg { background: var(--orange); }
.rank-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; margin: 8px 0; }
.rank-row .bar-bg { grid-column: 2 / 4; height: 12px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; overflow: hidden; }
.rank-row .bar-bg div { height: 100%; background: var(--c, var(--pink)); }
.ledger { display: grid; gap: 6px; max-height: 420px; overflow: auto; }
.ledger div { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: baseline; font-size: 14px; border-bottom: 2px dotted rgba(11, 0, 22, .2); padding: 6px 0; }
.ledger b { font: 12px var(--f-pixel); color: #0a9a3a; }
.ledger b.neg { color: var(--red); }
.ledger small { opacity: .6; }

/* ─────────────── Bierchen-Tresen ─────────────── */
.debt { text-align: center; margin: 10px 0 4px; }
.debt b { display: block; font: clamp(50px, 16vw, 90px) var(--f-display); color: var(--orange); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); }
.voucher {
  display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: center;
  background: repeating-linear-gradient(90deg, #fff6d6 0 18px, #fff 18px 36px);
  border: 4px dashed var(--ink); border-radius: 18px; padding: 14px; margin-bottom: 18px;
  box-shadow: 6px 6px 0 var(--ink); position: relative;
}
.voucher .mugbig { font-size: 54px; text-align: center; animation: wobble 1.6s ease-in-out infinite; }
.voucher h3 { margin: 0; font: 26px var(--f-display); letter-spacing: 1px; }
.voucher p { margin: 4px 0; }
.voucher .act { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.voucher .waiting { font-family: var(--f-hand); }
.served { display: grid; gap: 8px; }
.served div { background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px 10px; font-size: 14px; }

/* ─────────────── MINIDISCO ─────────────── */
#beams { position: fixed; inset: -50%; z-index: 150; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 8deg, rgba(255, 43, 214, .7) 8deg 14deg, transparent 14deg 38deg, rgba(0, 240, 255, .7) 38deg 44deg, transparent 44deg 70deg, rgba(255, 242, 0, .7) 70deg 76deg, transparent 76deg 100deg, rgba(182, 255, 0, .6) 100deg 106deg, transparent 106deg 140deg, rgba(255, 43, 214, .7) 140deg 146deg, transparent 146deg 190deg, rgba(0, 240, 255, .7) 190deg 196deg, transparent 196deg 230deg, rgba(255, 242, 0, .7) 230deg 236deg, transparent 236deg 280deg, rgba(122, 43, 255, .7) 280deg 286deg, transparent 286deg 320deg, rgba(255, 140, 0, .7) 320deg 326deg, transparent 326deg);
  animation: spin 4s linear infinite; }
#discoball { position: fixed; z-index: 151; top: 52px; left: 50%; font-size: 76px; margin-left: -38px; pointer-events: none; transform-origin: 50% -60px; animation: swing 1.94s ease-in-out infinite alternate; filter: drop-shadow(0 0 18px #fff); }
#discoball::before { content: ''; position: absolute; left: 50%; top: -60px; width: 3px; height: 60px; background: #fff; }
@keyframes swing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
#discobanner { position: fixed; z-index: 152; top: 50%; left: 0; right: 0; pointer-events: none; text-align: center; font: clamp(40px, 14vw, 120px) var(--f-display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--cyan); animation: discoBanner 2.2s ease-out forwards; }
@keyframes discoBanner { 0% { transform: translateY(-50%) scale(.2) rotate(-20deg); opacity: 0; } 30% { transform: translateY(-50%) scale(1.15) rotate(4deg); opacity: 1; } 70% { transform: translateY(-50%) scale(1) rotate(-2deg); opacity: 1; } 100% { transform: translateY(-50%) scale(3); opacity: 0; } }
body.disco #bg { animation: discohue 1.94s steps(4) infinite; }
@keyframes discohue { to { filter: hue-rotate(360deg); } }
body.disco .card, body.disco .pcard, body.disco .chip, body.disco .voucher { animation: dance .484s ease-in-out infinite alternate !important; }
body.disco .card:nth-child(2n), body.disco .pcard:nth-child(2n), body.disco .chip:nth-child(2n) { animation-direction: alternate-reverse !important; }
body.disco .comic, body.disco .logo { animation: pulse .484s ease-in-out infinite alternate; }
@keyframes dance { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-12px) rotate(4deg) scale(1.03); } }
@keyframes pulse { to { transform: scale(1.08) rotate(2deg); filter: hue-rotate(90deg); } }

/* ─────────────── Sonnenbrand-Modus (Easter Egg) ─────────────── */
body.sunburn #app, body.sunburn #bg { filter: sepia(1) saturate(7) hue-rotate(-35deg) brightness(.95); transition: filter .5s; }

/* ─────────────── Kitsch-O-Meter ─────────────── */
body[data-kitsch="0"] #bg .grid, body[data-kitsch="0"] #bg .sun, body[data-kitsch="0"] #bg .palm,
body[data-kitsch="0"] .crew-btn, body[data-kitsch="0"] .burstbadge, body[data-kitsch="0"] .coin,
body[data-kitsch="0"] .disco-fab, body[data-kitsch="0"] .card, body[data-kitsch="0"] .badge { animation: none !important; }
body[data-kitsch="0"] .ticker-track { animation-duration: 160s !important; }
body[data-kitsch="1"] #bg .grid, body[data-kitsch="1"] #bg .palm, body[data-kitsch="1"] .crew-btn { animation-duration: 4s; }

/* ─────────────── Kleinkram ─────────────── */
.loading { text-align: center; color: #fff; font: 14px var(--f-pixel); padding: 50px 0; }
.loading .spin { font-size: 54px; display: inline-block; animation: spin 1s linear infinite; margin-bottom: 18px; }
.center { text-align: center; }
.mt { margin-top: 16px; }
.muted { opacity: .7; }

@media (max-width: 520px) {
  .logo small { display: none; }
  .logo { font-size: 22px; }
  .icon-btn { width: 38px; height: 38px; font-size: 19px; }
  .coins { padding: 3px 9px 3px 4px; }
  .coins b { font-size: 11px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .card { padding: 6px; }
  .card figcaption { font-size: 13px; }
  .mini { font-size: 11px; padding: 6px 6px; }
  .burstbadge { width: 48px; height: 48px; font-size: 11px; }
  .disco-fab { width: 50px; height: 50px; font-size: 25px; right: 10px; }
  .crew-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .crew-grid .crew-btn:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 60%; }
  .crew-btn .em { font-size: 44px; }
  .crew-btn .nm { font-size: 32px; }
  .panel { padding: 15px; border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
  .arena-buttons { grid-template-columns: 1fr 1.4fr; }
  .arena-buttons .dl-wrap { grid-column: 1 / -1; }
  .thanks-styles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}