/* ============================================================ Palette background deep navy #001A2A letters strong blue #0870B5 buttons warm yellow #FFF56B #0870B5 on #001A2A measures 3.4:1, which is fine for headings and too low for 12px body text, so small text uses a lighter tint of the same hue and the strong blue carries structure — headings, bars, the warm state, borders. ============================================================ */ :root{ --navy: #001A2A; --navy-2: #00243a; /* raised panels */ --blue: #0870B5; /* the brief's blue: structure and emphasis */ --blue-lit: #b9dcf4; /* same hue, readable at 12px */ --blue-dim: #5f96bd; --yellow: #FFF56B; --alarm: #ff8a6b; --gap:12px; --mono:"IBM Plex Mono",ui-monospace,monospace; --serif:"Source Serif 4",Georgia,serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background: repeating-linear-gradient(45deg, rgba(120,190,240,.028) 0 1px, transparent 1px 15px), repeating-linear-gradient(-45deg, rgba(120,190,240,.028) 0 1px, transparent 1px 15px), var(--navy); background-attachment:fixed; color:var(--blue-lit);font-family:var(--serif);font-size:15.5px; line-height:1.6;display:flex;justify-content:center;padding:var(--gap)} #app{width:100%;max-width:1200px;display:grid;gap:var(--gap); grid-template-columns:230px minmax(0,1fr) 260px; grid-template-rows:auto minmax(0,1fr); grid-template-areas:"h h h" "l m r";height:calc(100vh - var(--gap)*2)} @media(max-width:960px){#app{grid-template-columns:1fr;grid-template-areas:"h" "l" "m" "r";height:auto}} header{grid-area:h;display:flex;gap:8px 16px;align-items:baseline;flex-wrap:wrap; padding:9px 15px 9px 14px; background:linear-gradient(180deg,rgba(14,40,60,.5),rgba(8,22,36,.14))} header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,var(--yellow),rgba(59,130,180,.55) 26%,rgba(59,130,180,.12))} .musbtn{margin-left:auto;align-self:center;background:transparent;border:1px solid var(--blue); color:var(--yellow);border-radius:5px;font-size:15px;line-height:1;padding:3px 9px;cursor:pointer} .musbtn:hover{border-color:var(--yellow)} .musbtn.off{color:var(--blue-dim,#4f7a99);border-color:#274963} header{position:relative} #cog{margin-left:auto} .cogmenu{position:absolute;top:calc(100% + 4px);right:0;z-index:60;display:none;flex-direction:column; background:var(--navy-2,#0f2233);border:1px solid var(--blue);border-radius:3px;min-width:186px;overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.55), inset 0 0 30px rgba(0,0,0,.3)} .cogmenu.on{display:flex} .cogmenu button{background:none;border:0;border-bottom:1px solid #0d3b59;color:var(--blue-lit,#cfe3f2); padding:9px 13px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; display:flex;justify-content:space-between;align-items:center;gap:14px} .cogmenu button:last-child{border-bottom:0} .cogmenu button:hover{background:rgba(255,245,107,.09);color:var(--yellow)} .cogmenu .cogv{color:var(--yellow);letter-spacing:.05em;text-transform:none} /* bar change flash — only when a value actually moves; brief, quiet */ .bar.bp-up .t span{box-shadow:0 0 7px rgba(95,208,138,.85)} .bar.bp-dn .t span{box-shadow:0 0 7px rgba(255,107,107,.85)} .bar.bp-up .r span:last-child{color:#5fd08a} .bar.bp-dn .r span:last-child{color:var(--alarm)} #boardNow .bn-win{font-family:var(--mono);font-size:13px;color:var(--yellow);letter-spacing:.03em;margin-bottom:3px} #boardNow .bn-star{color:var(--yellow);margin-right:5px} #boardNow .bn-r{font-family:var(--mono);font-size:11px;color:var(--blue-lit);opacity:.85} #boardNow .bn-r b{color:var(--blue);margin-right:5px} #boardNow .bn-none{font-family:var(--mono);font-size:11px;color:#4f7a99} header h1{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.20em;color:var(--yellow); position:relative;padding:3px 11px 4px 16px;border:1px solid #0e4e78;border-left:0;border-radius:0 2px 2px 0; background:linear-gradient(#0d2c45,#071b29); box-shadow:inset 0 1px 0 rgba(150,205,255,.12), 0 1px 4px rgba(0,8,14,.5); text-shadow:0 0 10px rgba(255,214,74,.3), 0 1px 0 #041a2a} header h1::before{content:"";position:absolute;left:0;top:0;bottom:0; width:5px;background:var(--yellow);box-shadow:0 0 8px rgba(255,214,74,.45)} /* the name is not the building: it sits after it, in the blue */ header h1 .nm{color:var(--blue-lit);letter-spacing:.12em;font-weight:500;text-shadow:none} header h1 .nm::before{content:"·";color:#0e4e78;margin:0 7px} header .s{font-family:var(--mono);font-size:12.5px;color:var(--blue-dim);letter-spacing:.02em} header .s b{color:var(--blue-lit);font-weight:500} .col{display:flex;flex-direction:column;gap:var(--gap);min-height:0} #l{grid-area:l}#m{grid-area:m}#r{grid-area:r} .card{background:var(--navy-2);border:1px solid #073e5f;padding:11px;overflow-y:auto;overscroll-behavior:contain} .card h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em; color:var(--blue);border-bottom:1px solid #073e5f;padding-bottom:4px;margin-bottom:8px; border-left:2px solid var(--blue);padding-left:7px} .bar{margin-bottom:7px;font-family:var(--mono);font-size:12px} .bar .r{display:flex;justify-content:space-between;margin-bottom:2px} /* Fixedsys on labels + side names; falls back to Courier New if not installed */ .bar, .card h2, #cast, #profile .prow{font-family:"Fixedsys","Fixedsys Excelsior","Courier New",monospace} .bar .r > span:first-child{text-transform:uppercase} /* #sheet is the opener for the character sheet — styled as a plate below */ /* character sheet modal */ #charBig{position:fixed;inset:0;background:rgba(0,10,18,.93);display:none;z-index:9100; align-items:center;justify-content:center;padding:18px} #charBig.on{display:flex} #charBig .cs-inner{position:relative;width:min(94vw,560px);max-height:92vh;overflow:auto; background:var(--navy-2);border:1px solid var(--blue);padding:19px 22px 22px; box-shadow: 0 20px 54px rgba(0,0,0,.52), 0 0 34px rgba(8,112,181,.22), inset 0 0 0 7px var(--navy-2), inset 0 0 0 8px rgba(120,190,240,.16), inset 0 0 70px rgba(0,0,0,.34)} #charBig .cs-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--yellow); font-family:"Fixedsys","Courier New",monospace;font-size:13px;letter-spacing:.14em; border-bottom:1px solid var(--blue);padding-bottom:8px;margin-bottom:6px} #charBig .cs-sub{color:var(--blue-dim);font-size:9.5px} #charBig #csClose{background:none;border:1px solid #3c5a70;color:#bfe;border-radius:3px; padding:4px 12px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em} #charBig #csClose:hover{border-color:var(--yellow);color:var(--yellow)} #charBig .cs-top{display:flex;gap:14px;align-items:flex-start;margin:8px 0 4px} #charBig .cs-face{width:96px;flex:0 0 96px;border:1px solid var(--blue);background:var(--navy); box-shadow:inset 0 0 24px rgba(0,0,0,.5),0 0 0 4px var(--navy-2),0 0 0 5px rgba(120,190,240,.14)} #charBig .cs-face img,#charBig .cs-face svg{width:100%;height:auto;display:block} #charBig .cs-idlines{font-family:var(--mono);font-size:12px;color:var(--blue-dim);line-height:1.85} #charBig .cs-idlines b{color:var(--blue-lit);font-weight:500} #charBig .cs-idlines .k{color:var(--blue);letter-spacing:.1em;font-size:9px;text-transform:uppercase} #charBig .cs-sech{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--blue); margin:13px 0 8px;border-bottom:1px solid #073e5f;padding-bottom:4px} #charBig .cs-row{display:grid;grid-template-columns:96px 1fr 28px; grid-template-areas:"nm no v" "bar bar bar";gap:1px 8px;align-items:baseline;margin-bottom:9px} #charBig .cs-nm{grid-area:nm;font-family:"Fixedsys","Courier New",monospace;font-size:13px;color:var(--blue-lit)} #charBig .cs-no{grid-area:no;font-family:var(--mono);font-size:10px;color:var(--blue-dim)} #charBig .cs-v{grid-area:v;font-family:var(--mono);font-size:13px;color:var(--yellow);text-align:right} #charBig .cs-bar{grid-area:bar;height:6px;background:var(--navy);border:1px solid #0a3550;border-radius:2px;margin-top:3px} #charBig .cs-bar span{display:block;height:100%;border-radius:1px; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.30) 5px 6px), linear-gradient(180deg,#3aa6e0,var(--blue) 60%,#06588e)} /* ── Warband borrow: attributes as pip strips, skills as segmented bars, in two columns ── */ #charBig .cs-wb .cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-top:4px} @media(max-width:520px){#charBig .cs-wb .cs-cols{grid-template-columns:1fr}} #charBig .cs-col{min-width:0} #charBig .cs-attr,#charBig .cs-prof{display:grid;gap:1px 8px;margin-bottom:12px; grid-template-columns:1fr auto;grid-template-areas:"nm v" "met met" "no no";align-items:baseline} #charBig .cs-attr .cs-nm,#charBig .cs-prof .cs-nm{grid-area:nm;font-family:"Fixedsys","Courier New",monospace; font-size:13px;color:var(--blue-lit)} #charBig .cs-attr .cs-v,#charBig .cs-prof .cs-v{grid-area:v;font-family:var(--mono);color:var(--yellow);text-align:right} #charBig .cs-attr .cs-v{font-size:16px;line-height:1} #charBig .cs-prof .cs-v{font-size:13px} #charBig .cs-attr .cs-no,#charBig .cs-prof .cs-no{grid-area:no;font-family:var(--mono); font-size:10px;color:var(--blue-dim);margin-top:2px} #charBig .cs-pip{grid-area:met;display:flex;gap:3px;margin-top:4px} #charBig .cs-pip i{flex:1;height:9px;max-width:22px;border:1px solid #0a3f60;background:var(--navy);border-radius:1px} #charBig .cs-pip i.on{border-color:#0870B5;box-shadow:0 0 4px rgba(8,112,181,.35); background:linear-gradient(180deg,#3aa6e0,var(--blue) 60%,#06588e)} #charBig .cs-prof .cs-bar{grid-area:met;height:8px;margin-top:5px} #charBig .cs-roster{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px} /* proper sheet: wider, three columns with a paper-doll down the middle */ #charBig .cs-inner.cs-full{width:min(96vw,900px);max-width:96vw} #charBig .cs-idbar{display:flex;flex-wrap:wrap;gap:2px 20px;margin:6px 0 2px} #charBig .cs-grid{display:grid;grid-template-columns:1fr 236px 1fr;gap:18px;align-items:start;margin-top:6px} @media(max-width:680px){#charBig .cs-grid{grid-template-columns:1fr}#charBig .cs-doll{order:-1}} #charBig .cs-doll{position:relative;width:100%;min-width:232px;min-height:354px} #charBig .cs-figure{position:absolute;left:50%;top:0;transform:translateX(-50%);width:140px;height:350px; border:1px solid var(--blue);background:var(--navy); box-shadow:inset 0 0 24px rgba(0,0,0,.5),0 0 0 4px var(--navy-2),0 0 0 5px rgba(120,190,240,.14)} #charBig .cs-figure img,#charBig .cs-figure svg{width:100%;height:100%;object-fit:contain;display:block} /* the women are drawn in natural proportion, not the narrow build the player's silhouette uses, so their box is wider — they fill the frame the same way he does instead of floating small in the middle. slots stay where they are. */ #charBig .cs-doll-npc .cs-figure{width:206px} /* the slots sit on the body: head/chest/torso/feet down the centre, hands and tool out at the arms and waist */ #charBig .cs-slot{position:absolute;transform:translate(-50%,-50%);display:flex; flex-direction:column;align-items:center;gap:2px;z-index:2;width:46px} #charBig .cs-slot-head{left:50%;top:8%} #charBig .cs-slot-keep{left:50%;top:25%} #charBig .cs-slot-body{left:50%;top:42%} #charBig .cs-slot-feet{left:50%;top:91%} #charBig .cs-slot-hands{left:16%;top:57%} #charBig .cs-slot-tool{left:84%;top:57%} #charBig .cs-slotbox{width:46px;height:46px;border:1px solid #0a3f60;background:rgba(0,12,20,.66); display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.5)} #charBig .cs-slot.on .cs-slotbox{border-color:var(--yellow);background:rgba(0,12,20,.82); box-shadow:0 0 10px rgba(255,245,107,.3)} #charBig .cs-slotbox img{width:74%;height:74%;object-fit:contain} #charBig .cs-slotempty{color:#5f8bab;font-size:14px} #charBig .cs-slotlab{font-family:var(--mono);font-size:8px;letter-spacing:.05em;color:var(--blue-dim); text-shadow:0 1px 3px rgba(0,10,18,.9);white-space:nowrap} #charBig .cs-slotnote{position:absolute;left:50%;bottom:2%;transform:translateX(-50%); font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#3c5a70} #charBig .cs-carried{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:12px; padding-top:9px;border-top:1px solid #073e5f} #charBig .cs-carlab{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--blue)} #charBig .cs-caritem{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono); font-size:11px;color:var(--blue-lit)} #charBig .cs-caritem img{width:18px;height:18px;object-fit:contain} #charBig .cs-rost{font-family:var(--mono);font-size:11px;letter-spacing:.04em; background:transparent;border:1px solid #0a3f60;color:var(--blue-lit); padding:4px 9px;border-radius:3px;cursor:pointer} #charBig .cs-rost:hover{border-color:var(--yellow);color:var(--yellow)} #charBig .cs-rost.here{border-color:var(--yellow);color:var(--yellow);background:rgba(255,245,107,.08)} .bar .t{height:9px;background:linear-gradient(180deg,#00121e,#00243a); border:1px solid #0a3550;border-radius:2px;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)} .bar .t span{display:block;height:100%;transition:width .25s;border-radius:1px; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.24) 6px 7px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px), linear-gradient(180deg,#3aa6e0 0%, var(--blue) 55%, #06588e 100%);} .bar.low .t span{background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.24) 6px 7px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px), linear-gradient(180deg,#ffbca3 0%, var(--alarm) 55%, #e06a48 100%);}.bar.low .r{color:var(--alarm)} ul{list-style:none;font-family:var(--mono);font-size:12.5px} li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dotted #073e5f} /* the bond, as three marks rather than a number */ .pips{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle} .pips i{width:5px;height:5px;border-radius:50%;background:transparent; border:1px solid var(--blue-dim);display:block} .pips i.lit{background:var(--blue-lit);border-color:var(--blue-lit)} .pips.with i.lit{background:var(--yellow);border-color:var(--yellow)} #cast li{cursor:pointer;transition:background .12s ease,color .12s ease,padding-left .12s ease,transform .09s ease;padding-left:0;border-radius:3px;transform-origin:center left} #cast li:hover{color:var(--yellow);background:rgba(255,245,107,.06);padding-left:4px} #cast li:active{transform:scale(.985)} #cast li .rdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px; vertical-align:middle;background:#26506e} #cast li .rdot-warm{background:var(--yellow);box-shadow:0 0 5px rgba(255,245,107,.65)} #cast li .rdot-cold{background:var(--alarm)} #profile{font-family:var(--mono);font-size:12.5px} #profile .pname{font-family:var(--serif);font-size:18px;color:var(--blue-lit)} #profile .prole{color:var(--blue-dim);margin-bottom:8px} #profile .prow{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px dotted #073e5f} #profile .prow span:last-child{color:var(--blue-dim);text-align:right} #profile .khead{color:var(--blue);letter-spacing:.1em;font-size:10.5px;margin:10px 0 4px} #profile .kq{color:var(--blue);font-size:11px;margin-top:6px} #profile .ka{font-family:var(--serif);font-size:14px;color:var(--blue-lit)} #profile .unknown{color:var(--blue-dim);font-style:italic;font-family:var(--serif);font-size:14px} /* the resident's photo: a file photo in a slanted plate, same language as the door clock */ #profile .pface{position:relative;width:84px;float:right;margin:2px 2px 14px 12px;padding:4px 4px 0; background:linear-gradient(160deg,#0d2c45 0%,#061827 75%);border:1px solid #0e4e78;border-left:3px solid var(--yellow); box-shadow:0 2px 8px rgba(0,8,14,.6), inset 0 1px 0 rgba(150,205,255,.12)} #profile .pface::before,#profile .pface::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none} #profile .pface::before{right:-3px;top:-3px;border-top:2px solid var(--yellow);border-right:2px solid var(--yellow)} #profile .pface::after{right:-3px;bottom:11px;border-bottom:2px solid var(--yellow);border-right:2px solid var(--yellow)} #profile .pface svg,#profile .pface img{display:block;width:100%;height:auto;border:1px solid #0b3a57; filter:saturate(.92) contrast(1.04)} #profile .pface .ptag{display:block;font:600 7.5px/1 var(--mono);letter-spacing:.18em;color:var(--blue-lit,#b9dcf4); text-align:center;padding:3px 0 3px;opacity:.85} #back{margin-top:12px;width:100%;text-align:center;font-size:11px;padding:5px} li:last-child{border-bottom:none} li .v{color:var(--blue-dim);text-align:right} li.warm .v{color:var(--yellow)}li.cold .v{color:var(--alarm)} /* the viewport: what you are looking at, rather than what you have done */ #scene{padding:0;overflow:hidden;flex:0 0 auto;display:none} #scene.on{display:block} #sceneArt{position:relative} #sceneArt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4; box-shadow:inset 0 0 66px rgba(0,8,18,.5), inset 0 0 22px rgba(0,8,18,.3)} #sceneArt img{width:100%;height:auto;display:block} #sceneArt .priv{width:100%;display:block} body.privhide #sceneArt .priv{visibility:hidden} body.privhide .romshot{visibility:hidden} #sceneArt .priv img,#sceneArt .priv video{width:100%;height:auto;display:block} /* whoever is standing in the room, over the room. the picture underneath is lit from the ceiling, so these are dimmed slightly and given a contact shadow — otherwise they read as stickers laid on top of the photograph. */ .stwarn{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#ff8a6b; margin-left:4px} /* the peg, drawn. greyed when you cannot pay for it. */ .kr{display:flex;gap:8px;align-items:baseline;padding:3px 0;font-size:12px} .kr .kn{color:#cfe3ff;flex:1} .kr .kd{font-family:var(--mono);font-size:9px;color:#7f97b5;letter-spacing:.1em} .kr.out .kn{color:#ffb08a} .kr.out .kd::after{content:" · OUT"} .romshot{width:100%;max-width:420px;display:block;margin:0 0 10px;border:1px solid #0b3a57; border-radius:2px} .itm{width:26px;height:26px;object-fit:contain;vertical-align:middle;margin-right:8px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))} button.shut .itm{filter:grayscale(1) brightness(.6)} #sceneArt .standees{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1} /* a back room with no plate of its own borrows the room it is off, regraded */ #sceneArt img.plate{transition:filter .4s linear} #sceneArt img.plate-infirmary_morgue{filter:saturate(.3) brightness(.58) contrast(1.1) hue-rotate(-6deg)} #sceneArt img.plate-plant_crem{filter:sepia(.6) saturate(1.55) hue-rotate(-20deg) brightness(.66) contrast(1.08)} #sceneArt img.plate-plant_laundry{filter:brightness(1.08) saturate(.78) contrast(.92)} #sceneArt img.plate-records_class{filter:sepia(.2) brightness(.94) saturate(.9)} #sceneArt img.plate-sub2{filter:brightness(.56) saturate(.6) contrast(1.12)} /* whoever is standing in a regraded room is regraded with it */ #sceneArt .standees.gr-sub2{filter:brightness(.6) saturate(.75)} #sceneArt .standees.gr-infirmary_morgue{filter:brightness(.78) saturate(.6)} #sceneArt .standees.gr-plant_crem{filter:sepia(.35) saturate(1.2) brightness(.82)} #sceneArt .standees.gr-stores_back,#sceneArt .standees.gr-records_arch{filter:brightness(.82)} #sceneArt img.plate-stores_back{filter:brightness(.7) saturate(.85)} #sceneArt img.plate-records_arch{filter:brightness(.72) saturate(.7) hue-rotate(-4deg)} #sceneArt img.plate-plant_ctrl{filter:brightness(.8) saturate(.9) hue-rotate(8deg)} #sceneArt img.plate-infirmary_disp{filter:brightness(.88) saturate(.7)} #sceneArt img.plate-infirmary_nook{filter:brightness(.8) saturate(.72) contrast(1.03)} #cast li.dead{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px} #sceneArt img.plate-corridor_armory{filter:brightness(.72) saturate(.55) contrast(1.1)} #sceneArt img.plate-corridor_cell{filter:brightness(.6) saturate(.5) contrast(1.12)} #sceneArt img.plate-corridor_secwash{filter:brightness(.9) saturate(.6) hue-rotate(-12deg)} #sceneArt img.plate-infirmary_lab{filter:brightness(.82) saturate(.65) hue-rotate(10deg) contrast(1.05)} #sceneArt .st.cutoff{-webkit-box-reflect:none} #sceneArt .plateglow{position:absolute;inset:0;pointer-events:none;z-index:0} #sceneArt .plateglow.g-plant_crem{background:radial-gradient(ellipse 46% 40% at 50% 62%,rgba(255,138,60,.34),rgba(255,110,40,.10) 55%,transparent 75%); mix-blend-mode:screen;animation:emberFlick 3.4s ease-in-out infinite} #sceneArt .plateglow.g-infirmary_morgue{background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(0,20,40,.55) 100%)} #sceneArt .plateglow.g-sub2{background:radial-gradient(ellipse 60% 55% at 50% 58%,transparent 0,rgba(0,6,14,.6) 100%)} #sceneArt .plateglow.g-plant_laundry{background:linear-gradient(to top,rgba(220,235,245,.16),transparent 55%)} @keyframes emberFlick{0%,100%{opacity:.85}38%{opacity:1}52%{opacity:.7}71%{opacity:.95}} @media(prefers-reduced-motion:reduce){#sceneArt .plateglow{animation:none}} /* the spot editor (dbg.spots()) — same mono, same blue, stays out of the way */ .spoted{position:absolute;inset:0;z-index:50;cursor:crosshair} .spoted .se-hz{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,245,107,.6);pointer-events:none} .spoted .se-box{position:absolute;transform:translateX(-50%);border:1px solid #5f96bd;background:rgba(8,112,181,.16); cursor:pointer;box-sizing:border-box} .spoted .se-box.on{border-color:var(--yellow);background:rgba(255,245,107,.14)} .spoted .se-box b{position:absolute;left:2px;top:1px;font:10px var(--mono);color:var(--yellow);white-space:nowrap} .spoted .se-out{position:absolute;left:6px;right:6px;top:6px;height:34px;resize:none;background:rgba(0,26,42,.92); border:1px solid #0870B5;color:#b9dcf4;font:10px var(--mono);padding:4px;cursor:text} .spoted .se-help{position:absolute;left:6px;right:6px;bottom:6px;background:rgba(0,26,42,.92);border:1px solid #073e5f; color:#5f96bd;font:9.5px var(--mono);letter-spacing:.04em;padding:4px 6px;pointer-events:none} /* The way out, on the door in the picture. It sits in the upper band of the frame — above where anybody is standing — so it can never take a click meant for one of them. */ #sceneArt .doorhit{position:absolute;background:none;border:0;padding:0; pointer-events:auto;cursor:pointer;border-radius:2px; box-shadow:inset 0 0 0 1.5px rgba(240,196,58,0);transition:box-shadow .14s linear, background .14s linear} #sceneArt .doorhit:hover,#sceneArt .doorhit:focus-visible{ box-shadow:inset 0 0 0 1.5px rgba(240,196,58,.85), 0 0 14px rgba(240,196,58,.28); background:rgba(240,196,58,.10)} #sceneArt .doorhit:disabled{pointer-events:none} /* THE BLAST — the cloud is its own layer over the plate, so it can go on getting bigger while you are stood there watching it. The frame shakes because the ground does; everything in the room is bolted to the ground. */ .bl{position:relative;width:100%;aspect-ratio:704/396;overflow:hidden;background:#0a0f18; animation:blShake 9s cubic-bezier(.36,.07,.19,.97) forwards} .bl-win{position:absolute;left:45%;top:10%;width:32%;height:70%;overflow:hidden} .bl-land{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 34%} .bl-cloud{position:absolute;left:50%;top:14%;width:88%; transform:translate(-50%,-46%) scale(.42);transform-origin:50% 88%; animation:blGrow 9s cubic-bezier(.22,.61,.36,1) forwards} .bl-heat{position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(circle at 50% 18%, #fff 0%, #ffcf7a 26%, transparent 64%); animation:blHeat 9s ease-out forwards} .bl-frame{position:absolute;inset:0;width:100%;height:100%} @keyframes blGrow{ 0%{transform:translate(-50%,-46%) scale(.30)} 14%{transform:translate(-50%,-46%) scale(.52)} 100%{transform:translate(-50%,-52%) scale(1.35)} } @keyframes blHeat{0%{opacity:0}7%{opacity:.85}30%{opacity:.22}100%{opacity:.10}} /* the shock arrives after the light does */ @keyframes blShake{ 0%,16%{transform:translate(0,0)} 17%{transform:translate(-5px,3px)} 18.5%{transform:translate(5px,-3px)} 20%{transform:translate(-4px,-2px)} 21.5%{transform:translate(4px,2px)} 23%{transform:translate(-3px,2px)} 25%{transform:translate(2px,-1px)} 27%{transform:translate(-1px,1px)} 30%,100%{transform:translate(0,0)} } @media (prefers-reduced-motion:reduce){ .bl,.bl-cloud,.bl-heat{animation:none} .bl-cloud{transform:translate(-50%,-50%) scale(1)} } /* THE SEAL — seven drawn stages held on a timeline. Your art, so the leaf keeps its perspective the whole way across. Last two frames are the dust, then the dust settled. */ .dr{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;background:#0a0f18; animation:drShake 11s cubic-bezier(.36,.07,.19,.97) forwards} .dr .fr{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0; animation:drCut 11s steps(1,end) forwards} .dr .f0{animation-delay:0s} .dr .f1{animation-delay:2.0s} .dr .f2{animation-delay:3.6s} .dr .f3{animation-delay:4.9s} .dr .f4{animation-delay:6.0s} .dr .f5{animation-delay:6.4s} .dr .f6{animation-delay:7.8s} @keyframes drCut{0%{opacity:0}0.01%,100%{opacity:1}} @keyframes drShake{ 0%,53%{transform:translate(0,0)} 54%{transform:translate(-6px,4px)} 55.5%{transform:translate(6px,-4px)} 57%{transform:translate(-4px,-2px)} 58.5%{transform:translate(3px,2px)} 60%,69%{transform:translate(0,0)} 70%{transform:translate(-9px,5px)} 71.5%{transform:translate(8px,-5px)} 73%{transform:translate(-5px,3px)} 75%{transform:translate(4px,-2px)} 77%{transform:translate(-2px,1px)} 79%,100%{transform:translate(0,0)} } @media (prefers-reduced-motion:reduce){ .dr{animation:none} .dr .fr{animation:none;opacity:0} .dr .f6{opacity:1} } /* THE SEAL — your door, your blast, through the aperture, closing. The frame sits on top, so the leaf sliding under it hides its own seam. */ .sl{position:relative;width:100%;aspect-ratio:704/396;overflow:hidden;background:#0a0f18} .sl-out{position:absolute;left:45%;top:10%;width:32%;height:70%;object-fit:cover; object-position:50% 22%;animation:slPush 11s ease-in forwards} .sl-flash{position:absolute;left:45%;top:10%;width:32%;height:70%; background:radial-gradient(circle at 50% 26%, #fff 0%, #ffd27a 22%, transparent 62%); opacity:0;animation:slFlash 11s ease-out forwards;pointer-events:none} /* the leaf: a disc that comes across the hole from the hinge side */ .sl-leaf{position:absolute;left:45%;top:10%;width:32%;height:70%; background:radial-gradient(circle at 50% 50%, #33405a 0 62%, #1d2740 62% 100%); border:3px solid #E8B62C;border-radius:50%; transform:translateX(-104%) rotate(-40deg); animation:slShut 11s cubic-bezier(.4,0,.75,1) forwards} .sl-frame{position:absolute;inset:0;width:100%;height:100%} .sl-dark{position:absolute;inset:0;background:#000;opacity:0; animation:slDark 11s ease-in forwards;pointer-events:none} @keyframes slPush{0%{transform:scale(1)}70%{transform:scale(1.10)}100%{transform:scale(1.14)}} @keyframes slFlash{0%{opacity:0}6%{opacity:.95}26%{opacity:.30}70%{opacity:.16}100%{opacity:0}} @keyframes slShut{0%{transform:translateX(-104%) rotate(-40deg)} 58%{transform:translateX(-104%) rotate(-40deg)} 100%{transform:translateX(0) rotate(0deg)}} @keyframes slDark{0%,72%{opacity:0}100%{opacity:1}} @media (prefers-reduced-motion:reduce){ .sl-out,.sl-flash,.sl-leaf,.sl-dark{animation:none} .sl-leaf{transform:translateX(0) rotate(0)} } /* the set. the faceplate is the picture; the needle is the only thing we draw. */ #radio{padding:0;overflow:hidden;display:none} #radio.on{display:block} #radioArt{position:relative} #radioArt img{width:100%;height:auto;display:block} #radioNeedle{position:absolute;top:36%;height:12%;width:2px;background:#ff4d3d; box-shadow:0 0 6px rgba(255,77,61,.9);transform:translateX(-50%); transition:left .18s ease-out} #radioArt .rhot{position:absolute;cursor:ew-resize;touch-action:none} #radioArt .rknob{position:absolute;aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;transform:translate(-50%,-50%)} #radioArt .rknob:active{cursor:grabbing} #radioArt .rknob::after{content:"";position:absolute;left:50%;top:6%;width:3px;height:30%;margin-left:-1.5px; border-radius:2px;background:#ff4d3d;box-shadow:0 0 3px rgba(0,0,0,.6)} #radioArt .rknob:hover{box-shadow:0 0 0 2px rgba(255,213,74,.55)} #radioArt .rhot:hover{box-shadow:inset 0 0 0 1px rgba(255,213,74,.35)} .rsig{color:var(--yellow);letter-spacing:1px}.rsig i{font-style:normal;color:#2c4a6a} #radioBar{display:flex;gap:6px;align-items:center;padding:8px 10px;flex-wrap:wrap} #radioBar button{font-family:var(--mono);font-size:11px;letter-spacing:.1em; background:#11203a;border:1px solid #2a4568;color:#cfe3ff;padding:5px 12px;cursor:pointer} #radioFreq{font-family:var(--mono);font-size:12px;color:var(--yellow);letter-spacing:.12em} #radioWhat{font-family:var(--mono);font-size:10px;color:#9fb6d4;letter-spacing:.1em} #sceneArt .st{position:absolute;bottom:-1%;height:74%;width:auto; transform:translateX(var(--ax,-50%)) scaleX(var(--fx,1));transform-origin:bottom center; filter:brightness(var(--br,.86)) contrast(1.04) drop-shadow(0 0 7px rgba(0,0,0,.42)); -webkit-box-reflect:below calc(var(--pad,0px) * -2) linear-gradient(transparent 80%, rgba(0,0,0,.16)); opacity:0;animation:stIn .45s ease-out forwards, stBreathe var(--t,4.8s) ease-in-out var(--d,.6s) infinite, stWeight var(--wt,26s) ease-in-out var(--wd,3s) infinite} @keyframes stBreathe{ 0%,100%{transform:translateX(calc(var(--ax,-50%) + var(--lean,0px))) scaleX(var(--fx,1)) scale(1)} 50%{transform:translateX(calc(var(--ax,-50%) + var(--lean,0px))) scaleX(var(--fx,1)) scale(1.007)}} /* a slow, rare weight-shift on the INDEPENDENT translate property, so it composes with the breathe (which lives on transform) instead of overwriting it. Tiny and long-cycle — reads as shifting weight, not swaying. */ @keyframes stWeight{0%,100%{translate:0 0}44%,56%{translate:var(--ws,1.2%) 0}} /* a soft contact shadow pools under each figure's feet and eases as they breathe. This is what actually grounds them — the "float" was the body being lifted by a translate, now gone; the shadow does the rest. */ #sceneArt .stshadow{position:absolute;bottom:1%;width:14%;height:2.4%;z-index:0; transform:translateX(-50%);border-radius:50%;pointer-events:none; background:radial-gradient(ellipse,rgba(0,0,0,.7),rgba(0,0,0,.42) 40%,rgba(0,0,0,.14) 62%,transparent 74%); filter:blur(2px);animation:stShadow var(--t,4.8s) ease-in-out var(--d,.6s) infinite} @keyframes stShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.9} 50%{transform:translateX(-50%) scale(.93);opacity:.72}} @media(prefers-reduced-motion:reduce){#sceneArt .stshadow{animation:none}} @media(prefers-reduced-motion:reduce){ #sceneArt .st{animation:stIn .45s ease-out forwards}} /* blink frame sits exactly over the standee, breathes with it, and flicks to eyes-closed for a moment on its own clock */ #sceneArt .stblink{position:absolute;bottom:-1%;height:74%;width:auto;pointer-events:none; transform:translateX(var(--ax,-50%)) scaleX(var(--fx,1));transform-origin:bottom center;opacity:0; filter:brightness(var(--br,.86)) contrast(1.04); animation:stBreathe var(--t,4.8s) ease-in-out var(--d,.6s) infinite, stBlink var(--bt,6s) linear var(--bd,2s) infinite} #sceneArt .stblink.near{height:82%;filter:brightness(.95) contrast(1.04)} @keyframes stBlink{0%,95.9%{opacity:0}96%,98%{opacity:1}98.1%,100%{opacity:0}} @media(prefers-reduced-motion:reduce){#sceneArt .stblink{animation:none;opacity:0}} @keyframes stIn{from{opacity:0;transform:translateX(calc(var(--ax,-50%) + var(--lean,0px))) scaleX(var(--fx,1)) translateY(8px)} to{opacity:1;transform:translateX(calc(var(--ax,-50%) + var(--lean,0px))) scaleX(var(--fx,1)) translateY(0)}} /* the one being spoken to stands nearer and is not dimmed as far */ #sceneArt .st.near{height:82%; filter:brightness(1) contrast(1.05) drop-shadow(0 0 9px rgba(0,0,0,.5)); animation:stIn .45s ease-out forwards, stBreathe var(--t,4.8s) ease-in-out var(--d,.6s) infinite} @keyframes stAttend{ 0%,100%{filter:brightness(.95) contrast(1.04) drop-shadow(0 8px 12px rgba(0,0,0,.6))} 50%{filter:brightness(1.05) contrast(1.06) drop-shadow(0 8px 18px rgba(255,245,107,.24))}} @media(prefers-reduced-motion:reduce){#sceneArt .st.near{animation:stIn .45s ease-out forwards}} /* An is a rectangle. These are figures with transparent air around them, so the rectangles overlap even when the women visibly do not, and whichever one paints last takes the clicks over its neighbour's body. So the pictures never take clicks at all — a narrow hotspot over each figure does, and the hotspots cannot overlap because they are 18% wide and 32% apart. */ #sceneArt .sthit{position:absolute;bottom:0;width:18%;height:58%; transform:translateX(-50%);background:none;border:0;padding:0; pointer-events:auto;cursor:pointer} #sceneArt .sthit:disabled{pointer-events:none;cursor:default} /* a reclining prop: a posed cutout laid on furniture, positioned from the top rather than stood on the floor. its hotspot drops the floor-anchor. */ #sceneArt .stbed{position:absolute;height:auto;z-index:3;pointer-events:none; filter:drop-shadow(0 5px 9px rgba(0,0,0,.5))} #sceneArt .stbedhit{bottom:auto} #sceneArt .stsleep{position:absolute;height:auto;z-index:2;pointer-events:none} /* hovering the hotspot lights the picture it belongs to */ #sceneArt .sthit:hover + .st, #sceneArt .sthit:focus-visible + .st{ filter:brightness(1.02) contrast(1.04) drop-shadow(0 0 var(--gr,6px) var(--glow,rgba(240,196,58,.5))) drop-shadow(0 0 9px rgba(0,0,0,.5))} /* something in the picture you can reach for. it is outlined only enough to be findable, and it pulses until you touch it. */ .hot{position:absolute;background:transparent;border:2px solid rgba(255,245,107,.55); border-radius:3px;cursor:pointer;padding:0;animation:hotPulse 2.2s ease-in-out infinite} .hot:hover{border-color:var(--yellow);background:rgba(255,245,107,.10)} @keyframes hotPulse{0%,100%{border-color:rgba(255,245,107,.35)}50%{border-color:rgba(255,245,107,.8)}} /* juice — quick reactions to what just happened. Applied after render by bump(). */ @keyframes jshake{10%{transform:translateX(-3px)}20%{transform:translateX(3px)} 30%{transform:translateX(-4px)}40%{transform:translateX(4px)}50%{transform:translateX(-3px)} 60%{transform:translateX(3px)}70%{transform:translateX(-2px)}80%{transform:translateX(2px)} 90%{transform:translateX(-1px)}100%{transform:translateX(0)}} .jshake{animation:jshake .5s cubic-bezier(.36,.07,.19,.97)} @keyframes jhard{0%{transform:translate(0,0)}15%{transform:translate(-6px,2px)} 30%{transform:translate(6px,-2px)}45%{transform:translate(-7px,-1px)}60%{transform:translate(7px,1px)} 75%{transform:translate(-4px,1px)}90%{transform:translate(3px,0)}100%{transform:translate(0,0)}} .jhard{animation:jhard .62s cubic-bezier(.36,.07,.19,.97)} @keyframes jglow{0%{filter:brightness(1)}30%{filter:brightness(1.5) drop-shadow(0 0 8px rgba(255,245,107,.7))} 100%{filter:brightness(1)}} .jglow{animation:jglow .7s ease-out} @media(prefers-reduced-motion:reduce){ .jshake,.jhard,.jglow{animation:none} } @media (prefers-reduced-motion:reduce){ .hot{animation:none} } #sceneCap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--blue); padding:6px 10px;border-top:1px solid #073e5f;background:var(--navy-2)} #feed{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:2} #feedHead{cursor:pointer;user-select:none} #feed .last{font-size:13px;color:var(--blue-lit);opacity:.8;padding:2px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #feedBody{overflow-y:auto;flex:1} #feed .e p{font-size:14px} #acts-wrap{flex:0 0 auto} #sitBox{flex:0 1 auto;min-height:0} #feed .e{margin-bottom:11px} #feed .e .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--blue)} #feed .e .tag{margin-left:10px;color:var(--blue-dim)} #feed .e .tag:only-child{color:var(--alarm)} #feedHead .flags{float:right;color:var(--alarm);font-family:var(--mono);letter-spacing:.06em} #feed .e p{margin-top:1px} #feed .e.red p{color:var(--alarm)}#feed .e.amber p{color:var(--yellow)} #feed .e.good p{color:var(--yellow)} #feed .e.sit{border-left:2px solid var(--yellow);padding-left:10px} #feed .e.sit p{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; color:var(--yellow);text-transform:uppercase} #feed .e.talk p{padding-left:12px;border-left:1px solid #073e5f;color:var(--blue-lit)} button{font-family:var(--mono);font-size:12.5px;background:transparent;color:var(--yellow); border:1px solid var(--blue);padding:8px 11px;cursor:pointer;text-align:left} button:hover:not(:disabled){border-color:var(--yellow)} button:focus{outline:none} button:focus-visible{outline:2px solid var(--yellow);outline-offset:1px} .card:focus,.card:focus-within,#l:focus,#l:focus-within,ul:focus,li:focus{outline:none} .card,#l,#m,#r,ul,li{outline:none} button:disabled{opacity:.35;cursor:not-allowed} #acts{display:flex;flex-wrap:wrap;gap:7px} #acts button .cost{color:var(--blue-dim);font-size:11px;margin-left:7px} /* groups open into their own list, so they are marked differently: a heavier left edge and a chevron. they are not things you do, they are ways in. */ #acts button.shut{opacity:.5;border-left:3px solid var(--alarm)} #acts button.grp{border-left:3px solid var(--yellow);padding-right:9px; background:linear-gradient(90deg,rgba(255,245,107,.07),transparent 60%)} #acts button.grp .chev{color:var(--yellow);margin-left:8px;font-size:14px;line-height:1} #acts button.grp.back{border-left-color:var(--blue);background:none;color:var(--blue-lit)} #acts button.grp.back .chev{display:none} #probes{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} #probes button{font-size:12px;padding:6px 9px;color:var(--blue-lit);border-color:#073e5f} #probes button.cat{border-left:3px solid var(--blue);font-family:var(--mono);letter-spacing:.1em} #probes button.cat .cost{color:var(--blue-dim);font-size:10.5px;margin-left:8px;letter-spacing:0} #probes button.cat.back{border-left-color:var(--blue-dim)} #probes button.stale{opacity:.45;text-decoration:line-through} #probes button:hover{border-color:var(--blue);color:var(--yellow)} /* ---- dialogue rows read as terminal lines, not raw form buttons. Filled emphasis stays reserved for #choices; these keep their outline but gain a faint lit panel, a caret on the approaches, and the soft glow the resident file uses on hover. Scoped to the talk panels only. ---- */ #probes button, #acts button:not(.grp):not(.back){ position:relative;border-radius:2px; background:linear-gradient(180deg,rgba(8,112,181,.06),transparent 72%); transition:border-color .12s ease,background .12s ease,box-shadow .12s ease,color .12s ease} #probes button:hover, #acts button:not(.grp):not(.back):hover:not(:disabled){ background:linear-gradient(180deg,rgba(8,112,181,.15),transparent 72%); box-shadow:inset 0 0 0 1px rgba(120,190,240,.12),0 0 12px rgba(8,112,181,.16)} #probes button:active, #acts button:not(.grp):not(.back):active:not(:disabled){transform:translateY(1px)} #probes button.cat{padding-left:22px} #probes button.cat::after{content:"\203a";position:absolute;left:9px;top:50%; transform:translateY(-50%);font-family:var(--mono);font-size:12px;color:var(--blue); opacity:.5;transition:opacity .12s ease,transform .12s ease} #probes button.cat:hover::after{opacity:1;color:var(--blue-lit); transform:translateY(-50%) translateX(2px)} #probes button.cat.stale::after{opacity:.25} #probes button.cat.back{padding-left:9px} #probes button.cat.back::after{content:none} #probes .hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; color:var(--blue);width:100%;margin-bottom:-2px} #choices{display:flex;flex-direction:column;gap:7px;margin-top:14px} #choices .hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--blue)} /* the only filled elements in the interface: the choices that carry weight */ #choices button .chk{float:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; color:#0d3350;background:rgba(0,26,42,.10);border:1px solid rgba(0,26,42,.32); border-radius:2px;padding:1px 5px;margin:1px 0 0 8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} /* a pressed metal key rather than a flat rectangle: the yellow is lit from the top, the navy edge under it is the shadow the bezel casts, and a bar of the blue down the left is the same rule that heads every card. palette unchanged — yellow, navy, blue, and nothing else. */ #choices button{padding:10px 13px 10px 17px;font-family:var(--serif);font-size:15px; color:var(--navy);position:relative;border:1px solid #cdbf3e;border-radius:2px; background:linear-gradient(#fffca2 0 1px, var(--yellow) 1px 46%, #f2e653 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(140,126,26,.34), 0 1px 0 #041a2a, 0 2px 5px rgba(0,8,14,.55); text-shadow:0 1px 0 rgba(255,255,255,.22)} #choices button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:var(--blue);box-shadow:inset -1px 0 0 rgba(0,8,14,.35)} #choices button:hover{background:linear-gradient(#ffffc6 0 1px, #fffaa8 1px 46%, #f7ec72 100%); border-color:#e2d55a} #choices button:hover::before{background:#0a8ad8} #choices button:active{background:linear-gradient(#f2e653 0 55%, #fff06a 100%); box-shadow:inset 0 2px 4px rgba(120,108,22,.45), 0 0 0 2px rgba(255,245,107,.42); transform:translateY(1px)} #choices button.close{box-shadow:none;text-shadow:none;border-radius:2px} #choices button.close::before{background:#073e5f} #tools{display:flex;gap:6px;margin-top:auto;padding-top:8px} #tools button{flex:1;font-size:11px;padding:5px;text-align:center} /* press feedback — the button pulses and glows the instant you push it, so a choice feels acknowledged even though the scene turns over right after */ #choices button,#probes button,#acts button,.mrow button{ transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;} #choices button:active,#probes button:active,#acts button:active,.mrow button:active{ box-shadow:0 0 0 2px rgba(255,245,107,.42), 0 0 16px rgba(255,245,107,.3);} #choices button:active{background:#fff06a} @keyframes btnPulse{0%{transform:scale(1)}32%{transform:scale(.975)}100%{transform:scale(1)}} .bpulse{animation:btnPulse .26s ease-out} @media(prefers-reduced-motion:reduce){ #choices button,#probes button,#acts button,.mrow button{transition:none} .bpulse{animation:none}} .slotb{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 6px;margin-left:4px; background:transparent;border:1px solid #073e5f;color:var(--blue-lit)} .slotb:hover:not(:disabled){border-color:var(--yellow);color:var(--yellow)} .slotb:disabled{opacity:.35} .dim{color:var(--blue-dim);font-family:var(--serif);font-size:14px;font-style:italic} #sitBox{background:var(--navy-2);border:1px solid var(--yellow);padding:16px;display:none} #sitBox.on{display:block} #sitBox p{margin-bottom:4px;color:var(--blue-lit)} #sitBox .ex{margin-top:14px;padding-left:11px;border-left:2px solid #073e5f} #sitBox .line{display:flex;gap:9px;align-items:flex-start;margin-top:3px} #sitBox .said{flex:1;min-width:0} #sitBox .said p{margin:0} #sitBox .ex.say{margin:10px 0 10px;border-left-color:var(--blue)} #sitBox .ex.say + p{margin-top:10px} #sitBody .beat{font-style:italic;opacity:.72} .v69ask{position:fixed;inset:0;z-index:9700;background:rgba(0,10,18,.72);display:flex;align-items:center;justify-content:center} .v69ask-card{max-width:420px;width:calc(100% - 32px);background:var(--navy-2);border:1px solid var(--yellow);padding:18px 18px 14px; box-shadow:0 12px 40px rgba(0,0,0,.6)} .v69ask-card b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--yellow);margin-bottom:8px} .v69ask-card p{margin:0 0 14px;color:var(--blue-lit);font-family:var(--serif);font-size:15px;line-height:1.45} .v69ask-row{display:flex;gap:8px;justify-content:flex-end} .v69ask-row button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:7px 12px;cursor:pointer; background:transparent;border:1px solid #073e5f;color:var(--blue-lit)} .v69ask-row button.yes{background:var(--yellow);border-color:var(--yellow);color:#001A2A} .v69ask-row button:hover{border-color:var(--yellow)} /* narration: the game's own beat style, palette blue */ /* window moods — the scene box reacts to what is happening in it */ #sitBox{transition:border-color .6s ease, box-shadow .6s ease, filter .8s ease} #sitBox.mood-chaos{border-color:#ffb347;animation:mChaos .38s linear 3, mGlowA 2.4s ease-in-out 1.2s infinite} #sitBox.mood-shock{animation:mShock 1.1s ease-out 1} #sitBox.mood-fury{border-color:#ff5a4a;animation:mShake .5s cubic-bezier(.36,.07,.19,.97) 1, mGlowR 1.8s ease-in-out .5s infinite} #sitBox.mood-tense{border-color:#ffd166;animation:mBeat 1.5s ease-in-out infinite} #sitBox.mood-grief{border-color:#3d6f99;animation:mSink 1.6s ease-out 1} #sitBox.mood-grief img,#sitBox.mood-grief svg{filter:saturate(.55) brightness(.92)} #sitBox.mood-dread{border-color:#556b7d;animation:mFlicker 1.8s steps(1,end) 1} #sitBox.mood-dread img,#sitBox.mood-dread svg{filter:brightness(.85)} #sitBox.mood-tender{border-color:#f4c98a;box-shadow:0 0 22px rgba(244,201,138,.22) inset, 0 0 14px rgba(244,201,138,.18);animation:mWarm 1.4s ease-out 1} #sitBox.mood-numb{border-color:#4a5a66} #sitBox.mood-numb img,#sitBox.mood-numb svg{filter:saturate(.25) brightness(.9)} @keyframes mChaos{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,2px)}} @keyframes mShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(6px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}} @keyframes mShock{0%{filter:brightness(2.6) contrast(1.3);transform:scale(1.012)}18%{filter:brightness(1.6)}100%{filter:none;transform:scale(1)}} @keyframes mGlowR{0%,100%{box-shadow:0 0 0 rgba(255,90,74,0)}50%{box-shadow:0 0 22px rgba(255,90,74,.35), 0 0 30px rgba(255,90,74,.12) inset}} @keyframes mGlowA{0%,100%{box-shadow:0 0 0 rgba(255,179,71,0)}50%{box-shadow:0 0 16px rgba(255,179,71,.28)}} @keyframes mBeat{0%,100%{box-shadow:0 0 0 rgba(255,209,102,0)}12%{box-shadow:0 0 14px rgba(255,209,102,.30)}24%{box-shadow:0 0 2px rgba(255,209,102,.05)}36%{box-shadow:0 0 10px rgba(255,209,102,.22)}} @keyframes mSink{0%{opacity:.35;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}} @keyframes mFlicker{0%{opacity:1}8%{opacity:.72}11%{opacity:1}30%{opacity:.86}33%{opacity:1}} /* a lamp going, not the box failing */ @keyframes mWarm{0%{box-shadow:0 0 0 rgba(244,201,138,0)}100%{box-shadow:0 0 22px rgba(244,201,138,.22) inset, 0 0 14px rgba(244,201,138,.18)}} @media(prefers-reduced-motion:reduce){#sitBox[class*="mood-"]{animation:none!important;transform:none!important}} #sitBody .sp{font-style:normal} .said .beat,.out .beat,#feedBody .beat{font-style:italic;opacity:.72} .said .sp,.out .sp,#feedBody .sp{font-style:normal} .avwrap{flex:0 0 48px;width:48px;display:flex;flex-direction:column;align-items:center;gap:3px} .av{display:block;width:48px} .av img,.av svg{width:48px;height:48px;display:block;border:1px solid #073e5f;object-fit:cover} .avn{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--blue); text-align:center;line-height:1.1;word-break:break-word} /* the subject already has a portrait above; her lines take the name alone */ .avwrap.name-only{flex:0 0 48px;width:48px;padding-top:2px;border-right:1px solid #073e5f} #sitBox .ex.chosen .avn{color:var(--yellow)} #sitBox .ex.chosen .av img,#sitBox .ex.chosen .av svg{border-color:var(--yellow)} #portrait .second{margin-top:8px} #portrait .second img,#portrait .second svg{width:100%;height:auto;display:block;opacity:.85} #sitBox .ex.chosen{border-left-color:var(--yellow)} #sitBox .out{margin-top:9px;font-size:15px;color:var(--blue-lit)} #sitBox .out.red{color:var(--alarm)} #sitBox .out.good{color:var(--yellow)} #sitBox .out.amber{color:var(--yellow)} #sitBox .out.blue{color:#7fb2d9} #sitBox .out .otag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; color:var(--blue-dim);margin-left:8px} #choices button.close{background:transparent;color:var(--blue-lit);border-color:#073e5f} #choices button.close:hover{border-color:var(--yellow);color:var(--yellow)} #sitBox .ex .q{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; color:var(--blue);margin-bottom:2px} #sitBox .ex p{margin:0;color:var(--blue-lit)} #sitTop{display:flex;gap:14px;align-items:flex-start} #sitBody{flex:1;min-width:0} /* the speaker, in a frame. the same riveted plate the boards are made of, so a face in the middle column looks like it was screwed to the wall rather than pasted in. the faces are square, so the overlay can be square with them. */ #portrait{width:96px;flex:0 0 96px;position:relative} #portrait svg,#portrait img{width:100%;height:auto;display:block; border:1px solid #0e4e78;background:#0a1626; box-shadow:inset 0 0 0 2px #041a2a, inset 0 -13px 18px rgba(0,0,0,.30), 0 2px 7px rgba(0,0,0,.55)} /* four rivets and a soft sheen, laid over the picture and nothing else */ #portrait::after{content:"";position:absolute;left:0;top:0;width:100%;aspect-ratio:1; pointer-events:none;border-radius:1px; background: radial-gradient(circle at 7px 7px, #7fb4d8 0 1.1px, #06263c 1.1px 2.4px, transparent 2.6px), radial-gradient(circle at calc(100% - 7px) 7px, #7fb4d8 0 1.1px, #06263c 1.1px 2.4px, transparent 2.6px), radial-gradient(circle at 7px calc(100% - 7px), #7fb4d8 0 1.1px, #06263c 1.1px 2.4px, transparent 2.6px), radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #7fb4d8 0 1.1px, #06263c 1.1px 2.4px, transparent 2.6px), linear-gradient(112deg, rgba(190,225,255,.055) 0 11%, transparent 30%)} /* the name on a strip under it, the way everything down here is labelled */ #portrait .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; color:#bfe3ff;text-align:center;margin-top:0;padding:3px 2px 2.5px; background:linear-gradient(#0d2c45,#08202f); border:1px solid #0e4e78;border-top:0; text-shadow:0 1px 0 #041a2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #portrait .second{margin-top:9px;position:relative} #portrait .second::after{content:"";position:absolute;left:0;top:0;width:100%;aspect-ratio:1; pointer-events:none;background: radial-gradient(circle at 6px 6px, #7fb4d8 0 1px, #06263c 1px 2.1px, transparent 2.3px), radial-gradient(circle at calc(100% - 6px) 6px, #7fb4d8 0 1px, #06263c 1px 2.1px, transparent 2.3px)} @media(max-width:620px){#sitTop{flex-direction:column}#portrait{flex:0 0 auto;width:76px}} /* ========================================================================== THE DOOR, OPEN The frame has its aperture cut out, so whatever is behind it shows through. Which world that is depends only on how long the door stayed shut. ========================================================================== */ #ending{position:fixed;inset:0;z-index:60;display:none;background:#02060a; flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:16px} #ending.on{display:flex} #endStage{position:relative;width:min(920px,94vw);aspect-ratio:676/369;overflow:hidden; background:#000;box-shadow:0 24px 70px rgba(0,0,0,.7)} #endStage img{position:absolute;display:block} .ed-out{left:45%;top:10%;width:32%;height:70%;object-fit:cover;object-position:50% 22%; animation:edPush 9s ease-out 1 both} .ed-door{inset:0;width:100%;height:100%} .ed-glare{position:absolute;left:45%;top:10%;width:32%;height:70%;pointer-events:none; background:radial-gradient(60% 50% at 50% 45%, rgba(255,240,210,.5), rgba(255,240,210,0) 70%); animation:edGlare 9s ease-out 1 both} @keyframes edPush{0%{transform:scale(1.12)}100%{transform:scale(1)}} @keyframes edGlare{0%{opacity:1}22%{opacity:.35}100%{opacity:.18}} #endText{width:min(920px,94vw);font-family:var(--serif);font-size:17px;line-height:1.55; color:#cfe0ee;border-left:2px solid var(--alarm);padding-left:14px} #endText b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em; color:var(--alarm);margin-bottom:6px} #endBack{background:transparent;border:1px solid #2c4a63;color:#cfe0ee;font-family:var(--mono); font-size:11px;letter-spacing:.18em;padding:8px 16px} #endBack:hover{border-color:var(--yellow);color:var(--yellow)} @media (prefers-reduced-motion:reduce){ .ed-out,.ed-glare{animation:none} } /* ========================================================================== THE FRONT DOOR Two exposures of the same desk: one with the lamp off, one with it on. The lit one sits on top and its opacity is what flickers, so the lamp is a light rather than a picture of a light. The screen is a box positioned on the glass in percentages of the picture, so it tracks the art at any size. ========================================================================== */ #menu{position:fixed;inset:0;z-index:40;display:none; /* the wall, as one picture (art/wall.jpg is these same gradients, drawn once). Repainting three full-screen gradients under the candles every frame held the menu and the notice to a crawl. */ background:#02060a url("../../art/wall.jpg") center/cover no-repeat; align-items:center;justify-content:center;overflow:hidden} #menu.on{display:flex} /* the walls either side of the painting char slowly from the top down, a ragged ember line creeping ahead of the black. The painting sits above it on its own layer and is never touched. Starts over each time the menu opens. */ #menu .desk{z-index:2} #menu .burn{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;overflow:hidden; width:calc((100vw - min(100vw, 150vh)) / 2 + 40px)} #menu .burn.l{left:0} #menu .burn.r{right:0} #menu .burn i{position:absolute;left:-2px;right:-2px;top:0;height:112%; background:var(--char) center/100% 100% no-repeat; transform:translateY(-100%);animation:burnDown var(--bd,220s) cubic-bezier(.35,.1,.6,1) var(--bdl,2s) forwards} #menu .burn.l i{--char:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 112%22 preserveAspectRatio=%22none%22%3E %3Cdefs%3E %3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%22.84%22 stop-color=%22%23212220%22 stop-opacity=%22.85%22/%3E%3Cstop offset=%221%22 stop-color=%22%2333332f%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E %3Cfilter id=%22t%22 x=%220%22 y=%220%22 width=%221%22 height=%221%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.45 1.9%22 numOctaves=%224%22 seed=%227%22/%3E%3CfeColorMatrix values=%220 0 0 0 .055 0 0 0 0 .055 0 0 0 0 .058 0 0 0 1.1 -.45%22/%3E%3CfeComposite in2=%22SourceGraphic%22 operator=%22in%22/%3E%3C/filter%3E %3Cfilter id=%22g%22 x=%22-10%25%22 y=%22-10%25%22 width=%22120%25%22 height=%22120%25%22%3E%3CfeGaussianBlur stdDeviation=%22.8 .3%22/%3E%3C/filter%3E %3C/defs%3E %3Cpath d=%22M0,0 H100 V108.46 L100.0,102.25 L99.4,105.27 L98.0,102.15 L96.6,102.09 L95.2,102.00 L93.8,105.28 L92.4,102.21 L91.0,105.65 L89.6,105.58 L88.2,105.83 L86.8,105.90 L85.4,106.00 L84.0,106.48 L82.6,106.85 L81.2,107.06 L79.8,106.75 L78.4,106.68 L77.0,106.12 L75.6,105.88 L74.2,105.66 L72.8,105.27 L71.4,105.40 L70.0,102.02 L68.6,101.99 L67.2,101.50 L65.8,101.20 L64.4,101.77 L63.0,101.83 L61.6,105.59 L60.2,106.16 L58.8,106.33 L57.4,106.55 L56.0,106.52 L54.6,106.94 L53.2,107.31 L51.8,107.45 L50.4,107.83 L49.0,107.97 L47.6,107.64 L46.2,107.32 L44.8,107.06 L43.4,106.55 L42.0,106.38 L40.6,106.39 L39.2,106.59 L37.8,106.29 L36.4,106.06 L35.0,105.60 L33.6,102.07 L32.2,105.25 L30.8,102.02 L29.4,102.00 L28.0,101.97 L26.6,101.83 L25.2,101.77 L23.8,101.03 L22.4,101.35 L21.0,101.16 L19.6,101.55 L18.2,102.09 L16.8,102.22 L15.4,102.19 L14.0,105.27 L12.6,105.84 L11.2,106.05 L9.8,106.46 L8.4,107.07 L7.0,107.74 L5.6,107.76 L4.2,107.94 L2.8,107.49 L1.4,107.41 L0.0,107.34 Z%22 fill=%22url%28%23s%29%22 opacity=%22.5%22/%3E %3Cpath d=%22M0,0 H100 V100.46 L100.0,100.23 L99.4,100.23 L98.0,100.03 L96.6,99.83 L95.2,99.58 L93.8,99.66 L92.4,99.35 L91.0,99.56 L89.6,99.26 L88.2,99.30 L86.8,99.19 L85.4,99.16 L84.0,99.53 L82.6,99.85 L81.2,100.07 L79.8,99.82 L78.4,99.87 L77.0,99.45 L75.6,99.41 L74.2,99.41 L72.8,99.25 L71.4,99.60 L70.0,99.44 L68.6,99.62 L67.2,99.29 L65.8,99.12 L64.4,99.75 L63.0,99.83 L61.6,100.55 L60.2,101.03 L58.8,101.07 L57.4,101.10 L56.0,100.87 L54.6,101.07 L53.2,101.21 L51.8,101.12 L50.4,101.29 L49.0,101.25 L47.6,100.78 L46.2,100.37 L44.8,100.06 L43.4,99.56 L42.0,99.47 L40.6,99.59 L39.2,99.94 L37.8,99.84 L36.4,99.82 L35.0,99.59 L33.6,99.30 L32.2,99.69 L30.8,99.66 L29.4,99.80 L28.0,99.89 L26.6,99.81 L25.2,99.77 L23.8,99.00 L22.4,99.22 L21.0,98.89 L19.6,99.10 L18.2,99.44 L16.8,99.34 L15.4,99.07 L14.0,98.92 L12.6,99.28 L11.2,99.31 L9.8,99.59 L8.4,100.11 L7.0,100.74 L5.6,100.78 L4.2,101.03 L2.8,100.69 L1.4,100.77 L0.0,100.90 Z%22 fill=%22%230a0a09%22 fill-opacity=%22.84%22/%3E %3Cpath d=%22M0,0 H100 V100.46 L100.0,100.23 L99.4,100.23 L98.0,100.03 L96.6,99.83 L95.2,99.58 L93.8,99.66 L92.4,99.35 L91.0,99.56 L89.6,99.26 L88.2,99.30 L86.8,99.19 L85.4,99.16 L84.0,99.53 L82.6,99.85 L81.2,100.07 L79.8,99.82 L78.4,99.87 L77.0,99.45 L75.6,99.41 L74.2,99.41 L72.8,99.25 L71.4,99.60 L70.0,99.44 L68.6,99.62 L67.2,99.29 L65.8,99.12 L64.4,99.75 L63.0,99.83 L61.6,100.55 L60.2,101.03 L58.8,101.07 L57.4,101.10 L56.0,100.87 L54.6,101.07 L53.2,101.21 L51.8,101.12 L50.4,101.29 L49.0,101.25 L47.6,100.78 L46.2,100.37 L44.8,100.06 L43.4,99.56 L42.0,99.47 L40.6,99.59 L39.2,99.94 L37.8,99.84 L36.4,99.82 L35.0,99.59 L33.6,99.30 L32.2,99.69 L30.8,99.66 L29.4,99.80 L28.0,99.89 L26.6,99.81 L25.2,99.77 L23.8,99.00 L22.4,99.22 L21.0,98.89 L19.6,99.10 L18.2,99.44 L16.8,99.34 L15.4,99.07 L14.0,98.92 L12.6,99.28 L11.2,99.31 L9.8,99.59 L8.4,100.11 L7.0,100.74 L5.6,100.78 L4.2,101.03 L2.8,100.69 L1.4,100.77 L0.0,100.90 Z%22 fill=%22%23000%22 filter=%22url%28%23t%29%22 opacity=%22.45%22/%3E %3Cpolyline points=%220.0,100.90 1.4,100.77 2.8,100.69 4.2,101.03 5.6,100.78 7.0,100.74 8.4,100.11 9.8,99.59 11.2,99.31 12.6,99.28 14.0,98.92 15.4,99.07 16.8,99.34 18.2,99.44 19.6,99.10 21.0,98.89 22.4,99.22 23.8,99.00 25.2,99.77 26.6,99.81 28.0,99.89 29.4,99.80 30.8,99.66 32.2,99.69 33.6,99.30 35.0,99.59 36.4,99.82 37.8,99.84 39.2,99.94 40.6,99.59 42.0,99.47 43.4,99.56 44.8,100.06 46.2,100.37 47.6,100.78 49.0,101.25 50.4,101.29 51.8,101.12 53.2,101.21 54.6,101.07 56.0,100.87 57.4,101.10 58.8,101.07 60.2,101.03 61.6,100.55 63.0,99.83 64.4,99.75 65.8,99.12 67.2,99.29 68.6,99.62 70.0,99.44 71.4,99.60 72.8,99.25 74.2,99.41 75.6,99.41 77.0,99.45 78.4,99.87 79.8,99.82 81.2,100.07 82.6,99.85 84.0,99.53 85.4,99.16 86.8,99.19 88.2,99.30 89.6,99.26 91.0,99.56 92.4,99.35 93.8,99.66 95.2,99.58 96.6,99.83 98.0,100.03 99.4,100.23 100.0,100.23%22 fill=%22none%22 stroke=%22%23ff5a14%22 stroke-width=%223%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22 filter=%22url%28%23g%29%22 opacity=%22.4%22%3E%3Canimate attributeName=%22opacity%22 values=%22.3%3B.48%3B.34%3B.44%3B.28%3B.4%3B.3%22 dur=%227s%22 repeatCount=%22indefinite%22/%3E%3C/polyline%3E %3Cpolyline points=%220.0,100.90 1.4,100.77 2.8,100.69 4.2,101.03 5.6,100.78 7.0,100.74 8.4,100.11 9.8,99.59 11.2,99.31 12.6,99.28 14.0,98.92 15.4,99.07 16.8,99.34 18.2,99.44 19.6,99.10 21.0,98.89 22.4,99.22 23.8,99.00 25.2,99.77 26.6,99.81 28.0,99.89 29.4,99.80 30.8,99.66 32.2,99.69 33.6,99.30 35.0,99.59 36.4,99.82 37.8,99.84 39.2,99.94 40.6,99.59 42.0,99.47 43.4,99.56 44.8,100.06 46.2,100.37 47.6,100.78 49.0,101.25 50.4,101.29 51.8,101.12 53.2,101.21 54.6,101.07 56.0,100.87 57.4,101.10 58.8,101.07 60.2,101.03 61.6,100.55 63.0,99.83 64.4,99.75 65.8,99.12 67.2,99.29 68.6,99.62 70.0,99.44 71.4,99.60 72.8,99.25 74.2,99.41 75.6,99.41 77.0,99.45 78.4,99.87 79.8,99.82 81.2,100.07 82.6,99.85 84.0,99.53 85.4,99.16 86.8,99.19 88.2,99.30 89.6,99.26 91.0,99.56 92.4,99.35 93.8,99.66 95.2,99.58 96.6,99.83 98.0,100.03 99.4,100.23 100.0,100.23%22 fill=%22none%22 stroke=%22%23ffb060%22 stroke-width=%22.9%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22 opacity=%22.45%22%3E%3Canimate attributeName=%22opacity%22 values=%22.3%3B.55%3B.36%3B.5%3B.3%22 dur=%225.3s%22 repeatCount=%22indefinite%22/%3E%3C/polyline%3E %3C/svg%3E")} #menu .burn.r i{--char:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 112%22 preserveAspectRatio=%22none%22%3E %3Cdefs%3E %3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%22.84%22 stop-color=%22%23212220%22 stop-opacity=%22.85%22/%3E%3Cstop offset=%221%22 stop-color=%22%2333332f%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E %3Cfilter id=%22t%22 x=%220%22 y=%220%22 width=%221%22 height=%221%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.45 1.9%22 numOctaves=%224%22 seed=%2223%22/%3E%3CfeColorMatrix values=%220 0 0 0 .055 0 0 0 0 .055 0 0 0 0 .058 0 0 0 1.1 -.45%22/%3E%3CfeComposite in2=%22SourceGraphic%22 operator=%22in%22/%3E%3C/filter%3E %3Cfilter id=%22g%22 x=%22-10%25%22 y=%22-10%25%22 width=%22120%25%22 height=%22120%25%22%3E%3CfeGaussianBlur stdDeviation=%22.8 .3%22/%3E%3C/filter%3E %3C/defs%3E %3Cpath d=%22M0,0 H100 V106.66 L100.0,101.34 L99.4,101.35 L98.0,101.06 L96.6,101.25 L95.2,101.34 L93.8,101.87 L92.4,105.41 L91.0,106.22 L89.6,106.48 L88.2,107.10 L86.8,107.12 L85.4,107.67 L84.0,107.37 L82.6,107.94 L81.2,107.97 L79.8,108.22 L78.4,107.89 L77.0,107.34 L75.6,107.10 L74.2,106.53 L72.8,106.22 L71.4,105.77 L70.0,105.87 L68.6,106.02 L67.2,106.02 L65.8,105.53 L64.4,105.25 L63.0,102.15 L61.6,102.17 L60.2,105.63 L58.8,105.75 L57.4,105.72 L56.0,105.51 L54.6,105.31 L53.2,102.06 L51.8,102.01 L50.4,105.43 L49.0,105.44 L47.6,105.63 L46.2,105.77 L44.8,105.97 L43.4,105.77 L42.0,105.80 L40.6,105.97 L39.2,106.13 L37.8,106.25 L36.4,106.55 L35.0,106.67 L33.6,106.35 L32.2,105.89 L30.8,105.80 L29.4,105.48 L28.0,105.82 L26.6,105.72 L25.2,105.74 L23.8,105.58 L22.4,105.49 L21.0,102.04 L19.6,105.34 L18.2,105.93 L16.8,106.38 L15.4,106.88 L14.0,107.41 L12.6,107.25 L11.2,107.22 L9.8,107.43 L8.4,107.38 L7.0,107.60 L5.6,107.54 L4.2,107.37 L2.8,107.15 L1.4,106.45 L0.0,105.84 Z%22 fill=%22url%28%23s%29%22 opacity=%22.5%22/%3E %3Cpath d=%22M0,0 H100 V98.66 L100.0,99.33 L99.4,99.33 L98.0,98.97 L96.6,99.04 L95.2,98.97 L93.8,99.31 L92.4,99.62 L91.0,100.20 L89.6,100.23 L88.2,100.64 L86.8,100.47 L85.4,100.86 L84.0,100.44 L82.6,100.95 L81.2,100.97 L79.8,101.27 L78.4,101.03 L77.0,100.63 L75.6,100.57 L74.2,100.20 L72.8,100.13 L71.4,99.91 L70.0,100.23 L68.6,100.59 L67.2,100.76 L65.8,100.41 L64.4,100.22 L63.0,100.15 L61.6,100.16 L60.2,100.54 L58.8,100.53 L57.4,100.34 L56.0,99.93 L54.6,99.50 L53.2,99.03 L51.8,98.75 L50.4,98.95 L49.0,98.78 L47.6,98.81 L46.2,98.84 L44.8,98.98 L43.4,98.77 L42.0,98.84 L40.6,99.13 L39.2,99.43 L37.8,99.73 L36.4,100.25 L35.0,100.59 L33.6,100.52 L32.2,100.28 L30.8,100.38 L29.4,100.23 L28.0,100.70 L26.6,100.69 L25.2,100.74 L23.8,100.55 L22.4,100.39 L21.0,99.81 L19.6,99.94 L18.2,100.34 L16.8,100.56 L15.4,100.84 L14.0,101.12 L12.6,100.75 L11.2,100.55 L9.8,100.60 L8.4,100.44 L7.0,100.62 L5.6,100.55 L4.2,100.42 L2.8,100.31 L1.4,99.76 L0.0,99.33 Z%22 fill=%22%230a0a09%22 fill-opacity=%22.84%22/%3E %3Cpath d=%22M0,0 H100 V98.66 L100.0,99.33 L99.4,99.33 L98.0,98.97 L96.6,99.04 L95.2,98.97 L93.8,99.31 L92.4,99.62 L91.0,100.20 L89.6,100.23 L88.2,100.64 L86.8,100.47 L85.4,100.86 L84.0,100.44 L82.6,100.95 L81.2,100.97 L79.8,101.27 L78.4,101.03 L77.0,100.63 L75.6,100.57 L74.2,100.20 L72.8,100.13 L71.4,99.91 L70.0,100.23 L68.6,100.59 L67.2,100.76 L65.8,100.41 L64.4,100.22 L63.0,100.15 L61.6,100.16 L60.2,100.54 L58.8,100.53 L57.4,100.34 L56.0,99.93 L54.6,99.50 L53.2,99.03 L51.8,98.75 L50.4,98.95 L49.0,98.78 L47.6,98.81 L46.2,98.84 L44.8,98.98 L43.4,98.77 L42.0,98.84 L40.6,99.13 L39.2,99.43 L37.8,99.73 L36.4,100.25 L35.0,100.59 L33.6,100.52 L32.2,100.28 L30.8,100.38 L29.4,100.23 L28.0,100.70 L26.6,100.69 L25.2,100.74 L23.8,100.55 L22.4,100.39 L21.0,99.81 L19.6,99.94 L18.2,100.34 L16.8,100.56 L15.4,100.84 L14.0,101.12 L12.6,100.75 L11.2,100.55 L9.8,100.60 L8.4,100.44 L7.0,100.62 L5.6,100.55 L4.2,100.42 L2.8,100.31 L1.4,99.76 L0.0,99.33 Z%22 fill=%22%23000%22 filter=%22url%28%23t%29%22 opacity=%22.45%22/%3E %3Cpolyline points=%220.0,99.33 1.4,99.76 2.8,100.31 4.2,100.42 5.6,100.55 7.0,100.62 8.4,100.44 9.8,100.60 11.2,100.55 12.6,100.75 14.0,101.12 15.4,100.84 16.8,100.56 18.2,100.34 19.6,99.94 21.0,99.81 22.4,100.39 23.8,100.55 25.2,100.74 26.6,100.69 28.0,100.70 29.4,100.23 30.8,100.38 32.2,100.28 33.6,100.52 35.0,100.59 36.4,100.25 37.8,99.73 39.2,99.43 40.6,99.13 42.0,98.84 43.4,98.77 44.8,98.98 46.2,98.84 47.6,98.81 49.0,98.78 50.4,98.95 51.8,98.75 53.2,99.03 54.6,99.50 56.0,99.93 57.4,100.34 58.8,100.53 60.2,100.54 61.6,100.16 63.0,100.15 64.4,100.22 65.8,100.41 67.2,100.76 68.6,100.59 70.0,100.23 71.4,99.91 72.8,100.13 74.2,100.20 75.6,100.57 77.0,100.63 78.4,101.03 79.8,101.27 81.2,100.97 82.6,100.95 84.0,100.44 85.4,100.86 86.8,100.47 88.2,100.64 89.6,100.23 91.0,100.20 92.4,99.62 93.8,99.31 95.2,98.97 96.6,99.04 98.0,98.97 99.4,99.33 100.0,99.33%22 fill=%22none%22 stroke=%22%23ff5a14%22 stroke-width=%223%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22 filter=%22url%28%23g%29%22 opacity=%22.4%22%3E%3Canimate attributeName=%22opacity%22 values=%22.3%3B.48%3B.34%3B.44%3B.28%3B.4%3B.3%22 dur=%227s%22 repeatCount=%22indefinite%22/%3E%3C/polyline%3E %3Cpolyline points=%220.0,99.33 1.4,99.76 2.8,100.31 4.2,100.42 5.6,100.55 7.0,100.62 8.4,100.44 9.8,100.60 11.2,100.55 12.6,100.75 14.0,101.12 15.4,100.84 16.8,100.56 18.2,100.34 19.6,99.94 21.0,99.81 22.4,100.39 23.8,100.55 25.2,100.74 26.6,100.69 28.0,100.70 29.4,100.23 30.8,100.38 32.2,100.28 33.6,100.52 35.0,100.59 36.4,100.25 37.8,99.73 39.2,99.43 40.6,99.13 42.0,98.84 43.4,98.77 44.8,98.98 46.2,98.84 47.6,98.81 49.0,98.78 50.4,98.95 51.8,98.75 53.2,99.03 54.6,99.50 56.0,99.93 57.4,100.34 58.8,100.53 60.2,100.54 61.6,100.16 63.0,100.15 64.4,100.22 65.8,100.41 67.2,100.76 68.6,100.59 70.0,100.23 71.4,99.91 72.8,100.13 74.2,100.20 75.6,100.57 77.0,100.63 78.4,101.03 79.8,101.27 81.2,100.97 82.6,100.95 84.0,100.44 85.4,100.86 86.8,100.47 88.2,100.64 89.6,100.23 91.0,100.20 92.4,99.62 93.8,99.31 95.2,98.97 96.6,99.04 98.0,98.97 99.4,99.33 100.0,99.33%22 fill=%22none%22 stroke=%22%23ffb060%22 stroke-width=%22.9%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22 opacity=%22.45%22%3E%3Canimate attributeName=%22opacity%22 values=%22.3%3B.55%3B.36%3B.5%3B.3%22 dur=%225.3s%22 repeatCount=%22indefinite%22/%3E%3C/polyline%3E %3C/svg%3E");--bd:280s;--bdl:9s} @keyframes burnDown{to{transform:translateY(-20%)}} @media(prefers-reduced-motion:reduce){#menu .burn i{animation:none;transform:translateY(-55%)}} #menu .desk{box-shadow:0 0 90px 24px rgba(0,0,0,.6)} /* starting a run: zoom into the screen and let it flicker out to black */ #menu.booting{pointer-events:none} #menu.booting .desk{animation:bootZoom .85s cubic-bezier(.6,0,.9,1) forwards;transform-origin:40% 34%} @keyframes bootZoom{ 0%{transform:scale(1);filter:none} 55%{transform:scale(1.7);filter:brightness(1.12)} 70%{transform:scale(1.95);filter:brightness(1.7) contrast(1.2)} 72%{filter:brightness(.35)} 74%{filter:brightness(1.9)} 100%{transform:scale(2.7);filter:brightness(0)}} #menu.booting::after{content:"";position:absolute;inset:0;z-index:60;pointer-events:none;mix-blend-mode:screen; background:repeating-linear-gradient(0deg, rgba(0,255,120,.05) 0 2px, transparent 2px 4px); animation:bootFlick .85s steps(2,end) forwards} @keyframes bootFlick{ 0%,50%{opacity:0}55%{opacity:.5}60%{opacity:.1}66%{opacity:.75}72%{opacity:.15} 80%{opacity:.9}100%{opacity:1;background:#000}} @media(prefers-reduced-motion:reduce){ #menu.booting .desk{animation:none}#menu.booting::after{animation:none;opacity:0}} /* candles flanking the frame: most of the brass stand sits below the viewport, only the candle and its flame show at the bottom corners. The flame is a separate layer so it can dance on its own. */ #menu .candle, #notice .candle{position:absolute;bottom:0;z-index:44;pointer-events:none; width:clamp(140px,19vh,225px);transform:translateY(46%)} #menu .candle.left, #notice .candle.left{left:1.2vw} #menu .candle.right, #notice .candle.right{right:1.2vw;transform:translateY(46%) scaleX(-1)} #menu .candle .cbody, #notice .candle .cbody{width:100%;display:block;filter:drop-shadow(0 3px 9px rgba(0,0,0,.55))} /* the flame shares the body's canvas, so it lands on the wick automatically — it just pivots there. No hand-positioning left to drift out of place. */ #menu .candle .cflame, #notice .candle .cflame{position:absolute;top:0;left:0;width:100%;height:auto;transform-origin:39% 31.7%; filter:drop-shadow(0 0 7px rgba(255,165,55,.6)) drop-shadow(0 0 20px rgba(255,120,25,.4)); animation:flameDance 1.7s ease-in-out infinite} #menu .candle.right .cflame, #notice .candle.right .cflame{animation-delay:-.9s} @keyframes flameDance{ 0%,100%{transform:scale(1,1) rotate(-1deg)} 25%{transform:scale(1.045,1.09) rotate(1.5deg)} 50%{transform:scale(.985,.95) rotate(-1.5deg)} 75%{transform:scale(1.03,1.06) rotate(2.2deg)}} @media(prefers-reduced-motion:reduce){#menu .candle .cflame{animation:none;transform:none}} /* words rising as smoke off each flame — faint, slow, easy to ignore */ #menu .smoke{position:absolute;z-index:45;pointer-events:none;font-family:var(--mono); font-size:11px;letter-spacing:.06em;white-space:nowrap;color:rgba(210,220,235,.9); text-shadow:0 0 5px rgba(0,0,0,.6);animation:smokeRise 9s ease-out forwards} #menu .smoke.l{left:calc(1.2vw + 3.4%);bottom:9.5vh} #menu .smoke.r{right:calc(1.2vw + 3.4%);bottom:9.5vh} @keyframes smokeRise{ 0%{opacity:0;transform:translate(-50%,0) scale(.88);filter:blur(.3px)} 14%{opacity:.26}70%{opacity:.15} 100%{opacity:0;transform:translate(-50%,-165px) scale(1.2) rotate(2deg);filter:blur(3.6px)}} @media(prefers-reduced-motion:reduce){#menu .smoke{display:none}} /* hover target over the skull on the desk — no glint of its own now */ #menu .skullHot{position:absolute;left:62.5%;top:33%;width:23%;height:29%;z-index:10;cursor:pointer} /* the glass shimmer: a diagonal band that sweeps the FULL framed picture, clipped by the frame (sits under the wooden moulding), firing on the same beat as the poster when you brush the skull */ #menu .frameShine{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;border-radius:inherit; background:linear-gradient(112deg,transparent 42%,rgba(195,228,255,.5) 50%,transparent 58%);transform:translateX(-130%)} #menu .frameShine.play{animation:frameShimmer .75s ease-out} @keyframes frameShimmer{0%{opacity:0;transform:translateX(-130%)}18%{opacity:1}100%{opacity:0;transform:translateX(130%)}} @media(prefers-reduced-motion:reduce){#menu .frameShine.play{animation:none}} /* the Rocky-Tec poster fills the whole framed picture (cropped to fit) but only FLASHES in for a beat when you brush the skull — the same moment as the glint. */ #menu .framePoster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:6; opacity:0;pointer-events:none;border-radius:inherit;filter:saturate(.9) contrast(1.03)} #menu .framePoster.play{animation:posterFlash .7s ease-out} @keyframes posterFlash{0%{opacity:0}20%{opacity:.6}44%{opacity:.3}100%{opacity:0}} @media(prefers-reduced-motion:reduce){#menu .framePoster.play{animation:none}} #menu .desk{position:relative;width:100%;max-width:calc(150vh);aspect-ratio:3/2;margin:auto; border-radius:9px/22px;overflow:hidden; box-shadow:0 0 90px 24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(150,200,255,.14), inset 0 0 60px 14px rgba(0,0,0,.42)} /* the frame + beautiful bend: the sides curl into shadow behind a soft bright rail, so the flat still reads as curved glass. No image asset. */ #menu .desk::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit; /* the bend: the picture curls into shadow just inside the wooden sides */ background:linear-gradient(90deg, rgba(2,7,12,.7) 3.7%, rgba(2,7,12,.34) 7%, rgba(2,7,12,0) 14%, rgba(2,7,12,0) 86%, rgba(2,7,12,.34) 93%, rgba(2,7,12,.7) 96.3%)} /* a carved wooden moulding down each side, pure CSS: a FACETED profile — outer shadow, lit face, dark groove, inner lip — with grain, so it reads as 3D wood rather than a smooth roll. It casts a soft shadow onto the picture inside. */ #menu .desk::before{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit; --ml:linear-gradient(90deg,#120b06 0%,#3e2915 4%,#8a6236 6%,#b98a4e 22%,#7a5330 31%,#4a3119 34%,#201207 36%,#201207 45%,#6e4c2a 47%,#8a6236 61%,#5c3d20 68%,#2e1d0f 73%,#8a6236 75%,#a9793f 84%,#3a2413 90%,#140d07 100%); --mr:linear-gradient(270deg,#120b06 0%,#3e2915 4%,#8a6236 6%,#b98a4e 22%,#7a5330 31%,#4a3119 34%,#201207 36%,#201207 45%,#6e4c2a 47%,#8a6236 61%,#5c3d20 68%,#2e1d0f 73%,#8a6236 75%,#a9793f 84%,#3a2413 90%,#140d07 100%); --gr:repeating-linear-gradient(87deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px, rgba(255,220,160,.05) 3px 4px, transparent 4px 8px); background: var(--gr) left/3.7% 100% no-repeat, var(--ml) left/3.7% 100% no-repeat, var(--gr) right/3.7% 100% no-repeat, var(--mr) right/3.7% 100% no-repeat; box-shadow:inset 52px 0 24px -34px rgba(0,0,0,.65), inset -52px 0 24px -34px rgba(0,0,0,.65)} #menu .dk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} #menu .dk.lit{animation:lamp 9s ease-in-out infinite} @keyframes lamp{ 0%,100%{opacity:1} 47%{opacity:1} 48%{opacity:.55} 49%{opacity:1} 62%{opacity:1} 63%{opacity:.4} 63.6%{opacity:1} 64.4%{opacity:.7} 65%{opacity:1} } @media (prefers-reduced-motion:reduce){ #menu .dk.lit{animation:none} } /* the glass */ #menu .crt{position:absolute;left:21.61%;top:14.65%;width:33.59%;height:36.91%; overflow:hidden;border-radius:8px/10px;padding:2.1% 2.3%} #menu .glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 120% at 50% 45%, rgba(60,255,140,.13), rgba(0,0,0,0) 70%); animation:crtbreathe 5.5s ease-in-out infinite} @keyframes crtbreathe{0%,100%{opacity:.85}50%{opacity:1}} #menu .scan{position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.3) 2px 4px)} @media (prefers-reduced-motion:reduce){ #menu .glow{animation:none} } /* what is on the glass. sized off the picture so it scales with it. */ #termOut{position:relative;height:100%;overflow-y:auto;font-family:var(--mono);color:#7dff9b; font-size:clamp(9px,1.05vw,15px);line-height:1.55;text-shadow:0 0 6px rgba(70,255,150,.35)} #termOut .thead{font-size:.72em;letter-spacing:.2em;color:#3f9a5d; border-bottom:1px solid #12492a;padding-bottom:.35em;margin-bottom:.6em} #termOut button{display:block;width:100%;text-align:left;background:transparent;border:none; color:#7dff9b;font-family:var(--mono);font-size:1.05em;letter-spacing:.12em; padding:.2em .3em;cursor:pointer;text-shadow:inherit} #termOut button::before{content:" ";white-space:pre} #termOut button:hover:not(:disabled)::before,#termOut button:focus-visible::before{content:"> "} #termOut button:hover:not(:disabled),#termOut button:focus-visible{ background:#7dff9b;color:#04140b;text-shadow:none} #termOut button:disabled{color:#2f6f45;cursor:not-allowed} #termOut .tfoot{font-size:.68em;letter-spacing:.14em;color:#2f6f45;margin-top:.6em; border-top:1px solid #12492a;padding-top:.4em} /* the front page has eight lines and a footer to fit on one piece of glass. it did not: GO AHEAD. was below the bezel at most window sizes. */ #termOut{scrollbar-width:none} #termOut::-webkit-scrollbar{display:none} #termOut.main button{padding:.08em .3em} #termOut.main .thead{margin-bottom:.4em} #termOut.main .tfoot{margin-top:.4em;color:#3f9a5d} #termOut button .tdim{font-size:.72em;letter-spacing:.14em;opacity:.7;margin-left:.8em} #termOut .tcur{display:inline-block;width:.6em;height:1em;margin-left:.35em;vertical-align:-.12em; background:#7dff9b;box-shadow:0 0 6px rgba(70,255,150,.5);animation:tcur 1.1s steps(1) infinite} @keyframes tcur{0%,55%{opacity:1}56%,100%{opacity:0}} @media(prefers-reduced-motion:reduce){#termOut .tcur{animation:none}} #termOut .srow{display:flex;justify-content:space-between;gap:.6em;padding:.25em 0; border-bottom:1px dotted #12492a;font-size:.82em} #termOut .srow button{width:auto;display:inline-block;border:1px solid #12492a; font-size:.9em;letter-spacing:.1em;padding:.15em .5em} #termOut .srow button::before{content:""} #termOut p{font-family:var(--serif);font-size:.92em;color:#a8f7bd;line-height:1.45;margin-top:.5em} /* portrait windows: the desk fills, the glass still tracks it */ @media(max-aspect-ratio:1/1){ #menu .desk{width:auto;height:100%;max-width:none} } /* ========================================================================== THE DOOR, OPEN The frame has its aperture cut out, so whatever is behind it shows through. Which world that is depends only on how long the door stayed shut. ========================================================================== */ #ending{position:fixed;inset:0;z-index:60;display:none;background:#02060a; flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:16px} #ending.on{display:flex} #endStage{position:relative;width:min(920px,94vw);aspect-ratio:676/369;overflow:hidden; background:#000;box-shadow:0 24px 70px rgba(0,0,0,.7)} #endStage img{position:absolute;display:block} .ed-out{left:45%;top:10%;width:32%;height:70%;object-fit:cover;object-position:50% 22%; animation:edPush 9s ease-out 1 both} .ed-door{inset:0;width:100%;height:100%} .ed-glare{position:absolute;left:45%;top:10%;width:32%;height:70%;pointer-events:none; background:radial-gradient(60% 50% at 50% 45%, rgba(255,240,210,.5), rgba(255,240,210,0) 70%); animation:edGlare 9s ease-out 1 both} @keyframes edPush{0%{transform:scale(1.12)}100%{transform:scale(1)}} @keyframes edGlare{0%{opacity:1}22%{opacity:.35}100%{opacity:.18}} #endText{width:min(920px,94vw);font-family:var(--serif);font-size:17px;line-height:1.55; color:#cfe0ee;border-left:2px solid var(--alarm);padding-left:14px} #endText b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em; color:var(--alarm);margin-bottom:6px} #endBack{background:transparent;border:1px solid #2c4a63;color:#cfe0ee;font-family:var(--mono); font-size:11px;letter-spacing:.18em;padding:8px 16px} #endBack:hover{border-color:var(--yellow);color:var(--yellow)} @media (prefers-reduced-motion:reduce){ .ed-out,.ed-glare{animation:none} } /* ---- the terminal. an in-world object, so it does not use the game palette. green phosphor, scanlines, and text that was typed by a clerk. ---- */ #files{position:fixed;inset:0;z-index:50;display:none;overflow-y:auto; background:#04120a;color:#7dff9b;font-family:var(--mono);padding:18px} #files.on{display:block} #files::after{content:"";position:fixed;inset:0;pointer-events:none; background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 4px)} #filesInner{max-width:1000px;margin:0 auto} .crt-head{border-bottom:1px solid #1c6b39;padding-bottom:8px;margin-bottom:14px;position:relative} .crt-brand{display:block;font-size:20px;letter-spacing:.22em;color:#b6ffc8} .crt-title{display:block;font-size:12px;letter-spacing:.3em;margin-top:2px} .crt-sub{display:block;font-size:9.5px;letter-spacing:.14em;color:#3f9a5d;margin-top:4px} #filesClose{position:absolute;right:0;top:0;background:transparent;border:1px solid #1c6b39; color:#7dff9b;font-family:var(--mono);font-size:11px;letter-spacing:.16em;padding:5px 10px} #filesClose:hover{border-color:#7dff9b;color:#b6ffc8} .crt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px} .crt-card{border:1px solid #1c6b39;padding:7px;cursor:pointer;background:#06180d} .crt-card:hover{border-color:#7dff9b} .crt-card img,.crt-card svg{width:100%;height:auto;display:block;filter:grayscale(1) sepia(1) hue-rotate(66deg) saturate(3) brightness(.85)} .crt-card .cid{font-size:9.5px;color:#3f9a5d;letter-spacing:.1em;margin-top:5px} .crt-card .cnm{font-size:13px;letter-spacing:.1em;color:#b6ffc8} .crt-card .cst{font-size:9.5px;color:#3f9a5d} .crt-file{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px} @media(max-width:720px){.crt-file{grid-template-columns:1fr}} .crt-file img,.crt-file .por svg{width:100%;height:auto;display:block;border:1px solid #1c6b39; filter:grayscale(1) sepia(1) hue-rotate(66deg) saturate(3) brightness(.85)} .crt-row{display:flex;justify-content:space-between;border-bottom:1px dotted #1c6b39; padding:3px 0;font-size:12px} .crt-row span:last-child{color:#b6ffc8;text-align:right} .crt-sec{font-size:10px;letter-spacing:.24em;color:#3f9a5d;margin:16px 0 6px; border-bottom:1px solid #1c6b39;padding-bottom:3px} .crt-body{font-family:var(--serif);font-size:15px;color:#a8f7bd;line-height:1.55} .crt-body p{margin-bottom:8px} .crt-q{font-size:10px;letter-spacing:.12em;color:#3f9a5d;margin-top:9px} .crt-none{font-family:var(--serif);font-style:italic;color:#3f9a5d} .reel{margin-top:10px;border:1px solid #1c6b39;padding:6px;background:#04120a} /* the deck the reel runs on: a plate with spools on top, a meter and a counter underneath, and the cable loom slung below it. all of it is dead until the projector is running. */ .deck{border:1px solid #12492a;background: linear-gradient(180deg,#07200f,#04120a 60%,#061a0d);padding:6px;border-radius:2px; box-shadow:inset 0 1px 0 rgba(125,255,155,.08)} .deck-head,.deck-foot{display:flex;align-items:center;justify-content:space-between;gap:6px} .deck-head{margin-bottom:6px} .deck-foot{margin-top:6px} .deck-plate{font-size:7.5px;letter-spacing:.18em;color:#2f6f45;white-space:nowrap} .spool{width:20px;height:20px;border-radius:50%;border:1px solid #1c6b39;position:relative; background:radial-gradient(circle,#0b2416 38%,#04120a 40%)} .spool i{position:absolute;inset:3px;border-radius:50%; background:conic-gradient(#12492a 0 25%, transparent 0 50%, #12492a 0 75%, transparent 0)} .deck.playing .spool i{animation:spoolTurn 1.6s linear infinite} .deck.playing .spool.feed i{animation-duration:2.6s} @keyframes spoolTurn{to{transform:rotate(360deg)}} .vu{position:relative;width:56px;height:14px;border:1px solid #12492a;border-radius:2px; background:#04120a;overflow:hidden} .vu b{position:absolute;left:50%;bottom:-1px;width:1px;height:13px;background:#7dff9b; transform-origin:50% 100%;transform:rotate(-32deg);opacity:.5} .deck.playing .vu b{opacity:1;animation:vuSwing 1.1s ease-in-out infinite} @keyframes vuSwing{0%{transform:rotate(-30deg)}30%{transform:rotate(14deg)} 55%{transform:rotate(-8deg)}80%{transform:rotate(22deg)}100%{transform:rotate(-30deg)}} .modb{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#7dff9b; background:#0b2416;border:1px solid #1c6b39;padding:1px 6px;border-radius:1px; cursor:pointer;margin-left:4px} .modb:hover:not(:disabled){border-color:#7dff9b;color:#b6ffc8} .modb:disabled{opacity:.3;cursor:not-allowed} .transport{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#7dff9b; background:#0b2416;border:1px solid #1c6b39;padding:2px 7px;border-radius:1px;cursor:pointer} .transport:hover{border-color:#7dff9b;color:#b6ffc8} .deck.playing .transport{color:#b6ffc8;border-color:#2f6f45} .scrub{flex:1;min-width:26px;height:3px;background:#0b2416;border:1px solid #12492a; position:relative;cursor:pointer} .scrub i{position:absolute;left:0;top:0;bottom:0;width:0;background:#2f6f45;display:block} .deck.playing .scrub i{background:#7dff9b} .counter{font-size:9px;letter-spacing:.14em;color:#3f9a5d;border:1px solid #12492a; padding:1px 5px;background:#04120a;min-width:44px;text-align:center} .lamps{display:flex;gap:4px} .lamp{width:6px;height:6px;border-radius:50%;background:#0b2416;border:1px solid #12492a} .deck.playing .lamp.run{background:#ff8a6b;border-color:#ff8a6b; box-shadow:0 0 6px rgba(255,138,107,.8)} @media (prefers-reduced-motion:reduce){ .deck.playing .spool i,.deck.playing .vu b{animation:none} } .reel-row{display:flex;gap:7px;align-items:stretch} .reel-vid{flex:1;min-width:0;position:relative;overflow:hidden;background:#020a06} /* projector: CLASSIC = black-and-white film look; FULL = fill the browser window */ #reelStage.classic #reelVid{filter:grayscale(1) sepia(.16) contrast(1.12) brightness(1.03)} .deck .transport.on{background:#0a8ad8;color:#02150c;border-color:#0a8ad8} #reelDeck.reel-max{position:fixed;inset:0;z-index:9999;margin:0;border:0;border-radius:0; background:#000;display:flex;flex-direction:column;padding:8px;box-sizing:border-box} #reelDeck.reel-max .reel-row{flex:1;min-height:0} #reelDeck.reel-max .reel-vid{height:100%;flex:1} #reelDeck.reel-max #reelVid{width:100%;height:100%;object-fit:contain;background:#000} #reelDeck.reel-max .tube{display:none} #reelDeck.reel-max .deck-head,#reelDeck.reel-max .deck-foot{flex:0 0 auto} /* a reel that is not running is a dead tube, not a frozen face */ .reel-vid.dead video{opacity:0} .reel-off{position:absolute;inset:0;display:none;flex-direction:column;align-items:center; justify-content:center;gap:.25em;cursor:pointer;z-index:2;background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.5) 2px 4px), radial-gradient(120% 90% at 50% 45%, #0b2416 0%, #04120a 70%)} .reel-vid.dead .reel-off{display:flex} .ro-txt{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:#2f6f45} .ro-sub{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:#1d5432} .reel-off:hover .ro-txt{color:#7dff9b} /* the strike: a line across the middle, then the picture opens off it */ .reel-line{position:absolute;left:0;right:0;top:50%;height:2px;background:#d8ffe6; opacity:0;z-index:3;pointer-events:none;transform:scaleX(0)} .reel-vid.striking .reel-line{animation:reelLine .62s ease-out 1 forwards} .reel-vid.striking video{animation:reelOpen .62s ease-out 1 both} @keyframes reelLine{ 0%{transform:scaleX(0);opacity:0} 14%{transform:scaleX(1);opacity:1} 38%{opacity:1} 60%{opacity:.25} 100%{opacity:0} } @keyframes reelOpen{ 0% {clip-path:inset(50% 0 50% 0);filter:var(--reel-tint) brightness(2.4) contrast(.4)} 40% {clip-path:inset(48% 0 48% 0);filter:var(--reel-tint) brightness(2) contrast(.6)} 100%{clip-path:inset(0 0 0 0); filter:var(--reel-tint) brightness(.9) contrast(1.1)} } @media (prefers-reduced-motion:reduce){ .reel-vid.striking .reel-line,.reel-vid.striking video{animation:none} } /* the lamp is a physical part of the machine, so it keeps its own colour */ .tube{position:relative;flex:0 0 34px;width:34px;align-self:center} .tube img{position:absolute;inset:0;width:100%;height:auto;display:block;filter:none} .tube .t-off{position:relative;opacity:.55} .tube .t-on{opacity:0;transition:opacity .18s linear} .tube .t-glow{position:absolute;left:50%;top:34%;width:120%;padding-bottom:120%; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(circle,rgba(255,170,40,.55),rgba(255,150,20,0) 68%); transition:opacity .18s linear} .tube.lit .t-off{opacity:.15} .tube.lit .t-on{opacity:1;animation:tubeWarm .5s ease-out 1} .tube.lit .t-glow{opacity:1;animation:tubeHum 2.6s ease-in-out infinite} @keyframes tubeWarm{0%{opacity:0}35%{opacity:.5}45%{opacity:.25}100%{opacity:1}} @keyframes tubeHum{0%,100%{opacity:.85}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ .tube.lit .t-on,.tube.lit .t-glow{animation:none} } .reel-lab{font-size:9px;letter-spacing:.16em;color:#3f9a5d;margin-bottom:5px} /* The tint lives in a variable because the strike and the splice both animate filter, and a keyframe that sets filter replaces the whole chain — which is why the reel used to play in colour for half a second and then turn green. */ :root{--reel-tint:grayscale(1) sepia(1) hue-rotate(66deg) saturate(2.6)} .reel video{width:100%;height:auto;display:block; filter:var(--reel-tint) brightness(.9) contrast(1.1)} .reel-big{background:transparent;border:1px solid #1c6b39;color:#7dff9b;font-family:var(--mono); font-size:9.5px;letter-spacing:.16em;padding:4px 8px;margin-top:6px;width:100%} .reel-big:hover{border-color:#7dff9b;color:#b6ffc8} .reel-none{font-family:var(--serif);font-style:italic;color:#3f9a5d;font-size:13px;padding:6px 0} /* the splice, marked on the strip and felt in the picture */ .reel-cut{margin-top:6px} .rc-bar{display:block;position:relative;height:3px;background:#0b2f1b;border:1px solid #12492a} .rc-bar i{position:absolute;top:-2px;width:2px;height:7px;background:#ff8a6b} .rc-lab{display:block;font-size:8.5px;letter-spacing:.16em;color:#3f9a5d;margin-top:3px} .reel-know{font-family:var(--serif);font-size:12.5px;color:#b6ffc8;margin-top:7px; border-left:2px solid #ff8a6b;padding-left:8px} .reel-vid.splice video{animation:spliceJump .26s steps(3) 1} @keyframes spliceJump{ 0% {transform:translateY(0); filter:var(--reel-tint) brightness(.9) contrast(1.1)} 30% {transform:translateY(-6%); filter:var(--reel-tint) brightness(1.7) contrast(.6)} 60% {transform:translateY(3%); filter:var(--reel-tint) brightness(.7) contrast(1.1)} 100%{transform:translateY(0); filter:var(--reel-tint) brightness(.9) contrast(1.1)} } @media (prefers-reduced-motion:reduce){ .reel-vid.splice video{animation:none} } /* enlarging breaks it out of the portrait column rather than opening a window */ .reel.wide{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%); width:min(880px,92vw);z-index:2;box-shadow:0 0 0 100vmax rgba(4,18,10,.9)} .crt-back{background:transparent;border:1px solid #1c6b39;color:#7dff9b;font-family:var(--mono); font-size:11px;letter-spacing:.16em;padding:6px 11px;margin-top:16px} /* ---- intake form ---- */ #intake{position:fixed;inset:0;z-index:20;overflow-y:auto; display:flex;justify-content:center;padding:28px 22px; background: radial-gradient(130% 120% at 50% 42%, rgba(0,0,0,0) 52%, rgba(0,0,0,.42) 100%), url("art/intake_table.jpg") center/cover no-repeat, #cf9a1e} /* the company advertising the hole, on the wall over the desk you are signing at */ #intakePoster{position:fixed;right:3vw;top:50%;transform:translateY(-50%) rotate(-1.2deg); width:min(330px,26vw);opacity:.5;filter:brightness(.75) saturate(.9); box-shadow:0 20px 46px rgba(0,0,0,.55);pointer-events:none} @media(max-width:1100px){#intakePoster{display:none}} #intake.done{display:none} #intakeBox{max-width:760px;width:100%;align-self:flex-start} .ihead{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto; column-gap:12px;align-items:center;margin-bottom:6px} .rtlogo{grid-row:1/4;height:52px;width:auto;display:block} .rtname{font-family:var(--mono);font-size:19px;letter-spacing:.2em;color:var(--yellow);align-self:end} .rtsub{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--blue)} .rtparent{font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--blue-dim)} #ititle{font-family:var(--mono);font-size:26px;letter-spacing:.1em;color:var(--yellow);margin:2px 0} .isub{color:var(--blue-dim);font-size:14px;margin-bottom:18px} .ilab{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--blue); margin:18px 0 6px;border-bottom:1px solid #073e5f;padding-bottom:4px} #iname{width:100%;padding:9px 11px;background:var(--navy-2);border:1px solid #073e5f; color:var(--blue-lit);font-family:var(--serif);font-size:17px} #iname:focus{outline:2px solid var(--yellow);outline-offset:1px} .ilab .icount{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#3c5a70;margin-left:8px} .ilab .icount.near{color:var(--yellow)} .mrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dotted #073e5f} .mrow .ml{font-family:var(--mono);font-size:15px;color:var(--yellow);width:14px; flex:0 0 14px;text-align:center} .mrow .mn{font-family:var(--mono);font-size:13px;flex:0 0 104px;color:var(--blue-lit); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mrow .md{flex:1;min-width:0;font-size:13px;color:var(--blue-dim)} .mrow .mv{font-family:var(--mono);font-size:15px;color:var(--yellow);width:20px;text-align:center} .mrow button{padding:2px 9px;font-size:14px;line-height:1.1} .pick{display:block;width:100%;text-align:left;padding:9px 11px;margin-bottom:6px; background:var(--navy-2);border:1px solid #073e5f;color:var(--blue-lit);cursor:pointer} .pick:hover{border-color:var(--blue)} .pick.on{border-color:var(--yellow);background:#0a3550} .pick b{font-family:var(--mono);font-size:13px;color:var(--yellow);display:block} .pick .tier{float:right;font-family:var(--mono);font-size:11px;color:var(--blue)} .pick small{font-size:13px;color:var(--blue-dim);display:block;margin-top:2px} #ibegin{width:100%;margin-top:20px;padding:12px;text-align:center;font-size:15px; background:var(--yellow);color:var(--navy);border-color:var(--yellow)} #ibegin:disabled{background:transparent;color:var(--blue-dim);border-color:#073e5f} .inote{font-family:var(--mono);font-size:11.5px;color:var(--alarm);margin-top:8px;min-height:16px} .sloppynote{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;line-height:1.5;color:var(--blue-dim);opacity:.8;margin:4px 0 12px} .onblk,.offblk{display:inline-block;font-size:11px;letter-spacing:.07em; padding:1px 7px;border-radius:3px;border:1px solid currentColor;line-height:1.35} .onblk{color:var(--alarm)} .offblk{color:#7dbf8a} .hblk{float:right;font-family:var(--mono);font-size:10px;letter-spacing:.12em} .hblk.on{color:var(--alarm)} .hblk.off{color:#7dbf8a} #purse{font-family:var(--mono);font-size:12px;color:var(--yellow);text-align:center;margin-bottom:6px} #sheet{position:relative;display:flex;flex-wrap:wrap;gap:3px 10px;font-family:var(--mono); font-size:11px;color:var(--blue-dim);margin-bottom:10px;justify-content:center; padding:17px 9px 8px;border:1px solid #0a3f60;border-left:2px solid var(--blue); border-radius:3px;background:linear-gradient(180deg,rgba(8,112,181,.06),transparent 70%); cursor:pointer;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease} #sheet::after{content:"OPEN \25b8";position:absolute;top:-1px;right:-1px; font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--navy); background:var(--blue);padding:2px 6px 2px 7px;border-bottom-left-radius:3px} #sheet:hover{border-color:var(--blue);background:rgba(255,245,107,.05); box-shadow:inset 0 0 0 1px rgba(255,245,107,.22),0 0 12px rgba(8,112,181,.18)} #sheet:hover span{color:var(--blue-lit)} #sheet:hover::after{background:var(--yellow)} #sheet:active{box-shadow:inset 0 0 0 1px rgba(255,245,107,.4);transform:translateY(1px)} #sheet:focus-visible{outline:2px solid var(--yellow);outline-offset:1px} #sheet span{white-space:nowrap} /* ---- the two character screens read as one stamped resident file ---- */ /* creation: the intake is a physical form on the desk, not a UI panel */ #intakeBox{position:relative;background:linear-gradient(180deg,#08243a,#061a2b); border:1px solid #0a3550;padding:22px 26px 26px; box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 0 90px rgba(0,0,0,.34)} #intakeBox::before{content:"";position:absolute;inset:7px;pointer-events:none; border:1px solid rgba(120,190,240,.10)} .istamp{position:absolute;top:16px;right:18px;z-index:3;pointer-events:none; font-family:var(--mono);font-size:14px;letter-spacing:.15em; color:rgba(206,54,44,.72);border:2.5px solid rgba(206,54,44,.52); padding:5px 12px;border-radius:3px;transform:rotate(-11deg);opacity:.92} @media(max-width:560px){.istamp{display:none}} /* ---- the form is a sheet on a folder on the desk. cream margin between the yellow desk and the navy print, so neither has to meet the other. ---- */ :root{ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .14 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --paper:#ebe2c8; --paper-2:#dfd2ae; --folder:#b98f45; --folder-2:#a37a33; } #intakeDesk{position:relative;max-width:820px;width:100%;align-self:flex-start; margin:34px auto 48px} .ifolder{position:absolute;inset:-10px -18px -22px 14px;z-index:0; background:var(--grain),linear-gradient(170deg,var(--folder),var(--folder-2)); background-size:220px 220px,cover;border-radius:3px 6px 6px 4px; transform:rotate(1.4deg); box-shadow:0 2px 0 rgba(0,0,0,.15),0 24px 46px rgba(0,0,0,.48), inset 0 0 0 1px rgba(90,60,15,.35),inset 0 -30px 60px rgba(70,45,10,.25)} .ifolder-tab{position:absolute;top:-27px;right:74px;width:150px;height:30px; background:var(--grain),linear-gradient(180deg,#c49a50,var(--folder)); background-size:220px 220px,cover;border-radius:7px 7px 0 0; box-shadow:inset 0 0 0 1px rgba(90,60,15,.35); font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:rgba(55,35,8,.72); display:flex;align-items:center;justify-content:center;padding-top:3px} #intakeSheet{position:relative;z-index:1;padding:30px 30px 36px 48px; background:var(--grain), radial-gradient(140% 90% at 50% 40%,transparent 60%,rgba(120,88,36,.22) 100%), linear-gradient(176deg,var(--paper),var(--paper-2)); background-size:220px 220px,cover,cover; transform:rotate(-.45deg); box-shadow:0 1px 1px rgba(40,25,5,.25),0 6px 10px rgba(40,25,5,.18), 0 16px 30px rgba(0,0,0,.28)} /* three punch holes, with the folder showing through */ #intakeSheet::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:16px; pointer-events:none; background: radial-gradient(circle at 8px 8px,#8a6428 0 4px,#a37a33 5.5px,rgba(60,40,10,.55) 6.5px,transparent 7.5px) 0 14%/16px 16px no-repeat, radial-gradient(circle at 8px 8px,#8a6428 0 4px,#a37a33 5.5px,rgba(60,40,10,.55) 6.5px,transparent 7.5px) 0 50%/16px 16px no-repeat, radial-gradient(circle at 8px 8px,#8a6428 0 4px,#a37a33 5.5px,rgba(60,40,10,.55) 6.5px,transparent 7.5px) 0 86%/16px 16px no-repeat} /* the clip holding it to the folder */ #intakeSheet::after{content:"";position:absolute;top:-24px;left:118px;width:20px;height:74px; border:3px solid #9da3a8;border-bottom-color:#7f858a;border-radius:11px; transform:rotate(-5deg);pointer-events:none; box-shadow:1px 2px 2px rgba(0,0,0,.28),inset 0 0 0 4px transparent, inset 0 18px 0 -12px transparent} /* the navy is ink on the page now: no float, a slight bleed at the edge */ #intakeBox{max-width:none;width:100%; background:var(--grain),linear-gradient(180deg,#08243a,#061a2b); background-size:220px 220px,cover;background-blend-mode:soft-light,normal; border:none; box-shadow:0 0 0 1px rgba(6,26,43,.55),0 0 2px 1px rgba(6,26,43,.35), inset 0 0 90px rgba(0,0,0,.34)} /* the stamp lands half on the margin, half on the print */ #intakeSheet > .istamp{top:8px;right:14px;color:rgba(186,40,32,.78); border-color:rgba(186,40,32,.6);mix-blend-mode:multiply;z-index:4} @media(max-width:700px){ #intakeDesk{margin:10px auto 24px} .ifolder{display:none} #intakeSheet{padding:14px 12px 18px 30px;transform:none} #intakeSheet::before{left:8px} #intakeSheet::after{left:auto;right:46px} } @media(prefers-reduced-motion:reduce){#intakeSheet,.ifolder{transform:none}} /* the sheet: a page out of the same file, stamped in the corner */ #charBig .cs-inner:has(.cs-you)::after{content:"INTAKE FILE · UNLISTED"} #charBig .cs-inner::after{content:"RESIDENT FILE · COPY";position:absolute; bottom:12px;right:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; color:rgba(206,54,44,.5);border:2px solid rgba(206,54,44,.36); padding:3px 9px;border-radius:3px;transform:rotate(-7deg);pointer-events:none} /* the developer's notice, before anything else. it is the first thing on the screen and the only thing on it. */ #notice{position:fixed;inset:0;z-index:9000;background:#0b0b0b; display:none;align-items:center;justify-content:center;flex-direction:column;cursor:pointer} #notice.on{display:flex} #notice.gone{display:none} #noticeStage{position:relative;display:inline-block;line-height:0} #notice video{max-width:100%;max-height:92vh;display:block} /* --------------------------------------------------------------------------- THE 18+ BADGE It is drawn on top of the video rather than burned into it, so it can be moved without re-encoding anything. Two numbers: --age-x across, 0% = left edge of the picture, 100% = right edge --age-y down, 0% = top edge, 100% = bottom edge They are percentages of the picture, so it stays put at any window size. Nudge these until it sits where she is looking. --------------------------------------------------------------------------- */ :root{ --age-x: 95%; --age-y: 60%; --age-size: 3.4vw; } #noticeAge{ position:absolute; left:var(--age-x); top:var(--age-y); transform:translate(-50%,-50%); font-family:var(--mono); font-weight:700; font-size:var(--age-size); color:#CC1111; letter-spacing:.02em; line-height:1; opacity:0; transition:opacity .25s linear; pointer-events:none; } #noticeAge.on{opacity:1} .nskip{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#6b6b6b; padding:8px 0 0;user-select:none;min-height:14px} .nbtn{font-family:var(--mono);font-size:12px;letter-spacing:.18em;margin-top:14px; background:#151515;border:1px solid #4a4a4a;color:#cfcfcf;padding:10px 22px;cursor:pointer} .nbtn:hover{border-color:#FFF56B;color:#FFF56B} .nbtn.agree{display:none;border-color:#8a7a2a;color:#e8dc8a} .nbtn.agree.on{display:block} .nbtn.sound{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;margin:0; font-size:12px;padding:10px 20px;z-index:3;background:#1d1d1d;border-color:#FFF56B; color:#FFF56B;animation:sndPulse 1.8s ease-in-out infinite} @keyframes sndPulse{0%,100%{opacity:.62}50%{opacity:1}} #notice.heard .nbtn.sound,#notice.ended .nbtn.sound{display:none} #notice.ended .nbtn.sound{display:none} /* ---- the notice, hung like the menu painting: same wall, same candles, a gilt frame round the film. Agreeing blows it off the wall. ---- */ #notice{background:#02060a url("../../art/wall.jpg") center/cover no-repeat;overflow:hidden} #noticeFrame{position:relative;z-index:2;padding:clamp(10px,1.6vh,18px);border-radius:3px; background: linear-gradient(135deg,rgba(255,240,190,.35),transparent 30%,transparent 70%,rgba(0,0,0,.35)), repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 5px), linear-gradient(180deg,#b88a3c,#8a6224 45%,#6e4c1a 55%,#a57a34); box-shadow: inset 0 0 0 2px #e2bd6a, inset 0 0 0 5px #5a3c12, inset 0 0 0 7px #c99a45, inset 0 0 18px rgba(0,0,0,.55), 0 0 0 1px #2a1a06, 0 18px 50px rgba(0,0,0,.75), 0 0 120px 30px rgba(0,0,0,.55)} #noticeFrame #noticeStage{box-shadow:0 0 0 3px #2a1a06, 0 0 0 4px #d9b35f, inset 0 0 30px rgba(0,0,0,.6);background:#000} #noticeFrame video{width:min(calc(96vw - 40px), calc((84vh - 40px) * 1.7778));height:auto;max-width:none;max-height:none} /* no film (art/notice.mp4 missing, or the browser will not play it): the same frame with the notice written in it, instead of an empty black box */ #noticeText{display:none} #notice.nofilm #noticeVid,#notice.nofilm #noticeAge{display:none} #notice.nofilm #noticeText{display:block;width:min(640px,70vw);padding:48px 40px 44px;line-height:1.6; font:15px/1.6 Georgia,serif;color:#e8dcc0;text-align:center;background:#0c0a07} #notice.nofilm #noticeText b{display:block;font:700 12px var(--mono);letter-spacing:.3em;color:#e2bd6a;margin-bottom:14px} #noticePlate{position:absolute;left:50%;bottom:0;transform:translate(-50%,58%);z-index:3; font:700 10px var(--mono);letter-spacing:.24em;white-space:nowrap;color:#2b1a05; padding:5px 16px;border-radius:2px; background:linear-gradient(180deg,#f0d38a,#c9a14e 55%,#a47b2e); box-shadow:0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5)} #notice .nbtn.agree{position:relative;z-index:2;margin-top:24px;background:linear-gradient(180deg,#2a2112,#171108); border:1px solid #c99a45;color:#f0d38a;box-shadow:0 0 0 3px rgba(201,154,69,.15), 0 8px 24px rgba(0,0,0,.6)} #notice .nbtn.agree:hover{background:#c99a45;color:#1a1004} #notice .nskip{position:relative;z-index:2;margin-top:20px} #notice.boom{pointer-events:none} #notice.boom #noticeFrame.crack{animation:ntShake .22s linear 1} #notice.boom .nbtn,#notice.boom .nskip{animation:ntFade .6s ease-out .2s forwards} #notice.boom .candle{animation:ntFade 1s ease-out 2.4s forwards} #notice.boom::before{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:#000;opacity:0; animation:ntDark .7s ease-in 3.3s forwards} /* the cracks: drawn over the glass the instant you agree, same lines the pieces break along */ #notice .cracks{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;overflow:hidden} #notice .cracks path{fill:none;stroke:rgba(235,245,255,.85);stroke-width:1.3;vector-effect:non-scaling-stroke; stroke-dasharray:400;stroke-dashoffset:400;animation:ntCrack .45s cubic-bezier(.1,.8,.3,1) forwards; filter:drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 2px rgba(255,255,255,.6))} #notice .glint{position:absolute;inset:0;z-index:6;pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 47%,transparent 60%)} #notice .gshard{position:fixed;margin:0;box-sizing:border-box;z-index:7;pointer-events:none;will-change:transform,opacity;box-shadow:none} #notice .gshard *{box-shadow:none!important} /* 33 pieces each carrying the frame's big blurred shadows was most of the cost */ @keyframes ntShake{0%{transform:translate(0,0)}30%{transform:translate(-4px,2px)}60%{transform:translate(3px,-2px)}100%{transform:none}} @keyframes ntCrack{to{stroke-dashoffset:0}} @keyframes ntFade{to{opacity:0;transform:translateY(30px)}} @keyframes ntDark{to{opacity:1}} .sloppyfilm{border:1px solid #073e5f;background:#001624;margin-bottom:10px} .sloppyfilm video{width:100%;height:auto;display:block;cursor:pointer} .sf-cap{font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--blue); padding:5px 8px;border-top:1px solid #073e5f;line-height:1.5} .picrow{display:flex;gap:7px;align-items:center;margin-top:10px} .picrow button{font-size:11px;padding:5px 9px} .picthumb{width:56px;flex:0 0 56px;display:block} .picthumb img,.picthumb svg{width:56px;height:56px;display:block;border:1px solid #073e5f;object-fit:cover} #face{width:88px;margin:0 auto 10px} #face svg,#face img{width:100%;height:auto;display:block;border:1px solid #073e5f} #view svg,#view img{width:100%;height:auto;display:block} /* The arrival: the camera drifts right off the door while he goes down through it, and the light closes. Nothing loops. */ #view .arr{position:relative;overflow:hidden;width:100%;aspect-ratio:3/2;background:#00131f} #view .arr img{position:absolute;display:block;height:auto} #view .arr-bg{width:132%;left:0;top:-4%; animation:arrPan 6.4s cubic-bezier(.35,0,.25,1) 1 forwards} #view .arr-man{width:19%;left:13%;top:19%;transform-origin:50% 50%; animation:arrFall 2.5s cubic-bezier(.2,.35,.65,.95) 1 forwards, arrPan 6.4s cubic-bezier(.35,0,.25,1) 1 forwards} #view .arr-flash{position:absolute;inset:0;background:#f6e6c0;opacity:0;pointer-events:none; animation:arrSeal 6.4s ease-in 1 forwards} @keyframes arrPan{ 0%{transform:translateX(0)} 100%{transform:translateX(-24%)} } /* He was pushed, so he carries across before gravity gets him: out to the east, dropping as he goes, and gone by the time he reaches the heads in front — he passes behind them, he does not sail over them. */ /* Shoved, not dropped. He goes east across the frame nearly level and only starts losing height near the end — a shallow arc, not a plummet. */ /* Down and across together, the whole way. Both axes move on every step — the earlier version travelled east first and only dropped at the end, which is why it read as two separate movements instead of one shove. */ @keyframes arrFall{ 0% {transform:translate(0,0) rotate(-8deg); opacity:0} 6% {opacity:1} 30% {transform:translate(52%,46%) rotate(6deg); opacity:1} 60% {transform:translate(108%,100%) rotate(22deg); opacity:1} 84% {transform:translate(152%,148%) rotate(34deg); opacity:.5} 100%{transform:translate(182%,184%) rotate(42deg); opacity:0} } @keyframes arrSeal{ 0%{opacity:.55} 12%{opacity:0} 78%{opacity:0} 100%{opacity:0} } @media (prefers-reduced-motion:reduce){ #view .arr-bg,#view .arr-man,#view .arr-flash{animation:none} #view .arr-man{top:38%;left:20%} } /* Moments. Every one of these runs once, forwards, and holds where it stops. */ /* Twelve pulses at 1.1s is about two minutes of blinking and then it stops on its own — it is a noise, not an alarm, and the map is redrawn often enough that a long-running animation would restart anyway. */ .stir{animation:stirBlink 1.1s steps(2) 12 forwards} @keyframes stirBlink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}} @media (prefers-reduced-motion:reduce){ .stir{animation:none;opacity:.85} } .m-seal{transform-box:view-box;transform-origin:100px 64px; animation:mSeal 2.4s cubic-bezier(.2,.75,.15,1) 1 forwards} @keyframes mSeal{0%{transform:rotate(0)}72%{transform:rotate(96deg)}86%{transform:rotate(87deg)}100%{transform:rotate(90deg)}} .m-shell{transform-box:view-box;transform-origin:100px 64px; animation:mShell 2.4s ease-out 1 forwards} @keyframes mShell{0%{transform:scale(1.25);opacity:0}45%{opacity:1}100%{transform:scale(1);opacity:1}} .m-lugs{transform-box:view-box;transform-origin:100px 64px;opacity:0; animation:mLugs .5s ease-out 2.1s 1 forwards} @keyframes mLugs{0%{opacity:0;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}} .m-warn{transform-box:view-box;transform-origin:100px 70px; animation:mWarn .6s steps(2) 3 forwards} @keyframes mWarn{0%{opacity:1}50%{opacity:.25}100%{opacity:1}} .m-key{transform-box:view-box;transform-origin:76px 64px; animation:mKey 1.6s cubic-bezier(.3,.8,.2,1) 1 forwards} @keyframes mKey{0%{transform:rotate(-40deg);opacity:0}60%{opacity:1}100%{transform:rotate(0);opacity:1}} @media (prefers-reduced-motion:reduce){ .m-seal,.m-shell,.m-lugs,.m-warn,.m-key{animation:none;opacity:1;transform:none} } /* The door bar turns once, when the seal closes, and stays where it stops. No loop — a repeating animation in the corner of the screen is noise. */ .door-bar{transform-box:view-box} .door-bar.open{transform:rotate(0deg)} .door-bar.locked{transform:rotate(90deg)} .door-bar.sealing{animation:seal 2.6s cubic-bezier(.2,.7,.15,1) 1 forwards} @keyframes seal{ 0% {transform:rotate(0deg)} 70% {transform:rotate(96deg)} 84% {transform:rotate(88deg)} 100% {transform:rotate(90deg)} } @media (prefers-reduced-motion:reduce){ .door-bar.sealing{animation:none;transform:rotate(90deg)} } .floors{display:flex;gap:4px;padding:5px 6px;border-top:1px solid #073e5f;background:var(--navy-2)} .floors .fl{flex:1;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; background:transparent;border:1px solid #073e5f;color:var(--blue-dim);padding:3px 0;cursor:pointer} .floors .fl:hover{border-color:var(--blue-lit);color:var(--blue-lit)} .floors .fl.on{border-color:var(--yellow);color:var(--yellow)} .floors.subdoors{flex-wrap:wrap} .floors.subdoors .fl{flex:1 1 auto;white-space:nowrap} .floors .fl.lk{opacity:.45;border-style:dashed} #viewCaption{margin-top:6px;font-size:13px} /* rooms react to the cursor — one rule serves the minimap and the enlarged map, and it re-takes automatically each time the map redraws (CSS :hover is live) */ svg g.room rect,svg g.room text{transition:stroke .1s ease,fill .1s ease,stroke-width .1s ease} svg g.room:hover rect{stroke:var(--yellow);stroke-width:2} svg g.room:hover text{fill:var(--yellow)} svg g.room:hover{filter:drop-shadow(0 0 3px rgba(255,214,74,.5))} /* a shut room reads red under the cursor instead of inviting yellow */ svg g.room[style*="not-allowed"]:hover rect{stroke:#cc6a55} svg g.room[style*="not-allowed"]:hover text{fill:#cc6a55} svg g.room[style*="not-allowed"]:hover{filter:drop-shadow(0 0 3px rgba(204,106,85,.45))} /* enlarge the map */ #view{position:relative} #mapExpand{position:absolute;top:6px;right:6px;z-index:6;background:rgba(0,20,32,.82); color:var(--yellow);border:1px solid #3c5a70;border-radius:4px;font-size:15px;line-height:1; padding:3px 7px;cursor:pointer;font-family:var(--mono)} #mapExpand:hover{border-color:var(--yellow)} #mapBig{position:fixed;inset:0;background:rgba(0,10,18,.93);display:none;z-index:9000; align-items:center;justify-content:center;padding:18px} #mapBig.on{display:flex} #mapBig .inner{position:relative;width:min(94vw,760px);max-height:92vh;overflow:auto; background:var(--navy-2);border:1px solid var(--blue);padding:14px 16px 16px; box-shadow:0 0 34px rgba(8,112,181,.22),inset 0 0 60px rgba(0,0,0,.34)} /* corner bolts, like the screws on the vendor terminal */ #mapBig .mb-bolt{position:absolute;width:9px;height:9px;border:1px solid #3c5a70;border-radius:50%; background:radial-gradient(circle at 50% 40%,#0a3550,#00121e)} #mapBig .mb-bolt.tl{top:7px;left:7px} #mapBig .mb-bolt.tr{top:7px;right:7px} #mapBig .mb-bolt.bl{bottom:7px;left:7px} #mapBig .mb-bolt.br{bottom:7px;right:7px} #mapBig.looking svg .room{cursor:default} #mapBig svg{width:100%;height:auto;display:block;cursor:pointer; border:1px solid #073e5f;background:#00243a} #mapBig .mb-head{display:flex;justify-content:space-between;align-items:baseline; color:var(--yellow);font-family:var(--mono);font-size:12px;letter-spacing:.2em; border-bottom:1px solid var(--blue);padding:0 2px 8px;margin-bottom:10px} #mapBig .mb-head .mb-sub{color:var(--blue-dim);letter-spacing:.14em;font-size:9.5px} #mapBig #mbClose{background:none;border:1px solid #3c5a70;color:#bfe;border-radius:3px; padding:4px 12px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em} #mapBig #mbClose:hover{border-color:var(--yellow);color:var(--yellow)} #mapBig .floors{margin-top:10px} /* legend: what the markers on the schematic mean */ #mapBig .mb-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:11px;padding-top:9px; border-top:1px solid #073e5f;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--blue-dim)} #mapBig .mb-legend .lg{display:flex;align-items:center;gap:6px} #mapBig .mb-legend .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} #mapBig .mb-legend .sq{position:relative;width:13px;height:10px;border:1px solid var(--yellow);flex:0 0 auto} #mapBig .mb-legend .sq i{position:absolute;left:1px;bottom:1px;width:3px;height:3px;border-radius:50%;background:var(--yellow)} #mapBig .mb-legend .num{color:var(--blue-lit);font-weight:600;min-width:12px;text-align:center;flex:0 0 auto} #mapBig .mb-foot{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#3c5a70;margin-top:8px;text-align:right} /* the counter, shown in the viewport */ .shopwrap{position:relative;width:100%;border:1px solid #073e5f;overflow:hidden} .shopwrap .shopbg{width:100%;height:auto;display:block;opacity:.5;filter:saturate(.8)} .shophead{position:absolute;top:0;left:0;right:0;padding:5px 8px;font-family:var(--mono); font-size:10px;letter-spacing:.12em;color:var(--yellow);background:linear-gradient(rgba(0,10,18,.85),rgba(0,10,18,0))} .shopgrid{position:absolute;inset:22px 8px 8px;display:grid;grid-template-columns:repeat(3,1fr); gap:6px;align-content:start;overflow:auto} @media(max-width:520px){.shopgrid{grid-template-columns:repeat(2,1fr)}} .shopcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px; background:rgba(0,16,26,.82);border:1px solid #0b3a57;border-radius:5px;cursor:pointer; color:#cfe;font-family:var(--mono);transition:transform .07s ease,border-color .12s ease,background .12s ease} .shopcard img{width:44px;height:44px;object-fit:contain} .shopcard .nm{font-size:10px;line-height:1.15;text-align:center} .shopcard .pr{font-size:9.5px;color:var(--blue-dim)} .shopcard:hover:not(:disabled){border-color:var(--yellow);background:rgba(255,245,107,.07)} .shopcard:active:not(:disabled){transform:scale(.96)} .shopcard.broke{opacity:.45;cursor:not-allowed} .shopcard.broke .pr{color:var(--alarm)} @media(prefers-reduced-motion:reduce){.shopcard{transition:none}.shopcard:active{transform:none}} /* the counter rendered INTO the vendor terminal: item rows that fill the painted AVAILABLE ITEMS table. Insets are % of the backdrop so the columns stay locked to the painted ITEM/STOCK/COST header at any width. #00223d matches the table fill and #014870/#0d3b59 the grid lines, so the thin painted rows the panel covers never show through as a double image. */ #sceneArt .vendorItems{position:absolute;inset:24.9% 57.2% 40.5% 2.2%;z-index:4; background:#00223d;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto} #sceneArt .vrow{flex:0 0 16.6%;box-sizing:border-box;display:grid; grid-template-columns:68.7% 22.9% 8.4%;align-items:center; border:0;border-bottom:1px solid #0d3b59;background:none;text-align:left; padding:0;margin:0;cursor:pointer;color:#cfe;font-family:var(--mono);transition:background .1s ease} #sceneArt .vrow:hover{background:rgba(255,245,107,.09)} #sceneArt .vrow.broke{cursor:not-allowed;color:#6d89a3} #sceneArt .v-item{display:flex;align-items:center;gap:6px;min-width:0;padding-left:8px;overflow:hidden} #sceneArt .v-ic{height:72%;max-height:30px;width:auto;object-fit:contain;flex:0 0 auto} #sceneArt .v-nm{font-size:11px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #sceneArt .v-stock{font-size:11px;text-align:center;color:#9fc0da} #sceneArt .v-cost{font-size:11px;text-align:right;padding-right:9px;color:var(--yellow)} #sceneArt .vrow.broke .v-cost{color:var(--alarm)} /* the hovered row drops its art + line into the empty DESCRIPTION box */ #sceneArt .vendorDesc{position:absolute;inset:70% 34.5% 22% 3.4%;z-index:4; display:flex;align-items:center;gap:10px;pointer-events:none;overflow:hidden; color:#bfe;font-family:var(--mono);font-size:11px;letter-spacing:.03em} #sceneArt .vendorDesc img{height:86%;max-height:66px;width:auto;object-fit:contain} #sceneArt .vendorDesc .vd-cost{color:var(--yellow)} /* YOUR CART column, the running TOTAL, and clickable BUY/SELL/EXIT hotspots over the painted terminal buttons. Insets are % of the backdrop — nudge to taste. */ #sceneArt .vendorCart{position:absolute;inset:24.9% 25% 40.5% 49.5%;z-index:4;background:#00223d; display:flex;flex-direction:column;overflow-y:auto} #sceneArt .vcrow{flex:0 0 16.6%;display:grid;grid-template-columns:72% 28%;align-items:center; border:0;border-bottom:1px solid #0d3b59;background:none;text-align:left;padding:0 8px;cursor:pointer; color:#cfe;font-family:var(--mono);font-size:11px} #sceneArt .vcrow:hover{background:rgba(255,107,107,.13)} #sceneArt .vc-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #sceneArt .vc-cost{text-align:right;color:var(--yellow)} #sceneArt .vc-empty{padding:8px;color:#6d89a3;font-family:var(--mono);font-size:10px} #sceneArt .vendorTotal{position:absolute;inset:66.5% 26% 27% 62%;z-index:4;color:var(--yellow); font-family:var(--mono);font-size:15px;text-align:right;pointer-events:none} #sceneArt .vendorTotal.over{color:var(--alarm)} #sceneArt .vbtn{position:absolute;z-index:5;background:transparent;border:0;border-radius:4px;cursor:pointer} #sceneArt .vbtn:hover{background:rgba(255,245,107,.14)} @media(max-width:760px){#sceneArt .v-nm,#sceneArt .v-stock,#sceneArt .v-cost,#sceneArt .vendorDesc{font-size:9px}} /* ---- the vendor terminal, built in code so the cart, total and description actually update. No JPG backdrop; the mascot + logo are the only art. ---- */ #sceneArt .vt{position:relative;background:var(--navy-2);border:1px solid #073e5f; padding:12px 14px 13px;font-family:var(--mono);color:var(--blue-lit);overflow:hidden} #sceneArt .vt-bolt{position:absolute;width:8px;height:8px;border:1px solid #3c5a70;border-radius:50%; background:radial-gradient(circle at 50% 40%,#0a3550,#00121e);z-index:3} #sceneArt .vt-bolt.tl{top:6px;left:6px}#sceneArt .vt-bolt.tr{top:6px;right:6px} #sceneArt .vt-bolt.bl{bottom:6px;left:6px}#sceneArt .vt-bolt.br{bottom:6px;right:6px} #sceneArt .vt-mascot{position:absolute;right:0;bottom:0;width:27%;max-width:200px;height:auto;opacity:.14; pointer-events:none;z-index:0;filter:saturate(.7)} #sceneArt .vt>*{position:relative;z-index:1} #sceneArt .vt-head{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--yellow); padding-bottom:8px;margin-bottom:10px} #sceneArt .vt-logo{height:30px;width:auto;flex:0 0 auto} #sceneArt .vt-title{flex:1;text-align:center;line-height:1.15} #sceneArt .vt-title b{color:var(--yellow);font-size:16px;letter-spacing:.14em;font-weight:600} #sceneArt .vt-title span{display:block;color:var(--blue-dim);font-size:8.5px;letter-spacing:.24em;margin-top:2px} #sceneArt .vt-vault{text-align:right;color:var(--blue);font-size:8px;letter-spacing:.14em;line-height:1.4;flex:0 0 auto} #sceneArt .vt-vault b{color:var(--blue-lit);font-size:11px;letter-spacing:.1em} #sceneArt .vt-body{display:grid;grid-template-columns:1.7fr 1.15fr;gap:12px} #sceneArt .vt-col{border:1px solid #0b3a57;background:rgba(0,20,32,.5);display:flex;flex-direction:column;min-height:0} #sceneArt .vt-cap{background:var(--blue);color:#00131f;font-size:10px;font-weight:600;letter-spacing:.16em;padding:4px 8px} #sceneArt .vt-colhead{display:flex;color:var(--blue);font-size:9px;letter-spacing:.14em;padding:5px 8px;border-bottom:1px solid #0b3a57} #sceneArt .vt-avail .vt-colhead span:nth-child(1),#sceneArt .vt-cart .vt-colhead span:nth-child(1){flex:1} #sceneArt .vt-avail .vt-colhead span:nth-child(2){width:40px;text-align:center} #sceneArt .vt-colhead span:last-child{width:34px;text-align:right} #sceneArt .vt-scroll{overflow-y:auto;max-height:224px} #sceneArt .vt-row{display:grid;align-items:center;gap:8px;padding:5px 8px;border:0;border-bottom:1px solid #08304a; background:none;text-align:left;color:var(--blue-lit);font-family:var(--mono);cursor:pointer;width:100%} #sceneArt .vt-avail .vt-row{grid-template-columns:1fr 40px 34px} #sceneArt .vt-cart .vt-row{grid-template-columns:1fr 34px} #sceneArt .vt-row:hover:not(.broke){background:rgba(255,245,107,.09)} #sceneArt .vt-row.incart{background:rgba(255,245,107,.13)} #sceneArt .vt-row.broke{cursor:not-allowed;color:#6d89a3} #sceneArt .vt-it{display:flex;align-items:center;gap:7px;min-width:0} #sceneArt .vt-ic{height:26px;width:26px;object-fit:contain;flex:0 0 auto} #sceneArt .vt-nm{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #sceneArt .vt-stk{font-size:11px;color:#9fc0da;text-align:center} #sceneArt .vt-cs{font-size:11px;color:var(--yellow);text-align:right} #sceneArt .vt-row.broke .vt-cs{color:var(--alarm)} #sceneArt .vt-x{color:var(--blue-dim);font-size:11px;flex:0 0 auto} #sceneArt .vt-empty{padding:12px 9px;color:var(--blue-dim);font-size:10.5px;letter-spacing:.05em;line-height:1.4} #sceneArt .vt-total{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline; padding:7px 9px;border-top:1px solid var(--blue)} #sceneArt .vt-total b{color:var(--yellow);font-size:11px;letter-spacing:.14em} #sceneArt .vt-sum{color:var(--yellow);font-size:14px}#sceneArt .vt-sum.over{color:var(--alarm)} #sceneArt .vt-foot{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:11px} #sceneArt .vt-desc{border:1px solid #0b3a57;background:rgba(0,20,32,.5);padding:6px 9px} #sceneArt .vt-dh{color:var(--blue);font-size:8.5px;letter-spacing:.16em;margin-bottom:5px} #sceneArt .vt-db{display:flex;align-items:center;gap:10px;color:var(--blue-lit);font-size:11px;line-height:1.35} #sceneArt .vt-db img{height:44px;width:44px;object-fit:contain;flex:0 0 auto} #sceneArt .vt-dcost{color:var(--yellow)} #sceneArt .vt-acts{display:flex;flex-direction:column;gap:7px;min-width:118px} #sceneArt .vt-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;background:none; border:1px solid var(--blue);color:var(--blue-lit);font-family:var(--mono);font-size:12px;letter-spacing:.12em; padding:7px 11px;cursor:pointer} #sceneArt .vt-btn:hover:not(:disabled){border-color:var(--yellow);color:var(--yellow)} #sceneArt .vt-btn:disabled{opacity:.4;cursor:not-allowed} #sceneArt .vt-chev{color:var(--blue-dim)} #sceneArt .vt-btn.buy:not(:disabled){border-color:var(--yellow);color:var(--yellow)} #sceneArt .vt-strip{display:flex;justify-content:space-between;color:#3c5a70;font-size:8px; letter-spacing:.14em;margin-top:9px;padding-top:7px;border-top:1px solid #073e5f} @media(max-width:620px){#sceneArt .vt-body,#sceneArt .vt-foot{grid-template-columns:1fr} #sceneArt .vt-mascot{display:none}#sceneArt .vt-title b{font-size:13px}} /* small heads cut from the standees are transparent; give them a wall behind */ img[src*="/faces/"]{background:radial-gradient(circle at 50% 40%,#1c3550,#0a1626)} /* ---- the end screen for the endings that are not the door (see showEndScreen) */ #ending{overflow-y:auto} #ending.plain .ed-door, #ending.plain .ed-glare{display:none} #ending.plain .ed-out{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%} #ending.plain #endStage{background:#05090d} #ending.good #endText{border-left-color:var(--yellow)} #ending.good #endText b{color:var(--yellow)} #endText p{margin:.6em 0 0} #ending.on{z-index:1000} /* where the real copy lives. Repacks rarely strip it, so a player who got the game somewhere else sees where it came from. */ #menu .origin{position:absolute;top:14px;right:18px;z-index:46;pointer-events:none;text-align:right; font:600 11px/1.5 var(--mono,monospace);letter-spacing:.22em;color:rgba(230,200,140,.62); text-shadow:0 1px 3px #000;background:rgba(4,6,10,.62);padding:6px 10px 5px;border-radius:3px; box-shadow:0 0 0 1px rgba(230,200,140,.12)} #menu .origin span{font-size:9px;letter-spacing:.16em;color:rgba(230,200,140,.42)} @media(max-width:600px){#menu .origin{top:8px;right:10px;font-size:9px}#menu .origin span{font-size:8px}} /* the reel deck footer: three buttons, a meter, the scrub, the counter and the lamps did not fit in the 220px column, so the counter and lamps ran out of the panel. The buttons take the first row and the meters wrap to a second. */ .deck-foot{flex-wrap:wrap;row-gap:5px} .deck-foot .transport{flex:1 1 auto} #reelDeck.reel-max .deck-foot{flex-wrap:nowrap} #reelDeck.reel-max .deck-foot .transport{flex:0 0 auto} /* the adult moments in a conversation: marked so they can't be missed */ #probes button.adult{border-color:#ff8fb1;color:#ffd1df;background:rgba(255,143,177,.08)} #probes button.adult:hover{background:rgba(255,143,177,.18)} #probes button.adult .adult-tag{display:inline-block;margin-right:8px;padding:0 5px;border-radius:2px; font-size:.75em;letter-spacing:.1em;color:#041420;background:#ff8fb1;vertical-align:1px} /* §57 action icons: a small line icon in front of each action's label */ .ico{display:inline-flex;width:15px;height:15px;margin-right:8px;vertical-align:-3px;flex:0 0 auto;opacity:.9} .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #acts button .ico{color:var(--yellow)} #acts button.shut .ico{color:var(--blue-dim)} #acts button.grp.back .ico{display:none} #probes button.cat .ico{color:var(--blue-lit);width:13px;height:13px;margin-right:7px} #acts button .ico-heart,#probes button .ico-heart{color:#ff8fa8} #probes button .ico-bolt{color:var(--alarm)} /* §58 a baked woman cut out of her plate: she is already lit by the room */ #sceneArt .stbed.stcut{filter:none} /* clarity pass: away from post, folded stocks, purse */ .hs-state.away{color:#ff8a6b} .hs-state.away .onblk{color:#041420;background:#ff8a6b;padding:0 6px} .stmini{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--blue-lit);padding:2px 0 4px} .stmini b{font-weight:500} .stmini b.lo{color:#ff8a6b} #purse{letter-spacing:.12em}