:root {
  --fit: 0.4;
  --ink: #2b2522;
  --paper: #fbf7ef;
  --cream: #f2e6cf;
  --kraft: #c9a27c;
  --indigo: #1f2a4d;
  --gold: #e9b44c;
  --green: #2f8f6b;
  --rose: #e7a08c;
  --hand: 'Gochi Hand', 'Patrick Hand', cursive;
  --brush: 'Caveat Brush', 'Gochi Hand', cursive;
  --arabic: 'Amiri', serif;
  --bg: #15110f;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) { --bg: #2a2320; }
}
:root[data-theme='light'] { --bg: #2a2320; }
:root[data-theme='dark'] { --bg: #15110f; }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  font-family: var(--hand);
  -webkit-font-smoothing: antialiased;
}
body.render { background: #000; }

#viewport {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#stage-wrap {
  width: calc(1080px * var(--fit)); height: calc(1920px * var(--fit));
  position: relative; overflow: hidden;
  border-radius: calc(28px * var(--fit));
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
}
body.render #stage-wrap { border-radius: 0; box-shadow: none; }
#stage {
  position: absolute; left: 0; top: 0;
  width: 1080px; height: 1920px;
  transform: scale(var(--fit)); transform-origin: 0 0;
  overflow: hidden;
  background: var(--cream);
  contain: strict;
}

.node { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.node > .inner { display: block; width: 100%; height: 100%; }
.node > img.inner { object-fit: contain; user-select: none; }
.group { pointer-events: none; }
.paper-shadow > .inner { filter: drop-shadow(0 5px 3px rgba(43,37,34,.28)) drop-shadow(0 14px 18px rgba(43,37,34,.16)); }
.paper-shadow.lift > .inner { filter: drop-shadow(0 10px 6px rgba(43,37,34,.3)) drop-shadow(0 28px 30px rgba(43,37,34,.2)); }

.txt > .inner {
  white-space: nowrap; color: var(--ink); line-height: 1.05;
  font-family: var(--brush); text-align: center;
}

/* full-stage overlays */
.overlay { position: absolute; inset: 0; pointer-events: none; }
#grain { mix-blend-mode: multiply; opacity: .16; background-size: 512px 512px; z-index: 900; }
#flicker { background: #fff7e6; mix-blend-mode: soft-light; z-index: 901; }
#vignette {
  z-index: 902;
  background: radial-gradient(ellipse 120% 85% at 50% 48%, transparent 58%, rgba(30,20,12,.42) 100%);
}

/* player UI (not part of the stage; hidden in render mode) */
#ui {
  position: absolute; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
body.render #ui { display: none; }
#playbtn {
  pointer-events: auto;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; border: 0;
  background: rgba(251,247,239,.94); color: var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); cursor: pointer;
  display: grid; place-items: center;
  transition: transform .15s ease, opacity .25s ease;
}
#playbtn:hover { transform: translate(-50%, -50%) scale(1.06); }
#playbtn svg { width: 38px; height: 38px; margin-left: 6px; }
#ui.playing #playbtn { opacity: 0; pointer-events: none; }
#bar {
  pointer-events: auto; margin: 0 14px 12px; height: 22px; display: flex; align-items: center; cursor: pointer;
  opacity: 0; transition: opacity .3s;
}
#stage-wrap:hover #bar, #ui:not(.playing) #bar { opacity: 1; }
#bar .track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); position: relative; }
#bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--paper); width: 0; }
#poster-note {
  position: fixed; bottom: 10px; left: 0; right: 0; text-align: center;
  font: 13px/1.4 system-ui, sans-serif; color: rgba(255,255,255,.55); padding: 0 16px;
}
#poster-note a { color: rgba(255,255,255,.8); }
body.render #poster-note { display: none; }