/* SE 文化副本 —— 马里奥彩色像素风 */
:root {
  --sky: #6EC6FF;
  --sky-light: #A9DFF5;
  --grass: #43B047;
  --grass-light: #5CB85C;
  --green: #7BCB8B;
  --green-dark: #3FA34D;
  --green-deep: #2E7D32;
  --yellow: #FFD800;
  --orange: #FF9F43;
  --red: #FF6B6B;
  --purple: #A78BFA;
  --pink: #FF7BAC;
  --coral: #FF8A65;
  --ocean: #0E8AA0;
  --blue: #6EC6FF;
  --brown: #7B4A2B;
  --ink: #2E3A33;
  --ink-soft: #547063;
  --text-dark: #1E3A28;
}

* { box-sizing: border-box; }
button, .btn { touch-action: manipulation; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 138, 101, .16), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(14, 138, 160, .10), transparent 45%),
    linear-gradient(180deg, #5BC0F5 0%, #8FD8F8 45%, #D6F4FF 100%) fixed;
  min-height: 100vh;
  line-height: 1.8;
}
h1, h2, h3, .node-label {
  font-family: "DotGothic16", "Press Start 2P", "Microsoft YaHei", "PingFang SC", sans-serif;
}
.login-hero h1 { font-family: "Press Start 2P", "DotGothic16", "Microsoft YaHei", sans-serif; }

.page { max-width: 960px; margin: 0 auto; padding: 20px 16px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
h1 { font-size: 26px; margin: 8px 0; }
h2 { font-size: 20px; margin: 8px 0; }

/* 像素按钮：色块 + 硬阴影 */
.btn {
  display: inline-block; border: 3px solid var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #FFE566, var(--yellow));
  color: var(--text-dark);
  padding: 12px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 0 var(--ink), 0 8px 22px rgba(255, 216, 0, .35);
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn:hover { filter: brightness(1.03); box-shadow: 0 4px 0 var(--ink), 0 10px 26px rgba(255, 216, 0, .45); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { background: #cfd8d1; color: #8a978e; cursor: not-allowed; }
.btn-block { display: block; width: 100%; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.btn-ghost:hover { background: #f2f8f3; }

.card {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 4px 4px 0 rgba(46, 58, 51, .2), 0 16px 36px rgba(0, 0, 0, .10);
  padding: 22px;
}
.field-label { display: block; font-weight: 800; margin: 16px 0 8px; }
.input {
  width: 100%; padding: 12px 14px; font-size: 16px;
  border: 3px solid var(--ink); border-radius: 8px; outline: none; background: #fff;
}
.input:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(63, 163, 77, .2); }

/* 登录页 */
.login-page { max-width: 560px; padding-top: 24px; }
.login-hero { text-align: center; margin-bottom: 18px; }
.login-logo {
  width: 74px; height: 74px; margin: 0 auto;
  background: linear-gradient(180deg, #FFE566, var(--yellow)); border: 4px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px #fff, 0 0 32px rgba(255, 216, 0, .55);
  display: flex; align-items: center; justify-content: center;
  font-family: "Press Start 2P", sans-serif; font-size: 32px; color: var(--ink); line-height: 1;
  animation: float 3s ease-in-out infinite;
}
.login-hero h1 { color: var(--green-deep); font-size: 26px; letter-spacing: 2px; margin: 8px 0; text-shadow: 3px 3px 0 #dff0ff, 0 0 22px rgba(63, 163, 77, .35); }
.login-hero .subtitle { color: var(--ink-soft); font-weight: 700; margin: 2px 0 0; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 角色（多邻国风） */
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.role-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #fff; border: 3px solid transparent; border-radius: 12px;
  padding: 10px 4px; cursor: pointer; min-width: 0; transition: border-color .15s, box-shadow .2s;
}
.role-card.active { border-color: #FFD800; box-shadow: 0 0 0 3px #FFD800, 0 0 18px rgba(255, 216, 0, .55); }
.role-avatar {
  width: 58px; height: 58px; border-radius: 50%;
  overflow: hidden; position: relative; flex: 0 0 auto;
  border: 3px solid var(--ac, var(--green));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
}
.role-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.role-avatar::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}
.role-name { font-weight: 800; font-size: 14px; }
.role-tag { font-size: 10px; color: var(--ink-soft); text-align: center; line-height: 1.4; word-break: break-word; }

/* 顶部栏 */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  padding: 12px 16px; border-bottom: 3px solid var(--ink);
}
.topbar-actions { display: flex; gap: 8px; }
.topbar-actions .btn { padding: 8px 12px; font-size: 13px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.chip-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; position: relative; display: inline-block;
  border: 2px solid var(--ac, var(--green));
}
.chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-tag { font-size: 12px; color: var(--ink-soft); font-weight: 400; }

/* 旅程进度 */
.journey-head { text-align: center; margin-bottom: 20px; }
.journey-head h1 { color: #1E4A2E; text-shadow: 0 0 16px rgba(123, 203, 139, .55); }
.progress-track {
  height: 16px; background: #0E2E2A; border: 2px solid #7BCB8B;
  border-radius: 999px; overflow: hidden; margin: 12px auto 0; max-width: 440px;
  box-shadow: 0 0 14px rgba(123, 203, 139, .4), inset 0 2px 4px rgba(0, 0, 0, .4);
}
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #7BCB8B, #A8E6A3, #4ECDC4);
  box-shadow: 0 0 12px rgba(123, 203, 139, .9);
  transition: width .4s ease; animation: energyPulse 2s ease-in-out infinite;
}
@keyframes energyPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* 冒险地图（SVG） */
.map { width: 100%; border-radius: 24px; overflow: hidden; }
.map-svg { width: 100%; height: auto; display: block; }
.map-path { fill: none; filter: drop-shadow(0 0 6px rgba(123, 203, 139, .75)); }
.map-path-glow { stroke: #7BCB8B; stroke-width: 11; opacity: .22; filter: blur(7px); }
.node-halo { fill: none; stroke: var(--nc, #7BCB8B); stroke-width: 2; opacity: .32; }
.node-circle { fill: rgba(255, 255, 255, .06); stroke: var(--nc, #7BCB8B); stroke-width: 2; filter: drop-shadow(0 0 10px var(--nc, #7BCB8B)); }
.map-node.locked { opacity: .92; }
.map-node.locked .node-circle { stroke: #5c6b63; }
.map-node.done .node-glow { opacity: .42; }
.map-node.unlocked:hover .node-img { filter: brightness(1.12) drop-shadow(0 0 10px var(--nc, #7BCB8B)); }
.map-node.current .node-img { filter: drop-shadow(0 0 14px rgba(255, 216, 0, .75)); }
.node-icon { font-size: 28px; text-anchor: middle; dominant-baseline: central; }
.node-img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.node-glow { fill: var(--nc, #7BCB8B); opacity: .22; filter: blur(6px); }
.node-glow.current-glow { fill: #FFD800; opacity: .5; }
.node-float { animation: nodeFloat 3.2s ease-in-out infinite; }
@keyframes nodeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.node-done-check { font-size: 13px; text-anchor: middle; fill: #fff; font-weight: 800; }
.node-pulse { fill: none; stroke: #FFD800; stroke-width: 4; animation: pulseFade 1.4s ease-in-out infinite; }
@keyframes pulseFade { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
.node-status { font-size: 15px; text-anchor: middle; fill: #FFD800; font-weight: bold; }
.node-label { font-size: 13px; text-anchor: middle; font-weight: 700; fill: #D8F5E3; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.map-node.boss .node-circle { stroke: #A78BFA; stroke-width: 4; }
.map-node.boss .node-icon { font-size: 34px; }

/* 站立向导大白 */
.guide {
  position: fixed; right: 14px; bottom: 10px; z-index: 40;
  transform: translateY(150%); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.guide.show { transform: translateY(0); }
.guide-body {
  position: relative;
  width: 70px; height: 88px;
  background: linear-gradient(150deg, #ffffff 0%, #eef2f4 60%, #d9e1e5 100%);
  border: 3px solid var(--ink); border-radius: 36px 36px 32px 32px;
  box-shadow: inset -9px -12px 18px rgba(0, 0, 0, .08), inset 4px 4px 8px rgba(255, 255, 255, .9), 0 6px 0 rgba(0, 0, 0, .18), 0 0 26px rgba(255, 255, 255, .55);
  cursor: pointer;
  animation: guideIdle 2.4s ease-in-out infinite;
}
.guide-body::before, .guide-body::after {
  content: ''; position: absolute; top: 26px; width: 9px; height: 13px;
  background: var(--ink); border-radius: 50%;
}
.guide-body::before { left: 19px; }
.guide-body::after { right: 19px; }
@keyframes guideIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.guide-bubble {
  position: absolute; bottom: 156px; right: -6px; width: 236px;
  background: #fff; border: 3px solid var(--ink); border-radius: 12px;
  padding: 12px 14px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .15);
  display: none; font-size: 14px;
}
.guide-bubble::after {
  content: ''; position: absolute; bottom: -11px; right: 26px;
  width: 16px; height: 16px; background: #fff;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}
.guide-close { position: absolute; top: 2px; right: 8px; cursor: pointer; font-size: 13px; color: #8a978e; }
.guide-text { padding-right: 12px; }

/* 弹窗 */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(30, 42, 35, .5); display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.overview-card { width: 100%; max-width: 480px; max-height: 80vh; overflow: auto; }
.admin-modal { width: 100%; max-width: 360px; }
.cert-save-box {
  width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  background: #fff; border: 3px solid var(--ink); border-radius: 16px;
  padding: 20px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.cert-save-box img { width: 100%; border-radius: 12px; border: 2px solid #ddd; }
.ov-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; margin: 6px 0;
  background: #F0F6F1; border: 2px solid #dce7de; font-size: 15px;
}
.ov-pin { font-size: 20px; }

/* 章节视图 */
.chapter-view {
  width: 100%; max-width: 620px; max-height: 88vh;
  background: linear-gradient(180deg, #ffffff, #EFF9F1);
  border: 3px solid var(--ink); border-radius: 16px;
  padding: 20px; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 6px 6px 0 rgba(46, 58, 51, .22), 0 20px 50px rgba(0, 0, 0, .16);
}
.chapter-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: -18px; z-index: 6;
  background: linear-gradient(180deg, #ffffff 70%, rgba(255, 255, 255, 0));
  padding: 2px 0 10px;
}
.chapter-head-actions { display: flex; gap: 8px; }
.chapter-head-actions .btn { padding: 8px 12px; font-size: 14px; }
.chapter-head h2 { margin: 0; color: var(--green-deep); }
.chapter-progress { display: flex; align-items: center; justify-content: center; gap: 8px; }
.chapter-progress .dot {
  width: 10px; height: 10px; border-radius: 2px; background: #d7e0d9;
  border: 1px solid var(--ink); transition: background .2s, width .2s;
}
.chapter-progress .dot.active { width: 22px; background: var(--yellow); }
.chapter-content { flex: 1; }
.section-card { background: linear-gradient(180deg, #ffffff, #F1F9F3); border: 3px solid var(--ink); border-radius: 12px; padding: 18px; }
.section-card h3 { margin: 0 0 12px; color: var(--green-deep); }
.block-quote { font-size: 20px; font-weight: 800; line-height: 1.5; }
.block-quote-sub { font-size: 14px; color: var(--ink-soft); font-weight: 400; margin-top: 4px; }
.block-text { margin: 10px 0; font-size: 15px; line-height: 1.9; }
.block-list { margin: 10px 0; }
.block-list-title { font-weight: 800; color: var(--green-deep); margin-bottom: 6px; }
.block-list ul { margin: 0; padding-left: 20px; }
.block-list li { margin: 7px 0; font-size: 15px; line-height: 1.85; }
.block-video { margin: 12px 0; }
.video-title { font-weight: 800; margin-bottom: 8px; color: var(--red); }
.block-video video { width: 100%; border-radius: 8px; border: 3px solid var(--ink); background: #000; }
.chapter-nav { display: flex; justify-content: space-between; gap: 12px; }

/* 小游戏：能量大收集 */
.game-box {
  width: 100%; max-width: 430px; max-height: 94vh; overflow-y: auto;
  background: #fff; border: 4px solid var(--ink); border-radius: 16px;
  padding: 16px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .2);
}
.game-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.game-head-actions { display: flex; gap: 8px; }
.game-head-actions .btn { padding: 8px 12px; font-size: 14px; }
.game-head h2 { margin: 0; color: var(--green-deep); font-size: 18px; }
.game-hud { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 10px; }
.game-canvas {
  position: relative; height: 380px; overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .85) 0 16px, transparent 18px),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .8) 0 13px, transparent 15px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cg fill='%23A8D8EA'%3E%3Crect x='0' y='45' width='46' height='45'/%3E%3Crect x='50' y='28' width='40' height='62'/%3E%3Crect x='95' y='50' width='34' height='40'/%3E%3Crect x='135' y='20' width='48' height='70'/%3E%3Crect x='190' y='40' width='38' height='50'/%3E%3Crect x='235' y='55' width='30' height='35'/%3E%3Crect x='270' y='25' width='44' height='65'/%3E%3Crect x='320' y='48' width='36' height='42'/%3E%3Crect x='360' y='32' width='40' height='58'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 90px no-repeat,
    linear-gradient(180deg, #7EC8F7, #B8E4FA);
  border: 3px solid var(--ink); border-radius: 10px;
}
.p-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(#5CB85C, #43B047);
  border-top: 4px solid #2E7D32;
}
.p-platform {
  position: absolute; width: 90px; height: 16px;
  background: #8B5A2B; border: 3px solid var(--ink); border-radius: 4px;
}
.p-coin {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE566, #FBD000);
  border: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(46, 58, 51, .25);
  animation: coinPulse 1.6s ease-in-out infinite;
}
.coin-label {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 800; color: var(--ink); white-space: nowrap;
  background: rgba(255, 255, 255, .92); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--ink);
}
.p-player {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink); overflow: hidden;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .22), 0 0 16px rgba(255, 255, 255, .6);
  z-index: 2;
}
.p-player img { width: 100%; height: 100%; object-fit: cover; }
.ctrl-jump { background: linear-gradient(180deg, #FF8A65, var(--coral)); }
.player {
  position: absolute; bottom: 6px; left: 0; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; z-index: 2;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15));
}
.player img {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  border: 3px solid #C99700; box-shadow: 0 3px 0 rgba(0, 0, 0, .18), 0 0 12px rgba(255, 216, 0, .4);
}
.item {
  position: absolute; top: 0;
  padding: 6px 10px; font-size: 13px; font-weight: 800;
  border: 3px solid var(--ink); border-radius: 8px; white-space: nowrap;
}
.item.good { background: var(--grass-light); color: var(--text-dark); }
.item.bad { background: #FFC4C4; color: #7a2018; }
.game-controls { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.ctrl-btn {
  width: 68px; height: 48px; font-size: 22px; font-weight: 800;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 4px 0 var(--ink); cursor: pointer; user-select: none;
}
.ctrl-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }

@media (min-width: 768px) {
  .role-grid { grid-template-columns: repeat(4, 1fr); }
  .page { padding: 28px 20px; }
  .map { max-width: 560px; margin: 0 auto; }
}

/* 移动端：顶部栏紧凑 + 整体放大 */
@media (max-width: 640px) {
  body { font-size: 17px; }
  h3 { font-size: 19px; }
  .btn { font-size: 16px; padding: 14px 20px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .user-chip { gap: 6px; min-width: 0; }
  .chip-tag, .chip-skins { display: none; }
  .topbar-actions { gap: 6px; flex-shrink: 0; }
  .topbar-actions .btn { padding: 7px 9px; font-size: 12px; white-space: nowrap; }
  .chapter-view { padding: 18px 14px; }
  .section-card { padding: 18px 14px; }
  .block-text, .block-list li { font-size: 15.5px; line-height: 1.8; }
  .intro-rule, .intro-dabai { font-size: 15px; }
  .quiz-q { font-size: 17px; }
  .quiz-opt { font-size: 16px; padding: 15px 16px; }
  .flip-front { font-size: 15px; }
  .flip-back, .flip-back b { font-size: 13px; }
  .game-box { padding: 14px; }
  .celeb-box { padding: 22px 14px; }
}

/* 第一章教学卡片 */
.intro-fact {
  background: #F2F8F1; border: 2px solid var(--ink); border-radius: 8px;
  padding: 8px 12px; margin: 8px 0; font-size: 14px;
}
.intro-rule {
  background: #FFF9E0; border: 2px dashed var(--ink); border-radius: 8px;
  padding: 10px 12px; margin: 12px 0; font-size: 15px; line-height: 1.9;
}
.map-coin { animation: coinPulse 1.6s ease-in-out infinite; }
@keyframes coinPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* 奖励提示 */
.toast {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: linear-gradient(180deg, #fff, #fff7d6); border: 3px solid var(--ink);
  border-radius: 12px; padding: 12px 22px; font-weight: 800; font-size: 15px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .16);
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 平台游戏障碍物 */
.p-spike {
  position: absolute; width: 20px; height: 20px;
  background: #FF6B6B; border: 2px solid var(--ink);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2);
}

/* 介绍页大白 */
.intro-dabai {
  display: flex; align-items: center; gap: 8px;
  background: #EAF7EC; border: 2px solid var(--ink); border-radius: 8px;
  padding: 9px 12px; margin: 10px 0; font-size: 14px; line-height: 1.7;
}
.intro-dabai img { flex: 0 0 auto; }
.intro-dabai span { flex: 1; text-align: left; }
.intro-dabai img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); flex: 0 0 auto; }

/* 头像皮肤徽章 */
.chip-badge {
  position: absolute; bottom: -7px; right: -7px;
  background: var(--yellow); border: 2px solid var(--ink);
  font-size: 10px; font-weight: 800; color: var(--ink);
  border-radius: 999px; padding: 0 5px; line-height: 1.5;
}

/* 登录页科技感 */
.login-card {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 0 rgba(46, 58, 51, .15), 0 20px 48px rgba(0, 0, 0, .14);
}

/* 翻牌学习 */
.flip-hint { text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: 8px; }
.flip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.flip-card { height: 132px; cursor: pointer; perspective: 800px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px; border: 2px solid rgba(46, 58, 51, .35); border-radius: 12px; text-align: center;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, .5), 0 6px 18px rgba(0, 0, 0, .14);
}
.flip-front::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .38), transparent 52%);
  pointer-events: none;
}
.flip-front { font-weight: 800; font-size: 14px; color: #fff; }
.flip-card:nth-child(8n+1) .flip-front { background: #FFB74D; }
.flip-card:nth-child(8n+2) .flip-front { background: #FF8A80; }
.flip-card:nth-child(8n+3) .flip-front { background: #FFD54F; color: #6b4e00; }
.flip-card:nth-child(8n+4) .flip-front { background: #66BB6A; }
.flip-card:nth-child(8n+5) .flip-front { background: #4FC3F7; }
.flip-card:nth-child(8n+6) .flip-front { background: #BA68C8; }
.flip-card:nth-child(8n+7) .flip-front { background: #F06292; }
.flip-card:nth-child(8n+8) .flip-front { background: #4DB6AC; }
.flip-back { background: #F0F8F1; transform: rotateY(180deg); font-size: 12px; white-space: pre-line; }
.flip-back b { font-size: 13px; }
.flip-explain { margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }

/* 封面图 */
.cover-card { text-align: center; }
.cover-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; border: 3px solid var(--ink); margin-bottom: 12px; }

/* 接金币 */
.coin {
  position: absolute; top: 0; width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF7C0, #FFD800 45%, #E8A800 78%, #C99700 100%);
  border: 3px solid #A87A00;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .8), inset 0 -3px 5px rgba(122, 90, 0, .35), 0 3px 6px rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #6b4e00; text-align: center;
  padding: 7px; line-height: 1.2; word-break: break-all;
  will-change: transform;
}
.coin::before {
  content: ''; position: absolute; inset: 4px;
  border: 2px solid rgba(122, 90, 0, .3); border-radius: 50%;
  pointer-events: none;
}

/* 封面 logo */
.cover-logo { width: 100%; max-height: 90px; object-fit: contain; margin-bottom: 8px; }

/* 第二章：EVP 概览 + 三对价值观 */
.evp-sub { font-size: 16px; font-weight: 700; color: var(--green-dark); margin: 4px 0 10px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.value-mini {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 2px solid var(--vc, #7BCB8B); border-radius: 12px; padding: 8px 4px;
}
.value-mini img { width: 48px; height: 48px; object-fit: contain; }
.value-mini span { font-size: 12px; font-weight: 700; }
.pair-imgs { display: flex; gap: 12px; justify-content: center; margin: 10px 0; }
.pair-imgs img { width: 72px; height: 72px; object-fit: contain; }

/* 消消乐（连连看） */
.game-canvas.match-canvas {
  height: auto;
  background:
    linear-gradient(rgba(46, 58, 51, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 58, 51, .045) 1px, transparent 1px),
    #F2F7FF;
  background-size: 24px 24px;
}
.link-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 6px; }
.link-tile {
  position: relative;
  aspect-ratio: 1; border-radius: 8px;
  background: var(--vc, #7BCB8B);
  border: 2px solid rgba(0, 0, 0, .07);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #4a3f2f;
  overflow: hidden; cursor: pointer;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), 0 2px 3px rgba(0, 0, 0, .1);
  transition: transform .1s;
}
.link-tile.empty { background: transparent; border: none; box-shadow: none; cursor: default; }
.link-tile.selected { box-shadow: 0 0 0 3px #FFD800, 0 0 14px rgba(255, 216, 0, .7); transform: scale(1.06); }
.link-tile.matched { animation: tilePop .26s forwards; }
@keyframes tilePop { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.3); opacity: 0; } }
.link-star { position: absolute; font-size: 20px; pointer-events: none; animation: starPop .45s forwards; }
@keyframes starPop { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.7) translateY(-8px); opacity: 0; } }
.link-tile.shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* EVP 概览 + 三对价值观 */
.evp-bullets { margin: 8px 0; padding-left: 20px; }
.evp-bullets li { margin: 6px 0; font-size: 15px; line-height: 1.8; }
.pair-cards { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.pair-value {
  display: flex; align-items: center; gap: 12px;
  background: var(--vc, #fff);
  border: 2px solid rgba(0, 0, 0, .06); border-radius: 14px; padding: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}
.pair-value img { width: 100px; height: 52px; object-fit: contain; flex: 0 0 100px; }
.pv-body { flex: 1; }
.pv-desc { font-size: 15px; color: #4a3f2f; line-height: 1.7; }
.pv-examples { margin-top: 8px; background: rgba(255, 255, 255, .65); border-radius: 8px; padding: 8px 10px; }
.pv-ex-title { font-size: 12px; font-weight: 800; color: #5a4a30; margin-bottom: 3px; }
.pv-example { font-size: 14px; color: #7a6a4f; margin: 3px 0; line-height: 1.7; }

/* 接金币特效 */
.fx { position: absolute; font-size: 28px; pointer-events: none; z-index: 5; animation: fxFloat .7s ease-out forwards; }
@keyframes fxFloat { 0% { transform: translateY(0) scale(.5); opacity: 1; } 100% { transform: translateY(-42px) scale(1.25); opacity: 0; } }

/* 结算界面 */
.result-box {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px;
  background: rgba(255, 255, 255, .93);
}
.result-dabai { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ink); }
.result-title { font-size: 22px; font-weight: 800; }
.result-score { font-size: 16px; }
.result-score b { color: #3FA34D; font-size: 22px; }
.result-msg { color: var(--ink-soft); font-size: 14px; }
.result-actions { display: flex; gap: 10px; margin-top: 6px; width: 100%; }
.result-actions .btn { flex: 1; }

/* 万能方块 */
.link-tile.wild {
  background: linear-gradient(135deg, #FFD54F, #FF9F43, #FF7BAC);
  border-color: #C99700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* 得分动画 */
.game-hud b { display: inline-block; }
.game-hud b.pop { animation: scorePop .3s ease; }
@keyframes scorePop { 0% { transform: scale(1.45); color: #FFD800; } 100% { transform: scale(1); } }

/* 通关庆祝 */
.celeb-box {
  position: relative;
  text-align: center; background: #fff; border-radius: 24px; padding: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  max-height: 90vh; overflow-y: auto; width: 100%; max-width: 560px;
}
.celeb-icon {
  width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
  animation: celebBounce 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 216, 0, .6));
}
.celeb-confetti { font-size: 28px; animation: celebBounce 1.2s ease-in-out infinite; }
@keyframes celebBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.celeb-title { font-size: 20px; font-weight: 800; color: #3FA34D; }
.celeb-skin { font-size: 15px; color: var(--ink-soft); }

/* 第二关 doodles 点缀 */
.doodle-row { display: flex; justify-content: center; gap: 12px; margin-top: 12px; opacity: .8; }
.doodle { width: 30px; height: 30px; object-fit: contain; }
.doodle-pos { position: absolute; width: 34px; height: 34px; object-fit: contain; opacity: .5; pointer-events: none; z-index: 1; }
.doodle-tl { top: 8px; left: 8px; }
.doodle-tr { top: 8px; right: 8px; }

/* 第三关：三个原则 */
.principle-item {
  background: #F4FBF7; border-left: 4px solid var(--green); border-radius: 8px;
  padding: 11px 13px; margin: 14px 0; font-size: 15px; line-height: 1.8;
}
.principle-item b { display: block; color: var(--green-dark); margin-bottom: 3px; }

/* 第三关：场景判断快答 */
.quiz-card { display: flex; flex-direction: column; gap: 16px; padding: 14px; height: 100%; }
.quiz-q {
  background: #fff; border: 3px solid var(--ink); border-radius: 14px;
  padding: 18px 16px; font-size: 16px; font-weight: 700; line-height: 1.6;
  box-shadow: 0 4px 0 rgba(46, 58, 51, .15);
}
.quiz-opts { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.quiz-opt {
  padding: 14px 16px; border: 3px solid var(--ink); border-radius: 12px;
  background: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 0 rgba(46, 58, 51, .2); transition: all .15s; text-align: center;
}
.quiz-opt:hover { transform: translateY(-2px); }
.quiz-opt.correct { background: var(--grass-light); color: var(--text-dark); border-color: var(--green-dark); }
.quiz-opt.wrong { background: #FFC4C4; color: #7a2018; border-color: var(--cinnabar); }
.quiz-opt:disabled { cursor: default; }
.quiz-fb {
  position: absolute; left: 14px; right: 14px; top: 14px; z-index: 6;
  padding: 12px 14px; border-radius: 12px;
  animation: quizFbIn .22s ease-out;
  box-shadow: 0 4px 0 rgba(46, 58, 51, .18);
}
.quiz-fb.good { background: #EAF7EC; border: 2px solid #3FA34D; }
.quiz-fb.bad { background: #FFF0EE; border: 2px solid #E8604C; }
.fb-emoji { font-weight: 800; font-size: 18px; }
.quiz-fb.good .fb-emoji { color: #2E7D32; }
.quiz-fb.bad .fb-emoji { color: #C0392B; }
.fb-explain { font-size: 14px; margin-top: 4px; color: var(--ink-soft); }
@keyframes quizFbIn { 0% { transform: translateY(-10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* 第三关：高亮 + 原则图 + 错题解读 + 金句 */
.hl-green { color: #3FA34D; font-weight: 800; }
.principle-logo { display: block; width: 100%; max-width: 260px; margin: 14px auto; }
.wrong-list { text-align: left; margin-top: 10px; max-height: 200px; overflow-y: auto; }
.wrong-title { font-weight: 800; color: #c0392b; margin-bottom: 6px; }
.wrong-item { background: #FFF4F2; border: 1px solid #f3c4bd; border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.wq { font-size: 13px; font-weight: 600; }
.wa { font-size: 13px; font-weight: 800; color: var(--green-dark); margin-top: 4px; }
.we { font-weight: 400; color: var(--ink-soft); }
.celeb-quote { font-size: 14px; font-style: italic; color: var(--ink-soft); margin: 6px 0; }
.celeb-quote span { display: block; text-align: right; font-style: normal; font-weight: 700; color: var(--green-dark); }

/* 皮肤展示 */
.chip-skins {
  font-size: 14px; letter-spacing: 2px;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px;
}

/* 星空闪耀 */
.star { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: .95; } }
.node-spark { font-size: 16px; text-anchor: middle; animation: sparkPulse 1.8s ease-in-out infinite; }
@keyframes sparkPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes nodeGlow { 0%,100% { filter: drop-shadow(0 0 5px rgba(123, 203, 139, .5)); } 50% { filter: drop-shadow(0 0 18px rgba(123, 203, 139, .95)); } }

/* 极光 + 粒子 */
.aurora { stroke: #4ECDC4; stroke-width: 40; stroke-linecap: round; opacity: .13; filter: blur(8px); animation: auroraShift 6s ease-in-out infinite; }
.aurora2 { stroke: #A78BFA; stroke-width: 34; animation-delay: 2s; }
@keyframes auroraShift { 0%,100% { opacity: .07; } 50% { opacity: .2; } }
.particle { animation: particlePulse 4s ease-in-out infinite; }
@keyframes particlePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ================= 第四章：隐藏BOSS · 打地鼠 ================= */
/* 引导页 */
.boss-intro { text-align: left; }
.boss-banner { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 18px rgba(74, 144, 217, .65)); animation: float 3s ease-in-out infinite; }

/* 学习页：三支柱卡片 */
.leader-group { background: #fff; border: 2px solid var(--gc, #4A90D9); border-radius: 14px; padding: 14px; margin: 12px 0; box-shadow: 0 3px 8px rgba(0,0,0,.05); }
.lg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lg-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--gc, #4A90D9); display: flex; align-items: center; justify-content: center; font-size: 22px; border: 2px solid var(--ink); flex: 0 0 auto; }
.lg-title { font-weight: 800; color: var(--gc, #4A90D9); font-size: 17px; line-height: 1.2; }
.lg-en { display: block; font-size: 12px; font-weight: 600; color: #8a97a0; margin-top: 2px; }
.lg-items { margin: 0; padding-left: 0; list-style: none; }
.lg-items li { position: relative; margin: 8px 0; padding-left: 18px; font-size: 15px; line-height: 1.8; color: #4a3f2f; }
.lg-items li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--gc, #4A90D9); }
.lg-examples { margin-top: 10px; background: #F5F9FF; border: 1px dashed var(--gc, #4A90D9); border-radius: 10px; padding: 10px 12px; }
.lg-ex-title { font-weight: 800; font-size: 13px; color: var(--gc, #4A90D9); margin-bottom: 4px; }
.lg-ex { font-size: 14px; color: #6a7a70; margin: 4px 0; line-height: 1.7; }

/* BOSS 战画布 */
.game-canvas.whack-canvas {
  height: 470px;
  background:
    radial-gradient(circle at 50% -10%, rgba(74, 144, 217, .35), transparent 55%),
    linear-gradient(180deg, #101B33 0%, #16284A 55%, #0B1220 100%);
  border: 3px solid var(--ink);
}
.boss-arena { position: relative; height: 100%; padding: 8px; display: flex; flex-direction: column; }
.boss-boss { position: absolute; top: 8px; left: 10px; font-size: 42px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 216, 0, .55)); z-index: 3; }
.boss-boss.boss-shake { animation: bossShake .4s; }
.boss-boss.boss-hit { animation: bossHit .4s; }
@keyframes bossShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
@keyframes bossHit { 0%,100%{filter:drop-shadow(0 0 10px rgba(255,216,0,.55));} 50%{filter:drop-shadow(0 0 22px rgba(255,107,107,.95));} }

.boss-bar { display: flex; align-items: center; gap: 8px; margin: 8px 4px 0 56px; }
.boss-name { font-family: "DotGothic16", "PingFang SC", sans-serif; color: #FFD800; font-weight: 800; font-size: 13px; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.boss-hp { flex: 1; height: 18px; background: #0B1220; border: 2px solid #4A90D9; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 0 10px rgba(74,144,217,.4); }
.boss-hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #FF6B6B, #FFD800); border-radius: 999px; transition: width .25s; box-shadow: 0 0 12px rgba(255,107,107,.8); }
.boss-hp-label { color: #fff; font-weight: 800; font-size: 13px; min-width: 30px; text-align: center; }
.whack-hint { text-align: center; color: #fff; font-size: 13px; font-weight: 700; margin: 4px 0 2px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.whack-no { display: inline-block; color: #FF6B6B; font-size: 19px; font-weight: 800; margin: 0 2px; text-shadow: 0 0 8px rgba(255,107,107,.85); }

.whack-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; flex: 1; margin-top: 6px; }
.whack-hole { position: relative; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.whack-hole::after {
  content: ''; position: absolute; bottom: 2px; left: 18%; right: 18%; height: 16px;
  background: #1B2E52; border: 2px solid #0B1220; border-radius: 50%;
  box-shadow: inset 0 4px 5px rgba(0,0,0,.5); z-index: 2;
}
.whack-mole {
  position: absolute; bottom: 4px; left: 50%;
  transform: translate(-50%, 108%);
  display: flex; flex-direction: column; align-items: center; z-index: 1;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1);
}
.whack-mole.up { transform: translate(-50%, 0); }
.whack-mole.hit { transform: translate(-50%, 0) scale(.7); opacity: 0; transition: transform .18s, opacity .18s; }
.whack-bubble {
  position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 10px;
  padding: 3px 8px; font-size: 12px; font-weight: 800; white-space: nowrap; margin-bottom: 4px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.whack-bubble::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; width: 9px; height: 9px;
  background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.whack-figure { display: flex; flex-direction: column; align-items: center; }
.wf-head {
  width: 30px; height: 30px; border-radius: 50%; background: #FFE0C2; border: 2px solid var(--ink);
  position: relative; box-shadow: inset 0 -4px 4px rgba(0,0,0,.08); z-index: 2;
}
.wf-head::before, .wf-head::after { content: ''; position: absolute; top: 10px; width: 3px; height: 4px; background: var(--ink); border-radius: 50%; }
.wf-head::before { left: 7px; } .wf-head::after { right: 7px; }
.wf-smile { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 7px; height: 4px; border-bottom: 2px solid var(--ink); border-radius: 0 0 8px 8px; }
.wf-blush { position: absolute; top: 15px; width: 5px; height: 3px; background: #FFB3A6; border-radius: 50%; opacity: .8; }
.wf-blush.l { left: 4px; } .wf-blush.r { right: 4px; }
.wf-body {
  width: 38px; height: 26px; background: #3E4A5A; border: 2px solid var(--ink);
  border-radius: 8px 8px 5px 5px; margin-top: -3px; position: relative; z-index: 1;
}
.wf-body::before { content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #fff; }
.wf-body::after { content: ''; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 6px; height: 15px; background: #3FA34D; border-radius: 3px 3px 4px 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.whack-hammer {
  position: absolute; left: 50%; top: 26%; z-index: 7; pointer-events: none;
  width: 38px; height: 54px; transform: translate(-50%, -50%); transform-origin: 50% 90%;
  animation: hammerStrike .4s ease-in forwards;
}
.whack-hammer .hm-head {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 38px; height: 28px; border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #FFCE7A, #FF8A65);
  border: 2px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
}
.whack-hammer .hm-head::after { content: ''; position: absolute; top: 5px; left: 8px; width: 12px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); transform: rotate(-22deg); }
.whack-hammer .hm-handle {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 9px; height: 26px; border-radius: 5px; background: #7B4A2B; border: 2px solid var(--ink);
}
@keyframes hammerStrike {
  0% { transform: translate(-50%, -60%) rotate(28deg); opacity: 0; }
  30% { opacity: 1; }
  55% { transform: translate(-50%, -10%) rotate(0); }
  100% { transform: translate(-50%, 2%) rotate(-14deg); opacity: 0; }
}
.whack-fx {
  position: absolute; left: 50%; top: 16%; transform: translate(-50%, -50%); z-index: 9;
  pointer-events: none; font-size: 17px; font-weight: 800; padding: 4px 11px;
  border-radius: 999px; border: 2px solid var(--ink); white-space: nowrap;
  animation: whackFxPop .65s ease-out forwards;
}
.whack-fx.good { background: #DFF6E4; color: #2E7D32; }
.whack-fx.bad { background: #FFE2DE; color: #C0392B; }
@keyframes whackFxPop {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  28% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(1); opacity: 0; }
}

/* 结算页 BOSS 图标 */
.result-boss { font-size: 56px; line-height: 1; filter: drop-shadow(0 0 14px rgba(74, 144, 217, .7)); animation: float 2.4s ease-in-out infinite; }

/* 通关彩蛋：我的IMPACT故事 */
.celeb-easter {
  position: relative; width: 100%; text-align: left;
  background: linear-gradient(180deg, #FCF9FF, #F3EEFF);
  border: 2px dashed #A78BFA; border-radius: 16px; padding: 14px 14px 12px; margin-top: 6px;
  box-shadow: 0 6px 20px rgba(167, 139, 250, .22);
  animation: easterPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
.celeb-easter-sparkle { position: absolute; top: -13px; right: -5px; font-size: 22px; animation: easterSparkle 1.6s ease-in-out infinite; }
.celeb-easter-title { font-weight: 800; color: #7A5CD0; margin-bottom: 6px; }
.easter-kicker { display: block; font-size: 13px; color: #A78BFA; letter-spacing: 1px; }
.easter-main { display: block; font-size: 17px; color: #7A5CD0; margin-top: 2px; }
.celeb-easter-sub { font-size: 12px; color: #6b5a9e; margin: 4px 0 8px; line-height: 1.5; }
@keyframes easterPop { 0% { transform: scale(.72); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes easterSparkle { 0%,100% { transform: rotate(0) scale(1); opacity: .9; } 50% { transform: rotate(24deg) scale(1.3); opacity: 1; } }
.story-input { width: 100%; padding: 10px; font-size: 14px; border: 2px solid #A78BFA; border-radius: 8px; resize: vertical; font-family: inherit; line-height: 1.5; }
.story-input:focus { outline: none; border-color: #7A5CD0; box-shadow: 0 0 0 3px rgba(167, 139, 250, .25); }

/* 第三关：协作网络背景 */
.game-canvas.quiz-canvas {
  background:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.85) 0 7px, transparent 8px),
    radial-gradient(circle at 32% 78%, rgba(255,255,255,.8) 0 6px, transparent 7px),
    radial-gradient(circle at 52% 18%, rgba(255,255,255,.8) 0 8px, transparent 9px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.85) 0 7px, transparent 8px),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.75) 0 6px, transparent 7px),
    radial-gradient(circle at 44% 90%, rgba(255,255,255,.7) 0 7px, transparent 8px),
    linear-gradient(180deg, #6FD6DE 0%, #A8E9EC 55%, #D3F4F2 100%);
}

/* 第四关：BOSS 开场三支柱 + 故事彩蛋表单 */
.leader-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.pillar-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #fff; border: 2px solid var(--pc, #4A90D9); border-radius: 14px;
  padding: 14px 8px 12px; text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.pillar-card::before { content: ''; position: absolute; top: -2px; left: 22%; right: 22%; height: 4px; border-radius: 0 0 6px 6px; background: var(--pc, #4A90D9); }
.pillar-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--pc, #4A90D9); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 2px solid var(--ink); }
.pillar-name { font-weight: 800; font-size: 17px; color: var(--pc, #4A90D9); }
.pillar-en { font-size: 12px; color: #8a97a0; line-height: 1.4; }
.boss-everyone { font-weight: 700; color: #2E7D32; }
.story-label { display: block; font-weight: 800; font-size: 13px; color: #5b4a9e; margin: 10px 0 4px; }
.story-select {
  width: 100%; padding: 10px; font-size: 14px; border: 2px solid #A78BFA; border-radius: 8px;
  background: #fff; font-family: inherit; color: var(--ink); line-height: 1.4;
}
.story-select:focus { outline: none; border-color: #7A5CD0; box-shadow: 0 0 0 3px rgba(167, 139, 250, .25); }
.story-example {
  margin: 8px 0 0; padding: 8px 10px; font-size: 12px; line-height: 1.6;
  background: #EFEAFB; border-radius: 8px; color: #5b4a9e;
}

/* 故事彩蛋表单：SESA ID 输入框复用 story-input 样式；「继续」按钮在第四关由 JS 控制隐藏 */
.celeb-mute { position: absolute; top: 12px; right: 12px; padding: 7px 11px; font-size: 16px; }

/* ================= 第五章：行动传送门 · 陷阱拆弹 ================= */
.portal-intro { text-align: center; }
.portal { position: relative; width: 120px; height: 120px; margin: 6px auto 12px; }
.portal-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px dashed #E8604C;
  animation: portalSpin 7s linear infinite;
  box-shadow: 0 0 26px rgba(232, 96, 76, .5), inset 0 0 20px rgba(232, 96, 76, .28);
}
.portal-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 3px dotted #FF9F43; animation: portalSpinRev 5s linear infinite; }
.portal-core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 50px; animation: portalPulse 2.4s ease-in-out infinite; }
.portal-text { font-weight: 700; }
@keyframes portalSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes portalSpinRev { 0% { transform: rotate(360deg); } 100% { transform: rotate(0); } }
@keyframes portalPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.boss-body { margin-top: 16px; }
.lever-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.lever-card {
  position: relative; background: #fff; border: 2px solid #E8604C; border-radius: 14px;
  padding: 10px 8px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .12s, box-shadow .15s; box-shadow: 0 3px 8px rgba(0,0,0,.05);
}
.lever-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(232,96,76,.18); }
.lever-img { width: 100%; aspect-ratio: 1099 / 1856; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); background: #fff; }
.lever-name { font-weight: 800; font-size: 16px; color: #C0392B; line-height: 1.25; }
.lever-en { font-size: 11px; color: #8a97a0; line-height: 1.3; }
.lever-badge { position: absolute; top: -8px; right: -6px; background: #3FA34D; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; border: 2px solid #fff; }

.lever-en-inline { font-size: 12px; font-weight: 600; color: #8a97a0; }
.lever-principles { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.lever-principle { display: flex; align-items: flex-start; gap: 10px; background: #F0F6FF; border-left: 4px solid var(--pc, #4A90D9); border-radius: 10px; padding: 10px 12px; }
.lever-principle:nth-child(2) { background: #EFF9F9; }
.lever-principle:nth-child(3) { background: #F3EFFB; }
.lp-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--pc, #4A90D9); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 2px solid var(--ink); }
.lp-body b { display: block; color: var(--pc, #4A90D9); font-size: 14px; margin-bottom: 2px; }
.lp-body span { font-size: 15px; color: #4a3f2f; line-height: 1.9; }
.principles-intro { font-weight: 700; color: #4a3f2f; margin-top: 12px; }
.lever-changes {
  margin: 22px 0 8px; padding: 0;
  background: #FFF4E6; border: 2px solid #E8604C; border-radius: 14px;
  overflow: hidden; box-shadow: 0 4px 12px rgba(232, 96, 76, .14);
}
.lc-title {
  margin: 0; padding: 12px 16px;
  background: linear-gradient(90deg, #E8604C, #FF9F43);
  color: #fff; font-weight: 800; font-size: 14px;
}
.fromto-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.fromto-row { display: flex; align-items: center; gap: 8px; }
.fromto-from { flex: 0 0 auto; max-width: 45%; background: #F0EDEA; color: #8a97a0; padding: 7px 10px; border-radius: 8px; font-size: 14px; text-decoration: line-through; line-height: 1.7; }
.fromto-arrow { color: #E8604C; font-weight: 800; font-size: 16px; flex: 0 0 auto; }
.fromto-to { flex: 1; background: #EAF7EC; color: #2E7D32; padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; line-height: 1.7; }

.game-canvas.trap-canvas {
  height: 440px;
  background-color: #FFF6E3;
  background-image:
    repeating-linear-gradient(45deg, #FFD54F 0 14px, #2E3A33 14px 28px),
    linear-gradient(180deg, #FFF6E3 0%, #FFEED2 100%);
  background-size: 100% 16px, 100% 100%;
  background-position: top, top;
  background-repeat: no-repeat, no-repeat;
  border: 3px solid var(--ink);
}
.assess-scene { position: relative; height: 100%; padding: 14px; display: flex; flex-direction: column; }
.assess-cat {
  align-self: center; background: #2E3A33; color: #FFD54F; padding: 3px 14px;
  border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px;
}
.assess-hint {
  align-self: center; background: #EAF7EC; border: 1px dashed #3FA34D; color: #2E7D32;
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 8px; margin-bottom: 8px;
}
.assess-poster { width: 100%; max-width: 120px; display: block; margin: 10px auto 14px; border-radius: 12px; }
.assess-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: #FFFDF6; border: 3px solid var(--ink); border-radius: 14px;
  padding: 18px 16px; box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 0 4px #FFD54F;
}
.assess-title { font-size: 18px; font-weight: 800; color: #2E3A33; margin-bottom: 8px; }
.assess-behavior { font-size: 14px; color: #6a7a70; line-height: 1.6; }
.assess-opts { display: flex; gap: 8px; margin-top: 12px; }
.assess-opt {
  flex: 1; padding: 12px 4px; font-size: 15px; font-weight: 800; cursor: pointer;
  border: 3px solid var(--ink); border-radius: 12px; transition: transform .08s;
}
.assess-opt:active { transform: translateY(3px); }
.assess-opt.o3 { background: linear-gradient(180deg, #FF8A65, #E8604C); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.assess-opt.o2 { background: linear-gradient(180deg, #FFB74D, #FF9F43); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.assess-opt.o1 { background: linear-gradient(180deg, #FFE082, #FFD54F); color: #6b4e00; box-shadow: 0 4px 0 var(--ink); }
.assess-opt.o0 { background: linear-gradient(180deg, #A5D6A7, #7BCB8B); color: #1e4a2e; box-shadow: 0 4px 0 var(--ink); }
.res-bars { width: 100%; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.res-bar { display: flex; align-items: center; gap: 8px; }
.res-bar-label { flex: 0 0 64px; font-size: 12px; font-weight: 700; color: #6a7a70; text-align: left; }
.res-bar-track { flex: 1; height: 12px; background: #e8efe9; border-radius: 999px; overflow: hidden; }
.res-bar-fill { height: 100%; background: linear-gradient(90deg, #E8604C, #FF9F43); border-radius: 999px; transition: width .4s; }
.res-bar-val { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #6a7a70; }

/* ================= 终章：文化碎片拼图 + 终极Boss + 通关证书 ================= */
.c6-intro { text-align: center; }
.c6-shatter { display: flex; justify-content: center; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }
.c6-chip {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(138, 99, 201, .12); border: 2px dashed #8A63C9;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  animation: c6Float 2.6s ease-in-out infinite;
}
.c6-chip:nth-child(2n) { animation-delay: .4s; }
.c6-chip:nth-child(3n) { animation-delay: .8s; }
@keyframes c6Float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }

/* 拼图画布 */
.game-canvas.final-canvas {
  height: 500px;
  background:
    radial-gradient(circle at 50% -8%, rgba(138, 99, 201, .38), transparent 55%),
    linear-gradient(180deg, #191233 0%, #241A46 55%, #120D28 100%);
  border: 3px solid var(--ink);
}
.final-scene { position: relative; height: 100%; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* 碎片拼图 */
.final-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.final-piece {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; border-radius: 12px; text-align: center;
  background: rgba(255, 255, 255, .05); border: 2px dashed rgba(255, 255, 255, .18);
  filter: grayscale(1) brightness(.6); opacity: .78;
  transition: filter .3s, opacity .3s, transform .3s, box-shadow .3s, background .3s;
}
.final-piece-icon { font-size: 22px; line-height: 1; }
.final-piece-name { font-size: 11px; font-weight: 700; color: #cfd3e0; }
.final-piece.current {
  border-style: solid; border-color: #FFD800; opacity: 1; filter: none;
  animation: finalPiecePulse 1.6s ease-in-out infinite;
}
@keyframes finalPiecePulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,216,0,.4), 0 0 14px rgba(255,216,0,.3); }
  50% { box-shadow: 0 0 0 3px rgba(255,216,0,.8), 0 0 26px rgba(255,216,0,.6); }
}
.final-piece.solved {
  background: linear-gradient(180deg, var(--fc, #8A63C9), #3A2E63);
  border: 2px solid #fff; filter: none; opacity: 1;
  box-shadow: 0 0 16px var(--fc, #8A63C9), inset 0 2px 3px rgba(255,255,255,.35);
  animation: finalPieceSnap .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes finalPieceSnap { 0% { transform: scale(.6) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }
.final-piece.solved .final-piece-name { color: #fff; }
.final-piece-check {
  position: absolute; top: -7px; right: -6px; width: 20px; height: 20px;
  background: #FFD800; color: #2E3A33; border: 2px solid #fff; border-radius: 50%;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* 题目卡片 */
.final-qcard { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 12px 14px; }
.final-qlabel { font-size: 12px; font-weight: 800; color: #8A63C9; margin-bottom: 6px; letter-spacing: .3px; }
.final-qtext { font-size: 17px; font-weight: 700; line-height: 1.7; color: #2E3A33; }

/* 选项 */
.final-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.final-opt {
  padding: 10px 8px; border: 3px solid var(--ink); border-radius: 12px;
  background: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; text-align: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .22); transition: transform .08s, background .12s; line-height: 1.35;
}
.final-opt:hover { transform: translateY(-1px); }
.final-opt:active { transform: translateY(2px); }
.final-opt.correct { background: #A5D6A7; border-color: #2E7D32; color: #1E3A28; }
.final-opt.wrong { background: #FFC4C4; border-color: #C0392B; color: #7a2018; }
.final-opt.picked { background: #FFF3C4; border-color: #C99700; }
.final-opt:disabled { cursor: default; }
.final-confirm { grid-column: 1 / -1; margin-top: 4px; }

/* Boss 战 */
.final-boss-scene { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.final-boss { text-align: center; font-size: 46px; line-height: 1; filter: drop-shadow(0 0 14px rgba(255, 216, 0, .65)); animation: float 2.6s ease-in-out infinite; }
.final-boss.boss-hit { animation: bossHit .4s; }
.final-boss-bar { display: flex; align-items: center; gap: 8px; }
.final-boss-name { color: #FFD800; font-weight: 800; font-size: 13px; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.final-boss-hp { flex: 1; height: 18px; background: #0B1220; border: 2px solid #8A63C9; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 0 10px rgba(138,99,201,.4); }
.final-boss-hp-fill { height: 100%; background: linear-gradient(90deg, #FF6B6B, #FFD800); border-radius: 999px; transition: width .3s; }
.final-boss-hp-label { color: #fff; font-weight: 800; font-size: 13px; min-width: 40px; text-align: center; }

/* 通关证书（深色星球风 · 精致高级） */
.certificate { margin-top: 6px; }
.cert-inner {
  position: relative;
  background: linear-gradient(160deg, #0B1230 0%, #131D46 30%, #1A2856 52%, #0E1A3C 76%, #070D22 100%);
  border: 2px solid rgba(201, 165, 75, .7); border-radius: 22px; padding: 18px 16px; color: #fff; text-align: center;
  box-shadow: 0 16px 40px rgba(3, 7, 18, .55);
  overflow: hidden;
}
.cert-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cert-stars { width: 100%; height: 100%; opacity: .85; }
.cert-glow {
  background:
    linear-gradient(180deg, rgba(123, 203, 139, .14) 0%, transparent 30%, transparent 70%, rgba(78, 205, 196, .10) 100%),
    linear-gradient(115deg, transparent 42%, rgba(167, 139, 250, .08) 50%, transparent 58%);
}
.cert-logo {
  display: block; max-width: 170px; max-height: 56px; width: auto; height: auto;
  margin: 0 auto 10px; border-radius: 12px;
  border: 1.5px solid rgba(201, 165, 75, .5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  position: relative; z-index: 2;
}
.cert-badge { position: relative; display: flex; flex-direction: column; align-items: center; margin: 5px 0 8px; z-index: 2; }
.cert-badge-ring {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%) rotate(-12deg);
  width: 132px; height: 46px; border: 3px solid rgba(255, 216, 0, .55); border-radius: 50%;
}
.cert-badge-emblem { font-size: 58px; line-height: 1; position: relative; z-index: 2; animation: float 3s ease-in-out infinite; }
.cert-badge-title { font-family: "DotGothic16", "PingFang SC", sans-serif; font-size: 30px; font-weight: 800; color: #FFD800; margin-top: 4px; }
.cert-badge-sub { font-size: 12px; color: #C9A54B; letter-spacing: 2px; margin-top: 2px; }
.cert-namebox {
  display: inline-block; margin: 2px auto 8px; padding: 8px 22px;
  background: rgba(255, 216, 0, .16);
  border: 2px solid #FFD800; border-radius: 14px;
  position: relative; z-index: 2;
}
.cert-name { font-size: 24px; font-weight: 800; color: #fff; }
.cert-identity { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; position: relative; z-index: 2; }
.cert-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #C9A54B; flex: 0 0 auto; }
.cert-role { font-size: 14px; color: #C9A54B; font-weight: 700; }
.cert-verse { margin: 12px 0 4px; position: relative; z-index: 2; font-size: 13px; line-height: 1.75; color: #DDE8F5; }
.cert-verse-highlight { color: #FFD800; font-weight: 800; }
.cert-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 4px; position: relative; z-index: 2; }
.cert-stat {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
  padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cs-val { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.3; }
.cs-label { font-size: 11px; color: #A9E8C3; }
.cert-badges { margin-top: 16px; position: relative; z-index: 2; }
.cert-badges-title { font-size: 12px; color: #A9E8C3; letter-spacing: 2px; margin-bottom: 16px; }
.cert-marks { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cert-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cm, #7BCB8B); display: flex; align-items: center; justify-content: center;
  font-size: 19px; border: 2px solid #fff;
}
.cert-motto { margin: 18px 0 4px; font-size: 13px; font-weight: 700; color: #FFD800; position: relative; z-index: 2; }
.cert-foot {
  display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: #8FE3C0;
  margin-top: 10px; border-top: 1px dashed rgba(201, 165, 75, .4); padding-top: 10px; position: relative; z-index: 2;
}
.cert-save-hint { font-size: 12px; color: var(--ink-soft); margin-top: 8px; text-align: center; }
.cert-save { margin-top: 10px; background: linear-gradient(180deg, #FFD54F, #FFB300); }

/* 终章拼句 */
.final-sentence { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 48px; align-items: center; }
.final-slot {
  padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 800;
  background: rgba(255,255,255,.06); border: 2px dashed rgba(255,255,255,.25); color: transparent;
  min-width: 52px; text-align: center; transition: all .2s;
}
.final-slot.filled {
  background: linear-gradient(180deg, #fff, #efe9ff); border: 2px solid #8A63C9; color: #2E2252;
  box-shadow: 0 3px 0 rgba(0,0,0,.25); animation: finalSlotPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes finalSlotPop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.final-chunks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.final-chunk {
  padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 800; cursor: pointer;
  background: linear-gradient(180deg, #8A63C9, #6A48A8); color: #fff; border: 2px solid #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.3); transition: transform .08s, opacity .2s;
}
.final-chunk:active { transform: translateY(2px); }
.final-chunk.placed { opacity: .25; pointer-events: none; box-shadow: none; }
.final-chunk.shake { animation: shake .35s; }

/* （证书增强样式已合并到上方「通关证书」区块） */