/* ============ ポテト君タワー（style.css への追加ぶん） ============ */

/* スマホ縦画面 9:16。大型ディスプレイへのミラーリング前提で
   「画面の高さいっぱい」になるように枠のサイズを決める */
.tw-body {
  padding:
    max(4px, env(safe-area-inset-top))
    max(4px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(4px, env(safe-area-inset-left));
  background-color: #12102a;
  background-image:
    radial-gradient(rgba(255, 204, 0, .10) 18%, transparent 19%),
    radial-gradient(rgba(255, 204, 0, .10) 18%, transparent 19%);
}

.tw-body .game-wrap {
  width: min(100%, calc((100svh - 8px) * 9 / 16));
  padding: 0;
}

.tw-body .game-frame {
  aspect-ratio: 9 / 16;
  background: #4fb3ef;
  /* 中の文字サイズを枠の幅に合わせて拡大縮小するため */
  container-type: inline-size;
}

.tw-body canvas {
  width: 100%;
  height: 100%;
}

/* ============ 画面（オーバーレイ） ============ */
.tw-screen {
  justify-content: flex-start;
  gap: 2.2cqw;
  padding: 4cqw 4cqw calc(4cqw + env(safe-area-inset-bottom));
  background: rgba(255, 246, 224, .95);
}

.tw-screen > * { flex-shrink: 0; }
/* タイトルは TOP10 まで出しきりたいので、画面ごとスクロールさせずに一覧側で調整する */
.tw-screen--title { overflow: hidden; gap: 1.6cqw; }
.tw-screen .overlay__fes { font-size: 3.6cqw; }
.tw-screen .btn { font-size: 5.6cqw; padding: 2.2cqw 9cqw; }
.tw-screen .btn--sub { font-size: 3.9cqw; padding: 2cqw 4.6cqw; }
.tw-screen .rank-heading { font-size: 4cqw; }

/* ---- 結果をシェアする ---- */
.btn--share {
  background: #2aa868;
  font-size: 4.2cqw;
  padding: 1.8cqw 6cqw;
}

/* ---- 達成証明書を見せる画面 ----
   ゲーム枠の外に出すので、ここだけは cqw ではなく px / vh で書く */
.tw-certview {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(30, 22, 14, .95);
}

.tw-certview.is-hidden { display: none; }

/* 画像は入れ物の中で、縦横比のまま最大まで。
   object-fit の余白が出ないように、入れ物側で中央寄せする
   （スクリーンショットで白い余白が写らないようにするため） */
.tw-certview__box {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tw-certview__box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
}

.tw-certview__hint {
  flex: 0 0 auto;
  max-width: 440px;
  color: #ffe7b0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.tw-certview__row {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.tw-certview .btn { font-size: 17px; padding: 10px 26px; box-shadow: 0 4px 0 var(--c-ink); }

/* 達成証明書 */
.btn--cert {
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: 4.4cqw;
  padding: 1.9cqw 6cqw;
}

.tw-share-note {
  font-size: 3cqw;
  font-weight: 700;
  color: #2aa868;
  margin-top: -1cqw;
}

.tw-subrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4cqw;
}

/* ---- ロゴ ---- */
/* ロゴ画像。文字もキャラクターも1枚に入っている */
.tw-logo {
  position: relative;
  z-index: 1;
  width: 80cqw;
  max-width: 100%;
  margin: -1cqw 0 -1.5cqw;   /* 絵の余白ぶんを詰める */
  cursor: pointer;
  transition: transform .15s;
}

.tw-logo img {
  display: block;
  width: 100%;
  height: auto;
  /* ロゴの3秒長押しはランキングのリセット操作。
     画像のままだと iPhone で「画像を保存」のメニューが割りこむので止めておく。 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;   /* 長押しは親の h1 で受ける */
}

/* ランキングリセットの隠し操作（長押し中） */
.tw-logo.is-holding { transform: scale(1.04) rotate(-1.5deg); }

/* ---- なまえ入力 ---- */
.tw-namebox {
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: 3.6cqw;
  font-weight: 900;
  color: var(--c-ink);
}

.tw-namebox input {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 5.4cqw;
  font-weight: 900;
  text-align: center;
  letter-spacing: .12em;
  width: 23cqw;
  padding: 1cqw 1cqw;
  border: 0.7cqw solid var(--c-ink);
  border-radius: 3cqw;
  background: #fff;
  color: var(--c-ink);
}

.tw-namebox input:focus { outline: 0.6cqw solid var(--c-blue); }
/* 入力ずみに見えないよう、プレースホルダは薄く */
.tw-namebox input::placeholder { color: #c9b9a0; font-weight: 700; }
.tw-namebox__note { font-size: 3cqw; color: #7a6a55; }

.tw-warn {
  font-size: 3.4cqw;
  font-weight: 900;
  color: var(--c-red);
  animation: flash .6s steps(2) 3;
}

/* ---- キッズ部門のトグル ---- */
.tw-kids {
  display: inline-flex;
  align-items: center;
  gap: 2cqw;
  font-family: inherit;
  color: #9a8a73;
  background: #fff;
  border: 0.7cqw solid var(--c-ink);
  border-radius: 10cqw;
  padding: 1.1cqw 3.6cqw 1.1cqw 1.6cqw;
  cursor: pointer;
  box-shadow: 0 0.7cqw 0 rgba(0, 0, 0, .16);
  transition: background .12s, color .12s;
}

/* チェックの四角。オンのときだけ中の ✓ が見える */
.tw-kids__box {
  display: grid;
  place-items: center;
  width: 5.6cqw;
  height: 5.6cqw;
  border: 0.55cqw solid var(--c-ink);
  border-radius: 1.6cqw;
  background: #fff;
  font-size: 3.6cqw;
  font-weight: 900;
  line-height: 1;
  color: transparent;   /* ✓ はオンのときだけ見せる。枠線は常に出す */
}

.tw-kids__main {
  font-family: "Bangers", cursive;
  font-size: 5.2cqw;
  letter-spacing: .06em;
}

.tw-kids__sub { font-size: 2.9cqw; font-weight: 700; }

.tw-kids:active { transform: translateY(0.5cqw); box-shadow: none; }

.tw-kids.is-on {
  color: #fff;
  background: var(--c-red);
}

.tw-kids.is-on .tw-kids__box { color: var(--c-red); }

/* ジャンフェス当日だけ出る見出し */
.tw-fesbadge {
  flex: 0 0 auto;
  font-size: 3.4cqw;
  font-weight: 900;
  color: #fff;
  background: var(--c-red);
  border: 0.5cqw solid var(--c-ink);
  border-radius: 10cqw;
  padding: 0.7cqw 3.4cqw;
}

/* ---- ランキングを2つ横に並べる ---- */
.tw-screen .rank-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
  width: 97%;
  flex: 1 1 auto;
  min-height: 0;
}

.tw-screen .rank-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
  min-height: 0;
}

.tw-screen .rank-pair .rank-heading { font-size: 3.3cqw; }
.tw-screen .rank-pair .rank-list { width: 100%; }

/* 幅が半分になるので、行をひとまわり小さくする */
.tw-screen .rank-pair .rank-list li {
  padding: 0.4cqw 1.4cqw;
  font-size: 2.7cqw;
  gap: 1.2cqw;
  border-width: 0.5cqw;
  border-radius: 2cqw;
}

.tw-screen .rank-pair .rank-list li .rank-no { font-size: 3.6cqw; min-width: 5cqw; }
.tw-screen .rank-pair .rank-list li .rank-score { font-size: 3cqw; }
.tw-screen .rank-pair .rank-list li .rank-perfect { font-size: 2.2cqw; }
.tw-screen .rank-pair .rank-list li.is-me::after { font-size: 2.1cqw; padding: 0.1cqw 1.2cqw; }
.tw-screen .rank-pair .rank-empty { font-size: 2.6cqw; }

/* ---- ランキング一覧 ---- */
.tw-screen .rank-list {
  width: 88%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  gap: 0.75cqw;
}

.tw-screen .rank-list li {
  padding: 0.5cqw 2.4cqw;
  font-size: 3.3cqw;
  border-width: 0.6cqw;
  border-radius: 2.6cqw;
  gap: 2cqw;
}

.tw-screen .rank-list li .rank-no { font-size: 5cqw; min-width: 7cqw; }
.tw-screen .rank-list li .rank-score { font-size: 4.2cqw; }
.tw-screen .rank-list li .rank-perfect {
  font-size: 2.8cqw;
  color: #7a6a55;
  white-space: nowrap;
}
.tw-screen .rank-list li.is-me::after { font-size: 2.8cqw; padding: 0.2cqw 1.8cqw; }
.tw-screen .link-chips { gap: 1.2cqw; }
.tw-screen .link-chips .chip { font-size: 2.3cqw; padding: 0.7cqw 1.5cqw; border-width: 0.4cqw; }

/* ============ あそびかた ============ */
.tw-screen--howto { justify-content: center; gap: 3.4cqw; }

.tw-howto-title {
  font-size: 7cqw;
  font-weight: 900;
  color: var(--c-ink);
  text-shadow: 0.6cqw 0.6cqw 0 var(--c-yellow);
}

.tw-howto {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  width: 92%;
}

.tw-howto__card {
  display: flex;
  align-items: center;
  gap: 3cqw;
  background: #fff;
  border: 0.7cqw solid var(--c-ink);
  border-radius: 3.4cqw;
  padding: 2.4cqw 3cqw;
  text-align: left;
}

.tw-howto__card p {
  font-size: 3.6cqw;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink);
}

.tw-howto__card p b { font-size: 4.4cqw; color: var(--c-red); }

.tw-fig { width: 30cqw; flex-shrink: 0; }
.tw-fig .f-block { fill: #ffd84d; stroke: #3a2a12; stroke-width: 4; }
.tw-fig .f-base  { fill: #f0a71e; stroke: #3a2a12; stroke-width: 4; }
.tw-fig .f-arrow { fill: none; stroke: var(--c-red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tw-fig .f-guide { fill: none; stroke: var(--c-blue); stroke-width: 3; stroke-dasharray: 5 5; }
.tw-fig .f-hand  { fill: #fff; stroke: #3a2a12; stroke-width: 4; }
.tw-fig .f-txt   { font-family: "Bangers", cursive; font-size: 15px; fill: #1a9fe0; text-anchor: middle; }
.tw-fig .f-txt--red { fill: #e60023; }

/* ============ ゲームオーバー ============ */
.tw-screen--over { gap: 1.6cqw; }

.tw-over-title {
  font-family: "Bangers", cursive;
  font-size: 9cqw;
  letter-spacing: 0.8cqw;
  color: var(--c-red);
  text-shadow: 0.7cqw 0.7cqw 0 var(--c-ink);
}

.tw-result { display: flex; align-items: baseline; justify-content: center; gap: 1.5cqw; }

.tw-result__num {
  font-family: "Bangers", cursive;
  font-size: 30cqw;
  line-height: .95;
  color: var(--c-orange);
  text-shadow: 1cqw 1cqw 0 var(--c-ink);
}

.tw-result__unit { font-size: 7cqw; font-weight: 900; color: var(--c-ink); }

.tw-result-sub {
  display: flex;
  gap: 4cqw;
  font-size: 3.4cqw;
  font-weight: 700;
  color: #7a6a55;
}

.tw-result-sub b { font-size: 4.6cqw; color: var(--c-ink); }

/* みんなの中で何位か。いちばん効くので大きく出す */
.tw-rank {
  font-size: 5.2cqw;
  font-weight: 900;
  color: var(--c-ink);
  line-height: 1.25;
}
.tw-rank b {
  font-size: 8.4cqw;
  color: var(--c-red);
}
.tw-rank--sub {
  font-size: 4cqw;
  margin-top: -0.6cqw;
}
.tw-rank--sub b { font-size: 6cqw; }

.tw-rank--out {
  font-size: 3.6cqw;
  color: #7a6a55;
}

.tw-newrecord {
  font-size: 4.6cqw;
  font-weight: 900;
  color: var(--c-red);
  animation: flash .5s steps(2) infinite;
}


.tw-name-row {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font-size: 3.4cqw;
  font-weight: 700;
  color: var(--c-ink);
}

.tw-name-row b { font-size: 4.6cqw; color: var(--c-red); letter-spacing: .1em; }
.tw-name-row .btn-text { font-size: 3cqw; }

.tw-screen--over .rank-form input {
  font-size: 5cqw;
  width: 22cqw;
  letter-spacing: .12em;
  border-width: 0.6cqw;
  border-radius: 2.4cqw;
}

.tw-screen--over .over-pane { flex: 1 1 auto; min-height: 0; width: 100%; gap: 1.4cqw; }
.tw-screen--over .rank-list { min-height: 0; }

/* ============ ミュートボタン ============ */
.tw-mute {
  position: absolute;
  top: 2.5cqw;
  right: 2.5cqw;
  z-index: 20;
  width: 11cqw;
  height: 11cqw;
  font-size: 5cqw;
  line-height: 1;
  background: rgba(255, 255, 255, .9);
  border: 0.6cqw solid var(--c-ink);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

.tw-mute:active { transform: scale(.92); }

/* 横向き・低い画面では枠を高さ基準に。文字が枠からあふれないよう最低限だけ詰める */
@media (max-height: 560px) {
  .tw-screen { gap: 1.6cqw; }
}