/* Voxel Forge — custom styling layered on top of Tailwind utility classes.
   Kept here rather than inline so rarity colors and effects can be reused
   consistently by every screen (mining stage, inventory, marketplace, ledger). */

::selection { background: #4FD1C5; color: #12131A; }

body { background-image: radial-gradient(circle at 20% -10%, #1c2b33 0%, #12131A 45%); background-attachment: fixed; }

/* ---- Logo mark: three stacked voxel faces, drawn in pure CSS ---- */
.voxel-mark {
  --s: 22px;
  width: calc(var(--s) * 1.6);
  height: calc(var(--s) * 1.6);
  position: relative;
  display: inline-block;
}
.voxel-mark--sm { --s: 16px; }
.voxel-mark::before,
.voxel-mark::after {
  content: "";
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 3px;
}
.voxel-mark::before {
  top: 0; left: 6px;
  background: linear-gradient(135deg, #E8B84B, #C98F2A);
  transform: skew(-6deg, -6deg);
}
.voxel-mark::after {
  bottom: 0; left: 0;
  background: linear-gradient(135deg, #4FD1C5, #2FA79B);
  transform: skew(-6deg, -6deg);
}

/* ---- Rarity badges ---- */
.rarity-badge {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  letter-spacing: 0.02em;
}
.rarity-common    { color: #8B9AA8; }
.rarity-uncommon  { color: #4FD17A; }
.rarity-rare      { color: #4FA8E8; }
.rarity-epic      { color: #B07CE8; }
.rarity-legendary { color: #E8B84B; }

/* ---- Mining stage ---- */
.stage-glow { box-shadow: inset 0 0 60px -20px var(--stage-glow-color, transparent); transition: box-shadow .3s; }
#mined-flash.flash { animation: minedFlash 420ms ease-out; }
@keyframes minedFlash {
  0%   { background: radial-gradient(circle, rgba(232,184,75,0.55), transparent 70%); }
  100% { background: transparent; }
}

/* ---- Tabs ---- */
.tab-btn { color: #7C8194; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.tab-btn:hover { color: #C9CCD6; }
.tab-btn.active-tab { color: #EDEEF3; border-bottom-color: #4FD1C5; }

/* ---- Inventory tiles ---- */
.item-tile {
  background: #12131A;
  border: 1px solid #2E3142;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  text-align: center;
}
.item-tile:hover { border-color: #4FD1C5aa; transform: translateY(-1px); }
.item-tile img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.item-tile .count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #7C8194; }

.listing-tile.selected { border-color: #E8B84B; box-shadow: 0 0 0 1px #E8B84B inset; }

/* ---- Ledger rows ---- */
.ledger-row { display: grid; grid-template-columns: 28px 90px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; }
.ledger-row:nth-child(odd) { background: #ffffff05; }
.ledger-row.tampered { background: rgba(244, 63, 94, 0.12); outline: 1px solid rgba(244,63,94,.4); }

/* ---- Scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: #2E3142 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #2E3142; border-radius: 8px; }

/* ---- Upgrade cards ---- */
.upgrade-card { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; background: #12131A; border: 1px solid #2E3142; border-radius: 10px; padding: 8px 10px; }
.upgrade-card .upgrade-icon { width: 32px; height: 32px; border-radius: 8px; background: #23263380; display: flex; align-items: center; justify-content: center; color: #4FD1C5; }
.upgrade-card button.buy-btn { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 5px 10px; border-radius: 8px; background: #E8B84B; color: #12131A; font-weight: 600; transition: opacity .15s, transform .1s; }
.upgrade-card button.buy-btn:disabled { background: #2E3142; color: #6B7180; cursor: not-allowed; }
.upgrade-card button.buy-btn:not(:disabled):hover { transform: translateY(-1px); }
.upgrade-card .level-dots { font-size: 10px; color: #7C8194; font-family: 'JetBrains Mono', monospace; }

/* ---- Build screen palette ---- */
.palette-tile { background: #12131A; border: 1px solid #2E3142; border-radius: 10px; padding: 6px; cursor: pointer; text-align: center; transition: border-color .15s, transform .1s; }
.palette-tile:hover { border-color: #4FD1C5aa; }
.palette-tile.armed { border-color: #E8B84B; box-shadow: 0 0 0 1px #E8B84B inset; }
.palette-tile img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.palette-tile .count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #7C8194; }
#btn-build-erase.armed { border-color: #FB7185aa; color: #FB7185; background: rgba(244,63,94,0.08); }
#build-screen.flex { display: flex; }

/* ---- Toast ---- */
.toast-msg {
  background: #1B1D29; border: 1px solid #2E3142; color: #EDEEF3;
  font-size: 13px; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  animation: toastIn 180ms ease-out, toastOut 220ms ease-in 2.6s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

/* ---- Misc ---- */
.hidden-important { display: none !important; }