/* VKR theme override: Jurassic / Dinosaurs */

:root{
  --bg0:#050a06;
  --bg1:#07120a;
  --glass: rgba(9, 20, 12, .62);
  --glass2: rgba(7, 18, 10, .40);
  --line: rgba(198, 255, 178, .18);
  --line2: rgba(198, 255, 178, .10);
  --txt: rgba(247, 255, 244, .92);
  --muted: rgba(211, 236, 206, .76);
  --muted2: rgba(211, 236, 206, .60);
  --cyan:#6dffb0;   /* mint */
  --violet:#ffd26a; /* amber */
  --lime:#a7ff6d;   /* leaf */
  --warn:#ffd26a;
  --danger:#ff6b8a;
  --shadow: 0 22px 70px rgba(0,0,0,.68);
  --ring: 0 0 0 2px rgba(167, 255, 109, .22), 0 0 0 6px rgba(255, 210, 106, .10);
}

body{
  background:
    radial-gradient(1100px 780px at 10% 0%, rgba(167,255,109,.18), transparent 58%),
    radial-gradient(900px 700px at 95% 10%, rgba(255,210,106,.16), transparent 60%),
    radial-gradient(900px 760px at 40% 120%, rgba(109,255,176,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* replace space grid/stars with “jungle mist + leaves” */
.sky__stars{
  opacity:.45;
  animation: none;
  background-image:
    radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.25) 40%, transparent 45%),
    radial-gradient(1px 1px at 54% 40%, rgba(255,255,255,.20) 40%, transparent 45%),
    radial-gradient(1px 1px at 78% 26%, rgba(255,255,255,.18) 40%, transparent 45%),
    radial-gradient(2px 2px at 82% 74%, rgba(255,255,255,.18) 40%, transparent 45%),
    radial-gradient(1px 1px at 22% 76%, rgba(255,255,255,.16) 40%, transparent 45%);
}

.sky__grid{
  opacity:.0;
}

.sky__glow{
  background:
    radial-gradient(700px 520px at 18% 22%, rgba(167,255,109,.12), transparent 62%),
    radial-gradient(760px 580px at 80% 30%, rgba(255,210,106,.10), transparent 65%),
    radial-gradient(900px 650px at 55% 85%, rgba(109,255,176,.08), transparent 70%);
  filter: blur(3px);
}

/* HUD & panels become “amber glass” */
.hud{
  background: linear-gradient(180deg, rgba(5,10,6,.82), rgba(5,10,6,.18));
  border-bottom:1px solid rgba(198,255,178,.14);
}

.brand__logo{
  background: linear-gradient(180deg, rgba(255,210,106,.16), rgba(167,255,109,.10));
  border-color: rgba(198,255,178,.22);
}
.brand__dot--a{ background: var(--lime); box-shadow: 0 0 0 2px rgba(5,10,6,.35), 0 0 18px rgba(167,255,109,.30); }
.brand__dot--b{ background: var(--warn); box-shadow: 0 0 0 2px rgba(5,10,6,.35), 0 0 18px rgba(255,210,106,.30); }
.brand__dot--c{ background: var(--cyan); box-shadow: 0 0 0 2px rgba(5,10,6,.35), 0 0 18px rgba(109,255,176,.25); }

.panel{
  border-color: rgba(198,255,178,.16);
  background: var(--glass);
}
.panel__header{
  border-bottom-color: rgba(198,255,178,.12);
  background: linear-gradient(180deg, rgba(12,28,16,.45), rgba(12,28,16,0));
}

.panel__badge{
  border-color: rgba(167,255,109,.40);
  background: rgba(167,255,109,.08);
}
.panel__badge--alt{
  border-color: rgba(255,210,106,.40);
  background: rgba(255,210,106,.10);
}

.seg{
  border-color: rgba(198,255,178,.14);
  background: rgba(5,10,6,.35);
}
.seg__btn.is-active{
  color: rgba(9, 20, 12, .95);
  background: linear-gradient(180deg, rgba(167,255,109,.95), rgba(167,255,109,.62));
  box-shadow: 0 10px 28px rgba(167,255,109,.14);
}

.btn{
  border-color: rgba(198,255,178,.18);
  background: rgba(198,255,178,.10);
}
.btn--ghost{
  background: rgba(5,10,6,.25);
  border-color: rgba(198,255,178,.16);
}
.btn--primary{
  background: linear-gradient(180deg, rgba(255,210,106,.95), rgba(255,210,106,.62));
  border-color: rgba(255,210,106,.55);
  color: rgba(9, 20, 12, .95);
}

.meter{
  background: rgba(198,255,178,.08);
  border-color: rgba(198,255,178,.14);
}
.meter__bar{
  background: linear-gradient(90deg, rgba(167,255,109,.95), rgba(167,255,109,.25));
  box-shadow: 0 0 0 1px rgba(167,255,109,.22) inset, 0 0 28px rgba(167,255,109,.10);
}
.meter--xp .meter__bar{
  background: linear-gradient(90deg, rgba(255,210,106,.92), rgba(255,210,106,.22));
  box-shadow: 0 0 0 1px rgba(255,210,106,.22) inset, 0 0 28px rgba(255,210,106,.10);
}

.card{
  border-color: rgba(198,255,178,.14);
  background: rgba(5,10,6,.18);
}
.card:hover{
  border-color: rgba(167,255,109,.28);
}
.card__icon{
  background: linear-gradient(180deg, rgba(255,210,106,.14), rgba(167,255,109,.10));
  border-color: rgba(198,255,178,.18);
}
.tag--cyan{
  border-color: rgba(167,255,109,.35);
  background: rgba(167,255,109,.08);
}
.tag--violet{
  border-color: rgba(255,210,106,.38);
  background: rgba(255,210,106,.10);
}

.level{
  border-color: rgba(198,255,178,.14);
  background: rgba(5,10,6,.14);
}
.level__pill{
  border-color: rgba(255,210,106,.30);
  background: rgba(255,210,106,.06);
}
.level__chev{
  border-right-color: rgba(211,236,206,.75);
  border-bottom-color: rgba(211,236,206,.75);
}

/* reduce “tech” feeling slightly */
.sky__grid, .sky__stars{ mix-blend-mode: normal; }