/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    background: linear-gradient(135deg, #AED6F1 0%, #D7BDE2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 头部样式 */
.header {
    text-align: center;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(74, 144, 226, 0.3);
    border: 2px solid rgba(74, 144, 226, 0.2);
}

.header h1 {
    font-size: 2.5em;
    color: #4A148C;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(74, 20, 140, 0.2);
    font-weight: bold;
}

.game-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 1.2em;
    color: #4A148C;
    font-weight: bold;
}

.game-info div {
    background: linear-gradient(45deg, #4DD0E1, #26A69A), linear-gradient(to top, rgba(255,255,255,0.3), transparent);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
}

/* 上传区域样式 */
.upload-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(233, 30, 99, 0.3);
    text-align: center;
    margin-bottom: 30px;
    border: 2px solid rgba(233, 30, 99, 0.2);
}

.upload-section h2 {
    color: #4A148C;
    margin-bottom: 20px;
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(74, 20, 140, 0.2);
}

.upload-area {
    border: 3px dashed #81D4FA;
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.5);
}

.upload-area:hover {
    border-color: #4A148C;
    background: rgba(255, 255, 255, 0.8);
}

#fileInput {
    display: none;
}

.upload-btn {
    display: inline-block;
    background: linear-gradient(45deg, #81D4FA, #4A90E2), linear-gradient(to top, rgba(255,255,255,0.3), transparent);
    color: white;
    padding: 12px 30px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1.1em;
    transition: all 0.3s ease;
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.upload-btn:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.25);
}

.file-info {
    margin-top: 15px;
    color: #4a5568;
    font-size: 1.1em;
}

.start-btn {
    background: linear-gradient(45deg, #66BB6A, #43A047), linear-gradient(to top, rgba(255,255,255,0.3), transparent);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 20px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.start-btn:hover:not(:disabled) {
    transform: translateY(-5px);
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.25);
}

.start-btn:disabled {
    background: linear-gradient(45deg, #B2DFDB, #A5D6A7);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.2);
}

/* 关卡选择样式 */
.level-selection {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.level-selection h2 {
    color: #2d3748;
    margin-bottom: 30px;
    font-size: 1.8em;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.level-btn {
    background: linear-gradient(45deg, #E91E63, #D81B60), linear-gradient(to top, rgba(255,255,255,0.3), transparent);
    color: white;
    border: none;
    padding: 20px;
    border-radius: 20px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.level-btn:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.25);
}

.level-btn.locked {
    background: #a0aec0;
    cursor: not-allowed;
}

.level-btn.completed {
    background: linear-gradient(45deg, #66BB6A, #43A047);
}

/* 游戏区域样式 */
.game-area {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}


.game-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.card {
    aspect-ratio: 1;
    background: linear-gradient(45deg, #81D4FA, #4A90E2);
    border: 2px solid #4A90E2;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 15px rgba(74, 144, 226, 0.3);
}

.card[data-type="word"] {
    background: linear-gradient(45deg, #81D4FA, #4A90E2), linear-gradient(to top, rgba(255,255,255,0.3), transparent);
    border: 2px solid #4A90E2;
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.card[data-type="meaning"] {
    background: linear-gradient(45deg, #B2DFDB, #80CBC4), linear-gradient(to top, rgba(255,255,255,0.3), transparent);
    border: 2px solid #80CBC4;
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.25);
}

.card.selected {
    background: linear-gradient(45deg, #E91E63, #D81B60);
    color: white;
    border-color: #D81B60;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.5);
}

.card.matched {
    background: linear-gradient(45deg, #66BB6A, #43A047);
    color: white;
    border-color: #43A047;
    cursor: default;
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

.card.hidden {
    background: linear-gradient(45deg, #a0aec0, #718096);
    color: transparent;
}

.game-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.control-btn {
    background: linear-gradient(45deg, #4A90E2, #5C6BC0), linear-gradient(to top, rgba(255,255,255,0.3), transparent);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 20px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.control-btn:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.25);
}

.control-btn:disabled {
    background: #a0aec0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 暂停界面样式 */
.pause-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.pause-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.pause-content h2 {
    color: #2d3748;
    margin-bottom: 30px;
    font-size: 2em;
}

/* 游戏结束界面样式 */
.game-over {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.game-over-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
}

.game-over-content h2 {
    color: #2d3748;
    margin-bottom: 30px;
    font-size: 2.5em;
}

.final-stats {
    margin: 30px 0;
    font-size: 1.2em;
    color: #4a5568;
}

.final-stats p {
    margin: 10px 0;
}

.game-over-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* 动画效果 */
@keyframes cardFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10% { transform: translateX(-8px) rotate(-2deg); }
    20% { transform: translateX(8px) rotate(2deg); }
    30% { transform: translateX(-8px) rotate(-2deg); }
    40% { transform: translateX(8px) rotate(2deg); }
    50% { transform: translateX(-6px) rotate(-1deg); }
    60% { transform: translateX(6px) rotate(1deg); }
    70% { transform: translateX(-4px) rotate(-1deg); }
    80% { transform: translateX(4px) rotate(1deg); }
    90% { transform: translateX(-2px) rotate(0deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes matchSuccess {
    0% { 
        transform: scale(1) rotate(0deg);
        box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3);
    }
    25% { 
        transform: scale(1.3) rotate(10deg);
        box-shadow: 0 0 40px rgba(255, 215, 0, 1);
    }
    50% { 
        transform: scale(1.1) rotate(-5deg);
        box-shadow: 0 0 50px rgba(255, 105, 180, 1);
    }
    75% { 
        transform: scale(1.2) rotate(5deg);
        box-shadow: 0 0 60px rgba(152, 251, 152, 1);
    }
    100% { 
        transform: scale(0) rotate(360deg);
        box-shadow: 0 0 80px rgba(255, 215, 0, 1);
        opacity: 0;
    }
}

@keyframes sparkle {
    0% { 
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% { 
        transform: scale(1) rotate(180deg) translate(var(--end-x, 0), var(--end-y, 0));
        opacity: 0.8;
    }
    100% { 
        transform: scale(0) rotate(360deg) translate(var(--end-x, 0), var(--end-y, 0));
        opacity: 0;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.card.flipping {
    animation: cardFlip 0.6s ease-in-out;
}

.card.wrong {
    animation: shake 0.8s ease-in-out;
    background: linear-gradient(45deg, #F44336, #D32F2F) !important;
    border-color: #D32F2F !important;
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.8) !important;
}

.card.hint {
    animation: pulse 1s ease-in-out infinite;
    border-color: #FFD700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6) !important;
}

.card.match-success {
    animation: matchSuccess 0.8s ease-in-out;
}

/* 成功提示特效 */
.success-particle {
    position: absolute;
    pointer-events: none;
    animation: sparkle 1s ease-out forwards;
}

.success-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, #81D4FA, #66BB6A);
    color: white;
    padding: 20px 40px;
    border-radius: 25px;
    font-size: 2em;
    font-weight: bold;
    box-shadow: 0 10px 30px rgba(74, 144, 226, 0.5);
    z-index: 9999;
    animation: bounce 1s ease-in-out;
    pointer-events: none;
}

.heart-effect {
    position: absolute;
    color: #FF69B4;
    font-size: 2em;
    pointer-events: none;
    animation: heartBeat 0.8s ease-in-out;
    z-index: 9998;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .header h1 {
        font-size: 2em;
    }
    
    .game-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .game-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    
    .card {
        font-size: 0.9em;
    }
    
    .game-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .control-btn {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .level-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    list-style: none;
    padding: 10px 0;
    min-width: 200px;
    z-index: 1000;
}

.dropdown-menu li {
    padding: 10px 20px;
    cursor: pointer;
}

.dropdown-menu li:hover {
    background: #f0f0f0;
}

/* 3D Button (Uiverse.io by njesenberger) */
.button {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 0; /* create stacking context so negative children stay above parent backgrounds */
    border-width: 0;
    padding: 0 8px 12px;
    min-width: 10em;
    box-sizing: border-box;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.button-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    padding: 8px 16px;
    transform: translateY(0);
    text-align: center;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
    transition-property: transform;
    transition-duration: .2s;
    -webkit-user-select: none;
    user-select: none;
}

.button:active .button-top {
    transform: translateY(6px);
}

.button-top::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    background-image: radial-gradient(#cd3f64, #9d3656);
    text-align: center;
    color: #fff;
    box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
    transition-property: border-radius, padding, width, transform;
    transition-duration: .2s;
}

.button:active .button-top::after {
    border-radius: 6px;
    padding: 0 2px;
}

.button-bottom {
    position: absolute;
    z-index: -1;
    bottom: 4px;
    left: 4px;
    border-radius: 8px / 16px 16px 8px 8px;
    padding-top: 6px;
    width: calc(100% - 8px);
    height: calc(100% - 10px);
    box-sizing: content-box;
    background-color: #803;
    background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
    transition-property: border-radius, padding-top;
    transition-duration: .2s;
}

.button:active .button-bottom {
    border-radius: 10px 10px 8px 8px / 8px;
    padding-top: 0;
}

.button-base {
    position: absolute;
    z-index: -2;
    top: 4px;
    left: 0;
    border-radius: 12px;
    width: 100%;
    height: calc(100% - 4px);
    background-color: rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);
}

/* Make legacy button variants transparent when combined with 3D button */
.button.control-btn,
.button.start-btn,
.button.upload-btn,
.button.level-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove hover transforms from legacy styles when using 3D */
.button.control-btn:hover,
.button.start-btn:hover,
.button.upload-btn:hover,
.button.level-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Locked level appearance for 3D button */
.button.level-btn.locked .button-top::after {
    background-image: none;
    background-color: #a0aec0;
}
.button.level-btn.locked { cursor: not-allowed; }
.button:disabled { cursor: not-allowed; }

/* Disabled state visuals */
.button:disabled .button-top::after {
    background-image: none !important;
    background-color: #a0aec0 !important;
}
.button:disabled .button-bottom {
    background-color: #6b7280 !important;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35), inset 0 -1px 2px 2px rgba(0, 0, 0, .35) !important;
}

/* Context-specific sizing */
.level-grid .button { width: 100%; min-width: 0; }
.game-controls .button { min-width: 8em; }
.pause-content .button,
.game-over-actions .button,
.upload-section .button { min-width: 10em; }

/* 3D Cards */
.card {
    position: relative;
    z-index: 0;
    padding: 0 8px 12px; /* space for bottom depth */
    background: transparent; /* 3D layers handle visuals */
}
.card-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    padding: 10px;
    min-height: 64px;
    border-radius: 16px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px rgba(0,0,0,.25);
    transform: translateY(0);
    transition: transform .15s ease;
}
.card::before { content: none; }
.card-top::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0; top: 0; right: 0; bottom: 0;
    border-radius: 16px;
    box-sizing: content-box;
    background-image: radial-gradient(#81D4FA, #4A90E2);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.2);
    transition: border-radius .15s ease, padding .15s ease, transform .15s ease;
}
.card-bottom {
    position: absolute;
    z-index: -1;
    bottom: 4px; left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 12px);
    border-radius: 18px / 24px 24px 18px 18px;
    padding-top: 6px;
    background-color: #2c5ea8;
    background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255,255,255,.25), transparent),
                      radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255,255,255,.25), transparent),
                      radial-gradient(16px at -4px 0, white, transparent),
                      radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
    box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 -1px 3px 3px rgba(0,0,0,.35);
    transition: border-radius .15s ease, padding-top .15s ease;
}
.card-base {
    position: absolute;
    z-index: -2;
    top: 4px; left: 0;
    width: 100%;
    height: calc(100% - 4px);
    border-radius: 20px;
    background-color: rgba(0,0,0,.15);
    box-shadow: 0 1px 1px rgba(255,255,255,.75), inset 0 2px 2px rgba(0,0,0,.25);
}
/* Type colors */
.card[data-type="word"] .card-top::after {
    background-image: radial-gradient(#81D4FA, #4A90E2);
}
.card[data-type="meaning"] .card-top::after {
    background-image: radial-gradient(#B2DFDB, #80CBC4);
}
/* Interactions */
.card:hover .card-top { transform: translateY(-2px); }
.card:active .card-top { transform: translateY(6px); }
.card:active .card-bottom { border-radius: 12px 12px 10px 10px / 10px; padding-top: 0; }
/* States mapping */
.card.selected .card-top::after { background-image: radial-gradient(#E91E63, #D81B60) !important; }
.card.hint .card-top::after { box-shadow: 0 0 20px rgba(255,215,0,.6), inset 0 0 0 1px rgba(255,255,255,.25); }
.card.wrong .card-top::after { background-image: radial-gradient(#F44336, #D32F2F) !important; box-shadow: 0 0 20px rgba(244,67,54,.8) !important; }
.card.match-success .card-top::after { background-image: radial-gradient(#66BB6A, #43A047) !important; }
.card.matched { pointer-events: none; }

/* Variable-driven overrides for 3D cards */
/* Use CSS variables for colors so themes can swap palettes without changing markup */
.card-top { color: var(--card-text-color, #ffffff); }
.card-bottom { background-color: var(--card-bottom-color, #2c5ea8); }

/* Type surfaces */
.card[data-type="word"] .card-top::after {
  background-image: radial-gradient(var(--card-word-top-start, #81D4FA), var(--card-word-top-end, #4A90E2));
}
.card[data-type="meaning"] .card-top::after {
  background-image: radial-gradient(var(--card-meaning-top-start, #B2DFDB), var(--card-meaning-top-end, #80CBC4));
}

/* States */
.card.selected .card-top::after {
  background-image: radial-gradient(var(--card-selected-start, #E91E63), var(--card-selected-end, #D81B60)) !important;
}
.card.wrong .card-top::after {
  background-image: radial-gradient(var(--card-wrong-start, #F44336), var(--card-wrong-end, #D32F2F)) !important;
}
.card.match-success .card-top::after {
  background-image: radial-gradient(var(--card-success-start, #66BB6A), var(--card-success-end, #43A047)) !important;
}
.card.hint .card-top::after {
  box-shadow: 0 0 22px var(--card-glow-color, rgba(255, 215, 0, 0.55)), inset 0 0 0 1px rgba(255,255,255,.22);
}

/* Type-specific text and bottom depth colors to increase contrast */
.card[data-type="word"] .card-top { color: var(--card-word-text-color, var(--card-text-color, #ffffff)); }
.card[data-type="meaning"] .card-top { color: var(--card-meaning-text-color, var(--card-text-color, #ffffff)); }

.card[data-type="word"] .card-bottom {
  background-color: var(--card-word-bottom-color, var(--card-bottom-color, #2c5ea8));
}
.card[data-type="meaning"] .card-bottom {
  background-color: var(--card-meaning-bottom-color, var(--card-bottom-color, #2a6f63));
}

/* Outer ring highlight (strong contrast) */
.card {
  --card-ring-size: 2px;
}
.card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 2;
  inset: calc(-1 * var(--card-ring-size, 2px));
  border-radius: 24px;
  box-shadow: 0 0 0 var(--card-ring-size, 2px) var(--card-ring-color, transparent),
              0 0 16px calc(var(--card-ring-size, 2px) / 2) var(--card-ring-glow, transparent);
  opacity: 0.95;
  transition: box-shadow .2s ease, opacity .2s ease;
}
.card[data-type="word"] { 
  --card-ring-color: var(--card-word-ring, var(--card-word-top-end, #1C3556));
  --card-ring-glow: color-mix(in oklab, var(--card-ring-color), transparent 60%);
}
.card[data-type="meaning"] { 
  --card-ring-color: var(--card-meaning-ring, var(--card-meaning-top-end, #CFA25F));
  --card-ring-glow: color-mix(in oklab, var(--card-ring-color), transparent 60%);
}

/* Corner badges */
.card[data-type="word"]::before,
.card[data-type="meaning"]::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 3;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transform: rotate(-6deg);
}
.card[data-type="word"]::before {
  content: 'EN';
  background: var(--card-word-badge-bg, var(--card-word-top-end, #1C3556));
  color: var(--card-word-badge-text, #ffffff);
}
.card[data-type="meaning"]::before {
  content: '中';
  background: var(--card-meaning-badge-bg, var(--card-meaning-top-end, #CFA25F));
  color: var(--card-meaning-badge-text, #1b1b1b);
}

/* Theme defaults for rings/badges (can be overridden per theme) */
:root {
  --card-word-ring: var(--card-word-top-end, #1C3556);
  --card-meaning-ring: var(--card-meaning-top-end, #CFA25F);
  --card-word-badge-bg: var(--card-word-top-end, #1C3556);
  --card-meaning-badge-bg: var(--card-meaning-top-end, #CFA25F);
}

/* ============== THEME VARIABLES FOR 3D BUTTONS ============== */
/* Variable-driven button palette */
.button-top { color: var(--btn-text-color, #ffffff); }
.button-top::after {
  background-image: radial-gradient(var(--btn-top-start, #cd3f64), var(--btn-top-end, #9d3656));
}
.button-bottom {
  background-color: var(--btn-bottom-bg, #803);
}
.button.level-btn.locked .button-top::after {
  background-image: none;
  background-color: var(--btn-locked-bg, #a0aec0);
}
.button:disabled .button-top::after {
  background-image: none !important;
  background-color: var(--btn-disabled-top, #a0aec0) !important;
}
.button:disabled .button-bottom {
  background-color: var(--btn-disabled-bottom, #6b7280) !important;
}

/* Bind button variables in each theme */
.theme-onyx-gold {
  --btn-text-color: #F5F6F8;
  --btn-top-start: #D4AF37; /* gold */
  --btn-top-end:   #B89021;
  --btn-bottom-bg: #0f1114; /* onyx */
  --btn-locked-bg: #4b4f55;
  --btn-disabled-top: #6b7280;
  --btn-disabled-bottom: #3b3f45;
}

.theme-sapphire-silver {
  --btn-text-color: #EEF2F7;
  --btn-top-start: #3C5E8A; /* sapphire */
  --btn-top-end:   #1C3556;
  --btn-bottom-bg: #0B1320; /* deep navy */
  --btn-locked-bg: #607088;
  --btn-disabled-top: #7a8696;
  --btn-disabled-bottom: #2a3546;
}

.theme-sandstone-olive {
  --btn-text-color: #232321;
  --btn-top-start: #C7B9A4; /* sandstone */
  --btn-top-end:   #9E8D76;
  --btn-bottom-bg: #5E5449; /* warm dark */
  --btn-locked-bg: #b9b1a8;
  --btn-disabled-top: #bdb6ad;
  --btn-disabled-bottom: #5a5046;
}

/* 4) Charcoal & Copper (炭黑赤铜) */
.theme-charcoal-copper {
  --card-text-color: #F4F2EF;
  --card-bottom-color: #1a1412;
  --card-word-top-start: #5A463C;
  --card-word-top-end:   #2E221D;
  --card-meaning-top-start: #6A5044;
  --card-meaning-top-end:   #3A2C26;
  --card-selected-start: #C47C4D;
  --card-selected-end:   #9E5E36;
  --card-wrong-start:    #8B2E2E;
  --card-wrong-end:      #5C1C1C;
  --card-success-start:  #3E6B57;
  --card-success-end:    #28493B;
  --card-glow-color:     rgba(196,124,77,0.5);

  --btn-text-color: #F4F2EF;
  --btn-top-start: #C47C4D;
  --btn-top-end:   #9E5E36;
  --btn-bottom-bg: #1a1412;
  --btn-locked-bg: #5A5A58;
  --btn-disabled-top: #7A6E66;
  --btn-disabled-bottom: #2A2220;
}

/* 5) Ink & Rose Gold (墨黑玫瑰金) */
.theme-ink-rose {
  --card-text-color: #F7F2EE;
  --card-bottom-color: #161317;
  --card-word-top-start: #4B3A42;
  --card-word-top-end:   #23181C;
  --card-meaning-top-start: #5A4850;
  --card-meaning-top-end:   #2E2327;
  --card-selected-start: #E6B8A2;
  --card-selected-end:   #D29A82;
  --card-wrong-start:    #8E3A43;
  --card-wrong-end:      #5C242B;
  --card-success-start:  #3C6E6B;
  --card-success-end:    #254947;
  --card-glow-color:     rgba(230,184,162,0.5);

  --btn-text-color: #F7F2EE;
  --btn-top-start: #E6B8A2;
  --btn-top-end:   #D29A82;
  --btn-bottom-bg: #161317;
  --btn-locked-bg: #4f3e44;
  --btn-disabled-top: #9a8780;
  --btn-disabled-bottom: #2b2427;
}

/* 6) Forest Emerald (森林祖母绿) */
.theme-forest-emerald {
  --card-text-color: #EAF5EF;
  --card-bottom-color: #0F1A15;
  --card-word-top-start: #3F6B52;
  --card-word-top-end:   #1E3A2C;
  --card-meaning-top-start: #4E7A60;
  --card-meaning-top-end:   #254636;
  --card-selected-start: #7FC8A9;
  --card-selected-end:   #57AD8D;
  --card-wrong-start:    #8C3D3D;
  --card-wrong-end:      #5A2525;
  --card-success-start:  #2F8F6E;
  --card-success-end:    #1F5F49;
  --card-glow-color:     rgba(127,200,169,0.5);

  --btn-text-color: #EAF5EF;
  --btn-top-start: #57AD8D;
  --btn-top-end:   #2F8F6E;
  --btn-bottom-bg: #0F1A15;
  --btn-locked-bg: #3d5046;
  --btn-disabled-top: #7a9b8e;
  --btn-disabled-bottom: #1a2b22;
}

/* 7) Plum & Amber (梅子琥珀) */
.theme-plum-amber {
  --card-text-color: #F7F1FA;
  --card-bottom-color: #1A131F;
  --card-word-top-start: #6A4A7C;
  --card-word-top-end:   #3A2746;
  --card-meaning-top-start: #7A5A8C;
  --card-meaning-top-end:   #473457;
  --card-selected-start: #F0B65A;
  --card-selected-end:   #D3922E;
  --card-wrong-start:    #8B304D;
  --card-wrong-end:      #5C1F33;
  --card-success-start:  #4C7F68;
  --card-success-end:    #2F5B49;
  --card-glow-color:     rgba(240,182,90,0.5);

  --btn-text-color: #F7F1FA;
  --btn-top-start: #F0B65A;
  --btn-top-end:   #D3922E;
  --btn-bottom-bg: #1A131F;
  --btn-locked-bg: #5a4b63;
  --btn-disabled-top: #b6a28a;
  --btn-disabled-bottom: #2a2130;
}

/* 8) Slate & Lavender (板岩薰衣草) */
.theme-slate-lavender {
  --card-text-color: #F2F4F8;
  --card-bottom-color: #11131A;
  --card-word-top-start: #5C6A82;
  --card-word-top-end:   #2D3446;
  --card-meaning-top-start: #8A8FB3;
  --card-meaning-top-end:   #4B4F6A;
  --card-selected-start: #C6B4E2;
  --card-selected-end:   #A691D1;
  --card-wrong-start:    #7E3A52;
  --card-wrong-end:      #532338;
  --card-success-start:  #5B8FAF;
  --card-success-end:    #3B6F8F;
  --card-glow-color:     rgba(198,180,226,0.5);

  --btn-text-color: #F2F4F8;
  --btn-top-start: #A691D1;
  --btn-top-end:   #7E6AB3;
  --btn-bottom-bg: #11131A;
  --btn-locked-bg: #5a6275;
  --btn-disabled-top: #a2a7c2;
  --btn-disabled-bottom: #272c3a;
}

/* 9) Obsidian & Cyan (黑曜青) */
.theme-obsidian-cyan {
  --card-text-color: #EAF7FA;
  --card-bottom-color: #0A1013;
  --card-word-top-start: #2E4150;
  --card-word-top-end:   #0F1F28;
  --card-meaning-top-start: #2F6D7A;
  --card-meaning-top-end:   #144651;
  --card-selected-start: #52E3F6;
  --card-selected-end:   #1FB9D6;
  --card-wrong-start:    #8A2F2F;
  --card-wrong-end:      #541D1D;
  --card-success-start:  #2EA39A;
  --card-success-end:    #1F6F69;
  --card-glow-color:     rgba(82,227,246,0.5);

  --btn-text-color: #EAF7FA;
  --btn-top-start: #1FB9D6;
  --btn-top-end:   #138EA8;
  --btn-bottom-bg: #0A1013;
  --btn-locked-bg: #3f5a62;
  --btn-disabled-top: #88c8d2;
  --btn-disabled-bottom: #1a262b;
}

/* 10) Midnight & Aubergine (子夜茄紫) */
.theme-midnight-aubergine {
  --card-text-color: #F5EEF8;
  --card-bottom-color: #140D16;
  --card-word-top-start: #4B2E54;
  --card-word-top-end:   #23142A;
  --card-meaning-top-start: #5B3A64;
  --card-meaning-top-end:   #2D1A35;
  --card-selected-start: #D4A0E6;
  --card-selected-end:   #B679D1;
  --card-wrong-start:    #7E2E4C;
  --card-wrong-end:      #4E1B2F;
  --card-success-start:  #507A63;
  --card-success-end:    #2F503F;
  --card-glow-color:     rgba(212,160,230,0.5);

  --btn-text-color: #F5EEF8;
  --btn-top-start: #B679D1;
  --btn-top-end:   #7E57A9;
  --btn-bottom-bg: #140D16;
  --btn-locked-bg: #4b3a55;
  --btn-disabled-top: #bfa7cf;
  --btn-disabled-bottom: #261b2b;
}

/* 11) Porcelain & Cobalt (瓷白钴蓝) */
.theme-porcelain-cobalt {
  --card-text-color: #1C2230;
  --card-bottom-color: #3A4A6A;
  --card-word-top-start: #E6EAF2;
  --card-word-top-end:   #C8D2E6;
  --card-meaning-top-start: #C7D6EE;
  --card-meaning-top-end:   #9FB6E6;
  --card-selected-start: #6FA8FF;
  --card-selected-end:   #3D7BEA;
  --card-wrong-start:    #B84A5A;
  --card-wrong-end:      #7A2F38;
  --card-success-start:  #5AA1C9;
  --card-success-end:    #3A7FA8;
  --card-glow-color:     rgba(111,168,255,0.5);

  --btn-text-color: #1C2230;
  --btn-top-start: #3D7BEA;
  --btn-top-end:   #2F5FB8;
  --btn-bottom-bg: #2A3954;
  --btn-locked-bg: #98A7C2;
  --btn-disabled-top: #A9B8D2;
  --btn-disabled-bottom: #3a4a6a;
}

/* 12) Graphite & Ice (石墨冰蓝) */
.theme-graphite-ice {
  --card-text-color: #F0F3F6;
  --card-bottom-color: #111417;
  --card-word-top-start: #5A626B;
  --card-word-top-end:   #2B3036;
  --card-meaning-top-start: #8FA3B3;
  --card-meaning-top-end:   #4E5E6B;
  --card-selected-start: #B9D4F0;
  --card-selected-end:   #8FB9E3;
  --card-wrong-start:    #7A3B3B;
  --card-wrong-end:      #4B2323;
  --card-success-start:  #6FA6B5;
  --card-success-end:    #4B7F8C;
  --card-glow-color:     rgba(185,212,240,0.5);

  --btn-text-color: #F0F3F6;
  --btn-top-start: #8FB9E3;
  --btn-top-end:   #5B8FBF;
  --btn-bottom-bg: #111417;
  --btn-locked-bg: #5a6875;
  --btn-disabled-top: #a8bfce;
  --btn-disabled-bottom: #242b31;
}

/* 13) Mocha & Bronze (摩卡青铜) */
.theme-mocha-bronze {
  --card-text-color: #F6F2ED;
  --card-bottom-color: #1A1512;
  --card-word-top-start: #9D7E67;
  --card-word-top-end:   #6E5545;
  --card-meaning-top-start: #B89C84;
  --card-meaning-top-end:   #8A735F;
  --card-selected-start: #CFA66B;
  --card-selected-end:   #A87E45;
  --card-wrong-start:    #8C3E2E;
  --card-wrong-end:      #5B271C;
  --card-success-start:  #6F8A5B;
  --card-success-end:    #4C623F;
  --card-glow-color:     rgba(207,166,107,0.5);

  --btn-text-color: #F6F2ED;
  --btn-top-start: #CFA66B;
  --btn-top-end:   #A87E45;
  --btn-bottom-bg: #1A1512;
  --btn-locked-bg: #6a5a4f;
  --btn-disabled-top: #bfa98f;
  --btn-disabled-bottom: #2a241f;
}

/* Stronger default contrast for word vs meaning (when no theme applied) */
:root {
  --card-word-top-start: #3C5E8A;  /* cool sapphire */
  --card-word-top-end:   #1C3556;
  --card-meaning-top-start: #E6C07B; /* warm champagne */
  --card-meaning-top-end:   #CFA25F;
  --card-word-text-color: #EEF2F7;
  --card-meaning-text-color: #2B2A27;
}

/* Strong contrast overrides per theme */
.theme-onyx-gold {
  --card-word-top-start: #3D4046;  /* graphite cool */
  --card-word-top-end:   #1C1F24;
  --card-meaning-top-start: #C49A3A; /* warm gold */
  --card-meaning-top-end:   #8C6A1D;
  --card-word-text-color: #F5F6F8;
  --card-meaning-text-color: #1F180A; /* darker text on gold */
}
.theme-sapphire-silver {
  --card-word-top-start: #3C5E8A; /* sapphire */
  --card-word-top-end:   #1C3556;
  --card-meaning-top-start: #2E8E9D; /* teal */
  --card-meaning-top-end:   #1E6F7A;
  --card-word-text-color: #EEF2F7;
  --card-meaning-text-color: #EEF2F7;
}
.theme-sandstone-olive {
  --card-word-top-start: #C7B9A4; /* sandstone */
  --card-word-top-end:   #9E8D76;
  --card-meaning-top-start: #93A878; /* olive */
  --card-meaning-top-end:   #6F8E5D;
  --card-word-text-color: #232321;
  --card-meaning-text-color: #1F261A;
}
.theme-charcoal-copper {
  --card-word-top-start: #4A3B33; /* charcoal */
  --card-word-top-end:   #231B17;
  --card-meaning-top-start: #B16A43; /* copper */
  --card-meaning-top-end:   #8A4F31;
  --card-word-text-color: #F4F2EF;
  --card-meaning-text-color: #2B211B;
}
.theme-ink-rose {
  --card-word-top-start: #3B2B31; /* ink */
  --card-word-top-end:   #1C1316;
  --card-meaning-top-start: #E6B8A2; /* rose gold */
  --card-meaning-top-end:   #D29A82;
  --card-word-text-color: #F7F2EE;
  --card-meaning-text-color: #2B1F23; /* dark text on light rose */
}
.theme-forest-emerald {
  --card-word-top-start: #2F6F5F; /* teal green */
  --card-word-top-end:   #1E4E3F;
  --card-meaning-top-start: #6A8F5A; /* olive green */
  --card-meaning-top-end:   #3D5F39;
  --card-word-text-color: #EAF5EF;
  --card-meaning-text-color: #EAF5EF;
}
.theme-plum-amber {
  --card-word-top-start: #6A4A7C; /* plum */
  --card-word-top-end:   #3A2746;
  --card-meaning-top-start: #F0B65A; /* amber */
  --card-meaning-top-end:   #D3922E;
  --card-word-text-color: #F7F1FA;
  --card-meaning-text-color: #3B2A18; /* dark on amber */
}
.theme-slate-lavender {
  --card-word-top-start: #5C6A82; /* slate */
  --card-word-top-end:   #2D3446;
  --card-meaning-top-start: #C6B4E2; /* lavender */
  --card-meaning-top-end:   #A691D1;
  --card-word-text-color: #F2F4F8;
  --card-meaning-text-color: #2D2F3A; /* dark on light lavender */
}
.theme-obsidian-cyan {
  --card-word-top-start: #2E4150; /* obsidian blue */
  --card-word-top-end:   #0F1F28;
  --card-meaning-top-start: #35C4DA; /* bright cyan */
  --card-meaning-top-end:   #159EB6;
  --card-word-text-color: #EAF7FA;
  --card-meaning-text-color: #0B1A1E; /* darker text for bright cyan */
}
.theme-midnight-aubergine {
  --card-word-top-start: #4B2E54; /* midnight plum */
  --card-word-top-end:   #23142A;
  --card-meaning-top-start: #B58CD6; /* violet */
  --card-meaning-top-end:   #8A64B1;
  --card-word-text-color: #F5EEF8;
  --card-meaning-text-color: #271B33; /* dark on violet */
}
.theme-porcelain-cobalt {
  --card-word-top-start: #E6EAF2; /* porcelain */
  --card-word-top-end:   #C8D2E6;
  --card-meaning-top-start: #3D7BEA; /* cobalt */
  --card-meaning-top-end:   #2F5FB8;
  --card-word-text-color: #1C2230; /* dark on porcelain */
  --card-meaning-text-color: #EEF2F7;
}
.theme-graphite-ice {
  --card-word-top-start: #5A626B; /* graphite */
  --card-word-top-end:   #2B3036;
  --card-meaning-top-start: #B9D4F0; /* ice */
  --card-meaning-top-end:   #8FB9E3;
  --card-word-text-color: #F0F3F6;
  --card-meaning-text-color: #1C2A36; /* dark on light ice */
}
.theme-mocha-bronze {
  --card-word-top-start: #9D7E67; /* mocha */
  --card-word-top-end:   #6E5545;
  --card-meaning-top-start: #CFA66B; /* bronze */
  --card-meaning-top-end:   #A87E45;
  --card-word-text-color: #F6F2ED;
  --card-meaning-text-color: #2E2216; /* dark on bronze */
}

/* === Themed UI: title, stats badges, upload section === */
:root {
  --ui-heading-color: #4A148C; /* default title color */
  --ui-accent-start: #4DD0E1;  /* default stats gradient start */
  --ui-accent-end:   #26A69A;  /* default stats gradient end */
  --ui-stats-text:   #ffffff;  /* stats text color */
  --ui-panel-color:  #E91E63;  /* base for upload panel border/shadow */
}

/* Auto-bind UI accents from button palette for any theme */
[class*="theme-"] {
  --ui-heading-color: var(--btn-top-end);
  --ui-accent-start: var(--btn-top-start);
  --ui-accent-end:   var(--btn-top-end);
  --ui-stats-text:   var(--btn-text-color, #ffffff);
  --ui-panel-color:  var(--btn-top-end);
}

.header h1 { color: var(--ui-heading-color); }
.game-info div {
  background: linear-gradient(45deg, var(--ui-accent-start), var(--ui-accent-end)) !important;
  color: var(--ui-stats-text) !important;
}
.upload-section h2 { color: var(--ui-heading-color); }
.upload-area { border-color: var(--ui-accent-start) !important; }
.upload-area:hover { border-color: var(--ui-heading-color) !important; }
.upload-section {
  border-color: color-mix(in oklab, var(--ui-panel-color), transparent 75%);
  box-shadow: 0 8px 32px color-mix(in oklab, var(--ui-panel-color), transparent 80%);
}