/* Fernseher-Ansicht */
html { font-size: clamp(13px, 0.95vw + 0.2vh, 24px); }
body.host { overflow: hidden; height: 100vh; }
.screen { position: relative; z-index: 2; height: 100vh; }

/* ---------------- Start ---------------- */
#scr-start { display: grid; place-items: center; padding: 2rem; }
.start-card { text-align: center; max-width: 46rem; animation: rise .9s var(--ease-out); }
.crest { font-size: 7rem; display: grid; place-items: center; margin-bottom: 1rem; }
.crest .seal { animation: stamp-in 1s .2s var(--ease-bounce) both; }
.title {
  font-size: clamp(3rem, 7vw, 7rem); line-height: .95; margin: 0 0 .3em;
  color: var(--parch);
  text-shadow: 0 2px 0 var(--brass-dk), 0 6px 30px rgba(0, 0, 0, .6);
}
.tagline { font-size: 1.35rem; color: var(--text-dim); margin: 0 0 2rem; }
.start-lang { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; color: var(--text-dim); }
.rules-link { display: block; margin-top: 1.5rem; color: var(--brass); }

/* ---------------- Lobby ---------------- */
#scr-lobby { display: flex; flex-direction: column; padding: 1.4rem 2.2rem 1.6rem; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.lobby-head h1 { font-size: 3rem; margin: 0; color: var(--parch); text-shadow: 0 2px 0 var(--brass-dk); }
.lobby-grid { flex: 1; display: grid; grid-template-columns: minmax(20rem, 30rem) 1fr; gap: 2.2rem; min-height: 0; }
.join-card { padding: 1.8rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; transform: rotate(-1.2deg); }
.join-card h2 { margin: 0 0 1rem; font-size: 2rem; }
.qr-frame { background: var(--parch); padding: .7rem; border-radius: 10px; box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 6px var(--parch), 0 0 0 8px var(--brass-dk); }
#qr { width: min(17rem, 30vh); height: min(17rem, 30vh); display: block; image-rendering: pixelated; }
.join-hint { margin: 1rem 0 .2rem; color: var(--ink-soft); }
.join-url { margin: 0; font-weight: 700; font-size: 1.15rem; word-break: break-all; }
.join-code { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; color: var(--ink-soft); }
.join-code b { font-size: 4.2rem; color: var(--blood); letter-spacing: .12em; line-height: 1; }
.wifi { margin: auto 0 0; padding-top: 1rem; font-size: .85rem; color: var(--ink-soft); }

.heirs-panel { display: flex; flex-direction: column; min-height: 0; }
.heirs-head { display: flex; align-items: baseline; gap: 1rem; }
.heirs-head h2 { font-size: 2.2rem; margin: 0; }
#heir-count { color: var(--text-dim); }
.heir-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem; align-content: start; overflow: auto; flex: 1; min-height: 6rem; }
.heir-list li {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem .6rem .8rem;
  border-radius: 14px; background: linear-gradient(180deg, rgba(242, 227, 194, .08), rgba(242, 227, 194, .02));
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .25);
  animation: pop-in .5s var(--ease-bounce); position: relative;
}
.heir-list .medal { width: 4.4rem; height: 4.4rem; font-size: 2.5rem; }
.heir-list.many { grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); gap: .6rem; }
.heir-list.many li { padding: .6rem .4rem .5rem; gap: .3rem; }
.heir-list.many .medal { width: 3rem; height: 3rem; font-size: 1.7rem; }
.heir-list.many .nm { font-size: .85rem; }
.heir-list .nm { font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.heir-list .off { opacity: .45; }
.heir-list .tag { font-size: .75rem; color: var(--text-dim); }
.heir-list .kick { position: absolute; top: .3rem; right: .3rem; border: 0; background: rgba(0, 0, 0, .35); color: var(--text-dim); width: 1.8rem; height: 1.8rem; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.heir-list li:hover .kick, .heir-list .kick:focus-visible { opacity: 1; }
.heir-empty { color: var(--text-dim); font-style: italic; margin: 0 0 1rem; }
.lobby-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.setting { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-dim); }
.setting select { font: inherit; color: var(--ink); background: var(--parch); border: 0; border-radius: 10px; padding: .5em .8em; font-weight: 700; }
.unlocks { margin: 1.2rem 0; }
.unlocks h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--text-dim); font-weight: 500; }
.unlocks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.unlocks li { display: flex; gap: .4rem; align-items: center; padding: .35rem .8rem; border-radius: 999px; font-size: .9rem; background: rgba(0, 0, 0, .25); color: var(--text-dim); transition: all .4s; }
.unlocks li.on { background: rgba(217, 164, 65, .2); color: var(--parch); box-shadow: inset 0 0 0 1px var(--brass); }
.start-btn { align-self: flex-start; min-width: 16rem; }

/* Werkzeuge */
.tools { display: flex; gap: .5rem; align-items: center; }
.tool { border: 0; background: rgba(0, 0, 0, .3); color: var(--text); height: 2.6rem; min-width: 2.6rem; border-radius: 12px; padding: 0 .7rem; font-size: 1.1rem; display: inline-flex; align-items: center; gap: .3rem; }
.tool.off { opacity: .4; }
.tool.skip { font-size: .9rem; font-weight: 700; }

/* ---------------- Spielfeld ---------------- */
#scr-game { display: flex; flex-direction: column; padding: .9rem 1.4rem 1.2rem; gap: .9rem; }
.topbar { display: flex; align-items: center; gap: 1.4rem; min-height: 3.6rem; }
.round-badge { display: flex; align-items: center; gap: .8rem; font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.round-badge .seal { font-size: 3.2rem; }
.round-badge .seal span { font-size: .5em; color: #ffe1d8; }
.clause-mini {
  flex: 1; min-width: 0; font-size: 1.05rem; line-height: 1.3; color: var(--ink); padding: .6rem 1.1rem; border-radius: 6px;
  background: linear-gradient(180deg, var(--parch), var(--parch-2)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clause-mini:empty { visibility: hidden; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.timer { position: relative; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 4; }
.timer .bg { stroke: rgba(0, 0, 0, .35); }
.timer .fg { stroke: var(--brass); stroke-linecap: round; stroke-dasharray: 119.4; transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.timer.urgent .fg { stroke: var(--blood-hi); }
.timer.urgent b { color: var(--bad); animation: pulse .5s infinite; }
.timer.idle { opacity: 0; }

.game-main { flex: 1; display: grid; grid-template-columns: 1fr minmax(15rem, 19rem); gap: 1.2rem; min-height: 0; }
#board { position: relative; display: flex; flex-direction: column; gap: .9rem; min-height: 0; }
.villa { flex: 1; display: grid; gap: .9rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; min-height: 0; }
.villa.r8 { grid-template-columns: repeat(4, 1fr); }

/* Räume als Gemälde mit Goldrahmen */
.room {
  --tone: var(--brass);
  position: relative; border-radius: 10px; min-height: 0; overflow: hidden;
  padding: .9rem 1rem .7rem; display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 28%, transparent), transparent 55%),
    linear-gradient(180deg, #2a2016, #1c160f);
  box-shadow:
    inset 0 0 0 3px #6e4c1c, inset 0 0 0 6px var(--brass), inset 0 0 0 9px #6e4c1c,
    inset 0 0 50px rgba(0, 0, 0, .6), 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform .5s var(--ease-out), filter .5s, box-shadow .4s;
}
.room-head { display: flex; align-items: center; gap: .7rem; padding: .3rem .4rem 0; position: relative; z-index: 1; }
.room-emoji { font-size: 2.4rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.room-name { font-family: var(--font-display); font-size: 1.6rem; color: var(--parch); line-height: 1; }
.room-desc { font-size: .82rem; line-height: 1.3; color: var(--text-dim); margin: .35rem .4rem 0; position: relative; z-index: 1; }
.room-floor { flex: 1; position: relative; min-height: 3rem; }
.room-log { display: none; flex-direction: column; gap: .25rem; pointer-events: none; margin: .4rem .2rem 0; position: relative; z-index: 4; }
.room.show-log .room-desc { display: none; }
.room.show-log .room-log { display: flex; }
.villa.r8 .room-log div { font-size: .75rem; padding: .2rem .5rem; }
.room-log div {
  font-size: .85rem; font-weight: 600; padding: .3rem .6rem; border-radius: 8px; color: var(--ink);
  background: rgba(242, 227, 194, .95); box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  animation: rise .5s var(--ease-out) both;
}
.room-log div.pos { border-left: 5px solid #3c9a52; }
.room-log div.neg { border-left: 5px solid var(--blood); }
.room.closed { filter: grayscale(.85) brightness(.55); }
.room.closed::after {
  content: attr(data-closed); position: absolute; inset: 40% -10% auto; text-align: center; z-index: 5;
  transform: rotate(-8deg); padding: .4rem 0; font-weight: 800; font-size: 1.3rem; letter-spacing: .1em; color: #1b1b1b;
  background: repeating-linear-gradient(45deg, #f2c94c 0 22px, #1b1b1b 22px 44px);
  text-shadow: 0 0 4px #f2c94c, 0 0 8px #f2c94c;
  animation: tape-in .5s var(--ease-bounce) both;
}
.room.hot { box-shadow: inset 0 0 0 3px #6e4c1c, inset 0 0 0 6px var(--brass-hi), inset 0 0 0 9px #6e4c1c, inset 0 0 60px rgba(0, 0, 0, .5), 0 0 40px rgba(243, 207, 122, .55); transform: scale(1.02); }
.room.alarm { animation: shake .5s 3, alarm-flash .35s 6; }
.room.dim { filter: brightness(.55); }
@keyframes alarm-flash { 50% { background: #7a1020; } }
@keyframes tape-in { from { transform: rotate(-8deg) scaleX(0); } to { transform: rotate(-8deg) scaleX(1); } }

.hall {
  height: 5.2rem; border-radius: 10px; position: relative; flex: none;
  background: repeating-linear-gradient(90deg, #3a2a1a 0 60px, #33251a 60px 120px);
  box-shadow: inset 0 0 0 2px rgba(217, 164, 65, .35), inset 0 6px 20px rgba(0, 0, 0, .55);
  display: flex; align-items: center; padding-left: 1rem; color: var(--text-dim); font-family: var(--font-display); font-size: 1.1rem;
}
.hall span { opacity: .55; }

/* Spielfiguren */
#tokens { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.token {
  position: absolute; left: 0; top: 0; width: var(--ts, 3.6rem);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .95s var(--ease-out), opacity .4s;
  will-change: transform;
}
.token .medal { width: var(--ts, 3.6rem); height: var(--ts, 3.6rem); font-size: calc(var(--ts, 3.6rem) * .55); }
.token .tn {
  margin-top: .2rem; font-size: .72rem; font-weight: 700; max-width: calc(var(--ts, 3.6rem) * 1.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: .05rem .4rem; border-radius: 6px; background: rgba(0, 0, 0, .55); color: var(--parch);
}
.token.done .medal::before { content: '✓'; position: absolute; left: -.35em; bottom: -.2em; font-size: .45em; width: 1.4em; height: 1.4em; border-radius: 50%; display: grid; place-items: center; background: #3c9a52; color: white; box-shadow: 0 0 0 2px var(--wall); }
.token.hop .medal { animation: hop .5s var(--ease-bounce); }
.token.spin .medal { animation: spin .7s ease-in-out 2; }
.token.hit .medal { animation: shake .45s 2; }
.token.glow .medal { box-shadow: 0 0 0 3px var(--c), 0 0 30px 8px rgba(243, 207, 122, .8); }
.token.ghostly { opacity: .7; }
.token.ghostly .medal { animation: float 2.4s ease-in-out infinite; }
@keyframes hop { 40% { transform: translateY(-18px) scale(1.1); } }

.floater {
  position: absolute; z-index: 6; font-weight: 800; font-size: 1.5rem; pointer-events: none; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 12px rgba(0, 0, 0, .6);
  animation: float-up 2.6s var(--ease-out) forwards;
}
.floater.pos { color: #9dff9a; }
.floater.neg { color: #ff8c8c; }
.floater.neutral { color: var(--parch); font-size: 1.2rem; }
@keyframes float-up { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -60px) scale(1); opacity: 0; } }

/* Hauptbuch der Erben */
.ledger { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; overflow: hidden; }
#ledger li {
  display: grid; grid-template-columns: 1.4rem auto 1fr auto; align-items: center; gap: .6rem;
  padding: .45rem .7rem; border-radius: 12px; background: rgba(0, 0, 0, .28);
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .18);
  transition: transform .6s var(--ease-out), background .4s;
}
#ledger li.ghost { background: rgba(143, 227, 208, .08); }
#ledger li.done { box-shadow: inset 0 0 0 2px #3c9a52; }
#ledger .rk { font-family: var(--font-display); color: var(--text-dim); text-align: center; }
#ledger .medal { width: 2.4rem; height: 2.4rem; font-size: 1.35rem; }
#ledger .who { min-width: 0; }
#ledger .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#ledger .meta { font-size: .78rem; color: var(--text-dim); display: flex; gap: .6rem; }
#ledger .money { font-size: 1.1rem; }
#ledger .delta { font-size: .8rem; font-weight: 700; display: block; text-align: right; }
#ledger.compact li { padding: .25rem .5rem; gap: .45rem; }
#ledger.compact .medal { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; }
#ledger.compact .meta { display: none; }
#ledger.compact .money { font-size: .95rem; }
.fam-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; }

/* Phasen-Hinweis */
.phase-banner {
  position: fixed; left: 50%; bottom: 7.4rem; transform: translateX(-50%); z-index: 20;
  padding: .9rem 2rem; border-radius: 999px; font-weight: 800; font-size: 1.5rem; color: var(--ink);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass)); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: rise .6s var(--ease-bounce); white-space: nowrap; text-align: center;
}
.phase-banner small { display: block; font-size: .9rem; font-weight: 600; opacity: .75; }

/* Ereignis-Banner (Enthüllung) */
.event-banner { position: fixed; left: 50%; top: 6.5rem; transform: translateX(-50%); z-index: 50; pointer-events: none; width: min(60rem, 90vw); display: flex; justify-content: center; }
.ev-card {
  display: flex; align-items: center; gap: 1.4rem; padding: 1.1rem 1.8rem 1.1rem 1.1rem; border-radius: 16px;
  animation: ev-in .55s var(--ease-bounce) both;
}
.ev-card.out { animation: ev-out .4s ease-in forwards; }
.ev-card .ev-emoji {
  font-size: 3.4rem; width: 5.6rem; height: 7.4rem; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, #fff6df, var(--parch-2)); box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 5px var(--parch), inset 0 0 0 6px var(--brass-dk), 0 8px 20px rgba(0, 0, 0, .4);
  animation: card-flip .7s var(--ease-out) both;
}
.ev-card .ev-name { font-family: var(--font-display); font-size: 1.6rem; color: var(--blood); line-height: 1.1; }
.ev-card .ev-text { font-size: 1.35rem; font-weight: 600; line-height: 1.3; margin-top: .2rem; }
@keyframes ev-in { from { transform: translateY(-40px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ev-out { to { transform: translateY(-30px) scale(.9); opacity: 0; } }
@keyframes card-flip { from { transform: rotateY(90deg); } to { transform: none; } }

/* Effekte */
body.blackout #board { animation: blackout 2.2s steps(1) both; }
@keyframes blackout { 0% { filter: brightness(1); } 10% { filter: brightness(.05); } 18% { filter: brightness(.9); } 26% { filter: brightness(.05); } 85% { filter: brightness(.08); } 100% { filter: brightness(1); } }
body.thunder::before { content: ''; position: fixed; inset: 0; z-index: 60; background: white; pointer-events: none; animation: flash .9s ease-out both; }
@keyframes flash { 0%, 20% { opacity: .9; } 10%, 30% { opacity: 0; } 35% { opacity: .7; } 100% { opacity: 0; } }

/* ---------------- Overlays ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 3rem;
  background: radial-gradient(ellipse at center, rgba(12, 22, 17, .93), rgba(5, 10, 8, .985));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade-in .4s;
}
.ov-inner { width: min(78rem, 94vw); text-align: center; }

/* Intro */
.intro .candles { font-size: 4rem; letter-spacing: 3rem; margin-bottom: 1rem; animation: fade-in 1.5s; }
.intro .candles span { display: inline-block; animation: flicker 1.8s infinite; }
.intro .candles span:nth-child(2) { animation-delay: .5s; }
.intro .candles span:nth-child(3) { animation-delay: 1s; }
.intro h1 { font-size: 6rem; margin: 0; color: var(--parch); animation: rise 1.2s .3s var(--ease-out) both; }
.intro p { font-size: 1.8rem; color: var(--text-dim); max-width: 50rem; margin: 1.4rem auto 0; animation: rise 1s 2.2s var(--ease-out) both; }
.intro p.look { color: var(--brass-hi); font-weight: 700; animation-delay: 4.5s; }
@keyframes flicker { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .75; transform: scale(.96) rotate(-2deg); } 55% { opacity: .9; transform: scale(1.03) rotate(2deg); } }

/* Testamentsklausel – Pergamentrolle mit Siegel */
.scroll-wrap { position: relative; width: min(64rem, 86vw); margin: 0 auto; }
.scroll-rod { height: 1.6rem; border-radius: 999px; position: relative; z-index: 2; background: linear-gradient(180deg, #7a5420, var(--brass-hi) 40%, #7a5420); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.scroll-rod::before, .scroll-rod::after { content: ''; position: absolute; top: -.35rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--brass-hi), var(--brass-dk)); }
.scroll-rod::before { left: -1rem; } .scroll-rod::after { right: -1rem; }
.scroll-paper { margin: -.4rem 1.2rem; padding: 2.6rem 3.4rem 3rem; transform-origin: top; animation: unroll 1.1s .2s var(--ease-out) both; text-align: left; position: relative; }
@keyframes unroll { from { clip-path: inset(0 -20% 100% -20%); } to { clip-path: inset(0 -20% -30% -20%); } }
.scroll-paper .sp-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid rgba(42, 26, 18, .25); padding-bottom: .6rem; margin-bottom: 1.2rem; }
.scroll-paper .sp-head b { font-family: var(--font-display); font-size: 2rem; color: var(--blood); font-weight: 400; }
.scroll-paper .sp-head span { color: var(--ink-soft); font-style: italic; }
.scroll-paper .sp-text { font-size: 2.5rem; line-height: 1.28; font-weight: 500; min-height: 3em; }
.scroll-paper .sp-text .w { opacity: 0; animation: fade-in .25s forwards; }
.scroll-paper .sp-now { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.scroll-paper .sp-now div { font-size: 1.35rem; font-weight: 600; padding: .4rem .8rem; border-radius: 8px; background: rgba(140, 35, 49, .1); border-left: 5px solid var(--blood); animation: rise .5s var(--ease-out) both; }
.scroll-paper .sp-vote { margin-top: 1rem; font-weight: 700; color: var(--blood); }
.scroll-paper .big-seal { position: absolute; right: -1.6rem; bottom: -1.8rem; font-size: 7.5rem; animation: stamp-in .6s var(--ease-bounce) both; }
.scroll-paper .big-seal span { font-size: .38em; }
.scroll-wrap.final .scroll-paper { box-shadow: 0 0 80px rgba(243, 207, 122, .5), 0 18px 50px rgba(0, 0, 0, .5), inset 0 0 40px rgba(120, 70, 20, .25); }
@keyframes stamp-in { 0% { transform: scale(3.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(.92) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); } }

/* Duell */
.ov-duel h1 { font-size: 5rem; margin: 0; color: var(--blood-hi); text-shadow: 0 3px 0 #3d0b14, 0 0 40px rgba(184, 56, 74, .5); animation: pop-in .6s var(--ease-bounce); }
.ov-duel .game-name { font-family: var(--font-display); font-size: 2.6rem; color: var(--brass-hi); margin: .6rem 0 .2rem; }
.ov-duel .game-desc { font-size: 1.4rem; color: var(--text-dim); margin: 0 0 .4rem; }
.ov-duel .reverse { display: inline-block; margin-top: .4rem; padding: .3rem 1rem; border-radius: 999px; background: var(--blood); font-weight: 700; transform: rotate(180deg); animation: flipback 1s 1s var(--ease-bounce) forwards; }
@keyframes flipback { to { transform: rotate(0); } }
.ov-duel .question { font-size: 2rem; font-weight: 700; margin: 1rem auto; max-width: 50rem; padding: 1rem 1.5rem; }
.duel-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 2rem; }
.duel-group { padding: 1.2rem 1.6rem; border-radius: 18px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px rgba(217, 164, 65, .3); }
.duel-group h3 { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.duel-row { display: flex; align-items: flex-start; justify-content: center; gap: 1.2rem; }
.duel-row .vs { font-family: var(--font-display); font-size: 2.2rem; color: var(--blood-hi); align-self: center; }
.fighter { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 8rem; animation: rise .5s var(--ease-bounce) both; position: relative; }
.fighter .medal { width: 5.4rem; height: 5.4rem; font-size: 3rem; }
.fighter .nm { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fighter .sc { font-size: 1.2rem; font-weight: 800; color: var(--brass-hi); min-height: 1.4em; }
.fighter.ready .medal::before { content: '✓'; position: absolute; left: -.2em; bottom: -.1em; font-size: .4em; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: #3c9a52; color: white; }
.fighter.win .medal { box-shadow: 0 0 0 4px var(--brass-hi), 0 0 40px 10px rgba(243, 207, 122, .7); animation: pulse 1s infinite; }
.fighter.win::before { content: '👑'; position: absolute; top: -2.2rem; font-size: 2.4rem; animation: stamp-in .6s var(--ease-bounce) both; }
.fighter.lose { opacity: .55; filter: grayscale(.6); }
.big-count { font-family: var(--font-display); font-size: 6rem; color: var(--brass-hi); margin-top: 1.5rem; animation: pulse 1s infinite; }
.answer-pill { display: inline-block; margin-top: 1.5rem; padding: .6rem 1.6rem; border-radius: 999px; font-size: 1.6rem; font-weight: 800; color: var(--ink); background: var(--parch); animation: pop-in .5s var(--ease-bounce); }

/* Abstimmung */
.ov-vote .vq { font-family: var(--font-display); font-size: 4rem; line-height: 1.05; color: var(--parch); margin: .4rem 0; }
.ov-vote .vsub { font-size: 1.4rem; color: var(--text-dim); }
.vote-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 2rem; }
.vote-grid .fighter { width: 7rem; }
.vote-grid .fighter .medal { width: 4.4rem; height: 4.4rem; font-size: 2.4rem; }
.vote-grid .votes { display: flex; gap: .2rem; flex-wrap: wrap; justify-content: center; min-height: 1.4rem; }
.vote-grid .votes i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--brass-hi); animation: pop-in .4s var(--ease-bounce) both; }
.spotlight { margin-top: 1.4rem; }
.spotlight .medal { width: 9rem; height: 9rem; font-size: 5rem; margin: 0 auto; animation: pop-in .8s var(--ease-bounce); }
.spotlight .nm { font-family: var(--font-display); font-size: 3rem; margin-top: 1rem; }
.spotlight .amt { font-size: 2.6rem; font-weight: 800; }

/* Finale */
.ov-finale { width: min(80rem, 94vw); }
.ov-finale .f-title { font-size: 4.6rem; margin: 0 0 1.4rem; color: var(--parch); text-shadow: 0 3px 0 var(--brass-dk); }
.f-stage { min-height: 28rem; display: grid; place-items: center; }
.f-step { animation: rise .7s var(--ease-out) both; width: 100%; }
.f-step h2 { font-family: var(--font-display); font-weight: 400; font-size: 2.6rem; margin: 0 0 1.2rem; }
.f-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.f-item { width: 11rem; padding: 1rem; border-radius: 14px; color: var(--ink); animation: card-flip .7s var(--ease-out) both; }
.f-item .e { font-size: 3rem; }
.f-item .n { font-weight: 700; font-size: 1rem; margin: .3rem 0; min-height: 2.4em; }
.f-item .v { font-size: 1.6rem; font-weight: 800; }
.f-item.cursed { background: linear-gradient(180deg, #3b1a26, #24101a); color: var(--parch); box-shadow: 0 0 30px rgba(184, 56, 74, .6), inset 0 0 0 2px var(--blood-hi); }
.f-item.cursed .v { color: var(--bad); }
.f-item .curse-tag { font-size: .85rem; font-weight: 800; color: var(--bad); text-transform: none; }
.f-total { margin-top: 1.4rem; font-size: 2rem; font-weight: 800; }
.f-who { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.f-who .medal { width: 4rem; height: 4rem; font-size: 2.2rem; }
.f-who b { font-size: 2rem; }
.f-reveal .medal { width: 10rem; height: 10rem; font-size: 5.6rem; margin: 1rem auto; animation: stamp-in .8s var(--ease-bounce) both; }
.f-reveal .role-name { font-family: var(--font-display); font-size: 3.2rem; }
.f-verdict { font-size: 2.2rem; font-weight: 800; margin-top: 1rem; animation: pop-in .6s 1.4s var(--ease-bounce) both; }
.f-verdict.good { color: var(--good); } .f-verdict.bad { color: var(--bad); }
.f-sub { font-size: 1.3rem; color: var(--text-dim); margin-top: .8rem; animation: fade-in .6s 2s both; }
.f-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.f-roles .fighter { width: 8.5rem; }
.f-roles .role { font-size: .9rem; color: var(--brass-hi); font-weight: 700; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.2rem; margin-top: 1rem; }
.podium .pl { display: flex; flex-direction: column; align-items: center; width: 13rem; }
.podium .pl .medal { width: 6rem; height: 6rem; font-size: 3.4rem; margin-bottom: .6rem; }
.podium .pl .nm { font-weight: 800; font-size: 1.3rem; }
.podium .pl .money { font-size: 1.4rem; margin: .2rem 0 .6rem; }
.podium .block { width: 100%; border-radius: 10px 10px 0 0; display: grid; place-items: start center; padding-top: .6rem; font-family: var(--font-display); font-size: 3rem; color: var(--ink); background: linear-gradient(180deg, var(--brass-hi), var(--brass-dk)); animation: grow 1s var(--ease-out) both; transform-origin: bottom; }
.podium .p1 .block { height: 13rem; } .podium .p2 .block { height: 9rem; background: linear-gradient(180deg, #e7e2d6, #8f8b82); } .podium .p3 .block { height: 6.5rem; background: linear-gradient(180deg, #e0a36a, #8a5428); }
.podium .p1 { order: 2; } .podium .p2 { order: 1; } .podium .p3 { order: 3; }
.podium .p1 .medal { width: 8rem; height: 8rem; font-size: 4.6rem; }
.podium .p1::before { content: '👑'; font-size: 3rem; animation: stamp-in .8s 1.2s var(--ease-bounce) both; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rest { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-top: 1.4rem; color: var(--text-dim); }
.winner-line { font-family: var(--font-display); font-size: 3.4rem; color: var(--brass-hi); margin: 0 0 1.2rem; animation: pop-in .8s .6s var(--ease-bounce) both; }
.f-actions { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; }
.fam-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.fam-card { padding: 1rem 1.4rem; border-radius: 14px; background: rgba(0, 0, 0, .35); min-width: 14rem; }
.fam-card.best { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 30px rgba(243, 207, 122, .5); }
.fam-card .ms { font-size: 1.8rem; letter-spacing: .2rem; }

.conn-lost { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--blood); animation: pulse 1s infinite; font-size: 1.4rem; }

/* ================= Neu: Flüstern, Fotos ================= */
.whispers { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 45; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; max-width: 32rem; }
.whisper {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .5rem; border-radius: 999px;
  background: rgba(10, 18, 14, .88); box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .35), 0 8px 20px rgba(0, 0, 0, .4);
  animation: whisper-in .45s var(--ease-bounce) both; font-size: .95rem;
}
.whisper.out { animation: whisper-out .45s ease-in forwards; }
.whisper .wdots { font-size: 1.1rem; animation: pulse .8s infinite; }
.whisper .wfam { font-size: 1.4rem; }
.whisper .wtext { color: var(--text-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medal.wsm { width: 2rem; height: 2rem; font-size: 1.1rem; box-shadow: 0 0 0 2px var(--c); display: inline-grid; }
.fam-card .ms { display: flex; gap: .3rem; justify-content: center; margin: .4rem 0; letter-spacing: 0; }
@keyframes whisper-in { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes whisper-out { to { transform: translateX(-30px); opacity: 0; } }
.spotlight .medal { margin-bottom: .6rem; }
.clown-line { color: var(--brass-hi) !important; font-weight: 700; margin-top: .6rem; }
.token .medal.has-photo { background: #2a2016; }
.heir-list .medal img, .token .medal img { border-radius: 50%; }

/* ================= Sitzung beenden ================= */
.tool.end { font-size: .85rem; font-weight: 700; color: var(--bad); }
.tool.end span { margin-left: .2rem; }
.end-confirm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5, 10, 8, .8); animation: fade-in .25s; }
.end-box { width: min(34rem, 90vw); padding: 2rem 2.2rem; text-align: center; animation: pop-in .35s var(--ease-bounce); }
.end-ico { font-size: 3rem; }
.end-box p { font-size: 1.35rem; font-weight: 600; line-height: 1.4; margin: .8rem 0 1.6rem; }
.end-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn.ghosty.dark { color: var(--ink); box-shadow: inset 0 0 0 2px rgba(42, 26, 18, .35); }
.ended { display: grid; place-items: center; padding: 2rem; overflow: auto; }
.ended-inner { text-align: center; width: min(48rem, 92vw); animation: rise .8s var(--ease-out); }
.ended-seal { font-size: 6rem; margin: 0 auto 1rem; animation: stamp-in .9s .2s var(--ease-bounce) both; }
.ended h1 { font-size: 4rem; margin: 0; color: var(--parch); text-shadow: 0 2px 0 var(--brass-dk); }
.ended-sub { color: var(--text-dim); font-size: 1.3rem; margin: .6rem 0 1.6rem; }
.ended-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .6rem; text-align: left; }
.ended-list li { display: grid; grid-template-columns: 1.6rem auto 1fr auto; align-items: center; gap: .7rem; padding: .5rem .8rem; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .2); animation: rise .5s var(--ease-out) both; }
.ended-list .rk { font-family: var(--font-display); color: var(--text-dim); text-align: center; }
.ended-list .medal { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; }
.ended-list .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ended-list li:first-child { box-shadow: inset 0 0 0 2px var(--brass-hi), 0 0 24px rgba(243, 207, 122, .35); }

/* ================= Familien ================= */
.fam-settings { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .2); }
.fs-label { font-weight: 700; }
.seg { display: inline-flex; background: rgba(0, 0, 0, .35); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-dim); padding: .45em 1em; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.seg button.on { background: var(--parch); color: var(--ink); }
.fam-hint { flex-basis: 100%; margin: 0; color: var(--text-dim); font-size: .85rem; }
.fam-board { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .6rem; }
.fam-board:empty { display: none; }
.fam-col { flex: 1 1 9rem; min-width: 9rem; padding: .5rem .6rem; border-radius: 12px; background: color-mix(in srgb, var(--fc) 18%, transparent); box-shadow: inset 0 0 0 2px var(--fc); display: flex; flex-direction: column; align-items: center; gap: .2rem; animation: pop-in .4s var(--ease-bounce); }
.fam-crest { width: 2.4rem; height: 2.4rem; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; display: grid; place-items: center; font-size: 1.4rem; background: radial-gradient(circle at 40% 30%, #fff8e6, var(--parch-2)); box-shadow: 0 0 0 3px var(--fc, var(--brass)), 0 4px 10px rgba(0, 0, 0, .4); }
.fam-crest.big { width: 6rem; height: 6rem; font-size: 3.4rem; box-shadow: 0 0 0 5px var(--fc), 0 0 0 8px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .5); }
.fam-name { font-family: var(--font-display); font-size: 1.05rem; text-align: center; line-height: 1.1; }
.fam-members { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; min-height: 2.1rem; align-items: center; }
.fam-members small { color: var(--text-dim); font-style: italic; }
.fam-q { font-size: 1.5rem; }
.heir-list li.fam-pickable { cursor: pointer; }
.heir-list li.fam-pickable:hover { box-shadow: inset 0 0 0 2px var(--brass-hi); }
.heir-list li[style*="--fc"] { box-shadow: inset 0 0 0 2px var(--fc); background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 22%, transparent), rgba(242, 227, 194, .02)); }
.fam-badge { position: absolute; top: .3rem; left: .4rem; font-size: 1.2rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.fam-tag { font-style: normal; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: .3rem; border-radius: 50%; font-size: .8rem; background: color-mix(in srgb, var(--fc) 35%, transparent); box-shadow: 0 0 0 1.5px var(--fc); vertical-align: middle; }
.fam-intro h1 { font-size: 4.6rem; margin: 0 0 2rem; color: var(--parch); text-shadow: 0 3px 0 var(--brass-dk); animation: pop-in .6s var(--ease-bounce); }
.fam-intro-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.fam-intro-card { width: 15rem; padding: 1.4rem 1rem; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 30%, #1c160f), #1c160f); box-shadow: inset 0 0 0 3px var(--fc), 0 14px 30px rgba(0, 0, 0, .5);
  animation: fam-drop .7s var(--ease-bounce) both; }
.fam-intro-card .fam-name { font-size: 1.6rem; }
.fam-motto { color: var(--text-dim); font-style: italic; text-align: center; min-height: 2.6em; }
.fam-intro-card .medal { width: 3.2rem; height: 3.2rem; font-size: 1.8rem; }
.fam-card .fam-crest { margin: 0 auto .4rem; }
@keyframes fam-drop { from { transform: translateY(-60px) rotate(-6deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= Update 4 ================= */
.fx-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }

/* Gesucht-Plakat */
.token.wanted .medal::after { content: '🎯'; position: absolute; right: -.45em; top: -.45em; font-size: .5em; animation: pulse 1s infinite; }
.overlay.ov-wanted { background: rgba(5, 10, 8, .72); }
.wanted-poster { position: relative; width: min(30rem, 80vw); padding: 2.2rem 2rem 1.8rem; text-align: center; color: var(--ink);
  transform: rotate(-3deg); animation: poster-in .9s var(--ease-bounce) both; box-shadow: 0 30px 70px rgba(0, 0, 0, .7), inset 0 0 60px rgba(120, 80, 30, .35); }
@keyframes poster-in { 0% { transform: translateY(-120vh) rotate(-25deg); } 70% { transform: translateY(10px) rotate(2deg); } 100% { transform: rotate(-3deg); } }
.wp-title { font-family: var(--font-display); font-size: 5.2rem; line-height: 1; letter-spacing: .06em; color: var(--blood); text-shadow: 2px 2px 0 rgba(0, 0, 0, .15); }
.wp-photo .medal { width: 13rem; height: 13rem; font-size: 7rem; margin: 1.2rem auto; border-radius: 6px; box-shadow: 0 0 0 6px var(--ink), 0 10px 20px rgba(0, 0, 0, .35); filter: sepia(.55) contrast(1.15); }
.wp-photo .medal img { border-radius: 4px; }
.wp-name { font-family: var(--font-display); font-size: 2.8rem; }
.wp-reward { font-size: 1.8rem; font-weight: 800; margin-top: .4rem; }
.wp-reward .money { color: var(--blood); }
.wp-sub { font-size: 1.15rem; margin-top: .6rem; color: var(--ink-soft); }
.wp-nail { position: absolute; top: .8rem; width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #555); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.wp-nail.l { left: 1rem; } .wp-nail.r { right: 1rem; }

/* Wetten & Sabotage */
.bet-board { margin: 1.4rem auto 0; max-width: 60rem; padding: .8rem 1rem; border-radius: 16px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .3); }
.bb-title { font-weight: 800; color: var(--brass-hi); font-size: 1.1rem; margin-bottom: .5rem; }
.bb-list { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; min-height: 2.4rem; }
.bb-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .3rem; border-radius: 999px; background: rgba(242, 227, 194, .1); font-size: 1rem; animation: pop-in .4s var(--ease-bounce) both; }
.bb-chip b { color: var(--brass-hi); }
.bet-results { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.2rem; }
.bet-res { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem .35rem .35rem; border-radius: 999px; font-weight: 700; background: rgba(0, 0, 0, .35); animation: pop-in .5s var(--ease-bounce) both; }
.bet-res.pos { box-shadow: inset 0 0 0 2px #3c9a52; } .bet-res.neg { box-shadow: inset 0 0 0 2px var(--blood-hi); }
.sab-fly { position: fixed; font-size: 3.6rem; z-index: 80; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.fighter.sab-quake .medal { animation: shake .15s linear 10; }
.fighter.sab-fog .medal { filter: blur(6px) grayscale(.6); transition: filter .3s; }
.fighter.sab-flip .medal { transform: rotate(180deg); transition: transform .4s var(--ease-bounce); }
.fighter.sab-tomato .medal { animation: shake .3s 2; }
.splat-tv { position: absolute; top: 0; left: 50%; width: 6.5rem; height: 6.5rem; margin-left: -3.25rem; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 50% 50%, #e3242b 0 30%, transparent 31%), radial-gradient(circle at 20% 30%, #c81d25 0 11%, transparent 12%), radial-gradient(circle at 80% 22%, #d82029 0 9%, transparent 10%), radial-gradient(circle at 76% 80%, #c81d25 0 13%, transparent 14%), radial-gradient(circle at 24% 78%, #e3242b 0 8%, transparent 9%);
  animation: splat-tv 2.6s ease-in forwards; }
@keyframes splat-tv { 0% { transform: scale(2.4); opacity: 0; } 10% { transform: scale(.9); opacity: .95; } 70% { transform: translateY(14px); opacity: .9; } 100% { transform: translateY(40px) scaleY(1.3); opacity: 0; } }
.sab-by { position: absolute; top: -1.6rem; right: -1.4rem; display: flex; align-items: center; gap: .2rem; font-size: 1.4rem; animation: pop-in .3s var(--ease-bounce) both; }

/* Verträge */
.deal-feed { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 46; display: flex; flex-direction: column; gap: .7rem; align-items: flex-end; pointer-events: none; }
.deal-card { position: relative; padding: .9rem 1.3rem; border-radius: 14px; color: var(--ink); max-width: 30rem; text-align: center; animation: deal-in .6s var(--ease-bounce) both; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.deal-card.out { animation: deal-out .45s ease-in forwards; }
@keyframes deal-in { from { transform: translateX(120%) rotate(8deg); } to { transform: none; } }
@keyframes deal-out { to { transform: translateX(120%); opacity: 0; } }
.dc-ms { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.dc-hand { font-size: 2.4rem; animation: pulse .8s 3; }
.dc-text { font-weight: 700; font-size: 1.1rem; margin-top: .4rem; }
.dc-stamp { position: absolute; right: -.8rem; top: -1rem; font-size: 2.4rem; animation: stamp-in .5s .6s var(--ease-bounce) both; }
.deal-card.snake { background: linear-gradient(160deg, #1d3b16, #0d2009); color: var(--parch); box-shadow: 0 0 0 3px #5fbf3f, 0 0 50px rgba(95, 191, 63, .45), 0 14px 30px rgba(0, 0, 0, .6); padding: 1.2rem 1.6rem; }
.deal-card.snake .medal { width: 6rem; height: 6rem; font-size: 3.4rem; }
.dc-snake { position: absolute; left: -1.6rem; top: -1.6rem; font-size: 4rem; animation: snake-wiggle .6s ease-in-out infinite alternate; }
@keyframes snake-wiggle { from { transform: rotate(-12deg) translateX(-4px); } to { transform: rotate(12deg) translateX(4px); } }
.dc-big { font-family: var(--font-display); font-size: 2.8rem; color: #8ff07a; letter-spacing: .1em; animation: stamp-in .6s .3s var(--ease-bounce) both; }
.dc-promise { font-style: italic; color: var(--text-dim); margin-top: .3rem; }

/* Selfie-Duell */
.selfie-cams { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 2rem; }
.fighter.cam .cam-ico { position: absolute; top: -.6rem; right: .6rem; font-size: 1.8rem; animation: float 1.6s ease-in-out infinite; }
.fighter.cam.ready .cam-ico { animation: none; content: ''; opacity: 0; }
.selfie-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 1.6rem; }
.fighter.sf { width: auto; }
.selfie-frame { width: 15rem; height: 15rem; padding: .7rem .7rem 0; background: #f8f3e6; box-shadow: 0 16px 34px rgba(0, 0, 0, .6); transform: rotate(var(--tilt, 0deg)); }
.selfie-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fighter.sf .nm { font-size: 1.4rem; margin-top: .4rem; }
.selfie-grid.small .selfie-frame { width: 11rem; height: 11rem; }
.fighter.sf.win .selfie-frame { box-shadow: 0 0 0 5px var(--brass-hi), 0 0 60px 14px rgba(243, 207, 122, .6); animation: pulse 1s infinite; }
.fighter.sf.win::before { top: -2.8rem; font-size: 3rem; }

/* Plot-Twist */
.ov-twist-bg { background: radial-gradient(ellipse at center, rgba(60, 12, 24, .93), rgba(8, 3, 6, .985)); }
.ov-twist-bg.siren { animation: fade-in .4s, siren-bg 1s linear infinite; }
@keyframes siren-bg { 0%, 49% { box-shadow: inset 0 0 160px 40px rgba(220, 30, 40, .55); } 50%, 100% { box-shadow: inset 0 0 160px 40px rgba(40, 80, 230, .55); } }
.tw-stamp { display: inline-block; font-family: var(--font-display); font-size: 2.6rem; padding: .3rem 1.6rem; color: var(--ink); letter-spacing: .08em;
  background: linear-gradient(90deg, var(--brass), var(--brass-hi), var(--brass)); border-radius: 8px; transform: rotate(-4deg); animation: stamp-in .7s var(--ease-out) both; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.tw-stamp.big { font-size: 4.4rem; animation: stamp-in .7s var(--ease-out) both, tw-glitch 2.4s 1s steps(1) infinite; }
@keyframes tw-glitch { 0%, 92% { transform: rotate(-4deg); } 93% { transform: rotate(-4deg) translate(6px, -3px) skewX(10deg); } 96% { transform: rotate(-4deg) translate(-5px, 2px); } }
.tw-emoji { font-size: 9rem; margin-top: 1.2rem; line-height: 1; animation: tw-emoji-in 1s .4s var(--ease-bounce) both; }
@keyframes tw-emoji-in { from { transform: scale(0) rotate(-200deg); } to { transform: none; } }
.ov-twist.result .tw-emoji { font-size: 6rem; }
.tw-title { font-size: 5rem; margin: .6rem 0 0; color: var(--parch); animation: rise .8s .7s var(--ease-out) both; }
.tw-desc { font-size: 1.7rem; color: var(--text-dim); max-width: 56rem; margin: 1rem auto 0; animation: rise .8s 1.1s var(--ease-out) both; }
.ov-twist .look { font-size: 1.6rem; color: var(--brass-hi); font-weight: 700; margin-top: 1.4rem; animation: pulse 1.2s infinite; }
.tw-raid { font-size: 2rem; font-weight: 800; color: #ff8c8c; margin-top: 1rem; }
.tw-lines { display: flex; flex-direction: column; gap: .6rem; align-items: center; margin-top: 1.6rem; }
.tw-lines div { display: flex; align-items: center; gap: .6rem; font-size: 1.6rem; font-weight: 700; padding: .5rem 1.2rem; border-radius: 12px; background: rgba(0, 0, 0, .35); animation: rise .5s var(--ease-out) both; }
.tw-lines div.pos { box-shadow: inset 4px 0 0 #3c9a52; } .tw-lines div.neg { box-shadow: inset 4px 0 0 var(--blood-hi); }
.tw-taps { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.2rem; }
.tw-tap { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem .3rem .4rem; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: 1.2rem; animation: pop-in .4s var(--ease-bounce) both; }
.tw-tap.top { box-shadow: inset 0 0 0 2px var(--brass-hi); font-size: 1.4rem; }
.tw-dig { font-size: 5rem; animation: dig 0.5s ease-in-out infinite alternate; transform-origin: 70% 80%; }
@keyframes dig { from { transform: rotate(-25deg); } to { transform: rotate(20deg) translateY(10px); } }
.tw-rain { position: fixed; top: -12vh; animation: tw-rain 3.4s ease-in both; }
.tw-rain.vultures, .tw-rain.cousin_america, .tw-rain.tax_raid { top: auto; bottom: 30vh; animation-name: tw-fly; }
@keyframes tw-rain { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(125vh) rotate(540deg); opacity: .9; } }
@keyframes tw-fly { from { transform: translateX(-110vw) translateY(0); } 50% { transform: translateX(0) translateY(-20vh); } to { transform: translateX(110vw) translateY(10vh); } }
body.quake #scr-game, body.quake #overlay .ov-inner { animation: shake .12s linear 20; }

/* Auktion */
.ov-auction-bg { background: radial-gradient(ellipse at 50% 30%, rgba(80, 52, 14, .9), rgba(8, 6, 3, .985)); }
.auc-title { font-family: var(--font-display); font-size: 3.6rem; color: var(--brass-hi); animation: rise .6s var(--ease-out) both; }
.auc-title span { display: inline-block; animation: gavel-swing 1.4s ease-in-out infinite; transform-origin: 80% 80%; }
@keyframes gavel-swing { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-40deg); } 80% { transform: rotate(10deg); } }
.auc-stage { position: relative; height: 15rem; margin: 1rem auto 0; width: 20rem; }
.auc-spot { position: absolute; left: 50%; top: -4rem; width: 22rem; height: 20rem; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(255, 240, 190, .35), transparent 65%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: fade-in 1s; }
.auc-item { position: absolute; left: 50%; top: 2rem; transform: translateX(-50%); font-size: 8rem; filter: drop-shadow(0 0 30px rgba(243, 207, 122, .7)); animation: pop-in .8s .3s var(--ease-bounce) both, float 3s 1.2s ease-in-out infinite; }
.auc-pedestal { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 12rem; height: 2.6rem; border-radius: 50% / 40%; background: linear-gradient(180deg, #6b4a1c, #3a2710); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.auc-name { font-family: var(--font-display); font-size: 2.8rem; color: var(--parch); }
.auc-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.auc-item.small { position: static; transform: none; font-size: 4.4rem; animation: none; }
.auc-bids { display: flex; flex-direction: column-reverse; gap: .5rem; align-items: center; margin: 1.4rem auto 0; min-height: 4rem; }
.auc-bid { display: flex; align-items: center; gap: .7rem; padding: .4rem 1.2rem .4rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .4); font-size: 1.4rem; font-weight: 700; animation: rise .4s var(--ease-bounce) both; }
.auc-bid.top { box-shadow: inset 0 0 0 2px var(--brass-hi); }
.auc-sold { margin-top: 1.6rem; animation: pop-in .6s var(--ease-bounce) both; }
.auc-sold .medal { width: 7rem; height: 7rem; font-size: 4rem; margin: 0 auto; }
.sold-stamp { display: inline-block; margin-top: 1rem; font-family: var(--font-display); font-size: 3rem; color: var(--blood-hi); border: 6px solid var(--blood-hi); padding: .3rem 1.6rem; border-radius: 10px; transform: rotate(-6deg); animation: stamp-in .6s var(--ease-out) both; background: rgba(242, 227, 194, .92); }
.sold-stamp.unsold { color: var(--ink-soft); border-color: var(--ink-soft); }

/* Otto-Awards */
.awards-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 1.4rem; }
.award-card { width: 14rem; padding: 1rem .8rem 1.1rem; border-radius: 18px; background: linear-gradient(170deg, rgba(243, 207, 122, .18), rgba(0, 0, 0, .35)); box-shadow: inset 0 0 0 2px rgba(243, 207, 122, .45), 0 14px 30px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; align-items: center; gap: .35rem; animation: award-in .8s var(--ease-bounce) both; }
@keyframes award-in { from { transform: translateY(40px) rotateY(90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.aw-emoji { font-size: 3.2rem; filter: drop-shadow(0 0 14px rgba(243, 207, 122, .7)); }
.aw-title { font-family: var(--font-display); font-size: 1.45rem; color: var(--brass-hi); line-height: 1.1; }
.award-card .medal { width: 4.6rem; height: 4.6rem; font-size: 2.6rem; margin: .3rem 0; }
.aw-name { font-weight: 800; font-size: 1.15rem; }
.aw-desc { color: var(--text-dim); font-size: .95rem; }
.bb-empty { color: var(--text-dim); font-size: 1rem; align-self: center; }