/* 🎭 LELZ LIE – Villa-Noir: immer dunkel, Violett & Gold */
.lie-ph, .lie-tv { --bg: #0b0a10; --card: #17151f; --text: #f5f5f7; --text-2: #a5a1b5; --text-3: #6e6a7c; --sep: rgba(255,255,255,.08); --fill: rgba(150,140,190,.16); --ink: #fff; --paper: #000; --shadow: 0 0 0 1px rgba(255,255,255,.06); --lie: #bf5af2; --gold: #e8c26a; color-scheme: dark; }
.lie-ph { background: radial-gradient(120% 60% at 50% 0%, #2a1840 0%, #0b0a10 60%) fixed; color: var(--text); transition: background 1s; }
.lie-ph.lie-night { background: radial-gradient(120% 60% at 50% 0%, #0f1a33 0%, #05060b 60%) fixed; }
.lie-ph .ph-top { background: rgba(11,10,16,.7); }
/* Lobby */
.lie-hero { text-align: center; padding: 18px 6px 6px; } .lie-hero h1 { margin: 6px 0 8px; font-size: 40px; letter-spacing: .14em; font-weight: 900; background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lie-hero p { color: var(--text-2); margin: 0 auto; max-width: 330px; } .lie-hero b { color: var(--gold); }
.lie-logo { font-size: 64px; animation: lieF 3.4s ease-in-out infinite; } @keyframes lieF { 50% { transform: translateY(-8px) rotate(4deg); } }
.lie-h { margin: 18px 2px 8px; font-size: 15px; color: var(--gold); letter-spacing: .02em; }
.lie-togs { display: grid; gap: 8px; margin-bottom: 14px; }
.lie-tog { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 10px; align-items: center; width: 100%; border: 0; text-align: left; padding: 11px 14px; border-radius: 16px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--shadow); }
.lie-tog span { font-weight: 700; } .lie-tog small { grid-row: 2; color: var(--text-2); font-size: 12px; }
.lie-tog i { grid-row: 1 / 3; grid-column: 2; width: 46px; height: 28px; border-radius: 99px; background: rgba(255,255,255,.15); position: relative; } .lie-tog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s var(--spring); }
.lie-tog.on i { background: var(--lie); } .lie-tog.on i::after { transform: translateX(18px); }
.lie-rules { display: grid; gap: 10px; margin: 18px 0 10px; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); } .lie-rules > b { color: var(--gold); }
.lie-rules span { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); line-height: 1.35; } .lie-rules i { font-style: normal; font-size: 20px; } .lie-rules em { font-style: normal; } .lie-rules em b { color: var(--text); }
/* Kopf */
.lie-top { display: grid; grid-template-columns: 1fr auto; margin: 4px 0 10px; } .lie-top small { color: var(--text-2); font-weight: 600; } .lie-top b { grid-row: 2; font-size: 25px; letter-spacing: -.01em; }
.lie-time { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--gold); }
/* Karte */
.lie-card { position: relative; height: 330px; margin: 6px 0 14px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; cursor: pointer; perspective: 1000px; }
.lie-card > div { position: absolute; inset: 0; border-radius: 28px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 22px; backface-visibility: hidden; transition: transform .4s var(--spring); }
.lc-back { background: linear-gradient(145deg, #2b2140, #120e1c); box-shadow: inset 0 0 0 1.5px rgba(232,194,106,.35), 0 18px 40px rgba(0,0,0,.5); } .lc-back span { font-size: 60px; } .lc-back b { font-size: 22px; margin-top: 8px; color: var(--gold); } .lc-back small { color: var(--text-2); margin-top: 4px; }
.lc-front { transform: rotateY(180deg); background: linear-gradient(145deg, #f7f1e3, #d9c9a3); color: #1c1610; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.lie-card.show .lc-back { transform: rotateY(-180deg); } .lie-card.show .lc-front { transform: rotateY(0); }
.lie-card.verraeter .lc-front { background: linear-gradient(145deg, #5b0f1f, #1a0509); color: #fff; } .lie-card.detektiv .lc-front { background: linear-gradient(145deg, #dbe8ff, #9db8e8); } .lie-card.schakal .lc-front, .lie-card.komplize .lc-front { background: linear-gradient(145deg, #ff9f0a, #8a3b00); color: #fff; } .lie-card.arzt .lc-front { background: linear-gradient(145deg, #e3fbea, #a6e3bb); }
.lc-ic { font-size: 62px; line-height: 1; } .lc-k { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .6; } .lc-front h2 { margin: 2px 0 8px; font-size: 38px; letter-spacing: -.02em; } .lc-sub { margin: 4px 0 0; font-size: 14px; opacity: .85; max-width: 290px; }
/* Nacht */
.lie-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.lie-rooms button { display: grid; justify-items: center; gap: 4px; padding: 18px 8px; border: 0; border-radius: 20px; background: linear-gradient(160deg, #1b2440, #0f1426); color: #fff; font: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); cursor: pointer; transition: transform .15s var(--spring), box-shadow .2s; }
.lie-rooms span { font-size: 34px; } .lie-rooms b { font-size: 15px; } .lie-rooms button.on { box-shadow: inset 0 0 0 3px var(--gold), 0 0 24px rgba(232,194,106,.35); transform: scale(1.03); } .lie-rooms button:active { transform: scale(.95); }
.lie-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; } .lie-pick.big { grid-template-columns: repeat(2, 1fr); }
.lie-pick button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--card); color: var(--text); font: inherit; box-shadow: var(--shadow); cursor: pointer; font-size: 26px; }
.lie-pick b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lie-pick small { font-size: 12px; color: var(--text-2); } .lie-pick i { font-style: normal; font-size: 11px; background: rgba(255,55,95,.3); padding: 1px 6px; border-radius: 99px; }
.lie-pick button.on { box-shadow: inset 0 0 0 3px var(--lie), 0 0 20px rgba(191,90,242,.35); } .lie-pick button:disabled { opacity: .35; }
.lie-mates { margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,55,95,.14); color: #ff8aa0; font-size: 14px; font-weight: 600; }
.lie-fx { margin: 6px 0 8px; padding: 10px 12px; border-radius: 14px; background: rgba(232,194,106,.12); color: var(--gold); font-size: 13px; font-weight: 600; text-align: center; }
.lie-ghost { min-height: 60vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; } .lie-ghost div { font-size: 70px; animation: lieF 3s ease-in-out infinite; } .lie-ghost h2 { margin: 0; } .lie-ghost p { color: var(--text-2); margin: 0; }
.lie-moon { font-size: 80px; text-align: center; margin-top: 30vh; }
/* Morgen / Log */
.lie-dawn { text-align: center; padding: 14px 4px 4px; } .lie-dawn h1 { margin: 10px 0 6px; font-size: 26px; } .lie-sun { font-size: 64px; animation: lieF 3s ease-in-out infinite; } .lie-out .av { box-shadow: 0 0 0 4px var(--lie), 0 0 40px rgba(191,90,242,.5); }
.lie-ev { margin: 10px auto 4px; padding: 14px 16px; border-radius: 18px; background: var(--card); font-size: 17px; font-weight: 700; max-width: 360px; box-shadow: var(--shadow); } .lie-ev.dead { background: rgba(255,55,95,.15); color: #ff8aa0; } .lie-ev.saved, .lie-ev.good { background: rgba(48,209,88,.14); color: #5ee08a; }
.lie-log { display: grid; gap: 8px; } .lie-log > div { padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); border-left: 3px solid var(--text-3); }
.lie-log small { color: var(--text-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .lie-log p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; }
.lie-log .room { border-color: var(--gold); } .lie-log .det { border-color: #64d2ff; } .lie-log .traitor { border-color: #ff375f; } .lie-log .dead { border-color: #ff375f; background: rgba(255,55,95,.08); } .lie-log .good, .lie-log .saved { border-color: #30d158; } .lie-log .strom { border-color: #ff9f0a; } .lie-log .item { border-color: var(--lie); }
.lie-log.pub > div { padding: 9px 12px; } .lie-log.pub p { font-size: 14px; color: var(--text-2); margin: 0; }
/* Tag */
.lie-tabs { position: sticky; top: 54px; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 16px; background: rgba(23,21,31,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.lie-tabs button { display: grid; justify-items: center; gap: 1px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 11px; font-weight: 700; padding: 6px 2px; border-radius: 12px; cursor: pointer; } .lie-tabs span { font-size: 19px; } .lie-tabs button.on { background: rgba(191,90,242,.22); color: #fff; }
.lie-dock { position: sticky; bottom: 0; padding: 12px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 35%); margin-top: 14px; }
.lie-prog { margin: 0 0 12px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); } .lie-prog > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; } .lie-prog span { font-weight: 900; color: var(--gold); }
.lie-prog .bar, .lt-prog .bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .lie-prog .bar i, .lt-prog .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lie), var(--gold)); transition: width .8s var(--spring); }
.lie-coins { text-align: center; color: var(--text-2); margin: 4px 0 10px; } .lie-coins b { color: var(--gold); font-size: 18px; }
.lie-tasks { display: grid; gap: 10px; } .lie-tasks button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 14px; align-items: center; text-align: left; padding: 14px 16px; border: 0; border-radius: 20px; background: linear-gradient(160deg, #241b36, #17131f); color: var(--text); font: inherit; box-shadow: inset 0 0 0 1px rgba(191,90,242,.25); cursor: pointer; }
.lie-tasks span { grid-row: 1 / 3; font-size: 34px; } .lie-tasks b { font-size: 17px; } .lie-tasks small { color: var(--text-2); } .lie-tasks button:disabled { opacity: .35; }
.lie-shop { display: grid; gap: 10px; } .lie-shop button { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 14px; border: 0; border-radius: 20px; background: var(--card); color: var(--text); font: inherit; box-shadow: var(--shadow); cursor: pointer; }
.lie-shop span { font-size: 30px; } .lie-shop b { display: block; } .lie-shop small { color: var(--text-2); font-size: 13px; line-height: 1.3; } .lie-shop em { font-style: normal; font-weight: 900; color: var(--gold); white-space: nowrap; } .lie-shop button:disabled { opacity: .4; }
.lie-pls { display: grid; gap: 6px; } .lie-pl { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.lie-pl.dead { opacity: .45; } .lie-pl.dead b { text-decoration: line-through; } .lie-pl i { font-style: normal; font-size: 14px; } .lie-pl .rdy { font-style: normal; font-size: 12px; color: #5ee08a; font-weight: 700; } .lie-pl.verraeter { box-shadow: inset 0 0 0 2px #ff375f; } .lie-pl.schakal, .lie-pl.komplize { box-shadow: inset 0 0 0 2px #ff9f0a; }
/* Minispiele */
.lie-task { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5,4,10,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: lieIn .25s ease both; } .lie-task.bye { animation: lieOut .25s ease both; }
@keyframes lieIn { from { opacity: 0; transform: scale(1.04); } } @keyframes lieOut { to { opacity: 0; transform: scale(.97); } }
.lt-in { width: min(420px, 100%); padding: 18px; border-radius: 26px; background: #15121d; box-shadow: inset 0 0 0 1px rgba(191,90,242,.3), 0 30px 60px rgba(0,0,0,.6); }
.lt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .lt-top b { font-size: 18px; } .lt-top button { border: 0; background: var(--fill); color: var(--text); width: 34px; height: 34px; border-radius: 50%; font-size: 16px; }
.lt-msg { text-align: center; color: var(--text-2); min-height: 22px; margin: 12px 0 0; font-weight: 600; }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .g-grid button { aspect-ratio: 1; border: 0; border-radius: 18px; background: #241d33; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .15s, transform .15s; }
.g-grid button.lit { background: var(--gold); box-shadow: 0 0 26px rgba(232,194,106,.7); transform: scale(1.05); } .g-grid button.tap { background: var(--lie); } .g-grid button.bad { background: #ff375f; }
.g-dial { position: relative; } .g-dial svg { display: block; width: 100%; max-width: 280px; margin: 0 auto; } .g-dial .g-ring { fill: #1d1729 !important; stroke: rgba(255,255,255,.14) !important; stroke-width: 12; }
.g-dial .zone { fill: none; stroke: #30d158; stroke-width: 12; stroke-linecap: round; } .g-dial .needle { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; } .g-dial .hub { fill: var(--gold); }
.g-hits { display: flex; justify-content: center; gap: 10px; margin: 10px 0; } .g-hits i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.15); } .g-hits i.ok { background: #30d158; box-shadow: 0 0 10px #30d158; }
.g-odd { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 6px; } .g-odd button { aspect-ratio: 1; border: 0; border-radius: 12px; background: #241d33; font-size: 26px; padding: 0; } .g-odd button.bad { background: rgba(255,55,95,.4); }
/* TV */
.lie-tv { background: radial-gradient(120% 70% at 50% 0%, #2a1840 0%, #0b0a10 65%); color: var(--text); }
.lie-tv[data-phase="night"], .lie-tv[data-phase="strike"] { background: radial-gradient(120% 70% at 50% 0%, #0f1a33 0%, #03040a 65%); }
.lie-tv .lt-board { position: relative; z-index: 1; height: 100vh; box-sizing: border-box; padding: 3vh 3.5vw 6vh; display: grid; grid-template-rows: auto 1fr; gap: 2vh; }
.lie-tv[data-phase="lobby"] .lt-board, .lie-tv[data-phase="end"] .lt-board, .lie-tv[data-phase="night"] .lt-board, .lie-tv[data-phase="strike"] .lt-board, .lie-tv[data-phase="reveal"] .lt-board { display: block; } .lie-tv[data-phase="lobby"] .pt-lobby { height: 94vh; }
.lie-tv .jt-logo b { letter-spacing: .14em; color: var(--gold); } .lt-mid { flex: 1; text-align: center; font-size: 2.8vh; font-weight: 800; color: var(--text-2); }
.lt-steps { display: flex; flex-wrap: wrap; gap: 1vh; margin: 0 0 2vh; } .lt-steps span { padding: .8vh 1.6vh; border-radius: 99px; background: rgba(191,90,242,.18); color: #d9a6ff; font-weight: 700; font-size: 2vh; }
.lt-center { display: grid; place-content: center; justify-items: center; gap: 2vh; text-align: center; } .lt-center.full { height: 94vh; } .lt-center h1, .lt-night h1, .lt-morning h1, .lt-end h1 { margin: 0; font-size: 6.4vh; letter-spacing: -.02em; } .lt-center p { margin: 0; font-size: 3vh; color: var(--text-2); } .lt-center p b { color: var(--gold); }
.lt-big { font-size: 14vh; line-height: 1; animation: lieF 3s ease-in-out infinite; } .lt-sub { margin: 0; font-size: 2.6vh; color: var(--text-2); text-align: center; }
.lt-det { position: relative; } .lt-det .av { box-shadow: 0 0 0 .6vh #64d2ff, 0 0 6vh rgba(100,210,255,.5); } .lt-det > span:last-child { position: absolute; right: -1vh; bottom: -1vh; font-size: 7vh; }
.lt-ready { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4vh; } .lt-ready span { opacity: .3; transition: all .4s var(--spring); } .lt-ready span.ok { opacity: 1; transform: scale(1.08); }
.lt-night { height: 94vh; display: grid; place-content: center; justify-items: center; gap: 2.4vh; text-align: center; } .lt-night p { margin: 0; font-size: 3.2vh; color: #9fb1d9; }
.lt-moonbig { font-size: 16vh; filter: drop-shadow(0 0 5vh rgba(200,220,255,.5)); animation: lieF 4s ease-in-out infinite; }
.lt-heart { font-size: 8vh; animation: lieBeat 1.6s infinite; } @keyframes lieBeat { 0%, 30%, 100% { transform: scale(1); } 10% { transform: scale(1.25); } 20% { transform: scale(1.05); } }
.lt-timer span { font-size: 6vh; font-weight: 900; color: #9fb1d9; font-variant-numeric: tabular-nums; }
.lt-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vh; width: 100%; max-width: 110vh; } .lt-room { position: relative; display: grid; justify-items: center; gap: .6vh; padding: 2.2vh 1vh; border-radius: 2.4vh; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .15vh rgba(255,255,255,.08); animation: up .6s var(--d) var(--ease) both; }
.lt-room span { font-size: 6vh; } .lt-room b { font-size: 2.2vh; } .lt-room.hl { background: rgba(255,55,95,.22); box-shadow: inset 0 0 0 .4vh #ff375f, 0 0 6vh rgba(255,55,95,.4); animation: lieHl 1.8s ease-in-out infinite; } .lt-room i { position: absolute; top: 1vh; right: 1.2vh; font-style: normal; font-size: 3.4vh; }
@keyframes lieHl { 50% { box-shadow: inset 0 0 0 .4vh #ff375f, 0 0 10vh rgba(255,55,95,.6); } }
.lt-morning { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; height: 100%; } .lt-find { display: grid; justify-items: center; gap: 1.6vh; text-align: center; } .lt-find p { margin: 0; font-size: 3vh; color: var(--text-2); } .lt-find b { color: var(--text); }
.lt-body { position: relative; animation: pop .8s var(--spring); } .lt-body .av { width: 22vh !important; height: 22vh !important; font-size: 9vh !important; filter: grayscale(.6); box-shadow: 0 0 0 .8vh #ff375f, 0 0 10vh rgba(255,55,95,.6); } .lt-body > span:last-child { position: absolute; right: -1vh; bottom: -1vh; font-size: 9vh; }
.lt-morning .lt-map { grid-template-columns: repeat(2, 1fr); }
.lt-day { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3vw; min-height: 0; } .lt-l { display: flex; flex-direction: column; gap: 2vh; } .lt-l .lt-map { grid-template-columns: repeat(4, 1fr); } .lt-l .lt-room { padding: 1.6vh .8vh; } .lt-l .lt-room span { font-size: 4.4vh; }
.lt-prog { display: grid; grid-template-columns: auto 1fr auto; gap: 1.6vh; align-items: center; padding: 1.8vh 2vh; border-radius: 2.4vh; background: rgba(255,255,255,.05); font-size: 2.4vh; } .lt-prog .bar { height: 1.6vh; } .lt-prog span { font-weight: 900; color: var(--gold); }
.lt-ev { display: grid; gap: 1vh; } .lt-ev div { padding: 1.2vh 1.6vh; border-radius: 1.6vh; background: rgba(255,255,255,.04); font-size: 2.1vh; color: var(--text-2); } .lt-ev .dead { color: #ff8aa0; } .lt-ev .good, .lt-ev .saved { color: #5ee08a; }
.lt-r h2 { margin: 0 0 2vh; font-size: 4vh; color: var(--gold); }
.lt-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(17vh, 1fr)); gap: 1.4vh; width: 100%; } .lt-strip > div { display: grid; justify-items: center; gap: .6vh; padding: 1.6vh 1vh; border-radius: 2vh; background: rgba(255,255,255,.05); transition: all .4s; }
.lt-strip b { font-size: 2.2vh; } .lt-strip small { font-size: 1.7vh; color: var(--text-2); min-height: 2vh; } .lt-strip .dead { opacity: .35; filter: grayscale(1); } .lt-strip .rdy { box-shadow: inset 0 0 0 .3vh #30d158; }
.lt-verdict { margin: 0; font-size: 4.4vh; } .lt-verdict.verraeter, .lt-verdict.schakal { color: #5ee08a; } .lt-verdict.gast { color: #ff8aa0; }
.lt-votes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2vh; } .lt-votes span { display: flex; align-items: center; gap: 1vh; padding: 1vh 1.6vh; border-radius: 99px; background: rgba(255,255,255,.07); font-size: 2.2vh; } .lt-votes b { color: var(--gold); }
.lt-end { position: relative; height: 94vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center; } .lt-end p { margin: 0; font-size: 3vh; color: var(--text-2); } .lt-end.gast h1 { color: #5ee08a; } .lt-end.verraeter h1 { color: #ff6482; } .lt-end.schakal h1 { color: #ffb340; }
.lt-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6vh; max-width: 92vw; } .lt-roles > div { display: grid; justify-items: center; gap: .6vh; padding: 1.8vh 2.2vh; border-radius: 2.4vh; background: rgba(255,255,255,.06); min-width: 16vh; animation: up .6s var(--d) var(--ease) both; }
.lt-roles b { font-size: 2.4vh; } .lt-roles span { font-size: 2vh; font-weight: 800; color: var(--text-2); } .lt-roles .verraeter { background: rgba(255,55,95,.2); } .lt-roles .verraeter span { color: #ff8aa0; } .lt-roles .dead { opacity: .6; } .lt-roles .schakal, .lt-roles .komplize { background: rgba(255,159,10,.2); } .lt-roles .schakal span, .lt-roles .komplize span { color: #ffb340; }
.lie-tv .tv-bg i:nth-child(1) { background: #5b2a86; } .lie-tv .tv-bg i:nth-child(2) { background: #bf5af2; opacity: .18; } .lie-tv .tv-bg i:nth-child(3) { background: #8a6a1f; opacity: .2; }
.lie-tv[data-phase="night"] .tv-bg i, .lie-tv[data-phase="strike"] .tv-bg i { background: #1a2b5c; }