:root{
  --bg:#000;--fg:#fff;--dim:#9a9a9a;--brown:#b0703a;
  --line:3px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:"DotGothic16",monospace;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  -webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible{outline:2px dashed #fff;outline-offset:2px}

/* ---- window (1986 らしい黒地・白い細枠・角は四角) ---- */
.win{background:#000;border:var(--line) solid #fff;border-radius:4px;box-shadow:0 0 0 3px #000;padding:.6em .8em;
  transform-origin:top center;animation:open .16s steps(4) both}
@keyframes open{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---- screen ---- */
.screen{position:relative;width:min(100vw - 16px,720px);container-type:inline-size;margin:8px auto}
.title{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6cqw;text-align:center;padding:24px 16px}
.title h1{font-family:"Noto Serif JP",serif;font-weight:700;font-size:clamp(26px,7cqw,52px);line-height:1.5;margin:0;letter-spacing:.08em}
.title .en{font-size:clamp(13px,2.6cqw,18px);color:var(--dim);letter-spacing:.12em}
.proj{display:flex;flex-direction:column;align-items:center;gap:.7em;padding-bottom:1.2em;border-bottom:var(--line) solid #fff;width:min(640px,100%)}
.proj .pname{font-size:clamp(22px,5.6cqw,40px);letter-spacing:.12em;color:#ffe9a8}
.proj .pmine{animation:blink 1.4s steps(1) infinite}
.proj .ptag{font-size:clamp(13px,2.9cqw,19px);line-height:1.7;letter-spacing:.06em}
.title .troupe{font-size:clamp(14px,3cqw,20px);letter-spacing:.2em}
.start{font-size:clamp(18px,4.2cqw,28px);padding:.4em 1em}
.start .cur{animation:blink 1s steps(1) infinite}
.title .hint{font-size:clamp(11px,2.2cqw,14px);color:var(--dim)}
.stars{position:fixed;inset:0;pointer-events:none;z-index:-1}
.stars i{position:absolute;width:3px;height:3px;background:#fff;animation:tw 3s steps(2) infinite}
@keyframes tw{50%{opacity:.15}}
@keyframes blink{50%{opacity:0}}

.game{display:none}
.game.on{display:block}
.view:not(.on){display:none!important}

.tnotice{font-size:clamp(14px,3.2cqw,20px);line-height:1.6;letter-spacing:.1em;color:#ffe9a8}
.tnotice b{font-weight:400;font-size:1.25em;animation:blink 1.4s steps(1) infinite}
.notice{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8em;width:100%;margin:0 auto 8px;text-align:left;font-size:clamp(14px,3.3cqw,22px);line-height:1.5;padding:.45em .8em}
.notice .ntag{background:#fff;color:#000;padding:0 .4em;font-size:.8em;letter-spacing:.1em}
.notice .nbody b{font-weight:400;color:#ffe9a8;white-space:nowrap}
@media (max-width:440px){.notice{font-size:12px;gap:.5em;padding:.4em .6em}}
.notice .ngo{animation:blink 1s steps(1) infinite}
.notice:hover .ngo,.notice:focus-visible .ngo{animation:none}
.jlayer{position:absolute;pointer-events:none}
.jlayer .jiro{position:absolute;width:calc(72 / 664 * 100%);image-rendering:pixelated}
.jlayer .jfx{position:absolute;color:#fff;font-size:clamp(12px,2.6cqw,18px);text-shadow:2px 2px 0 #000;white-space:nowrap}
.scene{position:relative;width:100%;aspect-ratio:664/700;max-height:min(58svh,calc(100svh - 480px));min-height:200px;margin:0 auto;
  background:url(img/room.png) center/contain no-repeat;image-rendering:pixelated}
.scene .moon{position:absolute;left:41%;top:9%;width:16%;height:8%}
.scene .moon i{position:absolute;width:2.5%;aspect-ratio:1;background:#fff;animation:tw 2.4s steps(2) infinite}
.scene .spark{position:absolute;left:49.5%;top:55.5%;width:3%;aspect-ratio:1;background:#ffe9a8;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark 2.2s steps(3) infinite}
@keyframes spark{0%,60%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1)}90%{opacity:.6;transform:scale(.7)}100%{opacity:0}}

/* コマンドの窓は部屋の絵に重ねない(佐々木さん 10/27)。絵の下・文の窓の上に置く */
.cmd{position:relative;margin:8px auto 0;font-size:clamp(14px,3.4cqw,22px);z-index:2}
.cmd ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:.3em 1em}
@container (max-width:480px){.cmd ul{grid-template-columns:repeat(3,auto)}}
.cmd button{display:flex;gap:.2em;align-items:center;white-space:nowrap;padding:.15em 0;width:100%;text-align:left}
.cmd button::before{content:"▶";visibility:hidden;font-size:.8em}
.cmd button.sel::before{visibility:visible;animation:blink 1s steps(1) infinite}
.sound{position:absolute;right:2cqw;top:2cqw;font-size:clamp(12px,2.8cqw,18px);z-index:2}

.msg{position:relative;margin:2cqw auto 0;font-size:clamp(15px,3.6cqw,24px);line-height:1.9;min-height:calc(4 * 1.9em + 1.2em);cursor:pointer}
.msg p{margin:0;white-space:pre-wrap}
.msg .next{position:absolute;right:.8em;bottom:.3em;animation:blink .8s steps(1) infinite;visibility:hidden}
.msg.wait .next{visibility:visible}

/* ---- 本の窓(台本・ごあいさつ。ここだけは本の字) ---- */
.book{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:12px}
.book.on{display:flex}
.book .win{width:min(720px,100%);max-height:calc(100svh - 24px);display:flex;flex-direction:column;padding:0}
.book header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:.6em .9em;border-bottom:var(--line) solid #fff;font-size:clamp(14px,3.4vw,20px)}
.book .body{overflow:auto;padding:1.2em 1.4em 2em;font-family:"Noto Serif JP",serif;font-size:clamp(15px,3.8vw,18px);line-height:2.1;-webkit-font-smoothing:auto}
.book .body p{margin:0 0 .2em;min-height:1em}
.book .body .tg{color:#c9c2b0;padding-left:2em;font-size:.94em}
.book .body .dlg{border-left:2px solid #555;padding-left:1em;margin:.6em 0 1em}
.book .body .sign{text-align:right;margin-top:1.6em}
.book .body .end{margin-top:2em;text-align:center;color:var(--dim);font-family:"DotGothic16",monospace}
.book footer{display:flex;justify-content:space-between;gap:8px;padding:.6em .9em;border-top:var(--line) solid #fff;font-size:clamp(13px,3.2vw,18px)}
.book footer button[disabled]{opacity:.3;cursor:default}
.nar{display:flex;align-items:center;gap:.6em;padding:.5em .9em;border-bottom:var(--line) solid #fff;font-size:clamp(13px,3.2vw,17px)}
.nar[hidden]{display:none}
.nar progress{flex:1;height:8px;accent-color:#fff}

/* ---- 章をえらぶ窓 ---- */
.chap{position:fixed;inset:0;z-index:8;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:12px}
.chap.on{display:flex}
.chap .win{width:min(420px,100%);font-size:clamp(15px,3.8vw,22px)}
.chap ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25em 1em}
.chap button{display:flex;gap:.2em;width:100%;text-align:left;padding:.15em 0}
.chap button::before{content:"▶";visibility:hidden;font-size:.8em}
.chap button.sel::before{visibility:visible;animation:blink 1s steps(1) infinite}
.chap button.lock{color:var(--dim)}
.chap .close{margin-top:.6em;color:var(--dim)}

.foot{margin:18px 0 24px;font-size:12px;color:var(--dim);text-align:center;line-height:1.8;padding:0 16px}

/* ---- 画面のコントローラー(初代ファミコンの手ざわりに寄せた、形だけのオマージュ) ---- */
.pad{position:relative;z-index:9;width:min(100vw - 16px,560px);margin:10px auto 0;background:#7a1e1e;border-radius:10px;padding:10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.pad__in{background:#c9a24a;border-radius:6px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}
.dpad button{background:#111;color:#555;font-size:14px;display:flex;align-items:center;justify-content:center}
.dpad .u{grid-area:1/2;border-radius:4px 4px 0 0}.dpad .l{grid-area:2/1;border-radius:4px 0 0 4px}
.dpad .r{grid-area:2/3;border-radius:0 4px 4px 0}.dpad .d{grid-area:3/2;border-radius:0 0 4px 4px}
.dpad .c{grid-area:2/2;background:#111}
.mid{display:flex;justify-content:center;gap:10px}
.mid button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:#7a1e1e;letter-spacing:.08em}
.mid button i{display:block;width:34px;height:10px;border-radius:6px;background:#333}
.ab{display:flex;gap:12px}
.ab button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;color:#7a1e1e;font-weight:700}
.ab button i{display:block;width:48px;height:48px;border-radius:50%;background:#d32b2b;box-shadow:inset 0 -4px 0 rgba(0,0,0,.3),0 0 0 4px #e8d9b0}
.pad button.down i,.dpad button.down{transform:translateY(2px);filter:brightness(.8)}
button{transition:transform .05s}
button:active:not([data-pad]){transform:translateY(1px) scale(.98);filter:brightness(.85)}
.pad__hint{margin:6px 0 0;text-align:center;font-size:11px;color:#f2e6c8}
@media (hover:hover) and (pointer:fine){.pad{width:min(100vw - 16px,420px)}.dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}.ab button i{width:38px;height:38px}}
.mid button{min-height:44px;min-width:56px;justify-content:center}
/* 幅の狭いスマホ: SELECT・START を下の段へ。十字キーの1マスと A・B は 44px 以上のまま */
@media (max-width:440px){.pad__in{grid-template-columns:auto auto;justify-content:space-between;padding:10px 12px;row-gap:2px}.mid{grid-column:1/-1;order:3}}
@media (pointer:coarse){.cmd button{min-height:44px;padding:0}.cmd ul{gap:0 1em}}

/* ---- 横向き = ゲーム機の形(左に十字キー・まん中に画面・右に A/B)。回転は端末に任せ、こちらから強制しない ---- */
@media (orientation:landscape) and (max-height:560px){
  body{background:#7a1e1e;justify-content:center}
  .stars{display:none}
  .game.on{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;grid-template-rows:minmax(0,1fr) auto auto;
    width:100vw;height:100svh;margin:0;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    gap:6px 10px;background:#7a1e1e}
  .game .pad,.game .pad__in{display:contents}
  .game .dpad{grid-column:1;grid-row:1/4;align-self:center;justify-self:center}
  .game .ab{grid-column:3;grid-row:1;align-self:end;justify-self:center;transform:rotate(-12deg)}
  .game .mid{grid-column:3;grid-row:2/4;align-self:start;justify-self:center}
  .game .mid button,.game .ab button{color:#f2e6c8}
  .game .scene{grid-column:2;grid-row:1;width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;
    background-color:#000;border:6px solid #222;border-bottom:0;border-radius:8px 8px 0 0}
  .game .msg{grid-column:2;grid-row:3;margin:0;width:100%;min-height:calc(2 * 1.7em + 1em);font-size:clamp(13px,2.2vw,18px);line-height:1.7;
    border-radius:0 0 8px 8px;box-shadow:0 0 0 6px #222}
  .game .cmd{grid-column:2;grid-row:2;margin:0;width:100%;min-width:0;font-size:clamp(12px,2vw,16px);padding:.2em .6em;border-radius:0;box-shadow:0 0 0 6px #222}
  .game .cmd ul{grid-template-columns:repeat(4,auto);gap:0 .6em}
  .game .cmd button{min-height:0;padding:.05em 0}
  .game .pad__hint,.game .foot{display:none}
  .game .notice{display:none}
  .title{gap:12px;padding:12px 16px}
  .title h1{font-size:clamp(22px,7svh,36px)}
  .title .start{font-size:18px}
}
/* プロジェクト名を足したぶん、背の低い画面ではタイトルの間をつめる */
@media (max-height:900px){.title{gap:min(6cqw,22px)}}
@media (orientation:landscape) and (max-height:560px){.proj{gap:.3em;padding-bottom:.5em}.proj .pname{font-size:20px}.proj .ptag{font-size:12px;line-height:1.5}.proj .ptag br{display:none}.title .en,.title .hint{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* ---- 見本 3 案の共通(10/31 高本さん) ---- */
.lead{font-size:clamp(20px,5cqw,34px);line-height:1.6;letter-spacing:.06em;color:#ffe9a8;margin:0}
.lead2{font-size:clamp(14px,3.1cqw,20px);line-height:1.8;letter-spacing:.05em;margin:0}
.title p{margin:0}
.tnote{font-size:clamp(14px,3.2cqw,20px);line-height:1.7;letter-spacing:.08em;color:#ffe9a8}
.credit{font-size:clamp(12px,2.6cqw,16px);line-height:1.8;color:#ddd;letter-spacing:.04em}
.credit small{color:var(--dim);font-size:.85em}
.caution{font-size:clamp(11px,2.1cqw,13px);line-height:1.6;color:var(--dim)}
.sub{color:#ddd;font-size:clamp(13px,2.8cqw,17px);text-decoration:underline;text-underline-offset:.3em}
.totop{display:block;font-size:13px;color:#ddd;margin:0 0 6px;text-align:left}
.cmd.w3 ul{grid-template-columns:repeat(3,auto)}
@container (max-width:480px){.cmd.w3 ul{grid-template-columns:repeat(2,auto)}}
.book .body .h{font-family:"DotGothic16",monospace;color:#ffe9a8;margin:1.2em 0 .3em}
.book .body .h:first-child{margin-top:0}
.book .body .role{display:grid;grid-template-columns:7.5em 1fr;gap:.2em .8em;margin:.3em 0}
.book .body .kari{color:var(--dim);font-size:.85em}
/* B案: 幕の舞台 */
.scene.stage{background:
  linear-gradient(#0000 62%,#3a2412 62%,#3a2412 64%,#7a4a22 64%),
  repeating-linear-gradient(90deg,#7a1e1e 0 14px,#a52a2a 14px 22px);image-rendering:pixelated}
.scene.stage .moon,.scene.stage .spark{display:none}
.scene.stage .boardx{position:absolute;left:50%;top:14%;transform:translateX(-50%);background:#000;border:3px solid #ffe9a8;color:#ffe9a8;padding:.3em .8em;font-size:clamp(14px,3.6cqw,24px);white-space:nowrap}
.mak{display:none;position:fixed;top:0;bottom:0;width:11vw;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,#7a1e1e 0 12px,#a52a2a 12px 20px)}
body:has(#title.on) .mak{display:block}
#title{z-index:1}
@media (max-width:700px){.mak.l,.mak.r{width:18px}}
.mak.l{left:0}.mak.r{right:0}
.mak.t{left:0;right:0;width:auto;bottom:auto;height:34px;background:repeating-linear-gradient(90deg,#a52a2a 0 20px,#7a1e1e 20px 40px);border-bottom:3px solid #ffe9a8}
.troupe2{font-size:clamp(26px,7cqw,46px);letter-spacing:.1em;font-weight:400}
/* A案: 企画の入口(ゲームではない普通のページ。窓と文字だけ受け継ぐ) */
.home{width:min(100vw - 24px,1000px);margin:0 auto;padding:28px 0 24px;display:grid;gap:18px;grid-template-columns:1fr}
.home .win{animation:none;padding:1em 1.2em}
.home h1{font-family:"DotGothic16",monospace;font-weight:400;font-size:min(4.9vw,30px);line-height:1.6;letter-spacing:.04em;color:#ffe9a8;margin:0}
.home .tag{font-size:min(3.6vw,18px);line-height:1.7;margin:.6em 0 0}
.home .first{margin-top:1.1em;padding-top:1em;border-top:var(--line) solid #fff}
.home .first small{display:block;font-size:14px;color:var(--dim);letter-spacing:.2em}
.home .first h2{font-family:"Noto Serif JP",serif;font-size:min(4.7vw,28px);line-height:1.5;margin:.2em 0}
.home .first p{margin:0;font-size:15px;line-height:1.7}
.home .start{display:block;margin:1.1em 0 .4em;width:100%;text-align:center;font-size:clamp(18px,2.4vw,24px);padding:.5em}
.home .hint{font-size:12px;color:var(--dim);margin:0;text-align:center}
.home ul{list-style:none;margin:0;padding:0;font-size:clamp(15px,2vw,18px)}
.home li button{display:block;width:100%;text-align:left;padding:.5em 0;border-bottom:1px dashed #555}
.home li button::before{content:"▶ ";color:#ffe9a8}
.home .crew{font-size:14px;line-height:1.8;color:#ddd;margin:.9em 0 0}
.home .crew small{display:block;color:var(--dim);font-size:12px}
.home .caution{grid-column:1/-1;text-align:center;margin:0}
@media (min-width:880px){.home{grid-template-columns:1.5fr 1fr;align-items:start}}
.title.screen{margin:0 auto}
.book footer[hidden]{display:none}
.book .win,.chap .win{color:#fff;font-family:"DotGothic16",monospace}