:root {
  --bg: #ffffff;
  --surface: #f4f4f6;
  --surface2: #e9e9ee;
  --text: #1c1c22;
  --muted: #6d6d78;
  --border: #d8d8e0;
  --accent: #3a6df0;
  --accent-text: #ffffff;
  /* Difficulty badge identity colors: MASTER purple, ULTIMA red/black —
     deliberately outside the blue->green->red gap scale. */
  --mas-bg: #7c3aed;
  --ult-bg: #1c1c22;
  --ult-text: #ff5a5a;
}
/* Dark theme is opt-in via the header toggle (persisted in localStorage);
   light is the default regardless of the OS setting. */
:root[data-theme="dark"] {
  --bg: #141419;
  --surface: #1e1e26;
  --surface2: #2a2a35;
  --text: #f0f0f4;
  --muted: #a2a2b0;
  --border: #3a3a48;
  --accent: #5b84ff;
  --accent-text: #ffffff;
  --mas-bg: #8b5cf6;
  --ult-bg: #f0f0f4;
  --ult-text: #d42a2a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; cursor: pointer; }

/* header */
.site-header {
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--border);
  max-width: 960px; margin: 0 auto;
}
.logo {
  background: none; border: none; padding: 0;
  font-size: 24px; font-weight: 800; color: var(--text);
}
.tagline { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.header-tools { display: flex; gap: 8px; }
#search {
  flex: 1; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
#theme-toggle {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); white-space: nowrap;
}
.sample-banner {
  margin: 10px 0 2px; padding: 8px 12px; border-radius: 8px;
  background: #fff3cd; color: #664d03; border: 1px solid #e3b341;
  font-size: 13px; font-weight: 700;
}
:root[data-theme="dark"] .sample-banner { background: #4a3a08; color: #ffd75e; border-color: #8a6d1f; }

/* intro / about (static hero text under the header) */
.intro {
  max-width: 960px; margin: 0 auto; padding: 16px 16px 2px;
}
.intro h1 { font-size: 17px; margin: 0 0 6px; line-height: 1.4; }
.intro p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.intro p b { color: var(--text); }

/* main */
main { max-width: 960px; margin: 0 auto; padding: 8px 16px 24px; }
.sec-title { font-size: 18px; margin: 22px 0 10px; }
.empty { color: var(--muted); font-size: 14px; }

/* chart grid: one cell per chart (song x difficulty). The cell
 * background is the gap color once votes exist; novote stays grey. */
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.chart-cell {
  border-radius: 10px; padding: 9px 10px; text-align: left;
  border: 2px solid transparent; color: #141414; background: var(--surface2);
  display: flex; flex-direction: column; gap: 5px; line-height: 1.3; min-height: 86px;
}
.chart-cell .cell-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.chart-cell .cell-const { font-size: 19px; font-weight: 800; line-height: 1; }
.chart-cell .cell-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chart-cell .cell-foot { font-size: 11px; opacity: .85; margin-top: auto; }
.chart-cell.novote { background: var(--surface2); color: var(--muted); }
.chart-cell.novote .cell-const, .chart-cell.novote .cell-title { color: var(--text); }
.chart-cell.sel { border-color: var(--text); }
.chart-cell.mine { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 1px var(--text); }

/* difficulty badges */
.diff-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.diff-badge.mas { background: var(--mas-bg); color: #ffffff; }
.diff-badge.ult { background: var(--ult-bg); color: var(--ult-text); border: 1px solid var(--ult-text); }

/* legend */
.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 14px; }
.legend .grad { flex: 1; min-width: 80px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, hsl(240,68%,50%), hsl(120,68%,46%), hsl(0,68%,48%)); }
.legend-item { white-space: nowrap; }

/* detail panel */
.detail {
  margin-top: 14px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 12px; padding: 14px;
}
.detail-hint { margin: 0; color: var(--muted); font-size: 14px; }
.detail-head { margin: 0 0 6px; font-size: 17px; line-height: 1.4; }
.detail-meta { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.detail-score { margin: 0 0 8px; font-size: 14px; }
.detail-score b { font-size: 22px; }
/* gap bar: track spans gap −1.0 .. +1.0 with a center tick at 0 */
.gap-bar {
  position: relative; height: 10px; border-radius: 5px; margin: 4px 0 4px;
  background: linear-gradient(90deg, hsl(240,68%,50%), hsl(120,68%,46%), hsl(0,68%,48%));
  opacity: .9;
}
.gap-bar::after {
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 2px; background: var(--text); opacity: .55;
}
.gap-bar i {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.gap-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.vote-label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px; }
.vote-row { display: flex; gap: 8px; align-items: center; }
.vote-slider { flex: 1; min-width: 0; accent-color: var(--accent); height: 32px; }
.vote-num {
  width: 72px; padding: 8px; font-size: 16px; text-align: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.vote-btn {
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text); font-weight: 700; white-space: nowrap;
}
.vote-range { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.vote-del {
  margin-top: 8px; background: none; border: none; color: var(--muted);
  font-size: 13px; text-decoration: underline; padding: 4px 0;
}

.site-footer {
  max-width: 960px; margin: 0 auto; padding: 14px 16px 28px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 12px;
}
.site-footer a { color: var(--accent); }