/* リセット & ベース */
* { box-sizing:border-box; margin:0; padding:0; }
html, body {
  height:100%;
  overflow:auto;
  background: linear-gradient(135deg, #ffe6f0 0%, #fff5f8 100%);
  font-family:"Kiwi Maru",serif,"Zen Maru Gothic",sans-serif, "Helvetica Neue", Arial;
}

/* ─────────────────────────────
    ヘッダー
───────────────────────────── */
.site-header {
  height: 88px;
}
.site-header .container {
  height: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
}

/* ─────────────────────────────
   トップ画面レイアウト（Grid版）
───────────────────────────── */
#top-screen {
  display: grid;
  grid-template-columns: 40px 1fr 80px; /* 左ボタン・中央スペース・右ボタン */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "back title rank"
    "main main  main";
  width: 90vw; max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  min-height: calc(100vh - 88px); /* ヘッダー高さを除外 */
  box-sizing: border-box;
}

.back-btn {
  grid-area: back;
  align-self: start;
  justify-self: start;
  z-index: 2;
}
.rank-btn {
  grid-area: rank;
  align-self: start;
  justify-self: end;
  z-index: 2;
}

.game-title {
  grid-area: title;
  justify-self: center;
  align-self: center;
  font-size: 1.8rem;
  color: #d6336c;
  margin: 0;
}

.main-menu {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.main-menu img {
  width: 70%;
  max-width: 240px;
}

.main-menu button {
  width: 100%;
  max-width: 200px;
  padding: 12px;
  border: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  background: radial-gradient(circle at top left,#ff9aa2,#ffb7b2);
  box-shadow: 0 4px 0 #e48a93;
  cursor: pointer;
}
.main-menu button:nth-of-type(2) {
  background: radial-gradient(circle at top left,#ffb3c1,#ff8fa3);
  box-shadow: 0 4px 0 #e48a3d;
}
.main-menu button:active {
  box-shadow: 0 2px 0;
  transform: translateY(2px);
}

/* 上端ボタンまとめ */
.top-buttons {
  display: flex;
  justify-content: space-between;  /* 左右ピタリ */
  width: 90vw; max-width: 400px;
  margin: 1rem auto 0;             /* 上に余白, 中央寄せ */
}

/* 元の絶対指定を解除 */
.corner-btn {
  position: static !important;
}

/* トップ画面の余白調整 */
#top-screen {
  padding-top: 0.5rem;      /* 上のパディングを小さく */
  padding-bottom: 0.5rem;   /* 下パディングも小さく */
  min-height: auto !important; /* 高さ制限リセット */
}

/* ボタン折り返し防止＆マージン削減 */
.top-buttons {
  margin: 0.5rem auto 0;    /* 上0.5rem */
}

/* メインメニューの隙間詰め */
.main-menu {
  margin-top: 0.5rem;       /* タイトルとの距離を縮める */
  gap: 0.5rem;              /* ボタン間隔も狭く */
}

/* トップ画面ボタン共通スタイル */
.top-buttons .corner-btn {
  display: inline-block;
  padding: 8px 20px;
  margin: 0;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background: radial-gradient(circle at top left, #ff9aa2, #ffb7b2);
  box-shadow: 0 4px 0 #e48a93;
  transition: transform .1s, box-shadow .1s;
}

/* 押したとき */
.top-buttons .corner-btn:active {
  box-shadow: 0 2px 0 #e48a93;
  transform: translateY(2px);
}

/* ランキングボタンだけ色変え */
.top-buttons .rank-btn {
  background: radial-gradient(circle at top left, #ffb3c1, #ff8fa3);
  box-shadow: 0 4px 0 #e48a3d;
}
.top-buttons .rank-btn:active {
  box-shadow: 0 2px 0 #e48a3d;
}

/* ─────────────────────────────
    ゲーム画面
───────────────────────────── */
.container {
  width: 90vw;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.5rem;
  margin-bottom: 1rem;
  touch-action: manipulation;
  user-select: none;
}
.legend .item {
  flex: 1 1 40%;
  min-width: 100px;
  background: #fff;
  padding: 0.8rem;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 1rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.grid li {
  flex: 1 1 calc(33.333% - 2px);
  margin: 1px;
  aspect-ratio: 1;
  background: #ffeef2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #56351e;
}
.grid li:nth-child(odd) {
  background: #e8f0ff;
}

/* ─────────────────────────────
    ボタン
───────────────────────────── */
button, input {
  cursor: pointer;
  touch-action: manipulation;
}
#score, #time, #start, #show-leaderboard {
  width: 100%;
  margin-bottom: 1rem;
}
#start, #show-leaderboard {
  max-width: 200px;
  margin: 0 auto;
  padding: 14px 28px;
  border: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
}
#start {
  background: radial-gradient(circle at top left,#ff9aa2,#ffb7b2);
  box-shadow: 0 4px 0 #e48a93;
}
#start:active {
  box-shadow: 0 2px 0 #e48a93;
  transform: translateY(2px);
}
#show-leaderboard {
  background: radial-gradient(circle at top left,#ffb3c1,#ff8fa3);
  box-shadow: 0 4px 0 #e48a3d;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
#show-leaderboard:active {
  box-shadow: 0 2px 0 #e48a3d;
  transform: translateY(2px);
}

/* ─────────────────────────────
    ランキング画面
───────────────────────────── */
#ranking-page {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
}
.ranking-container {
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-width: 400px;
  margin: 20px auto;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
  background: #fff0f6;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.rank-tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 12px;
}
.tab-btn {
  background: #ffe6f0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  color: #9f2b68;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tab-btn.active,
.tab-btn:hover {
  background: #ffbbe6;
  color: #660033;
}

#leaderboard {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  counter-reset: rank;
}
#leaderboard li {
  counter-increment: rank;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #ffcce6;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
#leaderboard li::before {
  content: counter(rank)"位 ";
  font-weight: bold;
  margin-right: 0.5rem;
  color: #ff6fa3;
}
#leaderboard li:nth-child(1)::before { content:"👑 1位 "; }
#leaderboard li:nth-child(2)::before { content:"🥈 2位 "; }
#leaderboard li:nth-child(3)::before { content:"🥉 3位 "; }
#leaderboard li img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}
#leaderboard li span {
  display: inline-block;
  vertical-align: middle;
}
#leaderboard li span.name {
  font-size: 1rem;
  color: #56351e;
}
#leaderboard li span.score {
  margin-left: auto;
  font-weight: bold;
  color: #ff6fa3;
}
#leaderboard li a {
  text-decoration: none;
}
#leaderboard li.my-rank-summary {
  position: sticky;
  bottom: 0;
  background: #ff4c79;
  color: #fff;
  font-weight: bold;
  padding: 0.8rem 1rem;
  border: 1px solid #e04868;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  counter-increment: none;
}
.my-rank-summary {
  font-weight: bold;
  background: #ffedf5;
  border-color: #ff99cc;
  color: #aa0055;
}

/* 戻るボタン */
#back-game {
  display: block;
  margin: 1rem auto 0;
  background: #ffb3d9;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  color: #660033;
  cursor: pointer;
  transition: background 0.2s;
}
#back-game:hover {
  background: #ff80bf;
}

/* 画面下部余白調整 */
#game-page, #ranking-page {
  padding-bottom: 2rem;
}

/* ─────────────────────────────
   ランキング画面調整
───────────────────────────── */
#ranking-page {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
/* タブ＆戻るボタンを上部にまとめる */
.ranking-container {
  position: relative;
  width: 90vw; max-width: 400px;
  margin: 0 auto;
  padding-top: 3rem;  /* 戻るボタン分の余白 */
  box-sizing: border-box;
}
/* 戻るボタンを上部右に */
#back-rank {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: radial-gradient(circle at top left,#ff9aa2,#ffb7b2);
  color: #fff; box-shadow:0 4px 0 #e48a93;
  border-radius:30px; padding:8px 20px;
}
/* タブの下にリスト、リストは固定高さでスクロール */
.rank-tabs {
  z-index:1;
}
#leaderboard {
  counter-reset: rank;
  list-style: none;
  margin: 0;
  padding: 0;
  /* 高さを画面の残り  + スクロール */
  max-height: calc(100vh - 88px /*ヘッダー*/ - 3rem /*戻る余白*/ - 3rem /*タブの高さ*/);
  overflow-y: auto;
}
/* アイコンが消えないように */
#leaderboard li img {
  display: inline-block;
  width: 32px; height:32px;
  margin-right:8px;
  border-radius:50%;
}






/* 遊び方画面の直打ち画像スタイル */
#how-to-play-screen img {
  display: block;            /* ブロック要素にして上下余白が取れる */
  width: 90%;                /* 横幅は画面の90% */
  max-width: 360px;          /* 最大360pxまで */
  margin: 1rem auto;         /* 上下1rem・左右自動で中央寄せ */
  border-radius: 8px;        /* 角丸 */
}

/* 遊び方画面コンテンツ全体の余白調整 */
#how-to-play-screen {
  padding: 1.5rem 1rem;      /* 上下1.5rem・左右1rem */
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  max-width: 90vw;
  margin: 2rem auto;
}

/* 戻るボタンのスタイル */
#how-to-play-screen .back-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 8px 20px;
  border-radius: 30px;
  background: radial-gradient(circle at top left,#ff9aa2,#ffb7b2);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 4px 0 #e48a93;
  transition: transform .1s, box-shadow .1s;
}
#how-to-play-screen .back-btn:active {
  box-shadow: 0 2px 0 #e48a93;
  transform: translateY(2px);
}

/* 遊び方画面全体背景・文字色 */
#how-to-play-screen {
  background: #fff;           /* 背景を真っ白に */
  color: #333;                /* 文字をダークグレーに */
  padding: 1.5rem 1rem;
  border-radius: 12px;
  max-width: 90vw;
  margin: 2rem auto;
}

/* タイトルの色調整 */
#how-to-play-screen h2 {
  color: #d6336c;             /* タイトルはテーマカラーの濃ピンク */
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* リストの文字をはっきり見えるように */
#how-to-play-screen ul {
  list-style: disc inside;
  margin-left: 1rem;
}
#how-to-play-screen ul li {
  color: #333;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* 直打ち画像の枠線＆余白（もし使うなら） */
#how-to-play-screen img {
  display: block;
  width: 90%;
  max-width: 360px;
  margin: 1rem auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* 戻るボタンをより目立たせる */
#how-to-play-screen .back-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 10px 24px;
  background: #ff9aa2;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  box-shadow: 0 4px 0 #e48a93;
  transition: transform .1s, box-shadow .1s;
}
#how-to-play-screen .back-btn:active {
  box-shadow: 0 2px 0 #e48a93;
  transform: translateY(2px);
}




/* 遊び方画面の legend 中央寄せ */
#how-to-play-screen .legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}

/* legend 内の .item は既存スタイルがそのまま使える */





/* ランキング全体レイアウト */
#ranking-page {
  display: flex; flex-direction: column;
  position: fixed; top:0; left:0;
  width:100vw; height:100vh; background:#fff;
}
.ranking-container {
  flex:1; overflow:hidden;
  position: relative;
  margin: 0 auto;
  width:90vw; max-width:400px;
  padding-top:3rem; /* 戻るボタンの分 */
  box-sizing:border-box;
}
/* 戻るボタン上部右 */
#back-rank {
  position:absolute; top:.5rem; right:.5rem;
  padding:8px 20px; border-radius:30px;
  background:radial-gradient(circle at top left,#ff9aa2,#ffb7b2);
  color:#fff; box-shadow:0 4px 0 #e48a93;
}
/* タブとリスト */
.rank-tabs { z-index:1; }
#leaderboard {
  flex:1;
  margin:0; padding:0;
  list-style:none;
  overflow-y:auto;
  max-height: calc(100vh - 88px /*ヘッダー*/ - 3rem /*戻る*/ - 3rem /*タブ*/);
}
/* アイコンスタイル */
.ranking-icon {
  display:inline-block;
  width:32px; height:32px;
  margin-right:8px;
  border-radius:50%;
  object-fit:cover;
  vertical-align:middle;
}
/* 名前・スコア */
#leaderboard li span.name { margin-right:auto; }
#leaderboard li span.score { font-weight:bold; color:#ff6fa3; }



/* ランキング画面：戻るボタンを上部に強制配置 */
#ranking-page .ranking-container {
  position: relative;
}
#back-rank {
  position: absolute !important;
  top: 0.5rem !important;
  left: 0.5rem !important;
  right: auto !important;
  margin: 0 !important;
  padding: 8px 20px !important;
  background: radial-gradient(circle at top left,#ff9aa2,#ffb7b2) !important;
  color: #fff !important;
  box-shadow: 0 4px 0 #e48a93 !important;
  border-radius: 30px !important;
  z-index: 10 !important;
}




.ranking-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}


/* タイマーを目立たせる */
.timer {
  font-size: 2rem;
  color: #e74c3c;        /* 赤色に */
  font-weight: bold;
  text-align: center;
  margin: 1rem 0;
}

/* リザルト画面 */
#result-screen .result-container {
  text-align: center;
  padding: 2rem;
}
.result-score {
  font-size: 1.5rem;
  color: #2980b9;        /* 青で強調 */
}
#to-top {
  margin-top: 1rem;
  padding: .5rem 1rem;
}

/* 結果画面のタイトル文字色 */
#result-screen h2 {
  color: #2c3e50; /* 濃いネイビー */
}

body{
-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}


.share-buttons {
  margin: 1rem 0;
}
.share-buttons button {
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}



.result-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff9f9;
  border-radius: 8px;
  text-align: center;
}

.result-scores p {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.result-scores strong {
  color: #e74c3c;
}

.share-buttons {
  margin: 1.5rem 0;
}

.share-buttons button {
  margin: 0 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  background: #3498db;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.share-buttons button:hover {
  opacity: 0.9;
}

#to-top {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  border: none;
  background: #2ecc71;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

#to-top:hover {
  opacity: 0.9;
}


/* リザルト画面全体 */
#result-screen .result-container {
  max-width: 360px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff0f5; /* ラベンダーブラッシュ */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: center;
  font-family: 'Hiragino Maru Gothic Pro', sans-serif;
}

/* 見出し */
#result-screen .result-container h2 {
  font-size: 1.8rem;
  color: #d6336c; /* ピンクレッド */
  margin-bottom: 1rem;
}

/* スコア表示 */
.result-scores p {
  font-size: 1.2rem;
  margin: .5rem 0;
}
.result-scores p strong {
  display: inline-block;
  width: 140px;
  text-align: right;
  margin-right: 8px;
  color: #ad1457; /* 深いピンク */
}
.result-scores p span {
  font-weight: bold;
  color: #6a1b9a; /* パープル */
}

/* 共有ボタン */
.share-buttons {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 1.5rem 0;
}
.share-buttons button {
  flex: 1;
  padding: .5rem .75rem;
  background: #f06292; /* ピンク */
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background .2s, transform .1s;
}
.share-buttons button:hover {
  background: #ec407a;
  transform: translateY(-2px);
}

/* 戻るボタン */
#to-top {
  display: inline-block;
  margin-top: 1rem;
  padding: .6rem 1.2rem;
  background: #81c784; /* ミントグリーン */
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background .2s, transform .1s;
}
#to-top:hover {
  background: #66bb6a;
  transform: translateY(-2px);
}

/* 結果スコア全体の文字色 */
.result-scores p {
  color: #6a1b9a;   /* 数字と同じパープル */
}

/* ラベル部分（「今回のスコア：」「前回のベストスコア：」） */
.result-scores p strong {
  color: #e74c3c;   /* 赤系 */
}

/* 数値部分 */
.result-scores p span {
  color: #6a1b9a;   /* パープル */
}


.leader-link { display:flex; align-items:center; text-decoration:none; color:inherit; padding:4px; } 

/* 任意の場所に追加 */
.leader-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}
.leader-link:hover {
  background: rgba(0,0,0,0.05);
}
.leader-link img { flex-shrink: 0; }
.leader-link .name,
.leader-link .score { color: inherit; text-decoration: none; }





html, body {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

button, a, input, textarea, div {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}