/* Wolves in the Flock: the website.
   It wears the game's two personalities (src/styles/main.css): sharp and sinister by night (red hairlines, thin
   wonky Fraunces, corner brackets), soft and bouncy by day (cream panels, chunky buttons). */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-full.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-full-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --night:#0b0910;--night-2:#140f1c;--ink:#ebe2d2;--ink-soft:#a196a8;--red:#e0213a;--hair:rgba(224,33,58,.4);
  --gold:#ffb347;--lamp:#ffd28a;--lilac:#b9adc4;
  --cream:#fffaf1;--day-ink:#3d3550;--day-soft:#8a7f99;--pink:#ff7a8a;--sky:#5cc2ff;--butter:#ffc75f;--mint:#7be0a6;--edge:#e9dcc8;
  --bounce:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.16,1,.3,1);
  --night-shadow:0 0 0 1px rgba(224,33,58,.35),0 18px 60px rgba(0,0,0,.75),0 0 50px rgba(224,33,58,.08);
  --serif:"Fraunces",Georgia,serif;--sans:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;overflow-x:hidden;background:var(--night);color:var(--ink);font:18px/1.6 var(--sans)}
img{max-width:100%}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:0 0 .5em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button{font:inherit;color:inherit}

/* the two personalities */
.night h2{font-weight:300;font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;letter-spacing:.01em;font-size:clamp(2rem,5vw,3.4rem)}
.day h2{font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 96;font-size:clamp(1.9rem,4.4vw,2.9rem);color:var(--day-ink)}
.lede{max-width:36em;margin:0 auto 1.6em;color:var(--ink-soft)}
section{padding:96px 0;position:relative}
.sec-head{text-align:center;margin-bottom:40px}

/* ------------------------------------------------------------------ buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;font:400 1.1rem/1 var(--serif);font-variation-settings:"WONK" 1;letter-spacing:.06em;text-decoration:none;color:var(--ink);border:1px solid rgba(235,226,210,.35);background:rgba(255,255,255,.03);transition:transform .2s var(--out),background .2s,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(255,179,71,.1);box-shadow:0 0 24px rgba(255,179,71,.25)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:600;box-shadow:0 0 0 0 rgba(224,33,58,.55),0 0 28px rgba(224,33,58,.45);animation:beckon 3s 2.2s infinite}
.btn.primary:hover{background:#f0304a;border-color:#f0304a;box-shadow:0 0 36px rgba(224,33,58,.7)}
@keyframes beckon{70%{box-shadow:0 0 0 14px rgba(224,33,58,0),0 0 28px rgba(224,33,58,.45)}100%{box-shadow:0 0 0 0 rgba(224,33,58,0),0 0 28px rgba(224,33,58,.45)}}
.btn-sm{padding:9px 16px;font-size:.95rem}

/* ------------------------------------------------------------------ the bar that follows you down */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:10px;padding:10px 20px;background:rgba(9,7,13,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);transform:translateY(-110%);transition:transform .45s var(--out)}
.bar.show{transform:none}
.bar-logo{margin-right:auto;display:flex}
.bar-logo img{height:28px;width:auto}
.bar .btn.primary{animation:none}
@media(max-width:440px){.bar-logo{display:none}.bar{justify-content:center}}

/* ------------------------------------------------------------------ the hero: your pointer is the lantern */
.hero{position:relative;min-height:clamp(600px,94vh,900px);display:flex;align-items:center;text-align:center;overflow:hidden;padding:90px 0 120px;--lx:47%;--ly:80%;touch-action:pan-y}
.hero-bg{position:absolute;inset:0;background:url("img/hero.jpg") center 30%/cover var(--night);filter:brightness(.3) saturate(.65)}
.hero-bg.lit{filter:brightness(1.75) saturate(1.2) sepia(.18);
  -webkit-mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.8) 90px,transparent 270px);
  mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.8) 90px,transparent 270px)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 300px at var(--lx) var(--ly),rgba(255,184,100,.24),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(11,9,16,.5),transparent 25%,transparent 60%,var(--night)),radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(11,9,16,.6))}
.stars{position:absolute;inset:0 0 45%;pointer-events:none;opacity:.8;
  background-image:radial-gradient(1.5px 1.5px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 28% 42%,#fff,transparent),radial-gradient(2px 2px at 44% 12%,#ffd28a,transparent),radial-gradient(1px 1px at 63% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 50%,#fff,transparent),radial-gradient(1px 1px at 90% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 6% 60%,#fff,transparent),radial-gradient(1px 1px at 55% 65%,#fff,transparent);
  animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.3}to{opacity:.9}}
.treeline{position:absolute;inset:0;z-index:1;pointer-events:none}
.peepers{position:absolute;width:22px;height:7px;transition:opacity .35s,transform .35s var(--out)}
.peepers::before,.peepers::after{content:"";position:absolute;top:0;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px rgba(255,179,71,.6);animation:blink var(--blink,6s) infinite}
.peepers::before{left:0}.peepers::after{right:0}
.peepers.red::before,.peepers.red::after{background:#ff3a52;box-shadow:0 0 10px 2px rgba(255,40,70,.6)}
.peepers.shy{opacity:0;transform:translateY(6px) scale(.5)}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.hero-in{position:relative;z-index:2;pointer-events:none}
.hero-in a{pointer-events:auto}
.hero h1{margin:0 auto;max-width:900px}
.title{display:block;width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(224,33,58,.35)) drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.tag{color:var(--gold);font:400 1rem var(--serif);letter-spacing:.32em;text-transform:uppercase;margin:0 0 1.3em}
.hero .lede{color:var(--ink);text-shadow:0 2px 12px rgba(0,0,0,.9);margin-top:1.4em}
.price{margin:24px 0 0;color:var(--ink-soft);font:300 1.05rem var(--serif);font-variation-settings:"WONK" 1;letter-spacing:.04em}
.hero .tag,.hero .title,.hero .lede,.hero .btns,.hero .price{animation:rise 1.2s var(--out) both}
.hero .tag{animation-delay:.2s}.hero .title{animation-delay:.4s;animation-duration:1.6s}
.hero .lede,.hero .btns{animation-delay:.9s}.hero .price{animation-delay:1.2s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.knocking{position:absolute;z-index:2;bottom:28px;left:50%;transform:translateX(-50%);color:var(--lilac);text-decoration:none;font:italic 300 1rem var(--serif);letter-spacing:.06em;display:flex;flex-direction:column;align-items:center;gap:8px}
.knocking span{width:1px;height:34px;background:linear-gradient(var(--lilac),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ------------------------------------------------------------------ the game's clock panel */
.clock{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:8px 18px;font:300 1.35rem/1 var(--serif);font-variation-settings:"WONK" 1,"opsz" 72}
.clock small{font-size:.65em;color:var(--ink-soft)}
.night .clock{background:rgba(9,7,13,.9);box-shadow:var(--night-shadow)}
.clock i{width:12px;height:12px;margin-left:6px;transform:rotate(45deg);border:1px solid var(--hair)}
.clock i:first-of-type{border-color:var(--gold);box-shadow:0 0 8px rgba(255,179,71,.6);margin-left:12px}
.day .clock{background:var(--cream);color:var(--day-ink);border-radius:999px;font-weight:800;font-variation-settings:"SOFT" 100;box-shadow:0 8px 24px rgba(90,60,130,.15);font-size:1.15rem}
.day .clock small{color:var(--day-soft)}

/* ------------------------------------------------------------------ night sections */
.gate-sec{background:linear-gradient(var(--night),#170f24 50%,#1d1230)}
.gate-sec .lede{color:var(--ink-soft)}

/* the gate */
.knock{max-width:880px;margin:0 auto}
.stage{position:relative;aspect-ratio:2/1;overflow:hidden;background:linear-gradient(#1b1034,#2c1745 55%,#140d20);box-shadow:var(--night-shadow);--glow:.25}
.stage>svg{position:absolute;inset:0;width:100%;height:100%}
.sky .hill.far{fill:#1d1532}.sky .hill{fill:#130e1f}.sky .lane{fill:#1c1528}
.sky .far-eyes{fill:var(--gold);animation:blinkfar 7s infinite}
@keyframes blinkfar{0%,90%,100%{opacity:1}92%,94%{opacity:0}}
.sky .ring{transform-box:view-box;transform-origin:600px 110px;animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.moon{filter:drop-shadow(0 0 18px rgba(233,228,242,.45))}
.visitor{position:absolute;left:50%;bottom:12%;width:min(34%,270px);transform:translateX(-50%);opacity:0;filter:brightness(.4) saturate(.55);transition:filter .6s,opacity .5s,transform .6s var(--out)}
.stage.here .visitor{opacity:1}
.stage.lit .visitor{filter:none}
.stage.in .visitor{transform:translateX(-50%) translateY(14%) scale(1.35);opacity:0;transition:transform 1.4s ease-in .5s,opacity .6s 1.3s}
.stage.off .visitor{transform:translateX(-230%) scaleX(-1);opacity:0;transition:transform 1.6s ease-in,opacity .8s .8s}
.fence .post{fill:#4e3626}.fence .post-cap{fill:#644530}
.fence .leaf rect{fill:#6b4a33}.fence .leaf path{stroke:#5a3e2b}
.fence{filter:brightness(.55);transition:filter .6s}
.stage.lit .fence{filter:brightness(1)}
.fence .leaf{transform-box:view-box;transition:transform 1s var(--out)}
.fence .leaf.l{transform-origin:184px 320px}.fence .leaf.r{transform-origin:616px 320px}
.stage.in .fence .leaf{transform:scaleX(.12)}
.stage.knocking .fence{animation:knock 1.2s steps(1)}
@keyframes knock{0%,30%,60%{transform:translateX(0)}10%,40%,70%{transform:translateX(3px)}20%,50%,80%{transform:translateX(-2px)}}
.lamp{position:absolute;left:9%;bottom:8%;width:16px;height:22px;transition:bottom .6s var(--out)}
.lamp i{position:absolute;inset:0;border-radius:6px 6px 8px 8px;background:var(--lamp);box-shadow:0 0 18px 6px rgba(255,200,120,.6),0 0 70px 20px rgba(255,170,80,.25)}
.lamp::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:14px;background:#8a7a6a}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 85%,rgba(255,190,110,var(--glow)),transparent 45%);transition:background .6s}
.stage.lit{--glow:.5}
.stage.lit .lamp{bottom:36%}
.stage.lit::after{background:radial-gradient(circle at 30% 55%,rgba(255,190,110,.32),transparent 60%)}
.caption{position:absolute;left:0;right:0;top:12px;margin:0;padding:0 16px;text-align:center;font:italic 300 1rem var(--serif);color:var(--lilac);text-shadow:0 2px 8px #000}

/* the visitor (site/js/sheep.js) */
.sheep{display:block;width:100%;height:auto;overflow:visible}
.sheep .shadow{fill:rgba(0,0,0,.35)}
.sheep .fig{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.018)}}
.sheep .eye{fill:#f6c945;transition:fill .4s}
.sheep .eyes{transform-box:fill-box;transform-origin:center;animation:blinkeyes 5.5s infinite}
@keyframes blinkeyes{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.sheep .tell,.sheep .fangs,.sheep .wolfears,.sheep .wolfbody,.sheep .skin{opacity:0;transition:opacity .5s,transform .5s var(--bounce)}
.sheep .wolfears{transform:translateY(16px)}
.lit .sheep .tell{opacity:1}
.reveal .is-wolf .wolfears{opacity:1;transform:none}
.reveal .is-wolf .fangs{opacity:1}
.reveal .is-wolf .eye{fill:#ff3048;filter:drop-shadow(0 0 4px #ff3048)}
.sheep .wool{transform-box:fill-box;transform-origin:50% 60%;transition:transform .6s var(--bounce),opacity .5s}
.shorn .sheep:not(.is-wolf) .skin{opacity:1}
.shorn .sheep:not(.is-wolf) .wool{transform:scale(.45)}
.shorn .is-wolf .wool{opacity:0;transform:scale(1.25)}
.shorn .is-wolf .wolfbody{opacity:1}

/* the dialogue box, by night */
.dlg{position:relative}
.night-dlg{z-index:2;width:92%;margin:-52px auto 0;padding:22px 26px 18px;background:rgba(9,7,13,.93);box-shadow:var(--night-shadow);min-height:110px}
.night-dlg::before,.night-dlg::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--red);pointer-events:none}
.night-dlg::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.night-dlg::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.dlg-speaker{position:absolute;top:-15px;left:22px;padding:3px 14px}
.dlg-speaker[hidden]{display:none}
.night-dlg .dlg-speaker{background:#0b080e;color:var(--red);border:1px solid var(--red);font:400 15px var(--serif);font-variant:small-caps;letter-spacing:.18em;box-shadow:0 0 18px rgba(224,33,58,.45)}
.dlg-text{margin:0;min-height:1.5em}
.night-dlg .dlg-text{font:350 1.3rem/1.5 var(--serif);font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 24;letter-spacing:.01em}
.dlg-text em{color:var(--lilac)}
.day-dlg .dlg-text em{color:var(--day-soft)}
.typing .dlg-text::after{content:"";display:inline-block;width:.5em;height:2px;margin-left:2px;background:currentColor;animation:caret .5s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.dlg.pop{animation:pop .35s var(--out)}
@keyframes pop{from{transform:translateY(6px);opacity:.6}}

/* questions and choices (the game's .opt) */
.asks{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px 0 12px;color:var(--ink-soft);font:italic 300 1rem var(--serif)}
.pips{display:inline-flex;gap:8px}
.pips i{width:11px;height:11px;transform:rotate(45deg);border:1px solid var(--gold);background:var(--gold);box-shadow:0 0 8px rgba(255,179,71,.6);transition:all .3s}
.pips i.used{background:transparent;box-shadow:none;border-color:rgba(255,179,71,.35)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;padding:11px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(235,226,210,.14);color:var(--ink);font:400 1.02rem/1.25 var(--serif);letter-spacing:.02em;transition:transform .18s var(--bounce),background .2s,border-color .2s,opacity .2s;animation:optIn .4s var(--out) both}
.opt:nth-child(2){animation-delay:.04s}.opt:nth-child(3){animation-delay:.08s}.opt:nth-child(4){animation-delay:.12s}.opt:nth-child(5){animation-delay:.16s}.opt:nth-child(6){animation-delay:.2s}
@keyframes optIn{from{opacity:0;transform:translateY(8px)}}
.opt:hover:not(:disabled){background:rgba(255,179,71,.14);border-color:var(--gold);color:#fff4e0;transform:translateX(4px)}
.opt:disabled{opacity:.35;cursor:default}
.opt.asked{text-decoration:line-through;text-decoration-color:var(--red)}
.opt .key{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border:1px solid rgba(235,226,210,.2);color:var(--gold);font:800 12px var(--sans)}
.opt.action{background:rgba(159,178,255,.08);border-color:rgba(159,178,255,.5);color:#dfe5ff}
.opt.danger{background:rgba(224,33,58,.1);border-color:rgba(224,33,58,.6);color:#ffc9cf}
.verdicts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.verdicts .opt{justify-content:center;min-width:190px;font-size:1.1rem}
.lamp-btn{border-color:rgba(255,179,71,.5);color:var(--lamp)}
.lamp-btn::before{content:"";width:9px;height:12px;border-radius:3px 3px 4px 4px;background:var(--lamp);box-shadow:0 0 10px rgba(255,200,120,.8)}
.lamp-btn[aria-pressed=true]{background:rgba(255,179,71,.16);border-color:var(--gold)}
.knock.busy .opts .opt:not(:disabled){cursor:progress}
.result{margin:22px auto 0;max-width:640px;text-align:center;padding:20px 22px;background:rgba(224,33,58,.08);box-shadow:0 0 0 1px rgba(224,33,58,.45);animation:pop .4s var(--out)}
.result.good{background:rgba(255,179,71,.08);box-shadow:0 0 0 1px rgba(255,179,71,.45)}
.verdict{margin:0 0 14px;font:300 1.3rem/1.4 var(--serif);font-variation-settings:"WONK" 1}
.verdict b{font-weight:600;color:#ff8a98}
.result.good .verdict b{color:var(--gold)}
.result .opt{margin:0 auto;justify-content:center}
.more{margin:16px 0 0;color:var(--ink-soft);font-size:.95rem}
.pen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:22px;min-height:30px;color:var(--ink-soft);font-size:.9rem}
.pen-label{font:italic 300 1rem var(--serif);margin-right:4px}
.pen-sheep{position:relative;width:30px;height:22px;background:radial-gradient(circle at 30% 60%,var(--wool) 0 7px,transparent 7.5px),radial-gradient(circle at 70% 60%,var(--wool) 0 7px,transparent 7.5px),radial-gradient(circle at 50% 38%,var(--wool) 0 8px,transparent 8.5px);animation:pop .4s var(--bounce)}
.pen-sheep::after{content:"";position:absolute;left:11px;top:9px;width:3px;height:3px;border-radius:50%;background:#1a1420;box-shadow:5px 0 #1a1420}
.pen-sheep.wolf::after{background:#ff3048;box-shadow:5px 0 #ff3048,0 0 6px #ff3048}
.pen-away{margin-left:14px}

.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:72px}
.note{position:relative;padding:22px 22px 18px;background:rgba(9,7,13,.6);box-shadow:0 0 0 1px rgba(235,226,210,.08)}
.note::before{content:"";position:absolute;top:-5px;left:-5px;width:14px;height:14px;border:1px solid var(--red);border-right:0;border-bottom:0}
.note h3{font-weight:400;font-variation-settings:"WONK" 1;font-size:1.25rem;color:var(--gold)}
.note p{margin:0;color:var(--ink-soft);font-size:.98rem}

/* ------------------------------------------------------------------ dawn and dusk */
.horizon{position:relative;height:clamp(240px,40vh,380px);overflow:hidden;display:grid;place-items:center;--p:.5}
.horizon p{position:relative;z-index:2;margin:0;font:300 clamp(1.3rem,3vw,1.9rem) var(--serif);font-variation-settings:"WONK" 1;letter-spacing:.04em}
.horizon::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-60px;height:140px;border-radius:50% 50% 0 0;z-index:1}
.sun{position:absolute;left:24%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle,#fff6d6,#ffd36b 60%,#ffb347);box-shadow:0 0 60px 20px rgba(255,200,100,.45)}
.dawn{background:linear-gradient(#1d1230,#5a2a5c 30%,#e07a7e 60%,#ffd29a 80%,#bfe6ff)}
.dawn .sun{top:calc(95% - var(--p) * 75%)}
.dawn::after{background:#9bd77a}
.dawn p{color:#3d2a4a}
.dusk{background:linear-gradient(#cdeeb0,#ffd29a 22%,#e07a7e 50%,#5a2a5c 75%,var(--night))}
.dusk .sun{left:76%;top:calc(5% + var(--p) * 85%)}
.dusk::after{background:var(--night)}
.dusk p{color:#fff3e6;text-shadow:0 2px 12px rgba(60,20,40,.5)}

/* ------------------------------------------------------------------ by day */
.paddock-sec{background:linear-gradient(#9bd77a,#c8eba6 30%,#e9f6d6 70%,#cdeeb0);color:var(--day-ink);font-weight:500}
.two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.copy p{color:#5a4f6b}
.copy b{color:var(--day-ink)}
.paddock{display:grid;grid-template-columns:minmax(0,1fr) 250px;background:var(--cream);border-radius:22px;box-shadow:0 18px 50px rgba(70,90,40,.25),0 2px 0 #fff inset;overflow:hidden}
.field{position:relative;min-height:420px;background:linear-gradient(#a9e0ff 0 32%,#88d066 32%,#62b84a);overflow:hidden}
.field::before{content:"";position:absolute;left:0;right:0;top:27%;height:40px;background:repeating-linear-gradient(90deg,transparent 0 46px,#e8dcc6 46px 54px),linear-gradient(transparent 12px,#e8dcc6 12px 17px,transparent 17px 28px,#e8dcc6 28px 33px,transparent 33px)}
.field::after{content:"";position:absolute;left:14%;top:9%;width:70px;height:22px;border-radius:20px;background:#fff;box-shadow:30px -10px 0 4px #fff,60px 0 0 #fff;opacity:.9;animation:drift 30s linear infinite}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(320px)}}
.field .visitor{opacity:1;filter:none;width:min(80%,300px);bottom:6%;transition:transform 1.1s cubic-bezier(.5,-.3,.7,.4),opacity .6s .5s}
.field.hop .visitor{animation:hop .5s var(--bounce)}
@keyframes hop{40%{transform:translateX(-50%) translateY(-8%)}}
.field.launch .visitor{transform:translateX(-50%) translateY(-170%) rotate(540deg) scale(.25);opacity:0}
.field[data-mark=trust] .visitor::after,.field[data-mark=suspect] .visitor::after{content:"Trust";position:absolute;top:2%;right:4%;padding:2px 10px;border-radius:999px;background:var(--butter);color:#4a3200;font:900 12px var(--sans);letter-spacing:.04em}
.field[data-mark=suspect] .visitor::after{content:"Suspect";background:var(--pink);color:#fff}
.day-dlg{position:absolute;left:12px;right:12px;top:20px;z-index:3;padding:18px 18px 14px;background:rgba(255,250,241,.97);border-radius:18px;box-shadow:0 10px 28px rgba(90,60,130,.2);opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--bounce);pointer-events:none}
.day-dlg.show{opacity:1;transform:none;pointer-events:auto}
.day-dlg .dlg-speaker{top:-11px;left:16px;padding:2px 12px;border-radius:999px;background:var(--pink);color:#fff;font:900 13px var(--sans);letter-spacing:.04em;box-shadow:0 4px 12px rgba(255,122,138,.35)}
.day-dlg .dlg-text{font:700 1.05rem/1.45 var(--sans);color:var(--day-ink)}
.inspect{padding:22px 18px;display:flex;flex-direction:column;gap:10px}
.inspect .nm{margin:0;font-weight:800;font-variation-settings:"SOFT" 100;font-size:1.6rem;color:var(--day-ink)}
.inspect .sub{margin:-8px 0 0;color:var(--day-soft);font-size:.9rem}
.hearts{display:flex;align-items:center;gap:3px;margin:0}
.hearts i{font-style:normal;color:#e6dfe9;font-size:1.05rem;transition:color .3s,transform .3s var(--bounce)}
.hearts i::before{content:"♥"}
.hearts i.on{color:var(--pink);transform:scale(1.1)}
.hearts span{margin-left:8px;font:900 .75rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--day-soft)}
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mark{padding:6px 2px;border:0;border-radius:10px;background:#f3ecdf;color:var(--day-soft);font:800 .82rem var(--sans);cursor:pointer;transition:all .2s var(--bounce)}
.mark[aria-pressed=true][data-mark=trust]{background:var(--butter);color:#4a3200}
.mark[aria-pressed=true][data-mark=unsure]{background:var(--sky);color:#fff}
.mark[aria-pressed=true][data-mark=suspect]{background:var(--pink);color:#fff}
.acts{display:flex;flex-direction:column;gap:7px}
.act{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;text-align:left;padding:9px 12px;border:0;border-radius:14px;background:#fff;color:var(--day-ink);box-shadow:0 3px 0 var(--edge);font:800 .98rem var(--sans);cursor:pointer;transition:transform .18s var(--bounce),background .2s,box-shadow .2s}
.act small{grid-column:2;font-weight:600;font-size:.78rem;color:var(--day-soft)}
.act:hover:not(:disabled){transform:translateY(-2px);background:#fff1dc}
.act:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.act:disabled{opacity:.45;cursor:default}
.act .key{grid-row:span 2;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#fff1dc;color:var(--day-soft);font-size:12px;font-weight:900}
.act.moon-act{background:#2a2340;color:#fff;box-shadow:0 3px 0 #120e1f}
.act.moon-act small{color:#b8afd0}
.act.moon-act .key{background:rgba(255,255,255,.12);color:#fff}
.act.moon-act:hover:not(:disabled){background:#3a3158}
.act.next{display:block;text-align:center;background:var(--pink);color:#fff;box-shadow:0 3px 0 #e05a6c}
.act.next:hover{background:#ff8d9b}
.act.next[hidden]{display:none}
.truth{margin:2px 0 0;padding:10px 12px;border-radius:14px;background:#fff1dc;font-size:.92rem;line-height:1.4;color:var(--day-ink);animation:pop .4s var(--bounce)}

/* ------------------------------------------------------------------ calamities */
.trouble-sec{background:var(--night)}
.trouble{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.trouble li{display:flex;flex-direction:column;gap:4px;padding:18px 16px;background:rgba(40,14,22,.45);box-shadow:0 0 0 1px rgba(224,33,58,.3);transition:transform .25s var(--out),box-shadow .25s}
.trouble li:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--red),0 0 30px rgba(224,33,58,.25)}
.trouble svg{width:30px;height:30px;margin-bottom:6px;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(224,33,58,.6))}
.trouble b{font:400 1.15rem var(--serif);font-variation-settings:"WONK" 1;letter-spacing:.03em}
.trouble span{color:var(--ink-soft);font-size:.92rem;line-height:1.45}

/* ------------------------------------------------------------------ the moons */
.moons-sec{background:radial-gradient(ellipse at 50% 100%,#2a1640,var(--night) 70%)}
.moons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.moon-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 12px 20px;text-align:center;background:rgba(9,7,13,.55);box-shadow:0 0 0 1px rgba(235,226,210,.08);cursor:pointer;transition:box-shadow .25s,transform .25s var(--out)}
.moon-card:hover,.moon-card:focus-visible{box-shadow:0 0 0 1px var(--hair);transform:translateY(-4px)}
.moon-ico{position:relative;width:62px;height:62px;border-radius:50%;background:#ece7f4;overflow:hidden;box-shadow:0 0 26px rgba(236,231,244,.35);margin-bottom:6px}
.moon-ico::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:#16111f;transform:translateX(calc(var(--phase,0) * -200%))}
.wane .moon-ico::after{transform:translateX(calc(var(--phase,0) * 200%))}
.red .moon-ico{background:radial-gradient(circle at 40% 40%,#ff8a7a,#c8102e);box-shadow:0 0 34px rgba(255,40,60,.6)}
.new .moon-ico{box-shadow:inset 0 0 0 1px rgba(236,231,244,.25)}
.moon-card b{font:400 1.2rem var(--serif);font-variation-settings:"WONK" 1}
.tease{color:var(--ink-soft);font-size:.92rem;line-height:1.4;filter:blur(6px);user-select:none;transition:filter .5s}
.moon-card.peeked .tease,.moon-card:hover .tease,.moon-card:focus-visible .tease{filter:none}
.moon-card small{color:var(--gold);font:italic 300 .85rem var(--serif)}
.peek-hint{margin:22px 0 0;text-align:center;color:var(--ink-soft);font:italic 300 .95rem var(--serif)}

/* ------------------------------------------------------------------ screenshots */
.shots-sec{background:var(--night)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shots a{display:block;overflow:hidden;box-shadow:0 0 0 1px rgba(235,226,210,.1);transition:box-shadow .25s}
.shots a.big{grid-column:span 2;grid-row:span 2}
.shots img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--out),filter .3s;filter:saturate(.9)}
.shots a:hover{box-shadow:0 0 0 1px var(--gold),0 0 30px rgba(255,179,71,.2)}
.shots a:hover img{transform:scale(1.04);filter:none}
.viewer{padding:0;border:0;background:transparent;max-width:min(1400px,96vw);max-height:96vh;overflow:visible;color:var(--ink)}
.viewer::backdrop{background:rgba(5,3,8,.93)}
.viewer figure{margin:0}
.viewer img{display:block;max-width:min(1400px,96vw);max-height:84vh;width:auto;height:auto;box-shadow:var(--night-shadow)}
.viewer figcaption{margin-top:12px;text-align:center;font:italic 300 1rem var(--serif);color:var(--lilac)}
.viewer button{position:absolute;width:48px;height:48px;border:1px solid var(--hair);background:rgba(9,7,13,.85);font-size:1.8rem;line-height:1;cursor:pointer}
.viewer button:hover{border-color:var(--gold);color:var(--gold)}
.viewer .close{top:-56px;right:0}
.viewer .prev{left:8px;top:calc(42vh - 24px)}
.viewer .next{right:8px;top:calc(42vh - 24px)}

/* ------------------------------------------------------------------ the last word */
.band{text-align:center;padding:130px 0;background:url("img/band-moon.jpg") center 25%/cover}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--night),rgba(11,9,16,.6) 30%,rgba(11,9,16,.6) 70%,var(--night))}
.band .wrap{position:relative}
.band h2{font-size:clamp(2.4rem,7vw,4.6rem);text-shadow:0 0 40px rgba(224,33,58,.5)}
.band .lede{color:var(--ink)}
.tv{margin:14px 0 0;font-size:.95rem}
.tv a{color:var(--lilac)}

footer{padding:40px 0 64px;border-top:1px solid var(--hair);color:var(--ink-soft);font-size:.9rem;text-align:center}
footer p{margin:.4em 0}
footer .links a{margin:0 10px}

/* ------------------------------------------------------------------ the privacy and terms pages */
.doc{padding:56px 20px;max-width:760px}
.doc h1{font-size:2.2rem;font-weight:400;font-variation-settings:"WONK" 1}
.doc h2{font-size:1.4rem;font-weight:400;margin-top:1.8em;color:var(--gold)}
.doc .back{display:inline-block;margin-bottom:20px}

/* ------------------------------------------------------------------ smaller screens */
@media(max-width:960px){
  .two{grid-template-columns:1fr;gap:32px}
  .copy{text-align:center}
  .trouble{grid-template-columns:repeat(3,1fr)}
  .moons{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  section{padding:72px 0}
  .opts{grid-template-columns:1fr 1fr}
  .notes{grid-template-columns:1fr;gap:16px;margin-top:48px}
  .stage{aspect-ratio:4/3}
  .visitor{width:46%}
  .night-dlg{width:96%;padding:20px 16px 14px;margin-top:-36px}
  .night-dlg .dlg-text{font-size:1.12rem}
  .verdicts .opt{min-width:0;flex:1 1 40%}
  .lamp-btn{flex-basis:100%!important}
  .paddock{grid-template-columns:1fr}
  .field{min-height:330px}
  .acts{display:grid;grid-template-columns:1fr 1fr}
  .act.moon-act{grid-column:span 2}
  .act small{display:none}
  .trouble{grid-template-columns:1fr 1fr}
  .trouble li:last-child{grid-column:span 2}
  .moons{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr 1fr}
  .viewer .close{top:auto;bottom:-58px;right:calc(50% - 24px)}
  .viewer .prev,.viewer .next{top:auto;bottom:-58px}
  .hero{min-height:88vh}
  .stars{inset:0 0 60%}
}
@media(max-width:400px){
  .opt{font-size:.95rem;padding:10px}
  .opt .key{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important}
  html{scroll-behavior:auto}
}