/* game-base.css — 知识点小游戏统一视觉（黑板+粉笔极简风，沿用 talkin 小知老师）
 * 布局：固定全屏 / 禁滚动 / 上下两层（上层操作区 + 下层说明区）
 */
:root{
  --board:#1f2933;
  --board2:#273340;
  --chalk:#f5f7fa;
  --chalk-dim:#aeb8c2;
  --accent:#ffd54a;   /* 品牌黄 */
  --ok:#4caf50;
  --bad:#ef5350;
  --line:#3a4753;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;
  height:100%;
  width:100%;
  overflow:hidden;            /* 禁止整页滚动，固定游戏界面 */
  background:var(--board);
  color:var(--chalk);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}
/* ===== 固定游戏外壳：纵向两层 ===== */
.game-shell{
  display:flex;
  flex-direction:column;
  height:100dvh;             /* 动态视口高度，避开手机地址栏 */
  height:100vh;              /* 兜底 */
  width:100%;
  max-width:520px;          /* 手机宽度上限，居中 */
  margin:0 auto;
  background:var(--board);
  /* 刘海/灵动岛安全区：顶部留白，避免被系统状态栏遮挡 */
  padding-top:env(safe-area-inset-top);
}
/* 顶部安全腰带：占住手机状态栏(时间/信号/电量) + 浏览器工具栏的高度，
   保证游戏操作区不被真实状态栏遮挡。仅手机端显示，桌面预览隐藏。 */
.notch-guard{
  display:none;
  flex:0 0 auto;
  height:26px;              /* 状态栏最小占位 */
  background:var(--board);
  width:100%;
}
@media (max-width:560px){
  .notch-guard{display:block;}
}
/* 上层：操作区（正方形/竖长方形，canvas 充满） */
.stage-area{
  flex:0 0 auto;
  position:relative;
  width:100%;
  aspect-ratio:3 / 4;        /* 竖长方形操作区 */
  max-height:62dvh;          /* 不超过视口 62%，给下层留空间 */
  background:#15202b;
  border-bottom:2px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  touch-action:none;
}
.stage-area canvas{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* 下层：说明区（玩法/配图/返回/确认） */
.info-area{
  flex:1 1 auto;
  min-height:0;              /* 允许内部滚动而不撑开 */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:10px;
}
.info-area::-webkit-scrollbar{width:0;}
/* 知识点标题条 */
.kp-bar{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--chalk-dim);
  flex:0 0 auto;
}
.kp-bar b{color:var(--accent);font-size:15px;}
.kp-bar .tag{
  font-size:11px;color:var(--board);background:var(--accent);
  border-radius:4px;padding:2px 7px;font-weight:700;
}
/* 目标/玩法说明 */
.goal{
  background:var(--board2);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:10px 12px;font-size:15px;flex:0 0 auto;
}
.howto{
  font-size:14px;color:var(--chalk-dim);line-height:1.6;flex:0 0 auto;
}
.howto b{color:var(--chalk);}
.howto .step{margin:2px 0;}
/* 配图（说明区内的小示意图） */
.illus{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto;}
.illus img,.illus canvas{width:72px;height:72px;border-radius:8px;border:1px solid var(--line);background:#15202b;}
/* 状态提示 */
.status{font-size:15px;text-align:center;min-height:22px;flex:0 0 auto;}
.status.ok{color:var(--ok);}
.status.bad{color:var(--bad);}
/* 按钮行：固定在说明区底部 */
.btn-row{
  display:flex;gap:10px;margin-top:auto;flex:0 0 auto;
  padding-top:6px;
}
button.btn{
  font-size:16px;padding:13px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--board2);color:var(--chalk);cursor:pointer;flex:1;font-weight:600;
}
button.btn.primary{background:var(--accent);color:var(--board);border:none;}
button.btn.ghost{background:transparent;}
button.btn:active{transform:scale(.97);}
button.btn:disabled{opacity:.45;}
/* 返回链接 */
.back-link{
  font-size:13px;color:var(--chalk-dim);text-decoration:none;
  display:inline-block;flex:0 0 auto;margin-top:2px;
}
.back-link:active{color:var(--accent);}