/* ═══════════════════════════════════════════
   VARIABLES, RESET, BASE
═══════════════════════════════════════════ */

:root {
  --mc-grass:    #55AA00;
  --mc-dirt:     #866040;
  --mc-stone:    #6C6C6C;
  --mc-stone-lt: #9B9B9B;
  --mc-wood:     #AC8A50;
  --mc-diamond:  #33DDFF;
  --mc-gold:     #FFAA00;
  --mc-emerald:  #17DD62;
  --mc-iron:     #C8C8C8;
  --mc-redstone: #FF3030;
  --mc-lapis:    #3333CC;
  --mc-coal:     #303030;
  --mc-bg:       #1A3A1A;
  --mc-sky:      #0D2B0D;
  --mc-panel:    #3C3C3C;
  --mc-panel-lt: #4C4C4C;
  --mc-border:   #1A1A1A;
  --mc-text:     #FFFFFF;
  --mc-text-dim: #AAAAAA;
  --mc-green-btn:#3D8C2F;
  --mc-green-btn-hover: #55AA00;
  --mc-red-btn:  #8C2F2F;
  --mc-gray-btn: #555555;
  --mc-gold-btn: #8C6A2F;
  --font-pixel:  'Press Start 2P', monospace;
  --font-vt:     'VT323', monospace;
}

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

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #0B1E0B;
  font-family: var(--font-pixel);
  color: var(--mc-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ─── SCREENS ─────────────────────────────── */
.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  overflow-y: auto;
}
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ─── PIXEL PANEL ─────────────────────────── */
.mc-panel {
  background: var(--mc-panel);
  border: 4px solid var(--mc-border);
  box-shadow:
    inset -4px -4px 0 #1A1A1A,
    inset 4px 4px 0 #5A5A5A;
  padding: 1rem;
}