:root {
  --bg: #1b1b1b;
  --panel: #1f1f1f;
  --box: #3a3a3a;
  --box-text: #f2f2f2;
  --bubble: #fbf6e6;
  --bubble-text: #1d1d1d;
  --tag: #8a6a3b;
  --tag-text: #fff3d6;
  --actor: #f3c552;
  --actor-dark: #9b5d00;
  --green: #53d63c;
  --green-dark: #2f8f1f;
  --frame: #3b3b3b;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--box-text);
  font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; overflow: hidden; }
button { font: inherit; cursor: pointer; }

#app { position: relative; height: 100%; height: 100dvh; margin: 0 auto;
  width: min(100vw, calc(100dvh * 0.5625), 520px); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }

#stage { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 720 / 780; max-height: 56%; background: #000; overflow: hidden; }
.vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.vid.on { opacity: 1; }
.round { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #d9b96a; background: rgba(0,0,0,.55) center/22px no-repeat; }
#voiceBtn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8c66d'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E"); }
#voiceBtn.off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm15.6 3 2.1-2.1-1.4-1.4-2.1 2.1-2.1-2.1-1.4 1.4 2.1 2.1-2.1 2.1 1.4 1.4 2.1-2.1 2.1 2.1 1.4-1.4z'/%3E%3C/svg%3E"); border-color: #777; }
#buffering { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); }
#buffering span { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--panel); border-top: 3px solid #5a4a2c; }
#dayTag { display: flex; align-items: center; gap: 8px; padding: 8px 14px 2px; font-weight: 700; font-size: 14px; letter-spacing: .5px; color: #ddd; }
#dayTag i { flex: 1; height: 1px; background: #555; }
#log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
#log::before { content: ""; margin-top: auto; }

.narr { background: var(--box); color: var(--box-text); border-radius: 6px; padding: 9px 12px; font-size: 16.5px; line-height: 1.3; font-weight: 600; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.narr .actor { color: var(--actor); }
.say { display: flex; align-items: flex-end; gap: 8px; }
.who { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; }
.who img { width: 60px; height: 69px; object-fit: contain; object-position: bottom; display: block; }
.who img.sil { filter: brightness(.55) drop-shadow(0 0 1px #000); }
.who b { margin-top: -2px; background: var(--tag); color: var(--tag-text); font-size: 12px; padding: 1px 8px; border-radius: 3px; white-space: nowrap; }
.bubble { position: relative; background: var(--bubble); color: var(--bubble-text); border-radius: 6px; padding: 9px 12px; font-size: 16.5px; line-height: 1.3; font-weight: 700; margin-bottom: 18px; }
.bubble::before { content: ""; position: absolute; left: -8px; bottom: 12px; border: 8px solid transparent; border-right-color: var(--bubble); border-left: 0; }
.bubble .actor { color: var(--actor-dark); }
.pick { align-self: flex-end; background: #2c4a23; border: 1px solid #4f8a3c; color: #dff5d6; border-radius: 6px; padding: 7px 12px; font-size: 15px; font-weight: 700; }
.new { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#controls { flex: 0 0 auto; padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.green { background: linear-gradient(#6ee653, var(--green) 55%, #44c02f); color: #fff; border: 3px solid #2a2a2a; outline: 3px solid var(--frame);
  border-radius: 4px; font-weight: 800; text-shadow: 0 1px 1px rgba(0,0,0,.45); box-shadow: inset 0 -4px 0 var(--green-dark); }
.green:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 var(--green-dark); }
#nextBtn { width: 52%; height: 50px; font-size: 22px; letter-spacing: 3px; }
#nextBtn[disabled] { filter: grayscale(.6) brightness(.7); }
#choices { width: 100%; display: flex; flex-direction: column; gap: 10px; }
#choices button { min-height: 50px; font-size: 18px; padding: 6px 12px; }

#cover, #endCard { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 30%, rgba(80,40,10,.55), rgba(0,0,0,.92) 70%), #000; z-index: 5; }
#cover { background-image: radial-gradient(ellipse at 50% 30%, rgba(60,30,8,.4), rgba(0,0,0,.94) 72%), url("media/poster.jpg?v=L8"); background-size: cover; background-position: center; }
.coverBox { text-align: center; width: 100%; max-width: 360px; }
.kicker { color: var(--actor); font-weight: 800; letter-spacing: 2px; font-size: 14px; }
h1 { font-size: 56px; margin: 6px 0 4px; letter-spacing: 1px; text-shadow: 0 3px 0 #000; }
h2 { font-size: 30px; margin: 8px 0 12px; }
.sub { margin: 0 0 22px; font-size: 18px; color: #ddd; }
.big { width: 70%; height: 56px; font-size: 24px; }
.hint { color: #aaa; font-size: 14px; margin-top: 14px; }
#pathList { text-align: left; margin: 0 auto 20px; padding-left: 22px; font-size: 16px; line-height: 1.45; color: #e8e8e8; }
[hidden] { display: none !important; }
#loadErr { position: absolute; inset: 0; background: rgba(0,0,0,.7); color: #fff; border: 0; font-size: 18px; padding: 24px; }