/* TERRA — dark glass UI over the living planet */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #04060d; }
body {
  font: 13px/1.45 system-ui, "Segoe UI", sans-serif;
  color: #dfe6ee;
  user-select: none;
  -webkit-user-select: none;
}
canvas#bg, canvas#main { position: fixed; inset: 0; display: block; }
canvas#main { cursor: crosshair; }

.hidden { display: none !important; }
.dim { color: #8d97a5; }
.pad { padding: 14px; }

/* ---------- splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(ellipse at center, #0a1020 0%, #04060d 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; transition: opacity .5s;
}
#splash.hidden { display: none !important; }
.splash-globe {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffe9b0 0%, #ff9a33 26%, #b8401e 42%, #6e2c14 55%, #2c4a6e 78%, #16304e 100%);
  box-shadow: 0 0 60px rgba(255,150,60,.35), 0 0 120px rgba(80,140,255,.18);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.06); } }
.splash-title { font-size: 34px; font-weight: 700; letter-spacing: .35em; margin-left: .35em; }
.splash-sub { color: #8d97a5; letter-spacing: .12em; }
#splashmsg { margin-top: 16px; color: #5d6b7c; font-size: 12px; }

/* ---------- top bar ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 14px; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.brand b { font-size: 17px; letter-spacing: .3em; }
.brand .dim { display: block; font-size: 10.5px; margin-top: 2px; }
.timebox { text-align: center; }
#clock {
  font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
#speedbar { margin-top: 6px; display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
#speedhint { font-size: 10.5px; margin-top: 4px; max-width: 460px; }
.actions { display: flex; gap: 6px; }

/* ---------- chips & buttons ---------- */
.chip, .spd {
  background: rgba(18, 26, 40, .78); color: #cfd8e3;
  border: 1px solid rgba(130,160,200,.25);
  border-radius: 7px; padding: 4px 10px; font-size: 12px;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s;
}
.chip:hover, .spd:hover { background: rgba(40, 55, 80, .85); }
.chip.on, .spd.on { background: rgba(64, 120, 180, .55); border-color: #7fd4ff; color: #fff; }
.spd { padding: 3px 8px; font-size: 11.5px; }
.chip:disabled { opacity: .4; cursor: default; }

/* ---------- deep-time accelerators: depth ramp + first-run glow ---------- */
.spd[data-depth] { border-color: rgba(255, 185, 110, .38); }
.spd[data-depth="1"] { box-shadow: inset 0 -2px 0 rgba(255, 190, 110, .4); }
.spd[data-depth="2"] { box-shadow: inset 0 -2px 0 rgba(255, 165, 80, .55); }
.spd[data-depth="3"] { box-shadow: inset 0 -2px 0 rgba(255, 138, 52, .7); }
.spd[data-depth="4"] { box-shadow: inset 0 -2px 0 rgba(255, 108, 28, .85); }
.spd[data-depth]:hover { background: rgba(82, 56, 30, .85); border-color: rgba(255, 195, 127, .8); }
.spd[data-depth].on { background: rgba(190, 112, 40, .55); border-color: #ffc37f; }
#speedbar.fresh .spd[data-depth] { animation: spdGlow 2.6s ease-in-out infinite; }
#speedbar.fresh .spd[data-depth="2"] { animation-delay: .25s; }
#speedbar.fresh .spd[data-depth="3"] { animation-delay: .5s; }
#speedbar.fresh .spd[data-depth="4"] { animation-delay: .75s; }
@keyframes spdGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 160, 70, 0), inset 0 -2px 0 rgba(255, 160, 70, .5); }
  50% { box-shadow: 0 0 9px rgba(255, 160, 70, .6), inset 0 -2px 0 rgba(255, 160, 70, .9); }
}

/* ---------- stats strip ---------- */
#stats {
  position: fixed; top: 86px; left: 50%; transform: translateX(-50%);
  z-index: 15; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: 80vw; pointer-events: none;
}
.stat {
  background: rgba(10, 16, 28, .6); border: 1px solid rgba(130,160,200,.16);
  border-radius: 6px; padding: 2px 8px; font-size: 11px;
  font-variant-numeric: tabular-nums; backdrop-filter: blur(4px);
}
.stat i { font-style: normal; color: #7d8a9b; margin-right: 5px; font-size: 10px; }

/* ---------- panels ---------- */
.panel {
  position: fixed; z-index: 18;
  background: rgba(12, 18, 30, .88); border: 1px solid rgba(130,160,200,.22);
  border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(8px);
  box-shadow: 0 6px 30px rgba(0,0,0,.5);
}
#layerbox { left: 12px; top: 110px; width: 148px; display: flex; flex-direction: column; gap: 4px; }
#layerbox .chip { text-align: left; }
.paneltitle { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #7d8a9b; margin: 6px 0 2px; }
.paneltitle:first-child { margin-top: 0; }

#inspector {
  right: 12px; top: 110px; width: 320px; max-height: calc(100vh - 220px);
  overflow-y: auto; pointer-events: auto;
}
#inspector.pinned { border-color: #7fd4ff; }
.ititle { font-size: 14.5px; font-weight: 650; margin-bottom: 7px; color: #fff; }
.itable { width: 100%; border-collapse: collapse; }
.itable td { padding: 2.5px 0; vertical-align: top; font-size: 12px; }
.itable td:first-child { color: #8d97a5; padding-right: 10px; white-space: nowrap; width: 42%; }
.isub { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #7d8a9b; margin: 10px 0 5px; }
.bars .bar { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.bsym { width: 22px; font-weight: 600; font-size: 11px; text-align: right; }
.bfill { flex: 1; height: 7px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.bfill i { display: block; height: 100%; background: linear-gradient(90deg, #4a90c9, #7fd4ff); border-radius: 4px; }
.bval { width: 52px; font-size: 10.5px; color: #9daab8; font-variant-numeric: tabular-nums; }
.mins .min { font-size: 11.5px; padding: 1.5px 0; }
.formula { color: #9daab8; }
.mpct { color: #7d8a9b; font-size: 10.5px; }
.facts { margin-top: 9px; }
.fact {
  font-size: 11.5px; color: #b9c4d1; padding: 5px 8px; margin: 4px 0;
  background: rgba(80, 130, 190, .10); border-left: 2px solid rgba(127, 212, 255, .5);
  border-radius: 0 6px 6px 0;
}
.fact.dim { color: #8d97a5; border-left-color: rgba(130,140,160,.4); }
.iclose {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  background: none; border: none; color: #8d97a5; font-size: 14px; cursor: pointer;
}
.iclose:hover { color: #fff; }

/* ---------- events feed ---------- */
#events {
  position: fixed; left: 12px; bottom: 36px; z-index: 15; width: 330px;
  display: flex; flex-direction: column-reverse; gap: 4px; pointer-events: auto;
}
.ev {
  background: rgba(12, 18, 30, .82); border: 1px solid rgba(130,160,200,.18);
  border-left: 3px solid #6f8fb0;
  border-radius: 6px; padding: 5px 9px; font-size: 11.5px; cursor: pointer;
  backdrop-filter: blur(5px);
}
.ev:hover { border-color: #7fd4ff; }
.evt { color: #7d8a9b; font-size: 10px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.ev-orogeny, .ev-weld { border-left-color: #c98a4a; }
.ev-rift, .ev-flood { border-left-color: #ff7b4f; }
.ev-subduction, .ev-quake { border-left-color: #3d6fd9; }
.ev-reversal, .ev-dynamo-death { border-left-color: #c97bd9; }
.ev-oil, .ev-gas, .ev-evaporite { border-left-color: #d9c34a; }
.ev-snowball, .ev-thaw { border-left-color: #9fd8e8; }
.ev-boil { border-left-color: #ff4a3a; }
.ev-kimberlite { border-left-color: #b9f2ff; }

/* ---------- tour ---------- */
#tourcard {
  left: 50%; transform: translateX(-50%); bottom: 38px; width: 540px; max-width: 92vw;
  z-index: 25;
}
.tourtext { font-size: 13px; color: #c9d3df; margin: 4px 0 10px; }
.tourbtns { display: flex; gap: 8px; }

/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40; background: rgba(2, 4, 10, .72);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modalbody {
  position: relative;
  background: rgba(12, 18, 30, .96); border: 1px solid rgba(130,160,200,.25);
  border-radius: 14px; padding: 20px 22px; max-width: 1040px; max-height: 88vh;
  overflow-y: auto; box-shadow: 0 20px 80px rgba(0,0,0,.7);
}
.modaltitle { font-size: 17px; font-weight: 650; margin-bottom: 12px; }
.modalbody.about { width: 680px; }
.modalbody.about p { margin: 9px 0; font-size: 12.5px; color: #c2cdda; }
.modalbody.about code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }

/* ---------- periodic table ---------- */
#ptlegend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lg { font-size: 11px; color: #aab6c4; display: flex; align-items: center; gap: 5px; }
.lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ptwrap { display: flex; gap: 16px; align-items: flex-start; }
#ptgrid {
  display: grid;
  grid-template-columns: repeat(18, 34px);
  grid-auto-rows: 38px;
  gap: 3px;
}
.ptcell {
  border-radius: 5px; border: 1px solid;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .08s;
  line-height: 1.1;
}
.ptcell:hover { transform: scale(1.18); z-index: 2; }
.ptcell i { font-style: normal; font-size: 7.5px; color: rgba(255,255,255,.55); }
.ptcell b { font-size: 12.5px; color: #fff; }
#ptcard { width: 300px; min-height: 200px; }
.elhead { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.elsym {
  font-size: 26px; font-weight: 700; border: 2px solid; border-radius: 9px;
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
}
.elname { font-size: 15px; font-weight: 650; }
.elz { font-size: 11px; color: #8d97a5; font-weight: 400; }
.elcat { font-size: 11px; color: #9daab8; }
.foundas { font-size: 12px; color: #c2cdda; }
.resdots { display: flex; gap: 10px; margin: 6px 0 12px; }
.rd { font-size: 10px; color: #8d97a5; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rd i { width: 16px; height: 16px; border-radius: 50%; background: #7fd4ff; display: block; }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: rgba(130,160,200,.25); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
  #layerbox { display: none; }
  #inspector { width: 270px; top: 130px; }
  #stats { display: none; }
  .ptwrap { flex-direction: column; }
  #ptgrid { grid-template-columns: repeat(18, 4.6vw); grid-auto-rows: 5.2vw; }
}