:root {
  --bg: #000;
  --wood: #8a5a2b;
  --parch: #fff4c2;
  --ink: #4a2a0a;
  --gold: #f5c542;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: 'PT Sans', Arial, sans-serif; color: #fff; user-select: none; -webkit-user-select: none; }

#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#viewport, #stage, #stage * { touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#stage input { touch-action: manipulation; -webkit-user-select: text; user-select: text; }
#stage {
  position: relative; width: 640px; height: 480px; background: #000; overflow: hidden;
  transform-origin: 50% 50%; flex: none;
}
#stage.crisp img { image-rendering: pixelated; }
#scene-root, #overlay-root, #fx-root { position: absolute; inset: 0; }
#overlay-root { pointer-events: none; }
#overlay-root > * { pointer-events: auto; }
#fx-root { pointer-events: none; }

.scene { position: absolute; inset: 0; overflow: hidden; }
.layer { position: absolute; inset: 0; }
.obj { position: absolute; }
.obj.hidden { display: none !important; }
img.obj { pointer-events: none; -webkit-user-drag: none; }
img.obj.hot { pointer-events: auto; }
.obj.clickable { cursor: pointer; }
svg.obj { overflow: visible; pointer-events: none; }
svg.obj .shape { pointer-events: none; }
svg.obj.hot .shape { pointer-events: all; }
.field {
  font-family: 'PT Sans', Arial, sans-serif; font-size: 14px; line-height: 1.15; color: #000;
  white-space: pre-wrap; overflow: hidden;
}
.field.script-font { font-family: 'Marck Script', cursive; }

/* modal viewers (dialog pages) */
.viewer-shade { position: absolute; inset: 0; background: rgba(0,0,0,0); }
.viewer { position: absolute; box-shadow: 0 6px 24px rgba(0,0,0,.6); overflow: hidden; }
.viewer .scene { position: relative; inset: auto; }

.label-wood {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Marck Script', cursive; color: #ffe9a8; text-shadow: 1px 1px 0 #3a1d00, 0 0 2px #3a1d00;
  font-size: 17px; line-height: 1; cursor: pointer; border-radius: 3px;
}
.label-wood:hover { color: #fff; text-shadow: 0 0 6px #ffcc33, 1px 1px 0 #3a1d00; }
.label-wood.disabled { color: #b9935a; cursor: default; text-shadow: 1px 1px 0 #3a1d00; }
.label-plain {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Marck Script', cursive; color: #5a2d00; font-size: 16px; line-height: 1.05;
}
.msg-text {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'PT Sans', Arial, sans-serif; color: #4a2300; font-size: 13px; line-height: 1.2; padding: 2px 6px;
}
input.name-input {
  position: absolute; border: none; outline: none; background: transparent; font-family: 'PT Sans', Arial, sans-serif;
  font-size: 15px; color: #3a1d00; padding: 0 4px;
}

/* boot screen */
#boot {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #3a1b06, #000 70%); z-index: 10;
}
#boot.gone { display: none; }
.boot-box { text-align: center; }
.boot-title { font-family: 'Ruslan Display', serif; font-size: 56px; color: var(--gold); text-shadow: 0 2px 0 #6b3b00, 0 0 18px #a8650088; }
.boot-sub { color: #c9a46a; margin: 8px 0 28px; font-size: 14px; }
#boot-progress { color: #e0c48a; font-size: 14px; min-height: 20px; }
#boot-start {
  margin-top: 18px; font-family: 'Marck Script', cursive; font-size: 26px; padding: 8px 36px; color: #ffe9a8;
  background: linear-gradient(#9b6430, #5e3410); border: 2px solid #c58c4a; border-radius: 8px; cursor: pointer;
  text-shadow: 1px 1px 0 #2a1200;
}
#boot-start:hover { filter: brightness(1.15); }

/* small toolbar outside stage */
#hud-tools { position: fixed; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 5; opacity: .35; transition: opacity .2s; }
#hud-tools:hover { opacity: 1; }
#hud-tools button { background: #2a1a0c; color: #e8cf9a; border: 1px solid #6b4a24; border-radius: 4px; font-size: 12px; padding: 4px 8px; cursor: pointer; }

.subtitle {
  position: absolute; left: 30px; right: 90px; bottom: 6px; text-align: center; color: #fff; font-size: 13px; line-height: 1.25;
  text-shadow: 0 0 3px #000, 1px 1px 0 #000; pointer-events: none;
}
video.fullvideo { position: absolute; background: #000; }

/* phones held upright: ask to rotate */
#rotate-hint {
  display: none; position: fixed; inset: auto 0 0 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  text-align: center; color: #ffe9a8; font-family: 'Marck Script', cursive; font-size: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.85) 30%); z-index: 6; pointer-events: none;
}
@media (orientation: portrait) and (max-width: 700px) { #rotate-hint { display: block; } }
@media (hover: none) { #hud-tools { opacity: .8; } }