/* 我的世界 Web —— 界面样式 */
:root {
  --slot: 44px;
  --panel-bg: #c6c6c6;
  --panel-dark: #555555;
  --panel-light: #ffffff;
  --slot-bg: #8b8b8b;
  --text: #ffffff;
  --shadow: 2px 2px 0 #3f3f3f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #000;
  font-family: "Minecraft", "Press Start 2P", "SF Mono", Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  color: var(--text);
  -webkit-font-smoothing: none;
  user-select: none;
  touch-action: none;
}

canvas#game {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; cursor: crosshair; background: #78a7ff;
}

.hidden { display: none !important; }

#ui { position: fixed; inset: 0; pointer-events: none; }

/* ============ HUD ============ */
#hud { position: absolute; inset: 0; pointer-events: none; }

.crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  mix-blend-mode: difference;
}
.crosshair::before, .crosshair::after {
  content: ''; position: absolute; background: #fff;
}
.crosshair::before { left: 50%; top: 0; width: 2px; height: 20px; margin-left: -1px; }
.crosshair::after { top: 50%; left: 0; height: 2px; width: 20px; margin-top: -1px; }

.bottom {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}

.item-name {
  font-size: 15px; text-shadow: var(--shadow); margin-bottom: 4px;
  transition: opacity .2s; pointer-events: none; min-height: 18px;
}

.stats-row {
  width: 366px; display: flex; justify-content: space-between; height: 12px;
}
.stat-group { display: flex; gap: 1px; }
.stat-group.right { flex-direction: row-reverse; }
.stat-group .icon {
  width: 18px; height: 18px; image-rendering: pixelated; margin-top: -6px;
}
.stat-group .icon.shake { animation: shake .3s; }
@keyframes shake { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

.xp-wrap {
  position: relative; width: 366px; height: 10px; margin-top: 4px;
  background: #1a1a1a; border: 1px solid #000;
}
.xp-bar { height: 100%; background: linear-gradient(#8fe33f, #5aac1e); width: 0; }
.xp-level {
  position: absolute; left: 0; right: 0; top: -14px; text-align: center;
  color: #7bf03a; font-size: 14px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.hotbar {
  display: flex; gap: 0; margin-top: 4px;
  background: rgba(0,0,0,.55); padding: 3px; border: 2px solid #1c1c1c; border-radius: 2px;
}
.hb-slot {
  position: relative; width: 42px; height: 42px;
  border: 1px solid #2b2b2b; background: rgba(139,139,139,.5);
}
.hb-slot.sel {
  outline: 3px solid #fff; outline-offset: -1px; z-index: 2;
  background: rgba(200,200,200,.55);
}

.slot-icon {
  position: absolute; inset: 4px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  image-rendering: pixelated;
}
.slot-count {
  position: absolute; right: 2px; bottom: 0px;
  font-size: 14px; text-shadow: var(--shadow); pointer-events: none;
}
.slot-dur {
  position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px;
  background: #000; display: none;
}
.slot-dur-bar { height: 100%; width: 100%; background: #4ce04c; }

.debug {
  position: absolute; left: 6px; top: 6px; font-size: 13px; line-height: 1.45;
  white-space: pre; text-shadow: var(--shadow); background: rgba(0,0,0,.45);
  padding: 4px 8px; border-radius: 2px; max-width: 70vw;
}
.chat {
  position: absolute; left: 8px; bottom: 130px; font-size: 14px;
  text-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px;
}
.chat-line { background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 2px; }

#loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #1a1a1a; color: #fff; font-size: 20px; text-shadow: var(--shadow);
  pointer-events: auto; z-index: 50;
}

/* ============ 覆盖界面 ============ */
#screen {
  position: absolute; inset: 0; pointer-events: auto;
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 20px;
}

.panel {
  background: var(--panel-bg);
  border: 4px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  padding: 10px 12px 14px;
  color: #3f3f3f; text-shadow: none;
  max-height: 96vh; overflow: auto;
}
.panel-title { font-size: 16px; color: #3f3f3f; margin-bottom: 8px; }
.panel-body { display: flex; flex-direction: column; gap: 4px; }
.sub-title { font-size: 13px; color: #3f3f3f; margin: 6px 0 3px; }
.divider { height: 2px; background: #a0a0a0; margin: 6px 0 2px; }
.spacer { height: 8px; }
.row { display: flex; gap: 14px; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 3px; }
.col.center { align-items: center; justify-content: center; gap: 6px; }
.arrow { font-size: 26px; color: #5a5a5a; align-self: center; margin: 0 6px; }

.slot-grid { display: grid; gap: 2px; }
.slot {
  position: relative; width: var(--slot); height: var(--slot);
  background: var(--slot-bg);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  cursor: pointer;
}
.slot:hover { background: #b0b0b0; }
.slot .slot-count { color: #fff; }
.result-slot { width: 54px; height: 54px; }
.armor-slot { background: #7e7e7e; }
.hotbar-grid { margin-top: 2px; }

.craft-box { flex: 1; }
.craft-row { align-items: center; }
.furnace-row { justify-content: center; align-items: center; gap: 20px; padding: 8px 0; }
.fire {
  width: 28px; height: 28px;
  background: linear-gradient(to top, #ff9b2e var(--fill, 0%), #444 var(--fill, 0%));
  border: 1px solid #666;
  clip-path: polygon(50% 0%, 75% 30%, 100% 70%, 80% 100%, 20% 100%, 0% 70%, 25% 30%);
}
.progress { width: 90px; height: 20px; background: #555; border: 1px solid #444; }
.progress-fill { height: 100%; width: 0; background: #ddd; transition: width .1s linear; }

.tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.tab {
  padding: 5px 12px; background: #9a9a9a; cursor: pointer; font-size: 13px; color: #2f2f2f;
  border: 2px solid; border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
}
.tab.active { background: #d8d8d8; }
.creative-list { max-height: 42vh; overflow-y: auto; padding-right: 4px; }

.cursor-stack {
  position: fixed; width: 44px; height: 44px; pointer-events: none; z-index: 100;
  transform: translate(-50%, -50%);
}

.tooltip {
  position: fixed; z-index: 120; pointer-events: none;
  background: rgba(16,0,32,.92); border: 2px solid #3b1a6b;
  padding: 5px 8px; font-size: 13px; color: #fff; text-shadow: var(--shadow);
  max-width: 260px;
}
.tooltip .dim { color: #a8a8b8; font-size: 12px; }

/* ============ 菜单 ============ */
.menu-panel {
  background: rgba(20,20,24,.9);
  border: 3px solid #5a5a5a;
  padding: 26px 34px; min-width: 420px; max-width: 560px;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  text-shadow: var(--shadow);
}
.menu-panel h1 { margin: 0 0 6px; font-size: 26px; text-align: center; }
.menu-panel h1.title { font-size: 34px; color: #7bd44a; letter-spacing: 1px; }
.menu-panel .subtitle { text-align: center; font-size: 13px; color: #a8a8a8; margin-bottom: 10px; }
.menu-panel .sub { text-align: center; color: #c8c8c8; font-size: 14px; }

.mc-button {
  display: block; width: 100%; padding: 11px 14px;
  background: #6b6b6b; color: #fff; font-size: 15px; font-family: inherit;
  border: 2px solid; border-color: #9a9a9a #2f2f2f #2f2f2f #9a9a9a;
  cursor: pointer; text-shadow: var(--shadow);
}
.mc-button:hover { background: #7e8e9e; }
.mc-button:active { border-color: #2f2f2f #9a9a9a #9a9a9a #2f2f2f; }
.mc-button.small-btn { padding: 7px 10px; font-size: 13px; }

.newworld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.newworld input, .setting input[type=range] { width: 100%; }
.newworld input {
  padding: 9px 10px; background: #101010; border: 2px solid #6b6b6b;
  color: #fff; font-family: inherit; font-size: 14px;
}
.mode-row { display: flex; gap: 6px; }
.mode-row .mode {
  flex: 1; padding: 8px; background: #4a4a4a; color: #ccc; border: 2px solid #6b6b6b;
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.mode-row .mode.active { background: #3a7a3a; color: #fff; border-color: #6bd46b; }

.world-list { margin: 8px 0; }
.worlds { display: flex; flex-direction: column; gap: 5px; max-height: 30vh; overflow-y: auto; }
.world-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07); padding: 7px 9px; border: 1px solid #444;
}
.world-info { flex: 1; overflow: hidden; }
.world-info .wn { font-size: 14px; }
.world-info .wm { font-size: 11px; color: #9a9a9a; }
button.small {
  padding: 6px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
  background: #5a5a5a; color: #fff; border: 2px solid; border-color: #8a8a8a #2f2f2f #2f2f2f #8a8a8a;
}
button.small.danger { background: #7a3030; }
.empty { color: #888; font-size: 13px; padding: 6px; }

.setting { margin: 4px 0; }
.setting-label { font-size: 13px; margin-bottom: 3px; }
.tip { font-size: 12px; color: #b8b8b8; line-height: 1.7; margin-top: 8px; text-align: center; }

@media (max-width: 620px) {
  :root { --slot: 36px; }
  .menu-panel { min-width: auto; width: 100%; padding: 18px; }
  .stats-row, .xp-wrap { width: 320px; }
}