/* ============================================================
   语林闯关 · 夜蓝糖果风 Design Tokens（v1.7 玩具感糖果精修）
   旧宣纸米棕色板已废弃，所有色值统一收敛到本 :root
   ============================================================ */
:root {
  /* —— 背景层：紫蓝 → 天青渐变（v1.7 提饱和、调向更紫） —— */
  --bg-night: #6C63E8;             /* 紫蓝（渐变起点，原 #5B6EF0） */
  --bg-sky: #8BA4FF;               /* 天青（渐变终点） */
  --star-dot: rgba(255, 255, 255, .5); /* 星点（叠加纹理） */
  --cloud: rgba(255, 255, 255, .15);   /* 祥云（叠加纹理） */

  /* —— 面板层 —— */
  --paper: #FFFDF7;                /* 宣纸白：面板 / 卡片底 */
  --line: #E4DBCD;                 /* 浅褐：边框 / 分隔线 */

  /* —— 文字层 —— */
  --ink: #4E443C;                  /* 正文（深墨棕） */
  --ink-brown: #6D4C41;            /* 墨棕：标题文字 */
  --ink-soft: #9C8E80;             /* 次要文字（浅褐系） */
  --on-light: #4E443C;             /* 浅底（暖黄等）上的深色文字 */
  --ink-strong: #4A3A28;           /* v1.7 卡面主文字加深（糖底上保证对比） */
  --ink-title: #2B2B33;            /* v1.7 结算/引导特大标题（近黑） */

  /* —— 糖果主色 —— */
  --sun: #FFE082;                  /* 暖黄：主按钮 / 糖果卡 0 */
  --sun-deep: #F5C842;             /* 暖黄深：hover / 耳朵 */
  --sun-pale: #FFF8E3;             /* 暖黄浅：渐变底 */
  --peach: #FFC1CC;                /* 桃粉：糖果卡 1 */
  --peach-deep: #FFAAB8;           /* 桃粉深：耳朵 */
  --mint: #A5E8A8;                 /* 薄荷绿：正确 / 成功 / 糖果卡 3 */
  --mint-deep: #5BBE6B;            /* 薄荷深：文字 / 描边 */
  --mint-pale: #EFFDF0;            /* 薄荷浅：渐变底 */
  --coral: #FF7B7B;                /* 珊瑚红：错误 / 强调 */
  --coral-deep: #E05252;           /* 珊瑚深：hover / 文字 */
  --coral-pale: #FFF1F1;           /* 珊瑚浅：渐变底 */
  --gold: #FFD54F;                 /* 金：星星 / 成就 / 进度条 */
  --gold-pale: #FFF6D8;            /* 金浅：渐变底 */
  --sky: #8BA4FF;                  /* 天青（good 级渐变） */
  --sky-pale: #F0F4FF;             /* 天青浅 */
  --sky-deep: #4C63B8;             /* 天青深：结算页「用时」大数字 */
  --sun-deeper: #E8960C;           /* 暖橙深：结算页「题数」大数字（--sun-deep 白底对比不足） */

  /* —— v1.7 厚积木 / 贴纸工艺 —— */
  /* 字体三层架构：界面层（系统圆体，易识别）/ 内容层（楷体，贴近语文教学书写）
     / 装饰层（卡通标题）。内容层系统楷体在前，webfont「霞鹜文楷」仅作安卓等
     无系统楷体设备的兜底（index.html 引入 CDN，font-display: swap） */
  --font-ui: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", system-ui, sans-serif;
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "BiauKai", "LXGW WenKai", serif;
  --font-cartoon: 'ZCOOL KuaiLe', 'STKaiti', 'KaiTi', cursive; /* 卡通标题/卡片字 */
  --outline-ink: #3E3A5A;          /* 耳朵 / 贴纸深描边（蓝紫墨） */
  --panel-navy: #2E3A8C;           /* 棋盘 / 顶栏深藏蓝 */
  --panel-navy-deep: #232C6E;      /* 深藏蓝厚边 / 凹槽 */
  --purple-a: #5B4FE0;             /* 顶栏面板渐变起 */
  --purple-b: #7B6FF0;             /* 顶栏面板渐变止 */
  --purple-sticker: #37309B;       /* 顶栏贴纸厚边（深紫） */
  --title-3d: #443A9E;             /* 大标题立体层（深蓝紫） */
  /* 糖果积木底边（各卡色对应的深色实心边） */
  --sun-block: #E2A93B;
  --peach-block: #F09BB0;
  --paper-block: #DCD2C2;
  --mint-block: #5FBE6E;
  --coral-block: #C74545;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 满屏适配基座（v1.9）：html/body 撑满视口，供游戏屏 100dvh 外壳定位；
   仅游戏屏（.game-wrap）锁定视口高度，大厅/登录/结算等长页面仍正常滚动 */
html { height: 100%; }

/* 紫蓝 → 天青渐变背景 + 淡星点纹理（v1.7：星点加密一倍、大小错落） */
body {
  font-family: var(--font-ui);
  background-image:
    radial-gradient(var(--star-dot) 1.3px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, .32) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, .4) 1.6px, transparent 2.3px),
    linear-gradient(165deg, var(--bg-night) 0%, var(--bg-sky) 100%);
  background-size: 128px 128px, 92px 92px, 205px 205px, 100% 100%;
  background-position: 0 0, 60px 34px, 28px 110px, 0 0;
  color: #FFFDF7; /* 裸露在夜蓝背景上的文字默认浅色；深色容器内另行覆写 */
  line-height: 1.6;
  height: 100%;
  min-height: 100vh;
  overscroll-behavior: none;                 /* 触屏防橡皮筋回弹（游戏内防误拉刷新） */
  -webkit-tap-highlight-color: transparent;  /* 去点按灰色高亮块（配合 touch-action 用） */
  -webkit-font-smoothing: antialiased;
}

/* 圆堆叠祥云：每朵云由 3 个白色半透明圆拼成，整体缓慢左右漂移 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle 44px at 10% 14%, var(--cloud) 98%, transparent 100%),
    radial-gradient(circle 62px at 15% 12%, var(--cloud) 98%, transparent 100%),
    radial-gradient(circle 38px at 20% 15%, var(--cloud) 98%, transparent 100%),
    radial-gradient(circle 54px at 76% 8%, var(--cloud) 98%, transparent 100%),
    radial-gradient(circle 72px at 83% 6%, var(--cloud) 98%, transparent 100%),
    radial-gradient(circle 44px at 90% 10%, var(--cloud) 98%, transparent 100%),
    radial-gradient(circle 40px at 66% 88%, rgba(255, 255, 255, .09) 98%, transparent 100%),
    radial-gradient(circle 56px at 72% 86%, rgba(255, 255, 255, .09) 98%, transparent 100%),
    radial-gradient(circle 36px at 78% 89%, rgba(255, 255, 255, .09) 98%, transparent 100%);
  animation: cloudDrift 38s ease-in-out infinite alternate;
}
@keyframes cloudDrift {
  from { transform: translateX(-26px); }
  to   { transform: translateX(26px); }
}

/* 第二层星点：整体缓慢明暗呼吸（全屏 twinkle 氛围） */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(rgba(255, 255, 255, .55) 1.5px, transparent 2.1px),
    radial-gradient(rgba(255, 255, 255, .38) 1px, transparent 1.5px);
  background-size: 250px 250px, 168px 168px;
  background-position: 46px 64px, 118px 22px;
  animation: bgTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes bgTwinkle {
  from { opacity: .18; }
  to   { opacity: .85; }
}

.wrap { max-width: 980px; margin: 0 auto; padding: 24px 18px 60px; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88vh; }

/* 大标题：暖黄填充 + 8 向白粗描边 + 深蓝紫立体层 + 落地投影（v1.7 立体卡通字） */
.logo {
  position: relative;
  font-family: var(--font-cartoon);
  font-weight: 400;
  font-size: clamp(44px, 12vw, 62px);
  letter-spacing: 8px;
  line-height: 1.25;
  color: var(--sun);
  transform: rotate(-2deg);
  text-shadow:
    -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff,
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 6px 0 var(--title-3d), 0 14px 26px rgba(24, 16, 72, .45);
  margin-bottom: 12px;
}
/* 标题旁金星：光晕闪烁 */
.logo::before {
  content: '⭐';
  position: absolute; top: -20px; right: -30px;
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(255, 213, 79, .95));
  animation: twinkle 2.4s ease-in-out infinite;
}
/* 环绕轨道弧线（大圆弧只露上缘，倾斜） */
.logo::after {
  content: '';
  position: absolute;
  width: 120%; height: 150%;
  left: -10%; top: -26%;
  border: 3px solid transparent;
  border-top-color: rgba(255, 255, 255, .5);
  border-radius: 50%;
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: -1;
}
.logo-sm {
  font-size: 20px; font-weight: 700; color: var(--paper); letter-spacing: 2px;
  font-family: var(--font-cartoon);
}
.subtitle { color: rgba(255, 255, 255, .82); margin-bottom: 28px; font-size: 14px; }

/* 面板：宣纸白底 + 浅褐边 + 柔和投影（后台亦共用，深色文字保证可读） */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(43, 54, 148, .18);
  width: 100%; max-width: 420px;
  color: var(--ink);
}
.panel-title { font-size: 16px; margin-bottom: 14px; color: var(--ink-brown); }
.center-text { text-align: center; }

.label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.input {
  width: 100%; padding: 14px 16px; font-size: 17px;
  border: 2px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); outline: none;
  transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
select.input { appearance: auto; }
.input:focus { border-color: var(--bg-sky); box-shadow: 0 0 0 3px rgba(139, 164, 255, .3); }
.hint { font-size: 13px; color: var(--coral-deep); margin-top: 10px; min-height: 18px; }

/* —— 按钮（v1.7 厚积木工艺：底部实心厚边 + 按压物理下压；文字用 UI 圆体保证易识别） —— */
.btn {
  padding: 12px 24px; font-size: 17px; font-family: var(--font-ui);
  border: 2px solid var(--paper-block); border-radius: 14px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 var(--paper-block);
  transition: .18s;
}
.btn:hover { border-color: var(--sun-deep); box-shadow: 0 4px 0 var(--paper-block), 0 8px 16px rgba(43, 54, 148, .22); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--paper-block); }
/* 主按钮：暖黄积木（含 6px 深琥珀厚边） */
.btn-primary { background: var(--sun); color: var(--on-light); border-color: var(--sun-deep); font-weight: 700; box-shadow: 0 5px 0 var(--sun-block); }
.btn-primary:hover { background: var(--gold); border-color: var(--sun-deep); color: var(--on-light); box-shadow: 0 5px 0 var(--sun-block), 0 8px 16px rgba(43, 54, 148, .22); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sun-block); }
.btn-block { display: block; width: 100%; margin-top: 16px; }
.btn-ghost {
  background: transparent; border: none; color: rgba(255, 255, 255, .85);
  font-size: 13px; cursor: pointer; padding: 4px 8px;
}
.btn-ghost:hover { color: #fff; }
.btn-retry { background: var(--coral); color: #fff; border-color: var(--coral-deep); font-weight: 600; box-shadow: 0 5px 0 var(--coral-block); }
.btn-retry:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: #fff; }
.btn-retry:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-block); }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; flex-wrap: wrap; }
.hello { font-size: 15px; color: #fff; }
.hello b { color: var(--gold); }
.section-title { font-size: 20px; margin: 24px 0 14px; color: #fff; letter-spacing: 2px; font-family: var(--font-cartoon); font-weight: 400; }

/* 提醒条：宣纸白底 + 金色虚线边（夜蓝背景上保证可读） */
.banner {
  background: var(--paper); border: 2px dashed var(--gold);
  padding: 12px 16px; border-radius: 12px; margin-bottom: 16px;
  font-size: 14px; color: var(--ink-brown);
  box-shadow: 0 4px 14px rgba(43, 54, 148, .18);
}

/* —— 首页游戏卡片（v1.7 厚积木工艺，与游戏卡统一） —— */
.game-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.game-card {
  position: relative;
  background: var(--paper); border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 20px; padding: 24px 16px 20px; cursor: pointer;
  text-align: center; transition: .2s; font-family: inherit;
  box-shadow: 0 6px 0 var(--block, var(--paper-block)), 0 12px 20px rgba(30, 38, 110, .22);
}
.game-card:hover { border-color: #fff; transform: translateY(-3px); box-shadow: 0 6px 0 var(--block, var(--paper-block)), 0 14px 26px rgba(30, 38, 110, .3); }
.game-card:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--block, var(--paper-block)); }
.game-icon { font-size: 36px; margin-bottom: 10px; }
.game-name { font-size: 17px; font-weight: 700; color: var(--ink-strong); margin-bottom: 6px; font-family: var(--font-cartoon); letter-spacing: 1px; }
.game-desc { font-size: 12px; color: #6E5D4B; }

.game-title { font-size: 16px; font-weight: 700; color: #fff; font-family: var(--font-cartoon); letter-spacing: 1px; }
.stats { display: flex; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.stats b { color: var(--gold); }

/* —— 进度条：深紫凹槽轨道 + 橙金斜纹填充（与倒计时同工艺） —— */
.progress {
  height: 12px; background: var(--panel-navy-deep); border-radius: 999px;
  overflow: hidden; margin-bottom: 18px;
  box-shadow: inset 0 2px 5px rgba(10, 14, 48, .55);
  border: 1px solid rgba(255, 255, 255, .14);
}
.progress-bar {
  height: 100%; background: repeating-linear-gradient(45deg, #FFE082 0 9px, #FFC93E 9px 18px);
  transition: width .3s; border-radius: 999px;
}

/* —— 配对游戏双栏（v1.7：外包深藏蓝大圆角面板 + 淡格纹纹理 + 积木厚边） —— */
.board {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1.5px, transparent 1.5px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1.5px, transparent 1.5px 22px),
    linear-gradient(160deg, #3644A6 0%, var(--panel-navy) 70%);
  border-radius: 24px;
  padding: 26px 20px 22px;
  box-shadow: 0 8px 0 var(--panel-navy-deep), 0 18px 36px rgba(24, 16, 72, .4);
}
.col { display: flex; flex-direction: column; gap: 10px; }

/* —— 分页排版（每屏 5 组）：配对类卡片放大填充盘面（.col 仅用于游戏双栏，不影响启动页演示卡）；
      盘面翻页过渡：旧盘淡出左滑（.page-out），新盘右滑入场（.page-in）+ 卡片自带 cardIn 错落 —— */
.col .card { min-height: clamp(58px, 9.5vh, 92px); }
.board, .board-grid { transition: opacity .24s ease, transform .24s ease; }
.board.page-out, .board-grid.page-out { opacity: 0; transform: translateX(-28px); }
@keyframes pageSwapIn {
  from { opacity: 0; transform: translateX(28px); }
}
.board.page-in, .board-grid.page-in { animation: pageSwapIn .32s ease-out; }

/* ============================================================
   游戏卡片（v1.7 厚积木工艺 · 与 .game-card / .stage-card / .option-pill 统一）：
   底部实心厚边 + 左上高光斑 + 20px 大圆角 + 成对动物耳朵按卡色轮换
   黄卡→兔耳 / 粉卡→猪耳 / 白卡→鸡冠 / 绿卡→蛙眼（均带深色细描边、露出卡顶）
   ============================================================ */
.card {
  position: relative;
  padding: 16px 12px; border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, .65);
  font-size: 15px; font-weight: 700; cursor: pointer;
  text-align: center; font-family: var(--font-kai); color: var(--ink-strong);
  letter-spacing: 1px;
  min-height: 56px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 var(--block, var(--paper-block)), 0 10px 18px rgba(30, 38, 110, .28);
  transition: transform .22s, opacity .35s, box-shadow .2s, border-color .2s, background-color .2s;
  animation: cardIn .3s ease-out backwards;      /* 入场：按 --i 错落延迟（JS 仅注入 --i） */
  animation-delay: calc(var(--i, 0) * .02s);
}
@keyframes cardIn {
  from { transform: translateY(14px) scale(.92); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* 糖果色轮换（按卡片 index）：底色 + 对应积木厚边色（游戏卡 / 大厅卡共用） */
.card.candy-0, .game-card.candy-0 { background-color: var(--sun);   --block: var(--sun-block); }
.card.candy-1, .game-card.candy-1 { background-color: var(--peach); --block: var(--peach-block); }
.card.candy-2, .game-card.candy-2 { background-color: var(--paper); --block: var(--paper-block); }
.card.candy-3, .game-card.candy-3 { background-color: var(--mint);  --block: var(--mint-block); }

/* 左上高光斑（白 25% 透明椭圆；耳朵占用伪元素，故画在背景层） */
.card, .game-card, .stage-card, .option-pill {
  background-image: radial-gradient(ellipse 62% 46% at 26% 14%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 72%);
}

/* —— 成对动物耳朵（::before 左 / ::after 右，露出卡片顶部） —— */
.card::before, .card::after,
.game-card::before, .game-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
/* 黄卡 → 兔耳：白长圆竖耳 + 粉内耳 */
.card.candy-0::before, .card.candy-0::after,
.game-card.candy-0::before, .game-card.candy-0::after {
  top: -24px; width: 13px; height: 30px;
  background-color: #FFFFFF;
  background-image: radial-gradient(ellipse 54% 44% at 50% 58%, var(--peach) 60%, rgba(255, 255, 255, 0) 66%);
  border: 2px solid var(--outline-ink);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  box-shadow: 0 2px 0 rgba(30, 38, 110, .14);
}
.card.candy-0::before, .game-card.candy-0::before { left: 20%; transform: rotate(-10deg); }
.card.candy-0::after,  .game-card.candy-0::after  { right: 20%; transform: rotate(10deg); }

/* 粉卡 → 猪耳：粉三角圆耳（一角收尖，左右镜像外撇） */
.card.candy-1::before, .card.candy-1::after,
.game-card.candy-1::before, .game-card.candy-1::after {
  top: -16px; width: 18px; height: 18px;
  background-color: #FFAFC2;
  background-image: radial-gradient(circle at 32% 68%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 62%);
  border: 2px solid var(--outline-ink);
}
.card.candy-1::before, .game-card.candy-1::before { left: 14%; border-radius: 84% 84% 84% 0; transform: rotate(-18deg); }
.card.candy-1::after,  .game-card.candy-1::after  { right: 14%; border-radius: 84% 84% 0 84%; transform: rotate(18deg); }

/* 白卡 → 鸡冠：三齿红冠（clip-path 造型，多层 drop-shadow 描边） */
.card.candy-2::before, .game-card.candy-2::before {
  left: 50%; top: -15px;
  width: 32px; height: 17px;
  transform: translateX(-50%);
  background: #FF5A4E;
  clip-path: polygon(0 100%, 0 40%, 13% 40%, 20% 0, 34% 34%, 50% 4%, 66% 34%, 80% 0, 87% 40%, 100% 40%, 100% 100%);
  filter:
    drop-shadow(1.5px 0 0 var(--outline-ink)) drop-shadow(-1.5px 0 0 var(--outline-ink))
    drop-shadow(0 1.5px 0 var(--outline-ink)) drop-shadow(0 -1.5px 0 var(--outline-ink));
}
.card.candy-2::after, .game-card.candy-2::after { display: none; }

/* 绿卡 → 蛙眼：绿色半圆凸眼 + 白瞳点 */
.card.candy-3::before, .card.candy-3::after,
.game-card.candy-3::before, .game-card.candy-3::after {
  top: -14px; width: 19px; height: 19px;
  background-color: #58BD68;
  background-image: radial-gradient(circle at 50% 56%, #FFFFFF 0 3.5px, rgba(255, 255, 255, 0) 4.5px);
  border: 2px solid var(--outline-ink);
  border-radius: 50% 50% 44% 44% / 72% 72% 28% 28%;
}
.card.candy-3::before, .game-card.candy-3::before { left: 18%; }
.card.candy-3::after,  .game-card.candy-3::after  { right: 18%; }

.card:hover:not(:disabled) {
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--block, var(--paper-block)), 0 12px 22px rgba(30, 38, 110, .34);
}

/* 选中态：白色发光光晕（保留厚边） */
.card.selected {
  border-color: #fff;
  box-shadow: 0 6px 0 var(--block, var(--paper-block)), 0 0 0 3px #fff, 0 0 18px rgba(255, 255, 255, .85);
}

/* 按压：物理下压（厚边 6px → 3px，卡片随之下沉） */
.card:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--block, var(--paper-block)), 0 5px 10px rgba(30, 38, 110, .22);
}
.card.selected:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--block, var(--paper-block)), 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .7);
}

/* 正确消除态：薄荷绿描边 + 缩小淡出（scale .6 / opacity 0 / 约 .35s） */
.card.matched {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint);
  transform: scale(.6);
  opacity: 0;
  pointer-events: none;
}
.card:disabled { cursor: default; }

/* 错误态：珊瑚红描边 + 变红 + 抖动（600ms 后 JS 移除 class 恢复） */
.card.wrong {
  border-color: var(--coral);
  background-color: var(--coral-pale);
  box-shadow: 0 0 0 3px rgba(255, 123, 123, .4);
  animation: shake .4s;
}

/* ============================================================
   动画基础设施（keyframes 供全局复用；部分供后续批次使用）
   ============================================================ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes pop {
  0% { transform: scale(.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes float {                                  /* 浮动（备用/装饰） */
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes glowPulse {                              /* 光晕呼吸（v1.7 增强：白圈+大光斑+环绕闪光星点） */
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, .92), 0 0 22px rgba(255, 255, 255, .6),
      28px -36px 0 -3px rgba(255, 228, 122, 0),
      -36px 6px 0 -3px rgba(255, 255, 255, 0),
      42px 26px 0 -4px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, .98), 0 0 34px rgba(255, 255, 255, .95),
      28px -36px 0 -3px #FFE47A,
      -36px 6px 0 -3px #FFF3C4,
      42px 26px 0 -4px #FFFFFF;
  }
}
@keyframes confettiFall {                           /* 彩带下落（结算庆祝；水平漂移/旋转可用元素上的 CSS 变量覆盖） */
  0% { transform: translate(0, -10vh) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift, 0px), 110vh) rotate(var(--spin, 720deg)); opacity: .4; }
}
@keyframes starPop {                                /* 星星弹入（结算星数） */
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes bounceUp {                               /* 吉祥物跳跃（结算 3 星庆祝） */
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
/* 动画工具类（供后续批次直接挂类名使用） */
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-glow  { animation: glowPulse 2s ease-in-out infinite; }

/* 备用（批次2 · G1 宫格化）：4 列自适应卡片网格，每列最小 ~68px */
.grid-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 10px;
}

/* —— 结算页 —— */
.stars {
  font-size: 36px; color: var(--gold); letter-spacing: 8px;
  text-align: center; margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(255, 213, 79, .6);
  animation: starPop .6s cubic-bezier(.2, 1.4, .4, 1);
}

/* 鼓励语主卡（v1.7）：宣纸白大卡 + 特大黑卡通标题（五级仅边框色区分） */
.encourage {
  text-align: center; padding: 46px 20px 26px; border-radius: 20px;
  margin-bottom: 20px; border: 3px solid var(--line); color: var(--ink);
  background: var(--paper);
  box-shadow: 0 6px 0 var(--paper-block), 0 16px 32px rgba(30, 38, 110, .22);
  position: relative;
}
.encourage.perfect { border-color: var(--gold); }
.encourage.great   { border-color: var(--mint); }
.encourage.good    { border-color: var(--sky); }
.encourage.ok      { border-color: var(--sun-deep); }
.encourage.try     { border-color: var(--coral); }
/* 竞品式：主视觉为特大标题+跳跃吉祥物，原 emoji 层塌缩隐藏 */
.encourage-emoji { font-size: 0; height: 0; margin: 0; line-height: 0; }
.encourage-title {
  font-family: var(--font-cartoon); font-weight: 400;
  font-size: clamp(30px, 9vw, 40px);
  color: var(--ink-title); margin-bottom: 10px; letter-spacing: 2px; line-height: 1.3;
}
.encourage-text { font-size: 15px; color: #8A8A99; line-height: 1.8; max-width: 520px; margin: 0 auto; }

.result-stats { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; }
.result-stats > div { text-align: center; min-width: 70px; }
.result-stats span { display: block; font-size: 24px; font-weight: 700; color: var(--ink-brown); line-height: 1.2; }
.result-stats em { font-style: normal; font-size: 12px; color: var(--ink-soft); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.actions .btn { min-width: 140px; }

.wrong-item {
  padding: 14px; border-left: 3px solid var(--coral);
  background: var(--coral-pale); border-radius: 8px; margin-bottom: 10px;
}
.wrong-q { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.wrong-a { font-size: 14px; color: var(--mint-deep); margin-bottom: 2px; }
.wrong-yours { font-size: 13px; color: var(--ink-soft); }
.wrong-yours span { color: var(--coral-deep); }
.wrong-tip { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* —— 难度标识（badge + 分布条）换用新色板 —— */
.diff-badge {
  position: absolute; top: 4px; left: 6px;
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  font-weight: 600; letter-spacing: .5px; pointer-events: none;
  background: rgba(255, 253, 247, .85); color: var(--ink-brown);
}
.diff-1 { background: #DFF7E1; color: #3E8E4F; }
.diff-2 { background: #E2E9FB; color: #4C63B8; }
.diff-3 { background: #FFF3CC; color: #A67C00; }
.diff-4 { background: #FFE1E1; color: #D94F4F; }

.diff-bar { display: flex; gap: 6px; height: 44px; border-radius: 8px; overflow: hidden; }
.diff-bar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; min-width: 50px;
}
.diff-bar-item.diff-1 { background: #7ED98A; }
.diff-bar-item.diff-2 { background: var(--sky); }
.diff-bar-item.diff-3 { background: var(--gold); }
.diff-bar-item.diff-4 { background: var(--coral); }
.diff-bar-item b { font-size: 13px; }
.diff-bar-item span { font-size: 11px; opacity: .9; }

.muted { color: var(--ink-soft); font-size: 13px; }
.panel .muted { color: var(--ink-soft); } /* 面板内次要文字（深底容器内保持可读） */

/* ============================================================
   教师后台（共用本 css）：宣纸白底 + 墨棕字，保证夜蓝背景上可读
   ============================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: center; color: var(--ink); box-shadow: 0 4px 14px rgba(43, 54, 148, .16); }
.kpi-num { font-size: 28px; font-weight: 700; color: var(--ink-brown); }
.kpi-label { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ink); }
.tbl th, .tbl td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--ink-soft); font-weight: 500; font-size: 13px; }
.badge { background: var(--coral); color: #fff; padding: 1px 8px; border-radius: 8px; font-size: 12px; }
.good { color: var(--mint-deep); font-weight: 600; }
.mid { color: #C79A2A; font-weight: 600; }
.bad { color: var(--coral-deep); font-weight: 600; }

/* —— 响应式：移动端竖屏优先 —— */
@media (max-width: 640px) {
  .logo { font-size: 40px; letter-spacing: 5px; }
  .wrap { padding: 16px 12px 48px; }
  .board { gap: 8px; padding: 24px 12px 18px; border-radius: 20px; }
  .col { gap: 8px; }
  /* 分页后每屏 5 组：移动端双栏卡按视口高度收缩下限，保证 5 行不满屏溢出 */
  .col .card { min-height: clamp(52px, 8vh, 68px); }
  .card { font-size: 14px; padding: 12px 8px; min-height: 50px; border-radius: 18px;
          box-shadow: 0 4px 0 var(--block, var(--paper-block)), 0 8px 14px rgba(30, 38, 110, .25); }
  .card:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--block, var(--paper-block)); }
  .card.selected:active:not(:disabled) { box-shadow: 0 2px 0 var(--block, var(--paper-block)), 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .7); }
  /* 移动端耳朵等比收缩 */
  .card.candy-0::before, .card.candy-0::after,
  .game-card.candy-0::before, .game-card.candy-0::after { width: 10px; height: 24px; top: -19px; }
  .card.candy-1::before, .card.candy-1::after,
  .game-card.candy-1::before, .game-card.candy-1::after { width: 14px; height: 14px; top: -13px; }
  .card.candy-2::before, .game-card.candy-2::before { width: 26px; height: 14px; top: -12px; }
  .card.candy-3::before, .card.candy-3::after,
  .game-card.candy-3::before, .game-card.candy-3::after { width: 15px; height: 15px; top: -11px; }
  .stats { gap: 10px; font-size: 13px; }
  .encourage-title { font-size: 30px; }
}

/* ============================================================
   v1.3 启动页 / 登录学段选择 / 游戏顶部状态栏 / 倒计时 / 规则弹窗
   ============================================================ */

/* —— 启动页：整屏紫蓝渐变（背景由 body 提供） —— */
.splash {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; user-select: none;
}

/* 静态散落彩带：糖果色小圆角矩形（两组不同倾角，box-shadow 复制多点） */
.splash::before {
  content: '';
  position: absolute; top: 8%; left: 5%;
  width: 11px; height: 24px; border-radius: 6px;
  background: #FF8FAB;
  transform: rotate(-26deg);
  box-shadow:
    48px 54px 0 -1px #7BE0A2, 112px 18px 0 0 #FFD54F,
    24px 108px 0 0 #9AB0FF, 148px 88px 0 -2px #FF9F6E;
  opacity: .92;
  z-index: 0;
}
.splash::after {
  content: '';
  position: absolute; bottom: 13%; right: 6%;
  width: 11px; height: 24px; border-radius: 6px;
  background: #9AB0FF;
  transform: rotate(24deg);
  box-shadow:
    -50px -46px 0 -1px #FFD54F, -110px -16px 0 0 #7BE0A2,
    -22px -100px 0 0 #FF8FAB, -150px -82px 0 -2px #FF9F6E;
  opacity: .92;
  z-index: 0;
}

/* 大标题：2 字断行（语林/闯关）双行特大卡通字——
   暖黄填充 + 8 向白粗描边 + 深蓝紫立体层 + 落地投影 + 轻微左倾 */
.splash-title {
  font-family: var(--font-cartoon);
  font-weight: 400;
  font-size: clamp(52px, 16vw, 100px);
  line-height: 1.16;
  letter-spacing: 8px;
  width: 2.7em;               /* 限宽断行成双行 */
  text-align: center;
  color: var(--sun);
  transform: rotate(-2deg);
  text-shadow:
    -4px 0 0 #fff, 4px 0 0 #fff, 0 -4px 0 #fff, 0 4px 0 #fff,
    -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff,
    0 7px 0 var(--title-3d), 0 18px 32px rgba(24, 16, 72, .5);
  animation: pop .6s cubic-bezier(.2, 1.4, .4, 1);
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
/* 标题旁金星（⭐ 带光晕闪烁）+ 小闪光星 */
.splash-title::before {
  content: '⭐';
  position: absolute; top: -30px; right: -36px;
  font-size: 30px;
  filter: drop-shadow(0 0 10px rgba(255, 213, 79, .95));
  animation: twinkle 2.4s ease-in-out infinite;
  z-index: 3;
}
.splash-title::after {
  content: '✦';
  position: absolute; bottom: -6px; left: -30px;
  font-size: 20px; color: #FFE47A;
  text-shadow: 0 0 12px rgba(255, 213, 79, .95);
  animation: twinkle 2s .6s ease-in-out infinite;
  z-index: 3;
}

/* 副标题胶囊：深紫底白字贴纸（层级提升） */
.splash-capsule {
  background: linear-gradient(135deg, var(--purple-a), var(--purple-b));
  border: 2px solid rgba(255, 255, 255, .85);
  color: #fff;
  font-family: var(--font-cartoon);
  font-size: 16px; letter-spacing: 4px;
  padding: 9px 26px; border-radius: 999px;
  box-shadow: 0 5px 0 var(--purple-sticker), 0 12px 24px rgba(24, 16, 72, .35);
  animation: pop .6s .15s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
/* 标题轨道弧线：挂胶囊伪元素、锚定 .splash 居中，绕标题缓慢公转（只露上缘弧段） */
.splash-capsule::before {
  content: '';
  position: absolute;
  width: min(80vw, 580px); height: min(50vh, 470px);
  left: 50%; top: calc(50% - 46px);
  transform: translate(-50%, -50%) rotate(-12deg);
  border: 3px solid transparent;
  border-top-color: rgba(255, 255, 255, .5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: orbitSpin 16s linear infinite;
}
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(-12deg); }
  to   { transform: translate(-50%, -50%) rotate(348deg); }
}
/* 星星点缀：随机散布 + 闪烁 */
.splash-star {
  position: absolute; color: var(--gold);
  font-size: 18px; opacity: .85; pointer-events: none;
  text-shadow: 0 0 8px rgba(255, 213, 79, .8);
  animation: twinkle 2.2s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
/* 漂浮示例卡（同厚积木工艺 + 耳朵）：--rot 存旋转角，避免被 float 动画覆盖 */
.splash-card {
  position: absolute; font-size: 16px; font-weight: 700;
  min-height: 52px; padding: 12px 18px;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 6px 0 var(--block, var(--paper-block)), 0 12px 22px rgba(24, 16, 72, .3);
  z-index: 1;
}
.splash-card:hover, .splash .splash-card.anim-float:hover { transform: rotate(var(--rot, 0deg)) translateY(-4px); }
/* 底部加载条：暖黄填充 2 秒走满 */
.splash-load { position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center; z-index: 2; }
.splash-track {
  width: min(320px, 70vw); height: 12px; margin: 0 auto 10px;
  background: rgba(255, 253, 247, .3); border-radius: 999px;
  overflow: hidden; border: 1px solid rgba(255, 253, 247, .4);
}
.splash-bar {
  width: 0; height: 100%;
  background: linear-gradient(90deg, var(--sun), var(--gold));
  border-radius: 999px;
  transition: width 2s linear;
}
.splash-loading-text { font-size: 13px; color: rgba(255, 253, 247, .85); letter-spacing: 2px; }

/* —— 启动页中央演示面板：深藏蓝格纹大圆角（复用 .board 面板工艺）+ 4 列 × 2 行演示厚卡 ——
   视觉锚位：标题/副标题下方、进度条上方；整体 -3° 倾斜 + 落地投影 + 缓慢上下浮动 */
.splash-demo {
  position: relative; z-index: 2;
  width: min(440px, 88%);
  margin-top: 26px;
  padding: 28px 20px 20px;
  border-radius: 26px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1.5px, transparent 1.5px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1.5px, transparent 1.5px 22px),
    linear-gradient(160deg, #3644A6 0%, var(--panel-navy) 70%);
  box-shadow: 0 8px 0 var(--panel-navy-deep), 0 18px 36px rgba(24, 16, 72, .4);
  animation:
    pop .6s .2s cubic-bezier(.2, 1.4, .4, 1) backwards,
    splashDemoFloat 5s 1.4s ease-in-out infinite;
}
@keyframes splashDemoFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-5px); }
}
.splash-demo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px 10px;
}
/* 演示厚卡：完整复用 .card 工艺（糖果色/厚边/成对耳朵），仅收尺寸 + 字/拼音两行混排 */
.splash-demo .demo-card {
  flex-direction: column; gap: 1px;
  padding: 8px 4px; min-height: 0;
  aspect-ratio: 1; font-size: 12px; letter-spacing: 0;
  cursor: default;
}
.splash-demo .demo-han { font-size: 24px; line-height: 1.1; color: var(--ink-strong); }
.splash-demo .demo-pin { font-size: 12px; line-height: 1.2; color: rgba(30, 38, 110, .62); letter-spacing: 0; }

/* —— 登录页：学段两张大卡（厚积木工艺） —— */
.stage-cards { display: flex; gap: 12px; }
.stage-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 10px 14px; border-radius: 18px; cursor: pointer;
  background-color: #fff; border: 2px solid var(--paper-block); font-family: inherit;
  color: var(--ink); transition: .18s;
  box-shadow: 0 5px 0 var(--paper-block), 0 10px 16px rgba(30, 38, 110, .18);
}
.stage-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--paper-block); }
.stage-card .stage-icon { font-size: 32px; line-height: 1.2; }
.stage-card .stage-name { font-size: 16px; font-weight: 700; color: var(--ink-strong); font-family: var(--font-cartoon); letter-spacing: 1px; }
/* 点选高亮：暖黄描边 + 微放大 */
.stage-card.active {
  border-color: var(--sun-deep);
  background-color: var(--sun-pale);
  box-shadow: 0 5px 0 var(--sun-block), 0 0 0 3px rgba(255, 224, 130, .55), 0 10px 16px rgba(30, 38, 110, .18);
  transform: scale(1.04);
}
.stage-card.active:active { transform: translateY(2px) scale(1.02); }
/* 初中年级三选：胶囊按钮 */
.grade-capsules { display: flex; gap: 10px; margin-top: 12px; }
.grade-capsule {
  flex: 1; padding: 10px 4px; font-size: 14px;
  font-family: var(--font-ui);
  border: 2px solid var(--paper-block); border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer; transition: .18s;
  box-shadow: 0 3px 0 var(--paper-block);
}
.grade-capsule:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper-block); }
.grade-capsule.active {
  background: var(--sun); border-color: var(--sun-deep);
  color: var(--on-light); font-weight: 700;
  box-shadow: 0 3px 0 var(--sun-block);
}

/* —— 游戏页顶部状态栏（v1.7：紫渐变一体面板 + 白 3px 描边 + 贴纸厚投影） —— */
.game-topbar {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--purple-a), var(--purple-b));
  border: 3px solid #fff;
  border-radius: 22px;
  padding: 12px 16px 10px;
  box-shadow: 0 6px 0 var(--purple-sticker), 0 14px 28px rgba(24, 16, 72, .35);
}
.gt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gt-row-sub { justify-content: space-between; }
.gt-level {
  font-size: 20px; font-weight: 400; color: var(--gold); letter-spacing: 2px;
  font-family: var(--font-cartoon);
  text-shadow: 0 2px 0 rgba(24, 16, 72, .45);
  flex: 1; text-align: center;
}
/* 吉祥物头像：72px 拟人大头像 + idle 上下浮动 */
.gt-mascot {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--paper);
  border: 4px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  box-shadow: 0 5px 0 rgba(24, 16, 72, .35);
  animation: float 3s ease-in-out infinite;
  flex-shrink: 0;
}
/* 经验值胶囊：深紫底白字贴纸 */
.pill-xp {
  background: var(--panel-navy);
  border: 2px solid rgba(255, 255, 255, .75);
  color: rgba(255, 253, 247, .98);
  font-size: 13px; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--panel-navy-deep);
}
.pill-xp b { color: var(--gold); font-size: 15px; }
/* 规则按钮：同款深紫贴纸 */
.btn-rule {
  background: var(--panel-navy); color: #fff;
  border: 2px solid rgba(255, 255, 255, .75); border-radius: 999px;
  font-size: 13px; font-weight: 700; padding: 6px 16px;
  letter-spacing: 1px;
  cursor: pointer; font-family: var(--font-ui); transition: .18s;
  box-shadow: 0 3px 0 var(--panel-navy-deep);
}
.btn-rule:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--panel-navy-deep), 0 8px 14px rgba(24, 16, 72, .3); }
.btn-rule:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--panel-navy-deep); }

/* —— 倒计时：⏰ 金闹钟 + 橙金渐变斜纹进度条 + 深紫凹槽；≤15s 危险态变红 —— */
.timer { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.timer-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 213, 79, .75)) drop-shadow(0 2px 2px rgba(24, 16, 72, .4));
}
.timer-text {
  font-size: 15px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 0 rgba(24, 16, 72, .45);
  font-variant-numeric: tabular-nums; min-width: 48px;
}
.timer-track {
  width: min(140px, 30vw); height: 13px;
  background: var(--panel-navy-deep); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(10, 14, 48, .65), inset 0 -1px 0 rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
}
.timer-bar {
  height: 100%; width: 100%;
  background: repeating-linear-gradient(45deg, #FFD54F 0 9px, #FFAE2E 9px 18px);
  border-radius: 999px;
  box-shadow: inset 0 -2px 3px rgba(160, 84, 0, .35);
  transition: width 1s linear, background-color .3s;
}
.timer.danger .timer-bar { background: repeating-linear-gradient(45deg, #FF8A80 0 9px, #E05252 9px 18px); }
.timer.danger .timer-text { color: #FFB4AE; }
.timer.danger .timer-track { animation: blinkBar 1s ease-in-out infinite; }
@keyframes blinkBar {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* —— 规则弹窗：宣纸白圆角 + 遮罩（z-index 全局最高） —— */
.rule-mask {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(30, 38, 90, .55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.rule-modal {
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--gold); border-radius: 20px;
  padding: 28px 26px 20px; width: 86%; max-width: 340px;
  text-align: center; cursor: default;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  animation: pop .28s cubic-bezier(.2, 1.4, .4, 1);
}
.rule-emoji { font-size: 40px; margin-bottom: 8px; }
.rule-modal-title {
  font-size: 20px; color: var(--ink-brown); margin-bottom: 10px;
  font-family: var(--font-cartoon); font-weight: 400; letter-spacing: 2px;
}
.rule-modal-text { font-size: 15px; line-height: 1.8; color: var(--ink); }
.rule-modal-hint { font-size: 12px; color: var(--ink-soft); margin-top: 14px; }

/* 结算页：超时未作答口径说明 */
.timeout-note {
  border: 2px dashed var(--coral);
  background: var(--coral-pale);
  color: var(--coral-deep); font-size: 14px;
  padding: 12px 16px;
}
.timeout-note b { font-size: 16px; }

/* ============================================================
   v1.4 提示按钮 / 新手引导 / 结算页升级（三大星 / 三项统计 / 彩带）
   ============================================================ */

/* —— 提示按钮：暖黄胶囊厚积木，独立底栏居中（文档流内，不与卡片重叠） —— */
.hint-bar { display: flex; justify-content: center; margin: 16px 0 6px; }
.btn-hint {
  background: var(--sun); color: var(--on-light);
  border: 2px solid var(--sun-deep); border-radius: 999px;
  font-size: 15px; font-weight: 700; padding: 10px 28px;
  cursor: pointer; font-family: var(--font-ui); letter-spacing: 1px;
  transition: .18s;
  box-shadow: 0 5px 0 var(--sun-block), 0 10px 16px rgba(30, 38, 110, .25);
}
.btn-hint:hover:not(:disabled) { background: var(--gold); transform: translateY(-2px); }
.btn-hint:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--sun-block), 0 6px 10px rgba(30, 38, 110, .2); }
/* 用完置灰禁用态 */
.btn-hint:disabled, .btn-hint.disabled {
  background: rgba(255, 253, 247, .35);
  color: rgba(255, 253, 247, .75);
  border-color: rgba(255, 255, 255, .4);
  box-shadow: none; cursor: not-allowed; transform: none;
}

/* —— 新手引导浮层（v1.7）：气泡顶部定位（游戏面板上方）+ 两级排版 + 吉祥物探出左上 ——
   z-index 10050 高于规则弹窗（10000） —— */
.guide-mask {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(20, 16, 60, .6);
  display: flex; align-items: flex-start; justify-content: center;
  cursor: pointer; padding: 205px 24px 24px;
}
.guide-bubble {
  position: relative;
  background: var(--paper); color: var(--ink);
  border: 3px solid #fff;
  border-radius: 22px; padding: 26px 24px 18px;
  width: 100%; max-width: 360px;
  margin-top: 44px; /* 给探出的吉祥物留位 */
  box-shadow: 0 8px 0 rgba(24, 16, 72, .35), 0 18px 40px rgba(0, 0, 0, .4);
  animation: pop .28s cubic-bezier(.2, 1.4, .4, 1);
}
/* 吉祥物 64px 探出气泡左上（负定位） */
.guide-mascot {
  position: absolute; top: -46px; left: -14px;
  font-size: 64px; line-height: 1;
  transform: rotate(-12deg);
  filter: drop-shadow(0 10px 14px rgba(24, 16, 72, .35));
  animation: float 3s ease-in-out infinite;
}
/* 两级排版：.guide-title（第 N 关）= 居中大黑卡通标题；.guide-text = 灰色次行
   （标题与副文拆为独立元素，换行排版不再产生孤立「·」项目符） */
.guide-text {
  font-size: 14px; line-height: 1.8; color: #8A8A99;
  text-align: left;
}
.guide-title {
  display: block; text-align: center;
  color: var(--ink-title); margin-bottom: 8px;
  font-family: var(--font-cartoon); font-weight: 400;
  font-size: 27px; letter-spacing: 3px;
}
.guide-hint { font-size: 12px; color: #B4B4C2; margin-top: 10px; text-align: center; }

/* —— 结算页（v1.7）：三颗大金星（白描边 + 金→橙渐变内芯），负 margin 破格叠在主卡顶缘；
   原生 ⭐ emoji 以 font-size:0 隐藏，由双层 ★ 字形叠加重绘：
   ::before 白色大星（描边/投影层）+ ::after 渐变小星（内芯层，background-clip:text）——
   不用 text-shadow 做白边的原因：text-shadow 会透过透明字芯盖住渐变填充 —— */
.stars-big {
  display: flex; justify-content: center; align-items: flex-end; gap: 18px;
  height: 64px;
  margin-top: 72px;           /* 顶部留白：给破格吉祥物探出空间 */
  margin-bottom: -34px;
  position: relative; z-index: 3;
}
.big-star {
  width: 64px; height: 64px;
  font-size: 0; line-height: 0;              /* 隐藏原 emoji */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  animation: starPop .55s cubic-bezier(.2, 1.4, .4, 1) backwards;
  filter: grayscale(1); opacity: .3;
}
.big-star.lit { filter: none; opacity: 1; }
.big-star::before, .big-star::after {
  content: '★';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.big-star::before {
  font-size: 66px;                            /* 白星略大 = 描边 */
  color: #fff;
  text-shadow: 0 6px 14px rgba(24, 16, 72, .35);
}
.big-star::after {
  font-size: 60px;                            /* 渐变内芯略小 = 白边露出 */
  background: linear-gradient(180deg, #FFEE9C 12%, #FFC93E 55%, #FF9430 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 吉祥物：原 div 塌缩为 0 高，由伪元素在主卡左上重绘 82px 大熊猫（3 星跳跃保留） */
.result-mascot {
  font-size: 0; line-height: 0; height: 0;
  position: relative; z-index: 4;
}
.result-mascot::before {
  content: '🐼';
  position: absolute;
  left: 10%; bottom: 2px;
  font-size: 82px; line-height: 1;
  transform: rotate(-10deg);
  filter: drop-shadow(0 14px 20px rgba(24, 16, 72, .3));
}
@keyframes mascotJump {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-20px); }
}
.result-mascot.jump::before { animation: mascotJump .6s ease-in-out 3; }

/* —— 结算页：竞品式三项统计（用时蓝 / 题数橙 / 正确率绿），大数字卡通字 56px —— */
.result-stats3 { display: flex; justify-content: space-around; gap: 10px; }
.rs-item { text-align: center; flex: 1; }
.rs-num {
  display: block; font-family: var(--font-cartoon); font-weight: 400;
  font-size: 56px; line-height: 1.15; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.rs-num i { font-style: normal; font-size: 20px; font-weight: 400; margin-left: 2px; }
.rs-item em { font-style: normal; font-size: 13px; color: var(--ink-soft); }
.rs-time  { color: var(--sky-deep); }
.rs-count { color: var(--sun-deeper); }
.rs-acc   { color: var(--mint-deep); }

/* —— 结算彩带：糖果色小片从顶部落下（颜色/尺寸/漂移由 JS 内联注入） —— */
.confetti {
  position: fixed; top: 0;
  z-index: 9999; pointer-events: none;
  border-radius: 2px;
  animation: confettiFall var(--dur, 2s) linear forwards;
}

/* —— 移动端适配：状态栏两行排布 / 启动页卡片收缩 / 引导与结算缩放 —— */
@media (max-width: 640px) {
  .splash-card { font-size: 13px; padding: 9px 12px; min-height: 0; }
  .gt-row { gap: 8px; }
  .gt-row-sub .stats { font-size: 12px; }
  .timer-track { width: 26vw; }
  .game-topbar { padding: 10px 12px 8px; border-radius: 18px; }
  .gt-mascot { width: 52px; height: 52px; font-size: 30px; border-width: 3px; }
  .btn-hint { font-size: 14px; padding: 9px 24px; }
  .guide-mask { padding-top: 150px; }
  .guide-bubble { padding: 24px 16px 16px; margin-top: 38px; }
  .guide-mascot { font-size: 56px; top: -40px; left: -8px; }
  .guide-title { font-size: 24px; }
  .splash-demo { margin-top: 20px; padding: 20px 14px 16px; border-radius: 22px; }
  .splash-demo-grid { gap: 12px 10px; }
  .splash-demo .demo-han { font-size: 22px; }
  .splash-demo .demo-pin { font-size: 11px; }
  .stars-big { height: 54px; gap: 12px; margin-top: 56px; margin-bottom: -28px; }
  .big-star { width: 54px; height: 54px; }
  .big-star::before { font-size: 52px; }
  .result-mascot::before { font-size: 64px; left: 6%; }
  .encourage { padding-top: 42px; }
  .rs-num { font-size: 44px; }
  .rs-num i { font-size: 17px; }
}

/* ============================================================
   v1.5 大厅分组 / 选择类玩法 G4-G8（诗句填空/病句门诊/文学常识/错别字侦探）
   ============================================================ */

/* —— 分组小标题副文案 —— */
.section-sub {
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  color: rgba(255, 253, 247, .65); margin-left: 10px;
}

/* —— 大厅游戏卡：v1.7 起耳朵/糖果色统一走「厚积木卡片工艺」区块（.card 与 .game-card 共用选择器），此处不再重复定义 —— */

/* —— poem-pair：诗句较长，配对卡字号小一档 —— */
.board-poem .card { font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) {
  .board-poem .card { font-size: 13px; }
}

/* —— 选择类玩法：题干卡（宣纸白大圆角） —— */
.choice-wrap { display: flex; flex-direction: column; gap: 14px; }
.choice-step {
  text-align: center; font-size: 14px;
  color: rgba(255, 253, 247, .88); letter-spacing: 1px;
}
.choice-step b { color: var(--gold); font-size: 16px; }
.question-card {
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--line); border-radius: 20px;
  padding: 22px 20px; text-align: center;
  box-shadow: 0 5px 0 var(--paper-block), 0 14px 26px rgba(30, 38, 110, .25);
}
.question-label {
  display: inline-block; font-size: 12px; color: var(--ink-brown);
  background: var(--sun-pale); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 14px; margin-bottom: 12px;
}
.question-text {
  font-size: 21px; line-height: 1.9; color: var(--ink);
  font-family: var(--font-kai); letter-spacing: 1px; /* 题目正文：楷体（系统楷体优先，安卓走霞鹜文楷兜底） */
}
.question-line + .question-line { margin-top: 4px; }
/* poem-fill 空位：金色下划线空槽 */
.fill-blank {
  display: inline-block; min-width: 4.5em; height: 1em;
  border-bottom: 3px solid var(--gold);
  margin: 0 4px; vertical-align: baseline;
}

/* —— 选择类玩法：4 选项胶囊（2×2 网格，移动端单列；厚积木工艺） —— */
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option-pill {
  position: relative;
  border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 18px; padding: 14px 12px;
  font-size: 16px; font-family: var(--font-kai); color: var(--ink-strong);
  letter-spacing: 1px;
  cursor: pointer; min-height: 58px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.55; word-break: break-word;
  box-shadow: 0 5px 0 var(--block, var(--paper-block)), 0 9px 16px rgba(30, 38, 110, .22);
  transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s;
  animation: pop .3s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
/* 糖果色轮换（与配对卡同色板 + 对应积木底边） */
.option-pill.candy-0 { background-color: var(--sun);   --block: var(--sun-block); }
.option-pill.candy-1 { background-color: var(--peach); --block: var(--peach-block); }
.option-pill.candy-2 { background-color: var(--paper); --block: var(--paper-block); }
.option-pill.candy-3 { background-color: var(--mint);  --block: var(--mint-block); }
.option-pill:hover:not(:disabled) { border-color: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--block, var(--paper-block)), 0 11px 18px rgba(30, 38, 110, .28); }
.option-pill:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--block, var(--paper-block)); }
.option-pill:disabled { cursor: default; }
/* 句子长选项：左对齐多行更易读 */
.option-pill.text-left { text-align: left; justify-content: flex-start; }
/* 词组竖排（错别字侦探按顿号分行） */
.opt-word { display: block; }

/* 答对：薄荷绿 */
.option-pill.correct {
  background-color: var(--mint) !important;
  border-color: var(--mint-deep);
  box-shadow: 0 5px 0 var(--mint-block), 0 0 0 3px var(--mint);
}
/* 答错：珊瑚红 + 抖动 */
.option-pill.wrong {
  background-color: var(--coral-pale) !important;
  border-color: var(--coral);
  box-shadow: 0 5px 0 var(--coral-block), 0 0 0 3px rgba(255, 123, 123, .4);
  animation: shake .4s;
}
/* 错误时正确项短暂高亮：薄荷绿 + 光晕 */
.option-pill.reveal {
  background-color: var(--mint) !important;
  border-color: var(--mint-deep);
  box-shadow: 0 5px 0 var(--mint-block), 0 0 0 3px var(--mint), 0 0 20px rgba(165, 232, 168, .95);
}

/* —— 移动端：选项单列 —— */
@media (max-width: 640px) {
  .options-grid { grid-template-columns: 1fr; }
  .question-text { font-size: 17px; }
  .option-pill { font-size: 15px; border-radius: 16px; }
}

/* ============================================================
   v1.6→v1.7 G1 拼音宫格消除（type:'grid'）· v1.8 分页排版
   每屏只出现 5 组（10 卡）：桌面 6 列（10 卡 = 2 行）/ 移动端 3 列（10 卡 = 4 行），
   替代旧版整轮 18 卡一屏（移动 6 行溢出视口）；翻到第 2 页 4 组 = 8 卡。
   列数维持旧版不变（桌面 6 / 移动 3），卡片随行数减少自然更大更舒展；
   卡片复用 .card 厚积木工艺（糖果四色轮换 + 成对耳朵）；
   宫格本体升级为深藏蓝大圆角面板（淡格纹纹理 + 积木厚边）
   ============================================================ */
.board-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 桌面：6 列 × 2 行（每屏 5 组） */
  gap: 12px;
  max-width: 700px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1.5px, transparent 1.5px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1.5px, transparent 1.5px 22px),
    linear-gradient(160deg, #3644A6 0%, var(--panel-navy) 70%);
  border-radius: 24px;
  padding: 26px 20px 22px;
  box-shadow: 0 8px 0 var(--panel-navy-deep), 0 18px 36px rgba(24, 16, 72, .4);
}
.board-grid .card {
  aspect-ratio: 1 / 1;  /* 方形卡 */
  min-height: 0;
  padding: 6px;
  font-size: 28px;      /* 汉字卡大字（占卡高约 40%） */
  font-weight: 700;
  letter-spacing: 2px;
}
/* 拼音卡：同糖果色系白纱浅染（同色不同深浅）+ 小字号；高光斑与白纱叠加 */
.board-grid .card.card-pinyin {
  background-image:
    radial-gradient(ellipse 62% 46% at 26% 14%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 72%),
    linear-gradient(rgba(255, 253, 247, .58), rgba(255, 253, 247, .58));
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 6px 4px;
  word-break: break-word;
}

/* —— 移动端：3 列（10 卡 = 4 行，不满屏溢出），宽度不够时 3 列自适应收缩 —— */
@media (max-width: 640px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); max-width: 338px; gap: 10px; padding: 24px 12px 18px; border-radius: 20px; }
  .board-grid .card { font-size: 24px; letter-spacing: 1px; }
  .board-grid .card.card-pinyin { font-size: 13px; }
}

/* ============ 教师后台：筛选栏（仅 #admin 作用域，不影响学生端） ============ */
/* 后台表格/筛选需要全宽（.panel 默认 max-width:420px 是为登录卡设计） */
#admin .panel { max-width: none; }
.admin-filter { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.admin-filter .filter-item { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 150px; }
.filter-label { font-size: 12px; color: var(--ink-soft); }
.admin-filter .input { padding: 8px 10px; font-size: 14px; }

/* ============================================================
   v1.9 手机 / iPad 满屏适配（游戏屏专用，大厅/登录/启动/结算不受影响）
   - 外壳 .game-wrap（仅 renderGame 挂载）：height 100dvh（100vh 回退）锁视口，
     flex column：顶栏/进度条固定高度 → 盘面区 flex:1 吃满剩余全部高度
   - 整页不出滚动条（overflow hidden）；盘面内容超出时内部滚动兜底
   - 安全区：刘海屏 env(safe-area-inset-top) 留给顶栏，
     env(safe-area-inset-bottom) 给盘面留白（iPhone home 条）
   - 触感：body 禁回弹/去点按高亮；按钮 touch-action 禁双击缩放；
     游戏屏禁长按选中文字（规则/引导弹窗正文单独放开可选中）
   ============================================================ */

/* —— 游戏屏外壳：锁满视口 + flex 纵向布局 + 安全区留白 —— */
.game-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;              /* 老浏览器回退（先声明，被下行覆盖） */
  height: 100dvh;             /* 动态视口：移动端地址栏收展不破版 */
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
  overflow: hidden;           /* 游戏页整页不滚动（弹窗是 fixed 不受影响） */
  -webkit-user-select: none;
  user-select: none;          /* 禁长按选中卡片/顶栏文字（下方弹窗正文放开） */
}
/* 规则弹窗 / 新手引导正文保持可选中复制 */
.game-wrap .rule-modal,
.game-wrap .guide-bubble { -webkit-user-select: text; user-select: text; }

/* 触感：所有按钮（卡片/选项/胶囊均是 button）+ 可点浮层禁双击缩放误触 */
button, .splash, .rule-mask, .guide-mask { touch-action: manipulation; }

/* —— 盘面区：吃满顶栏/进度条以外的全部剩余高度 —— */
.game-wrap .choice-wrap,
.game-wrap .board,
.game-wrap .board-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;           /* 兜底：盘面内容超出时内部滚动，整页仍不滚 */
}
/* 顶栏/进度条固定内容高度，不被盘面挤压 */
.game-wrap .game-topbar { flex-shrink: 0; margin-bottom: 12px; }
.game-wrap .progress { flex-shrink: 0; margin-bottom: 10px; }

/* 选择题：内容不足时垂直居中；超出时 auto margin 归零让位内部滚动（不裁顶） */
.game-wrap .choice-wrap > .choice-step { margin-top: auto; }
.game-wrap .choice-wrap > .options-grid { margin-bottom: auto; }

/* 配对双栏：面板拉满后卡片弹性生长（上限封顶），首尾卡 auto margin 居中且不裁顶 */
.game-wrap .col .card { flex: 1 1 auto; max-height: 128px; }
.game-wrap .col .card:first-child { margin-top: auto; }
.game-wrap .col .card:last-child { margin-bottom: auto; }

/* 宫格：行簇在拉满的深蓝面板内垂直居中（支持 safe 的浏览器在超高时回落顶对齐） */
.game-wrap .board-grid { align-content: center; align-content: safe center; }
.game-wrap .board-grid .card { max-height: 132px; }

/* —— iPad / 宽屏（≥600px，竖屏为主）：盘面限宽居中 + 字号随宽度 clamp 增长 —— */
@media (min-width: 600px) {
  .game-wrap { padding-left: 22px; padding-right: 22px; }
  .game-wrap .board { width: 100%; max-width: 560px; margin: 0 auto; }   /* 双栏盘面适度放大 */
  .game-wrap .board-grid { max-width: 760px; }                            /* 宫格 700 → 760 */
  .game-wrap .choice-wrap { width: 100%; max-width: 640px; margin: 0 auto; }
  .game-wrap .card { font-size: clamp(15px, 2.2vw, 18px); }
  .game-wrap .option-pill { font-size: clamp(16px, 2.2vw, 18px); min-height: 64px; }
  .game-wrap .question-text { font-size: clamp(20px, 2.8vw, 25px); }
  .game-wrap .col .card { min-height: clamp(64px, 10vh, 104px); }
}

/* —— 横屏兜底（手机横持，视口高 ≤520px）：顶栏压扁一行、盘面按高度收敛、无横向滚动 —— */
@media (orientation: landscape) and (max-height: 520px) {
  .game-wrap { padding: calc(6px + env(safe-area-inset-top)) 16px calc(6px + env(safe-area-inset-bottom)); }
  .game-topbar {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 4px 18px; padding: 6px 12px; border-radius: 16px; margin-bottom: 8px;
  }
  .game-topbar .gt-row { flex: 0 1 auto; gap: 8px; }
  .gt-mascot { width: 44px; height: 44px; font-size: 24px; border-width: 3px; animation: none; }
  .gt-level { font-size: 16px; }
  .game-title { font-size: 14px; }
  .stats { font-size: 12px; gap: 8px; }
  .pill-xp, .btn-rule { font-size: 12px; padding: 4px 10px; }
  .timer-icon { font-size: 17px; }
  .timer-text { font-size: 13px; min-width: 40px; }
  .timer-track { width: min(110px, 22vw); height: 10px; }
  .progress { height: 8px; margin-bottom: 8px; }
  /* 盘面按高度收敛（顶部留 ≥24px 给卡片耳朵，防内部滚动裁切） */
  .board { gap: 10px; padding: 26px 14px 14px; border-radius: 18px; }
  .col { gap: 6px; }
  .game-wrap .col .card { min-height: clamp(40px, 11vh, 58px); max-height: 60px; }
  .board-grid { gap: 10px; padding: 26px 14px 14px; border-radius: 18px; }
  .game-wrap .board-grid .card { max-height: 96px; }
  /* 选择题压缩 */
  .question-card { padding: 12px 14px; }
  .game-wrap .question-text { font-size: 16px; }
  .options-grid { gap: 8px; }
  .game-wrap .option-pill { min-height: 44px; padding: 8px 10px; font-size: 14px; }
  /* 引导气泡按矮视口收位 */
  .guide-mask { padding: 70px 20px 16px; }
  .guide-bubble { margin-top: 30px; }
}