/* latin-ext
@font-face {
    font-family: 'Finlandica';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/finlandica/v8/-nF5OGk-8vAc7lEtg0aS45KFOisNA_dp1g.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
} */

/* latin */
@font-face {
    font-family: 'Finlandica';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(finlandica.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;
}

* {
    box-sizing: border-box;
}

:root {
    --dark: #202125;
    --light: #fff;
    --grey-900: #313435;
    --grey-700: #626565;
    --grey-500: #B3B3B3;
}

html, body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

body {
    background-color: var(--dark);
    background-image: url("data:image/svg+xml,%3Csvg width='327' height='122' viewBox='0 0 327 122' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.9432 1.67819C3.36999 5.11812 -0.709044 13.2788 0.101606 23.372C0.66604 30.4074 2.65267 34.2864 12.008 46.6204C21.3643 58.9562 22.4434 61.1766 21.8878 66.9551C21.5403 70.5719 20.9136 71.9292 18.6621 73.9416C15.1635 77.0669 9.01343 77.3851 4.56196 74.6705L1.67313 72.9088V78.2749C1.67313 83.5575 1.72113 83.6606 4.75574 84.9281C8.88188 86.6525 17.9724 86.5787 21.7394 84.7912C26.0211 82.7592 30.7374 77.1771 31.9463 72.7114C33.4245 67.2458 32.5623 57.9704 30.1215 53.0825C29.005 50.847 24.6904 44.488 20.5341 38.9512C12.0374 27.6315 10.5618 24.7524 10.5618 19.4903C10.5618 16.4983 11.1218 15.2575 13.584 12.7953C17.0302 9.34915 20.8345 8.84249 26.254 11.1064C28.0095 11.8398 29.5961 12.4398 29.781 12.4398C29.9659 12.4398 30.117 10.2771 30.117 7.63452V2.82928L25.9589 1.41242C20.5136 -0.442655 15.4142 -0.352879 10.9432 1.67819ZM73.0237 1.85774C61.855 7.38652 57.5289 19.4805 57.4756 45.328C57.4311 67.0333 60.2373 76.602 68.2825 82.177L71.894 84.6801V103.226V121.771H76.7827H81.6715V103.993V86.2161H83.7613C84.9106 86.2161 87.1105 85.777 88.6501 85.2401C91.3682 84.2925 91.4491 84.1103 91.4491 78.9584C91.4491 73.8332 91.3807 73.6768 89.4492 74.379C88.3496 74.7781 85.3817 75.1052 82.8537 75.1052C79.1783 75.1052 77.7818 74.6598 75.8805 72.883C70.7678 68.1044 69.3109 61.7374 69.118 43.3182C69.0549 37.281 68.5909 31.9229 68.0763 31.2785C67.4025 30.4341 67.4674 30.1914 68.3136 30.3896C69.1225 30.5781 69.8362 28.6217 70.6442 23.9951C71.2851 20.3285 72.4255 15.5864 73.1793 13.4566C73.9321 11.326 74.2895 9.16426 73.973 8.65227C73.6557 8.14029 73.7855 7.96073 74.2601 8.25406C74.7348 8.54739 75.837 7.57852 76.7099 6.10121C77.5827 4.62391 79.556 2.64706 81.0955 1.70841L83.8937 0.00178057L80.3382 2.82858e-06C78.3827 -0.00177491 75.0912 0.834653 73.0237 1.85774ZM112.782 2.3404C112.782 2.89595 115.982 13.6415 119.893 26.2173L127.004 49.0835V67.2049V85.3272H132.782H138.559V67.6555V49.983L143.536 34.5451C150.148 14.0362 152.875 5.3039 153.424 2.88439C153.856 0.97865 153.62 0.88443 148.441 0.88443C145.45 0.88443 143.004 1.05954 143.004 1.27287C143.004 1.92885 134.113 35.018 133.555 36.4393C133.047 37.7326 132.201 34.9362 126.092 11.7713L123.219 0.880874L118.001 1.10487C114.825 1.24087 112.783 1.72441 112.782 2.3404ZM172.336 6.3101V11.6798L177.003 11.5393C179.569 11.462 182.369 11.4336 183.225 11.4753C184.68 11.5464 184.781 13.9286 184.781 48.439V85.3272H190.114H195.447V48.439V11.5509H201.58H207.713V6.23099V0.911096L190.025 0.925318L172.336 0.940429V6.3101ZM232.093 2.11285C231.737 2.65951 231.316 21.6067 231.157 44.2169L230.867 85.3272H236.712H242.557V64.4387V43.5502H250.557H258.557V64.4387V85.3272H264.335H270.112V43.2596V1.19198L264.557 1.26042L259.001 1.32887L258.759 17.5508L258.517 33.7727H250.537H242.557V17.333V0.892429L237.648 1.00621C234.948 1.06843 232.448 1.56619 232.093 2.11285ZM298.171 1.56531C297.894 1.84263 297.667 20.8023 297.667 43.6987V85.3272H312.334H327V80.4384V75.5496H318.111H309.223V61.3277V47.1057H317.222H325.222V42.2169V37.3281H317.222H309.223V24.4715V11.6149L317.889 11.3607L326.556 11.1064V6.21766V1.32887L312.615 1.19553C304.948 1.12176 298.449 1.28887 298.171 1.56531Z' fill='%23313435'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center 40px;
    font-family: "Finlandica", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100dvh;
    gap: 24px;

    touch-action: manipulation; /* prevent double tap to zoom */
}

body:not(.has-players) {
    padding-bottom: 48px;
}

body:not(.has-players) .score-grid {
    display: none;
}

button, input {
    appearance: none;
    border: none;
    background-color: transparent;
    font-family: "Finlandica", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    padding: 0;
    margin: 0;
}

button {
    background-color: var(--light);
    color: var(--dark);
    font-size: 16px;
    font-weight: 600;
    padding: 4px 6px;
    flex-shrink: 0;
}

button.opaque {
    background-color: transparent;
    color: var(--light);
}

.player-input {
    background-color: var(--grey-900);
    border: 1px solid transparent;
    padding: 4px;
    display: flex;
    gap: 4px;
    max-width: 240px;
}

.player-input input {
    font-size: 16px;
    padding: 0 4px;
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
    outline: none;
    color: var(--light);
}

.player-input:focus-within {
    border-color: var(--grey-500);
}

.score-grid {
    color: var(--light);
    border: none;
    border-collapse: collapse;

    width: 100vw;
    display: block;
    overflow-x: auto;
}

.score-grid tr:last-child td {
    padding-bottom: 24px;
    height: 88px;
}

.score-grid tr td {
    height: 64px;
    text-align: center;
    white-space: nowrap;
}

.score-grid tr td:first-child {
    min-width: 64px;
    width: 64px;
    position: fixed;
    background-color: var(--dark);
    padding-top: 20px;
    z-index: 1;
}

/* TODO: better selector */
.score-grid tr:first-child, .score-grid tr:nth-child(2) {
    font-size: 20px;
    font-weight: 600;
}

.score-grid tr:nth-child(2) {
    color: gold;
}

.score-grid tr:nth-child(2) {
    border-bottom: 1px solid var(--light);
}

.score-grid tr td:nth-child(2) {
    padding-right: 24px;
    padding-left: 64px;
    text-align: left;
}

.score-grid tr:nth-child(n + 2) td:nth-child(n+3) {
    background-color: var(--grey-900);
}

.score-grid tr td:nth-child(n+4) {
    border-left: 1px solid var(--grey-700);
}

.input-value {
    display: flex;
    align-items: center;
}

.input-value button {
    padding: 10px;
    height: 40px;
    width: 40px;
    opacity: 0.5;
}

.input-value span {
    width: 32px;
}