/* =====================================================================
   base.css —— 共享基础件（模块 1/5）
   抽屉、浮层、卡牌（塔罗格子）、按钮、CD 条。stage 与 home 共用同一套，
   卡片的默认样式与动画只在这里写一次，改一处，两处一起变。
   ===================================================================== */
/* 背包菜单：塔罗牌格子（恶魔城式精美卡牌），菜单式、可扩展 */
.bagtabs { display: flex; gap: 6px; margin: 8px 0 12px; flex-wrap: wrap; }
.bagtabs button { padding: 5px 12px; font-size: 0.8rem; }
.tarot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.tarot-card {
  background: linear-gradient(180deg, #141a26, #0c1017); border: 1px solid var(--gold);
  border-radius: 10px; padding: 10px 6px 8px; text-align: center; position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.tarot-card .tc-ic { font-size: 1.6rem; line-height: 1.2; }
.tarot-card .tc-nm { font-size: 0.72rem; color: var(--text); margin-top: 4px; line-height: 1.3; min-height: 1.8em; }
.tarot-card .tc-ct { font-size: 0.7rem; color: var(--gold); margin-top: 2px; }
.tarot-card button { margin-top: 6px; padding: 3px 10px; font-size: 0.72rem; }
.tarot-card.q-SSR { border-color: #f6d890; box-shadow: 0 0 12px rgba(246,216,144,0.35); }
.tarot-card.q-SR { border-color: #c79a4b; }

/* 驻军类型选项卡（文案正式版，非讨论简称） */
.opt {
  display: block; width: 100%; text-align: left; margin-bottom: 8px;
  background: #101622; border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 12px 14px; cursor: pointer;
}
.opt b { display: block; font-size: 0.9rem; color: var(--gold); font-weight: 500; margin-bottom: 2px; }
.opt span { font-size: 0.78rem; color: var(--text); }
.opt:active { background: var(--gold-dim); border-color: var(--gold); }

/* 抽屉 */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
.drawer-panel {
  position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%);
  width: 100%; max-width: 480px; max-height: 78vh; overflow-y: auto;
  background: #0c1017; border-top: 1px solid var(--gold);
  border-radius: 20px 20px 0 0; padding: 24px; z-index: 300;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-panel.show { transform: translate(-50%, 0); }
.panel-close {
  position: absolute; top: 14px; right: 16px; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--glass-border); background: transparent;
  color: var(--text); font-size: 0.8rem; cursor: pointer; padding: 0;
}
.panel-close:active { background: var(--gold-dim); color: var(--gold); }

/* 抽屉内通用 */
#sheet h2 { font-size: 1.15rem; color: var(--gold); margin-bottom: 6px; font-weight: 400; padding-right: 32px; }
#sheet h3 { font-size: 0.85rem; color: var(--gold); margin: 16px 0 6px; font-weight: 500; letter-spacing: 1px; }
#sheet p { font-size: 0.85rem; color: var(--text); line-height: 1.6; margin-bottom: 10px; }
#sheet .dim { color: var(--text-dim); font-size: 0.78rem; }
#sheet .dp { font-size: 0.7rem; color: var(--text-dim); margin-left: 6px; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text);
  background: var(--glass-card); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 5px 10px;
}
.tag.good { color: #7ee081; border-color: rgba(126,224,129,0.4); }
.tag.bad { color: #ff8a7a; border-color: rgba(255,138,122,0.4); }
.tag.dim { color: var(--text-dim); }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
#sheet button, .grave-exp button {
  background: #101622; border: 1px solid var(--glass-border); color: var(--gold);
  border-radius: 8px; padding: 9px 14px; font-size: 0.82rem; letter-spacing: 0.5px; cursor: pointer;
}
#sheet button:active, .grave-exp button:active { background: var(--gold); color: #000; }
#sheet button.ghost { background: transparent; }
#sheet button:disabled { opacity: 0.35; }
#sheet button.gold { background: var(--gold-dim); border-color: var(--gold); }
#sheet button.close { width: 100%; padding: 12px; background: var(--gold-dim); border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; font-size: 0.85rem; margin-top: 14px; }
.plist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.plist button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; }
.plist button span { font-size: 0.75rem; color: var(--text-dim); }
.drow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(223,186,115,0.08); font-size: 0.85rem; color: var(--text); }
.drow .di { font-size: 1rem; }
.drow .dp { margin-left: auto; }
.dimline { margin: 8px 0; }

/* 抽屉内通用 */
#sheet h2 { font-size: 1.15rem; color: var(--gold); margin-bottom: 6px; font-weight: 400; padding-right: 32px; }
#sheet h3 { font-size: 0.85rem; color: var(--gold); margin: 16px 0 6px; font-weight: 500; letter-spacing: 1px; }
#sheet p { font-size: 0.85rem; color: var(--text); line-height: 1.6; margin-bottom: 10px; }
#sheet .dim { color: var(--text-dim); font-size: 0.78rem; }
#sheet .dp { font-size: 0.7rem; color: var(--text-dim); margin-left: 6px; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text);
  background: var(--glass-card); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 5px 10px;
}
.tag.good { color: #7ee081; border-color: rgba(126,224,129,0.4); }
.tag.bad { color: #ff8a7a; border-color: rgba(255,138,122,0.4); }
.tag.dim { color: var(--text-dim); }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
#sheet button, .grave-exp button {
  background: #101622; border: 1px solid var(--glass-border); color: var(--gold);
  border-radius: 8px; padding: 9px 14px; font-size: 0.82rem; letter-spacing: 0.5px; cursor: pointer;
}
#sheet button:active, .grave-exp button:active { background: var(--gold); color: #000; }
#sheet button.ghost { background: transparent; }
#sheet button:disabled { opacity: 0.35; }
#sheet button.gold { background: var(--gold-dim); border-color: var(--gold); }
#sheet button.close { width: 100%; padding: 12px; background: var(--gold-dim); border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; font-size: 0.85rem; margin-top: 14px; }
.plist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.plist button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; }
.plist button span { font-size: 0.75rem; color: var(--text-dim); }
.drow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(223,186,115,0.08); font-size: 0.85rem; color: var(--text); }
.drow .di { font-size: 1rem; }
.drow .dp { margin-left: auto; }
.dimline { margin: 8px 0; }

/* CD：小黑屋式倒退进度条——金色从满退到空，退完就绪，不写秒数 */
.cdbtn { position: relative; overflow: hidden; }
.cdfill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(230,168,23,.38); pointer-events: none; }
.cdbtn .cdlabel { position: relative; z-index: 1; }
.cdbar { position: relative; height: 4px; border-radius: 2px; background: #1c2a3a; overflow: hidden; margin: 8px 0; }
.cdbar .cdfill { background: #e6a817; }
.tag.cdtg { position: relative; overflow: hidden; }
.tag.cdtg .cdlabel, .tag.cdtg button { position: relative; z-index: 1; }

/* 居中浮层（抽卡、立碑） */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); z-index: 400; display: none; align-items: center; justify-content: center; }
.overlay.show { display: flex; }
.drawcard {
  width: 280px; background: #0c1017; border: 1px solid var(--gold); border-radius: 16px;
  padding: 24px 20px; text-align: center; box-shadow: 0 0 40px var(--gold-glow);
  animation: card-in .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes card-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.drawcard .q { font-size: 1.6rem; font-weight: 200; letter-spacing: 2px; margin-bottom: 8px; }
.drawcard .q-R { color: #9fb3c8; } .drawcard .q-SR { color: #b78cff; } .drawcard .q-SSR { color: var(--gold); text-shadow: 0 0 16px var(--gold-glow); }
.drawcard .nm { font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.drawcard .ds { font-size: 0.82rem; color: var(--text); line-height: 1.6; margin-bottom: 14px; }
.drawcard button { width: 100%; background: var(--gold-dim); border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; padding: 11px; font-size: 0.85rem; cursor: pointer; }
.drawcard button:active { background: var(--gold); color: #000; }
.drawcard button.ghost { background: transparent; margin-top: 8px; }
.drawcard textarea {
  width: 100%; min-height: 64px; background: #101622; border: 1px solid var(--glass-border);
  border-radius: 8px; color: #fff; padding: 10px; font-size: 0.85rem; margin-bottom: 10px; resize: none;
}

/* 朗基努斯之枪：金光 */
.beam {
  position: fixed; inset: 0; z-index: 350; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(223,186,115,0.55) 50%, transparent 58%);
  transition: opacity .15s;
}
.beam.show { opacity: 1; }
#vtag { position: fixed; right: 10px; bottom: 6px; z-index: 90; font-size: 0.6rem; color: var(--text-dim); pointer-events: none; }

/* 折跃过渡（upload-2 的低成本视觉欺骗）：0.6 秒镜头拉伸 + 闪白 + 震颤，stage 与 home 共用 */
/* 折跃：点树进家园。0.6 秒镜头拉伸 + 闪白 + 震颤（upload-2 的低成本视觉欺骗）。 */
.warp-active { animation: warp-jump 0.65s cubic-bezier(0.7, 0, 0.3, 1) forwards !important; }
@keyframes warp-jump {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(0.85); filter: brightness(2) contrast(150%); }
  100% { transform: scale(8); opacity: 0; filter: brightness(5) blur(12px); }
}
.shake-screen { animation: shake 0.3s ease-out; }
.flash-curtain { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 500; }
.flash-curtain.go { opacity: 0.85; }