/* ============================================================
 * theme-game.css — 小学学段 视觉主题（闯关风）
 * 作用域：body.theme-game
 * 风格：彩色高对比 + 立体按钮阴影 + 徽章/积分 + 大圆角
 * 只覆盖视觉层，不写任何逻辑
 * ============================================================ */

body.theme-game {
  --bg: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  --panel: linear-gradient(180deg, #2c3e50 0%, #1a1a2e 100%);
  --panel-border: #FFD700;
  --panel-border-width: 3px;
  --primary: #FFD700;
  --primary-rgb: 255,215,0;
  --primary-light: rgba(255,215,0,.14);   /* 深色主题下浅蓝#dbeafe不适用，用半透明金 */
  --accent: #2ecc71;
  --danger: #e74c3c;
  --text: #fff;
  --text-sub: #b8c4d9;
  --border: rgba(255,215,0,.35);
  --card-bg: #232b52;   /* 表单控件背景（深色） */
  --success-bg: rgba(46,204,113,.16);   /* 通过的半透明绿底（闯关风同风格） */
  --success-text: #7ee2a8;
  --warn-bg: rgba(255,215,0,.12);       /* 复习提示的半透明金底 */
  --bg-sub: rgba(255,255,255,.07);      /* 禁用控件底（深色半透明） */
  --title-font: "PingFang SC","Microsoft YaHei",sans-serif;
}

body.theme-game {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,215,0,.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(46,204,113,.10), transparent 40%),
    var(--bg);
  color: var(--text);
}

/* 顶栏 */
body.theme-game header#topbar {
  background: linear-gradient(90deg, #2c3e50 0%, #16213e 100%);
  border-bottom: 3px solid var(--primary);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
body.theme-game #topbar-title {
  color: var(--primary);
  text-shadow: 0 0 8px rgba(var(--primary-rgb),.5);
  font-weight: 900;
  letter-spacing: 1px;
}
body.theme-game .topbar-btn {
  color: var(--text);
  border: 1.5px dashed rgba(var(--primary-rgb),.5);
  background: transparent;
  font-weight: 700;
}
body.theme-game .topbar-btn.active {
  background: rgba(var(--primary-rgb),.20);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(var(--primary-rgb),.4) inset;
}

/* 顶栏当前用户徽标（闯关风）——已统一为 .topbar-btn 样式 */

/* 知识点浮层选择器（闯关风） */
body.theme-game .kp-trigger {
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(var(--primary-rgb),.4);
  color: var(--text);
  font-weight: 900;
  letter-spacing: .5px;
}
body.theme-game .kp-trigger:hover,
body.theme-game .kp-trigger.open { border-color: var(--primary); box-shadow: 0 0 12px rgba(var(--primary-rgb),.4); }
body.theme-game .kp-trigger .kp-txt { color: var(--text-sub); }
body.theme-game .kp-trigger .kp-txt.picked { color: var(--primary); }
body.theme-game .kp-trigger .kp-arr { color: var(--primary); }
body.theme-game .kp-pop {
  background: #1a1a2e;
  border: 2px solid rgba(var(--primary-rgb),.35);
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 20px rgba(var(--primary-rgb),.2);
}
body.theme-game .kp-pop-head { border-bottom: 1px solid rgba(var(--primary-rgb),.3); }
body.theme-game .kp-crumb { border-bottom: 1px dashed rgba(var(--primary-rgb),.25); }
body.theme-game .kp-crumb-item { color: var(--primary); }
body.theme-game .kp-opt { border-bottom: 1px dashed rgba(var(--primary-rgb),.25); color: var(--text); }
body.theme-game .kp-opt:hover { background: rgba(var(--primary-rgb),.16); }
body.theme-game .kp-opt .kp-imp { color: var(--text-sub); }

/* 主卡片 */
body.theme-game .card {
  background: var(--panel);
  border: var(--panel-border-width) solid var(--panel-border);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), inset 0 0 30px rgba(var(--primary-rgb),.05);
}

body.theme-game .page-title {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(var(--primary-rgb),.4);
  font-weight: 900;
}
body.theme-game .page-sub { color: var(--text-sub); letter-spacing: 2px; }

/* 大按钮（闯关风：立体阴影，按下感） */
body.theme-game .big-btn {
  background: linear-gradient(135deg, #c0392b 0%, #8e44ad 100%);
  border: 3px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 6px 0 #6c3483, 0 12px 24px rgba(0,0,0,.5);
  color: #fff;
  font-weight: 900;
  transition: all .15s;
}
body.theme-game .big-btn:nth-child(2) {
  background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%);
  box-shadow: 0 6px 0 #1a5276, 0 12px 24px rgba(0,0,0,.5);
}
body.theme-game .big-btn:nth-child(3) {
  background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
  box-shadow: 0 6px 0 #922b21, 0 12px 24px rgba(0,0,0,.5);
}
body.theme-game .big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #000;
}
body.theme-game .big-btn.selected,
body.theme-game .big-btn.active {
  border-color: var(--accent);
  box-shadow: 0 6px 0 #1e8449, 0 0 22px rgba(46,204,113,.6);
}
body.theme-game .big-btn .btn-title { font-size: 17px; font-weight: 900; }
body.theme-game .big-btn .btn-desc {
  font-size: 11px; font-weight: 600;
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: 1px;
}
body.theme-game #home-specials .big-btn {
  font-weight: 900;
  color: #fff;
  border: 3px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 6px 0 #6c3483, 0 12px 24px rgba(0,0,0,.5);
}
body.theme-game #home-specials .big-btn:nth-child(1) {
  background: linear-gradient(135deg, #c0392b 0%, #8e44ad 100%);
}
body.theme-game #home-specials .big-btn:nth-child(2) {
  background: linear-gradient(135deg, #27ae60 0%, #2980b9 100%);
  box-shadow: 0 6px 0 #1a5276, 0 12px 24px rgba(0,0,0,.5);
}
body.theme-game #home-specials .big-btn:nth-child(3) {
  background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
  box-shadow: 0 6px 0 #922b21, 0 12px 24px rgba(0,0,0,.5);
}
body.theme-game #home-specials .big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #000;
}
/* 选中态：保持原渐变底，金色描边+翠绿发光+微提亮（不用白底） */
body.theme-game #home-specials .big-btn.selected,
body.theme-game #home-specials .big-btn.selected:nth-child(n) {
  border-color: var(--accent);
  box-shadow: 0 6px 0 #1e8449, 0 0 22px rgba(46,204,113,.6);
  color: #fff;
  filter: brightness(1.2) saturate(1.1);
}
/* 闯关风：图标深色圆角底块 + 金色星星 */
body.theme-game #home-specials .big-btn .icon {
  background: rgba(0,0,0,.35);
}
/* 滚动条滑块金色 */
body.theme-game .kp-list::-webkit-scrollbar-thumb { background: var(--primary); }
body.theme-game #home-specials .big-btn .stars {
  color: var(--primary);
  text-shadow: 0 0 6px rgba(255,215,0,.8);
}

/* 知识点树（闯关风：金色边框，选中高亮） */
body.theme-game .tree-row {
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(var(--primary-rgb),.3);
  border-radius: 10px;
  color: var(--text);
  font-weight: 700;
}
body.theme-game .tree-row:hover {
  background: rgba(var(--primary-rgb),.18);
  border-color: var(--primary);
}
body.theme-game .tree-row .arrow { color: var(--primary); }
body.theme-game .tree-node.selected .tree-row {
  background: rgba(var(--primary-rgb),.30);
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(var(--primary-rgb),.45);
}
body.theme-game .stage-chip {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  font-weight: 900;
  letter-spacing: 1px;
}
body.theme-game .stage-chip.active,
body.theme-game .stage-chip.on {
  background: var(--primary);
  color: #1a1a2e;
}

/* 7阶段 XP 条 */
body.theme-game .stage-flow,
body.theme-game .progress-bar-wrap {
  background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  border: 2px solid var(--primary);
  border-radius: 8px;
}
body.theme-game .stage-bar-wrap {
  background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  border: 2px solid var(--primary);
  border-radius: 8px;
}
body.theme-game .stage-bar {
  height: 12px;
  background: #0d1117;
  border: 1px solid #333;
  border-radius: 6px;
}
body.theme-game .stage-flow .stage-bar-fill {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 12px var(--primary);
}
body.theme-game .stage-chip.done {
  background: var(--primary);
  color: #1a1a2e;
}
body.theme-game .stage-chip.active {
  background: var(--accent);
  color: #1a1a2e;
  box-shadow: 0 0 14px rgba(46,204,113,.6);
}
body.theme-game .stage-chip.locked {
  background: rgba(255,255,255,.05);
  color: #666;
  border-color: #444;
}

/* 建议条（闯关风：金色边框+深色半透底+金色文字） */
body.theme-game .suggestion {
  background: rgba(0,0,0,.35);
  border: 1.5px solid var(--primary);
  color: var(--primary);
}

/* 状态条（闯关风） */
body.theme-game #statusbar {
  background: rgba(44,62,80,.5);
  border-top: 2px solid var(--primary);
  color: var(--text-sub);
}

/* 徽章 */
body.theme-game .badge-row .badge {
  background: linear-gradient(135deg, var(--primary), #f39c12);
  color: #1a1a2e;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb),.4);
  font-weight: 900;
}
body.theme-game .badge {
  background: linear-gradient(135deg, var(--primary), #f39c12);
  color: #1a1a2e;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb),.4);
  font-weight: 900;
}
body.theme-game .badge.locked {
  background: #333;
  color: #666;
  box-shadow: none;
}

/* 按钮 */
body.theme-game .primary-btn {
  background: var(--primary);
  color: #1a1a2e;
  font-weight: 900;
  border: none;
  box-shadow: 0 4px 0 #c0392b, 0 8px 18px rgba(0,0,0,.4);
  border-radius: 10px;
}
body.theme-game .primary-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #c0392b;
}
body.theme-game .secondary-btn {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  font-weight: 700;
}

/* 表单 */
body.theme-game input, body.theme-game select, body.theme-game textarea {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 8px;
}
body.theme-game .hint { color: var(--text-sub); }

/* 手写画布容器 */
body.theme-game .hw-area {
  background: #fff;
  border: 3px solid var(--primary);
  border-radius: 12px;
}

/* 状态提示 */
body.theme-game .status-ok { color: var(--accent); }
body.theme-game .status-warn { color: var(--primary); }
body.theme-game .status-error { color: var(--danger); }