/* =========================================================
   StudioArte — 隠しゲーム（裏モードの最深部）
   サイト本体とは別世界。暗い水中。UIは最小限。
   ========================================================= */

body[data-page="game"]{
  background:#0A1420;
  color:#DCE7EA;
  overflow:hidden;
}
body[data-page="game"] .head{
  background:rgba(10,20,32,.86);
  box-shadow:0 1px 0 rgba(220,231,234,.10);
}
body[data-page="game"] .head__logo,
body[data-page="game"] .head__nav a{ color:#C6D8DF; }
body[data-page="game"] .head__toggleLines i{ background:#C6D8DF; }
body[data-page="game"] .menu{ background:rgba(10,20,32,.96); }
body[data-page="game"] .head__nav a[aria-current="page"]{ color:#6FD2F2; }

.gm{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px;
  padding:clamp(80px,11vh,120px) 16px 32px;
}

/* ---------- ステージ ---------- */
.gm__stage{
  position:relative;
  width:min(960px, 94vw);
  aspect-ratio:16/9;
  background:#0C1A28;
  border:1px solid rgba(220,231,234,.14);
  overflow:hidden;
}
.gm__canvas{
  display:block;
  width:100%; height:100%;
  image-rendering:pixelated;          /* ドット絵の等倍感 */
  image-rendering:crisp-edges;
}

/* ---------- HUD ---------- */
.gm__hud{
  position:absolute; top:12px; right:14px;
  font-family:"Mulish", sans-serif;
  font-size:12px; letter-spacing:.16em;
  color:rgba(220,231,234,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none;
}
.gm__clears{
  position:absolute; top:12px; left:14px;
  display:flex; align-items:center; gap:7px;
  font-family:"Mulish", sans-serif;
  font-size:12px; letter-spacing:.12em;
  color:#F3D98B;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none;
}
.gm__clears svg{
  width:15px; height:15px;
  fill:none; stroke:#F3D98B; stroke-width:2.4;
}

/* ---------- オーバーレイ（起動 / GameOver / Clear） ---------- */
.gm__overlay{
  position:absolute; inset:0;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2vw,22px);
  background:rgba(6,12,20,.78);
  backdrop-filter:blur(2px);
  text-align:center;
}
.gm__overlay.is-on{ display:flex; animation:gmFade .4s ease both; }
@keyframes gmFade{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- 最初の画面（タイトルと開始ボタン） ----------
   遊べるゲームは1本なので、選ばせる画面は置かない */
.gm__title__en{
  font-family:"Mulish", sans-serif;
  font-size:clamp(20px,3.4vw,34px);
  font-weight:300; letter-spacing:.42em;
  color:#6FD2F2;
  text-shadow:0 0 26px rgba(111,210,242,.28);
}
.gm__title__ja{
  margin-top:8px;
  font-family:"Noto Sans JP", sans-serif;
  font-size:clamp(13px,1.7vw,17px); letter-spacing:.26em;
  color:#DCE7EA;
}
.gm__title__note{
  margin-top:10px; margin-bottom:26px;
  font-family:"Noto Sans JP", sans-serif;
  font-size:clamp(10px,1.2vw,12px); letter-spacing:.12em;
  color:rgba(220,231,234,.5);
}

/* 起動ボタン（現在は未使用。単発のゲームを直接起動する画面を戻す場合に使う） */
.gm__boot{
  border:1px solid rgba(111,210,242,.5);
  border-radius:2px;
  background:transparent;
  padding:18px 44px;
  font-family:"Noto Sans JP", sans-serif;
  font-size:14px; letter-spacing:.28em;
  color:#DCE7EA;
  cursor:pointer;
  transition:background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.gm__boot:hover{
  background:rgba(111,210,242,.14);
  box-shadow:0 0 30px rgba(111,210,242,.18);
}

/* 結果表示（文字自体は押せない） */
.gm__result{
  font-family:"Noto Sans JP", sans-serif;
  font-size:clamp(20px,3vw,34px); font-weight:300;
  letter-spacing:.22em;
  color:#DCE7EA;
  pointer-events:none; user-select:none;
}
.gm__result--clear{ color:#9EE7FF; }
.gm__mark{
  font-size:clamp(26px,4vw,44px);
  line-height:1;
  color:rgba(220,231,234,.5);
  pointer-events:none; user-select:none;
}
.gm__mark--clear{ color:rgba(158,231,255,.65); }

.gm__actions{
  margin-top:clamp(6px,1vw,14px);
  display:flex; gap:clamp(18px,3vw,40px);
  flex-wrap:wrap; justify-content:center;
}
/* ゲームオーバー: 文字が出てから少し置いてボタンを出す。
   visibility も切るので、この間はクリックもキーも効かない（誤操作で即リトライにならない） */
#ovOver .gm__actions{
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s;
}
#ovOver.is-ready .gm__actions{
  opacity:1; visibility:visible;
  transition:opacity .5s ease, visibility 0s;
}
.gm__btn{
  border:1px solid rgba(220,231,234,.32);
  border-radius:2px;
  background:transparent;
  padding:13px 26px;
  font-family:"Noto Sans JP", sans-serif;
  font-size:12.5px; letter-spacing:.14em;
  color:#DCE7EA;
  cursor:pointer;
  transition:background-color .35s ease, border-color .35s ease;
}
.gm__btn small{
  display:block; margin-top:4px;
  font-size:9.5px; letter-spacing:.1em;
  color:rgba(220,231,234,.55);
}
.gm__btn:hover{ background:rgba(220,231,234,.1); border-color:rgba(220,231,234,.5); }
.gm__btn--sub{ border-color:rgba(220,231,234,.18); color:rgba(220,231,234,.7); }
/* 制作中のボタン: 押せないが「この先がある」ことは伝える */
.gm__btn--wip{
  border-style:dashed;
  border-color:rgba(158,231,255,.28);
  color:rgba(220,231,234,.5);
  cursor:default;
}
.gm__btn--wip:hover{ background:transparent; border-color:rgba(158,231,255,.28); }
.gm__btn--wip small{ color:rgba(158,231,255,.45); }

.gm__note{
  font-family:"Noto Sans JP", sans-serif;
  font-size:11px; letter-spacing:.1em;
  color:rgba(220,231,234,.45);
}

@media (max-width:640px){
  .gm__note{ font-size:10px; }
  .gm__actions{ gap:14px; }
  .gm__title__en{ letter-spacing:.3em; }
  .gm__title__note{ margin-bottom:20px; }
}

/* 距離メーターの「/ 1100 m」の部分。現在の数値を主役にして、目標は控えめに */
.gm__goal{
  color:rgba(220,231,234,.5);
  font-size:11px; letter-spacing:.12em;
}

/* ---------- キーボードで選んでいるボタン ----------
   A/D と ←/→ で選び、スペースで決定する。
   どれを選んでいるか一目で分かるように、枠と文字をオレンジにして、
   ボタンの外に矢印を置く */
.gm__btn{ position:relative; }
.gm__btn.is-sel{
  border-color:#F2A24C;
  background:rgba(242,162,76,.10);
  color:#fff;
  box-shadow:0 0 22px rgba(242,162,76,.14);
}
.gm__btn.is-sel small{ color:rgba(242,162,76,.85); }
/* ボタンの外・左に置く矢印 */
.gm__btn.is-sel::before{
  content:"";
  position:absolute; top:50%; left:-16px;
  width:0; height:0;
  transform:translateY(-50%);
  border-left:7px solid #F2A24C;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  animation:gmCursor 1.1s ease-in-out infinite;
}
@keyframes gmCursor{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%    { transform:translateY(-50%) translateX(3px); }
}
/* 押せないボタン（制作中）はカーソルの対象にしないので、選択の色もつけない */
.gm__btn--wip.is-sel{
  border-color:rgba(158,231,255,.28); background:transparent;
  color:rgba(220,231,234,.45); box-shadow:none;
}
.gm__btn--wip.is-sel::before{ display:none; }

@media (max-width:640px){
  .gm__btn.is-sel::before{ left:-12px; border-left-width:6px; }
}

/* ボタンの下の操作案内 */
.gm__keys{
  margin-top:clamp(10px,1.6vw,18px);
  font-family:"Noto Sans JP", sans-serif;
  font-size:10px; letter-spacing:.12em;
  color:rgba(220,231,234,.42);
}
/* ゲームオーバーは、ボタンと一緒に出したい */
#ovOver .gm__keys{ opacity:0; transition:opacity .5s ease; }
#ovOver.is-ready .gm__keys{ opacity:1; }

/* ---------- 開始ボタン ----------
   この画面のボタンは1つだけなので、選ぶための矢印は出さない。
   矢印が左に出ると、ボタンは中央にあっても中心が左へ寄って見える */
#ovSelect .gm__btn.is-sel::before{ display:none; }
/* 「ゲームを始める」は他のボタンと同じ大きさ（.gm__btn の 12.5px）に任せる。
   小さくするのは「（スペースキー）」だけ */
#btnStart small{
  font-size:8.5px;
  color:rgba(242,162,76,.7);
}
@media (max-width:640px){
  #btnStart small{ font-size:8px; }
}

/* クリアのシーンに乗せる画面。canvas 側が真っ黒に塗っているので、
   ここは背景を持たず、ボタンだけを下寄りに置く */
.gm__overlay--scene{
  background:transparent;
  justify-content:flex-end;
  padding-bottom:clamp(28px,7vh,58px);
}