/* ===========================================================
   白い部屋と二つの扉 — スーパーファミコン風スタイル
   仮想画面 512x448（SNESの256x224を2倍）を整数倍で拡大する
   =========================================================== */

:root{
  --ink:#ffffff;
  --shadow:#000000;
  --win-a:#1b2456;
  --win-b:#101638;
  --win-line:#4a5cb0;
  --gold:#ffd24a;
  --rose:#ff8fa8;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  width:100%;height:100%;
  background:#07070d;
  overflow:hidden;
  font-family:'DotGothic16','MS Gothic','Hiragino Kaku Gothic Pro',monospace;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

body{
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#16161f 0%,#07070d 70%);
}

#frame{
  position:relative;
  width:512px;height:448px;
  transform-origin:center center;
  background:#000;
  overflow:hidden;
  box-shadow:0 0 0 2px #2a2a38, 0 0 40px 8px rgba(0,0,0,.8);
  user-select:none;
}

#gfx{
  position:absolute;inset:0;
  width:512px;height:448px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* ---- シーン共通 ---- */
.scene{
  position:absolute;inset:0;
  display:none;
  color:var(--ink);
  font-size:16px;line-height:22px;
  text-shadow:2px 2px 0 var(--shadow);
}
.scene.active{display:block}

.head{
  position:absolute;top:18px;left:0;right:0;
  text-align:center;font-size:22px;line-height:28px;font-weight:normal;
  color:var(--gold);letter-spacing:4px;
}
.foot{
  position:absolute;left:0;right:0;bottom:12px;
  text-align:center;font-size:13px;line-height:18px;color:#b9c0e8;
}

/* ---- ウィンドウ（SNESのメッセージ枠） ---- */
.win{
  background:linear-gradient(180deg,var(--win-a) 0%,var(--win-b) 100%);
  border:2px solid #f6f7ff;
  box-shadow:0 0 0 2px #000,
             inset 0 0 0 2px var(--win-line),
             inset 0 3px 0 rgba(255,255,255,.10);
}

/* =========================== タイトル =========================== */
#sc-title .logo{
  position:absolute;top:44px;left:0;right:0;
  text-align:center;
  font-size:44px;line-height:52px;letter-spacing:4px;
  color:#ffffff;
  text-shadow:
     4px 4px 0 #000,
    -2px 0 0 #7f8ad6, 2px 0 0 #7f8ad6,
     0 -2px 0 #7f8ad6, 0 2px 0 #7f8ad6,
     0 10px 18px rgba(80,100,220,.5);
}
#sc-title .logo-b{color:#ffe9a8}
#sc-title .logo-sub{
  position:absolute;top:158px;left:0;right:0;text-align:center;
  font-size:14px;color:#c9d0ff;letter-spacing:2px;
}

.menu{position:absolute;top:216px;left:0;right:0;list-style:none;text-align:center}
.menu li{
  font-size:18px;line-height:30px;color:#dfe3ff;cursor:pointer;
}
.menu li.on{color:var(--gold)}
.menu li.on::before{content:'▶';margin-right:8px;color:var(--gold)}
.menu li.on::after{content:'◀';margin-left:8px;color:var(--gold)}
.menu li.dim{color:#666f9a;cursor:default}

#sc-title .title-foot{
  position:absolute;bottom:38px;left:0;right:0;text-align:center;
  font-size:13px;color:#9aa3d8;
}
#sc-title .press{
  position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-size:16px;letter-spacing:4px;color:#fff;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* =========================== せってい =========================== */
.opts{
  position:absolute;top:56px;left:30px;right:30px;list-style:none;
  padding:6px 6px;background:rgba(8,10,24,.74);
  border:2px solid rgba(246,247,255,.6);box-shadow:0 0 0 2px #000;
}
.opts li{
  display:flex;justify-content:space-between;align-items:center;
  font-size:15px;line-height:20px;padding:4px 10px;color:#dfe3ff;cursor:pointer;
}
.opts li.on{background:rgba(120,140,255,.22);color:#fff;outline:2px solid #6c7ddb}
.opts li .v{color:var(--gold)}
.opts li.on .v::before{content:'◀ ';color:#fff}
.opts li.on .v::after{content:' ▶';color:#fff}
.opt-note{
  position:absolute;left:32px;right:32px;bottom:40px;
  font-size:12px;line-height:17px;color:#a8b0e0;min-height:34px;
}

/* =========================== あそびかた =========================== */
.helpbox{
  position:absolute;top:62px;left:34px;right:34px;bottom:44px;
  padding:14px 16px;overflow:hidden;
  font-size:14px;line-height:22px;
  background:linear-gradient(180deg,var(--win-a) 0%,var(--win-b) 100%);
  border:2px solid #f6f7ff;box-shadow:0 0 0 2px #000, inset 0 0 0 2px var(--win-line);
}
.helpbox b{color:var(--gold);font-weight:normal}
.helpbox .k{color:#9df0c0}

/* =========================== 部屋 =========================== */
.hud{
  position:absolute;top:0;left:0;right:0;height:26px;
  display:flex;align-items:center;gap:8px;padding:0 10px;
  background:linear-gradient(180deg,#0b0d1e 0%,#0b0d1ecc 70%,#0b0d1e00 100%);
  font-size:13px;line-height:26px;
}
.hud-room{color:#fff;min-width:96px}
.tbar{
  flex:1;height:8px;background:#1a1d33;border:2px solid #000;
  box-shadow:inset 0 0 0 1px #3d4478;
}
.tbar i{display:block;height:100%;width:100%;background:#54d67a;transition:background .2s}
.tbar.warn i{background:#f0c14a}
.tbar.crit i{background:#e8503c}
.hud-time{min-width:34px;text-align:right;color:#fff}
.hud-bond{min-width:64px;text-align:right;color:var(--rose)}

.doors{
  position:absolute;left:8px;right:8px;bottom:28px;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .42s linear;
}
.doors.off{transform:translateY(10px);opacity:0;pointer-events:none}
.door{
  position:relative;min-height:76px;padding:8px 10px 8px 46px;cursor:pointer;
}
.door .num{
  position:absolute;left:8px;top:8px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;color:#0d1026;background:#e9ecff;
  border:2px solid #000;box-shadow:inset -2px -2px 0 #9aa3d8;
  text-shadow:none;
}
.door .dtext{font-size:16px;line-height:24px;color:#fff}
.door.on{border-color:var(--gold);box-shadow:0 0 0 2px #000, inset 0 0 0 2px #7a5f14, 0 0 14px rgba(255,210,74,.45)}
.door.on .num{background:var(--gold)}
.door.pick{animation:pick .12s steps(1) 4}
@keyframes pick{0%,49%{filter:brightness(2.4)}50%,100%{filter:none}}
.door.gone{opacity:.25}

.prompt{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:13px;line-height:18px;color:#cdd4ff;
}
.prompt .hot{color:var(--gold)}
.prompt.flash{animation:blink .6s steps(1) infinite}

.banner{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  background:rgba(4,6,18,.82);
}
.banner.show{display:flex}
.banner-in{
  text-align:center;font-size:24px;line-height:36px;color:#fff;
  padding:24px 34px;
  background:linear-gradient(180deg,var(--win-a) 0%,var(--win-b) 100%);
  border:2px solid #f6f7ff;box-shadow:0 0 0 2px #000, inset 0 0 0 2px var(--win-line);
}
.banner-in .big{font-size:40px;line-height:54px;color:var(--rose)}
.banner-in .s{font-size:14px;line-height:22px;color:#c9d0ff}

/* =========================== エンディング =========================== */
#sc-ending{background:transparent}
.end-card{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(2,3,10,.86);
}
.end-card.show{display:flex}
.end-no{font-size:16px;letter-spacing:6px;color:#8e97d8}
.end-name{font-size:32px;line-height:46px;color:var(--gold);letter-spacing:3px;margin-top:6px}
.end-sub{font-size:17px;line-height:26px;color:#fff;margin-top:14px}

.end-box{
  position:absolute;left:30px;right:30px;top:52px;bottom:52px;
  display:none;padding:22px 26px;
  align-items:center;
  background:rgba(6,8,20,.80);
  border:2px solid rgba(246,247,255,.85);
  box-shadow:0 0 0 2px #000;
}
.end-box.show{display:flex}
.end-box p{font-size:16px;line-height:28px;white-space:pre-wrap;color:#fff;width:100%}
.end-box .cur{
  position:absolute;right:16px;bottom:10px;color:var(--gold);font-size:14px;
  animation:bob .7s steps(2) infinite;opacity:0;
}
.end-box.ready .cur{opacity:1}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(3px)}}
.end-box .fin{color:var(--gold)}

.paper{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:none;align-items:center;justify-content:center;
}
.paper.show{display:flex}
.paper .sheet{
  display:inline-block;padding:26px 30px;
  background:#f4f1e4;color:#2b2b33;
  font-size:26px;line-height:34px;letter-spacing:2px;
  border:2px solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
  text-shadow:none;transform:rotate(-1.5deg);
}
.paper .late{opacity:0;transition:opacity .1s}
.paper .late.in{opacity:1}
.paper .blank{
  display:inline-block;width:28px;border-bottom:3px solid #b9b2a0;
  vertical-align:bottom;height:26px;
}

/* =========================== 種明かし =========================== */
.revbody{
  position:absolute;top:52px;left:22px;right:22px;bottom:38px;
  padding:10px 14px;overflow:hidden;font-size:14px;line-height:19px;
  background:rgba(8,10,24,.80);
  border:2px solid rgba(246,247,255,.6);box-shadow:0 0 0 2px #000;
}
.rev-row{display:flex;gap:8px;align-items:baseline;padding:1px 0;color:#dfe3ff}
.rev-row .m{flex:none}
.rev-row .r{width:42px;font-size:12px;color:#9aa3d8;flex:none}
.rev-row .s{width:30px;font-size:12px;text-align:center;color:#fff;flex:none}
.rev-row .m{width:24px;text-align:center}
.rev-row .t{flex:1;font-size:12px;line-height:15px;min-width:0}
.rev-row.bond .m{color:#7ee6a0}
.rev-row.miss .m{color:#ff7f7f}
.rev-sum{margin-top:6px;padding-top:6px;border-top:2px solid #39406e;font-size:14px;color:#fff}
.rev-sum b{color:var(--gold);font-weight:normal}
.rev-yomi{margin-top:12px;font-size:15px;line-height:26px;color:#fff}
.rev-yomi i{font-style:normal;color:var(--gold);font-size:22px;letter-spacing:4px}
.rev-note{margin-top:10px;font-size:12px;line-height:18px;color:#a8b0e0}

/* =========================== 効果 =========================== */
#fade{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
}
#fade.black{background:#000}
#scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 2px,rgba(0,0,0,0) 2px 4px);
  opacity:.5;
}
#scan.off{display:none}

#keyhint{
  position:fixed;left:0;right:0;bottom:4px;text-align:center;
  font-size:11px;color:#5a608a;font-family:'DotGothic16',monospace;
  pointer-events:none;
}
#keyhint.off{display:none}


/* =========================== プロローグ =========================== */
.mono{
  position:absolute;left:8px;right:8px;bottom:28px;
  min-height:98px;padding:16px 18px;display:none;
}
.mono.show{display:block}
.mono p{font-size:16px;line-height:25px;color:#fff}
.mono .cur{
  position:absolute;right:12px;bottom:6px;color:var(--gold);font-size:13px;
  opacity:0;animation:bob .7s steps(2) infinite;
}
.mono.ready .cur{opacity:1}

/* =========================== 休憩幕 =========================== */
#curtain{
  position:absolute;inset:0;z-index:40;display:none;
  align-items:center;justify-content:center;
  background:#05060f;
}
#curtain.show{display:flex}
.curtain-in{
  text-align:center;color:#dfe3ff;font-size:26px;letter-spacing:10px;
  font-family:'DotGothic16',monospace;text-shadow:2px 2px 0 #000;
}
.curtain-in span{
  display:block;margin-top:16px;font-size:13px;letter-spacing:2px;color:#7b83b0;
}

/* エンドカードの罫 */
.end-rule{width:160px;height:2px;background:#5f68a0;margin:12px 0;box-shadow:0 2px 0 #000}


/* 白く飛んだあとの、最後の合図（END5） */
.end-hint{
  position:absolute;left:0;right:0;bottom:26px;
  display:none;text-align:center;
  font-size:14px;letter-spacing:4px;color:#3a3a44;text-shadow:none;
  animation:blink 1.3s steps(1) infinite;
}
.end-hint.show{display:block}