/* ============================================================
   mc-theme.css — Minecraft 像素风主题基座
   泥土/石头/橡木纹理、浮雕边框、全局像素渲染
   ============================================================ */

/* --- 像素字体（使用系统等宽近似 MC 风格）--- */
:root {
  --mc-dirt:      #79553a;
  --mc-dirt-dark: #5c3f2a;
  --mc-stone:     #7f7f7f;
  --mc-stone-lt:  #a8a8a8;
  --mc-stone-dk:  #565656;
  --mc-oak:       #b58b5a;
  --mc-oak-dk:    #8a6a44;
  --mc-grass:     #5b8731;
  --mc-grass-lt:  #7cb342;
  --mc-grass-dk:  #3f5f22;
  --mc-panel:     #c6c6c6;
  --mc-panel-dk:  #8b8b8b;
  --mc-panel-lt:  #ffffff;
  --mc-text:      #f4f4f4;
  --mc-text-dark: #222222;
  --mc-exp:       #7cfc00;   /* 经验条亮绿 */
  --mc-exp-dk:    #4caf00;
  --mc-red:       #d84343;
  --mc-redstone:  #c81f1f;
  --border-dark:  #373737;
}

/* --- 全局像素化渲染 --- */
* {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Courier New", "PingFang SC", "Microsoft YaHei", monospace;
  color: var(--mc-text);
  /* 石头纹理背景（像素噪点用 CSS 渐变模拟）*/
  background-color: #3a3a3a;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.15) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.15) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  min-height: 100vh;
  letter-spacing: 0.5px;
}

/* --- 泥土纹理块（顶部草皮）--- */
.mc-dirt-bg {
  background-color: var(--mc-dirt);
  background-image:
    linear-gradient(45deg, var(--mc-dirt-dark) 25%, transparent 25%, transparent 75%, var(--mc-dirt-dark) 75%);
  background-size: 12px 12px;
}
.mc-grass-top {
  border-top: 8px solid var(--mc-grass);
  box-shadow: inset 0 8px 0 var(--mc-grass-lt);
}

/* --- 通用浮雕面板（灰色凹凸边框）--- */
.mc-panel {
  background: var(--mc-panel);
  border: 4px solid var(--border-dark);
  box-shadow:
    inset 3px 3px 0 var(--mc-panel-lt),
    inset -3px -3px 0 var(--mc-panel-dk);
  color: var(--mc-text-dark);
  padding: 16px;
}

/* 凹陷面板（内容区/输入框容器）*/
.mc-inset {
  background: #8b8b8b;
  border: 4px solid var(--border-dark);
  box-shadow:
    inset -3px -3px 0 var(--mc-panel-lt),
    inset 3px 3px 0 var(--mc-stone-dk);
}

/* --- 标题栏 --- */
h1, h2, h3 {
  font-weight: bold;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  margin: 0 0 12px;
}

a { color: var(--mc-grass-lt); text-decoration: none; }
a:hover { color: var(--mc-exp); text-decoration: underline; }

/* --- 滚动条像素化 --- */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--mc-stone-dk); }
::-webkit-scrollbar-thumb {
  background: var(--mc-stone-lt);
  border: 3px solid var(--mc-stone-dk);
}
::-webkit-scrollbar-thumb:hover { background: var(--mc-panel-lt); }

/* --- 工具类 --- */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-16 { gap: 16px; }
.w-full { width: 100%; }
.muted { color: #555; font-size: 12px; }