:root {
            color-scheme: dark;
            --bg: #111313;
            --bg-2: #181b1b;
            --panel: rgba(244, 248, 242, 0.08);
            --panel-strong: rgba(244, 248, 242, 0.13);
            --panel-deep: rgba(7, 12, 24, 0.78);
            --paper: #f4f8f2;
            --muted: #aab4ae;
            --line: rgba(244, 248, 242, 0.16);
            --line-strong: rgba(244, 248, 242, 0.28);
            --teal: #28d6c2;
            --coral: #ff735c;
            --lime: #d7f75b;
            --amber: #f0bd42;
            --ink: #101211;
            --danger: #ff4f6d;
            --shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
            --radius: 8px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
            /* overflow-x: hidden USUNIĘTE — łamie position:fixed na iOS Safari (root scroller bug) */
            background: var(--bg);
        }

        body {
            min-height: 100vh;
            margin: 0;
            color: var(--paper);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:
                linear-gradient(90deg, rgba(2, 7, 21, 0.48) 0%, rgba(5, 13, 28, 0.26) 36%, rgba(7, 9, 20, 0.00) 66%, rgba(4, 4, 10, 0.14) 100%),
                linear-gradient(180deg, rgba(5, 8, 18, 0.04) 0%, rgba(5, 8, 18, 0.08) 58%, rgba(3, 5, 10, 0.36) 100%),
                url("/assets/optimized/wtyka.webp");
            background-attachment: scroll;
            background-position: center top;
            background-repeat: no-repeat;
            background-size: cover;
        }

        body::before {
            position: fixed;
            inset: 0;
            z-index: -1;
            content: "";
            background:
                radial-gradient(ellipse at 30% 18%, rgba(40, 214, 194, 0.11), transparent 38%),
                repeating-linear-gradient(90deg, transparent 0 92px, rgba(244, 248, 242, 0.018) 92px 93px);
            mask-image: linear-gradient(180deg, black, rgba(0,0,0,.72), transparent 92%);
            pointer-events: none;
        }

        button,
        input {
            font: inherit;
        }

        button {
            border: 0;
        }

        .app {
            width: min(1520px, calc(100% - 48px));
            margin: 0 auto;
            padding: 22px 0 56px;
            overflow-x: hidden; /* tutaj bezpieczne — nie psuje position:fixed w przeciwieństwie do html/body */
        }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 10px 0 28px;
        }

        .top-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .mobile-menu-toggle {
            display: none;
        }

        .top-actions form {
            margin: 0;
        }

        body.game-page .top-profile-link {
            display: none;
        }

        .top-actions .btn {
            min-height: 40px;
            padding-inline: 13px;
            border-color: rgba(255, 238, 189, 0.26);
            color: #fff7c2;
            background:
                linear-gradient(135deg, rgba(40, 214, 194, 0.16), rgba(240, 189, 66, 0.09) 46%, rgba(255, 115, 92, 0.10)),
                rgba(5, 12, 22, 0.60);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
        }

        .top-actions .btn:hover {
            border-color: rgba(125, 248, 232, 0.48);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30), 0 0 24px rgba(40, 214, 194, 0.10);
        }

        .top-actions .btn.teal {
            color: var(--ink);
            border-color: transparent;
            background: linear-gradient(135deg, #7df8e8, #d7f75b);
        }

        .top-actions .btn.premium {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            color: #fff7c2;
            border-color: rgba(240, 189, 66, 0.78);
            background:
                radial-gradient(circle at 20% 0%, rgba(255, 247, 194, 0.34), transparent 34%),
                linear-gradient(135deg, rgba(240, 189, 66, 0.48), rgba(255, 247, 194, 0.16) 46%, rgba(40, 214, 194, 0.12)),
                rgba(28, 18, 5, 0.68);
            box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34), 0 0 28px rgba(240, 189, 66, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        }

        .top-actions .btn.premium::after {
            position: absolute;
            inset: -45% auto -45% -55%;
            z-index: -1;
            width: 46%;
            background: linear-gradient(90deg, transparent, rgba(255, 247, 194, 0.42), transparent);
            content: "";
            transform: rotate(18deg);
            animation: premiumShine 3.4s ease-in-out infinite;
        }

        .top-profile-avatar {
            display: inline-grid;
            width: 24px;
            height: 24px;
            flex: 0 0 auto;
            place-items: center;
            overflow: hidden;
            border: 1px solid rgba(255, 238, 189, 0.34);
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.24) center / cover no-repeat;
            color: #fff7c2;
            font-size: 10px;
            font-weight: 1000;
            box-shadow: 0 0 16px rgba(40, 214, 194, 0.14);
        }

        .top-player-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .premium-name {
            color: #ffe18a;
            text-shadow: 0 0 18px rgba(240, 189, 66, 0.30);
        }

        .premium-ring.ring-1 { border-color:#c6a15b !important; box-shadow:0 0 0 3px #1a1d22, inset 0 0 0 3px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-2 { border-color:#b88a48 !important; box-shadow:0 0 0 4px #7b5a34, 0 0 0 8px #1d1a16, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-3 { border-color:#9a1f1f !important; box-shadow:0 -6px 0 -2px #cfb071, 0 0 0 4px #211612, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-4 { border-color:#d9c08a !important; box-shadow:0 -8px 0 -2px #d9c08a, -8px 0 0 -2px #2e263f, 8px 0 0 -2px #2e263f, 0 0 0 5px #19151e, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-5 { border-color:#b59a62 !important; box-shadow:0 0 0 3px #241d14, 0 9px 0 -2px #2b2116, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-6 { border-color:#20b8bd !important; box-shadow:0 0 0 3px #101820, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-7 { border-color:#1fb8bd !important; box-shadow:0 0 0 3px #102027, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-8 { border-color:#b49562 !important; box-shadow:0 0 0 3px #1a1c22, 9px 0 0 -2px #3b4250, -9px 0 0 -2px #3b4250, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-9 { border-color:#c79b4b !important; box-shadow:0 -8px 0 -3px #d6b36d, 0 0 0 4px #392614, 0 9px 0 -2px #8c1f1f, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-10 { border-color:#c3c3c3 !important; box-shadow:0 0 0 4px #30343a, -7px 7px 0 -2px #9b2020, 7px 7px 0 -2px #9b2020, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-11 { border-color:#789c43 !important; box-shadow:0 0 0 4px #172313, 0 -8px 0 -2px #c4a047, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-12 { border-color:#2a3340 !important; box-shadow:0 -10px 0 -2px #202936, 0 0 0 5px #10151d, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-13 { border-color:#dd3030 !important; box-shadow:0 0 0 4px #1d2229, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-glow-on.premium-ring.ring-13 { box-shadow:0 0 0 4px #1d2229, 0 0 24px rgba(255,36,36,.44), 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-14 { border-color:#242938 !important; box-shadow:0 -8px 0 -1px #11151e, 0 0 0 5px #171b25, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-15 { border-color:#b58a50 !important; box-shadow:0 0 0 4px #4d3821, 0 -8px 0 -2px #d7bf90, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring.ring-16 { border-color:#8f52c8 !important; box-shadow:0 -8px 0 -2px #d3a844, 0 0 0 4px #281734, 0 14px 34px rgba(0,0,0,.38) !important; }
        .premium-ring { --premium-ring-image:url("/pierscienie/clean/opt/celownik.png"); position:relative; overflow:visible !important; box-shadow:none !important; }
        .premium-glow-none { filter:none; }
        .premium-glow-on { filter:drop-shadow(0 0 14px var(--premium-glow-color, #ffe18a)); }
        .premium-ring.ring-1 { --premium-ring-image:url("/pierscienie/clean/opt/celownik.png"); }
        .premium-ring.ring-2 { --premium-ring-image:url("/pierscienie/clean/opt/top_secret.png"); }
        .premium-ring.ring-3 { --premium-ring-image:url("/pierscienie/clean/opt/dagger.png"); }
        .premium-ring.ring-4 { --premium-ring-image:url("/pierscienie/clean/opt/maska.png"); }
        .premium-ring.ring-5 { --premium-ring-image:url("/pierscienie/clean/opt/klucznik.png"); }
        .premium-ring.ring-6 { --premium-ring-image:url("/pierscienie/clean/opt/zagadka.png"); }
        .premium-ring.ring-7 { --premium-ring-image:url("/pierscienie/clean/opt/runy.png"); }
        .premium-ring.ring-8 { --premium-ring-image:url("/pierscienie/clean/opt/tajemne.png"); }
        .premium-ring.ring-9 { --premium-ring-image:url("/pierscienie/clean/opt/pieczec.png"); }
        .premium-ring.ring-10 { --premium-ring-image:url("/pierscienie/clean/opt/assassin.png"); }
        .premium-ring.ring-11 { --premium-ring-image:url("/pierscienie/clean/opt/posion.png"); }
        .premium-ring.ring-12 { --premium-ring-image:url("/pierscienie/clean/opt/sztylety.png"); }
        .premium-ring.ring-13 { --premium-ring-image:url("/pierscienie/clean/opt/laser.png"); }
        .premium-ring.ring-14 { --premium-ring-image:url("/pierscienie/clean/opt/wanted.png"); }
        .premium-ring::after { content:""; position:absolute; inset:-30%; z-index:2; pointer-events:none; background:var(--premium-ring-image) center / contain no-repeat; }
        .card-avatar.premium-ring, .player-avatar.premium-ring, .top-profile-avatar.premium-ring, .avatar-picker.premium-ring { background-size:cover; }
        .char-img.premium-ring { background-size:142%; background-position:center; }

        .notification-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 7px;
            border-radius: 999px;
            background: #ff4f6d;
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 0 0 2px rgba(4, 7, 15, 0.9), 0 8px 20px rgba(255, 79, 109, 0.35);
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            color: var(--paper);
            font-size: clamp(28px, 2.1vw, 38px);
            font-weight: 1000;
            letter-spacing: 0;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 3px 18px rgba(0, 0, 0, 0.78), 0 0 18px rgba(40, 214, 194, 0.30);
        }

        .brand-mark {
            display: grid;
            width: 68px;
            height: 68px;
            place-items: center;
            overflow: hidden;
            border: 1px solid rgba(255, 238, 189, 0.32);
            border-radius: 50%;
            background: rgba(4, 10, 18, 0.46);
            box-shadow: 0 10px 30px rgba(0,0,0,.32), 0 0 22px rgba(40, 214, 194, 0.16);
        }

        .brand-mark img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .brand-word {
            background: linear-gradient(90deg, #fff7c2 0%, #f0bd42 36%, #7df8e8 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            gap: 8px;
            padding: 7px 10px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--muted);
            background: rgba(0, 0, 0, 0.18);
            font-size: 13px;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--teal);
            box-shadow: 0 0 0 4px rgba(40, 214, 194, 0.13);
        }

        .hero {
            display: grid;
            grid-template-columns: minmax(0, 760px);
            align-items: center;
            min-height: min(620px, calc(100vh - 122px));
            gap: 34px;
            padding: 18px 0 52px;
        }

        .hero-copy {
            display: grid;
            gap: 20px;
            max-width: 760px;
        }

        h1,
        h2,
        h3,
        p {
            margin: 0;
        }

        h1 {
            max-width: 760px;
            font-size: clamp(42px, 7.4vw, 92px);
            line-height: 0.92;
            letter-spacing: 0;
            text-transform: uppercase;
            color: #fff7cf;
            text-shadow: 0 6px 32px rgba(0, 0, 0, 0.88), 0 0 30px rgba(40, 214, 194, 0.32), 0 0 14px rgba(240, 189, 66, 0.28);
            -webkit-text-stroke: 1px rgba(240, 189, 66, 0.24);
        }

        .hero-accent {
            display: inline-block;
            color: #7df8e8;
            text-shadow: 0 0 26px rgba(40, 214, 194, 0.52), 0 7px 34px rgba(0, 0, 0, 0.88);
        }

        .lead {
            max-width: 670px;
            color: rgba(244, 248, 242, 0.90);
            font-size: clamp(18px, 2.2vw, 24px);
            line-height: 1.42;
            text-shadow: 0 3px 20px rgba(0, 0, 0, 0.86);
        }

        .quick-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding-top: 8px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            gap: 8px;
            padding: 7px 10px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--paper);
            background: rgba(244, 248, 242, 0.07);
            font-size: 13px;
            font-weight: 700;
        }

        .hero-art {
            display: none;
            min-height: 330px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background:
                linear-gradient(135deg, rgba(40, 214, 194, 0.18), transparent 36%),
                linear-gradient(315deg, rgba(255, 115, 92, 0.18), transparent 42%),
                rgba(244, 248, 242, 0.06);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .hero-art svg {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 330px;
        }

        .workspace {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
            align-items: start;
        }

        .mobile-setup-nav {
            display: none;
        }

        .settings-bank {
            display: none;
        }

        .panel {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            background:
                linear-gradient(145deg, rgba(9, 23, 25, 0.84), rgba(21, 13, 29, 0.78) 58%, rgba(44, 19, 18, 0.60)),
                rgba(7, 12, 24, 0.76);
            box-shadow: 0 22px 62px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.035);
            backdrop-filter: blur(20px);
        }

        .panel::before {
            position: absolute;
            inset: 0 0 auto;
            height: 3px;
            background: linear-gradient(90deg, var(--teal), var(--amber), var(--coral));
            content: "";
            opacity: 0.82;
        }

        .panel-head,
        .panel-body {
            padding: 18px;
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 1px solid rgba(255, 238, 189, 0.16);
            background: linear-gradient(90deg, rgba(40, 214, 194, 0.08), rgba(240, 189, 66, 0.055), transparent);
        }

        .panel-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff7c2;
            font-size: 16px;
            font-weight: 900;
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.62);
        }

        .panel-title svg,
        .btn svg,
        .icon-only svg {
            flex: 0 0 auto;
        }

        .btn svg,
        .icon-only svg {
            width: 18px;
            height: 18px;
        }

        .card-symbol svg {
            width: 72px;
            height: 72px;
        }

        .form-grid {
            display: grid;
            gap: 16px;
        }

        .field {
            display: grid;
            gap: 8px;
        }

        .field label,
        .toggle span:first-child {
            color: var(--paper);
            font-size: 13px;
            font-weight: 800;
        }

        .field small,
        .toggle small,
        .muted {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        .stepper {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) 42px;
            align-items: center;
            gap: 8px;
        }

        .stepper input,
        .text-input {
            width: 100%;
            min-height: 44px;
            border: 1px solid rgba(255, 238, 189, 0.20);
            border-radius: var(--radius);
            outline: none;
            color: var(--paper);
            background: rgba(4, 10, 18, 0.48);
            text-align: center;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
        }

        .stepper input:focus,
        .text-input:focus {
            border-color: rgba(40, 214, 194, 0.62);
            box-shadow: 0 0 0 3px rgba(40, 214, 194, 0.12), inset 0 0 0 1px rgba(255,255,255,0.035);
        }

        .text-input {
            padding: 0 12px;
            text-align: left;
        }

        .stepper button,
        .room-counter button,
        .icon-only {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            color: var(--paper);
            background: rgba(4, 10, 18, 0.48);
            cursor: pointer;
            transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
        }

        .stepper button:hover,
        .room-counter button:hover,
        .icon-only:hover {
            transform: translateY(-1px);
            border-color: var(--line-strong);
            background: rgba(244, 248, 242, 0.13);
        }

        .stepper button:disabled,
        .room-counter button:disabled {
            cursor: not-allowed;
            opacity: 0.42;
            transform: none;
        }

        .field.counter-players label,
        .room-counter-wrap.counter-players .room-counter-label {
            color: #7df8e8;
        }

        .field.counter-players .stepper input,
        .room-counter-wrap.counter-players .room-counter output {
            border-color: rgba(40, 214, 194, 0.42);
            color: #7df8e8;
            background: rgba(40, 214, 194, 0.08);
        }

        .field.counter-players .stepper button,
        .room-counter-wrap.counter-players .room-counter button {
            border-color: rgba(40, 214, 194, 0.36);
            color: #7df8e8;
            background: rgba(40, 214, 194, 0.10);
        }

        .field.counter-players .stepper button:hover,
        .room-counter-wrap.counter-players .room-counter button:hover {
            border-color: rgba(125, 248, 232, 0.68);
            background: rgba(40, 214, 194, 0.18);
        }

        .field.counter-spies label,
        .room-counter-wrap.counter-spies .room-counter-label {
            color: #ff8aa0;
        }

        .field.counter-spies .stepper input,
        .room-counter-wrap.counter-spies .room-counter output {
            border-color: rgba(255, 79, 109, 0.44);
            color: #ff8aa0;
            background: rgba(255, 79, 109, 0.08);
        }

        .field.counter-spies .stepper button,
        .room-counter-wrap.counter-spies .room-counter button {
            border-color: rgba(255, 79, 109, 0.38);
            color: #ff8aa0;
            background: rgba(255, 79, 109, 0.10);
        }

        .field.counter-spies .stepper button:hover,
        .room-counter-wrap.counter-spies .room-counter button:hover {
            border-color: rgba(255, 138, 160, 0.72);
            background: rgba(255, 79, 109, 0.18);
        }

        .toggle {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            padding: 12px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: linear-gradient(135deg, rgba(4, 10, 18, 0.42), rgba(40, 214, 194, 0.045));
            cursor: pointer;
        }

        .toggle:hover {
            border-color: rgba(255, 238, 189, 0.28);
            background: linear-gradient(135deg, rgba(4, 10, 18, 0.50), rgba(40, 214, 194, 0.075));
        }

        .toggle input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .switch {
            position: relative;
            width: 52px;
            height: 30px;
            border: 1px solid var(--line-strong);
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.3);
            transition: background 180ms ease;
        }

        .switch::after {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--muted);
            content: "";
            transition: transform 180ms ease, background 180ms ease;
        }

        .toggle input:checked + .switch {
            background: rgba(40, 214, 194, 0.22);
        }

        .toggle input:checked + .switch::after {
            transform: translateX(22px);
            background: var(--teal);
        }

        .toggle.disabled {
            opacity: 0.58;
        }

        .secret-roles-toggle {
            border-color: rgba(240, 189, 66, 0.32);
            background: linear-gradient(135deg, rgba(240, 189, 66, 0.10), rgba(255, 79, 109, 0.08)), rgba(4, 10, 18, 0.46);
        }

        .secret-mode-picker {
            display: grid;
            gap: 10px;
            padding: 12px;
            border: 1px solid rgba(240, 189, 66, 0.26);
            border-radius: var(--radius);
            background: linear-gradient(135deg, rgba(240,189,66,.07), rgba(40,214,194,.06)), rgba(4,10,18,.44);
        }

        .secret-mode-picker-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }

        .variant-collapse-btn {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid rgba(255,238,189,.18);
            border-radius: 6px;
            background: rgba(4,10,18,.4);
            color: rgba(244,248,242,.55);
            cursor: pointer;
            transition: background .16s, color .16s;
        }

        .variant-collapse-btn:hover {
            background: rgba(240,189,66,.12);
            color: #f0bd42;
            border-color: rgba(240,189,66,.3);
        }

        .variant-collapse-btn svg {
            width: 14px;
            height: 14px;
            transition: transform .22s ease;
        }

        .room-secret-settings.collapsed .variant-collapse-btn svg {
            transform: rotate(180deg);
        }

        .room-secret-settings.collapsed .secret-mode-options,
        .room-secret-settings.collapsed .secret-roles-panel {
            display: none;
        }

        .secret-mode-copy > span {
            display: block;
            color: var(--paper);
            font-size: 13px;
            font-weight: 900;
        }

        .secret-mode-copy small {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .secret-mode-options {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .secret-mode-option {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 56px;
            padding: 8px 10px;
            border: 1px solid rgba(255,238,189,.16);
            border-radius: 8px;
            color: rgba(244,248,242,.72);
            background: rgba(4,10,18,.48);
            cursor: pointer;
            text-align: left;
            transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
        }

        .secret-mode-option svg {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .secret-mode-option span {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .secret-mode-option b {
            color: inherit;
            font-size: 13px;
        }

        .secret-mode-option small {
            color: var(--muted);
            font-size: 11px;
        }

        .secret-mode-option.active {
            border-color: rgba(40,214,194,.55);
            color: #7df8e8;
            background: rgba(40,214,194,.13);
            box-shadow: inset 0 0 0 1px rgba(40,214,194,.14);
        }

        .secret-mode-option.special.active {
            border-color: rgba(240,189,66,.58);
            color: #fff7c2;
            background: linear-gradient(135deg, rgba(240,189,66,.18), rgba(255,79,109,.10));
            box-shadow: 0 0 18px rgba(240,189,66,.10), inset 0 0 0 1px rgba(240,189,66,.12);
        }

        .secret-roles-panel {
            display: grid;
            gap: 12px;
            padding: 12px;
            border: 1px solid rgba(240, 189, 66, 0.28);
            border-radius: var(--radius);
            background: linear-gradient(145deg, rgba(7, 12, 24, 0.82), rgba(34, 18, 35, 0.72));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }

        .secret-roles-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 96px;
            gap: 12px;
            align-items: end;
        }

        .secret-roles-head b {
            display: block;
            color: #fff7c2;
            font-size: 13px;
        }

        .secret-roles-head small,
        .secret-count-field span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .secret-count-field {
            display: grid;
            gap: 5px;
        }

        .secret-count-field input {
            min-height: 38px;
            border: 1px solid rgba(240, 189, 66, 0.34);
            border-radius: var(--radius);
            color: #fff7c2;
            background: rgba(240, 189, 66, 0.08);
            text-align: center;
            font-weight: 900;
        }

        .secret-role-settings-list {
            display: grid;
            gap: 8px;
        }

        .secret-role-setting {
            display: grid;
            grid-template-columns: minmax(210px, 1.35fr) minmax(155px, .8fr);
            gap: 10px;
            align-items: center;
            padding: 9px;
            border: 1px solid rgba(255,238,189,.12);
            border-radius: 8px;
            background: rgba(4, 10, 18, 0.42);
        }

        .secret-role-main {
            display: grid;
            gap: 5px;
            min-width: 0;
        }

        .secret-role-main label {
            display: flex;
            gap: 8px;
            align-items: center;
            color: var(--paper);
            font-size: 13px;
            font-weight: 800;
        }

        .secret-role-main small {
            padding-left: 26px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.35;
        }

        .secret-role-main input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--teal);
        }

        .secret-role-icon {
            display: grid;
            width: 30px;
            height: 30px;
            flex-shrink: 0;
            place-items: center;
            border: 1px solid rgba(125,248,232,.28);
            border-radius: 8px;
            color: #7df8e8;
            background: rgba(40,214,194,.10);
        }

        .secret-role-icon.spy {
            border-color: rgba(255,115,92,.35);
            color: #ff9f8a;
            background: rgba(255,79,109,.12);
        }

        .secret-role-icon svg {
            width: 18px;
            height: 18px;
        }

        .secret-role-label {
            min-width: 0;
        }

        .secret-role-chance {
            display: grid;
            gap: 7px;
        }

        .secret-role-chance-head {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            align-items: center;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
        }

        .secret-role-chance-head b {
            color: #d7f75b;
            font-size: 12px;
            font-weight: 900;
        }

        .secret-role-chance input {
            width: 100%;
            accent-color: #f0bd42;
        }
        .secret-role-warning {
            margin: 0;
            padding: 9px 10px;
            border: 1px solid rgba(240,189,66,.34);
            border-radius: 8px;
            background: rgba(240,189,66,.10);
            color: #fff7c2;
            font-size: 12px;
            line-height: 1.4;
        }

        @media (max-width: 640px) {
            .secret-roles-head,
            .secret-role-setting {
                grid-template-columns: 1fr;
            }

            .secret-mode-options {
                grid-template-columns: 1fr;
            }
        }

        .category-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .category-option {
            position: relative;
            cursor: pointer;
        }

        .category-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .category-option span {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 7px 10px;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: 999px;
            color: rgba(244, 248, 242, 0.78);
            background: rgba(4, 10, 18, 0.46);
            font-size: 12px;
            font-weight: 900;
            transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
        }

        .category-option input:checked + span {
            border-color: rgba(240, 189, 66, 0.62);
            color: #fff7c2;
            background: rgba(240, 189, 66, 0.18);
        }

        .custom-word-box {
            display: grid;
            gap: 10px;
            padding: 12px;
            border: 1px solid rgba(255, 238, 189, 0.16);
            border-radius: var(--radius);
            background: rgba(4, 10, 18, 0.44);
        }

        .collapsible-panel {
            display: grid;
            gap: 14px;
            padding: 12px;
            border: 1px solid rgba(255, 238, 189, 0.16);
            border-radius: var(--radius);
            background: linear-gradient(145deg, rgba(4, 10, 18, 0.54), rgba(40, 214, 194, 0.045));
        }

        .choice-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .choice-row label {
            position: relative;
            cursor: pointer;
        }

        .choice-row input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .choice-row span {
            display: grid;
            min-height: 42px;
            place-items: center;
            padding: 8px 10px;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            color: rgba(244, 248, 242, 0.78);
            background: rgba(4, 10, 18, 0.46);
            font-size: 13px;
            font-weight: 900;
            text-align: center;
        }

        .choice-row input:checked + span {
            border-color: rgba(40, 214, 194, 0.68);
            color: var(--ink);
            background: var(--teal);
        }

        .name-row {
            display: grid;
            grid-template-columns: 54px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
        }

        .avatar-picker,
        .player-avatar {
            display: grid;
            width: 46px;
            height: 46px;
            place-items: center;
            overflow: hidden;
            border: 1px solid rgba(255, 238, 189, 0.28);
            border-radius: 50%;
            color: #fff7c2;
            background: rgba(0, 0, 0, 0.28);
            font-size: 13px;
            font-weight: 1000;
            cursor: pointer;
            background-size: cover;
            background-position: center;
        }

        .avatar-picker input {
            display: none;
        }

        .card-avatar {
            display: grid;
            width: 112px;
            height: 112px;
            place-items: center;
            margin: 0 auto;
            overflow: hidden;
            border: 2px solid rgba(255, 238, 189, 0.42);
            border-radius: 50%;
            color: #fff7c2;
            background: radial-gradient(circle, rgba(240, 189, 66, 0.18), rgba(0, 0, 0, 0.36));
            box-shadow: 0 0 34px rgba(240, 189, 66, 0.16);
            font-size: 36px;
            font-weight: 1000;
            background-size: cover;
            background-position: center;
            transform: translateY(0);
        }

        .avatar-confirm {
            position: fixed;
            inset: 0;
            z-index: 40;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.72);
        }

        .avatar-confirm-card {
            display: grid;
            gap: 14px;
            width: min(360px, 100%);
            padding: 18px;
            border: 1px solid rgba(255, 238, 189, 0.24);
            border-radius: var(--radius);
            background: rgba(7, 12, 24, 0.92);
            text-align: center;
        }

        .avatar-confirm-card img {
            width: 190px;
            height: 190px;
            object-fit: cover;
            border-radius: 50%;
            justify-self: center;
        }

        .avatar-confirm-preview {
            position: relative;
            display: grid;
            place-items: center;
            justify-self: center;
        }

        .avatar-confirm-preview::after {
            content: "";
            position: absolute;
            width: 190px;
            height: 190px;
            border: 3px solid rgba(125, 248, 232, 0.92);
            border-radius: 50%;
            box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28), 0 0 24px rgba(125, 248, 232, 0.30);
            pointer-events: none;
        }

        .avatar-camera-overlay { position:fixed; inset:0; z-index:41; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.84); }
        .avatar-camera-card { display:grid; gap:12px; width:min(300px,100%); padding:16px; border:1px solid rgba(255,238,189,.22); border-radius:8px; background:rgba(7,12,24,.96); text-align:center; }
        .cam-outer { position:relative; width:220px; height:220px; margin:0 auto; }
        .cam-viewport { position:absolute; inset:0; overflow:hidden; border-radius:50%; background:#000; cursor:grab; touch-action:none; user-select:none; }
        .cam-viewport:active { cursor:grabbing; }
        .cam-inner { position:absolute; inset:0; transform-origin:center; }
        .cam-inner video { width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
        .cam-circle { position:absolute; inset:0; border-radius:50%; border:3px solid rgba(125,248,232,.88); box-shadow:0 0 0 9999px rgba(0,0,0,.38), 0 0 22px rgba(125,248,232,.28); pointer-events:none; z-index:2; }
        .cam-hint { font-size:12px; color:rgba(255,247,194,.55); margin:0; }
        .cam-error { color:#ff9a9f; font-size:13px; margin:4px 0 0; }
        .cam-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

        .modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 42;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.74);
        }

        .modal-card {
            display: grid;
            gap: 14px;
            width: min(620px, 100%);
            max-height: min(760px, calc(100vh - 40px));
            overflow: auto;
            padding: 18px;
            border: 1px solid rgba(255, 238, 189, 0.24);
            border-radius: var(--radius);
            background: rgba(7, 12, 24, 0.94);
            box-shadow: var(--shadow);
        }

        .rules-list {
            display: grid;
            counter-reset: rule;
            gap: 0;
            color: var(--muted);
            line-height: 1.45;
        }

        .rules-card {
            width: min(900px, 100%);
            gap: 12px;
            border-color: rgba(240, 189, 66, 0.34);
            background:
                radial-gradient(circle at 18% 0%, rgba(40, 214, 194, 0.14), transparent 28%),
                radial-gradient(circle at 84% 90%, rgba(255, 79, 109, 0.10), transparent 28%),
                linear-gradient(145deg, rgba(7, 12, 24, 0.97), rgba(21, 13, 29, 0.95));
        }

        .rules-intro {
            padding: 12px;
            border: 1px solid rgba(255, 238, 189, 0.16);
            border-radius: var(--radius);
            color: rgba(244, 248, 242, 0.90);
            background: rgba(4, 10, 18, 0.42);
            font-weight: 750;
        }

        .rules-list p {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr);
            gap: 10px;
            align-items: start;
            padding: 11px 0;
            border-bottom: 1px solid rgba(255, 238, 189, 0.10);
        }

        .rules-list p::before {
            display: grid;
            width: 30px;
            height: 30px;
            place-items: center;
            border: 1px solid rgba(240, 189, 66, 0.48);
            border-radius: 50%;
            color: #101211;
            background: linear-gradient(135deg, #7df8e8, #d7f75b);
            content: counter(rule);
            counter-increment: rule;
            font-size: 13px;
            font-weight: 1000;
        }

        .rules-list b {
            color: #fff7c2;
        }

        /* ═══ COMIC STRIP ═══ */
        .rules-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .rules-header h2 { margin: 0; }

        .rules-tagline {
            color: rgba(244, 248, 242, 0.50);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin: 4px 0 0;
        }

        .rules-close-x {
            flex-shrink: 0;
            display: grid;
            width: 30px; height: 30px;
            place-items: center;
            border: 1px solid rgba(255,238,189,.22);
            border-radius: 50%;
            background: rgba(255,238,189,.08);
            color: rgba(244,248,242,.70);
            font-size: 16px;
            cursor: pointer;
            line-height: 1;
        }

        .rules-close-x:hover { background: rgba(255,238,189,.18); color: #fff7c2; }

        .rules-mode-tabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .rules-mode-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 8px 12px;
            border: 1px solid rgba(255,238,189,.18);
            border-radius: 8px;
            color: rgba(244,248,242,.70);
            background: rgba(4,10,18,.42);
            cursor: pointer;
            font-size: 13px;
            font-weight: 900;
            transition: border-color .18s, color .18s, background .18s;
        }

        .rules-mode-tab svg {
            width: 20px;
            height: 20px;
        }

        .rules-mode-tab.active {
            border-color: rgba(40,214,194,.5);
            color: #7df8e8;
            background: rgba(40,214,194,.12);
        }

        .rules-mode-tab.special.active {
            border-color: rgba(240,189,66,.54);
            color: #fff7c2;
            background: linear-gradient(135deg, rgba(240,189,66,.17), rgba(255,79,109,.10));
        }

        .rules-mode-panel {
            display: grid;
            gap: 10px;
        }

        .rules-mode-panel[hidden] {
            display: none;
        }

        .comic-strip { display: grid; gap: 8px; }

        .comic-step {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 7px;
            background: rgba(255, 247, 194, 0.07);
            border: 1px solid rgba(255, 238, 189, 0.18);
            font-size: 13px;
            font-weight: 900;
            color: rgba(244, 248, 242, 0.88);
            line-height: 1.3;
        }

        .comic-step::before {
            content: attr(data-num);
            display: grid;
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            place-items: center;
            border-radius: 50%;
            background: linear-gradient(135deg, #7df8e8, #d7f75b);
            color: #101211;
            font-size: 12px;
            font-weight: 1000;
        }

        /* Panel Cywil / Wtyka */
        .comic-cards-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .comic-role {
            border-radius: 10px;
            overflow: hidden;
            display: grid;
        }

        .cywil-panel {
            border: 1px solid rgba(125, 248, 232, 0.38);
            background: linear-gradient(160deg, rgba(40,214,194,.10), rgba(40,214,194,.04));
        }

        .spy-panel {
            border: 1px solid rgba(255, 79, 109, 0.38);
            background: linear-gradient(160deg, rgba(255,79,109,.10), rgba(255,79,109,.04));
        }

        .comic-role-head {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 11px;
            background: rgba(0,0,0,.28);
            border-bottom: 1px solid rgba(255,238,189,.08);
        }

        .role-badge {
            font-size: 10px;
            font-weight: 1000;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            padding: 3px 9px;
            border-radius: 4px;
        }

        .cywil-badge { background: rgba(125,248,232,.24); color: #7df8e8; }
        .spy-badge   { background: rgba(255,79,109,.28);  color: #ff9f8a; }

        .comic-char-scene {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding: 10px 12px 6px;
            min-height: 88px;
        }

        .spy-panel .comic-char-scene { flex-direction: row-reverse; }

        .comic-char {
            width: 64px; height: 64px;
            border-radius: 50%;
            object-fit: cover;
            object-position: top center;
            flex-shrink: 0;
            border: 2px solid rgba(255,238,189,.22);
            box-shadow: 0 6px 18px rgba(0,0,0,.44);
        }

        .cywil-panel .comic-char { border-color: rgba(125,248,232,.48); box-shadow: 0 0 18px rgba(125,248,232,.18), 0 6px 18px rgba(0,0,0,.44); }
        .spy-panel   .comic-char { border-color: rgba(255,79,109,.48);  box-shadow: 0 0 18px rgba(255,79,109,.18),  0 6px 18px rgba(0,0,0,.44); }

        .comic-bubble {
            position: relative;
            padding: 7px 11px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.35;
            flex: 1;
        }

        .cywil-bubble {
            background: rgba(125,248,232,.18);
            color: #c6fdf6;
            border: 1px solid rgba(125,248,232,.28);
        }

        .cywil-bubble::before {
            content: '';
            position: absolute;
            left: -7px; bottom: 12px;
            border: 7px solid transparent;
            border-right-color: rgba(125,248,232,.18);
            border-left: 0;
        }

        .spy-bubble {
            background: rgba(255,79,109,.18);
            color: #ffb8aa;
            border: 1px solid rgba(255,79,109,.28);
            text-align: right;
        }

        .spy-bubble::after {
            content: '';
            position: absolute;
            right: -7px; bottom: 12px;
            border: 7px solid transparent;
            border-left-color: rgba(255,79,109,.18);
            border-right: 0;
        }

        .comic-card-display {
            margin: 0 11px 11px;
            padding: 11px;
            border-radius: 8px;
            text-align: center;
            font-size: clamp(14px, 2.8vw, 20px);
            font-weight: 1000;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .cywil-card-display {
            background: rgba(125,248,232,.12);
            border: 1px solid rgba(125,248,232,.26);
            color: #7df8e8;
        }

        .spy-card-display {
            background: rgba(255,79,109,.12);
            border: 1px solid rgba(255,79,109,.26);
            color: #ff9f8a;
        }

        /* Table scene */
        .comic-table-scene {
            padding: 12px;
            border: 1px solid rgba(255,238,189,.16);
            border-radius: 10px;
            background: rgba(5,12,22,.46);
        }

        .comic-player-row {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            align-items: flex-end;
        }

        .comic-player {
            display: grid;
            place-items: center;
            gap: 5px;
            width: 70px;
        }

        .comic-player img {
            width: 52px; height: 52px;
            border-radius: 50%;
            object-fit: cover;
            object-position: top center;
            border: 2px solid rgba(255,238,189,.20);
            box-shadow: 0 4px 14px rgba(0,0,0,.42);
        }

        .comic-player.is-spy img {
            border-color: rgba(255,79,109,.54);
            box-shadow: 0 0 14px rgba(255,79,109,.22), 0 4px 14px rgba(0,0,0,.42);
        }

        .comic-bubble-sm {
            font-size: 11px;
            font-weight: 800;
            padding: 3px 7px;
            border-radius: 6px;
            background: rgba(255,238,189,.10);
            color: rgba(244,248,242,.80);
            text-align: center;
            white-space: nowrap;
            max-width: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .comic-bubble-sm.sus {
            background: rgba(255,79,109,.22);
            color: #ff9f8a;
            border: 1px solid rgba(255,79,109,.28);
        }

        .comic-sus-note {
            margin-top: 10px;
            text-align: right;
            font-size: 12px;
            font-weight: 900;
            color: #f0bd42;
            letter-spacing: 0.03em;
        }

        /* Reveal scene */
        .comic-reveal-scene {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px;
            border: 1px solid rgba(240,189,66,.32);
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(240,189,66,.08), rgba(255,79,109,.06));
        }

        .comic-reveal-img {
            width: 70px; height: 70px;
            border-radius: 50%;
            object-fit: cover;
            object-position: top center;
            flex-shrink: 0;
            filter: grayscale(50%) brightness(0.85);
            border: 2px solid rgba(255,79,109,.60);
            box-shadow: 0 0 0 3px rgba(255,79,109,.18), 0 6px 20px rgba(0,0,0,.50);
        }

        .comic-reveal-copy { display: grid; gap: 6px; }

        .reveal-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 5px;
            background: rgba(255,79,109,.28);
            border: 1px solid rgba(255,79,109,.38);
            color: #ff9f8a;
            font-size: 11px;
            font-weight: 1000;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            width: max-content;
        }

        .reveal-msg {
            font-size: 15px;
            font-weight: 900;
            color: rgba(244,248,242,.92);
            line-height: 1.35;
        }

        .reveal-win {
            font-size: 12px;
            font-weight: 700;
            color: rgba(244,248,242,.56);
        }

        /* Quick rules grid */
        .rules-quick {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
        }

        .rules-quick-item {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            padding: 10px 11px;
            border: 1px solid rgba(255,238,189,.11);
            border-radius: 8px;
            background: rgba(255,247,194,.04);
            font-size: 12px;
            font-weight: 700;
            color: rgba(244,248,242,.78);
            line-height: 1.4;
        }

        .rq-num {
            display: grid;
            width: 22px; height: 22px;
            place-items: center;
            border-radius: 50%;
            background: linear-gradient(135deg, #7df8e8, #d7f75b);
            color: #101211;
            font-size: 11px;
            font-weight: 1000;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .rules-quick b { color: #fff7c2; }

        .rules-secret-intro {
            display: grid;
            gap: 7px;
            padding: 12px;
            border: 1px solid rgba(240,189,66,.26);
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(240,189,66,.11), rgba(40,214,194,.06));
        }

        .rules-secret-intro b {
            color: #fff7c2;
            font-size: 15px;
        }

        .rules-secret-intro p {
            margin: 0;
            color: rgba(244,248,242,.82);
            font-size: 13px;
            line-height: 1.45;
        }

        .rules-secret-meta {
            color: #d7f75b;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .rules-role-columns {
            display: grid;
            grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr);
            gap: 10px;
        }

        .rules-role-team {
            display: grid;
            align-content: start;
            gap: 8px;
        }

        .rules-role-team h3 {
            margin: 0;
            color: rgba(244,248,242,.62);
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .rules-role-card {
            display: grid;
            gap: 5px;
            padding: 9px;
            border: 1px solid rgba(125,248,232,.2);
            border-radius: 8px;
            background: rgba(40,214,194,.06);
        }

        .rules-role-card.spy {
            border-color: rgba(255,115,92,.26);
            background: rgba(255,79,109,.07);
        }

        .rules-role-card-head {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .rules-role-card-head b {
            color: var(--paper);
            font-size: 13px;
        }

        .rules-role-card p {
            margin: 0;
            padding-left: 38px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.4;
        }

        .rules-role-tag {
            width: max-content;
            margin-left: 38px;
            padding: 3px 7px;
            border-radius: 5px;
            color: #d7f75b;
            background: rgba(215,247,91,.10);
            font-size: 10px;
            font-weight: 900;
        }

        .rules-secret-flow {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
        }

        .rules-secret-flow div {
            padding: 9px;
            border: 1px solid rgba(255,238,189,.12);
            border-radius: 8px;
            color: rgba(244,248,242,.76);
            background: rgba(4,10,18,.36);
            font-size: 11px;
            line-height: 1.4;
        }

        .rules-secret-flow b {
            display: block;
            color: #fff7c2;
            font-size: 12px;
        }

        .profile-edit-grid {
            display: grid;
            grid-template-columns: 86px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
        }

        .profile-pref-section {
            display: grid;
            gap: 8px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 238, 189, 0.14);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.04);
        }

        .profile-pref-section-title {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .05em;
            color: rgba(255, 247, 194, 0.60);
            text-transform: uppercase;
        }

        .profile-pref-toggle {
            display: flex;
            gap: 10px;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            color: rgba(244, 248, 242, 0.88);
            user-select: none;
        }

        .profile-pref-toggle input[type="checkbox"] {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            cursor: pointer;
            accent-color: #28d6c2;
        }

        .prem-appear-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 10px;
            border: 1px solid rgba(240, 189, 66, 0.30);
            border-radius: 8px;
            background: rgba(240, 189, 66, 0.07);
            color: #f0bd42;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
            transition: background .18s, border-color .18s;
        }

        .prem-appear-toggle:hover {
            border-color: rgba(240, 189, 66, 0.52);
            background: rgba(240, 189, 66, 0.13);
        }

        .prem-appear-toggle .prem-toggle-arrow {
            margin-left: auto;
        }

        .profile-prem-field {
            display: grid;
            gap: 4px;
        }

        .profile-prem-field label {
            font-size: 12px;
            color: rgba(244, 248, 242, 0.66);
        }

        .profile-prem-field select.text-input {
            padding: 5px 8px;
            font-size: 13px;
        }

        .prem-appear-save-row {
            display: flex;
            justify-content: flex-end;
            margin-top: 4px;
        }

        .prem-appear-save-row .btn {
            padding: 6px 16px;
            font-size: 13px;
        }

        .player-tile.self-profile {
            border-color: rgba(40, 214, 194, 0.42);
        }

        .game-timer {
            display: inline-flex;
            width: max-content;
            max-width: 100%;
            align-items: center;
            gap: 7px;
            min-height: 30px;
            padding: 5px 10px;
            border: 1px solid rgba(240, 189, 66, 0.42);
            border-radius: 999px;
            color: #fff7c2;
            background: rgba(5, 12, 22, 0.72);
            font-size: 12px;
            font-weight: 1000;
            text-transform: uppercase;
        }

        .game-timer[data-urgent="1"] {
            border-color: rgba(255, 115, 92, 0.58);
            color: #ffdeda;
            animation: timerUrgentPulse 1s ease-in-out infinite;
        }

        @keyframes timerUrgentPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.55; }
        }

        .modes {
            display: grid;
            gap: 16px;
        }

        .mode-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .mode-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 196px;
            gap: 10px;
            padding: 18px 16px 14px;
            overflow: hidden;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            color: var(--paper);
            background:
                linear-gradient(160deg, rgba(4, 10, 18, 0.78), rgba(244, 248, 242, 0.04)),
                rgba(4, 10, 18, 0.52);
            text-align: left;
            cursor: pointer;
            text-decoration: none;
            transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
        }

        .mode-card::before {
            position: absolute;
            inset: 0;
            content: "";
            pointer-events: none;
            transition: opacity 200ms ease;
        }

        .mode-card[data-mode="local"] {
            border-color: rgba(212, 160, 32, 0.24);
        }
        .mode-card[data-mode="local"]::before {
            background: radial-gradient(ellipse at 10% 0%, rgba(212, 160, 32, 0.26) 0%, transparent 60%),
                        linear-gradient(160deg, rgba(212, 160, 32, 0.12), transparent 55%);
        }

        .mode-card[data-mode="online"] {
            border-color: rgba(56, 182, 255, 0.22);
        }
        .mode-card[data-mode="online"]::before {
            background: radial-gradient(ellipse at 10% 0%, rgba(56, 182, 255, 0.22) 0%, transparent 60%),
                        linear-gradient(160deg, rgba(56, 182, 255, 0.10), transparent 55%);
        }

        .mode-card.mode-link {
            border-color: rgba(168, 80, 255, 0.24);
        }
        .mode-card.mode-link::before {
            background: radial-gradient(ellipse at 10% 0%, rgba(168, 80, 255, 0.24) 0%, transparent 60%),
                        linear-gradient(160deg, rgba(168, 80, 255, 0.10), transparent 55%);
        }

        .mode-card > :not(.mode-card-img) {
            position: relative;
            z-index: 1;
        }

        .mode-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38);
        }
        .mode-card[data-mode="local"]:hover  { border-color: rgba(212, 160, 32, 0.58);  box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 32px rgba(212,160,32,.18); }
        .mode-card[data-mode="online"]:hover { border-color: rgba(56, 182, 255, 0.55);  box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 32px rgba(56,182,255,.16); }
        .mode-card.mode-link:hover           { border-color: rgba(168, 80, 255, 0.58);  box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 32px rgba(168,80,255,.18); }

        .mode-card.active {
            transform: translateY(-3px);
            border-color: rgba(240, 189, 66, 0.82);
            outline: 3px solid rgba(40, 214, 194, 0.46);
            outline-offset: -6px;
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), 0 0 28px rgba(240, 189, 66, 0.20);
        }

        .mode-card.active .mode-card-pill::after {
            content: "wybrane";
            position: absolute;
            top: 50%;
            left: calc(100% + 6px);
            transform: translateY(-50%);
            z-index: 2;
            padding: 3px 8px;
            border-radius: 999px;
            color: #101211;
            background: linear-gradient(135deg, #7df8e8, #d7f75b);
            font-size: 10px;
            font-weight: 1000;
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
        }

        .mode-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 8px;
        }

        .mode-card-img {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-54%);
            width: 96px;
            height: 96px;
            object-fit: contain;
            pointer-events: none;
            z-index: 0;
            filter: drop-shadow(0 4px 16px rgba(0,0,0,.55));
            opacity: 0.92;
            flex-shrink: 0;
        }

        .mode-card-pill {
            position: relative;
            align-self: flex-start;
            padding: 3px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 1000;
            letter-spacing: .04em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .mode-card[data-mode="local"]  .mode-card-pill { background: rgba(212,160,32,.16);  color: #f4c640;  border: 1px solid rgba(212,160,32,.34); }
        .mode-card[data-mode="online"] .mode-card-pill { background: rgba(56,182,255,.14);  color: #80ccff;  border: 1px solid rgba(56,182,255,.30); }
        .mode-card.mode-link           .mode-card-pill { background: rgba(168,80,255,.14);  color: #c898ff;  border: 1px solid rgba(168,80,255,.30); }

        .mode-card-body {
            display: block;
            flex: 1;
            padding-right: 88px;
        }

        .mode-card b {
            display: block;
            color: #fff7c2;
            font-size: 17px;
            font-weight: 1000;
            letter-spacing: -.01em;
            line-height: 1.2;
            margin-bottom: 4px;
        }

        .mode-card-desc {
            display: block;
            color: #9baead;
            font-size: 13px;
            line-height: 1.45;
        }

        .mode-card-tag {
            display: block;
            color: #5d7470;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .03em;
            text-transform: uppercase;
            padding-top: 6px;
            border-top: 1px solid rgba(255,238,189,.08);
        }
        .mode-card.mode-link .mode-card-tag {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .mode-card.mode-link .mode-card-tag::after {
            content: "→";
            font-size: 16px;
            color: #c898ff;
            font-weight: 900;
            opacity: .7;
        }

        .mode-card span {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.4;
        }

        .mode-view {
            display: none;
        }

        .mode-unselected .mode-view {
            display: none;
        }

        .mode-view.active,
        .game-view.active {
            display: block;
        }

        .settings-slot:empty {
            display: none;
        }

        .settings-slot {
            margin-bottom: 16px;
        }

        .settings-slot[data-settings-slot="bottom"] {
            margin-top: 16px;
            margin-bottom: 0;
        }

        #onlineMode.join-tab .settings-slot {
            display: none;
        }

        .game-settings {
            display: grid;
            gap: 12px;
            padding: 12px;
            border: 1px solid rgba(255, 238, 189, 0.16);
            border-radius: var(--radius);
            background:
                radial-gradient(circle at 12% 0%, rgba(40, 214, 194, 0.12), transparent 34%),
                rgba(4, 10, 18, 0.38);
        }

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

        .game-settings-bottom {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: stretch;
        }

        .game-settings-bottom > #categoryToggleBtn,
        .game-settings-bottom > #categoryPanel {
            grid-column: 1 / -1;
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 16px;
        }

        .center-actions {
            justify-content: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            gap: 9px;
            padding: 0 14px;
            border-radius: var(--radius);
            color: var(--ink);
            background: var(--lime);
            font-weight: 900;
            cursor: pointer;
            text-decoration: none;
            transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            filter: brightness(1.06);
        }

        .btn.secondary {
            color: var(--paper);
            border: 1px solid rgba(244,248,242,.18);
            background: linear-gradient(135deg, rgba(40,214,194,.10), rgba(240,189,66,.06) 50%, rgba(255,115,92,.08)), rgba(4,10,18,.52);
            box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
        }

        .btn.secondary:hover {
            border-color: rgba(125,248,232,.36);
            box-shadow: 0 8px 22px rgba(0,0,0,.30), 0 0 14px rgba(40,214,194,.10), inset 0 1px 0 rgba(255,255,255,.06);
        }

        .btn.coral {
            color: #fff;
            background: linear-gradient(135deg, #ff9a7c 0%, #ff735c 48%, #d94028 100%);
            box-shadow: 0 8px 22px rgba(255,115,92,.34), inset 0 1px 0 rgba(255,255,255,.22);
            border: none;
        }

        .btn.coral:hover {
            box-shadow: 0 12px 32px rgba(255,115,92,.52), inset 0 1px 0 rgba(255,255,255,.22);
        }

        .btn.danger {
            color: #fff;
            background: linear-gradient(135deg, #ff4f6d 0%, #c9183a 100%);
            box-shadow: 0 6px 20px rgba(201,24,58,.28), inset 0 1px 0 rgba(255,255,255,.16);
            border: none;
        }

        .btn.danger:hover {
            box-shadow: 0 10px 28px rgba(201,24,58,.44), inset 0 1px 0 rgba(255,255,255,.16);
        }

        .btn.purple {
            color: #fff;
            border: 1px solid rgba(219, 188, 255, 0.46);
            background: linear-gradient(135deg, #8a3ffc 0%, #5f2eea 54%, #34136f 100%);
            box-shadow: 0 8px 24px rgba(95,46,234,.36), inset 0 1px 0 rgba(255,255,255,.18);
            text-shadow: 0 1px 8px rgba(0,0,0,.42);
        }

        .btn.purple:hover {
            border-color: rgba(235, 216, 255, 0.68);
            box-shadow: 0 12px 32px rgba(95,46,234,.54), inset 0 1px 0 rgba(255,255,255,.22);
        }

        .btn.teal {
            color: var(--ink);
            background: linear-gradient(135deg, #7df8e8 0%, #28d6c2 55%, #d7f75b 100%);
            box-shadow: 0 8px 22px rgba(40,214,194,.28), inset 0 1px 0 rgba(255,255,255,.26);
            border: none;
        }

        .btn.teal:hover {
            box-shadow: 0 12px 32px rgba(40,214,194,.44), inset 0 1px 0 rgba(255,255,255,.26);
        }

        .play-btn {
            min-width: min(100%, 260px);
            min-height: 52px;
            padding-inline: 34px;
            font-size: 17px;
            animation: playBtnGlow 2.8s ease-in-out infinite;
        }

        @keyframes playBtnGlow {
            0%, 100% { box-shadow: 0 8px 22px rgba(40,214,194,.28), inset 0 1px 0 rgba(255,255,255,.26); }
            50%       { box-shadow: 0 16px 40px rgba(40,214,194,.54), 0 0 44px rgba(125,248,232,.20), inset 0 1px 0 rgba(255,255,255,.26); }
        }

        .play-btn:hover {
            animation: none;
            box-shadow: 0 18px 44px rgba(40,214,194,.60), 0 0 52px rgba(125,248,232,.26), inset 0 1px 0 rgba(255,255,255,.26);
        }

        #createRoomBtn,
        #joinRoomBtn {
            min-width: min(100%, 280px);
            min-height: 66px;
            padding-inline: 28px;
            font-size: 19px;
            animation: playBtnGlow 2.8s ease-in-out infinite;
        }

        #joinRoomBtn {
            background: linear-gradient(135deg, #ff9a7c 0%, #ff735c 48%, #d94028 100%);
            box-shadow: 0 8px 22px rgba(255,115,92,.34), inset 0 1px 0 rgba(255,255,255,.22);
            animation: joinBtnGlow 2.8s ease-in-out infinite;
        }

        @keyframes joinBtnGlow {
            0%, 100% { box-shadow: 0 8px 22px rgba(255,115,92,.34), inset 0 1px 0 rgba(255,255,255,.22); }
            50%       { box-shadow: 0 16px 38px rgba(255,115,92,.58), 0 0 40px rgba(255,155,92,.18), inset 0 1px 0 rgba(255,255,255,.22); }
        }

        #joinRoomBtn:hover {
            animation: none;
            box-shadow: 0 18px 44px rgba(255,115,92,.62), inset 0 1px 0 rgba(255,255,255,.22);
        }

        #createRoomBtn svg,
        #joinRoomBtn svg {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            filter: drop-shadow(0 0 10px rgba(255, 247, 194, 0.18));
        }

        #onlineMode .segment {
            min-width: min(100%, 330px);
            border-color: rgba(255, 238, 189, 0.28);
            background: rgba(3, 10, 20, 0.58);
        }

        #onlineMode .segment button {
            min-height: 50px;
            padding-inline: 18px;
            color: #fff7c2;
            font-size: 15px;
            background: rgba(244, 248, 242, 0.07);
        }

        #onlineMode .segment button.active {
            color: #101211;
            background: linear-gradient(135deg, #7df8e8, #d7f75b);
            box-shadow: 0 12px 28px rgba(40, 214, 194, 0.16);
        }

        .top-actions .btn.secondary {
            border-color: rgba(255, 238, 189, 0.26);
            color: #fff7c2;
            background:
                linear-gradient(135deg, rgba(40, 214, 194, 0.16), rgba(240, 189, 66, 0.09) 46%, rgba(255, 115, 92, 0.10)),
                rgba(5, 12, 22, 0.60);
        }

        .top-actions .btn.teal {
            color: var(--ink);
            border-color: transparent;
            background: linear-gradient(135deg, #7df8e8, #d7f75b);
        }

        .btn-auth-pair {
            display: flex;
        }
        .btn-auth-pair .btn:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
        }
        .btn-auth-pair .btn:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 1px solid rgba(125, 248, 232, 0.18);
        }
        .btn-auth-pair .btn-register-link {
            color: #7df8e8;
        }

        .btn:disabled,
        .icon-only:disabled {
            cursor: not-allowed;
            opacity: 0.46;
            transform: none;
        }

        .split {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .segment {
            display: inline-grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            padding: 6px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: rgba(4, 10, 18, 0.46);
        }

        .segment button {
            min-height: 38px;
            border-radius: 6px;
            color: var(--muted);
            background: transparent;
            font-weight: 900;
            cursor: pointer;
        }

        .segment button.active {
            color: var(--ink);
            background: var(--teal);
        }

        .names-grid,
        .players-grid {
            gap: 10px;
            margin-top: 14px;
        }

        .names-grid {
            display: grid;
        }

        .players-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }

        .players-grid > .player-tile {
            min-width: 0;
        }

        .room-settings {
            display: grid;
            grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 220px));
            align-items: center;
            gap: 12px;
            margin-top: 14px;
            padding: 12px;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            background: rgba(4, 10, 18, 0.44);
        }

        .room-settings-shell {
            display: grid;
            gap: 10px;
        }

        .room-secret-settings {
            display: grid;
            grid-column: 1 / -1;
            gap: 10px;
        }

        .room-settings-mobile-toggle {
            display: none;
            align-items: center;
            gap: 8px;
            width: 100%;
            margin-top: 14px;
            padding: 10px 13px;
            border: 1px solid rgba(40, 214, 194, 0.24);
            border-radius: var(--radius);
            color: #7df8e8;
            background:
                linear-gradient(135deg, rgba(40, 214, 194, 0.12), rgba(255, 79, 109, 0.08)),
                rgba(4, 10, 18, 0.56);
            font: inherit;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
            text-align: left;
        }

        .room-settings-mobile-toggle svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .room-settings-mobile-toggle .prem-toggle-arrow {
            color: #ff8aa0;
        }

        .room-setting-copy {
            display: grid;
            gap: 4px;
        }

        .room-counter-wrap {
            display: grid;
            gap: 6px;
        }

        .room-counter-label {
            color: rgba(244, 248, 242, 0.70);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .04em;
            text-align: center;
            text-transform: uppercase;
        }

        .prem-settings-toggle {
            display: flex;
            align-items: center;
            gap: 7px;
            width: 100%;
            margin-top: 10px;
            padding: 9px 13px;
            border: 1px solid rgba(244,248,242,.18);
            border-radius: var(--radius);
            background: linear-gradient(135deg, rgba(40,214,194,.10), rgba(240,189,66,.06) 50%, rgba(255,115,92,.08)), rgba(4,10,18,.52);
            box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
            color: var(--paper);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            transition: background .18s, border-color .18s, box-shadow .18s;
        }
        .prem-settings-toggle:hover {
            border-color: rgba(125,248,232,.36);
            box-shadow: 0 8px 22px rgba(0,0,0,.30), 0 0 14px rgba(40,214,194,.10), inset 0 1px 0 rgba(255,255,255,.06);
        }
        .prem-settings-toggle svg { flex-shrink: 0; color: var(--paper); opacity: .65; }

        .prem-toggle-arrow {
            margin-left: auto;
            display: inline-block;
            font-size: 16px;
            line-height: 1;
            color: var(--paper);
            opacity: .55;
            transition: transform .22s ease;
            transform: rotate(0deg);
        }
        .prem-toggle-arrow.open { transform: rotate(90deg); }

        .room-settings-premium {
            display: grid;
            gap: 8px;
            margin-top: 2px;
            padding: 12px;
            border: 1px solid rgba(244,248,242,.12);
            border-radius: var(--radius);
            background: rgba(4,10,18,.44);
        }

        .prem-settings-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            font-size: 13px;
            font-weight: 900;
            color: #fff7c2;
        }

        .prem-settings-head svg { flex-shrink: 0; color: #f0bd42; }

        .prem-badge-inline {
            padding: 2px 7px;
            border: 1px solid rgba(240,189,66,.52);
            border-radius: 20px;
            background: rgba(240,189,66,.14);
            color: #f0bd42;
            font-size: 11px;
            font-weight: 1000;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .room-counter {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) 42px;
            align-items: center;
            gap: 8px;
        }

        .room-counter output {
            display: grid;
            min-height: 42px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            color: var(--lime);
            background: rgba(4, 10, 18, 0.48);
            font-size: 20px;
            font-weight: 1000;
        }

        .player-tile {
            position: relative;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            min-height: 72px;
            gap: 10px;
            overflow: hidden;
            padding: 10px 12px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background:
                radial-gradient(circle at 10% 0%, rgba(125, 248, 232, 0.14), transparent 42%),
                linear-gradient(145deg, rgba(255,255,255,.095), rgba(4,10,18,.54));
            box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
            font-weight: 800;
            isolation: isolate;
            animation: stage11PlayerIn 420ms cubic-bezier(.2,.85,.25,1) both;
            transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
        }

        .player-tile::before {
            position: absolute;
            inset: -2px;
            z-index: -1;
            content: "";
            background:
                linear-gradient(120deg, transparent 0 18%, rgba(125,248,232,.16), transparent 42%),
                radial-gradient(circle at 92% 16%, rgba(240,189,66,.16), transparent 28%);
            opacity: .76;
            pointer-events: none;
        }

        .player-tile:hover {
            transform: translateY(-2px);
            border-color: rgba(125, 248, 232, 0.36);
            box-shadow: 0 24px 56px rgba(0,0,0,.34), 0 0 28px rgba(40,214,194,.10), inset 0 1px 0 rgba(255,255,255,.10);
        }

        .player-tile .player-avatar {
            flex: 0 0 auto;
            width: 44px;
            height: 44px;
            border-radius: 15px;
        }

        .player-card-main {
            display: grid;
            min-width: 0;
            gap: 6px;
        }

        .player-name-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
        }

        .player-tile .player-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            font-weight: 1000;
            letter-spacing: .01em;
        }

        .player-status-pill {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 24px;
            padding: 2px 8px;
            border: 1px solid rgba(125,248,232,.34);
            border-radius: 999px;
            color: #7df8e8;
            background: rgba(40,214,194,.10);
            font-size: 10px;
            font-weight: 1000;
            letter-spacing: .08em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .player-status-pill::before {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 0 0 12px currentColor;
            content: "";
            animation: stage11ReadyPulse 1.6s ease-in-out infinite;
        }

        .player-status-pill.host {
            border-color: rgba(240,189,66,.42);
            color: #fff0ae;
            background: rgba(240,189,66,.12);
        }

        .player-card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: center;
        }

        .player-meta-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 21px;
            padding: 1px 7px;
            border: 1px solid rgba(255,238,189,.15);
            border-radius: 999px;
            color: rgba(244,248,242,.82);
            background: rgba(4,10,18,.36);
            font-size: 9px;
            font-weight: 900;
            white-space: nowrap;
        }

        .player-meta-pill.premium {
            border-color: rgba(240,189,66,.42);
            color: #fff0ae;
            background: linear-gradient(135deg, rgba(240,189,66,.18), rgba(255,247,194,.06));
        }

        .player-meta-pill.level {
            border-color: rgba(215,247,91,.28);
            color: #d7f75b;
        }

        .player-meta-pill.level.lvl-tier-rookie {
            border-color: rgba(154,168,184,.34);
            color: #d8e1ea;
        }

        .player-meta-pill.level.lvl-tier-scout {
            border-color: rgba(125,248,232,.34);
            color: #7df8e8;
            background: rgba(40,214,194,.10);
        }

        .player-meta-pill.level.lvl-tier-agent {
            border-color: rgba(84,182,255,.42);
            color: #9ed7ff;
            background: rgba(84,182,255,.10);
        }

        .player-meta-pill.level.lvl-tier-veteran {
            border-color: rgba(184,121,255,.44);
            color: #d9b8ff;
            background: rgba(184,121,255,.11);
        }

        .player-meta-pill.level.lvl-tier-elite {
            border-color: rgba(240,189,66,.52);
            color: #fff0ae;
            background: linear-gradient(135deg, rgba(240,189,66,.16), rgba(255,247,194,.05));
        }

        .player-meta-pill.level.lvl-tier-legend,
        .player-meta-pill.level.lvl-tier-mythic {
            border-color: rgba(255,98,77,.54);
            color: #ffd0c9;
            background: linear-gradient(135deg, rgba(255,98,77,.16), rgba(240,189,66,.12));
            box-shadow: 0 0 18px rgba(255,98,77,.12);
        }

        .player-meta-pill.title {
            border-color: rgba(125,248,232,.30);
            color: #7df8e8;
            background: rgba(40,214,194,.10);
        }

        .stage11-player-card .player-card-main {
            grid-column: 2;
            min-width: 0;
        }

        .stage11-player-card .player-status-pill,
        .stage11-player-card .eliminated-status {
            max-width: 100%;
        }

        .stage11-player-card .player-btns {
            justify-self: start;
        }

        .stage11-player-card {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 7px 8px;
            min-height: 0;
            padding: 9px 11px;
        }

        .stage11-player-card > .player-avatar-slot {
            position: relative;
            z-index: 1;
            display: grid;
            width: 68px;
            flex: 0 0 68px;
            place-items: center start;
            overflow: visible;
        }

        .stage11-player-card > .player-avatar-slot > .player-avatar {
            margin: 0;
        }

        .stage11-player-card > .player-name {
            position: relative;
            z-index: 2;
            flex: 1 1 170px;
            max-width: 100%;
        }

        .stage11-player-card > .player-status-pill {
            margin-left: auto;
        }

        .stage11-player-card > .rank-league-badge,
        .stage11-player-card > .player-meta-pill,
        .stage11-player-card > .eliminated-status,
        .stage11-player-card > .player-btns {
            flex: 0 0 auto;
        }

        .stage11-player-card > .player-btns {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        @keyframes stage11PlayerIn {
            from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(4px); }
            to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }

        @keyframes stage11ReadyPulse {
            0%, 100% { opacity: .62; transform: scale(.92); }
            50% { opacity: 1; transform: scale(1.16); }
        }

        .rank-league-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            padding: 2px 8px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 999px;
            color: #f5f7fb;
            background: rgba(255,255,255,.07);
            font-size: 10px;
            font-weight: 1000;
            letter-spacing: .07em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .rank-league-badge.league-bronze { border-color: rgba(183,120,69,.55); background: rgba(183,120,69,.16); color: #ffd2aa; }
        .rank-league-badge.league-silver { border-color: rgba(201,211,223,.55); background: rgba(201,211,223,.14); color: #e8f0f7; }
        .rank-league-badge.league-gold { border-color: rgba(240,189,66,.62); background: rgba(240,189,66,.14); color: #fff0ae; }
        .rank-league-badge.league-platinum { border-color: rgba(100,216,255,.58); background: rgba(100,216,255,.13); color: #caf3ff; }
        .rank-league-badge.league-diamond { border-color: rgba(156,232,255,.68); background: rgba(156,232,255,.13); color: #e4fbff; }
        .rank-league-badge.league-master { border-color: rgba(167,139,250,.62); background: rgba(167,139,250,.15); color: #e6ddff; }
        .rank-league-badge.league-legend { border-color: rgba(255,215,107,.75); background: linear-gradient(135deg, rgba(255,215,107,.20), rgba(255,247,194,.08)); color: #fff7c2; animation: rankLegendGlow 1.8s ease-in-out infinite alternate; }
        @keyframes rankLegendGlow { from { box-shadow: 0 0 0 rgba(255,215,107,0); } to { box-shadow: 0 0 18px rgba(255,215,107,.30); } }

        .player-tile.player-eliminated,
        .turn-order-item.player-eliminated,
        .vote-target-card.player-eliminated {
            border-color: rgba(255, 79, 109, 0.38);
            background: rgba(46, 12, 20, 0.34);
            opacity: 0.64;
        }

        .player-eliminated .player-name,
        .turn-order-item.player-eliminated .player-name,
        .summary-player.player-eliminated .summary-player-name {
            text-decoration: line-through;
            text-decoration-color: rgba(255, 111, 145, 0.88);
            text-decoration-thickness: 2px;
        }

        .player-avatar.player-eliminated-avatar {
            filter: grayscale(0.48) brightness(0.72);
        }

        .eliminated-status {
            flex: 0 0 auto;
            padding: 3px 7px;
            border: 1px solid rgba(255, 111, 145, 0.42);
            border-radius: 999px;
            color: #ffc0cd;
            background: rgba(148, 24, 50, 0.30);
            font-size: 10px;
            font-weight: 900;
            line-height: 1.25;
            white-space: nowrap;
        }

        .eliminated-player-note {
            margin-top: 10px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 111, 145, 0.42);
            border-radius: var(--radius);
            color: #ffd1d9;
            background: rgba(107, 17, 38, 0.36);
            font-size: 13px;
            font-weight: 800;
            text-align: center;
        }

        .message-item.player-eliminated {
            opacity: 0.72;
        }

        .message-content .eliminated-status {
            display: inline-flex;
            margin-left: 6px;
            vertical-align: middle;
        }

        .player-btns {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 6px;
            margin-left: auto;
        }

        .kick-player-btn,
        .friend-add-btn,
        .local-remove-btn {
            display: inline-grid;
            min-width: 34px;
            min-height: 34px;
            margin-left: 0;
            place-items: center;
            border: 1px solid rgba(255, 79, 109, 0.34);
            border-radius: 8px;
            color: #fff;
            background: rgba(255, 79, 109, 0.18);
            font-size: 18px;
            font-weight: 1000;
            cursor: pointer;
        }

        .kick-player-btn:hover,
        .friend-add-btn:hover,
        .local-remove-btn:hover {
            background: rgba(255, 79, 109, 0.32);
        }

        .friend-add-btn {
            border-color: rgba(125, 248, 232, 0.42);
            color: #7df8e8;
            background: rgba(40, 214, 194, 0.16);
        }

        .friend-add-btn:hover {
            background: rgba(40, 214, 194, 0.30);
        }

        .avatar {
            display: grid;
            width: 30px;
            height: 30px;
            place-items: center;
            border-radius: 50%;
            color: var(--ink);
            background: var(--amber);
            font-size: 12px;
            font-weight: 1000;
        }

        .game-view {
            display: none;
            margin-top: 18px;
        }

        .play-surface {
            display: grid;
            min-height: 420px;
            place-items: center;
            padding: 26px;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            background:
                radial-gradient(circle at 50% 16%, rgba(240, 189, 66, 0.14), transparent 32%),
                linear-gradient(135deg, rgba(255, 115, 92, 0.08), transparent 45%),
                linear-gradient(45deg, rgba(40, 214, 194, 0.10), transparent 50%),
                rgba(7, 12, 24, 0.54);
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
        }

        .local-card-stack {
            display: grid;
            width: 100%;
            justify-items: center;
            gap: 12px;
        }

        .card-outside-actions {
            justify-content: center;
            margin-top: 0;
        }

        .secret-card {
            position: relative;
            display: grid;
            width: min(400px, 100%);
            aspect-ratio: 9 / 14;
            min-height: 0;
            grid-template-rows: auto minmax(300px, 1fr) auto auto auto;
            gap: 10px;
            padding: 22px;
            overflow: hidden;
            border: 1px solid rgba(255, 238, 189, 0.36);
            border-radius: var(--radius);
            background:
                linear-gradient(180deg, rgba(255, 247, 194, 0.16), rgba(23, 15, 28, 0.70)),
                radial-gradient(circle at 50% 24%, rgba(40, 214, 194, 0.20), transparent 38%),
                #17101c;
            background-position: center;
            background-size: cover;
            box-shadow: 0 30px 84px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
            text-align: center;
            animation: cardReveal 420ms cubic-bezier(.2,.8,.2,1);
            transform-style: preserve-3d;
        }

        .secret-card.card-cover {
            background-image: url("/assets/optimized/premo.webp");
        }

        .secret-card::before {
            position: absolute;
            inset: 10px;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: 6px;
            content: "";
            pointer-events: none;
        }

        .secret-card::after {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(255, 247, 194, 0.06) 0 1px, transparent 1px 30px),
                radial-gradient(circle at 50% 68%, rgba(240, 189, 66, 0.12), transparent 36%);
            content: "";
            opacity: 0.86;
            pointer-events: none;
        }

        .secret-card > * {
            position: relative;
            z-index: 1;
        }

        .secret-card.cover {
            background:
                url("/assets/optimized/premo.webp") center / cover no-repeat,
                #161320;
        }

        .secret-card.cover {
            animation: cardBackIn 760ms cubic-bezier(.2,.8,.2,1);
        }

        .secret-card.card-civil {
            border-color: rgba(94, 226, 127, 0.58);
            background:
                url("/assets/optimized/prembc.webp") center / cover no-repeat,
                #102018;
        }

        .secret-card.card-spy {
            border-color: rgba(255, 79, 109, 0.62);
            background:
                url("/assets/optimized/prembw.webp") center / cover no-repeat,
                #241315;
        }

        .secret-card.cover.premium-card-theme-classic {
            background:
                url("/assets/optimized/premo.webp") center / cover no-repeat,
                #161320;
        }

        .secret-card.card-civil.premium-card-theme-classic {
            background:
                url("/assets/optimized/premc.webp") center / cover no-repeat,
                #102018;
        }

        .secret-card.card-spy.premium-card-theme-classic {
            background:
                url("/assets/optimized/premw.webp") center / cover no-repeat,
                #241315;
        }

        .secret-card.cover.premium-card-theme-set2 {
            background:
                url("/assets/optimized/prem2po.webp") center / cover no-repeat,
                #161320;
        }

        .secret-card.card-civil.premium-card-theme-set2 {
            background:
                url("/assets/optimized/prem2pc.webp") center / cover no-repeat,
                #102018;
        }

        .secret-card.card-spy.premium-card-theme-set2 {
            background:
                url("/assets/optimized/prem2pw.webp") center / cover no-repeat,
                #241315;
        }

        .secret-card.cover.premium-card-theme-set3 {
            background:
                url("/assets/optimized/prem3po.webp") center / cover no-repeat,
                #161320;
        }

        .secret-card.card-civil.premium-card-theme-set3 {
            background:
                url("/assets/optimized/prem3pc.webp") center / cover no-repeat,
                #102018;
        }

        .secret-card.card-spy.premium-card-theme-set3 {
            background:
                url("/assets/optimized/prem3pw.webp") center / cover no-repeat,
                #241315;
        }

        .secret-card.end-card {
            width: min(430px, 100%);
            grid-template-rows: auto 1fr auto;
            align-items: center;
            border-color: rgba(227, 177, 113, 0.62);
            background:
                linear-gradient(180deg, rgba(3, 8, 18, 0.04), rgba(4, 8, 20, 0.18)),
                url("/assets/optimized/tloend.webp") center / cover no-repeat,
                #06101d;
            box-shadow: 0 34px 92px rgba(0, 0, 0, 0.62), 0 0 48px rgba(40, 214, 194, 0.12);
        }

        .secret-card.end-card .game-timer {
            position: absolute;
            top: 48px;
            left: 50%;
            z-index: 2;
            transform: translateX(-50%);
        }

        .secret-card.card-civil,
        .secret-card.card-spy {
            animation: cardFlipIn 980ms cubic-bezier(.2,.8,.2,1);
        }

        .secret-card.flip-toggle-card {
            will-change: transform;
        }

        /* Animacje kart — tylko przy .card-entering; nie wolno odpalać przy globalnym re-renderze gry */
        .secret-card.cover.flip-toggle-card,
        .secret-card.card-civil.flip-toggle-card,
        .secret-card.card-spy.flip-toggle-card {
            animation: none;
        }

        .secret-card.card-entering.cover.flip-toggle-card {
            animation: cardFlipCoverIn 440ms cubic-bezier(.22, .82, .2, 1);
        }

        .secret-card.card-entering.card-civil.flip-toggle-card,
        .secret-card.card-entering.card-spy.flip-toggle-card {
            animation: cardFlipOpenIn 440ms cubic-bezier(.22, .82, .2, 1);
        }

        .secret-card.cover::after,
        .secret-card.card-civil::after,
        .secret-card.card-spy::after,
        .secret-card.end-card::after {
            background:
                linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.24)),
                radial-gradient(circle at 50% 70%, rgba(0, 0, 0, 0.16), transparent 34%);
            opacity: 0.66;
        }

        .secret-card.end-card::after {
            background:
                radial-gradient(circle at 50% 26%, rgba(125, 248, 232, 0.22), transparent 24%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.30));
            opacity: 0.74;
        }

        .end-card-content {
            display: grid;
            align-self: center;
            justify-items: center;
            gap: 14px;
            width: 100%;
            padding: 0 4px 10px;
            transform: translateY(-30px);
        }

        .end-orb {
            position: relative;
            z-index: 3;
            display: grid;
            width: clamp(120px, 34vw, 168px);
            height: clamp(120px, 34vw, 168px);
            place-items: center;
            margin-top: -52px;
            border: 1px solid rgba(227, 177, 113, 0.56);
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 46%, rgba(125, 248, 232, 0.32), rgba(8, 34, 45, 0.72) 58%, rgba(3, 8, 18, 0.88)),
                rgba(6, 20, 31, 0.84);
            box-shadow:
                0 0 0 12px rgba(125, 248, 232, 0.04),
                0 0 0 22px rgba(227, 177, 113, 0.04),
                0 22px 54px rgba(0, 0, 0, 0.44),
                inset 0 0 32px rgba(125, 248, 232, 0.14);
        }

        .end-orb::before,
        .end-orb::after {
            position: absolute;
            inset: -14px;
            border: 1px solid rgba(125, 248, 232, 0.14);
            border-radius: 50%;
            content: "";
        }

        .end-orb::after {
            inset: 15px;
            border-color: rgba(255, 247, 194, 0.16);
        }

        .end-orb svg {
            width: clamp(56px, 14vw, 78px);
            height: clamp(56px, 14vw, 78px);
            color: #fff7c2;
            filter: drop-shadow(0 0 18px rgba(125, 248, 232, 0.36));
        }

        .secret-card.end-card .role {
            max-width: 340px;
            color: #fff7c2;
            font-size: clamp(28px, 5vw, 44px);
            line-height: 0.96;
            text-shadow: 0 8px 34px rgba(0, 0, 0, 0.72), 0 0 22px rgba(125, 248, 232, 0.22);
        }

        .secret-card.end-card .card-note {
            max-width: 320px;
            color: rgba(244, 248, 242, 0.88);
            text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68);
        }

        .secret-card.card-civil .card-symbol {
            color: #7dff9b;
            background: rgba(6, 45, 25, 0.42);
        }

        .secret-card.card-spy .card-symbol {
            color: #ff9a9f;
            background: rgba(67, 13, 17, 0.44);
        }

        .secret-card.card-civil .word {
            color: #092812;
            background: #dcffe1;
        }

        .secret-card.card-spy .word {
            color: #3a0d0f;
            background: #ffe1df;
        }

        .agent-clue {
            display: grid;
            gap: 3px;
            width: 100%;
            max-width: 280px;
            padding: 9px 12px;
            border: 1px solid rgba(240,189,66,.34);
            border-radius: 8px;
            background: rgba(240,189,66,.12);
            text-align: center;
        }

        .agent-clue span {
            color: rgba(255,247,194,.72);
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .agent-clue b {
            color: #fff7c2;
            font-size: 18px;
            line-height: 1.1;
        }

        .agent-clue small {
            color: rgba(255, 228, 235, 0.76);
            font-size: 10px;
            font-weight: 700;
            line-height: 1.3;
        }

        .card-secret-side {
            display: inline-flex;
            padding: 3px 10px;
            border: 1px solid rgba(255, 92, 128, 0.5);
            border-radius: 999px;
            color: #ffd4df;
            background: rgba(255, 60, 99, 0.17);
            font-size: 11px;
            font-weight: 900;
        }

        .card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .card-identity {
            display: grid;
            align-self: center;
            justify-items: center;
            gap: 4px;
            transform: none;
        }

        .secret-card.cover .card-identity {
            transform: none;
        }

        .card-player-name {
            margin: 0;
            color: #fff7c2;
            font-size: clamp(24px, 5.6vw, 40px);
            font-weight: 1000;
            line-height: 1;
            text-shadow: 0 5px 28px rgba(0, 0, 0, 0.72), 0 0 22px rgba(240, 189, 66, 0.24);
            text-transform: uppercase;
            transform: none;
            word-break: break-word;
        }

        .card-player-title {
            display: inline-flex;
            justify-self: center;
            align-self: center;
            max-width: 92%;
            margin-top: -6px;
            padding: 3px 9px;
            border: 1px solid rgba(40,214,194,.34);
            border-radius: 999px;
            color: #7df8e8;
            background: rgba(40,214,194,.10);
            font-size: clamp(10px, 2.4vw, 13px);
            font-weight: 1000;
            letter-spacing: .09em;
            text-transform: uppercase;
            text-align: center;
        }

        .secret-card.cover .card-top,
        .secret-card.card-civil .card-top,
        .secret-card.card-spy .card-top {
            position: absolute;
            top: 22px;
            right: 22px;
            left: 22px;
        }

        .secret-card.cover .card-identity,
        .secret-card.card-civil .card-identity,
        .secret-card.card-spy .card-identity {
            position: absolute;
            top: 92px;
            right: 22px;
            left: 22px;
            display: grid;
            justify-items: center;
            gap: 0;
        }

        .secret-card.cover .card-player-name,
        .secret-card.card-civil .card-player-name,
        .secret-card.card-spy .card-player-name {
            width: 100%;
            margin-bottom: 70px;
            font-size: clamp(28px, 5.2vw, 38px);
        }

        .secret-card.cover .card-avatar,
        .secret-card.card-civil .card-avatar,
        .secret-card.card-spy .card-avatar {
            box-shadow: 0 0 0 4px rgba(7, 12, 24, 0.76), 0 0 34px rgba(240, 189, 66, 0.18);
        }

        .secret-card.cover .role,
        .secret-card.card-civil .role,
        .secret-card.card-spy .role {
            margin-top: 18px;
            font-size: clamp(34px, 7vw, 48px);
        }

        .secret-card.cover .card-note {
            margin-top: 4px;
        }

        .secret-card.card-civil .word,
        .secret-card.card-spy .word {
            position: absolute;
            right: 22px;
            bottom: 136px;
            left: 22px;
            min-height: 76px;
        }

        .secret-card.card-civil > .card-note,
        .secret-card.card-spy > .card-note {
            position: absolute;
            right: 22px;
            bottom: 92px;
            left: 22px;
            margin: 0;
        }

        .secret-card.cover > .actions,
        .secret-card.card-civil > .actions,
        .secret-card.card-spy > .actions {
            position: absolute;
            right: 22px;
            bottom: 22px;
            left: 22px;
        }

        .secret-card.cover::after,
        .secret-card.card-civil::after,
        .secret-card.card-spy::after {
            opacity: 0.12;
        }

        .secret-card.cover .card-top,
        .secret-card.card-civil .card-top,
        .secret-card.card-spy .card-top {
            top: 3.5%;
            right: 5.2%;
            left: 5.2%;
            height: 6.1%;
            align-items: center;
            color: #fff7c2;
            font-size: clamp(8px, 1.7vw, 11px);
            line-height: 1.05;
            text-shadow: 0 3px 12px rgba(0, 0, 0, 0.78);
        }

        .secret-card.cover .card-top > span,
        .secret-card.card-civil .card-top > span,
        .secret-card.card-spy .card-top > span {
            display: grid;
            width: 28%;
            height: 100%;
            place-items: center;
            padding: 0 7px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .card-countdown {
            color: #fff7c2;
            font-variant-numeric: tabular-nums;
        }

        .secret-card.cover .card-identity,
        .secret-card.card-civil .card-identity,
        .secret-card.card-spy .card-identity {
            position: static;
            display: contents;
        }

        .secret-card.cover .card-player-name,
        .secret-card.card-civil .card-player-name,
        .secret-card.card-spy .card-player-name {
            position: absolute;
            top: 12.4%;
            right: 11.5%;
            left: 11.5%;
            display: block;
            width: auto;
            height: 10%;
            margin: 0;
            font-size: clamp(24px, 5vw, 34px);
            line-height: 0.95;
        }

        .secret-card.card-civil .card-player-name,
        .secret-card.card-spy .card-player-name {
            top: 10.8%;
        }

        .card-name-arc {
            overflow: visible;
            pointer-events: none;
            filter: drop-shadow(0 5px 16px rgba(0, 0, 0, 0.72));
        }

        .card-name-arc text {
            fill: #fff7c2;
            font-family: inherit;
            font-size: 39px;
            font-weight: 1000;
            letter-spacing: 0;
            paint-order: stroke fill;
            stroke: rgba(38, 20, 7, 0.82);
            stroke-linejoin: round;
            stroke-width: 5px;
            text-transform: uppercase;
        }

        .secret-card.cover .card-avatar {
            position: absolute;
            top: 34.2%;
            left: 50%;
            width: 31%;
            height: auto;
            aspect-ratio: 1;
            transform: translateX(-50%);
        }

        .secret-card.card-civil .card-avatar,
        .secret-card.card-spy .card-avatar {
            position: absolute;
            top: 30.1%;
            left: 50%;
            width: 31%;
            height: auto;
            aspect-ratio: 1;
            transform: translateX(-50%);
        }

        .secret-card.cover .role {
            display: none;
        }

        .secret-card.card-civil .role,
        .secret-card.card-spy .role {
            position: absolute;
            top: 60.1%;
            right: 23%;
            left: 23%;
            display: grid;
            min-height: 7%;
            place-items: center;
            margin: 0;
            color: #fff7c2;
            font-size: clamp(24px, 5.4vw, 36px);
            line-height: 0.95;
            text-shadow: 0 5px 22px rgba(0, 0, 0, 0.72);
        }

        .secret-card.cover .card-note {
            position: absolute;
            top: 66.7%;
            right: 18%;
            left: 18%;
            display: grid;
            min-height: 6.8%;
            place-items: center;
            margin: 0;
            color: #fff7c2;
            font-size: clamp(13px, 2.2vw, 17px);
            font-weight: 900;
            line-height: 1.12;
            overflow-wrap: anywhere;
            text-wrap: balance;
            text-shadow: 0 4px 18px rgba(0, 0, 0, 0.76);
        }

        .secret-card.card-civil .word,
        .secret-card.card-spy .word {
            top: 76.6%;
            right: 9.5%;
            bottom: auto;
            left: 9.5%;
            min-height: 8.3%;
            padding: 0 10px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            font-size: clamp(22px, 5.1vw, 34px);
            line-height: 0.95;
            overflow-wrap: anywhere;
            text-wrap: balance;
            text-shadow: none;
        }

        .secret-card.card-civil .word {
            color: #17310f;
        }

        .secret-card.card-spy .word {
            color: #43100c;
        }

        .secret-card.premium-card-theme-classic.card-civil .word {
            color: #224a18;
            text-shadow: 0 1px 4px rgba(0,0,0,.38);
        }

        .secret-card.premium-card-theme-classic.card-spy .word {
            color: #641510;
            text-shadow: 0 1px 4px rgba(0,0,0,.38);
        }

        .secret-card.premium-card-theme-set2.card-civil .word,
        .secret-card.premium-card-theme-set3.card-civil .word {
            color: #b8f26c;
            text-shadow: 0 2px 10px rgba(0,0,0,.92), 0 0 16px rgba(80,200,40,.55);
        }

        .secret-card.premium-card-theme-set2.card-spy .word,
        .secret-card.premium-card-theme-set3.card-spy .word {
            color: #ff9272;
            text-shadow: 0 2px 10px rgba(0,0,0,.92), 0 0 16px rgba(210,60,20,.5);
        }

        .secret-card.premium-card-theme-set3.card-civil .word,
        .secret-card.premium-card-theme-set3.card-spy .word {
            top: 80.2%;
            right: 12%;
            left: 12%;
            height: 5.6%;
            min-height: 0;
            font-size: clamp(18px, 3.5vw, 24px);
            line-height: 0.86;
            overflow: hidden;
            place-items: center;
        }

        .secret-card.premium-card-theme-set3.card-civil > .card-note,
        .secret-card.premium-card-theme-set3.card-spy > .card-note {
            top: 87.2%;
            right: 12.5%;
            left: 12.5%;
            height: 5.3%;
            min-height: 0;
            font-size: clamp(8px, 1.6vw, 11px);
            line-height: 1.06;
            overflow: hidden;
            place-items: start center;
        }

        .secret-card.premium-card-theme-set3.card-civil .role,
        .secret-card.premium-card-theme-set3.card-spy .role {
            top: 69%;
            right: 22%;
            left: 22%;
            height: 5.1%;
            min-height: 0;
            font-size: clamp(17px, 3.2vw, 22px);
            line-height: 0.82;
            overflow: hidden;
        }

        .secret-card.premium-card-theme-set2.card-civil > .card-note,
        .secret-card.premium-card-theme-set3.card-civil > .card-note {
            color: #b8f0a0;
            text-shadow: 0 1px 6px rgba(0,0,0,.88);
        }

        .secret-card.premium-card-theme-set2.card-spy > .card-note,
        .secret-card.premium-card-theme-set3.card-spy > .card-note {
            color: #ffb8a4;
            text-shadow: 0 1px 6px rgba(0,0,0,.88);
        }

        .secret-card.card-civil > .card-note,
        .secret-card.card-spy > .card-note {
            top: 84.9%;
            right: 10.5%;
            bottom: auto;
            left: 10.5%;
            display: grid;
            min-height: 8.5%;
            place-items: start center;
            color: #3b2414;
            font-size: clamp(10px, 1.9vw, 13px);
            font-weight: 800;
            line-height: 1.12;
            overflow: hidden;
            overflow-wrap: anywhere;
            text-wrap: balance;
            text-shadow: none;
        }

        .secret-card.card-spy > .card-note {
            color: #ffd4bc;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.84);
        }

        .secret-card.card-civil > .card-note {
            color: #d4f8e8;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.84);
        }

        .secret-card.cover > .actions {
            top: 77%;
            right: 9.5%;
            bottom: 9.5%;
            left: 9.5%;
        }

        .secret-card.cover > .actions .btn {
            width: 100%;
            min-height: 100%;
            color: #2a1804;
            border-color: rgba(255, 247, 194, 0.40);
            background:
                linear-gradient(135deg, rgba(255, 247, 194, 0.92), rgba(240, 189, 66, 0.96) 54%, rgba(125, 248, 232, 0.28));
            font-size: clamp(16px, 3vw, 22px);
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.32);
        }

        .secret-card.card-civil > .actions,
        .secret-card.card-spy > .actions {
            right: 22%;
            bottom: 0.8%;
            left: 22%;
        }

        .secret-card.card-civil > .actions .btn,
        .secret-card.card-spy > .actions .btn {
            min-height: 36px;
            padding-inline: 12px;
            font-size: 13px;
        }

        .card-symbol {
            display: grid;
            width: 130px;
            height: 130px;
            place-items: center;
            margin: 14px auto 4px;
            border: 1px solid rgba(255, 238, 189, 0.28);
            border-radius: 50%;
            color: var(--teal);
            background: radial-gradient(circle, rgba(40, 214, 194, 0.16), rgba(0, 0, 0, 0.28));
            box-shadow: 0 0 28px rgba(40, 214, 194, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        }

        .role {
            color: var(--paper);
            font-size: clamp(30px, 7vw, 50px);
            font-weight: 1000;
            line-height: 0.95;
            letter-spacing: 0;
            text-transform: uppercase;
            text-shadow: 0 5px 30px rgba(0, 0, 0, 0.74);
        }

        .word {
            display: grid;
            min-height: 72px;
            place-items: center;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            color: var(--ink);
            background: var(--paper);
            font-size: clamp(28px, 6vw, 46px);
            font-weight: 1000;
            line-height: 1;
            word-break: break-word;
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
        }

        .word.empty {
            color: var(--paper);
            background: rgba(0, 0, 0, 0.2);
        }

        .card-note {
            min-height: 42px;
            color: var(--muted);
            line-height: 1.4;
        }

        .winner-panel {
            display: grid;
            gap: 12px;
            width: min(720px, 100%);
            margin-top: 16px;
            padding: 14px;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            background: rgba(7, 12, 24, 0.68);
            text-align: center;
        }

        .stage11-awards {
            display: grid;
            gap: 12px;
            width: 100%;
            margin-top: 16px;
            padding: 16px;
            border: 1px solid rgba(240, 189, 66, 0.28);
            border-radius: 22px;
            background:
                radial-gradient(circle at 12% 0%, rgba(240,189,66,.16), transparent 34%),
                radial-gradient(circle at 88% 12%, rgba(125,248,232,.12), transparent 32%),
                rgba(7,12,24,.72);
            box-shadow: 0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
        }

        .stage11-awards-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 12px;
        }

        .stage11-awards-head span {
            color: #7df8e8;
            font-size: 11px;
            font-weight: 1000;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .stage11-awards-head b {
            color: #fff7c2;
            font-size: clamp(18px, 3vw, 26px);
        }

        .stage11-awards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 10px;
        }

        .stage11-award-card {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            min-height: 86px;
            padding: 12px;
            border: 1px solid rgba(255,238,189,.16);
            border-radius: 18px;
            background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(4,10,18,.38));
            animation: stage11AwardIn 560ms cubic-bezier(.2,.85,.25,1) both;
            animation-delay: var(--award-delay, 0ms);
        }

        .stage11-award-card .player-avatar {
            width: 48px;
            height: 48px;
            border-radius: 17px;
        }

        .stage11-award-card span,
        .stage11-award-card small {
            display: block;
            color: rgba(244,248,242,.62);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .stage11-award-card b {
            display: block;
            margin: 3px 0;
            color: #fff7c2;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .stage12-levelup-overlay {
            position: fixed;
            inset: 0;
            z-index: 120;
            display: grid;
            place-items: center;
            padding: 22px;
            background: rgba(2, 6, 14, .66);
            backdrop-filter: blur(7px);
            animation: stage12LevelOverlayIn 180ms ease both;
        }

        .stage12-levelup-card {
            width: min(460px, 100%);
            padding: 26px;
            border: 1px solid rgba(240,189,66,.46);
            border-radius: 28px;
            background:
                radial-gradient(circle at 18% 0%, rgba(240,189,66,.30), transparent 38%),
                radial-gradient(circle at 82% 14%, rgba(125,248,232,.22), transparent 34%),
                linear-gradient(145deg, rgba(17,27,49,.96), rgba(5,8,20,.96));
            box-shadow: 0 32px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
            text-align: center;
            animation: stage12LevelCardIn 520ms cubic-bezier(.2,.85,.25,1) both;
        }

        .stage12-levelup-card span {
            display: inline-flex;
            min-height: 28px;
            align-items: center;
            padding: 0 12px;
            border: 1px solid rgba(125,248,232,.32);
            border-radius: 999px;
            color: #7df8e8;
            background: rgba(40,214,194,.10);
            font-size: 11px;
            font-weight: 1000;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .stage12-levelup-card b {
            display: block;
            margin-top: 12px;
            color: #fff7c2;
            font-size: clamp(44px, 12vw, 72px);
            line-height: .95;
        }

        .stage12-levelup-card p {
            margin: 12px 0 0;
            color: rgba(244,248,242,.78);
            line-height: 1.55;
        }

        .stage12-levelup-card button {
            margin-top: 18px;
        }

        @keyframes stage12LevelOverlayIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes stage12LevelCardIn {
            from { opacity: 0; transform: translateY(18px) scale(.92); filter: blur(6px); }
            to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }

        @keyframes stage11AwardIn {
            from { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(4px); }
            to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            width: 100%;
            margin-top: 14px;
        }

        .summary-player {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            min-height: 140px;
            padding: 14px 10px;
            border: 1px solid rgba(255, 238, 189, 0.16);
            border-radius: var(--radius);
            background: rgba(0, 0, 0, 0.20);
            text-align: center;
            font-weight: 900;
            transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
        }

        .summary-player-avatar {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .summary-player-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 100%;
            padding-top: 6px;
        }

        .summary-player-name {
            transition: color 180ms ease, text-shadow 180ms ease;
        }

        .summary-player.player-eliminated {
            opacity: 0.66;
            border-color: rgba(255, 79, 109, 0.36);
        }

        .summary-player.summary-role-spy .summary-player-name {
            color: #ff4f6d;
            text-shadow: 0 0 12px rgba(255, 79, 109, 0.70), 0 0 24px rgba(255, 41, 79, 0.38);
        }

        .summary-player.summary-role-civilian .summary-player-name {
            color: #7df8e8;
            text-shadow: 0 0 12px rgba(40, 214, 194, 0.66), 0 0 24px rgba(125, 248, 232, 0.32);
        }

        .summary-player.summary-role-spy .summary-player-avatar .player-avatar {
            border-color: rgba(255, 79, 109, 0.76);
            box-shadow: 0 0 0 1px rgba(255, 79, 109, 0.32), 0 0 24px rgba(255, 79, 109, 0.42) !important;
            filter: drop-shadow(0 0 16px rgba(255, 79, 109, 0.72));
        }

        .summary-player.summary-role-civilian .summary-player-avatar .player-avatar {
            border-color: rgba(125, 248, 232, 0.72);
            box-shadow: 0 0 0 1px rgba(40, 214, 194, 0.30), 0 0 24px rgba(40, 214, 194, 0.38) !important;
            filter: drop-shadow(0 0 16px rgba(40, 214, 194, 0.68));
        }

        .summary-player.summary-role-spy .summary-player-avatar .premium-ring,
        .summary-player.summary-role-civilian .summary-player-avatar .premium-ring {
            overflow: visible !important;
        }

        .summary-player.summary-winner {
            border-color: rgba(215, 247, 91, 0.55);
            box-shadow: 0 0 0 1px rgba(215, 247, 91, 0.18), 0 16px 40px rgba(215, 247, 91, 0.10);
            animation: winnerPulse 760ms ease both;
        }

        .summary-player.premium-player.summary-winner {
            border-color: rgba(240, 189, 66, 0.72);
            box-shadow: 0 0 0 1px rgba(240, 189, 66, 0.28), 0 0 34px rgba(240, 189, 66, 0.24), 0 16px 46px rgba(215, 247, 91, 0.12);
            animation: winnerPulse 760ms ease both, premiumFireworks 1200ms ease both;
        }

        .summary-player.premium-player.summary-loser .summary-badge {
            animation: skullDrop 780ms ease both;
        }

        .summary-player.summary-loser::before,
        .summary-player.summary-loser::after {
            position: absolute;
            top: 50%;
            left: 8%;
            width: 84%;
            height: 5px;
            border-radius: 999px;
            background: #ff294f;
            box-shadow: 0 0 18px rgba(255, 41, 79, 0.65);
            content: "";
            transform-origin: center;
            animation: redStrike 520ms ease both;
            z-index: 3;
        }

        .summary-player.summary-loser::before {
            --strike-rotate: 38deg;
        }

        .summary-player.summary-loser::after {
            --strike-rotate: -38deg;
            animation-delay: 120ms;
        }

        .summary-badge {
            position: absolute;
            top: -10px;
            right: 12px;
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            border: 1px solid rgba(255, 238, 189, 0.32);
            border-radius: 50%;
            background: rgba(7, 12, 24, 0.92);
            color: #fff7c2;
            font-size: 20px;
            box-shadow: 0 10px 28px rgba(0,0,0,.35);
            animation: badgeDrop 520ms cubic-bezier(.2,.8,.2,1);
        }

        @keyframes cardReveal {
            from { opacity: 0; transform: perspective(900px) rotateY(-18deg) translateY(14px) scale(.98); }
            to { opacity: 1; transform: perspective(900px) rotateY(0) translateY(0) scale(1); }
        }

        @keyframes cardBackIn {
            from { opacity: 0; transform: perspective(900px) rotateY(12deg) translateY(10px) scale(.98); }
            to { opacity: 1; transform: perspective(900px) rotateY(0) translateY(0) scale(1); }
        }

        @keyframes cardFlipIn {
            0%   { opacity: 0;   transform: perspective(520px) rotateY(-90deg) translateY(-12px) scale(.93); filter: brightness(.15); }
            28%  { opacity: 1;   transform: perspective(520px) rotateY(7deg)   translateY(-5px)  scale(1.06); filter: brightness(1.55); }
            52%  {               transform: perspective(520px) rotateY(-2.5deg) translateY(-1px)  scale(1.02); filter: brightness(1.12); }
            74%  {               transform: perspective(520px) rotateY(1.5deg)  translateY(0)     scale(1.01); filter: brightness(1.04); }
            100% { opacity: 1;   transform: perspective(520px) rotateY(0)       translateY(0)     scale(1);    filter: brightness(1); }
        }

        @keyframes cardFlipOpenIn {
            0%   { transform: perspective(520px) rotateY(90deg)   scale(.95); }
            55%  { transform: perspective(520px) rotateY(-4deg)   scale(1.01); }
            80%  { transform: perspective(520px) rotateY(1.5deg)  scale(1); }
            100% { transform: perspective(520px) rotateY(0deg)    scale(1); }
        }

        @keyframes cardFlipCoverIn {
            0%   { transform: perspective(520px) rotateY(-90deg)  scale(.95); }
            55%  { transform: perspective(520px) rotateY(4deg)    scale(1.01); }
            80%  { transform: perspective(520px) rotateY(-1.5deg) scale(1); }
            100% { transform: perspective(520px) rotateY(0deg)    scale(1); }
        }

        @keyframes cardFlipAway {
            0%   { transform: perspective(520px) rotateY(0deg)   scale(1); }
            100% { transform: perspective(520px) rotateY(-90deg) scale(.95); }
        }

        @keyframes cardFlipAwayReverse {
            0%   { transform: perspective(520px) rotateY(0deg)   scale(1); }
            100% { transform: perspective(520px) rotateY(90deg)  scale(.95); }
        }

        .card-flip-away {
            animation: cardFlipAway 260ms cubic-bezier(.4, 0, 1, 1) forwards !important;
            pointer-events: none;
        }

        .card-flip-away-reverse {
            animation: cardFlipAwayReverse 260ms cubic-bezier(.4, 0, 1, 1) forwards !important;
            pointer-events: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .card-flip-away, .card-flip-away-reverse { animation: none !important; }
            .secret-card.card-entering.flip-toggle-card { animation: none !important; }
            .stage11-player-card,
            .stage11-award-card,
            .player-status-pill::before {
                animation: none !important;
            }
        }

        @keyframes badgeDrop {
            from { opacity: 0; transform: translateY(-12px) scale(.72); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .flip-toggle-card { position: relative; }

        .premium-reveal-flash {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            animation: premiumFlash 520ms ease-out forwards;
        }

        @keyframes premiumFlash {
            0%   { opacity: 1; }
            100% { opacity: 0; }
        }

        .premium-reveal-ring {
            position: fixed;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transform: translate(-50%, -50%);
            animation: premiumRing 750ms cubic-bezier(.15, .5, .4, 1) forwards;
        }

        @keyframes premiumRing {
            0%   { box-shadow: 0 0 0 0   var(--ring-color, rgba(255,215,60,.9)); opacity: 1; }
            100% { box-shadow: 0 0 0 180px var(--ring-color, rgba(255,215,60,.0)); opacity: 0; }
        }

        .premium-reveal-particle {
            position: fixed;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9997;
            transform: translate(-50%, -50%);
            animation: premiumParticle var(--dur, 680ms) ease-out forwards;
        }

        @keyframes premiumParticle {
            0%   { transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1.1); opacity: 1; }
            100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0); opacity: 0; }
        }

        @keyframes premiumRevealShake {
            0%,100% { transform: none; }
            18%  { transform: translateX(-6px) rotate(-.9deg); }
            36%  { transform: translateX(5px)  rotate(.7deg); }
            54%  { transform: translateX(-3px) rotate(-.4deg); }
            72%  { transform: translateX(2px); }
        }

        .premium-reveal-shake {
            animation: premiumRevealShake 460ms ease;
        }

        @keyframes redStrike {
            from { transform: rotate(var(--strike-rotate)) scaleX(0); }
            to { transform: rotate(var(--strike-rotate)) scaleX(1); }
        }

        @keyframes winnerPulse {
            0% { transform: scale(.98); }
            60% { transform: scale(1.04); }
            100% { transform: scale(1); }
        }

        @keyframes premiumFireworks {
            0% { box-shadow: 0 0 0 rgba(240, 189, 66, 0); }
            40% { box-shadow: 0 0 0 8px rgba(240, 189, 66, 0.14), 0 0 34px rgba(240, 189, 66, 0.38), 0 0 44px rgba(125, 248, 232, 0.20); }
            100% { box-shadow: 0 0 0 1px rgba(240, 189, 66, 0.28), 0 0 34px rgba(240, 189, 66, 0.24); }
        }

        /* ── Victory fullscreen effects ── */
        @keyframes fx-supernova {
            0%   { opacity: 0; transform: scale(.04); }
            12%  { opacity: 1; transform: scale(1); }
            70%  { opacity: .75; }
            100% { opacity: 0; }
        }
        @keyframes fx-lightning-bg {
            0%   { opacity: 0; }
            6%   { opacity: 1; }
            18%  { opacity: .15; }
            26%  { opacity: .95; }
            38%  { opacity: .04; }
            44%  { opacity: .9; }
            62%  { opacity: 0; }
            100% { opacity: 0; }
        }
        @keyframes fx-lightning-bolt {
            0%   { opacity: 0; }
            5%   { opacity: 1; }
            60%  { opacity: 1; }
            72%  { opacity: 0; }
            100% { opacity: 0; }
        }
        @keyframes fx-fire-base {
            0%   { opacity: 0; transform: scaleY(.25) translateY(50%); }
            18%  { opacity: 1; transform: scaleY(1) translateY(0); }
            72%  { opacity: .88; }
            100% { opacity: 0; }
        }
        @keyframes fx-spark {
            0%   { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-65vh) scale(.08); }
        }
        @keyframes fx-ring {
            0%   { width: 0; height: 0; opacity: 1; margin: 0; }
            100% { width: 220vmax; height: 220vmax; margin: -110vmax; opacity: 0; }
        }
        @keyframes fx-magic-flash {
            0%  { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
            15% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
            55% { opacity: .6; }
            100%{ opacity: 0; transform: translate(-50%,-50%) scale(1.4); }
        }

        @keyframes skullDrop {
            0% { transform: translateY(-18px) scale(.76); opacity: 0; }
            70% { transform: translateY(2px) scale(1.12); opacity: 1; }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }

        @keyframes premiumShine {
            0%, 42% { left: -60%; opacity: 0; }
            52% { opacity: 1; }
            74%, 100% { left: 116%; opacity: 0; }
        }

        .online-layout {
            display: grid;
            grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
            gap: 16px;
            align-items: start;
        }

        .online-account-game > .panel {
            border-color: rgba(125, 248, 232, 0.34);
            background:
                radial-gradient(circle at 92% 0%, rgba(215, 247, 91, 0.12), transparent 28%),
                linear-gradient(145deg, rgba(6, 24, 34, 0.82), rgba(20, 10, 35, 0.72) 58%, rgba(41, 18, 47, 0.54)),
                rgba(5, 12, 22, 0.78);
            box-shadow: 0 28px 76px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(125, 248, 232, 0.06);
        }

        .online-account-game .lobby-header {
            padding: 12px;
            border: 1px solid rgba(125, 248, 232, 0.18);
            border-radius: var(--radius);
            background:
                linear-gradient(135deg, rgba(125, 248, 232, 0.12), rgba(240, 189, 66, 0.06)),
                rgba(3, 10, 20, 0.36);
        }

        .online-account-game .room-code {
            color: #fff7c2;
            font-size: clamp(24px, 5vw, 38px);
            background:
                linear-gradient(135deg, rgba(125, 248, 232, 0.14), rgba(255, 247, 194, 0.08)),
                rgba(0, 0, 0, 0.22);
        }

        .online-account-game .chat-panel,
        .online-account-game .turn-panel {
            border-color: rgba(125, 248, 232, 0.24);
            background:
                linear-gradient(145deg, rgba(3, 18, 27, 0.76), rgba(16, 8, 27, 0.74)),
                rgba(7, 12, 24, 0.72);
        }

        .online-account-game .player-tile {
            border-color: rgba(125, 248, 232, 0.18);
            background: rgba(3, 16, 26, 0.48);
        }

        .resume-game-panel {
            display: grid;
            width: min(720px, 100%);
            margin: 0 auto 18px;
            gap: 12px;
            justify-items: center;
            padding: 18px;
            border: 1px solid rgba(125, 248, 232, 0.30);
            border-radius: var(--radius);
            background: rgba(7, 12, 24, 0.78);
            box-shadow: var(--shadow);
            text-align: center;
            backdrop-filter: blur(12px);
        }

        .resume-game-panel h2 {
            margin: 0;
            color: #fff7c2;
            font-size: clamp(24px, 4vw, 40px);
            line-height: 1;
        }

        .turn-panel,
        .chat-panel {
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            background: rgba(7, 12, 24, 0.68);
            backdrop-filter: blur(14px);
        }

        .turn-panel {
            padding: 14px;
        }

        .turn-status-banner {
            display: grid;
            gap: 4px;
            width: min(920px, 100%);
            margin: -2px auto 14px;
            padding: 12px 14px;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: var(--radius);
            background: rgba(7, 12, 24, 0.78);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
            text-align: center;
        }

        .turn-status-banner strong {
            display: block;
            color: #fff7c2;
            font-size: clamp(18px, 3vw, 28px);
            font-weight: 1000;
            line-height: 1;
            text-transform: uppercase;
        }

        .turn-status-banner span {
            color: rgba(244, 248, 242, 0.78);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
        }

        .turn-status-banner.is-my-turn {
            border-color: rgba(40, 214, 194, 0.62);
            background:
                radial-gradient(circle at 50% 0%, rgba(40, 214, 194, 0.26), transparent 48%),
                rgba(6, 54, 50, 0.72);
            box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28), 0 0 34px rgba(40, 214, 194, 0.18);
        }

        .turn-status-banner.is-my-turn strong {
            color: #7df8e8;
            text-shadow: 0 0 22px rgba(40, 214, 194, 0.38);
        }

        .turn-status-banner.is-waiting {
            border-color: rgba(255, 247, 194, 0.38);
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 247, 194, 0.18), transparent 50%),
                rgba(46, 38, 16, 0.62);
        }

        .turn-status-banner.is-waiting strong {
            color: #fff7c2;
            text-shadow: 0 0 20px rgba(255, 247, 194, 0.28);
        }

        .turn-status-chip {
            border-color: rgba(255, 247, 194, 0.34);
            background: rgba(255, 247, 194, 0.10);
            color: #fff7c2;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
        }

        .turn-status-chip.is-my-turn {
            border-color: rgba(40, 214, 194, 0.62);
            background: linear-gradient(135deg, #28d6c2, #7df8e8);
            color: #061018;
        }

        .turn-status-chip.is-waiting {
            border-color: rgba(255, 247, 194, 0.44);
            background: rgba(255, 247, 194, 0.16);
            color: #fff7c2;
        }

        .turn-order {
            display: grid;
            gap: 8px;
            margin-top: 10px;
        }

        .turn-order-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            border: 1px solid rgba(255, 238, 189, 0.12);
            border-radius: var(--radius);
            background: rgba(0, 0, 0, 0.16);
        }

        .turn-order-item.active {
            border-color: rgba(40, 214, 194, 0.68);
            background: rgba(40, 214, 194, 0.12);
        }

        .turn-order-item small {
            margin-left: auto;
            padding: 2px 6px;
            border: 1px solid rgba(240,189,66,.28);
            border-radius: 999px;
            color: #fff7c2;
            background: rgba(240,189,66,.10);
            font-size: 10px;
            font-weight: 900;
            white-space: nowrap;
        }

        .turn-order-item.player-eliminated {
            margin-top: 4px;
        }

        .turn-order-item.player-eliminated small {
            border-color: rgba(255, 111, 145, 0.42);
            color: #ffc0cd;
            background: rgba(148, 24, 50, 0.30);
        }

        .vote-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }

        .vote-target-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
            gap: 8px;
            margin-top: 10px;
        }

        .vote-target {
            display: flex;
            align-items: center;
            min-height: 48px;
            gap: 8px;
            padding: 8px 10px;
            border: 1px solid rgba(255, 238, 189, 0.16);
            border-radius: var(--radius);
            color: var(--paper);
            background: rgba(244, 248, 242, 0.08);
            font-weight: 900;
            cursor: pointer;
        }

        .vote-target.active {
            border-color: rgba(40, 214, 194, 0.68);
            background: rgba(40, 214, 194, 0.16);
        }

        .vote-target:disabled {
            cursor: not-allowed;
            opacity: 0.48;
        }

        .vote-names {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 8px;
        }

        .vote-name-pill {
            padding: 2px 9px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
        }

        .vote-name-pill.yes { background: rgba(125, 248, 232, 0.18); color: #7df8e8; border: 1px solid rgba(125, 248, 232, 0.28); }
        .vote-name-pill.no { background: rgba(255, 100, 100, 0.14); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.22); }

        .suspect-vote-tally {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 10px;
        }

        .suspect-tally-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
        }

        .suspect-tally-bar {
            height: 5px;
            border-radius: 3px;
            background: rgba(125, 248, 232, 0.55);
            transition: width 400ms ease;
            min-width: 4px;
        }

        .suspect-tally-count {
            font-size: 11px;
            color: #7df8e8;
            font-weight: 900;
            flex-shrink: 0;
        }

        .vote-effect-overlay {
            position: fixed;
            inset: 0;
            z-index: 9998;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            animation: voteEffectFade 1.4s cubic-bezier(.2,.8,.2,1) forwards;
        }

        .vote-effect-icon {
            font-size: clamp(64px, 18vw, 140px);
            line-height: 1;
            filter: drop-shadow(0 0 28px currentColor);
            animation: voteEffectBounce 1.4s cubic-bezier(.2,.8,.2,1) forwards;
        }

        @keyframes voteEffectFade {
            0% { opacity: 0; }
            15% { opacity: 1; }
            70% { opacity: 1; }
            100% { opacity: 0; }
        }

        @keyframes voteEffectBounce {
            0% { transform: scale(0.3) rotate(-12deg); }
            30% { transform: scale(1.18) rotate(4deg); }
            55% { transform: scale(0.96) rotate(-2deg); }
            75% { transform: scale(1.04) rotate(1deg); }
            100% { transform: scale(1) rotate(0); }
        }

        .starter-picker-control {
            display: grid;
            justify-items: center;
            gap: 6px;
            width: 100%;
        }

        .starter-picker-note {
            margin: 0;
            color: rgba(244, 248, 242, 0.68);
            font-size: 12px;
            font-weight: 700;
            text-align: center;
        }

        .starter-picker-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: grid;
            place-items: center;
            padding: 16px;
            background:
                radial-gradient(circle at 50% 18%, rgba(125,248,232,.16), transparent 32%),
                rgba(0, 0, 0, 0.86);
            backdrop-filter: blur(4px);
        }

        .starter-picker-modal {
            width: min(620px, 100%);
            max-height: min(92vh, 820px);
            overflow: auto;
            padding: 18px;
            border: 1px solid rgba(255, 238, 189, 0.24);
            border-radius: 16px;
            background:
                linear-gradient(145deg, rgba(6, 18, 30, 0.96), rgba(28, 12, 38, 0.94)),
                rgba(7, 12, 24, 0.98);
            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
        }

        .starter-picker-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .starter-picker-head h2 {
            margin: 0;
            color: #fff7c2;
            font-size: clamp(24px, 5vw, 38px);
            line-height: 1;
        }

        .starter-picker-close {
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            border: 1px solid rgba(255, 238, 189, 0.18);
            border-radius: 50%;
            color: #fff7c2;
            background: rgba(255, 255, 255, 0.06);
            font-size: 20px;
            cursor: pointer;
        }

        .starter-picker-options {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin: 16px 0;
        }

        .starter-choice {
            display: grid;
            min-height: 96px;
            align-content: center;
            gap: 5px;
            padding: 12px;
            border: 1px solid rgba(255, 238, 189, 0.16);
            border-radius: 12px;
            color: var(--paper);
            background: rgba(255, 255, 255, 0.06);
            cursor: pointer;
            text-align: center;
            transition: transform .15s, border-color .15s, background .15s;
        }

        .starter-choice:hover {
            transform: translateY(-2px);
            border-color: rgba(125, 248, 232, 0.44);
            background: rgba(125, 248, 232, 0.10);
        }

        .starter-choice.active {
            border-color: rgba(125, 248, 232, 0.72);
            background:
                radial-gradient(circle at 50% 0%, rgba(125, 248, 232, 0.22), transparent 58%),
                rgba(125, 248, 232, 0.12);
            box-shadow: 0 0 0 2px rgba(125, 248, 232, 0.10) inset, 0 14px 36px rgba(0, 0, 0, 0.26);
        }

        .starter-choice:disabled {
            cursor: wait;
            opacity: 0.70;
        }

        .starter-choice b {
            color: #fff7c2;
            font-size: 15px;
        }

        .starter-choice small {
            color: rgba(244, 248, 242, 0.66);
            font-weight: 700;
            line-height: 1.25;
        }

        .starter-picker-stage {
            display: grid;
            min-height: 240px;
            place-items: center;
            padding: 12px;
            border: 1px solid rgba(125, 248, 232, 0.16);
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.20);
            overflow: hidden;
        }

        .starter-wheel {
            position: relative;
            width: min(340px, 78vw);
            aspect-ratio: 1;
            isolation: isolate;
            overflow: hidden;
            border: 3px solid rgba(255, 247, 194, 0.38);
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 247, 194, 0.20) 0 8%, transparent 9% 100%),
                repeating-conic-gradient(from -10deg,
                    rgba(40, 214, 194, 0.98) 0deg 15deg,
                    rgba(255, 247, 194, 0.94) 15deg 30deg,
                    rgba(255, 79, 109, 0.94) 30deg 45deg,
                    rgba(168, 80, 255, 0.92) 45deg 60deg),
                rgba(7, 12, 24, 0.96);
            box-shadow:
                inset 0 0 0 10px rgba(4, 10, 18, 0.46),
                inset 0 0 42px rgba(0, 0, 0, 0.46),
                0 30px 70px rgba(0, 0, 0, 0.48),
                0 0 52px rgba(125, 248, 232, 0.18);
        }

        .starter-wheel::before {
            position: absolute;
            inset: 0;
            z-index: 1;
            border-radius: 50%;
            background:
                radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.42), transparent 18%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%);
            mix-blend-mode: screen;
            content: "";
            pointer-events: none;
        }

        .starter-wheel::after {
            position: absolute;
            inset: 8%;
            z-index: 1;
            border: 1px solid rgba(255, 247, 194, 0.38);
            border-radius: 50%;
            box-shadow: inset 0 0 28px rgba(255, 247, 194, 0.16);
            content: "";
            pointer-events: none;
        }

        .starter-wheel-ticks {
            position: absolute;
            inset: 6px;
            z-index: 2;
            border-radius: 50%;
            pointer-events: none;
        }

        .starter-wheel-ticks span {
            position: absolute;
            inset: 0;
            transform: rotate(var(--tick));
        }

        .starter-wheel-ticks span::before {
            position: absolute;
            top: 5px;
            left: 50%;
            width: 3px;
            height: 15px;
            border-radius: 99px;
            background: rgba(4, 10, 18, 0.72);
            box-shadow: 0 0 10px rgba(255, 247, 194, 0.35);
            content: "";
            transform: translateX(-50%);
        }

        .starter-wheel-ticks span:nth-child(3n)::before {
            width: 5px;
            height: 24px;
            background: #fff7c2;
        }

        .starter-wheel-pointer {
            position: absolute;
            inset: 6%;
            z-index: 4;
            transform: rotate(0deg);
            transform-origin: 50% 50%;
            transition: transform 3.45s cubic-bezier(.08,.78,.08,1);
            will-change: transform;
        }

        .starter-wheel-pointer::before {
            position: absolute;
            top: 2%;
            left: 50%;
            width: 34px;
            height: 47%;
            background: linear-gradient(180deg, #fff7c2 0%, #ff4f6d 30%, #b91036 100%);
            clip-path: polygon(50% 0%, 100% 26%, 68% 26%, 68% 100%, 32% 100%, 32% 26%, 0 26%);
            filter: drop-shadow(0 0 18px rgba(255, 79, 109, 0.85)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
            content: "";
            transform: translateX(-50%);
        }

        .starter-wheel-pointer::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 46px;
            height: 46px;
            border: 3px solid rgba(255, 247, 194, 0.72);
            border-radius: 50%;
            background:
                radial-gradient(circle at 38% 30%, #ffffff, #fff7c2 30%, #ff4f6d 70%);
            box-shadow: 0 0 28px rgba(255, 79, 109, 0.58), 0 10px 20px rgba(0, 0, 0, 0.38);
            content: "";
            transform: translate(-50%, -50%);
        }

        .starter-wheel-hub {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            display: grid;
            width: 68px;
            height: 68px;
            place-items: center;
            border: 2px solid rgba(255, 247, 194, 0.74);
            border-radius: 50%;
            color: #2a080f;
            background: linear-gradient(135deg, #fff7c2, #f0bd42 55%, #7df8e8);
            box-shadow: 0 0 28px rgba(255, 247, 194, 0.46), inset 0 2px 0 rgba(255, 255, 255, 0.55);
            font-size: 12px;
            font-weight: 1000;
            letter-spacing: .08em;
            text-align: center;
            text-transform: uppercase;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        @keyframes wheel-hub-pulse {
            0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 1; }
            50%       { transform: translate(-50%,-50%) scale(1.12); opacity: 0.78; }
        }

        @keyframes wheel-hub-land {
            0%   { transform: translate(-50%,-50%) scale(1.42); opacity: 0.65; }
            55%  { transform: translate(-50%,-50%) scale(.87);  opacity: 1; }
            78%  { transform: translate(-50%,-50%) scale(1.08); }
            100% { transform: translate(-50%,-50%) scale(1); }
        }

        .starter-wheel-hub.spinning {
            animation: wheel-hub-pulse 0.48s ease-in-out infinite;
        }

        .starter-wheel-hub.landed {
            animation: wheel-hub-land 0.58s cubic-bezier(.2,.9,.22,1.2) forwards;
        }

        .starter-lootbox {
            position: relative;
            width: min(420px, 100%);
            height: 168px;
            overflow: hidden;
            border: 1px solid rgba(255, 238, 189, 0.22);
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.26));
            box-shadow: inset 0 0 28px rgba(0,0,0,.48);
        }

        .starter-loot-selector {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 50%;
            height: 56px;
            transform: translateY(-50%);
            border: 2px solid rgba(125, 248, 232, 0.44);
            border-radius: 999px;
            background: rgba(125, 248, 232, 0.04);
            z-index: 3;
            pointer-events: none;
            transition: border-color 0.4s, opacity 0.4s;
        }

        .starter-lootbox.loot-settled .starter-loot-selector {
            border-color: rgba(255, 247, 194, 0.88);
            animation: loot-selector-flash 0.8s ease-out;
        }

        @keyframes loot-selector-flash {
            0%   { opacity: 1; }
            18%  { opacity: 0.22; }
            46%  { opacity: 1; }
            68%  { opacity: 0.55; }
            100% { opacity: 1; }
        }

        .starter-loot-vignette {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(4,10,18,.92) 0%, transparent 28%, transparent 72%, rgba(4,10,18,.92) 100%);
            z-index: 4;
            pointer-events: none;
            border-radius: 13px;
        }

        .starter-loot-reel {
            display: grid;
            gap: 8px;
            padding: 60px 14px 40px;
            filter: blur(3px);
            will-change: transform, filter;
            transition: transform 3.4s cubic-bezier(.04,.82,.08,1), filter 2.8s ease-in;
        }

        .starter-loot-item {
            display: grid;
            min-height: 48px;
            place-items: center;
            border: 1px solid rgba(125, 248, 232, 0.16);
            border-radius: 999px;
            color: #fff7c2;
            background: rgba(125, 248, 232, 0.09);
            font-size: 18px;
            font-weight: 1000;
            text-shadow: 0 2px 12px rgba(0,0,0,.54);
        }

        .starter-loot-winner {
            border-color: rgba(255, 247, 194, 0.58);
            background: linear-gradient(135deg, rgba(255, 247, 194, 0.18), rgba(212, 160, 32, 0.12));
            color: #fff7c2;
            box-shadow: 0 0 22px rgba(255, 247, 194, 0.18);
        }

        .starter-result {
            display: grid;
            justify-items: center;
            gap: 8px;
            text-align: center;
            animation: starterResultPop .5s cubic-bezier(.2,.9,.22,1.2);
        }

        .starter-result b {
            color: #fff7c2;
            font-size: clamp(28px, 7vw, 54px);
            line-height: 1;
            text-shadow: 0 0 26px rgba(125,248,232,.36);
        }

        .starter-result-hint {
            max-width: 360px;
            color: rgba(244, 248, 242, 0.58);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
        }

        .starter-picker-footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 14px;
        }

        @keyframes starterResultPop {
            from { transform: scale(.78); opacity: 0; filter: blur(8px); }
            to { transform: scale(1); opacity: 1; filter: blur(0); }
        }

        @media (max-width: 620px) {
            .starter-picker-options {
                grid-template-columns: 1fr;
            }
        }

        .reaction-panel {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 10px 2px;
            border-bottom: 1px solid rgba(255, 238, 189, 0.1);
        }

        .reaction-btn {
            padding: 4px 11px;
            border-radius: 20px;
            border: 1px solid rgba(125, 248, 232, 0.32);
            background: rgba(125, 248, 232, 0.08);
            color: #7df8e8;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: background 140ms, transform 120ms;
        }

        .reaction-btn:active { transform: scale(0.93); }

        .reaction-bubble-layer {
            position: fixed;
            inset: 0;
            z-index: 9997;
            overflow: hidden;
            pointer-events: none;
        }

        .reaction-bubble {
            position: absolute;
            top: 38%;
            left: 50%;
            z-index: 9997;
            background: rgba(10, 22, 34, 0.94);
            border: 1px solid rgba(125, 248, 232, 0.38);
            border-radius: 18px 18px 4px 18px;
            padding: 8px 14px;
            max-width: 220px;
            pointer-events: none;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 22px rgba(125, 248, 232, 0.14);
            animation: reactionBubbleIn 2400ms ease forwards;
        }

        .reaction-bubble-name {
            display: block;
            font-size: 10px;
            font-weight: 900;
            color: #7df8e8;
            margin-bottom: 2px;
        }

        .reaction-bubble-text {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: #f4f8f2;
        }

        @keyframes reactionBubbleIn {
            0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.88); }
            8% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            92% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.96); }
        }

        .premium-title-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 900;
            padding: 2px 7px;
            border-radius: 10px;
            background: linear-gradient(90deg, rgba(240, 189, 66, 0.22), rgba(215, 247, 91, 0.16));
            border: 1px solid rgba(240, 189, 66, 0.38);
            color: #f0bd42;
            margin-top: 3px;
            white-space: nowrap;
        }

        .summary-role-badge {
            display: inline-block;
            max-width: 100%;
            padding: 2px 7px;
            border: 1px solid rgba(125,248,232,.34);
            border-radius: 10px;
            color: #fff7c2;
            background: rgba(125,248,232,.10);
            font-size: 10px;
            font-weight: 900;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chat-tabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            padding: 8px;
            border-bottom: 1px solid rgba(255, 238, 189, 0.12);
        }

        .chat-tabs.lobby-chat-tabs {
            grid-template-columns: 1fr;
        }

        .chat-tabs button {
            min-height: 38px;
            border-radius: 6px;
            color: var(--muted);
            background: rgba(0, 0, 0, 0.18);
            font-weight: 900;
            cursor: pointer;
        }

        .chat-tabs.lobby-chat-tabs button {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .chat-tabs button.active {
            color: var(--ink);
            background: var(--teal);
        }

        .chat-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 4px;
            border-radius: 9px;
            background: #e63946;
            color: #fff;
            font-size: 11px;
            font-weight: 900;
            line-height: 1;
            vertical-align: middle;
            margin-left: 4px;
        }

        .chat-body {
            display: grid;
            gap: 10px;
            padding: 12px;
            position: relative;
        }

        .message-list {
            display: grid;
            align-content: start;
            gap: 8px;
            min-height: 220px;
            max-height: 320px;
            overflow: auto;
            padding-right: 4px;
        }

        .message-item {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr);
            align-items: start;
            gap: 9px;
            padding: 9px 10px;
            border: 1px solid rgba(255, 238, 189, 0.12);
            border-radius: var(--radius);
            background: rgba(0, 0, 0, 0.18);
        }

        .message-item .player-avatar {
            width: 36px;
            height: 36px;
            cursor: default;
            font-size: 11px;
        }

        .message-content {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .message-content span {
            overflow-wrap: anywhere;
        }

        .message-item b {
            color: #fff7c2;
        }

        .message-item.premium-message .message-content span {
            color: #ffe18a;
            text-shadow: 0 0 14px rgba(240, 189, 66, 0.24);
            font-weight: 900;
        }

        .message-item small {
            display: block;
            margin-top: 3px;
            color: var(--muted);
        }

        .chat-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 8px;
        }

        .chat-composer {
            display: grid;
            gap: 8px;
        }

        .chat-form.with-emoji {
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: stretch;
        }

        .chat-form.with-emoji.with-voice {
            grid-template-columns: auto minmax(0, 1fr) auto auto;
        }

        .emoji-toggle {
            width: 42px;
            min-height: 42px;
            padding: 0;
            border-color: rgba(125, 248, 232, 0.34);
            color: #fff7c2;
            background: rgba(125, 248, 232, 0.10);
            box-shadow: none;
            font-size: 20px;
            line-height: 1;
        }

        .emoji-toggle.active,
        .emoji-toggle:hover {
            color: var(--ink);
            background: var(--teal);
        }

        .emoji-panel {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px;
            border: 1px solid rgba(125, 248, 232, 0.18);
            border-radius: 8px;
            background: rgba(4, 10, 20, 0.70);
        }

        .emoji-panel[hidden] {
            display: none !important;
        }

        .emoji-btn {
            width: 36px;
            min-height: 34px;
            padding: 0;
            border-radius: 8px;
            border: 1px solid rgba(255, 238, 189, 0.14);
            color: #fff;
            background: rgba(244, 248, 242, 0.08);
            box-shadow: none;
            font-size: 18px;
        }

        .emoji-btn:hover {
            border-color: rgba(125, 248, 232, 0.38);
            background: rgba(125, 248, 232, 0.14);
        }

        .mic-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            padding: 0;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.18);
            background: rgba(255,255,255,.07);
            color: #b8f0d0;
            cursor: pointer;
            flex-shrink: 0;
            transition: background .15s, color .15s;
        }
        .mic-btn:hover { background: rgba(100,240,170,.18); color: #7df8c0; }
        .mic-btn.recording { background: rgba(210,50,50,.28); color: #ff8080; animation: recPulse 1s ease-in-out infinite; border-color: rgba(210,50,50,.45); }

        @keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(210,50,50,.4); } 50% { box-shadow: 0 0 0 6px rgba(210,50,50,0); } }

        .voice-rec-form {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 4px 0;
        }
        .rec-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            background: #e83030;
            flex-shrink: 0;
            animation: recPulse 1s ease-in-out infinite;
            box-shadow: 0 0 0 0 rgba(210,50,50,.4);
        }
        .rec-timer { font-size: .88rem; font-weight: 700; color: #ff9090; min-width: 32px; }
        .rec-limit { font-size: .78rem; color: var(--muted); flex: 1; }

        /* Voice turn mode */
        .voice-turn-prompt {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 20px 12px 12px;
        }
        .voice-turn-label {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--fg);
            text-align: center;
            margin: 0;
        }
        .voice-turn-prompt .btn { min-width: 160px; font-size: 1rem; padding: 12px 28px; }
        .voice-turn-wait {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 12px;
        }
        .voice-waiting-label {
            font-size: 1rem;
            color: var(--muted);
            text-align: center;
            margin: 0;
        }
        .voice-waiting-label strong { color: var(--fg); }

        /* Voice message player */
        .voice-msg-player {
            display: grid;
            grid-template-columns: 34px 1fr auto;
            align-items: center;
            gap: 8px;
            padding: 6px 2px 2px;
        }
        .vp-play-btn {
            display: flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; padding: 0;
            border-radius: 50%;
            border: 1px solid rgba(125,248,200,.35);
            background: rgba(125,248,200,.12);
            color: #7df8c8;
            cursor: pointer;
            flex-shrink: 0;
            transition: background .15s;
        }
        .vp-play-btn:hover { background: rgba(125,248,200,.22); }
        .vp-play-btn svg { pointer-events: none; }
        .vp-waveform {
            position: relative;
            height: 36px;
            display: flex;
            align-items: center;
        }
        .vp-bars-bg, .vp-bars-fg {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 2px 0;
        }
        .vp-bars-bg span, .vp-bars-fg span {
            flex: 1;
            border-radius: 2px;
            min-height: 3px;
        }
        .vp-bars-bg span { background: rgba(255,255,255,.18); }
        .vp-bars-fg {
            clip-path: inset(0 calc(100% - var(--vp, 0%)) 0 0);
            transition: clip-path .08s linear;
        }
        .vp-bars-fg span { background: #7df8c0; }
        .vp-seek {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
            margin: 0;
            padding: 0;
        }
        .vp-time {
            font-size: .76rem;
            color: var(--muted);
            white-space: nowrap;
            min-width: 52px;
            text-align: right;
        }

        .room-code {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--line-strong);
            border-radius: var(--radius);
            background: rgba(0, 0, 0, 0.22);
            color: var(--lime);
            font-size: clamp(32px, 9vw, 54px);
            font-weight: 1000;
            letter-spacing: 0;
        }

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

        .room-share-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .btn.small {
            padding: 6px 12px;
            font-size: 13px;
            min-height: 0;
        }

        .toast {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 20;
            max-width: min(420px, calc(100% - 36px));
            padding: 12px 14px;
            border: 1px solid var(--line-strong);
            border-radius: var(--radius);
            background: #202523;
            box-shadow: var(--shadow);
            color: var(--paper);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 180ms ease, transform 180ms ease;
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── Spy Guess Alert Dialog ────────────────────────────────── */
        dialog.spy-alert-dlg::backdrop {
            display: none; /* nasze tło jest w samym dialogu */
        }

        /* ── Spy Guess Alert Overlay ───────────────────────────────── */
        @keyframes spyAlertIn {
            0%   { transform: scale(0.82); }
            55%  { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        @keyframes spyAlertOut {
            0%   { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.08); }
        }
        @keyframes spyIconPulse {
            0%, 100% { transform: scale(1) rotate(-6deg); }
            50%       { transform: scale(1.18) rotate(6deg); }
        }
        @keyframes spyShake {
            0%, 100% { transform: translateX(0); }
            20%       { transform: translateX(-8px); }
            40%       { transform: translateX(8px); }
            60%       { transform: translateX(-5px); }
            80%       { transform: translateX(5px); }
        }
        @keyframes voteAlertIn {
            0%   { opacity: 0; transform: translateY(-28px) scale(0.9); }
            65%  { opacity: 1; transform: translateY(4px) scale(1.02); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes voteAlertOut {
            0%   { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-24px); }
        }

        .spy-alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: 2147483647;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(ellipse at center, rgba(220,30,30,0.82) 0%, rgba(10,0,0,0.96) 100%);
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            animation: spyAlertIn 0.42s cubic-bezier(.22,.92,.32,1.18) forwards;
            cursor: pointer;
        }
        .spy-alert-overlay.fade-out {
            animation: spyAlertOut 0.5s ease-in forwards;
            pointer-events: none;
        }
        .spy-alert-overlay.spy-alert-mobile {
            box-sizing: border-box;
            min-height: 100dvh;
            height: 100dvh;
            padding:
                max(16px, env(safe-area-inset-top))
                max(16px, env(safe-area-inset-right))
                max(16px, env(safe-area-inset-bottom))
                max(16px, env(safe-area-inset-left));
            overflow: hidden;
            touch-action: none;
            overscroll-behavior: contain;
        }
        .spy-alert-overlay.spy-alert-mobile > div {
            animation: spyShake 0.62s 0.18s ease-in-out;
        }
        .spy-alert-overlay.spy-alert-mobile > div > div:first-child {
            animation: spyIconPulse 0.9s ease-in-out infinite;
            filter: drop-shadow(0 0 24px rgba(255,80,80,0.9));
        }
        html.spy-alert-lock,
        body.spy-alert-lock {
            overflow: hidden;
            touch-action: none;
        }
        .spy-alert-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            text-align: center;
            padding: 32px 24px;
            animation: spyShake 0.55s 0.38s ease-in-out;
        }
        .spy-alert-icon {
            font-size: 72px;
            line-height: 1;
            animation: spyIconPulse 0.9s ease-in-out infinite;
            filter: drop-shadow(0 0 24px rgba(255,80,80,0.9));
        }
        .spy-alert-title {
            font-size: clamp(22px, 5vw, 38px);
            font-weight: 900;
            color: #fff;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-shadow: 0 0 32px rgba(255,60,60,1), 0 2px 0 rgba(0,0,0,0.5);
        }
        .spy-alert-sub {
            font-size: clamp(14px, 3vw, 18px);
            color: rgba(255,220,220,0.92);
            max-width: 320px;
            line-height: 1.4;
        }
        .spy-alert-tap {
            margin-top: 8px;
            font-size: 13px;
            color: rgba(255,200,200,0.55);
        }

        /* Vote-start notification banner */
        .vote-start-banner {
            position: fixed;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9998;
            background: linear-gradient(135deg, #1a4a2e 0%, #0f2d1c 100%);
            border: 1.5px solid rgba(40, 214, 130, 0.6);
            border-radius: 16px;
            padding: 14px 28px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: #d7f7b5;
            font-weight: 700;
            font-size: 15px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 18px rgba(40,214,130,0.25);
            white-space: nowrap;
            animation: voteAlertIn 0.38s cubic-bezier(.22,.92,.32,1.1) forwards;
        }
        .vote-start-banner.fade-out {
            animation: voteAlertOut 0.4s ease-in forwards;
        }
        .vote-start-banner-icon { font-size: 22px; }

        @keyframes voteOverlayIn {
            0%   { opacity: 0; transform: scale(0.92); filter: saturate(0.8); }
            55%  { opacity: 1; transform: scale(1.025); filter: saturate(1.2); }
            100% { opacity: 1; transform: scale(1); filter: saturate(1); }
        }
        @keyframes voteOverlayOut {
            0%   { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.04); }
        }
        @keyframes voteDetectivePulse {
            0%, 100% { transform: scale(1) rotate(-4deg); }
            50%      { transform: scale(1.14) rotate(4deg); }
        }
        @keyframes voteDetectiveShake {
            0%, 100% { transform: translateY(0) rotate(0); }
            20%      { transform: translateY(-5px) rotate(-1.5deg); }
            42%      { transform: translateY(3px) rotate(1.5deg); }
            66%      { transform: translateY(-2px) rotate(-0.8deg); }
        }
        @keyframes voteSearchSweep {
            0%   { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
            20%  { opacity: 1; }
            100% { transform: translateX(130%) skewX(-18deg); opacity: 0; }
        }
        .vote-alert-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            color: #f4f8f2;
            background:
                radial-gradient(circle at 50% 34%, rgba(255,231,143,0.30) 0%, rgba(255,231,143,0.08) 26%, transparent 45%),
                radial-gradient(ellipse at center, rgba(18,118,108,0.94) 0%, rgba(8,41,44,0.98) 58%, rgba(2,9,15,1) 100%);
            box-shadow: inset 0 0 120px rgba(255,231,143,0.14);
            animation: voteOverlayIn 0.46s cubic-bezier(.22,.92,.32,1.14) forwards;
            overflow: hidden;
            cursor: pointer;
        }
        .vote-alert-overlay::before {
            content: "";
            position: absolute;
            inset: -20%;
            background: linear-gradient(105deg, transparent 0%, transparent 43%, rgba(255,247,194,0.22) 49%, rgba(125,248,232,0.16) 52%, transparent 59%, transparent 100%);
            animation: voteSearchSweep 1.25s 0.18s ease-out both;
            pointer-events: none;
        }
        .vote-alert-overlay.fade-out {
            animation: voteOverlayOut 0.48s ease-in forwards;
            pointer-events: none;
        }
        .vote-alert-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            max-width: min(420px, 100%);
            padding: 30px 22px;
            text-align: center;
            animation: voteDetectiveShake 0.72s 0.2s ease-in-out;
            pointer-events: none;
        }
        .vote-alert-icon {
            font-size: 76px;
            line-height: 1;
            animation: voteDetectivePulse 0.95s ease-in-out infinite;
            filter: drop-shadow(0 0 24px rgba(255,231,143,0.75));
        }
        .vote-alert-title {
            color: #fff7c2;
            font-size: clamp(23px, 5vw, 38px);
            font-weight: 1000;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-shadow: 0 0 28px rgba(255,231,143,0.72), 0 2px 0 rgba(0,0,0,0.52);
        }
        .vote-alert-sub {
            max-width: 340px;
            color: rgba(235,255,248,0.92);
            font-size: clamp(15px, 3.4vw, 18px);
            line-height: 1.42;
        }
        .vote-alert-tap {
            margin-top: 4px;
            color: rgba(255,247,194,0.62);
            font-size: 13px;
        }
        .vote-alert-mobile {
            box-sizing: border-box;
            min-height: 100dvh;
            height: 100dvh;
            padding:
                max(16px, env(safe-area-inset-top))
                max(16px, env(safe-area-inset-right))
                max(16px, env(safe-area-inset-bottom))
                max(16px, env(safe-area-inset-left));
            touch-action: none;
            overscroll-behavior: contain;
        }
        html.vote-alert-lock,
        body.vote-alert-lock {
            overflow: hidden;
            touch-action: none;
        }

        .vote-proposal-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            display: grid;
            place-items: center;
            min-height: 100dvh;
            padding: 18px;
            color: #f4f8f2;
            background:
                radial-gradient(circle at 50% 30%, rgba(255, 247, 194, 0.22), transparent 34%),
                linear-gradient(135deg, rgba(4, 10, 18, 0.98), rgba(20, 58, 64, 0.98) 48%, rgba(42, 15, 28, 0.98));
            overflow: hidden;
        }

        .vote-proposal-card {
            display: grid;
            width: min(560px, 100%);
            justify-items: center;
            gap: 16px;
            padding: clamp(22px, 4vw, 34px);
            border: 1px solid rgba(255, 247, 194, 0.26);
            border-radius: 18px;
            background:
                radial-gradient(circle at 50% 0%, rgba(125, 248, 232, 0.16), transparent 50%),
                rgba(4, 10, 18, 0.72);
            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            text-align: center;
            animation: voteOverlayIn 0.46s cubic-bezier(.22,.92,.32,1.14) forwards;
        }

        .vote-proposal-icon {
            display: grid;
            width: 76px;
            height: 76px;
            place-items: center;
            border: 1px solid rgba(125, 248, 232, 0.42);
            border-radius: 50%;
            background: rgba(40, 214, 194, 0.14);
            color: #7df8e8;
            font-size: 38px;
            box-shadow: 0 0 34px rgba(40, 214, 194, 0.20);
        }

        .vote-proposal-title {
            color: #fff7c2;
            font-size: clamp(23px, 5vw, 36px);
            font-weight: 1000;
            line-height: 1.04;
            text-shadow: 0 0 24px rgba(255, 247, 194, 0.34);
        }

        .vote-proposal-sub {
            max-width: 430px;
            color: rgba(244, 248, 242, 0.88);
            font-size: clamp(15px, 3.4vw, 18px);
            font-weight: 800;
            line-height: 1.42;
        }

        .vote-proposal-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            width: 100%;
            margin-top: 4px;
        }

        .vote-proposal-actions .btn {
            min-height: 54px;
            font-size: 15px;
        }

        .btn.vote-proposal-btn {
            border-color: rgba(255, 247, 194, 0.44);
            color: #fff7c2;
            background:
                linear-gradient(135deg, rgba(125, 248, 232, 0.22), rgba(240, 189, 66, 0.20) 48%, rgba(255, 79, 109, 0.20)),
                rgba(4, 10, 18, 0.72);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30), 0 0 22px rgba(240, 189, 66, 0.12);
        }

        .btn.vote-proposal-btn:hover {
            border-color: rgba(255, 247, 194, 0.70);
            background:
                linear-gradient(135deg, rgba(125, 248, 232, 0.30), rgba(240, 189, 66, 0.26) 48%, rgba(255, 79, 109, 0.24)),
                rgba(4, 10, 18, 0.82);
        }

        .btn.vote-proposal-btn:disabled {
            opacity: 0.58;
            cursor: not-allowed;
        }

        @media (max-width: 520px) {
            .vote-proposal-actions {
                grid-template-columns: 1fr;
            }
        }

        @keyframes winnerOverlayIn {
            0% { opacity: 0; transform: scale(0.94); filter: saturate(0.72); }
            58% { opacity: 1; transform: scale(1.018); filter: saturate(1.18); }
            100% { opacity: 1; transform: scale(1); filter: saturate(1); }
        }

        @keyframes winnerOverlayOut {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.035); }
        }

        @keyframes winnerSweep {
            0% { transform: translateX(-135%) skewX(-17deg); opacity: 0; }
            24% { opacity: 1; }
            100% { transform: translateX(135%) skewX(-17deg); opacity: 0; }
        }

        @keyframes winnerTitlePop {
            0% { opacity: 0; transform: translateY(18px) scale(0.92); }
            62% { opacity: 1; transform: translateY(-3px) scale(1.03); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes winnerAvatarPop {
            0% { opacity: 0; transform: scale(0.62) rotate(-9deg); }
            58% { opacity: 1; transform: scale(1.12) rotate(4deg); }
            100% { opacity: 1; transform: scale(1) rotate(0); }
        }

        @keyframes winnerSparkFly {
            0% { opacity: 0; transform: translate3d(0, 16px, 0) rotate(0) scale(0.5); }
            16% { opacity: 1; }
            100% { opacity: 0; transform: translate3d(var(--spark-x), var(--spark-y), 0) rotate(150deg) scale(1); }
        }

        .winner-alert-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-height: 100dvh;
            padding: 22px;
            color: #f4f8f2;
            background:
                linear-gradient(126deg, rgba(3, 8, 14, 0.98) 0%, rgba(12, 48, 45, 0.98) 48%, rgba(37, 24, 10, 0.98) 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 247, 194, 0.08), inset 0 0 160px rgba(0, 0, 0, 0.42);
            overflow: hidden;
            cursor: pointer;
            animation: winnerOverlayIn 0.5s cubic-bezier(.22,.92,.32,1.14) forwards;
        }

        .winner-alert-overlay.is-spy {
            background:
                linear-gradient(126deg, rgba(5, 5, 8, 0.99) 0%, rgba(85, 18, 25, 0.98) 46%, rgba(101, 61, 12, 0.98) 100%);
        }

        .winner-alert-overlay.is-civilian {
            background:
                linear-gradient(126deg, rgba(3, 10, 12, 0.99) 0%, rgba(15, 92, 84, 0.98) 50%, rgba(63, 80, 14, 0.98) 100%);
        }

        .winner-alert-overlay.is-tie {
            background:
                radial-gradient(circle at 50% 24%, rgba(255, 247, 194, 0.20), transparent 34%),
                linear-gradient(126deg, rgba(4, 10, 18, 0.99) 0%, rgba(34, 54, 62, 0.98) 48%, rgba(66, 44, 16, 0.98) 100%);
        }

        .winner-alert-overlay.is-no-vote {
            background:
                radial-gradient(circle at 50% 22%, rgba(240, 189, 66, 0.22), transparent 34%),
                linear-gradient(126deg, rgba(4, 8, 16, 0.99) 0%, rgba(63, 24, 34, 0.98) 48%, rgba(73, 49, 12, 0.98) 100%);
        }

        .winner-alert-overlay.is-player-eliminated {
            background:
                radial-gradient(circle at 50% 24%, rgba(255, 111, 145, 0.24), transparent 34%),
                linear-gradient(126deg, rgba(5, 5, 10, 0.99) 0%, rgba(93, 17, 33, 0.98) 50%, rgba(113, 68, 13, 0.98) 100%);
        }

        .winner-alert-overlay.is-player-eliminated .winner-alert-title {
            color: #ffdb86;
        }

        .winner-alert-overlay.is-player-eliminated .winner-alert-line {
            max-width: 720px;
        }

        .winner-alert-overlay.is-player-eliminated .btn {
            pointer-events: auto;
        }

        .winner-alert-overlay.is-tie .winner-alert-title {
            color: #fff7c2;
        }

        .winner-alert-overlay.is-no-vote .winner-alert-title {
            color: #ffe18a;
        }

        .winner-alert-overlay.is-tie .winner-alert-line {
            max-width: 680px;
        }

        .winner-alert-overlay.is-no-vote .winner-alert-line {
            max-width: 720px;
        }

        .bomb-overlay {
            position: fixed;
            inset: 0;
            z-index: 10100;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            background: radial-gradient(circle at 50% 45%, rgba(255, 80, 0, 0.18), transparent 55%),
                        linear-gradient(160deg, rgba(4,4,6,0.97) 0%, rgba(90,15,5,0.98) 55%, rgba(50,10,2,0.99) 100%);
            animation: bombOverlayIn 0.28s ease-out both;
        }
        @keyframes bombOverlayIn {
            from { opacity: 0; transform: scale(1.04); }
            to   { opacity: 1; transform: scale(1); }
        }
        .bomb-overlay.fade-out {
            animation: fadeOverlayOut 0.42s ease-in both;
        }
        @keyframes fadeOverlayOut {
            to { opacity: 0; }
        }
        .bomb-overlay-icon {
            font-size: 4.5rem;
            animation: bombShake 0.55s ease-out both;
            filter: drop-shadow(0 0 18px #ff5500cc);
        }
        @keyframes bombShake {
            0%  { transform: translate(0,0) rotate(0deg); }
            15% { transform: translate(-6px, 4px) rotate(-8deg); }
            30% { transform: translate(5px,-4px) rotate(6deg); }
            45% { transform: translate(-4px, 3px) rotate(-4deg); }
            60% { transform: translate(3px,-2px) rotate(2deg); }
            75% { transform: translate(-2px, 1px) rotate(-1deg); }
            100%{ transform: translate(0,0) rotate(0deg); }
        }
        .bomb-overlay-title {
            margin-top: 1.1rem;
            font-size: clamp(1.5rem, 5vw, 2.2rem);
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #ff5500;
            text-shadow: 0 0 22px #ff5500cc, 0 0 50px #ff220088;
        }
        .bomb-overlay-sub {
            margin-top: 0.7rem;
            font-size: clamp(0.95rem, 3vw, 1.15rem);
            color: #ffd0b0;
            max-width: 340px;
        }
        .bomb-overlay-btn {
            margin-top: 2rem;
            padding: 0.7rem 2.4rem;
            background: #ff5500;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.04em;
            box-shadow: 0 0 14px #ff550088;
        }
        .bomb-overlay-btn:hover {
            background: #ff7733;
        }

        /* ── Ability result overlay ─────────────────────────────── */
        .ability-result-overlay {
            position: fixed;
            inset: 0;
            z-index: 10200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: rgba(0, 0, 0, 0.72);
            animation: abilityResultBackdropIn 0.22s ease-out both;
        }
        .ability-result-overlay.fade-out {
            animation: fadeOverlayOut 0.36s ease-in both;
        }
        @keyframes abilityResultBackdropIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .ability-result-card {
            background: linear-gradient(160deg, #181832 0%, #16213e 60%, #0f3460 100%);
            border: 1px solid rgba(255, 255, 255, 0.11);
            border-radius: 18px;
            box-shadow: 0 8px 48px rgba(0, 0, 0, 0.72);
            padding: 2rem 1.75rem 1.5rem;
            max-width: 400px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            animation: abilityResultCardIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes abilityResultCardIn {
            from { opacity: 0; transform: scale(0.88) translateY(16px); }
            to   { opacity: 1; transform: none; }
        }
        .ability-result-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
        }
        .ability-result-icon-placeholder {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
        }
        .ability-result-title {
            font-size: 1.12rem;
            font-weight: 700;
            color: #fff;
            text-align: center;
            letter-spacing: 0.02em;
        }
        .ability-result-message {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.82);
            text-align: center;
            line-height: 1.6;
            white-space: pre-wrap;
        }
        .ability-result-checks {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .ability-result-check {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            padding: 0.55rem 0.8rem;
        }
        .ability-result-check-type {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(255, 255, 255, 0.4);
            min-width: 56px;
        }
        .ability-result-check-type.full    { color: #74c0fc; }
        .ability-result-check-type.partial { color: #ffd43b; }
        .ability-result-check-name {
            flex: 1;
            font-size: 0.93rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
        }
        .ability-result-check-verdict {
            font-size: 0.85rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.8);
        }
        .ability-result-report {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .ability-result-report-row {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            padding: 0.55rem 0.8rem;
        }
        .ability-result-report-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, 0.42);
            min-width: 72px;
            padding-top: 0.1rem;
        }
        .ability-result-report-value {
            flex: 1;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.45;
        }
        .ability-result-close-btn {
            margin-top: 0.25rem;
            padding: 0.6rem 2.2rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 10px;
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.04em;
            transition: background 0.18s;
        }
        .ability-result-close-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* ── Vote countdown ─────────────────────────────────────── */
        .vote-countdown-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5rem 1rem 1rem;
            gap: 0.5rem;
            user-select: none;
        }
        .vote-countdown-num {
            font-size: 5.5rem;
            font-weight: 900;
            line-height: 1;
            color: #fff;
            letter-spacing: -0.04em;
            animation: voteCountdownTick 0.95s ease-out forwards;
        }
        .vote-countdown-num.red   { color: #ff6b6b; text-shadow: 0 0 32px #ff3333aa; }
        .vote-countdown-num.amber { color: #ffd43b; text-shadow: 0 0 32px #ffaa00aa; }
        .vote-countdown-num.green { color: #69db7c; text-shadow: 0 0 32px #00cc5588; }
        @keyframes voteCountdownTick {
            0%   { transform: scale(1.55); opacity: 0.35; }
            28%  { transform: scale(1.0);  opacity: 1; }
            72%  { transform: scale(1.0);  opacity: 1; }
            100% { transform: scale(0.72); opacity: 0.2; }
        }
        .vote-countdown-sub {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.55);
            margin: 0;
            text-align: center;
        }

        /* ── Hacker blocked overlay ── */
        .hacker-blocked-overlay {
            position: fixed; inset: 0; z-index: 10500;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0, 0, 0, 0.82);
            animation: hackerBackdropIn 0.15s ease-out both;
            pointer-events: none;
        }
        .hacker-blocked-overlay.fade-out {
            animation: hackerBackdropOut 0.35s ease-in both;
        }
        @keyframes hackerBackdropIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes hackerBackdropOut { from { opacity: 1; } to { opacity: 0; } }
        .hacker-blocked-card {
            text-align: center;
            padding: 2.4rem 2rem;
            animation: hackerCardIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes hackerCardIn {
            from { opacity: 0; transform: scale(1.18); }
            to   { opacity: 1; transform: scale(1); }
        }
        .hacker-blocked-icon {
            font-size: 3.8rem;
            display: block;
            margin-bottom: 0.5rem;
            animation: hackerIconPulse 0.6s ease-out both;
            filter: drop-shadow(0 0 18px #00ff99aa);
        }
        @keyframes hackerIconPulse {
            0%   { transform: scale(0.5) rotate(-12deg); opacity: 0; }
            60%  { transform: scale(1.15) rotate(3deg);  opacity: 1; }
            100% { transform: scale(1) rotate(0deg);     opacity: 1; }
        }
        .hacker-blocked-text {
            font-size: clamp(1.4rem, 5vw, 2.4rem);
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #00ff99;
            text-shadow: 0 0 24px #00ff99cc, 0 0 60px #00ff9944;
            animation: hackerGlitch 0.8s steps(1) 0.2s both;
            line-height: 1.15;
        }
        @keyframes hackerGlitch {
            0%   { clip-path: inset(0 0 100% 0); color: #ff0077; text-shadow: 2px 0 0 #ff0077, -2px 0 0 #00ffff; }
            10%  { clip-path: inset(30% 0 40% 0); color: #00ffff; }
            20%  { clip-path: inset(0 0 0 0); color: #ff0077; text-shadow: -3px 0 0 #ff0077, 3px 0 0 #00ffff; }
            30%  { clip-path: inset(60% 0 10% 0); color: #00ff99; text-shadow: 0 0 24px #00ff99cc; }
            40%  { clip-path: inset(0 0 0 0); color: #ff0077; }
            50%  { clip-path: inset(20% 0 50% 0); color: #00ff99; text-shadow: 0 0 24px #00ff99cc; }
            60%  { clip-path: inset(0 0 0 0); color: #00ffff; }
            70%  { clip-path: inset(40% 0 30% 0); }
            80%  { clip-path: inset(0 0 0 0); color: #00ff99; text-shadow: 0 0 24px #00ff99cc, 0 0 60px #00ff9944; }
            90%  { clip-path: inset(10% 0 60% 0); }
            100% { clip-path: inset(0 0 0 0); color: #00ff99; text-shadow: 0 0 24px #00ff99cc, 0 0 60px #00ff9944; }
        }
        .hacker-blocked-sub {
            font-size: 0.95rem;
            color: rgba(0, 255, 153, 0.6);
            margin-top: 0.75rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .winner-alert-overlay::before {
            content: "";
            position: absolute;
            inset: -20%;
            background: linear-gradient(105deg, transparent 0%, transparent 42%, rgba(255, 247, 194, 0.28) 48%, rgba(125, 248, 232, 0.20) 53%, transparent 60%, transparent 100%);
            animation: winnerSweep 1.35s 0.16s ease-out both;
            pointer-events: none;
        }

        .winner-alert-overlay::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,0.035) 43px 44px),
                repeating-linear-gradient(0deg, transparent 0 48px, rgba(255,255,255,0.025) 49px 50px);
            opacity: 0.24;
            pointer-events: none;
        }

        .winner-alert-overlay.fade-out {
            animation: winnerOverlayOut 0.45s ease-in forwards;
            pointer-events: none;
        }

        .winner-alert-content {
            position: relative;
            z-index: 1;
            display: flex;
            width: min(820px, 100%);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            text-align: center;
            pointer-events: none;
        }

        .winner-alert-kicker {
            padding: 6px 10px;
            border: 1px solid rgba(255, 247, 194, 0.30);
            border-radius: 8px;
            color: #fff7c2;
            background: rgba(0, 0, 0, 0.22);
            font-size: 13px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0;
        }

        .winner-alert-title {
            color: #fff7c2;
            font-size: 58px;
            line-height: 0.95;
            font-weight: 1000;
            letter-spacing: 0;
            text-transform: uppercase;
            text-shadow: 0 0 30px rgba(255, 231, 143, 0.68), 0 3px 0 rgba(0, 0, 0, 0.56);
            animation: winnerTitlePop 0.62s 0.18s cubic-bezier(.18,.82,.2,1.16) both;
        }

        .winner-alert-line {
            display: flex;
            max-width: 760px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: rgba(244, 248, 242, 0.94);
            font-size: 23px;
            line-height: 1.28;
            font-weight: 900;
        }

        .winner-alert-player {
            display: inline-flex;
            max-width: min(520px, 100%);
            min-width: 0;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            border: 1px solid rgba(255, 247, 194, 0.30);
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.26);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.30);
        }

        .winner-alert-player.is-exposed-spy {
            border-color: rgba(255, 79, 109, 0.62);
            background: linear-gradient(135deg, rgba(124, 12, 28, 0.88), rgba(60, 5, 14, 0.82));
            box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34), 0 0 34px rgba(255, 79, 109, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        .winner-alert-player.is-exposed-spy .winner-alert-avatar {
            border-color: rgba(255, 204, 210, 0.76);
            box-shadow: 0 0 24px rgba(255, 79, 109, 0.34);
        }

        .winner-alert-avatar {
            display: inline-grid;
            width: 76px;
            height: 76px;
            flex: 0 0 auto;
            place-items: center;
            border: 2px solid rgba(255, 238, 189, 0.50);
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.28) center / cover no-repeat;
            color: #fff7c2;
            font-size: 24px;
            font-weight: 1000;
            animation: winnerAvatarPop 0.72s 0.32s cubic-bezier(.18,.82,.2,1.16) both;
        }

        .winner-alert-avatar.premium-ring {
            background-size: cover;
        }

        .winner-alert-name {
            min-width: 0;
            color: #f4f8f2;
            overflow-wrap: anywhere;
            font-size: 25px;
            line-height: 1.1;
            font-weight: 1000;
            text-align: left;
        }

        .winner-alert-sparks {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .winner-alert-sparks span {
            position: absolute;
            left: var(--spark-left);
            top: var(--spark-top);
            width: 4px;
            height: 24px;
            border-radius: 3px;
            background: linear-gradient(180deg, #fff7c2, #7df8e8);
            box-shadow: 0 0 18px rgba(255, 247, 194, 0.5);
            transform-origin: center;
            animation: winnerSparkFly 1.24s ease-out forwards;
            animation-delay: var(--spark-delay);
        }

        .winner-alert-tap {
            color: rgba(255, 247, 194, 0.62);
            font-size: 13px;
            font-weight: 700;
        }

        html.winner-alert-lock,
        body.winner-alert-lock {
            overflow: hidden;
            touch-action: none;
        }

        @media (max-width: 720px) {
            .winner-alert-overlay {
                padding:
                    max(16px, env(safe-area-inset-top))
                    max(16px, env(safe-area-inset-right))
                    max(16px, env(safe-area-inset-bottom))
                    max(16px, env(safe-area-inset-left));
                touch-action: none;
                overscroll-behavior: contain;
            }

            .winner-alert-title {
                font-size: 36px;
                line-height: 1.02;
            }

            .winner-alert-line {
                font-size: 18px;
            }

            .winner-alert-player {
                width: 100%;
                justify-content: center;
                gap: 10px;
            }

            .winner-alert-avatar {
                width: 64px;
                height: 64px;
                font-size: 19px;
            }

            .winner-alert-name {
                font-size: 20px;
            }
        }

        .room-vote-panel {
            width: min(1160px, 100%);
            margin: 0 auto;
            scroll-margin-top: 18px;
        }

        /* ── Spy Guess Section (spy's device during playing) ────── */
        .spy-guess-section {
            margin: 16px 0 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .btn.spy-guess-btn {
            background: linear-gradient(135deg, #8b0000 0%, #c0392b 50%, #8b0000 100%);
            border: 2px solid rgba(255,100,100,0.5);
            color: #fff;
            font-weight: 800;
            font-size: 15px;
            letter-spacing: 0.04em;
            padding: 14px 28px;
            border-radius: 14px;
            box-shadow: 0 4px 18px rgba(180,30,30,0.5), 0 0 0 0 rgba(220,50,50,0.4);
            transition: transform 180ms ease, box-shadow 180ms ease;
            animation: spyBtnPulse 2s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }
        @keyframes spyBtnPulse {
            0%, 100% { box-shadow: 0 4px 18px rgba(180,30,30,0.5), 0 0 0 0 rgba(220,50,50,0.35); }
            50%       { box-shadow: 0 4px 24px rgba(200,40,40,0.7), 0 0 0 10px rgba(220,50,50,0); }
        }
        .btn.spy-guess-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
            transform: skewX(-20deg) translateX(-100%);
            transition: transform 500ms;
        }
        .btn.spy-guess-btn:hover::before { transform: skewX(-20deg) translateX(200%); }
        .btn.spy-guess-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,40,40,0.7); }

        .spy-guess-pending {
            margin: 16px 0;
            padding: 14px 20px;
            border: 1.5px solid rgba(220,80,80,0.4);
            border-radius: 12px;
            background: rgba(120,20,20,0.18);
            text-align: center;
            color: rgba(255,180,180,0.85);
            font-size: 14px;
            animation: spyBtnPulse 2.5s ease-in-out infinite;
        }
        .spy-guess-active-banner {
            margin: 12px 0;
            padding: 12px 18px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(140,0,0,0.28), rgba(80,0,0,0.22));
            border: 1.5px solid rgba(220,60,60,0.45);
            text-align: center;
            color: rgba(255,200,200,0.9);
            font-size: 14px;
            font-weight: 600;
        }

        /* ── Room Vote Panel ─────────────────────────────────────── */
        .room-vote-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 16px 0 8px;
            text-align: center;
        }
        .room-vote-kicker {
            margin: 0;
            color: rgba(255, 247, 194, 0.66);
            font-size: 13px;
            font-weight: 800;
        }
        .room-vote-title {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin: 0;
            color: #fff7c2;
            font-size: 36px;
            line-height: 1.05;
            font-weight: 1000;
            letter-spacing: 0;
            text-shadow: 0 0 28px rgba(240, 189, 66, 0.46), 0 3px 0 rgba(0, 0, 0, 0.34);
        }
        .room-vote-title-icon {
            display: inline-grid;
            width: 48px;
            height: 48px;
            place-items: center;
            border: 1px solid rgba(255, 247, 194, 0.46);
            border-radius: 50%;
            color: #1a1212;
            background: linear-gradient(135deg, #ff4f6d 0%, #f0bd42 58%, #d7f75b 100%);
            box-shadow: 0 16px 36px rgba(255, 79, 109, 0.22), 0 0 34px rgba(240, 189, 66, 0.28);
            font-size: 25px;
        }
        .room-vote-prompt {
            width: fit-content;
            max-width: calc(100% - 24px);
            margin: 6px auto 20px;
            padding: 10px 16px;
            border: 1px solid rgba(240, 189, 66, 0.38);
            border-radius: 8px;
            color: #fff7c2;
            background:
                linear-gradient(135deg, rgba(255, 79, 109, 0.18), rgba(240, 189, 66, 0.12)),
                rgba(7, 12, 24, 0.58);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
            font-size: 18px;
            line-height: 1.35;
            font-weight: 900;
            text-align: center;
        }
        .vote-targets-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(156px, 178px));
            justify-content: center;
            justify-items: stretch;
            gap: 18px;
            width: 100%;
            max-width: 1120px;
            margin: 0 auto 18px;
        }
        .vote-target-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 164px;
            gap: 12px;
            padding: 18px 14px;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035));
            cursor: pointer;
            transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
            font-size: 15px;
            color: var(--paper);
            font-weight: 900;
            text-align: center;
        }
        .vote-target-card:hover {
            transform: translateY(-3px);
            border-color: rgba(40,214,194,0.6);
            background: rgba(40,214,194,0.08);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        .vote-target-card.selected {
            border-color: rgba(40,214,194,0.9);
            background: rgba(40,214,194,0.14);
            box-shadow: 0 0 0 3px rgba(40,214,194,0.25);
        }
        .vote-target-card .player-avatar {
            width: 68px;
            height: 68px;
            pointer-events: none;
            font-size: 18px;
        }
        .winner-panel.no-vote-end-panel {
            border-color: rgba(240, 189, 66, 0.38);
            background:
                linear-gradient(135deg, rgba(255, 79, 109, 0.13), rgba(240, 189, 66, 0.12)),
                rgba(7, 12, 24, 0.76);
            box-shadow: 0 22px 46px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        }
        .no-vote-end-kicker {
            color: #f0bd42;
            font-size: 12px;
            font-weight: 1000;
            text-transform: uppercase;
            letter-spacing: 0;
        }
        .no-vote-end-title {
            color: #fff7c2;
            font-size: 24px;
            line-height: 1.1;
            font-weight: 1000;
        }
        @media (max-width: 720px) {
            .room-vote-title {
                font-size: 28px;
            }
            .room-vote-title-icon {
                width: 40px;
                height: 40px;
                font-size: 21px;
            }
            .room-vote-prompt {
                font-size: 15px;
                padding: 9px 12px;
            }
            .vote-targets-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }
            .vote-target-card {
                min-height: 136px;
                padding: 13px 10px;
                font-size: 13px;
            }
            .vote-target-card .player-avatar {
                width: 54px;
                height: 54px;
                font-size: 15px;
            }
        }
        .vote-progress {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin: 16px 0;
        }
        .vote-progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 6px;
            overflow: hidden;
        }
        .vote-progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #28d6c2, #d7f75b);
            border-radius: 6px;
            transition: width 400ms ease;
        }
        .vote-waiting-msg {
            color: var(--muted);
            font-size: 13px;
            text-align: center;
        }
        .vote-result-panel {
            margin: 12px 0;
            padding: 18px;
            border-radius: 14px;
            background: rgba(40,214,130,0.1);
            border: 1.5px solid rgba(40,214,130,0.4);
            text-align: center;
        }
        .vote-result-panel.result-spy { background: rgba(40,200,130,0.12); border-color: rgba(40,200,130,0.5); }
        .vote-result-panel.result-civ { background: rgba(220,80,80,0.12); border-color: rgba(220,80,80,0.5); }
        .vote-result-title { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
        .vote-result-sub   { font-size: 14px; color: var(--muted); }

        /* ── Card + Instructions layout ─────────────────────────── */
        .card-with-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            width: 100%;
        }

        .online-card-column {
            display: grid;
            width: min(430px, 100%);
            justify-items: center;
            gap: 12px;
        }

        .card-with-info .online-card-column .play-surface {
            width: 100%;
        }

        .card-info-button-row {
            display: flex;
            justify-content: center;
            margin-top: 2px;
        }

        .online-card-actions {
            justify-content: center;
            width: 100%;
            margin-top: 0;
        }

        .secret-ability-panel {
            display: grid;
            gap: 9px;
            width: 100%;
            padding: 12px;
            border: 1px solid rgba(240,189,66,.30);
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(240,189,66,.10), rgba(40,214,194,.07)), rgba(4,10,18,.58);
        }

        .secret-ability-copy {
            display: grid;
            gap: 3px;
            text-align: left;
        }

        .secret-ability-copy b {
            color: #fff7c2;
            font-size: 13px;
        }

        .secret-ability-copy span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .secret-ability-head {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .secret-ability-passive {
            display: grid;
            gap: 4px;
            padding: 9px;
            border-radius: 8px;
            background: rgba(4,10,18,.4);
            text-align: left;
        }

        .secret-ability-passive b {
            color: #d7f75b;
            font-size: 11px;
            text-transform: uppercase;
        }

        .secret-ability-passive span {
            color: rgba(244,248,242,.78);
            font-size: 12px;
            line-height: 1.4;
        }

        .secret-ability-target {
            min-height: 38px;
            border: 1px solid rgba(255,238,189,.22);
            border-radius: 8px;
            color: var(--paper);
            background: rgba(4,10,18,.76);
            padding: 0 10px;
        }
        .secret-ability-targets {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .secret-ability-targets.single {
            grid-template-columns: 1fr;
        }

        .secret-ability-btn {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: linear-gradient(135deg, #f0bd42, #ff735c);
            color: #101211;
            border-color: rgba(255,247,194,.45);
        }
        .secret-ability-btn:disabled {
            color: rgba(244,248,242,.62);
            border-color: rgba(255,238,189,.16);
            background: rgba(255,255,255,.08);
            box-shadow: none;
        }
        .ability-icon {
            width: 28px;
            height: 28px;
            object-fit: contain;
            flex-shrink: 0;
            pointer-events: none;
        }
        .ability-label {
            display: inline-block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        @media (max-width: 600px) {
            .ability-icon {
                width: 22px;
                height: 22px;
            }
            .ability-label {
                font-size: 12px;
            }
            .secret-ability-btn {
                gap: 6px;
            }
        }

        .secret-ability-action-row {
            display: grid;
            grid-template-columns: minmax(126px, .84fr) minmax(0, 1.16fr);
            gap: 8px;
            align-items: stretch;
        }

        .secret-ability-note {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            padding: 8px;
            border: 1px solid rgba(255,238,189,.14);
            border-radius: 8px;
            color: rgba(244,248,242,.76);
            background: rgba(4,10,18,.42);
            font-size: 11px;
            line-height: 1.35;
            text-align: left;
        }

        .secret-ability-note svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            color: #f0bd42;
        }

        .secret-ability-note b {
            display: block;
            color: #fff7c2;
            font-size: 11px;
        }
        .secret-ability-use-pill {
            display: inline-flex;
            align-items: center;
            width: max-content;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(215,247,91,.24);
            background: rgba(215,247,91,.08);
            color: #d7f75b;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
        }
        .secret-ability-status {
            color: rgba(244,248,242,.68);
            font-size: 11px;
            line-height: 1.35;
        }

        .online-card-column .spy-guess-section,
        .online-card-column .spy-guess-pending {
            width: 100%;
            margin: 0;
        }

        .card-info-panel {
            display: none; /* hidden on mobile, shown on desktop below */
        }

        .card-info-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 18px;
            border: 1px solid rgba(255, 238, 189, 0.24);
            border-radius: 99px;
            background: rgba(255, 255, 255, 0.06);
            color: rgba(244, 248, 242, 0.82);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: .02em;
            transition: background .15s, border-color .15s;
        }

        .card-info-btn:hover {
            background: rgba(255, 255, 255, 0.10);
            border-color: rgba(255, 238, 189, 0.38);
        }

        .card-info-btn.spy-info-btn {
            border-color: rgba(255, 79, 109, 0.38);
            background: rgba(255, 79, 109, 0.08);
        }

        .card-info-reopen-row {
            display: none;
            justify-content: center;
            width: 100%;
        }

        .card-info-reopen-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 40px;
            padding: 0 16px;
            border: 1px solid rgba(255, 238, 189, 0.24);
            border-radius: 999px;
            color: rgba(255, 247, 194, 0.92);
            background: rgba(255, 255, 255, 0.07);
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            transition: background .15s, border-color .15s, transform .15s;
        }

        .card-info-reopen-btn:hover {
            border-color: rgba(255, 238, 189, 0.42);
            background: rgba(255, 255, 255, 0.12);
            transform: translateY(-1px);
        }

        .card-info-reopen-btn.spy-info-btn {
            border-color: rgba(255, 79, 109, 0.36);
            color: #ffd4dc;
            background: rgba(255, 79, 109, 0.10);
        }

        /* ── Desktop: panel beside card ── */
        @media (min-width: 680px) {
            .card-with-info {
                flex-wrap: wrap;
                flex-direction: row;
                align-items: flex-start;
                justify-content: center;
                gap: 22px;
            }

            .online-card-column {
                width: min(460px, 100%);
                flex: 0 1 460px;
            }

            /* Override body.game-page min-height (higher specificity needed) */
            .card-with-info .play-surface,
            body.game-page .card-with-info .play-surface {
                flex: 0 0 auto;
                width: 100%;
                max-width: 460px;
                min-height: 0;
                padding: 18px;
            }

            .card-info-panel {
                display: grid;
                position: relative;
                flex: 0 1 320px;
                min-width: 240px;
                max-width: 320px;
                gap: 14px;
                padding: 18px 38px 18px 16px;
                border: 1px solid rgba(255, 238, 189, 0.15);
                border-radius: 14px;
                background: rgba(4, 10, 18, 0.74);
                align-self: flex-start;
            }

            .card-info-panel.spy-panel {
                border-color: rgba(255, 79, 109, 0.26);
                background: rgba(22, 4, 10, 0.80);
            }

            .card-info-btn {
                display: none; /* hidden on desktop */
            }

            .card-info-reopen-row {
                display: flex;
            }
        }

        .online-layout > .online-card-column {
            width: 100%;
        }

        .online-layout > .online-card-column .play-surface {
            width: 100%;
            min-width: 0;
        }

        .online-layout > .online-card-column .secret-card {
            width: min(400px, 100%);
        }

        @media (min-width: 941px) {
            .online-layout {
                grid-template-columns: minmax(430px, 0.95fr) minmax(360px, 1.05fr);
            }

            .online-layout > .online-card-column {
                width: min(460px, 100%);
                justify-self: center;
            }

            .online-layout > .online-card-column .play-surface {
                padding: 18px;
            }
        }

        .card-info-panel-close {
            position: absolute;
            top: 9px;
            right: 9px;
            display: grid;
            width: 28px;
            height: 28px;
            place-items: center;
            border: 1px solid rgba(255, 238, 189, 0.20);
            border-radius: 50%;
            color: rgba(255, 247, 194, 0.84);
            background: rgba(0, 0, 0, 0.20);
            font-size: 17px;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
            transition: background .15s, border-color .15s, color .15s, transform .15s;
        }

        .card-info-panel-close:hover {
            border-color: rgba(255, 247, 194, 0.46);
            color: #fff7c2;
            background: rgba(255, 255, 255, 0.10);
            transform: translateY(-1px);
        }

        .card-info-role-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-info-role-icon {
            font-size: 2em;
            line-height: 1;
        }

        .card-info-role-title {
            font-size: clamp(14px, 2.4vw, 17px);
            font-weight: 900;
            color: #fff7c2;
            line-height: 1.2;
        }

        .card-info-role-sub {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: rgba(255, 247, 194, 0.50);
            margin-top: 1px;
        }

        .card-info-divider {
            border: none;
            border-top: 1px solid rgba(255, 238, 189, 0.10);
            margin: 0;
        }

        .card-info-points {
            display: grid;
            gap: 9px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .card-info-points li {
            display: flex;
            gap: 9px;
            align-items: flex-start;
            font-size: 13px;
            color: rgba(244, 248, 242, 0.84);
            line-height: 1.5;
        }

        .card-info-points li .ci-bullet {
            flex-shrink: 0;
            margin-top: 2px;
            font-size: 10px;
            color: #28d6c2;
        }

        .card-info-panel.spy-panel .card-info-points li .ci-bullet {
            color: #ff6b8a;
        }

        .card-info-notes {
            display: grid;
            gap: 7px;
        }

        .card-info-note {
            padding: 9px 11px;
            border-left: 3px solid #f0bd42;
            border-radius: 0 8px 8px 0;
            background: rgba(240, 189, 66, 0.09);
            font-size: 12.5px;
            color: rgba(244, 248, 242, 0.88);
            line-height: 1.45;
        }

        /* ── Mobile info sheet ─────────────────────────────────── */
        .card-info-sheet-backdrop {
            position: fixed;
            inset: 0;
            z-index: 60;
            background: rgba(0, 0, 0, 0.54);
            animation: fadeInBg .2s ease;
        }

        .card-info-sheet {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 61;
            padding: 6px 0 max(20px, env(safe-area-inset-bottom));
            border-radius: 20px 20px 0 0;
            background: rgba(7, 12, 24, 0.97);
            border-top: 1px solid rgba(255, 238, 189, 0.22);
            box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
            animation: sheetSlideUp .28s cubic-bezier(.2,.8,.2,1);
        }

        .card-info-sheet.spy-sheet {
            border-color: rgba(255, 79, 109, 0.32);
        }

        .card-info-sheet.slide-out {
            animation: sheetSlideDown .25s cubic-bezier(.6,.0,.8,.4) forwards;
        }

        @keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeOutBg { from { opacity: 1; } to { opacity: 0; } }
        @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes sheetSlideDown { from { transform: translateY(0); } to { transform: translateY(110%); } }

        .card-info-sheet-handle {
            width: 38px;
            height: 4px;
            border-radius: 2px;
            background: rgba(255, 238, 189, 0.22);
            margin: 4px auto 14px;
        }

        .card-info-sheet-inner {
            padding: 0 20px 4px;
            display: grid;
            gap: 14px;
        }

        .card-info-sheet-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-info-sheet-icon {
            font-size: 2em;
            line-height: 1;
        }

        .card-info-sheet-title {
            flex: 1;
            font-size: 18px;
            font-weight: 900;
            color: #fff7c2;
        }

        .card-info-sheet-close {
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255, 238, 189, 0.20);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            color: rgba(244, 248, 242, 0.7);
            font-size: 14px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .reveal-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            width: 100%;
        }

        .reveal-stage {
            display: grid;
            justify-items: center;
            gap: 14px;
            width: min(920px, 100%);
            margin: 0 auto;
        }

        .reveal-stage .winner-panel,
        .reveal-stage .summary-grid {
            margin-top: 0;
        }

        .reveal-summary-title {
            display: inline-grid;
            place-items: center;
            min-height: 46px;
            padding: 9px 18px;
            border: 1px solid rgba(125, 248, 232, 0.48);
            border-radius: 8px;
            color: #fff7c2;
            background:
                radial-gradient(circle at 50% 0%, rgba(125, 248, 232, 0.22), transparent 58%),
                linear-gradient(135deg, rgba(4, 44, 54, 0.88), rgba(72, 15, 38, 0.72));
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 28px rgba(40, 214, 194, 0.16);
            font-size: clamp(22px, 4vw, 34px);
            font-weight: 1000;
            line-height: 1;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 0 0 22px rgba(125, 248, 232, 0.34), 0 3px 0 rgba(0, 0, 0, 0.42);
        }

        .result-box {
            display: grid;
            align-content: center;
            justify-items: center;
            text-align: center;
            min-height: 130px;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: rgba(0, 0, 0, 0.18);
        }

        .result-box.result-official {
            border-color: rgba(40, 214, 194, 0.52);
            background:
                radial-gradient(circle at 50% 0%, rgba(40, 214, 194, 0.20), transparent 52%),
                rgba(12, 72, 61, 0.38);
            box-shadow: 0 0 28px rgba(40, 214, 194, 0.10);
        }

        .result-box.result-decoy {
            border-color: rgba(129, 25, 48, 0.76);
            background:
                radial-gradient(circle at 50% 0%, rgba(129, 25, 48, 0.36), transparent 54%),
                rgba(58, 7, 20, 0.46);
            box-shadow: 0 0 26px rgba(129, 25, 48, 0.16);
        }

        .result-box.result-spy {
            border-color: rgba(255, 79, 109, 0.70);
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 79, 109, 0.28), transparent 52%),
                rgba(92, 9, 22, 0.50);
            box-shadow: 0 0 30px rgba(255, 79, 109, 0.18);
        }

        .result-box span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            font-weight: 900;
            text-align: center;
            text-transform: uppercase;
        }

        .result-box b {
            display: block;
            margin-top: 10px;
            color: var(--paper);
            font-size: clamp(22px, 4vw, 36px);
            line-height: 1.08;
            text-align: center;
            word-break: break-word;
        }

        .result-box.result-official span,
        .result-box.result-official b {
            color: #7df8e8;
            text-shadow: 0 0 18px rgba(40, 214, 194, 0.24);
        }

        .result-box.result-decoy span,
        .result-box.result-decoy b {
            color: #c64866;
            text-shadow: 0 0 18px rgba(129, 25, 48, 0.34);
        }

        .result-box.result-spy span,
        .result-box.result-spy b {
            color: #ff4f6d;
            text-shadow: 0 0 20px rgba(255, 79, 109, 0.36);
        }

        .winner-choice-panel {
            width: min(620px, 100%);
            margin-inline: auto;
            border-color: rgba(40, 214, 194, 0.34);
            background:
                radial-gradient(circle at 50% 0%, rgba(40, 214, 194, 0.16), transparent 36%),
                rgba(7, 12, 24, 0.78);
        }

        .winner-choice-panel .actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            width: 100%;
        }

        .winner-choice-prompt {
            margin: 0;
            padding: 10px 12px;
            border: 1px solid rgba(255, 247, 194, 0.32);
            border-radius: 8px;
            color: #fff7c2;
            background:
                linear-gradient(135deg, rgba(255, 247, 194, 0.14), rgba(40, 214, 194, 0.10)),
                rgba(0, 0, 0, 0.18);
            box-shadow: 0 0 24px rgba(255, 247, 194, 0.08);
            font-size: clamp(15px, 2.4vw, 19px);
            font-weight: 1000;
            line-height: 1.25;
            text-shadow: 0 0 18px rgba(255, 247, 194, 0.22);
        }

        .winner-choice-panel .btn {
            width: 100%;
        }

        .footer-note {
            width: min(760px, 100%);
            margin: 56px auto 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
            text-align: center;
        }

        body.game-page .hero,
        body.game-page #setup,
        body.game-page main > .footer-note {
            display: none;
        }

        body.game-page .app {
            min-height: 100vh;
            padding-bottom: 30px;
        }

        body.game-page .topbar {
            padding-bottom: 16px;
        }

        body.game-page {
            background-attachment: scroll;
        }

        @media (hover: none), (pointer: coarse) {
            body,
            body.game-page {
                background-attachment: scroll;
            }

            body::before,
            body::after {
                position: absolute;
                transform: none;
            }

            *,
            *::before,
            *::after {
                -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
            }

            .vote-effect-icon,
            .winner-alert-sparks,
            .winner-alert-orb,
            .card-name-arc {
                filter: none !important;
            }
        }

        body.game-page::before {
            opacity: 0.42;
        }

        body.game-page .play-surface,
        body.game-page .panel,
        body.game-page .chat-panel,
        body.game-page .turn-panel {
            backdrop-filter: none;
        }

        body.game-page .game-view.active {
            display: block;
            margin-top: 0;
        }

        body.game-page .play-surface {
            min-height: calc(100vh - 132px);
        }

        body.game-page #onlineGameView > .panel {
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        body.game-page #onlineGameView > .panel::before {
            display: none;
        }

        body.game-page #onlineGameView > .panel > .panel-body {
            padding: 0;
        }

        body.game-page #localGameView > .play-surface,
        body.game-page #onlineGameView .play-surface {
            min-height: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
        }

        [hidden] {
            display: none !important;
        }

        @media (min-width: 941px) {
            .app {
                width: calc(100% - 48px);
                margin-left: 24px;
                margin-right: 24px;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                padding-bottom: 0; /* override global 56px so workspace/footer sit at the true bottom */
            }

            main {
                flex: 1 0 auto;
                display: flex;
                min-height: 0;
                flex-direction: column;
            }

            .hero {
                flex: 1 1 auto;
                min-height: 0;
            }

            .workspace {
                flex: 0 0 auto;
            }
        }

        @media (max-width: 940px) {
            body {
                background:
                    linear-gradient(180deg, rgba(2, 7, 21, 0.36) 0%, rgba(4, 9, 22, 0.14) 40%, rgba(3, 5, 10, 0.42) 100%),
                    url("/assets/optimized/wtykamobile.webp");
                background-attachment: scroll;
                background-position: center 28%;
                background-repeat: no-repeat;
                background-size: cover, cover;
            }

            .hero,
            .workspace {
                grid-template-columns: 1fr;
            }

            .hero {
                min-height: 54vh;
                padding-top: 26px;
            }

            .hero-art {
                display: none;
                min-height: 260px;
            }

            .hero-art svg {
                min-height: 260px;
            }
        }

        @media (max-width: 640px) {
            body {
                background:
                    linear-gradient(180deg, rgba(2, 7, 21, 0.18) 0%, rgba(4, 9, 22, 0.08) 34%, rgba(3, 5, 10, 0.38) 100%),
                    url("/assets/optimized/wtykamobile.webp");
                background-attachment: scroll;
                background-position: center -44px;
                background-repeat: no-repeat;
                background-size: cover, cover;
                background-color: #030711;
            }

            .players-grid > .player-tile {
                flex: 1 1 100%;
                max-width: 100%;
            }

            .player-tile {
                display:grid;
                grid-template-columns:46px minmax(0, 1fr) auto;
                align-items:center;
            }

            .player-tile .player-name {
                white-space:normal;
                overflow:visible;
                text-overflow:clip;
                line-height:1.18;
            }

            .player-tile.player-eliminated .eliminated-status {
                grid-column: 2;
                justify-self: start;
            }

            .player-tile.player-eliminated .player-btns {
                grid-column: 3;
                grid-row: 1 / span 2;
            }

            .stage11-player-card {
                display: flex;
                grid-template-columns: none;
                align-items: center;
                min-height: 0;
                padding: 9px 10px;
            }

            .stage11-player-card > .player-name {
                flex-basis: 120px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.12;
            }

            .stage11-player-card > .player-status-pill {
                margin-left: auto;
            }

            .stage11-player-card > .rank-league-badge,
            .stage11-player-card > .player-meta-pill:not(.level):not(.title) {
                display: none;
            }

            .stage11-player-card.player-eliminated .eliminated-status,
            .stage11-player-card.player-eliminated .player-btns {
                grid-column: auto;
                grid-row: auto;
            }

            body::before {
                opacity: 0.35;
            }

            .app {
                width: min(100% - 22px, 1180px);
                min-height: 100svh;
                display: flex;
                flex-direction: column;
                padding-top: 2px;
                padding-bottom: 0;
            }

            main {
                flex: 1 0 auto;
                display: flex;
                min-height: 0;
                flex-direction: column;
            }

            .topbar {
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 8px;
                padding: 4px 0 2px;
            }

            .mobile-menu-toggle {
                display: inline-flex;
                width: min(118px, 32vw);
                min-height: 36px;
                align-items: center;
                justify-content: center;
                gap: 6px;
                margin-left: auto;
                padding: 0 10px;
                border: 1px solid rgba(255, 238, 189, 0.32);
                border-radius: var(--radius);
                color: #fff7c2;
                background:
                    linear-gradient(135deg, rgba(40, 214, 194, 0.16), rgba(240, 189, 66, 0.10)),
                    rgba(5, 12, 22, 0.70);
                box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
                font-weight: 1000;
                cursor: pointer;
                backdrop-filter: blur(10px);
            }

            .mobile-menu-toggle svg {
                width: 16px;
                height: 16px;
            }

            .top-actions {
                position: relative;
                z-index: 16;
                display: none;
                width: 100%;
                grid-template-columns: 1fr;
                order: 3;
                gap: 8px;
                margin-left: 0;
                padding: 10px;
                border: 1px solid rgba(255, 238, 189, 0.18);
                border-radius: var(--radius);
                background:
                    linear-gradient(145deg, rgba(7, 12, 24, 0.88), rgba(18, 10, 24, 0.82)),
                    rgba(5, 12, 22, 0.86);
                box-shadow: 0 20px 52px rgba(0, 0, 0, 0.34);
                backdrop-filter: blur(14px);
            }

            .topbar.menu-open .top-actions {
                display: grid;
            }

            .top-actions .btn,
            .top-actions form,
            .top-actions form .btn {
                width: 100%;
            }

            .top-actions .btn {
                min-height: 42px;
                gap: 8px;
                padding: 0 12px;
                font-size: 13px;
                min-width: 0;
                white-space: nowrap;
                justify-content: center;
            }

            .top-actions .btn svg {
                width: 16px;
                height: 16px;
            }

            .top-actions .btn.premium {
                border-color: rgba(240, 189, 66, 0.82);
                background:
                    linear-gradient(135deg, rgba(240, 189, 66, 0.42), rgba(255, 247, 194, 0.16) 48%, rgba(40, 214, 194, 0.10)),
                    rgba(35, 22, 5, 0.84);
                box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34), 0 0 24px rgba(240, 189, 66, 0.18);
            }

            .top-profile-avatar {
                width: 18px;
                height: 18px;
                font-size: 8px;
            }

            .brand-mark {
                width: 44px;
                height: 44px;
            }

            .brand {
                min-width: 0;
                gap: 9px;
                font-size: clamp(18px, 6.2vw, 23px);
                line-height: 1;
            }

            h1 {
                max-width: 96%;
                font-size: clamp(28px, 8.8vw, 40px);
                line-height: 0.98;
            }

            .lead {
                max-width: 94%;
                font-size: 14px;
                line-height: 1.45;
            }

            .hero {
                flex: 0 0 auto;
                min-height: 0;
                align-items: start;
                padding: 4px 0 6px;
            }

            .hero-copy {
                gap: 8px;
            }

            .mode-grid,
            .split,
            .room-settings,
            .online-layout,
            .chat-form,
            .reveal-grid {
                grid-template-columns: 1fr;
            }

            .room-settings-mobile-toggle {
                display: flex;
            }

            .room-settings-shell.mobile-collapsed .room-settings {
                display: none;
            }

            .mode-card {
                display: flex;
                flex-direction: column;
                min-height: 86px;
                padding: 12px 14px 10px;
                gap: 3px;
            }

            .mode-card-img {
                width: 68px;
                height: 68px;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
            }

            .mode-card-top {
                display: flex;
                align-items: flex-start;
            }

            .mode-card-pill {
                position: relative;
                font-size: 10px;
                padding: 2px 6px;
            }

            .mode-card-body {
                padding-right: 76px;
            }

            .mode-card b {
                font-size: 14px;
            }

            .mode-card-desc {
                font-size: 12px;
            }

            .mode-card-tag,
            .mode-card.mode-link .mode-card-tag {
                display: none;
            }

            .workspace {
                gap: 12px;
                margin-top: auto;
                margin-bottom: 10px;
            }

            .mobile-setup-nav {
                position: static;
                z-index: 8;
                display: grid;
                justify-items: center;
                margin: 4px 0 6px;
            }

            .mobile-setup-nav .btn {
                width: min(270px, 88vw);
                min-height: 50px;
                padding: 0 18px;
                border: 1px solid rgba(240, 189, 66, 0.62);
                color: #101211;
                background:
                    linear-gradient(135deg, #7df8e8, #d7f75b 52%, #f0bd42);
                box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34), 0 0 24px rgba(240, 189, 66, 0.16);
                font-size: 15px;
                font-weight: 1000;
            }

            .mobile-setup-nav .btn.active {
                color: var(--ink);
                border-color: transparent;
                background:
                    linear-gradient(135deg, #f0bd42, #fff7c2 48%, #7df8e8);
            }

            #createRoomBtn,
            #joinRoomBtn {
                min-height: 54px;
                min-width: 100%;
                padding-inline: 18px;
                font-size: 16px;
            }

            #createRoomBtn svg,
            #joinRoomBtn svg {
                width: 22px;
                height: 22px;
                flex-basis: 22px;
            }

            #onlineMode .segment {
                min-width: 0;
                width: 100%;
            }

            #onlineMode .segment button {
                min-height: 42px;
                font-size: 13px;
            }

            .modes-collapsed > .modes {
                display: none;
            }

            .panel {
                background:
                    linear-gradient(145deg, rgba(9, 23, 25, 0.62), rgba(21, 13, 29, 0.58) 58%, rgba(44, 19, 18, 0.42)),
                    rgba(7, 12, 24, 0.56);
                backdrop-filter: blur(10px);
            }

            .panel-head,
            .panel-body {
                padding: 14px;
            }

            .mode-card {
                min-height: 96px;
                grid-template-columns: 42px minmax(0, 1fr);
                align-items: center;
                padding: 12px;
            }

            .mode-card b {
                font-size: 16px;
            }

            .mode-card span {
                font-size: 12px;
            }

            .game-settings-top,
            .game-settings-bottom {
                grid-template-columns: 1fr;
                padding: 10px;
            }

            .rules-card {
                width: min(100% - 16px, 640px);
                max-height: calc(100dvh - 24px);
                padding: 13px;
                gap: 10px;
            }

            .rules-list {
                gap: 8px;
            }

            .rules-list p {
                grid-template-columns: 30px minmax(0, 1fr);
                padding: 8px 0;
                font-size: 13px;
            }

            .rules-list p::before {
                width: 26px;
                height: 26px;
            }

            .comic-char { width: 52px; height: 52px; }
            .comic-char-scene { min-height: 74px; padding: 8px 10px 5px; gap: 7px; }
            .comic-bubble { font-size: 12px; padding: 6px 9px; }
            .comic-card-display { font-size: 14px; padding: 9px; margin: 0 9px 9px; }
            .comic-player img { width: 44px; height: 44px; }
            .comic-player { width: 58px; }
            .comic-reveal-img { width: 58px; height: 58px; }
            .reveal-msg { font-size: 14px; }
            .rules-quick { grid-template-columns: 1fr; }
            .rules-role-columns,
            .rules-secret-flow {
                grid-template-columns: 1fr;
            }
            .comic-player-row { gap: 7px; }
            .comic-cards-row { gap: 7px; }
            .secret-ability-action-row {
                grid-template-columns: 1fr;
            }
            .secret-ability-targets {
                grid-template-columns: 1fr;
            }

            .form-grid {
                gap: 11px;
            }

            .toggle,
            .collapsible-panel,
            .custom-word-box {
                padding: 10px;
            }

            .category-grid {
                max-height: 180px;
                overflow: auto;
                padding-right: 3px;
            }

            .name-row {
                grid-template-columns: 48px minmax(0, 1fr) auto;
            }

            .avatar-picker,
            .player-avatar {
                width: 42px;
                height: 42px;
            }

            .play-surface {
                min-height: 360px;
                padding: 12px;
            }

            .secret-card {
                min-height: 500px;
                padding: 16px;
            }

            .secret-card.end-card {
                grid-template-rows: auto auto minmax(0, 1fr) auto;
                row-gap: 0;
            }

            .secret-card.end-card .game-timer {
                position: relative;
                top: auto;
                left: auto;
                justify-self: center;
                margin-top: 8px;
                transform: none;
            }

            .secret-card.end-card .end-card-content {
                align-self: start;
                gap: 14px;
                padding: 6px 4px 0;
                transform: none;
            }

            .secret-card.end-card .end-orb {
                width: clamp(108px, 34vw, 142px);
                height: clamp(108px, 34vw, 142px);
                margin-top: 0;
            }

            .secret-card.end-card .end-orb svg {
                width: clamp(50px, 13vw, 68px);
                height: clamp(50px, 13vw, 68px);
            }

            .secret-card.end-card .card-note {
                max-width: 300px;
            }

            .secret-card.end-card > .actions {
                align-self: end;
                margin-top: 8px;
            }

            .secret-card.cover .card-top,
            .secret-card.card-civil .card-top,
            .secret-card.card-spy .card-top {
                top: 17px;
                right: 18px;
                left: 18px;
                font-size: 10px;
                letter-spacing: 0;
            }

            .secret-card.cover .card-identity,
            .secret-card.card-civil .card-identity,
            .secret-card.card-spy .card-identity {
                top: 72px;
                right: 18px;
                left: 18px;
            }

            .secret-card.cover .card-player-name,
            .secret-card.card-civil .card-player-name,
            .secret-card.card-spy .card-player-name {
                margin-bottom: 50px;
                font-size: clamp(24px, 8.2vw, 34px);
            }

            .secret-card.cover .card-player-name,
            .secret-card.card-civil .card-player-name,
            .secret-card.card-spy .card-player-name {
                transform: translateY(-24px);
            }

            .secret-card.cover .card-avatar,
            .secret-card.card-civil .card-avatar,
            .secret-card.card-spy .card-avatar {
                width: 104px;
                height: 104px;
                background-position: center 62%;
                transform: translateY(6px);
            }

            .secret-card.cover .role,
            .secret-card.card-civil .role,
            .secret-card.card-spy .role {
                margin-top: 14px;
                font-size: clamp(31px, 9.5vw, 42px);
            }

            .secret-card.cover .role {
                position: static;
                margin-top: 0;
                transform: translateY(54px);
            }

            .secret-card.cover .card-note {
                position: static;
                margin: 4px 0 0;
                font-size: 15px;
                line-height: 1.25;
                transform: translateY(54px);
            }

            .secret-card.card-civil .word,
            .secret-card.card-spy .word {
                right: 18px;
                bottom: 122px;
                left: 18px;
                min-height: 66px;
                font-size: clamp(27px, 9vw, 38px);
            }

            .secret-card.card-civil > .card-note,
            .secret-card.card-spy > .card-note {
                right: 18px;
                bottom: 84px;
                left: 18px;
                font-size: 14px;
            }

            .secret-card.cover > .actions,
            .secret-card.card-civil > .actions,
            .secret-card.card-spy > .actions {
                right: 18px;
                bottom: 18px;
                left: 18px;
            }

            .secret-card.cover .card-top,
            .secret-card.card-civil .card-top,
            .secret-card.card-spy .card-top {
                top: 3.5%;
                right: 5.2%;
                left: 5.2%;
                height: 6.1%;
                font-size: clamp(7px, 2.6vw, 10px);
            }

            .secret-card.cover .card-top > span,
            .secret-card.card-civil .card-top > span,
            .secret-card.card-spy .card-top > span {
                width: 29%;
                padding: 0 5px;
            }

            .secret-card.cover .card-identity,
            .secret-card.card-civil .card-identity,
            .secret-card.card-spy .card-identity {
                position: static;
                display: contents;
            }

            .secret-card.cover .card-player-name,
            .secret-card.card-civil .card-player-name,
            .secret-card.card-spy .card-player-name {
                top: 12.2%;
                right: 10%;
                left: 10%;
                width: auto;
                height: 10.5%;
                margin: 0;
                transform: none;
            }

            .card-name-arc text {
                font-size: clamp(30px, 9vw, 38px);
                stroke-width: 5px;
            }

            .secret-card.cover .card-avatar {
                top: 34.2%;
                left: 50%;
                width: 31%;
                height: auto;
                background-position: center;
                transform: translateX(-50%);
            }

            .secret-card.card-civil .card-avatar,
            .secret-card.card-spy .card-avatar {
                top: 30.1%;
                left: 50%;
                width: 31%;
                height: auto;
                background-position: center;
                transform: translateX(-50%);
            }

            .secret-card.cover .role {
                display: none;
            }

            .secret-card.card-civil .role,
            .secret-card.card-spy .role {
                top: 61.2%;
                right: 22%;
                left: 22%;
                margin: 0;
                font-size: clamp(23px, 8vw, 34px);
            }

            .secret-card.cover .card-note {
                top: 67.2%;
                right: 14%;
                left: 14%;
                display: grid;
                min-height: 7.3%;
                place-items: center;
                margin: 0;
                font-size: clamp(11px, 3.6vw, 15px);
                line-height: 1.1;
                transform: none;
            }

            .secret-card.card-civil .word,
            .secret-card.card-spy .word {
                top: 76.5%;
                right: 8.8%;
                bottom: auto;
                left: 8.8%;
                min-height: 8.4%;
                font-size: clamp(22px, 8vw, 32px);
                line-height: 0.95;
            }

            .secret-card.card-civil > .card-note,
            .secret-card.card-spy > .card-note {
                top: 85%;
                right: 8.8%;
                bottom: auto;
                left: 8.8%;
                display: grid;
                min-height: 8.8%;
                place-items: start center;
                font-size: clamp(9px, 3vw, 12px);
                line-height: 1.08;
                overflow: hidden;
            }

            .secret-card.cover > .actions {
                top: 77%;
                right: 9.5%;
                bottom: 9.5%;
                left: 9.5%;
            }

            .secret-card.card-civil > .actions,
            .secret-card.card-spy > .actions {
                right: 20%;
                bottom: 2.8%;
                left: 20%;
            }

            .secret-card.cover.flip-toggle-card {
                animation-duration: 360ms;
            }

            .secret-card.card-civil.flip-toggle-card,
            .secret-card.card-spy.flip-toggle-card {
                animation-duration: 380ms;
            }

            .secret-card.flip-toggle-card {
                backface-visibility: hidden;
                transform: translateZ(0);
                will-change: transform;
            }

            @keyframes cardFlipOpenIn {
                0%   { transform: perspective(380px) rotateY(90deg)    scale(.95); }
                55%  { transform: perspective(380px) rotateY(-4.5deg)  scale(1.01); }
                80%  { transform: perspective(380px) rotateY(1.5deg)   scale(1); }
                100% { transform: perspective(380px) rotateY(0deg)     scale(1); }
            }

            @keyframes cardFlipCoverIn {
                0%   { transform: perspective(380px) rotateY(-90deg)   scale(.95); }
                55%  { transform: perspective(380px) rotateY(4.5deg)   scale(1.01); }
                80%  { transform: perspective(380px) rotateY(-1.5deg)  scale(1); }
                100% { transform: perspective(380px) rotateY(0deg)     scale(1); }
            }

            @keyframes cardFlipAway {
                0%   { transform: perspective(380px) rotateY(0deg)    scale(1); }
                100% { transform: perspective(380px) rotateY(-90deg)  scale(.95); }
            }

            @keyframes cardFlipAwayReverse {
                0%   { transform: perspective(380px) rotateY(0deg)    scale(1); }
                100% { transform: perspective(380px) rotateY(90deg)   scale(.95); }
            }

            .lobby-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .reveal-grid {
                grid-template-columns: 1fr;
                gap: 9px;
            }

            .result-box {
                min-height: auto;
                padding: 12px;
            }

            .result-box b {
                font-size: clamp(21px, 8vw, 30px);
            }

            .winner-panel {
                width: 100%;
                padding: 12px;
            }

            .winner-choice-panel .actions {
                grid-template-columns: 1fr;
            }

        .footer-note {
            width: 100%;
            margin: 8px auto 0;
            padding-bottom: 0;
            text-align: center;
            font-size: 11px;
            line-height: 1.35;
        }

        }

        .secret-card.cover .card-player-name,
        .secret-card.card-civil .card-player-name,
        .secret-card.card-spy .card-player-name {
            top: 13.1% !important;
            right: 8.4% !important;
            left: 8.4% !important;
            display: grid !important;
            height: 10.6% !important;
            place-items: center !important;
            padding: 0 6px;
            text-align: center;
            transform: none !important;
        }

        .card-player-name .card-name-text {
            display: -webkit-box;
            max-width: 100%;
            max-height: 2em;
            overflow: hidden;
            color: inherit;
            font-size: clamp(27px, 4.8vw, 42px);
            font-weight: 1000;
            line-height: 0.9;
            overflow-wrap: anywhere;
            text-align: center;
            text-shadow: 0 4px 13px rgba(0, 0, 0, 0.88), 0 0 14px rgba(255, 247, 194, 0.22);
            text-transform: uppercase;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .card-name-arc-mobile {
            display: none;
        }

        .card-mode-slot {
            display: grid !important;
            place-items: center !important;
            padding: 0 !important;
            color: #fff7c2;
            text-align: center;
        }

        .card-mode-icon {
            display: grid;
            width: clamp(18px, 3.5vw, 24px);
            height: clamp(18px, 3.5vw, 24px);
            place-items: center;
            filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75));
            transform: translateY(-1px);
        }

        .card-mode-icon svg {
            width: 100%;
            height: 100%;
        }

        .secret-card.cover .card-note {
            position: absolute !important;
            top: 67.1% !important;
            right: 15% !important;
            left: 15% !important;
            display: grid !important;
            min-height: 6.9% !important;
            place-items: center !important;
            margin: 0 !important;
            transform: none !important;
        }

        .secret-card.card-civil .role,
        .secret-card.card-spy .role {
            top: 61.5%;
        }

        .secret-card.mode-room.card-civil .role,
        .secret-card.mode-room.card-spy .role {
            top: 63.2%;
            right: 21.5%;
            left: 21.5%;
        }

        .secret-card.mode-local .card-player-name {
            top: 10.2% !important;
            right: 8.8% !important;
            left: 8.8% !important;
            height: 11.2% !important;
        }

        .secret-card.mode-local .card-player-name .card-name-text {
            display: none;
        }

        .secret-card.mode-local .card-name-arc-mobile {
            display: block;
            width: 100%;
            height: 100%;
            overflow: visible;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.82));
        }

        .secret-card.mode-local .card-name-arc-mobile text {
            fill: #fff7c2;
            font-family: inherit;
            font-size: clamp(30px, 3.1vw, 40px);
            font-weight: 1000;
            letter-spacing: 0;
            paint-order: stroke fill;
            stroke: rgba(38, 20, 7, 0.80);
            stroke-linejoin: round;
            stroke-width: 4px;
            text-transform: uppercase;
        }

        .secret-card.mode-local.card-civil .role,
        .secret-card.mode-local.card-spy .role {
            top: 60.9%;
            right: 22%;
            left: 22%;
            min-height: 6.6%;
            font-size: clamp(25px, 3.2vw, 34px);
            line-height: 0.9;
        }

        .secret-card.mode-room.card-civil .word,
        .secret-card.mode-room.card-spy .word {
            top: 78.2%;
        }

        .secret-card.mode-room.card-civil > .card-note,
        .secret-card.mode-room.card-spy > .card-note {
            top: 86.6%;
            font-size: clamp(9px, 1.75vw, 12px);
        }

        .secret-card.mode-room .card-player-name {
            top: 13.8% !important;
            right: 7.4% !important;
            left: 7.4% !important;
            height: 10.3% !important;
        }

        .secret-card.mode-room.card-civil .card-player-name,
        .secret-card.mode-room.card-spy .card-player-name {
            top: 11.8% !important;
        }

        .secret-card.mode-room .card-player-name .card-name-text {
            font-size: clamp(30px, 5.3vw, 45px);
            line-height: 0.88;
        }

        @media (min-width: 641px) {
            .secret-card.premium-card-theme-classic .card-player-name,
            .secret-card.premium-card-theme-set2 .card-player-name,
            .secret-card.premium-card-theme-set3 .card-player-name {
                top: 11.6% !important;
            }

            .secret-card.premium-card-theme-classic.card-civil .role,
            .secret-card.premium-card-theme-classic.card-spy .role,
            .secret-card.premium-card-theme-set2.card-civil .role,
            .secret-card.premium-card-theme-set2.card-spy .role,
            .secret-card.premium-card-theme-set3.card-civil .role,
            .secret-card.premium-card-theme-set3.card-spy .role {
                top: 60.8%;
                right: 22%;
                left: 22%;
                font-size: clamp(25px, 3.2vw, 34px);
            }

            .secret-card.mode-room .card-player-name {
                top: 12.5% !important;
                right: 7.8% !important;
                left: 7.8% !important;
                height: 10.8% !important;
            }

            .secret-card.mode-room.card-civil .card-player-name,
            .secret-card.mode-room.card-spy .card-player-name {
                top: 11.2% !important;
            }

            .secret-card.mode-room .card-player-name .card-name-text {
                display: none;
            }

            .secret-card.mode-room .card-name-arc-mobile {
                display: block;
                width: 100%;
                height: 100%;
                overflow: visible;
                filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.82));
            }

            .secret-card.mode-room .card-name-arc-mobile text {
                fill: #fff7c2;
                font-family: inherit;
                font-size: clamp(30px, 3.2vw, 38px);
                font-weight: 1000;
                letter-spacing: 0;
                paint-order: stroke fill;
                stroke: rgba(38, 20, 7, 0.80);
                stroke-linejoin: round;
                stroke-width: 4px;
                text-transform: uppercase;
            }

            .secret-card.mode-room.card-civil .role,
            .secret-card.mode-room.card-spy .role {
                top: 61.2%;
                right: 22.5%;
                left: 22.5%;
                min-height: 6.2%;
                font-size: clamp(26px, 3.4vw, 34px);
                line-height: 0.88;
            }

            .secret-card.premium-card-theme-set3.card-civil .role,
            .secret-card.premium-card-theme-set3.card-spy .role {
                top: 69%;
                right: 22%;
                left: 22%;
                height: 5.1%;
                min-height: 0;
                font-size: clamp(17px, 3.2vw, 22px);
                line-height: 0.82;
            }

            /* civil word and card-note slightly higher on desktop */
            .secret-card.card-civil .word {
                top: 75%;
            }

            .secret-card.card-civil > .card-note {
                top: 83%;
            }
        }

        @media (max-width: 640px) {
            .secret-card.cover .card-player-name,
            .secret-card.card-civil .card-player-name,
            .secret-card.card-spy .card-player-name {
                top: 13.3% !important;
                right: 7.8% !important;
                left: 7.8% !important;
                height: 10.2% !important;
            }

            .card-player-name .card-name-text {
                font-size: clamp(24px, 7.6vw, 38px);
                line-height: 0.9;
            }

            .card-mode-icon {
                width: clamp(21px, 6vw, 28px);
                height: clamp(21px, 6vw, 28px);
            }

            .secret-card.mode-room .card-top {
                top: 3.35%;
                right: 5.7%;
                left: 5.7%;
                height: 6.25%;
            }

            .secret-card.mode-room .card-top > span {
                width: 27.5%;
                padding: 0;
                place-items: center;
                text-align: center;
            }

            .secret-card.mode-room.card-civil .card-player-name,
            .secret-card.mode-room.card-spy .card-player-name {
                top: 11.4% !important;
            }

            .secret-card.mode-room .card-countdown {
                display: grid;
                width: 100%;
                height: 100%;
                place-items: center;
                text-align: center;
            }

            .secret-card.cover .card-note {
                top: 66.9% !important;
                right: 14% !important;
                left: 14% !important;
                min-height: 7.4% !important;
                font-size: clamp(10px, 3.3vw, 14px);
                line-height: 1.08;
            }

            .secret-card.card-civil .role,
            .secret-card.card-spy .role {
                top: 62.4%;
            }

            .secret-card.mode-room.card-civil .role,
            .secret-card.mode-room.card-spy .role {
                top: 61.05%;
                right: 19.5%;
                left: 19.5%;
            }

            .secret-card.mode-room.card-civil .word,
            .secret-card.mode-room.card-spy .word {
                top: 76.9%;
            }

            .secret-card.mode-room.card-civil > .card-note,
            .secret-card.mode-room.card-spy > .card-note {
                top: 84.7%;
                font-size: clamp(8px, 2.55vw, 11px);
            }

            .secret-card.mode-room .card-player-name {
                top: 13.15% !important;
                right: 7.2% !important;
                left: 7.2% !important;
                height: 9.8% !important;
            }

            .secret-card.mode-room .card-player-name .card-name-text {
                display: none;
            }

            .secret-card.mode-room .card-name-arc-mobile {
                display: block;
                width: 100%;
                height: 100%;
                overflow: visible;
                filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.82));
            }

            .secret-card.mode-room .card-name-arc-mobile text {
                fill: #fff7c2;
                font-family: inherit;
                font-size: clamp(30px, 8.9vw, 40px);
                font-weight: 1000;
                letter-spacing: 0;
                paint-order: stroke fill;
                stroke: rgba(38, 20, 7, 0.78);
                stroke-linejoin: round;
                stroke-width: 4.2px;
                text-transform: uppercase;
            }

            /* === MODE-LOCAL — mobile overrides === */
            .secret-card.mode-local.card-civil .card-player-name {
                top: 11.5% !important;
                right: 8% !important;
                left: 8% !important;
                height: 11% !important;
            }

            .secret-card.mode-local.card-spy .card-player-name {
                top: 9.5% !important;
                right: 8% !important;
                left: 8% !important;
                height: 11% !important;
            }

            .secret-card.mode-local .card-name-arc-mobile text {
                font-size: clamp(28px, 8.4vw, 38px);
            }

            .secret-card.mode-local.card-civil .role,
            .secret-card.mode-local.card-spy .role {
                top: 61%;
                font-size: clamp(24px, 7.8vw, 33px);
            }

            .secret-card.mode-local.card-civil .word,
            .secret-card.mode-local.card-spy .word {
                right: 9.5%;
                left: 9.5%;
            }

            .secret-card.mode-local.card-civil > .card-note,
            .secret-card.mode-local.card-spy > .card-note {
                top: 83.5%;
                right: 10.5%;
                left: 10.5%;
            }

            .secret-card.mode-local.card-civil > .card-note {
                place-items: center;
                font-size: clamp(10px, 3.3vw, 13px);
                font-weight: 900;
                line-height: 1.22;
            }

            .secret-card.mode-local.card-spy > .card-note {
                place-items: center;
                font-size: clamp(10px, 3.3vw, 13px);
                font-weight: 900;
                line-height: 1.22;
            }
        }

        /* ===== Premium card theme position corrections ===== */

        /* Avatar */
        .secret-card.premium-card-theme-classic.card-civil .card-avatar,
        .secret-card.premium-card-theme-classic.card-spy .card-avatar {
            top: 31%;
        }

        .secret-card.premium-card-theme-set2.card-civil .card-avatar,
        .secret-card.premium-card-theme-set2.card-spy .card-avatar,
        .secret-card.premium-card-theme-set3.card-civil .card-avatar,
        .secret-card.premium-card-theme-set3.card-spy .card-avatar {
            top: 33%;
        }

        /* Nick i rola — korekty mobilne (desktop obsługuje blok min-width:641px powyżej) */
        @media (max-width: 640px) {

            /* === CLASSIC — CYWIL (premc.png): szarfa nicka ~6-17%, pole roli ~60-68% === */
            .secret-card.premium-card-theme-classic.card-civil .card-player-name {
                top: 13%;
            }
            .secret-card.premium-card-theme-classic.card-civil .role {
                top: 60%;
                right: 22%;
                left: 22%;
            }

            /* === CLASSIC — WTYKA (premw.png): szarfa nicka ~7-17%, pole roli ~61-68% === */
            .secret-card.premium-card-theme-classic.card-spy .card-player-name {
                top: 13%;
            }
            .secret-card.premium-card-theme-classic.card-spy .role {
                top: 60%;
                right: 22%;
                left: 22%;
            }

            /* === SET2 — CYWIL (prem2pc.png): szarfa nicka ~10-15%, pole roli ~63-71% === */
            .secret-card.premium-card-theme-set2.card-civil .card-player-name {
                top: 10%;
            }
            .secret-card.premium-card-theme-set2.card-civil .role {
                top: 63%;
                right: 22%;
                left: 22%;
            }

            /* === SET2 — WTYKA (prem2pw.png): szarfa nicka ~11-16%, pole roli ~65-73% === */
            .secret-card.premium-card-theme-set2.card-spy .card-player-name {
                top: 11%;
            }
            .secret-card.premium-card-theme-set2.card-spy .role {
                top: 65%;
                right: 22%;
                left: 22%;
            }

            /* === SET3 — CYWIL (prem3pc.png): szarfa nicka ~5-18%, pole roli ~63-70% === */
            .secret-card.premium-card-theme-set3.card-civil .card-player-name {
                top: 9%;
            }
            .secret-card.premium-card-theme-set3.card-civil .role {
                top: 63%;
                right: 22%;
                left: 22%;
            }

            /* === SET3 — WTYKA (prem3pw.png): szarfa nicka ~7-18%, pole roli ~63-70% === */
            .secret-card.premium-card-theme-set3.card-spy .card-player-name {
                top: 9%;
            }
            .secret-card.premium-card-theme-set3.card-spy .role {
                top: 64%;
                right: 22%;
                left: 22%;
            }

            .secret-card.premium-card-theme-set3.card-civil .word,
            .secret-card.premium-card-theme-set3.card-spy .word {
                top: 80.2%;
                right: 12%;
                left: 12%;
                height: 5.6%;
                min-height: 0;
                font-size: clamp(18px, 5.6vw, 23px);
                line-height: 0.86;
            }

            .secret-card.premium-card-theme-set3.card-civil > .card-note,
            .secret-card.premium-card-theme-set3.card-spy > .card-note {
                top: 87.1%;
                right: 12.5%;
                left: 12.5%;
                height: 5.1%;
                min-height: 0;
                font-size: clamp(7px, 2.35vw, 10px);
                line-height: 1.06;
            }

            .secret-card.premium-card-theme-set3.card-civil .role,
            .secret-card.premium-card-theme-set3.card-spy .role {
                top: 69%;
                right: 22%;
                left: 22%;
                height: 5.1%;
                min-height: 0;
                font-size: clamp(16px, 4.7vw, 21px);
                line-height: 0.82;
            }
        }

        /*
         * Keep player names centered inside the painted ribbon on every card face.
         * These final rules intentionally win over the older per-mode adjustments.
         */
        .secret-card.cover {
            --card-name-slot-top: 11.8%;
            --card-name-slot-height: 10.8%;
        }

        .secret-card.card-civil {
            --card-name-slot-top: 11.5%;
            --card-name-slot-height: 10.6%;
        }

        .secret-card.card-spy {
            --card-name-slot-top: 10%;
            --card-name-slot-height: 10.4%;
        }

        .secret-card.cover.premium-card-theme-classic,
        .secret-card.premium-card-theme-classic.card-civil,
        .secret-card.premium-card-theme-classic.card-spy {
            --card-name-slot-top: 11.5%;
            --card-name-slot-height: 11%;
        }

        .secret-card.cover.premium-card-theme-set2,
        .secret-card.premium-card-theme-set2.card-civil {
            --card-name-slot-top: 12.5%;
            --card-name-slot-height: 11%;
        }

        .secret-card.premium-card-theme-set2.card-spy {
            --card-name-slot-top: 15.5%;
            --card-name-slot-height: 10%;
        }

        .secret-card.cover.premium-card-theme-set3,
        .secret-card.premium-card-theme-set3.card-civil {
            --card-name-slot-top: 12.5%;
            --card-name-slot-height: 11%;
        }

        .secret-card.premium-card-theme-set3.card-spy {
            --card-name-slot-top: 15.5%;
            --card-name-slot-height: 10.2%;
        }

        body .secret-card.flip-toggle-card.cover .card-player-name,
        body .secret-card.flip-toggle-card.card-civil .card-player-name,
        body .secret-card.flip-toggle-card.card-spy .card-player-name {
            top: var(--card-name-slot-top) !important;
            right: 8% !important;
            left: 8% !important;
            display: grid !important;
            height: var(--card-name-slot-height) !important;
            place-items: center !important;
            padding: 0 4px !important;
            text-align: center !important;
            transform: none !important;
        }

        body .secret-card.flip-toggle-card .card-name-text {
            display: none !important;
        }

        body .secret-card.flip-toggle-card .card-name-arc-mobile {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            overflow: visible !important;
        }

        /* Physical card slots: all faces share one size, independent of text. */
        body.wt-refresh.game-page .play-surface {
            width: 100%;
            min-width: 0;
            justify-self: stretch;
        }
        body.wt-refresh .local-card-stack,
        body.wt-refresh .player-card-stack {
            display: grid;
            width: 100%;
            min-width: 0;
            grid-template-columns: minmax(0, 1fr);
            justify-items: center;
            gap: 12px;
        }
        body.wt-refresh.game-page .secret-card {
            width: min(360px, calc(100vw - 32px)) !important;
            max-width: 100% !important;
            min-width: 0 !important;
            min-height: 0 !important;
            aspect-ratio: 9 / 14 !important;
            box-sizing: border-box;
            container-type: inline-size;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) {
            display: block;
            padding: 0 !important;
            background-size: 100% 100% !important;
            --slot-top-top: 3.3%; --slot-top-height: 5.7%;
            --slot-name-top: 11.8%; --slot-name-height: 8.6%;
            --slot-avatar-top: 31.8%;
            --slot-role-top: 60.8%; --slot-role-height: 6.8%;
            --slot-role-edge: 22%;
            --slot-word-top: 75.3%; --slot-word-height: 7%;
            --slot-note-top: 83.3%; --slot-note-height: 7.6%;
            --slot-note-edge: 17%; --slot-note-color: #fff4d0;
            --slot-word-edge: 14%;
        }
        body.wt-refresh.game-page .secret-card.cover {
            --slot-name-top: 12.8%; --slot-name-height: 8.3%;
            --slot-avatar-top: 35.7%;
            --slot-cover-note-top: 67.8%; --slot-cover-note-height: 5.7%;
            --slot-cover-action-top: 79.4%; --slot-cover-action-height: 10.2%;
        }
        body.wt-refresh.game-page .secret-card.card-civil {
            --slot-note-color: #24300f;
        }
        body.wt-refresh.game-page .secret-card.card-spy {
            --slot-name-top: 10.8%; --slot-name-height: 8.4%;
            --slot-avatar-top: 31.3%;
            --slot-role-top: 60.2%; --slot-role-height: 6.4%;
            --slot-word-top: 77.1%; --slot-word-height: 6.4%;
            --slot-note-top: 84.8%; --slot-note-height: 6.6%;
            --slot-note-color: #492014;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-classic:is(.card-civil,.card-spy) {
            --slot-name-top: 13.6%; --slot-name-height: 8%;
            --slot-avatar-top: 35.3%;
            --slot-role-top: 65.3%; --slot-role-height: 6.1%;
            --slot-word-top: 79.6%; --slot-word-height: 6.2%;
            --slot-note-top: 86.6%; --slot-note-height: 6.4%;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set2 {
            --slot-top-top: 4%; --slot-top-height: 6.4%;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set2.card-civil {
            --slot-name-top: 13.2%; --slot-name-height: 8%;
            --slot-avatar-top: 34.8%;
            --slot-role-top: 63.5%; --slot-role-height: 6.7%;
            --slot-word-top: 77.8%; --slot-word-height: 7%;
            --slot-note-top: 86%; --slot-note-height: 6.6%;
            --slot-note-color: #e8f9c8;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set2.card-spy {
            --slot-name-top: 16.2%; --slot-name-height: 8%;
            --slot-avatar-top: 38.2%;
            --slot-role-top: 67.2%; --slot-role-height: 5.7%;
            --slot-word-top: 78.4%; --slot-word-height: 7%;
            --slot-note-top: 86.3%; --slot-note-height: 6.4%;
            --slot-note-color: #ffe1cd;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set2.cover {
            --slot-name-top: 13.3%; --slot-name-height: 8%;
            --slot-avatar-top: 34.8%;
            --slot-cover-note-top: 63.3%; --slot-cover-note-height: 6.5%;
            --slot-cover-action-top: 79.2%; --slot-cover-action-height: 10.6%;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set3 {
            --slot-top-top: 4.1%; --slot-top-height: 5.8%;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set3.card-civil {
            --slot-name-top: 13.2%; --slot-name-height: 8%;
            --slot-avatar-top: 38%;
            --slot-role-top: 71.1%; --slot-role-height: 5.7%;
            --slot-role-edge: 24%;
            --slot-word-top: 82%; --slot-word-height: 5.9%;
            --slot-note-top: 88.6%; --slot-note-height: 6.1%;
            --slot-note-color: #e8f9c8;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set3.card-spy {
            --slot-name-top: 15.1%; --slot-name-height: 8%;
            --slot-avatar-top: 38%;
            --slot-role-top: 68.6%; --slot-role-height: 5.7%;
            --slot-role-edge: 24%;
            --slot-word-top: 79.2%; --slot-word-height: 6.5%;
            --slot-note-top: 86.7%; --slot-note-height: 6.6%;
            --slot-note-color: #ffe1cd;
        }
        body.wt-refresh.game-page .secret-card.premium-card-theme-set3.cover {
            --slot-name-top: 13.2%; --slot-name-height: 8%;
            --slot-avatar-top: 36.6%;
            --slot-cover-note-top: 79.2%; --slot-cover-note-height: 5.3%;
            --slot-cover-action-top: 84.6%; --slot-cover-action-height: 8.1%;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) .card-top {
            top: var(--slot-top-top) !important;
            right: 5.5% !important; left: 5.5% !important;
            height: var(--slot-top-height) !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: clamp(9px, 3.3cqw, 12px) !important;
            letter-spacing: 0 !important;
            line-height: 1.15 !important;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) .card-top > span {
            width: 27% !important;
            min-width: 0;
            height: 100%;
            padding: 0 3px !important;
            transform: none !important;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) .card-top > span:first-child:not(.card-mode-slot) {
            white-space: normal;
            overflow-wrap: normal;
            word-break: normal;
            text-wrap: balance;
            line-height: 1.1;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) .card-player-name {
            top: var(--slot-name-top) !important;
            right: 15% !important; left: 15% !important;
            height: var(--slot-name-height) !important;
            padding: 0 !important;
            overflow: hidden;
            font-size: clamp(20px, 7.7cqw, 28px) !important;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) .card-name-text {
            display: grid !important;
            width: 100%; height: 100%; max-height: none;
            place-items: center;
            font-size: inherit;
            line-height: 1.1;
            white-space: normal;
            overflow-wrap: anywhere;
            text-wrap: balance;
            overflow: hidden;
            -webkit-line-clamp: unset;
            color: #fff4ca;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) .card-name-arc-mobile {
            display: none !important;
        }
        body.wt-refresh.game-page .secret-card:is(.cover,.card-civil,.card-spy) .card-avatar {
            top: var(--slot-avatar-top) !important;
            width: 31% !important;
        }
        body.wt-refresh.game-page .secret-card:is(.card-civil,.card-spy) .role,
        body.wt-refresh.game-page .secret-card:is(.card-civil,.card-spy) .word,
        body.wt-refresh.game-page .secret-card:is(.card-civil,.card-spy) > .card-note {
            position: absolute !important;
            display: flex !important;
            align-items: center; justify-content: center;
            min-height: 0 !important;
            bottom: auto !important;
            margin: 0 !important;
            padding: 0 3px !important;
            box-sizing: border-box;
            transform: none !important;
            overflow: hidden !important;
            overflow-wrap: anywhere !important;
            white-space: normal !important;
            text-align: center;
            text-wrap: balance;
            line-height: 1.1 !important;
        }
        body.wt-refresh.game-page .secret-card:is(.card-civil,.card-spy) .role {
            top: var(--slot-role-top) !important;
            right: var(--slot-role-edge) !important; left: var(--slot-role-edge) !important;
            height: var(--slot-role-height) !important;
            font-size: clamp(20px, 8.9cqw, 32px) !important;
        }
        body.wt-refresh.game-page .secret-card:is(.card-civil,.card-spy) .word {
            top: var(--slot-word-top) !important;
            right: var(--slot-word-edge) !important; left: var(--slot-word-edge) !important;
            height: var(--slot-word-height) !important;
            font-size: clamp(22px, 8.9cqw, 32px) !important;
            font-weight: 900;
        }
        body.wt-refresh.game-page .secret-card:is(.card-civil,.card-spy) > .card-note {
            display: block !important;
            align-content: center;
            top: var(--slot-note-top) !important;
            right: var(--slot-note-edge) !important; left: var(--slot-note-edge) !important;
            height: var(--slot-note-height) !important;
            font-size: clamp(10px, 3.2cqw, 11.5px) !important;
            color: var(--slot-note-color) !important;
            text-shadow: none !important;
            font-weight: 800;
        }
        body.wt-refresh.game-page .secret-card.cover .card-note {
            top: var(--slot-cover-note-top) !important;
            right: 18% !important; left: 18% !important;
            height: var(--slot-cover-note-height) !important;
            min-height: 0 !important;
            display: block !important;
            align-content: center;
            padding: 0 3px;
            overflow: hidden;
            font-size: clamp(12px, 4.4cqw, 16px) !important;
            line-height: 1.12 !important;
            color: #fff4ca !important;
            transform: none !important;
        }
        body.wt-refresh.game-page .secret-card.cover .card-note::before { content: none !important; }
        body.wt-refresh.game-page .secret-card.cover > .actions {
            top: var(--slot-cover-action-top) !important;
            right: 18% !important; left: 18% !important;
            bottom: auto !important;
            height: var(--slot-cover-action-height) !important;
            margin: 0 !important; padding: 0;
            display: flex;
            align-items: center;
        }
        body.wt-refresh.game-page .secret-card.cover > .actions .btn {
            display: flex;
            align-items: center; justify-content: center;
            gap: 8px;
            width: 100%; height: 100%;
            min-height: 40px; max-height: 100%;
            min-width: 0;
            padding: 6px 8px;
            font-size: clamp(14px, 4.7cqw, 17px);
            line-height: 1.15;
            white-space: nowrap;
        }
        body.wt-refresh.game-page .secret-card.cover > .actions .btn svg { flex: 0 0 18px; width: 18px; height: 18px; }
        body.wt-refresh .player-card-stack > :is(.agent-clue,.eliminated-player-note,.card-outside-actions) {
            width: min(360px, 100%);
            max-width: 100%;
            margin: 0;
        }
        body.wt-refresh .player-card-stack > .card-player-title {
            position: static;
            max-width: min(360px, 100%);
            margin: 0;
            font-size: 12px;
            overflow-wrap: anywhere;
        }
/* Connection feedback stays outside the rerendered room surface. */
.game-connection-status {
    max-width: 680px;
    margin: 12px auto;
    padding: 12px 18px;
    border: 1px solid #c4a45d;
    border-radius: 12px;
    color: #ffebbd;
    background: #152b3a;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.game-connection-status[hidden] { display: none; }