@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  color-scheme: light;
  --paper: #f5f7fa;
  --surface: #ffffff;
  --ink: #191f28;
  --muted: #788391;
  --line: #e6eaf0;
  --green: #23865b;
  --green-deep: #3182f6;
  --win: #edf8f1;
  --loss: #fff1ef;
  --red: #d26052;
  --mono: 'DM Mono', monospace;
  --body: 'IBM Plex Sans KR', sans-serif;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button { font: inherit; }
.page-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.masthead { height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; }
.brand-light { color: #76915d; font-weight: 500; }
.brand-mark { width: 23px; height: 23px; display: flex; align-items: end; gap: 3px; padding: 3px; background: var(--green); transform: skew(-9deg); }
.brand-mark i { display: block; width: 4px; background: var(--ink); }
.brand-mark i:nth-child(1) { height: 7px; }
.brand-mark i:nth-child(2) { height: 12px; }
.brand-mark i:nth-child(3) { height: 16px; }
.live-state, .eyebrow, .metric-label, .metric-foot, .section-kicker, .section-meta, .tab-index, .hero-coordinate, .hero-mark-caption, .page-footer { font-family: var(--mono); }
.live-state { display: flex; align-items: center; gap: 9px; color: #5e7065; font-size: 10px; letter-spacing: 0; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #76a953; box-shadow: 0 0 0 4px #76a9531f; }
.mode-tabs { display: flex; gap: 5px; padding: 15px 0 18px; overflow-x: auto; scrollbar-width: thin; }
.mode-tab { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; gap: 12px; padding: 0 17px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #55645c; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.mode-tab:hover { border-color: #b7c1b6; color: var(--ink); }
.mode-tab.is-active { background: var(--ink); color: #f9fbf4; }
.tab-index { color: #94a49a; font-size: 9px; }
.mode-tab.is-active .tab-index { color: var(--green); }
.hero { position: relative; min-height: 238px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 40px 48px; background-color: var(--green-deep); background-image: linear-gradient(90deg, #19382d 0%, #315a46 58%, #42674c 100%); color: #f4f7ed; }
.hero::before { position: absolute; inset: 0 0 0 48%; content: ''; opacity: .21; background-image: linear-gradient(30deg, transparent 48%, #c9ee64 49%, #c9ee64 50%, transparent 51%), linear-gradient(150deg, transparent 48%, #c9ee64 49%, #c9ee64 50%, transparent 51%); background-size: 44px 76px; mask-image: linear-gradient(90deg, transparent, #000 45%); }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; color: #bfd29f; font-size: 10px; }
.eyebrow-line { width: 23px; height: 1px; background: var(--green); }
.hero h1 { margin: 0; font-size: clamp(29px, 4vw, 43px); font-weight: 600; letter-spacing: 0; }
.hero-note { margin: 10px 0 0; color: #d5dfd0; font-size: 13px; }
.hero-mark { position: relative; z-index: 1; width: 145px; height: 145px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 1px solid #d5e0bb70; transform: rotate(45deg); }
.hero-mark-number, .hero-mark-caption { transform: rotate(-45deg); }
.hero-mark-number { align-self: flex-end; color: var(--green); font-family: 'Barlow Condensed', sans-serif; font-size: 37px; font-weight: 700; }
.hero-mark-caption { align-self: flex-start; color: #e1e9d8; font-size: 8px; line-height: 1.6; }
.hero-coordinate { position: absolute; right: 20px; bottom: 14px; color: #e4ebdc80; font-size: 9px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 56px; border: 1px solid var(--line); background: var(--surface); }
.metric { min-height: 125px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 18px 27px; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric-highlight { background: #e9f1dc; }
.metric-label { margin-bottom: 8px; color: #718078; font-size: 9px; }
.metric strong { font-family: 'Barlow Condensed', var(--body); font-size: 35px; font-weight: 600; line-height: 1; }
.metric strong small { padding-left: 3px; font-family: var(--mono); font-size: 15px; }
.metric-foot { margin-top: 8px; color: #849087; font-size: 9px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px; }
.section-kicker { margin: 0 0 5px; color: #819087; font-size: 9px; }
.section-heading h2 { margin: 0; font-size: 21px; font-weight: 600; }
.section-meta { padding-bottom: 3px; color: #849087; font-size: 9px; }
.ranking-panel { border-top: 2px solid var(--ink); background: var(--surface); }
.table-scroll { overflow-x: auto; }
.ranking-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.ranking-table th { height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); color: #819087; font-size: 10px; font-weight: 500; }
.ranking-table td { height: 59px; padding: 0 14px; border-bottom: 1px solid #e8ebe4; font-size: 12px; }
.ranking-table tbody tr { animation: rise-in .32s ease both; }
.ranking-table tbody tr:hover { background: #f5f8ee; }
.ranking-table th:first-child, .ranking-table td:first-child { width: 54px; padding-left: 21px; color: #849087; font-family: var(--mono); }
.ranking-table th:nth-child(2) { min-width: 220px; }
.player-name { font-weight: 600; }
.rank-number { color: #8c9990; font-family: var(--mono); font-size: 10px; }
.rank-number.top-rank { color: #5e843c; font-weight: 500; }
.win-cell { min-width: 170px; }
.win-cell strong { display: inline-block; width: 44px; font-family: var(--mono); font-size: 11px; font-weight: 500; }
.win-track { display: inline-block; width: 70px; height: 5px; overflow: hidden; vertical-align: middle; background: #e6e9e1; }
.win-track i { display: block; height: 100%; background: #84ad55; }
.kda { color: #56655c; font-family: var(--mono); font-size: 10px; }
.damage { font-family: var(--mono); font-size: 10px; }
.match-heading { margin-top: 54px; }
.match-list { display: grid; gap: 10px; }
.match-card { display: grid; grid-template-columns: 150px 1fr 1fr; min-height: 105px; border: 1px solid var(--line); background: var(--surface); animation: rise-in .32s ease both; }
.match-meta { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; border-right: 1px solid var(--line); }
.queue-label { color: #607066; font-size: 11px; font-weight: 600; }
.match-date { color: #8a968e; font-family: var(--mono); font-size: 9px; }
.team { min-width: 0; padding: 12px 15px; }
.team + .team { border-left: 1px solid var(--line); }
.team.team-win { background: linear-gradient(90deg, var(--win), #fbfcf7 65%); }
.team.team-loss { background: linear-gradient(90deg, var(--loss), #fbfcf7 65%); }
.team-heading { display: flex; justify-content: space-between; margin-bottom: 8px; color: #65756a; font-size: 9px; }
.team-win .team-heading strong { color: #568044; }
.team-loss .team-heading strong { color: var(--red); }
.team-roster { display: flex; flex-wrap: wrap; gap: 6px 11px; }
.participant { min-width: 92px; display: flex; align-items: center; gap: 6px; }
.champion-wrap { position: relative; width: 25px; height: 25px; flex: 0 0 25px; overflow: hidden; border-radius: 50%; background: #dce4d9; }
.champion-wrap img { width: 100%; height: 100%; object-fit: cover; }
.champion-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #53675b; font-family: var(--mono); font-size: 9px; }
.participant-copy { min-width: 0; }
.participant-name { max-width: 105px; overflow: hidden; color: #3c4b42; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.participant-kda { color: #89958d; font-family: var(--mono); font-size: 8px; }
.empty-state, .load-error { padding: 30px 16px; color: #77847c; text-align: center; font-size: 12px; }
.load-error { margin: 16px 0; border: 1px solid #e5b3a9; background: #fbefec; color: #8e4639; }
.page-footer { display: flex; justify-content: space-between; margin-top: 66px; padding: 20px 0 28px; border-top: 1px solid var(--line); color: #849087; font-size: 9px; }
.page-footer b { color: #668f4c; }
@keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 32px, 600px); }
  .masthead { height: 62px; }
  .mode-tabs { margin-right: -16px; padding: 12px 16px 14px 0; }
  .mode-tab { min-height: 39px; gap: 8px; padding: 0 12px; font-size: 12px; }
  .hero { min-height: 195px; padding: 30px 24px; }
  .hero-mark { width: 98px; height: 98px; margin-right: 8px; padding: 9px; }
  .hero-mark-number { font-size: 27px; }
  .hero-note { max-width: 230px; line-height: 1.6; }
  .metrics { margin: 12px 0 42px; }
  .metric { min-height: 105px; padding: 14px 12px; }
  .metric-label { min-height: 23px; font-size: 8px; }
  .metric strong { font-size: 29px; }
  .metric-foot { font-size: 8px; }
  .ranking-table th, .ranking-table td { padding-right: 10px; padding-left: 10px; }
  .ranking-table th:nth-child(2) { min-width: 155px; }
  .win-cell { min-width: 145px; }
  .win-track { width: 56px; }
  .match-card { grid-template-columns: 1fr 1fr; }
  .match-meta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .team { padding: 11px 9px; }
  .team + .team { border-left: 1px solid var(--line); }
  .team-roster { gap: 8px 4px; }
  .participant { min-width: 0; width: 100%; }
  .participant-name { max-width: calc(100vw - 95px); }
  .page-footer { margin-top: 48px; font-size: 8px; }
}

@media (max-width: 390px) {
  .hero { padding: 25px 17px; }
  .hero-mark { width: 76px; height: 76px; margin-right: 4px; }
  .hero-mark-number { font-size: 22px; }
  .hero-mark-caption { font-size: 7px; }
  .metric { padding-right: 8px; padding-left: 8px; }
  .metric strong { font-size: 26px; }
}

:root {
  --blue: #2675e8;
  --blue-soft: #e8f1ff;
  --hero-ink: #17243a;
  --team-blue: #287be7;
  --team-red: #ed6b56;
  --team-gold: #f0bf58;
}
body { background: var(--paper); color: var(--ink); }
.page-shell { width: min(1040px, calc(100% - 48px)); }
.masthead { height: 68px; }
.brand { gap: 9px; font-family: var(--body); font-size: 18px; }
.brand-light { color: var(--blue); }
.brand-icon { width: 25px; height: 25px; border-radius: 6px; }
.brand-mark { width: 20px; height: 20px; gap: 2px; padding: 3px; border-radius: 6px; background: var(--blue-soft); transform: none; }
.brand-mark i { width: 3px; border-radius: 2px; background: var(--blue); }
.live-state { color: #647181; font-size: 10px; }
.live-dot { background: #35a66f; box-shadow: 0 0 0 4px #35a66f1a; }
.mode-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 21px; padding: 4px; overflow-x: auto; border: 1px solid #e1e6ee; border-radius: 9px; background: #e9edf3; scrollbar-width: thin; }
.mode-tab { min-width: 0; min-height: 39px; justify-content: center; gap: 7px; padding: 0 10px; border: 0; border-radius: 6px; color: #66717e; font-size: 12px; font-weight: 500; }
.mode-tab:hover { color: var(--ink); }
.mode-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mode-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #1e293b14; }
.tab-index { color: #9aa4b1; }
.mode-tab.is-active .tab-index { color: var(--blue); }
.hero { position: relative; justify-content: space-between; min-height: 174px; margin-top: 18px; padding: 26px 30px; overflow: hidden; border: 0; border-radius: 10px; background: var(--hero-ink); color: #fff; }
.hero::before { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; content: ''; background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff0b 18px 20px); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.hero::after { position: absolute; top: 0; right: 35%; width: 5px; height: 100%; content: ''; background: var(--team-gold); transform: skewX(-18deg); opacity: .9; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 8px; color: #a9c8fa; font-family: var(--body); font-size: 11px; font-weight: 600; }
.hero h1 { color: #fff; font-size: 27px; font-weight: 600; }
.hero-note { margin-top: 6px; color: #bdc9da; font-size: 12px; }
.hero-signal { position: relative; z-index: 1; width: 245px; display: grid; justify-items: end; gap: 9px; font-family: var(--mono); }
.signal-label, .signal-caption { color: #a9b5c8; font-size: 8px; }
.signal-versus { display: flex; align-items: center; gap: 11px; }
.signal-versus strong { color: #fff; font-family: var(--body); font-size: 20px; font-style: italic; }
.side-blue, .side-red { min-width: 62px; padding: 6px 9px; border: 1px solid #ffffff36; border-radius: 4px; font-size: 9px; text-align: center; }
.side-blue { background: #287be733; color: #a9c8fa; }
.side-red { background: #ed6b5626; color: #ffb4a7; }
.metrics { margin: 0 0 42px; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.metric { min-height: 0; padding: 0 25px; }
.metric:first-child { padding-left: 0; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric-highlight { background: transparent; }
.metric-label { margin-bottom: 7px; color: #687483; font-family: var(--body); font-size: 10px; }
.metric strong { font-family: var(--body); font-size: 29px; font-weight: 600; }
.metric strong small { color: #687483; font-size: 16px; font-weight: 500; }
.metric-foot { margin-top: 5px; color: #98a1ac; font-family: var(--body); font-size: 9px; }
.section-heading { margin-bottom: 13px; }
.section-heading h2 { font-size: 18px; font-weight: 600; }
.section-meta { color: #8792a0; }
.ranking-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ranking-table th { background: #fafbfd; color: #84909d; }
.ranking-table td { border-bottom-color: #edf0f3; }
.ranking-table tbody tr:last-child td { border-bottom: 0; }
.ranking-table tbody tr:hover { background: #f8faff; }
.ranking-table th:first-child, .ranking-table td:first-child { color: #8c97a4; }
.rank-number { color: #8994a1; }
.rank-number.top-rank { color: var(--blue); }
.win-track { border-radius: 4px; background: #e9edf2; }
.win-track i { border-radius: inherit; background: var(--blue); }
.kda { color: #657180; }
.match-heading { margin-top: 38px; }
.match-list { gap: 9px; }
.match-card { min-height: 100px; overflow: hidden; border-color: var(--line); border-radius: 8px; background: var(--surface); }
.match-meta { padding: 14px; border-color: var(--line); }
.queue-label { color: #596575; }
.match-date { color: #8c97a4; }
.team { padding: 12px 14px; }
.team + .team { border-color: var(--line); }
.team.team-win { background: transparent; box-shadow: inset 3px 0 var(--green); }
.team.team-loss { background: transparent; box-shadow: inset 3px 0 #e7a097; }
.team-heading { color: #798492; }
.team-win .team-heading strong { color: var(--green); }
.team-loss .team-heading strong { color: var(--red); }
.champion-wrap { border-radius: 7px; background: #edf1f5; }
.champion-fallback { color: #647181; }
.participant-name { color: #46515e; }
.participant-kda { color: #929ca8; }
.load-error { border-color: #f0c4bd; border-radius: 8px; background: var(--loss); color: #984b41; }
.page-footer { margin-top: 50px; border-color: var(--line); color: #8c97a4; }
.page-footer b { color: var(--blue); }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 32px, 600px); }
  .masthead { height: 60px; }
  .mode-tabs { display: flex; width: 100%; margin-top: 16px; padding: 4px; }
  .mode-tab { min-height: 35px; gap: 6px; padding: 0 11px; font-size: 11px; }
  .hero { min-height: 139px; padding: 23px 0 20px; }
  .hero h1 { font-size: 23px; }
  .hero-note { font-size: 12px; }
  .metrics { margin-bottom: 34px; padding: 19px 0; }
  .metric { min-height: 0; padding: 0 13px; }
  .metric-label { min-height: 16px; font-size: 10px; }
  .metric strong { font-size: 25px; }
  .metric-foot { font-size: 9px; }
  .ranking-table th, .ranking-table td { padding-right: 10px; padding-left: 10px; }
  .ranking-table th:nth-child(2) { min-width: 150px; }
  .win-cell { min-width: 140px; }
  .win-track { width: 50px; }
  .match-card { grid-template-columns: 1fr 1fr; }
  .match-meta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .team { padding: 11px 9px; }
  .team-roster { gap: 8px 4px; }
  .participant { min-width: 0; width: 100%; }
  .participant-name { max-width: calc(100vw - 95px); }
  .page-footer { margin-top: 38px; font-size: 8px; }
}

@media (max-width: 390px) {
  .page-shell { width: calc(100% - 28px); }
  .mode-tabs { gap: 1px; }
  .mode-tab { padding: 0 9px; }
  .metric { padding-right: 8px; padding-left: 8px; }
  .metric strong { font-size: 23px; }
  .metric-foot { line-height: 1.35; }
}

.summoner-search { position: relative; z-index: 2; width: 100%; margin: 20px 0 26px; }
.summoner-search > label { display: block; margin-bottom: 8px; color: #596575; font-size: 11px; font-weight: 600; }
.search-control { width: 100%; display: flex; gap: 7px; padding: 5px; border: 1px solid #dfe4eb; border-radius: 9px; background: var(--surface); transition: border-color .16s ease, box-shadow .16s ease; }
.search-control:focus-within { border-color: #8bb9fb; box-shadow: 0 0 0 3px #3182f615; }
.search-control input { min-width: 0; flex: 1; height: 36px; padding: 0 10px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.search-control input::placeholder { color: #a0a9b5; }
.search-button, .clear-search { min-width: 58px; padding: 0 12px; border: 0; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600; }
.search-button { background: var(--blue); color: #fff; }
.search-button:hover { background: #1b6fe5; }
.clear-search { background: #f0f3f7; color: #596575; }
.search-results { position: absolute; top: calc(100% - 5px); right: 0; left: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px #17263a18; }
.search-result { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 0; border-bottom: 1px solid #edf0f3; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result:focus-visible { outline: 0; background: #f5f9ff; }
.search-result-name { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.search-result-stats { flex: 0 0 auto; color: #7d8896; font-family: var(--body); font-size: 10px; }
.search-empty, .search-status { margin: 0; padding: 12px 14px; color: #7d8896; font-size: 11px; }
.search-status { padding: 7px 2px 0; }

@media (max-width: 760px) {
  .summoner-search { margin: 16px 0 23px; }
  .mode-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; width: 100%; margin-top: 16px; }
  .mode-tab { min-height: 37px; gap: 4px; padding: 0 4px; font-size: 10px; }
  .hero { min-height: 150px; padding: 22px 18px; }
  .hero-signal { width: 150px; gap: 7px; }
  .signal-label, .signal-caption { font-size: 7px; }
  .signal-versus { gap: 6px; }
  .side-blue, .side-red { min-width: 48px; padding: 5px 6px; font-size: 8px; }
}

@media (max-width: 430px) {
  .hero { min-height: 132px; padding: 18px 14px; }
  .hero h1 { font-size: 22px; }
  .hero-note { max-width: 205px; font-size: 11px; }
  .hero-signal { width: 110px; gap: 6px; }
  .signal-label, .signal-caption { font-size: 6px; }
  .signal-versus { gap: 4px; }
  .signal-versus strong { font-size: 14px; }
  .side-blue, .side-red { min-width: 38px; padding: 4px 3px; font-size: 7px; }
  .mode-tab { gap: 0; padding: 0 3px; font-size: 11px; }
  .tab-index { display: none; }
}

.page-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 16px 0 0; padding: 4px; border: 1px solid #e1e6ee; border-radius: 8px; background: #e9edf3; }
.page-tab { min-width: 0; min-height: 38px; padding: 0 18px; border: 0; border-radius: 5px; background: transparent; color: #647181; cursor: pointer; font-size: 12px; font-weight: 500; }
.page-tab.is-active { background: #fff; color: #1d2b3c; box-shadow: 0 1px 3px #1e293b14; }
.page-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.scrim-dashboard { padding: 20px 0 32px; }
.dashboard-banner { position: relative; min-height: 158px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; padding: 26px 30px; border-radius: 9px; background: #192a42; color: #fff; }
.dashboard-banner::after { position: absolute; top: -45px; right: 175px; width: 5px; height: 250px; content: ''; background: #e4b85d; transform: rotate(28deg); opacity: .9; }
.dashboard-banner::before { position: absolute; inset: 0 0 0 53%; content: ''; background: repeating-linear-gradient(135deg, transparent 0 18px, #ffffff0a 19px 21px); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.dashboard-banner-copy { position: relative; z-index: 1; }
.dashboard-kicker { margin: 0 0 9px; color: #adc5e7; font-family: var(--mono); font-size: 9px; }
.dashboard-kicker span { color: #e4b85d; }
.dashboard-banner h1 { margin: 0; font-size: 25px; font-weight: 600; }
.dashboard-banner-copy > p:last-child { margin: 7px 0 0; color: #c1ccda; font-size: 11px; }
.dashboard-score { position: relative; z-index: 1; min-width: 112px; display: grid; justify-items: end; gap: 2px; }
.dashboard-score span { color: #aab8ca; font-family: var(--mono); font-size: 8px; }
.dashboard-score strong { color: #fff; font-family: 'Barlow Condensed', var(--body); font-size: 43px; font-weight: 600; line-height: 1; }
.dashboard-score small { color: #d3b46b; font-size: 10px; }
.community-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 30px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.community-stats article { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; padding: 0 22px; }
.community-stats article:first-child { padding-left: 0; }
.community-stats article + article { border-left: 1px solid var(--line); }
.community-stats article > span { width: 100%; color: #84909d; font-size: 10px; }
.community-stats strong { color: #263345; font-family: 'Barlow Condensed', var(--body); font-size: 28px; font-weight: 600; line-height: 1; }
.community-stats small { color: #8a96a4; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 26px; align-items: start; }
.dashboard-section { min-width: 0; }
.dashboard-section > .section-heading { margin-bottom: 11px; }
.dashboard-section .section-heading h2 { font-size: 17px; }
.award-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.award-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.award-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #edf0f3; }
.award-heading { min-width: 0; display: grid; gap: 3px; }
.award-card h3 { margin: 0; color: #334459; font-size: 12px; font-weight: 600; }
.award-heading > span { color: #98a3b0; font-size: 9px; }
.award-toggle { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border-radius: 4px; background: #f0f3f7; }
.award-toggle button { min-width: 29px; min-height: 23px; padding: 0 6px; border: 0; border-radius: 3px; background: transparent; color: #778393; cursor: pointer; font: inherit; font-size: 8px; }
.award-toggle button.is-active { background: #fff; color: #356eb7; box-shadow: 0 1px 3px #1e293b14; }
.award-toggle button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.award-podium { display: grid; }
.award-player { min-width: 0; display: grid; grid-template-columns: 19px 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 39px; border-bottom: 1px solid #f1f3f6; }
.award-player:last-child { border-bottom: 0; }
.award-rank { color: #99a4b1; font-family: var(--mono); font-size: 9px; text-align: center; }
.award-player:first-child .award-rank { color: #d29b37; font-weight: 600; }
.award-player .profile-icon-image, .award-player .profile-icon-fallback { width: 25px; height: 25px; border-radius: 5px; object-fit: cover; }
.award-name { min-width: 0; overflow: hidden; color: #435266; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.award-name small { display: block; margin-top: 2px; color: #a0a9b5; font-size: 8px; font-weight: 400; }
.award-value { color: #375f95; font-family: var(--mono); font-size: 10px; font-weight: 500; white-space: nowrap; }
.award-empty, .dashboard-empty-inline { margin: 0; padding: 18px 8px; color: #9aa5b1; text-align: center; font-size: 10px; }
.champion-ranking, .duo-list { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.champion-stat-row { min-width: 0; display: grid; grid-template-columns: 34px minmax(65px, 1fr) 40px minmax(82px, .85fr); align-items: center; gap: 8px; min-height: 47px; padding: 6px 10px; border-bottom: 1px solid #edf0f3; }
.champion-stat-row:last-child { border-bottom: 0; }
.champion-wrap.champion-small { width: 32px; height: 32px; flex-basis: 32px; border-radius: 6px; }
.champion-stat-name { overflow: hidden; color: #46566a; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.champion-stat-games { color: #9aa5b1; font-family: var(--mono); font-size: 8px; text-align: right; white-space: nowrap; }
.champion-stat-rate { display: grid; grid-template-columns: 36px minmax(32px, 1fr); align-items: center; gap: 5px; }
.champion-stat-rate strong { color: #536e8e; font-family: var(--mono); font-size: 9px; font-weight: 500; }
.champion-stat-rate > span { height: 4px; overflow: hidden; border-radius: 4px; background: #e9edf2; }
.champion-stat-rate i { display: block; height: 100%; border-radius: inherit; background: #588ed0; }
.duo-section { grid-column: 1 / -1; }
.duo-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 58px; align-items: center; gap: 10px; min-height: 53px; padding: 8px 13px; border-bottom: 1px solid #edf0f3; }
.duo-row:last-child { border-bottom: 0; }
.duo-rank { color: #d29b37; font-family: var(--mono); font-size: 10px; }
.duo-names { min-width: 0; overflow: hidden; color: #435266; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.duo-names b { padding: 0 4px; color: #e0a857; }
.duo-names small { display: block; margin-top: 3px; color: #98a3b0; font-size: 9px; font-weight: 400; }
.duo-row > strong { color: #36795b; font-family: var(--mono); font-size: 11px; font-weight: 500; text-align: right; }
.recent-scrims-section { margin-top: 32px; }
.recent-scrims-section .game-item-build { display: none; }
.recent-scrims-section .game-summary { grid-template-columns: 150px minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(105px, 1fr) 25px; }
.recent-scrims-section .load-error { margin-top: 14px; }

@media (max-width: 760px) {
  .page-tabs { margin-top: 14px; }
  .dashboard-banner { min-height: 140px; padding: 21px 18px; }
  .dashboard-banner::after { right: 120px; }
  .dashboard-banner h1 { font-size: 21px; }
  .dashboard-score { min-width: 78px; }
  .dashboard-score strong { font-size: 35px; }
  .community-stats { margin-bottom: 24px; padding: 17px 0; }
  .community-stats article { padding: 0 12px; }
  .community-stats strong { font-size: 24px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 24px; }
  .duo-section { grid-column: auto; }
  .award-grid { gap: 7px; }
  .award-card { padding: 9px; }
  .award-player { grid-template-columns: 15px 22px minmax(0, 1fr) auto; gap: 5px; }
  .award-player .profile-icon-image, .award-player .profile-icon-fallback { width: 22px; height: 22px; }
  .champion-stat-row { grid-template-columns: 34px minmax(75px, 1fr) 40px minmax(90px, .9fr); }
  .recent-scrims-section { margin-top: 25px; }
  .recent-scrims-section .game-summary { grid-template-columns: minmax(80px, .9fr) minmax(150px, 1.2fr) minmax(90px, 1fr) 22px; }
}

@media (max-width: 390px) {
  .page-tab { padding: 0 13px; font-size: 11px; }
  .dashboard-score span { font-size: 7px; }
  .dashboard-banner-copy > p:last-child { max-width: 190px; font-size: 10px; }
  .community-stats article { padding: 0 7px; }
  .community-stats article > span { font-size: 9px; }
  .community-stats strong { font-size: 21px; }
  .award-grid { grid-template-columns: 1fr; }
  .award-player { grid-template-columns: 20px 28px minmax(0, 1fr) auto; }
  .award-player .profile-icon-image, .award-player .profile-icon-fallback { width: 27px; height: 27px; }
  .champion-stat-row { grid-template-columns: 32px minmax(55px, 1fr) 36px minmax(80px, .9fr); gap: 5px; padding: 6px; }
  .recent-scrims-section .game-summary { grid-template-columns: minmax(70px, .9fr) minmax(125px, 1.2fr) minmax(80px, 1fr) 20px; }
}

[hidden] { display: none !important; }
body { min-width: 0; }
.search-intro { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: end; gap: 32px; width: 100%; min-height: 174px; margin: 18px 0 24px; padding: 26px 30px; overflow: visible; border-radius: 9px; background: #192a42; color: #fff; transition: padding .2s ease; }
.search-intro::before { position: absolute; inset: 0 0 0 53%; content: ''; background: repeating-linear-gradient(135deg, transparent 0 18px, #ffffff0a 19px 21px); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.intro-copy { position: relative; z-index: 1; }
.search-intro .summoner-search { position: relative; z-index: 5; }
.intro-kicker { margin: 0 0 10px; color: #adc5e7; font-family: var(--body); font-size: 11px; font-weight: 600; }
.intro-kicker span { color: #e4b85d; }
.intro-copy h1 { margin: 0; color: #fff; font-size: 25px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.intro-subtitle { margin: 7px 0 0; color: #c1ccda; font-size: 11px; }
.summoner-search { min-width: 0; margin: 0; }
.summoner-search > label { margin-bottom: 8px; color: #d3deec; font-size: 11px; }
.search-control { gap: 8px; padding: 7px; border-color: #dce5ef; border-radius: 8px; box-shadow: 0 4px 18px #293d5610; }
.search-control input { height: 45px; padding: 0 14px; font-size: 14px; }
.search-button, .clear-search { min-width: 68px; min-height: 43px; border-radius: 6px; font-size: 12px; }
.search-results { z-index: 10; top: calc(100% + 6px); }
.search-result { padding: 12px 16px; }
.result-avatar { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #e8f1ff; color: #3477ce; font-size: 13px; font-weight: 700; }
.result-avatar .profile-icon-image { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.result-avatar .profile-icon-fallback { width: 34px; height: 34px; }
.search-result-name { flex: 1; font-size: 13px; }
.search-result-stats { font-size: 11px; }
.search-result-stats span { color: #b7c0cc; }
.result-arrow { color: #9aa8b7; font-size: 22px; line-height: 1; }
.has-profile .search-intro { display: block; min-height: 0; margin: 0; padding: 16px 0 18px; overflow: visible; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); }
.has-profile .intro-copy { display: none; }
.has-profile .summoner-search { margin: 0; }
.has-profile .summoner-search > label { color: #596575; }
.profile { padding-bottom: 20px; }
.profile-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.profile-identity { min-width: 0; display: flex; align-items: center; gap: 14px; }
.profile-emblem { width: 54px; height: 54px; display: grid; flex: 0 0 54px; place-items: center; border: 1px solid #bcd1ec; border-radius: 8px; background: #dceafd; color: #3677cc; font-family: var(--mono); font-size: 23px; font-weight: 500; }
.profile-emblem img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.profile-icon-fallback { display: grid; width: 100%; height: 100%; place-items: center; border: 1px solid #cfe0f5; border-radius: 6px; background: #e8f1ff; color: #3477ce; font-size: 13px; font-weight: 700; }
.profile-icon-fallback.profile-emblem { font-family: var(--mono); font-size: 23px; }
.profile-caption { margin: 0 0 5px; color: #8c9baa; font-family: var(--mono); font-size: 9px; }
.profile-identity h2 { margin: 0; overflow-wrap: anywhere; color: #202c3b; font-size: 23px; line-height: 1.2; }
.profile-region { padding: 5px 8px; border: 1px solid #dfe5ec; border-radius: 4px; color: #8a97a6; font-family: var(--mono); font-size: 10px; }
.profile .mode-tabs { margin: 0; }
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 0; padding: 21px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-stat { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 0 24px; }
.profile-stat:first-child { padding-left: 0; }
.profile-stat + .profile-stat { border-left: 1px solid var(--line); }
.profile-stat span { color: #8390a0; font-size: 11px; }
.profile-stat strong { color: #263345; font-size: 20px; font-weight: 600; }
.profile .match-heading { margin-top: 34px; }
.profile .match-heading h2 { font-size: 17px; }
.match-list { display: grid; gap: 8px; }
.game-card { overflow: hidden; border: 1px solid #dbe5f0; border-left: 4px solid #649be9; border-radius: 7px; background: #f0f6ff; }
.game-card.game-loss { border-color: #eddcdb; border-left-color: #de857e; background: #fff3f1; }
.game-card.game-blue-win { border-color: #dbe5f0; border-left-color: #649be9; background: #f0f6ff; }
.game-card.game-red-win { border-color: #eddcdb; border-left-color: #de857e; background: #fff3f1; }
.game-card.game-unknown { border-color: #e2e7ec; border-left-color: #98a7b7; background: #f6f7f9; }
.game-summary { min-height: 106px; display: grid; grid-template-columns: 150px minmax(180px, 1.3fr) minmax(120px, 1fr) minmax(105px, 1fr) 25px; grid-template-rows: 1fr 1fr; align-items: center; gap: 5px 12px; padding: 13px 20px; cursor: pointer; list-style: none; }
.game-summary::-webkit-details-marker { display: none; }
.game-summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.game-summary:hover { background: #ffffff55; }
.game-result, .game-kda, .game-damage { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.game-result { grid-column: 1; grid-row: 1 / 3; }
.game-result strong { color: #3373c7; font-size: 14px; }
.game-loss .game-result strong { color: #c7665c; }
.game-unknown .game-result strong { color: #738090; }
.game-result span { color: #5d7087; font-size: 11px; font-weight: 600; }
.game-result time { color: #8c9bac; font-size: 10px; }
.game-result .game-duration { color: #8c9bac; font-size: 9px; font-weight: 400; }
.game-red-win .game-result strong { color: #c7665c; }
.game-highlights, .participant-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.game-highlights > b { min-height: 18px; display: inline-flex; align-items: center; padding: 0 5px; border-radius: 3px; background: #e7f0ff; color: #365f99; font-family: var(--mono); font-size: 9px; font-weight: 600; }
.performance-badge { display: inline-flex; align-items: center; min-height: 16px; padding: 1px 5px; border-radius: 3px; background: #edf2f8; color: #657487; font-size: 8px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.badge-mvp { background: #fff2d6; color: #92691e; }
.badge-ace { background: #fce8e6; color: #a64e47; }
.badge-multikill { background: #e6f0ff; color: #356eb7; }
.badge-vision { background: #e5f4ed; color: #34715b; }
.badge-farm { background: #fff1dc; color: #9b6b22; }
.badge-kill-participation { background: #ecebff; color: #5d57a6; }
.game-champion { min-width: 0; grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; }
.game-champion-symbols { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.game-summoner-spells { display: grid; grid-template-rows: repeat(2, 17px); gap: 3px; }
.summoner-spell-icon, .summoner-spell-fallback { width: 17px; height: 17px; display: grid; place-items: center; overflow: hidden; border: 1px solid #dfe5ec; border-radius: 3px; background: #f3f5f8; color: #78889a; font-size: 7px; object-fit: cover; }
.game-summary.is-player-match { min-height: 122px; grid-template-columns: 132px minmax(160px, 190px) 145px minmax(190px, 240px) 22px; justify-content: space-between; gap: 7px 10px; padding: 14px 18px; }
.game-summary.is-player-match .game-result { grid-column: 1; grid-row: 1 / 3; }
.game-summary.is-player-match .game-champion, .game-summary.is-player-match .game-item-build { grid-column: 2; }
.game-summary.is-player-match .game-kda { grid-column: 3; }
.game-match-roster { min-width: 0; grid-column: 4; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 8px; padding-left: 12px; border-left: 1px solid #dfe7f1; }
.game-match-roster-team { min-width: 0; display: grid; align-content: start; gap: 3px; }
.game-match-roster-team > strong { overflow: hidden; color: #78889a; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.game-match-roster-team.is-winning-team > strong { color: #3373c7; }
.game-loss .game-match-roster-team.is-winning-team > strong { color: #c7665c; }
.game-match-roster-player { min-width: 0; display: flex; align-items: center; gap: 4px; height: 15px; color: #7e8b99; }
.game-match-roster-player .champion-wrap.champion-roster-mini { width: 14px; height: 14px; display: block; flex: 0 0 14px; border-radius: 3px; }
.game-match-roster-player > span:last-child { min-width: 0; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.game-match-roster-player.is-current-player > span:last-child { color: #2f5e98; font-weight: 700; }
.game-summary.is-player-match .game-toggle { grid-column: 5; }
.game-summary.is-team-match { min-height: 112px; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.8fr) minmax(112px, .6fr) 25px; grid-template-rows: 1fr 1fr; }
.game-summary.is-team-match .game-result { grid-column: 1; grid-row: 1 / 3; }
.game-team-lineups { min-width: 0; grid-column: 2; grid-row: 1 / 3; display: grid; align-content: center; gap: 8px; }
.game-lineup { min-width: 0; display: flex; align-items: center; gap: 9px; }
.game-lineup-label { width: 36px; flex: 0 0 36px; color: #78889a; font-size: 10px; font-weight: 600; }
.game-lineup-label small { display: block; margin-top: 2px; color: #9aa5b1; font-size: 8px; font-weight: 400; }
.game-lineup.is-winning-team .game-lineup-label { color: #3373c7; }
.game-red-win .game-lineup.is-winning-team .game-lineup-label { color: #c7665c; }
.game-champion-roster { min-width: 0; display: flex; align-items: center; gap: 4px; }
.game-roster-player { width: 22px; height: 22px; display: block; flex: 0 0 22px; aspect-ratio: 1; }
.champion-wrap.champion-lineup { width: 22px; height: 22px; display: block; flex-basis: 22px; aspect-ratio: 1; border-radius: 4px; }
.game-roster-empty { color: #9aa5b1; font-size: 9px; }
.game-team-score { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.game-team-score strong { color: #334459; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.game-team-score span { color: #8998a9; font-size: 9px; }
.game-summary.is-team-match .game-toggle { grid-column: 4; grid-row: 1 / 3; }
.game-champion > span:last-child { overflow: hidden; color: #45566b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.game-item-build { min-width: 0; grid-column: 2; grid-row: 2; align-self: start; overflow: hidden; }
.game-item-build .item-build { flex-wrap: nowrap; }
.game-item-build .item-icon { width: 25px; height: 25px; flex: 0 0 25px; }
.game-item-build .items-empty { font-size: 9px; }
.champion-wrap.champion-large { width: 48px; height: 48px; flex-basis: 48px; border: 2px solid #ffffff; border-radius: 8px; }
.champion-large .champion-fallback { font-size: 12px; }
.game-kda { grid-column: 3; grid-row: 1 / 3; }
.game-damage { grid-column: 4; grid-row: 1 / 3; }
.game-summary.is-player-match .game-kda, .game-summary.is-player-match .game-damage { padding-left: 15px; border-left: 1px solid #dfe7f1; }
.game-kda strong, .game-damage strong { color: #334459; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.game-kda strong span { color: #d36a60; }
.game-kda > span, .game-damage > span { color: #8998a9; font-size: 10px; }
.game-kda > small, .game-damage > small { color: #657f9d; font-family: var(--mono); font-size: 9px; }
.game-damage > small { color: #8998a9; font-family: var(--body); }
.game-toggle { grid-column: 5; grid-row: 1 / 3; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 5px; background: #ffffff99; color: #778da4; font-size: 20px; line-height: 1; transition: transform .18s ease; }
.game-card[open] .game-toggle { transform: rotate(180deg); }
.game-details { border-top: 1px solid #dce5f0; background: #fff; }
.match-team { padding: 15px 20px; }
.match-team + .match-team { border-top: 1px solid #e8edf2; }
.team-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #8492a1; font-size: 11px; }
.team-title strong { color: #536477; font-weight: 600; }
.team-title strong span { margin-left: 4px; color: #397acb; }
.match-team.is-loss .team-title strong span { color: #c96b60; }
.detail-table-scroll { overflow-x: auto; }
.detail-table { width: max(100%, 930px); border-collapse: collapse; table-layout: fixed; }
.detail-table th { padding: 7px 8px; color: #9aa5b1; font-size: 10px; font-weight: 500; text-align: left; }
.detail-table th:first-child { width: 25%; }
.detail-table th:nth-child(2) { width: 15%; }
.detail-table th:nth-child(3) { width: 18%; }
.detail-table th:nth-child(4) { width: 8%; }
.detail-table th:nth-child(5) { width: 12%; }
.detail-table th:nth-child(6) { width: 22%; }
.detail-table td { padding: 7px 8px; border-top: 1px solid #f0f3f6; color: #566578; font-size: 11px; }
.detail-table tr.selected-player { background: #f1f6fc; }
.detail-player { min-width: 0; display: flex; align-items: center; gap: 8px; }
.detail-player .champion-wrap { width: 32px; height: 32px; flex-basis: 32px; }
.detail-name { min-width: 0; overflow: hidden; color: #344255; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.detail-name small { display: block; margin-top: 2px; overflow: hidden; color: #9aa5b1; font-size: 9px; font-weight: 400; text-overflow: ellipsis; }
.detail-kda, .detail-damage { font-family: var(--mono); white-space: nowrap; }
.detail-kda strong { font-size: 10px; font-weight: 500; }
.detail-kda small, .detail-damage small, .detail-cs small { display: block; margin-top: 3px; color: #98a3b0; font-family: var(--body); font-size: 9px; }
.detail-vision, .detail-cs { font-family: var(--mono); white-space: nowrap; }
.detail-damage > span:first-child { display: inline-block; min-width: 60px; }
.damage-track { display: inline-block; width: 70px; height: 4px; margin-left: 5px; overflow: hidden; vertical-align: middle; border-radius: 4px; background: #e9edf2; }
.damage-track i { display: block; height: 100%; border-radius: inherit; background: #ed9b7c; }
.item-build { display: flex; flex-wrap: wrap; gap: 3px; }
.item-icon { width: 24px; height: 24px; border: 1px solid #dfe5ec; border-radius: 4px; background: #f3f5f8; object-fit: cover; }
.items-empty { color: #a0aab6; font-size: 10px; }
.team-empty { margin: 10px 0; color: #9aa5b1; font-size: 11px; }
.profile .match-empty { border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.load-more-matches { position: relative; width: 100%; min-height: 52px; display: grid; place-content: center; gap: 2px; margin: 10px 0 0; padding: 8px 48px; border: 1px solid #364153; border-radius: 5px; background: #293344; color: #fff; cursor: pointer; text-align: center; }
.load-more-matches:hover:not(:disabled) { border-color: #53647d; background: #323f53; }
.load-more-matches:disabled { cursor: wait; opacity: .8; }
.more-label { font-size: 13px; font-weight: 600; }
.more-caption { color: #aeb9c8; font-size: 9px; }
.more-chevron { position: absolute; top: 50%; right: 17px; color: #c5d0df; font-size: 20px; transform: translateY(-55%); }

@media (max-width: 760px) {
  .search-intro { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 22px 18px; }
  .intro-copy h1 { font-size: 22px; }
  .has-profile .search-intro { padding: 16px 0 18px; }
  .profile .mode-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .profile .mode-tab { font-size: 11px; }
  .profile-stat { padding: 0 12px; }
  .profile-stat strong { font-size: 17px; }
  .game-summary { grid-template-columns: minmax(80px, .9fr) minmax(150px, 1.2fr) minmax(90px, 1fr) 22px; gap: 5px 8px; padding: 12px; }
  .game-summary.is-player-match { min-height: 122px; grid-template-columns: minmax(78px, .78fr) minmax(125px, 1.2fr) minmax(88px, .9fr) 22px; gap: 5px 8px; padding: 12px; }
  .game-summary.is-player-match .game-result { grid-column: 1; grid-row: 1 / 3; }
  .game-summary.is-player-match .game-champion, .game-summary.is-player-match .game-item-build { grid-column: 2; }
  .game-summary.is-player-match .game-kda { grid-column: 3; }
  .game-summary.is-player-match .game-toggle { grid-column: 4; }
  .game-match-roster { display: none; }
  .game-summary.is-team-match { min-height: 112px; grid-template-columns: minmax(82px, .72fr) minmax(0, 1fr) 22px; grid-template-rows: 1fr 1fr; gap: 5px 7px; }
  .game-result { grid-column: 1; }
  .game-summary.is-team-match .game-result { grid-column: 1; grid-row: 1 / 3; }
  .game-team-lineups { grid-column: 2; grid-row: 1 / 3; gap: 8px; }
  .game-lineup { gap: 5px; }
  .game-lineup-label { width: 29px; flex-basis: 29px; font-size: 9px; }
  .game-lineup-label small { font-size: 7px; }
  .game-champion-roster { gap: 3px; }
  .game-roster-player, .champion-wrap.champion-lineup { width: 18px; height: 18px; flex-basis: 18px; }
  .game-team-score { display: none; }
  .game-champion, .game-item-build { grid-column: 2; }
  .game-item-build .item-build { gap: 1px; }
  .game-item-build .item-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .game-kda { grid-column: 3; }
  .game-summary.is-player-match .game-kda, .game-summary.is-player-match .game-damage { padding-left: 0; border-left: 0; }
  .game-toggle { grid-column: 4; }
  .game-summary.is-team-match .game-toggle { grid-column: 3; grid-row: 1 / 3; }
  .game-damage { display: none; }
  .game-result time { font-size: 9px; }
  .game-champion { gap: 6px; }
  .game-champion-symbols { gap: 3px; }
  .game-summoner-spells { grid-template-rows: repeat(2, 14px); gap: 2px; }
  .summoner-spell-icon, .summoner-spell-fallback { width: 14px; height: 14px; }
  .champion-wrap.champion-large { width: 40px; height: 40px; flex-basis: 40px; }
  .game-kda strong { font-size: 12px; }
  .match-team { padding: 12px; }
  .detail-table { min-width: 930px; }
  .detail-table th, .detail-table td { padding-right: 4px; padding-left: 4px; font-size: 10px; }
  .detail-damage > span:first-child { min-width: 0; }
  .damage-track { display: none; }
  .item-icon { width: 22px; height: 22px; }
}

@media (max-width: 390px) {
  .search-intro { gap: 14px; padding: 18px 12px; }
  .intro-copy h1 { font-size: 20px; }
  .search-result-stats { font-size: 10px; }
  .profile-stat { padding: 0 7px; }
  .profile-stat strong { font-size: 14px; }
  .game-summary { grid-template-columns: minmax(70px, .9fr) minmax(125px, 1.2fr) minmax(80px, 1fr) 20px; gap: 5px; padding: 12px 8px; }
  .game-toggle { width: 20px; height: 22px; }
  .game-champion > span:last-child { font-size: 10px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .game-summary.is-player-match { grid-template-columns: 132px minmax(160px, 210px) minmax(130px, 155px) 22px; }
  .game-summary.is-player-match .game-toggle { grid-column: 4; }
  .game-match-roster { display: none; }
}