/* MS-DOS 風(VGA 16色) */
:root{
  --bg:#000000; --fg:#aaaaaa; --white:#ffffff; --yellow:#ffff55; --red:#ff5555;
  --cyan:#55ffff; --green:#55ff55; --magenta:#ff55ff; --gray:#686868; --blue:#0000aa;
  --brown:#d08a3a; --fs:1;
}
html,body{margin:0;height:100%;background:var(--bg);}
body{
  color:var(--fg);
  font-family:'DotGothic16','MS Gothic','Osaka-Mono',monospace;
  font-size:calc(clamp(16px,2.1vw,20px) * var(--fs));
  line-height:1.55;
  -webkit-font-smoothing:none;
  -webkit-text-size-adjust:100%;
}
#screen{
  box-sizing:border-box;
  max-width:42em; height:100%; margin:0 auto;
  display:flex; flex-direction:column;
  padding:0 16px;
}
#bar{
  background:var(--blue); color:var(--white);
  display:flex; justify-content:space-between;
  padding:0 .5em; margin:0 -16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#status{
  padding:.3em 0; border-bottom:1px solid var(--gray);
  min-height:3.2em; line-height:1.45;
}
#status .st{display:inline-block; white-space:nowrap; margin-right:.9em;}
#status .bar{letter-spacing:-.12em; margin:0 .25em 0 .15em; font-size:.85em;}
#out{
  flex:1; overflow-y:auto; padding:.5em 0 .8em;
  white-space:pre-wrap; overflow-wrap:anywhere; line-break:strict;
  text-shadow:0 0 3px rgba(170,170,170,.35);
  scrollbar-width:thin; scrollbar-color:var(--gray) var(--bg);
  -webkit-overflow-scrolling:touch;
}
.ln{min-height:1.55em; text-wrap:pretty;}
/* 挿絵: ぼかさず拡大(昔のドット絵の見え方)。出た時に白く光って揺れる */
canvas.art{display:block; width:100%; max-width:640px; aspect-ratio:2/1; image-rendering:pixelated; image-rendering:crisp-edges; image-rendering:pixelated; border:2px solid var(--gray); margin:.5em 0; background:#000;}
canvas.art.hide{display:none;}
/* 結末の絵: 文章が流れても上に残る */
canvas.art.stick{position:sticky; top:0; z-index:1; box-shadow:0 6px 8px #000;}
body.flash{filter:invert(1) contrast(1.4);}
#screen.shake{animation:shake .5s steps(2) 1;}
@keyframes shake{0%{transform:translate(0,0)}15%{transform:translate(-7px,3px)}30%{transform:translate(6px,-4px)}45%{transform:translate(-5px,-2px)}60%{transform:translate(4px,3px)}80%{transform:translate(-2px,1px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion: reduce){ #screen.shake{animation:none} body.flash{filter:none} }
/* 枠の行: 折り返さず、全角38字(半角76字)が画面の幅に収まる大きさにする */
.ln.box{white-space:pre; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; font-size:max(10px, min(1em, calc((100vw - 34px) / 38)));}
/* 英語版: 単語の途中で折り返さない */
.lang-en #out{overflow-wrap:break-word; line-break:auto; word-break:normal;}
.lang-en #foot button{font-size:.8em;}
#prompt{padding:.2em 0; color:var(--white); border-top:1px solid var(--gray); display:flex; align-items:center;}
#prompt input{
  flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--green);
  font:inherit; caret-color:var(--green); padding:0 .2em;
}
#foot{
  background:var(--fg);
  display:flex; flex-wrap:wrap;
  margin:0 -16px; padding:0 8px;
}
#foot button{
  font:inherit; font-size:.85em; background:none; border:0; color:var(--bg);
  padding:.35em .55em; cursor:pointer;
}
#foot button:hover,#foot button:active{background:var(--blue); color:var(--white);}
.cursor{animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

.w{color:var(--white);} .y{color:var(--yellow);} .r{color:var(--red);}
.c{color:var(--cyan);} .g{color:var(--green);} .m{color:var(--magenta);}
.d{color:var(--gray);} .br{color:var(--brown);}
.big{color:var(--white); letter-spacing:.1em;}
.low{color:var(--red);}

/* 選択肢: 番号を反転した箱で見せる。ぶら下げインデントで折り返しても読みやすく */
.opt{cursor:pointer; padding:.15em .3em .15em 2.1em; text-indent:-1.8em; border-radius:2px;}
.opt .k{display:inline-block; min-width:1.2em; text-align:center; text-indent:0; margin-right:.25em; background:var(--fg); color:var(--bg);}
.opt.d{cursor:default;}
.opt.d .k{background:var(--gray);}
.opt:not(.d):hover,.opt.sel{background:#1a1a5a;}
.opt.sel::after{content:" ◀"; color:var(--yellow);}
@media (pointer:coarse){
  .opt{padding-top:.45em; padding-bottom:.45em; margin:.1em 0;}
  .opt:not(.d){border-bottom:1px dotted #333;}
}
body.shell #bar{padding-left:calc(env(safe-area-inset-left,0px) + 96px); min-height:calc(env(safe-area-inset-top,0px) + 50px); align-items:flex-end; padding-bottom:.25em; box-sizing:border-box;}
#bar-title{overflow:hidden; text-overflow:ellipsis; min-width:0;}
#bar-right{flex:none; margin-left:.8em; color:var(--yellow);}

/* 走査線 */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px);
}