:root {
  --bg: #0b0a0d;
  --fg: #efe9e2;
  --dim: rgba(239, 233, 226, 0.55);
  --skin: #c98f7e;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12' fill='%23f4f1ec' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='14' r='6.5' fill='%2366a05b'/%3E%3Ccircle cx='14' cy='14' r='3.2' fill='%23000'/%3E%3Ccircle cx='11.5' cy='11' r='1.8' fill='%23fff'/%3E%3C/svg%3E") 14 14, crosshair;
  overflow-x: hidden;
}
#eyes { position: fixed; inset: 0; display: block; z-index: 0; }
#spacer { position: relative; width: 1px; pointer-events: none; }

#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px; pointer-events: none;
}
#hud > * { pointer-events: auto; }
.brand h1 {
  margin: 0; font-size: clamp(34px, 6vw, 72px); line-height: 0.9; letter-spacing: -0.04em;
  font-weight: 900; color: var(--fg);
  text-shadow: 0 2px 0 #000, 0 0 30px rgba(0,0,0,0.9);
  animation: throb 3.2s ease-in-out infinite;
  user-select: none;
}
@keyframes throb { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.sub { margin-top: 6px; font-size: 12px; color: var(--dim); text-shadow: 0 1px 0 #000; }
.sub span { color: var(--fg); font-weight: 700; }

.nav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.nav button, .gallery-head button {
  font: inherit; font-size: 13px; letter-spacing: 0.02em;
  background: rgba(10, 9, 12, 0.72); color: var(--fg);
  border: 1px solid rgba(239,233,226,0.35); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; backdrop-filter: blur(6px);
  transition: background .15s, transform .15s;
}
.nav button:hover, .gallery-head button:hover { background: rgba(239,233,226,0.14); transform: translateY(-1px); }
.nav button:disabled { opacity: 0.35; cursor: default; transform: none; }
.path {
  font-size: 11px; color: var(--dim); max-width: 46vw; text-align: right;
  word-break: break-all; text-shadow: 0 1px 0 #000;
}

#hint {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  font-size: 11px; color: var(--dim); text-shadow: 0 1px 0 #000;
  background: rgba(10,9,12,0.55); padding: 8px 14px; border-radius: 999px;
  pointer-events: none; transition: opacity .6s;
}
#hint.fade { opacity: 0; }

#gallery {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 10;
  background: rgba(10, 9, 12, 0.92); border-left: 1px solid rgba(239,233,226,0.2);
  backdrop-filter: blur(10px); padding: 18px; overflow-y: auto;
  animation: slide .25s ease-out;
}
@keyframes slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
#gallery[hidden] { display: none; }
.gallery-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 13px; }
#gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#gallery-grid img {
  width: 100%; aspect-ratio: 1; display: block; border-radius: 10px;
  background: #111; cursor: pointer; transition: transform .15s;
  border: 1px solid rgba(239,233,226,0.12);
}
#gallery-grid img:hover { transform: scale(1.06) rotate(-2deg); }
.gallery-foot { font-size: 11px; color: var(--dim); margin-top: 14px; }

@media (max-width: 600px) {
  #hud { padding: 12px 14px; }
  .path { display: none; }
  #hint { font-size: 10px; gap: 10px; }
}