:root{
  --void:#070a12;
  --deep:#0d1424;
  --panel:#111a2e;
  --panel2:#0f172b;
  --ice:#e8f0fb;
  --mist:#9fb2cf;
  --teal:#2dd4bf;
  --amber:#f5a623;
  --glow:rgba(45,212,191,.35);
  --line:rgba(120,160,210,.14);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(45,212,191,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 20%, rgba(120,80,220,.10), transparent 55%),
    var(--void);
  color:var(--ice);
  font-family:'Cormorant Garamond', Georgia, serif;
  min-height:100vh;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff2,transparent),
    radial-gradient(1px 1px at 60% 70%,#fff2,transparent),
    radial-gradient(1px 1px at 80% 15%,#fff3,transparent),
    radial-gradient(1px 1px at 40% 85%,#fff2,transparent),
    radial-gradient(1px 1px at 90% 55%,#fff2,transparent);
}
.app{max-width:1100px;margin:0 auto;padding:0 16px 40px;position:relative;z-index:1}

/* Header */
.hdr{position:relative;text-align:center;padding:48px 10px 26px;overflow:hidden}
.aurora{position:absolute;inset:-40% -20% auto;height:200px;
  background:radial-gradient(60% 80% at 50% 0,var(--glow),transparent 70%);
  filter:blur(20px);animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-6%) scaleX(1)}to{transform:translateX(6%) scaleX(1.2)}}
.planet-glyph{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #7be0d0, #145 60%, #071 90%);
  box-shadow:0 0 30px var(--glow), inset -6px -8px 14px #0008;
  animation:spin 22s linear infinite;position:relative;z-index:2}
@keyframes spin{to{transform:rotate(360deg)}}
.hdr-title{font-size:clamp(2.2rem,6vw,4rem);font-weight:700;letter-spacing:.06em;margin:0;
  color:var(--ice);text-shadow:0 0 24px var(--glow);position:relative;z-index:2}
.hdr-sub{font-style:italic;color:var(--mist);margin:8px 0 0;font-size:1.05rem;position:relative;z-index:2}

/* Auth */
.auth{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--mist);margin-bottom:6px}
.auth-btn{background:none;border:1px solid var(--line);color:var(--teal);padding:4px 10px;border-radius:6px;cursor:pointer;font-family:inherit}
.auth-btn:hover{border-color:var(--teal)}

/* Nav */
.nav{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:2px;margin-bottom:24px}
.nav-btn{background:none;border:none;color:var(--mist);font-family:'IBM Plex Mono',monospace;
  font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;padding:10px 16px;cursor:pointer;
  border-bottom:2px solid transparent;transition:.2s}
.nav-btn:hover{color:var(--ice)}
.nav-on{color:var(--amber);border-bottom-color:var(--amber);text-shadow:0 0 14px rgba(245,166,35,.5)}

/* Panel */
.panel{animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-intro{color:var(--mist);font-size:1.15rem;line-height:1.5;max-width:720px;margin:0 auto 24px;text-align:center}

/* AI Image */
.aiimg-wrap{position:relative;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.aiimg{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:saturate(1.05)}
.aiimg-on{opacity:1}
.aiimg-skel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(110deg,var(--panel2),#16223d,var(--panel2));background-size:220% 100%;
  animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.aiimg-skel-txt{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--mist);letter-spacing:.1em}
.shell-glyph{font-size:2rem;color:var(--teal);opacity:.4}

/* Timeline */
.era-panorama{border-radius:14px;overflow:hidden;aspect-ratio:2/1;margin-bottom:6px;box-shadow:0 20px 60px #000a}
.era-panorama .aiimg-wrap{width:100%;height:100%}
.timeline-track{display:flex;justify-content:space-between;position:relative;margin:26px 8px 8px}
.timeline-track::before{content:'';position:absolute;left:6px;right:6px;top:6px;height:2px;background:var(--line)}
.tl-node{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:6px;position:relative;flex:1;padding:0}
.tl-dot{width:14px;height:14px;border-radius:50%;background:var(--panel);border:2px solid var(--mist);transition:.25s}
.tl-past .tl-dot{border-color:var(--teal);background:var(--teal)}
.tl-on .tl-dot{border-color:var(--amber);background:var(--amber);box-shadow:0 0 16px var(--amber);transform:scale(1.4)}
.tl-ma{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:var(--mist);white-space:nowrap}
.tl-on .tl-ma{color:var(--amber)}

.era-card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:14px;padding:24px;margin-top:20px}
.era-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.era-title{font-size:2rem;font-weight:500;margin:0;color:var(--ice)}
.era-idx{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--mist);letter-spacing:.1em}
.era-lore{font-size:1.2rem;line-height:1.55;color:#cdd9ec;margin:14px 0 18px}
.era-meters{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.meter-lbl{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--mist);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.meter-bar{height:6px;background:#0a1120;border-radius:4px;overflow:hidden}
.meter-fill{height:100%;transition:width .6s ease}
.era-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Buttons */
.btn{background:var(--panel);border:1px solid var(--line);color:var(--ice);font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.08em;padding:10px 16px;border-radius:8px;cursor:pointer;transition:.2s}
.btn:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-amber{border-color:rgba(245,166,35,.5);color:var(--amber)}
.btn-amber:hover:not(:disabled){background:rgba(245,166,35,.12);color:var(--amber);border-color:var(--amber)}
.btn-big{padding:14px 26px;font-size:.85rem}

/* Bestiary */
.filters{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip-lbl{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:var(--mist);text-transform:uppercase;letter-spacing:.1em;margin-right:4px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--mist);font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;padding:5px 11px;border-radius:20px;cursor:pointer;transition:.2s}
.chip:hover{color:var(--ice)}
.chip-on{background:var(--teal);color:#04211d;border-color:var(--teal);font-weight:600}
.discover-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.count{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--mist)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.empty{color:var(--mist);font-style:italic;grid-column:1/-1;text-align:center;padding:40px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  cursor:pointer;transition:.25s;animation:fade .4s ease}
.card:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 14px 40px #000a,0 0 22px var(--glow)}
.card-img{aspect-ratio:4/3;width:100%}
.card-img .aiimg-wrap{width:100%;height:100%}
.card-body{padding:12px 14px}
.card-name{font-style:italic;font-size:1.25rem;margin:0 0 8px;color:var(--ice)}
.card-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-family:'IBM Plex Mono',monospace;font-size:.6rem;padding:3px 8px;border-radius:5px;
  background:#0a1424;border:1px solid var(--line);color:var(--mist);text-transform:uppercase;letter-spacing:.06em}
.tag-biome{color:var(--teal);border-color:rgba(45,212,191,.3)}
.fav-btn{position:absolute;top:8px;right:8px;z-index:3;background:#0009;border:1px solid var(--line);
  color:var(--mist);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.9rem;backdrop-filter:blur(4px)}
.fav-btn:hover{color:var(--amber);border-color:var(--amber)}
.fav-on{color:var(--amber);border-color:var(--amber);text-shadow:0 0 10px var(--amber)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(5,8,16,.82);backdrop-filter:blur(6px);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .25s ease}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:620px;width:100%;
  max-height:92vh;overflow:auto;position:relative;box-shadow:0 30px 80px #000c}
.modal-x{position:absolute;top:12px;right:12px;z-index:3;background:#0009;border:1px solid var(--line);
  color:var(--ice);width:34px;height:34px;border-radius:50%;cursor:pointer}
.modal-img{aspect-ratio:3/2;width:100%;border-radius:16px 16px 0 0}
.modal-img .aiimg-wrap{width:100%;height:100%;border:none}
.modal-body{padding:22px}
.modal-name{font-style:italic;font-size:2rem;margin:0 0 10px;color:var(--ice)}
.modal-desc{font-size:1.2rem;line-height:1.55;color:#cdd9ec;margin:14px 0}
.taxo{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--mist);display:grid;gap:6px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:14px 0}
.taxo-k{color:var(--teal);letter-spacing:.08em;text-transform:uppercase;font-size:.62rem}

/* Cartography */
.map{position:relative;aspect-ratio:16/10;margin:0 auto 20px;max-width:760px;border-radius:16px;
  border:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(50% 60% at 30% 55%, rgba(45,212,191,.18), transparent 60%),
    radial-gradient(40% 50% at 72% 30%, rgba(245,166,35,.12), transparent 60%),
    repeating-linear-gradient(45deg,#0c1526,#0c1526 10px,#0e1830 10px,#0e1830 20px)}
.compass{position:absolute;top:12px;right:16px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--mist);letter-spacing:.2em}
.region{position:absolute;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:top .8s ease,left .8s ease}
.region-pin{width:16px;height:16px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px var(--teal);
  transition:.2s}
.region:hover .region-pin,.region-on .region-pin{background:var(--amber);box-shadow:0 0 18px var(--amber);transform:scale(1.3)}
.region-lbl{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--ice);background:#0009;padding:2px 6px;border-radius:4px;white-space:nowrap}
.endemic-line{color:var(--mist);font-size:1.05rem;margin:12px 0 0}

/* Ossuary */
.ossuary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.ossuary-card{background:linear-gradient(180deg,var(--panel),#0a0f1c);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.oss-img{aspect-ratio:1/1;width:100%}
.oss-img .aiimg-wrap{width:100%;height:100%}
.oss-body{padding:16px}
.oss-caste{font-size:1.4rem;font-weight:500;margin:0 0 6px;color:var(--amber)}
.oss-cap{color:var(--mist);font-size:1.05rem;margin:0 0 14px;line-height:1.4}
.oss-trans{font-style:italic;font-size:1.15rem;line-height:1.55;color:#d8e4f5;border-left:2px solid var(--teal);padding-left:12px;margin:0}

/* Footer */
.ftr{margin-top:50px;padding-top:22px;border-top:1px solid var(--line);text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--mist);display:flex;
  flex-direction:column;gap:8px}
.ftr-link{color:var(--teal);text-decoration:none;border-bottom:1px dotted var(--teal)}
.ftr-link:hover{color:var(--amber);border-color:var(--amber)}

@media(max-width:560px){
  .era-meters{grid-template-columns:1fr}
  .era-title{font-size:1.5rem}
  .tl-ma{font-size:.5rem}
}