:root{
  --paper:#ebe7de;
  --ink:#2a2b30;
  --accent:#c98a2b;
  --vig:rgba(70,55,30,.25);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* Dark mode: chalk on slate */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1c1d21;
    --ink:#e9e6dc;
    --accent:#d9a441;
    --vig:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1c1d21;
  --ink:#e9e6dc;
  --accent:#d9a441;
  --vig:rgba(0,0,0,.55);
  color-scheme:dark;
}

html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0}

body{
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  font-family:'Reenie Beanie','Segoe Print','Bradley Hand',cursive;
}

#stage{position:fixed;inset:0}
canvas{display:block;width:100%;height:100%}

/* paper grain + soft vignette (grain image is set from JS) */
#vig{position:fixed;inset:0;pointer-events:none}

/* Back to home button (same look as the other pages), centred at the bottom */
.back{
  position:fixed;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  padding:14px 34px;
  border:1px solid #2a2a30;
  border-radius:14px;
  background:rgba(24,24,28,.85);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  color:#e4e4e7;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  transition:border-color .3s,background .3s,transform .3s;
}
.back:hover,.back:focus-visible{
  border-color:#3b3b8f;
  background:rgba(40,40,80,.6);
  transform:translateX(-50%) translateY(-2px);
}