:root{--ink:#f3e9d2;--bg:#12091c;--panel:#1d1030;--accent:#f0b23c;--hi:#ff6b57;font-family:"Courier New",Courier,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#app{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr}
#stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
#stage video,#stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
#stage video.on,#stage img.on{opacity:1}
#scene-name{position:absolute;left:10px;top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-shadow:0 1px 2px #000;opacity:.9}
#panel{display:flex;flex-direction:column;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--panel);overflow:auto}
#dialog{white-space:pre-line;min-height:3.2em;line-height:1.35;font-size:16px;color:var(--ink);border-left:3px solid var(--accent);padding-left:10px}
#menu{display:grid;gap:6px}
#menu button{all:unset;cursor:pointer;padding:10px 12px;border-radius:4px;background:#2b1a44;color:#ffe9a8;font:inherit;font-size:16px}
#menu button:hover,#menu button:focus-visible{background:#3a2560;color:#fff}
#menu button::before{content:"› ";color:var(--hi)}
#menu button:disabled{opacity:.4;cursor:default}
#title,#end{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px;background:rgba(18,9,28,.72);backdrop-filter:blur(2px)}
#app[data-state="title"] #title,#app[data-state="end"] #end{display:flex}
#title h1,#end h1{margin:0;font-size:clamp(28px,7vw,64px);line-height:1.05;color:var(--accent);text-shadow:3px 3px 0 #000}
#title p,#end p{margin:0;opacity:.85}
#title button,#end button{all:unset;cursor:pointer;padding:12px 22px;border:2px solid var(--accent);border-radius:6px;color:var(--accent);font:inherit;font-size:18px}
#title button:hover,#end button:hover{background:var(--accent);color:#000}
#stamp{position:fixed;right:6px;bottom:4px;font-size:10px;color:rgba(255,255,255,.3);pointer-events:none}
/* landscape / desktop: stage fills, panel overlays the bottom of the stage */
@media (orientation:landscape){
  #app{grid-template-rows:1fr}
  #stage{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  #panel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(18,9,28,.92) 30%);padding:28px 18px 14px;max-height:55%}
  #menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  #dialog{font-size:18px}
}