:root {
  --night: #04081a;
  /* menu colors: the dreamer's (set by ui.js, setMenuHue) */
  --h: 228;
  --ink: hsla(var(--h), 70%, 80%, 0.55);
  --c: hsl(var(--h), 85%, 86%);
  --glow: hsla(var(--h), 90%, 70%, 0.6);
  --font: "Trebuchet MS", Verdana, "Segoe UI", sans-serif; /* same as the name above dreamers */
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--night);
  user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none;
}

#game {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
  filter: blur(24px) brightness(0.4);
  transition: filter 2.6s cubic-bezier(.2,.7,.2,1);
}
body.awake #game { filter: blur(0) brightness(1); }

/* Eyelids: two curved veils opening */
.lid {
  position: fixed; left: -10%; width: 120%; height: 52%;
  background: var(--night);
  z-index: 2; pointer-events: none;
  transition: transform 2.2s cubic-bezier(.6,0,.2,1);
}
#lid-top    { top: 0;    border-radius: 0 0 50% 50% / 0 0 30% 30%; }
#lid-bottom { bottom: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
body.awake #lid-top    { transform: translateY(-110%); }
body.awake #lid-bottom { transform: translateY(110%); }
/* blink: half-open then closed again before opening */
body.blink #lid-top    { transform: translateY(-22%); transition-duration: .9s; }
body.blink #lid-bottom { transform: translateY(22%);  transition-duration: .9s; }

#title {
  position: fixed; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font: 700 clamp(28px, 6vw, 64px) / 1 var(--font);
  letter-spacing: 0.6em; text-indent: 0.6em;
  color: rgba(225, 230, 255, 0.9);
  text-shadow: 0 0 24px rgba(160, 180, 255, 0.8);
  opacity: 0; filter: blur(12px);
  pointer-events: none;
  transition: opacity 1.8s ease, filter 2.4s ease;
}
#title.show { opacity: 1; filter: blur(0); }

/* Clickable veil (welcome + menu) */
#veil {
  position: fixed; inset: 0; z-index: 4;
  background: var(--night);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease;
}
body.awake #veil, body.waking #veil { opacity: 0; pointer-events: none; }

/* Menu in a column: keepsakes, eye, name and settings (same layout everywhere) */
#menu-col {
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 4vh, 40px);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  max-height: 100%;
  font: 700 12px/1 var(--font); letter-spacing: .25em; color: var(--ink);
}
body:not(.menu) #menu-col { display: none; }
#settings { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* dreamers + ping: icons and numbers (name font) */
#stats { display: flex; gap: 22px; margin-bottom: 4px; }
#stats:empty, #stats.off { visibility: hidden; }
.st { display: flex; align-items: center; gap: 7px; }
.st .ic { width: 18px; height: 18px; }
.st b, #power-n { font: 700 14px/1 var(--font); letter-spacing: .06em; color: #fff; text-indent: 0; }
/* wifi bars by ping: 3 = good, 2 = medium, 1 = slow, 0 = offline (cross) */
#st-wifi .w1, #st-wifi .w2, #st-wifi .w3 { opacity: .25; }
#st-wifi[data-q="1"] .w1, #st-wifi[data-q="2"] .w1, #st-wifi[data-q="2"] .w2, #st-wifi[data-q="3"] path { opacity: 1; }
#st-wifi .x { display: none; } #st-wifi[data-q="0"] .x { display: inline; }
#settings input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 150px; height: 1px; background: var(--ink); outline: none;
}
#settings input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 8px var(--glow);
}
#settings input[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; border: 0; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 8px var(--glow);
}
#settings button {
  margin-top: 6px; background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--ink);
}
#settings button:hover, #settings button:active { color: var(--c); text-shadow: 0 0 10px var(--glow); }


/* Film grain, always on top */
#grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none;
  image-rendering: auto; /* smoothed: no big squares */
  opacity: .07; mix-blend-mode: screen;
  transition: opacity 2s ease;
}
body.awake #grain { opacity: .025; }

/* Close the eyes for a moment (passing under the world) */
body.falling #lid-top, body.falling #lid-bottom { transform: translateY(0); transition-duration: 1.2s; }
body.falling #game { filter: blur(16px) brightness(0.5); transition-duration: 1.2s; }


/* Keepsake counter: appears at the top for a few seconds when you catch one */
#hud {
  position: fixed; left: 50%; top: max(5vh, env(safe-area-inset-top)); z-index: 3;
  transform: translate(-50%, -8px); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 700 clamp(18px, 2.6vw, 26px) / 1 var(--font); letter-spacing: .35em; text-indent: .35em;
  color: #f2f4ff; text-shadow: 0 0 16px rgba(170, 190, 255, .95), 0 0 2px rgba(0, 0, 30, .9);
  opacity: 0; transition: opacity .8s ease, transform .8s ease;
}
#hud.show { opacity: 1; transform: translate(-50%, 0); }
body:not(.awake) #hud { opacity: 0; }

/* Flash of light when you catch a keepsake */
#flash {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .9), rgba(200, 170, 255, .4) 45%, rgba(120, 200, 255, 0) 75%);
  mix-blend-mode: screen;
}
#flash.go { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* Going through a door: tunnel of light rays sucking in the image, then closing in a swirl */
#warp {
  position: fixed; left: 50%; top: 50%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(circle, #fff 0, hsla(var(--h), 100%, 82%, .95) 4%, hsla(var(--h), 90%, 60%, .25) 18%, transparent 40%),
    repeating-conic-gradient(from 0deg, transparent 0deg 3deg, hsla(var(--h), 100%, 85%, .85) 3.6deg 4.4deg, transparent 5deg 7deg,
      hsla(calc(var(--h) + 40), 100%, 80%, .5) 7.5deg 8deg, transparent 8.6deg 11deg);
  -webkit-mask: radial-gradient(circle, #000 0, #000 8%, rgba(0,0,0,.85) 30%, transparent 50%);
          mask: radial-gradient(circle, #000 0, #000 8%, rgba(0,0,0,.85) 30%, transparent 50%);
}
body.warp-in #warp { animation: warp-in .55s cubic-bezier(.5, 0, .9, .4) forwards; }
body.warp-out #warp { animation: warp-out .95s cubic-bezier(.1, .6, .3, 1) forwards; }
@keyframes warp-in { from { opacity: 0; transform: scale(2.6) rotate(0); } to { opacity: 1; transform: scale(.9) rotate(40deg); } }
@keyframes warp-out { from { opacity: 1; transform: scale(.9) rotate(40deg); } to { opacity: 0; transform: scale(.05) rotate(160deg); } }
body.warp-in #game { filter: blur(4px) saturate(2) brightness(1.7); transition: filter .55s ease-in; }
body.warp-out #game { transition: filter .95s ease-out; }

/* Keepsakes found: "12 / 50" + a thin glowing bar (menu and top of the screen) */
.bar { width: 160px; height: 2px; background: rgba(200, 210, 255, .2); border-radius: 2px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: linear-gradient(90deg, hsl(var(--h), 80%, 62%), hsl(calc(var(--h) + 35), 90%, 80%), #fff6dc); box-shadow: 0 0 8px var(--glow); }
#hud .bar { width: 200px; height: 3px; }
#hud-fill { transition: width 1.2s cubic-bezier(.2,.7,.2,1) .25s; }
#power { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#power.full .bar > div { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 16px #fff; filter: brightness(1.4); } }

/* Big pixel eye (drawn by menueye.js): it breathes; it's the button to open the eyes */
#enter {
  background: none; border: 0; padding: 6px; cursor: pointer; outline: none;
  animation: invite 3.6s ease-in-out infinite;
  filter: drop-shadow(0 0 14px var(--glow));
  transition: filter .3s;
}
#enter:hover, #enter:focus-visible { animation-duration: 1.8s; filter: drop-shadow(0 0 22px var(--glow)) brightness(1.15); }
.big-eye { width: min(300px, 64vw, 30vh * 2); aspect-ratio: 2 / 1; display: block; image-rendering: pixelated; }
@keyframes invite { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }

/* Settings: icons only (eye = look, speaker = sound, arrow = reload) */
.row { display: flex; align-items: center; gap: 16px; }
.ic {
  width: 22px; height: 22px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
#settings button { display: flex; align-items: center; justify-content: center; padding: 2px; }
#settings button .ic { transition: filter .2s; }
#settings button:hover .ic, #settings button:active .ic { filter: drop-shadow(0 0 6px var(--glow)); }
#vol-ic .w1, #vol-ic .w2, #vol-ic .x { display: none; }
#vol-ic[data-level="1"] .w1, #vol-ic[data-level="2"] .w1, #vol-ic[data-level="2"] .w2, #vol-ic[data-level="0"] .x { display: inline; }
#settings .row:has(#mute[data-muted="1"]) input { opacity: .35; }

/* Name: a thin line, centered white text */
#set-name {
  width: 170px; padding: 4px 2px 6px; text-align: center;
  background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none;
  font: 700 16px/1.2 var(--font); letter-spacing: .06em; text-indent: .06em; color: #fff;
  user-select: text; -webkit-user-select: text; touch-action: manipulation;
}
#set-name::placeholder { color: var(--ink); opacity: .5; }
#set-name:focus { border-bottom-color: var(--c); box-shadow: 0 8px 14px -12px var(--glow); }

/* Low screens (phone in landscape): everything tightens */
@media (max-height: 520px) {
  #menu-col { gap: 10px; }
  #settings { gap: 9px; }
  #stats { margin-bottom: 0; }
}

/* "new version" bubble (update.js): discreet, bottom center, tapping it reloads */
#update {
  position: fixed; left: 50%; bottom: 18px; z-index: 50;
  transform: translate(-50%, 8px); opacity: 0;
  padding: 7px 14px; border-radius: 999px;
  font: 700 11px/1 var(--font); letter-spacing: .12em; color: var(--c);
  background: hsla(var(--h), 40%, 10%, .7); border: 1px solid var(--ink);
  cursor: pointer; transition: opacity .6s, transform .6s;
}
#update.on { opacity: 1; transform: translate(-50%, 0); }

/* small book (gallery) at the top left of the menu, only at 50 keepsakes */
#book { position: absolute; top: 18px; left: 18px; color: var(--c); padding: 6px; }
#book .ic { width: 26px; height: 26px; }
#book:hover .ic { filter: drop-shadow(0 0 6px var(--glow)); }
body:not(.menu) #book { display: none; }