@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,800;0,900;1,800;1,900&family=Space+Mono:wght@400;700&display=swap');
:root{--cream:#f0e9d5;--amber:#e9b45b;--ink:#171813;--mono:'Space Mono',monospace;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ink);color:var(--cream)}body{height:100svh;min-height:640px;overflow:hidden;font-family:var(--mono)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--amber);outline-offset:7px}button:hover{color:var(--amber)}button:disabled{cursor:wait}[hidden]{display:none!important}.world{position:fixed;inset:-3%;z-index:0;transform:translate(var(--px,0px),var(--py,0px)) scale(1.02);transition:transform 1.8s cubic-bezier(.2,.65,.2,1);will-change:transform}.world>img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:saturate(.72) brightness(.7)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#080d0bcc,#0b100d55 43%,transparent 75%),linear-gradient(0deg,#0b0e0cdd,transparent 40%,#070b0c66)}.grain{pointer-events:none;position:fixed;inset:0;z-index:9;opacity:.17;background:repeating-linear-gradient(transparent 0px,transparent 2px,#080908 3px,transparent 4px)}header{position:absolute;z-index:10;left:4%;right:4%;top:30px;display:flex;align-items:flex-start;justify-content:space-between}.brand{border:0;background:none;padding:0;font:italic 900 42px/.8 var(--display);letter-spacing:-1px;text-align:left;text-shadow:2px 3px #161917}.brand span{display:block;margin-top:12px;font:12px var(--mono);letter-spacing:2px}.sound{background:#10151180;border:1px solid #e5dec13d;font-size:12px;padding:10px 13px;letter-spacing:1px}.sound span{color:var(--amber)}main{position:relative;height:100%;z-index:2}.intro,.landing{height:100%;position:relative}.intro{display:flex;flex-direction:column;justify-content:center;padding:100px 9% 95px}.title-block{margin-top:-3vh}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:700;color:var(--amber)}h1{font:italic 900 clamp(125px,19vw,300px)/.8 var(--display);letter-spacing:-.03em;margin:12px 0 24px;color:var(--cream);text-shadow:2px 2px #a49779,5px 6px #605746,9px 11px #191d18;transform:rotate(-4deg);transform-origin:left center;width:max-content}.subtitle{font-size:16px;line-height:1.7;color:#d0ccbd;margin-left:5px}.start-wrap{margin-top:35px;width:max-content}.start{font:bold clamp(22px,2.7vw,36px) var(--mono);letter-spacing:4px;background:none;border:0;padding:12px 0;text-shadow:2px 3px #111;display:flex;align-items:center;gap:20px}.start span{font-size:23px;color:var(--amber);animation:cursor 1.3s steps(2,end) infinite}.start-wrap>p{font-size:12px;letter-spacing:1px;color:#b5b7a8;padding-left:43px}.corner-note{position:absolute;right:4%;bottom:110px;font-size:12px;writing-mode:vertical-rl;letter-spacing:3px;color:#b4b6a3}footer{position:absolute;bottom:25px;left:4%;right:4%;display:flex;justify-content:space-between;z-index:10;font-size:12px;letter-spacing:2px;color:#b7bba9}.landing-copy{position:absolute;top:27%;left:8%;z-index:3}.landing-copy h2{font:800 clamp(58px,7.7vw,125px)/.87 var(--display);letter-spacing:-1px;margin:25px 0;text-shadow:4px 5px #12160f}.landing-copy em{font-weight:900;color:var(--amber)}.landing-copy>p:last-child{font-size:16px;line-height:1.8;color:#d2d2c3}.character-stage{position:absolute;right:9%;bottom:20%;height:63%;width:36%;z-index:2;transform-origin:50% 90%;animation:arrive 1.1s cubic-bezier(.15,.7,.2,1) both}.character{position:absolute;inset:0;border:0;background:none;padding:0;filter:drop-shadow(10px 20px 10px #050b0980);animation:breathe 5s ease-in-out infinite;transform-origin:50% 95%}.character img{width:100%;height:100%;object-fit:contain;pointer-events:none}.character:hover{filter:drop-shadow(0 0 14px #d4ac5544)}.character.booped{animation:boop .65s ease-out}.character-hint{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:2px;color:#c8c9b8}.quote{position:absolute;top:-2%;left:50%;transform:translateX(-50%) rotate(3deg);z-index:3;width:max-content;max-width:100%;font-size:13px;background:var(--cream);color:var(--ink);padding:12px 17px;box-shadow:4px 5px #181a14}.menu{position:absolute;bottom:9%;left:8%;right:8%;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.menu button{background:linear-gradient(#31372cdd,#171e17ee);border:1px solid #a5a88b88;box-shadow:inset 0 1px #d1d6b933,0 4px #10140f;text-align:left;font-size:14px;font-weight:bold;padding:20px 18px;display:flex;align-items:center;gap:18px;transition:transform .2s,background .2s}.menu button:hover{background:#394034;transform:translateY(-3px)}.menu button span{font-size:12px;color:#8e967d}.menu b{margin-left:auto;color:var(--amber);font-size:21px;font-weight:400}.transition{position:fixed;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;opacity:0;background:#090c08}.transition span{font:italic 900 clamp(64px,13vw,180px)/1 var(--display);color:var(--cream);text-align:center}.letterbox{position:fixed;inset:0;z-index:19;pointer-events:none;border-top:0 solid #090b08;border-bottom:0 solid #090b08;transition:border-width .4s}body[data-state=entering] .letterbox{border-width:11vh 0}body[data-state=entering] .world{transform:scale(1.3)}body[data-state=entering] .intro{animation:exit .65s forwards}body[data-state=entering] header,body[data-state=entering] footer{opacity:0}body[data-state=landing] .world{transform:translate(var(--px,0px),var(--py,0px)) scale(1.1)}body[data-state=landing] .landing-copy{animation:copy-in 1s .15s both}body[data-state=landing] .menu{animation:copy-in .7s .45s both}.transition.active{animation:title-card .9s both}.transition.second{animation:title-card-two .85s both}.landing.chilling .character{animation:breathe 2s ease-in-out infinite}.landing.chilling .quote{background:var(--amber)}dialog{background:#1e241d;color:var(--cream);border:1px solid #9ca182;box-shadow:9px 10px #080e0be6;padding:42px;width:min(540px,90vw);max-height:85svh}dialog::backdrop{background:#050a07bf;backdrop-filter:blur(7px)}dialog h2{font:italic 900 68px/1 var(--display);margin:20px 0;color:var(--amber)}dialog p:not(.eyebrow){font-size:16px;line-height:1.8;color:#d6d8c9}.close{position:absolute;right:12px;top:7px;border:0;background:none;font-size:30px}.stats{border-top:1px solid #68715b;margin:25px 0;display:grid;gap:17px;padding-top:20px;font-size:12px}.stats span{display:flex;justify-content:space-between;gap:15px}.stats b{color:var(--amber)}.back-button{border:1px solid #a5a88b;background:#343e2e;padding:14px;font-size:14px;width:100%}.noscript{position:fixed;bottom:90px;left:8%;background:#111;padding:20px;z-index:30}@keyframes cursor{50%{opacity:.25}}@keyframes breathe{50%{transform:translateY(-7px) rotate(.7deg)}}@keyframes boop{20%{transform:translateY(-30px) rotate(-6deg)}55%{transform:translateY(0) rotate(4deg)}80%{transform:rotate(-2deg)}}@keyframes arrive{from{opacity:0;transform:translateX(90px) rotate(8deg)}to{opacity:1;transform:none}}@keyframes copy-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes exit{to{opacity:0;transform:scale(1.12) translateY(-20px)}}@keyframes title-card{0%,100%{opacity:0}15%,80%{opacity:1}}@keyframes title-card-two{0%,100%{opacity:0}15%,80%{opacity:1}}
@media(max-width:700px){body{min-height:700px;overflow-y:auto}header{top:23px;left:6%;right:6%}.brand{font-size:34px}.brand span{font-size:12px;letter-spacing:1px}.sound{font-size:12px}.intro{padding:100px 8%}.title-block{margin-top:-40px}h1{font-size:38vw;margin-top:20px}.eyebrow{font-size:12px;letter-spacing:1px}.subtitle{font-size:16px}.world>img{object-position:65% center}.start{font-size:23px;letter-spacing:2px;gap:12px}.start-wrap>p{font-size:12px;padding-left:0;letter-spacing:0}.corner-note{display:none}.landing-copy{top:17%;left:7%;pointer-events:none}.landing-copy h2{font-size:52px;margin:15px 0}.landing-copy>p:last-child{font-size:14px;line-height:1.7}.landing-copy .eyebrow{max-width:190px;font-size:12px}.character-stage{right:1%;bottom:24%;height:40%;width:59%}.quote{font-size:12px;max-width:95%;white-space:normal;text-align:center;top:-5%;padding:9px}.character-hint{font-size:12px;letter-spacing:0;bottom:-8px}.menu{bottom:8%;left:6%;right:6%;gap:7px}.menu button{font-size:12px;padding:14px 8px;min-height:60px;gap:5px;justify-content:center;text-align:center}.menu button span,.menu b{display:none}footer{font-size:12px;letter-spacing:0;bottom:20px;left:6%;right:6%;gap:15px}footer span:last-child{text-align:right}dialog{padding:30px 23px}}
@media(max-height:700px) and (min-width:701px){body{min-height:540px}.intro{padding-top:80px;padding-bottom:65px}h1{font-size:170px}.start-wrap{margin-top:12px}.subtitle{font-size:14px}.landing-copy{top:24%}.landing-copy h2{font-size:80px}.character-stage{height:62%;bottom:23%}.menu{bottom:10%}.menu button{padding:13px 18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.world{transform:none!important}}
.world>img{filter:saturate(.8) brightness(.9)}.character-hint{bottom:3px}@media(max-width:700px){.character-hint{bottom:-8px}}
@media(max-width:700px){body{min-height:760px}.landing-copy{top:130px}.character-stage{top:380px;bottom:170px;height:auto}.quote{top:-26px}.character-hint{bottom:-12px}}

/* Jungle palette and community copy. */
:root{--amber:#c6da81;--ink:#122018}.world>img{filter:saturate(.92) brightness(.98)}.shade{background:linear-gradient(90deg,#081a11c4,#10241830 48%,transparent 78%),linear-gradient(0deg,#07170fde,transparent 42%,#09190e44)}.menu button{background:linear-gradient(#334c31ed,#162b20ed);border-color:#90aa7588}.menu button:hover{background:#405d36}.landing-copy h2{font-size:clamp(58px,7.2vw,115px)}dialog h2{font-size:58px}@media(max-width:700px){.landing-copy h2{font-size:52px}.landing-copy .eyebrow{max-width:245px}.brand span{letter-spacing:1px}dialog h2{font-size:46px}}

/* Readable manifesto within the game menu. */
#about-dialog{width:min(720px,92vw);padding:0 42px 32px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#8b9f67 #1e241d}#about-dialog .close{position:sticky;top:0;float:right;display:block;z-index:2;background:#1e241d;border:1px solid #9ca182;width:44px;height:44px;margin-right:-30px;line-height:1}#about-dialog .story{padding-top:38px}#about-dialog .eyebrow{padding-right:35px;line-height:1.7}#about-dialog h2{font-size:58px;line-height:.98;margin:22px 0 30px}#about-dialog h3{font:800 29px/1.15 var(--display);color:var(--amber);margin:32px 0 16px}#about-dialog p{line-height:1.85;margin:0 0 22px}#about-dialog .story-lead{font-size:18px;color:var(--cream)}#about-dialog blockquote{margin:30px 0;padding:8px 0 8px 20px;border-left:3px solid var(--amber);font-size:19px;line-height:1.6;color:var(--cream)}.story-invite{border-top:1px solid #68715b;margin-top:30px;padding-bottom:28px}.story-invite a{display:inline-block;color:var(--amber);font-size:14px;line-height:1.6;text-underline-offset:5px}.story-invite a:focus-visible{outline:2px solid var(--amber);outline-offset:5px}@media(max-width:700px){#about-dialog{padding:0 23px 23px}#about-dialog .close{margin-right:-13px}#about-dialog h2{font-size:43px}#about-dialog .story-lead{font-size:17px}#about-dialog h3{font-size:27px}.brand span{font-size:10px;letter-spacing:.5px}.intro .eyebrow{max-width:260px}.subtitle{font-size:14px}.landing-copy>p:last-child{max-width:310px}}
