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

body {
    font-family: 'Times New Roman', serif;
    overflow: hidden;
    background-color: #0a101a;
    color: #d4af37;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
    transition: opacity 0.5s ease;
}

.screen.active {
    display: block;
}

/* 开始界面 */
.start-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1a2a4b 0%, #0a101a 100%);
    overflow: hidden;
}

.mist {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><filter id="blur"><feGaussianBlur stdDeviation="10"/></filter></defs><rect width="1000" height="1000" fill="%231a2a4b" opacity="0.3"/><path d="M0 200 Q 250 100 500 200 T 1000 200" stroke="%232a3b34" stroke-width="50" fill="none" opacity="0.5" filter="url(%23blur)"/><path d="M0 400 Q 250 300 500 400 T 1000 400" stroke="%232a3b34" stroke-width="70" fill="none" opacity="0.4" filter="url(%23blur)"/><path d="M0 600 Q 250 500 500 600 T 1000 600" stroke="%232a3b34" stroke-width="60" fill="none" opacity="0.6" filter="url(%23blur)"/><path d="M0 800 Q 250 700 500 800 T 1000 800" stroke="%232a3b34" stroke-width="80" fill="none" opacity="0.3" filter="url(%23blur)"/></svg>');
    animation: mistFlow 20s linear infinite;
}

@keyframes mistFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.center-light {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.start-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.game-title {
    font-size: 4rem;
    font-family: 'Georgia', serif;
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    margin-bottom: 1rem;
    animation: float 2s ease-in-out infinite;
}

.game-subtitle {
    font-size: 1.5rem;
    color: #8b0000;
    margin-bottom: 3rem;
    font-style: italic;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.button-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.start-button {
    padding: 15px 30px;
    font-size: 1.2rem;
    font-family: 'Times New Roman', serif;
    background-color: rgba(26, 42, 75, 0.8);
    color: #d4af37;
    border: 2px solid #d4af37;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.start-button:hover {
    background-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.start-button:active {
    transform: translateY(0);
}

/* 游戏界面 */
.game-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a2a4b 0%, #2a3b34 50%, #3a2a4b 100%);
    overflow: hidden;
}

.mist-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><filter id="mistBlur"><feGaussianBlur stdDeviation="15"/></filter></defs><rect width="1000" height="1000" fill="%232a3b34" opacity="0.2"/><path d="M0 100 Q 300 0 600 100 T 1200 100" stroke="%233a2a4b" stroke-width="60" fill="none" opacity="0.4" filter="url(%23mistBlur)"/><path d="M0 300 Q 300 200 600 300 T 1200 300" stroke="%233a2a4b" stroke-width="80" fill="none" opacity="0.3" filter="url(%23mistBlur)"/><path d="M0 500 Q 300 400 600 500 T 1200 500" stroke="%231a2a4b" stroke-width="70" fill="none" opacity="0.5" filter="url(%23mistBlur)"/><path d="M0 700 Q 300 600 600 700 T 1200 700" stroke="%231a2a4b" stroke-width="90" fill="none" opacity="0.3" filter="url(%23mistBlur)"/><path d="M0 900 Q 300 800 600 900 T 1200 900" stroke="%232a3b34" stroke-width="100" fill="none" opacity="0.4" filter="url(%23mistBlur)"/></svg>');
    animation: mistFlow 30s linear infinite;
}

.mist-layer:nth-child(2) {
    animation-duration: 45s;
    opacity: 0.7;
    animation-delay: -10s;
}

.mist-layer:nth-child(3) {
    animation-duration: 60s;
    opacity: 0.5;
    animation-delay: -20s;
}

/* 区域布局 */
.area {
    position: absolute;
    z-index: 5;
}

#explore-area {
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2rem;
}

#action-area {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border-top: 2px solid #d4af37;
    display: flex;
    padding: 1rem;
    gap: 1rem;
}

/* 探索区卡牌 */
.explore-card {
    width: 200px;
    height: 300px;
    background-color: rgba(26, 42, 75, 0.8);
    border: 2px solid #d4af37;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: exploreFloat 3s ease-in-out infinite;
}

.explore-card:nth-child(2) {
    animation-delay: 0.5s;
}

.explore-card:nth-child(3) {
    animation-delay: 1s;
}

@keyframes exploreFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.explore-card:hover,
.explore-card.selected {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    border-color: #8b0000;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-image {
    flex: 1;
    margin-bottom: 1rem;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    opacity: 0.8;
}

.card-image.forest {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="%232a3b34"/><path d="M100 20 L 150 80 L 120 80 L 120 150 L 80 150 L 80 80 L 50 80 Z" fill="%231a2a4b" opacity="0.8"/><circle cx="100" cy="100" r="30" fill="%233a2a4b" opacity="0.5"/></svg>');
}

.card-image.cave {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="%230a101a"/><path d="M50 150 Q 100 50 150 150" stroke="%231a2a4b" stroke-width="20" fill="none"/><circle cx="100" cy="100" r="20" fill="%23d4af37" opacity="0.3"/></svg>');
}

.card-image.temple {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="%231a2a4b"/><path d="M100 50 L 70 150 L 130 150 Z" fill="%230a101a"/><rect x="90" y="100" width="20" height="50" fill="%232a3b34"/><circle cx="100" cy="70" r="10" fill="%23d4af37" opacity="0.5"/></svg>');
}

.card-description {
    text-align: center;
    color: #d4af37;
    font-size: 1rem;
    line-height: 1.4;
}

/* 操作区各部分 */
.action-section {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #d4af37;
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.section-title {
    text-align: center;
    font-size: 1rem;
    color: #d4af37;
    margin-bottom: 0.5rem;
    font-family: 'Georgia', serif;
}

/* 就绪牌堆 */
#draw-pile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -20px;
    margin-bottom: 0.5rem;
}

.card {
    width: 80px;
    height: 120px;
    background-color: #1a2a4b;
    border: 2px solid #d4af37;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

.card.back {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 120"><rect width="80" height="120" fill="%231a2a4b"/><path d="M40 20 L 20 60 L 40 100 L 60 60 Z" fill="%23d4af37" opacity="0.5"/><circle cx="40" cy="60" r="15" fill="%238b0000" opacity="0.3"/></svg>');
    background-size: cover;
}

.card.front {
    background-color: rgba(42, 59, 52, 0.8);
    color: #d4af37;
    padding: 0.5rem;
    text-align: center;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5);
}

.card.dragging {
    position: absolute;
    z-index: 100;
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}

.hand-cards {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 资源区 */
.resource-cards {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.resource-card {
    width: 50px;
    height: 70px;
    background-color: rgba(245, 245, 220, 0.8);
    border: 1px solid #d4af37;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    color: #1a2a4b;
    font-size: 0.7rem;
}

.resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(212, 175, 55, 0.5);
}

.resource-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 0.3rem;
    background-size: cover;
}

.resource-icon.potion {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="14" fill="%238b0000"/><path d="M15 5 L 10 20 L 20 20 Z" fill="%23d4af37"/><circle cx="15" cy="12" r="3" fill="%23ffffff" opacity="0.5"/></svg>');
}

.resource-icon.torch {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><rect x="13" y="20" width="4" height="8" fill="%238b4513"/><circle cx="15" cy="18" r="5" fill="%23d4af37"/><circle cx="15" cy="16" r="3" fill="%23ffffff"/></svg>');
}

.resource-icon.salt {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><rect width="30" height="30" fill="%23ffffff"/><path d="M5 5 L 25 25 M25 5 L 5 25" stroke="%23d4af37" stroke-width="2"/></svg>');
}

.resource-name {
    text-align: center;
    font-size: 0.6rem;
}

/* 装备区 */
.equipment-cards {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.equipment-card {
    width: 80px;
    height: 120px;
    background-color: rgba(26, 42, 75, 0.8);
    border: 2px solid #d4af37;
    border-radius: 5px;
    padding: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
}

.equipment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5);
}

.equipment-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    background-size: cover;
}

.equipment-icon.gem {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="%23d4af37"/><path d="M20 5 L 10 20 L 20 35 L 30 20 Z" fill="%23ffffff" opacity="0.5"/></svg>');
}

.equipment-icon.apprentice {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="15" r="8" fill="%23d4af37"/><rect x="15" y="23" width="10" height="12" fill="%231a2a4b"/><path d="M10 35 L 15 25 M30 35 L 25 25" stroke="%238b0000" stroke-width="2"/></svg>');
}

.equipment-icon.scroll {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect x="5" y="10" width="30" height="20" fill="%23f5f5dc"/><path d="M10 15 L 30 15 M10 20 L 30 20 M10 25 L 30 25" stroke="%231a2a4b" stroke-width="1"/><rect x="15" y="5" width="10" height="5" fill="%238b4513"/></svg>');
}

.equipment-name {
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.equipment-effect {
    font-size: 0.6rem;
    color: #8b0000;
    font-style: italic;
}

/* 功能按钮区 */
.function-buttons {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.function-button {
    padding: 10px 20px;
    font-size: 1rem;
    font-family: 'Times New Roman', serif;
    background-color: rgba(26, 42, 75, 0.8);
    color: #d4af37;
    border: 2px solid #d4af37;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.function-button:hover:not(:disabled) {
    background-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.function-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 手牌区域 */
.hand-cards {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-height: 130px;
    overflow: hidden;
}

/* 提示信息 */
.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #d4af37;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
}

.tooltip.show {
    opacity: 1;
}

/* 拖曳效果 */
.dragging {
    z-index: 100;
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}

/* 组合成功效果 */
.combination-success {
    animation: combinationFlash 0.3s ease-in-out;
}

@keyframes combinationFlash {
    0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
    50% { box-shadow: 0 0 30px rgba(212, 175, 55, 1); transform: scale(1.1); }
}

/* 卡牌使用动画 */
.card-used {
    animation: cardFadeOut 0.5s ease-out forwards;
}

@keyframes cardFadeOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* 探索成功效果 */
.explore-success {
    animation: exploreSuccess 0.5s ease-out;
}

@keyframes exploreSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); box-shadow: 0 0 30px rgba(212, 175, 55, 1); }
    100% { transform: scale(1); }
}

/* 剧情UI样式 */
.story-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: storyFadeIn 0.5s ease-out;
}

@keyframes storyFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.story-content {
    background-color: rgba(26, 42, 75, 0.95);
    border: 2px solid #d4af37;
    border-radius: 15px;
    padding: 2rem;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.story-text {
    color: #d4af37;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-family: 'Georgia', serif;
    text-align: center;
}

.story-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.story-option {
    padding: 12px 24px;
    font-size: 1rem;
    font-family: 'Times New Roman', serif;
    background-color: rgba(42, 59, 52, 0.8);
    color: #d4af37;
    border: 2px solid #d4af37;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 300px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.story-option:hover {
    background-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    border-color: #8b0000;
}

.story-option:active {
    transform: translateY(0);
}

/* 剧情文本样式 */
.story-text p {
    margin-bottom: 1rem;
}

/* 滚动条样式 */
.story-content::-webkit-scrollbar {
    width: 10px;
}

.story-content::-webkit-scrollbar-track {
    background: rgba(26, 42, 75, 0.5);
    border-radius: 5px;
}

.story-content::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 5px;
}

.story-content::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.8);
}

/* 新的故事界面布局样式 */
.story-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

.story-art-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 80%;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.story-art {
    width: 40%;
    height: 100%;
    background-color: rgba(26, 42, 75, 0.9);
    border: 2px solid #d4af37;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.story-art:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.art-placeholder {
    text-align: center;
    color: #d4af37;
    font-family: 'Georgia', serif;
}

.art-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.story-right-content {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.story-text {
    background-color: rgba(0, 0, 0, 0.9);
    color: #d4af37;
    padding: 1.5rem;
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1.6;
    max-height: 60%;
    overflow-y: auto;
    font-family: 'Georgia', serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid #d4af37;
    margin-bottom: 1.5rem;
}

.story-text::-webkit-scrollbar {
    width: 8px;
}

.story-text::-webkit-scrollbar-track {
    background: rgba(26, 42, 75, 0.5);
    border-radius: 4px;
}

.story-text::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 4px;
}

.story-text::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.8);
}

.story-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-top: auto;
}

.story-option {
    padding: 12px 24px;
    font-size: 1rem;
    font-family: 'Times New Roman', serif;
    background-color: rgba(42, 59, 52, 0.8);
    color: #d4af37;
    border: 2px solid #d4af37;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 300px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.story-option:hover {
    background-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    border-color: #8b0000;
}

.story-option:active {
    transform: translateY(0);
}