body {
  background: #181818;
  color: #eee;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
  margin: 32px 0 24px 0;
  font-size: 2.2em;
  letter-spacing: 2px;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
}
.header-row h1 {
  margin-bottom: 0;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 24px;
  max-width: 1600px;
  margin: 0 auto 40px auto;
  justify-content: center;
  align-items: flex-start;
  padding: 16px 0;
}
.container {
  background: rgba(30,30,30,0.97);
  box-shadow: 0 2px 12px #0008;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: none;
  width: auto;
  min-width: 320px;
  margin: 0;
}
.table-banner {
  color: #ffffff;
  border-radius: 14px 14px 0 0;
  margin: 0;
  padding: 10px 0 10px 18px;
  font-size: 1.25em;
  font-weight: bold;
  letter-spacing: 1px;
  width: 100%;
  box-sizing: border-box;
  -webkit-text-stroke: 5px #000;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  paint-order: stroke fill;
}
.basic-minerals-banner { background: linear-gradient(90deg, #bfbfbf 0%, #7d7d7d 100%); }
.common-metals-banner { background: #e4ae7e; }
.common-jewels-banner { background: linear-gradient(90deg, #8a2be2 0%, #7b68ee 50%, #9370db 100%); }
.rare-oddities-banner { background: linear-gradient(90deg, #ffcc66 0%, #f9f575 20%, #f07f53 42.2%, #ec82ff 80%, #b050eb 100%); }
.halloween-banner { background: linear-gradient(90deg, #ff7518 0%, #4b0082 100%); }
.holidays-banner { background: linear-gradient(90deg, #228b22 0%, #32cd32 100%); }
.unstable-forms-banner { background: linear-gradient(#002321, #002321); }
.scary-caverns-banner { background: linear-gradient(90deg, #2a2a2a 0%, #1e1e1e 50%, #121212 100%); }
.azure-caverns-banner { background: linear-gradient(90deg, #050c50 0%, #070e54 50%, #030220 100%); }
.underworld-banner { background: linear-gradient(90deg, #770000 0%, #370000 100%); }
.radioactive-zone-banner { background: linear-gradient(45deg, #0a2e0a 0%, #000000 10%, #1eff29 50%, #000000 90%, #0a2e0a 100%); }
.dreamscape-banner { background: linear-gradient(90deg, #e600ff 0%, #212121 100%); }
.unknown-banner { background: linear-gradient(90deg, #7e7e7e 0%, #232526 100%); }
.enigmatic-specimens-banner { background: linear-gradient(90deg, #52b2bf 0%, #b76ba3 100%); }
.rare-metals-banner { background: linear-gradient(90deg, #606f91 0%, #899cc1 100%); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: #222;
  border-radius: 0 0 10px 10px;
  table-layout: auto;
  min-width: 600px;
  max-width: none;
}
tbody {
  width: 100%;
  height: 100%;
  display: table-row-group;
}
tr {
  height: 32px;
  border-bottom: 1px solid #333;
}
tr:last-child {
  border-bottom: none;
}
th, td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
  min-width: 90px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  font-size: 1em;
  border: 1px solid #333;
}
th {
  background: #181818;
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid #444;
}
th:first-child,
td:first-child {
  min-width: 180px;
}
th.av-percent,
td.av-percent {
  min-width: 60px;
  text-align: center;
}
td.ore-name {
  font-weight: bold;
  color: #fff;
  padding: 2px 6px;
  white-space: nowrap;
  vertical-align: middle;
  background: none;
  border-right: none;
}
td.ore-name .ore-icon {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
}
td.ore-name span {
  vertical-align: middle;
  display: inline-block;
  -webkit-text-stroke: 3px #000;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  paint-order: stroke fill;
}
.market-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: 6px;
  margin-right: 0;
  filter: drop-shadow(0 0 2px #fff8);
  display: inline-block;
}
.market-icon:hover {
  cursor: pointer;
}
td.ore-stone         { background: linear-gradient(90deg, #bfbfbf 0%, #7d7d7d 100%) !important; }
td.ore-coal          { background: linear-gradient(90deg, #222 0%, #444 100%) !important; }
td.ore-sulfur        { background: linear-gradient(90deg, #ecb939 0%, #f7e98e 100%) !important; }
td.ore-opal          { background: linear-gradient(90deg, #fad0ed 0%, #fff 100%) !important; }
td.ore-moonstone     { background: linear-gradient(90deg, #cee2e5 0%, #e5e4e2 100%) !important; }
td.ore-dragonstone   { background: linear-gradient(135deg, #18161B 0%, #3B3643 40%, #2E2933 70%, #3B3643 100%) !important; }
td.ore-copper        { background: linear-gradient(90deg, #cb7347 0%, #b87333 100%) !important; }
td.ore-iron          { background: linear-gradient(90deg, #a5958b 0%, #b8b8b8 100%) !important; }
td.ore-platinum      { background: linear-gradient(90deg, #e5e4e2 0%, #bfc1c2 100%) !important; }
td.ore-gold          { background: linear-gradient(90deg, #F4E31C 0%, #FCFF9E 60%, #C9BB17 100%) !important; }
td.ore-silver        { background: linear-gradient(90deg, #dfdfdf 0%, #e6e8fa 100%) !important; }
td.ore-diamond       { background: linear-gradient(135deg, #92c6db 0%, #fff 50%, #85bed4 100%) !important; }
td.ore-amethyst      { background: linear-gradient(90deg, #b172ff 0%, #9966cc 100%) !important; }
td.ore-topaz         { background: linear-gradient(90deg, #ffa435 0%, #ffcc80 100%) !important; }
td.ore-emerald       { background: linear-gradient(90deg, #7ad753 0%, #50c878 100%) !important; }
td.ore-ruby          { background: linear-gradient(90deg, #d82424 0%, #e0115f 100%) !important; }
td.ore-sapphire      { background: linear-gradient(90deg, #147aff 0%, #0f52ba 100%) !important; }
td.ore-nihilium      { background: linear-gradient(120deg, #8846ED 0%, #0B0B0B 30%, #2A2A2A 60%, #7A31E8 100%) !important; }
td.ore-garnet        { background: linear-gradient(135deg, #721D1C 0%, #31180C 60%, #452419 100%) !important; }
td.ore-twitchite     { background: linear-gradient(90deg, #6441a5 0%, #b9a3e3 100%) !important; }
td.ore-kappa         { background: linear-gradient(90deg, #00ffcc 0%, #00bfff 100%) !important; }
td.ore-ambrosia      { background: linear-gradient(90deg,#fc6 0%,#f9f575 20%,#f07f53 42.2%,#ec82ff 80%,#b050eb 100%) !important; }
td.ore-nightmarium   { background: linear-gradient(120deg, #E60000 0%, #212121 50%, #3F3F3F 100%) !important; }
td.ore-sinistytee    { background: linear-gradient(90deg, #FF73EF 0%, #FFF2FD 15%, #000000 30%, #262626 50%, #FFA0F7 75%, #242424 100%) !important; }
td.ore-sinistytes    { background: linear-gradient(90deg, #B7FFA5 0%, #70EF44 30%, #313131 60%, #4A4A4A 80%, #1A1A1A 100%) !important; }
td.ore-sinistyteL    { background: linear-gradient(90deg, #1B1B1B 0%, #B85CFF 40%, #545454 70%, #BB9CFF 100%) !important; }
td.ore-sinistytem    { background: linear-gradient(90deg, #FFDA99 0%, #FF8901 25%, #FFB000 50%, #0E0E0E 75%, #333333 100%) !important; }
td.ore-pumpkinite    { background: linear-gradient(90deg, #ff7518 0%, #ffb347 100%) !important; }
td.ore-frostarium    { background: linear-gradient(90deg, #b4eee5 0%, #e0eafc 100%) !important; }
td.ore-giftium       { background: linear-gradient(90deg, #7B0400 0%, #DD1F19 30%, #EAF3F3 60%, #F76A68 100%) !important; }
td.ore-frawstbyte    { background: linear-gradient(90deg, #b2fefa 0%, #0ed2f7 100%) !important; }
td.ore-gingerbreadium{ background: linear-gradient(120deg, #A26445 0%, #7AD36A 20%, #D51702 40%, #9F6041 60%, #CC7D56 80%, #F7F7F7 100%) !important; }
td.ore-peppermintium { background: linear-gradient(90deg, #F4F1F0 0%, #BB1E06 50%, #E72D1B 100%) !important; }
td.ore-noobite       { background: linear-gradient(90deg, #FDC211 0%, #2674E3 33%, #398F37 66%, #46B543 100%) !important; }
td.ore-uranium       { background: linear-gradient(90deg, #00B308 0%, #30FF2A 40%, #000000 70%, #BFFE82 100%) !important; }
td.ore-plutonium     { background: linear-gradient(90deg, #FE2C09 0%, #FE6A21 25%, #FEBB60 50%, #DC4E35 75%, #FD8B2B 100%) !important; }
td.ore-promethium    { background: linear-gradient(90deg, #054A30 0%, #02291A 30%, #05472E 60%, #022115 100%) !important; }
td.ore-boomite       { background: linear-gradient(90deg, #FFF600 0%, #FF0000 33%, #FF5A00 66%, #A23900 100%) !important; }
td.ore-shadowmetal   { background: linear-gradient(90deg, #212121 0%, #2D2A43 33%, #38345D 66%, #2C2A42 100%) !important; }
td.ore-illuminunium  { background: linear-gradient(90deg, #2E4112 0%, #3F6B1F 25%, #63DE21 50%, #DDF800 75%, #B7FF9F 100%) !important; }
td.ore-serendibite   { background: linear-gradient(90deg, #1E1E1E 0%, #848484 30%, #2F2F2F 60%, #787878 100%) !important; }
td.ore-baryte        { background: linear-gradient(90deg, #5DA4F3 0%, #589CF3 20%, #3E7DC3 40%, #A8C5DD 70%, #BDDCF9 100%) !important; }
td.ore-rainbonite    { background: linear-gradient(110deg,#f9726d,#f2a856 15%,#f9fb80 30%,#a4feaf 50%,#8bffee 65%,#85c8ff 75%,#817fff 85%,#efafff 100%) !important; }
td.ore-alexandrite   { background: linear-gradient(90deg, #02ECF2 0%, #00E8D7 10%, #17F8FD 20%, #1100E8 35%, #1000CE 50%, #8B0FE8 65%, #BA49FE 80%, #E600F9 90%, #0D8A71 100%) !important; }
td.ore-tungsten      { background: linear-gradient(90deg, #C2CAA7 0%, #F1F8DE 33%, #D7E0BA 66%, #EEF5DD 100%) !important; }
td.ore-azure         { background: linear-gradient(90deg, #DAB5FF 0%, #C200FF 16%, #C304FF 32%, #4927FF 48%, #2E52FF 64%, #3FD4F2 80%, #00E2E4 100%) !important; }
td.ore-orichalcum    { background: linear-gradient(90deg, #F6C989 0%, #BF905E 33%, #76462B 66%, #AA7843 100%) !important; }
td.ore-mithril       { background: linear-gradient(90deg, #2DA3E0 0%, #6DDEFF 25%, #D7E5EA 50%, #6C9AB2 75%, #CFF4FF 100%) !important; }
td.ore-painite       { background: linear-gradient(90deg, #770000 0%, #370000 25%, #7E0402 50%, #1A0000 75%, #630000 100%) !important; }
td.ore-nullstone     { background: linear-gradient(90deg, #2C2436 0%, #651F33 20%, #A62E3D 40%, #932D4B 60%, #1D1824 75%, #4E1827 87%, #7C263F 100%) !important; }
td.ore-dragonglass   { background: linear-gradient(90deg, #712ECB 0%, #4E1B94 25%, #230940 50%, #611CBC 75%, #3B126F 100%) !important; }
td.ore-firecrystal   { background: linear-gradient(90deg, #FFBE00 0%, #FFB000 16%, #FF8E00 32%, #FF5600 48%, #FFD800 64%, #FF3700 80%, #FF5100 100%) !important; }
td.ore-symmetrium    { background: linear-gradient(90deg, #DEFCFF 0%, #F9FFFF 20%, #8AA9FD 40%, #214AFE 60%, #6394FF 80%, #97BAFD 100%) !important; }
td.ore-soulstone     { background: linear-gradient(90deg, #CFF70E 0%, #90DD04 33%, #D2F90F 66%, #D5FA10 100%) !important; }
td.ore-corium        { background: linear-gradient(90deg, #F8B10B 0%, #B94900 25%, #A63900 50%, #802900 75%, #CF5000 100%) !important; }
td.ore-newtonium     { background: linear-gradient(90deg, #35FF00 0%, #1BE300 50%, #CEFFC7 100%) !important; }
td.ore-solarium      { background: linear-gradient(90deg, #FCD300 0%, #FEBA00 20%, #D28D00 40%, #9C5600 60%, #C77A00 80%, #F5C300 100%) !important; }
td.ore-yunium        { background: linear-gradient(90deg, #FFC900 0%, #FFDB34 20%, #FFE577 40%, #F8B100 60%, #FFEFA9 80%, #FFDC3B 100%) !important; }
td.ore-redmatter     { background: linear-gradient(90deg, #ff0000 0%, #8b0000 100%) !important; }
td.ore-antimatter    { background: linear-gradient(120deg,#92d6e7,#aef2ee 40%,#6da8f7 45%,#4476d2 50%,#1841ab 65%,#180449 100%) !important; }
td.ore-darkmatter    { background: linear-gradient(90deg, #582bc4 0%, #22223b 100%) !important; }
td.ore-constellatium { background: linear-gradient(90deg, #f7cac9 0%, #92a8d1 100%) !important; }
td.ore-stellarite    { background: linear-gradient(90deg, #41F0F7 0%, #BCA2FE 25%, #3BA4FF 50%, #15BAFC 75%, #2BE0F8 100%) !important; }
td.ore-frightstone   { background: linear-gradient(90deg, #5D04A5 0%, #6D0762 20%, #D3306C 40%, #CE143B 60%, #B8085B 80%, #891A23 90%, #B7088A 100%) !important; }
td.ore-valhalum      { background: linear-gradient(90deg, #FFFFFF 0%, #7E7E7E 25%, #6A6A6A 50%, #C2C2C2 75%, #898989 100%) !important; }
td.ore-mightstone    { background: linear-gradient(90deg, #00F0FD 0%, #00D8F7 14%, #16DFFD 28%, #000FB4 42%, #0442DC 57%, #00009E 71%, #0008F9 85%, #29ECFE 100%) !important; }
td.ore-elementv      { background: linear-gradient(90deg, #82E5FF 0%, #1FC9FF 14%, #4B4AFF 28%, #2E77FF 42%, #DDB0FF 57%, #B21DFF 71%, #111111 85%, #343434 100%) !important; }
td.ore-havium        { background: linear-gradient(90deg, #3300FE 0%, #9D2FFF 20%, #EACDFB 40%, #C98222 60%, #F7AF1B 80%, #FFD369 100%) !important; }
td.ore-titanium      { background: linear-gradient(90deg, #606F91 0%, #899CC1 25%, #E2FAFD 50%, #37435D 75%, #637195 87%, #8598BB 100%) !important; }
td:not(.ore-name) {
  background: #181818;
  color: #fffdfd;
  text-rendering: optimizeLegibility;
  paint-order: stroke fill;
}
td input[type="number"] {
  background: transparent;
  color: inherit;
  border: none;
  outline: none;
  width: 60px;
  text-align: left;
  font-size: 1em;
  -moz-appearance: textfield;
}
td input[type="number"]::-webkit-outer-spin-button,
td input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
td input[type="number"] {
  -moz-appearance: textfield;
}
td.av-percent.percent-0    { background-color: #d22d2d !important; color: #fff !important; }
td.av-percent.percent-10   { background-color: #ff4800 !important; color: #fff !important; }
td.av-percent.percent-20   { background-color: #ff6a00 !important; color: #fff !important; }
td.av-percent.percent-30   { background-color: #ff9100 !important; color: #222 !important; }
td.av-percent.percent-40   { background-color: #ffb700 !important; color: #222 !important; }
td.av-percent.percent-50   { background-color: #ffe100 !important; color: #222 !important; }
td.av-percent.percent-60   { background-color: #e9e209 !important; color: #222 !important; }
td.av-percent.percent-70   { background-color: #cf0 !important; color: #222 !important; }
td.av-percent.percent-80   { background-color: #81ec00 !important; color: #222 !important; }
td.av-percent.percent-90   { background-color: #2f0 !important; color: #222 !important; }
td.av-percent.percent-100  { background-color: #0091ff !important; color: #fff !important; }
td.av-percent.percent-over100 {
  background: linear-gradient(90deg,#ff61d5,#8ea8ff 20%,#61ffb0 40%,#ffd863 60%,#ff7e7e 80%,#937dff) !important;
  color: #222 !important;
  text-shadow: 1px 2px 2px #fff !important;
}
.table-stats {
  background: none;
  color: #b7eaff;
  border-radius: 0 0 12px 12px;
  margin: 0;
  padding: 12px 0 14px 0;
  font-size: 1.08em;
  min-height: 38px;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: flex-start;
  letter-spacing: 0.5px;
}
.table-stats span {
  display: block;
  margin-right: 0;
  font-weight: 500;
  padding-left: 18px;
}
.stats-menu {
  background: #222d22;
  border-radius: 10px;
  margin: 0 auto 18px auto;
  padding: 18px 24px;
  max-width: 900px;
  box-shadow: 0 2px 8px #0005;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.15em;
  color: #e0ffe0;
  border: 1.5px solid #3fa7ff;
}
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.stats-row span {
  min-width: 180px;
  text-align: center;
  font-weight: 500;
}
#help-btn {
  font-size: 1.1em;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #3fa7ff;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 8px #0005;
  transition: background 0.2s;
}
#help-btn:hover {
  background: #7fff7f;
  color: #232b36;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0; width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(20,24,32,0.85);
}
.modal-content {
  background-color: #232b36;
  margin: 8% auto;
  padding: 24px 28px;
  border: 1px solid #3fa7ff;
  border-radius: 10px;
  width: 90%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  color: #e0e6ef;
  text-align: center;
}
.modal-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.modal-content ul li {
  padding: 8px 0;
  text-align: center;
}
.close {
  color: #8fa7c2;
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover { color: #3fa7ff; }
.guide-box {
  background: #1a1e22;
  border-radius: 10px;
  margin: 0 auto 24px auto;
  padding: 18px 28px 10px 28px;
  max-width: 900px;
  box-shadow: 0 2px 8px #0005;
  color: #e0e6ed;
  border: 1.5px solid #3fa7ff;
}
.guide-box h2 {
  margin-top: 0;
  color: #7fff7f;
  font-size: 1.25em;
  letter-spacing: 1px;
}
.guide-box ul {
  margin: 0 0 0 18px;
  padding: 0 0 0 18px;
  font-size: 1em;
}
.guide-box li {
  margin-bottom: 7px;
}
#home-btn {
  position: fixed;
  top: 24px;
  left: 24px;
  background: #121213;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: background 0.2s;
  text-decoration: none;
}
#home-btn:hover {
  background: #000000;
}
#home-btn svg {
  display: block;
}
#credits {
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 1.2em;
  margin-top: 40px;
}
.credit-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}
.credit-links a,
.credit-links span {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.credit-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}