:root {
  --sand: #e8c06a;
  --sand-hot: #f4d48a;
  --orange: #e07038;
  --orange-hot: #f4a050;
  --sun: #ffe060;
  --navy: #1c1830;
  --navy-2: #2a2440;
  --ink: #f4f1ea;
  --muted: #c8bca8;
  --teal: #2a8898;
  --gold: #f0c430;
  --purple-sky: #3a2068;
  --dusk: #c06070;
  --ghost: #8a48d8;
  --pill: rgba(28, 24, 40, 0.90);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #140e1c;
  color: var(--ink);
  font-family: "Pixelify Sans", "Nunito", "Segoe UI", sans-serif;
  user-select: none;
}

#stage {
  position: absolute;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #1a1020;
  transform-origin: top left;
}

#c {
  position: absolute;
  inset: 0;
  display: block;
  width: 1920px;
  height: 1080px;
}

.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; }

#float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.floater {
  position: absolute;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  pointer-events: none;
  font-family: "Pixelify Sans", "Press Start 2P", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #1a1020;
}
.floater.relic { color: #f0d48a; font-size: 18px; }
.floater.fossil { color: #e8dcc0; font-size: 17px; }
.floater.oil { color: #f4b050; font-size: 16px; }
.floater.dmg { color: #ff6a8a; font-size: 18px; }
.floater.info { color: #9ae8ff; font-size: 16px; }
.floater.warn { color: #ffd24a; font-size: 16px; }

/* ========== TOP LEFT PILLS ========== */
#hud-tl {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pill);
  border-radius: 12px;
  padding: 8px 18px 8px 8px;
  color: #f6f3ec;
  min-width: 228px;
  box-shadow: 0 4px 0 rgba(10, 8, 16, 0.45), 0 8px 18px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.stat-pill.wide { min-width: 268px; }
.stat-pill .ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: #161224;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-pill .ico img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}
.stat-pill .lab {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.stat-pill b { font-weight: 800; }

/* ========== CYCLE WIDGET ========== */
#cycle-widget {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cycle-ring {
  width: 148px;
  height: 148px;
  position: relative;
}

.cycle-arc {
  position: absolute;
  inset: 0;
  width: 148px;
  height: 148px;
  transform: rotate(-90deg);
  filter: drop-shadow(0 2px 0 #120c18);
}
.cycle-arc circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.arc-track { stroke: #1c1428; stroke-width: 10; }
.arc-day {
  stroke: #f0a030;
  stroke-dasharray: 169.6;
  stroke-dashoffset: 84.8;
}
.arc-night {
  stroke: #2a2048;
  stroke-dasharray: 169.6;
  stroke-dashoffset: 0;
}

.cycle-face {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  border: 4px solid #1a1224;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);
}
.cycle-face .half {
  width: 50%;
  height: 100%;
  position: relative;
}
.cycle-face .half.day {
  background: linear-gradient(180deg, #f4b060 0%, #e88840 55%, #c86838 100%);
}
.cycle-face .half.night {
  background: linear-gradient(180deg, #3a2878 0%, #241850 60%, #1a1038 100%);
}
.sun-icon {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: #ffe14a;
  box-shadow:
    0 0 0 4px rgba(255, 210, 80, 0.35),
    0 10px 0 -6px #ffe14a,
    -12px 0 0 -10px #ffe14a,
    12px 0 0 -10px #ffe14a,
    0 -12px 0 -10px #ffe14a,
    9px 9px 0 -11px #ffe14a,
    -9px 9px 0 -11px #ffe14a;
}
.moon-icon {
  position: absolute;
  left: 52%;
  top: 38%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d8d0f0;
  box-shadow: inset -8px -2px 0 0 #3a2878, 0 0 10px rgba(220, 210, 255, 0.4);
}
.stars-mini {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #fff 1px, transparent 1.4px),
    radial-gradient(circle, #e8d8ff 1px, transparent 1.4px);
  background-size: 22px 28px, 18px 24px;
  background-position: 10px 8px, 22px 20px;
  opacity: 0.85;
}
.cycle-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #f4f0ff;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 2px 0 #1a1020;
  z-index: 2;
}

.cycle-badge {
  background: rgba(24, 18, 32, 0.92);
  border-radius: 10px;
  padding: 8px 22px 10px;
  text-align: center;
  min-width: 268px;
  box-shadow: 0 4px 0 rgba(10, 8, 16, 0.5);
  border: 1px solid rgba(255,255,255,0.05);
}
#phase-name {
  font-family: "Lilita One", "Pixelify Sans", sans-serif;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: #f6f1e8;
  text-shadow: 0 2px 0 #120c18;
}
#phase-sub {
  font-size: 15px;
  color: #d8d0c4;
  margin-top: 1px;
}

/* ========== TITLE ========== */
#hud-tr {
  position: absolute;
  top: 18px;
  right: 32px;
  z-index: 10;
  text-align: right;
}
#title-mark, #menu-title {
  display: flex;
  flex-direction: column;
  line-height: 0.92;
  font-family: "Lilita One", "Titan One", sans-serif;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 3px 0 #4a2810);
}
#title-mark .t1, #menu-title .t1,
#title-mark .t3, #menu-title .t3 {
  color: #f2d7a0;
  font-size: 34px;
  text-shadow:
    3px 0 0 #8a4e18,
    0 3px 0 #8a4e18,
    3px 3px 0 #6a3810,
    -1px -1px 0 #fff4c8;
}
#title-mark .t2, #menu-title .t2 {
  color: #e8a848;
  font-size: 36px;
  text-shadow:
    3px 0 0 #8a4e18,
    0 3px 0 #8a4e18,
    3px 3px 0 #6a3810,
    -1px -1px 0 #ffe8b0;
}
#title-mark .t3, #menu-title .t3 { font-size: 34px; }

#clock-pill {
  display: inline-block;
  margin-top: 10px;
  background: rgba(22, 16, 32, 0.92);
  color: #f4f0e8;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  padding: 6px 16px;
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(10, 8, 16, 0.5);
}
#clock-pill .sep { opacity: 0.5; margin: 0 4px; }

/* ========== TOOLS ========== */
#tools {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
  background: rgba(28, 22, 46, 0.94);
  border: 3px solid #161022;
  border-radius: 18px;
  padding: 12px 18px 10px;
  box-shadow: 0 6px 0 rgba(10, 8, 16, 0.45), 0 12px 24px rgba(0,0,0,0.3);
}
.tool {
  background: none;
  border: 0;
  width: 92px;
  text-align: center;
  position: relative;
  color: #f4f0e8;
}
.tool .slot {
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border: 3px solid #2a8898;
  border-radius: 10px;
  background: #161228;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.tool .slot img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
}
.tool.selected .slot {
  border-color: #f0c430;
  box-shadow: 0 0 0 2px #f0c430, 0 0 14px rgba(240, 196, 48, 0.55);
}
.tool .name {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 2px 0 #120c18;
}
.tool .keyhint {
  position: absolute;
  top: -6px;
  right: 4px;
  background: #161022;
  border: 1px solid #3a3458;
  color: #c8c0d8;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ========== MINIMAP ========== */
#minimap-wrap {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 10;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
  border: 7px solid #2a2448;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 0 0 2px #161022;
  background: #3a2a20;
}
#minimap {
  width: 100%;
  height: 100%;
  display: block;
}

/* ========== PROMPT / FX ========== */
#prompt {
  position: absolute;
  left: 50%;
  bottom: 150px;
  transform: translateX(-50%);
  z-index: 11;
  background: rgba(20, 14, 28, 0.9);
  color: #f4f0e8;
  font-size: 20px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 10px;
  border: 2px solid #f0c430;
  letter-spacing: 0.04em;
}
#prompt kbd {
  background: #f0c430;
  color: #1a1220;
  padding: 2px 8px;
  border-radius: 5px;
  margin-left: 6px;
  font-family: inherit;
  font-weight: 800;
}
#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at 45% 50%, transparent 48%, rgba(8, 4, 20, 0.55) 100%);
  opacity: 0.35;
  transition: opacity 0.8s linear;
}
#scan-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(circle at 50% 50%, rgba(80, 220, 140, 0.28), transparent 60%);
  opacity: 0;
}

/* ========== MENU / RESULTS ========== */
#menu, #results {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(240, 140, 60, 0.28), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(80, 40, 140, 0.45), transparent 50%),
    rgba(12, 8, 20, 0.55);
}
.menu-card {
  width: 640px;
  background: rgba(22, 16, 34, 0.92);
  border: 3px solid #2a2448;
  border-radius: 22px;
  padding: 36px 40px 32px;
  text-align: center;
  box-shadow: 0 12px 0 rgba(10, 8, 16, 0.45), 0 24px 40px rgba(0,0,0,0.4);
}
#menu-title { align-items: center; margin-bottom: 8px; }
#menu-title .t1, #menu-title .t3 { font-size: 42px; }
#menu-title .t2 { font-size: 44px; color: #e8a848; }

.menu-sub {
  color: #c8bca8;
  font-size: 14px;
  letter-spacing: 0.14em;
  margin: 10px 0 16px;
  font-weight: 700;
}
.menu-blurb {
  color: #e8e0d4;
  font-size: 18px;
  line-height: 1.45;
  margin-bottom: 22px;
}
.menu-blurb b { color: #f0c430; }

#btn-play, #btn-again {
  background: linear-gradient(180deg, #f0c430, #d49020);
  color: #2a1808;
  font-family: "Lilita One", sans-serif;
  font-size: 26px;
  letter-spacing: 0.08em;
  border: 0;
  border-radius: 12px;
  padding: 12px 28px;
  box-shadow: 0 5px 0 #8a5010;
}
#btn-play:hover, #btn-again:hover { filter: brightness(1.08); }

.menu-controls {
  margin-top: 18px;
  color: #c8c0d4;
  font-size: 15px;
  line-height: 1.7;
}
kbd {
  display: inline-block;
  background: #161022;
  border: 1px solid #3a3458;
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "Pixelify Sans", sans-serif;
  color: #f4f0e8;
}

.res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 18px 0 22px;
  color: #d8d0c4;
  font-size: 18px;
}
.res-grid b { color: #f0c430; font-size: 22px; display: block; }
#res-head {
  font-family: "Lilita One", sans-serif;
  font-size: 36px;
  color: #f2d7a0;
  text-shadow: 3px 3px 0 #6a3810;
}

#pause {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 18, 0.55);
  font-family: "Lilita One", sans-serif;
  font-size: 64px;
  letter-spacing: 0.16em;
  color: #f2d7a0;
  text-shadow: 4px 4px 0 #4a2810;
}

#banner {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  background: rgba(22, 16, 32, 0.92);
  color: #f4f0e8;
  font-family: "Lilita One", sans-serif;
  font-size: 28px;
  letter-spacing: 0.08em;
  padding: 10px 28px;
  border-radius: 12px;
  border: 2px solid #f0c430;
  pointer-events: none;
}