/* 全体リセット */
:root {
  --app-height: 100vh; /* JSで上書きします */
}
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: "M PLUS 1p", sans-serif;
}

/* ゲームエリア（高さは --app-height を使う） */
.game-area {
  position: relative;
  width: 100%;
  height: var(--app-height, 100vh);
  background: url("images/kitchen_bg.png") no-repeat center bottom;
  background-size: cover;
  overflow: hidden;
}

/* スコアとタイマーを最前面に */
.score, .time {
  position: absolute;
  z-index: 10;
}

/* 猫ちゃん */
.cat {
  position: absolute;
  bottom: 20px;
  pointer-events: none;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* ドーナツ */
.donut {
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* -----------------------------
   スコア・タイマー共通
----------------------------- */
.score, .time {
  position: absolute;
  top: 10px;
  width: auto;
  height: auto;
}
.score { left: 10px; }
.time  { right: 10px; }

.score-inner, .time-inner { display: block; width: auto; height: auto; }
.score-base, .time-base { display: block; width: auto; height: auto; }

.score-digits, .time-digits {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.num-img { width: 24px; height: 30px; }

/* 768px以下は70％縮小 */
@media screen and (max-width: 768px) {
  .score-inner { transform: scale(0.7); transform-origin: top left; }
  .time-inner { transform: scale(0.7); transform-origin: top right; }
}

/* ===================================================
   リザルト画面（スミ＋ポップ）
=================================================== */
.game-over {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}
.game-over .overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 0;
}
.result-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 254px; height: 399px;
  background: url("images/result_bg.png") no-repeat center/contain;
  text-align: center;
  z-index: 2;
}
.result-inner { position: relative; width: 100%; height: 100%; }
.final-score-images { position: absolute; top: 98px; left: 50%; transform: translateX(-50%); display:flex; justify-content:center; }
.final-score-images img { width: 24px; height: 30px; }
.player-name {
  position: absolute; top: 184px; left: 50%; transform: translateX(-50%);
  width: 160px; padding: 8px; font-size: 18px; text-align:center; border:none; border-radius:6px;
}
.btn-result-submit, .btn-result-top {
  position: absolute; left: 50%; transform: translateX(-50%); width:154px; height:54px; cursor:pointer;
}
.btn-result-submit { top: 230px; }
.btn-result-top { top: 316px; }

/* ===================================================
   ランキング画面（スミ＋ベース）
=================================================== */
.ranking {
  position: fixed; inset: 0; display: none; z-index: 1000; text-align: center;
}
.ranking .overlay { position:absolute; inset:0; background: rgba(0,0,0,0.5); z-index:0; }
.ranking-inner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 255px; height: 540px;
  background: url("images/rank_base.png") no-repeat center/contain;
  z-index: 2;
}
.ranking-list { list-style:none; padding:0; margin:0; position:absolute; top:90px; left:50%; transform: translateX(-50%); width:190px; }
.ranking-list li { display:flex; align-items:center; margin-bottom:20px; height:53px; }
.rank-num { width:54px; height:53px; margin-right:16px; }
.rank-info { display:flex; flex-direction:column; align-items:flex-start; }
.rank-name { font-size:14px; color:#89AF2B; font-weight:500; }
.rank-score { display:flex; align-items:center; margin-top:4px; }
.rank-score img { width:21px; height:26px; }

.btn-restart, .back-to-title { position:absolute; bottom:20px; cursor:pointer; }
.btn-restart { right:16px; width:54px; height:54px; }
.back-to-title { left:16px; width:154px; height:54px; }
.back-to-title.centered { left:50%; right:auto; transform: translateX(-50%); }

/* 画面縮小 */
@media screen and (max-width: 768px) {
  .ranking-inner { transform: translate(-50%, -50%) scale(0.9); transform-origin:center; }
}
@media screen and (max-width: 480px) {
  .ranking-inner { transform: translate(-50%, -50%) scale(0.8); }
}

/* ===================================================
   タイトル画面
=================================================== */
.title-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: rgba(0,0,0,0.5); text-align:center; z-index: 15;
}
.title-logo { width:300px; margin-bottom:30px; }
.btn-start, .btn-ranking, .btn-howto { width:160px; margin:10px 0; cursor:pointer; }

/* ===================================================
   あそびかたポップ
=================================================== */
.howto-popup {
  position: fixed; inset: 0; display: none; z-index: 1300;
  justify-content: center; align-items: center;
  pointer-events: none;
}
.howto-popup.show { display:flex; pointer-events: auto; }
.howto-popup.hide { pointer-events: none; }

/* overlay（クリックで閉じる） */
.howto-popup .overlay {
  position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.0); /* 透明or薄めにしてもOK */
}

/* フェードアニメ（opacity のみ） */
@keyframes popupIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes popupOut { 0% { opacity: 1; } 100% { opacity: 0; } }
.howto-popup.show .howto-inner { animation: popupIn 0.28s forwards; }
.howto-popup.hide .howto-inner { animation: popupOut 0.24s forwards; }

/* ポップ内容（中央に固定 + scale を JS で操作） */
.howto-inner {
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 470px;
  display: flex; flex-direction: column; align-items:center; justify-content:flex-end;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}
.howto-image {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
}
.btn-howto-close {
  position: absolute; bottom: 4px; width: 154px; height: 54px; cursor: pointer; z-index:3;
}

/* モバイル用の追加安全調整（任意） */
@media screen and (max-width: 768px) {
  .howto-inner { width: 520px; height: 410px; }
}
@media screen and (max-width: 480px) {
  .howto-inner { width: 420px; height: 360px; }
}