/* ============================================================
   ホームラン日和 スタイル
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  background: linear-gradient(180deg, #142850 0%, #27496d 100%);
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

#app { width: 100%; max-width: 860px; padding: 10px; }
.screen { text-align: center; padding-top: 14px; }
.hidden { display: none !important; }

/* ---------- ホーム ---------- */
.game-title {
  font-size: 38px; margin: 26px 0 6px;
  text-shadow: 3px 3px 0 #e67e22, 6px 6px 8px rgba(0,0,0,.5);
}
.subtitle { color: #ffd97d; margin-bottom: 20px; font-size: 14px; }

.city-box {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin-bottom: 14px; font-size: 14px;
}
.city-box select { padding: 5px 10px; border-radius: 6px; border: none; font-size: 14px; }
.weather-now { font-size: 15px; color: #aed6f1; }

.today-card {
  max-width: 480px; margin: 0 auto 18px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; padding: 14px 18px;
  font-size: 14px; line-height: 2; text-align: left;
}
.today-card .card-title { color: #ffd97d; font-weight: bold; font-size: 15px; }
.today-card .boss { color: #ff6b6b; font-weight: bold; }

.big-btn {
  font-size: 19px; font-weight: bold;
  padding: 14px 46px; border: none; border-radius: 10px;
  background: linear-gradient(180deg, #e67e22, #ca6a1a);
  color: #fff; cursor: pointer;
  box-shadow: 0 4px 0 #9c5210;
  transition: transform .05s;
}
.big-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #9c5210; }
.big-btn:disabled { opacity: .45; cursor: default; }
.big-btn.retry { background: linear-gradient(180deg, #3498db, #2874a6); box-shadow: 0 4px 0 #1b4f72; }

.small-btn {
  font-size: 13px; padding: 8px 18px; border: none; border-radius: 8px;
  background: #566573; color: #fff; cursor: pointer; margin-top: 10px;
}
.small-btn:hover { background: #808b96; }

.attempts { margin-top: 8px; font-size: 13px; color: #aab7b8; }

.record-box {
  max-width: 480px; margin: 20px auto 0;
  background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px 16px;
  font-size: 13px; line-height: 1.9;
}
.record-box .streak { color: #ff9f43; font-weight: bold; font-size: 15px; }

.calendar-box { max-width: 480px; margin: 10px auto 0; }
.calendar-box table { margin: 0 auto; border-collapse: collapse; font-size: 11px; }
.calendar-box th, .calendar-box td {
  width: 30px; height: 26px; text-align: center;
  border: 1px solid rgba(255,255,255,.12);
}
.calendar-box .stamp { background: rgba(230,126,34,.45); font-weight: bold; }
.calendar-box .today-cell { outline: 2px solid #ffd97d; }
.calendar-box caption { font-size: 12px; color: #aab7b8; margin-bottom: 4px; }

.hint { margin-top: 20px; color: #aab7b8; font-size: 11px; }
.credit { margin-top: 6px; color: #6c7a89; font-size: 10px; }

/* ---------- チャレンジ ---------- */
#play-hud {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 800px; margin: 0 auto 6px; padding: 0 6px;
  font-size: 15px; font-weight: bold;
}
#hud-score { color: #ffd97d; }
#hud-weather { font-size: 13px; color: #aed6f1; }

#field {
  border-radius: 10px; display: block; margin: 0 auto;
  max-width: 100%;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#play-msg {
  margin-top: 6px; font-size: 17px; font-weight: bold; color: #ffd97d;
  min-height: 24px; text-shadow: 1px 1px 2px #000;
}

/* ---------- リザルト ---------- */
#result-head { font-size: 30px; margin: 36px 0 12px; text-shadow: 2px 2px 4px #000; }
#result-score { font-size: 17px; line-height: 2; margin-bottom: 14px; }
#result-score .big { font-size: 34px; color: #ffd97d; font-weight: bold; }
.result-grid {
  font-size: 26px; letter-spacing: 3px; margin-bottom: 20px;
  background: rgba(0,0,0,.3); display: inline-block;
  padding: 10px 20px; border-radius: 10px;
}
.result-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.copy-done { margin-top: 10px; font-size: 13px; color: #2ecc71; min-height: 18px; }

/* ---------- クラブ・試合・強化（フェーズ2a） ---------- */
.club-box2 { margin-top: 14px; }
.club-btns { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.match-btn { background: linear-gradient(180deg, #27ae60, #1e8449); box-shadow: 0 4px 0 #145a32; font-size: 16px; padding: 12px 26px; }
.st-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: #444; margin-right: 3px; vertical-align: middle; }
.st-dot.on { background: #2ecc71; }

#match-board table { margin: 0 auto 8px; border-collapse: collapse; }
#match-board th, #match-board td { border: 1px solid #555; padding: 2px 7px; font-size: 12px; min-width: 20px; text-align: center; }
#match-board .tname { text-align: left; min-width: 70px; font-weight: bold; }
#match-log {
  max-width: 560px; height: 240px; margin: 0 auto 10px; overflow-y: auto;
  background: rgba(0,0,0,.35); border-radius: 8px; padding: 8px 12px;
  text-align: left; font-size: 13px; line-height: 1.7;
}
.log-line.log-iv { color: #ffd97d; font-weight: bold; }
.log-line.log-half { color: #7f8c8d; }
.match-result { margin-top: 12px; font-size: 15px; line-height: 2; }
.match-result h3 { font-size: 24px; color: #ffd97d; }
.match-result .small-note { color: #aab7b8; font-size: 12px; }

.train-pt { font-size: 16px; color: #ffd97d; margin-bottom: 10px; }
.train-list { max-width: 620px; margin: 0 auto; text-align: left; }
.train-row {
  background: rgba(0,0,0,.3); border-radius: 8px; padding: 7px 12px; margin: 5px 0;
  font-size: 13px;
}
.train-btn {
  font-size: 11px; margin-left: 2px; padding: 2px 7px; border: none; border-radius: 5px;
  background: #2980b9; color: #fff; cursor: pointer;
}
.train-btn:disabled { opacity: .35; cursor: default; }

#pitch-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 6px; min-height: 0; }
#pitch-buttons button {
  font-size: 14px; font-weight: bold; padding: 9px 16px;
  border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #f5f5f5, #ccc); color: #222;
}
#pitch-buttons button:hover { background: #f1c40f; }

/* ---------- スマホ ---------- */
@media (max-width: 700px) {
  .game-title { font-size: 26px; margin-top: 14px; }
  .today-card { font-size: 12px; line-height: 1.8; }
  .big-btn { font-size: 16px; padding: 12px 30px; }
  #play-hud { font-size: 13px; }
  .result-grid { font-size: 20px; letter-spacing: 2px; }
}