/* ===========================================================
   style.css —— 主布局 / 字体 / 主题 / HUD / 弹窗
   字体：中文宋体 / 英文 Times New Roman
   =========================================================== */
:root{
  --font-cn: "宋体", SimSun, "Songti SC", serif;
  --font-en: "Times New Roman", "Times", serif;
  --gold: #ffd84d;
  --gold-deep: #f5a623;
  --red: #ff5b5b;
  --ink: #2b2b2b;
  --panel: rgba(255,255,255,.92);
  --shadow: 0 6px 18px rgba(0,0,0,.18);
  --radius: 16px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  width:100%; height:100%; overflow:hidden;
  font-family:var(--font-cn);
  color:var(--ink);
  background:#bfe3a8;
  -webkit-user-select:none; user-select:none;
  touch-action:none;
}
/* 英文统一 Times New Roman */
.en, .en *{ font-family:var(--font-en); }

#game-container{
  position:relative; width:100%; height:100%;
  overflow:hidden; background:#bfe3a8;
}

/* ---- 背景 ---- */
.bg-layer{
  position:absolute; inset:0; z-index:0;
  background:url('../assets/bg.png') center/cover no-repeat;
}
.bg-layer.dim{ filter:brightness(.55); }

/* ---- 顶部 HUD ---- */
.hud{
  position:absolute; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
  border-bottom:2px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  flex-wrap:wrap;
}
.hud .player-name{ font-weight:bold; font-size:15px; }
.hud .stat{
  display:flex; align-items:center; gap:6px;
  background:#fff; border-radius:20px; padding:5px 12px;
  box-shadow:0 2px 5px rgba(0,0,0,.12);
  font-size:15px; min-width:96px;
}
.hud .stat .label{ font-size:13px; color:#777; }
.hud .stat .val{ font-weight:bold; color:var(--gold-deep); font-family:var(--font-en); }
.hud .spacer{ flex:1; }
.hud .btn{
  border:none; cursor:pointer; border-radius:20px; padding:7px 14px;
  font-size:14px; font-family:var(--font-cn);
  background:linear-gradient(180deg,#7ed957,#54b53a); color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.18); transition:transform .1s;
}
.hud .btn:hover{ transform:translateY(-1px); }
.hud .btn:active{ transform:translateY(1px); }
.hud .btn.shop{ background:linear-gradient(180deg,#ffd84d,#f5a623); }
.hud .btn.menu{ background:linear-gradient(180deg,#9ec3ff,#5b8def); }
.hud .btn.stats{ background:linear-gradient(180deg,#c3a3ff,#9b6bff); }
.hud .btn:disabled{ background:#bbb; cursor:not-allowed; opacity:.7; }
/* 树枝免费次数标签 */
.hud .branch-stat{ cursor:help; }
.hud .branch-stat .free-tag{
  font-size:11px; color:#fff; background:#3aa856; border-radius:8px;
  padding:1px 6px; margin-left:2px; vertical-align:middle;
}
/* ★ v2.0.0：石头/沙漏免费次数标签 */
.hud .stone-stat{ cursor:help; }
.hud .stone-stat .free-tag{
  font-size:11px; color:#fff; background:#5b8def; border-radius:8px;
  padding:1px 6px; margin-left:2px; vertical-align:middle;
}
.hud .hg-stat{ cursor:help; }
.hud .jelly-stat{ cursor:help; }

/* HUD 当前皮肤徽标 */
.hud .skin-chip{
  width:30px; height:30px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  cursor:pointer; opacity:.5; transition:all .15s;
}
.hud .skin-chip.active{ opacity:1; border-color:#7ed957; box-shadow:0 0 8px rgba(126,217,87,.7); transform:scale(1.1); }
.hud .skin-chip:hover{ opacity:.85; }
.hud .skin-bar{ display:flex; gap:5px; align-items:center; flex-wrap:nowrap; }

/* ---- 浮动数字 ---- */
.float-num{
  position:absolute; z-index:120; pointer-events:none;
  font-weight:bold; font-family:var(--font-en); font-size:30px;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
  animation:floatUp 1.1s ease-out forwards;
}
.float-num.gold{ color:var(--gold); }
.float-num.red{ color:var(--red); }
@keyframes floatUp{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  20%{ opacity:1; transform:translateY(-10px) scale(1.2); }
  100%{ opacity:0; transform:translateY(-70px) scale(1); }
}
/* 解锁页面内积分弹出特效 */
@keyframes panelScorePop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.3); }
  25%{ opacity:1; transform:translate(-50%,-50%) scale(1.3); }
  60%{ opacity:1; transform:translate(-50%,-80%) scale(1.1); }
  100%{ opacity:0; transform:translate(-50%,-130%) scale(1); }
}

/* ---- 通用按钮 ---- */
.btn-primary{
  border:none; cursor:pointer; border-radius:30px; padding:12px 28px;
  font-size:17px; font-family:var(--font-cn); font-weight:bold;
  background:linear-gradient(180deg,#7ed957,#54b53a); color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.2); transition:transform .12s;
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary.gold{ background:linear-gradient(180deg,#ffd84d,#f5a623); }
.btn-primary.blue{ background:linear-gradient(180deg,#9ec3ff,#5b8def); }
.btn-primary.ghost{ background:#fff; color:#333; border:2px solid #ccc; }

/* ---- 弹窗 ---- */
.modal-overlay{
  position:absolute; inset:0; z-index:300;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.hidden{ display:none; }
.modal-box{
  background:var(--panel); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 30px; max-width:560px; width:100%;
  text-align:center; animation:popIn .25s ease;
}
@keyframes popIn{ from{ opacity:0; transform:scale(.85);} to{ opacity:1; transform:scale(1);} }
.modal-box h2{ font-size:24px; margin-bottom:10px; color:#3a7; }
.modal-box p{ font-size:16px; line-height:1.8; margin:8px 0; color:#444; }
.modal-box .actions{ margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* 胜利全屏 */
.victory-overlay{
  position:absolute; inset:0; z-index:400;
  background:radial-gradient(circle at center, rgba(255,255,255,.85), rgba(120,200,80,.7));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px;
}
.victory-overlay h1{ font-size:48px; color:#e87b00; text-shadow:0 3px 8px rgba(255,255,255,.8); margin-bottom:14px; }
.victory-overlay p{ font-size:20px; color:#3a6; }

/* ---- 全局屏幕容器 ---- */
.screen{ position:absolute; inset:0; z-index:1; }
.screen.hidden{ display:none; }

/* ---- 漩涡乐园入口（右下角） ---- */
.paradise-portal{
  position:absolute; right:18px; bottom:18px; z-index:200;
  width:74px; height:74px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle, #fff 0%, #b06bff 40%, #4a00a8 100%);
  box-shadow:0 0 24px #b06bff, inset 0 0 14px #fff;
  animation:portalSpin 3s linear infinite, portalPulse 1.6s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:bold; text-align:center; line-height:1.1;
}
.paradise-portal.hidden{ display:none; }
@keyframes portalSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
@keyframes portalPulse{ 0%,100%{ box-shadow:0 0 20px #b06bff;} 50%{ box-shadow:0 0 34px #d59cff;} }

/* ---- 狂暴模式入口（右下角，购买后出现） ---- */
#rage-entry{
  position:absolute; right:104px; bottom:18px; z-index:200;
  width:74px; height:74px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle, #fff 0%, #ff7a3c 40%, #c0392b 100%);
  box-shadow:0 0 24px #ff7a3c, inset 0 0 14px #fff;
  animation:portalPulse 1.2s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:bold; text-align:center; line-height:1.2;
  user-select:none;
}
#rage-entry:hover{ transform:scale(1.1); }
#rage-entry.hidden{ display:none; }

/* ---- 过场动画覆盖层 ---- */
.cutscene-overlay{
  position:absolute; inset:0; z-index:1000; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cutscene-video{
  max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain;
  background:#000;
}
.cutscene-skip{
  position:absolute; right:20px; bottom:20px; z-index:1001;
  padding:8px 16px; border:none; border-radius:20px; cursor:pointer;
  font-family:var(--font-cn); font-size:14px;
  background:rgba(255,255,255,.85); color:#333;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.cutscene-skip:hover{ background:#fff; }

/* ---- 开发测试按钮（右下角偏上；默认隐藏，连续键入 5561 后本周目临时显示） ---- */
.dev-btn{
  position:absolute; right:18px; bottom:104px; z-index:200;
  border:none; cursor:pointer; border-radius:8px; padding:8px 12px;
  font-size:12px; font-family:var(--font-cn);
  background:rgba(255,255,255,.85); color:#c0392b; border:1px dashed #c0392b;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.dev-btn:hover{ background:#fff; }
/* 一键功能默认隐藏；body 加 dev-on 类后才显示 */
.dev-btn{ display:none; }
body.dev-on .dev-btn{ display:block; }

/* ---- 服饰道具：HUD 图标 + 拖拽影像 + 史莱姆佩戴图层 ---- */
.hud .skin-chip.acc-chip{
  border:2px solid #b06bff; cursor:grab;
}
.hud .skin-chip.acc-chip:active{ cursor:grabbing; }
.acc-drag-ghost{
  position:absolute; width:60px; height:60px; z-index:600; pointer-events:none;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.85; filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));
}
/* 史莱姆身上的服饰图层（绝对定位在史莱姆元素内）。
   注意：不能用 padding-bottom 百分比技巧，因为那是相对父元素【宽度】算高度，
   会导致图层被压缩并藏在史莱姆身体里看不见。改为由 JS 直接设置 width/height/top/left。 */
.p-slime .acc-layer{
  position:absolute;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  pointer-events:none; z-index:2;
}
/* 佩戴确认对话框输入框 */
.spell-box.equip-box .equip-input{
  width:80%; max-width:280px; padding:10px 12px; font-family:var(--font-en);
  font-size:20px; text-align:center; border:2px solid #b06bff; border-radius:8px;
}
.spell-box.equip-box .equip-input:focus{ outline:none; border-color:#9b6bff; box-shadow:0 0 0 3px rgba(155,107,255,.25); }

/* ---- 右下角版本号（仅在欢迎页显示）---- */
.version-badge{
  position:absolute; right:18px; bottom:18px; z-index:60;
  font-family:var(--font-en); font-size:13px; font-weight:bold;
  color:#fff; background:rgba(0,0,0,.5);
  padding:4px 12px; border-radius:12px;
  pointer-events:none; letter-spacing:.5px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* ---- 滚动条美化 ---- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:4px; }

/* ---- 单词熟练度总览浮层 ---- */
#stats-overlay .stats-box{
  background:#fff; border-radius:18px; padding:22px 24px; max-width:720px; width:100%;
  box-shadow:var(--shadow); max-height:88vh; display:flex; flex-direction:column;
}
#stats-overlay .stats-box h2{ text-align:center; color:#9b6bff; margin-bottom:6px; }
#stats-overlay .st-summary{ text-align:center; font-size:13px; color:#888; margin-bottom:12px; }
#stats-overlay .st-table-wrap{ overflow:auto; flex:1; }
#stats-overlay .st-table{ width:100%; border-collapse:collapse; font-size:14px; }
#stats-overlay .st-table th{
  background:#f5f0ff; color:#555; padding:8px 6px; position:sticky; top:0;
  border-bottom:2px solid #ddd; font-weight:bold; text-align:center; white-space:nowrap;
}
#stats-overlay .st-table td{
  padding:7px 6px; border-bottom:1px solid #f0f0f0; text-align:center; vertical-align:middle;
}
#stats-overlay .st-table .st-en{ font-family:var(--font-en); font-weight:bold; color:#2b6e2b; white-space:nowrap; }
#stats-overlay .st-table .st-rank{ font-family:var(--font-en); font-weight:bold; color:#9b6bff; white-space:nowrap; }
/* 排名前三名特别高亮 */
#stats-overlay .st-table tbody tr:nth-child(1) .st-rank{ color:#e0a800; font-size:16px; }
#stats-overlay .st-table tbody tr:nth-child(2) .st-rank{ color:#9e9e9e; }
#stats-overlay .st-table tbody tr:nth-child(3) .st-rank{ color:#cd7f32; }
#stats-overlay .st-table .st-yes{ color:#3a7; font-weight:bold; white-space:nowrap; }
#stats-overlay .st-table .st-no{ color:#c0392b; white-space:nowrap; }
/* 熟练度进度条 */
#stats-overlay .st-prof{ display:flex; align-items:center; gap:6px; justify-content:center; }
#stats-overlay .st-prof-num{ font-family:var(--font-en); font-weight:bold; min-width:24px; text-align:right; color:#e87b00; }
#stats-overlay .st-prof-bar{
  display:inline-block; width:60px; height:8px; background:#eee; border-radius:4px; overflow:hidden;
}
#stats-overlay .st-prof-bar span{ display:block; height:100%; background:linear-gradient(90deg,#ffd84d,#f5a623); }

/* ---- 拼写界面空格格子（含空格的单词）---- */
.spell-box .letter-cell.space{
  background:transparent; border-color:transparent;
  width:18px; cursor:default;
}