* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; }
body { font-family:"Microsoft YaHei", "PingFang SC", sans-serif; user-select:none; -webkit-user-select:none; }

#game { position:fixed; inset:0; }
#gl { position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated; }

.hidden { display:none !important; }
.screen { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; flex-direction:column; }

/* ---------- MC 风格面板/按钮 ---------- */
.panel {
  background:rgba(20,18,26,0.92);
  border:3px solid #000;
  box-shadow: inset 2px 2px 0 #6f6f78, inset -2px -2px 0 #2a2a30, 0 0 0 2px #1a1a1f, 0 10px 40px rgba(0,0,0,.7);
  padding:22px 28px; color:#e8e8e8; text-align:center;
  max-width:92vw; max-height:88vh; overflow:auto;
  image-rendering:pixelated;
}
.panel.wide { width:820px; }
.panel h2 { font-size:20px; margin-bottom:14px; letter-spacing:2px; text-shadow:2px 2px 0 #000; }
.panel h3 { font-size:15px; margin:8px 0 6px; color:#ffd85e; text-shadow:1px 1px 0 #000; }
.panel p { font-size:13px; line-height:1.9; color:#cfcfcf; }
.panel .dim { color:#8a8a95; font-size:12px; font-weight:normal; }

.mcbtn {
  display:block; margin:8px auto; min-width:260px; padding:10px 20px;
  font-family:inherit; font-size:15px; letter-spacing:1px; color:#f2f2f2; text-shadow:2px 2px 0 rgba(0,0,0,.8);
  background:#6f6f78; border:2px solid #000; cursor:pointer;
  box-shadow: inset 2px 2px 0 #a8a8b4, inset -2px -2px 0 #3f3f47;
  image-rendering:pixelated;
}
.mcbtn:hover { background:#7f86c8; box-shadow: inset 2px 2px 0 #b7bdf2, inset -2px -2px 0 #494f8a; color:#fff; }
.mcbtn:active { transform:translateY(1px); }
.mcbtn.big { min-width:340px; padding:13px 20px; font-size:17px; }

/* ---------- 主菜单 ---------- */
#menu { background:#05060f; z-index:60; }
#menusky { position:absolute; inset:0; }
#logo { position:relative; z-index:2; width:min(760px,90vw); height:170px; margin-bottom:10px; }
#logo svg { width:100%; height:100%; }
.menu-buttons { position:relative; z-index:2; }
#menufoot { position:absolute; bottom:12px; width:100%; text-align:center; color:#5b5f78; font-size:11px; z-index:2; }

.helpcols { display:flex; gap:26px; text-align:left; justify-content:center; margin-bottom:12px; flex-wrap:wrap; }
.helpcols > div { min-width:220px; }
#help,#pause,#inv,#translator,#shiplog { background:rgba(0,0,0,0.55); z-index:50; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; z-index:20; pointer-events:none; }
#crosshair { position:absolute; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%,-50%); opacity:.85; }
#crosshair::before, #crosshair::after { content:""; position:absolute; background:#fff; mix-blend-mode:difference; }
#crosshair::before { left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
#crosshair::after { top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }

#stats { position:absolute; left:50%; bottom:76px; transform:translateX(-50%); width:420px; }
.statrow { display:flex; align-items:center; gap:6px; margin-top:4px; }
#hearts { gap:2px; }
#hearts svg { width:20px; height:20px; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.7)); }
.staticon { width:18px; height:18px; display:inline-block; }
.staticon svg { width:100%; height:100%; }
.bar { flex:1; height:10px; background:#111; border:2px solid #000; box-shadow:inset 1px 1px 0 rgba(255,255,255,.15); }
.fill { height:100%; width:100%; transition:width .15s; }
.fill.oxy { background:linear-gradient(#9fd8ff,#3d9be9); }
.fill.fuel { background:linear-gradient(#ffd27a,#e98a2b); }

#loopclock { position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px;
  color:#ffd85e; font-size:18px; font-weight:bold; text-shadow:2px 2px 0 #000; }
#sunicon { width:24px; height:24px; display:inline-block; }
#sunicon svg { width:100%; height:100%; }
#loopclock.danger { color:#ff5a4e; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.4; } }

#questbox { position:absolute; top:14px; left:14px; max-width:340px; background:rgba(10,10,16,.72);
  border:2px solid #000; box-shadow:inset 1px 1px 0 #565663; padding:10px 14px; }
#questtitle { color:#ffd85e; font-size:13px; font-weight:bold; text-shadow:1px 1px 0 #000; margin-bottom:4px; }
#questtext { color:#e8e8e8; font-size:13px; line-height:1.7; text-shadow:1px 1px 0 #000; }
#questtext .done { color:#7fe08a; }

#hotbar { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; }
.slot { width:52px; height:52px; position:relative; background:rgba(30,30,38,.85);
  border:2px solid #000; box-shadow:inset 2px 2px 0 #17171d, inset -2px -2px 0 #55555f; }
.slot.sel { box-shadow:inset 0 0 0 3px #fff, inset 4px 4px 0 #17171d; z-index:2; }
.slot svg, .slot img { position:absolute; inset:6px; width:40px; height:40px; image-rendering:pixelated; }
.slot .cnt { position:absolute; right:3px; bottom:1px; color:#fff; font-size:13px; font-weight:bold; text-shadow:1px 1px 0 #000; z-index:3; }

#hint { position:absolute; left:50%; bottom:150px; transform:translateX(-50%);
  color:#fff; font-size:16px; text-shadow:2px 2px 0 #000; background:rgba(0,0,0,.45); padding:6px 16px; border:1px solid rgba(255,255,255,.2); }
#subtitle { position:absolute; left:50%; bottom:210px; transform:translateX(-50%); color:#9fd8ff; font-size:15px; text-shadow:2px 2px 0 #000; }
#planetname { position:absolute; top:60px; left:50%; transform:translateX(-50%);
  font-size:30px; color:#fff; letter-spacing:8px; text-shadow:3px 3px 0 #000; opacity:0; transition:opacity 1.2s; }
#tooltip { position:absolute; color:#fff; font-size:13px; text-shadow:1px 1px 0 #000; background:rgba(16,4,32,.9); border:2px solid #3c1f6e; padding:4px 10px; z-index:45; pointer-events:none; }

/* ---------- 飞船 HUD ---------- */
#shiphud { position:absolute; inset:0; }
#cockpit { position:absolute; inset:0; }
#cockpit svg { width:100%; height:100%; }
#shipinfo { position:absolute; left:50%; bottom:9%; transform:translateX(-50%); text-align:center; }
#shipspeed { color:#8affc1; font-size:16px; font-weight:bold; text-shadow:2px 2px 0 #000; }
#shiptarget { color:#ffd85e; font-size:14px; text-shadow:2px 2px 0 #000; margin-top:4px; }
#shipreticle { position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%);
  border:2px solid rgba(138,255,193,.8); }
#shipreticle::before { content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; background:#8affc1; transform:translate(-50%,-50%); }

/* ---------- 物品栏 ---------- */
#invmain { display:flex; gap:18px; justify-content:center; align-items:flex-start; }
#invgrid { display:grid; grid-template-columns:repeat(9, 52px); }
#invhotbar { display:flex; justify-content:center; margin-top:10px; }
#craftlist { width:300px; max-height:330px; overflow-y:auto; text-align:left; background:rgba(0,0,0,.35); border:2px solid #000; padding:6px; }
.recipe { display:flex; align-items:center; gap:8px; padding:6px; margin:3px 0; border:2px solid transparent; cursor:pointer; background:rgba(255,255,255,.05); }
.recipe:hover { border-color:#fff; background:rgba(255,255,255,.12); }
.recipe.no { opacity:.45; cursor:not-allowed; }
.recipe .ric { width:36px; height:36px; flex:none; }
.recipe .ric svg { width:100%; height:100%; }
.recipe .rt { font-size:13px; color:#fff; text-shadow:1px 1px 0 #000; }
.recipe .rc { font-size:11px; color:#a8a8b4; }

/* ---------- 对话 ---------- */
#dialog { position:absolute; left:50%; bottom:90px; transform:translateX(-50%); width:min(760px,92vw);
  display:flex; gap:14px; background:rgba(12,10,22,.94); border:3px solid #000;
  box-shadow:inset 2px 2px 0 #6f6f78, inset -2px -2px 0 #2a2a30; padding:16px; z-index:35; cursor:pointer; }
#dlgportrait { width:84px; height:84px; flex:none; border:2px solid #000; background:#222; }
#dlgportrait svg { width:100%; height:100%; }
#dlgname { color:#ffd85e; font-weight:bold; font-size:15px; text-shadow:1px 1px 0 #000; margin-bottom:6px; }
#dlgtext { color:#f0f0f0; font-size:15px; line-height:1.8; min-height:56px; text-shadow:1px 1px 0 #000; }
#dlgnext { color:#8a8a95; font-size:11px; text-align:right; margin-top:4px; animation:blink 1.4s steps(2) infinite; }

/* ---------- 翻译器 ---------- */
#glyphs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:14px; background:rgba(10,30,40,.6); border:2px solid #0e4a5e; margin-bottom:12px; }
#glyphs svg { width:44px; height:44px; }
.glyph { animation:glowg 2s ease-in-out infinite alternate; }
@keyframes glowg { from { filter:drop-shadow(0 0 2px #35e0ff); } to { filter:drop-shadow(0 0 10px #35e0ff); } }
#translated { font-size:15px; color:#bdf3ff; line-height:2; text-align:left; padding:0 10px; min-height:100px; white-space:pre-wrap; }

/* ---------- 飞船日志 ---------- */
#logentries { text-align:left; max-height:52vh; overflow-y:auto; }
.logentry { display:flex; gap:12px; padding:10px; margin:6px 0; background:rgba(255,255,255,.05); border:2px solid #2a2a35; }
.logentry .lic { width:44px; height:44px; flex:none; }
.logentry .lic svg { width:100%; height:100%; }
.logentry h4 { color:#ffd85e; font-size:14px; margin-bottom:4px; text-shadow:1px 1px 0 #000; }
.logentry p { color:#c8c8d0; font-size:12.5px; line-height:1.7; }
.logentry.locked { opacity:.4; }

/* ---------- 遮罩/演出 ---------- */
#flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:70; }
#fade { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:65; transition:opacity 1.5s; }
#loopscreen { position:absolute; inset:0; background:#000; z-index:80; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#looptext { color:#e8e8e8; font-size:26px; letter-spacing:6px; text-shadow:0 0 18px #4a7dff; }
#loopcount { color:#6a6f8a; font-size:15px; margin-top:18px; letter-spacing:3px; }

/* ---------- 结局 ---------- */
#ending { background:#02030a; z-index:75; }
#endsky { position:absolute; inset:0; }
#endcontent { position:relative; z-index:2; text-align:center; }
#endfire { width:160px; height:160px; margin:0 auto 20px; }
#endfire svg { width:100%; height:100%; }
#endtext { color:#e8e8e8; font-size:18px; line-height:2.4; letter-spacing:2px; text-shadow:2px 2px 0 #000; min-height:200px; white-space:pre-line; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#111; }
::-webkit-scrollbar-thumb { background:#555; border:2px solid #111; }