/* @font-face {
    font-family: 'Digital';
    src: url('led_board-7.ttf') format('truetype');
    font-display: swap;
} */

/* @font-face {
    font-family: 'Digital-Fallback'; 
    src: url('https://cdn.jsdelivr.net/npm/digital-7-mono@1.0.0/digital-7-mono.ttf') format('truetype');
    font-display: swap;
}*/

/* 添加HelveticaNeue-CondensedBold字体 */
@font-face {
    font-family: 'HelveticaNeue-CondensedBold';
    src: url('./HelveticaNeue-CondensedBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'DIN';
    src: url('./DIN-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kohinoor';
    src: url('./KohinoorLatin-Demiotf.otf') format('opentype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --background-color: #222;
    --card-color: #333;
    --card-bottom-color: #2d2d2d;
    --card-bottom-deep-shadow-color: #1e1e1e;
    --text-color: #DDDDDD;
    --ace-color: #EC5B5B;
    --divider-color: #222;
    --triangle-color: #f5a623;
    --btn-bg: rgba(255, 255, 255, 0.12);
    --btn-bg-hover: rgba(255, 255, 255, 0.22);
    --btn-bg-disabled: rgba(255, 255, 255, 0.05);
    --btn-text: #eee;
    --btn-text-disabled: rgba(255, 255, 255, 0.25);
    --toolbar-bg: rgba(0, 0, 0, 0.35);
    --settings-bg: #2a2a2a;
    --settings-overlay: rgba(0, 0, 0, 0.65);
    --felt-color: #1a5c32;
    --felt-highlight: #217a42;
    --felt-shadow: #0f3d20;
}

body[data-theme="poker"] {
    --background-color: var(--felt-color);
    --divider-color: transparent;
    --triangle-color: #ffd700;
    --btn-bg: rgba(0, 0, 0, 0.35);
    --btn-bg-hover: rgba(0, 0, 0, 0.5);
    --toolbar-bg: rgba(0, 0, 0, 0.45);
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--background-color);
    position: fixed;
    -webkit-overflow-scrolling: touch;
    transition: background-color 0.4s ease;
}

/* 牌桌主题：背景画到 html 上，让真正铺满整个屏幕（包括 PWA 的 safe-area 与遮罩弹窗后方） */
html[data-theme="poker"] {
    background-color: var(--felt-color);
    background-image:
        url('./assets/table-felt.png'),
        radial-gradient(ellipse at 30% 18%, var(--felt-highlight) 0%, transparent 55%),
        repeating-linear-gradient(
            32deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.025) 3px,
            rgba(255, 255, 255, 0.025) 4px
        ),
        repeating-linear-gradient(
            118deg,
            transparent,
            transparent 4px,
            rgba(0, 0, 0, 0.035) 4px,
            rgba(0, 0, 0, 0.035) 5px
        ),
        linear-gradient(180deg, var(--felt-highlight) 0%, var(--felt-color) 55%, var(--felt-color) 100%);
    background-size: cover, cover, 7px 7px, 9px 9px, cover;
    background-position: center;
    background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
}

/* body 在牌桌主题透明，让 html 桌布完整透出 */
body[data-theme="poker"] {
    background: transparent;
}

body[data-theme="poker"]::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

body[data-theme="poker"] .container,
body[data-theme="poker"] .toolbar,
body[data-theme="poker"] #idle-overlay {
    z-index: 1;
}
/* settings-overlay 保持高 z-index 以正常覆盖 banner / toolbar */

body[data-theme="poker"] .scoreboard {
    background: transparent;
}

/* 牌桌主题：与故事主题保持一致的卡片间距与按钮距离 */
body[data-theme="poker"] .score-display {
    gap: clamp(48px, 12vw, 180px);
    padding: 64px 24px 80px;
}

body[data-theme="poker"] .score-section {
    gap: clamp(22px, 5vh, 48px);
}

body {
    color: var(--text-color);
    font-family: 'HelveticaNeue-CondensedBold', sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注意：safe-area padding 仅放在 .container 上，body 自身不留 padding，
       避免 PWA 下 padding 区域露出 background-color 与 body 渐变形成可见分界。 */
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 确保完全填充iPhone横屏 */
    min-width: 100vw;
    min-height: 100vh;
    /* 添加iOS安全区域支持 */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.scoreboard {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* 确保完全填充 */
    min-width: 100%;
    min-height: 100%;
    position: relative;
}

.score-display {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    pointer-events: auto;
    z-index: 1;
    padding: 60px 10px 80px;
    width: 100%;
    max-width: 100vw;
    gap: 2vw;
}

/* 确保分数显示在点击区域上方 */
.score-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 撑满计分区高度，使卡片上/下方留出可点击空白（卡片上方用于切换基准方） */
    align-self: stretch;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
    gap: 12px;
}

.step-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 4;
}

/* 设置中关闭"下方按钮"后，隐藏所有主题的 +1/+2/+3 与奖杯按钮 */
body.hide-step-controls .step-controls {
    display: none !important;
}

.step-btn {
    min-width: 68px;
    height: 54px;
    padding: 0 18px;
    border: none;
    border-radius: 14px;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-family: inherit;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.step-btn:hover:not(:disabled) {
    background: var(--btn-bg-hover);
}

.step-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.step-btn:disabled {
    background: var(--btn-bg-disabled);
    color: var(--btn-text-disabled);
    cursor: not-allowed;
}

body[data-theme="poker"] .step-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(10, 72, 35, 0.9), rgba(3, 38, 17, 0.94));
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.16),
        inset 0 -2px rgba(0, 0, 0, 0.24),
        0 4px 12px rgba(0, 0, 0, 0.34);
}

/* 卡片样式 */
.score-card {
    background-color: transparent;
    border-radius: 30px;
    aspect-ratio: 1/1;
    width: 38vw;
    height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    perspective: 500px; /* 添加3D视角 */
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* 基准方明暗提示：非基准方变暗（所有主题生效） */
.score-card.is-dimmed {
    opacity: 0.4;
    filter: saturate(0.7);
}

/* 添加翻页动画相关样式 */
/* 静态面样式 */
.static-face,
.flip-face {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden; /* 3D翻转关键属性 */
    border-radius: 30px;
}

/* 静态面设置 */
.static-face {
    z-index: 5; /* 静态面默认在翻转面之上 */
}
.static-face.card-face-top {
    top: 0;
    background-color: var(--card-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid var(--divider-color);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
.static-face.card-face-bottom {
    bottom: 0;
    background-color: var(--card-bottom-color);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3);
}

/* 翻转面设置 */
.flip-face {
    transform-style: preserve-3d;
    transform: translateZ(0);
    z-index: 1; /* 初始状态下翻转面在静态面之下 */
}
.flip-face-front { /* 物理上的顶部翻转元素 */
    top: 0;
    background-color: var(--card-color);
    transform-origin: bottom center; /* 向下翻转的默认原点 */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid var(--divider-color);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
.flip-face-back { /* 物理上的底部翻转元素 */
    bottom: 0;
    background-color: var(--card-bottom-color);
    transform: rotateX(180deg); /* 初始状态：已翻转，准备向下翻转显示 */
    transform-origin: top center; /* 向下翻转显示的默认原点 */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3);
}

/* 数字在面内的定位 */
.static-face span,
.flip-face span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'HelveticaNeue-CondensedBold', 'Roboto', Arial, sans-serif;
    font-size: clamp(70px, 14vw, 180px);
    line-height: 1; /* 保持行高为1，方便基于字体大小计算 */
    color: var(--text-color);
    font-weight: bold;
}

/* A 系列数字样式 */
.static-face span.ace,
.flip-face span.ace {
    color: var(--ace-color);
}

.static-face span.wide-value,
.flip-face span.wide-value {
    font-size: clamp(64px, 23vw, 150px);
}

/* 顶部面内的数字位置 - 显示数字上半部分 */
.static-face.card-face-top span,
.flip-face-front span {
    line-height: 0; /* 取消行高影响，直接定位 */
    bottom: 0; /* 将基线对准卡片底部 */
    transform: translateY(50%); /* 向上移动半个字体高度，使数字垂直中心对齐卡片底部 */
}

/* 底部面内的数字位置 - 显示数字下半部分 */
.static-face.card-face-bottom span,
.flip-face-back span {
    line-height: 0; /* 取消行高影响，直接定位 */
    top: 0;  /* 将顶线对准卡片顶部 */
    transform: translateY(-50%); /* 向下移动半个字体高度，使数字垂直中心对齐卡片顶部 */
}


/* 三角形容器 */
.triangle-container {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
}

.triangle-container.active {
    opacity: 1;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top:  26px solid var(--triangle-color);
    border-radius: 3px;
}

.hidden-score {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 扑克牌显示 */
.poker-card-display {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    filter:
        drop-shadow(0 10px 16px rgba(0, 0, 0, 0.34))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.26));
    pointer-events: none;
}

body[data-theme="poker"] .poker-card-display {
    display: block;
}

body[data-theme="poker"] .static-face,
body[data-theme="poker"] .flip-face,
body[data-theme="poker"] .card-shadow {
    display: none !important;
}

body[data-theme="poker"] .triangle-container {
    display: none;
}

body[data-theme="poker"] .score-card {
    aspect-ratio: 351 / 528;
    width: min(28vw, 48vh);
    height: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-theme="poker"] #left-card {
    transform: rotate(-0.7deg);
}

body[data-theme="poker"] #right-card {
    transform: rotate(0.7deg);
}

.poker-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    display: block;
}

/* 牌桌主题：A 卡级别角章 — 赌场金筹码风格（金属浮雕 + 深底色），右上角靠上 */
.ace-level-badge {
    display: none;
    position: absolute;
    top: 1.5%;
    right: 4%;
    left: auto;
    bottom: auto;
    width: clamp(30px, 12%, 52px);
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, #fff1b0 0%, #f7c84a 28%, #d18a16 75%, #7a4e0c 100%);
    color: #3a2402;
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    font-size: clamp(16px, 3.4vw, 26px);
    font-weight: 900;
    line-height: 1;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    transform: none;
    box-shadow:
        0 6px 14px -4px rgba(60, 30, 0, 0.55),
        inset 0 1.5px rgba(255, 255, 255, 0.6),
        inset 0 -2px rgba(70, 40, 0, 0.32);
    border: 2px solid #fff1b0;
    text-shadow: 0 1px 0 rgba(255, 240, 180, 0.65);
    z-index: 4;
}

.ace-level-badge.visible {
    display: flex;
}

/* 故事卡主题：A 卡级别角章 — 柔和扁平的花色色块（呼应卡牌内的黑桃/红桃），右上角靠上 */
.story-tier-badge {
    display: none;
    position: absolute;
    top: 1.5%;
    right: 4%;
    width: clamp(32px, 16%, 56px);
    aspect-ratio: 1;
    padding: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7c84a 0%, #e9a022 100%);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: clamp(18px, 4.2vw, 30px);
    font-weight: 800;
    line-height: 1;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    box-shadow:
        0 8px 16px -6px rgba(0, 0, 0, 0.32),
        inset 0 1.5px rgba(255, 255, 255, 0.4);
    border: none;
    z-index: 4;
}

.story-tier-badge.visible {
    display: flex;
}

/* 故事卡左方（黑桃）—— 深石板蓝灰圆角块，呼应卡内黑桃色 */
#left-story-card .story-tier-badge {
    background: linear-gradient(180deg, #383846 0%, #1d1d28 100%);
    box-shadow:
        0 8px 16px -6px rgba(0, 0, 0, 0.36),
        inset 0 1.5px rgba(255, 255, 255, 0.18);
}

/* 故事卡右方（红桃）—— 玫瑰红圆角块，呼应卡内红桃色 */
#right-story-card .story-tier-badge {
    background: linear-gradient(180deg, #ef5670 0%, #c5172f 100%);
    box-shadow:
        0 8px 16px -6px rgba(160, 20, 40, 0.42),
        inset 0 1.5px rgba(255, 255, 255, 0.35);
}

/* Flip 与 Stories 主题：A1/A2/A3 用大 A + 小上标级别 */
.rank-tier {
    font-size: 0.4em;
    vertical-align: super;
    margin-left: 0.04em;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.85;
}

.static-face span .rank-tier,
.flip-face span .rank-tier {
    font-size: 0.34em;
    margin-left: 0.02em;
    opacity: 0.78;
}

/* 扑克主题发牌动画 */
body[data-theme="poker"] .score-card.dealing .poker-card-display {
    animation: dealCard 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes dealCard {
    0% {
        transform: rotate(-2deg) scale(0.96);
        opacity: 0.55;
    }
    60% {
        transform: rotate(1deg) scale(1.015);
        opacity: 1;
    }
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* 工具栏 — 容器仅做定位，按钮自带玻璃胶囊 */
.toolbar {
    position: fixed;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 50;
    padding: 0;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: var(--toolbar-bg);
    color: var(--btn-text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.18s;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px rgba(255, 255, 255, 0.16);
}

body[data-theme="poker"] .toolbar-btn {
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(6, 54, 25, 0.78), rgba(3, 30, 13, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffe9c2;
    padding: 9px 16px;
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, 0.5),
        inset 0 1px rgba(255, 255, 255, 0.14);
}

.toolbar-btn:hover {
    background: var(--btn-bg-hover);
}

.toolbar-btn:active {
    transform: scale(0.95);
}

.toolbar-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 顶部 banner：双方名字 + 累计胜局 */
.score-banner {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--toolbar-bg);
    color: var(--btn-text);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    z-index: 55;
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    user-select: none;
    -webkit-user-select: none;
    max-width: calc(100vw - 120px);
}

.player-name {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 6px;
    cursor: pointer;
    letter-spacing: 0.02em;
    border-radius: 8px;
    transition: background 0.15s;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}

.player-name:hover {
    background: rgba(255, 255, 255, 0.12);
}

.wins-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.wins-num {
    font-size: 18px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    transition: color 0.2s, transform 0.2s;
}

.wins-num.bump {
    animation: winsBump 0.7s cubic-bezier(0.34, 1.7, 0.5, 1);
}

@keyframes winsBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.45); }
    65% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.wins-divider {
    opacity: 0.45;
    font-size: 14px;
}

body[data-theme="stories"] .score-banner {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(10, 70, 60, 0.24), inset 0 1px rgba(255, 255, 255, 0.42);
}

body[data-theme="poker"] .score-banner {
    background: linear-gradient(145deg, rgba(6, 54, 25, 0.86), rgba(3, 30, 13, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffe9c2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.12);
}

/* 每方获胜按钮：默认（记分牌主题）= 金黄实心按钮 */
.win-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 54px;
    padding: 0 18px;
    border: 1px solid rgba(255, 215, 100, 0.7);
    border-radius: 14px;
    background: linear-gradient(180deg, #f7c84a 0%, #efa928 100%);
    color: #ffffff;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 8px 18px -8px rgba(241, 168, 40, 0.55),
        inset 0 1px rgba(255, 255, 255, 0.45),
        inset 0 -2px rgba(120, 70, 0, 0.18);
}

.win-btn[hidden] {
    display: none;
}

.win-btn:hover:not(:disabled) {
    filter: brightness(1.05);
}

.win-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.win-icon {
    width: 26px;
    height: 26px;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(120, 70, 0, 0.28));
}

/* 默认隐藏彩色扁平图标，只在 stories / poker 主题下显示 */
.win-icon-flat {
    display: none;
}

/* 牌桌 / 故事卡 / 深空主题：奖杯按钮去除背景与边框，仅显示彩色扁平奖杯图标本身 */
body[data-theme="poker"] .win-btn,
body[data-theme="stories"] .win-btn,
body[data-theme="nebula"] .win-btn {
    min-width: 0;
    height: 54px;
    padding: 0 6px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

body[data-theme="poker"] .win-btn:active:not(:disabled),
body[data-theme="stories"] .win-btn:active:not(:disabled),
body[data-theme="nebula"] .win-btn:active:not(:disabled) {
    transform: scale(0.9);
}

body[data-theme="poker"] .win-icon-default,
body[data-theme="stories"] .win-icon-default,
body[data-theme="nebula"] .win-icon-default {
    display: none;
}

body[data-theme="poker"] .win-icon-flat,
body[data-theme="stories"] .win-icon-flat,
body[data-theme="nebula"] .win-icon-flat {
    display: block;
    width: 54px;
    height: 54px;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.34));
}

body[data-theme="poker"] .win-btn,
body[data-theme="stories"] .win-btn,
body[data-theme="nebula"] .win-btn {
    height: 56px;
    padding: 0 8px;
}

/* 深空主题：奖杯按钮尺寸与 step-btn 视觉对齐，避免图标过大 "出框" */
body[data-theme="nebula"] .win-btn {
    height: 46px;
    padding: 0 4px;
}

body[data-theme="nebula"] .win-icon-flat {
    width: 40px;
    height: 40px;
}

/* 撤销按钮禁用态视觉 */
.toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 设置面板：动作按钮 */
.setting-action {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.setting-action:hover {
    background: rgba(255, 255, 255, 0.12);
}

.setting-action:active {
    transform: scale(0.98);
}

/* 奖杯庆祝弹窗 */
.trophy-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 20, 0.55);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    z-index: 250;
    padding: 24px;
    pointer-events: none;
    cursor: pointer;
}

.trophy-overlay.open {
    display: flex;
    animation: overlayIn 0.3s ease-out;
    pointer-events: auto;
}

.trophy-hint {
    margin-top: 4px;
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
}

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

.trophy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 48px;
    border-radius: 28px;
    background:
        radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f3f5f8 100%);
    box-shadow:
        0 40px 80px -24px rgba(0, 0, 0, 0.5),
        inset 0 1px rgba(255, 255, 255, 0.95);
    text-align: center;
    color: #1d1d28;
    transform-origin: center;
    animation: trophyPop 0.55s cubic-bezier(0.34, 1.7, 0.5, 1);
    max-width: 360px;
}

@keyframes trophyPop {
    0% { transform: scale(0.6); opacity: 0; }
    55% { transform: scale(1.06); opacity: 1; }
    80% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.trophy-art {
    width: 96px;
    height: 96px;
    color: var(--trophy-color, #d4a942);
    filter: drop-shadow(0 8px 16px rgba(212, 169, 66, 0.45));
    animation: trophyShine 1.6s ease-in-out infinite alternate;
}

@keyframes trophyShine {
    from { filter: drop-shadow(0 6px 10px rgba(212, 169, 66, 0.35)); }
    to { filter: drop-shadow(0 12px 22px rgba(255, 215, 100, 0.7)); }
}

.trophy-overlay[data-side="right"] .trophy-art {
    color: #c75268;
    filter: drop-shadow(0 8px 16px rgba(199, 82, 104, 0.45));
}

@keyframes trophyShineRight {
    from { filter: drop-shadow(0 6px 10px rgba(199, 82, 104, 0.4)); }
    to { filter: drop-shadow(0 12px 22px rgba(255, 130, 160, 0.7)); }
}

.trophy-overlay[data-side="right"] .trophy-art {
    animation-name: trophyShineRight;
}

.trophy-title {
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase;
}

.trophy-subtitle {
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1d1d28;
}

.trophy-score {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* 战绩弹窗（长按新局） */
.history-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 220;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.history-overlay.open {
    display: flex;
}

.history-card {
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow: hidden;
    background: var(--settings-bg);
    border-radius: 16px;
    color: var(--text-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.history-header h2 {
    font-size: 18px;
    font-weight: bold;
}

.history-body {
    overflow-y: auto;
    padding: 14px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-row {
    display: grid;
    grid-template-columns: 36px 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.history-row:last-child {
    border-bottom: none;
}

.history-row .h-step {
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.history-row .h-left {
    text-align: right;
    font-weight: 700;
}

.history-row .h-mid {
    color: rgba(255, 255, 255, 0.5);
}

.history-row .h-right {
    text-align: left;
    font-weight: 700;
}

.history-row.changed-left .h-left {
    color: #f5d36b;
}

.history-row.changed-right .h-right {
    color: #f5a3b0;
}

.history-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    padding: 32px 0;
    font-size: 14px;
}

/* 右上角悬浮设置按钮 — 苹果扁平风格 */
.floating-btn {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--toolbar-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--btn-text);
    cursor: pointer;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    transition: background 0.15s, transform 0.1s;
    z-index: 60;
    padding: 0;
}

.floating-btn:hover {
    background: var(--btn-bg-hover);
}

.floating-btn:active {
    transform: scale(0.94);
}

.floating-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}

body[data-theme="poker"] .floating-btn {
    background: linear-gradient(145deg, rgba(6, 54, 25, 0.86), rgba(3, 30, 13, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffe9c2;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.12),
        0 6px 18px rgba(0, 0, 0, 0.28);
}

body[data-theme="stories"] .floating-btn {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 8px 20px rgba(10, 70, 60, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.42);
}

body[data-theme="stories"] .floating-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.settings-close svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* 设置面板 */
.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 14, 0.92);
    z-index: 200;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.settings-overlay.open {
    display: flex;
}

.settings-panel {
    background: var(--settings-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-header h2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
}

.settings-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.settings-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.settings-body {
    padding: 16px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setting-group {
    margin: 0;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
}

/* 开关类设置：标题 + 开关同一行（开关右对齐），小字描述放标题下方 */
.setting-group:has(.toggle-switch) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
}

.setting-group .toggle-switch {
    display: contents;
}

.setting-group:has(.toggle-switch) .setting-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.setting-group:has(.toggle-switch) .toggle-slider {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    cursor: pointer;
}

.setting-group:has(.toggle-switch) .toggle-label {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    cursor: pointer;
}

.setting-group:has(.toggle-switch) .setting-hint {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2px;
}

.setting-label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

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

#theme-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

#theme-options .setting-option {
    padding: 10px 2px;
    font-size: 11.5px;
    gap: 5px;
}

#theme-options .option-icon {
    width: 32px;
    height: 25px;
}

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

.setting-option {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}

.setting-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.setting-option.active {
    border-color: var(--triangle-color);
    background: rgba(245, 166, 35, 0.15);
}

.option-icon {
    width: 36px;
    height: 28px;
    border-radius: 4px;
}

.flip-icon {
    background: linear-gradient(to bottom, #444 50%, #333 50%);
    border: 1px solid #555;
}

.poker-icon {
    background: white;
    border: 1px solid #ccc;
    position: relative;
}

.poker-icon::after {
    content: '♠';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #111;
}

.stories-icon {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.22);
}

.stories-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 36%, #1d1d28 0 2.4px, transparent 3.3px),
        radial-gradient(circle at 70% 62%, #d72a3f 0 2.4px, transparent 3.3px);
}

.nebula-icon {
    background:
        radial-gradient(ellipse 90% 70% at 30% 25%, rgba(120, 100, 200, 0.55) 0%, transparent 60%),
        linear-gradient(140deg, #2a1f55 0%, #110b2c 100%);
    border: 1px solid rgba(160, 140, 255, 0.35);
    position: relative;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.35);
}

.nebula-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 28%, #ffffff 0 0.9px, transparent 1.3px),
        radial-gradient(circle at 68% 36%, #c8b9ff 0 1px, transparent 1.5px),
        radial-gradient(circle at 42% 70%, #ffffff 0 0.8px, transparent 1.2px),
        radial-gradient(circle at 80% 78%, #ffb0d4 0 0.9px, transparent 1.3px),
        radial-gradient(circle at 12% 60%, #ffffff 0 0.6px, transparent 1px);
}

/* 霓夜主题色块：紫色发光地平线 + 一张白色小卡 */
.neon-icon {
    background:
        radial-gradient(80% 60% at 50% -10%, rgba(168, 120, 255, 0.85) 0%, transparent 62%),
        linear-gradient(160deg, #1c1545 0%, #0c0820 100%);
    border: 1px solid rgba(170, 140, 255, 0.4);
    position: relative;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.neon-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 12px;
    height: 16px;
    transform: translateX(-50%) rotate(-6deg);
    border-radius: 3px;
    background: linear-gradient(180deg, #ffffff 0%, #e9e7f6 100%);
    box-shadow: 0 2px 6px rgba(120, 80, 230, 0.55);
}

/* 牌面风格仅牌桌主题可用；其他主题直接隐藏整组，不再占位 */
body:not([data-theme="poker"]) #deck-setting-group {
    display: none;
}

body[data-theme="poker"] #deck-setting-group .setting-hint {
    display: none;
}

.setting-hint {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 48px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--triangle-color);
}

.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(20px);
}

.toggle-label {
    font-size: 15px;
    color: var(--text-color);
}

/* 动画类 */
/* 向下翻转（增加）- 直接应用到物理元素 */
.score-card.flipping-down .flip-face-front {
    animation: flipDownFront 0.5s ease-out forwards;
    z-index: 10;
}
.score-card.flipping-down .flip-face-back {
    animation: flipDownBack 0.5s ease-out forwards;
    z-index: 10;
}
.score-card.flipping-down .static-face {
    z-index: 1; /* 在翻转过程中，静态面应该在下方 */
}

/* 向上翻转（减少）- 通过JS添加的角色类应用 */
.score-card.flipping-up .flip-up-actor-bottom {
    animation: flipUpFront 0.5s ease-out forwards;
    transform-origin: top center !important;
    z-index: 10;
}
.score-card.flipping-up .flip-up-actor-top {
    animation: flipUpBack 0.5s ease-out forwards;
    transform-origin: bottom center !important;
    z-index: 10;
}
.score-card.flipping-up .static-face {
    z-index: 1; /* 在翻转过程中，静态面应该在下方 */
}

/* 关键帧动画 */
/* 向下翻转关键帧 */
@keyframes flipDownFront {
    0% {
        transform: rotateX(0deg);
        z-index: 15;
    }
    10% {
        transform: rotateX(-10deg);
        z-index: 15;
    }
    49.9% {
        transform: rotateX(-89deg);
        z-index: 15;
    }
    50% {
        transform: rotateX(-90deg);
        z-index: 1;
    }
    100% {
        transform: rotateX(-180deg);
        z-index: 1;
    }
}

@keyframes flipDownBack {
    0% { 
        transform: rotateX(180deg); 
        z-index: 1; 
        background-color: var(--card-bottom-color);
    }
    49.9% { 
        transform: rotateX(91deg); 
        z-index: 1; 
        background-color: var(--card-bottom-color);
    }
    50% { 
        transform: rotateX(90deg); 
        z-index: 15; 
        background-color: var(--card-bottom-color);
    }
    75% { 
        transform: rotateX(45deg); 
        z-index: 15; 
        background-color: var(--card-bottom-color);
    }
    95% { 
        transform: rotateX(5deg); 
        z-index: 15; 
        background-color: var(--card-bottom-color);
    }
    100% { 
        transform: rotateX(0deg); 
        z-index: 15; 
        background-color: var(--card-bottom-color);
    }
}

/* 向上翻转关键帧 */
@keyframes flipUpFront {
    0% { transform: rotateX(0deg); z-index: 15;}
    49% { transform: rotateX(88deg); z-index: 15; }
    51% { transform: rotateX(92deg); z-index: 1; }
    100% { transform: rotateX(180deg); z-index: 1;}
}

@keyframes flipUpBack {
    0% { transform: rotateX(-180deg); z-index: 1;}
    49% { transform: rotateX(-92deg); z-index: 1; }
    51% { transform: rotateX(-88deg); z-index: 15; }
    100% { transform: rotateX(0deg); z-index: 15;}
}

/* 小屏横屏（折叠机展开 / 横屏手机）：按钮竖排在卡牌右侧 */
@media (orientation: landscape) and (max-height: 480px) {
    .score-section {
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }

    .step-controls {
        flex-direction: column;
        gap: 6px;
    }

    .step-btn {
        min-width: 52px;
        height: 40px;
        font-size: 15px;
        padding: 0 12px;
    }

    .win-btn {
        min-width: 52px;
        height: 40px;
        padding: 0 12px;
    }

    body[data-theme="poker"] .win-btn,
    body[data-theme="stories"] .win-btn,
    body[data-theme="nebula"] .win-btn,
    body[data-theme="neon"] .win-btn {
        min-width: 52px;
        height: 40px;
        padding: 0 12px;
    }

    .win-icon {
        width: 22px;
        height: 22px;
    }

    body[data-theme="stories"] .score-display,
    body[data-theme="poker"] .score-display,
    body[data-theme="nebula"] .score-display,
    body[data-theme="neon"] .score-display {
        gap: 6vw;
        padding: 40px 16px 60px;
    }

    body[data-theme="stories"] .score-section,
    body[data-theme="poker"] .score-section,
    body[data-theme="nebula"] .score-section,
    body[data-theme="neon"] .score-section {
        gap: 14px;
    }

    .score-banner {
        top: 6px;
        padding: 5px 10px;
        font-size: 12px;
    }

    .wins-num {
        font-size: 15px;
    }

    .toolbar {
        bottom: 4px;
    }

    .toolbar-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .floating-btn {
        width: 38px;
        height: 38px;
        top: 6px;
    }
}

/* 适应横屏 */
@media (orientation: landscape) {
    .static-face span,
    .flip-face span {
        font-size: min(36vw, 36vh);
    }

    .static-face span.wide-value,
    .flip-face span.wide-value {
        font-size: min(28vw, 32vh);
    }
    
    .separator {
        font-size: min(20vw, 20vh);
        width: 10vw;
    }
    
    .triangle-container {
        top: -10px;
    }
    
    .triangle {
        border-left-width: max(24px, 1.5vh);
        border-right-width: max(24px, 1.5vh);
        border-top-width: max(38px, 3vh);
    }
    
    .container {
        width: 100vw;
        max-width: 100vw;
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .scoreboard {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .score-display {
        flex: 1;
        min-height: 0;
        padding-top: max(env(safe-area-inset-top), 0px);
        padding: 5px 5px 60px;
        gap: 1.5vh;
    }
    
    .score-card {
        width: 34vh;
        height: 34vh;
    }

    .step-btn {
        min-width: 58px;
        height: 46px;
        font-size: 17px;
    }

    .win-btn,
    body[data-theme="poker"] .win-btn,
    body[data-theme="stories"] .win-btn {
        min-width: 58px;
        height: 46px;
        padding: 0 14px;
    }

    .win-icon {
        width: 22px;
        height: 22px;
    }

    .step-controls {
        gap: 6px;
    }

    .toolbar {
        bottom: max(10px, env(safe-area-inset-bottom));
    }
}

.separator {
    font-family: 'HelveticaNeue-CondensedBold', 'Roboto', Arial, sans-serif;
    font-size: min(24vw, 24vh);
    color: transparent;
    margin-top: -15px;
    width: 10vw;
    height: min(22vw, 22vh);
    text-align: center;
    opacity: 1;
    align-self: center;
    font-weight: bold;
    position: relative;
    flex-shrink: 0;
}

.separator::before,
.separator::after {
    content: '';
    position: absolute;
    left: 50%;
    width: clamp(10px, 2.2vmin, 24px);
    height: clamp(10px, 2.2vmin, 24px);
    border-radius: 50%;
    background: #727272;
    transform: translateX(-50%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
}

.separator::before {
    top: 35%;
}

.separator::after {
    top: 58%;
}

body[data-theme="poker"] .separator,
body[data-theme="stories"] .separator,
body[data-theme="nebula"] .separator,
body[data-theme="neon"] .separator {
    display: none;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .score-display {
        padding: 5px;
        gap: 2vw;
    }
    
    .score-card {
        width: 42vw;
        height: 42vw;
    }
    
    .static-face span,
    .flip-face span {
        font-size: min(32vw, 32vh);
    }

    .static-face span.wide-value,
    .flip-face span.wide-value {
        font-size: min(25vw, 28vh);
    }
    
    .separator {
        font-size: min(24vw, 24vh);
        width: 8vw;
    }
}

@media (max-width: 360px) {
    .score-card {
        width: 44vw;
        height: 44vw;
    }
    
    .static-face span,
    .flip-face span {
        font-size: min(34vw, 34vh);
    }

    .static-face span.wide-value,
    .flip-face span.wide-value {
        font-size: min(26vw, 30vh);
    }
    
    .separator {
        font-size: min(24vw, 24vh);
        width: 6vw;
        margin: 0;
    }
}

/* 平板设备最大限制 */
@media (min-width: 768px) {
    .score-display {
        gap: 2vw;
    }
    
    .score-card {
        width: 38vw;
        height: 38vw;
        max-width: unset;
        max-height: unset;
    }

    .static-face span,
    .flip-face span {
        font-size: min(34vw, 48vh);
    }

    .static-face span.wide-value,
    .flip-face span.wide-value {
        font-size: min(27vw, 40vh);
    }
    
    .separator {
        font-size: min(22vw, 22vh);
        width: 8vw;
    }
}

/* 大屏幕设备最大限制 */
@media (min-width: 1024px) {
    .score-card {
        width: 40vw;
        height: 40vw;
        max-width: unset;
        max-height: unset;
    }

    .score-display {
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        gap: 2vw;
    }

    .static-face span,
    .flip-face span {
        font-size: min(34vw, 48vh);
    }

    .static-face span.wide-value,
    .flip-face span.wide-value {
        font-size: min(27vw, 40vh);
    }
}

/* 桌面端设备最大限制 */
@media (min-width: 1600px) {
    .score-card {
        width: 40vw;
        height: 40vw;
        max-width: unset;
        max-height: unset;
    }

    .score-display {
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        gap: 2vw;
    }

    .static-face span,
    .flip-face span {
        font-size: min(34vw, 48vh);
    }

    .static-face span.wide-value,
    .flip-face span.wide-value {
        font-size: min(27vw, 40vh);
    }
}

/* 扑克主题必须在所有响应式规则之后覆盖正方形计分牌。 */
body[data-theme="poker"] .score-card {
    aspect-ratio: 351 / 528 !important;
    width: min(28vw, 48vh) !important;
    height: auto !important;
    max-width: 360px;
    max-height: calc(100vh - 120px);
}

@media (max-width: 480px) {
    body[data-theme="poker"] .score-card {
        width: min(40vw, 38vh) !important;
    }

    body[data-theme="poker"] .step-btn {
        min-width: 56px;
        height: 46px;
        padding: 0 12px;
        font-size: 17px;
    }

    body[data-theme="poker"] .win-btn {
        min-width: 56px;
        height: 46px;
        padding: 0 12px;
    }

    body[data-theme="poker"] .score-display {
        gap: 8vw;
    }
}



/* 胜利庆祝效果 */
.celebration-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: var(--color);
    opacity: 0.8;
    transform-origin: center;
    transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate));
    animation: confetti-explosion var(--explosion-duration) cubic-bezier(0.22, 0.61, 0.36, 1) forwards, confetti-flutter var(--flutter-duration) ease-in-out infinite alternate;
    z-index: 100;
}

@keyframes confetti-explosion {
    0% {
        transform: translate(50vw, 50vh) scale(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--translateX), var(--translateY)) scale(1) rotate(var(--rotate));
        opacity: var(--final-opacity);
    }
}

@keyframes confetti-flutter {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    33% {
        transform: translateX(var(--flutter-x1)) rotate(var(--flutter-r1));
    }
    66% {
        transform: translateX(var(--flutter-x2)) rotate(var(--flutter-r2));
    }
    100% {
        transform: translateX(var(--flutter-x3)) rotate(var(--flutter-r3));
    }
}

/* --- Idle Screen Saver Styles --- */
#idle-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* 全黑背景 */
    z-index: 99; /* 确保在最顶层 */
    display: none; /* 初始隐藏 */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* 表明可点击退出 */
    overflow: hidden; /* 防止内容溢出 */
}

#eyes-container {
    display: flex;
    gap: 25vw; /* Further increased spacing */
    position: relative; /* 用于随机移动 */
    transition: transform 0.5s ease-in-out; /* 平滑移动 */
}

.eye {
    /* Size constraints remain */
    width: 20vmin;
    height: 20vmin;
    min-width: 90px;
    min-height: 90px;
    max-width: 200px;
    max-height: 200px;
    /* Removed border-radius */
    background-color: transparent;
    position: relative;
    overflow: visible;
}

/* Remove ::after shadow */
.eye::after {
    content: none;
}

/* --- SVG Eye Styles --- */
.eye svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Style the shapes via the <use> element */
.eye use {
    fill: #61DAFB; /* Set the eye color here */
    /* transition: xlink:href 0.1s; */ /* CSS cannot transition href */
}

/* REMOVE ALL PREVIOUS expression-specific styles */
/* Removed .eye-shadow, .eye-base, .eye-pupil, .eye-lid, .eye-brow, .eye-x styles */
/* Removed .expression-* rules that used clip-path, transform, or d */

/* Remove old background-position based rules if they were left commented */
/*
#left-eye.expression-normal,
#right-eye.expression-normal { background-position: 0% 0%; }
...
#left-eye.expression-blink-2,
#right-eye.expression-blink-2 { background-position: 20% 25%; }
*/

/* =============================================================
   故事卡 (Stories) 主题 — 淡绿桌布 · 苹果风白卡 · 真实扑克排布
   ============================================================= */

#nebula-canvas {
    display: none !important;
}

body[data-theme="stories"] {
    --story-spade: #1d1d28;
    --story-heart: #d72a3f;
    --story-felt-base: #2ea291;
    --story-felt-deep: #2ea291;
    --story-felt-light: #4cbaa9;
    --story-ink-soft: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    background: transparent;
}

/* 故事卡主题：背景画到 html 上，覆盖整个屏幕（含 PWA safe-area 与设置遮罩之下） */
html[data-theme="stories"] {
    background-color: #2ea291;
    background-image:
        radial-gradient(ellipse 110% 80% at 50% 22%, rgba(255, 255, 255, 0.14) 0%, transparent 60%),
        linear-gradient(180deg, #4cbaa9 0%, #2ea291 60%, #2ea291 100%);
    background-size: cover, cover;
    background-position: center;
    background-repeat: no-repeat, no-repeat;
}

body[data-theme="stories"]::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1.6px),
        radial-gradient(circle at 78% 64%, rgba(0, 0, 0, 0.05) 0 1px, transparent 1.6px);
    background-size: 5px 5px, 7px 7px;
    opacity: 0.5;
    mix-blend-mode: soft-light;
}

/* 故事主题背景：花色背景已合并到 ::after 漂浮层，body 仅保留底色渐变即可 */

body[data-theme="stories"]::after {
    content: '';
    position: fixed;
    inset: -40px;
    pointer-events: none;
    z-index: 0;
    background-image: url('./assets/stories/felt-suits.svg');
    background-size: 320px 320px;
    background-repeat: repeat;
    animation: feltFloat 28s linear infinite;
    will-change: transform;
}

@keyframes feltFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-320px, -320px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    body[data-theme="stories"]::after {
        animation: none;
    }
}

body[data-theme="stories"] .container,
body[data-theme="stories"] .toolbar,
body[data-theme="stories"] #idle-overlay,
body[data-theme="stories"] .floating-btn {
    z-index: 2;
}
/* settings-overlay 保持高 z-index 以正常覆盖 banner / toolbar */

body[data-theme="stories"] .scoreboard {
    background: transparent;
}

body[data-theme="stories"] .static-face,
body[data-theme="stories"] .flip-face,
body[data-theme="stories"] .card-shadow,
body[data-theme="stories"] .poker-card-display {
    display: none !important;
}

body[data-theme="stories"] .triangle-container {
    display: none;
}

/* 卡牌容器：加大间距、按钮远离卡顶 */
body[data-theme="stories"] .score-display {
    gap: clamp(48px, 12vw, 180px);
    padding: 64px 24px 80px;
}

body[data-theme="stories"] .score-section {
    gap: clamp(22px, 5vh, 48px);
}

body[data-theme="stories"] .score-card {
    aspect-ratio: 351 / 528;
    width: min(24vw, 50vh);
    height: auto;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
}

/* 故事卡片本体（白色 + 连续圆角 + 苹果风阴影）
   圆角与卡牌宽度成比例（约 8%），并 clamp 在 [10px, 30px] 之间，避免小屏过大、大屏不够。 */
.story-card-display {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 25;
    border-radius: max(10px, min(2vw, 4vh, 30px));
    overflow: hidden;
    background:
        radial-gradient(130% 95% at 50% 0%, #ffffff 0%, #f4f6f8 100%);
    box-shadow:
        0 32px 64px -24px rgba(0, 50, 42, 0.5),
        0 14px 28px -12px rgba(0, 60, 50, 0.32),
        0 2px 6px -2px rgba(0, 30, 25, 0.22),
        inset 0 1px rgba(255, 255, 255, 0.95);
}

body[data-theme="stories"] .story-card-display {
    display: block;
}

/* 角落 rank + 小 pip — 偏小、紧凑（真实扑克牌比例） */
.story-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 3%;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    font-weight: 700;
    letter-spacing: -0.04em;
    z-index: 3;
}

.story-corner-tl {
    top: 5%;
    left: 6.5%;
}

.story-corner-br {
    bottom: 5%;
    right: 6.5%;
    transform: rotate(180deg);
}

.story-rank {
    font-size: clamp(16px, 4.4vmin, 40px);
    display: inline-block;
    transform-origin: center;
}

.story-pip-small {
    width: clamp(8px, 2vmin, 18px);
    height: clamp(8px, 2vmin, 18px);
    overflow: visible;
}

#left-card .story-rank,
#left-card .story-pip-small {
    color: var(--story-spade, #1d1d28);
}

#right-card .story-rank,
#right-card .story-pip-small {
    color: var(--story-heart, #d72a3f);
}

/* 数字牌 pip 矩阵 — 加大 pip 让排列花色更显眼 */
.story-pip-grid {
    position: absolute;
    inset: 14% 17%;
    z-index: 2;
    display: none;
}

.story-card-display.is-pips .story-pip-grid {
    display: block;
}

.story-pip-cell {
    position: absolute;
    width: 32%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
}

.story-pip-cell.flipped {
    transform: translate(-50%, -50%) rotate(180deg);
}

.story-pip-cell svg {
    width: 100%;
    height: 100%;
    display: block;
}

#left-card .story-pip-cell svg {
    color: var(--story-spade, #1d1d28);
}

#right-card .story-pip-cell svg {
    color: var(--story-heart, #d72a3f);
}

/* 中央大 pip（仅 A 系列显示） */
.story-center-pip {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.story-card-display.is-ace .story-center-pip {
    display: flex;
}

.story-center-pip svg {
    width: 60%;
    height: auto;
}

#left-card .story-center-pip svg {
    color: var(--story-spade, #1d1d28);
}

#right-card .story-center-pip svg {
    color: var(--story-heart, #d72a3f);
}

/* JQK 插画 */
.story-face {
    position: absolute;
    inset: 14% 13%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    z-index: 2;
    display: none;
    filter:
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.story-card-display.is-face .story-face {
    display: block;
}

/* Ace 徽章 — 故事卡主题已改用 corner 小上标，徽章保留结构但永不显示 */
.story-ace-badge {
    display: none !important;
    position: absolute;
    left: 50%;
    bottom: 10%;
    min-width: 28%;
    height: 11%;
    padding: 0 12px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 242, 250, 0.96));
    color: var(--badge-color, #1d1d28);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 2vw, 20px);
    letter-spacing: 0.14em;
    line-height: 1;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px rgba(255, 255, 255, 0.9);
    z-index: 4;
}

#left-card .story-ace-badge {
    --badge-color: var(--story-spade);
}

#right-card .story-ace-badge {
    --badge-color: var(--story-heart);
}

.story-ace-badge.visible {
    display: flex;
}

/* 故事卡入场动效 — 弹性 */
body[data-theme="stories"] .score-card.dealing .story-card-display {
    animation: storyPop 0.55s cubic-bezier(0.34, 1.7, 0.5, 1) forwards;
}

@keyframes storyPop {
    0% {
        transform: scale(0.82) translateY(8%);
        opacity: 0;
    }
    55% {
        transform: scale(1.04) translateY(-1.5%);
        opacity: 1;
    }
    80% {
        transform: scale(0.985) translateY(0.5%);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* rank 数字升级时弹跳 */
.story-rank.pop {
    animation: rankPop 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

@keyframes rankPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.3); }
    70%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

/* 故事主题工具栏与按钮 — iOS 玻璃（淡绿桌布风格） */
body[data-theme="stories"] .toolbar-btn {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 9px 16px;
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    box-shadow:
        0 4px 12px -6px rgba(10, 70, 60, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.42);
}

body[data-theme="stories"] .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

body[data-theme="stories"] .step-btn {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-radius: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    box-shadow:
        0 10px 22px -10px rgba(10, 70, 60, 0.4),
        inset 0 1px rgba(255, 255, 255, 0.42);
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s, color 0.18s;
}

body[data-theme="stories"] .step-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.34);
    box-shadow:
        0 12px 24px -10px rgba(10, 70, 60, 0.5),
        inset 0 1px rgba(255, 255, 255, 0.5);
}

body[data-theme="stories"] .step-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.42);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.14);
}

/* 设置面板 — 配合青绿桌布 */
body[data-theme="stories"] .settings-panel {
    background: rgba(20, 60, 55, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body[data-theme="stories"] .settings-overlay {
    background: rgba(8, 36, 32, 0.94);
}

/* 强制覆盖响应式 */
body[data-theme="stories"] .score-card {
    aspect-ratio: 351 / 528 !important;
    width: min(24vw, 50vh) !important;
    height: auto !important;
    max-width: 320px;
    max-height: calc(100vh - 140px);
}

@media (max-width: 480px) {
    body[data-theme="stories"] .score-card {
        width: min(36vw, 40vh) !important;
    }

    body[data-theme="stories"] .step-btn {
        min-width: 56px;
        height: 46px;
        padding: 0 12px;
        font-size: 17px;
    }

    body[data-theme="stories"] .win-btn {
        min-width: 56px;
        height: 46px;
        padding: 0 12px;
    }

    body[data-theme="stories"] .score-display {
        gap: 8vw;
    }
}

@media (orientation: landscape) {
    body[data-theme="stories"] .score-card {
        width: min(24vw, 56vh) !important;
    }
}

/* =============================================================
   深空 (Nebula) 主题 — 紫色星海 · 玻璃质感发光卡片
   ============================================================= */

body[data-theme="nebula"] {
    --nebula-spade: #c4b8ff;
    --nebula-heart: #ffc1d6;
    --nebula-card-left-top: rgba(86, 70, 180, 0.55);
    --nebula-card-left-bottom: rgba(30, 20, 78, 0.85);
    --nebula-card-right-top: rgba(190, 50, 96, 0.55);
    --nebula-card-right-bottom: rgba(95, 18, 50, 0.88);
    --nebula-card-border: rgba(255, 255, 255, 0.16);
    --nebula-ink: #ffffff;
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    background: transparent;
    color: #f1ecff;
}

html[data-theme="nebula"] {
    background-color: #0a0820;
    background-image:
        radial-gradient(ellipse 80% 60% at 75% 18%, rgba(120, 70, 200, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 18% 78%, rgba(180, 50, 120, 0.42) 0%, transparent 60%),
        radial-gradient(ellipse 120% 90% at 50% 50%, rgba(40, 22, 90, 0.85) 0%, #050316 80%);
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* 深空主题：启用星空 canvas */
body[data-theme="nebula"] #nebula-canvas {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 深空主题：不再使用颗粒覆盖层，让背景纯净干净，星点交给 canvas */

body[data-theme="nebula"] .container,
body[data-theme="nebula"] .toolbar,
body[data-theme="nebula"] #idle-overlay,
body[data-theme="nebula"] .floating-btn {
    z-index: 2;
}

body[data-theme="nebula"] .scoreboard {
    background: transparent;
}

body[data-theme="nebula"] .static-face,
body[data-theme="nebula"] .flip-face,
body[data-theme="nebula"] .card-shadow,
body[data-theme="nebula"] .poker-card-display,
body[data-theme="nebula"] .story-card-display {
    display: none !important;
}

body[data-theme="nebula"] .triangle-container {
    display: none;
}

body[data-theme="nebula"] .score-display {
    gap: clamp(48px, 12vw, 180px);
    padding: 64px 24px 80px;
}

body[data-theme="nebula"] .score-section {
    gap: clamp(22px, 5vh, 48px);
}

body[data-theme="nebula"] .score-card {
    aspect-ratio: 351 / 440;
    width: min(26vw, 50vh);
    height: auto;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
}

/* 卡片本体 — 玻璃毛色质感 + 内发光 + 深色阴影 */
.nebula-card-display {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 25;
    border-radius: clamp(18px, 6%, 34px);
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--nebula-card-border);
    box-shadow:
        0 30px 60px -20px rgba(2, 0, 20, 0.7),
        0 14px 30px -12px rgba(40, 12, 80, 0.55),
        0 2px 6px -2px rgba(0, 0, 0, 0.35),
        inset 0 1px rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body[data-theme="nebula"] .nebula-card-display {
    display: block;
}

#left-nebula-card {
    background:
        radial-gradient(120% 90% at 50% 0%, var(--nebula-card-left-top) 0%, transparent 70%),
        linear-gradient(165deg, rgba(70, 56, 160, 0.65) 0%, var(--nebula-card-left-bottom) 100%);
}

#right-nebula-card {
    background:
        radial-gradient(120% 90% at 50% 0%, var(--nebula-card-right-top) 0%, transparent 70%),
        linear-gradient(165deg, rgba(170, 40, 90, 0.6) 0%, var(--nebula-card-right-bottom) 100%);
}

/* 大数字 — 居中、偏上，强调主数值（DIN 字体，更具个性） */
.nebula-rank {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DIN', 'Inter', 'SF Pro Display', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--nebula-ink);
    font-size: clamp(72px, 22vmin, 200px);
    text-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(255, 255, 255, 0.12);
    z-index: 3;
    pointer-events: none;
    transform: translateY(-6%);
    transform-origin: center;
    transition: transform 0.2s;
}

/* A1/A2/A3：A 后紧跟一个小上标（与字体同款 DIN），无背景胶囊 */
.nebula-rank .rank-tier {
    font-family: inherit;
    font-size: 0.38em;
    font-weight: 700;
    vertical-align: super;
    margin-left: 0.04em;
    opacity: 0.9;
    letter-spacing: 0;
}

.nebula-rank.pop {
    animation: nebulaRankPop 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

@keyframes nebulaRankPop {
    0%   { transform: translateY(-6%) scale(1); }
    45%  { transform: translateY(-6%) scale(1.25); }
    70%  { transform: translateY(-6%) scale(0.95); }
    100% { transform: translateY(-6%) scale(1); }
}

/* 角落 / 中间 pip — 半透明亮紫 / 亮粉 */
.nebula-corner {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
}

.nebula-corner-tl {
    top: 6.5%;
    left: 7.5%;
}

.nebula-corner-br {
    bottom: 6.5%;
    right: 7.5%;
    transform: rotate(180deg);
}

.nebula-pip-small {
    width: clamp(20px, 5.6vmin, 40px);
    height: clamp(20px, 5.6vmin, 40px);
    overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#left-nebula-card .nebula-pip-small {
    color: var(--nebula-spade);
}

#right-nebula-card .nebula-pip-small {
    color: var(--nebula-heart);
}

/* 深空主题：A1/A2/A3 用 A + 上标显示在大数字旁，不再使用右上角徽章 */
.nebula-tier-badge {
    display: none !important;
}

/* 入场动画 */
body[data-theme="nebula"] .score-card.dealing .nebula-card-display {
    animation: nebulaPop 0.55s cubic-bezier(0.34, 1.7, 0.5, 1) forwards;
}

@keyframes nebulaPop {
    0%   { transform: scale(0.82) translateY(8%); opacity: 0; }
    55%  { transform: scale(1.04) translateY(-1.5%); opacity: 1; }
    80%  { transform: scale(0.985) translateY(0.5%); }
    100% { transform: scale(1); opacity: 1; }
}

/* 工具栏 / 步进按钮 / 设置面板 — 深空玻璃风 */
body[data-theme="nebula"] .toolbar-btn {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: 1px solid rgba(190, 170, 255, 0.22);
    padding: 9px 16px;
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    box-shadow:
        0 6px 18px -8px rgba(60, 30, 130, 0.55),
        inset 0 1px rgba(255, 255, 255, 0.18);
}

body[data-theme="nebula"] .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

body[data-theme="nebula"] .step-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(190, 170, 255, 0.28);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-radius: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    box-shadow:
        0 10px 24px -10px rgba(60, 30, 130, 0.6),
        inset 0 1px rgba(255, 255, 255, 0.22);
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s, color 0.18s;
}

body[data-theme="nebula"] .step-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 12px 26px -10px rgba(80, 40, 160, 0.7),
        inset 0 1px rgba(255, 255, 255, 0.3);
}

body[data-theme="nebula"] .step-btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

body[data-theme="nebula"] .score-banner {
    background: rgba(20, 12, 50, 0.55);
    border: 1px solid rgba(190, 170, 255, 0.25);
    color: #f1ecff;
    box-shadow:
        0 8px 20px rgba(10, 4, 30, 0.45),
        inset 0 1px rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

body[data-theme="nebula"] .floating-btn {
    background: rgba(20, 12, 50, 0.55);
    border: 1px solid rgba(190, 170, 255, 0.28);
    color: #f1ecff;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 8px 22px rgba(10, 4, 30, 0.5),
        inset 0 1px rgba(255, 255, 255, 0.18);
}

body[data-theme="nebula"] .floating-btn:hover {
    background: rgba(40, 25, 90, 0.7);
}

body[data-theme="nebula"] .settings-panel {
    background: rgba(20, 14, 50, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(190, 170, 255, 0.2);
}

body[data-theme="nebula"] .settings-overlay {
    background: rgba(6, 4, 24, 0.94);
}

/* 强制覆盖响应式 */
body[data-theme="nebula"] .score-card {
    aspect-ratio: 351 / 440 !important;
    width: min(26vw, 50vh) !important;
    height: auto !important;
    max-width: 340px;
    max-height: calc(100vh - 140px);
}

@media (max-width: 480px) {
    body[data-theme="nebula"] .score-card {
        width: min(38vw, 40vh) !important;
    }

    body[data-theme="nebula"] .step-btn {
        min-width: 56px;
        height: 46px;
        padding: 0 12px;
        font-size: 17px;
    }

    body[data-theme="nebula"] .score-display {
        gap: 8vw;
    }
}

@media (orientation: landscape) {
    body[data-theme="nebula"] .score-card {
        width: min(26vw, 56vh) !important;
    }
}

/* =============================================================
   深空主题专属屏保 — 小火箭巡航星海
   ============================================================= */

#nebula-idle {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: none;
    overflow: hidden;
    cursor: pointer;
    background:
        radial-gradient(ellipse 90% 70% at 50% 45%, rgba(8, 5, 26, 0.25) 0%, rgba(6, 4, 22, 0.62) 100%);
    -webkit-tap-highlight-color: transparent;
}

#nebula-idle.active {
    display: block;
    animation: nebulaIdleIn 0.6s ease-out;
}

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

/* 自动消失时的淡出（放在 .active 之后以覆盖其 animation） */
#nebula-idle.active.leaving {
    animation: nebulaIdleOut 0.6s ease-in forwards;
}

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

/* stage：负责整体翻转方向 + 垂直随机偏移（由 JS 设置 transform） */
.rocket-stage {
    position: absolute;
    inset: 0;
    transform-origin: center;
    will-change: transform;
}

/* orbit：负责沿对角线巡航 */
.rocket-orbit {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(70px, 13vmin, 130px);
    height: clamp(70px, 13vmin, 130px);
    animation: rocketCruise 7s linear infinite;
    will-change: transform;
}

@keyframes rocketCruise {
    0%   { transform: translate(-26vw, 86vh); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translate(46vw, 30vh); opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(122vw, -16vh); opacity: 0; }
}

/* rocket：机头朝右上 + 轻微俏皮摆动 */
.rocket {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(46deg);
    animation: rocketWobble 1.6s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes rocketWobble {
    0%, 100% { transform: rotate(43deg); }
    50%      { transform: rotate(49deg); }
}

.rocket-body {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
    z-index: 2;
}

/* 尾焰闪烁 */
.rocket-flame {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: rocketFlame 0.18s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.8));
}

@keyframes rocketFlame {
    0%   { transform: scaleY(0.78) scaleX(1.05); opacity: 0.85; }
    100% { transform: scaleY(1.12) scaleX(0.92); opacity: 1; }
}

/* 拖尾光带（机尾朝下，渐隐） */
.rocket-trail {
    position: absolute;
    left: 50%;
    top: 64%;
    width: clamp(5px, 1vmin, 9px);
    height: clamp(120px, 26vmin, 260px);
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        rgba(255, 210, 120, 0.55) 0%,
        rgba(180, 130, 255, 0.35) 35%,
        rgba(120, 90, 255, 0) 100%);
    border-radius: 50%;
    filter: blur(3px);
    z-index: 1;
    animation: rocketTrail 0.4s ease-in-out infinite alternate;
}

@keyframes rocketTrail {
    0%   { opacity: 0.45; height: clamp(110px, 24vmin, 230px); }
    100% { opacity: 0.75; height: clamp(130px, 28vmin, 280px); }
}

.nebula-idle-hint {
    position: absolute;
    left: 50%;
    bottom: max(40px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(220, 210, 255, 0.5);
    animation: idleHintPulse 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes idleHintPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .rocket { animation: none; }
    .rocket-flame { animation: none; }
    .rocket-trail { animation: none; }
}

/* ===== 新局洗牌动画：A~K 扑克牌组成 3D 龙卷风旋转（正反面交替可见，所有主题通用）===== */
#shuffle-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: none;
    overflow: hidden;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    /* 中心略亮、四周压暗，聚焦龙卷风并盖住旧牌 */
    background: radial-gradient(circle at 50% 50%, rgba(8, 8, 14, 0.42) 0%, rgba(4, 4, 8, 0.72) 70%);
    opacity: 0;
}

#shuffle-overlay.active {
    display: flex;
    animation: tornadoOverlay var(--shuffle-dur, 1.8s) ease-in-out forwards;
}

@keyframes tornadoOverlay {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; }
}

/* 透视舞台 */
.tornado-stage {
    position: relative;
    width: 1px;
    height: 1px;
    perspective: 1200px;
    perspective-origin: 50% 42%;
}

/* 生命周期层：负责整体淡入淡出 / 缩放 / 被卷向上消失（不含旋转）*/
.tornado-life {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    animation: tornadoLife var(--shuffle-dur, 1.8s) cubic-bezier(0.3, 0.1, 0.2, 1) forwards;
}

@keyframes tornadoLife {
    0%   { opacity: 0; transform: translateY(60px) scale(0.45); }
    16%  { opacity: 1; transform: translateY(0) scale(1); }
    80%  { opacity: 1; transform: translateY(-14px) scale(1.05); }
    100% { opacity: 0; transform: translateY(-160px) scale(0.7); }
}

/* 旋转层：持续绕中轴自转（龙卷风核心）*/
.tornado-spin {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    animation: tornadoSpin var(--spin-dur, 1.05s) linear infinite;
}

@keyframes tornadoSpin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

/* 每张牌：由 JS 设置 --pose 决定其在龙卷风柱上的位置/朝向 */
.tornado-card {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(68px, 11.5vmin, 116px);
    height: clamp(96px, 16.1vmin, 162px);
    margin-left: calc(-0.5 * clamp(68px, 11.5vmin, 116px));
    margin-top: calc(-0.5 * clamp(96px, 16.1vmin, 162px));
    transform-style: preserve-3d;
    transform: var(--pose);
    will-change: transform;
}

/* 牌的正反两面：背对镜头的一面自动隐藏，旋转时自然露出正面或背面 */
.tcard-face {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* 正面：白底扑克牌，角标 + 中心大花色 */
.tcard-front {
    background: linear-gradient(160deg, #ffffff 0%, #f1f2f6 100%);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1b1b1f;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 动画牌正面：复用故事卡牌面（真实点数排布 / A 大花色 / JQK 插画）*/
.tcard-front.deck-card {
    display: block;
    color: var(--suit-color, #1d1d28);
    background: radial-gradient(130% 95% at 50% 0%, #ffffff 0%, #f4f6f8 100%);
    container-type: inline-size;
}

.deck-card .dc-corner {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.9;
    gap: 3cqw;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    font-weight: 700;
    color: var(--suit-color, #1d1d28);
}

.deck-card .dc-tl { top: 6cqw; left: 7cqw; }

.deck-card .dc-br {
    bottom: 6cqw;
    right: 7cqw;
    transform: rotate(180deg);
}

.deck-card .dc-rank {
    font-size: 15cqw;
    letter-spacing: -0.06em;
}

.deck-card .dc-mini {
    width: 11cqw;
    height: 11cqw;
    flex: none;
    display: block;
}

.deck-card .dc-grid {
    position: absolute;
    inset: 0;
}

.deck-card .dc-pip {
    position: absolute;
    width: 15%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
}

.deck-card .dc-pip.flipped {
    transform: translate(-50%, -50%) rotate(180deg);
}

.deck-card .dc-pip svg,
.deck-card .dc-center svg {
    width: 100%;
    height: 100%;
    display: block;
}

.deck-card .dc-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-card .dc-center svg {
    width: 32%;
    height: auto;
}

.deck-card .dc-face {
    position: absolute;
    inset: 14% 12%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
}

/* 背面：红/蓝牌背花纹（rotateY 180 使其朝牌的另一侧）*/
.tcard-back {
    transform: rotateY(180deg);
    border: 2px solid rgba(255, 255, 255, 0.9);
    background-color: #b3243a;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 5px, transparent 5px 11px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.18) 0 5px, transparent 5px 11px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.16));
}

.tcard-back.blue {
    background-color: #2552c0;
}

/* ----- 环形轮盘洗牌：扑克牌组成多个同心圈，相邻圈顺/逆交替旋转 ----- */
.rings-root {
    position: absolute;
    left: 0;
    top: 0;
}

.shuffle-ring {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    animation: ringSpin var(--ring-dur, 2s) linear infinite;
}

.shuffle-ring.ccw {
    animation-name: ringSpinRev;
}

@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ringSpinRev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

.ring-card {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(56px, 9.4vmin, 96px);
    height: clamp(80px, 13.2vmin, 134px);
    margin-left: calc(-0.5 * clamp(56px, 9.4vmin, 96px));
    margin-top: calc(-0.5 * clamp(80px, 13.2vmin, 134px));
    transform: var(--pose);
}

/* ----- 叠牌洗牌（Riffle / Bridge）：左右两叠交替起拱、交错落入中央成叠 ----- */
.riffle-root {
    position: absolute;
    left: 0;
    top: 0;
    /* 牌较大，整体下移避免起拱时上半部被截断 */
    transform: translateY(11vh);
    transform-style: preserve-3d;
}

.riffle-card {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(150px, 30vmin, 330px);
    height: clamp(210px, 42vmin, 462px);
    margin-left: calc(-0.5 * clamp(150px, 30vmin, 330px));
    margin-top: calc(-0.5 * clamp(210px, 42vmin, 462px));
    transform-style: preserve-3d;
    will-change: transform, opacity;
    animation: riffleFly 0.82s cubic-bezier(0.25, 0.9, 0.25, 1) both;
}

/* 叠层厚度用「真实几何面 + 硬边分隔线」表现，而非模糊渐变：
   每张牌为不透明白底，左/下各有一条 0 模糊的硬边深线，
   配合落定时的均匀错位，左侧与底部就呈现一条条清晰的牌缝（像真实一摞牌的侧面）。 */
.riffle-card .tcard-face {
    background: #ffffff;
    border-radius: clamp(14px, 4.5%, 26px);
    border: 0.5px solid rgba(16, 18, 30, 0.28);
    box-shadow:
        -1px 0 0 0 rgba(16, 18, 30, 0.32),   /* 左侧硬边分隔线 */
        0 1px 0 0 rgba(16, 18, 30, 0.32),    /* 底部硬边分隔线 */
        -1px 1px 0 0 rgba(16, 18, 30, 0.30); /* 左下角衔接 */
}

/* 仅最顶上的那张牌带一层接触阴影，给整摞牌一个落桌的体积感（不参与叠层厚度本身） */
.riffle-card:last-child .tcard-face {
    box-shadow:
        -1px 0 0 0 rgba(16, 18, 30, 0.32),
        0 1px 0 0 rgba(16, 18, 30, 0.32),
        14px 20px 26px -14px rgba(4, 6, 18, 0.6);
}

@keyframes riffleFly {
    0%   { opacity: 1; transform: translate3d(var(--fx), var(--sy), 0) rotateZ(var(--rot)); }
    9%   { opacity: 1; transform: translate3d(var(--fx), var(--sy), 0) rotateZ(var(--rot)); }
    48%  { transform: translate3d(calc(var(--fx) * 0.46), -150px, 80px) rotateZ(calc(var(--rot) * 0.45)); }
    74%  { opacity: 1; transform: translate3d(var(--lx), var(--ly), 0) rotateZ(0deg); }
    100% { opacity: 1; transform: translate3d(var(--lx), var(--ly), 0) rotateZ(0deg); }
}

/* 洗牌期间隐藏当前两张牌，结束移除类后借 .score-card 的 opacity 过渡淡入 */
body.shuffling .score-card {
    opacity: 0 !important;
}

/* 洗完牌后「发牌」：两张比分牌从中央牌堆旋转、放大落位（霓夜主题） */
body[data-theme="neon"] .score-card.deal-in {
    --deal-y: 15vh;
    animation: neonDealCard 0.66s cubic-bezier(0.16, 0.72, 0.2, 1) both;
}
body[data-theme="neon"] #left-card.deal-in  { --deal-x: 27vw;  --deal-rot: -170deg; }
body[data-theme="neon"] #right-card.deal-in { --deal-x: -27vw; --deal-rot: 170deg; animation-delay: 0.16s; }

@keyframes neonDealCard {
    0%   { opacity: 0; transform: translate(var(--deal-x), var(--deal-y)) rotate(var(--deal-rot)) scale(0.14); }
    20%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #shuffle-overlay { display: none !important; }
}

/* =============================================================
   霓夜 (Neon) 主题 — 在线扑克桌 HUD · 紫色暗场 · 发牌感卡牌
   ============================================================= */

body[data-theme="neon"] {
    --story-spade: #181923;
    --story-heart: #d93658;
    --triangle-color: #b68cff;
    --text-color: #f4f1ff;
    font-family: 'Inter', 'HelveticaNeue-CondensedBold', sans-serif;
    background: transparent;
    color: #f4f1ff;
}

html[data-theme="neon"] {
    background-color: #070815;
    background-image:
        radial-gradient(92% 72% at 50% 0%, rgba(116, 72, 230, 0.56) 0%, rgba(54, 38, 132, 0.3) 38%, transparent 64%),
        radial-gradient(120% 86% at 50% 72%, rgba(26, 23, 58, 0.95) 0%, rgba(9, 8, 26, 0.98) 56%, #050610 100%),
        linear-gradient(180deg, #0d101d 0%, #09091c 48%, #050510 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* 牌桌上沿：大半圆桌面 + 紫色边光，接近参考图的在线扑克桌视角。 */
body[data-theme="neon"]::before {
    content: '';
    position: fixed;
    left: 50%;
    top: 19vh;
    width: min(1280px, 124vw);
    height: min(760px, 82vh);
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0 / 38% 38% 0 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(164, 114, 255, 0.42), rgba(164, 114, 255, 0.06) 2px, transparent 11px),
        radial-gradient(80% 60% at 50% 8%, rgba(116, 76, 238, 0.35) 0%, rgba(30, 24, 66, 0.55) 48%, rgba(8, 8, 22, 0.12) 78%, transparent 100%);
    border-top: 2px solid rgba(178, 132, 255, 0.38);
    box-shadow:
        0 -18px 60px rgba(126, 80, 255, 0.28),
        inset 0 22px 60px rgba(186, 142, 255, 0.14),
        inset 0 -110px 170px rgba(2, 3, 12, 0.74);
    opacity: 0.92;
}

/* 暗角 + 顶部聚光 + 桌布颗粒，全部不参与交互。 */
body[data-theme="neon"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(52% 34% at 50% 0%, rgba(190, 145, 255, 0.35) 0%, transparent 70%),
        radial-gradient(120% 85% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.56) 100%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 8px);
    opacity: 1;
}

body[data-theme="neon"] .container,
body[data-theme="neon"] .toolbar,
body[data-theme="neon"] #idle-overlay,
body[data-theme="neon"] .floating-btn,
body[data-theme="neon"] .score-banner {
    z-index: 2;
}

body[data-theme="neon"] .scoreboard {
    background: transparent;
}

body[data-theme="neon"] .static-face,
body[data-theme="neon"] .flip-face,
body[data-theme="neon"] .card-shadow,
body[data-theme="neon"] .poker-card-display,
body[data-theme="neon"] .nebula-card-display {
    display: none !important;
}

body[data-theme="neon"] .story-card-display {
    display: block;
}

body[data-theme="neon"] .triangle-container {
    display: none;
}

body[data-theme="neon"] .score-display {
    align-items: center;
    gap: clamp(70px, 14vw, 220px);
    padding: clamp(92px, 16vh, 150px) 32px clamp(82px, 13vh, 120px);
    perspective: 1100px;
}

/* 中央幽灵牌位，给主题一个真实牌桌上的“公共牌区域”语义，但不参与任何操作。 */
body[data-theme="neon"] .score-display::before {
    content: '';
    position: absolute;
    left: 50%;
    top: clamp(84px, 21vh, 150px);
    width: clamp(210px, 32vw, 410px);
    height: clamp(72px, 13vh, 118px);
    transform: translateX(-50%) rotateX(58deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.12) 0 18%,
            transparent 18% 22%,
            rgba(255, 255, 255, 0.12) 22% 40%,
            transparent 40% 44%,
            rgba(255, 255, 255, 0.12) 44% 62%,
            transparent 62% 66%,
            rgba(255, 255, 255, 0.09) 66% 84%,
            transparent 84% 88%,
            rgba(255, 255, 255, 0.07) 88% 100%);
    border-radius: 18px;
    opacity: 0.22;
    filter: blur(0.2px);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

body[data-theme="neon"] .score-display::after {
    content: '';
    position: absolute;
    left: 50%;
    top: clamp(122px, 29vh, 230px);
    width: min(720px, 64vw);
    height: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(183, 135, 255, 0.36), transparent);
    box-shadow: 0 0 28px rgba(150, 95, 255, 0.28);
}

body[data-theme="neon"] .score-section {
    justify-content: center;
    gap: clamp(24px, 4vh, 42px);
}

body[data-theme="neon"] .score-card {
    aspect-ratio: 351 / 528;
    width: min(20vw, 42vh);
    height: auto;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform-style: preserve-3d;
}

body[data-theme="neon"] #left-card {
    transform: translateY(-2vh) rotateZ(-6deg) rotateX(6deg);
}

body[data-theme="neon"] #right-card {
    transform: translateY(1vh) rotateZ(5deg) rotateX(6deg);
}

/* 白卡本体：更窄、更轻、更像发在桌面上的实体牌。 */
body[data-theme="neon"] .story-card-display {
    border-radius: clamp(12px, 5.5%, 24px);
    background:
        radial-gradient(90% 54% at 44% 0%, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 254, 0.82) 48%, transparent 100%),
        linear-gradient(150deg, #ffffff 0%, #f1f2fa 58%, #e3e5f1 100%);
    box-shadow:
        0 34px 42px -28px rgba(0, 0, 0, 0.74),
        0 16px 32px -22px rgba(104, 70, 220, 0.74),
        0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 0 1px rgba(255, 255, 255, 0.96),
        inset 0 -10px 24px rgba(37, 32, 74, 0.08);
    filter: drop-shadow(0 0 18px rgba(124, 90, 255, 0.18));
}

body[data-theme="neon"] .story-card-display::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.5) 0%, transparent 26%, transparent 68%, rgba(42, 34, 80, 0.08) 100%);
}

body[data-theme="neon"] .story-rank {
    font-size: clamp(15px, 4vmin, 34px);
    font-weight: 800;
}

body[data-theme="neon"] .story-pip-small {
    width: clamp(8px, 1.8vmin, 15px);
    height: clamp(8px, 1.8vmin, 15px);
}

body[data-theme="neon"] .story-pip-grid {
    inset: 15% 18%;
}

body[data-theme="neon"] .story-pip-cell {
    width: 28%;
}

body[data-theme="neon"] .story-center-pip svg {
    width: 54%;
}

body[data-theme="neon"] .story-face {
    inset: 13% 12%;
    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.14))
        saturate(1.08);
}

body[data-theme="neon"] .story-tier-badge {
    top: 3%;
    right: 5%;
    width: clamp(28px, 15%, 48px);
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #343446 0%, #171823 100%);
    color: #ffffff;
    box-shadow:
        0 6px 14px -5px rgba(0, 0, 0, 0.62),
        inset 0 1px rgba(255, 255, 255, 0.28);
}

body[data-theme="neon"] #right-story-card .story-tier-badge {
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #e54b72 0%, #9f173d 100%);
}

body[data-theme="neon"] .score-card.dealing .story-card-display {
    animation: nebulaPop 0.55s cubic-bezier(0.34, 1.7, 0.5, 1) forwards;
}

@keyframes neonDeal {
    0%   { opacity: 0.45; transform: translateY(-10%) translateX(9%) rotate(-10deg) scale(0.92); }
    68%  { opacity: 1; transform: translateY(1%) translateX(-1%) rotate(2deg) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) translateX(0) rotate(0) scale(1); }
}

/* 底部动作区：更接近扑克游戏的操作栏，而不是传统大按钮。 */
body[data-theme="neon"] .step-controls {
    gap: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(4, 5, 14, 0.22);
    border: 1px solid rgba(176, 146, 255, 0.1);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
}

body[data-theme="neon"] .step-btn {
    min-width: 58px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(10, 12, 28, 0.74);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(174, 150, 255, 0.28);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow:
        0 10px 22px -14px rgba(0, 0, 0, 0.74),
        inset 0 1px rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px) saturate(170%);
    -webkit-backdrop-filter: blur(12px) saturate(170%);
}

body[data-theme="neon"] .step-btn[data-step="1"] {
    color: #ffffff;
}

body[data-theme="neon"] .step-btn[data-step="2"] {
    color: #bff7de;
}

body[data-theme="neon"] .step-btn[data-step="3"] {
    color: #cdbbff;
}

body[data-theme="neon"] .step-btn:hover:not(:disabled) {
    background: rgba(40, 30, 88, 0.86);
    border-color: rgba(190, 160, 255, 0.48);
    box-shadow:
        0 12px 26px -14px rgba(88, 55, 220, 0.75),
        inset 0 1px rgba(255, 255, 255, 0.22);
}

body[data-theme="neon"] .step-btn:disabled {
    background: rgba(9, 10, 22, 0.42);
    color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

body[data-theme="neon"] .win-btn {
    min-width: 50px;
    height: 38px;
    padding: 0 10px;
    border: none;
    border-radius: 999px;
    background: rgba(10, 12, 28, 0.58);
    color: inherit;
    box-shadow: none;
}

body[data-theme="neon"] .win-btn:active:not(:disabled) {
    transform: scale(0.9);
}

body[data-theme="neon"] .win-icon-default {
    display: none;
}

body[data-theme="neon"] .win-icon-flat {
    display: block;
    width: 38px;
    height: 38px;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 8px rgba(246, 195, 62, 0.38));
}

/* 底部撤销/新局：小型 HUD 胶囊。 */
body[data-theme="neon"] .toolbar {
    bottom: max(13px, env(safe-area-inset-bottom));
    gap: 8px;
}

body[data-theme="neon"] .toolbar-btn {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 9, 22, 0.58);
    color: rgba(255, 255, 255, 0.84);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(170, 142, 255, 0.24);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    box-shadow:
        0 10px 24px -14px rgba(0, 0, 0, 0.7),
        inset 0 1px rgba(255, 255, 255, 0.12);
}

body[data-theme="neon"] .toolbar-btn:hover {
    background: rgba(35, 26, 78, 0.74);
}

body[data-theme="neon"] .score-banner {
    top: max(11px, env(safe-area-inset-top));
    padding: 7px 13px;
    gap: 10px;
    background: rgba(5, 6, 16, 0.68);
    border: 1px solid rgba(180, 150, 255, 0.22);
    color: #f5f2ff;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.38),
        0 0 26px rgba(126, 80, 255, 0.22),
        inset 0 1px rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

body[data-theme="neon"] .player-name {
    font-size: 12px;
    font-weight: 800;
}

body[data-theme="neon"] .wins-display {
    padding: 0 9px;
    gap: 7px;
    border-left-color: rgba(255, 255, 255, 0.16);
    border-right-color: rgba(255, 255, 255, 0.16);
}

body[data-theme="neon"] .wins-num {
    font-size: 15px;
    min-width: 16px;
}

body[data-theme="neon"] .floating-btn {
    width: 39px;
    height: 39px;
    top: max(13px, env(safe-area-inset-top));
    right: max(13px, env(safe-area-inset-right));
    border-radius: 13px;
    background: rgba(8, 9, 22, 0.58);
    border: 1px solid rgba(180, 150, 255, 0.28);
    color: #f4f1ff;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        inset 0 1px rgba(255, 255, 255, 0.14);
}

body[data-theme="neon"] .floating-btn svg {
    width: 20px;
    height: 20px;
}

body[data-theme="neon"] .floating-btn:hover {
    background: rgba(40, 30, 88, 0.76);
}

body[data-theme="neon"] .settings-panel,
body[data-theme="neon"] .history-card {
    background: rgba(10, 10, 28, 0.95);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(180, 150, 255, 0.22);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.58),
        inset 0 1px rgba(255, 255, 255, 0.12);
}

body[data-theme="neon"] .settings-overlay,
body[data-theme="neon"] .history-overlay {
    background: rgba(3, 4, 13, 0.86);
}

body[data-theme="neon"] .toggle-switch input:checked + .toggle-slider {
    background: #9d76ff;
}

body[data-theme="neon"] .setting-option.active {
    border-color: #b891ff;
    background: rgba(157, 118, 255, 0.18);
}

body[data-theme="neon"] .score-card {
    aspect-ratio: 351 / 528 !important;
    width: min(20vw, 42vh) !important;
    height: auto !important;
    max-width: 250px;
    max-height: calc(100vh - 180px);
}

@media (orientation: landscape) {
    body[data-theme="neon"] .score-card {
        width: min(20vw, 48vh) !important;
    }

    body[data-theme="neon"] .score-display {
        gap: clamp(72px, 12vw, 210px);
        padding: clamp(72px, 13vh, 120px) 32px clamp(58px, 11vh, 96px);
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    body[data-theme="neon"] .score-card {
        width: min(18vw, 46vh) !important;
        max-width: 210px;
    }

    body[data-theme="neon"] .score-display {
        gap: 8vw;
        padding: 46px 18px 48px;
    }

    body[data-theme="neon"] .score-section {
        gap: 12px;
    }

    body[data-theme="neon"] .step-controls {
        gap: 6px;
        padding: 6px;
    }

    body[data-theme="neon"] .step-btn {
        min-width: 46px;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }

    body[data-theme="neon"] .win-btn {
        min-width: 42px;
        height: 34px;
        padding: 0 6px;
    }

    body[data-theme="neon"] .win-icon-flat {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    body[data-theme="neon"] .score-card {
        width: min(34vw, 39vh) !important;
    }

    body[data-theme="neon"] .score-display {
        gap: 9vw;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ===== Neon v2：更接近参考扑克游戏 UI 的覆盖层 ===== */

body[data-theme="neon"] .score-display {
    gap: clamp(90px, 18vw, 280px);
}

body[data-theme="neon"] #left-card,
body[data-theme="neon"] #right-card {
    transform: none;
}

body[data-theme="neon"] .score-card {
    width: min(22vw, 48vh) !important;
    max-width: 290px;
}

/* 卡牌正放，突出点数。 */
body[data-theme="neon"] .story-card-display {
    border-radius: clamp(18px, 9%, 36px);
    background:
        radial-gradient(95% 62% at 38% 0%, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 255, 0.9) 58%, transparent 100%),
        linear-gradient(150deg, #ffffff 0%, #f1f1f9 62%, #e3e4ef 100%);
    box-shadow:
        0 30px 56px -30px rgba(0, 0, 0, 0.88),
        0 10px 30px -22px rgba(130, 95, 255, 0.7),
        inset 0 1px rgba(255, 255, 255, 0.96);
}

/* 只保留：左上大数字+小花色，右下大花色。 */
body[data-theme="neon"] .story-pip-grid,
body[data-theme="neon"] .story-center-pip,
body[data-theme="neon"] .story-face {
    display: none !important;
}

body[data-theme="neon"] .story-corner {
    z-index: 4;
}

body[data-theme="neon"] .story-corner-tl {
    top: 8%;
    left: 10%;
    flex-direction: row;
    align-items: flex-start;
    gap: 7%;
}

body[data-theme="neon"] .story-corner-tl .story-rank {
    font-family: 'Inter', 'DIN', sans-serif;
    font-size: clamp(44px, 12vmin, 92px);
    font-weight: 500;
    line-height: 0.86;
    letter-spacing: -0.08em;
}

body[data-theme="neon"] .story-corner-tl .rank-tier {
    font-size: 0.36em;
    margin-left: 0.05em;
    font-weight: 600;
    letter-spacing: -0.04em;
}

body[data-theme="neon"] .story-corner-tl .story-pip-small {
    width: clamp(18px, 4.6vmin, 34px);
    height: clamp(18px, 4.6vmin, 34px);
    margin-top: 0.06em;
}

body[data-theme="neon"] .story-corner-br {
    right: 11%;
    bottom: 10%;
    transform: none;
}

body[data-theme="neon"] .story-corner-br .story-rank {
    display: none;
}

body[data-theme="neon"] .story-corner-br .story-pip-small {
    width: clamp(74px, 18vmin, 150px);
    height: clamp(74px, 18vmin, 150px);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.12));
}

/* A 的级别角标仍保留，但变成参考图里的小圆徽章。 */
body[data-theme="neon"] .story-tier-badge {
    top: 7%;
    right: 7%;
    width: clamp(26px, 10%, 42px);
    font-size: clamp(14px, 3vmin, 22px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.9), transparent 35%),
        linear-gradient(180deg, #df4b75 0%, #9b173e 100%);
}

body[data-theme="neon"] #left-story-card .story-tier-badge {
    background:
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.9), transparent 35%),
        linear-gradient(180deg, #3a3a4a 0%, #171923 100%);
}

/* 头像式比分 HUD：用 CSS 生成左右头像圆，避免新增交互结构。 */
body[data-theme="neon"] .score-banner {
    gap: 12px;
    padding: 6px 12px;
}

body[data-theme="neon"] .player-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.01em;
}

body[data-theme="neon"] .player-name::before {
    content: '';
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: none;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.35);
}

body[data-theme="neon"] .wins-num {
    font-family: 'DIN', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* 文字动作按钮：视觉是 Fold / Raise / Check，功能仍由 data-step 控制。 */
body[data-theme="neon"] .step-controls {
    gap: clamp(18px, 3.4vw, 54px);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="neon"] .step-btn {
    position: relative;
    min-width: 0;
    width: auto;
    height: 38px;
    padding: 0 0 0 30px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: transparent;
    font-size: 0;
    overflow: visible;
}

body[data-theme="neon"] .step-btn::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

body[data-theme="neon"] .step-btn::after {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(18px, 3.8vmin, 30px);
    font-weight: 500;
    line-height: 38px;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

body[data-theme="neon"] .step-btn[data-step="1"]::before {
    content: '▣';
    color: #ef3d69;
}

body[data-theme="neon"] .step-btn[data-step="1"]::after {
    content: 'Fold';
    color: #ef3d69;
}

body[data-theme="neon"] .step-btn[data-step="2"]::before {
    content: '♣';
    color: #37d896;
}

body[data-theme="neon"] .step-btn[data-step="2"]::after {
    content: 'Raise';
    color: #37d896;
}

body[data-theme="neon"] .step-btn[data-step="3"]::before {
    content: '↔';
    color: #ffffff;
}

body[data-theme="neon"] .step-btn[data-step="3"]::after {
    content: 'Check';
    color: #ffffff;
}

body[data-theme="neon"] .step-btn:disabled {
    opacity: 0.32;
    background: transparent;
    border: none;
    box-shadow: none;
}

body[data-theme="neon"] .step-btn:hover:not(:disabled) {
    background: transparent;
    border: none;
    box-shadow: none;
    filter: brightness(1.18);
}

body[data-theme="neon"] .step-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.98);
}

body[data-theme="neon"] .win-btn {
    min-width: 42px;
    width: 42px;
    height: 38px;
    padding: 0;
    background: transparent;
}

body[data-theme="neon"] .win-icon-flat {
    width: 34px;
    height: 34px;
}

/* 新局按钮：参考 “Your Turn” 的外圈进度胶囊。 */
body[data-theme="neon"] .reset-btn {
    position: relative;
    padding: 10px 22px;
    border: 0;
    color: #ffffff;
    background:
        linear-gradient(#0b0d17, #0b0d17) padding-box,
        conic-gradient(from -95deg, #f3f033 0 28%, rgba(90, 96, 112, 0.55) 28% 100%) border-box;
    border: 3px solid transparent;
    border-radius: 999px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.38),
        inset 0 1px rgba(255, 255, 255, 0.12);
}

body[data-theme="neon"] .reset-btn span {
    font-weight: 700;
}

body[data-theme="neon"] .undo-btn {
    background: rgba(9, 11, 20, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (orientation: landscape) {
    body[data-theme="neon"] .score-card {
        width: min(22vw, 54vh) !important;
        max-width: 330px;
    }

    body[data-theme="neon"] .score-display {
        padding: clamp(84px, 13vh, 132px) 36px clamp(58px, 10vh, 94px);
        gap: clamp(110px, 18vw, 300px);
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    body[data-theme="neon"] .score-card {
        width: min(18vw, 52vh) !important;
        max-width: 250px;
    }

    body[data-theme="neon"] .step-controls {
        gap: clamp(14px, 2.8vw, 34px);
    }

    body[data-theme="neon"] .step-btn {
        height: 32px;
        padding-left: 24px;
    }

    body[data-theme="neon"] .step-btn::before {
        width: 18px;
        height: 18px;
        font-size: 15px;
    }

    body[data-theme="neon"] .step-btn::after {
        font-size: clamp(14px, 3.6vmin, 22px);
        line-height: 32px;
    }

    body[data-theme="neon"] .win-btn {
        height: 32px;
        width: 34px;
    }

    body[data-theme="neon"] .win-icon-flat {
        width: 28px;
        height: 28px;
    }
}

/* ===== Neon v3：保留游戏感，但回到本应用的 +1/+2/+3 语义 ===== */

body[data-theme="neon"] .score-card {
    width: min(19vw, 45vh) !important;
    max-width: 270px;
}

body[data-theme="neon"] .story-card-display {
    border-radius: clamp(24px, 11%, 46px);
    clip-path: inset(0 round clamp(24px, 11%, 46px));
    overflow: hidden;
    background:
        radial-gradient(78% 48% at 46% 0%, rgba(255, 255, 255, 1) 0%, rgba(251, 251, 255, 0.92) 58%, transparent 100%),
        linear-gradient(145deg, #ffffff 0%, #f4f4fa 62%, #e7e8f2 100%);
    box-shadow:
        0 28px 52px -31px rgba(0, 0, 0, 0.9),
        0 8px 28px -23px rgba(130, 95, 255, 0.62),
        inset 0 1px rgba(255, 255, 255, 0.98),
        inset 0 -14px 28px rgba(25, 27, 50, 0.055);
}

body[data-theme="neon"] .story-card-display::after {
    border-radius: clamp(24px, 11%, 46px);
}

body[data-theme="neon"] .story-corner-tl .story-rank {
    font-size: clamp(40px, 10.5vmin, 82px);
    font-weight: 520;
}

body[data-theme="neon"] .story-corner-br {
    right: 12%;
    bottom: 11%;
}

body[data-theme="neon"] .story-corner-br .story-pip-small {
    width: clamp(70px, 16vmin, 136px);
    height: clamp(70px, 16vmin, 136px);
}

/* 纯头像比分栏：隐藏文字，只保留左右头像和中间比分。 */
body[data-theme="neon"] .score-banner {
    padding: 8px 18px;
    gap: 18px;
    border-radius: 999px;
}

body[data-theme="neon"] .player-name {
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

body[data-theme="neon"] .player-name::before {
    width: 38px;
    height: 38px;
    margin: 0;
}

body[data-theme="neon"] .wins-display {
    gap: 12px;
    padding: 0 18px;
}

body[data-theme="neon"] .wins-num {
    font-size: 28px;
    min-width: 24px;
}

body[data-theme="neon"] .wins-divider {
    font-size: 18px;
    opacity: 0.55;
}

/* +1/+2/+3 保留游戏文字按钮风格，但不照抄参考图动作文案。 */
body[data-theme="neon"] .step-controls {
    gap: clamp(14px, 2.6vw, 34px);
}

body[data-theme="neon"] .step-btn {
    height: 34px;
    min-width: 48px;
    padding: 0 4px 0 26px;
}

body[data-theme="neon"] .step-btn::before {
    width: 18px;
    height: 18px;
    font-size: 15px;
}

body[data-theme="neon"] .step-btn::after {
    font-size: clamp(17px, 3vmin, 24px);
    line-height: 34px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

body[data-theme="neon"] .step-btn[data-step="1"]::before {
    content: '+';
    color: #ff4f7b;
}

body[data-theme="neon"] .step-btn[data-step="1"]::after {
    content: '+1';
    color: #ff4f7b;
}

body[data-theme="neon"] .step-btn[data-step="2"]::before {
    content: '+';
    color: #45df9d;
}

body[data-theme="neon"] .step-btn[data-step="2"]::after {
    content: '+2';
    color: #45df9d;
}

body[data-theme="neon"] .step-btn[data-step="3"]::before {
    content: '+';
    color: #ffffff;
}

body[data-theme="neon"] .step-btn[data-step="3"]::after {
    content: '+3';
    color: #ffffff;
}

/* 新局按钮不再使用倒计时弧，只保留深色胶囊和柔和描边。 */
body[data-theme="neon"] .reset-btn {
    border: 2px solid rgba(116, 124, 142, 0.5);
    background: rgba(11, 13, 23, 0.88);
    padding: 10px 22px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.38),
        inset 0 1px rgba(255, 255, 255, 0.12);
}

body[data-theme="neon"] .reset-btn::before {
    content: none;
}

@media (orientation: landscape) {
    body[data-theme="neon"] .score-card {
        width: min(19vw, 50vh) !important;
        max-width: 300px;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    body[data-theme="neon"] .score-card {
        width: min(16vw, 46vh) !important;
        max-width: 230px;
    }

    body[data-theme="neon"] .wins-num {
        font-size: 22px;
    }

    body[data-theme="neon"] .player-name,
    body[data-theme="neon"] .player-name::before {
        width: 32px;
        height: 32px;
    }

    body[data-theme="neon"] .step-controls {
        gap: clamp(10px, 2vw, 22px);
    }

    body[data-theme="neon"] .step-btn {
        height: 30px;
        min-width: 42px;
        padding-left: 22px;
    }

    body[data-theme="neon"] .step-btn::after {
        font-size: clamp(14px, 3.2vmin, 19px);
        line-height: 30px;
    }
}

/* ===== Neon v4：修正重复加号 / 圆角 / A 角标 / 头像 ===== */

/* 卡牌圆角：统一固定半径，去掉 clip-path 椭圆与硬边，过渡更圆润 */
body[data-theme="neon"] .story-card-display {
    border-radius: clamp(22px, 6.4vmin, 36px) !important;
    clip-path: none !important;
    overflow: hidden;
    filter: none;
}

body[data-theme="neon"] .story-card-display::after {
    border-radius: inherit;
}

/* 步进按钮：仅保留 +1 / +2 / +3，去掉多余的 + 图标，文字居中 */
body[data-theme="neon"] .step-btn {
    padding: 0 10px;
    min-width: 52px;
}

body[data-theme="neon"] .step-btn::before {
    content: none !important;
}

body[data-theme="neon"] .step-btn::after {
    font-size: clamp(19px, 3.6vmin, 28px);
    font-weight: 700;
}

/* A1/A2/A3 角标放大、更清晰 */
body[data-theme="neon"] .story-tier-badge {
    top: 6%;
    right: 6%;
    width: clamp(36px, 15%, 58px);
    font-size: clamp(19px, 4.6vmin, 32px);
    font-weight: 800;
}

/* 头像：放大 + 清晰人物图标（SVG 蒙版风格），左右用不同底色区分 */
body[data-theme="neon"] .player-name,
body[data-theme="neon"] .player-name::before {
    width: 46px;
    height: 46px;
}

body[data-theme="neon"] .player-name::before {
    background-repeat: no-repeat, no-repeat;
    background-position: center 40%, center;
    background-size: 62%, cover;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

body[data-theme="neon"] #left-name::before {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.5'%20r='4.1'%20fill='white'/%3E%3Cpath%20d='M3.6%2021c0-4.7%204-7.6%208.4-7.6s8.4%202.9%208.4%207.6z'%20fill='white'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #ffc740 0%, #ff8f1c 100%);
}

body[data-theme="neon"] #right-name::before {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.5'%20r='4.1'%20fill='white'/%3E%3Cpath%20d='M3.6%2021c0-4.7%204-7.6%208.4-7.6s8.4%202.9%208.4%207.6z'%20fill='white'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #7b6cff 0%, #4b34c8 100%);
}

@media (orientation: landscape) and (max-height: 480px) {
    body[data-theme="neon"] .player-name,
    body[data-theme="neon"] .player-name::before {
        width: 38px;
        height: 38px;
    }

    body[data-theme="neon"] .step-btn::before {
        content: none !important;
    }
}

/* ===== Neon v5：放大牌面 / 蓝红头像 / 花色折印 / 设置整洁 / 暗方更暗 / 设置按钮去框 ===== */

/* 1) 牌面整体放大 */
body[data-theme="neon"] .score-card {
    width: min(25vw, 56vh) !important;
    max-width: 340px;
}

@media (orientation: landscape) {
    body[data-theme="neon"] .score-card {
        width: min(23vw, 62vh) !important;
        max-width: 370px;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    body[data-theme="neon"] .score-card {
        width: min(19vw, 56vh) !important;
        max-width: 290px;
    }
}

/* 左上大数字随牌放大 */
body[data-theme="neon"] .story-corner-tl .story-rank {
    font-size: clamp(46px, 12vmin, 96px);
}

/* 2) 头像配色：左蓝 / 右红 */
body[data-theme="neon"] #left-name::before {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.5'%20r='4.1'%20fill='white'/%3E%3Cpath%20d='M3.6%2021c0-4.7%204-7.6%208.4-7.6s8.4%202.9%208.4%207.6z'%20fill='white'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #45a0ff 0%, #1f5ae6 100%);
}

body[data-theme="neon"] #right-name::before {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.5'%20r='4.1'%20fill='white'/%3E%3Cpath%20d='M3.6%2021c0-4.7%204-7.6%208.4-7.6s8.4%202.9%208.4%207.6z'%20fill='white'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #ff6173 0%, #e22344 100%);
}

/* 3) 花色折印立体效果：左半浅、右半深，中间一道折痕 */
body[data-theme="neon"] .story-corner-br {
    width: clamp(82px, 18vmin, 158px);
    height: clamp(82px, 18vmin, 158px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}

body[data-theme="neon"] .story-corner-br .story-pip-small {
    display: none;
}

body[data-theme="neon"] .story-corner-br::before,
body[data-theme="neon"] .story-corner-br::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 左半（浅色） */
body[data-theme="neon"] .story-corner-br::before {
    clip-path: inset(0 50% 0 0);
}

/* 右半（深色） */
body[data-theme="neon"] .story-corner-br::after {
    clip-path: inset(0 0 0 50%);
}

/* 左侧黑桃折印 */
body[data-theme="neon"] #left-story-card .story-corner-br::before,
body[data-theme="neon"] #left-story-card .story-corner-br::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50%206C66%2024%2090%2042%2090%2062c0%2012-10%2022-22%2022-5%200-9-1-13-3%202%205%205%209%209%2012H36c4-3%207-7%209-12-4%202-8%203-13%203-12%200-22-10-22-22%200-20%2024-38%2040-56z'%20fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50%206C66%2024%2090%2042%2090%2062c0%2012-10%2022-22%2022-5%200-9-1-13-3%202%205%205%209%209%2012H36c4-3%207-7%209-12-4%202-8%203-13%203-12%200-22-10-22-22%200-20%2024-38%2040-56z'%20fill='%23000'/%3E%3C/svg%3E");
}

body[data-theme="neon"] #left-story-card .story-corner-br::before {
    background: #43475c;
}

body[data-theme="neon"] #left-story-card .story-corner-br::after {
    background: #121219;
}

/* 右侧红桃折印 */
body[data-theme="neon"] #right-story-card .story-corner-br::before,
body[data-theme="neon"] #right-story-card .story-corner-br::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50%2090C28%2072%208%2058%208%2038a22%2022%200%200%201%2042-10A22%2022%200%200%201%2092%2038c0%2020-20%2034-42%2052z'%20fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50%2090C28%2072%208%2058%208%2038a22%2022%200%200%201%2042-10A22%2022%200%200%201%2092%2038c0%2020-20%2034-42%2052z'%20fill='%23000'/%3E%3C/svg%3E");
}

body[data-theme="neon"] #right-story-card .story-corner-br::before {
    background: #ff6178;
}

body[data-theme="neon"] #right-story-card .story-corner-br::after {
    background: #bd1c41;
}

/* 4) 暗方比默认更暗，但仍清晰可辨 */
body[data-theme="neon"] .score-card.is-dimmed {
    opacity: 0.32;
    filter: saturate(0.72) brightness(0.82);
}

/* 7) 卡牌点数字体：Kohinoor Demi */
body[data-theme="neon"] .story-rank,
body[data-theme="neon"] .story-corner-tl .story-rank,
body[data-theme="neon"] .story-corner-tl .rank-tier {
    font-family: 'Kohinoor', 'Inter', 'DIN', sans-serif;
}

/* 5) 设置面板：沿用全局卡片布局，仅叠加霓夜紫色调 */
body[data-theme="neon"] .setting-group {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(180, 150, 255, 0.16);
}

body[data-theme="neon"] .setting-label {
    color: rgba(214, 200, 255, 0.62);
}

/* 6) 设置按钮：去边框、去底色，只留图标 */
body[data-theme="neon"] .floating-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="neon"] .floating-btn svg {
    width: 24px;
    height: 24px;
    opacity: 0.92;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

body[data-theme="neon"] .floating-btn:hover {
    background: transparent;
    transform: rotate(35deg);
}

/* ===== Neon v6：比分清零可点 / 头像贴端相切 / 牌更大 / A 角标扁平 / 去细线 ===== */

/* 1) 顶部比分栏抬到卡片区之上，恢复双击「0·0」清零累计胜局 */
body[data-theme="neon"] .score-banner {
    z-index: 30;
    padding: 6px;
    gap: clamp(12px, 3.4vw, 26px);
}

/* 2) 头像与胶囊圆角端相切：左右内边距与上下一致 */
body[data-theme="neon"] .wins-display {
    padding: 0 clamp(10px, 3vw, 22px);
}

/* 3) 牌面继续放大 */
body[data-theme="neon"] .score-card {
    width: min(31vw, 66vh) !important;
    max-width: 400px;
}

@media (orientation: landscape) {
    body[data-theme="neon"] .score-card {
        width: min(27vw, 72vh) !important;
        max-width: 430px;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    body[data-theme="neon"] .score-card {
        width: min(22vw, 62vh) !important;
        max-width: 320px;
    }
}

/* 5) A1/A2/A3 角标：扁平纯色 + 卡牌数字字体 */
body[data-theme="neon"] .story-tier-badge {
    border-radius: 50%;
    box-shadow: none;
    border: none;
    color: #ffffff;
    font-family: 'Kohinoor', 'Inter', sans-serif;
    font-weight: 600;
}

body[data-theme="neon"] #left-story-card .story-tier-badge {
    background: #1c1d27;
    box-shadow: none;
}

body[data-theme="neon"] #right-story-card .story-tier-badge {
    background: #d93658;
    box-shadow: none;
}

/* 6) 去掉牌桌中央的细长发光横线 */
body[data-theme="neon"] .score-display::after {
    display: none;
}

/* ===== Neon v7：数字更大 / 去虚拟牌位 / 花色间距 / 角标居中变大 / 比分更紧凑 ===== */

/* 牌面数字进一步放大 */
body[data-theme="neon"] .story-corner-tl .story-rank {
    font-size: clamp(58px, 16vmin, 130px);
}

/* 去掉背景中央的虚拟牌位（公共牌区） */
body[data-theme="neon"] .score-display::before {
    display: none;
}

/* 数字右侧小花色与数字拉开一点距离 */
body[data-theme="neon"] .story-corner-tl {
    gap: clamp(6px, 1.8vmin, 14px);
}

/* A1/A2/A3 角标：更大、数字垂直居中 */
body[data-theme="neon"] .story-tier-badge {
    width: clamp(42px, 17%, 66px);
    font-size: clamp(24px, 7vmin, 46px);
    line-height: 1;
    padding-top: 0.12em;
}

/* 比分栏更紧凑（更短） */
body[data-theme="neon"] .score-banner {
    gap: clamp(8px, 2vw, 16px);
}

body[data-theme="neon"] .wins-display {
    padding: 0 clamp(8px, 2vw, 14px);
    gap: 8px;
}

body[data-theme="neon"] .wins-num {
    font-size: 24px;
    min-width: 18px;
}