:root{
  --mc-bg:#0b0b0e;
  --mc-panel:#1b1b1f;
  --mc-line:#6b6b75;
  --mc-btn:#c6c6c6;
  --mc-btn-dk:#555555;
  --mc-text:#dcdcdc;
  --mc-gold:#ffd83d;
  --mc-blood:#c83232;
  --stone:url("");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--mc-bg)}
body{
  font-family:"Courier New",Consolas,monospace;
  color:var(--mc-text);
  -webkit-font-smoothing:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

#app{position:fixed;inset:0}
#scene,#hud{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{pointer-events:none}
#overlay{position:absolute;inset:0}

.screen{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:18px;
  background:radial-gradient(ellipse at center,rgba(10,10,14,.55) 0%,rgba(4,4,6,.92) 78%);
}
.hidden{display:none !important}

.mc-panel{
  background:var(--mc-panel);
  padding:26px 40px;
  text-align:center;
  border:0;
  box-shadow:
    inset 0 0 0 2px #000,
    inset 3px 3px 0 2px #4a4a52,
    inset -3px -3px 0 2px #0a0a0c,
    0 0 0 3px #000,
    0 0 26px rgba(0,0,0,.9);
  background-image:var(--stone);
  background-size:64px 64px;
  background-blend-mode:multiply;
}

.title-en{
  font-size:44px;font-weight:700;letter-spacing:10px;
  color:#f2f2f2;
  text-shadow:3px 3px 0 #000, 0 0 12px rgba(255,216,61,.25);
}
.title-cn{
  margin-top:6px;font-size:19px;letter-spacing:8px;color:var(--mc-gold);
  text-shadow:2px 2px 0 #000;
}
.rule{height:3px;margin:20px auto 22px;width:78%;
  box-shadow:inset 0 0 0 1px #000, inset 0 2px 0 0 #555;
  background:#8b8b8b;}

.mc-btn{
  display:inline-block;
  font-family:inherit;font-size:16px;letter-spacing:3px;
  color:#1b1b1f;
  background:var(--mc-btn);
  border:0;padding:9px 26px;cursor:pointer;
  box-shadow:
    inset 0 0 0 2px #8b8b8b,
    inset 3px 3px 0 0 #ffffff,
    inset -3px -3px 0 0 var(--mc-btn-dk),
    0 0 0 3px #000;
  transition:none;
}
.mc-btn.big{font-size:20px;padding:12px 40px}
.mc-btn:hover{background:#ffffff;box-shadow:inset 0 0 0 2px #8b8b8b,inset 3px 3px 0 0 #ffffff,inset -3px -3px 0 0 #444,0 0 0 3px #000}
.mc-btn:active{transform:translate(1px,1px);box-shadow:inset 0 0 0 2px #8b8b8b,inset -3px -3px 0 0 #ffffff,inset 3px 3px 0 0 #444,0 0 0 3px #000}

.hint{margin-top:20px;font-size:12px;color:#9a9aa2;letter-spacing:1px}
.hint span{margin:0 7px;white-space:nowrap}
.ver{margin-top:14px;font-size:11px;color:#63636b}

/* 难度选择行 */
.diff-row{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.diffbt{
  font-family:inherit;font-size:13px;letter-spacing:2px;color:#c8c8d0;
  background:#2a2a31;border:0;padding:7px 14px;cursor:pointer;
  box-shadow:inset 0 0 0 2px #000,inset 2px 2px 0 #454550,inset -2px -2px 0 #101014;
}
.diffbt:hover{background:#3a3a44;color:#fff}
.diffbt.on{color:#1b1b1f;background:var(--mc-gold);
  box-shadow:inset 0 0 0 2px #000,inset 2px 2px 0 #fff3b0,inset -2px -2px 0 #a8891a}
#bestTxt{margin-top:10px;font-size:12px;color:#8f8f99;letter-spacing:1px;min-height:14px}
#deadStat span{display:inline-block;margin:3px 9px;font-size:13px;color:#d9d9e0}
#pausestat{margin:12px 0;font-size:13px;line-height:1.7;color:#c8c8d0}

.loadbar{width:280px;height:20px;background:#0b0b0e;
  box-shadow:inset 0 0 0 2px #000,inset 2px 2px 0 0 #555,inset -2px -2px 0 0 #2a2a2e;}
.loadbar i{display:block;height:100%;width:0%;background:linear-gradient(#9fe1cb,#1d9e75);transition:width .2s linear}

.dead-en{font-size:46px;font-weight:700;letter-spacing:8px;color:#e05a5a;text-shadow:3px 3px 0 #000}
.dead-cn{margin-bottom:22px;font-size:20px;letter-spacing:8px;color:#c83232;text-shadow:2px 2px 0 #000}
.small{padding:22px 34px}

#lockhint{
  position:absolute;left:50%;top:74%;transform:translateX(-50%);
  font-size:13px;letter-spacing:3px;color:#b9b9c2;
  text-shadow:2px 2px 0 #000;
}

#touch{position:absolute;inset:0}
/* PLAY 时全屏捕获，保证摇杆/按钮必定收到触摸；MENU/DEAD 由 setState 隐藏，不会盖住菜单按钮 */
/* 转视角区：覆盖上部（避开左下摇杆与右下按钮），拖拽即转相机 */
#tlook{position:absolute;left:0;right:0;top:0;height:60%;pointer-events:auto;touch-action:none}
.tstick{position:absolute;left:26px;bottom:26px;width:132px;height:132px;border-radius:50%;touch-action:none;
  background:rgba(30,30,36,.5);box-shadow:inset 0 0 0 2px #000,inset 2px 2px 0 2px #555}
.tstick i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(198,198,198,.75);box-shadow:inset 0 0 0 2px #8b8b8b,inset 3px 3px 0 #fff,inset -3px -3px 0 #555}
.tbtn{position:absolute;width:78px;height:78px;border-radius:12px;border:0;
  background:var(--mc-btn);color:#1b1b1f;font-family:inherit;font-size:13px;letter-spacing:2px;
  box-shadow:inset 0 0 0 2px #8b8b8b,inset 3px 3px 0 #fff,inset -3px -3px 0 #555,0 0 0 3px #000}
#tatk{right:24px;bottom:110px}
#tfire{right:112px;bottom:34px}
#tjump{right:22px;bottom:36px}
#tdash{right:114px;bottom:112px}
#tfly{right:24px;bottom:190px;font-size:12px}
/* 触控控件必须显式接收事件（覆盖层已设为穿透） */
.tstick,.tbtn{pointer-events:auto}
.tbtn.on{background:#ffd83d;color:#1b1b1f}
/* 自由模式触屏材质栏：顶部居中的一排方块按钮 */
.tpalrow{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;gap:6px;
  flex-wrap:wrap;justify-content:center;max-width:96vw;pointer-events:auto}
.tpal{width:48px;height:52px;border:0;padding:2px 0 0;cursor:pointer;
  background:rgba(18,18,22,.72);color:#e8e8e8;font-family:inherit;
  box-shadow:inset 0 0 0 2px #8b8b8b,0 0 0 2px #000;
  background-repeat:no-repeat;background-position:center 5px;background-size:26px 26px}
.tpal.on{box-shadow:inset 0 0 0 2px #ffd83d,0 0 0 2px #000;background-color:rgba(70,66,20,.85)}
.tpal span{display:block;margin-top:28px;font-size:8px;color:#cfcfcf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 1px}

/* 右上角：第一/第三人称切换按钮（触屏点按；桌面锁鼠标时按 V）
   放在 #touch 之后 + 高 z-index，保证在转视角区之上仍可点击 */
#btnView{
  position:absolute;right:14px;top:14px;z-index:40;pointer-events:auto;
  font-family:inherit;font-size:13px;letter-spacing:2px;color:#1b1b1f;
  background:var(--mc-btn);border:0;padding:8px 14px;cursor:pointer;
  box-shadow:inset 0 0 0 2px #8b8b8b,inset 3px 3px 0 0 #fff,inset -3px -3px 0 0 var(--mc-btn-dk),0 0 0 3px #000;
}

.mission-list{max-height:56vh;overflow:auto;display:flex;flex-direction:column;gap:12px;margin-top:8px;text-align:left}
.mission-chapter h3{font-size:12px;color:#cfcfcf;margin-bottom:6px;text-align:center}
.mission-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mission-level{background:#2a2a2f;border:2px solid var(--mc-line);color:var(--mc-text);padding:8px 10px;font-family:inherit;font-size:11px;min-width:140px;text-align:left;cursor:pointer}
.mission-level:disabled{opacity:.45;cursor:not-allowed}
.ml-name{font-weight:bold}
.ml-stars{color:#ffd83d}
.ml-lock{font-size:10px;color:#b8b8b8}
.result-panel{min-width:320px}
.res-title{font-size:18px;color:#ffd83d}
.res-stars{font-size:20px;color:#ffd83d;letter-spacing:4px}
.result-btns{display:flex;flex-direction:column;gap:6px;margin-top:10px}
/* 对话层：整层可点（触屏没键盘，必须靠点按推进）；跳过按钮在右下 */
.dlg{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:40px 10px;pointer-events:auto;touch-action:manipulation;cursor:pointer}
.dlg.hidden{display:none!important}
.dlg-box{background:rgba(10,10,14,.92);border:3px solid #444;color:#e8e8e8;min-width:320px;max-width:720px;padding:12px 16px;text-align:left;pointer-events:auto}
.dlg-who{color:#9fb8ff;font-weight:bold;font-size:12px;margin-bottom:4px}
.dlg-text{font-size:13px;line-height:1.6;white-space:pre-wrap}
.dlg-hint{font-size:10px;color:#999;margin-top:6px;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.dlg-skip{background:#3a3a42;border:2px solid #6a6a72;color:#ffd83d;font-family:inherit;font-size:10px;letter-spacing:1px;padding:4px 10px;cursor:pointer}
.dlg-skip:hover{background:#4a4a54}
#btnView:hover{background:#fff}
#btnView:active{transform:translate(1px,1px)}

/* ---------- 自由模式：原样嵌入的开源项目（全屏 iframe 外壳） ---------- */
.ref-wrap{position:fixed;inset:0;z-index:9000;background:#000}
.ref-wrap.hidden{display:none!important}
.ref-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ref-back{position:absolute;left:10px;top:10px;z-index:9001;
  font-family:inherit;font-size:12px;letter-spacing:1px;padding:8px 12px;cursor:pointer;
  color:#e8e8e8;background:rgba(18,18,22,.82);border:2px solid #6a6a72;
  box-shadow:0 0 0 2px #000}
.ref-back:hover{background:rgba(60,60,68,.92);color:#fff}
.ref-direct{position:absolute;right:10px;top:10px;z-index:9001;
  font-family:inherit;font-size:12px;letter-spacing:1px;padding:8px 12px;text-decoration:none;
  color:#cfcfd6;background:rgba(18,18,22,.82);border:2px solid #6a6a72;
  box-shadow:0 0 0 2px #000}
.ref-direct:hover{background:rgba(60,60,68,.92);color:#fff}

/* ---------- 战役跳关 / 新手引导 ---------- */
.pw-err{min-height:16px;margin-top:10px;font-size:12px;letter-spacing:1px;color:#ff6b6b}
.shake{animation:pwshake .34s}
@keyframes pwshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.guide-panel{width:min(720px,94vw);max-height:88vh;display:flex;flex-direction:column}
.guide-body{overflow-y:auto;-webkit-overflow-scrolling:touch;text-align:left;
  padding:4px 2px 8px;max-height:60vh}
.guide-body::-webkit-scrollbar{width:8px}
.guide-body::-webkit-scrollbar-thumb{background:#5a5a64}
.guide-sec{margin:10px 0 6px;font-size:13px;letter-spacing:2px;color:#ffd479;text-shadow:2px 2px 0 #000}
.guide-p{font-size:12px;line-height:1.75;color:#c9c9d2;margin:0 0 6px}
.guide-lv{border:2px solid #3a3a42;background:rgba(18,18,22,.72);padding:8px 10px;margin:6px 0}
.guide-lv h4{margin:0 0 4px;font-size:13px;color:#e9e9ef;letter-spacing:1px}
.guide-lv .g-meta{font-size:11px;color:#8d8d99;letter-spacing:1px;margin-bottom:4px}
.guide-lv .g-txt{font-size:12px;line-height:1.7;color:#b9b9c4}
.guide-ch{font-size:12px;letter-spacing:2px;color:#9fb8e0;margin:12px 0 2px;border-bottom:1px solid #3a3a42;padding-bottom:3px}

/* ---------- 参考开源项目（Third-Person-MC, MIT）的菜单观感 ---------- */
.sub{margin-top:10px;font-size:12px;color:#b9b9c2;letter-spacing:2px}
.sub.tiny{font-size:11px;color:#8f8f99;margin-top:6px;letter-spacing:1px}
.logo-wrap{margin-bottom:4px}
.tagline{margin-top:10px;font-size:12px;letter-spacing:8px;color:#9fb8ff;text-shadow:2px 2px 0 #000}
.menu-panel{min-width:390px;max-width:92vw}
.menu-panel .mc-btn.big{display:block;width:100%;margin-top:10px}
.box-panel{min-width:360px;max-width:92vw}
.box-panel .mc-btn{display:block;width:100%;margin-top:12px}
#btnBoxBack{margin-top:8px}
.themebt-row{margin:14px 0 4px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mc-input{
  font-family:inherit;font-size:14px;letter-spacing:2px;color:#1b1b1f;
  background:#c6c6c6;border:0;padding:9px 12px;width:250px;margin-top:6px;
  box-shadow:inset 0 0 0 2px #8b8b8b,inset 3px 3px 0 #555,inset -3px -3px 0 #fff,0 0 0 3px #000;
  outline:none;text-align:center;
}
/* 菜单/模态：像 MC 一样铺一层方块底（stone 贴图由 JS 注入 --stone） */
.box-bg{
  background-image:linear-gradient(rgba(8,8,12,.74),rgba(8,8,12,.74)),var(--stone);
  background-size:auto,64px 64px;
  background-repeat:repeat;
}