:root {
  --bg: #0f1720;
  --panel: #1a2432;
  --panel-2: #223144;
  --accent: #ffb020;
  --accent-2: #4cc4ff;
  --court: #d98a3a;
  --court-back: #3b6ea8;
  --line: #ffffff;
  --text: #e6ecf3;
  --muted: #8ea1b5;
  --net: #f4f4f4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

header {
  padding: 16px 24px;
  border-bottom: 1px solid #263447;
  background: linear-gradient(180deg, #131c28, #0f1720);
}
header .header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
header h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: .04em;
}
header .sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.mode-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-badge {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
.mode-badge.player {
  background: #263447;
  color: var(--accent-2);
}
.mode-badge.coach {
  background: var(--accent);
  color: #0b1119;
}
.mode-switch {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.mode-switch:hover { background: #2b3d55; }
.mode-tool {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.mode-tool:hover { background: #2b3d55; }

.app-version {
  color: var(--muted);
  font-size: 11px;
  font-family: monospace;
  padding: 2px 6px;
  background: #131c28;
  border-radius: 3px;
}

/* 選手モードでは編集 UI を非表示 */
body.player-mode #btn-edit,
body.player-mode #edit-panel,
body.player-mode #btn-export,
body.player-mode #lbl-import {
  display: none !important;
}

main {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  padding: 16px;
  align-items: start;
}

.info {
  background: var(--panel);
  border-radius: 8px;
  padding: 14px;
  max-height: calc(100vh - 140px);
  overflow: auto;
}

.menu section + section { margin-top: 18px; }

.menu h2 {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .1em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.scenario-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.scenario-list li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  border: 1px solid transparent;
  margin-bottom: 4px;
  line-height: 1.35;
}
.scenario-list li:hover {
  background: var(--panel-2);
}
.scenario-list li.active {
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--accent);
}
.scenario-list li .tag {
  display: inline-block;
  font-size: 10px;
  color: var(--accent-2);
  margin-right: 6px;
  border: 1px solid var(--accent-2);
  padding: 1px 5px;
  border-radius: 3px;
}

.stage {
  background: var(--panel);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.court-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0b1119;
  border-radius: 6px;
  padding: 8px;
}
#court {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}

.rotation-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 6px 4px 2px;
}
.rotation-nav button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.rotation-nav button:hover { background: #2b3d55; }
.rotation-nav #rot-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  min-width: 44px;
  text-align: center;
  letter-spacing: .05em;
}

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 4px;
}
.controls button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.controls button:hover { background: #2b3d55; }
.controls .speed { font-size: 12px; color: var(--muted); }
.controls select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 3px 6px;
  border-radius: 4px;
}
#seek {
  flex: 1;
  min-width: 120px;
}
#time-label {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  min-width: 90px;
  text-align: right;
}

.info h2 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--accent);
}
.info .desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.info h3 {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  margin: 14px 0 6px;
  text-transform: uppercase;
}
#timeline {
  padding-left: 20px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
#timeline li {
  margin-bottom: 6px;
  cursor: pointer;
  color: var(--text);
}
#timeline li.current {
  color: var(--accent);
  font-weight: 600;
}

.roles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.roles li {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.roles .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
}

.combo-builder {
  background: #131c28;
  border: 1px solid #2d3d54;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 16px;
}
.combo-builder h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: none;
}
.combo-builder .hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.combo-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px dashed #263447;
}
.combo-slot:last-child { border-bottom: none; }
.combo-slot .badge {
  display: inline-block;
  width: 26px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  font-weight: 700;
  color: #0b1119;
  font-size: 11px;
  flex-shrink: 0;
}
.combo-slot .meta {
  flex: 1;
  color: var(--muted);
  font-size: 10px;
}
.combo-slot select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
  max-width: 140px;
}
.combo-primary-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.combo-primary-row select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
  flex: 1;
}
.combo-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.combo-actions button {
  flex: 1;
  background: var(--accent);
  color: #0b1119;
  border: none;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.combo-actions button:hover { opacity: .85; }
.combo-actions button#btn-combo-clear {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  font-weight: 500;
}

footer {
  padding: 12px 24px;
  color: var(--muted);
  border-top: 1px solid #263447;
  text-align: center;
}

/* SVG in-court styling */
.court-floor { fill: var(--court); }
.court-back-row { fill: var(--court-back); }
.court-line { stroke: var(--line); stroke-width: 2; fill: none; }
.court-net { stroke: var(--net); stroke-width: 3; stroke-dasharray: 4 3; }
.court-label { fill: rgba(255,255,255,.45); font-size: 10px; font-family: sans-serif; }
.player {
  transition: none;
}
.player circle {
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.player text {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.trail {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: .5;
}
.ball circle {
  fill: #fff;
  stroke: #f0a020;
  stroke-width: 2;
}

/* 守備範囲円: デフォルト非表示、toggleで表示 */
.range-circle { display: none; }
#court.show-ranges .range-circle { display: block; }

.toggle-range {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.toggle-range input { cursor: pointer; }

.edit-panel {
  background: #2a2510;
  border: 1px solid #ffb020;
  border-radius: 6px;
  padding: 10px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.edit-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.edit-title {
  color: var(--accent);
  font-weight: 700;
}
.edit-context {
  color: var(--muted);
}
.edit-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.edit-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.edit-actions button:hover { background: #2b3d55; }
#btn-save-cover {
  background: var(--accent) !important;
  color: #0b1119 !important;
  font-weight: 700;
}

/* 編集モード中: プレイヤーが drag 可能なことを示す */
#court.edit-mode .player {
  cursor: grab;
  touch-action: none; /* iPad/iPhone でスクロールせず選手ドラッグを優先 */
}
#court.edit-mode .player:hover circle:not(.range-circle) {
  stroke: var(--accent);
  stroke-width: 3;
}
#court.edit-mode .player.dragging {
  cursor: grabbing;
}
/* 編集モード中は SVG 全体のタッチスクロールも抑制 */
#court.edit-mode {
  touch-action: none;
}

/* 非編集モードでも player はタップ可能を示す */
#court:not(.edit-mode) .player {
  cursor: pointer;
}

/* 選手タップ用ポップアップ */
.player-popup {
  position: fixed;
  z-index: 200;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  min-width: 220px;
  max-width: 280px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  color: var(--text);
  touch-action: pan-y; /* ポップアップ内はスクロール可能に、外部からは分離 */
}

/* ポップアップ表示中: 背後のページを完全にロック (iOS Safari対応) */
body.popup-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
body.popup-open .player-popup {
  touch-action: pan-y; /* ポップアップ内はスクロール可 */
  overscroll-behavior: contain;
}

/* オーバーレイ: ポップアップの背後を覆う (touch/scroll吸収) */
.popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.4);
  touch-action: none;
  overscroll-behavior: none;
}
.popup-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid #33455c;
  font-size: 12px;
  gap: 8px;
}
.popup-title { display: flex; align-items: center; gap: 6px; flex: 1; }
.popup-badge {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  color: #0b1119;
  font-weight: 700;
  font-size: 11px;
}
.popup-close {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.popup-hint {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.popup-attacks {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.popup-attack-item {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}
.popup-attack-item:hover { background: #2b3d55; }
.popup-attack-item.selected {
  background: var(--accent);
  color: #0b1119;
  font-weight: 700;
  border-color: var(--accent);
}
.popup-actions {
  padding-top: 6px;
  border-top: 1px solid #33455c;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.popup-actions button {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  border: none;
}
.popup-actions #popup-play {
  background: var(--accent);
  color: #0b1119;
}
.popup-actions #popup-play:hover { opacity: .85; }
.popup-actions .btn-primary-tag {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
}
.popup-actions .btn-primary-tag.is-primary {
  background: var(--accent-2);
  color: #0b1119;
}

/* 攻撃が割当てされている選手を視覚的に示す (小さな星バッジ) */
.player .attack-indicator {
  fill: #ffd700;
  stroke: #000;
  stroke-width: 1;
  display: none;
}
.player.has-attack .attack-indicator { display: block; }
.player.is-primary .attack-indicator { fill: #ff4d4d; }
#btn-edit {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid #33455c;
}
#btn-edit.active {
  background: var(--accent);
  color: #0b1119;
  font-weight: 700;
}

.edit-mode-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0;
}
.mode-tab {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid #33455c;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.mode-tab.active {
  background: var(--accent);
  color: #0b1119;
  font-weight: 700;
  border-color: var(--accent);
}
.action-badge {
  fill: #ff4d4d;
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
}

@media (max-width: 1024px) {
  main {
    grid-template-columns: 1fr;
  }
  .info { max-height: none; }
}