/* =====================================================================
   字音字形闯关（教学版）· 样式表（v2 — 横向教学版）
   ----------------------------------------------------------------------
   调整记录：
     ① 主页改为 16:9 横屏一屏布局（不出现纵向滚动）
     ② 关卡页改为 三行布局（2 + 4 + 4），右侧 1/3 列空出放圆形猫咪
     ③ 整体去掉了"莫兰蒂××"等装饰文案；圆框卡做主角
     ④ 9 种主题色循环（与 9 只猫一一对应）
     ⑤ 大爪印（粉嫩）

   注：原小猫用真实图片（圆形自动遮住右下角豆包水印）。
==================================================================== */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html, body{
  font-family:"Microsoft YaHei","PingFang SC","Heiti SC","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  background:#FBF6EE;
  color:#3A3026;
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============ 9 种莫兰蒂主题（与 9 只猫一一对应） ============= */
:root{
  --bg:        #FBF6EE;
  --surface:   #FFFFFF;
  --ink:       #3A3026;
  --ink-soft:  #6D5F50;
  --line:      #E5DCCB;
  --shadow:    0 4px 14px rgba(110,80,60,0.10);
  --shadow-strong: 0 12px 32px rgba(110,80,60,0.18);
}

/* 主题色覆盖到 body 上（由 .stage 应用） */
.stage{
  --pri:        #E89AA8;
  --pri-dark:   #B86774;
  --pri-soft:   #F8D7DD;
  --ok:         #5C9F75;
  --bad:        #C75C5C;
  --ok-soft:    #E0F0E4;
  --bad-soft:   #F8E1E1;
  background: var(--bg);
  min-height:100vh;
  color: var(--ink);
  transition: background-color .4s ease;
}
.stage.theme-pink{     --pri:#D97085; --pri-dark:#9C4848; --pri-soft:#FBE4E9; --bg:#FFF3F5;}
.stage.theme-apricot{  --pri:#C57F45; --pri-dark:#8C4A1E; --pri-soft:#F4DDC6; --bg:#FCF1E5;}
.stage.theme-blue{     --pri:#6A8FB5; --pri-dark:#3E5E83; --pri-soft:#DDE7F2; --bg:#EEF4FA;}
.stage.theme-camel{    --pri:#9E7E55; --pri-dark:#5C4422; --pri-soft:#E7D5BD; --bg:#F8F1E5;}
.stage.theme-olive{    --pri:#7AA572; --pri-dark:#4E7651; --pri-soft:#DDEBD7; --bg:#EFF4EB;}
.stage.theme-cocoa{    --pri:#9C8769; --pri-dark:#5C4836; --pri-soft:#E5DACE; --bg:#F4EFE7;}
.stage.theme-mint{     --pri:#6B9C7A; --pri-dark:#365840; --pri-soft:#DCE8DD; --bg:#F1F7F2;}
.stage.theme-rose{     --pri:#B96A75; --pri-dark:#74404A; --pri-soft:#F2D7DB; --bg:#FCEEF0;}
.stage.theme-lilac{    --pri:#9579B0; --pri-dark:#52406E; --pri-soft:#E5D6EE; --bg:#F2EBF4;}

/* ============ 通用 ============ */
.btn{
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  transition:.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
}
.btn:active{ transform:translateY(2px); }
.btn-primary{
  background:var(--pri);
  color:#fff;
  box-shadow: 0 5px 0 var(--pri-dark), 0 8px 18px rgba(110,80,60,0.15);
}
.btn-primary:hover{ background:var(--pri-dark); }
.btn-primary:active{ box-shadow:0 1px 0 var(--pri-dark), 0 3px 8px rgba(110,80,60,0.10); transform:translateY(4px);}
.btn-ghost{
  background:rgba(255,255,255,0.65);
  border:2px solid var(--line);
  color:var(--ink);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ border-color:var(--pri); color:var(--pri-dark); }

/* Toast */
.toast{
  position:fixed; left:50%; top:30px; transform:translateX(-50%) translateY(-30px);
  background:rgba(60,40,30,.94); color:#fff;
  padding:12px 22px; border-radius:12px; font-size:16px;
  z-index:999; max-width:80%; opacity:0; transition:.3s;
  pointer-events:none; line-height:1.5;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.hide{display:none !important;}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:13px; background:var(--line); color:var(--ink-soft);}
.badge.ok{ background:var(--ok-soft); color:var(--ok);}
.badge.bad{ background:var(--bad-soft); color:var(--bad);}

/* ============================================================
   大爪印（主页大、关卡顶栏较小）
   ============================================================ */
.paw{
  display:inline-block;
  position:relative;
  flex-shrink:0;
}
.paw > i{ display:block; background:#fff; }
.paw > i.main{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.paw > i.dot{
  position:absolute;
  border-radius:50%;
}

/* ====== 大爪印 (主用) — 已废弃：主页不再放置，仅保留类供旧版引用 ====== */
.paw-big{
  width:120px; height:120px;
  display:none;
}
.paw-big > i.main{
  width:78px; height:64px;
  background:var(--pri-soft);
  border:4px solid var(--pri);
}
.paw-big > i.dot{
  background:var(--pri);
}
.paw-big > i.dot.tl{ left:14%; top:8%; width:30px; height:30px; }
.paw-big > i.dot.tc{ left:38%; top:0; width:30px; height:32px; }
.paw-big > i.dot.tc2{ left:62%; top:0; width:30px; height:32px; }
.paw-big > i.dot.tr{ left:78%; top:10%; width:30px; height:28px; }

/* ====== 中爪印 (关卡顶栏) ====== */
.paw-md{
  width:60px; height:60px;
}
.paw-md > i.main{
  width:40px; height:32px;
  background:var(--pri-soft);
  border:3px solid var(--pri);
}
.paw-md > i.dot{
  background:var(--pri);
}
.paw-md > i.dot.tl{ left:8%; top:6%; width:16px; height:16px; }
.paw-md > i.dot.tc{ left:34%; top:0; width:16px; height:18px; }
.paw-md > i.dot.tc2{ left:60%; top:0; width:16px; height:18px; }
.paw-md > i.dot.tr{ left:78%; top:8%; width:16px; height:15px; }

/* ============================================================
   主页：16:9 一屏居中布局
     上半  →  标题 + 开始闯关大按钮 + 4 个等大按钮 + 进度
     下半  →  9 只猫横向滚动（页面居中）+ 金句
   ============================================================ */
.home{
  min-height:100vh;
  padding:24px 28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
}
.home-main{
  width:100%;
  max-width:1040px;
}
.home-cats{
  width:100%;
  max-width:1700px;
}

/* ---- 上半：主面板 ---- */
.home-main{
  width:100%;
  max-width:1040px;
  background: var(--surface);
  border-radius:34px;
  padding:30px 46px 28px;
  box-shadow: var(--shadow-strong);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.home-main::before{
  content:"";
  position:absolute;
  inset:-62% -8% auto auto;
  width:420px; height:420px;
  background:radial-gradient(circle, var(--pri-soft) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.home-main > *{ position:relative; z-index:1; }

.home-title{
  font-size:clamp(38px, 3.4vw, 54px);
  font-weight:900;
  color:var(--pri-dark);
  letter-spacing:8px;
  line-height:1.2;
  text-shadow:0 2px 0 var(--pri-soft);
}
.home-sub{
  font-size:16px;
  color:var(--ink-soft);
  margin:8px 0 24px;
  letter-spacing:1px;
}

/* ---- 粉嫩可爱小爪印（单个，嵌在按钮上） ---- */
.paw-cute{
  position:relative;
  width:46px; height:46px;
  flex:0 0 auto;
  display:inline-block;
}
.paw-cute > i{
  position:absolute;
  display:block;
  background:#FFB9CC;
  border-radius:50% 50% 48% 48%;
}
.paw-cute > i.pad{
  left:50%; bottom:1px;
  transform:translateX(-50%);
  width:31px; height:25px;
}
.paw-cute > i.t1{ left:0;   top:9px;  width:11px; height:15px; transform:rotate(-24deg); }
.paw-cute > i.t2{ left:11px; top:1px;  width:12px; height:16px; }
.paw-cute > i.t3{ left:23px; top:1px;  width:12px; height:16px; }
.paw-cute > i.t4{ left:34px; top:9px;  width:11px; height:15px; transform:rotate(24deg); }

/* ---- 主页主按钮（开始闯关） ---- */
.btn-main-start{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  background: linear-gradient(180deg, var(--pri) 0%, var(--pri-dark) 100%);
  color:#fff;
  font-size:clamp(26px, 2.2vw, 34px);
  font-weight:900;
  letter-spacing:8px;
  padding:20px 62px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  box-shadow: 0 8px 0 rgba(120,80,70,.35), 0 14px 30px rgba(110,80,60,.25);
  transition:.15s;
}
.btn-main-start:hover{ transform:translateY(-2px); }
.btn-main-start:active{
  box-shadow: 0 2px 0 rgba(120,80,70,.35), 0 4px 10px rgba(110,80,60,.20);
  transform:translateY(6px);
}

/* ---- 4 个等大功能按钮 ---- */
.btn-grid-4{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:24px;
  width:100%;
}
.btn-grid-4 .btn{
  font-size:19px;
  padding:16px 8px;
  border-radius:20px;
  letter-spacing:2px;
}

/* 主页进度行 */
.home-stat{
  margin-top:20px;
  text-align:center;
  font-size:15px;
  color:var(--ink-soft);
  letter-spacing:.5px;
}

/* ---- 下半：9 只猫横向滚动条（页面下方居中） ---- */
.home-cats{
  width:100%;
  max-width:1700px;
  background: var(--surface);
  border-radius:34px;
  padding:12px 18px 14px;
  box-shadow: var(--shadow-strong);
}
.cat-strip-wrap{
  position:relative;
  width:100%;
}
.cat-strip-wrap::before,
.cat-strip-wrap::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:80px; z-index:2; pointer-events:none;
}
.cat-strip-wrap::before{ left:0;  background:linear-gradient(to right, var(--surface) 20%, rgba(255,255,255,0)); }
.cat-strip-wrap::after { right:0; background:linear-gradient(to left,  var(--surface) 20%, rgba(255,255,255,0)); }

.cat-strip{
  display:flex;
  align-items:flex-end;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  padding:20px calc(50% - 78px) 8px;
  scrollbar-width:none;
}
.cat-strip::-webkit-scrollbar{ display:none; }

.cat-cell{
  flex:0 0 auto;
  width:156px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  scroll-snap-align:center;
  position:relative;
  cursor:pointer;
  transition: transform .35s cubic-bezier(.34,1.4,.5,1);
}
.cat-cell img.cat-thumb{
  width:130px; height:130px;
  border-radius:50%;
  object-fit:cover;
  border:6px solid #fff;
  background:#fff;
  box-shadow: 0 6px 18px rgba(110,80,60,.18);
  transition: all .35s cubic-bezier(.34,1.4,.5,1);
}
.cat-cell .cat-name-tag{
  font-size:15px;
  font-weight:800;
  color:var(--pri-dark);
  letter-spacing:1px;
  opacity:.78;
}

/* 焦点猫：放大 + 高亮 */
.cat-cell.focus{ transform: translateY(-10px) scale(1.10); }
.cat-cell.focus img.cat-thumb{
  border-color:var(--pri);
  border-width:7px;
  box-shadow: 0 14px 30px rgba(110,80,60,.28), 0 0 0 8px var(--pri-soft);
}
.cat-cell.focus .cat-name-tag{ opacity:1; }

/* 焦点猫的装饰（emoji 飘出） */
.cat-cell .cat-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s;
}
.cat-cell.focussing .cat-decor{ opacity:1; }
.cat-cell .decor-em{
  position:absolute;
  font-size:24px;
  line-height:1;
  animation: decor-float 1.6s ease-out forwards;
}
.cat-cell .decor-em-0{ left:6%;  top:-2%;  animation-delay: 0s; }
.cat-cell .decor-em-1{ right:2%; top:4%;   animation-delay: .15s; }
.cat-cell .decor-em-2{ left:2%;  top:34%;  animation-delay: .30s; }
.cat-cell .decor-em-3{ right:-2%; top:28%; animation-delay: .45s; }
@keyframes decor-float{
  0%   { transform: translate(0,0) scale(.6) rotate(-15deg); opacity:0; }
  20%  { transform: translate(0,-8px) scale(1.2) rotate(0);  opacity:1; }
  100% { transform: translate(0,-34px) scale(.9) rotate(10deg); opacity:0; }
}

/* 金句 */
.home-quote{
  text-align:center;
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:1px;
  line-height:1.5;
  margin-top:2px;
  min-height:30px;
}

/* ============================================================
   关卡页：16:9 横条卡片布局（教学版 v3 · 字号放大版）
       左 → 2 列 × 5 行 = 10 张横条卡片（宽而扁，字大）
       右 → 整列圆形猫咪（独立一列，永不遮挡卡片）
   ============================================================ */
.level-page{
  max-width:1760px;
  margin:0 auto;
  padding:10px 22px 4px;
}

.level-topbar{
  display:flex; align-items:center; gap:18px;
  background:var(--surface);
  border-radius:20px;
  padding:8px 22px;
  box-shadow:var(--shadow);
  margin-bottom:9px;
}
.level-topbar .paw-md{ flex-shrink:0; }
.level-topbar .lvl-title{
  font-size:38px;
  font-weight:900;
  color:var(--pri-dark);
  letter-spacing:2px;
}
.level-topbar .lvl-progress{
  flex:1;
  display:flex; align-items:center; gap:12px;
}
.level-topbar .lvl-bar{
  flex:1; height:14px; border-radius:7px;
  background:#F0E9DA; overflow:hidden;
}
.level-topbar .lvl-bar i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--pri), var(--pri-dark));
  border-radius:7px;
  transition: width .35s ease;
}
.level-topbar .lvl-pct{
  font-size:20px; color:var(--ink-soft);
  min-width:120px; text-align:right; font-weight:700;
}
.level-topbar .lvl-back{
  border:none;
  background:var(--pri-soft);
  color:var(--pri-dark);
  border-radius:14px;
  padding:12px 26px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}
.level-topbar .lvl-back:hover{ background:var(--pri); color:#fff; }

/* 主体：左题目右猫咪 */
.level-grid-wrap{
  display:grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:14px;
  align-items:stretch;
}
.level-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  align-content:start;
}

/* 右侧猫咪整列 */
.cat-corner{
  background: var(--surface);
  border-radius:26px;
  padding:14px 12px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  overflow:hidden;
}
.cat-corner .cat-figure{ margin:0 auto; }
.cat-quote{
  font-size:24px;
  font-weight:700;
  color:var(--ink-soft);
  text-align:center;
  line-height:1.5;
  padding:0 6px;
  letter-spacing:.5px;
}

/* ====== 圆形猫咪容器（图片） ====== */
.cat-figure{
  position:relative;
  width:230px;
  height:230px;
  border-radius:50%;
  overflow:hidden;
  border:6px solid #fff;
  background:#fff;
  box-shadow: 0 8px 24px rgba(110,80,60,.22);
}
.cat-figure.size-md{ width:200px; height:200px; border-width:5px; }
.cat-figure.size-sm{ width:140px; height:140px; border-width:4px; }

.cat-figure img.cat-circle-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 装饰层（答对/答错时 emoji 飘出） */
.cat-figure .cat-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity .2s;
}
.cat-figure[data-state="happy"] .cat-decor,
.cat-figure[data-state="sad"] .cat-decor{
  opacity:1;
}
.cat-figure .decor-em{
  position:absolute;
  font-size:32px;
  line-height:1;
  animation: decor-burst 1.6s ease-out forwards;
}
.cat-figure .decor-em-0{ left:6%;  top:0;    animation-delay: 0s; }
.cat-figure .decor-em-1{ right:2%; top:6%;   animation-delay: .15s; }
.cat-figure .decor-em-2{ left:2%;  top:38%;  animation-delay: .30s; }
.cat-figure .decor-em-3{ right:-2%;top:32%;  animation-delay: .45s; }
@keyframes decor-burst{
  0%   { transform: translate(0,0) scale(.5) rotate(-15deg); opacity:0; }
  18%  { transform: translate(0,-10px) scale(1.3) rotate(0); opacity:1; }
  100% { transform: translate(0,-46px) scale(.85) rotate(18deg); opacity:0; }
}

/* ====== 横条题目卡片（字号放大版：≈ 一号字） ====== */
.qcard{
  background:var(--surface);
  border:3px solid transparent;
  border-radius:18px;
  padding:8px 20px 9px;
  box-shadow: var(--shadow);
  transition:.12s;
  min-width:0;
  overflow:hidden;
}
.qcard.answered{ border-color:var(--ok); background:var(--ok-soft); }
.qcard.answered.wrong{ border-color:var(--bad); background:var(--bad-soft); }

/* 第一行：题号 + 题干（同一行，卡片变扁） */
.qcard .qc-line{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
}
.qcard .qmeta{
  flex:0 0 auto;
  padding:3px 14px;
  border-radius:999px;
  background:var(--pri-soft);
  color:var(--pri-dark);
  font-size:17px;
  font-weight:800;
  white-space:nowrap;
  line-height:1.2;
}
.qcard .qbody{
  flex:1 1 auto;
  min-width:0;
  font-size:44px;
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
}
.qcard .qbody b{
  color:var(--pri-dark);
  font-size:53px;
  line-height:1;
  padding:0 1px;
}

/* 第二行：4 个选项排成一行 */
.qcard .opts{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:9px;
  margin-top:6px;
}
.qcard .opt{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background:#FFFCF6;
  border:2px solid var(--line);
  cursor:pointer;
  font-size:36px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  transition:.12s;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
}
.qcard .opt .lab{
  flex:0 0 auto;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qcard .opt .key{
  flex:0 0 auto;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--pri-soft);
  color:var(--pri-dark);
  border-radius:8px;
  font-size:18px;
  font-weight:800;
}
.qcard .opt:hover{ border-color:var(--pri); }
.qcard .opt.sel{ border-color:var(--pri); background:var(--pri-soft); }
.qcard .opt.right{ border-color:var(--ok); background:var(--ok-soft); }
.qcard .opt.right .key{ background:var(--ok); color:#fff; }
.qcard .opt.wrong{ border-color:var(--bad); background:var(--bad-soft); }
.qcard .opt.wrong .key{ background:var(--bad); color:#fff; }

/* 答后的反馈行（替换 4 个选项，高度 ≤ 原 opts 行，避免页面整体变高） */
.qcard .tip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:7px;
  padding:5px 14px 6px;
  border-radius:12px;
  font-size:22px;
  font-weight:800;
  line-height:1.35;
  min-height:34px;
}
.qcard .tip b{ font-weight:900; }
.qcard .tip.ok{
  background:var(--ok-soft);
  border-left:5px solid var(--ok);
  color:#2F5238;
}
.qcard .tip.bad{
  background:var(--bad-soft);
  border-left:5px solid var(--bad);
  color:#6F3838;
}
.qcard .ans-row{
  display:none;
  margin-top:6px;
  padding:6px 14px 7px;
  border-radius:12px;
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.qcard .ans-row .ans-cho,
.qcard .ans-row .ans-cor{
  font-weight:900;
  white-space:nowrap;
}
.qcard .ans-row .ans-cho b,
.qcard .ans-row .ans-cor b{
  font-size:28px;
  margin:0 2px;
}
.qcard .ans-row .ans-note{
  font-size:19px;
  line-height:1.35;
  font-weight:600;
  opacity:.92;
  flex:1 1 100%;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:2px;
}
.qcard .ans-row.ok{
  background:var(--ok-soft);
  border-left:5px solid var(--ok);
  color:#2F5238;
}
.qcard .ans-row.bad{
  background:var(--bad-soft);
  border-left:5px solid var(--bad);
  color:#6F3838;
}

.qcard.answered .opts{ display:none; }
.qcard.answered .ans-row{ display:flex; }

/* 底部操作栏 */
.level-bottombar{
  margin-top:10px;
  padding:6px 0 12px;
  display:flex; gap:16px; justify-content:center;
  background:linear-gradient(to top, var(--bg) 70%, rgba(255,255,255,0));
}
.btn-submit,
.btn-home,
.btn-big{
  font-size:26px !important;
  padding:14px 38px !important;
  border-radius:18px !important;
  letter-spacing:2px;
  font-weight:900;
}


/* 关卡地图 */
.levelmap{
  display:grid;
  grid-template-columns:repeat(13, 1fr);
  gap:8px;
  padding:8px;
}
.lm-tile{
  aspect-ratio:1;
  border-radius:14px;
  background:#fff;
  border:2px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer;
  font-weight:800; font-size:18px;
}
.lm-tile.done{ background:var(--ok-soft); border-color:var(--ok); color:var(--ok);}
.lm-tile.cur{ border-color:var(--pri); background:var(--pri-soft); color:var(--pri-dark);}
.lm-tile.lock{ opacity:.4; cursor:not-allowed;}

/* 错题本 */
.wrongcard{
  background:var(--surface);
  border-radius:18px;
  padding:18px 22px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.wrongcard .wq{
  font-size:24px; font-weight:800; margin-bottom:10px;
}
.wrongcard .wq b{ color:var(--pri-dark); font-size:28px;}
.wrongcard .opts-row{ display:flex; gap:10px; flex-wrap:wrap;}
.wrongcard .opt-btn{
  border:2px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:8px 18px;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
}
.wrongcard .opt-btn.sel{ background:var(--pri-soft); border-color:var(--pri);}
.wrongcard .note{ margin-top:8px; font-size:14px; color:var(--ink-soft);}

/* 报告 */
.report-card{
  background:var(--surface);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.report-stat{
  display:flex; gap:14px; margin-bottom:16px;
}
.report-stat .cell{
  flex:1; text-align:center; padding:14px;
  background:#FFFCF6; border-radius:14px; border:2px solid var(--line);
}
.report-stat .cell b{ display:block; font-size:30px; color:var(--pri-dark);}
.report-stat .cell span{ font-size:14px; color:var(--ink-soft);}

/* 结果页 */
.result-card{
  background:var(--surface);
  border-radius:32px;
  padding:40px 32px;
  box-shadow:var(--shadow-strong);
  text-align:center;
  max-width:680px;
  margin:30px auto 0;
  position:relative; overflow:hidden;
}
.result-card::before{
  content:""; position:absolute;
  inset:-40% -30% auto auto;
  width:480px; height:480px;
  background:radial-gradient(circle, var(--pri-soft) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.result-cat{
  width:280px; height:280px;
  margin:0 auto 8px;
  position:relative; z-index:1;
}
.result-cat .cat-figure{ margin:0 auto; }
.result-score{
  font-size:96px;
  font-weight:900;
  color:var(--pri-dark);
  font-family:"Microsoft YaHei",sans-serif;
  letter-spacing:4px;
  line-height:1;
  margin:6px 0 4px;
  position:relative; z-index:1;
}
.result-tag{
  font-size:28px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:20px;
  position:relative; z-index:1;
}
.result-actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:18px; position:relative; z-index:1;
}
.result-actions .btn{
  font-size:20px; padding:16px 30px; border-radius:18px; letter-spacing:1px;
}

/* 报告页布局居中 */
.report-page{
  max-width:980px;
  margin:0 auto;
  padding:24px;
}

/* 自适应：按屏幕高度收缩，保证 16:9 一屏内放得下 10 张横条卡片 */
@media (max-height: 1000px){
  .qcard{ padding:5px 14px 6px; }
  .qcard .qbody{ font-size:38px; }
  .qcard .qbody b{ font-size:46px; }
  .qcard .opt{ font-size:31px; padding:5px 8px; }
  .qcard .opt .key{ width:27px; height:27px; font-size:15px; }
  .qcard .qmeta{ font-size:15px; padding:2px 11px; }
  .qcard .tip{ font-size:18px; padding:4px 12px; min-height:30px; }
  .qcard .ans-row{ font-size:21px; }
  .qcard .ans-row .ans-cho b,
  .qcard .ans-row .ans-cor b{ font-size:25px; }
  .qcard .ans-row .ans-note{ font-size:17px; }
  .level-topbar .lvl-title{ font-size:33px; }
  .level-topbar .lvl-pct{ font-size:18px; }
  .level-topbar .lvl-back{ font-size:20px; padding:10px 22px; }
  .cat-quote{ font-size:21px; }
  .btn-submit,.btn-home,.btn-big{ font-size:24px !important; padding:13px 34px !important; }
  .cat-figure{ width:210px; height:210px; }
  .level-page{ padding:8px 18px 2px; }
  .level-topbar{ margin-bottom:7px; padding:6px 18px; }
  .level-grid{ gap:8px; }
}
@media (max-height: 860px){
  .qcard{ padding:4px 12px 5px; }
  .qcard .qbody{ font-size:32px; }
  .qcard .qbody b{ font-size:38px; }
  .qcard .opt{ font-size:26px; padding:4px 7px; }
  .qcard .opt .key{ width:23px; height:23px; font-size:13px; }
  .qcard .opts{ gap:6px; margin-top:5px; }
  .qcard .qmeta{ font-size:13px; padding:2px 9px; }
  .qcard .tip{ font-size:16px; padding:3px 10px; min-height:26px; margin-top:5px; }
  .qcard .ans-row{ font-size:17px; padding:5px 12px; }
  .qcard .ans-row .ans-cho b,
  .qcard .ans-row .ans-cor b{ font-size:20px; }
  .qcard .ans-row .ans-note{ font-size:14px; }
  .level-topbar .lvl-title{ font-size:30px; }
  .level-topbar .lvl-pct{ font-size:16px; min-width:110px; }
  .level-topbar .lvl-back{ font-size:18px; padding:9px 20px; }
  .cat-quote{ font-size:19px; }
  .btn-submit,.btn-home,.btn-big{ font-size:22px !important; padding:12px 30px !important; }
  .cat-figure{ width:200px; height:200px; }
  .level-grid{ gap:7px; }
  .home{ gap:12px; padding:14px 18px; }
  .home-main{ padding:20px 36px 18px; }
  .btn-grid-4{ margin-top:14px; }
}

@media (max-width: 1280px){
  .level-grid-wrap{ grid-template-columns: minmax(0,1fr) 270px; }
  .qcard .qbody{ font-size:30px; }
  .qcard .qbody b{ font-size:36px; }
  .qcard .opt{ font-size:24px; }
  .qcard .opt .key{ width:22px; height:22px; font-size:13px; }
  .qcard .qmeta{ font-size:14px; }
}
@media (max-width: 980px){
  .level-grid-wrap{ grid-template-columns: 1fr; }
  .level-grid{ grid-template-columns: 1fr; }
  .cat-corner{ flex-direction:row; gap:18px; padding:12px; }
  .cat-corner .cat-figure{ width:160px; height:160px; }
}