.game-art {
    position: relative;
    display: inline-block;
    isolation: isolate;
    width: var(--game-art-size, 240px);
    max-width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

.game-art-piece {
    position: absolute;
    display: block;
    box-sizing: border-box;
}

.game-art .game-art-picture,
.game-art .game-art-piece img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.game-art-geometry {
    position: absolute;
    display: block;
    color: var(--accent);
}

.game-art-friends .game-art-locomotive-red { width: 30%; height: 80%; left: 2%; top: 10%; }
.game-art-friends .game-art-locomotive-blue { width: 30%; height: 80%; right: 2%; top: 10%; }
.game-art-friends .game-art-piece img { position: absolute; width: 266.666667%; max-width: none; height: 37.5%; left: 50%; top: 50%; }
.game-art-friends .game-art-locomotive-red img { transform: translate(-50%, -50%) rotate(90deg); }
.game-art-friends .game-art-locomotive-blue img { transform: translate(-50%, -50%) rotate(-90deg); }
.game-art-link { width: 24%; height: 32%; left: 38%; top: 34%; }

.game-art-apps .game-art-tablet,
.game-art-apps .game-art-phone {
    padding: 1%;
    overflow: hidden;
    background: #20262b;
    border: 1px solid #788690;
}

.game-art-apps .game-art-picture { overflow: hidden; border-radius: 4%; }
.game-art-apps .game-art-tablet { width: 64%; height: 47%; left: 1%; top: 26%; border-radius: 6%; }
.game-art-apps .game-art-phone { width: 28%; height: 62%; right: 1%; top: 19%; border-radius: 10%; }

.game-art-maps .game-art-map-russia { width: 94%; height: 52%; left: 3%; top: 7%; }
.game-art-maps .game-art-map-belarus { width: 44%; height: 33%; left: 3%; top: 64%; }
.game-art-maps .game-art-map-metro { width: 44%; height: 33%; right: 3%; top: 64%; }

.game-art-fair-play .game-art-board { width: 98%; height: 98%; left: 1%; top: 1%; }

.game-art-passport .game-art-stamp-first { width: 33%; height: 33%; left: 3%; top: 3%; }
.game-art-passport .game-art-stamp-journey { width: 33%; height: 33%; left: 35%; top: 37%; }
.game-art-passport .game-art-reward { width: 35%; height: 27%; left: 63%; top: 73%; }
.game-art-progress { inset: 0; width: 100%; height: 100%; color: var(--muted); }
.game-art-progress-arrow { stroke: var(--accent); }

.game-art-arena .game-art-rank { width: 58%; height: 58%; left: 21%; top: 1%; }
.game-art-arena .game-art-locomotive-red { width: 32%; height: 18%; left: 1%; top: 75%; }
.game-art-arena .game-art-locomotive-blue { width: 32%; height: 18%; right: 1%; top: 75%; transform: scaleX(-1); }
.game-art-timer { width: 24%; height: 26%; left: 38%; top: 71%; }
.game-art-timer-value { fill: var(--text); stroke: none; font-family: inherit; font-size: 34px; font-weight: 700; }

.game-art-mechanics .game-art-card-locomotive { width: 58%; height: 39%; left: 21%; top: 3%; }
.game-art-exchange { width: 26%; height: 13%; left: 37%; top: 46%; }
.game-art-mechanics .game-art-payment-first { width: 29%; height: 20%; left: 3%; top: 69%; }
.game-art-mechanics .game-art-payment-second { width: 29%; height: 20%; left: 35.5%; top: 69%; }
.game-art-mechanics .game-art-payment-third { width: 29%; height: 20%; left: 68%; top: 69%; }

.game-art-compact { --game-art-size: 56px; }
.game-art-compact .game-art-piece { inset: 3%; width: 94%; height: 94%; transform: none; }
.game-art-compact.game-art-friends .game-art-piece img { position: static; width: 100%; max-width: 100%; height: 100%; transform: none; }
.game-art-compact .game-art-phone { width: 48%; height: 96%; left: 26%; top: 2%; right: auto; bottom: auto; padding: 2%; }