/* nazotabi ベーススタイル。ビルドステップなし、CSSカスタムプロパティでテーマを管理する。
   docs/specs/app-spec.md §6（フロントエンド方針）参照。 */

:root {
  --color-bg: #faf7f2;
  --color-surface: #ffffff;
  --color-text: #201a14;
  --color-text-muted: #6b6156;
  --color-primary: #b5562e;
  --color-primary-contrast: #ffffff;
  --color-border: #e4dcd0;
  --color-success: #2f7a4f;
  --color-danger: #b3261e;
  --radius-md: 12px;
  --radius-lg: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --tap-target-min: 44px;
  --font-family:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171310;
    --color-surface: #241e18;
    --color-text: #f3ede4;
    --color-text-muted: #b8ab9b;
    --color-primary: #e08a5f;
    --color-primary-contrast: #171310;
    --color-border: #3a3128;
    --color-success: #5fbf87;
    --color-danger: #e57b73;
  }
}

* {
  box-sizing: border-box;
}

/* button, .button の display:inline-flex（author styles）が [hidden] の既定 display:none
   （user-agent styles）を上書きしてしまうため明示的に上書きし直す（2026-09-22発見）。
   author normal は origin/importance の並びでは常に user-agent normal に勝つため、
   button要素に .hidden を立てても要素は消えない——hint-button で実際に踏んだ。 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* モバイルファースト: 単一カラム、片手操作を前提に主要動線を画面下部に置く */
main {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
}

h1,
h2,
h3 {
  line-height: 1.3;
}

a {
  color: var(--color-primary);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
}

button.primary,
.button.primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.choice-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice-list button {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.choice-list button[aria-pressed="true"] {
  border-color: var(--color-primary);
  border-width: 2px;
}

#photo-mission {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* file input は .visually-hidden で隠し、この label をタップ領域にする（play.html 参照）。 */
#photo-capture-label {
  width: 100%;
}

/* input が隠れているため、フォーカスリングは label 側に出す。 */
#photo-input:focus-visible + #photo-capture-label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.photo-preview {
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-text);
  font-size: 0.8rem;
}

.status-message {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-border);
}

.status-message.success {
  background: color-mix(
    in srgb,
    var(--color-success) 15%,
    var(--color-surface)
  );
  color: var(--color-success);
}

.status-message.danger {
  background: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface));
  color: var(--color-danger);
}

/* サイトヘッダー */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.site-header img {
  width: 28px;
  height: 28px;
}

.site-header .app-name {
  font-weight: 700;
  font-size: 1.1rem;
}

/* フッター: 出典・問い合わせ先は全ページ常時表示（app-spec.md §6, 応募規約要件） */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.site-footer .footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

#map,
#track-map {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* 駅名検索の入力欄: 検索中はアイコンをくるくる回して視覚的にわかるようにする */
.search-field {
  position: relative;
}

.spinner {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

/* スクリーンリーダー専用（aria-live領域のラベル等） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* 出発前の画面の注意書き（play.html） */
.briefing-notes {
  padding-left: 1.2em;
  margin: var(--space-3) 0;
}

/* クリア画面の振り返り（result.html、app-spec §7.2） */
.recap-list {
  padding-left: 1.6em;
  margin: var(--space-3) 0;
}

.recap-list li {
  margin-bottom: var(--space-1);
}

/* 軌跡の地図の幕番号（Leaflet の divIcon） */
.track-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 0.8rem;
  font-weight: bold;
}

/* 声の先の寄り道（§7.3）。達成に数えないので、塗らずに縁だけにする。 */
.track-marker.detour {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 2px dashed var(--color-primary);
}

/* 共有文（記号の列を崩さない） */
.share-text {
  white-space: pre-wrap;
  font-family: inherit;
  background: var(--color-border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

/* 帰りの電車（result.html、app-spec §5 の3） */
.transit-station h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 1rem;
}

.transit-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0;
}

.transit-status.delayed,
.transit-status.suspended {
  background: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface));
  color: var(--color-danger);
}

.transit-departures {
  padding-left: 1.2em;
  margin: 0 0 var(--space-2);
}

.transit-next {
  display: block;
  color: var(--color-text-muted);
}

/* 現在地の点に重ねる、端末の向きの扇形（app-spec §5 の2、task 114）。 */
.heading-cone {
  pointer-events: none;
}

.heading-cone-inner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(
    from -30deg,
    rgba(26, 115, 232, 0.45) 0deg 60deg,
    transparent 60deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px);
  mask: radial-gradient(circle, transparent 6px, #000 7px);
}

/* トップ画面の「あなたのクエスト」（app-spec §5 の1、task 111）。 */
.my-quests-group h3 {
  font-size: 1rem;
  margin: var(--space-3) 0 0;
}

.choice-list button.my-quest-item {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.my-quest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.my-quests-titles {
  padding-left: 1.2em;
  margin: var(--space-2) 0;
}

.my-quests-note {
  font-size: 0.8rem;
  margin: var(--space-3) 0 0;
}

.records-import-label {
  display: block;
  margin-top: var(--space-3);
}

.origin-list-note {
  font-size: 0.85rem;
  margin: var(--space-3) 0 0;
}

.transit-note {
  font-size: 0.8rem;
  margin-top: var(--space-3);
}