/* ============================================
   概念2048 · AI 探险家 儿童版主题
   （叠加在原版 main.css 之后，只改观感、不动逻辑）
   ============================================ */

/* ---------- 页面底色与字体 ---------- */
html, body {
  background: #e7f1ff;          /* 科技蓝 */
  color: #274c77;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
}
body.theme-forest { background: #e9f7e6; color: #2f5d3a; }  /* 森林绿 */
body.theme-candy  { background: #fff0f5; color: #8a3b5c; }  /* 糖果粉 */

/* ---------- 标题 ---------- */
h1.title { font-size: 60px; }
h1.title .title-sub {
  display: block;
  font-size: 15px;
  letter-spacing: 5px;
  font-weight: normal;
  opacity: .7;
}
@media screen and (max-width: 520px) {
  h1.title { font-size: 28px; }
  h1.title .title-sub { font-size: 11px; letter-spacing: 2px; }
}

/* ---------- 计分面板 ---------- */
.score-container, .best-container {
  background: #5b7db1;
  color: #fff;
}
body.theme-forest .score-container, body.theme-forest .best-container { background: #5c9a5f; }
body.theme-candy  .score-container, body.theme-candy  .best-container { background: #e58bb3; }
.score-container:after { content: "知识点数"; font-size: 12px; text-transform: none; }
.best-container:after  { content: "最高记录"; font-size: 12px; text-transform: none; }

/* ---------- 游戏面板 / 空格子 ---------- */
.game-container { background: #b7d0f2; }
body.theme-forest .game-container { background: #a9d6a0; }
body.theme-candy  .game-container { background: #f6c8da; }
.grid-cell { background: rgba(255, 255, 255, 0.55); }

/* ---------- 按钮 ---------- */
.restart-button { background: #4f7cbe; color: #fff; }
body.theme-forest .restart-button { background: #4c8a50; }
body.theme-candy  .restart-button { background: #e07aa8; }
a { color: inherit; }
strong.important { text-transform: none; }

/* ---------- 皮肤切换栏 ---------- */
.theme-bar {
  margin-top: 14px;
  text-align: right;
  font-size: 14px;
  line-height: 30px;
}
.theme-label { opacity: .7; margin-right: 4px; vertical-align: middle; }
.theme-btn {
  display: inline-block;
  width: 28px; height: 28px;
  margin-left: 6px;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  outline: none;
  padding: 0;
  box-sizing: border-box;
}
.theme-btn.theme-tech   { background: #4f7cbe; }
.theme-btn.theme-forest { background: #4c8a50; }
.theme-btn.theme-candy  { background: #e07aa8; }
body.theme-tech   .theme-btn.theme-tech,
body.theme-forest .theme-btn.theme-forest,
body.theme-candy  .theme-btn.theme-candy {
  box-shadow: 0 0 0 2px currentColor;
}

/* ---------- 方块：表情 + 概念名（两行居中） ---------- */
.tile .tile-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  line-height: 1.2;
}
.tile .tile-emoji { font-size: 28px; line-height: 1; }
.tile .tile-name  { font-size: 17px; font-weight: bold; margin-top: 3px; white-space: nowrap; }

/* 概念等级配色（由浅入深，明亮色系） */
.tile.tile-2 .tile-inner {
  background: #b9e4c9;
  color: #14532d;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.tile.tile-4 .tile-inner {
  background: #7fd4c3;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
}
.tile.tile-8 .tile-inner {
  background: #a78bfa;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.tile.tile-16 .tile-inner {
  background: #60a5fa;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.tile.tile-32 .tile-inner {
  background: #fbbf24;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.tile.tile-64 .tile-inner {
  background: #fb7185;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.tile.tile-128 .tile-inner,
.tile.tile-super .tile-inner {
  background: -webkit-linear-gradient(135deg, #fbbf24, #f97316);
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #ffffff;
  box-shadow: 0 0 24px 4px rgba(251, 191, 36, .5), inset 0 0 0 2px rgba(255, 255, 255, .4);
}
.tile.tile-128 .tile-emoji, .tile.tile-super .tile-emoji { font-size: 32px; }

/* ---------- 合并进化提示 toast ---------- */
.merge-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(.85);
  transform: translateX(-50%) scale(.85);
  z-index: 200;
  pointer-events: none;
  background: rgba(20, 30, 60, .88);
  color: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: opacity .25s ease, -webkit-transform .25s ease;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.merge-toast.show {
  opacity: 1;
  -webkit-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
}
.merge-toast .merge-line1 { font-size: 17px; font-weight: bold; }
.merge-toast .merge-line2 { font-size: 12px; opacity: .85; margin-top: 2px; }

/* ---------- 结算弹层中文适配 ---------- */
.game-container .game-message {
  background: rgba(255, 255, 255, .72);
}
.game-container .game-message p {
  font-size: 34px;
  line-height: 1.35;
  height: auto;
  margin-top: 190px;
  padding: 0 24px;
}
.game-container .game-message a {
  background: #4f7cbe;
  color: #fff;
}
body.theme-forest .game-container .game-message a { background: #4c8a50; }
body.theme-candy  .game-container .game-message a { background: #e07aa8; }
.game-container .game-message.game-won {
  background: rgba(251, 191, 36, .45);
  color: #fff;
}

/* ---------- 概念成长链 & 页脚 ---------- */
.concept-chain { margin-top: 14px; font-size: 15px; }
.concept-chain .chain { display: block; margin-top: 4px; opacity: .85; }
.credit { font-size: 13px; opacity: .7; }
.game-explanation { margin-top: 50px; }

/* ---------- 手机小屏适配 ---------- */
@media screen and (max-width: 520px) {
  .tile .tile-emoji { font-size: 17px; }
  .tile .tile-name  { font-size: 10px; margin-top: 1px; }
  .tile.tile-128 .tile-emoji, .tile.tile-super .tile-emoji { font-size: 19px; }
  .theme-bar { margin-top: 8px; }

  .merge-toast { padding: 7px 12px; }
  .merge-toast .merge-line1 { font-size: 13px; }
  .merge-toast .merge-line2 { font-size: 10px; }

  .game-message p {
    font-size: 20px !important;
    line-height: 1.35 !important;
    height: auto !important;
    margin-top: 72px !important;
    padding: 0 10px !important;
  }
}