@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

:root {
  --mc-grass: #7CB342;
  --mc-grass-dark: #556B2F;
  --mc-dirt: #8B4513;
  --mc-dirt-dark: #5D2F0C;
  --mc-stone: #6D6D6D;
  --mc-stone-dark: #3D3D3D;
  --mc-cobble: #828282;
  --mc-sky: #87CEEB;
  --mc-night: #1a1a2e;
  --mc-deep: #0d0d1a;
  --mc-gold: #FCD12A;
  --mc-diamond: #4AEDF4;
  --mc-redstone: #FF3030;
  --mc-emerald: #17DD62;
  --mc-iron: #D8D8D8;
  --mc-coal: #1A1A1A;
  --mc-obsidian: #1C1C3A;
  --mc-netherrack: #B22222;
  --mc-wood: #B8860B;
  --mc-wood-plank: #C19A6B;
  --mc-bg: #2C2C2C;
  --mc-panel: #3D3D3D;
  --mc-panel-light: #4A4A4A;
  --mc-border-light: #565656;
  --mc-border-dark: #1A1A1A;
  --mc-text: #FFFFFF;
  --mc-text-dim: #A0A0A0;
  --mc-text-shadow: #3D3D3D;
}

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

body {
  font-family: 'VT323', 'Consolas', monospace;
  background: var(--mc-bg);
  color: var(--mc-text);
  min-height: 100vh;
  font-size: 18px;
  image-rendering: pixelated;
}

h1, h2, h3, .pixel-font {
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 1px;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }

.mc-text-shadow {
  text-shadow: 2px 2px 0 var(--mc-text-shadow);
}

.mc-panel {
  background: var(--mc-panel);
  border: 2px solid var(--mc-border-dark);
  box-shadow:
    inset 2px 2px 0 var(--mc-border-light),
    inset -2px -2px 0 var(--mc-border-dark);
  padding: 20px;
}

.mc-btn {
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 10px 16px;
  border: 2px solid var(--mc-border-dark);
  cursor: pointer;
  color: var(--mc-text);
  text-shadow: 1px 1px 0 var(--mc-text-shadow);
  transition: none;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.2),
    inset -2px -2px 0 rgba(0,0,0,0.3);
  display: inline-block;
}

.mc-btn:hover {
  filter: brightness(1.15);
}

.mc-btn:active {
  box-shadow:
    inset -2px -2px 0 rgba(255,255,255,0.2),
    inset 2px 2px 0 rgba(0,0,0,0.3);
  transform: translate(1px, 1px);
}

.mc-btn-primary { background: var(--mc-grass); }
.mc-btn-secondary { background: var(--mc-stone); }
.mc-btn-danger { background: var(--mc-redstone); }
.mc-btn-gold { background: var(--mc-gold); color: var(--mc-coal); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); }

.mc-input {
  width: 100%;
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 10px 12px;
  background: var(--mc-coal);
  color: var(--mc-text);
  border: 2px solid var(--mc-border-dark);
  box-shadow:
    inset 2px 2px 0 rgba(0,0,0,0.5),
    inset -2px -2px 0 rgba(255,255,255,0.1);
}

.mc-input::placeholder { color: var(--mc-text-dim); }
.mc-input:focus { outline: none; border-color: var(--mc-grass); }

.mc-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 14px;
  border: 1px solid var(--mc-border-dark);
  text-shadow: 1px 1px 0 var(--mc-text-shadow);
}

.mc-tag-grass { background: var(--mc-grass); }
.mc-tag-dirt { background: var(--mc-dirt); }
.mc-tag-stone { background: var(--mc-stone); }
.mc-tag-gold { background: var(--mc-gold); color: var(--mc-coal); text-shadow: none; }
.mc-tag-diamond { background: var(--mc-diamond); color: var(--mc-coal); text-shadow: none; }
.mc-tag-redstone { background: var(--mc-redstone); }
.mc-tag-wood { background: var(--mc-wood); }
.mc-tag-emerald { background: var(--mc-emerald); }

.mc-card {
  background: var(--mc-panel);
  border: 2px solid var(--mc-border-dark);
  box-shadow:
    inset 2px 2px 0 var(--mc-border-light),
    inset -2px -2px 0 var(--mc-border-dark);
  padding: 16px;
  cursor: pointer;
}

.mc-card:hover {
  background: var(--mc-panel-light);
}

.mc-difficulty-easy { background: var(--mc-grass); color: var(--mc-text); text-shadow: 1px 1px 0 var(--mc-text-shadow); }
.mc-difficulty-medium { background: var(--mc-gold); color: var(--mc-coal); text-shadow: none; }
.mc-difficulty-hard { background: var(--mc-redstone); color: var(--mc-text); text-shadow: 1px 1px 0 var(--mc-text-shadow); }

.mc-scrollbar::-webkit-scrollbar { width: 12px; }
.mc-scrollbar::-webkit-scrollbar-track { background: var(--mc-coal); }
.mc-scrollbar::-webkit-scrollbar-thumb {
  background: var(--mc-stone);
  border: 2px solid var(--mc-border-dark);
}
.mc-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--mc-stone-dark); }

.mc-bg-dirt {
  background-color: var(--mc-dirt);
  background-image:
    linear-gradient(45deg, var(--mc-dirt-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--mc-dirt-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--mc-dirt-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--mc-dirt-dark) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.mc-bg-stone {
  background-color: var(--mc-stone);
  background-image:
    linear-gradient(45deg, var(--mc-stone-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--mc-stone-dark) 25%, transparent 25%);
  background-size: 24px 24px;
}

.mc-divider {
  height: 2px;
  background: var(--mc-border-dark);
  box-shadow: 0 1px 0 var(--mc-border-light);
  margin: 12px 0;
}

.mc-error {
  color: var(--mc-redstone);
  text-shadow: 1px 1px 0 var(--mc-text-shadow);
  padding: 8px;
  background: rgba(255,48,48,0.15);
  border: 1px solid var(--mc-redstone);
}

.mc-success {
  color: var(--mc-emerald);
  text-shadow: 1px 1px 0 var(--mc-text-shadow);
  padding: 8px;
  background: rgba(23,221,98,0.15);
  border: 1px solid var(--mc-emerald);
}

.mc-code-block {
  background: var(--mc-coal);
  border: 2px solid var(--mc-border-dark);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5);
  padding: 12px;
  overflow-x: auto;
}

.mc-code-block .filename {
  font-family: 'VT323', monospace;
  color: var(--mc-gold);
  font-size: 16px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mc-stone-dark);
}

.mc-code-block pre { margin: 0; }
.mc-code-block code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mc-iron);
}
.mc-code-block code .keyword { color: #569cd6; }
.mc-code-block code .string { color: var(--mc-gold); }
.mc-code-block code .number { color: var(--mc-diamond); }
.mc-code-block code .comment { color: var(--mc-grass); }

.mc-file-item {
  padding: 6px 8px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--mc-iron);
  border-left: 3px solid transparent;
}

.mc-file-item:hover {
  background: var(--mc-stone-dark);
  color: var(--mc-text);
}

.mc-file-item.active {
  background: var(--mc-grass-dark);
  border-left-color: var(--mc-grass);
  color: var(--mc-text);
}

.mc-step-item {
  padding: 10px 12px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--mc-text-dim);
  border-left: 3px solid transparent;
  margin-bottom: 2px;
}

.mc-step-item:hover {
  background: var(--mc-stone-dark);
  color: var(--mc-text);
}

.mc-step-item.active {
  background: var(--mc-grass-dark);
  border-left-color: var(--mc-grass);
  color: var(--mc-text);
}