:root{
  --bg:#0d1117;--panel:#161c27;--panel2:#1c2535;--panel3:#232f45;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.14);
  --accent:#6366f1;--accent2:#f59e0b;
  --text:#e8edf8;--muted:#8b93a0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;}
body{display:flex;flex-direction:column;align-items:center;padding:18px 12px 30px;}
a{color:var(--accent2);text-decoration:none;}

.brand{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.brand img{height:30px;border-radius:7px;}
.brand span{font-family:'Fredoka',cursive;font-weight:700;font-size:1.05rem;}

#card{width:min(560px,96vw);}
.story-title{font-family:'Fredoka',cursive;font-size:1.35rem;color:var(--accent2);text-align:center;margin-bottom:2px;}
.story-byline{text-align:center;font-size:.62rem;color:var(--muted);margin-bottom:14px;}
.story-byline a{font-size:.62rem;}

#scene{background:var(--panel);border:1px solid var(--border2);border-radius:16px;padding:18px 18px 14px;box-shadow:0 10px 34px rgba(0,0,0,.45);}
.sc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sc-head img{width:38px;height:38px;border-radius:10px;object-fit:cover;}
.sc-head .emoji{font-size:1.55rem;line-height:1;}
.sc-name{font-family:'Fredoka',cursive;font-size:.95rem;color:var(--accent2);}
.sc-text{font-size:.92rem;line-height:1.75;color:var(--text);white-space:pre-wrap;margin-bottom:16px;}
.sc-choices{display:flex;flex-direction:column;gap:7px;}
.sc-choice{padding:11px 15px;border-radius:11px;border:1px solid var(--border2);background:var(--panel3);cursor:pointer;font-size:.84rem;color:var(--text);transition:all .13s;text-align:left;font-family:'Inter',sans-serif;}
.sc-choice:hover:not(:disabled){background:rgba(99,102,241,.16);border-color:var(--accent);transform:translateY(-1px);}
.sc-choice:disabled{opacity:.42;cursor:not-allowed;}
.sc-end{font-family:'Fredoka',cursive;font-size:1rem;color:var(--muted);text-align:center;padding:20px 8px;}
.pv-vars{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px;padding-top:10px;border-top:1px dashed var(--border2);}
.fx-chip{font-size:.62rem;padding:2px 8px;border-radius:10px;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);color:#a5b4fc;white-space:nowrap;}
.tag-chip{display:inline-block;font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:8px;margin-left:auto;}

.btn-row{display:flex;gap:8px;margin-top:14px;justify-content:center;}
.m-btn{padding:9px 22px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.88rem;font-weight:600;}
.m-ok{background:var(--accent);color:white;}
.m-ok:hover{filter:brightness(1.12);}
.m-cancel{background:rgba(255,255,255,.08);color:var(--text);}

#empty{background:var(--panel);border:1px dashed var(--border2);border-radius:16px;padding:34px 24px;text-align:center;width:min(560px,96vw);}
#empty h2{font-family:'Fredoka',cursive;font-size:1.1rem;color:var(--accent2);margin-bottom:8px;}
#empty p{font-size:.78rem;color:var(--muted);line-height:1.7;margin-bottom:16px;}
#dropzone{border:1.5px dashed var(--border2);border-radius:12px;padding:22px;font-size:.74rem;color:var(--muted);cursor:pointer;transition:all .15s;}
#dropzone:hover,#dropzone.over{border-color:var(--accent);color:var(--text);background:rgba(99,102,241,.05);}

.err-box{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);color:#f87171;font-size:.76rem;border-radius:10px;padding:10px 14px;margin-top:12px;display:none;}

footer{margin-top:26px;font-size:.58rem;color:rgba(255,255,255,.25);display:flex;gap:14px;}
footer a{color:inherit;}
footer a:hover{color:rgba(255,255,255,.6);}
@media(max-width:600px){
  body{ padding:12px 8px 24px; }
  #scene{ padding:14px 14px 12px; border-radius:12px; }
  .sc-text{ font-size:.82rem; line-height:1.65; }
  .sc-choice{ padding:12px 14px; font-size:.82rem; }
  #empty{ padding:24px 16px; }
  .story-title{ font-size:1.15rem; }
}
@media(prefers-reduced-motion:reduce){
  .sc-choice{ transition:none; }
}

/* Embed mode: chrome-free story for an iframe or game (?embed=1) */
html.story-embed body{padding:6px;background:transparent;}
html.story-embed .brand,
html.story-embed footer,
html.story-embed .char-touch,
html.story-embed #card > p.use-it-with,
html.story-embed .m-share,
html.story-embed .m-cancel{display:none;}
html.story-embed #card{width:100%;max-width:100%;}
html.story-embed #scene{box-shadow:none;}
html.story-embed .story-title{margin-top:2px;}