/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
menu, ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end reset css */

img {
    display: block;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

input {
    vertical-align: middle;
}

table,
tr,
th,
td {
    border: 0.1em solid;
}

tr {
    background: #fff;
}

th {
    position: sticky;
    top: 0;
}

th,
td {
    vertical-align: middle;
    padding: 0.2em;
    background: inherit;
}

.pointer {
    cursor: pointer;
}

.i-arrow-up::before {
    content: '\2191';
}

.i-arrow-down::before {
    content: '\2193';
}

.i-black-star::before {
    content: '\2605';
}

.i-white-star::before {
    content: '\2606';
}

.i-country-us::before {
    content: '\1f1fa \1f1f8';
}

.i-country-cz::before {
    content: '\1f1e8 \1f1ff';
}

.i-country-fr::before {
    content: '\1f1eb \1f1f7';
}

.i-country-it::before {
    content: '\1f1ee \1f1f9';
}

.i-country-de::before {
    content: '\1f1e9 \1f1ea';
}

.i-country-ne::before {
    content: '\1f1f3 \1f1ea';
}

.i-country-ru::before {
    content: '\1f1f7 \1f1fa';
}

.i-country-pl::before {
    content: '\1f1f5 \1f1f1';
}

.i-gear::before {
    content: '\2699';
}

.game-list, .game-list2, .settings, table {
    max-width: 1024px;
    margin: 0 auto;
}

.settings {
    padding: 1em 0;
}

.footer {
    margin: 2em auto;
    display: table;
    text-align: center;
}

.footer img {
    margin: 1rem auto;
}

.card-list {
    display: flex;
    flex-direction: column;
}

.card {
    border-top: 0.1em solid;
    border-right: 0.1em solid;
    border-left: 0.1em solid;
    padding: 0.2em;
}
.card:last-child {
    border-bottom: 0.1em solid;
}

.card-header {
    margin-bottom: 1em;
}

.card-content {
    display: flex;
    gap: 1em;
}
.card-content div:first-child {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
}
.card-content img {
    object-fit: scale-down;
    object-position: top;
    width: 100%;
    height: 100%;
}

.settings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings--actions {
    flex-grow: 1;
    text-align: right;
}