:root {
  --bg: #07080a; --fg: #eef0f3; --dim: #a3a9b2; --dim2: #5d636c; --acc: #cfff4a; --alarm: #ff3b4e;
  --ink: rgba(7, 8, 10, 0.66); --line: rgba(255, 255, 255, 0.16);
  --mono: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 300 12px/1.4 var(--mono); overflow: hidden; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
body::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 30vh; background: linear-gradient(to top, rgba(7,8,10,.7), transparent); pointer-events: none; transition: opacity .8s ease; }
body::after { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 18vh; background: linear-gradient(to bottom, rgba(7,8,10,.7), transparent); pointer-events: none; transition: opacity .8s ease; }
body.placing #world { cursor: crosshair; }
body.lobby::before, body.lobby::after { opacity: 0; }
body.lobby #dead, body.lobby #offline { display: none !important; }

/* The room's interface is a few words that sit on ink: the room behind them is white plaster in one
   corner and dark wood in the next, so nothing on it is bare text. One signal colour says "on". */
.hud { position: fixed; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 22px 26px; pointer-events: none; transition: opacity .9s ease; }
body.lobby .hud, body.lobby .hint { opacity: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.top { top: 0; align-items: flex-start; }
.bottom { bottom: 0; }
.hud, .hint, .veil { z-index: 2; }

.pill { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); border: 1px solid var(--hair); border-radius: 3px; color: var(--fg); font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color .12s, color .12s; }
.pill:hover { border-color: rgba(255, 255, 255, .5); }
.pill.on { color: var(--acc); border-color: var(--acc); }
.pill:disabled { color: var(--dim2); cursor: default; }
.switch::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 1px; }
.switch.on::before { background: var(--acc); }

/* top left: which fly, who is here */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.meta { display: inline-flex; align-items: baseline; background: var(--ink); border: 1px solid var(--hair); border-radius: 3px; padding: 6px 10px; color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.meta b { font-weight: 500; color: var(--fg); }
.meta > * + *::before { content: '·'; margin: 0 8px; color: var(--dim2); }

/* bottom left: what she is doing, in one word */
.state { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--ink); border: 1px solid var(--hair); border-radius: 3px; padding: 14px 16px 12px; min-width: 250px; }
.doing { font-size: clamp(28px, 4vw, 40px); font-weight: 300; letter-spacing: -.02em; line-height: 1; color: var(--fg); text-transform: lowercase; }
.doing.alarm { color: var(--alarm); }
.energy { height: 1px; background: rgba(255,255,255,.18); width: 100%; position: relative; margin: 4px 0 2px; }
.energy i { position: absolute; left: 0; top: -1px; height: 3px; width: 50%; background: var(--acc); transition: width .6s linear, background .4s; }
.energy i.low { background: var(--alarm); }
.mood { color: var(--dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* bottom right: what you can do, and where you look from */
.actions { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.actions .row { display: flex; gap: 6px; }
.hint { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--acc); border-color: var(--acc); pointer-events: none; text-align: center; max-width: 70vw; white-space: normal; }

button { background: none; border: 0; color: var(--dim); font: 300 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 0; cursor: pointer; position: relative; }
button:hover { color: var(--fg); }
button.on { color: var(--acc); }
button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--acc); }
.pill.on::after { display: none; }

.veil { position: fixed; inset: 0; z-index: 5; background: rgba(7,8,10,.84); display: flex; align-items: center; justify-content: center; text-align: center; }
.veil h1 { font-weight: 300; font-size: clamp(28px, 5vw, 48px); letter-spacing: -.02em; margin: 0 0 10px; }
.veil p { color: var(--dim); margin: 0 0 26px; }
.veil button { color: var(--acc); font-size: 12px; }
.veil button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--acc); }

.ripple { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 60%); animation: rip .5s ease-out forwards; }
@keyframes rip { from { opacity: 1; } to { opacity: 0; } }

/* ============================================================ the lab: the technical view, switched on over the room
   Flat, monochrome, one signal colour. Hairlines, no glass, no rounded cards. */
:root { --panel: rgba(7, 8, 10, 0.84); --hair: rgba(255, 255, 255, 0.10); --labw: 272px; --striph: clamp(150px, 26vh, 210px); --barh: 40px; }
.labui { display: none; position: fixed; z-index: 3; background: var(--panel); font-size: 11px; }
body.lab .labui { display: flex; }
body.lab .hud.top { top: var(--barh); right: var(--labw); }
body.lab .hud.bottom { bottom: var(--striph); right: var(--labw); }
body.lab::before { bottom: var(--striph); right: var(--labw); }
body.lab::after { top: var(--barh); right: var(--labw); }
.k { color: var(--dim); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; }
.labui button { font: 400 10px var(--mono); padding: 6px 8px; color: var(--dim); }
.labui button:hover { color: var(--fg); }
.labui button.on { color: var(--acc); }
.labui button.on::after { left: 8px; right: 8px; bottom: 2px; }
.labui button.danger.on { color: var(--fg); }            /* control conditions read white, the real wiring reads signal */

.labbar { left: 0; right: var(--labw); top: 0; height: var(--barh); align-items: stretch; border-bottom: 1px solid var(--hair); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.labbar::-webkit-scrollbar { display: none; }
.labbar .grp { display: flex; align-items: center; gap: 0; padding: 0 10px; border-right: 1px solid var(--hair); flex: none; }
.labbar button { white-space: nowrap; padding: 6px 7px; }
.labonly { display: none; }
body.lab .labonly { display: inline-flex; }
body.experiment .actions .room, body.experiment #age { display: none; }   /* nothing to put down in an experiment */
.labbar .grp .k { margin-right: 8px; }
.labbar b { min-width: 6ch; font-weight: 400; color: var(--acc); margin: 0 14px 0 4px; font-variant-numeric: tabular-nums; font-size: 10px; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 110px; height: 14px; background: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--dim2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 7px; margin-top: -3px; background: var(--fg); border: 0; border-radius: 0; }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb { background: var(--acc); }
input[type=range]::-moz-range-track { height: 1px; background: var(--dim2); }
input[type=range]::-moz-range-thumb { width: 7px; height: 7px; background: var(--fg); border: 0; border-radius: 0; }

aside.right { right: 0; top: 0; bottom: 0; width: var(--labw); flex-direction: column; border-left: 1px solid var(--hair); overflow-y: auto; scrollbar-width: none; }
aside.right::-webkit-scrollbar { display: none; }
.panel { padding: 12px 16px 14px; border-bottom: 1px solid var(--hair); flex: none; }
.panel h2 { margin: 0 0 10px; font: 400 9px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; }
.panel h2 .hint { position: static; transform: none; color: var(--dim2); text-transform: none; letter-spacing: .04em; margin-left: 12px; flex: 1; text-align: right; font-size: 9px; }
.panel h2.sub-h { margin-top: 10px; }
.panel.notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-left: 2px solid var(--acc); }
.panel.notice button { color: var(--acc); padding: 0; }
#brain { width: 100%; height: clamp(90px, 15vh, 150px); display: block; }
#pathway { width: 100%; height: 108px; display: block; }
#body { width: 100%; height: 116px; display: block; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; align-items: baseline; }
.grid.mini { font-size: 10px; gap: 3px 12px; }
.grid span { color: var(--dim); }
.grid b { font-weight: 300; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.grid.score b { font-size: 14px; }
.grid.score b:first-of-type { color: var(--acc); font-size: 20px; line-height: 1; }
.panel label { display: grid; grid-template-columns: 1fr 84px 4ch; gap: 10px; align-items: center; color: var(--dim); font-size: 10px; margin: 3px 0; }
.panel label b { color: var(--fg); text-align: right; font-weight: 300; font-variant-numeric: tabular-nums; }
.panel label input { width: 100%; }
.flags { display: flex; gap: 14px; margin-top: 10px; min-height: 12px; }
.flags span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim2); transition: color .1s; }
body.saccade #f-saccade { color: var(--acc); }
body.touching #f-touch { color: var(--alarm); }

.strip { left: 0; right: var(--labw); bottom: 0; align-items: stretch; height: var(--striph); border-top: 1px solid var(--hair); }
.strip .panel { border-bottom: 0; display: flex; flex-direction: column; padding: 10px 16px 12px; }
.strip .eyes { flex: 1.6; border-right: 1px solid var(--hair); }
.strip .trace { flex: 1; min-width: 260px; }
.head { display: flex; justify-content: space-between; color: var(--dim); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.head .mid { color: var(--dim2); }
.head .mid i { font-style: normal; }
#eyes, #trace { flex: 1; width: 100%; min-height: 0; display: block; }

.toast { position: fixed; left: 50%; top: calc(var(--barh) + 20px); transform: translateX(-50%); z-index: 5; max-width: 60ch; background: var(--panel); border-left: 1px solid var(--acc); padding: 9px 14px; font-size: 11px; color: var(--fg); animation: appear .25s ease both; }
.toast small { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.toast b { font-weight: 400; color: var(--acc); }
@keyframes appear { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.saccade #world { filter: brightness(1.06); }

/* the kitchen first: the mark, then a click that walks you onto him */
#lobby { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 8vh 6vw 10vh; background: radial-gradient(ellipse 78% 62% at 50% 42%, rgba(7, 8, 10, 0), rgba(7, 8, 10, 0.22) 52%, rgba(7, 8, 10, 0.58)); animation: lobbyin 1.15s ease both; }
#lobby img { width: min(520px, 78vw); height: auto; display: block; filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55)); pointer-events: none; }
#lobby .cta { display: grid; place-items: center; min-height: 44px; }
#lobby .cta > * { grid-area: 1 / 1; }
#lobby .go { color: #07080a; background: var(--acc); border-color: var(--acc); font-size: 12px; letter-spacing: .18em; word-spacing: .4em; padding: 12px 26px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
#lobby.ready .go { opacity: 1; pointer-events: auto; transform: none; }
#lobby .go:hover { color: #07080a; background: #e8ff7a; border-color: #e8ff7a; }
#lobby .go:disabled { color: #07080a; cursor: default; }
#lobby .go::after { display: none; }
#lobby .seek { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 168px; padding: 12px 22px 11px; background: rgba(7, 8, 10, 0.82); border: 1px solid var(--acc); border-radius: 3px; transition: opacity .35s ease; }
#lobby.ready .seek { opacity: 0; pointer-events: none; }
#lobby .seek b { font-weight: 400; font-size: 10px; font-family: var(--mono); letter-spacing: .28em; text-transform: uppercase; color: #cfff4a; }
#lobby .bug { position: relative; width: 40px; height: 20px; animation: buzz 1.7s ease-in-out infinite; }
#lobby .bug .ab { position: absolute; left: 11px; top: 7px; width: 14px; height: 4px; background: var(--acc); border-radius: 2px; }
#lobby .bug .w { position: absolute; top: 1px; width: 11px; height: 9px; border: 1px solid var(--acc); border-radius: 50% 50% 40% 40%; opacity: .75; transform-origin: 50% 90%; }
#lobby .bug .w.l { left: 6px; animation: flap .11s ease-in-out infinite alternate; }
#lobby .bug .w.r { right: 6px; animation: flap .11s ease-in-out infinite alternate-reverse; }
@keyframes flap { from { transform: scaleY(.35) rotate(-18deg); } to { transform: scaleY(1) rotate(12deg); } }
@keyframes buzz { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 30% { transform: translate(11px, -5px) rotate(8deg); } 58% { transform: translate(-6px, 3px) rotate(-6deg); } 82% { transform: translate(7px, -2px) rotate(12deg); } }
body:not(.lobby) #lobby { animation: lobbyout .65s ease forwards; pointer-events: none; }
@keyframes lobbyin { from { opacity: 0; } to { opacity: 1; } }
@keyframes lobbyout { to { opacity: 0; visibility: hidden; } }

@media (max-width: 640px) {
  .hud { padding: 16px; }
  .bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .actions { justify-content: flex-start; gap: 16px; }
}