/* =========================
   全体設定
========================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  background: linear-gradient(
    135deg,
    #eaf4ff 0%,
    #fff8d9 100%
  );

  color: #222;
  min-height: 100vh;
}


/* =========================
   ヘッダー
========================= */

header {
  background: linear-gradient(
    135deg,
    #1f5fa9,
    #3d8ddb
  );

  color: white;
  text-align: center;
  padding: 35px 20px;
  border-bottom: 6px solid #f6c900;
}

header h1 {
  margin: 0 0 10px;
  font-size: 32px;
  letter-spacing: 1px;
}

header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}


/* =========================
   メイン部分
========================= */

main {
  width: 90%;
  max-width: 1100px;
  margin: 35px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}


/* =========================
   カード
========================= */

section {
  background: white;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

section h2 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid #f6c900;
  font-size: 22px;
}


/* =========================
   ポケモン選択欄
========================= */

section div {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 7px;
  font-weight: bold;
  font-size: 14px;
}

select,
.pokemon-search {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #d5dce5;
  border-radius: 10px;
  background-color: white;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}

select:hover,
.pokemon-search:hover {
  border-color: #3d8ddb;
}

select:focus,
.pokemon-search:focus {
  outline: none;
  border-color: #1f5fa9;
  box-shadow: 0 0 0 3px rgba(61, 141, 219, 0.2);
}


/* =========================
   計算ボタン
========================= */

.calculate-section {
  grid-column: 1 / -1;
  text-align: center;
  background: transparent;
  box-shadow: none;
  padding: 5px;
}

button {
  width: 100%;
  max-width: 420px;
  padding: 16px 24px;

  border: none;
  border-radius: 50px;

  background: linear-gradient(
    135deg,
    #e53935,
    #ff625d
  );

  color: white;
  font-size: 18px;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 0 6px 0 #aa1f1c;
  transition: 0.15s;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #aa1f1c;
}

button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #aa1f1c;
}


/* =========================
   結果表示
========================= */

#result-section {
  grid-column: 1 / -1;
  border: 3px solid #f6c900;
  text-align: center;
}

#result-section > #result-content > p {
  margin: 0;
  padding: 20px;
  background-color: #fff9d9;
  border-radius: 12px;
  line-height: 1.8;
}


/* =========================
   フッター
========================= */

footer {
  margin-top: 50px;
  padding: 20px;
  background-color: #183d68;
  color: white;
  text-align: center;
}

footer p {
  margin: 0;
  font-size: 14px;
}

/* 対戦結果の記録 */
.battle-record-section {
  grid-column: 1 / -1;
}

.battle-record-help {
  line-height: 1.8;
}

.battle-record-grid,
.actual-team-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.battle-record-section select,
.battle-record-section input,
.battle-record-section textarea {
  width: 100%;
}

.actual-team-fieldset {
  margin: 20px 0;
  padding: 16px;
  border: 2px solid #d5dce5;
  border-radius: 12px;
}

.actual-team-fieldset legend {
  padding: 0 8px;
  font-weight: bold;
}

.save-battle-button {
  display: block;
  margin: 20px auto 0;
  background: linear-gradient(135deg, #2275c9, #3d9be9);
  box-shadow: 0 6px 0 #174d82;
}

.battle-record-message {
  min-height: 1.5em;
  text-align: center;
  font-weight: bold;
  color: #176b36;
}

.battle-record-message.error {
  color: #c62828;
}

.battle-stats {
  margin-top: 24px;
  padding: 16px;
  border-radius: 12px;
  background: #eef7ff;
  text-align: center;
}

.battle-history-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.battle-analytics {
  margin-top: 22px;
  padding: 18px;
  border: 2px solid #dce5ef;
  border-radius: 14px;
  background: #fbfdff;
}

.battle-analytics > h3 {
  margin-top: 0;
  text-align: center;
}

.analytics-note,
.analytics-empty {
  text-align: center;
  color: #586575;
}

.analytics-note.is-reference {
  color: #9a6500;
  font-weight: bold;
}

.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 22px;
}

.analytics-summary-card {
  padding: 15px 10px;
  border-radius: 12px;
  background: #eef7ff;
  text-align: center;
}

.analytics-summary-card strong {
  display: block;
  margin-top: 6px;
  color: #185fa7;
  font-size: 24px;
}

.analytics-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.analytics-panel {
  padding: 15px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 3px 12px rgba(20, 50, 80, 0.08);
}

.analytics-panel h4 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f2c300;
}

.analytics-row {
  margin: 12px 0;
}

.analytics-row-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 14px;
}

.analytics-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf0;
}

.analytics-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2878c7, #45a4ed);
}

.analytics-ranking {
  margin: 0;
  padding-left: 24px;
}

.analytics-ranking li {
  margin: 9px 0;
  line-height: 1.5;
}

.recent-form {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.recent-result {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
}

.recent-result.win {
  background: #25a55f;
}

.recent-result.loss {
  background: #e14848;
}

.battle-learning-note {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 4px solid #3d8ddb;
  border-radius: 8px;
  background: #eef7ff;
  color: #23415f;
  font-size: 14px;
  line-height: 1.7;
}

.battle-history-card {
  padding: 16px;
  border: 2px solid #dce5ef;
  border-radius: 12px;
  background: #fff;
}

.battle-history-card.win {
  border-left: 7px solid #25a55f;
}

.battle-history-card.loss {
  border-left: 7px solid #e14848;
}

.battle-history-card p {
  margin: 7px 0;
}

.delete-battle-button {
  width: auto;
  padding: 8px 16px;
  margin-top: 8px;
  background: #777;
  box-shadow: none;
  font-size: 14px;
}

@media screen and (max-width: 750px) {
  .battle-record-grid,
  .actual-team-inputs {
    grid-template-columns: 1fr;
  }

  .analytics-summary-grid,
  .analytics-columns {
    grid-template-columns: 1fr;
  }
}

.legal-notice {
  width: 90%;
  max-width: 1100px;
  margin: 35px auto 0;
  padding: 18px 22px;
  border: 1px solid #cdd8e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #52606d;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.legal-notice p {
  margin: 3px 0;
}

.legal-notice a { color: #1f5fa9; font-weight: bold; }

.calculation-disclaimer {
  margin-top: 18px !important;
  padding: 12px 16px !important;
  background: #f1f4f8 !important;
  color: #52606d;
  font-size: 13px;
}

.result-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
}

.result-card {
  padding: 20px;
  border: 3px solid #dbe7f4;
  border-radius: 16px;
  background: #fff;
}

.result-card.stable { border-color: #3d8ddb; }
.result-card.offense { border-color: #ef5350; }
.result-card.caution { border-color: #8e64c5; }

.result-card h3 {
  margin: 0 0 8px;
  text-align: center;
}

.reason-details {
  margin-top: 14px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #f8fbff;
  text-align: left;
  overflow: hidden;
}

.reason-details summary {
  padding: 12px 14px;
  color: #174a7e;
  font-weight: 700;
  cursor: pointer;
}

.reason-details > p,
.reason-list {
  margin: 0;
  padding: 0 18px 14px 36px;
}

.reason-details > p {
  padding-left: 14px;
}

.reason-list li {
  margin: 8px 0;
  line-height: 1.7;
}

.warning-details {
  border-color: #efb0ad;
  background: #fff7f6;
}

.warning-details summary {
  color: #a52d28;
}

.strategy-description {
  min-height: 48px;
  color: #52606d;
  text-align: center;
}

.recommended-team {
  display: grid;
  gap: 9px;
  margin: 16px 0;
}

.recommended-pokemon {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  background: #eef6ff;
  color: #173f6b;
  font-weight: bold;
  text-align: center;
}

.offense .recommended-pokemon { background: #fff0ef; color: #9f2522; }
.caution .recommended-pokemon { background: #f5effd; color: #593d7e; }

.team-summary {
  padding: 12px;
  border-radius: 10px;
  background: #f7f9fb;
}

.team-summary p { margin: 4px 0 !important; padding: 0 !important; background: transparent !important; }

.privacy-main {
  display: block;
  max-width: 900px;
}

.privacy-main section { line-height: 1.9; }
.privacy-main h2 { margin-top: 34px; }
.privacy-main h2:first-child { margin-top: 0; }
.contact-placeholder { color: #b42318; font-weight: bold; }
.privacy-date { margin-top: 35px; color: #52606d; }

.footer-links {
  display: flex;
  justify-content: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.footer-links a {
  color: #174f8f;
  font-weight: bold;
}

.info-main {
  display: block;
  max-width: 900px;
}

.info-main section {
  line-height: 1.9;
}

.info-main h2 {
  margin-top: 32px;
}

.info-main h2:first-child {
  margin-top: 0;
}

.info-navigation {
  display: flex;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #d5dce5;
}

/* アカウント・クラウド保存 */
.account-section {
  grid-column: 1 / -1;
  border: 3px solid #3d8ddb;
}

.account-help { line-height: 1.7; }

.account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.account-fields input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #d5dce5;
  border-radius: 10px;
  font-size: 16px;
}

.account-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.account-button {
  width: auto;
  min-width: 170px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 15px;
  background: linear-gradient(135deg, #1f5fa9, #3d8ddb);
  box-shadow: 0 4px 0 #163f70;
}

.account-button.secondary {
  background: linear-gradient(135deg, #596b7d, #7f91a3);
  box-shadow: 0 4px 0 #3f4e5d;
}

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

.text-button {
  width: auto;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #1f5fa9;
  font-size: 14px;
  text-decoration: underline;
  box-shadow: none;
}

.danger-button {
  width: auto;
  min-width: 170px;
  padding: 12px 20px;
  border-radius: 12px;
  background: #fff;
  color: #c62828;
  border: 2px solid #c62828;
  font-size: 15px;
  box-shadow: none;
}

.password-recovery-panel {
  max-width: 520px;
  margin: 22px auto 0;
  padding: 18px;
  border: 2px solid #3d8ddb;
  border-radius: 12px;
  background: #f3f9ff;
}

.password-recovery-panel input {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 2px solid #d5dce5;
  border-radius: 10px;
  font-size: 16px;
}

.auth-message, .cloud-save-status, .setup-notice {
  margin: 14px 0 0;
  text-align: center;
  font-weight: bold;
  color: #1f5fa9;
}

.auth-message.error, .cloud-save-status.error { color: #c62828; }

.party-preset-manager {
  margin-top: 25px;
  padding: 20px;
  border: 2px solid #d7e8fa;
  border-radius: 14px;
  background: #f7fbff;
}

.party-preset-manager h3 {
  margin: 0 0 8px;
}

.party-preset-manager > p {
  line-height: 1.7;
}

.party-preset-save-row,
.party-preset-load-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.party-preset-load-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.party-preset-manager input,
.party-preset-manager select {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid #d5dce5;
  border-radius: 10px;
  background: white;
  font-size: 15px;
}

.party-preset-manager .account-button,
.party-preset-manager .danger-button {
  min-width: 120px;
}

.party-preset-message {
  min-height: 24px;
  margin: 10px 0 0;
  color: #1f5fa9;
  font-weight: bold;
}

.party-preset-message.error {
  color: #c62828;
}

.setup-notice {
  padding: 12px;
  border-radius: 10px;
  background: #fff3cd;
  color: #735c0f;
}


/* =========================
   独自型の登録
========================= */

.build-editor-section {
  grid-column: 1 / -1;
}

.build-help {
  line-height: 1.8;
}

.bulk-build-box {
  margin: 20px 0 28px;
  padding: 18px;
  border: 2px dashed #3d8ddb;
  border-radius: 14px;
  background: #f3f9ff;
}

.bulk-build-box h3 { margin-top: 0; }

.bulk-build-box textarea {
  width: 100%;
  min-height: 210px;
  padding: 14px;
  border: 2px solid #d5dce5;
  border-radius: 10px;
  font: inherit;
  line-height: 1.7;
  resize: vertical;
}

.bulk-build-box textarea:focus {
  outline: none;
  border-color: #1f5fa9;
  box-shadow: 0 0 0 3px rgba(61, 141, 219, 0.2);
}

.parse-build-button {
  display: block;
  margin: 15px auto 0;
  background: linear-gradient(135deg, #21a366, #39bd7b);
  box-shadow: 0 5px 0 #177449;
}

.parse-build-message {
  min-height: 24px;
  margin: 14px 0 0;
  text-align: center;
  font-weight: bold;
  color: #1f5fa9;
}

.parse-build-message.error { color: #c62828; }

.build-basic-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.build-editor-section input,
.move-type {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #d5dce5;
  border-radius: 10px;
  background-color: white;
  font-size: 16px;
}

.build-editor-section input:focus,
.move-type:focus {
  outline: none;
  border-color: #1f5fa9;
  box-shadow: 0 0 0 3px rgba(61, 141, 219, 0.2);
}

.move-name.move-found,
.move-type.auto-filled {
  border-color: #2f9e67;
  background-color: #effbf4;
}

.move-type.auto-filled {
  color: #17613f;
  font-weight: 700;
}

.move-fields {
  display: grid;
  gap: 12px;
}

.move-row {
  display: grid;
  grid-template-columns: 90px 1fr 180px;
  gap: 12px;
  align-items: center;
}

.move-row label {
  margin: 0;
}

.save-build-button {
  display: block;
  margin: 25px auto 0;
  background: linear-gradient(135deg, #1f5fa9, #3d8ddb);
  box-shadow: 0 6px 0 #163f70;
}

.build-message {
  margin: 18px 0;
  min-height: 24px;
  text-align: center;
  font-weight: bold;
  color: #1f5fa9;
}

.saved-build-card {
  padding: 16px;
  border: 2px solid #dbe7f4;
  border-radius: 12px;
  background: #f7fbff;
}

.saved-build-card h4 {
  margin: 0 0 10px;
}

.saved-build-card p {
  margin: 6px 0;
  padding: 0;
  background: transparent;
}

.delete-build-button {
  width: auto;
  padding: 8px 16px;
  margin-top: 10px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: none;
}

.reference-links {
  margin-top: 30px;
  padding: 18px;
  border-radius: 12px;
  background: #fff9d9;
}

.reference-links a {
  display: inline-block;
  margin: 6px 12px 0 0;
  color: #1f5fa9;
  font-weight: bold;
}


/* =========================
   スマホ対応
========================= */

@media screen and (max-width: 750px) {

  header {
    padding: 28px 15px;
  }

  header h1 {
    font-size: 25px;
  }

  main {
    width: 92%;
    grid-template-columns: 1fr;
    margin-top: 25px;
  }

  .calculate-section,
  #result-section {
    grid-column: auto;
  }

  section {
    padding: 20px;
  }

  section h2 {
    font-size: 20px;
  }

  button {
    font-size: 16px;
  }

  .build-editor-section {
    grid-column: auto;
  }

  .account-section { grid-column: auto; }
  .account-fields { grid-template-columns: 1fr; }
  .party-preset-save-row,
  .party-preset-load-row { grid-template-columns: 1fr; }
  .party-preset-manager .account-button,
  .party-preset-manager .danger-button { width: 100%; max-width: none; }

  .result-list { grid-template-columns: 1fr; }

  .build-basic-fields {
    grid-template-columns: 1fr;
  }

  .move-row {
    grid-template-columns: 1fr;
  }
}

.pokemon-search.invalid {
  border-color: #e53935;
  background-color: #fff1f1;
}