/* 見た目は ぽかぽんシリーズ共通の作法にそろえる:
   丸ゴシック(Zen Maru Gothic)、砂色の地、パネル、pill、常時表示フッター。 */

:root {
  --sand: #f6e7c9;
  --sand-deep: #e9d3ac;
  --bark: #5b4636;
  --bark-soft: #7d6450;
  --leaf: #6f9a5c;
  --leaf-deep: #4f7742;
  --berry: #d1685e;
  --blossom: #e0879c;
  --blossom-deep: #c25f78;
  --cream: #fffaf0;
  --font-rounded: "Zen Maru Gothic", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-rounded);
  background: var(--sand);
  color: var(--bark);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;   /* iPhoneで 連打しても ズームさせない */
}

.hidden { display: none !important; }

/* 3Dの盤面。いちばん後ろに 敷きっぱなしにする */
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ── ボタン ───────────────────────────────────────── */
button { font-family: inherit; }

.primary-button {
  font-size: 17px;
  font-weight: 700;
  padding: 13px 32px;
  border: none;
  border-radius: 999px;
  background: var(--blossom);
  color: var(--cream);
  box-shadow: 0 3px 0 var(--blossom-deep);
  cursor: pointer;
}
.primary-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blossom-deep); }

.secondary-button {
  font-size: 14px;
  padding: 9px 16px;
  border: 2px solid var(--sand-deep);
  border-radius: 999px;
  background: var(--cream);
  color: var(--bark);
  cursor: pointer;
}
.secondary-button:active { background: var(--sand-deep); }
.secondary-button:disabled { opacity: .45; cursor: default; }

/* いま押してほしいボタンだけ 目立たせる */
.secondary-button.go {
  background: var(--blossom);
  border-color: var(--blossom-deep);
  color: var(--cream);
  animation: glow 1.3s ease-in-out infinite;
}
/* 大きさを 変えると 押そうとした瞬間に ずれるので、光らせるだけに する */
@keyframes glow {
  50% { box-shadow: 0 0 0 6px rgba(224, 135, 156, .25); }
}

/* ── ゲーム中の 表示 ──────────────────────────────── */
/* hud(ピル+やめる)と banner(通知)を まとめる 帯。fixed は ここ1か所だけに して、
   hud が 何行に なっても banner は そのすぐ下に つづく(重ならない)。 */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 12px 0;
}
.hud {
  width: 100%; max-width: 460px;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  pointer-events: none;
}
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--cream);
  border: 2px solid var(--sand-deep);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
  max-width: 42vw;
  overflow: hidden; text-overflow: ellipsis;
}
.pill strong { font-variant-numeric: tabular-nums; font-weight: 700; }

.timebar {
  height: 8px; border-radius: 999px; background: var(--sand-deep); overflow: hidden;
}
.timebar > i { display: block; height: 100%; width: 100%; background: var(--blossom); }
.time-panel.low .timebar > i { background: var(--berry); }

/* マップの 上に つねに おなじ場所で 出る 通知。透けると 読めないので 不透明な帯にする
   (「つながった」「落ちた」「いきどまり」等。段差で 進めない時の 一瞬の 注意も ここに出す) */
.banner {
  width: min(420px, 92vw);
  background: var(--cream); border: 2px solid var(--sand-deep);
  border-radius: 14px; padding: 10px 16px;
  text-align: center; font-size: 15px; font-weight: 700;
  pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s;
  transform: translateY(-6px);
  box-shadow: 0 4px 0 rgba(91, 70, 54, .1);
}
.banner.show { opacity: 1; transform: translateY(0); }

/* やめるボタン。もどる・やりなおしと 同じ行に 並ぶ、控えめな 色の secondary-button */
.quit-button { color: var(--bark-soft); }

/* 時間と 操作ボタンを ひとつの帯に まとめる。中身が 何行に なっても、
   ふたつが 別々の position:fixed で 重なることは もう ない。 */
.bottombar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 74px; width: min(420px, 92vw);
  display: flex; flex-direction: column; gap: 8px;
}
.time-panel {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream); border: 2px solid var(--sand-deep);
  border-radius: 16px; padding: 8px 14px;
  font-size: 13px;
}
.time-panel strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.time-panel.low { border-color: var(--berry); color: var(--berry); }
.time-panel .timebar { flex: 1 1 auto; }

.action-bar { display: flex; flex-direction: column; gap: 6px; }
.action-row {
  display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.action-row .secondary-button { flex: 1 1 auto; padding: 9px 10px; min-width: 76px; }
.action-row .icon-button { flex: 0 0 auto; min-width: 0; width: 42px; padding: 9px 0; }

/* カメラの 寝かせ具合。回転ボタンの すぐ右に 小さく 置く */
.cam-inline {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--bark-soft);
}
.cam-inline input { width: 64px; accent-color: var(--blossom); }

/* ── 画面(タイトル・おわり・よみこみ) ─────────────── */
.screen {
  position: fixed; inset: 0;
  /* align-items:center だと、中身が 画面より 高いとき 上側が
     スクロールしても 出てこなくなる(はみ出した分が 上下 均等に 隠れるため)。
     つねに 上そろえにして、margin:auto で 短いときだけ 中央に 見せる。 */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px 14px 84px;
  overflow-y: auto;
  background: rgba(246, 231, 201, .96);
}
.panel {
  width: min(460px, 92vw);
  margin: auto 0;   /* 画面より 低いときは 上下 中央に、高いときは 上そろえのまま */
  background: var(--cream);
  border: 3px solid var(--sand-deep);
  border-radius: 22px;
  padding: 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
  box-shadow: 0 6px 0 rgba(91, 70, 54, .12);
}
.hero {
  width: min(300px, 70vw); height: auto;
  border-radius: 18px; border: 2px solid var(--sand-deep);
}
.title { font-size: 24px; margin: 0; }
.lead { margin: 0; font-size: 14px; line-height: 1.8; color: var(--bark-soft); }

.link-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  font-size: 12px;
}
.link-row a, .share-button {
  display: inline-flex; align-items: center;
  color: var(--leaf-deep); text-decoration: none; font-size: 12px;
  background: var(--cream); border: 2px solid var(--sand-deep);
  border-radius: 999px; padding: 6px 14px;
  cursor: pointer; font-family: inherit; font-weight: 700;
}
.link-row a:active, .share-button:active { background: var(--sand-deep); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--bark-soft); width: 100%; }
.field input {
  font: inherit; font-size: 16px; padding: 10px 14px;
  border: 2px solid var(--sand-deep); border-radius: 14px;
  background: var(--sand); color: var(--bark); text-align: center;
}

.pill-choices { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pill-choices button {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: inherit; font-size: 14px; padding: 8px 16px;
  border: 2px solid var(--sand-deep); border-radius: 999px;
  background: var(--cream); color: var(--bark); cursor: pointer;
}
.pill-choices button small { font-size: 10px; color: var(--bark-soft); }
.pill-choices button.on {
  background: var(--leaf); border-color: var(--leaf-deep); color: var(--cream); font-weight: 700;
}
.pill-choices button.on small { color: var(--cream); }
.pill-choices.small button { padding: 6px 14px; font-size: 12px; }

.ranking-groups { width: 100%; }
.ranking-title { font-size: 14px; margin: 4px 0 2px; font-weight: 700; }
.ranking-sub { font-size: 11px; margin: 0 0 6px; color: var(--bark-soft); }
.field-label { font-size: 12px; color: var(--bark-soft); margin: 4px 0 0; }

/* モードの 入口ボタン(釣りライフと同じ形) */
.mode-choice-button { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.mode-choice-sub { font-size: 11px; font-weight: 400; opacity: .9; }

.pill-choices.column { flex-direction: column; align-items: stretch; }
.pill-choices.column button { flex-direction: row; justify-content: space-between; padding: 12px 18px; font-size: 15px; }
.ranking-list {
  list-style: none; margin: 10px 0 0; padding: 0; text-align: left;
  font-size: 14px; max-height: 30vh; overflow-y: auto;
}
.ranking-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 12px; border-bottom: 1px solid var(--sand-deep);
}
.ranking-list li .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-list li.me { background: #fdeef1; border-radius: 10px; font-weight: 700; }
.ranking-list li.empty { justify-content: center; color: var(--bark-soft); border: none; }

.result { font-size: 15px; margin: 0; }
.result strong { font-size: 34px; color: var(--blossom-deep); }
.note { font-size: 12px; color: var(--bark-soft); margin: 0; min-height: 1.2em; }

/* よみこみ */
.loading-panel { gap: 10px; }
.loading-title { margin: 0; font-size: 15px; }
.loading-bar {
  width: min(260px, 70vw); height: 12px; border-radius: 999px;
  background: var(--sand-deep); overflow: hidden;
}
.loading-bar-fill { height: 100%; width: 0; background: var(--blossom); transition: width .2s; }
.loading-percent { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--bark-soft); }
#load { transition: opacity .4s; }
#load.done { opacity: 0; pointer-events: none; }

/* ── 常時表示フッター ─────────────────────────────── */
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--sand-deep);
  color: var(--bark);
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
  z-index: 5;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--bark); }
.version-link { font-weight: 700; }

/* ── 法務モーダル ─────────────────────────────────── */
.legal-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.legal-modal-backdrop { position: absolute; inset: 0; background: rgba(60, 45, 35, .55); }
.legal-modal-body {
  position: relative; width: min(720px, 94vw); height: min(80vh, 720px);
  background: var(--cream); border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(60, 45, 35, .35);
}
.legal-modal-body iframe { width: 100%; height: 100%; border: none; }
.legal-modal-close {
  position: absolute; top: 8px; right: 10px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--sand-deep); background: var(--cream); color: var(--bark);
  font-size: 15px; cursor: pointer;
}

@media (max-height: 620px) {
  .screen { align-items: flex-start; }
  .title { font-size: 20px; }
}