@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400&family=Source+Code+Pro:wght@400&display=swap";*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--font:"Nunito", system-ui, sans-serif;--bg:#212121;--bg-darker:#1b1b1b;--bg-surface:#0a0a0a;--bg-card:#0f3460;--accent:#01579b;--accent-hover:#0075cf;--text:#eaeaea;--text-muted:#a0a8b8;--border:var(--accent);--scrollbar:var(--accent);--gold:#ffd700;--silver:#c0c0c0;--bronze:#cd7f32;--radius:.2rem;--toc-w:18em;--player-head-size:2em;--player-grid-head-size:5em}html{hanging-punctuation:first last}body{height:100dvh;min-height:100dvh;text-rendering:optimizeLegibility;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;gap:0;grid-template-areas:"top top" "toc main" "footer footer";overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--scrollbar)transparent;font-size:1em;font-family:var(--font);background:var(--bg);color:var(--text);transition:background .2s ease,color .2s ease;&.light{--bg:#f5f5f5;--bg-darker:#e0e0e0;--bg-surface:#ffffff;--bg-card:#b7daf8;--accent:#1d80e4;--accent-hover:#0063c7;--border:var(--accent);--text:#202020;--text-muted:#5f6368}}a{color:var(--accent);text-decoration:none;&:hover{color:var(--accent-hover);text-decoration:underline}}img{display:block}h1,h2,h3,h4,h5,h6{color:var(--text);margin:.8rem 0}.loading{display:grid;place-items:center;gap:1rem;padding:4rem;color:var(--text-muted)}.spinner{width:3em;height:3em;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{padding:2rem;color:var(--accent)}.hint{color:var(--text-muted);padding:1rem 0}#top{display:grid;align-items:center;grid-area:top;grid-template-columns:auto 1fr auto;grid-template-rows:min-content;gap:.5rem;grid-template-areas:"left navigation right";background:var(--bg-surface);.left{grid-area:left;padding:0 1rem;color:var(--text);&:hover{text-decoration:none}}.navigation{display:grid;grid-area:navigation;grid-auto-flow:column;grid-auto-columns:min-content;grid-auto-rows:1fr;gap:.25rem;a{padding:.5rem .75rem;margin:.25rem 0;border-radius:var(--radius);color:var(--text-muted);transition:color .15s,background .15s;&:hover{color:var(--text);background:var(--bg-card);text-decoration:none}&.active{color:var(--text);background:var(--accent)}}}.right{display:grid;grid-area:right;grid-auto-flow:column;grid-auto-columns:min-content;grid-auto-rows:1fr;gap:.75rem;padding:.25rem 1rem;.links{display:grid;grid-auto-flow:column;grid-auto-columns:min-content;grid-auto-rows:1fr;gap:.75rem;a{color:var(--text-muted);&:hover{color:var(--text);text-decoration:none}}}} #theme-button { background: none; border: none; &:hover { cursor: pointer; } } #language-switcher { position: relative; &:hover { cursor: pointer; } .hidden { display: none; } #language { position: absolute; right: 0; list-style: none; text-wrap: nowrap; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); li { padding: .25rem .5rem; &:hover { cursor: pointer; background: var(--bg-card); } } } } #mobile-toc-toggle.hidden, #mobile-extra-toggle.hidden { display: none; }}#toc{grid-area:toc;background:var(--bg-surface);overflow-y:scroll;width:clamp(220px,20vw,320px);scrollbar-gutter:both-edges;padding:0 .5rem 1rem; #toc-search { display: block; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); margin: 1rem 0; padding: .5rem; outline: none; font-size: 1em; width: 100%; &:focus { border-color: var(--accent); } } #toc-list { a { display: block; padding: .25rem .5rem; border-radius: var(--radius); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.12s, background 0.12s; &:hover { background: var(--bg-card); color: var(--text); text-decoration: none; } &.active { color: var(--text); background: var(--accent); } } }}#main{display:grid;grid-area:main;grid-auto-columns:1fr;grid-auto-rows:min-content;gap:.5rem;overflow-y:scroll;background:var(--bg);padding:1rem}.score-table{border-collapse:collapse;border-radius:var(--radius);background:var(--bg-darker);min-width:25%;margin-bottom:1em;thead{th{text-align:left;font-size:.85em;padding:.4rem .6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background-color:var(--bg-surface);&:last-child{text-align:right}}}thead th, tbody tr:not(:last-child){border-bottom:1px solid var(--bg-surface);transition:background .1s}tbody{tr{&:nth-child(even){background:var(--bg)}&:nth-child(1) .rank{color:var(--gold)}&:nth-child(2) .rank{color:var(--silver)}&:nth-child(3) .rank{color:var(--bronze)}&:hover{background:var(--bg-card)}}td{padding:.45rem .6rem;vertical-align:middle}}.rank{width:0;text-align:center;color:var(--text-muted);font-variant-numeric:tabular-nums;font-family:source code pro,monospace}.score{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-family:source code pro,monospace}.player-cell{white-space:nowrap}.player-link{display:block;color:var(--text);&:not(:first-of-type){margin-top:.5em}&:hover{color:var(--accent);text-decoration:none}}.head-img{display:inline;vertical-align:middle;width:var(--player-head-size);height:var(--player-head-size);margin-right:.5em;image-rendering:pixelated;border-radius:2px}}#player-grid{display:grid;grid-template-columns:repeat(auto-fill,var(--player-grid-head-size));gap:.5rem;padding:.5rem 0;.player-card{position:relative;display:block;width:var(--player-grid-head-size);height:var(--player-grid-head-size);border-radius:var(--radius);text-decoration:none;.player-card-head{width:var(--player-grid-head-size);height:var(--player-grid-head-size);image-rendering:pixelated;border-radius:var(--radius);display:block}&:hover .player-card-name{opacity:.85}.player-card-name{display:flex;position:absolute;z-index:10;align-items:center;justify-content:center;top:0;width:100%;height:100%;background:var(--bg-surface);color:var(--text);word-break:break-all;padding:0 .5em;text-align:center;font-family:source code pro,monospace;opacity:0;transition:.2s}}}#player-profile{.player-header{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.5rem;margin-bottom:1.8rem}.body-img{width:7em;image-rendering:pixelated}.medals{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:.75rem}.medal.gold{color:var(--gold)}.medal.silver{color:var(--silver)}.medal.bronze{color:var(--bronze)}}#footer{grid-area:footer;color:var(--text-muted);background:var(--bg-surface);text-align:center;line-height:2.5rem}@media(max-width:790px){#top{display:grid;grid-template-columns:auto 1fr min-content;grid-template-rows:min-content min-content;gap:0 0;grid-template-areas:"left navigation mobile-extra-toggle" "right right right"; #mobile-toc-toggle { display: block; grid-area: left; &.hidden { display: block; } } a { &.hidden { display: none; } } #mobile-extra-toggle { grid-area: mobile-extra-toggle; padding: 0 1rem; &.hidden { display: block; } &:hover { cursor: pointer; } } .left { grid-area: left; background: var(--accent); outline: none; border: none; color: var(--text); padding: 0 1rem; line-height: 2rem; margin: 0 1rem; border-radius: var(--radius); &:hover { cursor: pointer; } } .navigation { overflow: auto; } .right { justify-self: end; align-self: center; &.hidden { display: none; } .links { display: grid; justify-self: end; align-self: center; padding: .25rem 0; } }}#toc{width:auto;&.hidden{display:none}}}