:root{--bg:#0b0d12;--card:#141821;--line:#262c3a;--text:#e8ebf2;--mute:#97a0b3;--accent:#5eead4;--accent-ink:#06211d;--danger:#f87171}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.hidden{display:none!important}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .06s,background .15s,opacity .15s}
button:active:not(:disabled){transform:scale(.96)}
button:disabled{opacity:.45;cursor:default}
.view{min-height:100%}
.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:.6rem 1.3rem;font-weight:650}
.ghost{background:rgba(20,24,33,.72);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;backdrop-filter:blur(6px)}
.ghost:hover{border-color:var(--accent)}

/* library */
#library{max-width:1100px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 16px 48px}
.top h1{margin:.2em 0 0;letter-spacing:.35em;font-weight:300;font-size:1.6rem}
.tag{margin:.2em 0 1.4em;color:var(--mute)}
.newstory{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:24px}
.newstory label{display:block;font-weight:600;margin-bottom:8px}
.newstory textarea{width:100%;resize:vertical;background:#0f131b;border:1px solid var(--line);border-radius:12px;padding:12px;min-height:84px}
.newstory textarea:focus,.free input:focus{outline:2px solid var(--accent);outline-offset:1px}
.row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.row select{background:#0f131b;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}
.row .primary{margin-left:auto}
.msg{color:var(--danger);margin:.6em 0 0;min-height:1.2em;font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.story{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.story .cover{aspect-ratio:16/10;background:linear-gradient(135deg,#1b2233,#10141d);background-size:cover;background-position:center;display:grid;place-items:center;color:var(--mute);font-size:.9rem}
.story .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.story h3{margin:0;font-size:1.05rem}
.story .meta{color:var(--mute);font-size:.82rem}
.story .acts{display:flex;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.story .acts button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.35rem .9rem}
.story .acts .primary{border:0;background:var(--accent)}
.story .acts .del{margin-left:auto;color:var(--mute)}
.badge{position:absolute;top:10px;left:10px;background:rgba(11,13,18,.75);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.75rem}
.badge.done{border-color:var(--accent);color:var(--accent)}
.empty{color:var(--mute);text-align:center;margin-top:40px}

/* player: the picture and the story never cover each other, and everything fits one screen.
   Wide screens: picture on the left, story column on the right. Narrow / portrait: picture on top, story below.
   Only the reading part scrolls; the choices stay visible at the bottom. */
#player{--side:clamp(360px,32vw,500px);position:fixed;inset:0;overflow:hidden;background:#05070b;display:flex;flex-direction:column}
#player.hidden{display:none!important}
.stage{position:relative;flex:0 0 42svh;overflow:hidden;background:radial-gradient(circle at 50% 30%,#1a2233,#07090d)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.stage img.show{opacity:1;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.03) translate(0,0)}to{transform:scale(1.13) translate(-1.6%,-1.2%)}}
@media (prefers-reduced-motion:reduce){.stage img.show{animation:none}}
.shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0,transparent 22%,transparent 75%,#05070b 100%)}
.bar{position:absolute;top:0;left:0;right:0;display:flex;gap:8px;align-items:center;padding:max(10px,env(safe-area-inset-top)) 12px 10px;z-index:3;flex-wrap:wrap}
.grow{flex:1}
.pill{background:rgba(11,13,18,.7);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.78rem;color:var(--accent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.panel{flex:1;min-height:0;display:flex;flex-direction:column;background:#05070b;z-index:2}
.read{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.act{flex:none;padding:8px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid rgba(38,44,58,.6);background:#05070b}
.head{display:flex;align-items:center;gap:10px;min-height:1.2em}
.who{color:var(--accent);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;flex:1}
.shots{display:flex;gap:5px}
.shots i{width:18px;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.shots i.seen{background:rgba(94,234,212,.45)}.shots i.on{background:var(--accent)}
.you{color:var(--mute);font-style:italic;margin:.4em 0 .8em}
.unfold{display:flex;gap:6px;padding:.4em 0}
.unfold span{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.25;animation:unfold 1.2s ease-in-out infinite}
.unfold span:nth-child(2){animation-delay:.2s}.unfold span:nth-child(3){animation-delay:.4s}
@keyframes unfold{40%{opacity:1;transform:translateY(-3px)}}
.next{width:100%;background:transparent;border:1px solid var(--accent);color:var(--accent);border-radius:12px;padding:.6rem 1rem;font-weight:600;letter-spacing:.04em}
.next:hover{background:rgba(94,234,212,.1)}
.narration{font-size:1.02rem;line-height:1.65;margin:.25em 0 .7em}
.lines{list-style:none;margin:0 0 .6em;padding:0;display:grid;gap:.4em}
.lines li{padding:.45em .8em;border-left:3px solid var(--line);background:rgba(20,24,33,.6);border-radius:0 10px 10px 0;transition:border-color .2s,background .2s}
.lines li.speaking{border-left-color:var(--accent);background:rgba(94,234,212,.12)}
.lines b{color:var(--accent);font-weight:600;margin-right:.4em}
.cue{color:var(--mute);font-style:italic;font-size:.85rem;margin:.2em 0}
.status{color:var(--mute);margin:.5em 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.status .dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.status .err{color:var(--danger)}
.choices{display:grid;gap:6px}
.choice{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.55rem .85rem;font-size:.95rem;line-height:1.35}
.choice:hover:not(:disabled){border-color:var(--accent);background:rgba(94,234,212,.1)}
.choice small{display:block;color:var(--mute);font-size:.75rem}
.free{display:flex;gap:8px;margin-top:8px}
.free input{flex:1;min-width:0;background:#0f131b;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem}
.free .primary{padding:.5rem 1.1rem}
.ending{text-align:center;padding:12px;letter-spacing:.4em;color:var(--accent);font-weight:300}
.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#1c2230;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;opacity:0;pointer-events:none;transition:.2s;z-index:10;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* wide screens: story column on the right, the picture keeps the rest of the screen */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  #player{flex-direction:row}
  .stage{flex:1 1 auto;height:100%}
  .shade{background:linear-gradient(to bottom,rgba(0,0,0,.5) 0,transparent 18%)}
  .bar{right:var(--side)}
  .panel{flex:0 0 var(--side);height:100%;border-left:1px solid var(--line)}
  .read{padding:max(18px,env(safe-area-inset-top)) 22px 10px}
  .act{padding:10px 22px 16px}
  .narration{font-size:1.06rem}
}
@media (max-width:600px){.bar .ghost{padding:.3rem .65rem;font-size:.82rem}.stage{flex-basis:36svh}.choice{font-size:.92rem;padding:.5rem .75rem}}