@font-face {
  font-family:Caveat;
  src:url(./assets/fonts/caveat.ttf);
  font-weight:400 700;
  font-display:swap
}
@font-face {
  font-family:Oswald;
  src:url(./assets/fonts/oswald-cyrillic.woff2);
  font-display:swap
}
@font-face {
  font-family:Golos;
  src:url(./assets/fonts/golos-text-cyrillic.woff2);
  font-display:swap
}
@font-face {
  font-family:PTSerif;
  src:url(./assets/fonts/pt-serif-bold.ttf);
  font-weight:700;
  font-display:swap
}
:root {
  --ink:#0d1120;
  --night:#1a2140;
  --lamp:#ffb84d;
  --lamp-hot:#ffe2a8;
  --ember:#e8763a;
  --wood:#5b3a26;
  --wood-dark:#3b2418;
  --card:#c9a36b;
  --paper:#efe3c8;
  --chalk:#8fe3c0;
  --coral:#ff6b5b;
  --text:#f6ecd8;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.12' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  --tear:polygon(0 1%,98% 0,100% 16%,99% 45%,100% 86%,98% 99%,66% 98%,44% 100%,1% 98%,0 70%,1% 30%)
}
* {
  box-sizing:border-box;
  margin:0
}
html,body {
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  background:#070c15;
  color:var(--text);
  font-family:Golos,sans-serif
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer;
  color:#e8d5b0;
  border:1px solid #806044;
  border-radius:4px;
  background:linear-gradient(#644833,#39271d);
  padding:9px 12px;
  min-height:44px;
  box-shadow:inset 0 1px #c9a36b66,0 4px 0 #1c130e,0 6px 12px #0005;
  transition:transform .15s,filter .15s
}
button:hover:enabled {
  filter:brightness(1.12)
}
button:active:enabled {
  transform:translateY(3px) rotate(-.5deg);
  box-shadow:inset 0 2px 5px #0005
}
button:disabled {
  cursor:default;
  opacity:.46
}
button:focus-visible,a:focus-visible {
  outline:3px solid var(--chalk);
  outline-offset:4px
}
button.primary {
  background:linear-gradient(#ffd088,#ef994c 50%,#d86c36);
  border-color:#f5be74;
  color:#361a0e;
  box-shadow:inset 0 2px #ffe6ba,0 5px #853b20,0 5px 28px #ffad4b33;
  font:22px Oswald;
  letter-spacing:.035em
}
button.quiet {
  background:#201b19;
  color:#cbb998;
  border:1px dashed #9b7955;
  box-shadow:inset 0 1px #6f5136
}
.wide {
  width:100%
}
h2 {
  font:29px PTSerif,serif
}
h3 {
  font:21px Caveat
}
p {
  line-height:1.35
}
svg {
  display:block;
  width:100%;
  height:100%
}
[hidden] {
  display:none!important
}
.sr-only,.price-box>label {
  position:absolute;
  width:1px;
  height:1px;
  clip-path:inset(50%);
  overflow:hidden
}
#game {
  position:relative;
  z-index:1;
  width:min(100%,760px);
  height:var(--tg-height,100dvh);
  margin:auto;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
  box-shadow:0 0 100px #000
}
#game::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:45;
  pointer-events:none;
  background:var(--grain),radial-gradient(ellipse at 50% 40%,transparent 45%,#03071166 100%);
  opacity:.8
}
.topbar {
  position:absolute;
  inset:calc(7px + var(--safe-top,0px)) 15px auto;
  z-index:30;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  font:15px Oswald;
  letter-spacing:.09em;
  text-decoration:none;
  color:#f0cf97;
  padding:6px 15px;
  background:var(--grain),linear-gradient(100deg,#4e3928,#2c241f);
  border:1px solid #7f5d3c;
  box-shadow:0 3px 0 #151719,0 5px 14px #0008;
  transform:rotate(-1deg)
}
.brand::before,.brand::after {
  content:'•';
  color:#151311;
  position:absolute;
  left:4px;
  top:7px;
  text-shadow:0 1px #b99c65
}
.brand::after {
  left:auto;
  right:4px
}
.icon-button {
  padding:0;
  width:40px;
  min-height:36px;
  font-size:24px;
  background:#17202caa;
  color:#edca94;
  border-color:#8a735a
}
.content {
  position:absolute;
  inset:calc(48px + var(--safe-top,0px)) 0 calc(64px + var(--safe-bottom,0px));
  overflow:hidden
}
.scene {
  height:100%;
  position:relative;
  animation:scene-enter .3s ease-out
}
.section-title {
  position:absolute;
  top:18px;
  left:24px;
  z-index:2
}
.eyebrow {
  display:block;
  font:13px Oswald;
  letter-spacing:.12em;
  color:var(--card)
}
.section-title h2 {
  margin-top:3px
}
.toast {
  position:absolute;
  top:4px;
  left:8%;
  width:84%;
  z-index:50;
  padding:12px;
  background:#162a2d;
  border:1px solid var(--chalk);
  font-size:13px;
  box-shadow:0 5px 20px #0008
}
.bottom-nav {
  position:absolute;
  inset:auto 0 0;
  height:calc(64px + var(--safe-bottom,0px));
  padding-bottom:var(--safe-bottom,0px);
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:2px;
  background:linear-gradient(#201911,#0d0b09);
  box-shadow:0 -1px #96724b55;
  z-index:35
}
.bottom-nav button {
  position:relative;
  width:24%;
  min-height:44px;
  border:0;
  background:none;
  box-shadow:none;
  font:23px Caveat;
  color:#b49f7e;
  padding:5px 0;
  transform:rotate(-2deg)
}
.bottom-nav button:nth-child(even) {
  transform:rotate(2deg)
}
.bottom-nav button>svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  filter:drop-shadow(0 3px 2px #0008)
}
.bottom-nav button.active {
  color:#31251d
}
.bottom-nav button.active>svg {
  opacity:.92
}
.bottom-nav span {
  position:relative
}
.bottom-nav i {
  color:var(--coral);
  margin-left:3px
}
/* The world stays mounted while its light changes. */
#scene-world {
  position:fixed;
  inset:0;
  margin:auto;
  width:min(100%,760px);
  height:var(--tg-height,100dvh);
  pointer-events:none;
  overflow:hidden;
  background:#121728;
  --phase-tint:#d9914b20;
  --phase-glow:#ffb84d3d
}
.world-window {
  position:absolute;
  inset:0 0 auto;
  height:59%;
  overflow:hidden
}
.world-art {
  position:absolute;
  inset:0;
  filter:saturate(.8);
  transition:filter .8s
}
.world-light {
  position:absolute;
  inset:0;
  background:var(--phase-tint);
  transition:background 1s,opacity 1s
}
.glass {
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,#cbd8ff0c 0 19%,transparent 19% 46%,#e1e8ff0a 46% 48%,transparent 48%)
}
.frame {
  position:absolute;
  inset:0;
  border:13px solid #2b2825;
  border-top-width:49px;
  box-shadow:inset 0 0 0 3px #66503a,inset 0 0 65px #050912a8,0 0 30px #000
}
.frame::after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:69%;
  width:8px;
  background:linear-gradient(90deg,#191d23,#554837,#222326);
  box-shadow:4px 0 12px #0006
}
.world-desk {
  position:absolute;
  inset:59% 0 0;
  background:var(--grain),radial-gradient(ellipse at 50% 0,var(--phase-glow),transparent 65%),repeating-linear-gradient(2deg,transparent 0 4px,#120c0922 4px 5px,transparent 5px 17px),repeating-linear-gradient(90deg,transparent 0 120px,#08080855 120px 122px),linear-gradient(#60412c,#2d2019 40%,#1a1411);
  box-shadow:0 -6px 0 #8c6642,0 -10px 30px #0009
}
.world-desk::after {
  content:'';
  position:absolute;
  inset:-30px 0 15%;
  background:radial-gradient(ellipse at 53% 15%,var(--phase-glow),transparent 65%);
  animation:breathe 7s ease-in-out infinite
}
.bulb {
  position:absolute;
  top:67px;
  left:52%;
  z-index:4;
  transform-origin:0 -70px;
  animation:swing 7s ease-in-out infinite
}
.bulb::before {
  content:'';
  position:absolute;
  left:-1px;
  bottom:0;
  width:2px;
  height:70px;
  background:#121318
}
.bulb i {
  display:block;
  width:18px;
  height:23px;
  margin-left:-9px;
  background:#ffe6ae;
  border-radius:45% 45% 50% 50%;
  border-top:5px solid #554c3e;
  box-shadow:0 0 20px 6px #ffd188aa,0 0 100px 45px #ffad5944;
  animation:flicker 6s infinite
}
.rainfall {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(101deg,transparent 0 34px,#b5cfff25 35px 36px,transparent 37px 65px);
  mask-image:linear-gradient(black,transparent);
  animation:rain .65s linear infinite
}
#scene-world:not([data-weather=rain]) .rainfall {
  opacity:0
}
#scene-world[data-time=morning] {
  --phase-tint:#74b5ff32;
  --phase-glow:#a0c6ef33
}
#scene-world[data-time=morning] .world-art {
  filter:saturate(.55) brightness(1.4) hue-rotate(8deg)
}
#scene-world[data-time=morning] .bulb {
  opacity:.6
}
#scene-world[data-time=night] {
  --phase-tint:#010817aa;
  --phase-glow:#f4a83c28
}
#scene-world[data-time=night] .world-art {
  filter:brightness(.45) saturate(.6)
}
#scene-world[data-time=night] .bulb {
  opacity:.12
}
.candle {
  display:none;
  position:absolute;
  bottom:15px;
  left:77%;
  width:15px;
  height:49px;
  background:linear-gradient(90deg,#ad8c65,#f0ddaa,#c2a578);
  box-shadow:3px 6px 8px #0008
}
.candle::before {
  content:'';
  position:absolute;
  top:-17px;
  left:3px;
  width:9px;
  height:19px;
  border-radius:80% 20% 70% 30%;
  background:#ffe0a0;
  box-shadow:0 0 40px 20px #e9a34655;
  animation:flicker 3s infinite
}
#scene-world[data-time=night] .candle {
  display:block
}
.window {
  position:absolute;
  inset:0 0 auto;
  height:58%;
  pointer-events:none
}
.window>* {
  pointer-events:auto
}
.note,.speech,.dialogue-text,.graph-paper,.debt-slip {
  background:var(--grain),var(--paper);
  color:#38291f;
  padding:15px 18px;
  box-shadow:3px 9px 18px #0006;
  font:22px/1.15 Caveat;
  transform:rotate(-2deg)
}
.note::before {
  content:'';
  position:absolute;
  top:-5px;
  left:47%;
  width:9px;
  height:9px;
  background:radial-gradient(circle at 30% 20%,#ffe6bc,#a74e35 60%,#5c221e);
  border-radius:50%;
  box-shadow:1px 2px 3px #0008
}
.speech,.dialogue-text {
  clip-path:var(--tear)
}
.speech b {
  display:block;
  font:12px Oswald;
  letter-spacing:.08em;
  color:#8b5b37;
  margin-bottom:7px
}
.blocked-reason {
  font:15px/1.2 Caveat;
  color:#e8c695;
  padding:6px 0
}
.scene>.blocked-reason {
  position:absolute;
  bottom:66px;
  left:25px;
  right:25px
}
.scene>button.primary.wide {
  position:absolute;
  bottom:16px;
  left:24px;
  width:calc(100% - 48px);
  transform:rotate(-1deg)
}
.scene-morning>.section-title {
  top:12px;
  left:25px
}
.scene-morning>.section-title .eyebrow {
  display:none
}
.scene-morning>.section-title h2 {
  font:29px Caveat;
  color:#c4d8ef
}
.morning-notes {
  position:absolute;
  top:64px;
  left:24px;
  right:24px;
  display:flex;
  gap:18px;
  align-items:flex-start
}
.morning-notes .note {
  position:relative;
  width:54%;
  font:20px/1.1 Caveat;
  padding:13px;
  background:var(--grain),#d7deb0;
  transform:rotate(-3deg);
  box-shadow:3px 7px 14px #0005
}
.morning-notes .note h3 {
  font:22px Caveat;
  margin-bottom:7px
}
.morning-notes p+p {
  margin-top:8px
}
.morning-notes .tutorial {
  width:43%;
  margin-top:28px;
  background:var(--grain),#d5c49a;
  transform:rotate(3deg);
  font-size:19px
}
.morning-notes .tutorial::before {
  width:55px;
  height:18px;
  border-radius:0;
  background:#e5d9ae88;
  left:27%;
  top:-8px;
  box-shadow:none;
  transform:rotate(-8deg)
}
.dialogue {
  position:absolute;
  inset:12% 18px 16px;
  z-index:5;
  background:radial-gradient(ellipse at 40% 30%,#fca65735,transparent 60%)
}
.dialogue .speaker {
  position:absolute;
  left:0;
  top:0;
  width:51%;
  height:55%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end
}
.avatar {
  display:block;
  width:100%;
  height:100%
}
.dialogue .speaker .avatar {
  height:90%;
  filter:drop-shadow(6px 5px 0 #f8b85c11) drop-shadow(0 10px 12px #0008)
}
.dialogue .speaker>div {
  position:absolute;
  bottom:0;
  left:0;
  max-width:100%;
  padding:5px 9px;
  background:#1b2230ce;
  border-left:2px solid #e0a25c
}
.dialogue .speaker .eyebrow {
  display:none
}
.dialogue .speaker h3 {
  font:23px Caveat;
  color:#f9dab1
}
.dialogue-text {
  position:absolute;
  top:10px;
  right:0;
  width:52%;
  font-size:23px;
  transform:rotate(2deg);
  padding:14px
}
.choices {
  position:absolute;
  left:4px;
  right:4px;
  bottom:0;
  display:grid;
  gap:10px
}
.choices>div>button,.choices>button {
  width:100%;
  text-align:left;
  border:0;
  border-radius:0;
  background:var(--grain),linear-gradient(95deg,#d8c5a0,#f5e8c9 25%,#e4d5b1);
  color:#37281c;
  font:22px/1.05 Caveat;
  min-height:48px;
  padding:11px 17px;
  box-shadow:2px 5px 9px #0008;
  transform:rotate(-1deg);
  clip-path:polygon(0 3%,99% 0,100% 94%,1% 100%)
}
.choices>div:nth-child(even)>button {
  transform:rotate(1deg)
}
.choices small {
  display:block;
  font:13px/1.1 Caveat;
  color:#e6c49b;
  margin:3px 10px
}
.scene-morning:has(.dialogue)>.primary,.scene-evening:has(.dialogue)>.primary {
  bottom:10px
}
.scene-morning:has(.dialogue)>.blocked-reason {
  bottom:68px;
  font-size:14px
}
.scene-morning .dialogue {
  top:37%;
  bottom:105px
}
.scene-morning .phone-dialogue {
  top:39%;
  bottom:103px
}
.phone-dialogue .speaker {
  width:82px;
  height:104px;
  top:10px;
  left:10px;
  z-index:4;
  background:var(--paper);
  border:7px solid #5a4435;
  box-shadow:2px 5px 9px #0009;
  transform:rotate(-3deg)
}
.phone-dialogue .speaker .avatar {
  height:100%;
  overflow:hidden;
  background:#303b4b
}
.phone-dialogue .speaker>div {
  bottom:-28px;
  background:#d5c29c;
  color:#2b251d;
  left:-7px;
  width:89px;
  text-align:center;
  padding:3px
}
.phone-dialogue .speaker h3 {
  font:17px Caveat;
  color:#31251a
}
.phone-note {
  position:relative;
  min-height:165px
}
.phone-dialogue>.phone-note {
  position:absolute;
  inset:0
}
.phone-note .speech {
  position:absolute;
  top:0;
  right:0;
  width:65%;
  font-size:22px;
  transform:rotate(2deg)
}
.telephone {
  position:absolute;
  top:145px;
  left:0;
  width:150px;
  height:72px;
  display:block;
  border-radius:45% 45% 18% 18%;
  background:linear-gradient(#61716c,#283e3c 50%,#172827);
  box-shadow:inset 1px 2px #b1b3a166,0 10px 10px #0008;
  color:transparent;
  transform:rotate(-4deg);
  border:2px solid #111f22
}
.telephone::before {
  content:'';
  position:absolute;
  left:-8px;
  right:-8px;
  top:-17px;
  height:36px;
  border:12px solid #2c403f;
  border-bottom-width:15px;
  border-radius:45% 45% 25% 25%;
  box-shadow:inset 0 3px #8b9480,0 5px 3px #101b1b
}
.telephone::after {
  content:'';
  position:absolute;
  left:49px;
  top:18px;
  width:52px;
  height:39px;
  border:8px dotted #8c9b86;
  border-radius:50%;
  background:radial-gradient(circle,#172b29 0 22%,#738373 25% 38%,#324d45 40%);
  transform:rotateX(20deg)
}
.telephone i {
  position:absolute;
  left:140px;
  top:9px;
  width:42px;
  height:75px;
  border-right:7px dotted #102320;
  border-bottom:7px dotted #102320;
  border-radius:0 70% 50% 0;
  transform:rotate(-14deg);
  filter:drop-shadow(2px 2px 1px #c3bd7b33)
}
.phone-dialogue .choices {
  left:10px;
  right:0;
  bottom:0
}
.phone-dialogue .choices>div>button {
  padding-left:24px
}
/* Procurement: the clipboard alone scrolls. */
.scene-procurement>h2 {
  position:absolute;
  left:25px;
  top:10px;
  font:29px Caveat;
  color:#c4d8ef
}
.delivery-truck {
  position:absolute;
  top:5%;
  left:0;
  width:100%;
  height:44%;
  filter:drop-shadow(0 14px 15px #0008)
}
.wooden-shelf {
  position:absolute;
  top:38%;
  left:22px;
  right:22px;
  font:18px Caveat;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:3
}
.shelf-silhouettes {
  display:flex;
  gap:2px;
  max-width:38%;
  overflow:hidden
}
.shelf-silhouettes i {
  width:5px;
  height:17px;
  background:#bcd9b5;
  flex-shrink:0;
  border-radius:2px
}
.invoice {
  position:absolute;
  top:44%;
  bottom:82px;
  left:17px;
  right:17px;
  background:var(--grain),linear-gradient(90deg,#998065 0 7px,#e6d9ba 7px calc(100% - 6px),#95704b calc(100% - 6px));
  padding:24px 12px 10px;
  color:#3e3022;
  transform:rotate(-1deg);
  border:4px solid #775239;
  border-radius:8px 8px 4px 4px;
  box-shadow:5px 10px 20px #0009;
  display:flex;
  flex-direction:column;
  min-height:0
}
.invoice::before {
  content:'';
  position:absolute;
  left:calc(50% - 45px);
  top:-13px;
  width:90px;
  height:25px;
  border:5px solid #899186;
  border-radius:6px;
  background:linear-gradient(#b4b6a2,#56635b);
  box-shadow:0 3px 4px #0005
}
.invoice>h3 {
  position:absolute;
  top:13px;
  left:16px;
  font:17px Oswald;
  letter-spacing:.14em
}
.invoice-total {
  font:19px Caveat;
  text-align:right;
  flex-shrink:0
}
.invoice-head {
  font:10px Golos;
  margin:9px 0;
  color:#776044
}
.invoice-products {
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:5px 2px 10px;
  min-height:0;
  flex:1
}
.product {
  position:relative;
  min-width:0;
  background:var(--grain),repeating-linear-gradient(0deg,#82613f 0 20px,#493821 20px 23px);
  border:2px solid #5a402b;
  padding:5px 4px;
  color:#faf0d2;
  box-shadow:inset 0 1px #d6b888,2px 3px 3px #0004;
  text-align:center
}
.good-art {
  display:block;
  width:56px;
  height:56px;
  margin:0 auto 2px;
  filter:drop-shadow(2px 4px 2px #0007)
}
.product h3 {
  font:18px/1 Caveat;
  min-height:20px
}
.product p {
  font:10px/1.25 Golos;
  color:#ead5ad;
  margin:3px 0
}
.product small {
  display:block;
  font:14px Caveat
}
.product .quiet {
  font:12px Caveat;
  min-height:24px;
  padding:2px 4px;
  margin:2px 0;
  border:0
}
.stepper {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  margin-top:5px
}
.stepper strong {
  font:26px Caveat;
  color:#f8f5df
}
.stepper button {
  min-height:32px;
  width:30px;
  padding:1px;
  border:1px solid #bfa17e;
  border-radius:50%;
  font:23px Caveat;
  background:#2e382f;
  color:#e0e9c9;
  box-shadow:0 2px 0 #111a13
}
.unlock-note {
  font:14px Caveat;
  padding:4px 0
}
.scene-procurement>.primary {
  bottom:16px
}
/* Counter: the approved composition scaled to the viewport. */
.customer {
  position:absolute;
  left:6%;
  bottom:-10px;
  width:55%;
  height:87%;
  filter:drop-shadow(6px 0 3px #e1a65b22)
}
.customer-window .speech {
  position:absolute;
  top:12%;
  right:20px;
  width:46%;
  font-size:23px;
  transform:rotate(2deg)
}
.patience {
  position:absolute;
  top:15%;
  left:22px;
  border:3px solid #ffbf69;
  border-left-color:#38435b;
  border-radius:50%;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  background:#121b2caa
}
.tag {
  position:absolute;
  right:24px;
  bottom:15px;
  width:110px;
  padding:18px 9px 7px;
  background:radial-gradient(circle at 50% 9px,#3a2919 3px,transparent 4px),var(--grain),#c9a36b;
  color:#352618;
  transform:rotate(3deg);
  box-shadow:2px 5px 10px #0007;
  animation:tagsway 6s ease-in-out infinite
}
.tag::before {
  content:'';
  position:absolute;
  left:50%;
  width:1px;
  height:55px;
  top:-55px;
  background:#c8bb9b77
}
.tag small {
  display:block;
  font:12px Oswald
}
.tag strong {
  font:35px Caveat
}
.counter {
  position:absolute;
  top:58%;
  height:13%;
  left:0;
  right:0;
  background:var(--grain),repeating-linear-gradient(2deg,#271b1211 0 2px,transparent 2px 11px),linear-gradient(#6a4a32,#38271c);
  box-shadow:0 -5px #9a7048,0 -12px 25px #0008;
  z-index:6
}
.order-goods {
  position:absolute;
  left:20px;
  top:14px;
  display:flex;
  gap:3px;
  max-width:48%
}
.order-goods svg {
  width:38px;
  height:58px;
  filter:drop-shadow(0 7px 4px #0008)
}
.till {
  position:absolute;
  right:17px;
  top:12px;
  width:122px;
  height:67px;
  background:linear-gradient(#4c5b52,#252e2a);
  border-radius:7px;
  box-shadow:inset 0 2px #839078,0 7px 10px #0008;
  transform:rotate(1deg)
}
.lcd {
  position:absolute;
  left:9px;
  right:9px;
  top:8px;
  height:28px;
  background:#10221d;
  border:1px solid #081710;
  border-radius:2px;
  color:var(--chalk);
  font:23px Oswald;
  text-shadow:0 0 7px #8fe3c088;
  text-align:right;
  padding:0 6px
}
.keys {
  position:absolute;
  left:10px;
  right:10px;
  bottom:8px;
  height:13px;
  background:repeating-linear-gradient(90deg,#cfc6b0 0 12px,transparent 12px 17px);
  border-radius:2px
}
.cat-touch {
  position:absolute;
  width:86px;
  height:74px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  right:20px;
  bottom:15px;
  z-index:8
}
.counter .cat-touch {
  bottom:calc(100% - 5px);
  right:105px;
  width:78px;
  height:65px
}
.heart {
  position:absolute;
  top:0;
  left:40%;
  color:var(--coral);
  font-size:28px;
  opacity:0
}
.petted .heart {
  animation:heart 1.2s ease-out
}
.eye {
  animation:blink 6s infinite;
  transform-box:fill-box;
  transform-origin:center
}
.tail {
  animation:tagsway 5s ease-in-out infinite;
  transform-origin:bottom
}
.desk {
  position:absolute;
  inset:71% 18px 0;
  padding-top:9px
}
.dial {
  display:flex;
  gap:6px
}
.dial button {
  flex:1;
  min-width:0;
  padding:5px 2px;
  min-height:35px;
  font:21px Caveat;
  background:#3a2c23;
  color:#d5c2a1;
  border:0;
  box-shadow:inset 0 -3px #0005
}
.dial button.on {
  background:#d1ae78;
  color:#2c2017;
  transform:rotate(-2deg) translateY(-2px);
  box-shadow:0 3px #795b37
}
.dial-label {
  display:flex;
  justify-content:space-between;
  font:16px Caveat;
  color:#bda889;
  margin:3px 0
}
.order-label {
  font:19px Caveat;
  margin:4px 0
}
.sale-actions {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:9px
}
.sale-actions button {
  min-height:44px;
  font:21px Oswald
}
.extra-actions {
  display:flex;
  gap:8px;
  margin:8px 0
}
.extra-actions button {
  min-height:28px;
  font:17px Caveat;
  padding:3px 10px
}
.shelf-status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:16px Caveat;
  color:#c7b397;
  margin-top:8px;
  gap:4px
}
.shelf-status>span:first-child {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px
}
.shelf-status span span {
  display:inline-flex;
  align-items:center;
  gap:1px
}
.shelf-status svg {
  width:13px;
  height:20px
}
.departure-emotion {
  position:absolute;
  right:5%;
  top:40%;
  font-size:25px
}
.leaving {
  animation:leave .65s forwards
}
.sold {
  animation:goods-slide .55s forwards
}
.coin-gain::after {
  content:'● ● ●';
  position:absolute;
  left:-40px;
  top:-20px;
  color:var(--lamp);
  animation:heart .6s forwards
}
.scene-counter:has(.dialogue) .dialogue {
  top:7%;
  bottom:16px
}
.scene-counter .blocked-reason {
  font-size:13px;
  padding:2px 0
}
.scene-counter:has(.extra-actions button) .shelf-status {
  margin-top:3px
}
.scene-counter .extra-actions {
  margin:4px 0
}
/* Exterior: a layered neighborhood and reflected light. */
.courtyard,.night-exterior {
  position:absolute;
  inset:-48px 0 -64px;
  overflow:hidden;
  background:#151d30
}
.courtyard>svg,.night-exterior>svg {
  width:100%;
  height:100%
}
.yard-heading,.night-heading {
  position:absolute;
  top:24px;
  left:24px;
  right:24px;
  text-shadow:0 3px 5px #000
}
.yard-heading>span,.night-heading>span {
  font:42px Caveat;
  color:#f3d49f
}
.yard-heading small {
  display:block;
  font:17px Caveat;
  color:#d0c2ac
}
.yard-tools {
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  display:flex;
  gap:14px;
  justify-content:space-between
}
.yard-tools>button {
  font:24px Caveat;
  transform:rotate(-2deg);
  padding:12px 23px;
  background:var(--grain),linear-gradient(#90704b,#483925);
  border:1px solid #bf9768
}
.yard-tools>button:last-child {
  transform:rotate(2deg);
  color:#f9dfaf
}
.resident-marker {
  position:absolute;
  width:54px;
  height:65px;
  padding:3px 4px;
  background:radial-gradient(ellipse at 50% 70%,#ffbd6555,transparent);
  border:0;
  box-shadow:none;
  filter:drop-shadow(0 0 9px #ffd07588);
  animation:marker-glow 4s ease-in-out infinite
}
.resident-marker .avatar {
  height:51px;
  width:45px;
  overflow:hidden;
  border:2px solid #d5a968;
  border-radius:50%;
  background:#27344a
}
.resident-marker i {
  color:#ffe3a2;
  font-size:25px;
  text-shadow:0 0 8px #ffd685;
  position:absolute;
  bottom:-5px;
  left:23px;
  font-style:normal
}
.marker-0 {
  left:15%;
  top:28%
}
.marker-1 {
  right:10%;
  top:57%
}
.marker-2 {
  left:30%;
  top:63%
}
.notice-marker {
  position:absolute;
  left:17px;
  top:56%;
  font:17px Caveat;
  background:var(--grain),#d8c29b;
  color:#38291b;
  border:1px solid #9b754c;
  padding:7px 10px;
  transform:rotate(-3deg);
  box-shadow:1px 5px 10px #0008
}
.notice-marker b {
  color:#984c32
}
.night-heading {
  top:40px
}
.night-heading h2 {
  font:28px Caveat;
  max-width:240px
}
.delivery-sign {
  position:absolute;
  left:34%;
  top:48%;
  width:145px;
  background:var(--grain),#bd9a66;
  padding:12px 8px 9px;
  text-align:center;
  color:#30261b;
  font:17px Caveat;
  transform:rotate(-3deg);
  box-shadow:2px 4px 10px #0008
}
.delivery-sign::before {
  content:'';
  position:absolute;
  left:calc(50% - 24px);
  top:-8px;
  width:48px;
  height:17px;
  background:#dcd0a480;
  transform:rotate(8deg)
}
.timer {
  font:25px Oswald;
  margin-top:4px;
  letter-spacing:.06em
}
.night-exterior .cat-touch {
  right:19%;
  bottom:19%;
  width:77px;
  height:64px
}
.cat-note {
  position:absolute;
  left:24px;
  bottom:110px;
  max-width:190px;
  font:21px Caveat;
  color:#cbb79a;
  text-shadow:0 2px 3px #000;
  transform:rotate(-3deg)
}
.night-actions {
  position:absolute;
  left:24px;
  right:24px;
  bottom:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.night-actions .primary {
  flex:1;
  min-width:60%
}
.arriving-truck {
  position:absolute;
  width:195px;
  height:120px;
  right:-10px;
  bottom:90px;
  animation:truck-arrive 1.5s ease-out both;
  filter:drop-shadow(0 10px 8px #0008)
}
.scene-night>.section-title {
  top:7%
}
.scene-night:has(.dialogue) .dialogue {
  top:18%;
  bottom:84px
}
.scene-yard>.window~.section-title {
  top:5%
}
.scene-yard>.window .cat-touch {
  bottom:20px
}
.scene-yard>.dialogue {
  bottom:100px
}
.scene-yard>button:not(.primary) {
  position:absolute;
  bottom:88px;
  left:24px
}
/* Cork, snapshots and book cloth replace the endless journal. */
.journal-board {
  position:absolute;
  inset:42px 14px 20px;
  background:var(--grain),radial-gradient(#c29a64 1px,transparent 2px) 0 0/7px 9px,repeating-linear-gradient(113deg,#9b734a 0 4px,#a17a51 4px 6px);
  border:10px solid #62452c;
  border-image:linear-gradient(90deg,#4a3324,#aa8052,#5b3e28) 1;
  box-shadow:inset 0 0 25px #48311c88,5px 10px 20px #0009;
  transform:rotate(-.5deg);
  padding:11px;
  display:flex;
  flex-direction:column
}
.tabs {
  position:absolute;
  top:-43px;
  left:-8px;
  right:-8px;
  display:flex;
  gap:4px;
  align-items:flex-end;
  height:42px
}
.tabs button {
  flex:1;
  min-width:0;
  font:20px Caveat;
  border:0;
  border-radius:5px 6px 0 0;
  padding:8px 3px;
  min-height:36px;
  background:var(--grain),#b4a080;
  color:#55432e;
  box-shadow:2px -1px 5px #0004;
  transform:rotate(-2deg)
}
.tabs button:nth-child(even) {
  transform:rotate(2deg);
  background:var(--grain),#b4b89e
}
.tabs button[aria-selected=true] {
  background:var(--grain),#eee0b8;
  color:#3c2e1f;
  min-height:43px
}
.journal-board [role=tabpanel] {
  height:100%;
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column
}
.board-label {
  font:19px Caveat;
  color:#f4dfba;
  text-align:center;
  margin:2px 0 13px;
  text-shadow:0 1px #392719
}
.photo-reel {
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  flex:1;
  min-height:0
}
.polaroid-page {
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:15px 17px;
  padding:8px
}
.polaroid {
  position:relative;
  min-width:0;
  min-height:0;
  padding:7px 7px 4px;
  border:0;
  border-radius:0;
  background:var(--grain),#f3e8d0;
  color:#3b2a1c;
  transform:rotate(-3deg);
  box-shadow:3px 6px 8px #36241488;
  display:flex;
  flex-direction:column;
  align-items:center
}
.polaroid:nth-child(even) {
  transform:rotate(3deg)
}
.polaroid:nth-child(3n) {
  transform:rotate(1deg)
}
.polaroid::before {
  content:'';
  position:absolute;
  z-index:2;
  top:-7px;
  left:calc(50% - 20px);
  width:40px;
  height:15px;
  background:#e5d7ab88;
  box-shadow:0 1px #fff2;
  transform:rotate(-9deg)
}
.polaroid .avatar {
  width:100%;
  flex:1;
  min-height:0;
  background:radial-gradient(ellipse at 70% 20%,#b89e72,#42505b 70%);
  overflow:hidden
}
.polaroid .avatar svg {
  transform:scale(1.06);
  transform-origin:50% 10%;
  filter:sepia(.12)
}
.polaroid>span:not(.avatar) {
  font:21px/1.1 Caveat;
  margin-top:4px
}
.polaroid small {
  font:16px Caveat;
  color:#9d503e
}
.polaroid em {
  font-style:normal;
  font-size:13px
}
.reel-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-top:14px
}
.reel-controls button {
  min-height:32px;
  padding:2px 9px;
  background:#654b32;
  font:20px Caveat
}
.reel-controls span {
  font:17px Caveat;
  color:#f0d9af
}
.graph-paper {
  position:relative;
  transform:rotate(1deg);
  margin:10px 0;
  background:repeating-linear-gradient(transparent 0 23px,#7b9b9f55 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,#7b9b9f55 23px 24px),var(--grain),#e8dfc6;
  max-height:60dvh;
  overflow:auto;
  padding:18px 17px
}
.graph-paper h2 {
  font:30px Caveat
}
.graph-paper p {
  padding:13px 0;
  border-bottom:1px dashed #806c4766;
  font-size:21px
}
.upgrade-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  flex:1;
  align-items:start;
  padding-top:15px
}
.branch {
  min-width:0
}
.branch h3 {
  font:23px/1 Caveat;
  color:#ffedbd;
  text-align:center;
  min-height:56px;
  text-shadow:0 2px #49301e
}
.branch button {
  display:block;
  width:100%;
  min-height:83px;
  margin:10px 0 20px;
  padding:8px 4px;
  background:var(--grain),#e5d2a2;
  color:#392c1c;
  font:19px/1.15 Caveat;
  border:0;
  transform:rotate(2deg);
  box-shadow:2px 5px 7px #39281899
}
.branch:nth-child(even) button {
  transform:rotate(-2deg)
}
.inventory {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding:20px 8px
}
.inventory-object {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  font:22px Caveat;
  color:#f5e4c8;
  text-shadow:0 2px #4a321e
}
.inventory-object svg {
  width:62px;
  height:72px;
  filter:drop-shadow(0 5px 4px #0006)
}
.debt-slip {
  font-size:18px;
  padding:12px
}
.hero-detail .avatar {
  float:left;
  width:92px;
  height:110px;
  margin:0 15px 8px 0;
  background:#384551;
  border:6px solid #eee1bd;
  transform:rotate(-2deg)
}
.hero-detail p {
  padding:6px 0
}
.hero-detail {
  display:flow-root;
  margin-bottom:18px
}
.memory {
  border-bottom:1px dashed #b59e71;
  padding:12px 0
}
.sheet-scroll>.avatar {
  width:90px;
  height:110px;
  float:left;
  margin-right:15px
}
.notebook {
  position:absolute;
  inset:86px 22px 67px;
  background:var(--grain),#8e5241;
  border-radius:7px;
  box-shadow:0 0 0 5px #38271c,5px 13px 20px #000b;
  transform:rotate(-1deg);
  padding:11px 10px 11px 18px
}
.notebook::before {
  content:'';
  position:absolute;
  left:8px;
  top:6px;
  bottom:6px;
  width:14px;
  background:repeating-linear-gradient(0deg,transparent 0 18px,#a18a67 18px 20px,transparent 20px 25px),linear-gradient(90deg,#2e1f18,#75533b,#37251d);
  z-index:2
}
.page {
  position:relative;
  height:100%;
  background:var(--grain),repeating-linear-gradient(transparent 0 29px,#63858533 29px 30px),#e9dfc3;
  color:#443426;
  padding:45px 23px 25px 26px;
  box-shadow:inset 10px 0 13px #806d3933,3px 0 #bda87e,5px 2px #e8ddbd;
  font:24px/1.25 Caveat;
  animation:page-turn .3s
}
.page h3 {
  font:30px Caveat;
  margin-bottom:25px
}
.page p {
  line-height:1.25
}
.page button {
  margin-top:25px;
  font:21px Caveat;
  background:transparent;
  border:1px solid #9b7a54;
  color:#6e4c30;
  box-shadow:0 2px #a08158
}
.page-number {
  position:absolute;
  top:15px;
  right:18px;
  font:18px Caveat;
  color:#8c7454
}
.page-controls {
  position:absolute;
  left:0;
  right:0;
  bottom:-58px;
  display:flex;
  justify-content:space-between;
  gap:20px
}
.page-controls button {
  font:22px Caveat;
  min-width:110px
}
.sealed-page {
  position:absolute;
  right:-8px;
  top:-20px;
  width:130px;
  padding:12px 8px;
  background:var(--grain),#c5b58a;
  color:#654f35;
  font:18px/1.1 Caveat;
  transform:rotate(5deg);
  box-shadow:1px 3px 7px #0004
}
.sealed-page::before,.sealed-page::after {
  content:'';
  position:absolute;
  left:-12px;
  top:12px;
  width:150px;
  height:17px;
  background:#c5b579b3;
  transform:rotate(-25deg)
}
.sealed-page::after {
  transform:rotate(20deg);
  top:29px
}
.scene-notebook>.section-title {
  top:13px
}
/* Evening newspaper and tomorrow's pin on the frame. */
.newspaper {
  color:#352d24;
  background:var(--grain),#e1d8bd;
  padding:16px;
  box-shadow:2px 5px 10px #0006;
  font:14px/1.35 Georgia,serif;
  clip-path:var(--tear)
}
.paper-top {
  font:10px Oswald;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align:center;
  border-top:1px solid #6c604d;
  border-bottom:1px solid #6c604d;
  padding:4px
}
.newspaper>svg {
  height:45px;
  margin:7px 0
}
.newspaper h2 {
  font:24px/1.05 PTSerif;
  margin:6px 0 12px
}
.newspaper h3 {
  font:17px PTSerif;
  margin:8px 0
}
.paper-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  border-top:1px solid #887a63;
  border-bottom:1px solid #887a63;
  margin:14px 0;
  padding:6px
}
.paper-columns section+section {
  border-left:1px solid #887a63;
  padding-left:12px
}
.evening-paper {
  position:absolute;
  inset:22% 24px 100px
}
.evening-paper>.newspaper {
  position:absolute;
  top:33%;
  left:-5px;
  width:70%;
  height:55%;
  overflow:hidden;
  transform:rotate(-3deg);
  padding:13px;
  filter:drop-shadow(4px 9px 8px #0009)
}
.evening-paper>.newspaper h2 {
  font-size:21px
}
.evening-paper>.newspaper>section {
  display:none
}
.paper-open {
  position:absolute;
  left:0;
  top:calc(85% + 8px);
  min-height:30px;
  font:19px Caveat;
  padding:4px 8px;
  transform:rotate(-2deg)
}
.evening-paper>.phone-note {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:40%
}
.evening-paper>.phone-note .telephone {
  top:40px;
  left:0;
  transform:rotate(-7deg) scale(.8);
  transform-origin:left
}
.evening-paper>.phone-note .speech {
  top:-20px;
  width:58%;
  font-size:21px
}
.tomorrow {
  position:absolute;
  top:28%;
  right:-5px;
  width:40%;
  padding:14px 12px;
  font-size:20px;
  transform:rotate(3deg)
}
.tomorrow strong {
  font-weight:700
}
.scene-evening>button[data-action=share] {
  position:absolute;
  bottom:82px;
  left:24px;
  width:40%;
  font:20px Caveat;
  min-height:32px;
  padding:4px
}
.scene-evening:has(.dialogue) .evening-paper {
  opacity:.25;
  pointer-events:none
}
.scene-evening .dialogue {
  top:7%;
  bottom:145px
}
.scene-evening .phone-dialogue .telephone {
  top:165px
}
.scene-evening .phone-dialogue .speaker {
  top:35px
}
.sheet-scroll>.phone-note {
  margin-top:25px;
  min-height:210px
}
.sheet-scroll>.phone-note .telephone {
  top:100px
}
.sheet-scroll>.tomorrow {
  position:relative;
  inset:auto;
  width:90%;
  margin:20px auto
}
.sheet-scroll>.newspaper {
  box-shadow:none
}
.newspaper-stack {
  position:absolute;
  top:46%;
  left:23px;
  right:23px;
  height:35%;
  transform:rotate(-3deg);
  background:#ae9c76;
  box-shadow:3px 3px #e0d4b2,6px 6px #8e7e61,9px 9px #c5b48e,13px 16px 20px #0009
}
.newspaper-stack>.newspaper {
  height:100%;
  overflow:hidden
}
.newspaper-stack>.phone-note,.newspaper-stack>.tomorrow {
  display:none
}
.newspaper-stack>.paper-open {
  top:auto;
  bottom:10px;
  left:auto;
  right:10px;
  background:#d4b17b;
  color:#3c2b1b
}
.final-photos {
  position:absolute;
  inset:14% 25px auto;
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:10px 4px 20px;
  height:31%;
  scrollbar-width:thin
}
.final-photos>.polaroid {
  flex:0 0 42%;
  scroll-snap-align:start
}
.final-photos .polaroid>span:not(.avatar) {
  font-size:18px;
  min-height:42px
}
.final-actions {
  position:absolute;
  bottom:14px;
  left:24px;
  right:24px;
  display:flex;
  gap:12px
}
.final-actions button {
  flex:1;
  font:20px Caveat
}
.ending-stamp {
  margin:15px 0;
  padding:12px;
  border:2px solid #94744f;
  transform:rotate(-1deg)
}
/* A glazed shelf and hanging OPEN sign. */
.scene-shop>.section-title {
  top:20px
}
.scene-shop .section-title h2 {
  font:30px Caveat;
  max-width:270px
}
.shop-reel {
  position:absolute;
  inset:115px 18px 83px;
  display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:calc(50% - 5px);
  gap:20px 10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding:10px 8px 20px;
  border:9px solid #493b2c;
  border-top:12px solid #655039;
  background:linear-gradient(115deg,#d6e8ff12 0 18%,transparent 18% 50%,#fff1 50% 53%,transparent 53%),radial-gradient(ellipse at 50% 0,#c7934c44,transparent),#162229;
  box-shadow:inset 0 0 30px #0009,4px 7px 18px #0008
}
.shop-card {
  min-width:0;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  border-bottom:9px solid #745236;
  box-shadow:0 4px #2c241b,0 8px 9px #0008;
  padding-bottom:8px;
  position:relative
}
.shop-icon {
  width:100%;
  height:53%;
  max-height:140px;
  filter:drop-shadow(0 6px 5px #0008)
}
.shop-card>div {
  text-align:center;
  width:100%
}
.shop-card h3 {
  font:19px/1 Caveat;
  color:#ecdbb3;
  min-height:34px
}
.shop-card p {
  font:17px Caveat;
  color:#ffe4a9;
  margin:3px 0
}
.shop-card button {
  font:18px Caveat;
  padding:4px 8px;
  min-height:30px;
  background:var(--grain),#d6b77c;
  color:#38291b;
  transform:rotate(-2deg)
}
.shop-card small {
  display:block;
  font:13px Caveat;
  margin-top:5px;
  color:#dfcba6
}
.shop-controls {
  position:absolute;
  bottom:18px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:22px Caveat
}
.shop-controls button {
  padding:4px 16px;
  font:22px Caveat
}
.test-badge {
  position:absolute;
  top:8px;
  right:15px;
  font:12px Oswald;
  border:1px dashed #b7a47b;
  padding:3px
}
.scene-shop>.note {
  position:absolute;
  top:35%;
  left:30px;
  right:30px
}
.scene-menu {
  background:#070d18a8;
  backdrop-filter:blur(3px)
}
.scene-menu>button {
  position:absolute;
  left:24px;
  top:12px;
  font:20px Caveat
}
.hanging-sign {
  position:absolute;
  top:15%;
  left:13%;
  right:13%;
  padding:28px 15px 23px;
  text-align:center;
  font:43px Oswald;
  letter-spacing:.08em;
  color:#d0dfc0;
  background:var(--grain),linear-gradient(#33584e,#183e36);
  border:7px solid #8a6542;
  border-radius:8px;
  box-shadow:0 10px 25px #0009,inset 0 0 0 2px #b99c67;
  transform:rotate(-3deg);
  animation:tagsway 8s ease-in-out infinite
}
.hanging-sign::before {
  content:'';
  position:absolute;
  left:18%;
  right:18%;
  height:75px;
  top:-66px;
  clip-path:polygon(0 100%,50% 0,100% 100%,99% 100%,50% 4%,1% 100%);
  background:#a48d6b
}
.hanging-sign small {
  display:block;
  font:23px Caveat;
  letter-spacing:0;
  margin-top:9px;
  color:#b7c2a0
}
.menu-card {
  position:absolute;
  top:48%;
  left:13%;
  right:13%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.menu-card label {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font:21px Caveat
}
.menu-card select {
  width:60%;
  padding:6px;
  color:#30271b;
  background:#d8c7a0;
  border:1px solid #aa8b60;
  min-height:40px;
  font:17px Golos
}
.menu-card button {
  font:20px Caveat
}
.menu-card button:last-child {
  color:#d5a58b;
  border-color:#745042
}
.scene-intro>.section-title {
  top:14%;
  left:28px
}
.scene-intro>.section-title h2 {
  display:none
}
.game-title {
  position:absolute;
  top:18%;
  left:28px;
  right:28px;
  font:54px/1 Caveat;
  max-width:370px;
  color:#ffe3a5;
  text-shadow:0 0 30px #ffc77644,0 3px 4px #000
}
.welcome-text {
  position:absolute;
  left:30px;
  right:30px;
  top:39%;
  font:22px Caveat;
  color:#c9c7bb;
  max-width:390px
}
#intro {
  position:absolute;
  top:57%;
  left:26px;
  right:26px;
  padding:18px;
  background:var(--grain),#cbb58a;
  color:#40301f;
  transform:rotate(-1deg);
  box-shadow:3px 7px 15px #0008;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}
#intro label {
  min-width:0;
  font:19px Caveat
}
#intro input,#intro select {
  display:block;
  width:100%;
  height:39px;
  margin-top:5px;
  padding:4px 8px;
  background:#e9dfc5;
  color:#3b2a1c;
  border:0;
  border-bottom:1px solid #ad9468;
  font:18px Caveat
}
#intro button {
  grid-column:1/-1;
  font:21px Oswald;
  min-height:42px
}
.bottom-sheet {
  position:fixed;
  top:auto;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  width:min(100%,740px);
  max-width:100%;
  max-height:60dvh;
  padding:0;
  border:0;
  border-top:6px solid #b79765;
  border-radius:18px 18px 0 0;
  background:var(--grain),#eee1c1;
  color:#382c20;
  box-shadow:0 -12px 50px #0009;
  overflow:hidden;
  animation:sheet-rise .3s ease-out
}
.bottom-sheet[open] {
  display:flex;
  flex-direction:column
}
.bottom-sheet::backdrop {
  background:#030916b0;
  backdrop-filter:blur(2px)
}
.sheet-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 20px 8px;
  border-bottom:1px solid #bca273;
  flex-shrink:0
}
.sheet-heading h3 {
  font:29px Caveat
}
.sheet-heading button {
  color:#4a3322;
  background:#d6c198;
  box-shadow:none;
  border:0;
  font:29px Caveat;
  padding:0;
  width:40px;
  min-height:40px
}
.sheet-scroll {
  padding:16px 22px 25px;
  overflow:auto;
  overscroll-behavior:contain;
  min-height:0;
  font:22px/1.3 Caveat
}
.sheet-scroll h3 {
  font:26px Caveat
}
.sheet-scroll .note {
  position:relative;
  margin:15px 0 25px
}
.sheet-scroll .note button {
  display:block;
  margin-top:12px;
  font:20px Caveat
}
.catalog-item {
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px 0;
  border-bottom:1px dashed #a58b65
}
.decor-drawing {
  font:68px Caveat;
  color:#607655;
  width:80px;
  flex-shrink:0;
  text-align:center;
  filter:drop-shadow(2px 4px 2px #6b4b3633)
}
.catalog-item h3 {
  font:27px Caveat
}
.catalog-item p {
  font:20px Caveat;
  margin:5px 0
}
.catalog-item button {
  font:20px Caveat;
  min-height:35px;
  padding:5px 12px
}
@keyframes scene-enter {
  from {
    opacity:0;
    translate:10px 0
  }
  to {
    opacity:1;
    translate:0 0
  }
}
@keyframes swing {
  50% {
    transform:rotate(3deg)
  }
}
@keyframes tagsway {
  50% {
    rotate:-2deg
  }
}
@keyframes flicker {
  0%,45%,49%,100% {
    opacity:1
  }
  47% {
    opacity:.7
  }
  70% {
    opacity:.9
  }
}
@keyframes rain {
  to {
    background-position:-14px 60px
  }
}
@keyframes breathe {
  50% {
    opacity:.65;
    transform:scale(1.025)
  }
}
@keyframes blink {
  0%,94%,100% {
    transform:scaleY(1)
  }
  96% {
    transform:scaleY(.1)
  }
}
@keyframes heart {
  10% {
    opacity:1
  }
  100% {
    opacity:0;
    translate:0 -45px
  }
}
@keyframes leave {
  to {
    opacity:0;
    translate:-120px 0
  }
}
@keyframes goods-slide {
  to {
    translate:0 -70px;
    opacity:0
  }
}
@keyframes page-turn {
  from {
    opacity:.3;
    rotate:y -12deg
  }
  to {
    opacity:1;
    rotate:y 0deg
  }
}
@keyframes sheet-rise {
  from {
    translate:0 80%;
    opacity:0
  }
  to {
    translate:0 0;
    opacity:1
  }
}
@keyframes truck-arrive {
  from {
    translate:300px 0
  }
  to {
    translate:0 0
  }
}
@keyframes marker-glow {
  50% {
    filter:drop-shadow(0 0 4px #ffd07555)
  }
}
@media(min-width:650px) {
  .morning-notes {
    left:40px;
    right:40px;
    gap:45px
  }
  .morning-notes .note {
    max-width:260px
  }
  .dialogue {
    left:60px;
    right:60px
  }
  .dialogue-text {
    font-size:27px;
    padding:24px
  }
  .choices {
    left:35px;
    right:35px
  }
  .choices>div>button {
    font-size:25px
  }
  .scene-morning .dialogue {
    left:65px;
    right:65px
  }
  .phone-dialogue .speaker {
    width:110px;
    height:135px
  }
  .phone-dialogue .speaker>div {
    width:117px
  }
  .phone-note .speech {
    font-size:26px
  }
  .telephone {
    scale:1.2;
    transform-origin:left top
  }
  .invoice {
    left:70px;
    right:70px
  }
  .invoice-products {
    gap:12px
  }
  .product p {
    font-size:12px
  }
  .notebook {
    inset:86px 30px 67px;
    padding-left:50%;
    background:var(--grain),linear-gradient(90deg,#e6d9b8 0 49%,#7c6240 49.4% 50.3%,#e5d4ac 51%);
    border:10px solid #875b3e
  }
  .notebook::before {
    left:20px;
    right:51%;
    top:40px;
    bottom:25px;
    width:auto;
    background:repeating-linear-gradient(transparent 0 29px,#8f9a7833 29px 30px);
    content:'✦';
    font:70px Caveat;
    color:#a08a61;
    text-align:center;
    padding-top:100px
  }
  .page {
    box-shadow:inset 9px 0 20px #806d3944
  }
  .journal-board {
    left:70px;
    right:70px
  }
  .polaroid-page {
    gap:20px 35px
  }
  .evening-paper {
    left:60px;
    right:60px
  }
  .tomorrow {
    max-width:240px
  }
  .customer {
    left:13%;
    width:46%
  }
  .customer-window .speech {
    right:40px;
    width:40%;
    font-size:27px
  }
  .desk {
    left:40px;
    right:40px
  }
  .yard-heading,.night-heading {
    left:50px
  }
  .shop-reel {
    left:45px;
    right:45px;
    grid-auto-columns:calc(33.333% - 10px)
  }
  .hanging-sign {
    left:23%;
    right:23%
  }
  .menu-card {
    left:23%;
    right:23%
  }
  .game-title {
    left:55px;
    font-size:72px
  }
  .welcome-text {
    left:55px
  }
  #intro {
    left:55px;
    right:55px
  }
}
@media(max-height:780px) {
  .morning-notes {
    top:52px
  }
  .morning-notes .note {
    font-size:18px;
    padding:11px
  }
  .morning-notes .tutorial {
    font-size:17px
  }
  .scene-morning .dialogue {
    top:37%;
    bottom:98px
  }
  .phone-note .speech {
    font-size:20px
  }
  .telephone {
    top:130px;
    scale:.86;
    transform-origin:left top
  }
  .phone-dialogue .speaker {
    width:65px;
    height:84px;
    top:4px
  }
  .phone-dialogue .speaker>div {
    width:72px;
    bottom:-24px
  }
  .phone-dialogue .speaker h3 {
    font-size:15px
  }
  .choices {
    gap:7px
  }
  .choices>div>button,.choices>button {
    font-size:20px;
    min-height:40px;
    padding:9px 12px
  }
  .dialogue-text {
    font-size:21px
  }
  .scene-morning .dialogue .choices {
    bottom:0
  }
  .desk {
    padding-top:6px
  }
  .dial button {
    min-height:30px;
    font-size:19px
  }
  .dial-label {
    font-size:14px
  }
  .order-label {
    font-size:17px;
    margin:3px 0
  }
  .sale-actions button {
    min-height:38px;
    font-size:19px
  }
  .shelf-status {
    font-size:14px;
    margin-top:4px
  }
  .extra-actions button {
    min-height:25px;
    font-size:15px
  }
  .order-goods svg {
    height:46px;
    width:32px
  }
  .till {
    height:60px;
    top:8px
  }
  .counter .cat-touch {
    height:54px
  }
  .polaroid-page {
    gap:12px
  }
  .polaroid>span:not(.avatar) {
    font-size:19px
  }
  .polaroid small {
    font-size:14px
  }
  .board-label {
    margin-bottom:5px
  }
  .reel-controls {
    margin-top:8px
  }
  .page {
    font-size:22px;
    padding:38px 19px 18px 24px
  }
  .page h3 {
    font-size:27px;
    margin-bottom:16px
  }
  .page button {
    margin-top:16px
  }
  .branch button {
    min-height:66px;
    margin-bottom:15px;
    font-size:17px
  }
  .shop-reel {
    top:100px
  }
  .shop-card h3 {
    font-size:18px
  }
  .shop-icon {
    height:45%
  }
  .evening-paper>.phone-note .speech {
    font-size:19px
  }
  .tomorrow {
    font-size:18px
  }
  .scene-evening .phone-dialogue .telephone {
    top:125px
  }
  .scene-evening .phone-dialogue .speaker {
    top:15px
  }
  .game-title {
    font-size:48px
  }
  #intro {
    padding:13px;
    gap:9px
  }
  .menu-card {
    gap:9px
  }
  .menu-card button {
    font-size:18px
  }
  .hanging-sign {
    font-size:37px;
    padding:23px 12px 18px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Visual review corrections: keep complete controls and separate the evening papers. */
#game::after {
  opacity:.45
}
.scene-counter>.window {
  height:53%
}
.scene-counter>.counter {
  top:53%;
  height:12%
}
.scene-counter>.desk {
  top:65%
}
.product p {
  font-size:9px;
  line-height:1.15
}
.product .quiet {
  font-size:11px;
  min-height:18px;
  padding:1px 3px
}
.product .stepper {
  margin-top:3px
}
.stepper button {
  min-height:30px
}
.invoice-head {
  margin:6px 0
}
.scene-yard>button.notice-marker {
  bottom:auto;
  left:17px
}
.night-exterior .cat-touch {
  bottom:26%
}
.cat-note {
  bottom:155px
}
.delivery-sign {
  top:50%;
  width:140px;
  padding:10px 8px
}
.timer {
  font-size:22px
}
.arriving-truck {
  display:none;
  animation:none
}
.scene-night:has([data-action=next]:not(:disabled)) .arriving-truck {
  display:block;
  animation:truck-arrive 1.5s ease-out both
}
.evening-paper {
  top:8%
}
.evening-paper>.newspaper {
  top:47%;
  height:46%
}
.evening-paper>.phone-note .speech {
  top:0;
  font-size:20px;
  width:59%
}
.evening-paper>.phone-note .telephone {
  top:140px;
  scale:.9
}
.evening-paper>.tomorrow {
  top:47%;
  font-size:18px
}
.evening-paper>.paper-open {
  top:auto;
  bottom:0
}
.call-photo {
  position:absolute;
  top:0;
  left:10px;
  width:76px;
  height:100px;
  background:#303b4b;
  border:7px solid #5a4435;
  box-shadow:3px 5px 8px #0008;
  transform:rotate(-3deg)
}
.scene-finale .section-title h2 {
  font-size:25px;
  max-width:310px
}
.final-photos {
  top:17%;
  height:28%
}
.facing-page {
  display:none
}
@media(min-width:650px) {
  .notebook::before {
    display:none
  }
  .facing-page {
    display:block;
    position:absolute;
    left:18px;
    right:51%;
    top:10px;
    bottom:10px;
    padding:38px 24px 20px;
    background:repeating-linear-gradient(transparent 0 29px,#63858533 29px 30px);
    font:24px/1.25 Caveat;
    color:#443426
  }
  .facing-page h3 {
    font:30px Caveat;
    margin-bottom:24px
  }
  .evening-paper>.phone-note .speech {
    font-size:24px
  }
  .evening-paper>.tomorrow {
    font-size:22px
  }
}
@media(max-height:780px) {
  .evening-paper>.phone-note .speech {
    font-size:18px
  }
  .evening-paper>.tomorrow {
    font-size:17px
  }
  .evening-paper>.phone-note .telephone {
    top:110px
  }
  .call-photo {
    width:62px;
    height:84px
  }
  .evening-paper>.newspaper h2 {
    font-size:19px
  }
  .product .good-art {
    width:56px;
    height:56px
  }
  .scene-counter .blocked-reason {
    font-size:12px
  }
  .scene-counter .shelf-status {
    margin-top:3px
  }
  .scene-counter .extra-actions {
    margin:3px 0
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.scene-evening>button[data-action=share] {
  left:auto;
  right:24px;
  width:43%;
  font-size:18px
}
.evening-paper>.paper-open {
  max-width:47%;
  font-size:18px
}
.scene-night:has([data-action=next]:not(:disabled)) .night-exterior .cat-touch {
  left:18%;
  right:auto
}
.decor-drawing {
  height:80px
}
.content>.dialogue {
  inset:17% 30px auto;
  background:var(--grain),#e2d2aa;
  color:#3b2c20;
  padding:24px;
  box-shadow:3px 8px 20px #0008;
  transform:rotate(-2deg)
}
.content>.dialogue h2 {
  font:28px Caveat;
  margin-bottom:20px
}
.content>.dialogue button {
  margin:10px 0
}
.content:has(>.snow) {
  background:radial-gradient(ellipse at 50% 20%,#b1cadd44,transparent 70%)
}
.snow {
  position:absolute;
  top:18%;
  left:calc(50% - 55px);
  font-size:110px;
  color:#d5e5ef;
  text-shadow:0 0 30px #ceeaff55
}
.content:has(>.snow)>.eyebrow {
  position:absolute;
  top:7%;
  left:24px
}
.content:has(>.snow)>h2 {
  position:absolute;
  top:44%;
  left:24px;
  font:36px Caveat
}
.content:has(>.snow)>p {
  position:absolute;
  top:53%;
  left:24px;
  right:24px;
  font:22px Caveat
}
.content:has(>.snow)>button {
  position:absolute;
  bottom:18px;
  left:24px;
  width:calc(100% - 48px)
}
.content:has(>.snow)>button.primary {
  bottom:85px
}
/* Four short answers fan into two rows instead of obscuring the caller's paper. */
.many-choices .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.many-choices .choices>div>button { font-size:20px; min-height:60px; }
.scene-morning .many-choices { top:32%; }
.many-choices .telephone { top:120px; }
@media(min-width:650px) {
  .notebook { padding-left:18px; padding-right:50%; }
  .facing-page { left:51%; right:18px; }
}
.scene-morning .many-choices { top:28%; }
/* Objects land on the desk; the glass notes keep a barely visible sway. */
.note, .polaroid, .invoice, .newspaper {
  animation:object-land .32s cubic-bezier(.2,.8,.3,1) backwards;
}
.morning-notes .note {
  animation:note-sway 9s ease-in-out infinite, object-land .32s ease-out backwards;
}
@keyframes object-land {
  0% { opacity:0; scale:.92; translate:0 -8px; rotate:-1deg; }
  70% { opacity:1; scale:1.025; translate:0 0; rotate:.5deg; }
  100% { scale:1; rotate:0deg; }
}
@keyframes note-sway {
  50% { rotate:.6deg; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
#operator-notice { position: fixed; z-index: 90; inset: 8px 12px auto; margin: auto; max-width: 440px; padding: 8px 12px; background: #30271c; color: #fff1cf; border-radius: 8px; pointer-events: none; }