:root {
    --night: #070408;
    --ink: #120711;
    --wine: #4b0614;
    --blood: #b9142e;
    --ember: #e03a4d;
    --gold: #c9a45f;
    --bone: #f3e9d2;
    --mist: rgba(255, 245, 224, 0.76);
    --glass: rgba(18, 7, 17, 0.74);
    --line: rgba(201, 164, 95, 0.42);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--night);
}

body {
    min-height: 100vh;
    height: auto !important;
    overflow-x: hidden;
    color: var(--bone) !important;
    font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
    letter-spacing: 0 !important;
    background-color: var(--night) !important;
    isolation: isolate;
}

body::before {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(6, 0, 6, 0.44), rgba(7, 0, 0, 0.88)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(50, 0, 15, 0.18) 50%, rgba(0, 0, 0, 0.84)) !important;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 10%, rgba(201, 164, 95, 0.1) 10.4% 10.8%, transparent 11.2% 22%, rgba(201, 164, 95, 0.08) 22.4% 22.8%, transparent 23.2% 77%, rgba(201, 164, 95, 0.08) 77.4% 77.8%, transparent 78.2% 89%, rgba(201, 164, 95, 0.1) 89.4% 89.8%, transparent 90.2%),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(255, 255, 255, 0.025) 29px 30px);
    opacity: 0.72;
    mix-blend-mode: screen;
    z-index: 0;
}

.container {
    position: relative !important;
    z-index: 1 !important;
    width: min(92vw, 760px);
    margin: 28px auto !important;
    padding: 34px clamp(20px, 4vw, 48px) !important;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(28, 10, 22, 0.62), rgba(8, 4, 9, 0.5)),
        linear-gradient(135deg, rgba(185, 20, 46, 0.1), transparent 46%, rgba(201, 164, 95, 0.08));
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 239, 197, 0.05),
        inset 0 0 38px rgba(95, 4, 22, 0.26);
    backdrop-filter: blur(4px);
}

.container::before,
.container::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.78;
}

.container::before {
    top: 14px;
}

.container::after {
    bottom: 14px;
}

h1,
h2,
h3 {
    margin: 0 0 18px;
    color: var(--bone);
    font-weight: 700;
    font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    text-shadow:
        0 2px 0 #000,
        0 0 16px rgba(185, 20, 46, 0.62),
        0 0 34px rgba(201, 164, 95, 0.25);
}

h1 {
    font-size: clamp(42px, 7vw, 78px) !important;
}

h2 {
    font-size: clamp(32px, 5vw, 54px) !important;
}

h3 {
    font-size: 20px !important;
    color: var(--gold);
}

form {
    display: grid;
    justify-items: center;
    gap: 8px;
}

label {
    color: var(--mist);
    font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-weight: 600;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

input,
select,
textarea {
    font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    min-height: 42px;
    border: 1px solid rgba(201, 164, 95, 0.45) !important;
    border-radius: 6px !important;
    background: rgba(9, 3, 9, 0.86) !important;
    color: var(--bone) !important;
    outline: none;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.55),
        0 0 0 rgba(185, 20, 46, 0);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

input::placeholder {
    color: rgba(243, 233, 210, 0.58);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ember) !important;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.58),
        0 0 0 3px rgba(185, 20, 46, 0.24),
        0 0 24px rgba(185, 20, 46, 0.24);
}

button,
.btn,
.toggle-btn,
.save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px !important;
    border: 1px solid rgba(255, 220, 157, 0.5) !important;
    border-radius: 6px !important;
    color: var(--bone) !important;
    font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-weight: 800;
    text-decoration: none;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
    background:
        linear-gradient(180deg, rgba(219, 43, 65, 0.96), rgba(79, 5, 20, 0.96)) !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 28px rgba(185, 20, 46, 0.32);
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

button:hover,
.btn:hover,
.toggle-btn:hover,
.save-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.13);
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 34px rgba(224, 58, 77, 0.48);
}

.error {
    color: #ff6f7f !important;
    text-shadow: 0 0 18px rgba(255, 33, 70, 0.72);
}

.result,
.section {
    color: var(--bone);
}

.section {
    width: 100%;
    border-top-color: rgba(201, 164, 95, 0.38) !important;
}

.row {
    gap: 12px !important;
}

.row select {
    width: 138px !important;
}

.table {
    border: 2px solid rgba(201, 164, 95, 0.54) !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(137, 10, 31, 0.95) 0 12%, rgba(62, 15, 24, 0.98) 42%, rgba(13, 5, 8, 1) 74%, #030103 100%) !important;
    box-shadow:
        inset 0 0 36px rgba(0, 0, 0, 0.82),
        inset 0 0 0 18px rgba(201, 164, 95, 0.08),
        inset 0 0 0 28px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 240, 202, 0.12),
        0 28px 68px rgba(0, 0, 0, 0.72),
        0 0 52px rgba(185, 20, 46, 0.34) !important;
}

.table::before {
    content: "";
    position: absolute;
    inset: 38px;
    border-radius: 50%;
    border: 1px solid rgba(201, 164, 95, 0.24);
    box-shadow: inset 0 0 32px rgba(201, 164, 95, 0.08);
    pointer-events: none;
}

.table::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 62px;
    height: 62px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid rgba(201, 164, 95, 0.52);
    background: rgba(6, 2, 4, 0.48);
    box-shadow: 0 0 30px rgba(185, 20, 46, 0.38);
    pointer-events: none;
}

.seat {
    min-width: 72px;
    padding: 5px 7px;
    border: 1px solid rgba(201, 164, 95, 0.26);
    border-radius: 6px;
    background: rgba(6, 2, 7, 0.68);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.48);
    color: var(--mist);
    font-size: 14px;
}

.number {
    color: var(--gold);
}

.seat input {
    width: 84px !important;
    min-height: 30px;
    padding: 4px 6px;
}

.seat select {
    width: 110px !important;
    min-height: 32px;
    margin-top: 5px;
}

.alive {
    color: #fff7e6 !important;
}

.dead,
.dead-no-vote {
    color: #ff526b !important;
    text-shadow: 0 0 14px rgba(255, 82, 107, 0.74);
}

.dead-no-vote {
    border-color: rgba(255, 82, 107, 0.8) !important;
    background: rgba(70, 0, 15, 0.42);
}

.poison {
    color: #9ee66a !important;
    text-shadow: 0 0 14px rgba(112, 222, 75, 0.55);
}

.special {
    color: #7bdcff !important;
    text-shadow: 0 0 14px rgba(74, 197, 255, 0.6);
}

.toggle-btn {
    position: fixed !important;
    z-index: 3;
}

.log-panel {
    position: fixed !important;
    z-index: 2;
    border: 1px solid rgba(201, 164, 95, 0.4);
    background: var(--glass) !important;
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.68), inset 0 0 24px rgba(185, 20, 46, 0.16);
    backdrop-filter: blur(10px);
}

.log-textarea {
    resize: none;
    line-height: 1.65;
}

@media (max-width: 720px) {
    body {
        align-items: flex-start !important;
        padding: 18px 0;
    }

    .container {
        padding: 28px 16px !important;
    }

    .table {
        transform: scale(0.78);
        transform-origin: top center;
        margin-bottom: -84px !important;
    }

    .toggle-btn {
        top: 12px !important;
        right: 12px !important;
    }

    .log-panel {
        inset: 64px 12px auto 12px !important;
        width: auto !important;
        height: min(62vh, 520px) !important;
    }
}