:root {
  --fighters-blue: #005bac;
  --fighters-deep-blue: #003f7d;
  --fighters-sky: #eaf4ff;
  --fighters-gold: #d5a11e;
  --text: #152033;
  --muted: #65758b;
  --border: #d8e3ef;
  --surface: #ffffff;
  --error: #b42318;
  --error-bg: #fff1f0;
  --success: #176b3a;
  --success-bg: #effaf3;
  --shadow: 0 12px 28px rgba(0, 63, 125, 0.12);
}

.admin-auto-scoring-test-panel {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #8ab4e8;
  border-radius: 10px;
  background: #f3f8ff;
}

.admin-auto-scoring-test-heading,
.admin-auto-scoring-test-detail-heading {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.admin-auto-scoring-test-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.admin-auto-scoring-test-form label,
.admin-auto-scoring-test-answer-form label {
  display: grid;
  gap: .3rem;
  font-weight: 600;
}

.admin-auto-scoring-test-form input,
.admin-auto-scoring-test-form textarea,
.admin-auto-scoring-test-answer-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .65rem;
  border: 1px solid #b8c8dc;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
}

.admin-auto-scoring-test-preview {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-auto-scoring-test-wide {
  grid-column: 1 / -1;
}

.admin-test-deadline-presets,
.admin-auto-scoring-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}

.admin-auto-scoring-test-list {
  display: grid;
  gap: .45rem;
  margin-top: 1rem;
}

.admin-auto-scoring-test-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .7rem;
  align-items: center;
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #c9d7e8;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-auto-scoring-test-row.is-selected,
.admin-auto-scoring-test-row:hover {
  border-color: #4d88c7;
  background: #f8fbff;
}

.admin-auto-scoring-test-row small,
.admin-auto-scoring-test-row strong {
  white-space: nowrap;
}

.admin-auto-scoring-test-detail {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #c9d7e8;
}

.admin-auto-scoring-test-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 1rem 0;
}

.admin-auto-scoring-test-status > div {
  padding: .55rem .65rem;
  border: 1px solid #d2deec;
  border-radius: 6px;
  background: #fff;
}

.admin-auto-scoring-test-status dt {
  color: #52657c;
  font-size: .78rem;
}

.admin-auto-scoring-test-status dd {
  margin: .2rem 0 0;
  overflow-wrap: anywhere;
}

.admin-auto-scoring-test-answer-form {
  display: grid;
  gap: .55rem;
  margin: 1rem 0;
}

.admin-auto-scoring-test-results-wrap {
  margin-top: 1rem;
}

.admin-auto-scoring-test-results {
  display: grid;
  gap: .4rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.admin-auto-scoring-test-results li {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: baseline;
  padding: .55rem .65rem;
  border: 1px solid #d2deec;
  border-radius: 6px;
  background: #fff;
}

.admin-auto-scoring-test-results small {
  color: #52657c;
}

@media (max-width: 640px) {
  .admin-auto-scoring-test-form,
  .admin-auto-scoring-test-status {
    grid-template-columns: 1fr;
  }

  .admin-auto-scoring-test-row {
    grid-template-columns: 1fr auto;
  }

  .admin-auto-scoring-test-row small {
    grid-column: 1 / -1;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: linear-gradient(180deg, #f1f7ff 0%, #ffffff 36%);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.container {
  width: min(100% - 32px, 1100px);
  margin: 0 auto;
}

.app-header {
  color: #ffffff;
  background: #061a42;
}

.header-inner {
  padding: 30px 0 34px;
}

.header-logo {
  width: min(100%, 920px);
  margin: 0 auto 14px;
}

.header-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.team-label {
  margin: 0 0 8px;
  color: #d7ecff;
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-mode-badge {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(159, 28, 28, 0.72);
  font-size: 0.86rem;
  font-weight: 900;
}

.game-info-display {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #f4fbff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.auth-panel {
  display: grid;
  gap: 5px;
  width: min(100%, 520px);
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(0, 44, 89, 0.28);
}

.auth-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #f4fbff;
  font-size: 0.86rem;
  font-weight: 800;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auth-button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 6px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
}

.auth-button:hover,
.auth-button:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

.auth-button.is-primary {
  border-color: #f0d77f;
  color: #2f3b16;
  background: #f7df86;
}

.auth-status {
  min-height: 1.2em;
  margin: 0;
  color: #d7ecff;
  font-size: 0.75rem;
  font-weight: 700;
}

.auth-status.is-success {
  color: #d7f8df;
}

.auth-status.is-warning {
  color: #ffe3a1;
}

.achievements-panel {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.achievements-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.achievements-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: 0.86rem;
}

.achievements-list,
.admin-test-achievements {
  display: grid;
  gap: 8px;
}

.achievement-empty {
  margin: 0;
  color: #d7ecff;
  font-size: 0.78rem;
  font-weight: 700;
}

.achievement-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
}

.achievement-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #e3efff;
  font-size: 0.78rem;
  font-weight: 900;
}

.achievement-body {
  min-width: 0;
}

.achievement-rarity,
.achievement-card h3,
.achievement-card p {
  margin: 0;
}

.achievement-rarity {
  font-size: 0.7rem;
  font-weight: 900;
}

.achievement-card h3 {
  color: #ffffff;
  font-size: 0.84rem;
}

.achievement-card p:not(.achievement-rarity) {
  color: #e0ecf7;
  font-size: 0.75rem;
  line-height: 1.45;
}

.achievement-earned {
  margin-top: 3px !important;
  color: #c4d8ec !important;
  font-size: 0.7rem !important;
}

.achievement-card.is-rare .achievement-icon,
.achievement-card.is-rare .achievement-rarity {
  color: #9ed2ff;
}

.achievement-card.is-epic .achievement-icon,
.achievement-card.is-epic .achievement-rarity {
  color: #e0b5ff;
}

.achievement-card.is-limited .achievement-icon,
.achievement-card.is-limited .achievement-rarity {
  color: #ffe18c;
}

.auth-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 26, 48, 0.56);
}

.auth-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 20px;
  border: 1px solid #cfe1f1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(0, 35, 70, 0.28);
}

.auth-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.auth-dialog-heading h2 {
  color: var(--fighters-deep-blue);
}

.auth-close-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: #f7fbff;
  font-size: 1.4rem;
  line-height: 1;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 4px 0 16px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #f1f6fb;
}

.auth-mode-tab {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 900;
}

.auth-mode-tab.is-selected {
  border-color: #9fc4e7;
  color: var(--fighters-deep-blue);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(25, 54, 82, 0.12);
}

.auth-form {
  display: grid;
  gap: 8px;
}

.auth-form-error {
  min-height: 1.5em;
  margin: 4px 0 0;
  color: var(--error);
  font-size: 0.86rem;
  font-weight: 800;
}

.auth-dialog-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.probable-starter-card {
  display: grid;
  gap: 8px;
  width: min(100%, 560px);
  min-height: 128px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  color: #f4fbff;
  background: rgba(0, 44, 89, 0.36);
}

.probable-starter-card.is-success {
  border-color: rgba(189, 232, 204, 0.72);
  background: rgba(13, 76, 50, 0.38);
}

.probable-starter-card.is-pending,
.probable-starter-card.is-loading {
  background: rgba(255, 255, 255, 0.14);
}

.probable-starter-card.is-error {
  border-color: rgba(255, 211, 205, 0.8);
  background: rgba(128, 33, 33, 0.4);
}

.probable-starter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.probable-starter-label,
.probable-starter-message,
.probable-starter-meta,
.probable-starter-fetched {
  margin: 0;
}

.probable-starter-label {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.probable-starter-heading a {
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
}

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

.probable-starter-team {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.probable-starter-team span,
.probable-starter-fetched {
  color: #d7ecff;
  font-size: 0.74rem;
  font-weight: 800;
}

.official-source-note {
  margin: 6px 0 0;
  color: #d7ecff;
  font-size: 0.72rem;
  line-height: 1.5;
}

.official-source-note a {
  color: inherit;
  font-weight: 800;
}

.probable-starter-team strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 0.98rem;
}

.probable-starter-meta,
.probable-starter-message {
  color: #eef7ff;
  font-size: 0.82rem;
  font-weight: 700;
}

.daily-best-nine-card {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #cfe1f1;
  border-left: 4px solid var(--fighters-gold);
  border-radius: 8px;
  background: #fffdf5;
}

.daily-best-nine-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.daily-best-nine-heading .area-label,
.daily-best-nine-heading h3 {
  margin-bottom: 0;
}

.daily-best-nine-heading h3 {
  color: var(--fighters-deep-blue);
}

.daily-best-nine-content {
  display: grid;
  gap: 10px;
}

.daily-best-nine-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.daily-best-nine-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e4d6a2;
  border-radius: 6px;
  background: #ffffff;
}

.daily-best-nine-rank {
  color: var(--fighters-gold);
  font-weight: 950;
}

.daily-best-nine-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

.daily-best-nine-score {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.daily-best-nine-badge {
  padding: 3px 7px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--fighters-gold);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.daily-best-nine-message {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.daily-best-nine-message.is-error {
  color: var(--error);
}

.ranking-card {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.ranking-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ranking-heading h2,
.ranking-heading p {
  margin-bottom: 0;
}

.ranking-heading h2 {
  color: var(--fighters-deep-blue);
}

.ranking-content {
  display: grid;
  gap: 14px;
}

.ranking-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #9db6d4;
  border-radius: 7px;
  background: #f7fbff;
}

.ranking-tab {
  min-width: 58px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-right: 1px solid #9db6d4;
  border-radius: 0;
  color: #48627d;
  background: transparent;
  font-weight: 900;
}

.ranking-tab:last-child {
  border-right: 0;
}

.ranking-tab.is-active {
  color: #ffffff;
  background: var(--fighters-blue);
}

.ranking-month-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.ranking-month-controls > :first-child {
  justify-self: start;
}

.ranking-month-controls > :last-child {
  justify-self: end;
}

.ranking-month-controls strong {
  color: var(--fighters-deep-blue);
  text-align: center;
  font-size: 1rem;
}

.ranking-summary,
.ranking-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.ranking-qualified-section,
.ranking-self {
  display: grid;
  gap: 10px;
}

.ranking-qualified-section h3,
.ranking-self h3 {
  margin: 0;
  color: var(--fighters-deep-blue);
  font-size: 1rem;
}

.ranking-self {
  padding: 12px;
  border: 1px solid #b9d7ef;
  border-left: 4px solid var(--fighters-blue);
  border-radius: 7px;
  background: #f4faff;
}

.ranking-self p {
  margin: 0;
  color: #3c526c;
  font-size: 0.88rem;
  font-weight: 750;
}

.ranking-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-entry {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #d4e2ee;
  border-radius: 7px;
  background: #ffffff;
}

.ranking-rank {
  margin: 0;
  color: var(--fighters-blue);
  font-size: 0.95rem;
  font-weight: 950;
  text-align: center;
}

.ranking-entry-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ranking-entry-main p {
  margin: 0;
  color: #4a5d74;
  font-size: 0.86rem;
  font-weight: 700;
}

.ranking-user-line,
.ranking-achievements {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ranking-user-line strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 1rem;
}

.ranking-achievement-badge,
.ranking-achievement-more {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid #b8c9dc;
  border-radius: 999px;
  color: #3d5270;
  background: #f6f9fc;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.ranking-achievement-badge.is-rare {
  border-color: #8aa8df;
  color: #305caa;
  background: #edf3ff;
}

.ranking-achievement-badge.is-epic {
  border-color: #b89add;
  color: #7140a1;
  background: #f6efff;
}

.ranking-achievement-badge.is-limited {
  border-color: #d2ae54;
  color: #805a00;
  background: #fff8dd;
}

h2,
p {
  margin-top: 0;
}

h2 {
  margin-bottom: 4px;
  font-size: 1.22rem;
  line-height: 1.35;
}

h3 {
  margin: 0 0 10px;
  color: var(--fighters-deep-blue);
  font-size: 0.98rem;
  line-height: 1.35;
}

.lead {
  max-width: 720px;
  margin-bottom: 0;
  color: #eef7ff;
}

.app-layout {
  display: grid;
  gap: 18px;
  padding: 22px 0 42px;
}

.app-layout.is-admin-screen > :not(.admin-details) {
  display: none;
}

.area-label {
  margin-bottom: 4px;
  color: var(--fighters-blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lineup-card {
  grid-column: 1 / -1;
}

.admin-details {
  grid-column: 1 / -1;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  background: #f6f8fb;
}

.admin-details summary,
.admin-test-details summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--fighters-deep-blue);
  cursor: pointer;
  font-weight: 900;
}

.admin-details summary::marker,
.admin-test-details summary::marker {
  color: var(--fighters-blue);
}

.admin-details summary small,
.admin-test-details summary small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.admin-screen-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.admin-test-details {
  margin: 0 12px 12px;
  border: 1px solid #d6c6ed;
  border-radius: 8px;
  background: #f9f6ff;
}

.admin-test-details summary {
  color: #513675;
}

.admin-test-warning,
.admin-test-panel {
  margin: 12px 16px;
  padding: 16px;
  border: 1px solid #d6c6ed;
  border-radius: 8px;
  background: #ffffff;
}

.admin-test-warning {
  border-color: #d8ad68;
  color: #6c4211;
  background: #fff8e9;
}

.admin-test-warning p,
.admin-test-panel p {
  margin: 4px 0 0;
}

.admin-test-panel {
  display: grid;
  gap: 14px;
}

.admin-test-info dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-test-info dl > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e3daf0;
  border-radius: 6px;
  background: #fcfbff;
}

.admin-test-info dt {
  color: #6a5b80;
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-test-info dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: #302342;
  font-size: 0.88rem;
  font-weight: 800;
}

.admin-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-test-achievements .achievement-empty {
  color: var(--muted);
}

.admin-test-achievements .achievement-card {
  border-color: #ddd2ec;
  background: #fdfbff;
}

.admin-test-achievements .achievement-card h3 {
  color: var(--fighters-deep-blue);
}

.admin-test-achievements .achievement-card p:not(.achievement-rarity) {
  color: var(--muted);
}

.admin-test-achievements .achievement-earned {
  color: #75658b !important;
}

.admin-card {
  margin: 0 12px 12px;
  border-style: dashed;
  box-shadow: none;
}

.section-heading {
  display: flex;
  gap: 0;
  align-items: flex-start;
  margin-bottom: 18px;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

input {
  padding: 10px 12px;
}

select {
  padding: 10px 38px 10px 12px;
}

textarea {
  min-height: 150px;
  padding: 12px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(0, 91, 172, 0.18);
  border-color: var(--fighters-blue);
}

.primary-button,
.secondary-button,
.danger-button {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 0;
  font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.primary-button {
  color: #ffffff;
  background: var(--fighters-blue);
  box-shadow: 0 8px 18px rgba(0, 91, 172, 0.25);
}

.secondary-button {
  color: var(--fighters-deep-blue);
  background: #edf6ff;
  border: 1px solid #b9daf8;
}

.danger-button {
  color: #ffffff;
  background: #9f1c1c;
}

.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.danger-button:focus-visible {
  outline: 3px solid rgba(213, 161, 30, 0.45);
  outline-offset: 2px;
}

.message {
  min-height: 1.5em;
  margin: 12px 0 0;
  font-weight: 700;
  white-space: pre-wrap;
}

.error-message {
  color: var(--error);
}

.success-message {
  color: var(--success);
}

.prediction-deadline-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: var(--fighters-deep-blue);
  font-size: 0.9rem;
  font-weight: 800;
}

.prediction-deadline-status.is-closed,
.prediction-deadline-status.is-unavailable {
  color: var(--error);
}

.prediction-target-notice {
  color: var(--fighters-deep-blue);
  font-size: 0.85rem;
  font-weight: 700;
}

.admin-prediction-deadline {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #b9daf8;
  border-radius: 8px;
  background: #f7fbff;
}

.admin-prediction-deadline dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-prediction-deadline dl > div {
  min-width: 0;
}

.admin-prediction-deadline dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-prediction-deadline dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.admin-game-workflow-status {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #b9daf8;
  border-radius: 8px;
  background: #f7fbff;
}

.admin-game-workflow-summary {
  display: grid;
  gap: 6px;
}

.admin-game-workflow-summary > strong {
  color: var(--fighters-deep-blue);
  font-size: 1rem;
}

.admin-game-workflow-summary > span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-game-workflow-summary dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 2px 0 0;
}

.admin-game-workflow-summary dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-game-workflow-summary dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.admin-workflow-history {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}

.admin-workflow-history > strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-workflow-history ul {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.admin-workflow-history li {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: space-between;
}

.admin-workflow-history li b {
  color: var(--danger, #9f1239);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.admin-game-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-release-readiness {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #cbd8e5;
  border-radius: 8px;
  background: #ffffff;
}

.admin-release-readiness-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-release-readiness-heading h3,
.admin-release-readiness-heading p {
  margin: 0;
}

.admin-release-readiness-heading h3 {
  color: var(--fighters-deep-blue);
  font-size: 1rem;
}

.admin-release-readiness-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-release-readiness-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-release-readiness-list dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-release-readiness-list dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.admin-release-readiness-errors,
.admin-release-readiness-warnings {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-release-readiness-errors { color: #9c2f2f; }
.admin-release-readiness-warnings { color: #805817; }

.admin-game-progress-board {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #cbd8e5;
  border-radius: 8px;
  background: #ffffff;
}

.admin-game-progress-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-game-progress-heading h3,
.admin-game-progress-heading p {
  margin: 0;
}

.admin-game-progress-heading h3 {
  color: var(--fighters-deep-blue);
  font-size: 1rem;
}

.admin-game-progress-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-game-progress-game {
  margin: 0;
  color: var(--fighters-deep-blue);
  font-weight: 900;
}

.admin-game-progress-updated {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-game-progress-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.admin-game-progress-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #d7e2ed;
  border-radius: 6px;
  background: #fbfcfe;
}

.admin-game-progress-item dt,
.admin-game-progress-item dd {
  margin: 0;
}

.admin-game-progress-item dt {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 800;
}

.admin-game-progress-item dd {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.admin-game-progress-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-game-progress-status.is-completed { color: #27643c; background: #e4f3e9; }
.admin-game-progress-status.is-waiting { color: #805817; background: #fff0c9; }
.admin-game-progress-status.is-not_started { color: #5f6d7b; background: #eef1f4; }
.admin-game-progress-status.is-error { color: #9c2f2f; background: #fce5e5; }
.admin-game-progress-status.is-out_of_scope { color: #7c8792; background: #f3f5f7; }

.admin-game-progress-detail {
  max-width: 240px;
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.admin-game-progress-errors {
  margin: 0;
  color: var(--error);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-workflow-logs {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #d7e2ed;
  border-radius: 8px;
  background: #ffffff;
}

.admin-game-identity-repairs {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #d7e2ed;
  border-radius: 8px;
  background: #ffffff;
}

.admin-game-identity-repairs-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-game-identity-repairs-heading h3,
.admin-game-identity-repairs-heading p {
  margin: 0;
}

.admin-game-identity-repairs-heading h3 {
  color: var(--fighters-deep-blue);
  font-size: 1rem;
}

.admin-game-identity-repairs-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-game-identity-repairs-list {
  display: grid;
  gap: 8px;
}

.game-identity-repair-coverage {
  min-width: 0;
}

.game-identity-repair-coverage-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.game-identity-repair-coverage-list > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #d8e1ea;
  border-radius: 6px;
  background: #fbfdff;
}

.game-identity-repair-coverage-list dt,
.game-identity-repair-coverage-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.game-identity-repair-coverage-list dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.game-identity-repair-coverage-list dd {
  margin-top: 2px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
}

.game-identity-repair-last-result {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #d8e1ea;
  border-radius: 6px;
  background: #fbfdff;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.game-identity-repair-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e1ea;
  border-left-width: 3px;
  border-radius: 6px;
  background: #fbfdff;
}

.game-identity-repair-card.is-SAFE_CREATE_INTERNAL_GAME,
.game-identity-repair-card.is-SAFE_AUTO_LINK { border-left-color: #4b9a68; }
.game-identity-repair-card.is-MANUAL_REVIEW { border-left-color: #c48828; background: #fffdf7; }
.game-identity-repair-card.is-OBSOLETE_ORPHAN { border-left-color: #7b9fbd; }

.game-identity-repair-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--fighters-deep-blue);
}

.game-identity-repair-card-heading code,
.game-identity-repair-details dd,
.game-identity-repair-result {
  overflow-wrap: anywhere;
}

.game-identity-repair-details {
  display: grid;
  gap: 4px;
  margin: 0;
}

.game-identity-repair-details > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
}

.game-identity-repair-details dt,
.game-identity-repair-details dd {
  margin: 0;
  font-size: 0.8rem;
}

.game-identity-repair-details dt {
  color: var(--muted);
  font-weight: 800;
}

.game-identity-repair-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-identity-repair-notice,
.game-identity-repair-result {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.game-identity-repair-error-details {
  margin: 0;
  color: #7f3030;
  font-size: 0.75rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-workflow-logs-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-workflow-logs-heading h3,
.admin-workflow-logs-heading p {
  margin: 0;
}

.admin-workflow-logs-heading h3 {
  color: var(--fighters-deep-blue);
  font-size: 1rem;
}

.admin-workflow-logs-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-workflow-logs-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-workflow-log-filters {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(150px, 0.8fr));
  gap: 8px;
}

.admin-workflow-log-filters input,
.admin-workflow-log-filters select {
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #cbd8e5;
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.admin-workflow-logs-list {
  display: grid;
  gap: 7px;
}

.workflow-log-entry {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid #d8e1ea;
  border-left-width: 3px;
  border-radius: 6px;
  background: #fbfdff;
}

.workflow-log-status-success { border-left-color: #4b9a68; }
.workflow-log-status-warning { border-left-color: #c48828; background: #fffdf7; }
.workflow-log-status-error { border-left-color: #c65a5a; background: #fffafa; }
.workflow-log-status-info { border-left-color: #7b9fbd; }

.workflow-log-entry-main {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto minmax(100px, 0.8fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.workflow-log-entry-main time,
.workflow-log-game {
  overflow-wrap: anywhere;
}

.workflow-log-event {
  color: var(--text);
}

.workflow-log-status {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8eef4;
  white-space: nowrap;
}

.workflow-log-status-error .workflow-log-status { color: #9c2f2f; background: #fce5e5; }
.workflow-log-status-warning .workflow-log-status { color: #805817; background: #fff0c9; }
.workflow-log-status-success .workflow-log-status { color: #27643c; background: #e4f3e9; }

.workflow-log-message {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.workflow-log-message code {
  color: #7f3030;
  font-size: 0.76rem;
}

.workflow-log-entry details {
  color: var(--muted);
  font-size: 0.76rem;
}

.workflow-log-entry summary {
  cursor: pointer;
}

.workflow-log-entry pre {
  max-width: 100%;
  margin: 6px 0 0;
  padding: 7px;
  overflow: auto;
  border-radius: 4px;
  background: #f1f5f8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 0.72rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.deadline-override-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deadline-override-panel {
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

.deadline-override-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.deadline-override-controls .is-selected {
  border-color: #513675;
  color: #ffffff;
  background: #6a4a91;
}

.npb-message.is-info {
  color: var(--fighters-deep-blue);
}

.npb-message.is-success {
  color: var(--success);
}

.npb-message.is-warning {
  color: #a15c00;
}

.npb-message.is-error {
  color: var(--error);
}

.auto-fetch-message.is-info {
  color: var(--fighters-deep-blue);
}

.auto-fetch-message.is-success {
  color: var(--success);
}

.auto-fetch-message.is-warning {
  color: #a15c00;
}

.auto-fetch-message.is-error {
  color: var(--error);
}

.empty-state {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #f8fbff;
}

.result-unavailable-card {
  display: grid;
  gap: 8px;
  border-style: solid;
  border-color: #b9d0e3;
  color: var(--muted);
  background: #f7fbff;
}

.result-unavailable-title {
  color: var(--fighters-deep-blue);
  font-size: 1.05rem;
}

.result-unavailable-card p {
  margin: 0;
}

.parser-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfdff;
}

.npb-fetch-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #cfe1f1;
  border-radius: 8px;
  background: #ffffff;
}

.schedule-loader {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dce7f1;
}

.schedule-loader-title {
  margin: 0;
  color: var(--fighters-deep-blue);
  font-size: 0.9rem;
  font-weight: 900;
}

.schedule-next-summary {
  padding: 9px 10px;
  border: 1px solid #b9daf8;
  border-radius: 7px;
  background: #f3f9ff;
  color: var(--fighters-deep-blue);
  font-size: 0.86rem;
  font-weight: 800;
}

.schedule-loader-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
}

.schedule-loader-row select {
  min-width: 0;
}

.schedule-loader-message.is-success {
  color: var(--success);
}

.schedule-loader-message.is-warning {
  color: #a15c00;
}

.schedule-log-panel {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dce7f1;
}

.schedule-log-panel h3 {
  margin: 0;
  color: var(--fighters-deep-blue);
  font-size: 0.9rem;
}

.schedule-load-log {
  min-height: 88px;
  max-height: 220px;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid #cbd8e5;
  border-radius: 7px;
  background: #f7fafc;
  color: #334155;
  font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.schedule-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.probable-starter-admin-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed #b9cbe0;
  border-radius: 7px;
  background: #f7fbff;
}

.probable-starter-admin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.probable-starter-admin-heading .preview-title,
.probable-starter-admin-heading .field-help {
  margin-bottom: 0;
}

.probable-starter-admin-log {
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}

.probable-starter-admin-log ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
}

.probable-starter-admin-log li {
  overflow-wrap: anywhere;
}

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

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

.auto-fetch-summary,
.auto-fetch-validation,
.auto-fetch-log {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfdff;
}

.auto-fetch-summary dl {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 6px 10px;
  margin: 0;
  font-size: 0.9rem;
}

.auto-fetch-summary dt {
  color: var(--muted);
  font-weight: 800;
}

.auto-fetch-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.roster-monitor-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin: 0 0 10px;
  color: var(--fighters-deep-blue);
  font-size: 0.98rem;
  font-weight: 800;
}

.roster-monitor-title strong {
  padding: 3px 8px;
  border: 1px solid #b8c9d8;
  border-radius: 999px;
  background: #eef3f7;
  color: #425466;
  font-size: 0.82rem;
}

.roster-monitor-title strong.is-monitoring {
  border-color: #8fc6aa;
  background: #edf9f1;
  color: #176b3d;
}

.roster-monitor-title strong.is-fetching {
  border-color: #9fc4e7;
  background: #eef7ff;
  color: #155a91;
}

.roster-monitor-title strong.is-max-attempts,
.roster-monitor-title strong.is-manual {
  border-color: #d8bd82;
  background: #fff8e8;
  color: #805d16;
}

.roster-monitor-title strong.is-error {
  border-color: #e3a9a9;
  background: #fff1f1;
  color: #a52d2d;
}

.auto-fetch-validation ul,
.auto-fetch-log ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
}

.auto-fetch-validation li,
.auto-fetch-log li {
  overflow-wrap: anywhere;
}

.auto-fetch-validation .is-ok {
  color: var(--success);
  font-weight: 800;
}

.auto-fetch-validation .is-ng {
  color: var(--error);
  font-weight: 800;
}

.auto-fetch-log {
  max-height: 180px;
  overflow: auto;
  background: #ffffff;
}

.admin-flow-status {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}

.admin-flow-status strong {
  color: var(--fighters-deep-blue);
  font-size: 1rem;
}

.admin-flow-status span {
  color: var(--muted);
  font-weight: 700;
}

.admin-flow-status.is-preview {
  border-color: #b9daf8;
  background: #f3f9ff;
}

.admin-flow-status.is-approved {
  border-color: #a8dec0;
  background: var(--success-bg);
}

.admin-flow-status.is-approved strong {
  color: var(--success);
}

.admin-flow-status.is-provisional {
  border-color: #e3c46d;
  background: #fff9e8;
}

.admin-flow-status.is-provisional strong {
  color: #8a6200;
}

.admin-flow-status.is-error {
  border-color: #f2b8b5;
  background: var(--error-bg);
}

.admin-flow-status.is-error strong {
  color: var(--error);
}

.admin-server-scoring {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #b8c9d8;
  border-radius: 8px;
  background: #f5f9fd;
}

.admin-auto-scoring {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #9db9d2;
  border-radius: 8px;
  background: #eff7ff;
}

.admin-auto-scoring-summary {
  padding: 12px;
  border: 1px solid #c8d8e6;
  border-radius: 7px;
  background: #ffffff;
}

.admin-auto-scoring-summary dl {
  display: grid;
  grid-template-columns: minmax(116px, 0.8fr) minmax(0, 1.2fr);
  gap: 6px 12px;
  margin: 0;
}

.admin-auto-scoring-summary dt {
  color: var(--muted);
  font-weight: 800;
}

.admin-auto-scoring-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.admin-auto-scoring-error {
  margin: 10px 0 0;
  color: var(--error);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-server-scoring-heading h3 {
  margin: 0;
  color: var(--fighters-deep-blue);
  font-size: 1.05rem;
}

.admin-server-scoring-heading p:not(.area-label) {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.admin-server-scoring-summary,
.admin-server-scoring-preview {
  padding: 12px;
  border: 1px solid #c8d8e6;
  border-radius: 7px;
  background: #ffffff;
}

.admin-server-scoring-summary dl,
.admin-server-scoring-preview dl {
  display: grid;
  grid-template-columns: minmax(116px, 0.8fr) minmax(0, 1.2fr);
  gap: 6px 12px;
  margin: 0;
}

.admin-server-scoring-summary dt,
.admin-server-scoring-preview dt {
  color: var(--muted);
  font-weight: 800;
}

.admin-server-scoring-summary dd,
.admin-server-scoring-preview dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.admin-server-scoring-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-server-scoring-preview {
  display: grid;
  gap: 10px;
  border-color: #d9b979;
  background: #fffaf0;
}

.admin-server-scoring-errors {
  margin: 0;
  color: var(--error);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.parser-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.compact-button {
  margin-top: 0;
}

.parser-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #b9daf8;
  border-radius: 8px;
  background: #f3f9ff;
}

.preview-title {
  margin: 0;
  color: var(--fighters-deep-blue);
  font-weight: 900;
}

.preview-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-list li {
  display: grid;
  grid-template-columns: 48px 42px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
}

.lineup-builder {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(280px, 1.15fr);
  gap: 16px;
  align-items: start;
}

.lineup-panel,
.player-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfdff;
}

.player-list-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
}

.player-list-heading h3 {
  margin: 0;
}

.roster-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
  padding: 4px;
  border: 1px solid #cfe1f1;
  border-radius: 8px;
  background: #edf4fa;
}

.roster-filter-button {
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.roster-filter-button:hover,
.roster-filter-button:focus-visible {
  border-color: #a9c7df;
  background: #ffffff;
  color: var(--fighters-deep-blue);
}

.roster-filter-button.is-selected {
  border-color: #6ca4d0;
  background: #ffffff;
  color: var(--fighters-deep-blue);
  box-shadow: 0 1px 3px rgba(25, 54, 82, 0.12);
}

.game-day-notice-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-left: 3px solid #8aa9c3;
  background: #f2f7fb;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.game-day-notice-status strong {
  color: var(--fighters-deep-blue);
}

.slot-list,
.player-list {
  display: grid;
  gap: 8px;
}

.player-list {
  max-height: 560px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.lineup-slot {
  display: grid;
  grid-template-columns: 28px 46px minmax(0, 1fr) 42px 34px;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--text);
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.lineup-slot.is-active {
  border-color: #2381bf;
  background: #eef7ff;
  box-shadow: 0 2px 6px rgba(0, 63, 125, 0.09);
}

.lineup-slot.is-drop-target {
  border-color: var(--fighters-gold);
  background: #fff9e8;
  box-shadow: 0 0 0 3px rgba(213, 161, 30, 0.22);
  transform: translateY(-1px);
}

.lineup-slot.has-player {
  background: #ffffff;
}

.player-chip.is-category-catcher,
.lineup-slot.is-category-catcher,
.lineup-list li.is-category-catcher,
.preview-list li.is-category-catcher,
.player-category-legend-item.is-category-catcher {
  border: 1px solid #c8ddea;
  background: #f3f8fc;
}

.player-chip.is-category-infielder,
.lineup-slot.is-category-infielder,
.lineup-list li.is-category-infielder,
.preview-list li.is-category-infielder,
.player-category-legend-item.is-category-infielder {
  border: 1px solid #e9dfae;
  background: #fdf9e9;
}

.player-chip.is-category-outfielder,
.lineup-slot.is-category-outfielder,
.lineup-list li.is-category-outfielder,
.preview-list li.is-category-outfielder,
.player-category-legend-item.is-category-outfielder {
  border: 1px solid #c8ddcd;
  background: #f3f9f4;
}

.player-chip.is-category-dh,
.lineup-slot.is-category-dh,
.lineup-list li.is-category-dh,
.preview-list li.is-category-dh,
.player-category-legend-item.is-category-dh {
  border: 1px solid #e3c9d9;
  background: #fcf6fa;
}

.lineup-slot.is-duplicate {
  border-color: var(--error);
  background: var(--error-bg);
}

.player-category-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.player-category-legend-label {
  margin-right: 2px;
}

.player-category-legend-item {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text);
  line-height: 1.2;
}

.slot-order {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border-radius: 8px;
  color: var(--fighters-deep-blue);
  background: var(--fighters-sky);
  font-weight: 900;
}

.slot-drag-handle {
  display: inline-grid;
  width: 28px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid #b7c8d8;
  border-radius: 6px;
  color: #46637d;
  background: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.slot-drag-handle:active {
  cursor: grabbing;
}

.slot-drag-handle:hover,
.slot-drag-handle:focus-visible {
  border-color: var(--fighters-blue);
  color: var(--fighters-deep-blue);
  background: #ffffff;
}

.slot-drag-handle.is-disabled {
  opacity: 0.35;
  cursor: default;
}

.lineup-slot.is-locked {
  opacity: 0.72;
}

.lineup-slot.is-locked .slot-player {
  cursor: default;
}

.player-chip:disabled,
.position-button:disabled,
.slot-drag-handle:disabled,
.slot-clear:disabled {
  cursor: default;
  opacity: 0.58;
}

.slot-player {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-player .player-name {
  position: relative;
  padding-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-name--bat-right,
.player-name--bat-left,
.player-name--bat-switch {
  box-sizing: border-box;
  padding-left: 0;
}

.lineup-slot,
.saved-lineup-row {
  position: relative;
}

.lineup-slot:has(.player-name--bat-right)::before,
.lineup-slot:has(.player-name--bat-left)::before,
.lineup-slot:has(.player-name--bat-switch)::before,
.saved-lineup-row:has(.player-name--bat-right)::before,
.saved-lineup-row:has(.player-name--bat-left)::before,
.saved-lineup-row:has(.player-name--bat-switch)::before {
  position: absolute;
  z-index: 1;
  inset: 4px auto 4px 0;
  width: 4px;
  border-radius: 999px;
  content: "";
}

.lineup-slot:has(.player-name--bat-right)::before,
.saved-lineup-row:has(.player-name--bat-right)::before { background: #d64545; }
.lineup-slot:has(.player-name--bat-left)::before,
.saved-lineup-row:has(.player-name--bat-left)::before { background: #2878c8; }
.lineup-slot:has(.player-name--bat-switch)::before,
.saved-lineup-row:has(.player-name--bat-switch)::before { background: #2f9a62; }

.player-number {
  display: inline-block;
  margin-right: 4px;
  color: #5f7082;
  font-size: .82em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.slot-empty {
  color: var(--muted);
  font-weight: 700;
}

.position-control {
  position: relative;
  width: 40px;
  height: 40px;
}

.position-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(25, 54, 82, 0.2);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.position-button.is-empty {
  color: #6f7f8f;
  background: #f5f7f9;
}

.position-button.is-catcher {
  color: #155f9c;
  background: #f3f8fc;
}

.position-button.is-infielder {
  color: #775500;
  background: #fdf9e9;
}

.position-button.is-outfielder {
  color: #27723d;
  background: #f3f9f4;
}

.position-button.is-dh {
  color: #8a295f;
  background: #fcf6fa;
}

.position-button:hover,
.position-button:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 7px rgba(25, 54, 82, 0.24),
    0 0 0 3px rgba(0, 91, 172, 0.14);
  filter: brightness(1.025);
  transform: translateY(-1px);
}

.position-button[draggable="true"] {
  cursor: grab;
}

.position-button[draggable="true"]:active {
  cursor: grabbing;
}

.position-button[data-position-dnd="true"] {
  cursor: grab;
}

.position-button[data-position-dnd="true"]:active {
  cursor: grabbing;
}

.position-button.is-dragging {
  opacity: 0.62;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 7px 14px rgba(25, 54, 82, 0.28);
  transform: translateY(-2px) scale(1.04);
}

.position-button:active {
  box-shadow:
    inset 0 2px 3px rgba(25, 54, 82, 0.18),
    0 1px 2px rgba(25, 54, 82, 0.16);
  filter: brightness(0.98);
  transform: translateY(1px);
}

.result-position-tile {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(25, 54, 82, 0.18);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.result-position-tile.is-empty {
  color: #6f7f8f;
  background: #f5f7f9;
}

.result-position-tile.is-catcher {
  color: #155f9c;
  background: #f3f8fc;
}

.result-position-tile.is-infielder {
  color: #775500;
  background: #fdf9e9;
}

.result-position-tile.is-outfielder {
  color: #27723d;
  background: #f3f9f4;
}

.result-position-tile.is-dh {
  color: #8a295f;
  background: #fcf6fa;
}

.position-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: 5px;
  width: max-content;
  padding: 8px;
  border: 1px solid #9fb8cf;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(20, 46, 72, 0.2);
}

.position-menu.is-viewport-positioned {
  position: fixed;
  top: auto;
  right: auto;
  left: auto;
  box-sizing: border-box;
  transform: none;
  max-width: calc(100vw - 16px);
}

.position-menu.is-portal-position-menu {
  position: fixed;
  z-index: 1400;
  pointer-events: auto;
}

.position-menu-option {
  display: inline-grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: #f7fbff;
  font-weight: 900;
}

.position-menu-option:hover,
.position-menu-option:focus-visible {
  border-color: var(--fighters-blue);
  background: var(--fighters-sky);
}

.position-menu-option.is-used {
  border-color: #c3cad1;
  color: #788592;
  background: #edf1f4;
}

.position-menu-option.is-used:hover,
.position-menu-option.is-used:focus-visible {
  border-color: #8c9aa7;
  color: #5b6874;
  background: #e3e8ec;
}

.position-menu-option.is-current {
  border-color: #1269b0;
  color: #0e4f85;
  background: #d8ecff;
  box-shadow: inset 0 0 0 1px rgba(18, 105, 176, 0.18);
}

.slot-clear {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
}

.slot-clear:hover,
.slot-clear:focus-visible {
  color: #ffffff;
  background: #9f1c1c;
}

.player-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #c7d7e8;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-weight: 800;
  text-align: left;
  touch-action: pan-y;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.player-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.player-with-category,
.saved-lineup-player {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.player-position-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.player-detail-panel {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #b9daf8;
  border-radius: 8px;
  background: #ffffff;
}

.player-detail-panel > strong {
  color: var(--fighters-deep-blue);
  font-size: 1.05rem;
}

.player-detail-panel > span {
  color: var(--muted);
  font-weight: 800;
}

.player-detail-positions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.player-chip-detail-button {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid #c7d7e8;
  border-radius: 999px;
  color: var(--fighters-deep-blue);
  background: #f7fbff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
}

.player-chip-detail-button:hover,
.player-chip-detail-button:focus-visible {
  border-color: var(--fighters-gold);
  background: #fbf7e8;
  outline: 2px solid rgba(201, 151, 0, 0.24);
  outline-offset: 1px;
}

.player-detail-inline-button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid #c7d7e8;
  border-radius: 999px;
  color: var(--fighters-deep-blue);
  background: #f7fbff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
}

.player-detail-inline-button:hover,
.player-detail-inline-button:focus-visible {
  border-color: var(--fighters-gold);
  background: #fbf7e8;
  outline: 2px solid rgba(201, 151, 0, 0.24);
  outline-offset: 1px;
}

.player-detail-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 28, 45, 0.48);
}

.player-detail-dialog {
  display: grid;
  width: min(100%, 440px);
  max-height: min(720px, calc(100vh - 32px));
  gap: 18px;
  overflow: auto;
  padding: 24px;
  border: 1px solid #c7d7e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(15, 28, 45, 0.22);
}

.player-detail-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.player-detail-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.player-detail-header h2 {
  margin: 0;
  color: var(--fighters-deep-blue);
  font-size: 1.35rem;
}

.player-detail-close {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  background: #ffffff;
  font-size: 1.35rem;
  line-height: 1;
}

.player-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.player-detail-meta > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
}

.player-detail-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.player-detail-meta dd {
  margin: 3px 0 0;
  color: var(--text);
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.player-detail-positions {
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
}

.player-detail-positions strong {
  flex: 0 0 100%;
  margin-right: 0;
  color: var(--text);
}

.player-detail-notice {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--fighters-gold);
  color: var(--muted);
  background: #fbf7e8;
  line-height: 1.55;
}

.player-detail-links {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.player-detail-links a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid #c7d7e8;
  border-radius: 6px;
  color: var(--fighters-deep-blue);
  background: #f7fbff;
  font-weight: 900;
  text-decoration: none;
  min-height: 44px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.player-detail-links a:hover,
.player-detail-links a:focus-visible {
  border-color: var(--fighters-gold);
  background: #fbf7e8;
}

.player-detail-select {
  width: 100%;
  min-height: 46px;
}

@media (max-width: 767px) {
  .player-detail-overlay {
    align-items: end;
    padding: 8px;
  }

  .player-detail-dialog {
    width: min(100%, 440px);
    max-height: calc(100vh - 16px);
    gap: 16px;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }

  .player-detail-meta {
    gap: 8px;
  }

  .player-detail-meta > div {
    padding: 11px 12px;
  }

  .player-detail-links a {
    width: fit-content;
  }
}

/* Public prediction input: keep Design F colors without changing interaction geometry. */
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) {
  background: #eef5fb;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) .app-header {
  background: #164a79;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) .game-info-display {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(17, 104, 168, 0.72);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) .app-layout > .lineup-card:has(#predictionForm) {
  border-color: #b9cfe2;
  background: #f8fbfe;
  box-shadow: 0 10px 24px rgba(22, 74, 121, 0.1);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-panel,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-panel {
  border-color: #b9cfe2;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(22, 74, 121, 0.07);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-panel h3,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-list-heading h3 {
  color: #164a79;
  letter-spacing: 0.02em;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-panel h3,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-list-heading h3 {
  padding-inline-start: 10px;
  border-inline-start: 4px solid #d5a11e;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-slot {
  border-color: #b9cfe2;
  background: #f8fbfe;
  box-shadow: 0 2px 6px rgba(22, 74, 121, 0.08);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-slot.has-player {
  background: #ffffff;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-slot.is-active {
  border-color: #73a9d3;
  background: #eef7ff;
  box-shadow: inset 4px 0 0 #1168a8, 0 3px 8px rgba(22, 74, 121, 0.12);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-slot.is-drop-target {
  border-color: #d5a11e;
  background: #fff8e5;
  box-shadow: 0 0 0 3px rgba(213, 161, 30, 0.2), 0 4px 10px rgba(22, 74, 121, 0.12);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .slot-order {
  color: #ffffff;
  background: #1168a8;
  box-shadow: 0 2px 4px rgba(17, 104, 168, 0.22);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .slot-drag-handle {
  border-color: #b9cfe2;
  color: #315d84;
  background: #f2f7fb;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .slot-drag-handle:hover,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .slot-drag-handle:focus-visible {
  border-color: #73a9d3;
  color: #164a79;
  background: #eaf4ff;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 5px rgba(22, 74, 121, 0.14);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-button:hover,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 8px rgba(22, 74, 121, 0.18), 0 0 0 3px rgba(17, 104, 168, 0.14);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-menu {
  border-color: #9fc2df;
  box-shadow: 0 12px 26px rgba(22, 74, 121, 0.22);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-menu-option:hover,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-menu-option:focus-visible,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-menu-option.is-current {
  border-color: #1168a8;
  background: #eaf4ff;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .roster-filter {
  border-color: #b9cfe2;
  background: #edf5fb;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .roster-filter-button {
  color: #49647d;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .roster-filter-button:hover,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .roster-filter-button:focus-visible {
  border-color: #73a9d3;
  color: #164a79;
  background: #ffffff;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .roster-filter-button.is-selected {
  border-color: #1168a8;
  color: #ffffff;
  background: #1168a8;
  box-shadow: inset 0 -3px 0 #d5a11e, 0 2px 5px rgba(22, 74, 121, 0.16);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-chip {
  border-color: #b9cfe2;
  box-shadow: 0 2px 6px rgba(22, 74, 121, 0.06);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-chip:hover,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-chip:focus-visible {
  border-color: #73a9d3;
  background: #f1f8ff;
  box-shadow: 0 4px 9px rgba(22, 74, 121, 0.13);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-chip.is-used {
  border-color: #c9d8e6;
  background: #f0f4f8;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-detail-panel {
  border-color: #9fc2df;
  background: #f7fbff;
  box-shadow: 0 4px 10px rgba(22, 74, 121, 0.08);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionDeadlineStatus {
  border-color: #d5a11e;
  background: #fff9e8;
  color: #4c5f72;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionDeadlineStatus.is-closed {
  border-color: #b42318;
  background: #fff1f0;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #savePredictionButton {
  border-color: #1168a8;
  background: #1168a8;
  box-shadow: 0 4px 9px rgba(17, 104, 168, 0.2);
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #savePredictionButton:hover,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #savePredictionButton:focus-visible {
  border-color: #164a79;
  background: #164a79;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #resetPredictionButton {
  border-color: #9fc2df;
  color: #164a79;
  background: #ffffff;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #resetPredictionButton:hover,
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #resetPredictionButton:focus-visible {
  border-color: #1168a8;
  background: #eaf4ff;
}

@media (max-width: 768px) {
  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-panel,
  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-panel {
    box-shadow: 0 3px 9px rgba(22, 74, 121, 0.06);
  }

  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .player-chip:focus-visible,
  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-button:focus-visible,
  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .slot-clear:focus-visible {
    outline-offset: 2px;
  }
}

.player-category-badge,
.player-position-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}

.player-category-badge.is-catcher,
.player-position-badge.is-catcher {
  color: #155f9c;
  background: #f3f8fc;
}

.player-category-badge.is-infielder,
.player-position-badge.is-infielder {
  color: #775500;
  background: #fdf9e9;
}

.player-category-badge.is-outfielder,
.player-position-badge.is-outfielder {
  color: #27723d;
  background: #f3f9f4;
}

.player-category-badge.is-dh,
.player-position-badge.is-dh {
  color: #8a295f;
  background: #fcf6fa;
}

.player-chip:hover,
.player-chip:focus-visible {
  border-color: #6ca4d0;
  background: #f8fbff;
  box-shadow: 0 2px 6px rgba(0, 63, 125, 0.08);
  transform: translateY(-1px);
}

.player-chip:focus-visible {
  outline: 2px solid rgba(0, 91, 172, 0.38);
  outline-offset: 2px;
}

.player-chip.is-used {
  border-color: #dbe3ec;
  color: var(--muted);
  background: #f2f5f8;
}

.player-chip[draggable="true"] {
  cursor: grab;
}

.player-chip[draggable="true"]:active {
  cursor: grabbing;
}

.player-chip.is-dragging,
.lineup-slot.is-dragging {
  opacity: 0.48;
}

.summary-box {
  display: grid;
  gap: 12px;
}

.summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.lineup-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lineup-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: #f7fbff;
}

/* 保存済み予想は、元のブロック感を残したコンパクトなスタメン表として見せる。 */
body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary {
  width: min(100%, 470px);
  min-width: 0;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-image {
  display: grid;
  gap: 3px;
  width: min(100%, 240px);
  min-width: 0;
}

body:not(:has(.app-layout.is-admin-screen)) #editSavedPredictionButton,
body:not(:has(.app-layout.is-admin-screen)) #sharePredictionButton {
  display: none !important;
}

body:not(:has(.app-layout.is-admin-screen)) #saveSavedPredictionImageButton:not(.hidden) {
  display: inline-flex;
  width: min(100%, 240px);
  margin-top: 8px;
  justify-content: center;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-image-title {
  color: var(--fighters-deep-blue);
  font-size: 1rem;
  font-weight: 900;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-image-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #cfd7e2;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 42, 75, 0.08);
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-table-header {
  display: grid;
  grid-template-columns: 42px 40px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  margin: 6px 0 0;
  padding: 5px 4px;
  border: 1px solid var(--fighters-deep-blue);
  border-radius: 5px 5px 0 0;
  color: #ffffff;
  background: var(--fighters-deep-blue);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-table-header span:nth-child(2) {
  text-align: center;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary > .lineup-list {
  gap: 3px;
  padding: 4px 2px 4px 4px;
  border: 1px solid #cfd7e2;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: #f3f6fa;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary li.saved-lineup-row {
  grid-template-columns: 42px 40px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 4px 2px 4px 4px;
  border: 1px solid #d9dee7;
  border-radius: 5px;
  background: #f8fbff;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-lineup-order {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 4px;
  background: #edf3fa;
  color: var(--fighters-deep-blue);
  font-weight: 900;
  white-space: nowrap;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-lineup-detail {
  display: contents;
  min-width: 0;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-position-chip.result-position-tile {
  grid-column: 2;
  justify-self: center;
  width: 32px;
  height: 32px;
  box-shadow: 0 1px 2px rgba(16, 42, 75, 0.12);
  font-size: 0.82rem;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-lineup-name {
  grid-column: 3;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
  padding: 5px 4px 5px 8px;
  border: 1px solid #d9dee7;
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(16, 42, 75, 0.06);
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-lineup-player-cell {
  grid-column: 3;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-lineup-player-cell .saved-lineup-name {
  flex: 1 1 auto;
  min-width: 0;
}

body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .player-detail-inline-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 3px 7px;
}

body:not(:has(.app-layout.is-admin-screen)) #savedPrediction.summary-box {
  margin-bottom: -4px;
}

@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary {
    width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-image {
    width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-table-header {
    grid-template-columns: 40px 38px minmax(0, 1fr);
    gap: 6px;
    margin-top: 5px;
    padding: 5px 3px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary > .lineup-list {
    gap: 3px;
    padding: 4px 2px 4px 4px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary li.saved-lineup-row {
    grid-template-columns: 40px 38px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 2px 5px 4px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-position-chip.result-position-tile {
    width: 32px;
    height: 32px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .saved-lineup-summary .saved-lineup-name {
    padding: 5px 4px 5px 7px;
  }
}

.result-dashboard {
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
}

.result-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #b9cfe2;
  border-radius: 0;
  background: #eef5fb;
}

.result-canvas-text-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.result-hero {
  padding: 16px;
  border-radius: 7px;
  color: #ffffff;
  background: var(--fighters-deep-blue);
}

.result-label {
  margin-bottom: 4px;
  color: #d7ecff;
  font-size: 0.78rem;
  font-weight: 900;
}

.score-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
}

.score-total strong {
  font-size: clamp(3.4rem, 12vw, 5.5rem);
  font-weight: 950;
}

.score-total span {
  color: #eaf4ff;
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
}

.score-comment {
  display: inline-flex;
  margin: 10px 0 0;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--fighters-deep-blue);
  background: #ffffff;
  font-weight: 900;
}

.hit-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #b9cfe2;
  border-radius: 7px;
  background: #f7fbff;
}

.breakdown-item {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 0;
  border-right: 1px solid #b9cfe2;
  border-radius: 0;
  background: #f7fbff;
}

.breakdown-item:last-child {
  border-right: 0;
}

.breakdown-item span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.breakdown-item strong {
  color: var(--fighters-deep-blue);
  font-size: 1.2rem;
  line-height: 1.2;
}

.breakdown-item small {
  color: var(--muted);
  font-weight: 800;
}

.result-table-wrap {
  overflow-x: auto;
  border: 1px solid #b9cfe2;
  border-radius: 0;
  background: #ffffff;
}

.result-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.result-table th,
.result-table td {
  padding: 4px 5px;
  border: 1px solid #d3dfeb;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.result-table th {
  color: #ffffff;
  background: var(--fighters-blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.result-table .result-order-heading,
.result-table .result-point-heading {
  text-align: center;
}

.result-table .result-order-heading,
.result-table .result-order-cell {
  width: 46px;
}

.result-table .result-point-heading,
.result-table .result-point-cell {
  width: 44px;
}

.result-table .result-actual-group-heading,
.result-table .result-actual-group-cell {
  border-left: 1px solid #b9cfe2;
  border-right: 1px solid #d3dfeb;
}

/* 実スタメンと判定の境界は、badgeの余白に埋もれない表の罫線として常時示す。 */
.result-table .result-judgement-heading,
.result-table .result-judgements-cell {
  border-left: 1px solid #d3dfeb;
}

.result-table tbody td {
  padding: 0;
  background: #ffffff;
}

.result-table .result-player-cell {
  min-width: 0;
  white-space: normal;
}

.result-player-name {
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 6px 5px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
}

.result-player-card {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  vertical-align: middle;
}

.result-player-card .result-position-tile {
  flex: 0 0 30px;
  align-self: stretch;
  width: 30px;
  height: auto;
  min-height: 30px;
  border: 0;
  border-right: 1px solid #b9cfe2;
  border-radius: 0;
  box-shadow: none;
}

.result-player-card .result-player-name {
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
}

.result-table .result-order-cell strong {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: #ffffff;
  background: var(--fighters-blue);
  font-size: 1rem;
  font-weight: 900;
}

.result-table .result-judgements-cell {
  padding: 0;
  white-space: normal;
}

.result-judgement-stack {
  display: flex;
  flex-wrap: nowrap;
  min-width: max-content;
  justify-content: center;
  width: 100%;
  gap: 2px;
}

.result-judgement-stack .hit-badge {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 3px 5px;
  gap: 3px;
  border-radius: 7px;
  font-size: 0.62rem;
}

.result-table .result-point-cell {
  padding: 0;
  color: var(--fighters-deep-blue);
  text-align: center;
}

.result-table .result-point-cell strong {
  display: block;
  padding: 5px 3px;
  border: 1px solid #c2ceda;
  border-radius: 8px;
  background: #ffffff;
  font-size: 1rem;
}

.result-history {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.result-history-heading h3 {
  margin-bottom: 3px;
}

.result-history-heading p,
.result-history-message {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.result-history-no-participation {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.result-history-list {
  display: grid;
  gap: 7px;
}

.result-history-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.result-history-toggle {
  margin: 0;
}

.result-history-select-label {
  display: grid;
  min-width: min(100%, 360px);
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.result-history-select-label select {
  width: 100%;
}

.result-history-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.result-history-item:hover,
.result-history-item:focus-visible,
.result-history-item.is-selected {
  border-color: var(--fighters-blue);
  background: #f7fbff;
}

.result-history-item > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.result-history-item strong,
.result-history-item b {
  color: var(--fighters-deep-blue);
  font-size: 0.9rem;
}

.result-history-item span span {
  overflow-wrap: anywhere;
  font-size: 0.86rem;
  font-weight: 800;
}

.result-history-item small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.result-history-item > b {
  flex: 0 0 auto;
  white-space: nowrap;
}

.result-selected-game {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.result-table .result-judgement-cell {
  min-width: 80px;
}

.result-table tr:last-child td {
  border-bottom: 0;
}

/* セル内のbadge/cardに左右されず、各行の横罫線を表全幅で揃える。 */
.result-table tbody tr > td {
  border-top: 1px solid #d3dfeb;
}

.result-table tbody tr:last-child > td {
  border-bottom: 1px solid #d3dfeb;
}

.hit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 62px;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

.hit-mark {
  font-size: 0.9rem;
  line-height: 1;
}

.hit-badge.is-hit {
  color: #4a3500;
  background: #f0c766;
  border: 1px solid #d4aa52;
}

.hit-badge.is-miss {
  color: #55687b;
  background: #f1f4f7;
  border: 1px solid #d9e2e9;
}

.hidden {
  display: none;
}

.auto-approve-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  cursor: pointer;
}

.auto-approve-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--fighters-blue);
}

@media (min-width: 760px) {
  .app-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .player-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    padding: 24px;
  }

  .result-card {
    grid-column: 1 / -1;
  }

  .ranking-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 759px) {
  .admin-release-readiness-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-game-progress-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-game-progress-list {
    grid-template-columns: 1fr;
  }

  .admin-workflow-logs-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-game-identity-repairs-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .game-identity-repair-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .game-identity-repair-actions button {
    width: 100%;
  }

  .game-identity-repair-coverage-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-workflow-log-filters {
    grid-template-columns: 1fr;
  }

  .workflow-log-entry-main {
    grid-template-columns: 1fr auto;
  }

  .workflow-log-status {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .app-header {
    overflow-x: clip;
  }

  body {
    background: #f7fbff;
  }

  .container {
    width: min(100% - 20px, 960px);
  }

  .header-inner {
    padding: 24px 0 28px;
  }

  .header-logo {
    width: calc(100vw - 20px);
    max-width: none;
    margin-bottom: 12px;
  }

  .app-layout {
    gap: 14px;
    padding-top: 14px;
  }

  .card {
    padding: 16px;
  }

  .lineup-builder {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lineup-panel,
  .player-panel {
    padding: 10px;
  }

  .parser-actions {
    grid-template-columns: 1fr;
  }

  .admin-server-scoring-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-server-scoring-actions button {
    width: 100%;
  }

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

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

  .roster-filter {
    grid-template-columns: 1fr;
  }

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

  .hit-breakdown {
    grid-template-columns: 1fr;
  }

  .player-list {
    max-height: 260px;
  }

  .primary-button,
  .secondary-button,
  .danger-button {
    min-height: 52px;
  }

  .admin-details summary,
  .admin-test-details summary {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .admin-card {
    margin: 0 8px 8px;
  }

  .probable-starter-admin-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .probable-starter-admin-heading .compact-button {
    width: 100%;
  }

  .ranking-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .ranking-tabs {
    width: 100%;
  }

  .ranking-tab {
    min-height: 42px;
  }

  .ranking-month-controls {
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr);
  }

}

@media (max-width: 430px) {
  .container {
    width: min(100% - 22px, 960px);
  }

  .card {
    padding: 16px;
  }

  .probable-starter-grid {
    grid-template-columns: 1fr;
  }

  .lineup-builder {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lineup-panel,
  .player-panel {
    padding: 8px;
  }

  input,
  select,
  textarea {
    min-height: 50px;
  }

  .lineup-slot {
    grid-template-columns: 26px 42px minmax(0, 1fr) 40px 32px;
    gap: 6px;
    padding: 6px;
  }

  .slot-order {
    min-height: 32px;
    font-size: 0.9rem;
  }

  .slot-player,
  .player-chip,
  .position-button {
    font-size: 0.9rem;
  }

  .player-chip {
    min-height: 42px;
    padding: 8px;
  }

  .slot-clear {
    width: 28px;
    height: 28px;
  }

  .slot-drag-handle {
    width: 26px;
    height: 34px;
  }

  .score-total {
    flex-wrap: wrap;
  }

  .daily-best-nine-list li {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .daily-best-nine-badge {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .ranking-entry {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .ranking-entry-main p {
    font-size: 0.82rem;
  }

  .result-table {
    min-width: 520px;
  }

  .result-table .result-player-cell {
    min-width: 0;
  }

  .result-player-name {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 6px 4px;
    font-size: 0.84rem;
  }
}

/* 通常画面の案内と操作導線 */
.hero-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 920px);
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(0, 44, 89, 0.42);
}

.hero-copy {
  min-width: 0;
}

.hero-kicker {
  margin-bottom: 4px;
  color: #a8d8ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hero-panel h1,
.hero-panel p {
  margin-top: 0;
}

.hero-panel h1 {
  margin-bottom: 5px;
  color: #ffffff;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.3;
}

.hero-panel .hero-copy > p:last-child {
  margin-bottom: 0;
  color: #e5f2ff;
  font-size: 0.88rem;
}

.hero-cta {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 9px 16px;
  border: 1px solid #8fc7ff;
  border-radius: 7px;
  color: #ffffff;
  background: var(--fighters-blue);
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background: #1476c7;
}

.how-to-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #cfe1f1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 63, 125, 0.08);
}

.how-to-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.how-to-heading h2,
.how-to-heading p {
  margin-bottom: 0;
}

.how-to-heading h2 {
  color: var(--fighters-deep-blue);
}

.how-to-heading > p {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.how-to-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-to-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d7e5f2;
  border-radius: 7px;
  background: #f7fbff;
}

.how-to-steps li > span {
  display: grid;
  grid-row: span 2;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--fighters-blue);
  font-weight: 950;
}

.how-to-steps strong {
  color: var(--fighters-deep-blue);
  font-size: 0.88rem;
}

.how-to-steps small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.prediction-deadline-status {
  display: grid;
  gap: 8px;
  min-height: 1.5em;
  padding: 10px 12px;
  border: 1px solid #cfe1f1;
  border-radius: 7px;
  background: #f7fbff;
}

.prediction-deadline-status.is-closed,
.prediction-deadline-status.is-unavailable {
  border-color: #f0c9c5;
  background: var(--error-bg);
}

.prediction-deadline-status.is-soon {
  border-color: #e1b95b;
  color: #7a4d00;
  background: #fff9e8;
}

.deadline-heading,
.deadline-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.deadline-heading {
  justify-content: space-between;
}

.deadline-heading time {
  font-size: 1rem;
  font-weight: 950;
}

.deadline-countdown {
  color: #536a82;
  font-size: 0.8rem;
}

.public-game-selection-meta {
  min-height: 1.3em;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.score-insights {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.score-insights h3 {
  margin: 0;
}

.score-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.score-insights-grid > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #d7e5f2;
  border-radius: 7px;
  background: #f7fbff;
}

.score-insights-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.score-insights-grid strong {
  color: var(--fighters-deep-blue);
  font-size: 0.84rem;
}

.score-insights-notice {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.ranking-entry.is-self {
  border-color: #83b8e7;
  border-left: 4px solid var(--fighters-blue);
  background: #f2f8ff;
  box-shadow: 0 5px 14px rgba(0, 91, 172, 0.12);
}

/* 遊び方・採点ルールページ */
.guide-page {
  min-height: 100vh;
  color: var(--text);
  background: var(--page-bg);
}

.guide-header {
  padding-bottom: 30px;
}

.guide-header-inner {
  display: grid;
  gap: 10px;
}

.guide-brand {
  display: block;
  width: min(100%, 620px);
  margin: 0 auto 8px;
}

.guide-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-header h1,
.guide-header p {
  margin: 0;
}

.guide-header h1 {
  color: #ffffff;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.guide-header > .container > p:last-child {
  color: #d8e9f8;
}

.guide-layout {
  display: grid;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 48px;
}

.guide-back-link,
.guide-link {
  color: var(--fighters-blue);
  font-weight: 850;
  text-decoration: none;
}

.guide-back-link {
  justify-self: start;
  padding: 8px 0;
}

.guide-link {
  display: inline-block;
  padding: 7px 11px;
  border: 1px solid #a9c8e3;
  border-radius: 7px;
  background: #f7fbff;
  font-size: 0.84rem;
}

.guide-back-link:hover,
.guide-back-link:focus-visible,
.guide-link:hover,
.guide-link:focus-visible {
  color: var(--fighters-deep-blue);
  text-decoration: underline;
}

.guide-section {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(25, 54, 82, 0.06);
}

.guide-section h2,
.guide-section p {
  margin: 0;
}

.guide-section h2 {
  color: var(--fighters-deep-blue);
  font-size: 1.25rem;
}

.guide-section p,
.guide-list,
.guide-definitions {
  line-height: 1.8;
}

.guide-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-steps li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid #d7e5f2;
  border-radius: 7px;
  background: #f7fbff;
}

.guide-steps li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--fighters-blue);
  font-weight: 900;
}

.guide-steps strong,
.guide-steps small {
  display: block;
}

.guide-steps strong {
  color: var(--fighters-deep-blue);
}

.guide-steps small {
  color: var(--muted);
  line-height: 1.5;
}

.guide-list {
  margin: 0;
  padding-left: 1.3em;
}

.guide-note {
  padding: 10px 12px;
  border-left: 3px solid #a9c8e3;
  color: var(--muted);
  background: #f7fbff;
  font-size: 0.9rem;
}

.guide-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.guide-score-grid > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #d7e5f2;
  border-radius: 7px;
  background: #f7fbff;
}

.guide-score-grid strong {
  color: var(--fighters-deep-blue);
  font-size: 1.05rem;
}

.guide-score-grid span {
  font-weight: 850;
}

.guide-score-grid small {
  color: var(--muted);
  line-height: 1.5;
}

.guide-score-grid b {
  color: var(--fighters-blue);
}

.guide-total-score {
  color: var(--fighters-deep-blue);
}

.guide-definitions {
  display: grid;
  gap: 8px;
  margin: 0;
}

.guide-definitions div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2ebf3;
}

.guide-definitions dt {
  color: var(--fighters-deep-blue);
  font-weight: 900;
}

.guide-definitions dd {
  margin: 0;
}

.guide-caution {
  background: #fbfdff;
}

.admin-test-game-form,
.admin-test-game-detail {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.admin-test-game-form input,
.admin-test-game-form textarea,
.admin-test-game-detail input,
.admin-test-game-detail textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.admin-test-game-form label,
.admin-test-game-detail > label {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-test-games-list {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.admin-test-game-list-heading,
.admin-test-game-detail-heading,
.admin-test-game-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-test-game-list-heading {
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-test-game-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.admin-test-game-row:hover,
.admin-test-game-row:focus-visible,
.admin-test-game-row.is-selected {
  border-color: var(--fighters-blue);
  background: #f5faff;
}

.test-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid #d6b060;
  border-radius: 5px;
  background: #fff8e8;
  color: #795715;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.admin-test-game-row-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-test-game-row-main small,
.admin-test-game-detail-heading p {
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-test-game-row-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.admin-test-game-detail {
  padding: 12px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  background: #f8fbff;
}

.admin-test-game-detail-heading {
  justify-content: space-between;
}

.admin-test-game-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-test-game-inline input {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-test-game-detail-heading h4 {
  margin: 6px 0 2px;
  color: var(--fighters-deep-blue);
}

.admin-test-game-detail-heading p {
  margin: 0;
}

.admin-test-game-state {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 2px;
}

.admin-test-game-state div {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #ffffff;
}

.admin-test-game-state dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.admin-test-game-state dd {
  margin: 3px 0 0;
  font-size: 0.8rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-test-game-empty,
.admin-test-game-preview {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-test-game-results {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.admin-test-game-results h5 {
  margin: 0 0 7px;
  color: var(--fighters-deep-blue);
}

.admin-test-game-results p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-test-game-results ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-test-game-results li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #ffffff;
}

.admin-test-game-results li span {
  font-weight: 800;
}

.admin-test-game-results li small {
  margin-left: auto;
  color: var(--muted);
}

.guide-back-link-bottom {
  margin-top: 4px;
}

.site-footer {
  border-top: 1px solid #d7e5f2;
  background: #eef5fb;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.site-footer .site-disclaimer {
  flex: 1 1 100%;
  max-width: 72rem;
  line-height: 1.7;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.site-footer a {
  color: var(--fighters-deep-blue);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--fighters-blue);
  text-decoration: underline;
}

@media (max-width: 759px) {
  .guide-header {
    padding-bottom: 22px;
  }

  .guide-layout {
    padding-top: 18px;
  }

  .guide-section {
    padding: 18px;
  }

  .site-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-steps,
  .guide-score-grid {
    grid-template-columns: 1fr;
  }

  .guide-definitions div {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
  }

  .admin-test-game-state {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-test-game-row {
    align-items: flex-start;
  }
}

@media (max-width: 759px) {
  .hero-panel,
  .how-to-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-cta {
    width: 100%;
  }

  .how-to-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .score-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* 通常画面: 野球のオーダー表として読める、情報優先のレイアウト */
body:not(:has(.app-layout.is-admin-screen)) {
  background: #f3f5f7;
}

body:not(:has(.app-layout.is-admin-screen)) .header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo auth"
    "game game"
    "starter starter"
    "hero hero"
    "lead lead";
  gap: 10px 24px;
  padding-top: 22px;
  padding-bottom: 26px;
}

body:not(:has(.app-layout.is-admin-screen)) .header-logo {
  grid-area: logo;
  width: min(100%, 300px);
  margin: 0;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel {
  grid-area: auth;
  align-self: start;
  justify-self: end;
  width: auto;
  max-width: 360px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel .auth-state {
  justify-content: flex-end;
  color: #d9e5f2;
  font-size: 0.76rem;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel .auth-button {
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 0.74rem;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel .achievements-panel {
  margin-top: 6px;
  padding-top: 6px;
}

body:not(:has(.app-layout.is-admin-screen)) .game-info-display {
  grid-area: game;
  justify-content: center;
  text-align: center;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card {
  grid-area: starter;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-panel {
  grid-area: hero;
}

body:not(:has(.app-layout.is-admin-screen)) .lead {
  grid-area: lead;
  max-width: 760px;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid rgba(168, 216, 255, 0.5);
  color: #c5d6e8;
  font-size: 0.84rem;
}

body:not(:has(.app-layout.is-admin-screen)) .game-info-display {
  width: 100%;
  min-height: 70px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  color: #ffffff;
  background: #0b2c5c;
  font-size: clamp(1.35rem, 3.3vw, 2.15rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

body:not(:has(.app-layout.is-admin-screen)) .game-info-display.hidden,
body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card.hidden {
  display: none;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card {
  width: 100%;
  min-height: 0;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 3px;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-team {
  padding: 7px 9px;
  border-radius: 2px;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-panel {
  width: 100%;
  margin-top: 0;
  padding: 20px 22px;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: #102f5c;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-panel h1 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

body:not(:has(.app-layout.is-admin-screen)) .hero-cta {
  min-width: 250px;
  border-color: #8fc7ff;
  border-radius: 4px;
  background: var(--fighters-blue);
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-cta:hover,
body:not(:has(.app-layout.is-admin-screen)) .hero-cta:focus-visible {
  background: #1476c7;
}

.app-layout:not(.is-admin-screen) {
  gap: 22px;
  padding-top: 20px;
}

.app-layout:not(.is-admin-screen) > .card {
  border-color: #d6dde5;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(21, 32, 51, 0.045);
}

.app-layout:not(.is-admin-screen) > .how-to-panel {
  border-color: #d6dde5;
  border-left: 3px solid var(--fighters-blue);
  border-radius: 4px;
  box-shadow: none;
}

.app-layout:not(.is-admin-screen) .how-to-steps {
  gap: 0;
  border-top: 1px solid #e1e6eb;
}

.app-layout:not(.is-admin-screen) .how-to-steps li {
  border: 0;
  border-bottom: 1px solid #e1e6eb;
  border-radius: 0;
  background: transparent;
}

.app-layout:not(.is-admin-screen) .how-to-steps li + li {
  border-left: 1px solid #e1e6eb;
}

.app-layout:not(.is-admin-screen) .lineup-card {
  border-top: 3px solid var(--fighters-deep-blue);
}

.app-layout:not(.is-admin-screen) .lineup-builder {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.app-layout:not(.is-admin-screen) #predictionEditor {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.app-layout:not(.is-admin-screen) .lineup-panel,
.app-layout:not(.is-admin-screen) .player-panel {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.app-layout:not(.is-admin-screen) .player-panel {
  padding-left: 20px;
  border-left: 1px solid #dfe5eb;
}

.app-layout:not(.is-admin-screen) .lineup-panel h3,
.app-layout:not(.is-admin-screen) .player-list-heading {
  margin-bottom: 10px;
}

.app-layout:not(.is-admin-screen) .slot-list {
  gap: 0;
  border-top: 1px solid #dfe5eb;
}

.app-layout:not(.is-admin-screen) .lineup-slot {
  grid-template-columns: 34px 46px minmax(0, 1fr) 42px 34px;
  min-height: 52px;
  padding: 7px 4px;
  border: 0;
  border-bottom: 1px solid #dfe5eb;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  transform: none;
  transition: background-color 0.15s ease, outline-color 0.15s ease;
}

.app-layout:not(.is-admin-screen) .lineup-slot:nth-child(even) {
  background: #fbfcfd;
}

.app-layout:not(.is-admin-screen) .lineup-slot.is-category-catcher,
.app-layout:not(.is-admin-screen) .lineup-slot.is-category-infielder,
.app-layout:not(.is-admin-screen) .lineup-slot.is-category-outfielder,
.app-layout:not(.is-admin-screen) .lineup-slot.is-category-dh {
  border: 0;
  border-bottom: 1px solid #dfe5eb;
  background: inherit;
}

.app-layout:not(.is-admin-screen) .lineup-slot.is-active {
  border-color: #dfe5eb;
  background: #eef6fc;
  box-shadow: inset 3px 0 0 var(--fighters-blue);
  outline: 1px solid #c3dced;
  outline-offset: -1px;
}

.app-layout:not(.is-admin-screen) .lineup-slot.is-drop-target {
  border-color: #d9c177;
  background: #fffaf0;
  box-shadow: none;
  transform: none;
}

.app-layout:not(.is-admin-screen) .slot-order {
  min-height: 38px;
  border-radius: 2px;
  color: var(--fighters-deep-blue);
  background: #eef2f5;
  font-size: 1.04rem;
}

.app-layout:not(.is-admin-screen) .slot-player {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.35;
}

.app-layout:not(.is-admin-screen) .slot-player .player-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.app-layout:not(.is-admin-screen) .position-button {
  border-width: 1px;
  border-radius: 4px;
  box-shadow: none;
}

.app-layout:not(.is-admin-screen) .position-button:hover,
.app-layout:not(.is-admin-screen) .position-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 91, 172, 0.12);
  transform: none;
}

.app-layout:not(.is-admin-screen) .slot-clear {
  border-radius: 3px;
}

.app-layout:not(.is-admin-screen) .roster-filter {
  margin: 8px 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #dfe5eb;
  border-radius: 0;
  background: transparent;
}

.app-layout:not(.is-admin-screen) .roster-filter-button {
  border-radius: 2px;
}

.app-layout:not(.is-admin-screen) .player-category-legend {
  margin-top: 8px;
}

.app-layout:not(.is-admin-screen) .player-list {
  gap: 0;
  border-top: 1px solid #dfe5eb;
}

.app-layout:not(.is-admin-screen) .player-chip {
  min-height: 48px;
  padding: 8px 10px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.app-layout:not(.is-admin-screen) .player-chip.is-category-catcher,
.app-layout:not(.is-admin-screen) .player-chip.is-category-infielder,
.app-layout:not(.is-admin-screen) .player-chip.is-category-outfielder,
.app-layout:not(.is-admin-screen) .player-chip.is-category-dh {
  border-width: 0 0 1px;
  border-color: #dfe5eb;
  background: #ffffff;
}

.app-layout:not(.is-admin-screen) .player-chip:hover,
.app-layout:not(.is-admin-screen) .player-chip:focus-visible {
  border-color: #a8c8e1;
  background: #f5f9fc;
  box-shadow: none;
  transform: none;
}

.app-layout:not(.is-admin-screen) .primary-button {
  width: min(100%, 300px);
  margin-top: 18px;
}

.app-layout:not(.is-admin-screen) #resetPredictionButton,
.app-layout:not(.is-admin-screen) #editSavedPredictionButton,
.app-layout:not(.is-admin-screen) #sharePredictionButton,
.app-layout:not(.is-admin-screen) #saveSavedPredictionImageButton {
  width: auto;
  min-width: 150px;
}

.app-layout:not(.is-admin-screen) .prediction-deadline-status {
  border-radius: 3px;
}

.app-layout:not(.is-admin-screen) .result-card {
  border-top: 3px solid var(--fighters-blue);
}

.app-layout:not(.is-admin-screen) .result-hero {
  padding: 18px 20px;
  border-radius: 3px;
  background: #0b2c5c;
}

.app-layout:not(.is-admin-screen) .hit-breakdown {
  gap: 0;
  border-top: 1px solid #dfe5eb;
}

.app-layout:not(.is-admin-screen) .breakdown-item {
  padding: 12px 14px;
  border-width: 0 1px 1px 0;
  border-radius: 0;
  background: #ffffff;
}

.app-layout:not(.is-admin-screen) .breakdown-item:last-child {
  border-right: 0;
}

@media (max-width: 759px) {
  .app-layout:not(.is-admin-screen) {
    gap: 16px;
  }

  .app-layout:not(.is-admin-screen) .lineup-builder {
    gap: 18px;
  }

  .app-layout:not(.is-admin-screen) .player-panel {
    padding: 18px 0 0;
    border-top: 1px solid #dfe5eb;
    border-left: 0;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot {
    grid-template-columns: 32px 44px minmax(0, 1fr) 42px 34px;
  }

  .app-layout:not(.is-admin-screen) .primary-button,
  .app-layout:not(.is-admin-screen) #resetPredictionButton,
  .app-layout:not(.is-admin-screen) #editSavedPredictionButton,
  .app-layout:not(.is-admin-screen) #sharePredictionButton,
  .app-layout:not(.is-admin-screen) #saveSavedPredictionImageButton {
    width: 100%;
  }

  .app-layout:not(.is-admin-screen) .breakdown-item {
    border-right: 0;
  }
}

@media (max-width: 430px) {
  .app-layout:not(.is-admin-screen) .lineup-slot {
    grid-template-columns: 28px 40px minmax(0, 1fr) 40px 32px;
    gap: 6px;
    padding: 6px 2px;
  }

  .app-layout:not(.is-admin-screen) .slot-order {
    min-height: 34px;
    font-size: 0.96rem;
  }

  .app-layout:not(.is-admin-screen) .slot-player,
  .app-layout:not(.is-admin-screen) .player-chip {
    font-size: 0.92rem;
  }
}

@media (max-width: 759px) {
  body:not(:has(.app-layout.is-admin-screen)) .header-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "game"
      "starter"
      "hero"
      "lead"
      "auth";
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 20px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .header-inner > * {
    min-width: 0;
    max-width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lead {
    overflow-wrap: anywhere;
  }

  body:not(:has(.app-layout.is-admin-screen)) .header-logo {
    width: min(100%, 250px);
  }

  body:not(:has(.app-layout.is-admin-screen)) #authPanel {
    justify-self: stretch;
    max-width: none;
  }

  body:not(:has(.app-layout.is-admin-screen)) #authPanel .auth-state {
    justify-content: space-between;
  }

  body:not(:has(.app-layout.is-admin-screen)) .game-info-display {
    min-height: 62px;
    padding: 12px 14px;
    font-size: clamp(1.25rem, 6vw, 1.7rem);
  }

  body:not(:has(.app-layout.is-admin-screen)) .hero-panel {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .hero-cta {
    width: 100%;
    min-width: 0;
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-heading {
    min-width: 0;
    align-items: flex-start;
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-heading > * {
    min-width: 0;
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-heading a {
    max-width: 45%;
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  body:not(:has(.app-layout.is-admin-screen)) .header-logo {
    width: min(100%, 220px);
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-grid {
    grid-template-columns: 1fr;
  }

  body:not(:has(.app-layout.is-admin-screen)) .game-info-display {
    font-size: 1.18rem;
  }
}

/* 通常画面のスマホ操作: 管理画面のオーダー表には適用しない */
.app-layout:not(.is-admin-screen),
.app-layout:not(.is-admin-screen) > .card,
.app-layout:not(.is-admin-screen) .lineup-card,
.app-layout:not(.is-admin-screen) .lineup-builder,
.app-layout:not(.is-admin-screen) .lineup-panel,
.app-layout:not(.is-admin-screen) .player-panel {
  min-width: 0;
  max-width: 100%;
}

.app-layout:not(.is-admin-screen) .roster-filter-button {
  min-height: 44px;
  font-weight: 800;
  touch-action: manipulation;
}

.app-layout:not(.is-admin-screen) .roster-filter-button.is-selected {
  border-color: var(--fighters-blue);
  color: var(--fighters-deep-blue);
  font-weight: 950;
  box-shadow: inset 0 -2px 0 var(--fighters-blue), 0 1px 3px rgba(25, 54, 82, 0.12);
}

@media (max-width: 768px) {
  .app-layout:not(.is-admin-screen) .lineup-builder {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 18px;
  }

  .app-layout:not(.is-admin-screen) .lineup-panel,
  .app-layout:not(.is-admin-screen) .player-panel,
  .app-layout:not(.is-admin-screen) .slot-list,
  .app-layout:not(.is-admin-screen) .player-list {
    width: 100%;
    min-width: 0;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot {
    grid-template-columns: 32px 44px minmax(0, 1fr) 42px minmax(88px, auto);
    width: 100%;
    min-width: 0;
  }

  .app-layout:not(.is-admin-screen) .slot-player,
  .app-layout:not(.is-admin-screen) .player-chip,
  .app-layout:not(.is-admin-screen) .roster-filter-button {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .app-layout:not(.is-admin-screen) .player-chip,
  .app-layout:not(.is-admin-screen) .position-button {
    touch-action: manipulation;
  }
}

@media (max-width: 430px) {
  .app-layout:not(.is-admin-screen) .lineup-slot {
    grid-template-columns: 28px 40px minmax(0, 1fr) 40px minmax(88px, auto);
    gap: 6px;
    padding: 6px 2px;
  }

}

/* スマホの通常画面は、縦長フォームではなくゲームのオーダー編集画面として扱う。 */
.app-layout:not(.is-admin-screen) .lineup-slot,
.app-layout:not(.is-admin-screen) .player-chip {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.app-layout:not(.is-admin-screen) .lineup-slot *,
.app-layout:not(.is-admin-screen) .player-chip * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.app-layout:not(.is-admin-screen) .lineup-slot {
  cursor: grab;
}

.app-layout:not(.is-admin-screen) .lineup-slot:active {
  cursor: grabbing;
}

.app-layout:not(.is-admin-screen) .lineup-slot.is-pressing,
.app-layout:not(.is-admin-screen) .player-chip.is-pressing {
  border-color: var(--fighters-gold);
  background: #fffaf0;
  box-shadow: 0 0 0 2px rgba(213, 161, 30, 0.18);
}

.app-layout:not(.is-admin-screen) .lineup-slot.is-dragging,
.app-layout:not(.is-admin-screen) .player-chip.is-dragging {
  opacity: 0.52;
  box-shadow: 0 8px 18px rgba(25, 54, 82, 0.22);
  transform: translateY(-2px) scale(1.01);
}

@media (max-width: 768px) {
  .app-layout:not(.is-admin-screen) .lineup-builder {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .app-layout:not(.is-admin-screen) .game-day-notice-status {
    min-height: 28px;
    max-height: 42px;
    margin: 4px 0 6px;
    padding: 5px 7px;
    overflow: auto;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .app-layout:not(.is-admin-screen) .lineup-panel,
  .app-layout:not(.is-admin-screen) .player-panel {
    padding: 8px;
    border: 1px solid #dfe5eb;
    border-radius: 6px;
    background: #ffffff;
    box-sizing: border-box;
  }

  .app-layout:not(.is-admin-screen) .player-panel {
    border-top: 1px solid #dfe5eb;
    border-left: 1px solid #dfe5eb;
  }

  .app-layout:not(.is-admin-screen) .lineup-panel h3,
  .app-layout:not(.is-admin-screen) .player-list-heading {
    min-height: 18px;
    margin: 0 0 6px;
    align-items: center;
    font-size: 0.82rem;
  }

  .app-layout:not(.is-admin-screen) .slot-list,
  .app-layout:not(.is-admin-screen) .player-list {
    gap: 3px;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot {
    grid-template-columns: 25px minmax(0, 1fr) 28px 18px;
    min-height: 40px;
    gap: 3px;
    padding: 4px 3px;
    border-radius: 5px;
  }

  .app-layout:not(.is-admin-screen) .slot-order {
    min-height: 30px;
    border-radius: 4px;
    font-size: 0.76rem;
  }

  .app-layout:not(.is-admin-screen) .slot-player {
    font-size: 0.74rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .app-layout:not(.is-admin-screen) .position-control,
  .app-layout:not(.is-admin-screen) .position-button {
    width: 28px;
    height: 30px;
  }

  .app-layout:not(.is-admin-screen) .position-button {
    border-radius: 4px;
    font-size: 0.78rem;
  }

  .app-layout:not(.is-admin-screen) .slot-clear {
    width: 18px;
    min-width: 18px;
    height: 28px;
    padding: 0;
    font-size: 0.9rem;
  }

  .app-layout:not(.is-admin-screen) .roster-filter {
    gap: 2px;
    margin: 6px 0;
  }

  .app-layout:not(.is-admin-screen) .roster-filter-button {
    min-height: 34px;
    padding: 4px 2px;
    font-size: 0.68rem;
    line-height: 1.1;
  }

  .app-layout:not(.is-admin-screen) .player-category-legend {
    display: none;
  }

  .app-layout:not(.is-admin-screen) .player-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    padding-right: 0;
    scrollbar-width: auto;
  }

  .app-layout:not(.is-admin-screen) .player-chip {
    min-height: 34px;
    padding: 5px 6px;
    gap: 4px;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: left;
  }

  .app-layout:not(.is-admin-screen) .player-chip .player-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .app-layout:not(.is-admin-screen) .lineup-builder {
    gap: 5px;
  }

  .app-layout:not(.is-admin-screen) .lineup-panel,
  .app-layout:not(.is-admin-screen) .player-panel {
    padding: 6px;
  }

  .app-layout:not(.is-admin-screen) .game-day-notice-status {
    max-height: 36px;
    margin-bottom: 5px;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot {
    grid-template-columns: 22px minmax(0, 1fr) 26px 16px;
    gap: 2px;
    padding: 3px 2px;
  }

  .app-layout:not(.is-admin-screen) .slot-order {
    min-height: 28px;
    font-size: 0.7rem;
  }

  .app-layout:not(.is-admin-screen) .slot-player,
  .app-layout:not(.is-admin-screen) .player-chip {
    font-size: 0.7rem;
  }

  .app-layout:not(.is-admin-screen) .player-chip {
    min-height: 32px;
    padding: 4px 5px;
  }

  .app-layout:not(.is-admin-screen) .position-control,
  .app-layout:not(.is-admin-screen) .position-button {
    width: 26px;
    height: 28px;
  }

  .app-layout:not(.is-admin-screen) .slot-clear {
    width: 16px;
    min-width: 16px;
  }
}

/* Desktop lineup editor: use the available width without changing mobile behavior. */
@media (min-width: 1000px) {
  body:not(:has(.app-layout.is-admin-screen)) .container {
    width: calc(100% - 48px);
    max-width: 75rem;
  }

  .app-layout:not(.is-admin-screen) .lineup-card {
    width: 100%;
    justify-self: stretch;
  }

  .app-layout:not(.is-admin-screen) #predictionForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
  }

  .app-layout:not(.is-admin-screen) #predictionForm > #gameDayNoticeStatus,
  .app-layout:not(.is-admin-screen) #predictionForm > .public-game-selection-meta,
  .app-layout:not(.is-admin-screen) #predictionForm > #predictionEditor,
  .app-layout:not(.is-admin-screen) #predictionForm > .message,
  .app-layout:not(.is-admin-screen) #predictionForm > .prediction-deadline-status {
    grid-column: 1 / -1;
  }

  .app-layout:not(.is-admin-screen) .lineup-builder {
    grid-template-columns: minmax(380px, 480px) minmax(320px, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .app-layout:not(.is-admin-screen) .lineup-panel,
  .app-layout:not(.is-admin-screen) .player-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid #d7e1eb;
    border-radius: 8px;
    background: #ffffff;
  }

  .app-layout:not(.is-admin-screen) .player-panel {
    background: #f8fbfe;
  }

  .app-layout:not(.is-admin-screen) .lineup-panel h3,
  .app-layout:not(.is-admin-screen) .player-list-heading {
    margin-bottom: 12px;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot {
    grid-template-columns: 30px 54px minmax(180px, 1fr) 44px 38px;
    min-height: 56px;
    gap: 8px;
    padding: 8px 10px;
  }

  .app-layout:not(.is-admin-screen) .slot-player,
  .app-layout:not(.is-admin-screen) .slot-player .player-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-layout:not(.is-admin-screen) .slot-player {
    padding-inline-start: 10px;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] {
    grid-template-columns: 56px minmax(0, 1fr) 56px 44px;
    column-gap: 12px;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .slot-player {
    width: auto;
    max-width: none;
    min-width: 0;
    padding-inline-start: 12px;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .slot-order,
  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .position-control,
  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .position-button {
    width: 56px;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .position-control,
  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .position-button {
    justify-self: end;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .slot-clear {
    width: 44px;
    min-width: 44px;
    justify-self: end;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .slot-order {
    grid-column: 1;
    justify-self: start;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .position-control {
    grid-column: 2;
    justify-self: center;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .slot-player {
    grid-column: 3;
  }

  .app-layout:not(.is-admin-screen) .lineup-slot[data-picker="prediction"] .slot-clear {
    grid-column: 4;
  }

  .app-layout:not(.is-admin-screen) #predictionLineup {
    gap: 6px;
    border-top: 0;
  }

  .app-layout:not(.is-admin-screen) #predictionLineup .lineup-slot[data-picker="prediction"] {
    border: 1px solid #d7e1eb;
    border-radius: 7px;
    background: #fbfdff;
    box-shadow: 0 1px 3px rgba(25, 54, 82, 0.08);
  }

  .app-layout:not(.is-admin-screen) #predictionLineup .lineup-slot[data-picker="prediction"].is-active {
    border-color: #c3dced;
    background: #eef6fc;
    box-shadow: inset 3px 0 0 var(--fighters-blue), 0 1px 4px rgba(25, 54, 82, 0.1);
  }

  .app-layout:not(.is-admin-screen) .slot-order {
    width: 44px;
    min-height: 38px;
  }

  .app-layout:not(.is-admin-screen) .position-control,
  .app-layout:not(.is-admin-screen) .position-button {
    width: 44px;
    height: 42px;
  }

  .app-layout:not(.is-admin-screen) .slot-clear {
    width: 36px;
    height: 36px;
    border: 1px solid #c8d4df;
    border-radius: 5px;
    color: #52697f;
    background: #f7fafc;
    font-size: 1.05rem;
  }

  .app-layout:not(.is-admin-screen) .slot-clear:hover,
  .app-layout:not(.is-admin-screen) .slot-clear:focus-visible {
    border-color: #d28a8a;
    color: #8b2a2a;
    background: #fff5f5;
  }

  .app-layout:not(.is-admin-screen) .roster-filter {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 3px;
    border-radius: 6px;
  }

  .app-layout:not(.is-admin-screen) .roster-filter-button {
    min-width: 104px;
    min-height: 34px;
    padding: 6px 12px;
  }

  .app-layout:not(.is-admin-screen) .player-category-legend {
    display: none;
  }

  .app-layout:not(.is-admin-screen) .player-list {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    min-width: 0;
    max-width: 100%;
    gap: 10px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    border-top: 0;
  }

  .app-layout:not(.is-admin-screen) .player-chip {
    min-height: 56px;
    min-width: 120px;
    padding: 10px 12px;
    border: 1px solid #c7d7e8;
    border-radius: 7px;
    background: #ffffff;
  }

  .app-layout:not(.is-admin-screen) .player-chip .player-name {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .app-layout:not(.is-admin-screen) .player-chip.is-used {
    color: #586b7e;
    border-color: #d2dce6;
    background: #eef2f6;
  }

  .app-layout:not(.is-admin-screen) #savePredictionButton,
  .app-layout:not(.is-admin-screen) #resetPredictionButton {
    width: auto;
    min-width: 180px;
    justify-self: start;
    margin-top: 2px;
  }

  .app-layout:not(.is-admin-screen) #savePredictionButton {
    min-width: 220px;
  }
}

@media (max-width: 600px) {
}

@media (min-width: 78.125rem) {
  .app-layout:not(.is-admin-screen) .player-list {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (min-width: 1200px) {
  .app-layout:not(.is-admin-screen) .lineup-builder {
    grid-template-columns: minmax(420px, 480px) minmax(320px, 1fr);
  }
}

@media (min-width: 900px) {
  .app-layout:not(.is-admin-screen) #predictionForm #predictionLineup > .lineup-slot[data-picker="prediction"] {
    display: grid;
    grid-template-columns: 56px 56px minmax(0, 1fr) 44px;
    grid-template-areas: "order position player clear";
    column-gap: 12px;
  }

  .app-layout:not(.is-admin-screen) #predictionForm #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-order {
    grid-column: 1;
    grid-area: order;
  }

  .app-layout:not(.is-admin-screen) #predictionForm #predictionLineup > .lineup-slot[data-picker="prediction"] > .position-control {
    grid-column: 2;
    grid-area: position;
    justify-self: center;
  }

  .app-layout:not(.is-admin-screen) #predictionForm #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-player {
    grid-column: 3;
    grid-area: player;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .app-layout:not(.is-admin-screen) #predictionForm #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-clear {
    grid-column: 4;
    grid-area: clear;
    justify-self: end;
  }
}

/* 公開画面: 野球の記録表・スコアボードを意識した落ち着いた配色 */
body:not(:has(.app-layout.is-admin-screen)) {
  --fighters-blue: #1f3b5b;
  --fighters-deep-blue: #14213d;
  --fighters-sky: #eef1f4;
  --fighters-gold: #b28704;
  --text: #172033;
  --muted: #667085;
  --border: #d9dee7;
  --surface: #ffffff;
  --shadow: 0 2px 8px rgba(23, 32, 51, 0.06);
  background: #f4f6f8;
  color: var(--text);
}

body:not(:has(.app-layout.is-admin-screen)) .app-header {
  background: var(--fighters-deep-blue);
  border-bottom: 4px solid var(--fighters-gold);
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .header-inner {
  padding-top: 24px;
  padding-bottom: 28px;
}

body:not(:has(.app-layout.is-admin-screen)) .team-label,
body:not(:has(.app-layout.is-admin-screen)) .probable-starter-meta,
body:not(:has(.app-layout.is-admin-screen)) .probable-starter-message {
  color: #d5deea;
}

body:not(:has(.app-layout.is-admin-screen)) .lead {
  border-left-color: #b28704;
  color: #c8d3df;
}

body:not(:has(.app-layout.is-admin-screen)) .game-info-display {
  border-color: #526983;
  border-radius: 4px;
  color: #ffffff;
  background: #1e395a;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .auth-panel {
  border-color: #405873;
  border-radius: 4px;
  background: #1b2f4a;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .achievement-card.is-rare .achievement-icon,
body:not(:has(.app-layout.is-admin-screen)) .achievement-card.is-rare .achievement-rarity {
  color: #b7c9da;
}

body:not(:has(.app-layout.is-admin-screen)) .achievement-card.is-epic .achievement-icon,
body:not(:has(.app-layout.is-admin-screen)) .achievement-card.is-epic .achievement-rarity {
  color: #d6b458;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel .auth-button {
  border-color: #71839a;
  border-radius: 4px;
  background: transparent;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel .auth-button:hover,
body:not(:has(.app-layout.is-admin-screen)) #authPanel .auth-button:focus-visible {
  background: #29425f;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel .auth-button.is-primary {
  border-color: #d1ad4a;
  color: #172033;
  background: #d1ad4a;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel #openLoginButton {
  min-height: 44px;
  padding: 9px 15px;
  border: 2px solid #f2c45c;
  border-radius: 6px;
  color: #172033;
  background: #f2c45c;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 3px 0 rgba(23, 32, 51, 0.2);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel #openLoginButton:hover {
  border-color: #ffe7a0;
  background: #ffd978;
  box-shadow: 0 4px 0 rgba(23, 32, 51, 0.24);
  transform: translateY(-1px);
}

body:not(:has(.app-layout.is-admin-screen)) #authPanel #openLoginButton:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(209, 173, 74, 0.55);
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card {
  border-color: #526983;
  border-radius: 4px;
  background: #223d5d;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card.is-success {
  border-color: #78a98a;
  background: #204b3a;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card.is-error {
  border-color: #d38c85;
  background: #5a2c30;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-panel {
  border-color: #3d5874;
  border-radius: 4px;
  background: #1b2f4a;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-kicker {
  color: #d6b458;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-panel .hero-copy > p:last-child {
  color: #c8d3df;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-cta {
  border-color: #d1ad4a;
  border-radius: 4px;
  color: #172033;
  background: #d1ad4a;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .hero-cta:hover,
body:not(:has(.app-layout.is-admin-screen)) .hero-cta:focus-visible {
  background: #e0c36f;
}

body:not(:has(.app-layout.is-admin-screen)) .area-label,
body:not(:has(.app-layout.is-admin-screen)) .ranking-heading h2,
body:not(:has(.app-layout.is-admin-screen)) .ranking-qualified-section h3,
body:not(:has(.app-layout.is-admin-screen)) .ranking-self h3 {
  color: var(--fighters-deep-blue);
}

body:not(:has(.app-layout.is-admin-screen)) .card,
body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .card {
  border-color: var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

body:not(:has(.app-layout.is-admin-screen)) .how-to-panel {
  border-left-color: var(--fighters-gold);
  border-radius: 4px;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .daily-best-nine-card {
  border-color: var(--border);
  border-left-color: var(--fighters-gold);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

body:not(:has(.app-layout.is-admin-screen)) .daily-best-nine-list li {
  border-color: #e1d6ad;
  border-radius: 3px;
}

body:not(:has(.app-layout.is-admin-screen)) .daily-best-nine-rank,
body:not(:has(.app-layout.is-admin-screen)) .ranking-rank {
  color: var(--fighters-gold);
}

body:not(:has(.app-layout.is-admin-screen)) .daily-best-nine-badge {
  border-radius: 3px;
  color: #172033;
  background: #d1ad4a;
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-tabs {
  border-color: #aeb8c5;
  border-radius: 4px;
  background: #f5f6f7;
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-tab {
  border-right-color: #aeb8c5;
  color: #526276;
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-tab.is-active {
  color: #ffffff;
  background: var(--fighters-deep-blue);
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-self {
  border-color: #cfd6df;
  border-left-color: var(--fighters-gold);
  border-radius: 4px;
  background: #f8f8f6;
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-entry {
  border-color: var(--border);
  border-radius: 4px;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-achievement-badge.is-rare {
  border-color: #9cafc2;
  color: #34516e;
  background: #f1f4f7;
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-achievement-badge.is-epic {
  border-color: #d1bc77;
  color: #765900;
  background: #fbf7e8;
}

body:not(:has(.app-layout.is-admin-screen)) .ranking-achievement-badge.is-limited {
  border-color: #d1bc77;
  color: #765900;
  background: #fbf7e8;
}

body:not(:has(.app-layout.is-admin-screen)) input,
body:not(:has(.app-layout.is-admin-screen)) select,
body:not(:has(.app-layout.is-admin-screen)) textarea {
  border-color: var(--border);
  border-radius: 4px;
}

body:not(:has(.app-layout.is-admin-screen)) input:focus,
body:not(:has(.app-layout.is-admin-screen)) select:focus,
body:not(:has(.app-layout.is-admin-screen)) textarea:focus {
  border-color: var(--fighters-blue);
  outline-color: rgba(178, 135, 4, 0.24);
}

body:not(:has(.app-layout.is-admin-screen)) .primary-button,
body:not(:has(.app-layout.is-admin-screen)) .secondary-button,
body:not(:has(.app-layout.is-admin-screen)) .danger-button {
  border-radius: 4px;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .primary-button {
  color: #ffffff;
  background: var(--fighters-deep-blue);
}

body:not(:has(.app-layout.is-admin-screen)) .primary-button:hover,
body:not(:has(.app-layout.is-admin-screen)) .primary-button:focus-visible {
  background: #1f3b5b;
}

body:not(:has(.app-layout.is-admin-screen)) .secondary-button {
  border-color: #9aaabd;
  color: var(--fighters-deep-blue);
  background: #ffffff;
}

body:not(:has(.app-layout.is-admin-screen)) .secondary-button:hover,
body:not(:has(.app-layout.is-admin-screen)) .secondary-button:focus-visible {
  background: #f1f4f7;
}

body:not(:has(.app-layout.is-admin-screen)) .prediction-deadline-status {
  padding: 8px 10px;
  border-left: 3px solid var(--fighters-gold);
  border-radius: 0 3px 3px 0;
  background: #fbf7e8;
  color: var(--fighters-deep-blue);
}

body:not(:has(.app-layout.is-admin-screen)) .prediction-deadline-status.is-closed,
body:not(:has(.app-layout.is-admin-screen)) .prediction-deadline-status.is-unavailable {
  border-left-color: var(--error);
  background: var(--error-bg);
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .lineup-card {
  border-top-color: var(--fighters-gold);
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .lineup-panel,
body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .player-panel {
  border-color: var(--border);
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .lineup-slot.is-active {
  border-color: #c8d2dd;
  background: #f1f4f7;
  box-shadow: inset 3px 0 0 var(--fighters-blue);
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .lineup-slot.is-drop-target {
  border-color: #d1bc77;
  background: #fbf7e8;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .roster-filter {
  border-bottom-color: #c7d0db;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .roster-filter-button.is-selected {
  border-color: transparent;
  color: var(--fighters-deep-blue);
  box-shadow: inset 0 -2px 0 var(--fighters-gold), 0 1px 3px rgba(23, 32, 51, 0.08);
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .position-button {
  border-radius: 4px;
  box-shadow: none;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .position-button.is-catcher {
  color: #34516e;
  background: #f1f4f7;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .position-button.is-infielder {
  color: #765900;
  background: #fbf7e8;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .position-button.is-outfielder {
  color: #28613c;
  background: #f1f7f2;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .position-button.is-dh {
  color: #714c62;
  background: #f7f0f3;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .position-button:hover,
body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .position-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(178, 135, 4, 0.2);
  filter: none;
  transform: none;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .player-chip:hover,
body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .player-chip:focus-visible {
  border-color: #c5a84d;
  background: #fbf7e8;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .result-card {
  border-top-color: var(--fighters-deep-blue);
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) .result-hero {
  border-radius: 4px;
  background: #164a79;
}

body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .result-card {
  border-color: #bfd3e5;
  background: #eef5fb;
}

body:not(:has(.app-layout.is-admin-screen)) .result-dashboard {
  background: #eef5fb;
}

body:not(:has(.app-layout.is-admin-screen)) .result-table-wrap {
  border-color: #b9cfe2;
  background: #e7f0f8;
}

body:not(:has(.app-layout.is-admin-screen)) .result-table th,
body:not(:has(.app-layout.is-admin-screen)) .result-table .result-order-cell strong {
  background: #1168a8;
}

body:not(:has(.app-layout.is-admin-screen)) .result-table tbody td {
  background: #ffffff;
}

body:not(:has(.app-layout.is-admin-screen)) .hit-breakdown {
  border-color: #bfd3e5;
  background: #f8fbff;
}

body:not(:has(.app-layout.is-admin-screen)) .breakdown-item {
  border-right-color: #bfd3e5;
  background: #f8fbff;
}

@media (max-width: 759px) {
  body:not(:has(.app-layout.is-admin-screen)) .header-inner {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .ranking-tabs {
    width: 100%;
  }
}

@media (max-width: 430px) {
  body:not(:has(.app-layout.is-admin-screen)) .ranking-tab {
    min-width: 0;
    padding-inline: 8px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .game-info-display {
    font-size: 1.18rem;
  }
}

/* 公開画面のレスポンシブ基盤: 900px以上は二列、タブレット以下は一列。 */
@media (min-width: 900px) {
  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .how-to-panel {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .lineup-card {
    grid-column: 1;
    grid-row: 2;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > section[aria-labelledby="saved-title"] {
    grid-column: 1;
    grid-row: 3;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .result-card {
    grid-column: 1;
    grid-row: 4;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > #rankingPanel {
    grid-column: 1;
    grid-row: 5;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 20px;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    border-top: 0;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .how-to-panel,
  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .card {
    grid-column: 1;
    grid-row: auto;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .container {
    width: min(100% - 24px, 960px);
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 16px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .how-to-panel,
  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .card {
    grid-column: 1;
    grid-row: auto;
  }

  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .card {
    padding: 14px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-panel,
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    min-width: 0;
    padding: 8px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    overflow: visible;
  }

  body:not(:has(.app-layout.is-admin-screen)) .position-button,
  body:not(:has(.app-layout.is-admin-screen)) .roster-filter-button {
    min-height: 44px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .primary-button,
  body:not(:has(.app-layout.is-admin-screen)) .secondary-button,
  body:not(:has(.app-layout.is-admin-screen)) .danger-button {
    min-height: 48px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .ranking-tabs {
    width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .ranking-tab {
    min-width: 0;
    padding-inline: 8px;
  }
}

@media (max-width: 430px) {
  body:not(:has(.app-layout.is-admin-screen)) .app-layout:not(.is-admin-screen) > .card {
    padding: 12px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-slot {
    grid-template-columns: 28px 40px minmax(0, 1fr) 40px minmax(88px, auto);
    gap: 6px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-chip {
    min-height: 48px;
    padding-inline: 8px;
  }
}

/* 予想オーダーの選手名は、結果表示と揃えたブロック型の選択領域にする。 */
body:not(:has(.app-layout.is-admin-screen)) #predictionLineup .slot-player {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  padding: 7px 12px;
  border: 1px solid #c7d7e8;
  border-radius: 7px;
  background: #f7fbff;
  box-shadow: 0 1px 2px rgba(25, 54, 82, 0.08);
  color: var(--fighters-deep-blue);
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  text-overflow: clip;
}

body:not(:has(.app-layout.is-admin-screen)) #predictionLineup .slot-player .player-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
}

body:not(:has(.app-layout.is-admin-screen)) #predictionLineup .slot-player.slot-empty {
  border-style: dashed;
  background: #fbfcfd;
  color: var(--muted);
  font-weight: 700;
}

body:not(:has(.app-layout.is-admin-screen)) #predictionLineup .lineup-slot.is-locked .slot-player {
  cursor: default;
  opacity: 0.78;
}

@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup .slot-player {
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* 選手一覧も予想オーダーと同じブロック感で表示する。 */
body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip {
  box-sizing: border-box;
  min-width: 0;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid #c7d7e8;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(25, 54, 82, 0.08);
  overflow: hidden;
}

body:not(:has(.app-layout.is-admin-screen)) .player-list {
  gap: 14px;
}

body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip .player-name {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
}

body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip.is-category-catcher,
body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip.is-category-infielder,
body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip.is-category-outfielder,
body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip.is-category-dh {
  border-color: #c7d7e8;
  background: #ffffff;
}

body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip.is-used {
  border-color: #d2dce6;
  background: #ffffff;
}

body:not(:has(.app-layout.is-admin-screen)) .player-category-legend {
  display: none;
}

body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip:hover,
body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip:focus-visible {
  border-color: #c5a84d;
  background: #fbf7e8;
  box-shadow: 0 2px 6px rgba(25, 54, 82, 0.1);
}

.mobile-drag-ghost {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  display: flex;
  width: max-content;
  max-width: min(70vw, 220px);
  min-height: 44px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(104, 116, 128, 0.72);
  border-radius: 6px;
  color: #34404c;
  background: rgba(226, 231, 236, 0.9);
  box-shadow: 0 5px 14px rgba(20, 46, 72, 0.18);
  font-weight: 800;
  pointer-events: none;
  overflow-wrap: anywhere;
  transform: translate3d(-9999px, -9999px, 0);
}

@media (max-width: 767px) {
  .position-menu.is-mobile-position-menu {
    position: fixed;
    top: auto;
    right: auto;
    left: auto;
    box-sizing: border-box;
    transform: none;
    max-width: calc(100vw - 16px);
  }

  .app-layout:not(.is-admin-screen) #predictionLineup .slot-player,
  .app-layout:not(.is-admin-screen) #predictionLineup .position-control,
  .app-layout:not(.is-admin-screen) #predictionLineup .position-button {
    min-height: 44px;
  }

  .app-layout:not(.is-admin-screen) #predictionLineup .position-control,
  .app-layout:not(.is-admin-screen) #predictionLineup .position-button {
    height: 44px;
  }
}

@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .player-list {
    gap: 12px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip {
    min-height: 48px;
    padding: 9px 12px;
  }
}

/* Keep the roster heading and filter visible while only the player cards scroll. */
@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(72vh, 620px);
    overflow: hidden;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list-heading,
  body:not(:has(.app-layout.is-admin-screen)) .roster-filter {
    flex: 0 0 auto;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-panel .player-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Experimental mobile prediction layout: keep the order and roster visible side by side. */
@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: 8px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-panel,
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    min-width: 0;
    max-height: min(72vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-panel,
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    padding: 6px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .slot-list,
  body:not(:has(.app-layout.is-admin-screen)) .player-list {
    min-width: 0;
    width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup .slot-player,
  body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] {
    grid-template-columns: 28px minmax(0, 1fr) 40px auto;
    grid-template-areas: "order player position clear";
    gap: 6px;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-order {
    grid-area: order;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-player {
    grid-area: player;
    width: auto;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .position-control {
    grid-area: position;
    justify-self: center;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-clear {
    grid-area: clear;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip {
    min-height: 44px;
    padding: 8px 9px;
  }
}

/* Keep the mobile game context compact so the prediction panes start sooner. */
@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .lineup-card {
    padding: 10px 12px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-card .section-heading {
    gap: 4px;
    margin-bottom: 6px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-card .section-heading p {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  body:not(:has(.app-layout.is-admin-screen)) #publicGameSelectionMeta {
    display: grid;
    gap: 1px;
    min-height: 0;
    margin: -4px 0 5px;
    font-size: 0.76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  body:not(:has(.app-layout.is-admin-screen)) #publicGameSelectionMeta .public-game-meta-line {
    display: block;
    min-width: 0;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    gap: 6px;
  }
}

/* Keep the narrow mobile roster header compact so the first card aligns closer to order one. */
@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    padding: 2px 6px 6px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list-heading {
    margin-bottom: 2px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-panel .roster-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 2px;
    margin: 0 0 4px;
    padding: 2px;
    box-sizing: border-box;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-panel .roster-filter-button {
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 0.68rem;
  }
}

/* Keep mobile roster controls above an independent, scrollable card frame. */
@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list-heading,
  body:not(:has(.app-layout.is-admin-screen)) .player-panel > .roster-filter,
  body:not(:has(.app-layout.is-admin-screen)) .player-category-legend {
    flex: 0 0 auto;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list-frame {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list-frame .player-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list-frame .message,
  body:not(:has(.app-layout.is-admin-screen)) .player-list-frame .player-detail-panel {
    flex: 0 0 auto;
  }
}

/* 公開トップの第一印象を、結果画面と同じ青・紺・金のトーンへ寄せる。 */
body:not(:has(.app-layout.is-admin-screen)) .header-logo {
  width: min(100%, 276px);
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card {
  border-color: #668db4;
  background: #214f7d;
  box-shadow: 0 4px 12px rgba(8, 37, 73, 0.16);
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card.is-success {
  border-color: #6f91b1;
  border-left-color: #c6ab64;
  border-left-width: 3px;
  background: #214f7d;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card.is-pending,
body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card.is-loading {
  border-color: #668db4;
  background: #294d73;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-heading a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid rgba(241, 210, 118, 0.72);
  border-radius: 999px;
  color: #f1d276;
  background: rgba(15, 50, 84, 0.28);
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration-color: rgba(241, 210, 118, 0.65);
  text-underline-offset: 3px;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-team {
  border-color: rgba(175, 211, 241, 0.52);
  background: #2b608f;
}

body:not(:has(.app-layout.is-admin-screen)) .probable-starter-fetched {
  color: #c2def4;
}

/* Mobile prediction UI: keep the two panes and place the position control next to the order. */
@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: 8px;
    align-items: stretch;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-panel,
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    min-width: 0;
    max-height: min(72vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] {
    grid-template-columns: 28px 40px minmax(0, 1fr) auto;
    grid-template-areas: "order position player clear";
    gap: 6px;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-order {
    grid-area: order;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .position-control {
    grid-area: position;
    justify-self: center;
    z-index: 2;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-player {
    grid-area: player;
    min-width: 0;
    width: auto;
  }

  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup > .lineup-slot[data-picker="prediction"] > .slot-clear {
    grid-area: clear;
  }

  body:not(:has(.app-layout.is-admin-screen)) .position-menu.is-viewport-positioned {
    z-index: 1400;
  }
}

@media (max-width: 759px) {
  body:not(:has(.app-layout.is-admin-screen)) .header-logo {
    width: min(100%, 236px);
  }
}

@media (max-width: 430px) {
  body:not(:has(.app-layout.is-admin-screen)) .header-logo {
    width: min(100%, 208px);
  }
}

/* Final public mobile guard: keep both panes inside the viewport without changing the portal menu. */
@media (max-width: 767px) {
  body:not(:has(.app-layout.is-admin-screen)) {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body:not(:has(.app-layout.is-admin-screen)) .container,
  body:not(:has(.app-layout.is-admin-screen)) .header-inner,
  body:not(:has(.app-layout.is-admin-screen)) .app-layout,
  body:not(:has(.app-layout.is-admin-screen)) .app-layout > .card,
  body:not(:has(.app-layout.is-admin-screen)) .lineup-card,
  body:not(:has(.app-layout.is-admin-screen)) #predictionForm,
  body:not(:has(.app-layout.is-admin-screen)) #predictionEditor {
    min-width: 0;
    max-width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .header-inner > *,
  body:not(:has(.app-layout.is-admin-screen)) .lead,
  body:not(:has(.app-layout.is-admin-screen)) .hero-panel,
  body:not(:has(.app-layout.is-admin-screen)) .hero-copy,
  body:not(:has(.app-layout.is-admin-screen)) .hero-cta,
  body:not(:has(.app-layout.is-admin-screen)) .auth-panel,
  body:not(:has(.app-layout.is-admin-screen)) .auth-state,
  body:not(:has(.app-layout.is-admin-screen)) .auth-actions,
  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-card,
  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-heading,
  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-grid,
  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-team {
    min-width: 0;
    max-width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .auth-panel,
  body:not(:has(.app-layout.is-admin-screen)) .auth-actions {
    width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .auth-state {
    align-items: flex-start;
  }

  body:not(:has(.app-layout.is-admin-screen)) .auth-state > span,
  body:not(:has(.app-layout.is-admin-screen)) .auth-button {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body:not(:has(.app-layout.is-admin-screen)) .auth-button {
    flex: 1 1 0;
    white-space: normal;
  }

  body:not(:has(.app-layout.is-admin-screen)) #authPanel #openLoginButton {
    flex: 1.35 1 0;
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-heading {
    flex-wrap: wrap;
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-heading a {
    flex: 1 1 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
  }

  body:not(:has(.app-layout.is-admin-screen)) .probable-starter-team strong,
  body:not(:has(.app-layout.is-admin-screen)) .hero-panel h1,
  body:not(:has(.app-layout.is-admin-screen)) .hero-panel p,
  body:not(:has(.app-layout.is-admin-screen)) .lead {
    overflow-wrap: anywhere;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-panel,
  body:not(:has(.app-layout.is-admin-screen)) .player-panel,
  body:not(:has(.app-layout.is-admin-screen)) .slot-list,
  body:not(:has(.app-layout.is-admin-screen)) .player-list,
  body:not(:has(.app-layout.is-admin-screen)) .player-list-frame,
  body:not(:has(.app-layout.is-admin-screen)) .lineup-slot,
  body:not(:has(.app-layout.is-admin-screen)) .player-chip {
    min-width: 0;
    max-width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-panel,
  body:not(:has(.app-layout.is-admin-screen)) .player-panel {
    overflow-x: clip;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-chip .player-name,
  body:not(:has(.app-layout.is-admin-screen)) #predictionLineup .slot-player {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  body:not(:has(.app-layout.is-admin-screen)) .container {
    width: calc(100% - 16px);
  }

  body:not(:has(.app-layout.is-admin-screen)) .lineup-builder {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  }
}

/* 公開予想の2ペイン構成は変えず、PCだけ操作対象の縦寸法を約15%広げる。 */
@media (min-width: 900px) {
  body:not(:has(.app-layout.is-admin-screen)) #predictionForm #predictionLineup > .lineup-slot[data-picker="prediction"] {
    min-height: 55px;
    padding-block: 8px;
  }

  body:not(:has(.app-layout.is-admin-screen)) .player-list .player-chip {
    min-height: 51px;
    padding-block: 10px;
  }
}

/* 保存操作は入力内容からさらに離すが、スマホでは余白を抑えて操作領域を保つ。 */
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #savePredictionButton {
  width: min(100%, 400px);
  margin-top: 80px;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #resetPredictionButton {
  margin-top: 76px;
}

@media (min-width: 1000px) {
  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #savePredictionButton,
  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #resetPredictionButton {
    margin-top: 64px;
  }
}

@media (max-width: 759px) {
  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #savePredictionButton {
    margin-top: 60px;
  }

  body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #resetPredictionButton {
    /* Keep the existing stacked-button gap; only the action group's leading margin changes on mobile. */
    margin-top: 36px;
  }
}

/* Keep the public editing target distinct from batting-side colors. */
body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .lineup-slot.is-active,
body:not(:has(.app-layout.is-admin-screen)) .lineup-slot.is-active {
  border-color: #d5a11e;
  background: #fff8e5;
  box-shadow: 0 3px 8px rgba(146, 102, 0, 0.14);
  outline: 1px solid rgba(213, 161, 30, 0.45);
  outline-offset: -1px;
}

body:not(:has(.app-layout.is-admin-screen)):has(#predictionForm) #predictionForm .position-menu-option.is-current {
  border-color: #d5a11e;
  background: #fff8e5;
}
/* Edition switching keeps both editions in the Starting9 shell; the Asia
   panel is scoped so its compact cards do not alter the established NPB UI. */
.edition-switcher { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.edition-switcher button { border: 1px solid rgba(31, 83, 116, .25); border-radius: 999px; padding: 7px 14px; color: #1f5374; background: #fff; font: inherit; cursor: pointer; }
.edition-switcher button.is-selected { color: #fff; background: #1f5374; }
.asia-edition-panel { max-width: 920px; margin: 0 auto; padding: 28px 16px 56px; }
.asia-edition-heading { padding: 12px 0 18px; }
.asia-edition-heading h2 { margin: 4px 0 8px; font-size: clamp(1.35rem, 4vw, 2.2rem); }
.asia-edition-card { margin: 14px 0; padding: 18px; background: #fff; border: 1px solid #d7e1ed; border-radius: 12px; box-shadow: 0 2px 12px #1c3c5a0b; }
.asia-edition-card h3 { margin: 0 0 12px; }
.asia-edition-next-game { display: grid; gap: 6px; }
.asia-edition-list { display: grid; gap: 8px; }
.asia-edition-list .schedule-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid #d7e1ed; border-radius: 8px; }
.asia-edition-lineup { display: grid; gap: 8px; margin: 12px 0; }
.asia-edition-lineup .lineup-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 110px; gap: 8px; align-items: center; }
.asia-edition-ranking { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.asia-edition-ranking li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 9px 11px; background: #f4f8fc; border-radius: 7px; }
@media (max-width: 600px) { .asia-edition-list .schedule-row { align-items: flex-start; flex-direction: column; } .asia-edition-lineup .lineup-row { grid-template-columns: 30px minmax(0, 1fr) 82px; } }