/* Layout: 横から見た村の入口（16:10）。右に村人A、左から勇者が歩いてくる。下に青いRPGウィンドウとセリフの言い方ボタン */
:root{
  --page:#1b2238;
  --sky1:#7ec8ff; --sky2:#c9ecff;
  --hill:#79c26a; --grass:#5aa94b; --dirt:#cfa86e;
  --win1:#2b3ea3; --win2:#121b5e;  /* 青いウィンドウ */
  --fg:#fff; --dim:#b9c2ea;
  --gold:#ffd84a; --good:#7dff9b; --bad:#ff7a7a;
  --f:"DotGothic16","MS Gothic","Osaka-Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--page);color:var(--fg);font-family:var(--f)}
body{min-height:100vh;display:grid;justify-items:center;align-content:start;gap:10px;padding-inline:16px;padding-block:12px 28px}
.topbar{width:min(100%,860px);display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar a{color:var(--dim);text-decoration:none;font-size:.9rem}
.topbar a:hover{color:var(--fg)}
.topbar h1{margin:0;font-weight:400;font-size:1.1rem;letter-spacing:.1em}
#stage{position:relative;width:min(100%,860px);aspect-ratio:16/10;overflow:hidden;border:4px solid #fff;border-radius:8px;container-type:inline-size;font-size:clamp(11px,2.6cqw,20px);line-height:1.55;
  background:linear-gradient(var(--sky1),var(--sky2) 60%)}
#stage.bgimg{background-size:cover;background-position:center bottom}
#stage.bgimg .scenery>:not(.sign){display:none}
.scenery{position:absolute;inset:0;pointer-events:none}
.sun{position:absolute;right:10%;top:9%;width:9%;aspect-ratio:1;border-radius:50%;background:#fff6b0;box-shadow:0 0 0 1cqw rgba(255,246,176,.4)}
.hill{position:absolute;bottom:30%;border-radius:50% 50% 0 0;background:var(--hill)}
.ground{position:absolute;left:0;right:0;bottom:0;height:34%;background:var(--grass)}
.path{position:absolute;left:0;right:0;bottom:8%;height:14%;background:var(--dirt);clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.house{position:absolute;right:3%;bottom:30%;width:22%;height:32%}
.house .roof{position:absolute;left:-8%;right:-8%;top:0;height:45%;background:#b8452f;clip-path:polygon(50% 0,100% 100%,0 100%)}
.house .wall{position:absolute;left:0;right:0;bottom:0;height:58%;background:#efe1c2;border:.3cqw solid #7a5a3a}
.house .door{position:absolute;left:38%;bottom:0;width:24%;height:70%;background:#7a4a24}
.sign{position:absolute;left:6%;bottom:30%;width:16%;display:grid;justify-items:center}
.sign b{font-weight:400;background:#8a5a2c;color:#fff;border:.25cqw solid #4a2e12;padding:.1em .4em;font-size:.8em;white-space:nowrap}
.sign i{width:.6cqw;height:5cqw;background:#4a2e12}
#pots{position:absolute;right:4%;bottom:24%;display:flex;gap:.2em;font-size:1.6em;z-index:2}
#pots .broken{filter:grayscale(1) brightness(.6);transform:rotate(80deg) translateY(30%)}
.actor{position:absolute;bottom:20%;width:14%;aspect-ratio:1;display:grid;place-items:end center;font-size:4.2em;line-height:1;z-index:3;transition:left 1.1s steps(8)}
.actor img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#villager{left:60%}
#villager .hat{position:absolute;top:-28%;left:50%;translate:-50% 0;font-size:.5em}
#hero{left:-20%}
#hero.flip{transform:scaleX(-1)}
.tag{position:absolute;left:50%;translate:-50% 0;bottom:-26%;font-size:.22em;white-space:nowrap;background:rgba(0,0,0,.55);padding:0 .4em;border-radius:.3em}
#villager .tag{font-size:.2em}
.say{position:absolute;bottom:58%;z-index:4;max-width:44%;background:#fff;color:#111;border:.25cqw solid #111;border-radius:.6em;padding:.35em .7em;font-size:1em;line-height:1.5}
#vsay{left:50%;bottom:47%;max-width:47%}
#hsay{left:3%;bottom:67%;max-width:50%}
.s-flat{color:#666;letter-spacing:.05em}
.s-emotion{font-size:1.15em;color:#a3124a}
.s-whisper{font-size:.72em;color:#555}
.s-shout{font-size:1.5em;font-weight:400;color:#c00;animation:shake .1s infinite}
.s-sing{color:#1849c7;animation:wave 1s ease-in-out infinite}
.s-off{color:#222;background:repeating-linear-gradient(90deg,#fff 0 6px,#ffe0f3 6px 12px)}
@keyframes shake{25%{transform:translate(2px,-1px)}75%{transform:translate(-2px,1px)}}
@keyframes wave{50%{transform:translateY(-4px) rotate(-1deg)}}
.win{position:absolute;background:linear-gradient(var(--win1),var(--win2));border:.22em solid #fff;border-radius:.5em;box-shadow:0 0 0 .12em #000;padding:.4em .7em;z-index:5}
#hudL{left:1.5%;top:2.5%;font-size:.8em;line-height:1.45}
#hudR{right:1.5%;top:2.5%;font-size:.8em;line-height:1.45;text-align:right}
#hudL b,#hudR b{font-weight:400;color:var(--gold)}
#msg{left:1.5%;right:1.5%;bottom:2.5%;min-height:22%;white-space:pre-wrap;z-index:6}
#msg .next{position:absolute;right:.6em;bottom:.2em;animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.pt{position:absolute;left:62%;top:30%;font-size:1.6em;z-index:8;animation:up 1.2s ease-out forwards;text-shadow:.08em .08em 0 #000}
.pt.good{color:var(--good)}.pt.bad{color:var(--bad)}
@keyframes up{to{transform:translateY(-1.5em);opacity:0}}
#stage.shake{animation:bigshake .4s}
@keyframes bigshake{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-2px)}}
#stage.glitch{animation:glitch .9s steps(6)}
@keyframes glitch{0%{filter:hue-rotate(0) contrast(1)}20%{filter:hue-rotate(120deg) contrast(2);transform:skewX(8deg)}40%{filter:invert(1);transform:translateX(-10px)}60%{filter:hue-rotate(260deg) saturate(4);transform:skewX(-6deg)}80%{filter:invert(.6)}100%{filter:none}}
/* オーバーレイ */
.cover{position:absolute;inset:0;z-index:10;background:linear-gradient(rgba(18,27,94,.92),rgba(10,14,40,.96));display:grid;place-items:center;text-align:center;padding:4%}
.cover h2{margin:0;font-weight:400;font-size:2.6em;letter-spacing:.12em;color:var(--gold);text-shadow:.06em .06em 0 #000}
.cover h2 small{display:block;font-size:.4em;color:#fff;letter-spacing:.08em;margin-top:.3em}
.cover p{margin:.6em auto;max-width:34em;line-height:1.8}
.cover dl{display:grid;grid-template-columns:auto auto;gap:.2em 1.2em;justify-content:center;text-align:left;margin:.8em 0}
.cover dt{color:var(--dim)}.cover dd{margin:0}
.big{font:inherit;font-size:1.2em;color:#fff;background:linear-gradient(var(--win1),var(--win2));border:.18em solid #fff;border-radius:.4em;padding:.3em 1.2em;cursor:pointer;margin:.3em}
.big:hover,.big:focus-visible{outline:.15em solid var(--gold);outline-offset:.1em}
/* 操作パネル */
#controls{width:min(100%,860px);display:grid;gap:8px}
#timer{height:10px;background:#000;border:2px solid #fff;border-radius:4px;overflow:hidden}
#timer i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left}
#styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:640px){#styles{grid-template-columns:repeat(6,minmax(0,1fr))}}
#styles button{font-family:var(--f);font-size:1rem;color:#fff;background:linear-gradient(var(--win1),var(--win2));border:3px solid #fff;border-radius:8px;padding:10px 4px;cursor:pointer;display:grid;gap:2px}
#styles button small{color:var(--dim);font-size:.72rem}
#styles button:hover:not(:disabled),#styles button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
#styles button:disabled{opacity:.35;cursor:default}
#styles button.off{background:linear-gradient(#7a1a5a,#3a0a2a)}
.help{width:min(100%,860px);margin:0;color:var(--dim);font-size:.85rem}
@media (prefers-reduced-motion:reduce){.s-shout,.s-sing,#stage.shake,#stage.glitch,.pt{animation:none}.actor{transition:none}}
.hill.h1{left:-10%;width:60%;height:30%}
.hill.h2{left:35%;width:80%;height:22%;background:#6db55e}