/* ==========================================
   决胜养老院 v4.1 - 大字号沉浸式样式
   ========================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#C98A5E;--primary-dark:#A86F48;--gold:#B89840;--gold-dark:#9A7E30;
  --bg:#F7F0E0;--bg-card:#F0E6D3;--text:#4A3728;--text-light:#7A5E43;
  --success:#7CB342;--fail:#C96959;--border:#D4C4A8;--radius:10px;
  /* 国风宣纸面板 */
  --panel-bg:#F3EBD8;--panel-border:#5C3D2E;--panel-shadow:rgba(50,28,14,0.10);
  --title-color:#5C3D2E;--divider-color:#BFA878;
  /* 顶栏暗赭石棕 */
  --topbar-bg:#6B4226;--topbar-text:#F0E6D3;
  --font-serif:'SimSun','STSong','FangSong','KaiTi','Microsoft YaHei',serif;
  font-family:var(--font-serif);
  font-size:calc(100vw/1920*20); /* 放大基础字号 */
}
html,body{width:100%;height:100%;overflow:hidden;background:#1a1a1a;}

/* 16:9 容器 */
#game-container{
  position:relative;width:min(100vw,177.78vh);height:min(100vh,56.25vw);
  left:50%;top:50%;transform:translate(-50%,-50%);
  overflow:hidden;background:#000;
}
@media(min-aspect-ratio:16/9){#game-container{width:calc(100vh/9*16);height:100vh;}}
@media(max-aspect-ratio:16/9){#game-container{width:100vw;height:calc(100vw/16*9);}}

.screen{position:absolute;inset:0;display:none;overflow:hidden;}
.screen.active{display:block;}

/* ===== 标题界面 ===== */
#title-screen{background:#3a2a1a;}
#title-screen.active{display:flex;align-items:center;justify-content:center;}
.title-bg{position:absolute;inset:0;background:#3a2a1a center/cover no-repeat;filter:brightness(0.35);}
.title-content{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
.title-name{font-size:3.5rem;font-weight:900;color:#fff;text-shadow:0 0.2rem 1rem rgba(0,0,0,0.6);letter-spacing:0.6rem;}
.title-sub{font-size:1.2rem;color:rgba(255,255,255,0.75);letter-spacing:0.2rem;margin-bottom:0.5rem;}
.title-menu{display:flex;flex-direction:column;gap:0.8rem;margin-top:0.5rem;}
.title-btn{width:16rem;padding:0.9rem 2rem;border:none;border-radius:0.4rem;font-size:1.2rem;font-weight:600;cursor:pointer;letter-spacing:0.15rem;transition:all 0.2s;font-family:inherit;background:linear-gradient(135deg,#E8915A,#D4834A);color:#fff;box-shadow:0 0.2rem 1rem rgba(232,145,90,0.35);}
.title-btn:hover{transform:translateY(-0.15rem);box-shadow:0 0.3rem 1.4rem rgba(232,145,90,0.5);}
.title-btn.secondary{background:var(--panel-bg);border:1.5px solid var(--panel-border);color:var(--text);box-shadow:0 0.05rem 0.15rem var(--panel-shadow);}
.title-btn.secondary:hover{background:linear-gradient(135deg,rgba(232,145,90,0.08),rgba(212,131,74,0.04));color:var(--title-color);border-color:var(--primary);}
/* 标题界面深色背景下恢复白色半透明按钮 */
#title-screen .title-btn.secondary{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#ddd;box-shadow:none;}
#title-screen .title-btn.secondary:hover{background:rgba(255,255,255,0.2);color:#fff;}
.title-ver{font-size:0.8rem;color:rgba(255,255,255,0.35);margin-top:1rem;}

/* ===== 剧情对话 ===== */
#dialogue-screen{background:#000;}
.dialogue-bg{position:absolute;inset:0;background:#1a1a2e center/cover no-repeat;transition:background 0.8s;}
.dialogue-menu-btn{position:absolute;top:1rem;right:1.2rem;z-index:10;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);color:#fff;font-size:1.4rem;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,0.2);}
.dialogue-menu-btn:hover{background:rgba(0,0,0,0.6);}
/* 角色立绘 - 左侧，在背景之上、对话框之下 */
#dialogue-char-left{
  position:absolute;left:4%;bottom:8.5rem;z-index:2;pointer-events:none;
  width:18%;height:65%;background:center bottom/contain no-repeat;
  opacity:0;transition:opacity 0.5s;
}
#dialogue-char-right{display:none;}
.dialogue-box{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;
  width:86%;min-height:8.5rem;padding:1.5rem 2rem;
  background:rgba(0,0,0,0.72);border-radius:0.6rem;
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.1);
}
.dialogue-speaker{font-size:1.3rem;color:var(--primary);margin-bottom:0.5rem;font-weight:700;letter-spacing:0.1rem;}
.dialogue-text{font-size:1.4rem;color:#eee;line-height:1.8;min-height:3rem;transition:opacity 0.2s;}
.dialogue-indicator{position:absolute;bottom:0.3rem;right:1.2rem;font-size:0.9rem;color:rgba(255,255,255,0.4);animation:blink 1.2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:0.4}50%{opacity:1}}
.dialogue-skip{position:absolute;bottom:1.5rem;right:2rem;z-index:5;padding:0.5rem 1.2rem;font-size:0.9rem;color:rgba(255,255,255,0.5);cursor:pointer;border:1px solid rgba(255,255,255,0.2);border-radius:1rem;}
.dialogue-skip:hover{color:#fff;border-color:rgba(255,255,255,0.5);}

/* ===== 游戏主界面（无中间面板）===== */
#game-screen{background:#ddd;display:none;flex-direction:column;}
#game-screen.active{display:flex;}
.game-bg{position:absolute;inset:0;z-index:0;background:#c8b89a center/cover no-repeat;filter:brightness(0.58) sepia(0.08);}
.game-topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;background:var(--topbar-bg);color:var(--topbar-text);flex-wrap:nowrap;gap:0.8rem;border-bottom:2px solid var(--panel-border);}
.topbar-left{display:flex;align-items:center;gap:0.9rem;flex:1;min-width:0;}
.topbar-right{display:flex;align-items:center;flex-shrink:0;}
.topbar-item{font-size:1rem;font-weight:600;white-space:nowrap;font-family:var(--font-serif);}
#top-title{display:inline-block;color:rgba(240,230,211,0.95);font-weight:700;font-style:normal;font-size:0.95rem;padding:0.2rem 0.5rem;border:1.5px solid rgba(240,230,211,0.45);border-radius:0.2rem;white-space:nowrap;font-family:var(--font-serif);letter-spacing:0.05rem;}
.topbar-btn{padding:0.3rem 0.7rem;border:1.5px solid rgba(240,230,211,0.4);border-radius:0.2rem;background:rgba(240,230,211,0.12);color:var(--topbar-text);cursor:pointer;font-size:0.9rem;font-family:var(--font-serif);}
.topbar-btn:hover{background:rgba(240,230,211,0.25);}
/* 游戏菜单覆盖层（居中） */
#game-menu-overlay{position:absolute;inset:0;z-index:60;display:none;background:rgba(0,0,0,0.7);align-items:center;justify-content:center;}
#game-menu-overlay.active{display:flex;}
/* 牌组管理覆盖层 */
#deck-overlay{position:absolute;inset:0;z-index:60;display:none;background:rgba(0,0,0,0.75);align-items:center;justify-content:center;}
#deck-overlay.active{display:flex;}
.deck-option{width:5rem;padding:0.3rem;border-radius:0.4rem;border:2px solid transparent;cursor:pointer;text-align:center;background:rgba(0,0,0,0.2);font-size:0.7rem;color:#ccc;transition:all 0.15s;}
.deck-option.selected{border-color:var(--primary);background:rgba(232,145,90,0.2);color:#fff;}
.deck-option.locked{opacity:0.5;cursor:default;}

.game-body{position:relative;z-index:2;display:flex;justify-content:flex-start;align-items:stretch;padding:0.3rem 0.4rem;flex:1;overflow:hidden;}
.game-left{width:27%;display:flex;flex-direction:column;overflow-y:scroll;scrollbar-width:none;position:relative;height:100%;}
.game-left::-webkit-scrollbar{display:none;}
/* 折叠按钮 */
.collapse-btn{position:absolute;top:0.3rem;right:0.3rem;z-index:5;width:1.6rem;height:1.6rem;border:none;border-radius:50%;background:rgba(0,0,0,0.3);color:#fff;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.collapse-btn:hover{background:rgba(0,0,0,0.5);}
.game-left.collapsed{width:2rem;overflow:hidden;}
.game-left.collapsed #game-left{display:none;}
.game-left .collapse-btn::after{content:'◀';}
.game-left.collapsed .collapse-btn{right:auto;left:50%;transform:translateX(-50%);}
.game-left.collapsed .collapse-btn::after{content:'▶';}
/* 固定高度子面板 */
.panel-scroll{max-height:8rem;overflow-y:scroll;scrollbar-width:none;}
.panel-scroll::-webkit-scrollbar{display:none;}
.panel-elders-scroll{max-height:10rem;overflow-y:scroll;scrollbar-width:none;}
.panel-elders-scroll::-webkit-scrollbar{display:none;}
/* 国风宣纸面板 */
.panel-box{
  background:var(--panel-bg);
  border:1.5px solid var(--panel-border);
  border-radius:0.2rem;
  padding:0.65rem 0.75rem;
  font-size:0.95rem;
  margin-bottom:0.35rem;
  box-shadow:0 0.1rem 0.5rem var(--panel-shadow),inset 0 0 0 0.5px rgba(92,61,46,0.06);
  position:relative;
  font-family:var(--font-serif);
  /* 宣纸杂色肌理 + 微弱回纹噪点 */
  background-image:
    url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-color:var(--panel-bg);
}
.panel-title{
  font-weight:700;color:var(--title-color);margin-bottom:0.5rem;font-size:1.05rem;
  font-family:var(--font-serif);letter-spacing:0.05rem;
  border-bottom:1px solid var(--divider-color);padding-bottom:0.35rem;
}

.game-bottombar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0.4rem 1rem;background:var(--panel-bg);border-top:1.5px solid var(--panel-border);font-size:0.9rem;font-family:var(--font-serif);box-shadow:0 -0.1rem 0.4rem var(--panel-shadow);}
#ap-bar{font-size:1.05rem;letter-spacing:0.12rem;color:var(--title-color);font-weight:700;font-family:var(--font-serif);}
#phase-label{font-family:var(--font-serif);color:var(--text-light);}
#btn-next-day{display:none;}

/* 行动按钮 - 国风木质 */
.action-btn{display:block;width:100%;padding:0.65rem 0.85rem;margin-bottom:0.35rem;
  border:1.5px solid var(--panel-border);border-radius:0.25rem;
  background:var(--panel-bg);cursor:pointer;font-size:0.95rem;text-align:left;
  transition:all 0.15s;font-family:var(--font-serif);color:var(--text);font-weight:600;
  box-shadow:0 0.05rem 0.15rem var(--panel-shadow);}
.action-btn:hover{border-color:var(--primary);transform:translateX(0.15rem);
  background:linear-gradient(135deg,rgba(232,145,90,0.08),rgba(212,131,74,0.04));}
.action-btn.urgent{border-color:#A0522D;background:rgba(160,82,45,0.08);}
.action-btn.manage{border-color:#C4A060;background:linear-gradient(135deg,rgba(196,160,96,0.08),transparent);}

/* 老人卡 - 宣纸卡片 */
.elder-card{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.6rem;
  background:rgba(245,239,223,0.7);border:1px solid var(--divider-color);
  border-radius:0.25rem;margin-bottom:0.3rem;font-family:var(--font-serif);}
.elder-card-img{width:2.8rem;height:2.8rem;border-radius:0.2rem;overflow:hidden;
  background:rgba(107,78,61,0.1);flex-shrink:0;border:1px solid var(--divider-color);}
.elder-card-img img{width:100%;height:100%;object-fit:cover;}
.elder-card-info{font-size:0.85rem;line-height:1.4;flex:1;font-family:var(--font-serif);}
.elder-card-info strong{display:block;}
.bond-tag{font-size:0.7rem;padding:0.1rem 0.4rem;border-radius:0.2rem;
  font-family:var(--font-serif);}
.bond-0,.bond-1{background:rgba(196,168,130,0.15);color:#8B7355;}
.bond-2{background:rgba(107,78,61,0.08);color:#6B4E3D;}
.bond-3{background:rgba(139,115,85,0.12);color:#5D4037;}
.bond-4{background:rgba(156,39,176,0.08);color:#7B1FA2;}
.bond-5{background:rgba(76,175,80,0.08);color:#2E7D32;}
/* 面板内文字段落 */
.panel-box p,.panel-box span{font-family:var(--font-serif);}
/* 面板内细线分隔 */
.panel-divider{height:1px;background:var(--divider-color);margin:0.4rem 0;opacity:0.5;}
/* 祥云小分隔符 */
.panel-divider-yun{
  display:flex;align-items:center;justify-content:center;
  gap:0.3rem;margin:0.3rem 0;color:var(--divider-color);font-size:0.7rem;
  opacity:0.6;font-family:var(--font-serif);}
.panel-divider-yun::before,.panel-divider-yun::after{
  content:'';flex:1;height:1px;background:var(--divider-color);opacity:0.4;}
/* 提示标签——国风小签 */
.tip-tag{
  display:inline-block;padding:0.15rem 0.4rem;margin:0.1rem;
  background:rgba(196,168,130,0.12);border:1px solid var(--divider-color);
  border-radius:0.15rem;font-size:0.72rem;font-family:var(--font-serif);
  color:var(--text-light);}

/* ===== 卡牌战斗界面（独立全屏）===== */
#persuasion-screen{background:#000;display:none;}
#persuasion-screen.active{display:block;}
.persuasion-bg{position:absolute;inset:0;background:center/cover no-repeat;filter:brightness(0.5);z-index:0;}
.persuasion-panel{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;}
.persuasion-top{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 1.5rem;color:#fff;font-size:1.1rem;background:rgba(0,0,0,0.5);}
.persuasion-top-left{display:flex;align-items:center;gap:1rem;}
.persuasion-retry-btn{cursor:pointer;font-size:0.9rem;padding:0.3rem 0.8rem;border:1px solid rgba(255,255,255,0.4);border-radius:0.3rem;background:rgba(255,255,255,0.1);color:#ddd;}
.persuasion-retry-btn:hover{background:rgba(255,255,255,0.25);color:#fff;}
.persuasion-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 3rem;gap:5%;}
.persuasion-char-wrap{width:16rem;flex-shrink:0;text-align:center;}
.persuasion-char-wrap img{width:100%;max-height:55vh;object-fit:contain;border-radius:0.5rem;}
.persuasion-bubble-wrap{flex:1;max-width:22rem;display:flex;align-items:center;}
.persuasion-bubble{background:rgba(0,0,0,0.78);color:#fff;padding:1.5rem 1.8rem;border-radius:1rem 1rem 1rem 0;font-size:1.2rem;line-height:1.9;position:relative;backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,0.12);width:100%;}
.persuasion-bubble::after{content:'';position:absolute;left:-1.2rem;top:1.8rem;width:0;height:0;border:0.6rem solid transparent;border-right-color:rgba(0,0,0,0.78);}
.persuasion-bar-section{padding:0.5rem 2rem;background:rgba(0,0,0,0.5);}
.persuasion-bar-label{display:flex;justify-content:space-between;color:#ddd;font-size:1rem;margin-bottom:0.3rem;}
.persuasion-bar{height:0.9rem;background:rgba(255,255,255,0.15);border-radius:0.4rem;overflow:hidden;}
#persuasion-fill{height:100%;border-radius:0.4rem;transition:width 0.4s;background:var(--primary);}
.persuasion-hand-section{padding:0.8rem 1.5rem;background:rgba(0,0,0,0.6);}
.persuasion-hand{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;}
.hand-card{width:10rem;background:linear-gradient(135deg,#FFF8F0,#FFF3E0);border-radius:0.6rem;overflow:hidden;cursor:pointer;transition:all 0.25s;border:3px solid transparent;box-shadow:0 0.2rem 0.8rem rgba(0,0,0,0.35);}
.hand-card:hover{transform:translateY(-0.5rem);border-color:var(--primary);box-shadow:0 0.4rem 1.5rem rgba(232,145,90,0.55);}
.hand-card-img{height:6.5rem;background:#eee;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hand-card-img img{width:100%;height:100%;object-fit:cover;}
.hand-card-info{padding:0.5rem 0.6rem;font-size:0.9rem;}
.hand-card-info .cname{display:block;font-weight:700;color:var(--text);}
.hand-card-info .cstars{color:var(--gold);font-size:0.8rem;}
.hand-card-info .cpower{color:var(--primary);font-weight:600;font-size:0.85rem;}
.hand-card-info .ctags{color:var(--text-light);font-size:0.7rem;}
.persuasion-feedback{text-align:center;padding:1.2rem;color:#fff;font-size:1.2rem;}
.persuasion-feedback.great{color:var(--success);}
.persuasion-feedback.good{color:var(--primary);}
.persuasion-feedback.poor{color:var(--fail);}
.topic-tag{display:inline-block;padding:0.3rem 0.7rem;margin:0.2rem;background:rgba(255,255,255,0.12);border-radius:0.5rem;font-size:0.85rem;color:#ccc;}
/* 对话气泡中的标签 - 大号醒目 */
.bubble-tag{display:inline-block;padding:0.35rem 0.8rem;margin:0.25rem;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);border-radius:0.5rem;font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:0.05rem;}
/* 卡牌上的标签 - 独立成行 */
.card-tags-row{display:flex;gap:0.15rem;margin-top:0.3rem;flex-wrap:wrap;}
.card-tag{display:inline-block;padding:0.2rem 0.4rem;background:var(--primary);color:#fff;border-radius:0.3rem;font-size:0.7rem;font-weight:600;}

/* ===== 卡牌对战动画特效 ===== */

/* 1. 出牌动画：卡牌放大飞起淡出 */
@keyframes cardPlay {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  30% { transform: scale(1.15) translateY(-0.5rem); opacity: 1; }
  100% { transform: scale(1.2) translateY(-2rem); opacity: 0; }
}
.hand-card.playing {
  animation: cardPlay 0.6s ease-out forwards;
  pointer-events: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0.5rem 2rem rgba(232,145,90,0.6) !important;
}

/* 2. 反馈文字动画 - 从卡牌位置弹入 */
@keyframes feedbackIn {
  0% { transform: scale(0.5) translateY(1rem); opacity: 0; }
  60% { transform: scale(1.05) translateY(-0.3rem); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.persuasion-feedback {
  text-align:center; padding:1.2rem; color:#fff; font-size:1.2rem;
  animation: feedbackIn 0.5s ease-out;
}

/* 3. 匹配效果光晕 */
@keyframes glowPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4) drop-shadow(0 0 0.8rem currentColor); }
}
.persuasion-feedback.great {
  color: #7CB342;
  animation: feedbackIn 0.5s ease-out, glowPulse 1s ease-in-out 0.5s;
}
.persuasion-feedback.good {
  color: var(--primary);
  animation: feedbackIn 0.5s ease-out, glowPulse 1s ease-in-out 0.5s;
}

/* 4. 说服力条命中闪光 */
@keyframes barFlash {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.5) saturate(1.5); }
  100% { filter: brightness(1); }
}
#persuasion-fill.hit { animation: barFlash 0.4s ease-out; }

/* 5. 说服成功：条满金光 */
@keyframes barVictory {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.6) saturate(2); }
  100% { filter: brightness(1); }
}
#persuasion-fill.win {
  background: linear-gradient(90deg,var(--primary),#D4A847,var(--primary));
  background-size: 200% 100%;
  animation: barVictory 0.8s ease-out, shimmer 1.5s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 6. 对话气泡滑入 */
@keyframes bubbleSlideIn {
  0% { transform: translateX(2rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.persuasion-bubble.new-round { animation: bubbleSlideIn 0.4s ease-out; }

/* 7. 角色立绘微动 */
@keyframes charPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
#persuasion-char.talking { animation: charPulse 2s ease-in-out infinite; }

/* 8. 成功时画面微震 */
@keyframes screenShake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-0.3rem,0.1rem); }
  40% { transform: translate(0.3rem,-0.1rem); }
  60% { transform: translate(-0.2rem,-0.1rem); }
  80% { transform: translate(0.2rem,0.1rem); }
}
.persuasion-stage.shake { animation: screenShake 0.5s ease-out; }

/* 9. 新回合发牌 - 卡牌渐入 */
@keyframes dealCard {
  0% { transform: translateY(3rem) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.hand-card.dealt {
  animation: dealCard 0.4s ease-out forwards;
  animation-delay: var(--deal-delay, 0s);
}

/* 10. 手牌悬浮微动 */

/* 11. 战斗背景缓入 */
@keyframes bgFadeIn {
  0% { opacity: 0.5; filter: brightness(0.3); }
  100% { opacity: 1; filter: brightness(0.5); }
}
#persuasion-screen.active .persuasion-bg { animation: bgFadeIn 1s ease-out; }

/* ===== 图鉴界面 ===== */
#gallery-screen{background:rgba(0,0,0,0.94);display:none;flex-direction:column;}
#gallery-screen.active{display:flex;}
.gallery-header{display:flex;justify-content:space-between;align-items:center;padding:0.8rem 1.2rem;color:#fff;background:var(--topbar-bg);}
.gallery-header span{font-size:1.3rem;font-weight:700;font-family:var(--font-serif);}
.gallery-body{flex:1;overflow-y:auto;padding:1rem 1.5rem;scrollbar-width:none;}
.gallery-body::-webkit-scrollbar{display:none;}
.gallery-section-title{font-size:1.1rem;font-weight:700;color:#D4A847;font-family:var(--font-serif);margin-bottom:0.6rem;padding-bottom:0.3rem;border-bottom:1px solid rgba(212,168,71,0.2);}
.gallery-grid{display:flex;flex-wrap:wrap;gap:0.8rem;justify-content:flex-start;}
.gallery-card{width:9rem;background:rgba(255,255,255,0.06);border-radius:0.4rem;overflow:hidden;cursor:pointer;transition:transform 0.2s;border:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;}
.gallery-card:hover{transform:scale(1.05);}
.gallery-card-img{width:100%;height:0;padding-bottom:140%;position:relative;background:rgba(0,0,0,0.2);overflow:hidden;}
.gallery-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.gallery-card-info{padding:0.5rem 0.6rem;color:#ccc;font-size:0.78rem;text-align:center;}
.gallery-card-info strong{display:block;color:#fff;font-size:0.9rem;margin-bottom:0.15rem;}
.gallery-card-info .card-desc{font-size:0.7rem;color:#999;margin-top:0.15rem;}
.locked-card{opacity:0.25;cursor:default;filter:grayscale(0.8);}
.locked-card:hover{transform:none;}
/* 结局卡片 */
.gallery-ending-card{width:14rem;background:rgba(255,255,255,0.06);border-radius:0.4rem;overflow:hidden;cursor:pointer;transition:transform 0.2s;border:1px solid rgba(255,255,255,0.08);}
.gallery-ending-card:hover{transform:scale(1.05);}
.gallery-ending-card .ending-img{width:100%;height:0;padding-bottom:56.25%;position:relative;background:rgba(0,0,0,0.3);overflow:hidden;}
.gallery-ending-card .ending-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gallery-ending-card .ending-info{padding:0.5rem 0.6rem;text-align:center;color:#ccc;}
.gallery-ending-card .ending-info strong{display:block;color:#fff;font-size:0.85rem;}
.gallery-ending-card .ending-info .ending-status{font-size:0.7rem;color:#999;margin-top:0.2rem;}
/* CG详情弹窗 */
.gallery-detail-overlay{position:absolute;inset:0;z-index:70;display:none;background:rgba(0,0,0,0.85);align-items:center;justify-content:center;}
.gallery-detail-overlay.active{display:flex;}
.gallery-detail-panel{position:relative;max-width:30rem;width:90%;background:rgba(20,15,10,0.95);border:1px solid rgba(212,168,71,0.3);border-radius:0.4rem;padding:1.5rem;text-align:center;color:#fff;}
.gallery-detail-close{position:absolute;top:0.5rem;right:0.5rem;background:transparent;border:none;color:rgba(255,255,255,0.5);font-size:1.2rem;cursor:pointer;}
.gallery-detail-close:hover{color:#fff;}
#gallery-detail-img{width:100%;margin-bottom:0.8rem;}
#gallery-detail-img img{width:100%;max-height:40vh;object-fit:contain;border-radius:0.3rem;}
#gallery-detail-title{font-size:1.1rem;font-family:var(--font-serif);margin-bottom:0.5rem;color:#D4A847;}
#gallery-detail-desc{font-size:0.85rem;color:#ccc;margin-bottom:0.5rem;line-height:1.6;}

/* 设置面板（国风统一） */
#settings-screen{background:rgba(0,0,0,0.85);display:none;}
#settings-screen.active{display:flex;align-items:center;justify-content:center;}
.settings-overlay{width:30rem;max-width:90%;}
.settings-panel{
  background:var(--panel-bg); border:1.5px solid var(--panel-border);
  border-radius:0.2rem; padding:2rem; display:flex; flex-direction:column;
  gap:1.2rem; align-items:center; font-family:var(--font-serif);
  box-shadow:0 0.1rem 0.5rem var(--panel-shadow),inset 0 0 0 0.5px rgba(92,61,46,0.06);
  background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-color:var(--panel-bg);
  color:var(--text);
}
.settings-panel h2{color:var(--title-color);font-size:1.4rem;border-bottom:1px solid var(--divider-color);padding-bottom:0.6rem;width:100%;text-align:center;}
.setting-row{display:flex;align-items:center;gap:0.8rem;width:100%;font-size:1rem;}
.setting-row span{min-width:7rem;color:var(--text-light);font-family:var(--font-serif);}
.setting-row input[type=range]{flex:1;}

/* 暂停/菜单覆盖层 */
#game-menu-overlay{position:absolute;inset:0;z-index:60;display:none;background:rgba(0,0,0,0.7);align-items:center;justify-content:center;}
#game-menu-overlay.active{display:flex;}

/* 通知 */
#notification{position:absolute;top:8%;left:50%;transform:translateX(-50%);z-index:99;background:rgba(74,55,40,0.92);color:#fff;padding:0.8rem 1.8rem;border-radius:2rem;font-size:1rem;opacity:0;pointer-events:none;transition:opacity 0.3s;backdrop-filter:blur(4px);}
#notification.show{opacity:1;}

/* 滚动条 */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:3px;}

/* ===== 卡牌备战界面 ===== */
#card-manager-screen{background:rgba(0,0,0,0.94);display:none;flex-direction:column;z-index:80;position:absolute;inset:0;}
#card-manager-screen.active{display:flex;}
.cm-header{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 1.2rem;background:var(--topbar-bg);color:var(--topbar-text);flex-shrink:0;}
.cm-header-title{font-size:1.2rem;font-weight:700;font-family:var(--font-serif);letter-spacing:0.08rem;}
.cm-back-btn{padding:0.35rem 1.2rem;border:1.5px solid rgba(240,230,211,0.5);border-radius:0.2rem;background:rgba(240,230,211,0.12);color:var(--topbar-text);cursor:pointer;font-size:0.9rem;font-family:var(--font-serif);transition:all 0.15s;}
.cm-back-btn:hover{background:rgba(240,230,211,0.3);}
.cm-body{flex:1;display:flex;padding:0.6rem 0.8rem;gap:0.8rem;overflow:hidden;min-height:0;}
.cm-left{flex:1.1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.cm-divider{width:2px;background:rgba(191,168,120,0.25);align-self:stretch;flex-shrink:0;}
.cm-right{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.cm-section-title{font-size:0.95rem;font-weight:700;color:var(--topbar-text);font-family:var(--font-serif);margin-bottom:0.35rem;padding-bottom:0.25rem;border-bottom:1px solid rgba(240,230,211,0.2);flex-shrink:0;}
#cm-deck-count{font-size:0.8rem;color:var(--primary-dark);font-weight:400;float:right;}
.cm-deck-scroll{flex:1;overflow-y:scroll;scrollbar-width:none;display:flex;flex-wrap:wrap;gap:0.4rem;align-content:flex-start;min-height:0;}
.cm-deck-scroll::-webkit-scrollbar{display:none;}
/* 卡牌卡片 - 5列，完整立绘 */
.cm-card{width:calc(20% - 0.32rem);display:flex;flex-direction:column;align-items:center;
  background:var(--panel-bg);border:1.5px solid var(--panel-border);border-radius:0.25rem;
  cursor:pointer;font-family:var(--font-serif);transition:all 0.2s;overflow:hidden;
  box-shadow:0 0.08rem 0.3rem rgba(0,0,0,0.15);}
.cm-card:hover{transform:translateY(-0.12rem);border-color:#D4A847;box-shadow:0 0.15rem 0.6rem rgba(212,168,71,0.3);}
.cm-card.in-deck{border-color:#7CB342;box-shadow:0 0 0.4rem rgba(124,179,66,0.2);}
.cm-card .cm-img{width:100%;aspect-ratio:3/4;position:relative;background:rgba(0,0,0,0.12);overflow:hidden;}
.cm-card .cm-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.cm-card .cm-img .cm-lock{position:absolute;top:0.15rem;right:0.15rem;font-size:0.75rem;z-index:1;text-shadow:0 0 0.2rem rgba(0,0,0,0.6);}
.cm-card .cm-img .cm-in-deck-tag{position:absolute;top:0.15rem;left:0.15rem;background:rgba(124,179,66,0.9);color:#fff;font-size:0.55rem;padding:0.08rem 0.25rem;border-radius:0.1rem;font-weight:700;z-index:1;}
.cm-card .cm-info{padding:0.25rem 0.3rem;text-align:center;width:100%;}
.cm-card .cm-name{font-size:0.7rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-card .cm-stars{color:#D4A847;font-size:0.6rem;line-height:1.2;}
.cm-card .cm-power{font-size:0.62rem;color:var(--primary-dark);font-weight:600;}
.cm-card .cm-tags{display:flex;flex-wrap:wrap;gap:0.1rem;justify-content:center;padding-top:0.15rem;}
.cm-tag{display:inline-block;padding:0.1rem 0.3rem;border-radius:0.15rem;background:rgba(212,168,71,0.2);color:#D4A847;font-size:0.58rem;line-height:1;}
.cm-card .cm-action{width:100%;text-align:center;padding:0.18rem;font-size:0.65rem;font-weight:700;border-top:1px solid rgba(191,168,120,0.3);color:var(--text-light);}
.cm-card .cm-action.add{color:#6B8E3D;}
.cm-card .cm-action.remove{color:var(--fail);}
.cm-card.locked{opacity:0.45;cursor:default;}
.cm-card.locked:hover{transform:none;border-color:var(--panel-border);box-shadow:none;}
.cm-empty-slot{width:calc(20% - 0.32rem);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.03);border:1.5px dashed rgba(240,230,211,0.12);border-radius:0.25rem;
  aspect-ratio:0.65;font-size:0.7rem;color:rgba(240,230,211,0.15);font-family:var(--font-serif);}

/* ===== 存档/读档界面（国风统一）===== */
#save-load-screen{background:rgba(0,0,0,0.8);display:none;}
#save-load-screen.active{display:flex;align-items:center;justify-content:center;}
.save-load-overlay{width:100%;display:flex;justify-content:center;}
.save-slot{display:flex;align-items:center;gap:1rem;padding:0.8rem 1rem;margin-bottom:0.5rem;
  background:var(--panel-bg);border-radius:0.2rem;border:1.5px solid var(--panel-border);
  cursor:pointer;transition:all 0.2s;width:100%;font-family:var(--font-serif);
  box-shadow:0 0.05rem 0.15rem var(--panel-shadow);}
.save-slot:hover{border-color:#D4A847;transform:translateX(0.2rem);box-shadow:0 0.1rem 0.5rem rgba(212,168,71,0.2);}
.save-slot.empty{cursor:default;opacity:0.5;}
.save-slot.empty:hover{border-color:var(--panel-border);transform:none;box-shadow:none;}
.save-slot-no{font-size:1.5rem;font-weight:900;color:var(--title-color);min-width:2rem;text-align:center;}
.save-slot-info{flex:1;min-width:0;}
.save-slot-info .ss-title{font-size:1rem;font-weight:700;color:var(--text);}
.save-slot-info .ss-meta{font-size:0.78rem;color:var(--text-light);margin-top:0.2rem;}
.save-slot-info .ss-elders{font-size:0.72rem;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:0.15rem;}
.save-slot-info .ss-empty{font-size:0.85rem;color:var(--text-light);font-style:italic;}
.save-slot-action{min-width:3rem;text-align:center;font-size:1.2rem;color:var(--title-color);font-weight:700;}
.save-slot-del{min-width:2rem;height:2rem;border:1.5px solid var(--divider-color);border-radius:0.2rem;background:transparent;cursor:pointer;font-size:0.9rem;padding:0 0.3rem;transition:all 0.15s;color:var(--text-light);}
.save-slot-del:hover{background:rgba(197,105,89,0.15);border-color:var(--fail);color:var(--fail);}

/* ===== 桌宠吉祥物 ===== */
#desk-pet{
  position:absolute; right:0.5rem; bottom:2.5rem; z-index:50;
  width:12rem; height:12rem; cursor:pointer;
  background-image:url('../../美术资产/sprite_sheet/sprite.png');
  background-size:48rem 48rem;
  background-position:0 0;
  background-repeat:no-repeat;
  image-rendering:auto;
  transition:transform 0.15s;
  filter:drop-shadow(0 0.3rem 0.6rem rgba(0,0,0,0.35));
}
#desk-pet:hover { transform: scale(1.08); }
#desk-pet.playing { pointer-events:none; }
/* 桌宠气泡 */
.pet-bubble{
  position:absolute; left:50%; bottom:105%; transform:translateX(-50%);
  background:rgba(0,0,0,0.78); color:#fff; padding:0.6rem 1rem;
  border-radius:0.7rem 0.7rem 0.7rem 0; font-size:1rem;
  font-family:var(--font-serif); white-space:nowrap; max-width:16rem;
  opacity:0; transition:opacity 0.3s; pointer-events:none;
  overflow:hidden; text-overflow:ellipsis;
}
.pet-bubble::after{
  content:''; position:absolute; right:0.5rem; bottom:-0.6rem;
  width:0;height:0;border:0.4rem solid transparent;
  border-left-color:rgba(0,0,0,0.78);border-top-color:rgba(0,0,0,0.78);
}
.pet-bubble.show{ opacity:1; }
.pet-bubble.fade{ opacity:0; }

/* ===== 教程系统 ===== */
#tutorial-overlay{
  position:absolute; inset:0; z-index:100; display:none;
  background:rgba(0,0,0,0.65);
}
#tutorial-overlay.active{ display:block; }
/* 高亮聚焦框 */
#tutorial-spots{ position:absolute; inset:0; pointer-events:none; }
.tutorial-spot{
  position:absolute; border-radius:0.35rem;
  border:3px solid transparent;
  box-shadow: 0 0 0 0 rgba(255,215,0,0.6);
  animation: spotPulse 1.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 0.2rem rgba(255,215,0,0.5), 0 0 0.8rem rgba(255,215,0,0.2); border-color: rgba(255,215,0,0.85); }
  50% { box-shadow: 0 0 0 0.5rem rgba(255,215,0,0.2), 0 0 1.6rem rgba(255,215,0,0.45); border-color: rgba(255,255,200,1); }
}
/* 教程文本框 */
#tutorial-box{
  position:absolute; min-width:16rem; max-width:24rem;
  background:rgba(20,12,6,0.95); color:#F0E6D3;
  border:2px solid #D4A847; border-radius:0.5rem;
  box-shadow:0 0.3rem 1.5rem rgba(0,0,0,0.6);
  z-index:2; display:flex; align-items:flex-start; gap:0.8rem;
  padding:0.8rem 1rem;
  font-family:var(--font-serif);
}
/* 教程小猫头像 */
#tutorial-cat{
  flex-shrink:0; width:4rem; height:4rem;
  background-image:url('../../美术资产/sprite_sheet/sprite.png');
  background-size:16rem 16rem;
  background-position:0 0;
  background-repeat:no-repeat;
  border-radius:0.3rem;
  border:1.5px solid rgba(212,168,71,0.4);
}
#tutorial-content{ flex:1; min-width:0; }
#tutorial-step{ font-size:0.75rem; color:#D4A847; margin-bottom:0.3rem; }
#tutorial-text{ font-size:0.95rem; line-height:1.7; margin-bottom:0.8rem; color:#F0E6D3; }
#tutorial-btn{
  display:block; width:100%; padding:0.5rem; border:none; border-radius:0.3rem;
  background:linear-gradient(135deg,#D4A847,#B8923A); color:#1a0e04;
  font-size:0.95rem; font-weight:700; cursor:pointer; font-family:var(--font-serif);
  transition:all 0.2s; letter-spacing:0.08rem;
}
#tutorial-btn:hover{ background:linear-gradient(135deg,#E8C568,#D4A847); transform:scale(1.03); }

/* ===== 卡牌奖励弹窗 ===== */
#card-reward-overlay{
  position:absolute; inset:0; z-index:105; display:none;
  background:rgba(0,0,0,0.75); align-items:center; justify-content:center;
}
#card-reward-overlay.active{ display:flex; }
#card-reward-panel{
  width:85%; max-width:40rem; max-height:85%;
  background:rgba(20,12,6,0.97); color:#F0E6D3;
  border:2px solid #D4A847; border-radius:0.6rem;
  padding:1.2rem 1.5rem; display:flex; flex-direction:column;
  font-family:var(--font-serif); box-shadow:0 0.3rem 2rem rgba(0,0,0,0.7);
  overflow:hidden;
}
#card-reward-title{
  font-size:1.3rem; text-align:center; color:#D4A847;
  margin-bottom:0.8rem; flex-shrink:0;
}
#card-reward-list{
  flex:1; overflow-y:auto; scrollbar-width:none;
  display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center;
  padding:0.3rem 0; margin-bottom:0.8rem;
}
#card-reward-list::-webkit-scrollbar{ display:none; }
.card-reward-item{
  display:flex; gap:0.8rem; align-items:flex-start;
  background:rgba(255,255,255,0.05); border:1px solid rgba(212,168,71,0.25);
  border-radius:0.4rem; padding:0.6rem; min-width:0;
  flex:1 1 17rem; max-width:19rem;
}
.card-reward-art{
  flex-shrink:0; width:5rem; height:7rem;
  border-radius:0.3rem; overflow:hidden;
  border:1px solid rgba(212,168,71,0.3);
  background:rgba(0,0,0,0.2);
}
.card-reward-art img{ width:100%; height:100%; object-fit:contain; }
.card-reward-info{ flex:1; min-width:0; font-size:0.8rem; line-height:1.5; }
.card-reward-info .rw-name{ font-size:1rem; font-weight:700; color:#D4A847; }
.card-reward-info .rw-stars{ color:#D4A847; font-size:0.75rem; }
.card-reward-info .rw-desc{ color:#ccc; margin:0.3rem 0; }
.card-reward-info .rw-tags{ display:flex; flex-wrap:wrap; gap:0.15rem; margin-bottom:0.3rem; }
.card-reward-info .rw-tag{
  display:inline-block; padding:0.1rem 0.35rem; border-radius:0.2rem;
  background:rgba(212,168,71,0.2); color:#D4A847; font-size:0.65rem;
}
.card-reward-info .rw-cond{ color:#999; font-size:0.7rem; }
.card-reward-info .rw-power{ color:#E8915A; font-weight:700; }
#card-reward-btn{
  display:block; width:100%; padding:0.6rem; border:none; border-radius:0.3rem;
  background:linear-gradient(135deg,#D4A847,#B8923A); color:#1a0e04;
  font-size:1rem; font-weight:700; cursor:pointer; font-family:var(--font-serif);
  transition:all 0.2s; flex-shrink:0;
}
#card-reward-btn:hover{ background:linear-gradient(135deg,#E8C568,#D4A847); }