:root {
  --bg: #15100b;
  --bg-glow: radial-gradient(ellipse 900px 500px at 50% -10%, #3a2b12 0%, transparent 65%);
  --panel: #241b12;
  --panel-light: #2f2416;
  --border: #55432a;
  --border-light: #7a6135;
  --gold: #e8b93f;
  --gold-bright: #ffd873;
  --text: #ece2ce;
  --muted: #a89474;
  --p1: #5eb3ff;
  --p2: #ff7a7a;
  --win: #6fe3a0;
  --win-bg: rgba(111, 227, 160, 0.1);
  --skiller: #5eb3ff;
  --pvmer: #ff9f43;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3rem 1rem 5rem;
  background-color: var(--bg);
  background-image: var(--bg-glow);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero { text-align: center; margin-bottom: 2rem; }

.logo {
  width: 200px;
  max-width: 60vw;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  margin-bottom: 0.5rem;
}

h1 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.subtitle { color: var(--muted); margin-top: 0.5rem; font-size: 1.05rem; }

.compare-form {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.compare-form input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  width: 210px;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.compare-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232, 185, 63, 0.18);
}

.vs {
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.compare-form button {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #211705;
  border: none;
  padding: 0.75rem 1.6rem;
  border-radius: 8px;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 0 #8a6a1f, 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.compare-form button:hover:not(:disabled) { transform: translateY(-1px); }
.compare-form button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #8a6a1f; }
.compare-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.status {
  min-height: 1.5rem;
  color: var(--muted);
  margin-bottom: 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.status.error { color: var(--p2); }

.results { width: 100%; max-width: 900px; }
.results.hidden { display: none; }

.callout {
  text-align: center;
  background: var(--panel-light);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  color: var(--text);
}

.callout:empty { display: none; }
.callout b { color: var(--gold-bright); }

.summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  flex-wrap: wrap;
}

.summary .side {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  position: relative;
}

.summary .side.leader { background: var(--win-bg); }

.summary .crown { font-size: 1.1rem; margin-bottom: 0.15rem; }

.summary .name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.25rem;
  word-break: break-word;
}

.summary .p1 .name { color: var(--p1); }
.summary .p2 .name { color: var(--p2); }

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
}

.type-icon { width: 14px; height: 14px; object-fit: contain; }

.maxed-badge {
  display: inline-block;
  margin-top: 0.4rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #211705;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 1px;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-light);
  overflow: hidden;
  margin-top: 0.4rem;
}

.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }

.progress-label { margin-top: 0.15rem !important; font-size: 0.78rem !important; }

.summary .statline {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0.35rem;
}

.summary .statline b { color: var(--text); }
.summary .statline b.clog-win { color: var(--win); }

.summary .wins {
  margin-top: 0.6rem;
  display: inline-block;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--gold-bright);
  font-weight: 600;
}

.summary .divider {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-weight: 700;
  font-size: 1.4rem;
  opacity: 0.7;
}

section { width: 100%; }

.playstyle-section { margin-bottom: 0.5rem; }

.playstyle-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.7rem;
}

.playstyle-name { font-weight: 600; margin-bottom: 0.4rem; }

.playstyle-row .bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--panel-light);
  overflow: hidden;
  display: flex;
}

.bar-skiller { background: var(--skiller); height: 100%; }
.bar-pvmer { background: var(--pvmer); height: 100%; }

.playstyle-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

h2 {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: 1.15rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  letter-spacing: 0.5px;
}

.highlights-section { margin-bottom: 0.5rem; }

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.highlight-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 0.8rem 1rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.highlight-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  margin-bottom: 0.4rem;
}

.highlight-card .boss-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  min-height: 2.2em;
}

.highlight-card .kc-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}

.highlight-card .kc-row .p1 { color: var(--p1); }
.highlight-card .kc-row .p2 { color: var(--p2); }
.highlight-card .kc-row .kc-win { color: var(--win); font-weight: 700; }

.highlight-card .bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-light);
  overflow: hidden;
  display: flex;
}

.highlight-card .bar-p1 { background: var(--p1); height: 100%; }
.highlight-card .bar-p2 { background: var(--p2); height: 100%; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.2rem;
  font-size: 0.92rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.compare-table th, .compare-table td {
  padding: 0.5rem 0.7rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.compare-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.015); }
.compare-table tbody tr:hover { background: var(--panel-light); }

.compare-table th:first-child, .compare-table td:first-child {
  text-align: left;
  color: var(--muted);
}

.skill-name { display: flex; align-items: center; gap: 0.5rem; }
.skill-name img { width: 20px; height: 20px; object-fit: contain; }

.compare-table thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--panel-light);
}

.compare-table td.win { color: var(--win); font-weight: 700; background: var(--win-bg); }
.compare-table td.na { color: var(--muted); font-style: italic; }
.compare-table .xp-sub { color: var(--muted); font-size: 0.82em; }

@media (max-width: 500px) {
  .compare-form input { width: 42%; }
  h1 { font-size: 1.8rem; }
}