:root{
    --win-bg:#0a0a1e;
    --win-line:#ffffff;
    --txt:#ffffff;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
    -webkit-touch-callout:none;-webkit-user-drag:none;touch-action:manipulation}
  html,body{margin:0;min-height:100%;padding:0;background:#03030a;color:#fff;
    font-family:"DotGothic16","MS Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",monospace;
    overflow-x:hidden;overscroll-behavior:none}
  body{background:radial-gradient(circle at 50% 12%,#171334 0,#070711 42%,#000 100%)}
  button:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #ffe14d;outline-offset:3px}
  #app{width:100%;max-width:480px;min-height:100dvh;margin:0 auto;padding:max(6px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
  #gamehead{height:28px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:#8f8ba9;font:700 10px/1 Arial,sans-serif;letter-spacing:.15em}
  #gamehead-actions{display:flex;align-items:center;gap:8px;min-width:0}
  #save-indicator{color:#7cbf91;font-size:9px;letter-spacing:.06em}
  #sound-toggle{width:26px;height:22px;padding:0;border:1px solid #3b3658;border-radius:5px;background:#111025;color:#f2d66e;font:700 14px/1 monospace;touch-action:manipulation}
  #sound-toggle[aria-pressed="true"]{color:#858298;background:#090916}
  #sound-toggle:active{border-color:#f2d66e}
  #stage{position:relative;width:100%;overflow:hidden;background:#000;border-block:1px solid #302b4c;box-shadow:0 14px 44px rgba(0,0,0,.45);touch-action:none}
  #inner{width:480px;height:544px;position:relative;transform-origin:top left}
  canvas{display:block;width:480px;height:544px;image-rendering:pixelated;touch-action:none}

  .win{position:absolute;background:var(--win-bg);border:3px solid var(--win-line);
    border-radius:3px;box-shadow:0 0 0 3px #000;padding:8px 10px;line-height:1.45;
    font-size:21px;letter-spacing:.5px;color:var(--txt)}
  #status{left:8px;top:8px;padding:5px 9px;font-size:18px;line-height:1.35;white-space:pre;z-index:4}
  /* 戦闘中は敵の絵にかぶるので、幅と高さを詰める */
  #status.compact{font-size:12px;line-height:1.25;padding:3px 6px;background:rgba(10,10,30,.86)}
  #msg{left:8px;right:8px;bottom:8px;min-height:110px;z-index:4;touch-action:none}
  #msg .arrow{position:absolute;right:12px;bottom:6px;animation:bl .6s steps(1) infinite}
  @keyframes bl{50%{opacity:0}}
  #choice{display:none;z-index:6;touch-action:none}
  #choice .row{white-space:pre;padding:2px 0}
  #choice .row.sel{color:#ffe14d}
  #choice .row.dis{color:#9a99ad}
  #choice .ttl{color:#8fd0ff;margin-bottom:2px}
  .hide{display:none!important}

  #pwbox{left:14px;right:14px;top:40px;font-size:15px;z-index:6}
  #pwttl{color:#8fd0ff;margin-bottom:4px}
  #pwta{width:100%;height:68px;background:#05050f;color:#ffe14d;border:2px solid #6b6b8a;
    border-radius:3px;font:inherit;font-size:17px;letter-spacing:2px;line-height:1.4;padding:4px 6px;
    resize:none;-webkit-user-select:text;user-select:text;touch-action:auto;-webkit-touch-callout:default}
  #pwrow{display:flex;gap:8px;margin-top:8px}
  .sbtn{flex:1;background:#1a1a2e;border:2px solid #6b6b8a;border-radius:6px;color:#fff;
    font:inherit;font-size:15px;padding:7px 0}
  .sbtn:active{background:#3a3a6e;border-color:#fff}
  #pad{position:relative;width:100%;height:154px;display:flex;flex:0 0 154px;touch-action:none;
    justify-content:space-between;align-items:center;padding:5px max(18px,env(safe-area-inset-right)) 5px max(18px,env(safe-area-inset-left));pointer-events:none;z-index:5}
  #dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:2px;pointer-events:auto}
  .hub{background:rgba(24,23,49,.72);border-radius:3px}
  .btn{background:rgba(24,24,51,.9);border:2px solid rgba(255,255,255,.62);border-radius:10px;
    color:#fff;font:inherit;font-size:19px;display:flex;align-items:center;
    justify-content:center;touch-action:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    text-shadow:0 1px 2px #000;pointer-events:auto}
  .btn:active,.btn.on{background:rgba(90,90,190,.66);border-color:#fff;color:#fff}
  #acts{display:flex;gap:12px;pointer-events:auto}
  .abtn{width:68px;height:68px;border-radius:50%;font-size:17px;flex-direction:column;box-shadow:0 7px 18px rgba(0,0,0,.4)}
  .abtn.primary{border-color:#f2d66e;background:rgba(83,60,25,.94)}
  .abtn.secondary{background:rgba(39,35,73,.94)}
  .abtn small{font-size:9px;opacity:.75}
  #help{margin:0 10px 10px;border:1px solid #27243d;border-radius:6px;background:rgba(8,8,20,.7);color:#9290aa;font-size:12px;line-height:1.6}
  #help summary{cursor:pointer;padding:9px 11px;color:#b9b5d0;list-style-position:inside}
  #help p{margin:0;padding:0 12px 10px;-webkit-user-select:text;user-select:text}
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  /* PCなど広い画面では、操作パッドと遊びかたを画面の横へ出し、
     空いた縦をぜんぶゲーム画面の拡大に使う。倍率は fit() が計算する。 */
  @media (min-width:900px) and (min-height:640px){
    #app{max-width:none;width:100%;padding:14px 24px 16px;
      display:grid;grid-template-columns:auto 240px;grid-template-rows:28px auto 1fr;
      justify-content:center;align-content:start;column-gap:28px}
    #gamehead{grid-column:1/3;grid-row:1}
    #stage{grid-column:1;grid-row:2/4;width:auto;align-self:start;
      border:1px solid #302b4c;border-radius:4px}
    #pad{grid-column:2;grid-row:2;width:240px;height:auto;flex:0 0 auto;align-self:start;
      flex-direction:column;gap:30px;justify-content:flex-start;align-items:center;padding:18px 0 0}
    #dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px)}
    .btn{font-size:23px}
    .abtn{width:84px;height:84px;font-size:19px}
    .abtn small{font-size:10px}
    #help{grid-column:2;grid-row:3;align-self:start;margin:22px 0 0;max-width:none}
  }
  @media (orientation:landscape) and (max-height:520px){
    #app{max-width:none;display:grid;grid-template-columns:min(67vw,480px) 1fr;grid-template-rows:28px auto}
    #gamehead{grid-column:1/3}
    #stage{grid-column:1;grid-row:2}
    #pad{grid-column:2;grid-row:2;height:100%;min-height:154px;align-self:stretch;padding-inline:18px}
    #help{display:none}
  }
  @media (prefers-reduced-motion:reduce){#msg .arrow{animation:none}}