.player-analysis {
  --analysis-ink: #1f2937;
  --analysis-muted: #6b7280;
  --analysis-line: #e2e8f0;
  --analysis-accent: #059669;
  width: 100%;
  box-sizing: border-box;
  margin: 14px 0;
  padding: 17px 18px;
  border: 1px solid #dce5e0;
  border-radius: 14px;
  background: #fff;
  color: var(--analysis-ink);
}

.player-analysis * { box-sizing: border-box; }
.player-analysis [hidden] { display: none !important; }

.player-analysis__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.player-analysis__head h2 {
  margin: 0;
  color: var(--analysis-ink);
  font-size: 17px;
  line-height: 1.3;
  text-align: left;
  letter-spacing: -.5px;
}

.player-analysis__head p {
  margin: 3px 0 0;
  color: var(--analysis-muted);
  font-size: 11px;
}

.player-analysis__live {
  flex: 0 0 auto;
  color: #6b7d72;
  font-size: 10px;
}

.player-analysis__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 90px;
  margin-top: 12px;
  border-radius: 10px;
  background: #f8faf9;
  color: var(--analysis-muted);
  font-size: 11px;
}

.player-analysis__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #d4e7dc;
  border-top-color: var(--analysis-accent);
  border-radius: 50%;
  animation: analysis-spin .8s linear infinite;
}

@keyframes analysis-spin { to { transform: rotate(360deg); } }

.player-analysis__config {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 11px 0 8px;
}

.player-analysis__config span {
  padding: 4px 7px;
  border-radius: 6px;
  background: #f1f5f3;
  color: #64736b;
  font-size: 9px;
  font-weight: 700;
}

.analysis-primary-role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 14px;
  align-items: center;
  padding: 14px 15px;
  border: 1px solid #b9dfcb;
  border-left: 4px solid var(--analysis-accent);
  border-radius: 10px;
  background: #f8fcfa;
}

.analysis-primary-role__copy > span {
  color: #4b7e65;
  font-size: 9px;
  font-weight: 800;
}

.analysis-primary-role__copy h3 {
  margin: 2px 0 3px;
  color: #17251e;
  font-size: 17px;
  line-height: 1.25;
}

.analysis-primary-role__copy p {
  margin: 0;
  color: #58675f;
  font-size: 11px;
  line-height: 1.45;
}

.analysis-primary-role__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 5px;
}

.analysis-primary-role__notes small {
  color: #327656;
  font-size: 9px;
  font-weight: 700;
}

.analysis-primary-role__notes .is-weakness { color: #a65d35; }
.analysis-primary-role__notes .is-playstyle { color: #38639a; }

.analysis-primary-role__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 12px;
  border-left: 1px solid #d1e6da;
}

.analysis-primary-role__score strong {
  color: #126c47;
  font-family: 'FCOVR', 'IBM Plex Sans KR', sans-serif;
  font-size: 31px;
  line-height: 1;
}

.analysis-primary-role__score span {
  color: #287858;
  font-size: 9px;
  font-weight: 800;
}

.analysis-primary-role__score small {
  margin-top: 3px;
  color: #718078;
  font-size: 8px;
  white-space: nowrap;
}

.analysis-role-alts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.analysis-role-alt {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--analysis-line);
  border-radius: 9px;
  background: #fff;
}

.analysis-role-alt > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #f0f3f5;
  color: #778493;
  font-size: 9px;
  font-weight: 800;
}

.analysis-role-alt > div { min-width: 0; }
.analysis-role-alt strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.analysis-role-alt small { display: block; overflow: hidden; margin-top: 1px; color: #7a8793; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.analysis-role-alt__score { text-align: right; }
.analysis-role-alt__score b { color: #296f51; font-size: 14px; }
.analysis-role-alt__score small { font-size: 7px; }

.analysis-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 15px 0 7px;
}

.analysis-subhead h3 { margin: 0; font-size: 13px; }
.analysis-subhead span { color: #829087; font-size: 9px; }

.analysis-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.analysis-style-card {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--analysis-line);
  border-radius: 8px;
  background: #fff;
}

.analysis-style-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.analysis-style-card__head strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-style-card__head span {
  color: #18734d;
  font-size: 11px;
  font-weight: 900;
}

.analysis-style-bar {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1ef;
}

.analysis-style-bar i {
  display: block;
  width: var(--analysis-score);
  height: 100%;
  border-radius: inherit;
  background: #42b883;
}

.analysis-style-card > small {
  display: block;
  margin-top: 4px;
  color: #7b8981;
  font-size: 8px;
}

.analysis-style-card > small.is-playstyle { color: #38639a; font-weight: 700; }

.analysis-method {
  margin-top: 9px;
  border-top: 1px solid #edf1ef;
}

.analysis-method > summary {
  padding: 9px 1px 0;
  cursor: pointer;
  color: #6f7d75;
  font-size: 9px;
  font-weight: 700;
}

.analysis-method p {
  margin: 8px 0 3px;
  color: #64716a;
  font-size: 9px;
  line-height: 1.5;
}

.analysis-method > small {
  display: block;
  color: #8a958f;
  font-size: 8px;
}

html[data-theme="dark"] .player-analysis {
  --analysis-ink: #e7edf5;
  --analysis-muted: #aeb9c9;
  --analysis-line: #334155;
  --analysis-accent: #34d399;
  border-color: #334155;
  background: #172033;
  color: var(--analysis-ink);
  box-shadow: none;
}

html[data-theme="dark"] .player-analysis__head h2,
html[data-theme="dark"] .analysis-primary-role__copy h3,
html[data-theme="dark"] .analysis-subhead h3,
html[data-theme="dark"] .analysis-role-alt strong,
html[data-theme="dark"] .analysis-style-card__head strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .player-analysis__head p,
html[data-theme="dark"] .player-analysis__live,
html[data-theme="dark"] .analysis-subhead span,
html[data-theme="dark"] .analysis-role-alt small,
html[data-theme="dark"] .analysis-style-card > small,
html[data-theme="dark"] .analysis-method p,
html[data-theme="dark"] .analysis-method > small,
html[data-theme="dark"] .analysis-method > summary {
  color: var(--analysis-muted) !important;
}

html[data-theme="dark"] .player-analysis__state {
  background: #111a2b;
  color: var(--analysis-muted);
}

html[data-theme="dark"] .player-analysis__spinner {
  border-color: #334b48;
  border-top-color: var(--analysis-accent);
}

html[data-theme="dark"] .player-analysis__config span {
  background: #243149;
  color: #c6d1df;
}

html[data-theme="dark"] .analysis-primary-role {
  border-color: #2f6a58;
  border-left-color: var(--analysis-accent);
  background: #142b2b;
}

html[data-theme="dark"] .analysis-primary-role__copy > span {
  color: #6ee7b7;
}

html[data-theme="dark"] .analysis-primary-role__copy p {
  color: #bdc9d7 !important;
}

html[data-theme="dark"] .analysis-primary-role__notes small {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .analysis-primary-role__notes .is-weakness {
  color: #fbbf7a !important;
}

html[data-theme="dark"] .analysis-primary-role__notes .is-playstyle,
html[data-theme="dark"] .analysis-style-card > small.is-playstyle {
  color: #93c5fd !important;
}

html[data-theme="dark"] .analysis-primary-role__score {
  border-left-color: #335b52;
}

html[data-theme="dark"] .analysis-primary-role__score strong {
  color: #6ee7b7;
}

html[data-theme="dark"] .analysis-primary-role__score span {
  color: #5ee0ad;
}

html[data-theme="dark"] .analysis-primary-role__score small {
  color: #aeb9c9 !important;
}

html[data-theme="dark"] .analysis-role-alt,
html[data-theme="dark"] .analysis-style-card {
  border-color: var(--analysis-line);
  background: #1c273a;
  color: var(--analysis-ink);
}

html[data-theme="dark"] .analysis-role-alt > span {
  background: #29364a;
  color: #c1ccda;
}

html[data-theme="dark"] .analysis-role-alt__score b,
html[data-theme="dark"] .analysis-style-card__head span {
  color: #6ee7b7;
}

html[data-theme="dark"] .analysis-style-bar {
  background: #29364a;
}

html[data-theme="dark"] .analysis-style-bar i {
  background: #34d399;
}

html[data-theme="dark"] .analysis-method {
  border-top-color: #334155;
}

@media (max-width: 600px) {
  .player-analysis { padding: 14px; }
  .player-analysis__live { display: none; }
  .analysis-role-alts { grid-template-columns: 1fr; }
  .analysis-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .analysis-primary-role { grid-template-columns: minmax(0, 1fr) 62px; padding: 12px; }
  .analysis-primary-role__copy p { font-size: 10px; }
  .analysis-primary-role__score { padding-left: 8px; }
  .analysis-primary-role__score strong { font-size: 27px; }
  .analysis-subhead span { max-width: 105px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .player-analysis__spinner { animation: none; }
}