/* Landing v10: one screen. The shared header (studio branch header-wallet: siteHeader() and base.css "header"),
   the hero scene, a footer line. Black and white; the only colour is the games: soft on our own screen, and on the
   building across the street only under the pointer. */
:root { --hdr: 64px; --max: 1240px; --hair: rgba(255,255,255,.1); --acc: #FFFFFF; --acc-ink: #000000; --acc-hi: #E6E6E6;
  --edge: rgba(255,255,255,.3); --s1: #0D0D0D; --s2: #1A1A1A; --rule: rgba(255,255,255,.14); --sans: var(--ui); --mono-f: var(--mono);
  --ease: ease; --fast: .2s; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.mono { font-family: var(--mono-f); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* ---------- header: one quiet bar. The mark and the drawn "nighter", the three views, then the language, the wallet
   and the one action. Night over the page's top; once the page scrolls, smoked glass and one hairline (ui.ts sets
   .scrolled). Its content sits on the page's column: the same left edge as the page's first line. ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--hdr);
  background: var(--night);
  box-shadow: inset 0 -1px 0 transparent;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), -webkit-backdrop-filter .3s var(--ease-out), backdrop-filter .3s var(--ease-out);
}
.hdr-in { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 max(var(--gut), calc((100% - var(--max)) / 2)); }
.hdr.scrolled { background: rgba(10, 10, 10, 0.72); box-shadow: inset 0 -1px 0 var(--hair); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; margin-right: 28px; color: var(--paper); flex: none; }
.brand .mark { display: block; width: auto; height: 22px; fill: currentColor; flex: none; }
/* the window is the light that stays on: it brightens under the pointer, nothing else moves */
.brand .mark-win { transition: opacity .3s var(--ease-out); opacity: .92; }
.brand:hover .mark-win { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
.brand .wm-img { display: block; height: 21px; width: auto; margin-top: 1px; vertical-align: 0; }
.nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 450 14px/1 var(--sans); letter-spacing: -0.005em; color: var(--dim); transition: color var(--fast) var(--ease);
}
.nav a:hover { color: var(--paper); }
.nav a[aria-current="page"] { color: var(--paper); }
/* the current view: a short hairline under its word, drawn from the middle */
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .32s var(--ease-out); }
.nav a[aria-current="page"]::after { transform: none; }
.nav a:hover::after { transform: scaleX(.35); }
.nav a[aria-current="page"]:hover::after { transform: none; }
.hdr-end { display: flex; align-items: center; gap: 10px; margin-left: auto; position: relative; }
/* ---------- buttons: the landing's boxed mono capitals: filled (pri), paper line (box), soft line (ghost) ---------- */
.hdr .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px; border-radius: 0;
  font: 500 13px/1 var(--mono-f); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--paper);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .12s var(--ease-out);
}
.hdr .btn svg { width: 14px; height: 14px; flex: none; }
/* the Lamp is the one action of a screen; a picked option is Paper */
.hdr .btn-pri { background: var(--acc); color: var(--acc-ink); box-shadow: 0 0 0 1px var(--acc) inset; }
.hdr .btn-pri:hover:not(:disabled) { background: var(--acc-hi); }
.hdr .btn-ghost { box-shadow: 0 0 0 1px var(--edge) inset; background: transparent; }
.hdr .btn-ghost:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--paper) inset; background: rgba(255, 255, 255, 0.05); }
.hdr .btn:disabled { opacity: 0.4; }
.hdr .btn:active:not(:disabled) { transform: translateY(1px); }
/* the header's two buttons: plain words, the address in figures; the action filled */
.hdr-move, .hdr-wallet { min-height: 38px; padding: 0 16px; font-size: 13.5px !important; }
.hdr-wallet .mono { text-transform: none; letter-spacing: 0.01em; font-size: 13px; }
/* connected: a small lit square before the address, like a window with the light on */
.hdr-wallet.on, .menu-wallet.on { gap: 9px; }
.hdr-wallet.on::before, .menu-wallet.on::before { content: ""; width: 6px; height: 6px; background: var(--paper); flex: none; }
/* on the launch page itself the page's own button is the filled one */
.hdr-move[aria-current="page"] { background: transparent; color: var(--paper); box-shadow: 0 0 0 1px var(--paper) inset; }
/* ---------- language: three letters and a chevron, a small list under them ---------- */
.hdr { view-transition-name: hdr; }
/* ---------- a phone: the mark and the word, the action, the menu; the views, the wallet and the languages in a sheet
   under the bar ---------- */
.hdr-menu, .menu-sheet { display: none; }
@media (max-width: 760px) {
  .nav, .hdr-end .lang, .hdr-wallet { display: none; }
  .hdr-menu { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--paper); }
  .hdr-menu i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .28s var(--ease-out); }
  .hdr-menu i:first-child { transform: translateY(-3.5px); }
  .hdr-menu i:last-child { transform: translateY(3.5px); }
  .hdr-menu[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
  .hdr-menu[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
  .hdr-move { min-height: 36px; padding: 0 14px; }
  .hdr.menu-open { background: var(--night); box-shadow: inset 0 -1px 0 var(--hair); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-sheet { position: fixed; left: 0; right: 0; top: var(--hdr); max-height: calc(100dvh - var(--hdr)); z-index: 39; display: flex; flex-direction: column; gap: 16px; padding: 8px var(--gut) 28px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--night); border-bottom: 1px solid var(--rule); box-shadow: 0 40px 80px -20px #000;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .15s var(--ease-out), transform .16s var(--ease-out), visibility 0s linear .16s; }
  .hdr.menu-open .menu-sheet { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-sheet nav { display: grid; margin-bottom: 8px; }
  .menu-sheet nav a { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 60px; font: 400 32px/1 var(--serif); letter-spacing: -0.01em; color: var(--ash); border-bottom: 1px solid var(--hair); }
  .menu-sheet nav a[aria-current] { color: var(--paper); }
  .menu-sheet nav a[aria-current]::after { content: ""; width: 6px; height: 6px; background: var(--paper); }
  .hdr.menu-open .hdr-move { visibility: hidden; }
  .menu-sheet .btn { width: 100%; min-height: 48px; }
  .menu-more { display: flex; gap: 24px; margin: 0; }
  .menu-more a { display: inline-flex; align-items: center; min-height: 44px; font: 400 13.5px/1 var(--sans); color: var(--dim); }
  /* under the sheet, the page dims */
  .hdr.menu-open::after { content: ""; position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; z-index: 38; background: rgba(0, 0, 0, 0.72); }
  html:has(.hdr.menu-open) { overflow: hidden; }
  .hdr .btn { min-height: 44px; }
}
@media (max-width: 400px) {
  .brand { gap: 9px; }
  .brand .mark { height: 20px; }
  .brand .wm-img { height: 19px; }
}
@media (max-width: 339px) {
  .brand .wm-img { height: 18px; }
  .hdr-move { padding: 0 12px; }
}
@media (max-width: 420px) {
  .addr-tail { display: none; }
}
/* the drawn "nighter": its box runs from the ascender to the descender (2204 units, baseline at 1663), so 1.08em tall
   and lowered by its descender sits on the text's baseline at the text's size */
.hdr .btn { font-family: var(--sans) !important; font-weight: 500; font-size: 14px; letter-spacing: 0 !important; text-transform: none !important; }
/* ---------- landing glue for the shared header ---------- */
.hdr .mark { margin: 0; padding: 0; }
.hdr { background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,0)); }
.hdr .hdr-move { display: none; }          /* the hero carries "Launch a studio": one action per screen */
.hdr .nav a, .hdr .btn { text-decoration: none; }
.hdr a { color: inherit; }

/* ---------- one screen ---------- */
.hero { height: 100dvh; min-height: 0; }
.hero-copy { top: var(--copy-y, 20svh); }
h1.nt-wm { font-size: 0; margin: 0 0 18px -1%; width: clamp(200px, 26vw, 400px); }
.nt-wm__smoke { position: absolute; left: 15%; top: -30%; width: 95%; height: 140%; pointer-events: none; }
.nt-wm.fluid .nt-wm__drift { display: none; }
.tagline { font: 400 clamp(30px, 3.6vw, 56px)/1 var(--serif); letter-spacing: -.01em; color: var(--paper); text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.hero .lede { margin-top: 16px; max-width: 34ch; }
.acts { margin-top: 28px; }
.line { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap;
  padding: 10px max(var(--gut), calc((100% - var(--max)) / 2)) calc(10px + env(safe-area-inset-bottom)); font: 400 13px/1 var(--ui); color: var(--dim);
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7)); }
.line nav { display: flex; gap: 18px; }
.line a { color: var(--dim); text-decoration: none; padding: 8px 0; }
.line a:hover { color: var(--paper); }
.line .sound { margin-left: auto; height: 32px; font-size: 13px; padding: 0 4px; }
.credits { position: relative; }
.credits summary { list-style: none; cursor: pointer; padding: 8px 0; }
.credits summary::-webkit-details-marker { display: none; }
.credits p { position: absolute; bottom: calc(100% + 8px); left: 0; width: min(420px, 80vw); padding: 12px 14px; background: #0D0D0D; box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.hint { bottom: auto; }

/* ---------- colour: the games only ---------- */
.scr-v { filter: grayscale(.55) saturate(.7) brightness(.62) contrast(1.02) !important; }      /* our own screen at rest: dim, a little colour */
.peek video { filter: grayscale(.2) saturate(.9) !important; }
canvas.city { filter: none !important; }                                         /* the shader keeps it grey, games colour under the pointer */

/* ---------- small wonders ---------- */
.glass { position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.012) 47%, transparent 56%);
  background-size: 220% 100%; background-position: calc(50% + var(--gx, 0) * 30%) 0; transition: background-position .6s var(--ease-out); }
.glow { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity .3s ease; mix-blend-mode: soft-light;
  background: radial-gradient(220px circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 70%); }
.glow.on { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .glow { display: none; } .glass { transition: none; } }

/* ---------- small screens: everything on one screen ---------- */
@media (max-aspect-ratio: 4/5) {
  .hero-copy { top: calc(var(--hdr) + 2svh); }
  h1.nt-wm { width: min(56vw, 230px); margin-bottom: 10px; }
  .tagline { font-size: clamp(28px, 8.4vw, 40px); }
  .hero .lede { font-size: 15px; margin-top: 10px; }
  .acts { margin-top: 16px; }
  .hint { bottom: calc(52px + env(safe-area-inset-bottom)) !important; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 640px) {
  h1.nt-wm { width: 150px; margin-bottom: 6px; }
  .tagline { font-size: 27px; }
  .hero .lede { display: none; }
  .acts { margin-top: 12px; }
  .hint { display: none; }
}
@media (max-height: 540px) and (min-aspect-ratio: 4/5) {
  :root { --hdr: 48px; }
  .hero-copy { top: calc(var(--hdr) + 4px) !important; }
  h1.nt-wm { display: none; }
  .tagline { font-size: 24px; }
  .hero .lede, .hint { display: none; }
  .acts { margin-top: 10px; }
  .line { padding-top: 4px; padding-bottom: 4px; }
  .line .sound-l { display: none; }
}
.nt-wm__smoke, .hdr img { filter: none !important; }
.hdr-menu { background: transparent; border: 0; padding: 0; cursor: pointer; }
/* music: the button and the headphones exist only when the track is there (js/music.js) */
.sound[hidden] { display: none !important; }
.hot-phones { display: none; }
html[data-music] .hot-phones { display: block; }
@media (max-width: 760px) { .hdr .hdr-wallet { display: none; } }

/* ---------- the header stays above everything ---------- */
.hdr { z-index: 100; isolation: isolate; }
.hero { position: relative; z-index: 0; isolation: isolate; overflow: hidden; }
.peek { contain: layout paint; }

/* ---------- our screen: the door to the app ---------- */
.scr-head { display: flex; flex-direction: column; gap: 3px; }
.scr-head .scr-name { color: var(--dim); font-weight: 400; }
.scr-enter { position: absolute; left: 50%; bottom: 7%; z-index: 4; transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
  padding: .55em .9em; font: 500 max(10px, .8cqw)/1 var(--ui); color: #fff; background: rgba(0,0,0,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  opacity: 0; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.screen { transition: box-shadow .6s ease; }
@media (hover: hover) and (pointer: fine) {
  .screen:hover .scr-enter, .screen:focus-visible .scr-enter { opacity: 1; transform: translate(-50%, 0); }
  .screen:hover .scr-v.on, .screen:focus-visible .scr-v.on { filter: grayscale(.12) saturate(1.05) brightness(1.06) contrast(1.02) !important; }
  .screen:hover { box-shadow: 0 0 60px 6px rgba(255,255,255,.08); }
}
@media (pointer: coarse) { .scr-enter { opacity: .82; transform: translate(-50%, 0); font-size: max(10px, 2cqw); } }
.screen:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.scr-v { transition: opacity .5s ease, filter .6s ease; }

/* ---------- the dive ---------- */
.room { transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: auto; }
html.diving .room { will-change: transform; }
html.diving .hero-copy, html.diving .hdr, html.diving .line, html.diving .hint, html.diving .glow, html.diving .glass { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
html.diving .room-img, html.diving .hots, html.diving .lampoff, html.diving .steam { opacity: .35; transition: opacity .6s ease; }
html.diving .scr-enter { opacity: 0; }
html.diving .hero::after { content: ""; position: absolute; inset: 0; z-index: 50; background: #000; opacity: 0; animation: dive-out .82s ease forwards; }
@keyframes dive-out { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .room { transition: none; }
  html.diving .hero::after { animation: dive-fade .25s ease forwards; }
  @keyframes dive-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- airy: the words step back ---------- */
.scr-side, .hint { display: none !important; }
.scr-v { width: 100% !important; }
.hero .lede { margin-top: 14px; font-size: clamp(16px, 1.3vw, 19px); color: rgba(255,255,255,.78); max-width: none; }
/* phones: the same calm pair, the button at its own width and the link beside it */
@media (max-aspect-ratio: 4/5) { .hero .acts { display: flex; flex-wrap: nowrap; } }
@media (max-aspect-ratio: 4/5) and (max-height: 640px) { .hero .lede { display: block; font-size: 15px; margin-top: 8px; } }

/* the screen is one button: no link inside it (the footer credits carry the CC-BY line) */
.scr-credit { display: none !important; }
@media (prefers-reduced-motion: reduce) { .menu-sheet, .hdr-menu i, .scr-enter, .hdr .btn, .scr-v, .glass, .glow, .peek, .screen { transition: none !important; } }

/* the wordmark is above its smoke: the fluid canvas only ever draws behind the letters */
.nt-wm { isolation: isolate; }
.nt-wm__smoke { z-index: 0; }
.nt-wm__base { z-index: 1; }

/* a building window's card fades in and out (the window's own colour eases in js/main.js) */
.peek { transition: opacity .45s ease; }

/* the hero's ways in: one quiet outlined button, one text link */
.hero .acts { gap: 22px; align-items: center; }
.hero .acts .btn-main { flex: none; width: auto; min-height: 42px; padding: 0 18px; font-size: 14px; font-weight: 500; color: var(--paper);
  background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); transition: background-color .25s ease, box-shadow .25s ease; }
.hero .acts .ulink.look { min-height: 42px; padding: 0; font-size: 14px; color: rgba(255,255,255,.72); background: none; box-shadow: none;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color .25s ease, text-decoration-color .25s ease; }
.hero .acts .ulink.look { gap: 6px; }
.hero .acts .ulink.look::after { content: "\2192"; }
@media (hover: hover) and (pointer: fine) {
  .hero .acts .btn-main:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); }
  .hero .acts .ulink.look:hover { color: #fff; text-decoration-color: rgba(255,255,255,.6); box-shadow: none; }
}

/* the X account in the footer line: the logo and the handle, in the footer's grey */
.line .x-link { display: inline-flex; align-items: center; gap: 6px; }
.line .x-link svg { width: 12px; height: 12px; fill: currentColor; }
@media (max-width: 420px) { .line .x-link { font-size: 0; gap: 0; } .line .x-link svg { width: 13px; height: 13px; } }

/* very short screens: the footer line stays one line under the actions (the X link shows its logo only) */
@media (max-height: 300px) { .line { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; } .line .x-link { font-size: 0; gap: 0; } }


/* team pass: one continuous underline under "Take a look →", a white "Launch a studio", more air in the hero */
.hero .acts .ulink.look { min-height: 0; padding: 0 0 3px; text-decoration: none;
  background: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.32)) 0 100% / 100% 1px no-repeat; transition: color .25s ease, background-size .25s ease; }
.hero .acts .btn-main { background: #fff; color: #090909; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .hero .acts .ulink.look:hover { background-image: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)); }
  .hero .acts .btn-main:hover { background: #E4E4E4; box-shadow: none; }
}
@media (min-aspect-ratio: 4/5) and (min-height: 541px) { h1.nt-wm { margin-bottom: 34px; } .hero .lede { margin-top: 18px; } .acts { margin-top: 42px; } }
@media (max-aspect-ratio: 4/5) and (min-height: 641px) { h1.nt-wm { margin-bottom: 18px; } .hero .lede { margin-top: 14px; } .acts { margin-top: 26px; } }

/* the footer line sits in the page's bottom corners: links bottom-left, sound bottom-right, a small inset */
.line { padding-left: 20px; padding-right: 20px; }
@media (max-width: 600px) { .line { padding-left: 14px; padding-right: 14px; } }

/* short screens: the screen runs under the footer line, so its caption would be cut; the screen still dives on tap or click */
@media (max-height: 540px) { .scr-enter { display: none !important; } }