/* ============================================================
   课堂游戏盒 · 基础样式（深紫夜色为默认主题，data-theme 切换换肤）
   投屏友好：正文字号 ≥16px，游戏主体大字大按钮，16:9 构图优先
   ============================================================ */
:root, [data-theme="night"] {
  --bg1: #1a1333; --bg2: #0f0a1f;
  --panel: rgba(255,255,255,.07); --panel-line: rgba(255,255,255,.14);
  --text: #f3f0ff; --muted: #b9a8e0;
  --accent: #a78bfa; --accent2: #ffd54a;
  --good: #3ddc84; --bad: #ff6b81; --info: #6ec3ff;
  --hole: #2b1f4d;
}
[data-theme="forest"] {
  --bg1: #eaf7e6; --bg2: #c8e8bd;
  --panel: rgba(255,255,255,.75); --panel-line: rgba(30,80,40,.18);
  --text: #173321; --muted: #4a7a58;
  --accent: #2e9e5b; --accent2: #ff9a3d;
  --good: #1fa556; --bad: #e5484d; --info: #2a7fc9;
  --hole: #d7ecd0;
}
[data-theme="ocean"] {
  --bg1: #0d2440; --bg2: #071427;
  --panel: rgba(255,255,255,.08); --panel-line: rgba(255,255,255,.16);
  --text: #eaf6ff; --muted: #8fb7d8;
  --accent: #4cc9f0; --accent2: #ffd54a;
  --good: #3ddc84; --bad: #ff6b81; --info: #9ae6ff;
  --hole: #123253;
}
[data-theme="candy"] {
  --bg1: #fff0f5; --bg2: #ffdbe7;
  --panel: rgba(255,255,255,.85); --panel-line: rgba(200,60,110,.2);
  --text: #5c1a3a; --muted: #a85780;
  --accent: #e75480; --accent2: #ffb300;
  --good: #22a06b; --bad: #e5484d; --info: #7c5cff;
  --hole: #ffd3e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 700px at 70% -10%, var(--bg1), var(--bg2));
  min-height: 100vh;
  font-size: 16px;
}
button { font-family: inherit; cursor: pointer; border: none; }
input, textarea, select { font-family: inherit; }

/* ---------- 通用面板/按钮 ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff;
  font-size: 18px; font-weight: 700;
  padding: 12px 26px; border-radius: 14px;
  transition: transform .12s, filter .12s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.gold { background: var(--accent2); color: #4a3200; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--panel-line); }
.btn.big { font-size: 22px; padding: 16px 40px; border-radius: 18px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- toast ---------- */
.gb-toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.gb-toast {
  background: rgba(20,14,40,.92); color: #fff; border: 1px solid var(--panel-line);
  padding: 10px 22px; border-radius: 12px; font-size: 16px; max-width: 86vw;
  animation: toastIn .2s ease;
}
.gb-toast.good { border-color: var(--good); } .gb-toast.bad { border-color: var(--bad); }
.gb-toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- 遮罩弹窗（激活/付费墙/结束面板/设置） ---------- */
.gb-modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8,5,18,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gb-modal {
  background: var(--bg1); border: 1px solid var(--panel-line);
  border-radius: 24px; padding: 30px 34px;
  max-width: 720px; width: 100%; max-height: 92vh; overflow: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  animation: popIn .18s ease;
}
@keyframes popIn { from { transform: scale(.92); opacity: 0; } }
.gb-modal h2 { font-size: 26px; margin-bottom: 14px; }
.gb-modal h2 .em { color: var(--accent2); }

/* ---------- 顶部 HUD（游戏页通用） ---------- */
.hud {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; margin: 14px 18px 0;
  flex-wrap: wrap;
}
.hud .stat { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; }
.hud .stat .lab { color: var(--muted); font-size: 15px; font-weight: 600; }
.hud .hearts { letter-spacing: 3px; font-size: 21px; }
.hud .hearts .off { opacity: .22; filter: grayscale(1); }
.hud .gear {
  width: 44px; height: 44px; border-radius: 12px; font-size: 22px;
  background: var(--panel); border: 1px solid var(--panel-line); color: var(--text);
}
.hud .home {
  width: 44px; height: 44px; border-radius: 12px; font-size: 20px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--panel-line); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.mode-badge {
  font-size: 14px; padding: 4px 12px; border-radius: 999px; font-weight: 700;
  background: rgba(255,213,74,.15); color: var(--accent2); border: 1px solid var(--accent2);
}
.mode-badge.off { background: rgba(110,195,255,.12); color: var(--info); border-color: var(--info); }
.mode-badge.ok { background: rgba(61,220,132,.14); color: var(--good); border-color: var(--good); }

/* ---------- 目标卡（找词目标） ---------- */
.target-card {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 14px auto 6px; width: fit-content;
  background: var(--panel); border: 1px solid var(--panel-line);
  padding: 10px 30px; border-radius: 999px;
}
.target-card .ask { font-size: 17px; color: var(--muted); font-weight: 600; letter-spacing: 4px; }
.target-card .word {
  font-size: 40px; font-weight: 900; color: var(--accent2);
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}

/* ---------- 进度条 ---------- */
.progress-wrap { height: 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-line); overflow: hidden; margin: 8px 24px 0; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s; }

/* ---------- 结束面板 ---------- */
.end-panel { text-align: center; }
.end-panel .stars { font-size: 52px; letter-spacing: 8px; margin: 6px 0 10px; }
.end-panel .score-line { font-size: 20px; margin: 4px 0; }
.end-panel .score-line b { color: var(--accent2); font-size: 30px; }
.end-panel .btn-row { display: flex; gap: 14px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.wrong-list { margin-top: 16px; text-align: left; font-size: 16px; }
.wrong-list .wi { display: flex; justify-content: space-between; gap: 16px; padding: 7px 14px; border-radius: 10px; background: var(--panel); margin-top: 6px; }
.wrong-list .wi b { color: var(--bad); }

/* ---------- 付费墙 / 激活 ---------- */
.plan-row { display: flex; gap: 14px; margin: 18px 0 6px; flex-wrap: wrap; }
.plan {
  flex: 1; min-width: 160px; text-align: center; padding: 18px 12px;
  background: var(--panel); border: 1.5px solid var(--panel-line); border-radius: 18px; position: relative;
}
.plan.hot { border-color: var(--accent2); }
.plan.hot::after {
  content: "超值"; position: absolute; top: -12px; right: 14px;
  background: var(--accent2); color: #4a3200; font-size: 13px; font-weight: 900;
  padding: 3px 12px; border-radius: 999px;
}
.plan .p-name { font-size: 18px; font-weight: 800; color: var(--muted); }
.plan .p-price { font-size: 34px; font-weight: 900; color: var(--accent2); margin: 6px 0; }
.plan .p-note { font-size: 13px; color: var(--muted); }
.activate-row { display: flex; gap: 10px; margin-top: 16px; }
.activate-row input {
  flex: 1; font-size: 20px; letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--panel-line);
  background: var(--panel); color: var(--text); outline: none; min-width: 0;
}
.activate-row input:focus { border-color: var(--accent); }
.pay-contact { margin-top: 14px; font-size: 15px; color: var(--muted); text-align: center; }

/* ---------- 设置弹层 ---------- */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--panel-line); }
.set-row .lab { font-size: 17px; font-weight: 700; }
.seg { display: flex; gap: 8px; }
.seg button {
  padding: 8px 18px; border-radius: 10px; font-size: 16px; font-weight: 700;
  background: var(--panel); color: var(--muted); border: 1.5px solid var(--panel-line);
}
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.swatches { display: flex; gap: 10px; }
.swatch { width: 40px; height: 40px; border-radius: 12px; border: 2.5px solid transparent; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.swatch.on { border-color: var(--accent2); }
.swatch.night { background: linear-gradient(135deg,#1a1333,#4b3a7a); }
.swatch.forest { background: linear-gradient(135deg,#c8e8bd,#2e9e5b); }
.swatch.ocean { background: linear-gradient(135deg,#0d2440,#4cc9f0); }
.swatch.candy { background: linear-gradient(135deg,#ffdbe7,#e75480); }

/* ---------- 门户页 ---------- */
.portal-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }
.portal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand .logo { font-size: 42px; }
.brand h1 { font-size: 30px; letter-spacing: 2px; }
.brand .sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.member-chip { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.member-chip .chip { padding: 8px 18px; border-radius: 999px; font-weight: 800; border: 1.5px solid var(--accent2); color: var(--accent2); }
.member-chip .chip.ok { border-color: var(--good); color: var(--good); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 24px; }
.game-card {
  padding: 22px 18px; text-align: center; text-decoration: none; color: var(--text);
  display: block; transition: transform .15s, border-color .15s;
}
.game-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.game-card .face { font-size: 52px; }
.game-card .gname { font-size: 22px; font-weight: 900; margin: 10px 0 6px; }
.game-card .gdesc { font-size: 14px; color: var(--muted); min-height: 40px; }
.game-card .gplay { margin-top: 12px; font-size: 16px; font-weight: 800; color: var(--accent); }
.sec-title { font-size: 20px; font-weight: 900; margin: 34px 0 12px; display: flex; align-items: center; gap: 10px; }
.sec-title::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: var(--accent2); }
.feature-row { display: flex; gap: 12px; flex-wrap: wrap; }
.feature { flex: 1; min-width: 220px; padding: 16px 18px; font-size: 15px; color: var(--muted); }
.feature b { color: var(--text); display: block; font-size: 17px; margin-bottom: 4px; }
.portal-foot { margin-top: 44px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- 词库管理页 ---------- */
.words-wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
.bank-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bank-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.bank-item .bname { font-size: 17px; font-weight: 800; flex: 1; }
.bank-item .bcount { font-size: 14px; color: var(--muted); }
.bank-item .btag { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(167,139,250,.15); color: var(--accent); font-weight: 700; }
.bank-item.cur { border-color: var(--good); }
.mini-btn { padding: 7px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; background: var(--panel); color: var(--text); border: 1px solid var(--panel-line); }
.mini-btn.danger { color: var(--bad); border-color: var(--bad); }
.mini-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.words-form textarea {
  width: 100%; min-height: 220px; margin-top: 10px;
  font-size: 16px; line-height: 1.7; padding: 14px; border-radius: 14px;
  border: 1.5px solid var(--panel-line); background: var(--panel); color: var(--text); outline: none; resize: vertical;
}
.words-form textarea:focus { border-color: var(--accent); }
.form-tip { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

/* ---------- 管理端 ---------- */
.admin-wrap { max-width: 1060px; margin: 0 auto; padding: 24px 20px 60px; }
.stats-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.stat-box { flex: 1; min-width: 140px; padding: 16px 18px; text-align: center; }
.stat-box .n { font-size: 30px; font-weight: 900; color: var(--accent2); }
.stat-box .t { font-size: 14px; color: var(--muted); margin-top: 2px; }
table.cards { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 12px; }
table.cards th, table.cards td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--panel-line); white-space: nowrap; }
table.cards th { color: var(--muted); font-size: 13px; }
.tag { font-size: 12px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.tag.ok { background: rgba(61,220,132,.15); color: var(--good); }
.tag.dead { background: rgba(255,107,129,.15); color: var(--bad); }
.tag.hub { background: rgba(110,195,255,.15); color: var(--info); }
.card-key { font-family: Consolas, monospace; font-weight: 700; letter-spacing: .5px; }

/* ---------- 响应式（教室大屏 16:9 / 老师手机都可） ---------- */
@media (max-width: 640px) {
  .hud { margin: 10px 10px 0; padding: 10px 12px; }
  .target-card .word { font-size: 30px; }
  .activate-row { flex-direction: column; }
}