* { margin:0; padding:0; box-sizing:border-box;
    -webkit-user-select:none; -moz-user-select:none; user-select:none;
    -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#05070a; touch-action:none; }
canvas { display:block; touch-action:none; }

/* ---- アナログレバー（画面左下） ---- */
#stick {
  position:fixed; left:calc(22px + env(safe-area-inset-left)); bottom:calc(26px + env(safe-area-inset-bottom));
  width:150px; height:150px; border-radius:50%;
  background:rgba(0,255,156,.06); border:1px solid #00ff9c;
  box-shadow:0 0 8px rgba(0,255,156,.25), 0 0 12px rgba(0,255,156,.18) inset;
  display:flex; align-items:center; justify-content:center;
  user-select:none; touch-action:none; z-index:10; cursor:pointer;
}
#stick.on { background:rgba(0,255,156,.12); }
#stickKnob {
  width:64px; height:64px; border-radius:50%;
  background:rgba(0,255,156,.22); border:1px solid #00ff9c;
  box-shadow:0 0 10px rgba(0,255,156,.55);
  pointer-events:none; will-change:transform; transition:transform .09s ease-out;
}
#stick.on #stickKnob { transition:none; }

/* ---- アクションボタン（画面右下） ---- */
#act {
  position:fixed; right:calc(26px + env(safe-area-inset-right)); bottom:calc(44px + env(safe-area-inset-bottom));
  width:80px; height:80px; border-radius:50%;
  background:rgba(0,255,156,.10); border:1px solid #00ff9c; color:#00ff9c;
  font-size:26px; font-family:monospace; display:flex; align-items:center; justify-content:center;
  text-shadow:0 0 6px rgba(0,255,156,.5); cursor:pointer; z-index:10; touch-action:none;
}
#act:active, #act.on { background:rgba(0,255,156,.35); }

/* ---- 暗転（door の入れ替え）。JS の FADE_MS と合わせる ---- */
#fade {
  position:fixed; inset:0; background:#000; opacity:0; pointer-events:none;
  transition:opacity .18s linear; z-index:20;
}

/* ---- ローディング（材料箱が揃うまで真っ白。最前面） ---- */
#loading {
  position:fixed; inset:0; z-index:40; background:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .5s ease;
}
#loading.out { opacity:0; pointer-events:none; }
#loading span {
  font:400 14px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:.24em; color:#9aa8a1; text-indent:.24em;
  animation:ldPulse 1.6s ease-in-out infinite;
}
@keyframes ldPulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }

/* ---- タイトル（door1 が自分で組み、出るときに自分で捨てる）---- */
@font-face {
  font-family:'Six Caps';
  src:url('../assets/fonts/SixCaps.woff2') format('woff2'),
      url('../assets/fonts/SixCaps.woff') format('woff');
  font-weight:400; font-style:normal; font-display:block;
}
#title {
  position:fixed; inset:0; z-index:25; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  /* ↓ ボタンの高さの調整はここ（下側の値を大きくすると上がる） */
  padding:calc(5vh + env(safe-area-inset-top)) 0 calc(20vh + env(safe-area-inset-bottom));
  padding-bottom:calc(20dvh + env(safe-area-inset-bottom));
  opacity:1; transition:opacity .7s ease;
}
#title.out { opacity:0; }
#titleName {
  font-family:'Six Caps','Arial Narrow',sans-serif;
  font-size:clamp(90px, 34vw, 320px); line-height:.84; letter-spacing:.05em;
  color:#eef6f2; text-shadow:0 0 18px rgba(180,255,225,.28), 0 2px 30px rgba(0,0,0,.55);
  touch-action:none;
  /* ★親の #title が pointer-events:none なので、ここで受け取ると宣言しないと指が当たらない。
     これが無いと、デバッグHUDを出す5秒長押し（door1）が一度も始まらない。
     touch-action:none は、押している間に画面が動いたり拡大したりしないようにするため。 */
  pointer-events:auto;
}
#titleBtns { display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:auto; }
#titleBtns button {
  font-family:'Six Caps','Arial Narrow',sans-serif;
  font-size:clamp(44px, 13vw, 88px); line-height:1.05; letter-spacing:.18em;
  background:none; border:none; cursor:pointer;
  padding:6px 34px; text-indent:.18em;
  color:#0e1a15;
  text-shadow:0 0 12px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,.85);
}
#titleBtns button:active { color:#000; text-shadow:0 0 18px rgba(255,255,255,1), 0 0 7px rgba(255,255,255,.95); }
#titleBtns button.disabled { color:#93a49b; text-shadow:0 0 10px rgba(255,255,255,.8); pointer-events:none; }   /* セーブが無い間の CONTINUE */
/* 見た ED の数。タイトルの字（Six Caps）ではなく普通のサンセリフで、ボタンより一段落として置く。
   1つも見ていない間は door1 が空のままにする＝:empty で消える（下の指定）。 */
#titleEd {
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  font-size:clamp(12px, 3.4vw, 16px); line-height:1.4; letter-spacing:.22em;
  margin-top:14px; text-indent:.22em;               /* letter-spacing の右余りを相殺して中央に見せる */
  color:#41564c;
  text-shadow:0 0 8px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.9);
  pointer-events:none;
}
#titleEd:empty { display:none; }                    /* 1つも見ていない間・数えられないときは出さない */
#titleEd.done {                                     /* 全部見た（不要ならこの1ブロックを消す） */
  color:#0e1a15;
  text-shadow:0 0 14px rgba(180,255,225,.95), 0 0 5px rgba(255,255,255,.95);
}

/* タイトル中は操作UIを隠す（Input.showUI が body.titling を付け外しする） */
body.titling #stick, body.titling #act { display:none; }
body.nostick #stick { display:none; }   /* アクションだけ出す */
body.noact #act { display:none; }       /* レバーだけ出す */

/* ---- デバッグHUD（ステージセレクター） ----
   既定では隠してある。タイトルの UNMIRROR を5秒長押しすると body.debugon が付いて出る。
   もう一度同じだけ押すと消える。保存しないので、起動するたびに隠れた状態から始まる。
   ★出し入れの口は長押し1つに保つこと。画面にボタンを足すと、そのボタン自体が製品に出る。
   ★製品から完全に外すときは、index.html の <div id="stage"> と selector.js を消す。
     ここを消しただけでは、長押しで出せる状態が残る。
   タイトル中も消えない（body.titling の対象に入れていない）。
   暗転(#fade=20)より上に置いて、切り替えの最中も見えるようにしてある。 */
#stage { display:none; }
body.debugon #stage {
  position:fixed; top:calc(6px + env(safe-area-inset-top)); left:calc(8px + env(safe-area-inset-left));
  z-index:30; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  font:400 12px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:.06em;
  background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.18); border-radius:4px;
  padding:5px 8px;
}
#stageNow { color:#0e1a15; }
#stageSel {
  font:inherit; color:#0e1a15; max-width:60vw;
  background:#fff; border:1px solid rgba(0,0,0,.25); border-radius:3px;
  padding:3px 6px; cursor:pointer; touch-action:manipulation;
}

/* ---- 長押しが効いたことを一瞬だけ知らせる ----
   点いた＝光る／消えた＝沈む。door1 が blipOn / blipOff を DBG_BLIP_MS だけ付ける。
   ★文字の位置・大きさは変えない（動くと押している指がずれる）。明るさだけを動かす。 */
@keyframes blipOn  {
  0%   { color:#eef6f2; text-shadow:0 0 18px rgba(180,255,225,.28), 0 2px 30px rgba(0,0,0,.55); }
  35%  { color:#ffffff; text-shadow:0 0 40px rgba(210,255,240,.95), 0 0 14px rgba(255,255,255,.9); }
  100% { color:#eef6f2; text-shadow:0 0 18px rgba(180,255,225,.28), 0 2px 30px rgba(0,0,0,.55); }
}
@keyframes blipOff {
  0%   { color:#eef6f2; text-shadow:0 0 18px rgba(180,255,225,.28), 0 2px 30px rgba(0,0,0,.55); }
  35%  { color:#8fa79c; text-shadow:0 0 6px rgba(120,160,145,.35); }
  100% { color:#eef6f2; text-shadow:0 0 18px rgba(180,255,225,.28), 0 2px 30px rgba(0,0,0,.55); }
}
#titleName.blipOn  { animation:blipOn  .26s ease-out; }
#titleName.blipOff { animation:blipOff .26s ease-out; }