:root {
    --bg: #0d0907;
    --bg-deep: #16100c;
    --bg-top-glow: rgba(218, 173, 105, 0.18);
    --bg-side-glow: rgba(98, 52, 20, 0.22);
    --bg-gradient-start: #1c140f;
    --bg-gradient-mid: #0d0907;
    --bg-gradient-end: #17100c;
    --panel: rgba(34, 23, 16, 0.9);
    --panel-strong: rgba(44, 29, 20, 0.96);
    --panel-inset: rgba(19, 13, 9, 0.92);
    --panel-border: rgba(217, 177, 108, 0.22);
    --panel-glow: rgba(237, 190, 118, 0.12);
    --text: #f6eddf;
    --muted: #d2bea1;
    --accent: #d8ad69;
    --accent-strong: #f1c67f;
    --accent-dark: #7e5730;
    --danger: #a45252;
    --success: #3e7a63;
    --surface: rgba(255, 255, 255, 0.045);
    --shadow: 0 26px 80px rgba(0, 0, 0, 0.4);
    --field-top: rgba(58, 38, 25, 0.96);
    --field-bottom: rgba(28, 18, 12, 0.96);
    --field-border: rgba(255, 255, 255, 0.1);
    --field-option-bg: #1b120d;
    --field-focus-border: rgba(241, 198, 127, 0.45);
    --field-focus-shadow: rgba(241, 198, 127, 0.12);
    --button-primary-start: #efc786;
    --button-primary-end: #b57731;
    --button-primary-text: #1c1209;
    --button-primary-shadow: rgba(119, 71, 22, 0.24);
    --button-secondary-bg: rgba(255, 255, 255, 0.08);
    --button-secondary-border: rgba(255, 255, 255, 0.08);
    --button-secondary-text: var(--text);
    --button-success-start: #7fbf8c;
    --button-success-end: #2f6f53;
    --button-success-text: #f4f0e4;
    --button-success-shadow: rgba(36, 88, 64, 0.28);
    --button-danger-start: #c77272;
    --button-danger-end: #8c4040;
    --button-danger-text: #fff1ec;
    --button-danger-shadow: rgba(102, 39, 39, 0.28);
    --form-error-top: rgba(126, 43, 43, 0.32);
    --form-error-bottom: rgba(62, 20, 20, 0.42);
    --form-error-border: rgba(164, 82, 82, 0.35);
    --form-error-text: #f5d5d0;
    --hint-error-top: rgba(112, 43, 25, 0.68);
    --hint-error-bottom: rgba(58, 20, 12, 0.72);
    --hint-error-border: rgba(201, 108, 76, 0.46);
    --hint-error-text: #f3d8ca;
    --challenge-valid-top: rgba(120, 173, 128, 0.12);
    --challenge-valid-bottom: rgba(37, 72, 48, 0.62);
    --challenge-valid-border: rgba(151, 212, 162, 0.2);
    --challenge-invalid-top: rgba(217, 146, 102, 0.12);
    --challenge-invalid-bottom: rgba(100, 47, 33, 0.62);
    --challenge-invalid-border: rgba(236, 171, 122, 0.2);
    --modal-danger-glow: rgba(199, 114, 114, 0.14);
    --modal-danger-border: rgba(199, 114, 114, 0.22);
    --badge-winner-bg: rgba(241, 198, 127, 0.2);
    --badge-winner-text: #f7e6bf;
    --badge-winner-border: rgba(241, 198, 127, 0.18);
    --badge-danger-bg: rgba(126, 43, 43, 0.32);
    --badge-danger-text: #f5d5d0;
    --badge-danger-border: rgba(164, 82, 82, 0.28);
    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-border: rgba(255, 255, 255, 0.05);
    --chip-text: var(--muted);
    --chip-strong-top: rgba(82, 55, 34, 0.92);
    --chip-strong-bottom: rgba(42, 28, 19, 0.92);
    --chip-strong-border: rgba(217, 177, 108, 0.2);
    --chip-strong-text: var(--text);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    color: var(--text);
    background:
        radial-gradient(circle at top, var(--bg-top-glow), transparent 32%),
        radial-gradient(circle at 20% 20%, var(--bg-side-glow), transparent 28%),
        linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-mid) 58%, var(--bg-gradient-end));
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(transparent, rgba(255, 255, 255, 0.015)),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 96px,
            rgba(255, 255, 255, 0.01) 97px,
            transparent 98px
        );
    mix-blend-mode: screen;
}

body[data-theme="velvet-noir"] {
    --bg: #090506;
    --bg-deep: #140a0d;
    --bg-top-glow: rgba(191, 110, 143, 0.2);
    --bg-side-glow: rgba(92, 22, 49, 0.24);
    --bg-gradient-start: #210d14;
    --bg-gradient-mid: #0d0709;
    --bg-gradient-end: #17080f;
    --panel: rgba(40, 15, 24, 0.9);
    --panel-strong: rgba(50, 18, 29, 0.96);
    --panel-inset: rgba(23, 8, 14, 0.92);
    --panel-border: rgba(209, 146, 171, 0.24);
    --panel-glow: rgba(209, 146, 171, 0.12);
    --text: #f8e9eb;
    --muted: #d8b8c0;
    --accent: #cb8da1;
    --accent-strong: #ebafc2;
    --accent-dark: #7c3a53;
    --danger: #b45d6d;
    --success: #5f7f72;
    --surface: rgba(255, 220, 229, 0.05);
    --field-top: rgba(64, 22, 35, 0.96);
    --field-bottom: rgba(27, 9, 16, 0.96);
    --field-border: rgba(255, 224, 234, 0.14);
    --field-option-bg: #220b13;
    --field-focus-border: rgba(235, 175, 194, 0.46);
    --field-focus-shadow: rgba(235, 175, 194, 0.14);
    --button-primary-start: #f0b7ca;
    --button-primary-end: #a84b6b;
    --button-primary-text: #250d15;
    --button-primary-shadow: rgba(116, 40, 67, 0.26);
    --button-secondary-bg: rgba(255, 224, 234, 0.08);
    --button-secondary-border: rgba(235, 175, 194, 0.16);
    --button-success-start: #9cc4b4;
    --button-success-end: #41695b;
    --button-success-shadow: rgba(42, 83, 69, 0.28);
    --button-danger-start: #de8aa1;
    --button-danger-end: #8f3855;
    --button-danger-shadow: rgba(114, 41, 67, 0.3);
    --form-error-top: rgba(120, 42, 61, 0.36);
    --form-error-bottom: rgba(59, 16, 30, 0.48);
    --form-error-border: rgba(198, 116, 142, 0.34);
    --hint-error-top: rgba(124, 44, 53, 0.7);
    --hint-error-bottom: rgba(66, 19, 28, 0.76);
    --hint-error-border: rgba(217, 135, 147, 0.44);
    --challenge-valid-top: rgba(164, 197, 176, 0.14);
    --challenge-valid-bottom: rgba(39, 71, 57, 0.64);
    --challenge-valid-border: rgba(177, 213, 191, 0.24);
    --challenge-invalid-top: rgba(218, 141, 158, 0.14);
    --challenge-invalid-bottom: rgba(101, 33, 52, 0.66);
    --challenge-invalid-border: rgba(224, 157, 174, 0.24);
    --modal-danger-glow: rgba(204, 117, 145, 0.16);
    --modal-danger-border: rgba(204, 117, 145, 0.24);
    --badge-winner-bg: rgba(235, 175, 194, 0.22);
    --badge-winner-text: #fff0f4;
    --badge-winner-border: rgba(235, 175, 194, 0.22);
    --badge-danger-bg: rgba(129, 41, 61, 0.34);
    --badge-danger-text: #ffe7ee;
    --badge-danger-border: rgba(198, 116, 142, 0.3);
    --chip-bg: rgba(255, 224, 234, 0.07);
    --chip-border: rgba(235, 175, 194, 0.12);
    --chip-text: #e8c9d2;
    --chip-strong-top: rgba(84, 33, 47, 0.92);
    --chip-strong-bottom: rgba(39, 14, 22, 0.92);
    --chip-strong-border: rgba(209, 146, 171, 0.22);
    --chip-strong-text: #f8e9eb;
}

body[data-theme="aether-circuit"] {
    --bg: #04070a;
    --bg-deep: #0a1014;
    --bg-top-glow: rgba(108, 206, 226, 0.17);
    --bg-side-glow: rgba(33, 97, 122, 0.22);
    --bg-gradient-start: #0d1c24;
    --bg-gradient-mid: #061018;
    --bg-gradient-end: #09131a;
    --panel: rgba(12, 28, 37, 0.9);
    --panel-strong: rgba(15, 35, 45, 0.96);
    --panel-inset: rgba(8, 21, 28, 0.92);
    --panel-border: rgba(122, 214, 233, 0.22);
    --panel-glow: rgba(122, 214, 233, 0.12);
    --text: #e7f8fb;
    --muted: #b4d7df;
    --accent: #79d3e7;
    --accent-strong: #b4eff9;
    --accent-dark: #2f7486;
    --danger: #b06c91;
    --success: #58a493;
    --surface: rgba(200, 247, 255, 0.045);
    --field-top: rgba(16, 43, 53, 0.96);
    --field-bottom: rgba(7, 20, 26, 0.96);
    --field-border: rgba(162, 228, 241, 0.14);
    --field-option-bg: #08151a;
    --field-focus-border: rgba(180, 239, 249, 0.46);
    --field-focus-shadow: rgba(121, 211, 231, 0.16);
    --button-primary-start: #b9f1fb;
    --button-primary-end: #3f9cb3;
    --button-primary-text: #0c1820;
    --button-primary-shadow: rgba(37, 118, 140, 0.28);
    --button-secondary-bg: rgba(180, 239, 249, 0.08);
    --button-secondary-border: rgba(121, 211, 231, 0.18);
    --button-success-start: #8ed4c4;
    --button-success-end: #317a6e;
    --button-success-shadow: rgba(34, 104, 95, 0.28);
    --button-danger-start: #d7a6c7;
    --button-danger-end: #7c4a70;
    --button-danger-shadow: rgba(90, 49, 81, 0.28);
    --form-error-top: rgba(108, 69, 105, 0.34);
    --form-error-bottom: rgba(48, 29, 52, 0.46);
    --form-error-border: rgba(163, 116, 156, 0.34);
    --hint-error-top: rgba(118, 81, 111, 0.66);
    --hint-error-bottom: rgba(54, 35, 58, 0.72);
    --hint-error-border: rgba(176, 126, 168, 0.42);
    --challenge-valid-top: rgba(125, 221, 236, 0.14);
    --challenge-valid-bottom: rgba(24, 84, 93, 0.62);
    --challenge-valid-border: rgba(115, 219, 236, 0.24);
    --challenge-invalid-top: rgba(184, 130, 166, 0.14);
    --challenge-invalid-bottom: rgba(76, 41, 67, 0.64);
    --challenge-invalid-border: rgba(187, 137, 171, 0.24);
    --modal-danger-glow: rgba(184, 130, 166, 0.16);
    --modal-danger-border: rgba(184, 130, 166, 0.24);
    --badge-winner-bg: rgba(180, 239, 249, 0.22);
    --badge-winner-text: #ecfeff;
    --badge-winner-border: rgba(121, 211, 231, 0.22);
    --badge-danger-bg: rgba(93, 53, 84, 0.34);
    --badge-danger-text: #ffeaf8;
    --badge-danger-border: rgba(166, 118, 157, 0.3);
    --chip-bg: rgba(200, 247, 255, 0.06);
    --chip-border: rgba(121, 211, 231, 0.12);
    --chip-text: #c0e7ef;
    --chip-strong-top: rgba(20, 49, 58, 0.92);
    --chip-strong-bottom: rgba(8, 23, 29, 0.92);
    --chip-strong-border: rgba(122, 214, 233, 0.22);
    --chip-strong-text: #e7f8fb;
}

body[data-theme="verdant-manor"] {
    --bg: #070906;
    --bg-deep: #10130d;
    --bg-top-glow: rgba(181, 190, 108, 0.17);
    --bg-side-glow: rgba(80, 90, 38, 0.21);
    --bg-gradient-start: #171b10;
    --bg-gradient-mid: #0c1009;
    --bg-gradient-end: #12160d;
    --panel: rgba(26, 31, 17, 0.9);
    --panel-strong: rgba(34, 40, 23, 0.96);
    --panel-inset: rgba(17, 20, 11, 0.92);
    --panel-border: rgba(196, 190, 126, 0.22);
    --panel-glow: rgba(196, 190, 126, 0.12);
    --text: #f0eddc;
    --muted: #c6c39d;
    --accent: #c4bb70;
    --accent-strong: #e6de9d;
    --accent-dark: #726827;
    --danger: #a06c53;
    --success: #6f8f61;
    --surface: rgba(243, 240, 194, 0.045);
    --field-top: rgba(45, 49, 23, 0.96);
    --field-bottom: rgba(18, 20, 10, 0.96);
    --field-border: rgba(225, 222, 156, 0.14);
    --field-option-bg: #171a0c;
    --field-focus-border: rgba(230, 222, 157, 0.46);
    --field-focus-shadow: rgba(196, 187, 112, 0.16);
    --button-primary-start: #e5dea0;
    --button-primary-end: #8d7f34;
    --button-primary-text: #1d1a0d;
    --button-primary-shadow: rgba(98, 88, 35, 0.28);
    --button-secondary-bg: rgba(230, 222, 157, 0.08);
    --button-secondary-border: rgba(196, 187, 112, 0.18);
    --button-success-start: #b8d39f;
    --button-success-end: #52713e;
    --button-success-shadow: rgba(51, 84, 39, 0.28);
    --button-danger-start: #cfb18e;
    --button-danger-end: #835740;
    --button-danger-shadow: rgba(95, 60, 40, 0.28);
    --form-error-top: rgba(124, 97, 62, 0.32);
    --form-error-bottom: rgba(57, 40, 23, 0.44);
    --form-error-border: rgba(171, 134, 92, 0.34);
    --hint-error-top: rgba(129, 92, 58, 0.68);
    --hint-error-bottom: rgba(63, 43, 24, 0.72);
    --hint-error-border: rgba(191, 151, 108, 0.42);
    --challenge-valid-top: rgba(197, 214, 130, 0.14);
    --challenge-valid-bottom: rgba(59, 88, 41, 0.62);
    --challenge-valid-border: rgba(201, 219, 147, 0.24);
    --challenge-invalid-top: rgba(205, 172, 131, 0.14);
    --challenge-invalid-bottom: rgba(94, 60, 37, 0.64);
    --challenge-invalid-border: rgba(212, 180, 140, 0.24);
    --modal-danger-glow: rgba(190, 156, 112, 0.16);
    --modal-danger-border: rgba(190, 156, 112, 0.24);
    --badge-winner-bg: rgba(230, 222, 157, 0.22);
    --badge-winner-text: #fffbe6;
    --badge-winner-border: rgba(196, 187, 112, 0.22);
    --badge-danger-bg: rgba(106, 76, 48, 0.34);
    --badge-danger-text: #fff0df;
    --badge-danger-border: rgba(175, 141, 101, 0.3);
    --chip-bg: rgba(243, 240, 194, 0.06);
    --chip-border: rgba(196, 190, 126, 0.12);
    --chip-text: #d6d0a8;
    --chip-strong-top: rgba(57, 56, 28, 0.92);
    --chip-strong-bottom: rgba(24, 25, 13, 0.92);
    --chip-strong-border: rgba(196, 190, 126, 0.22);
    --chip-strong-text: #f0eddc;
}

body[data-theme="midnight-conservatory"] {
    --bg: #06070a;
    --bg-deep: #0d0f18;
    --bg-top-glow: rgba(160, 154, 226, 0.17);
    --bg-side-glow: rgba(73, 72, 142, 0.22);
    --bg-gradient-start: #111424;
    --bg-gradient-mid: #090c16;
    --bg-gradient-end: #10121d;
    --panel: rgba(20, 24, 41, 0.9);
    --panel-strong: rgba(26, 30, 51, 0.96);
    --panel-inset: rgba(14, 16, 29, 0.92);
    --panel-border: rgba(182, 170, 245, 0.22);
    --panel-glow: rgba(182, 170, 245, 0.12);
    --text: #eef0fb;
    --muted: #c7c9e2;
    --accent: #b0a0ef;
    --accent-strong: #d9d0ff;
    --accent-dark: #6757a7;
    --danger: #af6f91;
    --success: #6a89a8;
    --surface: rgba(230, 229, 255, 0.045);
    --field-top: rgba(26, 28, 50, 0.96);
    --field-bottom: rgba(11, 12, 24, 0.96);
    --field-border: rgba(217, 213, 255, 0.14);
    --field-option-bg: #10121f;
    --field-focus-border: rgba(217, 208, 255, 0.46);
    --field-focus-shadow: rgba(176, 160, 239, 0.16);
    --button-primary-start: #ddd5ff;
    --button-primary-end: #7364bb;
    --button-primary-text: #161528;
    --button-primary-shadow: rgba(83, 70, 145, 0.3);
    --button-secondary-bg: rgba(217, 208, 255, 0.08);
    --button-secondary-border: rgba(176, 160, 239, 0.18);
    --button-success-start: #a8c4e1;
    --button-success-end: #466886;
    --button-success-shadow: rgba(52, 82, 111, 0.28);
    --button-danger-start: #d2a4bf;
    --button-danger-end: #844f71;
    --button-danger-shadow: rgba(91, 50, 76, 0.3);
    --form-error-top: rgba(112, 75, 105, 0.32);
    --form-error-bottom: rgba(47, 29, 52, 0.44);
    --form-error-border: rgba(167, 116, 152, 0.34);
    --hint-error-top: rgba(122, 85, 113, 0.68);
    --hint-error-bottom: rgba(56, 36, 61, 0.72);
    --hint-error-border: rgba(185, 135, 170, 0.42);
    --challenge-valid-top: rgba(180, 196, 248, 0.14);
    --challenge-valid-bottom: rgba(43, 63, 98, 0.62);
    --challenge-valid-border: rgba(184, 200, 250, 0.24);
    --challenge-invalid-top: rgba(197, 147, 176, 0.14);
    --challenge-invalid-bottom: rgba(82, 44, 68, 0.64);
    --challenge-invalid-border: rgba(203, 154, 182, 0.24);
    --modal-danger-glow: rgba(177, 122, 161, 0.16);
    --modal-danger-border: rgba(177, 122, 161, 0.24);
    --badge-winner-bg: rgba(217, 208, 255, 0.22);
    --badge-winner-text: #f6f3ff;
    --badge-winner-border: rgba(176, 160, 239, 0.22);
    --badge-danger-bg: rgba(94, 57, 84, 0.34);
    --badge-danger-text: #ffeaf6;
    --badge-danger-border: rgba(170, 122, 156, 0.3);
    --chip-bg: rgba(230, 229, 255, 0.06);
    --chip-border: rgba(182, 170, 245, 0.12);
    --chip-text: #d4d5ee;
    --chip-strong-top: rgba(35, 39, 64, 0.92);
    --chip-strong-bottom: rgba(16, 19, 34, 0.92);
    --chip-strong-border: rgba(182, 170, 245, 0.22);
    --chip-strong-text: #eef0fb;
}

button,
input,
select {
    font: inherit;
}

.page-shell {
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.page-shell--landing {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.page-shell--table {
    padding: 0.45rem;
}

.hero,
.room-shell {
    width: min(1380px, 100%);
    margin: 0 auto;
}

.table-page {
    width: min(1820px, 100%);
    margin: 0 auto;
}

.hero--luxury {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 420px);
    align-items: stretch;
}

.hero__actions {
    display: grid;
    gap: 1.25rem;
}

.hero__actions .panel--form {
    display: grid;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.hero__actions .panel--form button {
    justify-self: stretch;
    width: 100%;
}

.panel {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--panel-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 26%),
        var(--panel);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.panel--hero {
    padding: 2rem;
    background:
        radial-gradient(circle at top right, rgba(241, 198, 127, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%),
        var(--panel-strong);
}

.panel--hero .eyebrow {
    font-size: clamp(1.1rem, 1.35vw, 1.45rem);
    letter-spacing: 0.18em;
}

.panel--form {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 20%),
        rgba(27, 18, 13, 0.92);
}

.panel--inset {
    background:
        linear-gradient(180deg, rgba(241, 198, 127, 0.05), transparent 24%),
        var(--panel-inset);
    box-shadow: inset 0 0 0 1px rgba(217, 177, 108, 0.06);
}

.panel--actions {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.theme-control {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.lede,
.hint,
.participant-card p,
.score-card span {
    color: var(--muted);
}

.form-message {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--form-error-border);
    background: linear-gradient(180deg, var(--form-error-top), var(--form-error-bottom));
    color: var(--form-error-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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

h1 {
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    line-height: 0.95;
    margin: 0.5rem 0 1rem;
}

h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

label {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: var(--muted);
}

input,
select {
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--field-border);
    background: linear-gradient(180deg, var(--field-top), var(--field-bottom));
    color: var(--text);
    padding: 0.95rem 1rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

select {
    appearance: none;
    color-scheme: dark;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--accent-strong) 50%),
        linear-gradient(135deg, var(--accent-strong) 50%, transparent 50%),
        linear-gradient(180deg, var(--field-top), var(--field-bottom));
    background-position:
        calc(100% - 1.35rem) calc(50% - 0.18rem),
        calc(100% - 0.95rem) calc(50% - 0.18rem),
        0 0;
    background-size:
        0.45rem 0.45rem,
        0.45rem 0.45rem,
        100% 100%;
    background-repeat: no-repeat;
    padding-right: 2.8rem;
}

select option {
    color: var(--text);
    background-color: var(--field-option-bg);
}

input:focus,
select:focus {
    border-color: var(--field-focus-border);
    box-shadow: 0 0 0 4px var(--field-focus-shadow);
}

button,
.button-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 999px;
    padding: 0.95rem 1.25rem;
    background: linear-gradient(135deg, var(--button-primary-start), var(--button-primary-end));
    color: var(--button-primary-text);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    box-shadow: 0 16px 32px var(--button-primary-shadow);
}

button:hover,
.button-link:hover {
    transform: translateY(-1px);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.button-link--secondary {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    box-shadow: none;
}

.button-link--success {
    background: linear-gradient(135deg, var(--button-success-start), var(--button-success-end));
    color: var(--button-success-text);
    box-shadow: 0 16px 34px var(--button-success-shadow);
}

.button-link--danger {
    background: linear-gradient(135deg, var(--button-danger-start), var(--button-danger-end));
    color: var(--button-danger-text);
    box-shadow: 0 16px 34px var(--button-danger-shadow);
}

.hero-highlights,
.room-meta,
.state-pill-row,
.status-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meta-chip,
.section-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-text);
    border: 1px solid var(--chip-border);
}

.status-rail .meta-chip {
    background: linear-gradient(180deg, var(--chip-strong-top), var(--chip-strong-bottom));
    color: var(--chip-strong-text);
    border-color: var(--chip-strong-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.meta-chip--timer {
    min-width: 7.75rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

.meta-chip--timer-warning {
    color: #fff3eb;
    background:
        linear-gradient(180deg, rgba(146, 61, 50, 0.96), rgba(92, 31, 27, 0.96));
    border-color: rgba(246, 174, 152, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(162, 72, 61, 0.18);
    animation: timer-warning-pulse 1s ease-in-out infinite;
}

.meta-chip--timer-expired {
    color: #fff4ef;
    background:
        linear-gradient(180deg, rgba(120, 40, 34, 0.97), rgba(72, 18, 18, 0.97));
    border-color: rgba(240, 157, 140, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 24px rgba(131, 45, 39, 0.16);
}

.state-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.state-pill--waiting {
    background: rgba(117, 99, 74, 0.45);
}

.state-pill--active {
    background: rgba(70, 122, 96, 0.5);
}

.state-pill--challenge {
    background: rgba(166, 102, 57, 0.5);
}

.state-pill--resolving {
    background: rgba(88, 86, 125, 0.5);
}

.state-pill--finished {
    background: rgba(125, 82, 82, 0.48);
}

.section-head,
.score-card__topline,
.participant-card__topline,
.table-stage__header,
.room-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.room-shell {
    display: grid;
    gap: 1.5rem;
}

.room-hero {
    align-items: stretch;
}

.room-hero__copy,
.room-hero__status {
    flex: 1;
}

.room-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.participant-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.participant-card,
.score-card {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
        var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.participant-card--owner,
.score-card--active {
    border-color: rgba(241, 198, 127, 0.3);
    box-shadow: 0 0 0 1px rgba(241, 198, 127, 0.08), 0 0 24px rgba(241, 198, 127, 0.08);
}

.score-card--active {
    background:
        linear-gradient(180deg, rgba(241, 198, 127, 0.12), transparent 44%),
        var(--surface);
}

.score-card--active strong,
.score-card--active .score-card__status,
.score-card--active .score-card__metric-value {
    color: #f5dfb5;
}

.participant-card--self,
.score-card--self {
    background:
        linear-gradient(180deg, rgba(241, 198, 127, 0.09), transparent 40%),
        var(--surface);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
}

.badge--owner {
    background: rgba(241, 198, 127, 0.16);
    color: var(--accent-strong);
}

.table-page {
    display: grid;
    gap: 0.8rem;
}

.table-layout {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: minmax(210px, 248px) minmax(0, 1fr) minmax(228px, 272px);
    align-items: start;
}

.history-panel--luxury,
.table-stage {
    display: grid;
    gap: 0.6rem;
}

.history-panel--luxury {
    align-content: start;
    min-height: 100%;
}

.table-stage__header--compact {
    align-items: center;
    gap: 0.45rem;
}

.table-stage__title-block {
    display: grid;
    gap: 0.3rem;
}

.turn-owner-status {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.05;
    color: var(--text);
    text-wrap: balance;
}

.status-rail--table {
    justify-content: flex-end;
    gap: 0.38rem;
}

.table-stage__hint {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.28;
}

.table-stage__hint--error {
    color: var(--hint-error-text);
    background: linear-gradient(180deg, var(--hint-error-top), var(--hint-error-bottom));
    border: 1px solid var(--hint-error-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(25, 8, 5, 0.26);
    border-radius: 16px;
    padding: 0.9rem 1rem;
}

.table-canvas-shell {
    position: relative;
    width: min(100%, clamp(700px, calc(100vw - 3.25rem), 1120px));
    aspect-ratio: 1 / 1;
    min-height: 0;
    max-height: calc(100vh - 165px);
    justify-self: center;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(237, 190, 118, 0.035), transparent 24%),
        linear-gradient(180deg, rgba(36, 23, 15, 0.94), rgba(13, 9, 7, 0.98));
    border: 1px solid rgba(241, 198, 127, 0.04);
}

#table-canvas {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    touch-action: none;
}

.side-panel--luxury {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.scoreboard,
.control-grid {
    display: grid;
    gap: 0.65rem;
}

.history-panel .scoreboard--history {
    max-height: min(820px, calc(100vh - 285px));
    overflow: auto;
    padding-right: 0.2rem;
}

.history-panel .scoreboard--history::-webkit-scrollbar {
    width: 10px;
}

.history-panel .scoreboard--history::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(216, 173, 105, 0.26);
}

.scoreboard--history {
    gap: 0.65rem;
}

.score-card__topline {
    align-items: center;
}

.score-card__topline--history {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
}

.score-card__status {
    color: var(--text);
    font-size: 0.9rem;
    text-align: right;
}

.score-card__metrics {
    display: grid;
    gap: 0.5rem;
}

.score-card__metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.9rem;
}

.score-card__metric-label {
    color: var(--muted);
}

.score-card__metric-value {
    color: var(--text);
    text-align: right;
    justify-self: end;
    font-variant-numeric: tabular-nums;
}

.score-card--history {
    gap: 0.42rem;
    display: grid;
}

.score-card--history-empty {
    display: grid;
    gap: 0.35rem;
}

.score-card__metric-value--history {
    color: #f5dfb5;
    font-size: 1.05rem;
}

.score-card__history-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.score-card__history-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.challenge-banner {
    padding: 0.85rem;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(241, 198, 127, 0.07), transparent 32%),
        rgba(104, 56, 34, 0.46);
    border: 1px solid rgba(241, 198, 127, 0.15);
}

.challenge-banner--result {
    display: grid;
    gap: 0.35rem;
}

.challenge-banner--result h3,
.challenge-banner--result p {
    margin: 0;
}

.challenge-banner--valid {
    background:
        linear-gradient(180deg, var(--challenge-valid-top), transparent 30%),
        var(--challenge-valid-bottom);
    border-color: var(--challenge-valid-border);
}

.challenge-banner--invalid {
    background:
        linear-gradient(180deg, var(--challenge-invalid-top), transparent 30%),
        var(--challenge-invalid-bottom);
    border-color: var(--challenge-invalid-border);
}

@keyframes timer-warning-pulse {
    0%,
    100% {
        filter: saturate(1);
        transform: translateY(0);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 0 0 1px rgba(162, 72, 61, 0.18);
    }
    50% {
        filter: saturate(1.16);
        transform: translateY(-1px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 0 1px rgba(196, 98, 84, 0.24),
            0 0 18px rgba(156, 58, 49, 0.2);
    }
}

.modal-shell {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(8, 5, 4, 0.72);
    backdrop-filter: blur(8px);
    z-index: 5;
}

.modal-shell[hidden] {
    display: none !important;
}

.modal-card {
    width: min(460px, calc(100vw - 2rem));
    border-radius: 26px;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top right, rgba(241, 198, 127, 0.12), transparent 28%),
        var(--panel-strong);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
}

.modal-card--danger {
    background:
        radial-gradient(circle at top right, var(--modal-danger-glow), transparent 30%),
        var(--panel-strong);
    border-color: var(--modal-danger-border);
}

.modal-card--finish {
    width: min(620px, calc(100vw - 2rem));
    background:
        radial-gradient(circle at top right, rgba(241, 198, 127, 0.16), transparent 26%),
        radial-gradient(circle at top left, rgba(201, 148, 91, 0.1), transparent 30%),
        var(--panel-strong);
}

.modal-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
}

.finished-standings {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.finished-standing {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
        rgba(31, 20, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.finished-standing--winner,
.finished-standing--tied-leader {
    border-color: rgba(241, 198, 127, 0.26);
    box-shadow: 0 0 0 1px rgba(241, 198, 127, 0.08), 0 0 28px rgba(241, 198, 127, 0.08);
}

.finished-standing--winner {
    background:
        linear-gradient(180deg, rgba(241, 198, 127, 0.15), transparent 46%),
        rgba(31, 20, 15, 0.94);
}

.finished-standing--self {
    background:
        linear-gradient(180deg, rgba(241, 198, 127, 0.1), transparent 40%),
        rgba(31, 20, 15, 0.9);
}

.finished-standing__rank {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(241, 198, 127, 0.13);
    border: 1px solid rgba(241, 198, 127, 0.18);
    color: #f3ddaf;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.finished-standing__identity {
    min-width: 0;
}

.finished-standing__name-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.finished-standing__name-row strong {
    font-size: 1.05rem;
    color: var(--text);
}

.finished-standing__score {
    font-size: 1.45rem;
    font-weight: 700;
    color: #f5dfb5;
    font-variant-numeric: tabular-nums;
}

.badge--soft {
    background: rgba(241, 198, 127, 0.12);
    color: #f2d9aa;
}

.badge--winner {
    background: var(--badge-winner-bg);
    color: var(--badge-winner-text);
    border: 1px solid var(--badge-winner-border);
}

.badge--danger {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
    border: 1px solid var(--badge-danger-border);
}

@media (max-width: 1400px) {
    .page-shell--table {
        padding: 0.08rem;
    }

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

    .table-layout > .panel {
        padding: 0.55rem;
        border-radius: 18px;
    }

    .table-stage.panel {
        padding: 0.18rem;
        gap: 0.18rem;
    }

    .table-stage__header--compact {
        gap: 0.18rem;
    }

    .table-stage__title-block {
        gap: 0.08rem;
    }

    .table-stage__title-block .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .turn-owner-status {
        font-size: clamp(1.08rem, 1.5vw, 1.32rem);
    }

    .table-stage__hint {
        font-size: 0.82rem;
        line-height: 1.18;
    }

    .status-rail--table .meta-chip,
    .status-rail--table .state-pill {
        padding: 0.42rem 0.62rem;
        font-size: 0.78rem;
    }

    .table-stage {
        order: 1;
    }

    .side-panel--luxury {
        order: 2;
    }

    .history-panel--luxury {
        order: 3;
    }

    .table-canvas-shell,
    #table-canvas {
        width: min(100%, clamp(840px, calc(100vw - 0.12rem), 1220px));
        max-height: calc(100vh - 86px);
        border-radius: 10px;
    }

    .history-panel .scoreboard--history {
        max-height: 270px;
    }
}

@media (max-width: 1080px) {
    .page-shell--table {
        padding: 0.05rem;
    }

    .hero--luxury,
    .room-grid,
    .table-layout {
        grid-template-columns: 1fr;
    }

    .table-layout > .panel {
        padding: 0.38rem;
    }

    .table-stage.panel {
        padding: 0.12rem;
    }

    .table-canvas-shell,
    #table-canvas {
        width: min(100%, clamp(620px, calc(100vw - 0.08rem), 1040px));
        max-height: calc(100vh - 98px);
        border-radius: 9px;
    }
}

@media (max-width: 720px) {
    .page-shell,
    .page-shell--table {
        padding: 0.9rem;
    }

    .panel,
    .panel--hero {
        padding: 1.2rem;
    }

    .room-hero,
    .section-head,
    .table-stage__header {
        flex-direction: column;
    }

    .table-canvas-shell,
    #table-canvas {
        width: 100%;
        max-height: min(calc(100vw - 1.8rem), calc(100vh - 180px));
    }

    h1 {
        font-size: 2.25rem;
    }

    .modal-actions {
        flex-direction: column;
    }

    .finished-standing {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .finished-standing__score {
        grid-column: 2;
        justify-self: start;
    }
}