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

:root {
  --stone-darkest: #1a1a1a;
  --stone-dark: #222222;
  --stone-mid: #333333;
  --stone-panel: #2a2a2a;
  --stone-border: #555555;
  --stone-light: #888888;
  --stone-lightest: #aaaaaa;

  --gold: #ffd700;
  --gold-dark: #b8860b;
  --emerald: #50c878;
  --emerald-dark: #2e8b57;
  --diamond: #5ab4e8;
  --netherite: #4a3f4a;
  --copper: #b87333;
  --iron: #c0c0c0;

  --accent: var(--emerald);
  --accent-dark: var(--emerald-dark);

  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'VT323', monospace;

  --panel-bg: #2c2c2c;
  --panel-border: 2px solid var(--stone-border);
  --inset-shadow: inset 2px 2px 0 #111, inset -2px -2px 0 #555;
  --btn-shadow: 2px 2px 0 #111;
  --radius: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* Standard */
}

body {
  background: var(--stone-darkest);
  background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(0, 0, 0, 0.15) 31px,
      rgba(0, 0, 0, 0.15) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 31px,
      rgba(0, 0, 0, 0.15) 31px,
      rgba(0, 0, 0, 0.15) 32px
    );
  color: #ddd;
  font-family: var(--font-pixel);
  font-size: 10px;
}

img {
  image-rendering: pixelated;
}

* {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  rotate: 270deg;
  z-index: 9999;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.8));
}

/* ─── TOP HUD BAR ─────────────────────────────────────────────────────────── */
#top {
  height: 56px;
  background: var(--stone-dark);
  border-bottom: 3px solid var(--stone-border);
  box-shadow: 0 3px 0 #111;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  position: relative;
  z-index: 100;
}

/* NAV BUTTONS */
.nbtn {
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 8px 12px;
  background: var(--stone-mid);
  color: #ccc;
  border: 2px solid var(--stone-border);
  border-bottom: 2px solid #111;
  border-right: 2px solid #111;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.1s, color 0.1s, transform 0.05s;
  position: relative;
}

.nbtn:hover {
  background: #444;
  color: #fff;
  border-color: var(--emerald);
}

.nbtn:active {
  transform: translate(1px, 1px);
  border-bottom: 2px solid var(--stone-border);
  border-right: 2px solid var(--stone-border);
}

#calibrate {
  margin-left: 4px;
  font-size: 7px;
  color: var(--stone-light) !important;
  border-style: dashed !important;
}

/* EMERALD DISPLAY */
#emeralds-display,
#value-display {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--stone-panel);
  border: 2px solid var(--stone-border);
  padding: 6px 14px 6px 8px;
  box-shadow: var(--inset-shadow);
}

#emeralds-display img,
#value-display img {
  width: 24px;
  height: 24px;
}
.tiny-img {
  width: 24px;
  height: 24px;
}
#emeralds,
#emeralds2 {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--emerald);
  text-shadow: 0 0 8px rgba(80, 200, 120, 0.5);
  min-width: 64px;
  text-align: right;
}

/* ─── BOTTOM AREA ─────────────────────────────────────────────────────────── */
#bottom {
  height: calc(100vh - 56px);
  position: relative;
  overflow: hidden;
}

.sect {
  height: 100%;
  display: none;
}

/* ─── MINE SECTION ────────────────────────────────────────────────────────── */
#mine_sect {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
}

#blockclick {
  position: relative;
  width: 256px;
  height: 256px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#blockclick::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 3px solid transparent;
  transition: border-color 0.15s;
}

#blockclick:hover::before {
  border-color: rgba(255, 255, 255, 0.2);
}

#block {
  display: block;
  transition: transform 0.08s, filter 0.08s;
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.6));
}

#blockclick:hover #block {
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.6)) brightness(1.15);
}

#blockclick:active #block {
  transform: scale(0.95);
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.6)) brightness(1.3);
}

.mine-hint {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--stone-light);
  letter-spacing: 2px;
  animation: blink 2s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

/* ─── CASE SECTION ────────────────────────────────────────────────────────── */
#case_sect {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

#cases_display {
  display: grid;
  grid-template-columns: repeat(3, 250px);
  grid-template-rows: repeat(2, auto);
  gap: 20px;
  justify-content: center;
}

.armor_case {
  font-family: var(--font-pixel);
  font-size: 11px;
  padding: 18px 32px;
  background: linear-gradient(180deg, #3a2a1a 0%, #2a1a0a 100%);
  color: var(--gold);
  border: 3px solid var(--gold-dark);
  border-bottom: 3px solid #5a4a00;
  border-right: 3px solid #5a4a00;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 4px 4px 0 #111;
  transition: transform 0.08s, box-shadow 0.08s;
  letter-spacing: 1px;
  width: 250px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.armor_case:hover {
  background: linear-gradient(180deg, #4a3a2a 0%, #3a2a1a 100%);
  border-color: var(--gold);
}

.armor_case:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #111;
}

.case-locked {
  font-family: var(--font-mono);
  font-size: 16px;
  color: #666;
  letter-spacing: 1px;
}

/* ─── FIGHT SECTION ───────────────────────────────────────────────────────── */
#fight_sect {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
}

.fight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}

.fight-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fight-slot label {
  font-size: 7px;
  color: var(--stone-lightest);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.fight-slot select,
#monster {
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 8px 10px;
  background: var(--stone-panel);
  color: #ddd;
  border: 2px solid var(--stone-border);
  width: 100%;
  box-shadow: var(--inset-shadow);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.fight-overview {
  width: 100%;
  max-width: 520px;
  height: 100px;
  border: 2px solid var(--stone-border);
  box-shadow: var(--inset-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ovbox {
  width: 25%;
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.ovbox h1 {
  font-size: 300%;
}
#winpercent h1 {
  font-size: 250%;
}

.fight-slot select:focus,
#monster:focus {
  outline: none;
  border-color: var(--emerald);
}

.monster-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 520px;
}

.monster-row label {
  font-size: 7px;
  color: var(--stone-lightest);
  text-transform: uppercase;
  letter-spacing: 2px;
}

#fight_btn {
  font-family: var(--font-pixel);
  font-size: 11px;
  padding: 14px 40px;
  background: linear-gradient(180deg, #4a0a0a 0%, #2e0606 100%);
  color: #ff6b6b;
  border: 3px solid #8a2a2a;
  border-bottom: 3px solid #1a0303;
  border-right: 3px solid #1a0303;
  box-shadow: 4px 4px 0 #111;
  letter-spacing: 2px;
  transition: transform 0.08s, box-shadow 0.08s;
  width: 100%;
  max-width: 520px;
}

#fight_btn:hover {
  background: linear-gradient(180deg, #5a1a1a 0%, #3e1616 100%);
  color: #ff9999;
  border-color: #aa4444;
}

#fight_btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #111;
}

/* ─── INVENTORY SECTION ───────────────────────────────────────────────────── */
#inventory_sect {
  display: flex;
  flex-direction: column; /* stack the buttons and the area vertically */
  height: 100%;
  overflow: hidden;
}

#inv_btns {
  display: flex;
  justify-content: left; /* or space-between if you prefer */
  gap: 8px;
  background: var(--stone-dark);
  border-bottom: 3px solid var(--stone-border);
  padding: 8px;
}

#item_area {
  display: flex;
  flex: 1; /* fill the remaining space below buttons */
  width: 100%;
  overflow: hidden;
}

#items_list {
  height: 100%;
  flex: 1;
  padding: 16px;
  background: var(--stone-darkest);
  border-right: 3px solid var(--stone-border);
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-y: auto !important;
}

#items_list::-webkit-scrollbar {
  width: 8px;
}
#items_list::-webkit-scrollbar-track {
  background: var(--stone-dark);
}
#items_list::-webkit-scrollbar-thumb {
  background: var(--stone-border);
}

.inv-slot {
  width: 80px;
  height: 80px;
  background: var(--stone-panel);
  border: 2px solid var(--stone-border);
  border-bottom: 2px solid #111;
  border-right: 2px solid #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.1s, background 0.1s;
  box-shadow: var(--inset-shadow);
  position: relative;
}

.db-bar {
  position: absolute;
  bottom: 2px;
  left: 2px;
  height: 3px;
  background-color: lightgreen;
}
@keyframes perfect-pulse {
  0% {
    box-shadow: 0 0 2px #00ff00;
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 10px #55ff55;
    filter: brightness(1.4);
  }
  100% {
    box-shadow: 0 0 2px #00ff00;
    filter: brightness(1);
  }
}

.is-perfect {
  animation: perfect-pulse 2s infinite ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.5); /* Optional: adds a "highlight" edge */
}
.inv-slot:hover {
  border-color: var(--emerald);
  background: #333;
}

.inv-slot img {
  width: 60px;
  height: 60px;
}

/* ─── ITEM DETAILS ────────────────────────────────────────────────────────── */
#item_details {
  width: 320px;
  flex-shrink: 0;
  padding: 24px 20px;
  background: var(--stone-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#item_details img#d_item {
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}

#s_name {
  font-size: 10px;
  color: #fff;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.6;
}

#s_durability {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--emerald);
  margin-bottom: 4px;
  text-align: center;
}

#s_trim {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--diamond);
  margin-bottom: 16px;
  text-align: center;
  text-transform: capitalize;
}

.detail-divider {
  width: 100%;
  height: 2px;
  background: var(--stone-border);
  margin: 12px 0 16px;
  box-shadow: 0 1px 0 #111;
}

#s_value {
  font-family: var(--font-pixel);
  font-size: 9px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #1a3a1a 0%, #0a2a0a 100%);
  color: var(--emerald);
  border: 2px solid var(--emerald-dark);
  border-bottom: 2px solid #041204;
  border-right: 2px solid #041204;
  box-shadow: 3px 3px 0 #111;
  letter-spacing: 1px;
  transition: transform 0.08s, box-shadow 0.08s;
  width: 100%;
  text-align: center;
}

#s_value:hover {
  background: linear-gradient(180deg, #2a4a2a 0%, #1a3a1a 100%);
  border-color: var(--emerald);
  color: #7fff7f;
}

#s_value:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #111;
}

/* ─── CASE OPEN SECTION ───────────────────────────────────────────────────── */
#case_open_sect {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

#wheel {
  margin-top: 0;
  height: 160px;
  width: 100%;
  background-color: var(--stone-dark);
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 127px,
    rgba(0, 0, 0, 0.3) 127px,
    rgba(0, 0, 0, 0.3) 128px
  );
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  border-top: 3px solid var(--stone-border);
  border-bottom: 3px solid var(--stone-border);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

#wheel > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin: 16px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: filter 0.3s;
}

#wheel img {
  width: 96px;
  height: 96px;
}

.bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 195px;
  z-index: 50;
  background: rgba(255, 60, 60, 0.9);
  box-shadow: 0 0 8px rgba(255, 60, 60, 0.6), 0 0 2px #fff;
  pointer-events: none;
}

.bar::before,
.bar::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
}

.bar::before {
  top: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid rgba(255, 60, 60, 0.9);
}

.bar::after {
  bottom: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid rgba(255, 60, 60, 0.9);
}

/* ─── TIER BACKGROUND COLORS (richer) ─────────────────────────────────────── */
.tier-copper {
  /* Dark Brown to your Copper #3d2a1a */
  background: linear-gradient(135deg, #1a120b 0%, #3d2a1a 100%) !important;
  border: 1px solid #5c4331;
}

.tier-chainmail {
  /* Charcoal to your Chainmail #2a2e2e */
  background: linear-gradient(135deg, #141616 0%, #2a2e2e 100%) !important;
  border: 1px solid #454a4a;
}

.tier-iron {
  /* Steel Blue-Grey to your Iron #2a2e38 */
  background: linear-gradient(135deg, #15171c 0%, #2a2e38 100%) !important;
  border: 1px solid #4a5161;
}

.tier-golden {
  /* Dark Amber to your Golden #3a3010 */
  background: linear-gradient(135deg, #1c1708 0%, #3a3010 100%) !important;
  border: 1px solid #635422;
}

.tier-diamond {
  /* Deep Navy to your Diamond #0e2a3a */
  background: linear-gradient(135deg, #051118 0%, #0e2a3a 100%) !important;
  border: 1px solid #1a4d69;
  box-shadow: inset 0 0 15px rgba(14, 42, 58, 0.5);
}

.tier-netherite {
  /* Deep Plum to your Netherite #2a1830 */
  background: linear-gradient(135deg, #130b16 0%, #2a1830 100%) !important;
  border: 1px solid #4d2d59;
  box-shadow: inset 0 0 15px rgba(42, 24, 48, 0.6);
}

/* ─── SECTION LABELS ──────────────────────────────────────────────────────── */
.section-label {
  font-size: 7px;
  color: var(--stone-light);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.6;
}

#settings_sect {
  display: none; /* Controlled by JS */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
}

#settings_sect h2 {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--stone-lightest);
  text-transform: uppercase;
  margin-bottom: 10px;
}

html,
body {
  height: 100%;
  overflow: hidden; /* Prevent the whole p#age from scrolling */
}

/* ------------------- STOCKS -------------------------------------------- */
#stocks_sect {
  display: none;
  height: 100%;
  overflow: hidden;
  padding: 16px;
}

.stocks-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-width: 0;
}

.stocks-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  min-width: 0;
}

.stock-metric {
  background: var(--stone-panel);
  border: 2px solid var(--stone-border);
  box-shadow: var(--inset-shadow);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.metric-label {
  font-size: 7px;
  color: var(--stone-lightest);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--emerald);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stocks-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.stocks-left,
.stocks-right {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.stocks-left {
  display: grid;
  grid-template-rows: 1.2fr auto auto;
  gap: 14px;
}

.stocks-right {
  display: flex;
  flex-direction: column;
}

.stocks-panel {
  background: var(--stone-panel);
  border: 2px solid var(--stone-border);
  box-shadow: var(--inset-shadow);
  padding: 12px;
  min-width: 0;
  min-height: 0;
}

.panel-title {
  font-size: 8px;
  color: var(--stone-lightest);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.stocks-table-panel {
  overflow: hidden;
}

.stocks-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100% - 18px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  min-width: 0;
}

.stock-row {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 0.75fr 0.4fr auto;
  gap: 8px;
  align-items: center;
  background: var(--stone-dark);
  border: 1px solid var(--stone-border);
  padding: 10px;
  transition: background 0.1s, border-color 0.1s;
  min-width: 0;
}

.stock-row:hover {
  background: #363636;
  border-color: var(--emerald);
}

.stock-row.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.25);
}

.stock-name,
.stock-price,
.stock-owned,
.stock-change {
  min-width: 0;
}

.stock-name {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-price,
.stock-owned,
.stock-change {
  font-family: var(--font-mono);
  font-size: 18px;
  white-space: nowrap;
}

.stock-price {
  color: var(--emerald);
}

.stock-owned {
  color: var(--diamond);
}

.stock-change.pos {
  color: #58ff88;
}

.stock-change.neg {
  color: #ff6b6b;
}

.stock-select-btn {
  font-family: var(--font-pixel);
  font-size: 7px;
  padding: 8px 10px;
  background: var(--stone-mid);
  color: #ddd;
  border: 2px solid var(--stone-border);
  white-space: nowrap;
}

.stock-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stock-detail-top {
  background: var(--stone-dark);
  border: 1px solid var(--stone-border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-name {
  font-size: 10px;
  color: #fff;
  text-transform: uppercase;
}

.selected-price {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--emerald);
}

.selected-change {
  font-family: var(--font-mono);
  font-size: 20px;
}

.selected-change.pos {
  color: #58ff88;
}

.selected-change.neg {
  color: #ff6b6b;
}

.holding-box {
  background: var(--stone-dark);
  border: 1px solid var(--stone-border);
  padding: 12px;
  display: grid;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: #ddd;
}

.trade-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
}

.trade-controls input {
  font-family: var(--font-mono);
  font-size: 18px;
  background: var(--stone-dark);
  color: #fff;
  border: 2px solid var(--stone-border);
  padding: 10px;
  box-shadow: var(--inset-shadow);
  min-width: 0;
}

.stock-buy {
  color: var(--emerald) !important;
}

.stock-sell {
  color: var(--gold) !important;
}

.trade-note {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--stone-light);
  line-height: 1.3;
}

.stocks-summary-panel {
  overflow: hidden;
}

.market-summary {
  font-family: var(--font-mono);
  font-size: 18px;
  color: #ddd;
  display: grid;
  gap: 8px;
}

.stocks-chart-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#stocks_chart {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.stock-row button:active,
.trade-controls button:active {
  transform: translate(1px, 1px);
}

.stocks-table::-webkit-scrollbar {
  width: 8px;
}
.stocks-table::-webkit-scrollbar-thumb {
  background: var(--stone-border);
}
.stocks-table::-webkit-scrollbar-track {
  background: var(--stone-dark);
}

#stocks_sect {
  width: 100%;
  box-sizing: border-box;
}

.stocks-shell,
.stocks-main,
.stocks-left,
.stocks-right,
.stocks-panel,
.stocks-chart-panel {
  min-width: 0;
  width: 100%;
}

#stocks_chart {
  width: 100%;
  height: 100%;
  min-height: 260px;
}

.stock-row {
  width: 100%;
}

/* ------------------- CASES -------------------------------
/* ─── CASE BUTTONS – tiered looks (1–6) ───────────────────────────────── */

/* CASE I — Copper/Stone: cracked earth texture, warm brown */
.case-i {
  background: #251810;
  border-color: #8b5e3c #3d1f0a #3d1f0a #8b5e3c;
  color: #d4a070;
  text-shadow: 2px 2px 0 #1a0a00;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
}
.case-i::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(0, 0, 0, 0.12) 8px,
    rgba(0, 0, 0, 0.12) 9px
  );
  pointer-events: none;
}
.case-i:hover {
  background: #321e14;
  border-color: #a07040 #4d2f1a #4d2f1a #a07040;
}
.case-i:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

/* CASE II — Chainmail: woven metal grid, cool gray */
.case-ii {
  background: #1c1e20;
  border-color: #888 #444 #444 #888;
  color: #c0c8d0;
  text-shadow: 2px 2px 0 #080a0c;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
}
.case-ii::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 5px,
      rgba(255, 255, 255, 0.03) 5px,
      rgba(255, 255, 255, 0.03) 6px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 5px,
      rgba(255, 255, 255, 0.03) 5px,
      rgba(255, 255, 255, 0.03) 6px
    );
  pointer-events: none;
}
.case-ii:hover {
  background: #262a2e;
  border-color: #a0a8b0 #606870 #606870 #a0a8b0;
}
.case-ii:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

/* CASE III — Iron+Gold forge: diagonal hatch, gold top shimmer */
.case-iii {
  background: #1e1a10;
  border-color: #c0a030 #706010 #706010 #c0a030;
  color: #f0d060;
  text-shadow: 2px 2px 0 #0a0800;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
}
.case-iii::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #d4a020 30%,
    #ffd700 50%,
    #d4a020 70%,
    transparent
  );
  pointer-events: none;
}
.case-iii::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    rgba(180, 120, 0, 0.05) 12px,
    rgba(180, 120, 0, 0.05) 13px
  );
  pointer-events: none;
}
.case-iii:hover {
  background: #2a2418;
  border-color: #e0c040 #908030 #908030 #e0c040;
}
.case-iii:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

/* CASE IV — Diamond: crystal lattice, icy blue shimmer on bottom */
.case-iv {
  background: #091420;
  border-color: #3a90c0 #143050 #143050 #3a90c0;
  color: #c0eaff;
  text-shadow: 2px 2px 0 #020810;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
}
.case-iv::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      60deg,
      transparent,
      transparent 14px,
      rgba(90, 180, 232, 0.06) 14px,
      rgba(90, 180, 232, 0.06) 15px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 14px,
      rgba(90, 180, 232, 0.04) 14px,
      rgba(90, 180, 232, 0.04) 15px
    );
  pointer-events: none;
}
.case-iv::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #5ab4e8 40%,
    #aee6ff 50%,
    #5ab4e8 60%,
    transparent
  );
  pointer-events: none;
}
.case-iv:hover {
  background: #0d1e30;
  border-color: #5ab4e8 #1e4878 #1e4878 #5ab4e8;
}
.case-iv:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

/* CASE V — Netherite rising: void black, purple-magenta cracks on top */
.case-v {
  background: #100810;
  border-color: #7a3a8a #3a1040 #3a1040 #7a3a8a;
  color: #e0a0f0;
  text-shadow: 2px 2px 0 #080008;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
}
.case-v::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      25deg,
      transparent,
      transparent 18px,
      rgba(120, 40, 140, 0.08) 18px,
      rgba(120, 40, 140, 0.08) 19px
    ),
    repeating-linear-gradient(
      -25deg,
      transparent,
      transparent 18px,
      rgba(80, 20, 100, 0.06) 18px,
      rgba(80, 20, 100, 0.06) 19px
    );
  pointer-events: none;
}
.case-v::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    #8b3a9a 20%,
    #ff60ff 50%,
    #8b3a9a 80%,
    transparent
  );
  pointer-events: none;
}
.case-v:hover {
  background: #180c18;
  border-color: #9a4aaa #5a2060 #5a2060 #9a4aaa;
}
.case-v:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

/* CASE VI — Ancient: void obsidian, purple-green cursed accents */
.case-vi {
  background: #07050a;
  border-color: #6a3a8a #1a0a2a #1a0a2a #6a3a8a;
  color: #d0b0f0;
  text-shadow: 2px 2px 0 #05020a;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
}

/* Subtle rune grid — very faint, dual-tone purple+green */
.case-vi::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 15px,
      rgba(100, 40, 140, 0.07) 15px,
      rgba(100, 40, 140, 0.07) 16px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 15px,
      rgba(60, 180, 80, 0.04) 15px,
      rgba(60, 180, 80, 0.04) 16px
    );
  pointer-events: none;
}

/* Left edge: cursed purple pulse, bleeds into a green tip at the bottom */
.case-vi::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent,
    #7a30a0 25%,
    #9a40c0 50%,
    #3a9a50 75%,
    transparent
  );
  pointer-events: none;
}

.case-vi:hover {
  background: #0d0814;
  border-color: #8a50aa #2a1040 #2a1040 #8a50aa;
}

.case-vi:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}