/* 忍者ケン坊の木のぼりの術の見た目。石コロンスキッパー（game/public/skipper/skipper.css）を写して、
   石を選ぶ画面・動画を見る画面を外し、遊び方のひとことを足したもの（2026-11-06）。
   ボタンは紺むらさきに白い文字、ほかは白に濃い紺の文字（どんでん返しと同じ）。文字の色にオレンジは使わない。
   ゲームの絵は画面いっぱいの canvas に描く */
:root {
  --cream: #fff;
  --ink: #1f2a44;
  --accent: #4e5590; /* 目立たせたい字の色。ケン坊の服の紺むらさき（2026-11-06、利用者「オレンジがあまり好きではない」） */
  --yellow: #ffd62e;
  --line: #1b1b22; /* ロゴと同じ黒いふち */
  --red: #e04a2f;
  --sky: #8fd3f0;
  /* ボタンの色は NoFile GAMES のどんでん返しと同じ（2026-11-06、利用者「どんでん返しの方の色にして」）。
     主のボタンはケン坊の服の紺むらさきに白い文字、ほかは白に濃い紺の文字 */
  --btn: #4e5590;
  --btn-text: #fff;
  --btn-sub: #fff;
  --btn-sub-text: #1f2a44;
  --safe-top: env(safe-area-inset-top, 0px);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  /* 文字はブラゲームズと同じ Zen Maru Gothic（2026-11-06、利用者「ゲーム内のフォントもブラゲームズに合わせて」） */
  font-family: 'Zen Maru Gothic', system-ui, -apple-system, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
[hidden] {
  display: none !important;
}
/* ゲームの画面。スマホは画面いっぱい、パソコンはスマホの形で真ん中に */
.stage {
  position: relative;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(16px, var(--safe-top)) 16px max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.overlay > * {
  pointer-events: auto;
}
/* 最初の画面：上に題名・ひとこと・スタート、下に友だちに教える・規約 */
.title {
  justify-content: space-between;
  overflow-y: auto;
  padding: calc(62px + var(--safe-top)) 12px calc(14px + env(safe-area-inset-bottom));
}
.title-top,
.title-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.title-logo {
  margin: 0;
  line-height: 0;
}
.title-logo img {
  width: min(92vw, 380px);
  height: auto;
}
/* 題名の下のひとこと（いちばんの遊びどころ） */
.hook {
  margin: 6px 0 0;
  padding: 5px 16px;
  border-radius: 999px;
  border: 3px solid var(--line);
  background: #fff;
  color: var(--btn);
  font-size: 16px;
  font-weight: 900;
  transform: rotate(-3deg);
  box-shadow: 0 3px 0 var(--line);
}
/* 絵文字の代わりに文字の横へ置く小さな絵（ピコピコハンマー） */
.emoji {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.2em;
  vertical-align: -0.28em;
}
/* 空や遊具の上でも読めるよう、文字の後ろに半透明の紺の板 */
.tagline {
  display: inline-block;
  max-width: 360px;
  margin: 10px 0 4px;
  padding: 4px 14px;
  border-radius: 12px;
  background: rgba(20, 50, 100, 0.55);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  /* Zen Maru Gothic は字の幅が広いので、少し詰めて1文字だけ次の行にこぼれないようにする */
  letter-spacing: -0.03em;
  text-shadow: 0 1px 3px rgba(20, 40, 80, 0.6);
}
.trust {
  margin: 0 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 700;
}
.button {
  display: inline-block;
  width: 100%;
  border: 3px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--btn);
  color: var(--btn-text);
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
}
.button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--line);
}
.button.big {
  font-size: 19px;
  padding: 14px 28px;
}
.title-top .button.big {
  width: auto;
  min-width: 200px;
  margin: 4px 0 2px;
  padding: 11px 28px;
  font-size: 20px;
}
.button.secondary {
  background: var(--btn-sub);
  color: var(--btn-sub-text);
  font-size: 16px;
}
.button.text {
  width: auto;
  border: 0;
  color: var(--ink);
  background: none;
  box-shadow: none;
  font-size: 15px;
  text-decoration: underline;
}
.button.share {
  background: #111;
  color: #fff;
  box-shadow: 0 4px 0 #000;
}
.button:disabled {
  opacity: 0.6;
}
.title-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.title .button.how-toggle {
  width: auto;
  margin: 6px 0 0;
  padding: 7px 16px;
  font-size: 14px;
  background: var(--btn-sub);
  color: var(--btn-sub-text);
  box-shadow: 0 3px 0 var(--line);
}
.how-box {
  max-width: 360px;
  margin-top: 8px;
}
.how {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  border: 3px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}
.how li + li {
  margin-top: 4px;
}
/* ログインの案内と自己ベスト（スタートの下の小さな札） */
.member {
  margin: 4px 0 0;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(20, 50, 100, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 3px rgba(20, 40, 80, 0.6);
}
.member:empty {
  display: none;
}
.member p {
  margin: 0;
}
.member a {
  color: #fff;
  font-weight: 900;
}
/* 友だちに教える */
.share-row {
  margin: 0 0 6px;
  text-align: center;
}
.share-lead {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(20, 40, 80, 0.8);
}
.share-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.share-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(20, 40, 80, 0.3));
}
.share-icon svg,
.share-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
/* LINE の公式アイコンは角の丸い四角なので、丸く切らない */
.share-icon.line {
  border-radius: 0;
}
.share-icon:active {
  transform: scale(0.92);
}
.share-row-msg {
  margin: 6px 0 0;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 700;
}
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.footer a {
  color: #fff;
}
/* 左上の「‹ ブラゲームズ」（NoFile の ‹ GAMES と同じ形）。右上の音のボタンと同じ高さ */
.games-back {
  position: absolute;
  top: max(10px, var(--safe-top));
  left: 10px;
  z-index: 5;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.75);
  color: #1d2727;
  font: 800 15px/44px 'Zen Maru Gothic', system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.games-back:active {
  background: rgba(255, 255, 255, 0.95);
}
/* 右上の音のボタン（NoFile のゲームと同じ白い丸とスピーカーの絵） */
.mute {
  position: absolute;
  top: max(12px, var(--safe-top));
  right: 10px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  padding: 0;
  cursor: pointer;
  /* 絵を丸のまん中に置く（ボタンの文字の行の高さで、上下にずれないように） */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.mute svg {
  /* 絵の形の指定は、HTML の style ではなくここに書く（ゲームの画面は安全の決まりで、HTML の style が効かない） */
  display: block;
  flex: none;
}
/* 結果とランキングの白い板 */
.panel {
  margin-top: auto;
  margin-bottom: auto;
  width: min(100%, 360px);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 18px 12px;
  border: 3px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 5px 0 var(--line), 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.panel p,
.panel h2 {
  margin: 0;
}
.panel h2 {
  font-size: 20px;
}
.panel .cause {
  font-weight: 800;
  color: var(--accent);
}
.panel .count {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}
.panel .count small {
  font-size: 24px;
  margin-left: 4px;
}
.panel .ms strong {
  font-size: 20px;
}
.result-rank {
  font-size: 13px;
  line-height: 1.7;
}
.result-rank p {
  margin: 0;
}
.result-rank .login,
.member .login {
  display: inline-block;
  margin-top: 4px;
}
/* 結果の下の「ゲームトップ」「ほかのゲームも遊ぶ」。2つを横に並べる */
.result-links {
  display: flex;
  gap: 8px;
  width: 100%;
}
.result-links .button {
  flex: 1;
  padding: 10px 4px;
  font-size: 13.5px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.games-link {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
/* ランキング */
.ranking {
  max-height: calc(100% - 20px);
}
.tabs {
  display: flex;
  gap: 6px;
  width: 100%;
}
.tabs button {
  flex: 1;
  padding: 8px 4px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.tabs.small button {
  padding: 5px 4px;
  font-size: 12.5px;
}
.tabs button[aria-selected='true'] {
  background: var(--btn);
  color: var(--btn-text);
}
.rank-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  min-height: 120px;
  font-size: 14px;
}
.rank-list li {
  display: flex;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
.rank-list li.me {
  background: #fff3c4;
  font-weight: 800;
}
.rank-list li.empty {
  justify-content: center;
  color: #6b7280;
  border: 0;
}
.rank-list .no {
  width: 2.2em;
  text-align: right;
  font-weight: 900;
}
.rank-list .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-list .val {
  font-weight: 800;
}
.rank-mine,
.rank-note {
  font-size: 12.5px;
}
/* 記録の画像を共有する小さな画面 */
.share-pop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 30, 50, 0.6);
  overflow-y: auto;
}
.share-box {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  text-align: center;
}
.share-box h2 {
  margin: 0;
  font-size: 18px;
}
.share-card {
  width: 100%;
  height: auto;
  max-height: 42dvh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.share-how {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: -0.03em;
}
.noscript {
  position: absolute;
  inset: 40% 16px auto;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

/* ---- ここから忍者ケン坊の木のぼりの術だけのもの ---- */
.title-logo img {
  width: min(82vw, 360px);
}
/* 長押しで跳ぶので、スマホの長押しの選ぶ・メニューを出さない */
.stage canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* 最初の1回を跳ぶまでの、遊び方のひとこと（画面のまん中より上。押しても跳ぶ邪魔をしない。NoFile と同じ） */
.hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  text-align: center;
  pointer-events: none;
}
.hint p {
  display: table;
  margin: 0 auto;
  padding: 8px 22px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--btn);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 4px 0 var(--line);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    transform: scale(1.08);
  }
}
/* 結果 */
.panel .best-line,
.panel .rank-title {
  font-size: 13.5px;
}
.panel .record {
  font-size: 15px;
  font-weight: 900;
  color: var(--accent);
}