/* Party Guild – Party-Nacht-Look: tiefes Indigo, Neon-Pink, Gold für Sterne und Münzen */
:root {
  --bg: #1b1430;
  --bg2: #241a3f;
  --card: #2b2049;
  --card2: #35285a;
  --line: #44356e;
  --ink: #f6f0ff;
  --muted: #b3a6cf;
  --pink: #ff4f8b;
  --pink-d: #d8336e;
  --gold: #ffd166;
  --cyan: #3ec7ff;
  --ok: #7cdb6b;
  --bad: #ff6b6b;
  --display: "Dela Gothic One", "Arial Black", system-ui, sans-serif;
  --body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 0%, #2c1f52 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior: none;
}
#app { height: 100%; }
button { font: inherit; color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.1; text-wrap: balance; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }

.screen {
  max-width: 560px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 700; cursor: pointer;
  background: var(--card2); color: var(--ink); transition: transform .08s, filter .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn:focus-visible, .char:focus-visible, .seg button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.btn.primary { background: var(--pink); box-shadow: 0 4px 0 var(--pink-d); }
.btn.primary:active { box-shadow: 0 1px 0 var(--pink-d); transform: translateY(3px); }
.btn.secondary { background: var(--card2); box-shadow: 0 4px 0 #1f1738; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.big { font-size: 18px; padding: 15px 20px; width: 100%; }
.btn.small { padding: 6px 10px; font-size: 13px; }

/* ---------- Start ---------- */
.home { min-height: 100%; justify-content: center; }
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.faces { display: flex; justify-content: center; margin-bottom: 6px; }
.face { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); margin-inline: -8px; background: var(--card); }
.face.f2 { width: 84px; height: 84px; z-index: 2; margin-top: -10px; border-color: var(--pink); }
.face.f1, .face.f3 { z-index: 1; }
.face-portrait { width: 100%; height: 100%; display: block; }
.logo { font-size: clamp(42px, 13vw, 64px); line-height: .95; display: flex; flex-direction: column; }
.logo span { color: var(--pink); }
.sub { color: var(--muted); margin: 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; color: var(--muted); }
.field input {
  font: inherit; font-size: 18px; color: var(--ink); background: var(--bg2); border: 2px solid var(--line);
  border-radius: 12px; padding: 12px 14px; outline: none;
}
.field input:focus { border-color: var(--cyan); }
.code-input { font-family: var(--display) !important; letter-spacing: .3em; text-transform: uppercase; text-align: center; font-size: 26px !important; }
.error { color: var(--bad); min-height: 1.2em; margin: 0; font-weight: 700; }
.foot { text-align: center; color: var(--muted); font-size: 13px; margin: 0; }

/* ---------- Karten / Lobby ---------- */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.topbar h1 { font-size: 22px; }
.topbar .btn { justify-self: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 17px; display: flex; align-items: baseline; gap: 8px; }
.card h2 small { font-family: var(--body); font-size: 13px; color: var(--muted); }
.invite { flex-direction: row; flex-wrap: wrap; align-items: center; }
.invite-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.invite-text p { margin: 0; font-size: 13px; }
.code { display: flex; gap: 6px; }
.code span { font-family: var(--display); font-size: 30px; width: 46px; height: 54px; display: grid; place-items: center; background: var(--bg2); border-radius: 10px; border-bottom: 4px solid var(--pink); }
.url { display: flex; align-items: center; gap: 6px; min-width: 0; }
.url code { font-size: 12px; color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qr { width: 140px; height: 140px; background: #fff; border-radius: 14px; padding: 8px; display: grid; place-items: center; margin-inline: auto; }
.qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.qr p { color: #1b1430; text-align: center; margin: 0; }

.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plist li { display: flex; align-items: center; gap: 10px; background: var(--bg2); border-radius: 14px; padding: 8px 10px; }
.mini { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; border: 3px solid var(--ring, var(--line)); background: var(--card2); display: block; }
.mini-portrait { width: 100%; height: 100%; display: block; }
.mini-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-weight: 800; }
.who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who em { font-style: normal; color: var(--muted); font-weight: 400; }
.who small { color: var(--muted); font-size: 12px; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--card2); color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.tag.host { color: var(--gold); }
.tag.off { color: var(--bad); }
.x { border: 0; background: transparent; color: var(--muted); font-size: 22px; padding: 0 4px; cursor: pointer; }
.ico { width: 14px; height: 14px; vertical-align: -2px; }

.char-detail { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border-radius: 16px; padding: 12px; }
.char-detail p { margin: 2px 0; font-size: 14px; }
.char-detail .role { color: var(--muted); font-size: 13px; }
.char-detail .card-line span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }
.char-detail .btn { margin-top: 8px; }
.char-detail .ok { color: var(--ok); font-weight: 800; }
.big-portrait { width: 96px; height: 101px; border-radius: 14px; overflow: hidden; flex: none; }
.detail-portrait { width: 100%; height: 100%; display: block; }
.stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.chargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.char { position: relative; border: 3px solid transparent; background: var(--bg2); border-radius: 14px; padding: 0 0 4px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.char span { font-size: 11px; font-weight: 800; }
.char-portrait { width: 100%; aspect-ratio: 200/210; display: block; }
.char.preview { border-color: var(--cyan); }
.char.mine { border-color: var(--pink); }
.char.taken { opacity: .38; }
.char i { position: absolute; top: 4px; left: 4px; right: 4px; font-style: normal; font-size: 10px; font-weight: 800; background: rgba(0,0,0,.65); border-radius: 6px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.seg { display: flex; background: var(--bg2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 9px 4px; font-weight: 700; color: var(--muted); cursor: pointer; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--pink); color: #fff; }
.settings p { margin: 0; }
.hint { color: var(--gold); font-size: 13px; font-weight: 700; }
.waiting { text-align: center; font-weight: 700; }

/* ---------- Spiel ---------- */
.screen.game { height: 100%; max-height: 100dvh; gap: 8px; padding-block: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-bottom, 0px) + 10px); overflow: hidden; }
.hud { display: flex; align-items: center; gap: 10px; }
.hud .round { font-family: var(--display); font-size: 18px; }
.hud .round b { font-weight: 400; color: var(--gold); }
.hud .mapname { color: var(--muted); font-size: 13px; flex: 1; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: flex; align-items: center; gap: 6px; background: var(--card); border: 2px solid transparent; border-radius: 99px; padding: 3px 10px 3px 3px; flex: none; transition: border-color .2s, transform .2s; }
.chip .mini { width: 32px; height: 32px; border-width: 2px; }
.chip.active { border-color: var(--ring); transform: translateY(-1px); }
.chip.off { opacity: .5; }
.chip-text { display: flex; flex-direction: column; line-height: 1.15; }
.chip-text b { font-size: 12px; white-space: nowrap; }
.vals { font-size: 12px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.vals .ico + * { margin-left: 4px; }

.board-wrap { flex: 1; min-height: 0; position: relative; background: #120d20; border-radius: 20px; overflow: hidden; }
.board { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.board:active { cursor: grabbing; }
.board .roads line { stroke-linecap: round; }
.board .roads .road { stroke: #3d335c; stroke-width: 20; }
.board .roads .alley { stroke: #5b4436; stroke-width: 14; stroke-dasharray: 1 0; }
.board .tile .top { stroke: rgba(255,255,255,.4); stroke-width: 1; }
.board .tile.shortcut .top { stroke: #ffffff; stroke-dasharray: 3 3; stroke-width: 1.2; }
.board .tl { font-family: var(--display); font-size: 9px; text-anchor: middle; pointer-events: none; }
.board .tl.small { font-size: 6.5px; }
.board .neon { font-family: var(--display); text-anchor: middle; stroke-width: .6; paint-order: stroke; letter-spacing: .06em; animation: flicker 6s infinite; }
.board .wave { animation: wave 3s ease-in-out infinite; }
.board .spray { animation: bob 1.2s ease-in-out infinite; }
.board .star { transition: transform .6s cubic-bezier(.3,1.3,.5,1); }
.board .star polygon { fill: var(--gold); stroke: #b8862a; stroke-width: 1.4; }
.board .star-glow { fill: rgba(255,209,102,.18); animation: pulseglow 1.6s ease-in-out infinite; }
.board .star-shadow { fill: rgba(0,0,0,.3); }
.board .star-bob { animation: bob 1.6s ease-in-out infinite; }
.board .tok-shadow { fill: rgba(0,0,0,.35); }
.board .token.active:not(.walking) .tok-body { animation: hop .9s ease-in-out infinite; }
.board .token.offline { opacity: .55; }
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .35; } }
@keyframes wave { 50% { transform: translateX(3px); } }
@keyframes pulseglow { 50% { opacity: .5; } }
.cam { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.cam button { border: 0; border-radius: 99px; padding: 6px 12px; font-size: 12px; font-weight: 800; background: rgba(43,32,73,.85); color: var(--ink); cursor: pointer; backdrop-filter: blur(4px); }
.cam button[aria-pressed="true"] { background: var(--pink); }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes hop { 50% { transform: translateY(-5px); } }

.action { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; flex: none; }
.status { margin: 0; font-weight: 700; text-align: center; min-height: 1.5em; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.roll { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .04em; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.03); } }
.log { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.log li:first-child { color: var(--ink); }

.dice-overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; z-index: 20; background: radial-gradient(circle at 50% 50%, rgba(27,20,48,.55), transparent 60%); }
.dice-overlay[hidden] { display: none; }
.dice-overlay.out { animation: fadeout .35s ease forwards; }
.dice-stage { perspective: 1000px; width: 100px; height: 100px; position: relative; }
.dice-hop { width: 100%; height: 100%; transform-style: preserve-3d; animation: hopdie 1.1s cubic-bezier(.3,.6,.4,1) forwards; }
.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.22,1.35,.4,1); }
.cube.tumble { animation: tumble .45s linear infinite; transition: none; }
.core { position: absolute; inset: 3px; background: #ddd2f2; }
.core.cx { transform: rotateY(90deg); }
.core.cy { transform: rotateX(90deg); }
.face { position: absolute; inset: 0; background: linear-gradient(145deg, #ffffff, #ece4fb); border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 3px #d9cdf2; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14px; }
.face i { width: 15px; height: 15px; border-radius: 50%; background: #2b2049; place-self: center; box-shadow: inset 0 2px 2px rgba(0,0,0,.35); }
.face.f1 i { background: var(--pink); width: 22px; height: 22px; }
.face.f1 { transform: translateZ(50px); }
.face.f6 { transform: rotateY(180deg) translateZ(50px); }
.face.f3 { transform: rotateY(90deg) translateZ(50px); }
.face.f4 { transform: rotateY(-90deg) translateZ(50px); }
.face.f2 { transform: rotateX(90deg) translateZ(50px); }
.face.f5 { transform: rotateX(-90deg) translateZ(50px); }
.dice-shadow { position: absolute; left: 10%; right: 10%; bottom: -26px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); animation: shadowdie 1.1s ease forwards; }
.dice-label { font-family: var(--display); font-size: 22px; text-align: center; opacity: 0; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.dice-label b { color: var(--gold); font-weight: 400; font-size: 34px; }
.dice-label.show { animation: pop .35s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes tumble { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
@keyframes hopdie { 0% { transform: translateY(-160px) scale(.6); } 45% { transform: translateY(0) scale(1); } 62% { transform: translateY(-38px); } 80% { transform: translateY(0); } 90% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes shadowdie { 0% { transform: scale(.3); opacity: .2; } 45% { transform: scale(1); opacity: 1; } 62% { transform: scale(.7); } 80%, 100% { transform: scale(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeout { to { opacity: 0; transform: scale(.9); } }
@keyframes land { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- Minispiele ---------- */
.screen.minigame { height: 100%; min-height: 100dvh; justify-content: center; }
.mg-intro { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.mg-intro h2 { font-size: 30px; }
.mg-intro p { margin: 0; }
.intro-bar { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.intro-bar i { display: block; height: 100%; background: var(--pink); width: 0; animation: grow linear forwards; }
@keyframes grow { to { width: 100%; } }
.mg-pad { min-height: 62dvh; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; transition: background .1s; }
.mg-pad b { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 11vw, 54px); line-height: 1; }
.mg-pad span { font-weight: 700; }
.mg-pad small { color: rgba(255,255,255,.75); }
.mg-pad.wait { background: #c2334f; }
.mg-pad.go { background: #2fb36a; }
.mg-pad.done { background: var(--card); cursor: default; }
.tap-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.tap-timer { width: 100%; height: 12px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.tap-timer i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; animation: shrink linear forwards; }
@keyframes shrink { to { transform: scaleX(0); } }
.tap-btn { width: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--pink); box-shadow: 0 10px 0 var(--pink-d); display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.tap-btn b { font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 1; font-variant-numeric: tabular-nums; }
.tap-btn span { font-weight: 800; letter-spacing: .1em; }
.tap-btn.pop { animation: tap .12s ease-out; }
@keyframes tap { 50% { transform: scale(.95) translateY(6px); box-shadow: 0 4px 0 var(--pink-d); } }

.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.rank li { display: flex; align-items: center; gap: 10px; background: var(--bg2); border-radius: 14px; padding: 8px 12px; }
.rank li.me { outline: 2px solid var(--pink); }
.rank .place { font-family: var(--display); width: 26px; color: var(--gold); }
.rank .gain { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- Ergebnis ---------- */
.results { justify-content: center; min-height: 100%; }
.winner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.win-portrait { width: 150px; height: 158px; border-radius: 24px; overflow: hidden; border: 4px solid var(--gold); box-shadow: 0 0 0 6px rgba(255,209,102,.18); animation: land .6s cubic-bezier(.3,1.6,.5,1); }
.winner h1 { font-size: clamp(28px, 8vw, 38px); }
.rank.final .place-1 { background: linear-gradient(90deg, rgba(255,209,102,.22), var(--bg2)); }

/* ---------- Hinweise ---------- */
.toasts { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 104px); transform: translateX(-50%); width: min(92vw, 480px); display: flex; flex-direction: column; gap: 6px; z-index: 30; pointer-events: none; }
.toast { background: #fff; color: var(--bg); font-weight: 700; padding: 10px 14px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: drop .3s cubic-bezier(.3,1.4,.5,1); transition: opacity .4s, transform .4s; border-left: 6px solid var(--cyan); }
.toast.plus, .toast.star { border-left-color: var(--gold); }
.toast.minus, .toast.error { border-left-color: var(--bad); }
.toast.swap { border-left-color: #a46cf5; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
.offline { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); left: 50%; transform: translateX(-50%); background: var(--bad); color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 99px; z-index: 40; }

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

/* ===================== Etappe 2 ===================== */
/* Lobby-Schalter */
.toggle { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border-radius: 14px; padding: 12px; cursor: pointer; }
.toggle input { width: 22px; height: 22px; accent-color: var(--pink); flex: none; margin-top: 2px; }
.toggle span { display: flex; flex-direction: column; gap: 2px; }
.toggle small { color: var(--muted); font-size: 12px; }

/* Status und Strafpunkte an den Spieler-Chips */
.chip { position: relative; }
.pen-chip { font-size: 10px; font-weight: 800; background: #6b2a3a; color: #ffb3c1; border-radius: 6px; padding: 0 4px; margin-left: 2px; }
.st-row { position: absolute; left: 30px; bottom: -7px; display: flex; gap: 2px; }
.st { font-style: normal; font-size: 9px; font-weight: 800; padding: 0 4px; border-radius: 5px; background: #3a2d63; color: #e8defa; line-height: 13px; }
.st-shield { background: #1f6f8b; } .st-curse, .st-lag, .st-skip { background: #7a2a3d; } .st-discount, .st-trap { background: #7a5a12; }
.st-safe, .st-best, .st-double, .st-extra { background: #2f6b4f; }
.chips { padding-bottom: 8px; }
.icon-btn { white-space: nowrap; }

/* Kamera-Knöpfe */
.cam button#zoomIn, .cam button#zoomOut { width: 34px; padding: 6px 0; font-size: 16px; line-height: 1; }

/* Weg zum Stern */
.board .star-path-glow { fill: none; stroke: rgba(255,209,102,.35); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.board .star-path { fill: none; stroke: #ffd166; stroke-width: 3.5; stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round; animation: march 1s linear infinite; }
.board .step-dot { fill: #1b1430; stroke: #ffd166; stroke-width: 1.5; }
.board .step-num { font-family: var(--display); font-size: 8px; fill: #ffd166; text-anchor: middle; }
.board .path-badge rect { fill: #ffd166; }
.board .path-badge text { font-family: var(--display); font-size: 11px; fill: #3a2600; text-anchor: middle; }
.board .path-badge text.sub { font-family: var(--body); font-weight: 800; font-size: 8.5px; }
.board .dir-arrow { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
@keyframes march { to { stroke-dashoffset: -18; } }
.dist { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--gold); background: rgba(255,209,102,.12); border-radius: 99px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }

/* Kartenhand */
.hand { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.hand-card { flex: 1 1 0; min-width: 0; display: flex; gap: 8px; align-items: center; text-align: left; background: linear-gradient(135deg, #3d2b6e, #2b2049); border: 2px solid #5a46a0; border-radius: 14px; padding: 6px 8px; cursor: pointer; }
.hand-card.sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,209,102,.25); }
.hand-card:disabled { opacity: .45; cursor: default; }
.hc-portrait { width: 38px; height: 40px; border-radius: 8px; overflow: hidden; flex: none; }
.hc-text { display: flex; flex-direction: column; min-width: 0; }
.hc-text b { font-size: 13px; }
.hc-text small { font-size: 11px; color: var(--muted); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-title { margin: 0; font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }
.targets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.target { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ring); background: var(--bg2); border-radius: 99px; padding: 3px 10px 3px 3px; font-weight: 700; font-size: 13px; cursor: pointer; }
.target .mini { width: 28px; height: 28px; border-width: 0; }
.dice-seg button { font-size: 11px; }
.btn.priced { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; }
.price { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.action { max-height: 52dvh; overflow-y: auto; }

/* Würfel: mehrere und Zahlen-Würfel */
.dice-row { display: flex; gap: 22px; }
.num-die { width: 100%; height: 100%; border-radius: 22px; background: linear-gradient(145deg, #ffe08a, #f2b632); color: #3a2600; font-family: var(--display); font-size: 52px; display: grid; place-items: center; box-shadow: 0 6px 0 #b8862a; }
.num-die.spin { animation: numspin .25s linear infinite; }
@keyframes numspin { 0% { transform: rotateY(0) scale(.9); } 50% { transform: rotateY(90deg) scale(1); } 100% { transform: rotateY(180deg) scale(.9); } }
.dice-label small { display: block; font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--muted); text-shadow: none; margin-top: 4px; }

/* Karten-Einblendung */
.card-splash { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; background: rgba(15,10,28,.72); overflow: hidden; animation: fadein .2s ease; }
.card-splash[hidden] { display: none; }
.card-splash.out { animation: fadeout .4s ease forwards; }
.splash-rays { position: absolute; width: 180vmax; height: 180vmax; background: repeating-conic-gradient(from 0deg, rgba(255,79,139,.22) 0 8deg, transparent 8deg 22deg); animation: rays 6s linear infinite; }
.splash-card { position: relative; width: min(86vw, 380px); background: linear-gradient(160deg, #3d2b6e, #1f1638); border: 3px solid var(--gold); border-radius: 26px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: slamcard .55s cubic-bezier(.2,1.5,.4,1); }
.splash-portrait { height: 230px; overflow: hidden; animation: slideportrait .7s cubic-bezier(.2,1.2,.4,1); }
.splash-portrait .detail-portrait { width: 100%; height: 100%; object-fit: cover; }
.splash-text { padding: 14px 18px 18px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.splash-text h2 { font-size: 30px; color: var(--gold); }
.splash-text p { margin: 0; }
.splash-target { color: var(--pink); font-weight: 800; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes slamcard { 0% { transform: translateX(-120%) rotate(-18deg) scale(.8); } 100% { transform: none; } }
@keyframes slideportrait { 0% { transform: scale(1.4) translateY(20px); } 100% { transform: none; } }
@keyframes fadein { from { opacity: 0; } }

/* Minispiel-Ergebnis */
.headline { font-weight: 800; color: var(--gold); }
.pen { font-style: normal; color: #ffb3c1; font-weight: 800; }

/* Stopp bei 10 */
.stop-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stop-clock { font-family: var(--display); font-size: clamp(56px, 20vw, 88px); font-variant-numeric: tabular-nums; }
.stop-clock.hidden { color: var(--muted); }
.tap-btn.stop { background: #e84a63; box-shadow: 0 10px 0 #a02c3d; }
.tap-btn.stop b { font-size: 48px; }

/* Farb-Chaos */
.chaos { display: flex; flex-direction: column; gap: 16px; }
.chaos-top { display: flex; justify-content: space-between; font-weight: 800; color: var(--muted); }
.chaos-word { font-family: var(--display); font-size: clamp(48px, 17vw, 76px); text-align: center; background: #fff; border-radius: 24px; padding: 28px 10px; letter-spacing: .04em; }
.chaos-word.shake { animation: shakex .3s; }
@keyframes shakex { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.chaos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chaos-btn { border: 0; border-radius: 18px; padding: 26px 0; font-size: 20px; font-weight: 800; color: #1b1430; cursor: pointer; touch-action: manipulation; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.chaos-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }

/* Neon-Schlangen */
.snake-wrap { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - 40px); }
.snake-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 13px; }
.snake-top #snTime, .snake-top #tkTime { white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 18px; }
.snake-top .role { color: var(--gold); }
.snake-arena { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; }
.snake-arena canvas { position: absolute; background: transparent; touch-action: none; }
.snake-arena #trail { background: #0e0a1a; border-radius: 6px; }
.snake-msg { position: absolute; font-family: var(--display); font-size: 26px; pointer-events: none; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.snake-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: none; }
.snake-ctrl button { border: 0; border-radius: 18px; padding: 22px 0; font-size: 28px; background: var(--card2); color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 5px 0 #1f1738; }
.snake-ctrl button.on { background: var(--pink); box-shadow: 0 2px 0 var(--pink-d); transform: translateY(3px); }
.snake-pool { display: flex; flex-direction: column; gap: 4px; background: var(--bg2); border-radius: 12px; padding: 8px 12px; }
.snake-pool .pool-head { display: flex; justify-content: space-between; font-size: 13px; }
.snake-pool .pool-bar { height: 10px; background: #3a2d63; border-radius: 99px; overflow: hidden; }
.snake-pool .pool-bar i { display: block; height: 100%; background: var(--gold); box-shadow: 0 0 8px rgba(255,209,102,.7); transition: width .2s; }
.snake-pool .pool-bar.low i { background: var(--bad); }
.snake-pool small { color: var(--muted); font-size: 12px; }

/* Fallen und Miete */
.board .trap-rent { font-family: var(--display); font-size: 8px; fill: #3a2600; text-anchor: middle; }
.toast.trap { border-left-color: #ff9f45; }
.toast.rent { border-left-color: var(--gold); }
.rent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rent-row { background: var(--bg2); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 700; }
.rent-row b { color: var(--gold); display: inline-flex; align-items: center; gap: 2px; }
.rent-row small { color: var(--muted); font-weight: 400; }
.rent-row.pay { outline: 2px solid #a8303f; }
.rent-row.get { outline: 2px solid var(--gold); }

/* Brücke */
.board .crack { fill: none; stroke: #2a1a10; stroke-width: 1.6; stroke-linecap: round; }
.board .bridge-badge rect { fill: #8e6640; stroke: #ffd166; stroke-width: 1; }
.board .bridge-badge text { font-family: var(--display); font-size: 9px; fill: #ffe7b0; text-anchor: middle; }
.board .bridge-badge.wobbly rect { fill: #a8303f; }
.board .bridge-badge.wobbly rect { animation: pulseglow .6s ease-in-out infinite; }
.toast.bridge { border-left-color: #8e6640; }

/* Würfel auf Canvas */
.die3d { width: 110px; height: 110px; display: block; filter: drop-shadow(0 6px 0 rgba(120,100,170,.45)); }
.dice-stage { width: 110px; height: 110px; }

/* ===================== Version 0.5: Formate, Wetten, Snake, Panzer ===================== */
.fmt-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fmt-card { background: var(--bg2); border: 2px solid transparent; border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; text-align: left; transition: transform .1s, border-color .1s, background .1s; }
.fmt-card b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.fmt-card small { color: var(--muted); }
.fmt-card.on { border-color: var(--pink); transform: scale(1.02); }
.fmt-card.picked { background: var(--pink); border-color: var(--gold); }
.fmt-card.picked small { color: #fff; }
.fmt-reveal { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.you { margin: 0; font-weight: 800; color: var(--gold); }
.vs { display: flex; align-items: center; justify-content: center; gap: 14px; animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.vs-word { font-family: var(--display); font-size: 22px; color: var(--pink); }
.vs-team { font-family: var(--display); font-size: 16px; }
.vs-face { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
.vs-portrait { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ring); display: block; }
.vs-face.big .vs-portrait { width: 84px; height: 84px; }
.vs.small .vs-portrait { width: 44px; height: 44px; }
.vs-face.bet-on .vs-portrait { box-shadow: 0 0 0 4px rgba(255,209,102,.6); }
.role-line { font-weight: 800; color: var(--gold); }
.catchup { font-size: 13px; font-weight: 700; color: #7cdb6b; }
.bet { display: flex; flex-direction: column; gap: 6px; }
.bet-row { display: flex; gap: 10px; justify-content: center; }
.bet-btn { border: 2px solid var(--line); background: var(--bg2); border-radius: 16px; padding: 8px 12px; cursor: pointer; }
.bet-btn.sel { border-color: var(--gold); background: rgba(255,209,102,.15); }
.bonus { font-style: normal; color: #7cdb6b; font-weight: 800; }
.rank li.win { background: linear-gradient(90deg, rgba(255,209,102,.18), var(--bg2)); }
.bets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.bets li { display: flex; justify-content: space-between; gap: 8px; background: var(--bg2); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.bets li.me { outline: 2px solid var(--pink); }
.snake-ctrl.three { grid-template-columns: 1fr .8fr 1fr; }
.snake-ctrl button.boost { font-size: 16px; font-weight: 800; background: #7a5a12; }
.snake-ctrl button.boost b { color: var(--gold); }
.snake-arena canvas { image-rendering: pixelated; }
.tank-wrap { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - 40px); }
.tank-ctrl { display: flex; align-items: center; gap: 16px; flex: none; }
.tank-ctrl p { margin: 0; }
.joy { width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, #35285a 0%, #241a3f 70%); border: 2px solid var(--line); position: relative; touch-action: none; flex: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--pink); box-shadow: 0 4px 0 var(--pink-d); pointer-events: none; transition: transform .05s; }

/* ---------- v0.6 Gilden-Hub ---------- */
.hub { padding-top: 64px; }
.hub-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; gap: 4px; padding: 8px max(10px, calc(50% - 270px)); background: rgba(27,20,48,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hub-nav button { flex: 1; border: 0; background: transparent; color: var(--muted); font-weight: 800; font-size: 13px; padding: 9px 4px; border-radius: 10px; cursor: pointer; }
.hub-nav button[aria-pressed="true"] { background: var(--pink); color: #fff; }
.hub-portrait { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid var(--gold); box-shadow: 0 0 0 6px rgba(255,209,102,.18), 0 10px 30px rgba(0,0,0,.4); display: block; }
.hub-portrait svg { width: 100%; height: 100%; display: block; }
.lore { text-align: center; color: var(--muted); font-size: 14px; margin: 4px 8px 0; text-wrap: pretty; }
.lvl { display: flex; gap: 12px; align-items: center; background: var(--bg2); border-radius: 14px; padding: 10px 12px; }
.lvl-badge { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), #e09a2a); color: #3a2400; font-weight: 900; font-size: 15px; }
.lvl-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lvl-info small { font-size: 12px; }
.lvl-bar { height: 8px; background: var(--card); border-radius: 99px; overflow: hidden; margin-top: 2px; }
.lvl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); border-radius: 99px; }
.hero-card { display: flex; gap: 14px; align-items: center; }
.hero-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hero-card p { margin: 0; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; background: var(--bg2); border: 3px solid transparent; border-radius: 14px; cursor: pointer; font-size: 12px; font-weight: 800; text-align: center; }
.item.sel { border-color: var(--gold); }
.item.locked { opacity: .5; cursor: default; }
.item.locked .swatch { filter: grayscale(1); }
.item i { font-style: normal; font-size: 10px; color: var(--muted); }
.swatch { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--card2); }
.swatch.ttl { color: var(--gold); font-size: 20px; }
.ptitle { color: var(--gold); font-weight: 800; }
.award { text-align: center; }
.award h2 { color: var(--gold); font-size: 28px; }
.award p { margin: 6px 0; }
.lvlup { color: var(--pink); font-weight: 900; font-size: 18px; }

/* ---------- Rotlicht ---------- */
.rl { display: flex; flex-direction: column; gap: 14px; padding: 12px 4px; }
.rl-light { align-self: center; display: flex; gap: 14px; background: #111; padding: 10px 16px; border-radius: 40px; border: 3px solid #333; }
.rl-light i { width: 46px; height: 46px; border-radius: 50%; background: #2a2a2a; transition: background .1s, box-shadow .1s; }
.rl-light.red i:first-child { background: #ff3b3b; box-shadow: 0 0 30px #ff3b3b; }
.rl-light.green i:last-child { background: #3bff7a; box-shadow: 0 0 30px #3bff7a; }
.rl-track { position: relative; background: linear-gradient(90deg, var(--bg2), var(--card)); border-radius: 14px; padding: 6px 0; overflow: hidden; }
.rl-lane { position: relative; height: 40px; border-bottom: 1px dashed var(--line); }
.rl-lane:last-of-type { border-bottom: 0; }
.rl-lane.me { background: rgba(255,79,139,.12); }
.rl-runner { position: absolute; top: 3px; left: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ring); background: var(--card2); transition: left .1s linear; }
.rl-runner svg { width: 100%; height: 100%; }
.rl-goal { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(0deg, #fff 0 8px, #111 8px 16px); }
.rl-time { height: 6px; background: var(--card); border-radius: 99px; overflow: hidden; }
.rl-time i { display: block; height: 100%; width: 100%; background: var(--gold); }
.rl-guard { display: flex; gap: 12px; }
.rl-guard .tap-btn { flex: 1; }
.tap-btn.red { background: radial-gradient(circle at 40% 35%, #ff7676, #c81e1e); }
.tap-btn.green { background: radial-gradient(circle at 40% 35%, #7dffa8, #1e9c4a); }
.tap-btn.run.hold { transform: scale(.94); filter: brightness(1.25); }

/* ---------- Bombe ---------- */
.bomb { display: flex; flex-direction: column; gap: 14px; padding: 12px 4px; }
.bomb-head { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.bomb-head b { font-family: var(--display); font-size: 24px; }
.bomb-head span { color: var(--muted); }
.bomb-head.boom b { color: var(--bad); animation: pulse .5s 2; }
.bomb-people { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bomb-p { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ring); background: var(--card2); transition: transform .2s; }
.bomb-p svg { width: 100%; height: 100%; }
.bomb-p.turn { transform: scale(1.2); box-shadow: 0 0 0 3px var(--gold); }
.bomb-p.out { opacity: .3; filter: grayscale(1); }
.bomb-p i { position: absolute; right: -2px; bottom: -2px; font-style: normal; font-size: 16px; }
.bomb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bomb-btn { aspect-ratio: 1; border: 0; border-radius: 18px; font-family: var(--display); font-size: 22px; background: radial-gradient(circle at 40% 30%, #ff8a5c, #c8402a); box-shadow: 0 6px 0 #7a1a10; cursor: pointer; }
.bomb-btn:disabled { cursor: default; filter: saturate(.6) brightness(.8); }
.bomb-btn:not(:disabled):active { transform: translateY(4px); box-shadow: 0 2px 0 #7a1a10; }
.bomb-btn.safe { background: var(--ok); box-shadow: 0 6px 0 #2f6a28; filter: none; }
.bomb-btn.boom { background: #111; box-shadow: 0 6px 0 #000; filter: none; }
.bomb-btn.reveal, .bomb-btn.armed { outline: 4px solid var(--gold); }
.bomb-timer { height: 6px; background: var(--card); border-radius: 99px; overflow: hidden; }
.bomb-timer i { display: block; height: 100%; background: var(--pink); animation: bombT 6s linear forwards; }
@keyframes bombT { from { width: 100%; } to { width: 0; } }
.rl .tap-btn { align-self: center; width: min(60vw, 230px); }
.rl .tap-btn b { font-size: 40px; }
.rl-guard .tap-btn { width: auto; }
.rl .tap-btn.red { box-shadow: 0 10px 0 #7a1010; }
.rl .tap-btn.green { box-shadow: 0 10px 0 #0f5a2a; }
.maps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.map-pick { text-align: left; border: 3px solid transparent; background: var(--bg2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.map-pick small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.map-pick.sel { border-color: var(--gold); }

/* ---------- v0.6 Chibi-Figuren und Nah-Kamera ---------- */
#boardWrap svg { transition: transform .8s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 62%; }
#boardWrap.closeup svg { transform: perspective(720px) rotateX(18deg) scale(1.14); }
.board .token .leg, .board .token .arm { transform-box: fill-box; transform-origin: 50% 0%; }
.board .token.walking .leg.l, .board .token.walking .arm.r { animation: swing .15s ease-in-out infinite alternate; }
.board .token.walking .leg.r, .board .token.walking .arm.l { animation: swing .15s ease-in-out infinite alternate-reverse; }
@keyframes swing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.board .token .tok-body { transform-box: fill-box; transform-origin: 50% 100%; }
.board .token.land .tok-body { animation: land .22s ease-out; }
@keyframes land { 0% { transform: scale(1.18, .8); } 60% { transform: scale(.94, 1.06); } 100% { transform: scale(1, 1); } }
.board .token.poof .tok-lift { animation: poof .5s ease-out; }
@keyframes poof { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.2); } 100% { transform: scale(1); } }
.board .token.active .tok-shadow { fill: rgba(255,209,102,.45); }
.board .portal-swirl { animation: pulseglow 2.4s ease-in-out infinite; }
.board .mist { animation: pulseglow 3s ease-in-out infinite; }

/* ---------- v0.6 Items, Fallen-Stufe 3, Warp ---------- */
.item-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.item-chip { display: flex; align-items: center; gap: 6px; border: 2px solid transparent; background: var(--bg2); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 800; cursor: pointer; }
.item-chip.sel { border-color: var(--gold); }
.item-chip:disabled { opacity: .5; }
.btn.shop-item { text-align: left; }
.btn.shop-item small { display: block; font-weight: 600; font-size: 11px; color: var(--muted); }
.btn .si { margin-right: 6px; font-style: normal; }
.btn:disabled { opacity: .45; }
.broke { color: var(--bad); font-style: normal; font-weight: 800; display: block; font-size: 12px; }
.board .trap-max { fill: none; stroke-width: 2; opacity: .8; animation: pulseglow 1.4s ease-in-out infinite; }
.board .warp-swirl { animation: spin 3s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Teamspiel ---------- */
.vs.teams { align-items: stretch; gap: 8px; }
.team-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg2); border-radius: 14px; padding: 8px 6px; border: 2px solid transparent; }
.team-col.mine { border-color: var(--gold); }
.team-col > b { font-size: 13px; }
.team-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.vs.teams .vs-face .vs-portrait { width: 40px; height: 40px; }
.vs.teams.big .vs-face .vs-portrait { width: 52px; height: 52px; }
.board .trap-aura { opacity: .35; filter: blur(2px); animation: pulseglow 1.2s ease-in-out infinite; }
.board .trap-lava { animation: pulseglow .9s ease-in-out infinite; }
.board .trap-runes { animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.board .trap-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame .5s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(1, 1); } to { transform: scale(.85, 1.15); } }

/* ---------- Glückssieben ---------- */
.l7 { display: flex; flex-direction: column; gap: 12px; padding: 10px 4px; }
.l7-mine { background: var(--card); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.l7-mine.bust { animation: shake .4s; background: #3a1a2a; }
.l7-hand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 64px; align-items: center; }
.l7-card { width: 44px; height: 62px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-size: 24px; color: #fff; background: linear-gradient(160deg, var(--c, #6a5ff2), color-mix(in srgb, var(--c, #6a5ff2) 60%, #000)); box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25); }
.l7-card.new { animation: flipin .45s ease-out; }
.l7-card.bustcard { outline: 3px solid var(--bad); }
@keyframes flipin { 0% { transform: rotateY(90deg) scale(.8); } 100% { transform: none; } }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.v0, .v1 { --c: #8a8fa0; } .v2 { --c: #3ec7ff; } .v3 { --c: #2fc46a; } .v4 { --c: #7cdb6b; } .v5 { --c: #ffd166; }
.v6 { --c: #ff9f45; } .v7 { --c: #ff4f8b; } .v8 { --c: #b08cff; } .v9 { --c: #6a5ff2; } .v10 { --c: #e84a63; }
.l7-meta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 800; color: var(--muted); }
.l7-btns { display: flex; gap: 10px; }
.l7-btns .btn { flex: 1; }
.l7 .bad { color: var(--bad); font-style: normal; font-weight: 800; }
.l7 .ok { color: var(--ok); font-style: normal; font-weight: 800; }
.l7 em { font-style: normal; font-size: 12px; }
.l7-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.l7-others li { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; background: var(--bg2); border-left: 4px solid var(--ring); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.l7-mini { display: flex; gap: 3px; flex-wrap: wrap; }
.l7-mini i { font-style: normal; width: 18px; height: 24px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--c); }

/* ---------- Kulisse rund um die Karte ---------- */
.board .scenery-sky { pointer-events: none; }
.board .sc-fly { animation: scfly linear infinite; }
@keyframes scfly { from { transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx) * .5), -30px); } to { transform: translate(var(--dx), 10px); } }
.board .sc-wing { animation: scwing .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes scwing { to { transform: scaleY(-.6); } }
.board .sc-drift { animation: scdrift ease-in-out infinite alternate; }
@keyframes scdrift { from { transform: translate(0, 0); } to { transform: translate(14px, -10px); } }
.board .sc-flap { animation: scflap .18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes scflap { to { transform: scaleX(.3); } }
.board .sc-graze { animation: scgraze 3s ease-in-out infinite; }
@keyframes scgraze { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(1.5px); } }
.board .sc-smoke { animation: scsmoke 3.3s ease-out infinite; opacity: 0; }
@keyframes scsmoke { 0% { opacity: .7; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(6px, -30px) scale(1.6); } }
.board .sc-spin { animation: spin 6s linear infinite; }
.board .sc-fall { animation: scfall .6s linear infinite; }
@keyframes scfall { to { stroke-dashoffset: -24; } }
.board .sc-mist, .board .sc-twinkle, .board .sc-blink { animation: pulseglow 1.6s ease-in-out infinite; }
.board .sc-bob { animation: bob 2.4s ease-in-out infinite; }
.board .sc-fountain { animation: pulseglow .8s ease-in-out infinite; }
.board .sc-rise { animation: scrise linear infinite; }
@keyframes scrise { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translate(40px, -500px); opacity: 0; } }
.board .sc-beam { animation: scbeam 6s ease-in-out infinite alternate; }
@keyframes scbeam { from { transform: rotate(-25deg); } to { transform: rotate(35deg); } }
.gcode { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg2); border-radius: 14px; padding: 10px; margin: 8px 0; }
.gcode b { font-family: var(--display); font-size: 30px; letter-spacing: .12em; color: var(--gold); }

/* ---------- App installieren ---------- */
.install-btn { width: 100%; margin-top: 4px; }
.home > .install-btn { max-width: 420px; align-self: center; }
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(10, 6, 20, .72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: fadein .2s; }
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px; max-width: 380px; width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.modal-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.install-steps { text-align: left; margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.modal-card .btn { width: 100%; }
@keyframes fadein { from { opacity: 0; } }