:root{--bg:#000;--fg:#d6d1c7;--say:#e6c29a;--sys:#5a554e;--faint:#3e3a35;--a:#e6c29a;--h:#e8d68a;--x:#a9b3bd}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{color:var(--fg);font-family:"DotGothic16","Osaka-Mono","MS Gothic",monospace}

.game{--dim:#5f5a53;height:100%;overflow:hidden;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html:has(.game){height:100%;overflow:hidden}
#stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  touch-action:none}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}
#tx{padding:14px 16px 0;min-height:7.4em;font-size:clamp(13px,3.8vw,18px);line-height:1.8;
  letter-spacing:.04em}
#prev{color:var(--dim);min-height:1.8em}
#prev.say{color:#7a6552}
#prev.say2{color:#7a7050}
#prev.say3{color:#5c6268}
#cur{min-height:1.8em}
#cur.say{color:var(--say)}
#cur.say2{color:#e8d68a}
#cur.say3{color:#a9b3bd}
#spd{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:12px;padding:5px 10px;font-size:15px;
  font-weight:bold;letter-spacing:.06em;color:#1a1400;background:#ffd21f;border:2px solid #1a1400;
  box-shadow:3px 3px 0 #1a1400;opacity:0;z-index:6;pointer-events:none}
#ui{position:fixed;display:none;overflow:hidden;pointer-events:none;color:#cfc8ba;line-height:1.45;
  padding:.3em .7em}
#ui.wb{color:#2a2a4a;line-height:1.6;padding:.5em .8em}
.post{margin-bottom:.45em}
.post span{display:block;color:#6f8a5e;font-size:.78em}
.post.del{color:#5f5a53}
.corner{position:fixed;bottom:env(safe-area-inset-bottom,0px);z-index:7;padding:12px 16px;
  font-size:clamp(13px,3.6vw,15px);letter-spacing:.08em;color:#a39c91;text-decoration:none}
.corner:hover,.corner:focus-visible{color:#f0e9dc;outline:none}
#home{left:0}
#textl{right:0}
#hint{position:fixed;left:0;right:0;bottom:calc(48px + env(safe-area-inset-bottom,0px));
  text-align:center;font-size:12px;letter-spacing:.08em;color:var(--sys);opacity:0;
  transition:opacity .8s;pointer-events:none}
.ov{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;text-align:center;background:#000;transition:opacity 1.4s}
#title{cursor:pointer}
#title.off,#end:not(.on){opacity:0;pointer-events:none}
.t1{font-size:clamp(30px,9vw,54px);letter-spacing:.2em;margin-right:-.2em;color:#e8e2d6}
.t2{font-size:13px;color:#8a847a;letter-spacing:.12em}
.t3{margin-top:28px;font-size:14px;color:#b9b2a6;animation:bl 2.4s steps(2) infinite}
.t4{font-size:11px;color:#4f4a44}
@keyframes bl{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.t3{animation:none}}
#again{margin-top:26px;font:inherit;font-size:14px;color:#d6d1c7;background:none;
  border:1px solid #4a4640;padding:10px 22px;letter-spacing:.14em;cursor:pointer}
#again:hover,#again:focus-visible{border-color:#b9b2a6;outline:none}

.text{--dim:#6d675e;font-size:clamp(15px,4vw,17px);line-height:2.1;letter-spacing:.04em;
  padding:calc(56px + env(safe-area-inset-top,0px)) 20px calc(56px + env(safe-area-inset-bottom,0px))}
.text main{max-width:34em;margin:0 auto}
.text header{margin-bottom:5em}
.text h1{font-size:clamp(30px,9vw,46px);font-weight:normal;letter-spacing:.2em;color:#e8e2d6}
.text h2{margin:6em 0 2em;font-size:.75em;font-weight:normal;letter-spacing:.3em;color:var(--dim)}
.text p{margin:0 0 1.2em}
.text .sub{color:var(--dim);font-size:.85em}
.text .gap{margin-top:3.5em}
.text .tc{display:grid;grid-template-columns:6.4em 1fr;margin:0 0 .5em}
.text .tc span:first-child{color:var(--dim)}
.text .q{margin:0 0 .6em}
.text .a{color:var(--a)}
.text .h{color:var(--h)}
.text .x{color:var(--x)}
.text .date{margin:4em 0 1.2em;color:var(--dim)}
.text .bbs{border-left:1px solid var(--faint);padding-left:1em;margin:0 0 1.6em;font-size:.92em}
.text .bbs p{margin:0 0 .8em}
.text .bbs small{display:block;color:#6f8a5e;font-size:.8em;line-height:1.6}
.text .del{color:var(--dim)}
.text .board{border:1px solid var(--faint);padding:.8em 1em;margin:0 0 1.6em;color:#b9b2a6}
.text .board p{margin:0}
.text .rew{color:var(--dim);margin:0 0 1em}
.text .void{height:70vh}
.text a{color:#b9b2a6;text-decoration:none;border-bottom:1px solid var(--faint)}
.text a:hover,.text a:focus-visible{color:var(--fg);border-color:var(--fg);outline:none}
.text nav{display:flex;justify-content:space-between;max-width:34em;margin:0 auto;font-size:.9em}
.text nav.top{margin-bottom:4em}