/* Data view styles */
.data-view { padding: 10px 12px 24px; }
.rank-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 6px; }
.rank-title { font-size: 1.1rem; display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); }
.rank-title i { background: linear-gradient(135deg, var(--rank-icon-start), var(--rank-icon-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rank-ym { margin-left: 0; font-size: 0.7rem; color: var(--text-gray); }
.rank-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; margin-bottom: 6px; }
.rank-status-bar .live-status { margin: 0; }
.rank-controls { display: inline-flex; align-items: center; gap: 8px; }
.rank-controls select { padding: 6px 8px; border: 1px solid var(--border-gray); background: transparent; color: var(--text-primary); border-radius: 0; }
.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rank-item { display: grid; grid-template-columns: 48px 48px 1fr; align-items: center; gap: 5px; padding: 5px 8px 8px; border: none; background: var(--background-white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: background-color 0.15s ease-in-out, box-shadow 0.2s ease, transform 0.18s ease; position: relative; will-change: transform; }
.rank-item:hover { background: var(--purple-hover); box-shadow: 0 6px 16px rgba(133,114,238,0.15); transform: scale(1.02); z-index: 30; }
.rank-item.top-1, .rank-item.top-2, .rank-item.top-3 { box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 8px 22px rgba(133,114,238,0.18); }
.rank-item.top-1::before, .rank-item.top-2::before, .rank-item.top-3::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; pointer-events: none; }
.rank-item.top-1::before { background: #f5b300; }
.rank-item.top-2::before { background: #bdbdbd; }
.rank-item.top-3::before { background: #cd7f32; }
.rank-item:not(.top-1):not(.top-2):not(.top-3) .rank-num .rank-number { font-style: italic; }
.rank-num { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.rank-num .rank-number { font-size: 1.1rem; line-height: 1; }
.rank-avatar { width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover; background: #ddd; }
.rank-avatar-link { display: inline-flex; }
.rank-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rank-name { font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95rem; }
.rank-name .rank-id { font-weight: 500; color: var(--text-gray); font-size: 0.85em; }
.rank-score { color: var(--text-primary); font-weight: 700; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rank-emoji { font-size: 1.1rem; line-height: 1; transform: translateY(1px); }
.rank-emoji.big { font-size: 28px; }
.rank-num.is-top { }
.rank-bar-wrap { background: transparent; }
.rank-bar { position: relative; width: 100%; height: 10px; background: var(--border-gray); overflow: hidden; }
.rank-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8572EE, #9a8df0); display: block; width: 0; transition: width 0.4s ease; }
.rank-bar > span { animation: rankBarFill 0.8s ease-out forwards; }
@keyframes rankBarFill { from { width: 0; } to { width: var(--target-width, 0); } }
.balloon-icon { height: 30px; width: auto; margin-bottom: -9px; }
.rank-score.han-score { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; text-align: left; font-weight: 700; }
.rank-score.han-score .clock-icon { font-size: 0.85rem; opacity: 0.9; }
.rank-score.han-score .time-text { white-space: nowrap; }

/* Dark mode shadows */
body.dark-mode .rank-item { box-shadow: 0 6px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35); }
body.dark-mode .rank-item.top-1, body.dark-mode .rank-item.top-2, body.dark-mode .rank-item.top-3 { box-shadow: 0 6px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35), 0 10px 26px rgba(133,114,238,0.35); }

/* HOF chips */
.hof-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hof-chip { appearance: none; border: 1px solid var(--border-gray); background: var(--background-white); color: var(--text-primary); padding: 6px 10px; border-radius: 9999px; font-size: 0.85rem; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .05s ease; }
.hof-chip:hover { background: var(--purple-hover); }
.hof-chip:active { transform: translateY(1px); }
.hof-chip.active { background: linear-gradient(135deg, #8572EE, #9a8df0); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(133,114,238,0.25); }
.hof-chip:focus-visible { outline: 2px solid #8572EE; outline-offset: 2px; }
body.dark-mode .hof-chip { background: #222; border-color: #3a3a3a; color: #e6e6e6; }
body.dark-mode .hof-chip:hover { background: #2a263d; }
body.dark-mode .hof-chip.active { background: linear-gradient(135deg, #6d5fe0, #8a7ff0); box-shadow: 0 6px 16px rgba(109,95,224,0.35); }