/* =====================================================================
   MineWeb — 基础样式：画布、屏幕、按钮、对话框
   ===================================================================== */

:root{
  --mc-font: "Minecraft", "Minecraftia", "Segoe UI", "Microsoft YaHei", monospace;
  --panel: #c6c6c6;
  --panel-dark: #8b8b8b;
  --panel-light: #ffffff;
  --slot: #8b8b8b;
  --btn: #999999;
  --btn-hi: #b0b0b0;
  --text: #ffffff;
  --text-shadow: #3f3f3f;
  --gold: #ffaa00;
  --green: #55ff55;
  --red: #ff5555;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%; overflow:hidden;
  background:#000;
  font-family: var(--mc-font);
  color: var(--text);
  -webkit-font-smoothing: none;
  font-smooth: never;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#glcanvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  image-rendering: pixelated;
  cursor: default;
}
body.playing #glcanvas{ cursor:none; }

/* ---------------- 屏幕特效层 ---------------- */
.fx-layer{
  position:fixed; inset:0; pointer-events:none; opacity:0;
  transition: opacity .18s linear;
  z-index: 40;
}
#fx-underwater{
  background: linear-gradient(rgba(12,58,140,.55), rgba(8,40,110,.66));
  mix-blend-mode: normal;
}
#fx-damage{ background: radial-gradient(circle at 50% 50%, rgba(255,0,0,0) 30%, rgba(190,0,0,.62) 100%); }
#fx-vignette{
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  opacity:.35;
}

/* ---------------- 通用屏幕 ---------------- */
.screen{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
}
.screen.hidden, .hidden{ display:none !important; }

/* 标题画面 */
#screen-title{ background:#000; }
.title-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 120%, #2b5f2b 0%, #14331a 40%, #0a1a12 100%),
    linear-gradient(#7db6ff, #cfe8ff);
  background-blend-mode: normal;
  filter: saturate(.9);
}
.title-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  animation: drift 40s linear infinite;
}
@keyframes drift{ from{ background-position:0 0,0 0 } to{ background-position:0 640px, 640px 0 } }

.title-content{ position:relative; text-align:center; z-index:2; }
.mc-logo{
  font-size: clamp(38px, 8vw, 96px);
  letter-spacing: .12em;
  color:#cfcfcf;
  text-shadow:
    4px 4px 0 #3a3a3a, 8px 8px 0 rgba(0,0,0,.45),
    0 0 26px rgba(120,220,120,.35);
  margin-bottom: 6px;
}
.splash{
  color: var(--gold); font-size: clamp(12px,1.6vw,18px);
  transform: rotate(-14deg);
  display:inline-block; margin: -14px 0 26px 180px;
  text-shadow: 2px 2px 0 #3f3f00;
  animation: bob .7s ease-in-out infinite alternate;
}
@keyframes bob{ from{ transform: rotate(-14deg) scale(1) } to{ transform: rotate(-14deg) scale(1.08) } }

.menu-col{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.btn-row{ display:flex; gap:10px; }
.version-line{ margin-top:26px; font-size:12px; color:#d8d8d8; text-shadow:1px 1px 0 #000; }
.copyright-line{ font-size:11px; color:#9f9f9f; margin-top:4px; }

/* ---------------- 按钮（MC 风格） ---------------- */
.mc-btn{
  font-family: var(--mc-font);
  font-size: 15px;
  color: #ffffff;
  text-shadow: 2px 2px 0 var(--text-shadow);
  background: linear-gradient(#a5a5a5, #8b8b8b);
  border: 2px solid #000;
  box-shadow: inset -2px -4px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.35);
  padding: 9px 18px;
  min-width: 160px;
  cursor: pointer;
  image-rendering: pixelated;
}
.mc-btn.wide{ min-width: 320px; }
.mc-btn:hover{ background: linear-gradient(#c9d8ff, #7d92c9); color:#ffffa0; }
.mc-btn:active{ box-shadow: inset 2px 4px 0 rgba(0,0,0,.35); transform: translateY(1px); }
.mc-btn.small{ min-width:auto; font-size:12px; padding:5px 10px; }
.mc-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------------- 对话框 ---------------- */
.dialog{
  background: var(--panel);
  border: 2px solid #000;
  box-shadow: inset -3px -3px 0 var(--panel-dark), inset 3px 3px 0 var(--panel-light), 0 0 0 2px #000, 0 12px 40px rgba(0,0,0,.6);
  padding: 20px 24px;
  min-width: 380px;
  color:#3f3f3f;
  text-shadow:none;
}
.dialog.wide-dialog{ min-width: min(760px, 92vw); max-height: 86vh; overflow:auto; }
.dialog h2{ font-size:20px; margin-bottom:16px; text-align:center; color:#3f3f3f; }
.dialog h3{ font-size:15px; margin:14px 0 8px; color:#3f3f3f; }
.dialog label{ display:block; font-size:13px; margin-bottom:12px; color:#3f3f3f; }
.dialog label.check{ display:flex; gap:8px; align-items:center; }
.dialog input[type=text], .dialog select{
  display:block; width:100%; margin-top:5px;
  font-family: var(--mc-font); font-size:13px;
  padding:7px 8px; background:#000; color:#e0e0e0;
  border:2px solid #a0a0a0; outline:none;
}
.dialog input[type=text]:focus, .dialog select:focus{ border-color:#fff; }
.dialog-actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; }
.dialog.death{ background:#8f2020; }
.dialog.death h2{ color:#ffffff; text-shadow:2px 2px 0 #3f0000; }
#death-msg{ text-align:center; color:#fff; margin-bottom:16px; font-size:13px; }

/* 选项网格 */
.opt-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:10px 18px; }
.opt-row{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:#3f3f3f; }
.opt-row .opt-head{ display:flex; justify-content:space-between; gap:8px; }
.opt-row .opt-val{ color:#1f5f1f; }
.opt-row input[type=range]{ width:100%; accent-color:#6a9a3a; }
.opt-row .toggle{
  border:2px solid #000; background:#8b8b8b; color:#fff; text-shadow:1px 1px 0 #000;
  padding:5px 8px; cursor:pointer; font-family:var(--mc-font); font-size:12px; text-align:left;
}
.opt-row .toggle.on{ background:#3f7a3f; }
.opt-desc{ font-size:10px; color:#6a6a6a; }

/* 帮助 */
.help-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:6px 16px; font-size:12px; color:#3f3f3f; }
.help-grid div{ display:flex; gap:10px; }
.help-grid b{ min-width:86px; color:#000; }
.cmd-help{
  background:#3f3f3f; color:#dcdcdc; padding:10px; font-size:11px; line-height:1.7;
  white-space:pre-wrap; border:2px solid #000;
}

/* ---------------- 加载 ---------------- */
#screen-loading{ background:#101418; }
.loading-box{ width:min(520px,88vw); text-align:center; }
.loading-title{ font-size:20px; margin-bottom:14px; text-shadow:2px 2px 0 #000; }
.progress{ height:14px; background:#000; border:2px solid #555; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,#59a83c,#7fd85a); transition:width .12s linear; }
.loading-sub{ margin-top:10px; font-size:12px; color:#b9b9b9; }
.loading-tip{ margin-top:22px; font-size:11px; color:#8a8a8a; min-height:2em; line-height:1.6; }

/* ---------------- 滚动条 ---------------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#2b2b2b; }
::-webkit-scrollbar-thumb{ background:#8b8b8b; border:2px solid #2b2b2b; }
::-webkit-scrollbar-thumb:hover{ background:#c6c6c6; }