:root {
        --p: #65468e;
        --i: #282235
    }

    * {
        box-sizing: border-box
    }

    body {
        margin: 0;
        min-height: 100vh;
        background: radial-gradient(circle at top, #51406e, #191624 65%);
        font-family: system-ui, "Microsoft YaHei";
        color: var(--i)
    }

    #bg {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: url("background.png") center / cover no-repeat;
        filter: brightness(0.35) saturate(0.7) hue-rotate(-20deg);
        opacity: 0.45
    }

    main {
        width: min(900px, 94vw);
        margin: auto;
        padding: 38px 0 70px
    }

    .brand {
        text-align: center;
        color: #fff;
        position: relative
    }

    #langBtn {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0
    }

    .brand h1 {
        letter-spacing: .25em;
        margin: 0;
        font-size: 2.5rem
    }

    .brand p, .note {
        color: #d6cce8
    }

    section {
        background: #fffdf8;
        padding: 26px;
        border-radius: 18px;
        margin-top: 20px;
        box-shadow: 0 15px 40px #0005
    }

    h2 {
        margin-top: 0
    }

    label {
        display: block;
        font-weight: bold;
        margin: 11px 0 5px
    }

    input, select, button {
        font: inherit;
        padding: 10px;
        border-radius: 9px
    }

    input, select {
        width: 100%;
        border: 1px solid #d0c5d9
    }

    input[type="checkbox"] {
        width: auto;
        padding: 0;
        accent-color: var(--p)
    }

    button {
        border: 0;
        background: var(--p);
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        margin: 10px 6px 0 0
    }

    .alt {
        background: #e9e2f0;
        color: #43315d
    }

    .warn {
        background: #b84350
    }

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

/* 座位布局画布：两纵列（默认公式或房主自定义），座位按 left/top 百分比绝对定位；
   高度由前端按人数动态延长（内联样式覆盖），此处为 Alpine 渲染前的兜底 */
.seats {
    display: block;
    position: relative;
    height: min(520px, 60vh);
    margin: 14px 0
}

    .seats .seat {
        position: absolute;
        width: 110px;
        transform: translate(-50%, -50%);
        transition: left .3s, top .3s;
        touch-action: none /* 触屏拖动：阻止浏览器滚动手势抢占 pointer 事件 */
    }

    .seats .seat.dragging {
        transition: none;
        cursor: grabbing
    }

    .seats .table {
        position: absolute;
        left: 50%;
        width: 26%;
        background: #d8c9a8;
        border-radius: 14px;
        box-shadow: inset 0 0 0 2px #c3b28c;
        pointer-events: none;
        transform: translateX(-50%)
    }

    .seats .table-handle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 12px;
        background: #b09a6e;
        border-radius: 6px;
        cursor: ns-resize;
        pointer-events: auto;
        touch-action: none
    }

    .seats .table-handle.top {
        top: -6px
    }

    .seats .table-handle.bottom {
        bottom: -6px
    }

    /* 手机竖屏：缩小座位按钮与桌柄，适配窄画布与手指操作 */
    @media (max-width: 480px) {
        .seats .seat {
            width: 88px;
            padding: 10px 4px
        }

        .seats .table-handle {
            height: 18px;
            border-radius: 9px
        }

        .seats .table-handle.top {
            top: -9px
        }

        .seats .table-handle.bottom {
            bottom: -9px
        }
    }

    .layout-actions {
        display: flex;
        gap: 10px;
        margin-top: 6px
    }

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

    .role {
        background: #eee7f6;
        padding: 7px 10px;
        border-radius: 8px
    }

    .role button {
        padding: 0;
        margin: 0 0 0 7px;
        background: none;
        color: #9b4f6c
    }

    .seat {
        margin: 0;
        padding: 15px 6px;
        background: #eee7f0;
        color: #5e5563
    }

    .seat.empty {
        background: #f5f0e5;
        color: #806741
    }

    .seat.mine {
        outline: 3px solid #e0af56
    }

    .seat.exiled {
        background: #dcdcdc;
        color: #7a7a7a
    }

    .seat.dead {
        background: #f2d7d7;
        color: #a63a3a
    }

    .judge-item {
        cursor: pointer
    }

    .judge-item.selected {
        outline: 2px solid var(--p)
    }

    .judge-item.exiled {
        background: #e3e3e3;
        color: #7a7a7a
    }

    .judge-item.dead {
        background: #f2d7d7;
        color: #a63a3a
    }

    .hidden {
        display: none
    }

    [x-cloak] {
        display: none !important
    }

    .struck {
        text-decoration: line-through
    }

    #identityImg.hidden, #deadOverlay.hidden {
        display: none
    }

    .host {
        border-left: 5px solid #e0af56
    }

    .role-config {
        border-left: 5px solid #e0af56
    }

    .modal .reveal-item {
        margin: 8px 0;
        font-weight: bold
    }

    /* 裁判笔记：输入框与公开笔记弹窗内容 */
    #judgeNotesBox textarea {
        width: 100%;
        min-height: 180px;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid #c9b8d8;
        border-radius: 8px;
        background: #faf7fd;
        color: #5e5563;
        resize: vertical
    }

    /* 面板标题行（房主设置/发言计时）：标题与收起按钮同行 */
    .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px
    }

    .panel-head h2 {
        margin: 0
    }

    /* 发言计时：大号数字秒表显示 */
    #speechTime {
        font-size: 1.8rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--p);
        letter-spacing: .08em
    }

    .modal .notes-content {
        white-space: pre-wrap;
        word-break: break-word;
        margin: 8px 0
    }

    .status {
        min-height: 24px;
        color: #ffd1d9;
        text-align: center
    }

    .code {
        font-size: 2.1rem;
        letter-spacing: .15em;
        color: var(--p);
        font-weight: 800
    }

    #codeRow {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap
    }

    #icpFooter {
        text-align: center;
        color: #9a92a8;
        font-size: .8rem;
        padding: 0 0 26px
    }

    .identity {
        font-size: clamp(2rem, 8vw, 4rem);
        color: #8b315c;
        text-align: center;
        margin: 20px
    }

    .identity-card {
        position: relative;
        width: min(320px, 70vw);
        margin: 20px auto;
        cursor: pointer;
        perspective: 1000px
    }

    .identity-card .identity-front, .identity-card .identity-back {
        backface-visibility: hidden;
        transition: transform .45s;
        border-radius: 16px
    }

    .identity-card .identity-front {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fffdf8;
        padding: 14px;
        box-shadow: 0 15px 40px #0005
    }

    .identity-card .identity-back {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotateY(180deg);
        background: linear-gradient(160deg, #6b4a8f, #3b2a55);
        color: #d6cce8;
        font-weight: bold;
        letter-spacing: .2em
    }

    .identity-card.flipped .identity-front {
        transform: rotateY(180deg)
    }

    .identity-card.flipped .identity-back {
        transform: rotateY(0)
    }

    #identityImg {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 8px 24px #0004;
        display: block
    }

    #deadOverlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 10, 30, .5);
        color: #fff;
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: .15em;
        border-radius: 16px;
        pointer-events: none;
        z-index: 2
    }
    /* 术语查看弹窗 */
    .modal-mask {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10
    }

    .modal {
        background: #fff;
        width: min(560px, 92vw);
        max-height: 70vh;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: hidden
    }

    .modal-head {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .modal-search {
        padding: 8px 10px;
        border: 1px solid #d8c9a8;
        border-radius: 8px
    }

    .terms-list {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .term-item {
        display: flex;
        gap: 10px;
        padding: 6px 8px;
        background: #f7f2ea;
        border-radius: 8px
    }

    .term-item b {
        white-space: nowrap;
        color: #5e5563
    }

    .terms-empty {
        text-align: center;
        color: #806741
    }

    /* 未入座玩家列表 */
    .unseated {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 10px 0
    }

    .unseated-items {
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }

    .unseated-item {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #f7f2ea;
        border-radius: 8px;
        padding: 5px 10px
    }

    .unseated-item .note {
        font-size: .85rem
    }

    /* 转让目标选中高亮 */
    .seat.transfer-target {
        outline: 3px solid #e0af56
    }

    .unseated-item {
        cursor: default
    }

    .unseated-item.selected {
        outline: 2px solid #e0af56
    }

    /* ===== 阿瓦隆 ===== */
    /* 队长座位（金色皇冠标注）与组队模式选中（蓝框） */
    .seat.captain {
        outline: 3px solid #d4a017
    }

    .seat.picked {
        outline: 3px solid #3b82f6
    }

    /* 信息栏：可见/高亮玩家 */
    .identity-viewer-item.insight-highlight {
        background: #f7ecbf;
        outline: 2px solid #d4a017
    }

    /* 任务完成情况表 */
    .avalon-quest-table {
        margin: 14px 0
    }

    .avalon-quest-table table {
        width: 100%;
        border-collapse: collapse;
        background: #fffdf6
    }

    .avalon-quest-table th,
    .avalon-quest-table td {
        border: 1px solid #cbbfa3;
        padding: 4px 6px;
        text-align: center;
        font-size: .9rem
    }

    .avalon-quest-table tr.quest-success td {
        background: #c8e6c9;
        color: #1b5e20;
        font-weight: 600
    }

    .avalon-quest-table tr.quest-fail td {
        background: #ffcdd2;
        color: #b71c1c;
        font-weight: 600
    }

    .avalon-quest-table tr.quest-ongoing td {
        background: #fff3cd
    }

    .avalon-quest-table tr.quest-pending td {
        opacity: .55
    }

    /* 胜负结果 */
    .avalon-result p {
        font-size: 1.1rem;
        font-weight: 700;
        text-align: center;
        margin: 8px 0 2px
    }

    .avalon-result .winner-good {
        color: #2e7d32
    }

    .avalon-result .winner-evil {
        color: #b71c1c
    }

    /* 阿瓦隆确定按钮：未选满队员时为灰色禁用态，选满后变为主色（同"保存配置"） */
    button.disabled {
        background: #c9c4bb;
        color: #8a857a;
        cursor: not-allowed
    }

    /* 阿瓦隆传位按钮（绿色，区别于操作按钮） */
    button.pass {
        background: #2e7d32;
        color: #fff
    }

    /* 刺杀提醒（红色醒目） */
    .avalon-result .assassinate {
        color: #b71c1c;
        font-weight: 700;
        text-align: center;
        margin: 0 0 6px
    }