:root{
  --void:#000000;
  --void-2:#000000;
  --bone:#FFFFFF;
  --bone-dim:#FFFFFF;
  --ash:#FFFFFF;
  --line:#1a1916;

  --font-mark:'Rubik Mono One', monospace;
  --font-story:'Spectral', Georgia, serif;
  --font-sys:'Space Mono', monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html,body{min-height:100%;}
html{background:var(--void); scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--font-sys);
  -webkit-font-smoothing:antialiased;
  cursor:default;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* ---------- ambient overlays ---------- */
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:40;
  background:
    radial-gradient(120% 100% at 50% 42%, transparent 38%, rgba(0,0,0,.55) 78%, #000 100%);
}
.grain{
  position:fixed; inset:-50%; pointer-events:none; z-index:41; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,2%)}
  80%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

/* ---------- eyelid blink transition (JS only) ---------- */
.lids{position:fixed; inset:0; z-index:60; pointer-events:none;}
.lid{position:absolute; left:0; width:100%; height:51%; background:var(--void-2);
     transition:transform .26s var(--ease);}
/* default / no-js = OPEN (off-screen, never covers content) */
.lid.top{top:0; transform:translateY(-101%);}
.lid.bot{bottom:0; transform:translateY(101%);}
/* JS mode: start CLOSED (covering) until the script opens them — gives a blink-in
   on every real page load, and avoids any flash of content before opening */
html.js .lid.top{transform:translateY(0);}
html.js .lid.bot{transform:translateY(0);}
html.js .lids.opened .lid.top{transform:translateY(-101%);}
html.js .lids.opened .lid.bot{transform:translateY(101%);}

/* ---------- top bar ---------- */
.bar{
  position:relative; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,52px);
}
.brand{display:flex; align-items:center; gap:14px; background:none; border:0;
       color:var(--bone); cursor:pointer; padding:0; font-family:inherit; text-decoration:none;}
.brand .word{font-family:var(--font-mark); font-size:13px; letter-spacing:.22em;
             line-height:1; padding-top:2px;}

.nav{display:flex; gap:clamp(18px,3vw,40px);}
.nav a{
  background:none; border:0; color:var(--bone-dim); cursor:pointer;
  font-family:var(--font-sys); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  padding:6px 2px; position:relative; transition:color .3s var(--ease); text-decoration:none;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--bone); transition:right .35s var(--ease);
}
.nav a:hover, .nav a:focus-visible{color:var(--bone);}
.nav a:hover::after, .nav a[aria-current="page"]::after{right:0;}
.nav a[aria-current="page"]{color:var(--bone);}

/* ---------- stage / content ---------- */
.stage{flex:1; display:grid; place-items:center; padding:40px 24px; z-index:10;}
.view{width:100%; max-width:880px; text-align:center;}

.eyebrow{font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--ash);
         margin:0 0 26px;}

/* logo eye — shell + pupil. Pupil moves with JS; sits centred (static) without it. */
.logo-eye-wrap{
  position:relative;
  width:min(375px,72.5vw);
  height:min(375px,72.5vw);
  margin:0 auto 30px;
  pointer-events:none;
}
.logo-eye-shell{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; z-index:2;
}
.logo-eye-pupil-svg{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:3; will-change:transform; overflow:visible; pointer-events:none;
}
/* mini logo eye in the top bar */
.logo-eye-wrap.mini{display:block; width:40px; height:40px; margin:0; flex:none;}

.mark{font-family:var(--font-mark); font-size:clamp(30px,7vw,62px); letter-spacing:.14em;
      margin:0; line-height:1.05; white-space:pre-line;}
.tagline{font-family:var(--font-story); font-style:italic; font-size:clamp(16px,2.4vw,22px);
         color:var(--bone-dim); margin:18px 0 0; min-height:1.4em;}
.enter{
  margin-top:32px; background:none; border:0; color:var(--bone); cursor:pointer;
  font-family:var(--font-sys); font-size:12px; letter-spacing:.4em; text-transform:uppercase;
  padding:12px 4px; position:relative; text-decoration:none; display:inline-block;
}
.enter span{position:relative; display:inline-block;}
.enter span::after{content:""; position:absolute; left:50%; right:50%; bottom:-7px; height:1px;
                   background:var(--bone); transition:left .4s var(--ease), right .4s var(--ease);}
.enter:hover span::after, .enter:focus-visible span::after{left:0; right:0;}

/* GAMES */
.game-title{font-family:var(--font-mark); font-size:clamp(34px,8vw,76px); letter-spacing:.1em; margin:0;}
.game-art{width:min(280px,52vw); height:auto; margin:30px auto 6px; display:block;
          filter:drop-shadow(0 0 40px rgba(0,0,0,.9));}
.logline{font-family:var(--font-story); font-style:italic; font-size:clamp(15px,2.2vw,20px);
         color:var(--bone-dim); margin:8px auto 30px; max-width:34ch;}
.cta{
  display:inline-block; color:var(--bone); text-decoration:none;
  font-family:var(--font-sys); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--line); padding:14px 26px;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.cta:hover, .cta:focus-visible{border-color:var(--bone); background:var(--bone); color:var(--void);}

/* CONTACT */
.mailto{display:inline-block; color:var(--bone); text-decoration:none;
        font-family:var(--font-sys); font-size:clamp(15px,2.6vw,22px); letter-spacing:.06em;
        padding:6px 8px; cursor:pointer; border-bottom:1px solid transparent; transition:border-color .3s var(--ease);}
.mailto:hover{border-color:var(--bone-dim);}
.copied{display:block; min-height:18px; margin-top:14px; font-size:10px; letter-spacing:.34em;
        text-transform:uppercase; color:var(--ash); opacity:0; transition:opacity .3s var(--ease);}
.copied.show{opacity:1;}
.socials{display:flex; justify-content:center; align-items:center; gap:clamp(20px,4vw,38px);
         margin-top:40px; flex-wrap:wrap;}
.socials a{transition:transform .3s var(--ease); display:block;}
.socials a img{width:26px; height:26px; display:block; object-fit:contain;}
.socials a:hover, .socials a:focus-visible{transform:translateY(-3px);}

/* ---------- footer ---------- */
.foot{
  position:relative; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px clamp(20px,4vw,52px);
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--ash);
}
.foot .obs{font-variant-numeric:tabular-nums;}

/* focus */
:focus-visible{outline:1px solid var(--bone); outline-offset:4px;}

/* ============================================================
   NO-JS MODE  (html starts as .no-js; a head script swaps to .js)
   Each page is a real document. The eye logo + headline show in BOTH
   modes — the only thing JS adds is pupil movement + the blink. So the
   only static-mode difference is hiding the live "observed for" timer.
   ============================================================ */
html.no-js .obs{display:none;}

/* responsive */
@media (max-width:560px){
  .brand .word{display:none;}
  .game-art{width:60vw;}
  .foot{font-size:9px; letter-spacing:.22em;}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none; opacity:.035;}
  *{scroll-behavior:auto;}
}