:root{
  color-scheme: dark;
  --pad: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  --fg: #eaf1ff;
  --accent: #ff9a4d;
  --legacy: #c9a4ff;
  --panel-bg: rgba(8,10,20,0.78);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.hidden{ display:none !important; }
html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:#05060c; color:var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  touch-action:none; user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}
#game{ position:fixed; inset:0; display:block; width:100%; height:100%; touch-action:none; }

.overlay{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(ellipse at center, rgba(10,14,28,0.55) 0%, rgba(3,4,10,0.92) 75%);
  backdrop-filter: blur(2px);
  z-index:20;
}
.overlay.hidden{ display:none; }
.overlay h1{
  font-size: clamp(28px, 8vw, 54px); letter-spacing:0.06em; margin:0 0 6px;
  text-shadow:0 0 24px rgba(255,154,77,0.55);
  background:linear-gradient(180deg,#fff, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.overlay p.sub{ font-size: clamp(13px, 3.2vw, 16px); opacity:0.75; margin:0 0 20px; max-width:520px; }
.overlay .credit{ position:absolute; bottom:calc(14px + env(safe-area-inset-bottom,0px)); font-size:12px; opacity:0.5; padding:0 20px; max-width:600px; }
.reset-btn{
  background:transparent; border:none; color:var(--fg); opacity:0.35; font-size:12px;
  letter-spacing:0.05em; cursor:pointer; margin-top:18px; padding:8px 12px;
}
.reset-btn.confirm{ opacity:1; color:#ff6b6b; font-weight:700; }
.seed-input{
  background:var(--panel-bg); border:1px solid rgba(255,255,255,0.15); color:var(--fg);
  border-radius:999px; padding:9px 16px; font-size:13px; text-align:center; letter-spacing:0.08em;
  width:170px; margin:0 0 14px; font-family:monospace;
}
.seed-input::placeholder{ color:rgba(255,255,255,0.4); font-family:inherit; letter-spacing:0.03em; }
.seed-row{
  display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:0.05em;
  opacity:0.8; margin-bottom:18px; font-family:monospace;
}
.seed-chip-btn{
  background:transparent; border:1px solid rgba(255,255,255,0.25); color:var(--fg);
  border-radius:999px; padding:4px 12px; font-size:11px; font-family:inherit; letter-spacing:0.05em;
  cursor:pointer;
}
.bigbtn{
  font-size: clamp(16px, 4.4vw, 22px); font-weight:700; letter-spacing:0.04em;
  color:#1a0e00; background:linear-gradient(180deg,#ffd18a, var(--accent));
  border:none; border-radius:999px; padding:16px 40px; cursor:pointer;
  box-shadow:0 8px 24px rgba(255,154,77,0.35), 0 0 0 2px rgba(255,255,255,0.15) inset;
  animation:pulse 1.8s ease-in-out infinite;
  flex:0 0 auto;
}
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045);} }
.stat-row{ display:flex; gap:22px; margin:6px 0 22px; flex-wrap:wrap; justify-content:center; }
.stat{ background:var(--panel-bg); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 18px; min-width:96px; }
.stat .k{ font-size:12px; letter-spacing:0.1em; opacity:0.6; display:block; }
.stat .v{ font-size:22px; font-weight:700; color:var(--accent); }
.stat.legacy{ border-color: rgba(201,164,255,0.35); }
.stat.legacy .v{ color:var(--legacy); }
.sub b{ color:var(--legacy); }
.start-preview{
  font-size:13px; letter-spacing:0.04em; opacity:0.7; margin:-8px 0 4px;
  color:var(--legacy); min-height:16px;
}
.start-difficulty{
  font-size:11px; letter-spacing:0.04em; opacity:0.5; margin:0 0 18px; min-height:14px;
}

.chronicle-stats{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-size:12px;
  opacity:0.7; letter-spacing:0.03em; margin:2px 0 14px; max-width:520px;
}
.chronicle-stats b{ color:var(--legacy); }

.retire-panel{
  width:100%; max-width:520px; margin:0 0 16px; text-align:left;
}
.retire-btn{
  width:100%; background:linear-gradient(180deg,#e0c8ff, var(--legacy));
  color:#1a0e2e; font-weight:700; border:none; border-radius:12px;
  padding:14px 18px; font-size:14px; letter-spacing:0.03em; cursor:pointer;
}
.retire-btn.confirm{ background:linear-gradient(180deg,#ffb3b3,#ff6b6b); color:#2e0a0a; }
.retire-locked{
  font-size:13px; opacity:0.6; background:var(--panel-bg); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:12px 16px;
}
.retire-locked b{ color:var(--legacy); }

.chronicle-entry{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--panel-bg); border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  padding:10px 14px; margin-bottom:8px;
}
.chronicle-entry .chronicle-body{ flex:1 1 auto; min-width:0; }
.chronicle-entry .chronicle-epitaph{ font-size:13px; line-height:1.5; }
.chronicle-entry .chronicle-meta{ font-size:11px; opacity:0.5; margin-top:4px; letter-spacing:0.04em; }
.chronicle-entry.ascended{ border-color: rgba(201,164,255,0.35); }
.chronicle-share-btn{
  flex:0 0 auto; pointer-events:auto; background:transparent; color:var(--fg);
  border:1px solid rgba(255,255,255,0.25); border-radius:999px; padding:6px 12px;
  font-size:11px; letter-spacing:0.04em; cursor:pointer;
}
.chronicle-empty{ font-size:13px; opacity:0.55; padding:12px 4px; text-align:left; }

.bigbtn.secondary{
  background:transparent; color:var(--fg); box-shadow:none; animation:none;
  border:1px solid rgba(255,255,255,0.25); font-size:14px; padding:10px 26px; margin-top:10px;
}

#hud{ position:fixed; inset:0; pointer-events:none; z-index:10; padding:var(--pad); }
#hud.hidden{ display:none; }
.hud-corner{ position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); display:flex; gap:8px; align-items:center; }
.hud-corner.right{ right:calc(10px + env(safe-area-inset-right,0px)); }
.hud-corner.center-top{ left:50%; transform:translateX(-50%); flex-wrap:wrap; justify-content:center; max-width:calc(100% - 20px); }
.pill{
  background:var(--panel-bg); border:1px solid rgba(255,255,255,0.08); border-radius:999px;
  padding:6px 14px; font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:0.03em;
  white-space:nowrap;
}
.pill b{ color:var(--accent); }
.iconbtn{
  pointer-events:auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.12);
  background:var(--panel-bg); color:var(--fg); font-size:16px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto;
}
.iconbtn:active{ transform:scale(0.92); }
.iconbtn.cooldown{ opacity:0.45; font-size:12px; font-variant-numeric:tabular-nums; }

.center-btn{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; font-size:26px; z-index:11;
  box-shadow:0 0 18px rgba(255,154,77,0.4), 0 0 0 2px rgba(255,255,255,0.15) inset;
  animation:centerPulse 2.2s ease-in-out infinite;
}
.center-btn:active{ animation:none; transform:translate(-50%,-50%) scale(0.92); }
@keyframes centerPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.08); } }

.hud-abilities{
  position:fixed; bottom:calc(16px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:10; pointer-events:none;
}
.hud-abilities .iconbtn{ pointer-events:auto; }

.planet-name-label{
  position:fixed; top:calc(52px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%);
  z-index:10; pointer-events:none; font-size:12px; letter-spacing:0.05em; opacity:0.55;
  color:var(--fg); white-space:nowrap; text-align:center;
}

.era-toast{
  position:fixed; top:calc(140px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%);
  z-index:10; pointer-events:none; font-size:13px; line-height:1.5; text-align:center;
  color:var(--fg); background:var(--panel-bg); border:1px solid rgba(201,164,255,0.4); border-radius:14px;
  padding:10px 20px; max-width:min(360px, calc(100% - 32px)); box-shadow:0 0 20px rgba(201,164,255,0.2);
  animation:eraToastIn 0.4s ease-out;
}
.era-toast b{ color:var(--legacy); letter-spacing:0.04em; }
.era-toast.fade-out{ animation:eraToastOut 0.5s ease-in forwards; }
@keyframes eraToastIn{ from{ opacity:0; transform:translateX(-50%) translateY(-8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes eraToastOut{ from{ opacity:1; } to{ opacity:0; } }

.radar-warning{
  position:fixed; top:calc(100px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%);
  z-index:10; pointer-events:none; font-size:12px; font-weight:700; letter-spacing:0.05em;
  color:#ffb15c; background:var(--panel-bg); border:1px solid rgba(255,154,77,0.4); border-radius:999px;
  padding:6px 14px; animation:radarPulse 1s ease-in-out infinite; white-space:nowrap;
}
@keyframes radarPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }

#fps{ position:absolute; bottom:6px; left:6px; font-size:10px; opacity:0.5; font-family:monospace; pointer-events:none; }
#fps.hidden{ display:none; }

/* --- Tutorial --- */
.tutorial-overlay{ z-index:21; }
.tutorial-icon{ font-size:64px; margin-bottom:8px; }
.skip-btn{
  position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:calc(16px + env(safe-area-inset-right,0px));
  background:transparent; border:1px solid rgba(255,255,255,0.3); color:var(--fg); border-radius:999px;
  padding:8px 16px; font-size:13px; font-weight:700; letter-spacing:0.05em; cursor:pointer;
}
.tutorial-dots{ display:flex; gap:8px; margin:6px 0 22px; }
.tutorial-dots .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.25); }
.tutorial-dots .dot.active{ background:var(--accent); }

/* --- Tech tree panel --- */
.overlay.tech-overlay{
  justify-content:flex-start; z-index:25;
  padding-top:calc(20px + env(safe-area-inset-top,0px));
}
.overlay.tech-overlay h1{ margin-bottom:4px; }
.tech-list{
  width:100%; max-width:520px; flex:1 1 auto; min-height:0;
  overflow-y:auto; touch-action:pan-y;
  padding:0 4px 8px;
}
.tech-era-header{ display:flex; justify-content:space-between; align-items:baseline; margin:16px 2px 6px; opacity:0.85; }
.tech-era-header:first-child{ margin-top:0; }
.tech-era-name{ font-size:14px; letter-spacing:0.06em; font-weight:700; color:var(--accent); }
.tech-era-tag{ font-size:12px; opacity:0.55; }
.tech-era-empty{ font-size:12px; opacity:0.45; padding:0 4px 10px; text-align:left; }
.tech-node{
  display:flex; flex-direction:column; gap:4px; text-align:left;
  background:var(--panel-bg); border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  padding:10px 14px; margin-bottom:8px; cursor:pointer;
}
.tech-node.owned{ border-color: rgba(120,220,150,0.5); opacity:0.75; }
.tech-node.affordable{ border-color: rgba(255,154,77,0.6); }
/* "locked" = hard-blocked (prereq not met yet); dimmed with a neutral border
   so it reads as genuinely unavailable, not just undecorated. */
.tech-node.locked{ opacity:0.55; border-color: rgba(255,255,255,0.16); cursor:default; }
/* "unaffordable" = a real, valid purchase you just can't afford yet — kept
   near full opacity with a warm red-tinted border/cost so it's obviously
   distinct from "locked" and doesn't look identical to plain unstyled text
   (the original bug: opacity:0.5 on an already-faint border vanished
   entirely, making it indistinguishable from an "available" card). */
.tech-node.unaffordable{ opacity:0.92; border-color: rgba(255,120,110,0.4); cursor:default; }
.tech-node.unaffordable .tech-node-cost{ color:#ff9a90; }
.tech-node-name{ font-weight:700; font-size:15px; }
.tech-node-desc{ font-size:13px; opacity:0.75; }
.tech-node-cost{ font-size:13px; color:var(--accent); font-weight:700; }
.tech-node.owned .tech-node-cost{ color:#7be49a; }