:root {
    --bg-dark: #0a0a0a;
    --bg-panel: rgba(20, 20, 20, 0.7);
    --border-color: rgba(255, 255, 255, 0.08);
    --glow-color: rgba(198, 40, 40, 0.3);
    
    --color-artisan: #9e1c1c;
    --color-merchant: #1c529e;
    --color-religious: #5e1c9e;
    --color-noble: #1c7e3c;
    --color-police: #5c6bc0;
    --color-peasant: #e65100;
    --color-neutral: #9e9e9e;
    
    --font-heading: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
    
    --transition-speed: 0.3s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(158, 28, 28, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(28, 82, 158, 0.08) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0l40 40-40 40L0 40z' fill='%23ffffff' fill-opacity='.003' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: #e0e0e0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    overflow-x: hidden;
}

/* 玻璃拟物风格容器 */
.glass {
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.screen {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

/* 按钮基础样式 */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #a61c1c, #d32f2f);
    color: #fff;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #c62828, #f44336);
    box-shadow: 0 6px 20px rgba(211, 47, 47, 0.6);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btn-action {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cfd8dc;
    justify-content: flex-start;
    padding: 12px 16px;
    font-size: 14px;
    width: 100%;
}

.btn-action:hover:not(:disabled) {
    background: rgba(198, 40, 40, 0.15);
    border-color: #c62828;
    color: #fff;
    box-shadow: 0 0 10px rgba(198, 40, 40, 0.2);
    transform: translateX(4px);
}

.btn-action:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-toggle-group {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-toggle {
    background: transparent;
    color: #888;
    font-size: 13px;
    padding: 6px 12px;
}

.btn-toggle.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-large {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 6px;
}

/* 1. 设置屏幕样式 */
#setup-screen {
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #220505 0%, #000 100%);
}

.setup-container {
    width: 90%;
    max-width: 500px;
    padding: 40px;
    text-align: center;
    border-color: rgba(198, 40, 40, 0.15);
    box-shadow: 0 0 40px rgba(198, 40, 40, 0.1);
}

.game-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 900;
    color: #d32f2f;
    letter-spacing: 0;
    text-shadow: 0 0 15px rgba(211, 47, 47, 0.5);
    margin-bottom: 4px;
}

.game-subtitle {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    color: #9e9e9e;
    letter-spacing: 0;
    margin-bottom: 30px;
}

.setup-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.setup-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setup-group label {
    font-size: 13px;
    font-weight: 600;
    color: #90a4ae;
    text-transform: uppercase;
    letter-spacing: 0;
}

#btn-start {
    margin-top: 10px;
    justify-content: center;
}

/* 2. 游戏头部样式 */
.game-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0;
    color: #d32f2f;
}

.game-info-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    color: #cfd8dc;
    text-transform: uppercase;
    letter-spacing: 0;
}

.header-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.status-indicator {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 4px 16px;
    gap: 16px;
}

.phase-label {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 14px;
    letter-spacing: 0;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.round-counter, .season-counter {
    font-size: 12px;
    color: #b0bec5;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
}

/* 3. 游戏主界面布局 */
.main-layout {
    flex: 1;
    display: flex;
    padding: 20px;
    gap: 20px;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.left-panel {
    flex: 7;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 4px;
}

.left-panel::-webkit-scrollbar {
    width: 6px;
}
.left-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.right-panel {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 320px;
}

/* 4. 财富与支票轨道 */
.track-container {
    padding: 16px;
}

.track-header h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0;
    margin-bottom: 12px;
    color: #90a4ae;
    display: flex;
    align-items: center;
    gap: 8px;
}

.track-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.player-wealth-box {
    flex: 1;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 10px 14px;
}

.wealth-label {
    font-size: 12px;
    color: #78909c;
    display: block;
    margin-bottom: 4px;
}

.wealth-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.cash-value {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.currency {
    font-size: 14px;
    color: #d32f2f;
    font-weight: 700;
}

.checks-display {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.check-tile {
    background: linear-gradient(135deg, #b8860b, #daa520);
    color: #000;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
}

.ai-wealth-box .check-tile {
    background: linear-gradient(135deg, #5c6bc0, #3f51b5);
    color: #fff;
}

.wealth-rail {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.4);
    padding: 8px 12px;
    border-radius: 20px;
}

.rail-line {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    position: relative;
    border-radius: 2px;
}

.rail-label {
    font-size: 11px;
    color: #546e7a;
    font-weight: 700;
}

.marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: left 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.player-color {
    background: #d32f2f;
    color: #fff;
    border: 1.5px solid #fff;
}

.ai-color {
    background: #1c529e;
    color: #fff;
    border: 1.5px solid #fff;
}

/* 5. 旅馆客房版图 */
.inn-board-container {
    padding: 16px;
    background-image:
        linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.72)),
        url("血腥旅馆简体中文PNP/board.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.expansion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.inn-header h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0;
    margin-bottom: 12px;
    color: #90a4ae;
}

.inn-rooms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.room-door {
    background: rgba(0,0,0,0.48);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    min-height: 226px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all var(--transition-speed);
}

.room-door.occupied {
    background: rgba(0,0,0,0.24);
}

.room-door.closed-room {
    opacity: 0.58;
    background: rgba(0, 0, 0, 0.62);
    border-style: dashed;
}

.room-door.clickable,
.card.clickable,
.annex-slot-container.clickable {
    cursor: pointer;
}

.room-door.highlight,
.card.highlight,
.annex-slot-container.highlight {
    border-color: #ffca28 !important;
    box-shadow: 0 0 0 1px rgba(255, 202, 40, 0.55), 0 0 18px rgba(255, 202, 40, 0.25);
}

.room-door.highlight:hover,
.card.highlight:hover,
.annex-slot-container.highlight:hover {
    transform: translateY(-2px);
}

.card.payment-blocked {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.85);
}

.room-badge {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 12px;
    color: #546e7a;
    font-weight: 700;
}

.room-markers {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.room-key-icon, .room-service-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}

.key-player {
    background: #d32f2f;
    color: #fff;
    box-shadow: 0 0 5px #d32f2f;
}

.key-ai {
    background: #1c529e;
    color: #fff;
    box-shadow: 0 0 5px #1c529e;
}

.key-neutral {
    background: #78909c;
    color: #fff;
}

.key-closed {
    background: #263238;
    color: #90a4ae;
}

.service-icon {
    background: #daa520;
    color: #000;
    box-shadow: 0 0 5px #daa520;
}

.service-player {
    outline: 1px solid #d32f2f;
}

.service-ai {
    outline: 1px solid #42a5f5;
}

.empty-room-inner {
    text-align: center;
    opacity: 0.4;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.empty-room-inner i {
    width: 32px;
    height: 32px;
    color: #546e7a;
}

/* 6. 卡牌设计 (Card Component) */
.card {
    width: 140px;
    height: 200px;
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #546e7a;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: all 0.25s ease;
    user-select: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.7), 0 0 10px var(--glow-color);
}

.card.selected {
    border-color: #d32f2f !important;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.8) !important;
    transform: translateY(-5px) scale(1.02);
}

/* 职业色彩设定 */
.card.artisan-red {
    border-color: var(--color-artisan);
    --glow-color: rgba(158, 28, 28, 0.6);
}
.card.merchant-blue {
    border-color: var(--color-merchant);
    --glow-color: rgba(28, 82, 158, 0.6);
}
.card.religious-purple {
    border-color: var(--color-religious);
    --glow-color: rgba(94, 28, 158, 0.6);
}
.card.noble-green {
    border-color: var(--color-noble);
    --glow-color: rgba(28, 126, 60, 0.6);
}
.card.police-grey {
    border-color: var(--color-police);
    --glow-color: rgba(92, 107, 192, 0.6);
}
.card.peasant-yellow {
    border-color: var(--color-peasant);
    --glow-color: rgba(230, 81, 0, 0.6);
}
.card.carnie-orange {
    border-color: #ff8f00;
    --glow-color: rgba(255, 143, 0, 0.6);
}
.card.notable-gold {
    border-color: #c9a227;
    --glow-color: rgba(201, 162, 39, 0.6);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 4px;
}

.card-rank {
    font-size: 11px;
    font-weight: 700;
    color: #daa520;
    letter-spacing: 0;
}

.card-icon-aptitude {
    width: 18px;
    height: 18px;
    opacity: 0.85;
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px 0;
}

.card-name {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.card-role-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #888;
}

.card-loot {
    background: rgba(0,0,0,0.4);
    border: 1px solid #daa520;
    color: #daa520;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.card-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 4px;
    font-size: 8px;
    color: #b0bec5;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 38px;
    justify-content: center;
}

.annex-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
    font-size: 9px;
    text-transform: uppercase;
}

.annex-ability {
    line-height: 1.2;
    margin-top: 2px;
    color: #cfd8dc;
}

/* 尸体面样式 */
.card.dead {
    background: radial-gradient(circle, #212121 0%, #121212 100%) !important;
    border-color: #37474f !important;
}

.card.dead .card-body {
    color: #546e7a;
}

.card.dead .card-body::after {
    content: '💀 CORPSE';
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #b0bec5;
    opacity: 0.35;
    margin-top: 10px;
    letter-spacing: 0;
}

.card.dead .card-footer, .card.dead .card-icon-aptitude {
    display: none;
}

/* 拖车扩展样式 */
.card.trailer {
    border-style: dashed !important;
}

/* 7. 玩家资产控制台布局 */
.player-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.player-assets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.assets-column {
    padding: 12px;
}

.assets-column h4 {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0;
    color: #90a4ae;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding-bottom: 6px;
}

.assets-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 120px;
    align-content: flex-start;
}

.assets-list.corpses {
    min-height: 120px;
}

/* 拥有别馆组（包含叠加的尸体） */
.annex-slot-container {
    position: relative;
    margin-bottom: 16px;
}

.buried-corpse-mini {
    position: absolute;
    bottom: -15px;
    left: 8px;
    width: 124px;
    height: 30px;
    background: #1e1e1e;
    border: 1px solid #daa520;
    border-radius: 4px;
    z-index: -1;
    font-size: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    color: #daa520;
}

.buried-corpse-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 100%;
    z-index: 10;
}

.mini-corpse-badge {
    background: rgba(18, 18, 18, 0.9);
    border: 1.5px solid #c62828;
    color: #c62828;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
}

/* 玩家手牌区 */
.player-hand-section {
    padding: 16px;
}

.hand-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    align-items: center;
}

.hand-header h4 {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0;
    color: #90a4ae;
}

.hand-counter {
    font-size: 12px;
    color: #cfd8dc;
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 10px;
}

.hand-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 100px;
}

.player-objects-section {
    padding: 16px;
}

.object-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 10px;
}

.object-card {
    text-align: left;
    border: 1px solid rgba(255, 202, 40, 0.22);
    background: rgba(20, 20, 20, 0.88);
    color: #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    display: grid;
    gap: 4px;
    cursor: pointer;
    min-height: 118px;
}

.object-card:hover {
    border-color: #ffca28;
    box-shadow: 0 0 14px rgba(255, 202, 40, 0.18);
    transform: translateY(-1px);
}

.object-name {
    font-weight: 700;
    color: #fff;
}

.object-cost,
.object-timing {
    font-size: 11px;
    color: #ffca28;
}

.object-desc {
    font-size: 12px;
    color: #b0bec5;
}

/* 8. 右侧行动面板与AI状态 */
.action-panel-box {
    padding: 16px;
    border-color: rgba(211, 47, 47, 0.2);
}

.action-panel-box h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 0;
}

.action-desc {
    font-size: 13px;
    color: #b0bec5;
    margin-bottom: 16px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.interactive-action-area {
    background: rgba(0,0,0,0.25);
    border: 1.5px solid #d32f2f;
    border-radius: 6px;
    padding: 12px;
    margin-top: 10px;
}

.welcome-card-preview {
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 202, 40, 0.25);
}

.card-flip-in {
    animation: card-flip-in 0.42s ease both;
    transform-origin: center;
}

@keyframes card-flip-in {
    0% { opacity: 0; transform: rotateY(82deg) translateY(8px); }
    100% { opacity: 1; transform: rotateY(0) translateY(0); }
}

.welcome-card-preview strong {
    color: #fff;
    font-size: 15px;
}

.welcome-card-preview span,
.hint-line {
    color: #b0bec5;
    font-size: 12px;
}

.mini-label {
    color: #ffca28;
    font-size: 11px;
    font-weight: 700;
}

.ai-status-box {
    padding: 16px;
}

.ai-status-box h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    color: #90a4ae;
    margin-bottom: 12px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.ai-stat-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-name {
    font-size: 11px;
    color: #78909c;
}

.stat-value {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}

.ai-action-deck-info {
    font-size: 12px;
    color: #cfd8dc;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 10px;
}

.ai-current-card-view {
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
}

.ai-card-name {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ef5350;
}

/* 拖车住客徽章（嘉年华扩展：拖车视同客房） */
.trailer-occupant {
    margin-top: 4px;
    font-size: 11px;
    color: #ffe082;
    background: rgba(255, 167, 38, 0.12);
    border: 1px dashed rgba(255, 167, 38, 0.45);
    border-radius: 4px;
    padding: 3px 6px;
    text-align: center;
}
/* 多人局：其他 AI 叔叔面板 */
.opponents-box {
    padding: 14px 16px;
}
.opponents-box.hidden { display: none; }
.opponents-box h4 {
    font-family: var(--font-heading);
    font-size: 13px;
    color: #90a4ae;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.opponents-box .uncle-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid #ef5350;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.opponents-box .uncle-card:last-child { margin-bottom: 0; }
.opponents-box .uncle-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.opponents-box .uncle-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    color: #ef9a9a;
}
.opponents-box .uncle-diff {
    font-size: 10px;
    color: #b0bec5;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    padding: 1px 6px;
}
.opponents-box .uncle-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11.5px;
    color: #cfd8dc;
}

/* 对手牌桌：手牌背面 / 别馆芯片 / 未埋尸体 */
.uncle-zone {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
}
.uncle-zone label {
    flex: 0 0 30px;
    font-size: 10px;
    color: #78909c;
    padding-top: 2px;
}
.uncle-zone .zone-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}
.zone-empty { font-size: 10px; color: #546e7a; }
.mini-back {
    font-size: 15px;
    color: #5c6bc0;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.mini-more { font-size: 10px; color: #9fa8da; }
.mini-corpse { font-size: 12px; }
.uncle-annex-chip {
    font-size: 10px;
    color: #ffe082;
    background: rgba(255, 167, 38, 0.10);
    border: 1px solid rgba(255, 167, 38, 0.35);
    border-radius: 3px;
    padding: 2px 5px;
    white-space: nowrap;
}
.uncle-annex-chip.clickable { cursor: pointer; }
.uncle-annex-chip.highlight {
    border-color: #ffca28;
    box-shadow: 0 0 8px rgba(255, 202, 40, 0.45);
    animation: chip-pulse 1s ease-in-out infinite alternate;
}
@keyframes chip-pulse { from { transform: scale(1); } to { transform: scale(1.07); } }

/* 回合聚光灯：当前行动者的牌桌区发光 + 思考指示 */
.uncle-card.active-turn {
    border-left-color: #ffca28;
    box-shadow: 0 0 14px rgba(255, 202, 40, 0.25);
}
.uncle-card.thinking .uncle-name::after {
    content: ' 🤔';
    animation: think-blink 0.9s ease-in-out infinite alternate;
}
@keyframes think-blink { from { opacity: 0.35; } to { opacity: 1; } }

/* 座位顺序条 */
.seat-order-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 10px;
    font-size: 11.5px;
}
.seat-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 2px 9px;
    color: #b0bec5;
    transition: all .25s;
}
.seat-chip.host { border-color: #ef9a9a; }
.seat-chip.active {
    background: rgba(255, 202, 40, 0.18);
    border-color: #ffca28;
    color: #ffe082;
    transform: scale(1.06);
}
.seat-chip.human { font-weight: 700; }
.seat-arrow { color: #546e7a; }

/* 卡牌飞行（桌面感：卡从一处飞到另一处） */
.fly-card {
    position: fixed;
    z-index: 4000;
    width: 64px;
    height: 88px;
    border-radius: 6px;
    background: linear-gradient(145deg, #283593, #1a237e);
    border: 2px solid #7986cb;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #e8eaf6;
    text-align: center;
    padding: 4px;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s;
}
@media (prefers-reduced-motion: reduce) {
    .fly-card { transition: none; display: none; }
}

/* 设置：叔叔②③难度下拉 */
.extra-ai-diffs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.extra-ai-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.extra-ai-row label {
    font-size: 13px;
    color: #b0bec5;
    margin: 0;
}
.extra-ai-row select {
    flex: 0 0 auto;
    min-width: 130px;
    background: rgba(0, 0, 0, 0.35);
    color: #eceff1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
}
.extra-ai-row select:focus { outline: 1px solid #ef5350; }

/* 财富轨：其他叔叔标记 */
.marker.extra-uncle {
    background: #ff8a80;
    font-size: 9px;
}

/* 公共牌库状态 */
.deck-status-box {
    display: flex;
    justify-content: space-around;
    padding: 12px;
}

.deck-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deck-stat i {
    width: 24px;
    height: 24px;
    color: #546e7a;
}

.stat-label {
    font-size: 10px;
    color: #78909c;
    display: block;
}

.stat-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.deck-back {
    margin-top: 4px;
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 34px;
    border-radius: 5px;
    border: 1px solid rgba(255, 202, 40, 0.45);
    color: #ffca28;
    font-size: 10px;
    background:
        linear-gradient(135deg, rgba(92, 20, 20, 0.85), rgba(20, 12, 12, 0.96)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 5px);
}

/* 战局日志 */
.log-panel-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    min-height: 150px;
    max-height: 250px;
}

.log-panel-box h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    color: #90a4ae;
    margin-bottom: 8px;
}

.log-content {
    flex: 1;
    overflow-y: auto;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

.log-content::-webkit-scrollbar {
    width: 4px;
}
.log-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.log-entry {
    color: #b0bec5;
}

.log-player {
    color: #4caf50;
}

.log-ai {
    color: #ff9800;
}

.log-police {
    color: #2196f3;
}

.log-warn {
    color: #f44336;
    font-weight: 700;
}

.log-system {
    color: #90a4ae;
}

/* 9. 弹窗模式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    width: 90%;
    max-width: 500px;
    padding: 30px;
    position: relative;
    border-color: rgba(255,255,255,0.1);
}

.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.close-btn:hover {
    opacity: 1;
}

.modal h2 {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal p {
    font-size: 13px;
    color: #b0bec5;
    margin-bottom: 20px;
}

.launder-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.launder-stat {
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    margin-bottom: 16px;
}

.launder-actions {
    display: flex;
    gap: 12px;
}

.launder-actions .btn {
    flex: 1;
    justify-content: center;
}

.help-content {
    max-width: 650px;
}

.help-scroll-area {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 10px;
}

.help-scroll-area::-webkit-scrollbar {
    width: 4px;
}
.help-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
}

.help-scroll-area h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    color: #fff;
    margin: 16px 0 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 4px;
}

.help-scroll-area ul {
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #b0bec5;
}

.badge {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.badge.artisan { background: var(--color-artisan); color: #fff; }
.badge.merchant { background: var(--color-merchant); color: #fff; }
.badge.religious { background: var(--color-religious); color: #fff; }
.badge.noble { background: var(--color-noble); color: #fff; }
.badge.police { background: var(--color-police); color: #fff; }
.badge.peasant { background: var(--color-peasant); color: #fff; }

/* 结算分版 */
.score-board {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.08);
}

.score-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 10px 14px;
    background: rgba(10, 10, 10, 0.6);
    font-size: 13px;
}

.score-row.header {
    font-family: var(--font-heading);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.8);
    color: #90a4ae;
}

.score-row.total {
    font-family: var(--font-heading);
    font-weight: 700;
    background: rgba(198, 40, 40, 0.1);
    color: #ef5350;
    font-size: 15px;
    border-top: 1px solid rgba(198, 40, 40, 0.3);
}

.score-row span:nth-child(2), .score-row span:nth-child(3) {
    text-align: right;
}

.result-verdict {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 24px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    margin-bottom: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
}

#effect-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
}

.effect-burst {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 22px;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(0,0,0,0.72);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    animation: effect-pop 0.95s ease forwards;
}

.effect-checkin { color: #ffe082; }
.effect-bribe { color: #64b5f6; }
.effect-kill { color: #ef5350; }
.effect-build { color: #a5d6a7; }
.effect-bury { color: #b39ddb; }
.effect-police { color: #90caf9; }
.effect-rent { color: #fff176; }
.effect-wage { color: #bcaaa4; }
.effect-object { color: #ffcc80; }
.effect-carnie { color: #ffb74d; }

@keyframes effect-pop {
    0% { opacity: 0; transform: translateY(18px) scale(0.82); }
    18% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-36px) scale(1.08); }
}

.screen-shake {
    animation: screen-shake 0.34s ease;
}

@keyframes screen-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@media (max-width: 1180px) {
    .main-layout {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
        flex-direction: column;
    }

    .left-panel {
        overflow: visible;
        padding-right: 0;
    }

    .right-panel {
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .game-header {
        height: auto;
        min-height: 60px;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .main-layout {
        padding: 12px;
        gap: 12px;
    }

    .track-row,
    .player-assets-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .inn-rooms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .room-door {
        min-height: 210px;
        padding: 8px;
    }

    .card {
        width: min(140px, 100%);
    }

    .btn-toggle-group {
        flex-direction: column;
    }
}

/* ==========================================================================
   迎客翻牌卡 (卡背只露等级，翻开才知身份)
   ========================================================================== */
.welcome-flip-card {
    perspective: 700px;
    width: 168px;
    height: 100px;
    margin: 8px auto 4px;
}
.wf-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.2, .7, .2, 1);
}
.welcome-flip-card.revealed .wf-inner {
    transform: rotateY(180deg);
}
.wf-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    display: grid;
    place-content: center;
    gap: 3px;
    text-align: center;
    padding: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.wf-back {
    background: repeating-linear-gradient(45deg, #3a1c1c, #3a1c1c 6px, #2a1414 6px, #2a1414 12px);
    border: 1px solid rgba(218, 165, 32, 0.45);
}
.wf-back .mini-label { color: #daa520; }
.wf-back-rank {
    font-family: var(--font-heading);
    font-size: 22px;
    color: #ffca28;
    font-weight: 900;
    letter-spacing: 1px;
}
.wf-back-hint {
    font-size: 10px;
    color: #b0907a;
}
.wf-front {
    transform: rotateY(180deg);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 20, 28, 0.94);
}
.wf-front strong {
    color: #fff;
    font-size: 14px;
}
.wf-front span {
    color: #cfd8dc;
    font-size: 11px;
}
.next-peek {
    margin-top: 8px;
    font-size: 11px;
    color: #b0bec5;
    text-align: center;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    padding-top: 6px;
}
.next-peek strong { color: #ffca28; }
.next-peek em { color: #90a4ae; font-style: normal; }

/* 迎客：正面朝上的入店牌堆顶旅客（符合原版规则） */
.welcome-faceup {
    display: flex;
    justify-content: center;
    margin: 8px auto 4px;
}
.wf-traveler {
    position: relative;
    overflow: hidden;
    width: 188px;
    min-height: 96px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 20, 28, 0.94);
    display: grid;
    place-content: center;
    gap: 3px;
    text-align: center;
    padding: 10px 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.wf-traveler.artisan-red    { border-left: 5px solid var(--color-artisan); }
.wf-traveler.merchant-blue  { border-left: 5px solid var(--color-merchant); }
.wf-traveler.religious-purple { border-left: 5px solid var(--color-religious); }
.wf-traveler.noble-green    { border-left: 5px solid var(--color-noble); }
.wf-traveler.police-grey    { border-left: 5px solid var(--color-police); }
.wf-traveler.peasant-yellow { border-left: 5px solid var(--color-peasant); }
.wf-traveler.carnie-orange  { border-left: 5px solid #ff8f00; }
.wf-traveler.notable-gold   { border-left: 5px solid #c9a227; }
.wf-traveler strong { color: #fff; font-size: 15px; position: relative; z-index: 1; }
.wf-traveler span { color: #cfd8dc; font-size: 12px; position: relative; z-index: 1; }
.wf-traveler .mini-label { color: #ffca28; position: relative; z-index: 1; }
.wf-traveler .card-emblem { right: -10px; bottom: -10px; width: 70px; height: 70px; }

/* ==========================================================================
   新手教程
   ========================================================================== */
.setup-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.setup-actions .btn { flex: 1; min-width: 160px; }

.tutorial-content {
    max-width: 560px;
    width: min(560px, 92vw);
    text-align: left;
}
.tutorial-step-label {
    font-size: 12px;
    color: #ffca28;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
#tutorial-title {
    margin: 0 0 12px;
    font-size: 22px;
}
.tutorial-body {
    min-height: 200px;
    font-size: 14px;
    line-height: 1.7;
    color: #cfd8dc;
}
.tutorial-body p { margin: 0 0 10px; }
.tutorial-body strong { color: #fff; }
.tut-list { list-style: none; padding: 0; margin: 0 0 10px; }
.tut-list li {
    padding: 7px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(255, 202, 40, 0.5);
}
.tut-tip {
    margin-top: 12px !important;
    padding: 9px 12px;
    border-radius: 6px;
    background: rgba(255, 202, 40, 0.1);
    border: 1px solid rgba(255, 202, 40, 0.25);
    font-size: 13px;
    color: #ffe082;
}
.tut-chip {
    display: inline-block;
    width: 26px; text-align: center;
    border-radius: 4px;
    color: #fff; font-weight: 700;
    margin-right: 4px;
    padding: 1px 0;
}
.tut-chip.red { background: var(--color-artisan); }
.tut-chip.blue { background: var(--color-merchant); }
.tut-chip.purple { background: var(--color-religious); }
.tut-chip.green { background: var(--color-noble); }
.tut-chip.grey { background: var(--color-police); }
.tut-chip.yellow { background: var(--color-peasant); }

.tutorial-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 14px 0;
}
.tut-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.tut-dot.on { background: #ffca28; transform: scale(1.25); }

.tutorial-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.tutorial-nav .btn { flex: 1; }
.tutorial-nav .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 过场横幅（开局 / 季度 / 新一轮） */
.fx-banner {
    position: fixed;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    z-index: 3200;
    animation: fx-banner 1.9s ease forwards;
}
.fx-banner-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 46px;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8), 0 0 30px rgba(158, 28, 28, 0.6);
}
.fx-banner-sub {
    margin-top: 6px;
    font-size: 15px;
    color: #ffca28;
    letter-spacing: 1px;
}
@keyframes fx-banner {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -58%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .fx-banner { animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   卡面图（本地 PNP 素材，缺省回退徽记）
   ========================================================================== */
.card-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: inherit;
}
.card:has(img.card-art)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(10, 8, 12, 0.18) 0%, rgba(10, 8, 12, 0.45) 55%, rgba(10, 8, 12, 0.82) 100%);
}
.card:has(img.card-art) .card-name,
.card:has(img.card-art) .annex-title,
.card:has(img.card-art) .card-loot { text-shadow: 0 1px 4px #000, 0 0 8px #000; }

/* ==========================================================================
   语言切换
   ========================================================================== */
.lang-toggle {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    overflow: hidden;
}
.lang-btn {
    background: transparent;
    color: #b0bec5;
    border: none;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.lang-toggle .lang-btn + .lang-btn { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.lang-btn.active { background: var(--color-artisan, #9e1c1c); color: #fff; }

/* ==========================================================================
   卡牌悬浮提示（费用 / 效果明细）
   ========================================================================== */
.card-tip {
    position: fixed;
    z-index: 4000;
    width: 248px;
    max-width: 80vw;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(18, 14, 20, 0.97);
    border: 1px solid rgba(255, 202, 40, 0.35);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    font-size: 12.5px;
    line-height: 1.55;
    color: #cfd8dc;
    backdrop-filter: blur(4px);
}
.card-tip.hidden { display: none; }
.card-tip .tip-name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2px;
}
.card-tip .tip-sub { color: #ffca28; font-size: 11.5px; margin-bottom: 8px; }
.card-tip .tip-cost {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.card-tip .tip-cost b { color: #fff; white-space: nowrap; }
.card-tip .tip-disc { color: #66bb6a; font-size: 11px; }
.card-tip .tip-eff {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #e0e0e0;
}
.card-tip .tip-eff b { color: #ffca28; }
.card-tip .tip-note { margin-top: 6px; font-size: 11px; color: #90a4ae; }

/* ==========================================================================
   姑妈道具轮抽 / 付款
   ========================================================================== */
.draft-content { max-width: 720px; width: min(720px, 94vw); text-align: center; }
.draft-step-label { color: #ffca28; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.draft-hint { color: #b0bec5; font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.draft-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.draft-card {
    width: 150px;
    text-align: left;
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cfd8dc;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.draft-card:hover { transform: translateY(-4px); border-color: #ffca28; background: rgba(255, 202, 40, 0.08); }
.draft-cost { color: #ffca28; font-weight: 900; font-size: 15px; }
.draft-name { color: #fff; font-weight: 700; font-size: 14px; }
.draft-timing { color: #90a4ae; font-size: 11px; }
.draft-desc { color: #b0bec5; font-size: 11.5px; line-height: 1.45; }

.payment-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.pay-card {
    width: 180px;
    text-align: left;
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
}
.pay-card.kept { background: rgba(102, 187, 106, 0.12); border-color: #66bb6a; }
.pay-card.dropped { background: rgba(120, 120, 120, 0.1); border-color: rgba(255,255,255,0.12); opacity: 0.6; }
.pay-card .pay-cost { color: #ffca28; font-weight: 900; }
.pay-card .pay-name { color: #fff; font-weight: 700; }
.pay-card .pay-desc { color: #b0bec5; font-size: 11.5px; line-height: 1.4; }
.pay-card .pay-state { font-size: 12px; font-weight: 700; }
.pay-card.kept .pay-state { color: #66bb6a; }
.pay-card.dropped .pay-state { color: #90a4ae; }
.payment-total { color: #cfd8dc; font-size: 14px; margin-bottom: 12px; }
.payment-total strong { color: #ffca28; }

/* ==========================================================================
   动作特效：锚定飘字 / 粒子 / 警笛 / 彩纸 / 房间高亮
   ========================================================================== */
.effect-burst.anchored {
    position: fixed;
    transform: translate(-50%, -50%);
    animation: effect-float 1s ease forwards;
    white-space: nowrap;
    font-size: 18px;
    padding: 8px 14px;
}
@keyframes effect-float {
    0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.82); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -130%) scale(1.06); }
}

.fx-particle {
    position: fixed;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    animation: fx-particle-move 0.9s ease-out forwards;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    z-index: 3001;
}
@keyframes fx-particle-move {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px))) scale(1.05) rotate(var(--rot, 180deg)); }
}

.fx-siren {
    position: fixed;
    inset: 0;
    pointer-events: none;
    animation: fx-siren-flash 1.4s ease-in-out;
    z-index: 2999;
    mix-blend-mode: screen;
}
@keyframes fx-siren-flash {
    0%, 100%        { background: transparent; }
    10%, 30%, 50%, 70% { background: rgba(239, 83, 80, 0.22); }
    20%, 40%, 60%, 80% { background: rgba(66, 165, 245, 0.22); }
}

.fx-confetti {
    position: fixed;
    top: -16px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.92;
    animation: fx-confetti-fall linear forwards;
    z-index: 3001;
}
@keyframes fx-confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(102vh) rotate(720deg); opacity: 0.85; }
}

/* 行动发生时，对应房间/资产区短暂高亮 */
.glow-checkin, .glow-rent { animation: glow-gold 0.85s ease; }
.glow-kill   { animation: glow-red 0.85s ease; }
.glow-bribe  { animation: glow-blue 0.85s ease; }
.glow-build  { animation: glow-green 0.85s ease; }
.glow-bury   { animation: glow-brown 0.85s ease; }
@keyframes glow-gold  { 0%,100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px rgba(255,202,40,0.85), 0 0 26px rgba(255,202,40,0.6); } }
@keyframes glow-red   { 0%,100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px rgba(239,83,80,0.9), 0 0 28px rgba(183,28,28,0.7); } }
@keyframes glow-blue  { 0%,100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px rgba(100,181,246,0.85), 0 0 24px rgba(66,165,245,0.6); } }
@keyframes glow-green { 0%,100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px rgba(129,199,132,0.85), 0 0 24px rgba(102,187,106,0.6); } }
@keyframes glow-brown { 0%,100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px rgba(141,110,99,0.9), 0 0 24px rgba(78,52,46,0.7); } }

.setup-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #8a93a0;
    line-height: 1.5;
}

/* ==========================================================================
   原创派系徽记（自绘 SVG 水印，零第三方版权素材）
   ========================================================================== */
.card {
    position: relative;
    overflow: hidden;
}
.card-emblem {
    position: absolute;
    right: -12px;
    bottom: -10px;
    width: 84px;
    height: 84px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-8deg);
}
.card-emblem svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}
/* 内容层压在徽记之上 */
.card > .card-header,
.card > .card-body,
.card > .card-footer {
    position: relative;
    z-index: 1;
}
/* 各派系徽记配色 */
.card.artisan-red    .card-emblem { color: #e74b3c; }
.card.merchant-blue  .card-emblem { color: #4f8fe0; }
.card.religious-purple .card-emblem { color: #9b59d6; }
.card.noble-green    .card-emblem { color: #3fb564; }
.card.police-grey    .card-emblem { color: #8993d6; }
.card.peasant-yellow .card-emblem { color: #f0a030; }
.card.carnie-orange  .card-emblem { color: #ff9e2c; }
.card.notable-gold   .card-emblem { color: #d9b441; }

/* 迎客翻牌正面也展示徽记 */
.wf-front { position: relative; overflow: hidden; }
.wf-front .card-emblem { right: -8px; bottom: -8px; width: 56px; height: 56px; }

@media (prefers-reduced-motion: reduce) {
    .fx-particle, .fx-confetti, .fx-siren,
    .effect-burst.anchored, .wf-inner,
    .glow-checkin, .glow-kill, .glow-bribe, .glow-build, .glow-bury, .glow-rent {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ★ 自制扩展「镇上的新面孔」：同人角标与设置按钮 */
.fan-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1a1a1a;
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    border-radius: 3px;
    padding: 1px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
}
.btn-fan {
    border-style: dashed !important;
    border-color: #ffb300 !important;
}
.btn-fan.active {
    background: rgba(255, 179, 0, 0.18) !important;
    color: #ffd54f !important;
}