/* ===== 게임 성적과 순위: 성적표 + 게임별 순위 ===== */
#view-gamerank .rkm3 { --rank-ink:#17233c; --rank-sub:#65738a; --rank-muted:#94a0b3; --rank-blue:#4f72f2; --rank-teal:#10a9b8; --rank-indigo:#7262df; --rank-lav:#eef0ff; --rank-line:#e4eaf3; --rank-good:#159a68; color:var(--rank-ink); }
#view-gamerank .rkm3-head { margin-bottom:18px; }
#view-gamerank .rkm3-kicker { color:var(--rank-blue); letter-spacing:.14em; }
#view-gamerank .rank-board-overview { margin:0 0 30px; padding:0 24px 24px; overflow:hidden; border:1px solid var(--rank-line); border-radius:22px; background:#f7f9fc; box-shadow:0 4px 14px rgba(20,40,80,.04); }
#view-gamerank .rank-board-overview::before { content:""; display:block; height:5px; margin:0 -24px; background:var(--rank-blue); }
#view-gamerank .rank-board-overview-head, #view-gamerank .rank-category-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:0; padding:22px 0 16px; }
#view-gamerank .rank-board-overview-head p, #view-gamerank .rank-category-head p { margin:0 0 5px; color:var(--rank-blue); font-size:10px; font-weight:900; letter-spacing:.14em; }
#view-gamerank .rank-board-overview-head h2, #view-gamerank .rank-category-head h2 { margin:0; color:var(--rank-ink); font-size:23px; font-weight:800; letter-spacing:-.045em; }
#view-gamerank .rank-board-overview-head small { display:block; margin-top:7px; color:var(--rank-sub); font-size:12px; font-weight:500; }
#view-gamerank .rank-board-overview-head > span, #view-gamerank .rank-category-head > span { color:var(--rank-sub); font-size:11px; font-weight:700; white-space:nowrap; }

#view-gamerank .rank-dashboard { display:grid; grid-template-columns:minmax(335px,1.08fr) minmax(0,1.45fr); gap:16px; }
#view-gamerank .rank-report-subjects, #view-gamerank .rank-report-subject-detail, #view-gamerank .rank-report-week, #view-gamerank .rank-report-stat, #view-gamerank .rank-report-total { border:1px solid var(--rank-line); border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(20,40,80,.04); }
#view-gamerank .rank-report-subjects { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:14px; }
#view-gamerank .rank-report-subject { display:grid; grid-template-rows:auto auto 1fr auto auto; min-width:0; min-height:254px; padding:14px 8px 10px; border:1px solid #e7ebf3; border-radius:14px; background:linear-gradient(180deg,#fff,#fbfcff); color:inherit; font:inherit; text-align:center; cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
#view-gamerank .rank-report-subject:hover { transform:translateY(-2px); border-color:#b8caf5; box-shadow:0 8px 18px rgba(58,91,160,.12); }
#view-gamerank .rank-report-subject:focus-visible { outline:3px solid rgba(79,114,242,.24); outline-offset:2px; }
#view-gamerank .rank-report-subject.is-selected { border-color:var(--rank-blue); box-shadow:0 0 0 2px rgba(79,114,242,.11),0 8px 18px rgba(58,91,160,.12); }
#view-gamerank .rank-report-subject-label { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 4px; border:1px solid #cbdcff; border-radius:16px; background:linear-gradient(145deg,#f6f9ff,#e7efff); box-shadow:0 5px 12px rgba(43,99,212,.12); color:var(--rank-blue); font-size:18px; font-weight:800; letter-spacing:-.08em; }
#view-gamerank .rank-report-grade { min-height:60px; padding-top:10px; }
#view-gamerank .rank-report-grade strong { display:block; color:var(--rank-blue); font-size:23px; font-weight:800; line-height:1.05; letter-spacing:-.1em; white-space:nowrap; }
#view-gamerank .rank-report-grade small { display:block; margin-top:7px; color:var(--rank-sub); font-size:12px; font-weight:700; white-space:nowrap; }
#view-gamerank .rank-report-vertical-meter { position:relative; display:flex; align-items:flex-end; justify-content:center; height:98px; margin:9px auto 8px; padding:0 10px; border-radius:7px 7px 5px 5px; background:repeating-linear-gradient(to top,#f2f5fa 0,#f2f5fa 1px,transparent 1px,transparent 25%); }
#view-gamerank .rank-report-vertical-meter i { display:block; width:100%; min-height:3px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#5f91ff,var(--rank-blue)); box-shadow:0 2px 6px rgba(79,114,242,.2); }
#view-gamerank .rank-report-vertical-meter span { position:absolute; bottom:-14px; left:50%; width:max-content; transform:translateX(-50%); color:var(--rank-muted); font-size:11px; font-weight:700; white-space:nowrap; word-break:keep-all; }
#view-gamerank .rank-report-subject-score { margin-top:13px; color:var(--rank-ink); font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
#view-gamerank .rank-report-subject-score small { color:var(--rank-sub); font-size:11px; font-weight:700; }
#view-gamerank .rank-report-subject-open { display:block; margin-top:7px; color:var(--rank-blue); font-size:9px; font-weight:800; }
#view-gamerank .rank-report-subject:nth-child(2) .rank-report-subject-label, #view-gamerank .rank-report-subject:nth-child(2) .rank-report-grade strong { color:var(--rank-teal); }
#view-gamerank .rank-report-subject:nth-child(2) .rank-report-subject-label { border-color:#bdecee; background:linear-gradient(145deg,#f1feff,#d9f8f9); box-shadow:0 5px 12px rgba(11,157,165,.12); }
#view-gamerank .rank-report-subject:nth-child(2) .rank-report-vertical-meter i { background:linear-gradient(180deg,#41d0d8,var(--rank-teal)); }
#view-gamerank .rank-report-subject:nth-child(3) .rank-report-subject-label { border-color:#ffe0aa; background:linear-gradient(145deg,#fffaf0,#fff0d4); box-shadow:0 5px 12px rgba(227,144,28,.12); color:#c77506; }
#view-gamerank .rank-report-subject:nth-child(3) .rank-report-vertical-meter i { background:linear-gradient(180deg,#ffc85a,#de8b0a); }
#view-gamerank .rank-report-subject:nth-child(4) .rank-report-subject-label, #view-gamerank .rank-report-subject:nth-child(4) .rank-report-grade strong { color:var(--rank-indigo); }
#view-gamerank .rank-report-subject:nth-child(4) .rank-report-subject-label { border-color:#d7d0ff; background:linear-gradient(145deg,#f7f5ff,#e8e3ff); box-shadow:0 5px 12px rgba(90,70,200,.12); }
#view-gamerank .rank-report-subject:nth-child(4) .rank-report-vertical-meter i { background:linear-gradient(180deg,#9987ff,var(--rank-indigo)); }
#view-gamerank .rank-report-subject.is-empty { opacity:.72; }

#view-gamerank .rank-report-subject-detail { --rank-detail:#4f72f2; grid-column:1 / -1; order:3; overflow:hidden; padding:20px 22px 16px; }
#view-gamerank .rank-subject-detail-tone-2 { --rank-detail:#10a9b8; }
#view-gamerank .rank-subject-detail-tone-3 { --rank-detail:#d9890d; }
#view-gamerank .rank-subject-detail-tone-4 { --rank-detail:#7262df; }
#view-gamerank .rank-subject-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
#view-gamerank .rank-subject-detail-head span { display:block; color:var(--rank-detail); font-size:11px; font-weight:900; letter-spacing:.08em; }
#view-gamerank .rank-subject-detail-head strong { display:block; margin-top:5px; color:var(--rank-ink); font-size:23px; font-weight:850; letter-spacing:-.05em; }
#view-gamerank .rank-subject-detail-head p { margin:5px 0 0; color:var(--rank-sub); font-size:12px; font-weight:650; }
#view-gamerank .rank-subject-detail-head em { flex:0 0 auto; padding:6px 9px; border-radius:99px; background:#eef3ff; color:var(--rank-detail); font-size:10px; font-style:normal; font-weight:800; }
#view-gamerank .rank-subject-grade-progress { margin-top:16px; padding:13px 15px 11px; border-radius:12px; background:#f7f9fd; }
#view-gamerank .rank-subject-grade-progress > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--rank-sub); font-size:11px; font-weight:750; }
#view-gamerank .rank-subject-grade-progress > div:first-child b { color:var(--rank-detail); font-size:13px; font-weight:900; }
#view-gamerank .rank-subject-grade-track { height:10px; margin-top:7px; overflow:hidden; border-radius:99px; background:#e5eaf4; }
#view-gamerank .rank-subject-grade-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--rank-detail) 72%,white),var(--rank-detail)); box-shadow:0 2px 5px color-mix(in srgb,var(--rank-detail) 28%,transparent); }
#view-gamerank .rank-subject-grade-progress > small { display:block; margin-top:6px; color:var(--rank-muted); font-size:9px; font-weight:700; text-align:right; }
#view-gamerank .rank-subject-detail-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
#view-gamerank .rank-subject-detail-metrics > div { min-width:0; padding:11px 12px; border:1px solid #edf0f5; border-radius:11px; background:#fff; }
#view-gamerank .rank-subject-detail-metrics span { display:block; color:var(--rank-sub); font-size:9px; font-weight:750; }
#view-gamerank .rank-subject-detail-metrics strong { display:block; margin-top:6px; color:var(--rank-ink); font-size:17px; font-weight:850; white-space:nowrap; }
#view-gamerank .rank-subject-detail-metrics strong.is-up { color:var(--rank-good); }
#view-gamerank .rank-subject-detail-metrics small { display:block; margin-top:3px; overflow:hidden; color:var(--rank-muted); font-size:8px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
#view-gamerank .rank-subject-detail-chart { margin-top:15px; padding-top:13px; border-top:1px solid #edf1f6; }
#view-gamerank .rank-subject-detail-chart > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#view-gamerank .rank-subject-detail-chart > div:first-child strong { color:var(--rank-ink); font-size:12px; font-weight:850; }
#view-gamerank .rank-subject-detail-chart > div:first-child small { color:var(--rank-muted); font-size:9px; font-weight:650; }
#view-gamerank .rank-subject-bars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; height:145px; margin-top:10px; }
#view-gamerank .rank-subject-bars.is-empty { display:grid; height:100px; place-items:center; color:var(--rank-muted); font-size:11px; }
#view-gamerank .rank-subject-bar { display:grid; grid-template-rows:16px minmax(70px,1fr) 14px 11px; min-width:0; text-align:center; }
#view-gamerank .rank-subject-bar > b { color:var(--rank-detail); font-size:10px; font-weight:850; font-variant-numeric:tabular-nums; }
#view-gamerank .rank-subject-bar > span { position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; border-radius:7px 7px 4px 4px; background:repeating-linear-gradient(to top,#f2f5fa 0,#f2f5fa 1px,transparent 1px,transparent 25%); }
#view-gamerank .rank-subject-bar > span i { display:block; width:min(24px,55%); border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,color-mix(in srgb,var(--rank-detail) 68%,white),var(--rank-detail)); }
#view-gamerank .rank-subject-bar > small { padding-top:3px; color:var(--rank-sub); font-size:9px; font-weight:700; }
#view-gamerank .rank-subject-bar > em { color:var(--rank-muted); font-size:8px; font-style:normal; font-weight:650; }
#view-gamerank .rank-subject-bar.is-empty > b { color:#b2bac8; }
#view-gamerank .rank-report-subject-detail footer { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:11px; padding-top:10px; border-top:1px dashed #e4e9f1; color:var(--rank-sub); font-size:9px; }
#view-gamerank .rank-report-subject-detail footer b { color:var(--rank-ink); font-weight:850; }
#view-gamerank .rank-report-subject-detail footer span { font-weight:750; }
#view-gamerank .rank-report-subject-detail footer small { margin-left:auto; color:var(--rank-muted); font-size:9px; font-weight:650; }

#view-gamerank .rank-report-analysis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-column:2; grid-row:1; gap:12px; }
#view-gamerank .rank-report-week { grid-column:1 / -1; padding:16px 18px 11px; }
#view-gamerank .rank-report-week header { display:flex; align-items:center; justify-content:space-between; gap:14px; }
#view-gamerank .rank-report-week header span { display:block; color:var(--rank-ink); font-size:15px; font-weight:800; }
#view-gamerank .rank-report-week header b { display:block; margin-top:3px; color:var(--rank-sub); font-size:10px; font-weight:600; }
#view-gamerank .rank-report-week header em { padding:5px 8px; border-radius:99px; background:var(--rank-lav); color:var(--rank-blue); font-size:10px; font-style:normal; font-weight:800; white-space:nowrap; }
#view-gamerank .rank-report-chart { margin-top:10px; }
#view-gamerank .rank-report-chart.is-empty { display:grid; height:129px; place-items:center; border-top:1px solid #edf1f7; color:var(--rank-muted); font-size:11px; font-weight:600; }
#view-gamerank .rank-report-chart svg { display:block; width:100%; height:110px; overflow:visible; }
#view-gamerank .rank-report-chart path { fill:none; stroke:#e8edf5; stroke-width:1; }
#view-gamerank .rank-report-chart polyline { fill:none; stroke:var(--rank-blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#view-gamerank .rank-report-chart circle { fill:#fff; stroke:var(--rank-blue); stroke-width:2.5; }
#view-gamerank .rank-report-chart-labels { display:flex; justify-content:space-between; gap:4px; color:var(--rank-muted); font-size:9px; font-weight:600; }
#view-gamerank .rank-report-stat { min-height:119px; padding:15px; }
#view-gamerank .rank-report-stat > span, #view-gamerank .rank-report-total > span { display:block; color:var(--rank-sub); font-size:10px; font-weight:700; }
#view-gamerank .rank-report-stat strong { display:block; margin-top:13px; color:var(--rank-blue); font-size:23px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
#view-gamerank .rank-report-stat small { display:block; margin-top:5px; color:var(--rank-sub); font-size:10px; font-weight:600; }
#view-gamerank .rank-report-stat.is-growth strong { color:var(--rank-good); }
#view-gamerank .rank-report-total { display:grid; align-content:center; justify-items:center; min-height:119px; padding:13px; text-align:center; }
#view-gamerank .rank-report-total > span { width:100%; text-align:left; }
#view-gamerank .rank-report-total-ring { position:relative; display:grid; width:74px; height:74px; place-content:center; margin:8px 0 6px; border-radius:50%; background:conic-gradient(var(--rank-blue) var(--rank-total-rate),#e8edff 0); color:var(--rank-ink); }
#view-gamerank .rank-report-total-ring::before { content:""; position:absolute; width:58px; height:58px; border-radius:50%; background:#fff; }
#view-gamerank .rank-report-total-ring strong, #view-gamerank .rank-report-total-ring small { position:relative; z-index:1; }
#view-gamerank .rank-report-total-ring strong { font-size:16px; font-weight:800; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
#view-gamerank .rank-report-total-ring small { margin-top:1px; color:var(--rank-sub); font-size:8px; font-weight:700; }
#view-gamerank .rank-report-total > b { color:var(--rank-sub); font-size:10px; font-weight:700; }

#view-gamerank .rank-category-head { margin-top:22px; border-bottom:1px solid var(--rank-line); }
#view-gamerank .rank-category-head h2 { font-size:19px; }
#view-gamerank .rank-boards-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#view-gamerank .rank-board-card { display:grid; grid-template-columns:146px minmax(0,1fr) 104px; align-items:stretch; min-width:0; overflow:hidden; border:1px solid var(--rank-line); border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(20,40,80,.04); }
#view-gamerank .rank-board-game { display:grid; align-content:center; justify-items:center; gap:9px; padding:16px 8px; border-right:1px solid var(--rank-line); background:#fbfcff; text-align:center; }
#view-gamerank .rank-board-game-mark { display:grid; width:92px; height:92px; place-items:center; border-radius:18px; background:#f1f6ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 7px 15px rgba(38,83,163,.1); overflow:hidden; }
#view-gamerank .rank-board-game-mark img { display:block; width:100%; height:100%; object-fit:contain; }
#view-gamerank .rank-board-game b { display:block; color:var(--rank-ink); font-size:12px; font-weight:800; }
#view-gamerank .rank-board-game small { display:block; margin-top:3px; color:var(--rank-sub); font-size:9px; font-weight:600; }
#view-gamerank .rank-board-tone-2 .rank-board-game-mark { background:#eefcfd; }
#view-gamerank .rank-board-tone-3 .rank-board-game-mark { background:#f0f6ff; }
#view-gamerank .rank-board-tone-4 .rank-board-game-mark { background:#f7f3ff; }
#view-gamerank .rank-board-table { min-width:0; padding:10px 11px 9px; }
#view-gamerank .rank-board-table header, #view-gamerank .rank-board-slot, #view-gamerank .rank-board-profile { display:grid; grid-template-columns:32px minmax(0,.78fr) minmax(76px,1.22fr); column-gap:8px; align-items:center; }
#view-gamerank .rank-board-table header { min-height:25px; color:var(--rank-sub); font-size:10px; font-weight:800; }
#view-gamerank .rank-board-card ol { margin:0; padding:0; list-style:none; }
#view-gamerank .rank-board-extra { border-top:1px dashed var(--rank-line); background:#fafcff; }
#view-gamerank .rank-board-extra[hidden] { display:none; }
#view-gamerank .rank-board-slot { min-height:39px; border-bottom:1px solid #f0f3f7; color:var(--rank-sub); font-size:11px; }
#view-gamerank .rank-board-slot:last-child { border-bottom:0; }
#view-gamerank .rank-board-slot.has-profile { display:block; min-height:0; }
#view-gamerank .rank-board-profile { width:100%; min-height:39px; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
#view-gamerank .rank-board-slot > b, #view-gamerank .rank-board-profile > b { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:#f0f4fb; color:#60718b; font-size:12px; font-weight:900; text-align:center; font-variant-numeric:tabular-nums; }
#view-gamerank .rank-board-slot:nth-child(-n+3) > b, #view-gamerank .rank-board-slot:nth-child(-n+3) .rank-board-profile > b { background:linear-gradient(145deg,#fff5c8,#f3c85d); color:#8a5a05; box-shadow:0 2px 5px rgba(173,119,11,.17); }
#view-gamerank .rank-board-name { display:flex; align-items:center; min-width:0; gap:4px; overflow:hidden; color:#203552; font-size:14px; font-weight:850; letter-spacing:-.04em; white-space:nowrap; }
#view-gamerank .rank-board-name > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-gamerank .rank-board-name > i { flex:0 0 auto; width:6px; height:6px; margin-top:1px; border-top:1.8px solid var(--rank-blue); border-right:1.8px solid var(--rank-blue); transform:rotate(45deg); }
#view-gamerank .rank-board-score { position:relative; display:block; height:25px; padding-top:1px; }
#view-gamerank .rank-board-score em { position:relative; z-index:1; display:block; color:#415773; font-size:11px; font-style:normal; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
#view-gamerank .rank-board-score i { position:absolute; bottom:1px; left:0; height:6px; border-radius:99px; background:var(--rank-blue); opacity:.82; }
#view-gamerank .rank-board-tone-2 .rank-board-score i { background:var(--rank-teal); }
#view-gamerank .rank-board-tone-4 .rank-board-score i { background:var(--rank-indigo); }
#view-gamerank .rank-board-slot.is-empty .rank-board-name { color:var(--rank-muted); font-weight:500; }
#view-gamerank .rank-board-profile:hover { background:#f3f7ff; }
#view-gamerank .rank-board-profile:hover .rank-board-name { color:var(--rank-blue); }
#view-gamerank .rank-board-profile:focus-visible { outline:2px solid var(--rank-blue); outline-offset:-2px; border-radius:7px; }
#view-gamerank .rank-board-expand { display:grid; grid-template-columns:minmax(0,1fr) auto 10px; align-items:center; gap:5px; width:100%; min-height:28px; margin-top:5px; padding:0 7px; border:1px solid #c9d9fa; border-radius:6px; background:#fff; color:var(--rank-blue); font:inherit; text-align:left; cursor:pointer; }
#view-gamerank .rank-board-expand b { font-size:9px; font-weight:800; }
#view-gamerank .rank-board-expand small { color:var(--rank-sub); font-size:8px; font-weight:600; }
#view-gamerank .rank-board-expand > span { width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
#view-gamerank .rank-board-expand.is-expanded > span { transform:rotate(225deg) translateY(-2px); }
#view-gamerank .rank-board-expand:hover { border-color:var(--rank-blue); background:#f8f9ff; }
#view-gamerank .rank-board-mine { display:grid; align-content:center; justify-items:center; min-width:0; padding:12px 7px; border-left:1px solid var(--rank-line); background:#f5f8ff; text-align:center; }
#view-gamerank .rank-board-mine > span { color:var(--rank-sub); font-size:9px; font-weight:700; }
#view-gamerank .rank-board-mine strong { margin-top:8px; color:var(--rank-blue); font-size:21px; font-weight:800; letter-spacing:-.05em; white-space:nowrap; }
#view-gamerank .rank-board-mine small { margin-top:5px; color:#316be3; font-size:10px; font-weight:800; white-space:nowrap; }
#view-gamerank .rank-board-tone-2 .rank-board-mine { background:#effcfd; }
#view-gamerank .rank-board-tone-2 .rank-board-mine strong, #view-gamerank .rank-board-tone-2 .rank-board-mine small { color:#109ba8; }
#view-gamerank .rank-board-tone-4 .rank-board-mine { background:#f5f2ff; }
#view-gamerank .rank-board-tone-4 .rank-board-mine strong, #view-gamerank .rank-board-tone-4 .rank-board-mine small { color:#6d55d9; }
#view-gamerank .rank-boards-loading { margin:0; padding:38px; color:var(--rank-muted); text-align:center; font-size:12px; font-weight:600; }
#view-gamerank .rkm3-detail-head { margin-top:30px; }

@media (max-width:1100px) { #view-gamerank .rank-board-card { grid-template-columns:122px minmax(0,1fr) 83px; } #view-gamerank .rank-board-game-mark { width:76px; height:76px; } #view-gamerank .rank-board-table { padding-right:8px; padding-left:8px; } }
@media (max-width:900px) { #view-gamerank .rank-dashboard { grid-template-columns:1fr; } #view-gamerank .rank-report-subjects { grid-column:1; grid-row:auto; order:1; } #view-gamerank .rank-report-subject-detail { grid-column:1; grid-row:auto; order:2; } #view-gamerank .rank-report-analysis { grid-column:1; grid-row:auto; order:3; } #view-gamerank .rank-boards-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { #view-gamerank .rank-board-overview { margin-right:-4px; margin-left:-4px; padding:0 12px 16px; border-radius:16px; } #view-gamerank .rank-board-overview::before { margin:0 -12px; } #view-gamerank .rank-board-overview-head { align-items:flex-start; padding:18px 0 13px; } #view-gamerank .rank-board-overview-head h2 { font-size:20px; } #view-gamerank .rank-board-overview-head > span, #view-gamerank .rank-category-head > span { display:none; } #view-gamerank .rank-report-subjects { gap:6px; padding:8px; } #view-gamerank .rank-report-subject { min-height:220px; padding:10px 4px 8px; } #view-gamerank .rank-report-subject-label { width:44px; height:44px; margin-bottom:2px; border-radius:13px; font-size:15px; } #view-gamerank .rank-report-grade strong { font-size:28px; } #view-gamerank .rank-report-vertical-meter { height:75px; padding:0 7px; } #view-gamerank .rank-report-vertical-meter span { font-size:10px; } #view-gamerank .rank-report-subject-detail { padding:16px 13px 13px; } #view-gamerank .rank-subject-detail-head { gap:8px; } #view-gamerank .rank-subject-detail-head strong { font-size:20px; } #view-gamerank .rank-subject-detail-head p { font-size:10px; } #view-gamerank .rank-subject-detail-head em { padding:5px 7px; font-size:8px; } #view-gamerank .rank-subject-detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } #view-gamerank .rank-subject-detail-chart > div:first-child small { display:none; } #view-gamerank .rank-subject-bars { gap:4px; height:133px; } #view-gamerank .rank-subject-bar { grid-template-rows:15px minmax(64px,1fr) 14px 10px; } #view-gamerank .rank-report-subject-detail footer small { width:100%; margin-left:0; } #view-gamerank .rank-report-analysis { grid-template-columns:repeat(2,minmax(0,1fr)); } #view-gamerank .rank-report-week { grid-column:1 / -1; } #view-gamerank .rank-report-total { grid-column:1 / -1; min-height:105px; } #view-gamerank .rank-report-total > span { text-align:center; } #view-gamerank .rank-category-head { align-items:flex-start; margin-top:18px; padding-bottom:10px; } #view-gamerank .rank-category-head h2 { font-size:18px; } #view-gamerank .rank-board-card { grid-template-columns:96px minmax(0,1fr) 72px; } #view-gamerank .rank-board-game { padding:10px 4px; } #view-gamerank .rank-board-game-mark { width:58px; height:58px; border-radius:12px; } #view-gamerank .rank-board-game b { font-size:10px; } #view-gamerank .rank-board-game small { display:none; } #view-gamerank .rank-board-table { padding:8px 6px; } #view-gamerank .rank-board-table header, #view-gamerank .rank-board-slot, #view-gamerank .rank-board-profile { grid-template-columns:26px minmax(0,.72fr) minmax(58px,1.15fr); column-gap:4px; } #view-gamerank .rank-board-slot, #view-gamerank .rank-board-profile { min-height:35px; } #view-gamerank .rank-board-slot > b, #view-gamerank .rank-board-profile > b { width:22px; height:22px; font-size:10px; } #view-gamerank .rank-board-name { font-size:12px; } #view-gamerank .rank-board-score { height:22px; } #view-gamerank .rank-board-score em { font-size:9px; } #view-gamerank .rank-board-score i { height:5px; } #view-gamerank .rank-board-mine { padding:8px 3px; } #view-gamerank .rank-board-mine strong { font-size:16px; } #view-gamerank .rank-board-mine small { font-size:8px; } #view-gamerank .rank-board-expand small { display:none; } }
@media (max-width:640px) { #view-gamerank .rank-report-grade strong { font-size:20px; } }