/* ═══════════════ Lobby & Spiele ═══════════════ */

/* ─── Lobby-Kacheln ─── */
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.lobby-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; min-height: 270px;
  border: 1px solid var(--border); background: var(--panel); isolation: isolate;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.lobby-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .95; transition: opacity .3s; }
.lobby-card.c1::before { background: radial-gradient(120% 80% at 50% 0%, rgba(168, 85, 247, .55), transparent 65%); }
.lobby-card.c2::before { background: radial-gradient(120% 80% at 50% 0%, rgba(234, 179, 8, .35), transparent 65%); }
.lobby-card.c3::before { background: radial-gradient(120% 80% at 50% 0%, rgba(59, 130, 246, .45), transparent 65%); }
.lobby-card.c4::before { background: radial-gradient(120% 80% at 50% 0%, rgba(16, 185, 129, .38), transparent 65%); }
.lobby-card.c5::before { background: radial-gradient(120% 80% at 50% 0%, rgba(192, 132, 252, .5), transparent 65%); }
.lobby-card.c6::before { background: radial-gradient(120% 80% at 50% 0%, rgba(236, 72, 153, .42), transparent 65%); }
.lobby-card:hover { border-color: var(--border-strong); box-shadow: 0 26px 50px -20px rgba(139, 92, 246, .55); }
.lc-art { height: 150px; display: grid; place-items: center; padding: 18px; }
.lc-art svg { width: 120px; height: 120px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); transition: transform .5s var(--ease); }
.lobby-card:hover .lc-art svg { transform: scale(1.1) rotate(-4deg); }
.lc-body { padding: 0 18px 18px; margin-top: auto; }
.lc-body h3 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; letter-spacing: -.02em; }
.lc-body p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.lc-playing { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lc-playing .dot, .lc-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--win); box-shadow: 0 0 8px var(--win); animation: pulse 1.6s infinite; }
.lc-tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(10, 6, 22, .65); border: 1px solid var(--border-strong); color: var(--primary-3); backdrop-filter: blur(6px); }
.lc-tag.live { color: var(--win); border-color: rgba(74, 222, 128, .3); }

.invest-banner { display: flex; align-items: center; gap: 22px; margin-top: 16px; padding: 22px 26px; transition: transform .3s var(--ease); }
.invest-banner:hover { transform: translateY(-2px); }
.invest-banner h3 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; }
.invest-banner p { margin: 0; color: var(--muted); }
.invest-banner > div:nth-child(2) { flex: 1; }
.ib-art { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(99, 102, 241, .2); color: #a5b4fc; flex: none; }
.ib-art svg { width: 30px; height: 30px; }

/* ─── Gemeinsame Live-Elemente ─── */
.round-hist { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; gap: 6px; overflow: hidden; z-index: 3; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.rh { flex: none; padding: 4px 10px; border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; background: rgba(8, 4, 20, .7); border: 1px solid var(--border); animation: popIn .35s var(--ease); }
.rh.bad { color: var(--lose); }
.rh.good { color: var(--win); }
.rh.gold { color: var(--gold); border-color: rgba(252, 211, 77, .35); box-shadow: 0 0 12px rgba(252, 211, 77, .2); }
.rh.num { min-width: 30px; text-align: center; color: #fff; }
.rh.num.red { background: #be123c; border-color: #be123c; }
.rh.num.black { background: #18122b; border-color: #3b2a63; }
.rh.num.green { background: #16a34a; border-color: #16a34a; }
.rh.horse { min-width: 28px; text-align: center; color: #0b0618; background: var(--hc); border-color: var(--hc); }
.phase-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(8, 4, 20, .6); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.phase-bar i { display: block; height: 100%; background: var(--grad); box-shadow: 0 0 12px var(--primary); transition: width .1s linear; }
.phase-label { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 14px; color: var(--muted); z-index: 3; }
.phase-label b { color: var(--text); font-family: var(--mono); }
.red-text { color: #fb7185 !important; }
.black-text { color: #e5e7eb !important; }
.green-text { color: var(--win) !important; }
.card-h { margin: 0 0 14px; font-family: var(--display); font-size: 18px; }
.feed tr.won td { background: rgba(74, 222, 128, .05); }

/* ─── Crash ─── */
.crash-stage { padding: 0; min-height: 460px; position: relative; overflow: hidden; }
.crash-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.crash-mult { font-family: var(--display); font-size: clamp(54px, 8vw, 92px); font-weight: 700; letter-spacing: -.04em; line-height: 1; text-shadow: 0 0 40px rgba(168, 85, 247, .6); }
.crash-mult.wait { font-size: clamp(40px, 6vw, 64px); color: var(--muted); text-shadow: none; }
.crash-mult.crashed { color: var(--lose); text-shadow: 0 0 40px rgba(251, 113, 133, .6); animation: popIn .4s var(--ease); }
.crash-sub { margin-top: 8px; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.bubbles { position: absolute; right: 16px; bottom: 20px; display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none; }
.bubble { display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 99px; background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .35); font-size: 13px; animation: bubble 2.6s var(--ease) forwards; }
.bubble img { width: 22px; height: 22px; border-radius: 6px; image-rendering: pixelated; }
.bubble b { color: var(--win); font-family: var(--mono); }
@keyframes bubble { 0% { opacity: 0; transform: translateX(30px); } 12%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-20px); } }

/* ─── Roulette ─── */
.roulette-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.roulette-stage { min-height: 470px; padding: 60px 20px 56px; }
.wheel-wrap { position: relative; width: min(360px, 78vw); aspect-ratio: 1; }
.wheel { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 6px rgba(251, 191, 36, .25), 0 30px 60px rgba(0, 0, 0, .6), 0 0 80px -10px rgba(168, 85, 247, .5); }
.wheel svg { width: 100%; height: 100%; display: block; }
.wheel-pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 4; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--gold); filter: drop-shadow(0 0 8px rgba(252, 211, 77, .8)); }
.ball-orbit { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.ball-orbit .ball { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d4d4d8 60%, #71717a); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); transform: translateY(4%); }
.ball-orbit.spin { opacity: 1; animation: orbit 6.4s cubic-bezier(.15, .6, .2, 1) forwards; }
.ball-orbit.spin .ball { animation: ballDrop 6.4s ease-in forwards; }
.ball-orbit.rest { opacity: 1; }
.ball-orbit.rest .ball { transform: translateY(calc(min(360px, 78vw) * .085)); }
@keyframes orbit { from { transform: rotate(0); } to { transform: rotate(-2160deg); } }
@keyframes ballDrop { 0%, 55% { transform: translateY(4px); } 80% { transform: translateY(calc(min(360px, 78vw) * .07)); } 90% { transform: translateY(calc(min(360px, 78vw) * .095)); } 100% { transform: translateY(calc(min(360px, 78vw) * .085)); } }
.wheel-result { position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; z-index: 5; opacity: 0; transform: scale(.6); transition: all .4s var(--ease); pointer-events: none; }
.wheel-result.show { opacity: 1; transform: none; }
.wheel-result b { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 34px; color: #fff; border: 3px solid var(--gold); box-shadow: 0 0 40px rgba(252, 211, 77, .6); }
.wheel-result b.red { background: #be123c; }
.wheel-result b.black { background: #18122b; }
.wheel-result b.green { background: #16a34a; }
.ro-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.board-card { margin-top: 20px; padding: 18px; }
.board-scroll { overflow-x: auto; padding-bottom: 4px; }
.board { display: grid; grid-template-columns: 52px repeat(12, minmax(40px, 1fr)) 52px; grid-template-rows: repeat(3, 52px) 44px 44px; gap: 5px; min-width: 660px; }
.rc {
  position: relative; border: 0; border-radius: 9px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 16px; color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); transition: transform .12s var(--ease), filter .2s, box-shadow .2s;
}
.rc:hover { filter: brightness(1.25); transform: translateY(-1px); }
.rc.red { background: linear-gradient(160deg, #e11d48, #9f1239); }
.rc.black { background: linear-gradient(160deg, #2a1f45, #130d26); }
.rc.green { background: linear-gradient(160deg, #22c55e, #15803d); }
.rc.out { background: rgba(139, 92, 246, .12); border: 1px solid var(--border-strong); color: var(--muted); font-size: 13px; }
.rc.out:hover { color: #fff; }
.rc.pop { animation: cellPop .25s var(--ease); }
@keyframes cellPop { 50% { transform: scale(.92); } }
.rc.hit { box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(252, 211, 77, .6); z-index: 1; animation: hitPulse 1s ease-in-out infinite alternate; }
@keyframes hitPulse { to { box-shadow: 0 0 0 3px var(--gold), 0 0 36px rgba(252, 211, 77, .9); } }
.diamond { display: inline-block; width: 18px; height: 18px; transform: rotate(45deg); border-radius: 3px; }
.diamond.red { background: #e11d48; }
.diamond.black { background: #0b0618; border: 1px solid #5b4a8a; }
.chip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #1e1038;
  background: radial-gradient(circle, #fde68a 55%, #f59e0b 56%, #f59e0b 70%, #fde68a 71%); border: 2px dashed #92400e;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5); animation: chipIn .25s var(--ease); pointer-events: none;
}
.chip.pending { background: radial-gradient(circle, #e9d5ff 55%, #a855f7 56%, #a855f7 70%, #e9d5ff 71%); border-color: #6d28d9; }
@keyframes chipIn { from { transform: translate(-50%, -150%) scale(.6); opacity: 0; } }

/* ─── Pferderennen ─── */
.race-stage { padding: 56px 18px 52px; min-height: 0; display: block; }
.track { position: relative; border-radius: 16px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 60px, transparent 60px 120px), linear-gradient(180deg, #1c3a1f, #14301a); border: 1px solid rgba(74, 222, 128, .15); }
.lane { position: relative; height: 58px; border-bottom: 2px dashed rgba(255, 255, 255, .12); display: flex; align-items: center; }
.lane:last-of-type { border-bottom: 0; }
.lane-no { position: absolute; left: 0; top: 0; bottom: 0; width: 34px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: var(--hc); color: #0b0618; z-index: 2; }
.runner { position: absolute; left: 40px; top: 3px; height: 52px; display: flex; align-items: center; gap: 6px; will-change: transform; z-index: 3; }
.runner svg { width: 66px; height: 52px; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.runner-name { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff; white-space: nowrap; }
.runner .h-leg { transform-box: fill-box; transform-origin: top center; }
.runner.galloping svg { animation: gallopBody .32s ease-in-out infinite; }
.runner.galloping .l1, .runner.galloping .l3 { animation: legA .32s ease-in-out infinite; }
.runner.galloping .l2, .runner.galloping .l4 { animation: legB .32s ease-in-out infinite; }
@keyframes gallopBody { 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes legA { 0%, 100% { transform: rotate(28deg); } 50% { transform: rotate(-28deg); } }
@keyframes legB { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(28deg); } }
.runner.winner svg { filter: drop-shadow(0 0 14px var(--gold)); }
.finish-line { position: absolute; top: 0; bottom: 0; right: 40px; width: 14px; z-index: 1; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 14px 14px; opacity: .85; }
.race-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 6; }
.race-overlay.show { opacity: 1; }
.podium { display: flex; align-items: flex-end; gap: 10px; padding: 18px 22px; border-radius: 18px; background: rgba(10, 6, 22, .85); backdrop-filter: blur(8px); border: 1px solid var(--border-strong); animation: popIn .5s var(--ease); }
.pd { width: 120px; text-align: center; padding: 10px 8px; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, var(--hc), color-mix(in srgb, var(--hc) 40%, #0b0618)); color: #0b0618; font-weight: 700; font-size: 14px; }
.pd span { display: block; font-family: var(--display); font-size: 28px; }
.pd em { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; }
.pd.p1 { padding-top: 26px; padding-bottom: 26px; box-shadow: 0 0 40px color-mix(in srgb, var(--hc) 60%, transparent); }
.pd.p3 { padding-top: 6px; }
.race-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; margin-top: 20px; align-items: start; }
.horse-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.horse-pick {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px; padding: 12px; border-radius: 14px; text-align: left;
  background: rgba(8, 4, 20, .6); border: 1px solid var(--border); cursor: pointer; transition: all .2s var(--ease);
}
.horse-pick:hover { border-color: var(--hc); transform: translateY(-2px); }
.horse-pick.on { border-color: var(--hc); background: color-mix(in srgb, var(--hc) 14%, rgba(8, 4, 20, .7)); box-shadow: 0 0 0 1px var(--hc), 0 10px 26px -10px var(--hc); }
.hp-no { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hc); color: #0b0618; font-family: var(--display); font-weight: 700; align-self: center; }
.hp-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 58px; }
.hp-odds { position: absolute; right: 12px; top: 12px; font-family: var(--mono); font-weight: 700; color: var(--hc); }
.hp-meta { font-size: 12px; color: var(--dim); display: flex; gap: 4px; align-items: center; }
.hp-meta .coin-ico { width: 12px; height: 12px; }
.horse-tag { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--hc) 20%, transparent); color: var(--hc); }

/* ─── Blackjack ─── */
.bj-stage { padding: 0; min-height: 520px; }
.bj-table {
  position: relative; width: 100%; height: 100%; min-height: 520px; padding: 34px 24px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: radial-gradient(120% 90% at 50% 0%, #3b1d74 0%, #24104d 45%, #150a30 100%); border-radius: inherit; overflow: hidden;
}
.bj-table::before { content: ''; position: absolute; left: 6%; right: 6%; top: 46%; height: 60%; border: 2px solid rgba(252, 211, 77, .25); border-radius: 50% 50% 0 0 / 40% 40% 0 0; border-bottom: 0; pointer-events: none; }
.bj-arc { font-size: 11px; letter-spacing: .25em; color: rgba(252, 211, 77, .6); font-weight: 700; text-align: center; z-index: 1; }
.bj-shoe { position: absolute; top: 20px; right: 22px; width: 64px; height: 86px; }
.bj-shoe .pcard { position: absolute; width: 58px; height: 82px; }
.bj-shoe .pcard:nth-child(2) { top: 4px; left: 4px; }
.bj-side { display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1; }
.bj-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.bj-val { min-width: 34px; padding: 3px 9px; border-radius: 8px; background: rgba(8, 4, 20, .7); border: 1px solid var(--border-strong); color: var(--text); font-family: var(--mono); text-align: center; letter-spacing: 0; }
.bj-val:empty { display: none; }
.bj-val.bust { color: var(--lose); border-color: rgba(251, 113, 133, .5); }
.bj-val.bj { color: var(--gold); border-color: rgba(252, 211, 77, .5); }
.bj-bet { display: inline-flex; letter-spacing: 0; text-transform: none; }
.bj-cards { display: flex; justify-content: center; min-height: 112px; perspective: 800px; }
.bj-cards .pcard + .pcard { margin-left: -34px; }
.bj-hands { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; z-index: 1; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; transition: all .3s; position: relative; }
.bj-hand.active { background: rgba(139, 92, 246, .14); box-shadow: 0 0 0 2px rgba(196, 181, 253, .5); }
.bj-res { padding: 4px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; animation: popIn .4s var(--ease); }
.bj-res.win, .bj-res.blackjack { background: rgba(74, 222, 128, .15); color: var(--win); }
.bj-res.blackjack { color: var(--gold); background: rgba(252, 211, 77, .15); }
.bj-res.lose, .bj-res.bust { background: rgba(251, 113, 133, .15); color: var(--lose); }
.bj-res.push { background: rgba(167, 139, 250, .15); color: var(--primary-3); }
.bj-empty { color: var(--muted); padding: 40px 0; }
.bj-banner { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 5; text-align: center; padding: 16px 34px; border-radius: 18px; background: rgba(10, 6, 22, .88); backdrop-filter: blur(8px); border: 2px solid var(--border-strong); transition: all .45s var(--ease); }
.bj-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bj-banner b { display: block; font-family: var(--display); font-size: 30px; }
.bj-banner span { font-family: var(--mono); color: var(--muted); }
.bj-banner.win { border-color: var(--win); box-shadow: 0 0 60px rgba(74, 222, 128, .35); }
.bj-banner.win b { color: var(--win); }
.bj-banner.lose { border-color: var(--lose); }
.bj-banner.lose b { color: var(--lose); }
.bj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.bj-actions .btn { flex-direction: column; gap: 0; padding: 10px; }
.bj-actions small { font-size: 10px; color: var(--dim); font-family: var(--mono); }

/* Spielkarten */
.pcard {
  position: relative; width: 76px; height: 108px; border-radius: 9px; flex: none; background: linear-gradient(160deg, #fff, #ede9fe);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .08); color: #18122b; font-family: var(--display); font-weight: 700;
}
.pcard.red { color: #be123c; }
.pcard .tl, .pcard .br { position: absolute; font-size: 14px; line-height: 1; text-align: center; }
.pcard .tl { top: 7px; left: 7px; }
.pcard .br { bottom: 7px; right: 7px; transform: rotate(180deg); }
.pcard .mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; }
.pcard.back { background: linear-gradient(135deg, #7c3aed, #4c1d95); border: 3px solid #f5f3ff; }
.pcard.back span { position: absolute; inset: 5px; border-radius: 5px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 4px, transparent 4px 9px), url('/assets/logo.svg') center / 40% no-repeat; }
.pcard.deal { animation: deal .5s var(--ease) both; }
.pcard.flip { animation: flipCard .55s var(--ease) both; }
@keyframes deal { from { opacity: 0; transform: translate(260px, -180px) rotate(30deg) scale(.7); } }
@keyframes flipCard { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

/* ─── Towers ─── */
.tower-stage { padding: 26px; }
.tower { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); position: relative; }
.tower.shake { animation: shake .5s; }
.tw-row { display: grid; grid-template-columns: 1fr 64px; gap: 10px; align-items: center; padding: 6px; border-radius: 14px; transition: background .3s, box-shadow .3s; }
.tw-row.current { background: rgba(139, 92, 246, .12); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .4), 0 0 30px -10px var(--glow); }
.tw-cells { display: grid; gap: 8px; }
.tw-tile {
  height: 46px; border: 0; border-radius: 11px; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #2c1a5a, #1b1040); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .35);
  transition: transform .15s var(--ease), background .2s, opacity .2s;
}
.tw-tile:disabled { cursor: default; opacity: .55; }
.tw-tile.live { opacity: 1; animation: liveTile 1.6s ease-in-out infinite; }
.tw-tile.live:hover { transform: translateY(-3px); background: linear-gradient(160deg, #4c2a94, #2a1663); }
@keyframes liveTile { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 18px -4px var(--glow); } }
.tw-tile.pressed { transform: scale(.94); }
.tw-tile svg { width: 26px; height: 26px; }
.tw-tile.safe { opacity: 1; background: linear-gradient(160deg, rgba(139, 92, 246, .55), rgba(76, 29, 149, .6)); box-shadow: inset 0 0 0 2px rgba(196, 181, 253, .6), 0 0 22px -4px var(--glow); color: #fde68a; animation: flipIn .4s var(--ease); }
.tw-tile.trap { opacity: 1; background: linear-gradient(160deg, rgba(244, 63, 94, .5), rgba(127, 29, 29, .55)); box-shadow: inset 0 0 0 2px rgba(251, 113, 133, .7); animation: flipIn .3s var(--ease), boom .6s .15s; }
.tw-tile.ghost { opacity: .35; animation: none; box-shadow: none; }
.tw-mult { font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: right; }
.tw-row.current .tw-mult { color: #fff; font-weight: 700; }
.tw-row.done .tw-mult { color: var(--primary-3); }
.seg-wrap { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }

/* ─── Plinko ─── */
.plinko-stage { padding: 0; min-height: 560px; }
.plinko-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plinko-last { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pl-chip { padding: 5px 10px; border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--bc) 35%, rgba(8, 4, 20, .8)); border: 1px solid var(--bc); animation: chipSlide .35s var(--ease); text-align: center; }
@keyframes chipSlide { from { opacity: 0; transform: translateY(-12px); } }
#pl-auto.on { background: rgba(251, 113, 133, .15); border-color: rgba(251, 113, 133, .45); color: var(--lose); }

/* ─── Schere Stein Papier ─── */
.rps-stage { min-height: 480px; }
.rps-score { position: absolute; top: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; font-family: var(--mono); font-size: 14px; }
.rps-score span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9px; background: rgba(8, 4, 20, .6); border: 1px solid var(--border); }
.rps-arena { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 6vw, 70px); }
.rps-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rps-who { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); }
.rps-hand {
  width: clamp(110px, 16vw, 170px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(56px, 8vw, 88px);
  background: radial-gradient(circle at 40% 35%, rgba(167, 139, 250, .35), rgba(30, 16, 60, .9)); border: 2px solid var(--border-strong);
  box-shadow: 0 20px 50px -20px var(--glow), inset 0 0 30px rgba(139, 92, 246, .2); transition: filter .3s, opacity .3s;
}
.rps-hand.bot { transform: scaleX(-1); }
.rps-hand.me.shake { animation: rpsShake .43s ease-in-out 3; }
.rps-hand.bot.shake { animation: rpsShakeBot .43s ease-in-out 3; }
@keyframes rpsShake { 50% { transform: translateY(-26px) rotate(-14deg); } }
@keyframes rpsShakeBot { 50% { transform: scaleX(-1) translateY(-26px) rotate(-14deg); } }
.rps-hand.reveal { animation: popIn .4s var(--ease); }
.rps-hand.bot.reveal { animation: popInBot .4s var(--ease); }
@keyframes popInBot { from { opacity: 0; transform: scaleX(-1) scale(.7); } }
.rps-hand.lost { filter: grayscale(.8) brightness(.6); }
.rps-vs { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--primary-3); text-shadow: 0 0 20px var(--glow); }
.rps-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rps-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px; border-radius: 14px; cursor: pointer;
  background: rgba(8, 4, 20, .6); border: 1px solid var(--border); transition: all .2s var(--ease);
}
.rps-pick span { font-size: 38px; transition: transform .25s var(--ease); }
.rps-pick b { font-size: 13px; color: var(--muted); }
.rps-pick:hover:not(:disabled) { border-color: var(--primary); background: rgba(139, 92, 246, .15); transform: translateY(-3px); }
.rps-pick:hover:not(:disabled) span { transform: scale(1.15) rotate(-8deg); }
.rps-pick.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 10px 26px -10px var(--glow); }
.rps-pick:disabled { cursor: default; opacity: .7; }
.history-dots i.t { border-color: var(--primary-3); background: rgba(167, 139, 250, .1); }
.history-dots i { font-style: normal; font-size: 14px; }

/* RPS: Spieler-Modus */
.mode-tabs { margin-bottom: 20px; }
.mode-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.duel-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); animation: rise .35s var(--ease); }
.duel-row:first-child { border-top: 0; }
.duel-row img { width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; }
.duel-info { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.duel-info span { font-size: 12px; }
.duel-amt { font-family: var(--mono); font-weight: 600; }
.duel-join { display: flex; gap: 6px; }
.duel-join .btn { font-size: 18px; padding: 6px 10px; }
.duel-vs { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.duel-vs em { font-style: normal; color: var(--dim); font-size: 12px; }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .roulette-top, .race-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lobby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lobby-card { min-height: 230px; }
  .lc-art { height: 110px; }
  .lc-art svg { width: 90px; height: 90px; }
  .lc-body h3 { font-size: 18px; }
  .lc-body p { display: none; }
  .invest-banner { flex-direction: column; align-items: flex-start; }
  .crash-stage { min-height: 360px; }
  .plinko-stage { min-height: 430px; }
  .lane { height: 48px; }
  .runner { height: 44px; }
  .runner svg { width: 52px; height: 42px; }
  .runner-name { display: none; }
  .pcard { width: 60px; height: 86px; }
  .pcard .mid { font-size: 26px; }
  .bj-cards .pcard + .pcard { margin-left: -26px; }
  .pd { width: 86px; font-size: 12px; }
}