/* Layout: 4:3 のレトロRPG画面を中央に。黒地に白枠のウィンドウ。巻き戻し中はVHS風のシアン/マゼンタ */
:root{
  --bg:#07070b;
  --win:#000;
  --fg:#fff;
  --dim:#9a9aa8;
  --rew:#35e0ff;     /* 巻き戻しシアン */
  --rew2:#ff3dc8;    /* VHSマゼンタ */
  --heal:#5dff8a;
  --hurt:#ff6262;
  --f:"DotGothic16","MS Gothic","Osaka-Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f)}
body{min-height:100vh;display:grid;justify-items:center;align-content:start;gap:12px;padding-inline:16px;padding-block:12px 24px}
.topbar{width:min(100%,760px);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}
#frame{position:relative;width:min(100%,760px);aspect-ratio:480/440;background:#000;border:4px solid #fff;border-radius:6px;overflow:hidden;container-type:inline-size;font-size:clamp(11px,3.3cqw,22px);line-height:1.6}
#map{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:480/352;image-rendering:pixelated}
.win{position:absolute;background:var(--win);border:.18em solid #fff;border-radius:.4em;box-shadow:0 0 0 .14em #000;padding:.5em .8em}
#msg{left:2%;right:2%;bottom:2%;min-height:30%;white-space:pre-wrap}
#msg .next{position:absolute;right:.6em;bottom:.3em;animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#status{left:1.5%;bottom:1.5%;font-size:.82em;line-height:1.45;width:40%}
#status b{font-weight:400;color:var(--rew)}
#goal{right:1.5%;bottom:1.5%;font-size:.78em;line-height:1.45;width:55%}
#goal span{display:inline-block;margin-right:.8em}
#goal .done{color:var(--dim);text-decoration:line-through}
#clock{position:absolute;right:1.5%;top:1%;background:rgba(0,0,0,.55);padding:0 .3em;font-size:.7em;color:var(--rew);text-shadow:.1em 0 var(--rew2);letter-spacing:.05em;z-index:5;pointer-events:none}
/* 巻き戻し演出 */
#vhs{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 4px),rgba(0,0,0,.55);animation:jitter .12s steps(2) infinite}
#vhs span{font-size:3.2em;color:var(--rew);text-shadow:.12em 0 var(--rew2),-.12em 0 #ff0;letter-spacing:.1em}
@keyframes jitter{50%{transform:translate(.4%,-.6%) skewX(-1deg)}}
/* クレジット */
#credits{position:absolute;inset:0;background:#000;z-index:10;overflow:hidden;display:grid;place-items:center}
#credits .end{font-size:2.6em;letter-spacing:.2em;text-align:center}
#credits .end small{display:block;font-size:.4em;color:var(--dim);letter-spacing:.1em}
#roll{position:absolute;left:0;right:0;top:0;text-align:center;display:grid;gap:1.2em;padding:2em 1em;transform:translateY(-100%)}
#roll.go{animation:rolldown 16s linear forwards}
@keyframes rolldown{from{transform:translateY(-100%)}to{transform:translateY(100cqh)}}
#roll dt{color:var(--dim);font-size:.8em}
#roll dd{margin:0}
#skip{position:absolute;right:2%;bottom:3%;z-index:11}
/* バトル */
#battle{position:absolute;inset:0;z-index:4;background:radial-gradient(ellipse at 50% 38%,#3a1450 0,#160822 55%,#000 100%)}
#battle .pillar{position:absolute;top:0;bottom:30%;width:7%;background:linear-gradient(90deg,#2a1838,#4b2b63,#2a1838);opacity:.8}
#enemyName{left:50%;top:3%;translate:-50% 0;text-align:center;min-width:44%}
.bar{height:.6em;background:#222;border:.08em solid #fff;margin-top:.2em}
.bar i{display:block;height:100%;background:var(--heal);width:0;transition:width .6s}
#maou{position:absolute;left:50%;top:44%;translate:-50% -50%;width:30%;aspect-ratio:1;display:grid;place-items:center;font-size:5em;transition:transform .8s cubic-bezier(.3,1.4,.5,1);transform-origin:50% 80%}
#maou img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#princess{position:absolute;left:70%;top:52%;font-size:2.2em;width:12%;aspect-ratio:1;display:grid;place-items:center}
#princess img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.pop{position:absolute;left:50%;top:30%;translate:-50% 0;color:var(--heal);font-size:1.6em;text-shadow:.08em .08em 0 #000;animation:up 1s ease-out forwards;pointer-events:none;z-index:6}
.pop.hurt{color:var(--hurt)}
@keyframes up{to{transform:translateY(-1.6em);opacity:0}}
#cmds{left:2%;bottom:2%;width:32%;min-height:30%;display:grid;align-content:start;gap:.1em;z-index:5}
#cmds button,.choice button{font:inherit;color:var(--fg);background:none;border:0;text-align:left;padding:.15em .2em .15em 1.1em;cursor:pointer;position:relative}
#cmds button:focus,#cmds button:hover,.choice button:focus,.choice button:hover{outline:none}
#cmds button:focus::before,#cmds button:hover::before,.choice button:focus::before,.choice button:hover::before{content:"▶";position:absolute;left:0}
#cmds button:disabled{color:var(--dim);cursor:default}
#bmsg{left:36%;right:2%;bottom:2%;min-height:30%;white-space:pre-wrap;z-index:5}
#bstatus{left:2%;top:3%;font-size:.8em;line-height:1.45;z-index:5}
/* タイトル */
#titleScr{position:absolute;inset:0;z-index:10;background:linear-gradient(#0b0b35,#000 70%);display:grid;place-items:center;text-align:center}
#titleScr .logo{font-size:3em;line-height:1.1;letter-spacing:.08em;color:#ffd84a;text-shadow:.06em .06em 0 #b4002a,.12em .12em 0 #000}
#titleScr .logo small{display:block;font-size:.3em;color:#fff;letter-spacing:.3em;text-shadow:none;margin-top:.4em}
#titleScr .press{margin-top:1.4em;font-size:1.2em;animation:blink 1s steps(2) infinite;cursor:pointer;background:none;border:0;color:#fff;font-family:inherit}
#titleScr .note{margin-top:1.2em;font-size:.75em;color:var(--dim);line-height:1.8}
.choice{left:50%;top:58%;translate:-50% 0;display:grid;z-index:12}
/* タッチ操作 */
#pad{width:min(100%,760px);display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;-webkit-user-select:none}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}
.dpad button,.abtn{font-family:var(--f);font-size:1.2rem;color:#fff;background:#1c1c26;border:2px solid #fff;border-radius:8px;touch-action:none;cursor:pointer}
.dpad button:active,.abtn:active{background:#3a3a4c}
.dpad .u{grid-area:1/2}.dpad .l{grid-area:2/1}.dpad .r{grid-area:2/3}.dpad .d{grid-area:3/2}
.abtn{width:76px;height:76px;border-radius:50%;font-size:1.5rem}
.help{width:min(100%,760px);color:var(--dim);font-size:.85rem;margin:0}
@media (hover:hover) and (pointer:fine){#pad{display:none}}
@media (prefers-reduced-motion:reduce){#vhs,#roll.go,.pop{animation:none}}
#battle .pl{left:8%}
#battle .pr{right:8%}
#mhpText{font-size:.75em}
#skip{font:inherit;color:#fff;cursor:pointer}