/* ============================================================
   ui_theme.css — Bixie pixel UI design tokens.
   Loaded BEFORE voxel.css so every selector can reference these
   custom properties. Tokens live on :root so cascaded selectors
   in voxel.css (and the wave-N override blocks at the bottom of
   voxel.css) pick them up automatically.

   Design language (deliberately distinct from this build):
     - 8x8 chunky pixel aesthetic
     - signature 4-color box-shadow inset bevel on every surface
     - cool slate body palette + warm gold accent
     - bevel-light on TOP+LEFT, bevel-dark on BOTTOM+RIGHT
     - pressed buttons invert that bevel direction
     - no border-radius, no smooth gradients, no soft shadows
   ============================================================ */
:root {
  /* ---- Color palette ----------------------------------------
     Cool slate body so the warm in-world textures (dirt, wood,
     sand) pop against the chrome. Gold accent picked to read
     against both --ui-bg-deep AND the bright sky behind any
     HUD element. */
  --ui-bg-deep:     #1a1c25;   /* darkest panel background */
  --ui-bg-mid:      #2a2c38;   /* mid panels (slot grid background) */
  --ui-bg-up:       #3a3d4c;   /* raised surface (button face, slot face) */
  --ui-bg-up-hover: #4a4e60;   /* hover state of raised surface */
  --ui-bevel-light: #5a5e72;   /* top/left bevel highlight */
  --ui-bevel-dark:  #0a0b12;   /* bottom/right bevel shadow */
  --ui-bevel-mid:   #20222c;   /* inner pocket darkness for slots */
  --ui-divider:     #14151c;   /* 1-px hairlines between sections */

  --ui-text:        #e8e4d0;   /* warm off-white body text */
  --ui-text-dim:    #9b977f;   /* secondary text */
  --ui-text-shadow: #0a0b12;   /* drop-shadow color under all pixel text */

  --ui-accent:      #f0c060;   /* warm gold for selection / focus */
  --ui-accent-hi:   #ffe39a;   /* gold highlight (hover/press top) */
  --ui-accent-deep: #b08038;   /* gold shadow */
  --ui-danger:      #e84a4a;   /* health depleted, error border */
  --ui-danger-deep: #8a1818;
  --ui-success:     #6cc66c;
  --ui-success-deep:#2a6a2a;
  --ui-info:        #6cb6e8;   /* XP / progress fills */
  --ui-info-deep:   #2a5c8a;

  /* ---- Sizes (all multiples of 2 for pixel-perfect rendering) */
  --slot-size:      44px;
  --slot-gap:        4px;
  --bevel:           2px;       /* thickness of bevel edges */
  --pixel:           2px;       /* one "chunky pixel" unit */
  --panel-pad:      12px;

  /* ---- Type ---------------------------------------------------
     Stick with the system pixel fallbacks — we don't ship a
     custom font. image-rendering:pixelated keeps rasterised
     glyphs crisp on retina. */
  --ui-font-pixel:
      'Press Start 2P', 'VT323', 'Courier New',
      ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui-font-body:
      'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   Reusable atoms.
   Apply .ui-panel to any container that wants the signature
   inset-bevel look. The bevel is a single multi-stop box-shadow
   so it doesn't fight border layout.
   ============================================================ */
.ui-panel {
  background-color: var(--ui-bg-mid);
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  border: 0;
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
}
.ui-panel-deep {
  /* Sunken inner surface — used for the slot-grid backplate so
     slots themselves can sit raised within. Bevel direction is
     reversed: dark top-left, light bottom-right. */
  background-color: var(--ui-bg-deep);
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  border: 0;
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}

/* ============================================================
   Reusable button. Pressed state inverts the bevel so it reads
   as physically depressed. Disabled state desaturates + drops
   the bevel entirely.
   ============================================================ */
.ui-btn {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--ui-bg-up);
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: none;
  border: 0;
  border-radius: 0;
  padding: 10px 18px;
  cursor: pointer;
  image-rendering: pixelated;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
  transition: none;
  outline: 0;
}
.ui-btn:hover:not(:disabled):not(.disabled) {
  background-color: var(--ui-bg-up-hover);
  color: var(--ui-accent-hi);
}
.ui-btn:active:not(:disabled):not(.disabled),
.ui-btn.pressed {
  background-color: var(--ui-bg-mid);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
.ui-btn:disabled,
.ui-btn.disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.6);
}
.ui-btn:focus-visible {
  outline: var(--pixel) solid var(--ui-accent);
  outline-offset: var(--pixel);
}
.ui-btn.primary {
  background-color: var(--ui-accent-deep);
  color: var(--ui-text);
}
.ui-btn.primary:hover:not(:disabled) {
  background-color: var(--ui-accent);
  color: var(--ui-bg-deep);
}
.ui-btn.danger {
  background-color: var(--ui-danger-deep);
  color: var(--ui-text);
}
.ui-btn.danger:hover:not(:disabled) {
  background-color: var(--ui-danger);
  color: var(--ui-text);
}

/* ============================================================
   Reusable slot — the inventory/hotbar building block.
   ============================================================ */
.ui-slot {
  position: relative;
  width: var(--slot-size);
  height: var(--slot-size);
  background-color: var(--ui-bg-mid);
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Sunken pocket: dark top-left, light bottom-right. */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
.ui-slot:hover {
  background-color: var(--ui-bg-up);
}
.ui-slot.selected {
  background-color: var(--ui-bg-up);
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-accent-deep);
}

/* ============================================================
   Text utility — chunky pixel text with a 2-px drop-shadow.
   ============================================================ */
.ui-pixel-text {
  font-family: var(--ui-font-pixel);
  color: var(--ui-text);
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
  letter-spacing: 0.04em;
  image-rendering: pixelated;
}
.ui-pixel-text.gold  { color: var(--ui-accent); }
.ui-pixel-text.dim   { color: var(--ui-text-dim); }
.ui-pixel-text.danger { color: var(--ui-danger); }

/* ============================================================
   Pixel-bevel keyboard key cap (replaces ad-hoc <kbd> styles).
   ============================================================ */
.ui-kbd {
  display: inline-block;
  background-color: var(--ui-bg-up);
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  margin: 0 2px;
  border: 0;
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--pixel)  var(--pixel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--pixel)) calc(-1 * var(--pixel)) 0 var(--ui-bevel-dark);
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
}