/* ===== Signs of life. Coordinates follow the 1672 × 941 room artwork. ===== */
.life{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.life span,.life div,.life i,.life b{position:absolute;display:block}
.lightning{left:32.4%;top:10.5%;width:38%;height:31%;background:linear-gradient(180deg,#cfe8ff,#7fb6e6 60%,transparent);mix-blend-mode:screen;opacity:0}
.lightning.go{animation:lightning 1.4s ease-out}
@keyframes lightning{0%{opacity:0}4%{opacity:.55}8%{opacity:.05}13%{opacity:.4}30%{opacity:0}100%{opacity:0}}
.neon{mix-blend-mode:screen;border-radius:2px;filter:blur(2px);opacity:.0;animation:neon 7s steps(1) infinite}
.n1{left:56.3%;top:11.8%;width:2%;height:5.6%;background:#d36bff;animation-duration:9s}
.n2{left:49.9%;top:24.4%;width:1.4%;height:5.4%;background:#5ff3ff;animation-delay:-3s;animation-duration:6.5s}
.n3{left:32.4%;top:16%;width:1.2%;height:5%;background:#45ffd0;animation-delay:-5s;animation-duration:11s}
.n4{left:52.5%;top:28.4%;width:1.1%;height:2.8%;background:#ff6bd6;animation-delay:-1s;animation-duration:8s}
@keyframes neon{0%,100%{opacity:.18}40%{opacity:.18}41%{opacity:0}42%{opacity:.3}43%{opacity:.05}44%{opacity:.22}80%{opacity:.14}}
.wall-led{left:72.1%;top:11%;width:.5%;height:.8%;border-radius:50%;background:#ff4a3a;box-shadow:0 0 8px 2px #ff3b2b;animation:led 2.4s ease-in-out infinite}
@keyframes led{0%,55%,100%{opacity:.25}60%,90%{opacity:1}}
/* The terminal on the desk keeps working. */
.screen{left:47.9%;top:46.7%;width:4.25%;height:5.5%;overflow:hidden;mix-blend-mode:screen;opacity:.85}
.screen-lines{left:6%;right:6%;top:0;animation:scroll 9s linear infinite}
.screen-lines i{position:relative!important;height:2px;margin:0 0 4px;background:#7ff5ff;opacity:.55;border-radius:1px;width:70%}
.screen-lines i:nth-child(2n){width:45%}.screen-lines i:nth-child(3n){width:85%;opacity:.4}.screen-lines i:nth-child(5n){width:30%;background:#e7bd70}
@keyframes scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.cursor{right:14%;bottom:12%;width:7%;height:12%;background:#aaf9ff;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lamp-flicker{left:56.4%;top:43.6%;width:5.2%;height:8.4%;border-radius:50%;background:radial-gradient(circle,#ffd27a55,transparent 65%);mix-blend-mode:screen;animation:lamp-flick 13s infinite}
@keyframes lamp-flick{0%,100%{opacity:.75}71%{opacity:.75}72%{opacity:.2}73%{opacity:.8}74%{opacity:.35}76%{opacity:.75}}
.mote{width:2px;height:2px;border-radius:50%;background:#ffe2a6;opacity:0;animation:mote 9s ease-in-out infinite}
.m1{left:57%;top:47%}.m2{left:59.5%;top:45%;animation-delay:-2s;animation-duration:11s}.m3{left:61%;top:49%;animation-delay:-5s}.m4{left:58%;top:50%;animation-delay:-7s;animation-duration:12s}.m5{left:60.2%;top:43.5%;animation-delay:-3.5s;animation-duration:10s}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}20%{opacity:.8}60%{opacity:.5}100%{opacity:0;transform:translate(14px,-26px)}}
.steam{width:.35%;height:2.4%;left:56.4%;top:51.4%;border-radius:50%;background:linear-gradient(#ffffff00,#ffffff40);filter:blur(1.5px);opacity:0;animation:steam 5s ease-out infinite}
.s2{left:56.9%;animation-delay:-2.5s}
@keyframes steam{0%{opacity:0;transform:translateY(6px) scaleX(1)}30%{opacity:.6}100%{opacity:0;transform:translateY(-16px) scaleX(2.2)}}
/* Nightwire breathes: a copy of his own pixels, stretched by a hair from the feet. */
.breathe{left:31.6%;top:52.6%;width:6.6%;height:25.2%;background:url(assets/nightwire-room.png) no-repeat;background-size:calc(100%*100/6.6) calc(100%*100/25.2);background-position:calc(100%*31.6/(100 - 6.6)) calc(100%*52.6/(100 - 25.2));transform-origin:50% 100%;animation:breathe 4.2s ease-in-out infinite;transition:filter 1.2s ease}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.006,1.014)}}
.room.lamp-off .breathe{filter:brightness(.68) saturate(.8)}
/* Radio on air */
.onair{left:72.6%;top:33%;width:11%;height:18%;opacity:0;transition:opacity .6s}
.room.radio-on .onair{opacity:1}
.onair .led{left:33.5%;top:68.5%;width:19%;height:15%;border-radius:40%;background:radial-gradient(ellipse,#ffb84299,transparent 70%);mix-blend-mode:screen;animation:vu 0.9s ease-in-out infinite alternate}
@keyframes vu{from{opacity:.4}to{opacity:1}}
.onair .eq{left:20%;top:6%;width:30%;height:22%;display:flex!important;align-items:flex-end;gap:12%}
.onair .eq i{position:relative!important;flex:1;background:#e7bd70;height:30%;box-shadow:0 0 6px #e7bd70aa;animation:eq .7s ease-in-out infinite alternate}
.onair .eq i:nth-child(2){animation-delay:-.2s;animation-duration:.55s}.onair .eq i:nth-child(3){animation-delay:-.45s;animation-duration:.8s}.onair .eq i:nth-child(4){animation-delay:-.1s;animation-duration:.6s}.onair .eq i:nth-child(5){animation-delay:-.3s;animation-duration:.9s}
@keyframes eq{from{height:15%}to{height:100%}}
.onair .note{color:#e7bd70;font:14px var(--pixel);text-shadow:0 0 6px #000;opacity:0;animation:note 3.6s ease-out infinite}
.nt1{left:70%;top:20%}.nt2{left:55%;top:30%;animation-delay:-1.8s!important}
@keyframes note{0%{opacity:0;transform:translate(0,10px)}25%{opacity:1}100%{opacity:0;transform:translate(16px,-34px) rotate(15deg)}}
/* Objects you can pick up: the cup and the photo. */
.room-object{position:absolute;padding:0;border:0;background:none;cursor:pointer;z-index:1}
.room-object img{display:block;width:100%;height:auto;image-rendering:pixelated}
.room-object .object-label{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);white-space:nowrap;background:#0a1420ee;border:1px solid var(--gold);border-radius:5px;padding:6px 9px;font:10px var(--pixel);letter-spacing:1px;color:var(--gold);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.room-object:hover .object-label,.room-object:focus-visible .object-label{opacity:1;transform:translateX(-50%) translateY(0)}
.room-object:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.cup{left:62.3%;top:45.6%;width:2.7%;filter:drop-shadow(0 2px 2px #000a) drop-shadow(0 0 6px #ffcf6a55);transition:transform .2s}
.cup:hover{transform:translateY(-3px) rotate(-3deg)}
.room.lamp-off .cup{filter:drop-shadow(0 2px 2px #000a) brightness(.7)}
.glint{position:absolute;right:12%;top:6%;width:30%;aspect-ratio:1;background:radial-gradient(circle,#fff 0 12%,transparent 13%),linear-gradient(90deg,transparent 45%,#fffbe0 45% 55%,transparent 55%),linear-gradient(0deg,transparent 45%,#fffbe0 45% 55%,transparent 55%);opacity:0;animation:glint 5s ease-in-out infinite;pointer-events:none}
@keyframes glint{0%,82%,100%{opacity:0;transform:scale(.3) rotate(0)}88%{opacity:1;transform:scale(1) rotate(45deg)}}
.photo{left:16.6%;top:38.2%;width:3.9%;padding:3px 3px 9px;background:#efe6d2;box-shadow:2px 3px 6px #000b;transform:skewY(-24deg) rotate(4deg);transform-origin:0 0;transition:transform .25s,box-shadow .25s}
.photo img{image-rendering:auto}
.photo:hover,.photo:focus-visible{transform:skewY(-24deg) rotate(1deg) scale(1.12);box-shadow:4px 6px 12px #000c}
.photo .pin-dot{position:absolute;left:44%;top:-3px;width:7px;height:7px;border-radius:50%;background:#d8383a;box-shadow:0 1px 1px #000}
.photo .object-label{transform:translateX(-50%) skewY(24deg)}
.photo:hover .object-label,.photo:focus-visible .object-label{transform:translateX(-50%) skewY(24deg)}
.room.lamp-off .photo{filter:brightness(.72)}
/* Speech bubble swap */
.speech q{quotes:'“' '”';transition:opacity .25s}
.speech.swap q{opacity:0}
/* Pause everything with the room's own atmosphere switch, or when motion is reduced. */
.room.atmosphere-paused .life *,.room.atmosphere-paused .glint,.room.atmosphere-paused .breathe{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.life *,.glint,.breathe,.room-object{animation:none!important;transition:none!important}.lightning{display:none!important}.neon{opacity:.15}}
@media(max-width:600px){.room-object .object-label{font-size:8px;padding:4px 6px}.onair .note{font-size:11px}}

/* ===== Status card: a small daily hook ===== */
.day-stats{list-style:none;margin:14px 0 10px;padding:12px 0 0;border-top:1px solid #34465d;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.day-stats li{display:flex;flex-direction:column;gap:2px;min-width:0}
.day-stats b{font:500 19px var(--pixel);color:#f3f8fc;white-space:nowrap}
.day-stats span{font:8px var(--pixel);letter-spacing:.8px;color:var(--gold)}
.day-stats small{font-size:9px;color:#8ea4b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-card{width:300px}
.rotating{font:13px/1.5 var(--pixel);color:#9ed8ff;min-height:20px;margin:6px 0 10px;opacity:0;transition:opacity .35s}
.rotating.show{opacity:1}
.room-hint em{font-style:normal}
.dock button.on-air{border-color:var(--gold);box-shadow:0 0 0 1px #e7bd7040,0 0 16px #e7bd7030}
.dock button.on-air svg{stroke:var(--gold)}
@media(max-width:1100px) and (min-width:601px){.now-card{width:260px}.day-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.day-stats{margin:6px 0 4px;padding-top:6px;gap:4px}.day-stats b{font-size:14px}.day-stats small{display:none}.day-stats span{font-size:7px}.rotating{display:none}.now-card{width:auto}}
@media(max-height:700px) and (max-width:600px){.day-stats{display:none}}

/* ===== Notebook: one spread per night ===== */
#entry-index button small,#contact-index button small{display:block;font-size:10px;color:#7f98ae;margin-top:2px;letter-spacing:.3px}
.night-head{border-bottom:1px dashed #45607d;padding-bottom:14px;margin-bottom:16px}
.night-head time{font:10px var(--pixel);letter-spacing:1px;color:var(--gold)}
#notebook-entry .night-head h3{margin:10px 0 8px}
.route{font:12px var(--pixel)!important;color:#9ed8ff!important;letter-spacing:.4px;margin:0!important}
.note-block{position:relative;margin:0 0 18px}
.note-block h4,.log-title,#contact-entry h4{font:11px var(--pixel);letter-spacing:1px;color:#91afcb;margin:0 0 8px;text-transform:uppercase}
#notebook-entry .note-block p{margin:0 0 12px;font-size:16px;line-height:1.8}
.note-block.pinned{background:#0f1d2e;border:1px solid #e7bd7055;border-radius:6px;padding:16px 18px 12px}
.stamp{position:absolute;right:12px;top:-11px;font:11px var(--pixel);letter-spacing:1.5px;color:#1b1206;background:var(--gold);padding:4px 8px;border-radius:3px;transform:rotate(3deg);box-shadow:0 2px 6px #0008}
.note-photo{display:flex;align-items:center;gap:12px;padding:6px;margin:4px 0 10px;border:1px solid #45607d;border-radius:5px;background:#0b1625;width:100%;text-align:left;font:11px var(--pixel);color:var(--gold)}
.note-photo img{width:92px;height:auto;border:3px solid #efe6d2;transform:rotate(-2deg)}
.note-photo:hover{border-color:var(--gold)}
.note-time{display:block;font-size:10px;color:#7f98ae}
.night-log{list-style:none;margin:0 0 6px;padding:0}
.night-log li{display:grid;grid-template-columns:52px 1fr;gap:2px 10px;padding:8px 0;border-top:1px solid #2a3c52;font-size:14px;line-height:1.6;color:#cfdcea}
.night-log li time{font:11px var(--pixel);color:#7f98ae;padding-top:2px}
.night-log li b{color:#eef5fb;font-weight:600}
.night-log .margin{grid-column:2;font:13px var(--pixel);font-style:normal;color:var(--gold);opacity:.9}
.night-log .margin:before{content:'✎ ';opacity:.7}

/* ===== The book: people as characters ===== */
.book-today{margin:0 0 12px}
.today-pick{display:grid;width:100%;text-align:left;gap:2px;padding:10px 12px;border:1px solid #e7bd7066;border-radius:6px;background:#e7bd700d}
.today-pick span{font:8px var(--pixel);letter-spacing:1px;color:var(--gold)}
.today-pick b{font:15px var(--pixel);color:#f3f8fc}
.today-pick small{font-size:10px;color:#8ea4b8}
.today-pick:hover{border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 12px}
.chip{font:9px var(--pixel);letter-spacing:.5px;padding:5px 7px;border-radius:12px;border:1px solid #34465d;background:#0b1625;color:#a9bdd0}
.chip[aria-pressed=true]{border-color:var(--mint);color:var(--mint);background:#173029}
.book-actions{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.book-actions button{font-size:11px}
.dot{display:inline-block!important;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;background:#596b80}
.dot-correspondent{background:var(--mint)}.dot-acquaintance{background:var(--gold)}
.list-more{font-size:10px;color:#7f98ae;padding:8px 4px}
.person-card{display:flex;gap:16px;align-items:center;margin:0 0 16px}
.avatar{flex:0 0 64px;height:64px;display:grid;place-items:center;font:30px var(--pixel);color:#0c1626;background:hsl(var(--hue) 55% 68%);border-radius:6px;box-shadow:inset -6px -6px 0 hsl(var(--hue) 45% 52%),inset 6px 6px 0 hsl(var(--hue) 70% 80%),0 0 0 3px #0c1626,0 0 0 4px #45607d;image-rendering:pixelated}
.who{min-width:0}
#contact-entry .who h3{margin:6px 0 8px;font-size:30px;overflow-wrap:anywhere}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badges span{font:9px var(--pixel);letter-spacing:1px;padding:4px 7px;border-radius:3px;border:1px solid #45607d;color:#9ed8ff}
.badges .rel-correspondent{border-color:#b4efd880;color:var(--mint)}
.badges .rel-acquaintance{border-color:#e7bd7080;color:var(--gold)}
.margin-note{font:15px/1.6 var(--pixel)!important;color:#e9dcc0!important;border-left:3px solid var(--gold);padding:2px 0 2px 12px;margin:0 0 18px!important}
#contact-entry blockquote.echo{margin:0 0 10px;padding:10px 14px;border-radius:6px;background:#0b1625;border:1px solid #2a3c52;font-size:14px;line-height:1.7;color:#c9d8e6;font-style:italic}
.muted-line{font-size:14px!important;color:#8ea4b8!important}
@media(max-width:600px){.chips{display:none}.book-today{display:none}.avatar{flex-basis:48px;height:48px;font-size:22px}#contact-entry .who h3{font-size:24px}.night-log li{grid-template-columns:44px 1fr;font-size:13px}.book-actions{flex-direction:row}.book-actions button{flex:1}}

/* ===== Board, trophy, radio panels ===== */
.inline-link{background:none;border:0;padding:0;color:#85ceff;text-decoration:underline;font:inherit;font-size:13px;cursor:pointer;margin-top:8px}
.board-grid{display:grid;gap:12px;margin:18px 0}
.board-card{display:block;text-align:left;padding:16px 18px;border:1px solid #34465d;border-radius:6px;background:#0b1625;color:var(--text)}
.board-card p{font-size:14px;line-height:1.7;color:#c9d8e6;margin:8px 0 0}
.board-card h3{font:24px var(--pixel);margin:10px 0 4px;color:#f3f8fc}
.board-card ol{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.7;color:#c9d8e6}
.board-card ol b{color:var(--gold);font-weight:600}
.campaign{background:repeating-linear-gradient(135deg,#0b1625 0 12px,#0d1a2b 12px 24px);border-color:#e7bd7055}
.pinned-photo{display:flex;align-items:center;gap:14px;font:12px var(--pixel);color:var(--gold);cursor:pointer}
.pinned-photo img{width:96px;height:auto;border:4px solid #efe6d2;border-bottom-width:12px;transform:rotate(-3deg);box-shadow:2px 3px 8px #000a}
.pinned-photo:hover{border-color:var(--gold)}
.trophy-hero{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.trophy-big{width:104px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 14px #ffcf6a55);animation:cup-float 4s ease-in-out infinite}
@keyframes cup-float{50%{transform:translateY(-4px)}}
.trophy-hero h2{margin:8px 0 4px}
.race-photo{margin:0 0 16px;padding:8px 8px 6px;background:#efe6d2;border-radius:3px;transform:rotate(-.6deg);box-shadow:0 8px 24px #000a}
.race-photo img{display:block;width:100%;height:auto;image-rendering:pixelated}
.race-photo figcaption{font:12px var(--pixel);color:#3a3326;padding:7px 2px 2px;text-align:center}
.race-facts{margin:0 0 14px}
.race-facts dd{font-size:14px!important;line-height:1.6}
.radio-set{margin:18px 0 12px;padding:16px;border-radius:10px;background:linear-gradient(#2b1d12,#1a120b);border:1px solid #6b4a2a;box-shadow:inset 0 2px 0 #ffffff10,0 8px 20px #0008}
.dial{position:relative;height:34px;border-radius:5px;background:linear-gradient(#ffcf7a,#e09a3c);box-shadow:inset 0 0 12px #8a4f12;overflow:hidden;margin-bottom:14px}
.dial-marks{position:absolute;inset:0;display:grid;place-items:center;font:11px var(--pixel);letter-spacing:1px;color:#5a3410}
.dial-needle{position:absolute;top:3px;bottom:3px;left:62%;width:2px;background:#b3261e;box-shadow:0 0 4px #b3261e;transition:left 1.2s cubic-bezier(.3,1.6,.5,1)}
.radio-panel.is-on .dial-needle{left:70%;animation:needle 3s ease-in-out infinite alternate}
@keyframes needle{to{left:71.5%}}
.np{display:grid;gap:3px;margin-bottom:14px;color:#f6e7cf}
.np .eyebrow{color:var(--gold)}
.np strong{font:20px var(--pixel)}
.np span{font-size:13px;color:#e4cfae}
.np small{font-size:11px;color:#b79c78}
.radio-buttons{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#radio-play{padding:10px 18px;border-radius:6px;border:1px solid var(--gold);background:#e7bd7020;color:var(--gold);font:14px var(--pixel);letter-spacing:1px}
#radio-play[aria-pressed=true]{background:var(--gold);color:#1b1206}
.vol{display:flex;align-items:center;gap:8px;font:10px var(--pixel);color:#d9bf98}
.vol input{accent-color:#e7bd70;width:120px}
.radio-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.radio-links .action{margin:0}
.credit{border-top:1px solid #34465d;padding-top:12px}
@media(prefers-reduced-motion:reduce){.trophy-big,.radio-panel.is-on .dial-needle{animation:none}}
/* layout nudges for the new card and the pinned photo */
@media(min-width:1101px){.now-card{bottom:112px}}
@media(min-width:901px){.board{left:22.6%;top:31%}.photo{left:16.3%;top:41%}}
.book-actions button{border:1px solid #34465d;border-radius:5px;background:#0b1625;color:#a9bdd0;padding:8px 10px;font:10px var(--pixel);letter-spacing:.5px}
.book-actions button:hover{border-color:var(--gold);color:var(--gold)}
#entry-index{max-height:340px}
#contact-index button{padding:7px 10px!important}
@media(max-width:600px){.notebook-index>p#book-intro{display:block;font-size:10px;margin:0 0 8px}}
@media(max-width:600px){.identity{bottom:272px}}
@media(max-height:700px) and (max-width:600px){.identity{bottom:220px}}