:root {
  --yellow: #c8b84a;
  --yellow-dim: #8f8330;
  --bg: #0a0a06;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  color: #d8cf9a;
  font-family: "Courier New", "Consolas", monospace;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }

canvas { display: block; position: absolute; inset: 0; }

.hidden { display: none !important; }

/* ============ SCREENS ============ */
.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  background:
    radial-gradient(ellipse at center, rgba(30,28,10,0.35), rgba(0,0,0,0.94)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 2px, transparent 3px);
  text-align: center;
}

.menu-inner { max-width: 720px; padding: 30px; }

h1 {
  font-size: clamp(34px, 7vw, 82px);
  letter-spacing: 10px;
  color: var(--yellow);
  text-shadow: 0 0 18px rgba(200,184,74,0.5), 0 0 3px #000;
  font-weight: 900;
}

.subtitle-cn {
  font-size: clamp(20px, 4vw, 40px);
  letter-spacing: 24px;
  color: #9c9040;
  margin: 4px 0 22px;
  padding-left: 24px;
}

.lore {
  line-height: 2;
  font-size: 15px;
  color: #b3a870;
  margin-bottom: 28px;
}
.lore .danger { color: #d98a3a; }

.menu-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
  background: rgba(20,18,8,0.85);
  border: 1px solid var(--yellow-dim);
  color: #cabf6c;
  padding: 12px 26px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:hover { background: var(--yellow-dim); color: #1a1707; box-shadow: 0 0 16px rgba(200,184,74,0.4); }
.btn.primary { border-color: var(--yellow); color: var(--yellow); }
.btn.primary:hover { background: var(--yellow); color: #1a1707; }

.panel {
  margin-top: 22px; padding: 18px 22px;
  border: 1px solid #3a3616;
  background: rgba(10,10,5,0.7);
  text-align: left;
  font-size: 14px;
}
.panel h3 { color: var(--yellow); margin-bottom: 12px; letter-spacing: 3px; }
.panel ul { list-style: none; line-height: 2; }
.panel ul b { color: var(--yellow); display: inline-block; min-width: 78px; }
.panel .hint { margin-top: 12px; color: #8a7f50; line-height: 1.7; font-size: 13px; }
.panel label { display: block; margin: 12px 0; color: #b3a870; }
.panel input[type=range] { width: 55%; vertical-align: middle; accent-color: var(--yellow); }
.panel select { background:#1a1707; color:#cabf6c; border:1px solid #3a3616; padding:4px; font-family:inherit; }

.footer { margin-top: 26px; color: #6b6338; font-size: 12px; letter-spacing: 2px; }
.hint-small { color:#6b6338; font-size:12px; }

/* glitch title */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  overflow: hidden; opacity: 0.8;
}
.glitch::before { color: #d98a3a; animation: glitchA 3.5s infinite steps(1); clip-path: inset(0 0 55% 0); }
.glitch::after { color: #5a8f8f; animation: glitchB 4.2s infinite steps(1); clip-path: inset(55% 0 0 0); }
@keyframes glitchA { 0%,92%,100%{transform:translate(0,0)} 93%{transform:translate(-3px,1px)} 96%{transform:translate(2px,-1px)} }
@keyframes glitchB { 0%,90%,100%{transform:translate(0,0)} 91%{transform:translate(3px,-1px)} 95%{transform:translate(-2px,1px)} }

/* ============ HUD ============ */
#hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

#vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.85);
  transition: box-shadow 0.6s;
}
#static-overlay {
  position: absolute; inset: 0; opacity: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: overlay; transition: opacity 0.3s;
}
#damage-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(120,0,0,0.7));
  transition: opacity 0.25s;
}

#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; transform: translate(-50%,-50%);
}
#crosshair span {
  display: block; width: 100%; height: 100%;
  border: 1px solid rgba(220,210,150,0.6);
  border-radius: 50%;
}

#top-left { position: absolute; top: 18px; left: 20px; }
#level-name { font-size: 15px; letter-spacing: 3px; color: var(--yellow); text-shadow: 0 0 6px #000; }
#objective { font-size: 12px; color: #9a9060; margin-top: 4px; text-shadow: 0 0 6px #000; max-width: 340px; }

#compass {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 22px; overflow: hidden;
  border: 1px solid rgba(120,110,50,0.4);
  background: rgba(0,0,0,0.35);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
#compass-strip { position: absolute; top: 0; left: 0; height: 100%; white-space: nowrap; }
.compass-tick { display:inline-block; text-align:center; font-size:11px; color:#9a9060; }
.compass-goal { color:#d98a3a !important; font-weight:bold; }

#bars {
  position: absolute; bottom: 20px; left: 20px;
  display: flex; flex-direction: column; gap: 7px;
  width: 230px;
}
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar-label { font-size: 10px; letter-spacing: 1px; color: #8a8050; width: 92px; text-shadow: 0 0 4px #000; }
.bar {
  flex: 1; height: 11px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(120,110,50,0.4);
  overflow: hidden;
}
.bar-fill { height: 100%; width: 100%; transition: width 0.2s linear; }
.bar-fill.sanity { background: linear-gradient(90deg, #4a7c4a, #7fc47f); }
.bar-fill.stamina { background: linear-gradient(90deg, #4a6a8c, #7fa8d4); }
.bar-fill.battery { background: linear-gradient(90deg, #8c7a2a, #d4c04a); }

#inventory {
  position: absolute; bottom: 22px; right: 22px;
  display: flex; gap: 16px;
}
.inv-item { font-size: 20px; display: flex; align-items: center; gap: 5px; }
.inv-item span:last-child { font-size: 16px; color: var(--yellow); }

#prompt {
  position: absolute; left: 50%; top: 60%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); border: 1px solid var(--yellow-dim);
  padding: 8px 16px; font-size: 14px; color: #d8cf9a; letter-spacing: 1px;
}
#prompt b { color: var(--yellow); }

#subtitle {
  position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%);
  font-size: 15px; color: #c9c091; text-shadow: 0 0 8px #000; text-align: center;
  max-width: 70%; opacity: 0; transition: opacity 0.5s; font-style: italic;
}

#log {
  position: absolute; top: 70px; left: 20px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: #a89c60;
}
.log-line { text-shadow: 0 0 6px #000; animation: fadeOut 5s forwards; }
@keyframes fadeOut { 0%,70%{opacity:1} 100%{opacity:0} }

/* ============ TRANSITION / LOADING ============ */
.trans-inner, .loader-inner { text-align: center; }
#trans-text { font-size: 20px; color: var(--yellow); letter-spacing: 4px; line-height: 2; }
#transition { background: #000; transition: opacity 1s; }
.loader-buzz { font-size: 24px; color: var(--yellow-dim); letter-spacing: 4px; animation: buzz 0.15s infinite steps(2); }
@keyframes buzz { 0%{opacity:0.3} 50%{opacity:1} 100%{opacity:0.3} }
#loading-text { margin-top: 14px; color: #8a8050; letter-spacing: 3px; }

.death-title { color: #b23a2a; font-size: 30px; letter-spacing: 6px; text-shadow: 0 0 16px rgba(180,40,40,0.5); }
.death-reason { margin: 18px 0 8px; color: #b3a870; font-size: 15px; }
.death-stats { margin-bottom: 22px; color: #7a7048; font-size: 13px; line-height: 1.8; }

#click-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 30; color: #cabf6c; font-size: 16px; letter-spacing: 2px;
  background: rgba(0,0,0,0.55); padding: 12px 22px; border: 1px solid var(--yellow-dim);
  pointer-events: none;
}