@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&display=swap');

/*
  savanna-bg.css — premium reskin
  Add after styles.css on every page EXCEPT splash.html
*/

/* Crisp SVG savanna background, never blurry */
html, body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%231a0a00'/%3E%3Cstop offset='18%25' stop-color='%234a2008'/%3E%3Cstop offset='42%25' stop-color='%23b06020'/%3E%3Cstop offset='65%25' stop-color='%23e08840'/%3E%3Cstop offset='82%25' stop-color='%23f0b060'/%3E%3Cstop offset='100%25' stop-color='%23f8d898'/%3E%3C/linearGradient%3E%3ClinearGradient id='grd' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23a05418'/%3E%3Cstop offset='100%25' stop-color='%23301804'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='50%25' cy='60%25' r='22%25'%3E%3Cstop offset='0%25' stop-color='%23ffe880' stop-opacity='0.45'/%3E%3Cstop offset='100%25' stop-color='%23ff8800' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23sky)'/%3E%3Crect width='1440' height='900' fill='url(%23sun)'/%3E%3Crect y='590' width='1440' height='310' fill='url(%23grd)'/%3E%3Crect y='576' width='1440' height='22' fill='%23c07830'/%3E%3Cg fill='%23d49030' opacity='0.65'%3E%3Cellipse cx='50' cy='588' rx='20' ry='24'/%3E%3Cellipse cx='80' cy='582' rx='15' ry='19'/%3E%3Cellipse cx='180' cy='586' rx='22' ry='27'/%3E%3Cellipse cx='220' cy='580' rx='16' ry='20'/%3E%3Cellipse cx='370' cy='587' rx='21' ry='25'/%3E%3Cellipse cx='420' cy='581' rx='14' ry='18'/%3E%3Cellipse cx='560' cy='585' rx='23' ry='28'/%3E%3Cellipse cx='610' cy='579' rx='16' ry='20'/%3E%3Cellipse cx='780' cy='587' rx='20' ry='24'/%3E%3Cellipse cx='830' cy='581' rx='15' ry='18'/%3E%3Cellipse cx='980' cy='585' rx='22' ry='26'/%3E%3Cellipse cx='1030' cy='579' rx='16' ry='21'/%3E%3Cellipse cx='1180' cy='586' rx='21' ry='25'/%3E%3Cellipse cx='1230' cy='580' rx='14' ry='18'/%3E%3Cellipse cx='1380' cy='585' rx='20' ry='24'/%3E%3C/g%3E%3Cg stroke='%23501808' stroke-width='7' stroke-linecap='round' fill='none'%3E%3Cline x1='140' y1='582' x2='140' y2='472'/%3E%3Cline x1='140' y1='512' x2='108' y2='487'/%3E%3Cline x1='140' y1='500' x2='174' y2='477'/%3E%3C/g%3E%3Cellipse cx='132' cy='460' rx='36' ry='24' fill='%23224a08' opacity='0.95'/%3E%3Cellipse cx='150' cy='450' rx='30' ry='20' fill='%232e6010'/%3E%3Cellipse cx='140' cy='440' rx='24' ry='16' fill='%233a7414'/%3E%3Cg stroke='%23501808' stroke-width='8' stroke-linecap='round' fill='none'%3E%3Cline x1='740' y1='578' x2='740' y2='448'/%3E%3Cline x1='740' y1='488' x2='700' y2='458'/%3E%3Cline x1='740' y1='475' x2='782' y2='446'/%3E%3Cline x1='740' y1='465' x2='718' y2='443'/%3E%3C/g%3E%3Cellipse cx='724' cy='434' rx='42' ry='27' fill='%23224a08' opacity='0.95'/%3E%3Cellipse cx='748' cy='422' rx='34' ry='22' fill='%232e6010'/%3E%3Cellipse cx='736' cy='412' rx='28' ry='18' fill='%233a7414'/%3E%3Cellipse cx='760' cy='426' rx='22' ry='15' fill='%23306010'/%3E%3Cg stroke='%23501808' stroke-width='6' stroke-linecap='round' fill='none'%3E%3Cline x1='1060' y1='580' x2='1060' y2='482'/%3E%3Cline x1='1060' y1='516' x2='1032' y2='495'/%3E%3Cline x1='1060' y1='506' x2='1090' y2='487'/%3E%3C/g%3E%3Cellipse cx='1046' cy='468' rx='34' ry='22' fill='%23224a08' opacity='0.95'/%3E%3Cellipse cx='1068' cy='458' rx='28' ry='18' fill='%232e6010'/%3E%3Cellipse cx='1056' cy='449' rx='22' ry='14' fill='%233a7414'/%3E%3Cg fill='%23804010' opacity='0.28'%3E%3Cellipse cx='280' cy='640' rx='70' ry='16'/%3E%3Cellipse cx='680' cy='670' rx='90' ry='18'/%3E%3Cellipse cx='1080' cy='655' rx='80' ry='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  image-rendering: auto;
}

body::before, body::after { display: none !important; }

/* ── Cinzel serif for all headings site-wide ── */
h1, h2, h3 {
  font-family: 'Cinzel', serif !important;
}

/* ── Header — dark glass ── */
.site-header {
  background:
    linear-gradient(180deg, rgba(12,6,0,0.72), rgba(12,6,0,0.58)) !important;
  border-color: rgba(255, 200, 80, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.brand {
  color: #f5d888 !important;
}

.brand-mark {
  background: linear-gradient(135deg, #f5c040, #c07820) !important;
  color: #1e0e00 !important;
  box-shadow: 0 0 12px rgba(240, 160, 40, 0.4) !important;
}

.site-nav a {
  color: rgba(255, 230, 160, 0.78) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.site-nav a:hover,
.site-nav a.active {
  background: rgba(245, 192, 70, 0.16) !important;
  color: #f5d888 !important;
}

/* ── Panels — darker, richer ── */
.hero-banner, .panel, .mode-board {
  background:
    linear-gradient(180deg, rgba(40,18,4,0.78), rgba(28,12,2,0.82)) !important;
  border-color: rgba(255, 200, 80, 0.16) !important;
  color: #f0deb8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Cards ── */
.score-card, .feature-card, .mode-card, .guide-card, .mini-card,
.ecosystem-card, .species-card, .bank-card, .roster-card,
.teacher-tool-panel, .foodweb-score-card, .foodweb-legend,
.impact-line, .research-result, .guess-row {
  background: rgba(30,14,2,0.72) !important;
  border-color: rgba(255, 200, 80, 0.16) !important;
  color: #f0deb8 !important;
}

.mode-card {
  background:
    linear-gradient(180deg, rgba(50,22,4,0.82), rgba(32,14,2,0.88)) !important;
}

/* ── Text ── */
.eyebrow {
  color: #e8a840 !important;
}

.hero-copy, .section-copy, p, .muted,
.feature-card p, .mode-card p, .guide-card p,
.score-card span, .species-card p, .impact-line p,
.bank-card p, .roster-card p {
  color: rgba(240, 210, 160, 0.78) !important;
}

/* ── Buttons ── */
.primary-button {
  background: linear-gradient(135deg, #c87820, #8a4c10) !important;
  border-color: rgba(255, 200, 80, 0.32) !important;
  color: #fff8e8 !important;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
  font-size: 0.88rem;
}

.ghost-button, .secondary-button {
  background: rgba(255, 200, 80, 0.08) !important;
  border-color: rgba(255, 200, 80, 0.28) !important;
  color: #f0d080 !important;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
  font-size: 0.88rem;
}

.primary-button:hover {
  background: linear-gradient(135deg, #e08c28, #a05a14) !important;
}

.ghost-button:hover, .secondary-button:hover {
  background: rgba(255, 200, 80, 0.16) !important;
}

/* ── Mode number badges ── */
.mode-number {
  background: linear-gradient(135deg, #c87820, #6a3808) !important;
  color: #fff8e0 !important;
}

/* ── Board status pill ── */
.board-status {
  background: rgba(200, 120, 30, 0.22) !important;
  border-color: rgba(200, 120, 30, 0.38) !important;
  color: #e8a840 !important;
}

/* ── Tags/pills ── */
.tag, .origin-pill, .native-pill {
  background: rgba(200, 120, 30, 0.18) !important;
  color: #e8b050 !important;
}

.wild-pill {
  background: rgba(180, 80, 20, 0.22) !important;
  color: #f08040 !important;
}

/* ── Select / input fields ── */
select, input[type="text"], textarea, input[type="password"] {
  background: rgba(20,10,2,0.72) !important;
  border-color: rgba(255, 200, 80, 0.22) !important;
  color: #f0deb8 !important;
}

select:focus, input:focus, textarea:focus {
  border-color: rgba(255, 200, 80, 0.55) !important;
  outline: none !important;
}

/* ── SVG graph area ── */
.web-stage {
  background:
    radial-gradient(circle at center, rgba(200,130,40,0.12), transparent 56%),
    rgba(20,10,2,0.6) !important;
  border-color: rgba(255, 200, 80, 0.16) !important;
}

/* ── Food-web score card special ── */
.foodweb-score-card strong { color: #f5c060 !important; }

/* ── Reset button ── */
#reset-world {
  border-color: rgba(200, 80, 40, 0.38) !important;
  color: #e88060 !important;
}
#reset-world:hover {
  background: rgba(200, 80, 40, 0.16) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(10,4,0,0.4); }
::-webkit-scrollbar-thumb { background: rgba(200,120,30,0.5); border-radius: 3px; }