/* ===== リセット・ベース ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
}

:root {
  /* モノクロ Surface */
  --color-bg:           #f8f8f8;
  --color-surface:      #eeeeee;
  --color-card:         #ffffff;
  --color-card-hover:   #f2f2f2;
  --color-border:       #e0e0e0;
  --color-border-light: #cccccc;

  /* テキスト */
  --color-text:         #111111;
  --color-text-sub:     #444444;
  --color-text-muted:   #999999;

  /* アクセント（モノクロ） */
  --color-accent:       #222222;
  --color-accent-hover: #000000;
  --color-accent-bg:    #eeeeee;
  --color-primary-bg:   #eeeeee;
  --color-danger:       #cc0000;
  --color-danger-bg:    rgba(204,0,0,0.07);

  /* 難易度カラー */
  --color-basic:        #2a8a52;
  --color-advanced:     #b86820;
  --color-expert:       #b82830;
  --color-master:       #6428b8;
  --color-remaster:     #c4407e;

  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --transition: 0.15s ease;
}

::selection {
  background: #333333;
  color: #ffffff;
}

/* 小数部分を小さく表示 */
.num-decimal {
  font-size: 0.7em;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'LINESeedJP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ===== アプリレイアウト ===== */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body {
  display: flex;
  flex: 1;
  margin-top: 57px;
}

/* ===== サイドバー ===== */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--color-card);
  border-right: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 57px;
  left: 0;
  height: calc(100vh - 57px);
  z-index: 100;
}

/* ===== サイドバーナビゲーション ===== */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}

.nav-btn {
  background: transparent;
  border: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--color-text-sub);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px 10px 16px;
  text-align: left;
  transition: color var(--transition), background var(--transition);
  letter-spacing: 0.02em;
  margin-right: 12px;
}

.nav-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.nav-btn.active {
  color: var(--color-accent);
  font-weight: 700;
  background: var(--color-accent-bg);
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nav-btn--external {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-btn--guide {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.capture-disclaimer-overlay {
  padding: 8px 16px;
  font-size: 9px;
  color: #888888;
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
}

.guide-block h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text);
}

.guide-block p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 6px;
}

.guide-block ol {
  padding-left: 20px;
  font-size: 13px;
  line-height: 2;
  color: var(--color-text);
}

.guide-block a {
  color: var(--color-accent);
  text-decoration: none;
}

.guide-block a:hover {
  text-decoration: underline;
}

.guide-note {
  margin-top: 8px;
  font-size: 12px !important;
  color: var(--color-text-sub);
}

.guide-note--warn {
  color: #c05050 !important;
}

.guide-bm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 6px;
}

.guide-bm-hint {
  font-size: 12px;
  color: var(--color-text-sub);
}

.guide-bookmarklet-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--color-accent);
  color: #fff !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: grab;
  white-space: nowrap;
}

.guide-bookmarklet-btn:hover {
  background: var(--color-accent-hover);
}

.guide-bm-mobile {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.guide-bm-copy-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
}

.guide-bm-textarea {
  flex: 1;
  font-size: 11px;
  font-family: monospace;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px;
  resize: vertical;
  min-height: 56px;
}

.sidebar-disclaimer {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
  color: var(--color-text-muted);
  line-height: 1.5;
  opacity: 0.8;
}

/* ===== メインエリア（ヘッダー＋コンテンツ） ===== */
/* ===== トップバー ===== */
.topbar {
  background: var(--color-card);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  height: 57px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

.site-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.site-title-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.site-title-btn:hover {
  opacity: 0.7;
}

/* ===== ヘッダー検索バー ===== */
.topbar-search { position: relative; margin-left: auto; }
.topbar-search input {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); color: var(--color-text);
  padding: 5px 10px; font-size: 13px; width: 200px; outline: none;
}
.topbar-search input:focus { border-color: var(--color-master); }
.topbar-search-results {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); min-width: 240px; z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); overflow: hidden;
}
.topbar-search-results.hidden { display: none; }
.tsr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; text-decoration: none; color: var(--color-text);
}
.tsr-item:hover { background: var(--color-surface2); }
.tsr-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tsr-avatar-placeholder { width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.tsr-username { font-size: 13px; font-weight: 600; }

.credits-box {
  max-width: 420px;
  width: 90vw;
  padding: 28px 28px 24px;
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.credits-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.credits-site-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.credits-updated {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.credits-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.credits-list dt {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 14px;
}
.credits-list dt:first-child {
  margin-top: 0;
}
.credits-list dd {
  margin: 0;
  font-size: 0.88rem;
}
.credits-list a {
  color: var(--color-accent);
  text-decoration: none;
}
.credits-list a:hover {
  text-decoration: underline;
}

.topbar-ticker {
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  mask-image: none;
}

.topbar-ticker-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-text-sub);
  animation: ticker-scroll 20s linear infinite;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ===== メインコンテンツ ===== */
.main-area {
  margin-left: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.main {
  flex: 1;
  padding: 24px 28px;
  min-width: 0;
}

.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.section-header h2 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ===== カード ===== */
.card {
  background: var(--color-card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
}

/* ===== ダッシュボード ===== */
.dashboard-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.dashboard-content {
  flex: 1;
  min-width: 0;
  max-width: 660px;
}

.dashboard-capture {
  position: relative;
}

.btn-capture-float {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  font-size: 11px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-side {
  flex: 1;
  min-width: 0;
  max-width: 660px;
}

.dxforce-section {
  display: flex;
  flex-direction: column;
}

/* ===== DXFORCE ===== */
.dxforce-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.dxforce-section-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-card.stat-card--force {
  background: #ffffff;
  text-align: center;
}

.stat-card--force .stat-label {
  color: var(--color-text-sub);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.stat-card--force .stat-label .stat-label-spacer {
  /* iボタンと同幅の透明スペーサーで左右バランスを取る */
  width: 22px;
}

.info-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  margin-left: 4px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--transition);
}

.info-btn:hover {
  opacity: 1;
}

/* DXFORCEインフォモーダル */
.dxforce-info-body {
  padding: 4px 0 8px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.dxforce-info-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dxforce-info-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dxforce-info-body p {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.6;
  margin: 0;
}

.dxforce-info-body h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 4px 0 0;
}

.dxforce-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dxforce-info-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 10px;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--color-border);
}

.dxforce-info-table td {
  padding: 4px 8px 4px 0;
  color: var(--color-text-sub);
  border-bottom: 1px solid var(--color-border-light);
  font-variant-numeric: tabular-nums;
}

.dxforce-info-table .row-ap-plus td {
  color: var(--color-text);
  font-weight: 600;
}

.dxforce-info-note {
  font-size: 11px !important;
  color: var(--color-text-muted) !important;
}

.dxforce-rank-table td.rank-name { font-weight: 700; letter-spacing: 0.05em; }
.dxforce-rank-table td.rank-min  { color: var(--color-text-muted); text-align: right; padding-left: 12px; }
.dxforce-rank-table td[data-rank="MAIMAI"]   { color: var(--color-text); font-weight: 700; }
.dxforce-rank-table td[data-rank="DELUXE"]   { color: var(--color-text); font-weight: 700; }
.dxforce-rank-table td[data-rank="ETERNITY"] { color: var(--color-text); font-weight: 700; }
.dxforce-rank-table td[data-rank="SPECTRUM"] { color: var(--color-text); font-weight: 700; }
.dxforce-rank-table td[data-rank="CYCLE"]    { color: var(--color-text); font-weight: 700; }
.dxforce-rank-table td[data-rank="TWINKLE"]  { color: var(--color-text); font-weight: 700; }
.dxforce-rank-table td[data-rank="LUMINA"]   { color: var(--color-text-sub); }
.dxforce-rank-table td[data-rank="AURORA"]   { color: var(--color-text-sub); }
.dxforce-rank-table td[data-rank="ROOKIE"]   { color: var(--color-text-muted); }

.stat-card--force .stat-value {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-text);
}

.dxforce-rank {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  margin-top: 4px;
  color: var(--color-text-muted);
}
.dxforce-rank:empty { display: none; }
.dxforce-rank[data-rank="MAIMAI"],
.dxforce-rank[data-rank="DELUXE"],
.dxforce-rank[data-rank="ETERNITY"],
.dxforce-rank[data-rank="SPECTRUM"],
.dxforce-rank[data-rank="CYCLE"],
.dxforce-rank[data-rank="TWINKLE"]  { color: var(--color-text); }
.dxforce-rank[data-rank="LUMINA"],
.dxforce-rank[data-rank="AURORA"]   { color: var(--color-text-sub); }
.dxforce-rank[data-rank="ROOKIE"]   { color: var(--color-text-muted); }

.rg-section-label--force {
  color: var(--color-text-sub);
}

.rg-grid--force {
  grid-template-columns: repeat(5, 1fr);
  max-width: none;
}


/* ===== ダッシュボードパネルタブ（レスポンシブ切り替え） ===== */
.dashboard-wide-nav {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.dashboard-wide-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  cursor: default;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  margin-bottom: -1px;
  letter-spacing: 0.04em;
}

.dashboard-wide-btn.active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 1023px) {
  .dashboard-wide-nav { display: none; }
}

.dashboard-panel-tabs {
  display: none;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.dashboard-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  margin-bottom: -1px;
  letter-spacing: 0.04em;
  transition: all var(--transition);
}

.dashboard-tab-btn:hover {
  color: var(--color-text-sub);
}

.dashboard-tab-btn.active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
  font-weight: 600;
}

.dashboard-tab-btn[data-panel="force"].active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

@media (max-width: 1023px) {
  .dashboard-panel-tabs {
    display: flex;
  }

  .dashboard-layout {
    display: block;
  }

  .dashboard-content {
    max-width: none;
    display: none;
  }

  .dashboard-side {
    max-width: none;
    display: none;
  }

  .dashboard-layout[data-active-panel="rating"] .dashboard-content {
    display: block;
  }

  .dashboard-layout[data-active-panel="force"] .dashboard-side {
    display: block;
  }
}

.dashboard-cards {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-border);
}

.dashboard-cards .stat-card--highlight,
.dashboard-cards .stat-card--force {
  flex: 1;
  text-align: center;
}

.dashboard-cards .stat-card--player {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.stat-player-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
}

.stat-player-title-wrap {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  position: relative;
}

.stat-player-title-wrap::before,
.stat-player-title-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 1;
  pointer-events: none;
  display: none;
}
.stat-player-title-wrap::before { left: 0; background: linear-gradient(to right, var(--color-bg), transparent); }
.stat-player-title-wrap::after  { right: 0; background: linear-gradient(to left, var(--color-bg), transparent); }
.stat-player-title-wrap.scrolling::before,
.stat-player-title-wrap.scrolling::after { display: block; }

.stat-player-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-sub);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 3px;
  display: inline-block;
  box-sizing: border-box;
}

.stat-player-title-wrap.scrolling {
  justify-content: flex-start;
}

.stat-player-title-wrap.scrolling .stat-player-title {
  transition: transform 0s linear, opacity 0.4s ease;
}

.stat-player-title-wrap.capture-freeze::before,
.stat-player-title-wrap.capture-freeze::after {
  display: none !important;
}

/* 称号色クラス (モノクロ) */
.title-color--normal   { background: #aaaaaa; color: #fff; }
.title-color--bronze   { background: #777777; color: #fff; }
.title-color--silver   { background: #999999; color: #fff; }
.title-color--gold     { background: #555555; color: #fff; }
.title-color--rainbow  { background: #222222; color: #fff; }

.stat-card {
  background: var(--color-bg);
  border: none;
  border-radius: 0;
  padding: 20px 16px;
  text-align: center;
  gap: 0;
}

.stat-card.stat-card--highlight {
  background: #ffffff;
}

.stat-card--highlight .stat-label {
  color: var(--color-text-sub);
}

.stat-card--highlight .stat-value {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-text);
}

.stat-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--color-text-sub);
  font-size: 13px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  color: var(--color-text);
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.recent-card h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ===== フィルター ===== */
.filter-card {
  margin-bottom: 12px;
  padding: 10px 16px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-row--checkboxes {
  padding-top: 8px;
  gap: 16px;
}

.filter-chart-type {
  display: flex;
  gap: 4px;
}

.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--color-text-sub);
  cursor: pointer;
  user-select: none;
}

.filter-checkbox-label input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
  accent-color: var(--color-master);
}

.btn-filter-reset {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: auto;
  transition: color var(--transition);
}

.btn-filter-reset:hover {
  color: var(--color-text-sub);
}

.filter-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* ===== フォーム共通 ===== */
select, input[type="text"], input[type="number"], input[type="date"] {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 12px;
  padding: 4px 8px;
  transition: border-color var(--transition);
}

select:focus, input:focus {
  border-color: var(--color-border-light);
  outline: none;
}

select option {
  background: var(--color-bg);
}

/* ===== ボタン ===== */
.btn {
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 18px;
  transition: all var(--transition);
  letter-spacing: 0.03em;
  border: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(103,80,164,0.3);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 2px 6px rgba(103,80,164,0.4);
}

.btn-secondary {
  background: var(--color-accent-bg);
  color: var(--color-accent);
}

.btn-secondary:hover {
  background: var(--color-surface);
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger);
  color: #fff;
}

.filter-search-row {
  margin-bottom: 12px;
}

.filter-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
}

.filter-search:focus {
  border-color: var(--color-accent);
}

/* ===== スコアリスト ===== */
.score-list-container,
.score-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* スコアアイテム：テーブル行スタイル */
.score-item {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  /* padding なし：ジャケットを縦線にくっつける */
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  /* 難易度色の縦線 */
  border-left: 3px solid transparent;
  transition: background var(--transition);
}

.score-item:last-child {
  border-bottom: none;
}

.score-item:hover {
  background: var(--color-card);
}

.score-item.diff-basic    { border-left-color: var(--color-basic); }
.score-item.diff-advanced { border-left-color: var(--color-advanced); }
.score-item.diff-expert   { border-left-color: var(--color-expert); }
.score-item.diff-master   { border-left-color: var(--color-master); }
.score-item.diff-remaster { border-left-color: var(--color-remaster); }

.score-item--unrecorded {
  opacity: 0.45;
}

.score-item--unrecorded:hover {
  opacity: 0.75;
}

.score-pct--unrecorded {
  color: var(--color-border-light);
  font-size: 10px;
  font-style: italic;
}

/* レベルセクションヘッダー */
.score-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-light);
  position: sticky;
  top: 57px;
  z-index: 10;
}

.score-level-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
}

.score-level-count {
  font-size: 10px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.score-level-section {
  border-bottom: 2px solid var(--color-border);
}

/* ジャケットラッパー */
.score-jacket-wrap {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

/* DXひし形バッジ */
.score-jacket-wrap--dx::after {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg,
    hsl(0,   70%, 70%),
    hsl(43,  70%, 65%),
    hsl(142, 50%, 60%),
    hsl(199, 60%, 62%),
    hsl(270, 60%, 72%));
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,0.35);
}

/* ジャケット画像：縦線の右に隙間なし */
.score-jacket {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  background: var(--color-bg);
  align-self: center;
}

.score-jacket--fallback {
  background: var(--color-surface);
}

/* 左カラム：ジャケット + 曲名テキストをまとめたクリック可能エリア */
.score-song {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  border-right: 1px solid var(--color-border);
}

.score-song--clickable {
  cursor: pointer;
}
.score-song--clickable:hover {
  background: var(--color-card-hover);
}

.score-song-text {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.score-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.score-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.score-diff-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.score-diff-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* DX / STD チャートタイプバッジ（非表示：DXマークで代替） */
.chart-type-badge {
  display: none;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}

.chart-type-dx {
  background: linear-gradient(90deg,
    hsl(0,   45%, 68%),
    hsl(25,  47%, 62%),
    hsl(43,  47%, 58%),
    hsl(142, 34%, 57%),
    hsl(199, 45%, 59%),
    hsl(234, 45%, 70%),
    hsl(292, 45%, 68%));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.chart-type-std {
  background: hsl(217, 47%, 60%);
  color: #fff;
}

.badge-basic    { color: var(--color-basic); }
.badge-advanced { color: var(--color-advanced); }
.badge-expert   { color: var(--color-expert); }
.badge-master   { color: var(--color-master); }
.badge-remaster { color: var(--color-remaster); }

/* 右カラム：スコア情報 + アーティスト */
.score-data {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.score-meta {
  display: grid;
  grid-template-columns: 92px 34px auto;
  align-items: center;
  gap: 6px;
}

.score-pct {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.score-rank {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-sub);
  letter-spacing: 0.03em;
}

.score-rank.rank-SSSp { color: var(--color-text); }
.score-rank.rank-SSS  { color: var(--color-text-sub); }
.score-rank.rank-SSp  { color: var(--color-text-sub); }
.score-rank.rank-other { color: var(--color-text-muted); }

.score-badges {
  display: flex;
  gap: 3px;
}

.badge-fc, .badge-fs {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.03em;
}

.badge-fc {
  background: rgba(42,138,82,0.1);
  color: var(--color-basic);
  border: 1px solid rgba(42,138,82,0.25);
}

.badge-fs {
  background: rgba(184,104,32,0.1);
  color: var(--color-advanced);
  border: 1px solid rgba(184,104,32,0.25);
}

.score-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-artist {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 2;
  min-width: 0;
}

.score-rating {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-sub);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.score-version {
  display: none;
}
.score-version--current {
  color: var(--color-accent);
  font-weight: 600;
}
.score-date {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.score-actions {
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-icon {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-icon:hover {
  border-color: var(--color-border);
  color: var(--color-text-sub);
  background: var(--color-surface);
}

.btn-icon.danger:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* ===== 統計 ===== */

.stats-section {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.stats-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.stats-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* バージョンチップ */
.stats-version-filter {
  margin-bottom: 12px;
}

.stats-version-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stats-ver-chip {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-sub);
  cursor: pointer;
  border-radius: 2px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  line-height: 1.6;
}

.stats-ver-chip:hover {
  background: var(--color-surface);
}

.stats-ver-chip.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

/* 割合テーブル */
.stats-rate-table-wrap {
  overflow-x: auto;
}

.stats-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.stats-rate-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.stats-rate-table th.stats-rt-diff {
  text-align: left;
  padding-left: 0;
}

.stats-rate-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.stats-rate-table tr:last-child td {
  border-bottom: none;
}

.stats-rt-diff {
  white-space: nowrap;
  padding-left: 0 !important;
  width: 1px;
  vertical-align: middle;
}

.stats-rt-diff-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stats-rt-diff-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 0;
  border-radius: 2px;
  color: #fff;
  width: 52px;
  text-align: center;
}

.stats-rt-diff-badge--basic    { background: var(--color-basic); }
.stats-rt-diff-badge--advanced { background: var(--color-advanced); }
.stats-rt-diff-badge--expert   { background: var(--color-expert); }
.stats-rt-diff-badge--master   { background: var(--color-master); }
.stats-rt-diff-badge--remaster { background: var(--color-remaster); }

.stats-rt-diff-count {
  font-size: 10px;
  color: var(--color-text-muted);
}

.stats-rt-val {
  font-size: 12px;
  color: var(--color-text);
}

.stats-rt-val--empty {
  color: var(--color-text-muted);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.stats-grid .card h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  color: var(--color-text-muted);
}

.stats-bar-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-bar-label {
  width: 68px;
  font-size: 11px;
  color: var(--color-text-sub);
  flex-shrink: 0;
}

.stats-bar-track {
  flex: 1;
  background: var(--color-surface);
  border-radius: 2px;
  height: 6px;
  overflow: hidden;
}

.stats-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-border-light);
  transition: width 0.4s ease;
  min-width: 2px;
}

.stats-bar-count {
  font-size: 11px;
  color: var(--color-text-muted);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ===== モーダル ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}

.modal-sm {
  max-width: 560px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.modal-close,
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius);
  transition: color var(--transition);
  line-height: 1;
}

.modal-close:hover,
.modal-close-btn:hover {
  color: var(--color-text);
}

/* ===== スコアフォーム ===== */
.score-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-label select,
.form-label input[type="text"],
.form-label input[type="number"],
.form-label input[type="date"] {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--color-card);
}

.form-hint {
  font-size: 11px;
  color: var(--color-text-sub);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ===== 削除確認 ===== */
.delete-msg {
  color: var(--color-text-sub);
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.6;
}

/* ===== サイドバーフッター Twitter リンク ===== */
.header-twitter {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 11px;
}

.header-twitter:hover {
  color: var(--color-text);
}

.twitter-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ===== フォーム内 楽曲選択カード ===== */

.form-song-selected {
  display: flex;
  flex-direction: column;
}

.form-song-empty {
  width: 100%;
  padding: 14px;
  background: var(--color-card);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  transition: all var(--transition);
}

.form-song-empty:hover {
  border-color: var(--color-border-light);
  color: var(--color-text-sub);
}

.form-song-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.form-song-jacket {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--color-surface);
}

.form-song-jacket--fallback {
  background: var(--color-surface);
}

.form-song-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-song-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-song-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-song-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;
}

.form-song-diff-label {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

/* ===== 楽曲選択ピッカーモーダル ===== */

/* ===== 画像プレビューモーダル ===== */
.modal-capture {
  max-width: 820px;
  max-height: 90vh;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
}

.capture-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-height: 0;
}

.capture-preview {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capture-preview img {
  max-width: 100%;
  max-height: calc(90vh - 120px);
  height: auto;
  width: auto;
  display: block;
}

.capture-side {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.capture-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.capture-tweet-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.capture-tweet-info {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: flex;
  gap: 4px;
}

.capture-info-icon {
  flex-shrink: 0;
  line-height: 0;
  color: var(--color-text-sub);
}

.capture-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.capture-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.capture-stat-row--date {
  margin-bottom: 4px;
}

.capture-stat-label {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.capture-stat-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.capture-stat-row--date .capture-stat-value {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.capture-stat-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

.btn-twitter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #000;
  color: #fff;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--transition);
  width: 100%;
}

.btn-twitter:hover {
  background: #333;
}

/* ===== 楽曲選択ピッカー ===== */
.modal-picker {
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.modal-picker .modal-header {
  padding: 14px 20px 12px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.picker-controls-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.picker-diff-tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  border-bottom: none;
}

.picker-type-toggles {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-left: 1px solid var(--color-border);
  flex-shrink: 0;
}

.picker-type-btn {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1.5px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition);
  line-height: 1.4;
}

.picker-type-btn--dx.active {
  background: linear-gradient(90deg,
    hsl(0,   45%, 68%),
    hsl(43,  47%, 58%),
    hsl(142, 34%, 57%),
    hsl(199, 45%, 59%),
    hsl(292, 45%, 68%));
  color: #fff;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.picker-type-btn--std.active {
  background: hsl(217, 47%, 60%);
  color: #fff;
  border-color: transparent;
}

.picker-search-row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.picker-search {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
}

.picker-search:focus {
  border-color: var(--color-border-light);
}

.picker-level-chips--dim .picker-level-chip {
  opacity: 0.35;
  pointer-events: none;
}

.picker-diff-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  padding: 8px 14px;
  transition: all var(--transition);
  white-space: nowrap;
  margin-bottom: -1px;
  letter-spacing: 0.04em;
}

.picker-diff-tab:hover {
  color: var(--color-text-sub);
}

.picker-diff-tab.active {
  font-weight: 600;
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.picker-diff-tab.active.diff-basic    { color: var(--color-basic);    border-bottom-color: var(--color-basic); }
.picker-diff-tab.active.diff-advanced { color: var(--color-advanced); border-bottom-color: var(--color-advanced); }
.picker-diff-tab.active.diff-expert   { color: var(--color-expert);   border-bottom-color: var(--color-expert); }
.picker-diff-tab.active.diff-master   { color: var(--color-master);   border-bottom-color: var(--color-master); }
.picker-diff-tab.active.diff-remaster { color: var(--color-remaster); border-bottom-color: var(--color-remaster); }

.picker-level-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.picker-level-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-sub);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  transition: all var(--transition);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.picker-level-chip:hover {
  border-color: var(--color-border-light);
  color: var(--color-text);
}

.picker-level-chip.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-card);
}

.picker-song-list {
  flex: 1;
  overflow-y: auto;
}

.picker-song-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition);
}

.picker-song-item:last-child {
  border-bottom: none;
}

.picker-song-item:hover {
  background: var(--color-card);
}

.picker-jacket {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--color-bg);
}

.picker-jacket--fallback {
  background: var(--color-surface);
}

.picker-song-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.picker-song-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-song-artist {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-song-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.picker-song-level {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ===== 楽曲検索ドロップダウン ===== */
.song-search-wrap {
  position: relative;
}

.song-search-wrap input {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
}

.song-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 300;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.song-search-dropdown.hidden {
  display: none;
}

.song-search-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}

.song-search-item:last-child {
  border-bottom: none;
}

.song-search-item:hover {
  background: var(--color-card);
}

.song-search-title {
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
}

.song-search-artist {
  color: var(--color-text-muted);
  font-size: 10px;
}

.song-search-no-result {
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 12px;
  text-align: center;
}

/* ===== Ratingグリッド ===== */
.rg-section {
  margin-bottom: 20px;
}

.rg-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 6px 2px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.rg-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.rg-section-label--new {
  color: var(--color-accent);
}

.rg-section-sum {
  font-size: 11px;
  color: var(--color-text-muted);
}

.rg-section-sum strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.rg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

/* カード本体：正方形ジャケット比率 */
.rg-card {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  border-left: 3px solid transparent;
  background: var(--color-surface);
}

.rg-card.diff-basic    { border-left-color: var(--color-basic); }
.rg-card.diff-advanced { border-left-color: var(--color-advanced); }
.rg-card.diff-expert   { border-left-color: var(--color-expert); }
.rg-card.diff-master   { border-left-color: var(--color-master); }
.rg-card.diff-remaster { border-left-color: var(--color-remaster); }

.rg-card--empty {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  cursor: default;
  opacity: 0.4;
}

.rg-jacket-wrap {
  position: absolute;
  inset: 0;
}

.rg-jacket {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rg-jacket--fallback {
  background: var(--color-surface);
}

/* DXひし形バッジ（rg-card用） */
.rg-jacket-wrap--dx::after {
  display: block;
  content: '';
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg,
    hsl(0,   70%, 70%),
    hsl(43,  70%, 65%),
    hsl(142, 50%, 60%),
    hsl(199, 60%, 62%),
    hsl(270, 60%, 72%));
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,0.35);
  z-index: 10;
}

/* オーバーレイ：上下に情報 */
.rg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    transparent 35%,
    transparent 55%,
    rgba(0,0,0,0.72) 100%
  );
}

.rg-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 4px 5px 0;
  position: relative;
}

.rg-top-left {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rg-diff-badge {
  font-size: clamp(7px, 10.9cqw, 14px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.03em;
}


.rg-rating {
  position: absolute;
  top: 0;
  right: 0;
  font-size: clamp(12px, 18cqw, 24px);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* テキストを右上に配置（borderトリック三角の内側） */
  padding: 3px 5px 0 0;
  text-align: right;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

/* 三角背景をborderトリックで描画（html2canvas対応） */
/* 右上が頂点の直角三角形：border-left = 透明、border-top = 難易度色 */
.rg-rating-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 clamp(36px, 54cqw, 72px) clamp(36px, 54cqw, 72px) 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.diff-basic    .rg-rating-bg { border-right-color: var(--color-basic); }
.diff-advanced .rg-rating-bg { border-right-color: var(--color-advanced); }
.diff-expert   .rg-rating-bg { border-right-color: var(--color-expert); }
.diff-master   .rg-rating-bg { border-right-color: var(--color-master); }
.diff-remaster .rg-rating-bg { border-right-color: var(--color-remaster); }

.rg-rating-val {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.rg-bottom {
  padding: 0 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rg-title {
  font-size: clamp(7px, 10.2cqw, 13px);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.rg-score-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rg-pct {
  font-size: clamp(6px, 8.6cqw, 11px);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
}

.rg-rank {
  display: none;
}

/* ===== 空メッセージ ===== */
.empty-msg {
  color: var(--color-text-muted);
  text-align: center;
  padding: 40px;
  font-size: 12px;
  background: var(--color-bg);
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .sidebar {
    width: 160px;
  }
  .main-area {
    margin-left: 160px;
  }
  .topbar {
    padding: 0 18px;
  }
  .main {
    padding: 16px 14px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 11px;
  }


  .sidebar {
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 0;
    top: auto;
    left: 0;
    border-right: none;
    border-top: 1px solid var(--color-border);
    flex-direction: row;
    z-index: 100;
    background: var(--color-bg);
  }
  .sidebar-footer {
    display: none;
  }
  .sidebar-account {
    display: none;
  }
  .sidebar-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    width: 100%;
  }
  .nav-btn {
    text-align: center;
    border-left: none;
    border-top: 2px solid transparent;
    border-radius: 0;
    padding: 9px 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0;
  }
  .nav-btn.active {
    border-top-color: var(--color-accent);
    border-left-color: transparent;
    background: var(--color-accent-bg);
  }
  .nav-btn--guide {
    margin-top: 0;
    border-top: 2px solid transparent;
    border-left: none;
    border-right: none;
  }
  .nav-btn--settings-sp {
    display: block;
  }
  .main-area {
    margin-left: 0;
  }
  .topbar {
    padding: 10px 12px;
  }
  .main {
    padding: 16px 12px;
    padding-bottom: 100px;
  }
  .dashboard-content {
    overflow-x: auto;
  }
  .stat-card--highlight .stat-value {
    font-size: 1.4rem;
  }
  .dashboard-cards .stat-card--highlight,
  .dashboard-cards .stat-card--force {
    flex: 1;
  }
  .stat-card {
    padding: 12px 10px;
  }
  .stat-breakdown-value {
    font-size: 1.1rem;
  }
  .stat-breakdown-label {
    font-size: 9px;
  }
  .btn-capture-float {
    top: 4px;
    right: 4px;
    padding: 3px 7px;
  }
  .score-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-rows: auto;
  }
  .score-jacket {
    width: 48px;
    height: 48px;
  }
  .score-song-text {
    padding: 6px 8px;
  }
  .score-data {
    padding: 6px 8px;
  }
  .score-artist {
    display: none;
  }
  .score-title {
    font-size: 11px;
  }
  .score-diff-row {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .score-diff-badge {
    font-size: 9px;
    flex-shrink: 0;
  }
  .score-meta {
    grid-template-columns: 76px 28px auto;
  }
  .score-pct {
    font-size: 11px;
  }
  .score-actions {
    padding: 0 6px;
  }


  /* DXマーク・三角形を70%に縮小 */
  .score-jacket-wrap--dx::after,
  .rg-jacket-wrap--dx::after {
    transform: rotate(45deg) scale(0.7);
  }
  .rg-rating {
    font-size: clamp(9px, 13cqw, 17px);
    padding: 2px 3px 0 0;
  }
  .rg-rating-bg {
    border-width: 0 clamp(25px, 38cqw, 50px) clamp(25px, 38cqw, 50px) 0;
  }

  /* ダッシュボード */
  .section-header h2 {
    font-size: 13px;
  }
  .stat-label {
    font-size: 10px;
  }
  .stat-value {
    font-size: 1.1rem;
  }
  .stat-player-name {
    font-size: 13px;
  }
  .stat-player-title {
    font-size: 10px;
  }

  /* 統計 */
  .stats-table th,
  .stats-table td {
    padding: 4px 6px;
    font-size: 10px;
  }

  /* プレイ履歴 */
  .playlog-summary {
    grid-template-columns: 48px minmax(0,1fr) auto auto;
  }
  .playlog-jacket,
  .playlog-jacket img {
    width: 48px;
    height: 48px;
  }
  .playlog-title {
    font-size: 11px;
  }
  .playlog-diff {
    font-size: 9px;
  }
  .playlog-score {
    font-size: 13px;
  }
  .playlog-track,
  .playlog-date {
    font-size: 9px;
  }
  .playlog-right {
    padding: 6px 8px;
    min-width: 0;
    max-width: 80px;
  }
  .playlog-info {
    padding: 6px 8px;
  }
  .playlog-detail {
    padding: 10px 10px 10px 58px;
  }
  .playlog-notes th,
  .playlog-notes td {
    padding: 2px 5px;
    font-size: 10px;
  }

  /* モーダル */
  .modal-overlay {
    padding: 8px;
  }
  .credits-box {
    padding: 20px 16px;
  }

  /* フィルター */
  .filter-search-row input {
    font-size: 12px;
  }
}

/* ===== 過去大会タブ ===== */

.tourn-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tourn-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tourn-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.tourn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.tourn-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tourn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--color-border);
}

.tourn-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.tourn-year {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 2px 7px;
  border-radius: 99px;
}

.tourn-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}

.tourn-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  padding: 5px 14px;
}

.tourn-rank--1 { background: linear-gradient(90deg, rgba(212,175,55,0.10) 0%, transparent 70%); }

.tourn-pos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.tourn-pos svg {
  display: block;
}

.tourn-pos--1 { color: #c8972a; }
.tourn-pos--2 { color: #8e9aab; }
.tourn-pos--3 { color: #a0714a; }

.tourn-player {
  color: var(--color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tourn-rank--1 .tourn-player {
  font-weight: 700;
}

.tourn-songs-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px 4px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.tourn-songs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tourn-song-card {
  display: flex;
  align-items: stretch;
  background: var(--color-bg);
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  min-height: 60px;
}

.tourn-song-jacket {
  width: 60px;
  height: 60px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius);
  margin: 6px;
}

.tourn-song-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 10px;
}

.tourn-song-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.tourn-song-artist {
  font-size: 0.62rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tourn-song-lv-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.tourn-song-lv {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 0;
  letter-spacing: 0.02em;
}

.tourn-song-lv--mas {
  background: var(--color-master);
  color: #fff;
}

.tourn-song-lv--remas {
  background: var(--color-remaster);
  color: #fff;
}

.tourn-song-const {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.tourn-note {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 0 14px 12px;
}

@media (max-width: 560px) {
  .tourn-list {
    grid-template-columns: 1fr;
  }

  .tourn-card {
    padding: 12px;
  }

  .tourn-card-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .tourn-song-card {
    min-height: 52px;
  }

  .tourn-song-jacket {
    width: 52px;
    height: 52px;
  }

  .filter-card {
    padding: 8px 10px;
  }

  .filter-row {
    gap: 6px;
  }

  .filter-row label {
    font-size: 10px;
    gap: 3px;
  }

  .filter-row label select {
    font-size: 11px;
    padding: 3px 4px;
    max-width: 72px;
  }

  .filter-row--checkboxes {
    gap: 8px;
    padding-top: 6px;
  }

  .filter-checkbox-label {
    font-size: 11px;
    gap: 3px;
  }

  .filter-checkbox-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
  }

  .filter-row--checkboxes label select {
    font-size: 11px;
    padding: 3px 4px;
    max-width: 90px;
  }
}

/* ===== レート推移グラフ ===== */

.history-period-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.history-period-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-sub);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.history-period-btn:hover {
  background: var(--color-card-hover);
  color: var(--color-text);
}

.history-period-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.history-chart-wrap {
  position: relative;
  height: 260px;
}

.history-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .history-chart-wrap {
    height: 200px;
  }
  .history-period-btn {
    font-size: 10px;
    padding: 2px 7px;
  }
}

/* ===== プレート ===== */
.plates-version-group {
  margin-bottom: 28px;
}

.plates-version-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-sub);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.plates-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.plates-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition);
}

.plates-card--achieved {
  border-color: var(--color-accent);
}

.plates-img-wrap {
  width: 100%;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}

.plates-img-wrap.plates-img--missing::after {
  content: 'No Image';
  font-size: 0.65rem;
  color: var(--color-text-muted);
  padding: 12px 0;
}

.plates-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  cursor: zoom-in;
}

.plates-info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plates-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.plates-type-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.plates-type-desc {
  font-size: 0.72rem;
  color: var(--color-text-sub);
}

.plates-achieved-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-left: auto;
}

.plates-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plates-bar-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.plates-bar-label {
  font-size: 0.6rem;
  font-weight: 700;
  width: 26px;
  flex-shrink: 0;
  text-align: right;
}

.plates-bar-label.diff-basic    { color: var(--color-basic); }
.plates-bar-label.diff-advanced { color: var(--color-advanced); }
.plates-bar-label.diff-expert   { color: var(--color-expert); }
.plates-bar-label.diff-master   { color: var(--color-master); }
.plates-bar-label.diff-remaster { color: var(--color-remaster); }

.plates-bar-track {
  flex: 1;
  height: 5px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.plates-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.plates-bar-fill--achieved {
  background: var(--color-accent) !important;
}

.plates-bar-count {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  width: 36px;
  flex-shrink: 0;
  text-align: right;
}

.plates-progress-text {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 2px;
}

.plates-progress-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--color-accent);
}

.plates-progress-clickable:hover {
  opacity: 0.8;
}

/* ===== 未達成曲モーダル ===== */
.missing-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.missing-modal.active {
  display: flex;
}

.missing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.missing-modal-panel {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: min(720px, 96vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.missing-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.missing-modal-title {
  font-size: 0.82rem;
  font-weight: 600;
}

.missing-modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.missing-modal-close:hover {
  color: var(--color-text);
}

.missing-modal-list {
  overflow-y: auto;
  padding: 10px;
}

.missing-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: start;
}

.missing-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.missing-col-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  border-radius: 3px;
}

.missing-col-header.diff-basic    { background: var(--color-basic);     color: #fff; }
.missing-col-header.diff-advanced { background: var(--color-advanced);  color: #fff; }
.missing-col-header.diff-expert   { background: var(--color-expert);    color: #fff; }
.missing-col-header.diff-master   { background: var(--color-master);    color: #fff; }
.missing-col-header.diff-remaster { background: var(--color-remaster);  color: #fff; }

.missing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.missing-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
  cursor: default;
}

.missing-cell-jacket {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.missing-cell-tooltip {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 3px;
}

.missing-cell:hover .missing-cell-tooltip {
  opacity: 1;
}

.missing-cell-lv {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.missing-cell-title {
  font-size: 0.58rem;
  color: #ddd;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .plates-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .plates-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ===== 画像プレビューモーダル ===== */
.img-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.img-modal.active {
  display: flex;
}

.img-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.img-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
  z-index: 1;
}

.img-modal-close:hover {
  opacity: 1;
}

.img-modal-img {
  position: relative;
  width: 70vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
  cursor: zoom-out;
}

/* ===== プレイ履歴 ===== */
.playlog-empty {
  color: var(--color-text-muted);
  padding: 32px;
  text-align: center;
}

.playlog-list {
  display: flex;
  flex-direction: column;
}

.playlog-card {
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  background: var(--color-bg);
  transition: background var(--transition);
}
.playlog-card:last-child { border-bottom: none; }
.playlog-card.diff-basic    { border-left-color: var(--color-basic); }
.playlog-card.diff-advanced { border-left-color: var(--color-advanced); }
.playlog-card.diff-expert   { border-left-color: var(--color-expert); }
.playlog-card.diff-master   { border-left-color: var(--color-master); }
.playlog-card.diff-remaster { border-left-color: var(--color-remaster); }

/* サマリー行 */
.playlog-summary {
  display: grid;
  grid-template-columns: 68px minmax(0,1fr) auto auto;
  align-items: stretch;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.playlog-summary:hover,
.playlog-card--open .playlog-summary {
  background: var(--color-card);
}

.playlog-jacket {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  background: var(--color-surface);
  align-self: center;
}
.playlog-jacket img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
}

/* 曲名・達成率エリア */
.playlog-info {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.playlog-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.playlog-score {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* 右カラム（難易度上段・トラック+日時下段） */
.playlog-right {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  border-right: 1px solid var(--color-border);
}

.playlog-diff {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: right;
}
.playlog-diff.diff-basic    { color: var(--color-basic); }
.playlog-diff.diff-advanced { color: var(--color-advanced); }
.playlog-diff.diff-expert   { color: var(--color-expert); }
.playlog-diff.diff-master   { color: var(--color-master); }
.playlog-diff.diff-remaster { color: var(--color-remaster); }

.playlog-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.playlog-track {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-sub);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.playlog-date {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 矢印 */
.playlog-arrow {
  padding: 0 12px;
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  transition: transform var(--transition);
}
.playlog-card--open .playlog-arrow {
  transform: rotate(90deg);
}

/* 詳細パネル */
.playlog-detail {
  border-top: 1px solid var(--color-border);
  padding: 12px 14px 12px 82px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-card);
}
.playlog-detail.hidden { display: none; }

.playlog-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-sub);
}

.playlog-rating,
.playlog-combo {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.playlog-notes {
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.playlog-notes th,
.playlog-notes td {
  padding: 3px 8px;
  text-align: right;
  border: 1px solid var(--color-border);
}

.playlog-notes th {
  background: var(--color-surface);
  color: var(--color-text-sub);
  font-weight: 600;
}

.playlog-note-label {
  text-align: left !important;
  font-weight: 600;
  color: var(--color-text-sub);
}

/* ===== 楽曲情報モーダル ===== */

.modal-song-info {
  max-width: 720px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.song-info-body {
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ヘッダー：ジャケット＋基本情報 */
.si-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.si-jacket {
  width: 100px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--color-surface);
  border-radius: var(--radius);
}

.si-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.si-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.si-artist {
  font-size: 12px;
  color: var(--color-text-sub);
}

.si-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  font-size: 12px;
  margin-top: 2px;
}

.si-info-key {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.si-info-val {
  color: var(--color-text);
  font-weight: 500;
}

.si-wiki-link {
  font-size: 11px;
  color: var(--color-text-sub);
  text-decoration: underline;
  margin-top: 2px;
}
.si-wiki-link:hover {
  color: var(--color-text);
}

/* 譜面セクション */
.si-chart-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.si-chart-type-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.si-chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.si-chart-table th {
  background: var(--color-surface);
  color: var(--color-text-sub);
  font-weight: 600;
  padding: 5px 8px;
  text-align: right;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.si-chart-table th:first-child {
  text-align: left;
}

.si-chart-table td {
  padding: 5px 8px;
  text-align: right;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.si-th-const { color: var(--color-text-muted) !important; font-weight: 400 !important; }
.si-th-designer { min-width: 80px; }

.si-diff-label {
  text-align: left !important;
  font-weight: 600;
  white-space: nowrap;
}
.si-row.diff-basic    .si-diff-label { color: var(--color-basic); }
.si-row.diff-advanced .si-diff-label { color: var(--color-advanced); }
.si-row.diff-expert   .si-diff-label { color: var(--color-expert); }
.si-row.diff-master   .si-diff-label { color: var(--color-master); }
.si-row.diff-remaster .si-diff-label { color: var(--color-remaster); }

.si-lv { font-weight: 600; }
.si-const { color: var(--color-text-muted); font-size: 11px; }
.si-total { font-weight: 600; }
.si-designer {
  text-align: left !important;
  font-size: 11px;
  color: var(--color-text-sub);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .si-jacket {
    width: 72px;
    height: 72px;
  }
  .si-title { font-size: 13px; }
  .si-chart-table { font-size: 10px; }
  .si-chart-table th,
  .si-chart-table td { padding: 4px 5px; }
  .si-designer,
  .si-th-designer { display: none; }
  .song-info-body { padding: 12px 12px 16px; }
}

/* ===== アカウント・サイドバー ===== */
.sidebar-account {
  border-top: 1px solid var(--color-border);
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sidebar-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sidebar-settings-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 8px 0 6px;
}
.account-profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  padding: 4px;
  transition: background 0.15s;
}
.account-profile-link:hover {
  background: var(--bg-hover, rgba(255,255,255,0.07));
}
.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.account-username {
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-settings-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.sidebar-settings-btn:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.sidebar-settings-label {
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
/* スマホでは非表示（navに「設定」ボタンを出す） */
.nav-btn--settings-sp {
  display: none;
}
.settings-section--logout {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.btn-discord {
  background: #5865F2;
  color: #fff;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-discord:hover { background: #4752c4; }
.btn-xs {
  padding: 2px 8px;
  font-size: 0.75rem;
}
.btn-danger {
  background: transparent;
  color: var(--red, #f87171);
  border: 1px solid var(--red, #f87171);
}
.btn-danger:hover { background: rgba(248,113,113,0.15); }

/* ===== セットアップモーダル ===== */
.setup-box {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setup-title { font-size: 1.2rem; font-weight: 700; }
.setup-desc { font-size: 0.875rem; color: var(--color-text-sub); line-height: 1.6; }
.setup-error { color: var(--red, #f87171); font-size: 0.85rem; min-height: 1em; }

/* ===== フレンドタブ ===== */
.friends-layout { display: flex; flex-direction: column; gap: 1rem; padding: 4px 0; }
.friends-search-row { display: flex; gap: 8px; }
.friends-search-row .input { flex: 1; }
.friends-list { display: flex; flex-direction: column; gap: 8px; }
.friends-empty { color: var(--color-text-sub); font-size: 0.9rem; }
.friend-card {
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.friend-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.friend-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.friend-details { display: flex; flex-direction: column; min-width: 0; }
.friend-username { font-weight: 700; font-size: 0.9rem; }
.friend-ingame { font-size: 0.8rem; color: var(--color-text-sub); }
.friend-rating { display: flex; gap: 12px; font-size: 0.85rem; }
.friend-rating-val { color: var(--color-text-sub); }
.friend-actions { display: flex; gap: 6px; margin-left: auto; }

/* ===== 設定タブ ===== */
.settings-layout { display: flex; flex-direction: column; gap: 2rem; }
.settings-section { background: var(--surface2); border-radius: var(--radius); padding: 1.25rem; }
.settings-section-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 1rem; color: var(--color-text-sub); text-transform: uppercase; letter-spacing: 0.05em; }
.settings-row { margin-bottom: 1.25rem; }
.settings-row:last-child { margin-bottom: 0; }
.settings-subsection-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; color: var(--color-text); }
.settings-login-notice { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 12px; }
.settings-label { font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.settings-desc { font-size: 0.8rem; color: var(--color-text-sub); margin-bottom: 8px; }
.settings-sync-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-share-row { display: flex; gap: 6px; align-items: center; }
.settings-share-row .input { flex: 1; font-size: 0.8rem; }
.input-readonly { color: var(--color-text-sub); cursor: text; }
.settings-token-result { margin-top: 1rem; }
.settings-token-notice {
  font-size: 0.8rem;
  color: var(--yellow, #fbbf24);
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.settings-bookmarklet-wrap { display: flex; flex-direction: column; gap: 6px; }
.settings-bookmarklet-code {
  width: 100%;
  background: var(--surface);
  color: var(--color-text-sub);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.75rem;
  font-family: monospace;
  resize: vertical;
}
.settings-tokens-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.settings-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  background: var(--surface);
  border-radius: 6px;
  padding: 6px 10px;
  flex-wrap: wrap;
}
.settings-token-label { font-weight: 600; }
.settings-token-prefix { font-family: monospace; color: var(--color-text-sub); }
.settings-token-used { color: var(--color-text-sub); font-size: 0.8rem; margin-left: auto; }
.settings-empty { color: var(--color-text-sub); font-size: 0.85rem; }