:root{
  --sky-top:#d9603f;
  --sky-mid:#ec9a52;
  --sky-horizon:#f8d68b;
  --mountain:#8d7a97;
  --mountain-deep:#6f5f7d;
  --floor:#c9a06e;
  --floor-deep:#b48a56;
  --wall:#caa672;
  --wall-shadow:#a9855a;
  --foliage:#4d6b3f;
  --foliage-light:#6d8c53;
  --ink:#3a2a20;
  --paper:#f6e7c8;
  --rust:#c1502f;
  --rust-deep:#9c3c22;
  --teal:#3c6e69;
  --card-bg: rgba(58, 35, 24, 0.62);
  --card-border: rgba(248, 214, 139, 0.35);
  --cream: #f8ead0;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--sky-top);
  font-family:'Poppins', system-ui, sans-serif;
  color:var(--cream);
}

.scene-wrap{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:#3a1a12;
}
.scene-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:32% 62%;
  transform:scale(1.015);
  will-change:transform;
}
.scene-wrap .vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 50% 46%, rgba(0,0,0,0) 55%, rgba(20,6,3,0.42) 100%);
}

#yt-mount{ position:fixed; width:320px; height:180px; opacity:0; pointer-events:none; bottom:0; left:0; z-index:-1; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* custom pull-to-refresh indicator (see js/pull-refresh.js) —
   needed because overflow:hidden on html/body suppresses the
   browser's own native pull-to-refresh gesture */
#pullRefreshIndicator{
  position:fixed;
  top:0;
  left:50%;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, var(--rust), var(--rust-deep));
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
  opacity:0;
  transform:translate(-50%, -40px);
  z-index:60;
  pointer-events:none;
}
#pullRefreshIndicator svg{ width:20px; height:20px; }
#pullRefreshIndicator.spinning svg{ animation:pull-refresh-spin 0.6s linear infinite; }
@keyframes pull-refresh-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  #pullRefreshIndicator.spinning svg{ animation:none; }
}