/* EverBase UI kit — the dark/gold fantasy design language from docs/UI.png.
   Tokens + reusable primitives. Site components consume these in style.css;
   /styleguide renders every primitive for review. */

:root {
  /* palette */
  --ui-bg: #08080c;
  --ui-panel: #0e0e14;
  --ui-panel-2: #14141b;
  --ui-inset: #0a0a10;
  --ui-gold: #d4af53;
  --ui-gold-bright: #e8c96a;
  --ui-gold-dim: #8a6f33;
  --ui-gold-dark: #4a3a18;
  --ui-text: #d9d2c0;
  --ui-muted: #978e78;
  --ui-gem: #8655d4;
  --ui-blue: #3a6fd0;
  --ui-green: #4d7a3a;
  --ui-red: #a03830;
  --ui-amber: #c9944e;
  /* effects */
  --ui-glow: 0 0 8px rgba(212, 175, 83, 0.3);
  --ui-inset-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  /* type */
  --ui-display-font: Georgia, "Times New Roman", serif;
}

/* ---- nine-patch panels ---- */

.ui-panel {
  background: var(--ui-panel);
  border: 12px solid transparent;
  border-image: url("../ui/panel.svg") 28 / 12px stretch;
}

.ui-panel-ornate {
  background: var(--ui-panel);
  border: 18px solid transparent;
  border-image: url("../ui/panel-ornate.svg") 36 / 18px stretch;
}

/* ---- buttons ---- */

.ui-btn {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ui-text);
  background: linear-gradient(#262630, #101016);
  border: 1px solid var(--ui-gold-dim);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  text-decoration: none;
}

.ui-btn:hover {
  border-color: var(--ui-gold);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--ui-glow);
}

.ui-btn:active {
  transform: translateY(1px);
  box-shadow: var(--ui-inset-shadow);
}

.ui-btn-gold {
  background: linear-gradient(#c39a3a, #6e5518);
  border-color: var(--ui-gold-bright);
  color: #171106;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ui-btn-gold:hover { color: #000; }

.ui-btn-blue { background: linear-gradient(#2c4f8f, #152744); border-color: #4f77c2; }
.ui-btn-green { background: linear-gradient(#3d6b2f, #1c3315); border-color: #679a52; }
.ui-btn-red { background: linear-gradient(#8f2f28, #471512); border-color: #c25a50; }
.ui-btn-purple { background: linear-gradient(#5f3a9e, #2c1a4d); border-color: #9a6fd8; }

/* ---- form controls ---- */

.ui-input,
.ui-select {
  background: var(--ui-inset);
  border: 1px solid var(--ui-gold-dark);
  border-radius: 3px;
  color: var(--ui-text);
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  box-shadow: var(--ui-inset-shadow);
}

.ui-input:focus,
.ui-select:focus {
  outline: none;
  border-color: var(--ui-gold);
  box-shadow: var(--ui-inset-shadow), var(--ui-glow);
}

.ui-select {
  appearance: none;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d4af53' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
}

.ui-check,
.ui-radio {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--ui-inset);
  border: 1px solid var(--ui-gold-dim);
  box-shadow: var(--ui-inset-shadow);
  cursor: pointer;
  vertical-align: -3px;
  margin-right: 0.4rem;
}

.ui-check {
  border-radius: 2px;
}

.ui-check:checked {
  background-color: var(--ui-inset);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 6.5l3 3 5-7' fill='none' stroke='%23e8c96a' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--ui-gold);
}

.ui-radio {
  border-radius: 50%;
}

.ui-radio:checked {
  border-color: var(--ui-gold);
  background: radial-gradient(circle at center,
              var(--ui-gold-bright) 0 4px, transparent 5px);
}

.ui-check:focus-visible,
.ui-radio:focus-visible {
  outline: none;
  box-shadow: var(--ui-inset-shadow), var(--ui-glow);
}

/* ---- ornamental divider ---- */

.ui-divider {
  position: relative;
  height: 1px;
  margin: 1.5rem 0;
  background: linear-gradient(90deg, transparent,
              var(--ui-gold-dim) 15%, var(--ui-gold-dim) 85%, transparent);
}

.ui-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--ui-panel);
  border: 1px solid var(--ui-gold);
}

/* ---- progress bar ---- */

.ui-progress {
  height: 12px;
  background: var(--ui-inset);
  border: 1px solid var(--ui-gold-dark);
  border-radius: 2px;
  box-shadow: var(--ui-inset-shadow);
  overflow: hidden;
}

.ui-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(#4f77c2, #223d6e);
}

.ui-progress.gold > span { background: linear-gradient(#c39a3a, #6e5518); }
.ui-progress.red > span { background: linear-gradient(#a03830, #501a15); }
.ui-progress.green > span { background: linear-gradient(#4d7a3a, #24401a); }

/* ---- scrollbars ---- */

* {
  scrollbar-color: var(--ui-gold-dark) var(--ui-inset);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ui-inset); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--ui-gold-dim), var(--ui-gold-dark));
  border-radius: 5px;
  border: 2px solid var(--ui-inset);
}