/* ============================================================
   屏幕样式：主菜单 / 身份揭示 / 选将 / 图鉴 / 规则 / 结算 / 设置
   ============================================================ */

/* ---------- 通用屏容器 ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: screenIn var(--dur-slow) var(--ease-out);
}
@keyframes screenIn { from { opacity: 0; transform: scale(1.012); } }

/* 夜空背景（全局氛围层：渐层夜幕 + 远山剪影 + 微粒） */
.night-bg { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(120% 90% at 50% -10%, #223351 0%, transparent 60%),
  radial-gradient(90% 70% at 50% 110%, #1c1626 0%, transparent 55%),
  linear-gradient(180deg, #0b1120 0%, #101827 55%, #0a0e18 100%);
}
.night-bg .stars { position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #f2e6cc 60%, transparent 61%),
    radial-gradient(1px 1px at 28% 8%, #e8d9b0 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 44% 22%, #fff7e0 60%, transparent 61%),
    radial-gradient(1px 1px at 63% 12%, #e8d9b0 60%, transparent 61%),
    radial-gradient(1.3px 1.3px at 78% 26%, #fdf6e4 60%, transparent 61%),
    radial-gradient(1px 1px at 88% 8%, #f2e6cc 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 8% 34%, #e8d9b0 60%, transparent 61%),
    radial-gradient(1px 1px at 94% 40%, #fff7e0 60%, transparent 61%);
  opacity: .8;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: .9; } }
.night-bg .moon {
  position: absolute; top: 6%; right: 10%; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fdf6e4, #e8d9b0 66%, #cdbb8a);
  box-shadow: 0 0 60px 18px rgb(233 219 176 / .18), 0 0 140px 60px rgb(233 219 176 / .07);
}
.night-bg .mountains { position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background:
    radial-gradient(58% 100% at 18% 100%, #131c2c 0 60%, transparent 61%),
    radial-gradient(50% 90% at 45% 100%, #101827 0 60%, transparent 61%),
    radial-gradient(64% 100% at 78% 100%, #14203150 0 60%, transparent 61%),
    linear-gradient(180deg, transparent, #0a0f19);
}
.night-bg .mist { position: absolute; left: -20%; right: -20%; bottom: 22%; height: 20%;
  background: radial-gradient(50% 100% at 50% 50%, rgb(232 217 176 / .05), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }

/* ---------- 主菜单 ---------- */
.menu-wrap { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; }
.menu-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); padding: var(--space-xl); text-align: center; }
.game-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; user-select: none; }
.game-logo .seal {
  width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--cinnabar-500), var(--cinnabar-600));
  border: 2px solid color-mix(in oklab, var(--gold-400) 55%, transparent);
  box-shadow: var(--shadow-2), inset 0 0 0 3px rgb(0 0 0 / .18);
  font-family: var(--font-display); font-size: 40px; color: var(--paper-50);
  transform: rotate(-4deg);
}
.game-logo h1 {
  font-size: var(--text-display); line-height: 1.1; color: var(--paper-50);
  text-shadow: 0 3px 0 rgb(0 0 0 / .35), 0 10px 34px rgb(201 162 39 / .22);
  background: linear-gradient(180deg, #fdf6e4 30%, var(--gold-300) 62%, var(--gold-500));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.game-logo .sub { font-size: var(--text-lg); letter-spacing: .5em; text-indent: .5em; color: var(--fg-dim); }
.menu-actions { display: flex; flex-direction: column; gap: var(--space-sm); width: min(320px, 84vw); margin-top: var(--space-md); }
.menu-actions .btn { width: 100%; }
.menu-lineup { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; gap: 0; pointer-events: none; }
.menu-lineup .lp { width: clamp(84px, 10vw, 138px); opacity: .92; transform: none; transition: transform var(--dur) var(--ease-out); }
.menu-lineup .lp:hover { transform: translateY(2%) scale(1.04); }
.menu-lineup .lp svg { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .5)); }
.menu-footer {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-size: var(--text-xs); color: var(--fg-dim); z-index: 3; white-space: nowrap;
  padding: 3px 16px; border-radius: 999px;
  background: rgb(10 15 26 / .55); border: 1px solid var(--line);
}

/* 难度选择弹层 */
.diff-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); }
.diff-item {
  padding: var(--space-md) var(--space-xs); text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--ink-800); transition: all var(--dur) var(--ease-out);
}
.diff-item b { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--paper-50); }
.diff-item small { font-size: var(--text-xs); }
.diff-item:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-gold); }

/* ---------- 身份揭示 ---------- */
.reveal-wrap { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xl); padding: var(--space-lg); }
.identity-card {
  --ic: var(--gold-500);
  width: min(240px, 60vw); aspect-ratio: 5/3.4; border-radius: 14px;
  background: linear-gradient(165deg, color-mix(in oklab, var(--ic) 30%, var(--ink-700)), var(--ink-800) 70%);
  border: 2px solid color-mix(in oklab, var(--ic) 72%, transparent);
  box-shadow: var(--shadow-2), inset 0 0 40px color-mix(in oklab, var(--ic) 16%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  perspective: 800px;
}
.identity-card .ic-name { font-family: var(--font-display); font-size: 56px; line-height: 1.15; color: var(--ic); text-shadow: 0 2px 0 rgb(0 0 0 / .4); }
.identity-card .ic-desc { font-size: var(--text-sm); color: var(--fg-dim); }
.identity-card.hidden .ic-name { color: var(--fg-dim); }
.flip-stage { perspective: 900px; width: min(240px, 60vw); aspect-ratio: 5/3.4; position: relative; }
.flip-card { transform-style: preserve-3d; transition: transform .8s var(--ease-in-out); }
.flip-card.flipped { transform: rotateY(180deg); }
.flip-face { backface-visibility: hidden; position: absolute; inset: 0; }
.flip-face.front { transform: rotateY(180deg); }
.flip-back-show { width: min(240px, 60vw); aspect-ratio: 5/3.4; border-radius: 14px;
  background: linear-gradient(150deg, #1c2a44, #0f1726);
  border: 2px solid var(--line-strong); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; color: var(--gold-400); letter-spacing: .3em; }

/* ---------- 选将 ---------- */
.setup-wrap { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: var(--space-md) var(--space-lg); gap: var(--space-md); overflow: hidden; }
.setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.setup-head h2 { font-size: var(--text-2xl); color: var(--gold-300); }
.setup-body { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); min-height: 0; }
.picks-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: var(--space-md); align-content: center; }
.general-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; text-align: center;
  padding: 10px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border: 1.5px solid var(--line); color: var(--fg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.general-card .gc-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .45)); }
.general-card .gc-strip { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.general-card .gc-kingdom { font-size: var(--text-xs); padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.general-card.k-wei .gc-kingdom { color: var(--k-wei); }
.general-card.k-shu .gc-kingdom { color: var(--k-shu); }
.general-card.k-wu .gc-kingdom { color: var(--k-wu); }
.general-card.k-qun .gc-kingdom { color: var(--k-qun); }
.general-card .gc-name { font-family: var(--font-display); font-size: 21px; color: var(--paper-50); white-space: nowrap; }
.general-card .gc-hp { font-size: var(--text-xs); color: var(--fg-dim); }
.general-card .gc-skills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.general-card .gc-skill { font-size: var(--text-xs); color: var(--gold-300); background: rgb(201 162 39 / .12); border: 1px solid rgb(201 162 39 / .3); padding: 1px 8px; border-radius: 999px; }
.general-card:hover:not(.disabled) { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-gold); }
.general-card.selected { border-color: var(--gold-400); box-shadow: var(--shadow-gold), 0 0 24px rgb(201 162 39 / .25); }
.general-card.selected::after { content: '✓ 已选'; position: absolute; top: 8px; right: 8px; font-size: var(--text-xs); background: var(--gold-500); color: #241a06; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.general-card.disabled { opacity: .55; }
.detail-pane { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); overflow: auto; min-height: 0; }
.detail-pane .dp-name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--paper-50); }
.detail-pane .dp-title { color: var(--gold-300); font-size: var(--text-md); letter-spacing: .2em; }
.detail-pane .dp-bio { color: var(--fg-dim); font-size: var(--text-sm); }
.skill-item { border-left: 3px solid var(--gold-500); padding: 6px 12px; background: rgb(201 162 39 / .06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.skill-item b { color: var(--gold-300); margin-right: 8px; font-family: var(--font-display); font-weight: 400; letter-spacing: .1em; }
.skill-item p { font-size: var(--text-sm); color: var(--fg-dim); line-height: 1.7; }
.setup-foot { display: flex; justify-content: space-between; gap: var(--space-md); }
.setup-id-badge {
  font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: .2em; text-indent: .2em;
  color: var(--ic, var(--fg-dim)); padding: 2px 16px; border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--ic, var(--gold-500)) 60%, transparent);
  background: color-mix(in oklab, var(--ic, var(--gold-500)) 12%, transparent);
}

/* ---------- 图鉴 / 规则 ---------- */
.codex-wrap { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: var(--space-md) var(--space-lg); gap: var(--space-sm); min-height: 0; }
.codex-tabs { display: flex; gap: var(--space-xs); }
.tab-btn { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg-dim); font-size: var(--text-md); transition: all var(--dur); }
.tab-btn.active { color: #241a06; background: var(--gold-400); border-color: var(--gold-400); font-weight: 700; }
.codex-scroll { flex: 1; overflow: auto; min-height: 0; padding-bottom: var(--space-lg); }
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-md); padding-top: var(--space-sm); }
.codex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); padding-top: var(--space-sm); }
.codex-cards .cardface { cursor: default; }
.rules-doc { max-width: 860px; margin: 0 auto; color: var(--fg); font-size: var(--text-md); line-height: 1.9; }
.rules-doc h3 { color: var(--gold-300); margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-xl); }
.rules-doc p, .rules-doc li { color: var(--fg-dim); }
.rules-doc b { color: var(--paper-50); }

/* ---------- 卡面样式（通用） ---------- */
.cardface {
  position: relative; width: 100%; aspect-ratio: 100/140; border-radius: 9px; overflow: hidden;
  background: #e9dbba; box-shadow: var(--shadow-1);
  border: 1px solid rgb(0 0 0 / .5);
}
.cardface svg { width: 100%; height: 100%; display: block; }
.cardface .cf-frame, .cardface .cf-corner, .cardface .cf-name, .cardface .cf-sub { position: absolute; }
.cardface .cf-frame { inset: 0; }
.cardface .cf-corner { top: 4px; left: 6px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.cardface .cf-suit { font-size: 15px; }
.cardface .cf-suit.red { color: #c0392b; }
.cardface .cf-suit.black { color: #23272e; }
.cardface .cf-num { font-size: 12px; font-weight: 700; color: #4a4230; }
.cardface .cf-name {
  left: 0; right: 0; bottom: 18px; text-align: center;
  font-family: var(--font-display); font-size: 17px; color: #2c2416;
  text-shadow: 0 1px 0 rgb(255 255 255 / .5);
}
.cardface .cf-sub { left: 0; right: 0; bottom: 4px; text-align: center; font-size: 9.5px; color: #6b5f45; letter-spacing: .08em; }
.cardface.type-basic { box-shadow: 0 0 0 1.5px var(--card-basic), var(--shadow-1); }
.cardface.type-trick { box-shadow: 0 0 0 1.5px var(--card-trick), var(--shadow-1); }
.cardface.type-delay { box-shadow: 0 0 0 1.5px var(--card-delay), var(--shadow-1); }
.cardface.type-equip { box-shadow: 0 0 0 1.5px var(--card-equip), var(--shadow-1); }
.cardface.back { background: #101827; }

/* ---------- 结算 ---------- */
.result-wrap { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: var(--space-lg); overflow: auto; }
.result-banner { font-family: var(--font-display); font-size: clamp(44px, 7vw, 84px); line-height: 1.15; letter-spacing: .18em; text-indent: .18em; text-align: center;
  background: linear-gradient(180deg, #fdf6e4, var(--gold-300) 55%, var(--gold-500));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 rgb(0 0 0 / .4));
  animation: bannerIn 1s var(--ease-out);
}
.result-banner.lose { background: linear-gradient(180deg, #d8cfc0, #9aa3b0 60%, #5f6b80); -webkit-background-clip: text; background-clip: text; }
@keyframes bannerIn { 0% { opacity: 0; transform: translateY(30px) scale(.9); } 60% { transform: translateY(-6px) scale(1.02); } 100% { opacity: 1; transform: none; } }
.result-sub { color: var(--fg-dim); font-size: var(--text-lg); }
.result-stats { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.stat-chip { padding: 10px 18px; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--line); text-align: center; min-width: 96px; }
.stat-chip b { display: block; font-size: var(--text-xl); color: var(--gold-300); font-family: var(--font-display); font-weight: 400; }
.stat-chip small { font-size: var(--text-xs); }
.result-players { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; max-width: 900px; }
.result-player { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--ink-800); width: 108px; }
.result-player svg { width: 64px; height: 64px; }
.result-player .rp-name { font-family: var(--font-display); font-size: var(--text-md); }
.result-player .rp-id { font-size: var(--text-xs); padding: 1px 10px; border-radius: 999px; }
.result-player.winner { border-color: var(--gold-400); box-shadow: var(--shadow-gold); }

/* ---------- 设置 ---------- */
.settings-rows { display: flex; flex-direction: column; gap: var(--space-md); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.setting-row label { color: var(--paper-50); font-size: var(--text-md); }
.switch { position: relative; width: 52px; height: 28px; border-radius: 999px; background: var(--ink-600); border: 1px solid var(--line); transition: background var(--dur); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-200); transition: transform var(--dur) var(--ease-out); }
.switch.on { background: var(--gold-600); }
.switch.on::after { transform: translateX(24px); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { padding: 6px 16px; background: transparent; border: none; color: var(--fg-dim); font-size: var(--text-sm); }
.seg button.active { background: var(--gold-500); color: #241a06; font-weight: 700; }

/* ---------- 新手提示 ---------- */
.hint-bubble { max-width: 560px; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2); }
.hint-bubble h4 { font-family: var(--font-display); color: var(--gold-300); font-size: var(--text-lg); margin-bottom: 6px; }
.hint-bubble p { color: var(--fg-dim); font-size: var(--text-sm); line-height: 1.8; }

@media (max-height: 860px) {
  .flip-stage { width: min(190px, 46vw); }
  .identity-card .ic-name { font-size: 42px; }
  .reveal-wrap { gap: var(--space-md); }
  .hint-bubble { max-width: 480px; }
}
@media (max-width: 900px) {
  .setup-body { grid-template-columns: 1fr; }
  .detail-pane { max-height: 34vh; }
  .picks-grid { grid-template-columns: repeat(3, 1fr); }
  .diff-grid { grid-template-columns: repeat(3, 1fr); }
  .game-logo h1 { font-size: clamp(38px, 10vw, 60px); }
  .menu-lineup .lp:nth-child(n+5) { display: none; }
}
@media (max-width: 480px) {
  .picks-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-lineup .lp:nth-child(-n+2) { display: none; }
}