.setup-page {
  background: #fff;
  padding: 0;
  color: var(--text);
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.setup-header {
  padding: 14vw 5vw 4vw;
}
.setup-header h1 {
  font-size: 6vw;
  font-weight: 900;
}

.setup-section {
  padding: 5vw;
  border-bottom: 1px solid #eee;
}
.setup-section h2 {
  font-size: 4.5vw;
  font-weight: 900;
  margin-bottom: 4vw;
}

.form-group { margin-bottom: 3.5vw; }
.form-group:last-child { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: 3.2vw;
  font-weight: 500;
  color: var(--text-sub);
  margin-bottom: 1.5vw;
}
.form-label .required { color: var(--danger); }

.form-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.form-input-wrap.error { border-color: var(--danger); }
.form-input-wrap .form-input {
  flex: 1;
  border: none;
  background: none;
  padding: 3vw 3.5vw;
  font-size: 3.8vw;
  color: var(--text);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  outline: none;
}
.form-input-wrap .form-input::placeholder { color: var(--text-light); }
.form-input-wrap .btn-select {
  padding: 2.5vw 4vw;
  background: none;
  border: none;
  border-left: 1px solid #eee;
  color: var(--text-light);
  font-size: 3vw;
  font-weight: 500;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.form-input {
  width: 100%;
  padding: 3vw 3.5vw;
  border-radius: 0;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--text);
  font-size: 3.8vw;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.form-input::placeholder { color: var(--text-light); }
.form-input:focus { border-color: var(--green-light); }

.form-row-2col { display: flex; gap: 3vw; }
.form-row-2col .form-col { flex: 1; }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23999'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3.5vw center;
  padding-right: 10vw;
}

.team-mode-group {
  display: flex;
  flex-direction: column;
  gap: calc(12 / 393 * 100vw);
}
.team-mode-group .radio-item {
  display: flex;
  align-items: center;
  gap: calc(6 / 393 * 100vw);
  cursor: pointer;
  font-size: calc(16 / 393 * 100vw);
}
.team-mode-group .radio-item input[type="radio"] {
  display: none;
}
.team-mode-group .radio-circle {
  width: calc(16 / 393 * 100vw);
  height: calc(16 / 393 * 100vw);
  min-width: calc(6 / 393 * 100vw);
  border-radius: 50%;
  border: 2px solid #C3C3C3;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}
.team-mode-group .radio-item input[type="radio"]:checked + .radio-circle {
  background: #3AB67D;
  border: 2px solid #3AB67D;
}
.team-mode-group .radio-item input[type="radio"]:checked + .radio-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(6 / 393 * 100vw);
  height: calc(6 / 393 * 100vw);
  background: #fff;
  border-radius: 50%;
}
.team-mode-group .radio-label {
  color: var(--text);
}

.sub-heading {
  font-size: 3.2vw;
  font-weight: 500;
  color: var(--text-sub);
  margin-bottom: 3vw;
}

.player-list { display: flex; flex-direction: column; }
.player-item {
  display: flex;
  align-items: center;
  gap: 2.5vw;
  padding: 3vw 0;
  border-bottom: 1px solid #f5f5f5;
}
.player-item:last-child { border-bottom: none; }

.order-badge {
  font-family: 'Roboto Mono', monospace;
  font-size: 2.2vw;
  font-weight: 700;
  color: #fff;
  padding: 1vw 2vw;
  border-radius: 1vw;
  white-space: nowrap;
  flex-shrink: 0;
}
.order-badge.team-a { background: var(--danger); }
.order-badge.team-b { background: var(--green-light); }
.order-badge.ghost { background: #bbb; }

.player-avatar {
  width: 9vw;
  height: 9vw;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.player-item .form-input {
  flex: 1;
  border: none;
  padding: 0;
  font-size: 3.8vw;
  font-weight: 500;
  background: none;
}
.player-item .form-input::placeholder { color: var(--text-light); }
.player-item .form-input:focus::placeholder { color: transparent; }
.player-item .form-input:focus { border: none; }

.player-item .btn-clear {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 4.5vw;
  cursor: pointer;
  padding: 1vw;
  flex-shrink: 0;
  line-height: 1;
}

.notice-box {
  background: #fdf8f0;
  border-radius: var(--radius-sm);
  padding: 4vw;
  margin-top: 4vw;
  font-size: 3vw;
  line-height: 1.6;
  color: #666;
}
.notice-box .notice-title { font-weight: 700; color: var(--text); }

.point-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 / 393 * 100vw);
  background: #f7f7f5;
  padding: calc(14 / 393 * 100vw) 5vw;
  margin-left: -5vw;
  margin-right: -5vw;
  font-size: calc(16 / 393 * 100vw);
  font-weight: 600;
}
.point-display .form-input {
  font-family: 'Roboto Mono', monospace;
  font-size: calc(18 / 393 * 100vw);
  font-weight: 400;
  width: calc(80 / 393 * 100vw);
  text-align: center;
  border: 1px solid #C3C3C3;
  border-radius: calc(4 / 393 * 100vw);
  padding: calc(6 / 393 * 100vw) calc(8 / 393 * 100vw);
  background: #fff;
}

.option-list { margin-top: 4vw; }
.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.5vw 0;
  border-bottom: 1px solid #f5f5f5;
}
.option-item:last-child { border-bottom: none; }
.option-item-label {
  font-size: 3.4vw;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  padding-right: 3vw;
}

.toggle {
  width: 12vw;
  height: 6.5vw;
  border-radius: 3.25vw;
  background: #ddd;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
}
.toggle.on { background: var(--green-light); }
.toggle::after {
  content: '';
  position: absolute;
  top: 0.8vw;
  left: 0.8vw;
  width: 4.9vw;
  height: 4.9vw;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.toggle.on::after { transform: translateX(5.5vw); }

.player-item.ghost-row {
  opacity: 0.5;
}
.player-item.ghost-row .form-input {
  color: #999;
  pointer-events: none;
}
.player-item.ghost-row .arrow-right {
  display: none;
}

.ghost-setting {
  margin-top: 3vw;
  padding: 3vw;
  background: #f8f8f8;
  border-radius: var(--radius-sm);
}
.ghost-setting .form-label { font-size: 3vw; margin-bottom: 2vw; }

.radio-group { display: flex; gap: 2vw; flex-wrap: wrap; }
.radio-item { flex: 1; min-width: 0; }
.radio-item input { display: none; }
.radio-item label {
  display: block;
  text-align: center;
  padding: 2.5vw 2vw;
  border-radius: var(--radius-sm);
  border: 1.5px solid #ddd;
  font-size: 3vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  color: var(--text-sub);
}
.radio-item input:checked + label {
  background: var(--green-pale);
  color: var(--green-dark);
  border-color: var(--green-light);
  font-weight: 700;
}

.btn-resume {
  display: block;
  width: 100%;
  margin-top: 5vw;
  padding: 4.5vw;
  border: 2px solid var(--green-light);
  border-radius: 3.5vw;
  background: var(--white);
  color: var(--green-light);
  font-size: 4.5vw;
  font-weight: 900;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: transform 0.15s;
  letter-spacing: 0.05em;
}
.btn-resume:active { transform: scale(0.97); }
.btn-start {
  display: block;
  width: 100%;
  margin-top: 5vw;
  margin-bottom: 5vw;
  padding: 4.5vw;
  border: none;
  border-radius: 3.5vw;
  background: var(--green-light);
  color: var(--white);
  font-size: 4.5vw;
  font-weight: 900;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s;
  letter-spacing: 0.05em;
}
.btn-start:active { transform: scale(0.97); }