/* paradAIsm — レトロRPG版デモ
   Palette: 黒(窓)・白(文字/枠)・フィールド緑・金(Ｇ)・空色(選択)
   Type: DotGothic16 のみ(ピクセル明朝ではなく、FC世代の等幅ゴシックの読み味)
   Rule: 情報はすべて「窓」に入れる。窓は黒地・白の二重枠・角を1px落とす。影・グラデ・角丸なし。 */
:root{
  --bg:#000; --win:#000; --ink:#f4f4f0; --dim:#9a9a92;
  --grass:#2f8f3e; --gold:#f2c14e; --sel:#7fc4ff; --danger:#e04848;
  --px:4px;           /* ピクセル単位 */
  --font:"DotGothic16","Hiragino Kaku Gothic ProN",monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.7;letter-spacing:.02em;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;image-rendering:pixelated}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:400}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
:focus-visible{outline:var(--px) solid var(--sel);outline-offset:2px}

/* 窓: 二重枠。外白・内黒・内白 */
.win{background:var(--win);color:var(--ink);border:var(--px) solid var(--ink);box-shadow:inset 0 0 0 var(--px) var(--win),inset 0 0 0 calc(var(--px)*2) var(--ink);padding:calc(var(--px)*5) calc(var(--px)*6);position:relative}
.win::before,.win::after{content:"";position:absolute;background:var(--bg);width:var(--px);height:var(--px)}
.win::before{top:calc(var(--px)*-1);left:calc(var(--px)*-1)}
.win::after{top:calc(var(--px)*-1);right:calc(var(--px)*-1)}

/* ---------- タイトル ---------- */
.title{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;text-align:center;transition:opacity .4s}
.title.hide{opacity:0;pointer-events:none}
.title-eyebrow{font-size:13px;color:var(--dim);letter-spacing:.3em;margin-bottom:28px}
.title-logo{font-size:clamp(44px,9vw,96px);line-height:1;letter-spacing:.04em;text-shadow:var(--px) var(--px) 0 #1c3a8c,calc(var(--px)*2) calc(var(--px)*2) 0 #0b1f55}
.title-logo span{color:var(--gold)}
.title-sub{margin:26px 0 54px;font-size:clamp(16px,2.4vw,22px)}
.press{font-size:22px;padding:10px 26px;border:var(--px) solid var(--ink);animation:blink 1.1s steps(1) infinite}
.press:hover,.press:focus-visible{animation:none;background:var(--ink);color:var(--bg)}
@keyframes blink{50%{opacity:0}}
.title-hint{margin-top:38px;font-size:13px;color:var(--dim)}

/* ---------- ゲーム画面(4:3の枠) ---------- */
.screen{max-width:960px;margin:0 auto;padding:18px 12px 10px}
.hud{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:stretch;margin-bottom:10px}
.hud .win{padding:8px 14px;font-size:16px;line-height:1.5}
.hud-status p{white-space:nowrap}.hud-status .lv{color:var(--sel)}
.hud-status b{color:var(--gold);font-weight:400}
.hud-place{display:flex;align-items:center;justify-content:center}
.hud-sound{text-align:center}
.hud-sound[aria-pressed="true"]{color:var(--gold)}

.stage{position:relative;border:var(--px) solid var(--ink);background:#000;line-height:0}
#field{width:100%;height:auto;display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.on{animation:flash .28s steps(2) 1}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}

.dpad{display:none;margin:10px auto 0;justify-content:center;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px;line-height:1}
.dpad button{background:#000;border:2px solid var(--ink);color:var(--ink);font-size:18px;touch-action:manipulation}
.dpad button:active{background:var(--ink);color:#000}
.dpad [data-d=up]{grid-column:2;grid-row:1}.dpad [data-d=left]{grid-column:1;grid-row:2}.dpad [data-d=right]{grid-column:3;grid-row:2}.dpad [data-d=down]{grid-column:2;grid-row:3}
@media (pointer:coarse){.dpad{display:grid}}

.bottom{display:grid;grid-template-columns:200px 1fr;gap:10px;margin-top:10px}
.cmd{padding:10px 12px 12px}
.cmd-title{font-size:13px;color:var(--dim);margin-bottom:6px;text-align:center}
.cmd li button{display:block;width:100%;text-align:left;padding:3px 0 3px 26px;position:relative;font-size:18px}
.cmd li button::before{content:"▶";position:absolute;left:4px;opacity:0}
.cmd li button:hover::before,.cmd li button:focus-visible::before,.cmd li button.on::before{opacity:1;animation:blink .9s steps(1) infinite}
.cmd li button:hover,.cmd li button.on{color:var(--sel)}
.msg{min-height:128px;padding-right:44px}
.msg p{font-size:19px;line-height:1.75;white-space:pre-wrap}
.cursor{position:absolute;right:16px;bottom:8px;font-size:14px;animation:bob 1s steps(2) infinite}
@keyframes bob{50%{transform:translateY(3px)}}
.msg.typing .cursor{visibility:hidden}

/* ---------- 中身(ゲーム外でも読める) ---------- */
.content{max-width:960px;margin:0 auto;padding:40px 12px 80px;display:grid;gap:64px}
.scene{display:grid;gap:12px;scroll-margin-top:16px}
.scene-head h2{font-size:24px;letter-spacing:.06em}
.scene-head p{margin-top:8px;font-size:16px;color:var(--dim)}
.talk p{font-size:19px;line-height:1.9}
.talk p+p{margin-top:14px}
.talk.win.enter{animation:pop .18s steps(3) 1}
@keyframes pop{from{transform:scale(.96)}to{transform:none}}

.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shop-col h3{font-size:16px;color:var(--gold);margin-bottom:10px}
.items li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:var(--px) dotted rgba(244,244,240,.25);font-size:16px;line-height:1.5}
.items li:last-child{border-bottom:0}
.items em{font-style:normal;color:var(--gold);white-space:nowrap}
.items em:not([class])::before{content:""}
.note{font-size:15px;color:var(--dim)}

.book{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.book .win{padding:0}
.book a{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 16px 16px;align-items:baseline}
.book img{grid-column:1/3;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:12px;border:var(--px) solid var(--ink);image-rendering:auto;background:#111}
.book a:hover img,.book a:focus-visible img{border-color:var(--sel)}
.book b{font-weight:400;font-size:20px;grid-column:1}
.book span{grid-column:1;font-size:15px;color:var(--dim);line-height:1.6}
.book i{grid-column:2;grid-row:2/4;font-style:normal;font-size:13px;color:var(--gold);align-self:start;white-space:nowrap;text-align:right}
.book em{grid-column:1/3;font-style:normal;font-size:13px;color:var(--sel);margin-top:8px}
.book a:hover em{color:var(--ink)}
.note a{border-bottom:var(--px) solid var(--sel)}
.party{display:grid;grid-template-columns:5fr 7fr;gap:12px}
.status h3,.story h3{font-size:18px;color:var(--sel);margin-bottom:12px}
.status dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:16px}
.status dt{color:var(--dim);white-space:nowrap}
.story ol{display:grid;gap:10px;font-size:15.5px;line-height:1.65}
.story b{font-weight:400;color:var(--gold);margin-right:8px}
.company{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:16px}
.company dt{color:var(--dim);white-space:nowrap}
.company a{border-bottom:var(--px) solid var(--sel)}

.choice{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-block;padding:10px 22px;border:var(--px) solid var(--ink);font-size:18px}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--bg)}
.btn.ghost{color:var(--dim);border-color:var(--dim)}
.foot{font-size:13px;color:var(--dim);text-align:center;padding-top:12px}

/* CRT風の走査線(控えめ) */
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:40;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:screen}

@media (prefers-reduced-motion:reduce){
  .press,.cmd li button::before,.cursor,.flash.on,.talk.win.enter{animation:none!important}
}
@media (max-width:760px){
  body{font-size:16px}
  .hud{grid-template-columns:1fr auto}
  .hud-place{display:none}
  .bottom{grid-template-columns:1fr}
  .cmd ul{display:grid;grid-template-columns:repeat(3,1fr)}
  .cmd li button{padding-left:20px;font-size:16px}
  .msg{min-height:110px}.msg p{font-size:17px}
  .shop-grid,.book,.party{grid-template-columns:1fr}
  .book i{grid-column:1;grid-row:auto;text-align:left}
  .book a{grid-template-columns:1fr}
  .book img,.book em{grid-column:1}
  .company{grid-template-columns:1fr;gap:2px 0}
  .company dd{margin-bottom:10px}
}