@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&family=JetBrains+Mono:wght@400;700&family=Silkscreen:wght@400;700&family=Oswald:wght@400;600&family=Caveat:wght@500;700&display=swap');

/* ═══ tokens ═══════════════════════════════════════════════════ */
:root {
  --hud-bg: rgba(12, 12, 24, .42);
  --hud-fg: #f4f1fa;
  --hud-dim: rgba(244, 241, 250, .6);
  --hud-border: rgba(255, 255, 255, .16);
  --ink: #0b0b10;
  --snow: #fbfbff;
  --font-ui: 'Arimo', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --bass: 0; --mid: 0; --high: 0; --beat: 0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { font-family: var(--font-ui); background: #0b1030; color: var(--hud-fg); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
.dim { opacity: .6; }
.small { font-size: 12px; }
canvas.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ═══ HUD ══════════════════════════════════════════════════════ */
.am-hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 16px; pointer-events: none;
}
.am-hud > * { pointer-events: auto; }
.hud-left { display: flex; align-items: baseline; gap: 12px; }
.am-wordmark { font: 700 22px/1 var(--font-ui); text-decoration: none; letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.hud-concept { font: 12px var(--font-mono); color: var(--hud-dim); }
.hud-concept a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; pointer-events: auto; } /* your Steam page */
.hud-concept a:hover { color: var(--hud-fg); }
.hud-left { flex-wrap: wrap; }
.hud-live { display: inline-flex; gap: 10px; font: 12px var(--font-mono); color: var(--hud-dim); }
.hud-live:empty { display: none; }
.hud-now { color: inherit; text-decoration: none; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-now:hover { color: var(--hud-fg); text-decoration: underline; }
.hud-player { display: inline-flex; align-items: center; gap: 4px; pointer-events: auto; }
.hud-skip { font: 11px/1 var(--font-mono); width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--hud-border); background: var(--hud-bg); color: var(--hud-fg); display: inline-grid; place-items: center; }
.hud-skip:hover { background: rgba(255, 255, 255, .18); }
/* write-ups (markdown), in each world's own type */
.hud-right { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hud-btn {
  font: 12px var(--font-mono); padding: 7px 11px; border-radius: 999px;
  background: var(--hud-bg); border: 1px solid var(--hud-border); color: var(--hud-fg);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: transform .15s, background .15s;
}
.hud-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.18); }
.hud-btn.strong { background: rgba(255,255,255,.9); color: var(--ink); }
.am-hint {
  position: fixed; left: 16px; bottom: 14px; z-index: 40; max-width: min(520px, calc(100vw - 32px));
  font: 12px/1.5 var(--font-mono); color: var(--hud-dim); pointer-events: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.am-hint a { pointer-events: auto; color: inherit; }
.am-hint kbd { font: inherit; border: 1px solid var(--hud-border); border-radius: 4px; padding: 0 4px; }

/* tooltip that follows 3D hover targets */
.am-tip {
  position: fixed; z-index: 45; pointer-events: none; transform: translate(-50%, calc(-100% - 14px));
  font: 12px var(--font-mono); padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  background: rgba(10, 10, 20, .78); color: #fff; border: 1px solid var(--hud-border);
  opacity: 0; transition: opacity .15s;
}
.am-tip.show { opacity: 1; }
.am-tip b { font-family: var(--font-ui); }

/* ═══ sound gate ═══════════════════════════════════════════════ */
.am-gate {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 44, 100, .75), rgba(8, 8, 20, .92));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .7s, filter .7s;
}
.am-gate.out { opacity: 0; filter: blur(12px); pointer-events: none; }
.gate-box { text-align: center; padding: 16px; }
.gate-mark {
  font: 700 clamp(72px, 18vw, 180px)/1 var(--font-ui); letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff 20%, #b9c6f2 55%, #f3c3b3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 30px rgba(180, 190, 255, .35));
  transition: transform .2s ease-out; margin-bottom: 18px;
  animation: gateFloat 5s ease-in-out infinite;
}
@keyframes gateFloat { 50% { translate: 0 -8px; } }
.gate-box p { font: 14px var(--font-mono); margin-bottom: 18px; }
.gate-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.gate-btns button { font: 14px var(--font-mono); padding: 12px 18px; border-radius: 10px; border: 1px solid var(--hud-border); background: rgba(255,255,255,.06); transition: background .15s, transform .15s; }
.gate-btns button:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.gate-btns .gate-on { background: #fff; color: var(--ink); }
/* the column is as wide as the two sound buttons; the work button stretches to match */
.gate-choices { display: inline-flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.gate-choices .gate-btns { margin-bottom: 0; }
.gate-work { font: 13px var(--font-mono); padding: 10px 16px; border-radius: 999px; color: var(--hud-fg); border: 1px dashed rgba(255,255,255,.35); transition: background .15s; }
.gate-work:hover { background: rgba(255,255,255,.12); }
/* on the welcome screen, only the wordmark stays in the HUD */
body.intro .am-hud .hud-right, body.intro .am-hint { display: none; }


/* ═══ toasts + modal ═══════════════════════════════════════════ */
.am-toasts { position: fixed; bottom: 16px; right: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.am-toast {
  font: 13px var(--font-mono); padding: 10px 14px; border-radius: 10px; max-width: calc(100vw - 32px);
  background: rgba(12,12,26,.88); color: #fff; border: 1px solid rgba(255,220,240,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: toastIn .45s cubic-bezier(.2,1.4,.4,1);
}
.am-toast.out { opacity: 0; transform: translateY(8px); transition: .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.am-x { font-size: 18px; line-height: 1; padding: 0 4px; opacity: .7; }
.am-x:hover { opacity: 1; }
.am-link { font: 12px var(--font-mono); text-decoration: underline; opacity: .6; margin-top: 14px; }

.am-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: rgba(5,5,15,.55); backdrop-filter: blur(4px); padding: 16px; }
.am-modal-box {
  width: min(640px, 100%); max-height: min(86vh, calc(100vh - var(--meters-h, 0px) - 48px)); max-height: min(86dvh, calc(100dvh - var(--meters-h, 0px) - 48px)); overflow: auto; overscroll-behavior: contain; padding: 18px;
  background: #11121f; color: #eee; border-radius: 14px; border: 1px solid var(--hud-border);
  font-family: var(--font-mono); animation: toastIn .35s;
}
.am-modal-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 13px; }
.am-modal-head .am-x { margin-left: auto; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.badge { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); }
.badge.got { background: linear-gradient(135deg, rgba(240,184,208,.18), rgba(168,204,224,.14)); border-style: solid; border-color: rgba(240,184,208,.4); }
.badge-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 16px; }
.badge.got .badge-icon { background: #f0b8d0; color: #16101e; }
.badge-name { font-size: 13px; font-weight: 700; }
.badge-hint { font-size: 11px; opacity: .55; margin-top: 2px; }
.unlock-list { display: grid; gap: 6px; font-size: 13px; }
.unlock { display: flex; gap: 8px; align-items: center; }
.unlock.locked { opacity: .45; }

/* ═══ unlock effects ═══════════════════════════════════════════ */
.sparkle { position: fixed; z-index: 200; pointer-events: none; color: #fff6c8; font-size: 14px; text-shadow: 0 0 8px #f0b8d0; animation: spark .9s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), 26px) scale(.3) rotate(90deg); opacity: 0; } }
html.crt body::after {
  content: ''; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45));
  mix-blend-mode: multiply; animation: flick 3s steps(2) infinite;
}
@keyframes flick { 50% { opacity: .85; } }
html.crt.video-playing body::after { display: none; } /* a YouTube video is playing: keep it clear */
html.konami body { animation: konami 2.4s steps(12); }
.am-konami-trail {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 8px); z-index: 130; pointer-events: none;
  display: flex; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 700 14px var(--font-mono);
  background: rgba(10,10,20,.55); color: rgba(255,255,255,.28); opacity: 0; transition: opacity .25s, transform .25s;
}
.am-konami-trail.show { opacity: 1; transform: translate(-50%, 0); }
.am-konami-trail .lit { color: #fff6c8; text-shadow: 0 0 8px #f0b8d0; }
.am-konami-trail.done .lit { color: #9dffc0; text-shadow: 0 0 10px #9dffc0; }
@keyframes konami { 0% { filter: hue-rotate(0) } 25% { filter: hue-rotate(180deg) invert(1) } 50% { filter: hue-rotate(90deg) saturate(4) } 75% { filter: invert(1) } 100% { filter: none } }

/* ═══ sleeping beauty ══════════════════════════════════════════ */
.am-sleep { position: fixed; inset: 0; z-index: 150; background: rgba(4,4,14,.82); display: grid; place-items: center; animation: fadeIn 1.2s; transition: opacity .8s; }
.am-sleep.out { opacity: 0; }
@keyframes fadeIn { from { opacity: 0; } }
.zzz { font: 700 48px var(--font-ui); color: #c9d4ff; display: flex; gap: 10px; }
.zzz span { animation: zz 2.4s ease-in-out infinite; }
.zzz span:nth-child(2) { animation-delay: .4s; } .zzz span:nth-child(3) { animation-delay: .8s; font-size: 64px; }
@keyframes zz { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-18px); opacity: 1; } }
.sleep-msg { position: absolute; bottom: 20%; font: 13px var(--font-mono); opacity: .5; }

/* ═══ secret terminal ══════════════════════════════════════════ */
.am-term {
  --t-bg: rgba(14, 12, 22, .94); --t-fg: #e9e6f2; --t-a: #9dffc0; --t-dim: #8a86a0; --t-err: #ff8a9a;
  position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px)); height: min(420px, 70vh);
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: var(--t-bg); color: var(--t-fg); font: 13px/1.6 var(--font-mono);
  border: 1px solid rgba(157,255,192,.3); box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: termIn .35s cubic-bezier(.2,1.3,.4,1);
}
html.classic .am-term { --t-bg: rgba(22,16,30,.95); --t-a: #f0b8d0; --t-dim: #987aaa; --t-err: #d49898; border-color: rgba(255,190,215,.45); }
@keyframes termIn { from { transform: translate(-50%, -46%) scale(.94); opacity: 0; } }
.am-term-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 11px; color: var(--t-dim); border-bottom: 1px solid rgba(255,255,255,.08); }
.am-term-bar .am-x { margin-left: auto; }
.dots { display: flex; gap: 5px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff6a6a; } .dots i:nth-child(2) { background: #ffd36a; } .dots i:nth-child(3) { background: #6aff9a; }
.am-term-out { flex: 1; overflow: auto; padding: 12px 14px; }
.am-term-out pre { font: inherit; white-space: pre-wrap; }
.am-term-out .a { color: var(--t-a); } .am-term-out .dim { color: var(--t-dim); opacity: 1; } .am-term-out .err { color: var(--t-err); } .am-term-out .warn { color: #ffd36a; }
.am-term-out .log { border-left: 2px solid var(--t-a); padding-left: 12px; margin: 4px 0; color: var(--t-dim); }
.am-term-in { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.am-term-in .prompt, .am-term-out .prompt { color: var(--t-a); white-space: nowrap; }
.am-term-in input { flex: 1; min-width: 0; font: inherit; color: inherit; background: none; border: 0; outline: 0; caret-color: var(--t-a); }

/* ═══ world panels ═════════════════════════════════════════════ */
.world-panel {
  position: fixed; inset: 0; z-index: 96; overflow: auto;
  background: var(--w-bg); color: var(--w-fg); font-family: var(--w-body);
  clip-path: circle(0 at var(--ox) var(--oy));
  transition: clip-path .75s cubic-bezier(.7,0,.2,1);
}
.world-panel.in { clip-path: circle(150% at var(--ox) var(--oy)); }
.world-panel.out { clip-path: circle(0 at var(--ox) var(--oy)); transition-duration: .55s; }
.wp-inner { max-width: 1100px; margin: 0 auto; padding: 8px 16px 48px; }
/* the top bar (spinning (am), back, sound) is the catalog's (catalog.css), in each division's colors */
.world-panel .cat-top { --c-mono: var(--font-mono); --c-fg: var(--w-fg); --c-bg: transparent; --c-soft: transparent; }
.world-panel .cat-top::before { background: var(--w-bg); background-attachment: fixed; } /* fades out like the catalog's (catalog.css) */
.world-panel .cat-btn { color: inherit; background: transparent; border-color: currentColor; opacity: .85; }
.world-panel .cat-btn:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.world-panel .cat-btn[aria-pressed="true"] { background: color-mix(in srgb, currentColor 22%, transparent); color: inherit; }
.world-panel .cat-mark-text { color: inherit; }
.wp-division { font: 12px var(--font-mono); opacity: .6; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.wp-title { font: var(--w-title); margin-bottom: 12px; line-height: .95; }
.wp-title img { width: min(720px, 100%); display: block; }
.wp-tag { font-size: 17px; max-width: 60ch; opacity: .85; margin-bottom: 10px; }
.wp-hello { font: 13px var(--font-mono); color: var(--w-accent); margin-bottom: 36px; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.wp-foot { margin-top: 48px; font: 13px var(--font-mono); opacity: .55; text-align: center; }

.card {
  position: relative; padding: 12px; border-radius: var(--w-radius, 14px);
  background: var(--w-card); border: var(--w-card-border);
  transform: perspective(700px) rotateY(calc(var(--mx, 0) * 10deg)) rotateX(calc(var(--my, 0) * -10deg));
  transition: transform .2s ease-out, box-shadow .2s;
  outline-offset: 3px;
}
.card:hover { box-shadow: var(--w-card-shadow); }
.cover.playing + .stamp { display: none; } /* don't cover the player's controls */
.world-panel.over-index { z-index: 98; } /* opened from the catalog: sits above it */
.stamp { position: absolute; top: 18px; right: 18px; font: 700 11px var(--font-mono); padding: 3px 7px; border-radius: 4px; background: var(--w-stamp-bg, rgba(0,0,0,.75)); color: var(--w-stamp-fg, #fff); transform: rotate(3deg); }
.card h3 { font: var(--w-card-title); margin-bottom: 4px; }
.card .meta { font: 11px var(--font-mono); opacity: .6; margin-bottom: 6px; }
.card .byline { font: italic 13px var(--w-body); opacity: .75; margin: -2px 0 6px; }
.card p { font-size: 14px; opacity: .85; line-height: 1.45; }

/* ═══ index view ═══════════════════════════════════════════════ */
.index-panel {
  position: fixed; inset: 0; z-index: 97; overflow: auto; background: #fafaf7; color: #111;
  opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s;
  font-family: 'Arimo', Arial, sans-serif;
}
.index-panel.in { opacity: 1; transform: none; }
/* its contents look exactly like /work/: see /assets/catalog.css */
.index-panel tbody tr { cursor: pointer; }

/* ═══ mobile + motion ══════════════════════════════════════════ */
@media (max-width: 640px) {
  .hud-concept, .hud-now { display: none; }
  .hud-btn { padding: 6px 9px; font-size: 11px; }
  .wp-title { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.card { cursor: pointer; }
/* the pop-up, covers, action buttons, write-ups and the division palettes live in /assets/popup.css */
/* credits (terminal: credits) */
/* a little under the visible space (the screen, minus the meters when they're open), scrolling inside */
.credits .am-modal-box { max-width: 640px; max-height: calc(100vh - var(--meters-h, 0px) - 48px); max-height: calc(100dvh - var(--meters-h, 0px) - 48px); overflow-y: auto; overscroll-behavior: contain; }
.credits-body { font-size: 13px; line-height: 1.6; }
.credits-body h4 { font: 700 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 6px; opacity: .8; }
.credits-body p { margin-bottom: 8px; }
.credits-body ul { margin: 0 0 10px 18px; }
.credits-body a { color: inherit; }