@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/nunito-400-800-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/nunito-400-800-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Tiny5';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/tiny5-400-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Tiny5';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/tiny5-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Онлайн в Steam. Идея: таблица рекордов игрового автомата. Место, игра и «счёт» — сколько людей играет сейчас;
доля игр в общем онлайне показана пиксельной мозаикой (1 клетка — 10 000 игроков, на странице игры — 1 процент).
Tiny5 — только числа и места (у Pixelify Sans цифры 5 и 8 не различались), Nunito — текст. Светлый лавандовый экран, фиолетовый пиксель. */
:root{
--paper:#fbfaff; --screen:#f1edfb; --ink:#1c1336; --muted:#5a5274; --line:#e2dcf3;
--violet:#5a2fd9; --violet-2:#3d1fa3; --cell:#d6cdef;
--up:#13723a; --down:#b0281e;
--wrap:1200px; --pad:clamp(16px,4vw,48px);
--px:"Tiny5","Nunito",sans-serif; --text:"Nunito",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--text);font-variant-numeric:tabular-nums lining-nums}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--violet);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--violet-2)}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.head,main,.foot{width:min(100% - 2 * var(--pad),var(--wrap));margin-left:auto;margin-right:auto}
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:16px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 21px var(--text);text-decoration:none}
.brand-mark{width:22px;height:22px}.brand-mark .a{fill:var(--violet)}.brand-mark .b{fill:var(--cell)}
.nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.nav a{text-decoration:none;font-weight:700;font-size:16.5px;padding:4px 0;border-bottom:3px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current]{border-color:var(--violet)}
main{padding-bottom:16px}
main:focus{outline:0}
.crumbs{font-size:15px;color:var(--muted);padding-top:8px}
.crumbs a{color:var(--muted);text-decoration-color:var(--line)}
h1{font:800 clamp(32px,4.4vw,52px)/1.08 var(--text);letter-spacing:-.015em;margin:.35em 0 .2em;text-wrap:balance}
h2{font:800 clamp(23px,2.4vw,29px)/1.2 var(--text);margin:1.8em 0 .5em}
p{margin:0 0 1em;max-width:40em;text-wrap:pretty}
.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.5}
.upd{font-size:15.5px;color:var(--muted);margin-bottom:1.2em}
.src{font-size:15px;color:var(--muted)}
/* Экран счёта */
.score{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:24px clamp(28px,4vw,64px);align-items:start;margin:10px 0 18px;padding:clamp(20px,3vw,36px);background:var(--screen);border-radius:6px}
.score p{margin:0;max-width:none}
.score-k{font-weight:700;font-size:17px}
.score-n{font:400 clamp(48px,6vw,88px)/1 var(--px);letter-spacing:.01em;margin-top:8px!important;color:var(--violet-2);word-break:keep-all;white-space:nowrap}
.score-u{font:800 20px var(--text);margin-top:6px!important}
.score-t{margin-top:18px!important;font-size:17px;max-width:26em!important}
.place{margin-top:18px!important;font-weight:700;font-size:17px;display:flex;align-items:baseline;gap:10px}
.place-n{font:400 44px/1 var(--px);color:var(--violet-2)}
.score-w{margin:0;min-width:0}
.waffle{display:block;width:100%;height:auto}
.waffle .w0.above{fill:#bfb3e6}.waffle .w1{fill:var(--violet)}.waffle .w2{fill:var(--ink)}.waffle .w0{fill:var(--cell)}
.score.solo{grid-template-columns:minmax(0,1fr)}
.waffle g:hover{opacity:.8}
.share .waffle{max-width:250px}
.score-w figcaption{margin-top:12px;font-size:16px}
.unit{font:700 15px var(--text)!important;color:var(--muted)}
.legend{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px}
.legend li{display:flex;align-items:center;gap:7px;margin:0}
.sw{width:12px;height:12px;flex:none}.sw.w1{background:var(--violet)}.sw.w2{background:var(--ink)}.sw.w0{background:var(--cell)}
.lg-s{font:700 15px var(--text);color:var(--muted)}
/* Плитки и сведения */
.tiles{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 10px}
.tiles div{margin:0;padding:14px 18px;border:2px solid var(--line);border-radius:6px;min-width:170px}
.tiles dt{font-size:14.5px;color:var(--muted)}
.tiles dd{margin:4px 0 0;font:400 32px/1 var(--px)}
.about{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;margin:0 0 1em;max-width:760px}
.about div{display:contents}
.about dt{color:var(--muted)}
.about dd{margin:0}
/* Таблица рекордов */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.2em}
table{border-collapse:collapse;width:100%;font-size:17px}
table.narrow{max-width:560px}
table.board{max-width:960px}
thead th{font-size:14px;font-weight:700;color:var(--muted);text-align:left;padding:8px 16px 8px 0;border-bottom:3px solid var(--ink);vertical-align:bottom}
thead abbr{text-decoration:underline dotted;cursor:help}
td,tbody th{padding:8px 16px 8px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
tbody th{font-weight:700}
.num,th.num{text-align:right;white-space:nowrap}
td:last-child,th:last-child{padding-right:0}
tbody tr:hover th,tbody tr:hover td{background:var(--screen)}
.board .rk{width:3.6em;font:400 22px var(--px);color:var(--violet-2)}
.board thead .rk{font:700 14px var(--text);color:var(--muted)}
.board .game a{text-decoration-color:var(--line)}
.board .game a:hover{text-decoration-color:var(--violet)}
.board .first .rk,.board .first .score-c{color:var(--violet)}
.score-c{font:400 20px var(--px)}
.free{display:inline-block;font-size:12.5px;font-weight:700;padding:0 6px;border-radius:3px;background:var(--screen);color:var(--violet-2);vertical-align:2px}
.out{font:600 14px var(--text);color:var(--muted)}
.mv{font:400 17px var(--px);white-space:nowrap}
.mv.up{color:var(--up)}.mv.down{color:var(--down)}
.mv.same,.mv.none{font:600 14px var(--text);color:var(--muted)}
.mv.new{font:700 13px var(--text);padding:1px 7px;border-radius:3px;background:var(--violet);color:#fff}
.m-only,.m-only-vh{display:none}
.chips{list-style:none;padding:0;margin:8px 0 1.4em;display:flex;flex-wrap:wrap;gap:6px}
.chips li{margin:0}
.chips a{display:inline-block;padding:6px 12px;border:2px solid var(--line);border-radius:4px;text-decoration:none;font-weight:700;font-size:16px}
.chips a:hover{border-color:var(--violet)}
/* График истории (общий генератор line_chart) */
.chart{display:block;width:100%;max-width:760px;height:auto;margin:6px 0 16px}
.chart .grid{stroke:var(--line)}
.chart .tick{font:13px var(--text);fill:var(--muted)}
.chart .line{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linejoin:round}
.chart .dot{fill:var(--violet);stroke:var(--paper);stroke-width:2}
.foot{margin-top:56px;padding:24px 0 40px;border-top:3px solid var(--ink);font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot nav a{color:var(--muted)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--ink);color:#fff;padding:12px 14px 12px 18px;font-size:14.5px;border-radius:6px;z-index:5}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:700 15px/1 var(--text);min-height:40px;padding:0 16px;border:0;border-radius:4px;background:var(--cell);color:var(--ink);cursor:pointer}
@media(max-width:860px){.score{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
body{font-size:17px}
.head{display:block}
.nav{margin-top:6px;gap:4px 18px}
.score{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);border-radius:0;padding:20px var(--pad)}
.m-hide{display:none}
.m-only{display:inline}
.m-only-vh{display:block}
.board thead .mv-h{font-size:0}
.board thead .mv-h abbr::before{content:"Неделя";font-size:14px}
table{font-size:15.5px}
td,tbody th,thead th{padding-right:10px}
.board .rk{width:2.4em;font-size:18px}
.score-c{font-size:17px}
.tiles div{min-width:0;flex:1 1 40%}
.share .waffle{max-width:200px}
.about{grid-template-columns:minmax(0,1fr);gap:2px}
.about dd{margin-bottom:8px}
}