:root {
    --black: #010101;
    --black-2: #060302;
    --panel: rgba(9, 9, 8, 0.74);
    --panel-strong: rgba(18, 13, 11, 0.86);
    --red: #d51b22;
    --red-dark: #52080a;
    --red-glow: rgba(213, 27, 34, 0.48);
    --gold: #c99b54;
    --gold-soft: rgba(201, 155, 84, 0.18);
    --text: #f5eee7;
    --muted: #a59a91;
    --line: rgba(201, 155, 84, 0.25);
    --rail: clamp(268px, 17vw, 326px);
    --top: 70px;
    --radius-x: clamp(330px, 29vw, 560px);
    --radius-y: clamp(178px, 16vw, 306px);
    --seat: clamp(76px, 5.1vw, 106px);
}

* {
    box-sizing: border-box;
}

button {
    font: inherit;
}

body {
    margin: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    color: var(--text);
    font-family: Tahoma, Arial, sans-serif;
    background:
        radial-gradient(ellipse at 50% 47%, rgba(213, 27, 34, 0.16), transparent 38%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.86), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.86)),
        linear-gradient(135deg, #010101 0%, #130504 54%, #020101 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent 34%, rgba(0, 0, 0, 0.82)),
        repeating-linear-gradient(90deg, transparent 0 74px, rgba(255, 232, 190, 0.04) 74px 78px, transparent 78px 148px);
    opacity: 0.52;
    mask-image: linear-gradient(to bottom, black 0 63%, transparent 88%);
}

body::after {
    background:
        radial-gradient(circle at 50% 45%, rgba(213, 27, 34, 0.19), transparent 28%),
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
    background-size: auto, 90px 90px, 90px 90px;
    mask-image: radial-gradient(ellipse at center, black, transparent 78%);
}

.mafia-room {
    position: relative;
    z-index: 1;
    width: min(1920px, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 16px;
    display: grid;
    grid-template-rows: var(--top) minmax(0, 1fr);
    gap: 12px;
}

.top-bar,
.glass-card,
.phase-banner,
.bottom-nav {
    border: 1px solid var(--line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 34%),
        var(--panel);
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.55),
        inset 0 0 28px rgba(255, 255, 255, 0.025),
        0 0 34px rgba(213, 27, 34, 0.08);
    backdrop-filter: blur(18px);
}

.top-bar {
    height: var(--top);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}

.top-left,
.top-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 12px;
}

.top-left {
    direction: ltr;
    justify-content: flex-start;
}

.top-right {
    justify-content: flex-end;
}

.square-button,
.family-card,
.utility-button,
.profile-chip,
.discord-button,
.soft-button,
.danger-action,
.ghost-action,
.bottom-nav button {
    border: 1px solid var(--line);
    color: var(--text);
    background: rgba(255, 255, 255, 0.045);
    cursor: default;
}

.square-button {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    font-size: 1.4rem;
}

.family-card,
.room-code,
.profile-chip,
.utility-button {
    height: 54px;
    border-radius: 9px;
}

.family-card {
    min-width: 214px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
}

.crown,
.chevron,
.utility-button span {
    color: var(--gold);
}

.room-code {
    min-width: 162px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.035);
}

.family-card small,
.room-code small,
.profile-chip small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

.family-card strong,
.room-code strong {
    color: #fff;
    font-size: 0.88rem;
}

.brand {
    min-width: 430px;
    text-align: center;
}

.brand h1 {
    margin: 0;
    color: #eee7dc;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.25rem, 4vw, 4.4rem);
    line-height: 0.82;
    letter-spacing: 0.11em;
    text-shadow: 0 0 20px rgba(213, 27, 34, 0.55);
}

.brand h1 span {
    color: var(--red);
}

.brand p {
    margin: 6px 0 0;
    color: var(--gold);
    font-size: 0.64rem;
    letter-spacing: 0.43em;
}

.utility-button {
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.profile-chip {
    min-width: 214px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-portrait,
.chat-avatar {
    display: block;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 232, 190, 0.28), transparent 13%),
        radial-gradient(circle at 50% 62%, rgba(213, 27, 34, 0.5), transparent 27%),
        linear-gradient(145deg, #210807, #030101);
    border: 1px solid rgba(201, 155, 84, 0.42);
}

.profile-portrait {
    width: 42px;
    height: 42px;
}

.cinema-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: var(--rail) minmax(720px, 1fr) var(--rail);
    gap: 14px;
}

.rail {
    min-height: 0;
    display: grid;
    gap: 10px;
}

.left-rail {
    grid-template-rows: 182px minmax(190px, 0.9fr) minmax(214px, 1.1fr);
}

.right-rail {
    grid-template-rows: minmax(330px, 0.95fr) 90px minmax(200px, 0.64fr) 108px;
}

.glass-card {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    padding: 16px;
}

.glass-card::after {
    content: "";
    position: absolute;
    inset: auto -26% -48% -26%;
    height: 130px;
    background: radial-gradient(circle, rgba(213, 27, 34, 0.13), transparent 72%);
    pointer-events: none;
}

.glass-card h2 {
    margin: 0 0 8px;
    font-size: 1.08rem;
}

.discord-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    align-items: center;
}

.discord-mark {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #5865f2;
    font-size: 1.8rem;
}

.discord-card p,
.connected-note {
    margin: 0;
    color: var(--muted);
}

.discord-card small {
    color: #d8d0ca;
}

.green-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #31d776;
}

.discord-button,
.soft-button {
    grid-column: 1 / -1;
    height: 46px;
    margin-top: 14px;
    border-radius: 8px;
}

.discord-button,
.danger-action {
    background: linear-gradient(180deg, rgba(182, 38, 34, 0.9), rgba(84, 8, 9, 0.92));
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.06), 0 0 20px rgba(213, 27, 34, 0.16);
}

.connected-note {
    grid-column: 1 / -1;
    margin-top: 10px;
    text-align: center;
    font-size: 0.82rem;
}

.mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mini-header span,
.connected-note {
    color: var(--muted);
}

.event-log,
.chat-stream {
    overflow: auto;
    scrollbar-width: thin;
}

.event-log {
    max-height: calc(100% - 56px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-log li {
    min-height: 36px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #d8d0ca;
    font-size: 0.86rem;
}

.event-log time {
    color: #746b66;
    direction: ltr;
}

.soft-button {
    width: 100%;
    color: #d8d0ca;
    background: rgba(255, 255, 255, 0.045);
}

.chat-stream {
    max-height: calc(100% - 58px);
    display: grid;
    gap: 8px;
}

.chat-stream p {
    margin: 0;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    grid-template-areas:
        "avatar name time"
        "avatar text time";
    gap: 2px 8px;
    align-items: center;
}

.chat-avatar {
    grid-area: avatar;
    width: 30px;
    height: 30px;
}

.chat-stream strong {
    grid-area: name;
    color: #fff;
    font-size: 0.8rem;
}

.chat-stream em {
    grid-area: text;
    color: var(--muted);
    font-style: normal;
    font-size: 0.78rem;
}

.chat-stream time {
    grid-area: time;
    color: #716760;
    font-size: 0.72rem;
    direction: ltr;
}

.avatar-blue {
    box-shadow: 0 0 12px rgba(50, 120, 255, 0.36);
}

.avatar-green {
    box-shadow: 0 0 12px rgba(46, 190, 105, 0.36);
}

.avatar-red {
    box-shadow: 0 0 12px rgba(213, 27, 34, 0.42);
}

.chat-input {
    height: 42px;
    margin-top: 10px;
    padding: 0 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.center-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(201, 155, 84, 0.16);
    background:
        radial-gradient(ellipse at 50% 55%, rgba(213, 27, 34, 0.16), transparent 42%),
        linear-gradient(to bottom, rgba(70, 20, 12, 0.1), rgba(0, 0, 0, 0.55));
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.86), 0 24px 90px rgba(0, 0, 0, 0.62);
}

.room-backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent 34%, rgba(0, 0, 0, 0.82)),
        radial-gradient(circle at 18% 25%, rgba(255, 174, 92, 0.08), transparent 8%),
        radial-gradient(circle at 82% 25%, rgba(255, 174, 92, 0.08), transparent 8%),
        repeating-linear-gradient(90deg, transparent 0 78px, rgba(255, 226, 190, 0.05) 78px 82px, transparent 82px 158px);
    opacity: 0.78;
    mask-image: linear-gradient(to bottom, black 0 62%, transparent 88%);
}

.phase-banner {
    position: absolute;
    z-index: 7;
    top: 16px;
    left: 50%;
    width: min(510px, calc(100% - 34px));
    min-height: 78px;
    transform: translateX(-50%);
    border-radius: 12px;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: 58px 1fr auto 30px;
    align-items: center;
    gap: 12px;
}

.moon-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 65% 35%, var(--panel) 0 32%, transparent 33%),
        radial-gradient(circle, #f1e4cb 0 45%, transparent 46%);
    border: 2px solid rgba(201, 155, 84, 0.42);
    box-shadow: 0 0 18px rgba(201, 155, 84, 0.22);
}

.phase-banner h2 {
    margin: 0;
    font-size: 1.55rem;
}

.phase-banner p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.timer-demo {
    color: var(--red);
    font-size: 1.55rem;
    font-weight: 900;
    direction: ltr;
}

.info-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
}

.table-arena {
    position: absolute;
    inset: 94px 6px 90px;
    display: grid;
    place-items: center;
}

.table-floor-glow {
    position: absolute;
    width: min(98%, 1170px);
    aspect-ratio: 2.02;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(213, 27, 34, 0.32), transparent 70%);
    filter: blur(12px);
}

.mafia-table {
    position: relative;
    width: min(91%, 1120px);
    aspect-ratio: 2.08;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 220, 175, 0.08) 0 8%, transparent 9%),
        radial-gradient(ellipse at 50% 50%, rgba(213, 27, 34, 0.2), transparent 48%),
        radial-gradient(ellipse at 50% 52%, #2a1110 0%, #090302 66%, #010101 100%);
    border: 2px solid rgba(201, 155, 84, 0.42);
    box-shadow:
        inset 0 0 110px rgba(213, 27, 34, 0.24),
        inset 0 0 22px rgba(201, 155, 84, 0.18),
        0 42px 110px rgba(0, 0, 0, 0.9),
        0 0 0 22px rgba(213, 27, 34, 0.034);
}

.mafia-table::before,
.mafia-table::after,
.table-map {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mafia-table::before {
    inset: 11%;
    border-radius: 50%;
    border: 1px solid rgba(201, 155, 84, 0.24);
    box-shadow: inset 0 0 52px rgba(0, 0, 0, 0.7), 0 0 28px rgba(213, 27, 34, 0.2);
}

.mafia-table::after {
    background:
        linear-gradient(18deg, transparent 0 42%, rgba(213, 27, 34, 0.16) 43%, transparent 45%),
        linear-gradient(138deg, transparent 0 45%, rgba(213, 27, 34, 0.14) 46%, transparent 48%),
        radial-gradient(circle at 48% 50%, rgba(255, 255, 255, 0.18), transparent 1.4%),
        radial-gradient(circle at 58% 42%, rgba(213, 27, 34, 0.3), transparent 1.6%);
    opacity: 0.76;
}

.table-map {
    inset: 9%;
    border-radius: 50%;
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(201, 155, 84, 0.055) 31px 33px, transparent 33px 66px),
        repeating-linear-gradient(90deg, transparent 0 36px, rgba(213, 27, 34, 0.09) 36px 38px, transparent 38px 74px);
    mask-image: radial-gradient(ellipse at center, black, transparent 72%);
}

.pin {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    box-shadow: 0 0 14px currentColor;
}

.pin-red { color: #e62a32; left: 58%; top: 42%; }
.pin-blue { color: #267cff; left: 72%; top: 48%; }
.pin-green { color: #2ecc71; left: 34%; top: 47%; }
.pin-gold { color: #d9b66f; left: 51%; top: 62%; }
.pin-muted { color: #766b62; left: 66%; top: 63%; }

.table-logo {
    position: relative;
    z-index: 3;
    width: min(18%, 184px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(213, 27, 34, 0.42), rgba(0, 0, 0, 0.82));
    border: 1px solid rgba(201, 155, 84, 0.36);
    box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.84), 0 0 34px rgba(213, 27, 34, 0.42);
}

.table-logo strong {
    color: var(--red);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.4rem, 4.7vw, 5.3rem);
    line-height: 0.8;
    text-shadow: 0 0 18px rgba(213, 27, 34, 0.9);
}

.table-logo small {
    color: var(--gold);
    font-size: 0.68rem;
}

.seats {
    position: absolute;
    inset: 0;
}

.seat {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--seat);
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 0;
}

.seat-1 { transform: translate(-50%, -50%) translate(0, calc(var(--radius-y) * -1)); }
.seat-2 { transform: translate(-50%, -50%) translate(calc(var(--radius-x) * 0.68), calc(var(--radius-y) * -0.73)); }
.seat-3 { transform: translate(-50%, -50%) translate(var(--radius-x), calc(var(--radius-y) * -0.07)); }
.seat-4 { transform: translate(-50%, -50%) translate(calc(var(--radius-x) * 0.72), calc(var(--radius-y) * 0.7)); }
.seat-5 { transform: translate(-50%, -50%) translate(calc(var(--radius-x) * -0.08), var(--radius-y)); }
.seat-6 { transform: translate(-50%, -50%) translate(calc(var(--radius-x) * -0.7), calc(var(--radius-y) * 0.7)); }
.seat-7 { transform: translate(-50%, -50%) translate(calc(var(--radius-x) * -1), calc(var(--radius-y) * -0.05)); }
.seat-8 { transform: translate(-50%, -50%) translate(calc(var(--radius-x) * -0.72), calc(var(--radius-y) * -0.73)); }

.seat-number {
    z-index: 3;
    width: 32px;
    height: 32px;
    margin-bottom: -8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: #080604;
    border: 1px solid var(--gold);
    box-shadow: 0 0 14px rgba(201, 155, 84, 0.28);
}

.seat-avatar {
    width: calc(var(--seat) * 0.92);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: transparent;
    background:
        radial-gradient(circle at 50% 24%, rgba(240, 220, 190, 0.78), transparent 12%),
        radial-gradient(ellipse at 50% 50%, rgba(18, 18, 18, 0.92) 0 30%, transparent 31%),
        radial-gradient(ellipse at 50% 70%, rgba(43, 24, 19, 0.96) 0 34%, transparent 35%),
        linear-gradient(145deg, #1d0907, #020101);
    border: 2px solid rgba(201, 155, 84, 0.58);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.74), 0 0 24px rgba(213, 27, 34, 0.26);
}

.portrait-2 { border-color: rgba(217, 182, 111, 0.72); }
.portrait-3 { box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.74), 0 0 22px rgba(38, 124, 255, 0.32); }
.portrait-4 { box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.74), 0 0 22px rgba(213, 27, 34, 0.36); }

.seat-plaque {
    min-width: calc(var(--seat) * 1.52);
    margin-top: -6px;
    padding: 7px 11px;
    border-radius: 7px;
    text-align: center;
    background: rgba(8, 9, 8, 0.92);
    border: 1px solid rgba(201, 155, 84, 0.46);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.54);
}

.seat-plaque strong,
.seat-plaque small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seat-plaque strong {
    color: #fff;
    font-size: 0.88rem;
}

.seat-plaque small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.74rem;
}

.seat-2 .seat-plaque small,
.seat-5 .seat-plaque small {
    color: #57d57b;
}

.seat-3 .seat-plaque small {
    color: #4ea1ff;
}

.seat-4 .seat-plaque small,
.seat-6 .seat-plaque small {
    color: #ff4249;
}

.secret-card {
    padding: 14px;
}

.secret-art {
    min-height: 238px;
    padding: 16px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 50% 28%, rgba(213, 27, 34, 0.18), transparent 38%),
        linear-gradient(145deg, #1a0706, #030101);
    border: 1px solid rgba(201, 155, 84, 0.44);
}

.css-don {
    width: min(100%, 188px);
    aspect-ratio: 1.2;
    display: block;
    border-radius: 10px;
    background:
        radial-gradient(ellipse at 50% 24%, #080706 0 14%, transparent 15%),
        linear-gradient(90deg, transparent 0 34%, #090706 35% 65%, transparent 66%),
        radial-gradient(ellipse at 50% 58%, rgba(35, 23, 19, 0.94) 0 32%, transparent 33%),
        linear-gradient(145deg, rgba(213, 27, 34, 0.2), rgba(0, 0, 0, 0.78));
    border: 1px solid rgba(201, 155, 84, 0.22);
}

.secret-art strong {
    color: var(--red);
    font-size: 1.65rem;
}

.secret-art p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.88rem;
}

.objectives-card {
    display: grid;
    align-content: center;
}

.objectives-card p {
    margin: 0;
    color: #f1e9e2;
}

.objectives-card span,
.action-preview span {
    color: var(--red);
    margin-inline-end: 8px;
}

.actions-card {
    display: grid;
    gap: 10px;
}

.action-preview {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.action-preview strong,
.action-preview small {
    display: block;
}

.action-preview small {
    margin-top: 3px;
    color: var(--muted);
}

.danger-action,
.ghost-action {
    min-height: 42px;
    border-radius: 8px;
}

.danger-action:disabled,
.ghost-action:disabled {
    opacity: 0.66;
}

.ghost-action {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.035);
}

.room-intel dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.room-intel div {
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.room-intel dt {
    color: var(--gold);
    font-size: 0.66rem;
    text-transform: uppercase;
}

.room-intel dd {
    margin: 3px 0 0;
    color: #fff;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.bottom-nav {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 18px;
    width: min(860px, calc(100% - 54px));
    height: 92px;
    transform: translateX(-50%);
    border-radius: 10px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 150px 1fr 1fr;
    align-items: center;
    gap: 0;
}

.bottom-nav button {
    height: 64px;
    border-radius: 0;
    border-width: 0 1px 0 0;
    color: var(--muted);
    background: transparent;
    display: grid;
    place-items: center;
    gap: 4px;
}

.bottom-nav button span {
    color: #ded6cc;
    font-size: 1.35rem;
}

.bottom-logo {
    width: 150px;
    height: 118px;
    margin-top: -28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--red);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.3rem;
    background: radial-gradient(circle, rgba(34, 12, 10, 0.98), rgba(0, 0, 0, 0.9));
    border: 2px solid rgba(201, 155, 84, 0.52);
    box-shadow: 0 0 30px rgba(213, 27, 34, 0.32), inset 0 0 32px rgba(0, 0, 0, 0.8);
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.75;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.22);
    }
}

@media (min-width: 1101px) {
    body {
        overflow-y: hidden;
    }
}

@media (max-width: 1550px) {
    :root {
        --rail: 270px;
        --radius-x: clamp(300px, 28vw, 455px);
        --radius-y: clamp(160px, 15vw, 250px);
        --seat: clamp(68px, 4.9vw, 92px);
    }

    .utility-button:nth-of-type(2),
    .family-card {
        display: none;
    }
}

@media (max-width: 1100px) {
    body {
        overflow-y: auto;
    }

    .mafia-room {
        grid-template-rows: auto auto;
    }

    .top-bar {
        height: auto;
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .brand {
        min-width: 0;
    }

    .top-left,
    .top-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cinema-layout {
        grid-template-columns: 1fr;
    }

    .center-stage {
        min-height: 760px;
        order: -1;
    }

    .rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-card,
    .room-intel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    :root {
        --radius-x: min(39vw, 178px);
        --radius-y: min(27vw, 128px);
        --seat: 58px;
    }

    .mafia-room {
        padding: 10px;
    }

    .brand h1 {
        font-size: 2.2rem;
    }

    .center-stage {
        min-height: 690px;
    }

    .phase-banner {
        grid-template-columns: 44px 1fr auto;
    }

    .info-dot {
        display: none;
    }

    .phase-banner h2 {
        font-size: 1.2rem;
    }

    .timer-demo {
        font-size: 1rem;
    }

    .table-arena {
        inset: 112px 4px 118px;
    }

    .mafia-table {
        width: min(82vw, 410px);
    }

    .seat-plaque {
        min-width: calc(var(--seat) * 1.25);
        padding: 4px 6px;
    }

    .seat-plaque strong {
        font-size: 0.6rem;
    }

    .seat-plaque small,
    .seat-number {
        font-size: 0.52rem;
    }

    .rail {
        grid-template-columns: 1fr;
    }

    .bottom-nav {
        height: auto;
        grid-template-columns: repeat(2, 1fr);
        padding: 8px;
    }

    .bottom-logo {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 110px;
        height: 86px;
        margin: -18px auto 0;
        font-size: 2.3rem;
    }
}