/* Emerald surfaces for the game only. Fan SVG and the token image stay as they are.
   Background art is /emerald-bg.webp. If it fails to load, the forest color remains.
   Market level cards add /emily-market.css. The home hero adds /emily-home.css.
   Removing either import restores that surface. */
@import url("/emily-market.css");
@import url("/emily-home.css");

.gold-sky {
  color: #f4fff8;
  background-color: #04110c;
  position: relative;
  isolation: isolate;
}

.gold-sky::before {
  animation: none;
  position: absolute;
  inset: auto 0 0;
  top: 0;
  height: 100dvh;
  transform: none;
  background-color: #04110c;
  background-image:
    linear-gradient(180deg, rgba(4, 17, 12, 0.42), rgba(3, 12, 9, 0.78)),
    url("/emerald-bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.gold-sky::after {
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(2, 14, 10, 0.2), rgba(2, 10, 8, 0.62));
  mix-blend-mode: multiply;
}

.gold-panel {
  background: linear-gradient(180deg, rgba(16, 58, 40, 0.72), rgba(6, 22, 16, 0.88));
  border-color: rgba(158, 214, 180, 0.28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px rgba(214, 255, 232, 0.14);
}

.gold-solid {
  background: linear-gradient(180deg, #143528 0%, #0c241b 42%, #07140f 100%);
  border-color: rgba(158, 214, 180, 0.34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), inset 0 1px rgba(214, 255, 232, 0.16);
}

.gold-note {
  background: linear-gradient(180deg, rgba(24, 74, 50, 0.55), rgba(8, 28, 20, 0.72));
  border-color: rgba(158, 214, 180, 0.3);
  color: #e7fff3;
}

.rose-note {
  background: linear-gradient(180deg, rgba(92, 36, 32, 0.72), rgba(32, 12, 12, 0.88));
  border-color: rgba(232, 164, 148, 0.45);
  color: #ffe8e2;
}

.bullion {
  color: #f4fff8;
  background:
    radial-gradient(120% 90% at 12% 0, rgba(190, 245, 214, 0.28), transparent 46%),
    linear-gradient(165deg, #1a6b48 0%, #0d3b2a 58%, #08261c 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), inset 0 1px rgba(214, 255, 232, 0.28);
}

.num {
  color: #f7fff9;
  text-shadow: 0 0 18px rgba(140, 214, 176, 0.22);
}

[data-variant="gold"],
[data-variant="gold"]:hover,
.hover\:bg-\[linear-gradient\(180deg\,\#f8e7b6_0\%\,\#e4bc68_48\%\,\#c4923a_100\%\)\]:hover {
  color: #062117;
  background-image: linear-gradient(180deg, #e9fff4 0%, #8fd7ae 48%, #1d7a4c 100%);
  box-shadow: 0 12px 28px rgba(22, 110, 70, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

[data-variant="gold"]:disabled {
  opacity: 0.42;
}

[data-variant="goldQuiet"],
[data-variant="goldQuiet"]:hover {
  color: #e7fff3;
  border-color: rgba(158, 214, 180, 0.4);
  background-image: linear-gradient(180deg, rgba(214, 255, 232, 0.16), rgba(29, 122, 76, 0.08));
  box-shadow: inset 0 1px 0 rgba(214, 255, 232, 0.2);
}

.text-\[\#f8e7b8\],
.text-\[\#f6e4b0\] {
  color: #f4fff8;
}

.text-\[\#e7d7b8\],
.text-\[\#d9cbb3\] {
  color: #d7eee2;
}

.text-\[\#cbb892\] {
  color: #a9cbb8;
}

.text-\[\#f0d48a\] {
  color: #b6f5d4;
}

.bg-\[\#f0d48a\],
.bg-\[\#f0d48a\]\/10,
.bg-\[\#f0d48a\]\/12,
.bg-\[\#f0d48a\]\/15,
.bg-\[\#f0d48a\]\/18 {
  background-color: #9ee8c0;
}

.border-\[\#f0d48a\],
.ring-\[\#f0d48a\]\/70 {
  border-color: #9ee8c0;
  --tw-ring-color: rgba(158, 232, 192, 0.7);
}

.bg-\[linear-gradient\(90deg\,\#8a6428\,\#f8e7b8\)\] {
  background-image: linear-gradient(90deg, #145c3c, #d8ffe9);
}

.bg-\[linear-gradient\(180deg\,\#f8e7b6\,\#c4923a\)\] {
  background-image: linear-gradient(180deg, #e7fff3, #3d9a68);
  color: #062117;
}

.bg-\[\#16110c\]\/80,
.bg-\[\#1a140e\]\/80 {
  background-color: rgba(6, 28, 20, 0.82);
}

nav.grid {
  border-color: rgba(158, 214, 180, 0.28);
  background-color: rgba(6, 26, 18, 0.84);
}

button.absolute.top-1\/2.right-0 {
  border-color: rgba(184, 232, 206, 0.45);
  background-color: rgba(7, 32, 24, 0.84);
  color: #f4fff8;
}

[class*="border-[rgba(232,196,122"] {
  border-color: rgba(158, 214, 180, 0.32);
}

button:disabled {
  cursor: not-allowed;
}

button.bg-\[\#2a1c08\]\/15 {
  color: #2a1c08;
  background-color: #e4bc68;
  background-image: linear-gradient(180deg, #f8e7b6 0%, #e0b45a 54%, #c4923a 100%);
  border: 1px solid #f3dd9e;
  box-shadow: 0 0 0 1px rgba(232, 196, 122, 0.28), 0 8px 20px rgba(196, 146, 58, 0.26);
}

button.bg-\[\#2a1c08\]\/15:hover {
  color: #2a1c08;
  background-color: #e4bc68;
  background-image: linear-gradient(180deg, #f8e7b6 0%, #e0b45a 54%, #c4923a 100%);
  filter: brightness(1.03);
}

button.bg-\[\#2a1c08\]\/15:disabled,
button.bg-\[\#2a1c08\]\/15[aria-disabled="true"] {
  filter: none;
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}