:root {
  --soot: #140e0b;
  --bench: #221a14;
  --bench2: #2b2119;
  --line: #3d3128;
  --paper: #efe6d4;
  --dim: #a69682;
  --assay: #e4b451;
  --heat: #ff6b2b;
  --verdi: #8fae94;
  --bad: #d96a5a;
  --radius: 14px;

  /* Rarity Colors */
  --rarity-common: #a0a0a0;
  --rarity-uncommon: #4ade80;
  --rarity-rare: #38bdf8;
  --rarity-epic: #c084fc;
  --rarity-legendary: #facc15;
  --rarity-mythic: #f43f5e;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--soot);
  background-image: repeating-conic-gradient(rgba(0,0,0,0.03) 0%, rgba(255,255,255,0.01) 10%, rgba(0,0,0,0.03) 20%), radial-gradient(1200px 800px at 50% 100%, rgba(255, 107, 43, 0.06) 0%, transparent 60%);
  color: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.skip-to-content-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #fff;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  outline: 2px solid var(--assay);
}

.skip-to-content-link:focus {
  left: 0;
}

.smelt-page {
  background: var(--soot);
  background-image: radial-gradient(1200px 500px at 50% -10%, rgba(42, 32, 24, 0.4) 0%, transparent 60%);
  color: var(--paper);
  min-height: 100vh;
  padding: 24px 16px 80px;
}

.smelt-page .wrap {
  max-width: 900px;
  margin: 0 auto;
}

/* BRAND CREST & EYEBROW */
.brand-crest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.crest-sparkle {
  color: var(--assay);
  font-size: 10px;
}

.smelt-page .eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .24em;
  color: var(--assay);
  text-transform: uppercase;
  font-weight: 600;
}

.smelt-page .h1-by {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .44em;
  color: var(--assay);
  margin-top: 6px;
  text-transform: uppercase;
}

.smelt-page h1 {
  font-family: 'Cinzel', 'Marcellus', serif;
  font-weight: 700;
  font-size: clamp(32px, 5.2vw, 48px);
  letter-spacing: .08em;
  margin-top: 6px;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0,0,0,0.8), 0 0 20px rgba(228, 180, 81, 0.2);
  background: linear-gradient(135deg, #ffffff 20%, #e4b451 40%, #ffffff 60%, #e4b451 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s linear infinite;
}

.smelt-page .sub {
  color: var(--dim);
  font-size: 14.5px;
  max-width: 560px;
  margin: 8px 0 0;
  line-height: 1.5;
}

/* MASTHEAD CONTAINER */
.smelt-page .masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, rgba(30, 22, 16, 0.92) 0%, rgba(18, 12, 9, 0.96) 100%),
              radial-gradient(circle at 90% 10%, rgba(228, 180, 81, 0.22), transparent 60%);
  border: 1px solid rgba(228, 180, 81, 0.3);
  border-radius: 20px;
  padding: 26px 26px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08);
  position: relative;
  overflow: visible;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08), inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

.smelt-page .masthead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--assay), transparent);
}

.smelt-page .masthead-text {
  flex: 1;
  min-width: 0;
}

/* LUXURY MASTER PORTRAIT CHARACTER CARD */
.hero-wrapper {
  flex: none;
}

.master-portrait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(43, 33, 25, 0.8), rgba(20, 14, 10, 0.9));
  border: 1px solid rgba(228, 180, 81, 0.4);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 15px rgba(228, 180, 81, 0.15);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.master-portrait-card:hover {
  transform: translateY(-2px);
  border-color: var(--assay);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 25px rgba(228, 180, 81, 0.3);
}

.portrait-ring {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #f0c25c, #7a5a1f, #c8922f);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

.master-portrait-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: radial-gradient(circle at 50% 38%, #37291d, #1e1710);
  border: 2px solid #140e0b;
}

.online-pulse-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #140e0b;
  box-shadow: 0 0 10px #22c55e;
  animation: pulseGreenGlow 1.5s infinite alternate;
}

@keyframes pulseGreenGlow {
  from { box-shadow: 0 0 4px #22c55e; }
  to { box-shadow: 0 0 12px #22c55e; }
}

.master-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.master-name {
  font-family: 'Marcellus', serif;
  font-size: 14px;
  color: var(--paper);
  letter-spacing: .06em;
  font-weight: 600;
}

.master-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--assay);
  text-transform: uppercase;
}

.status-dot {
  color: #22c55e;
  font-size: 10px;
  margin-right: 2px;
}

/* Player Level 1-100 & XP Bar */
.player-rank-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.rank-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #7a5a1f, #c8922f);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--assay);
  box-shadow: 0 2px 8px rgba(228, 180, 81, 0.3);
}

.xp-container {
  flex: 1;
  min-width: 140px;
  height: 18px;
  background: #110b08;
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.xp-fill {\n  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 10px, transparent 10px, transparent 20px);\n  background-size: 28px 28px;\n  animation: stripeMove 1s linear infinite;
  height: 100%;
  background: linear-gradient(90deg, #e4b451, #facc15);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
}

.xp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.sound-toggle-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bench2);
  color: var(--dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sound-toggle-btn:hover {
  color: var(--paper);
  border-color: var(--assay);
}

/* DAILY QUEST BANNER */
.daily-quest-banner {
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.quest-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--assay);
  font-weight: 700;
}

.quest-reward-badge {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  border: 1px solid #4ade80;
  padding: 2px 8px;
  border-radius: 10px;
}

.quest-desc {
  font-size: 12px;
  color: var(--paper);
  margin-top: 6px;
}

.quest-progress-bar {
  margin-top: 8px;
  height: 14px;
  background: #110b08;
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.quest-progress-fill {\n  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 10px, transparent 10px, transparent 20px);\n  background-size: 28px 28px;\n  animation: stripeMove 1s linear infinite;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #4ade80);
  transition: width 0.4s ease;
}

.quest-progress-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  color: #fff;
  font-weight: 600;
}

/* Tabs Navigation */
.game-tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  overflow-x: auto;
}

.tab-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .06em;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.tab-btn:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.04);
}

.tab-btn.active {\n  position: relative;
  color: var(--assay);
  background: var(--bench);
  border-color: var(--line);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Rule Label */
.smelt-page .rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 18px;
  color: var(--line);
}

.smelt-page .rule::before, 
.smelt-page .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--assay), transparent);
}

.smelt-page .rule span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--dim);
  text-transform: uppercase;
}

/* REAL-LIFE PRIZE REWARD BANNER */
.prize-banner {
  background: linear-gradient(135deg, rgba(35, 25, 18, 0.95), rgba(20, 14, 10, 0.98));
  border: 2px solid var(--assay);
  border-radius: 16px;
  padding: 22px 20px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(228, 180, 81, 0.1);
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08), inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

.prize-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  background: rgba(250, 204, 21, 0.2);
  color: var(--assay);
  border: 1px solid var(--assay);
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
}

.prize-body h3 {
  font-family: 'Marcellus', serif;
  font-size: 20px;
  color: var(--paper);
  margin-bottom: 6px;
  line-height: 1.3;
}

.prize-body p {
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
  max-width: 680px;
}

.prize-progress-bar {
  margin-top: 16px;
  height: 22px;
  background: #110b08;
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.prize-progress-fill {\n  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 10px, transparent 10px, transparent 20px);\n  background-size: 28px 28px;\n  animation: stripeMove 1s linear infinite;
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #facc15);
  transition: width 0.5s ease;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
}

.prize-progress-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.claim-btn-wrapper {
  margin-top: 16px;
  cursor: pointer;
  pointer-events: auto;
}

.btn-claim-prize {
  width: 100%;
  appearance: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 14px 20px;
  border-radius: 12px;
  text-transform: uppercase;
  transition: all 0.25s ease;
  pointer-events: none;
}

.btn-claim-prize.locked {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--line);
  color: var(--dim);
  opacity: 0.8;
}

.btn-claim-prize.unlocked {
  background: linear-gradient(135deg, #22c55e, #15803d);
  border: 1px solid #4ade80;
  color: #ffffff;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
  animation: pulseGreen 1.5s infinite alternate;
}

.btn-claim-prize.unlocked:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(34, 197, 94, 0.6);
}

@keyframes pulseGreen {
  from { box-shadow: 0 0 15px rgba(34, 197, 94, 0.4); }
  to { box-shadow: 0 0 30px rgba(34, 197, 94, 0.8); }
}

/* Shelf & Wood Bench Container */
.shelf-wrapper {
  position: relative;
  margin-bottom: 24px;
  background: linear-gradient(180deg, rgba(30, 22, 16, 0.95) 0%, rgba(20, 14, 10, 0.98) 100%), repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 2px, transparent 2px, transparent 4px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 14px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08), inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

.smelt-page .shelf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 12px;
  position: relative;
  z-index: 2;
}

.wood-bench-ledge {
  height: 12px;
  background: linear-gradient(180deg, #523b28 0%, #302115 100%);
  border-top: 2px solid #78583d;
  border-bottom: 1px solid #1a110a;
  border-radius: 4px;
  margin-top: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  position: relative;
  z-index: 1;
}

.smelt-page .jar {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 12px;
  border-radius: 14px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.smelt-page .jar:hover {\n  transform: translateY(-3px) rotateX(5deg) rotateY(2deg);\n  perspective: 100px;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(228, 180, 81, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6), 0 0 14px rgba(228, 180, 81, 0.2);
}

.smelt-page .jar.pouring {
  transform: translateY(3px) scale(0.96);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
  border-color: var(--heat);
}

.smelt-page .jar-glass {
  width: min(80px, 100%);
  height: 90px;
  border-radius: 12px 12px 16px 16px;
  border: 2px solid rgba(255, 255, 255, .28);
  background: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .03) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .7), 0 6px 14px rgba(0,0,0,0.4);
}

.smelt-page .jar-glass::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 8%;
  right: 8%;
  height: 10px;
  background: linear-gradient(180deg, #5c5044, #3d332a);
  border-radius: 4px;
  border: 1px solid #756657;
  z-index: 3;
}

.smelt-page .jar-glass::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 8%;
  width: 22%;
  height: 72%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
  border-radius: 40%;
  z-index: 3;
  pointer-events: none;
}

.smelt-page .jar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78%;
  background-repeat: repeat;
  transition: transform .15s ease;
  z-index: 1;
}

.smelt-page .jar-name {
  font-family: 'Marcellus', serif;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.smelt-page .jar-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--dim);
  text-align: center;
  line-height: 1.4;
}

.smelt-page .hint {
  text-align: center;
  color: var(--dim);
  font-size: 12.5px;
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
}

/* Canvas Tray Container */
.tray-canvas-container {
  margin-top: 10px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.smelt-page #trayCanvas {
  display: block;
  width: 100%;
  height: 280px;
  touch-action: pan-y;
  background: var(--bench);
}

/* Scale & Control Tray */
.smelt-page .tray {
  background: var(--bench);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08), inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

.smelt-page .tray-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.smelt-page .tray-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--dim);
  text-transform: uppercase;
}

.smelt-page .readout {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 600;
  color: var(--assay);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 4px;
  transition: color 0.2s ease;
}

.smelt-page .readout small {
  font-size: .42em;
  color: var(--dim);
  font-weight: 400;
  margin-left: 6px;
}

.smelt-page .readout.maxed {
  color: var(--bad);
  animation: pulseMax 0.4s ease infinite alternate;
}

@keyframes pulseMax {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

.smelt-page .melt-readout {
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1;
}

.smelt-page .melt-readout #meltValue {
  font-size: 22px;
  color: var(--assay);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.smelt-page .melt-readout small {
  display: block;
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Mix Prediction Hint Bar */
.mix-prediction-hint {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px dashed var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--assay);
  display: flex;
  align-items: center;
  gap: 8px;
}

.smelt-page .propbar {
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  background: #151009;
  margin-top: 14px;
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.smelt-page .propbar div {
  height: 100%;
  transition: width .18s ease;
}

.smelt-page .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  min-height: 34px;
}

.smelt-page .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  background: var(--bench2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 6px 6px 10px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.smelt-page .chip .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 6px rgba(255,255,255,0.3);
}

.smelt-page .chip button {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--dim);
  font-size: 11px;
  line-height: 1;
  display: grid;
  place-items: center;
  font-family: inherit;
  transition: all 0.15s ease;
}

.smelt-page .chip button:hover {
  background: rgba(217, 106, 90, 0.4);
  color: #fff;
}

.smelt-page .actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.smelt-page .btn {
  appearance: none;
  cursor: pointer;
  font-family: 'Marcellus', serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 15px;
  border-radius: 10px;
  padding: 14px 26px;
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease, color .15s ease;
  pointer-events: auto;
}

.smelt-page .btn-smelt {
  flex: 1;
  min-width: 180px;
  border: 1px solid #7a5a1f;
  background: linear-gradient(135deg, #f0c25c, #c8922f);
  color: #241a08;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(228, 180, 81, .3);
}

.smelt-page .btn-smelt:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(228, 180, 81, .5);
}

.smelt-page .btn-smelt:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.smelt-page .btn-clear {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
}

.smelt-page .btn-clear:hover {
  color: var(--paper);
  border-color: var(--dim);
  background: rgba(255,255,255,0.04);
}

/* Floating XP Delta Toast Badge */
.xp-delta-toast {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: .08em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.xp-positive {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  border: 1px solid #4ade80;
}

.xp-negative {
  background: rgba(244, 63, 94, 0.2);
  color: #f43f5e;
  border: 1px solid #f43f5e;
}

/* Smelting Furnace Stage & Heat Meter */
.smelt-page #stage {
  margin-top: 30px;
}

.smelt-page .crucible-scene {
  background: var(--bench);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

.smelt-page .crucible-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px 220px at 50% 78%, rgba(255, 107, 43, .28), transparent 70%);
  animation: heat 1s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heat {
  from { opacity: .55; }
  to { opacity: 1; }
}

.smelt-page #smeltCanvas {
  position: relative;
  display: block;
  width: 100%;
  height: 320px;
  border-radius: 12px;
  background: #171009;
}

.smelt-page .smelt-status {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--heat);
  text-shadow: 0 0 10px rgba(255,107,43,0.5);
  margin-top: 6px;
}

/* FURNACE HEAT OVERDRIVE & QUENCH TIMING */
.heat-meter-card {
  width: 100%;
  max-width: 500px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 10px;
  position: relative;
  z-index: 5;
}

.heat-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

.heat-temp-text {
  color: var(--heat);
  font-weight: 700;
}

.heat-meter-bar {
  margin-top: 8px;
  height: 18px;
  background: #110b08;
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.heat-bar-fill {\n  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 10px, transparent 10px, transparent 20px);\n  background-size: 28px 28px;\n  animation: stripeMove 1s linear infinite;
  height: 100%;
  background: linear-gradient(90deg, #f97316, #ef4444);
  transition: width 0.1s linear;
}

.quench-sweetspot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 78%;
  width: 18%;
  background: rgba(74, 222, 128, 0.4);
  border-left: 2px dashed #4ade80;
  border-right: 2px dashed #4ade80;
  z-index: 2;
}

.btn-quench-timing {
  margin-top: 12px;
  width: 100%;
  appearance: none;
  border: 1px solid #4ade80;
  background: linear-gradient(135deg, #22c55e, #166534);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
  animation: pulseGreen 0.8s infinite alternate;
}

.btn-quench-timing:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none;
}

.smelt-page .cameo {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 64px;
  height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 50%;
  border: 2px solid var(--assay);
  object-fit: cover;
  z-index: 10;
  background: radial-gradient(circle at 50% 38%, #37291d, #1e1710);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}

.smelt-page .cameo.react {
  animation: cameoPop .45s cubic-bezier(.2, 1.6, .4, 1) both;
}

@keyframes cameoPop {
  0% { transform: scale(.65); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Recipe Codex Grid */
.codex-header {
  margin-bottom: 18px;
}

.codex-header h2 {
  font-family: 'Marcellus', serif;
  font-size: 24px;
  color: var(--paper);
}

.codex-header p {
  color: var(--dim);
  font-size: 13px;
  margin-top: 4px;
}

.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.codex-card {
  background: var(--bench);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.codex-card.locked {
  filter: grayscale(0.8) brightness(0.7);
  background: #110b08;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.codex-card.unlocked {
  border-color: rgba(228, 180, 81, 0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.codex-rarity-badge {
  align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.rarity-common { background: rgba(160, 160, 160, 0.2); color: var(--rarity-common); border: 1px solid var(--rarity-common); }
.rarity-uncommon { background: rgba(74, 222, 128, 0.2); color: var(--rarity-uncommon); border: 1px solid var(--rarity-uncommon); }
.rarity-rare { background: rgba(56, 189, 248, 0.2); color: var(--rarity-rare); border: 1px solid var(--rarity-rare); }
.rarity-epic { background: rgba(192, 132, 252, 0.2); color: var(--rarity-epic); border: 1px solid var(--rarity-epic); }
.rarity-legendary { background: rgba(250, 204, 21, 0.2); color: var(--rarity-legendary); border: 1px solid var(--rarity-legendary); box-shadow: 0 0 10px rgba(250, 204, 21, 0.3); }
.rarity-mythic { background: rgba(244, 63, 94, 0.2); color: var(--rarity-mythic); border: 1px solid var(--rarity-mythic); box-shadow: 0 0 12px rgba(244, 63, 94, 0.4); }

.codex-title {
  font-family: 'Marcellus', serif;
  font-size: 16px;
  color: var(--paper);
}

.codex-desc {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.4;
}

.codex-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--assay);
  margin-top: 4px;
}

/* HIGH-PRECISION ALIGNED RESULTS DISPLAY */
.smelt-page .result {
  background: linear-gradient(rgba(20, 14, 11, .9), rgba(20, 14, 11, .96)), repeating-linear-gradient(45deg, rgba(228, 180, 81, 0.03) 0%, rgba(228, 180, 81, 0.03) 2px, transparent 2px, transparent 10px);
  background-blend-mode: overlay;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px 38px;
  text-align: center;
  animation: rise .45s ease both;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08), inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

.smelt-page .result .verdict-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .32em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.smelt-page .ingot-slot {
  display: flex;
  justify-content: center;
  margin: 16px 0;
  position: relative;
}

.smelt-page .ingot-cv {
  display: block;
  height: auto;
  animation: pressIn .5s cubic-bezier(.2, 1.4, .4, 1) both;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
}

.smelt-page .result h2 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(26px, 4.8vw, 36px);
  letter-spacing: .05em;
  margin: 14px 0 10px;
}

.rarity-xp-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.smelt-page .karat-line {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--assay);
  font-size: 13.5px;
  letter-spacing: .12em;
  margin-bottom: 14px;
}

.smelt-page .grade-line {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 18px;
  color: var(--dim);
  text-transform: uppercase;
  background: rgba(0,0,0,0.25);
  margin-bottom: 14px;
}

.smelt-page .grade-line b {
  color: var(--paper);
  font-weight: 600;
}

.smelt-page .melt-line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--paper);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.smelt-page .melt-line b {
  color: var(--assay);
  font-size: 18px;
  font-weight: 600;
}

.smelt-page .spot-tag {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--dim);
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}

.smelt-page .master {
  display: flex;
  gap: 16px;
  align-items: center;
  max-width: 580px;
  margin: 0 auto;
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.smelt-page .master-cv {
  width: 68px;
  height: 68px;
  max-width: 68px;
  max-height: 68px;
  border-radius: 50%;
  flex: none;
  border: 2px solid #7a5a1f;
  background: radial-gradient(circle at 50% 38%, #37291d, #1e1710);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  object-fit: cover;
  display: block;
}

.smelt-page .master-body {
  flex: 1;
  min-width: 0;
}

.smelt-page .master-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .24em;
  color: var(--assay);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.smelt-page .bubble {
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
  font-style: italic;
}

.smelt-page .comp-line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 18px;
  letter-spacing: .08em;
}

.smelt-page .result-actions {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.smelt-page .again {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper);
}

.smelt-page .again:hover {
  border-color: var(--assay);
  color: var(--assay);
}

.smelt-page .btn-cert {
  border: 1px solid #7a5a1f;
  background: linear-gradient(135deg, #f0c25c, #c8922f);
  color: #241a08;
  font-weight: 600;
}

.smelt-page .btn-cert:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(228, 180, 81, .4);
}

/* Vault Filters */
.vault-filters {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.filter-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn.active, .filter-btn:hover {
  color: var(--paper);
  border-color: var(--assay);
  background: rgba(228, 180, 81, 0.1);
}

/* Vault Grid */
.smelt-page .vault {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bench) 0%, var(--bench2) 100%);
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08), inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

.smelt-page .vault-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.smelt-page .vault-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--dim);
  text-transform: uppercase;
}

.smelt-page .vault-total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--paper);
}

.smelt-page .vault-total #vaultTotal {
  color: var(--assay);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.smelt-page .vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.smelt-page .vault-bar {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 8px 10px;
  background: rgba(0, 0, 0, .25);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.smelt-page .vault-bar:hover {
  transform: translateY(-2px);
  border-color: rgba(228, 180, 81, 0.4);
}

.smelt-page .vault-bar canvas {
  width: 100%;
  height: auto;
  display: block;
}

.smelt-page .vault-bar .vb-name {
  font-size: 12.5px;
  font-family: 'Marcellus', serif;
  letter-spacing: .04em;
  margin-top: 5px;
}

.smelt-page .vault-bar .vb-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--dim);
  margin-top: 2px;
}

.smelt-page .vault-bar .vb-meta b {
  color: var(--assay);
}

.smelt-page .vault-bar .vb-x {
  position: absolute;
  top: 4px;
  right: 6px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.smelt-page .vault-bar .vb-x:hover {
  color: var(--bad);
  background: rgba(217, 106, 90, 0.2);
}

.smelt-page .vault-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--dim);
  letter-spacing: .12em;
  margin-top: 14px;
  text-transform: uppercase;
  text-align: center;
}

/* HIGH Z-INDEX CLICKABLE DISCOVERY / LEVEL-UP MODAL OVERLAY */
.discovery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 3, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
}

.discovery-modal {
  background: linear-gradient(180deg, #2b2119 0%, #18110c 100%);
  border: 1.5px solid var(--assay);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  max-width: 440px;
  width: 100%;
  box-shadow:
    0 0 60px rgba(228, 180, 81, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(228, 180, 81, 0.4);
  animation: popIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: auto;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.discovery-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--assay), transparent);
}

.discovery-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 300px 200px at 50% 0%, rgba(228, 180, 81, 0.06), transparent),
    radial-gradient(ellipse 200px 150px at 50% 100%, rgba(255, 107, 43, 0.04), transparent);
  pointer-events: none;
}

.discovery-modal h2 {
  font-family: 'Cinzel', 'Marcellus', serif;
  font-size: 22px;
  color: var(--assay);
  letter-spacing: .06em;
  text-shadow: 0 0 18px rgba(228, 180, 81, 0.3);
  position: relative;
  z-index: 1;
}

.discovery-modal p {
  color: var(--paper);
  font-size: 14px;
  margin: 14px 0 24px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.discovery-modal button {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  z-index: 10;
  appearance: none;
  font-family: 'Marcellus', serif;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 12px;
  border: 1.5px solid var(--assay);
  background: linear-gradient(135deg, rgba(228, 180, 81, 0.15), rgba(228, 180, 81, 0.05));
  color: var(--assay);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(228, 180, 81, 0.3);
  transition: all 0.2s ease;
  overflow: hidden;
}

.discovery-modal button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(228, 180, 81, 0.2), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.discovery-modal button:hover {
  background: linear-gradient(135deg, rgba(228, 180, 81, 0.25), rgba(228, 180, 81, 0.1));
  transform: translateY(-2px);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(228, 180, 81, 0.15),
    inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

.discovery-modal button:hover::after {
  left: 200%;
}

.discovery-modal button:active {
  transform: translateY(0);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Skyline & Footer */
.smelt-page .skyline {
  height: 60px;
  margin-top: 36px;
  background: linear-gradient(180deg, transparent 0%, rgba(34, 26, 20, 0.6) 100%);
  border-bottom: 1px solid var(--line);
}

.smelt-page footer {
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  margin-top: 24px;
  line-height: 1.7;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
}

.smelt-page footer a {
  color: var(--assay);
  text-decoration: none;
}

/* Responsive Media Queries */
@media (max-width: 640px) {
  .smelt-page .masthead {
    flex-direction: column-reverse;
    gap: 16px;
    text-align: center;
    padding: 20px 16px;
    backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(228, 180, 81, 0.08), inset 0 1px 0 rgba(228, 180, 81, 0.4);
}

  .brand-crest {
    justify-content: center;
  }

  .player-rank-bar {
    justify-content: center;
  }

  .smelt-page .shelf {
    gap: 8px 6px;
  }

  .smelt-page .jar-glass {
    height: 68px;
  }

  .codex-grid {
    grid-template-columns: 1fr;
  }

  .smelt-page .cameo {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
  }

  .smelt-page .master {
    flex-direction: column;
    text-align: center;
  }
}

/* body::after ember overlay removed — was causing z-index issues over menus */

.masthead::before, .masthead::after, .tray::before, .tray::after, .shelf-wrapper::before, .shelf-wrapper::after, .result::before, .result::after, .vault::before, .vault::after, .prize-banner::before, .prize-banner::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 10;
}
.masthead::before, .tray::before, .shelf-wrapper::before, .result::before, .vault::before, .prize-banner::before {
  top: 6px;
  left: 6px;
  border-top: 1.5px solid rgba(228, 180, 81, 0.3);
  border-left: 1.5px solid rgba(228, 180, 81, 0.3);
}
.masthead::after, .tray::after, .shelf-wrapper::after, .result::after, .vault::after, .prize-banner::after {
  bottom: 6px;
  right: 6px;
  border-bottom: 1.5px solid rgba(228, 180, 81, 0.3);
  border-right: 1.5px solid rgba(228, 180, 81, 0.3);
}

@keyframes textShimmer {
  to { background-position: 200% center; }
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%; height: 2px;
  background: var(--assay);
  animation: slideUnderline 0.3s ease-out;
}
@keyframes slideUnderline { from { width: 0; left: 50%; } to { width: 80%; left: 10%; } }

@keyframes stripeMove { 0% { background-position: 0 0; } 100% { background-position: 28px 0; } }

.smelt-page .btn {
  position: relative;
  overflow: hidden;
}
.smelt-page .btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}
.smelt-page .btn:hover::after {
  left: 200%;
}

.smelt-page .chip {
  animation: floatChip 3s ease-in-out infinite alternate;
}
@keyframes floatChip { from { transform: translateY(0); } to { transform: translateY(-3px); } }

.smelt-page .rule span {
  position: relative;
}
.smelt-page .rule span::before, .smelt-page .rule span::after {
  content: '♦';
  color: var(--assay);
  font-size: 8px;
  margin: 0 8px;
}

.codex-card {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.codex-card.unlocked:hover {
  transform: rotateY(10deg) scale(1.02);
  box-shadow: -5px 5px 20px rgba(228, 180, 81, 0.2);
}

/* Removed: Spinning conic-gradient behind modal — replaced with subtle radial glow inside the modal */


::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--soot);
  border-left: 1px solid var(--line);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7a5a1f, #c8922f);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e4b451;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pressIn {
  0% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ================= FLOATING EMBER PARTICLES ================= */
.ember-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ember {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb347, #ff6b2b, transparent);
  opacity: 0;
  animation: emberRise linear infinite;
  box-shadow: 0 0 6px 2px rgba(255, 107, 43, 0.4);
}

.e1 { left: 8%; animation-duration: 14s; animation-delay: 0s; width: 3px; height: 3px; }
.e2 { left: 22%; animation-duration: 18s; animation-delay: 2s; width: 5px; height: 5px; }
.e3 { left: 38%; animation-duration: 12s; animation-delay: 4s; width: 2px; height: 2px; }
.e4 { left: 55%; animation-duration: 20s; animation-delay: 1s; width: 4px; height: 4px; }
.e5 { left: 68%; animation-duration: 16s; animation-delay: 6s; width: 3px; height: 3px; }
.e6 { left: 82%; animation-duration: 22s; animation-delay: 3s; width: 5px; height: 5px; }
.e7 { left: 92%; animation-duration: 15s; animation-delay: 8s; width: 2px; height: 2px; }
.e8 { left: 45%; animation-duration: 17s; animation-delay: 5s; width: 3px; height: 3px; }

@keyframes emberRise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50vh) translateX(20px) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) translateX(-15px) scale(0.2);
  }
}

/* ================= STATS RIBBON ================= */
.stats-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 16px 0;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(34, 26, 20, 0.98), rgba(20, 14, 11, 0.98));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(228, 180, 81, 0.2);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 1;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
}

.stat-icon {
  font-size: 18px;
  line-height: 1;
}

.stat-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--assay);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(228, 180, 81, 0.3);
}

.stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .16em;
  color: var(--dim);
  text-transform: uppercase;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
  flex: none;
}

/* ================= ORNATE CARD SHARED CLASS ================= */
.ornate-card {
  position: relative;
}

/* ================= BRAND CREST LINES ================= */
.crest-line {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--assay), transparent);
  vertical-align: middle;
}

.crest-diamond {
  color: var(--assay);
  font-size: 8px;
  vertical-align: middle;
  margin: 0 4px;
  text-shadow: 0 0 6px rgba(228, 180, 81, 0.5);
}

/* ================= SHIMMER TEXT EFFECT ================= */
.shimmer-text {
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    #e4b451 20%,
    #ffffff 40%,
    #e4b451 60%,
    #ffffff 80%,
    #e4b451 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 4s linear infinite;
}

@keyframes shimmerSweep {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ================= RULE DIAMOND DECORATIONS ================= */
.rule-diamond {
  color: var(--assay);
  font-size: 7px;
  margin: 0 6px;
  text-shadow: 0 0 4px rgba(228, 180, 81, 0.4);
}

/* ================= SMELT BUTTON ICON ================= */
.btn-icon {
  margin-right: 4px;
  font-size: 16px;
  vertical-align: middle;
}

/* ================= CODEX CARD ENHANCEMENTS ================= */
.codex-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.codex-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--dim);
  letter-spacing: .12em;
  opacity: 0.7;
}

.codex-lock-icon {
  font-size: 24px;
  text-align: center;
  margin: 8px 0 4px;
  opacity: 0.4;
  filter: grayscale(0.5);
}

/* ================= FOOTER CREST ================= */
.footer-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.footer-copy {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .2em;
  opacity: 0.5;
}

/* ================= TRAY EMPTY NOTE ================= */
.tray-empty-note {
  color: var(--dim);
  font-style: italic;
  font-size: 12.5px;
}

/* ================= RESPONSIVE ADDITIONS ================= */
@media (max-width: 640px) {
  .stats-ribbon {
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px;
  }

  .stat-item {
    min-width: 22%;
  }

  .stat-divider {
    display: none;
  }

  .stat-value {
    font-size: 14px;
  }

  .crest-line {
    width: 24px;
  }

  .ember { display: none; }
}