/* ふんマップ かんたん版。古いスマホ・お年寄りでも使いやすいよう大きめの文字とボタンにしている */
:root {
  --green: #3b6b3b;
  --green-light: #cfe3c8;
  --bg: #f6faf3;
  --text: #1b2a1b;
  --muted: #5a6b5a;
  --error: #b3261e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

[hidden] { display: none !important; }

.screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; }
.center { align-items: center; justify-content: center; padding: 24px; text-align: center; overflow-y: auto; }

h1 { margin: 0 0 12px; font-size: 30px; color: var(--green); }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.error { color: var(--error); font-weight: 600; }
.label { margin-top: 24px; font-weight: 600; }

.code-input {
  width: 100%; max-width: 320px; margin: 8px 0 16px; padding: 14px;
  font-size: 28px; letter-spacing: 6px; text-align: center; text-transform: uppercase;
  border: 2px solid var(--muted); border-radius: 10px; background: #fff;
}

button, .button {
  font: inherit; cursor: pointer; border-radius: 999px; padding: 12px 20px;
  border: 2px solid transparent; text-decoration: none; display: inline-block; text-align: center;
}
.primary { background: var(--green); color: #fff; font-weight: 700; min-width: 220px; }
.primary:disabled { opacity: 0.5; }
.secondary { background: #fff; color: var(--green); border-color: var(--green); }
.text { background: none; color: var(--green); }
.big { font-size: 20px; padding: 16px 24px; flex: 1; }
.round { width: 56px; height: 56px; padding: 0; font-size: 26px; background: #fff; color: var(--green); border-color: var(--green); }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--green); color: #fff; font-weight: 700; font-size: 20px;
}
.bar .text { color: #fff; font-size: 26px; padding: 0 8px; }

.summary { padding: 6px 16px; background: #fff; border-bottom: 1px solid var(--green-light); font-size: 16px; }

.map { flex: 1; min-height: 200px; }
.map-wrap { position: relative; flex: 1; display: flex; }
.center-pin {
  position: absolute; left: 50%; top: 50%; z-index: 500; pointer-events: none;
  font-size: 44px; line-height: 1; transform: translate(-50%, -100%);
}

.actions {
  display: flex; align-items: center; padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: #fff;
}

.actions > * + * { margin-left: 12px; }

.hint { display: flex; align-items: center; padding: 10px 16px; background: #fff; }
.hint > * + * { margin-left: 12px; }
.hint img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.hint p { margin: 0; font-size: 16px; }

.spinner {
  width: 40px; height: 40px; margin: 16px auto; border-radius: 50%;
  border: 5px solid var(--green-light); border-top-color: var(--green);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; background: rgba(0, 0, 0, 0.4); display: flex; align-items: flex-end; }
.modal-body { width: 100%; background: #fff; padding: 20px 16px 28px; display: flex; flex-direction: column; border-radius: 16px 16px 0 0; }
/* Chrome 83はflexのgapに未対応のため、余白はmarginで付ける */
.modal-body > * + * { margin-top: 12px; }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: 100px; z-index: 3000;
  background: #222; color: #fff; padding: 12px 16px; border-radius: 10px; text-align: center;
}

.busy {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2500; background: rgba(246, 250, 243, 0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.popup img { width: 220px; max-width: 100%; border-radius: 6px; display: block; margin-bottom: 6px; }
.popup button { margin-top: 6px; padding: 8px 16px; min-width: 0; font-size: 16px; }
.popup p { margin: 2px 0; font-size: 15px; }

.me-dot { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); }

.pin {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); color: #fff; font-weight: 700;
  text-align: center; line-height: 22px; font-size: 16px;
}
.pin-open { background: #7a4a1e; }
.pin { font-size: 14px; }
.pin-resolved { background: #2e7d32; }

.filter { margin: 6px 16px 0; font: inherit; font-size: 16px; padding: 6px; border: 1px solid var(--muted); border-radius: 8px; background: #fff; }
.choices { overflow: hidden; }
.choices button { float: left; width: 48%; margin: 0 1% 8px; min-width: 0; padding: 14px 6px; background: #fff; font-weight: 700; }
textarea { font: inherit; font-size: 18px; padding: 8px; border: 2px solid var(--muted); border-radius: 10px; width: 100%; box-sizing: border-box; }

.danger { background: #c62828; color: #fff; font-weight: 700; }
.danger:disabled { opacity: 0.5; }
.scam-banner { display: block; width: 100%; border-radius: 0; background: #c62828; color: #fff; font-weight: 700; text-align: left; padding: 10px 16px; font-size: 16px; }
.modal-body.scroll { max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.police { background: #fdecea; border-radius: 10px; padding: 10px 12px; }
.police p { margin: 6px 0 0; }
.police-buttons { overflow: hidden; margin-top: 8px; }
.police-buttons .button { float: left; width: 48%; margin-right: 4%; padding: 10px 0; }
.police-buttons .button + .button { margin-right: 0; }
.choices button.selected { background: #c62828; color: #fff; border-color: #c62828; }
.scam-item { border-bottom: 1px solid #eee; padding: 8px 0; }
.scam-item p { margin: 2px 0; }

/* ---------- 看板犬（mascot.js） ---------- */
.dog { display: block; width: 100%; height: auto; overflow: visible; }
.dog .leg { transform-box: fill-box; transform-origin: 50% 10%; }
.dog .dog-tail { transform-box: fill-box; transform-origin: 90% 90%; }

/* 読み込み中：その場で歩く */
.mascot-walk { width: 160px; margin: 8px auto; }
.mascot-walk .leg-back-a, .mascot-walk .leg-front-a { animation: leg-swing 0.5s ease-in-out infinite alternate; }
.mascot-walk .leg-back-b, .mascot-walk .leg-front-b { animation: leg-swing 0.5s ease-in-out infinite alternate-reverse; }
.mascot-walk .dog-tail { animation: tail-wag 0.35s ease-in-out infinite alternate; }
.mascot-walk .dog-body { animation: body-bob 0.25s ease-in-out infinite alternate; }

@keyframes leg-swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes tail-wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes body-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }

/* お礼の演出 */
.mascot-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(27, 42, 27, 0.45);
}
.mascot-card { width: 100%; max-width: 360px; background: #fff; border-radius: 20px; padding: 20px 16px 14px; text-align: center; overflow: hidden; }
.mascot-message { margin: 8px 0 0; font-size: 20px; font-weight: 700; color: var(--green); }
.mascot-hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.mascot-stage { position: relative; height: 170px; overflow: hidden; }
.mascot-stage .dog-wrap { position: absolute; left: 70px; bottom: 6px; width: 190px; }
.mascot-stage .surprise {
  position: absolute; left: 140px; top: -8px; font-size: 40px; font-weight: 900; color: #b3261e; opacity: 0;
}
.poop-spot { position: absolute; left: 44px; bottom: 8px; width: 56px; height: 120px; }
.poop-spot .poop { position: absolute; left: 0; bottom: 0; width: 56px; transform: scale(0); transform-origin: 50% 100%; }
.poop-spot .plop { position: absolute; left: -24px; bottom: 50px; font-size: 18px; font-weight: 700; color: #7a4a1e; opacity: 0; white-space: nowrap; }
.poop-spot .pin { position: absolute; left: 12px; bottom: 40px; width: 32px; opacity: 0; }

/* フン：歩いてくる→しゃがむ→ぷりっ→ピンが刺さる→「！」→走って逃げる（全体3.6秒） */
.play-poop .dog-wrap { animation: dog-poop 3.6s ease-in-out forwards; }
.play-poop .dog-body { animation: dog-squat 3.6s ease-in-out forwards; }
.play-poop .leg-back-a, .play-poop .leg-front-a { animation: leg-swing 0.3s ease-in-out infinite alternate; }
.play-poop .leg-back-b, .play-poop .leg-front-b { animation: leg-swing 0.3s ease-in-out infinite alternate-reverse; }
.play-poop .dog-tail { animation: tail-wag 0.3s ease-in-out infinite alternate; }
.play-poop .poop { animation: poop-pop 3.6s ease-out forwards; }
.play-poop .plop { animation: plop 3.6s ease-out forwards; }
.play-poop .pin { animation: pin-drop 3.6s ease-in forwards; }
.play-poop .surprise { animation: surprise 3.6s ease-out forwards; }

@keyframes dog-poop {
  0% { transform: translateX(-280px); }
  22% { transform: translateX(0); }
  64% { transform: translateX(0); }
  70% { transform: translateX(-8px); }
  100% { transform: translateX(600px); }
}
@keyframes dog-squat {
  0%, 24% { transform: translateY(0); }
  30%, 46% { transform: translateY(10px); }
  52%, 100% { transform: translateY(0); }
}
@keyframes poop-pop {
  0%, 34% { transform: scale(0); }
  40% { transform: scale(1.15); }
  44%, 100% { transform: scale(1); }
}
@keyframes plop {
  0%, 34% { opacity: 0; transform: translateY(0); }
  40%, 52% { opacity: 1; transform: translateY(-6px); }
  58%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes pin-drop {
  0%, 52% { opacity: 0; transform: translateY(-140px); }
  60% { opacity: 1; transform: translateY(0); }
  64% { transform: translateY(-8px); }
  68%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes surprise {
  0%, 60% { opacity: 0; transform: translateY(6px); }
  64%, 70% { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 0; }
}

/* 片付けた・そのほかの報告：しっぽを振って喜ぶ */
.play-wag .dog-wrap { left: 60px; animation: hop 0.5s ease-in-out infinite alternate; }
.play-wag .dog-tail { animation: tail-wag 0.18s ease-in-out infinite alternate; }

@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* 動きを減らす設定の端末では、最後の場面を止め絵で出す */
@media (prefers-reduced-motion: reduce) {
  .mascot-walk *, .mascot-stage, .mascot-stage * { animation: none !important; }
  .play-poop .poop, .play-poop .pin { opacity: 1; transform: none; }
}

/* ---------- ひとりで記録する ---------- */
.personal-start { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--green-light); max-width: 360px; }
.personal-start p { margin: 0 0 10px; font-size: 16px; }

/* 記録の一覧（印刷・PDF保存用） */
.print-screen { overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; display: block; }
.print-controls { padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--green-light); }
.print-controls button { min-width: 0; margin: 0 8px 8px 0; }
.print-controls p { margin: 0; }
.sheet { padding: 16px; color: #000; }
.sheet h2 { margin: 0 0 4px; font-size: 22px; }
.records { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.records th, .records td { border: 1px solid #999; padding: 4px 6px; vertical-align: top; text-align: left; }
.records img { width: 110px; height: 110px; object-fit: cover; display: block; }
.records .num { width: 2.5em; text-align: right; }
.print-footer { overflow: hidden; margin-top: 16px; border-top: 1px solid #999; padding-top: 8px; }
.print-qr { float: left; width: 90px; height: 90px; margin-right: 12px; }
.print-qr svg { width: 90px; height: 90px; }

@media print {
  @page { size: A4; margin: 12mm; }
  html, body { height: auto; background: #fff; }
  .no-print, .toast, .busy, .modal { display: none !important; }
  .screen { position: static; }
  .records tr { page-break-inside: avoid; }
}
.inapp { background: #fff4e5; border: 2px solid #ef6c00; border-radius: 10px; padding: 10px 12px; font-size: 15px; text-align: left; max-width: 420px; }