body { background: #07061a !important; background-image: none !important; color: #fff; }
.stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.top-left { position: absolute; left: 10px; top: calc(10px + env(safe-area-inset-top)); width: min(58vw, 300px); display: grid; gap: 6px; }
.taskbar { padding: 6px 10px; border-radius: 14px; background: #14101fd0; font: 700 13px var(--font-display); }
.bar { height: 10px; margin-top: 3px; border-radius: 5px; background: #ffffff22; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #27c98f, #7fe3c4); transition: width .4s; }
.task-list { display: grid; gap: 2px; padding: 7px 10px; max-height: 34vh; overflow: hidden; border: 0; border-radius: 14px; background: #14101fb0; color: #fff; text-align: left; pointer-events: auto; font: 600 12px var(--font-body); touch-action: manipulation; }
.task-list.closed { max-height: 26px; }
.task-row.done { color: #7fe3c4; text-decoration: line-through; }
.task-row.note { color: #ffb3a0; }
.task-row.danger { color: #ff5d6c; }
.top-right { position: absolute; right: 10px; top: calc(10px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 42vw; }
.round-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 13px; background: #14101fd0; color: #fff; pointer-events: auto; touch-action: manipulation; }
.role-chip { padding: 5px 12px; border-radius: 99px; background: #14101fd0; color: var(--role, #fff); font: 700 13px var(--font-display); box-shadow: inset 0 0 0 2px var(--role, #fff); }
.alarm { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); max-width: 92vw; width: max-content; padding: 6px 14px; border-radius: 14px; background: #14101fe0; color: #ffc23d; font: 700 14px var(--font-display); text-align: center; }
.alarm.critical { background: #e5342b; color: #fff; animation: alarm .6s ease-in-out infinite alternate; }
@keyframes alarm { to { transform: translateX(-50%) scale(1.04); } }
.toast-line { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); max-width: 90vw; width: max-content; padding: 7px 16px; border-radius: 14px; background: #14101fe6; font: 700 16px var(--font-display); text-align: center; animation: toast-in .25s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } }
.stick { position: absolute; left: 80px; bottom: 90px; width: 120px; height: 120px; margin: -60px; border-radius: 50%; background: #ffffff14; box-shadow: inset 0 0 0 3px #ffffff40; display: none; }
.stick.active { display: block; }
.stick i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: #ffffffa0; box-shadow: 0 4px 10px #0006; }
@media (pointer: coarse) { .stick { display: block; opacity: .6; } .stick.active { opacity: 1; } }
.actions { position: absolute; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 68px); gap: 8px; direction: rtl; pointer-events: none; }
.act { direction: ltr; width: 68px; height: 68px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 2px; border: 3px solid #ffffff55; border-radius: 22px; background: #14101fb0; color: #ffffff70; pointer-events: auto; font: 600 11px/1 var(--font-display); touch-action: manipulation; transition: transform .08s; }
.act svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act.on { color: #fff; background: var(--accent-act, #2f8fd6); border-color: #fff; box-shadow: 0 4px 0 #0005; }
.act.on.danger { background: #e5342b; }
.act.on.main { background: #ffc23d; color: #2a1f3d; animation: act-pulse 1s ease-in-out infinite alternate; }
@keyframes act-pulse { to { transform: scale(1.06); } }
.act:active { transform: translateY(3px); }

/* ---------- layar ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); text-align: center; overflow-y: auto; touch-action: pan-y; animation: fade .25s ease both; z-index: 5; }
@keyframes fade { from { opacity: 0; } }
.logo { margin: 0; font: 700 clamp(38px, 8vw, 66px)/.95 var(--font-display); color: #fff; text-shadow: 0 4px 0 #e5342b, 0 12px 24px #000a; }
.logo span { color: #ffc23d; }
.tagline { margin: 0; max-width: 54ch; color: #e6e2ff; font-size: clamp(13px, 2vw, 15px); }
.kicker { margin: 0; font: 600 clamp(18px, 3vw, 24px) var(--font-display); color: #e6e2ff; }
.play-button { min-width: 200px; min-height: 56px; border: 0; border-radius: 20px; background: #ffc23d; color: #2a1f3d; box-shadow: 0 6px 0 #d9951a, 0 16px 30px -10px #000a; font: 700 22px var(--font-display); touch-action: manipulation; transition: transform .08s, box-shadow .08s; flex: none; }
.play-button:active { transform: translateY(6px); box-shadow: 0 0 0 #d9951a; }
.ghost { min-height: 42px; padding: 6px 18px; border: 2px solid #ffffff66; border-radius: 14px; background: #14101f90; color: #fff; font: 600 14px var(--font-display); touch-action: manipulation; flex: none; }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; background: #ffffff1a; color: #fff; text-decoration: none; font: 600 13px var(--font-display); }
.screen.setup { justify-content: flex-start; background: #07061a70; }
.setup-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; width: min(100%, 560px); padding: 14px; border-radius: 22px; background: #1f1e3dee; text-align: left; flex: none; }
.field { display: grid; gap: 3px; min-width: 0; }
.field.wide, .check.wide { grid-column: 1 / -1; }
.field label { font: 600 13px var(--font-display); color: #c9c5e8; }
.setup-card input, .setup-card select { min-height: 42px; width: 100%; padding: 6px 10px; border: 2px solid #ffffff22; border-radius: 12px; background: #14132a; color: #fff; font: 700 16px var(--font-body); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #e6e2ff; }
.check input { width: 22px !important; height: 22px; min-height: 0 !important; flex: none; }
.colors { display: flex; flex-wrap: wrap; gap: 6px; }
.color { width: 36px; height: 36px; border: 3px solid transparent; border-radius: 50%; box-shadow: inset 0 -5px 0 #0003; touch-action: manipulation; }
.color.on { border-color: #fff; transform: scale(1.12); }
.maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.map-card { display: grid; gap: 1px; padding: 8px 10px; border: 2px solid #ffffff22; border-radius: 14px; background: #14132a; color: #fff; text-align: left; touch-action: manipulation; }
.map-card.on { border-color: #ffc23d; }
.map-card b { font: 600 15px var(--font-display); }
.map-card small { color: #a8a5c8; font-size: 12px; line-height: 1.25; }

.screen.role-intro { background: #07061af2; }
.role-card { display: grid; justify-items: center; gap: 6px; width: min(92vw, 420px); padding: 26px 20px; border-radius: 26px; background: #1f1e3d; box-shadow: 0 0 0 4px var(--role), 0 0 60px -6px var(--role); animation: role-in .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes role-in { from { transform: scale(.4) rotateY(90deg); opacity: 0; } }
.role-card b { font: 700 clamp(34px, 8vw, 50px)/1 var(--font-display); color: var(--role); }
.role-card span { font: 600 15px var(--font-display); color: #c9c5e8; }
.role-card small { font-size: 15px; color: #e6e2ff; }
.role-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--role, #fff); color: #14101f; }
.role-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.role-icon.big { width: 82px; height: 82px; border-radius: 26px; }
.role-icon.big svg { width: 52px; height: 52px; }

/* ---------- rapat ---------- */
.screen.meeting { background: #120f2cf5; justify-content: flex-start; gap: 8px; }
.meet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 1040px); text-align: left; flex: none; }
.meet-head h2 { margin: 0; font: 700 clamp(22px, 4vw, 32px) var(--font-display); color: #ff5d6c; }
.meet-head p { margin: 0; font-size: 13.5px; color: #e6e2ff; }
.meet-timer { display: grid; justify-items: center; min-width: 80px; padding: 4px 10px; border-radius: 14px; background: #ffffff14; flex: none; }
.meet-timer b { font: 700 26px/1 var(--font-display); }
.meet-timer span { font-size: 11px; color: #c9c5e8; }
.meeting.voting .meet-timer { background: #e5342b; }
.meet-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; width: min(100%, 1040px); flex: 1 1 auto; min-height: 0; }
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; align-content: start; overflow-y: auto; touch-action: pan-y; }
.voter { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px; min-height: 58px; padding: 3px 6px; border: 2px solid #ffffff22; border-radius: 14px; background: #1f1e3d; color: #fff; text-align: left; touch-action: manipulation; }
.voter.dead { opacity: .4; }
.voter.picked { border-color: #ffc23d; background: #3a3320; }
.voter.focus { border-color: #7fc8ff; }
.meeting.voting .voter:not(.dead):not(:disabled):hover { border-color: #ff5d6c; }
.mini-face { width: 44px; height: 44px; flex: none; }
.voter-name { font: 600 14px/1.1 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick { position: absolute; right: 6px; bottom: 3px; color: #ffc23d; font: 700 9.5px var(--font-body); font-style: normal; }
.chat-panel { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.chat { flex: 1 1 auto; min-height: 90px; margin: 0; padding: 8px; list-style: none; overflow-y: auto; border-radius: 14px; background: #0b0920; touch-action: pan-y; }
.line { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; padding: 3px 0; text-align: left; font-size: 13.5px; line-height: 1.3; animation: line-in .25s ease both; }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
.line .mini-face { width: 34px; height: 34px; }
.line b { display: block; font: 600 13px var(--font-display); color: #c9c5e8; }
.line.accuse span { color: #ffb3a0; }
.line.vouch span { color: #a8f0d0; }
.line.report span { color: #ffe08a; }
.quick { display: flex; flex-wrap: wrap; gap: 4px; flex: none; }
.quick-btn { min-height: 34px; padding: 3px 10px; border: 0; border-radius: 11px; background: #ffffff1c; color: #fff; font: 600 12.5px var(--font-display); touch-action: manipulation; }
.quick-btn.strong { background: #2f66d6; }
.muted-line { color: #a8a5c8; font-size: 13px; }
.skip { flex: none; }

/* ---------- pengusiran ---------- */
.screen.eject { background: radial-gradient(circle at 50% 40%, #1a1048, #07061a); overflow: hidden; }
.eject-text { max-width: 30ch; margin: 0; min-height: 3.2em; font: 700 clamp(20px, 4vw, 30px)/1.2 var(--font-display); }
#eject-art.fly { animation: fly 4.6s linear both; }
@keyframes fly { from { transform: translateX(-70vw) rotate(0); } to { transform: translateX(70vw) rotate(900deg); } }
.vote-tally { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 700px; }
.tally-chip { padding: 2px 9px; border-radius: 99px; color: #fff; text-shadow: 0 1px 2px #0009; font: 700 11.5px var(--font-body); }

/* ---------- akhir ---------- */
.screen.over { background: #07061ae8; justify-content: flex-start; }
.over-title { margin: 0; font: 700 clamp(36px, 8vw, 62px)/1 var(--font-display); }
.over-title.crew { color: #7fc8ff; }
.over-title.evil { color: #ff3d3d; }
.over-title.badut { color: #ff8a3d; }
.reveal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; width: min(100%, 720px); }
.reveal-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 14px; background: #1f1e3d; text-align: left; box-shadow: inset 0 0 0 2px transparent; }
.reveal-row.winner { box-shadow: inset 0 0 0 2px #ffc23d; }
.reveal-row b { display: block; font: 600 14px var(--font-display); }
.reveal-row small { color: var(--role); font: 700 12px var(--font-body); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }

/* ---------- efek ---------- */
.flash { position: absolute; inset: 0; z-index: 8; background: #e5342b; pointer-events: none; animation: flash .5s ease-out both; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
.death { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 6px; background: #14101fc0; pointer-events: none; animation: fade .2s ease both; }
.death b { font: 700 clamp(30px, 7vw, 48px) var(--font-display); color: #ff5d6c; }
.death small { max-width: 34ch; text-align: center; color: #e6e2ff; font-size: 14px; }

/* ---------- dialog ---------- */
dialog { width: min(94vw, 460px); max-height: 92dvh; padding: 16px; border: 0; border-radius: 22px; color: #fff !important; background: #1f1e3d !important; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dialog-heading h2 { margin: 0; font: 700 22px var(--font-display); }
.close { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 13px; background: #ffffff1c; color: #fff; }
#map-dialog { width: min(96vw, 780px); }
#minimap { display: block; width: 100%; height: auto; border-radius: 14px; background: #0b0920; }
.sab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin-top: 8px; }
.sab { display: grid; gap: 1px; padding: 8px; border: 0; border-radius: 13px; background: #4b4768; color: #fff; text-align: left; touch-action: manipulation; }
.sab.critical { background: #b5231c; }
.sab:disabled { opacity: .45; }
.sab b { font: 600 14px var(--font-display); }
.sab small { font-size: 11.5px; opacity: .85; line-height: 1.2; }
.rules { margin: 0; padding-left: 20px; color: #d6d3ec; line-height: 1.5; font-size: 14px; }
.rules li + li { margin-top: 6px; }
.rules b { color: #fff; }
#help-dialog h3 { margin: 14px 0 6px; font: 700 18px var(--font-display); }
#help-dialog { width: min(96vw, 620px); }
.role-list { display: grid; gap: 6px; }
.role-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; }
.role-row b { display: block; font: 600 14px var(--font-display); color: var(--role); }
.role-row small { font-size: 12.5px; color: #d6d3ec; line-height: 1.25; display: block; }
kbd { padding: 0 5px; border: 1px solid #ffffff44; border-radius: 5px; background: #ffffff14; font: 700 11px var(--font-body); }

/* ---------- permainan kecil ---------- */
.task-box { display: grid; justify-items: center; gap: 10px; min-height: 240px; align-content: center; touch-action: none; text-align: center; }
.task-box.done { animation: task-done .4s ease both; }
@keyframes task-done { 50% { transform: scale(1.04); filter: brightness(1.4); } }
.t-note { margin: 0; font-size: 14px; color: #d6d3ec; }
.t-kabel svg { width: min(100%, 340px); display: block; touch-action: none; }
.num-grid { display: grid; grid-template-columns: repeat(5, 54px); gap: 6px; }
.num-grid.keypad { grid-template-columns: repeat(5, 54px); }
.num { width: 54px; height: 54px; border: 0; border-radius: 13px; background: #4b4768; color: #fff; font: 700 20px var(--font-display); touch-action: manipulation; }
.num.ok { background: #1c9f5f; }
.shake { animation: shake .28s; }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.code { padding: 4px 16px; border-radius: 12px; background: #0b0920; font: 700 28px var(--font-display); letter-spacing: .3em; }
.tank { position: relative; width: 110px; height: 160px; border: 4px solid #fff; border-radius: 18px; overflow: hidden; background: #0b0920; }
.tank i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#ffc23d, #ff8a3d); }
.tank.danger i { background: linear-gradient(#7fe3ff, #27c9e6); }
.hold { min-width: 150px; min-height: 52px; border: 0; border-radius: 16px; background: #ffc23d; color: #2a1f3d; box-shadow: 0 4px 0 #d9951a; font: 700 18px var(--font-display); touch-action: none; }
.hold.on { transform: translateY(4px); box-shadow: none; }
.dial { position: relative; width: 170px; height: 170px; border-radius: 50%; border: 5px solid #fff; background: #0b0920; }
.dial .needle { position: absolute; left: 50%; top: 50%; width: 6px; height: 74px; margin: -74px -3px 0; transform-origin: 50% 100%; background: #ff5d6c; border-radius: 3px; }
.dial .zone { position: absolute; left: 50%; top: 50%; width: 30px; height: 78px; margin: -78px -15px 0; transform-origin: 50% 100%; background: linear-gradient(#27c98f, transparent); clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%); }
.dial.knob { touch-action: none; cursor: grab; }
.dial.good { border-color: #27c98f; }
.count { font: 700 18px var(--font-display); }
.simon-grid { display: grid; grid-template-columns: repeat(3, 66px); gap: 6px; }
.pad { width: 66px; height: 66px; border: 0; border-radius: 13px; background: #3a3658; touch-action: manipulation; }
.pad.lit { background: #7fc8ff; box-shadow: 0 0 18px #7fc8ff; }
.field { position: relative; }
.t-asteroid .field { width: min(100%, 340px); height: 210px; overflow: hidden; border-radius: 14px; background: #0b0920; }
.rock { position: absolute; left: -50px; width: 48px; height: 48px; border: 0; border-radius: 42% 58% 50% 50%; background: #8d8aa0; box-shadow: inset -6px -6px 0 #59556e; animation: rock linear both; touch-action: manipulation; }
.rock.hit { background: #ffc23d; transform: scale(1.3); }
@keyframes rock { to { left: 110%; rotate: 300deg; } }
.slot { position: relative; width: min(100%, 320px); height: 96px; border-radius: 14px; background: #0b0920; box-shadow: inset 0 0 0 3px #4b4768; }
.card { position: absolute; left: 6px; top: 8px; width: 110px; height: 80px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #ffc23d, #ff8a3d); color: #2a1f3d; font: 700 22px var(--font-display); touch-action: none; cursor: grab; }
.rail { position: relative; width: 74px; height: 180px; border-radius: 16px; background: #0b0920; box-shadow: inset 0 0 0 3px #4b4768; }
.handle { position: absolute; left: 5px; top: 5px; width: 64px; height: 56px; border: 0; border-radius: 13px; background: #e5342b; box-shadow: 0 4px 0 #9c1d17; touch-action: none; cursor: grab; }
.meter { width: 180px; height: 12px; border-radius: 6px; background: #0b0920; overflow: hidden; }
.meter.wide { width: min(100%, 320px); height: 20px; border-radius: 10px; }
.meter i { display: block; height: 100%; width: 0; background: #27c98f; }
.scanner { position: relative; width: 120px; height: 170px; border-radius: 18px; background: #0b0920; overflow: hidden; box-shadow: inset 0 0 0 3px #27f0d0; }
.scanner i { position: absolute; left: 0; right: 0; height: 12px; background: #27f0d0; box-shadow: 0 0 18px #27f0d0; animation: scan 1.3s ease-in-out infinite alternate; }
@keyframes scan { from { top: 4px; } to { top: calc(100% - 16px); } }
.switches { display: flex; gap: 8px; }
.switch { width: 46px; height: 92px; border: 0; border-radius: 12px; background: #4b4768; box-shadow: inset 0 -42px 0 #2a2640; touch-action: manipulation; }
.switch.on { background: #ffe45c; box-shadow: inset 0 42px 0 #27c98f, 0 0 14px #ffe45c; }

@media (max-width: 780px) {
  .meet-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .vote-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); max-height: 38dvh; }
  .voter { min-height: 48px; grid-template-columns: 34px minmax(0, 1fr); }
  .voter .mini-face { width: 34px; height: 34px; }
  .voter-name { font-size: 12.5px; }
  .actions { grid-template-columns: repeat(2, 64px); }
  .act { width: 64px; height: 64px; }
  .num-grid { grid-template-columns: repeat(5, 48px); }
  .num { width: 48px; height: 48px; }
}
@media (max-height: 480px) {
  .logo { font-size: 30px; }
  .logo br { display: none; }
  .tagline { display: none; }
  .setup-card { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; }
  .task-list { max-height: 26vh; }
  .vote-grid { max-height: none; }
  .meet-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.stage .hud { width: auto; margin: 0; min-height: 0; display: block; }
.top-left { width: min(52vw, 300px); }

/* ---------- ruang online ---------- */
.online-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; flex: none; }
.play-button.alt { background: #27f0d0; box-shadow: 0 6px 0 #129c86, 0 16px 30px -10px #000a; }
.play-button.alt:active { box-shadow: 0 0 0 #129c86; }
.join-row { display: flex; gap: 6px; flex: none; }
.join-row input { width: 150px; min-height: 42px; padding: 6px 10px; border: 2px solid #ffffff33; border-radius: 12px; background: #14132a; color: #fff; font: 700 16px var(--font-body); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.online-note { margin: 0; color: #ffc23d; font-size: 14px; font-weight: 700; flex: none; }
.screen.lobby { background: #07061ae8; justify-content: flex-start; }
.room-code { margin: 0; font: 700 clamp(44px, 10vw, 68px) var(--font-display); letter-spacing: .12em; color: #ffc23d; flex: none; }
.members { display: grid; gap: 5px; width: min(100%, 420px); margin: 4px 0; padding: 0; list-style: none; flex: none; }
.member { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 12px; border-radius: 14px; background: #1f1e3dee; color: #fff; text-align: left; animation: fade .25s ease both; }
.member i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 -4px 0 #0003; flex: none; }
.member b { flex: 1; min-width: 0; font: 600 15px var(--font-display); overflow-wrap: anywhere; }
.member small { padding: 1px 8px; border-radius: 8px; background: #ffc23d; color: #2a1f3d; font-weight: 800; }
.member.bots { justify-content: center; background: transparent; color: #c9c5e8; font-size: 13.5px; }
.lobby-settings { width: min(100%, 420px); }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; min-height: 40px; padding: 5px 10px; border: 2px solid #ffffff22; border-radius: 12px; background: #14132a; color: #fff; font: 600 15px var(--font-body); }