/* ==========================================================================
   マイ選手 - Global Styles (Dark Navy / Gold Theme)
   デザイン画像に忠実な配色・レイアウトで統一
   ========================================================================== */
:root {
  --gold: #FFC600;
  --gold-2: #FFB200;
  --gold-light: #ffd54a;
  --gold-dark-text: #2a1c00;
  --bg-page-1: #0c1626;
  --bg-page-2: #05090f;
  --panel-bg-1: #0c1830;
  --panel-bg-2: #050b14;
  --panel-border: rgba(120, 145, 180, 0.18);
  --panel-border-strong: rgba(150, 170, 200, 0.28);
  --divider: rgba(120, 145, 180, 0.14);
  --text-dim: #8b96a8;
  --text-white: #eef1f6;
  /* ---- 参考実装(SOFT+ PLAYER)カラー変数 ---- */
  --bg-top: #060e1c;
  --bg-bottom: #020712;
  --panel-bg: rgba(8, 17, 32, 0.75);
  --panel-bg-solid: #070f1d;
  --text-main: #f3f5f9;
  --text-sub: #8b96a8;
  --text-faint: #5c6779;
  --gold-bright: #ffcf3d;
  --gold-deep: #b3800a;
  --gold-line: #f0b429;
  --blue-outline: #4d7ab8;
  --grade-a: #f2c14e;
  --grade-b: #f7d774;
  --grade-c: #c98a4b;
  --star-on: #ffcf3d;
  --star-off: #33394a;
}

* { box-sizing: border-box; }

html, body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  background: #05070a;
  color: var(--text-white);
  margin: 0;
}

#app { min-height: 100vh; background: #05070a; }

.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #2a3958; border-radius: 3px; }

/* -------------------- ヘッダー（デザイン画像の細いバーに準拠） -------------------- */
.app-header {
  background: #010b14;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand-logo-img { height: 48px; object-fit: contain; display: block; }
.app-header .hdr-divider { width: 1px; height: 18px; background: rgba(255,255,255,.25); }
.app-header .hdr-title { font-size: 14px; font-weight: 500; color: #fff; letter-spacing: .5px; }
.app-header .hdr-back {
  margin-left: auto; font-size: 12px; color: var(--text-dim); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.app-header .hdr-back:hover { color: #fff; }

/* -------------------- ページ本体（余白最小限フルワイド） -------------------- */
.content-wrap {
  padding: 14px 14px 20px;
  background: radial-gradient(120% 140% at 15% 0%, #0a1a30 0%, var(--bg-top) 35%, var(--bg-bottom) 100%);
  min-height: calc(100vh - 49px);
}

/* -------------------- ボタン共通（暗背景向け） -------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 13px;
  cursor: pointer; border: 1px solid transparent; transition: all .15s ease;
  white-space: nowrap;
}
.btn-gold { background: linear-gradient(180deg, var(--gold-light), var(--gold-2)); color: var(--gold-dark-text); box-shadow: 0 2px 10px rgba(255,182,0,.25); }
.btn-gold:hover { filter: brightness(1.08); }
.btn-navy { background: #131f36; color: #fff; border-color: var(--divider); }
.btn-navy:hover { background: #1a2b4a; }
.btn-outline { background: transparent; border: 1px solid #33415c; color: #dbe2ee; }
.btn-outline:hover { background: rgba(255,255,255,.06); }
.btn-danger { background: #7a1f1f; color: #fff; border-color: #a83232; }
.btn-danger:hover { background: #932525; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* -------------------- 汎用パネル（暗色） -------------------- */
.dark-panel {
  background: linear-gradient(165deg, var(--panel-bg-1) 0%, var(--panel-bg-2) 100%);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 14px;
}

/* -------------------- タグ選択チップ（フォーム用・汎用） -------------------- */
.chip {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--divider);
  background: #0c1424; color: #c7cedb; user-select: none; transition: all .12s;
}
.chip:hover { border-color: var(--gold); }
.chip.active { background: linear-gradient(180deg, var(--gold-light), var(--gold-2)); border-color: var(--gold-2); color: var(--gold-dark-text); box-shadow: 0 2px 8px rgba(255,182,0,.25); }
.chip.locked { opacity: .5; cursor: not-allowed; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* -------------------- 選手区分トグル(野手/投手) -------------------- */
.category-chip { padding: 9px 22px; font-size: 14px; }

/* -------------------- flatpickr(生年月日ピッカー)をダークテーマに合わせる -------------------- */
.flatpickr-calendar {
  background: #0c1830 !important;
  border: 1px solid var(--panel-border-strong) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays { background: #0c1830 !important; color: #fff !important; }
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: #fff !important; }
.flatpickr-weekday { color: #9aa7bd !important; }
.flatpickr-day { color: #dbe2ee !important; }
.flatpickr-day.flatpickr-disabled { color: #3a4a68 !important; }
.flatpickr-day:hover { background: #1a2b4a !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--gold) !important; border-color: var(--gold) !important; color: #2a1c00 !important;
}
.flatpickr-day.today { border-color: var(--gold) !important; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: #fff !important; }
.numInputWrapper span.arrowUp:after { border-bottom-color: #fff !important; }
.numInputWrapper span.arrowDown:after { border-top-color: #fff !important; }
.numInputWrapper:hover { background: rgba(255,255,255,.08); }
/* カレンダーアイコン(ネイティブdate input用、互換のため残置)を白色化 */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* -------------------- プレビューモーダル -------------------- */
.preview-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.preview-modal-overlay.hidden { display: none; }
.preview-modal-box {
  background: #05070a; border: 1px solid var(--panel-border-strong); border-radius: 10px;
  max-width: 960px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.preview-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--divider);
  font-weight: 800; color: #fff; font-size: 15px; position: sticky; top: 0;
  background: #05070a; z-index: 1;
}
.preview-close-btn {
  background: transparent; border: none; color: #9aa7bd; font-size: 18px; cursor: pointer;
}
.preview-close-btn:hover { color: #fff; }
.preview-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.preview-profile-card { display: grid; grid-template-columns: minmax(180px, 30%) 1fr; }
@media (max-width: 700px) { .preview-profile-card { grid-template-columns: 1fr; } }
.preview-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .preview-grid-2col { grid-template-columns: 1fr; } }

/* -------------------- フォーム系（登録・編集 / 試合成績） -------------------- */
.form-section-title {
  font-weight: 800; color: #fff; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--divider); font-size: 15px;
  display: flex; align-items: center; gap: 8px;
}
.form-label { display: block; font-size: 12px; font-weight: 700; color: #9aa7bd; margin-bottom: 5px; }
.form-input, .form-select, input.form-input, select.form-select, textarea.form-input {
  width: 100%; background: #0c1424; border: 1px solid #223252; border-radius: 8px;
  padding: 9px 12px; color: #fff; font-size: 13px; transition: border-color .15s;
}
.form-input:focus, .form-select:focus { outline: none; border-color: var(--gold); }
.form-input::placeholder { color: #57647a; }
select.form-select option { background: #0c1424; color: #fff; }
.form-input:disabled, .form-select:disabled { opacity: .4; }

.photo-drop {
  width: 96px; height: 96px; border-radius: 10px; background: #0c1424; border: 1px solid #223252;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.photo-drop img { width: 100%; height: 100%; object-fit: cover; }

.position-item {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--divider);
  border-radius: 8px; padding: 8px 10px; cursor: pointer; background: #0c1424; transition: all .12s;
}
.position-item.checked { background: rgba(255,198,0,.10); border-color: var(--gold-2); }
.position-item .pos-label { flex: 1; font-size: 13px; color: #dbe2ee; }
.position-item .pos-aptitude {
  background: #131f36; color: #fff; border: 1px solid var(--divider); border-radius: 5px;
  font-size: 12px; padding: 2px 4px;
}

/* ==========================================================================
   選手カード（詳細画面）デザイン - 参考実装(SOFT+ PLAYER)に忠実な再現
   ========================================================================== */
.card-capture {
  background: radial-gradient(120% 140% at 15% 0%, #0a1a30 0%, var(--bg-top) 35%, var(--bg-bottom) 100%);
  padding: 0; border-radius: 0;
}

/* ---- 全体グリッド：左(広)=写真+情報+成績、右(狭)=RANK+チャート+特殊能力 ---- */
.main-grid { display: grid; grid-template-columns: 2.42fr 1fr; gap: 12px; align-items: start; }
.col-left, .col-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1000px) {
  .main-grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 6px; position: relative; overflow: hidden;
}
.panel-title {
  font-size: 17px; font-weight: 700; color: var(--text-main);
  padding: 12px 16px 10px; letter-spacing: .5px;
}
.section-band {
  font-size: 15px; font-weight: 700; color: var(--text-main); letter-spacing: .5px;
  background: linear-gradient(90deg, rgba(46,80,130,.55) 0%, rgba(30,55,95,.35) 60%, rgba(20,35,60,.08) 100%);
  border-top: 1px solid rgba(140,175,225,.35); border-bottom: 1px solid rgba(140,175,225,.35);
  padding: 11px 16px; margin: 0; width: 100%;
}

/* ---- プロフィールカード（写真+基本情報を横並び） ---- */
.profile-card { display: grid; grid-template-columns: minmax(220px, 33%) 1fr; gap: 0; overflow: hidden; align-items: stretch; }
@media (max-width: 1000px) { .profile-card { grid-template-columns: 1fr; } }

.profile-photo-wrap { position: relative; height: 100%; min-height: 280px; align-self: stretch; overflow: hidden; border-right: 1px solid var(--panel-border); background: linear-gradient(160deg, #2b3f66 0%, #0a1120 100%); }
@media (max-width: 1000px) { .profile-photo-wrap { min-height: 260px; border-right: none; border-bottom: 1px solid var(--panel-border); } }
.profile-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.photo-gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%); pointer-events: none; }
.photo-badge { position: absolute; top: 12px; left: 14px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.photo-badge .num { font-size: 36px; font-weight: 800; line-height: 1; font-family: Georgia, 'Times New Roman', serif; }
.photo-badge .pos { font-size: 13px; font-weight: 600; margin-top: 2px; letter-spacing: 1px; }
.photo-signature { position: absolute; left: 14px; bottom: 14px; color: #fff; font-family: 'Brush Script MT', cursive, 'Segoe Script', sans-serif; line-height: 1.15; }
.photo-signature .sig-small { font-size: 15px; opacity: .85; margin-left: 4px; }
.photo-signature .sig-big { font-size: 30px; font-weight: 400; display: block; }

.profile-info { padding: 16px 20px 18px; display: flex; flex-direction: column; min-width: 0; height: 100%; justify-content: space-between; }
.profile-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.profile-name-jp { font-size: 26px; font-weight: 700; color: var(--text-main); letter-spacing: 1px; }
.profile-name-en { font-size: 12px; color: var(--text-sub); letter-spacing: 2px; margin-top: 4px; }

.rank-score-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rank-hex {
  position: relative; width: 84px; height: 72px; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, #1a1408 0%, #120e05 100%); border: 1px solid var(--gold);
}
.rank-hex::before { content: ''; position: absolute; inset: 2px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border: 1px solid rgba(226,164,21,.35); }
.rank-hex .rank-label { font-size: 10px; color: var(--gold-bright); letter-spacing: 1px; position: absolute; top: 11px; }
.rank-hex .rank-value { font-size: 24px; font-weight: 800; color: #fff; margin-top: 9px; }
.total-power { text-align: center; }
.total-power .tp-label { font-size: 11px; color: var(--text-sub); letter-spacing: 1px; margin-bottom: 3px; }
.total-power .tp-value { font-size: 42px; font-weight: 800; color: var(--gold-bright); line-height: 1; }
/* 選手詳細ページでは下部の .detail-page-content スコープでさらに上書き（登録フォームには出現しないクラスのため直接編集可） */

.info-table { border-top: 1px solid var(--divider); }
.info-row { display: flex; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--divider); font-size: 14px; gap: 10px; }
.info-row .icon-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--text-faint); color: var(--text-faint); font-size: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-row .label { color: var(--text-sub); width: 108px; flex-shrink: 0; white-space: nowrap; }
.info-row .value { color: var(--text-main); font-weight: 500; }

.type-tabs-title { margin: 14px -20px 10px; display: block; }
.type-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .type-tabs { grid-template-columns: repeat(2, 1fr); } }
.type-tab { text-align: center; padding: 9px 6px; border-radius: 4px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--panel-border-strong); background: rgba(255,255,255,.02); color: var(--text-main); }
.type-tab.active { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1204; border-color: var(--gold); }
.type-tab.locked { color: var(--text-faint); border-color: var(--panel-border); background: rgba(255,255,255,.015); display: flex; align-items: center; justify-content: center; gap: 5px; }
.type-tab.locked i { font-size: 10px; }

/* ---- 能力チャートパネル（右カラム上部） ---- */
.chart-panel { padding: 0 0 16px; }
.chart-panel .radar-wrap, .chart-panel > .position-section { padding: 0 16px; }
.radar-wrap { position: relative; width: 100%; height: 260px; margin: 8px auto 10px; }
.position-section { margin-top: 4px; }
.position-section-title { margin-bottom: 10px; margin-left: -16px; margin-right: -16px; }
.position-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pos-pill { font-size: 13.5px; padding: 7px 16px; border-radius: 4px; border: 1px solid var(--panel-border-strong); background: rgba(255,255,255,.02); color: var(--text-sub); font-weight: 600; }
.pos-pill.grade-gold { border-color: var(--gold); color: var(--gold-bright); background: rgba(226,164,21,.08); }
.pos-pill.grade-mid { border-color: var(--blue-outline); color: #cfe0f5; }

/* ---- 特殊能力パネル ---- */
.ability-pills { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ability-pill { font-size: 14px; font-weight: 700; padding: 9px 14px; border-radius: 4px; text-align: center; flex: 1 1 auto; }
.ability-pill.gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: #1a1204; }
.ability-pill.outline { border: 1px solid var(--blue-outline); background: rgba(77,122,184,.08); color: #cfe0f5; font-weight: 600; }
.ability-pill.locked { border: 1px solid var(--panel-border); background: rgba(255,255,255,.02); color: var(--text-faint); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ability-pill.locked i { font-size: 10px; }

/* ---- 能力詳細テーブル ---- */
.detail-table { padding: 4px 18px 16px; }
.detail-row { display: grid; grid-template-columns: 112px 64px 1fr; align-items: stretch; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(160,185,220,.4); }
.detail-row:last-child { border-bottom: none; }
.detail-row .stat-name { display: flex; align-items: center; font-size: 21px; color: #ffffff; font-weight: 800; letter-spacing: .2px; white-space: nowrap; padding-right: 14px; border-right: 1px solid rgba(160,185,220,.35); }
.grade-letter { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 36px; line-height: 1; text-align: center; padding: 0 14px; border-right: 1px solid rgba(160,185,220,.35); }
.grade-letter.g-s { color: #fff5d0; text-shadow: 0 0 8px rgba(255,214,74,.6); }
.grade-letter.g-a { color: var(--grade-a); }
.grade-letter.g-b { color: var(--grade-b); }
.grade-letter.g-c { color: var(--grade-c); }
.grade-letter.g-d { color: #9e8362; }
.grade-letter.g-e { color: #7a8296; }
.grade-letter.g-f { color: #5c6779; }
.detail-row .stat-num { font-size: 24px; font-weight: 800; color: #ffffff; width: 40px; }
.detail-row .stat-desc { font-size: 15px; color: var(--text-sub); }
.detail-value-desc { display: flex; align-items: baseline; gap: 16px; }
.detail-row.auto .stat-name::after { content: '★'; color: var(--gold-bright); margin-left: 3px; font-size: 9px; }

/* ---- 成績パネル（今シーズン/年度別/通算 + 直近成績 + 成長履歴） ---- */
.season-panel-head { display: flex; align-items: center; padding: 14px 16px 12px; flex-wrap: wrap; gap: 10px; }
.season-tabs { display: flex; gap: 8px; }
.season-tab { font-size: 16px; padding: 11px 26px; border-radius: 4px; border: 1px solid var(--panel-border-strong); color: var(--text-main); font-weight: 700; background: rgba(255,255,255,.02); cursor: pointer; }
.season-tab.active { background: var(--gold-bright); color: #17130a; border-color: var(--gold-bright); font-weight: 800; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 14px 16px; row-gap: 14px; }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(13, 1fr); } }
.stat-cell { text-align: center; padding: 2px 4px; border-right: 1px solid rgba(140,165,200,.22); }
.stat-cell:last-child { border-right: none; }
.stat-cell .s-label { font-size: 11px; color: var(--text-sub); margin-bottom: 5px; font-weight: 600; }
.stat-cell .s-value { font-size: 17px; font-weight: 800; color: #ffffff; }
.stat-cell.rate .s-value { color: var(--gold-bright); }

.recent-title, .growth-title { margin-top: 4px; }
.recent-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.recent-table th { color: var(--text-sub); font-weight: 500; text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.recent-table td { text-align: center; padding: 9px 4px; border-bottom: 1px solid var(--divider); color: var(--text-main); }
.recent-table td.opp { text-align: left; color: var(--text-sub); white-space: nowrap; padding-left: 14px; }
.recent-table td.date { color: var(--text-sub); padding-left: 14px; }
.stars i { color: var(--star-off); font-size: 11px; }
.stars i.filled, .stars i.fas { color: var(--star-on); }

.growth-chart-wrap { padding: 4px 16px 16px; height: 220px; position: relative; }
.legend-row { display: flex; justify-content: flex-end; gap: 18px; padding: 12px 16px 10px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-main); }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* ---- プレミアムバナー（フッター） ---- */
.premium-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #03060c; border-top: 1px solid var(--panel-border); border-radius: 6px;
  padding: 14px 18px; margin-top: 4px;
}
.premium-banner .crown-icon { color: var(--gold-bright); font-size: 18px; flex-shrink: 0; }
.premium-banner .msg { font-size: 13px; font-weight: 700; color: #dbe2ee; flex-shrink: 0; }
.premium-banner .msg b { color: var(--gold-bright); }
.premium-features { display: flex; gap: 0; flex-wrap: wrap; margin-left: 4px; }
.premium-feature { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; color: var(--text-sub); padding: 0 14px; border-left: 1px solid var(--divider); white-space: nowrap; }
.premium-feature i { color: var(--gold-bright); font-size: 13px; }
.premium-cta { margin-left: auto; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: #1a1204; font-weight: 800; padding: 9px 20px; border-radius: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }

/* ---- アクションボタン（右カラム下部の空きスペースに配置、白背景なし） ---- */
.side-action-panel { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 2px 0 0; background: transparent; }
.side-action-panel .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 12px 6px; font-size: 12px; white-space: nowrap; }
.side-action-panel .btn i { font-size: 11px; }
@media (max-width: 1000px) {
  .side-action-panel { flex-wrap: wrap; }
  .side-action-panel .btn { flex: 1 1 45%; }
}

/* Utility lock icon (フォントアイコン非使用時の代替) */
.lock-ico { display: inline-block; width: 9px; height: 8px; border: 1.4px solid currentColor; border-radius: 2px; position: relative; margin-right: 2px; }
.lock-ico::before { content: ''; position: absolute; left: 50%; top: -5px; width: 6px; height: 6px; border: 1.4px solid currentColor; border-bottom: none; border-radius: 4px 4px 0 0; transform: translateX(-50%); }

/* ==========================================================================
   選手詳細ページ専用デザイン上書き (.detail-page-content / .detail-header)
   注意: ここで使用するクラス(.panel-title, .profile-card, .info-row, .rank-hex,
   .radar-wrap, .type-tabs, .position-pills 等)は選手登録・編集画面のプレビュー
   モーダルでも共用されているため、無闇に基底クラスを変更せず、必ずこの
   スコープ配下でのみ上書きすること。登録・編集画面(player-form.js)やその
   プレビューには一切影響しない。
   ========================================================================== */
.app-header.detail-header {
  gap: 20px;
  padding: 4px 28px;
}
.app-header.detail-header .brand-logo-img { height: 132px; }
.app-header.detail-header .hdr-divider { height: 46px; }
.app-header.detail-header .hdr-title { font-size: 28px; font-weight: 700; }

.detail-page-content .panel-title {
  font-size: 20px; font-weight: 800; padding: 13px 16px 11px;
}
.detail-page-content .section-band {
  font-size: 18px; font-weight: 800; padding: 12px 16px;
}

.detail-page-content .profile-card { grid-template-columns: minmax(260px, 47%) 1fr; }
.detail-page-content .profile-info { padding: 16px 0 18px; }
.detail-page-content .profile-name-row { margin-bottom: 12px; padding: 0 20px; }
.detail-page-content .profile-name-jp { font-size: 32px; font-weight: 800; }
.detail-page-content .profile-name-en { font-size: 16px; color: #ffffff; font-weight: 600; margin-top: 5px; }

.detail-page-content .rank-score-wrap { gap: 14px; }
.detail-page-content .rank-hex {
  width: 84px; height: 76px; flex-direction: column; border: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(175deg, #d9c07a 0%, #bd9a52 20%, #a8863f 45%, #8f6f30 68%, #6b5320 88%, #493c15 100%);
  box-shadow: 0 3px 10px rgba(180,145,60,.35);
}
.detail-page-content .rank-hex::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 86%; height: 85%;
  transform: translate(-50%, -50%); inset: auto; border: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(170deg, #4a3a1c 0%, #3a2b14 30%, #2a1e0d 62%, #180f05 100%);
}
.detail-page-content .rank-hex .rank-label {
  position: relative; top: auto; font-size: 11px; font-weight: 700; color: #f5efe0; letter-spacing: 1px; margin-bottom: 2px;
}
.detail-page-content .rank-hex .rank-value {
  position: relative; z-index: 1; font-size: 24px; font-weight: 800; line-height: 1; margin-top: 0;
  background: linear-gradient(180deg, #fff6d8 0%, #ffdd7a 22%, #f4b825 55%, #d69a12 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.detail-page-content .total-power .tp-label { font-size: 13px; color: var(--text-main); font-weight: 700; letter-spacing: 1.5px; margin-bottom: 4px; }
.detail-page-content .total-power .tp-value {
  font-size: 48px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #fff6d8 0%, #ffdd7a 30%, #f0b429 62%, #b3800a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(240,180,41,.35));
}

.detail-page-content .info-table { padding: 0 20px; }
.detail-page-content .info-row { padding: 12px 2px; font-size: 17px; gap: 12px; }
.detail-page-content .info-row .icon-dot {
  width: 22px; height: 22px; border: none; border-radius: 0; background: none;
  color: var(--gold-bright); font-size: 19px;
}
.detail-page-content .info-row .label { color: var(--text-main); font-weight: 700; width: 130px; }

.detail-page-content .type-tabs-title { margin: 16px 0 10px; }
.detail-page-content .type-tabs { padding: 0 20px; }

.detail-page-content .chart-panel .radar-wrap { padding: 0 4px; }
.detail-page-content .chart-panel > .position-section { padding: 0; }
.detail-page-content .radar-wrap { height: 380px; margin: 10px auto; }
.detail-page-content .position-section-title { margin-bottom: 10px; margin-left: 0; margin-right: 0; }
.detail-page-content .position-pills { gap: 10px; }
.detail-page-content .pos-pill { font-size: 16px; padding: 10px 22px; font-weight: 700; }

@media (max-width: 768px) {
  .dark-panel { padding: 12px; }
}

/* Loading spinner */
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: #131f36; color: #fff; padding: 12px 20px; border-radius: 10px;
  border: 1px solid var(--divider);
  box-shadow: 0 8px 24px rgba(0,0,0,.4); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  animation: toast-in .2s ease;
}
.toast.error { background: #7a1f1f; border-color: #a83232; }
.toast.success { background: #12532f; border-color: #1f7a48; }
@keyframes toast-in { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }